/* ═══════════════════════════════════════════════════════════════════════════
   ENTWURF 2 — „Nachtschicht"
   Halbach Dach & Holz · Dachdeckerei, Zimmerei, Spenglerei

   Haltung: der Gegenentwurf zu „Werkbank". Nicht hell und kantig, sondern
   dunkel, warm und ruhig. Die Recherche zeigt es bei fast allen teuren
   Handwerksmarken: dunkel wirkt wertiger, weil das Foto zur Hauptsache wird
   und die Schrift zurücktritt. Statt eines Signalorange traegt hier ein
   Bronzeton — Metall, kein Warnzeichen.

   Der zweite Unterschied ist der Bau, nicht nur die Farbe:
     · Buehne = ganzflaechiges Foto mit Schrift darauf (V1 vermeidet das)
     · Leistungen = lange Liste mit mitlaufendem Bild (V1: Dreierraster)
     · Ablauf = senkrechte Zeitachse (V1: fuenf Spalten)
     · Objekte = Bildraster (V1: Tabelle)
     · Formular = nur Unterstriche (V1: Kaesten)

   Grundlage: Recherche-Protokoll „referenzen.md" (Handwerk), Stil B.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Marken-Kontrakt ──────────────────────────────────────────────────────── */
:root{
  /* Flaechen */
  --nacht:      #1B1D21;   /* Seitengrund                                     */
  --nacht-hoch: #232629;   /* abgesetzte Baender, Karten                      */
  --nacht-tief: #131518;   /* Fuss, Kopf beim Scrollen                        */

  /* Schrift. Alle Werte gegen --nacht gerechnet. */
  --hell:  #EDE9E2;        /* Ueberschriften                        (13,9:1)  */
  --text:  #B9B3A8;        /* Fliesstext                             (8,1:1)  */
  /* Die 4,7:1 galten gegen den dunkelsten Grund. Auf den etwas helleren
     Karten waren es nur noch 4,3:1 — und genau dort steht die kleine
     Schrift. Deshalb ein Ton heller, gemessen gegen alle drei Flaechen. */
  --leise: #9E998F;        /* Beschriftungen, Meta
                              (Grund 6,0:1 · Karte 5,4:1 · hell 4,8:1)     */

  /* Linien */
  --linie:       #2E3238;
  --linie-stark: #3C4149;
  --haar:1px solid #2E3238;

  /* Bronze. Auf --nacht 5,8:1 — reicht auch fuer Fliesstext.
     Auf Bronze steht immer dunkle Schrift (--nacht, 5,8:1). */
  --bronze:      #AC9376;
  --bronze-hell: #C9B292;
  --bronze-tief: #8A755C;

  /* Schriften. Zodiak ist eine kontrastreiche Serife mit Kante — sie gibt
     der Seite die Wuerde, die das Orange in V1 bewusst verweigert.
     General Sans daneben haelt sich vollstaendig heraus. */
  --display:'Zodiak', 'Iowan Old Style', Georgia, serif;
  --schrift:'General Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --zahl:ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --spalte:1260px;
  --tempo:.5s cubic-bezier(.2,.7,.3,1);
}

/* ── Grundlagen ───────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
*{margin:0; padding:0}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; background:var(--nacht)}
body{
  font-family:var(--schrift); font-size:17px; line-height:1.68;
  color:var(--text); background:var(--nacht);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img{display:block; max-width:100%; height:auto}
a{color:inherit}
h1,h2,h3,h4{
  font-family:var(--display); color:var(--hell);
  font-weight:400; line-height:1.1; letter-spacing:-.012em;
}
:focus-visible{outline:2px solid var(--bronze-hell); outline-offset:3px}

.wrap{width:min(100% - 44px, var(--spalte)); margin-inline:auto}
.nur-vorleser{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}

.rubrik{
  display:block; font-family:var(--zahl); font-size:.71rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--bronze);
}
.lead{font-size:clamp(1.06rem, 1.5vw, 1.22rem); color:var(--text)}
em{font-style:italic; color:var(--bronze-hell)}

/* ── Entwurfs-Band ────────────────────────────────────────────────────────── */
.entwurf-band{
  background:#0C0D0F; color:var(--text); font-size:.82rem;
  padding:9px 0; position:relative; z-index:60;
}
.entwurf-band .wrap{display:flex; flex-wrap:wrap; gap:6px 20px; align-items:center}
.entwurf-band b{color:var(--bronze-hell); font-weight:600}
.entwurf-band a{color:var(--text); margin-left:auto}
.entwurf-band a:hover{color:var(--hell)}

/* ── Kopf ─────────────────────────────────────────────────────────────────────
   Liegt zunaechst durchsichtig auf dem Buehnenfoto und wird erst beim
   Scrollen zur Flaeche. Das Foto soll ungestoert anfangen duerfen. */
.kopf{
  position:sticky; top:0; z-index:50;
  background:transparent; border-bottom:1px solid transparent;
  transition:background var(--tempo), border-color var(--tempo);
}
.kopf[data-gescrollt="1"]{
  background:rgba(19,21,24,.94); border-bottom-color:var(--linie);
  backdrop-filter:blur(9px);
}
.kopf .wrap{display:flex; align-items:center; gap:22px; min-height:78px}

.marke{display:flex; flex-direction:column; text-decoration:none; flex:none; line-height:1.16}
.marke b{font-family:var(--display); font-weight:400; font-size:1.34rem; color:var(--hell); letter-spacing:-.01em}
.marke span{
  font-family:var(--zahl); font-size:.62rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--bronze);
}

.menue{margin-left:auto; display:flex; gap:30px}
.menue a{
  text-decoration:none; font-size:.94rem; color:var(--text);
  padding:8px 0; position:relative; transition:color var(--tempo);
}
.menue a::after{
  content:""; position:absolute; left:0; right:0; bottom:2px; height:1px;
  background:var(--bronze); scale:0 1; transform-origin:left;
  transition:scale var(--tempo);
}
.menue a:hover{color:var(--hell)}
.menue a:hover::after{scale:1 1}

/* Knoepfe. Auf dunklem Grund ist die helle Flaeche der laute Knopf. */
.knopf{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--schrift); font-weight:600; font-size:.94rem;
  padding:14px 24px; text-decoration:none; border:0; cursor:pointer;
  background:var(--bronze); color:#17191C;
  transition:background var(--tempo), translate var(--tempo);
}
.knopf:hover{background:var(--bronze-hell); translate:0 -2px}
.knopf svg{width:18px; height:18px; fill:currentColor}
.knopf-linie{
  background:transparent; color:var(--hell);
  border:1px solid var(--linie-stark);
}
.knopf-linie:hover{background:transparent; border-color:var(--bronze); color:var(--bronze-hell)}
.kopf .knopf{flex:none; padding:12px 20px}

.burger{
  display:none; width:46px; height:46px; flex:none;
  background:transparent; border:1px solid var(--linie-stark); cursor:pointer;
  padding:0; position:relative;
}
.burger i{
  position:absolute; left:12px; right:12px; height:1px; background:var(--hell);
  transition:translate var(--tempo), rotate var(--tempo), opacity var(--tempo);
}
.burger i:nth-child(1){top:16px}
.burger i:nth-child(2){top:22px}
.burger i:nth-child(3){top:28px}
.burger[aria-expanded="true"] i:nth-child(1){translate:0 6px; rotate:45deg}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){translate:0 -6px; rotate:-45deg}

/* ── Buehne ───────────────────────────────────────────────────────────────────
   Ganzflaechiges Foto, Schrift darauf. Der Schleier ist Pflicht, nicht Deko:
   ohne ihn haengt die Lesbarkeit davon ab, wie hell das Foto zufaellig an
   der Textstelle ist. Mit ihm sind es garantiert ueber 12:1. */
.buehne{
  position:relative; margin-top:-78px; overflow:clip;
  min-height:min(94vh, 860px); display:flex; align-items:flex-end;
}
.buehne > img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.buehne::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(19,21,24,.97) 6%, rgba(19,21,24,.72) 42%, rgba(19,21,24,.42) 100%),
    linear-gradient(to right, rgba(19,21,24,.8) 0%, rgba(19,21,24,.1) 62%);
}
.buehne .wrap{position:relative; z-index:1; padding:150px 0 clamp(44px, 5vw, 72px)}
.buehne h1{
  font-size:clamp(2.5rem, 6vw, 4.6rem); max-width:15ch; margin:20px 0 22px;
  letter-spacing:-.02em;
}
.buehne .lead{max-width:50ch; color:var(--hell); opacity:.9}
.buehne-tun{display:flex; flex-wrap:wrap; gap:14px; margin-top:32px}

/* Die vier belegbaren Zahlen sitzen hier direkt unter der Handlung —
   kein eigenes Band wie in V1. */
.buehne-zahlen{
  list-style:none; display:flex; flex-wrap:wrap; gap:14px 46px;
  margin-top:clamp(32px, 4vw, 52px); padding-top:26px;
  border-top:1px solid rgba(237,233,226,.18);
}
.buehne-zahlen b{
  display:block; font-family:var(--display); font-weight:400;
  font-size:1.7rem; color:var(--hell); line-height:1;
}
.buehne-zahlen span{display:block; margin-top:6px; font-size:.85rem; color:var(--leise)}

/* ── Abschnitts-Grundform ─────────────────────────────────────────────────── */
.block{padding:clamp(64px, 8vw, 128px) 0}
.block-hoch{background:var(--nacht-hoch)}
.block-kopf{max-width:58ch; margin-bottom:clamp(34px, 4.5vw, 58px)}
.block-kopf h2{font-size:clamp(2rem, 3.8vw, 3.1rem); margin:16px 0 18px}

/* ── Leistungen ───────────────────────────────────────────────────────────────
   Lange Liste statt Raster. Rechts laeuft ein einziges Materialfoto mit —
   es steht fuer alle sechs Gewerke, weil sie alle dasselbe Handwerk sind. */
.werke .wrap{
  display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.72fr);
  gap:clamp(34px, 5vw, 76px); align-items:start;
}
.werke-bild{position:sticky; top:120px; overflow:clip; aspect-ratio:3/4; background:var(--nacht-tief)}
.werke-bild img{width:100%; height:100%; object-fit:cover; opacity:.9}
.werke-bild figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:22px 20px 18px;
  background:linear-gradient(to top, rgba(19,21,24,.95), rgba(19,21,24,0));
  font-size:.84rem; color:var(--text);
}

.werke ol{list-style:none; counter-reset:werk}
.werke li{
  counter-increment:werk; border-top:var(--haar);
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 24px;
  padding:clamp(22px, 2.6vw, 30px) 0; position:relative;
  transition:padding-left var(--tempo);
}
.werke li:last-child{border-bottom:var(--haar)}
.werke li::before{
  content:counter(werk, decimal-leading-zero);
  grid-row:1 / span 2; font-family:var(--zahl); font-size:.78rem;
  color:var(--bronze); letter-spacing:.12em; padding-top:.45em;
}
.werke h3{font-size:clamp(1.3rem, 2vw, 1.6rem); font-weight:400}
.werke p{grid-column:2; font-size:.98rem; margin-top:8px; max-width:52ch}
.werke li:hover{padding-left:14px}
.werke li::after{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--bronze); scale:1 0; transform-origin:top;
  transition:scale var(--tempo);
}
.werke li:hover::after{scale:1 1}

/* ── Zitatstreifen ────────────────────────────────────────────────────────── */
.streifen{position:relative; overflow:clip; background:var(--nacht-tief)}
.streifen img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.7}
.streifen::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(95deg, rgba(19,21,24,.93) 0%, rgba(19,21,24,.74) 48%, rgba(19,21,24,.34) 100%);
}
.streifen .wrap{position:relative; z-index:1; padding:clamp(72px, 10vw, 148px) 0}
.streifen blockquote{
  font-family:var(--display); font-weight:400; font-style:italic;
  color:var(--hell); max-width:20ch;
  font-size:clamp(1.8rem, 4.2vw, 3.2rem); line-height:1.16;
}
.streifen cite{
  display:block; margin-top:26px; font-family:var(--zahl); font-style:normal;
  font-size:.76rem; letter-spacing:.2em; text-transform:uppercase; color:var(--bronze);
}

/* ── Ablauf als Zeitachse ─────────────────────────────────────────────────────
   Senkrecht statt in fuenf Spalten. Das liest sich als Reihenfolge und nicht
   als Auswahl — genau das soll es sein. */
.weg ol{list-style:none; counter-reset:schritt; max-width:820px; margin-inline:auto}
.weg li{
  counter-increment:schritt; position:relative;
  padding:0 0 clamp(30px, 4vw, 46px) clamp(52px, 6vw, 78px);
}
/* Die durchgehende Linie. Beim letzten Schritt hoert sie am Punkt auf. */
.weg li::before{
  content:""; position:absolute; left:15px; top:8px; bottom:0; width:1px;
  background:var(--linie-stark);
}
.weg li:last-child{padding-bottom:0}
.weg li:last-child::before{display:none}
.weg li::after{
  content:counter(schritt);
  position:absolute; left:0; top:0; width:31px; height:31px;
  display:grid; place-items:center; border-radius:50%;
  border:1px solid var(--bronze); background:var(--nacht);
  font-family:var(--zahl); font-size:.78rem; color:var(--bronze);
}
.weg.auf-hoch li::after{background:var(--nacht-hoch)}
.weg h3{font-size:1.3rem; font-weight:400; margin-bottom:8px}
.weg p{font-size:.98rem; max-width:56ch}

/* ── Notdienst ────────────────────────────────────────────────────────────── */
.not .wrap{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.88fr);
  gap:clamp(30px, 4vw, 62px); align-items:center;
}
.not-bild{overflow:clip; aspect-ratio:16/10; background:var(--nacht-hoch)}
.not-bild img{width:100%; height:100%; object-fit:cover}
.not h2{font-size:clamp(1.9rem, 3.4vw, 2.7rem); margin:16px 0 18px}
.not p + p{margin-top:16px}
.not small{display:block; font-size:.86rem; color:var(--leise); line-height:1.6}
.not-tun{display:flex; flex-wrap:wrap; gap:14px; margin-top:28px}

/* ── Objekte als Bildraster ───────────────────────────────────────────────── */
.galerie{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(16px, 2vw, 26px);
}
.galerie figure{position:relative; overflow:clip; background:var(--nacht-tief)}
.galerie img{
  width:100%; aspect-ratio:4/3; object-fit:cover; scale:1;
  transition:scale var(--tempo);
}
.galerie figure:hover img{scale:1.04}
/* Der Verlauf muss den GESAMTEN Schriftblock abdecken, nicht nur dessen Fuss.
   Deshalb bleibt er bis 62 % fast deckend und blendet erst darueber aus — die
   obere Polsterung ist genau die Strecke, auf der er weich wird. */
.galerie figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  padding:clamp(48px,6vw,70px) clamp(18px,2.4vw,26px) clamp(16px,2vw,22px);
  background:linear-gradient(to top,
              rgba(15,17,20,.96) 0%,
              rgba(15,17,20,.93) 62%,
              rgba(15,17,20,0)  100%);
}
.galerie b{
  display:block; font-family:var(--display); font-weight:400;
  font-size:1.16rem; color:var(--hell);
}
.galerie span{display:block; margin-top:5px; font-size:.9rem; color:var(--text)}
.galerie time{
  display:block; margin-top:8px; font-family:var(--zahl);
  font-size:.75rem; letter-spacing:.14em; color:var(--bronze);
}
.galerie-fuss{margin-top:26px; font-size:.92rem; color:var(--leise); max-width:62ch}

/* ── Person ───────────────────────────────────────────────────────────────── */
.person .wrap{
  display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1fr);
  gap:clamp(30px, 4.5vw, 68px); align-items:start;
}
.person-bild{position:relative; overflow:clip; aspect-ratio:3/4; background:var(--nacht-hoch)}
.person-bild img{width:100%; height:100%; object-fit:cover}
/* Bronzekante unten links — dasselbe Bauzeichen wie in V1, nur in Metall. */
.person-bild::after{
  content:""; position:absolute; left:0; bottom:0;
  width:clamp(64px, 10vw, 110px); height:6px; background:var(--bronze);
}
.person h2{font-size:clamp(1.9rem, 3.4vw, 2.7rem); margin:16px 0 20px}
.person p + p{margin-top:15px}
.person-belege{list-style:none; margin-top:30px; border-top:1px solid var(--linie-stark)}
.person-belege li{
  display:flex; gap:14px; align-items:flex-start;
  padding:14px 0; border-bottom:var(--haar); font-size:.95rem;
}
.person-belege svg{width:17px; height:17px; fill:var(--bronze); flex:none; margin-top:5px}

/* ── Fragen ───────────────────────────────────────────────────────────────────
   Plus/Minus statt Winkel — das passt zur ruhigeren Handschrift. */
/* Zweispaltig wie die Leistungen: Ueberschrift bleibt stehen, die Antworten
   laufen daran vorbei. Einspaltig blieb rechts eine leere halbe Seite. */
.fragen-raster{
  display:grid; grid-template-columns:minmax(0,.74fr) minmax(0,1fr);
  gap:clamp(34px, 5vw, 76px); align-items:start;
}
.fragen-raster .block-kopf{position:sticky; top:120px; margin-bottom:0; max-width:36ch}
.fragen-raster .block-kopf p{margin-top:6px; color:var(--leise); font-size:.96rem}
.fragen{max-width:none}
.fragen details{border-bottom:var(--haar)}
.fragen details:first-of-type{border-top:1px solid var(--linie-stark)}
.fragen summary{
  cursor:pointer; list-style:none; padding:22px 48px 22px 0; position:relative;
  font-family:var(--display); font-weight:400; font-size:1.16rem; color:var(--hell);
  transition:color var(--tempo);
}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::before,
.fragen summary::after{
  content:""; position:absolute; right:8px; top:50%;
  background:var(--bronze); transition:rotate var(--tempo), opacity var(--tempo);
}
.fragen summary::before{width:14px; height:1px; translate:0 -50%}
.fragen summary::after{width:1px; height:14px; right:14px; translate:0 -50%}
.fragen details[open] summary::after{rotate:90deg; opacity:0}
.fragen summary:hover{color:var(--bronze-hell)}
.fragen .antwort{padding:0 48px 24px 0; font-size:.98rem}
.fragen .antwort p + p{margin-top:13px}

/* ── Kontakt ──────────────────────────────────────────────────────────────────
   Nur Unterstriche, keine Kaesten. Auf dunklem Grund wirken Kaesten schwer;
   die Linie reicht, solange sie kraeftig genug ist. */
.kontakt .wrap{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.8fr);
  gap:clamp(34px, 5vw, 76px); align-items:start;
}
.feld{margin-bottom:26px}
.feld label{
  display:block; font-family:var(--zahl); font-size:.7rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--bronze); margin-bottom:9px;
}
/* Die Felder haben nur einen Strich unten, keinen Kasten — das passt zum
   nuechternen Ton dieses Entwurfs. Dann muss dieser eine Strich aber deutlich
   sichtbar sein, denn er ist das Einzige, woran man das Feld erkennt.
   --linie-stark waere dafuer zu dunkel (1,6:1); dieser Grauton liegt bei
   3,3:1 auf beiden dunklen Flaechen, auf denen das Formular vorkommt. */
.feld input,.feld select,.feld textarea{
  width:100%; font-family:inherit; font-size:1.02rem; color:var(--hell);
  background:transparent; border:0; border-bottom:1px solid #6F757D;
  border-radius:0; padding:9px 2px; transition:border-color var(--tempo);
}
.feld textarea{min-height:104px; resize:vertical; line-height:1.6}
.feld ::placeholder{color:var(--leise); opacity:1}
.feld input:focus,.feld select:focus,.feld textarea:focus{
  border-bottom-color:var(--bronze); border-bottom-width:2px;
  padding-bottom:8px;
}
/* Beim Tastatur-Sprung durchs Formular muss man sehen, wo man gelandet ist.
   Ein Strich, der nur die Farbe wechselt, reicht dafuer nicht — deshalb kommt
   hier zusaetzlich der Umriss dazu. Mit der Maus bleibt es beim Strich. */
.feld input:focus-visible,.feld select:focus-visible,.feld textarea:focus-visible{
  outline:2px solid var(--bronze); outline-offset:3px;
}
/* Das Auswahlfeld erbt auf dunklem Grund sonst weisses Systemweiss. */
.feld select option{background:var(--nacht-hoch); color:var(--hell)}
.feld-paar{display:grid; grid-template-columns:1fr 1fr; gap:0 26px}
.form-fuss{margin-top:18px; font-size:.86rem; color:var(--leise); line-height:1.6}
.form-fuss a{color:var(--bronze-hell)}
.formular .knopf{margin-top:8px}

.kontakt-daten{border:var(--haar); padding:clamp(26px, 3vw, 36px); background:var(--nacht-hoch)}
.block-hoch .kontakt-daten{background:var(--nacht)}
.kontakt-daten h3{font-size:1.3rem; font-weight:400; margin:14px 0 20px}
.kontakt-liste{list-style:none}
.kontakt-liste li{display:flex; gap:15px; padding:16px 0; border-top:var(--haar); align-items:flex-start}
.kontakt-liste li:first-child{border-top:0}
.kontakt-liste svg{width:19px; height:19px; fill:var(--bronze); flex:none; margin-top:4px}
.kontakt-liste b{display:block; color:var(--hell); font-weight:600; font-size:1rem}
.kontakt-liste a{color:var(--hell); text-decoration:none; border-bottom:1px solid var(--linie-stark)}
.kontakt-liste a:hover{border-bottom-color:var(--bronze)}
.kontakt-liste small{display:block; font-size:.86rem; color:var(--leise); margin-top:4px}

/* ── Fuss ─────────────────────────────────────────────────────────────────── */
.fuss{background:var(--nacht-tief); border-top:var(--haar); padding:clamp(52px, 6vw, 80px) 0 0}
.fuss-oben{
  display:grid; grid-template-columns:minmax(0,1.5fr) repeat(2, minmax(0,1fr));
  gap:clamp(26px, 3vw, 52px); padding-bottom:clamp(36px, 4vw, 54px);
}
.fuss h3{
  font-family:var(--zahl); font-weight:400; font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--bronze); margin-bottom:16px;
}
.fuss p{font-size:.93rem; max-width:42ch}
.fuss ul{list-style:none; font-size:.93rem}
.fuss li{margin-bottom:10px}
.fuss a{text-decoration:none; transition:color var(--tempo)}
.fuss a:hover{color:var(--hell)}
.fuss-marke b{
  font-family:var(--display); font-weight:400; color:var(--hell);
  font-size:1.4rem; display:block; margin-bottom:14px;
}
.fuss-unten{
  border-top:var(--haar); padding:22px 0; font-size:.84rem; color:var(--leise);
  display:flex; flex-wrap:wrap; gap:8px 26px; justify-content:space-between;
}

/* ── Notdienst-Pille (nur Rechner) ────────────────────────────────────────────
   V1 stellt die Notfallzeile ganz nach oben. Hier bleibt der Kopf ruhig und
   der Notdienst sitzt unten rechts — dieselbe Erreichbarkeit, andere Lautstaerke. */
.notpille{
  position:fixed; right:22px; bottom:22px; z-index:70;
  display:inline-flex; align-items:center; gap:11px;
  background:var(--bronze); color:#17191C; text-decoration:none;
  font-weight:600; font-size:.92rem; padding:14px 20px;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  transition:background var(--tempo), translate var(--tempo);
}
.notpille:hover{background:var(--bronze-hell); translate:0 -2px}
.notpille svg{width:18px; height:18px; fill:currentColor}

/* ── Daumenleiste (nur Handy) ─────────────────────────────────────────────── */
.daumen{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:70;
  background:rgba(19,21,24,.97); border-top:1px solid var(--linie-stark);
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  gap:10px; backdrop-filter:blur(9px);
}
.daumen a{flex:1; padding:14px 8px; font-size:.94rem}

/* ── Sanftes Einblenden ───────────────────────────────────────────────────── */
html.js .zeig{opacity:0; translate:0 20px}
html.js .zeig[data-da="1"]{
  opacity:1; translate:0 0;
  transition:opacity .6s ease calc(var(--i, 0) * 75ms),
             translate .6s cubic-bezier(.2,.7,.3,1) calc(var(--i, 0) * 75ms);
}

/* ── Enger ────────────────────────────────────────────────────────────────── */
@media (max-width:1040px){
  .werke .wrap,.not .wrap,.person .wrap,.kontakt .wrap,
  .fragen-raster{grid-template-columns:1fr}
  .fragen-raster .block-kopf{position:relative; top:auto; max-width:58ch;
                             margin-bottom:clamp(28px,4vw,44px)}
  /* Das mitlaufende Bild wird zur Kopfzeile des Abschnitts. */
  .werke-bild{position:relative; top:auto; aspect-ratio:16/9; order:-1; margin-bottom:8px}
  .person-bild{aspect-ratio:4/3; max-width:440px}
  .not-bild{order:-1}
  .fuss-oben{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .burger{display:block; margin-left:auto}
  .kopf .knopf{display:none}
  /* Die Klappliste soll von Rand zu Rand laufen, nicht als Kaertchen im Foto
     schweben. Deshalb wird .wrap hier NICHT zum Bezugsrahmen — der bleibt der
     Kopf selbst, und der ist so breit wie der Bildschirm. */
  .menue{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; gap:0; background:var(--nacht-tief);
    border-bottom:1px solid var(--linie-stark);
    padding:6px clamp(22px, 6vw, 30px) 20px;
    box-shadow:0 22px 40px rgba(0,0,0,.45);
    display:none;
  }
  .menue[data-offen="1"]{display:flex}
  .menue a{padding:15px 0; border-bottom:var(--haar); font-size:1.04rem}
  .menue a:last-child{border-bottom:0}
  .menue a::after{display:none}
  .kopf .wrap{position:static}
  .buehne{min-height:auto}
  .buehne .wrap{padding:clamp(130px,26vw,190px) 0 clamp(40px,6vw,64px)}
}
@media (max-width:720px){
  body{font-size:16px; padding-bottom:80px}
  .daumen{display:flex}
  .notpille{display:none}
  .galerie{grid-template-columns:1fr}
  .feld-paar{grid-template-columns:1fr}
  .fuss-oben{grid-template-columns:1fr}
  .entwurf-band a{margin-left:0}
  .buehne-zahlen{gap:16px 30px}
  .buehne-zahlen li{flex:1 1 40%}
}
@media (max-width:420px){
  .werke li{grid-template-columns:1fr}
  .werke li::before{grid-row:auto; padding-top:0; margin-bottom:2px}
  .werke p{grid-column:1}
  /* Der Hinweis „Beispielbetrieb" wird nicht ausgeblendet — er ist der Grund,
     warum die Seite ueberhaupt erfundene Zahlen zeigen darf. */
  .entwurf-band > .wrap > span{flex-basis:100%}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important; animation:none !important}
  html{scroll-behavior:auto}
  html.js .zeig{opacity:1; translate:none}
  .werke-bild,.fragen-raster .block-kopf{position:relative; top:auto}
}

/* ── Rechtstexte (Impressum, Datenschutz) ─────────────────────────────────
   Auf dunklem Grund wird ein langer Rechtstext schnell anstrengend. Deshalb
   hier eine Spur mehr Zeilenabstand als sonst und ein etwas hellerer
   Fliesstext — gelesen wird das am Stueck, nicht ueberflogen. */
.rechts-kopf{padding:clamp(44px, 5.2vw, 78px) 0 clamp(24px, 3vw, 38px)}
.rechts-kopf h1{font-size:clamp(2.2rem, 4.2vw, 3.2rem); margin-top:12px}
.rechts-kopf .lead{margin-top:16px; max-width:56ch}
/* Deutsche Rechtsbegriffe sind lang: „Datenschutzerklaerung",
   „Umsatzsteuer-Identifikationsnummer", „Verbraucherstreitbeilegungsgesetz".
   Auf einem 375px-Bildschirm passt so ein Wort in keine Zeile und wuerde sonst
   ueber den Rand hinausgeschoben — der Text waere abgeschnitten. hyphens trennt
   nach den Regeln der Sprache (lang="de" steht im html-Tag, sonst greift es
   nicht), overflow-wrap ist das Netz darunter fuer Browser ohne Trennmuster.
   Beides vererbt sich, die eine Regel auf dem Behaelter deckt alle Absaetze,
   Listen und Adressen darin ab. */
.rechts-kopf h1,.rechtstext{hyphens:auto; overflow-wrap:break-word}
.rechtstext{padding-bottom:clamp(54px, 6vw, 96px)}
.rechtstext p,.rechtstext ul,.rechtstext dl,.rechtstext address,.rechts-hinweis{
  max-width:68ch;
}
.rechtstext section{border-top:var(--haar); padding:32px 0 4px}
.rechtstext h2{font-size:clamp(1.3rem, 2.1vw, 1.7rem); margin-bottom:14px; color:var(--hell)}
.rechtstext h3{
  font-family:var(--schrift); font-size:1.02rem; font-weight:600;
  letter-spacing:0; margin:24px 0 8px; color:var(--hell);
}
.rechtstext p{color:var(--text); line-height:1.78; margin-bottom:14px}
.rechtstext p:last-child{margin-bottom:0}
.rechtstext ul{margin:0 0 14px; padding-left:0; list-style:none}
.rechtstext ul li{color:var(--text); padding-left:22px; position:relative; margin-bottom:8px}
.rechtstext ul li::before{
  content:""; position:absolute; left:3px; top:.62em;
  width:6px; height:6px; border-radius:50%; background:var(--bronze); opacity:.85;
}
.rechtstext dl{margin:0}
.rechtstext dt{font-weight:600; color:var(--hell); margin-top:16px}
.rechtstext dd{margin:3px 0 0; color:var(--text)}
.rechtstext address{font-style:normal; color:var(--text); line-height:1.9}
.rechtstext a{color:var(--bronze-hell)}
.rechts-hinweis{
  background:var(--nacht-hoch); border-left:3px solid var(--bronze);
  padding:20px 24px; margin:26px 0 32px;
}
.rechts-hinweis b{display:block; margin-bottom:6px; color:var(--hell)}
.rechts-hinweis p{font-size:.94rem; margin-bottom:0}
.zurueck{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  font-size:.94rem; color:var(--bronze-hell);
  border-bottom:1px solid var(--linie-stark); padding-bottom:4px; margin-top:38px;
  transition:border-color var(--tempo);
}
.zurueck:hover{border-bottom-color:var(--bronze)}