/* ═══════════════════════════════════════════════════════════════════════════
   Kortmann Immobilien — Entwurf 3 · „Portal"
   ───────────────────────────────────────────────────────────────────────────
   Der Gedanke: Entwurf 1 verkauft über das Bild, Entwurf 2 über die Wärme.
   Dieser hier verkauft über die ZAHL. Er sieht aus wie ein gut gemachtes
   Immobilienportal — nur ohne das Geschrei: dunkelblaue Bänder oben und
   unten, dazwischen weiße Fläche, und alles Zählbare in einer Schreibmaschinen-
   schrift, damit Preise und Quadratmeter untereinander bündig stehen.

   Was hier baulich anders ist als in Entwurf 1 und 2 — das ist der Punkt der
   ganzen Übung, es soll keine Umfärbung sein:

     · Über dem Kopf liegt ein dunkles Dienstband mit Telefon, E-Mail und
       Erreichbarkeit. Weder 1 noch 2 haben so etwas.
     · Die Bühne ist kein Foto, sondern eine dunkle Fläche mit einer weißen
       Karte, die unten heraushängt — die „Kurzanfrage".
     · Die Objekte stehen NICHT als Karten nebeneinander, sondern als
       Trefferliste untereinander: Bild links, Datentabelle rechts. Darüber
       eine Zeile, die die Trefferzahl nennt.
     · Der Ablauf läuft waagerecht als Fortschrittsleiste, nicht senkrecht.
     · Die Provision ist eine echte <table> mit Kopfzeile.
     · Person und Kontakt liegen auf dunklem Grund, die Farben drehen sich um.

   Alle Farbwerte unten tragen ihr geprüftes Kontrastverhältnis im Kommentar.
   Die Werte sind gerechnet, nicht geschätzt.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --papier:#FFFFFF;
  --flaeche:#F6F7F9;         /* der ruhige Wechselgrund zwischen den Teilen   */
  --tinte:#101322;           /* (Papier 18,45:1 · Fläche 17,21:1)             */
  --text:#5A6072;            /* (Papier  6,27:1 · Fläche  5,85:1)             */

  /* Das dunkle Blau ist keine Buntfarbe im engeren Sinn, sondern der zweite
     Grund. Weiß darauf steht mit 16,90:1 — das ist mehr Luft als nötig, und
     genau deshalb kann darauf auch dünne Schrift stehen. */
  --navy:#141A3C;
  --navy-karte:#1C2350;      /* Karte im dunklen Teil (Weiß darauf 14,94:1)   */
  --navy-text:#B9BFD4;       /* Fließtext auf Navy (9,23:1 · auf Karte 8,16:1)*/
  --navy-linie:#2E3560;      /* nur Zier                                      */
  --navy-rahmen:#6A7296;     /* Formularfelder im dunklen Teil (3,59:1)       */

  /* Die eine echte Buntfarbe, in zwei Helligkeiten — weil sie auf hellem UND
     auf dunklem Grund funktionieren muss. Ein Ton allein schafft das nicht:
     --gruen ist auf Navy zu dunkel, --gruen-hell auf Weiß zu blass. */
  --gruen:#0F6B42;           /* auf hell: Weiß darauf 6,56 · als Schrift 6,56/6,12 */
  --gruen-tief:#0C5B38;      /* nur Hover (Weiß darauf 8,17:1)                */
  --gruen-hell:#3FBF83;      /* auf dunkel: Schrift auf Navy 7,24 · Navy darauf 7,24 */
  --gruen-hell-hov:#5ED09B;  /* Hover im dunklen Teil (Navy darauf 8,83:1)    */
  --gruen-hauch:#E7F4ED;     /* Tönung (Tinte 16,31 · Grün 5,80 · Text 5,54)  */

  --verkauft:#6B7180;        /* Status „verkauft" (Papier 4,88 · Fläche 4,56) */

  /* Zwei Grautöne, kein Versehen: --linie ist reine Zier und darf hell sein,
     --rahmen umschließt Formularfelder. Ein Eingabefeld ist ein Bedienelement
     und muss nach WCAG 1.4.11 mindestens 3:1 gegen seinen Grund erreichen —
     eine Zierlinie muss das nicht. */
  --linie:#E3E6EC;           /* (nur Zier, 1,25:1)                            */
  --rahmen:#787E90;          /* (Papier 4,05:1 · Fläche 3,78:1)               */

  --display:'Manrope', 'Helvetica Neue', Arial, sans-serif;
  --schrift:'Manrope', 'Helvetica Neue', Arial, sans-serif;
  /* Alles Zählbare läuft in einer Festbreitenschrift. Das ist hier kein
     Stilzitat: in einer Trefferliste stehen Preise und Quadratmeter
     untereinander, und nur dicktengleiche Ziffern stehen dabei bündig. */
  --zahl:'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --rund:10px;
  --rund-klein:6px;
  --pille:999px;
  --schatten:0 1px 2px rgba(16,19,34,.06), 0 10px 30px rgba(16,19,34,.07);
  --schatten-hoch:0 2px 6px rgba(16,19,34,.08), 0 18px 44px rgba(16,19,34,.12);
  --tempo:.28s cubic-bezier(.2,.7,.3,1);
  --spalte:1180px;
}

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

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

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

/* Ohne diese Zeile ist ein <svg> ohne Maßangabe für den Browser 300×150px
   groß — ein Knopf mit Symbol darin sprengt dann die Zeile. 1em heißt: das
   Symbol wächst mit der Schrift, in der es steht. */
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:#fff;
  border-radius:var(--rund-klein); z-index:200;
}

:focus-visible{outline:2px solid var(--gruen); outline-offset:3px}
/* Auf dunklem Grund wäre das dunkle Grün unsichtbar — dort übernimmt der
   helle Ton den Fokusring. */
.teil--navy :focus-visible,.buehne :focus-visible,.fuss :focus-visible,
.dienstband :focus-visible{outline-color:var(--gruen-hell)}

/* ── Einblenden ──────────────────────────────────────────────────────────── */
.js .zeig{opacity:0; translate:0 14px; transition:opacity .5s ease var(--verz,0s), translate .5s cubic-bezier(.2,.7,.3,1) var(--verz,0s)}
.js .zeig[data-da="1"]{opacity:1; translate:0 0}
.zeig{--verz:calc(var(--i,0) * .07s)}

/* ── Entwurfs-Band ───────────────────────────────────────────────────────── */
.entwurf-band{background:var(--tinte); color:#fff; font-size:.84rem; padding:9px 0}
.entwurf-band .wrap{display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px}
.entwurf-band b{font-weight:800}
.entwurf-band span{color:#C9CCD8}
.entwurf-band a{color:#fff; margin-left:auto; text-underline-offset:3px}

/* ── Dienstband ──────────────────────────────────────────────────────────
   Das schmale dunkle Band über dem Kopf. Es trägt keine Navigation, nur
   Erreichbarkeit — dadurch bleibt der eigentliche Kopf frei für die Marke
   und die sechs Menüpunkte. Auf dem Handy fällt es weg, dort übernimmt die
   Daumenleiste unten. */
.dienstband{background:var(--navy); color:var(--navy-text); font-size:.86rem}
.dienstband .wrap{display:flex; align-items:center; gap:10px 26px; min-height:40px; flex-wrap:wrap}
.dienstband a,.dienstband span{display:inline-flex; align-items:center; gap:7px; color:inherit; text-decoration:none}
.dienstband a:hover{color:#fff; text-decoration:underline; text-underline-offset:3px}
.dienstband .rechts{margin-left:auto}
.dienstband svg{color:var(--gruen-hell)}

/* ── Kopf ────────────────────────────────────────────────────────────────── */
.kopf{
  position:sticky; top:0; z-index:60; background:var(--papier);
  border-bottom:1px solid transparent; transition:border-color var(--tempo), box-shadow var(--tempo);
}
.kopf[data-gescrollt="1"]{border-bottom-color:var(--linie); box-shadow:0 1px 14px rgba(16,19,34,.05)}
.kopf .wrap{display:flex; align-items:center; gap:16px; min-height:70px}

/* Ein gefülltes Quadrat mit Monogramm statt einer reinen Wortmarke — das ist
   die Handschrift eines Portals, und es funktioniert auch als Favicon. */
.marke{display:flex; align-items:center; gap:11px; text-decoration:none; flex:none; white-space:nowrap}
.marke i{
  display:grid; place-items:center; width:34px; height:34px; flex:none;
  background:var(--gruen); color:#fff; border-radius:var(--rund-klein);
  font-family:var(--display); font-weight:800; font-size:1.02rem; font-style:normal;
}
.marke b{font-family:var(--display); font-weight:800; font-size:1.06rem; color:var(--tinte); letter-spacing:-.02em}

.menue{display:flex; gap:24px; margin-left:auto; flex:none}
.menue a{
  color:var(--text); text-decoration:none; font-size:.94rem; font-weight:500;
  white-space:nowrap; padding:5px 0; border-bottom:2px solid transparent;
  transition:color var(--tempo), border-color var(--tempo);
}
.menue a:hover{color:var(--tinte); border-bottom-color:var(--gruen)}

/* flex:none und nowrap sind Pflicht, nicht Geschmack: als Flex-Kind würde der
   Knopf sonst mitschrumpfen, die Beschriftung bräche um und die Pille
   schnitte sie ab. Lieber klappt der Kopf früh auf den Burger. */
.kopf .knopf{padding:10px 20px; font-size:.9rem; flex:none; white-space:nowrap}

.burger{
  display:none; margin-left:auto; background:none; border:1px solid var(--linie);
  border-radius:var(--rund-klein); width:44px; height:40px; cursor:pointer;
  padding:0; place-items:center; gap:5px;
}
.burger i{display:block; width:19px; height:2px; background:var(--tinte); border-radius:2px}

/* ── Knöpfe ──────────────────────────────────────────────────────────────── */
.knopf{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 26px; border-radius:var(--rund-klein); border:1px solid var(--gruen);
  background:var(--gruen); color:#fff; text-decoration:none;
  font-family:var(--display); font-weight:700; font-size:.97rem; line-height:1.2;
  cursor:pointer; white-space:nowrap;
  transition:background var(--tempo), border-color var(--tempo), translate var(--tempo);
}
.knopf:hover{background:var(--gruen-tief); border-color:var(--gruen-tief); translate:0 -1px}
.knopf--leer{background:transparent; color:var(--gruen); border-color:var(--rahmen)}
.knopf--leer:hover{background:var(--gruen-hauch); color:var(--gruen-tief); border-color:var(--gruen)}

/* Im dunklen Teil dreht sich alles um: heller Grund, dunkle Schrift. */
.teil--navy .knopf,.buehne .knopf{background:var(--gruen-hell); border-color:var(--gruen-hell); color:var(--navy)}
.teil--navy .knopf:hover,.buehne .knopf:hover{background:var(--gruen-hell-hov); border-color:var(--gruen-hell-hov)}
.teil--navy .knopf--leer,.buehne .knopf--leer{background:transparent; color:#fff; border-color:var(--navy-rahmen)}
.teil--navy .knopf--leer:hover,.buehne .knopf--leer:hover{background:var(--navy-karte); border-color:#fff}

/* ── Rubrik ──────────────────────────────────────────────────────────────
   Die kleine Zeile über jeder Überschrift. Ein grüner Strich davor statt
   Großbuchstaben-Sperrung — ruhiger und in der Schrift besser lesbar. */
.rubrik{
  display:inline-flex; align-items:flex-start; gap:10px;
  font-family:var(--zahl); font-size:.76rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--gruen); font-weight:500;
}
/* flex-start statt center, und der Strich wird per margin-top auf die Mitte
   der ERSTEN Zeile gesetzt. Bei center rutscht er auf schmalen Bildschirmen,
   wo die Rubrik zweizeilig umbricht, in die Mitte zwischen beide Zeilen und
   sieht dann aus wie ein Fehler. */
.rubrik::before{content:""; width:22px; height:2px; background:var(--gruen); flex:none; margin-top:.62em}
.teil--navy .rubrik,.buehne .rubrik,.fuss .rubrik{color:var(--gruen-hell)}
.teil--navy .rubrik::before,.buehne .rubrik::before,.fuss .rubrik::before{background:var(--gruen-hell)}

/* ── Bühne ───────────────────────────────────────────────────────────────
   Dunkle Fläche, zweispaltig: links das Versprechen, rechts eine Tafel mit
   den drei Zahlen. Unten hängt die Kurzanfrage-Karte heraus und ragt in den
   nächsten Teil hinein — daher der große Innenabstand unten und der negative
   Rand an der Karte. */
.buehne{background:var(--navy); color:var(--navy-text); padding:74px 0 0; position:relative}
.buehne-netz{display:grid; grid-template-columns:1.25fr .85fr; gap:56px; align-items:center}
.buehne h1{
  color:#fff; font-size:clamp(2.3rem,4.6vw,3.7rem); margin-top:18px; font-weight:800;
}
.buehne h1 em{font-style:normal; color:var(--gruen-hell)}
.buehne .lead{margin-top:20px; font-size:1.1rem; max-width:52ch; line-height:1.66}
.buehne-tun{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}

/* Die Tafel rechts: drei Zahlen, dünn getrennt. Bewusst keine Kacheln —
   Entwurf 2 hat Kacheln, dieser hier soll wie ein Datenblatt wirken. */
.tafel{
  background:var(--navy-karte); border:1px solid var(--navy-linie);
  border-radius:var(--rund); padding:6px 26px;
}
.tafel dl{margin:0}
.tafel div{padding:20px 0; border-bottom:1px solid var(--navy-linie)}
.tafel div:last-child{border-bottom:0}
.tafel dt{font-size:.86rem; color:var(--navy-text); margin-bottom:5px}
.tafel dd{
  margin:0; font-family:var(--zahl); font-size:1.55rem; color:#fff;
  font-weight:500; letter-spacing:-.01em;
}

/* ── Kurzanfrage ─────────────────────────────────────────────────────────
   Sieht aus wie eine Suchleiste, ist aber keine: sie sucht nichts, sondern
   nimmt die Eckdaten auf und übergibt sie unten an das Anfrageformular. Eine
   Suche, die nur so tut, wäre eine Lüge gegenüber dem Besucher — deshalb
   heißt der Knopf „Anfrage vorbereiten" und nicht „Suchen". */
.kurz{
  background:var(--papier); border-radius:var(--rund); box-shadow:var(--schatten-hoch);
  padding:22px 24px; margin-top:56px; translate:0 34px; position:relative; z-index:2;
}
.kurz-kopf{
  display:flex; align-items:baseline; gap:10px 16px; flex-wrap:wrap;
  margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid var(--linie);
}
.kurz-kopf b{font-family:var(--display); color:var(--tinte); font-weight:800; font-size:1rem}
.kurz-kopf span{font-size:.88rem; color:var(--text)}
.kurz-netz{display:grid; grid-template-columns:repeat(3,1fr) auto; gap:14px; align-items:end}
.kurz .feld span{font-size:.8rem}
.kurz .knopf{padding:13px 24px; height:48px}
/* Der weiße Kasten steht auf weißem Grund, sobald er in den nächsten Teil
   hineinragt. Ohne die eigene Umrandung verlöre er dort seine Kante — der
   Schatten allein trägt das nicht bei jedem Bildschirm. */
.kurz{border:1px solid var(--linie)}

/* Abstand nach der Bühne: die Karte hängt 34px heraus, der nächste Teil
   braucht diese 34px zusätzlich, sonst klebt seine Überschrift daran. */
.buehne{padding-bottom:0}
.nach-buehne{padding-top:80px}

/* ── Teile ───────────────────────────────────────────────────────────────── */
.teil{padding:78px 0}
.teil--flaeche{background:var(--flaeche)}
.teil--navy{background:var(--navy); color:var(--navy-text)}
.teil--navy h2,.teil--navy h3,.teil--navy h4{color:#fff}

.teil-kopf{max-width:66ch; margin-bottom:38px}
.teil-kopf h2{font-size:clamp(1.85rem,3.4vw,2.7rem); margin-top:14px}
.teil-kopf p{margin-top:16px}

/* ── Trefferzeile ────────────────────────────────────────────────────────
   Die Zeile über der Liste. Sie zählt die Treffer und zeigt die Sortierung —
   genau das, was ein Portal an dieser Stelle zeigt. Die Sortierung ist hier
   ohne Funktion hinterlegt und deshalb als Text ausgezeichnet, nicht als
   Bedienelement: ein Auswahlfeld, das nichts tut, wäre irreführend. */
.trefferzeile{
  display:flex; align-items:center; gap:10px 18px; flex-wrap:wrap;
  padding:14px 18px; background:var(--flaeche); border:1px solid var(--linie);
  border-radius:var(--rund); margin-bottom:20px; font-size:.9rem;
}
.teil--flaeche .trefferzeile{background:var(--papier)}
.trefferzeile b{font-family:var(--zahl); color:var(--tinte); font-weight:500}
.trefferzeile .rechts{margin-left:auto; color:var(--text)}

/* ── Trefferliste ────────────────────────────────────────────────────────
   Untereinander, nicht nebeneinander — das ist der auffälligste bauliche
   Unterschied zu den anderen beiden Entwürfen. Bild links in fester Breite,
   Daten rechts als kleine Tabelle. */
.liste{display:grid; gap:14px}
.treffer{
  display:grid; grid-template-columns:290px 1fr; gap:0;
  background:var(--papier); border:1px solid var(--linie); border-radius:var(--rund);
  overflow:hidden; transition:box-shadow var(--tempo), border-color var(--tempo);
}
.teil--flaeche .treffer{background:var(--papier)}
.treffer:hover{box-shadow:var(--schatten); border-color:#CFD5DF}

.treffer-bild{position:relative; aspect-ratio:4/3; background:var(--flaeche); overflow:hidden}
/* Absolut gesetzt, nicht nur height:100%. Gegen eine unbestimmte Höhe fällt
   height:100% auf auto zurück — ein Foto mit anderem Seitenverhältnis zöge
   den Kasten dann auf seine eigene Höhe, und die Zeilen stünden
   unterschiedlich hoch. Der Kasten gibt das Maß vor, das Bild füllt es. */
.treffer-bild img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  scale:1; transition:scale .7s cubic-bezier(.2,.7,.3,1);
}
.treffer:hover .treffer-bild img{scale:1.04}

.status{
  position:absolute; left:12px; top:12px; z-index:2;
  font-family:var(--zahl); font-size:.72rem; font-weight:500; letter-spacing:.04em;
  text-transform:uppercase; padding:5px 11px; border-radius:var(--pille);
  background:var(--gruen); color:#fff;
}
.status--halt{background:var(--tinte)}
.status--weg{background:var(--verkauft)}

.treffer-text{padding:24px 26px 26px; display:flex; flex-direction:column}
.treffer-text h3{font-size:1.24rem}
.treffer-ort{
  display:block; margin-top:6px; font-size:.9rem; color:var(--text);
}
/* Die Datenzeile: drei Werte nebeneinander, Zahl über Bezeichnung. In der
   Festbreitenschrift stehen die Zahlen über alle vier Treffer hinweg bündig. */
.treffer-daten{
  list-style:none; margin:16px 0 0; padding:14px 0 0; border-top:1px solid var(--linie);
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
}
.treffer-daten b{
  display:block; font-family:var(--zahl); font-weight:500; font-size:1.06rem;
  color:var(--tinte); letter-spacing:-.01em;
}
.treffer-daten small{display:block; font-size:.8rem; color:var(--text); margin-top:2px}

/* § 87 GModG verlangt in jeder Immobilienanzeige fünf Angaben: Art des
   Energieausweises, Kennwert, wesentlicher Energieträger, Baujahr und
   Effizienzklasse. Fehlt eine, ist das eine Ordnungswidrigkeit mit einem
   Bußgeldrahmen bis 10.000 Euro. Der Kasten steht deshalb in JEDEM Treffer
   und ist keine Zierleiste, die man später weglassen kann. */
.geb{
  margin-top:14px; padding:12px 14px; background:var(--gruen-hauch);
  border-radius:var(--rund-klein); font-size:.82rem; line-height:1.55;
  color:var(--text);                      /* 5,54:1 gegen den Hauch          */
}
.geb b{display:block; color:var(--gruen); font-family:var(--zahl); font-weight:500; font-size:.76rem;
       letter-spacing:.05em; text-transform:uppercase; margin-bottom:4px}

.treffer-tun{margin-top:auto; padding-top:18px; display:flex; gap:10px; flex-wrap:wrap}
.treffer-tun a{
  font-family:var(--display); font-weight:700; font-size:.9rem; color:var(--gruen);
  text-decoration:none; display:inline-flex; align-items:center; gap:7px;
  border-bottom:2px solid transparent; padding-bottom:2px; transition:border-color var(--tempo)
}
.treffer-tun a:hover{border-bottom-color:var(--gruen)}

/* ── Leistungen ──────────────────────────────────────────────────────────
   Drei Spalten, ein grüner Strich über jedem Eintrag, sonst nichts: keine
   Kacheln, keine Symbole, keine Nummern. Entwurf 1 nummeriert, Entwurf 2
   setzt Symbolkacheln — hier ist die Spalte selbst die Ordnung. */
.leistungen{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:34px 38px}
.leistungen li{padding-top:20px; border-top:2px solid var(--gruen)}
.leistungen h3{font-size:1.14rem}
.leistungen p{margin-top:10px; font-size:.96rem}

/* ── Ablauf ──────────────────────────────────────────────────────────────
   Waagerechte Fortschrittsleiste. Die durchgehende Linie liegt hinter den
   Nummernfeldern; sie ist reine Zier und trägt keine Information, die nicht
   auch im Text steht — deshalb darf sie hell sein. */
.ablauf{
  list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(6,1fr); gap:0; position:relative;
}
.ablauf::before{
  content:""; position:absolute; left:0; right:0; top:19px; height:2px;
  background:var(--linie);
}
.ablauf li{position:relative; padding:0 18px 0 0}
.ablauf .nr{
  position:relative; z-index:2; display:grid; place-items:center;
  width:40px; height:40px; border-radius:var(--rund-klein);
  background:var(--gruen); color:#fff;
  font-family:var(--zahl); font-weight:500; font-size:.94rem;
}
.ablauf h3{font-size:1.02rem; margin-top:18px}
.ablauf p{margin-top:8px; font-size:.9rem}
/* Der letzte Schritt darf die Zierlinie nicht ins Leere laufen lassen —
   ein weißer Deckel schneidet sie hinter dem letzten Feld ab. */
.ablauf li:last-child::after{
  content:""; position:absolute; left:40px; right:-40px; top:19px; height:2px;
  background:var(--papier);
}
.teil--flaeche .ablauf li:last-child::after{background:var(--flaeche)}

/* ── Provision ───────────────────────────────────────────────────────────
   Eine echte Tabelle mit Kopfzeile, kein Listen-Nachbau. Preise gehören in
   eine Tabelle: Vorleseprogramme sagen dann bei jeder Zelle dazu, in welcher
   Spalte man ist. */
.prov-netz{display:grid; grid-template-columns:1fr 1.15fr; gap:52px; align-items:start}
.prov-hinweis{margin-top:16px; font-size:.9rem; color:var(--text)}
.teil--navy .prov-hinweis{color:var(--navy-text)}

.prov-tabelle{width:100%; border-collapse:collapse; font-size:.96rem}
.prov-tabelle caption{
  text-align:left; padding-bottom:12px; font-size:.86rem; color:var(--text);
}
.prov-tabelle th,.prov-tabelle td{
  text-align:left; padding:14px 16px; border-bottom:1px solid var(--linie);
}
.prov-tabelle thead th{
  font-family:var(--zahl); font-size:.76rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gruen); font-weight:500; border-bottom:2px solid var(--gruen); padding-bottom:10px;
}
.prov-tabelle tbody th{font-weight:500; color:var(--tinte); font-family:var(--schrift)}
.prov-tabelle td{
  font-family:var(--zahl); font-weight:500; color:var(--tinte);
  text-align:right; white-space:nowrap;
}
.prov-tabelle thead th:last-child{text-align:right}
.prov-tabelle tbody tr:last-child th,.prov-tabelle tbody tr:last-child td{border-bottom:0}

/* ── Person ──────────────────────────────────────────────────────────────
   Liegt auf Navy. Bild links in fester Spalte, Zitat rechts groß. */
.person{display:grid; grid-template-columns:340px 1fr; gap:52px; align-items:center}
.person-bild{position:relative; aspect-ratio:3/4; border-radius:var(--rund); overflow:hidden; background:var(--navy-karte)}
.person-bild img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.person blockquote{
  margin:18px 0 0; font-family:var(--display); font-weight:800; color:#fff;
  font-size:clamp(1.35rem,2.5vw,1.95rem); line-height:1.3; letter-spacing:-.02em;
  text-wrap:balance;
}
.person .wer{margin-top:24px; padding-top:22px; border-top:1px solid var(--navy-linie); font-size:.96rem}
.person .wer b{display:block; color:#fff; font-family:var(--display); font-weight:800; margin-bottom:5px}

/* ── Fragen ──────────────────────────────────────────────────────────────
   Zwei Spalten. Die Antworten klappen einzeln auf; <details> braucht dafür
   kein Skript und funktioniert auch mit Tastatur und Vorleseprogramm. */
.fragen{columns:2; column-gap:26px}
.fragen details{
  break-inside:avoid; margin:0 0 14px; background:var(--papier);
  border:1px solid var(--linie); border-radius:var(--rund); overflow:hidden;
}
.fragen summary{
  cursor:pointer; list-style:none; padding:18px 52px 18px 20px; position:relative;
  font-family:var(--display); font-weight:700; color:var(--tinte); font-size:1rem; line-height:1.4;
}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{
  content:""; position:absolute; right:20px; top:24px; width:10px; height:10px;
  border-right:2px solid var(--gruen); border-bottom:2px solid var(--gruen);
  rotate:45deg; transition:rotate var(--tempo);
}
.fragen details[open] summary::after{rotate:-135deg}
.fragen summary:hover{background:var(--gruen-hauch)}
.antwort{padding:0 20px 20px; font-size:.96rem}
.antwort p + p{margin-top:12px}

/* ── Kontakt ─────────────────────────────────────────────────────────────
   Auf Navy. Das Formular liegt in einer weißen Karte, damit die Felder ihren
   gewohnten hellen Grund behalten — helle Eingabefelder auf dunklem Grund
   sind für die meisten Menschen deutlich leichter zu treffen. */
.kontakt-netz{display:grid; grid-template-columns:1.35fr .8fr; gap:34px; align-items:start}
.form-karte{background:var(--papier); border-radius:var(--rund); padding:30px 30px 32px; color:var(--text)}
/* Die Umkehrregel für .teil--navy färbt alle Überschriften weiß. Innerhalb
   der weißen Karte muss sie zurückgenommen werden — sonst stünde die
   Überschrift weiß auf Weiß, also unsichtbar. Genau so ein Fehler ist der
   Grund, warum jede Farbumkehr eine Gegenregel braucht. */
.form-karte h3,.form-karte h4{color:var(--tinte)}
.form-karte h3{font-size:1.15rem; margin-bottom:6px}
.form-karte .vorspann{font-size:.92rem; margin-bottom:22px}

.feld{display:block; margin-bottom:16px}
.feld span{display:block; font-size:.86rem; font-weight:500; color:var(--tinte); margin-bottom:7px}
.feld input,.feld select,.feld textarea{
  width:100%; font:inherit; font-size:.97rem; color:var(--tinte);
  background:var(--papier);
  /* Der Umriss muss sein: ein Eingabefeld ist ein Bedienelement und braucht
     nach WCAG 1.4.11 mindestens 3:1 gegen seinen Grund. --rahmen erreicht
     4,05:1 auf Weiß — die Zierlinie --linie täte das mit 1,25:1 nicht. */
  border:1px solid var(--rahmen); border-radius:var(--rund-klein);
  padding:12px 14px; transition:border-color var(--tempo), box-shadow var(--tempo);
}
.feld textarea{min-height:120px; resize:vertical}
.feld select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%235A6072' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:12px 8px; padding-right:38px}
.feld input:focus,.feld select:focus,.feld textarea:focus{
  outline:none; border-color:var(--gruen); box-shadow:0 0 0 3px rgba(15,107,66,.16);
}
.feld input::placeholder,.feld textarea::placeholder{color:var(--rahmen)}
.feld-zwei{display:grid; grid-template-columns:1fr 1fr; gap:0 16px}

.form-fuss{
  font-size:.85rem; color:var(--text); margin:4px 0 20px; padding:12px 14px;
  background:var(--flaeche); border-radius:var(--rund-klein);
}
.anfrage-tun{display:flex; flex-wrap:wrap; gap:12px}
/* Die Karte ist weiß, also gelten hier die HELLEN Knopffarben — die
   Umkehrregel für .teil--navy weiter oben würde sonst durchschlagen und
   hellgrüne Knöpfe auf weißem Grund erzeugen (nur 2,3:1). */
.form-karte .knopf{background:var(--gruen); border-color:var(--gruen); color:#fff}
.form-karte .knopf:hover{background:var(--gruen-tief); border-color:var(--gruen-tief)}
.form-karte .knopf--leer{background:transparent; color:var(--gruen); border-color:var(--rahmen)}
.form-karte .knopf--leer:hover{background:var(--gruen-hauch); border-color:var(--gruen); color:var(--gruen-tief)}
.form-karte :focus-visible{outline-color:var(--gruen)}

.daten{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.daten li{
  display:flex; gap:14px; padding:18px 20px; background:var(--navy-karte);
  border:1px solid var(--navy-linie);
}
.daten li:first-child{border-radius:var(--rund) var(--rund) 0 0}
.daten li:last-child{border-radius:0 0 var(--rund) var(--rund)}
.daten svg{width:19px; height:19px; color:var(--gruen-hell); flex:none; margin-top:3px}
.daten .lab{display:block; font-family:var(--zahl); font-size:.72rem; letter-spacing:.06em;
            text-transform:uppercase; color:var(--gruen-hell); margin-bottom:4px; font-weight:500}
.daten a,.daten b{color:#fff; font-weight:500}
.daten a{text-decoration:none}
.daten a:hover{text-decoration:underline; text-underline-offset:3px}
.daten div{font-size:.94rem; line-height:1.55}

/* ── Fuß ─────────────────────────────────────────────────────────────────── */
.fuss{background:var(--navy); color:var(--navy-text); padding:56px 0 30px; font-size:.94rem}
.fuss-netz{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:34px}
.fuss h3{font-family:var(--display); font-size:.8rem; letter-spacing:.06em; text-transform:uppercase;
         color:var(--gruen-hell); margin-bottom:14px; font-weight:800}
.fuss ul{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.fuss a{color:var(--navy-text); text-decoration:none}
.fuss a:hover{color:#fff; text-decoration:underline; text-underline-offset:3px}
.fuss .marke b{color:#fff}
.fuss-unten{
  margin-top:38px; padding-top:20px; border-top:1px solid var(--navy-linie);
  display:flex; flex-wrap:wrap; gap:8px 22px; font-size:.85rem;
}
.fuss-unten span:last-child{margin-left:auto}

/* ── Daumenleiste ────────────────────────────────────────────────────────
   Nur auf dem Handy. Sie liegt über allem, damit der Anruf immer einen
   Daumen weit weg ist; der Fuß bekommt unten entsprechend Platz. */
.daumen{display:none}

/* ═══ Haltepunkte ═════════════════════════════════════════════════════════ */

@media (max-width:1080px){
  .buehne-netz{grid-template-columns:1fr; gap:38px}
  .tafel dl{display:grid; grid-template-columns:repeat(3,1fr)}
  .tafel div{border-bottom:0; border-right:1px solid var(--navy-linie); padding:18px 22px 18px 0}
  .tafel div:last-child{border-right:0}
  .leistungen{grid-template-columns:repeat(2,1fr)}
  .ablauf{grid-template-columns:repeat(3,1fr); gap:34px 0}
  /* Bei drei Spalten liefe die durchgehende Linie quer durch die zweite
     Reihe hindurch. Sie wird deshalb hier abgeschaltet — die Nummern allein
     tragen die Reihenfolge. */
  .ablauf::before,.ablauf li:last-child::after{display:none}
  .prov-netz{grid-template-columns:1fr; gap:34px}
  .kontakt-netz{grid-template-columns:1fr; gap:24px}
  .person{grid-template-columns:260px 1fr; gap:36px}
}

@media (max-width:980px){
  /* Sechs Menüpunkte, eine Marke und ein Knopf 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 hängt per top:100%
     an ihm; darum braucht .kopf durchgehend einen Positionswert. */
  .kopf .knopf{display:none}
  .burger{display:grid}
  .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); box-shadow:0 14px 30px rgba(16,19,34,.08);
    padding:6px 22px 16px; display:none;
  }
  .menue[data-offen="1"]{display:flex}
  .menue a{padding:13px 0; border-bottom:1px solid var(--linie); border-left:0}
  .menue a:hover{border-bottom-color:var(--linie)}
  .kurz-netz{grid-template-columns:1fr 1fr; gap:14px}
  .kurz-netz .knopf{grid-column:1 / -1; width:100%}
}

@media (max-width:720px){
  /* Auf dem Handy klebt der Kopf nicht mehr — der Platz nach oben ist zu
     kostbar. relative statt static, sonst verliert das aufgeklappte Menü
     seinen Bezugsrahmen und rutscht ans Seitenende. */
  .kopf{position:relative}
  .dienstband{display:none}

  .teil{padding:56px 0}
  .buehne{padding-top:48px}
  .kurz{margin-top:40px; padding:18px 18px 20px}
  .kurz-netz{grid-template-columns:1fr}
  .nach-buehne{padding-top:66px}

  .treffer{grid-template-columns:1fr}
  .treffer-bild{aspect-ratio:16/10}
  .treffer-text{padding:20px}
  .treffer-daten{grid-template-columns:repeat(3,1fr); gap:10px}
  .treffer-daten b{font-size:.98rem}

  .leistungen{grid-template-columns:1fr; gap:26px}
  .ablauf{grid-template-columns:1fr 1fr; gap:28px 18px}
  .person{grid-template-columns:1fr; gap:26px}
  .person-bild{max-width:280px}
  .fragen{columns:1}
  .form-karte{padding:22px 20px 24px}
  .feld-zwei{grid-template-columns:1fr; gap:0}

  .fuss-netz{grid-template-columns:1fr; gap:28px}
  .fuss-unten span:last-child{margin-left:0}
  .fuss{padding-bottom:96px}

  .daumen{
    display:grid; grid-template-columns:1fr 1fr; gap:10px;
    position:fixed; left:0; right:0; bottom:0; z-index:70;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:var(--papier); border-top:1px solid var(--linie);
  }
  .daumen a{
    display:inline-flex; align-items:center; justify-content:center; gap:9px;
    padding:14px 12px; border-radius:var(--rund-klein); text-decoration:none;
    font-family:var(--display); font-weight:700; font-size:.95rem;
    min-width:0; white-space:nowrap;
  }
  .daumen a:first-child{border:1px solid var(--rahmen); color:var(--gruen); background:var(--papier)}
  .daumen a + a{background:var(--gruen); color:#fff; border:1px solid var(--gruen)}
}

@media (max-width:400px){
  .treffer-daten{grid-template-columns:1fr 1fr}
  .ablauf{grid-template-columns:1fr}
}

/* ── Weniger Bewegung ────────────────────────────────────────────────────
   Wer im Betriebssystem „Bewegung reduzieren" gesetzt hat, bekommt hier
   nichts Bewegtes mehr — und vor allem sind die Inhalte dann sofort
   sichtbar, nicht auf opacity:0 stehengeblieben. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .js .zeig{opacity:1 !important; translate:none !important}
  .treffer:hover .treffer-bild img{scale:1}
}

/* ── Druck ───────────────────────────────────────────────────────────────── */
@media print{
  .entwurf-band,.dienstband,.kopf,.daumen,.buehne-tun,.anfrage-tun,.kurz{display:none !important}
  body{background:#fff; color:#000; font-size:11pt}
  .teil,.buehne,.fuss{background:#fff !important; color:#000 !important; padding:14pt 0}
  .teil--navy h2,.teil--navy h3,.teil--navy h4,.buehne h1,.person blockquote,
  .person .wer b,.daten a,.daten b,.tafel dd{color:#000 !important}
  .daten li,.tafel,.tafel div{background:#fff !important; border-color:#999 !important}
  .fragen details{break-inside:avoid}
  .fragen .antwort{display:block !important}
  a[href^="http"]::after{content:" (" attr(href) ")"; font-size:9pt; color:#444}
}

/* ── Rechtstexte (Impressum, Datenschutz) ────────────────────────────────
   Der Portal-Entwurf ordnet alles in Zeilen und Spalten, und ein Impressum
   ist nichts anderes: eine lange Liste von Pflichtangaben. Deshalb steht
   der Text hier in einer durchgehenden weissen Spalte mit Trennlinien
   dazwischen, nicht in einzelnen Karten. Der Hinweiskasten nimmt den
   gruenen Hauch — die einzige Buntfarbe, die dieser Entwurf auf hellem
   Grund kennt. */
.rechts-kopf{
  background:var(--flaeche); border-bottom:1px solid var(--linie);
  padding:clamp(40px, 4.6vw, 68px) 0 clamp(26px, 3vw, 40px);
}
.rechts-kopf h1{font-size:clamp(2rem, 3.8vw, 2.9rem); margin-top:10px}
.rechts-kopf .lead{margin-top:16px; max-width:56ch; color:var(--text)}
/* 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:clamp(30px, 3.4vw, 46px) 0 clamp(56px, 6vw, 96px)}
.rechtstext p,.rechtstext ul,.rechtstext dl,.rechtstext address,.rechts-hinweis{
  max-width:68ch;
}
.rechtstext section{border-top:1px solid var(--linie); padding:28px 0 4px}
.rechtstext section:first-of-type{border-top:0; padding-top:0}
.rechtstext h2{font-size:clamp(1.2rem, 2vw, 1.5rem); margin-bottom:14px}
.rechtstext h3{
  font-family:var(--schrift); font-size:1rem; font-weight:700;
  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:.62em;
  width:10px; height:2px; border-radius:2px; background:var(--gruen);
}
.rechtstext dl{margin:0}
.rechtstext dt{font-weight:700; 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(--gruen); text-underline-offset:3px}
.rechtstext a:hover{color:var(--gruen-tief)}
.rechts-hinweis{
  background:var(--gruen-hauch); border-left:3px solid var(--gruen);
  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)}
/* Muss nach ".rechtstext a" stehen: sonst schreibt die Regel dort gruene
   Schrift auf die gruene Flaeche des Knopfes. */
.rechtstext .zurueck{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  font-size:.9rem; font-weight:700;
  background:var(--gruen); color:#fff;
  border-radius:var(--rund-klein); padding:12px 22px; margin-top:26px;
  transition:background var(--tempo);
}
.rechtstext .zurueck:hover{background:var(--gruen-tief); color:#fff}