/* ── Die Schrift ────────────────────────────────────────────────────────────
   Montserrat, lokal ausgeliefert. NIE über ein fremdes Netz (Google Fonts) –
   das wäre eine Datenübermittlung ohne Einwilligung und steht so auch in der
   Datenschutzerklärung.

   ⚠️ Am 05.08.2026 gefunden: Die Datei lag seit dem 21.07. im Ordner, wurde
   ausgeliefert (HTTP 200, 35 KB) – und war nirgends eingebunden. Es gab keine
   einzige @font-face-Regel. Die ganze Website lief in der Systemschrift, und
   die Datenschutzerklärung behauptete das Gegenteil. Ein Corporate Design, das
   niemand sieht, ist keins.

   font-display: swap – der Text ist sofort lesbar und wechselt nach, statt
   den Besucher auf eine leere Seite starren zu lassen. */
@font-face{
  font-family:'Montserrat';
  src:url('/montserrat.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

/* ══════════════════════════════════════════════════════════════════════════
   JOBAUSHILFE – DAS AUSSEHEN. EINE DATEI.

   Neu gefasst am 17.08.2026 nach Entwurf A „Das Werkzeug"
   (public/entwurf/a.html, Konzept in ~/SecondBrain/inbox/
   2026-08-17-designrichtung-a-werkzeug.md). Diese Datei ist ab jetzt ein
   Token-System: Farbrollen, Abstandsraster, Typo-Treppe und Radien stehen
   oben als Variablen, alles darunter benutzt nur noch sie.

   DIE HALTUNG:
   · Die Seite ist ein Messgerät, kein Prospekt. Sie zeigt einen Bestand und
     schneidet ihn auf die Frage des Besuchers zu.
   · Das Papier ist die Grundfläche. Werkbank markiert gezählte Daten,
     Schiefer ist genau EIN Band je Seite. Nie eine ganze dunkle Seite.
   · Grün ist Marke und Messlinie, kein Anstrich.
   · Orange gibt es an genau EINER Stelle je Bildschirm: der Handlung
     (Suchen, Anrufen). Auszeichnungen arbeiten deshalb nie mit Orange,
     sondern über Fläche, Kante und Label.
   · Daten haben Ecken (0 px), Bedienbares hat 6 px, rund sind nur noch
     Marker. Das ist der bewusste Bruch mit den bisherigen Pillen.
   · Alle Zahlen laufen in Tabellenziffern. Montserrat kann das (tnum), es
     wurde nur nie genutzt: Die Eins war 342 Einheiten breit, die Null 652 –
     jede Zahlenspalte wackelte. Eine Zeile behebt das, sie kostet null Bytes.

   ⚠️ RÜCKWÄRTSKOMPATIBEL. Jede Klasse und jede Variable, die vor dem
   17.08.2026 hier stand, steht weiter hier. Vieles sieht anders aus, nichts
   ist verschwunden – sonst brächen die Live-Seiten, die ihre eigenen
   <style>-Blöcke auf diesen Variablen aufbauen.
   ══════════════════════════════════════════════════════════════════════════ */

/* ⚠️ SIEBEN TOTE TOKEN ENTFERNT (18.08.2026): --papier-2, --tinte-3, --linie,
   --orange-hauch, --ok-hauch, --r-gross, --r-rund. Sie waren definiert und
   wurden von KEINER Zeile benutzt - Aliasse aus einem früheren Umbau, die
   überlebt haben. Ein Token, den es gibt, wird irgendwann benutzt, und dann
   ist er eine Ausnahme mehr, die niemand überblickt. Genau so entstanden
   heute drei Fehler an einem Tag.
   Gemessen mit pruefe-css-variablen.mjs vor und nach dem Eingriff. */
:root{
  /* ── 1. FARBROLLEN ──────────────────────────────────────────────────────
     Alle Werte gerechnet (WCAG 2.1, relative Leuchtdichte), nicht im
     Browser abgelesen. */

  /* Flächen */
  --papier:#FCFCFA;        /* Grundfläche jeder Seite. Nichts ersetzt sie. */
  --werkbank:#F1F2EE;      /* vertiefte Messfläche: Datenzeilen, Zellen,
                              Hover. NIE als Seitenhintergrund. */
  --schiefer:#071A18;      /* Instrumentenfläche. Genau EIN Band je Seite. */
  --weiss:#fff;

  /* Schrift-Töne */
  --tinte:#0B1F1D;         /* 16,65:1 Papier · 15,21:1 Werkbank · 17,10:1 Weiß
                              Fließtext, Überschriften UND alle Messwerte.
                              Große Zahlen sind nie farbig. */
  --tinte-2:#3F524E;       /* 8,09:1 Papier · 7,39:1 Werkbank */
  /* ⚠️ Label-Ton, am 17.08.2026 von #66736E auf #5F6C67 abgedunkelt.
     #66736E hielt mit 4,82:1 nur auf Papier und brach auf jeder Fläche:
     4,49:1 auf #F4F4F0, 4,40:1 auf der Werkbank. Solange Tinte-3 nur auf
     Papier stand, fiel das nicht auf; mit den grauen Messflächen dieser
     Richtung wäre es ein Verstoß gewesen.
     #5F6C67 hält überall: 5,34 Papier · 4,88 Werkbank · 4,85 Grün-Hauch ·
     5,05 Orange-Hauch · 5,49 Weiß. */
  --label:#5F6C67;
  --label-hell:#A9BCB7;    /* 9,03:1 auf Schiefer. Nur dort. Das normale
                              Label käme auf Schiefer nur auf 3,27:1. */

  /* Marke */
  --gruen:#17403D;         /* 11,13:1 Papier · 10,17:1 Werkbank.
                              Marke UND Messlinie: Links, Balken, aktive
                              Spalte, Fokusring, gelesener Wert. */
  --gruen-tief:#0C2725;
  --gruen-hauch:#EDF2F0;   /* nur Hover-/Markierungsfläche, nie Textträger
                              für kleine graue Schrift */
  --radar:#6FE0CE;         /* 11,31:1 auf Schiefer · 1,55:1 auf Papier.
                              ⚠️ AUSSCHLIESSLICH auf Schiefer. Auf Papier
                              verboten – 1,55:1 ist unlesbar. Genau diese
                              Regel verhindert eine zweite Markenfarbe. */
  /* ⚠️ ORANGE IST DIE HANDLUNG, SONST NICHTS.
     Genau eine orange Stelle je Ansicht: Suchen oder Anrufen. Darauf steht
     Tinte (6,68:1), niemals Weiß (2,56:1). Ein dunkleres Orange (#B85F00)
     käme mit weißer Schrift nur auf 4,49 und würde das Logo verraten. Das
     Orange bleibt exakt wie im Logo, geändert wird nur, was darauf steht. */
  --orange:#F18700;
  --orange-tief:#D67700;
  --orange-hell:#FFA22B;   /* nur Hover auf gedrückten Flächen */

  /* Zustände. Meldungen sind ab jetzt Achsen auf Werkbank, keine
     Pastellkästen – ein Instrument hat keine weichen Farbflächen. Die
     Hauch-Töne bleiben als Variablen bestehen, weil Seiten sie benutzen. */
  --ok:#0F7B4F;            /* 5,15:1 Papier · 4,71:1 Werkbank */
  --rot:#B42318;           /* 6,40:1 Papier · 5,85:1 Werkbank */

  /* Reine Grafiktöne – nie Text, deshalb kein 4,5:1-Anspruch */
  --raster:#DCE0DB;        /* 1,30 auf Papier / 1,19 auf Werkbank:
                              Haarlinien, Zellgitter, Skalenstriche */
  --raster-dunkel:#16332F;      /* 1,32 auf Schiefer */
  --raster-dunkel-2:#2F5C55;    /* jeder achte Skalenstrich */

  /* ── 2. ABSTANDSRASTER ──────────────────────────────────────────────────
     Grundeinheit 4 px. Erlaubt ist ausschließlich diese Treppe, kein Wert
     dazwischen. 4/8 innerhalb eines Bauteils · 12/16 zwischen Bauteilen ·
     24/32 zwischen Gruppen · 48/64 zwischen Abschnitten · 96/128 vor und
     nach dem Bestandsband. */
  /* ⚠️ --a20 FEHLTE UND WURDE TROTZDEM ELFMAL BENUTZT (18.08.2026).
     CSS meldet keinen Fehler bei einer unbekannten Variablen - die
     Eigenschaft fällt still aus. Und weil EIN unbekannter Wert die GANZE
     Kurzschreibweise ungültig macht, ergab `padding: var(--a16) var(--a20)`
     nicht 16px, sondern 0. Gemessen auf /anmelden: Der Text klebte am Rand.
     Betroffen waren auch die Gewerk-Kacheln, der Menü-Kopf, die
     Menü-Blöcke, das Anfragen-Fach und die Sitemap-Lücke am Handy.
     Mike sah es als „irgendwie unstimmig", ohne es benennen zu können.
     Lehre: Eine neue Abstands-Variable wird HIER eingetragen, bevor sie
     irgendwo benutzt wird - sonst schweigt der Fehler. */
  --a4:4px;   --a8:8px;   --a12:12px; --a16:16px; --a24:24px; --a20:20px;
  --a32:32px; --a48:48px; --a64:64px; --a96:96px; --a128:128px;

  /* Spaltenraster: 12 Spalten ab 1040 px, 6 ab 620 px, darunter 4. */
  --rinne:24px;
  --rand:24px;
  --masz:1160px;

  /* ── 3. TYPO-TREPPE ─────────────────────────────────────────────────────
     Feste Treppe, keine freien Zwischengrößen. clamp() spannt von 500 px
     bis 1440 px. Eingabefelder bleiben bei 16 px, sonst zoomt iOS beim
     Antippen – das ist keine Stilfrage. */
  --t-mess-xxl:clamp(38px,6vw,76px);   /* Zahlen im Bestandsband */
  --t-aussage-1:clamp(30px,5vw,54px);  /* H1 */
  --t-aussage-2:clamp(22px,3vw,32px);  /* H2 */
  --t-aussage-3:18px;                  /* H3, Firmenname in der Trefferzeile */
  --t-mess-m:20px;                     /* Zahlen in Zeilen, Karten, Listen */
  --t-lauf:clamp(16.5px,1.2vw,17px);   /* Fließtext */
  --t-eingabe:16px;                    /* ⚠️ nie kleiner: iOS zoomt sonst */
  --t-datenzeile:15px;                 /* Tabellen- und Listenzeilen */
  --t-fussnote:13px;                   /* Quellen, Rechtliches */
  --t-etikett:11.5px;                  /* Versalien-Beschriftungen */

  --w-lauf:400; --w-mittel:500; --w-halb:600; --w-mess:700; --w-aussage:800;
  --sp-aussage-1:-.045em; --sp-aussage-2:-.03em; --sp-aussage-3:-.015em;
  --sp-mess:-.01em; --sp-etikett:.12em;

  /* ── 4. RADIEN UND KANTEN ───────────────────────────────────────────────
     Der sichtbare Bruch mit dem bisherigen Bild: aus 14 px, 24 px und
     999-px-Pillen wird eine klare Dreiteilung. */
  /* ⚠️ DREI RADIEN, KEINER MEHR (18.08.2026). Vier Stellen trugen eigene
     Werte (22, 12, 11 und 4 px) und fielen damit aus dem System - sie
     nutzen jetzt die Token. Wer eine eigene Zahl hinschreibt, baut die
     nächste Ausnahme.
      Vorher gab es zusätzlich `--r`
     (ein reiner Alias auf --r-bedien) und `--r-suche` (dieselben 999px wie
     --r-marker). Zwei Namen für dieselbe Sache heißt: Wer den einen ändert,
     wundert sich über den anderen.

     ⚠️ MEINE EIGENE ZÄHLUNG WAR VORHER FALSCH. Ich hatte Mike „14 Radien"
     gemeldet - mein Suchmuster `--r[a-z-]*` traf auch --raster, --radar,
     --rot, --rinne und --rand. Das sind Farben und Abstände, keine Radien.
     Ein Muster, das zu viel trifft, meldet ein Problem, das es nicht gibt. */
  --r-daten:0px;      /* Datenflächen: Band, Tabellenzeilen, Zellen, Balken,
                         Werkbank-Streifen, Meldungen. Daten haben Ecken. */
  --r-bedien:6px;     /* Bedienbares: Knöpfe, Felder, Umschalter, Chips,
                         Auswahllisten. Greifbar, aber nicht weich. */
  --r-marker:999px;
  /* ⚠️ DIE SUCHE IST DIE EINE AUSNAHME (Mike, 17.08.2026): „Die Suchleiste
     eher so rundlich, so ein bisschen an Google orientieren."
     Heute Mittag hatte ich genau das Gegenteil gebaut - aus dem runden Feld
     wurde ein 6-px-Rechteck, mit der Begründung „Bedienbares hat 6 px".
     Mike hat recht und ich lag falsch: Die Suche ist kein Eingabefeld in
     einem Formular, sie ist die Aufforderung, die Seite zu benutzen. Sie
     darf - sie MUSS - sich von allem anderen unterscheiden. Fuer Tabellen,
     Karten und Formularfelder gilt die 0/6-px-Regel unveraendert weiter.

     ⚠️ HIER STAND EIN KOMMENTAR-ENDE OHNE ANFANG (entfernt 19.08.2026),
     Rest eines früheren Umbaus.

     ⚠️⚠️ UND BEIM BEHEBEN HABE ICH DENSELBEN FEHLER NEU GEMACHT: In den
     Erklärtext hatte ich die Zeichenfolge aus zwei Zeichen geschrieben, mit
     der ein Kommentar endet. Damit war der Block ab dort zu, der Rest
     wurde CSS-Text, und das echte Ende weiter unten stand wieder allein.
     Gemessen: --l-haar blieb leer, obwohl ich sie gerade repariert hatte.
     In einem CSS-Kommentar darf diese Zeichenfolge nirgends im Fließtext
     vorkommen - auch nicht in Anführungszeichen. Wirkung: Der
     Browser verwarf die NÄCHSTE Deklaration, und das war ausgerechnet
     `--l-haar`, die häufigste Linie der ganzen Website. Im Browser
     gemessen: `getPropertyValue('--l-haar')` gab einen LEEREN String zurück,
     während --l-mess, --l-achse und --l-satz normal ankamen.

     Folge: Sämtliche 1-px-Kanten fehlten - Kartenränder, Feldkanten,
     Zeilentrenner, Tabellenlinien. Die Seite sah "irgendwie weicher" aus,
     ohne dass man sagen konnte, warum.

     ⚠️ MEIN EIGENER WÄCHTER FAND DAS NICHT. pruefe-css-variablen.mjs liest
     die Datei als Text - dort steht `--l-haar:1px;` ordentlich da. Nur der
     Browser weiß, dass er sie verwirft. Gefunden hat es ein Prüf-Agent, der
     die berechneten Werte ausgelesen hat. Lehre: Was der Browser tut, muss
     man den Browser fragen. */

  /* Linienstärken – vier Stärken, vier Bedeutungen */
  --l-haar:1px;       /* trennt Datenzeilen, die häufigste Linie der Seite */
  --l-mess:2px;       /* markiert den gerade gelesenen Wert (Grün) */
  --l-achse:2px;      /* untere Kante eines Datenblocks (Tinte), je Block eine */
  --l-satz:3px;       /* Achse vor einer Aussage oder Meldung */
  --l-fokus:3px;      /* Fokusring, gegen alle Flächen geprüft */

  /* ── 5. BRÜCKE ZU DEN ALTEN NAMEN ───────────────────────────────────────
     Diese Variablen stehen in den <style>-Blöcken der Live-Seiten. Sie
     bleiben bestehen und zeigen jetzt auf die neuen Rollen. Wer neu baut,
     nimmt die Rollennamen oben. */
  --rot-hauch:#FDF2F1;
  /* ── 6. BEWEGUNG ────────────────────────────────────────────────────────
     Bewegung ist die Antwort auf eine Handlung oder einen echten
     Wertwechsel. Nichts bewegt sich von selbst. */
  --z-zeile:.09s;    /* Zeile unter dem Zeiger */
  --z-bedien:.14s;   /* Knopf, Umschalter */
  --z-flaeche:.2s;   /* Kopfleiste, Überlagerung */
  --z-balken:.4s;    /* Kostenbalken, einmalig beim Sichtwerden */
}

@media(max-width:1039px){:root{--rinne:20px;--rand:20px}}
@media(max-width:619px){:root{--rinne:16px;--rand:16px}}

/* ══════════════════════════════════════════════════════════════════════════
   GRUNDLAGE
   ══════════════════════════════════════════════════════════════════════════ */

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
/* ⚠️ OHNE DIESE DREI ZEILEN WAREN LINKS BROWSER-BLAU (18.08.2026).
   Gemessen auf 11 von 15 Seiten: rgb(0,0,238), nach dem Besuch violett.
   Sichtbar unter anderem bei „Postleitzahl eingeben und loslegen"
   (/anmelden), „öffentlich nachlesbar" (/preise), „Datenschutzerklärung"
   (/rangfolge, jede Gewerkseite) und „Impressum" (/nutzungsbedingungen).

   Es gab Farbregeln für jede einzelne Link-Sorte – Navigation, Fußzeile,
   Kacheln, Menü – aber keine für den ganz normalen Link im Fließtext. Jeder
   neue Absatz mit einem Link fiel deshalb aus dem Farbsystem heraus.

   Ein Element-Selektor (Gewicht 0,0,1) verliert gegen jede Klassenregel –
   alle bestehenden Link-Farben bleiben also unangetastet. #17403D auf
   Papier: 11,13:1. */
a{color:var(--gruen)}
a:hover{color:var(--tinte)}

body{
  font-family:'Montserrat',-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--papier);color:var(--tinte);
  font-size:var(--t-lauf);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-synthesis-weight:none;
  /* ⚠️ DIE WICHTIGSTE TYPOGRAFISCHE ZEILE DIESER DATEI.
     Ohne sie ist die Eins 342 Einheiten breit und die Null 652 – jede
     Zahlenspalte wackelt, jede Tabelle bricht optisch. Mit tnum sind alle
     Ziffern 700 Einheiten breit. Kostet null Bytes, die Schrift kann es
     bereits (OpenType-Merkmale der ausgelieferten Datei: ccmp, dnom, frac,
     liga, locl, numr, pnum, rvrn, tnum). */
  font-variant-numeric:tabular-nums;
  /* Kein overflow-x:hidden. Das versteckt einen zu breiten Baustein nur,
     statt ihn zu beheben – gemessen wird ohne Deckel. */
}
img{max-width:100%;display:block}

.masz{max-width:var(--masz);margin:0 auto;padding:0 var(--rand)}
.masz.eng{max-width:720px}
.masz.mittel{max-width:900px}

/* Spaltenraster als Hilfsmittel: Datenblöcke rasten auf ganze Spalten ein,
   ein Balken beginnt an einer Spaltenkante, nicht irgendwo. */
.spalten{display:grid;gap:var(--rinne);grid-template-columns:repeat(12,1fr)}
@media(max-width:1039px){.spalten{grid-template-columns:repeat(6,1fr)}}
@media(max-width:619px){.spalten{grid-template-columns:repeat(4,1fr)}}

/* ── Fokus: 0 ms, 3 px, immer sichtbar ──────────────────────────────────────
   Bedienung darf nie warten. Gerechnet gegen jede Fläche des Systems:
   Grün auf Papier 11,13 · Weiß 11,43 · Werkbank 10,17 · Grün-Hauch 10,10 ·
   Raster 8,56 · Orange 4,47. Alles weit über den geforderten 3:1.
   Auf Schiefer wäre Grün auf Grün mit 1,57:1 unsichtbar – dort ist der Ring
   Radar (11,31:1), die einzige Fläche, auf der diese Farbe existiert. */
:focus-visible{outline:var(--l-fokus) solid var(--gruen);outline-offset:2px;
  border-radius:2px}
.band :focus-visible,.dunkel :focus-visible{outline-color:var(--radar)}
/* Mit der Maus genügt die Grün-Achse des Bauteils, mit der Tastatur muss das
   EINZELNE Feld erkennbar sein – sonst springt der Fokus unsichtbar weiter. */
:focus:not(:focus-visible){outline:none}

/* Für Vorlesegeräte da, für Augen nicht. */
.visuell-versteckt{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ══════════════════════════════════════════════════════════════════════════
   SCHRIFT-KLASSEN
   ══════════════════════════════════════════════════════════════════════════ */

h1,h2{font-weight:var(--w-aussage);line-height:1.08;text-wrap:balance}
h3{font-weight:var(--w-mess);line-height:1.3;letter-spacing:var(--sp-aussage-3)}

.riese{font-size:clamp(42px,8.2vw,104px);line-height:.96;letter-spacing:-.052em;
  font-weight:var(--w-aussage)}
.gross{font-size:var(--t-aussage-1);line-height:1.06;
  letter-spacing:var(--sp-aussage-1);font-weight:var(--w-aussage)}
.mittelgross{font-size:var(--t-aussage-2);line-height:1.14;
  letter-spacing:var(--sp-aussage-2);font-weight:var(--w-aussage)}
.lauf{font-size:var(--t-lauf);color:var(--tinte-2);line-height:1.6;
  font-weight:var(--w-lauf);max-width:70ch}
.klein{font-size:14px;color:var(--label)}
.fussnote{font-size:var(--t-fussnote);color:var(--label);line-height:1.55;
  max-width:74ch}

/* Das Etikett: das kleinste Bauteil. Versalien, weite Laufweite, nie länger
   als vier Wörter – Einheiten, Spaltenköpfe, Quellennummern, Stand-Daten.
   Die im Konzept vorgesehene Zweitschrift (IBM Plex Mono) liegt noch nicht
   im Ordner. Laut Konzept fällt sie dann ersatzlos weg und die Etiketten
   laufen in Montserrat 600 mit weiter Laufweite. Genau das hier. */
.etikett{font-size:var(--t-etikett);font-weight:var(--w-halb);
  letter-spacing:var(--sp-etikett);text-transform:uppercase;line-height:1.35;
  color:var(--label)}

/* ⚠️ .marker war orange. Orange ist ab jetzt allein der Handlung
   vorbehalten – genau eine Stelle je Bildschirm. Die Klasse bleibt, sie
   spricht nur nicht mehr in der Handlungsfarbe. */
.marker{font-size:12px;font-weight:var(--w-aussage);letter-spacing:.15em;
  text-transform:uppercase;color:var(--gruen)}

/* Messwerte: Zahlen aus der Datenbank. Nie farbig, immer Tabellenziffern. */
.messwert{font-size:var(--t-mess-m);font-weight:var(--w-mess);
  letter-spacing:var(--sp-mess);line-height:1.2;color:var(--tinte);
  font-variant-numeric:tabular-nums}
.messwert.gross{font-size:var(--t-mess-xxl);font-weight:var(--w-aussage);
  letter-spacing:-.04em;line-height:1}
/* In Spalten rechtsbündig, damit Zehner unter Zehnern stehen. */
.messwert.rechts{text-align:right;display:block}

/* ══════════════════════════════════════════════════════════════════════════
   KOPF
   ══════════════════════════════════════════════════════════════════════════ */

.kopf{position:sticky;top:0;z-index:60;background:rgba(252,252,250,.9);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:var(--l-haar) solid transparent;
  transition:border-color var(--z-flaeche) ease}
.kopf.gescrollt{border-bottom-color:var(--raster)}
.kopf .masz{display:flex;align-items:center;justify-content:space-between;
  gap:var(--a24);min-height:64px}
.marke{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
.marke img{height:19px;width:auto}
.navi{display:flex;align-items:center;gap:var(--a32)}
.navi a{color:var(--tinte-2);text-decoration:none;font-size:14.5px;
  font-weight:var(--w-mittel);white-space:nowrap;
  transition:color .16s ease;
  /* Trefferfläche für den Daumen: der Text ist 20 px hoch, gefordert sind 44.
     Polsterung statt Höhe, damit die Kopfzeile ihre Höhe behält. */
  display:inline-flex;align-items:center;min-height:44px;padding:0 2px}
.navi a:hover{color:var(--tinte)}
.navi a.betont{color:var(--gruen);font-weight:var(--w-mess)}
/* Zwei Beschriftungen, ein Link. „Für Handwerksbetriebe" passt auf einem
   360-px-Handy nicht neben das Logo. Ausblenden wäre falsch: Der Weg
   zwischen den beiden Portalen muss überall erreichbar sein. */
.navi .kurz{display:none}
@media(max-width:680px){
  .kopf .masz{min-height:58px;gap:var(--a12)}
  .navi{gap:var(--a16)}
  .navi a{font-size:13.5px}
  .navi a.verstecken{display:none}
}
@media(max-width:560px){
  .marke img{height:16px}
  .kopf .masz{gap:var(--a8)}
  .navi{gap:var(--a12)}
  .navi a{font-size:12.5px}
  .navi .lang{display:none}
  .navi .kurz{display:inline}
}

/* ══════════════════════════════════════════════════════════════════════════
   KNÖPFE – 6 px, keine Pillen mehr
   ══════════════════════════════════════════════════════════════════════════ */

/* ⚠️ DUNKLE SCHRIFT AUF ORANGE, NICHT WEISS.
   Gemessen: Weiß auf #F18700 ergibt 2,56:1, gefordert sind 4,5:1. Der
   wichtigste Knopf der Seite war der am schlechtesten lesbare. Tinte auf
   demselben Orange ergibt 6,68:1.
   ⚠️ Dieser Knopf ist die EINE Handlung des Bildschirms. Steht ein zweiter
   oranger Knopf daneben, ist einer davon falsch. */
.knopf{display:inline-flex;align-items:center;justify-content:center;
  gap:var(--a8);padding:15px 28px;min-height:52px;border:0;
  border-radius:var(--r-bedien);background:var(--orange);color:var(--tinte);
  font:inherit;font-weight:var(--w-aussage);font-size:14px;letter-spacing:.1em;
  text-transform:uppercase;cursor:pointer;text-decoration:none;
  /* Versalien mit weiter Laufweite sind breit. Ohne diesen Deckel schiebt ein
     langer Knopftext auf 360 px die Seite seitwärts – der Text bricht lieber
     um, als dass die Seite bricht. */
  max-width:100%;text-align:center;
  transition:background var(--z-bedien) ease}
.knopf:hover{background:var(--orange-hell)}
.knopf:active{background:var(--orange-tief)}
/* Die ruhige Handlung: Grün, weiße Schrift, 11,43:1. Kein Orange. */
.knopf.ruhig{background:var(--gruen);color:var(--weiss)}
.knopf.ruhig:hover{background:var(--gruen-tief)}
/* Die dritte Stufe: nur Kante. */
.knopf.rand{background:0;color:var(--gruen);border:2px solid var(--gruen);
  letter-spacing:0;text-transform:none;font-size:15px;
  font-weight:var(--w-mess)}
.knopf.rand:hover{background:var(--gruen);color:var(--weiss)}
button:disabled{opacity:.5;cursor:default}

/* Der Zweitknopf aus Entwurf A: Kante statt Fläche, für alles, was nicht
   die eine Handlung ist. */
.zweitknopf{display:inline-flex;align-items:center;gap:var(--a8);
  text-decoration:none;border:2px solid var(--gruen);color:var(--gruen);
  background:0;font-weight:var(--w-mess);font-size:15px;
  padding:13px 22px;min-height:48px;border-radius:var(--r-bedien);
  transition:background var(--z-bedien) ease,color var(--z-bedien) ease}
.zweitknopf:hover{background:var(--gruen);color:var(--weiss)}

/* Textlink mit Pfeil – ersetzt viele Knöpfe.
   ⚠️ Der Pfeil wird aus zwei gedrehten Rändern gebaut, nie als Schriftzeichen:
   → und ↗ fehlen im ausgelieferten Schrift-Subset und fielen auf die
   Systemschrift zurück. */
.weiter{display:inline-flex;align-items:center;gap:var(--a8);color:var(--gruen);
  font-weight:var(--w-mess);font-size:16px;text-decoration:none}
.weiter i{font-style:normal;transition:transform .18s ease}
.weiter:hover i{transform:translateX(4px)}
.pfeil{width:8px;height:8px;flex:0 0 auto;
  border-top:2px solid currentColor;border-right:2px solid currentColor;
  transform:rotate(45deg)}

/* ══════════════════════════════════════════════════════════════════════════
   DIE SUCHE
   Aus dem 999-px-Oval wird ein rechteckiges Feld mit 6 px Radius und einer
   2 px starken Grün-Achse unten. Das ist die größte Veränderung am bisherigen
   Bild und der Kern der Richtung.
   ══════════════════════════════════════════════════════════════════════════ */

/* Bestandsform (.suche form) – gleiche Klassen, neue Sprache. */
.suche{position:relative;max-width:760px}
.suche form{display:flex;align-items:center;gap:var(--a8);
  background:var(--weiss);border:var(--l-haar) solid var(--raster);
  border-bottom:var(--l-mess) solid var(--gruen);
  border-radius:var(--r-bedien);padding:0 0 0 var(--a16);
  transition:box-shadow var(--z-bedien) ease,border-color var(--z-bedien) ease}
.suche form:focus-within{border-color:var(--gruen);
  box-shadow:inset 0 0 0 1px var(--gruen)}
.suche form .lupe{flex:0 0 auto;color:var(--label);display:flex}
.suche form input{flex:1;min-width:0;border:0;background:0;font:inherit;
  font-size:var(--t-eingabe);padding:16px 0;color:var(--tinte)}
.suche form input::placeholder{color:var(--label)}
/* ⚠️ `>`, nicht `.suche button`. Der Nachfahren-Wähler traf JEDEN Knopf im
   Suchbereich – auch „Meinen Standort verwenden" in der Unterzeile, der
   damit orange wurde. Dann stünden zwei orange Handlungen nebeneinander und
   keine wäre mehr die eine. Gemessen am 17.08.2026 im Bildschirmfoto. */
.suche form>button{flex:0 0 auto;padding:0 28px;min-height:56px;border:0;
  border-radius:0 var(--r-bedien) 0 0;background:var(--orange);
  color:var(--tinte);font:inherit;font-weight:var(--w-aussage);font-size:14px;
  letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
  transition:background var(--z-bedien) ease}
.suche form>button:hover{background:var(--orange-hell)}

/* Die Suchleiste aus Entwurf A: ein Raster, drei Zellen, eine Kante.
   200 px für die Postleitzahl reichen für fünf Ziffern plus Zeichen. */
.suchleiste{display:grid;grid-template-columns:200px 1fr auto;
  align-items:stretch;background:var(--weiss);
  border:var(--l-haar) solid var(--raster);
  border-bottom:var(--l-mess) solid var(--gruen);
  border-radius:var(--r-marker);overflow:hidden}
.suchleiste:focus-within{border-color:var(--gruen);
  box-shadow:0 1px 6px rgba(11,31,29,.10), 0 8px 28px -12px rgba(11,31,29,.28)}
/* Ruhezustand mit ganz leichtem Auftrieb - so sieht die Leiste aus wie
   etwas, das man anfassen soll, nicht wie ein Rahmen im Text. */
.suchleiste{box-shadow:0 1px 3px rgba(11,31,29,.06)}
.suchfeld{display:flex;align-items:center;gap:var(--a8);
  padding:0 var(--a16);min-width:0;
  border-right:var(--l-haar) solid var(--raster)}
/* In einer runden Leiste braucht die erste Zelle Luft nach links, sonst
   klebt die Lupe an der Rundung. */
.suchleiste>.suchfeld:first-child{padding-left:var(--a24)}
.suchfeld svg{flex:0 0 auto;color:var(--label)}
.suchfeld input,.suchfeld select{border:0;background:0;font:inherit;
  font-size:var(--t-eingabe);   /* ⚠️ nie kleiner: iOS zoomt sonst beim Antippen */
  color:var(--tinte);width:100%;min-width:0;padding:16px 0;
  appearance:none;-webkit-appearance:none;cursor:pointer}
.suchfeld input{cursor:text}
.suchfeld input::placeholder{color:var(--label)}
.suchfeld input:focus-visible,.suchfeld select:focus-visible{
  outline:var(--l-fokus) solid var(--gruen);outline-offset:-3px}
/* Das Pfeilchen der Gewerkzelle: zwei gedrehte Ränder, kein Schriftzeichen. */
.suchfeld.wahl{position:relative;padding-right:34px}
.suchfeld.wahl::after{content:"";position:absolute;right:var(--a16);top:50%;
  width:7px;height:7px;border-right:2px solid var(--label);
  border-bottom:2px solid var(--label);
  transform:translateY(-70%) rotate(45deg);pointer-events:none}
.suchleiste .knopf{border-radius:0;min-height:60px;padding:0 34px}
@media(max-width:759px){
  /* ⚠️ AUF DEM HANDY WIEDER ECKIG. Untereinander gestapelt wuerde die
     999-px-Rundung eine Saeule mit Kuppel ergeben - die Rundung wirkt nur,
     solange die Leiste breiter als hoch ist. */
  .suchleiste{grid-template-columns:1fr;border-radius:var(--r-bedien)}
  .suchleiste>.suchfeld:first-child{padding-left:var(--a16)}
  .suchfeld{border-right:0;border-bottom:var(--l-haar) solid var(--raster)}
  .suchleiste .knopf{border-radius:0;width:100%;min-height:52px;padding:0}
}
.unterzeile{display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--a8) var(--a24);margin-top:var(--a12)}
.standortknopf{background:0;border:0;font:inherit;font-size:14px;
  color:var(--tinte-2);cursor:pointer;display:inline-flex;align-items:center;
  gap:var(--a8);min-height:44px;padding:0 2px}
.standortknopf:hover{color:var(--gruen)}
/* Statuspunkt: einer der wenigen Fälle, in denen noch etwas rund ist. */
.standortknopf .punkt{width:7px;height:7px;border-radius:var(--r-marker);
  background:var(--gruen);flex:0 0 auto}
.suchmeldung{font-size:14px;color:var(--label);min-height:22px;
  margin-top:var(--a4)}
.suchmeldung.aktiv{color:var(--tinte);background:var(--werkbank);
  border-left:var(--l-satz) solid var(--gruen);
  padding:var(--a8) var(--a12)}

/* Die Vorschlagsliste schwebt wirklich über der Seite – einer der zwei
   Fälle, in denen ein Schatten erlaubt bleibt. Keine Schatten auf Daten. */
/* ⚠️ 36 EINTRÄGE OHNE BEGRENZUNG SIND 2.360 px (19.08.2026). Selbst ohne
   das beschneidende Tor wäre das eine Liste, durch die man die halbe Seite
   scrollt. `min()` mit vh sorgt dafür, dass sie auf jedem Gerät in den
   sichtbaren Bereich passt und in sich selbst scrollt - mit
   `overscroll-behavior:contain`, damit das Wischen nicht auf die Seite
   dahinter überspringt. */
.vorschlaege{max-height:min(400px,52vh);overflow-y:auto;
  overscroll-behavior:contain;position:absolute;left:0;right:0;top:calc(100% + var(--a8));
  background:var(--weiss);border:var(--l-haar) solid var(--raster);
  border-radius:var(--r-bedien);
  box-shadow:0 24px 60px -20px rgba(11,31,29,.42);
  overflow:hidden;z-index:40;display:none}
.vorschlaege.auf{display:block}
.vorschlag{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--a16);width:100%;padding:var(--a12) var(--a16);border:0;background:0;
  font:inherit;color:var(--tinte);text-align:left;cursor:pointer;margin:0;
  border-left:var(--l-mess) solid transparent}
.vorschlag:hover,.vorschlag[aria-selected="true"]{background:var(--werkbank);
  border-left-color:var(--gruen)}
.vorschlag .was{font-size:16px;font-weight:var(--w-halb)}
/* ⚠️ HIER STAND DIE BETRIEBSZAHL, JETZT STEHT DA, WAS DAS GEWERK MACHT
   (19.08.2026). Der Klassenname `wieviel` stimmt seitdem nicht mehr - er
   bleibt trotzdem, weil ein Umbenennen drei Dateien anfasst und nichts
   verbessert. Wer ihn liest: Es ist die Kurzbeschreibung, keine Menge. */
.vorschlag .wieviel{font-size:var(--t-fussnote);color:var(--label);
  white-space:nowrap;flex:0 0 auto;font-variant-numeric:tabular-nums}
.vorschlag+.vorschlag{border-top:var(--l-haar) solid var(--raster)}

@media(max-width:560px){
  /* Der Knopf nahm am Handy die halbe Zeile. Auf schmalen Geräten wird er zum
     Pfeil, die Beschriftung bleibt fürs Vorlesegerät erhalten. */
  .suche form{padding-left:var(--a12);gap:var(--a4)}
  .suche form>button{width:48px;height:48px;min-height:48px;padding:0;
    font-size:0;display:flex;align-items:center;justify-content:center;
    border-radius:0 var(--r-bedien) 0 0}
  /* ⚠️ Der Pfeil war weiß auf Orange: 2,56:1. Jetzt Tinte: 6,68:1. */
  .suche form>button::after{content:"";width:10px;height:10px;
    border-top:2.5px solid var(--tinte);border-right:2.5px solid var(--tinte);
    transform:rotate(45deg);margin-left:-3px}
  .suche form input{font-size:var(--t-eingabe);padding:13px 0}
}

/* ══════════════════════════════════════════════════════════════════════════
   FORMULARE
   ══════════════════════════════════════════════════════════════════════════ */

.formular{margin:var(--a32) 0}
.reihe{display:grid;grid-template-columns:1fr 1fr;gap:var(--a16)}
@media(max-width:620px){.reihe{grid-template-columns:1fr;gap:0}}
.feld{margin-bottom:var(--a16)}
label{display:block;font-size:13.5px;font-weight:var(--w-halb);
  color:var(--tinte-2);margin-bottom:var(--a8)}
/* Das Pflichtfeld-Zeichen ist KEINE Handlung - Orange bleibt dem
   Absendeknopf vorbehalten. Zudem misst Orange auf Papier nur rund
   2,6:1 und ist damit zu schwach (Befund 17.08.2026). */
label .noetig{color:var(--gruen);font-weight:var(--w-halb)}
input,select,textarea{width:100%;padding:14px var(--a16);
  border:var(--l-haar) solid var(--raster);border-radius:var(--r-bedien);
  font:inherit;font-size:var(--t-eingabe);color:var(--tinte);
  background:var(--weiss);
  transition:border-color .16s ease,box-shadow .16s ease}
textarea{min-height:110px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--gruen)}
/* ⚠️ Der frühere Fokus war ein 3-px-Schein in Grün-Hauch. Grün-Hauch auf
   Papier ist ein Kontrast von 1,03:1 – ein Ring, den niemand sieht. Jetzt
   der echte 3-px-Ring in Grün (11,13:1 auf Papier). */
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:var(--l-fokus) solid var(--gruen);outline-offset:2px;
  box-shadow:none}
/* Die Kopfleiste klebt oben. Ohne diesen Abstand scrollt der Browser ein
   Pflichtfeld genau darunter, und seine Meldung ist halb verdeckt. */
input,select,textarea{scroll-margin-top:88px}

.haken{display:flex;gap:var(--a12);align-items:flex-start;
  margin-bottom:var(--a16)}
.haken input{width:auto;flex:0 0 auto;margin-top:3px;padding:0}
.haken label{font-weight:var(--w-lauf);font-size:14.5px;color:var(--tinte-2);
  margin:0}
fieldset{border:0;border-top:var(--l-haar) solid var(--raster);
  padding:var(--a24) 0 0;margin:var(--a24) 0 0}
legend{font-size:var(--t-etikett);font-weight:var(--w-halb);
  letter-spacing:var(--sp-etikett);text-transform:uppercase;
  color:var(--label);padding:0}

/* ── Auswahlfeld in eigener Gestaltung (siehe wahlfeld.js) ──────────────── */
.wahlfeld{position:relative}
/* ⚠️ Das echte <select> bleibt an Ort und Stelle und behält seine Größe.
   Vorher war es auf 1x0 px zusammengedrückt – dann kann der Browser daran
   keine Pflichtfeld-Meldung zeigen. Der Nutzer drückte „Bedarf melden", und
   es passierte sichtbar NICHTS. Jetzt liegt es unsichtbar unter dem
   gestalteten Knopf, die Blase erscheint dort, wo der Nutzer hinschaut. */
.wahlfeld select{position:absolute;inset:0;width:100%;height:100%;
  opacity:0;pointer-events:none;border:0;padding:0;margin:0}
.wahlknopf{width:100%;text-align:left;padding:14px 44px 14px var(--a16);
  margin:0;border:var(--l-haar) solid var(--raster);
  border-radius:var(--r-bedien);background:var(--weiss);font:inherit;
  font-size:var(--t-eingabe);color:var(--label);cursor:pointer;
  transition:border-color .16s ease}
.wahlknopf.gesetzt{color:var(--tinte);font-weight:var(--w-halb)}
.wahlknopf:hover{border-color:var(--label)}
.wahlknopf:focus-visible{outline:var(--l-fokus) solid var(--gruen);
  outline-offset:2px;border-color:var(--gruen)}
/* Das Pfeilchen: zwei Striche, kein Bild – nichts nachzuladen. */
.wahlfeld::after{content:"";position:absolute;right:18px;top:22px;
  width:8px;height:8px;border-right:2px solid var(--label);
  border-bottom:2px solid var(--label);transform:rotate(45deg);
  pointer-events:none}
.wahlliste{position:absolute;left:0;right:0;top:calc(100% + var(--a4));
  z-index:40;background:var(--weiss);
  border:var(--l-haar) solid var(--raster);border-radius:var(--r-bedien);
  box-shadow:0 22px 56px -20px rgba(11,31,29,.42);display:none;
  max-height:min(52vh,380px);overflow:auto;padding:var(--a4)}
.wahlliste.auf{display:block}
.wahlposten{display:block;width:100%;text-align:left;
  padding:11px var(--a12);margin:0;border:0;background:0;font:inherit;
  font-size:15.5px;color:var(--tinte);border-radius:var(--r-bedien);
  cursor:pointer;border-left:var(--l-mess) solid transparent}
.wahlposten:hover,.wahlposten[data-markiert],
.wahlposten[aria-selected="true"]{background:var(--werkbank);
  border-left-color:var(--gruen)}

/* ══════════════════════════════════════════════════════════════════════════
   MELDUNGEN UND AUSSAGEN
   Aus Pastellkästen werden Achsen: 3 px links, Werkbank dahinter. Ein
   Instrument hat keine weichen Farbflächen.
   ══════════════════════════════════════════════════════════════════════════ */

.meldung{padding:var(--a12) var(--a16);border-radius:var(--r-daten);
  margin-bottom:var(--a16);font-size:var(--t-datenzeile);display:none;
  background:var(--werkbank);border-left:var(--l-satz) solid var(--label)}
.meldung.gut{color:var(--ok);border-left-color:var(--ok);display:block}
.meldung.schlecht{color:var(--rot);border-left-color:var(--rot);display:block}

/* ── Hinweiskästen ──────────────────────────────────────────────────────────
   ⚠️ .kasten-hinweis und .rechtlich wurden auf vier Seiten benutzt und waren
   NIRGENDS definiert. Betroffen waren ausgerechnet die beiden wichtigsten
   Kästen der Datenschutzerklärung – „Warum Ihr Betrieb hier stehen kann" und
   das Widerspruchsrecht. Art. 21 Abs. 4 DSGVO verlangt, dass der
   Widerspruchshinweis „getrennt von anderen Informationen" dargestellt wird;
   als Fließtext war er das nicht. */
.kasten-hinweis{background:var(--werkbank);
  border-left:var(--l-satz) solid var(--gruen);border-radius:var(--r-daten);
  padding:var(--a16) var(--a24);margin:var(--a16) 0}
.kasten-hinweis p{margin:0;color:var(--tinte);font-size:16px;line-height:1.6}
.rechtlich{font-size:13.5px;color:var(--label);line-height:1.55;
  border-top:var(--l-haar) solid var(--raster);margin-top:var(--a24);
  padding-top:var(--a16)}
.rechtlich a{color:var(--gruen)}

/* Die Aussage mit Achse: „Was wir tun" / „Was wir nicht tun". */
.satz{border-left:var(--l-satz) solid var(--gruen);
  padding:2px 0 2px var(--a16);margin-bottom:var(--a16)}
.satz.nicht{border-left-color:var(--rot)}
.satz .etikett{display:block;margin-bottom:var(--a4)}
.satz p{font-size:15.5px;color:var(--tinte-2);max-width:56ch}
.satz p b{color:var(--tinte);font-weight:var(--w-mess)}

/* ══════════════════════════════════════════════════════════════════════════
   DAS BESTANDSBAND – das Signaturelement
   Ein randloses Band in Schiefer, oben und unten von einer Skala gesäumt,
   dazwischen vier bis fünf gezählte Werte in großen Tabellenziffern.
   ⚠️ GENAU EIN BAND JE SEITE. Nie zwei, nie eine ganze dunkle Seite.
   Schiefer ist ein Band, keine Seite – wer daraus eine dunkle Oberfläche
   macht, hat die Richtung missverstanden.
   ══════════════════════════════════════════════════════════════════════════ */

.band{background:var(--schiefer);color:var(--weiss);position:relative;
  padding:clamp(28px,4vw,44px) 0 clamp(24px,3.5vw,36px)}
/* Die Skala: zwei repeating-linear-gradient. Null DOM-Elemente, null Bilder,
   trägt von 360 px bis 4K. Kurze Striche alle 8 px, jeder achte länger. */
.band::before,.band::after{content:"";position:absolute;left:0;right:0;
  height:10px;pointer-events:none;
  background-image:
    repeating-linear-gradient(to right,var(--raster-dunkel-2) 0 1px,transparent 1px 64px),
    repeating-linear-gradient(to right,var(--raster-dunkel) 0 1px,transparent 1px 8px);
  background-repeat:no-repeat;background-size:100% 10px,100% 6px}
.band::before{top:0;background-position:left top,left top}
.band::after{bottom:0;background-position:left bottom,left bottom}
.band a{color:var(--radar)}

.bandkopf{display:flex;flex-wrap:wrap;align-items:baseline;
  gap:var(--a4) var(--a16);margin-bottom:var(--a24)}
.bandkopf .etikett{color:var(--label-hell)}
.bandkopf .ausschnitt{font-size:var(--t-fussnote);color:var(--radar);
  font-weight:var(--w-halb)}

/* Nichts wird weggelassen, nur umgebrochen. */
.werte{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:var(--a24) var(--a32)}
/* Ab 1040 px stehen alle fünf Werte in einer Zeile. Gleich breite Spalten
   ließen die sechsstelligen Zahlen aneinanderstoßen, während die Spalte mit
   der zweistelligen halb leer stand – die Spalten bekommen deshalb das
   Gewicht ihrer Zahl. */
@media(min-width:1040px){.werte{grid-template-columns:1.15fr 1fr .55fr 1.15fr 1.15fr}}
@media(max-width:479px){.werte{grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--a16)}}
.wert .zahl{display:block;font-weight:var(--w-aussage);letter-spacing:-.04em;
  line-height:1;font-size:clamp(30px,3.6vw,44px);color:var(--weiss);
  font-variant-numeric:tabular-nums}
/* Ein leeres Feld ist bei einem Messgerät eine Aussage. „nicht gezählt"
   steht da, statt dass die Zahl weggelassen oder geschätzt wird. */
.wert.leer .zahl{font-size:clamp(18px,2.2vw,24px);color:var(--label-hell);
  letter-spacing:-.01em;padding:.35em 0}
.wert .etikett{display:block;margin-top:var(--a8);color:var(--radar)}
.wert .dazu{display:block;margin-top:var(--a4);font-size:var(--t-fussnote);
  color:var(--label-hell)}
/* Der Balken auf Schiefer ist Radar. Neben ihm steht immer sein Zahlenwert,
   deshalb ist er redundant und darf abgestuft sein. */
.quote{display:block;margin-top:var(--a8);height:4px;
  background:var(--raster-dunkel);position:relative}
.quote i{position:absolute;left:0;top:0;bottom:0;background:var(--radar);
  opacity:.85}
.bandfuss{margin-top:var(--a24);padding-top:var(--a16);
  border-top:var(--l-haar) solid var(--raster-dunkel);
  font-size:var(--t-fussnote);color:var(--label-hell);max-width:76ch}

/* ══════════════════════════════════════════════════════════════════════════
   DATENFLÄCHEN – 0 px Radius, Haarlinien, eine Tinte-Achse unten
   ══════════════════════════════════════════════════════════════════════════ */

/* Die Trefferfläche hängt direkt am Band: dieselbe Fläche, kein Abstand. */
.datenflaeche{background:var(--weiss);border-radius:var(--r-daten);
  border-bottom:var(--l-achse) solid var(--tinte)}
.datenflaeche .masz{padding-top:0;padding-bottom:0}
/* Werkbank als Streifen: markiert, dass hier gezählte Daten liegen.
   NIE als Seitenhintergrund, nie großflächig. */
.werkbank{background:var(--werkbank);border-radius:var(--r-daten)}

/* Der Umschalter: drei Sichten auf dieselben Treffer, nicht drei Seiten.
   Nur die Unterstreichung bewegt sich, der Inhalt wartet nie. */
.umschalter{display:flex;gap:0;
  border-bottom:var(--l-haar) solid var(--raster);
  overflow-x:auto;-webkit-overflow-scrolling:touch}
.reiter{background:0;border:0;font:inherit;font-size:14px;
  font-weight:var(--w-halb);color:var(--label);padding:14px 18px;
  cursor:pointer;white-space:nowrap;position:relative;min-height:48px}
.reiter::after{content:"";position:absolute;left:0;right:0;bottom:-1px;
  height:var(--l-mess);background:var(--gruen);transform:scaleX(0);
  transform-origin:left;transition:transform var(--z-bedien) ease}
.reiter[aria-selected="true"]{color:var(--tinte)}
.reiter[aria-selected="true"]::after{transform:scaleX(1)}

/* Die Datenzeile. Feste erste Spalte, damit die Namen aller Zeilen auf einer
   Kante stehen – auch die ohne Stempel. Ein Datenblock rastet ein. */
.datenzeile{display:grid;
  grid-template-columns:92px 1fr 130px 120px 18px;align-items:center;
  gap:var(--a12) var(--a16);padding:14px var(--a16);
  border-bottom:var(--l-haar) solid var(--raster);
  border-left:var(--l-mess) solid transparent;
  transition:background var(--z-zeile) linear,
             border-color var(--z-zeile) linear}
/* Werkbank plus 2 px Messlinie links: die Zeile im dichten Raster
   wiederfinden. */
.datenzeile:hover{background:var(--werkbank);border-left-color:var(--gruen)}
.datenzeile:last-child{border-bottom:0}
.datenzeile.kopf{background:var(--werkbank);padding-top:10px;
  padding-bottom:10px}
.datenzeile.kopf:hover{border-left-color:transparent}
.datenzeile .zahlspalte{text-align:right;font-weight:var(--w-mess);
  font-variant-numeric:tabular-nums}
@media(max-width:759px){
  .datenzeile{grid-template-columns:1fr 18px;gap:var(--a8) var(--a12)}
  .datenzeile .spalte{grid-column:1}
  .datenzeile .leerzelle,.datenzeile.kopf{display:none}
}
.datenzeile .pfeil{width:8px;height:8px;border-top:2px solid var(--label);
  border-right:2px solid var(--label);transform:rotate(45deg);
  justify-self:end}
/* display:block ist Pflicht – als inline-Span würden Höhe und Breite
   stillschweigend ignoriert und der Platzhalter wäre unsichtbar. */
.platz{display:block;background:var(--raster);height:13px;
  border-radius:var(--r-daten)}
.platz.kurz{width:58%}
.platz.mittel{width:76%}
.platz.lang{width:90%}

/* ── Das dichte Zahlenraster (Gewerke, Orte, Nachbarn) ───────────────────── */
.datenraster{border-top:var(--l-haar) solid var(--raster)}
.spaltenkopf{display:grid;grid-template-columns:1fr 96px 96px;
  gap:var(--a16);padding:10px var(--a12);
  border-bottom:var(--l-haar) solid var(--raster);background:var(--werkbank)}
.spaltenkopf .etikett:not(:first-child){text-align:right}
.g-zeile{display:grid;grid-template-columns:1fr 96px 96px;gap:var(--a16);
  align-items:center;width:100%;text-align:left;background:0;border:0;
  font:inherit;cursor:pointer;padding:var(--a12);
  border-bottom:var(--l-haar) solid var(--raster);
  border-left:var(--l-mess) solid transparent;
  transition:background var(--z-zeile) linear,
             border-color var(--z-zeile) linear}
.g-zeile:hover,.g-zeile[aria-pressed="true"]{background:var(--werkbank);
  border-left-color:var(--gruen)}
.g-name{font-size:var(--t-datenzeile);font-weight:var(--w-mittel);min-width:0}
/* Balken in Grün, abgestuft. Zulässig, weil der Zahlenwert daneben steht –
   der Balken ist redundant, keine bedeutungstragende Grafik. Wo ein Balken
   einmal ohne Zahl steht, gilt volle Deckkraft. */
.balken{display:block;height:4px;background:var(--raster);
  margin-top:var(--a8);max-width:340px}
.balken i{display:block;height:100%;background:var(--gruen)}
.g-zahl{font-size:var(--t-mess-m);font-weight:var(--w-mess);
  letter-spacing:var(--sp-mess);text-align:right;line-height:1.2;
  font-variant-numeric:tabular-nums}
.g-zahl.zweit{font-size:var(--t-datenzeile);font-weight:var(--w-mittel);
  color:var(--tinte-2)}
/* Die Achse: untere Kante des Blocks, je Block genau eine. */
.summe{display:grid;grid-template-columns:1fr 96px 96px;gap:var(--a16);
  padding:14px var(--a12);border-top:var(--l-achse) solid var(--tinte)}
.summe .g-zahl{font-weight:var(--w-aussage)}
@media(max-width:619px){
  .spaltenkopf,.g-zeile,.summe{grid-template-columns:1fr 76px 66px;
    gap:var(--a8)}
  .g-zahl{font-size:17px}
  .g-zahl.zweit{font-size:13.5px}
}

/* ── Kosten: eine gemeinsame Achse, jede Zeile ein Spannenbalken ─────────── */
.kostengruppe{margin-top:var(--a32)}
.kostengruppe h3{margin-bottom:var(--a4)}
.skala{position:relative;height:20px;margin:var(--a16) 0 var(--a4);
  border-bottom:var(--l-haar) solid var(--raster)}
.skala span{position:absolute;bottom:var(--a4);transform:translateX(-50%);
  font-size:var(--t-etikett);font-weight:var(--w-halb);letter-spacing:.06em;
  color:var(--label);white-space:nowrap;font-variant-numeric:tabular-nums}
.skala span::after{content:"";position:absolute;left:50%;bottom:-5px;
  width:1px;height:4px;background:var(--raster)}
.kostenzeile{padding:14px 0;border-bottom:var(--l-haar) solid var(--raster)}
.kostenzeile:last-of-type{border-bottom:0}
.kostenkopf{display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;gap:var(--a4) var(--a16)}
.kostenkopf .was{font-size:var(--t-datenzeile);font-weight:var(--w-halb)}
.kostenkopf .spanne{font-size:var(--t-mess-m);font-weight:var(--w-mess);
  letter-spacing:var(--sp-mess);font-variant-numeric:tabular-nums}
/* Die Einheit immer als Etikett hinter der Zahl, nie in derselben Größe. */
.kostenkopf .spanne small{font-size:var(--t-etikett);
  font-weight:var(--w-halb);letter-spacing:var(--sp-etikett);
  text-transform:uppercase;color:var(--label);margin-left:var(--a4)}
/* Widersprechen sich Quellen, liegen die Balken untereinander auf derselben
   Achse – der Widerspruch wird sichtbar, statt weggerechnet zu werden. */
.achse{position:relative;height:10px;margin-top:10px;background:var(--werkbank)}
.achse i{position:absolute;top:0;bottom:0;background:var(--gruen);width:0;
  transition:width var(--z-balken) ease-out}
.achsenfuss{border-bottom:var(--l-achse) solid var(--tinte);margin-top:0}
.quellzeile{margin-top:var(--a16);font-size:var(--t-fussnote);
  color:var(--label);max-width:74ch}

/* ══════════════════════════════════════════════════════════════════════════
   ABSCHNITTE UND SEITENKÖPFE
   ══════════════════════════════════════════════════════════════════════════ */

.abschnitt{padding:clamp(48px,7vw,96px) 0}
.abschnitt.eng{padding:clamp(40px,5vw,64px) 0}
.kopfzeile{display:flex;flex-wrap:wrap;align-items:end;
  justify-content:space-between;gap:var(--a12) var(--a24);
  margin-bottom:var(--a32)}
.kopfzeile p{margin-top:10px;color:var(--tinte-2);
  font-size:var(--t-datenzeile)}

/* ⚠️ NUR OBEN UND UNTEN SETZEN (Prüfstand 17.08.2026): Als Kurzform
   `padding: oben rechts/links unten` überschrieb diese Regel das seitliche
   Polster von .masz mit 0 - und weil sieben Seiten `<main class="masz inhalt">`
   führen, klebte dort auf dem Handy der Text am Bildschirmrand, während Logo
   und Fußzeile eingerückt blieben. Gemessen: Textbeginn bei x=0 auf
   /handwerker, /kosten, /rangfolge und der Fehlerseite. */
.inhalt{padding-top:var(--a32);padding-bottom:var(--a64)}
.inhalt h1{font-size:var(--t-aussage-1);line-height:1.08;
  letter-spacing:var(--sp-aussage-1);margin-bottom:var(--a12)}
.inhalt .unter{color:var(--tinte-2);font-size:16.5px;line-height:1.65;
  max-width:70ch;margin-bottom:var(--a12)}
.inhalt .unter a{color:var(--gruen);font-weight:var(--w-halb)}
.brotkrumen{font-size:13.5px;color:var(--label);margin-bottom:var(--a12)}
.brotkrumen a{color:var(--tinte-2);text-decoration:none}
.brotkrumen a:hover{color:var(--gruen)}

/* Der Erklärblock auf Werkbank – ein Streifen, keine Seite. */
.vermittler{background:var(--werkbank);
  border-top:var(--l-haar) solid var(--raster);
  border-bottom:var(--l-haar) solid var(--raster)}

/* ══════════════════════════════════════════════════════════════════════════
   TREFFERLISTE (Bestand: /handwerker/…, Ortsseiten, Startseite)
   Aus weichen Kästen werden Datenzeilen mit Haarlinien.
   ══════════════════════════════════════════════════════════════════════════ */

.treffer{margin-top:var(--a24)}
.treffer .karte{padding:var(--a16) 0;
  border-bottom:var(--l-haar) solid var(--raster);
  border-left:var(--l-mess) solid transparent;padding-left:var(--a12);
  transition:background var(--z-zeile) linear,
             border-color var(--z-zeile) linear}
.treffer .karte:hover{background:var(--werkbank);border-left-color:var(--gruen)}
.treffer .karte h3{font-size:var(--t-aussage-3);font-weight:var(--w-mess);
  letter-spacing:var(--sp-aussage-3);line-height:1.3}
.treffer .karte h3 a{color:var(--tinte);text-decoration:none}
.treffer .karte h3 a:hover{color:var(--gruen)}
.treffer .zeile{color:var(--tinte-2);font-size:15.5px;margin-top:5px}
.treffer .zeile a{color:var(--gruen);font-weight:var(--w-halb);
  text-decoration:none}
/* ⚠️ Die Partnerkarte trug bisher eine orange Fläche mit orangem Rahmen.
   Orange ist ab jetzt allein die Handlung – sonst gäbe es auf der Trefferseite
   drei orange Stellen und keine davon führte irgendwohin. Der Partner wird
   über Fläche und Kante ausgezeichnet, sein Stempel bleibt der Marker. */
.treffer .karte.partner{background:var(--werkbank);
  border:0;border-left:var(--l-satz) solid var(--gruen);
  border-bottom:var(--l-haar) solid var(--raster);
  border-radius:var(--r-daten);padding:var(--a16) var(--a16);
  margin-bottom:var(--a8)}

/* Leistungs-Chips – EINE Optik für Trefferliste, Ortsseite und Betriebsseite.
   Sie standen bisher nur inline in der Betriebsseite. Seit die Rangregel
   Betriebe mit Leistungen nach oben sortiert, zeigen die Karten sie überall –
   und dann müssen sie überall gleich aussehen. */
.chips{display:flex;flex-wrap:wrap;gap:var(--a4);margin-top:var(--a8)}
.chips span,.chip{display:inline-block;background:var(--werkbank);
  border:var(--l-haar) solid var(--raster);border-radius:var(--r-bedien);
  padding:var(--a4) var(--a12);font-size:13.5px;color:var(--tinte-2)}
/* Der anklickbare Chip: dasselbe Bauteil, nur bedienbar. */
a.chip,button.chip{text-decoration:none;cursor:pointer;font:inherit;
  font-size:13.5px;min-height:32px;line-height:22px;
  transition:border-color var(--z-bedien) ease,color var(--z-bedien) ease}
a.chip:hover,button.chip:hover{border-color:var(--gruen);color:var(--gruen)}
.chip[aria-pressed="true"]{border-color:var(--gruen);color:var(--gruen);
  font-weight:var(--w-halb)}

/* Die Ortsliste auf der Gewerkseite – kompakt, damit vierzig Orte nicht wie
   eine Bleiwüste wirken. Zahl rechtsbündig in Tabellenziffern. */
.ortliste{display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:var(--a8);margin-top:var(--a16)}
.ortliste a{display:flex;justify-content:space-between;align-items:center;
  gap:var(--a8);padding:var(--a12) var(--a12);
  border:var(--l-haar) solid var(--raster);border-radius:var(--r-daten);
  border-left:var(--l-mess) solid transparent;
  color:var(--tinte);text-decoration:none;font-weight:var(--w-halb);
  font-size:15.5px;min-height:46px;
  transition:background var(--z-zeile) linear,
             border-color var(--z-zeile) linear}
.ortliste a:hover{background:var(--werkbank);border-left-color:var(--gruen);
  color:var(--gruen)}
.ortliste span{color:var(--label);font-weight:var(--w-mittel);
  font-size:13.5px;font-variant-numeric:tabular-nums;text-align:right}

/* ── Partnerbetrieb-Kennzeichnung ────────────────────────────────────────────
   Der Stempel ist ein Marker, kein Behälter – deshalb behält er als eine von
   zwei Stellen den runden Radius.

   ⚠️ ER WAR ORANGE, ER IST ES NICHT MEHR. Er steht in jeder Trefferzeile;
   zusammen mit dem Suchknopf gab es damit auf jeder Ergebnisseite ein Dutzend
   orange Stellen und keine davon führte irgendwohin. Orange ist die eine
   Handlung. Ein Kennzeichen ist keine Handlung, es ist eine Aussage über den
   Eintrag – und die trägt hier Tinte auf Papier: 16,65:1, unübersehbar,
   ohne der Handlung ihre Farbe zu nehmen. */
.stempel{display:inline-block;background:var(--tinte);color:var(--papier);
  font-size:10.5px;font-weight:var(--w-aussage);letter-spacing:.09em;
  text-transform:uppercase;padding:3px 10px;border-radius:var(--r-marker);
  margin-bottom:var(--a8);white-space:nowrap;justify-self:start}

/* ══════════════════════════════════════════════════════════════════════════
   DER SPITZENPLATZ – die Auszeichnungsfläche
   Je Gewerk und Postleitzahl ein hervorgehobener Betrieb.

   ⚠️ ZWEI ARTEN, ZWEI ERSCHEINUNGSBILDER. Eine bezahlte Platzierung MUSS
   sichtbar als Anzeige gekennzeichnet sein (§ 5a Abs. 4 UWG) und darf nicht
   wie eine verdiente Auszeichnung aussehen. Der Unterschied darf deshalb nie
   nur in der Farbe liegen – er liegt hier in Fläche, Kante, Label und Text:

     .spitze          verdient  – gefüllte Werkbank, 3 px Grün-Achse links,
                                  grünes Label mit Punkt, Verweis „Wie wird
                                  das ermittelt?"
     .spitze.anzeige  bezahlt   – KEINE Füllung, gestrichelte Kante ringsum,
                                  3 px Label-graue Achse links, graues Label
                                  mit eigenem Rahmen, Wort „Anzeige"

   ⚠️ KEIN ORANGE. Orange ist die eine Handlung des Bildschirms (Suchen,
   Anrufen). Eine Auszeichnung, die orange leuchtet, nimmt der Handlung ihre
   Einzigartigkeit und macht die Anzeige zum Angebot. */

/* ⚠️ SPEZIFITÄT: `.treffer .karte` sind ZWEI Klassen und schlagen `.spitze`
   (eine) - die verdiente Auszeichnung verlor dadurch ihre grüne Achse,
   ausgerechnet die bezahlte `.spitze.anzeige` (zwei Klassen) behielt ihre.
   Gefunden am 17.08.2026 beim Ausmessen der Ortsseite. Deshalb steht die
   Auszeichnung hier doppelt: allein UND im Listen-Zusammenhang. */
.spitze,
.treffer .karte.spitze{position:relative;background:var(--werkbank);
  border-radius:var(--r-daten);
  border-left:var(--l-satz) solid var(--gruen);
  border-bottom:var(--l-haar) solid var(--raster);
  padding:var(--a16);margin-bottom:var(--a12)}
/* flex-wrap ist Pflicht: auf 360 px stehen Auszeichnung und Verweis sonst
   nebeneinander und brechen beide mehrzeilig ineinander. */
.spitze-marke{display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--a4) var(--a8);width:fit-content;max-width:100%;
  font-size:var(--t-etikett);font-weight:var(--w-aussage);
  letter-spacing:var(--sp-etikett);text-transform:uppercase;
  color:var(--gruen);   /* 10,17:1 auf Werkbank */
  margin-bottom:var(--a8)}
.spitze-marke::before{content:"";width:7px;height:7px;flex:0 0 auto;
  border-radius:var(--r-marker);background:var(--gruen)}
.spitze-warum{font-size:var(--t-fussnote);font-weight:var(--w-mittel);
  letter-spacing:0;text-transform:none;color:var(--label);
  text-decoration:underline;text-underline-offset:2px}
.spitze-warum:hover{color:var(--gruen)}

/* Die bezahlte Platzierung: leer statt gefüllt, gestrichelt statt satt,
   grau statt grün. Auf einen Blick als etwas anderes erkennbar – auch für
   jemanden, der keine Farben unterscheidet. */
.spitze.anzeige,
.treffer .karte.spitze.anzeige{background:0;
  border:var(--l-haar) dashed var(--raster);
  border-left:var(--l-satz) solid var(--label)}
.spitze.anzeige .spitze-marke,.spitze-marke.anzeige{
  color:var(--label);   /* 5,34:1 auf Papier */
  border:var(--l-haar) solid var(--raster);
  border-radius:var(--r-bedien);padding:2px var(--a8)}
.spitze.anzeige .spitze-marke::before,
.spitze-marke.anzeige::before{display:none}

/* ══════════════════════════════════════════════════════════════════════════
   FUSS
   ══════════════════════════════════════════════════════════════════════════ */

.fuss{border-top:var(--l-achse) solid var(--tinte);
  margin-top:clamp(64px,9vw,120px);padding:var(--a32) 0 var(--a48)}
.fuss .rechts{font-size:13.5px;color:var(--label);line-height:1.65;
  max-width:78ch}
.fuss .rechts b{color:var(--tinte-2);font-weight:var(--w-halb)}
.fuss .verweise{display:flex;gap:var(--a8) var(--a24);flex-wrap:wrap;
  margin-top:var(--a24);padding-top:var(--a16);
  border-top:var(--l-haar) solid var(--raster)}
.fuss .verweise a,.verweise a{color:var(--tinte-2);font-size:13.5px;
  text-decoration:none;display:inline-flex;align-items:center;min-height:40px}
.fuss .verweise a:hover,.verweise a:hover{color:var(--gruen)}

/* ══════════════════════════════════════════════════════════════════════════
   BEWEGUNG
   ⚠️ Diese Regel deckt CSS ab, NICHT JavaScript. Zahlenwechsel per
   requestAnimationFrame und Balkenwachstum per IntersectionObserver müssen
   matchMedia('(prefers-reduced-motion: reduce)').matches selbst abfragen und
   sofort auf den Endwert springen. Wird das vergessen, bewegt sich die Seite
   trotz gegenteiliger Systemeinstellung – und diese Regel täuscht
   Vollständigkeit vor.
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;
    scroll-behavior:auto!important}
}

/* Verweise in den Rechtstexten der Fußzeile. Standen bis 17.08.2026 in vier
   Einzelseiten und liefen überall sonst als blaue Browser-Links (#0000EE). */
.fuss .rechts a{color:var(--gruen);font-weight:var(--w-halb);
  text-decoration:underline;text-underline-offset:2px}

/* Beim Drucken sitzen alle Balken auf Endbreite. Sonst fehlen genau die,
   die der Leser vor dem Druck nie im Sichtfeld hatte - die Zahl steht zwar
   daneben, aber ein leerer Balken sieht aus wie "kostet nichts"
   (Befund des Bau-Agenten, 17.08.2026). */
@media print{
  /* Der Balken ist .achse (so heissen die Klassen der Kostenseiten), nicht
     .balken - beim ersten Versuch griff die Regel deshalb ins Leere. */
  .achse{transition:none!important}
  .kostengruppe .achse{width:var(--endbreite,100%)!important}
}

/* Preis-Richtwerte nach der Auswahl (Mike, 17.08.2026). Datenflaeche, also
   scharfkantig, Werte in Tabellenziffern rechtsbuendig - dieselbe Sprache wie
   die Kostenseiten, damit es sich beim Weiterklicken nicht fremd anfuehlt. */
.richtwerte{margin:var(--a48) 0 0;padding-top:var(--a32);
  border-top:var(--l-haar) solid var(--raster)}
.richtliste{margin:var(--a16) 0 var(--a12);border-top:var(--l-mess) solid var(--tinte)}
.richtzeile{display:flex;justify-content:space-between;align-items:baseline;
  gap:var(--a16);padding:var(--a12) 0;
  border-bottom:var(--l-haar) solid var(--raster)}
.richtwas{color:var(--tinte-2);font-size:15px;line-height:1.4}
.richtwert{white-space:nowrap;font-weight:var(--w-mess);font-size:17px;
  color:var(--tinte);font-variant-numeric:tabular-nums}
.richteinheit{font-weight:var(--w-lauf);font-size:13px;color:var(--label)}
@media(max-width:479px){
  .richtzeile{flex-direction:column;gap:var(--a4)}
  .richtwert{font-size:18px}
}

/* ══ DIE DREI TÜREN ═══════════════════════════════════════════════════════
   Mike, 17.08.2026: „Jeder Mensch, der da draufgeht - egal ob Handwerksbetrieb
   der Subunternehmer sucht oder Privatkunde der einen Handwerker sucht - die
   müssen sich alle super zurechtfinden."

   Drei gleichwertige Wege, direkt unter der Suche. Bewusst KEINE Kacheln mit
   Bildern und keine Farbflächen: Die Suche ist die Hauptsache und bleibt die
   einzige orange Stelle des Bildschirms. Die Türen sind ruhig und gleich
   gewichtet - wer sich nicht angesprochen fühlt, liest einfach weiter. */
.tueren{padding:clamp(30px,5vw,56px) 0 clamp(8px,2vw,18px)}
.tuer-reihe{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--a16)}
.tuer{display:flex;flex-direction:column;gap:var(--a8);
  padding:var(--a24);background:var(--weiss);
  border:var(--l-haar) solid var(--raster);border-radius:var(--r-bedien);
  text-decoration:none;color:inherit;
  transition:border-color var(--z-bedien) ease, transform var(--z-bedien) ease}
.tuer:hover{border-color:var(--gruen);transform:translateY(-2px)}
.tuer:focus-visible{outline:var(--l-fokus) solid var(--gruen);outline-offset:2px}
.tuer-was{font-weight:var(--w-aussage);font-size:clamp(16px,1.6vw,18px);
  color:var(--tinte);line-height:1.35}
.tuer-wie{color:var(--tinte-2);font-size:15px;line-height:1.55;flex:1}
/* ⚠️ GLEICH HOCH AUCH GESTAPELT (Prüfstand, 17.08.2026): Auf 1440 px waren
   die drei Karten exakt gleich hoch (215,7 px), auf 360 px aber 189/234/189 -
   der längere Subunternehmer-Text bricht in mehr Zeilen um. Nebeneinander
   erzwingt das Raster die gleiche Höhe, untereinander nicht. Eine feste
   Mindesthöhe für die Beschreibung gleicht das aus, ohne den Text zu kürzen. */
@media(max-width:899px){.tuer-wie{min-height:3.1em}}
/* Die grüne Achse markiert den Weg - dieselbe Sprache wie die Unterkante der
   Suchleiste, damit erkennbar bleibt, dass beides zusammengehört. */
.tuer-weiter{font-size:14px;font-weight:var(--w-halb);color:var(--gruen);
  padding-top:var(--a8);border-top:var(--l-haar) solid var(--raster)}
.tuer:hover .tuer-weiter{color:var(--gruen-tief)}
@media(max-width:899px){.tuer-reihe{grid-template-columns:1fr}}

/* ══ GEWERK-KACHELN ═══════════════════════════════════════════════════════
   Der Einstieg ins Verzeichnis - und damit auch der Weg, auf dem Google die
   Gewerkseiten findet. Vorher war das die .ortliste, also dieselbe Optik wie
   eine reine Datenliste. Jetzt: groesserer Name, Betriebszahl darunter,
   fuehlbare Trefferflaeche. */
.gewerk-raster{display:grid;gap:var(--a12);margin-top:var(--a24);
  grid-template-columns:repeat(auto-fill,minmax(238px,1fr))}
.gewerk-kachel{display:flex;flex-direction:column;gap:2px;
  padding:var(--a16) var(--a20);background:var(--weiss);
  border:var(--l-haar) solid var(--raster);border-radius:var(--r-bedien);
  text-decoration:none;min-height:76px;justify-content:center;
  transition:border-color var(--z-bedien) ease,background var(--z-bedien) ease}
.gewerk-kachel:hover{border-color:var(--gruen);background:var(--papier)}
.gewerk-kachel:focus-visible{outline:var(--l-fokus) solid var(--gruen);
  outline-offset:2px}
/* ⚠️ WEDER PIKTOGRAMM NOCH ZAHL (18.08.2026, Mikes Kurskorrektur).
   Erst führte ein Zeichen die Kachel an, dann für ein paar Stunden die
   Betriebszahl. Mike: „Hier geht's um Qualität, nicht um Quantität."
   Jetzt trägt der Name, darunter steht in einer Zeile, was das Gewerk
   macht - das ist die Hilfe, die jemand braucht, der „Spengler" nicht kennt. */
.gewerk-name{font-weight:var(--w-halb);color:var(--tinte);font-size:16px;
  line-height:1.3;letter-spacing:var(--sp-aussage-3)}
.gewerk-kurz{font-size:13px;color:var(--label);line-height:1.4;margin-top:2px}
/* ⚠️ HIER STAND `.ohne-zahl` (entfernt 18.08.2026). Es gibt keine Kachel
   ohne Zahl mehr - siehe die Begründung in index.html. Eine Regel für einen
   Zustand, den es nicht gibt, führt beim nächsten Umbau in die Irre. */

/* ══ ZIELGRUPPEN-WECHSEL ══════════════════════════════════════════════════
   Mike, 17.08.2026: „Keine Überschrift oder so, dass man sieht: okay, das ist
   für Handwerksbetriebe."
   Eine abgesetzte Fläche mit eigener Überschrift markiert den Wechsel. Ohne
   sie las sich die Seite, als würde sie mitten im Satz das Publikum tauschen. */
.zielgruppe-wechsel{margin-top:clamp(36px,5vw,60px);padding:clamp(20px,3vw,30px);
  background:var(--werkbank);border-radius:var(--r-bedien);
  border-left:var(--l-satz) solid var(--gruen)}
.zielgruppe-wechsel h2{margin-bottom:var(--a8)}
.knopf-kante{display:inline-flex;align-items:center;min-height:44px;
  padding:10px var(--a16);margin-right:var(--a8);
  border:var(--l-haar) solid var(--gruen);border-radius:var(--r-bedien);
  color:var(--gruen);text-decoration:none;font-weight:var(--w-halb);
  font-size:15px;background:var(--weiss)}
.knopf-kante:hover{background:var(--gruen);color:var(--weiss)}

/* ⚠️ DER ERGEBNISBEREICH NIMMT ERST PLATZ EIN, WENN ER WELCHEN BRAUCHT.
   Auf dem ersten Bildschirmfoto der neuen Startseite (17.08.2026) klaffte
   zwischen Suche und den drei Türen ein rund 400 px hohes Loch, in dem nur
   „Wählen Sie ein Gewerk." stand. Kein Fehler im Sinne von kaputt - aber es
   SAH kaputt aus, und darauf kommt es an. */
.ergebnisse{padding:0}
.ergebnisse.hat-inhalt{padding:clamp(18px,3vw,30px) 0 clamp(40px,6vw,70px)}

/* ══ SEITENKOPF UND FLIESSTEXT ════════════════════════════════════════════
   ⚠️ DIESE REGELN STANDEN IN BIS ZU SECHS SEITEN GLEICHZEITIG.

   Mike am 17.08.2026: „Alles nur so zerrissen irgendwie." Die Ursache ist
   nicht nur, dass drei Design-Entwürfe nebeneinander lagen - es ist auch
   das hier: Jede Seite beschrieb ihren Titelbereich, ihre Listen und ihre
   Fußnoten NOCHMAL. Sechs Kopien von `.titel`, vier von `dt`/`dd`. Wer eine
   davon ändert, ändert nur eine Seite - und die anderen fünf laufen
   auseinander, ohne dass es jemandem auffällt.

   Ab hier gibt es eine Fassung. Die Seiten-Stile darüber behalten nur, was
   wirklich NUR auf ihrer Seite vorkommt. */
.titel{padding:clamp(46px,7vw,84px) 0 clamp(8px,1.5vw,16px)}
.titel h1{font-size:var(--t-aussage-1);line-height:1.05;
  letter-spacing:var(--sp-aussage-1);font-weight:var(--w-aussage)}
.titel p{color:var(--tinte-2);font-size:17px;margin-top:var(--a16);
  max-width:46ch;line-height:1.55}
ul{padding-left:22px}
dl{margin-bottom:var(--a12)}
dt{font-size:var(--t-etikett);font-weight:var(--w-halb);color:var(--label);
  margin-top:var(--a12);text-transform:uppercase;letter-spacing:var(--sp-etikett)}
dd{color:var(--tinte);font-size:16.5px}
.hinweiszeile{font-size:var(--t-fussnote);color:var(--label);margin:var(--a4) 0 0}

/* Die Selbstauskunft des Betriebs - sichtbar abgesetzt, weil es SEINE Worte
   sind und nicht unsere Recherche. Die Kennzeichnung darunter ist Pflicht,
   nicht Höflichkeit: Wer fremde Werbeaussagen ungekennzeichnet zeigt, macht
   sie sich zu eigen. */
.selbstauskunft{margin-top:clamp(24px,4vw,40px);padding:clamp(18px,3vw,26px);
  background:var(--werkbank);border-radius:var(--r-bedien);
  border-left:var(--l-satz) solid var(--raster)}
.selbstauskunft h2{margin-bottom:var(--a8)}
.selbstauskunft p{line-height:1.6;white-space:pre-line}

/* Zustimmung bei der Registrierung – Kästchen und Text nebeneinander, der
   Text bleibt lesbar statt am Kästchen zu kleben. */
.zustimmung{display:flex;gap:var(--a12);align-items:flex-start;
  margin-bottom:var(--a16);font-size:14.5px;line-height:1.55;
  color:var(--tinte-2);cursor:pointer}
.zustimmung input{margin-top:3px;width:18px;height:18px;flex:0 0 auto;
  accent-color:var(--gruen)}

/* ══════════════════════════════════════════════════════════════════════════
   DAS GRÜNE TOR  ·  Corporate Design, 18.08.2026
   ══════════════════════════════════════════════════════════════════════════

   Mike, nach einem Blick auf die Seite am Handy: „Was ist mit dem Design?
   Hast du vom Design gar nichts gemacht, oder? Das Corporate Design muss
   absolut bahnbrechend sein."

   Er hatte recht. Bis hierhin war die Seite umsortiert, nicht gestaltet:
   EIN Bild auf der ganzen Seite (das Logo), EINE farbige Fläche (der
   Suchknopf), und das Logo - das Mike selbst „der Hammer" nennt - stand
   optisch allein in einer beigen Seite, die nichts von ihm aufgriff.

   DIE IDEE: Der erste Bildschirm wird die Logofarbe, groß. Wer die Seite
   öffnet, sieht die Marke, bevor er ein Wort liest. Darauf schwebt die
   Suche - hell, rund, greifbar. Alles darunter bleibt ruhig.

   DIE SIGNATUR IST DER BOGEN. Das Signet ist das O aus „JOB": ein Bogen mit
   flachem Abschluss. Genau diese Form schließt das Tor nach unten ab, rundet
   die Suchleiste und kehrt in den Kacheln wieder. Eine Form, überall.

   KONTRASTE VON HAND GERECHNET (nicht im Browser gemessen - das ist
   unzuverlässig): Weiß auf Tor 11,43:1 · Mint 7,20:1 · Orange 4,47:1.
   Orange trägt auf dem Grün also nur als FLÄCHE mit dunkler Schrift, nie als
   Textfarbe. Auf Weiß liegt Orange bei 2,56:1 - dort erst recht nicht.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --tor:#17403D;          /* die Logofarbe, groß */
  --tor-tief:#0E2B29;     /* Verlauf nach unten - gibt der Fläche Tiefe */
  --tor-schrift:#FFFFFF;
  --tor-leise:#B8D4CF;    /* Nebentext auf dem Tor, 6,9:1 */
}

.tor{
  position:relative;
  background:linear-gradient(168deg, var(--tor) 0%, var(--tor-tief) 100%);
  color:var(--tor-schrift);
  padding:clamp(28px,5vh,56px) 0 clamp(56px,9vh,104px);
  overflow:hidden;   /* hält das Wasserzeichen in der Fläche */
  isolation:isolate;
}

/* ── Das Wasserzeichen: das Signet, riesig und angeschnitten ───────────────
   Rechts oben, halb aus dem Bild - so wirkt die Marke groß, ohne den Text
   zu stören. Auf schmalen Bildschirmen wandert es nach oben und wird
   schwächer, damit die Überschrift die Fläche behält. */
/* ⚠️ DAS TOR BESCHNITT DIE GEWERK-AUSWAHL (19.08.2026, Mike im Bild).
   `.tor` trug `overflow:hidden`, damit das Signet-Wasserzeichen am Rand
   abschneidet. Die Auswahlliste ist aber ein Kind des Tors und 2.360 px
   hoch - sie wurde bei 625 px gekappt. Sichtbar blieben anderthalb
   Einträge; die Liste war praktisch unbenutzbar.

   Jetzt beschneidet nur noch das Wasserzeichen sich selbst: Es bekommt
   einen eigenen Rahmen mit `clip-path`, das Tor bleibt offen. So kann die
   Auswahl darüber hinausragen, ohne dass das Signet über den Rand läuft. */
.tor{overflow:visible}
/* ⚠️ DAS WASSERZEICHEN MUSS VON SELBST INNEN BLEIBEN (19.08.2026).
   Solange das Tor `overflow:hidden` trug, durfte das Signet über den Rand
   ragen - der Rahmen schnitt es ab. Nur schnitt derselbe Rahmen auch die
   Gewerk-Auswahl ab, und die ist wichtiger.

   Erster Versuch mit `clip-path` war falsch: Das schneidet am Pseudoelement
   selbst, nicht am Tor - gemessen 117 px Querscrollen, das Signet stand
   plötzlich neben der Seite. Jetzt sitzt es einfach innerhalb der Fläche:
   rechts bündig, etwas kleiner. Bei 3,5 % Deckkraft sieht man den
   Unterschied nicht, aber die Seite scrollt nicht mehr zur Seite. */
.tor::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  /* ⚠️ RECHTS BÜNDIG STATT ÜBERSTEHEND (19.08.2026). Vorher `right:-9%` -
     das Signet ragte bewusst über den Rand, weil `.tor{overflow:hidden}` es
     abschnitt. Genau dieser Rahmen schnitt aber auch die Gewerk-Auswahl ab:
     2.360 px hohe Liste, sichtbar blieben anderthalb Einträge. Das Tor ist
     jetzt offen, also muss das Wasserzeichen von selbst innen bleiben.
     Mein erster Versuch mit `clip-path` war falsch - das schneidet am
     Pseudoelement, nicht am Tor: gemessen 117 px Querscrollen. */
  right:0;top:-14%;width:min(58vw,640px);aspect-ratio:400/330;
  background:url('/signet-weiss.svg') no-repeat center/contain;
  opacity:.07;
}

/* ── Der Kopf steht AUF dem Tor ───────────────────────────────────────────
   Kein eigener Balken, keine Trennlinie - der Kopf gehört zur Fläche. */
.tor .kopf{background:0;border:0;position:relative;z-index:2}
.kopf.auf-tor .navi a{color:var(--tor-leise)}
.kopf.auf-tor .navi a:hover{color:var(--tor-schrift)}
.kopf.auf-tor .navi a.betont{color:var(--tor-schrift);font-weight:var(--w-aussage)}

/* ── Typografie auf dem Tor ───────────────────────────────────────────────
   Der Sprung, den Mike gefordert hat: Gewicht 800 statt 700, deutlich
   größer, enge Laufweite. Montserrat liegt als variable Schrift bei
   (100–900 in 35 KB) - der Bereich war da, nur ungenutzt. */
.tor h1{
  font-size:clamp(38px,7vw,82px);
  font-weight:800;letter-spacing:-.03em;line-height:1.02;
  max-width:16ch;margin:0 auto;
  text-wrap:balance;
}
.tor .dazu{
  color:var(--tor-leise);font-size:clamp(16.5px,1.9vw,20px);
  line-height:1.55;max-width:44ch;margin:var(--a20) auto 0;
}

/* ── Der Bogen, der das Tor abschließt ────────────────────────────────────
   Dieselbe flache Wölbung wie im Signet. Als SVG, nicht als border-radius:
   Eine Ellipse über die volle Breite lässt sich mit Radien nicht sauber
   beschreiben, und ein schräg abgeschnittener Rand sähe nach Vorlage aus. */
.tor-bogen{display:block;width:100%;height:clamp(28px,5vw,64px);
  margin-top:calc(-1 * clamp(28px,5vw,64px));position:relative;z-index:1}
.tor-bogen path{fill:var(--papier)}

/* ── Die Suche schwebt auf dem Tor ────────────────────────────────────────
   Weiß auf Grün, weich abgesetzt. Der Schatten ist hier erlaubt (und einer
   der wenigen Fälle): Er trägt die Bedeutung „das liegt oben drauf". */
.tor .suchleiste{
  background:var(--weiss);border:0;
  border-radius:var(--r-marker);
  box-shadow:0 18px 44px -18px rgba(4,20,18,.55), 0 2px 6px rgba(4,20,18,.14);
}
.tor .suchleiste:focus-within{
  box-shadow:0 0 0 3px rgba(111,224,206,.5),
             0 22px 52px -18px rgba(4,20,18,.6);
}
.tor .suchfeld{border-right-color:var(--raster)}
/* ⚠️ HIER HATTE ICH EINE ZWEITE `.tor .unterzeile`-REGEL GEBAUT, ohne
   nachzusehen, ob es schon eine gibt. Es gab eine – weiter unten, und die
   gewann. Zum dritten Mal an einem Tag derselbe Griff: erst bauen, dann
   merken, dass es die Sache schon gab. Die richtige Stelle steht jetzt
   unten bei „4. Der Standort-Knopf". */
.tor .standortknopf{color:var(--tor-leise)}
.tor .standortknopf:hover{color:var(--tor-schrift)}
.tor .standortknopf .punkt{background:var(--radar)}

/* ⚠️ HIER SASS MIKES BEFUND (Bildschirmfoto 18.08.2026): „Die Suche ist in
   der Mitte, aber ‚Ihre Postleitzahl' nicht in der Mitte. Warum nicht?"
   Ursache war meine eigene Änderung: `.oben{text-align:center}` zentrierte
   die Gewerk-ZEILE (ein span, der erbt), nicht aber das EINGABEFELD -
   Formularfelder erben text-align nicht auf demselben Weg. Ergebnis: ein
   halb zentrierter Kasten, schlimmer als ein linksbündiger.
   Jetzt steht beides gleich, und zwar linksbündig: So liest man Eingaben,
   und der Platzhalter beginnt dort, wo der Finger tippt. */
.suchfeld input,.suchfeld select,.wahltext{text-align:left}

/* ── Bewegung: einmal, beim Öffnen ────────────────────────────────────────
   Die Überschrift steigt aus 12 px Tiefe auf, die Suche eine Spur später.
   Kein Scroll-Feuerwerk - eine Bewegung, die sagt „die Seite ist da". */
@keyframes auf{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.tor h1{animation:auf .5s cubic-bezier(.2,.7,.3,1) both}
.tor .dazu{animation:auf .5s cubic-bezier(.2,.7,.3,1) .08s both}
.tor .suche{animation:auf .5s cubic-bezier(.2,.7,.3,1) .16s both}
@media(prefers-reduced-motion:reduce){
  .tor h1,.tor .dazu,.tor .suche{animation:none}
}

/* ── Handy ────────────────────────────────────────────────────────────────
   Auf dem Bildschirmfoto war die Suche ein gestapelter Kasten mit einem
   orangen Klotz darunter - drei Blöcke übereinander, ohne Form. Jetzt bleibt
   die Rundung erhalten und der Knopf bekommt seine eigene runde Fläche. */
@media(max-width:759px){
  /* ⚠️ AUCH HIER BÜNDIG (19.08.2026). Diese Handy-Regel überschrieb den
     korrigierten Wert weiter oben: `-30%` von 390 px sind exakt die 117 px
     Querscrollen, die ich gemessen habe. Ich hatte nur die Breitbild-Regel
     angefasst und diese Media-Query übersehen – derselbe Wert steht eben
     oft zweimal im Stylesheet, einmal je Bildschirmgröße. */
  .tor::before{right:0;top:-6%;width:min(76vw,420px);opacity:.06}
  /* ⚠️ 22 px IST HIER KEIN AUSREISSER, SONDERN DIE ANTWORT (19.08.2026).
     In der Nacht habe ich diesen Wert beim Token-Aufräumen durch
     `var(--r-marker)` ersetzt - und das sind 999 px. Aus der Suchleiste
     wurde am Handy eine Kapsel mit halbrunden Enden. Mike hatte zu genau
     diesem Bereich gesagt: „Die Startseite, dieser obere Bereich mit Suche
     und Grün - total geil, genauso lassen." Ich habe beim Aufräumen das
     Einzige kaputtgemacht, was ausdrücklich bleiben sollte.

     Warum 22 und nicht 999: Am Handy stehen die drei Felder GESTAPELT
     übereinander. Ein voll gerundeter Kasten drückt dann oben und unten die
     Ecken in den Text; nur die weiche Rundung hält die Form zusammen. Auf
     der breiten Ansicht liegen sie nebeneinander - dort ist 999 px richtig,
     und dort steht es auch.

     ⚠️ LEHRE: „Auf die Token bringen" ist kein Selbstzweck. Wer einen Wert
     ersetzt, muss prüfen, ob das Token DENSELBEN Wert hat - sonst ist es
     keine Aufräumarbeit, sondern eine Änderung im Vorbeigehen. */
  .tor .suchleiste{border-radius:22px;overflow:hidden}
  .tor .suchleiste .knopf{border-radius:0;min-height:54px}
}

/* ⚠️ HIER STANDEN DIE PIKTOGRAMM-REGELN (entfernt 18.08.2026).
   `.gewerk-bild` gibt es nicht mehr - siehe die Begründung an der Kachel
   oben. Die Kachel behält ihre Maße, nur trägt jetzt die Zahl. */

/* ══ NACHBESSERUNG NACH DEM ERSTEN BILDSCHIRMFOTO (18.08.2026) ═════════════
   Gemessen war alles grün: Ausrichtung gleich, kein waagerechtes Scrollen,
   Kontrast 9,6:1. Erst das ANSEHEN zeigte vier Dinge, die keine Messung
   findet. Das ist heute der dritte Fall dieser Art. */

/* 1. ⚠️ DER KOPF LIEF AUS DEM BILD. Auf 390 px stand „Kontakt" nur noch als
      „Ko…" am Rand - Logo plus drei Menüpunkte passen dort nicht nebeneinander.

      ⚠️ MEINE ERSTE LÖSUNG WAR FALSCH (behoben 18.08.2026). Hier stand:
      `.kopf .navi a[href="/fuer-betriebe"]{display:none}` - mit der
      Begründung, der Weg sei „über die drei Türen direkt darunter
      erreichbar". Die drei Türen gibt es aber NUR auf der Startseite. Auf
      /kontakt, /impressum, jeder Gewerkseite und jeder Betriebsseite war
      der Weg für unsere zahlenden Kunden am Handy schlicht weg. Ich habe
      einen Link versteckt und mir eingeredet, es sei ein Ersatz da.

      Ein Link, den man versteckt, braucht einen anderen Weg zum selben
      Ziel - sonst ist er gelöscht. Diesen Weg gibt es jetzt: das
      Hamburger-Menü. Die Regel hier ist ersatzlos raus. */
.kopf .navi{gap:clamp(10px,2.4vw,26px)}
@media(max-width:560px){
  .kopf .navi{font-size:14.5px}
  .kopf .marke img{height:22px}
}
/* ⚠️ HIER STAND EINE TOTE REGEL (entfernt 18.08.2026):
   `@media(max-width:400px){ .kopf .navi a[href="/mein-betrieb"]{display:none} }`
   Seit der Kopf vereinheitlicht ist, verlinkt keine einzige Kopfzeile mehr
   auf /mein-betrieb - der Weg steht im Klappmenü. Der Selektor traf ins
   Leere. Nachgesehen statt vermutet: in allen zwölf <header>-Blöcken null
   Treffer. Tote Regeln sind gefährlicher als fehlende: Beim nächsten Umbau
   sucht jemand den Grund, warum etwas verschwindet, und findet ihn hier
   nicht - weil es gar nicht mehr passiert. */

/* 2. ⚠️ DIE ÜBERSCHRIFT KLEBTE AN BEIDEN RÄNDERN. „Handwerksbetrieb." ist ein
      langes Wort; bei 38 px auf 390 px Breite berührt es links und rechts den
      Rand. Eine Überschrift ohne Luft wirkt gedrängt, nicht groß. */
@media(max-width:560px){
  .tor h1{font-size:clamp(30px,8.2vw,40px);max-width:13ch;
    letter-spacing:-.025em;hyphens:auto}
  .tor{padding-bottom:clamp(44px,7vh,72px)}
}

/* 3. Der Untertitel war rechnerisch hell genug (9,6:1), WIRKTE aber blass -
      helle Schrift auf großer dunkler Fläche verliert optisch. Eine Stufe
      heller, damit er gelesen statt überflogen wird. */
:root{--tor-leise:#CFE3DF}

/* 4. Der Standort-Knopf saß direkt unter der weißen Karte und wirkte
      angeklebt. Etwas Luft, und der Mint-Punkt bekommt Raum.

      ⚠️ HIER STAND `justify-content:flex-start` (korrigiert 18.08.2026).
      Es stand ohne Begründung neben dem Abstand – ich hatte es beim Setzen
      des margin-top einfach mitgeschrieben. Wirkung: Im Tor liegen
      Überschrift und Suchleiste beide mittig auf 195 px, der Standort-Knopf
      aber auf 126. Um 69 px versetzt, auf der Startseite, in der Mitte des
      Blicks. Mike hat genau diese Stelle im Bildschirmfoto eingekringelt.

      Dieselbe Sorte Fehler wie heute früh bei der Postleitzahl-Zeile: In
      einem Flex-Kasten ordnet `text-align:center` die Kinder nicht an,
      dafür braucht es `justify-content` – und wer das auf flex-start setzt,
      hebelt die Zentrierung des ganzen Bereichs aus. */
.tor .unterzeile{margin-top:var(--a16);justify-content:center}

/* ══ ZWEITE NACHBESSERUNG (18.08.2026, nach dem zweiten Hinsehen) ══════════ */

/* ⚠️ HELLE SCHRIFT AUF DUNKLEM GRUND WIRKT DÜNNER, ALS SIE IST. Der
   Untertitel hatte rechnerisch 9,6:1 - und sah trotzdem blass aus. Das ist
   keine Kontrast-, sondern eine Wahrnehmungsfrage: Auf dunklem Grund
   „frisst" das Auge helle Buchstabenränder. Gegenmittel ist nicht mehr
   Helligkeit allein, sondern ein halbes Gewicht mehr. */
.tor .dazu{color:#DCE9E6;font-weight:500}

/* ⚠️ ZU VIEL WEGGENOMMEN. Meine erste Fassung blendete unter 400 px auch
   „Mein Betrieb" aus - ausgerechnet den Einstieg ins Betriebs-Konto, den
   wichtigsten neuen Weg der Seite. Statt den Menüpunkt zu opfern, wird das
   Logo kleiner: Es bleibt lesbar und macht Platz. */
@media(max-width:400px){
  /* ⚠️ HIER STAND `display:inline` - UND DAS WAR DER GRUND FÜR DEN VERSATZ.
     Die Grundregel `.navi a` setzt `inline-flex` samt `align-items:center`
     und 44 px Trefferfläche. Mein `inline` sollte nur das vorherige `none`
     zurücknehmen, hat aber die ganze Zeile überschrieben - und weil
     Flex-Kinder blockifiziert werden, wurde daraus `block`. Ergebnis: Der
     Text sass oben in der 44-px-Fläche statt mittig, „Mein Betrieb" stand
     also sichtbar höher als „Kontakt".
     Zwei Messungen meldeten „beide bei top:32" und hatten recht - die BOXEN
     standen gleich, nur der Text darin nicht. Erst die Messung der HÖHE und
     des display-Werts brachte es. */
  .kopf .navi a[href="/mein-betrieb"]{display:inline-flex}
  .kopf .marke img{height:19px}
  .kopf .navi{font-size:13.5px;gap:12px}
}

/* Das Tor endete in einer großen leeren Grünfläche unter dem Standortknopf.
   Die Fläche soll die Suche tragen, nicht sie oben halten. */
.tor{padding-bottom:clamp(30px,5vh,64px)}
.tor-bogen{margin-top:calc(-1 * clamp(20px,3.5vw,48px));
  height:clamp(20px,3.5vw,48px)}

/* ══ DRITTE NACHBESSERUNG (18.08.2026) ════════════════════════════════════ */

/* ⚠️ DER KOPF BRACH AUF ZWEI ZEILEN UM. Auf 390 px standen „Mein Betrieb"
   und „Kontakt" untereinander, versetzt - das sieht nach Fehler aus, nicht
   nach Gestaltung. Ursache: Logo und zwei Menüpunkte brauchen zusammen mehr
   Platz als da ist. Statt weitere Punkte zu opfern (das hatte ich schon
   einmal zu weit getrieben), wird die Zeile umbruchsicher gemacht und das
   Logo passt sich an. */
.kopf .kopf-in,.kopf .masz{flex-wrap:nowrap}
.kopf .navi{flex-wrap:nowrap;white-space:nowrap}
@media(max-width:430px){
  .kopf .marke img{height:18px}
  .kopf .navi{font-size:13px;gap:11px}
}

/* Das Tor endete in einer großen leeren Grünfläche. Auf dem Handy fiel das
   besonders auf: Die Suche saß oben, darunter zweihundert Pixel nichts.
   Die Fläche soll die Suche RAHMEN, nicht sie an den oberen Rand drücken. */
@media(max-width:759px){
  .tor{padding-top:clamp(14px,3vh,28px);padding-bottom:clamp(18px,3vh,34px)}
  .tor .suche{margin-top:clamp(22px,4vh,34px)}
}
/* Und der erste Abschnitt nach dem Bogen rückte zu spät nach. */
.tueren{padding-top:clamp(20px,3.5vw,40px)}

/* ⚠️ „MEIN BETRIEB" SASS HÖHER ALS „KONTAKT" - und die Messung sagte, beide
   stünden auf derselben Höhe (getBoundingClientRect().top = 32 für beide).
   Beides stimmte: Die BOXEN begannen gleich, aber sie werden im Flex-Container
   auf volle Höhe gestreckt (align-items:stretch ist die Voreinstellung), und
   darin sitzt der Text je nach eigener Zeilenhöhe unterschiedlich. „Kontakt"
   ist fett und hat dadurch eine andere Zeilenhöhe als „Mein Betrieb".

   Das ist der Fall, in dem eine Messung „grün" meldet und das Auge trotzdem
   recht hat - dieselbe Sorte Befund wie heute schon dreimal. Deshalb: nicht
   weiter raten, sondern die Ausrichtung hart setzen. */
.kopf .navi{align-items:center;line-height:1.2}
.kopf .navi a{display:inline-flex;align-items:center;line-height:1.2}

/* ══ DER KOPF AUF DEM TOR: ERST BEIM SCROLLEN EIN BALKEN ═══════════════════
   Mike, 18.08.2026: „Hinter dem Logo und den Menübereichen sehe ich so einen
   Balken auf transparent. Den kann man ja wegtun. Und erst wenn man scrollt,
   kommt der."

   Er hat recht, und die Ursache ist ein Rest aus der hellen Seite: Die
   Kopfzeile trägt `background:rgba(252,252,250,.9)` mit Weichzeichner - auf
   Papier unsichtbar, auf dem dunklen Tor ein heller Streifen quer durchs Bild.

   Oben: nichts. Der Kopf gehört zur Fläche.
   Gescrollt: ein dunkler Balken, damit die Menüpunkte über dem hellen Inhalt
   lesbar bleiben. Der Wechsel ist weich, nicht hart. */
.kopf.auf-tor{background:0;backdrop-filter:none;-webkit-backdrop-filter:none;
  border-bottom-color:transparent;
  transition:background var(--z-flaeche) ease, backdrop-filter var(--z-flaeche) ease}
.kopf.auf-tor.gescrollt{
  background:rgba(14,43,41,.86);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom-color:rgba(111,224,206,.16)}

/* ── Das Login-Zeichen in der Kopfzeile ───────────────────────────────────
   Zeichen plus Wort: Ein Personen-Symbol allein wird oft als „Profil" statt
   als „anmelden" gelesen. Auf schmalen Geräten bleibt nur das Zeichen -
   dort zählt jeder Millimeter, und der Text steht im aria-label. */
.anmeldeknopf{display:inline-flex;align-items:center;gap:var(--a8);
  padding:0 var(--a12);min-height:38px;border-radius:var(--r-marker);
  border:var(--l-haar) solid var(--raster);color:var(--tinte-2)}
.anmeldeknopf:hover{border-color:var(--gruen);color:var(--gruen)}
.kopf.auf-tor .anmeldeknopf{border-color:rgba(255,255,255,.34);color:var(--tor-schrift)}
.kopf.auf-tor .anmeldeknopf:hover{border-color:var(--radar);color:var(--radar)}
@media(max-width:640px){
  .anmeldetext{display:none}
  .anmeldeknopf{padding:0 10px}
}

/* ── Das Sitemap-Menü in der Fußzeile ─────────────────────────────────────
   Vier Bereiche nach Zielgruppe. Auf breiten Bildschirmen nebeneinander, auf
   dem Handy untereinander - kein Aufklapp-Menü, weil man in einer Fußzeile
   sehen will, was es gibt, statt es zu suchen. */
.sitemap{display:grid;gap:clamp(20px,3vw,36px);margin-top:clamp(22px,3vw,34px);
  padding-top:clamp(20px,3vw,30px);border-top:var(--l-haar) solid var(--raster);
  grid-template-columns:repeat(4,1fr)}
.sitemap-block{display:flex;flex-direction:column;gap:var(--a8)}
.sitemap-block h3{font-size:var(--t-etikett);text-transform:uppercase;
  letter-spacing:var(--sp-etikett);color:var(--label);
  font-weight:var(--w-halb);margin-bottom:var(--a4)}
.sitemap-block a{color:var(--tinte-2);text-decoration:none;font-size:14.5px;
  line-height:1.45;min-height:26px;display:inline-flex;align-items:center}
.sitemap-block a:hover{color:var(--gruen);text-decoration:underline}
/* ⚠️ DER PUNKT, AUF DEM MAN GERADE STEHT, IST KEIN LINK (18.08.2026).
   Ein Verweis auf die Seite, die man schon offen hat, führt ins Leere -
   der Besucher klickt und nichts passiert. Er wird deshalb als Text
   gezeigt und dunkler gesetzt, damit man sich im Menü wiederfindet. */
.sitemap-block .hier{color:var(--tinte);font-size:14.5px;font-weight:var(--w-halb);
  line-height:1.5}
@media(max-width:860px){.sitemap{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.sitemap{grid-template-columns:1fr;gap:var(--a20)}}


/* Das Tor rückt unter den klebenden Kopf, damit er optisch darauf liegt.
   Die Höhe ist dieselbe wie die Mindesthöhe der Kopfzeile (64 px). */
/* ⚠️ „+" WURDE ZU „~" (18.08.2026) – und das war ein echter Ausfall.
   `+` heißt „das unmittelbar folgende Geschwister". Als ich das
   Hamburger-Menü einbaute, kam dessen Markup zwischen Kopf und Tor zu
   stehen – damit traf die Regel nichts mehr. Folge: Das Tor rutschte um
   64 px nach unten, der Kopf stand plötzlich auf weißem Papier statt auf
   Grün, und das gerade weiß gefärbte Hamburger-Zeichen war weiß auf Weiß.
   Gemessen: Zeichen bei y=8–50, Tor erst ab y=59.

   Kein Bildschirmfoto hätte mir das erklärt – ich habe es gesehen und dann
   die Positionen ausgelesen. `~` trifft jedes folgende Geschwister und ist
   gegen Einschübe unempfindlich. */
.kopf.auf-tor ~ .tor{margin-top:-64px;padding-top:calc(64px + clamp(28px,5vh,56px))}
@media(max-width:759px){
  .kopf.auf-tor ~ .tor{padding-top:calc(64px + clamp(14px,3vh,28px))}
}

/* ══ DAS KACHEL-RASTER AM HANDY (18.08.2026) ══════════════════════════════
   ⚠️ GEMESSEN, NACHDEM ICH MIR DAS BILD ANGESEHEN HABE: Die Startseite war
   am 390-px-Handy 7.151 px lang – **achteinhalb Bildschirme**. Grund: 36
   Gewerk-Kacheln standen einspaltig untereinander, jede 104 px hoch, weil
   `minmax(238px,1fr)` bei 342 px nutzbarer Breite nur eine Spalte zulässt.
   Wer unten ankommen wollte, wischte zwanzigmal.

   Zwei Spalten halbieren das. Die Kachel wird dafür flacher: Zeichen und
   Name in einer Zeile statt übereinander wäre eng bei „Rohbau &
   Maurerarbeiten"; also bleibt die Stapelung, nur mit weniger Luft. */
@media(max-width:560px){
  .gewerk-raster{grid-template-columns:repeat(2,1fr);gap:var(--a8)}
  .gewerk-kachel{min-height:0;padding:var(--a12);gap:2px}
  .gewerk-name{font-size:14.5px;line-height:1.25;hyphens:auto}
  .gewerk-kurz{font-size:11.5px;line-height:1.35}
}

/* ══ DER INHABER-WEG AUF DER BETRIEBSSEITE (18.08.2026) ═══════════════════
   Ruhig, aber nicht mehr zu übersehen: eigene Fläche, grüne Kante, klare
   Ansage. Orange bleibt dem Anruf-Knopf vorbehalten – auf dieser Seite
   sucht der Besucher einen Handwerker, nicht ein Konto. */
.inhaber-weg{display:flex;flex-direction:column;gap:var(--a4);
  margin-top:var(--a24);padding:var(--a16) var(--a20);
  background:var(--werkbank);border-radius:var(--r-bedien);
  border-left:var(--l-satz) solid var(--gruen)}
.inhaber-weg b{font-size:16px;color:var(--tinte)}
.inhaber-weg span{font-size:14.5px;color:var(--tinte-2);line-height:1.55}
.inhaber-weg a{font-size:14.5px;font-weight:var(--w-halb);color:var(--gruen);
  margin-top:var(--a4)}

/* ══ DIE PREISSEITE (18.08.2026) ══════════════════════════════════════════
   Drei Stufen nebeneinander, die mittlere hervorgehoben. Kein Orange auf
   den Karten selbst – Orange trägt nur der eine Knopf der empfohlenen
   Stufe, sonst kämpfen drei Handlungen um dieselbe Aufmerksamkeit. */
.stufen{display:grid;gap:var(--a16);margin-top:clamp(24px,4vw,40px);
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));align-items:start}
.stufe{position:relative;display:flex;flex-direction:column;gap:var(--a8);
  background:var(--weiss);border:var(--l-haar) solid var(--raster);
  border-radius:var(--r-bedien);padding:clamp(20px,3vw,28px)}
.stufe.empfohlen{border-color:var(--gruen);border-width:2px;
  box-shadow:0 6px 28px rgba(23,64,61,.09)}
.stufe .marker{position:absolute;top:-11px;left:clamp(20px,3vw,28px);
  background:var(--tor);color:#fff;font-size:11.5px;font-weight:var(--w-halb);
  letter-spacing:.08em;text-transform:uppercase;padding:3px 10px;border-radius:999px}
.stufe h2{font-size:19px;margin:0}
.stufe .preis{font-size:clamp(26px,3.4vw,32px);font-weight:800;
  letter-spacing:-.02em;color:var(--tinte);line-height:1.15}
.stufe .fuerwen{color:var(--tinte-2);font-size:14.5px;line-height:1.5;
  padding-bottom:var(--a8);border-bottom:var(--l-haar) solid var(--raster)}
.stufe ul{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:var(--a8)}
.stufe .kann li{position:relative;padding-left:22px;font-size:14.5px;
  line-height:1.5;color:var(--tinte)}
.stufe .kann li::before{content:"";position:absolute;left:2px;top:6px;
  width:10px;height:6px;border-left:2px solid var(--gruen);
  border-bottom:2px solid var(--gruen);transform:rotate(-45deg)}

/* ⚠️ „IN ARBEIT" MUSS ANDERS AUSSEHEN ALS „ENTHALTEN" – sonst liest es
   niemand und die Trennung war umsonst. Gedämpft, ohne Haken, mit
   Überschrift. Es ist kein Verkaufsargument, es ist eine Warnung. */
.stufe .inarbeit{margin-top:var(--a4);padding-top:var(--a12);
  border-top:var(--l-haar) dashed var(--raster)}
.stufe .inarbeit .etikett{display:block;font-size:11.5px;font-weight:var(--w-halb);
  letter-spacing:.07em;text-transform:uppercase;color:var(--label);
  margin-bottom:var(--a8)}
.stufe .inarbeit li{position:relative;padding-left:22px;font-size:13.5px;
  line-height:1.5;color:var(--label)}
.stufe .inarbeit li::before{content:"";position:absolute;left:4px;top:9px;
  width:8px;height:2px;background:var(--label);opacity:.6}

.stufe .waehlen{margin-top:auto;padding-top:var(--a16);font-size:15px;
  font-weight:var(--w-halb);color:var(--gruen);text-decoration:none}
.stufe .waehlen:hover{text-decoration:underline}
.stufe .waehlen.betont{align-self:stretch;margin-top:var(--a16);padding:13px 20px;
  background:var(--orange);color:var(--tinte);text-align:center;
  border-radius:var(--r-bedien);transition:background var(--z-bedien) ease}
.stufe .waehlen.betont:hover{background:var(--orange-tief);text-decoration:none}

.klarstellung{margin-top:clamp(32px,5vw,52px);padding:clamp(20px,3vw,28px);
  background:var(--werkbank);border-radius:var(--r-bedien);
  border-left:var(--l-satz) solid var(--gruen)}
.klarstellung h2{font-size:19px;margin-bottom:var(--a8)}
.klarstellung p{color:var(--tinte-2);line-height:1.6;max-width:62ch}

.vergleich{margin-top:clamp(32px,5vw,52px)}
.vergleich table{width:100%;border-collapse:collapse;margin-top:var(--a16);
  font-variant-numeric:tabular-nums}
.vergleich th,.vergleich td{text-align:left;padding:var(--a12) var(--a8);
  border-bottom:var(--l-haar) solid var(--raster);font-size:15px}
.vergleich th{font-weight:var(--w-halb);color:var(--tinte-2);width:40%}
.vergleich tr.wir th,.vergleich tr.wir td{color:var(--tinte);font-weight:var(--w-halb)}
.vergleich .quelle{font-size:13px;color:var(--label);margin-top:var(--a8)}

.fragen{margin-top:clamp(32px,5vw,52px);max-width:70ch}
.fragen h3{font-size:16.5px;margin-top:var(--a24);margin-bottom:var(--a4)}
.fragen p{color:var(--tinte-2);line-height:1.65}

/* ══ ANFRAGEN- UND ZAHLEN-FACH IM BETRIEBS-KONTO (18.08.2026) ═════════════ */
.anfragen-fach,.zahlen-fach{margin-top:var(--a24);padding-top:var(--a20);
  border-top:var(--l-haar) solid var(--raster)}
.anfragen-fach h3{font-size:17px;margin-bottom:var(--a12)}
.anfrage{display:flex;flex-direction:column;gap:2px;padding:var(--a12) var(--a16);
  background:var(--werkbank);border-radius:var(--r-bedien);margin-bottom:var(--a8);
  border-left:var(--l-satz) solid var(--raster)}
/* Offen heißt: hier kann der Betrieb noch etwas tun. Abgeschlossene
   Anfragen bleiben sichtbar, treten aber zurück. */
.anfrage.offen{border-left-color:var(--gruen)}
.anfrage b{font-size:15.5px;color:var(--tinte)}
.anfrage .wo{font-size:14px;color:var(--tinte-2)}
.anfrage .stand{font-size:13px;color:var(--label);margin-top:var(--a4)}
.zahlen-fach .etikett{display:block;font-size:11.5px;font-weight:var(--w-halb);
  letter-spacing:.07em;text-transform:uppercase;color:var(--label);
  margin-bottom:var(--a4)}
.zahlen-fach b{font-size:30px;font-weight:800;letter-spacing:-.02em;
  color:var(--tinte);font-variant-numeric:tabular-nums}
.zahlen-fach span:not(.etikett){font-size:16px;color:var(--tinte-2)}
/* Der Vorsprung-Hinweis steht abgesetzt – er ist die Nachricht, nicht die
   Fußnote. Ohne eigene Fläche verschwand er im Fließtext darüber. */
.vorsprung-hinweis{margin-top:var(--a12);padding:var(--a12) var(--a16);
  background:var(--werkbank);border-radius:var(--r-bedien);
  border-left:var(--l-satz) solid var(--orange)}

/* ══════════════════════════════════════════════════════════════════════════
   DAS HAMBURGER-MENÜ
   Mike, 18.08.2026: „Bei mobiler Ansicht brauchen wir ein Hamburger-Menü.
   Ein cooles, animiertes. Einfach geil machen."

   ⚠️ DER ANLASS WAR EIN FEHLER, NICHT NUR GESCHMACK. Gemessen am 360-px-
   Handy: „Für Handwerksbetriebe" stand auf display:none – der Weg für
   unsere zahlenden Kunden fehlte auf dem Telefon vollständig.

   ⚠️ DIE GRENZE IST 860 px, dieselbe wie beim Sitemap-Raster. Zwei
   verschiedene Umbruchpunkte im selben Kopf sehen aus wie ein Fehler.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Das Zeichen: drei Striche, die sich zum Kreuz drehen ───────────────── */
.hamburger{display:none;align-items:center;justify-content:center;
  width:42px;height:42px;margin-left:var(--a4);padding:0;
  background:0;border:0;border-radius:var(--r-bedien);cursor:pointer;color:inherit;
  -webkit-tap-highlight-color:transparent}
.hamburger:hover{background:rgba(23,64,61,.06)}
.hamburger:focus-visible{outline:var(--l-fokus) solid var(--gruen);outline-offset:2px}
.hamburger .striche{position:relative;display:block;width:21px;height:15px}
.hamburger i{position:absolute;left:0;width:100%;height:2px;border-radius:2px;
  background:currentColor;
  /* Zwei getrennte Zeitkurven: Erst wandern die Striche zur Mitte, DANN
     drehen sie. Laufen beide gleichzeitig, sieht es aus, als würde das
     Zeichen zerfallen statt sich zu falten. */
  transition:transform var(--z-flaeche) cubic-bezier(.65,.05,.36,1),
             opacity 140ms ease, top var(--z-bedien) ease}
.hamburger i:nth-child(1){top:0}
.hamburger i:nth-child(2){top:6.5px}
.hamburger i:nth-child(3){top:13px}
.hamburger.auf i:nth-child(1){top:6.5px;transform:rotate(45deg)}
.hamburger.auf i:nth-child(2){opacity:0;transform:scaleX(.2)}
.hamburger.auf i:nth-child(3){top:6.5px;transform:rotate(-45deg)}

/* ── Der Schleier dahinter ──────────────────────────────────────────────── */
.menue-schleier{position:fixed;inset:0;z-index:60;
  background:rgba(14,43,41,.55);backdrop-filter:blur(3px);
  opacity:0;transition:opacity var(--z-flaeche) ease}
.menue-schleier.auf{opacity:1}

/* ── Das Panel ──────────────────────────────────────────────────────────── */
.menue{position:fixed;top:0;right:0;bottom:0;z-index:61;
  width:min(88vw,392px);display:flex;flex-direction:column;
  /* Dieselbe Fläche wie das Tor auf der Startseite. Wer das Menü öffnet,
     sieht die Marke wieder – nicht ein neutrales graues Kästchen. */
  background:linear-gradient(160deg,var(--tor) 0%,var(--tor-tief) 100%);
  /* ⚠️ DAS PANEL SCROLLT NICHT – NUR DIE LISTE DARIN (18.08.2026).
     Zuerst scrollte das ganze Panel und der Anmelde-Knopf klebte per
     `sticky` unten. Auf einem 360×640-Handy stand er trotzdem außerhalb
     des Bildes (gemessen: Unterkante 788 bei 640 px Fensterhöhe). Der
     Grund ist die Bauweise, nicht der Wert: Wer den ganzen Kasten scrollen
     lässt, muss dem Knopf mit Tricks hinterherlaufen.
     Richtig ist die Aufteilung Kopf / scrollende Liste / fester Fuß. */
  color:#fff;overflow:hidden;overscroll-behavior:contain;
  box-shadow:-18px 0 60px rgba(14,43,41,.32);
  transform:translateX(100%);
  /* Ausschwingende Kurve: schnell los, weich an. Das ist der Unterschied
     zwischen „rutscht rein" und „legt sich hin". */
  transition:transform 340ms cubic-bezier(.22,1,.36,1)}
.menue.auf{transform:translateX(0)}

/* Das Signet als Wasserzeichen – wie im Tor, nur kleiner und stiller. */
/* ⚠️ STILLER ALS IM TOR. Bei 5 % Deckkraft auf 118 % Breite sah das Signet
   im Bildschirmfoto aus wie ein Fleck hinter der Schrift, nicht wie ein
   Wasserzeichen. Auf einer schmalen Fläche wirkt dieselbe Zahl kräftiger
   als auf einer breiten. */
.menue::before{content:"";position:absolute;right:-28%;top:-2%;
  width:96%;aspect-ratio:400/330;pointer-events:none;opacity:.035;
  background:url(/signet-weiss.svg) no-repeat center/contain}

.menue-kopf{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  padding:var(--a20) var(--a24) var(--a16);position:relative}
.menue-logo{height:19px;width:auto}
.menue-zu{display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;padding:0;background:rgba(255,255,255,.09);
  border:0;border-radius:var(--r-bedien);color:#fff;cursor:pointer;
  transition:background var(--z-bedien) ease}
.menue-zu:hover{background:rgba(255,255,255,.18)}
.menue-zu:focus-visible{outline:var(--l-fokus) solid var(--radar);outline-offset:2px}

/* ⚠️ min-height:0 IST PFLICHT, KEIN SCHMUCK. Ein Flex-Kind schrumpft
   standardmäßig nicht unter seinen Inhalt (min-height:auto). Ohne diese
   Zeile wächst die Liste über das Panel hinaus, statt zu scrollen - und
   schiebt den Knopf wieder aus dem Bild. */
.menue-inhalt{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:var(--a4) var(--a24) var(--a16);position:relative;
  display:flex;flex-direction:column;gap:var(--a20)}
.menue-block{display:flex;flex-direction:column;gap:2px;
  /* ⚠️ DIE BLÖCKE STEIGEN GESTAFFELT NACH. --nr kommt aus dem HTML und ist
     die Nummer des Blocks; daraus wird die Verzögerung. Das ist die
     Bewegung, die das Menü lebendig macht – ohne Zappeln, jeder Block
     genau einmal. */
  opacity:0;transform:translateY(14px);
  transition:opacity 260ms ease, transform 260ms cubic-bezier(.22,1,.36,1);
  transition-delay:calc(90ms + var(--nr,0) * 55ms)}
.menue.auf .menue-block{opacity:1;transform:none}

/* ⚠️ LUFT VOR DER ÜBERSCHRIFT, NICHT NUR DAHINTER. Im Bildschirmfoto lief
   die Trennlinie des letzten Links direkt in die nächste Überschrift - vier
   Blöcke sahen aus wie eine lange Liste. Ein Abschnitt braucht oben mehr
   Abstand als unten, sonst gehört die Überschrift optisch zum Vorherigen. */
.menue-block h2{font-size:11.5px;font-weight:var(--w-halb);letter-spacing:.09em;
  text-transform:uppercase;color:var(--radar);margin:0 0 var(--a8)}
.menue-block + .menue-block h2{margin-top:var(--a8)}
.menue-block a,.menue-block .hier{display:block;padding:7px 0;font-size:15.5px;
  line-height:1.35;text-decoration:none;color:rgba(255,255,255,.9);
  border-bottom:1px solid rgba(255,255,255,.07);
  transition:color var(--z-bedien) ease, padding-left var(--z-bedien) ease}
.menue-block a:hover{color:#fff;padding-left:6px}
.menue-block a:focus-visible{outline:var(--l-fokus) solid var(--radar);
  outline-offset:2px;border-radius:var(--r-bedien)}
/* Der Punkt, auf dem man steht, ist kein Link – ein Verweis auf die offene
   Seite führt ins Leere. */
.menue-block .hier{color:var(--radar);font-weight:var(--w-halb)}

/* ⚠️ ER STAND UNTERHALB DES BILDSCHIRMS (gefunden im eigenen Bildschirmfoto,
   18.08.2026). Vier Blöcke mit fünfzehn Punkten sind höher als ein
   844-px-Handy - der wichtigste Knopf des Menüs war nur nach dem Scrollen
   zu sehen. Ein Knopf, den man suchen muss, ist kein Knopf.
   `sticky` hält ihn am unteren Rand, solange der Inhalt darüber läuft; der
   Verlauf darüber sorgt dafür, dass Text nicht hart dahinter abschneidet,
   sondern ausblendet. */
/* ⚠️ EINE ZEILE, NICHT ZWEI. „Anmelden oder Konto anlegen" brach auf einem
   360-px-Gerät um; das Personen-Zeichen stand dann neben der ersten Zeile
   und der Knopf sah schief aus. Der kürzere Text sagt dasselbe. */
.menue-anmelden{flex:0 0 auto;position:relative;
  display:flex;align-items:center;justify-content:center;
  gap:var(--a8);margin:0 var(--a24) calc(var(--a16) + env(safe-area-inset-bottom));
  padding:15px 18px;background:var(--orange);color:var(--tinte);
  font-weight:var(--w-halb);font-size:15px;white-space:nowrap;text-decoration:none;
  border-radius:var(--r-bedien);position:relative;
  transition:background var(--z-bedien) ease}
/* Ein weicher Abschluss über dem Knopf: So sieht man, dass die Liste
   weitergeht, statt dass Text hart abgeschnitten wirkt. */
.menue-anmelden::before{content:"";position:absolute;left:calc(var(--a24) * -1);
  right:calc(var(--a24) * -1);top:-30px;height:30px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(14,43,41,0),var(--tor-tief))}
.menue-anmelden:hover{background:var(--orange-tief)}
.menue-anmelden:focus-visible{outline:var(--l-fokus) solid #fff;outline-offset:2px}

/* ── Die Umschaltung ────────────────────────────────────────────────────── */
@media(max-width:860px){
  /* ⚠️ HIER VERSCHWINDEN DIE EINZELLINKS, NICHT VORHER. Genau das war der
     Fehler: „Für Handwerksbetriebe" war ausgeblendet, ohne dass es einen
     anderen Weg dorthin gab. Jetzt gibt es den Hamburger. */
  /* ⚠️ `.kopf` MUSS DAVORSTEHEN. Ohne das war diese Regel `.navi .nur-breit`
     (Gewicht 0,2,0) und verlor gegen das vorhandene `.kopf .navi a` (0,2,1) -
     „Handwerker finden" blieb am Handy sichtbar, „Für Handwerksbetriebe"
     verschwand. Ein halb aufgeräumter Kopf sieht kaputter aus als gar keiner.
     Dass die Regel in einer @media-Abfrage steht, hilft nicht: Medienabfragen
     erhöhen das Gewicht nicht. Gefunden nicht durch Lesen, sondern indem ich
     den Browser gefragt habe, welche Regel gewinnt. */
  .kopf .navi .nur-breit{display:none}
  .hamburger{display:flex}
  /* Das Anmelde-Zeichen bleibt: Es ist die Tür zum Konto und damit zum Abo.
     Am Handy nur das Zeichen, ohne Wort – Platz ist genug (gemessen 111 px
     frei bei 360 px), aber zwei Wörter nebeneinander wirken gedrängt. */
  .anmeldeknopf .anmeldetext{display:none}
  .anmeldeknopf{padding:8px;width:38px;height:38px;justify-content:center}
}
@media(min-width:861px){
  /* Über der Grenze ist das Menü unerreichbar – dann darf es auch für
     Vorleseprogramme nicht in der Tabulator-Reihenfolge stehen. */
  .menue,.menue-schleier{display:none}
}

/* Solange das Menü offen ist, steht die Seite dahinter still. */
html.menue-offen{overflow:hidden}

/* ⚠️ WER WENIGER BEWEGUNG EINGESTELLT HAT, BEKOMMT KEINE. Das ist keine
   Höflichkeit: Für Menschen mit vestibulärer Störung löst eine große,
   schnelle Fläche echtes Unwohlsein aus. Das Menü ist dann sofort da –
   es funktioniert genauso, es fährt nur nicht. */
@media(prefers-reduced-motion:reduce){
  .menue,.menue-schleier,.menue-block,.hamburger i{transition:none !important}
  .menue-block{opacity:1;transform:none}
}

/* ⚠️ DER HAMBURGER WAR AUF DER STARTSEITE UNSICHTBAR (18.08.2026).
   Er erbt `color` vom Kopf, und der ist auf Papier tintenfarben – auf dem
   grünen Tor ergab das #0B1F1D auf #17403D. Von Hand gerechnet: **1,50:1**.
   Das ist kein schwacher Kontrast, das ist kein Kontrast. Am Handy war das
   Menü auf der wichtigsten Seite der Website faktisch nicht auffindbar.

   Gefunden habe ich es nicht im Bild – dort sieht man dunkel auf dunkel
   leicht als „ist halt dezent" – sondern indem ich die Farbe ausgelesen und
   den Kontrast nachgerechnet habe. Weiß auf dem Tor: 11,43:1.
   (Warum von Hand: Der Browser meldet berechnete Farben, aber Deckkraft und
   Verlauf dahinter rechnet er nicht mit ein – die Zahl stimmt dann nicht.) */
.kopf.auf-tor .hamburger{color:#fff}
.kopf.auf-tor .hamburger:hover{background:rgba(255,255,255,.12)}
.kopf.auf-tor .hamburger:focus-visible{outline-color:var(--radar)}

/* ══ DIE ENTFERNUNG AM TREFFER (18.08.2026) ═══════════════════════════════
   Mike: „Dort steht dann ganz klar die Entfernung von Ihrem angegebenen
   Standort." Sie ist kein Beiwerk, sondern das, was die Auswahl trifft -
   deshalb eine eigene Zeile, nicht in die Anschrift gequetscht. */
.treffer .weite{display:inline-flex;align-items:center;gap:6px;
  margin-top:var(--a4);padding:3px 10px;border-radius:999px;
  background:var(--werkbank);color:var(--tinte-2);
  font-size:12.5px;font-weight:var(--w-halb);font-variant-numeric:tabular-nums}
.treffer .weite::before{content:"";width:5px;height:5px;border-radius:999px;
  background:var(--label)}
/* „Im Ort" ist die beste Antwort, die es gibt - die darf man sehen. */
.treffer .weite.nah{background:var(--gruen-hauch);color:var(--gruen)}
.treffer .weite.nah::before{background:var(--gruen)}

/* „Passwort vergessen" – ein Textknopf unter dem Feld, kein Hauptweg.
   Er muss auffindbar sein, ohne mit der Anmeldung zu konkurrieren. */
.pw-vergessen{background:0;border:0;padding:6px 0 0;font:inherit;font-size:13.5px;
  color:var(--gruen);cursor:pointer;text-decoration:underline;
  text-underline-offset:2px}
.pw-vergessen:hover{color:var(--tinte)}
.pw-vergessen:focus-visible{outline:var(--l-fokus) solid var(--gruen);outline-offset:2px}

/* ⚠️ LANGE WÖRTER SCHOBEN DIE SEITE ZUR SEITE (19.08.2026, Prüf-Agent).
   Bei 320 px Breite ragten „Datenschutzerklärung" (349 px) und
   „Nutzungsbedingungen für das Betriebs-Konto" (361 px) über den Rand -
   die ganze Seite ließ sich waagerecht schieben. Kein Element war zu breit,
   nur der Textknoten: Ein Wort ohne Trennstelle bricht nicht um.

   `hyphens:auto` trennt nach den Regeln der Sprache (lang="de" steht im
   <html>), `overflow-wrap:anywhere` ist das Netz für alles, was auch dann
   noch zu lang ist – etwa eine Adresse ohne Leerzeichen.

   ⚠️ NUR AUF ÜBERSCHRIFTEN. Im Fließtext sieht harte Trennung unruhig aus;
   dort reicht der normale Umbruch, weil die Wörter kürzer sind. */
h1, .titel h1, .gross, h2 {
  hyphens:auto;
  overflow-wrap:anywhere;
}

/* ⚠️ `hidden` MUSS IMMER WIRKEN (19.08.2026, Prüf-Agent).
   Das Browser-Standardblatt setzt `[hidden]{display:none}` – aber jede
   eigene display-Regel schlägt es, unabhängig von der Spezifität. Auf
   /mein-eintrag stand `.knopfreihe{display:flex}`, und damit blieben zwei
   Handlungsknöpfe sichtbar, obwohl das Markup sie versteckt hatte.

   Gemessen: Ein Besucher ohne gültigen Link las „Dieser Link ist
   unvollständig" und sah darunter trotzdem „ALLES RICHTIG" und „Etwas
   ändern". Beide Klicks endeten mit 403. Das verstößt gegen die
   Projektregel „keine Knöpfe ohne Funktion" – und es ist der schlechteste
   erste Eindruck, den ein Betrieb von uns bekommen kann.

   Eine Regel an EINER Stelle statt einer Ausnahme je Seite: Wer `hidden`
   ins Markup schreibt, darf sich darauf verlassen können. */
[hidden] { display: none !important; }