/* zvg-finder.de – heller, ruhiger Look, mobil zuerst */
:root {
  --bg: #f7f8fa;
  --flaeche: #ffffff;
  --linie: #e6e9ee;
  --linie-stark: #d5dae2;
  --text: #171b26;
  --text-2: #4b5363;
  --text-3: #7b8494;
  --akzent: #0f4c81;
  --akzent-hell: #e8f0f8;
  --akzent-dunkel: #0b3a63;
  --gruen: #1f7a4d; --gruen-hell: #e6f4ec;
  --rot: #b42318; --rot-hell: #fdecea;
  --gelb: #8a5a00; --gelb-hell: #fff4d6;
  --grau-hell: #eef0f3;
  --radius: 14px;
  --schatten: 0 1px 2px rgba(23,27,38,.04), 0 4px 16px rgba(23,27,38,.05);
  --schatten-hover: 0 2px 4px rgba(23,27,38,.06), 0 10px 28px rgba(23,27,38,.09);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.55; }
a { color: var(--akzent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
h1, h2, h3 { line-height: 1.2; letter-spacing: -0.015em; margin: 0 0 .5em; }
h1 { font-size: clamp(26px, 5vw, 38px); font-weight: 700; }
h2 { font-size: clamp(20px, 3.4vw, 26px); font-weight: 700; }
h3 { font-size: 17px; font-weight: 600; }
p { margin: 0 0 1em; }
.hülle { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .hülle { padding: 0 28px; } }

/* Kopf */
.kopf { position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.92); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--linie); }
.kopf .hülle { display: flex; align-items: center; justify-content: space-between; height: 60px; gap: 12px; }
.marke { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--text); font-size: 17px; letter-spacing: -0.01em; }
.marke:hover { text-decoration: none; }
.marke { perspective: 220px; }
.marke .logo { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg, var(--akzent), #2b7bc2); display: grid; flex: none; color: #fff; font-size: 15px; font-weight: 800; transform-style: preserve-3d; animation: logo-dreh 2.6s .4s both; }
.marke .logo .seite { grid-area: 1 / 1; display: grid; place-items: center; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 9px; overflow: hidden; }
/* Sichtbarkeit der beiden Seiten zusätzlich per Deckkraft koppeln – sonst scheint auf manchen Browsern „ZV“ durch den Hammer */
.marke .logo .seite.zv { animation: zv-seite 2.6s .4s both; }
.marke .logo .hammer-seite { animation: hammer-seite 2.6s .4s both; }
.marke:hover .logo .seite.zv { animation: zv-seite-2 2.6s both; }
.marke:hover .logo .hammer-seite { animation: hammer-seite-2 2.6s both; }
@keyframes zv-seite { 0%, 24% { opacity: 1; } 26%, 85% { opacity: 0; } 87%, 100% { opacity: 1; } }
@keyframes zv-seite-2 { 0%, 24% { opacity: 1; } 26%, 85% { opacity: 0; } 87%, 100% { opacity: 1; } }
@keyframes hammer-seite { 0%, 24% { opacity: 0; } 26%, 85% { opacity: 1; } 87%, 100% { opacity: 0; } }
@keyframes hammer-seite-2 { 0%, 24% { opacity: 0; } 26%, 85% { opacity: 1; } 87%, 100% { opacity: 0; } }
.marke .logo .hammer-seite { transform: rotateY(180deg); }
.marke .logo svg { display: block; }
.marke .logo .hammer { transform-box: view-box; transform-origin: 47px 47px; animation: hammer-schlag 2.6s .4s both; }
.marke:hover .logo { animation: logo-dreh-2 2.6s both; }
.marke:hover .logo .hammer { animation: hammer-schlag-2 2.6s both; }
/* Ablauf: ZV steht, Kachel dreht zum Hammer, Hammer schlägt, Kachel dreht zurück zu ZV */
@keyframes logo-dreh { 0%, 18% { transform: rotateY(0); } 32% { transform: rotateY(180deg); } 45% { transform: rotateY(180deg) translateY(0); } 48% { transform: rotateY(180deg) translateY(1.5px) scale(.96); } 53% { transform: rotateY(180deg) translateY(0) scale(1); } 78% { transform: rotateY(180deg); } 94%, 100% { transform: rotateY(360deg); } }
@keyframes logo-dreh-2 { 0%, 18% { transform: rotateY(0); } 32% { transform: rotateY(180deg); } 45% { transform: rotateY(180deg) translateY(0); } 48% { transform: rotateY(180deg) translateY(1.5px) scale(.96); } 53% { transform: rotateY(180deg) translateY(0) scale(1); } 78% { transform: rotateY(180deg); } 94%, 100% { transform: rotateY(360deg); } }
@keyframes hammer-schlag { 0%, 36% { transform: rotate(32deg); } 46% { transform: rotate(-7deg); } 56% { transform: rotate(13deg); } 66% { transform: rotate(-2deg); } 74%, 100% { transform: rotate(0); } }
@keyframes hammer-schlag-2 { 0%, 36% { transform: rotate(32deg); } 46% { transform: rotate(-7deg); } 56% { transform: rotate(13deg); } 66% { transform: rotate(-2deg); } 74%, 100% { transform: rotate(0); } }
@media (prefers-reduced-motion: reduce) { .marke .logo, .marke .logo .hammer, .marke .logo .seite, .marke:hover .logo, .marke:hover .logo .hammer, .marke:hover .logo .seite { animation: none; } .marke .logo .hammer-seite { opacity: 0; } }
.marke small { display: none; color: var(--text-3); font-weight: 500; font-size: 13px; }
@media (min-width: 900px) { .marke small { display: inline; } }
.navi { display: none; gap: 4px; }
.navi a { padding: 8px 12px; border-radius: 9px; color: var(--text-2); font-weight: 500; font-size: 15px; }
.navi a:hover { background: var(--grau-hell); text-decoration: none; color: var(--text); }
@media (min-width: 768px) { .navi { display: flex; } }
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: 10px; font-weight: 600; font-size: 15px; border: 1px solid transparent; cursor: pointer; font-family: inherit; line-height: 1.2; }
.knopf.primär { background: var(--akzent); color: #fff; }
.knopf.primär:hover { background: var(--akzent-dunkel); text-decoration: none; }
.knopf.sekundär { background: #fff; color: var(--text); border-color: var(--linie-stark); }
.knopf.sekundär:hover { background: var(--grau-hell); text-decoration: none; }
.knopf.klein { padding: 7px 12px; font-size: 14px; border-radius: 9px; }
.knopf.block { width: 100%; }

/* Hero */
.hero { padding: 40px 0 28px; }
@media (min-width: 768px) { .hero { padding: 64px 0 40px; } }
.hero .hero-titel { hyphens: manual; overflow-wrap: normal; }
.hero p.lead { font-size: 17px; color: var(--text-2); max-width: 640px; margin-bottom: 24px; }
.suchbox > * { min-width: 0; }
.suchbox { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 18px; box-shadow: var(--schatten); padding: 14px; display: grid; gap: 10px; }
@media (min-width: 768px) { .suchbox { grid-template-columns: 1.4fr 1fr 1fr auto; align-items: end; padding: 16px; } }
.feld { display: grid; gap: 5px; min-width: 0; }
.feld input, .feld select { min-width: 0; }
.feld input[type=date] { font-size: 14.5px; padding-left: 10px; padding-right: 8px; }
.feld select { text-overflow: ellipsis; }
.feld label { font-size: 12.5px; font-weight: 600; color: var(--text-2); letter-spacing: .01em; }
.feld input, .feld select { width: 100%; font: inherit; font-size: 15px; padding: 11px 12px; border: 1px solid var(--linie-stark); border-radius: 10px; background: #fff; color: var(--text); min-height: 44px; }
.feld input:focus, .feld select:focus { outline: 2px solid var(--akzent); outline-offset: 1px; border-color: var(--akzent); }
.feld select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234b5363' stroke-width='2.2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px; }

/* Kennzahlen */
.kennzahlen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 22px 0 0; max-width: 560px; }
@media (min-width: 768px) { .kennzahlen { gap: 14px; } }
/* Kachel: Beschriftung oben, Wert darunter, alles mittig */
.kennzahl { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 12px 10px; min-width: 0; text-align: center; display: grid; gap: 4px; align-content: center; }
.kennzahl span { display: block; color: var(--text-3); font-size: 12.5px; line-height: 1.3; }
.kennzahl b { display: block; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.kennzahl b.datum { font-size: clamp(15px, 4.6vw, 20px); letter-spacing: -0.01em; white-space: nowrap; }
.kennzahl small { display: block; color: var(--text-2); font-size: 12.5px; line-height: 1.3; }
@media (min-width: 768px) { .kennzahl { padding: 14px 16px; } .kennzahl b { font-size: 26px; } .kennzahl b.datum { font-size: 20px; } .kennzahl span, .kennzahl small { font-size: 13px; } }

/* Abschnitte */
.abschnitt { padding: 28px 0; }
@media (min-width: 768px) { .abschnitt { padding: 40px 0; } }
.abschnitt-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 12px; margin-bottom: 14px; flex-wrap: wrap; }
.abschnitt-kopf h2 { margin: 0; flex: 1 1 auto; min-width: 0; hyphens: manual; }
.abschnitt-kopf a { font-weight: 500; font-size: 15px; white-space: nowrap; flex: 0 0 auto; }
/* Auf dem Handy: Überschrift in voller Breite, Link darunter */
@media (max-width: 559px) { .abschnitt-kopf h2 { flex-basis: 100%; } }

/* Objekt-Karten */
.raster { display: grid; gap: 12px; }
@media (min-width: 640px) { .raster.zwei { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .raster.drei { grid-template-columns: 1fr 1fr 1fr; } }
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: var(--schatten); transition: box-shadow .15s, transform .15s; }
a.karte { display: block; color: inherit; }
a.karte:hover { text-decoration: none; box-shadow: var(--schatten-hover); transform: translateY(-1px); }
a.karte.objekt, .karte.objekt { padding: 0 16px 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; height: 100%; box-sizing: border-box; overflow: hidden; }
/* Karteninhalt mittig (Gericht, Objektart, Adresse, Wert, Termin) */
.objekt { text-align: center; }
.karte.objekt .zeile { justify-content: center; }
.karte.objekt .gericht { justify-content: center; }
.objekt .zeile .marker { position: absolute; top: 10px; right: 10px; }
a.karte.objekt, .karte.objekt { position: relative; }
.objekt .bild { margin: 0 -16px 8px; }
.objekt > * { min-width: 0; }
.objekt .zeile { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: nowrap; }
.objekt .gericht { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--text-2); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.objekt .gericht svg { color: var(--akzent); flex: none; }
.objekt .zeile .marker { flex: none; }
.objekt .art { display: inline-block; max-width: 100%; box-sizing: border-box; font-size: 12.5px; font-weight: 600; color: var(--akzent); background: var(--akzent-hell); padding: 3px 9px; border-radius: 999px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: top; }
.objekt h3 { font-size: 16.5px; margin: 0; overflow-wrap: anywhere; }
.objekt .adresse { color: var(--text-2); font-size: 14.5px; margin-top: -4px; }
.objekt .wert { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; margin-top: 0; line-height: 1.2; }
.objekt .wert small { font-size: 12.5px; font-weight: 500; color: var(--text-3); display: block; letter-spacing: 0; margin-top: 2px; }
.objekt .wert.wert-offen { font-size: 15px; color: var(--text-2); font-weight: 600; }
.objekt .fuss { display: flex; justify-content: space-between; align-items: center; gap: 4px 8px; flex-wrap: wrap; border-top: 1px solid var(--linie); padding-top: 10px; font-size: 13.5px; color: var(--text-2); }
.objekt .termin b { color: var(--text); font-weight: 600; }
.objekt .fuss.termin-fuss { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: auto; padding-top: 10px; }
.objekt .termin-fuss .termin { display: grid; gap: 2px; justify-items: center; text-align: center; }
.objekt .termin-fuss .termin small { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }
.objekt .termin-fuss .termin small svg { color: var(--akzent); }
.objekt .termin-fuss .termin b { font-size: 14.5px; font-weight: 600; color: var(--text); white-space: nowrap; }
.countdown { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--akzent); background: var(--akzent-hell); padding: 7px 10px; border-radius: 8px; width: 100%; box-sizing: border-box; font-variant-numeric: tabular-nums; }
.countdown.rot { color: var(--rot); background: var(--rot-hell); }
.countdown.bald { color: var(--gelb); background: var(--gelb-hell); }
.marker { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 12.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; }
.marker.gruen { background: var(--gruen-hell); color: var(--gruen); }
.marker.rot { background: var(--rot-hell); color: var(--rot); }
.marker.gelb { background: var(--gelb-hell); color: var(--gelb); }
.marker.grau { background: var(--grau-hell); color: var(--text-2); }
.marker.blau { background: var(--akzent-hell); color: var(--akzent); }

/* Länder-Kacheln */
.laender { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 640px) { .laender { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .laender { grid-template-columns: repeat(4, 1fr); gap: 12px; } }
.karte.land { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px; padding: 16px 18px; }
.land b { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; grid-column: 1; }
.land .zahl { grid-column: 1; color: var(--text-2); font-size: 13.5px; }
.land .zahl strong { color: var(--text); font-weight: 600; }
.land .pfeil { grid-column: 2; grid-row: 1 / span 2; color: var(--text-3); font-size: 18px; }
.land .zahl.leer { color: var(--text-3); }
.land .hinweis-marke { grid-column: 1; display: inline-block; width: max-content; font-size: 12px; color: var(--text-3); background: var(--grau-hell); padding: 2px 8px; border-radius: 999px; margin-top: 2px; }
div.karte.land { box-shadow: none; background: #fbfbfc; }

/* Suchseite: Layout */
.suche-layout { display: grid; gap: 18px; padding: 20px 0 40px; }
.suche-layout > * { min-width: 0; }
@media (min-width: 960px) { .suche-layout { grid-template-columns: 280px 1fr; align-items: start; } }
@media (min-width: 1240px) { .suche-layout.mit-seitenleiste { grid-template-columns: 280px 1fr 300px; } }
.filter { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 16px; display: grid; gap: 12px; min-width: 0; }
.filter > * { min-width: 0; }
.filter h2 { font-size: 16px; margin: 0; }
.filter .zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
@media (max-width: 959px) {
  html, body { overflow-x: hidden; }
  .filter { position: fixed; inset: 0; width: 100%; max-width: 100vw; z-index: 40; border-radius: 0; overflow: auto; padding-bottom: 90px; transform: translateY(100%); transition: transform .25s ease; }
  .filter.offen { transform: none; }
  .filter .schliessen { position: fixed; left: 16px; right: 16px; bottom: 16px; }
}
.filter .schliessen { display: none; }
@media (max-width: 959px) { .filter .schliessen { display: flex; } }
.filter-knopf { position: sticky; top: 70px; z-index: 20; }
@media (min-width: 960px) { .filter-knopf { display: none; } }
.ergebnis-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.ergebnis-kopf > div { min-width: 0; }
.ergebnis-kopf h1 { font-size: clamp(19px, 5.4vw, 22px); margin: 0; overflow-wrap: anywhere; }
.ergebnis-kopf .anzahl { color: var(--text-3); font-size: 14px; }
.sortierung { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 14px; color: var(--text-2); }
.sortierung select { font: inherit; font-size: 14px; padding: 7px 30px 7px 10px; border-radius: 9px; border: 1px solid var(--linie-stark); background: #fff; }
.aktive-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.aktive-filter a { background: var(--grau-hell); color: var(--text-2); font-size: 13px; padding: 4px 10px; border-radius: 999px; }
.aktive-filter a:hover { background: var(--linie); text-decoration: none; }
.leer-hinweis { background: var(--flaeche); border: 1px dashed var(--linie-stark); border-radius: var(--radius); padding: 32px 20px; text-align: center; color: var(--text-2); }
.blaettern { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 20px; flex-wrap: wrap; }
.sortierung.pro-seite { justify-content: center; margin-top: 14px; }
.blaettern a, .blaettern span { min-width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; border: 1px solid var(--linie); background: #fff; font-size: 14px; padding: 0 10px; }
.blaettern span.info { border: 0; background: none; color: var(--text-3); width: 100%; margin-bottom: 4px; }
.blaettern span.aktiv { background: var(--akzent); color: #fff; border-color: var(--akzent); }
.blaettern a:hover { background: var(--grau-hell); text-decoration: none; }

/* Werbeplätze */
.werbung { margin: 14px 0; }
.werbung.platzhalter { border: 1px dashed var(--linie-stark); border-radius: 10px; min-height: 90px; display: grid; place-items: center; color: var(--text-3); font-size: 12px; background: #fbfbfc; }
.werbung.seitenleiste.platzhalter { min-height: 250px; }

/* Detailseite */
.detail-kopf { padding: 24px 0 8px; }
.krümel { font-size: 13px; color: var(--text-3); margin-bottom: 10px; display: flex; flex-wrap: wrap; gap: 4px; }
.krümel a { color: var(--text-2); }
.detail-layout { display: grid; gap: 18px; padding: 8px 0 48px; }
@media (min-width: 960px) { .detail-layout { grid-template-columns: 1fr 340px; align-items: start; } }
.block { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 18px; }
.block + .block { margin-top: 14px; }
.block h2 { font-size: 17px; margin-bottom: 12px; }
.fakten { display: grid; gap: 0; }
.fakten div { display: grid; grid-template-columns: 170px 1fr; gap: 10px; padding: 9px 0; border-top: 1px solid var(--linie); font-size: 15px; align-items: baseline; }
.fakten div:first-child { border-top: 0; }
.fakten dt { color: var(--text-3); font-size: 13.5px; padding-top: 2px; white-space: nowrap; }
.fakten dd { margin: 0; }
@media (max-width: 560px) { .fakten div { grid-template-columns: 1fr; gap: 2px; } .fakten dt { white-space: normal; } }
.hauptwert { display: grid; gap: 1px; margin: 4px 0 14px; }
.hauptwert b { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.hauptwert span { color: var(--text-3); font-size: 14px; line-height: 1.3; }
.termin-box { background: var(--akzent-hell); border: 1px solid #cddcec; border-radius: 12px; padding: 14px 16px; display: grid; gap: 3px; justify-items: start; }
.termin-box .titel { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); margin-bottom: 2px; }
.termin-box .titel svg { color: var(--akzent); }
.termin-box b { font-size: 18px; line-height: 1.25; white-space: nowrap; letter-spacing: -0.01em; }
.termin-box b .trenner { color: var(--text-3); font-weight: 400; margin: 0 1px; }
.termin-box .zeit { font-size: 14.5px; font-weight: 500; color: var(--text-2); }
.termin-box .zeit .trenner { color: var(--text-3); margin: 0 2px; }
.termin-box small { color: var(--text-2); font-size: 13.5px; }
.termin-box .in { display: inline-block; margin-top: 6px; padding: 4px 10px; border-radius: 999px; background: #fff; border: 1px solid #cddcec; color: var(--akzent); font-weight: 600; font-size: 13px; }
.termin-box.vorbei { background: var(--rot-hell); border-color: #f2c4bf; }
.termin-box.vorbei b { color: var(--rot); }
.termin-box.vorbei .titel svg { color: var(--rot); }
.termin-box.vorbei small { color: var(--rot); }
.termin-box.vorbei .zeit { color: var(--text-2); }
.termin-box.abgesagt { background: var(--rot-hell); border-color: #f2c4bf; }
.termin-box.abgesagt b { color: var(--rot); }
.dokumente a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border: 1px solid var(--linie); border-radius: 10px; margin-top: 8px; color: var(--text); background: #fff; }
.dokumente a:hover { border-color: var(--akzent); text-decoration: none; }
.dokumente a small { color: var(--text-3); font-size: 12.5px; }
.dokumente .pdf { width: 32px; height: 32px; border-radius: 8px; background: var(--rot-hell); color: var(--rot); display: grid; place-items: center; font-size: 10px; font-weight: 700; flex: none; }
.verlauf { list-style: none; padding: 0 0 0 22px; margin: 0; position: relative; }
.verlauf::before { content: ""; position: absolute; left: 4px; top: 12px; bottom: 12px; width: 2px; background: var(--linie); }
.verlauf li { position: relative; padding: 7px 0; }
.verlauf li::before { content: ""; position: absolute; left: -22px; top: 12px; width: 10px; height: 10px; border-radius: 50%; background: var(--text-3); box-shadow: 0 0 0 3px #fff; }
.verlauf li.wichtig::before { background: var(--rot); }
.verlauf li.gut::before { background: var(--gruen); }
.verlauf li.termin::before { background: var(--akzent); }
.verlauf li b { display: block; font-weight: 600; }
.verlauf li.termin b { color: var(--akzent); }
.verlauf .detail, .verlauf time { display: block; font-size: 13px; color: var(--text-2); }
.verlauf time { color: var(--text-3); font-size: 12.5px; }
.rechner { display: grid; gap: 10px; }
.rechner input[type=range] { width: 100%; }
.rechner .ergebnis { display: grid; gap: 0; font-size: 14.5px; }
.rechner .ergebnis div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; border-top: 1px solid var(--linie); padding: 8px 0; white-space: nowrap; }
.rechner .ergebnis span { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; }
.rechner .ergebnis b { font-variant-numeric: tabular-nums; }
.rechner .ergebnis div.summe { font-weight: 700; }
.hinweis { color: var(--text-3); font-size: 12.5px; }
.quelle { font-size: 13px; color: var(--text-2); background: var(--grau-hell); border-radius: 10px; padding: 10px 12px; }

/* Gerichts-/Länderseiten */
.gerichte-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 640px) { .gerichte-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .gerichte-liste { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gerichte-liste a { display: flex; justify-content: space-between; gap: 6px; min-width: 0; overflow-wrap: anywhere; hyphens: auto; padding: 10px 12px; border: 1px solid var(--linie); border-radius: 10px; background: #fff; color: var(--text); font-size: 14.5px; }
.gerichte-liste a span { color: var(--text-3); font-size: 13px; flex-shrink: 0; }
.gerichte-liste a:hover { border-color: var(--akzent); text-decoration: none; }
.gerichte-liste a.leer { color: var(--text-3); }

/* Seitenfuß (Footer) */
.seitenfuss { border-top: 1px solid var(--linie); padding: 28px 0 40px; color: var(--text-3); font-size: 13.5px; }
.seitenfuss .hülle { display: grid; gap: 10px; }
.seitenfuss a { color: var(--text-2); }
.seitenfuss nav { display: flex; flex-wrap: wrap; gap: 14px; }

/* Beispieltext verschwindet, sobald das Feld angeklickt wird */
input:focus::placeholder { color: transparent; }

.beschreibung { font-size: 15px; line-height: 1.6; color: var(--text); }


/* Info-Punkte mit Erklärung */
.info { display: inline-grid; place-items: center; width: 15px; height: 15px; line-height: 1; border-radius: 50%; background: var(--akzent); color: #fff; font-size: 10.5px; font-weight: 700; font-style: normal; cursor: help; position: relative; vertical-align: 2px; margin-left: 6px; }
.info::after { content: attr(data-tip); position: absolute; left: 0; top: 22px; z-index: 20; width: 260px; background: #171b26; color: #fff; font-size: 12.5px; font-weight: 400; line-height: 1.45; padding: 9px 11px; border-radius: 9px; box-shadow: var(--schatten-hover); opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity .12s, transform .12s; white-space: normal; }
.info:hover::after, .info:focus::after { opacity: 1; transform: none; }
@media (max-width: 480px) { .info::after { width: 220px; left: auto; right: -20px; } }
.ohne-gewaehr { text-align: right; color: var(--rot); font-size: 13px; font-weight: 600; margin: 12px 0 0; }


/* Ratgeber / Textseiten */
.artikel { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 24px; }
@media (min-width: 768px) { .artikel { padding: 32px 36px; } }
.artikel h1 { font-size: clamp(24px, 4vw, 32px); margin-bottom: 14px; }
.artikel h2 { font-size: 20px; margin: 28px 0 8px; }
.artikel p, .artikel li { font-size: 16px; line-height: 1.65; color: var(--text); }
.artikel p.lead { font-size: 17.5px; color: var(--text-2); }
.artikel ul, .artikel ol { padding-left: 22px; margin: 0 0 1em; }
.artikel li { margin-bottom: 6px; }
.liste-schlicht { list-style: none; padding: 0; margin: 0; }
.liste-schlicht li { padding: 7px 0; border-top: 1px solid var(--linie); font-size: 14.5px; }
.liste-schlicht li:first-child { border-top: 0; }
.tabelle { width: 100%; border-collapse: collapse; margin: 8px 0 16px; font-size: 15px; }
.tabelle th, .tabelle td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.tabelle th { color: var(--text-3); font-size: 13px; font-weight: 600; }
@media (max-width: 560px) { .tabelle { display: block; overflow-x: auto; } }

.stand { color: var(--text-3); font-size: 13.5px; margin: -6px 0 18px; }
.faq details { border-top: 1px solid var(--linie); padding: 10px 0; }
.faq summary { cursor: pointer; font-weight: 600; font-size: 16px; list-style: none; display: flex; justify-content: space-between; gap: 10px; }
.faq summary::after { content: "+"; color: var(--text-3); font-weight: 400; }
.faq details[open] summary::after { content: "–"; }
.faq p { margin: 8px 0 0; color: var(--text-2); }
.quellen { font-size: 13.5px; color: var(--text-2); background: var(--grau-hell); border-radius: 10px; padding: 10px 12px; margin-top: 18px; }

.datenbox { background: var(--akzent-hell); border: 1px solid #cddcec; border-radius: 12px; padding: 14px 18px; margin: 6px 0 22px; }
.datenbox b { display: block; margin-bottom: 6px; }
.datenbox ul { margin: 0 0 8px; padding-left: 20px; }
.datenbox li { font-size: 15px; margin-bottom: 4px; }
.datenbox small { color: var(--text-2); font-size: 12.5px; }

.fall { border: 1px solid var(--linie-stark); border-left: 4px solid var(--akzent); border-radius: 12px; padding: 16px 18px; margin: 26px 0; background: #fbfcfe; }
.fall-kopf { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.fall h3 { font-size: 18px; margin: 4px 0 6px; }
.fall .fall-objekt { color: var(--text-2); font-size: 14.5px; margin-bottom: 10px; }
.fall ol, .fall ul { margin-bottom: 8px; }

.info-block { max-width: 820px; padding-top: 8px; }
.info-block h2 { font-size: 19px; }
.info-block p { color: var(--text-2); font-size: 15px; }

.fehler-text { color: var(--rot); background: var(--rot-hell); border-radius: 8px; padding: 8px 12px; font-size: 14px; }

/* Karte */
.karte-seite { padding: 18px 0 30px; }
.karte-kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.karte-kopf h1 { font-size: clamp(22px, 3.5vw, 28px); margin-bottom: 2px; }
.karte-filter { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.karte-filter select, .karte-filter input { font: inherit; font-size: 14px; padding: 9px 30px 9px 10px; border-radius: 9px; border: 1px solid var(--linie-stark); background: #fff; min-height: 40px; }
.karte-filter input { padding-right: 10px; width: 150px; }
.karte-gross { height: min(72vh, 760px); min-height: 380px; border-radius: var(--radius); border: 1px solid var(--linie); background: #e9eef2; }
.karte-klein { min-height: 90px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--grau-hell); border-radius: 10px; padding: 14px; }
.karte-mini { height: 300px; border-radius: 10px; width: 100%; }
.leaflet-container { font-family: var(--font); }
.leaflet-popup-content { margin: 12px 14px; font-size: 13.5px; line-height: 1.4; }
.popup-kopf { color: var(--text-3); font-size: 12px; margin-bottom: 2px; }
.popup-ort { color: var(--text-2); }
.popup-wert { font-weight: 700; font-size: 16px; margin-top: 4px; }
.popup-termin { color: var(--text-2); font-size: 13px; }
.popup-link { display: block; margin-top: 10px; padding: 9px 12px; border-radius: 9px; background: var(--akzent); color: #fff !important; font-weight: 600; text-align: center; text-decoration: none !important; }
.popup-link:hover { background: var(--akzent-dunkel); }
.marker-cluster-small, .marker-cluster-medium, .marker-cluster-large { background: rgba(15,76,129,.25); }
.marker-cluster-small div, .marker-cluster-medium div, .marker-cluster-large div { background: var(--akzent); color: #fff; font-weight: 700; }
@media (max-width: 640px) { .karte-filter { width: 100%; } .karte-filter select, .karte-filter input { flex: 1 1 45%; } .karte-filter .knopf { flex: 1 1 100%; } }

.pin { border-radius: 50%; border: 2.5px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.pin-aktiv { background: var(--akzent); }
.pin-aufgehoben { background: var(--rot); }
.karte-schalter { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--text-2); }
.karte-schalter input { width: 16px; height: 16px; margin: 0; accent-color: var(--akzent); }
.karte-legende { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px; font-size: 13px; color: var(--text-2); }
.karte-legende .punkt { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.15); vertical-align: -2px; margin-right: 4px; }
.karte-legende .punkt.aktiv { background: var(--akzent); } .karte-legende .punkt.aufgehoben { background: var(--rot); }
.popup-rot { color: var(--rot); font-weight: 600; }

/* Inhaltsverzeichnis Ratgeber */
.inhalt { background: var(--grau-hell); border-radius: 12px; padding: 12px 16px; margin: 4px 0 22px; }
.inhalt summary { cursor: pointer; font-weight: 700; font-size: 14px; list-style: none; display: flex; justify-content: space-between; }
.inhalt summary::after { content: "–"; color: var(--text-3); }
.inhalt details:not([open]) summary::after { content: "+"; }
.inhalt ol { margin: 8px 0 0; padding-left: 22px; columns: 2; column-gap: 24px; }
.inhalt li { font-size: 14px; margin-bottom: 4px; break-inside: avoid; }
.inhalt a { color: var(--text-2); }
.inhalt a:hover { color: var(--akzent); }
@media (max-width: 640px) { .inhalt ol { columns: 1; } }
html { scroll-behavior: smooth; }
.artikel h2[id] { scroll-margin-top: 76px; }

/* Aufklappbare Listen (Bundesland-Seite) */
.aufklapp { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 12px; }
.aufklapp summary { cursor: pointer; font-weight: 600; font-size: 15.5px; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.aufklapp summary::after { content: "+"; color: var(--text-3); font-size: 20px; font-weight: 400; }
.aufklapp[open] summary::after { content: "–"; }

/* Handy: kompakter, eine Zeile je Angabe */
@media (max-width: 560px) {
  .hero { padding: 26px 0 20px; }
  .hero p.lead { font-size: 15.5px; margin-bottom: 16px; }
  .abschnitt { padding: 22px 0; }
  a.karte.objekt, .karte.objekt { padding: 13px 14px; gap: 5px; }
  .objekt h3 { font-size: 16px; }
  .objekt .adresse { font-size: 14px; }
  .objekt .wert { font-size: 18px; }
  .objekt .wert small { font-size: 12px; }
  .objekt .termin-fuss .termin b { font-size: 13.5px; }
  .objekt .termin-fuss .termin small { font-size: 11px; }
  .countdown { font-size: 12.5px; padding: 6px 8px; }
  .ergebnis-kopf h1 { font-size: 19px; }
  .sortierung { gap: 8px; } .sortierung label { font-size: 13px; }
  .detail-kopf h1 { font-size: 22px; }
  .hauptwert b { font-size: 26px; }
  .block { padding: 14px; }
  .fakten div { padding: 7px 0; font-size: 14.5px; }
  .artikel { padding: 18px 16px; }
  .artikel p, .artikel li { font-size: 15.5px; }
}

/* Kopfzeile: Suchfeld (Desktop) und Menü (Handy) */
.kopf-suche { display: none; align-items: center; border: 1px solid var(--linie-stark); border-radius: 10px; background: #fff; overflow: hidden; height: 38px; }
.kopf-suche input { border: 0; font: inherit; font-size: 14px; padding: 0 12px; width: 170px; height: 100%; outline: none; }
.kopf-suche button { border: 0; background: var(--akzent); color: #fff; width: 38px; height: 100%; display: grid; place-items: center; cursor: pointer; }
@media (min-width: 900px) { .kopf-suche { display: flex; } }
.menue-knopf { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; width: 42px; height: 40px; border: 1px solid var(--linie-stark); border-radius: 10px; background: #fff; cursor: pointer; padding: 0 11px; }
.menue-knopf span { display: block; height: 2px; background: var(--text); border-radius: 2px; transition: transform .2s, opacity .2s; }
.menue-knopf.offen span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menue-knopf.offen span:nth-child(2) { opacity: 0; }
.menue-knopf.offen span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (min-width: 768px) { .menue-knopf { display: none; } .menue { display: none !important; } }
.menue { border-top: 1px solid var(--linie); background: #fff; padding: 14px 16px 16px; box-shadow: 0 12px 24px rgba(23,27,38,.08); }
.menue-suche { display: flex; gap: 8px; margin-bottom: 12px; }
.menue-suche input { flex: 1; min-width: 0; font: inherit; font-size: 15px; padding: 11px 12px; border: 1px solid var(--linie-stark); border-radius: 10px; min-height: 44px; }
.menue-links { display: grid; gap: 2px; }
.menue-links a { display: block; padding: 11px 12px; border-radius: 9px; color: var(--text); font-weight: 600; font-size: 15.5px; }
.menue-links a:hover { background: var(--grau-hell); text-decoration: none; }
@media (max-width: 767px) { .kopf .knopf.klein { display: none; } }

/* Musterfotos */
.bild { position: relative; aspect-ratio: 3 / 2; background: #e9eef2; overflow: hidden; }
.bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bild .musterfoto { position: absolute; right: 8px; bottom: 8px; background: rgba(23,27,38,.72); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .03em; padding: 3px 8px; border-radius: 6px; backdrop-filter: blur(2px); }
.bild-gross { border-radius: var(--radius); border: 1px solid var(--linie); margin-bottom: 6px; aspect-ratio: 16 / 7; }
.bild-hinweis { margin: 0 0 14px; }
.bild-gross .musterfoto { font-size: 12px; padding: 5px 10px; right: 12px; bottom: 12px; }
.objekt .zeile { margin-top: 2px; }
@media (max-width: 560px) { a.karte.objekt, .karte.objekt { padding: 0 14px 13px; } .objekt .bild { margin: 0 -14px 6px; } .bild-gross { aspect-ratio: 16 / 9; } }

/* Trefferliste (eine Spalte): Bild links, Inhalt rechts */
@media (min-width: 640px) {
  .raster.liste a.karte.objekt, .raster.liste .karte.objekt { display: grid; grid-template-columns: 230px 1fr; grid-template-rows: auto auto auto auto auto 1fr; column-gap: 18px; row-gap: 5px; padding: 0 16px 0 0; align-items: start; }
  .raster.liste .objekt .bild { grid-column: 1; grid-row: 1 / -1; margin: 0; height: 100%; min-height: 200px; aspect-ratio: auto; border-radius: var(--radius) 0 0 var(--radius); }
  .raster.liste .objekt > *:not(.bild) { grid-column: 2; }
  .raster.liste .objekt .zeile { padding-top: 12px; margin-top: 0; }
  .raster.liste .objekt .fuss.termin-fuss { align-self: end; margin-top: 4px; padding-bottom: 12px; grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .raster.liste .objekt .termin-fuss .termin { justify-items: start; text-align: left; }
  .raster.liste .objekt { text-align: left; }
  .raster.liste .karte.objekt .zeile { justify-content: space-between; }
  .raster.liste .karte.objekt .gericht { justify-content: flex-start; }
  .raster.liste .objekt .zeile .marker { position: static; }
  .raster.liste .countdown { width: max-content; min-width: 220px; max-width: 100%; }
}

/* Rasteransicht (Startseite): flacheres Bild */
.raster.drei .objekt .bild { aspect-ratio: 16 / 9; }

/* Beschreibung des Gerichts mit Original-Aufbau (Tabellen) */
.beschreibung.aufbau p { margin: 0 0 .8em; }
.beschreibung.aufbau table { width: 100%; border-collapse: collapse; margin: 6px 0 14px; font-size: 14px; }
.beschreibung.aufbau td, .beschreibung.aufbau th { border: 1px solid var(--linie-stark); padding: 6px 8px; vertical-align: top; text-align: left; }
.beschreibung.aufbau th, .beschreibung.aufbau tr:first-child td:has(strong) { background: var(--grau-hell); font-weight: 600; }
.beschreibung.aufbau ul, .beschreibung.aufbau ol { padding-left: 20px; margin: 0 0 .8em; }
@media (max-width: 560px) { .beschreibung.aufbau table { display: block; overflow-x: auto; } }
.beschreibung.aufbau td p, .beschreibung.aufbau th p { margin: 0; }

/* iOS-Safari zoomt beim Tippen in Felder unter 16 px die ganze Seite hinein und bleibt so.
   Deshalb auf dem Handy alle Eingabefelder mindestens 16 px. */
@media (max-width: 899px) { input, select, textarea { font-size: 16px !important; } }

/* Einwilligungs-Banner */
.einwilligung { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 12px; background: rgba(23,27,38,.35); }
.einwilligung-box { max-width: 720px; margin: 0 auto; background: #fff; border: 1px solid var(--linie); border-radius: 16px; box-shadow: var(--schatten-hover); padding: 16px 18px; font-size: 14.5px; }
.einwilligung-box b { display: block; font-size: 16px; margin-bottom: 6px; }
.einwilligung-box p { margin: 0 0 12px; color: var(--text-2); }
.einwilligung-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.einwilligung-knoepfe .knopf { flex: 1 1 160px; }

/* 07.09.2026: schmale Displays (320–360 px). Der Menüknopf darf nie aus dem Kopf rutschen, der
   Markenname wird notfalls gekürzt, lange Wörter in Überschriften brechen um statt überzulaufen. */
.kopf .hülle { min-width: 0; }
.marke { min-width: 0; flex: 1 1 auto; }
.marke .logo { flex: none; }
.marke .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menue-knopf, .kopf-suche { flex: none; }
h1, h2, h3 { overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 767px) {
  .marke { font-size: 15px; letter-spacing: -0.02em; gap: 8px; }
  .marke .name { white-space: normal; line-height: 1.15; overflow: visible; }
}
@media (max-width: 360px) {
  .hülle { padding: 0 14px; }
  .marke { font-size: 14px; }
  h1 { font-size: 23px; }
}

/* Schieber (Ratgeber auf der Startseite): wischen auf dem Handy, Pfeile am Desktop */
.schieber { position: relative; }
.schieber-spur { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; padding: 4px 16px 8px; margin: 0 -16px; scrollbar-width: none; outline: none; }
.schieber-spur::-webkit-scrollbar { display: none; }
.schieber-spur > * { flex: 0 0 88%; scroll-snap-align: start; }
@media (min-width: 640px) { .schieber-spur > * { flex-basis: calc((100% - 12px) / 2); } }
@media (min-width: 768px) { .schieber-spur { margin: 0; padding: 4px 0 8px; } }
@media (min-width: 1000px) { .schieber-spur > * { flex-basis: calc((100% - 24px) / 3); } }
.schieber-knopf { display: none; position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 1px solid var(--linie-stark); box-shadow: var(--schatten); place-items: center; cursor: pointer; z-index: 2; font-size: 24px; line-height: 1; color: var(--text); font-family: inherit; padding: 0 0 3px; }
.schieber-knopf.links { left: -20px; } .schieber-knopf.rechts { right: -20px; }
.schieber-knopf:hover { background: var(--grau-hell); }
.schieber-knopf[disabled] { opacity: .3; cursor: default; }
@media (min-width: 768px) { .schieber-knopf { display: grid; } }
.schieber-punkte { display: flex; justify-content: center; gap: 6px; margin-top: 4px; }
.schieber-punkte span { width: 7px; height: 7px; border-radius: 50%; background: var(--linie-stark); transition: background .15s, transform .15s; }
.schieber-punkte span.aktiv { background: var(--akzent); transform: scale(1.25); }
@media (min-width: 768px) { .schieber-punkte { display: none; } }
a.karte.ratgeber-karte { padding: 16px; display: flex; flex-direction: column; gap: 8px; color: inherit; min-height: 100%; }
.ratgeber-karte .kicker { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--akzent); }
.ratgeber-karte h3 { margin: 0; font-size: 17px; line-height: 1.3; hyphens: manual; overflow-wrap: normal; }
.ratgeber-karte p { margin: 0; color: var(--text-2); font-size: 14.5px; flex: 1; }
.ratgeber-karte .weiter { font-weight: 600; font-size: 14.5px; color: var(--akzent); }