/* ===============================================================
   internetanbieter.org – das Erscheinungsbild

   WOHER DIE FARBE KOMMT. Zwei Farben, und beide stehen im Schriftzug.

   Das Blau ist das Blau des Logos. Der Verlauf des Schriftzugs laeuft von
   #16386b nach #a0c6e6; das dunkle Ende traegt jetzt das Band, in dem Kopf
   und Fuss stehen, und sein Farbton faerbt alle Neutraltoene – Flaechen,
   Linien, Schrift. Vorher war die Seite warm grau gehalten. Neben einem
   blauen Schriftzug las sich das wie zwei Absichten in einem Kopf.

   Das Orange ist das Orange der Endung .org und zugleich das Orange der
   Kabelschutzrohre: In Deutschland sind Rohre fuer Telekommunikation
   orange – Strom ist rot, Gas gelb, Wasser blau. Wer eine aufgerissene
   Strasse sieht, weiss an dieser Farbe, dass dort Daten liegen. Es ist
   zugleich die eine Farbe, die keine der beiden Schwesterdomains fuehren
   kann: kostenlose-javascripts.de hat Petrol, internetanbieter.net
   Himmelblau. Wer die drei nebeneinander sieht, verwechselt sie nicht.

   Der Schriftzug fuehrt #ea661e, die Seite #e2571e. Der Unterschied ist
   gewollt: der Bandbreitenbalken muss auf seiner hellen Spur 3:1
   erreichen, und das schafft nur das dunklere der beiden. Nebeneinander
   stehen sie nie – im Kopf ist der Grund dunkel, und dort trifft der
   Balken nicht hin.

   WO SIE AUFTRITT. Blau ist der Bau: das Band, die Linien, der Grund, die
   Kante eines Anbieters ohne eigene Hausfarbe. Es fordert nichts. Orange
   ist die Handlung: Link, Knopf, Bandbreitenbalken, der Ring im
   Browsertab. Sonst nirgends. Eine Handlungsfarbe, die ueberall steht,
   sagt nichts mehr.

   DER EINE MUTIGE ORT: DIE BANDBREITENSKALA. Jede Tarifzeile traegt
   einen Balken auf einer gemeinsamen, LINEAREN Skala. Ein Anschluss mit
   50 MBit/s sieht daneben aus wie ein Zwanzigstel von 1.000 – weil er
   eines ist. Eine logarithmische Skala haette dieselben Zahlen huebscher
   aussehen lassen und die Aussage verloren. Der Mindeststummel von 2 %
   sorgt nur dafuer, dass auch der langsamste Tarif noch als Balken
   erkennbar bleibt und nicht zum Strich wird.

   ALLES ANDERE BLEIBT STILL. Zeilen statt Karten: Acht Angebote
   untereinander, Bandbreite und Preis immer an derselben Stelle, lassen
   sich mit den Augen abfahren. Nebeneinandergestellte Karten zwingen
   dazu, jede einzeln zu lesen. Haarlinien statt Schatten, ein einziger
   Radius, keine Verlaeufe. Bewegung nur als Antwort auf eine Bedienung.

   EIN HELLER MODUS, BEWUSST. Ein dunkles Gegenstueck waere eine zweite
   Palette, die bei jeder Aenderung mitgepflegt werden muesste – und die
   Seite wird ueberwiegend bei Tageslicht auf dem Telefon gelesen.
   =============================================================== */

/* --- Schriften -------------------------------------------------
   Selbst gehostet, keine Verbindung zu Google. Auf einer deutschen
   Seite ist das die rechtlich saubere Variante, und es haelt das
   Versprechen im Fuss: nichts von fremden Servern.

   Zwei Familien, beide variabel, zusammen 71 KB. Bricolage Grotesque
   traegt Ueberschriften und Zahlen – sie hat Ecken und Unregelmaessig-
   keiten, die eine Grotesk sonst wegbuegelt, und genau die geben der
   Seite ein Gesicht. Aus der Datei sind zwei der drei Achsen heraus-
   gerechnet (opsz auf 32, wdth auf 100): aus 131 KB wurden 41 KB, ohne
   dass etwas fehlt, was hier gebraucht wird.

   Instrument Sans setzt den Fliesstext. Sie ist ruhig genug, um neben
   Bricolage nicht mitreden zu wollen, und hat Ziffern gleicher Breite –
   in einer Preisspalte ist das keine Feinheit, sondern die Bedingung
   dafuer, dass die Kommas untereinanderstehen.

   Kein Monospace. Beide Nachbardomains fuehren IBM Plex Mono fuer
   Zahlen; hier tut es die Textschrift mit tabellarischen Ziffern.
   ---------------------------------------------------------------- */
/* Die beiden url() nennen den Ordner ausgeschrieben, und zwar als einzige
   Stelle der Seite: Diese Datei wird durchgereicht und nicht gerendert, sie
   kennt {{ site.pfade }} also nicht. Der Wert gehoert zu "schriften" in
   src/_data/site.js – wer ihn dort aendert, aendert die naechsten beiden
   Zeilen mit. tools/verweise-pruefen.mjs sieht in den gebauten Stylesheets
   nach und meldet es, wenn nur eine der beiden Seiten nachgezogen wurde. */
@font-face {
  font-family: "Bricolage";
  src: url("/schriften/bricolage-var.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/schriften/instrumentsans-var.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  /* Flaechen. Kein reines Weiss und kein Grau von der Stange: alle vier
     Werte liegen auf dem Farbton des Logoblaus (216 Grad), nur weit
     heruntergesaettigt. Das ist der Unterschied zwischen einer Seite, die
     blau gestrichen ist, und einer, die blau gebaut ist – man sieht die
     Faerbung erst, wenn ein neutrales Grau daneben liegt. */
  --grund: #fbfcfd;
  --flaeche: #eef2f7;
  --flaeche-tief: #e2e9f2;
  /* Die Spur der Bandbreitenskala. Sie ist heller als --flaeche-tief,
     damit der Balken darauf auf 3,3:1 kommt: ein Balken traegt hier
     eine Aussage und ist keine Verzierung. Der Balken selbst behaelt
     das Signalorange – dunkler waere kontrastreicher und falscher. */
  --spur: #eef2f7;
  --linie: #ccd6e2;
  --linie-zart: #e6ecf3;

  /* Schrift. Ein Fastschwarz mit einem Rest Blau darin, damit es auf den
     kuehlen Flaechen nicht braun wirkt. */
  --tinte: #15191f;
  --blei: #58616e;

  /* Die Leitung. --leitung ist die Flaechenfarbe (Balken, Zeichen),
     --leitung-tief die Textfarbe: Weiss auf dem hellen Orange erreicht
     die 4,5:1 nicht, auf dem dunklen schon. Zwei Werte, weil Kontrast
     kein Detail ist. */
  --leitung: #e2571e;
  --leitung-tief: #a63709;
  --leitung-zart: #fbeee6;
  --auf-leitung: #ffffff;

  /* Das Erdreich: das dunkle Band, durch das die Leitung laeuft.
     Kopf und Fuss stehen darin. Der Wert ist nicht gewaehlt, sondern
     abgelesen: es ist das dunkle Ende des Logoverlaufs, #16386b. Der
     Schriftzug steht damit im Kopf auf seiner eigenen Farbe – und weil
     die dortige Fassung (logo-hell.svg) mit der hellen Haelfte desselben
     Verlaufs zeichnet, ist das Band nicht Hintergrund, sondern die andere
     Haelfte des Logos. Weiss darauf kommt auf 11,6:1. */
  --erde: #16386b;
  --auf-erde: #dbe6f2;
  --erde-linie: rgb(255 255 255 / .18);

  /* Faellt zurueck, wo keine Hausfarbe eines Anbieters gesetzt ist.
     Der Name --marke gehoert dieser Hausfarbe; die Handlungsfarbe der
     Seite heisst deshalb --leitung und nicht --marke. Der Rueckfall war
     frueher das Orange – damit trug jeder Anbieter ohne hinterlegtes Logo
     die Signalfarbe der Seite und sah aus wie eine Empfehlung. Jetzt ist
     es das Hausblau: die Kante zeigt an, dass eine Zeile beginnt, und
     behauptet nichts weiter. */
  --marke: var(--erde);

  --schrift-display: "Bricolage", "Trebuchet MS", system-ui, sans-serif;
  --schrift-text: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --breite: 70rem;
  --rundung: 4px;

  color-scheme: light;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font-family: var(--schrift-text);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-variant-numeric: tabular-nums;
}

img, svg { max-width: 100%; }
img { height: auto; }

.wrap {
  width: min(100% - 2.5rem, var(--breite));
  margin-inline: auto;
}

main.wrap { padding-block: 2.25rem 4rem; }

/* --- Typografie -------------------------------------------------
   Der Massstab ist bewusst kurz: H1, H2, H3, Text. Wer eine vierte
   Ebene braucht, hat die Seite falsch gegliedert. */
h1, h2, h3, .karte-titel {
  font-family: var(--schrift-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.015em;
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -.028em;
  margin-bottom: .35em;
}

h2 {
  font-size: clamp(1.4rem, 1.2rem + .8vw, 1.85rem);
  margin-top: 2.75rem;
}

h3 { font-size: 1.2rem; margin-top: 1.75rem; }
h4 { font-family: var(--schrift-display); font-size: 1rem; margin: 0 0 .3em; }

p { margin: 0 0 1.1em; max-width: 68ch; }

a {
  color: var(--leitung-tief);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
a:hover { text-decoration-thickness: 2px; }

strong { font-weight: 600; }

:focus-visible {
  outline: 3px solid var(--leitung-tief);
  outline-offset: 2px;
  border-radius: 2px;
}

.anriss {
  font-size: 1.15rem;
  line-height: 1.55;
  max-width: 60ch;
}

.hinweis, .quelle, .klein, .stand {
  color: var(--blei);
  font-size: .875rem;
  line-height: 1.5;
}
.quelle, .stand { margin-top: 1rem; }
.klein-inline { font-size: .8em; color: var(--blei); font-weight: 400; }

.visuell-versteckt {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--leitung-tief);
  color: var(--auf-leitung);
  padding: .7rem 1.1rem;
  z-index: 20;
  text-decoration: none;
}
.skip-link:focus { left: .5rem; top: .5rem; }

/* --- Knopf ------------------------------------------------------
   Ein einziger Knopf auf der ganzen Seite, und er fuehrt immer an
   dieselbe Stelle: zum Angebot des Anbieters. */
.knopf {
  display: inline-block;
  background: var(--leitung-tief);
  color: var(--auf-leitung);
  font-family: var(--schrift-display);
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.2;
  padding: .62rem 1.05rem;
  border-radius: var(--rundung);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .12s ease-out;
}
.knopf:hover { background: #7f2905; }

/* --- Kopf -------------------------------------------------------
   Das Erdreich, durch das die Leitung laeuft. Ein dunkles Band ueber
   der hellen Seite – es traegt das Zeichen und die zwei Wege, die es
   hier gibt, und sonst nichts. */
.kopf { background: var(--erde); color: var(--auf-erde); }

.kopf-inhalt {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 4.25rem;
  padding-block: .6rem;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: inherit;
  text-decoration: none;
  margin-right: auto;
}
/* Der Schriftzug traegt einen Teil seiner Hoehe in der Unterlaenge des g:
   von den 108 Einheiten des Bildes sind nur 68 Versalhoehe. Deshalb wird
   er ueber die Breite bemessen und nicht ueber die Hoehe – nach Hoehe
   gesetzt geriete die Schrift neben der Navigation zu klein.
   width und height stehen zusaetzlich im img-Tag, damit der Platz schon
   vor dem Laden steht und die Kopfzeile nicht springt. */
.logo-schriftzug {
  display: block;
  width: 15rem;
  height: auto;
  /* Optisch mittig statt geometrisch mittig. Das Bild ist 108 Einheiten
     hoch, aber die Schrift steht nur in den oberen 68 davon – der Rest
     ist die Schleife des g. Zentriert die Kopfzeile das Bild, sitzt der
     Schriftzug sichtbar zu hoch. Die 18,5 % schieben ihn um genau die
     halbe Unterlaenge nach unten; der Wert ist auf die Eigenhoehe
     bezogen und gilt darum in jeder Groesse. */
  transform: translateY(18.5%);
}

.hauptnav ul {
  display: flex;
  gap: 1.6rem;
  list-style: none;
  margin: 0; padding: 0;
}
.hauptnav a {
  color: var(--auf-erde);
  text-decoration: none;
  font-weight: 500;
  font-size: .98rem;
  padding-block: .3rem;
  border-bottom: 2px solid transparent;
}
.hauptnav a:hover { border-bottom-color: var(--leitung); color: #fff; }
/* Der Zweig, in dem der Leser gerade steht. Die Vorlage setzt das Attribut
   schon lange, sichtbar war es nie. Es traegt jetzt das helle Ende des
   Logoverlaufs (#a0c6e6, 6,5:1 auf dem Band) – die zweite Farbe des
   Schriftzugs, die sonst nirgends auf der Seite eine Aufgabe haette. Nicht
   das Orange: hier ist nichts zu tun, hier ist nur etwas der Fall. */
.hauptnav a[aria-current="page"] { border-bottom-color: #a0c6e6; color: #fff; }

.menue-knopf { display: none; }

/* --- Fuss ------------------------------------------------------- */
.fuss {
  background: var(--erde);
  color: var(--auf-erde);
  margin-top: 5rem;
  padding-block: 2.5rem;
}
.fuss-inhalt { display: grid; gap: 1.5rem; }

/* Die Ortssuche im Fussband. Sie steht auf dem dunklen Grund als heller
   Kasten – dieselbe Form wie im Auftakt der Startseite, nur schmaler:
   ein Suchfeld ueber die volle Breite von 70 rem laesst die Trefferliste
   quer ueber die Seite laufen und sieht aus, als sei hier die Hauptsache.
   Sie ist der Ausgang, nicht der Eingang.

   Die Beschriftung des Kastens bleibt dunkel: sie steht innerhalb des
   hellen Feldes. Nur was ausserhalb liegt, muss die Fussfarbe tragen.
   Die kraeftige Kante des Kastens bleibt, wie sie ist – sie umreisst das
   helle Feld auf dem dunklen Grund, statt darin zu verschwimmen. */
.fuss-suche .ortsuche { margin: 0; max-width: 34rem; }

.fuss-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  list-style: none;
  margin: 0; padding: 1.2rem 0 0;
  border-top: 1px solid var(--erde-linie);
}
.fuss-links a { color: var(--auf-erde); text-decoration: none; font-size: .92rem; }
.fuss-links a:hover { color: #fff; text-decoration: underline; }

/* --- Brotkrumen -------------------------------------------------- */
.brotkrumen {
  font-size: .875rem;
  color: var(--blei);
  margin-bottom: 1.5rem;
}
.brotkrumen a { color: var(--blei); }

/* --- Die Bandbreitenskala ---------------------------------------
   Der Balken misst gegen den schnellsten Wert derselben Seite;
   --anteil kommt fertig aus der Vorlage. Ein Element, zwei Zustaende:
   da oder nicht da. */
.skala {
  display: block;
  height: 5px;
  margin-top: .35rem;
  max-width: 14rem;
  background: var(--spur);
  border-radius: 999px;
  overflow: hidden;
}
.skala::before {
  content: "";
  display: block;
  height: 100%;
  width: max(2%, var(--anteil, 0%));
  background: var(--leitung);
  border-radius: 999px;
}

/* --- Tariftabelle ------------------------------------------------
   Eine echte Tabelle, weil es eine ist. Auf schmalen Bildschirmen
   bricht sie in Zeilenbloecke um – eine seitwaerts scrollende Tabelle
   verliert genau die Spalte, auf die es ankommt. */
/* --- Eine Zeile je Anbieter -------------------------------------
   Vorher standen hier zwei Tabellenzeilen je Anbieter, der
   guenstigste Tarif und der schnellste, untereinander wie zwei
   fremde Angebote. Das war eine Einladung zum falschen Vergleich:
   Wer untereinander liest, vergleicht – und zwei Tarife desselben
   Anbieters stehen nicht zur Wahl gegeneinander.

   Jetzt traegt eine Zeile den Anbieter, und die beiden Eckpunkte
   stehen nebeneinander darin. Verglichen wird von Zeile zu Zeile,
   und das ist die Entscheidung, die wirklich ansteht.

   Die Hausfarbe des Anbieters steht als Kante links. Sie ist das
   einzige Bunt in der Reihe; alles andere traegt die Farbe der
   Seite. */
.anbieter-reihen {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: .8rem;
}
.anbieter-reihe {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 1.2rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--linie-zart);
  border-left: 4px solid var(--marke, var(--leitung));
  border-radius: var(--rundung);
  background: #fff;
}
.anbieter-reihe.hervor {
  background: var(--leitung-zart);
  border-color: var(--leitung);
}

.reihe-marke { display: grid; gap: .5rem; align-content: start; }
.reihe-marke .anbieter-marke { margin: 0; }
.reihe-name {
  margin: 0;
  font-family: var(--schrift-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -.01em;
}

/* Zwei Tarife nebeneinander. Faellt einer weg – ein Anbieter mit
   nur einem Angebot –, nimmt der verbliebene nicht die doppelte
   Breite ein: eine Spalte, die mal 50 und mal 100 Prozent misst,
   laesst die Zeilen untereinander ausfransen. */
.reihe-tarife {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.5rem;
}
.reihe-tarif { display: grid; gap: .15rem; align-content: start; }

.tarif-rolle {
  margin: 0 0 .1rem;
  font-family: var(--schrift-display);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--blei);
}
.tarif-name { margin: 0; font-weight: 600; }
.reihe-tarif .tarif-tempo { margin: .35rem 0 0; }
.reihe-tarif .tarif-tempo strong {
  font-family: var(--schrift-display);
  font-weight: 700;
  font-size: 1.28rem;
  letter-spacing: -.02em;
}
.reihe-tarif .skala { max-width: none; margin-top: .3rem; }
.reihe-tarif .tarif-preis { margin: .5rem 0 0; }
.reihe-tarif .tarif-preis strong {
  font-family: var(--schrift-display);
  font-weight: 700;
  font-size: 1.28rem;
  letter-spacing: -.02em;
}
.tarif-schnitt { margin: .1rem 0 0; font-size: .82rem; color: var(--blei); }

/* Der Bonus ist die einzige Angabe, die der Anbieter selbst
   formuliert hat. Sie steht deshalb abgesetzt und nicht zwischen
   den Merkmalen: Was von dort kommt, soll als solches erkennbar
   bleiben. */
.tarif-bonus {
  margin: .5rem 0 0;
  padding: .35rem .55rem;
  font-size: .84rem;
  line-height: 1.45;
  background: var(--leitung-zart);
  border-radius: calc(var(--rundung) / 2);
}

.tarif-merkmale {
  list-style: none;
  margin: .55rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
}
.tarif-merkmale li {
  font-size: .76rem;
  line-height: 1.3;
  padding: .2rem .45rem;
  color: var(--blei);
  border: 1px solid var(--linie);
  border-radius: 999px;
}
.reihe-tarif .knopf { margin-top: .7rem; justify-self: start; }

.anschluss { display: block; font-size: .82rem; color: var(--blei); }

.marke {
  display: inline-block;
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.4;
  padding: .1rem .4rem;
  margin-left: .35rem;
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  color: var(--blei);
  white-space: nowrap;
}
.marke-schnell { border-color: var(--leitung); color: var(--leitung-tief); }

.hervor-schild {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  padding: .08rem .38rem;
  margin-left: .35rem;
  /* Das dunkle Orange, nicht das helle: Weiss auf --leitung kommt bei
     dieser Schriftgroesse nur auf 3,7:1. */
  background: var(--leitung-tief);
  color: var(--auf-leitung);
  border-radius: var(--rundung);
  white-space: nowrap;
}

/* --- Anbieterfelder (Vergleichsseite) ----------------------------
   Ein Feld je bundesweitem Anbieter: Logo, Name, Reichweite, Knopf.

   Hier standen bis zum 4.9.2026 zwei Tarifbaender je Anbieter. Sie
   fuehrten dieselben Zahlen wie der Rechner darueber, nur haendisch auf
   zwei Eckpunkte verkuerzt; der Rechner kann sortieren und filtern und
   ist damit der bessere Zugang. Uebrig bleibt die Anbieterfrage, und die
   beantwortet ein Logo schneller als eine Zeile Text.

   Die Felder stehen in einem Raster und nicht untereinander: Ohne Preise
   gibt es keine Spalte mehr, die sich mit den Augen abfahren liesse – das
   war der Grund fuer die Zeilenform. Was bleibt, sind gleich grosse
   Marken nebeneinander, und die vergleicht das Auge auf einen Blick. */
.anbieterschau { margin-top: 3rem; }

.anbieter-felder {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1rem;
}

.anbieter-feld {
  display: grid;
  gap: .9rem;
  align-content: start;
  padding: 1.4rem 1.2rem;
  background: var(--grund);
  border: 1px solid var(--linie);
  /* Die Hausfarbe des Anbieters als Oberkante – dieselbe Rolle, die sie
     vorher am Anbieterblock hatte. */
  border-top: 3px solid var(--marke);
  border-radius: var(--rundung);
}
/* Der hervorgehobene Anbieter behaelt seine Hausfarbe an der Oberkante:
   Sie sagt, wer hier steht, und das aendert sich durch die Hervorhebung
   nicht. Aufmerksamkeit traegt der helle Grund. */
.anbieter-feld.hervor {
  border-color: var(--leitung);
  border-top-color: var(--marke);
  background: var(--leitung-zart);
}

/* Das Logo ist hier die Hauptsache und nicht die Fussnote: knapp die
   dreifache Hoehe dessen, was es in einer Tarifzeile misst. Es steht
   linksbuendig, damit die Marken der Felder untereinander auf einer
   Kante beginnen – zentriert taenzelten sie je nach Breite des
   Schriftzugs hin und her. */
.anbieter-feld .anbieter-marke { justify-self: start; }
.anbieter-feld .hat-logo img { max-height: 3rem; max-width: 11rem; width: auto; }

.anbieter-feld h3 { margin: 0; font-size: 1.1rem; }
.feld-text { display: grid; gap: .3rem; }
.feld-mass { margin: 0; font-size: .9rem; color: var(--blei); }

/* Der Knopf steht unten und ueber die volle Feldbreite: In einem Raster
   gleich hoher Felder ergibt das eine durchgehende Reihe – und ein Ziel,
   das auch mit dem Daumen zu treffen ist. */
.anbieter-feld .knopf { justify-self: stretch; text-align: center; }

/* --- Anbieterkarte ----------------------------------------------
   Der eine hervorgehobene Anbieter. Sie traegt die Hausfarbe des
   Anbieters als Kante, nicht als Flaeche – sonst straebe sie mit der
   Leitungsfarbe um dieselbe Aufmerksamkeit. */
.anbieter-karte {
  border: 1px solid var(--linie);
  border-top: 3px solid var(--marke);
  border-radius: var(--rundung);
  padding: 1.4rem;
  background: var(--grund);
  align-self: start;
}
.karte-kennung { font-size: .72rem; font-weight: 700; color: var(--blei); margin: 0 0 .6rem; }
.karte-titel { font-size: 1.15rem; margin: .8rem 0 .3rem; }
.karte-tarif { margin: 0 0 .6rem; font-size: .95rem; }
.karte-preis, .tarif-tempo { margin: 0 0 .4rem; }
.karte-preis strong, .tarif-tempo strong {
  font-family: var(--schrift-display);
  font-weight: 800;
  font-size: 1.9rem;
  line-height: 1.05;
  letter-spacing: -.03em;
}
.karte-preis { margin-bottom: 1rem; }
.karte-zweit { margin: 1rem 0 0; font-size: .85rem; color: var(--blei); }
.anbieter-marke, .marke-schrift { font-family: var(--schrift-display); font-weight: 700; }

.ort-oben { display: grid; gap: 2rem; margin-top: 2.5rem; }

/* --- Anbieterliste ----------------------------------------------- */
.anbieter-liste {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: .55rem;
}
.anbieter-liste li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--linie-zart);
}
.anbieter-liste strong { font-family: var(--schrift-display); font-weight: 600; }

/* --- Ortstext ---------------------------------------------------- */
.ortstext p { font-size: 1.06rem; line-height: 1.7; max-width: 66ch; }

/* --- Ortsdaten --------------------------------------------------- */
.daten {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .5rem 1.5rem;
  margin: 1rem 0 0;
  border-top: 1px solid var(--linie);
  padding-top: 1rem;
}
.daten dt {
  font-family: var(--schrift-display);
  font-weight: 600;
  font-size: .92rem;
  color: var(--blei);
}
.daten dd { margin: 0; }
.ortsteile { color: var(--blei); font-size: .92rem; max-width: 72ch; }

/* --- Nachbarn und Ortslisten -------------------------------------- */
.nachbar-liste, .ort-liste, .ort-liste-voll, .fehler-wege, .wege, .faq-liste {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}
.nachbar-liste, .ort-liste, .ort-liste-voll {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: .35rem 1.5rem;
}
.nachbar-liste li, .ort-liste li, .ort-liste-voll li { padding: .2rem 0; }

.bl-block { margin-top: 2.5rem; }
.ortshinweis { color: var(--blei); font-size: .9rem; }

/* --- Ortssuche ---------------------------------------------------
   Das Suchfeld ist der wichtigste Einstieg: die meisten kommen mit
   einem Ortsnamen im Kopf. Es bekommt deshalb Platz und eine kraeftige
   Kante – aber keine Farbflaeche, sonst sieht es aus wie Werbung. */
.ortsuche { margin: 1.25rem 0 0; }
.ortsuche-kasten {
  border: 2px solid var(--tinte);
  border-radius: var(--rundung);
  background: var(--grund);
  color: var(--tinte);
  padding: 1rem 1.1rem 1.1rem;
}
.ortsuche-schild {
  display: block;
  font-family: var(--schrift-display);
  font-weight: 600;
  font-size: .92rem;
  margin-bottom: .45rem;
}
.ortsuche-eingabe { position: relative; display: flex; align-items: center; }
.ortsuche-lupe {
  position: absolute;
  left: .7rem;
  width: 1.15rem; height: 1.15rem;
  color: var(--blei);
  pointer-events: none;
}
.ortsuche input {
  width: 100%;
  font: inherit;
  font-size: 1.1rem;
  padding: .7rem .8rem .7rem 2.5rem;
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  background: var(--flaeche);
  color: inherit;
}
.ortsuche input::placeholder { color: var(--blei); }
.ortsuche-hinweis { margin: .6rem 0 0; font-size: .85rem; color: var(--blei); }

.ortsuche-liste {
  position: absolute;
  top: calc(100% + .25rem);
  left: 0; right: 0;
  z-index: 10;
  list-style: none;
  margin: 0; padding: .25rem;
  background: var(--grund);
  border: 1px solid var(--tinte);
  border-radius: var(--rundung);
  max-height: 20rem;
  overflow-y: auto;
}
.ortsuche-liste li { padding: .5rem .6rem; cursor: pointer; border-radius: 2px; }
.ortsuche-liste li:hover, .ortsuche-liste li[aria-selected="true"] { background: var(--leitung-zart); }

.ortsuche-name { font-weight: 600; }

/* Der Zusatz nennt Landkreis und Bundesland und steht rechts vom Namen.
   Das Skript setzt die beiden <span> ohne Leerzeichen aneinander – ein
   Leerzeichen im Markup waere hier ein Zeichen im Text und liesse sich
   mitkopieren. Sichtbar klebte "Bremen" dadurch an "Bremen, Stadt".
   Der Abstand gehoert deshalb in den Satz und nicht in die Zeichenkette. */
.ortsuche-zusatz { color: var(--blei); font-size: .85rem; margin-left: .5rem; }
.ortsuche-leer { color: var(--blei); padding: .6rem; }

/* --- Startseite --------------------------------------------------
   Der Auftakt fuehrt direkt zum Suchfeld: fast jeder kommt mit einem
   Ortsnamen. Darunter die Wege, jeder mit einer echten Zahl aus dem
   letzten Bau statt eines Schlagworts. */
.auftakt {
  padding-block: .5rem 2.5rem;
  border-bottom: 1px solid var(--linie);
}
.auftakt h1 { max-width: 22ch; }
.auftakt .anriss { max-width: 56ch; }

.wege { display: grid; gap: 0; margin-top: 1rem; }
.weg {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  align-items: baseline;
  gap: 1.5rem;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--linie-zart);
}
.weg-zahl {
  font-family: var(--schrift-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.4rem);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--leitung-tief);
}
.weg-text { margin: 0; max-width: 60ch; }
.weg-text strong { display: block; font-family: var(--schrift-display); font-size: 1.08rem; }

/* --- Ratgeber und FAQ --------------------------------------------- */
.ratgeber { margin-top: 3rem; }
.ratgeber-spalten { display: grid; gap: 0 3rem; }
.ratgeber-block { margin-bottom: 1.75rem; }
.ratgeber-block h3 { margin-top: 0; }
.ratgeber p, .faq p { max-width: 66ch; }

.faq { margin-top: 3rem; }
.faq-eintrag {
  padding: .1rem 0;
  border-bottom: 1px solid var(--linie-zart);
}
.faq-eintrag summary {
  font-family: var(--schrift-display);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.35;
  padding: .95rem 2rem .95rem 0;
  cursor: pointer;
  list-style: none;
  position: relative;
}
.faq-eintrag summary::-webkit-details-marker { display: none; }
/* Ein Zeichen, das den Zustand zeigt, statt eines Dreiecks, das je nach
   Browser anders aussieht: senkrechter Strich weg, waagerechter bleibt. */
.faq-eintrag summary::after,
.faq-eintrag summary::before {
  content: "";
  position: absolute;
  right: .35rem;
  top: 50%;
  width: .8rem; height: 2px;
  background: var(--leitung-tief);
  transform: translateY(-50%);
}
.faq-eintrag summary::before { transform: translateY(-50%) rotate(90deg); }
.faq-eintrag[open] summary::before { display: none; }
.faq-eintrag summary:focus-visible { outline-offset: -2px; }
.faq-eintrag p { margin: 0 0 1rem; }
.faq-eintrag p:last-child { margin-bottom: 1rem; }

/* --- Fehlerseite -------------------------------------------------- */
.fehler-kopf { padding-top: 1rem; }
.fehler-wege { display: grid; gap: .5rem; margin-bottom: 2rem; }
.fehler-wege li { padding: .35rem 0; border-bottom: 1px solid var(--linie-zart); }

/* --- Rechtstexte -------------------------------------------------- */
.anschrift { font-style: normal; margin-bottom: 1.5rem; }
.mass, .seit, .eintrag { font-size: .95rem; }

/* --- Anbieterlogos ------------------------------------------------ */
.hat-logo img { max-height: 2.2rem; width: auto; }

/* Der Anfangsbuchstabe, wenn kein Logo hinterlegt ist. Er misst dieselben
   2,2 rem wie ein Logo daneben – nicht mehr: ein Buchstabe ist der
   Notnagel und nicht die Marke, und er soll die Zeile nicht anfuehren.
   Der Rahmen zeigt, dass hier ein Feld steht und nicht bloss ein grosser
   Buchstabe.

   Der Buchstabe traegt bewusst NICHT die Hausfarbe --marke. Wo kein Logo
   hinterlegt ist, steht in --marke die Rueckfallfarbe der Zeile, und das
   ist auf den Ortsseiten das Signalorange der Seite. Ein oranger Buchstabe
   saehe aus wie eine Empfehlung – genau der Grund, aus dem der Rueckfall
   im :root-Block oben schon einmal vom Orange weggenommen wurde. Ein
   Platzhalter behauptet nichts, also bleibt er im gedaempften Textton. */
.ohne-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem; height: 2.2rem;
  flex: none;
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  color: var(--blei);
}
.ohne-logo svg { width: 1.6rem; height: 1.6rem; display: block; }

/* --- Breite Bildschirme ------------------------------------------- */
@media (min-width: 60rem) {
  .ort-oben { grid-template-columns: minmax(0, 1fr) 21rem; gap: 3rem; }
  .ratgeber-spalten { grid-template-columns: 1fr 1fr; }
  .fuss-inhalt { grid-template-columns: minmax(0, 2fr) 1fr; align-items: start; }
  .fuss-links { border-top: 0; padding-top: 0; justify-content: flex-end; }
}

/* --- Schmale Bildschirme ------------------------------------------
   Die Tariftabelle wird zu Zeilenbloecken. Jede Zelle traegt ihre
   Spaltenueberschrift als data-Attribut vor sich – so bleibt lesbar,
   was die Zahl bedeutet, ohne dass die Tabelle seitwaerts wandert. */
@media (max-width: 46rem) {
  .kopf-inhalt { flex-wrap: wrap; gap: .75rem; }
  .logo-schriftzug { width: 11.5rem; }

  .menue-knopf {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
    background: transparent;
    border: 1px solid var(--erde-linie);
    border-radius: var(--rundung);
    color: var(--auf-erde);
    font: inherit;
    font-size: .9rem;
    padding: .45rem .7rem;
    cursor: pointer;
  }
  .menue-striche {
    width: 1rem; height: 2px;
    background: currentColor;
    box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
  }

  .hauptnav { display: none; width: 100%; }
  .hauptnav[data-offen] { display: block; }
  .hauptnav ul { flex-direction: column; gap: 0; padding-bottom: .5rem; }
  .hauptnav a { display: block; padding: .6rem 0; border-bottom: 1px solid var(--erde-linie); }

  /* Schmal steht die Marke ueber den Tarifen, und die beiden Tarife
     stehen untereinander. Nebeneinander blieben von jeder Spalte
     rund 14 Zeichen – zu wenig fuer einen Tarifnamen. */
  .anbieter-reihe { grid-template-columns: 1fr; gap: .9rem; }
  .reihe-marke {
    grid-auto-flow: column;
    grid-template-columns: auto 1fr;
    align-items: center;
    justify-content: start;
    gap: .7rem;
  }
  .reihe-tarife { grid-template-columns: 1fr; gap: 1.2rem; }
  .reihe-tarif + .reihe-tarif {
    border-top: 1px solid var(--linie-zart);
    padding-top: 1rem;
  }
  .skala { max-width: none; }

  .weg { grid-template-columns: 1fr; gap: .3rem; }
  .daten { grid-template-columns: 1fr; gap: .1rem 0; }
  .daten dd { margin-bottom: .6rem; }
}

/* --- Bewegung nur, wo sie etwas zeigt ------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* --- Druck --------------------------------------------------------- */
@media print {
  .kopf, .fuss, .ortsuche, .knopf { display: none; }
  body { background: #fff; font-size: 11pt; }
  a { text-decoration: none; color: inherit; }
}

/* --- Die Bilanz auf /regional/ ----------------------------------
   Vier Zahlen, jede mit einem Satz, der sie einordnet. Ohne den
   Satz waere es ein Zahlenfeld, und Zahlenfelder werden
   ueberblaettert. Die Zahl steht gross, weil sie das Argument ist;
   der Satz klein, weil er nur erklaert, wovon sie eines ist. */
.bilanz { margin-top: 2.5rem; }
.bilanz-zahlen {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.6rem 2rem;
}
.bilanz-wert {
  margin: 0;
  font-family: var(--schrift-display);
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--leitung-tief);
}
.bilanz-einheit {
  display: inline-block;
  margin-left: .3rem;
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--blei);
}
.bilanz-text { margin: .5rem 0 0; font-size: .95rem; line-height: 1.55; }

/* Die engen Orte tragen ihren Namen als Link – die Zahl daneben ist
   nachpruefbar, indem man sie anklickt. Genau das ist der Punkt. */
.eng-liste {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: .6rem 1.5rem;
}
.eng-liste li { display: grid; gap: .1rem; }
.eng-liste a { font-weight: 600; }

/* --- Ohne JavaScript --------------------------------------------
   Ortssuche und Rechner arbeiten beide im Browser; es gibt keinen
   Server, der eine Ergebnisseite lieferte. Ohne Skript waeren es
   Formulare, die auf jeden Handgriff mit nichts antworten – und das
   ist schlimmer als ein Formular, das gar nicht erst da ist. Der
   Kommentar in partials/ortsuche.njk hat diese Regel seit jeher
   beschrieben; geschrieben stand sie bis zum 4.9.2026 nirgends.

   Die Wege ohne Skript bleiben vollstaendig: zu jedem Ort fuehren die
   Bundeslandlisten, zu jedem Tarif die Karten unter dem Rechner. */
.ortsuche, .rechner { display: none; }
.js .ortsuche { display: block; }
.js .rechner { display: block; }

/* --- Der Vergleichsrechner --------------------------------------
   Vier Auswahlfelder und ein Haken, nebeneinander in einer Zeile,
   solange Platz ist. Die Felder sind Auswahllisten und keine Regler:
   Ein Regler verlangt Zielen, eine Liste nur Lesen – und die Werte,
   die hier zaehlen, sind ohnehin Stufen und kein Kontinuum. */
.rechner {
  margin: 2rem 0 0;
  padding: 1.5rem;
  border: 2px solid var(--tinte);
  border-radius: var(--rundung);
  background: var(--grund);
}
.rechner-vorspann { margin: .4rem 0 0; max-width: 62ch; }
.rechner-form {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem 1.4rem;
  align-items: end;
  margin-top: 1.3rem;
  padding-bottom: 1.3rem;
  border-bottom: 1px solid var(--linie);
}
.rechner-feld { display: grid; gap: .3rem; }
.rechner-feld label {
  font-family: var(--schrift-display);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--blei);
}
.rechner-feld select {
  font: inherit;
  padding: .45rem .6rem;
  border: 1px solid var(--tinte);
  border-radius: calc(var(--rundung) / 2);
  background: #fff;
  color: inherit;
}
.rechner-schalter {
  grid-auto-flow: column;
  align-items: center;
  justify-content: start;
  gap: .45rem;
  padding-bottom: .5rem;
}
.rechner-schalter label { text-transform: none; letter-spacing: 0; font-size: .95rem; color: inherit; }
.rechner-schalter input { width: 1.1rem; height: 1.1rem; accent-color: var(--leitung); }

.rechner-bilanz {
  margin: 1.1rem 0 0;
  font-family: var(--schrift-display);
  font-weight: 600;
}

.rechner-treffer { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .7rem; }
.r-treffer {
  padding: 1rem 1.1rem;
  border: 1px solid var(--linie-zart);
  border-radius: var(--rundung);
  background: #fff;
}
.r-kopf { display: flex; align-items: center; gap: .8rem; min-height: 3rem; }
.r-logo { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.2rem; height: 2.2rem; }
.r-logo img { max-height: 2.2rem; max-width: 11rem; width: auto; }
.r-logo svg { width: 1.6rem; height: 1.6rem; display: block; }
.r-text { min-width: 0; }
.r-anbieter { margin: 0; font-family: var(--schrift-display); font-weight: 700; font-size: 1.05rem; }
.r-tarif { margin: .1rem 0 0; font-size: .9rem; color: var(--blei); }

/* Vier Werte in einer Reihe. Der letzte – die Kosten bis Vertragsende –
   ist der Grund, warum es diesen Rechner gibt, und traegt deshalb als
   einziger Farbe. */
.r-zahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: .8rem 1.2rem;
  margin-top: .9rem;
}
.r-schild {
  margin: 0;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--blei);
}
.r-wert {
  margin: .15rem 0 0;
  font-family: var(--schrift-display);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -.02em;
}
.r-feld:last-child .r-wert { color: var(--leitung-tief); font-size: 1.35rem; }
.r-klein { margin: .1rem 0 0; font-size: .78rem; color: var(--blei); }
.r-bonus {
  margin: .8rem 0 0;
  padding: .35rem .55rem;
  font-size: .84rem;
  background: var(--leitung-zart);
  border-radius: calc(var(--rundung) / 2);
}
.r-treffer .tarif-merkmale { margin-top: .7rem; }
.r-treffer .knopf { margin-top: .8rem; background: var(--marke, var(--leitung-tief)); }
.r-treffer .knopf:hover { background: color-mix(in srgb, var(--marke, var(--leitung-tief)) 80%, black); }

/* --- Querverweise unter den Inhaltsseiten -----------------------
   Zwei Spalten, wo Platz ist. Die Frage steht als Link, der Satz
   darunter klein – wer eine Liste von elf Zeilen ueberfliegt, liest
   die Links und nicht die Saetze, aber wer stehen bleibt, will
   wissen, was ihn erwartet. */
.weiterlesen {
  margin-top: 3rem;
  padding-top: 1.8rem;
  border-top: 2px solid var(--tinte);
}
.weiter-liste {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1rem 2rem;
}
.weiter-liste li { display: grid; gap: .15rem; }
.weiter-liste a { font-weight: 600; }
.weiter-fuss { margin-top: 1.6rem; max-width: 62ch; }

/* --- Die Inhaltsseiten selbst ----------------------------------- */
.inhalt { max-width: 68ch; }
.inhalt h2 { margin-top: 2.4rem; }
.inhalt h3 { margin-top: 1.6rem; }
.inhalt ul, .inhalt ol { padding-left: 1.2rem; }
.inhalt li { margin-bottom: .45rem; }

/* --- Der flache Knopf ------------------------------------------
   Fuer Wege innerhalb der Seite. Er sieht bewusst anders aus als
   .knopf: Der orange Knopf fuehrt zu einem bezahlten Werbelink,
   dieser hier nicht. Zwei Ziele, die sich so verschieden
   verhalten, duerfen nicht gleich aussehen – sonst lernt der Leser,
   dass ein Knopf auf dieser Seite nichts Bestimmtes bedeutet. */
.knopf-flach {
  display: inline-block;
  padding: .6rem 1.1rem;
  font-family: var(--schrift-display);
  font-weight: 600;
  text-decoration: none;
  color: var(--leitung-tief);
  border: 2px solid var(--leitung-tief);
  border-radius: var(--rundung);
}
.knopf-flach:hover { background: var(--leitung-zart); }

/* --- Fliesstext auf der Startseite ------------------------------
   Eine Spalte, begrenzte Zeilenlaenge. Der Rest der Startseite ist
   Raster – Suchfeld, drei Wege –, und genau deshalb muss der Text
   danach anders aussehen: Er will gelesen und nicht ueberflogen
   werden, und ein Absatz ueber die volle Breite wird ueberflogen. */
.prosa {
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 2px solid var(--tinte);
  max-width: 68ch;
}
.prosa h2 { margin-top: 2.6rem; }
.prosa h2:first-child { margin-top: 0; }
.prosa p { margin-top: .9rem; line-height: 1.7; }

/* --- Die Klassen auf /regional/ ---------------------------------
   Das Ordnungsprinzip der Seite. Jede Klasse traegt ihre Zahl gross,
   weil sie die Aussage ist, und darunter einen Satz, der sagt, was
   die Zahl praktisch bedeutet – eine Klasse ohne diesen Satz waere
   eine Sortierung ohne Grund. */
.klassen { margin-top: 2.5rem; }
.klasse {
  margin-top: 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--linie);
}
.klasse:first-of-type { border-top: 2px solid var(--tinte); }
.klasse h3 { margin: 0; }
.klasse-zahl {
  margin: .35rem 0 0;
  font-family: var(--schrift-display);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--leitung-tief);
}
.klasse-satz { margin: .5rem 0 0; max-width: 62ch; }
.klasse .ort-liste { margin-top: .9rem; }

/* --- Bundeslaender als Zeile ------------------------------------
   Ein Weg, keine Gliederung: deshalb eine Reihe von Links mit ihrer
   Ortszahl und kein Raster aus 16 Bloecken. */
.bl-zeile { margin-top: 3rem; padding-top: 1.8rem; border-top: 2px solid var(--tinte); }
.bl-links {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .9rem;
}
.bl-links li {
  display: flex;
  align-items: baseline;
  gap: .35rem;
  padding: .3rem .6rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
}
.bl-links a { font-weight: 600; text-decoration: none; }
.bl-links a:hover { text-decoration: underline; }

/* --- Die Ausbaukluft --------------------------------------------
   Zwei Zahlen nebeneinander, damit der Abstand als Bild wirkt und
   nicht als Satz. Alles andere an der Seite ist Liste; diese eine
   Stelle darf gross sein, weil sie das Argument traegt. */
.kluft { margin-top: 3rem; padding-top: 2rem; border-top: 2px solid var(--tinte); max-width: 68ch; }
.kluft p { max-width: 68ch; line-height: 1.7; }
.kluft-paar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1.5rem;
  margin: 1.5rem 0;
  padding: 1.4rem 1.5rem;
  background: var(--leitung-zart);
  border-radius: var(--rundung);
}
.kluft-wert {
  margin: 0;
  font-family: var(--schrift-display);
  font-weight: 700;
  font-size: 3rem;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--leitung-tief);
}
.kluft-ort { margin: .4rem 0 0; font-family: var(--schrift-display); font-weight: 700; font-size: 1.1rem; }
.kluft-ort a { text-decoration: none; }
.kluft-ort a:hover { text-decoration: underline; }

/* --- Der Methodenteil ------------------------------------------- */
.methode { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--linie); max-width: 68ch; }
.methode p { margin-top: .9rem; line-height: 1.7; }