:root{
  --bg:#f6f6f7;
  --surface:#ffffff;
  --text:#111111;
  --muted:#666a73;
  --line:#e7e7ea;

  --blue:#0071e3;
  --blue-hover:#0062c4;

  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --radius-xl: 26px;
  --radius-lg: 18px;

  --max: 1180px;
  --nav-h: 80px;

  --focus: 0 0 0 3px rgba(0,113,227,.35);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background:var(--bg);
  color:var(--text);
}

/* Skip links */
.skip-links{
  position:absolute; left:0; top:0; z-index:9999;
  display:flex; gap:.5rem; padding:.5rem;
}
.skip-links a{
  transform: translateY(-140%);
  background:#000; color:#fff;
  padding:.6rem .8rem; border-radius:10px;
  text-decoration:none; font-weight:700;
  transition: transform .2s ease;
}
.skip-links a:focus{ transform: translateY(0); outline:none; box-shadow:var(--focus); }

/* Sticky Header */
header[role="banner"]{
  position:sticky; top:0; z-index:1000;
  background:rgba(246,246,247,.85);
  backdrop-filter: blur(10px);
  border-bottom:1px solid transparent;
}
header.is-stuck{ border-bottom-color: var(--line); }

.nav{
  height:var(--nav-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:var(--max);
  margin:0 auto;
  padding:0 18px;
  gap:14px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:var(--text);
  font-weight:800;
  letter-spacing:-.3px;
  white-space:nowrap;
  font-size:1.4em;
  transition: color .2s ease, text-shadow .2s ease;
}

.brand:hover{
  color:#081591;
  text-shadow: 0 1px 6px rgba(0,0,0,.12);
  text-decoration: underline;
}
.logo{
  width:34px; height:34px; border-radius:12px;
  background: radial-gradient(circle at 30% 30%, #fff, #d8d8df);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  display:grid; place-items:center;
  font-size:18px;
}

nav[aria-label="Hauptmenü"] ul{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:10px;
}
nav[aria-label="Hauptmenü"] a{
  text-decoration:none;
  color:var(--text);
  padding:.55rem .75rem;
  border-radius:999px;
  font-weight:600;
  font-size:.95rem;
}
nav[aria-label="Hauptmenü"] a:hover{ background:rgba(0,0,0,.05); }
nav[aria-label="Hauptmenü"] a:focus{ outline:none; box-shadow:var(--focus); }

.nav-actions{
  display:flex; align-items:center; gap:10px;
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem;
  border-radius:999px;
  padding:.65rem 1rem;
  border:1px solid transparent;
  font-weight:700;
  font-size:.95rem;
  text-decoration:none;
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
}
.btn-primary{ background:var(--blue); color:#fff; }
.btn-primary:hover{ background:var(--blue-hover); }
.btn-primary:focus{ outline:none; box-shadow:var(--focus); }

.btn-ghost{
  background: rgb(218, 23, 23);
  border-color: rgba(255,255,255,.22);
  color: #fff;
  
}
.btn-ghost:hover{ background: #000; }
.btn-ghost:focus{ outline:none; box-shadow:var(--focus); }

.icon-btn{
  width:42px; height:42px;
  
  border:1px solid rgba(0,0,0,.12);
  background:var(--surface);
  display:grid; place-items:center;
  cursor:pointer;
}
.icon-btn:focus{ outline:none; box-shadow:var(--focus); }

/* Mobile menu */
.burger{ display:none; }
.mobile-panel{
  display:none;
  border-top:1px solid var(--line);
  padding:10px 18px 16px;
  max-width:var(--max);
  margin:0 auto;
}
.mobile-panel a{
  display:block;
  padding:.8rem .9rem;
  border-radius:14px;
  text-decoration:none;
  color:var(--text);
  font-weight:700;
}
.mobile-panel a:hover{ background:rgba(0,0,0,.05); }
.mobile-panel a:focus{ outline:none; box-shadow:var(--focus); }
.mobile-panel[data-open="true"]{ display:block; }

/* Main layout */
main[role="main"]{ padding-bottom:70px; }
.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding: 18px 18px 0;
}

/* Hero */
.hero{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 26px;
  align-items:end;
  padding: 22px 0 18px;
}
.hero h1{
  margin:0;
  font-size: clamp(2.6rem, 5.8vw, 5rem);
  letter-spacing: -1.4px;
  line-height: 1.02;
}
.hero-right{
  text-align:right;
  padding-bottom: 8px;
}
.hero-right .claim{
  margin:0 0 10px;
  font-size: clamp(1.6rem, 2.4vw, 2.4rem);
  letter-spacing:-.6px;
  line-height:1.1;
  font-weight:800;
}
.hero-right .links{
  display:flex;
  justify-content:flex-end;
  gap:14px;
  flex-wrap:wrap;
}
.hero-right .links a{
  color:var(--blue);
  text-decoration:none;
  font-weight:800;
}
.hero-right .links a:hover{ text-decoration:underline; }
.hero-right .links a:focus{
  outline:none; box-shadow:var(--focus);
  border-radius:10px; padding:.2rem .3rem;
}

/* Categories */
.cats{
  display:flex;
  gap: 18px;
  overflow:auto;
  padding: 12px 0 14px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling: touch;
}
.cats::-webkit-scrollbar{ height:10px; }
.cats::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.15); border-radius:999px; }

.cat{
  min-width: 140px;
  background:transparent;
  border:0;
  padding:10px 12px;
  border-radius:18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  scroll-snap-align:start;
  cursor:pointer;
  text-decoration:none;
  color:inherit;
}
.cat:hover{ background:rgba(0,0,0,.04); }
.cat:focus{ outline:none; box-shadow:var(--focus); }

.cat .badge{
  width:64px; height:64px;
  border-radius:22px;
  background: var(--surface);
  box-shadow: 0 12px 26px rgba(0,0,0,.10);
  display:grid; place-items:center;
  font-size:28px;
}
.cat .label{ font-weight:900; letter-spacing:-.3px; }

/* ===============================
   CARDS / BIG-CARDS (NEU)
   Desktop: Bild unten (absolute) + Buttons sichtbar
   Mobile: Bild im Flow + Buttons darunter (2 gleich breit)
   =============================== */

/* Cards row */
.cards-row{
  margin-top: 10px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

/* Big card */
.big-card{
  border-radius: var(--radius-xl);
  overflow:hidden;
  min-height: 520px;
  position:relative;
  box-shadow: var(--shadow);
  color:#fff;
  background: #0b0b0c;
}

/* Inhalt */
.big-card .inner{
  padding: 26px;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap: 18px;
  position: relative;
  z-index: 999; /* Inhalt über Overlay/Bild */
}

/* Text */
.big-card .top small{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:800;
  opacity:.92;
}
.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px; height:22px;
  border-radius:7px;
  background: rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);
  font-size:12px;
  font-weight:900;
}
.big-card h2{
  margin:10px 0 6px;
  font-size: 2rem;
  letter-spacing:-.8px;
  line-height:1.1;
}
.big-card p{
  margin:0;
  opacity:.92;
  font-weight:650;
  max-width: 40ch;
}
.price{ margin-top: 10px; font-weight:800; opacity:.95; }

/* Buttons (Desktop: 2 nebeneinander, gleich breit) */
.big-card .actions{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  position: relative;
  z-index: 3;
}
.big-card .actions .btn{
  width:100%;
  justify-content:center;
}

/* VISUAL: Desktop unten, absolute */
.big-card .visual{
  position:absolute;
  left:0; right:0; bottom:0;
  height:50%;
  z-index: 1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events:none;
}

/* Overlay für Lesbarkeit */
.big-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index: 2;
  background: linear-gradient(180deg,
    rgba(0,0,0,.78) 0%,
    rgba(0,0,0,.62) 45%,
    rgba(0,0,0,.28) 78%,
    rgba(0,0,0,.10) 100%);
  pointer-events:none;
}

/* Fallback wenn kein Foto */
.big-card .visual:not(.has-photo){
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.18), rgba(255,255,255,0) 55%),
    linear-gradient(135deg, rgba(0,113,227,.55), rgba(0,0,0,0));
}

/* ABSOLUTE BILD-PFADE */
.big-card .visual.has-photo{ background-color:#111; }
.basic-innen{ background-image: url("/images/basic-innen.png"); }
.basic-aussen{ background-image: url("/images/basic-aussen.png"); }
.visual-innenraum{ background-image: url("/images/alltag.jpeg"); }
.visual-aussen{ background-image: url("/images/aussen.png"); }
.visual-keramik{ background-image: url("/images/keramik.jpeg"); }
.versiegelung{ background-image: url("/images/versiegelung.png"); }
.extra{ background-image: url("/images/extra.png"); }

/* Responsive: 1 Spalte (wie bisher) */
@media (max-width: 980px){
  .cards-row{ grid-template-columns: 1fr; }
  .big-card{ min-height: 520px; }
}

/* Mobile: Bild im Flow + Buttons darunter */
@media (max-width: 760px){
  .big-card .inner{
    height:auto;
    justify-content:flex-start;
  }

  /* Bild wird „Block“ innerhalb der Karte (nicht mehr verdeckt) */
  .big-card .visual{
    position: relative;
    height: 240px;
    margin: 14px -26px 0;     /* full-bleed trotz padding */
    border-radius: 0 0 22px 22px;
  }

  /* Buttons bleiben darunter (2 gleich breit) */
  .big-card .actions{
    margin-top: 14px;
    gap: 10px;
  }
}

/* Sections */
section{ scroll-margin-top: calc(var(--nav-h) + 14px); }
.section{
  margin-top: 28px;
  background: var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  padding: 22px;
}
.section h2{
  margin:0 0 8px;
  font-size:1.6rem;
  letter-spacing:-.5px;
}
.section p{
  margin:0;
  color:var(--muted);
  font-weight:650;
  line-height:1.5;
}

.contact-actions{
  margin-top:14px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* Footer */
.foot{
  margin-top: 26px;
  color: var(--muted);
  font-weight:650;
  font-size:.95rem;
  padding: 18px 0 36px;
}
.foot a{ color:inherit; }

/* Responsive */
@media (max-width: 980px){
  .hero{ grid-template-columns: 1fr; align-items:start; }
  .hero-right{ text-align:left; padding-bottom:0; }
  .hero-right .links{ justify-content:flex-start; }

  /* Karten werden 1-spaltig, aber bleiben die gleichen Karten */
  .cards-row{ grid-template-columns: 1fr; }
  .big-card{ min-height: 520px; }
  .big-card .visual{ height: 45%; }
}

@media (max-width: 760px){
  nav[aria-label="Hauptmenü"]{ display:none; }
  .burger{ display:inline-grid; }

  .cats{ gap: 12px; }
  .cat{ min-width: 120px; }

  /* Mobile: obere Aktions-Buttons ausblenden */
  .nav-actions .btn{ display:none; }

  /* Mobile Panel (wie bei dir) */
  .mobile-panel{
    margin: 10px 12px 0;
    padding: 10px;
    border-radius: 16px;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
    backdrop-filter: blur(10px);
  }
  .mobile-panel a{
    display:block;
    padding: 12px 12px;
    border-radius: 12px;
    text-decoration:none;
    color:#111;
    font-weight:600;
  }
  .mobile-panel a:hover{ background: rgba(0,0,0,.05); }
}

/* Sticky fix (wie bei dir) */
header#top{ position: sticky; top: 0; z-index: 9999; }
.mobile-panel{ position: relative; z-index: 9999; }

/* Größeres Hamburger-Menü */
.icon-btn.burger{
  width:50px;
  height:50px;
  font-size:26px;   /* ☰ Symbol größer */
   line-height:1;
}

@media (max-width: 760px){
  .icon-btn.burger{
    width:50px;
    height:50px;
    font-size:28px;
    color: black;
    
  }
}

/* === Individuelle Karten-Hintergründe === */

/* A: Innen – Schwarz / Anthrazit */
.big-card[data-theme="warm"]{
  background: linear-gradient(
    180deg,
    #0b0b0c 0%,
    #121214 100%
  );
}

/* B: Außen – Dunkelgrün */
.big-card[data-theme="lime"]{
  background: linear-gradient(
    180deg,
    #0f1a14 0%,
    #16271d 100%
  );
}

/* C: Keramik – Dunkles Orange / Kupfer */
.big-card[data-theme="blue"]{
  background: linear-gradient(
    180deg,
    #241407 0%,
    #3a1f0a 100%
  );
}

/* Text bleibt gut lesbar */
.big-card h2,
.big-card p,
.big-card small,
.big-card .price{
  color:#fff;
}


/* ===============================
   FIX: Overlay (oben) pro Karte farbig
   -> sonst wirkt alles schwarz
   =============================== */

/* Standard-Overlay etwas weniger "schwarz" (optional, aber hilft) */
.big-card::after{
  background: linear-gradient(180deg,
    rgba(0,0,0,.78) 0%,
    rgba(0,0,0,.62) 45%,
    rgba(0,0,0,.28) 78%,
    rgba(0,0,0,.10) 100%);
}

/* A – Innen (Schwarz/Anthrazit) */
.big-card[data-theme="warm"]::after{
  background: linear-gradient(180deg,
    rgba(0,0,0,.82) 0%,
    rgba(0,0,0,.66) 45%,
    rgba(0,0,0,.30) 78%,
    rgba(0,0,0,.12) 100%);
}

/* B – Außen (Grünlich) */
.big-card[data-theme="lime"]::after {
  background: linear-gradient(180deg, rgba(10, 85, 43, 0.86) 0%, rgba(10,28,18,.70) 45%, rgba(0,0,0,.30) 78%, rgba(0,0,0,.12) 100%);
}

/* C – Keramik (Orange/Kupfer) */
.big-card[data-theme="blue"]::after{
  background: linear-gradient(180deg, rgba(176, 123, 22, 0.88) 0%, rgba(39, 17, 3, 0.72) 45%, rgba(0,0,0,.30) 78%, rgba(0,0,0,.12) 100%);
}

/* ===============================
   Cnp Kfz-Aufbereitung Button-Style (wie "Mehr erfahren")
   =============================== */

:root{
  --btn-dark: #2b2b2b;         /* Anthrazit */
  --btn-dark-hover: #ffffff;   /* weiss */
  --btn-accent: #c89b3c;       /* Kupfer */
  --btn-radius: 12px;
}

/* Basis: mach die Pills für Cnp Kfz-Aufbereitung-Buttons eckiger */
.btn{
  border-radius: var(--btn-radius);
  padding: .85rem 1.6rem;
  border-width: 2px;
  letter-spacing: .2px;
  transition:
    background-color .2s ease,
    border-color .2s ease,
    transform .15s ease,
    box-shadow .15s ease;
}

/* Standard = "Mehr erfahren" Look */
.btn-primary{
  background: var(--btn-dark);
  border-color: var(--btn-dark);
  color:#fff;
}
.btn-primary:hover{
  background: var(--btn-dark-hover);
  border-color: var(--btn-accent);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  color:rgba(0,0,0,1.00);
}

/* Fokus wie auf dem Beispiel: klarer Rahmen */
.btn-primary:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(200,155,60,.35);
  border-color: var(--btn-accent);
}

/* Ghost als helle Variante (wie der zweite Zustand in deinen Cards) */
.btn-ghost{
  background: rgba(255,255,255,.98);
  border-color: rgba(0,0,0,.22);
  color: #111;
}
.btn-ghost:hover{
  background: rgba(0,0,0,.90);
  border-color: var(--btn-accent);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.14);
  color: whitesmoke;
}
.btn-ghost:focus-visible{
  outline:none;
  box-shadow: 0 0 0 3px rgba(200,155,60,.35);
  border-color: var(--btn-accent);
}

/* ===============================
   Cnp Kfz-Aufbereitung Footer – Premium
   =============================== */

.gw-footer{
  margin-top: 40px;
  color: #111;

  /* minimal dunkler Grau-Verlauf */
  background:
    /* feines Noise */
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.02),
      rgba(255,255,255,.02) 1px,
      rgba(0,0,0,.02) 1px,
      rgba(0,0,0,.02) 2px
    ),
    linear-gradient(
      180deg,
      #d7d9dc 0%,
      #c6c9cd 55%,
      #b8bcc1 100%
    );
  

  position: relative;
}

/* feine obere Trennlinie */
.gw-footer::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:1px;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,.05),
    rgba(0,0,0,.18),
    rgba(0,0,0,.05)
  );
}

/* Inhalt */
.gw-footer-inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 36px 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* Überschriften */
.gw-footer h3{
  margin: 0 0 12px;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -.3px;
  color: #0b0b0c;
}

/* Listen */
.gw-footer ul{
  list-style: none;
  padding: 0;
  margin: 0;
}

.gw-footer li{
  margin: 7px 0;
}

/* Links */
.gw-footer a{
  color: #111;
  text-decoration: none;
  font-weight: 600;
}

.gw-footer a:hover{
  text-decoration: underline;
}

.gw-footer a:focus-visible{
  outline: none;
  box-shadow: var(--focus);
  border-radius: 6px;
}

/* Untere Abschlusszeile */
.gw-footer-bottom{
  border-top: 1px solid rgba(0,0,0,.22);
  padding: 14px 18px 20px;
  text-align: center;
  font-weight: 650;
  font-size: .95rem;

  /* leicht dunkler abgesetzt */
  background: rgba(0,0,0,.04);
}
.gw-footer-bottom a{
  color: #0b1174;
  text-decoration: underline;
}

/* Mobile */
@media (max-width: 760px){
  .gw-footer-inner{
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .gw-footer-bottom{
    font-size: .9rem;
  }
}
/* ===============================
   Footer Mobile Typografie Fix
   =============================== */
@media (max-width: 760px){

  .gw-footer{
    font-size: 1.05rem; /* Grundschrift größer */
  }

  .gw-footer h3{
    font-size: 1.2rem;
    margin-bottom: 14px;
  }

  .gw-footer li{
    margin: 12px 0; /* mehr Luft zwischen Links */
  }

  .gw-footer a{
    font-size: 1.05rem;
    line-height: 1.6;
    display: inline-block;
    padding: 4px 0; /* besser tappbar */
  }

  .gw-footer-bottom{
    font-size: 1rem;
    line-height: 1.5;
  }
}


section[id]{
  scroll-margin-top: calc(var(--nav-h) + 14px);
}
html{
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 14px);
}
.consent-note{
  margin: 10px 0 0;
  color: var(--muted);
  font-weight: 650;
  font-size: .95rem;
}
.consent-note.is-ok{
  color: #1f3d2b; /* Cnp Kfz-Aufbereitung-grün */
}
/* Preis-Zeile: Icon + Preis nebeneinander */
    .price-row{
      display:inline-flex;
      align-items:center;
      gap:8px;
      margin-top:8px;
      flex-wrap:wrap;
    }
    .price-row .t-ico{
      font-size:1rem;
      line-height:1;
      width:auto;
      height:auto;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      opacity:.85;
    }

    /* Preis-Badge */
    .price-badge{
      display:inline-flex;
      align-items:center;
      padding:4px 10px;
      border-radius:999px;
      font-size:.85rem;
      font-weight:700;
      background:rgba(0,0,0,0.06);
      color:#111;
      white-space:nowrap;
    }

    .tile small{
      display:block;
      margin-top:8px;
      font-size:.8rem;
      color:#666;
    }

/* =========================
   KATEGORIEN – iPhone safe (ohne mask-image)
   ========================= */

.cats-wrap{
  position: relative;
  /* sorgt dafür, dass der Edge-Hinweis nicht den Layoutfluss stört */
}

/* Scrollbereich */
.cats{
  display:flex;
  gap:12px;

  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type:x mandatory;

  /* ✅ Anschnitt: nächste Kachel sichtbar */
  padding: 12px 96px 14px 8px;

  /* ✅ damit iOS nicht „komisch“ clippt */
  scroll-padding-left: 8px;
  scroll-padding-right: 96px;
}

/* Scrollbar ausblenden (mobile) */
@media (max-width: 760px){
  .cats::-webkit-scrollbar{ display:none; }
  .cats{ scrollbar-width:none; }
}

/* Kacheln */
.cat{
  flex: 0 0 auto;
  min-width: 140px;

  background: transparent;
  border: 0;
  padding: 10px 12px;
  border-radius: 18px;

  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;

  scroll-snap-align:start;

  cursor:pointer;
  text-decoration:none;
  color: inherit;

  transition: background .15s ease, transform .12s ease;
}

.cat:hover{ background:rgba(0,0,0,.04); transform: translateY(-1px); }
.cat:focus{ outline:none; box-shadow:var(--focus); }

/* Badge + Label wie gehabt */
.cat .badge{
  width:64px; height:64px;
  border-radius:22px;
  background: var(--surface);
  box-shadow: 0 12px 26px rgba(0,0,0,.10);
  display:grid; place-items:center;
  font-size:28px;
}
.cat .label{
  font-weight:900;
  letter-spacing:-.3px;
}

/* ✅ Rechter Edge-Hinweis (liegt NICHT über den Kacheln, nur am Rand) */
.cats-wrap::after{
  content:"";
  position:absolute;
  right:0;
  top: 6px;
  height: 118px;   /* Höhe der Kachelzone */
  width: 42px;

  pointer-events:none;
  z-index: 3;

  /* wirkt wie „da geht’s weiter“ */
  background: linear-gradient(to left,
    rgba(246,246,247,1) 0%,
    rgba(246,246,247,0) 100%);
}

/* ✅ Mini „Kante“ damit man es auf iPhone wirklich sieht */
.cats-wrap::before{
  content:"";
  position:absolute;
  right:10px;
  top: 18px;
  width: 10px;
  height: 92px;
  border-radius: 999px;

  pointer-events:none;
  z-index: 4;

  /* dezente dunkle Kante */
  background: rgba(0,0,0,.06);
  filter: blur(.2px);
  opacity: .9;
}

/* Desktop: Edge-Hinweis aus (weil man dort eh sieht/scrollt) */
@media (min-width: 980px){
  .cats-wrap::after,
  .cats-wrap::before{ display:none; }
  .cats{ padding-right: 8px; }
}
/* ===============================
   BRAND / LOGO IM HEADER
   =============================== */

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:var(--text);
  font-weight:800;
  letter-spacing:-.3px;
  white-space:nowrap;
}

/* Logo */
.brand-logo{
  height:120px;        /* Desktop-Größe */
  width:auto;
  display:block;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.15));
}

/* Text */
.brand-text{
  font-size:1.4rem;
}

/* Hover dezent */
.brand:hover .brand-logo{
  filter: drop-shadow(0 3px 10px rgba(0,0,0,.22));
}

/* ===============================
   MOBILE OPTIMIERUNG
   =============================== */

@media (max-width: 760px){
  .brand{
    gap:10px;
  }

  .brand-logo{
    height: 115px;
    
    margin-left: -6px;
  }

  .brand-text{
    font-size:1.25rem;
  }
}

/* ===============================
   STICKY HEADER – SCHWARZER VERLAUF
   =============================== */

header[role="banner"]{
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.92) 0%,
    rgba(0,0,0,0.82) 60%,
    rgba(0,0,0,0.65) 100%
  );
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.12);
}

/* Navigation Text */
header[role="banner"] .brand,
header[role="banner"] nav a{
  color: #ffffff;
}

/* Hover Navigation */
header[role="banner"] nav a:hover{
  background: rgba(255,255,255,.12);
}

/* Logo etwas heller */
.brand-logo{
  filter: drop-shadow(0 2px 8px rgba(255,255,255,.15));
}

/* Buttons im Header */
header[role="banner"] .btn-primary{
  background: #ffffff;
  color: #000;
  border-color: #ffffff;
}

header[role="banner"] .btn-primary:hover{
  background: #eaeaea;
  color: #000;
}

/* Ghost Button */
header[role="banner"] .btn-ghost{
  background: transparent;
  border-color: rgba(255,255,255,.4);
  color: #ffffff;
}

header[role="banner"] .btn-ghost:hover{
  background: rgba(255,255,255,.15);
}

/* Hamburger Button */
.icon-btn.burger{
  border-color: rgba(255,255,255,.35);
  color: #ffffff;
  background: transparent;
}

/* Hamburger Hover */
.icon-btn.burger:hover{
  background: rgba(255,255,255,.12);
}

/* ===============================
   MOBILE PANEL (auf dunklem Header)
   =============================== */

.mobile-panel{
  background: #0f0f10;
  border: 1px solid rgba(255,255,255,.12);
}

.mobile-panel a{
  color: #ffffff;
}

.mobile-panel a:hover{
  background: rgba(255,255,255,.12);
}

/* ===============================
   FOOTER – Schwarz wie Header
   =============================== */

.gw-footer{
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.92) 0%,
    rgba(0,0,0,0.82) 60%,
    rgba(0,0,0,0.65) 100%
  );
  color:#ffffff;
  border-top: 1px solid rgba(255,255,255,.12);
}

/* Überschriften */
.gw-footer h3{
  color:#ffffff;
}

/* Links */
.gw-footer a{
  color:#ffffff;
}

.gw-footer a:hover{
  text-decoration: underline;
}

/* Untere Abschlusszeile */
.gw-footer-bottom{
  background: rgba(203,202,202,0.84);
  color:#000000;
  border-top: 1px solid rgba(255,255,255,.12);
}

.gw-footer-bottom a{
  color:#2D2E92;
  text-decoration: underline;
}
/* Buttons "Alles auf einen Klick" – gleich breit */
.contact-actions{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.contact-actions .btn{
  width: 100%;
  justify-content: center;
}
@media (max-width: 760px){
  .contact-actions{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 420px){
  .contact-actions{
    grid-template-columns: 1fr;
  }
}
/* =========================================
   FIX: Visual inside .inner (Desktop ok, Mobile Bild + Buttons)
   ========================================= */

/* Desktop: Visual sitzt unten, Buttons sichtbar */
.big-card .inner{
  position: relative;
}

/* Visual (jetzt in .inner) soll auf Desktop wieder "hinten" liegen */
.big-card .inner .visual{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50%;
  z-index: 1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* Text + Buttons IMMER über dem Bild */
.big-card .top,
.big-card .actions{
  position: relative;
  z-index: 2;
}

/* Mobile: Bild wird ein Block zwischen Text & Buttons */
@media (max-width: 760px){

  /* inner darf nicht 100% Höhe haben */
  .big-card .inner{
    height: auto;
    justify-content: flex-start;
  }

  /* Visual im Flow sichtbar */
  .big-card .inner .visual{
    position: relative;
    height: 240px;          /* anpassbar */
    margin: 14px -26px 0;   /* bis zum Rand (inner padding 26px) */
    border-radius: 0 0 22px 22px;
  }

  /* Buttons darunter – 2 gleich breit */
  .big-card .actions{
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .big-card .actions .btn{
    width: 100%;
    justify-content: center;
  }
}
/* =========================================
   KLARO BUTTONS – IMMER UMBRUCH (auch Pro Max)
   betrifft NUR den Klaro-Bereich
   ========================================= */

.contact-actions--klaro{
  display: grid;
  grid-template-columns: 1fr;  /* immer 1 Spalte */
  gap: 12px;
}

.contact-actions--klaro .btn{
  width: 100%;
  justify-content: center;
  text-align: center;
  white-space: normal;         /* Text darf umbrechen */
  line-height: 1.25;
}

/* ===== Footer Social FINAL FIX (gleich groß) ===== */

footer.gw-footer ul.gw-social{
  list-style: none;
  padding: 0;
  margin: 0;

  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* ← LINKS statt Mitte */
  gap: 14px;
}

/* Buttons exakt gleich groß */
footer.gw-footer a.gw-social-btn{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px;

  width: 200px !important;        /* ← feste gleiche Breite */
  inline-size: 200px !important;  /* ← extra sicher (Safari/Firefox) */
  height: 56px !important;        /* ← gleiche Höhe */

  padding: 0 18px !important;
  box-sizing: border-box;

  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  line-height: 1;

  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);

  transition: .2s ease;
}

/* Hover */
footer.gw-footer a.gw-social-btn:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.28);
  transform: translateY(-1px);
}

/* Icon */
footer.gw-footer .gw-social-icon{
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 12px;

  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
}

/* Text */
footer.gw-footer .gw-social-text{
  white-space: nowrap;
}

/* Farben */
footer.gw-footer .gw-ig .gw-social-icon{
  background: rgba(225,48,108,.20);
}

footer.gw-footer .gw-tt .gw-social-icon{
  background: rgba(0,242,234,.14);
}

/* Mobile: nur wenn wirklich zu klein, dann kleiner */
@media (max-width: 360px){
  footer.gw-footer a.gw-social-btn{
    width: 92vw !important;
    inline-size: 92vw !important;
  }
}