/* Design-Tokens aus dem verbindlichen Prototyp */
:root{
  --sea:#0A3B47; --sea-deep:#06262F; --teal:#17616F;
  --sand:#CF8A4E; --terra:#B5562F;
  --paper:#F6F1E8; --paper-2:#EFE7D8; --ink:#142226; --muted:#647379;
  --line:rgba(20,34,38,.12); --card:#FFFDF8; --good:#3E7C5A; --warn:#B5562F;
  --shadow:0 22px 50px -28px rgba(6,38,47,.55);

  /* Abstand zwischen zwei Flaechen, die untereinander stehen.
     22px war im Portal schon der ueberall benutzte Wert -- Boxen der
     Objektseite, Seitenspalte, die Raster grid2 und grid3. Er steht
     jetzt hier, damit "wie ueberall" auch dann noch stimmt, wenn ihn
     jemand aendert. */
  --abstand-boxen:22px;

  /* Der groessere Sprung vom Seitenkopf zum Inhalt. Er muss groesser
     sein als der zwischen zwei Boxen, sonst liest sich der Kopf wie
     die erste Box. */
  --abstand-kopf:30px;
  /* Der dunkle Verlauf der Startseite. Steht nur hier, damit dunkle
     Baender auf anderen Seiten nicht mit der Zeit abweichen. */
  --tiefsee:
    radial-gradient(120% 90% at 80% -10%,#2C8392 0%,transparent 55%),
    radial-gradient(120% 120% at 10% 110%,#0A3B47 0%,transparent 60%),
    linear-gradient(160deg,#06262F 0%,#0A3B47 45%,#124E5B 100%);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Hanken Grotesk",system-ui,sans-serif;background:var(--paper);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:"Fraunces",Georgia,serif;font-weight:500;line-height:1.05;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1200px;margin:0 auto;padding:0 28px}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:5px 11px;border-radius:100px}

nav{position:sticky;top:0;z-index:50;background:rgba(246,241,232,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:70px}
.logo{font-family:"Fraunces";font-size:22px;font-weight:600;letter-spacing:-.02em;display:flex;align-items:center;gap:10px}
.logo .mark{width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,var(--teal),var(--sea));position:relative;flex:0 0 auto}
.logo .mark:after{content:"";position:absolute;left:5px;right:5px;bottom:6px;height:5px;border-radius:100px;background:var(--sand);opacity:.9}
.logo small{font-family:"Hanken Grotesk";font-size:11px;font-weight:600;color:var(--muted)}
.nav-links{display:flex;align-items:center;gap:24px;font-size:14.5px;font-weight:500}
.btn{font-family:inherit;font-weight:600;font-size:14.5px;border:none;cursor:pointer;border-radius:100px;padding:11px 20px;transition:transform .15s,box-shadow .2s}
.btn-primary{background:var(--sea);color:#fff}
.btn-sand{background:var(--sand);color:var(--sea-deep)}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px -10px rgba(6,38,47,.5)}
@media(max-width:860px){.nav-links a:not(.btn){display:none}}

/* --- Hamburger und Menue --------------------------------------------
   Der Knopf steht links vor dem Logo. Die drei Striche entstehen aus
   einem Element: der mittlere ist der Hintergrund, die beiden aeusseren
   sind ::before und ::after. Ein Bild oder drei leere <span> waeren
   mehr Aufwand fuer dasselbe. */
.nav-in{gap:14px}
.hamburger{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin-left:-10px;border-radius:12px;flex:0 0 auto;
  color:var(--ink);transition:background .15s}
.hamburger:hover{background:var(--paper-2)}
.hb-striche,.hb-striche::before,.hb-striche::after{
  display:block;width:20px;height:2px;border-radius:2px;background:currentColor}
.hb-striche{position:relative}
.hb-striche::before,.hb-striche::after{content:"";position:absolute;left:0}
.hb-striche::before{top:-6px}
.hb-striche::after{top:6px}

/* Das Logo darf schrumpfen, der Knopf nicht -- sonst draengt ein langer
   Name das Menue auf schmalen Geraeten aus der Zeile.

   margin-right:auto haelt es am Hamburger: die Zeile verteilt mit
   space-between, und mit drei Elementen statt zweien landete das Logo
   sonst in der Mitte. */
.logo{min-width:0;margin-right:auto}

.menue{display:none}
.menue:target{display:block;position:fixed;inset:0;z-index:130}
.menue-schatten{position:absolute;inset:0;background:rgba(6,38,47,.62);
  backdrop-filter:blur(2px)}

/* Die Tafel im Papierton der Seite statt in Weiss, mit einer weichen
   Kante rechts -- so wirkt sie wie eine aufgeschlagene Seite und nicht
   wie ein Systemfenster. */
.menue-tafel{position:relative;z-index:1;height:100%;width:min(380px,90vw);
  background:var(--paper);box-shadow:var(--shadow);
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;overflow-y:auto;
  padding:20px 26px 36px}

.menue-kopf{display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding-bottom:18px;margin-bottom:6px;
  border-bottom:1px solid var(--line)}
.menue-logo{font-size:17px;pointer-events:none}
.menue-logo .mark{width:22px;height:22px;border-radius:6px}
.menue-zu{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin-right:-10px;border-radius:12px;flex:0 0 auto;
  color:var(--muted);transition:background .15s,color .15s}
.menue-zu svg{width:22px;height:22px}
.menue-zu:hover{background:var(--paper-2);color:var(--ink)}

.menue-titel{font-family:"Fraunces";font-size:15px;font-weight:600;
  letter-spacing:0;text-transform:none;color:var(--ink);margin:24px 0 6px}
.menue-liste{list-style:none;margin:0;padding:0;display:grid;gap:1px}
/* 44px Mindesthoehe: darunter trifft ein Finger daneben. */
.menue-liste a{display:flex;align-items:center;gap:11px;min-height:44px;
  padding:0 12px;margin:0 -12px;border-radius:11px;
  color:var(--ink);text-decoration:none;font-weight:500;font-size:15px;
  transition:background .14s,color .14s}
.menue-liste a:hover{background:var(--paper-2);color:var(--sea)}

/* Derselbe Farbschluessel wie auf der Karte: die Punkte holen ihre
   Farbe aus den .rk-* Regeln, es gibt also nur eine Stelle, an der die
   Regionsfarben stehen. */
.mn-punkt{width:10px;height:10px;border-radius:50%;flex:0 0 auto;
  background:currentColor}
.mn-punkt.rk-istrien{background:#0F4C5A}
.mn-punkt.rk-kvarner{background:#17616F}
.mn-punkt.rk-norddalmatien{background:#2C8392}
.mn-punkt.rk-mitteldalmatien{background:#4FA0AB}
.mn-punkt.rk-sueddalmatien{background:#7FBEC5}
.mn-punkt.rk-lika-gorski-kotar{background:#A8763C}
.mn-punkt.rk-zagreb{background:#B5562F}
.mn-punkt.rk-nordkroatien{background:#CF8A4E}
.mn-punkt.rk-slawonien{background:#E3B584}
/* Insellage ist keine Region, sondern ein Filter -- ein Ring statt
   einer gefuellten Flaeche sagt das, ohne es zu schreiben. */
.mn-punkt.mn-inseln{background:transparent;box-shadow:inset 0 0 0 2px var(--teal)}

/* Die drei Werkzeuge mit einer Zeile Erklaerung: "Lage-Analyse" allein
   sagt niemandem, was ihn erwartet. */
.menue-werkzeuge a{flex-direction:column;align-items:flex-start;gap:1px;
  min-height:0;padding:10px 12px}
.menue-werkzeuge b{font-weight:600}
.menue-werkzeuge span{font-size:13px;color:var(--muted);font-weight:400;
  line-height:1.4}

.menue-anmelden{margin-top:28px;padding:20px;border:1px solid var(--line);
  border-radius:16px;background:var(--card);display:grid;gap:10px}
.menue-anmelden .menue-titel{margin-top:0}
.menue-knopf{display:flex;align-items:center;justify-content:center;
  text-decoration:none;text-align:center}
.menue-neben{color:var(--teal);font-size:14px;font-weight:600;
  text-decoration:none;min-height:44px;display:flex;align-items:center;
  justify-content:center}
@media(prefers-reduced-motion:no-preference){
  .menue:target .menue-tafel{animation:menue-auf .22s ease-out}
}
@keyframes menue-auf{from{transform:translateX(-100%)}to{transform:none}}

.hero{position:relative;overflow:hidden;color:#fff;padding:96px 0 130px}
/* Das Foto liegt hinter dem Hero, der Verlauf darueber haelt den Text
   lesbar. Der Verlauf laeuft schraeg: links, wo Ueberschrift und
   Fliesstext stehen, ist er fast deckend, nach rechts oeffnet er sich,
   damit vom Bild etwas zu sehen bleibt.

   Der Farbverlauf bleibt als eigene Ebene darunter -- laedt das Bild
   nicht oder ist es noch unterwegs, steht der Hero trotzdem dunkel und
   der weisse Text nie auf Weiss. */
/* Der Farbverlauf bleibt der Untergrund: solange kein Bild geladen ist
   -- oder wenn eines fehlt --, steht der Kopf trotzdem dunkel und der
   weisse Text nie auf Weiss. */
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;
  background:var(--tiefsee)}

/* Die vier Motive liegen uebereinander und werden ueberblendet. Das
   erste bleibt dauerhaft sichtbar, die drei anderen legen sich
   nacheinander darueber und wieder weg -- so entsteht nie eine Luecke,
   in der man den nackten Verlauf saehe. */
.hb-bild{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center}
.hb-2,.hb-3,.hb-4{opacity:0}

@media(prefers-reduced-motion:no-preference){
  .hb-2,.hb-3,.hb-4{animation:hero-blende 32s infinite}
  /* Je acht Sekunden, versetzt: 8 s stehen, 1,5 s wechseln. */
  .hb-2{animation-delay:8s}
  .hb-3{animation-delay:16s}
  .hb-4{animation-delay:24s}
}

@keyframes hero-blende{
  0%   {opacity:0}
  4.7% {opacity:1}
  25%  {opacity:1}
  29.7%{opacity:0}
  100% {opacity:0}
}

/* Der Verlauf liegt ueber allen Bildern und haelt den Text lesbar.
   Schraeg: links, wo Ueberschrift und Fliesstext stehen, fast deckend,
   nach rechts offener, damit vom Bild etwas zu sehen bleibt. */
.hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(102deg,
    rgba(6,38,47,.95) 0%,
    rgba(6,38,47,.90) 34%,
    rgba(8,48,58,.72) 62%,
    rgba(10,59,71,.55) 100%)}

/* Auf schmalen Geraeten laeuft der Text ueber die ganze Breite -- ein
   seitlicher Verlauf hilft dort nicht, er muss von oben kommen. */
@media(max-width:760px){
  .hero-bg::after{
    background:linear-gradient(180deg,
      rgba(6,38,47,.94) 0%,
      rgba(6,38,47,.88) 55%,
      rgba(10,59,71,.72) 100%)}
}
.hero .wrap{position:relative;z-index:2}
.hero .pill{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.2)}
.hero h1{font-size:clamp(38px,6vw,68px);max-width:14ch;margin:22px 0 16px}
.hero h1 em{font-style:italic;color:var(--sand)}
.hero p.lede{font-size:18px;max-width:50ch;color:rgba(255,255,255,.82)}
/* Wellenkante zwischen dunklem Band und Papier.
   ------------------------------------------------------------------
   Die Form ist eine Maske, keine Grafik: die Flaeche traegt schlicht
   currentColor (= --paper), die Maske schneidet die Welle heraus. So
   bleibt die Farbe im CSS, wo sie vorher auch stand.

   Gekachelt statt gezogen. Vorher lag ein einzelner Schwung in einem
   SVG mit preserveAspectRatio="none" und wurde auf jede Fensterbreite
   gestreckt -- auf breiten Schirmen wurde die Welle dadurch flach und
   lang, auf schmalen steil. Jetzt hat die Kachel eine feste Breite und
   wiederholt sich; die Form bleibt auf jedem Schirm dieselbe.

   Die Naht ist rechnerisch unsichtbar: die Kachel beginnt und endet auf
   derselben Hoehe (y=44) und mit derselben Steigung -- die Kontrollpunkte
   am Anfang (+150,-26.67) und am Ende (-150,+26.67) sind spiegelbildlich,
   die Kurve laeuft also ohne Knick weiter.

   Ohne Maskenunterstuetzung bleibt die Kante gerade, statt dass ein
   farbiger Balken ueber dem Band stuende. */
.welle{position:absolute;left:0;right:0;z-index:1;height:90px;color:var(--paper);pointer-events:none;display:block}
.welle-unten{bottom:-1px}
.welle-oben{top:-1px;transform:rotate(180deg)}
@supports ((-webkit-mask-image:none) or (mask-image:none)){
  .welle{
    background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 90' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0,44 c150,-26.67 450,-26.67 600,0 c150,26.67 450,26.67 600,0 L1200,90 L0,90 Z'/%3E%3C/svg%3E") repeat-x left bottom;
    -webkit-mask-size:1200px 90px;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 90' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0,44 c150,-26.67 450,-26.67 600,0 c150,26.67 450,26.67 600,0 L1200,90 L0,90 Z'/%3E%3C/svg%3E") repeat-x left bottom;
    mask-size:1200px 90px;
  }
}
/* Auf schmalen Schirmen niedriger -- die Kachel wird mitverkleinert,
   damit die Welle ihr Verhaeltnis behaelt. */
@media(max-width:700px){
  .welle{height:52px}
  .welle{-webkit-mask-size:700px 52px;mask-size:700px 52px}
}


.search{margin-top:36px;background:var(--card);border-radius:18px;padding:14px;box-shadow:var(--shadow);display:grid;grid-template-columns:1.4fr 1fr 1fr auto;gap:10px;color:var(--ink)}
.search .field{padding:10px 14px;border-radius:12px;background:var(--paper)}
.search .field label{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.search .field select,.search .field input{width:100%;border:none;background:transparent;font:600 15.5px "Hanken Grotesk";color:var(--ink);margin-top:2px;outline:none}
.search .go button{height:100%;width:100%;padding:0 26px;border-radius:12px}
@media(max-width:860px){.search{grid-template-columns:1fr 1fr}.search .go{grid-column:1/-1}}

/* Der Seitenabstand muss hier wiederholt werden. Der Selektor ist
   spezifischer als .wrap und ueberschreibt dessen padding sonst
   vollstaendig -- auch waagerecht. Jede <section class="block wrap">
   lag deshalb bis an den Bildschirmrand, auf dem Telefon am
   deutlichsten. */
section.block{padding:84px 28px}
.eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--terra)}
.head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:34px;flex-wrap:wrap}
/* Die Suchseiten tragen dort jetzt ein h1 statt eines h2 -- gleiche
   Groesse, damit sich optisch nichts aendert. */
.head-row h1{font-size:28px;margin:6px 0 4px}
.head-row h2{font-size:clamp(28px,4vw,42px);margin-top:10px}
.head-row p{color:var(--muted);max-width:46ch;margin-top:8px}

.regions{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
@media(max-width:980px){.regions{grid-template-columns:repeat(2,1fr)}}
/* isolation:isolate macht die Kachel zum eigenen Stapelraum. Erst
   dadurch bleibt das Bild mit z-index:-1 innerhalb der Kachel, statt
   hinter den Seitenhintergrund zu rutschen. */
.region{position:relative;isolation:isolate;border-radius:16px;overflow:hidden;aspect-ratio:3/4;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:18px;transition:transform .25s}
.region:hover{transform:translateY(-4px)}
/* z-index:-1 statt 0: das Bild liegt damit hinter dem Kachelinhalt, und
   der Hauptverweis darf static bleiben -- nur dann spannt seine
   Deckflaeche ueber die ganze Kachel und nicht bloss ueber den
   Schriftzug (siehe .r-haupt::after). */
.region .ph{position:absolute;inset:0;z-index:-1;transition:transform .5s}
.region .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Beim Ueberfahren zieht das Bild leicht heran -- die Kachel hebt sich
   ohnehin, das Bild geht die Bewegung mit. */
.region:hover .ph img{transform:scale(1.06)}
.region .ph img{transition:transform .5s}
@media(prefers-reduced-motion:reduce){.region:hover .ph img{transform:none}}
.region .ph:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(6,38,47,.78) 100%)}
/* Ohne position:relative -- absichtlich. Ein positionierter Link waere
   der Bezugsrahmen fuer sein eigenes ::after, und die Deckflaeche
   unten deckte dann nur den Schriftzug ab statt der Kachel. Genau so
   war es, und das Bild war nicht anklickbar. Ueber dem Bild liegt der
   Text trotzdem, weil dieses jetzt z-index:-1 hat. */
.region .rname{font-family:"Fraunces";font-size:20px;font-weight:500;
  color:#fff;text-decoration:none}
.region .rmeta{font-size:12.5px;opacity:.9}

/* Der Hauptverweis deckt die ganze Kachel ab: so bleibt die Flaeche
   anklickbar -- Bild eingeschlossen --, obwohl die Kachel selbst kein
   Link mehr ist. Links lassen sich nicht verschachteln, und die
   Verweise auf Haeuser und Wohnungen liegen darin. */
.region .r-haupt::after{content:"";position:absolute;inset:0;z-index:1}
.region:focus-within{outline:2px solid var(--sand);outline-offset:3px}

/* --- Regionenkarte ---------------------------------------------------
   Die Farben folgen der Logik der Seite: die Kuestenregionen in
   Abstufungen des Meergruens, von Istrien im Norden bis Sueddalmatien
   im Sueden immer heller, das Binnenland in den Sandtoenen. Damit sagt
   die Farbe schon, ob eine Region am Wasser liegt -- die wichtigste
   Unterscheidung dieses Marktes.

   Benachbarte Regionen liegen nie auf derselben Stufe, sonst
   verschwaende die Grenze zwischen ihnen. */
/* Die Karte ist hoeher als breit, das Land liegt aber diagonal darin.
   Ohne Deckel nimmt sie auf einem breiten Bildschirm die halbe Seite
   ein, ohne mehr zu zeigen. */
.regionskarte{margin:0 0 var(--abstand-boxen);padding:0;
  max-width:620px;margin-inline:auto}
.regionskarte svg{display:block;width:100%;height:auto}
.regionskarte path{
  stroke:var(--paper);stroke-width:1.2;stroke-linejoin:round;
  transition:fill .18s;
}
.rk-istrien{fill:#0F4C5A}
.rk-kvarner{fill:#17616F}
.rk-norddalmatien{fill:#2C8392}
.rk-mitteldalmatien{fill:#4FA0AB}
.rk-sueddalmatien{fill:#7FBEC5}
.rk-lika-gorski-kotar{fill:#A8763C}
.rk-zagreb{fill:#B5562F}
.rk-nordkroatien{fill:#CF8A4E}
.rk-slawonien{fill:#E3B584}

/* Beim Ueberfahren tritt die Region hervor statt die Farbe zu wechseln:
   ein Farbwechsel liesse sie kurz wie eine andere Region aussehen. */
.regionskarte a:hover path,
.regionskarte a:focus path{fill:var(--sea);stroke-width:2}
.regionskarte a:focus{outline:none}
.regionskarte a:focus-visible path{stroke:var(--ink);stroke-width:2.5}

/* Die beiden Direktverweise liegen ueber der Deckflaeche. */
.r-arten{position:relative;z-index:2;display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.r-arten a{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:99px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);
  color:#fff;text-decoration:none;font-size:12.5px;font-weight:500;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);transition:background .15s}
.r-arten a:hover{background:rgba(255,255,255,.3)}
.r-arten a span{font-size:11px;opacity:.85;font-variant-numeric:tabular-nums}
.ph-istrien{background:linear-gradient(150deg,#2E7C86,#0E4350)}
.ph-kvarner{background:linear-gradient(150deg,#3A8A8C,#124E5B)}
.ph-nord{background:linear-gradient(150deg,#5AA0A0,#1B6470)}
.ph-mittel{background:linear-gradient(150deg,#D89B5E,#9A5A33)}
.ph-sued{background:linear-gradient(150deg,#C57A4A,#6E3B25)}
.ph-a{background:linear-gradient(145deg,#2C8392,#0A3B47)}
.ph-c{background:linear-gradient(145deg,#E0AE74,#A6633A)}
.ph-d{background:linear-gradient(145deg,#9FC0BC,#356E72)}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--abstand-boxen)}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--abstand-boxen)}
@media(max-width:980px){.grid3{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.grid3,.grid2{grid-template-columns:1fr}}
.card{background:var(--card);border-radius:18px;overflow:hidden;border:1px solid var(--line);transition:transform .25s,box-shadow .25s}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.card .img{position:relative;aspect-ratio:4/3;overflow:hidden}
.card .img img,.card .img .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card .score{position:absolute;top:12px;left:12px;background:rgba(255,253,248,.94);color:var(--sea);padding:6px 11px;border-radius:100px;font-size:12px;font-weight:700}
.card .score b{color:var(--good)}
.card .body{padding:18px}
.card .loc{font-size:13px;color:var(--muted);font-weight:600}
.card h3{font-size:20px;margin:6px 0 12px}
.card .price{font-family:"Fraunces";font-size:23px;font-weight:600;color:var(--sea)}
.card .ppm{font-size:13px;color:var(--muted);font-weight:600}
.card .specs{display:flex;gap:16px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:13.5px;font-weight:500;flex-wrap:wrap}

/* Maklerbaender: volle Breite, derselbe Tiefsee-Verlauf und dieselbe
   Wellenkante wie der Hero der Startseite. Der untere Innenabstand haelt
   den Inhalt aus der Welle heraus. */
.makler-band{position:relative;overflow:hidden;background:var(--tiefsee);color:#fff;padding:64px 0 132px}
.makler-band>.wrap{position:relative;z-index:2}
.makler-band-innen{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center}
@media(max-width:900px){.makler-band{padding:44px 0 100px}.makler-band-innen{grid-template-columns:1fr;gap:32px}}
@media(max-width:700px){.makler-band{padding:38px 0 70px}}
.makler-band h2{font-size:34px;margin:14px 0}
.makler-band-innen p{color:rgba(255,255,255,.9);max-width:48ch}
.backend-figur{margin:0}
.backend-bild{width:100%;height:auto;display:block;border-radius:16px;box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.backend-figur figcaption{margin-top:12px;font-size:12.5px;color:rgba(255,255,255,.72);max-width:44ch}
.openimmo-box{background:rgba(255,255,255,.1);border:1px dashed rgba(255,255,255,.34);border-radius:16px;padding:24px}
.openimmo-box .oi-titel{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.8;margin-bottom:14px}

/* Login: Grafik daneben, Formular in einer hellen Karte. Die Felder brauchen
   den ruhigen Untergrund -- direkt auf dem Gruen waeren sie schlecht lesbar. */
/* Das Loginband hat oben und unten eine Welle und braucht auf beiden
   Seiten Luft. */
.login-band{padding:132px 0 132px}
@media(max-width:900px){.login-band{padding:100px 0}}
@media(max-width:700px){.login-band{padding:70px 0}}
/* Als erstes Band schliesst der Login direkt an die Kopfzeile an: oben
   sitzt keine Welle, also braucht es dort auch keinen Platz fuer eine. */
.login-band-oben{padding-top:52px}
@media(max-width:900px){.login-band-oben{padding-top:38px}}
@media(max-width:700px){.login-band-oben{padding-top:28px}}
.login-innen{display:grid;grid-template-columns:1.15fr 440px;gap:56px;align-items:center}
@media(max-width:980px){.login-innen{grid-template-columns:1fr;gap:34px}}
.login-karte{background:var(--card);color:var(--ink);border-radius:20px;padding:34px 32px;box-shadow:var(--shadow)}
.login-karte h2{font-size:28px}
.login-karte .hinweis{color:var(--muted)}
.openimmo-box .flow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13.5px;font-weight:600}
.openimmo-box .step{background:rgba(255,255,255,.1);padding:8px 12px;border-radius:10px}
.openimmo-box .arr{color:var(--sand);font-weight:700}

/* Ergebnisseite */
.split{display:grid;grid-template-columns:260px 1fr;gap:32px;align-items:start;padding-bottom:60px}
@media(max-width:900px){.split{grid-template-columns:1fr}}
.filter{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px;position:sticky;top:90px}
.filter h3{font-size:15px;font-family:"Hanken Grotesk";font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:18px 0 8px}
.filter h3:first-child{margin-top:0}
.filter select,.filter input[type=number]{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:var(--paper);font:500 14px "Hanken Grotesk";color:var(--ink)}
.feldpaar{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.facette{list-style:none}
.facette a{display:flex;justify-content:space-between;padding:6px 0;font-size:14.5px;border-bottom:1px solid var(--line)}
.facette a.aktiv{font-weight:700;color:var(--teal)}
.facette a span{color:var(--muted);font-size:13px}
.check{display:flex;align-items:center;gap:8px;font-size:14.5px;margin:6px 0}
.check input{width:auto}
.sortierung{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted)}
.sortierung select{padding:8px 11px;border:1px solid var(--line);border-radius:10px;background:var(--card);font:500 14px "Hanken Grotesk"}
.karte{height:442px;border-radius:18px;overflow:hidden;margin-bottom:22px;border:1px solid var(--line);
  background:linear-gradient(160deg,#cfe6e3,#aacfca);
  /* Leaflet vergibt intern bis z-index 1000. Ohne eigenen Stapelkontext
     legen sich diese Ebenen ueber Modal und Lightbox. */
  position:relative;z-index:0;isolation:isolate}
.blaettern{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:34px;font-weight:600}
.leer{padding:60px 0;text-align:center;color:var(--muted)}

/* Detailseite */
.back{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14.5px;color:var(--sea);margin:26px 0 10px}
.gallery{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:10px;height:440px;border-radius:20px;overflow:hidden;margin-top:6px}
/* Das Raster ist fuer fuenf Bilder gedacht. Liefert ein Makler weniger,
   wuerde es sonst mit Luecken auseinanderfallen. */
.gallery.wenig-2{grid-template-columns:1fr 1fr;grid-template-rows:1fr}
.gallery.wenig-2>div:first-child{grid-row:auto}
.gallery.wenig-1{grid-template-columns:1fr;grid-template-rows:1fr}
.gallery.wenig-1>div:first-child{grid-row:auto}
.gallery .ph-leer{background:linear-gradient(145deg,#2C8392,#0A3B47);display:grid;place-items:center;color:rgba(255,255,255,.75);font-size:13px;font-weight:600}
@media(max-width:760px){.gallery{height:300px;grid-template-columns:2fr 1fr}}
.gallery>div{position:relative;overflow:hidden}
.gallery>div:first-child{grid-row:1/3}
.gallery img,.gallery .ph{width:100%;height:100%;object-fit:cover}

.det-head{display:grid;grid-template-columns:1.6fr 1fr;gap:40px;margin-top:34px}
@media(max-width:900px){.det-head{grid-template-columns:1fr}}
.det-head .loc{color:var(--terra);font-weight:700;font-size:13.5px;letter-spacing:.08em;text-transform:uppercase}
.det-head h1{font-size:clamp(30px,4vw,44px);margin:10px 0 18px}
.keyfacts{display:flex;gap:30px;flex-wrap:wrap;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.keyfacts .kf .v{font-family:"Fraunces";font-size:24px;font-weight:600}
.keyfacts .kf .k{font-size:12.5px;color:var(--muted);font-weight:600}
.pricebox{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:26px;box-shadow:var(--shadow);align-self:start;position:sticky;top:90px}
.pricebox .p{font-family:"Fraunces";font-size:36px;font-weight:600;color:var(--sea)}
.pricebox .ppm{color:var(--muted);font-weight:600;font-size:14px;margin-bottom:18px}
.broker{display:flex;align-items:center;gap:13px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.broker .av{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--sea));flex:0 0 auto}
.broker .bn{font-weight:700;font-size:15px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.verified{color:var(--good);font-size:13px;font-weight:700}
.broker .bm{font-size:12.5px;color:var(--muted)}
.det-body{display:grid;grid-template-columns:1.6fr 1fr;gap:40px;margin-top:50px;align-items:start}
/* Rechte Spalte: Lage-Panel und weitere Kaesten untereinander. Ohne den
   Stapel waere jeder zusaetzliche Kasten eine dritte Rasterspalte. */
.det-seite{display:grid;gap:var(--abstand-boxen);align-content:start}
/* Aehnliche Objekte schliessen die Seite ab, mit Abstand zum Vorherigen. */
/* Ausstattung nach Themen: je Gruppe eine Ueberschrift, darunter die
   Merkmale. Ohne die Gruppierung waere es eine Liste aus 15 Stichworten
   ohne Ordnung. */
.aus-gruppen{display:grid;gap:18px;margin-top:6px}
.aus-gruppe h4{font-family:"Hanken Grotesk";font-size:12px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.aus-gruppe .features{margin:0}

/* ---------------- Maklerbereich ---------------- */
.mk-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;
  flex-wrap:wrap;margin-bottom:22px}
.mk-kopf-rechts{display:flex;align-items:center;gap:14px}
/* Ohne eigenen Rahmen: das Logo sitzt im Menueschalter, und dessen
   Pille umrandet es bereits -- zwei Rahmen ineinander sahen aus wie ein
   Kasten im Kasten. Die Hoehe entspricht dem Kreis mit den Initialen,
   damit der Schalter mit und ohne Logo gleich hoch bleibt. */
.mk-logo{display:grid;place-items:center;height:34px;flex:none}
.mk-logo img{max-height:34px;width:auto;max-width:150px;object-fit:contain}

/* Reiter als Links: jeder hat eine eigene Adresse. */
.mk-tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line);
  margin-bottom:26px}
.mk-tabs a{padding:11px 18px;font-size:14.5px;font-weight:600;color:var(--muted);
  border-bottom:2px solid transparent;margin-bottom:-1px;display:inline-flex;
  align-items:center;gap:8px;transition:color .15s,border-color .15s}
.mk-tabs a:hover{color:var(--ink)}
.mk-tabs a.an{color:var(--sea);border-bottom-color:var(--sea)}
.mk-tabs .zahl{font-size:11.5px;font-weight:700;background:rgba(20,34,38,.08);
  color:var(--muted);padding:2px 8px;border-radius:100px}
.mk-tabs a.an .zahl{background:rgba(23,97,111,.14);color:var(--teal)}

/* Bestand: Suche oben links, Blaetterung unten rechts. */
.bestand-kopf{display:flex;justify-content:space-between;align-items:center;gap:18px;
  flex-wrap:wrap;margin-bottom:16px}
.bestand-suche{display:flex;gap:8px}
.bestand-suche input{width:280px;padding:11px 14px;border:1px solid var(--line);
  border-radius:12px;background:var(--card);font:500 14.5px "Hanken Grotesk";color:var(--ink)}
.bestand-suche input:focus{outline:2px solid var(--teal);outline-offset:1px;border-color:transparent}
.bestand-hinweis{font-size:12.5px;color:var(--muted);margin:0}
.bestand-kopf .abschnitt{margin:0}
.bestand-fuss{display:flex;justify-content:space-between;align-items:center;gap:16px;
  margin-top:14px;font-size:13px;color:var(--muted);flex-wrap:wrap}

/* Gemeinsamer Fuss: Zeilenzahl links, Zaehlung mittig, Blaettern rechts.
   Drei Spalten statt space-between, damit die Zaehlung wirklich mittig
   steht und nicht wandert, wenn die Pfeile fehlen. */
.tabellen-fuss{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
  margin-top:14px;font-size:13px;color:var(--muted)}
.tf-zaehlung{text-align:center}
.tf-zeilen{justify-self:start}
.tf-zeilen select{appearance:none;border:1px solid var(--line);background:var(--card);color:var(--ink);
  border-radius:10px;padding:7px 30px 7px 11px;font:500 13px "Hanken Grotesk";cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236b7f84' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:11px}
.tf-zeilen select:hover{border-color:var(--teal)}
.tf-zeilen select:focus{outline:2px solid var(--teal);outline-offset:1px}
.tf-links a{margin-right:8px}
.tabellen-fuss .paging{margin-left:auto}

/* Sortierbare Koepfe: der Pfeil ist blass, solange die Spalte nicht
   sortiert ist -- sichtbar genug, dass man ihn findet, still genug,
   dass sechs Spalten nicht flimmern. */
.tabelle th a{display:inline-flex;align-items:center;gap:5px;color:inherit;text-decoration:none;
  white-space:nowrap}
.tabelle th a:hover{color:var(--teal)}
.tabelle th.rechts a{flex-direction:row-reverse}
.tabelle th.mitte a{justify-content:center}
.sort-pfeil{font-size:11px;opacity:.3;line-height:1}
.tabelle th a:hover .sort-pfeil{opacity:.7}
.tabelle th.sortiert{color:var(--ink)}
.tabelle th.sortiert .sort-pfeil{opacity:1;color:var(--teal)}

.paging{display:flex;gap:6px;align-items:center;margin-left:auto}
.paging a,.paging>span:not(.stand){min-width:36px;height:36px;display:grid;place-items:center;
  border-radius:10px;font-size:17px;font-weight:600;border:1px solid var(--line);
  background:var(--card);color:var(--ink);line-height:1}
.paging a:hover{border-color:var(--teal);color:var(--teal)}
.paging .aus{color:rgba(20,34,38,.22);cursor:default}
.paging .stand{font-size:13px;color:var(--muted);padding:0 6px;white-space:nowrap}

/* Lange Feedtitel kuerzen; der volle Text steht im title-Attribut. */
.bestand-tabelle .titel-zelle{max-width:420px}
.bestand-tabelle .titel-zelle a,.bestand-tabelle .titel-zelle span{
  display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#bestand-tabelle[aria-busy=true]{opacity:.55;transition:opacity .15s}

/* Statusschalter in der Bestandstabelle */
.status-form{margin:0}
.status-schalter{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  border:1px solid var(--line);background:var(--card);border-radius:100px;
  padding:5px 12px;font:600 12.5px "Hanken Grotesk";color:var(--ink);
  transition:border-color .15s,background .15s}
.status-schalter .punkt{width:8px;height:8px;border-radius:50%;flex:none}
.status-schalter.an .punkt{background:var(--good)}
.status-schalter.aus .punkt{background:var(--muted)}
.status-schalter.aus{color:var(--muted)}
.status-schalter:hover{border-color:var(--teal)}
.status-schalter:disabled{opacity:.5;cursor:wait}
.bestand-tabelle tr.inaktiv td{opacity:.6}

/* Diagramme im Dashboard: waagerechte Balken, weil die Beschriftungen
   Woerter sind und keine Monatskuerzel. */
.mk-diagramme{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));
  gap:18px;margin-bottom:34px}
.diagramm{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 20px}
.diagramm h4{font-family:"Hanken Grotesk";font-size:12.5px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.diagramm-leer{font-size:13px;color:var(--muted)}
.dg-zeile{display:grid;grid-template-columns:1fr 96px 34px;align-items:center;
  gap:10px;margin-bottom:7px;font-size:13px}
.dg-titel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dg-balken{height:9px;background:rgba(20,34,38,.08);border-radius:100px;overflow:hidden}
.dg-balken i{display:block;height:100%;background:var(--teal);border-radius:100px}
.dg-wert{text-align:right;font-weight:700;color:var(--sea)}

/* Ablageflaeche fuer die OpenImmo-ZIP -- volle Breite, gestrichelt,
   faerbt sich beim Ueberziehen. Gleiche Machart wie im Admin von
   travelinfo.to. */
.ablage{position:relative;border:2px dashed rgba(20,34,38,.22);border-radius:16px;
  background:var(--card);transition:border-color .15s,background .15s}
.ablage:hover{border-color:rgba(23,97,111,.5)}
.ablage.dragover{border-color:var(--teal);background:rgba(23,97,111,.07)}
.ablage.hat-datei{border-style:solid;border-color:var(--good)}
.ablage-feld{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.ablage-inhalt{display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:38px 20px;text-align:center;cursor:pointer;pointer-events:none}
.ablage-symbol{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:rgba(23,97,111,.1);color:var(--teal);margin-bottom:4px}
.ablage-symbol svg{width:21px;height:21px}
.ablage-inhalt b{font-size:15.5px;font-weight:600;color:var(--ink)}
.ablage-oder{font-size:13.5px;color:var(--muted)}
.ablage-datei{font-size:13px;font-weight:600;color:var(--good)}
.ablage-feld:focus-visible{outline:2px solid var(--sand);outline-offset:2px}
/* Abgelehnt: falsches Format, gar nicht erst hochgeladen. */
.ablage.abgelehnt{border-style:solid;border-color:var(--warn);background:rgba(181,86,47,.06)}
.ablage.abgelehnt .ablage-datei{color:var(--warn)}
/* Schmale Fassung fuer Logo und Portraet: dieselbe Flaeche, aber neben
   der Vorschau darf sie nicht die halbe Spalte fuellen. */
.ablage-klein .ablage-inhalt{padding:18px 14px;gap:5px}
.ablage-klein .ablage-symbol{width:32px;height:32px;margin-bottom:0}
.ablage-klein .ablage-symbol svg{width:16px;height:16px}
.ablage-klein .ablage-inhalt b{font-size:14px}
.ablage-klein .ablage-oder{font-size:12.5px}
.ablage-klein .ablage-datei{font-size:12px;overflow-wrap:anywhere}
/* Die oertliche Vorschau der noch nicht gespeicherten Datei. */
.mk-vorschau.neu{outline:2px solid var(--teal);outline-offset:2px}

/* Logo und Portraet im Reiter Kontaktdaten */
.mk-bilder{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:22px}
.mk-bild{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px}
.mk-bild-titel{font-size:12.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);margin-bottom:12px}
/* Die Vorschau bekommt Raum: vorher waren 110 beziehungsweise 170 Pixel
   so knapp, dass ein Logo als Briefmarke erschien und man nicht
   beurteilen konnte, was auf den Objektseiten steht. */
.mk-vorschau{background:var(--paper-2);border-radius:12px;display:grid;place-items:center;overflow:hidden;
  margin-bottom:14px;overflow:hidden}
.mk-vorschau.logo{height:190px;padding:22px}
.mk-vorschau.foto{height:260px}
.mk-vorschau.logo img{max-height:100%;max-width:100%;object-fit:contain}
/* Das Portraet fuellt den Kasten und wird mittig beschnitten. Absolut
   statt im Raster: als Grid-Item loeste height:100% nicht auf, das Bild
   behielt seine quadratische Eigenhoehe und stand ueber den Rand. Diese
   Technik nutzen die Objektbilder ohnehin schon. */
.mk-vorschau.foto{position:relative}
.mk-vorschau.foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mk-vorschau span{font-size:13px;color:var(--muted)}
.mk-bild-form{display:flex;flex-direction:column;gap:10px;align-items:stretch;margin-bottom:12px}
/* Hochladen und Entfernen in einer Zeile: zwei Wege zum selben Ziel.
   Untereinander sah das Entfernen aus wie ein zweiter Schritt nach dem
   Hochladen. */
.mk-bild-knoepfe{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mk-bild-knoepfe .btn{flex:1 1 auto;text-align:center;white-space:nowrap}
.mk-bild-knoepfe form{flex:1 1 auto;display:flex}
.mk-bild-knoepfe form .btn{width:100%}

.btn-klein{padding:7px 14px;font-size:13px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Klimadiagramm: Balken sind Sonnentage, der dunkle Fuss darin der
   Anteil der Regentage. Zwei getrennte Balkenreihen waeren in einem
   schmalen Kasten nicht mehr lesbar. */
.klima-diagramm{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;
  align-items:end;height:132px;margin-top:16px}
.klima-diagramm>div{display:flex;flex-direction:column;align-items:center;
  justify-content:flex-end;height:100%;gap:4px}
.klima-diagramm .saeule{display:block;width:100%;border-radius:5px 5px 0 0;
  background:var(--sand);position:relative;overflow:hidden}
.klima-diagramm .spitze .saeule{background:#E0A566}
.klima-diagramm .saeule i{position:absolute;left:0;right:0;bottom:0;
  background:var(--teal);opacity:.85}
.klima-diagramm .grad{font-size:10.5px;font-weight:700;color:var(--sea);line-height:1}
.klima-diagramm .monat{font-size:10.5px;font-weight:600;color:var(--muted);line-height:1}
.klima-legende{display:flex;gap:16px;margin-top:10px;font-size:11.5px;color:var(--muted)}
.klima-legende span{display:inline-flex;align-items:center;gap:6px}
.klima-legende i{width:11px;height:11px;border-radius:3px;display:inline-block}
.klima-legende i.sonne{background:var(--sand)}
.klima-legende i.regen{background:var(--teal)}
@media(max-width:520px){.klima-diagramm{height:110px;gap:3px}.klima-diagramm .grad{display:none}}

/* Anfrageformular: mehrere Felder in einer Zeile, umbrechend. */
.feld-reihe{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0 14px}
.feld-reihe .feld-schmal{max-width:200px}
@media(max-width:560px){.feld-reihe{grid-template-columns:1fr}.feld-reihe .feld-schmal{max-width:none}}
.feld-block{border:1px solid var(--line);border-radius:14px;padding:16px 18px 4px;margin-bottom:18px}
.feld-block legend{font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--ink);padding:0 8px}
.feld-block legend small{font-weight:500;color:var(--muted)}

/* Freiwillige Angaben zum Vorhaben, im Maklerdashboard unter dem Namen. */
.lead-vorhaben{margin-top:6px;font-size:12px;color:var(--muted);line-height:1.4}

/* Wunschliste: Haken als anklickbare Chips statt als nackte Liste --
   vierzehn Kaestchen untereinander waeren eine Wand. */
.wunsch-liste{display:flex;flex-wrap:wrap;gap:8px}
.wunsch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  padding:9px 14px;border:1px solid var(--line);border-radius:100px;
  background:var(--card);font-size:14px;font-weight:500;color:var(--ink);
  text-transform:none;letter-spacing:0;margin:0;
  transition:border-color .15s,background .15s}
.wunsch:hover{border-color:rgba(20,34,38,.28)}
.wunsch input{width:16px;height:16px;margin:0;flex:0 0 auto;accent-color:var(--teal)}
.wunsch:has(input:checked){background:rgba(23,97,111,.09);border-color:var(--teal)}
.wunsch:has(input:focus-visible){outline:2px solid var(--teal);outline-offset:2px}

.aehnlich{margin-top:54px;padding-top:34px;border-top:1px solid var(--line)}
.aehnlich h2{font-size:26px}
.aehnlich-fuss{font-size:13.5px;color:var(--muted);margin:6px 0 20px}
@media(max-width:900px){.det-body{grid-template-columns:1fr}}
.prose h2{font-size:26px;margin-bottom:14px}
.prose p{color:#2c3c40;margin-bottom:14px}
.features{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;margin-top:10px}
.features div{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:500;padding:7px 0;border-bottom:1px solid var(--line)}
.features .dot{width:7px;height:7px;border-radius:50%;background:var(--sand);flex:0 0 auto}

.lage{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:26px;box-shadow:var(--shadow)}
.lage .lhead .pill{background:rgba(23,97,111,.1);color:var(--teal)}
.lage h3{font-size:22px;margin:6px 0 18px}
.gauge-row{display:flex;align-items:center;gap:18px;margin-bottom:22px}
.gauge{position:relative;width:96px;height:96px;flex:0 0 auto}
.gauge svg{transform:rotate(-90deg)}
.gauge .val{position:absolute;inset:0;display:grid;place-items:center;font-family:"Fraunces";font-size:26px;font-weight:600;color:var(--sea)}
.gauge-row .gt b{font-size:15px}
.gauge-row .gt p{font-size:13px;color:var(--muted);max-width:26ch}
.dist-list{list-style:none;margin-bottom:22px}
.dist-list li{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.dist-list li span{color:#2c3c40;font-weight:500}
.bd-titel{font-family:"Hanken Grotesk";font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:6px 0 10px}
.breakdown{width:100%;border-collapse:collapse;font-size:13px}
.breakdown th{text-align:left;font-weight:700;color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;padding-bottom:6px}
.breakdown td{padding:6px 0;border-bottom:1px solid var(--line)}
.breakdown td:last-child,.breakdown th:last-child{text-align:right}
.bd-fuss{font-size:12px;color:var(--muted);margin-top:10px;line-height:1.45}
.flag{display:flex;align-items:flex-start;gap:10px;background:rgba(62,124,90,.08);border:1px solid rgba(62,124,90,.25);border-radius:12px;padding:13px;font-size:13.5px;color:#28503a;font-weight:500;margin-top:16px}
.flag .ic{color:var(--good);font-weight:800}
.flag.warn{background:rgba(181,86,47,.08);border-color:rgba(181,86,47,.3);color:#7a3a1e}
.flag.warn .ic{color:var(--warn)}

footer{background:var(--sea-deep);color:rgba(255,255,255,.7);padding:56px 0 30px;margin-top:30px}
/* Fuenf Spalten, seit Kueste und Binnenland getrennt stehen: der
   Textblock links breiter, die vier Linklisten gleich. */
.foot-grid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:30px}
@media(max-width:1020px){.foot-grid{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}}
footer h4{font-family:"Hanken Grotesk";color:#fff;font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px}
footer a{display:block;font-size:14px;padding:4px 0;opacity:.8}
footer a:hover{opacity:1;color:var(--sand)}
.foot-domains{font-size:13px;color:rgba(255,255,255,.5);margin-top:30px;border-top:1px solid rgba(255,255,255,.12);padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.foot-domains a{display:inline;padding:0}
.foot-domains b{color:var(--sand)}


/* Anfrageformular */
.anfrage .feld{margin-bottom:18px}
.anfrage label{display:block;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.anfrage label small{text-transform:none;letter-spacing:0;font-weight:500}
/* Eingabefelder, Auswahlfelder und Textfeld teilen sich eine Regel --
   sonst sieht ein Dropdown neben einem Textfeld aus wie aus einem
   anderen Formular. Das Betriebssystem gibt select sonst eigene
   Schrift, Hoehe und Rundung. */
.anfrage input[type=text],.anfrage input[type=email],.anfrage input[type=tel],
.anfrage input[type=password],.anfrage input[type=number],.anfrage input[type=url],
.anfrage select,.anfrage textarea{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;
  background:var(--card);font:500 15px "Hanken Grotesk";color:var(--ink);
  line-height:1.35}
.anfrage textarea{resize:vertical}

/* Eigener Pfeil, damit die Hoehe stimmt und er zur Palette passt. */
.anfrage select{
  appearance:none;-webkit-appearance:none;
  padding-right:40px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23647379' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 15px center;
  background-size:12px 8px}
.anfrage select:hover{border-color:rgba(20,34,38,.24)}

.anfrage input:focus,.anfrage select:focus,.anfrage textarea:focus{
  outline:2px solid var(--teal);outline-offset:1px;border-color:transparent}
.anfrage input[aria-invalid=true]{border-color:var(--terra)}
.anfrage .fehler{display:block;color:var(--terra);font-size:13px;margin-top:5px;font-weight:600}
.anfrage .einwilligung{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px}
.anfrage .einwilligung.hat-fehler{border-color:var(--terra)}
.anfrage .einwilligung label{display:flex;gap:10px;align-items:flex-start;text-transform:none;letter-spacing:0;
  font-size:13.5px;font-weight:500;color:#2c3c40;margin:0;line-height:1.5}
.anfrage .einwilligung input{margin-top:3px;flex:0 0 auto}
.anfrage .hinweis{font-size:12.5px;color:var(--muted);margin-top:16px;line-height:1.5}
.anfrage .hinweis a{text-decoration:underline}


/* Makler-Dashboard */
.kennzahlen{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:30px}
@media(max-width:760px){.kennzahlen{grid-template-columns:1fr 1fr}}
.kz{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px}
.kz .n{font-family:"Fraunces";font-size:32px;font-weight:600;color:var(--sea);line-height:1}
.kz .n small{font-size:18px;color:var(--muted);font-weight:500}
.kz .l{font-size:13px;color:var(--muted);font-weight:600;margin-top:6px}
.abschnitt{font-size:20px;margin:34px 0 14px}
.tabelle-rahmen{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow-x:auto}
.tabelle{width:100%;border-collapse:collapse;font-size:14px;min-width:680px}
.tabelle th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
  padding:12px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.tabelle td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.tabelle tr:last-child td{border-bottom:none}
.tabelle tr.hervor{background:rgba(207,138,78,.07)}
.tabelle tr.inaktiv{opacity:.55}
.tabelle .nachricht{max-width:280px;font-size:13.5px;color:#2c3c40}
.tabelle select{padding:6px 9px;border:1px solid var(--line);border-radius:8px;background:var(--paper);font:500 13px "Hanken Grotesk"}
.tabelle a{text-decoration:underline}
.fehlerliste{list-style:none;margin-top:8px;font-size:12.5px;color:var(--terra);max-width:320px}
.fehlerliste li{padding:3px 0}

.upload{background:var(--card);border:1px dashed var(--line);border-radius:16px;padding:20px;margin-bottom:8px}
.upload label{display:block;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.upload-zeile{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.upload input[type=file]{flex:1 1 260px;font:500 14px "Hanken Grotesk"}
.upload .hinweis{font-size:12.5px;color:var(--muted);margin-top:12px;line-height:1.55;max-width:70ch}

.poi-liste{list-style:none;margin-bottom:20px}
.poi-liste li{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.poi-liste li span{color:#2c3c40}

/* Verwaltung */
.makler-karte{background:var(--card);border:1px solid var(--line);border-radius:14px;margin-bottom:12px;overflow:hidden}
.makler-karte.ungeprueft{border-color:rgba(181,86,47,.4)}
.makler-karte summary{padding:16px 18px;cursor:pointer;display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:12px;align-items:center;font-size:14px}
@media(max-width:900px){.makler-karte summary{grid-template-columns:1fr 1fr}}
.makler-karte summary::marker{color:var(--muted)}
.mk-firma{font-weight:700;font-size:15.5px}
.mk-nr{color:var(--muted);font-family:ui-monospace,monospace;font-size:13px}
.mk-zahlen{color:var(--muted);font-size:13px;text-align:right}
@media(max-width:900px){.mk-zahlen{text-align:left}}
.mk-inhalt{padding:0 18px 20px;border-top:1px solid var(--line)}
.mk-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 20px;padding:16px 0;font-size:13.5px;color:#2c3c40}
@media(max-width:760px){.mk-meta{grid-template-columns:1fr 1fr}}
.mk-meta b{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700}
.mk-aktionen{display:flex;gap:10px;flex-wrap:wrap;padding-bottom:16px}
.mk-form{padding-top:14px;border-top:1px dashed var(--line)}
.mk-raster{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media(max-width:760px){.mk-raster{grid-template-columns:1fr}}
.mk-form code{font-family:ui-monospace,monospace;font-size:12px;background:var(--paper-2);padding:1px 4px;border-radius:4px}

/* Galerie: Vorschauleiste und Lightbox */
.gallery button.galerie-oeffnen{display:block;width:100%;height:100%;padding:0;border:none;background:none;cursor:zoom-in}
.gallery button.galerie-oeffnen img{width:100%;height:100%;object-fit:cover;
  transition:transform .55s cubic-bezier(.2,.6,.2,1),filter .3s}

/*
 * Die Pille traegt eine eigene Regel mit derselben Spezifitaet wie
 * "button.galerie-oeffnen" -- sonst gewinnt dessen background:none, und
 * die Pille ist bis zum Ueberfahren unsichtbar. Genau das war der Grund,
 * warum beim Hovern ein dunkelblauer Kasten aus dem Nichts erschien.
 */
/*
 * Die Pille traegt im Markup beide Klassen: "glabel galerie-oeffnen".
 * Ohne eigene Regel erbt sie damit width:100% und height:100% von der
 * Bildflaeche darueber -- sie war in Wirklichkeit 562x440 gross, also die
 * ganze Kachel. Beim Ueberfahren faerbte sich deshalb die komplette
 * Flaeche dunkelblau. Das war der "Overlay", nicht ein gewollter Effekt.
 *
 * Diese Regel hat dieselbe Spezifitaet wie button.galerie-oeffnen und
 * steht danach, gewinnt also.
 */
.gallery button.glabel{position:absolute;z-index:3;
  bottom:14px;right:14px;width:auto;height:auto;
  padding:9px 16px;border-radius:100px;
  cursor:pointer;font:600 12.5px "Hanken Grotesk";color:#fff;
  background:rgba(6,38,47,.72);border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(8px);
  box-shadow:0 8px 20px -10px rgba(0,0,0,.55);
  transition:background .2s,transform .2s,box-shadow .2s}

/*
 * Kein flaechiger Blaufilter ueber dem Bild. Stattdessen drei leise
 * Signale: das Bild zieht langsam heran, ein Verlauf legt sich nur unten
 * an (dort steht die Pille und wird lesbar), und die Pille hebt sich.
 * Das Bild bleibt dabei sichtbar -- es ist das, was der Betrachter
 * ansehen will.
 */
.gallery>div::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;
  background:linear-gradient(to top,rgba(6,38,47,.6),rgba(6,38,47,0));
  opacity:0;transition:opacity .3s;pointer-events:none;z-index:1}
.gallery>div:hover::after,
.gallery>div:focus-within::after{opacity:1}

.gallery>div:hover img,
.gallery>div:focus-within img{transform:scale(1.045)}

.gallery>div:hover .glabel,
.gallery>div:focus-within .glabel{background:var(--sea);transform:translateY(-2px);
  box-shadow:0 12px 26px -10px rgba(0,0,0,.7)}

/*
 * Die vier kleinen Kacheln haben keine Pille. Damit auch dort erkennbar
 * ist, dass ein Klick vergroessert, blendet eine Lupe ein.
 */
.gallery>div:not(:first-child)::before{content:"";position:absolute;z-index:2;
  top:50%;left:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;
  background:rgba(6,38,47,.68) no-repeat center/20px 20px;
  backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.2);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.3-4.3M11 8v6M8 11h6'/%3E%3C/svg%3E");
  opacity:0;transform:scale(.85);transition:opacity .25s,transform .25s;pointer-events:none}
.gallery>div:not(:first-child):hover::before,
.gallery>div:not(:first-child):focus-within::before{opacity:1;transform:scale(1)}

/* Wer Bewegung reduziert haben will, bekommt nur den Verlauf. */
@media(prefers-reduced-motion:reduce){
  .gallery>div:hover img,.gallery>div:focus-within img{transform:none}
  .gallery button.galerie-oeffnen img,.gallery .glabel,
  .gallery>div::after,.gallery>div:not(:first-child)::before{transition-duration:.01ms}
}

.galerie-leiste{display:flex;gap:8px;overflow-x:auto;padding:10px 2px 4px;margin-top:10px;scrollbar-width:thin}
.galerie-leiste button{flex:0 0 auto;width:104px;height:78px;padding:0;border:1px solid var(--line);
  border-radius:10px;overflow:hidden;background:none;cursor:zoom-in;transition:transform .15s,border-color .15s}
.galerie-leiste button:hover{transform:translateY(-2px);border-color:var(--teal)}
.galerie-leiste button:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.galerie-leiste img{width:100%;height:100%;object-fit:cover;display:block}

.lightbox{position:fixed;inset:0;z-index:1900;background:rgba(6,38,47,.94);
  display:flex;align-items:center;justify-content:center;gap:8px;padding:20px}
.lightbox[hidden]{display:none}
.lb-buehne{margin:0;max-width:min(1400px,92vw);max-height:88vh;display:flex;flex-direction:column;align-items:center;gap:12px}
.lb-buehne img{max-width:100%;max-height:80vh;object-fit:contain;border-radius:8px;background:var(--sea-deep)}
.lb-buehne figcaption{color:rgba(255,255,255,.75);font-size:13.5px;font-weight:600;letter-spacing:.02em}
.lightbox button{background:rgba(255,255,255,.12);color:#fff;border:none;border-radius:50%;
  width:48px;height:48px;font-size:26px;line-height:1;cursor:pointer;flex:0 0 auto;transition:background .15s}
.lightbox button:hover{background:rgba(255,255,255,.24)}
.lightbox button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.lb-schliessen{position:absolute;top:18px;right:18px;font-size:20px !important}
@media(max-width:760px){
  .lb-zurueck,.lb-vor{position:absolute;bottom:22px}
  .lb-zurueck{left:22px} .lb-vor{right:22px}
  .galerie-leiste button{width:88px;height:66px}
}

/* Filter: Chips und aufklappbare Gruppen */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.chip{display:inline-flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);
  border-radius:100px;padding:7px 14px;font-size:13.5px;font-weight:600;transition:border-color .15s,background .15s}
.chip:hover{border-color:var(--terra);background:rgba(181,86,47,.06)}
.chip span{color:var(--muted);font-size:12px}
.chip:hover span{color:var(--terra)}
.chip-reset{background:transparent;color:var(--muted);font-weight:500}

.filter-mobil>summary{display:none}
@media(min-width:901px){
  /* Auf breiten Schirmen dient das details-Element nur als Huelle; der
     Aufklapp-Knopf entfaellt. Offen gehalten wird es serverseitig. */
  .filter-mobil>summary{display:none}
}
.fgruppe{border-bottom:1px solid var(--line);padding:2px 0}
.fgruppe:last-of-type{border-bottom:none}
.fgruppe>summary{cursor:pointer;padding:11px 0;font-size:13px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);list-style:none;display:flex;align-items:center;gap:8px}
.fgruppe>summary::-webkit-details-marker{display:none}
.fgruppe>summary::after{content:"＋";margin-left:auto;font-weight:400;font-size:15px;color:var(--muted)}
.fgruppe[open]>summary::after{content:"−"}
.fgruppe>summary:hover{color:var(--ink)}
/* Eingeklappte Gruppe mit gesetztem Wert bleibt erkennbar */
.punkt{width:7px;height:7px;border-radius:50%;background:var(--terra);display:inline-block}
.fgruppe .facette,.fgruppe .spanne,.fgruppe>select,.fgruppe>.check{margin-bottom:12px}

.spanne{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.spanne label{display:flex;align-items:center;gap:6px;position:relative}
.spanne label>span{position:absolute;top:-16px;left:2px;font-size:11px;font-weight:600;color:var(--muted);
  text-transform:none;letter-spacing:0}
.spanne{margin-top:20px}
.spanne input,.spanne select{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:10px;
  background:var(--paper);font:500 14px "Hanken Grotesk";color:var(--ink)}
.spanne em{font-style:normal;font-size:13px;color:var(--muted);flex:0 0 auto}
.fhinweis{font-size:11.5px;color:var(--muted);margin:-4px 0 12px;line-height:1.45}
.fbeschriftung{display:block;font-size:12.5px;color:var(--muted);font-weight:600;margin:10px 0 5px}
/* Nur noch ein Knopf, der darf die Breite ausfuellen. Das Zuruecksetzen
   erledigen die Filterchips ueber der Liste. */
.filter-knoepfe{margin-top:18px}
.filter-knoepfe .btn{display:block;width:100%;text-align:center}
.leer{padding:50px 20px;text-align:center;color:var(--muted);background:var(--card);
  border:1px solid var(--line);border-radius:16px}
.leer strong{color:var(--ink)}

@media(max-width:900px){
  /* Auf dem Smartphone verdraengt eine offene Filterspalte die Ergebnisse */
  .filter{position:static}
  .filter-mobil>summary{display:flex;align-items:center;justify-content:space-between;cursor:pointer;
    font:700 14.5px "Hanken Grotesk";padding:4px 2px 12px;list-style:none}
  .filter-mobil>summary::-webkit-details-marker{display:none}
  .filter-mobil>summary::after{content:"Filter ein-/ausblenden";font-weight:500;font-size:12.5px;color:var(--muted)}
}

/* Live-Trefferzahl am Filterknopf */
#filter-anwenden{transition:background .2s,opacity .2s}
#filter-anwenden[data-zustand="laedt"]{opacity:.65}
#filter-anwenden[data-zustand="leer"]{background:var(--muted)}

/* Score-Herleitung: einklappbar, mit Erfuellungsbalken */
.bd-block{border-top:1px solid var(--line);margin-top:16px;padding-top:4px}
.bd-block>summary{cursor:pointer;padding:10px 0;font:700 12px "Hanken Grotesk";letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);list-style:none;display:flex;align-items:center}
.bd-block>summary::-webkit-details-marker{display:none}
.bd-block>summary::after{content:"＋";margin-left:auto;font-weight:400;font-size:15px}
.bd-block[open]>summary::after{content:"−"}
.bd-block>summary:hover{color:var(--ink)}
.breakdown tfoot td{border-top:2px solid var(--line);border-bottom:none;font-weight:700;padding-top:8px}
.breakdown small{color:var(--muted);font-weight:500}
.balken{display:block;height:4px;border-radius:100px;background:var(--paper-2);overflow:hidden;margin-bottom:3px}
.balken i{display:block;height:100%;background:var(--teal);border-radius:100px}

/* Objektkarte im Lage-Panel */
.kartenvorschau{display:block;width:100%;padding:0;border:1px solid var(--line);border-radius:14px;
  overflow:hidden;background:none;cursor:pointer;position:relative;margin-bottom:20px;
  /* siehe .karte -- die Vorschaukarte darf sich nicht ueber das Modal legen */
  z-index:0;isolation:isolate}
.kartenvorschau:hover .kv-hinweis{background:rgba(6,38,47,.92)}
#objektkarte{height:170px;pointer-events:none}
.kv-hinweis{position:absolute;left:0;right:0;bottom:0;z-index:500;background:rgba(6,38,47,.78);
  color:#fff;font:600 12.5px "Hanken Grotesk";padding:8px 12px;text-align:center;transition:background .2s}

/* Kartenmodal */
.kartenmodal{position:fixed;inset:0;z-index:2000;background:rgba(6,38,47,.94);display:flex;
  align-items:center;justify-content:center;padding:18px}
.kartenmodal[hidden]{display:none}
.km-inhalt{background:var(--paper);border-radius:18px;overflow:hidden;width:min(1200px,96vw);
  height:min(860px,92vh);display:flex;flex-direction:column}
.km-kopf{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;
  border-bottom:1px solid var(--line)}
.km-kopf b{display:block;font-size:15.5px}
.km-kopf span{font-size:13px;color:var(--muted)}
.km-schliessen{background:var(--paper-2);border:none;border-radius:50%;width:38px;height:38px;
  font-size:17px;cursor:pointer;flex:0 0 auto}
.km-schliessen:hover{background:var(--line)}
.km-karte{flex:1;min-height:280px}
.km-fuss{padding:12px 18px 14px;border-top:1px solid var(--line);background:var(--card)}
.km-legende{display:flex;flex-wrap:wrap;gap:7px}
.legende-eintrag{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);
  background:var(--paper);border-radius:100px;padding:5px 11px;font:600 12.5px "Hanken Grotesk";
  cursor:pointer;opacity:.45;transition:opacity .15s}
.legende-eintrag.an{opacity:1}
.legende-eintrag i{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.legende-eintrag span{color:var(--muted);font-weight:500}
.km-status{font-size:12.5px;color:var(--muted);margin-top:9px}
@media(max-width:760px){.km-inhalt{height:94vh;width:100%}}

.dist-list li span small{color:var(--muted);font-weight:400;font-size:12px}
.dist-list li b small{color:var(--muted);font-weight:500;font-size:12px}

/* Umschalter Liste / Karte */
.ansicht-umschalter{display:flex;align-items:center;gap:6px;margin-bottom:16px}
.ansicht-knopf{border:1px solid var(--line);background:var(--card);border-radius:100px;
  padding:8px 18px;font:600 14px "Hanken Grotesk";cursor:pointer;transition:background .15s,color .15s}
.ansicht-knopf.an{background:var(--sea);color:#fff;border-color:var(--sea)}
.au-hinweis{margin-left:auto;font-size:12.5px;color:var(--muted)}
#kartenhuelle .karte{height:676px;margin-bottom:0}
@media(max-width:760px){#kartenhuelle .karte{height:78vh}}

/* 3) Fokusrahmen: der blaue Standardrahmen des Browsers passte nicht zur
   Seite und wirkte auf den Bildknoepfen wie ein Fehler. */
:focus{outline:none}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:6px}
.gallery button.galerie-oeffnen:focus-visible,
.galerie-leiste button:focus-visible,
.karte-oeffnen:focus-visible{outline:3px solid var(--sand);outline-offset:-3px}
.gallery .glabel:focus-visible{outline:2px solid var(--sand);outline-offset:2px}

/* Eigene Boxen unter dem Objekt */
/* Kaufnebenkosten und Anbieter stehen in der linken Hauptspalte direkt
   unter der Ausstattung, untereinander statt nebeneinander. Vorher lagen
   sie mit der Karte in einer Dreierreihe unter der Seite -- die
   Kostentabelle bekam ein Drittel der Breite, obwohl sie von den dreien
   die meiste braucht. */
.db-stapel{display:grid;gap:22px;align-content:start;margin-top:34px}
/* Die Karte schliesst die Seite ab und nimmt dafuer die volle Breite. */
.det-boxen{display:grid;gap:var(--abstand-boxen);margin-top:44px;align-items:start}
.box{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:var(--shadow)}
.box-kopf .pill{background:rgba(23,97,111,.1);color:var(--teal)}
/* Dieselbe Groesse wie .lage h3: Boxen und Lage-Panel stehen in derselben
   Spalte untereinander, ein Pixel Unterschied wirkt dort wie ein Versehen. */
.box h3{font-size:22px;margin:8px 0 16px}

/* Was in einer Box auf einen Absatz folgt, braucht Luft.
   Zwei Ursachen, beide alt: der globale Reset nimmt <p> jeden
   Abstand, und .btn legt kein display fest. Auf einem <button> ist
   das egal (inline-block), auf einem <a> bleibt es inline -- und auf
   einer nicht-ersetzten Inline-Box wirken senkrechte Raender
   ueberhaupt nicht. Ein Knopf hinter einem Absatz sass dadurch acht
   Pixel *in* dem Absatz, und ein margin-top allein haette daran
   nichts geaendert. Zu sehen war das in jeder Box mit einem Satz
   und einem Knopf darunter: "Angebot" im Reisefuehrer, "Schon
   registriert?" im Maklerantrag.

   Die 16px sind dieselben, die h3 nach unten laesst -- damit hat
   eine Box einen Abstand, nicht zwei.                              */
.box > .btn{display:inline-flex;align-items:center;justify-content:center}
.box > p + .btn{margin-top:16px}
.box > p + p{margin-top:12px}
.box-fuss{font-size:12px;color:var(--muted);margin-top:14px;line-height:1.5}
.box .kartenvorschau{margin-bottom:0}

/* Boxen untereinander, mit dem Abstand aus dem Token.
   Fuer Seiten, die aus gestapelten Kaesten bestehen -- die
   Ergebnisseite der Marktpreis-Analyse etwa lag ohne diese Regel bei
   0 px, die Kaesten klebten aufeinander. Ein Container statt Abstaende
   an jeder einzelnen Box: dann kann keiner vergessen werden. */
.box-stapel{display:grid;gap:var(--abstand-boxen);align-content:start;
  padding-bottom:var(--abstand-boxen)}

/* Was direkt auf den Seitenkopf folgt, haelt den groesseren Abstand.
   Steht hier einmal statt als margin an jeder betroffenen Box -- die
   Einladungsseite hatte dafuer eine eigene Zeile, die Ergebnisseite
   gar keine, und entsprechend sahen sie verschieden aus. */
.la-kopf + section,
.la-kopf + .box-stapel{margin-top:var(--abstand-kopf)}

/* Vermietungsaussicht: Band, Zahl und Herleitung.
   Steht als einziger Teil der Box vor der Anmeldesperre -- deshalb traegt
   es die Farbe des Bands, damit die Aussage auch ohne die Zahlen
   dahinter ankommt. Dieselben Farben wie die Score-Pille im Bestand. */
.verm-kopf{display:flex;gap:16px;align-items:flex-start;margin:0 0 18px;
  padding:16px;border-radius:16px;background:rgba(23,97,111,.06);
  border-left:4px solid var(--line)}
.verm-kopf.verm-spitze{border-left-color:#2F6F4F}
.verm-kopf.verm-sehr-gut{border-left-color:#3E7C5A}
.verm-kopf.verm-gut{border-left-color:#5E8F6E}
.verm-kopf.verm-mittel{border-left-color:#CF8A4E}
.verm-kopf.verm-einfach{border-left-color:#B5562F}
.verm-zahl{flex:0 0 auto;text-align:center;line-height:1.05}
.verm-zahl b{display:block;font-family:Fraunces,Georgia,serif;font-weight:500;
  font-size:38px;font-variant-numeric:tabular-nums}
.verm-zahl span{font-size:11px;color:var(--muted)}
.verm-text b{display:block;font-size:15px;margin-bottom:4px}
.verm-text p{font-size:13px;color:var(--muted);line-height:1.5;margin:0}

.verm-teile{margin-top:18px}
.verm-teile > b{display:block;font-size:13px;margin-bottom:10px}
.verm-teile ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.verm-teile li{display:grid;grid-template-columns:1fr 84px;align-items:center;gap:12px;
  font-size:13.5px}
.verm-teile small{color:var(--muted);display:block;font-size:12px}
.verm-balken{height:6px;border-radius:100px;background:rgba(20,34,38,.09);overflow:hidden}
.verm-balken i{display:block;height:100%;border-radius:100px;background:var(--teal)}

/* Fussnote mit ausklappbarer Erlaeuterung.
   Die Methodenhinweise unter den Kennzahlen waren laenger als die Zahlen
   selbst und haben die Boxen erdrueckt. Sichtbar bleibt deshalb nur die
   Kurzfassung; der volle Text kommt beim Zeigen. Ausgeloest wird ueber
   :hover UND :focus-within, damit er auch per Tastatur und am Telefon
   (Tippen setzt den Fokus) erreichbar ist -- eine Erlaeuterung, die nur
   die Maus kennt, ist keine. */
.fussnote{position:relative;font-size:12px;color:var(--muted);margin-top:14px;
  line-height:1.5}
.fn-schalter{display:inline;border:0;padding:0;background:none;font:inherit;
  color:var(--teal);cursor:help;text-align:left;
  text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px}
.fn-schalter .ic{font-style:normal;text-decoration:none;display:inline-block;
  margin-left:4px}
.fn-text{position:absolute;z-index:40;left:0;bottom:calc(100% + 8px);
  width:min(380px,100%);background:var(--card);border:1px solid var(--line);
  border-radius:14px;box-shadow:0 24px 50px -22px rgba(6,38,47,.55);
  padding:14px 16px;text-align:left;color:var(--muted);
  opacity:0;visibility:hidden;transform:translateY(4px);
  transition:opacity .15s,transform .15s,visibility .15s;pointer-events:none}
.fussnote:hover .fn-text,
.fussnote:focus-within .fn-text{opacity:1;visibility:visible;transform:translateY(0)}
@media (prefers-reduced-motion:reduce){.fn-text{transition:none}}

/* Kaufnebenkosten */
.nk-inhalt{display:grid;grid-template-columns:130px 1fr;gap:18px;align-items:start}
@media(max-width:520px){.nk-inhalt{grid-template-columns:1fr}}
.nk-diagramm svg{width:130px;height:130px}
.nk-mitte-zahl{font:600 15px "Fraunces",serif;fill:var(--sea)}
.nk-mitte-text{font:500 8px "Hanken Grotesk";fill:var(--muted);letter-spacing:.04em}
.nk-tabelle{width:100%;border-collapse:collapse;font-size:13.5px}
.nk-tabelle td{padding:7px 0;border-bottom:1px solid var(--line);vertical-align:top}
.nk-tabelle td:last-child{text-align:right;white-space:nowrap}
.nk-tabelle td small{display:block;color:var(--muted);font-size:11.5px;line-height:1.35;margin-top:2px}
.nk-satz{color:var(--muted);text-align:right;white-space:nowrap;padding-right:10px !important}
.nk-farbe{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:7px}
.nk-farbe.leer{background:var(--line)}
.nk-basis td{font-weight:600}
.nk-summe td{border-top:1px solid var(--line);font-weight:600}
.nk-gesamt td{border-bottom:none;font-size:15px;padding-top:9px}
.nk-gesamt td:last-child{color:var(--sea)}
.ppm-anker{text-decoration:underline;text-underline-offset:2px}

/* Anbieterbox */
.mk-vorstellung{font-size:13.5px;color:#2c3c40;margin-bottom:14px;line-height:1.55}
.mk-daten{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:13.5px;margin-bottom:18px}
.mk-daten dt{color:var(--muted);font-weight:600}
.mk-daten dd{margin:0}
.mk-daten a{text-decoration:underline}

/* Rechtliche Pruefungen */
.pruef-liste{list-style:none;margin:6px 0 12px}
.pruef-liste li{padding:12px 0;border-bottom:1px solid var(--line)}
.pruef-liste li:last-child{border-bottom:none}
.pruef-liste b{font-size:14px}
.pruef-liste b span{font-weight:400;color:var(--muted);font-style:italic}
.pruef-liste p{font-size:12.5px;color:#2c3c40;margin:5px 0 7px;line-height:1.5}
.pruef-status{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;padding:3px 9px;border-radius:100px}
/* Vier Zustaende, bewusst unterscheidbar: "nicht geprueft" darf nicht
   aussehen wie "nicht betroffen". */
.pruef-status.offen{background:rgba(100,115,121,.14);color:var(--muted)}
.pruef-status.betroffen{background:rgba(181,86,47,.14);color:var(--terra)}
.pruef-status.unklar{background:rgba(207,138,78,.16);color:#8a5320}
.pruef-status.frei{background:rgba(62,124,90,.14);color:var(--good)}
.pruef-status{text-transform:none;font-size:11.5px}
.pruef-quelle{font-size:11.5px;color:var(--muted);margin-top:6px;line-height:1.45}

/* Objektgruppe: abgesetzter Block, damit klar ist, dass hier nicht
   "aehnliche" Objekte stehen, sondern dasselbe Vorhaben. */
.projekt{margin-top:34px;background:var(--paper-2);border:1px solid var(--line);
  border-radius:18px;padding:26px 24px}
.projekt-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:20px}
.projekt-kopf h2{font-size:24px;margin:8px 0 6px}
.projekt-kopf p{font-size:13.5px;color:#2c3c40;max-width:60ch;line-height:1.55}
.projekt-zahl{font-family:"Fraunces",Georgia,serif;font-size:44px;line-height:1;
  color:var(--sea);opacity:.22;flex:none}
.projekt .grid3{gap:16px}
.projekt-rest{font-size:13px;color:var(--muted);margin-top:14px}
@media(max-width:620px){.projekt{padding:20px 16px}.projekt-zahl{display:none}}

/* Objektnadeln: Farbe und Symbol nach Objektart.
   Nur die Farbe zu variieren reicht nicht -- fuer rot-gruen-blinde
   Betrachter waere die Karte sonst nicht lesbar. */
.objekt-nadel{background:none;border:none;filter:drop-shadow(0 3px 5px rgba(6,38,47,.35));
  transition:transform .12s ease-out;transform-origin:50% 100%}
.objekt-nadel.an{transform:scale(1.25);z-index:1000!important}
.objekt-nadel svg{display:block}

.karten-legende{background:rgba(255,253,248,.94);border-radius:12px;padding:9px 12px;
  box-shadow:0 10px 26px -14px rgba(6,38,47,.6);font-size:12.5px;font-weight:600;
  display:flex;gap:14px;flex-wrap:wrap;margin:0 0 12px 12px;color:var(--ink)}
.karten-legende span{display:inline-flex;align-items:center;gap:6px}
.karten-legende i{width:22px;height:22px;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center;flex:none}
@media(max-width:520px){.karten-legende{font-size:11.5px;gap:9px;padding:7px 9px}}

/* Umschalter Karte/Satellit.
   Zwei Knoepfe in einem Kasten, wie ein Schalter mit zwei Stellungen --
   der aktive traegt die Farbe. Machart und Schatten wie die Legende
   gegenueber, damit beide als ein Paar lesen. */
.karten-umschalter{display:inline-flex;background:rgba(255,253,248,.94);border-radius:12px;
  padding:4px;gap:4px;box-shadow:0 10px 26px -14px rgba(6,38,47,.6);margin:12px 12px 0 0}
.karten-umschalter button{border:0;background:none;cursor:pointer;color:var(--ink);
  font:600 13px/1 "Hanken Grotesk",system-ui,sans-serif;padding:8px 14px;border-radius:9px;
  transition:background .15s,color .15s}
.karten-umschalter button:hover{background:rgba(23,97,111,.1)}
.karten-umschalter button.an{background:var(--sea);color:#fff}
.karten-umschalter button:focus-visible{outline:2px solid var(--sand);outline-offset:2px}
@media(max-width:520px){.karten-umschalter button{padding:7px 11px;font-size:12px}}

/* Farbpunkt in der Vorschaukarte -- verbindet Text und Nadel. */
.kv-punkt{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:5px;
  vertical-align:baseline}

/* Vorschaukarte auf der Ergebniskarte.
   Leaflet bringt eigenes Popup-Chrom mit -- weisser Kasten, Rundung,
   Innenabstand. Das wird hier weggeraeumt, sonst sitzt die Karte in einer
   zweiten Karte. */
.kv-popup .leaflet-popup-content-wrapper{background:none;box-shadow:none;border-radius:0;padding:0}
.kv-popup .leaflet-popup-content{margin:0;width:268px!important;line-height:1.4}
.kv-popup .leaflet-popup-tip{background:var(--card);box-shadow:0 18px 40px -22px rgba(6,38,47,.6)}
.kv{display:block;background:var(--card);border-radius:14px;overflow:hidden;
  box-shadow:0 20px 44px -20px rgba(6,38,47,.55);color:var(--ink);
  border:1px solid var(--line)}
.kv:hover{color:var(--ink)}
.kv-bild{position:relative;aspect-ratio:16/9;background:var(--paper-2)}
.kv-bild img{width:100%;height:100%;object-fit:cover;display:block}
.kv-leer{width:100%;height:100%;background:linear-gradient(120deg,var(--paper-2),#e3d8c4)}
.kv-score,.kv-gruppe{position:absolute;top:9px;font-size:11px;font-weight:700;
  padding:4px 9px;border-radius:100px;color:#fff;background:rgba(6,38,47,.82)}
.kv-score{right:9px}
.kv-gruppe{left:9px;background:rgba(181,86,47,.92)}
.kv-text{padding:12px 13px 13px}
.kv-ort{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--terra)}
.kv-titel{font-family:"Fraunces",Georgia,serif;font-size:15px;margin:4px 0 7px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kv-preis{font-size:17px;font-weight:700}
.kv-qm{font-size:12px;color:var(--muted);font-weight:600}
.kv-eck{display:flex;gap:12px;flex-wrap:wrap;margin-top:9px;padding-top:9px;
  border-top:1px solid var(--line);font-size:12px;font-weight:500}
.kv-eck span{display:inline-flex;align-items:center;gap:4px}
.kv-eck svg{width:13px;height:13px;fill:none;stroke:var(--teal);stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.kv-link{display:inline-flex;align-items:center;gap:5px;margin-top:10px;
  font-size:12.5px;font-weight:700;color:var(--sea)}
.kv-link svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.kv:hover .kv-link svg{transform:translateX(3px)}

/* Hinweis auf der Trefferkarte, dass das Objekt zu mehreren gehoert. */
/* Saisonverlauf: zwoelf Balken, Hoehe ueber die CSS-Hoehe der Saeule.
   Kein Diagrammpaket -- zwoelf Werte rechtfertigen kein zusaetzliches
   Skript, und so steht das Diagramm auch ohne JavaScript. */
.saison{margin:0;background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:20px 20px 16px}
.saison figcaption{margin-bottom:16px}
.saison figcaption b{display:block;font-family:"Fraunces",Georgia,serif;font-size:17px;font-weight:500}
.saison figcaption span{font-size:12.5px;color:var(--muted)}
.saison-balken{display:grid;grid-template-columns:repeat(12,1fr);gap:5px;
  align-items:end;height:150px}
.saison-balken>div{display:flex;flex-direction:column;align-items:center;
  justify-content:flex-end;height:100%;gap:4px}
.saison-balken .saeule{display:block;width:100%;border-radius:5px 5px 0 0;
  background:rgba(10,59,71,.16);transition:background .15s}
.saison-balken .an .saeule{background:var(--teal)}
.saison-balken .spitze .saeule{background:var(--sand)}
.saison-balken .wert{font-size:10.5px;font-weight:700;color:var(--muted);line-height:1}
.saison-balken .an .wert{color:var(--sea)}
.saison-balken .monat{font-size:11px;font-weight:600;color:var(--muted);line-height:1}
.saison-balken .an .monat{color:var(--ink)}
.saison-fuss{font-size:12px;color:var(--muted);line-height:1.5;margin-top:14px;
  padding-top:12px;border-top:1px solid var(--line)}
@media(max-width:520px){.saison-balken{height:120px;gap:3px}
  .saison-balken .wert{display:none}}

/* Eckband fuer verkaufte und reservierte Objekte.
   Um 45 Grad gedreht in der oberen linken Ecke; der Traeger ist bewusst
   breiter als die Ecke, damit die Enden hinter dem Bildrand verschwinden
   und keine abgeschnittenen Kanten zu sehen sind. */
.status-band{position:absolute;top:22px;left:-52px;width:190px;z-index:4;
  transform:rotate(-45deg);text-align:center;pointer-events:none;
  box-shadow:0 8px 18px -8px rgba(6,38,47,.7)}
.status-band span{display:block;padding:7px 0;font-size:11.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:#fff}
.status-band.verkauft span{background:var(--terra)}
.status-band.reserviert span{background:var(--sand);color:#3a1f0c}

/* Auf der Detailseite sitzt das Band am grossen Bild und darf groesser sein. */
.gallery .status-band{top:30px;left:-64px;width:230px}
.gallery .status-band span{padding:9px 0;font-size:13px}

/* Unten links -- oben links sitzt schon der Lage-Score. */
.card .gruppe-marke{position:absolute;left:12px;bottom:12px;z-index:2;
  background:rgba(6,38,47,.82);color:#fff;font-size:11.5px;font-weight:600;
  padding:5px 10px;border-radius:100px;backdrop-filter:blur(4px)}

/* Maklerseite: Vorteile unter der Ansprache */
.makler-vorteile{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}
.makler-vorteile>div{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px}
.makler-vorteile b{display:block;font-family:"Fraunces",Georgia,serif;font-size:17px;font-weight:500;margin-bottom:7px}
.makler-vorteile p{font-size:13.5px;color:#2c3c40;line-height:1.55}

/* ==================================================================
   Konto fuer Interessenten
   ================================================================== */

/* Gesperrter Kasten: Attrappe darunter, Aufforderung darueber.
   Der Weichzeichner liegt auf der Attrappe, nicht auf echten Werten --
   die stehen fuer Gaeste gar nicht erst in der Seite. */
.box.gesperrt{position:relative;overflow:hidden}
.gesperrt-attrappe{filter:blur(5px);opacity:.5;pointer-events:none;user-select:none}
.gesperrt-attrappe .platzhalter{display:inline-block;width:76px;height:13px;border-radius:4px;
  background:linear-gradient(90deg,rgba(20,34,38,.22),rgba(20,34,38,.1))}
.platzhalter-diagramm{display:flex;align-items:flex-end;gap:6px;height:96px;margin-top:20px}
.platzhalter-diagramm span{flex:1;border-radius:5px 5px 0 0;
  background:linear-gradient(180deg,rgba(23,97,111,.5),rgba(23,97,111,.16))}

.gesperrt-overlay{position:absolute;inset:0;display:grid;place-items:center;padding:22px;
  background:linear-gradient(180deg,rgba(255,253,248,.55),rgba(255,253,248,.9))}
.go-inhalt{max-width:44ch;text-align:center}
.go-symbol{width:44px;height:44px;border-radius:50%;display:inline-grid;place-items:center;
  background:rgba(23,97,111,.12);color:var(--teal);margin-bottom:12px}
.go-symbol svg{width:22px;height:22px}
.go-inhalt b{display:block;font-size:16.5px;margin-bottom:6px;color:var(--ink)}
.go-inhalt p{font-size:14px;color:var(--muted);margin-bottom:16px}
.go-knoepfe{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.go-knoepfe .btn{padding:10px 18px;font-size:14px}

/* Anmeldeseite: Login neben dem Nutzenversprechen. */
.konto-innen{display:grid;grid-template-columns:440px 1fr;gap:56px;align-items:center}
@media(max-width:980px){.konto-innen{grid-template-columns:1fr;gap:34px}}
.konto-werbung h2{font-size:32px;margin:12px 0 20px}
.konto-nutzen{display:grid;gap:16px;list-style:none;padding:0;margin:0}
.konto-nutzen li{display:grid;gap:3px}
.konto-nutzen b{color:#fff;font-size:16px}
.konto-nutzen span{color:rgba(255,255,255,.82);font-size:14.5px;max-width:52ch}

/* Registrierungs- und Profilformular: Bloecke untereinander, damit die
   Abschnitte lesbar bleiben. */
.konto-form{max-width:960px}
.konto-form .feld-block + .feld-block{margin-top:26px}
.block-hinweis{color:var(--muted);font-size:14px;margin:-6px 0 14px}

/* Eigene Anfragen. */
.anfrage-liste{display:grid;gap:18px}
.anfrage-karte{display:grid;grid-template-columns:210px 1fr;gap:20px;background:var(--card);
  border:1px solid var(--line);border-radius:18px;overflow:hidden}
@media(max-width:700px){.anfrage-karte{grid-template-columns:1fr}}
.ak-bild{position:relative;display:block;min-height:150px;background:var(--paper-2)}
.ak-bild img,.ak-bild .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ak-text{padding:18px 22px 20px 0}
@media(max-width:700px){.ak-text{padding:0 20px 20px}}
.ak-kopf{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.ak-ort{color:var(--terra)}
.ak-datum{color:var(--muted);font-weight:600;letter-spacing:0;text-transform:none}
.ak-text h3{font-size:20px;margin:8px 0 10px}
.ak-text h3 a{color:inherit}
.ak-daten{display:flex;gap:16px;flex-wrap:wrap;align-items:baseline;font-size:14.5px;
  color:var(--muted)}
.ak-daten b{font-size:18px;color:var(--ink)}
.ak-makler{font-size:14px;color:var(--muted);margin-top:10px}
.ak-weg{display:inline-block;background:rgba(181,86,47,.12);color:var(--warn);
  padding:3px 9px;border-radius:100px;font-size:12.5px;font-weight:600;margin-left:6px}
.ak-nachricht{font-size:14px;color:var(--muted);margin-top:8px;font-style:italic}

/* Modal fuer die Registrierung.
   ------------------------------------------------------------------
   Geoeffnet wird ueber :target, also ueber den Anker im Link -- ohne
   JavaScript. Die Klasse .offen ist der zweite Weg: nach einem
   Formularfehler traegt die Adresse keinen Anker mehr, das Modal soll
   aber offen bleiben, damit die Eingaben nicht verloren wirken. */
.modal{display:none}
.modal:target,.modal.offen{display:grid;place-items:center;position:fixed;inset:0;z-index:120;
  padding:24px}
.modal-schatten{position:absolute;inset:0;background:rgba(6,38,47,.62);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.modal-karte{position:relative;z-index:1;background:var(--card);border-radius:20px;
  width:min(780px,100%);max-height:88vh;display:flex;flex-direction:column;
  box-shadow:0 40px 90px -30px rgba(6,38,47,.7);overflow:hidden}
.modal-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:26px 28px 16px;border-bottom:1px solid var(--line)}
.modal-kopf h2{font-size:26px;margin-top:8px}
.modal-zu{font-size:30px;line-height:1;color:var(--muted);text-decoration:none;
  width:38px;height:38px;display:grid;place-items:center;border-radius:10px;flex:none}
.modal-zu:hover{background:var(--paper-2);color:var(--ink)}
/* Der Koerper scrollt, Kopf und Fuss bleiben stehen -- sonst verschwindet
   der Absendeknopf am Ende eines langen Formulars aus dem Blick. */
.modal-koerper{overflow-y:auto;padding:22px 28px 8px}
.modal-lede{color:var(--muted);font-size:14.5px;max-width:62ch;margin-bottom:20px}
.modal-fuss{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:16px 28px 20px;border-top:1px solid var(--line);background:var(--paper);
  flex-wrap:wrap}
.modal-fuss .hinweis{margin:0;max-width:52ch;font-size:12.5px}
.modal-fuss .btn{padding:13px 26px;flex:none}
@media(max-width:700px){
  .modal:target,.modal.offen{padding:0}
  .modal-karte{max-height:100vh;border-radius:0;width:100%}
  .modal-kopf,.modal-koerper,.modal-fuss{padding-left:18px;padding-right:18px}
  .modal-fuss .btn{width:100%}
}
/* Im Modal sind die Bloecke enger gesetzt als auf einer eigenen Seite. */
.modal .feld-block{margin-top:0}
.modal .feld-block + .feld-block{margin-top:22px}
.modal .wunsch-liste{margin-top:14px}

/* Anbieterkasten: Portraet links, Name in der Mitte, Firmenlogo rechts.
   Beide Bilder sind optional -- das Raster kommt mit einem, mit beiden
   und mit keinem aus, weil nur der Textblock wachsen darf. */
.mk-vorstellung-kopf{display:flex;align-items:center;gap:16px;margin:4px 0 14px}
.mk-vorstellung-text{flex:1;min-width:0}
.mk-vorstellung-text h3{margin:0;font-size:22px}
.mk-person{color:var(--muted);font-size:14.5px;margin-top:4px}
.mk-portraet{width:76px;height:76px;border-radius:50%;object-fit:cover;flex:none;
  border:2px solid var(--card);box-shadow:0 8px 22px -12px rgba(6,38,47,.5)}
/* Das Logo wird eingepasst, nicht beschnitten: ein angeschnittenes
   Firmenlogo sieht nach Fehler aus. */
.mk-firmenlogo{max-width:132px;max-height:56px;width:auto;height:auto;object-fit:contain;flex:none}
@media(max-width:560px){
  .mk-vorstellung-kopf{flex-wrap:wrap;gap:12px}
  .mk-firmenlogo{order:3;max-width:104px}
}

/* Kontolink in der Kopfzeile. Bleibt auch auf schmalen Schirmen sichtbar
   -- ohne ihn findet niemand den Bereich, und wer angemeldet ist, sieht
   nicht, dass er es ist. */
.nav-konto{display:inline-flex;align-items:center;gap:7px;font-size:14.5px;font-weight:500;
  color:var(--ink);white-space:nowrap}
.nav-konto:hover{color:var(--teal)}
.nk-symbol{width:20px;height:20px;display:grid;place-items:center;flex:none}
.nk-symbol svg{width:19px;height:19px}
@media(max-width:860px){.nav-konto span{display:none}.nav-konto .nk-symbol{display:grid}}

/* Schmale Modalfassung fuer Anmeldung und Passwortlink -- ein
   Zweifelderformular braucht keine 780 Pixel. */
.modal-schmal .modal-karte{width:min(440px,100%)}
.modal-schmal .modal-koerper{padding-bottom:24px}
.modal-zeilen{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:16px;font-size:14px}
.modal-zeilen a{color:var(--teal);font-weight:600}
.modal-makler{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
  font-size:13.5px;color:var(--muted);display:flex;align-items:center;
  justify-content:space-between;gap:12px;flex-wrap:wrap}
.modal-makler .btn{flex:none;padding:8px 14px;font-size:13px}

/* Binnenlandregionen. Eigene Farben statt Wiederverwendung der
   Kuestenverlaeufe: die Kacheln stehen nebeneinander, und zwei gleiche
   Verlaeufe liessen zwei Regionen wie eine aussehen. */
.ph-lika{background:linear-gradient(150deg,#4A7C59,#1F4230)}
.ph-zagreb{background:linear-gradient(150deg,#7C6A9A,#3B2F52)}
.ph-nordkroatien{background:linear-gradient(150deg,#8FA05A,#4A5526)}
.ph-slawonien{background:linear-gradient(150deg,#C9A227,#7A5E12)}
/* Neun Kacheln passen nicht mehr in fuenf feste Spalten. Auto-fit legt
   um, statt die Kacheln zu quetschen. */
.regions{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}

/* Suchprofil und Einwilligungen im Konto.
   ------------------------------------------------------------------
   Die Haken lagen vorher auf einer Klasse, die es gar nicht gab -- sie
   standen dadurch ohne Abstand untereinander. Sie benutzen jetzt
   dieselben Chips wie das Anfrageformular, damit beide Formulare gleich
   aussehen. */
.konto-form .feld-block{padding:18px 20px 20px}
.konto-form .feld-block h3{font-size:17px;margin:0 0 4px}
.konto-form .feld-block .mk-raster{margin-top:14px}
/* Jede Gruppe innerhalb eines Blocks bekommt Luft nach oben -- ohne sie
   verschwimmen "Regionen", "Objektart" und "Was ist Ihnen wichtig?" zu
   einem einzigen Feld aus Chips. */
.konto-form fieldset.wunsch-liste{border:0;padding:0;margin:16px 0 0}
.konto-form fieldset.wunsch-liste.gruppe{margin-top:22px;padding-top:18px;
  border-top:1px solid var(--line)}
.konto-form fieldset.wunsch-liste legend{font-size:13.5px;font-weight:700;color:var(--ink);
  padding:0 0 10px;letter-spacing:0}
/* Themen tragen ganze Saetze -- als runde Pille waeren sie zu breit fuer
   eine Reihe und wuerden einzeln umbrechen. */
.wunsch-breit{border-radius:12px;width:100%;justify-content:flex-start}
@media(min-width:760px){.wunsch-breit{width:calc(50% - 4px)}}

/* Einwilligungszeile: hier steht ein Rechtstext, keine Auswahl -- der
   gehoert lesbar gesetzt und nicht in eine Pille gequetscht. */
.optin-zeile{display:flex;align-items:flex-start;gap:11px;cursor:pointer;
  font-size:14px;line-height:1.5;color:var(--ink);margin-top:12px;max-width:76ch}
.optin-zeile input{width:17px;height:17px;margin:2px 0 0;flex:none;accent-color:var(--teal)}
.optin-zeile.pflicht b{color:var(--terra)}

/* Chips im Anfrage- und Kontoformular sind Labels und erben sonst die
   Versalien der Feldbeschriftungen -- "GEHOBENE AUSSTATTUNG" liest sich
   als Ueberschrift, nicht als Auswahl. Gleiche Spezifitaet wie die
   Label-Regel, deshalb hier und nicht weiter oben. */
.anfrage .wunsch,.konto-form .wunsch{display:inline-flex;font-size:14px;font-weight:500;
  letter-spacing:0;text-transform:none;color:var(--ink);margin-bottom:0}
.anfrage .wunsch span,.konto-form .wunsch span{text-transform:none;letter-spacing:0}
.anfrage .optin-zeile,.konto-form .optin-zeile{display:flex;font-size:14px;font-weight:400;
  letter-spacing:0;text-transform:none;color:var(--ink);margin-bottom:0}

/* Anbieterkreis in der Preisbox: Logo eingepasst, Portraet fuellend.
   Ein Logo im Kreis zu beschneiden macht aus einem Schriftzug einen
   Buchstabensalat -- deshalb contain auf hellem Grund, waehrend ein
   Portraet den Kreis wie gewohnt ausfuellt. */
.broker .av{overflow:hidden;display:grid;place-items:center}
.broker .av-logo{background:var(--card);border:1px solid var(--line);padding:5px}
.broker .av-logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.broker .av-foto{background:var(--paper-2)}
.broker .av-foto img{width:100%;height:100%;object-fit:cover}

/* Anbieterangaben zweispaltig: links die Anschrift, rechts Telefon,
   Webseite und Erlaubnis. Beide Listen behalten ihr Beschriftungsraster,
   nur stehen sie jetzt nebeneinander -- das halbiert die Hoehe des
   Kastens, weil die Anschrift ohnehin drei Zeilen braucht. */
.mk-spalten{display:grid;grid-template-columns:1fr 1fr;gap:6px 28px;align-items:start}
.mk-spalten .mk-daten{margin-bottom:14px}
/* Nur eine Liste vorhanden (kein Makler mit Anschrift): dann darf sie
   die volle Breite nehmen, statt eine leere Spalte offenzulassen. */
.mk-spalten .mk-daten:only-child{grid-column:1 / -1}
@media(max-width:640px){.mk-spalten{grid-template-columns:1fr;gap:0}}

/* Anfragen im Maklerbereich.
   ------------------------------------------------------------------ */
.anfragen-kopf{display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px;flex-wrap:wrap;margin-bottom:18px}
.anfragen-hinweis{color:var(--muted);font-size:14px;margin-top:6px;max-width:70ch}
/* Unbearbeitete Anfragen faerben den Reiterzaehler -- eine graue Zahl
   sagt nicht, dass etwas liegen geblieben ist. */
.mk-tabs .zahl.neu{background:var(--terra);color:#fff}
.anfragen-tabelle td{vertical-align:top}
.anfragen-tabelle .nowrap{white-space:nowrap}
.anfragen-tabelle .nachricht{max-width:34ch;font-size:13.5px;line-height:1.5}
.anfragen-tabelle small{color:var(--muted)}
.anfragen-tabelle .btn-klein{padding:7px 14px;font-size:13px;white-space:nowrap}
/* Die neue Anfrage steht optisch vorn, ohne dass die Zeile schreit. */
.anfragen-tabelle tr.hervor{background:rgba(181,86,47,.05)}
.anfragen-tabelle tr.hervor td:first-child{box-shadow:inset 3px 0 0 var(--terra)}

/* Bestandstabelle: Preis, Lage-Score und dessen Aufschluesselung.
   ------------------------------------------------------------------ */
.tabelle th.rechts,.tabelle td.rechts{text-align:right}
.tabelle th.mitte,.tabelle td.mitte{text-align:center}
/* Ziffern in gleicher Breite: nur so stehen die Tausenderstellen
   untereinander und die Spalte laesst sich ueberfliegen. */
.preis-zelle{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}

/* Der Score als Pille, Farbe nach Stufe. Die Zahl allein sagt nicht, ob
   80 gut oder mittelmaessig ist -- die Farbe ordnet sie ein. */
.score-zelle{position:relative}
.score-pille{display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;padding:5px 10px;border-radius:100px;font-size:13.5px;font-weight:700;
  font-variant-numeric:tabular-nums;cursor:default;color:#fff}
.score-pille.spitze{background:#2F6F4F}
.score-pille.sehr-gut{background:#3E7C5A}
.score-pille.gut{background:#5E8F6E}
.score-pille.mittel{background:#CF8A4E}
.score-pille.einfach{background:#B5562F}
.score-pille.leer{background:rgba(20,34,38,.08);color:var(--muted)}
.score-pille:focus-visible{outline:2px solid var(--sand);outline-offset:2px}

/* Die Aufschluesselung faehrt bei Hover oder Tastaturfokus auf -- ohne
   JavaScript, damit sie auch dann da ist, wenn Skripte scheitern. */
.score-karte{position:absolute;z-index:40;right:0;top:calc(100% + 8px);width:330px;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 24px 50px -22px rgba(6,38,47,.55);padding:14px 16px;
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .15s,transform .15s,visibility .15s;text-align:left;pointer-events:none}
.score-zelle:hover .score-karte,
.score-zelle:focus-within .score-karte{opacity:1;visibility:visible;transform:translateY(0)}
/* In den letzten Zeilen nach oben aufklappen, sonst steht die Karte
   unter dem Tabellenrand. */
.bestand-tabelle tbody tr:nth-last-child(-n+3) .score-karte{top:auto;bottom:calc(100% + 8px)}
.sk-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding-bottom:9px;margin-bottom:9px;border-bottom:1px solid var(--line)}
.sk-kopf b{font-size:15px;color:var(--ink)}
.sk-kopf span{font-size:12px;font-weight:600;color:var(--muted)}
.sk-tabelle{width:100%;border-collapse:collapse;font-size:12.5px}
.sk-tabelle td{padding:4px 0;border:0;color:var(--ink);vertical-align:middle}
.sk-tabelle .sk-roh{color:var(--muted);padding-left:8px;white-space:nowrap}
.sk-tabelle .sk-balken{width:64px;padding-left:10px}
.sk-tabelle .sk-balken i{display:block;height:5px;border-radius:3px;background:var(--teal);
  min-width:2px}
.sk-tabelle .sk-punkte{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;
  padding-left:10px;white-space:nowrap}
.sk-fuss{margin:9px 0 0;font-size:11.5px;color:var(--muted);line-height:1.45}
@media(max-width:700px){.score-karte{width:260px;right:-8px}}

/* Tarife im Maklerbereich.
   ------------------------------------------------------------------ */
.tarif-stand{display:flex;align-items:center;justify-content:space-between;gap:24px;
  flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:20px 24px;margin-bottom:22px}
.tarif-stand h3{font-size:24px;margin:6px 0 4px}
.tarif-stand p{color:var(--muted);font-size:14px}
.tarif-balken{position:relative;width:220px;height:10px;border-radius:5px;
  background:rgba(20,34,38,.09);flex:none}
.tarif-balken i{display:block;height:100%;border-radius:5px;background:var(--teal)}
.tarif-balken i.knapp{background:var(--sand)}
.tarif-balken i.voll{background:var(--terra)}
.tarif-balken span{position:absolute;right:0;top:16px;font-size:12px;color:var(--muted)}

.tarif-karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.tarif-karte{position:relative;display:flex;flex-direction:column;background:var(--card);
  border:1px solid var(--line);border-radius:18px;padding:24px 22px}
/* Der eigene Tarif traegt die Farbe, der empfohlene nur einen Rahmen --
   sonst konkurrieren zwei Karten um dieselbe Aufmerksamkeit. */
.tarif-karte.aktuell{border-color:var(--sea);box-shadow:0 0 0 1px var(--sea)}
.tarif-karte.empfohlen{border-color:var(--sand)}
.tarif-band{position:absolute;top:-11px;left:22px;background:var(--sea);color:#fff;
  font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 11px;border-radius:100px}
.tarif-band.empfehlung{background:var(--sand)}
.tarif-karte h4{font-family:"Fraunces",Georgia,serif;font-size:21px;font-weight:500;margin:2px 0 8px}
.tarif-preis{display:flex;align-items:baseline;gap:7px;margin-bottom:10px}
.tarif-preis b{font-size:30px;font-weight:600;color:var(--ink)}
.tarif-preis span{font-size:13px;color:var(--muted)}
.tarif-kurz{font-size:14px;color:var(--muted);line-height:1.5;margin-bottom:14px}
.tarif-limit{font-size:13.5px;font-weight:700;color:var(--teal);padding:9px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:14px}
.tarif-liste{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:9px;flex:1}
.tarif-liste li{position:relative;padding-left:22px;font-size:14px;line-height:1.5;color:var(--ink)}
.tarif-liste li:before{content:"\2713";position:absolute;left:0;top:0;color:var(--good);font-weight:700}
.tarif-knopf{width:100%;text-align:center;display:block}

/* Kontomenue unter dem Logo.
   ------------------------------------------------------------------
   Aufgeklappt wird ueber :target -- ohne Skript. Die Flaeche .km-zu
   liegt hinter der Klappe und faengt den Klick daneben ab, damit sich
   das Menue wieder schliesst. */
.konto-menue{position:relative}
.km-schalter{display:inline-flex;align-items:center;gap:8px;padding:5px 10px 5px 5px;
  border:1px solid var(--line);border-radius:100px;background:var(--card);
  text-decoration:none;color:var(--ink)}
.km-schalter:hover{border-color:rgba(20,34,38,.26)}
.km-initialen{width:34px;height:34px;border-radius:50%;background:var(--sea);color:#fff;
  display:grid;place-items:center;font-size:13px;font-weight:700;flex:none}
.km-pfeil{font-size:11px;color:var(--muted)}
.km-zu{display:none}
.km-klappe{position:absolute;right:0;top:calc(100% + 8px);z-index:60;width:250px;
  background:var(--card);border:1px solid var(--line);border-radius:14px;padding:6px;
  box-shadow:0 24px 50px -22px rgba(6,38,47,.5);
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .14s,transform .14s,visibility .14s}
.konto-menue:target .km-klappe,.konto-menue:hover .km-klappe,
.konto-menue:focus-within .km-klappe{opacity:1;visibility:visible;transform:translateY(0)}
.konto-menue:target .km-zu{display:block;position:fixed;inset:0;z-index:50}
.km-kopf{padding:10px 12px 12px;border-bottom:1px solid var(--line);margin-bottom:6px;
  display:grid;gap:2px}
.km-kopf b{font-size:14.5px;color:var(--ink)}
.km-kopf span{font-size:12.5px;color:var(--muted);overflow-wrap:anywhere}
.km-punkt{display:block;padding:10px 12px;border-radius:9px;font-size:14px;
  color:var(--ink);text-decoration:none}
.km-punkt:hover{background:var(--paper)}
.km-punkt.an{background:rgba(23,97,111,.1);color:var(--teal);font-weight:600}
.km-abmelden{border-top:1px solid var(--line);margin-top:6px;padding-top:6px}
.km-abmelden button{width:100%;text-align:left;padding:10px 12px;border:0;border-radius:9px;
  background:none;font:inherit;font-size:14px;color:var(--terra);cursor:pointer}
.km-abmelden button:hover{background:rgba(181,86,47,.08)}

/* Rechnungen und Sicherheit */
.rg-status{display:inline-block;padding:4px 11px;border-radius:100px;font-size:12.5px;
  font-weight:700}
.rg-status.offen{background:rgba(20,34,38,.08);color:var(--muted)}
.rg-status.faellig{background:rgba(207,138,78,.16);color:#8A5320}
.rg-status.bezahlt{background:rgba(62,124,90,.14);color:var(--good)}
.rg-status.storniert{background:rgba(181,86,47,.12);color:var(--terra)}
.rg-ohne{font-size:12.5px;color:var(--muted)}
.sicher-karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:22px}
.sicher-stand{display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  font-size:14px;font-weight:600}
.sicher-stand .punkt{width:9px;height:9px;border-radius:50%;background:var(--muted)}
.sicher-stand.an{color:var(--good)}
.sicher-stand.an .punkt{background:var(--good)}
.sicher-stand.aus{color:var(--terra)}
.sicher-stand.aus .punkt{background:var(--terra)}
/* Zwischenueberschrift in einem Formularblock */
.feld-trenner{margin:26px 0 4px;padding-top:20px;border-top:1px solid var(--line);
  font-size:16px;font-weight:600;color:var(--ink)}

/* Anbieter-Impressum */
.imp-kopf{display:flex;align-items:center;gap:20px;margin:22px 0 18px;flex-wrap:wrap}
.imp-logo{max-width:150px;max-height:70px;width:auto;height:auto;object-fit:contain}
.imp-kopf h1{font-size:32px;margin:8px 0 6px}
.imp-kopf p{color:var(--muted);font-size:14px}
.imp-intro{font-size:16px;line-height:1.65;color:var(--ink);max-width:70ch;margin-bottom:24px}
.imp-daten{display:grid;grid-template-columns:200px 1fr;gap:12px 24px;font-size:14.5px;margin:6px 0}
.imp-daten dt{color:var(--muted);font-weight:600}
.imp-daten dd{margin:0;color:var(--ink)}
@media(max-width:620px){.imp-daten{grid-template-columns:1fr;gap:2px 0}
  .imp-daten dd{margin-bottom:12px}}

/* Merken, Teilen, Drucken auf der Objektseite.
   ------------------------------------------------------------------ */
.obj-aktionen{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.obj-knopf{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  flex:1 1 0;min-width:104px;padding:10px 12px;border:1px solid var(--line);
  border-radius:12px;background:var(--card);color:var(--ink);font-size:13.5px;
  font-weight:600;cursor:pointer;text-decoration:none;font-family:inherit;
  transition:border-color .15s,background .15s,color .15s}
.obj-knopf:hover{border-color:rgba(20,34,38,.28);background:var(--paper)}
.ok-symbol{width:17px;height:17px;display:grid;place-items:center;flex:none}
.ok-symbol svg{width:17px;height:17px}
/* Gemerkt ist ein Zustand, kein Anstoss -- deshalb gefuellt statt nur
   umrandet. */
.obj-knopf.merken.an{background:rgba(181,86,47,.1);border-color:var(--terra);color:var(--terra)}
.merk-form{flex:1 1 0;display:flex}
.merk-form .obj-knopf{width:100%}

.teilen{position:relative;flex:1 1 0;display:flex}
.teilen .obj-knopf{width:100%}
.teilen-zu{display:none}
.teilen-klappe{position:absolute;z-index:40;left:auto;right:0;top:calc(100% + 6px);
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:5px;
  box-shadow:0 20px 44px -20px rgba(6,38,47,.5);
  /* min-width gewann frueher gegen left/right: war der Knopf schmaler
     als 190px -- auf dem Telefon der Normalfall --, ragte die Klappe
     ueber den rechten Rand und die ganze Objektseite liess sich
     seitwaerts schieben. Jetzt haelt sie sich an das Fenster. */
  min-width:min(190px,calc(100vw - 40px));
  max-width:calc(100vw - 40px);
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .14s,transform .14s,visibility .14s}
.teilen:target .teilen-klappe,.teilen:hover .teilen-klappe,
.teilen:focus-within .teilen-klappe{opacity:1;visibility:visible;transform:translateY(0)}
.teilen:target .teilen-zu{display:block;position:fixed;inset:0;z-index:30}
.teilen-punkt{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;
  border:0;border-radius:9px;background:none;font:inherit;font-size:14px;
  color:var(--ink);text-decoration:none;cursor:pointer;text-align:left}
.teilen-punkt:hover{background:var(--paper)}
.tp-symbol{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;
  font-size:13px;font-weight:700;color:#fff;flex:none}
.tp-symbol.wa{background:#25D366}
.tp-symbol.fb{background:#1877F2}
.tp-symbol.mail{background:var(--teal)}
.tp-symbol.kopie{background:var(--muted)}

/* Drucklayout: was auf Papier nichts verloren hat, faellt weg.
   Karten, Formulare und Navigation kosten Tinte und sagen nichts. */
@media print{
  nav,footer,.obj-aktionen,.modal,.gallery .glabel,.galerie-leiste,
  .karte-oeffnen,.det-boxen,.aehnlich,.welle,.back,.lightbox{display:none !important}
  body{background:#fff}
  .box,.lage,.pricebox{border:1px solid #ccc !important;box-shadow:none !important;
    break-inside:avoid}
  .det-body{display:block}
  .det-seite{margin-top:20px}
  a[href^="http"]:after{content:" (" attr(href) ")";font-size:10px;color:#666}
  .gesperrt-overlay,.gesperrt-attrappe{display:none !important}
}

/* Nachfrage je Objekt in der Bestandstabelle. Drei Zahlen statt einer
   Summe: Aufruf ist Neugier, Merken ist Absicht, Teilen ist Empfehlung. */
.nachfrage-zelle{white-space:nowrap}
.nf{display:inline-flex;align-items:center;gap:7px;font-variant-numeric:tabular-nums}
.nf b{font-size:14px;font-weight:700;color:var(--ink)}
.nf i{font-style:normal;font-size:12px;font-weight:700;padding:2px 7px;border-radius:100px}
.nf-merk{background:rgba(181,86,47,.12);color:var(--terra)}
.nf-teil{background:rgba(23,97,111,.12);color:var(--teal)}
.nf-leer{color:var(--muted)}

/* Importprotokoll: gekuerzte Dateinamen, Fehler im Fenster.
   ------------------------------------------------------------------ */
.protokoll-tabelle .datei-zelle{max-width:26ch;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-size:13px;cursor:help}
.protokoll-tabelle small{color:var(--muted)}
/* Die Fehlerzahl ist anklickbar und sieht auch so aus -- vorher war sie
   ein Detail-Aufklapper, der die Tabelle auseinanderschob. */
.fehler-zahl{display:inline-grid;place-items:center;min-width:28px;height:26px;padding:0 8px;
  border-radius:100px;background:rgba(181,86,47,.12);color:var(--terra);
  font-size:13px;font-weight:700;text-decoration:none}
.fehler-zahl:hover{background:rgba(181,86,47,.2)}
.fehler-tabelle{width:100%;font-size:13.5px}
.fehler-tabelle td{vertical-align:top;line-height:1.5}
.fehler-stufe{display:inline-block;padding:2px 9px;border-radius:100px;font-size:11.5px;
  font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  background:rgba(20,34,38,.08);color:var(--muted)}
.fehler-stufe.fehler,.fehler-stufe.error{background:rgba(181,86,47,.14);color:var(--terra)}
.fehler-stufe.warnung,.fehler-stufe.warning{background:rgba(207,138,78,.18);color:#8A5320}

/* ---------------- Cookie-Einwilligung ---------------- */
/*
   Unten angeheftet statt bildschirmfuellend: das Fenster fragt etwas,
   es sperrt nicht aus. Wer erst lesen will, worum es hier ueberhaupt
   geht, soll das koennen, ohne vorher eine Entscheidung zu treffen --
   ein Schleier ueber der ganzen Seite draengt genau dazu.
*/
.cookie-schicht{position:fixed;left:0;right:0;bottom:0;z-index:130;padding:16px;
  display:grid;justify-items:center;
  animation:cookie-auf .22s ease-out both}
@keyframes cookie-auf{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.cookie-schicht.weg{opacity:0;transform:translateY(12px);transition:opacity .18s,transform .18s}
.cookie-karte{background:var(--card);border:1px solid var(--line);border-radius:18px;
  box-shadow:0 30px 60px -24px rgba(6,38,47,.55);
  padding:20px 22px;width:min(680px,100%)}
.cookie-karte h2{font-size:20px;margin:2px 0 8px}
.cookie-karte p{font-size:14px;line-height:1.6;color:var(--muted);margin:0;max-width:70ch}
.cookie-karte a{color:var(--teal)}
.cookie-stand{margin-top:10px !important;font-size:13px !important}
.cookie-stand b{color:var(--ink)}
.cookie-knoepfe{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
/* Beide Knoepfe gleich breit und gleich erreichbar: Ablehnen darf nicht
   schwerer fallen als Zustimmen. */
.cookie-knoepfe form{flex:1 1 200px}
.cookie-knoepfe .btn{width:100%}

@media (max-width:560px){
  .cookie-karte{padding:18px}
  .cookie-karte p{font-size:13.5px}
}

@media (prefers-reduced-motion:reduce){
  .cookie-schicht{animation:none}
  .cookie-schicht.weg{transition:none}
}

/* ---------------- Lage-Analyse ---------------- */
.la-kopf{padding-top:38px;max-width:74ch}
.la-kopf h1{margin:6px 0 10px}
.la-kopf .lede{color:var(--muted);font-size:16px;line-height:1.65;max-width:66ch}
/* Ueber die volle Breite -- genauer: ueber die volle Breite des Rasters,
   nicht des Fensters. Die 1200px sind der Wert von .wrap; "none" haette
   den Kopf aus der Flucht der Boxen darunter herausgezogen und links am
   Fensterrand kleben lassen.
   Die Zeilenlaenge waechst damit ueber die sonst uebliche Lesebreite
   hinaus; deshalb steht es an den Seiten, die es haben sollen, und
   nicht als Voreinstellung. */
.la-kopf.breit{max-width:1200px}
.la-kopf.breit .lede{max-width:none}

/* Zwischenstand links, Fragebogen rechts: die Zahl soll im Blick
   bleiben, während man antwortet -- sie ist der Grund weiterzumachen. */
.la-buehne{display:grid;grid-template-columns:1fr;gap:28px;align-items:start;
  margin-top:26px;margin-bottom:40px}
/* Die zweite Spalte erst, wenn der Zwischenstand wirklich dasteht:
   sonst reserviert das Raster 270 Pixel fuer ein verstecktes Element
   und quetscht den Fragebogen daneben zusammen. Ohne Skript gibt es
   keinen Zwischenstand -- und dann auch keine leere Spalte. */
.la-buehne.mit-stand{grid-template-columns:270px 1fr}
.la-stand{position:sticky;top:20px;background:var(--card);border:1px solid var(--line);
  border-radius:18px;padding:20px}
.la-stand-zahl{display:flex;align-items:baseline;gap:4px;margin-top:6px}
.la-stand-zahl b{font:600 44px/1 "Fraunces";color:var(--sea)}
.la-stand-zahl small{color:var(--muted);font-size:15px}
.la-stand-einstufung{font-weight:600;color:var(--ink);margin-top:2px;min-height:1.4em}
.la-stand-balken{height:8px;border-radius:99px;background:rgba(20,34,38,.08);margin:12px 0 14px;
  overflow:hidden}
.la-stand-balken i{display:block;height:100%;border-radius:99px;background:var(--teal);
  transition:width .5s ease-out}
.la-stand-genau{font-size:12.5px;color:var(--muted);margin:0;line-height:1.55}
.la-stand.stufe-sehr-gut .la-stand-balken i{background:var(--good)}
.la-stand.stufe-mittel .la-stand-balken i{background:#C08A2E}
.la-stand.stufe-schwach .la-stand-balken i{background:var(--warn)}

.la-formular{background:var(--card);border:1px solid var(--line);border-radius:20px;
  padding:24px 26px 26px}
.la-fortschritt{display:flex;gap:8px;margin-bottom:22px;flex-wrap:wrap}
.la-punkt{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font-size:13px;font-weight:600;background:rgba(20,34,38,.06);color:var(--muted);
  border:1px solid transparent}
.la-punkt.an{background:var(--sea);color:#fff}
.la-punkt.erledigt{background:rgba(23,97,111,.14);color:var(--teal);cursor:pointer}
.la-punkt.erledigt:hover{border-color:var(--teal)}

.la-schritt{border:0;padding:0;margin:0}
.la-zaehler{font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--terra);
  margin:0 0 4px;font-weight:600}
.la-schritt h2{font-size:24px;margin:0 0 8px}
.la-lede{color:var(--muted);font-size:14.5px;line-height:1.6;margin:0 0 22px;max-width:64ch}

.la-feld{margin-bottom:20px}
.la-label{display:block;font-weight:600;font-size:14.5px;margin-bottom:8px}
.la-frei{font-weight:400;font-size:12px;color:var(--muted);margin-left:6px}
.la-hinweis{font-size:12.5px;color:var(--muted);margin:6px 0 0;line-height:1.5}
.la-feld input[type=text],.la-feld input[type=number],.la-feld select{
  width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:12px;
  background:var(--paper);font:500 15px "Hanken Grotesk";color:var(--ink)}
.la-feld input:focus,.la-feld select:focus{outline:2px solid var(--teal);outline-offset:1px;
  border-color:transparent}
.la-zahl{display:flex;align-items:center;gap:10px;max-width:280px}
.la-einheit{color:var(--muted);font-size:14px;flex:none}

/* Kacheln: echte Radiofelder, sichtbar ist das Label. */
.la-kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.la-kachel{position:relative;display:block;cursor:pointer}

/* Das hidden-Attribut muss gewinnen.
   Es setzt display:none nur ueber das Browser-Standardblatt, und das
   hat weniger Gewicht als jede Klassenregel -- die Kacheln haben eine
   (display:block, weiter unten sogar display:grid). Ohne diese Zeilen
   blendet das Skript aus, was nicht zur Gebaeudeart passt, und es
   steht trotzdem da: bei "Wohnung" waren Haus und Villa weiter
   sichtbar. */
.la-kachel[hidden],
.la-feld[hidden],
.la-feld-kacheln .la-kachel[hidden]{display:none}

/* Ein Feld, das erst durch eine andere Antwort erscheint, soll nicht
   hereinspringen -- es wirkt sonst wie ein Fehler. */
@media (prefers-reduced-motion:no-preference){
  .la-feld[data-zeigen-wenn]:not([hidden]){animation:la-auf .18s ease-out}
}
@keyframes la-auf{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.la-kachel input{position:absolute;opacity:0;width:1px;height:1px}
.la-kachel span{display:block;padding:13px 14px;border:1px solid var(--line);border-radius:14px;
  background:var(--paper);font-weight:500;font-size:14.5px;text-align:center;
  transition:border-color .12s,background .12s}
.la-kachel:hover span{border-color:var(--teal)}
.la-kachel.an span{border-color:var(--sea);background:rgba(10,59,71,.06);
  box-shadow:inset 0 0 0 1px var(--sea)}
.la-kachel input:focus-visible+span{outline:2px solid var(--teal);outline-offset:2px}

.la-chips{display:flex;flex-wrap:wrap;gap:8px}
.la-chip{position:relative;cursor:pointer}
.la-chip input{position:absolute;opacity:0;width:1px;height:1px}
.la-chip span{display:inline-block;padding:9px 15px;border:1px solid var(--line);
  border-radius:99px;background:var(--paper);font-size:14px;text-align:center}
.la-chip:hover span{border-color:var(--teal)}
.la-chip.an span{background:var(--sea);color:#fff;border-color:var(--sea)}
.la-chip input:focus-visible+span{outline:2px solid var(--teal);outline-offset:2px}

.la-ortsuche{position:relative}
.la-vorschlaege{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:20;
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:4px;
  list-style:none;margin:0;box-shadow:0 20px 40px -20px rgba(6,38,47,.5);max-height:260px;
  overflow-y:auto}
.la-vorschlaege li{padding:9px 11px;border-radius:9px;cursor:pointer;font-size:14px}
.la-vorschlaege li:hover{background:rgba(23,97,111,.08);color:var(--teal)}
.la-karte{margin-top:12px}
.la-karte-flaeche{height:260px;border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.la-karte-hinweis{font-size:12.5px;color:var(--muted);margin:8px 0 0;line-height:1.5}

.la-knoepfe{display:flex;align-items:center;gap:10px;margin-top:26px;flex-wrap:wrap}
.la-ueberspringen{background:none;border:0;color:var(--muted);font:500 13.5px "Hanken Grotesk";
  cursor:pointer;text-decoration:underline;padding:8px}
.la-ueberspringen:hover{color:var(--teal)}
.la-form[aria-busy=true]{opacity:.6;pointer-events:none}

.la-erklaerung{margin-bottom:48px}
.la-erkl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;
  margin:16px 0}
.la-erkl{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px}
.la-erkl-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  margin-bottom:6px}
.la-erkl-kopf span{color:var(--terra);font-weight:600;font-size:13px}
.la-erkl p{font-size:13.5px;color:var(--muted);line-height:1.55;margin:0}

/* --- Ergebnis --- */
.la-erg-kopf{padding-top:38px}
.la-erg-kopf h1{margin:6px 0 0}
.la-erg-karte{background:var(--card);border:1px solid var(--line);border-radius:20px;
  padding:28px;margin:20px 0 26px}
.la-erg-zahl{display:flex;align-items:center;gap:30px;flex-wrap:wrap}

/* Ring statt Balken: eine einzelne Zahl in einem Kreis liest sich als
   Bewertung, ein Balken als Fortschritt. */
.la-ring{--anteil:0;width:132px;height:132px;border-radius:50%;flex:none;
  display:grid;place-items:center;position:relative;
  background:conic-gradient(var(--sea) calc(var(--anteil)*1%),rgba(20,34,38,.08) 0)}
.la-ring::before{content:"";position:absolute;inset:11px;border-radius:50%;background:var(--card)}
.la-ring b{position:relative;font:600 40px/1 "Fraunces";color:var(--sea)}
.la-ring small{position:relative;color:var(--muted);font-size:12px;margin-top:2px}
.stufe-sehr-gut .la-ring{background:conic-gradient(var(--good) calc(var(--anteil)*1%),rgba(20,34,38,.08) 0)}
.stufe-sehr-gut .la-ring b{color:var(--good)}
.stufe-mittel .la-ring{background:conic-gradient(#C08A2E calc(var(--anteil)*1%),rgba(20,34,38,.08) 0)}
.stufe-mittel .la-ring b{color:#8A6220}
.stufe-schwach .la-ring{background:conic-gradient(var(--warn) calc(var(--anteil)*1%),rgba(20,34,38,.08) 0)}
.stufe-schwach .la-ring b{color:var(--warn)}
.la-erg-text{flex:1 1 320px}
.la-erg-text h2{margin:0 0 8px;font-size:26px}
.la-erg-text p{color:var(--muted);line-height:1.6;margin:0 0 12px;max-width:60ch}
.la-erg-meta{display:flex;gap:14px;align-items:center;font-size:13px;color:var(--muted);
  flex-wrap:wrap}
.la-warnungen{margin-top:20px;display:grid;gap:10px}

/* Untereinander statt nebeneinander: die Faktorentabelle hat vier
   Spalten, davon zwei mit Text ("30 km Pula") und eine mit Balken. In
   einer halbierten Breite wurde die Beitragsspalte abgeschnitten, und
   waagerecht scrollen muessen ist auf dem Schreibtisch keine Loesung. */
.la-erg-spalten{display:grid;grid-template-columns:1fr;gap:20px;margin-bottom:26px}
/* Ohne das wachsen Rasterfelder mit ihrem Inhalt (min-width:auto) und
   schieben die ganze Seite seitlich hinaus, statt innen zu scrollen. */
.la-erg-spalten>*{min-width:0}
.la-box{position:relative}
.la-box.gesperrt{overflow:hidden}
.la-box-lede{color:var(--muted);font-size:13.5px;line-height:1.6;margin:0 0 16px;max-width:58ch}
.la-unter{margin:22px 0 10px;font-size:15px}
.la-faktoren{width:100%}
.la-faktoren td,.la-faktoren th{vertical-align:middle;padding-left:8px;padding-right:8px}
.la-faktoren td:first-child,.la-faktoren th:first-child{padding-left:0}
.la-faktoren td:last-child,.la-faktoren th:last-child{padding-right:0}
/* Der Balken schrumpft mit: in der schmalen Spalte des Ergebnisses
   drueckte er die Beitragszahl sonst aus dem Kasten heraus. */
.la-beitrag{display:flex;align-items:center;gap:6px;justify-content:flex-end}
.la-beitrag i{display:block;height:6px;border-radius:99px;background:var(--teal);min-width:2px;
  max-width:44px;flex:0 1 44px}
.la-beitrag span{font-variant-numeric:tabular-nums;min-width:34px;text-align:right;flex:none}
/* Reicht es trotzdem nicht, scrollt die Tabelle in ihrem eigenen
   Rahmen -- abgeschnitten wird sie nicht, und die Seite bekommt keinen
   waagerechten Rollbalken. */
/* Der Scrollrahmen wirkt nur, wenn seine Vorfahren schmaler werden
   duerfen. Ein Grid- oder Flex-Kind hat von sich aus min-width:auto und
   schrumpft nie unter seinen breitesten Inhalt -- die Tabelle traegt
   min-width:680px, also wurde die ganze Karte 680 breit und die
   Kontoseite auf dem Telefon 730 statt 402. Diese Zeile ist der
   eigentliche Fix, overflow-x allein genuegt nicht. */
.la-tabelle-scroll{overflow-x:auto;max-width:100%}
.ka-analysen,
.ka-analysen > *,
.la-erg-spalten > *,
.box-stapel > *{min-width:0}
.la-kennzahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;
  margin:0}
.la-kennzahlen div{background:var(--paper);border-radius:12px;padding:10px 12px}
.la-kennzahlen dt{font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.la-kennzahlen dd{margin:2px 0 0;font-weight:600}

.la-befunde{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.la-befund{border-left:3px solid var(--line);padding:2px 0 2px 14px}
.la-befund.art-gut{border-color:var(--good)}
.la-befund.art-mittel{border-color:#C08A2E}
.la-befund.art-schlecht{border-color:var(--warn)}
.la-befund-kopf{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.la-marke{font-size:12px;padding:2px 9px;border-radius:99px;background:rgba(20,34,38,.06);
  color:var(--muted)}
.art-gut .la-marke{background:rgba(62,124,90,.14);color:var(--good)}
.art-mittel .la-marke{background:rgba(192,138,46,.16);color:#8A6220}
.art-schlecht .la-marke{background:rgba(181,86,47,.14);color:var(--warn)}
.la-befund p{font-size:13.5px;color:var(--muted);line-height:1.55;margin:4px 0 0}

/* Attrappe: die Form der Inhalte, ohne die Werte. */
.attrappe{pointer-events:none;user-select:none}
.platzhalter{display:inline-block;height:9px;border-radius:99px;
  background:linear-gradient(90deg,rgba(20,34,38,.10),rgba(20,34,38,.05));vertical-align:middle}
.la-befund p .platzhalter{margin-top:5px}

.la-quellen{margin-bottom:48px}
.la-quellen ul{color:var(--muted);font-size:13.5px;line-height:1.7;margin:10px 0 14px;
  padding-left:20px}
.la-abschluss{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}

@media (max-width:900px){
  .la-buehne{grid-template-columns:1fr}
  /* Der Zwischenstand rutscht über den Fragebogen und bleibt oben
     kleben -- neben ihm ist auf dem Telefon kein Platz. */
  .la-stand{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:16px;
    flex-wrap:wrap;border-radius:14px}
  .la-stand .eyebrow{width:100%}
  .la-stand-balken{flex:1 1 120px;margin:0}
  .la-stand-genau{width:100%}
  .la-formular{padding:18px}
  .la-erg-zahl{gap:20px}
}

/* Lage-Analysen im Konto */
.ka-analysen{display:grid;gap:16px}
.ka-analyse-kopf{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.ka-analyse-kopf .la-ring{width:88px;height:88px}
.ka-analyse-kopf .la-ring::before{inset:8px}
.ka-analyse-kopf .la-ring b{font-size:26px}
.ka-analyse-kopf h3{margin:0 0 4px}
.ka-analyse-meta{font-size:13px;color:var(--muted);margin:0}
.ka-analyse-objekt{font-size:13px;color:var(--muted);margin:4px 0 0}

/* Die ziehbare Nadel in der Lage-Analyse: derselbe Zeiger wie in den
   Karten, aber sichtbar als etwas, das man anfassen kann. */
.nadel-zieh{cursor:grab;filter:drop-shadow(0 3px 6px rgba(6,38,47,.35))}
.nadel-zieh:active{cursor:grabbing}

/* Passwort vergessen: das Feld klappt unter dem Anmeldeformular auf,
   statt auf eine eigene Seite zu springen -- die schon eingetippte
   E-Mail-Adresse bliebe dabei zurueck. Ohne Skript, ueber :target. */
.login-vergessen{margin:14px 0 0;text-align:center;font-size:13.5px}
.login-vergessen a{color:var(--muted);text-decoration:underline}
.login-vergessen a:hover{color:var(--teal)}
.pw-vergessen{display:none;margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
.pw-vergessen:target{display:block}
.pw-vergessen h3{font-size:17px;margin:0 0 6px}

/* Lage-Analyse: Nachtraege */
.la-erkannt{color:var(--muted);font-size:14px;margin:8px 0 0}
.la-erkannt b{color:var(--ink)}

/* Maklerempfehlung am Ende des Ergebnisses */
.la-empfehlung{background:var(--card);border:1px solid var(--line);border-radius:20px;
  padding:26px 28px;margin-bottom:26px;border-left:4px solid var(--terra)}
.la-empfehlung.erledigt{border-left-color:var(--good)}
.la-empfehlung h3{font-size:21px;margin:6px 0 8px}
/* Ueber die volle Breite der Box: die Zeilenbegrenzung stammt aus dem
   Fliesstext der uebrigen Seite, hier steht der Text aber allein in
   einem eigenen Kasten -- dann wirkt die halb leere rechte Haelfte wie
   ein Fehler. */
.la-empfehlung>p{color:var(--muted);line-height:1.65;margin:0 0 18px}
.la-emp-felder{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.la-emp-form textarea{width:100%;padding:11px 13px;border:1px solid var(--line);
  border-radius:12px;background:var(--paper);font:400 15px "Hanken Grotesk";color:var(--ink)}
/* Die Einwilligung als eigener Block: sie soll gelesen werden, nicht
   zwischen zwei Feldern untergehen. */
.la-emp-consent{display:flex;gap:11px;align-items:flex-start;margin:16px 0 18px;
  font-size:13px;color:var(--muted);line-height:1.55}
.la-emp-consent input{margin-top:3px;flex:none;width:17px;height:17px;accent-color:var(--sea)}

/* Loeschen-Icon oben rechts an jeder gespeicherten Analyse */
.ka-analyse{position:relative}
.ka-loeschen{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:10px;
  display:grid;place-items:center;color:var(--muted);border:1px solid transparent;
  transition:color .12s,border-color .12s,background .12s}
.ka-loeschen svg{width:19px;height:19px}
.ka-loeschen:hover{color:var(--warn);border-color:rgba(181,86,47,.35);background:rgba(181,86,47,.07)}
.ka-loeschen:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

.btn-warn{background:var(--warn);color:#fff;border:1px solid var(--warn)}
.btn-warn:hover{background:#9C4726;border-color:#9C4726}

/* Auch der Schlusshinweis und die Erledigt-Meldung laufen über die
   volle Breite der Empfehlungsbox -- sonst bricht der Text auf halber
   Strecke um, während der Kasten daneben leer bleibt. */
.la-empfehlung .anfrage .hinweis,
.la-empfehlung.erledigt p{max-width:none}

/* Digitale Anbindung in der Lage-Liste */
.netz-zeile.unbekannt b{color:var(--muted);font-weight:500}
.netz-zeile b small{display:block;font-size:11.5px;font-weight:500;color:var(--muted);
  margin-top:1px}
.netz-fuss{font-size:12px;color:var(--muted);line-height:1.5;margin:-2px 0 14px}

/* Netzschicht: Schalter und Legende oben rechts unter dem Umschalter */
.netz-schalter{margin-top:8px;display:block}
.netz-legende{padding:9px 10px 8px;border-top:1px solid var(--line);
  display:grid;gap:4px;font-size:11.5px;color:var(--ink);max-width:150px}
.netz-legende span{display:flex;align-items:center;gap:7px}
.netz-legende i{width:12px;height:12px;border-radius:3px;flex:none;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.netz-legende small{color:var(--muted);font-size:10.5px;line-height:1.4;margin-top:3px}
.netz-stufen{display:grid;gap:4px;margin-bottom:7px}
.netz-stufen button{padding:6px 9px;border:1px solid var(--line);border-radius:8px;
  background:var(--card);font:500 11.5px "Hanken Grotesk";color:var(--ink);cursor:pointer;
  text-align:left}
.netz-stufen button:hover{border-color:var(--teal)}
.netz-stufen button.an{background:var(--sea);color:#fff;border-color:var(--sea)}

/* Netzanbindung im Ergebnis der Lage-Analyse */
.la-netz{display:grid;grid-template-columns:auto 1fr;gap:2px 8px;align-items:baseline;
  margin:0 0 14px;font-size:14.5px;color:var(--ink)}
.la-netz span[aria-hidden]{grid-row:span 2}
.la-netz small{grid-column:2;font-size:12.5px;color:var(--muted);line-height:1.5}
.la-netz.unbekannt b,.la-netz.unbekannt{color:var(--muted)}

/* Bild oben auf den Regionsseiten -- an der Stelle, an der vorher der
   Saisonverlauf stand. Ein Foto beantwortet die erste Frage ("wie sieht
   es dort aus?") schneller als jede Grafik. */
.region-bild{margin:0 0 22px;border-radius:18px;overflow:hidden;position:relative;
  aspect-ratio:16/6;background:var(--paper-2)}
.region-bild img{width:100%;height:100%;object-fit:cover;display:block}
/* Ein leichter Verlauf nach unten: darunter beginnt sofort der
   Umschalter Liste/Karte, und eine harte Kante wirkt dort abgeschnitten. */
.region-bild::after{content:"";position:absolute;inset:auto 0 0 0;height:38%;
  background:linear-gradient(transparent, rgba(6,38,47,.28))}
@media (max-width:700px){ .region-bild{aspect-ratio:16/9} }

/* Kachel "Insellage" auf der Startseite */
.ph-insel{background:linear-gradient(160deg,#2C8392,#0A3B47)}

/* ---------------- Rechtliche Seiten ---------------- */
/* Fliesstext, der gelesen werden soll: eine Spalte, ruhige Abstaende,
   Zeilenlaenge begrenzt. Wer eine Datenschutzerklaerung ueber die volle
   Breite setzt, sorgt dafuer, dass sie niemand liest. */
/* Auch hier die 28px seitlich mitschreiben -- sonst ersetzt die
   Kurzschreibweise das padding von .wrap und der Text klebt auf dem
   Telefon am Displayrand. Auf dem Desktop faellt es nicht auf, weil
   78ch ohnehin schmaler sind als die Spalte. */
.rt-seite{max-width:78ch;padding:38px 28px 64px}
.rt-seite h1{margin:6px 0 10px}
.rt-seite .lede{color:var(--muted);font-size:16px;line-height:1.65;margin-bottom:26px}
.rt-seite h2{font-size:23px;margin:34px 0 10px}
.rt-seite h3{font-size:18px;margin:24px 0 8px}
.rt-seite p{line-height:1.7;margin-bottom:12px}
.rt-seite a{color:var(--teal);text-decoration:underline}
.rt-block{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:16px 18px;line-height:1.65}
/* Die Rechtsgrundlage steht kleiner unter dem Absatz, den sie betrifft --
   sie gehoert dazu, soll aber den Text nicht zerreissen. */
.rt-meta{font-size:12.5px;color:var(--muted);line-height:1.55;
  border-left:2px solid var(--line);padding-left:12px;margin:-4px 0 18px}
.rt-liste{margin:0 0 14px 20px;line-height:1.7}
.rt-liste li{margin-bottom:5px}
.rt-seite .tabelle-rahmen{margin:14px 0 18px}
.rt-seite code{background:var(--paper-2);padding:1px 6px;border-radius:5px;font-size:13px}
.netz-art{display:block;font-size:10.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin:6px 0 2px}
.netz-art:first-child{margin-top:0}
.netz-betreiber{display:flex;gap:4px;margin:2px 0 8px}
.netz-betreiber button{flex:1;padding:5px 4px;border:1px solid var(--line);border-radius:7px;
  background:var(--card);font:500 11px "Hanken Grotesk";color:var(--ink);cursor:pointer}
.netz-betreiber button:hover{border-color:var(--teal)}
.netz-betreiber button.an{background:var(--teal);color:#fff;border-color:var(--teal)}
.netz-ampel{display:grid;gap:3px;margin-bottom:8px;font-size:11px;color:var(--ink)}
.netz-ampel span{display:flex;align-items:center;gap:6px}
.netz-ampel i{width:11px;height:11px;border-radius:3px;flex:none;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.netz-zoom{background:rgba(207,138,78,.14);border:1px solid rgba(207,138,78,.4);
  border-radius:8px;padding:7px 9px;margin-bottom:8px;font-size:11px;line-height:1.45;
  color:#7a4a1e}

/* ---------------- Box "Internet & Telefon" ---------------- */
.netz-wert{display:flex;gap:16px;align-items:flex-start;background:var(--paper);
  border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:14px}
.netz-wert-zahl{font-family:"Fraunces";font-size:22px;font-weight:600;color:var(--sea);
  white-space:nowrap;line-height:1.2}
.netz-wert b{font-size:14.5px}
.netz-wert p{font-size:13px;color:var(--muted);line-height:1.55;margin-top:2px}
.netz-wert.unbekannt .netz-wert-zahl{color:var(--muted);font-size:19px}
.netz-box-lede{font-size:13px;color:var(--muted);line-height:1.55;margin-bottom:12px}
.netz-pruefen{width:100%;margin-bottom:4px}
/* Die Attrappe darf nicht bedienbar aussehen. */
.netz-wert.attrappe .netz-wert-zahl{min-height:26px}
.netz-wert.attrappe p{margin-top:6px}
/* Angedeutete Kartenflaeche in der gesperrten Netzbox -- sie zeigt, was
   dort erscheint, und gibt der Box die Hoehe, die das Overlay mit
   seinen Knoepfen braucht. */
.platzhalter-karte{height:130px;margin-top:14px;border-radius:12px;
  background:linear-gradient(135deg,rgba(23,97,111,.16),rgba(62,124,90,.14) 45%,rgba(181,86,47,.13));
  border:1px solid var(--line)}

/* --- Verkehrswertanalyse -------------------------------------------- */
/* Die Spanne ist das Ergebnis, nicht der Mittelwert: sie steht gross,
   der Punktwert klein darunter. Eine scheinpraezise Einzelzahl wuerde
   geglaubt -- genau das soll die Darstellung verhindern. */
.wa-ergebnis{padding:28px}
.wa-spanne{text-align:center;padding:8px 0 20px}
.wa-zahl{font-family:Fraunces,Georgia,serif;font-weight:500;font-size:clamp(26px,5vw,42px);
  line-height:1.15;margin:6px 0 8px;font-variant-numeric:tabular-nums}
.wa-zahl span{color:var(--muted);font-size:.7em;padding:0 4px}
.wa-mitte{font-size:13px;color:var(--muted);margin:0}
.wa-leer b{display:block;font-size:20px;margin-bottom:8px}
.wa-leer p{color:var(--muted);font-size:14px;max-width:52ch;margin:0 auto;line-height:1.6}

.wa-kennzahlen{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  border-top:1px solid var(--line);padding-top:20px}
.wa-kennzahlen b{display:block;font-size:13px;margin-bottom:6px}
.wa-kennzahlen small{display:block;color:var(--muted);font-size:12px;line-height:1.5;margin-top:5px}
.wa-basis,.wa-lage{font-size:14px}
.wa-lage{display:flex;align-items:center;gap:8px}
.wa-balken{height:7px;border-radius:100px;background:rgba(20,34,38,.09);overflow:hidden}
.wa-balken i{display:block;height:100%;border-radius:100px;background:var(--teal)}
.wa-hinweis{margin-top:18px}

.wa-wasserfall{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.wa-wasserfall li{display:grid;grid-template-columns:1fr auto;gap:4px 16px;
  padding:12px 0;border-bottom:1px solid var(--line)}
.wa-wasserfall li:last-child{border-bottom:0}
.wa-schritt-kopf{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.wa-wasserfall small{color:var(--muted);font-size:12.5px;grid-column:1;line-height:1.5}
.wa-zwischen{grid-column:2;grid-row:1 / span 2;align-self:center;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.wa-faktor{font-size:12px;font-weight:700;padding:2px 8px;border-radius:100px;
  font-variant-numeric:tabular-nums}
.wa-faktor.plus{background:rgba(47,111,79,.12);color:#2F6F4F}
.wa-faktor.minus{background:rgba(181,86,47,.12);color:#B5562F}

/* Der Zwischenstand traegt hier eine Spanne statt einer Punktzahl --
   die braucht Platz und darf nicht auf 38px Ziffernhoehe stehen. */
.la-stand-spanne b{font-size:19px;line-height:1.3;display:block}

/* Wertanalysen im Konto: Kopf mit Spanne rechts, Kennzahlen darunter.
   Bewusst nicht der Ring der Lage-Analyse -- eine Spanne ist keine
   Punktzahl und soll auch nicht so aussehen. */
.ka-wert-kopf{display:flex;justify-content:space-between;align-items:flex-start;
  gap:20px;flex-wrap:wrap;padding-right:34px}
.ka-wert-kopf h3{margin:0 0 4px}
.ka-wert-spanne{text-align:right}
.ka-wert-spanne b{display:block;font-family:Fraunces,Georgia,serif;font-weight:500;
  font-size:19px;font-variant-numeric:tabular-nums;white-space:nowrap}
.ka-wert-spanne small{color:var(--muted);font-size:12px}
.ka-wert-zahlen{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  margin:18px 0;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* Nur die Beschriftung, nicht jeder span darin -- sonst wird die
   Score-Pille zum Balken ueber die ganze Spaltenbreite. */
.ka-wert-zahlen > div > span{display:block;font-size:12px;font-weight:700;margin-bottom:6px}
.ka-wert-zahlen small{display:block;color:var(--muted);font-size:12px;line-height:1.5;margin-top:5px}
.ka-wert-zahlen .score-pille{margin-right:4px}
@media (max-width:560px){
  .ka-wert-spanne{text-align:left}
}

/* Einladung zur Anmeldung vor Lage- und Marktpreis-Analyse.
   Die Abstaende sind hier eigens gesetzt und nicht dem Zufall der
   Elternregeln ueberlassen: die Box hat nur vier Bloecke, und wenn
   deren Abstaende auseinanderlaufen, sieht die erste Seite eines
   neuen Bereichs unfertig aus. */
/* Der Abstand zum Kopf muss hier stehen: .la-kopf endet ohne unteren
   Rand, und die Box folgt in einer eigenen section -- ohne diese Zeile
   klebt sie unmittelbar am Einleitungstext. */
.anmelde-box{max-width:760px;padding:26px 28px 24px}
.anmelde-box h3{margin:6px 0 12px}
.anmelde-warum{color:var(--muted);line-height:1.65;max-width:62ch;margin:0}

.anmelde-nutzen{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
.anmelde-nutzen li{position:relative;padding-left:26px;line-height:1.55;font-size:14.5px;
  color:var(--muted)}
.anmelde-nutzen li b{color:var(--ink);font-weight:600}
/* Haken statt Aufzaehlungspunkt: es ist eine Liste von Zusagen. */
.anmelde-nutzen li::before{content:"✓";position:absolute;left:0;top:0;
  color:var(--good);font-weight:700}

.anmelde-knoepfe{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.anmelde-knoepfe .btn{padding:13px 26px}
.anmelde-fuss{margin:14px 0 0}

@media (max-width:520px){
  /* Nebeneinander gequetscht liest sich kein Knopf mehr -- untereinander
     und volle Breite. */
  .anmelde-knoepfe{display:grid;grid-template-columns:1fr}
  .anmelde-knoepfe .btn{text-align:center}
}

/* --- Marktpreis-Assistent: Schrittleiste, Icon-Kacheln, Gruppen ------ */

/* Die Schrittleiste zieht sich jetzt ueber die ganze Breite der Box und
   traegt eine Fortschrittsspur. Vorher waren es sechs kleine Kreise
   links oben, die niemand als Weg gelesen hat. */
.la-fortschritt.breit{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  gap:0;margin:0 0 26px;position:relative;flex-wrap:nowrap}
.la-fortschritt.breit .la-stufe{display:grid;justify-items:center;gap:7px;
  position:relative;padding-top:2px}
/* Die Spur laeuft hinter den Punkten durch, von Mitte zu Mitte. */
.la-fortschritt.breit .la-stufe::before{content:"";position:absolute;top:16px;
  left:-50%;width:100%;height:2px;background:rgba(20,34,38,.1)}
.la-fortschritt.breit .la-stufe:first-child::before{display:none}
.la-fortschritt.breit .la-stufe.erledigt::before,
.la-fortschritt.breit .la-stufe.an::before{background:var(--teal)}
.la-fortschritt.breit .la-punkt{position:relative;z-index:1;width:32px;height:32px;
  font-size:13.5px;background:var(--paper);border:2px solid rgba(20,34,38,.12);
  color:var(--muted)}
.la-fortschritt.breit .la-stufe.erledigt .la-punkt{background:var(--teal);
  border-color:var(--teal);color:#fff}
.la-fortschritt.breit .la-stufe.an .la-punkt{background:var(--sea);
  border-color:var(--sea);color:#fff;box-shadow:0 0 0 4px rgba(23,97,111,.13)}
.la-fortschritt.breit .la-stufentitel{font-size:11.5px;line-height:1.25;text-align:center;
  color:var(--muted);max-width:12ch}
.la-fortschritt.breit .la-stufe.an .la-stufentitel{color:var(--ink);font-weight:600}
@media (max-width:640px){
  /* Auf dem Telefon nur die Punkte -- sechs Beschriftungen nebeneinander
     ergeben sechs unlesbare Spalten. */
  .la-fortschritt.breit .la-stufentitel{display:none}
}

/* Die erste Frage: zwei grosse Kacheln statt zweier Knoepfe. */
.la-gross{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.la-grosskachel{position:relative;display:grid;justify-items:center;gap:8px;
  padding:30px 22px 26px;border:2px solid var(--line);border-radius:20px;
  background:var(--card);cursor:pointer;text-align:center;
  transition:border-color .15s,box-shadow .15s,transform .15s}
.la-grosskachel:hover{border-color:var(--teal);transform:translateY(-2px)}
.la-grosskachel.an,
.la-grosskachel:has(input:checked){border-color:var(--sea);
  box-shadow:0 0 0 3px rgba(23,97,111,.12)}
.la-grosskachel input{position:absolute;opacity:0;pointer-events:none}
/* Gezeichnete Symbole statt Emoji: sie erben die Farbe und werden
   beim Auswaehlen mitgefaerbt -- ein Emoji koennte das nicht. */
.la-grosskachel .lg-zeichen{display:block;width:44px;height:44px;color:var(--teal)}
.la-grosskachel .lg-zeichen svg{width:100%;height:100%;display:block}
.la-grosskachel:has(input:checked) .lg-zeichen{color:var(--sea)}
.la-grosskachel .lg-titel{font-family:Fraunces,Georgia,serif;font-weight:500;font-size:20px}
.la-grosskachel .lg-text{font-size:13px;color:var(--muted);line-height:1.5;max-width:30ch}
.la-grosskachel:focus-within{outline:2px solid var(--sand);outline-offset:3px}

/* Ausstattung nach Themen. */
.la-gruppen{display:grid;gap:20px}
.la-gruppe{border:0;padding:0;margin:0}
.la-gruppe legend{font-size:12px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--terra);margin-bottom:10px;padding:0}
/* Der Zusatz gehoert zur Ueberschrift, soll sie aber nicht dominieren:
   gleiche Zeile, kleinere Schrift, keine Versalien. */
.la-gruppe-zusatz{font-weight:500;letter-spacing:0;text-transform:none;
  color:var(--muted);font-size:11.5px;margin-left:6px}

/* Dieselbe Form wie die Kacheln der uebrigen Schritte: eckig mit
   Radius 14, gleiche Polsterung. Runde Pillen daneben sahen aus wie
   ein anderes Bedienelement -- es ist dasselbe, nur mehrfach waehlbar. */
.la-gruppe .la-chip span{padding:13px 14px;border-radius:14px;font-size:14.5px;
  font-weight:500}

/* Zustandskacheln: alle gleich gross, Text passt hinein. Vorher lagen
   sechs verschieden breite Knoepfe in drei Reihen. */
.la-feld-kacheln .la-kacheln{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.la-feld-kacheln .la-kachel{display:grid;place-items:center;text-align:center;
  min-height:52px;line-height:1.3;hyphens:auto}
.la-feld-kacheln .la-kachel span{width:100%;height:100%;display:grid;place-items:center;
  padding:12px 14px}

/* Kacheln stehen mittig in der Spalte -- sie sind gleich breit und
   bilden ein Raster.
   Die Ausstattungschips nicht: sie sind unterschiedlich lang, und
   zentriert franst jede Zeile an beiden Seiten anders aus. Links
   ausgerichtet liegt eine gemeinsame Kante da, an der das Auge
   entlanglaeuft. */
.la-formular .la-kacheln,
.la-formular .la-gross{justify-content:center}
.la-formular .la-chips{justify-content:flex-start}

/* --- Telefon: Tippziele --------------------------------------------- */
/* Die WCAG-Empfehlung sind 44 px. Gemessen lagen Filterzeilen und der
   Sortierknopf bei 35 bis 38 px -- auf dem Schirm reicht das, mit dem
   Daumen trifft man daneben. Nur auf schmalen Schirmen vergroessert:
   am Schreibtisch mit der Maus sind 35 px kein Problem, und die Liste
   wuerde unnoetig lang. */
@media (max-width:768px){
  /* Die Score-Aufschluesselung ist eine vierspaltige Tabelle und passt
     auf 375 px nicht. Sie ragte bisher aus ihrem Kasten heraus; jetzt
     laesst sie sich innerhalb schieben, statt am Rand zu verschwinden. */
  .bd-block{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .bd-block table{min-width:340px}

  .facette a{min-height:44px;display:flex;align-items:center}
  .fgruppe summary{min-height:44px;display:flex;align-items:center}
  .sortierung select,
  .tabellen-fuss select{min-height:44px}
  .paging a,
  .blaettern a{min-height:44px;min-width:44px;display:inline-flex;
    align-items:center;justify-content:center}
  /* Fusszeilenlinks liegen dicht untereinander -- mehr Luft dazwischen,
     damit man nicht den Nachbarn trifft. */
  .fuss-links a{padding:6px 0;display:inline-block}
}

/* --- Telefon: nichts darf breiter sein als das Fenster -------------- */
/* Die Karten des Kontos wuchsen mit ihrer Tabelle, statt sie scrollen
   zu lassen. Statt jede Stelle einzeln zu suchen, gilt hier die Regel
   fuer alle Kaesten, die Tabellen enthalten koennen. */
@media (max-width:768px){
  .box,
  .card,
  .ka-analyse{min-width:0;max-width:100%}

  /* Lange Zahlen und Adressen sprengen sonst die Zeile. */
  .ka-wert-spanne b{white-space:normal}

  /* Jede Tabelle in einem Kasten bekommt ihren Schieberahmen. */
  .box .tabelle,
  .ka-analyse .tabelle{min-width:520px}
}

/* --- Marktbeschreibung auf den Regionsseiten ------------------------ */
/* Keine eigene max-width: der Block soll mit den Boxen darueber
   fluchten, sonst steht der Text sichtbar eingerueckt unter einer
   breiteren Trefferliste. Die Zeilenlaenge bleibt trotzdem lesbar --
   die Absaetze selbst sind auf 70ch begrenzt und ab 760px zweispaltig.

   Die 28px seitlich muessen mitgeschrieben werden: die Kurzschreibweise
   ersetzt das padding von .wrap vollstaendig, auch waagerecht. Ohne sie
   begann der Text 28px weiter aussen als Kopf und Fusszeile -- er sah
   damit breiter aus als alles andere auf der Seite. */
.region-text{padding:10px 28px 60px}
.region-text h2{font-size:26px;margin:0 0 10px}
.region-text .lede{color:var(--muted);font-size:16px;line-height:1.65;margin:0 0 24px}
.rt-tabelle-scroll{overflow-x:auto;max-width:100%;min-width:0}
.rt-orte{min-width:420px}
.rt-orte th[scope=row]{font-weight:500;color:var(--ink)}
.rt-orte .rechts{text-align:right;font-variant-numeric:tabular-nums}
.rt-absaetze{display:grid;gap:22px;margin-top:26px}
.rt-absaetze h3{font-size:17px;margin:0 0 6px}
.rt-absaetze p{color:var(--muted);line-height:1.65;margin:0;max-width:70ch}
.rt-verweise{display:flex;gap:20px;flex-wrap:wrap;margin-top:26px}
.rt-verweise a{font-weight:600;color:var(--teal)}
@media (min-width:760px){
  .rt-absaetze{grid-template-columns:1fr 1fr}
  .rt-absaetze div:last-child:nth-child(odd){grid-column:1 / -1}
}

/* --- Erklaerteil der Analyseseiten ---------------------------------- */
/* Ebenfalls ohne eigene max-width -- siehe .region-text. */
.analyse-erklaerung,
.analyse-fragen{padding-top:14px}
.analyse-fragen{padding-bottom:60px}
.analyse-erklaerung h2,
.analyse-fragen h2{font-size:24px;margin:0 0 18px}
.ae-raster{display:grid;gap:22px}
.ae-raster h3{font-size:16px;margin:0 0 6px}
.ae-raster p{color:var(--muted);line-height:1.65;margin:0;max-width:70ch}
@media (min-width:760px){.ae-raster{grid-template-columns:1fr 1fr}}

.af-frage{border-top:1px solid var(--line);padding:2px 0}
.af-frage:last-child{border-bottom:1px solid var(--line)}
.af-frage summary{cursor:pointer;padding:14px 0;font-weight:600;font-size:15px;
  list-style:none;display:flex;justify-content:space-between;gap:14px;
  align-items:center;min-height:44px}
.af-frage summary::-webkit-details-marker{display:none}
.af-frage summary::after{content:"+";color:var(--teal);font-size:20px;flex:none}
.af-frage[open] summary::after{content:"−"}
.af-frage p{color:var(--muted);line-height:1.65;margin:0 0 16px;max-width:72ch}

/* --- Verwaltung: Tabellen, Bereichswechsel, Eingriffe ----------------
   Die Verwaltung bekommt Tabellen statt Karten: Konten und Makler
   unterscheiden sich in wenigen, immer gleichen Merkmalen, und in
   Spalten untereinander laesst sich vergleichen, was in Karten
   nebeneinander gesucht werden muesste. */
.admin-nav{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 26px;
  border-bottom:1px solid var(--line);padding-bottom:12px}
.admin-nav a{display:flex;align-items:center;min-height:44px;padding:0 14px;
  border-radius:10px;color:var(--muted);text-decoration:none;font-weight:600;
  font-size:14.5px}
.admin-nav a:hover{background:var(--paper-2);color:var(--ink)}
/* Der aktuelle Bereich haengt an aria-current und nicht an einer
   zweiten Klasse -- so kann die Markierung nicht von der Ansage fuer
   Screenreader abweichen. */
.admin-nav a[aria-current=page]{background:var(--sea);color:#fff}

.admin-suche{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 20px}
.admin-suche input{flex:1 1 260px;min-width:0;padding:11px 14px;font:inherit;
  border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink)}
.admin-suche .btn{display:flex;align-items:center}

.admin-tabelle{min-width:820px}
.admin-tabelle th[scope=row]{font-weight:600}
.admin-tabelle th[scope=row] a{color:var(--teal);text-decoration:none}
.admin-tabelle th[scope=row] a:hover{text-decoration:underline}
.admin-tabelle .rechts{text-align:right;font-variant-numeric:tabular-nums}

/* Der Status als Wort mit Farbe, nicht als Farbe allein: ein Punkt in
   Rot oder Gruen sagt nichts, wenn man Farben nicht unterscheidet. */
.admin-status{display:inline-flex;align-items:center;gap:6px;font-size:13px;
  font-weight:700;padding:3px 10px;border-radius:99px;white-space:nowrap}
.admin-status.ok{background:rgba(62,124,90,.12);color:#28503a}
.admin-status.offen{background:rgba(207,138,78,.16);color:#7a4a18}
.admin-status.warn{background:rgba(181,86,47,.12);color:#7a3a1e}

.admin-aktionen{display:grid;gap:14px}
.admin-aktionen form{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.admin-aktionen .hinweis{margin:0}

/* Das Loeschen sitzt zugeklappt und abgesetzt -- es soll nicht neben
   den harmlosen Knoepfen liegen und mitgeklickt werden. */
.admin-gefahr{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.admin-gefahr summary{cursor:pointer;font-weight:700;color:var(--warn);
  min-height:44px;display:flex;align-items:center}
.admin-gefahr p{color:var(--muted);font-size:14px;line-height:1.6;max-width:70ch}
.admin-gefahr .feld{max-width:420px;margin:14px 0}

@media(max-width:760px){
  .kennzahlen{grid-template-columns:repeat(2,1fr)}
}

/* --- Rechtstexte aus der Verwaltung ---------------------------------- */
/* Ein hinterlegter Zusatz setzt sich vom erzeugten Teil ab: er stammt
   von Hand und darf als solcher erkennbar sein. */
.rt-zusatz{margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.rt-text h3{font-size:18px;margin:22px 0 8px}
.rt-text p{line-height:1.7;margin:0 0 12px}
.rt-text ul{margin:0 0 14px;padding-left:20px}
.rt-text li{line-height:1.7;margin-bottom:5px}

/* Das Eingabefeld ist ein Arbeitsgeraet: Festbreitenschrift, damit
   Einrueckungen und Auszeichnungen am Zeilenanfang zu sehen sind. */
.tx-eingabe{width:100%;min-height:340px;padding:14px 16px;
  font:14px/1.65 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  border:1px solid var(--line);border-radius:12px;
  background:var(--card);color:var(--ink);resize:vertical}
.tx-eingabe:focus{outline:2px solid var(--teal);outline-offset:1px}

.tx-schalter{display:flex;gap:12px;align-items:flex-start;
  padding:16px;border:1px solid var(--line);border-radius:12px;
  background:var(--paper-2);line-height:1.6;font-size:14.5px}
.tx-schalter input{margin-top:3px;flex:0 0 auto;width:18px;height:18px}

/* --- Verwaltungstabellen ---------------------------------------------
   Ein Rahmen fuer alle Tabellen im Adminbereich: Suche links, Werkzeuge
   rechts, darunter die Tabelle, darunter Zaehler und Blaettern. */
.tb{background:var(--card);border:1px solid var(--line);border-radius:16px;
  overflow:hidden}
.tb-kopf{display:flex;gap:16px;align-items:center;justify-content:space-between;
  flex-wrap:wrap;padding:14px 16px;border-bottom:1px solid var(--line)}

.tb-suche{display:flex;align-items:center;gap:8px;flex:1 1 300px;min-width:0;
  position:relative}
.tb-lupe{position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;color:var(--muted);pointer-events:none}
.tb-lupe svg{width:100%;height:100%}
.tb-suche input[type=search]{flex:1 1 auto;min-width:0;
  padding:10px 14px 10px 36px;font:inherit;
  border:1px solid var(--line);border-radius:11px;
  background:var(--paper);color:var(--ink)}
.tb-suche input[type=search]:focus{outline:2px solid var(--teal);outline-offset:1px}
.tb-zuruecksetzen{color:var(--muted);font-size:13.5px;font-weight:600;
  text-decoration:none;white-space:nowrap}
.tb-zuruecksetzen:hover{color:var(--ink)}

.tb-werkzeuge{display:flex;align-items:center;gap:6px}
.tb-werkzeug,.tb-menue summary{display:inline-flex;align-items:center;gap:7px;
  min-height:40px;padding:0 12px;border-radius:10px;
  color:var(--muted);text-decoration:none;font-size:13.5px;font-weight:600;
  cursor:pointer;list-style:none;white-space:nowrap;
  transition:background .14s,color .14s}
.tb-werkzeug svg,.tb-menue summary svg{width:18px;height:18px;flex:0 0 auto}
.tb-werkzeug:hover,.tb-menue summary:hover{background:var(--paper-2);color:var(--ink)}
.tb-menue summary::-webkit-details-marker{display:none}

/* Das Sortiermenue liegt ueber der Tabelle statt sie zu verschieben. */
.tb-menue{position:relative}
.tb-menue-inhalt{position:absolute;right:0;top:calc(100% + 6px);z-index:20;
  min-width:230px;padding:6px;background:var(--card);
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}
.tb-menue-inhalt a{display:flex;align-items:center;justify-content:space-between;
  gap:12px;min-height:40px;padding:0 12px;border-radius:9px;
  color:var(--ink);text-decoration:none;font-size:14px;font-weight:500}
.tb-menue-inhalt a:hover{background:var(--paper-2)}
.tb-menue-inhalt a[aria-current]{color:var(--teal);font-weight:700}

.tb-rahmen{overflow-x:auto;max-width:100%}
.tb-tabelle{width:100%;border-collapse:collapse;font-size:14.5px;min-width:760px}
.tb-tabelle th,.tb-tabelle td{padding:12px 16px;text-align:left;vertical-align:middle}
.tb-tabelle thead th{background:var(--paper-2);font-size:12.5px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--muted);
  white-space:nowrap;position:sticky;top:0;z-index:1}
.tb-tabelle thead a{color:inherit;text-decoration:none;display:inline-flex;
  align-items:center;gap:5px}
.tb-tabelle thead a:hover{color:var(--ink)}
.tb-pfeil{color:var(--teal);font-size:12px}
.tb-tabelle th[aria-sort]{color:var(--ink)}

/* Wechselnde Zeilenfarben. Der Unterschied ist bewusst klein: er soll
   die Zeile fuehren, nicht die Tabelle streifen. Dazu die Hervorhebung
   beim Ueberfahren, die deutlicher ist als beide Zustaende -- so weiss
   man immer, in welcher Zeile man gerade liest. */
.tb-tabelle tbody tr:nth-child(odd){background:var(--card)}
.tb-tabelle tbody tr:nth-child(even){background:rgba(20,34,38,.032)}
.tb-tabelle tbody tr:hover{background:rgba(23,97,111,.09)}
.tb-tabelle tbody tr + tr{border-top:1px solid rgba(20,34,38,.06)}
.tb-tabelle tbody th{font-weight:600}
.tb-tabelle tbody th a{color:var(--teal);text-decoration:none}
.tb-tabelle tbody th a:hover{text-decoration:underline}
.tb-tabelle .rechts{text-align:right;font-variant-numeric:tabular-nums}

/* Die Aktionsspalte sitzt rechts und haelt ihre Symbole mittig. */
.tb-aktionen-kopf{text-align:center !important;width:1%;white-space:nowrap}
.tb-aktionen{display:flex;align-items:center;justify-content:center;gap:4px}
.tb-symbol{display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:9px;flex:0 0 auto;
  color:var(--muted);text-decoration:none;border:none;background:none;
  cursor:pointer;transition:background .14s,color .14s}
.tb-symbol svg{width:18px;height:18px}
.tb-symbol:hover{background:var(--paper-2);color:var(--teal)}
.tb-symbol.gefahr:hover{background:rgba(181,86,47,.12);color:var(--warn)}

.tb-fuss{display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;padding:12px 16px;border-top:1px solid var(--line)}
.tb-zaehler{margin:0;color:var(--muted);font-size:13.5px;font-weight:600}
.tb-fuss-rechts{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  margin-left:auto}
.tb-proseite{display:flex;align-items:center;gap:8px;font-size:13.5px;
  color:var(--muted);font-weight:600}
.tb-proseite select{padding:7px 10px;font:inherit;border:1px solid var(--line);
  border-radius:9px;background:var(--paper);color:var(--ink)}

.tb-blaettern{display:flex;align-items:center;gap:6px}
.tb-schritt{display:inline-flex;align-items:center;justify-content:center;
  gap:4px;min-width:38px;height:38px;padding:0 10px;border-radius:10px;
  border:1px solid var(--line);color:var(--ink);text-decoration:none;
  font-weight:700;font-size:16px;background:var(--paper)}
.tb-schritt:hover{background:var(--paper-2)}
.tb-schritt.aus{opacity:.4;pointer-events:none}
.tb-sprung{display:flex;align-items:center;gap:7px;font-size:13.5px;
  color:var(--muted);font-weight:600}
.tb-sprung input{width:62px;padding:7px 8px;font:inherit;text-align:center;
  border:1px solid var(--line);border-radius:9px;background:var(--paper);
  color:var(--ink)}

/* Beschriftungen, die nur Screenreader brauchen. Nicht display:none --
   das nimmt sie auch der Vorlesefunktion. */
.tb-nur-lesen{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media(min-width:900px){
  .tb-werkzeug .tb-nur-lesen{position:static;width:auto;height:auto;
    margin:0;overflow:visible;clip:auto;white-space:normal}
}

@media(max-width:700px){
  .tb-kopf{align-items:stretch}
  .tb-werkzeuge{justify-content:flex-end}
  .tb-fuss-rechts{width:100%;justify-content:space-between}
}

/* Die Druckansicht: dieselbe Tabelle ohne Bedienelemente. Daraus macht
   der Browser ein PDF -- mit seinen Schriften und seiner Silbentrennung,
   was eine selbstgebaute PDF-Erzeugung erst einmal nachbauen muesste. */
.druckseite{padding:24px 0 60px}
.druck-kopf{display:flex;justify-content:space-between;align-items:flex-end;
  gap:20px;margin-bottom:18px}
@media print{
  nav,footer,.tb-kopf,.tb-fuss,.druck-hinweis,.menue{display:none !important}
  .tb{border:none;border-radius:0}
  .tb-rahmen{overflow:visible}
  .tb-tabelle{min-width:0;font-size:10.5pt}
  .tb-tabelle thead th{background:none;border-bottom:1.5pt solid #000;color:#000}
  .tb-tabelle tbody tr:nth-child(even){background:#f2f2f2}
  .tb-aktionen-kopf,.tb-aktionen{display:none}
  a{text-decoration:none;color:#000}
}

/* Mehrere Knoepfe im Seitenkopf nebeneinander. */
.kopf-knoepfe{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* --- Datenblatt auf der Objektseite ----------------------------------
   Zwei Spalten aus Bezeichnung und Wert. Als <dl>, weil es genau das
   ist: Begriffe mit ihren Angaben. Eine Tabelle waere es nur, wenn man
   mehrere Objekte nebeneinander laege. */
.objektdaten{display:grid;grid-template-columns:repeat(2,1fr);
  gap:0 28px;margin:14px 0 10px}
.objektdaten > div{display:flex;justify-content:space-between;gap:16px;
  align-items:baseline;padding:11px 0;border-bottom:1px solid var(--line)}
.objektdaten dt{color:var(--muted);font-size:14.5px}
.objektdaten dd{margin:0;font-weight:600;text-align:right;
  font-variant-numeric:tabular-nums}
@media(max-width:700px){
  .objektdaten{grid-template-columns:1fr;gap:0}
}

/* --- Reisefuehrer ----------------------------------------------------
   Redaktionelle Seiten: schmalere Textspalte als im Rest der Seite,
   weil hier wirklich gelesen wird, und eine Spalte daneben, die den
   Weg in den Bestand offenhaelt. */
.rf-kopf{color:#fff;background:var(--tiefsee);background-size:cover;
  background-position:center;padding:56px 0 44px;margin-bottom:34px}
.rf-kopf.mit-bild{background-blend-mode:normal}
.rf-krume{font-size:13px;opacity:.85;margin-bottom:14px}
.rf-krume a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35)}
.rf-kopf h1{font-size:clamp(28px,4.4vw,44px);margin:0 0 12px;max-width:20ch}
.rf-lede{font-size:18px;line-height:1.6;max-width:60ch;color:rgba(255,255,255,.9);
  margin:0 0 22px}
.rf-kopf .btn{display:inline-block;text-decoration:none}

.rf-koerper{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:42px;
  align-items:start;padding-bottom:70px}
.rf-text h2{font-size:24px;margin:34px 0 10px;max-width:26ch}
.rf-text h2:first-child{margin-top:0}
.rf-text p{line-height:1.75;max-width:68ch;margin:0 0 14px}
.rf-orte{display:grid;gap:0;margin:6px 0 10px}
.rf-orte > div{padding:14px 0;border-bottom:1px solid var(--line)}
.rf-orte dt{font-weight:700;font-family:"Fraunces";font-size:17px}
.rf-orte dd{margin:3px 0 0;color:var(--muted);line-height:1.6;max-width:66ch}

.rf-spalte{display:grid;gap:var(--abstand-boxen);position:sticky;top:88px}
.rf-objekte{display:grid;gap:14px;margin-bottom:14px}
.rf-objekte .card{margin:0}
.rf-alle{display:block;text-align:center;text-decoration:none}
.rf-verweise,.rf-nachbarn{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.rf-verweise li{line-height:1.55;font-size:14.5px;color:var(--muted)}
.rf-verweise a,.rf-nachbarn a{color:var(--teal);font-weight:600;text-decoration:none}
.rf-verweise a:hover,.rf-nachbarn a:hover{text-decoration:underline}
.rf-nachbarn li{font-size:14.5px}

.rf-uebersicht{padding:44px 28px 80px}
.rf-uebersicht h1{margin:8px 0 12px}
.rf-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
  gap:20px;margin-top:32px}
.rf-kachel{background:var(--card);border:1px solid var(--line);border-radius:16px;
  overflow:hidden;text-decoration:none;color:inherit;display:flex;
  flex-direction:column;transition:transform .18s,box-shadow .2s}
.rf-kachel:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.rf-kbild{aspect-ratio:16/9;background:var(--tiefsee);background-size:cover;
  background-position:center;display:flex;align-items:flex-end;padding:14px 16px}
.rf-kname{font-family:"Fraunces";font-size:20px;font-weight:600;color:#fff}
.rf-kachel p{margin:14px 16px 8px;font-size:14px;line-height:1.55;
  color:var(--muted);flex:1}
.rf-kfuss{margin:0 16px 16px;font-size:13px;font-weight:700;color:var(--teal)}

/* Verweis von der Trefferliste in den Reisefuehrer. */
.rf-hinweis{display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  padding:16px 18px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;margin-bottom:var(--abstand-boxen);font-size:14.5px}
.rf-hinweis a{color:var(--teal);font-weight:700;text-decoration:none;white-space:nowrap}
.rf-hinweis a:hover{text-decoration:underline}

@media(max-width:960px){
  .rf-koerper{grid-template-columns:1fr;gap:30px}
  .rf-spalte{position:static}
}

/* ---- Themenseiten des Reisefuehrers -------------------------------
   Der Textkoerper ist hier schmaler als auf der Regionsseite: 68
   Zeichen statt 78. Das ist eine Leseseite, keine Uebersicht, und
   laengere Zeilen kosten bei durchgehendem Fliesstext spuerbar.      */
.rf-thema .rf-text{max-width:68ch}
.rf-thema .rf-text h2{margin:34px 0 10px}
.rf-thema .rf-text p{line-height:1.72}

.rf-fragen{margin:14px 0 0}
.rf-fragen dt{font-weight:600;margin-top:16px;color:var(--ink)}
.rf-fragen dd{margin:4px 0 0;color:var(--muted)}

.rf-zurueck{margin-top:40px;padding:22px 24px;border-radius:14px;
  background:var(--paper-2);border:1px solid var(--line)}
.rf-zurueck p{margin:0 0 14px}

/* Die Querverweise in andere Regionen tragen den Regionsnamen als
   zweite Zeile -- ohne ihn ist "Austern und Wein" ein Titel ohne Ort. */
.rf-nachbarn a b{display:block;font-weight:600}
.rf-nachbarn a span{display:block;font-size:.86rem;color:var(--muted);
  margin-top:2px}

/* ---- Sicherheitsabfrage -------------------------------------------
   Der Honigtopf muss fuer Menschen unsichtbar sein, ohne dass ein Bot
   ihn an display:none erkennt. Deshalb aus dem Sichtfeld geschoben
   statt ausgeblendet.                                                */
.honigtopf{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.feld-captcha input{max-width:120px}
.feld-hilfe{margin:6px 0 0;font-size:12.5px;color:var(--muted);line-height:1.5}

/* ---- Maklerregistrierung -----------------------------------------
   Die Felder selbst kommen aus .anfrage und .feld-block wie in jedem
   anderen Formular des Portals -- hier steht nur, was es dort noch
   nicht gab: die zweite Spalte und die beiden Listen.

   Eine frueherere Fassung brachte eigene Klassen und eigene Farben
   mit. Die Farben waren erfunden (--linie, --flaeche, --akzent gibt
   es hier nicht), also blieben Rahmen und Flaechen unsichtbar, und
   die Felder sahen anders aus als ueberall sonst.                    */
.mreg-kopf{padding:56px 0 40px}
.mreg-lede{max-width:62ch;font-size:17px;line-height:1.65;color:var(--muted);
  margin-top:12px}

.mreg{display:grid;grid-template-columns:1fr;gap:var(--abstand-boxen);
  padding:36px 28px 72px;align-items:start}
@media (min-width:900px){
  .mreg{grid-template-columns:minmax(0,1.65fr) minmax(280px,.9fr);gap:34px}
}

/* Drei Felder in einer Zeile: PLZ kurz, Ort lang, Land dazwischen.
   .mk-raster gibt zwei gleich breite Spalten, das dritte Feld rutscht
   sonst allein in die naechste Zeile.

   Die Grenze ist dieselben 760px wie bei .mk-raster -- mit einem
   eigenen Wert haette diese Regel im Bereich dazwischen die
   Mobilfassung des Hauses ueberstimmt.                               */
@media (min-width:761px){
  .mk-raster-drei{grid-template-columns:.55fr 1fr .8fr}
}

/* Die Seitenspalte klebt beim Scrollen wie im Reisefuehrer -- das
   Formular ist lang, und "Schon registriert?" soll auch auf Hoehe der
   Handelsregisternummer noch erreichbar sein. Den Abstand zwischen den
   Boxen bringt .box-stapel mit; er stand hier eine Fassung lang auf
   null, weil die Spalte ueberhaupt keine Regel hatte.               */
@media (min-width:900px){
  .mreg-spalte{position:sticky;top:88px}
}

.mreg-senden{margin-top:var(--abstand-boxen);padding:14px 30px;font-size:16px}
.mreg-fuss{margin-top:16px}

.mreg-liste{list-style:none;margin:0;padding:0}
.mreg-liste li{padding:12px 0;border-bottom:1px solid var(--line)}
.mreg-liste li:last-child{border-bottom:0}
.mreg-liste b{display:block;margin-bottom:3px}
.mreg-liste span{display:block;font-size:14px;color:var(--muted);line-height:1.55}

/* Die Bestaetigungsseite: drei Schritte, damit klar ist, dass es
   weitergeht und wann. */
.mreg-danke{padding:56px 0 40px}
.mreg-danke-koerper{padding:36px 28px 80px;max-width:74ch}
.mreg-schritte{list-style:none;counter-reset:s;margin:0;padding:0}
.mreg-schritte li{counter-increment:s;position:relative;padding:0 0 26px 52px}
.mreg-schritte li::before{content:counter(s);position:absolute;left:0;top:-2px;
  width:34px;height:34px;border-radius:50%;background:var(--teal);color:#fff;
  display:grid;place-items:center;font-weight:600;font-size:15px}
.mreg-schritte b{display:block;margin-bottom:5px}
.mreg-schritte span{display:block;color:var(--muted);line-height:1.65;font-size:15px}
.mreg-danke-fuss{margin:16px 0 26px;color:var(--muted);line-height:1.65}

/* Bildunterschrift unter dem Kopfband einer Themenseite. Sie nennt,
   was zu sehen ist -- fuer alle, die das Bild nicht sehen, steht
   dasselbe im alt-Attribut des Hintergrunds nicht zur Verfuegung,
   deshalb hier als Text.                                           */
.rf-bildnachweis{max-width:1200px;margin:10px auto 0;padding:0 28px;
  font-size:12.5px;color:var(--muted)}

/* ---- Oeffentliche Anbieterseite -----------------------------------
   Aufbau wie der Reisefuehrer: Text links, Kontakt rechts. Die Seite
   war bis vor kurzem nur ein Impressum -- der Kaeufer musste danach
   zurueck und selbst suchen, ob der Anbieter noch etwas hat.        */
.mkl-kopf{background:var(--tiefsee);color:#fff;padding:44px 0 40px}
.mkl-kopf-innen{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.mkl-kopf h1{margin:6px 0 8px;font-size:clamp(26px,4vw,38px)}
.mkl-kopf .eyebrow{color:rgba(255,255,255,.72)}

.mkl-logo{width:96px;height:96px;object-fit:contain;background:#fff;
  border-radius:16px;padding:10px;flex:none}
/* Ein Portraet wird beschnitten, ein Logo nicht -- sonst steht der
   Ansprechpartner in einem Briefmarkenrahmen. */
.mkl-foto{object-fit:cover;padding:0;border-radius:50%}

.mkl-zeile{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;
  color:rgba(255,255,255,.85);font-size:14.5px}

.mkl-koerper{display:grid;grid-template-columns:1fr;gap:var(--abstand-boxen);
  padding:var(--abstand-kopf) 28px 72px;align-items:start}
@media (min-width:900px){
  .mkl-koerper{grid-template-columns:minmax(0,1.7fr) minmax(280px,.85fr);gap:34px}
  .mkl-spalte{position:sticky;top:88px}
}

.mkl-block{margin-bottom:38px}
.mkl-block h2{font-size:24px;margin:0 0 14px}
.mkl-block p{line-height:1.7;margin-bottom:12px}

.mkl-schwerpunkte,.mkl-daten,.mkl-kontakt{margin:0}
.mkl-schwerpunkte>div,.mkl-daten>div{padding:12px 0;border-bottom:1px solid var(--line)}
.mkl-schwerpunkte>div:last-child,.mkl-daten>div:last-child{border-bottom:0}
.mkl-schwerpunkte dt,.mkl-daten dt,.mkl-kontakt dt{font-size:12.5px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.mkl-schwerpunkte dd,.mkl-daten dd{line-height:1.6}

.mkl-kontakt>div{padding:10px 0;border-bottom:1px solid var(--line)}
.mkl-kontakt>div:last-child{border-bottom:0}
.mkl-kontakt dd{line-height:1.5}
.mkl-kontakt+.btn{margin-top:16px;display:inline-flex;align-items:center;
  justify-content:center;width:100%}

.mkl-objekte{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:var(--abstand-boxen)}
.mkl-leer{color:var(--muted);margin-bottom:16px}

.mkl-recht{padding-top:26px;border-top:1px solid var(--line)}
.mkl-recht h2{font-size:20px}
.mkl-recht-hinweis{font-size:13px;color:var(--muted);margin-bottom:6px}

.mkl-verweise{list-style:none;margin:0;padding:0;font-size:14.5px;line-height:1.6}
.mkl-verweise li{padding:9px 0;border-bottom:1px solid var(--line)}
.mkl-verweise li:last-child{border-bottom:0}
.mkl-blaettern{display:flex;align-items:center;gap:14px;margin-top:24px;
  flex-wrap:wrap}
.mkl-blaettern span{color:var(--muted);font-size:14px}
.mkl-blaettern .btn{display:inline-flex;align-items:center}

.profil-vorschau{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin:0 0 24px}
.profil-vorschau .btn{display:inline-flex;align-items:center}
.profil-vorschau span{font-size:13px;color:var(--muted)}

/* Der Verweis auf die Anbieterseite in der Anfragebox der Objektseite. */
.box-anbieter{margin:14px 0 10px;font-size:14px}
.box-anbieter a{text-decoration:underline}

/* ---- Sprachen mit Fahne -------------------------------------------
   Der Rahmen der Fahne steckt im SVG selbst, nicht hier: sonst
   haetten die weissen Fahnen -- Polen, Tschechien -- auf hellem
   Grund keine Kante.                                                */
.fahne{flex:none;border-radius:2px;display:block}

.sprachliste{list-style:none;margin:2px 0 0;padding:0;display:flex;
  flex-wrap:wrap;gap:6px 14px}
.sprachliste li{display:flex;align-items:center;gap:7px;font-size:14px}

/* In der Auswahl des Maklerbereichs steht die Fahne zwischen Haken
   und Namen. */
.wunsch-sprache{gap:8px}
.wunsch-sprache .fahne{margin-left:2px}

/* Das Portraet des Ansprechpartners in der Kontaktbox. Rund und
   klein: es soll ein Gesicht zeigen, keine Bildunterschrift
   ersetzen. */
.mkl-person dd{display:flex;align-items:center;gap:12px}
.mkl-portraet{width:64px;height:64px;border-radius:50%;object-fit:cover;
  flex:none;border:1px solid var(--line)}

/* ---- Verweise auf die Anbieterseite von der Objektseite -----------
   Bild und Name fuehren dorthin. Ein Logo, das aussieht wie ein
   Logo, wird angeklickt -- bisher passierte dabei nichts.          */
.av-link{display:inline-flex;flex:none;border-radius:50%;
  transition:transform .15s}
.av-link:hover{transform:translateY(-1px)}

.bn-link,.mk-name-link{color:inherit;text-decoration:none}
.bn-link:hover,.mk-name-link:hover{text-decoration:underline}

/* Zwei Wege nebeneinander, ab Tablet in einer Zeile. Auf dem Telefon
   untereinander: zwei halbe Knoepfe sind dort zwei zu schmale. */
.mk-knoepfe{display:grid;gap:10px;margin-top:4px}
.mk-knoepfe .btn{display:inline-flex;align-items:center;justify-content:center;
  text-align:center;padding:13px 18px}
@media (min-width:520px){
  /* Die Anfrage bekommt mehr Platz -- sie ist der Weg, den die
     meisten gehen sollen. */
  .mk-knoepfe{grid-template-columns:1.35fr 1fr}
}