/* ══════════════════════════════════════════════════════════════════════════
   Kortmann Immobilien — Entwurf 1 „Schaufenster"
   ──────────────────────────────────────────────────────────────────────────
   Die Idee: Ein Makler verkauft keine Farben, er verkauft Räume. Also nimmt
   diese Seite sich selbst vollstaendig zurueck. Es gibt KEINE Akzentfarbe —
   nicht eine. Alles Farbige auf dieser Seite kommt aus den Fotos der Objekte,
   und weil sonst nichts leuchtet, leuchten die Fotos.

   Drei Werkzeuge tragen den ganzen Entwurf:
     1. Eine sehr leichte, breite Display-Schrift (Outfit 200/300). Grosse
        Ueberschriften wirken dadurch wie ein Schild im Schaufenster, nicht
        wie ein Werbeplakat.
     2. Haarlinien statt Kaesten. Es gibt fast keine Flaechen, keine Schatten
        und nur 2 px Rundung — Kanten wie ein Passepartout.
     3. Eine Monospace fuer JEDE Zahl. Preis, Wohnflaeche, Zimmer, Baujahr
        und die Energiewerte stehen in IBM Plex Mono. Zahlen in einer
        Schreibmaschinenschrift lesen sich wie Daten, nicht wie Werbung —
        und untereinander stehen die Ziffern exakt in einer Spalte.

   Kontrast: jeder Farbwert unten traegt sein gemessenes Verhaeltnis im
   Kommentar. Gerechnet, nicht geschaetzt.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── Marken-Kontrakt ───────────────────────────────────────────────────
     Vier Graustufen, sonst nichts. Wer hier eine Buntfarbe eintraegt, macht
     einen anderen Entwurf daraus. */
  --papier:#FFFFFF;
  --flaeche:#F4F4F4;         /* abgesetzte Baender                          */
  --tinte:#0A0A0A;           /* Ueberschriften, Zahlen
                                (Papier 19,8:1 · Flaeche 18,0:1)            */
  --text:#6B6B6B;            /* Fliesstext, Beschriftungen
                                (Papier 5,3:1 · Flaeche 4,9:1)              */

  /* Zwei Linienstaerken, und der Unterschied ist kein Geschmack:
       --linie  trennt nur optisch. Reine Zier, faellt nicht unter die
                Kontrastregel — deshalb darf sie so zart sein.
       --rahmen umschliesst Formularfelder. Ein Eingabefeld ist ein
                Bedienelement und muss nach WCAG 1.4.11 auf 3:1 kommen,
                sonst sieht man nicht, wo man hineinschreibt.
                (Papier 3,5:1 · Flaeche 3,1:1) */
  --linie:rgba(0,0,0,.08);
  --rahmen:#8A8A8A;

  --display:'Outfit', 'Helvetica Neue', Arial, sans-serif;
  --schrift:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --zahl:'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --rund:2px;                /* fast eckig — Passepartout-Kante            */
  --pille:999px;             /* genau EINE runde Form: der Hauptknopf      */
  --tempo:.32s cubic-bezier(.2,.7,.3,1);
  --spalte:1180px;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth; scroll-padding-top:86px; -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;
  overflow-x:clip; -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:var(--display); font-weight:200; color:var(--tinte);
  margin:0; line-height:1.06; letter-spacing:-.02em; text-wrap:balance;
}
p{margin:0; text-wrap:pretty}
img{display:block; max-width:100%; height:auto}
a{color:inherit}
svg{width:1em; height:1em; fill:currentColor; flex:none}

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

.nur-vorleser{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
.nur-vorleser:focus{
  position:fixed; top:10px; left:10px; z-index:200; width:auto; height:auto;
  margin:0; clip-path:none; background:var(--tinte); color:var(--papier);
  padding:12px 20px; border-radius:var(--rund);
}

/* Der Fokusrahmen ist hier schlicht die Tinte. Bei einem Entwurf ohne
   Akzentfarbe waere alles andere eine Luege — und 18:1 gegen jeden Grund
   dieser Seite sieht wirklich jeder. */
:focus-visible{outline:2px solid var(--tinte); outline-offset:3px}

/* ── Bausteine ──────────────────────────────────────────────────────────── */

/* Die Rubrik: gesperrte Versalien in Mono. Sie ist der einzige Schmuck,
   den dieser Entwurf sich erlaubt. */
.rubrik{
  display:block; font-family:var(--zahl); font-size:.68rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--text);
}

/* Jede Zahl auf dieser Seite laeuft durch diese Klasse. */
.zahl{font-family:var(--zahl); font-weight:500; font-variant-numeric:tabular-nums; color:var(--tinte)}

.knopf{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  font-size:.95rem; font-weight:500; line-height:1;
  padding:15px 28px; border-radius:var(--pille);
  background:var(--tinte); color:var(--papier);
  border:1px solid var(--tinte);
  transition:background var(--tempo), color var(--tempo);
}
.knopf:hover{background:transparent; color:var(--tinte)}
.knopf--leer{background:transparent; color:var(--tinte); border-color:var(--rahmen)}
.knopf--leer:hover{background:var(--tinte); color:var(--papier); border-color:var(--tinte)}

/* Einblenden. Ohne JS steht alles sofort da. */
.js .zeig{opacity:0; translate:0 14px; transition:opacity .6s ease, translate .6s cubic-bezier(.2,.7,.3,1); transition-delay:calc(var(--i,0) * 55ms)}
.js .zeig[data-da="1"]{opacity:1; translate:0 0}

/* ── Entwurfs-Band ──────────────────────────────────────────────────────── */
.entwurf-band{background:var(--tinte); color:var(--papier); font-size:.82rem; padding:9px 0}
.entwurf-band .wrap{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.entwurf-band b{font-weight:600}
.entwurf-band span{opacity:.82}
.entwurf-band a{margin-left:auto; color:var(--papier); text-underline-offset:3px}

/* ── Kopf ───────────────────────────────────────────────────────────────── */
.kopf{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--papier) 90%, transparent);
  backdrop-filter:blur(12px); border-bottom:1px solid transparent;
  transition:border-color var(--tempo);
}
.kopf[data-gescrollt="1"]{border-bottom-color:var(--linie)}
.kopf .wrap{display:flex; align-items:center; gap:26px; height:72px}
.marke{
  display:flex; align-items:baseline; gap:8px; text-decoration:none;
  font-family:var(--display); color:var(--tinte); flex:none; white-space:nowrap;
}
.marke b{font-weight:300; font-size:1.32rem; letter-spacing:-.02em}
.marke span{font-family:var(--zahl); font-size:.6rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--text)}

.menue{display:flex; gap:26px; margin-left:auto; flex:none}
.menue a{
  text-decoration:none; font-size:.9rem; color:var(--text); white-space:nowrap;
  padding:6px 0; border-bottom:1px solid transparent; transition:color var(--tempo), border-color var(--tempo);
}
.menue a:hover{color:var(--tinte); border-bottom-color:var(--tinte)}

/* flex:none + nowrap sind hier kein Schoenheitsfetisch: ohne sie schrumpft
   der Knopf als Flex-Kind mit und bricht die Beschriftung um — die Pille
   schneidet sie dann ab. Lieber laeuft der Kopf frueh auf den Burger. */
.kopf .knopf{padding:11px 22px; font-size:.88rem; flex:none; white-space:nowrap}

.burger{display:none; margin-left:auto; background:none; border:0; padding:10px; cursor:pointer}
.burger i{display:block; width:22px; height:1px; background:var(--tinte); margin:5px 0; transition:translate var(--tempo), rotate var(--tempo), opacity var(--tempo)}
.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}

/* ── Bühne: ein Bild, eine Zeile ────────────────────────────────────────── */
.buehne{position:relative}
.buehne-bild{position:relative; aspect-ratio:16/8; overflow:clip; background:var(--flaeche)}
.buehne-bild img{width:100%; height:100%; object-fit:cover}
/* Der Verlauf ist in Pixeln gestuft, nicht in Prozent — und das ist wichtig.
   Die Ueberschrift ragt 90px ins Bild hinein. Bei Prozentwerten waendert sich
   die Deckung mit jeder Fensterbreite, und bei schmalen Fenstern stuende die
   Rubrik ploetzlich auf halbdurchsichtigem Weiss ueber dem Foto — der
   Kontrast waere dann nicht mehr nachweisbar. Feste Pixel heissen: die
   unteren 100px sind IMMER reines Weiss, egal wie breit der Bildschirm ist.
   Darueber laeuft der Verlauf weich aus. */
.buehne-bild::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, #FFFFFF 0, #FFFFFF 100px, rgba(255,255,255,0) 360px);
}
.buehne-text{
  position:relative; margin-top:-90px; z-index:2;
  padding-bottom:clamp(38px, 5vw, 66px);
}
.buehne h1{
  font-size:clamp(2.5rem, 6.4vw, 5.3rem); font-weight:200;
  max-width:15ch; margin:16px 0 0;
}
.buehne .lead{max-width:56ch; margin-top:22px; font-size:1.06rem}
.buehne-tun{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}

/* Das Zahlenband unter der Bühne. Reine Haarlinie oben und unten. */
.band-zahlen{border-block:1px solid var(--linie)}
.band-zahlen ul{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3, 1fr);
}
.band-zahlen li{padding:24px 0 26px}
.band-zahlen li + li{border-left:1px solid var(--linie); padding-left:26px}
.band-zahlen .gross{display:block; font-family:var(--zahl); font-size:1.55rem; font-weight:500; color:var(--tinte); line-height:1.1}
.band-zahlen small{display:block; font-size:.86rem; margin-top:6px}

/* ── Abschnitte ─────────────────────────────────────────────────────────── */
.teil{padding:clamp(58px, 7vw, 104px) 0}
.teil--band{background:var(--flaeche)}
.teil-kopf{max-width:60ch; margin-bottom:clamp(30px, 4vw, 50px)}
.teil-kopf h2{font-size:clamp(1.9rem, 3.9vw, 3rem); margin-top:12px}
.teil-kopf p{margin-top:16px}

/* ── Objekte: ein grosses, dann drei kleine ─────────────────────────────── */
.objekte{display:grid; gap:1px; background:var(--linie); border:1px solid var(--linie); border-radius:var(--rund); overflow:clip}
.objekte{grid-template-columns:repeat(3, 1fr)}
.obj{background:var(--papier); padding:0; display:flex; flex-direction:column}
.obj--gross{grid-column:span 3; flex-direction:row}
.obj-bild{position:relative; overflow:clip; background:var(--flaeche); aspect-ratio:16/10}
.obj--gross .obj-bild{flex:1 1 58%; aspect-ratio:auto; min-height:340px}
/* Absolut gesetzt, nicht nur height:100%. Sonst zieht ein Foto mit anderem
   Seitenverhaeltnis den Kasten auf seine eigene Hoehe — und die Karten in
   einer Reihe stehen unterschiedlich hoch. Der Kasten gibt das Mass vor,
   das Bild fuellt es. */
.obj-bild img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; scale:1; transition:scale .7s cubic-bezier(.2,.7,.3,1)}
.obj:hover .obj-bild img{scale:1.04}

/* Der Status ist der einzige Ort, an dem dieser Entwurf eine Flaeche fuellt.
   Unterschieden wird ueber Fuellung, nicht ueber Farbe — deshalb bleibt er
   auch fuer jemanden lesbar, der Farben nicht unterscheiden kann. */
.status{
  position:absolute; left:14px; top:14px; z-index:2;
  font-family:var(--zahl); font-size:.66rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  padding:7px 12px; border-radius:var(--rund);
  background:var(--papier); color:var(--tinte); border:1px solid var(--tinte);
}
.status--weg{background:var(--tinte); color:var(--papier)}

.obj-text{padding:26px 26px 28px; display:flex; flex-direction:column; flex:1}
.obj--gross .obj-text{flex:1 1 42%; justify-content:center; padding:38px 40px}
.obj-text h3{font-size:clamp(1.25rem, 2vw, 1.7rem); font-weight:300}
.obj-ort{display:block; font-size:.88rem; margin-top:8px}

/* Die Datenzeile: drei Zahlen nebeneinander, durch Haarlinien getrennt. */
.obj-daten{
  list-style:none; margin:20px 0 0; padding:16px 0 0; border-top:1px solid var(--linie);
  display:flex; gap:0;
}
.obj-daten li{flex:1}
.obj-daten li + li{border-left:1px solid var(--linie); padding-left:14px}
.obj-daten b{display:block; font-family:var(--zahl); font-weight:500; font-size:1rem; color:var(--tinte)}
.obj-daten small{display:block; font-size:.74rem; margin-top:2px}

/* ── Der Pflichtblock nach § 87 GModG ──────────────────────────────────────
   Das ist kein Gestaltungselement, das ist Gesetz: wer eine Immobilie
   kommerziell inseriert, MUSS Art des Energieausweises, Kennwert,
   Energietraeger, Baujahr und Effizienzklasse nennen. Fehlt eine Angabe,
   ist das eine Ordnungswidrigkeit — bis 10.000 Euro. Deshalb steht der
   Block in jeder Objektkarte fest eingebaut und nicht als Zusatz.
   Klein gesetzt, aber 4,9:1 gegen die abgesetzte Flaeche — klein heisst
   nicht blass. */
.geb{
  margin-top:18px; padding:14px 16px; background:var(--flaeche);
  border-radius:var(--rund); font-family:var(--zahl); font-size:.73rem;
  line-height:1.75; color:var(--text);
}
.geb b{display:block; font-weight:500; color:var(--tinte); letter-spacing:.1em; text-transform:uppercase; font-size:.66rem; margin-bottom:5px}

.obj-mehr{
  margin-top:20px; align-self:flex-start; text-decoration:none;
  font-size:.9rem; color:var(--tinte); border-bottom:1px solid var(--tinte); padding-bottom:2px;
}

/* ── Leistungen: nummerierte Liste, nur Haarlinien ──────────────────────── */
.leistungen{list-style:none; margin:0; padding:0; border-top:1px solid var(--linie)}
.leistungen li{
  display:grid; grid-template-columns:64px 1fr 1.3fr; gap:26px;
  padding:26px 0; border-bottom:1px solid var(--linie); align-items:start;
}
.leistungen .nr{font-family:var(--zahl); font-size:.82rem; font-weight:500; color:var(--text); padding-top:5px}
.leistungen h3{font-size:1.18rem; font-weight:300}
.leistungen p{font-size:.95rem}

/* ── Ablauf: waagerechte Schiene ────────────────────────────────────────── */
.ablauf{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--linie); border:1px solid var(--linie); border-radius:var(--rund); overflow:clip}
.ablauf li{background:var(--papier); padding:28px 26px 30px}
.ablauf .nr{
  display:block; font-family:var(--zahl); font-size:.72rem; font-weight:500;
  letter-spacing:.16em; color:var(--text); margin-bottom:14px;
}
.ablauf h3{font-size:1.08rem; font-weight:400; margin-bottom:9px}
.ablauf p{font-size:.92rem}

/* ── Provision ──────────────────────────────────────────────────────────── */
/* minmax(0,1fr) statt 1fr: "1fr" heisst in Wahrheit "minmax(auto,1fr)", und das
   auto-Minimum ist die min-content-Breite. Eine unteilbar lange Zeile in der
   Preisliste macht die Spalte damit breiter als den Bildschirm — auf dem Handy
   gab das einen waagerechten Rollbalken. Mit minmax(0,…) darf sie schrumpfen. */
.provision{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(30px, 5vw, 74px); align-items:start}
.prov-liste{list-style:none; margin:0; padding:0}
.prov-liste li{display:flex; justify-content:space-between; gap:20px; padding:16px 0; border-bottom:1px solid var(--linie); align-items:baseline}
.prov-liste li:first-child{border-top:1px solid var(--linie)}
.prov-liste span{font-size:.95rem}
.prov-liste .zahl{font-size:1.02rem; white-space:nowrap}
/* Eine Ausnahme: hinter der Zahl steht einmal ein langes Wort
   ("Netto­kaltmieten"). nowrap wuerde dort auch das weiche Trennzeichen
   aushebeln, und die Zeile bliebe unteilbar breit. Hier darf umbrochen werden. */
.prov-liste .zahl--lang{white-space:normal; hyphens:manual; text-align:right}
.prov-hinweis{margin-top:22px; font-size:.88rem}

/* ── Person ─────────────────────────────────────────────────────────────── */
.person{display:grid; grid-template-columns:minmax(0,340px) 1fr; gap:clamp(30px, 5vw, 66px); align-items:center}
.person img{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--rund)}
.person blockquote{margin:0; font-family:var(--display); font-weight:200; font-size:clamp(1.35rem, 2.6vw, 2.05rem); line-height:1.28; color:var(--tinte); letter-spacing:-.01em}
.person .wer{margin-top:22px; font-size:.92rem}
.person .wer b{display:block; color:var(--tinte); font-weight:500}

/* ── Fragen ─────────────────────────────────────────────────────────────── */
.fragen{border-top:1px solid var(--linie); max-width:76ch}
.fragen details{border-bottom:1px solid var(--linie)}
.fragen summary{
  display:flex; align-items:center; gap:18px; cursor:pointer; list-style:none;
  padding:22px 0; font-family:var(--display); font-weight:300; font-size:1.1rem; color:var(--tinte);
}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{
  content:""; margin-left:auto; flex:none; width:11px; height:11px;
  border-right:1px solid var(--tinte); border-bottom:1px solid var(--tinte);
  rotate:45deg; translate:0 -3px; transition:rotate var(--tempo);
}
.fragen details[open] summary::after{rotate:-135deg; translate:0 2px}
.fragen .antwort{padding:0 0 24px; max-width:66ch; font-size:.97rem}
.fragen .antwort p + p{margin-top:12px}

/* ── Kontakt ────────────────────────────────────────────────────────────── */
.kontakt-netz{display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(30px, 5vw, 70px); align-items:start}

.feld{display:block; margin-bottom:16px}
.feld > span{display:block; font-family:var(--zahl); font-size:.68rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; margin-bottom:7px; color:var(--text)}
.feld input,.feld select,.feld textarea{
  width:100%; font:inherit; font-size:.97rem; color:var(--tinte);
  background:var(--papier); border:1px solid var(--rahmen);
  border-radius:var(--rund); padding:13px 15px;
  transition:border-color var(--tempo);
}
.feld textarea{min-height:118px; resize:vertical}
.feld input:hover,.feld select:hover,.feld textarea:hover{border-color:var(--tinte)}
.feld input:focus-visible,.feld select:focus-visible,.feld textarea:focus-visible{border-color:var(--tinte)}
.feld-zwei{display:grid; grid-template-columns:1fr 1fr; gap:0 16px}

.form-fuss{margin-top:6px; font-size:.84rem}
.anfrage-tun{display:flex; flex-wrap:wrap; gap:12px; margin-top:20px}

.daten{list-style:none; margin:0; padding:0; border-top:1px solid var(--linie)}
.daten li{display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--linie); align-items:flex-start}
.daten svg{width:18px; height:18px; color:var(--tinte); margin-top:3px}
.daten .lab{display:block; font-family:var(--zahl); font-size:.66rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; margin-bottom:3px}
.daten a{color:var(--tinte); text-decoration:none; border-bottom:1px solid var(--linie)}
.daten a:hover{border-bottom-color:var(--tinte)}
.daten b{color:var(--tinte); font-weight:400}

/* ── Fuß ────────────────────────────────────────────────────────────────── */
.fuss{border-top:1px solid var(--linie); padding:52px 0 40px; font-size:.9rem}
.fuss-netz{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:34px}
.fuss h3{font-family:var(--zahl); font-size:.66rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--text); margin-bottom:14px}
.fuss ul{list-style:none; margin:0; padding:0}
.fuss li{margin-bottom:8px}
.fuss a{color:var(--text); text-decoration:none}
.fuss a:hover{color:var(--tinte)}
.fuss-unten{margin-top:38px; padding-top:22px; border-top:1px solid var(--linie); display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; font-size:.83rem}

/* ── Daumenleiste (nur Handy) ───────────────────────────────────────────── */
.daumen{display:none}

/* ── Enger ──────────────────────────────────────────────────────────────── */
@media (max-width:980px){
  /* Sechs Menuepunkte, eine Wortmarke und eine Pille passen ab hier nicht
     mehr nebeneinander. Der Kopf klappt deshalb schon hier auf den Burger —
     nicht erst auf dem Handy. Er bleibt dabei klebend, .menue haengt per
     top:100% an ihm; darum braucht .kopf durchgehend einen Positionswert. */
  .kopf .knopf{display:none}
  .burger{display:block}
  .menue{
    position:absolute; left:0; right:0; top:100%; margin:0; flex-direction:column; gap:0;
    background:var(--papier); border-bottom:1px solid var(--linie);
    padding:6px 20px 18px; display:none;
  }
  .menue[data-offen="1"]{display:flex}
  .menue a{padding:13px 0; border-bottom:1px solid var(--linie)}

  .objekte{grid-template-columns:repeat(2, 1fr)}
  .obj--gross{grid-column:span 2; flex-direction:column}
  .obj--gross .obj-bild{aspect-ratio:16/9; min-height:0}
  .obj--gross .obj-text{padding:26px}
  .ablauf{grid-template-columns:repeat(2, 1fr)}
  .provision,.person,.kontakt-netz{grid-template-columns:1fr}
  .person img{max-width:300px}
  .leistungen li{grid-template-columns:44px 1fr; gap:18px}
  .leistungen p{grid-column:2}
  .fuss-netz{grid-template-columns:1fr 1fr}
}

@media (max-width:720px){
  body{font-size:16px}
  html{scroll-padding-top:16px}
  /* Auf dem Handy klebt der Kopf nicht mehr — der Platz nach oben ist zu
     kostbar. relative statt static, sonst verliert das aufgeklappte Menue
     seinen Bezugsrahmen und rutscht ans Seitenende. */
  .kopf{position:relative}

  .buehne-bild{aspect-ratio:4/3}
  .buehne-bild::after{background:linear-gradient(to top, #FFFFFF 0, #FFFFFF 62px, rgba(255,255,255,0) 230px)}
  .buehne-text{margin-top:-52px}
  .band-zahlen ul{grid-template-columns:1fr}
  .band-zahlen li + li{border-left:0; border-top:1px solid var(--linie); padding-left:0}

  .objekte{grid-template-columns:1fr}
  .obj--gross{grid-column:span 1}
  .ablauf{grid-template-columns:1fr}
  .feld-zwei{grid-template-columns:1fr}
  .fuss-netz{grid-template-columns:1fr}

  /* Auf dem Handy zaehlt nur eines: anrufen oder schreiben. */
  .daumen{
    display:grid; grid-template-columns:1fr 1fr; position:fixed; z-index:80;
    left:0; right:0; bottom:0; background:var(--papier); border-top:1px solid var(--linie);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .daumen a{
    display:flex; align-items:center; justify-content:center; gap:9px;
    padding:15px 8px; text-decoration:none; font-size:.92rem; font-weight:500; color:var(--tinte);
  }
  .daumen a + a{border-left:1px solid var(--linie); background:var(--tinte); color:var(--papier)}
  body{padding-bottom:62px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important; animation:none !important}
  html{scroll-behavior:auto}
  .js .zeig{opacity:1; translate:none}
}

@media print{
  .entwurf-band,.kopf,.daumen,.buehne-bild{display:none}
  body{font-size:11pt}
}

/* ── Rechtstexte (Impressum, Datenschutz) ────────────────────────────────
   Dieser Entwurf lebt von Haarlinien und leerem Papier, und daran aendert
   ein Pflichttext nichts. Kein Kasten mit Rundung, kein farbiger Hinweis —
   der Warnkasten bekommt einen schwarzen Balken an die Seite, die
   Aufzaehlung einen Strich statt eines Punktes. Die Zeile bleibt bei 68
   Zeichen: laenger liest niemand freiwillig ein Impressum. */
.rechts-kopf{padding:clamp(46px, 5.4vw, 82px) 0 clamp(24px, 3vw, 38px)}
.rechts-kopf h1{font-size:clamp(2.1rem, 4.2vw, 3.2rem); margin-top:10px}
.rechts-kopf .lead{margin-top:16px; max-width:56ch; color:var(--text)}
.rechtstext{padding-bottom:clamp(56px, 6vw, 98px)}
.rechtstext p,.rechtstext ul,.rechtstext dl,.rechtstext address,.rechts-hinweis{
  max-width:68ch;
}
.rechtstext section{border-top:1px solid var(--linie); padding:30px 0 4px}
.rechtstext h2{font-size:clamp(1.25rem, 2vw, 1.6rem); margin-bottom:14px}
.rechtstext h3{
  font-family:var(--schrift); font-size:1rem; font-weight:600;
  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; list-style:none; padding:0}
.rechtstext ul li{color:var(--text); padding-left:22px; position:relative; margin-bottom:7px}
.rechtstext ul li::before{
  content:""; position:absolute; left:0; top:.66em;
  width:9px; height:1px; background:var(--tinte);
}
.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.9}
.rechtstext a{color:var(--tinte); text-underline-offset:3px}
.rechts-hinweis{
  background:var(--flaeche); border-left:3px solid var(--tinte);
  padding:20px 24px; margin:26px 0 30px;
}
.rechts-hinweis b{display:block; margin-bottom:6px; color:var(--tinte)}
.rechts-hinweis p{font-size:.94rem; margin-bottom:0}
/* Hier steht bewusst ".rechtstext .zurueck" und nicht nur ".zurueck":
   die Regel fuer Links im Rechtstext eine Zeile weiter oben ist genauso
   spezifisch und stuende sonst spaeter — der Knopf haette dann Schrift und
   Flaeche in derselben Farbe. */
.rechtstext .zurueck{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  font-family:var(--zahl);
  color:var(--tinte); border-bottom:1px solid var(--tinte);
  padding-bottom:3px; margin-top:34px;
  transition:color var(--tempo), border-color var(--tempo);
}
.rechtstext .zurueck:hover{color:var(--text); border-bottom-color:var(--text)}