/* =========================================================
   DanKüchen City Innsbruck – Stylesheet
   Corporate Design nach DAN Küchen CI
   Eura Media e.U. · 2026
   -----------------------------------------------------
   Farben:  Rot #EE2225 · Schwarz #231F20 · Beige #E8E1DA
            Grün #7B8E84 · Aktionsrot #9E1B1F
   Schrift: Gazpacho Medium Italic (Display) · GT Walsheim LC (Text)
            Originalschriften aus dem DAN Partnerportal
   ========================================================= */

/* ---------- Webfonts: DAN Originalschriften, self-hosted (DSGVO-konform) ----------
   Quelle: DANKÜCHEN Partnerportal, lizenziert im Rahmen der Studio-Partnerschaft.
   Gazpacho Medium Italic = Headlines · GT Walsheim LC Regular = Fließtext
   Hinweis: Vom Portal gibt es aktuell nur je einen Schnitt. Fettungen werden vom
   Browser synthetisiert. Sobald DAN Medium/Bold von GT Walsheim liefert, hier ergänzen. */
@font-face{
  font-family:"Gazpacho";
  src:url("../fonts/gazpacho-mediumitalic.woff2") format("woff2");
  font-weight:500; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"GT Walsheim";
  src:url("../fonts/gt-walsheim-regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}

/* =========================================================
   1 · DESIGN-TOKENS
   ========================================================= */
:root{
  /* Markenfarben */
  --red:#EE2225;            /* DAN Rot – Logo, Buttons, Akzente */
  --red-hover:#C8171B;      /* Hover / Active */
  --red-deep:#9E1B1F;       /* Aktions- und Störerrot */
  --red-text:#C8171B;       /* nur für kleine rote Schrift auf hellem Grund:
                               DAN-Rot erreicht dort 4,3:1 und liegt damit knapp
                               unter der Grenze. Bei Fließtextgröße ist der
                               Unterschied nicht zu sehen, in Flächen und Knöpfen
                               bleibt das echte Markenrot stehen. */
  --ink:#231F20;            /* DAN Schwarz – Überschriften, Flächen */
  --sage:#7B8E84;           /* DAN Grün – sparsam, für Ruhezonen */

  /* Neutrale Töne */
  --beige:#E8E1DA;          /* Flächenfarbe */
  --beige-light:#F4F0EC;    /* helle Sektionen */
  --body:#46413E;           /* Fließtext */
  --muted:#6E6560;          /* Sekundärtext – dunkler als das ursprüngliche
                               #867C75, das auf beigem Grund nur 3,6:1 erreichte
                               und damit unter der Lesbarkeitsgrenze lag */
  --line:#D8CFC6;           /* Trennlinien, Rahmen */
  --white:#FFFFFF;

  /* Layout */
  --wrap:1240px;
  --wrap-narrow:820px;
  --r:0px;                  /* Radius – DAN arbeitet kantig */
  --r-pill:999px;

  /* Typografie */
  --f-display:"Gazpacho",Georgia,"Times New Roman",serif;
  --f-sans:"GT Walsheim",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;

  --t:.25s cubic-bezier(.4,0,.2,1);
  --shadow:0 18px 45px rgba(35,31,32,.10);
}

/* =========================================================
   2 · RESET & BASIS
   ========================================================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}
body{
  margin:0;overflow-x:clip;
  font-family:var(--f-sans);
  font-size:17px;line-height:1.75;font-weight:400;
  color:var(--body);background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit}
p{margin:0 0 1.1em}
ul{margin:0 0 1.1em;padding-left:1.1em}

/* --- Überschriften: Display-Kursiv wie im DAN-CI --- */
h1,h2{
  font-family:var(--f-display);font-style:italic;font-weight:500;
  color:var(--ink);line-height:1.1;letter-spacing:-.01em;margin:0 0 .45em;
}
h3,h4{
  font-family:var(--f-sans);font-weight:600;letter-spacing:-.01em;
  color:var(--ink);line-height:1.3;margin:0 0 .5em;
}
h1{font-size:clamp(2.2rem,5vw,4rem)}
h2{font-size:clamp(1.8rem,3.4vw,2.9rem)}
h3{font-size:1.2rem}
h4{font-size:1rem}

.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.wrap--narrow{width:min(100% - 2.5rem,var(--wrap-narrow))}
.center{text-align:center}
.small{font-size:.9rem;color:var(--muted)}

.skiplink{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:.75rem 1.25rem;z-index:999}
.skiplink:focus{left:0}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
::selection{background:var(--red);color:#fff}

/* =========================================================
   3 · KOMPONENTEN
   ========================================================= */

/* --- Buttons --- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:1rem 2rem;border-radius:var(--r);
  font-family:var(--f-sans);font-size:.86rem;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;
  text-decoration:none;border:2px solid transparent;cursor:pointer;
  transition:background var(--t),color var(--t),border-color var(--t);
}
.btn--solid{background:var(--red);color:#fff;border-color:var(--red)}
.btn--solid:hover{background:var(--red-hover);border-color:var(--red-hover)}
.btn--dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn--dark:hover{background:var(--red);border-color:var(--red)}
.btn--outline{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--outline:hover{background:var(--ink);color:#fff}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn--ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn--sm{padding:.65rem 1.2rem;font-size:.76rem}
.btn--full{width:100%}

/* --- Textlink mit Pfeil --- */
.link-arrow{
  display:inline-flex;align-items:center;gap:.45rem;
  color:var(--ink);text-decoration:none;font-weight:600;font-size:.93rem;
  border-bottom:2px solid var(--red);padding-bottom:2px;margin-right:1.5rem;
  transition:color var(--t);
}
.link-arrow::after{content:"→";transition:transform var(--t)}
.link-arrow:hover{color:var(--red)}
.link-arrow:hover::after{transform:translateX(4px)}

/* --- Kicker über der Überschrift --- */
.eyebrow{
  font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--red-text);margin:0 0 .9rem;font-weight:600;
}
.eyebrow--light{color:#fff;opacity:.75}
.eyebrow--dark{color:var(--ink)}

/* --- Störer (rotes Kreis-Badge wie in DAN-Aktionen) --- */
.stoerer{
  display:inline-flex;align-items:center;justify-content:center;text-align:center;
  width:120px;height:120px;border-radius:var(--r-pill);
  background:var(--red-deep);color:#fff;
  font-size:.9rem;font-weight:600;line-height:1.25;padding:.8rem;
}

/* =========================================================
   4 · KOPFBEREICH
   ========================================================= */
.topbar{background:var(--ink);color:#C6BFB9;font-size:.82rem}
.topbar__inner{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.55rem 0}
.topbar p{margin:0}
.topbar a{color:#fff;text-decoration:none}
.topbar a:hover{color:var(--red)}
.topbar__links span{margin:0 .4rem;opacity:.4}

.header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}
/* Die Leiste wird beim Feststellen etwas flacher. Mit Übergang, sonst
   springt das Logo an dieser Stelle um 18 Pixel nach oben. */
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:88px;
  transition:min-height .25s ease}
@media (prefers-reduced-motion:reduce){.header__inner{transition:none}}
.header__logo img{height:42px;width:auto}

.nav__list{display:flex;align-items:center;gap:1.05rem;list-style:none;margin:0;padding:0}
.nav__item{position:relative}
.nav__item>a{
  text-decoration:none;font-size:.88rem;font-weight:500;color:var(--ink);white-space:nowrap;
  padding:.6rem 0;display:inline-block;border-bottom:2px solid transparent;
  transition:border-color var(--t),color var(--t);
}
.nav__item>a:hover{color:var(--red);border-color:var(--red)}
.nav__item--has-sub>a::after{content:"";display:inline-block;margin-left:.4rem;border:4px solid transparent;border-top-color:currentColor;transform:translateY(2px)}
.nav__item--cta>a{border:2px solid var(--red);color:#fff}
.nav__item--cta>a:hover{color:#fff}

.nav__sub{
  position:absolute;top:100%;left:-1rem;min-width:255px;
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);
  list-style:none;margin:0;padding:.6rem 0;
  opacity:0;visibility:hidden;transform:translateY(8px);transition:all var(--t);
}
.nav__item--has-sub:hover .nav__sub,
.nav__item--has-sub:focus-within .nav__sub{opacity:1;visibility:visible;transform:translateY(0)}
.nav__sub a{display:block;padding:.55rem 1.4rem;text-decoration:none;font-size:.9rem;color:var(--body)}
.nav__sub a:hover{background:var(--beige);color:var(--ink)}

.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:.6rem;cursor:pointer}
.burger span{display:block;width:26px;height:2px;background:var(--ink);transition:transform var(--t),opacity var(--t)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* =========================================================
   5 · HERO
   ========================================================= */
.hero{position:relative;min-height:clamp(540px,80vh,780px);display:flex;align-items:flex-end;overflow:hidden}
.hero__media{position:absolute;inset:0}
.hero__media img{width:100%;height:100%;object-fit:cover}
.hero__overlay{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(35,31,32,.85) 0%,rgba(35,31,32,.35) 55%,rgba(35,31,32,.10) 100%),
             linear-gradient(to right,rgba(35,31,32,.72) 0%,rgba(35,31,32,.42) 45%,rgba(35,31,32,0) 80%)}
.hero__inner{position:relative;padding:4.5rem 0 4.2rem;color:#fff;max-width:820px}
/* Eigene Staffelung statt der globalen h1-Größe: über dem Foto soll die
   Zeile das Bild begleiten, nicht zudecken. Am Handy lief die Überschrift
   sonst über fünf Zeilen und ließ von der Küche nichts mehr übrig. */
.hero h1{color:#fff;margin-bottom:.9rem;font-size:clamp(1.75rem,4.2vw,3.4rem);line-height:1.08}
.hero__lead{font-size:clamp(.98rem,.55vw + .84rem,1.05rem);line-height:1.6;
  color:rgba(255,255,255,.88);max-width:560px}
.hero__actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.9rem}
.hero__trust{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem 2rem;padding:0;margin:2rem 0 0;
  font-size:.88rem;color:rgba(255,255,255,.85)}
.hero__trust li{position:relative;padding-left:1.5rem}
.hero__trust li::before{content:"";position:absolute;left:0;top:.55em;width:10px;height:5px;
  border-left:2px solid var(--red);border-bottom:2px solid var(--red);transform:rotate(-45deg)}

/* =========================================================
   6 · USP-LEISTE
   ========================================================= */
.usps{background:var(--ink);color:#C6BFB9;position:relative}
.usps__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;padding:clamp(2.6rem,4.5vw,3.6rem) 0}

/* Vier eigenständige Blöcke statt frei stehender Textspalten */
.usp{position:relative;overflow:hidden;background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.10);padding:1.9rem 1.6rem 1.7rem;
  display:flex;flex-direction:column;
  transition:background var(--t),border-color var(--t),transform .45s cubic-bezier(.2,.8,.2,1)}
.usp::before{content:"";position:absolute;left:0;top:0;height:2px;width:100%;
  background:var(--red);transform:scaleX(0);transform-origin:left;
  transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.usp:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);transform:translateY(-4px)}
.usp:hover::before{transform:scaleX(1)}

.usp__badge{flex:none;width:46px;height:46px;display:grid;place-items:center;margin-bottom:1.2rem;
  background:rgba(238,34,37,.12);border:1px solid rgba(238,34,37,.35);
  transition:background var(--t),border-color var(--t)}
.usp:hover .usp__badge{background:var(--red);border-color:var(--red)}
.usp__icon{width:24px;height:24px;stroke:var(--red);stroke-width:1.6;fill:none;
  stroke-linecap:round;stroke-linejoin:round;margin:0;transition:stroke var(--t)}
.usp:hover .usp__icon{stroke:#fff}

.usp__title{font-family:var(--f-sans);font-style:normal;font-size:1rem;font-weight:600;color:#fff;margin-bottom:.45rem}
.usp p{font-size:.9rem;margin:0;line-height:1.62;color:#B4ABA5}

.promo{background:var(--beige);border-top:3px solid var(--red)}
.promo__inner{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:2.2rem;padding:2.6rem 0}
.promo__text h2{font-size:clamp(1.4rem,2.4vw,2.1rem);margin-bottom:.5rem}
.promo__text p{margin:0 0 .9rem;font-size:.97rem;max-width:74ch}
.promo__text p:last-child{margin-bottom:0}
.promo .stoerer{flex:none}

.promo__icon{
  flex:none;width:92px;height:92px;border-radius:var(--r-pill);background:var(--red);
  display:flex;align-items:center;justify-content:center;
}
.promo__icon svg{width:42px;height:42px;stroke:#fff;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ticks--inline{display:flex;flex-wrap:wrap;gap:.35rem 1.8rem;margin:1rem 0 0}
.ticks--inline li{margin-bottom:0;font-size:.93rem}

/* ---------------------------------------------------------
   Finanzierungsband direkt unter dem Hero
   --------------------------------------------------------- */
.finance{position:relative;overflow:hidden;background:var(--beige);border-top:3px solid var(--red)}

/* Lichtstimmung: heller Verlauf links, warmer roter Schimmer hinter der Karte */
.finance::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(48% 78% at 82% 50%,rgba(238,34,37,.10),rgba(238,34,37,0) 70%),
    radial-gradient(110% 85% at 6% 0%,rgba(255,255,255,.72),rgba(255,255,255,0) 62%)}

/* „0 %" als Wasserzeichen in der Karte. Zwei Zeichen statt einem, deshalb
   etwas kleiner gesetzt und weiter nach rechts geschoben – die Null soll den
   Satz nicht stören, sondern nur hinterlegen. */
.finance__mark{
  position:absolute;right:-.8rem;bottom:-2.4rem;
  font-family:var(--f-display);font-style:italic;font-weight:500;
  font-size:9.5rem;line-height:.72;letter-spacing:-.05em;color:var(--red);opacity:.07;
  pointer-events:none;user-select:none;z-index:0}

.finance__inner{position:relative;z-index:1;display:grid;grid-template-columns:1.35fr .82fr;
  gap:clamp(2.4rem,5vw,4.5rem);align-items:center;padding:clamp(3rem,6vw,4.8rem) 0}
.finance h2{font-size:clamp(1.6rem,3vw,2.5rem);margin-bottom:.75rem}
.finance__lead{font-size:1.02rem;max-width:58ch;margin:0 0 1.7rem}

/* Vorteils-Chips */
.finance__chips{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem;padding:0;margin:0}
.finance__chips li{display:inline-flex;align-items:center;gap:.55rem;
  background:rgba(255,255,255,.62);border:1px solid var(--line);padding:.52rem 1rem;
  font-size:.9rem;color:var(--ink);
  transition:transform var(--t),border-color var(--t),background var(--t),box-shadow var(--t)}
.finance__chips li:hover{transform:translateY(-2px);border-color:var(--red);background:#fff;
  box-shadow:0 8px 20px -12px rgba(35,31,32,.55)}
.finance__chips svg{width:13px;height:13px;flex:none;stroke:var(--red);stroke-width:3;
  fill:none;stroke-linecap:round;stroke-linejoin:round}

/* Karte rechts */
.finance__card{position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);
  border-top:3px solid var(--red);padding:2.2rem 2rem 2rem;
  box-shadow:0 20px 52px -26px rgba(35,31,32,.5);
  transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s cubic-bezier(.2,.8,.2,1)}
.finance__card:hover{transform:translateY(-5px);box-shadow:0 30px 64px -26px rgba(35,31,32,.55)}
.finance__card>*:not(.finance__mark):not(.finance__badge):not(.finance__zahl){position:relative;z-index:1}
.finance__card h3{font-size:1.35rem;margin-bottom:.3rem}
.finance__card .eyebrow{margin-bottom:.5rem}

/* Kartenkopf: Prozent-Badge neben dem Titel */
.finance__card-head{display:flex;align-items:center;gap:1.1rem;margin-bottom:1.2rem}
.finance__card-head .eyebrow{margin-bottom:.25rem}
.finance__card-head h3{margin:0}
.finance__badge{position:relative;flex:none;width:64px;height:64px;
  border-radius:var(--r-pill);background:var(--red);display:grid;place-items:center;
  box-shadow:0 12px 28px -12px rgba(238,34,37,.95);
  transition:transform .5s cubic-bezier(.2,.8,.2,1)}
/* Die beiden Zahlen gehören zusammen: 0 % gilt ausschließlich für 36 Monate.
   Deshalb stehen sie in einer gemeinsamen roten Fläche und nicht getrennt –
   die Laufzeit lässt sich so gar nicht überlesen. */
.finance__zahl{flex:none;display:grid;justify-items:center;gap:.1rem;
  background:var(--red);color:#fff;padding:.7rem 1rem .6rem;
  box-shadow:0 12px 28px -12px rgba(238,34,37,.95)}
.finance__zahl b{font-family:var(--f-display);font-style:italic;font-weight:500;
  font-size:1.85rem;line-height:1;letter-spacing:-.02em}
.finance__zahl i{font-style:normal;font-size:.62rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;opacity:.92}
.finance__card:hover .finance__badge{transform:rotate(-12deg) scale(1.06)}
.finance__badge svg{width:30px;height:30px;stroke:#fff;stroke-width:2;fill:none;
  stroke-linecap:round;position:relative;z-index:1}
.finance__badge::after{content:"";position:absolute;inset:0;border-radius:inherit;
  border:2px solid var(--red);opacity:0;animation:financePulse 3s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes financePulse{
  0%{transform:scale(1);opacity:.5}
  70%{transform:scale(1.55);opacity:0}
  100%{transform:scale(1.55);opacity:0}
}

/* Drei Schritte in der Karte */
.finance__steps{list-style:none;counter-reset:fs;padding:0;margin:0 0 1.7rem}
.finance__steps li{counter-increment:fs;position:relative;padding-left:2.5rem;
  margin-bottom:.9rem;font-size:.93rem;line-height:1.5}
.finance__steps li:last-child{margin-bottom:0}
.finance__steps li::before{content:counter(fs);position:absolute;left:0;top:0;
  width:1.7rem;height:1.7rem;border-radius:var(--r-pill);background:var(--beige);
  color:var(--red-text);font-family:var(--f-sans);font-weight:600;font-size:.78rem;
  display:grid;place-items:center;transition:background var(--t),color var(--t)}
.finance__card:hover .finance__steps li::before{background:var(--red);color:#fff}
.finance__legal{font-size:.76rem;color:var(--muted);margin:1rem 0 0;line-height:1.5}

@media (max-width:980px){
  .finance__inner{grid-template-columns:1fr;gap:2.6rem}
  .finance__card{margin-top:1.6rem}
  .finance__card{padding:1.9rem 1.6rem 1.8rem}
  .finance__badge{width:56px;height:56px}
  .finance__mark{font-size:11rem;right:-.8rem;bottom:-2.6rem}
  .finance__badge svg{width:28px;height:28px}
}

/* Sanftes Einblenden beim Scrollen */
[data-reveal]{opacity:0;transform:translateY(20px);
  transition:opacity .75s cubic-bezier(.2,.8,.2,1),transform .75s cubic-bezier(.2,.8,.2,1)}
[data-reveal].is-visible{opacity:1;transform:none}
[data-reveal][data-reveal-delay="1"]{transition-delay:.12s}
[data-reveal][data-reveal-delay="2"]{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
  .finance__badge::after{animation:none}
  .finance__card:hover,.finance__chips li:hover{transform:none}
}

/* Aktionsband Ausstellungsküchen – dunkel, damit es sich vom Finanzierungsband abhebt */
.promo--offer{background:var(--ink);border-top-color:var(--red)}
.promo--offer h2{color:#fff}
.promo--offer p{color:#C6BFB9}

/* =========================================================
   7 · SEKTIONEN & RASTER
   ========================================================= */
.section{padding:clamp(3.5rem,7vw,6.5rem) 0}
.section--tint{background:var(--beige-light)}
.section--beige{background:var(--beige)}
.section--dark{background:var(--ink);color:#C6BFB9}
.section--dark h2,.section--dark h3{color:#fff}
.section--sage{background:var(--sage);color:#20302A}
.section--sage h2,.section--sage h3{color:var(--ink)}
.section--sage .btn--dark{border-color:var(--ink)}
.regions{font-size:.95rem;line-height:2;color:#243029;margin:1.6rem 0 2rem;
  border-top:1px solid rgba(35,31,32,.2);border-bottom:1px solid rgba(35,31,32,.2);padding:1.2rem 0}

.section__head{max-width:730px;margin-bottom:3rem}
.section__head--row{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;max-width:none}
.section__lead{font-size:1.05rem;color:var(--muted);margin:0}

.grid{display:grid;gap:2.2rem}
.grid--2{grid-template-columns:1fr 1fr;align-items:center}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--tight{gap:1.4rem}
.grid--gap-xl{gap:4rem}

/* --- Intro --- */
.intro__media{position:relative}
.intro__media img{width:100%;object-fit:cover}
.badge-card{
  position:absolute;left:-1.5rem;bottom:2rem;background:var(--red);color:#fff;
  padding:1.3rem 1.7rem;display:flex;flex-direction:column;line-height:1.25;
}
.badge-card strong{font-family:var(--f-display);font-style:italic;font-size:1.9rem;font-weight:500}
.badge-card span{font-size:.8rem;letter-spacing:.05em;opacity:.9}

.ticks{list-style:none;padding:0;margin:1.6rem 0}
.ticks li{position:relative;padding-left:1.9rem;margin-bottom:.6rem}
.ticks li::before{
  content:"";position:absolute;left:0;top:.6em;width:11px;height:6px;
  border-left:2.5px solid var(--red);border-bottom:2.5px solid var(--red);transform:rotate(-45deg);
}

/* --- Karten --- */
.card{background:#fff;border:1px solid var(--line);display:flex;flex-direction:column}
.card__media{display:block;overflow:hidden;aspect-ratio:4/3}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.card:hover .card__media img{transform:scale(1.05)}
/* Freigestellte Produktfotos: nicht beschneiden, sondern auf ruhigem Grund zeigen */
.card__media--kontur{aspect-ratio:4/3;background:#fff;border-bottom:1px solid var(--line);display:grid;place-items:center;padding:1.1rem}
.card__media--kontur img{width:auto;height:100%;max-width:100%;object-fit:contain}
.card:hover .card__media--kontur img{transform:none}

/* Bild mit Unterzeile, volle Spaltenbreite */
.bildzeile{margin:0 0 2.6rem}
.bildzeile img{width:100%;display:block;aspect-ratio:3/1;object-fit:cover;object-position:center 40%}
@media (max-width:700px){.bildzeile img{aspect-ratio:16/9}}
.bildzeile figcaption{margin-top:.7rem;font-size:.86rem;color:var(--muted);max-width:60ch}
.card__body{padding:1.8rem;display:flex;flex-direction:column;flex:1}
.card__body h3{margin-bottom:.5rem}
.card__body h3 a{text-decoration:none}
.card__body h3 a:hover{color:var(--red)}
.card__body p{font-size:.95rem}
.card__body .link-arrow{margin-top:auto;align-self:flex-start;margin-right:0}

/* --- Kacheln (Modelle) --- */
.tile a{display:block;text-decoration:none;position:relative;overflow:hidden;background:var(--ink)}
.tile img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity var(--t)}
.tile a:hover img{transform:scale(1.06);opacity:.72}
.tile__body{position:absolute;left:0;right:0;bottom:0;padding:1.5rem;color:#fff;
  background:linear-gradient(to top,rgba(35,31,32,.88),rgba(35,31,32,0))}
.tile__body h3{color:#fff;margin:0 0 .15rem}
.tile__body p{margin:0;font-size:.86rem;color:rgba(255,255,255,.82)}

/* --- Ablauf-Schritte --- */
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:2.2rem;padding:0;margin:0 0 3rem}
.step{border-top:2px solid var(--red);padding-top:1.5rem}
.step__no{display:block;font-family:var(--f-display);font-style:italic;font-size:1.5rem;color:var(--red);margin-bottom:.5rem;line-height:1}
.step h3{font-size:1.08rem;margin-bottom:.5rem}
.step p{font-size:.92rem;margin:0}

/* --- Galerie --- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem;margin-bottom:2.8rem}
.gallery figure{margin:0;overflow:hidden;aspect-ratio:4/3}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.gallery figure:hover img{transform:scale(1.06)}

/* --- Marken --- */
/* Markenleiste: flex statt grid, damit eine unvollständige letzte Reihe mittig sitzt */
.brands{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:1.6rem 2.4rem;padding:0;margin:0 0 3.5rem}
.brands li{flex:0 0 auto;width:min(150px, calc((100% - 5 * 2.4rem) / 6))}
.brands img{width:100%;filter:grayscale(1);opacity:.5;transition:opacity var(--t),filter var(--t)}
.brands li:hover img{filter:grayscale(0);opacity:1}

.brand-highlight{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;background:#fff;border:1px solid var(--line);padding:2.8rem}
.brand-highlight img{width:100%;object-fit:cover}

/* --- Team --- */
.person img{width:100%;aspect-ratio:8/11;object-fit:cover;margin-bottom:1.1rem}
.person h3{margin-bottom:.15rem}
.person__role{font-size:.78rem;color:var(--red-text);letter-spacing:.1em;text-transform:uppercase;font-weight:600;margin-bottom:.6rem}
.person p{font-size:.92rem}

/* --- Zitate --- */
.quote{margin:0;background:#fff;border:1px solid var(--line);border-top:3px solid var(--red);padding:2rem}
.quote p{font-family:var(--f-display);font-style:italic;font-size:1.1rem;color:var(--ink);line-height:1.5}
.quote::before{content:"„";display:block;font-family:var(--f-display);font-size:3rem;line-height:.6;color:var(--red);margin-bottom:.7rem}
.quote cite{font-style:normal;font-size:.86rem;color:var(--muted)}

/* --- FAQ --- */
.faq{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item summary{
  cursor:pointer;list-style:none;padding:1.3rem 2.5rem 1.3rem 0;position:relative;
  font-size:1.03rem;font-weight:600;color:var(--ink);
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{
  content:"";position:absolute;right:.4rem;top:1.7rem;width:11px;height:11px;
  border-right:2.5px solid var(--red);border-bottom:2.5px solid var(--red);
  transform:rotate(45deg);transition:transform var(--t);
}
.faq__item[open] summary{color:var(--red)}
.faq__item[open] summary::after{transform:rotate(-135deg)}
.faq__body{padding:0 2.5rem 1.4rem 0}
.faq__body p{margin:0;font-size:.97rem}

/* --- Blog --- */
.post img{width:100%;aspect-ratio:3/2;object-fit:cover;margin-bottom:1.1rem}
.post__meta{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--red-text);font-weight:600;margin-bottom:.4rem}
.post h3{font-size:1.13rem;margin-bottom:.5rem}
.post h3 a{text-decoration:none}
.post h3 a:hover{color:var(--red)}
.post p{font-size:.94rem}

/* =========================================================
   8 · KONTAKT
   ========================================================= */
.section--contact{background:var(--beige);padding:clamp(3.5rem,7vw,6.5rem) 0}
.standort-img{width:100%;margin:1.8rem 0 .5rem;border:1px solid var(--line)}
.standort-caption{margin-bottom:0}
.nap{display:grid;grid-template-columns:130px 1fr;gap:.6rem 1.5rem;margin:2rem 0}
.nap dt{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;padding-top:.25rem}
.nap dd{margin:0;color:var(--ink)}
.nap a{text-decoration:none;border-bottom:2px solid var(--red)}

.map-placeholder{
  background:#DCD3C9;border:1px dashed var(--muted);aspect-ratio:16/9;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;text-align:center;padding:1.5rem;
}
.map-placeholder p{margin:0;font-size:.9rem;color:var(--body)}

.formcard{background:#fff;border:1px solid var(--line);padding:2.6rem}
.formcard h3{font-size:1.3rem;margin-bottom:.3rem}
.formcard form{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;margin-top:1.6rem}
.formrow{display:flex;flex-direction:column;gap:.35rem}
.formrow--full{grid-column:1 / -1}
.formrow label{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
.formrow input,.formrow select,.formrow textarea{
  font:inherit;font-size:.97rem;padding:.85rem .9rem;border:1px solid var(--line);border-radius:var(--r);
  background:#FBF9F7;color:var(--ink);transition:border-color var(--t),background var(--t);
}
.formrow input:focus,.formrow select:focus,.formrow textarea:focus{outline:0;border-color:var(--red);background:#fff}
.checkline{flex-direction:row;align-items:flex-start;gap:.7rem}
.checkline input{margin-top:.35rem;accent-color:var(--red)}
.checkline label{text-transform:none;letter-spacing:0;font-size:.84rem;color:var(--body);line-height:1.55;font-weight:400}
.checkline a{color:var(--ink)}
.formcard .btn{grid-column:1 / -1}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* =========================================================
   9 · FOOTER
   ========================================================= */
.footer{background:var(--ink);color:#A29A93;font-size:.92rem;padding-top:4rem}
.footer h2{font-family:var(--f-sans);font-style:normal;font-size:.78rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#fff;margin-bottom:1.1rem}
.footer a{color:#D4CCC5;text-decoration:none}
.footer a:hover{color:var(--red)}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:2.5rem;padding-bottom:3rem}
.footer__brand img{height:44px;width:auto;margin-bottom:1.3rem}
.footer__brand p{max-width:340px}
.footer__social a{margin-right:1.2rem;border-bottom:2px solid var(--red);padding-bottom:1px}
.footer__col ul{list-style:none;padding:0;margin:0}
.footer__col li{margin-bottom:.5rem}
.footer address{font-style:normal;line-height:1.85}
.footer__hours{margin-top:1rem;color:#A39A93}
.footer__area{border-top:1px solid rgba(255,255,255,.1);padding:1.6rem 0;font-size:.84rem;color:#A39A93}
.footer__area p{margin:0}
.footer__bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.1);padding:1.3rem 0 2rem;font-size:.82rem}
.footer__bottom p{margin:0}

/* --- Mobile Sticky-CTA --- */
.stickybar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:120;
  grid-template-columns:1fr 1fr;box-shadow:0 -6px 24px rgba(35,31,32,.18)}
.stickybar a{padding:1rem;text-align:center;text-decoration:none;font-size:.84rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.stickybar__call{background:#fff;color:var(--ink);border-top:1px solid var(--line)}
.stickybar__cta{background:var(--red);color:#fff}

/* =========================================================
   10 · RESPONSIVE
   ========================================================= */
@media (max-width:1320px){
  .nav__list{gap:.8rem}
  .nav__item>a{font-size:.82rem}
  .nav__item--cta>a{padding:.6rem .9rem;font-size:.72rem}
}

@media (max-width:1024px){
  .usps__grid{grid-template-columns:repeat(2,1fr);gap:1rem}
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:repeat(3,1fr)}
  .brands{gap:1.5rem 2rem}
  .brands li{width:min(140px, calc((100% - 3 * 2rem) / 4))}
  .footer__grid{grid-template-columns:1fr 1fr;gap:2.2rem}

  /* Schließen-Knopf muss über dem geöffneten Menü liegen, sonst gibt es
     auf dem Handy keinen sichtbaren Weg zurück. */
  /* Das Menü ist ein Kind des Kopfbereichs – der Knopf braucht deshalb
     innerhalb desselben Stapelkontexts einen höheren Wert als das Menü. */
  .burger{display:flex;position:relative;z-index:1320}
  /* Bei geöffnetem Menü muss der ganze Kopfbereich über Menü und Abdunkelung
     liegen – nur so bleiben Logo und Schließen-Knopf erreichbar. Der z-index
     am Knopf allein reicht nicht, weil der Kopfbereich einen eigenen
     Stapelkontext bildet. */
  body.nav-open .topbar{display:none}
  body.nav-open .header,
  body:has(> main > .hero) .header.nav-oben,
  body:has(> main > .page-hero) .header.nav-oben{
    position:fixed;top:0;left:0;right:0;z-index:1310;
    background:#fff;border-bottom:1px solid var(--line);backdrop-filter:none;box-shadow:none
  }
  body.nav-open .header .header__logo img{filter:none}
  body.nav-open .burger span{background:var(--ink)}
  .nav{
    position:fixed;inset:0 0 0 auto;width:min(88vw,380px);background:#fff;z-index:1300;
    padding:5rem 1.8rem 2.5rem;overflow-y:auto;transform:translateX(100%);visibility:hidden;
    transition:transform var(--t),visibility var(--t);box-shadow:-12px 0 40px rgba(35,31,32,.18);
    overscroll-behavior:contain;
  }
  /* Abdunkelung daneben – macht sichtbar, dass ein Tipp daneben schließt.
     Bewusst ein echtes Element: ein Pseudo-Element nimmt außerhalb der
     Elternbox keine Klicks entgegen. */
  .navdim{position:fixed;inset:0;z-index:1290;background:rgba(35,31,32,.5);
    opacity:0;visibility:hidden;transition:opacity var(--t),visibility var(--t);
    touch-action:none}
  .navdim.is-offen{opacity:1;visibility:visible}
  .nav.is-open{transform:translateX(0);visibility:visible}
  .nav__list{flex-direction:column;align-items:stretch;gap:0}
  .nav__item{border-bottom:1px solid var(--line)}
  .nav__item>a{display:block;padding:.95rem 0;font-size:1rem}
  .nav__item--has-sub>a::after{float:right;margin-top:.65rem}
  .nav__sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;
    padding:0 0 .8rem .9rem;min-width:0;display:none}
  .nav__item--has-sub.is-open .nav__sub{display:block}
  .nav__item--cta{border:0;margin-top:1.2rem}
  .nav__item--cta .btn{width:100%;padding:.95rem}
  body.nav-open{overflow:hidden}
}

@media (max-width:1024px){
  .promo__inner{grid-template-columns:auto 1fr;gap:1.6rem}
  .promo__inner .btn{grid-column:1 / -1;justify-self:start}
}

@media (max-width:880px){
  body{font-size:16px}
  .promo__inner{grid-template-columns:1fr;text-align:left;gap:1.2rem;padding:2.2rem 0}
  .hero__trust{gap:.4rem 1.2rem;font-size:.82rem}
  /* Auszeichnungszeile über der Überschrift: am Handy schmaler gesetzt,
     sonst nimmt sie allein zwei Zeilen ein */
  .hero .eyebrow{font-size:.72rem;letter-spacing:.16em}
  .topbar__inner{flex-direction:column;gap:.15rem;text-align:center;padding:.45rem 0}
  .topbar__note{font-size:.76rem}
  .grid--2,.brand-highlight{grid-template-columns:1fr}
  .grid--3{grid-template-columns:1fr}
  .grid--gap-xl{gap:2.5rem}
  .section__head--row{flex-direction:column;align-items:flex-start;gap:1.2rem}
  .intro__media{order:-1}
  .badge-card{left:1rem;bottom:1rem}
  .formcard{padding:1.8rem}
  .formcard form{grid-template-columns:1fr}
  .brand-highlight{padding:1.8rem}
  .hero__inner{padding:3.5rem 0 3rem}
  .stickybar{display:grid}
  .footer{padding-bottom:66px}
}

/* --------------------------------------------------------------------------
   Am Handy zuerst das Formular
   Auf Termin- und Kontaktseite muss der Kunde nicht erst an Infoblöcken
   vorbeiscrollen: der Abschnitt mit dem Anfrageformular steht direkt unter
   dem Hero, und in ihm die Formularkarte vor dem Begleittext.
   Ab 881 px greift nichts davon – dort stehen beide Spalten nebeneinander.
   -------------------------------------------------------------------------- */
@media (max-width:880px){
  main:has(> #anfrage){display:flex;flex-direction:column}
  main:has(> #anfrage) > .page-hero{order:-3}
  main:has(> #anfrage) > .breadcrumb{order:-2}
  main:has(> #anfrage) > #anfrage{order:-1}
  #anfrage .grid--2 > .formcard{order:-1}
}

@media (max-width:600px){
  .usps__grid{grid-template-columns:1fr;gap:.9rem;padding:2.2rem 0}
  .usp{padding:1.5rem 1.4rem}
  .grid--4{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:1.6rem}
  .gallery{grid-template-columns:repeat(2,1fr);gap:.6rem}
  .brands{gap:1.4rem 1.4rem}
  .brands li{width:calc((100% - 2 * 1.4rem) / 3)}
  .footer__grid{grid-template-columns:1fr}
  .nap{grid-template-columns:1fr;gap:.2rem 0}
  .nap dt{margin-top:.9rem}
  .hero__actions .btn{width:100%}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

@media print{
  .header,.topbar,.stickybar,.hero__actions,.formcard{display:none}
  body{font-size:11pt;color:#000}
}

/* =========================================================
   11 · UNTERSEITEN (Marken, Küchen, Planung …)
   ========================================================= */

/* Kompakter Seiten-Hero */
.page-hero{position:relative;min-height:clamp(340px,46vh,480px);display:flex;align-items:flex-end;overflow:hidden}
.page-hero__media{position:absolute;inset:0}
.page-hero__media img{width:100%;height:100%;object-fit:cover}
.page-hero__overlay{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(35,31,32,.88) 0%,rgba(35,31,32,.45) 60%,rgba(35,31,32,.18) 100%),
             linear-gradient(to right,rgba(35,31,32,.80) 0%,rgba(35,31,32,.45) 52%,rgba(35,31,32,0) 88%)}
.page-hero__inner{position:relative;padding:3.5rem 0 3rem;color:#fff;max-width:820px}
.page-hero h1{color:#fff;font-size:clamp(2rem,4vw,3.4rem);margin-bottom:.8rem}
.page-hero__lead{font-size:1.06rem;color:rgba(255,255,255,.88);max-width:620px;margin:0}

/* Brotkrumen */
.breadcrumb{background:var(--beige-light);border-bottom:1px solid var(--line);font-size:.85rem}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;margin:0;padding:.85rem 0;color:var(--muted)}
.breadcrumb li::after{content:"›";margin-left:.45rem;color:var(--line)}
.breadcrumb li:last-child::after{content:""}
.breadcrumb a{color:var(--body);text-decoration:none;border-bottom:1px solid transparent}
.breadcrumb a:hover{color:var(--red);border-color:var(--red)}
.breadcrumb [aria-current]{color:var(--ink)}

/* Produktzeile: Bild links/rechts im Wechsel */
.product{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center;margin-bottom:clamp(3rem,6vw,5rem)}
.product:last-child{margin-bottom:0}
.product--flip .product__media{order:2}
.product__media img{width:100%;object-fit:cover}
.product__badge{display:inline-block;background:var(--ink);color:#fff;font-size:.72rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;padding:.35rem .8rem;margin-bottom:1rem}

/* Faktenliste in zwei Spalten */
.facts{list-style:none;padding:0;margin:1.4rem 0;display:grid;grid-template-columns:1fr 1fr;gap:.9rem 2rem}
.facts li{border-top:1px solid var(--line);padding-top:.7rem;font-size:.93rem}
.facts b{display:block;font-family:var(--f-sans);font-weight:600;color:var(--ink);font-size:.8rem;
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:.15rem}

/* Vergleichstabelle */
.ctable{width:100%;border-collapse:collapse;font-size:.95rem;background:#fff;border:1px solid var(--line)}
.ctable th,.ctable td{text-align:left;padding:.95rem 1.1rem;border-bottom:1px solid var(--line);vertical-align:top}
.ctable thead th{font-family:var(--f-sans);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;background:var(--ink);font-weight:600}
.ctable tbody tr:last-child td{border-bottom:0}
.ctable td:first-child{font-weight:600;color:var(--ink);width:26%}
.ctable .yes{color:var(--red);font-weight:600}

/* Ablaufschritte als Karten mit Nummernplakette */
.numbers{list-style:none;counter-reset:n;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.numbers li{counter-increment:n;position:relative;overflow:hidden;background:#fff;
  border:1px solid var(--line);padding:5.15rem 1.7rem 1.8rem;
  box-shadow:0 1px 0 rgba(35,31,32,.03);
  transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s cubic-bezier(.2,.8,.2,1),border-color var(--t)}
.numbers li:hover{transform:translateY(-4px);border-color:#C9BEB3;
  box-shadow:0 18px 40px -22px rgba(35,31,32,.5)}

/* rote Linie fährt beim Überfahren ein */
.numbers li>h3::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;
  background:var(--red);transform:scaleX(0);transform-origin:left;
  transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.numbers li:hover>h3::before{transform:scaleX(1)}

/* Haarlinie neben der Nummer */
.numbers li::before{content:"";position:absolute;top:3.05rem;left:5.4rem;right:1.7rem;height:1px;
  background:var(--line);transition:background var(--t)}
.numbers li:hover::before{background:#C9BEB3}

/* Nummernplakette oben links */
.numbers li::after{content:counter(n,decimal-leading-zero);position:absolute;top:1.7rem;left:1.7rem;
  width:2.7rem;height:2.7rem;display:grid;place-items:center;
  background:transparent;border:1px solid var(--red);color:var(--red);
  font-family:var(--f-display);font-style:italic;font-weight:500;font-size:1.02rem;line-height:1;
  transition:background var(--t),color var(--t)}
.numbers li:hover::after{background:var(--red);color:#fff}

.section:not(.section--tint):not(.section--beige):not(.section--dark) .numbers li{background:var(--beige-light)}
.numbers h3{position:relative;font-size:1.06rem;margin-bottom:.45rem}
.numbers p{font-size:.93rem;margin:0;line-height:1.62}

.numbers--4{grid-template-columns:repeat(4,1fr)}
/* Fünf Personen im Team. Fünf Spalten teilen sich nur durch fünf oder eins
   ohne Rest – deshalb unterhalb der Reihe keine Zwischenstufe mit Restzeile,
   sondern untereinander mit Bild neben dem Text. */
.grid--5{grid-template-columns:repeat(5,1fr)}
@media (max-width:900px){
  .grid--5{grid-template-columns:1fr;gap:1.6rem}
  .grid--5 .person{display:grid;grid-template-columns:minmax(120px,32%) 1fr;
    grid-template-rows:auto auto auto 1fr;column-gap:1.2rem;align-items:start}
  /* Bild links über alle Zeilen, Text rechts – sonst rutschen Rolle und
     Beschreibung in die Bildspalte. */
  .grid--5 .person img{grid-column:1;grid-row:1 / -1;margin-bottom:0;align-self:start}
  .grid--5 .person h3,
  .grid--5 .person .person__role,
  .grid--5 .person p,
  .grid--5 .person .person__mail{grid-column:2}
  .grid--5 .person h3{grid-row:1;margin-top:-.25rem}
  .grid--5 .person .person__role{grid-row:2}
  .grid--5 .person > p:not(.person__role):not(.person__mail){grid-row:3}
  .grid--5 .person .person__mail{grid-row:4;align-self:start;
    font-size:.78rem;overflow-wrap:anywhere;hyphens:none}
}
@media (max-width:420px){
  .grid--5 .person{grid-template-columns:minmax(104px,36%) 1fr;gap:1rem}
}
@media (max-width:1080px){.numbers--4{grid-template-columns:repeat(2,1fr)}}

/* CTA-Band */
.ctaband{background:var(--ink);color:#C6BFB9;text-align:center}
.ctaband .wrap{padding:clamp(3rem,6vw,4.5rem) 0}
.ctaband h2{color:#fff}
.ctaband p{max-width:62ch;margin-inline:auto}
.ctaband__actions{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap;margin-top:1.8rem}

@media (max-width:880px){
  .product{grid-template-columns:1fr;gap:1.8rem}
  .product--flip .product__media{order:0}
  .facts{grid-template-columns:1fr;gap:.7rem}
  .numbers{grid-template-columns:1fr;gap:.9rem}
  .numbers li{padding:5.05rem 1.5rem 1.6rem}
  .page-hero__inner{padding:2.8rem 0 2.4rem}
  .ctable{font-size:.9rem}
  .ctable th,.ctable td{padding:.75rem .8rem}
  .ctable td:first-child{width:38%}
}

/* Hero-Video und Inline-Videos */
.page-hero--video{min-height:clamp(420px,58vh,620px)}
.page-hero__media video{width:100%;height:100%;object-fit:cover;display:block}
.inline-video{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--ink)}
@media (prefers-reduced-motion:reduce){
  .page-hero__media video,.inline-video{display:none}
  .page-hero__media{background:var(--ink)}
}

/* =========================================================
   12 · FINANZIERUNGSRECHNER
   ========================================================= */
.calc{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(1.8rem,3.5vw,3rem);align-items:stretch}

.calc__panel{background:#fff;border:1px solid var(--line);border-top:3px solid var(--red);
  padding:clamp(1.8rem,3vw,2.4rem)}
.calc__panel h3{font-size:1.25rem;margin-bottom:1.6rem}

/* Regler */
.calc__field{margin-bottom:1.8rem}
.calc__field:last-of-type{margin-bottom:0}
.calc__label{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.7rem}
.calc__label span:first-child{font-family:var(--f-sans);font-size:.78rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.calc__label output{font-family:var(--f-display);font-style:italic;font-size:1.35rem;color:var(--ink)}
.calc input[type=range]{width:100%;accent-color:var(--red);height:1.5rem;cursor:pointer}
.calc input[type=range]:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.calc__scale{display:flex;justify-content:space-between;font-size:.76rem;color:var(--muted);margin-top:.15rem}

/* Laufzeit-Chips */
/* Neun Laufzeiten – als 3×3-Raster statt umbrechender Reihe, sonst
   bleibt in der letzten Zeile eine Lücke stehen. */
.calc__terms{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;padding:0;margin:0}
.calc__terms input{position:absolute;opacity:0;width:0;height:0}
.calc__terms label{display:block;text-align:center;border:1px solid var(--line);padding:.5rem .6rem;font-size:.88rem;
  color:var(--body);cursor:pointer;transition:all var(--t);white-space:nowrap}
.calc__terms label span{color:var(--muted);font-size:.8em}
/* Zweite Zeile im Laufzeit-Knopf: „0 %" bei der zinsfreien Laufzeit, sonst nur
   das Prozentzeichen. */
.calc__terms label em{display:block;font-style:normal;font-size:.72rem;font-weight:600;
  letter-spacing:.06em;color:var(--muted);margin-top:.15rem}
.calc__terms input:checked+label em{color:rgba(255,255,255,.92)}

/* Die zinsfreie Laufzeit hebt sich dauerhaft ab, nicht erst wenn sie gewählt ist –
   sonst ist das Angebot genau dann unsichtbar, wenn jemand die anderen durchprobiert. */
.calc__terms .ist-frei label{border-color:var(--red);background:rgba(238,34,37,.06);
  color:var(--ink);font-weight:600}
.calc__terms .ist-frei label em{color:var(--red-text);font-weight:700;letter-spacing:.04em}
.calc__terms .ist-frei input:checked+label{background:var(--red);color:#fff}
.calc__terms .ist-frei input:checked+label em{color:#fff}
.calc__terms label:hover{border-color:var(--red);color:var(--ink)}
.calc__terms input:checked+label{background:var(--red);border-color:var(--red);color:#fff}
.calc__terms input:checked+label span{color:rgba(255,255,255,.8)}
.calc__terms input:focus-visible+label{outline:2px solid var(--ink);outline-offset:2px}
.calc__hint{font-size:.86rem;line-height:1.6;color:var(--muted);margin:1.3rem 0 0;
  padding-top:1.2rem;border-top:1px solid var(--line)}

/* Ergebnisfeld */
.calc__result{background:var(--ink);color:#C6BFB9;padding:clamp(1.8rem,3vw,2.4rem);
  display:flex;flex-direction:column}
.calc__result .eyebrow{color:var(--red)}
.calc__rate{font-family:var(--f-display);font-style:italic;font-weight:500;color:#fff;
  font-size:clamp(2.6rem,6vw,3.9rem);line-height:1;margin:.4rem 0 .2rem}
.calc__rate-note{font-size:.86rem;margin:0 0 1.6rem;color:#9A918B}
.calc__rows{margin:0 0 1.8rem;border-top:1px solid rgba(255,255,255,.16)}
.calc__rows div{display:flex;justify-content:space-between;gap:1rem;
  padding:.72rem 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:.9rem}
.calc__rows dt{color:#9A918B;margin:0}
.calc__rows dd{margin:0;color:#fff;text-align:right;font-variant-numeric:tabular-nums}
.calc__result .btn{margin-top:auto}
.calc__disclaimer{font-size:.76rem;line-height:1.55;color:#8C837E;margin:1.1rem 0 0}

/* Repräsentatives Beispiel – muss gleich auffällig sein wie die Rate */
.calc__example{background:var(--beige-light);border:1px solid var(--line);border-left:3px solid var(--red);
  padding:1.3rem 1.5rem;margin-top:1.8rem;font-size:.88rem;line-height:1.65;color:var(--body)}
.calc__example strong{color:var(--ink)}

/* Redaktioneller Warnhinweis – VOR LIVEGANG ENTFERNEN */
/* Finanzierungshinweis über dem Rechner */
.finanzkasten{background:#fff;border:1px solid var(--line);border-top:3px solid var(--red);
  padding:1.9rem 2.1rem;margin-bottom:2.2rem;max-width:760px}
.finanzkasten h3{font-family:var(--f-display);font-style:italic;font-weight:500;
  font-size:1.32rem;line-height:1.25;margin-bottom:.8rem}
.finanzkasten p{margin-bottom:.9rem}
.finanzkasten__recht{font-size:.82rem;color:var(--muted);line-height:1.55}
.finanzkasten__aktion{margin:1.3rem 0 0}
@media (max-width:700px){.finanzkasten{padding:1.5rem 1.4rem}}

.calc__todo{background:#FFF6DA;border:1px solid #E4C866;padding:1rem 1.3rem;margin-bottom:1.8rem;
  font-size:.88rem;line-height:1.6;color:#6B5518}
.calc__todo strong{color:#4A3A0C}

@media (max-width:920px){
  .calc{grid-template-columns:1fr}
}

/* =========================================================
   13 · AKTIONSBAND AUSSTELLUNGSKÜCHEN
   ========================================================= */
.offer{display:grid;grid-template-columns:1fr 1.1fr;background:var(--ink);
  border-top:3px solid var(--red);overflow:hidden}

/* Bildseite, randlos bis zur Fensterkante */
.offer__media{position:relative;overflow:hidden;min-height:340px}
.offer__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.02);transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.offer:hover .offer__media img{transform:scale(1.07)}
.offer__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to right,rgba(35,31,32,0) 55%,rgba(35,31,32,.92) 100%)}

/* Aktionsfähnchen */
.offer__flag{position:absolute;top:1.6rem;left:1.6rem;z-index:2;display:inline-flex;
  align-items:center;gap:.55rem;background:var(--red);color:#fff;
  font-family:var(--f-sans);font-size:.74rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;padding:.55rem .95rem;
  box-shadow:0 12px 30px -14px rgba(0,0,0,.9)}
.offer__flag i{width:7px;height:7px;border-radius:var(--r-pill);background:#fff;position:relative}
.offer__flag i::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:#fff;animation:offerPing 2.2s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes offerPing{
  0%{transform:scale(1);opacity:.9}
  70%{transform:scale(3);opacity:0}
  100%{transform:scale(3);opacity:0}
}

/* Textseite */
.offer__body{position:relative;color:#B4ABA5;display:flex;align-items:center;
  padding:clamp(2.4rem,4.5vw,3.8rem) clamp(1.5rem,5vw,4rem)}
.offer__body::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(65% 110% at 0% 50%,rgba(238,34,37,.10),rgba(238,34,37,0) 62%)}
.offer__inner{position:relative;max-width:64ch}
.offer h2{color:#fff;font-size:clamp(1.65rem,2.7vw,2.35rem);margin-bottom:.7rem}
.offer__body>.offer__inner>p{font-size:.98rem;margin:0 0 1.5rem}

/* Drei Fakten */
.offer__facts{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem;padding:0;margin:0 0 1.8rem}
.offer__facts li{flex:1 1 0;min-width:11rem;display:flex;flex-direction:column;gap:.1rem;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);
  padding:.7rem 1rem;font-size:.86rem;color:#B4ABA5;
  transition:border-color var(--t),background var(--t),transform .4s cubic-bezier(.2,.8,.2,1)}
.offer__facts li:hover{border-color:var(--red);background:rgba(255,255,255,.07);transform:translateY(-3px)}
.offer__facts b{font-family:var(--f-sans);font-size:.72rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--red)}

.offer__actions{display:flex;flex-wrap:wrap;gap:.8rem;margin:0}
.offer__note{font-size:.8rem;color:#8C837E;margin:1.2rem 0 0;line-height:1.6}

@media (max-width:920px){
  .offer{grid-template-columns:1fr}
  .offer__media{min-height:230px;aspect-ratio:16/9}
  .offer__media::after{background:linear-gradient(to bottom,rgba(35,31,32,0) 55%,rgba(35,31,32,.9) 100%)}
  .offer__body{padding:2rem 1.5rem 2.4rem}
  .offer__facts li{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  .offer__flag i::after{animation:none}
  .offer:hover .offer__media img,.offer__facts li:hover{transform:none}
}

/* =========================================================
   14 · RATGEBER: ÜBERSICHT UND ARTIKEL
   ========================================================= */

/* --- Übersicht --- */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:2.2rem}
.posts .post{display:flex;flex-direction:column}
.posts .post a:first-child{display:block;overflow:hidden}
.posts .post img{transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.posts .post:hover img{transform:scale(1.05)}
.post__time{font-size:.8rem;color:var(--muted);margin:auto 0 0;padding-top:.9rem}

/* Aufmacher-Artikel */
.posts .post--lead{grid-column:1 / -1;display:grid;grid-template-columns:1.1fr 1fr;gap:2.6rem;
  align-items:stretch;background:#fff;border:1px solid var(--line);border-top:3px solid var(--red)}
.post--lead>a:first-child{height:100%}
.post--lead img{aspect-ratio:auto;height:100%;width:100%;object-fit:cover;min-height:300px;max-height:420px;margin:0}
.post--lead__body{padding:2.2rem 2.4rem 2.2rem 0;display:flex;flex-direction:column;justify-content:center}
.post--lead h3{font-family:var(--f-display);font-style:italic;font-weight:500;
  font-size:clamp(1.4rem,2.4vw,2rem);margin-bottom:.7rem}

/* --- Artikelseite --- */
.article{max-width:748px;margin-inline:auto}
.article__meta{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;align-items:center;
  font-size:.82rem;color:var(--muted);padding-bottom:1.4rem;margin-bottom:2.2rem;
  border-bottom:1px solid var(--line)}
.article__meta b{font-family:var(--f-sans);font-size:.74rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--red)}
.article__lead{font-size:1.12rem;line-height:1.7;color:var(--ink);margin:0 0 2rem}
.article h2{font-size:clamp(1.4rem,2.6vw,1.95rem);margin:2.8rem 0 .9rem}
.article h3{font-size:1.12rem;margin:2rem 0 .6rem}
.article p{margin-bottom:1.1rem}
.article>ul:not(.ticks):not(.facts){list-style:none;padding:0;margin:1.4rem 0}
.article figure{margin:2.2rem 0}
.article figure img{width:100%;display:block}
.article figcaption{font-size:.82rem;color:var(--muted);padding-top:.6rem;line-height:1.55}
.article .ctable{margin:1.8rem 0}

/* Inhaltsverzeichnis */
.toc{background:var(--beige-light);border:1px solid var(--line);border-left:3px solid var(--red);
  padding:1.5rem 1.7rem;margin:0 0 2.4rem}
.toc p{font-family:var(--f-sans);font-size:.74rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin:0 0 .8rem}
.toc ol{margin:0;padding-left:1.2rem;font-size:.94rem}
.toc li{margin-bottom:.4rem}
.toc a{color:var(--body);text-decoration:none;border-bottom:1px solid transparent}
.toc a:hover{color:var(--red);border-color:var(--red)}

/* Hervorgehobener Absatz */
.callout{background:var(--beige);border-left:3px solid var(--red);padding:1.4rem 1.6rem;margin:2rem 0}
.callout p{margin:0;font-size:.96rem;line-height:1.68}
.callout p+p{margin-top:.8rem}
.callout b{color:var(--ink)}

/* Redaktioneller Warnhinweis – vor Livegang entfernen */
.editor-note{background:#FFF6DA;border:1px solid #E4C866;padding:1.1rem 1.4rem;margin:0 0 2rem;
  font-size:.88rem;line-height:1.6;color:#6B5518}
.editor-note b{color:#4A3A0C}

/* Autorenkasten */
.author{display:flex;gap:1.3rem;align-items:flex-start;background:var(--beige-light);
  border:1px solid var(--line);padding:1.6rem 1.8rem;margin:2.8rem 0 0}
.author__pic{flex:none;width:64px;height:64px;object-fit:cover;border-radius:var(--r-pill)}
.author h2{font-family:var(--f-sans);font-style:normal;font-size:.95rem;font-weight:600;
  color:var(--ink);margin:0 0 .3rem}
.author p{font-size:.88rem;margin:0;line-height:1.6;color:var(--body)}

@media (max-width:920px){
  .posts{grid-template-columns:repeat(2,1fr);gap:1.8rem}
  .posts .post--lead{grid-template-columns:1fr;gap:0}
  .post--lead img{min-height:200px;max-height:none;aspect-ratio:16/9}
  .post--lead__body{padding:1.6rem 1.6rem 1.8rem}
}
@media (max-width:640px){
  .posts{grid-template-columns:1fr}
  .author{flex-direction:column;gap:.9rem}
}

/* Verweisleiste unter den Küchenstilen */
.morelinks{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.4rem;
  margin:2.4rem 0 0;padding-top:1.6rem;border-top:1px solid var(--line);
  font-size:.93rem;color:var(--muted)}
.morelinks a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);
  padding-bottom:2px;transition:color var(--t),border-color var(--t)}
.morelinks a:hover{color:var(--red);border-color:var(--red)}
.steps__actions{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}

/* Infoboxen (Anfahrt, allgemeine Hinweiskästen) */
.infobox{background:#fff;border:1px solid var(--line);border-top:3px solid var(--red);
  padding:1.9rem 1.7rem 1.7rem;
  transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s cubic-bezier(.2,.8,.2,1)}
.infobox:hover{transform:translateY(-4px);box-shadow:0 18px 40px -22px rgba(35,31,32,.5)}
.infobox h3{font-size:1.1rem;margin-bottom:.6rem}
.infobox p{font-size:.94rem;margin-bottom:.9rem}
.infobox .ticks{margin:0}
.infobox .ticks li{font-size:.9rem;margin-bottom:.45rem}
.infobox .ticks li:last-child{margin-bottom:0}
.section--tint .infobox,.section--beige .infobox{background:#fff}
.section:not(.section--tint):not(.section--beige):not(.section--dark) .infobox{background:var(--beige-light)}

/* Team-Kacheln auf der Über-uns-Seite etwas größer */
.person--lg img{width:100%;aspect-ratio:8/11;object-fit:cover;margin-bottom:1.1rem}
.person--lg h3{font-size:1.12rem;margin-bottom:.15rem}
.person--lg .person__role{margin-bottom:.6rem}
.person--lg p{font-size:.92rem;line-height:1.62}

/* =========================================================
   15 · HERO MIT VIDEO
   ========================================================= */
.hero--video{min-height:min(100svh,820px)}
.hero--video .hero__inner{padding-bottom:6.2rem}
.hero--video .hero__media img,
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__video{opacity:0;transition:opacity 1.1s ease}
.hero__video.is-playing{opacity:1}
/* Verlauf etwas kräftiger, damit die Schrift auf bewegtem Bild sicher lesbar bleibt */
.hero--video .hero__overlay{
  background:linear-gradient(to top,rgba(35,31,32,.86) 0%,rgba(35,31,32,.42) 58%,rgba(35,31,32,.14) 100%),
             linear-gradient(to right,rgba(35,31,32,.72) 0%,rgba(35,31,32,.30) 58%,rgba(35,31,32,0) 92%)}

/* Scroll-Hinweis */
.scrollcue{position:absolute;left:50%;bottom:1.6rem;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:.45rem;
  color:rgba(255,255,255,.75);text-decoration:none;
  font-family:var(--f-sans);font-size:.68rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  transition:opacity .5s ease,color var(--t),transform .5s ease}
.scrollcue:hover{color:#fff}
.scrollcue svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.6;fill:none;
  stroke-linecap:round;stroke-linejoin:round;animation:cueBounce 2.4s cubic-bezier(.4,0,.2,1) infinite}
.scrollcue.is-hidden{opacity:0;transform:translateX(-50%) translateY(10px);pointer-events:none}
@keyframes cueBounce{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(6px)}
}
@media (max-width:760px){
  .hero--video{min-height:min(88svh,700px)}
  .hero--video .hero__inner{padding-bottom:4.6rem}
  .scrollcue span{display:none}
  .scrollcue{bottom:1.1rem}
}
@media (prefers-reduced-motion:reduce){
  .hero__video{display:none}
  .scrollcue svg{animation:none}
}

/* =========================================================
   16 · TRANSPARENTER KOPF ÜBER DEM HERO
   Greift automatisch auf jeder Seite, die mit einem Hero
   beginnt (:has). Ältere Browser bekommen den bisherigen
   weißen Kopf – kein Bruch, nur weniger Effekt.
   ========================================================= */
.logo-light{display:none}
.header__logo img{height:42px;width:auto}

body:has(> main > .hero),
body:has(> main > .page-hero){}

/* Kopfleiste und Navigation liegen über dem Bild statt darüber */
body:has(> main > .hero) .topbar,
body:has(> main > .page-hero) .topbar,
body:has(> main > .hero) .header,
body:has(> main > .page-hero) .header{
  position:absolute;left:0;right:0;z-index:100;
  background:transparent;border-bottom-color:transparent;backdrop-filter:none;box-shadow:none}

body:has(> main > .hero) .topbar,
body:has(> main > .page-hero) .topbar{top:0;color:rgba(255,255,255,.82)}
body:has(> main > .hero) .topbar a,
body:has(> main > .page-hero) .topbar a{color:#fff}

body:has(> main > .hero) .header,
body:has(> main > .page-hero) .header{top:2.35rem}

/* Schrift und Logo hell, solange der Kopf im Bild liegt */
/* Nur solange die Navigation waagrecht im Kopf liegt – im
   ausgeklappten Mobilmenü stünde weiße Schrift auf weißem Grund. */
@media (min-width:1025px){
  body:has(> main > .hero) .header:not(.is-solid) .nav__item>a,
  body:has(> main > .page-hero) .header:not(.is-solid) .nav__item>a{color:#fff}
  body:has(> main > .hero) .header:not(.is-solid) .nav__item--cta>a,
  body:has(> main > .page-hero) .header:not(.is-solid) .nav__item--cta>a{color:#fff}
}
body:has(> main > .hero) .header:not(.is-solid) .burger span,
body:has(> main > .page-hero) .header:not(.is-solid) .burger span{background:#fff}
body:has(> main > .hero) .header:not(.is-solid) .logo-dark,
body:has(> main > .page-hero) .header:not(.is-solid) .logo-dark{display:none}
body:has(> main > .hero) .header:not(.is-solid) .logo-light,
body:has(> main > .page-hero) .header:not(.is-solid) .logo-light{display:block}

/* Platz für den Kopf, damit Text und Bild nicht darunter verschwinden */
body:has(> main > .hero) .hero__inner{padding-top:11rem}
/* Mehr Höhe, damit der überlagernde Kopf die Überschrift nicht anschneidet */
body:has(> main > .page-hero) .page-hero{min-height:clamp(480px,62vh,640px);padding-top:7.5rem}

/* Beim Scrollen wird der Kopf weiß und bleibt oben stehen.
   Bewusst ohne Einfahr-Animation: der Umschaltpunkt liegt genau dort, wo die
   überlagernde Leiste den oberen Rand berührt, sie bleibt also an Ort und
   Stelle. Eine Animation von oben würde sie an dieser Stelle kurz wegziehen.
   Gleiche Selektortiefe wie oben, sonst greift die transparente Regel weiter. */
body:has(> main > .hero) .header.is-solid,
body:has(> main > .page-hero) .header.is-solid,
.header.is-solid{
  position:fixed;top:0;z-index:110;
  background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}
.header.is-solid .header__inner{min-height:70px}

/* Bei geöffnetem Menü gilt der Stapelwert des Menüs, nicht der der
   eingefahrenen Kopfleiste. Ohne sie fällt der Kopf – und mit ihm das Menü,
   das darin liegt – unter die Abdunkelung.
   Die :has-Fassungen müssen mitgeschrieben werden: der Selektor oben wiegt
   durch das zusätzliche `main` schwerer, die spätere Position allein
   genügt also nicht. */
body.nav-open:has(> main > .hero) .header.is-solid,
body.nav-open:has(> main > .page-hero) .header.is-solid,
body.nav-open .header.is-solid,
body.nav-open .header.nav-oben{
  z-index:1310;background:#fff;backdrop-filter:none;box-shadow:none;animation:none}

@media (max-width:1024px){
  body:has(> main > .hero) .hero__inner{padding-top:9rem}
  body:has(> main > .page-hero) .page-hero{min-height:clamp(440px,58vh,560px);padding-top:6.5rem}
}
@media (max-width:760px){
  body:has(> main > .hero) .header,
  body:has(> main > .page-hero) .header{top:4rem}
  body:has(> main > .hero) .hero--video{min-height:min(94svh,780px)}
  body:has(> main > .hero) .hero__inner{padding-top:10.6rem}
  body:has(> main > .page-hero) .page-hero{min-height:clamp(420px,56vh,540px);padding-top:9rem}
}

/* Bei geöffnetem Menü muss das Burger-Symbol auf hellem Grund dunkel sein */
body:has(> main > .hero) .header:not(.is-solid) .burger[aria-expanded="true"] span,
body:has(> main > .page-hero) .header:not(.is-solid) .burger[aria-expanded="true"] span{background:var(--ink)}

/* =========================================================
   17 · DAN FIRST
   ========================================================= */

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.lead{font-size:1.12rem;line-height:1.62;color:var(--ink)}

.page-hero__actions{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.7rem 0 0}
.btn--light{background:#fff;color:var(--ink);border-color:#fff}
.btn--light:hover{background:transparent;color:#fff;border-color:#fff}

/* Paketblöcke */
.paket{scroll-margin-top:6rem;padding-top:.5rem}
.paket + .paket{border-top:1px solid var(--line);padding-top:clamp(2.4rem,5vw,3.6rem)}
.paket h3{font-family:var(--f-display);font-style:italic;font-weight:500;
  font-size:clamp(1.7rem,3vw,2.3rem);line-height:1.1;margin:.55rem 0 0}
.paket__preis{display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem;margin:.9rem 0 1.1rem;
  padding-bottom:1rem;border-bottom:1px solid var(--line)}
.paket__preis b{font-family:var(--f-display);font-style:italic;font-weight:500;
  font-size:2.05rem;color:var(--red);line-height:1}
.paket__preis span{font-size:.86rem;color:var(--muted)}
.paket__listen{display:grid;grid-template-columns:1fr 1fr;gap:.4rem 2rem;margin:1.3rem 0 1.6rem}
.paket__listen h4{font-family:var(--f-sans);font-size:.75rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink);margin:0 0 .3rem;padding-bottom:.5rem;
  border-bottom:1px solid var(--line)}
.paket__listen .ticks{margin:.7rem 0 0;font-size:.92rem}
.paket__listen .ticks li{margin-bottom:.42rem;padding-left:1.55rem}
.paket__listen .ticks li::before{width:9px;height:5px;border-width:2px}

/* Tabelle waagrecht scrollbar halten */
.ctable-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.5rem 0}
.ctable-wrap .ctable{min-width:520px}
.ctable tbody th{text-align:left;padding:.95rem 1.1rem;border-bottom:1px solid var(--line);
  vertical-align:top;font-family:var(--f-sans);font-weight:600;color:var(--ink);width:24%}
.ctable td:last-child{color:var(--ink)}
.ctable td:nth-child(2){color:var(--muted)}

/* Minusliste für die ehrliche Einordnung */
.ticks--minus li::before{width:12px;height:0;border-left:0;border-bottom:2.5px solid var(--muted);
  transform:none;top:.72em}

@media (max-width:760px){
  .paket__listen{grid-template-columns:1fr;gap:1.2rem}
  .paket__preis b{font-size:1.75rem}
}

/* =========================================================
   18 · Marken – Karten ohne Bild, Tags, einspaltige Fakten
   ========================================================= */

.card--flat{background:#fff;border:1px solid var(--line);height:100%}
.section--tint .card--flat{background:#fff}
.card--flat .card__body{display:flex;flex-direction:column;height:100%}
.card--flat h3{font-family:var(--f-display);font-style:italic;font-weight:500;
  font-size:1.5rem;line-height:1.1;margin:.5rem 0 .7rem}
.card--flat .small{margin-top:auto;padding-top:.9rem;border-top:1px solid var(--line);color:var(--muted)}
.card--flat .small b{color:var(--ink)}

.tag{display:inline-block;font-family:var(--f-sans);font-size:.68rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--red-text);
  border:1px solid currentColor;border-radius:2px;padding:.28rem .55rem;line-height:1}

.facts--single{grid-template-columns:1fr}

/* =========================================================
   19 · Fehlerseite
   ========================================================= */

.section--fehler{padding-top:clamp(4rem,10vw,7rem);padding-bottom:clamp(2.5rem,6vw,4rem);
  background:var(--beige-light);border-bottom:1px solid var(--line)}
.section--fehler h1{font-family:var(--f-display);font-style:italic;font-weight:500;
  font-size:clamp(2.1rem,5vw,3.4rem);line-height:1.06;margin:.5rem 0 1rem}
.section--fehler .page-hero__actions{margin-top:1.9rem}

.sitemap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem 2.2rem}
.sitemap-grid h3{font-family:var(--f-sans);font-size:.76rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink);margin:0 0 .8rem;padding-bottom:.6rem;
  border-bottom:1px solid var(--line)}
.linklist{list-style:none;padding:0;margin:0}
.linklist li{margin-bottom:.45rem}
.linklist a{color:var(--muted);font-size:.94rem;text-decoration:none;
  border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.linklist a:hover{color:var(--red);border-bottom-color:var(--red)}

@media (max-width:900px){ .sitemap-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .sitemap-grid{grid-template-columns:1fr} }

/* DAN FIRST Paketkarten auf der Startseite */
.card .tag{align-self:flex-start;margin-bottom:.55rem}
.preis{font-family:var(--f-display);font-style:italic;font-weight:500;font-size:1.45rem;
  color:var(--red);margin:.35rem 0 0;line-height:1}

/* Tag-Zeile in Kartenrastern auf gleicher Höhe halten */
.grid .card--flat .tag{min-height:1.55rem;display:inline-flex;align-items:center}

/* =========================================================
   20 · Rechtstexte und Einwilligungsbanner
   ========================================================= */

.section--recht{padding-top:clamp(4rem,9vw,6.5rem);padding-bottom:clamp(2rem,4vw,3rem);
  background:var(--beige-light);border-bottom:1px solid var(--line)}
.section--recht h1{font-family:var(--f-display);font-style:italic;font-weight:500;
  font-size:clamp(2rem,4.6vw,3.1rem);line-height:1.06;margin:.5rem 0 1rem}

.doc{font-size:.97rem;line-height:1.72}
.doc h2{font-family:var(--f-display);font-style:italic;font-weight:500;
  font-size:clamp(1.4rem,2.6vw,1.85rem);line-height:1.14;
  margin:2.7rem 0 .9rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.doc > h2:first-child,.doc .doc__toc + h2{border-top:0;padding-top:0;margin-top:0}
.doc h3{font-family:var(--f-sans);font-size:1rem;font-weight:600;color:var(--ink);margin:1.7rem 0 .5rem}
.doc p{margin:0 0 .95rem}
.doc a{color:var(--ink);text-decoration:underline;text-underline-offset:.18em;
  text-decoration-color:var(--red);text-decoration-thickness:1px}
.doc a:hover{color:var(--red)}
.doc .ticks{margin:1rem 0 1.3rem}

.doc__toc{background:var(--beige-light);border:1px solid var(--line);padding:1.5rem 1.7rem;margin:0 0 2.6rem}
.doc__toc h2{font-family:var(--f-sans);font-style:normal;font-size:.75rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;border:0;padding:0;margin:0 0 .8rem}
.doc__toc ol{margin:0;padding-left:1.3rem;columns:2;column-gap:2rem;font-size:.9rem}
.doc__toc li{margin-bottom:.32rem;break-inside:avoid}
.doc__toc a{text-decoration:none;color:var(--muted)}
.doc__toc a:hover{color:var(--red);text-decoration:underline}

.datenliste{display:grid;grid-template-columns:minmax(150px,32%) 1fr;gap:.1rem 1.6rem;margin:1.2rem 0 1.6rem}
.datenliste dt{font-family:var(--f-sans);font-size:.78rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink);padding:.75rem 0 .2rem;border-top:1px solid var(--line)}
.datenliste dd{margin:0;padding:.75rem 0 .2rem;border-top:1px solid var(--line);color:var(--muted)}

/* --- Einwilligungsbanner --- */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:1200;display:none;
  padding:0 clamp(1rem,4vw,2rem) clamp(1rem,3vw,2rem)}
.consent.is-offen{display:block;animation:consentIn .32s cubic-bezier(.2,.8,.2,1) both}
@keyframes consentIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
/* --------------------------------------------------------------------------
   hidden schlägt jede Anzeigeart
   Ohne diese Regel gewinnt eine spätere display-Angabe (grid, flex) gegen das
   hidden-Attribut. Der Cookie-Dialog blieb dadurch am Handy aufgeklappt.
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   picture verschwindet aus dem Layout
   Die Bilder stecken für WebP in einem <picture>. Ohne diese Regel schöbe
   sich dessen Inline-Box zwischen Container und Bild – Flex- und Rasterzellen
   rechnen dann anders, und nachgeladene Bilder lassen die Seite ruckeln.
   display:contents blendet die Box aus, das Bild bleibt direktes Kind.
   -------------------------------------------------------------------------- */
picture{display:contents}

[hidden]{display:none!important}

/* Meldung direkt unter einem Formularfeld */
.feldfehler{display:block;margin-top:.35rem;font-family:var(--f-sans);font-size:.78rem;
  line-height:1.4;color:var(--red)}
[aria-invalid="true"]{border-color:var(--red)!important}

.consent__box{max-width:760px;margin:0 auto;background:#fff;border:1px solid var(--line);
  border-top:3px solid var(--red);box-shadow:0 18px 50px rgba(35,31,32,.22);
  padding:clamp(1.3rem,3vw,1.9rem)}
.consent__titel{font-family:var(--f-sans);font-size:.98rem;font-weight:600;color:var(--ink);margin:0 0 .5rem}
.consent__text{font-size:.9rem;line-height:1.62;color:var(--muted);margin:0 0 1.1rem}
.consent__text a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--red)}

.consent__optionen{display:grid;gap:.75rem;margin:0 0 1.2rem;padding:1.1rem 0 .3rem;
  border-top:1px solid var(--line)}
.consent__opt{display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:start;
  font-size:.86rem;line-height:1.55;color:var(--muted);cursor:pointer}
.consent__opt--fix{cursor:default;opacity:.72}
.consent__opt input{margin-top:.28rem;width:16px;height:16px;accent-color:var(--red);flex:none}
.consent__opt b{display:block;font-family:var(--f-sans);font-size:.76rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-bottom:.15rem}

.consent__aktionen{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem}
.consent__mehr{background:none;border:0;padding:.3rem .2rem;font-family:var(--f-sans);font-size:.83rem;
  color:var(--muted);cursor:pointer;text-decoration:underline;text-underline-offset:.2em}
.consent__mehr:hover{color:var(--red)}

@media (max-width:520px){
  .consent{padding:0}
  .consent__box{border-left:0;border-right:0;border-bottom:0}
  .consent__aktionen .btn{flex:1 1 100%;justify-content:center}
  .consent__mehr{width:100%;margin-top:.3rem}
  .datenliste{grid-template-columns:1fr;gap:0}
  .datenliste dd{border-top:0;padding-top:0;padding-bottom:.75rem}
  .doc__toc ol{columns:1}
}
.footer__consent{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;
  text-decoration:underline;text-underline-offset:.2em;opacity:.8}
.footer__consent:hover{opacity:1;color:#fff}

/* Fehlerhinweis über dem Formular */
.formhinweis{background:#FDF2F2;border:1px solid #F0C7C7;border-left:3px solid var(--red);
  padding:1.1rem 1.3rem;margin:0 0 1.6rem;font-size:.9rem;line-height:1.6}
.formhinweis b{display:block;color:var(--ink);margin-bottom:.3rem}
.formhinweis p{margin:0;color:var(--muted)}
.formhinweis a{color:var(--red)}

/* =========================================================
   21 · Hinweisbox (z. B. „derzeit keine Ausstellungsküche")
   ========================================================= */

.hinweisbox{background:var(--beige-light);border:1px solid var(--line);border-left:3px solid var(--red);
  padding:clamp(1.6rem,4vw,2.4rem)}
.hinweisbox__marke{font-family:var(--f-sans);font-size:.7rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--red);margin:0 0 .5rem}
.hinweisbox h2{font-family:var(--f-display);font-style:italic;font-weight:500;
  font-size:clamp(1.5rem,3vw,2.05rem);line-height:1.1;margin:0 0 1rem}
.hinweisbox p{margin:0 0 .9rem;color:var(--muted);line-height:1.7}
.hinweisbox p:last-child{margin-bottom:0}
.hinweisbox b{color:var(--ink)}
.hinweisbox__aktionen{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}

/* Nummernraster mit drei Karten bleibt auch bei drei Einträgen dreispaltig */
.numbers--drei{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){ .numbers--drei{grid-template-columns:1fr} }

/* Persönliche E-Mail-Adresse in der Teamkarte.
   Die Karten stehen als Spalte, damit die Adresse unten andockt und alle
   fünf auf einer Linie sitzen – unabhängig davon, wie lang der Text ist. */
.person__mail{margin:.6rem 0 0;font-size:.84rem;word-break:break-word}
/* Nur in der Fünferreihe: Karten als Spalte, damit die Adresse unten andockt.
   Unterhalb von 901px übernimmt das Rasterlayout weiter oben. */
@media (min-width:901px){
  .grid--5 .person{display:flex;flex-direction:column;height:100%}
  .grid--5 .person .person__mail{margin-top:auto;padding-top:.9rem}
}
.person__mail a{color:var(--muted);text-decoration:none;
  border-bottom:1px solid var(--line);padding-bottom:.1rem;
  transition:color .2s,border-color .2s}
.person__mail a:hover{color:var(--red);border-bottom-color:var(--red)}

/* Echte Google-Rezensionen: Sterne oben statt Anführungszeichen, Name unten
   angedockt, damit alle drei Karten auf einer Linie enden. */
.quote--bewertung{display:flex;flex-direction:column;height:100%}
.quote--bewertung::before{content:none}
.quote--bewertung cite{margin-top:auto;padding-top:1.1rem}
/* Höhere Auswahlstärke als .quote p, sonst schlägt dessen Farbe und Kursive durch */
.quote .quote__sterne{margin:0 0 .95rem;font-family:var(--f-sans);font-style:normal;
  font-size:1.15rem;letter-spacing:.16em;color:#F5A623;line-height:1}

/* =========================================================
   22 · KARTENREIHEN ALS WISCHER (nur Mobil und kleines Tablet)
   ---------------------------------------------------------
   Untereinander gestapelt wird besonders die Startseite auf dem
   Handy sehr lang – vier USP-Blöcke, sechs Modelle, fünf Personen
   und drei Bewertungen ergeben mehrere Bildschirmhöhen, durch die
   man nur scrollt. Ab 900 px laufen diese Reihen deshalb waagrecht
   und rasten pro Karte ein.

   Markiert wird über die Klasse .grid--wischer, die nur Raster mit
   echten Karten bekommen (card, tile, person, post, quote). Raster
   mit Fließtext – Zahlenlisten, Faktenblöcke, Formulare – stapeln
   unverändert weiter, dort ist Wischen die falsche Geste.

   Die Reihe zieht sich mit negativem Außenabstand bis an den
   Bildschirmrand, damit die angeschnittene nächste Karte sichtbar
   ist. Das ist der Hinweis, dass es seitlich weitergeht – dazu die
   schmale Bildlaufleiste darunter.
   ========================================================= */
@media (max-width:900px){

  .grid--wischer,
  .usps__grid{
    display:flex;
    grid-template-columns:none;
    flex-wrap:nowrap;
    align-items:stretch;
    gap:.9rem;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:1.25rem;
    margin-inline:-1.25rem;
    padding-inline:1.25rem;
    padding-bottom:1.1rem;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    scrollbar-color:var(--red) rgba(35,31,32,.14);
  }

  /* Die USP-Leiste ist selbst der .wrap. Sie ist also schon um den
     Seitenrand schmaler – ein negativer Außenabstand würde sich mit
     dieser Verschmälerung aufheben und die erste Karte am äußersten
     Bildschirmrand kleben lassen. Deshalb hier volle Breite statt
     negativem Rand. */
  .usps__grid{width:100%;max-width:none;margin-inline:0;
    padding-block:clamp(2.2rem,4.5vw,3.2rem) 1.6rem;
    scrollbar-color:var(--red) rgba(255,255,255,.16)}

  .grid--wischer::-webkit-scrollbar,
  .usps__grid::-webkit-scrollbar{height:4px}
  .grid--wischer::-webkit-scrollbar-track,
  .usps__grid::-webkit-scrollbar-track{background:rgba(35,31,32,.12)}
  .usps__grid::-webkit-scrollbar-track{background:rgba(255,255,255,.14)}
  .grid--wischer::-webkit-scrollbar-thumb,
  .usps__grid::-webkit-scrollbar-thumb{background:var(--red)}

  /* Karten bekommen eine feste Breite, sonst zieht Flex sie zusammen.
     Die Obergrenze verhindert, dass auf einem 900-px-Gerät eine
     einzige Karte den halben Bildschirm füllt. */
  .grid--wischer > *,
  .usps__grid > *{
    flex:0 0 min(78%,320px);
    min-width:0;
    /* Ohne auto bleibt eine feste Höhe (z. B. height:100% bei den
       Bewertungen) stehen und die Karten enden auf verschiedenen
       Linien statt gemeinsam. */
    height:auto;
    align-self:stretch;
    scroll-snap-align:start;
  }

  /* Personen sind Hochformat – schmaler, sonst passt keine zweite
     Karte mehr ins Bild. Und wieder untereinander statt Bild links,
     weil in der schmalen Karte kein Platz für zwei Spalten ist. */
  .grid--wischer > .person{flex-basis:min(62%,225px)}
  .grid--5.grid--wischer .person{display:flex;flex-direction:column;height:auto}
  .grid--5.grid--wischer .person img{margin-bottom:1rem}
  .grid--5.grid--wischer .person .person__mail{margin-top:auto;padding-top:.9rem;
    font-size:.74rem;overflow-wrap:anywhere}

  /* Bewertungen sind reiner Text und brauchen mehr Breite. */
  .grid--wischer > .quote{flex-basis:min(86%,340px)}

  /* Der Abstand nach unten kommt jetzt von der Bildlaufleiste. */
  .grid--wischer.grid--tight{gap:.8rem}
}

/* Ohne Zeigegerät mit Feinsteuerung – also am Handy – braucht es keine
   Bildlaufleiste, dort ist Wischen selbstverständlich. Die angeschnittene
   Karte am Rand bleibt als Hinweis. */
@media (max-width:900px) and (pointer:coarse){
  .grid--wischer,
  .usps__grid{scrollbar-width:none;padding-bottom:.2rem}
  .grid--wischer::-webkit-scrollbar,
  .usps__grid::-webkit-scrollbar{display:none}
  .usps__grid{padding-block:clamp(2.2rem,4.5vw,3.2rem)}
}

/* =========================================================
   23 · ROTER AKZENT IN ÜBERSCHRIFTEN
   ---------------------------------------------------------
   Ein Wort je Überschrift in DAN-Rot, sparsam gesetzt: höchstens
   eine Überschrift pro Seite, auf der Startseite drei. Hervorgehoben
   wird die Pointe der Zeile, nicht die halbe Überschrift – sonst
   verliert das Rot genau die Wirkung, wegen der man es einsetzt.

   Auf dunklem Grund ist das Markenrot auf Anthrazit zu dunkel für
   eine ruhige Lesbarkeit. Dort steht deshalb ein aufgehellter Ton,
   der als dieselbe Farbe gelesen wird.
   ========================================================= */
.akz{color:var(--red)}
.section--dark .akz,
.ctaband .akz,
.usps .akz{color:#FF5457}

/* Auf der grünen Fläche gäbe es zu wenig Abstand zum Untergrund –
   dort bleibt die Überschrift einfarbig. */
.section--sage .akz{color:inherit}

/* =========================================================
   24 · EINZUGSGEBIET
   ---------------------------------------------------------
   Löst den mittig gesetzten Textblock mit der langen Ortsreihe ab.
   Links steht die Aussage, rechts eine Gebietskarte: das Studio als
   Ausgangspunkt, darunter die Orte nach Regionen sortiert und einzeln
   lesbar gesetzt statt als eine durch Punkte getrennte Zeile.

   Der Bergrücken im Hintergrund ist eine eigene, sehr flache Zeichnung
   in dunklerem Grün – er soll den Raum tragen, nicht auffallen.
   ========================================================= */
.gebiet{position:relative;overflow:hidden;background:#3E5049;color:rgba(255,255,255,.80);
  isolation:isolate}
.gebiet h2,.gebiet h3{color:#fff}
.gebiet .eyebrow--dark{color:rgba(255,255,255,.72)}

.gebiet__berge{position:absolute;left:0;right:0;bottom:0;width:100%;height:clamp(120px,18vw,260px);
  z-index:-1;fill:#fff;opacity:.055;pointer-events:none}

.gebiet__inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.4rem,5vw,4.5rem);
  align-items:start}

/* ---------- linke Spalte ---------- */
.gebiet__lead{font-size:1.05rem;margin:0 0 2rem;max-width:34em}

.gebiet__fakten{list-style:none;padding:0;margin:0 0 2.3rem;display:grid;gap:1.15rem}
.gebiet__fakten li{position:relative;padding-left:2rem;font-size:.95rem;line-height:1.62}
/* Haken statt Aufzählungspunkt – dieselbe Form wie in der Heroleiste */
.gebiet__fakten li::before{content:"";position:absolute;left:.15rem;top:.5em;width:11px;height:6px;
  border-left:2px solid #FF5457;border-bottom:2px solid #FF5457;transform:rotate(-45deg)}
.gebiet__fakten b{display:block;font-weight:600;color:#fff;margin-bottom:.15rem}

.gebiet__aktionen{display:flex;flex-wrap:wrap;gap:.8rem;margin:0}
/* Zweitknopf auf grünem Grund: nur Linie, damit der helle Knopf führt */
.btn--linie{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn--linie:hover{background:#fff;color:var(--ink);border-color:#fff}
.gebiet .btn--dark{background:#fff;color:var(--ink);border-color:#fff}
.gebiet .btn--dark:hover{background:var(--red);color:#fff;border-color:var(--red)}

/* ---------- rechte Spalte: die Gebietskarte ---------- */
.gebiet__karte{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  padding:clamp(1.6rem,3vw,2.2rem);backdrop-filter:blur(2px)}

.gebiet__standort{display:flex;gap:.9rem;align-items:flex-start;margin:0 0 1.6rem;
  padding-bottom:1.4rem;border-bottom:1px solid rgba(255,255,255,.18);font-size:.92rem;line-height:1.5}
.gebiet__standort b{display:block;font-weight:600;color:#fff}
/* Der Punkt markiert den Ausgangspunkt – das einzige Rot in diesem Abschnitt */
.gebiet__pin{flex:none;width:13px;height:13px;margin-top:.3rem;border-radius:50%;
  background:#FF5457;box-shadow:0 0 0 5px rgba(255,84,87,.22)}

.gebiet__gruppe + .gebiet__gruppe{margin-top:1.5rem}
.gebiet__gruppe h3{font-family:var(--f-sans);font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.62);margin:0 0 .7rem}

.gebiet__orte{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.42rem}
.gebiet__orte li{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);
  padding:.34rem .72rem;font-size:.84rem;line-height:1.35;color:#fff;
  transition:background var(--t),border-color var(--t)}
.gebiet__orte li:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.45)}

.gebiet__fussnote{margin:1.7rem 0 0;padding-top:1.3rem;border-top:1px solid rgba(255,255,255,.18);
  font-size:.86rem;color:rgba(255,255,255,.68)}

@media (max-width:980px){
  .gebiet__inner{grid-template-columns:1fr;gap:2.4rem}
  .gebiet__lead{max-width:none}
}
@media (max-width:520px){
  .gebiet__aktionen .btn{width:100%}
  .gebiet__orte{gap:.36rem}
  .gebiet__orte li{font-size:.8rem;padding:.3rem .62rem}
}

/* =========================================================
   25 · WISCHHINWEIS
   ---------------------------------------------------------
   Kleiner Hinweis mit Pfeil über jeder wischbaren Reihe. Er steht
   außerhalb der scrollenden Fläche – läge er darin, würde er beim
   ersten Wischen mit nach links verschwinden.

   Der Pfeil bewegt sich in einer sehr ruhigen Schleife nach rechts.
   Das ist der eigentliche Hinweis; der Text allein würde man
   überlesen. Bei reduzierter Bewegung steht er still (Abschnitt 20).

   Am Desktop ausgeblendet, dort wird nichts gewischt.
   ========================================================= */
.wischhinweis{display:none}

@media (max-width:900px){
  .wischhinweis{
    display:flex;align-items:center;justify-content:flex-end;gap:.5rem;
    margin:0 0 .75rem;
    font-family:var(--f-sans);font-size:.68rem;font-weight:600;
    letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
    transition:opacity .35s ease;
  }
  .wischhinweis.is-erledigt{opacity:0}

  .wischhinweis__pfeil{
    font-size:.95rem;line-height:1;letter-spacing:0;color:var(--red);
    animation:wischen 1.9s cubic-bezier(.4,0,.3,1) infinite;
  }

  /* Auf der dunklen USP-Leiste braucht der Text mehr Helligkeit,
     der Pfeil dasselbe aufgehellte Rot wie die Akzente. */
  .usps .wischhinweis{color:rgba(255,255,255,.62);
    width:min(100% - 2.5rem,var(--wrap));margin-inline:auto;
    padding-top:clamp(2.2rem,4.5vw,3.2rem);margin-bottom:.65rem}
  .usps .wischhinweis__pfeil{color:#FF5457}
  .usps__grid{padding-block:0 1.6rem}
}

@keyframes wischen{
  0%,100%{transform:translateX(0)}
  55%    {transform:translateX(5px)}
}

@media (max-width:900px) and (pointer:coarse){
  .usps__grid{padding-block:0 clamp(2.2rem,4.5vw,3.2rem)}
}

/* =========================================================
   26 · DEZ-ZEICHEN IN DER KOPFLEISTE
   ---------------------------------------------------------
   Das Studio liegt direkt beim DEZ – das ist für Innsbrucker die
   eigentliche Ortsangabe. Das Zeichen steht deshalb neben dem Logo,
   getrennt durch eine feine Linie.

   Sichtbar wird es erst, wenn die Kopfleiste weiß ist. Solange sie
   über dem Hero-Bild liegt, bliebe ein zweites Zeichen auf dem Foto
   unruhig – und der weiße Schriftzug hätte Konkurrenz. Es schiebt
   sich seitlich herein statt einzublenden, damit die Bewegung zur
   Kopfleiste passt, die dabei ohnehin schmaler wird.

   Das Zeichen ist dekorativ (aria-hidden): Die Ortsangabe steht als
   Text in der oberen Leiste und in der Fußzeile.
   ========================================================= */
.header__marke{display:flex;align-items:center;gap:.9rem;min-width:0}

.header__dez{
  display:flex;align-items:center;gap:.9rem;
  max-width:74px;opacity:1;overflow:hidden;
  transition:max-width .5s cubic-bezier(.2,.8,.2,1),opacity .35s ease;
}
/* feine Trennlinie zwischen den beiden Zeichen */
.header__dez::before{content:"";flex:none;width:1px;height:26px;background:var(--line)}
.header__dez img{flex:none;width:30px;height:30px;display:block}

/* Über dem Bild: eingefahren. Der Umschaltpunkt ist derselbe, an dem
   die Kopfleiste weiß wird (is-solid, siehe main.js). */
body:has(> main > .hero) .header:not(.is-solid) .header__dez,
body:has(> main > .page-hero) .header:not(.is-solid) .header__dez{max-width:0;opacity:0}

@media (max-width:600px){
  .header__marke{gap:.7rem}
  .header__dez{gap:.7rem;max-width:64px}
  .header__dez img{width:26px;height:26px}
  .header__dez::before{height:22px}
}