/* =============================================================
   Sydney Sanierung - Designsystem
   Renovierung . Innenausbau . Raumgestaltung, Duesseldorf

   Nordstern: "Kupfer auf Kohle" - das Material des Logos selbst.
   Poliertes Kupfer auf fast schwarzem Anthrazit, wie die Musterplatte
   eines Metallbauers. Die Seite wechselt in grossen Bloecken zwischen
   Kohle und Kalkpapier: Kohle traegt die Projektfotografie, Papier
   traegt die Sachinhalte. Kupfer erscheint selten und immer dort, wo
   eine Handlung moeglich ist.

   Bewusst NICHT enthalten (Markenhaltung "keine Deko-Woerter"):
   keine Eyebrow-Kicker ueber jedem Abschnitt, keine Nummerierung
   ohne echte Reihenfolge, keine Farbverlaeufe als Zierde.
   ============================================================= */

@font-face{
  font-family:'Source Sans 3';
  src:url('/fonts/source-sans-3-latin.woff2') format('woff2');
  font-style:normal;font-weight:400 900;font-display:swap;
}
@font-face{
  font-family:'Newsreader';
  src:url('/fonts/newsreader-latin.woff2') format('woff2');
  font-style:normal;font-weight:400 500;font-display:swap;
}

/* =============================================================
   1. Tokens
   ============================================================= */
:root{
  /* --- Farbe: Kohle --- */
  --coal-deep:#0d0a08;
  --coal:#17120e;
  --coal-raised:#221b16;
  --coal-line:rgba(247,242,234,.14);

  /* --- Farbe: Kalkpapier --- */
  --paper:#f7f2ea;
  --paper-shade:#ece2d3;
  --paper-card:#fdfaf5;
  --paper-line:#dbcdb9;

  /* --- Farbe: Text --- */
  --ink:#17120e;            /* Ueberschriften auf hell */
  --ink-body:#493c32;       /* Fliesstext auf hell,  9.0:1 auf --paper */
  --ink-quiet:#6b5d50;      /* Nebentext auf hell,   5.9:1 auf --paper */
  --chalk:#efe6d9;          /* Ueberschriften auf dunkel */
  --chalk-body:#e2d7c7;     /* Fliesstext auf dunkel, 12.6:1 auf --coal */
  --chalk-quiet:#b3a493;    /* Nebentext auf dunkel,   7.5:1 auf --coal */

  /* --- Farbe: Kupfer --- */
  --copper:#8f4d1c;         /* Akzent auf hell,  5.9:1 auf --paper */
  --copper-cta:#9a5424;     /* CTA-Flaeche, Text #fff8ef -> 5.5:1 */
  --copper-cta-hover:#7c4116;
  --copper-warm:#c8904f;    /* Akzent auf dunkel, 6.6:1 auf --coal */
  --copper-tint:rgba(143,77,28,.2);

  /* --- Signal --- */
  --error:#93291a;
  --ok:#2c6539;
  --wa:#0f7a40;             /* WhatsApp-Gruen, abgedunkelt: #25d366 und
                               auch #128c4a erreichen mit weisser Schrift
                               keine 4,5:1. Hier 5,4:1. */
  --wa-hover:#0b6334;

  /* --- Typo: Groessen (rem, damit Nutzer-Zoom greift) --- */
  --t-xs:.75rem;            /* 12px  Labels, Rechtliches */
  --t-sm:.875rem;           /* 14px  Metazeilen */
  --t-base:1.0625rem;       /* 17px  Fliesstext */
  --t-lead:clamp(1.125rem,.98rem + .55vw,1.3125rem);
  --t-d4:clamp(1.3125rem,1.19rem + .5vw,1.6875rem);   /* 21-27px */
  --t-d3:clamp(1.625rem,1.33rem + 1.2vw,2.5rem);      /* 26-40px */
  --t-d2:clamp(2.0625rem,1.5rem + 2.2vw,3.75rem);     /* 33-60px */
  --t-d1:clamp(2.75rem,1.8rem + 3.8vw,5.5rem);        /* 44-88px */

  /* --- Typo: Familien und Rollen --- */
  --ff-display:'Newsreader',Georgia,'Times New Roman',serif;
  --ff-text:'Source Sans 3',system-ui,-apple-system,'Segoe UI',sans-serif;
  --lh-display:1.02;
  --lh-body:1.6;
  --ls-display:-.035em;

  /* --- Raum: 4pt-Skala --- */
  --s-1:.25rem;  --s-2:.5rem;   --s-3:.75rem;  --s-4:1rem;
  --s-5:1.5rem;  --s-6:2rem;    --s-7:3rem;    --s-8:4rem;   --s-9:6rem;
  --s-section:clamp(4.25rem,3rem + 5.5vw,8.25rem);
  --gut:clamp(1.25rem,.6rem + 2.8vw,4.5rem);
  --shell:82.5rem;          /* 1320px */
  /* Hoehe des klebenden Kopfes: min-height 4.75rem plus Innenabstand.
     Alles, was unter ihm kleben oder als Sprungziel darunter landen
     soll, rechnet hiermit statt mit geratenen Werten. */
  --kopf-h:5.5rem;

  /* --- Bewegung --- */
  --ease-out:cubic-bezier(.25,1,.5,1);      /* quart */
  --ease-out-expo:cubic-bezier(.16,1,.3,1);

  /* --- Ebenen --- */
  --z-sticky:80;
  --z-actionbar:90;
  --z-skip:200;
}

/* =============================================================
   2. Basis
   ============================================================= */
*,*::before,*::after{box-sizing:border-box}
html{
  scroll-behavior:smooth;-webkit-text-size-adjust:100%;
  /* Jeder Ankersprung landete bisher exakt an der Oberkante und damit
     hinter der klebenden Kopfzeile - gemessen fuer alle sechs Menue-
     punkte der Startseite. scroll-padding gilt fuer den ganzen
     Scrollbereich, also auch fuer Anker, die spaeter dazukommen. */
  scroll-padding-top:calc(var(--kopf-h) + var(--s-4));
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink-body);
  font-family:var(--ff-text);
  font-size:var(--t-base);
  line-height:var(--lh-body);
  font-kerning:normal;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4,p,figure,blockquote,ul{margin:0}
ul{padding:0;list-style:none}

:focus-visible{outline:3px solid var(--copper-cta);outline-offset:3px}
.on-coal :focus-visible,.hero :focus-visible{outline-color:var(--copper-warm)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:var(--z-skip);
  background:var(--copper-cta);color:#fff8ef;padding:var(--s-3) var(--s-5);font-weight:800;
}
.skip:focus{left:var(--s-3);top:var(--s-3)}
.vh{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* =============================================================
   3. Struktur
   ============================================================= */
.shell{width:min(var(--shell),100%);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:var(--s-section)}
.section--tight{padding-block:clamp(3.25rem,2.4rem + 3.6vw,5.5rem)}

/* Kohleblock. Traegt Fotografie und die beiden Momente, in denen
   die Seite laut werden darf: Hero und Kontaktabschluss.
   Helle Schrift auf Dunkel braucht mehr Durchschuss und einen Hauch
   Laufweite, sonst wirkt sie duenner als sie ist. */
.on-coal{
  background:var(--coal);color:var(--chalk-body);
  line-height:calc(var(--lh-body) + .07);letter-spacing:.012em;
}
.on-coal .display{color:var(--chalk)}
.on-coal .lead{color:var(--chalk-body)}
.on-coal .meta{color:var(--copper-warm)}
.on-coal .note{color:var(--chalk-quiet)}
.on-shade{background:var(--paper-shade)}

/* =============================================================
   4. Typografie
   ============================================================= */
.display{
  font-family:var(--ff-display);font-weight:500;
  line-height:var(--lh-display);letter-spacing:var(--ls-display);
  color:var(--ink);text-wrap:balance;
}
.d-1{font-size:var(--t-d1)}
.d-2{font-size:var(--t-d2)}
.d-3{font-size:var(--t-d3)}
.d-4{font-size:var(--t-d4);line-height:1.08}

.lead{font-size:var(--t-lead);line-height:1.55;max-width:64ch;text-wrap:pretty}
.prose{display:grid;gap:var(--s-4);max-width:68ch}
.prose p{text-wrap:pretty}
.note{color:var(--ink-quiet);font-size:var(--t-sm);max-width:60ch}

/* Metazeile: Ort und Leistung. Bewusst Normalschrift statt
   gesperrter Versalien - das waere der Eyebrow-Reflex, und der Ort
   ist hier echte Information, keine Dekoration. */
.meta{font-size:var(--t-sm);font-weight:700;color:var(--copper);letter-spacing:0}

.section-head{display:grid;gap:var(--s-4);max-width:72ch}
.section-head + *{margin-top:clamp(2.25rem,1.5rem + 3vw,4.5rem)}

/* =============================================================
   5. Buttons und Links
   ============================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  min-height:3.25rem;padding:var(--s-3) var(--s-6);
  border:1px solid transparent;border-radius:999px;
  font-weight:800;font-size:var(--t-base);text-align:center;cursor:pointer;
  transition:background .24s var(--ease-out),color .24s var(--ease-out),
             border-color .24s var(--ease-out),transform .24s var(--ease-out);
}
.btn--primary{background:var(--copper-cta);color:#fff8ef}
.btn--primary:hover{background:var(--copper-cta-hover);transform:translateY(-2px)}
.btn--ink{background:var(--coal);color:var(--paper)}
.btn--ink:hover{background:#000;transform:translateY(-2px)}
.btn--ghost{border-color:var(--paper-line);color:var(--ink)}
.btn--ghost:hover{border-color:var(--copper-cta);color:var(--copper);transform:translateY(-2px)}
/* .hero traegt kein .on-coal - es bringt seinen eigenen Kohlegrund
   mit. Ohne diesen Zusatz faellt der Ghost-Button dort auf die
   Hell-Variante zurueck: --ink auf Kohle, Kontrast 1,02:1. */
.on-coal .btn--ghost,.hero .btn--ghost{border-color:var(--coal-line);color:var(--chalk)}
.on-coal .btn--ghost:hover,.hero .btn--ghost:hover{border-color:var(--copper-warm);color:var(--copper-warm)}
/* Im Hero dreht der Zylinder Fotos hinter den Buttons durch. Ein
   reiner Umriss haette dort keinen verlaesslichen Grund, deshalb
   eine leichte Platte mit Unschaerfe und ein kraeftigerer Rand. */
.hero .btn--ghost{
  background:rgba(12,10,9,.55);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-color:rgba(239,230,217,.42);
}
.hero .btn--ghost:hover{background:rgba(12,10,9,.68);border-color:var(--copper-warm)}
.btn--wa{background:var(--wa);color:#fff}
.btn--wa:hover{background:var(--wa-hover);transform:translateY(-2px)}
.btn[disabled],.btn[aria-busy=true]{opacity:.6;cursor:progress;transform:none}

.tlink{
  display:inline-flex;align-items:center;gap:var(--s-2);min-height:2.75rem;
  color:var(--copper);font-weight:800;
  border-bottom:1px solid var(--copper-tint);
  transition:border-color .24s var(--ease-out);
}
.tlink::after{content:'\2192';transition:transform .24s var(--ease-out)}
.tlink:hover{border-bottom-color:var(--copper)}
.tlink:hover::after{transform:translateX(4px)}
.on-coal .tlink{color:var(--copper-warm);border-bottom-color:rgba(200,144,79,.34)}
.on-coal .tlink:hover{border-bottom-color:var(--copper-warm)}

/* =============================================================
   6. Header
   ============================================================= */
.site-header{
  position:sticky;top:0;z-index:var(--z-sticky);
  background:var(--coal);color:var(--paper);
  border-bottom:1px solid var(--coal-line);
}
.site-header .shell{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);
  min-height:4.75rem;padding-block:var(--s-3);
}
.brand{display:inline-flex;align-items:center;width:clamp(8.25rem,12vw,11.25rem)}
.brand img{width:100%;height:auto}
.nav{display:flex;align-items:center;gap:clamp(.875rem,1.8vw,1.875rem)}
.nav a{
  font-size:var(--t-sm);font-weight:700;color:var(--chalk-quiet);
  padding:var(--s-2) 0;border-bottom:1px solid transparent;
  transition:color .2s var(--ease-out),border-color .2s var(--ease-out);
}
.nav a:hover,.nav a[aria-current=page]{color:var(--copper-warm);border-bottom-color:var(--copper-warm)}
.header-cta .btn{min-height:2.75rem;padding:var(--s-2) var(--s-5);font-size:var(--t-sm)}
.nav-toggle{
  display:none;align-items:center;gap:var(--s-2);
  background:none;border:1px solid var(--coal-line);border-radius:999px;
  min-height:2.75rem;padding:var(--s-2) var(--s-4);
  font-size:var(--t-sm);font-weight:800;color:var(--paper);cursor:pointer;
  transition:border-color .2s var(--ease-out),color .2s var(--ease-out);
}
.nav-toggle:hover{border-color:var(--copper-warm);color:var(--copper-warm)}
.nav-toggle svg{width:1rem;height:1rem;flex:none}

/* =============================================================
   7. Hero
   Der Hero-Zylinder bringt sein eigenes Stylesheet mit:
   assets/hero.css, unveraendert aus der bestehenden Website.
   ============================================================= */

/* =============================================================
   8. Vertrauensband
   ============================================================= */
.trustbar{background:var(--coal-raised);border-top:1px solid var(--coal-line)}
.trustbar .shell{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--s-5) clamp(1.5rem,1rem + 2.5vw,3.5rem);
  padding-block:clamp(2rem,1.4rem + 2.4vw,3.25rem);
}
.trustbar div{display:grid;gap:var(--s-1);align-content:start}
.trustbar strong{
  font-family:var(--ff-display);font-weight:500;font-size:var(--t-d3);
  line-height:1;color:var(--copper-warm);font-variant-numeric:tabular-nums;
}
.trustbar span{font-size:var(--t-sm);line-height:1.5;max-width:36ch;color:var(--chalk-body)}

/* =============================================================
   9. Positionierung
   ============================================================= */
.stance .shell{
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(2rem,1.2rem + 4vw,5rem);align-items:center;
}
/* Hochformat, im eigenen Seitenverhaeltnis. Der frueher erzwungene
   4:3-Rahmen hat das Motiv oben und unten stark beschnitten. */
.stance img{width:100%;aspect-ratio:3/2;object-fit:cover}

/* =============================================================
   10. Leistungen
   Zweispaltig: links ein Handwerksbild mit aufgesetzter Aussage,
   rechts die sechs Leistungen als Liste.

   Die Liste trennt mit 1px-Haarlinien auf einer Flaeche - dieselbe
   Sprache wie .why-list, .region-grid und .deflist. Kein dunkler
   Block im hellen Abschnitt: Kohle tritt auf dieser Seite immer als
   ganzes Band auf, nie als eingesetzter Kasten.
   ============================================================= */
.svc-split{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(1.25rem,.9rem + 1.6vw,2.5rem);align-items:stretch;
}

/* Linke Spalte: Bild oben, Einleitung darunter. Das Bild laeuft im
   eigenen Seitenverhaeltnis - ein Querformatfoto in einen hohen
   Rahmen zu zwingen wuerde fast die halbe Raumbreite wegschneiden. */
.svc-intro{display:grid;gap:clamp(1.25rem,1rem + 1.2vw,2rem);align-content:start}
.svc-shot{
  position:relative;margin:0;overflow:hidden;background:var(--coal-deep);
  width:100%;max-width:100%;aspect-ratio:4/3;display:flex;
}
.svc-shot img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 62%;
}
/* Scrim nur unten, damit die Aussage traegt ohne das Bild zu ersaeufen. */
.svc-shot::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(13,10,8,0) 42%,rgba(13,10,8,.6) 74%,rgba(13,10,8,.88) 100%);
}
/* Bewusst kleiner als die Abschnittsueberschrift - Akzent, keine
   zweite Ueberschrift. */
.svc-shot figcaption{
  position:relative;z-index:1;align-self:flex-end;
  padding:clamp(1.125rem,.9rem + 1.2vw,1.875rem);
  color:var(--chalk);max-width:22ch;
  text-shadow:0 .75rem 2.5rem rgba(0,0,0,.5);
}

.svc-list{
  display:grid;gap:1px;background:var(--paper-line);
  border:1px solid var(--paper-line);align-content:start;
}
.svc-row{
  /* Abschnittsfarbe, nicht --paper-card: auf dem beigen Band wirken
     fastweisse Zellen wie aufgelegte Karten. So bleiben nur die
     Haarlinien sichtbar. */
  background:var(--paper-shade);
  padding:clamp(1rem,.85rem + .9vw,1.5rem) clamp(1.125rem,.95rem + 1vw,1.75rem);
  display:grid;gap:var(--s-2);align-content:start;
}
.svc-row h3{
  margin:0;font-family:var(--ff-display);font-weight:500;
  font-size:var(--t-d4);line-height:1.06;letter-spacing:-.03em;color:var(--ink);
}
.svc-row p{margin:0;color:var(--ink-body);font-size:var(--t-sm);line-height:1.5;max-width:52ch}

/* =============================================================
   11. Vorher/Nachher-Hauptbereich (auf Kohle, damit die Fotos tragen)
   ============================================================= */
.ba{display:grid;gap:clamp(3.5rem,2.4rem + 4.5vw,6.5rem)}
.ba__item{
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);
  gap:clamp(1.75rem,1.2rem + 3vw,4rem);align-items:center;
}
.ba__item:nth-of-type(even){grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)}
.ba__item:nth-of-type(even) .ba__copy{order:-1}
.ba__item--lead{grid-template-columns:1fr;gap:clamp(1.5rem,1.1rem + 2vw,2.75rem)}
.ba__pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2)}
.ba__frame{position:relative;overflow:hidden;background:var(--coal-deep);aspect-ratio:4/5}
.ba__item--lead .ba__frame{aspect-ratio:4/3}
.ba__frame img{width:100%;height:100%;object-fit:cover}
.ba__tag{
  position:absolute;left:var(--s-3);top:var(--s-3);
  padding:.4375rem .8125rem;border-radius:999px;
  font-size:var(--t-xs);font-weight:800;
  background:rgba(13,10,8,.88);color:var(--chalk);
}
.ba__tag--after{background:var(--copper-warm);color:var(--coal)}
.ba__copy{display:grid;gap:var(--s-3);align-content:center;letter-spacing:0}
.ba__copy p{color:var(--chalk-body);letter-spacing:.012em}
.ba__item--lead .ba__copy{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--s-4) clamp(1.75rem,1.2rem + 3vw,3.5rem);align-items:start;
}
.ba__item--lead .ba__head{display:grid;gap:var(--s-3)}

/* =============================================================
   12. Projektportfolio
   ============================================================= */
.pf-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(1rem,.7rem + 1.2vw,1.625rem)}
.pf{grid-column:span 2;display:grid;gap:var(--s-3);align-content:start}
.pf--wide{grid-column:span 3}
.pf__shot{display:block;position:relative;overflow:hidden;background:var(--coal);aspect-ratio:4/3}
.pf--wide .pf__shot{aspect-ratio:16/10}
.pf__shot img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-out-expo)}
.pf:hover .pf__shot img,.pf:focus-within .pf__shot img{transform:scale(1.04)}
.pf__body{position:relative;display:grid;gap:var(--s-1)}
.pf h3{
  font-family:var(--ff-display);font-weight:500;font-size:var(--t-d4);
  line-height:1.08;letter-spacing:-.03em;color:var(--ink);
}
.pf h3 a::after{content:'';position:absolute;inset:0}   /* ganze Kachel klickbar */
.pf__what{font-size:var(--t-sm);color:var(--ink-quiet)}

/* =============================================================
   13. Besonderes Projekt
   ============================================================= */
.feature .shell{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.75rem,1.2rem + 3vw,4.25rem);align-items:center;
  padding-block:var(--s-section);
}
.feature__media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.feature__media figcaption{margin-top:var(--s-3);font-size:var(--t-sm);color:var(--chalk-quiet)}

/* =============================================================
   14. Warum Sydney Sanierung
   Liste mit Linien statt vier gleicher Karten.
   ============================================================= */
.why-list{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;background:var(--paper-line);border-block:1px solid var(--paper-line);
}
.why{background:var(--paper);padding:clamp(1.5rem,1.1rem + 1.8vw,2.625rem);display:grid;gap:var(--s-3)}
.why h3{
  font-family:var(--ff-display);font-weight:500;font-size:var(--t-d4);
  line-height:1.06;letter-spacing:-.03em;color:var(--ink);
}
.why p{color:var(--ink-body);font-size:var(--t-base)}

/* =============================================================
   15. Ablauf - der einzige Ort mit echter Reihenfolge, also der
   einzige Ort mit Nummern.
   ============================================================= */
.flow-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(1.125rem,.8rem + 1.4vw,1.875rem)}
.flow-step{display:grid;gap:var(--s-2);align-content:start;padding-top:var(--s-4);border-top:2px solid var(--coal)}
.flow-step:not(:first-child){border-top-color:var(--paper-line)}
.flow-step b{
  font-family:var(--ff-display);font-weight:400;font-size:var(--t-d4);
  line-height:1;color:var(--copper);font-variant-numeric:tabular-nums;
}
.flow-step h3{
  font-family:var(--ff-display);font-weight:500;font-size:var(--t-d4);
  line-height:1.06;letter-spacing:-.03em;color:var(--ink);
}
.flow-step p{color:var(--ink-body);font-size:var(--t-sm);line-height:1.5}

/* =============================================================
   16. Google-Bewertungen
   ============================================================= */
.rev-summary{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4) var(--s-6);
  padding:var(--s-5) var(--s-6);border:1px solid var(--coal-line);
  background:var(--coal-raised);max-width:47.5rem;
}
.rev-score{
  font-family:var(--ff-display);font-weight:500;font-size:var(--t-d2);
  line-height:1;color:var(--copper-warm);font-variant-numeric:tabular-nums;
}
.rev-stars{color:var(--copper-warm);font-size:var(--t-lead);letter-spacing:.1em}
.rev-summary p:not(.rev-score){margin-top:var(--s-1);font-weight:700;color:var(--chalk-body)}
.rev-summary .tlink{margin-left:auto}
.quotes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,.7rem + 1.2vw,1.5rem);margin-top:clamp(1.75rem,1.2rem + 2vw,2.75rem)}
.quote{
  background:var(--coal-raised);border:1px solid var(--coal-line);
  padding:clamp(1.5rem,1.1rem + 1.8vw,2.25rem);
  display:flex;flex-direction:column;gap:var(--s-4);
}
.quote__head{display:flex;align-items:center;gap:var(--s-3)}
.quote__ava{
  width:2.5rem;height:2.5rem;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--copper-warm);color:var(--coal);font-weight:900;
}
.quote__name{font-weight:800;color:var(--chalk)}
.quote__src{font-size:var(--t-xs);color:var(--chalk-quiet)}
.quote__stars{color:var(--copper-warm);letter-spacing:.09em}
/* Nur der Zitattext, nicht Name, Quelle oder Sterne. Die sind
   ebenfalls <p> im selben Block und rendern sonst in der Serife -
   teils in Schnitten, die das Subset gar nicht mehr enthaelt. */
.quote > p:not([class]){
  font-family:var(--ff-display);font-size:var(--t-d4);line-height:1.3;
  color:#f2e8da;letter-spacing:-.01em;
}
.quote footer{margin-top:auto;font-size:var(--t-xs);font-weight:800;color:var(--copper-warm)}

/* =============================================================
   17. Ueber Sydney Sanierung
   ============================================================= */
.about .shell{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.875rem,1.2rem + 3.4vw,4.5rem);align-items:stretch;
}
/* Bild auf Spaltenhoehe statt mittig schwebend - der Textblock ist
   laenger als ein 3:4-Bild, sonst entstehen Reste oben und unten. */
.about figure{margin:0;min-height:24rem}
.about img{width:100%;height:100%;object-fit:cover}
.about__body{display:grid;gap:var(--s-4)}
.about__body p{color:var(--ink-body);max-width:60ch;text-wrap:pretty}
/* Markenzeile, gleiche Rolle wie .contact__slogan - dort auf Kohle
   in Kupferwarm, hier auf Papier im dunkleren Kupfer. */
.about__body .about__claim{
  margin-top:calc(var(--s-2) * -1);
  font-family:var(--ff-display);font-weight:500;font-size:var(--t-d3);
  line-height:1.04;letter-spacing:-.03em;color:var(--copper);max-width:22ch;
}
/* Kurze Signaturzeile. Bewusst in der Displayschrift und in Ink,
   damit sie nicht mit der Markenzeile um dieselbe Farbe konkurriert. */
.about__body .about__motto{
  font-family:var(--ff-display);font-size:var(--t-d4);
  line-height:1.1;letter-spacing:-.02em;color:var(--ink);
  padding-top:var(--s-3);border-top:1px solid var(--paper-line);
}
.deflist{display:grid;gap:1px;background:var(--paper-line);border:1px solid var(--paper-line);margin-top:var(--s-2)}
.deflist>div{background:var(--paper);padding:var(--s-4) var(--s-5);display:grid;grid-template-columns:auto 1fr;gap:var(--s-4);align-items:baseline}
.deflist b{font-size:var(--t-sm);font-weight:800;color:var(--copper);min-width:7rem}
.on-coal .deflist{background:var(--coal-line);border-color:var(--coal-line)}
.on-coal .deflist>div{background:var(--coal-raised)}
.on-coal .deflist b{color:var(--copper-warm)}

/* =============================================================
   18. Einzugsgebiet
   ============================================================= */
.region-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--paper-line);border:1px solid var(--paper-line)}
.region-cell{background:var(--paper-shade);padding:clamp(1.25rem,1rem + 1.2vw,2rem);display:grid;gap:var(--s-2);align-content:start}
.region-cell h3{
  font-family:var(--ff-display);font-weight:500;font-size:var(--t-d4);
  line-height:1.06;color:var(--ink);
}
/* :not(.meta), damit die Kupfer-Metazeile nicht ueberschrieben wird -
   .region-cell p (0,1,1) schlaegt .meta (0,1,0) in der Spezifitaet. */
.region-cell p:not(.meta){color:var(--ink-body);font-size:var(--t-sm);line-height:1.5}

/* =============================================================
   19. Kontakt
   ============================================================= */
.contact .shell{display:grid;gap:clamp(2.25rem,1.5rem + 3.4vw,4.5rem)}
.contact__top{display:grid;gap:var(--s-4);max-width:72ch}
.contact__slogan{
  font-family:var(--ff-display);font-weight:500;font-size:var(--t-d3);
  line-height:1.04;color:var(--copper-warm);letter-spacing:-.03em;
}
.contact__area{font-size:var(--t-sm);font-weight:700;color:var(--chalk-quiet)}
.contact__cols{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(1.75rem,1.2rem + 3vw,3.75rem);align-items:start;
}
.contact__ways{display:flex;flex-wrap:wrap;gap:var(--s-3)}

.form{background:var(--paper-card);color:var(--ink);padding:clamp(1.5rem,1.1rem + 2vw,2.75rem);display:grid;gap:var(--s-4);letter-spacing:0;line-height:var(--lh-body)}
.form h3{font-family:var(--ff-display);font-weight:500;font-size:var(--t-d3);line-height:1.04;letter-spacing:-.03em;color:var(--ink)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
.field{display:grid;gap:var(--s-2)}
.field label{font-size:var(--t-sm);font-weight:800;color:var(--copper)}
.field input,.field textarea,.field select{
  width:100%;border:1px solid var(--paper-line);background:#fff;color:var(--ink);
  border-radius:0;padding:var(--s-3) var(--s-4);
  font:600 1rem var(--ff-text);
}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-quiet);font-weight:500}
.field textarea{min-height:8.25rem;resize:vertical}
.field.invalid input,.field.invalid textarea,.field.invalid select{border-color:var(--error);background:#fdf3ef}
.consent{display:grid;grid-template-columns:auto 1fr;gap:var(--s-3);align-items:start}
.consent input{width:1.375rem;height:1.375rem;flex:none;margin-top:.1875rem;accent-color:var(--copper-cta)}
.consent label{font-size:var(--t-sm);line-height:1.5;color:var(--ink-body);font-weight:600}
.consent a{color:var(--copper);font-weight:800;border-bottom:1px solid var(--copper-tint)}
.consent.invalid label{color:var(--error)}
.consent.invalid input{outline:2px solid var(--error);outline-offset:2px}
.form__hint{font-size:var(--t-sm);color:var(--ink-quiet)}
.form-status{min-height:1.375rem;font-weight:800;color:var(--ink-quiet);font-size:var(--t-sm)}
.form-status.is-error{color:var(--error)}
.form-status.is-ok{color:var(--ok)}
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}
.form-done{background:#f1f6f1;border:1px solid #b4cbb4}
.form-done p{color:var(--ink-body)}
.form-done a{color:var(--copper);font-weight:800}

/* =============================================================
   20. Footer
   ============================================================= */
.site-footer{background:var(--coal-deep);color:var(--chalk-quiet);padding-block:clamp(2.75rem,2rem + 2.4vw,4.25rem) var(--s-5)}
.site-footer .shell{display:grid;gap:clamp(1.75rem,1.2rem + 2.4vw,3.25rem)}
.foot-top{display:grid;grid-template-columns:minmax(0,1.35fr) repeat(2,minmax(0,1fr));gap:clamp(1.625rem,1.2rem + 2vw,3rem)}
.foot-brand{display:grid;gap:var(--s-3);align-content:start}
.foot-brand .brand{width:clamp(8.75rem,14vw,11.875rem)}
.foot-brand p{font-size:var(--t-sm);line-height:1.55}
.foot-brand strong{color:var(--chalk);font-weight:800}
.foot-col h2{margin-bottom:var(--s-3);font-size:var(--t-sm);font-weight:800;color:var(--copper-warm)}
.foot-col li+li{margin-top:var(--s-1)}
.foot-col a{display:inline-block;padding:var(--s-1) 0;color:var(--chalk-body);font-size:var(--t-sm)}
.foot-col a:hover{color:var(--copper-warm)}
.foot-bottom{
  display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);justify-content:space-between;
  padding-top:var(--s-5);border-top:1px solid var(--coal-line);font-size:var(--t-sm);
}
.foot-bottom a:hover{color:var(--copper-warm)}

/* =============================================================
   21. Mobile Kontaktleiste
   ============================================================= */
.mbar{display:none}

/* =============================================================
   22. Projektseiten
   ============================================================= */
.proj-hero{padding-block:clamp(2.25rem,1.6rem + 2.6vw,4.25rem)}
.crumbs{margin-bottom:var(--s-5);font-size:var(--t-sm);color:var(--chalk-quiet)}
.crumbs a:hover{color:var(--copper-warm)}
.crumbs span{margin:0 var(--s-2);opacity:.5}
.proj-hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.75rem,1.2rem + 3vw,3.75rem);align-items:center}
.proj-ba{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.625rem,.5rem + .8vw,1.125rem)}
.proj-ba figure{display:grid;gap:var(--s-2)}
.proj-ba .ba__frame{aspect-ratio:4/5}
.proj-ba figcaption{font-size:var(--t-sm);font-weight:700;color:var(--chalk-quiet)}
.proj-body{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(1.875rem,1.2rem + 3.4vw,4.25rem);align-items:start}
.proj-side{background:var(--paper-shade);border:1px solid var(--paper-line);padding:clamp(1.5rem,1.1rem + 1.6vw,2.125rem);display:grid;gap:var(--s-4)}
.proj-side h2{font-family:var(--ff-display);font-weight:500;font-size:var(--t-d4);line-height:1.06;letter-spacing:-.03em;color:var(--ink)}
.proj-side ul{display:grid;gap:var(--s-2)}
.proj-side li{display:flex;gap:var(--s-2);color:var(--ink-body);font-size:var(--t-sm)}
.proj-side li::before{content:'\2013';color:var(--copper);flex:none}
.proj-next-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,.7rem + 1.2vw,1.625rem)}

/* =============================================================
   22b. Rechtstexte und Fehlerseite
   ============================================================= */
.legal-hero{padding-block:clamp(3rem,2.2rem + 3.4vw,6rem)}
.legal-hero .display{max-width:18ch}
.legal-hero .lead{margin-top:var(--s-4)}
.content{width:min(60rem,100%);margin-inline:auto;padding-block:var(--s-section)}
.content section + section{border-top:1px solid var(--paper-line);margin-top:var(--s-7);padding-top:var(--s-7)}
.content h2{
  font-family:var(--ff-display);font-weight:500;font-size:var(--t-d3);
  line-height:1.04;letter-spacing:-.035em;color:var(--ink);margin-bottom:var(--s-4);
}
.content h3{
  font-family:var(--ff-display);font-weight:500;font-size:var(--t-d4);
  line-height:1.1;color:var(--ink);margin:var(--s-5) 0 var(--s-2);
}
.content p,.content li{color:var(--ink-body);max-width:72ch}
.content p + p{margin-top:var(--s-3)}
.content a{color:var(--copper);font-weight:700;border-bottom:1px solid var(--copper-tint)}
.content a:hover{border-bottom-color:var(--copper)}
.content address{font-style:normal;color:var(--ink-body)}
.content ul{padding-left:1.25rem;list-style:disc;display:grid;gap:var(--s-2);margin-top:var(--s-3)}
.content .note{
  padding:var(--s-5);background:var(--paper-shade);border:1px solid var(--paper-line);
  color:var(--ink-body);max-width:none;font-size:var(--t-base);
}
.errorpage .shell{padding-block:clamp(3.5rem,2.5rem + 4vw,7rem)}
.errorpage .btnrow{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-6)}

/* =============================================================
   23. Bewegung
   Nur zwei Abschnitte blenden beim Scrollen ein - die beiden, in
   denen etwas "aufgedeckt" wird. Eine identische Einblendung auf
   jedem Abschnitt waere der Reflex, nicht die Absicht.
   ============================================================= */
.reveal{opacity:1;transform:none}
html.js-reveal .reveal{
  opacity:0;transform:translateY(1.25rem);
  transition:opacity .8s var(--ease-out-expo),transform .8s var(--ease-out-expo);
}
html.js-reveal .reveal.in{opacity:1;transform:none}
html.js-reveal .reveal[data-stagger]{transition-delay:calc(var(--i,0) * 90ms)}

/* =============================================================
   24. Responsive
   ============================================================= */
@media (max-width:68.75rem){          /* 1100px */
  .svc-split{grid-template-columns:1fr}
  .pf-grid{grid-template-columns:repeat(4,1fr)}
  .pf,.pf--wide{grid-column:span 2}
  .pf--wide .pf__shot{aspect-ratio:4/3}
  .region-grid,.flow-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stance .shell,.about .shell,.feature .shell,.contact__cols,
  .proj-hero__grid,.proj-body{grid-template-columns:1fr}
  /* Gestapelt fuehrt das Seitenverhaeltnis, nicht die Mindesthoehe -
     sonst wird das Bild fast quadratisch. */
  .about figure{min-height:0}
  .about img{height:auto;aspect-ratio:3/4}
  .ba__item,.ba__item:nth-of-type(even){grid-template-columns:1fr}
  .ba__item:nth-of-type(even) .ba__copy{order:0}
  .ba__item--lead .ba__copy{grid-template-columns:1fr}
  .proj-next-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:53.75rem){          /* 860px */
  .nav,.header-cta{display:none}
  .nav-toggle{display:inline-flex}
  .site-header.is-open .nav{
    display:grid;position:absolute;left:0;right:0;top:100%;gap:0;
    background:var(--coal);border-bottom:1px solid var(--coal-line);
    padding:0 var(--gut) var(--s-4);box-shadow:0 1.25rem 2.5rem rgba(0,0,0,.4);
  }
  .site-header.is-open .nav a{padding:var(--s-4) 0;border-bottom:1px solid var(--coal-line);font-size:var(--t-base)}
  .trustbar .shell{grid-template-columns:1fr;gap:var(--s-5)}
  .why-list,.quotes{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
  .rev-summary .tlink{margin-left:0}
  body{padding-bottom:4.625rem}
  .mbar{
    display:grid;grid-template-columns:1fr 1fr;gap:1px;
    position:fixed;left:0;right:0;bottom:0;z-index:var(--z-actionbar);
    background:rgba(13,10,8,.3);box-shadow:0 -.75rem 2rem rgba(13,10,8,.26);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .mbar a{display:flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:3.75rem;font-weight:800}
  .mbar__call{background:var(--coal);color:var(--paper)}
  .mbar__wa{background:var(--wa);color:#fff}
  .mbar svg{width:1.125rem;height:1.125rem;flex:none}

  /* Touch-Ziele: Inline-Links in Faktenlisten und Fliesstext sind
     mit reiner Zeilenhoehe zu flach zum Antippen. */
  .deflist a,.form__hint a,.foot-brand a,.crumbs a,.consent a,.foot-bottom a{
    display:inline-block;padding-block:.75rem;
  }
  .foot-col a{padding-block:.75rem}
  /* Die Checkbox bleibt optisch ruhig; das verknuepfte Label ist der
     grosse Trefferbereich und schaltet mit. */
  .consent input{width:1.75rem;height:1.75rem;margin-top:0}
  .consent label{padding-block:.25rem}
}
@media (max-width:38.75rem){          /* 620px */
  .pf-grid{grid-template-columns:1fr}
  .pf,.pf--wide{grid-column:span 1}
  .flow-list,.region-grid,.form-row,.proj-next-grid{grid-template-columns:1fr}
  .ba__frame,.ba__item--lead .ba__frame,.proj-ba .ba__frame{aspect-ratio:3/4}
  .foot-top{grid-template-columns:1fr}
  .cta-row .btn,.contact__ways .btn{flex:1 1 100%}
  .deflist>div{grid-template-columns:1fr;gap:var(--s-1)}
  .deflist b{min-width:0}
}
@media (prefers-reduced-motion:reduce){
  .reveal,html.js-reveal .reveal{opacity:1;transform:none;transition:none}
  .pf__shot img{transition:none}
  .btn,.tlink,.tlink::after,.nav a{transition:none}
  .btn:hover,.tlink:hover::after{transform:none}
}

/* =============================================================
   FAQ

   Neunundfuenfzig Fragen in zehn Bloecken. Zwei Dinge tragen die
   Seite: eine mitlaufende Themenspalte, damit man nicht scrollend
   sucht, und Fragen als <details> - aufklappbar ohne JavaScript,
   mit der Tastatur bedienbar, Antworttext immer im Markup.

   Der Kurzblock auf der Startseite (.faq-kurz) benutzt dieselben
   .faq-item-Regeln, damit sich beide Stellen gleich anfuehlen.
   ============================================================= */

.faq-hero{padding-block:clamp(3.5rem,2.6rem + 3.8vw,6rem)}
.faq-hero h1{
  font-family:var(--ff-display);font-weight:400;
  font-size:var(--t-d2);line-height:1.06;letter-spacing:var(--ls-display);
  color:var(--chalk);margin:var(--s-3) 0 var(--s-5);
  max-width:22ch;
}
.faq-hero__lead{max-width:68ch;margin-block:var(--s-3)}
.faq-hero__lead:first-of-type{font-size:var(--t-lead);color:var(--chalk)}

/* Themenspalte neben dem Inhalt. Unter 60rem wandert sie nach oben
   und wird zur normalen Liste - dort ist kein Platz fuer zwei
   Spalten, und eine klebende Leiste wuerde den kleinen Schirm
   zustellen. */
.faq-shell{display:block}
.faq-nav{margin-bottom:var(--s-7)}
.faq-nav h2{
  font-family:var(--ff-text);font-weight:600;
  font-size:var(--t-sm);letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-quiet);margin:0 0 var(--s-3);
}
.faq-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s-2)}
.faq-nav a{
  display:block;padding:var(--s-2) var(--s-4);
  border:1px solid var(--paper-line);border-radius:999px;
  color:var(--ink-body);text-decoration:none;font-size:var(--t-sm);
  transition:background .2s var(--ease-out),border-color .2s var(--ease-out),color .2s var(--ease-out);
}
.faq-nav a:hover,.faq-nav a:focus-visible{
  background:var(--paper-card);border-color:var(--copper);color:var(--copper);
}

@media (min-width:60rem){
  .faq-shell{
    display:grid;grid-template-columns:16rem minmax(0,1fr);
    gap:var(--s-8);align-items:start;
  }
  .faq-nav{position:sticky;top:calc(var(--kopf-h) + var(--s-4));margin-bottom:0}
  .faq-nav ul{display:block}
  .faq-nav li + li{margin-top:var(--s-1)}
  .faq-nav a{border:0;border-radius:var(--s-1);padding:var(--s-2) var(--s-3)}
}

.faq-block + .faq-block{margin-top:var(--s-8)}
/* Der Versatz unter die Kopfzeile kommt global aus scroll-padding-top. */
.faq-block h2{
  font-family:var(--ff-display);font-weight:400;
  font-size:var(--t-d3);line-height:1.1;letter-spacing:var(--ls-display);
  color:var(--ink);margin:0 0 var(--s-5);
}

/* ---------- eine Frage ---------- */
.faq-item{border-top:1px solid var(--paper-line)}
.faq-liste-fragen .faq-item:last-child{border-bottom:1px solid var(--paper-line)}

.faq-item summary{
  display:flex;align-items:flex-start;gap:var(--s-4);
  padding:var(--s-4) 0;cursor:pointer;
  list-style:none;                       /* Standarddreieck weg, eigener Pfeil unten */
  color:var(--ink);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--copper)}
.faq-item summary:focus-visible{outline-offset:-3px}

.faq-item__frage{
  flex:1;font-family:var(--ff-text);font-weight:600;
  font-size:var(--t-base);line-height:1.45;
  /* lange Fragen brechen um statt aus dem Kasten zu laufen */
  overflow-wrap:break-word;
}
.faq-item__zeichen{
  flex:none;width:1.25rem;height:1.25rem;margin-top:.15rem;
  color:var(--ink-quiet);
  transition:transform .25s var(--ease-out),color .2s var(--ease-out);
}
.faq-item[open] .faq-item__zeichen{transform:rotate(180deg);color:var(--copper)}
.faq-item summary:hover .faq-item__zeichen{color:var(--copper)}

.faq-item__antwort{padding:0 0 var(--s-5);max-width:68ch}
.faq-item__antwort > :first-child{margin-top:0}
.faq-item__antwort p{color:var(--ink-body);margin-block:var(--s-3)}
.faq-item__antwort > :last-child{margin-bottom:0}

/* ---------- Aufzaehlungen in Antworten ---------- */
.faq-liste{list-style:none;margin:var(--s-4) 0;padding:0}
.faq-liste li{
  position:relative;padding-left:var(--s-5);
  color:var(--ink-body);margin-block:var(--s-2);
}
.faq-liste li::before{
  content:'';position:absolute;left:0;top:.62em;
  width:.4rem;height:.4rem;border-radius:50%;background:var(--copper);
}
.on-coal .faq-liste li{color:var(--chalk-body)}
.on-coal .faq-liste li::before{background:var(--copper-warm)}

/* Der Projektablauf: sieben Schritte, nummeriert. */
.faq-schritte{list-style:none;counter-reset:schritt;margin:var(--s-5) 0;padding:0}
.faq-schritte li{
  counter-increment:schritt;position:relative;
  padding-left:var(--s-7);margin-block:var(--s-4);
}
.faq-schritte li::before{
  content:counter(schritt);position:absolute;left:0;top:0;
  width:1.75rem;height:1.75rem;border-radius:50%;
  display:grid;place-items:center;
  background:var(--copper-tint);color:var(--copper);
  font-size:var(--t-sm);font-weight:700;font-variant-numeric:tabular-nums;
}
.faq-schritte strong{display:block;color:var(--ink);margin-bottom:var(--s-1)}
.faq-schritte span{display:block;color:var(--ink-body)}

/* ---------- Abschluss ---------- */
.faq-frage-stellen{
  margin-top:var(--s-8);padding-top:var(--s-7);
  border-top:1px solid var(--paper-line);
}
.faq-frage-stellen h2{
  font-family:var(--ff-display);font-weight:400;
  font-size:var(--t-d3);line-height:1.1;letter-spacing:var(--ls-display);
  color:var(--ink);margin:0 0 var(--s-4);
}
.faq-frage-stellen p{color:var(--ink-body);max-width:68ch;margin-block:var(--s-3)}
.faq-beispiele__titel{font-weight:600;color:var(--ink)}
.faq-hinweis{
  margin-top:var(--s-5);padding:var(--s-4) var(--s-5);
  background:var(--paper-shade);border-radius:var(--s-2);
  font-size:var(--t-sm);color:var(--ink-body);
}

.faq-cta{
  margin-top:var(--s-8);padding:var(--s-7) var(--s-6);
  border-radius:var(--s-3);
}
.faq-cta h2{
  font-family:var(--ff-display);font-weight:400;
  font-size:var(--t-d3);line-height:1.1;letter-spacing:var(--ls-display);
  color:var(--chalk);margin:0 0 var(--s-4);
}
.faq-cta p{max-width:68ch;margin-block:var(--s-3)}
.faq-cta__aktion{margin-top:var(--s-6)}

/* ---------- Titelbild der FAQ-Seite ----------
   Volle Breite bis zum Shell-Mass, direkt unter dem Kopf. Das Bild
   traegt seinen Text selbst, deshalb keine Bildunterschrift. */
.faq-bild{margin:0;background:var(--coal)}
.faq-bild img{
  display:block;width:100%;height:auto;
  max-width:var(--shell);margin-inline:auto;
}

/* ---------- Kurzblock auf der Startseite ---------- */
.faq-kurz__kopf{max-width:60ch;margin-bottom:var(--s-6)}
.faq-kurz .faq-liste-fragen{max-width:60rem}
.faq-kurz__mehr{margin-top:var(--s-6)}

@media (prefers-reduced-motion:reduce){
  .faq-item__zeichen,.faq-nav a{transition:none}
}