/* Werkstatt-Vorlage. Tokens nach Regelwerk Teil D.
   Pro Projekt nur den :root-Block anpassen: Markenfarbe (--brand und Ableitungen), Neutrale, Schriften.
   Eine Markenfarbe, kein zweiter Akzent (D.01). Neutrale getönt (D.02). Linien = Marke mit Transparenz (D.03).
   Drei Radien (D.06), Rand statt Schatten (D.07), zwei Schriften lokal (D.08, D.09). */
:root{
  /* Markenfarbe: das Grün der Kreise und Dreiecke auf der alten flow-Seite (#47704c). Einzige Farbe (D.01). */
  --brand-300:#a9c4a3;            /* hellste Stufe, nur auf dunklem Grund */
  --brand:#47704c;                /* Linien, Flächen, Fokusring */
  --brand-600:#47704c;            /* gleich --brand, für Fokusring und Entwurfsmarken */
  --brand-700:#3a5d3e;            /* Marke als Text auf hellem Grund */
  --brand-100:#e3ebdf;
  --brand-50:#f1f5ee;
  /* Neutrale aus der alten Seite: Olivgrau #444235 als Text, Creme #f7f4ed als Fläche. Getönt, nie rein (D.02, D.04) */
  --ink:#2f2e25;
  --ink-soft:#444235;
  --muted:#6a6858;
  --bg:#fdfcf8;
  --bg-soft:#f7f4ed;
  --dark:#2c2e25;
  --dark-2:#383a30;
  --on-dark:#f6f3ea;
  --on-dark-soft:#d9d6c8;
  --line:rgba(71,112,76,.22);
  --line-strong:rgba(71,112,76,.48);
  --line-dark:rgba(169,196,163,.26);
  /* Radien (D.06). Die alte Seite war eckig: Bilder, Buttons und Flächen bleiben eckig, siehe AENDERUNGEN.md */
  --r-card:0px; --r-pill:100px; --r-sm:0px;   /* eckig wie die alte Seite, Bruch D.06 benannt */
  --ease:cubic-bezier(.2,.7,.3,1);
  --wrap:1180px; --narrow:760px;
  --sp:clamp(4rem,9vw,7.5rem);
  --gut:clamp(1rem,4vw,1.75rem);
  --fs-body:clamp(1.02rem,.98rem + .22vw,1.12rem);
  --fs-small:clamp(.86rem,.84rem + .1vw,.93rem);
  --fs-eyebrow:clamp(.72rem,.7rem + .12vw,.8rem);
  --fs-lead:clamp(1.12rem,1.04rem + .4vw,1.3rem);
  --fs-h1:clamp(2.35rem,1.5rem + 3.6vw,4.3rem);
  --fs-h2:clamp(1.75rem,1.3rem + 1.9vw,2.75rem);
  --fs-h3:clamp(1.18rem,1.08rem + .5vw,1.45rem);
  --hdr-h:clamp(64px,8vw,80px);
}
@font-face{font-family:'Jost';src:url('fonts/jost-var.woff2') format('woff2-variations');
  font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/inter-var.woff2') format('woff2-variations');
  font-weight:100 900;font-style:normal;font-display:swap}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 20px)}
html,body{overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink-soft);font-family:'Inter',system-ui,sans-serif;
  font-size:var(--fs-body);line-height:1.68;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand-700);text-decoration-color:var(--line-strong);text-underline-offset:.2em}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--brand-600);outline-offset:3px}   /* D.19 */
strong{color:var(--ink);font-weight:600}
[hidden]{display:none!important}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--bg);padding:8px 14px;border-radius:var(--r-sm)}

h1,h2,h3{font-family:'Jost',system-ui,sans-serif;color:var(--ink);font-weight:400;margin:0 0 .5em;
  text-wrap:balance;letter-spacing:-.005em}
h1{font-size:var(--fs-h1);line-height:1.1}
h2{font-size:var(--fs-h2);line-height:1.16}
h3{font-size:var(--fs-h3);line-height:1.3}
h1 em,h2 em{font-style:italic;color:var(--brand-700)}
p{margin:0 0 1.1em;max-width:62ch;text-wrap:pretty}   /* D.11 */
.center p{margin-inline:auto}
.lead{font-size:var(--fs-lead);line-height:1.55;color:var(--ink-soft)}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.narrow{max-width:var(--narrow);margin-inline:auto;padding-inline:var(--gut)}
.sec{padding:var(--sp) 0}
.sec-soft{background:var(--bg-soft)}
.center{text-align:center}
.eyebrow{text-transform:uppercase;letter-spacing:.2em;font-size:var(--fs-eyebrow);font-weight:500;
  color:var(--brand-700);margin:0 0 1.1em}
.sec-head{margin-bottom:clamp(2rem,4vw,3.2rem)}
.sec-head .lead{margin-bottom:0}

/* Dunkle Flächen: Text ausdrücklich hell setzen (Falle 5) */
.sec-dark{background:var(--dark);color:var(--on-dark-soft)}
.sec-dark h2,.sec-dark h3,.sec-dark strong{color:var(--on-dark)}
.sec-dark p,.sec-dark li,.sec-dark .lead{color:var(--on-dark-soft)}
.sec-dark .eyebrow,.sec-dark h2 em{color:var(--brand-300)}
.sec-dark a:not(.btn){color:var(--brand-300)}
.sec-dark .cta-note,.sec-dark .msg,.sec-dark .check{color:var(--on-dark)}

/* Buttons: ein Aussehen, ein Ziel (T.07). Hover hebt 2 px (D.13) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;max-width:100%;
  background:var(--ink);color:var(--on-dark);padding:.95em 1.7em;border-radius:var(--r-pill);
  border:1px solid var(--ink);font:500 var(--fs-small)/1.2 'Inter',sans-serif;letter-spacing:.04em;
  cursor:pointer;text-decoration:none;transition:transform .25s var(--ease),background .25s var(--ease),color .25s var(--ease)}
.btn:hover{transform:translateY(-2px);background:var(--dark-2);color:var(--on-dark)}
.btn-hell{background:var(--brand-300);border-color:var(--brand-300);color:var(--dark)}
.btn-hell:hover{background:var(--brand-100);border-color:var(--brand-100);color:var(--dark)}
.btn-sm{padding:.7em 1.3em}
.cta{margin-top:clamp(1.6rem,3vw,2.2rem)}
.center .cta{display:flex;flex-direction:column;align-items:center}
.cta-note{font-size:var(--fs-small);color:var(--muted);margin:.8em 0 0}
.more{font-size:var(--fs-small);font-weight:500;letter-spacing:.04em;text-decoration:none}
.more::after{content:" →"}

/* Header */
.hdr{position:sticky;top:0;z-index:70;background:rgba(252,249,243,.94);
  backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--line)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  max-width:var(--wrap);margin-inline:auto;padding:.5rem var(--gut);min-height:var(--hdr-h)}
.hdr__logo{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);line-height:1.15}
.hdr__name{font-family:'Jost',sans-serif;font-style:italic;font-size:clamp(1.1rem,1rem + .5vw,1.35rem)}
.hdr__was{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--brand-700)}
.hdr__logo:hover{color:var(--ink)}
.nav{display:flex;align-items:center;gap:clamp(1rem,2.2vw,2rem)}
.nav a:not(.btn){color:var(--ink-soft);font-size:var(--fs-small);text-decoration:none;padding:.3em 0;
  border-bottom:1px solid transparent}
.nav a:not(.btn):hover{color:var(--ink)}
.nav a[aria-current=page]:not(.btn){color:var(--ink);border-bottom-color:var(--brand)}
.burger{display:none;background:none;border:0;padding:10px;cursor:pointer}
.burger span{display:block;width:22px;height:1.5px;background:var(--ink);margin:5px 0}

/* Hero: Foto vollflächig, Text unten links. object-position je Bild messen (Falle 6) */
.hero{position:relative;isolation:isolate;min-height:clamp(560px,86vh,860px);display:flex;align-items:flex-end;
  color:var(--on-dark);background:var(--dark)}
.hero__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:62% 30%}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(35,28,22,.05) 20%,rgba(35,28,22,.55) 60%,rgba(35,28,22,.9) 100%),
             linear-gradient(90deg,rgba(35,28,22,.55),rgba(35,28,22,0) 60%)}
.hero .wrap{width:100%;padding-bottom:clamp(3rem,7vw,5.5rem)}
.hero .lead{color:var(--on-dark);max-width:44ch;margin-top:1.4rem}
.hero .cta-note{color:var(--on-dark-soft)}

/* Kopf der Unterseiten: Titel neben Bild */
.kopf{padding:clamp(2.6rem,6vw,5rem) 0 var(--sp)}
.kopf__g{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.kopf__t{position:relative}
.kopf .kopf h1{position:relative}
.kopf__img img{border-radius:var(--r-card);width:100%;aspect-ratio:4/5;object-fit:cover}

/* Band in Markenfarbe, für Kernsätze */
.band{position:relative;isolation:isolate;background:var(--brand-100);color:var(--dark);
  padding:clamp(3.4rem,7vw,5.5rem) 0}
.band__t{font-family:'Jost',sans-serif;font-size:clamp(1.45rem,1.1rem + 1.6vw,2.2rem);line-height:1.35;
  color:var(--dark);margin:0 auto;max-width:34ch;text-align:center;text-wrap:balance}
.band__w{display:block;margin-top:1.1em;font-family:'Inter',sans-serif;font-size:var(--fs-eyebrow);
  letter-spacing:.2em;text-transform:uppercase;color:var(--dark)}

/* Karten: Rand statt Schatten, Hover hebt 3 px (D.07, D.13) */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.4vw,1.6rem)}
.cards--2{grid-template-columns:repeat(2,1fr)}
.card{position:relative;display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--r-card);overflow:hidden;transition:transform .3s var(--ease),border-color .3s var(--ease)}
.card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.card__b{padding:clamp(1.3rem,2.4vw,1.8rem);display:flex;flex-direction:column;flex:1}
.card h3{margin-bottom:.45em}
.card p{font-size:var(--fs-small);margin-bottom:0}
.card .zitat{font-family:'Jost',sans-serif;font-style:italic;font-size:1.05rem;line-height:1.5;color:var(--ink-soft)}
.card .more{margin-top:auto;padding-top:1.2em}
.card__l{color:inherit;text-decoration:none}
.card__l::after{content:"";position:absolute;inset:0}
.card__l:focus-visible{outline:none}
.card:has(.card__l:focus-visible){outline:2px solid var(--brand);outline-offset:3px}
.card:has(.card__l:hover),.card.rv.in:has(.card__l:hover){transform:translateY(-3px);border-color:var(--line-strong)}  /* D.15 */
.card__m{font-size:var(--fs-eyebrow);letter-spacing:.16em;text-transform:uppercase;color:var(--brand-700);margin:0 0 .7em;font-weight:500}

/* Split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.split--rev>:first-child{order:2}
.split--top{align-items:start}
.split img{border-radius:var(--r-card);width:100%}
.img-hoch{aspect-ratio:4/5;object-fit:cover}
.img-quer{aspect-ratio:3/2;object-fit:cover}

/* Listen */
.tick{list-style:none;padding:0;margin:0 0 1.2em}
.tick li{padding:.42em 0 .42em 1.7em;position:relative;border-bottom:1px solid var(--line)}
.tick li:last-child{border-bottom:0}
.tick li::before{content:"";position:absolute;left:0;top:1.12em;width:.8em;height:1px;background:var(--brand)}
.cols{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.6rem,4vw,3.4rem)}
.cols h3{padding-bottom:.55em;border-bottom:1px solid var(--line-strong)}

/* Ablauf */
.steps{list-style:none;counter-reset:s;padding:0;margin:0;display:grid;gap:clamp(1.4rem,3vw,2rem)}
.steps li{counter-increment:s;padding-left:clamp(3.2rem,6vw,4rem);position:relative}
.steps li::before{content:counter(s);position:absolute;left:0;top:-.1em;width:2.5rem;height:2.5rem;border-radius:var(--r-pill);
  border:1px solid var(--line-strong);display:grid;place-items:center;font-family:'Jost',sans-serif;color:var(--brand-700);background:var(--brand-50)}
.steps h3{margin-bottom:.3em}
.steps p{margin-bottom:.4em}
.sec-dark .steps li::before{background:transparent;border-color:var(--line-dark);color:var(--brand-300)}

/* Preise */
.preise{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,2.4vw,1.6rem)}
.preis{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(1.4rem,3vw,2rem);display:flex;flex-direction:column}
.preis h3{margin-bottom:.4em}
.preis p{font-size:var(--fs-small)}
.preis__b{margin-top:auto;padding-top:1rem;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap}
.preis__p{font-family:'Jost',sans-serif;font-size:clamp(1.35rem,1.2rem + .6vw,1.7rem);color:var(--ink)}
.preis__d{font-size:var(--fs-small);color:var(--muted)}

/* Fakten-Tafel */
.fakten{background:var(--brand-50);border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(1.4rem,3vw,2.2rem)}
.fakten dl{display:grid;gap:.9rem;margin:0}
.fakten dl>div{display:grid;grid-template-columns:8.5rem 1fr;gap:1rem;padding-bottom:.9rem;border-bottom:1px solid var(--line)}
.fakten dl>div:last-child{border-bottom:0;padding-bottom:0}
.fakten dt{font-size:var(--fs-eyebrow);letter-spacing:.16em;text-transform:uppercase;color:var(--brand-700);font-weight:500;padding-top:.3em}
.fakten dd{margin:0;color:var(--ink)}

/* Aufklapper, fünf Ausbildungstage */
.tage{border-top:1px solid var(--line-strong)}
.tag{border-bottom:1px solid var(--line-strong)}
.tag summary{cursor:pointer;list-style:none;display:grid;grid-template-columns:3rem 1fr 1.5rem;align-items:center;gap:1rem;
  padding:1.2rem 0;font-family:'Jost',sans-serif;font-size:var(--fs-h3);color:var(--ink)}
.tag summary::-webkit-details-marker{display:none}
.tag__n{font-style:italic;color:var(--brand-700);font-size:1.6em;line-height:1}
.tag summary::after{content:"";width:.5rem;height:.5rem;border-right:1.5px solid var(--brand);border-bottom:1.5px solid var(--brand);
  transform:rotate(45deg);justify-self:center;transition:transform .3s var(--ease)}
.tag[open] summary::after{transform:rotate(-135deg)}
.tag .tick{padding-left:4rem;margin-bottom:1.4rem}

/* Stimmen, Masonry */
.voices{columns:3;column-gap:clamp(1rem,2.4vw,1.6rem)}
.voices--2{columns:2}
.voices>*{break-inside:avoid;margin:0 0 clamp(1rem,2.4vw,1.6rem)}
.voice{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(1.3rem,2.6vw,1.8rem);
  transition:transform .3s var(--ease),border-color .3s var(--ease)}
.voice blockquote{margin:0}
.voice blockquote p{font-size:var(--fs-small);line-height:1.68;margin-bottom:.9em}
.voice blockquote p:last-child{margin-bottom:0}
.voice--gross blockquote p{font-family:'Jost',sans-serif;font-size:clamp(1.25rem,1.1rem + .6vw,1.55rem);line-height:1.4;color:var(--ink)}
.voice__w{display:flex;align-items:center;gap:.8rem;margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--line)}
.voice__mono{width:2.6rem;height:2.6rem;flex:0 0 2.6rem;border-radius:var(--r-pill);display:grid;place-items:center;
  background:var(--brand-50);border:1px solid var(--line-strong);color:var(--brand-700);font-family:'Jost',sans-serif;font-size:1.15rem}
.voice__n{display:block;color:var(--ink);font-weight:500;font-size:var(--fs-small);line-height:1.3}
.voice__r{font-size:.82rem;color:var(--muted)}
.voice:hover,.voice.rv.in:hover{transform:translateY(-3px);border-color:var(--line-strong)}

/* Zitat Mandela */
.quote{margin:0 auto;max-width:40ch;text-align:center}
.quote p{font-family:'Jost',sans-serif;font-style:italic;font-size:clamp(1.3rem,1.1rem + 1vw,1.8rem);line-height:1.45;color:var(--on-dark);max-width:none}
.quote footer{font-size:var(--fs-eyebrow);letter-spacing:.2em;text-transform:uppercase;color:var(--brand-300)}



/* Formular */
.form{display:grid;gap:1.1rem}
.field label{display:block;font-size:var(--fs-small);color:var(--ink);margin-bottom:.4rem;font-weight:500}
.field input,.field textarea,.field select{width:100%;padding:.85em 1em;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  background:var(--bg);font:inherit;color:var(--ink)}
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{border-color:var(--brand)}
.field textarea{min-height:9rem;resize:vertical}
.check{display:flex;gap:.7rem;align-items:flex-start;font-size:var(--fs-small)}
.check input{margin-top:.35em;accent-color:var(--brand-700)}
.falle{position:absolute;left:-9999px}
.msg{font-size:var(--fs-small);min-height:1.4em;color:var(--brand-700);margin:0}
.kbox{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(1.4rem,3vw,2.2rem)}

/* Rechtstexte */
.legal h2{font-size:1.5rem;margin-top:1.8em}
.legal h3{font-size:1.15rem;margin-top:1.4em}
.legal p,.legal li{font-size:var(--fs-small)}

/* Footer */
.ftr{background:var(--dark);color:var(--on-dark-soft);padding:clamp(3rem,6vw,4.5rem) 0 1.6rem;font-size:var(--fs-small)}
.ftr a{color:var(--on-dark);text-decoration:none}
.ftr a:hover{color:var(--brand-300)}
.ftr h2{font-family:'Inter',sans-serif;font-size:var(--fs-eyebrow);letter-spacing:.2em;text-transform:uppercase;color:var(--brand-300);font-weight:500;margin-bottom:1rem}
.ftr__g{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2.4rem}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li{margin-bottom:.5rem}
.ftr__brand{font-family:'Jost',sans-serif;font-style:italic;font-size:1.5rem;color:var(--brand-300);margin-bottom:.6rem}
.ftr p{color:var(--on-dark-soft)}
.ftr__bar{border-top:1px solid var(--line-dark);margin-top:2.6rem;padding-top:1.3rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

/* Entwurfsmarken. Werkzeug für die Abstimmung, fällt mit ENTWURF = False weg */
.ew-leiste{background:var(--brand-100);color:var(--ink);font-size:var(--fs-small);padding:.55rem 0;border-bottom:1px dashed var(--brand-600)}
.draft .entwurf{position:relative;outline:1.5px dashed var(--brand-600);outline-offset:.7rem;border-radius:var(--r-sm)}
.draft .ew{outline:1.5px dashed var(--brand-600);outline-offset:2px;border-radius:4px;padding:0 .15em}
.ew-tag{display:none}
.draft .ew-tag{display:inline-block;font:500 .66rem/1 'Inter',sans-serif;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);background:var(--brand-100);border:1px solid var(--brand);border-radius:var(--r-pill);padding:.4em .8em;margin-bottom:.9rem}
.draft .entwurf>.ew-tag{position:absolute;top:-1.05rem;right:.4rem;margin:0}
.draft .voice.entwurf,.draft .preis.entwurf{outline:1.5px dashed var(--brand-600);outline-offset:-1px;border-color:transparent}
.draft .voice.entwurf>.ew-tag,.draft .preis.entwurf>.ew-tag{position:static;align-self:flex-start}   /* im Spaltenfluss nicht absolut, sonst springt das Etikett in die Nachbarspalte */

/* Einblenden aus sichtbarem Ruhezustand, nur Bewegung, nie opacity:0 (D.14) */
.rv{transform:translateY(12px);transition:transform .8s var(--ease),border-color .3s var(--ease)}
.rv.in{transform:none}

/* ================================================================ Projekt flow
   Nähe zur alten flow-Seite: Versal-Überschrift in Jost, gesperrte Kleinzeilen, eckige Flächen,
   Button mit kräftigem Unterstrich, Foto-Raster im Kopf, Schritte mit Linie darüber. */
h1{font-weight:500;text-transform:uppercase;letter-spacing:.01em;line-height:1.04}
h2{font-weight:500;letter-spacing:-.005em}
h3{font-weight:500}
h1 em,h2 em{font-style:normal;color:var(--brand-700)}
.eyebrow{color:var(--ink-soft);letter-spacing:.26em;font-weight:500}
.sec-white{background:var(--bg)}
.hdr{background:rgba(247,244,237,.95)}
.hdr__name{font-family:'Jost',sans-serif;font-style:normal;font-weight:500;text-transform:uppercase;letter-spacing:.2em;font-size:clamp(.95rem,.9rem + .3vw,1.1rem)}
.hdr__was{color:var(--muted);letter-spacing:.22em}
.nav a:not(.btn){text-transform:uppercase;letter-spacing:.14em;font-size:.76rem}
.btn{text-transform:uppercase;letter-spacing:.14em;font-weight:600;font-size:clamp(.84rem,.8rem + .15vw,.92rem);border-radius:0;
  border:0;border-bottom:4px solid var(--brand);padding:1.25em 2.3em 1.1em}
.btn:hover{background:var(--dark-2)}
.btn-hell{background:var(--on-dark);color:var(--ink);border-bottom-color:var(--brand-300)}
.btn-hell:hover{background:var(--brand-100);color:var(--ink)}
.btn-sm{padding:.85em 1.3em;font-size:.72rem}
.cta{margin-top:clamp(2.2rem,4vw,3rem)}
.ftr__brand{font-family:'Jost',sans-serif;font-style:normal;text-transform:uppercase;letter-spacing:.16em;font-size:1.2rem;color:var(--on-dark)}

/* Kopf der Startseite: Text links, Foto-Raster rechts */
.start{padding:clamp(2.2rem,5vw,4.5rem) 0 var(--sp);background:var(--bg-soft)}
.start__g{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.start .lead{max-width:40ch}
.raster{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:clamp(110px,13vw,178px);gap:6px}
.raster img{width:100%;height:100%;object-fit:cover}
.raster .r-hoch{grid-row:span 2}
.raster .r-breit{grid-column:span 2}
.raster--fotos{grid-auto-rows:clamp(120px,13vw,190px)}

/* Kernsatz in großer Schrift */
.kernsatz{font-family:'Jost',sans-serif;font-weight:500;font-size:clamp(1.45rem,1.05rem + 1.8vw,2.35rem);line-height:1.3;
  color:var(--ink);max-width:30ch;margin:0 auto;text-align:center;text-wrap:balance}
.kernsatz__w{display:block;margin-top:1.2rem;font-family:'Inter',sans-serif;font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-soft)}
.sec-dark .kernsatz{color:var(--on-dark)}
.sec-dark .kernsatz__w{color:var(--brand-300)}

/* Der Webseiten-Flow: vier Schritte mit kräftiger Linie darüber, wie der Ablauf der alten Seite */
.flowliste{list-style:none;counter-reset:f;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.4rem,3vw,2.4rem)}
.flowliste li{counter-increment:f;border-top:3px solid var(--ink);padding-top:1.1rem}
.flowliste li::before{content:counter(f);display:block;font-size:var(--fs-small);color:var(--brand-700);font-weight:600;margin-bottom:.6rem}
.flowliste h3{font-size:clamp(1.3rem,1.15rem + .7vw,1.7rem);margin-bottom:.4em}
.flowliste p{font-size:var(--fs-small);margin-bottom:.6em}
.flowliste .dauer{font-size:var(--fs-eyebrow);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0}

/* Split mit Bildunterschrift */
.bild figcaption{font-size:.82rem;color:var(--muted);margin-top:.6rem}

/* Preise, drei nebeneinander */
.preise--3{grid-template-columns:repeat(3,1fr)}
.preis--haupt{border:2px solid var(--brand-600);background:var(--brand-50)}
.preis__k{font-size:var(--fs-eyebrow);letter-spacing:.2em;text-transform:uppercase;color:var(--brand-700);font-weight:600;margin:0 0 .8rem}
.preis .tick{margin:0 0 1rem}
.preis .tick li{font-size:var(--fs-small);padding:.34em 0 .34em 1.5em}
.preis .tick li::before{top:1.02em}
.hinweis{font-size:var(--fs-small);color:var(--muted);margin-top:1.4rem}

/* Portfolio: Websites mit Etikett zur Bauweise, Fotos mit Namen */
.werke{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.6vw,2rem)}
.werk{position:relative;display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line);
  transition:transform .3s var(--ease),border-color .3s var(--ease)}
.werk img{width:100%;aspect-ratio:8/5;object-fit:cover;object-position:top;border-bottom:1px solid var(--line)}
.werk__b{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;gap:.35rem;flex:1}
.werk h3{font-size:1.15rem;margin:0}
.werk p{font-size:var(--fs-small);margin:0;color:var(--muted)}
.werk__bau{align-self:flex-start;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  padding:.35em .8em;border-radius:var(--r-pill);border:1px solid var(--line-strong);color:var(--ink-soft);margin-bottom:.3rem}
.werk__bau--neu{background:var(--brand);border-color:var(--brand);color:var(--on-dark)}
.werk a.werk__l{margin-top:auto;padding-top:.5rem;font-size:var(--fs-small);font-weight:500;text-decoration:none}
.werk a.werk__l::after{content:" →"}
.werk:hover,.werk.rv.in:hover{transform:translateY(-3px);border-color:var(--line-strong)}   /* D.13, D.15 */
.fotos{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.fotos figure{margin:0;position:relative}
.fotos img{width:100%;aspect-ratio:3/2;object-fit:cover}
.fotos figcaption{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:.55rem 0 1rem}

/* Galerie der Fotoserien: erstes Bild breit, dann zwei Spalten im Fluss, jedes Bild behält sein Format.
   Klick öffnet groß (site.js) */
.galerie{columns:2;column-gap:6px}
.galerie a{display:block;overflow:hidden;cursor:zoom-in;break-inside:avoid;margin-bottom:6px}
.galerie a:first-child{column-span:all}
.galerie img{width:100%;height:auto;transition:transform .6s var(--ease)}
.galerie a:hover img{transform:scale(1.02)}
.leuchte{border:0;padding:0;background:transparent;max-width:min(94vw,1400px);max-height:94vh}
.leuchte::backdrop{background:rgba(44,46,37,.9)}
.leuchte img{max-width:min(94vw,1400px);max-height:94vh;width:auto;height:auto;cursor:zoom-out}
.fotos a{color:inherit;text-decoration:none}
.fotos a:hover figcaption{color:var(--ink)}
.fotos__mehr::after{content:" · Serie ansehen →";color:var(--brand-700)}

/* Häufige Fragen */
.faq{border-top:1px solid var(--line-strong)}
.faq details{border-bottom:1px solid var(--line-strong)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:1.15rem 0;font-family:'Jost',sans-serif;font-size:var(--fs-h3);color:var(--ink);font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:0 0 .55rem;height:.55rem;border-right:2px solid var(--brand);border-bottom:2px solid var(--brand);
  transform:rotate(45deg);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details>div{padding:0 0 1.3rem}

/* Kontaktdaten */
.kdaten{list-style:none;padding:0;margin:1.4rem 0 0}
.kdaten li{padding:.5rem 0;border-bottom:1px solid var(--line)}
.kdaten span{display:block;font-size:var(--fs-eyebrow);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

/* Stimmen mit Porträt statt Anfangsbuchstabe */
.voice__img{width:3rem;height:3rem;flex:0 0 3rem;border-radius:var(--r-pill);object-fit:cover;border:1px solid var(--line)}

@media(max-width:980px){
  .start__g{grid-template-columns:1fr}
  .flowliste,.werke,.preise--3,.fotos{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  .flowliste,.werke,.preise--3{grid-template-columns:1fr}
  .galerie{columns:1}
  .raster{grid-auto-rows:clamp(92px,24vw,140px)}
}
@media(prefers-reduced-motion:reduce){
  .werk:hover,.werk.rv.in:hover,.galerie a:hover img{transform:none!important}
}

@media(max-width:980px){
  .cards{grid-template-columns:1fr 1fr}
  .voices{columns:2}
  .kopf__g,.split{grid-template-columns:1fr}
  .split--rev>:first-child{order:0}
  .kopf__img{max-width:480px}
  .nav{position:fixed;inset:var(--hdr-h) 0 auto;flex-direction:column;align-items:stretch;background:var(--bg);
    padding:1.4rem var(--gut) 2rem;gap:1rem;border-bottom:1px solid var(--line);display:none}
  .nav.open{display:flex}
  .nav .btn{justify-content:center}
  .burger{display:block}
}
@media(max-width:680px){
  .cards,.cards--2,.preise,.cols{grid-template-columns:1fr}
  .voices,.voices--2{columns:1}
  .ftr__g{grid-template-columns:1fr}
  .fakten dl>div{grid-template-columns:1fr;gap:.2rem}
  .tag .tick{padding-left:0}
    }
@media(prefers-reduced-motion:reduce){   /* D.16 */
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .rv,.rv.in,.card:has(.card__l:hover),.voice:hover,.btn:hover{transform:none!important}
}