/* ===========================================================================
   CARCHECK Berlin – Footer („Blaupause Pro")
   Gehört nach /assets/css/footer.css
   Eingebunden im <head> jeder Seite:
   <link rel="stylesheet" href="/assets/css/footer.css?v=2">
   Das HTML dazu steht in /includes/footer.php
   =========================================================================== */

/* ---- Footer A „Blaupause Pro" ------------------------------------------- */
.ccft{
  --ft-blue:#03A3FA; --ft-sig:#FF6B1F; --ft-ink:#EEF5FC; --ft-mut:#9DB4CB;
  --ft-line:rgba(141,187,230,.18); --ft-card:rgba(255,255,255,.045);
  position:relative; isolation:isolate; overflow:hidden;
  padding-top:clamp(2rem,5vw,3.25rem);
  border-top:3px solid var(--ft-blue);
  border-image:linear-gradient(90deg,var(--ft-blue) 0%,#1B6FD0 48%,var(--ft-sig) 100%) 1;
  background:#07192B; color:var(--ft-ink);
  font-family:var(--font-body,"Source Sans 3",system-ui,sans-serif);
  line-height:1.55;
}
/* Verlauf + Blaupause-Raster + Lichtschein */
.ccft::before{content:"";position:absolute;inset:0;z-index:-2;
  background:linear-gradient(180deg,#0A2440 0%,#07192B 42%,#061527 100%)}
.ccft::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(58rem 20rem at 10% -12%,rgba(3,163,250,.22),transparent 72%),
    radial-gradient(40rem 16rem at 94% -4%,rgba(255,107,31,.14),transparent 72%),
    repeating-linear-gradient(0deg,rgba(141,187,230,.075) 0 1px,transparent 1px 46px),
    repeating-linear-gradient(90deg,rgba(141,187,230,.075) 0 1px,transparent 1px 46px);
  -webkit-mask:linear-gradient(180deg,#000,rgba(0,0,0,.3) 62%,transparent);
          mask:linear-gradient(180deg,#000,rgba(0,0,0,.3) 62%,transparent)}
.ccft a{color:inherit;text-decoration:none}
.ccft :focus-visible{outline:3px solid #FFB37F;outline-offset:2px;border-radius:6px}
.ccft-i{display:block;width:1.3em;height:1.3em;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ccft-i--f{fill:currentColor;stroke:none}

/* ---- Schnellkontakt ----------------------------------------------------- */
.ccft__quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr));
  gap:.75rem;margin:0 0 clamp(2rem,4vw,3rem);padding:0;list-style:none}
.ccft__card{position:relative;isolation:isolate;overflow:hidden;
  display:flex;align-items:center;gap:.85rem;padding:.9rem 1rem;border:0;border-radius:16px;
  background:
    radial-gradient(130% 82% at 50% -32%,rgba(255,255,255,.28),rgba(255,255,255,0) 62%),
    linear-gradient(160deg,rgba(255,255,255,.17) 0%,rgba(255,255,255,.04) 48%,rgba(255,255,255,.10) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -16px 26px rgba(2,20,42,.45),0 10px 26px rgba(2,12,24,.45);
  transition:transform .3s,box-shadow .3s}
@supports ((-webkit-backdrop-filter:blur(2px)) or (backdrop-filter:blur(2px))){
  .ccft__card{-webkit-backdrop-filter:blur(16px) saturate(170%);backdrop-filter:blur(16px) saturate(170%)}
}
/* heller Glasrand */
.ccft__card::before{content:"";position:absolute;inset:0;z-index:2;padding:1.3px;border-radius:inherit;
  pointer-events:none;opacity:.75;transition:opacity .3s;
  background:linear-gradient(140deg,rgba(255,255,255,.92) 0%,rgba(3,163,250,.5) 46%,rgba(255,255,255,.2) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
/* Lichtstreifen wandert beim Darüberfahren über das Glas */
.ccft__card::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.4) 50%,transparent 62%) no-repeat;
  background-size:300% 100%;background-position:100% 0;
  transition:background-position .85s cubic-bezier(.4,0,.2,1)}
.ccft__card:hover{transform:translateY(-3px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.62),inset 0 -16px 26px rgba(2,20,42,.5),0 18px 40px rgba(2,12,24,.55)}
.ccft__card:hover::before{opacity:1}
.ccft__card:hover::after{background-position:0 0}
/* Symbolkachel mit gewölbtem Glanz */
.ccft__ico{position:relative;overflow:hidden;display:grid;place-items:center;flex:none;
  width:2.85rem;height:2.85rem;border-radius:14px;color:#fff;
  background:linear-gradient(170deg,#5CCCFF 0%,#1FB2FF 42%,#0A56A0 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -8px 14px rgba(3,40,80,.45),0 8px 18px rgba(3,163,250,.35)}
.ccft__ico::after{content:"";position:absolute;left:2px;right:2px;top:2px;height:52%;pointer-events:none;
  border-radius:12px 12px 50% 50%/12px 12px 30% 30%;
  background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.1) 68%,rgba(255,255,255,0))}
.ccft__ico .ccft-i{position:relative;z-index:1;width:1.45rem;height:1.45rem;stroke-width:1.8}
.ccft__ct{display:flex;flex-direction:column;min-width:0}
.ccft__ct b{font-family:var(--font-display,"Barlow Semi Condensed","Arial Narrow",Arial,sans-serif);
  font-size:1.16rem;font-weight:700;line-height:1.15;letter-spacing:.01em}
.ccft__ct small{color:var(--ft-mut);font-size:.86rem;line-height:1.3}
.ccft__go{width:1.05rem;height:1.05rem;margin-left:auto;color:var(--ft-mut);
  transition:transform .25s,color .25s}
.ccft__card:hover .ccft__go{transform:translateX(3px);color:var(--ft-sig)}
.ccft__card--wa .ccft__ico{background:linear-gradient(170deg,#6BEE9B 0%,#2BD163 42%,#0E7A4A 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -8px 14px rgba(3,70,45,.45),0 8px 18px rgba(37,211,102,.35)}
.ccft__card--wa::before{background:linear-gradient(140deg,rgba(255,255,255,.92) 0%,rgba(37,211,102,.55) 46%,rgba(255,255,255,.2) 100%)}
.ccft__card--sig .ccft__ico{background:linear-gradient(170deg,#FFC08A 0%,#FF7A2F 42%,#D14704 100%);
  box-shadow:inset 0 1px 0 rgba(255,246,236,.85),inset 0 -8px 14px rgba(110,30,0,.45),0 8px 18px rgba(255,107,31,.35)}
.ccft__card--sig::before{background:linear-gradient(140deg,rgba(255,255,255,.92) 0%,rgba(255,122,47,.55) 46%,rgba(255,255,255,.2) 100%)}

/* ---- Hauptteil ---------------------------------------------------------- */
.ccft__main{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.75rem,3vw,2.5rem)}
.ccft__logo{display:inline-block;margin-bottom:1.15rem}
.ccft__logo img{display:block;width:13.5rem;max-width:100%;height:auto}
.ccft__adr{margin:0;font-style:normal;display:grid;gap:.55rem}
.ccft__adr > span{display:flex;align-items:flex-start;gap:.6rem;color:#D4E3F1;font-size:.97rem}
.ccft__adr .ccft-i{margin-top:.15rem;width:1.15rem;height:1.15rem;color:var(--ft-blue)}
.ccft__adr a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.ccft__inh{margin:1.1rem 0 0;color:var(--ft-mut);font-size:.9rem}

.ccft__h{display:flex;align-items:center;gap:.5rem;margin:0 0 .85rem;padding-bottom:.6rem;
  border-bottom:1px solid var(--ft-line);
  font-family:var(--font-display,"Barlow Semi Condensed","Arial Narrow",Arial,sans-serif);
  font-size:1.12rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase}
.ccft__h .ccft-i{width:1.2rem;height:1.2rem;color:var(--ft-sig)}
.ccft__col ul{margin:0;padding:0;list-style:none;display:grid;gap:.42rem}
.ccft__col a{display:inline-flex;align-items:baseline;gap:.4rem;color:#C3D6E8;font-size:.96rem;
  transition:color .2s,transform .2s}
.ccft__col a::before{content:"";flex:none;width:.42rem;height:.42rem;margin-right:.1rem;border-radius:50%;
  background:rgba(141,187,230,.45);transition:background .2s,transform .2s}
.ccft__col a:hover{color:#fff;transform:translateX(2px)}
.ccft__col a:hover::before{background:var(--ft-sig);transform:scale(1.35)}

/* ---- Vertrauensleiste --------------------------------------------------- */
.ccft__trust{display:flex;flex-wrap:wrap;gap:.6rem;margin:clamp(1.75rem,4vw,2.5rem) 0 0;
  padding:0;list-style:none}
.ccft__trust li{display:flex;align-items:center;gap:.5rem;padding:.5rem .9rem;
  border:1px solid var(--ft-line);border-radius:999px;background:rgba(255,255,255,.04);
  color:#D4E3F1;font-size:.92rem}
.ccft__trust .ccft-i{width:1.05rem;height:1.05rem;color:#2BD163;stroke-width:2.4}
.ccft__trust b{color:#fff;font-weight:700}

/* ---- Fußzeile ----------------------------------------------------------- */
.ccft__btm{margin-top:clamp(1.75rem,4vw,2.5rem);border-top:1px solid var(--ft-line);
  background:rgba(3,13,26,.5)}
.ccft__btm-in{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.5rem;
  padding-top:1.1rem;padding-bottom:1.1rem}
.ccft__cr{margin:0;color:var(--ft-mut);font-size:.88rem}
.ccft__legal{display:flex;flex-wrap:wrap;gap:.3rem .95rem;margin:0;padding:0;list-style:none}
.ccft__legal a{color:#C3D6E8;font-size:.9rem}
.ccft__legal a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.ccft__soc{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 0 auto;padding:0;list-style:none}
.ccft__soc a{display:inline-flex;align-items:center;gap:.45rem;padding:.42rem .8rem;
  border:1px solid var(--ft-line);border-radius:999px;background:rgba(255,255,255,.05);
  color:#D4E3F1;font-size:.88rem;font-weight:600;
  transition:background .25s,border-color .25s,color .25s,transform .25s}
.ccft__soc a:hover{background:rgba(3,163,250,.16);border-color:rgba(3,163,250,.5);color:#fff;transform:translateY(-2px)}
.ccft__soc .ccft-i{width:1.05rem;height:1.05rem}
.ccft__soc a.ccft__soc--g:hover{background:rgba(255,176,32,.18);border-color:rgba(255,176,32,.55)}
.ccft__soc a.ccft__soc--g .ccft-i{color:#FFB020}

/* ---- Handy: nur die Route-Karte, der Rest steht in der unteren Leiste --- */
@media (max-width:719px){
  .ccft__quick > li:not(.ccft__q-route){display:none}
  .ccft__quick{margin-bottom:clamp(1.5rem,5vw,2rem)}
}

/* ---- Spalten: auf dem Handy auf- und zuklappbar ------------------------- */
.ccft__col{min-width:0}
.ccft__h{cursor:pointer;list-style:none;min-height:3.3rem}
.ccft__h::-webkit-details-marker{display:none}
.ccft__col:not([open]) .ccft__h{margin-bottom:0}
.ccft__hc{width:1rem;height:1rem;margin-left:auto;color:#9DB4CB;transition:transform .25s}
.ccft__col[open] .ccft__hc{transform:rotate(90deg)}
@media (min-width:720px){
  .ccft__h{cursor:default;pointer-events:none}
  .ccft__hc{display:none}
}

/* ---- Breiten ------------------------------------------------------------ */
@media (min-width:560px){
  .ccft__col ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:.42rem 1.25rem}
}
@media (min-width:760px){
  .ccft__main{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ccft__brand{grid-column:1/-1}
}
@media (min-width:1080px){
  .ccft__main{grid-template-columns:1.45fr repeat(4,minmax(0,1fr));gap:2.25rem}
  .ccft__brand{grid-column:auto}
  .ccft__col ul{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .ccft *{transition:none!important}
}