/* ==========================================================================
   immocheck.it — Erscheinungsbild
   Hausschrift Open Sans, selbst ausgeliefert (keine Verbindung zu Google,
   damit die Datenschutzerklärung keinen Drittanbieter offenlegen muss).
   ========================================================================== */

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/assets/fonts/open-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/assets/fonts/open-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
                 U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --ink: #1A1B19; --enzian: #1B4B73; --laerche: #9C6210; --latsche: #2C6349;
  --rost: #8E3B23; --bg: #FFFFFF; --stein: #E9E7E0; --rand: #D6D3C9; --grau: #6B6A64;
  --schrift: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tempo: 280ms;
  --kurve: cubic-bezier(.22, .61, .36, 1);
  /* Eine Bahn für die ganze Seite: Kopf, Bühne, Text, Karte und Fuß stehen
     auf denselben Kanten. Der Rand wächst mit dem Fenster mit. */
  --bahn: 1120px;
  --bahn-rand: clamp(16px, 3vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--ink);
  font: 400 16px/1.65 var(--schrift);
  -webkit-font-smoothing: antialiased;
}
main { flex: 1; display: flex; flex-direction: column; }

a { color: var(--enzian); }
:focus-visible { outline: 2px solid var(--enzian); outline-offset: 3px; border-radius: 2px; }

.zum-inhalt { position: absolute; left: -9999px; background: var(--ink); color: #fff; padding: 12px 16px; z-index: 100; }
.zum-inhalt:focus { left: 16px; top: 8px; }

/* ── Ladebalken für den Seitenwechsel ──────────────────────────────────── */
.ladebalken {
  position: fixed; inset: 0 auto auto 0; height: 2px; width: 0;
  background: var(--enzian); z-index: 90; opacity: 0;
  transition: width 280ms var(--kurve), opacity 200ms;
}
.ladebalken.laeuft { opacity: 1; }

/* ── Seitenwechsel ─────────────────────────────────────────────────────── */
#view { opacity: 1; transform: none; transition: opacity 200ms var(--kurve), transform 200ms var(--kurve); }
#view.geht  { opacity: 0; transform: translateY(-6px); }
#view.kommt { opacity: 0; transform: translateY(8px); }

/* ── Bühne (Startseite) ───────────────────────────────────────────────── */
.buehne {
  position: relative; overflow: hidden;
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 52px 24px 68px;
  background-image: url("/assets/img/hero-klein.jpg");
  background-size: cover; background-position: 50% 78%; background-repeat: no-repeat;
}
@media (min-width: 820px) { .buehne { background-image: url("/assets/img/hero.jpg"); } }

/* Weißer Schleier von oben: die Wortmarke und die Überschrift sitzen damit auf
   ruhigem Grund, während die Bergkulisse unten sichtbar bleibt. Ohne das leidet
   die Lesbarkeit, sobald jemand die Seite bei Sonnenlicht am Handy ansieht. */
.buehne::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(to bottom,
              rgba(255,255,255,.82) 0%,
              rgba(255,255,255,.58) 42%,
              rgba(255,255,255,.20) 76%,
              rgba(255,255,255,0)   100%);
}

.buehne .motiv { display: none; }

.buehne-innen {
  position: relative; z-index: 2; width: 100%;
  max-width: var(--bahn); margin-inline: auto; padding-inline: var(--bahn-rand);
  text-align: left;   /* Logo und Text stehen links, auf allen Bildschirmen */
}

.marke { display: block; width: 100%; max-width: 330px; height: auto; margin: 0 auto 30px; }

/* Statusmarke — sagt in zwei Worten, woran man ist */
.stand-marke {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--latsche); background: color-mix(in srgb, var(--latsche) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--latsche) 28%, #fff); border-radius: 100px;
  padding: 5px 14px 5px 11px; margin: 0 0 22px;
}
.stand-marke .punkt {
  width: 7px; height: 7px; border-radius: 50%; background: var(--latsche);
  box-shadow: 0 0 0 3px rgba(44, 99, 73, .13);
}

h1 {
  font-size: clamp(25px, 4.4vw, 37px); font-weight: 600; line-height: 1.22;
  letter-spacing: -.024em; margin: 0 0 16px; text-wrap: balance;
}
h1 .akzent { color: var(--enzian); }

.vorsatz { color: var(--grau); max-width: 44ch; margin: 0 0 36px; font-size: 16.5px; }

/* Die vier Bereiche als farbige Karten. Jeder Bereich hat eine eigene Farbe
   aus der Markenpalette und ein eigenes Zeichen — so sind sie auf einen Blick
   auseinanderzuhalten, auch für jemanden, der nur kurz hinschaut. */
.saeulen {
  list-style: none; margin: 0 0 44px; padding: 0;
  display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 880px) { .saeulen { grid-template-columns: repeat(4, 1fr); gap: 14px; } }

.saeulen li {
  --farbe: var(--enzian);
  background: rgba(255,255,255,.92); backdrop-filter: blur(6px);
  border: 1px solid var(--rand); border-radius: 8px;
  padding: 18px 15px 17px; text-align: left;
  display: flex; flex-direction: column; gap: 5px;
  position: relative; overflow: hidden;
  transition: border-color 200ms var(--kurve), transform 200ms var(--kurve),
              box-shadow 200ms var(--kurve);
}
.saeulen li::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--farbe);
}
.saeulen li:hover {
  border-color: var(--farbe); transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(26, 27, 25, .07);
}
.saeulen .symbol {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 9px; margin-bottom: 4px;
  color: var(--farbe); background: color-mix(in srgb, var(--farbe) 10%, #fff);
}
.saeulen .bez { font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; }
.saeulen .txt { font-size: 12.5px; line-height: 1.45; color: var(--grau); }

/* Farbzuordnung. Die Auswahl muss mindestens so spezifisch sein wie ".saeulen li",
   sonst gewinnt dort die Voreinstellung und alle vier Karten wären blau. */
.saeulen li.s-kaufen, .saeulen-liste dt.s-kaufen { --farbe: var(--enzian); }
.saeulen li.s-mieten, .saeulen-liste dt.s-mieten { --farbe: var(--latsche); }
.saeulen li.s-wg,     .saeulen-liste dt.s-wg     { --farbe: var(--laerche); }
.saeulen li.s-gesuch, .saeulen-liste dt.s-gesuch { --farbe: var(--rost); }

.ansprache p { color: var(--grau); font-size: 15.5px; margin: 0 0 14px; }
.knopf {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--ink); color: #fff; text-decoration: none;
  font-size: 16px; font-weight: 600; padding: 13px 24px; border-radius: 6px;
  transition: background 180ms var(--kurve), transform 180ms var(--kurve);
}
.knopf:hover { background: #000; text-decoration: none; transform: translateY(-1px); }
.knopf svg { transition: transform 180ms var(--kurve); }
.knopf:hover svg { transform: translateX(3px); }
.kleingedruckt { font-size: 13.5px; margin: 18px 0 0; }
.kleingedruckt a { color: var(--enzian); }

@media (max-width: 720px) {
  /* Am Handy die Kulisse deutlicher: höherer Ausschnitt, weniger Schleier */
  .buehne { min-height: 78vh; background-position: 50% 62%; padding: 30px 18px 44px; }
  .buehne::after {
    background: linear-gradient(to bottom,
                rgba(255,255,255,.88) 0%,
                rgba(255,255,255,.62) 46%,
                rgba(255,255,255,.16) 82%,
                rgba(255,255,255,0)   100%);
  }
  .stand-marke { margin-bottom: 16px; }
}
@media (max-width: 560px) {
  .buehne { padding: 26px 16px 40px; }
  .marke { max-width: 258px; margin-bottom: 24px; }
  .vorsatz { margin-bottom: 32px; }
  .saeulen li { padding: 15px 13px 17px; }
}

/* ── Textseiten ────────────────────────────────────────────────────────── */
.papier { max-width: var(--bahn); margin: 0 auto; padding: 56px var(--bahn-rand) 72px; width: 100%; }
.papier .marke-klein { display: block; height: 34px; width: auto; }
.papier h1 { font-size: clamp(26px, 4vw, 32px); text-align: left; margin-bottom: 8px; }
.papier .stand { color: var(--grau); font-size: 14px; margin-bottom: 36px; }
.papier p, .papier li { color: #2c2d2a; }
.papier ul { padding-left: 20px; margin: 0 0 16px; }
.papier li { margin-bottom: 6px; }
.papier .block {
  border: 1px solid var(--rand); border-radius: 2px; padding: 20px 22px; margin: 0 0 28px;
}
.papier .block p:last-child { margin-bottom: 0; }
.papier dl { margin: 0 0 20px; display: grid; grid-template-columns: 1fr; gap: 2px 20px; }
@media (min-width: 620px) { .papier dl { grid-template-columns: 190px 1fr; } }
.papier dt { color: var(--grau); font-size: 14px; }
.papier dd { margin: 0 0 10px; }
.papier .hinweis {
  border-left: 3px solid var(--laerche); background: #fdfbf7;
  padding: 14px 18px; margin: 28px 0; font-size: 15px; color: #4a4841;
}

/* ── Fußzeile ──────────────────────────────────────────────────────────── */
.fuss {
  border-top: 1px solid var(--rand); background: #FCFBF9;
  /* Kein seitlicher Rand hier. Den setzen die Bahnen darin, genau wie bei
     Kopf, Bühne und Textseiten. Lag er außen, stand der Fuß um die Randbreite
     weiter links als der Inhalt darüber. */
  padding: 44px 0 24px; color: var(--grau); font-size: 14.5px;
  /* Platz für die Daumenleiste, damit sie nichts verdeckt */
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
}
.fuss-oben {
  max-width: var(--bahn); margin: 0 auto 30px; padding-inline: var(--bahn-rand);
  display: grid; gap: 30px; grid-template-columns: 1fr;
}
@media (min-width: 640px) { .fuss-oben { grid-template-columns: 1fr 1fr; gap: 30px 40px; } }
@media (min-width: 940px) { .fuss-oben { grid-template-columns: 2fr 1fr 1fr 1fr; } }

.fuss-marke .marke-fuss { height: 30px; width: auto; display: block; }
.fuss-marke .marke-link { margin-bottom: 14px; }
.fuss-marke p { margin: 0 0 12px; max-width: 42ch; line-height: 1.6; }
.fuss-kontakt a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rand); }
.fuss-kontakt a:hover { color: var(--enzian); }

.fuss-spalte h2 {
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink); margin: 0 0 12px;
}
.fuss-spalte ul { list-style: none; margin: 0; padding: 0; }
.fuss-spalte li { margin-bottom: 8px; }
.fuss-spalte a { color: var(--grau); text-decoration: none; }
.fuss-spalte a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.fuss-spalte .bald { color: #a3a29c; }
.fuss-notiz { font-size: 12px; color: #a3a29c; margin: 10px 0 0; font-style: italic; }

.fuss-unten {
  max-width: var(--bahn); margin: 0 auto; padding: 18px var(--bahn-rand) 0;
  border-top: 1px solid var(--stein);
  display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; font-size: 13px;
}
.fuss-sprache a { color: var(--grau); text-decoration: none; margin-left: 14px; }
.fuss-sprache a:first-child { margin-left: 0; }
.fuss-sprache a[aria-current] { color: var(--ink); font-weight: 600; }

/* ── Daumenleiste (nur Handy) ──────────────────────────────────────────── */
.daumenleiste { display: none; }
@media (max-width: 720px) {
  .daumenleiste {
    /* Eine Zeile, egal wie viele Wege es sind. Feste drei Spalten hatten bei
       fuenf Punkten eine zweite Zeile erzwungen; grid-auto-flow verteilt
       stattdessen, was da ist, gleichmaessig auf eine Reihe. */
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    background: rgba(255,255,255,.96); backdrop-filter: blur(10px);
    border-top: 1px solid var(--rand);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .daumenleiste a {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 9px 4px 8px; text-decoration: none; color: var(--grau);
    font-size: 11.5px; font-weight: 600; min-height: 54px; justify-content: center;
  }
  .daumenleiste a:active { background: var(--stein); }
  .daumenleiste .dl-kontakt { color: var(--enzian); }
  body { padding-bottom: 62px; }
  .fuss { padding-bottom: calc(30px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marke-svg *, .einblenden, #view {
    animation: none !important; transition: none !important;
    opacity: 1 !important; transform: none !important;
    stroke-dashoffset: 0 !important;
  }
  .ladebalken { display: none; }
}

/* ── Einwilligung ──────────────────────────────────────────────────────── */
.einwilligung {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: #fff; border-top: 1px solid var(--rand);
  box-shadow: 0 -2px 16px rgba(26, 27, 25, .06);
  transform: translateY(100%); transition: transform 320ms var(--kurve);
}
.einwilligung.sichtbar { transform: none; }
.einwilligung-innen {
  max-width: var(--bahn); margin: 0 auto; padding: 16px var(--bahn-rand);
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; justify-content: space-between;
}
.einwilligung p { margin: 0; font-size: 14px; color: var(--grau); max-width: 68ch; line-height: 1.55; }
.einwilligung-knoepfe { display: flex; gap: 10px; flex-shrink: 0; }
.einwilligung button {
  font: 600 14px/1 "Open Sans", system-ui, sans-serif; padding: 11px 20px;
  border-radius: 6px; cursor: pointer; border: 1px solid var(--rand); white-space: nowrap;
}
.einwilligung .knopf-schlicht { background: #fff; color: var(--ink); }
.einwilligung .knopf-schlicht:hover { border-color: var(--ink); }
.einwilligung .knopf-voll { background: var(--ink); color: #fff; border-color: var(--ink); }
.einwilligung .knopf-voll:hover { background: #000; }
@media (max-width: 620px) {
  .einwilligung-innen { padding: 14px 16px; }
  .einwilligung-knoepfe { width: 100%; }
  .einwilligung button { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .einwilligung { transition: none; } }

/* ── Fließtext-Abschnitt (SEO und Erklärung) ───────────────────────────── */
.lesetext { border-top: 1px solid var(--stein); background: #FCFBF9; }
.lesetext-innen { max-width: var(--bahn); margin: 0 auto; padding: 56px var(--bahn-rand) 64px; }
.lesetext h2 { font-size: clamp(21px, 3vw, 26px); font-weight: 600; letter-spacing: -.02em; margin: 0 0 18px; }
.lesetext h3 { font-size: 17px; font-weight: 600; margin: 34px 0 10px; }
.lesetext p  { margin: 0 0 16px; color: #2c2d2a; }
.lesetext a  { color: var(--enzian); }
.lesetext strong { font-weight: 600; }
.lesetext em { font-style: italic; color: var(--grau); }

.saeulen-liste { margin: 22px 0 8px; }
.saeulen-liste dt {
  --farbe: var(--enzian);
  display: flex; align-items: center; gap: 9px;
  font-size: 16.5px; font-weight: 600; margin-top: 24px; color: var(--ink);
}
.saeulen-liste dt .zeichen {
  flex: 0 0 auto; color: var(--farbe);
  background: color-mix(in srgb, var(--farbe) 10%, #fff);
  border-radius: 7px; padding: 5px; box-sizing: content-box;
}
.saeulen-liste dd {
  margin: 7px 0 0 0; padding-left: 39px; color: #4a4b47;
  border-left: 2px solid color-mix(in srgb, var(--farbe) 25%, #fff);
  margin-left: 14px; padding-bottom: 2px;
}
.saeulen-liste dt.s-kaufen + dd { --farbe: var(--enzian); }
.saeulen-liste dt.s-mieten + dd { --farbe: var(--latsche); }
.saeulen-liste dt.s-wg     + dd { --farbe: var(--laerche); }
.saeulen-liste dt.s-gesuch + dd { --farbe: var(--rost); }

@media (max-width: 560px) { .lesetext-innen { padding: 40px 16px 48px; } }

.lesetext .schlusswort {
  margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--stein);
  font-size: 16.5px; color: var(--ink);
}

.lesetext .fragen { list-style: none; margin: 0 0 18px; padding: 0; }
.lesetext .fragen li {
  position: relative; padding: 7px 0 7px 26px; color: #2c2d2a;
  border-bottom: 1px solid var(--stein);
}
.lesetext .fragen li:last-child { border-bottom: 0; }
.lesetext .fragen li::before {
  content: "?"; position: absolute; left: 0; top: 8px;
  width: 19px; height: 19px; border-radius: 50%;
  background: color-mix(in srgb, var(--enzian) 12%, #fff); color: var(--enzian);
  font-size: 11px; font-weight: 700; line-height: 19px; text-align: center;
}
.lesetext .fragen li:nth-child(2)::before { background: color-mix(in srgb, var(--latsche) 12%, #fff); color: var(--latsche); }
.lesetext .fragen li:nth-child(3)::before { background: color-mix(in srgb, var(--laerche) 12%, #fff); color: var(--laerche); }

/* ── Zurück-Weg auf Unterseiten ────────────────────────────────────────── */
.zurueck {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 600; color: var(--grau); text-decoration: none;
  border: 1px solid var(--rand); border-radius: 100px; padding: 7px 15px 7px 12px;
  margin-bottom: 28px;
  transition: color 180ms var(--kurve), border-color 180ms var(--kurve), background 180ms var(--kurve);
}
.zurueck:hover { color: var(--ink); border-color: var(--ink); background: #fff; text-decoration: none; }
.zurueck svg { transition: transform 180ms var(--kurve); }
.zurueck:hover svg { transform: translateX(-2px); }

/* ── Logo als Weg zur Startseite ───────────────────────────────────────── */
.marke-link {
  display: inline-block; text-decoration: none; margin-bottom: 44px;
  transform-origin: left center;
  transition: transform 260ms var(--kurve);
}
.marke-link .marke-klein { display: block; height: 34px; width: auto; margin: 0; }
.marke-link:hover { transform: translateY(-1px); }

/* Beim Überfahren klappt der Flügel kurz zu und wieder auf, und die
   Wortmarke rückt einen Hauch nach. Ein kleines Lebenszeichen, kein Feuerwerk. */
.marke-link .sig-fluegel {
  transform-box: fill-box; transform-origin: left center;
  transition: transform 320ms var(--kurve);
}
.marke-link:hover .sig-fluegel { transform: scaleX(.34); }
.marke-link .wort-check { transition: opacity 320ms var(--kurve); }
.marke-link:hover .wort-check { opacity: .68; }
.marke-link .feld { transform-box: fill-box; transform-origin: center; transition: transform 320ms var(--kurve); }
.marke-link:hover .feld { transform: scale(1.09); }

.marke-link:focus-visible { outline: 2px solid var(--enzian); outline-offset: 6px; border-radius: 3px; }

@media (prefers-reduced-motion: reduce) {
  .marke-link, .marke-link * { transition: none !important; }
  .marke-link:hover .sig-fluegel, .marke-link:hover .feld { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Unterseiten: Kopfbereich, Visitenkarten, Rechtsabschnitte
   ══════════════════════════════════════════════════════════════════════════ */

.seitenkopf {
  position: relative; overflow: hidden;
  background-image: url("/assets/img/hero-klein.jpg");
  background-size: cover; background-position: 50% 70%;
  border-bottom: 1px solid var(--rand);
}
@media (min-width: 820px) { .seitenkopf { background-image: url("/assets/img/hero.jpg"); } }
.seitenkopf::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,.88) 0%, rgba(255,255,255,.66) 100%);
}
.seitenkopf-innen {
  position: relative; z-index: 1;
  max-width: var(--bahn); margin: 0 auto; padding: 26px var(--bahn-rand) 40px;
}
.seitenkopf .zurueck { margin-bottom: 22px; background: rgba(255,255,255,.7); }
.seitenkopf .marke-link { margin-bottom: 26px; }
.seitenkopf h1 {
  font-size: clamp(27px, 4.5vw, 38px); font-weight: 600; letter-spacing: -.025em;
  line-height: 1.15; margin: 0 0 10px;
}
/* Volle Bahn, wie überall. Die 58 Zeichen liessen die Unterzeile nach einem
   Drittel umbrechen, während die Überschrift darüber durchlief. */
.seitenkopf .unterzeile { color: var(--grau); margin: 0; font-size: 15px; }

.papier { max-width: var(--bahn); margin: 0 auto; padding: 40px var(--bahn-rand) 72px; width: 100%; }

/* ── Visitenkarten ─────────────────────────────────────────────────────── */
.visitenkarten { display: grid; gap: 16px; margin-bottom: 32px; }
@media (min-width: 760px) { .visitenkarten { grid-template-columns: 1fr 1fr; } }

.visite {
  --farbe: var(--enzian);
  position: relative; background: #fff; border: 1px solid var(--rand);
  border-radius: 10px; padding: 22px 22px 20px; overflow: hidden;
}
.visite::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--farbe); }
.v-umsetzung { --farbe: var(--laerche); }

.visite .rolle {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--farbe);
  background: color-mix(in srgb, var(--farbe) 10%, #fff);
  border-radius: 4px; padding: 4px 9px; margin-bottom: 12px;
}
.visite h2 { font-size: 19px; font-weight: 600; letter-spacing: -.015em; margin: 0 0 4px; }
.visite .inhaber { font-size: 13.5px; color: var(--grau); margin: 0 0 12px; }
.visite address {
  font-style: normal; color: #3a3b37; font-size: 14.5px; line-height: 1.65;
  margin: 10px 0 16px; padding-left: 13px; border-left: 2px solid var(--stein);
}
.visite .kontaktliste { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 9px; }
.visite .kontaktliste li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; }
.visite .kontaktliste svg { flex: 0 0 auto; color: var(--farbe); }
.visite .kontaktliste a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rand); }
.visite .kontaktliste a:hover { color: var(--farbe); border-color: currentColor; }
.visite .kennzahl {
  margin: 0; padding-top: 13px; border-top: 1px solid var(--stein);
  font-size: 13.5px; font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.visite .kennzahl span { color: var(--grau); margin-right: 8px; }

/* ── Ansprache-Streifen ────────────────────────────────────────────────── */
.ansprechbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px 24px; background: var(--stein); border-radius: 10px;
  padding: 22px 24px; margin-bottom: 38px;
}
.ansprechbar h2 { font-size: 18px; font-weight: 600; margin: 0 0 3px; }
.ansprechbar p { margin: 0; color: #4a4b47; font-size: 14.5px; }

/* ── Rechtsabschnitte ──────────────────────────────────────────────────── */
.rechtliches { display: grid; gap: 26px; margin-bottom: 34px; }
@media (min-width: 700px) { .rechtliches { grid-template-columns: 1fr 1fr; gap: 28px 34px; } }
.rechtliches h3 {
  font-size: 15px; font-weight: 600; margin: 0 0 7px; padding-left: 11px;
  border-left: 3px solid var(--enzian); line-height: 1.3;
}
.rechtliches p { margin: 0; color: #4a4b47; font-size: 14.5px; line-height: 1.62; }
.rechtliches section:nth-child(2) h3 { border-color: var(--latsche); }
.rechtliches section:nth-child(3) h3 { border-color: var(--laerche); }
.rechtliches section:nth-child(4) h3 { border-color: var(--rost); }

.hinweis {
  border: 1px solid color-mix(in srgb, var(--laerche) 30%, #fff);
  background: color-mix(in srgb, var(--laerche) 5%, #fff);
  border-radius: 10px; padding: 18px 20px; margin: 0 0 34px;
  font-size: 14px; line-height: 1.6; color: #4a4841;
}
.hinweis strong { color: var(--laerche); }

/* ── Weiterführende Wege am Seitenende ─────────────────────────────────── */
.weiter { display: grid; gap: 12px; }
@media (min-width: 620px) { .weiter { grid-template-columns: 1fr 1fr; } }
.weiter a {
  display: flex; flex-direction: column; gap: 2px;
  border: 1px solid var(--rand); border-radius: 10px; padding: 15px 18px;
  text-decoration: none; background: #fff;
  transition: border-color 180ms var(--kurve), transform 180ms var(--kurve);
}
.weiter a:hover { border-color: var(--ink); transform: translateY(-1px); text-decoration: none; }
.weiter .klein { font-size: 12px; color: var(--grau); }
.weiter .gross { font-size: 16.5px; font-weight: 600; color: var(--ink); }

/* Das Logo ist überall der Weg zur Startseite, auch auf der Startseite selbst. */
.marke-gross { display: block; margin: 0 0 28px; max-width: 300px; }
.marke-gross .marke { margin: 0; }
@media (max-width: 560px) { .marke-gross { max-width: 232px; margin-bottom: 22px; } }

/* ══════════════════════════════════════════════════════════════════════════
   Formulare, Argumente, Ablauf
   ══════════════════════════════════════════════════════════════════════════ */

.papier.schmal { max-width: var(--bahn); }

.anfrage { margin: 0 0 40px; }
.feldreihe { display: grid; gap: 0; }
@media (min-width: 620px) { .feldreihe { grid-template-columns: 1fr 1fr; gap: 0 18px; } }

.feld { margin: 0 0 18px; }
.feld label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; color: var(--ink); }
.feld .freiwillig { font-weight: 400; color: var(--grau); font-size: 12.5px; margin-left: 5px; }
.feld input[type=text], .feld input[type=email], .feld input[type=tel], .feld textarea {
  width: 100%; font: 400 16px/1.5 var(--schrift); color: var(--ink);
  background: #fff; border: 1px solid var(--rand); border-radius: 8px;
  padding: 13px 14px; transition: border-color 160ms var(--kurve), box-shadow 160ms var(--kurve);
  /* 16px verhindert, dass iPhones beim Antippen hineinzoomen */
}
.feld textarea { resize: vertical; min-height: 130px; }
.feld input:focus, .feld textarea:focus {
  outline: none; border-color: var(--enzian);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--enzian) 15%, transparent);
}
.feld.fehlt input, .feld.fehlt textarea { border-color: var(--rost); }
.fehlertext { display: block; margin-top: 6px; font-size: 13px; color: var(--rost); }

.zustimmung label { display: flex; gap: 11px; align-items: flex-start; font-weight: 400; font-size: 14px; line-height: 1.55; }
.zustimmung input[type=checkbox] { width: 20px; height: 20px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--enzian); }

.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.knopf-breit { width: 100%; justify-content: center; padding: 15px 24px; font-size: 16.5px; }
@media (min-width: 620px) { .knopf-breit { width: auto; } }

.rueckmeldung {
  display: flex; gap: 12px; align-items: flex-start;
  border-radius: 10px; padding: 16px 18px; margin: 0 0 26px; font-size: 15px;
}
.rueckmeldung p { margin: 0; }
.rueckmeldung svg { flex: 0 0 auto; margin-top: 2px; }
.rueckmeldung.gut {
  background: color-mix(in srgb, var(--latsche) 8%, #fff); color: #23503c;
  border: 1px solid color-mix(in srgb, var(--latsche) 30%, #fff);
}
.rueckmeldung.schlecht {
  background: color-mix(in srgb, var(--rost) 7%, #fff); color: #74301d;
  border: 1px solid color-mix(in srgb, var(--rost) 30%, #fff);
}

.direktwege { border-top: 1px solid var(--stein); padding-top: 26px; }
.direktwege h2 { font-size: 17px; font-weight: 600; margin: 0 0 14px; }
.direktwege ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.direktwege li { display: grid; grid-template-columns: 92px 1fr; gap: 12px; font-size: 14.5px; align-items: start; }
.direktwege .was { color: var(--grau); font-size: 13px; padding-top: 1px; }
.direktwege a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rand); }
.direktwege a:hover { color: var(--enzian); }

/* Argumente auf der Maklerseite */
.argumente h2, .ablauf h2, .anmeldung h2 {
  font-size: clamp(20px, 3vw, 25px); font-weight: 600; letter-spacing: -.02em; margin: 0 0 20px;
}
.argument-raster { display: grid; gap: 16px; margin-bottom: 42px; }
@media (min-width: 720px) { .argument-raster { grid-template-columns: 1fr 1fr; } }
.argument {
  --farbe: var(--enzian);
  background: #fff; border: 1px solid var(--rand); border-radius: 10px;
  padding: 20px 20px 18px; position: relative; overflow: hidden;
}
.argument::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--farbe); }
.argument .symbol {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px; margin-bottom: 12px;
  color: var(--farbe); background: color-mix(in srgb, var(--farbe) 10%, #fff);
}
.argument h3 { font-size: 16.5px; font-weight: 600; margin: 0 0 7px; letter-spacing: -.01em; }
.argument p { margin: 0; color: #4a4b47; font-size: 14.5px; line-height: 1.6; }

.schritte { list-style: none; margin: 0 0 38px; padding: 0; display: grid; gap: 20px; }
.schritte li { display: grid; grid-template-columns: 40px 1fr; gap: 16px; align-items: start; }
.schritte .nummer {
  width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: #fff; font-weight: 600; font-size: 16px;
}
.schritte h3 { font-size: 16.5px; font-weight: 600; margin: 8px 0 5px; }
.schritte p { margin: 0; color: #4a4b47; font-size: 14.5px; line-height: 1.6; }

.anmeldung { border-top: 1px solid var(--stein); padding-top: 34px; margin-top: 8px; }
.anmeldung .einleitung { color: var(--grau); margin-bottom: 24px; max-width: 52ch; }

/* ══════════════════════════════════════════════════════════════════════════
   Eigene Südtirol-Karte
   ══════════════════════════════════════════════════════════════════════════ */
.kartenraum { max-width: var(--bahn); margin: 0 auto; padding: 26px var(--bahn-rand) 8px; }

.karten-werkzeug {
  display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center;
  margin-bottom: 18px;
}
.suchfeld {
  display: flex; align-items: center; gap: 9px; flex: 1 1 260px; max-width: 340px;
  border: 1px solid var(--rand); border-radius: 8px; padding: 0 13px; background: #fff;
  transition: border-color 160ms var(--kurve), box-shadow 160ms var(--kurve);
}
.suchfeld:focus-within { border-color: var(--enzian); box-shadow: 0 0 0 3px color-mix(in srgb, var(--enzian) 14%, transparent); }
.suchfeld svg { color: var(--grau); flex: 0 0 auto; }
.suchfeld input { border: 0; outline: none; padding: 12px 0; font: 400 15px var(--schrift); width: 100%; background: none; }
.verborgen { position: absolute; left: -9999px; }

.bezirksliste { display: flex; flex-wrap: wrap; gap: 6px; }
.bezirksliste button {
  --ton: var(--grau);
  font: 600 12.5px/1 var(--schrift); color: var(--grau); cursor: pointer;
  background: #fff; border: 1px solid var(--rand); border-radius: 100px; padding: 7px 12px;
  display: inline-flex; align-items: center; gap: 6px;
  transition: border-color 160ms var(--kurve), color 160ms var(--kurve);
}
.bezirksliste button::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ton);
}
.bezirksliste button[data-bezirk=""]::before { display: none; }
.bezirksliste button span { color: #a3a29c; font-weight: 400; }
.bezirksliste button:hover { color: var(--ink); border-color: var(--ton); }
.bezirksliste button.an { color: #fff; background: var(--ink); border-color: var(--ink); }
.bezirksliste button.an span { color: rgba(255,255,255,.6); }

/* Karte und Angaben stehen nebeneinander. Die rechte Spalte ist geschlossen,
   solange nichts ausgewählt ist, und fährt weich auf — die Karte wird dabei
   schmaler, statt von einem Kasten verdeckt zu werden. */
.kartenbuehne {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 0px;
  column-gap: 0;
  align-items: start;
  transition: grid-template-columns 320ms var(--kurve), column-gap 320ms var(--kurve);
}
.kartenbuehne.mit-seite { grid-template-columns: minmax(0, 1fr) 274px; column-gap: 22px; }
.kartenflaeche { min-width: 0; }
.karten-seite {
  min-width: 0; overflow: hidden;
  display: grid; gap: 12px; align-content: start;
  position: sticky; top: 96px;
}
/* Wer weniger Bewegung möchte, bekommt den Sprung ohne Übergang. */
@media (prefers-reduced-motion: reduce) { .kartenbuehne { transition: none; } }
svg.suedtirol { display: block; width: 100%; height: auto; }
svg.suedtirol .gemeinde {
  --ton: var(--enzian);
  fill: color-mix(in srgb, var(--ton) 16%, #fff);
  stroke: #fff; stroke-width: 1; cursor: pointer;
  transition: fill 140ms var(--kurve), opacity 200ms var(--kurve);
}
svg.suedtirol .gemeinde:hover, svg.suedtirol .beruehrt { fill: color-mix(in srgb, var(--ton) 42%, #fff); }
svg.suedtirol .gewaehlt { fill: var(--ton); stroke: var(--ink); stroke-width: 1.4; }
svg.suedtirol .gedimmt { opacity: .18; }
svg.suedtirol .gefunden { fill: color-mix(in srgb, var(--ton) 55%, #fff); }

.karten-info {
  position: relative; width: 274px;
  background: #fff;
  border: 1px solid var(--rand); border-radius: 10px; padding: 16px 18px 14px;
  box-shadow: 0 6px 22px rgba(26,27,25,.07);
  animation: infoAuf 260ms var(--kurve) both;
}
@keyframes infoAuf { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .karten-info { animation: none; } }
.karten-info .zu {
  position: absolute; right: 8px; top: 6px; border: 0; background: none; cursor: pointer;
  font-size: 21px; line-height: 1; color: var(--grau); padding: 3px 6px;
}
.karten-info .zu:hover { color: var(--ink); }
.karten-info .bezirk {
  --ton: var(--enzian);
  display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ton);
  background: color-mix(in srgb, var(--ton) 11%, #fff);
  border-radius: 4px; padding: 3px 8px; margin-bottom: 9px;
}
.karten-info .name-de { display: block; font-size: 19px; font-weight: 600; letter-spacing: -.015em; }
.karten-info .name-it { display: block; color: var(--grau); font-size: 13.5px; margin-bottom: 12px; }
.karten-info dl { margin: 0; display: grid; gap: 7px; padding-top: 11px; border-top: 1px solid var(--stein); }
.karten-info dl div { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.karten-info dt { color: var(--grau); }
.karten-info dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.karten-info .objekte { color: var(--grau); font-weight: 400; }

.kartenquelle { font-size: 12.5px; color: var(--grau); margin: 10px 0 0; text-align: right; }

/* Schmalere Fenster: die Spalte daneben wäre zu eng, also stapeln.
   Die Angaben stehen dann unter der Karte, weiterhin nicht darüber. */
@media (max-width: 980px) {
  .kartenbuehne, .kartenbuehne.mit-seite {
    grid-template-columns: minmax(0, 1fr); column-gap: 0; row-gap: 14px;
  }
  .karten-seite { position: static; grid-auto-flow: row; }
  .karten-info { width: auto; }
}
@media (max-width: 780px) {
  .kartenraum { padding: 18px 14px 4px; }
  .bezirksliste { gap: 5px; }
  .bezirksliste button { font-size: 11.5px; padding: 6px 10px; }
}

/* Objektnadeln: die Farbe sagt, ob konventioniert oder freier Markt */
.pin {
  --farbe: var(--enzian);
  position: relative; border: 0; cursor: pointer; padding: 0;
  background: none; font: 600 12.5px/1 var(--schrift);
}
.pin span {
  display: block; background: var(--farbe); color: #fff;
  padding: 6px 10px; border-radius: 100px; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(26,27,25,.28);
  border: 2px solid #fff;
}
.pin::after {
  content: ""; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%);
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 6px solid var(--farbe);
}
.pin-konventioniert { --farbe: var(--laerche); }
.pin:hover span, .pin:focus-visible span { filter: brightness(1.12); }

.maplibregl-popup-content {
  border-radius: 10px; padding: 14px 16px; font-family: var(--schrift);
  border: 1px solid var(--rand); box-shadow: 0 6px 22px rgba(26,27,25,.14);
}
.pin-karte { display: grid; gap: 3px; min-width: 178px; }
.pin-badge {
  justify-self: start; font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; border-radius: 3px; padding: 3px 7px; margin-bottom: 4px;
}
.pin-badge.b-frei { color: var(--enzian); background: color-mix(in srgb, var(--enzian) 11%, #fff); }
.pin-badge.b-konv { color: var(--laerche); background: color-mix(in srgb, var(--laerche) 11%, #fff); }
.pin-karte strong { font-size: 15px; }
.pin-ort { color: var(--grau); font-size: 13px; }
.pin-preis { font-weight: 600; font-size: 16px; margin-top: 3px; }
.pin-register { font-size: 11.5px; color: var(--grau); letter-spacing: .02em; margin-top: 5px;
                padding-top: 6px; border-top: 1px solid var(--stein); }

/* ── Kennzahlen über der Karte ─────────────────────────────────────────── */
.kennzahlen {
  display: grid; gap: 10px; margin-bottom: 18px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 700px)  { .kennzahlen { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1000px) { .kennzahlen { grid-template-columns: repeat(6, 1fr); } }
.kennzahl {
  background: #fff; border: 1px solid var(--rand); border-radius: 8px;
  padding: 13px 14px 12px; display: flex; flex-direction: column; gap: 2px;
}
.kennzahl .wert {
  font-size: 21px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.kennzahl .wert.klein { font-size: 16px; }
.kennzahl .einheit { font-size: 13px; font-weight: 400; color: var(--grau); }
.kennzahl .bez { font-size: 11.5px; color: var(--grau); line-height: 1.35; }
.kennzahl.breit { grid-column: span 2; }
@media (min-width: 1000px) { .kennzahl.breit { grid-column: span 1; } }

.ansicht-wahl { display: flex; gap: 2px; background: var(--stein); border-radius: 8px; padding: 3px; }
.ansicht-wahl button {
  font: 600 12.5px/1 var(--schrift); color: var(--grau); cursor: pointer;
  background: none; border: 0; border-radius: 6px; padding: 8px 13px;
  transition: background 150ms var(--kurve), color 150ms var(--kurve);
}
.ansicht-wahl button:hover { color: var(--ink); }
.ansicht-wahl button.an { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(26,27,25,.1); }

/* Die Legende sitzt in derselben Spalte wie die Angaben, nicht auf der Karte. */
.legende {
  position: relative; width: 274px;
  background: #fff; border: 1px solid var(--rand);
  border-radius: 8px; padding: 10px 12px 8px;
}
.legende .titel { font-size: 11px; font-weight: 700; letter-spacing: .07em;
                  text-transform: uppercase; color: var(--grau); }
.legende .skala { display: flex; gap: 2px; margin: 7px 0 5px; }
.legende .skala span { flex: 1; height: 9px; border-radius: 2px; background: var(--t); }
.legende .enden { display: flex; justify-content: space-between; font-size: 11px; color: var(--grau); }
@media (max-width: 980px) { .legende { width: auto; } }

/* Bei der Einwohner-Ansicht die Fläche voll einfärben statt aufzuhellen */
svg.suedtirol .gemeinde[data-voll] { fill: var(--ton); }
svg.suedtirol .gemeinde[data-voll]:hover { fill: color-mix(in srgb, var(--ton) 78%, #000); }

/* ══════════════════════════════════════════════════════════════════════════
   Kopfleiste — auf allen Seiten, Logo links außen, beim Scrollen fest
   ══════════════════════════════════════════════════════════════════════════ */
.kopfleiste {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(12px) saturate(1.2);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--kurve), background 200ms var(--kurve),
              box-shadow 200ms var(--kurve);
}
/* Sobald gescrollt wird, hebt sich die Leiste vom Inhalt ab */
.kopfleiste.geschoben {
  background: rgba(255,255,255,.96);
  border-bottom-color: var(--rand);
  box-shadow: 0 1px 12px rgba(26,27,25,.05);
}

/* Volle Seitenbreite nutzen, nur ein ruhiger Rand */
.kopf-innen {
  display: flex; align-items: center; gap: 20px;
  /* Die Kopfleiste nutzt die ganze Breite. Sie ist der Rahmen der Seite und
     kein Inhalt; ein Rahmen, der in der Mitte endet, wirkt eingeschnürt. */
  width: 100%; padding: 0 clamp(14px, 2.4vw, 34px);
  min-height: 80px;
  transition: min-height 200ms var(--kurve);
}
.kopfleiste.geschoben .kopf-innen { min-height: 66px; }

.kopf-marke { display: flex; align-items: center; flex: 0 0 auto; text-decoration: none; }
/* Am Rechner trägt die Marke die Leiste. Beim Scrollen wird sie kleiner,
   bleibt aber deutlich größer als die Navigation daneben. */
.kopf-logo { display: block; height: 38px; width: auto; transition: height 200ms var(--kurve); }
.kopfleiste.geschoben .kopf-logo { height: 31px; }
.kopf-marke:hover .sig-fluegel { transform: scaleX(.4); }
.kopf-marke .sig-fluegel { transform-box: fill-box; transform-origin: left center;
                           transition: transform 300ms var(--kurve); }

.kopf-nav { display: flex; gap: 4px; margin-left: 14px; }
.kopf-nav a {
  color: var(--grau); font-size: 14.5px; font-weight: 600; text-decoration: none;
  padding: 8px 12px; border-radius: 7px; white-space: nowrap;
  transition: color 160ms var(--kurve), background 160ms var(--kurve);
}
.kopf-nav a:hover { color: var(--ink); background: var(--stein); text-decoration: none; }

.kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.kopf-sprache { font-size: 12.5px; font-weight: 600; letter-spacing: .04em; }
.kopf-sprache a { color: #a3a29c; text-decoration: none; }
.kopf-sprache a:hover { color: var(--ink); }
.kopf-sprache a[aria-current] { color: var(--ink); }
.kopf-sprache .teiler { color: var(--rand); margin: 0 5px; }

.kopf-knopf {
  background: var(--ink); color: #fff; text-decoration: none;
  font-size: 14px; font-weight: 600; padding: 9px 17px; border-radius: 7px;
  white-space: nowrap; transition: background 160ms var(--kurve);
}
.kopf-knopf:hover { background: #000; color: #fff; text-decoration: none; }

/* Zwischen 781 und 1020 px wird es neben der Navigation eng — dort etwas
   zurücknehmen, damit nichts umbricht. */
@media (max-width: 1020px) and (min-width: 781px) {
  .kopf-innen { min-height: 70px; }
  .kopf-logo  { height: 32px; }
  .kopfleiste.geschoben .kopf-logo { height: 28px; }
  .kopf-nav { margin-left: 6px; }
  .kopf-nav a { padding: 8px 9px; }
}
@media (max-width: 780px) {
  .kopf-nav { display: none; }          /* unten liegt die Daumenleiste */
  .kopf-innen { min-height: 56px; gap: 12px; }
  .kopf-logo { height: 23px; }
  .kopf-knopf { padding: 8px 14px; font-size: 13.5px; }
}
@media (max-width: 380px) {
  .kopf-sprache { display: none; }
}

/* Die Bühne beginnt jetzt unter der Leiste und darf die volle Breite nutzen */
.buehne { padding-top: 40px; }
.seitenkopf-innen { padding-top: 34px; }
.seitenkopf .zurueck { margin-bottom: 18px; }

/* Lange Zusammensetzungen wie "Immobilienplattform" dürfen am Handy notfalls
   getrennt werden, statt aus dem Bild zu laufen. */
/* Umbruch nur zwischen Wörtern. Silbentrennung mitten im Wort sieht in
   Überschriften nach Notlösung aus; break-word bleibt als Netz für den Fall,
   dass ein einzelnes Wort wirklich breiter ist als der Bildschirm. */
h1, h2, h3 { overflow-wrap: break-word; hyphens: none; }
@media (max-width: 420px) {
  h1 { font-size: clamp(22px, 7vw, 28px); }
}
body { overflow-x: hidden; }

/* ── Handy: Logo prägnanter, Umbrüche vermeiden ────────────────────────── */
@media (max-width: 780px) {
  .kopf-innen { min-height: 62px; }
  .kopf-logo  { height: 30px; }                 /* deutlich präsenter als vorher */
  .kopfleiste.geschoben .kopf-innen { min-height: 56px; }
  .kopfleiste.geschoben .kopf-logo  { height: 26px; }
}

@media (max-width: 560px) {
  /* Überschrift: lieber etwas kleiner als in vier Zeilen zerfallen */
  h1 { font-size: clamp(21px, 6.4vw, 27px); line-height: 1.24; text-wrap: balance; }
  .vorsatz { font-size: 15.5px; }

  /* Kartenüberschriften sollen in einer Zeile stehen bleiben */
  .saeulen .bez { font-size: 14px; letter-spacing: -.02em; text-wrap: nowrap; }
  .saeulen .txt { font-size: 12px; }
  .saeulen li   { padding: 14px 12px 15px; }
  .saeulen .symbol { width: 34px; height: 34px; }

  /* Der Kontaktknopf darf nie umbrechen */
  .knopf { font-size: 15px; padding: 13px 18px; }
  .kontakt .zeile, .ansprache .knopf { white-space: nowrap; }
}

/* Sehr schmale Geräte: dort ist eine Spalte ehrlicher als zwei gequetschte */
@media (max-width: 400px) {
  .saeulen { grid-template-columns: 1fr; gap: 8px; }
  .saeulen li {
    display: grid; grid-template-columns: 38px 1fr; grid-template-rows: auto auto;
    column-gap: 12px; row-gap: 1px; align-items: center; padding: 13px 14px;
  }
  .saeulen .symbol { grid-row: 1 / 3; margin: 0; width: 38px; height: 38px; }
  .saeulen .bez { font-size: 15px; align-self: end; }
  .saeulen .txt { font-size: 12.5px; align-self: start; }
}


/* ══════════════════════════════════════════════════════════════════════════
   Zeilenlänge — die Bahn ist für alle gleich breit, Fließtext darf sie aber
   nicht ausreizen: über etwa 75 Zeichen findet das Auge den Zeilenanfang
   nicht mehr zuverlässig. Linke Kante bleibt dieselbe.
   ══════════════════════════════════════════════════════════════════════════ */
/* Keine Lesebreite mehr auf den Textseiten: der Wunsch lautet ausdrücklich,
   dass jeder Abschnitt die ganze Bahn nutzt und links wie rechts auf derselben
   Kante steht. Eine Überschrift, die bei 42 Zeichen umbricht, und ein Absatz,
   der bei 74 endet, brechen genau diese Kante. Die alte Fassung bleibt in der
   Versionsgeschichte, falls die Lesbarkeit langer Rechtstexte doch wieder den
   Ausschlag geben soll. */
.lesetext p, .lesetext ul, .lesetext ol { max-width: 74ch; }
.buehne-innen .vorsatz { max-width: 60ch; }
.buehne-innen h1 { max-width: 34ch; }

/* ══════════════════════════════════════════════════════════════════════════
   Handy: kompakter Fuß
   Gestapelt war der Fuß fast so hoch wie die Seite darüber. Zwei Spalten,
   kleinere Schrift und engere Abstände bringen ihn auf einen Blick unter,
   ohne dass ein Link verschwindet.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 639px) {
  .fuss { padding-top: 26px; font-size: 13px; }
  .fuss-unten { padding-inline: var(--bahn-rand); }
  .fuss-oben {
    grid-template-columns: 1fr 1fr; gap: 16px 18px; margin-bottom: 16px;
  }
  .fuss-marke { grid-column: 1 / -1; }
  .fuss-marke .marke-fuss { height: 24px; }
  .fuss-marke .marke-link { margin-bottom: 10px; }
  /* Der Beschreibungssatz steht schon oben auf der Seite. Zweimal dasselbe
     kostet hier nur Höhe. */
  .fuss-marke > p:not(.fuss-kontakt) { display: none; }
  .fuss-kontakt { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; }
  .fuss-kontakt br { display: none; }

  .fuss-spalte h2 { font-size: 10.5px; margin-bottom: 7px; letter-spacing: .07em; }
  .fuss-spalte li { margin-bottom: 5px; line-height: 1.35; }
  .fuss-notiz { font-size: 11px; margin-top: 6px; }

  .fuss-unten { padding-top: 12px; font-size: 11.5px; gap: 6px 14px; }
  .fuss-sprache a { margin-left: 10px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Kundenkonto — Anmelden, Übersicht, Angaben, Sicherheit
   ══════════════════════════════════════════════════════════════════════════ */

/* Passwortfelder sehen aus wie die übrigen Eingaben. Ohne diese Zeile stünden
   sie nackt im Formular, weil oben nur text, email und tel aufgezählt sind. */
.feld input[type=password] {
  width: 100%; font: 400 16px/1.5 var(--schrift); color: var(--ink);
  background: #fff; border: 1px solid var(--rand); border-radius: 8px;
  padding: 13px 14px; transition: border-color 160ms var(--kurve), box-shadow 160ms var(--kurve);
}

/* Erklärung unter einem Feld: sagt, wofür wir die Angabe brauchen. */
.feld-hinweis { display: block; margin-top: 6px; font-size: 13px; color: var(--grau); line-height: 1.5; }
.feld-weg { display: inline-block; margin-top: 8px; font-size: 13.5px; }

fieldset.feld { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
fieldset.feld legend { padding: 0; font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }

.sprachwahl label { display: inline-flex; align-items: center; gap: 8px; margin: 10px 20px 0 0; font-size: 14.5px; }
.sprachwahl input[type=radio] { width: 18px; height: 18px; accent-color: var(--enzian); }

/* ── Wege innerhalb des Kontos ─────────────────────────────────────────── */
.konto-nav {
  display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 28px;
  border-bottom: 1px solid var(--stein); padding-bottom: 10px;
}
.konto-nav a { font-size: 14.5px; color: var(--grau); text-decoration: none; padding: 8px 12px; border-radius: 7px; }
.konto-nav a:hover { color: var(--ink); background: var(--stein); text-decoration: none; }
.konto-nav a[aria-current] { color: var(--ink); font-weight: 600; background: var(--stein); }

/* ── Begrüßung im Seitenkopf ───────────────────────────────────────────── */
.konto-gruss { display: flex; align-items: center; gap: 16px; }
.konto-gruss h1 { margin-bottom: 4px; }
.konto-gruss .unterzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* ── Avatar: fertige Motive statt Datei-Upload ─────────────────────────── */
.avatar {
  --farbe: var(--enzian);
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; flex: 0 0 auto; border-radius: 50%;
  color: var(--farbe); background: color-mix(in srgb, var(--farbe) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--farbe) 26%, #fff);
}
.avatar.gross { width: 62px; height: 62px; }
.avatar.gross svg { width: 32px; height: 32px; }
.avatar .buchstabe { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.avatar.gross .buchstabe { font-size: 25px; }
.av-berg, .av-haus            { --farbe: var(--enzian); }
.av-apfel, .av-vogel          { --farbe: var(--rost); }
.av-schluessel, .av-sonne     { --farbe: var(--laerche); }
.av-blatt, .av-welle          { --farbe: var(--latsche); }
.av-buchstabe                 { --farbe: var(--grau); }

.avatar-wahl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
@media (min-width: 620px) { .avatar-wahl { grid-template-columns: repeat(5, 1fr); } }
.avatar-w {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 6px; border: 1px solid var(--rand); border-radius: 9px; cursor: pointer;
  font-weight: 400; text-align: center;
  transition: border-color 160ms var(--kurve), background 160ms var(--kurve);
}
.avatar-w:hover { border-color: var(--ink); }
.avatar-w input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.avatar-w .bez { font-size: 12px; color: var(--grau); line-height: 1.3; }
/* .an setzt PHP beim Laden, :has hält die Auswahl beim Klicken nach */
.avatar-w.an, .avatar-w:has(input:checked) { border-color: var(--ink); background: var(--stein); }
.avatar-w.an .bez, .avatar-w:has(input:checked) .bez { color: var(--ink); }
.avatar-w:has(input:focus-visible) { outline: 2px solid var(--enzian); outline-offset: 3px; }

/* ── Vorschau: so sehen andere Sie ─────────────────────────────────────── */
.vorschau-karte {
  display: flex; align-items: center; gap: 16px; background: #FCFBF9;
  border: 1px solid var(--rand); border-radius: 10px; padding: 16px 18px; margin: 0 0 30px;
}
.vorschau-karte strong { display: block; font-size: 17px; letter-spacing: -.01em; margin: 2px 0; }
.vorschau-karte .klein { display: block; font-size: 12.5px; color: var(--grau); line-height: 1.45; }

/* ── Abschnitte im Konto ───────────────────────────────────────────────── */
.konto-block { border-top: 1px solid var(--stein); padding-top: 26px; margin-top: 30px; }
.konto-block > h2 { font-size: 18px; font-weight: 600; letter-spacing: -.015em; margin: 0 0 14px; }

/* Leerer Zustand: erklärt, wie sich die Liste füllt, statt "keine Einträge" */
.leerstelle { background: #FCFBF9; border: 1px dashed var(--rand); border-radius: 10px; padding: 20px; }
.leerstelle p { margin: 0 0 14px; color: #4a4b47; font-size: 14.5px; max-width: 62ch; }
.leerstelle .knopf { font-size: 14.5px; padding: 11px 16px; }

/* ── Listen: Favoriten, Verlauf, Suchaufträge ──────────────────────────── */
.papier .objektliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.objektliste li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 0;
  border: 1px solid var(--rand); border-radius: 9px; padding: 13px 15px; background: #fff;
}
.objektliste.schlicht li { border: 0; border-bottom: 1px solid var(--stein); border-radius: 0; padding: 11px 2px; }
.ol-name { flex: 1 1 100%; font-size: 15.5px; font-weight: 600; color: var(--ink);
           text-decoration: none; letter-spacing: -.01em; }
a.ol-name:hover { color: var(--enzian); text-decoration: none; }
.ol-ort { font-size: 13px; color: var(--grau); }
.ol-preis { font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ol-zeit { margin-left: auto; font-size: 12.5px; color: var(--grau); }
.ol-weg { color: var(--grau); font-weight: 400; }
.ol-weg-form { margin-left: auto; }
.knopf-schlank {
  font: 400 13px var(--schrift); color: var(--grau); background: none; cursor: pointer;
  border: 1px solid var(--rand); border-radius: 100px; padding: 6px 12px;
  transition: color 160ms var(--kurve), border-color 160ms var(--kurve);
}
.knopf-schlank:hover { color: var(--rost); border-color: var(--rost); }

/* ── Die drei Stufen ───────────────────────────────────────────────────── */
.stufen { border-top: 1px solid var(--stein); padding-top: 30px; margin-top: 34px; }
.stufen > h2 { font-size: 18px; font-weight: 600; margin: 0 0 18px; }
.stufen-raster { display: grid; gap: 14px; }
@media (min-width: 760px) { .stufen-raster { grid-template-columns: repeat(3, 1fr); } }
.stufe {
  --farbe: var(--grau); position: relative; overflow: hidden;
  border: 1px solid var(--rand); border-radius: 10px; padding: 18px 16px;
}
.stufe::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--farbe); }
.stufe.stufe-an { --farbe: var(--latsche); }
.stufe.stufe-premium { --farbe: var(--laerche); }
.papier .stufe ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.stufe li { font-size: 14px; color: #4a4b47; padding-left: 20px; position: relative; line-height: 1.5; margin: 0; }
.stufe li::before {
  content: ""; position: absolute; left: 2px; top: .58em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--farbe);
}
.stufe-notiz { font-size: 12px; color: #a3a29c; font-style: italic; margin: 12px 0 0; }

/* Marke einer Stufe. Ohne umgebende .stufe greift der Ersatzwert. */
.stufe-marke {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--farbe, var(--grau));
  background: color-mix(in srgb, var(--farbe, var(--grau)) 9%, #fff);
  border: 1px solid color-mix(in srgb, var(--farbe, var(--grau)) 26%, #fff);
  border-radius: 100px; padding: 4px 11px;
}
.stufe-marke.ist-an      { --farbe: var(--latsche); margin-bottom: 0; }
.stufe-marke.ist-premium { --farbe: var(--laerche); margin-bottom: 0; }

/* ── Sperre: Inhalt erst mit Konto oder Premium ────────────────────────── */
.sperre {
  --farbe: var(--enzian); margin: 22px 0 0; padding: 20px 20px 22px; border-radius: 10px;
  background: color-mix(in srgb, var(--farbe) 5%, #fff);
  border: 1px solid color-mix(in srgb, var(--farbe) 26%, #fff);
}
.sperre.sperre-premium { --farbe: var(--laerche); }
.sperre-marke {
  display: inline-block; margin-bottom: 8px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--farbe);
}
.sperre h3 { font-size: 17px; font-weight: 600; margin: 0 0 10px; letter-spacing: -.01em; }
.papier .sperre ul { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 7px; }
.sperre li { font-size: 14.5px; color: #4a4b47; padding-left: 24px; position: relative; margin: 0; }
.sperre li::before {
  content: ""; position: absolute; left: 3px; top: .38em; width: 11px; height: 6px;
  border-left: 2px solid var(--farbe); border-bottom: 2px solid var(--farbe); transform: rotate(-45deg);
}
.sperre-zweit { font-size: 13.5px; color: var(--grau); margin: 12px 0 0; }

/* ── Tatsachen zum Konto ───────────────────────────────────────────────── */
.papier .konto-tatsachen { margin: 0 0 20px; display: grid; grid-template-columns: 1fr; gap: 8px; }
.konto-tatsachen div {
  display: flex; justify-content: space-between; gap: 14px; font-size: 14px;
  border-bottom: 1px solid var(--stein); padding-bottom: 8px;
}
.konto-tatsachen dt { color: var(--grau); font-size: 14px; }
.konto-tatsachen dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }

.fuer-wen { font-size: 14.5px; color: var(--grau); margin: 0 0 20px; }

@media (max-width: 560px) {
  .konto-gruss { gap: 12px; }
  .avatar.gross { width: 50px; height: 50px; }
  .avatar.gross svg { width: 26px; height: 26px; }
  .konto-nav { gap: 2px; }
  .konto-nav a { padding: 7px 10px; font-size: 13.5px; }
}

/* Weg zum Konto in der Kopfleiste. Steht neben dem Kontaktknopf und zeigt
   angemeldet den Anzeigenamen, sonst schlicht "Anmelden". */
.kopf-konto {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--grau); font-size: 14px; font-weight: 600; text-decoration: none;
  padding: 8px 11px; border-radius: 7px; white-space: nowrap; max-width: 15ch;
  transition: color 160ms var(--kurve), background 160ms var(--kurve);
}
.kopf-konto span { overflow: hidden; text-overflow: ellipsis; }
.kopf-konto:hover { color: var(--ink); background: var(--stein); text-decoration: none; }
/* Am Handy bleibt nur das Zeichen, sonst wird die Leiste zu voll. */
@media (max-width: 560px) { .kopf-konto span { display: none; } .kopf-konto { padding: 8px; } }

/* Formulare bleiben auf der gemeinsamen Bahn stehen, die Felder werden aber
   nicht 1040 px breit. Ein Eingabefeld, das über den halben Bildschirm läuft,
   sieht nach Versehen aus, und der Blick findet den Anfang der nächsten Zeile
   nicht mehr. Die linke Kante bleibt dieselbe wie überall sonst. */
.papier form.anfrage,
.papier .anmeldung form,
.lesetext form.anfrage { max-width: 640px; }

/* Ausnahme: die Registrierung. Ihre Felder stehen nicht untereinander, sondern
   in einem Raster; dort ist die volle Bahn richtig, weil jede einzelne Spalte
   trotzdem schmal bleibt. Zwölf Felder in einer 640px-Spalte wären auf dem
   Desktop eine sehr lange Rolle. */
.papier form.anfrage.reg-form { max-width: none; }

/* ══════════════════════════════════════════════════════════════════════════
   Nachrichten zwischen Suchenden und Anbietern
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Posteingang ───────────────────────────────────────────────────────── */
.papier .nachrichtenliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.nachrichtenliste li { margin: 0; }

.nl-zeile {
  display: flex; align-items: flex-start; gap: 13px;
  border: 1px solid var(--rand); border-radius: 10px; padding: 13px 15px;
  background: #fff; text-decoration: none; color: var(--ink);
  transition: border-color 160ms var(--kurve), box-shadow 160ms var(--kurve);
}
.nl-zeile:hover {
  border-color: var(--ink); text-decoration: none;
  box-shadow: 0 2px 10px rgba(26,27,25,.06);
}
/* Ungelesenes hebt sich ab, ohne zu blinken: eine Kante links genügt. */
.nachrichtenliste .ist-neu .nl-zeile { border-left: 3px solid var(--enzian); padding-left: 13px; }
.nachrichtenliste .ist-neu .nl-name { font-weight: 700; }

.nl-text { flex: 1; min-width: 0; display: grid; gap: 3px; }
.nl-oben { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.nl-name { font-size: 15.5px; font-weight: 600; letter-spacing: -.01em;
           overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nl-zeit { flex: 0 0 auto; font-size: 12.5px; color: var(--grau); }
.nl-bezug { font-size: 13px; color: var(--grau);
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nl-vorschau {
  font-size: 13.5px; color: #4a4b47; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.nl-marken { display: flex; flex-wrap: wrap; gap: 5px; }
.nl-marke {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--grau); background: var(--stein); border-radius: 4px; padding: 2px 7px;
}
.nl-marke.nl-warn  { color: var(--laerche); background: color-mix(in srgb, var(--laerche) 12%, #fff); }
.nl-marke.nl-stopp { color: var(--rost);    background: color-mix(in srgb, var(--rost) 12%, #fff); }
.nl-zahl {
  flex: 0 0 auto; align-self: center;
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 100px;
  background: var(--enzian); color: #fff;
  font-size: 12px; font-weight: 700; line-height: 22px; text-align: center;
}

/* ── Eine Unterhaltung ─────────────────────────────────────────────────── */
.chat-lage { margin-bottom: 14px; }
.chat-notiz {
  font-size: 13.5px; color: #4a4841; line-height: 1.5; margin: 0 0 10px;
  background: #FCFBF9; border-left: 2px solid var(--laerche);
  padding: 10px 14px; border-radius: 4px; max-width: 74ch;
}
.chat-notiz.chat-stopp { border-left-color: var(--rost); color: #4a3d38; }

/* Der Verlauf hat eine feste Höhe und scrollt in sich. Sonst wächst die Seite
   mit jeder Nachricht, und das Eingabefeld wandert aus dem Bild. */
.chat-lauf {
  display: flex; flex-direction: column; gap: 9px;
  border: 1px solid var(--rand); border-radius: 10px; background: #FCFBF9;
  padding: 16px; margin-bottom: 14px;
  height: min(56vh, 520px); overflow-y: auto; overscroll-behavior: contain;
}

.chat-blase {
  max-width: min(80%, 60ch); padding: 10px 13px; border-radius: 12px;
  border: 1px solid var(--rand); background: #fff;
  animation: blaseAuf 180ms var(--kurve) both;
}
@keyframes blaseAuf { from { opacity: 0; transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .chat-blase { animation: none; } }

.chat-blase.von-mir {
  align-self: flex-end; background: var(--enzian); border-color: var(--enzian); color: #fff;
  border-bottom-right-radius: 4px;
}
.chat-blase.von-ihm { align-self: flex-start; border-bottom-left-radius: 4px; }

.chat-text { margin: 0; font-size: 14.5px; line-height: 1.5; overflow-wrap: break-word; }
.chat-zeit { display: block; margin-top: 4px; font-size: 11.5px; color: var(--grau); }
.chat-blase.von-mir .chat-zeit { color: rgba(255,255,255,.72); }

.chat-form { display: grid; gap: 10px; margin-bottom: 22px; }
.chat-form textarea {
  width: 100%; font: 400 15px/1.5 var(--schrift); color: var(--ink);
  background: #fff; border: 1px solid var(--rand); border-radius: 9px; padding: 12px 14px;
  resize: vertical; min-height: 84px;
  transition: border-color 160ms var(--kurve), box-shadow 160ms var(--kurve);
}
.chat-form textarea:focus {
  outline: none; border-color: var(--enzian);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--enzian) 14%, transparent);
}
.chat-form .zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.chat-form .zeile .knopf { margin-left: auto; }

/* Melden liegt zugeklappt: es ist der seltene Fall, nicht der erwartete. */
.chat-melden { border-top: 1px solid var(--stein); padding-top: 16px; }
.chat-melden summary {
  cursor: pointer; font-size: 13.5px; color: var(--grau); list-style: none;
  display: inline-flex; align-items: center; gap: 7px;
}
.chat-melden summary::-webkit-details-marker { display: none; }
.chat-melden summary:hover { color: var(--rost); }
.chat-melden[open] summary { margin-bottom: 14px; color: var(--rost); font-weight: 600; }
.chat-melden .feld { max-width: 520px; }

@media (max-width: 560px) {
  .chat-lauf { height: min(52vh, 420px); padding: 12px; }
  .chat-blase { max-width: 88%; }
  .nl-zeile { padding: 11px 12px; gap: 10px; }
}

/* Zahl ungelesener Nachrichten in der Kontonavigation */
.konto-nav .nav-zahl {
  display: inline-block; margin-left: 5px; min-width: 18px; padding: 0 5px;
  border-radius: 100px; background: var(--enzian); color: #fff;
  font-size: 11.5px; font-weight: 700; line-height: 18px; text-align: center;
  vertical-align: 1px;
}

/* ══════════════════════════════════════════════════════════════════════════
   Anbieterbereich — eigene Objekte und der Generator in sechs Schritten
   ══════════════════════════════════════════════════════════════════════════ */

/* .knopf saß bisher nur auf Links, .knopf-schlank nur auf Buttons.
   Hier stehen beide auf beidem. */
button.knopf { border: 0; cursor: pointer; font-family: var(--schrift); }
.knopf:disabled { background: var(--rand); cursor: not-allowed; transform: none; }
.knopf:disabled:hover { background: var(--rand); transform: none; }
a.knopf-schlank { display: inline-flex; align-items: center; text-decoration: none; }
a.knopf-schlank:hover { text-decoration: none; }
.ob-knoepfe .knopf-schlank:hover { color: var(--ink); border-color: var(--ink); }
.knopf-heraus { color: var(--latsche); border-color: var(--latsche); font-weight: 600; }
.ob-knoepfe .knopf-heraus:hover { color: #fff; background: var(--latsche); border-color: var(--latsche); }
.ob-knoepfe .knopf-weg:hover { color: var(--rost); border-color: var(--rost); }
.knopf-warnung { background: var(--rost); }
.knopf-warnung:hover { background: #74301d; }
.knopf-schlank-voll { margin-left: auto; font-size: 14.5px; padding: 10px 18px; }

/* Auswahlfelder gab es im Formular bisher nicht */
.feld select {
  width: 100%; font: 400 16px/1.5 var(--schrift); color: var(--ink);
  background: #fff; border: 1px solid var(--rand); border-radius: 8px; padding: 12px 14px;
}
.feld select:focus {
  outline: none; border-color: var(--enzian);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--enzian) 15%, transparent);
}
.feld.fehlt select { border-color: var(--rost); }

.anbieter-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 26px; }
.anbieter-nav a[aria-current] { font-weight: 600; color: var(--ink); text-decoration: none; }

.pruefliste { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.pruefliste li { font-size: 14.5px; margin: 0; padding-left: 16px; position: relative; }
.pruefliste li::before { content: "•"; position: absolute; left: 2px; }

/* Löschen mit Rückfrage */
.loeschkasten {
  border: 1px solid color-mix(in srgb, var(--rost) 35%, #fff);
  background: color-mix(in srgb, var(--rost) 5%, #fff);
  border-radius: 10px; padding: 20px; margin: 0 0 26px;
}
.loeschkasten h2 { font-size: 18px; font-weight: 600; margin: 0 0 10px; }
.loeschkasten p { font-size: 14.5px; margin: 0 0 14px; }
.loesch-objekt { display: grid; gap: 2px; }
.loesch-objekt span { font-size: 13px; color: var(--grau); }
.loesch-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Kontingent und Tarife */
.kontingent { background: #FCFBF9; border: 1px solid var(--rand); border-radius: 10px; padding: 20px; margin: 0 0 26px; }
.kontingent.ohne-tarif { border-color: color-mix(in srgb, var(--laerche) 45%, #fff); }
.kontingent h2 { font-size: 17px; font-weight: 600; margin: 0 0 10px; }
.kontingent-satz { margin: 0 0 6px; font-size: 15px; }
.kontingent-notiz { margin: 12px 0 0; font-size: 13px; color: var(--grau); }

.tarifkarten { display: grid; gap: 14px; margin: 16px 0 0; }
@media (min-width: 760px) { .tarifkarten { grid-template-columns: repeat(3, 1fr); } }
.tarifkarte {
  --farbe: var(--enzian); position: relative; overflow: hidden; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--rand); border-radius: 10px; padding: 20px 18px 18px;
}
.tarifkarte::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--farbe); }
.tarifkarte.empfohlen { --farbe: var(--laerche); border-color: color-mix(in srgb, var(--laerche) 45%, #fff); }
.tarif-marke { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .06em;
               text-transform: uppercase; color: var(--farbe); margin-bottom: 8px; }
.tarifkarte h3 { font-size: 16.5px; font-weight: 600; margin: 0 0 4px; }
.tarif-preis { font-size: 21px; font-weight: 600; margin: 0 0 4px; font-variant-numeric: tabular-nums; }
.tarif-kurz { font-size: 13.5px; color: var(--grau); margin: 0 0 10px; }
.tarif-menge { font-size: 14px; font-weight: 600; margin: 0 0 10px; }
.papier .tarifkarte ul { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 6px; }
.tarifkarte li { font-size: 13.5px; color: #4a4b47; margin: 0; padding-left: 18px; position: relative; }
.tarifkarte li::before {
  content: ""; position: absolute; left: 2px; top: .5em; width: 8px; height: 5px;
  border-left: 2px solid var(--farbe); border-bottom: 2px solid var(--farbe); transform: rotate(-45deg);
}
.tarifkarte .knopf { margin-top: auto; justify-content: center; font-size: 15px; padding: 11px 18px; }

/* Die Liste der eigenen Objekte */
.anbieterliste li { align-items: center; gap: 8px 12px; padding: 16px; }
.ob-marke {
  --farbe: var(--grau);
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 100px;
  color: var(--farbe); background: color-mix(in srgb, var(--farbe) 12%, #fff);
}
.ob-entwurf    { --farbe: var(--grau); }
.ob-verfuegbar { --farbe: var(--latsche); }
.ob-reserviert { --farbe: var(--laerche); }
.ob-verkauft, .ob-vermietet { --farbe: var(--enzian); }
.ob-archiviert { --farbe: var(--rand); }
.ob-zahlen { flex: 1 1 100%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 16px; margin: 8px 0 0; }
@media (min-width: 620px) { .ob-zahlen { grid-template-columns: repeat(5, auto); justify-content: start; gap: 8px 30px; } }
.ob-zahlen dt { font-size: 11.5px; color: var(--grau); }
.ob-zahlen dd { margin: 0; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ob-knoepfe { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 8px;
              margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--stein); }
.ob-knoepfe form { margin: 0; }

/* Die sechs Schritte */
.schrittleiste { margin: 0 0 26px; }
.papier .schrittleiste ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(3, 1fr); }
@media (min-width: 780px) { .papier .schrittleiste ol { grid-template-columns: repeat(6, 1fr); } }
.schrittleiste li { margin: 0; }
.schrittleiste a, .schrittleiste li > span {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; height: 100%;
  padding: 10px 12px; border: 1px solid var(--rand); border-radius: 8px;
  background: #fff; color: var(--grau); text-decoration: none;
}
.schrittleiste a:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }
.schrittleiste .nummer {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border-radius: 50%; font-size: 13px; font-weight: 600; background: var(--stein); color: var(--grau);
}
.schrittleiste .bez { font-size: 12.5px; line-height: 1.35; }
.schrittleiste li.hier > span { border-color: var(--ink); color: var(--ink); }
.schrittleiste li.hier .nummer { background: var(--ink); color: #fff; }
.schrittleiste li.fertig .nummer { background: color-mix(in srgb, var(--latsche) 15%, #fff); color: var(--latsche); }
.schrittleiste li.fertig .bez { color: #4a4b47; }

.schritt-titel { display: flex; align-items: baseline; gap: 10px; font-size: 20px; font-weight: 600;
                 letter-spacing: -.015em; margin: 0 0 6px; }
.schritt-zahl { font-size: 12.5px; font-weight: 600; color: var(--grau);
                background: var(--stein); border-radius: 100px; padding: 3px 9px; }
.schritt-satz { color: var(--grau); font-size: 14.5px; margin: 0 0 22px; max-width: 62ch; }
.schritt-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
                margin: 26px 0 0; padding-top: 20px; border-top: 1px solid var(--stein); }

/* Auswahl als Kacheln statt als Aufklappliste */
.wahlgitter { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 8px; }
@media (min-width: 620px) {
  .wahlgitter { grid-template-columns: repeat(4, 1fr); }
  .wahlgitter.zwei { grid-template-columns: repeat(2, 1fr); max-width: 420px; }
}
.wahl, .merkmal {
  display: flex; align-items: center; gap: 9px; cursor: pointer; background: #fff;
  border: 1px solid var(--rand); border-radius: 8px; padding: 11px 13px;
  font-size: 14.5px; font-weight: 400; margin: 0;
}
.wahl:hover, .merkmal:hover { border-color: var(--ink); }
.wahl input, .merkmal input { width: 18px; height: 18px; margin: 0; flex: 0 0 auto; accent-color: var(--enzian); }
.wahl.an, .merkmal.an { border-color: var(--enzian); background: color-mix(in srgb, var(--enzian) 6%, #fff); }
.wahl.an { font-weight: 600; }
.merkmale { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 10px; }
@media (min-width: 620px) { .merkmale { grid-template-columns: repeat(3, 1fr); } }
.merkmal { font-size: 14px; }

.bilderfach { background: #FCFBF9; border: 1px dashed var(--rand); border-radius: 10px; padding: 18px; margin: 0 0 22px; }
.bilderfach h3 { font-size: 16px; font-weight: 600; margin: 0 0 8px; }
.bilderfach p { font-size: 14.5px; margin: 0 0 12px; }
.bilderfach p:last-child { margin: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   Suche — Startseite, Ergebnisliste, Kartenauswahl
   ══════════════════════════════════════════════════════════════════════════ */

/* Die Bühne trägt jetzt das Suchfeld. Sie beginnt oben statt in der Mitte,
   sonst rutscht der wichtigste Teil der Seite unter die Falzkante. */
.buehne-suche { align-items: flex-start; padding-top: 56px; }
@media (max-width: 720px) { .buehne-suche { min-height: 0; padding-top: 34px; } }

/* ── Das Suchfeld ─────────────────────────────────────────────────────── */
.suchbahn { position: relative; margin: 0 0 18px; max-width: 640px; }
.suchbahn-gross { max-width: 700px; }
.suchbahn-schlank { max-width: 100%; margin-bottom: 0; }

.suchkasten {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--rand); border-radius: 10px;
  padding: 0 6px 0 14px;
  box-shadow: 0 2px 10px rgba(26,27,25,.05);
  transition: border-color 160ms var(--kurve), box-shadow 160ms var(--kurve);
}
.suchkasten:focus-within {
  border-color: var(--enzian);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--enzian) 14%, transparent);
}
.such-lupe { color: var(--grau); flex: 0 0 auto; }
.such-eingabe {
  flex: 1; min-width: 0; border: 0; outline: none; background: none;
  font: 400 16px/1.5 var(--schrift); color: var(--ink); padding: 15px 0;
}
.suchbahn-gross .such-eingabe { font-size: 17px; padding: 17px 0; }
.such-eingabe::placeholder { color: #a3a29c; }
.such-leeren {
  flex: 0 0 auto; border: 0; background: none; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--grau); padding: 4px 8px; border-radius: 6px;
}
.such-leeren:hover { color: var(--ink); background: var(--stein); }
.such-knopf {
  flex: 0 0 auto; border: 0; cursor: pointer;
  background: var(--ink); color: #fff; border-radius: 7px;
  font: 600 15px var(--schrift); padding: 11px 20px; margin: 5px 0;
  transition: background 160ms var(--kurve);
}
.such-knopf:hover { background: #000; }
.such-melder { margin: 0; }

/* Vorschlagsliste. Sie liegt über dem Inhalt und braucht deshalb einen
   eigenen Grund und eine harte Kante, sonst verschwimmt sie mit der Seite. */
.suchvorschlaege {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 6px);
  list-style: none; margin: 0; padding: 6px 0;
  background: #fff; border: 1px solid var(--rand); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(26,27,25,.14);
  max-height: min(60vh, 420px); overflow-y: auto; overscroll-behavior: contain;
}
.vor-gruppe {
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--grau); padding: 9px 14px 4px;
}
.vor-gruppe:first-child { padding-top: 4px; }
.vor-zeile {
  display: flex; align-items: baseline; gap: 10px; cursor: pointer;
  padding: 9px 14px; font-size: 15px; color: var(--ink);
}
.vor-zeile.an, .vor-zeile[aria-selected="true"] { background: var(--stein); }
.vor-text { font-weight: 600; letter-spacing: -.01em; }
.vor-zusatz {
  margin-left: auto; text-align: right; font-size: 12.5px; color: var(--grau);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Startseite: Beispiele, Bestandsband, Gemeinden ───────────────────── */
.such-beispiele {
  list-style: none; margin: 0 0 34px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 7px;
}
.such-beispiele a {
  display: inline-block; font-size: 13px; color: var(--grau); text-decoration: none;
  background: rgba(255,255,255,.9); border: 1px solid var(--rand);
  border-radius: 100px; padding: 6px 13px;
  transition: color 160ms var(--kurve), border-color 160ms var(--kurve);
}
.such-beispiele a:hover { color: var(--ink); border-color: var(--ink); text-decoration: none; }

/* Die vier Bereiche sind jetzt Wege. Der Verweis füllt die ganze Karte,
   sonst wäre der Rand um den Text herum tot. */
.saeulen li { padding: 0; }
.saeulen li > a {
  display: flex; flex-direction: column; gap: 5px; height: 100%;
  padding: 18px 15px 17px; color: inherit; text-decoration: none;
}
.saeulen li > a:hover { text-decoration: none; }
@media (max-width: 560px) { .saeulen li > a { padding: 14px 12px 15px; } }
@media (max-width: 400px) {
  .saeulen li { display: block; }
  .saeulen li > a {
    display: grid; grid-template-columns: 38px 1fr; grid-template-rows: auto auto;
    column-gap: 12px; row-gap: 1px; align-items: center; padding: 13px 14px;
  }
}

.bestandsband { border-top: 1px solid var(--stein); background: var(--ink); color: #fff; }
.bestandsband-innen {
  max-width: var(--bahn); margin: 0 auto; padding: 26px var(--bahn-rand);
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px;
}
.bestand-satz { margin: 0; font-size: 15px; color: rgba(255,255,255,.86); max-width: 62ch; }
.bestand-satz strong { color: #fff; font-weight: 600; }
.bestand-notiz {
  margin: 0; font-size: 12.5px; color: rgba(255,255,255,.55);
  flex-basis: 100%; font-variant-numeric: tabular-nums;
}
.knopf-hell { background: #fff; color: var(--ink); }
.knopf-hell:hover { background: var(--stein); color: var(--ink); }

.ortsband { border-top: 1px solid var(--stein); background: #FCFBF9; }
.ortsband-innen { max-width: var(--bahn); margin: 0 auto; padding: 44px var(--bahn-rand); }
.ortsband h2 { font-size: clamp(20px, 3vw, 24px); font-weight: 600; letter-spacing: -.02em; margin: 0 0 8px; }
.ortsband-vor { color: var(--grau); font-size: 15px; margin: 0 0 20px; max-width: 62ch; }
.ortsliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .ortsliste { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 940px) { .ortsliste { grid-template-columns: repeat(5, 1fr); } }
.ortsliste a {
  display: block; background: #fff; border: 1px solid var(--rand); border-radius: 8px;
  padding: 12px 14px; text-decoration: none; color: var(--ink);
  transition: border-color 160ms var(--kurve), transform 160ms var(--kurve);
}
.ortsliste a:hover { border-color: var(--ink); transform: translateY(-1px); text-decoration: none; }
.ort-de { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.ort-it { display: block; font-size: 12.5px; color: var(--grau); }
.ort-mehr a { background: none; border-style: dashed; display: flex; align-items: center; min-height: 100%; font-size: 13.5px; color: var(--enzian); }

/* ── Ergebnisseite: Kopf und Bahn ─────────────────────────────────────── */
.suchkopf { border-bottom: 1px solid var(--stein); background: #FCFBF9; }
.suchkopf-innen { max-width: var(--bahn); margin: 0 auto; padding: 26px var(--bahn-rand) 24px; }
.suchkopf .zurueck { margin-bottom: 16px; }
.suchkopf h1 { font-size: clamp(21px, 3.2vw, 27px); font-weight: 600; letter-spacing: -.02em; margin: 0 0 14px; }

.suchraum { max-width: var(--bahn); margin: 0 auto; padding: 20px var(--bahn-rand) 60px; width: 100%; }

/* ── Marken: was erkannt wurde ────────────────────────────────────────── */
.marken { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 16px; }
.marke {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 600; color: var(--ink); text-decoration: none;
  background: color-mix(in srgb, var(--enzian) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--enzian) 30%, #fff);
  border-radius: 100px; padding: 6px 12px;
  transition: border-color 160ms var(--kurve), background 160ms var(--kurve);
}
.marke:hover { background: color-mix(in srgb, var(--rost) 9%, #fff); border-color: var(--rost); text-decoration: none; }
.marke-weg { font-size: 16px; line-height: 1; color: var(--grau); }
.marke:hover .marke-weg { color: var(--rost); }
.marke-alle { background: none; border-style: dashed; font-weight: 400; color: var(--grau); }

/* ── Steuerung über der Liste ─────────────────────────────────────────── */
.such-steuerung {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--stein);
}
.knopf-schlicht {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: #fff; color: var(--ink); border: 1px solid var(--rand); border-radius: 8px;
  font: 600 14px var(--schrift); padding: 9px 14px; text-decoration: none;
  transition: border-color 160ms var(--kurve);
}
.knopf-schlicht:hover { border-color: var(--ink); text-decoration: none; }
.filter-zahl {
  min-width: 19px; height: 19px; padding: 0 5px; border-radius: 100px;
  background: var(--enzian); color: #fff; font-size: 11.5px; line-height: 19px; text-align: center;
}
.sortierwahl { margin-left: auto; }
/* Auf breiten Bildschirmen steht die Filterspalte ohnehin da. Ein Knopf,
   der etwas öffnet, das schon offen ist, verwirrt nur. */
@media (min-width: 900px) { .filter-oeffner { display: none; } }
.sortierwahl select, .filterblatt select {
  font: 400 14px var(--schrift); color: var(--ink); background: #fff;
  border: 1px solid var(--rand); border-radius: 8px; padding: 9px 12px; width: 100%;
}
.sortierwahl select { width: auto; }
.sortierwahl select:focus, .filterblatt select:focus, .filterblatt input:focus {
  outline: none; border-color: var(--enzian);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--enzian) 14%, transparent);
}

/* ── Gitter: Filterspalte und Inhalt ──────────────────────────────────── */
.suchgitter { display: grid; gap: 24px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .suchgitter { grid-template-columns: 264px minmax(0, 1fr); gap: 28px; } }

.filterblatt { display: grid; gap: 4px; align-content: start; }
@media (min-width: 900px) { .filterblatt { position: sticky; top: 96px; } }
.filterblatt-kopf { display: none; }
.filter-teil { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.filter-teil legend { padding: 0; font-size: 13px; font-weight: 700; letter-spacing: .04em;
                      text-transform: uppercase; color: var(--grau); margin-bottom: 9px; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 6px; }
.wahlknopf { position: relative; display: inline-flex; }
.wahlknopf input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wahlknopf span {
  display: inline-block; cursor: pointer;
  font-size: 13.5px; color: var(--grau); background: #fff;
  border: 1px solid var(--rand); border-radius: 100px; padding: 7px 13px;
  transition: color 160ms var(--kurve), border-color 160ms var(--kurve), background 160ms var(--kurve);
}
.wahlknopf:hover span { color: var(--ink); border-color: var(--ink); }
.wahlknopf input:checked + span { color: #fff; background: var(--ink); border-color: var(--ink); }
.wahlknopf input:focus-visible + span { outline: 2px solid var(--enzian); outline-offset: 2px; }

.spanne { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.filterblatt .feld { margin: 0; display: grid; gap: 4px; }
.filterblatt .feld > span { font-size: 12.5px; color: var(--grau); }
.filterblatt .feld input[type=text] {
  width: 100%; font: 400 15px var(--schrift); color: var(--ink); background: #fff;
  border: 1px solid var(--rand); border-radius: 8px; padding: 10px 12px;
}
.filter-hinweis { font-size: 12.5px; color: var(--grau); line-height: 1.5; margin: 8px 0 0; }
.filterblatt-fuss { display: none; }

/* Am Handy fährt die Filterspalte als Blatt von unten herein. Der Knopf zum
   Abschicken bleibt dabei unten in Daumenreichweite. */
@media (max-width: 899px) {
  .filterblatt {
    position: fixed; inset: auto 0 0 0; z-index: 80;
    max-height: 86vh; overflow-y: auto; overscroll-behavior: contain;
    background: #fff; border-top: 1px solid var(--rand);
    border-radius: 16px 16px 0 0; box-shadow: 0 -8px 40px rgba(26,27,25,.22);
    padding: 0 18px calc(18px + env(safe-area-inset-bottom));
    transform: translateY(100%); visibility: hidden;
    transition: transform 280ms var(--kurve), visibility 280ms;
  }
  .filterblatt.offen { transform: none; visibility: visible; }
  .filterblatt-kopf {
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; background: #fff; padding: 16px 0 12px; z-index: 1;
  }
  .filterblatt-kopf h2 { font-size: 17px; font-weight: 600; margin: 0; }
  .blatt-zu { border: 0; background: none; cursor: pointer; font-size: 26px; line-height: 1;
              color: var(--grau); padding: 2px 8px; }
  .filterblatt-fuss {
    display: flex; align-items: center; gap: 12px;
    position: sticky; bottom: 0; background: #fff; padding: 12px 0;
    border-top: 1px solid var(--stein);
  }
  .filterblatt-fuss .knopf { flex: 1; justify-content: center; }
  body.blatt-offen { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) { .filterblatt { transition: none; } }

/* Ohne min-width darf die Spalte nicht schmaler werden als ihr breitester
   Inhalt: die Karte sprengt dann das Gitter. */
.suchinhalt { min-width: 0; }

/* ── Kartenauswahl ────────────────────────────────────────────────────── */
.kartenwahl { margin: 0 0 24px; }
.kartenwahl-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.kartenwahl-kopf p { margin: 0; font-size: 14px; color: var(--grau); }
.kartenwahl svg.suedtirol .gemeinde:focus-visible { outline: 2px solid var(--enzian); outline-offset: 2px; }
@media (max-width: 899px) {
  .kartenwahl { margin-inline: calc(-1 * var(--bahn-rand)); padding-inline: var(--bahn-rand); }
}

/* ── Ergebnisse ───────────────────────────────────────────────────────── */
.ergebnisse { transition: opacity 180ms var(--kurve); }
.ergebnisse.laedt { opacity: .45; }
@media (prefers-reduced-motion: reduce) { .ergebnisse { transition: none; } }

.erg-anzahl { margin: 0 0 14px; font-size: 14px; color: var(--grau); }
.erg-anzahl strong { color: var(--ink); font-size: 17px; font-variant-numeric: tabular-nums; }

.erg-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 620px) { .erg-liste { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .erg-liste { grid-template-columns: repeat(3, 1fr); } }

.erg-karte { margin: 0; }
.erg-weg {
  display: flex; flex-direction: column; height: 100%;
  background: #fff; border: 1px solid var(--rand); border-radius: 10px; overflow: hidden;
  color: var(--ink); text-decoration: none;
  transition: border-color 180ms var(--kurve), transform 180ms var(--kurve), box-shadow 180ms var(--kurve);
}
.erg-weg:hover {
  border-color: var(--ink); transform: translateY(-2px); text-decoration: none;
  box-shadow: 0 6px 20px rgba(26,27,25,.08);
}
@media (prefers-reduced-motion: reduce) { .erg-weg:hover { transform: none; } }

.erg-bild {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 3 / 2; background: var(--stein) center/cover no-repeat;
}
.erg-ohne-bild { font-size: 12px; color: #a3a29c; letter-spacing: .04em; }
.erg-text { display: flex; flex-direction: column; gap: 6px; padding: 14px 15px 15px; flex: 1; }
.erg-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.erg-art { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--enzian); }
.erg-ort { font-size: 13px; color: var(--grau); }
.erg-titel { font-size: 16px; font-weight: 600; letter-spacing: -.015em; line-height: 1.35; }
.erg-zahlen { display: flex; gap: 18px; margin-top: 2px; }
.erg-zahlen b { font-weight: 600; font-variant-numeric: tabular-nums; }
.erg-zahlen i { font-style: normal; font-size: 12px; color: var(--grau); }
.erg-marken { display: flex; flex-wrap: wrap; gap: 5px; }
.erg-marke {
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--grau); background: var(--stein); border-radius: 4px; padding: 3px 7px;
}
.erg-marke.erg-warn { color: var(--laerche); background: color-mix(in srgb, var(--laerche) 12%, #fff); }
.erg-marke.erg-bindung { color: var(--rost); background: color-mix(in srgb, var(--rost) 12%, #fff); }
.erg-preis {
  margin-top: auto; padding-top: 10px; border-top: 1px solid var(--stein);
  font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums;
}

.erg-blaettern { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.erg-blaettern-stand { font-size: 13.5px; color: var(--grau); }
a.knopf-schlank { text-decoration: none; display: inline-block; }

/* ── Der leere Zustand ────────────────────────────────────────────────── */
.leerbild {
  background: #FCFBF9; border: 1px dashed var(--rand); border-radius: 12px;
  padding: 28px 24px 26px;
}
.leerbild-titel { font-size: clamp(19px, 2.8vw, 23px); font-weight: 600; letter-spacing: -.02em; margin: 0 0 8px; }
.leerbild-satz { margin: 0 0 22px; color: #4a4b47; font-size: 15px; max-width: 64ch; line-height: 1.6; }

.leerbild-naeher { margin: 0 0 24px; }
.leerbild-naeher h3, .leerbild-tat h3, .leerbild-zweit h3 {
  font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--grau); margin: 0 0 10px;
}
.naeher-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
@media (min-width: 700px) { .naeher-liste { grid-template-columns: repeat(2, 1fr); } }
.naeher-liste a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  background: #fff; border: 1px solid var(--rand); border-radius: 9px;
  padding: 12px 15px; text-decoration: none; color: var(--ink);
  transition: border-color 160ms var(--kurve);
}
.naeher-liste a:hover { border-color: var(--ink); text-decoration: none; }
.naeher-bez { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.naeher-zahl { flex: 0 0 auto; font-size: 13px; color: var(--grau); font-variant-numeric: tabular-nums; }

.leerbild-tat {
  background: #fff; border: 1px solid var(--rand); border-radius: 10px;
  padding: 20px 20px 22px; margin: 0 0 20px;
}
.leerbild-tat p { margin: 0 0 14px; font-size: 14.5px; color: #4a4b47; max-width: 62ch; }
.auftrag-form { margin: 0; max-width: 460px; }
.auftrag-form .feld { margin-bottom: 14px; }
.auftrag-form input[type=text] {
  width: 100%; font: 400 15px var(--schrift); color: var(--ink); background: #fff;
  border: 1px solid var(--rand); border-radius: 8px; padding: 11px 13px;
}
.auftrag-form input:focus {
  outline: none; border-color: var(--enzian);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--enzian) 14%, transparent);
}
.leerbild .sperre { margin: 0 0 20px; }

.leerbild-zweit { border-top: 1px solid var(--stein); padding-top: 20px; }
.leerbild-zweit p { margin: 0 0 14px; font-size: 14.5px; color: #4a4b47; max-width: 62ch; }
.knopf.knopf-schlicht { background: #fff; color: var(--ink); border: 1px solid var(--rand); }
.knopf.knopf-schlicht:hover { background: var(--stein); color: var(--ink); }

.leerbild-lage {
  margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--stein);
  font-size: 13px; color: var(--grau); font-variant-numeric: tabular-nums;
}

/* ── Premium-Hinweis unter der Liste ──────────────────────────────────── */
.premium-hinweis {
  --farbe: var(--laerche); margin: 26px 0 0; padding: 20px 20px 22px; border-radius: 10px;
  background: color-mix(in srgb, var(--farbe) 5%, #fff);
  border: 1px solid color-mix(in srgb, var(--farbe) 26%, #fff);
}
.premium-hinweis h2 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; margin: 8px 0 8px; }
.premium-hinweis p { margin: 0 0 12px; font-size: 14.5px; color: #4a4b47; max-width: 62ch; }
.premium-preis { font-size: 14px; color: var(--grau); }
.premium-preis strong { color: var(--ink); font-size: 17px; margin-right: 8px; font-variant-numeric: tabular-nums; }

@media (max-width: 560px) {
  .suchkopf-innen { padding: 18px 16px 18px; }
  .suchraum { padding: 16px 16px 76px; }
  .such-knopf { padding: 11px 14px; font-size: 14px; }
  .such-eingabe, .suchbahn-gross .such-eingabe { font-size: 16px; padding: 14px 0; }
  .bestandsband-innen { padding: 22px 16px; }
  .ortsband-innen { padding: 34px 16px; }
  .leerbild { padding: 22px 18px; }
  .erg-liste { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Preisseite und Bestellstrecke
   ══════════════════════════════════════════════════════════════════════════ */
.preisgruppe { border-top: 1px solid var(--stein); padding-top: 34px; margin-top: 40px; }
.preisgruppe:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.preisgruppe > h2 { font-size: clamp(20px, 3vw, 25px); font-weight: 600; letter-spacing: -.02em; margin: 0 0 12px; }
.preisgruppe-text { max-width: 68ch; margin: 0 0 22px; }
.preisgruppe .stufen { margin-top: 26px; }

.preis-raster { display: grid; gap: 14px; margin: 26px 0 0; }
@media (min-width: 760px) {
  .preis-raster { grid-template-columns: repeat(3, 1fr); }
  .preis-raster-zwei { grid-template-columns: repeat(2, 1fr); }
}

.preiskarte {
  --farbe: var(--enzian); position: relative; overflow: hidden;
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--rand); border-radius: 10px; padding: 20px 18px 22px;
}
.preiskarte::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--farbe); }
.preiskarte.ist-empfohlen { --farbe: var(--laerche); border-color: color-mix(in srgb, var(--laerche) 34%, #fff); }
.preiskarte h3 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 10px; }

.preis-betrag {
  font-size: 28px; font-weight: 700; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; margin: 0 0 4px;
}
.preis-takt { margin-left: 4px; font-size: 14px; font-weight: 400; color: var(--grau); letter-spacing: 0; }
.preis-netto { font-size: 12.5px; color: var(--grau); margin: 0 0 12px; line-height: 1.5; }
.preis-spar {
  font-size: 13.5px; color: #23503c; margin: 0 0 12px; padding: 9px 11px; border-radius: 8px;
  background: color-mix(in srgb, var(--latsche) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--latsche) 26%, #fff);
}
.preis-kurz { font-size: 14px; color: #4a4b47; margin: 0 0 14px; }

.papier .preis-liste { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.preis-liste li { font-size: 14px; color: #4a4b47; padding-left: 20px; position: relative; margin: 0; line-height: 1.5; }
.preis-liste li::before {
  content: ""; position: absolute; left: 2px; top: .38em; width: 10px; height: 5px;
  border-left: 2px solid var(--farbe, var(--enzian));
  border-bottom: 2px solid var(--farbe, var(--enzian)); transform: rotate(-45deg);
}
.preis-fuss { margin: auto 0 0; padding-top: 8px; }
.preis-schon { font-size: 14px; font-weight: 600; color: var(--latsche); }

/* Zweitrangiger Knopf: sichtbar, aber leiser als der empfohlene */
.knopf.knopf-zweit { background: none; color: var(--ink); border: 1px solid var(--rand); }
.knopf.knopf-zweit:hover { background: var(--stein); color: var(--ink); }

/* ── Bestellstrecke ─────────────────────────────────────────────────────── */
.bestellblock { border-top: 1px solid var(--stein); padding-top: 26px; margin-top: 30px; }
.bestellblock:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.bestellblock > h2 { font-size: 18px; font-weight: 600; letter-spacing: -.015em; margin: 0 0 14px; }
.bestell-tarif { margin: 0 0 14px; }
.bestell-tarif strong { display: block; font-size: 17px; }

/* Netto, Steuer, Gesamt: getrennte Zeilen, Zahlen rechts und untereinander */
.papier .rechnung { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0 0 16px; }
.rechnung > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  border-bottom: 1px solid var(--stein); padding: 9px 0;
}
.rechnung dt { color: var(--grau); font-size: 14px; }
.rechnung dd {
  margin: 0; font-size: 15px; text-align: right;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.rechnung .rechnung-summe {
  border-bottom: 0; border-top: 2px solid var(--ink); margin-top: 2px; padding-top: 12px;
}
.rechnung .rechnung-summe dt { color: var(--ink); font-weight: 600; font-size: 15px; }
.rechnung .rechnung-summe dd { font-size: 19px; font-weight: 700; }
.rechnung-takt { font-weight: 400; font-size: 13px; color: var(--grau); }

/* Zahlart: eine Auswahl, keine Reihe von Markenzeichen */
.zahlwahl { display: grid; gap: 10px; margin: 0 0 24px; }
.zahlweg {
  display: flex; gap: 12px; align-items: flex-start; cursor: pointer; background: #fff;
  border: 1px solid var(--rand); border-radius: 10px; padding: 14px 16px;
  transition: border-color 160ms var(--kurve), background 160ms var(--kurve);
}
.zahlweg:hover { border-color: var(--enzian); }
.zahlweg:has(input:checked) { border-color: var(--enzian); background: color-mix(in srgb, var(--enzian) 4%, #fff); }
.zahlweg:has(input:focus-visible) { outline: 2px solid var(--enzian); outline-offset: 2px; }
.zahlweg input[type=radio] { width: 20px; height: 20px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--enzian); }
.zahlweg-text strong { display: block; font-size: 15px; font-weight: 600; }
.zahlweg-notiz { display: block; margin-top: 2px; font-size: 13px; line-height: 1.5; color: var(--grau); }
.zahlwahl.fehlt .zahlweg { border-color: var(--rost); }

.bestell-summe { font-size: 16px; margin: 0 0 18px; }
.bestell-summe strong { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Zustandsmeldung ohne Wertung: weder gut noch schlecht, nur der Stand */
.rueckmeldung.warten { background: #FCFBF9; border: 1px solid var(--rand); color: #4a4b47; }

/* ══════════════════════════════════════════════════════════════════════════
   Ergebnisseite: mehr Kontrast, klarere Ebenen
   Vorher lag alles auf demselben hellen Grund und die Karten verschwammen
   damit. Jetzt trägt die Seite einen leicht getönten Grund, und was oben
   liegt, ist weiß und wirft einen Schatten. Der Blick sieht dann sofort,
   was zusammengehört.
   ══════════════════════════════════════════════════════════════════════════ */
body:has(.suchraum) { background: #F4F2EE; }

.suchkopf {
  background: #fff;
  border-bottom: 1px solid var(--rand);
  box-shadow: 0 1px 3px rgba(26,27,25,.04);
}
.suchkopf h1 { color: var(--ink); }

/* Das Suchfeld über der Liste soll das kräftigste Element der Seite sein. */
.suchkopf .suchkasten {
  border-color: #c9c5b8;
  box-shadow: 0 2px 8px rgba(26,27,25,.07);
}
.suchkopf .suchkasten:focus-within {
  border-color: var(--enzian);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--enzian) 16%, transparent),
              0 4px 14px rgba(27,75,115,.12);
}

/* Marken deutlicher: sie sind anklickbar und müssen danach aussehen. */
.marke {
  background: #fff;
  border-color: #c6d3de;
  box-shadow: 0 1px 2px rgba(26,27,25,.05);
}
.marke:hover { box-shadow: 0 2px 6px rgba(142,59,35,.14); }
.marke-alle { background: transparent; box-shadow: none; }

/* Die Filterspalte bekommt eine eigene Fläche statt frei zu schweben. */
@media (min-width: 900px) {
  .filterblatt {
    background: #fff; border: 1px solid var(--rand); border-radius: 12px;
    padding: 18px 16px 4px;
    box-shadow: 0 1px 3px rgba(26,27,25,.05);
  }
}
.filter-teil legend { color: #55544e; }
.wahlknopf span { border-color: #cdc9bd; color: #55544e; }

.knopf-schlicht {
  border-color: #c9c5b8;
  box-shadow: 0 1px 2px rgba(26,27,25,.05);
}
.knopf-schlicht:hover { box-shadow: 0 2px 7px rgba(26,27,25,.1); }

/* Ergebniskarten heben sich vom getönten Grund ab und steigen beim Zeigen. */
.erg-weg {
  border-color: #ddd9cd;
  box-shadow: 0 1px 3px rgba(26,27,25,.06), 0 6px 16px -8px rgba(26,27,25,.1);
}
.erg-weg:hover {
  border-color: var(--enzian);
  box-shadow: 0 4px 10px rgba(26,27,25,.08), 0 16px 32px -12px rgba(27,75,115,.24);
}
.erg-titel { color: var(--ink); }
.erg-ort, .erg-zahlen i { color: #55544e; }
.erg-preis { color: var(--ink); border-top-color: #e4e0d6; }
.erg-marke { background: #EDEAE2; color: #55544e; }

/* Der leere Zustand ist am Anfang die wichtigste Ansicht. Er darf nicht
   aussehen wie ein Platzhalter, der vergessen wurde. */
.leerbild {
  background: #fff; border: 1px solid var(--rand); border-style: solid;
  box-shadow: 0 2px 6px rgba(26,27,25,.05), 0 20px 40px -24px rgba(26,27,25,.16);
}
.leerbild-satz { color: #3d3e3a; }
.naeher-liste a {
  border-color: #ddd9cd;
  box-shadow: 0 1px 2px rgba(26,27,25,.04);
}
.naeher-liste a:hover { border-color: var(--enzian); box-shadow: 0 3px 9px rgba(27,75,115,.14); }
.leerbild-tat { border-color: #ddd9cd; box-shadow: 0 1px 3px rgba(26,27,25,.05); }

.premium-hinweis { box-shadow: 0 2px 8px rgba(156,98,16,.08); }

/* Vorschlagsliste stärker abgesetzt: sie liegt über allem. */
.suchvorschlaege {
  border-color: #c9c5b8;
  box-shadow: 0 4px 10px rgba(26,27,25,.08), 0 18px 44px -10px rgba(26,27,25,.24);
}
.vor-zeile.an, .vor-zeile[aria-selected="true"] { background: #EAF0F5; }
.vor-zusatz { color: #55544e; }

/* Die Karte in der Suche bekommt ebenfalls eine Fläche. */
.kartenwahl svg.suedtirol {
  background: #fff; border: 1px solid var(--rand); border-radius: 12px;
  box-shadow: 0 1px 3px rgba(26,27,25,.05);
}

/* ══════════════════════════════════════════════════════════════════════════
   Startseite: eine Mitte, sonst nichts
   Wer herkommt, will suchen. Alles, was daneben steht, kostet nur Blick.
   ══════════════════════════════════════════════════════════════════════════ */
.buehne-start {
  display: flex; align-items: center; justify-content: center;
  min-height: calc(100svh - 80px);
  padding: 40px var(--bahn-rand) 60px;
  text-align: center;
}
@media (max-width: 780px) { .buehne-start { min-height: calc(100svh - 56px); padding-top: 24px; } }

/* WICHTIG: relative und z-index. Die Buehne legt eine weisse Ueberblendung
   ueber ihr Hintergrundbild; ohne eigene Ebene liegt die ueber dem Text, und
   dann steht die Ueberschrift grau statt schwarz da. */
.start-mitte { position: relative; z-index: 2; width: 100%; max-width: 660px; margin: 0 auto; }
.start-mitte .stand-marke { margin: 0 auto 22px; }

.start-mitte h1 {
  font-size: clamp(28px, 5.2vw, 46px); font-weight: 600; letter-spacing: -.03em;
  line-height: 1.12; margin: 0 0 28px; max-width: none; text-wrap: balance;
}

/* Das Suchfeld ist das einzige Element, das die volle Aufmerksamkeit will. */
.start-feld .suchbahn { margin: 0 auto 16px; max-width: 100%; }
.start-feld .suchkasten {
  border-color: #c9c5b8;
  box-shadow: 0 2px 6px rgba(26,27,25,.06), 0 14px 34px -16px rgba(26,27,25,.28);
}
.start-feld .suchkasten:focus-within {
  border-color: var(--enzian);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--enzian) 16%, transparent),
              0 14px 34px -16px rgba(27,75,115,.34);
}
/* Die Vorschlagsliste bleibt linksbündig, auch wenn die Seite mittig steht:
   Wortanfänge untereinander liest man schneller. */
.start-feld .suchvorschlaege { text-align: left; }

.buehne-start .such-beispiele { justify-content: center; margin-bottom: 30px; }

/* Vier Wege als ruhige Reihe statt als vier große Karten. */
.startwege {
  list-style: none; margin: 0 0 26px; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
}
.startwege a {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--rand); border-radius: 100px;
  padding: 10px 18px; color: var(--ink); text-decoration: none;
  font-size: 14.5px; font-weight: 600;
  box-shadow: 0 1px 2px rgba(26,27,25,.05);
  transition: border-color 160ms var(--kurve), transform 160ms var(--kurve),
              box-shadow 160ms var(--kurve);
}
.startwege a:hover {
  border-color: var(--ink); text-decoration: none; transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(26,27,25,.1);
}
.startwege svg { width: 18px; height: 18px; flex: 0 0 auto; }
@media (prefers-reduced-motion: reduce) { .startwege a:hover { transform: none; } }

.startnotiz { margin: 0; font-size: 13.5px; color: var(--grau); }
.startnotiz a { color: var(--enzian); }

@media (max-width: 560px) {
  .start-mitte h1 { margin-bottom: 22px; }
  .startwege a { padding: 9px 14px; font-size: 13.5px; }
  .buehne-start .such-beispiele { margin-bottom: 22px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Knöpfe setzen ihre Farbe selbst durch
   Auf der Anmeldeseite stand ein Knopf schwarz auf schwarz: der Text war
   unsichtbar. Ursache war .direktwege a, das mit einer Klasse plus einem
   Element spezifischer ist als .knopf allein und deshalb gewann. Dieselbe
   Falle steht in jedem Bereich, der Links einfärbt, also wird sie hier
   einmal für alle geschlossen. Der doppelte Klassenname hebt die
   Spezifität, ohne dass irgendwo !important nötig wird.
   ══════════════════════════════════════════════════════════════════════════ */
a.knopf.knopf,
button.knopf.knopf {
  color: #fff;
  background: var(--ink);
}
a.knopf.knopf:hover,
button.knopf.knopf:hover { color: #fff; background: #000; }

/* Die hellen Spielarten: dunkle Schrift auf hellem Grund. */
a.knopf.knopf-hell, button.knopf.knopf-hell,
a.knopf.knopf-schlicht, button.knopf.knopf-schlicht {
  color: var(--ink); background: #fff;
}
a.knopf.knopf-hell:hover, button.knopf.knopf-hell:hover,
a.knopf.knopf-schlicht:hover, button.knopf.knopf-schlicht:hover {
  color: var(--ink); background: var(--stein);
}
a.knopf.knopf-zweit, button.knopf.knopf-zweit {
  color: var(--ink); background: none; border: 1px solid var(--rand);
}
a.knopf.knopf-zweit:hover, button.knopf.knopf-zweit:hover {
  color: var(--ink); background: var(--stein);
}
a.knopf.knopf-warnung, button.knopf.knopf-warnung { color: #fff; background: var(--rost); }
a.knopf.knopf-warnung:hover, button.knopf.knopf-warnung:hover { color: #fff; background: #74301d; }

/* Der schlanke Knopf ist ein Umriss und trägt nie weiße Schrift. */
a.knopf-schlank.knopf-schlank, button.knopf-schlank.knopf-schlank {
  color: var(--grau); background: none;
}
a.knopf-schlank.knopf-schlank:hover, button.knopf-schlank.knopf-schlank:hover {
  color: var(--ink); border-color: var(--ink);
}

/* Ein gesperrter Knopf muss als gesperrt zu erkennen sein und trotzdem
   lesbar bleiben. Grau auf Grau ist beides nicht. */
a.knopf[aria-disabled="true"], button.knopf:disabled, button.knopf.knopf:disabled {
  background: var(--stein); color: #8a8880; cursor: not-allowed; transform: none;
  box-shadow: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   Kontrast, Kanten, Schatten
   Die Seite war zu weich: helle Schrift auf hellem Grund, überall dieselbe
   starke Rundung, kaum Abstufung zwischen den Ebenen. Hier wird nachgezogen.
   Weniger Radius, dunklere Schrift, klarere Ränder, spürbarer Hover.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Weniger Rundung ──────────────────────────────────────────────────── */
.knopf, .knopf-schlicht, .such-knopf, .suchkasten, .suchvorschlaege,
.erg-weg, .leerbild, .naeher-liste a, .leerbild-tat, .kontingent, .tarifkarte,
.preiskarte, .zahlweg, .filterblatt, .saeulen li, .konto-nav a, .feld input,
.feld select, .feld textarea, .chat-form textarea, .karten-info, .legende,
.objektliste li, .vorschau-karte, .sperre, .stufe, .premium-hinweis,
.leerstelle, .loeschkasten, .bilderfach, .anfrage-text {
  border-radius: 4px;
}
/* Pillenform nur dort, wo sie etwas bedeutet: Marken und Zähler. */
.marke, .nl-marke, .nl-zahl, .erg-marke, .such-beispiele a, .startwege a,
.wahlknopf span, .stufe-marke, .ob-marke, .kontoart, .knopf-schlank {
  border-radius: 100px;
}
.kopf-knopf, .kopf-konto, .kopf-nav a { border-radius: 4px; }

/* ── Dunklere Schrift ─────────────────────────────────────────────────── */
:root {
  /* Der alte Grauton lag bei 4,3:1 und damit knapp unter der Anforderung
     für kleinen Text. Jetzt 5,4:1. */
  --grau: #5C5B55;
}
.papier p, .papier li, .lesetext p { color: #262724; }
.vorsatz, .unterzeile, .einleitung { color: #4a4b47; }
.erg-ort, .erg-zahlen i, .nl-bezug, .zeile-neben { color: #55544e; }

/* ── Ränder, die man sieht ────────────────────────────────────────────── */
:root { --rand: #CBC7BA; }
.feld input, .feld select, .feld textarea { border-color: #C2BEB1; }
.feld input:hover, .feld select:hover, .feld textarea:hover { border-color: #9d9990; }

/* ── Hover, der antwortet ─────────────────────────────────────────────── */
.saeulen li { transition: border-color 160ms var(--kurve), box-shadow 160ms var(--kurve),
                          transform 160ms var(--kurve); }
.saeulen li:hover {
  border-color: var(--ink); transform: translateY(-2px);
  box-shadow: 0 6px 18px -6px rgba(26,27,25,.22);
}
.startwege a:active, .such-beispiele a:active { transform: translateY(0); }
.marke:focus-visible, .startwege a:focus-visible, .such-beispiele a:focus-visible,
.knopf:focus-visible, .knopf-schlicht:focus-visible {
  outline: 2px solid var(--enzian); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .saeulen li:hover { transform: none; }
}

/* ── Kopfleiste: beim Scrollen mit Weichzeichner statt nur Schatten ───── */
.kopfleiste.geschoben {
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom-color: #CBC7BA;
  box-shadow: 0 1px 16px rgba(26,27,25,.08);
}

/* ══════════════════════════════════════════════════════════════════════════
   Handy: größere Ziele, weniger Rand, ruhigere Kanten
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 560px) {
  /* Alles, was man antippt, mindestens 44 px hoch. Darunter trifft man daneben. */
  .knopf, .knopf-schlicht, .such-knopf, .startwege a, .konto-nav a,
  .wahlknopf span, .knopf-schlank { min-height: 44px; }
  .knopf, .such-knopf { padding-block: 13px; }
  .startwege a { padding: 12px 16px; }
  .feld input, .feld select, .feld textarea { font-size: 16px; padding: 13px 14px; }

  /* 16 px verhindert, dass iOS beim Antippen hineinzoomt. */
  .such-eingabe { font-size: 16px; }

  /* Karten dürfen am Rand des Bildschirms stehen, das gibt Breite zurück. */
  .erg-liste { gap: 10px; }
  .erg-text { padding: 12px 13px 13px; }

  /* Schatten am Handy flacher: auf kleinen Flächen wirken sie sonst schmutzig. */
  .erg-weg { box-shadow: 0 1px 2px rgba(26,27,25,.07); }
  .erg-weg:hover { transform: none; box-shadow: 0 1px 3px rgba(26,27,25,.1); }
  .leerbild { box-shadow: 0 1px 3px rgba(26,27,25,.06); }
}

/* ══════════════════════════════════════════════════════════════════════════
   Filterbox: kompakter, nach Wichtigkeit geordnet, mit Preisleiste
   Die Erklärungen stehen hinter einem Fragezeichen statt als Absatz unter
   jedem Filter. Sie werden zweimal gelesen und stehen sonst hundertmal im Weg.
   ══════════════════════════════════════════════════════════════════════════ */
.filter-teil { margin-bottom: 13px; padding-bottom: 13px; border-bottom: 1px solid var(--stein); }
.filter-teil:last-of-type { border-bottom: 0; }
.filter-teil legend {
  display: flex; align-items: center; gap: 6px; width: 100%;
  font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: #55544e; margin-bottom: 7px;
}
.legende-zusatz {
  font-size: 10.5px; font-weight: 600; letter-spacing: .03em; text-transform: none;
  color: #8a8880;
}
/* Der eingestellte Preis steht in der Überschrift, nicht darunter: dort sucht
   man ihn, und es kostet keine Zeile. */
.legende-wert {
  margin-left: auto; font-size: 11.5px; font-weight: 600; letter-spacing: 0;
  text-transform: none; color: var(--enzian); font-variant-numeric: tabular-nums;
}

.filter-i {
  flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%;
  border: 1px solid var(--rand); background: #fff; color: var(--grau);
  font: 700 10px/1 var(--schrift); cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color 140ms var(--kurve), border-color 140ms var(--kurve);
}
.filter-i:hover { color: var(--enzian); border-color: var(--enzian); }
.filter-i[aria-expanded="true"] { color: #fff; background: var(--enzian); border-color: var(--enzian); }
.filter-hinweis {
  font-size: 12px; line-height: 1.5; color: #55544e; margin: 8px 0 0;
  background: #FBFAF8; border-left: 2px solid var(--enzian);
  padding: 7px 9px; border-radius: 0 3px 3px 0;
}

.knopfreihe { gap: 5px; }
.wahlknopf span { font-size: 12.5px; padding: 5px 11px; }
.spanne-eng { gap: 7px; }
.filterblatt .feld > span { font-size: 11.5px; }
.filterblatt .feld input[type=text] { padding: 7px 10px; font-size: 14px; }
.filterblatt select { padding: 7px 10px; font-size: 13.5px; }

/* ── Die Preisleiste ──────────────────────────────────────────────────── */
.leiste { position: relative; height: 26px; margin: 2px 0 8px; }
.leiste-schiene {
  position: absolute; left: 0; right: 0; top: 11px; height: 4px;
  background: var(--stein); border-radius: 100px;
}
.leiste-fuellung {
  position: absolute; top: 0; height: 100%; background: var(--enzian); border-radius: 100px;
}
/* Zwei Regler auf derselben Schiene. Der Balken ist durchsichtig, sichtbar
   sind nur die beiden Griffe. */
.leiste input[type=range] {
  position: absolute; left: 0; top: 0; width: 100%; height: 26px;
  margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none;
}
.leiste input[type=range]::-webkit-slider-runnable-track { height: 26px; background: none; }
.leiste input[type=range]::-moz-range-track { height: 26px; background: none; }
.leiste input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; pointer-events: auto; cursor: grab;
  width: 18px; height: 18px; margin-top: 4px; border-radius: 50%;
  background: #fff; border: 2px solid var(--enzian);
  box-shadow: 0 1px 4px rgba(26,27,25,.24);
}
.leiste input[type=range]::-moz-range-thumb {
  pointer-events: auto; cursor: grab;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 2px solid var(--enzian);
  box-shadow: 0 1px 4px rgba(26,27,25,.24);
}
.leiste input[type=range]:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--enzian); outline-offset: 2px;
}
.leiste input[type=range]:active::-webkit-slider-thumb { cursor: grabbing; }

/* Am Handy fassen sich größere Griffe besser an. */
@media (max-width: 560px) {
  .leiste { height: 32px; }
  .leiste-schiene { top: 14px; }
  .leiste input[type=range] { height: 32px; }
  .leiste input[type=range]::-webkit-slider-thumb { width: 24px; height: 24px; margin-top: 4px; }
  .leiste input[type=range]::-moz-range-thumb { width: 24px; height: 24px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Filterabschnitte: klappbar, mit Zeichen, kompakt
   Offen stehen die Fragen, die fast jeder beantwortet. Der Rest ist zu und
   trägt eine Standanzeige, damit man Gesetztes sieht, ohne aufzuklappen.
   ══════════════════════════════════════════════════════════════════════════ */
.filter-teil { margin-bottom: 0; padding: 9px 0; }
.filter-teil legend { margin-bottom: 0; padding: 0; width: 100%; }

.teil-kopf {
  display: flex; align-items: center; gap: 8px; width: 100%;
  border: 0; background: none; cursor: pointer; text-align: left; padding: 2px 0;
  font: 700 12px/1.3 var(--schrift); letter-spacing: .04em; text-transform: uppercase;
  color: #45443f;
}
.teil-kopf:hover { color: var(--ink); }
.teil-kopf svg:first-child { flex: 0 0 auto; color: var(--enzian); opacity: .85; }
.teil-wort { flex: 0 0 auto; }
.teil-stand, .legende-wert {
  margin-left: auto; text-align: right;
  font: 600 11.5px var(--schrift); letter-spacing: 0; text-transform: none;
  color: var(--enzian); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.teil-pfeil { flex: 0 0 auto; margin-left: 6px; color: #8a8880;
              transition: transform 160ms var(--kurve); }
.teil-kopf[aria-expanded="false"] .teil-pfeil { transform: rotate(-90deg); }
@media (prefers-reduced-motion: reduce) { .teil-pfeil { transition: none; } }

/* Zugeklappt verschwindet alles außer der Überschrift. */
.filter-teil.zu > *:not(legend) { display: none; }
.filter-teil.zu { border-bottom: 1px solid var(--stein); }
.filter-teil:not(.zu) { border-bottom: 1px solid var(--stein); padding-bottom: 12px; }
.filter-teil:last-of-type { border-bottom: 0; }
/* Ein Abschnitt mit Auswahl bekommt eine Kante, damit er auffällt. */
.filter-teil.hat-wahl .teil-kopf svg:first-child { opacity: 1; }

.filterblatt { gap: 0; padding-block: 4px; }
@media (min-width: 900px) { .filterblatt { padding: 12px 14px; } }
.knopfreihe { gap: 4px; margin-top: 7px; }
.wahlknopf span { font-size: 12px; padding: 4px 10px; }
.filter-teil .spanne { margin-top: 7px; }
.filter-teil > .feld { margin-top: 7px; }

/* Der Fuß braucht keinen Absenden-Knopf mehr: Änderungen wirken sofort.
   Er bleibt als Weg zum Zurücksetzen. */
.filterblatt-fuss .knopf { display: none; }
@media (max-width: 899px) { .filterblatt-fuss .knopf { display: inline-flex; } }

/* ── Handy: die Filter als kompaktes Blatt ────────────────────────────── */
@media (max-width: 899px) {
  .filterblatt { padding-inline: 14px; }
  .filter-teil { padding: 7px 0; }
  .teil-kopf { font-size: 12.5px; padding: 6px 0; }
  .wahlknopf span { font-size: 13px; padding: 7px 12px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Infopunkte auf der Karte
   ══════════════════════════════════════════════════════════════════════════ */
.kartenflaeche { position: relative; }
.kartenpunkte { position: absolute; inset: 0; pointer-events: none; }
.kartenpunkt {
  position: absolute; transform: translate(-50%, -50%);
  pointer-events: auto; cursor: pointer;
  min-width: 26px; height: 26px; padding: 0 7px;
  border: 2px solid #fff; border-radius: 100px;
  background: var(--enzian); color: #fff;
  font: 700 12px/1 var(--schrift); font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 8px rgba(26,27,25,.32);
  transition: transform 140ms var(--kurve), box-shadow 140ms var(--kurve);
}
.kartenpunkt:hover, .kartenpunkt:focus-visible {
  transform: translate(-50%, -50%) scale(1.18);
  box-shadow: 0 4px 14px rgba(27,75,115,.45); z-index: 3;
}
/* Viele Angebote wiegen sichtbar mehr als eines. */
.kartenpunkt.mittel { min-width: 30px; height: 30px; font-size: 13px; }
.kartenpunkt.viel   { min-width: 34px; height: 34px; font-size: 14px; background: var(--laerche); }
@media (prefers-reduced-motion: reduce) { .kartenpunkt:hover { transform: translate(-50%, -50%); } }

.kartenfenster {
  position: absolute; right: 12px; top: 12px; z-index: 6;
  width: min(330px, calc(100% - 24px));
  background: #fff; border: 1px solid var(--rand); border-radius: 4px;
  box-shadow: 0 8px 30px -8px rgba(26,27,25,.34);
  max-height: calc(100% - 24px); overflow-y: auto;
}
.kf-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 13px 6px;
}
.kf-kopf strong { font-size: 15.5px; letter-spacing: -.01em; }
.kf-zu { border: 0; background: none; cursor: pointer; font-size: 22px; line-height: 1;
         color: var(--grau); padding: 0 4px; }
.kf-zu:hover { color: var(--ink); }
.kf-spanne { margin: 0; padding: 0 13px 9px; font-size: 12.5px; color: #55544e;
             font-variant-numeric: tabular-nums; }
.kf-inhalt { padding: 0 13px; display: grid; gap: 8px; }
.kf-inhalt .erg-karte { margin: 0; }
.kf-inhalt .erg-bild { aspect-ratio: 16 / 9; }
.kf-inhalt .erg-text { padding: 9px 10px 10px; gap: 4px; }
.kf-inhalt .erg-titel { font-size: 14px; }
.kf-inhalt .erg-preis { font-size: 15px; padding-top: 7px; }
.kf-laedt { margin: 0; padding: 12px 0; font-size: 13px; color: var(--grau); text-align: center; }
.kf-mehr {
  display: block; padding: 11px 13px; margin-top: 9px;
  border-top: 1px solid var(--stein); font-size: 13.5px; font-weight: 600;
  color: var(--enzian); text-decoration: none;
}
.kf-mehr:hover { background: #FBFAF8; }

@media (max-width: 620px) {
  /* Am Handy von unten, damit der Daumen hinkommt und die Karte sichtbar bleibt. */
  .kartenfenster {
    position: fixed; inset: auto 0 0 0; width: 100%; max-height: 62vh;
    border-radius: 12px 12px 0 0; border-bottom: 0;
    box-shadow: 0 -8px 34px rgba(26,27,25,.3);
  }
  .kartenpunkt { min-width: 30px; height: 30px; }
}

/* Zurücksetzen: sichtbar, aber nicht laut. Die Zahl sagt, wie viele Filter
   gesetzt sind; ohne sie klickt man ins Leere und weiß nicht, ob etwas war. */
.filterblatt-fuss { display: flex; align-items: center; gap: 10px; }
@media (min-width: 900px) {
  .filterblatt-fuss {
    display: flex; border-top: 1px solid var(--stein); margin-top: 4px; padding-top: 11px;
  }
}
.filter-weg {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--grau);
}
.filter-weg:hover { color: var(--rost); border-color: var(--rost); }
.filter-weg.aus { opacity: .45; pointer-events: none; }
.filter-weg .filter-zahl { background: var(--rost); }
/* Die kleine Fassung steht im Kopf des Blattes, dort sucht man sie zuerst. */
.filter-weg-klein {
  margin-left: auto; font-size: 12.5px; color: var(--grau); text-decoration: none;
  border-bottom: 1px solid var(--rand);
}
.filter-weg-klein:hover { color: var(--rost); border-bottom-color: var(--rost); }
@media (min-width: 900px) { .filterblatt-kopf { display: flex; align-items: baseline; gap: 10px; } }

/* ══════════════════════════════════════════════════════════════════════════
   Schaufenster auf der Startseite
   Vier Angebote sichtbar, zwölf insgesamt, seitlich verschiebbar. Kein
   Selbstlauf: ein Karussell, das von allein weiterspringt, nimmt dem Leser
   die Zeile weg, die er gerade liest.
   ══════════════════════════════════════════════════════════════════════════ */
.schaufenster { border-top: 1px solid var(--stein); background: #FCFBF9; }
.schaufenster-innen { max-width: var(--bahn); margin: 0 auto; padding: 34px var(--bahn-rand) 40px; }
.sf-kopf {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 10px 16px; margin-bottom: 16px;
}
.sf-kopf h2 { font-size: clamp(18px, 2.6vw, 22px); font-weight: 600; letter-spacing: -.02em; margin: 0; }
.sf-steuerung { display: flex; align-items: center; gap: 7px; }
.sf-pfeil {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border: 1px solid var(--rand); border-radius: 4px;
  background: #fff; color: var(--ink); cursor: pointer;
  transition: border-color 140ms var(--kurve), background 140ms var(--kurve);
}
.sf-pfeil:hover:not(:disabled) { border-color: var(--ink); }
.sf-pfeil:disabled { opacity: .35; cursor: default; }
.sf-alle { margin-left: 6px; font-size: 13.5px; font-weight: 600; color: var(--enzian); text-decoration: none; }
.sf-alle:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Die Bahn scrollt waagrecht und rastet an den Karten ein. Am Rand darf sie
   über die Bahn hinauslaufen, sonst sieht es abgeschnitten aus. */
.sf-bahn {
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  /* Kein Ausbrechen aus der Bahn. Der Streifen lief früher um den Seitenrand
     hinaus, damit die nächste Kachel "angeschnitten" hervorlugt -- dabei stand
     er rechts breiter als die Überschrift darüber und als alles andere auf der
     Seite. Eine gemeinsame Kante ist mehr wert als der Hinweis, dass es
     weitergeht; den geben die Pfeile und die Zählung darunter ohnehin. */
  margin-inline: 0; padding-inline: 0;
}
.sf-bahn::-webkit-scrollbar { display: none; }
.sf-bahn:focus-visible { outline: 2px solid var(--enzian); outline-offset: 4px; }
.sf-liste { list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; }
.sf-liste > li {
  flex: 0 0 calc((100% - 36px) / 4); scroll-snap-align: start; margin: 0;
}
@media (max-width: 1000px) { .sf-liste > li { flex-basis: calc((100% - 24px) / 3); } }
@media (max-width: 760px)  { .sf-liste > li { flex-basis: calc((100% - 12px) / 2); } }
@media (max-width: 520px)  { .sf-liste > li { flex-basis: 78%; } }
.sf-stand { margin: 12px 0 0; font-size: 12.5px; color: var(--grau); font-variant-numeric: tabular-nums; }

/* ══════════════════════════════════════════════════════════════════════════
   Marken sitzen eng am Text
   Sie wurden über die ganze Zeile gestreckt und waren dreimal 330 px breit,
   obwohl "Haus" hineinsteht. Eine Marke ist so breit wie ihr Wort.
   ══════════════════════════════════════════════════════════════════════════ */
.marken { align-items: center; }
.marken > .marke,
.marken > .marke-alle { flex: 0 0 auto; width: auto; }
.marken > .verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; }

/* ══════════════════════════════════════════════════════════════════════════
   Abstände: eine Leiter statt geratener Werte
   Vorher standen 7, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26 nebeneinander.
   Wenige, klare Stufen wirken ruhiger als viele feine.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --luft-1: 4px; --luft-2: 8px; --luft-3: 12px;
  --luft-4: 20px; --luft-5: 32px; --luft-6: 48px;
}
.such-steuerung { gap: var(--luft-2); margin-bottom: var(--luft-4); padding-bottom: var(--luft-3); }
.marken { gap: var(--luft-2); margin-bottom: var(--luft-4); }
.erg-liste { gap: var(--luft-3); }
.suchgitter { gap: var(--luft-4); }
@media (min-width: 900px) { .suchgitter { gap: var(--luft-5); } }
.kartenwahl { margin-bottom: var(--luft-4); }

/* ══════════════════════════════════════════════════════════════════════════
   Handy: kleiner gesetzt, enger, mit 5 px Luft am Rand
   Auf einem schmalen Schirm zählt jede Zeile. Die Schrift geht um einen
   Punkt zurück, die Abstände um eine Stufe, und links wie rechts bleiben
   5 px frei, damit keine Kante am Glas klebt.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 620px) {
  :root { --bahn-rand: 5px; }

  body { font-size: 15px; }
  h1 { font-size: clamp(20px, 6vw, 25px); }
  h2 { font-size: clamp(17px, 4.6vw, 20px); }
  h3 { font-size: 15.5px; }
  .vorsatz, .unterzeile { font-size: 14.5px; }

  /* Karten und Kästen bekommen ihren eigenen kleinen Rand, damit sie nicht
     bündig am Bildschirmrand kleben, aber auch keine Breite verschenken. */
  .erg-liste, .sf-liste { padding-inline: 3px; }
  .erg-text { padding: 11px 12px 12px; }
  .erg-titel { font-size: 15px; }
  .erg-preis { font-size: 16px; padding-top: 8px; }
  .erg-zahlen { gap: 14px; }

  .suchraum { padding: var(--luft-3) 10px 70px; }
  .suchkopf-innen { padding: var(--luft-3) 10px var(--luft-3); }
  .papier { padding-inline: 10px; }
  .lesetext-innen { padding-inline: 10px; }
  .schaufenster-innen { padding: var(--luft-4) 10px var(--luft-5); }
  .fuss-oben, .fuss-unten { padding-inline: 10px; }
  .kopf-innen { padding-inline: 10px; }

  .marken { gap: 5px; margin-bottom: var(--luft-3); }
  .marke { font-size: 12.5px; padding: 5px 10px; }
  .such-steuerung { gap: 6px; margin-bottom: var(--luft-3); padding-bottom: var(--luft-2); }
  .erg-anzahl { font-size: 13px; margin-bottom: var(--luft-2); }
  .erg-anzahl strong { font-size: 16px; }

  .sf-kopf { margin-bottom: var(--luft-3); }
  .sf-kopf h2 { font-size: 18px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Das Hintergrundbild: ruhiger, tiefer, weniger Milchglas
   Die Überblendung war so hell, dass vom Bild fast nichts übrig blieb und die
   Fläche schmutzig weiß wirkte. Jetzt bleibt oben viel Licht für die Schrift,
   und nach unten darf das Motiv durchkommen.
   ══════════════════════════════════════════════════════════════════════════ */
.buehne::before {
  background: linear-gradient(to bottom,
              rgba(255,255,255,.94) 0%,
              rgba(255,255,255,.86) 34%,
              rgba(255,255,255,.52) 68%,
              rgba(255,255,255,.16) 100%) !important;
}
.buehne {
  background-position: center 62%;
  background-size: cover;
}
/* Ein feiner Abschluss nach unten, damit das Bild nicht abgeschnitten wirkt. */
.buehne::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px;
  background: linear-gradient(to bottom, rgba(252,251,249,0), #FCFBF9);
  pointer-events: none; z-index: 1;
}
@media (max-width: 620px) {
  /* Am Handy ist das Bild fast nur Textur. Mehr Deckung, sonst leidet die
     Lesbarkeit genau dort, wo der Platz ohnehin knapp ist. */
  .buehne::before {
    background: linear-gradient(to bottom,
                rgba(255,255,255,.96) 0%,
                rgba(255,255,255,.9) 46%,
                rgba(255,255,255,.66) 100%) !important;
  }
  .buehne::after { height: 60px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Startseite: die Marke in der Mitte
   Hier ist sie das Erste, was jemand sieht, und darf gross sein. In der
   Kopfleiste bleibt sie klein; zwei Grössen für zwei Aufgaben.
   ══════════════════════════════════════════════════════════════════════════ */
.start-marke { display: block; margin: 0 auto var(--luft-4); width: fit-content; }
.start-logo { display: block; height: clamp(46px, 7vw, 74px); width: auto; }
.start-marke:hover .sig-fluegel { transform: scaleX(.4); }
.start-marke .sig-fluegel {
  transform-box: fill-box; transform-origin: left center;
  transition: transform 300ms var(--kurve);
}


@media (max-width: 620px) {
  .start-marke { margin-bottom: var(--luft-3); }
  .start-logo { height: 42px; }
}

/* ── Filterspalte noch enger ──────────────────────────────────────────── */
@media (min-width: 900px) {
  .suchgitter { grid-template-columns: 236px minmax(0, 1fr); }
  .filterblatt { padding: 10px 12px; }
}
.filter-teil { padding: 7px 0; }
.filter-teil:not(.zu) { padding-bottom: 10px; }
.teil-kopf { font-size: 11.5px; padding: 1px 0; }
.knopfreihe { gap: 4px; margin-top: 6px; }
.wahlknopf span { font-size: 11.5px; padding: 4px 9px; }
.filterblatt .feld input[type=text] { padding: 6px 9px; font-size: 13.5px; }
.filterblatt select { padding: 6px 9px; font-size: 13px; }
.leiste { height: 22px; margin: 0 0 6px; }
.leiste-schiene { top: 9px; }
.leiste input[type=range] { height: 22px; }
.leiste input[type=range]::-webkit-slider-thumb { width: 15px; height: 15px; margin-top: 3px; }
.leiste input[type=range]::-moz-range-thumb { width: 15px; height: 15px; }
.filter-hinweis { font-size: 11.5px; padding: 6px 8px; margin-top: 6px; }

/* ══════════════════════════════════════════════════════════════════════════
   Kopfleiste: mehr Punkte, volle Breite, auf der Startseite nur das Zeichen
   ══════════════════════════════════════════════════════════════════════════ */
/* Die Kopfleiste zeigt immer den vollen Schriftzug. Die Fassung nur mit dem
   Zeichen ist wieder raus: auf der Startseite stand die Marke dann zweimal in
   verschiedener Gestalt, und in der Leiste neben acht Menuepunkten sagt ein
   Quadrat allein zu wenig. */



.kopf-nav { gap: 1px; margin-left: 18px; flex-wrap: nowrap; overflow: hidden; }
.kopf-nav a { font-size: 14px; padding: 8px 10px; }

/* Zwischen 900 und 1200 px wird es eng: dort die selteneren Punkte weglassen,
   statt die Leiste umbrechen zu lassen. */
@media (max-width: 1200px) {
  .kopf-nav a[href="/makler"], .kopf-nav a[href="/kontakt"] { display: none; }
}
@media (max-width: 1020px) {
  .kopf-nav a[href="/preise"] { display: none; }
  .kopf-nav a { font-size: 13.5px; padding: 8px 8px; }
}

.kopf-rechts { gap: 8px; }
.kopf-knopf { font-size: 13.5px; padding: 8px 14px; }
@media (max-width: 860px) { .kopf-knopf { display: none; } }
/* ══════════════════════════════════════════════════════════════════════════
   Wissensdatenbank "Wohnen": /wohnen, /wohnen-artikel, /glossar, /rechner
   Van De Beat Agency
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Eingabefelder, die es bisher nicht gab ───────────────────────────── */
.feld input[type=number],
.feld input[type=search] {
  width: 100%; padding: 12px 13px; font: inherit; font-size: 15.5px;
  color: var(--ink); background: #fff;
  border: 1px solid var(--rand); border-radius: 8px;
  transition: border-color 160ms var(--kurve);
}
.feld input[type=number]:focus,
.feld input[type=search]:focus { border-color: var(--enzian); outline: 2px solid var(--enzian); outline-offset: 1px; }

/* ── Übersicht /wohnen ────────────────────────────────────────────────── */
.wissen-wege { grid-template-columns: 1fr; margin: 30px 0 8px; }
@media (min-width: 760px) { .wissen-wege { grid-template-columns: repeat(3, 1fr); } }

.papier .wissen-gruppe {
  font-size: 13px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--grau); margin: 30px 0 12px; max-width: none;
}
.wissen-raster { display: grid; gap: 14px; }
@media (min-width: 700px) { .wissen-raster { grid-template-columns: repeat(2, 1fr); } }

.wissen-karte {
  --farbe: var(--enzian);
  display: grid; gap: 6px; align-content: start;
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--rand); border-radius: 12px;
  padding: 20px; text-decoration: none; color: var(--ink);
  transition: border-color 180ms var(--kurve), transform 180ms var(--kurve);
}
.wissen-karte::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--farbe); }
.wissen-karte:hover { border-color: var(--ink); transform: translateY(-1px); text-decoration: none; }
.wissen-karte:focus-visible { outline: 2px solid var(--enzian); outline-offset: 3px; }
.wk-bereich { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--farbe); }
.wk-titel { font-size: 17px; font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }
.wk-text { font-size: 14px; color: #4a4b47; line-height: 1.55; }
.wk-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; font-size: 12px; color: var(--grau); }
.wk-marke {
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  color: var(--latsche); background: color-mix(in srgb, var(--latsche) 10%, #fff);
  border-radius: 4px; padding: 2px 7px;
}

/* ── Artikel /wohnen-artikel ──────────────────────────────────────────── */
.wissen-artikel h2 { font-size: clamp(19px, 2.6vw, 23px); font-weight: 600; letter-spacing: -.02em; margin: 34px 0 12px; }
.wissen-artikel h3 { font-size: 17px; font-weight: 600; margin: 26px 0 8px; max-width: 42ch; }
.wissen-artikel p  { margin: 0 0 15px; line-height: 1.68; max-width: 74ch; }

.wissen-kurz {
  border-left: 3px solid var(--enzian); background: #FCFBF9;
  border-radius: 0 10px 10px 0; padding: 20px 22px; margin: 0 0 30px; max-width: 74ch;
}
.wissen-kurz p { font-size: 16px; margin: 0 0 12px; }
.wissen-kurz p:last-child { margin: 0; }

.papier .wissen-liste { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; max-width: 74ch; }
.wissen-liste li { position: relative; padding-left: 20px; margin: 0; font-size: 15px; line-height: 1.6; }
.wissen-liste li::before {
  content: ""; position: absolute; left: 4px; top: 10px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--enzian);
}
.wissen-artikel .hinweis, .ge-lang .hinweis { margin: 18px 0; max-width: 74ch; }

/* ── Vorlagen ─────────────────────────────────────────────────────────── */
.vorlage-bez { font-size: 15px; font-weight: 600; margin: 0 0 10px; }
.vorlage { margin: 0 0 14px; }
.vorlage-text {
  width: 100%; padding: 16px; border: 1px solid var(--rand); border-radius: 10px;
  background: #FCFBF9; color: var(--ink); resize: vertical;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px; line-height: 1.6; white-space: pre; overflow-wrap: normal;
}
.vorlage-text:focus { outline: 2px solid var(--enzian); outline-offset: 1px; }
.vorlage-fuss { font-size: 13px; color: var(--grau); margin: 8px 0 0; }

/* ── Begriffe und Quellen ─────────────────────────────────────────────── */
.papier .begriffwolke { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.begriffwolke li { margin: 0; }
.begriffwolke a {
  display: inline-block; font-size: 13.5px; color: var(--ink); text-decoration: none;
  background: var(--stein); border-radius: 999px; padding: 6px 13px;
}
.begriffwolke a:hover { background: var(--ink); color: #fff; text-decoration: none; }

.papier .quellen { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.quellen li { font-size: 13.5px; color: var(--grau); line-height: 1.5; margin: 0; overflow-wrap: anywhere; }
.quellen a { color: var(--enzian); }
.q-datum { color: #a3a29c; }
.q-datum::before { content: " · "; }

/* ── Glossar ──────────────────────────────────────────────────────────── */
.glossar-werkzeug { display: grid; gap: 0 18px; margin: 0 0 26px; max-width: 640px; }
@media (min-width: 620px) { .glossar-werkzeug { grid-template-columns: 1.4fr 1fr; } }
.glossar-knopf { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 0; }

.glossar-abc {
  display: flex; flex-wrap: wrap; gap: 4px;
  border-top: 1px solid var(--stein); border-bottom: 1px solid var(--stein);
  padding: 12px 0; margin: 0 0 26px;
}
.glossar-abc a, .glossar-abc span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 30px; border-radius: 6px;
  font-size: 13.5px; font-weight: 600; text-decoration: none;
}
.glossar-abc a { color: var(--enzian); background: var(--stein); }
.glossar-abc a:hover { background: var(--ink); color: #fff; text-decoration: none; }
.glossar-abc span { color: #cfcdc5; }

.glossar-gruppe { margin: 0 0 8px; }
.papier .glossar-marke {
  font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--enzian);
  border-bottom: 1px solid var(--stein); padding-bottom: 6px; margin: 26px 0 14px;
  scroll-margin-top: 84px; max-width: none;
}
.glossar-eintrag {
  border-bottom: 1px solid var(--stein); padding: 0 0 18px; margin: 0 0 18px;
  scroll-margin-top: 84px;
}
.glossar-eintrag:last-child { border-bottom: 0; }
.papier .glossar-eintrag h3 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 4px; max-width: none; }
.ge-auch { font-size: 12.5px; color: var(--grau); font-style: italic; margin: 0 0 8px; }
.ge-kurz { font-size: 15px; line-height: 1.65; margin: 0 0 10px; max-width: 74ch; }
.ge-lang { border-left: 2px solid var(--stein); padding-left: 16px; margin: 12px 0 10px; }
.ge-lang h3 { font-size: 14.5px; font-weight: 700; letter-spacing: .02em; color: var(--grau); margin: 14px 0 6px; }
.ge-lang p { font-size: 14.5px; line-height: 1.62; margin: 0 0 10px; }
.ge-lang .wissen-liste li { font-size: 14.5px; }
.ge-mehr { font-size: 13.5px; color: var(--laerche); margin: 0 0 10px; }
.ge-fuss { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; color: var(--grau); margin: 0; }
.ge-bereich {
  font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: 11px;
  background: var(--stein); border-radius: 4px; padding: 2px 7px;
}
.ge-quelle a { color: var(--grau); }
.ge-quelle a:hover { color: var(--enzian); }
.glossar-leer { font-size: 15px; color: var(--grau); padding: 24px 0; }

/* ── Rechner ──────────────────────────────────────────────────────────── */
.rechner-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 34px; }
.rechner-nav a {
  font-size: 14px; color: var(--ink); text-decoration: none;
  background: var(--stein); border-radius: 999px; padding: 8px 15px;
}
.rechner-nav a:hover { background: var(--ink); color: #fff; text-decoration: none; }

.rechner { border-top: 1px solid var(--stein); padding-top: 30px; margin-top: 34px; scroll-margin-top: 84px; }
.rechner > h2 { font-size: clamp(20px, 2.8vw, 24px); font-weight: 600; letter-spacing: -.02em; margin: 0 0 10px; }
.rechner-text { font-size: 15px; color: #4a4b47; line-height: 1.65; margin: 0 0 22px; max-width: 68ch; }

.rechner-form { max-width: 680px; margin: 0 0 22px; }
.rechner-gitter { display: grid; gap: 0 20px; }
@media (min-width: 620px) { .rechner-gitter { grid-template-columns: repeat(2, 1fr); } }
.rechner-knopf { margin: 6px 0 0; }

.rechner-wahl { border: 1px solid var(--rand); border-radius: 10px; padding: 16px 18px; margin: 6px 0 18px; }
.rechner-wahl legend { font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--grau); padding: 0 6px; }
.wahlzeile { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; margin: 0 0 10px; cursor: pointer; }
.wahlzeile:last-child { margin: 0; }
.wahlzeile input[type=checkbox] { width: 20px; height: 20px; margin: 0; flex: 0 0 auto; accent-color: var(--enzian); }
.rechner-wahl:has(input:focus-visible) { outline: 2px solid var(--enzian); outline-offset: 2px; }

.rechner-ergebnis {
  background: #FCFBF9; border: 1px solid var(--rand); border-radius: 12px;
  padding: 20px 22px; margin: 0 0 16px; max-width: 680px;
}
.rechner-ergebnis h3 { font-size: 15px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--grau); margin: 0 0 12px; }
.r-zeile { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--stein); }
.r-zeile:last-of-type { border-bottom: 0; }
.r-bez { font-size: 14.5px; color: #4a4b47; }
.r-wert { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.r-summe { border-top: 2px solid var(--ink); border-bottom: 0; margin-top: 6px; padding-top: 12px; }
.r-summe .r-bez { font-weight: 600; color: var(--ink); }
.r-summe .r-wert { font-size: 21px; letter-spacing: -.01em; }
.r-untertitel { font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--grau); margin: 22px 0 10px; }

.r-tabellenraum { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.r-tabelle { width: 100%; min-width: 460px; border-collapse: collapse; font-size: 14px; }
.r-tabelle th, .r-tabelle td { text-align: right; padding: 7px 10px; border-bottom: 1px solid var(--stein); }
.r-tabelle th:first-child, .r-tabelle td:first-child { text-align: left; }
.r-tabelle th { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--grau); }
.r-tabelle td { font-variant-numeric: tabular-nums; }
.r-tabelle tbody tr:last-child td { border-bottom: 0; }

.rechner-fehler { font-size: 14.5px; color: var(--rost); margin: 0; }
.rechner-lesehilfe { font-size: 14px; color: #4a4b47; line-height: 1.6; margin: 14px 0 0; }
.rechner-fuss { font-size: 13.5px; color: var(--grau); line-height: 1.6; margin: 0 0 8px; max-width: 68ch; }
.rechner-fuss a { color: var(--enzian); }

.rechner-herkunft { margin: 14px 0 0; }
.rechner-herkunft summary { font-size: 13.5px; color: var(--enzian); cursor: pointer; padding: 4px 0; }
.rechner-herkunft summary::-webkit-details-marker { display: none; }
.rechner-herkunft summary::before { content: "▸ "; }
.rechner-herkunft[open] summary::before { content: "▾ "; }
.rechner-herkunft summary:focus-visible { outline: 2px solid var(--enzian); outline-offset: 2px; border-radius: 3px; }
.rechner-herkunft .quellen { margin-top: 10px; }

@media (prefers-reduced-motion: reduce) {
  .wissen-karte { transition: none; }
  .wissen-karte:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Mehr Luft an den Seiten, ruhigeres Scrollen
   Der Inhalt klebte an den Rändern, besonders zwischen 900 und 1300 px.
   ══════════════════════════════════════════════════════════════════════════ */
:root { --bahn-rand: clamp(20px, 4vw, 56px); }
@media (max-width: 620px) { :root { --bahn-rand: 14px; } }

/* Ein Sprungziel darf nicht unter der Kopfleiste landen. */
html { scroll-padding-top: 96px; }
@media (max-width: 780px) { html { scroll-padding-top: 70px; } }

/* Weiches Scrollen nur für Sprungmarken, nicht für den Seitenwechsel:
   dort wäre es Warten statt Bequemlichkeit. */
@media (prefers-reduced-motion: no-preference) {
  html:focus-within { scroll-behavior: smooth; }
}

/* Am Handy soll das Wischen nicht über den Seitenrand hinausziehen und
   dabei die ganze Seite mitnehmen. */
body { overscroll-behavior-y: contain; }

/* ── Daumenleiste mit fünf Wegen ──────────────────────────────────────── */
.daumenleiste { padding-bottom: env(safe-area-inset-bottom); }
.daumenleiste a {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 7px 2px 8px; font-size: 10.5px; font-weight: 600;
}
.daumenleiste a span {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.daumenleiste a[aria-current] { color: var(--ink); }
.daumenleiste a:active { background: var(--stein); }

/* ═══════════════════════════════════════════════════════════════════════════
   Objektseite (site/objekt.php)
   Nutzt die vorhandenen Bausteine weiter: .seitenkopf, .knopf, .feld, .sperre,
   .rueckmeldung, .erg-marke, .naeher-liste. Neu ist nur, was die Seite an
   Eigenem hat: Galerie, Preisblock, Datenlisten und die Spalte rechts.
   ═══════════════════════════════════════════════════════════════════════════ */
body:has(.objekt) { background: #F4F2EE; }
.ob-raum { max-width: var(--bahn); margin: 0 auto; padding: 22px var(--bahn-rand) 64px; width: 100%; }

/* ── Kopf ───────────────────────────────────────────────────────────────── */
.ob-kopf .seitenkopf-innen { padding-bottom: 26px; }
.ob-linie { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0 0 10px; }
.ob-art { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
          color: var(--enzian); margin-right: 4px; }
.ob-ort { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.ob-ort a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rand); }
.ob-ort a:hover { color: var(--enzian); border-color: currentColor; }
.ob-bezirk, .ob-ref { font-size: 13px; color: var(--grau); }
.ob-ref { font-variant-numeric: tabular-nums; }

/* Vorschau und Beispiel: ein Band, das man nicht übersieht und das trotzdem
   nicht schreit. */
.ob-vorschau {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  margin: 0 0 18px; padding: 11px 14px; border-radius: 9px; font-size: 14.5px;
  background: color-mix(in srgb, var(--laerche) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--laerche) 34%, #fff); color: #4a3d38;
}
.ob-vorschau strong { color: var(--laerche); font-weight: 700; }
.ob-vorschau a { color: var(--laerche); }
.ob-demo { background: color-mix(in srgb, var(--enzian) 8%, #fff);
           border-color: color-mix(in srgb, var(--enzian) 30%, #fff); }
.ob-demo strong { color: var(--enzian); }

/* ── Galerie ─────────────────────────────────────────────────────────────
   Ein Streifen mit Einrastpunkten. Damit blättert die Galerie auch ohne
   JavaScript; die Knöpfe, der Zähler und das Vollbild kommen obendrauf. */
.galerie { margin: 0 0 26px; }
.gal-buehne { position: relative; }
.gal-bahn {
  list-style: none; margin: 0; padding: 0;
  display: flex; overflow-x: auto; overscroll-behavior-x: contain;
  /* KEIN scroll-behavior hier. Zusammen mit scroll-snap-type kommt das
     sanfte Scrollen der Galerie in manchen Browsern nicht ans Ziel; das
     JavaScript entscheidet stattdessen je Aufruf. */
  scroll-snap-type: x mandatory;
  border-radius: 12px; background: var(--stein);
  scrollbar-width: none;
}
.gal-bahn::-webkit-scrollbar { display: none; }
.gal-bahn:focus-visible { outline: 2px solid var(--enzian); outline-offset: 3px; }
.gal-bild { flex: 0 0 100%; scroll-snap-align: center; position: relative; margin: 0; }
.gal-bild img { display: block; width: 100%; height: clamp(220px, 46vw, 460px); object-fit: cover; }
.gal-text {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
  padding: 26px 130px 13px 16px;
  font-size: 13.5px; color: #fff;
  background: linear-gradient(to top, rgba(26,27,25,.72), rgba(26,27,25,0));
}
.gal-weg {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--rand);
  background: rgba(255,255,255,.92); color: var(--ink); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(26,27,25,.14); transition: background 160ms var(--kurve);
}
.gal-weg:hover { background: #fff; }
.gal-weg:disabled { opacity: .35; cursor: default; }
.gal-weg:focus-visible { outline: 2px solid var(--enzian); outline-offset: 2px; }
.gal-zurueck { left: 10px; }
.gal-vor { right: 10px; }
.gal-voll {
  position: absolute; right: 10px; bottom: 10px;
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 7px 12px; border-radius: 999px; border: 1px solid var(--rand);
  background: rgba(255,255,255,.92); color: var(--ink);
  font: 600 12.5px var(--schrift);
}
.gal-voll:hover { background: #fff; }
.gal-voll:focus-visible { outline: 2px solid var(--enzian); outline-offset: 2px; }
/* Der Zähler steht oben, die Bildunterschrift unten: sonst liegt beides
   übereinander, sobald ein Bild eine Unterschrift hat. */
.gal-stand {
  position: absolute; left: 10px; top: 10px; margin: 0;
  padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-variant-numeric: tabular-nums;
  background: rgba(26,27,25,.72); color: #fff;
}
.gal-streifen {
  list-style: none; margin: 8px 0 0; padding: 0;
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin;
}
.gal-streifen li { margin: 0; flex: 0 0 auto; }
.gal-streifen a { display: block; border-radius: 7px; overflow: hidden; border: 2px solid transparent; }
.gal-streifen img { display: block; width: 92px; height: 62px; object-fit: cover; }
.gal-streifen a:hover { border-color: var(--rand); }
.gal-streifen a[aria-current] { border-color: var(--ink); }
.gal-streifen a:focus-visible { outline: 2px solid var(--enzian); outline-offset: 2px; }
.gal-voll-schau { border: 0; padding: 0; max-width: 96vw; max-height: 96vh; background: transparent; }
.gal-voll-schau::backdrop { background: rgba(26,27,25,.92); }
.gal-voll-schau img { display: block; max-width: 96vw; max-height: 88vh; object-fit: contain; border-radius: 8px; }
.gal-zu {
  position: absolute; top: 6px; right: 10px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.9); color: var(--ink); font-size: 26px; line-height: 1;
}
.gal-zu:focus-visible { outline: 2px solid var(--enzian); outline-offset: 2px; }
.gal-voll-stand { margin: 8px 0 0; text-align: center; color: rgba(255,255,255,.86); font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .gal-weg, .gal-voll { transition: none; } }

/* ── Ohne Bilder: ein gestalteter Zustand, kein graues Loch ─────────────── */
.ob-ohne-bild {
  margin: 0 0 26px; padding: 34px 24px; border-radius: 12px; text-align: center;
  background: #fff; border: 1px dashed var(--rand);
}
.ob-ohne-bild svg { color: color-mix(in srgb, var(--enzian) 32%, #fff); margin-bottom: 12px; }
.ob-ohne-titel { margin: 0 0 6px; font-size: 16.5px; font-weight: 600; letter-spacing: -.01em; }
.ob-ohne-satz { margin: 0 auto; max-width: 52ch; font-size: 14.5px; color: #4a4b47; line-height: 1.6; }
.ob-ohne-bild .knopf { margin-top: 16px; }
.ob-gesperrt { margin: 0 0 26px; }
.ob-gesperrt .sperre { margin: 0; }

/* ── Aufteilung ─────────────────────────────────────────────────────────── */
.ob-gitter { display: grid; gap: 20px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) {
  .ob-gitter { grid-template-columns: minmax(0, 1fr) 330px; gap: 26px; }
  .ob-seite { position: sticky; top: 96px; display: grid; gap: 16px; }
}
.ob-haupt { min-width: 0; display: grid; gap: 16px; }
.ob-seite { display: grid; gap: 16px; min-width: 0; }
.ob-block, .ob-karte-anbieter, .ob-karte-merken, .ob-karte-anfrage, .ob-karte-stand, .ob-weiter {
  background: #fff; border: 1px solid var(--rand); border-radius: 12px; padding: 20px 22px;
  box-shadow: 0 1px 3px rgba(26,27,25,.05);
}
.ob-block h2, .ob-karte-anbieter h2, .ob-karte-anfrage h2, .ob-karte-stand h2, .ob-weiter h2 {
  font-size: 17px; font-weight: 600; letter-spacing: -.015em; margin: 0 0 14px;
}
.ob-untertitel { font-size: 14px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
                 color: var(--grau); margin: 22px 0 10px; }

/* ── Preis ──────────────────────────────────────────────────────────────── */
.ob-preisblock { border-color: color-mix(in srgb, var(--enzian) 26%, #fff); }
.ob-preis-gross {
  margin: 0 0 14px; font-size: clamp(26px, 4vw, 33px); font-weight: 700;
  letter-spacing: -.025em; font-variant-numeric: tabular-nums; color: var(--ink);
}
.ob-takt { font-size: 15px; font-weight: 400; color: var(--grau); letter-spacing: 0; }
.ob-preisliste, .ob-daten { margin: 0; display: grid; gap: 0; }
.ob-preisliste > div, .ob-daten > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 9px 0; border-bottom: 1px solid var(--stein);
}
.ob-preisliste > div:last-child, .ob-daten > div:last-child { border-bottom: 0; }
.ob-preisliste dt, .ob-daten dt { color: var(--grau); font-size: 14px; }
.ob-preisliste dd, .ob-daten dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums;
                                  text-align: right; }
.ob-preisliste .ob-summe { border-top: 1px solid var(--rand); border-bottom: 0; margin-top: 2px; }
.ob-preisliste .ob-summe dt { color: var(--ink); font-weight: 600; }
.ob-preisliste .ob-summe dd { font-size: 18px; font-weight: 700; }
.ob-preis-notiz { margin: 12px 0 0; font-size: 13px; color: var(--grau); line-height: 1.55; }
.ob-preis-notiz strong { color: var(--ink); }
.ob-omi strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.ob-quelle { display: block; font-size: 12px; color: #a3a29c; margin-top: 2px; }

/* ── Text und Ausstattung ───────────────────────────────────────────────── */
.ob-anriss { margin: 0 0 14px; font-size: 16px; font-weight: 600; color: var(--ink);
             line-height: 1.5; max-width: 68ch; }
.ob-text { color: #2c2d2a; line-height: 1.65; max-width: 68ch; overflow-wrap: break-word; }
.ob-ausstattung { list-style: none; margin: 0; padding: 0;
                  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 620px) { .ob-ausstattung { grid-template-columns: repeat(3, 1fr); } }
.ob-ausstattung li {
  margin: 0; padding: 8px 12px 8px 30px; position: relative;
  font-size: 14px; border: 1px solid var(--stein); border-radius: 8px; background: #FCFBF9;
}
.ob-ausstattung li::before {
  content: ""; position: absolute; left: 12px; top: 50%; width: 9px; height: 5px;
  border-left: 2px solid var(--latsche); border-bottom: 2px solid var(--latsche);
  transform: translateY(-70%) rotate(-45deg);
}
.ob-medien { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ob-medien li { margin: 0; }
.ob-medien a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--rand); border-radius: 9px;
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14.5px;
}
.ob-medien a:hover { border-color: var(--ink); text-decoration: none; }
.ob-medien-notiz { font-size: 12px; font-weight: 400; color: var(--grau); }

/* ── Lage ───────────────────────────────────────────────────────────────── */
.ob-lage { display: grid; gap: 18px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 700px) { .ob-lage { grid-template-columns: 200px minmax(0, 1fr); gap: 24px; } }
.ob-karte { margin: 0; }
.ob-gemeindeform { display: block; width: 100%; height: auto; max-height: 190px; }
.ob-gemeindeform path {
  fill: color-mix(in srgb, var(--enzian) 22%, #fff);
  stroke: var(--enzian); stroke-width: 1.2; stroke-linejoin: round;
}
.ob-karte .kartenquelle { text-align: left; margin-top: 6px; }
.ob-verdeckt { font-weight: 400; color: var(--grau); font-size: 13.5px; }
.ob-lagedaten { align-self: start; }

/* ── Anbieter ───────────────────────────────────────────────────────────── */
.ob-anbieter { display: grid; gap: 6px; }
.ob-logo { display: block; margin-bottom: 6px; }
.ob-logo img { display: block; max-width: 160px; max-height: 60px; width: auto; height: auto; }
.ob-anbieter-name { margin: 0; font-size: 16.5px; font-weight: 600; letter-spacing: -.01em;
                    display: flex; align-items: center; gap: 6px; }
.ob-haken { display: inline-flex; color: var(--enzian); flex: 0 0 auto; }
.ob-anbieter-ort { margin: 0; font-size: 13.5px; color: var(--grau); }
.ob-anbieter-notiz { margin: 4px 0 0; font-size: 13px; color: var(--grau); line-height: 1.55; }
.ob-anbieter-wege { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.ob-anbieter-wege a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rand); }
.ob-anbieter-wege a:hover { color: var(--enzian); }

/* ── Merken ─────────────────────────────────────────────────────────────── */
.ob-karte-merken:has(.sperre) { padding: 0; border: 0; background: none; box-shadow: none; }
.ob-karte-merken .sperre { margin: 0 0 10px; }
.ob-merken { background: #fff; color: var(--ink); border: 1px solid var(--ink); }
.ob-merken:hover { background: var(--stein); color: var(--ink); }
.ob-merken.ist-gemerkt { background: var(--ink); color: #fff; }
.ob-merken.ist-gemerkt svg { fill: currentColor; }
.ob-merken-notiz { margin: 8px 0 0; font-size: 13px; color: var(--grau); line-height: 1.55; }

/* ── Anfrage ────────────────────────────────────────────────────────────── */
.ob-karte-anfrage { border-color: color-mix(in srgb, var(--latsche) 30%, #fff); }
.ob-anfrage-satz { margin: 0 0 16px; font-size: 14px; color: #4a4b47; line-height: 1.6; }
.ob-anfrage-zu { margin: 0 0 14px; font-size: 14.5px; color: #4a4b47; line-height: 1.6; }
.papier .ob-anfrage-form, .ob-anfrage-form { margin: 0; max-width: 100%; }
.ob-anfrage-form .feld { margin-bottom: 14px; }
.ob-anfrage-form textarea { min-height: 110px; }
.ob-anfrage-melder { margin: 10px 0 0; font-size: 13.5px; color: var(--grau); }
.ob-anfrage-melder.ist-fehler { color: var(--rost); }
.ob-karte-anfrage .knopf-schlicht { margin-top: 8px; }

/* ── Stand und Weitersuchen ─────────────────────────────────────────────── */
.ob-karte-stand { background: #FCFBF9; }
.ob-karte-stand .knopf-schlank { margin-top: 12px; }
.ob-weiter { margin-top: 20px; }
.ob-weiter .naeher-liste a { background: #FCFBF9; }

@media (max-width: 560px) {
  .ob-block, .ob-karte-anbieter, .ob-karte-merken, .ob-karte-anfrage,
  .ob-karte-stand, .ob-weiter { padding: 16px 15px; }
  .ob-preisliste > div, .ob-daten > div { gap: 10px; }
  .gal-streifen img { width: 74px; height: 50px; }
  /* Auf dem Handy hätte die Bildunterschrift sonst den Vollbildknopf unter
     sich. Knopf nach oben rechts, Zähler bleibt oben links. */
  .gal-voll { top: 10px; right: 10px; bottom: auto; }
  .gal-text { padding-right: 16px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Kopf- und Daumenleiste: eine Linie, ein dezenter Schatten
   Beide Leisten liegen über dem Inhalt. Ohne Kante und Schatten schwimmen
   sie darauf; mit einer harten Kante wirken sie aufgeklebt. Eine Linie plus
   ein flacher Schatten trennt, ohne zu trennen zu wollen.
   ══════════════════════════════════════════════════════════════════════════ */
.kopfleiste {
  border-bottom: 1px solid var(--stein);
  box-shadow: 0 1px 2px rgba(26,27,25,.03);
}
.kopfleiste.geschoben {
  border-bottom-color: var(--rand);
  box-shadow: 0 1px 3px rgba(26,27,25,.06), 0 6px 20px -8px rgba(26,27,25,.12);
}

/* ── Daumenleiste: eine Zeile, kleine Zeichen ─────────────────────────── */
.daumenleiste {
  border-top: 1px solid var(--rand);
  box-shadow: 0 -1px 3px rgba(26,27,25,.05), 0 -8px 24px -12px rgba(26,27,25,.16);
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
}
.daumenleiste a {
  padding: 5px 2px 6px; gap: 1px; font-size: 9.5px; letter-spacing: .01em;
}
.daumenleiste a svg { width: 17px; height: 17px; }
/* Der aktive Weg bekommt einen Strich oben statt einer Fläche: eine gefüllte
   Kachel in einer 52 px hohen Leiste wirkt wie ein Fehler. */
.daumenleiste a[aria-current]::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 22px; height: 2px; background: var(--ink); border-radius: 0 0 2px 2px;
}
.daumenleiste a { position: relative; }

/* Der Inhalt braucht unten Platz, sonst verdeckt die Leiste die letzte Zeile. */
@media (max-width: 780px) {
  body { padding-bottom: calc(52px + env(safe-area-inset-bottom)); }
  .fuss { padding-bottom: 20px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Handy: ein Rand für alle, keine Ausnahmen
   Die Seitenränder standen an sieben Stellen einzeln und liefen auseinander:
   mal 10 px, mal 14, mal der Bahnrand. Ab hier gilt ein Wert für alles, was
   die volle Breite einnimmt, und die Karten setzen nur ihre eigene Polsterung
   darauf.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 620px) {
  :root { --bahn-rand: 12px; }

  .suchraum, .suchkopf-innen, .papier, .lesetext-innen, .schaufenster-innen,
  .fuss-oben, .fuss-unten, .kopf-innen, .ob-raum, .buehne-start,
  .bestandsband-innen, .ortsband-innen, .kartenraum, .seitenkopf-innen,
  .einwilligung-innen, .buehne-innen {
    padding-inline: var(--bahn-rand);
  }

  /* Listen, die am Rand entlanglaufen, brauchen keinen zweiten Rand: sonst
     stehen 12 plus 3 px und die Karten wirken eingerückt. */
  .erg-liste, .sf-liste { padding-inline: 0; }

  /* Waagrechte Streifen dürfen bis an die Kante laufen und dort auslaufen,
     das zeigt, dass es weitergeht. */
  .sf-bahn, .gal-streifen {
    /* Auch hier auf der Bahn bleiben, siehe oben. */
    margin-inline: 0;
    padding-inline: 0;
  }

  /* Karten: eigene Polsterung, damit der Text nicht an der Kante klebt. */
  .ob-block, .ob-karte-anbieter, .ob-karte-anfrage, .ob-karte-stand,
  .ob-weiter, .leerbild, .ob-ohne-bild { padding: 15px 14px; }
  .ob-raum { padding-bottom: 40px; }
  .ob-gitter { gap: 12px; }
  .ob-haupt, .ob-seite { gap: 12px; }

  /* Der Kopf der Objektseite hatte oben zu viel und unten zu wenig Luft. */
  .ob-kopf .seitenkopf-innen { padding-top: 14px; padding-bottom: 16px; }
  .ob-linie { gap: 5px; margin-bottom: 7px; }
  .ob-vorschau { margin-bottom: 12px; padding: 9px 11px; font-size: 13.5px; }
  .galerie { margin-bottom: 14px; }
  .gal-bild img { height: clamp(190px, 54vw, 300px); }
}

/* Die Daumenleiste bleibt in einer Zeile, auch bei fünf oder sechs Wegen.
   Bei sehr schmalen Geräten schrumpft eher die Schrift als dass umbrochen wird. */
.daumenleiste { grid-auto-flow: column; grid-auto-columns: 1fr; }
.daumenleiste a { flex: none; min-width: 0; }
@media (max-width: 380px) {
  .daumenleiste a { font-size: 9px; padding: 5px 1px 6px; }
  .daumenleiste a svg { width: 16px; height: 16px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Handy: die vier Wege in eine Zeile, Breite dynamisch
   Vier Pillen mit starker Rundung brauchten zwei Zeilen und wirkten wie
   Knöpfe aus einem anderen Programm. Jetzt teilen sie sich die Zeile,
   schrumpfen mit dem Bildschirm und sind nur noch leicht gerundet.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 620px) {
  .startwege {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    gap: 6px; width: 100%; margin-bottom: var(--luft-4);
  }
  .startwege a {
    justify-content: center; gap: 5px; border-radius: 6px;
    padding: 10px 4px; font-size: 12.5px; min-height: 44px;
    /* Der längste Text bestimmt sonst die Breite aller vier. */
    min-width: 0; overflow: hidden;
  }
  .startwege a span {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .startwege svg { width: 15px; height: 15px; }
}
/* Sehr schmale Geräte: das Wort weicht, das Zeichen bleibt. */
@media (max-width: 360px) {
  .startwege a span { display: none; }
  .startwege svg { width: 19px; height: 19px; }
}

/* Weniger Rundung auch bei den übrigen Pillen am Handy. */
@media (max-width: 620px) {
  .such-beispiele a, .marke, .erg-marke, .wahlknopf span,
  .nl-marke, .stufe-marke, .ob-marke { border-radius: 5px; }
  .nl-zahl, .filter-zahl, .kartenpunkt { border-radius: 100px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Kartenansicht der Suche: lesbar statt hell auf hell
   Die Kopfzeile über der Karte stand ohne Grund auf der Fläche und war
   gegen die hellen Gemeinden kaum zu lesen. Jetzt trägt sie eine eigene
   Leiste mit Zeichen, und die Karte selbst hat mehr Kontrast.
   ══════════════════════════════════════════════════════════════════════════ */
.kartenwahl-kopf {
  background: #fff; border: 1px solid var(--rand); border-radius: 4px;
  padding: 9px 12px; margin-bottom: 10px;
  box-shadow: 0 1px 2px rgba(26,27,25,.05);
}
.kartenwahl-kopf p {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; color: #45443f; font-weight: 600;
}
/* Ein Zeichen vor dem Satz sagt in einem Blick, worum es geht. */
.kartenwahl-kopf p::before {
  content: ""; flex: 0 0 auto; width: 18px; height: 18px;
  background: currentColor; color: var(--enzian);
  -webkit-mask: var(--nadel) center/contain no-repeat;
          mask: var(--nadel) center/contain no-repeat;
}
:root {
  --nadel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.3 7-11a7 7 0 1 0-14 0c0 4.7 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E");
}
.kartenwahl-kopf .knopf-schlank { margin-left: auto; }

/* Die Karte bekommt eine Fläche und deutlichere Grenzen: auf getöntem Grund
   verschwanden die hellen Gemeinden sonst fast ganz. */
.kartenwahl svg.suedtirol {
  background: #fff; border: 1px solid var(--rand); border-radius: 4px;
  box-shadow: 0 1px 3px rgba(26,27,25,.06);
  padding: 8px;
}
.kartenwahl svg.suedtirol .gemeinde {
  fill: color-mix(in srgb, var(--enzian) 10%, #fff);
  stroke: #b9c6d2; stroke-width: .8;
}
.kartenwahl svg.suedtirol .gemeinde:hover,
.kartenwahl svg.suedtirol .beruehrt {
  fill: color-mix(in srgb, var(--enzian) 30%, #fff); stroke: var(--enzian);
}
.kartenwahl svg.suedtirol .gewaehlt {
  fill: var(--enzian); stroke: var(--ink); stroke-width: 1.2;
}
/* Gemeinden mit Angeboten dunkler als leere: die Karte soll zeigen, wo
   etwas ist, nicht nur wo Gemeinden sind. */
.kartenwahl svg.suedtirol .hat-angebote {
  fill: color-mix(in srgb, var(--enzian) 22%, #fff);
}

.kartenwahl-kopf + .kartenflaeche { position: relative; }

@media (max-width: 620px) {
  .kartenwahl-kopf { padding: 8px 10px; }
  .kartenwahl-kopf p { font-size: 12.5px; }
  .kartenwahl svg.suedtirol { padding: 4px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   HANDY, VERBINDLICH FÜR ALLE SEITEN
   Dieser Block steht bewusst am Ende und hat damit das letzte Wort. Vorher
   hatte jeder Abschnitt seinen eigenen Rand, und Karten liefen bis an die
   Glaskante. Ab hier gilt: 16 px links und rechts, überall, ohne Ausnahme.
   Nichts berührt den Rand.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 620px) {
  :root { --bahn-rand: 16px; }

  /* Kein Ausbrechen mehr über die Kante. Ein Streifen, der am Glas endet,
     sieht nach abgeschnitten aus, nicht nach "geht weiter". */
  .sf-bahn, .gal-streifen, .kartenwahl, .erg-liste, .sf-liste {
    margin-inline: 0; padding-inline: 0;
  }

  /* ── Kacheln kleiner ──────────────────────────────────────────────── */
  .erg-bild, .sf-liste .erg-bild { aspect-ratio: 16 / 10; }
  .erg-text { padding: 10px 11px 11px; gap: 4px; }
  .erg-titel { font-size: 14.5px; line-height: 1.3; }
  .erg-art { font-size: 10.5px; }
  .erg-ort { font-size: 12px; }
  .erg-zahlen { gap: 12px; margin-top: 0; }
  .erg-zahlen b { font-size: 14px; }
  .erg-zahlen i { font-size: 11px; }
  .erg-marke { font-size: 9.5px; padding: 2px 6px; }
  .erg-preis { font-size: 15px; padding-top: 8px; }

  /* Im Schaufenster zwei Kacheln nebeneinander andeuten, damit sichtbar
     ist, dass der Streifen weitergeht. */
  .sf-liste { gap: 10px; }
  .sf-liste > li { flex-basis: calc((100% - 10px) / 2 + 22px); }
  .sf-kopf h2 { font-size: 16.5px; }
  .sf-pfeil { width: 30px; height: 30px; }
  .sf-alle { font-size: 12.5px; }
  .schaufenster-innen { padding-block: 22px 26px; }

  /* ── Alles, was die volle Breite nimmt, hält denselben Rand ───────── */
  .suchraum, .suchkopf-innen, .papier, .lesetext-innen, .schaufenster-innen,
  .fuss-oben, .fuss-unten, .kopf-innen, .ob-raum, .buehne-start,
  .bestandsband-innen, .ortsband-innen, .kartenraum, .seitenkopf-innen,
  .einwilligung-innen, .buehne-innen, .wissen-raum, .glossar-raum,
  .bs-innen, .wg-raum {
    padding-inline: var(--bahn-rand);
  }

  /* ── Karten und Kästen: eigene Polsterung, nie am Rand ────────────── */
  .ob-block, .ob-karte-anbieter, .ob-karte-anfrage, .ob-karte-stand,
  .ob-weiter, .leerbild, .ob-ohne-bild, .kontingent, .tarifkarte,
  .preiskarte, .zahlweg, .leerstelle, .sperre, .premium-hinweis {
    padding: 14px 13px;
  }

  /* ── Objektseite: Titel kleiner, alles enger ──────────────────────── */
  .ob-kopf h1 { font-size: clamp(17px, 5vw, 21px); line-height: 1.25; }
  .ob-preis-gross { font-size: 23px; margin-bottom: 10px; }
  .ob-block h2, .ob-karte-anbieter h2, .ob-karte-anfrage h2,
  .ob-karte-stand h2, .ob-weiter h2 { font-size: 15.5px; margin-bottom: 10px; }
  .ob-preisliste > div, .ob-daten > div { padding: 7px 0; }
  .ob-preisliste dt, .ob-daten dt { font-size: 13px; }
  .ob-preisliste dd, .ob-daten dd { font-size: 14px; }
  .ob-text, .ob-anriss { font-size: 14.5px; }
  .ob-ausstattung { gap: 6px; }
  .ob-ausstattung li { font-size: 13px; padding: 6px 10px 6px 26px; }
  .ob-ausstattung li::before { left: 10px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Kopfleiste am Rechner: Marke links, Menü in der Mitte, Konto rechts
   Drei Spalten statt einer Reihe. Die äußeren beiden sind gleich breit
   (1fr), damit die Mitte wirklich die Mitte der Seite ist und nicht nur die
   Mitte des Platzes, der übrig bleibt.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 781px) {
  .kopf-innen {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  }
  .kopf-marke { justify-self: start; }
  .kopf-nav {
    justify-self: center; margin-left: 0;
    display: flex; justify-content: center; flex-wrap: nowrap;
  }
  .kopf-rechts { justify-self: end; margin-left: 0; }

  /* Wird es eng, schrumpft zuerst die Schrift der Navigation und erst danach
     fallen Punkte weg. Die Mitte soll die Mitte bleiben. */
  @media (max-width: 1120px) {
    .kopf-nav a { font-size: 13px; padding: 8px 7px; }
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Der aktive Weg ist zu sehen
   Ein Menü, das nicht zeigt, wo man steht, zwingt zum Nachdenken über etwas,
   das der Bildschirm beantworten sollte. Blau hinterlegt, Schrift weiß.
   ══════════════════════════════════════════════════════════════════════════ */
.kopf-nav a[aria-current] {
  background: var(--enzian); color: #fff; font-weight: 600;
}
.kopf-nav a[aria-current]:hover { background: #16395a; color: #fff; }
.seitenblatt a[aria-current] {
  background: var(--enzian); color: #fff; font-weight: 600;
}
.daumenleiste a[aria-current] { color: var(--enzian); }
.daumenleiste a[aria-current]::before { background: var(--enzian); }

/* ══════════════════════════════════════════════════════════════════════════
   Seitenblatt am Handy
   Fährt von rechts herein, wirft einen Schatten über die ganze Höhe und legt
   einen Grund darunter. Nur unter 781 px; darüber steht das Menü in der Mitte.
   ══════════════════════════════════════════════════════════════════════════ */
.kopf-menue { display: none; }
@media (max-width: 780px) {
  .kopf-menue {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
    width: 40px; height: 40px; padding: 0 9px;
    border: 1px solid var(--rand); border-radius: 6px; background: #fff; cursor: pointer;
  }
  .kopf-menue .balken {
    display: block; height: 2px; background: var(--ink); border-radius: 2px;
    transition: transform 200ms var(--kurve), opacity 160ms var(--kurve);
  }
  /* Aus drei Strichen wird ein Kreuz. Der Knopf sagt damit selbst, was er tut. */
  .kopf-menue[aria-expanded="true"] .balken:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .kopf-menue[aria-expanded="true"] .balken:nth-child(2) { opacity: 0; }
  .kopf-menue[aria-expanded="true"] .balken:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}
@media (prefers-reduced-motion: reduce) { .kopf-menue .balken { transition: none; } }

.blatt-grund {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(26,27,25,.42);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; transition: opacity 240ms var(--kurve);
}
.blatt-grund.offen { opacity: 1; }

.seitenblatt {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 95;
  width: min(310px, 86vw);
  background: #fff;
  /* Schatten über die ganze Höhe: das Blatt liegt auf der Seite, nicht darin. */
  box-shadow: -2px 0 6px rgba(26,27,25,.06), -18px 0 44px -12px rgba(26,27,25,.34);
  display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain;
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
  transform: translateX(100%);
  transition: transform 260ms var(--kurve);
}
.seitenblatt.offen { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .seitenblatt, .blatt-grund { transition: none; }
}
/* Über 780 px gibt es das Blatt nicht: dort steht die Navigation in der Leiste. */
@media (min-width: 781px) { .seitenblatt, .blatt-grund { display: none !important; } }

.sb-kopf {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 10px; border-bottom: 1px solid var(--stein);
  position: sticky; top: 0; background: #fff; z-index: 1;
}
.sb-titel { font-size: 12px; font-weight: 700; letter-spacing: .1em;
            text-transform: uppercase; color: var(--grau); }
.sb-zu { border: 0; background: none; cursor: pointer; font-size: 26px; line-height: 1;
         color: var(--grau); padding: 0 4px; }
.sb-zu:hover { color: var(--ink); }

.sb-gruppe {
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #a3a29c; padding: 16px 16px 5px;
}
.seitenblatt a {
  display: block; padding: 11px 16px; color: var(--ink); text-decoration: none;
  font-size: 15px; font-weight: 500; border-left: 3px solid transparent;
}
.seitenblatt a:hover { background: var(--stein); text-decoration: none; }
.seitenblatt a[aria-current] { border-left-color: var(--ink); }
.sb-knopf {
  margin: 10px 16px 0; padding: 11px 16px !important;
  background: var(--ink); color: #fff !important; border-radius: 6px;
  text-align: center; font-weight: 600;
}
.sb-knopf:hover { background: #000 !important; }

body.blatt-offen { overflow: hidden; }

/* ══════════════════════════════════════════════════════════════════════════
   Menü in Großbuchstaben
   Versalien brauchen mehr Laufweite, sonst kleben die Buchstaben aneinander,
   und eine Spur kleiner, weil Großbuchstaben optisch größer wirken als
   dieselbe Größe in Gemischtschrift.
   ══════════════════════════════════════════════════════════════════════════ */
.kopf-nav a, .seitenblatt a, .daumenleiste a span, .kopf-konto span, .kopf-knopf {
  text-transform: uppercase;
  letter-spacing: .055em;
}
.kopf-nav a { font-size: 12.5px; font-weight: 700; }
.seitenblatt a { font-size: 13px; font-weight: 700; }
.kopf-konto span, .kopf-knopf { font-size: 12.5px; font-weight: 700; }
.daumenleiste a span { font-size: 9px; letter-spacing: .04em; }

@media (max-width: 1120px) and (min-width: 781px) {
  .kopf-nav a { font-size: 11.5px; padding: 8px 6px; letter-spacing: .04em; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Hover im Menü: blau, weiße Schrift, weicher Schatten
   Der Übergang läuft über Grund und Schatten, nicht über die Größe. Ein
   Menüpunkt, der beim Zeigen wächst, verschiebt seine Nachbarn, und die Reihe
   zappelt beim Überfahren.
   ══════════════════════════════════════════════════════════════════════════ */
.kopf-nav a, .seitenblatt a {
  transition: background 160ms var(--kurve), color 160ms var(--kurve),
              box-shadow 160ms var(--kurve);
}
.kopf-nav a:hover,
.kopf-nav a:focus-visible {
  background: var(--enzian); color: #fff; text-decoration: none;
  box-shadow: 0 2px 8px -1px rgba(27,75,115,.45);
}
.seitenblatt a:hover,
.seitenblatt a:focus-visible {
  background: var(--enzian); color: #fff; text-decoration: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 2px 10px -2px rgba(27,75,115,.4);
}
/* Der aktive Weg bleibt beim Überfahren erkennbar und wird nur eine Spur
   dunkler; sonst sieht die aktuelle Seite aus wie jede andere. */
.kopf-nav a[aria-current]:hover, .seitenblatt a[aria-current]:hover {
  background: #16395a;
}
.kopf-konto:hover, .kopf-konto:focus-visible {
  background: var(--enzian); color: #fff; text-decoration: none;
  box-shadow: 0 2px 8px -1px rgba(27,75,115,.45);
}
.daumenleiste a:hover, .daumenleiste a:focus-visible { color: var(--enzian); }

@media (prefers-reduced-motion: reduce) {
  .kopf-nav a, .seitenblatt a, .kopf-konto { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Knöpfe: eine Familie statt neun Einzelstücke
   Vorher hatte jeder Knopf seine eigene Höhe, Rundung und Schriftstärke,
   je nachdem wann er entstanden ist. Ab hier teilen sich alle dieselben
   Maße; unterschiedlich bleibt nur, was unterschiedlich sein soll: die Farbe
   und damit das Gewicht.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --knopf-hoehe: 42px;
  --knopf-rundung: 6px;
  --knopf-schrift: 14.5px;
}

.knopf, .knopf-schlicht, .knopf-schlank, .such-knopf, .kopf-knopf,
.startwege a, .sf-pfeil, .gal-voll {
  min-height: var(--knopf-hoehe);
  border-radius: var(--knopf-rundung);
  font-size: var(--knopf-schrift);
  font-weight: 600;
  letter-spacing: -.005em;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding-inline: 18px;
  /* Über Grund und Schatten, nie über die Größe: ein Knopf, der wächst,
     schiebt seine Nachbarn zur Seite. */
  transition: background 160ms var(--kurve), color 160ms var(--kurve),
              border-color 160ms var(--kurve), box-shadow 160ms var(--kurve);
}
.knopf svg, .knopf-schlicht svg, .knopf-schlank svg { flex: 0 0 auto; }

/* Erste Stimme: dunkel, trägt die Hauptaktion. */
a.knopf.knopf, button.knopf.knopf {
  box-shadow: 0 1px 2px rgba(26,27,25,.16);
}
a.knopf.knopf:hover, button.knopf.knopf:hover {
  box-shadow: 0 3px 10px -2px rgba(26,27,25,.34);
}

/* Zweite Stimme: Umriss. Gleich groß, damit sie nebeneinander stehen können. */
.knopf-schlicht, .knopf-schlank {
  background: #fff; border: 1px solid var(--rand); color: var(--ink); font-weight: 600;
}
.knopf-schlicht:hover, .knopf-schlank:hover {
  border-color: var(--ink); box-shadow: 0 2px 8px -2px rgba(26,27,25,.2);
}

/* Der Suchknopf sitzt im Feld und darf dessen Rundung nicht sprengen. */
.such-knopf { border-radius: calc(var(--knopf-rundung) - 2px); padding-inline: 20px; }

/* Runde Knöpfe bleiben rund, aber in derselben Größe wie die eckigen. */
.sf-pfeil, .gal-weg {
  width: var(--knopf-hoehe); height: var(--knopf-hoehe);
  min-height: var(--knopf-hoehe); border-radius: 50%; padding: 0;
}
.gal-voll { border-radius: 100px; padding-inline: 14px; }

/* Kleine Fassung für enge Stellen, gleiche Familie, eine Stufe kleiner. */
.knopf-klein, .knopf-schlank-klein {
  --knopf-hoehe: 34px; --knopf-schrift: 13px;
  padding-inline: 12px;
}

@media (max-width: 620px) {
  :root { --knopf-hoehe: 44px; --knopf-schrift: 15px; }
  /* Am Handy tragen Hauptaktionen die volle Breite: eine Zeile, ein Ziel. */
  .leerbild-tat .knopf, .ob-karte-anfrage .knopf, .anmeldung .knopf,
  .sb-knopf, .auftrag-form .knopf { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .knopf, .knopf-schlicht, .knopf-schlank, .such-knopf { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Kartensuche: die Karte zeigt, wo etwas ist
   Vier Stufen nach Menge. Mehr Abstufungen kann das Auge auf einer Karte
   dieser Größe nicht auseinanderhalten, und leere Gemeinden bleiben blass,
   damit die vollen auffallen.
   ══════════════════════════════════════════════════════════════════════════ */
.kartenwahl svg.suedtirol .gemeinde.leer {
  fill: #F1EFE9; stroke: #DCD8CC;
}
.kartenwahl svg.suedtirol .menge-1 { fill: color-mix(in srgb, var(--enzian) 18%, #fff); }
.kartenwahl svg.suedtirol .menge-2 { fill: color-mix(in srgb, var(--enzian) 34%, #fff); }
.kartenwahl svg.suedtirol .menge-3 { fill: color-mix(in srgb, var(--enzian) 55%, #fff); }
.kartenwahl svg.suedtirol .menge-4 { fill: color-mix(in srgb, var(--enzian) 78%, #fff); }
.kartenwahl svg.suedtirol .hat-angebote { stroke: #fff; stroke-width: 1; cursor: pointer; }
.kartenwahl svg.suedtirol .hat-angebote:hover { fill: var(--laerche); }
.kartenwahl svg.suedtirol .gewaehlt,
.kartenwahl svg.suedtirol .gewaehlt.hat-angebote { fill: var(--ink); stroke: var(--ink); }

/* Das Fähnchen folgt dem Zeiger. Ohne das weiß man nicht, welche Fläche man
   gerade berührt: die Gemeinden sind klein und tragen keine Beschriftung. */
.kartenfahne {
  position: absolute; z-index: 5; pointer-events: none;
  transform: translate(12px, -50%);
  background: var(--ink); color: #fff;
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
  padding: 5px 10px; border-radius: 4px;
  box-shadow: 0 4px 14px -4px rgba(26,27,25,.5);
}

/* Eine kleine Legende sagt, was die Farben bedeuten. Eine eingefärbte Karte
   ohne Legende ist Dekoration. */
.karten-legende {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  margin-top: 10px; font-size: 12px; color: var(--grau);
}
.karten-legende .stufen { display: flex; align-items: center; gap: 3px; }
.karten-legende .stufen span {
  width: 22px; height: 10px; border-radius: 2px; border: 1px solid rgba(26,27,25,.08);
}
.karten-legende .s0 { background: #F1EFE9; }
.karten-legende .s1 { background: color-mix(in srgb, var(--enzian) 18%, #fff); }
.karten-legende .s2 { background: color-mix(in srgb, var(--enzian) 34%, #fff); }
.karten-legende .s3 { background: color-mix(in srgb, var(--enzian) 55%, #fff); }
.karten-legende .s4 { background: color-mix(in srgb, var(--enzian) 78%, #fff); }

/* Am Handy kleinere Knöpfe. 38 px statt 44: die Empfehlung lautet zwar 44,
   aber in einer Reihe aus vier Knöpfen wirkt das klobig, und die Fläche
   bleibt mit dem Innenabstand groß genug zum Treffen. */
@media (max-width: 620px) {
  :root { --knopf-hoehe: 38px; --knopf-schrift: 13.5px; }
  .knopf, .knopf-schlicht, .knopf-schlank, .such-knopf { padding-inline: 14px; }
  .startwege a { padding: 8px 6px; font-size: 12px; }
  .sf-pfeil, .gal-weg { width: 34px; height: 34px; min-height: 34px; }
  .knopf-klein, .knopf-schlank-klein { --knopf-hoehe: 30px; --knopf-schrift: 12px; }
  .daumenleiste a { min-height: 0; }
}

/* Der Platzhalter im Suchfeld lief am Handy unter den Knopf. Das Feld darf
   schrumpfen, der Text wird abgeschnitten statt überdeckt, und der Knopf
   trägt nur noch das Zeichen. */
@media (max-width: 560px) {
  .suchkasten { padding-left: 11px; gap: 7px; }
  .such-eingabe { min-width: 0; text-overflow: ellipsis; }
  .such-knopf { padding-inline: 12px; }
  .such-knopf .wort { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Sprungmarken auf der Objektseite
   Eine Objektseite wird lang. Die Leiste bleibt oben stehen und sagt, was
   noch kommt; der Abschnitt, in dem man gerade steht, ist hervorgehoben.
   ══════════════════════════════════════════════════════════════════════════ */
.ob-sprung {
  position: sticky; top: 84px; z-index: 20;
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  margin: 0 0 16px; padding: 6px;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--rand); border-radius: 6px;
  box-shadow: 0 1px 3px rgba(26,27,25,.06);
}
.ob-sprung::-webkit-scrollbar { display: none; }
.ob-sprung a {
  flex: 0 0 auto; padding: 7px 12px; border-radius: 4px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #55544e; text-decoration: none; white-space: nowrap;
  transition: background 140ms var(--kurve), color 140ms var(--kurve);
}
.ob-sprung a:hover { background: var(--enzian); color: #fff; text-decoration: none; }
.ob-sprung a.hier { background: var(--ink); color: #fff; }
/* Die Frage ist die eigentliche Handlung und steht deshalb rechts abgesetzt. */
.ob-sprung-frage { margin-left: auto; color: var(--enzian) !important; }
.ob-sprung-frage:hover { color: #fff !important; }

@media (max-width: 780px) { .ob-sprung { top: 60px; } }
@media (max-width: 560px) {
  .ob-sprung { padding: 4px; margin-bottom: 12px; }
  .ob-sprung a { padding: 6px 9px; font-size: 11.5px; }
}

/* Bilder eines eigenen Objekts: Raster statt Liste. Was man beurteilen soll,
   muss man sehen können. */
.papier .anbieter-bilder {
  list-style: none; margin: 0 0 26px; padding: 0;
  display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.anbieter-bilder li {
  margin: 0; background: #fff; border: 1px solid var(--rand); border-radius: 6px;
  overflow: hidden; display: flex; flex-direction: column;
}
.anbieter-bilder img { display: block; width: 100%; height: 130px; object-fit: cover; background: var(--stein); }
.ab-fuss {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px;
}
.ab-nr { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--grau); }
.anbieter-bilder li:first-child .ab-nr { color: var(--enzian); }
.ab-fuss form { margin: 0; }
.feld input[type=file] {
  width: 100%; font: 400 14px var(--schrift); color: var(--ink);
  background: #fff; border: 1px solid var(--rand); border-radius: 6px; padding: 9px 10px;
}

/* ══════════════════════════════════════════════════════════════════════════
   Registrierung: erst die Wahl, dann das Formular
   Vier Karten statt einer Auswahlliste. Wer sich entscheidet, soll sehen,
   was hinter der Entscheidung steckt, nicht nur ihren Namen.
   ══════════════════════════════════════════════════════════════════════════ */
.papier .artwahl {
  list-style: none; margin: 0 0 26px; padding: 0;
  display: grid; gap: 12px; grid-template-columns: 1fr;
}
@media (min-width: 700px) { .papier .artwahl { grid-template-columns: 1fr 1fr; } }
.artwahl li { margin: 0; }
.artwahl a {
  display: flex; flex-direction: column; height: 100%; gap: 6px;
  background: #fff; border: 1px solid var(--rand); border-radius: 6px;
  padding: 18px 18px 16px; text-decoration: none; color: var(--ink);
  box-shadow: 0 1px 3px rgba(26,27,25,.05);
  transition: border-color 160ms var(--kurve), box-shadow 160ms var(--kurve),
              transform 160ms var(--kurve);
}
.artwahl a:hover {
  border-color: var(--enzian); text-decoration: none; transform: translateY(-2px);
  box-shadow: 0 4px 14px -4px rgba(27,75,115,.28);
}
@media (prefers-reduced-motion: reduce) { .artwahl a:hover { transform: none; } }
.aw-zeichen { color: var(--enzian); margin-bottom: 2px; }
.artwahl strong { font-size: 17px; font-weight: 600; letter-spacing: -.015em; }
.aw-satz { font-size: 14px; color: #4a4b47; line-height: 1.5; }
.papier .aw-punkte {
  list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 5px;
}
.aw-punkte li {
  margin: 0; font-size: 13px; color: #55544e; padding-left: 18px; position: relative;
}
.aw-punkte li::before {
  content: ""; position: absolute; left: 2px; top: .45em; width: 8px; height: 5px;
  border-left: 2px solid var(--latsche); border-bottom: 2px solid var(--latsche);
  transform: rotate(-45deg);
}
.aw-weiter {
  margin-top: auto; padding-top: 12px;
  font-size: 13.5px; font-weight: 600; color: var(--enzian);
}

/* Die getroffene Wahl bleibt sichtbar, mit einem Weg zurück. Ohne den steht
   man im falschen Formular und weiß nicht, wie man herauskommt. */
.artmarke {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 22px; padding: 9px 12px;
  background: #FCFBF9; border: 1px solid var(--rand); border-radius: 5px;
  font-size: 14px;
}
.artmarke svg { color: var(--enzian); flex: 0 0 auto; }
.artmarke a { margin-left: auto; font-size: 13px; color: var(--grau); }
.artmarke a:hover { color: var(--enzian); }

/* ── Stiller Zwilling des Knopfs ───────────────────────────────────────────
   Gleiche Größe, weniger Gewicht: für den zweiten Weg neben einer Haupt-
   handlung. Auf der Sicherheitsseite steht so "Überall abmelden" neben
   "Andere Geräte abmelden", ohne dass beide um dieselbe Aufmerksamkeit
   streiten. Der Rahmen ersetzt die Fläche, deshalb 12px statt 13px Polster —
   sonst stünde der stille Knopf einen Hauch höher als der volle. */
.knopf.knopf-still {
  background: #fff; color: var(--ink);
  border: 1px solid var(--rand); padding: 12px 23px;
}
.knopf.knopf-still:hover { background: var(--stein); color: var(--ink); border-color: var(--ink); }
.knopf.knopf-still.knopf-breit { padding: 14px 23px; }
.abmelden-ueberall { margin-top: 14px; }
.abmelden-ueberall .feld-hinweis { display: block; margin-top: 8px; }

/* ═══════════════════════════════════════════════════════════════════════════
   Bausteine — die Abschnitte, die aus der Verwaltung kommen
   Fünf Arten, ein Raster, eine Bahn. Die Kacheln sind flach und eckig gehalten:
   viel Rundung und viel Schatten lassen eine Seite schnell nach Baukasten
   aussehen, und die Angaben darin sollen wichtiger wirken als ihr Rahmen.
   ═══════════════════════════════════════════════════════════════════════════ */
.bs { border-top: 1px solid var(--stein); }
.bs:first-of-type { border-top: 0; }
.bs-innen { max-width: var(--bahn); margin: 0 auto; padding: 52px var(--bahn-rand); }
.bs h2 {
  font-size: clamp(20px, 2.6vw, 25px); font-weight: 600; letter-spacing: -.02em;
  margin: 0 0 8px; color: var(--ink);
}
.bs-unter { margin: 0 0 26px; color: var(--grau); font-size: 15px; }
.bs h2 + .bs-gitter, .bs h2 + .bs-wege, .bs h2 + .bs-fragen { margin-top: 24px; }

/* ── Kacheln ─────────────────────────────────────────────────────────────── */
.bs-gitter {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
}
.bs-kachel {
  background: #fff; border: 1px solid var(--rand); border-radius: 6px;
  padding: 18px 18px 20px;
  transition: border-color 180ms var(--kurve), box-shadow 180ms var(--kurve),
              transform 180ms var(--kurve);
}
.bs-kachel:hover {
  border-color: color-mix(in srgb, var(--enzian) 40%, var(--rand));
  box-shadow: 0 6px 20px rgba(26, 27, 25, .07);
  transform: translateY(-2px);
}
.bs-zeichen {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 6px; margin-bottom: 12px;
  background: color-mix(in srgb, var(--enzian) 9%, #fff); color: var(--enzian);
}
.bs-kachel h3 { font-size: 15.5px; font-weight: 600; margin: 0 0 5px; color: var(--ink); }
.bs-kachel p  { font-size: 14px; line-height: 1.55; margin: 0; color: #4a4c47; }

/* ── Bereiche ────────────────────────────────────────────────────────────── */
.bs-wege {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
}
.bs-weg a {
  display: block; height: 100%; position: relative;
  background: #fff; border: 1px solid var(--rand); border-radius: 6px;
  border-top: 3px solid var(--farbe, var(--enzian));
  padding: 18px 18px 44px; text-decoration: none; color: inherit;
  transition: border-color 180ms var(--kurve), box-shadow 180ms var(--kurve),
              transform 180ms var(--kurve);
}
.bs-weg a:hover {
  text-decoration: none; transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(26, 27, 25, .09);
  border-color: color-mix(in srgb, var(--farbe) 45%, var(--rand));
  border-top-color: var(--farbe);
}
.bs-weg.ton-enzian  { --farbe: var(--enzian); }
.bs-weg.ton-latsche { --farbe: var(--latsche); }
.bs-weg.ton-laerche { --farbe: var(--laerche); }
.bs-weg.ton-rost    { --farbe: var(--rost); }
.bs-weg .bs-zeichen {
  background: color-mix(in srgb, var(--farbe) 10%, #fff); color: var(--farbe);
  width: 40px; height: 40px;
}
.bs-weg-kopf { display: flex; align-items: baseline; gap: 8px; }
.bs-weg-titel { font-size: 16px; font-weight: 600; color: var(--ink); }
/* Die Zahl kommt nachgeladen. Sie steht als Marke neben dem Titel, nicht als
   grosse Ziffer: sie ist eine Auskunft, nicht die Botschaft der Kachel. */
.bs-zahl {
  font-size: 12px; font-weight: 600; color: var(--farbe);
  background: color-mix(in srgb, var(--farbe) 10%, #fff);
  border-radius: 100px; padding: 2px 8px; line-height: 1.5;
}
.bs-weg-text { display: block; margin-top: 6px; font-size: 14px; line-height: 1.55; color: #4a4c47; }
.bs-weg-pfeil {
  position: absolute; left: 18px; bottom: 16px; color: var(--farbe);
  display: inline-flex; transition: transform 180ms var(--kurve);
}
.bs-weg a:hover .bs-weg-pfeil { transform: translateX(4px); }

/* ── Text ────────────────────────────────────────────────────────────────── */
.bs-text { background: #FCFBF9; }
.bs-fliess p { margin: 0 0 15px; color: #2c2d2a; line-height: 1.72; }
.bs-fliess p:last-child { margin-bottom: 0; }
.bs-fliess h3 { font-size: 17px; font-weight: 600; margin: 28px 0 9px; }
.bs-fliess ul, .bs-fliess ol { margin: 0 0 15px; padding-left: 20px; }
.bs-fliess li { margin-bottom: 6px; line-height: 1.65; }
.bs-fliess a { color: var(--enzian); }
.bs-fliess strong { font-weight: 600; }
/* "eng" begrenzt die ZEILE, nicht den Abschnitt.
   Der Kasten bleibt auf der Bahn, sonst rückte seine Überschrift gegenüber den
   Kacheln darüber ein und die Seite sähe zusammengestückelt aus. Lesbar wird
   der Text über die Zeilenlänge, und die sitzt am Text selbst. */
.bs-eng .bs-fliess { max-width: 68ch; }
/* Ohne "eng" nimmt der Text die ganze Bahn — in Gruppen nebeneinander, nicht in
   CSS-Spalten. Spalten brechen mitten im Gedanken um; hier bleibt beisammen,
   was zusammengehört, und der Abschnitt ist trotzdem so breit wie die Kacheln
   darüber. Welche Gruppen es gibt, entscheidet baustein_gruppen() im PHP. */
.bs-gruppen {
  display: grid; gap: 4px 44px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: start;
}
.bs-gruppe > :first-child { margin-top: 0; }
.bs-gruppe h3 { margin-top: 0; }
@media (max-width: 720px) { .bs-gruppen { gap: 0; grid-template-columns: 1fr; } }

/* ── Fragen ──────────────────────────────────────────────────────────────── */
/* Volle Bahn: die Trennlinien enden dort, wo die Kacheln darüber enden. */
.bs-fragen { border-top: 1px solid var(--rand); }
.bs-frage { border-bottom: 1px solid var(--rand); }
.bs-frage summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 15px 2px; cursor: pointer; list-style: none;
  font-size: 15.5px; font-weight: 600; color: var(--ink);
}
.bs-frage summary::-webkit-details-marker { display: none; }
.bs-frage summary:hover { color: var(--enzian); }
.bs-frage summary svg { flex: 0 0 auto; color: var(--grau); transition: transform 200ms var(--kurve); }
.bs-frage[open] summary svg { transform: rotate(180deg); }
.bs-antwort { padding: 0 2px 16px; }
.bs-antwort p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.7; color: #4a4c47; }
.bs-antwort p:last-child { margin-bottom: 0; }
.bs-antwort a { color: var(--enzian); }

/* ── Hinweis ─────────────────────────────────────────────────────────────── */
.bs-kasten {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  flex-wrap: wrap;
  background: color-mix(in srgb, var(--enzian) 6%, #fff);
  border: 1px solid color-mix(in srgb, var(--enzian) 18%, var(--rand));
  border-radius: 6px; padding: 22px 24px;
}
.bs-kasten-text p { margin: 0; font-size: 15px; line-height: 1.6; color: #2c2d2a; }
.bs-kasten .knopf { flex: 0 0 auto; }

/* ── Handy ───────────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .bs-innen { padding: 34px var(--bahn-rand) 36px; }
  .bs h2 { font-size: 19px; }
  .bs-unter { font-size: 14px; margin-bottom: 18px; }
  .bs-gitter, .bs-wege { gap: 8px; }
  .bs-kachel { padding: 14px 14px 16px; }
  .bs-zeichen { width: 32px; height: 32px; margin-bottom: 9px; }
  .bs-kachel h3 { font-size: 14.5px; }
  .bs-kachel p, .bs-weg-text { font-size: 13.5px; }
  .bs-weg a { padding: 14px 14px 38px; }
  .bs-weg .bs-zeichen { width: 34px; height: 34px; }
  .bs-weg-titel { font-size: 15px; }
  .bs-weg-pfeil { left: 14px; bottom: 13px; }
  .bs-frage summary { font-size: 14.5px; padding: 13px 2px; }
  .bs-antwort p { font-size: 14px; }
  .bs-kasten { padding: 16px; gap: 14px; }
  .bs-kasten .knopf { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .bs-kachel, .bs-weg a, .bs-weg-pfeil, .bs-frage summary svg { transition: none; }
  .bs-kachel:hover, .bs-weg a:hover { transform: none; }
}

/* Unterzeile der Bühne: der Satz, der sagt, für wen die Seite gemacht ist. */
.start-unter {
  margin: -14px 0 26px; color: #4a4c47; font-size: clamp(15px, 1.9vw, 17.5px);
  line-height: 1.5; text-wrap: balance;
}
@media (max-width: 620px) { .start-unter { margin: -10px 0 20px; font-size: 14.5px; } }

/* ═══════════════════════════════════════════════════════════════════════════
   immocheck WG — Wohngemeinschaften
   Dieselbe Bahn wie alles andere, dieselben Ergebniskarten wie die Objektliste.
   Eigen ist nur die Reiterleiste und das Zeichen auf der Karte: eine WG hat
   selten ein gutes Bild, und ein leerer grauer Kasten wäre schlechter als ein
   klares Symbol.
   ═══════════════════════════════════════════════════════════════════════════ */
.wg-raum { max-width: var(--bahn); margin: 0 auto; padding-inline: var(--bahn-rand); }
.wg-raum + .wg-raum { padding-top: 0; }

.wg-reiter {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 20px 0 14px;
  border-bottom: 1px solid var(--rand); padding-bottom: 12px;
}
.wg-reiter a {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--rand); border-radius: 6px; padding: 8px 13px;
  font-size: 14px; font-weight: 500; color: var(--ink); text-decoration: none; background: #fff;
  transition: border-color 160ms var(--kurve), background 160ms var(--kurve), color 160ms var(--kurve);
}
.wg-reiter a:hover { border-color: var(--enzian); color: var(--enzian); text-decoration: none; }
.wg-reiter a[aria-current] { background: var(--enzian); border-color: var(--enzian); color: #fff; }
.wg-reiter a[aria-current] .zeichen { color: #fff; }
.wg-reiter a span {
  font-size: 12px; font-weight: 600; background: var(--stein); color: var(--grau);
  border-radius: 100px; padding: 1px 7px;
}
.wg-reiter a[aria-current] span { background: rgba(255,255,255,.22); color: #fff; }
.wg-reiter-neu { margin-left: auto; border-style: dashed !important; }

.wg-filter {
  display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end;
  margin-bottom: 18px;
}
.wg-feld { display: flex; flex-direction: column; gap: 4px; flex: 1 1 160px; min-width: 0; }
.wg-feld-weit { flex: 2 1 240px; }
.wg-feld-eng  { flex: 0 1 118px; }
.wg-feld > span {
  font-size: 12px; font-weight: 600; color: var(--grau);
  text-transform: uppercase; letter-spacing: .05em;
  display: inline-flex; align-items: center; gap: 6px;
}
.wg-feld input, .wg-feld select {
  width: 100%; font: 400 15px var(--schrift); color: var(--ink); background: #fff;
  border: 1px solid var(--rand); border-radius: 6px; padding: 9px 11px;
}
.wg-feld input:focus, .wg-feld select:focus {
  outline: none; border-color: var(--enzian);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--enzian) 15%, transparent);
}
.wg-hilfe {
  width: 17px; height: 17px; border-radius: 100px; border: 1px solid var(--rand);
  background: #fff; color: var(--grau); font-size: 11px; font-weight: 700;
  line-height: 1; cursor: pointer; text-transform: none;
}
.wg-hilfe:hover { border-color: var(--enzian); color: var(--enzian); }
.wg-schalter { display: flex; align-items: center; gap: 7px; font-size: 14px; padding-bottom: 9px; }
.wg-schalter input { width: 17px; height: 17px; accent-color: var(--enzian); }
.wg-knopf { padding: 10px 20px; font-size: 15px; }
.wg-zurueck { font-size: 13px; color: var(--grau); padding-bottom: 11px; }
.wg-zurueck:hover { color: var(--rost); }
.wg-hinweistext {
  background: color-mix(in srgb, var(--laerche) 7%, #fff);
  border: 1px solid color-mix(in srgb, var(--laerche) 22%, var(--rand));
  border-radius: 6px; padding: 13px 15px; font-size: 14px; line-height: 1.6; margin: 0 0 18px;
}

.wg-stand { font-size: 13.5px; color: var(--grau); margin: 0 0 12px; }
#wgListe.laedt { opacity: .5; transition: opacity 120ms var(--kurve); }

/* ── Ergebniskarte ───────────────────────────────────────────────────────
   Fünf Bausteine in fester Reihenfolge und mit fester Höhe: Bild, Kopfzeile,
   Titel, wer wohnt hier, Preis. Jede Kachel gleich gebaut, auch wenn Angaben
   fehlen -- ein Raster, in dem jede Kachel anders aussieht, zwingt das Auge,
   bei jeder neu zu suchen, wo der Preis steht.
   ─────────────────────────────────────────────────────────────────────── */
.wg-karte { --farbe: var(--enzian); }
.wg-karte.ton-enzian  { --farbe: var(--enzian); }
.wg-karte.ton-latsche { --farbe: var(--latsche); }
.wg-karte.ton-laerche { --farbe: var(--laerche); }
.wg-karte.ton-rost    { --farbe: var(--rost); }

.wg-karte .erg-weg {
  display: flex; flex-direction: column; height: 100%;
  padding: 0; border-radius: 6px; overflow: hidden;
  text-decoration: none; color: inherit;
}
.wg-karte .erg-weg:hover { text-decoration: none; }

/* Bildfläche: immer da, immer gleich hoch. */
.wg-bild {
  position: relative; display: block; aspect-ratio: 16 / 10;
  background-size: cover; background-position: center;
  background-color: var(--stein); border-bottom: 3px solid var(--farbe);
}
.wg-bild-blind {
  display: grid; place-items: center;
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--farbe) 12%, #fff),
    color-mix(in srgb, var(--farbe) 4%, #fff) 55%,
    var(--stein));
}
.wg-blindzeichen { color: color-mix(in srgb, var(--farbe) 55%, #fff); }
.wg-bild .wg-richtung { position: absolute; left: 10px; top: 10px; }

.wg-inhalt { display: flex; flex-direction: column; gap: 7px; padding: 12px 14px 13px; flex: 1 1 auto; }

.wg-kopfzeile { display: flex; align-items: baseline; gap: 8px; }
.wg-art { font-size: 12.5px; font-weight: 600; color: var(--farbe); }
.wg-ort { margin-left: auto; font-size: 12.5px; color: var(--grau); }
.wg-titel {
  font-size: 15.5px; font-weight: 600; line-height: 1.35; color: var(--ink);
  /* Zwei Zeilen, fest: ein einzeiliger Titel würde die Kachel sonst um eine
     Zeile kürzer machen als die daneben. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.7em;
}

.wg-leute { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 26px; }
.wg-personen { display: inline-flex; gap: 4px; }
.wg-person {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 13px; font-weight: 600; color: var(--ink);
  background: var(--stein); border-radius: 5px; padding: 2px 7px;
}
.wg-person i { font-style: normal; font-size: 14px; line-height: 1; }
.wg-aus {
  font-size: 12px; font-weight: 600; color: var(--grau);
  border: 1px solid var(--rand); border-radius: 5px; padding: 2px 8px;
}
.wg-aus-frauen  { color: #A0447A; border-color: color-mix(in srgb, #A0447A 35%, #fff); }
.wg-aus-maenner { color: #2F6390; border-color: color-mix(in srgb, #2F6390 35%, #fff); }
.wg-typ {
  font-size: 12px; color: #4a4c47; background: #FCFBF9;
  border: 1px solid var(--rand); border-radius: 100px; padding: 2px 9px;
}
.wg-plaetze {
  margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--latsche);
  background: color-mix(in srgb, var(--latsche) 10%, #fff); border-radius: 5px; padding: 2px 8px;
}

.wg-fuss {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  border-top: 1px solid var(--rand); padding-top: 9px; margin-top: auto;
}
.wg-preis { font-size: 17px; font-weight: 600; color: var(--ink); }
.wg-monat { font-weight: 400; font-size: .72em; color: var(--grau); }
.wg-nebenbei {
  margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--grau);
}

/* Auswahl der WG-Art im Formular */
.wg-typwahl { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.wg-typwahl label {
  display: block; border: 1px solid var(--rand); border-radius: 8px; padding: 11px 12px;
  cursor: pointer; background: #fff; height: 100%;
}
.wg-typwahl label:hover { border-color: var(--enzian); }
.wg-typwahl label:has(input:checked) {
  border-color: var(--enzian); box-shadow: 0 0 0 2px color-mix(in srgb, var(--enzian) 20%, transparent);
}
.wg-typwahl input { position: absolute; opacity: 0; width: 0; height: 0; }
.wg-typ-emoji { font-size: 18px; }
.wg-typwahl b { display: inline-block; font-size: 14.5px; font-weight: 600; margin-left: 4px; }
.wg-typwahl small { display: block; font-size: 12.5px; color: var(--grau); margin-top: 3px; line-height: 1.45; }

.wg-blaettern {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin: 26px 0 8px; font-size: 14px; color: var(--grau);
}
.wg-blaettern a { color: var(--enzian); }

.wg-leer {
  border: 1px dashed var(--rand); border-radius: 8px; padding: 40px 20px;
  text-align: center; color: var(--grau);
}
.wg-leer p { margin: 0 0 10px; }
.wg-leer-wege { margin-top: 18px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* ── Eine Anzeige ────────────────────────────────────────────────────────── */
.wg-detail { padding-top: 22px; padding-bottom: 50px; }
.wg-zurueckweg { font-size: 13.5px; margin: 0 0 16px; }
.wg-kopf { display: flex; gap: 15px; align-items: flex-start; margin-bottom: 24px; }
.wg-kopf-zeichen {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 8px;
  background: color-mix(in srgb, var(--farbe, var(--enzian)) 10%, #fff); color: var(--farbe, var(--enzian));
}
.wg-kopf-zeichen.ton-enzian  { --farbe: var(--enzian); }
.wg-kopf-zeichen.ton-latsche { --farbe: var(--latsche); }
.wg-kopf-zeichen.ton-laerche { --farbe: var(--laerche); }
.wg-kopf-zeichen.ton-rost    { --farbe: var(--rost); }
.wg-kopf-art { font-size: 13px; color: var(--grau); margin: 0 0 3px; text-transform: uppercase; letter-spacing: .04em; }
.wg-kopf h1 { font-size: clamp(21px, 3.2vw, 29px); font-weight: 600; letter-spacing: -.02em; margin: 0; }
.wg-vergeben, .wg-demo {
  display: inline-block; margin: 9px 0 0; font-size: 13px; font-weight: 600;
  background: color-mix(in srgb, var(--rost) 10%, #fff); color: var(--rost);
  border-radius: 6px; padding: 4px 10px;
}
.wg-demo { background: var(--stein); color: var(--grau); }

.wg-spalten { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 26px; align-items: start; }
.wg-block { border-top: 1px solid var(--rand); padding: 20px 0; }
.wg-block:first-child { border-top: 0; padding-top: 0; }
.wg-block h2 { font-size: 17px; font-weight: 600; margin: 0 0 13px; }
.wg-tafel { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 0; }
.wg-tafel dt { font-size: 12.5px; color: var(--grau); text-transform: uppercase; letter-spacing: .04em; }
.wg-tafel dd { margin: 2px 0 0; font-size: 16px; font-weight: 600; }
.wg-summe { margin: 16px 0 0; font-size: 14.5px; color: #4a4c47; }
.wg-text { font-size: 15px; line-height: 1.7; color: #2c2d2a; }
.wg-kurzprofil { font-size: 15px; font-weight: 600; margin: 0 0 12px; }
.wg-eigenschaften { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.wg-eigenschaften li { display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: #4a4c47; }
.wg-eigenschaften .zeichen { color: var(--enzian); flex: 0 0 auto; }
.wg-warnblock {
  background: color-mix(in srgb, var(--laerche) 6%, #fff);
  border: 1px solid color-mix(in srgb, var(--laerche) 22%, var(--rand));
  border-radius: 8px; padding: 18px; margin-top: 20px;
}
.wg-warnblock h2 { color: var(--laerche); }
.wg-warnblock p { margin: 0; font-size: 14.5px; line-height: 1.65; }

.wg-seite { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 12px; }
.wg-karte-kontakt, .wg-karte-warnung {
  border: 1px solid var(--rand); border-radius: 8px; padding: 18px; background: #fff;
}
.wg-preis-gross { font-size: 26px; font-weight: 600; margin: 0 0 12px; letter-spacing: -.02em; }
.wg-preis-gross span { font-size: 14px; font-weight: 400; color: var(--grau); }
.wg-kontakt-satz { font-size: 14px; line-height: 1.6; color: #4a4c47; margin: 0 0 14px; }
.wg-karte-warnung { background: #FCFBF9; }
.wg-karte-warnung h2 { font-size: 14.5px; font-weight: 600; margin: 0 0 8px; }
.wg-karte-warnung p { font-size: 13.5px; line-height: 1.6; color: var(--grau); margin: 0; }

@media (max-width: 900px) {
  .wg-spalten { grid-template-columns: minmax(0, 1fr); }
  .wg-seite { position: static; }
}
@media (max-width: 700px) {
  .wg-reiter { gap: 5px; padding-bottom: 10px; margin: 14px 0 12px; }
  .wg-reiter a { padding: 7px 10px; font-size: 13px; }
  .wg-reiter-neu { margin-left: 0; }
  .wg-filter { gap: 8px; }
  .wg-feld > span { font-size: 11px; }
  .wg-feld input, .wg-feld select { font-size: 15px; padding: 8px 10px; }
  .wg-inhalt { padding: 10px 11px 11px; gap: 6px; }
  .wg-titel { font-size: 14.5px; min-height: 2.6em; }
  .wg-person { font-size: 12.5px; padding: 2px 7px; }
  .wg-typ { font-size: 11.5px; padding: 2px 8px; }
  .wg-fuss { gap: 7px; padding-top: 7px; }
  .wg-nebenbei { font-size: 11.5px; gap: 6px; }
  .wg-preis { font-size: 16px; }
  .wg-typwahl { grid-template-columns: 1fr; gap: 6px; }
  .wg-typwahl label { padding: 9px 10px; }
  .wg-typwahl small { display: none; }
  .wg-kopf { gap: 11px; }
  .wg-kopf-zeichen { width: 42px; height: 42px; }
  .wg-tafel { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; }
  .wg-tafel dd { font-size: 15px; }
}

/* Startaktion: der Hinweis, dass es bis zum Stichtag nichts kostet. */
.aktionsband {
  display: block; margin: 0 0 20px; padding: 12px 15px;
  background: color-mix(in srgb, var(--latsche) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--latsche) 26%, var(--rand));
  border-radius: 6px; font-size: 14.5px; line-height: 1.6; color: #2c2d2a;
}
.aktionsband b { color: var(--latsche); font-weight: 600; }
.aw-marke {
  display: inline-block; margin-top: 10px; font-size: 12px; font-weight: 600;
  background: color-mix(in srgb, var(--latsche) 12%, #fff); color: var(--latsche);
  border-radius: 100px; padding: 3px 10px;
}

/* ── Anzeige aufgeben ────────────────────────────────────────────────────── */
.wg-formular textarea {
  width: 100%; font: 400 15px/1.65 var(--schrift); color: var(--ink); background: #fff;
  border: 1px solid var(--rand); border-radius: 6px; padding: 11px 12px; resize: vertical;
}
.wg-formular textarea:focus {
  outline: none; border-color: var(--enzian);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--enzian) 15%, transparent);
}
.wg-formreihe { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; margin-bottom: 14px; }
.wg-untertext { font-size: 13px; color: var(--grau); margin: 0 0 12px; line-height: 1.55; }
.wg-feld small.wg-untertext { margin: 4px 0 0; }
.wg-feld.fehlt input, .wg-feld.fehlt select, .wg-feld.fehlt textarea { border-color: var(--rost); }

.wg-artwahl { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.wg-artwahl label {
  display: block; border: 1px solid var(--rand); border-radius: 8px; padding: 14px;
  cursor: pointer; background: #fff; height: 100%;
  transition: border-color 160ms var(--kurve), box-shadow 160ms var(--kurve);
}
.wg-artwahl label:hover { border-color: var(--enzian); }
.wg-artwahl label:has(input:checked) {
  border-color: var(--enzian); box-shadow: 0 0 0 2px color-mix(in srgb, var(--enzian) 22%, transparent);
}
.wg-artwahl input { position: absolute; opacity: 0; width: 0; height: 0; }
.wg-artzeichen {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 6px; margin-bottom: 9px;
  background: color-mix(in srgb, var(--enzian) 9%, #fff); color: var(--enzian);
}
.wg-artwahl b { display: block; font-size: 15.5px; font-weight: 600; }
.wg-artwahl small { display: block; font-size: 13px; color: var(--grau); margin-top: 3px; line-height: 1.5; }

.wg-meine { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.wg-meine li {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  border: 1px solid var(--rand); border-radius: 6px; padding: 11px 13px; font-size: 14.5px;
}
.wg-meine-zustand {
  font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  border-radius: 100px; padding: 3px 9px; background: var(--stein); color: var(--grau); flex: 0 0 auto;
}
.wg-meine-zustand.z-aktiv { background: color-mix(in srgb, var(--latsche) 12%, #fff); color: var(--latsche); }
.wg-meine-zustand.z-entwurf { background: color-mix(in srgb, var(--laerche) 14%, #fff); color: var(--laerche); }
.wg-meine-ort { margin-left: auto; font-size: 13px; color: var(--grau); }

.wg-absenden { border-top: 1px solid var(--rand); padding-top: 20px; margin-top: 8px; }
.wg-absenden .kleingedruckt { max-width: 62ch; }

@media (max-width: 700px) {
  .wg-artwahl { grid-template-columns: 1fr; gap: 8px; }
  .wg-artwahl label { padding: 11px; }
  .wg-formreihe { gap: 8px; }
  .wg-meine-ort { margin-left: 0; width: 100%; }
}

/* Preisliste in den AGB: kommt aus der Tarifliste, nicht aus dem Text. */
.agb-preise { margin: 18px 0 22px; }
.agb-preise > div { border-top: 1px solid var(--rand); padding: 11px 0; }
.agb-preise > div:last-child { border-bottom: 1px solid var(--rand); }
.agb-preise dt { font-weight: 600; font-size: 15.5px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.agb-fuer { font-size: 12px; font-weight: 500; color: var(--grau); background: var(--stein);
  border-radius: 100px; padding: 2px 9px; }
.agb-preise dd { margin: 3px 0 0; font-size: 14.5px; color: #4a4c47; }
.agb-kurz { display: block; font-size: 13.5px; color: var(--grau); margin-top: 2px; }

/* ═══════════════════════════════════════════════════════════════════════════
   Registrierung: die Rechnungsangaben
   Zwölf Felder in vier Gruppen. Ein Raster statt einer Spalte, weil zwölf
   Felder untereinander auf dem Handy wie eine Steuererklärung wirken und auf
   dem Desktop die halbe Seite leer lassen.
   ═══════════════════════════════════════════════════════════════════════════ */
.reg-gruppe { border: 0; padding: 0; margin: 0 0 22px; }
.reg-gruppe legend {
  display: block; width: 100%; padding: 0 0 10px; margin-bottom: 14px;
  border-bottom: 1px solid var(--rand);
  font-size: 15.5px; font-weight: 600; color: var(--ink);
}
.reg-gruppe legend span {
  display: block; font-size: 13px; font-weight: 400; color: var(--grau); margin-top: 2px;
}
.reg-raster {
  display: grid; gap: 12px 14px;
  /* Zwölf feste Spalten statt auto-fit: nur so lässt sich sagen, dass die
     Provinz zwei und die Strasse sechs davon bekommt. Mit auto-fit wären alle
     Felder gleich breit, und ein Zwei-Buchstaben-Feld sähe aus wie ein Fehler. */
  grid-template-columns: repeat(12, 1fr);
  align-items: start;
}
.reg-raster .feld { margin: 0; grid-column: span 4; min-width: 0; }
.reg-raster .feld-breit { grid-column: span 6; }
.reg-raster .feld-kurz  { grid-column: span 2; }
.reg-raster label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 5px; }
.feld-frei { font-weight: 400; font-size: 12px; color: var(--grau); }
.reg-raster select {
  width: 100%; font: 400 16px/1.5 var(--schrift); color: var(--ink);
  background: #fff; border: 1px solid var(--rand); border-radius: 8px; padding: 12px 13px;
}
.reg-raster select:focus {
  outline: none; border-color: var(--enzian);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--enzian) 15%, transparent);
}

.reg-passwort {
  display: flex; gap: 11px; align-items: flex-start;
  background: color-mix(in srgb, var(--latsche) 7%, #fff);
  border: 1px solid color-mix(in srgb, var(--latsche) 22%, var(--rand));
  border-radius: 8px; padding: 14px 16px; margin: 0 0 20px;
  font-size: 14px; line-height: 1.6; color: #2c2d2a;
}
.reg-passwort .zeichen { color: var(--latsche); flex: 0 0 auto; margin-top: 2px; }
.reg-passwort b { font-weight: 600; }

/* Ein Datumsfeld ist so breit wie ein Datum und nicht so breit wie die Spalte.
   Der native Kalender des Browsers bleibt erhalten, er ist auf dem Handy besser
   als alles, was wir selbst bauen könnten. */
.reg-raster input[type="date"] { max-width: 190px; }

@media (max-width: 900px) {
  /* Sechs Spalten: zwei normale Felder nebeneinander, ein kurzes ist ein Drittel. */
  .reg-raster { grid-template-columns: repeat(6, 1fr); }
  .reg-raster .feld { grid-column: span 3; }
  .reg-raster .feld-breit { grid-column: span 6; }
  .reg-raster .feld-kurz  { grid-column: span 2; }
}

@media (max-width: 620px) {
  /* Auf dem Handy kompakter und kleiner, aber nie unter 16px im Eingabefeld:
     darunter zoomt iOS beim Antippen hinein und die Seite springt. */
  .reg-gruppe { margin-bottom: 15px; }
  .reg-gruppe legend { font-size: 14px; padding-bottom: 7px; margin-bottom: 10px; }
  .reg-gruppe legend span { font-size: 12px; }
  .reg-raster { gap: 8px 8px; }
  .reg-raster label { font-size: 12px; margin-bottom: 3px; letter-spacing: 0; }
  .reg-raster .feld input, .reg-raster select { padding: 9px 10px; border-radius: 7px; }
  .reg-raster input[type="date"] { max-width: none; }
  /* Nur der Hinweis unter dem Feld, das gerade den Fokus hat. Zwölf Erklärungen
     untereinander machen aus dem Formular eine Wand. */
  .reg-raster .feld-hinweis { display: none; font-size: 11.5px; margin-top: 3px; }
  .reg-raster .feld:focus-within .feld-hinweis { display: block; }
  .reg-raster .fehlertext { font-size: 11.5px; }
  .reg-passwort { padding: 10px 11px; font-size: 13px; gap: 8px; }
}

/* Die Seite in drei Zeilen, bevor die erste Zahl kommt. */
.preis-kurz {
  list-style: none; counter-reset: p; margin: 0 0 30px; padding: 0;
  display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.preis-kurz li {
  counter-increment: p; position: relative;
  border: 1px solid var(--rand); border-radius: 6px; padding: 14px 16px 14px 44px;
  background: #fff; font-size: 14.5px; line-height: 1.55; color: #4a4c47;
}
.preis-kurz li::before {
  content: counter(p); position: absolute; left: 14px; top: 13px;
  width: 20px; height: 20px; border-radius: 100px;
  background: color-mix(in srgb, var(--enzian) 11%, #fff); color: var(--enzian);
  font-size: 12px; font-weight: 700; display: grid; place-items: center;
}
.preis-kurz b { color: var(--ink); font-weight: 600; }
.preis-danach { display: block; margin-top: 7px; font-size: 12.5px; color: var(--grau); }
@media (max-width: 620px) {
  .preis-kurz { gap: 7px; margin-bottom: 20px; }
  .preis-kurz li { padding: 11px 12px 11px 38px; font-size: 13.5px; }
  .preis-kurz li::before { left: 11px; top: 11px; }
}

/* ── Angebot oder Gesuch: die Frage vor allen anderen ────────────────────── */
.wg-richtung {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  border-radius: 4px; padding: 2px 7px; flex: 0 0 auto;
}
.wg-richtung-angebot { background: color-mix(in srgb, var(--latsche) 13%, #fff); color: var(--latsche); }
.wg-richtung-gesuch  { background: color-mix(in srgb, var(--rost) 12%, #fff);    color: var(--rost); }

.wg-erklaerung {
  list-style: none; margin: 0 0 16px; padding: 0;
  display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.wg-erklaerung li {
  border: 1px solid var(--rand); border-left: 3px solid var(--farbe, var(--rand));
  border-radius: 6px; padding: 10px 12px; font-size: 13px; line-height: 1.5; color: var(--grau);
  background: #fff;
}
.wg-erklaerung li.ist-an { background: #FCFBF9; border-color: var(--farbe, var(--rand)); }
.wg-erklaerung li.ton-latsche { --farbe: var(--latsche); }
.wg-erklaerung li.ton-rost    { --farbe: var(--rost); }
.wg-erklaerung li.ton-laerche { --farbe: var(--laerche); }
.wg-erk-kopf { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; flex-wrap: wrap; }
.wg-erk-kopf b { font-size: 14px; font-weight: 600; color: var(--ink); }
.wg-reiter-angebot[aria-current] { background: var(--latsche); border-color: var(--latsche); }
.wg-reiter-gesuch[aria-current]  { background: var(--rost);    border-color: var(--rost); }

/* ── Der Filter in zwei Ebenen ───────────────────────────────────────────── */
.wg-filter { display: block; margin-bottom: 18px; }
.wg-filter-oben, .wg-filter-unten {
  display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end;
}
.wg-filter-unten { padding-top: 12px; }
.wg-mehr { margin-top: 10px; }
.wg-mehr summary {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer; list-style: none;
  font-size: 13.5px; font-weight: 500; color: var(--grau);
  border: 1px solid var(--rand); border-radius: 100px; padding: 6px 13px; background: #fff;
}
.wg-mehr summary::-webkit-details-marker { display: none; }
.wg-mehr summary:hover { border-color: var(--enzian); color: var(--enzian); }
.wg-mehr summary b {
  font-size: 11.5px; font-weight: 700; background: var(--enzian); color: #fff;
  border-radius: 100px; min-width: 18px; text-align: center; padding: 1px 6px;
}
.wg-mehr summary svg { transition: transform 180ms var(--kurve); }
.wg-mehr[open] summary svg { transform: rotate(180deg); }

@media (max-width: 700px) {
  .wg-erklaerung { gap: 6px; margin-bottom: 12px; }
  .wg-erklaerung li { padding: 8px 10px; font-size: 12.5px; }
  .wg-erk-kopf b { font-size: 13px; }
  .wg-richtung { font-size: 10px; padding: 1px 6px; }
  /* Auf dem Handy stehen oben zwei Felder nebeneinander, der Rest klappt auf. */
  .wg-filter-oben, .wg-filter-unten { gap: 8px; }
  .wg-filter-oben .wg-feld { flex: 1 1 calc(50% - 4px); }
  .wg-filter-oben .wg-feld-weit { flex: 1 1 100%; }
  .wg-filter-unten .wg-feld { flex: 1 1 calc(50% - 4px); }
  .wg-knopf { flex: 1 1 100%; justify-content: center; }
  .wg-mehr summary { width: 100%; justify-content: center; }
}

/* Geburtsdatum: drei Auswahlfelder statt „tt.mm.jjjj“. */
.datumswahl { display: flex; gap: 6px; }
.datumswahl select {
  flex: 1 1 0; min-width: 0;
  font: 400 16px/1.5 var(--schrift); color: var(--ink); background: #fff;
  border: 1px solid var(--rand); border-radius: 8px; padding: 12px 8px;
}
.datumswahl select:nth-child(2) { flex: 1.5 1 0; }
.datumswahl select:focus {
  outline: none; border-color: var(--enzian);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--enzian) 15%, transparent);
}
.feld.fehlt .datumswahl select { border-color: var(--rost); }
@media (max-width: 620px) {
  .datumswahl { gap: 4px; }
  .datumswahl select { padding: 9px 5px; font-size: 15px; border-radius: 7px; }
}

/* Auf der Anzeigenseite darf die Zusammensetzung gross auftreten. */
.wg-leute-gross { gap: 8px; margin-bottom: 14px; }
.wg-leute-gross .wg-person { font-size: 16px; padding: 7px 12px; border-radius: 7px; }
.wg-leute-gross .wg-person i { font-size: 18px; }
.wg-leute-gross .wg-person em { font-style: normal; font-size: 13px; font-weight: 400; color: var(--grau); margin-left: 3px; }
.wg-leute-gross .wg-aus { font-size: 13.5px; padding: 6px 12px; }
.wg-leute-gross .wg-plaetze { font-size: 14px; padding: 7px 12px; }
.wg-typliste { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.wg-typliste li { border: 1px solid var(--rand); border-radius: 8px; padding: 11px 12px; background: #fff; }
.wg-typliste b { font-size: 14.5px; font-weight: 600; margin-left: 5px; }
.wg-typliste small { display: block; font-size: 12.5px; color: var(--grau); margin-top: 3px; line-height: 1.45; }
.wg-kopf-art { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; text-transform: none; }
@media (max-width: 700px) {
  .wg-leute-gross .wg-person { font-size: 14.5px; padding: 5px 9px; }
  .wg-typliste { grid-template-columns: 1fr; gap: 6px; }
  .wg-typliste small { display: none; }
}

/* ── Meine Suche und Suchaufträge ────────────────────────────────────────── */
.haushaltwahl { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }
.haushaltwahl label:has(input:checked) { background: color-mix(in srgb, var(--enzian) 4%, #fff); }

.wahlreihe { display: flex; flex-wrap: wrap; gap: 7px; }
.wahlmarke { cursor: pointer; }
.wahlmarke input { position: absolute; opacity: 0; width: 0; height: 0; }
.wahlmarke span {
  display: inline-block; border: 1px solid var(--rand); border-radius: 100px;
  padding: 7px 14px; font-size: 14px; background: #fff; color: #4a4c47;
  transition: border-color 140ms var(--kurve), background 140ms var(--kurve), color 140ms var(--kurve);
}
.wahlmarke:hover span { border-color: var(--enzian); color: var(--enzian); }
.wahlmarke input:checked + span {
  background: var(--enzian); border-color: var(--enzian); color: #fff; font-weight: 500;
}
.wahlmarke input:focus-visible + span { outline: 2px solid var(--enzian); outline-offset: 2px; }
.reg-raster select[multiple] { padding: 6px; }

.auftrag-liste { list-style: none; margin: 0 0 30px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.auftrag {
  border: 1px solid var(--rand); border-radius: 8px; padding: 14px 16px; background: #fff;
}
.auftrag-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.auftrag-name { font-size: 16px; font-weight: 600; color: var(--ink); }
.auftrag-name:hover { color: var(--enzian); }
.auftrag-neu {
  font-size: 12px; font-weight: 700; background: var(--latsche); color: #fff;
  border-radius: 100px; padding: 2px 9px;
}
.auftrag-weg { margin-left: auto; }
.auftrag-marken { display: flex; flex-wrap: wrap; gap: 5px; margin: 9px 0 0; }
.auftrag-marke {
  font-size: 12.5px; color: var(--grau); background: var(--stein);
  border-radius: 5px; padding: 2px 9px;
}
.auftrag-takt {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border-top: 1px solid var(--rand); margin-top: 12px; padding-top: 11px;
}
.auftrag-takt label { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--grau); }
.auftrag-takt select {
  font: 400 14px var(--schrift); color: var(--ink); background: #fff;
  border: 1px solid var(--rand); border-radius: 6px; padding: 6px 9px;
}
.auftrag-zuletzt { font-size: 12.5px; color: var(--grau); margin-left: auto; }

@media (max-width: 620px) {
  .haushaltwahl { grid-template-columns: 1fr 1fr; }
  .haushaltwahl small { display: none; }
  .wahlmarke span { padding: 6px 11px; font-size: 13px; }
  .auftrag { padding: 11px 12px; }
  .auftrag-name { font-size: 15px; }
  .auftrag-zuletzt { margin-left: 0; width: 100%; }
}

/* „Diese Suche merken“ steht bei den Marken: dort sieht man, was man merkt. */
.marke-merken { margin-left: auto; }
.marke-merken button {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer;
}
.marke.marke-merken {
  border-color: color-mix(in srgb, var(--enzian) 35%, var(--rand));
  color: var(--enzian); background: color-mix(in srgb, var(--enzian) 6%, #fff);
}
.marke.marke-merken:hover { background: var(--enzian); color: #fff; border-color: var(--enzian); }
@media (max-width: 620px) { .marke-merken { margin-left: 0; } }

/* ── Merkherz ────────────────────────────────────────────────────────────
   Sitzt oben rechts auf der Kachel, über dem Verweis. Gefüllt heisst gemerkt;
   ein zweiter Zustand mit Beschriftung wäre auf einer Kachel zu viel.
   ─────────────────────────────────────────────────────────────────────── */
.erg-karte { position: relative; }
.merkherz {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 100px; cursor: pointer;
  background: rgba(255,255,255,.92); border: 1px solid var(--rand); color: var(--grau);
  backdrop-filter: blur(3px);
  transition: color 160ms var(--kurve), border-color 160ms var(--kurve),
              background 160ms var(--kurve), transform 160ms var(--kurve);
}
.merkherz:hover { color: var(--rost); border-color: var(--rost); transform: scale(1.06); }
.merkherz.ist-an { color: var(--rost); border-color: color-mix(in srgb, var(--rost) 45%, #fff); }
.merkherz.ist-an svg path { fill: var(--rost); }
.merkherz:focus-visible { outline: 2px solid var(--enzian); outline-offset: 2px; }
/* Auf der WG-Kachel steht oben eine farbige Kante, das Herz rückt darunter. */
.wg-karte .merkherz { top: 10px; }

.merkzettel {
  position: absolute; z-index: 20; width: 268px;
  background: #fff; border: 1px solid var(--rand); border-radius: 10px;
  box-shadow: 0 12px 34px rgba(26,27,25,.16); padding: 15px 16px 16px;
}
.merkzettel b { display: block; font-size: 14.5px; font-weight: 600; margin-bottom: 5px; }
.merkzettel p { margin: 0 0 12px; font-size: 13px; line-height: 1.55; color: var(--grau); }
.merkzettel-wege { display: flex; gap: 7px; flex-wrap: wrap; }
.merkzettel-wege .knopf { font-size: 13.5px; padding: 8px 14px; }
.merkzettel-zu {
  position: absolute; top: 6px; right: 8px; background: none; border: 0;
  font-size: 20px; line-height: 1; color: var(--grau); cursor: pointer; padding: 2px 6px;
}
.merkzettel-zu:hover { color: var(--ink); }
@media (max-width: 620px) {
  .merkherz { width: 30px; height: 30px; top: 6px; right: 6px; }
  .merkherz svg { width: 17px; height: 17px; }
  .merkzettel { width: min(268px, calc(100vw - 32px)); }
}

/* ── Werkzeug auf der Kachel: teilen und merken ──────────────────────────── */
.kartenwerkzeug {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  display: flex; gap: 5px;
}
.kartenwerkzeug .merkherz { position: static; }
.wg-karte .kartenwerkzeug { top: 10px; }
.teilknopf {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 100px; cursor: pointer;
  background: rgba(255,255,255,.92); border: 1px solid var(--rand); color: var(--grau);
  backdrop-filter: blur(3px);
  transition: color 160ms var(--kurve), border-color 160ms var(--kurve), transform 160ms var(--kurve);
}
.teilknopf:hover { color: var(--enzian); border-color: var(--enzian); transform: scale(1.06); }
.teilknopf:focus-visible { outline: 2px solid var(--enzian); outline-offset: 2px; }

.teilzettel {
  position: absolute; z-index: 20; width: 190px;
  background: #fff; border: 1px solid var(--rand); border-radius: 10px;
  box-shadow: 0 12px 34px rgba(26,27,25,.16); padding: 12px 8px 10px;
  display: flex; flex-direction: column;
}
.teilzettel b {
  font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--grau); padding: 0 8px 6px;
}
.teilzettel a, .teil-kopieren {
  display: block; text-align: left; padding: 8px 10px; border-radius: 6px;
  font-size: 14px; color: var(--ink); text-decoration: none;
  background: none; border: 0; cursor: pointer; font-family: inherit;
}
.teilzettel a:hover, .teil-kopieren:hover { background: var(--stein); text-decoration: none; }
.teilzettel-zu {
  position: absolute; top: 5px; right: 7px; background: none; border: 0;
  font-size: 19px; line-height: 1; color: var(--grau); cursor: pointer; padding: 2px 5px;
}
.teil-linkfeld {
  width: calc(100% - 16px); margin: 6px 8px 2px; font-size: 12px;
  border: 1px solid var(--rand); border-radius: 5px; padding: 6px;
}
@media (max-width: 620px) {
  .kartenwerkzeug { top: 6px; right: 6px; gap: 4px; }
  .teilknopf { width: 30px; height: 30px; }
  .teilknopf svg { width: 16px; height: 16px; }
}

/* Anzeige verlängern: ein Kasten, ein Knopf, keine Ablenkung. */
.verlaengern-kasten {
  border: 1px solid var(--rand); border-radius: 8px; padding: 22px; background: #fff;
  max-width: 560px;
}
.verlaengern-bez {
  font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--grau); margin: 0 0 4px;
}
.verlaengern-titel { font-size: 19px; font-weight: 600; margin: 0 0 6px; }
.verlaengern-frist { font-size: 15px; color: #4a4c47; margin: 0 0 20px; }

/* Sprachwahl im WG-Formular: Marken statt eines Textfeldes. */
.sprachwahl { border: 0; padding: 0; margin: 0; }
.sprachwahl legend { padding: 0; margin-bottom: 5px; }
.sprachwahl legend span {
  font-size: 12px; font-weight: 600; color: var(--grau);
  text-transform: uppercase; letter-spacing: .05em;
}
.sprachwahl { display: flex; flex-wrap: wrap; gap: 6px; }
.sprachwahl legend { flex: 1 1 100%; }
.wg-feld-weit { flex: 2 1 260px; }
.provinz-frei { margin-top: 6px; }

/* Gemeinden mit Angeboten heben sich ab. Eine Karte, auf der alles gleich
   aussieht, sagt nichts. */
.suedtirol .gemeinde.hat-objekte { fill-opacity: .9; stroke-width: 1.4; }
.suedtirol .gemeinde:not(.hat-objekte) { fill-opacity: .38; }
.karten-info .objekte a { color: var(--enzian); font-weight: 600; }
.karten-info .objekte small { color: var(--grau); font-weight: 400; }

/* ═══════════════════════════════════════════════════════════════════════════
   Vorlauf: die Vormerkseite
   Eine Seite, eine Frage. Mittig, ruhig, auf der vollen Bahn -- das Formular
   ist das Einzige, was hier etwas von einem will.
   ═══════════════════════════════════════════════════════════════════════════ */
body.vorlauf { background: var(--papier, #FCFBF9); }
.vl {
  min-height: calc(100svh - 56px); display: flex; align-items: center;
  background:
    radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--enzian) 7%, transparent), transparent 60%),
    #FCFBF9;
}
.vl-innen {
  width: 100%; max-width: var(--bahn); margin: 0 auto;
  padding: 48px var(--bahn-rand) 40px; text-align: center;
}
.vl-marke { display: block; width: fit-content; margin: 0 auto 22px; }
.vl-logo { height: 56px; width: auto; }
.vl-bald {
  display: block; width: fit-content; margin: 0 auto 12px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--latsche);
  background: color-mix(in srgb, var(--latsche) 10%, #fff); border-radius: 100px; padding: 5px 13px;
}
.vl h1 {
  font-size: clamp(34px, 6vw, 58px); font-weight: 600; letter-spacing: -.035em;
  line-height: 1.05; margin: 0 0 14px;
}
.vl-unter {
  font-size: clamp(16px, 2vw, 19px); line-height: 1.55; color: #4a4c47;
  margin: 0 auto 30px; text-wrap: balance;
}

.vl-form {
  background: #fff; border: 1px solid var(--rand); border-radius: 10px;
  padding: 22px 24px 18px; text-align: left;
  box-shadow: 0 12px 40px rgba(26, 27, 25, .06);
}
.vl-frage { margin: 0 0 9px; font-size: 13px; font-weight: 600; color: var(--grau);
  text-transform: uppercase; letter-spacing: .05em; }
.vl-wahl { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.vl-felder { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.vl-feld { display: flex; flex-direction: column; gap: 5px; flex: 1 1 170px; }
.vl-feld-weit { flex: 2 1 260px; }
.vl-feld span { font-size: 13px; font-weight: 600; color: var(--grau); }
.vl-feld input {
  width: 100%; font: 400 16px/1.5 var(--schrift); color: var(--ink); background: #fff;
  border: 1px solid var(--rand); border-radius: 8px; padding: 12px 13px;
}
.vl-feld input:focus {
  outline: none; border-color: var(--enzian);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--enzian) 15%, transparent);
}
.vl-knopf { flex: 0 0 auto; padding: 13px 22px; font-size: 16px; }
.vl-zustimmung { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px;
  font-size: 13px; line-height: 1.55; color: var(--grau); }
.vl-zustimmung input { width: 18px; height: 18px; margin-top: 1px; flex: 0 0 auto; accent-color: var(--enzian); }
.vl-fehler { margin: 12px 0 0; font-size: 14px; color: var(--rost); }
.vl-aktion { margin: 14px 0 0; font-size: 13.5px; color: var(--latsche); font-weight: 500; }

.vl-meldung {
  border-radius: 10px; padding: 18px 20px; font-size: 16px; line-height: 1.55; text-align: left;
  background: color-mix(in srgb, var(--latsche) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--latsche) 25%, var(--rand));
}

.vl-punkte {
  list-style: none; margin: 38px 0 0; padding: 0;
  display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  text-align: left;
}
.vl-punkte li {
  display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 2px;
  border: 1px solid var(--rand); border-radius: 8px; padding: 14px; background: #fff;
}
.vl-zeichen {
  grid-row: span 2; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 6px;
  background: color-mix(in srgb, var(--enzian) 9%, #fff); color: var(--enzian);
}
.vl-punkte b { font-size: 15px; font-weight: 600; }
.vl-punkte span:last-child { font-size: 13.5px; color: var(--grau); line-height: 1.45; }

.vl-fuss {
  display: flex; justify-content: center; gap: 22px; flex-wrap: wrap;
  padding: 18px var(--bahn-rand); font-size: 13px; border-top: 1px solid var(--stein);
}
.vl-fuss a { color: var(--grau); }
.vl-fuss a:hover { color: var(--enzian); }

/* Hinweisbalken für Besucher mit Vorschau-Code */
.vorschaubalken {
  display: flex; justify-content: center; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--laerche); color: #fff; font-size: 13px; padding: 7px var(--bahn-rand);
}
.vorschaubalken a { color: #fff; text-decoration: underline; font-weight: 600; }

@media (max-width: 620px) {
  .vl-innen { padding: 30px var(--bahn-rand) 30px; }
  .vl-logo { height: 42px; }
  .vl-form { padding: 16px 14px 14px; }
  .vl-felder { gap: 8px; }
  .vl-knopf { flex: 1 1 100%; justify-content: center; }
  .vl-punkte { margin-top: 26px; gap: 8px; }
  .vorschaubalken { font-size: 12px; gap: 8px; padding: 6px var(--bahn-rand); }
}