/* ═══════════════════════════════════════════════════════════════════════════
   Halbach Dach & Holz — Entwurf 3 · „Familienbetrieb"

   Die These: warmes Papier statt Weiss, Messing statt Signalfarbe, und ein
   HARTER Versatz-Schatten statt Weichzeichner. Nichts schwebt, alles liegt
   auf — wie ein gestempeltes Formular auf dem Schreibtisch. Das ist der
   Ton eines Betriebs, den es seit 1998 gibt.

   Was diesen Entwurf BAULICH von den anderen unterscheidet — nicht nur farblich:
   · Buehne     = zwei versetzte Fotos uebereinander (V1: eins, V2: ganzflaechig)
   · Leistungen = breite Zeilen mit eigener Textspalte (V1: Dreierraster,
                  V2: Liste mit mitlaufendem Bild)
   · Ablauf     = fuenf Karten mit hartem Schatten (V1: Spalten, V2: Zeitachse)
   · Notdienst  = Aushang in Messingrahmen auf hellem Grund (V1/V2: dunkles Band)
   · Objekte    = Karteikarten, Bildunterschrift UNTER dem Foto (V1: Tabelle,
                  V2: Raster mit Schrift IM Foto)
   · Fragen     = alles offen, zweispaltig (V1/V2: Aufklapper)
   · Zitat      = ohne Foto, nur Papier und ein Messing-Anfuehrungszeichen

   Kontrast (WCAG AA, alles vorher gerechnet, nicht geschaetzt):
     Tinte   #17222A auf Papier #FBF9F5 = 15,3:1
     Text    #4A555E                    =  7,3:1
     Leise   #5F6870                    =  5,4:1 · auf #F3EEE5 = 4,9:1
     Messing #7E5E33 (Schrift)          =  5,7:1 · auf #F3EEE5 = 5,1:1
     Gruen   #3F6A4C (Schrift)          =  5,9:1 · Weiss darauf = 6,2:1
     #B79868 ist mit 2,6:1 KEINE Schriftfarbe — nur Flaeche, Linie, Schatten.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --papier:#FBF9F5;
  --papier-tief:#F3EEE5;
  --karte:#FFFFFF;

  --tinte:#17222A;
  --text:#4A555E;
  --leise:#5F6870;

  --linie:#E2DBCE;
  --linie-stark:#CFC5B4;
  --haar:1px solid #E2DBCE;

  --messing:#B79868;      /* Flaeche, Rahmen, Schatten — nie Schrift */
  --messing-t:#7E5E33;    /* dieselbe Idee, aber lesbar               */
  --gruen:#4F7A5C;        /* Flaeche                                  */
  --gruen-t:#3F6A4C;      /* Schrift und Knopf                        */

  --rund:3px;
  --kante:4px 4px 0 var(--linie-stark);
  --kante-tinte:5px 5px 0 var(--tinte);
  --kante-messing:5px 5px 0 var(--messing);

  --display:'Bespoke Slab', 'Rockwell', 'Courier New', Georgia, serif;
  --schrift:'Switzer', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --spalte:1240px;
  --tempo:.28s cubic-bezier(.25,.8,.35,1);
}

/* ── Grundlagen ───────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth; scroll-padding-top:96px; -webkit-text-size-adjust:100%}

body{
  margin:0; background:var(--papier); color:var(--text);
  font-family:var(--schrift); font-size:17px; line-height:1.65;
  font-weight:400; -webkit-font-smoothing:antialiased;
  overflow-x:clip;   /* propagiert auf das Sichtfeld, ohne sticky zu brechen */
}

h1,h2,h3{
  font-family:var(--display); font-weight:500; color:var(--tinte);
  line-height:1.12; letter-spacing:-.005em; margin:0;
}
p{margin:0}
img{display:block; max-width:100%; height:auto}
ul,ol{margin:0; padding:0}

a{color:inherit}
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--gruen-t); outline-offset:2px; border-radius:1px;
}

.wrap{width:min(100% - 44px, var(--spalte)); margin-inline:auto}

.nur-vorleser{
  position:absolute; left:12px; top:-60px; z-index:100;
  background:var(--tinte); color:var(--papier);
  padding:11px 18px; border-radius:var(--rund); font-weight:600;
  transition:top var(--tempo);
}
.nur-vorleser:focus{top:12px}

.rubrik{
  display:block; font-size:.72rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--messing-t);
}

.lead{font-size:1.08rem; color:var(--text)}

/* ── Entwurfs-Band — vor dem Onlinegehen ersatzlos loeschen ───────────────── */
.entwurf-band{
  background:var(--tinte); color:#DDD6C8;
  font-size:.8rem; padding:9px 0; line-height:1.45;
}
.entwurf-band .wrap{display:flex; flex-wrap:wrap; gap:6px 20px; align-items:center}
.entwurf-band b{color:var(--papier)}
.entwurf-band a{margin-left:auto; color:#D8BE92; text-underline-offset:3px}

/* ── Kopf ─────────────────────────────────────────────────────────────────────
   Firmenschild: helle Flaeche, unten eine Messingkante. Kein Blendeffekt,
   kein Farbwechsel beim Scrollen — nur der Schatten kommt dazu. */
.kopf{
  position:sticky; top:0; z-index:50;
  background:var(--papier); border-bottom:3px solid var(--messing);
  transition:box-shadow var(--tempo);
}
.kopf[data-gescrollt="1"]{box-shadow:0 10px 24px rgba(23,34,42,.09)}
.kopf .wrap{display:flex; align-items:center; gap:22px; min-height:80px}

.marke{text-decoration:none; display:block; margin-right:auto}
.marke b{
  display:block; font-family:var(--display); font-weight:700;
  font-size:1.42rem; color:var(--tinte); line-height:1.05;
}
.marke span{
  display:block; font-size:.66rem; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:var(--messing-t);
  margin-top:3px;
}

.menue{display:flex; gap:26px; align-items:center}
.menue a{
  text-decoration:none; font-size:.95rem; font-weight:500; color:var(--text);
  padding:6px 0; border-bottom:2px solid transparent; transition:var(--tempo);
  transition-property:color,border-color;
}
.menue a:hover{color:var(--tinte); border-bottom-color:var(--messing)}

.burger{
  display:none; width:46px; height:42px; padding:0;
  background:var(--karte); border:1px solid var(--linie-stark);
  border-radius:var(--rund); cursor:pointer;
}
.burger i{display:block; width:20px; height:2px; margin:4px auto; background:var(--tinte)}
.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}
.burger i{transition:var(--tempo); transition-property:rotate,translate,opacity}

/* ── Knoepfe ──────────────────────────────────────────────────────────────────
   Der Schatten ist der Knopf: beim Druecken faellt er zusammen und die
   Flaeche rutscht nach. Deshalb kein Farbwechsel noetig. */
.knopf,.knopf-linie{
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 22px; border-radius:var(--rund);
  font-size:.96rem; font-weight:600; text-decoration:none;
  border:1px solid var(--gruen-t); background:var(--gruen-t); color:#fff;
  box-shadow:3px 3px 0 var(--tinte);
  translate:0 0; transition:var(--tempo); transition-property:translate,box-shadow,background,color;
}
.knopf:hover{translate:-1px -1px; box-shadow:4px 4px 0 var(--tinte)}
.knopf:active{translate:3px 3px; box-shadow:0 0 0 var(--tinte)}

.knopf-linie{
  background:transparent; color:var(--tinte); border-color:var(--tinte);
  box-shadow:3px 3px 0 var(--messing);
}
.knopf-linie:hover{translate:-1px -1px; box-shadow:4px 4px 0 var(--messing); background:var(--karte)}
.knopf-linie:active{translate:3px 3px; box-shadow:0 0 0 var(--messing)}

.knopf svg,.knopf-linie svg{
  width:18px; height:18px; fill:currentColor; flex:none;
}

/* ── Buehne ───────────────────────────────────────────────────────────────── */
.buehne{padding:clamp(48px, 6vw, 92px) 0 clamp(44px, 5vw, 78px)}
.buehne .wrap{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:clamp(30px, 4vw, 64px); align-items:center;
}
.buehne h1{
  font-size:clamp(2.35rem, 4.6vw, 3.85rem); font-weight:500;
  margin:14px 0 20px; max-width:14ch;
}
.buehne .lead{max-width:44ch}
.buehne-tun{display:flex; flex-wrap:wrap; gap:14px; margin-top:30px}

/* Zwei Fotos, das kleine liegt versetzt darueber. Es sitzt in der Rinne
   zwischen den Spalten — dadurch kann es nie ueber den Rand hinauslaufen. */
.buehne-bilder{position:relative}
.bild-gross{
  margin:0; border:1px solid var(--linie-stark); border-radius:var(--rund);
  overflow:clip; box-shadow:var(--kante-messing); background:var(--papier-tief);
}
.bild-gross img{width:100%; aspect-ratio:16/10; object-fit:cover}
.bild-klein{
  position:absolute; left:calc(-1 * clamp(24px, 4.4vw, 74px)); bottom:-38px;
  width:42%; margin:0; padding:7px; background:var(--papier);
  border-radius:var(--rund); box-shadow:var(--kante);
}
.bild-klein img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:1px}

/* ── Zahlenband ───────────────────────────────────────────────────────────── */
.zahlen{
  background:var(--papier-tief);
  border-top:1px solid var(--messing); border-bottom:1px solid var(--messing);
  padding:clamp(26px, 3vw, 40px) 0;
}
.zahlen ul{
  list-style:none; display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:22px 0;
}
.zahlen li{padding:0 clamp(14px, 2vw, 30px); border-left:1px solid var(--linie-stark)}
.zahlen li:first-child{border-left:0; padding-left:0}
.zahlen b{
  display:block; font-family:var(--display); font-weight:700;
  font-size:clamp(1.9rem, 3vw, 2.5rem); color:var(--messing-t); line-height:1;
}
.zahlen span{display:block; margin-top:8px; font-size:.9rem; color:var(--leise)}

/* ── Abschnitts-Grundform ─────────────────────────────────────────────────── */
.block{padding:clamp(60px, 7.5vw, 116px) 0}
.block-tief{background:var(--papier-tief)}
.block-kopf{max-width:56ch; margin-bottom:clamp(30px, 4vw, 52px)}
.block-kopf h2{font-size:clamp(1.9rem, 3.5vw, 2.9rem); margin:14px 0 16px}

/* ── Leistungen: breite Zeilen mit eigener Textspalte ─────────────────────── */
.liste{list-style:none; counter-reset:gewerk; border-top:1px solid var(--linie-stark)}
.liste li{
  counter-increment:gewerk; position:relative;
  display:grid; grid-template-columns:72px minmax(0,.85fr) minmax(0,1.5fr);
  gap:8px clamp(18px, 2.6vw, 40px); align-items:start;
  padding:clamp(22px, 2.6vw, 32px) clamp(12px, 1.6vw, 22px);
  border-bottom:var(--haar); transition:background var(--tempo);
}
.liste li:hover{background:var(--karte)}
.liste li::before{
  content:counter(gewerk, decimal-leading-zero);
  font-family:var(--display); font-weight:700; font-size:1.35rem;
  color:var(--messing-t); line-height:1.1;
}
/* Der Messingbalken links macht sichtbar, welche Zeile gerade dran ist —
   ohne die Farbe der Schrift zu aendern. */
.liste li::after{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:var(--messing); scale:1 0; transform-origin:top;
  transition:scale var(--tempo);
}
.liste li:hover::after{scale:1 1}
.liste h3{font-size:1.28rem; font-weight:500}
.liste p{font-size:.99rem}

/* ── Zitat ohne Foto ──────────────────────────────────────────────────────── */
.spruch{
  background:var(--papier-tief);
  border-top:1px solid var(--messing); border-bottom:1px solid var(--messing);
  padding:clamp(56px, 7vw, 104px) 0; text-align:center;
}
.spruch .wrap{max-width:900px}
/* Einzige Stelle, an der das Messing wie Schrift aussieht — und die einzige,
   an der das erlaubt ist: das Anfuehrungszeichen traegt keine Information. Es
   steht im Markup als aria-hidden, Vorleseprogramme ueberspringen es, und das
   Zitat darunter ist auch ohne das Zeichen vollstaendig. Reine Zier faellt
   nicht unter die Kontrastregel. Wuerde hier ein Wort stehen, muesste die
   Farbe eine andere sein. */
.spruch .zeichen{
  display:block; font-family:var(--display); font-weight:700;
  font-size:4.4rem; line-height:.7; color:var(--messing); margin-bottom:14px;
}
.spruch blockquote{
  margin:0; font-family:var(--display); font-weight:400;
  font-size:clamp(1.5rem, 3vw, 2.3rem); line-height:1.28; color:var(--tinte);
}
.spruch cite{
  display:block; margin-top:22px; font-style:normal;
  font-size:.78rem; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--messing-t);
}

/* ── Ablauf: fuenf Karten mit hartem Schatten ─────────────────────────────── */
.weg{list-style:none; counter-reset:schritt;
     display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:clamp(14px,1.8vw,24px)}
.weg li{
  counter-increment:schritt; position:relative;
  background:var(--karte); border:1px solid var(--linie-stark);
  border-radius:var(--rund); box-shadow:var(--kante);
  padding:clamp(20px,2.2vw,28px) clamp(16px,1.8vw,22px) clamp(20px,2.2vw,26px);
  transition:var(--tempo); transition-property:translate,box-shadow;
}
.weg li:hover{translate:-2px -2px; box-shadow:6px 6px 0 var(--messing)}
.weg li::before{
  content:counter(schritt, decimal-leading-zero);
  display:block; font-family:var(--display); font-weight:700;
  font-size:1.5rem; color:var(--messing-t); line-height:1; margin-bottom:12px;
}
.weg h3{font-size:1.12rem; font-weight:500; margin-bottom:8px}
.weg p{font-size:.92rem; color:var(--text)}

/* ── Notdienst: Aushang in Messingrahmen ──────────────────────────────────── */
.not-bild{
  border:1px solid var(--linie-stark); border-radius:var(--rund);
  overflow:clip; box-shadow:var(--kante); background:var(--papier-tief);
}
.not-bild img{width:100%; aspect-ratio:21/9; object-fit:cover; object-position:50% 42%}

.aushang{
  position:relative; margin:clamp(-70px,-6vw,-46px) auto 0;
  width:min(100% - 60px, 940px);
  background:var(--karte); border:1px solid var(--messing);
  border-radius:var(--rund); box-shadow:var(--kante-messing);
  padding:clamp(28px,3.4vw,46px) clamp(22px,3vw,52px) clamp(26px,3vw,42px);
  text-align:center;
}
/* Doppellinie oben — das Zeichen eines Aushangs, nicht einer Werbeflaeche. */
.aushang::before{
  content:""; position:absolute; left:clamp(22px,3vw,52px); right:clamp(22px,3vw,52px);
  top:11px; height:3px;
  border-top:1px solid var(--messing); border-bottom:1px solid var(--messing);
}
.aushang h2{font-size:clamp(1.6rem, 2.8vw, 2.3rem); margin:12px 0 16px}
.aushang p{max-width:62ch; margin-inline:auto}
.aushang small{
  display:block; margin-top:16px; font-size:.85rem;
  color:var(--leise); line-height:1.6; max-width:70ch; margin-inline:auto;
}
.aushang-tun{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:26px}
.aushang .zeit{
  display:inline-block; margin-top:20px; padding-top:16px;
  border-top:var(--haar); font-size:.88rem; color:var(--leise);
}

/* ── Objekte als Karteikarten ─────────────────────────────────────────────── */
.karten{
  list-style:none; display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(16px,2vw,26px);
}
.karten li{
  background:var(--karte); border:1px solid var(--linie-stark);
  border-radius:var(--rund); box-shadow:var(--kante); overflow:clip;
  display:flex; flex-direction:column;
  transition:var(--tempo); transition-property:translate,box-shadow;
}
.karten li:hover{translate:-2px -2px; box-shadow:6px 6px 0 var(--messing)}
.karten img{width:100%; aspect-ratio:4/3; object-fit:cover}
.karten .text{padding:18px 18px 20px; border-top:1px solid var(--linie)}
.karten b{display:block; font-family:var(--display); font-weight:500;
          font-size:1.06rem; color:var(--tinte); line-height:1.25}
.karten span{display:block; margin-top:7px; font-size:.88rem; color:var(--text)}
.karten time{
  display:block; margin-top:12px; padding-top:10px; border-top:var(--haar);
  font-size:.74rem; font-weight:600; letter-spacing:.16em; color:var(--messing-t);
}
.karten-fuss{margin-top:26px; font-size:.93rem; color:var(--leise); max-width:64ch}

/* ── Person ───────────────────────────────────────────────────────────────── */
.person .wrap{
  display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1fr);
  gap:clamp(34px,5vw,80px); align-items:start;
}
.person-bild{
  margin:0; border:1px solid var(--linie-stark); border-radius:var(--rund);
  overflow:clip; box-shadow:14px 14px 0 var(--messing); background:var(--papier-tief);
}
.person-bild img{width:100%; aspect-ratio:3/4; object-fit:cover}
.person h2{font-size:clamp(1.8rem,3.2vw,2.6rem); margin:14px 0 18px}
.person p + p{margin-top:14px}

.belege{list-style:none; margin-top:30px; border-top:1px solid var(--linie-stark)}
.belege li{
  display:grid; grid-template-columns:22px 1fr; gap:12px; align-items:start;
  padding:13px 0; border-bottom:var(--haar); font-size:.95rem;
}
.belege svg{width:20px; height:20px; fill:var(--gruen-t); margin-top:2px}

/* ── Fragen: alles offen, zweispaltig ─────────────────────────────────────── */
.fragen{columns:2; column-gap:clamp(30px,4vw,64px)}
.fragen > div{
  break-inside:avoid; -webkit-column-break-inside:avoid;
  margin:0 0 clamp(22px,2.6vw,34px);
  background:var(--karte); border:1px solid var(--linie);
  border-left:4px solid var(--messing); border-radius:var(--rund);
  padding:22px 24px 24px;
}
.fragen h3{font-size:1.08rem; font-weight:500; margin-bottom:10px}
.fragen p{font-size:.95rem}
.fragen p + p{margin-top:11px}

/* ── Kontakt ──────────────────────────────────────────────────────────────── */
.kontakt .wrap{
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);
  gap:clamp(28px,3.4vw,52px); align-items:start;
}
.formular{
  background:var(--karte); border:1px solid var(--linie-stark);
  border-radius:var(--rund); box-shadow:var(--kante);
  padding:clamp(22px,2.8vw,38px);
}
.feld{margin-bottom:18px}
.feld-paar{display:grid; grid-template-columns:1fr 1fr; gap:0 18px}
.feld label{
  display:block; margin-bottom:7px; font-size:.78rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--messing-t);
}
/* Der Umriss ist deutlich dunkler als --linie-stark. Die Fuellung des Feldes
   ist fast so hell wie die Karte dahinter (1,1:1) — der Rand ist also das
   Einzige, woran man das Feld erkennt, und muss dafuer kraeftig genug sein.
   3,6:1 gegen die Fuellung, 3,8:1 gegen die Karte. */
.feld input,.feld select,.feld textarea{
  width:100%; font:inherit; font-size:.98rem; color:var(--tinte);
  background:var(--papier); border:1px solid #8C8272;
  border-radius:var(--rund); padding:11px 13px;
  transition:var(--tempo); transition-property:border-color,background,box-shadow;
}
.feld textarea{min-height:118px; resize:vertical}
.feld input:hover,.feld select:hover,.feld textarea:hover{border-color:var(--messing)}
.feld input:focus,.feld select:focus,.feld textarea:focus{
  background:var(--karte); border-color:var(--gruen-t);
}
.feld ::placeholder{color:var(--leise); opacity:1}
.form-fuss{margin-top:16px; font-size:.83rem; color:var(--leise); line-height:1.6}
.form-fuss a{color:var(--gruen-t); text-underline-offset:3px}

.kontakt-daten{
  background:var(--papier-tief); border:1px solid var(--linie-stark);
  border-radius:var(--rund); padding:clamp(22px,2.6vw,32px);
}
.kontakt-daten h3{font-size:1.3rem; margin:10px 0 18px}
.kontakt-liste{list-style:none}
.kontakt-liste li{
  display:grid; grid-template-columns:24px 1fr; gap:14px; align-items:start;
  padding:14px 0; border-top:var(--haar);
}
.kontakt-liste li:first-child{border-top:0; padding-top:0}
.kontakt-liste svg{width:20px; height:20px; fill:var(--messing-t); margin-top:3px}
.kontakt-liste b{display:block; font-weight:600; color:var(--tinte); font-size:1rem}
.kontakt-liste a{text-decoration:none; border-bottom:1px solid var(--linie-stark)}
.kontakt-liste a:hover{border-bottom-color:var(--messing-t)}
.kontakt-liste small{display:block; margin-top:3px; font-size:.85rem; color:var(--leise)}

/* ── Fuss ─────────────────────────────────────────────────────────────────── */
.fuss{
  background:var(--tinte); color:#C6CDD3; border-top:4px solid var(--messing);
  padding:clamp(46px,5vw,72px) 0 26px; font-size:.93rem;
}
.fuss-oben{
  display:grid; grid-template-columns:1.5fr 1fr 1fr;
  gap:clamp(26px,3vw,54px); padding-bottom:32px;
}
.fuss-marke b{
  display:block; font-family:var(--display); font-weight:700;
  font-size:1.28rem; color:var(--papier); margin-bottom:12px;
}
.fuss-marke p{max-width:44ch; line-height:1.7}
.fuss h3{
  font-size:.74rem; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:#D8BE92; margin-bottom:14px;
}
.fuss ul{list-style:none}
.fuss li{margin-bottom:9px}
.fuss a{text-decoration:none; border-bottom:1px solid transparent}
.fuss a:hover{color:var(--papier); border-bottom-color:#D8BE92}
.fuss-unten{
  display:flex; flex-wrap:wrap; gap:8px 26px; justify-content:space-between;
  padding-top:22px; border-top:1px solid #33414B; font-size:.84rem; color:#9AA6AE;
}

/* ── Daumenleiste (nur Handy) ─────────────────────────────────────────────── */
.daumen{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:60;
  gap:1px; background:var(--linie-stark);
  box-shadow:0 -8px 22px rgba(23,34,42,.14);
}
.daumen .knopf,.daumen .knopf-linie{
  flex:1; justify-content:center; border-radius:0; box-shadow:none;
  border:0; padding:16px 10px;
}
.daumen .knopf-linie{background:var(--karte)}
.daumen .knopf:active,.daumen .knopf-linie:active{translate:0 0}

/* ── Einblenden beim Scrollen ─────────────────────────────────────────────── */
html.js .zeig{opacity:0; translate:0 16px}
html.js .zeig[data-da="1"]{
  opacity:1; translate:0 0;
  transition:opacity .55s ease, translate .55s cubic-bezier(.2,.7,.3,1);
  transition-delay:calc(var(--i, 0) * 70ms);
}

/* ── Schmalere Bildschirme ────────────────────────────────────────────────── */
@media (max-width:1100px){
  .weg{grid-template-columns:repeat(3, minmax(0,1fr))}
  .karten{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (max-width:1000px){
  .buehne .wrap,.person .wrap,.kontakt .wrap{grid-template-columns:1fr}
  .buehne-bilder{order:-1}
  .bild-klein{display:none}      /* haette sonst keinen Rand zum Ueberlappen */
  .person-bild{max-width:420px; box-shadow:10px 10px 0 var(--messing)}
  .liste li{grid-template-columns:56px minmax(0,1fr)}
  .liste p{grid-column:2}
  .fragen{columns:1}
  .fuss-oben{grid-template-columns:1fr 1fr}
  .fuss-marke{grid-column:1 / -1}
}
@media (max-width:860px){
  .burger{display:block; margin-left:auto}
  .kopf .knopf,.kopf .knopf-linie{display:none}
  /* Die Klappliste laeuft von Rand zu Rand: Bezugsrahmen ist der Kopf,
     nicht .wrap — deshalb hier position:static. */
  .kopf .wrap{position:static}
  .menue{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--karte); border-bottom:3px solid var(--messing);
    box-shadow:0 18px 30px rgba(23,34,42,.14);
    padding:4px clamp(22px,6vw,30px) 16px; display:none;
  }
  .menue[data-offen="1"]{display:flex}
  .menue a{padding:15px 0; border-bottom:var(--haar); border-top:0; font-size:1.04rem}
  .menue a:last-child{border-bottom:0}
  .menue a:hover{border-bottom-color:var(--linie)}
  .zahlen ul{grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px 0}
  .zahlen li:nth-child(odd){border-left:0; padding-left:0}
  .weg{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (max-width:720px){
  body{font-size:16px; padding-bottom:78px}
  .daumen{display:flex}
  .karten{grid-template-columns:1fr}
  .feld-paar{grid-template-columns:1fr}
  .fuss-oben{grid-template-columns:1fr}
  .aushang{width:min(100% - 44px, 940px); margin-top:-30px}
  .not-bild img{aspect-ratio:16/9}
  .entwurf-band a{margin-left:0}
}
@media (max-width:520px){
  .weg{grid-template-columns:1fr}
  .liste li{grid-template-columns:1fr; padding-left:14px}
  .liste li::before{margin-bottom:2px}
  .liste 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}
}

/* ── Rechtstexte (Impressum, Datenschutz) ─────────────────────────────────
   Auch hier gilt die Hausregel des Entwurfs: nichts schwebt. Der Warnkasten
   bekommt deshalb dieselbe harte Kante wie jede Karte auf der Startseite. */
.rechts-kopf{padding:clamp(44px, 5.2vw, 76px) 0 clamp(24px, 3vw, 38px)}
.rechts-kopf h1{font-size:clamp(2.1rem, 4vw, 3rem); margin-top:10px}
.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, 94px)}
.rechtstext p,.rechtstext ul,.rechtstext dl,.rechtstext address,.rechts-hinweis{
  max-width:68ch;
}
.rechtstext section{border-top:var(--haar); padding:30px 0 4px}
.rechtstext h2{font-size:clamp(1.28rem, 2vw, 1.62rem); margin-bottom:14px; color:var(--tinte)}
.rechtstext h3{
  font-family:var(--schrift); font-size:1.02rem; font-weight:600;
  letter-spacing:0; margin:22px 0 8px; color:var(--tinte);
}
.rechtstext p{color:var(--text); margin-bottom:13px}
.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:7px}
.rechtstext ul li::before{
  content:""; position:absolute; left:3px; top:.6em;
  width:6px; height:6px; background:var(--messing);
}
.rechtstext dl{margin:0}
.rechtstext dt{font-weight:600; color:var(--tinte); margin-top:15px}
.rechtstext dd{margin:2px 0 0; color:var(--text)}
.rechtstext address{font-style:normal; color:var(--text); line-height:1.85}
.rechtstext a{color:var(--gruen-t)}
.rechts-hinweis{
  background:var(--karte); border:1px solid var(--linie-stark);
  border-left:4px solid var(--messing); box-shadow:var(--kante);
  padding:20px 24px; margin:26px 0 32px;
}
.rechts-hinweis b{display:block; margin-bottom:6px; color:var(--tinte)}
.rechts-hinweis p{font-size:.94rem; margin-bottom:0}
.zurueck{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  font-size:.96rem; font-weight:600; color:var(--tinte);
  border:1px solid var(--tinte); border-radius:var(--rund);
  padding:12px 20px; margin-top:38px;
  box-shadow:3px 3px 0 var(--messing); translate:0 0;
  transition:var(--tempo); transition-property:translate,box-shadow,background;
}
.zurueck:hover{translate:-1px -1px; box-shadow:4px 4px 0 var(--messing); background:var(--karte)}
.zurueck:active{translate:3px 3px; box-shadow:0 0 0 var(--messing)}