/* design.css — die Gestaltungsschicht 2026.
 *
 * site.css beschreibt, WAS auf einer Seite steht; diese Datei legt fest,
 * WIE es sich anfuehlt. Sie liegt hinter site.css und gewinnt deshalb bei
 * gleicher Spezifitaet. Drei Entscheidungen tragen alles:
 *
 *   1. Weiss auf Weiss, getrennt durch Linie und Schatten. Grund und
 *      Karten sind reinweiss; Tiefe entsteht aus Rand, Luft und einem
 *      leisen Schatten beim Zeigen, nicht aus Farbflaechen.
 *   2. Weiche Ecken, eine Skala. Medien und Karten 14–20 px, Knoepfe und
 *      Eingaben rund. Keine 3-px-Kanten mehr, keine Hairline-Gitter.
 *   3. Tinte statt Blau fuer Bewertungen. Blau bleibt Link und Datenfarbe
 *      der Karte; Sterne, Balken und Knoepfe sind schwarz. Das ist ruhiger
 *      und hebt die Karte hervor, statt mit ihr zu konkurrieren.
 *
 * Alles hier ist rein visuell. Kein Markup haengt an dieser Datei.
 */

/* ------------------------------------------------------------- Grundton */
::selection { background: rgba(10,70,200,.16); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
body { text-rendering: optimizeLegibility; }
img { border-radius: var(--r-s); }

/* ------------------------------------------------------------------ Kopf */
.nav {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line-dim);
}
.kopf-suche input {
  border-radius: 999px; background: var(--card); border-color: var(--line-dim);
  padding: 9px 16px 9px 36px; box-shadow: inset 0 1px 2px rgba(0,0,0,.04);
}
.kopf-suche input:focus { border-color: var(--text); box-shadow: 0 0 0 4px rgba(10,70,200,.10); }
.ks-lupe { left: 14px; }

/* --------------------------------------------------------------- Knoepfe */
.btn {
  border-radius: 999px; padding: 11px 20px; font-size: 14.5px; font-weight: 500;
  line-height: 1.2; box-shadow: var(--sh-1);
  transition: transform .18s var(--ease), background .18s, color .18s, box-shadow .18s var(--ease), border-color .18s;
}
.btn:hover { background: #2b2b2b; color: #fff; transform: translateY(-1px); box-shadow: var(--sh-2); }
.btn:active { transform: translateY(0); box-shadow: var(--sh-1); }
.btn.ghost { background: var(--card); color: var(--text); border: 1px solid var(--line); box-shadow: none; }
.btn.ghost:hover { background: var(--bg-lift); color: var(--text); border-color: var(--text); box-shadow: none; }
.btn.hell { background: #fff; color: #000; border: 1px solid #fff; box-shadow: none; }
.btn.hell:hover { background: rgba(255,255,255,.88); color: #000; }
.btn.geist { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.35); box-shadow: none; }
.btn.geist:hover { background: rgba(255,255,255,.08); color: #fff; border-color: #fff; }
.nav-tat .btn { padding: 9px 16px; font-size: 13.5px; box-shadow: none; }
.nav-tat .btn:hover { transform: none; }

/* Chips, Reiter, Filter: eine Pille, ein Zustand. */
.chip, .ik-tab, .rubriken a, .vk-b, .ow-stufe {
  border-radius: 999px; background: var(--card);
  transition: background .15s, color .15s, border-color .15s, transform .15s var(--ease);
}
.rubriken a { padding: 7px 14px; }
.ow-stufe { padding: 8px 6px; font-weight: 500; }
.ow-stufe.on, .ow-stufe:has(input:checked) {
  background: var(--text); border-color: var(--text); color: #fff;
}
.ow-stufen { gap: 6px; }

/* -------------------------------------------------------------- Eingaben */
input[type="text"], input[type="search"], input[type="number"], input[type="email"],
select, textarea,
.oc-grid input, .oc-grid select, .ent-sort select, .vgl-wahl select, .ent-suche input {
  font: inherit; font-size: 15px; color: var(--text);
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 11px 14px; box-shadow: inset 0 1px 2px rgba(0,0,0,.04);
  transition: border-color .15s, box-shadow .15s;
}
input[type="text"]:focus, input[type="search"]:focus, input[type="number"]:focus, input[type="email"]:focus,
select:focus, textarea:focus, .ent-suche input:focus {
  outline: none; border-color: var(--text); box-shadow: 0 0 0 4px rgba(10,70,200,.10);
}
select { appearance: none; -webkit-appearance: none; padding-right: 36px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%23706c65' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center; }
/* Die Kopfsuche bleibt eine Pille — sie steht nach den Regeln oben. */
.kopf-suche input { border-radius: 999px; padding: 9px 16px 9px 36px; font-size: 14px; }
/* Die grosse Suche auf der Startseite: das eine Feld, das man sieht. */
#start-suche {
  border-radius: 999px; height: 58px; padding: 0 24px; font-size: 16.5px;
  box-shadow: var(--sh-1); border-color: var(--line-dim);
}
#start-suche:focus { box-shadow: 0 0 0 4px rgba(10,70,200,.10), var(--sh-1); border-color: var(--text); }

/* ------------------------------------------------------------------ Hero */
.hero2 { padding: 76px 0 68px; border-bottom: 0; }
.hero2 h1 {
  font-size: clamp(36px, 4.1vw, 54px); line-height: 1.05; letter-spacing: -.034em;
  font-weight: 500; max-width: none;
}
.hero2-lead { letter-spacing: .02em; }
.hero2-rahmen { border-radius: var(--r-l); overflow: hidden; box-shadow: var(--sh-2); }
.hero2-bild img { border-radius: 0; aspect-ratio: 4 / 5; }
.hero2-bild figcaption { padding-top: 14px; font-weight: 500; color: var(--dim); }

/* Das dunkle Band wird eine dunkle Karte: liegt in der Spalte, hat Ecken,
   und die Seite dahinter bleibt Papier. */
.zusage { background: transparent; padding: 8px 32px 0; }
/* Die Karte ist 32 px breiter als die Textspalte (sie "blutet" in den
   Rand), ihr Text steht aber genau auf der Spaltenkante. */
.zusage > .band-in {
  background: #111111; border-radius: var(--r-xl);
  padding: 44px 32px 48px;
}
@media (max-width: 640px) {
  .zusage { padding: 0 16px; }
  .zusage > .band-in { padding: 34px 24px 36px; border-radius: 20px; }
}

/* ---------------------------------------------------- Karten und Gitter */
/* Vorher: Hairline-Gitter mit 1 px Fuge. Jetzt: weisse Karten auf Papier,
   mit Luft dazwischen und einem leichten Heben beim Zeigen. */
.dg, .rl, .tueren, .kacheln, .ent-gitter {
  gap: 14px; background: transparent; border: 0; border-block: 0;
}
.dg-e, .rl-e, .tuer, .kachel, .gk, .anb-kat a, .empf li, .wz, .zw-ziel, .start-liste, .anz a {
  background: var(--card); border: 1px solid var(--line-dim); border-radius: var(--r-m);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s;
}
.dg-e { overflow: hidden; }
.dg-link:hover, .tuer:hover, .kachel:hover, .gk:hover, .anb-kat a:hover, .empf li:hover, .wz:hover, .zw-ziel:hover {
  background: var(--card);
}
.dg-e:hover, .rl-e:hover, .tuer:hover, .kachel:hover, .gk:hover, .anb-kat a:hover, .zw-ziel:hover {
  transform: translateY(-2px); box-shadow: var(--sh-2); border-color: var(--line);
}
.gk { padding: 18px 16px 16px; }
.gk-form path { fill: var(--bg-lift); stroke: var(--dim); }
.gk-bar { height: 3px; border-radius: 2px; overflow: hidden; }
.gk-bar i { border-radius: 2px; }
.start-liste { padding: 22px 22px 20px; }
.dgz-delta { border-radius: 999px; padding: 4px 10px; }

/* Ranglisten: die Eins bleibt gross, der Rest ruhig. */
.rl-e { padding: 26px 26px 24px; }

/* ------------------------------------------------------ Bilder mit Quelle */
.bild-rahmen { border-radius: var(--r-l); overflow: hidden; box-shadow: var(--sh-1); }
.bild-rahmen img { border-radius: 0; display: block; }
.sg-bild, .st-bild, figure.strand img { border-radius: var(--r-m); }

/* -------------------------------------------------------- Bewertungen */
/* Fuenf Segmente statt fuenf Sterne, Tinte statt Blau. */
.eig-sterne { gap: 4px; align-items: center; }
.eig-sterne i {
  width: 22px; height: 6px; border-radius: 3px; clip-path: none;
  background: var(--bg-raise);
}
.eig-sterne i.voll { background: var(--text); }
.eig-sterne i.halb { background: linear-gradient(90deg, var(--text) 50%, var(--bg-raise) 50%); }
.eig-e summary { padding: 14px 0; }

/* Die Pole-Skalen: eine Spur, ein Ring. */
.pf-spur { height: 8px; border-radius: 999px; background: var(--bg-raise); }
.pf-balken { border-radius: 999px; opacity: .28; background: var(--accent); }
.pf-mitte { background: var(--line); }
.pf-punkt {
  width: 16px; height: 16px; margin: -8px 0 0 -8px;
  background: var(--text); border: 3px solid var(--card);
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}

/* ---------------------------------------------------------------- Tafeln */
/* Leitzahlen, Kennzahlen, kleine Kaesten: weiche Trennung statt Linien. */
.rail-b, .kpa, .abw-sp, .strk-leer { border-radius: var(--r-m); }
.rail-b { background: var(--card); border: 1px solid var(--line-dim); padding: 20px 22px 22px; }
.rail-b h2 { border-bottom: 0; padding-bottom: 0; }
.urteil { font-weight: 600; }
table { border-radius: var(--r-s); }
thead th { font-weight: 600; }

/* ------------------------------------------------------------------ Fuss */
.fuss { margin-top: 96px; border-top: 0; background: var(--bg-lift); }
.fuss-in {
  grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 40px 32px; padding: 60px 32px 40px;
}
.fuss-mark { font-size: 22px; }
.fuss-h { color: var(--text); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: 11px; }
.fuss-q a { font-size: 13.5px; }
.fuss-q a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.fuss-ende { border-top-color: var(--line-dim); padding: 20px 32px 44px; }
@media (max-width: 860px) {
  .fuss-in { grid-template-columns: 1fr 1fr; }
  .fuss-in > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 480px) { .fuss-in { grid-template-columns: 1fr; } }

/* -------------------------------------------------------- Rhythmus, Motion */
.ab-kopf { margin-bottom: 26px; }
.ab-kopf h2 { letter-spacing: -.022em; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .btn:hover, .dg-e:hover, .rl-e:hover, .tuer:hover, .kachel:hover, .gk:hover { transform: none; }
}

/* ------------------------------------------ Nachtraege aus der Durchsicht */
/* Strandfotos: gleiche Ecken wie alle Medien. */
.strk-e figure img { border-radius: var(--r-m); display: block; }
/* Gemeindekacheln auf der Startseite ("Wo die meisten Lizenzen liegen"):
   weisse Karte, Umriss auf hellem Grund, Heben beim Zeigen. */
.karte {
  background: var(--card); border: 1px solid var(--line-dim); border-radius: var(--r-m);
  padding: 12px 12px 14px; transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s;
}
.karte:hover { transform: translateY(-2px); box-shadow: var(--sh-2); border-color: var(--line); background: var(--card); }
.karte-bild { background: var(--bg-lift); border-radius: var(--r-s); }