/* wettbewerb.css — das Konkurrenten-Radar.
 *
 * DIE VORLAGE
 *
 * Aufbau, Proportionen und Farben sind vom Service-Portal RECHT.NRW
 * abgenommen (Vorlage vom Nutzer am 15.09.2026): vollbreite Bänder im
 * Wechsel, ein Hero mit Farbverlauf und Punktraster, darunter eine
 * weiße Suchkarte auf hellem Grund, dann Kacheln.
 *
 * DIE FARBEN SIND ABER UNSERE. Die Vorlage tritt in Ministeriumsblau
 * auf; hier steht sie im Hausgrün. Gemessen hatte ich #004F80 /
 * #006D80 / #E6EDF2 und zunaechst auch so gebaut -- ein blaues
 * Behoerdenband unter dem Werter-Briefkopf sah aber nach einer
 * fremden Behoerde aus, und Gruen ist im Haus die einzige
 * handelnde Farbe. Uebernommen ist der AUFBAU, nicht das Kleid:
 *
 *   --wb-tief    #003300  das Hausgruen -- Knoepfe, Ueberschriften, Band
 *   --wb-tiefer  #0D4A38  das Ende des Hero-Verlaufs, wie dort ein
 *                         Schwenk ins Petrol, nur in der Gruenfamilie
 *   --wb-hell    #F9F2E4  die Hauscreme als heller Abschnitt
 *
 * NICHT übernommen sind ihre Hoheitszeichen: Logo, Landeswappen und
 * das große § im Hero. Das Raster ist ein Muster, ein Wappen ist eine
 * Behörde.
 *
 * ZUR SCHRIFT: die Vorlage setzt Inter. Die Richtlinie dieser Seite
 * lässt nur eigene Schriftdateien zu (font-src 'self'), und Inter
 * liegt nicht dabei. Open Sans ist bereits da und von derselben
 * Machart -- humanistisch, ruhig, offene Punzen.
 */

:root {
  --wb-tief:   #003300;
  --wb-weit:   #0D4A38;
  --wb-hell:   #F9F2E4;
  --wb-rand:   #E4E1D8;
  --wb-text:   #191C15;
  --wb-leise:  #626A5C;
  --wb-still:  #8A9182;
}

/* Der Briefkopf bleibt auf Creme; alles darunter gehört der Vorlage.
   Deshalb liegt die Grundfarbe auf dem Körper und nicht auf .board. */
.wb-body {
  /* Creme, nicht Weiss (17.09.2026): der Grund der Seite liegt unter
     dem gruenen Kopf und soll dort creme sein. Die Abschnitte malen
     sich weiterhin selbst -- geaendert hat sich nur, was in den
     Luecken und unter dem letzten Abschnitt zu sehen ist. */
  background: var(--boden, #F9F2E4);
}

.wb-breit {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 28px;
}

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

/* ── Hero ─────────────────────────────────────────────────────────── */
.wb-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(100deg, var(--wb-tief) 0%, var(--wb-tief) 42%, var(--wb-weit) 100%);
  padding: 72px 0 84px;
  color: #fff;
}

/* Das Punktraster der Vorlage ist am 15.09.2026 wieder heraus.
   Auf ihrem Ministeriumsblau war es ein leiser Schimmer; auf dem
   dunklen Hausgrün wurden daraus deutlich sichtbare helle Punkte, die
   vom Text ablenkten. Ein Muster, das eine Farbe verträgt und die
   andere nicht, gehört nicht mitübernommen -- der Verlauf allein
   trägt das Band. */
.wb-hero .wb-breit { position: relative; }

.wb-hero__titel {
  margin: 0 0 14px;
  font-family: var(--sans);
  font-size: clamp(30px, 4.4vw, 46px);
  font-weight: 700; letter-spacing: -0.015em; line-height: 1.12;
  text-wrap: balance;
}
.wb-hero__dek {
  margin: 0; max-width: 56ch;
  font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.88);
}

/* ── Bänder ───────────────────────────────────────────────────────── */
.wb-hell   { background: var(--wb-hell); padding: 54px 0 62px; }
.wb-dunkel { background: var(--wb-tief); color: #fff; padding: 38px 0; }
.wb-weiss  { background: #fff; padding: 52px 0 60px; }
.wb-weiss--rand { border-top: 1px solid var(--wb-rand); }

.wb-abschnitt__titel {
  margin: 0 0 10px;
  font-family: var(--sans);
  font-size: 26px; font-weight: 700; color: var(--wb-tief);
  letter-spacing: -0.01em;
}
.wb-abschnitt__dek {
  margin: 0 0 26px; max-width: 62ch;
  font-size: 15px; line-height: 1.62; color: var(--wb-text);
}

/* ── Die Suchkarte ────────────────────────────────────────────────── */
.wb-suchkarte {
  background: #fff; border-radius: 22px;
  padding: 22px;
  box-shadow: 0 1px 2px rgba(0,51,0,.06), 0 8px 24px rgba(0,51,0,.07);
}
.wb-suche { display: flex; gap: 10px; flex-wrap: wrap; margin: 0; }

.wb-suche__feld, .wb-suche__wahl {
  font: inherit; font-size: 15px; color: var(--wb-text);
  border: 1px solid var(--wb-tief); border-radius: 999px;
  padding: 12px 20px; background: #fff;
}
.wb-suche__feld { flex: 1 1 260px; min-width: 0; }
.wb-suche__feld::placeholder { color: var(--wb-still); font-style: italic; }
.wb-suche__wahl { flex: 0 1 220px; cursor: pointer; }
.wb-suche__feld:focus-visible, .wb-suche__wahl:focus-visible {
  outline: 2px solid var(--wb-weit); outline-offset: 2px;
}

.wb-suche__knopf {
  display: inline-flex; align-items: center; gap: 8px;
  flex: none; font: inherit; font-size: 15px; font-weight: 600;
  border: 1px solid var(--wb-tief); border-radius: 999px;
  padding: 12px 22px; background: var(--wb-tief); color: #fff; cursor: pointer;
}
.wb-suche__knopf:hover { background: #00250A; }
.wb-suche__knopf svg { fill: none; stroke: currentColor; stroke-width: 2; }

.wb-trefferzeile {
  margin: 18px 0 0; min-height: 1.2em;
  font-size: 13.5px; color: var(--wb-leise);
}

/* ── Die Kacheln ──────────────────────────────────────────────────── */
.wb-kacheln {
  display: grid; gap: 14px; margin-top: 16px;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
}

.wb-kachel {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  background: #fff; border: 1px solid var(--wb-rand); border-radius: 14px;
  padding: 18px; text-align: left; font: inherit; cursor: pointer;
  color: inherit; text-decoration: none;
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.wb-kachel:hover {
  border-color: var(--wb-tief);
  box-shadow: 0 6px 18px rgba(0,51,0,.10);
  transform: translateY(-1px);
}
.wb-kachel--an {
  border-color: var(--wb-tief); border-width: 2px; padding: 17px;
  box-shadow: 0 6px 18px rgba(0,51,0,.12);
}

/* Das Zeichen des Unternehmens: das Logo, sonst ein Monogramm. Seit
   dem 16.09.2026 liegen zwölf der achtzehn Logos im Bestand; die
   sechs ohne sind die, deren Identität noch offen ist. Die Platte ist
   hell, damit ein fremdes Zeichen auf ihr steht und nicht auf unserem
   Grün -- Enclustras Blau kaeme dort auf 2,00 : 1. */
.wb-kachel__zeichen {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; flex: none;
  border-radius: 10px; background: var(--wb-hell);
  color: var(--wb-tief); font-weight: 700; font-size: 16px;
  letter-spacing: .02em;
}
.wb-kachel__zeichen img { max-width: 38px; max-height: 30px; display: block; }

.wb-kachel__name {
  font-size: 15.5px; font-weight: 700; color: var(--wb-text); line-height: 1.3;
}
.wb-kachel__unten {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12px; color: var(--wb-leise);
}

/* Der Defence-Zustand als Punkt. Die Farbe ist nie die einzige
   Auskunft -- der Titel des Knopfes sagt dasselbe in Worten. */
.wb-kachel__punkt { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.wb-kachel__punkt--belegt { background: var(--wb-tief); }
.wb-kachel__punkt--offen  { background: var(--terratext); }
.wb-kachel__punkt--kein   { background: var(--wb-still); }

.wb-kachel__neu {
  margin-left: auto; padding: 1px 7px; border-radius: 999px;
  background: var(--wb-tief); color: #fff; font-size: 11px; font-weight: 700;
}

.wb-keine-treffer {
  grid-column: 1 / -1; margin: 0; padding: 26px;
  background: #fff; border: 1px dashed var(--wb-rand); border-radius: 14px;
  color: var(--wb-leise); line-height: 1.6;
}

/* ── Kopf des gewählten Konkurrenten ──────────────────────────────── */
.wb-kopf { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.wb-kopf__text { flex: 1 1 320px; min-width: 0; }

/* Logo klein und auf heller Platte -- ein fremdes Blau auf unserem
   Blau wäre unlesbar, und größer wäre es Schmuck statt Kennzeichnung. */
.wb-kopf__logo {
  display: flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; flex: none;
  background: #fff; border-radius: 12px;
  color: var(--wb-tief); font-weight: 700; font-size: 18px;
}
.wb-kopf__logo img { max-width: 44px; max-height: 34px; display: block; }

.wb-kopf__markt {
  display: block; font-size: 11.5px; letter-spacing: .09em;
  text-transform: uppercase; color: rgba(255,255,255,.72);
}
.wb-kopf__name {
  margin: 4px 0 6px; font-family: var(--sans);
  font-size: 27px; font-weight: 700; letter-spacing: -0.01em;
}
/* Firma, Sitz, Register, Website. Heller als die Herkunftszeile
   darunter, weil es die Sache ist und nicht der Vorbehalt. Leer, wenn
   nichts erfasst ist -- der leere Absatz nimmt dann auch keinen Platz,
   sonst klaffte unter jedem noch unerschlossenen Namen eine Luecke. */
.wb-kopf__steckbrief {
  margin: 0 0 5px; font-size: 13.5px; line-height: 1.55;
  color: #fff; max-width: 70ch;
}
.wb-kopf__steckbrief:empty { display: none; }
.wb-kopf__steckbrief a { color: #fff; }

.wb-kopf__herkunft {
  margin: 0; font-size: 13.5px; line-height: 1.55;
  color: rgba(255,255,255,.85); max-width: 70ch;
}
.wb-kopf__herkunft a { color: #fff; }

.wb-knopf-hell {
  flex: none; font: inherit; font-size: 14px; font-weight: 700;
  border: 0; border-radius: 999px; padding: 11px 22px;
  background: #fff; color: var(--wb-tief); cursor: pointer;
}
.wb-knopf-hell[aria-pressed="true"] { background: var(--wb-hell); }

/* ── Karten ───────────────────────────────────────────────────────── */
.wb-spalten { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .wb-spalten { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
}
.wb-spalte { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.wb-karte {
  background: #fff; border: 1px solid var(--wb-rand); border-radius: 14px;
  padding: 24px;
}
.wb-karte__kicker {
  display: block; font-size: 11.5px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--wb-leise); margin-bottom: 6px;
}
.wb-karte__titel {
  margin: 0 0 8px; font-family: var(--sans);
  font-size: 20px; font-weight: 700; color: var(--wb-tief);
}
.wb-karte__dek { margin: 0 0 18px; font-size: 14px; line-height: 1.62; color: var(--wb-text); }

.wb-melde { margin: 0 0 20px; min-height: 0; font-size: 14px; }
.wb-melde:not(:empty) {
  padding: 12px 16px; border-left: 3px solid var(--wb-weit);
  background: var(--wb-hell); border-radius: 0 8px 8px 0; color: var(--wb-text);
}

/* ── Executive Summary ────────────────────────────────────────────── */
/* Die Beschreibung. Normaler Fliesstext wie im Firmenregister -- nicht
   kursiv und ohne Anfuehrungszeichen: es ist geschriebener Text und
   kein Zitat. Die Auszeichnung als fremde Rede war hier einmal da und
   hat den Absatz nur schwer lesbar gemacht. */
.wb-beschreibung {
  margin: 0; font-size: 15px; line-height: 1.66;
  color: var(--wb-text); max-width: 70ch;
}

/* ── Defence-Marke ──────────────────────────────────────────────────
   Drei Zustaende, dieselben wie in der Datenbank. Die Farbe ist nie die
   einzige Auskunft -- in der Marke steht das Wort. */
.wb-df__marke {
  display: inline-block; margin-left: 8px; vertical-align: 2px;
  padding: 2px 10px; border-radius: 999px;
  font-family: var(--sans); font-size: 12px; font-weight: 700;
  letter-spacing: .02em;
}
.wb-df--belegt { background: var(--wb-tief);  color: #fff; }
.wb-df--offen  { background: #FAF1E8; color: var(--terratext); }
.wb-df--kein   { background: var(--wb-hell); color: var(--wb-leise); }

/* ── Kennzahlen aus dem Jahresabschluss ─────────────────────────────
   Die Jahreszahl steht AN der Zahl, nicht in der Ueberschrift: zwei
   Kennzahlen aus verschiedenen Jahren nebeneinander sind sonst nicht zu
   unterscheiden, und genau daraus entsteht die falsche Rechnung. */
.wb-kz-reihe {
  display: flex; flex-wrap: wrap; gap: 26px;
  margin: 0 0 20px; padding-bottom: 18px;
  border-bottom: 1px solid var(--wb-rand);
}
.wb-kz-reihe:empty { display: none; }
.wb-kz { min-width: 120px; }
.wb-kz__kopf {
  font-size: 11px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--wb-leise); margin-bottom: 3px;
}
.wb-kz__wert {
  margin: 0; font-family: var(--sans); font-size: 20px; font-weight: 700;
  color: var(--wb-tief); font-variant-numeric: tabular-nums;
}
.wb-kz__jahr {
  margin-left: 6px; font-family: var(--serif, Merriweather, Georgia, serif);
  font-size: 12px; font-weight: 400; color: var(--wb-leise);
}

/* ── Die Diagramme ──────────────────────────────────────────────────
   Selbst gezeichnetes SVG: script-src 'self' laesst keine Diagramm-
   bibliothek von einem CDN zu. Die Farben kommen aus denselben Marken
   wie der Rest der Seite, damit ein Balken nicht bunter ist als noetig. */
.wb-dg-feld { display: grid; gap: 22px; }
.wb-dg-feld:empty { display: none; }
.wb-dg__rahmen { margin: 0; }
.wb-dg__rahmen figcaption {
  font-size: 11px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--wb-leise); margin-bottom: 6px;
}
.wb-dg { display: block; width: 100%; height: auto; overflow: visible; }
.wb-dg__hilfe  { stroke: var(--wb-rand); stroke-width: 1; }
.wb-dg__balken { fill: var(--wb-tief); }
/* Ein Verlustjahr sieht anders aus als ein gutes. Terra, nicht Rot:
   ein Fehlbetrag ist ein Befund, kein Alarm. Die Farbe ist auch hier
   nicht die einzige Auskunft — der Wert steht unter dem Balken, mit
   Vorzeichen. */
.wb-dg__balken--minus { fill: var(--terratext); }
/* Die Nulllinie, sobald es sie zu sehen gibt. Kräftiger als die
   Hilfslinien: sie ist die einzige, die etwas bedeutet. */
.wb-dg__null { stroke: var(--wb-leise); stroke-width: 1.5; }
.wb-dg__linie  { fill: none; stroke: var(--terratext); stroke-width: 2.5;
                 stroke-linejoin: round; stroke-linecap: round; }
.wb-dg__punkt  { fill: #fff; stroke: var(--terratext); stroke-width: 2.5; }
.wb-dg__achse  { font-family: var(--sans); font-size: 10px; fill: var(--wb-leise); }
.wb-dg__wert   { font-family: var(--sans); font-size: 10.5px; font-weight: 700;
                 fill: var(--wb-text); }

.wb-marginalie { margin: 0 0 16px; font-size: 12.5px; color: var(--wb-leise); }
.wb__absatz { margin: 0 0 13px; line-height: 1.66; font-size: 15px; color: var(--wb-text); }
.wb__anlauf { font-weight: 700; color: var(--wb-tief); }

/* "Einordnung" ist unser Urteil und steht deshalb sichtbar abgesetzt.
   Im Papiervorbild trägt der Absatz keine Marke -- dort trägt ihn der
   Briefkopf. Auf einer Seite, die auch Befunde zeigt, muss er sie
   tragen. */
.wb__absatz--urteil {
  border-left: 3px solid var(--wb-rand); padding-left: 14px;
  background: #FBFAF6; border-radius: 0 6px 6px 0; padding-top: 10px; padding-bottom: 10px;
}
.wb__absatz--urteil::after {
  content: 'unsere Einordnung, nicht belegt';
  display: block; margin-top: 6px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--wb-still);
}

.wb-quellen {
  margin: 18px 0 0; padding-top: 12px; border-top: 1px solid var(--wb-rand);
  font-size: 12.5px; line-height: 1.75; color: var(--wb-leise);
}
.wb-quellen a { color: var(--wb-leise); }
.wb-quellen a:hover { color: var(--wb-tief); }

/* ── Befunde ──────────────────────────────────────────────────────── */
.wb__bereich { margin: 0 0 24px; }
.wb__bereich:last-child { margin-bottom: 0; }
.wb__bereich-titel {
  margin: 0 0 12px; font-size: 11.5px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--wb-leise); font-weight: 700;
}

.wb__befund { margin: 0 0 14px; padding: 0 0 14px; border-bottom: 1px solid var(--wb-rand); }
.wb__befund:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.wb__befund-kopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 7px; }
.wb__befund-titel { margin: 0; font-size: 15.5px; font-weight: 700; color: var(--wb-text); }

/* Die drei Herkunftsmarken unterscheiden sich in der GESTALT, nicht
   nur in der Farbe: belegt durchgezogen, berichtet gestrichelt,
   vermutet nur Fläche. Das überlebt eine Schwarzweißkopie und einen
   Rotgrünblinden -- und eine mündlich berichtete Aussage über einen
   Wettbewerber ist rechtlich nicht dasselbe wie eine belegte. */
.wb__marke {
  flex: none; padding: 2px 8px; border-radius: 3px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em;
}
.wb__marke--belegt    { border: 1px solid var(--wb-tief); color: var(--wb-tief); }
.wb__marke--berichtet { border: 1px dashed var(--terratext); color: var(--terratext); }
.wb__marke--vermutet  { border: 1px solid transparent; background: var(--wb-hell); color: var(--wb-leise); }

.wb__zitat {
  margin: 0 0 7px; padding: 0 0 0 14px; border-left: 3px solid var(--wb-rand);
  font-style: italic; line-height: 1.58; color: var(--wb-text);
}
.wb__begruendung { margin: 0 0 7px; color: var(--wb-leise); line-height: 1.58; }
.wb__quelle { font-size: 12.5px; color: var(--wb-tief); }
.wb__quelle--muendlich { color: var(--terratext); font-style: normal; }

.wb__befund-fuss {
  display: flex; gap: 12px; flex-wrap: wrap; margin-top: 7px;
  font-size: 12px; color: var(--wb-still);
}
.wb__stand--frisch     { color: var(--wb-tief); }
.wb__stand--ungeprueft { color: var(--wb-still); }
.wb__stand--unbestaetigt,
.wb__stand--quelle_weg { color: var(--terratext); font-weight: 700; }

/* ── Neu seit dem letzten Besuch ──────────────────────────────────── */
.wb__seit { margin: 0 0 10px; font-size: 12.5px; color: var(--wb-leise); }
.wb__neu-zeile { margin: 0 0 8px; font-size: 14px; line-height: 1.5; color: var(--wb-text); }
.wb__leer { margin: 0; color: var(--wb-leise); line-height: 1.62; font-size: 14px; }

/* ── Karte ────────────────────────────────────────────────────────── */
/* Ein beschriftetes Gradnetz, kein Umriss: einen Grenzverlauf aus dem
   Gedächtnis zu zeichnen hieße, eine Karte zu erfinden, und eine
   falsch gezogene Grenze sieht man ihr nicht an. */
.wb__karte { position: relative; padding: 14px 32px; }
.wb__karte-feld {
  position: relative; aspect-ratio: 11.4 / 9.4;
  background:
    repeating-linear-gradient(to right, var(--wb-rand) 0 1px, transparent 1px calc(100% / 11.4)),
    repeating-linear-gradient(to bottom, var(--wb-rand) 0 1px, transparent 1px calc(100% / 9.4)),
    #fff;
  border: 1px solid var(--wb-rand); border-radius: 4px;
}
.wb__karte-rand { position: absolute; font-size: 10px; color: var(--wb-still); }
.wb__karte-rand--n { top: 1px; left: 50%; transform: translateX(-50%); }
.wb__karte-rand--s { bottom: 1px; left: 50%; transform: translateX(-50%); }
.wb__karte-rand--w { left: 0; top: 50%; transform: translateY(-50%) rotate(-90deg); }
.wb__karte-rand--o { right: 0; top: 50%; transform: translateY(-50%) rotate(90deg); }

.wb__ort {
  position: absolute; display: flex; align-items: center; gap: 4px;
  transform: translate(0, -50%); white-space: nowrap;
}
.wb__ort--links { transform: translate(-100%, -50%); flex-direction: row-reverse; }
.wb__ort-name { font-size: 11px; color: var(--wb-text); background: #fff; padding: 0 2px; }

.wb__punkt-karte {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--wb-tief); margin-left: -4.5px;
}
.wb__ort--links .wb__punkt-karte { margin-left: 0; margin-right: -4.5px; }
.wb__punkt-karte--produktion  { background: var(--terratext); width: 11px; height: 11px; }
.wb__punkt-karte--entwicklung { background: var(--wb-tief); }
.wb__punkt-karte--vertrieb    { background: var(--wb-still); width: 7px; height: 7px; }
.wb__punkt-karte--sitz        { background: var(--wb-text); }

.wb__legende {
  display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px;
  font-size: 12px; color: var(--wb-leise);
}
.wb__legende-eintrag { display: inline-flex; align-items: center; gap: 5px; }
.wb__legende-eintrag .wb__punkt-karte { margin: 0; }
.wb__karte-hinweis { margin: 8px 0 0; font-size: 12px; color: var(--wb-leise); line-height: 1.5; }

/* ── Ehrliche Lücken ──────────────────────────────────────────────── */
.wb-luecken {
  display: grid; gap: 16px; margin-top: 8px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.wb-luecke {
  border: 1px solid var(--wb-rand); border-radius: 14px; padding: 20px;
}
.wb-luecke h3 {
  margin: 0 0 8px; font-family: var(--sans);
  font-size: 15.5px; font-weight: 700; color: var(--wb-tief);
}
.wb-luecke p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--wb-text); }

@media (max-width: 720px) {
  .wb-hero { padding: 48px 0 56px; }
  .wb-suche__wahl, .wb-suche__knopf { flex: 1 1 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════
   Die Einzelseite: wettbewerber.html
   ═══════════════════════════════════════════════════════════════════
   Seit dem 16.09.2026 ist der Steckbrief eines Konkurrenten keine
   aufklappbare Lade im Radar mehr, sondern eine eigene Seite mit
   eigener Adresse. Alles darunter gehört ihr.

   Sie steht bewusst in derselben Datei wie das Radar und nicht in
   einer zweiten: es ist dieselbe App, dieselben Karten, dieselben
   Diagramme. Nur der Kopf ist anders. Zwei Dateien hießen zwei
   Wahrheiten über dieselbe Kachel.                                  */

/* Ein schmales dunkles Band, das nur den Rückweg trägt. Die Kopfkarte
   legt sich darüber und ragt nach unten heraus -- deshalb ist das
   Band niedrig und der Abstand darunter negativ. */
.wbe-band {
  background: var(--wb-tief);
  padding: 18px 0 64px;
}
.wbe-zurueck {
  display: inline-block; color: #fff; text-decoration: none;
  font-size: 13.5px; opacity: .85;
}
.wbe-zurueck:hover { opacity: 1; text-decoration: underline; }

.wbe-kopf {
  position: relative; margin: -48px 0 26px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--wb-rand); border-radius: 16px;
  padding: 22px 26px; box-shadow: 0 10px 28px rgba(0,51,0,.08);
}
.wbe-kopf__zeichen {
  display: flex; align-items: center; justify-content: center;
  width: 62px; height: 62px; flex: none;
  border-radius: 14px; background: var(--wb-hell);
  color: var(--wb-tief); font-weight: 700; font-size: 20px; letter-spacing: .02em;
}
.wbe-kopf__zeichen img { max-width: 50px; max-height: 40px; display: block; }
.wbe-kopf__text { flex: 1 1 300px; min-width: 0; }
.wbe-kopf__name {
  margin: 4px 0 6px; font-family: var(--sans);
  font-size: 30px; font-weight: 700; letter-spacing: -0.015em;
  line-height: 1.15; color: var(--wb-tief);
}
.wbe-kopf__unter { margin: 0; font-size: 14px; line-height: 1.55; color: var(--wb-leise); }
.wbe-kopf__unter:empty { display: none; }
.wbe-kopf__tun { display: flex; gap: 10px; flex-wrap: wrap; }

/* Die Zeile über dem Namen: Markt und Defence-Zustand. Ein Wort, kein
   Farbfleck -- wer die Farbe nicht sieht, liest dasselbe. */
.wbe-marken {
  display: flex; gap: 8px; flex-wrap: wrap; margin: 0;
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em;
}
.wbe-marke { padding: 2px 9px; border-radius: 999px; font-weight: 700; }
.wbe-marke--belegt { background: var(--wb-tief);  color: #fff; }
.wbe-marke--offen  { background: #FAF1E8;         color: var(--terratext); }
.wbe-marke--kein   { background: var(--wb-hell);  color: var(--wb-leise); }
.wbe-marke--markt  { background: var(--wb-hell);  color: var(--wb-tief); }

.wbe-knopf {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 16px; border: 1px solid var(--wb-tief); border-radius: 10px;
  background: var(--wb-tief); color: #fff; text-decoration: none;
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.wbe-knopf:hover { background: #00250A; border-color: #00250A; color: #fff; }
.wbe-knopf--still { background: #fff; color: var(--wb-tief); }
.wbe-knopf--still:hover { background: var(--wb-hell); color: var(--wb-tief); }
.wbe-knopf--still[aria-pressed="true"] {
  background: var(--wb-tief); color: #fff;
}

/* Zwei Spalten wie im Radar, aber ungleich: links das Lesen, rechts
   das Nachschlagen. Unter 980px untereinander -- eine Registerspalte
   von 300px neben Fließtext von 300px ist keine Spalte mehr. */
.wbe-spalten { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 980px) {
  .wbe-spalten { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); }
}
.wbe-spalte { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

/* ── Der Defence-Bezug als Stichpunkte ────────────────────────────── */
/* Kein Etikett sagt mehr „belegt". Die Fundstelle am Ende des Punktes
   sagt es: sie ist da und führt irgendwohin, oder sie ist nicht da.
   Wer den Link entfernt, entfernt die Unterscheidung mit.            */
.wbe-punkte { margin: 0; padding: 0 0 0 20px; list-style: disc; }
.wbe-punkte li {
  margin: 0 0 13px; font-size: 15px; line-height: 1.66; color: var(--wb-text);
}
.wbe-punkte li::marker { color: var(--wb-tief); }
.wbe-punkte li:last-child { margin-bottom: 0; }
.wbe-punkt__anlauf { font-weight: 700; color: var(--wb-tief); }
.wbe-punkt__grund  { color: var(--wb-leise); }
.wbe-punkt__nach {
  display: block; margin-top: 3px; font-size: 12.5px; color: var(--wb-leise);
}
.wbe-punkt__nach a { color: var(--wb-tief); }
.wbe-zitat { color: var(--wb-leise); }

.wbe-fuss {
  margin: 14px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--wb-leise);
}
.wbe-fuss:empty { display: none; }

/* ── Nachrichten ──────────────────────────────────────────────────── */
.wbe-news { margin: 0; padding: 0; list-style: none; }
.wbe-news li {
  margin: 0; padding: 12px 0; border-bottom: 1px solid var(--wb-rand);
}
.wbe-news li:first-child { padding-top: 0; }
.wbe-news li:last-child { border-bottom: 0; padding-bottom: 0; }
.wbe-news a {
  font-size: 15px; line-height: 1.5; color: var(--wb-text); text-decoration: none;
}
.wbe-news a:hover { color: var(--wb-tief); text-decoration: underline; }
.wbe-news__nach {
  display: block; margin-top: 4px; font-size: 12.5px; color: var(--wb-leise);
}

/* ── Kontakt und Register ─────────────────────────────────────────── */
/* Eine Definitionsliste, weil es eine ist: links steht, was die Zahl
   bedeutet, rechts die Zahl. */
.wbe-liste { margin: 0; }
.wbe-liste dt {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--wb-leise); margin-top: 14px;
}
.wbe-liste dt:first-child { margin-top: 0; }
.wbe-liste dd {
  margin: 3px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--wb-text);
  overflow-wrap: anywhere;
}
.wbe-liste dd a { color: var(--wb-tief); }

.wbe-aehnlich { margin: 34px 0 56px; }