/* ═══════════════════════════════════════════════════════════════════════════
   Entwurf 2 — „Terrakotta & Sand"
   Kortmann Immobilien · Bielefeld

   Der Gegenentwurf zu Nr. 1. Wo dort gar keine Farbe ist, ist hier ein warmer
   Sandton als Grundflaeche, und alles Wichtige liegt als weisse Karte darauf.
   Terrakotta ist die einzige Buntfarbe, und sie hat eine Aufgabe: sie zeigt,
   wo man klicken kann und was der Preis ist. Nichts sonst.

   Der Aufbau ist bewusst ein anderer, keine Umfaerbung:
     · Buehne  — Text links, Foto rechts als gerundete Karte (nicht randlos)
     · Objekte — Karteikarten mit Foto oben, zwei nebeneinander
     · Ablauf  — senkrechte Zeitachse mit Punkten (nicht drei Spalten)
     · Fragen  — einzelne weisse Karten mit Abstand (nicht ein Linienstapel)

   Kontrast: jeder Wert unten ist ausgerechnet, nicht geschaetzt.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* Flaechen */
  --sand:#F2EBDD;            /* der Grund, auf dem alles liegt              */
  --karte:#FFFFFF;           /* alles Inhaltliche liegt auf Weiss           */
  --tint:#F7E7DF;            /* ganz leichter Terrakotta-Hauch, fuer Kaesten */

  /* Schrift */
  --tinte:#1B1A17;           /* (Sand 14,67:1 · Karte 17,40:1 · Tint 14,46:1) */
  --text:#5C564C;            /* (Sand  6,12:1 · Karte  7,27:1 · Tint  6,04:1) */

  /* Die eine Buntfarbe.
     --terra traegt Weiss (5,68:1) und funktioniert selbst als Schrift auf
     Sand (4,79:1) und auf Weiss (5,68:1). Deshalb reicht hier EIN Token —
     anders als in Entwurf 3, wo Flaeche und Schrift getrennt werden muessen. */
  --terra:#9A5438;
  --terra-tief:#8E4A30;      /* nur fuer Hover (Weiss darauf 6,62:1)        */
  --salbei:#4A625D;          /* zweite, ruhige Farbe: Status „verkauft"
                                (Sand 5,54:1 · Karte 6,57: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.
                (Sand 3,54:1 · Karte 4,20:1) */
  --linie:#E3D9C6;
  --rahmen:#8A7A58;

  --display:'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --schrift:'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --zahl:'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --rund:14px;               /* Karten duerfen hier deutlich rund sein      */
  --rund-klein:8px;
  --pille:999px;
  --schatten:0 1px 2px rgba(27,26,23,.05), 0 8px 26px rgba(27,26,23,.06);
  --tempo:.3s cubic-bezier(.2,.7,.3,1);
  --spalte:1160px;
}

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

html{scroll-behavior:smooth; scroll-padding-top:88px}
body{
  margin:0; background:var(--sand); color:var(--text);
  font-family:var(--schrift); font-size:17px; line-height:1.68;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}

h1,h2,h3,h4{
  font-family:var(--display); color:var(--tinte); margin:0;
  line-height:1.16; letter-spacing:-.015em; text-wrap:balance; font-weight:600;
}
p{margin:0; text-wrap:pretty}
img{display:block; max-width:100%}

/* Diese Zeile ist keine Kosmetik. Ein <svg> ohne width/height ist fuer den
   Browser ein ersetztes Element ohne eigenes Mass und faellt auf 300x150px
   zurueck — ein Knopf mit Symbol darin sprengt dann die ganze Zeile. 1em
   heisst: das Symbol waechst mit der Schrift, in der es steht. flex:none,
   damit es als Flex-Kind nicht zusammengedrueckt wird. */
svg{width:1em; height:1em; fill:currentColor; flex:none}

.wrap{width:100%; max-width:var(--spalte); margin-inline:auto; padding-inline:22px}

.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:12px; left:12px; width:auto; height:auto; margin:0;
  clip-path:none; padding:12px 18px; background:var(--tinte); color:var(--sand);
  border-radius:var(--rund-klein); z-index:200;
}

:focus-visible{outline:2px solid var(--terra); outline-offset:3px}
/* Auf einer Terrakotta-Flaeche waere Terrakotta unsichtbar — dort nimmt der
   Fokusring die Tinte (3,07:1 gegen Terrakotta, reicht fuer Bedienelemente). */
.knopf:focus-visible,.daumen a + a:focus-visible{outline-color:var(--tinte)}

.rubrik{
  display:inline-block; font-family:var(--zahl); font-size:.7rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--terra);
}
.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:.96rem; font-weight:600; line-height:1;
  padding:16px 26px; border-radius:var(--pille);
  background:var(--terra); color:#FFFFFF; border:1.5px solid var(--terra);
  transition:background var(--tempo), border-color var(--tempo);
}
.knopf:hover{background:var(--terra-tief); border-color:var(--terra-tief)}
.knopf--leer{background:transparent; color:var(--terra); border-color:var(--rahmen)}
.knopf--leer:hover{background:var(--tint); border-color:var(--terra)}

/* Einblenden. Ohne JS steht alles sofort da. */
.js .zeig{opacity:0; translate:0 16px; 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(--sand); 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; color:#FFFFFF}
.entwurf-band a{margin-left:auto; color:var(--sand); text-underline-offset:3px}

/* ── Kopf ───────────────────────────────────────────────────────────────── */
.kopf{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--sand) 88%, 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:24px; height:74px}

.marke{
  display:flex; align-items:center; gap:11px; text-decoration:none;
  color:var(--tinte); flex:none; white-space:nowrap;
}
/* Das Monogramm ist der einzige Ort, an dem Terrakotta eine ganze Flaeche
   fuellt, ohne dass daneben ein Preis steht. */
.marke i{
  display:grid; place-items:center; width:36px; height:36px; flex:none;
  background:var(--terra); color:#FFFFFF; border-radius:var(--rund-klein);
  font-family:var(--display); font-style:normal; font-weight:600; font-size:1rem;
}
.marke b{font-family:var(--display); font-weight:600; font-size:1.16rem; letter-spacing:-.02em}

.menue{display:flex; gap:24px; margin-left:auto; flex:none}
.menue a{
  text-decoration:none; font-size:.93rem; color:var(--text); white-space:nowrap;
  transition:color var(--tempo);
}
.menue a:hover{color:var(--terra)}

/* 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:12px 20px; 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:2px; background:var(--tinte); margin:5px 0; border-radius:2px; transition:translate var(--tempo), rotate var(--tempo), opacity var(--tempo)}
.burger[aria-expanded="true"] i:nth-child(1){translate:0 7px; rotate:45deg}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){translate:0 -7px; rotate:-45deg}

/* ── Bühne: Text links, Foto rechts als Karte ──────────────────────────── */
.buehne{padding:clamp(38px, 5vw, 74px) 0 clamp(30px, 4vw, 54px)}
.buehne-netz{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px, 4vw, 56px); align-items:center}
.buehne h1{font-size:clamp(2.2rem, 4.6vw, 3.5rem); margin:14px 0 0; max-width:14ch}
.buehne .lead{margin-top:20px; font-size:1.06rem; max-width:46ch}
.buehne-tun{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}

.buehne-bild{position:relative}
.buehne-bild img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--rund); box-shadow:var(--schatten);
}
/* Die kleine Karte, die halb ueber dem Foto liegt: der Satz, der die ganze
   Seite traegt. Sie steht bewusst auf Weiss, damit sie unabhaengig vom Foto
   lesbar bleibt — Text auf Bild ist nie zuverlaessig kontrastsicher. */
.buehne-notiz{
  position:absolute; left:-14px; bottom:-22px; max-width:270px;
  background:var(--karte); border-radius:var(--rund); box-shadow:var(--schatten);
  padding:18px 20px;
}
.buehne-notiz .zahl{display:block; font-size:1.5rem; line-height:1.1}
.buehne-notiz small{display:block; font-size:.84rem; margin-top:6px; line-height:1.5}

/* Drei Merkzahlen als Chips — nicht als Linienband wie in Entwurf 1. */
.chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:clamp(34px, 5vw, 60px); padding:0; list-style:none}
.chips li{
  display:flex; align-items:baseline; gap:9px;
  background:var(--karte); border:1px solid var(--linie);
  border-radius:var(--pille); padding:10px 18px; font-size:.9rem;
}
.chips .zahl{font-size:1rem}

/* ── Abschnitte ─────────────────────────────────────────────────────────── */
.teil{padding:clamp(54px, 7vw, 96px) 0}
.teil--weiss{background:var(--karte)}
.teil-kopf{max-width:58ch; margin-bottom:clamp(28px, 4vw, 46px)}
.teil-kopf h2{font-size:clamp(1.8rem, 3.6vw, 2.7rem); margin-top:10px}
.teil-kopf p{margin-top:14px}

/* ── Objekte: Karteikarten, zwei nebeneinander ──────────────────────────── */
.objekte{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:22px}
.obj{
  background:var(--karte); border:1px solid var(--linie); border-radius:var(--rund);
  overflow:clip; display:flex; flex-direction:column;
  transition:box-shadow var(--tempo), translate var(--tempo);
}
.obj:hover{box-shadow:var(--schatten); translate:0 -3px}
.obj-bild{position:relative; aspect-ratio:16/10; overflow:clip; background:var(--tint)}
/* 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}

/* Der Status wird ueber Fuellung UND Wort unterschieden, nicht ueber die
   Farbe allein — sonst waere er fuer jemanden, der Farben nicht trennt,
   nur ein Fleck. */
.status{
  position:absolute; left:14px; top:14px; z-index:2;
  font-family:var(--zahl); font-size:.66rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  padding:7px 13px; border-radius:var(--pille);
  background:var(--karte); color:var(--terra); border:1.5px solid var(--terra);
}
.status--weg{background:var(--salbei); color:#FFFFFF; border-color:var(--salbei)}

.obj-text{padding:22px 22px 24px; display:flex; flex-direction:column; flex:1}
.obj-text h3{font-size:1.24rem}
.obj-ort{display:block; font-size:.9rem; margin-top:6px}

/* Der Preis ist das Einzige, was in Terrakotta gesetzt ist. */
.obj-preis{margin-top:16px; font-family:var(--zahl); font-weight:500; font-size:1.28rem; color:var(--terra)}
.obj-preis small{display:block; font-family:var(--schrift); font-size:.78rem; font-weight:400; color:var(--text); margin-top:3px}

.obj-daten{list-style:none; margin:16px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.obj-daten li{
  background:var(--sand); border-radius:var(--rund-klein);
  padding:7px 12px; font-size:.82rem;
}
.obj-daten b{font-family:var(--zahl); font-weight:500; color:var(--tinte)}

/* ── 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 6,0:1 gegen die getoente Flaeche — klein heisst
   nicht blass. */
.geb{
  margin-top:18px; padding:13px 15px; background:var(--tint);
  border-radius:var(--rund-klein); font-family:var(--zahl);
  font-size:.72rem; line-height:1.72;
}
.geb b{display:block; font-weight:500; color:var(--terra); letter-spacing:.1em; text-transform:uppercase; font-size:.65rem; margin-bottom:5px}

.obj-mehr{
  margin-top:18px; align-self:flex-start; text-decoration:none;
  font-size:.92rem; font-weight:600; color:var(--terra);
  border-bottom:1.5px solid var(--linie); padding-bottom:2px;
  transition:border-color var(--tempo);
}
.obj-mehr:hover{border-bottom-color:var(--terra)}

/* ── Leistungen: vier Karten im Raster ─────────────────────────────────── */
.leistungen{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:20px}
.leistungen li{
  background:var(--karte); border:1px solid var(--linie);
  border-radius:var(--rund); padding:26px 26px 28px;
}
/* Auf weissem Grund waere eine weisse Karte unsichtbar — dort dreht sich das
   Verhaeltnis um und die Karte nimmt den Sandton. */
.teil--weiss .leistungen li{background:var(--sand); border-color:transparent}
.leistungen .sym{
  display:grid; place-items:center; width:44px; height:44px; margin-bottom:16px;
  background:var(--tint); border-radius:var(--rund-klein); color:var(--terra);
}
.leistungen .sym svg{width:21px; height:21px}
.leistungen h3{font-size:1.1rem; margin-bottom:8px}
.leistungen p{font-size:.94rem}

/* ── Ablauf: senkrechte Zeitachse ──────────────────────────────────────── */
.ablauf{list-style:none; margin:0; padding:0 0 0 34px; position:relative; max-width:74ch}
/* Die durchgehende Linie ist reine Zier — sie traegt keine Information, die
   nicht auch im Text steht. Deshalb darf sie so hell sein. */
.ablauf::before{content:""; position:absolute; left:9px; top:10px; bottom:10px; width:2px; background:var(--linie)}
.ablauf li{position:relative; padding:0 0 30px}
.ablauf li:last-child{padding-bottom:0}
.ablauf li::before{
  content:""; position:absolute; left:-30px; top:8px; width:20px; height:20px;
  border-radius:50%; background:var(--sand); border:2px solid var(--terra);
}
.teil--weiss .ablauf li::before{background:var(--karte)}
.ablauf .nr{display:block; font-family:var(--zahl); font-size:.7rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--terra); margin-bottom:6px}
.ablauf h3{font-size:1.14rem; margin-bottom:7px}
.ablauf p{font-size:.95rem}

/* ── Provision: eine getoente Karte ────────────────────────────────────── */
/* 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 Karte damit breiter als den Bildschirm — auf dem Handy
   gab das einen waagerechten Rollbalken. Mit minmax(0,…) darf sie schrumpfen. */
.prov-netz{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(26px, 4vw, 54px); align-items:start}
.prov-karte{background:var(--karte); border-radius:var(--rund); padding:clamp(24px, 3vw, 34px); box-shadow:var(--schatten)}
.prov-liste{list-style:none; margin:0; padding:0}
.prov-liste li{display:flex; justify-content:space-between; gap:18px; align-items:baseline; padding:15px 0; border-bottom:1px solid var(--linie)}
.prov-liste li:last-child{border-bottom:0; padding-bottom:0}
.prov-liste span{font-size:.94rem}
.prov-liste .zahl{font-size:1rem; color:var(--terra); white-space:nowrap}
/* Eine Ausnahme: hinter der Zahl steht einmal ein langes Wort
   ("Netto&shy;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:20px; font-size:.9rem}
/* Der Hauch Terrakotta allein reicht auf Sandgrund nicht — die beiden Toene
   liegen zu dicht beieinander. Der Umriss macht aus der Toenung einen Kasten. */
.prov-kasten{background:var(--tint); border:1px solid var(--linie); border-radius:var(--rund); padding:24px 26px}
.prov-kasten h3{font-size:1.08rem; margin-bottom:10px}
.prov-kasten p + p{margin-top:12px}
.prov-kasten p{font-size:.94rem}

/* ── Person ─────────────────────────────────────────────────────────────── */
.person{display:grid; grid-template-columns:minmax(0,300px) 1fr; gap:clamp(26px, 4vw, 56px); align-items:center}
.person img{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--rund); box-shadow:var(--schatten)}
.person blockquote{
  margin:0; font-family:var(--display); font-weight:600;
  font-size:clamp(1.3rem, 2.5vw, 1.95rem); line-height:1.3;
  color:var(--tinte); letter-spacing:-.02em;
}
.person .wer{margin-top:20px; font-size:.93rem}
.person .wer b{display:block; color:var(--tinte); font-weight:600}

/* ── Fragen: einzelne Karten mit Abstand ───────────────────────────────── */
.fragen{display:grid; gap:12px; max-width:78ch}
.fragen details{background:var(--karte); border:1px solid var(--linie); border-radius:var(--rund); overflow:clip}
.fragen details[open]{border-color:var(--terra)}
.fragen summary{
  display:flex; align-items:center; gap:16px; cursor:pointer; list-style:none;
  padding:20px 22px; font-family:var(--display); font-weight:600;
  font-size:1.04rem; color:var(--tinte);
}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{
  content:""; margin-left:auto; flex:none; width:10px; height:10px;
  border-right:2px solid var(--terra); border-bottom:2px solid var(--terra);
  rotate:45deg; translate:0 -3px; transition:rotate var(--tempo);
}
.fragen details[open] summary::after{rotate:-135deg; translate:0 2px}
.fragen .antwort{padding:0 22px 22px; max-width:66ch; font-size:.96rem}
.fragen .antwort p + p{margin-top:11px}

/* ── Kontakt ────────────────────────────────────────────────────────────── */
.kontakt-netz{display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(26px, 4vw, 56px); align-items:start}
.form-karte{background:var(--karte); border-radius:var(--rund); padding:clamp(24px, 3vw, 34px); box-shadow:var(--schatten)}
/* Gleiche Umkehrung wie bei den Leistungen: auf weissem Grund traegt die
   Karte den Sandton, damit sie ueberhaupt als Karte zu erkennen ist.
   Nebeneffekt: die Eingabefelder bleiben weiss und heben sich deutlicher ab. */
.teil--weiss .form-karte,.teil--weiss .daten li{background:var(--sand); box-shadow:none}

.feld{display:block; margin-bottom:15px}
.feld > span{display:block; font-size:.86rem; font-weight:600; color:var(--tinte); margin-bottom:6px}
.feld input,.feld select,.feld textarea{
  width:100%; font:inherit; font-size:.96rem; color:var(--tinte);
  background:var(--karte); border:1.5px solid var(--rahmen);
  border-radius:var(--rund-klein); padding:12px 14px;
  transition:border-color var(--tempo);
}
.feld textarea{min-height:112px; resize:vertical}
.feld input:hover,.feld select:hover,.feld textarea:hover{border-color:var(--terra)}
.feld input:focus-visible,.feld select:focus-visible,.feld textarea:focus-visible{border-color:var(--terra)}
.feld-zwei{display:grid; grid-template-columns:1fr 1fr; gap:0 15px}
.form-fuss{margin-top:4px; font-size:.85rem}
.anfrage-tun{display:flex; flex-wrap:wrap; gap:12px; margin-top:18px}

.daten{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.daten li{
  display:flex; gap:14px; align-items:flex-start;
  background:var(--karte); border-radius:var(--rund); padding:16px 18px;
}
.daten svg{width:19px; height:19px; color:var(--terra); flex:none; margin-top:3px}
.daten .lab{display:block; font-size:.76rem; font-weight:600; color:var(--text); margin-bottom:2px}
.daten a{color:var(--tinte); text-decoration:none; border-bottom:1px solid var(--linie)}
.daten a:hover{border-bottom-color:var(--terra)}
.daten b{color:var(--tinte); font-weight:600}

/* ── Fuß ────────────────────────────────────────────────────────────────── */
.fuss{background:var(--tinte); color:var(--sand); padding:52px 0 38px; font-size:.92rem}
.fuss h3{font-family:var(--zahl); font-size:.66rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--sand); opacity:.8; margin-bottom:14px}
.fuss-netz{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px}
.fuss ul{list-style:none; margin:0; padding:0}
.fuss li{margin-bottom:8px}
.fuss a{color:var(--sand); text-decoration:none}
.fuss a:hover{text-decoration:underline; text-underline-offset:3px}
.fuss .marke{color:var(--sand)}
.fuss .marke b{color:#FFFFFF}
.fuss-unten{margin-top:36px; padding-top:20px; border-top:1px solid rgba(242,235,221,.22); display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; font-size:.84rem}

/* ── 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. */
  .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(--sand); border-bottom:1px solid var(--linie);
    padding:6px 22px 18px; display:none;
  }
  .menue[data-offen="1"]{display:flex}
  .menue a{padding:13px 0; border-bottom:1px solid var(--linie)}

  .buehne-netz{grid-template-columns:1fr}
  .buehne-bild{order:-1}
  .buehne-notiz{left:auto; right:-6px; bottom:-18px; max-width:230px}
  .buehne h1{max-width:none}
  .prov-netz,.kontakt-netz,.person{grid-template-columns:1fr}
  .person img{max-width:280px}
}

@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}

  .objekte,.leistungen{grid-template-columns:1fr}
  .feld-zwei{grid-template-columns:1fr}
  .fuss-netz{grid-template-columns:1fr}
  .buehne-notiz{position:static; max-width:none; margin-top:14px}

  /* 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(--karte); 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:.93rem; font-weight:600; color:var(--tinte);
  }
  .daumen a + a{background:var(--terra); color:#FFFFFF}
  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{display:none}
  body{background:#fff; font-size:11pt}
  .obj,.prov-karte,.form-karte{box-shadow:none; break-inside:avoid}
}

/* ── Rechtstexte (Impressum, Datenschutz) ────────────────────────────────
   Der warme Entwurf darf auch beim Pflichttext warm bleiben: der Text sitzt
   auf einer weissen Karte mit Rundung, der Hinweiskasten bekommt den
   Tint-Ton und einen Terrakotta-Balken. Wichtig ist nur, dass die Karte auf
   dem Sandgrund steht und nicht der Text direkt darauf — Fliesstext auf
   Sand liest sich deutlich muehsamer als auf Weiss. */
.rechts-kopf{padding:clamp(44px, 5.2vw, 78px) 0 clamp(20px, 2.4vw, 30px)}
.rechts-kopf h1{font-size:clamp(2rem, 4vw, 3rem); margin-top:10px}
.rechts-kopf .lead{margin-top:16px; max-width:56ch; color:var(--text)}
.rechtstext{padding-bottom:clamp(56px, 6vw, 96px)}
.rechtstext .wrap > section,.rechtstext > .wrap{max-width:var(--spalte)}
.rechtstext p,.rechtstext ul,.rechtstext dl,.rechtstext address,.rechts-hinweis{
  max-width:68ch;
}
.rechtstext section{
  background:var(--karte); border:1px solid var(--linie);
  border-radius:var(--rund); box-shadow:var(--schatten);
  padding:26px clamp(22px, 3vw, 34px) 24px; margin-bottom:16px;
}
.rechtstext h2{font-size:clamp(1.2rem, 2vw, 1.55rem); 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:24px; position:relative; margin-bottom:7px}
.rechtstext ul li::before{
  content:""; position:absolute; left:0; top:.56em;
  width:8px; height:8px; border-radius:50%; background:var(--terra);
}
.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(--terra); text-underline-offset:3px}
.rechtstext a:hover{color:var(--terra-tief)}
.rechts-hinweis{
  background:var(--tint); border-left:3px solid var(--terra);
  border-radius:var(--rund-klein);
  padding:20px 24px; margin:24px 0 26px;
}
.rechts-hinweis b{display:block; margin-bottom:6px; color:var(--tinte)}
.rechts-hinweis p{font-size:.94rem; margin-bottom:0; color:var(--text)}
/* Der Knopf traegt hier Flaeche statt Unterstrich. Die Regel muss nach
   ".rechtstext a" stehen, sonst faerbt die den Text terrakotta — auf
   terrakottafarbener Flaeche waere er dann unlesbar. */
.rechtstext .zurueck{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  font-size:.9rem; font-weight:600;
  background:var(--terra); color:#FFFFFF;
  border-radius:var(--pille); padding:12px 22px; margin-top:26px;
  transition:background var(--tempo), translate var(--tempo);
}
.rechtstext .zurueck:hover{background:var(--terra-tief); color:#FFFFFF; translate:0 -2px}