/* ==========================================================================
   Bauturbo-Check – zentrales Stylesheet
   Nüchtern-professionell, eine Akzentfarbe (Blau), Ampelfarben nur semantisch.
   Systemschriften: keine Webfont-Downloads → schneller + kein US-Datentransfer.
   ========================================================================== */

:root {
  /* Stufe 3 (01.10.2026, Mirko: „professionell clean wie buildability.us"):
     weißer Grund, kühles Grau, ein klares Blau, Überschriften in der
     System-Sans. Bis dahin Stufe 2 – warmes Amtspapier (#F5F2EB), Tinte
     #14222E, Akzent #1A5A96, Editorial-Serife „Charter". Die Werte der
     Stufe 2 stehen in der Sicherung design-sicherung-vor-handschrift.css
     und im Logbuch vom 01.10.2026. */
  --akzent: #2563EB;
  --akzent-dunkel: #1D4ED8;
  --akzent-hell: rgba(37, 99, 235, 0.08);   /* Akzent als Lasur, nicht als Deckfarbe */
  --akzent-zart: #DBE7FD;                    /* Balken der verdeckten Werte */
  --text: #0F172A;
  --text-gedeckt: #5B6474;

  --papier: #FFFFFF;
  --tinte: #0F172A;
  --katasterlinie: #94A3B8;
  --flaeche: #FFFFFF;
  --flaeche-alt: #F6F8FB;       /* zweite Fläche: kühles Grau statt Papier */
  --rand: #E3E8EF;
  --gruen: #15803D;
  --gelb: #C77700;
  --rot: #B3261E;
  --radius: 14px;
  --schatten: 0 1px 2px rgba(15, 23, 42, 0.05), 0 10px 30px rgba(15, 23, 42, 0.07);

  /* Überschriften in der System-Sans (SF Pro auf Apple, Segoe UI auf Windows):
     kein Download, kein Datentransfer – wie bisher, nur ohne Serife. */
  --schrift-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
                     Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Bewegung: knapp und präzise – die Marke ist ein Gutachten, kein Spielzeug.
     Kräftige ease-out-Kurve statt der schwachen CSS-Standards; nichts federt. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --flott: 160ms;
  --normal: 220ms;
}

* { box-sizing: border-box; }

/* Das hidden-Attribut kommt nur aus dem Browser-Stylesheet und verliert gegen
   jede eigene display-Regel – etwa gegen .btn { display: inline-block }.
   Ohne diese Zeile wären verborgene Knöpfe sichtbar. */
[hidden] { display: none !important; }

/* 1rem entspricht dem Fließtext (17px) – vorher rechneten alle rem-Größen
   gegen 16px und „Titel" mit 1.02rem waren KLEINER als der Text daneben. */
html { font-size: 106.25%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
}

.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

.container.schmal { max-width: 780px; }

h1, h2, h3 {
  line-height: 1.22;
  color: var(--text);
  font-weight: 700;
  margin: 0 0 0.5em;
  font-family: var(--schrift-display);
  letter-spacing: -0.012em;
}

h2 { font-size: 1.75rem; margin-bottom: 0.75em; }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1em; }

a { color: var(--akzent); }

.klein { font-size: 0.85rem; color: var(--text-gedeckt); }

.todo {
  color: var(--rot);
  font-style: italic;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--akzent);
  color: #fff;
  padding: 8px 16px;
  z-index: 100;
}
.skip-link:focus { left: 0; }

/* --- Kopfzeile ----------------------------------------------------------- */

.topbar {
  border-bottom: 1px solid var(--rand);
  background: rgba(245, 242, 235, 0.82);
  position: sticky;
  top: 0;
  z-index: 1200;   /* über den Leaflet-Kartenebenen (bis ~1000) */
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
  padding-bottom: 14px;
  flex-wrap: wrap;
}

.wortmarke {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text);
  text-decoration: none;
}

/* Das Zeichen der Marke: ein Haus, in dem eine Glühbirne steckt – das
   Potenzial im Bestand. Die Birne ist kein weißes Element, sondern ein
   echtes Loch in der Fläche (SVG-Maske); deshalb trägt das Zeichen auf
   Papier, auf der dunklen Fußzeile und im Druck gleichermaßen und erbt
   über fill="currentColor" die Farbe von hier.

   32 px: Seit dem 11.09.2026 ist das Zeichen eine Vollfläche statt einer
   Strichzeichnung. Es steht bewusst über der Versalhöhe der Wortmarke –
   das Haus ist die Marke, der Schriftzug erklärt sie nur.
   Die drei Ampelpunkte davor zeigten das Ergebnis, nicht die Sache. */
.wortmarke-zeichen {
  display: inline-flex;
  color: var(--akzent);
}
.wortmarke-zeichen svg { display: block; width: 32px; height: 32px; }
.wortmarke-hell .wortmarke-zeichen { color: currentColor; }
h2 .wortmarke-zeichen { margin-right: 10px; vertical-align: -8px; }

.wortmarke-ampel {
  display: inline-flex;
  gap: 3px;
  padding: 5px 6px;
  background: var(--akzent);
  border-radius: 6px;
}

.wortmarke-ampel i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: block;
}
.wortmarke-ampel i:nth-child(1) { background: #6FCF8E; }
.wortmarke-ampel i:nth-child(2) { background: #F2C14E; }
.wortmarke-ampel i:nth-child(3) { background: #EB8079; }

.topbar nav {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.topbar nav a {
  text-decoration: none;
  color: var(--text-gedeckt);
  font-size: 0.95rem;
}

.topbar nav a:hover { color: var(--akzent); }

/* --- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  font-size: 0.95rem;
  font-family: inherit;
  transition: background var(--flott) var(--ease-out),
              color var(--flott) var(--ease-out),
              transform var(--flott) var(--ease-out);
}

/* Der Knopf bestätigt den Druck – das spürbarste der unsichtbaren Details. */
.btn:active { transform: scale(0.97); }

.btn-primaer {
  background: var(--akzent);
  color: #fff !important;
}

.btn-sekundaer {
  background: transparent;
  color: var(--akzent);
  border-color: var(--akzent);
}

.btn-klein {
  padding: 8px 16px;
  font-size: 0.9rem;
  background: var(--akzent);
  color: #fff !important;
  border-radius: 8px;
}

/* Hover nur, wo es wirklich einen Zeiger gibt – auf Touch bleibt sonst der
   „schwebende" Zustand nach dem Tippen hängen. */
@media (hover: hover) and (pointer: fine) {
  .btn-primaer:hover, .btn-klein:hover { background: var(--akzent-dunkel); }
  .btn-sekundaer:hover { background: var(--akzent-hell); }
}

/* --- Hero ---------------------------------------------------------------- */

.hero {
  padding: 72px 0 64px;
}

/* Zweispaltig: Worte links, die Flurkarte rechts. Eine Karte sagt, was wir
   tun – kein Foto von Händen über Bauplänen wie überall sonst. */
.hero-inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}
.hero-text { text-align: left; }

.ueberzeile {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--akzent);
  margin-bottom: 16px;
}

.hero h1 {
  font-size: clamp(2rem, 4.6vw, 3.3rem);
  max-width: 19ch;
  margin: 0 0 0.4em;
}

.untertitel {
  max-width: 560px;
  margin: 0 0 28px;
  font-size: 1.1rem;
  color: var(--text-gedeckt);
}

.cta-reihe {
  display: flex;
  gap: 14px;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-bottom: 26px;
}

.vertrauen {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: flex-start;
  gap: 10px 28px;
  flex-wrap: wrap;
  font-size: 0.9rem;
  color: var(--text-gedeckt);
}

.vertrauen li::before {
  content: "✓ ";
  color: var(--gruen);
  font-weight: 700;
}

/* --- Abschnitte ---------------------------------------------------------- */

.abschnitt { padding: 72px 0; }
.abschnitt-alt { background: var(--papier); }  /* eine Welt: alles auf Papier */

.hinweis-box {
  border-left: 4px solid var(--akzent);
  background: var(--akzent-hell);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 16px 20px;
  margin-top: 20px;
}

/* --- Schritte ------------------------------------------------------------ */

.schritte {
  list-style: none;
  counter-reset: schritt;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.schritt {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 26px 24px;
  box-shadow: var(--schatten);
}

/* Schrittnummern wie Flurstücksnummern – dieselbe Handschrift wie die
   Hero-Karte, statt blauer Baukasten-Kreise. */
.schritt-nr {
  display: block;
  font-family: var(--schrift-display);
  font-style: italic;
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--katasterlinie);
  margin-bottom: 8px;
}

.schritt p { margin-bottom: 0; color: var(--text-gedeckt); }

/* --- Beispiel / Berichtsvorschau ----------------------------------------- */

.beispiel-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}

.haken-liste {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}

.haken-liste li {
  padding-left: 28px;
  position: relative;
  margin-bottom: 8px;
}

.haken-liste li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--gruen);
  font-weight: 700;
}

.beispiel-text .klein { margin-top: 12px; }

.bericht-vorschau {
  display: block;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  transform: rotate(0.6deg);
  transition: transform var(--normal) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .bericht-vorschau:hover { transform: rotate(0deg) translateY(-2px); }
}

.vorschau-kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--akzent);
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 12px 18px;
}

.muster-badge {
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
}

.vorschau-ampel {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 18px 8px;
}

.ampel-punkt {
  /* inline-block, damit Breite/Höhe auch außerhalb von Flex-Containern greifen */
  display: inline-block;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ampel-punkt.gruen { background: var(--gruen); box-shadow: 0 0 0 6px rgba(30, 122, 60, 0.14); }
.ampel-punkt.gelb  { background: var(--gelb);  box-shadow: 0 0 0 6px rgba(199, 119, 0, 0.14); }
.ampel-punkt.rot   { background: var(--rot);   box-shadow: 0 0 0 6px rgba(179, 38, 30, 0.14); }
.ampel-punkt.grau  { background: #CBD5E1; box-shadow: 0 0 0 6px rgba(148, 163, 184, 0.16); }

/* --- Ampel ohne Fragen (seit 01.10.2026, ampel-daten.js) --------------------
   Oben in der Tafel der Startseite und am Anfang des Fragebogens: aus der
   gezählten Lage, bevor jemand eine Frage beantwortet hat. Dieselben Farben
   wie die Ampel am Ende des Fragebogens (.mc-ampel). */
.ampel-daten {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 16px 18px;
  border: 1px solid var(--rand);
  border-left: 6px solid var(--rand);
  border-radius: var(--radius);
  background: var(--flaeche-alt);
}
.ampel-daten-gruen { border-left-color: var(--gruen); }
.ampel-daten-gelb  { border-left-color: var(--gelb); }
.ampel-daten-rot   { border-left-color: var(--rot); }
.ampel-daten .ampel-punkt { width: 30px; height: 30px; margin-top: 4px; }
.ampel-daten.ist-wartend .ampel-punkt { animation: ampel-warten 1.1s ease-in-out infinite; }
@keyframes ampel-warten { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
.ampel-daten-inhalt { min-width: 0; }
.ampel-daten-kicker {
  margin: 0 0 2px;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--text-gedeckt);
}
.ampel-daten-titel { margin: 0 0 6px; font-size: 1.12rem; line-height: 1.3; }
.ampel-daten-text { margin: 0 0 8px; }
.ampel-daten.ist-wartend .ampel-daten-text,
.ampel-daten.ist-ohne .ampel-daten-text { margin: 0; color: var(--text-gedeckt); }
.ampel-daten-weg { margin: 0 0 6px; font-size: 0.95rem; }
.ampel-daten-fuss { margin: 0; font-size: 0.8rem; color: var(--text-gedeckt); }
.tafel-ampel { margin: 16px 0 0; }
.mc-ampel-vorab { margin: 0 0 18px; }
.mc-ampel-vorab-zusatz { margin: 8px 0 0; color: var(--text-gedeckt); }
@media (prefers-reduced-motion: reduce) {
  .ampel-daten.ist-wartend .ampel-punkt { animation: none; }
}
/* Auf dem Telefon kompakter: Die Ampel steht über der Karte und soll sie
   nicht aus dem Bild schieben (vorher 554 px hoch bei 375 px Breite). */
@media (max-width: 560px) {
  .ampel-daten { gap: 10px; padding: 12px; border-left-width: 5px; }
  .ampel-daten .ampel-punkt { width: 20px; height: 20px; margin-top: 3px; }
  .ampel-daten-kicker { font-size: 0.72rem; }
  .ampel-daten-titel { font-size: 1rem; margin-bottom: 4px; }
  .ampel-daten-text { font-size: 0.9rem; line-height: 1.45; margin-bottom: 6px; }
  .ampel-daten-weg { font-size: 0.86rem; margin-bottom: 4px; }
  .ampel-daten-fuss { font-size: 0.72rem; }
}

.vorschau-ergebnis { display: flex; flex-direction: column; }
.vorschau-ergebnis strong { font-size: 1.05rem; }
.vorschau-ergebnis span:last-child { color: var(--text-gedeckt); font-size: 0.85rem; }

.vorschau-kernaussage {
  display: block;
  padding: 12px 18px 16px;
  font-size: 0.92rem;
  color: var(--text-gedeckt);
}

.vorschau-fuss {
  display: block;
  border-top: 1px solid var(--rand);
  padding: 10px 18px;
  font-size: 0.8rem;
  color: var(--text-gedeckt);
  background: var(--flaeche-alt);
}

/* --- Preise -------------------------------------------------------------- */

.preise {
  display: grid;
  /* Vier Stufen seit dem 11.09.2026. Auf mittleren Schirmen zwei mal zwei —
     vier Spalten unter 1100 px machen aus jeder Karte eine Säule. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

@media (max-width: 1100px) {
  .preise { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.preis-karte {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
}

.preis-karte .btn { margin-top: auto; text-align: center; }

.karten-fuss { margin: 10px 0 0; text-align: center; }

.preis-karte.hervorgehoben {
  border: 2px solid var(--akzent);
  box-shadow: var(--schatten);
  position: relative;
}

.karten-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--akzent);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 3px 12px;
  border-radius: 999px;
  white-space: nowrap;
  margin: 0;
}

.preis {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--akzent);
  margin: 0;
}

.preis-untertitel {
  color: var(--text-gedeckt);
  font-size: 0.9rem;
  margin-bottom: 18px;
}

/* (alte helle ehrlich-hinweis-Fassung entfernt – lebt jetzt als Tinte-Manifest) */

/* --- Über mich ----------------------------------------------------------- */

.ueber-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 48px;
  align-items: start;
}

.disclaimer-box {
  background: var(--flaeche-alt);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 24px;
}

.disclaimer-box h3 { color: var(--akzent-dunkel); }
.disclaimer-box p { margin-bottom: 0; font-size: 0.95rem; }

/* --- FAQ ------------------------------------------------------------------ */

details {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 0 20px;
  margin-bottom: 12px;
}

summary {
  cursor: pointer;
  font-weight: 600;
  padding: 16px 0;
  list-style: none;
  position: relative;
  padding-right: 32px;
}

summary::-webkit-details-marker { display: none; }

summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  rotate: 0deg;
  color: var(--akzent);
  font-size: 1.3rem;
  font-weight: 400;
  transition: rotate var(--normal) var(--ease-out);
}

details[open] summary::after { rotate: 45deg; }

/* Sanftes Auf- und Zuklappen, wo der Browser es kann (interpolate-size);
   überall sonst öffnet es schlicht sofort – kein Schaden. */
details::details-content {
  interpolate-size: allow-keywords;
  block-size: 0;
  overflow: hidden;
  transition: block-size var(--normal) var(--ease-out),
              content-visibility var(--normal) allow-discrete;
}
details[open]::details-content { block-size: auto; }

details p { color: var(--text-gedeckt); padding-bottom: 16px; margin: 0; }

/* --- Formular ------------------------------------------------------------- */

.formular {
  background: #FBFAF6;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 28px;
  margin-top: 8px;
}

.feld { margin-bottom: 18px; }

.feld label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 6px;
}

.feld input[type="text"],
.feld input[type="email"],
.feld textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--rand);
  border-radius: 8px;
  font-family: inherit;
  font-size: 1rem;
  background: var(--flaeche);
  color: var(--text);
}

.feld input:focus,
.feld textarea:focus {
  outline: 2px solid var(--akzent);
  outline-offset: 1px;
  border-color: var(--akzent);
}

.feld-checkbox {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.feld-checkbox label { font-weight: 400; }
.feld-checkbox input { margin-top: 5px; }

.formular .klein { margin: 12px 0 0; }

/* --- Fußzeile ------------------------------------------------------------- */

.fusszeile {
  background: var(--tinte);
  color: rgba(245, 242, 235, 0.8);
  padding: 56px 0 36px;
  margin-top: 0;
}

.fusszeile-inner {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  margin-bottom: 16px;
}

.fusszeile .klein { color: rgba(245, 242, 235, 0.55); max-width: 480px; }

.wortmarke-hell { color: #fff; margin-bottom: 8px; }

.fusszeile nav {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  flex-wrap: wrap;   /* fünf Verweise sind 508 px breit; auf 375 px liefen sie über */
}

.fusszeile a { color: rgba(245, 242, 235, 0.8); text-decoration: none; font-size: 0.9rem; }
.fusszeile a:hover { color: #fff; text-decoration: underline; }

.fusszeile .todo { color: #EB8079; }

.copyright { margin: 0; }

/* --- Rechtliche Unterseiten ------------------------------------------------ */

.rechtsseite { padding: 56px 24px 72px; }   /* 24px wie .container – „0“ hatte den Seitenrand auf Handys gelöscht */
.rechtsseite h1 { font-size: 2rem; }
.rechtsseite .todo-block {
  background: var(--flaeche-alt);
  border: 1px dashed var(--rot);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin: 20px 0;
}

/* --- Mini-Check: Sofort-Ampel ------------------------------------------------- */

.mc {
  background: var(--flaeche);
  border: 2px solid var(--akzent);
  border-radius: var(--radius);
  padding: 28px;
  margin-bottom: 32px;
  box-shadow: var(--schatten);
}

.mc-frage label,
.mc-frage-block legend {
  font-weight: 600;
  font-size: 1.05rem;
  display: block;
  margin-bottom: 10px;
}

.mc input[type="text"] {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--rand);
  border-radius: 8px;
  font-family: inherit;
  font-size: 1rem;
  background: var(--flaeche);
  color: var(--text);
  margin-bottom: 6px;
}

.mc input[type="text"]:focus {
  outline: 2px solid var(--akzent);
  outline-offset: 1px;
}

/* Ortssuche mit eigener Vorschlagsliste – ein <datalist> verkraftet
   10.943 Einträge nicht. */
.mc-suche { position: relative; }

.mc-vorschlaege {
  position: absolute;
  top: calc(100% - 2px);
  left: 0;
  right: 0;
  z-index: 20;
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--flaeche);
  border: 1px solid var(--akzent);
  border-radius: 0 0 8px 8px;
  max-height: 300px;
  overflow-y: auto;
  box-shadow: var(--schatten);
}

.mc-vorschlaege li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--rand);
  font-size: 0.95rem;
}

.mc-vorschlaege li:last-child { border-bottom: 0; }
.mc-vorschlaege li:hover { background: var(--akzent-hell); }

.mc-vorschlag-land {
  color: var(--text-gedeckt);
  font-size: 0.85rem;
  margin-right: auto;
}

.mc-geprueft {
  background: var(--gruen);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.mc-quelle { margin-top: 10px; font-size: 0.78rem; }

.mc-frage-block {
  border: 0;
  padding: 0;
  margin: 0 0 20px;
}

.mc-frage-block label {
  display: block;
  padding: 9px 12px;
  border: 1px solid var(--rand);
  border-radius: 8px;
  margin-bottom: 7px;
  cursor: pointer;
  font-size: 0.97rem;
}

.mc-frage-block label:hover { background: var(--akzent-hell); }

.mc-frage-block input[type="radio"] { margin-right: 9px; }

.mc .btn { margin-top: 6px; margin-right: 8px; }

/* Zwischenergebnis zur Stadt */
.mc-teilergebnis {
  background: var(--flaeche-alt);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 22px;
}

.mc-teilergebnis .klein { margin: 6px 0 0; }
.mc-teilergebnis.mc-unbekannt { border-left: 4px solid var(--gelb); }

/* Endergebnis */
.mc-ampel {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 12px;
  border: 1px solid var(--rand);
  border-left: 6px solid var(--rand);
  background: var(--flaeche-alt);
}

.mc-ampel-gruen { border-left-color: var(--gruen); }
.mc-ampel-gelb  { border-left-color: var(--gelb); }
.mc-ampel-rot   { border-left-color: var(--rot); }

.mc-ampel-punkt { flex-shrink: 0; }
.mc-ampel-punkt .ampel-punkt { width: 38px; height: 38px; }

.mc-ampel-titel { font-weight: 700; font-size: 1.1rem; margin-bottom: 6px; }
.mc-ampel p:last-child { margin-bottom: 0; }

/* Erläuterung unter einer Frage – für Laien, die den Fachbegriff nicht kennen */
.mc-hilfe {
  font-size: 0.85rem;
  color: var(--text-gedeckt);
  margin: 8px 0 0;
  padding-left: 12px;
  border-left: 2px solid var(--rand);
}

/* Empfohlener Rechtsweg */
.mc-weg {
  border: 1px solid var(--akzent);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin: 14px 0;
  background: var(--akzent-hell);
}
.mc-weg-titel { font-size: 1.02rem; margin-bottom: 8px; }
.mc-weg-titel span { font-weight: 400; color: var(--text-gedeckt); }
.mc-weg p:last-child { margin-bottom: 0; }

/* Handlungsanleitung */
.mc-anleitung {
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin: 14px 0;
}
.mc-anleitung-titel { font-weight: 700; margin-bottom: 10px; }
.mc-anleitung ol { margin: 0 0 8px; padding-left: 22px; }
.mc-anleitung li { margin-bottom: 10px; }
.mc-anleitung p:last-child { margin-bottom: 0; }

.mc-hinweis {
  color: var(--rot);
  font-size: 0.9rem;
  font-weight: 600;
  margin: 10px 0 0;
}

.mc-formular-titel { font-size: 1.25rem; margin-top: 8px; }

.mc-status {
  margin: 12px 0 0;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 0.92rem;
  background: var(--flaeche);
  border: 1px solid var(--rand);
}
.mc-status-ok {
  background: #EAF5EE;
  border-color: var(--gruen);
  color: #14562A;
}
.mc-status-fehler {
  background: #FBEDEC;
  border-color: var(--rot);
  color: #8A1D17;
}

/* --- Flurstückskarte ------------------------------------------------------- */

.bt-karte-huelle {
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 18px;
  background: var(--flaeche);
}

#bt-karte {
  height: 340px;
  width: 100%;
  background: var(--flaeche-alt);
}

.bt-karte-status {
  margin: 0;
  padding: 12px 16px;
  font-size: 0.9rem;
  border-top: 1px solid var(--rand);
  background: var(--flaeche-alt);
}

.bt-karte-status .klein { display: block; margin-top: 4px; }
.bt-karte-ok { background: #EAF5EE; border-top-color: var(--gruen); }
.bt-karte-hinweis { background: #FDF6E8; border-top-color: var(--gelb); }

/* Leaflet setzt seine Steuerelemente über alles – hier reicht deutlich weniger,
   sonst liegen Zoom-Knöpfe über der Kopfzeile. */
.leaflet-pane, .leaflet-top, .leaflet-bottom { z-index: 5 !important; }

@media (max-width: 900px) {
  #bt-karte { height: 260px; }
}

/* Spam-Falle: für Menschen unsichtbar, für Bots ausfüllbar.
   Nicht display:none – manche Bots überspringen versteckte Felder. */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Stadt-Seiten (site/staedte/) -------------------------------------------- */

.stadt-seite { padding: 40px 0 64px; }

.brotkrumen {
  font-size: 0.85rem;
  color: var(--text-gedeckt);
  margin-bottom: 20px;
}
.brotkrumen a { color: var(--text-gedeckt); }

.stadt-seite h1 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); margin-bottom: 24px; }
.stadt-seite h2 { margin-top: 40px; }

.untertitel-links { font-size: 1.05rem; color: var(--text-gedeckt); }

/* Antwortbox mit Ampel: linker Farbbalken je Status */
.antwort-box {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  background: var(--flaeche-alt);
  border: 1px solid var(--rand);
  border-left: 6px solid var(--rand);
  border-radius: var(--radius);
  padding: 24px 26px;
  margin-bottom: 8px;
}
.antwort-gruen { border-left-color: var(--gruen); }
.antwort-gelb  { border-left-color: var(--gelb); }
.antwort-rot   { border-left-color: var(--rot); }

.antwort-ampel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  min-width: 70px;
}

.antwort-ampel .ampel-punkt { width: 40px; height: 40px; }

.ampel-label { font-weight: 700; font-size: 0.9rem; }

.antwort-kurz { font-size: 1.1rem; font-weight: 600; }
.antwort-text p:last-child { margin-bottom: 0; color: var(--text-gedeckt); }

/* Belege: als Quelle erkennbar, Link umbrechbar (lange Behörden-URLs) */
.beleg {
  font-size: 0.85rem;
  background: var(--akzent-hell);
  border-radius: 8px;
  padding: 10px 14px;
  word-break: break-word;
}
.beleg-label { font-weight: 700; color: var(--akzent-dunkel); }
.beleg-offen { background: var(--flaeche-alt); color: var(--text-gedeckt); }

.besonderheit {
  border-left: 4px solid var(--akzent);
  background: var(--flaeche-alt);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 16px 20px;
  margin-bottom: 12px;
}
.besonderheit-titel {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--akzent-dunkel);
  margin-bottom: 6px;
}
.besonderheit p:last-child { margin-bottom: 0; }

.cta-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  background: var(--akzent-hell);
  border: 1px solid var(--akzent);
  border-radius: var(--radius);
  padding: 22px 26px;
  margin: 32px 0;
}
.cta-titel { font-weight: 700; font-size: 1.05rem; margin-bottom: 4px; }
.cta-box p { margin-bottom: 0; }

.stadt-links {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 24px;
}
.stadt-links li { border-bottom: 1px solid var(--rand); padding: 6px 0; }
.stadt-links a { text-decoration: none; }
.stadt-links a:hover { text-decoration: underline; }

/* Breite Tabelle scrollt in sich, damit die Seite nie horizontal scrollt */
.tabelle-scroll { overflow-x: auto; margin-bottom: 8px; }

.staedte-tabelle,
.inhalt-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.staedte-tabelle th,
.staedte-tabelle td,
.inhalt-tabelle th,
.inhalt-tabelle td {
  border-bottom: 1px solid var(--rand);
  padding: 10px 12px;
  text-align: left;
  vertical-align: middle;
}
.staedte-tabelle thead th,
.inhalt-tabelle thead th {
  background: var(--flaeche-alt);
  font-size: 0.85rem;
  color: var(--text-gedeckt);
  white-space: nowrap;
}
.staedte-tabelle td:first-child { font-weight: 600; white-space: nowrap; }
.inhalt-tabelle tbody th { font-weight: 600; }
.inhalt-tabelle th, .inhalt-tabelle td { vertical-align: top; }
.inhalt-tabelle .nein { color: var(--text-gedeckt); }
/* Auf dem Telefon passt die Tabelle ohne seitliches Wischen: kleinere
   Schrift, engere Zellen, umbrechende Spaltenköpfe (vorher 494 px breit in
   327 px Platz). */
@media (max-width: 560px) {
  .inhalt-tabelle { font-size: 0.82rem; }
  .inhalt-tabelle th, .inhalt-tabelle td { padding: 8px 6px; }
  .inhalt-tabelle thead th { white-space: normal; }
}

.punkt {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  vertical-align: baseline;
}
.punkt.gruen { background: var(--gruen); }
.punkt.gelb  { background: var(--gelb); }
.punkt.rot   { background: var(--rot); }

.stadt-seite .disclaimer-box { margin-top: 36px; }
.stadt-seite .datenstand {
  font-size: 0.8rem;
  color: var(--text-gedeckt);
  border-top: 1px solid var(--rand);
  padding-top: 14px;
  margin-top: 32px;
}

.mc-direktweg {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--rand);
  font-size: 0.92rem;
  color: var(--text-gedeckt);
}

/* --- Plattform-Startseite: Analysen ----------------------------------------- */

.analysen {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  align-items: start;
}

.analyse-karte {
  background: var(--flaeche);
  border: 2px solid var(--akzent);
  border-radius: var(--radius);
  padding: 30px 28px;
  position: relative;
  box-shadow: var(--schatten);
  display: flex;
  flex-direction: column;
}

/* Die Vorschau-Karte tritt bewusst zurück: gestrichelt und ohne Akzentfarbe,
   damit sie nicht wie ein zweites Angebot aussieht. */
.analyse-karte-vorschau {
  border: 1px dashed var(--rand);
  background: var(--flaeche-alt);
  box-shadow: none;
}

.analyse-karte h3 { font-size: 1.35rem; margin-bottom: 4px; }

.analyse-untertitel {
  color: var(--text-gedeckt);
  font-size: 0.95rem;
  margin-bottom: 16px;
}

.analyse-karte .btn { margin-top: auto; text-align: center; }
.analyse-karte .haken-liste { margin-bottom: 22px; }

.karten-badge-still {
  background: var(--text-gedeckt);
  color: #fff;
}

/* --- Bestellseite ----------------------------------------------------------- */

.best-leistung {
  background: var(--akzent-hell);
  border-radius: var(--radius);
  padding: 24px 28px;
  margin-bottom: 28px;
}
.best-leistung h2 { font-size: 1.25rem; margin-bottom: 12px; }
.best-leistung .haken-liste { margin-bottom: 12px; }

.best-hinweis {
  border-left: 4px solid var(--gelb);
  background: #FDF6E8;
  border-radius: 0 8px 8px 0;
  padding: 14px 18px;
  font-size: 0.92rem;
  margin-bottom: 28px;
}

/* Die Pflichtangaben unmittelbar über dem Bestellknopf. Kräftiger Rahmen,
   damit sie nicht als Beiwerk gelesen werden – § 312j Abs. 2 BGB verlangt
   „klar und verständlich in hervorgehobener Weise“. */
.best-zusammenfassung {
  border: 2px solid var(--akzent);
  border-radius: var(--radius);
  background: var(--flaeche);
  padding: 18px 22px;
  margin: 26px 0 18px;
}

.best-posten {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  margin: 0;
}

.best-preis {
  font-size: 1.6rem;
  font-weight: 700;
  white-space: nowrap;
}

.best-ust { margin: 10px 0 0; }

.btn-bestellen { width: 100%; }
.btn-bestellen:disabled { opacity: 0.6; cursor: default; }

.best-zahlung {
  background: #EAF5EE;
  border: 2px solid var(--gruen);
  border-radius: var(--radius);
  padding: 28px;
}
.best-zahlung h2 { font-size: 1.4rem; }
.best-zahlung .btn { margin: 8px 0 16px; }
.best-zahlung .klein { margin-bottom: 0; }

/* Übermittlung gescheitert: bezahlen geht trotzdem, aber die Farbe soll nicht
   „alles erledigt" behaupten. */
.best-zahlung-warnung { background: #FDF6E8; border-color: var(--gelb); }

.best-notfall {
  background: var(--flaeche);
  border: 1px solid var(--gelb);
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 20px;
}
.best-notfall p { font-size: 0.92rem; }
.best-notfall .btn { margin: 0; }

/* --- Widerrufsbelehrung ----------------------------------------------------- */

.anschrift {
  background: var(--flaeche-alt);
  border-left: 3px solid var(--akzent);
  padding: 14px 18px;
  border-radius: 0 8px 8px 0;
}

/* Muster nach Anlage 2 zu Art. 246a EGBGB – bewusst formularhaft abgesetzt */
.muster-formular {
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 24px 26px;
  background: var(--flaeche-alt);
}
.muster-formular p { margin-bottom: 0.8em; }

/* --- Responsiv ------------------------------------------------------------- */

@media (max-width: 900px) {
  .schritte, .preise, .analysen { grid-template-columns: 1fr; }
  .best-posten { flex-direction: column; gap: 6px; }
  .beispiel-grid, .ueber-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero { padding: 56px 0 48px; }
  .abschnitt { padding: 52px 0; }
  .preis-karte.hervorgehoben { order: -1; }
  .antwort-box { flex-direction: column; gap: 14px; }
  .antwort-ampel { flex-direction: row; min-width: 0; }
  .stadt-links { grid-template-columns: 1fr; }
  .cta-box { flex-direction: column; align-items: flex-start; }
}


/* ==========================================================================
   Handschrift & Bewegung – nach Emil Kowalskis Design-Engineering-Prinzipien.
   Leitidee: crisp und präzise. Kurze Wege (unter 300 ms), kräftiges ease-out,
   kein Federn. Bewegung nur dort, wo sie etwas erklärt oder bestätigt.
   ========================================================================== */

/* --- Der erste Eindruck: Hero baut sich in einer Kaskade auf ---------------
   Wird pro Besuch genau einmal gesehen – laut Frequenzregel darf das.
   @starting-style + transition statt Keyframes: unterbrechbar, kein JS. */
.hero .ueberzeile, .hero h1, .hero .untertitel,
.hero .cta-reihe, .hero .vertrauen {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
}
@starting-style {
  .hero .ueberzeile, .hero h1, .hero .untertitel,
  .hero .cta-reihe, .hero .vertrauen {
    opacity: 0;
    transform: translateY(10px);
  }
}
.hero h1          { transition-delay: 60ms; }
.hero .untertitel { transition-delay: 120ms; }
.hero .cta-reihe  { transition-delay: 180ms; }
.hero .vertrauen  { transition-delay: 240ms; }

/* --- Ergebnisse erscheinen, statt aufzupoppen ------------------------------
   Mini-Check-Ampel, Statusmeldungen und der Bestellerfolg werden per JS
   eingeblendet; der kurze Weg von 6 px nimmt dem Wechsel die Härte. */
.mc-status, .mc-teilergebnis, .best-zahlung, .mc-ergebnis {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--normal) var(--ease-out),
              transform var(--normal) var(--ease-out);
}
@starting-style {
  .mc-status, .mc-teilergebnis, .best-zahlung, .mc-ergebnis {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* --- Karten heben sich dem Zeiger entgegen – dezent, nur Desktop ---------- */
.analyse-karte, .preis-karte, .schritt {
  transition: transform var(--normal) var(--ease-out),
              box-shadow var(--normal) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .analyse-karte:hover, .preis-karte:hover, .schritt:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 6px rgba(16, 32, 48, 0.07), 0 12px 32px rgba(16, 32, 48, 0.09);
  }
  .analyse-karte-vorschau:hover { transform: none; box-shadow: none; }
}

/* --- Die Ampel als Signatur ------------------------------------------------
   Beim Überfahren der Wortmarke leuchten die drei Punkte nacheinander auf –
   das einzige verspielte Detail der Seite, und es gehört zur Marke. */
.wortmarke-ampel i {
  transition: transform var(--flott) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .wortmarke:hover .wortmarke-ampel i { transform: scale(1.35); }
  .wortmarke:hover .wortmarke-ampel i:nth-child(1) { transition-delay: 0ms; }
  .wortmarke:hover .wortmarke-ampel i:nth-child(2) { transition-delay: 60ms; }
  .wortmarke:hover .wortmarke-ampel i:nth-child(3) { transition-delay: 120ms; }
  .wortmarke:not(:hover) .wortmarke-ampel i { transition-delay: 0ms; }
}

/* --- Zahlen stehen still ---------------------------------------------------
   Tabellarische Ziffern: Preise, Tabellen und der Mini-Check flackern nicht,
   wenn sich Werte ändern – die Marke ist Zahlen, also sitzen die Zahlen. */
.preis-betrag, .best-preis, .best-posten, table, .mc-teilergebnis,
.staedte-tabelle, .stadt-tabelle {
  font-variant-numeric: tabular-nums;
}

/* --- Formulare antworten --------------------------------------------------- */
.feld input[type="text"], .feld input[type="email"], .feld textarea {
  transition: border-color var(--flott) var(--ease-out),
              box-shadow var(--flott) var(--ease-out);
}
input[type="checkbox"] { accent-color: var(--akzent); }

:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--akzent); color: #fff; }

/* --- Rücksicht: bei reduzierter Bewegung bleiben nur Blenden --------------- */
@media (prefers-reduced-motion: reduce) {
  .hero .ueberzeile, .hero h1, .hero .untertitel,
  .hero .cta-reihe, .hero .vertrauen,
  .mc-status, .mc-teilergebnis, .best-zahlung, .mc-ergebnis {
    transition-property: opacity;
    transform: none;
  }
  .btn:active { transform: none; }
  .analyse-karte, .preis-karte, .schritt, .bericht-vorschau,
  .wortmarke-ampel i, summary::after {
    transition: none;
  }
  details::details-content { transition: none; }
}


/* --- Die Flurkarte: das Identitätsmotiv ------------------------------------
   Strichzeichnung wie ein Katasterauszug. Die Parzellenzüge zeichnen sich
   beim ersten Laden (einmaliger Moment), das Potenzial blendet zuletzt ein. */
.flurkarte { width: 100%; height: auto; display: block; }

.fk-linien path {
  fill: none;
  stroke: var(--katasterlinie);
  stroke-width: 1.4;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: fk-zeichnen 1600ms var(--ease-in-out) forwards;
}
.fk-linien path:nth-child(2) { animation-delay: 120ms; }
.fk-linien path:nth-child(3) { animation-delay: 240ms; }
.fk-linien path:nth-child(4) { animation-delay: 360ms; }
.fk-linien path:nth-child(5) { animation-delay: 480ms; }
.fk-linien path:nth-child(6) { animation-delay: 600ms; }
.fk-linien path:nth-child(7) { animation-delay: 720ms; }
.fk-linien path:nth-child(8) { animation-delay: 840ms; }

@keyframes fk-zeichnen { to { stroke-dashoffset: 0; } }

.fk-flurstueck {
  fill: rgba(30, 122, 60, 0.08);
  stroke: var(--gruen);
  stroke-width: 2;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: fk-zeichnen 1200ms var(--ease-in-out) 1100ms forwards;
}

.fk-bestand { fill: var(--flaeche); stroke: var(--tinte); stroke-width: 1.6; }

.fk-potenzial {
  fill: rgba(30, 122, 60, 0.12);
  stroke: var(--gruen);
  stroke-width: 2;
  stroke-dasharray: 6 5;
  opacity: 0;
  animation: fk-einblenden 900ms var(--ease-out) 2300ms forwards;
}
@keyframes fk-einblenden { to { opacity: 1; } }

.fk-mass line { stroke: var(--tinte); stroke-width: 1.2; }
.fk-nord line, .fk-nord path, .fk-skala line { stroke: var(--tinte); stroke-width: 1.2; }
.fk-nord path { fill: var(--tinte); }

.fk-nr text, .fk-nord text, .fk-skala text {
  font-family: var(--schrift-display);
  font-style: italic;
  font-size: 13px;
  fill: var(--katasterlinie);
}
.fk-nr-eigen { fill: var(--gruen) !important; font-weight: 600; }
.fk-plus {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 700;
  font-size: 15px;
  fill: var(--gruen);
  opacity: 0;
  animation: fk-einblenden 800ms var(--ease-out) 2800ms forwards;
}

.fk-bestand, .fk-mass, .fk-nord, .fk-skala, .fk-nr {
  opacity: 0;
  animation: fk-einblenden 800ms var(--ease-out) 1800ms forwards;
}

/* --- Das Manifest: Ehrlichkeit in Tinte ------------------------------------ */
.ehrlich-hinweis {
  background: var(--tinte);
  color: rgba(245, 242, 235, 0.92);
  border: 0;
  border-radius: var(--radius);
  padding: 22px 26px;
  margin: 28px auto 0;
  max-width: 720px;
  text-align: center;
}
.ehrlich-hinweis strong { color: var(--papier); }

/* --- Flurkarte auf schmalen Schirmen --------------------------------------- */
@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; gap: 32px; }
  .flurkarte { max-width: 430px; margin: 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .fk-linien path, .fk-flurstueck, .fk-potenzial, .fk-plus,
  .fk-bestand, .fk-mass, .fk-nord, .fk-skala, .fk-nr {
    animation: none;
    stroke-dashoffset: 0;
    opacity: 1;
  }
}


/* ==========================================================================
   Rundschliff nach dem Vier-Linsen-Audit: eine Welt, ein Motiv, eine Stimme.
   ========================================================================== */

/* Vermessungsstrich über Abschnittstiteln – das Echo der gestrichelten
   Potenziallinie aus der Hero-Flurkarte, auf jeder Seite. */
.abschnitt h2::before, .stadt-seite h2::before {
  content: "";
  display: block;
  width: 52px;
  border-top: 2px dashed var(--katasterlinie);
  margin-bottom: 14px;
  animation: none;
}
.hero h2::before { display: none; }

/* Der Berichtskopf trägt Tinte – ein Gutachten, kein Interface */
.vorschau-kopf { background: var(--tinte) !important; }

/* Kernaussagen sprechen mit der Stimme des Berichts */
.vorschau-kernaussage {
  font-family: var(--schrift-display);
  font-style: italic;
  font-size: 1rem;
}
.antwort-kurz {
  font-family: var(--schrift-display);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
}

/* Haken in Tinte: Grün gehört exklusiv der Ampel – je seltener es auftaucht,
   desto mehr bedeutet ein grünes Ergebnis */
.vertrauen li::before, .haken-liste li::before { color: var(--text) !important; }

/* Belege als Fußnoten eines Gutachtens, nicht als Info-Pillen */
.beleg {
  background: transparent !important;
  border-radius: 0 !important;
  border-left: 2px solid var(--katasterlinie);
  padding: 4px 0 4px 14px !important;
}
.beleg-offen {
  background: transparent !important;
  border-radius: 0 !important;
  border-left: 2px solid var(--rand);
  padding: 4px 0 4px 14px !important;
}

/* Badges sind Stempel, keine SaaS-Pillen */
.karten-badge {
  border-radius: 4px !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem !important;
}
.karten-badge-still { background: var(--tinte) !important; }
.mc-geprueft { border-radius: 3px !important; letter-spacing: 0.06em; font-size: 0.72rem !important; }
.muster-badge { letter-spacing: 0.08em !important; }

/* Ampel-Statusflächen als Lasur der echten Ampelfarben */
.mc-status-ok { background: rgba(30, 122, 60, 0.08) !important; }
.mc-status-fehler { background: rgba(179, 38, 30, 0.07) !important; }
.best-zahlung { background: rgba(30, 122, 60, 0.08); }
.best-zahlung-warnung { background: rgba(199, 119, 0, 0.08) !important; }
.best-hinweis { border-radius: 0 var(--radius) var(--radius) 0 !important; }

/* Preis-Karten in derselben Höhe wie die Nachbarn */
.preis-karte { box-shadow: var(--schatten); }

/* Formulare sprechen die Kartensprache */
.formular { background: var(--flaeche-alt) !important; }

/* Eingaben im Mini-Check verhalten sich wie alle Eingaben */
.mc input[type="text"] {
  transition: border-color var(--flott) var(--ease-out),
              box-shadow var(--flott) var(--ease-out);
}
.mc input[type="text"]:focus { border-color: var(--akzent); }
.mc-frage-block label, .mc-vorschlaege li {
  transition: background-color var(--flott) var(--ease-out);
}
input[type="radio"] { accent-color: var(--akzent); }

/* Fokusring lässt die Knopf-Form in Ruhe */
:focus-visible { border-radius: 0; }
a:focus-visible { border-radius: 4px; }
.btn:focus-visible { border-radius: var(--radius); }

/* Zahlen stehen still – jetzt mit den Selektoren, die wirklich existieren */
.preis { font-variant-numeric: tabular-nums; }

/* Markierter Text: Tinte übers Papier */
::selection { background: var(--tinte); color: var(--papier); }

/* Überschriften und Überzeilen brechen ausgewogen */
.hero h1, .ueberzeile, h2 { text-wrap: balance; }

/* Lange Lesetexte: bequeme Zeilenlänge */
.container.schmal { max-width: 720px; }

/* Brotkrumen mit Luft zur Kopfzeile */
.brotkrumen { margin: 20px 0; }

/* Ampel-Echo vor dem Mini-Check-Titel */
h2 .wortmarke-ampel { vertical-align: middle; margin-right: 8px; }

/* Karten heben sich nur, wo wirklich etwas zu klicken ist */
.schritt:hover, .preis-karte:hover, .analyse-karte:hover {
  transform: none !important;
  box-shadow: var(--schatten) !important;
}
.preis-karte:hover { box-shadow: var(--schatten) !important; }

/* Mikro-Größen auf feste Stufen */
.mc-weg-titel { font-size: 1.06rem !important; }


/* ==========================================================================
   Erscheinen beim Scrollen (erscheinen.js setzt .js-erscheinen und .ist-da).
   Bewegungssprache wie apple.de: weich, 650 ms, einmalig, gestaffelt.

   Drei Lehren aus dem Review stecken hier drin:
   - :where() hält die Versteck-Selektoren auf Spezifität null, sonst schlagen
     ".abschnitt .container > p" und "#faq details" die Aufdeck-Regel — und
     halbe Seiten blieben für immer unsichtbar.
   - `translate` statt `transform`, damit die 0,6°-Kippung der Berichtsvorschau
     (und jeder künftige transform) unberührt bleibt.
   - visibility nimmt Verstecktes aus der Tab-Reihenfolge.
   ========================================================================== */

@media screen {
  .js-erscheinen :where(
    .abschnitt h2,
    .abschnitt .container > p,
    .abschnitt .schmal > p,
    .schritte > .schritt,
    .analysen > .analyse-karte,
    .preise > .preis-karte,
    .hinweis-box,
    .ehrlich-hinweis,
    .beispiel-grid > *,
    .ueber-grid > *,
    #faq details,
    .mc,
    .staedte-tabelle,
    .antwort-box,
    .stadt-links,
    .flurkarte-figur
  ) {
    opacity: 0;
    translate: 0 18px;
    visibility: hidden;
    transition: opacity 650ms var(--ease-out), translate 650ms var(--ease-out);
  }
}

.js-erscheinen .ist-da {
  opacity: 1;
  translate: 0 0;
  visibility: visible;
}

/* Karten einer Reihe treten nacheinander auf. */
.js-erscheinen :where(.schritte > .schritt:nth-child(2),
  .preise > .preis-karte:nth-child(2),
  .analysen > .analyse-karte:nth-child(2),
  .beispiel-grid > :nth-child(2),
  .ueber-grid > :nth-child(2),
  #faq details:nth-of-type(2)) { transition-delay: 90ms; }

.js-erscheinen :where(.schritte > .schritt:nth-child(3),
  .preise > .preis-karte:nth-child(3),
  #faq details:nth-of-type(3)) { transition-delay: 180ms; }

.js-erscheinen :where(.preise > .preis-karte:nth-child(4)) { transition-delay: 270ms; }

.js-erscheinen :where(#faq details:nth-of-type(4)) { transition-delay: 270ms; }
.js-erscheinen :where(#faq details:nth-of-type(5)) { transition-delay: 360ms; }

/* Die schwebende Leiste darf Ankerziele nicht verdecken — gilt für die
   Topbar-Navigation ebenso wie für scrollIntoView der Bestellstrecke. */
html { scroll-padding-top: 92px; }
@media (max-width: 700px) {
  html { scroll-padding-top: 150px; }
}


/* --- Ampel-Legende über dem Mini-Check ------------------------------------- */
.mc-legende {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  font-size: 0.9rem;
  color: var(--text-gedeckt);
}
.mc-legende li { display: flex; align-items: center; gap: 8px; }
.mc-legende .ampel-punkt { width: 12px; height: 12px; flex: none; }

/* Rollen-Auswahl reiht sich bei den Eingabefeldern ein */
.feld select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--rand);
  border-radius: 8px;
  font-family: inherit;
  font-size: 1rem;
  background: var(--flaeche);
  color: var(--text);
}


/* ==========================================================================
   Startseite: die Frage, ein Feld – dahinter die Bebauung
   Alles hier hängt an .hero-start, damit der Bauturbo-Hero mit seiner
   Flurkarte unverändert bleibt.
   ========================================================================== */

.hero-start {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--papier);
  padding: clamp(72px, 12vh, 132px) 0 clamp(84px, 14vh, 152px);
  min-height: min(72vh, 640px);
  display: flex;
  align-items: center;
}
.hero-start > .container { width: 100%; }
.hero-start .hero-inner { display: block; }      /* kein Zweispalter mehr */
.hero-start h1 {
  font-size: clamp(1.65rem, 3.2vw, 2.45rem);
  max-width: 23ch;
  margin: 0 0 26px;
}

/* Der axonometrische Grund. Liegt hinter dem Text und wird zur Textseite hin
   ausgeblendet – ein Hintergrund, der die Überschrift schluckt, ist keiner. */
.hero-grund {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 900ms var(--ease-out);
}
.hero-grund.ist-gezeichnet { opacity: 1; }
.hero-grund canvas {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-mask-image: radial-gradient(78% 130% at 80% 54%, #000 30%, transparent 78%);
          mask-image: radial-gradient(78% 130% at 80% 54%, #000 30%, transparent 78%);
}

/* Parzellengrenzen bleiben Katasterstrich, die Körper Papiertöne. */
.hg-boden { fill: none; stroke: var(--katasterlinie); stroke-width: 1; opacity: 0.55; }
.hg-bestand-d  { fill: #EAE4D8; }
.hg-bestand-w1 { fill: #D8D0C0; }
.hg-bestand-w2 { fill: #C3BAA7; }
.hg-bestand-d, .hg-bestand-w1, .hg-bestand-w2 {
  stroke: var(--katasterlinie);
  stroke-width: 0.9;
  stroke-linejoin: round;
}

/* Das eine Grundstück, um das es geht: Bestand fester, darüber das Potenzial
   als gestrichelte Luft. Das ist das Produkt in einem Bild. */
.hg-hervor .hg-boden { stroke: var(--akzent); stroke-width: 1.6; opacity: 0.85; }
.hg-hervor .hg-bestand-d  { fill: #D7D1C4; }
.hg-hervor .hg-bestand-w1 { fill: #C5BEAE; }
.hg-hervor .hg-bestand-w2 { fill: #B2AA99; }
.hg-pot-d  { fill: rgba(26, 90, 150, 0.16); }
.hg-pot-w1 { fill: rgba(26, 90, 150, 0.26); }
.hg-pot-w2 { fill: rgba(26, 90, 150, 0.36); }
.hg-pot-d, .hg-pot-w1, .hg-pot-w2 {
  stroke: var(--akzent);
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
  stroke-linejoin: round;
}

/* --- Adresseingabe -------------------------------------------------------- */

.start-suche { max-width: 620px; margin: 0 0 14px; }

.start-suche-zeile {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: 999px;
  padding: 7px 7px 7px 18px;
  box-shadow: var(--schatten);
  transition: border-color var(--flott) var(--ease-out),
              box-shadow var(--flott) var(--ease-out);
}
.start-suche-zeile:focus-within {
  border-color: var(--akzent);
  box-shadow: 0 0 0 4px var(--akzent-hell), var(--schatten);
}
.start-suche-pin { display: flex; flex: none; color: var(--text-gedeckt); }
.start-suche input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  font: inherit;
  font-size: 1.05rem;
  color: var(--text);
  padding: 11px 4px;
}
.start-suche input::placeholder { color: var(--text-gedeckt); }
.start-suche .btn { flex: none; border-radius: 999px; padding: 12px 26px; }

.start-fussnote { margin: 0; font-size: 0.9rem; color: var(--text-gedeckt); }

/* Beschriftung, die nur die Vorlesesoftware braucht */
.nur-vorlesen {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 720px) {
  .hero-start h1 { max-width: none; }
  .start-suche-zeile {
    flex-wrap: wrap;
    border-radius: 18px;
    padding: 12px;
    gap: 10px;
  }
  .start-suche input { flex: 1 1 140px; }
  .start-suche .btn { flex: 1 1 100%; }
  .hero-grund .hg {
    -webkit-mask-image: radial-gradient(150% 78% at 68% 100%, #000 8%, transparent 76%);
            mask-image: radial-gradient(150% 78% at 68% 100%, #000 8%, transparent 76%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-grund { transition: none; }
}

/* Die Scheibe lässt sich mit der Maus drehen (hintergrund-3d.js). Die Klassen
   setzt das Skript; hier steht nur, wie es sich anfühlt.

   `touch-action: pan-y pinch-zoom` ist die wichtige Zeile: Ohne sie schluckte
   der Hero auf dem Telefon jede Wischgeste und die Seite ließe sich dort nicht
   mehr scrollen. So bleibt Hoch-und-runter beim Browser, und nur das
   Querziehen gehört der Karte. */
.hero-start { touch-action: pan-y pinch-zoom; }
.hero-start.ist-greifbar { cursor: grab; }
/* Über einem Etikett: antippen, nicht drehen. */
.hero-start.ist-antippbar { cursor: pointer; }
.hero-start.wird-gedreht { cursor: grabbing; user-select: none; }



/* ==========================================================================
   Nummerierte Blöcke: Datenherkunft · Produkt · Wirkung · Nachprüfen
   Aufbau nach dem Vorbild datengetriebener Produktseiten, Gestaltung aber in
   der eigenen Sprache: Amtspapier, Katasterlinie, Tinte. Keine Farbverläufe.
   ========================================================================== */

.block { position: relative; }
.block-nr {
  font-family: var(--schrift-display);
  font-size: 3.2rem;
  line-height: 1;
  color: var(--rand);
  margin: 0 0 4px;
  font-variant-numeric: tabular-nums;
}
.block > .container > .ueberzeile { margin-bottom: 10px; }
.block h2 { max-width: 20ch; margin-bottom: 10px; }
.block-unter {
  max-width: 58ch;
  font-size: 1.05rem;
  color: var(--text-gedeckt);
  margin: 0 0 36px;
}
.block-fuss {
  margin: 32px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--rand);
  max-width: 64ch;
  font-size: 0.95rem;
  color: var(--text-gedeckt);
}

/* --- 01 Quellenkarten ---------------------------------------------------- */

/* --- 01 Quellen als durchlaufendes Band ----------------------------------
   Die Quellen sind eine Aufzählung, kein Raster zum Vergleichen. Deshalb ein
   Band, das ruhig durchläuft: zwei gleiche Listen hintereinander, die zweite
   nur fürs Auge (aria-hidden), verschoben um genau ihre Breite – so entsteht
   kein Sprung. Bei Mauskontakt und bei reduzierter Bewegung steht es still. */

.quellen-band {
  display: flex;
  gap: 14px;
  overflow: hidden;
  margin: 0 -24px;
  padding: 2px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.quellen {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 14px;
  flex: none;
  animation: quellen-lauf 46s linear infinite;
}
.quellen-band:hover .quellen,
.quellen-band:focus-within .quellen { animation-play-state: paused; }

@keyframes quellen-lauf {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-100% - 14px)); }
}

.quelle {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 18px 22px;
  width: 232px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.quelle-kuerzel {
  font-family: var(--schrift-display);
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--text);
}
/* Ausgeschrieben, damit niemand raten muss, wofür BfN oder BORIS steht. */
.quelle-lang {
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--text-gedeckt);
  hyphens: auto;
}
.quelle-was {
  margin-top: auto;
  padding-top: 9px;
  border-top: 1px solid var(--rand);
  font-size: 0.88rem;
  color: var(--text);
}
.quelle-hand {
  background: var(--akzent-hell);
  border-color: var(--akzent);
}
.quelle-hand .quelle-was { border-top-color: var(--akzent); }
.quelle-hand .quelle-kuerzel { color: var(--akzent-dunkel); }

@media (prefers-reduced-motion: reduce) {
  .quellen { animation: none; }
  .quellen-band { overflow-x: auto; }
}

/* --- 02 Ablauf ------------------------------------------------------------ */

.ablauf {
  list-style: none;
  padding: 0;
  margin: 0 0 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px 32px;
  counter-reset: ablauf;
}
.ablauf li { position: relative; padding-left: 44px; }
.ablauf-nr {
  position: absolute;
  left: 0;
  top: 1px;
  width: 30px;
  height: 30px;
  border: 1px solid var(--katasterlinie);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.86rem;
  color: var(--text-gedeckt);
  background: var(--flaeche);
  font-variant-numeric: tabular-nums;
}
.ablauf h3 { margin: 4px 0 6px; font-size: 1.05rem; }
.ablauf p { margin: 0; font-size: 0.95rem; color: var(--text-gedeckt); }

.kennzahlen {
  list-style: none;
  padding: 22px 0 0;
  margin: 0;
  border-top: 1px solid var(--rand);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
}
.kennzahlen b {
  display: block;
  font-family: var(--schrift-display);
  font-size: 1.9rem;
  line-height: 1.1;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.kennzahlen span {
  display: block;
  font-size: 0.88rem;
  color: var(--text-gedeckt);
  margin-top: 3px;
}

/* --- 03 Gegenüberstellung ------------------------------------------------- */

.gegenueber {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}
.spalte {
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 24px 26px 10px;
  background: var(--flaeche);
}
.spalte h3 {
  margin: 0 0 16px;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}
.spalte dl { margin: 0; }
.spalte dt {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-gedeckt);
  margin-top: 14px;
}
.spalte dd {
  margin: 2px 0 0;
  font-size: 1rem;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line, var(--rand));
}
.spalte dd:last-of-type { border-bottom: 0; }
.spalte-alt { background: var(--flaeche-alt); }
.spalte-alt dd { color: var(--text-gedeckt); }
.spalte-wir { border-color: var(--akzent); }
.spalte-wir h3 { color: var(--akzent-dunkel); }

.anker {
  margin-top: 32px;
  padding: 26px 28px;
  border: 1px solid var(--rand);
  border-left: 4px solid var(--akzent);
  border-radius: var(--radius);
  background: var(--akzent-hell);
}
.anker-zahl {
  margin: 0 0 8px;
  font-family: var(--schrift-display);
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--akzent-dunkel);
}
.anker p { max-width: 62ch; margin: 0 0 18px; }
.anker .btn { margin: 0; }

/* --- 04 Belege ------------------------------------------------------------ */

.belege {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.belege li {
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--flaeche);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.belege b {
  font-family: var(--schrift-display);
  font-size: 2rem;
  line-height: 1;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.belege p { margin: 0; font-size: 0.95rem; }
.beleg-fuss {
  margin-top: auto;
  padding-top: 8px;
  font-size: 0.82rem;
  color: var(--text-gedeckt);
}

/* --- Türen ---------------------------------------------------------------- */

.tueren {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.tueren li,
.tueren article {
  border-top: 2px solid var(--akzent);
  padding-top: 16px;
}
.tueren h3 { margin: 0 0 8px; font-size: 1.1rem; }
.tueren p { margin: 0; color: var(--text-gedeckt); font-size: 0.96rem; }

@media (max-width: 620px) {
  .block-nr { font-size: 2.4rem; }
  .spalte { padding: 20px 20px 8px; }
}

/* --- Marken der Quellen ---------------------------------------------------
   Bewusst gezeichnet statt echte Behördenlogos: Bundesadler und Landeswappen
   stehen unter Schutz, und eine Logowand auf einer Verkaufsseite legt eine
   Zusammenarbeit nahe, die es nicht gibt. Die Zeichen zeigen stattdessen, was
   die Quelle liefert – Flurstück, Baukörper, Messpunkte, Wert, Plan, Welle,
   Blatt, Schall, Rathaus. Das ist ehrlicher und trägt die Strichsprache weiter. */

.quelle-marke {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rand);
  border-radius: 7px;
  background: var(--flaeche-alt);
  color: var(--text-gedeckt);
  margin-bottom: 14px;
}
.quelle-marke svg { display: block; width: 26px; height: 26px; }
.quelle-hand .quelle-marke {
  color: var(--akzent-dunkel);
  border-color: var(--akzent);
  background: #fff;
}
.quelle-lizenz {
  display: inline-block;
  margin-top: 2px;
  font-size: 0.74rem;
  color: var(--text-gedeckt);
  opacity: 0.85;
}

/* --- Regler über die Darstellung des Hintergrunds ------------------------- */

.hero-regler { max-width: 470px; margin: 20px 0 0; }
.hero-regler input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  background: none;
  cursor: pointer;
}
.hero-regler input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--katasterlinie), var(--rand), var(--akzent));
}
.hero-regler input[type="range"]::-moz-range-track {
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--katasterlinie), var(--rand), var(--akzent));
}
.hero-regler input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 17px; height: 17px;
  margin-top: -7px;
  border-radius: 50%;
  background: var(--flaeche);
  border: 1.5px solid var(--akzent);
  box-shadow: var(--schatten);
}
.hero-regler input[type="range"]::-moz-range-thumb {
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--flaeche);
  border: 1.5px solid var(--akzent);
}
.hero-regler input[type="range"]:focus-visible { outline: 2px solid var(--akzent); outline-offset: 4px; }

/* Vier Stufen statt drei: Die Beschriftungen stehen jetzt über ihren Marken,
   nicht mehr an den Enden verteilt. Jede bekommt ein Viertel der Breite und
   zentriert sich darin – so bleibt „Höhenmodell" über seiner Rasterstelle,
   auch wenn die Wörter unterschiedlich lang sind. */
.hero-regler-stufen {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  margin: 3px 0 0;
  font-size: 0.6rem;
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text-gedeckt);
  /* Lange Wörter dürfen umbrechen: „Höhenmodell" und „Schattenlauf" passen
     sonst nicht in ein Fünftel der Breite. Zwei Zeilen sind besser als
     Wörter, die ineinanderlaufen. */
  overflow-wrap: anywhere;
}
.hero-regler-stufen span { text-align: center; }
.hero-regler-stufen span:first-child { text-align: left; }
.hero-regler-stufen span:last-child { text-align: right; }
.hero-regler-stand {
  margin: 6px 0 0;
  font-size: 0.86rem;
  color: var(--akzent-dunkel);
}

/* Namensnennung für den Hintergrund: Pflicht bei OpenStreetMap, und zugleich
   der erste Beleg der Seite dafür, dass jede Darstellung ihre Quelle nennt. */
.hero-herkunft {
  margin: 10px 0 0;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--text-gedeckt);
  max-width: 46ch;
}

/* ==========================================================================
   Hero mittig: großer Kreis im Grund, Text davor
   Der Schleier liegt zwischen beidem. Ohne ihn kämpft die Überschrift gegen
   Flurstücksgrenzen und Messpunkte – mit ihm bleibt beides lesbar.
   ========================================================================== */

/* Der Text sitzt oben, die Stadt darunter. Beides zusammen braucht mehr
   Höhe als ein gewöhnlicher Hero – sonst überdeckt der Schriftblock genau
   das Modell, das er ankündigt. */
.hero-start {
  /* Der Hero füllt das Fenster unter der Kopfleiste. Keine Obergrenze in
     Pixeln: Auf einem großen Bildschirm soll die Darstellung mitwachsen,
     nicht in der Mitte stehenbleiben. svh statt vh, damit die Adressleiste
     auf dem Telefon nicht dauernd die Höhe umwirft. */
  --kopfleiste: 75px;
  min-height: calc(100svh - var(--kopfleiste));
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  padding-top: clamp(40px, 5vh, 76px);
  padding-bottom: clamp(20px, 3vh, 40px);
}
@supports not (height: 100svh) {
  .hero-start { min-height: calc(100vh - var(--kopfleiste)); }
}
.hero-start .hero-inner { text-align: center; }

/* Der Fuß hält den Regler unter der Scheibe. Die Höhe, die er belegt,
   nimmt sich das Modell beim Einpassen als FUSSRAUM heraus – beides muss
   zusammenpassen, sonst steht der Regler auf den Häusern. */
.hero-fuss {
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.hero-start h1 { max-width: 20ch; margin-left: auto; margin-right: auto; }
.hero-start .start-suche { margin-left: auto; margin-right: auto; }
.hero-start .start-fussnote,
.hero-start .hero-herkunft { margin-left: auto; margin-right: auto; }
.hero-start .hero-regler { margin: 0 auto; text-align: center; }
.hero-start .hero-herkunft { max-width: 54ch; }

/* Der Grund bekommt statt der seitlichen Maske einen weichen Rand ringsum. */
/* Keine Maske mehr: Der Maßstab ist so gewählt, dass die Scheibe vollständig
   ins Bild passt. Eine Maske würde genau das wieder wegnehmen. */
.hero-grund canvas { -webkit-mask-image: none; mask-image: none; }

/* Die Fußnote liegt auf dem Modell. Statt eines Schleiers darunter bekommt
   sie einen schmalen Papierrand um die Buchstaben: Der ist nur dort, wo
   Schrift ist, und bleibt als Fläche unsichtbar. Vier Schatten statt eines,
   damit der Rand ringsum gleich dick ist. */
.hero-start .start-fussnote {
  color: var(--text);
  font-weight: 500;
  /* Mehrfach übereinandergelegt, damit der Rand auch über dem Höhenmodell
     trägt – dort liegen kräftige Orange- und Blautöne direkt hinter der
     Schrift. Ein einzelner Schatten reichte dafür nicht. */
  text-shadow:
    0 0 3px var(--papier), 0 0 3px var(--papier),
    0 0 6px var(--papier), 0 0 6px var(--papier),
    0 0 10px var(--papier);
}

/* Kein Schleier mehr hinter der Schrift. Er lag als heller Kreis über dem
   Modell und war als Fleck zu sehen, sobald der Hintergrund dunkler wurde.
   Die Überschrift steht jetzt direkt auf dem Modell; lesbar bleibt sie, weil
   sie dunkle Tinte auf hellem Papier ist und weil die Scheibe unter dem
   Suchfeld beginnt, nicht darüber. */

@media (max-width: 720px) {
  /* Auf dem Telefon reicht ein Bildschirm nicht für Überschrift, Suchfeld,
     Modell und Regler. Der Hero darf deshalb etwas über die Kante hinaus –
     ein zu kleines Modell wäre schlechter als ein bisschen Scrollen. */
  .hero-start {
    min-height: max(calc(100svh - var(--kopfleiste)), 680px);
    padding-bottom: 20px;
  }
  .hero-start h1 { font-size: clamp(1.45rem, 6vw, 1.8rem); margin-bottom: 20px; }
  /* Vier Stufen auf 375 px: Die Wörter stoßen sonst aneinander. */
  /* Auf 375 px bricht „Schattenlauf" in Versalien mitten im Wort um. Klein-
     geschrieben ist es schmal genug und bleibt in einer Zeile. */
  .hero-regler-stufen {
    font-size: 0.58rem;
    letter-spacing: 0;
    gap: 2px;
    text-transform: none;
    overflow-wrap: normal;
  }
  .hero-herkunft { font-size: 0.72rem; }
}

/* --- Die gezeichnete Flurkarte als Abbildung im Produktabschnitt ----------
   Sie hing früher im Hero. Dort ist jetzt der Potsdamer Platz, hier erklärt
   sie in einem Bild, was die Schritte 3 und 4 in Worten sagen. Die Striche
   zeichnen sich erst, wenn die Abbildung in den Blick kommt – sonst wäre die
   Bewegung vorbei, bevor jemand sie sieht. */

.flurkarte-figur {
  margin: 8px auto 40px;
  max-width: 520px;
  text-align: center;
}
.flurkarte-figur figcaption {
  margin-top: 12px;
  font-size: 0.88rem;
  color: var(--text-gedeckt);
  max-width: 46ch;
  margin-left: auto;
  margin-right: auto;
}

@media screen {
  .js-erscheinen .flurkarte-figur :where(.fk-linien path, .fk-flurstueck,
    .fk-bestand, .fk-potenzial, .fk-mass, .fk-nr, .fk-plus, .fk-nord, .fk-skala) {
    animation-play-state: paused;
  }
  .js-erscheinen .flurkarte-figur.ist-da :where(.fk-linien path, .fk-flurstueck,
    .fk-bestand, .fk-potenzial, .fk-mass, .fk-nr, .fk-plus, .fk-nord, .fk-skala) {
    animation-play-state: running;
  }
}

/* --- Adressvorschläge im Suchfeld ----------------------------------------
   Die Liste hängt unter dem Feld und darf über den Hero hinausragen, deshalb
   absolut positioniert. Der Kontrast ist bewusst hoch: Sie liegt über einem
   gezeichneten Hintergrund und muss sich davon lösen. */

.start-suche { position: relative; }

.start-vorschlaege {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 6px;
  list-style: none;
  text-align: left;
  background: #fff;
  border: 1px solid var(--rand);
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(20, 34, 46, 0.16);
  max-height: 320px;
  overflow-y: auto;
}

.start-vorschlag {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 14px;
  border-radius: 9px;
  cursor: pointer;
}
.start-vorschlag.ist-gewaehlt { background: var(--akzent-hell); }

.start-vorschlag-haupt {
  font-size: 0.98rem;
  color: var(--text);
}
.start-vorschlag-neben {
  font-size: 0.83rem;
  color: var(--text-gedeckt);
}
.start-vorschlag.ist-gewaehlt .start-vorschlag-haupt { color: var(--akzent-dunkel); }

/* Dieselbe Straße in mehreren Orten: kein Eintrag, ein Rat. */
.start-vorschlag-hinweis {
  cursor: default;
  margin-top: 4px;
  border-top: 1px solid var(--rand);
  border-radius: 0;
  font-size: 0.83rem;
  color: var(--text-gedeckt);
}

@media (max-width: 720px) {
  .start-vorschlaege { max-height: 260px; }
}


/* --- Tageszeit ------------------------------------------------------------
   Zweiter Regler unter dem ersten, bewusst schmaler und leiser: Der erste
   entscheidet, was man sieht, dieser nur, in welchem Licht. */

.hero-sonne { max-width: 330px; margin: 14px auto 0; }
/* Im Schattenlauf führt die Seite die Zeit, nicht der Finger. Der Regler
   bleibt sichtbar, damit man sieht, wo im Tag man ist – aber er nimmt keine
   Eingabe mehr an, sonst kämpfte man gegen die Animation. */
.hero-sonne.laeuft input[type="range"] { cursor: default; opacity: 0.75; }
.hero-sonne.laeuft .hero-sonne-stand { color: var(--akzent-dunkel); }
.hero-sonne input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  background: transparent;
  cursor: pointer;
}
.hero-sonne input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #7E8CA6 0%, #E9C77A 26%, #FAF6EC 50%, #E9B472 76%, #7E8CA6 100%);
}
.hero-sonne input[type="range"]::-moz-range-track {
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #7E8CA6 0%, #E9C77A 26%, #FAF6EC 50%, #E9B472 76%, #7E8CA6 100%);
}
.hero-sonne input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 13px;
  height: 13px;
  margin-top: -5px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--akzent);
  box-shadow: 0 1px 3px rgba(20, 34, 46, 0.22);
}
.hero-sonne input[type="range"]::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--akzent);
}
.hero-sonne input[type="range"]:focus-visible { outline: 2px solid var(--akzent); outline-offset: 4px; }
.hero-sonne-stand {
  margin: 2px 0 0;
  font-size: 0.78rem;
  color: var(--text-gedeckt);
  text-align: center;
}

/* ==========================================================================
   Kopfleiste mit Bereichen statt Sprungmarken
   Die alte Leiste zeigte Anker der Startseite ("#analysen"). Sobald es eigene
   Bereiche gibt, muss sie überall dieselbe sein und sagen, wo man steht.
   Gesetzt wird sie von kopf_setzen.py aus einer einzigen Quelle.
   ========================================================================== */

.topbar nav a[aria-current="page"] {
  color: var(--akzent-dunkel);
  font-weight: 600;
}
/* Anmelden steht neben dem Hauptknopf und soll ihm nicht Konkurrenz machen. */
.topbar-leise { color: var(--text-gedeckt); }

/* Der Schalter erscheint erst, wenn die Leiste zu eng wird. Ohne JavaScript
   bleibt die Navigation sichtbar – deshalb ist er im HTML versteckt und wird
   vom Skript eingeblendet, nicht umgekehrt. */
.topbar-schalter {
  display: none;
  appearance: none;
  border: 1px solid var(--rand);
  border-radius: 9px;
  background: var(--flaeche);
  padding: 9px 11px;
  cursor: pointer;
  color: var(--text);
}
.topbar-striche { display: block; width: 18px; }
.topbar-striche i {
  display: block;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
}
.topbar-striche i + i { margin-top: 4px; }

@media (max-width: 860px) {
  .topbar-inner { flex-wrap: nowrap; }
  .hat-schalter .topbar-schalter { display: block; }
  .hat-schalter .topbar nav,
  .hat-schalter #topbar-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6px 20px 16px;
    background: var(--papier);
    border-bottom: 1px solid var(--rand);
  }
  .hat-schalter #topbar-nav.ist-offen { display: flex; }
  .hat-schalter #topbar-nav a {
    padding: 12px 2px;
    border-bottom: 1px solid var(--rand);
  }
  .hat-schalter #topbar-nav a:last-child {
    border-bottom: 0;
    margin-top: 12px;
    text-align: center;
  }
}

/* ==========================================================================
   Ausklappmenüs in der Kopfleiste
   Als <details>/<summary> gebaut: Das ist ohne JavaScript bedienbar, mit
   Tastatur erreichbar und von Vorlesern verstanden. Ein eigenes Konstrukt
   aus <div> und JS wäre hübscher zu animieren und schlechter in allem sonst.
   ========================================================================== */

.topbar nav { position: relative; }

/* Der FAQ-Stil gilt für jedes <details> auf der Seite – hier muss er
   zurückgenommen werden, sonst sähe jeder Menüpunkt aus wie eine
   aufklappbare Frage samt Pluszeichen. */
.topbar .menue {
  position: relative;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
}
.topbar .menue::details-content {
  interpolate-size: auto;
  block-size: auto;
  overflow: visible;
  transition: none;
}
.menue > summary {
  padding-right: 0;
  position: static;
  font-weight: 400;
  list-style: none;
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--text-gedeckt);
  padding: 6px 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
}
.menue > summary::-webkit-details-marker { display: none; }
.menue > summary::after {
  content: "";
  position: static;
  transform: none;
  font-size: 0;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  rotate: 45deg;
  translate: 0 -2px;
  transition: rotate 160ms var(--ease-out);
}
.menue[open] > summary::after { rotate: -135deg; translate: 0 1px; }
.menue > summary:hover { color: var(--akzent); }
.menue.ist-hier > summary { color: var(--akzent-dunkel); font-weight: 600; }

.menue-tafel {
  position: absolute;
  top: calc(100% + 10px);
  left: -14px;
  z-index: 40;
  display: flex;
  gap: 28px;
  min-width: 280px;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--rand);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(20, 34, 46, 0.14);
}
.menue-gruppe { display: flex; flex-direction: column; min-width: 220px; }
.menue-titel {
  margin: 0 0 6px;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-gedeckt);
}
.menue-tafel a {
  display: block;
  padding: 9px 10px;
  border-radius: 9px;
  text-decoration: none;
}
.menue-tafel a:hover { background: var(--flaeche-alt, #F3F0E8); }
.menue-wort { display: block; color: var(--text); font-size: 0.96rem; }
.menue-erklaerung {
  display: block;
  margin-top: 1px;
  color: var(--text-gedeckt);
  font-size: 0.82rem;
}

@media (max-width: 860px) {
  /* Im Klappmenü stehen die Tafeln im Fluss, nicht schwebend – sonst ragen
     sie aus dem Bildschirm. */
  .menue-tafel {
    position: static;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding: 4px 0 8px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }
  .menue-gruppe { min-width: 0; }
  .hat-schalter #topbar-nav .menue { border-bottom: 1px solid var(--rand); }
  .hat-schalter #topbar-nav .menue a { border-bottom: 0; padding: 8px 0; }
}

/* ==========================================================================
   Trichter „Grundstück kostenlos prüfen"
   Erst die Absicht, dann die Adresse. Die Reihenfolge ist der Punkt.
   ========================================================================== */

.hero-pruefen { padding-bottom: 8px; }

.trichter-zaehler {
  margin: 0 0 6px;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-gedeckt);
}
.trichter-schritt h2 { margin: 0 0 6px; outline: none; }
.trichter-unter { margin: 0 0 22px; color: var(--text-gedeckt); }

.trichter-wahl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}
.absicht {
  appearance: none;
  text-align: left;
  cursor: pointer;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 16px 18px;
  transition: border-color 140ms var(--ease-out), background 140ms var(--ease-out);
}
.absicht:hover,
.absicht:focus-visible {
  border-color: var(--akzent);
  background: var(--akzent-hell);
}
.absicht-titel {
  display: block;
  font-family: var(--schrift-display);
  font-size: 1.04rem;
  color: var(--text);
}
.absicht-text {
  display: block;
  margin-top: 3px;
  font-size: 0.88rem;
  color: var(--text-gedeckt);
}

.trichter-aus { margin: 18px 0 0; }
.verweis {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--text-gedeckt);
  font-size: 0.9rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.verweis:hover { color: var(--akzent); }

#pruef-suche { max-width: 620px; margin: 0; position: relative; }

/* ==========================================================================
   Anmeldekasten
   ========================================================================== */

.anmeldekasten {
  max-width: 460px;
  padding: 26px 28px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
}
.anmeldekasten .feld { margin: 0 0 16px; }
.anmeldekasten .btn { width: 100%; }
.anmeldekasten .klein { margin: 14px 0 0; color: var(--text-gedeckt); }

/* ==========================================================================
   Datenspiegel im Ergebnis der Ersteinschätzung

   Zeigt je Datensatz drei mögliche Zustände. Die Unterscheidung ist der Kern
   der Sache und darf nie verwischen:

     offen      – wir haben es, Sie sehen es jetzt
     gesperrt   – wir haben es, es steht im Bericht
     nicht da   – für diese Gemeinde liegt nichts vor

   Verschwommen wird ausschließlich der zweite Fall, und verschwommen ist
   immer ein PLATZHALTER, nie ein echter Wert. Ein echter Wert hinter einem
   CSS-Filter wäre im Quelltext lesbar – das wäre kein Teaser, sondern eine
   Falle für uns selbst.
   ========================================================================== */

.spiegel {
  display: grid;
  /* 170 statt 212 px seit 01.10.2026: Mit 34 statt 11 Kacheln passen im
     schmalen Fragebogen so drei nebeneinander statt zwei. */
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.spiegel-kachel {
  position: relative;
  padding: 10px 12px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
}
.spiegel-kachel.ist-offen { border-color: rgba(58, 123, 192, 0.35); }
.spiegel-kachel.ist-leer { background: transparent; border-style: dashed; }

/* Bezeichnung in normaler Schreibung, nicht in Versalien (seit 01.10.2026):
   In 170 px breiten Spalten brachen Versalien fast jede Bezeichnung um, und
   37 Kacheln wurden über 3.600 px hoch. */
.spiegel-was {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
  margin-bottom: 4px;
}
.spiegel-wert {
  display: block;
  font-family: var(--schrift-display);
  font-size: 1.04rem;
  line-height: 1.3;
  color: var(--text);
  overflow-wrap: anywhere;
}
.spiegel-quelle {
  display: block;
  margin-top: 5px;
  font-size: 0.74rem;
  line-height: 1.35;
  color: var(--text-gedeckt);
}

/* Der Platzhalter. Blockzeichen plus Weichzeichner: Auch wer den Quelltext
   liest, findet hier nur Blöcke. */
.spiegel-verdeckt {
  display: block;
  font-family: var(--schrift-display);
  font-size: 0.92rem;
  line-height: 1.35;
  color: var(--text);
  filter: blur(4px);
  opacity: 0.55;
  user-select: none;
}

.spiegel-marke {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  background: var(--akzent-hell);
  color: var(--akzent-dunkel);
}
.spiegel-kachel.ist-leer .spiegel-marke {
  background: transparent;
  border: 1px solid var(--rand);
  color: var(--text-gedeckt);
}

.spiegel-fuss {
  margin: 16px 0 0;
  font-size: 0.86rem;
  color: var(--text-gedeckt);
}
/* Sprung zum Formular über der Liste: Mit 37 Kacheln steht es eine gute
   Bildschirmhöhe tiefer als vorher. */
.spiegel-weiter { margin: 8px 0 0; font-size: 0.92rem; font-weight: 600; }

/* Gruppen nach den Kapiteln des Berichts (seit 01.10.2026). Vorher stand
   alles in einem Raster; mit 29 Kacheln braucht der Leser Zwischentitel, um
   zu sehen, welcher Teil des Berichts wofür steht. */
.spiegel-gruppe {
  margin: 28px 0 0;
  font-family: var(--schrift-display);
  font-size: 1.02rem;
  color: var(--text);
}
.spiegel-unter {
  margin: 3px 0 0;
  font-size: 0.86rem;
  color: var(--text-gedeckt);
}

/* Platzhalter für Flurkarte und 3D-Modell: ein Muster aus Verläufen, kein
   Bild. Wie bei den Blockzeichen steht nichts Echtes dahinter – auch nicht
   im Quelltext. */
.spiegel-bild {
  height: 58px;
  margin-top: 2px;
  border-radius: 4px;
  opacity: 0.75;
}
.spiegel-bild-karte {
  background:
    linear-gradient(90deg, transparent 0 8%, #DFD9CB 8% 30%, transparent 30% 36%,
      rgba(199, 119, 0, 0.5) 36% 58%, transparent 58% 64%, #DFD9CB 64% 92%,
      transparent 92%) 0 7px / 100% 19px no-repeat,
    linear-gradient(90deg, #DFD9CB 0 22%, transparent 22% 28%, rgba(26, 90, 150, 0.3) 28% 50%,
      transparent 50% 56%, #DFD9CB 56% 80%, transparent 80%) 0 32px / 100% 19px no-repeat,
    var(--flaeche-alt);
}
/* Flurkarte und 3D-Modell in zwei breiten Spalten, die drei Wege über die
   ganze Zeile: Bilder brauchen Fläche, und die Wege sind ein Vergleich. */
.spiegel.ist-bilder { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.spiegel.ist-bilder .spiegel-bild { height: 84px; }
.spiegel-kachel.ist-breit { grid-column: 1 / -1; }

/* Auf dem Telefon zwei schmale Spalten und ohne Quellenzeile. Im
   Fragebogen bleiben dort rund 235 px Breite; eine Spalte machte 37 Kacheln
   über 6.000 px hoch, Zeilen (Bezeichnung links, Wert rechts) brachen bei
   der Breite beide Hälften um, und die Quellenzeile allein kostete rund
   1.000 px (Messung im Browser, 01.10.2026). Dass jeder Wert im Bericht mit
   Quelle steht, sagt der Satz unter den Kacheln. */
@media (max-width: 560px) {
  .mc-teilergebnis { padding: 12px 10px; }
  .spiegel-gruppe { margin-top: 20px; }
  .spiegel-unter { font-size: 0.8rem; }
  .spiegel, .spiegel.ist-bilder { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .spiegel-kachel { padding: 8px 9px; }
  .spiegel-was { font-size: 0.76rem; }
  .spiegel-wert { font-size: 0.9rem; }
  .spiegel-verdeckt { font-size: 0.84rem; }
  .spiegel.ist-bilder .spiegel-bild { height: 58px; }
  .spiegel-quelle { display: none; }
  .spiegel-marke { font-size: 0.66rem; padding: 2px 6px; }
}
}

.spiegel-bild-modell {
  background:
    linear-gradient(#DFD9CB, #DFD9CB) 6% 100% / 16% 62% no-repeat,
    linear-gradient(rgba(26, 90, 150, 0.3), rgba(26, 90, 150, 0.3)) 30% 100% / 18% 88% no-repeat,
    linear-gradient(rgba(199, 119, 0, 0.5), rgba(199, 119, 0, 0.5)) 56% 100% / 20% 76% no-repeat,
    linear-gradient(#DFD9CB, #DFD9CB) 86% 100% / 16% 54% no-repeat,
    var(--flaeche-alt);
}

@media (prefers-reduced-motion: reduce) {
  .spiegel-verdeckt { filter: blur(3px); }
}

/* ── Messschein ───────────────────────────────────────────────────────────
   Der Kasten für die Sicherheitsprüfung vor der Messung. Er ist meistens
   leer — Turnstile zeigt in der Regel nichts an. Deshalb nimmt er auch
   keinen Platz weg, solange nichts darin steht: kein Loch im Layout für
   etwas, das gar nicht kommt. */
.messschein:empty { display: none; }

.messschein {
  margin: 0 0 var(--luft-s, 12px);
}

.messschein-wort {
  color: var(--text-leise, #6B6357);
  margin: 0 0 6px;
}

.messschein iframe {
  max-width: 100%;
}

/* Die Frage, die eine Preisstufe beantwortet. Sie steht über dem Preis, weil
   sie ihn begründet: Bezahlt wird eine Antwort, nicht eine Seitenzahl. */
.preis-frage {
  font-style: italic;
  color: var(--text-leise, #6B6357);
  margin: 0 0 10px;
  font-size: 0.95rem;
}

/* Lange Fachwörter in schmalen Preisspalten. Ohne das reißt ein Wort wie
   „Wirtschaftlichkeitsbetrachtung“ die Karte auf. */
.preis-karte h3,
.preis-karte .haken-liste li { overflow-wrap: break-word; hyphens: auto; }

/* --- Konto: Vorgangskarten --------------------------------------------------- */
.vorgang {
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin: 0 0 18px;
  background: var(--flaeche);
}
.vorgang h3 { margin: 4px 0 8px; font-size: 1.25rem; }
.vorgang-bestellung { background: var(--flaeche-alt); }
.vorgang-angaben {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 16px;
  margin: 12px 0 16px;
  font-size: 0.95rem;
}
.vorgang-angaben dt { color: var(--text-gedeckt); }
.vorgang-angaben dd { margin: 0; }
.vorgang .cta-reihe { margin: 0; }
@media (max-width: 620px) {
  .vorgang-angaben { grid-template-columns: 1fr; gap: 2px; }
  .vorgang-angaben dt { margin-top: 6px; }
}


/* ==========================================================================
   Stufe 3 – klar und hell (01.10.2026)

   Mirko: „vom Stil näher an buildability.us … professionell clean". Die
   Grundwerte stehen oben in :root (weiß, kühles Grau, ein Blau, Sans).
   Hier stehen die Stellen, die vorher eigene Papierfarben trugen, und die
   neue Startseite: Hero als blaue Karte, Beispieltafel, Ergebnis-Tafel.
   Steht bewusst am Ende der Datei – die Reihenfolge entscheidet.
   ========================================================================== */

/* --- Rahmen ---------------------------------------------------------------- */

h1, h2, h3 { font-weight: 650; letter-spacing: -0.022em; }
h2 { font-size: clamp(1.55rem, 2.5vw, 2.1rem); line-height: 1.15; }

.topbar {
  background: rgba(255, 255, 255, 0.86);
  border-bottom-color: rgba(15, 23, 42, 0.07);
}
.topbar nav a, .menue > summary { color: #3B4556; }
.topbar nav a.btn-klein { color: #fff; }

.btn { border-radius: 999px; }
.btn-klein { border-radius: 999px; padding: 9px 18px; }
.btn-primaer { box-shadow: 0 1px 2px rgba(29, 78, 216, 0.25); }

.abschnitt-alt { background: var(--flaeche-alt); }
.block-nr { color: #D5DCE6; font-weight: 600; }
.formular { background: var(--flaeche-alt); }
.menue-tafel a:hover { background: var(--flaeche-alt); }
.spiegel-kachel.ist-offen { border-color: rgba(37, 99, 235, 0.35); }
.quelle-kuerzel, .kennzahlen b, .belege b, .anker-zahl { font-weight: 650; }

/* Die Fußzeile wird hell: ein Rand statt einer Tintenfläche. */
.fusszeile {
  background: var(--flaeche-alt);
  color: var(--text-gedeckt);
  border-top: 1px solid var(--rand);
}
.fusszeile-inner { border-bottom-color: var(--rand); }
.fusszeile .klein { color: var(--text-gedeckt); }
.fusszeile a { color: var(--text-gedeckt); }
.fusszeile a:hover { color: var(--akzent); }
.fusszeile .todo { color: var(--rot); }
.wortmarke-hell { color: var(--text); }

/* Die Flurkarte im Produktabschnitt: Zahlen ohne Kursiv-Serife. */
.fk-nr text, .fk-nord text, .fk-skala text { font-style: normal; font-size: 12px; }

/* --- Startseite: der Hero als blaue Karte -------------------------------- */

.hero-start {
  --kopfleiste: 75px;
  margin: 12px 12px 0;
  border-radius: 28px;
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(96, 165, 250, 0.35), transparent 70%),
    linear-gradient(180deg, #1D4ED8 0%, #1E40AF 55%, #172E7A 100%);
  color: #fff;
  min-height: calc(100svh - var(--kopfleiste) - 12px);
  padding-top: clamp(48px, 8vh, 96px);
}
@supports not (height: 100svh) {
  .hero-start { min-height: calc(100vh - var(--kopfleiste) - 12px); }
}

/* Das Modell bleibt dasselbe, nur getönt: Seine Helligkeit legt sich auf
   das Blau der Karte. Das Mischen muss am Kasten sitzen, nicht an der
   Leinwand – der Kasten bildet eine eigene Ebene, in ihm gäbe es nichts
   zum Mischen. */
.hero-start .hero-grund { mix-blend-mode: luminosity; }
/* 01.10.2026 von 0.5 auf 0.82: Das Modell war faktisch unsichtbar — drei
   Dämpfer übereinander (halbe Deckkraft, Luminanz-Mischung, Schleier). Die
   Mischung bleibt, sie hält das Modell im Blau der Karte; nur die Deckkraft
   steigt. Lesbarkeit der Schrift sichert weiterhin der Schleier unten. */
.hero-start .hero-grund.ist-gezeichnet { opacity: 0.82; }

/* Schleier zwischen Modell und Text: dunkler dort, wo die Schrift steht,
   frei am unteren Rand, wo das Modell trägt. ::after liegt in der
   Zeichenreihenfolge nach dem Grund, mit z-index -1 aber unter dem Text. */
.hero-start::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(62% 48% at 50% 36%, rgba(23, 46, 122, 0.54), rgba(23, 46, 122, 0) 72%),
    linear-gradient(180deg, rgba(29, 78, 216, 0.35) 0%, rgba(29, 78, 216, 0) 40%);
}

.hero-dach {
  margin: 0 0 18px;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.78);
}
.hero-start h1 {
  color: #fff;
  font-size: clamp(2rem, 4.3vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  max-width: none;
  margin: 0 auto 20px;
  text-wrap: balance;
}
.hero-start h1 .h1-zeile { display: block; }
.hero-unter {
  max-width: 58ch;
  margin: 0 auto 30px;
  font-size: 1.08rem;
  /* Volles Weiß plus Halo seit dem 01.10.2026: Auf dem Telefon steht dieser
     Absatz direkt auf dem Modell, seit dessen Deckkraft gestiegen ist. Auf dem
     Breitbild schadet der Schatten nicht, dort liegt er ohnehin im Schleier. */
  color: rgba(255, 255, 255, 0.95);
  text-shadow:
    0 1px 2px rgba(10, 22, 70, 0.8),
    0 0 12px rgba(10, 22, 70, 0.65);
}
.hero-start .start-suche-zeile {
  border: 0;
  padding: 7px 7px 7px 20px;
  box-shadow: 0 18px 50px rgba(8, 20, 60, 0.35);
}
.hero-start .start-suche-zeile:focus-within {
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.28), 0 18px 50px rgba(8, 20, 60, 0.35);
}
/* Diese Zeile steht als einzige direkt auf dem Modell. Seit dessen Deckkraft
   am 01.10.2026 von 0,5 auf 0,82 stieg, trug der alte Schatten sie nicht mehr:
   zwei enge Halos statt eines weichen, dazu volles Weiß. Billiger als das
   Modell wieder abzudunkeln. */
.hero-start .start-fussnote {
  color: #fff;
  font-weight: 400;
  text-shadow:
    0 1px 2px rgba(10, 22, 70, 0.85),
    0 0 12px rgba(10, 22, 70, 0.7);
}
/* Platz unter der Scheibe für die Beispieltafel, die über die Kante ragt.
   Das Modell misst diesen Fuß (gemessen(".hero-fuss") in hintergrund-3d.js)
   und hält ihn frei. */
.hero-start .hero-fuss { height: 84px; }

@media (max-width: 720px) {
  .hero-start { margin: 8px 8px 0; border-radius: 22px; }
  .hero-start h1 { font-size: clamp(1.75rem, 8.4vw, 2.3rem); }
  .hero-unter { font-size: 1rem; }
  .hero-start .start-suche-zeile { border-radius: 18px; padding: 10px; }
  .hero-start .hero-fuss { height: 56px; }
}

/* --- Verdeckte Werte: ein Balken je Block, nie der Wert selbst ----------- */

.verdeckt {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 3px;
  font-weight: 500;
  color: #8EA6CC;
  line-height: 1.3;
}
.verdeckt-schloss { flex: none; color: #8AA4CF; margin-right: 5px; }
.balken {
  display: inline-block;
  width: calc(var(--n, 3) * 0.55em + 0.45em);
  height: 1em;
  border-radius: 3px;
  background: #BCD2FA;
  vertical-align: -0.14em;
}
.marke-klein {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  background: #FFF4DE;
  color: #8A5300;
}
.marke-klein.ist-berlin { background: #EEF1F5; color: var(--text-gedeckt); }
.fehlt {
  color: var(--text-gedeckt);
  font-weight: 400;
  border-bottom: 1px dashed var(--katasterlinie);
}

/* --- Die Faktentabelle (Beispiel und Ergebnis) --------------------------- */

.fakten {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
  font-variant-numeric: tabular-nums;
}
.fakten thead th {
  text-align: left;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-gedeckt);
  padding: 0 10px 8px;
}
.fakten .gruppe th {
  text-align: left;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-gedeckt);
  padding: 24px 10px 8px;
  border-bottom: 1px solid var(--rand);
}
.fakten .gruppe:first-child th { padding-top: 6px; }
.fakten td {
  padding: 11px 10px;
  border-bottom: 1px solid #EEF1F5;
  vertical-align: top;
}
.fakten .ft-feld { color: #3B4556; width: 32%; }
.fakten .ft-wert { color: var(--text); font-weight: 600; width: 38%; }
.fakten .ft-quelle { color: var(--text-gedeckt); font-size: 0.82rem; }
.fakten tr.ist-gesperrt { background: #F8FAFF; }
.fakten tr.ist-leer .ft-feld { color: var(--text-gedeckt); }
.fakten tr.ist-neu td { animation: zeile-ein 420ms var(--ease-out) both; }
.wartet {
  display: inline-block;
  width: 9em;
  max-width: 100%;
  height: 0.9em;
  border-radius: 4px;
  vertical-align: -0.1em;
  background: linear-gradient(90deg, #EEF2F7 0%, #DDE5F0 50%, #EEF2F7 100%);
  background-size: 200% 100%;
  animation: wartet 1.1s ease-in-out infinite;
}
@keyframes wartet { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@keyframes zeile-ein {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 720px) {
  .fakten, .fakten tbody, .fakten tr, .fakten td, .fakten th { display: block; width: auto; }
  .fakten thead { display: none; }
  .fakten tr:not(.gruppe) {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
    padding: 10px 6px;
    border-bottom: 1px solid #EEF1F5;
  }
  .fakten td { padding: 0; border: 0; }
  .fakten .ft-feld, .fakten .ft-wert { width: auto; }
  .fakten .ft-feld { font-size: 0.82rem; color: var(--text-gedeckt); }
  .fakten .ft-quelle { font-size: 0.78rem; }
}

/* --- Beispieltafel unter dem Hero ----------------------------------------- */

.beispiel-huelle {
  position: relative;
  z-index: 2;
  margin-top: -92px;
  padding-bottom: 24px;
}
.beispiel-tafel {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 36px;
  align-items: center;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: 24px;
  padding: 30px 34px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 28px 70px rgba(15, 23, 42, 0.14);
}
.flur-bild { text-align: center; }
.flur-form { display: block; width: 100%; max-width: 170px; height: auto; margin: 0 auto 10px; }
.flur-form .flur-umriss { fill: rgba(37, 99, 235, 0.10); stroke: var(--akzent); stroke-width: 2; stroke-linejoin: round; }
.flur-form .flur-haus { fill: #CBD5E1; }
.flur-flaeche { margin: 0; font-size: 1.9rem; font-weight: 650; letter-spacing: -0.02em; line-height: 1.1; }
.flur-wort { margin: 2px 0 0; font-size: 0.85rem; color: var(--text-gedeckt); }
.beispiel-marke {
  display: inline-block;
  margin: 0 0 8px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--flaeche-alt);
  border: 1px solid var(--rand);
  font-size: 0.78rem;
  color: var(--text-gedeckt);
}
.beispiel-titel { font-size: 1.3rem; margin: 0; }
.beispiel-unter { margin: 2px 0 12px; color: var(--text-gedeckt); font-size: 0.92rem; }
.beispiel-fuss {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 14px 0 0;
  font-size: 0.9rem;
  color: var(--text-gedeckt);
}
.beispiel-fuss a { font-weight: 600; text-decoration: none; }

@media (max-width: 820px) {
  .beispiel-huelle { margin-top: -52px; }
  .beispiel-tafel { grid-template-columns: 1fr; gap: 18px; padding: 22px 18px; border-radius: 20px; }
  .flur-bild { display: flex; align-items: center; gap: 16px; text-align: left; }
  .flur-form { width: 96px; margin: 0; }
}

/* --- Drei Schritte -------------------------------------------------------- */

.drei-schritte {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.drei-schritte li {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: 20px;
  padding: 26px 26px 24px;
}
.ds-nr {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--akzent);
  margin-bottom: 18px;
  font-variant-numeric: tabular-nums;
}
.drei-schritte h3 { font-size: 1.2rem; margin: 0 0 6px; }
.drei-schritte p { margin: 0; color: var(--text-gedeckt); font-size: 0.97rem; }
@media (max-width: 820px) {
  .drei-schritte { grid-template-columns: 1fr; }
}

/* --- Schluss: noch einmal das Feld ---------------------------------------- */

.schluss { text-align: center; }
.schluss h2 { max-width: none; }
.schluss .block-unter { margin-left: auto; margin-right: auto; }
.schluss .start-suche { margin: 0 auto 12px; }
.schluss .start-fussnote { color: var(--text-gedeckt); }

/* --- Die Ergebnis-Tafel --------------------------------------------------- */

html.tafel-offen { overflow: hidden; }

.tafel {
  width: min(1040px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 24px;
  background: var(--flaeche);
  color: var(--text);
  box-shadow: 0 30px 90px rgba(15, 23, 42, 0.35);
  overflow: auto;
  overscroll-behavior: contain;
}
.tafel::backdrop {
  background: rgba(15, 23, 42, 0.48);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
}
.tafel[open] { animation: tafel-auf 260ms var(--ease-out); }
@keyframes tafel-auf {
  from { opacity: 0; transform: translateY(10px) scale(0.99); }
  to   { opacity: 1; transform: none; }
}
.tafel-innen { padding: 26px 32px 30px; }

.tafel-kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 4px 18px;
  align-items: start;
}
.tafel-titel { font-size: 1.35rem; margin: 0; }
.tafel-unter { margin: 2px 0 0; color: var(--text-gedeckt); font-size: 0.94rem; }
.tafel-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 6px 0 0;
  font-size: 0.84rem;
  color: var(--text-gedeckt);
  white-space: nowrap;
}
.live-punkt {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #94A3B8;
}
.tafel.ist-fertig .live-punkt { background: #16A34A; box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.16); }
.tafel-zu {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--rand);
  background: var(--flaeche);
  color: var(--text);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}
.tafel-zu:hover { background: var(--flaeche-alt); }

.tafel .messschein { margin: 14px 0 0; }

.tafel-karte {
  position: relative;
  height: 230px;
  margin: 18px 0 20px;
  border-radius: 16px;
  overflow: hidden;
  background: #EEF2F7;
}
.tafel-karte-flaeche { position: absolute; inset: 0; }
.tafel-karte .leaflet-tile-pane { filter: grayscale(1) contrast(0.95) brightness(1.03); }
.tafel-karte .leaflet-control-attribution { font-size: 10px; }
.tafel-pille {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 800;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.14);
  font-size: 0.95rem;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity var(--normal) var(--ease-out);
}
.tafel-pille.ist-weg { opacity: 0; }
.pille-zeit { color: var(--text-gedeckt); font-size: 0.84rem; font-variant-numeric: tabular-nums; }
.punkte { display: inline-flex; gap: 3px; }
.punkte i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--akzent);
  animation: punkt 1s ease-in-out infinite;
}
.punkte i:nth-child(2) { animation-delay: 0.15s; }
.punkte i:nth-child(3) { animation-delay: 0.3s; }
@keyframes punkt { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
.tafel-karte-hinweis {
  position: absolute;
  left: 12px; bottom: 10px;
  z-index: 800;
  margin: 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  font-size: 0.78rem;
  color: var(--text-gedeckt);
}

/* Lauf: Quellen als Plaketten, darunter Satz und Balken. */
.tafel-lauf { display: grid; gap: 10px; margin: 0 0 6px; }
.lauf-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lauf-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px 6px 7px;
  border: 1px solid var(--rand);
  border-radius: 999px;
  background: var(--flaeche);
  font-size: 0.87rem;
  color: var(--text-gedeckt);
  transition: border-color var(--normal) var(--ease-out), color var(--normal) var(--ease-out);
}
.lauf-zeichen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1.5px dashed #B6C2D2;
  flex: none;
}
.lauf-chip.ist-laufend .lauf-zeichen {
  border: 2px solid var(--akzent-zart);
  border-top-color: var(--akzent);
  animation: drehen 0.8s linear infinite;
}
@keyframes drehen { to { transform: rotate(360deg); } }
.lauf-chip.ist-fertig { color: var(--text); border-color: #C9D7F2; }
.lauf-chip.ist-fertig .lauf-zeichen { border: 0; background: var(--akzent); color: #fff; }
.lauf-chip.ist-fehlt .lauf-zeichen { border: 1.5px solid #CBD5E1; color: #94A3B8; }
.lauf-chip.ist-summe { background: var(--akzent-hell); border-color: #C9D7F2; color: var(--akzent-dunkel); font-weight: 600; }
.lauf-chip.ist-summe .lauf-zeichen { border: 0; color: var(--akzent); }
.lauf-text { margin: 4px 0 0; font-size: 0.95rem; color: var(--text); }
.lauf-text .pille-zeit { margin-left: 8px; }
.lauf-balken { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.lauf-balken i { height: 4px; border-radius: 2px; background: #E8EDF4; transition: background var(--normal) var(--ease-out); }
.lauf-balken i.ist-fertig { background: var(--akzent); }
.lauf-balken i.ist-laufend { background: linear-gradient(90deg, var(--akzent), #BFD3FB); }
.tafel.ist-fertig .tafel-lauf { margin-bottom: 0; }

/* Befund: Umriss links, Satz rechts. */
.tafel-befund {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 30px;
  align-items: center;
  margin: 22px 0 0;
  padding: 22px 0 24px;
  border-top: 1px solid var(--rand);
  border-bottom: 1px solid var(--rand);
}
.befund-titel { font-size: 1.45rem; margin: 0 0 6px; line-height: 1.2; }
.befund-text { margin: 0 0 12px; color: var(--text-gedeckt); }
.befund-hinweise { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 4px; }
.befund-hinweise li { position: relative; padding-left: 16px; font-size: 0.9rem; color: #3B4556; }
.befund-hinweise li::before {
  content: "";
  position: absolute; left: 0; top: 0.55em;
  width: 7px; height: 7px; border-radius: 50%;
  background: #F2B33D;
}
.befund-knopf { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.befund-knopf .klein { margin: 0; }
.befund-recht { margin: 12px 0 0; font-size: 0.8rem; color: var(--text-gedeckt); }

.tafel-tabelle-kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 22px 0 8px;
}
.zaehler { margin: 0; font-weight: 600; }
.zaehler-verdeckt { color: var(--akzent); }
.zaehler-leise { color: var(--text-gedeckt); font-weight: 400; }
.stand { margin: 0; font-size: 0.84rem; color: var(--text-gedeckt); }

/* Angebot am Ende der Tafel */
.tafel-angebot {
  margin-top: 28px;
  padding: 26px 28px 22px;
  border: 1px solid var(--rand);
  border-radius: 20px;
  background: var(--flaeche);
  box-shadow: var(--schatten);
}
.angebot-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.angebot-name { margin: 0; font-weight: 600; }
.angebot-preis { margin: 0; font-weight: 650; font-size: 1.25rem; }
.angebot-titel { font-size: 1.3rem; margin: 8px 0 14px; }
.angebot-liste { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 8px; }
.angebot-liste li { position: relative; padding-left: 28px; color: #3B4556; }
.angebot-liste li::before {
  content: "";
  position: absolute; left: 2px; top: 0.35em;
  width: 14px; height: 8px;
  border-left: 2px solid var(--akzent);
  border-bottom: 2px solid var(--akzent);
  transform: rotate(-45deg);
}
.btn-breit { display: block; width: 100%; text-align: center; padding: 15px 22px; font-size: 1.05rem; }
.angebot-fuss { margin: 10px 0 0; text-align: center; font-size: 0.84rem; color: var(--text-gedeckt); }
.angebot-wege {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--rand);
  font-size: 0.92rem;
}
.angebot-wege a, .angebot-wege button {
  color: var(--text);
  text-decoration: none;
  font: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.angebot-wege a:hover, .angebot-wege button:hover { color: var(--akzent); }

.tafel-fehler {
  margin: 18px 0 0;
  padding: 14px 18px;
  border-radius: 14px;
  background: #FFF7E8;
  border: 1px solid #F5D9A6;
  color: #5C3B00;
}

@media (max-width: 720px) {
  .tafel {
    width: 100vw;
    max-height: 100dvh;
    height: 100dvh;
    border-radius: 0;
  }
  .tafel-innen { padding: 18px 16px 24px; }
  .tafel-kopf { grid-template-columns: minmax(0, 1fr) auto; }
  .tafel-live { grid-column: 1 / -1; grid-row: 2; }
  .tafel-karte { height: 180px; margin: 14px -16px 16px; border-radius: 0; }
  .tafel-befund { grid-template-columns: 1fr; gap: 14px; }
  .tafel-befund .flur-bild { display: flex; align-items: center; gap: 16px; text-align: left; }
  .tafel-befund .flur-form { width: 84px; margin: 0; }
  .tafel-angebot { padding: 20px 18px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .tafel[open], .fakten tr.ist-neu td { animation: none; }
  .punkte i, .lauf-chip.ist-laufend .lauf-zeichen, .wartet { animation: none; }
}