/* =====================================================================
   SCHRIFTEN - von uns, nicht von Google

   Vorher holten alle Seiten Inter und Poppins direkt von
   fonts.googleapis.com. Dabei geht die IP-Adresse jedes Besuchers an
   Google in die USA, bevor er ueberhaupt etwas angeklickt hat. Genau
   dafuer gab es in Deutschland eine Abmahnwelle (LG Muenchen I,
   3 O 17493/20). Also liefern wir die Schriften selbst aus.

   Die Dateien liegen in assets/fonts/. Fehlen sie, faellt der Browser
   auf die Systemschrift zurueck - die Seite bleibt lesbar, sieht nur
   anders aus.

   font-display:swap heisst: Erst die Systemschrift zeigen, dann
   austauschen. Sonst steht der Text kurz gar nicht da.
   ===================================================================== */

@font-face{font-family:"Inter";src:url("fonts/inter-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/inter-500.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/inter-600.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/inter-700.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap}

@font-face{font-family:"Poppins";src:url("fonts/poppins-600.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("fonts/poppins-700.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("fonts/poppins-800.woff2") format("woff2");
  font-weight:800;font-style:normal;font-display:swap}

/* =====================================================================
   GETLEND - gemeinsames Design
   Mint #62D2A2 - direkt aus der Logodatei gemessen, nicht geschaetzt.
   Nachgerechnete Kontraste auf Weiss:
     mint400 1.87:1 (nur Flaeche)  ·  mint600 2.47:1 (Flaechen, grosse Icons)
     mint700 4.51:1 (Text, besteht AA)  ·  mint800 7.19:1 (sicher)
   Weiss auf mint400 waere 1.87:1 - deshalb steht auf Mintflaechen immer
   das dunkle #0B2C20 (8.07:1), so wie im Logo auch.
   ===================================================================== */

:root{
  --mint:#62D2A2; --mint50:#EDFAF4; --mint100:#D5F4E6; --mint200:#A8EBCE;
  --mint300:#86DFB9; --mint500:#4BCB94;
  --mint600:#35BA81; --mint700:#27865D; --mint800:#1C6345; --mint900:#13432F;
  --onbrand:#0B2C20;
  --ink:#141A19; --n50:#F7F9F8; --n100:#EEF2F0; --n200:#DDE4E1;
  --n300:#C2CCC8; --n400:#94A19C; --n500:#6B7873; --n600:#4C5854; --n700:#364240;
  --amber:#F5A623; --amber-bg:#FFF1D6; --amber-fg:#8A5300;
  --blue:#2E7CD6; --blue-bg:#DEEDFB; --blue-fg:#14528A;
  --red:#E5484D; --red-bg:#FDE5E6; --red-fg:#A31219;
  --wrap:1180px;
  /* Flaechen: --flaeche ist die helle Grundflaeche, --dunkel die dunkle Kachel
     (Fussleiste, Laufband, Rechnerergebnis), --btnd der dunkle Knopf. */
  --flaeche:#fff; --kopf:rgba(255,255,255,.94);
  --dunkel:#141A19; --btnd-bg:#141A19; --btnd-fg:#fff;
  --schatten:20,26,25;
}

/* ------------------ Dunkles Design ------------------
   Umgekehrte Neutralskala, Mintwerte gespiegelt: was hell war, wird dunkel,
   was dunkel war, wird hell. So funktionieren alle bestehenden Regeln weiter. */
html[data-thema="dunkel"]{
  --flaeche:#151B19; --kopf:rgba(21,27,25,.94);
  --dunkel:#0B100F; --btnd-bg:#E8EFEB; --btnd-fg:#111815;
  --schatten:0,0,0;
  --ink:#E9F0ED;
  --n50:#1B2220; --n100:#232B29; --n200:#303937; --n300:#414D49;
  --n400:#71807A; --n500:#98A5A0; --n600:#B7C3BE; --n700:#D3DCD8;
  --mint50:#13251E; --mint100:#173026; --mint200:#204336; --mint300:#2C5945;
  --mint500:#4BCB94; --mint600:#3FC088; --mint700:#7BDFB2; --mint800:#A8EBCE;
  --mint900:#C9F3E0;
  --amber-bg:#3A2A0E; --amber-fg:#F5C877;
  --blue-bg:#12283D; --blue-fg:#8FC4F2;
  --red-bg:#3B1517;  --red-fg:#F4989B;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* Fehlen die Dateien in assets/fonts/, greift der Stapel dahinter.
   Die Reihenfolge ist nicht beliebig: "Segoe UI Variable" und
   "Helvetica Neue" haben aehnliche Buchstabenbreiten wie Inter -
   damit springt das Bild nicht, sobald die Schriften nachgeliefert
   werden. */
body{font-family:Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,
  "Helvetica Neue",Arial,sans-serif;color:var(--ink);
  background:var(--flaeche);transition:background-color .25s,color .25s;
  line-height:1.65;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:var(--mint700);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:Poppins,Inter,system-ui,sans-serif;font-weight:700;letter-spacing:-.02em;line-height:1.2}
h1{font-size:clamp(28px,4vw,42px);font-weight:800}
h2{font-size:clamp(22px,2.8vw,30px)}
h3{font-size:17px;font-weight:600}
p{color:var(--n600)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.muted{color:var(--n600);font-size:14.5px}
.tiny{color:var(--n500);font-size:12.5px}
.hide{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

header.top{position:sticky;top:0;z-index:900;background:var(--kopf);
  backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--n200)}
.topnav{display:flex;align-items:center;gap:22px;height:70px}
/* Die Kopfzeile ist die einzige Leiste, die ueber die volle Breite
   gehen soll. Sonst klebt sie auf einem breiten Schirm als schmaler
   Streifen in der Mitte, und Logo wie Knoepfe stehen weit vom Rand
   entfernt - man sucht sie dort, wo sie bei jeder anderen Seite sind.
   Die zwanzig Pixel sind Abstand zum Glas, kein Rahmen. */
header.top .topnav{max-width:none;padding:0 20px}
@media(max-width:520px){ header.top .topnav{padding:0 14px} }
.mark{font-family:Poppins,"Avenir Next","Segoe UI",system-ui,sans-serif;font-weight:800;font-size:22px;letter-spacing:-.03em;
  color:var(--ink);text-decoration:none;flex:none;display:inline-flex;align-items:center;gap:6px}
.mark img{display:block;width:25px;height:25px;object-fit:contain}
.mark span{color:var(--mint700)}
.mark:hover{text-decoration:none;opacity:.85}
@media(max-width:520px){.mark{font-size:19px}.mark img{width:22px;height:22px}}
.topnav .links{display:flex;gap:24px;margin-left:18px;font-size:15px;
  white-space:nowrap;flex-wrap:nowrap}
.topnav .links a{color:var(--n700);white-space:nowrap}
.topnav .links a:hover{color:var(--ink);text-decoration:none}
.topnav .right{margin-left:auto;display:flex;align-items:center;gap:10px}
@media(max-width:860px){.topnav .links{display:none}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:600 15px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif;padding:13px 22px;border-radius:13px;border:1.5px solid transparent;
  cursor:pointer;transition:.16s;text-decoration:none!important;white-space:nowrap}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-dark{background:var(--btnd-bg);color:var(--btnd-fg)}
.btn-dark:hover:not(:disabled){filter:brightness(.86);transform:translateY(-1px)}
.btn-mint{background:var(--mint);color:var(--onbrand)}
.btn-mint:hover:not(:disabled){background:var(--mint500);transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(98,210,162,.45)}
.btn-ghost{border-color:var(--n300);color:var(--ink);background:var(--flaeche)}
.btn-ghost:hover:not(:disabled){border-color:var(--ink)}
/* Der Gegenpart zu btn-dark: dieselbe Form und Groesse, aber der
   Rahmen traegt die Farbe statt der Flaeche. Zwei schwere Bloecke
   nebeneinander ("Suchen" und "Inserieren") wuerden sich sonst
   gegenseitig die Aufmerksamkeit nehmen. */
.btn-hell{background:transparent;color:var(--ink);
  border-color:var(--btnd-bg)}
.btn-hell:hover:not(:disabled){background:var(--btnd-bg);color:var(--btnd-fg);
  transform:translateY(-1px)}
.btn-light{background:#fff;color:#141A19}
.btn-light:hover{transform:translateY(-1px)}
.btn-red{background:var(--flaeche);border-color:var(--n300);color:var(--red-fg)}
.btn-red:hover{border-color:var(--red)}
.btn-sm{padding:9px 16px;font-size:14px;border-radius:11px}
.btn-full{width:100%}

label.fl{display:block;font:600 14.5px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif;margin:0 0 7px}
label.fl .opt{font-weight:400;color:var(--n500);font-size:13px}
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=date],input[type=tel],select,textarea{
  width:100%;border:1.5px solid var(--n200);background:var(--flaeche);color:var(--ink);
  border-radius:13px;padding:14px 15px;font:400 15px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif;outline:none;transition:.15s}
input:focus,select:focus,textarea:focus{border-color:var(--mint600);
  box-shadow:0 0 0 3px var(--mint50)}
input::placeholder,textarea::placeholder{color:var(--n400)}
textarea{resize:vertical;min-height:110px;line-height:1.6}
select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B7873' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:42px}
.field{margin-bottom:20px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
/* min-width:0 ist der Punkt: Ohne das weigert sich ein Datumsfeld,
   schmaler zu werden als sein eingebauter Kalenderknopf - und schiebt
   sich dann ueber das Nachbarfeld. Genau das war auf dem Handy zu
   sehen. Und der Umbruch kommt frueher, weil in der Verifizieren-
   Seite links noch eine Spalte danebensteht. */
.row2 > *{min-width:0}
.row2 input,.row2 select{max-width:100%}
@media(max-width:760px){.row2{grid-template-columns:1fr}}
.help{font-size:13px;color:var(--n500);margin-top:6px;line-height:1.5}

.card{background:var(--flaeche);border:1px solid var(--n200);border-radius:18px;padding:24px}
.panel{background:var(--n50);border:1px solid var(--n200);border-radius:16px;padding:18px}
.hinweis{border-radius:14px;padding:15px 17px;font-size:14.5px;line-height:1.6;margin-bottom:20px}
.hinweis.info{background:var(--blue-bg);color:var(--blue-fg)}
.hinweis.warn{background:var(--amber-bg);color:var(--amber-fg)}
.hinweis.ok{background:var(--mint100);color:var(--mint800)}
.hinweis.fehler{background:var(--red-bg);color:var(--red-fg)}
.hinweis b{font-weight:600}

.chip{display:inline-flex;align-items:center;gap:6px;background:var(--n50);
  border:1.5px solid var(--n200);border-radius:999px;padding:9px 15px;
  font:600 13.5px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif;color:var(--n600);cursor:pointer;transition:.15s;
  white-space:nowrap;user-select:none}
.chip:hover{border-color:var(--n300)}
.chip.on{background:var(--mint100);border-color:var(--mint600);color:var(--mint800)}
.badge{display:inline-flex;align-items:center;gap:5px;background:var(--mint50);
  color:var(--mint700);font:600 11.5px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif;padding:4px 10px;border-radius:999px}
.badge.grau{background:var(--n100);color:var(--n600)}
.badge.blau{background:var(--blue-bg);color:var(--blue-fg)}
.badge.gelb{background:var(--amber-bg);color:var(--amber-fg)}

/* ---------- Ein Raster für Kacheln, überall dasselbe ----------
   NEU IN v168.

   Vorher gab es drei verschiedene Breiten an drei Orten:
       suchen.html   178 px
       konto.html    180 px   (.merkgitter)
       profil.html   230 px
   und auf merkliste.html, bewertungen.html und zahlungen.html GAR
   KEINE - diese drei Seiten haben kein eigenes <style>, und die
   Regeln standen in den Seiten der anderen.

   Auf der Merkliste hiess das: Der Behaelter war ein gewoehnlicher
   Block, die Kacheln darin auch - also nahm jede die volle Breite.
   Mit einem einzigen gemerkten Geraet sah man ein riesiges Bild
   quer ueber den Bildschirm. Genau das ist aufgefallen.

   Jetzt steht die Regel EINMAL hier im gemeinsamen Stylesheet und
   gilt damit auf jeder Seite, die es laedt.

   auto-fill und nicht auto-fit: auto-fit laesst die vorhandenen
   Spalten die ganze Breite ausfuellen - bei einem einzigen Eintrag
   waere er wieder riesig. auto-fill legt die leeren Spalten trotzdem
   an, und die eine Kachel bleibt so breit wie alle anderen. */
.kachelgitter{display:grid;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:16px;
  /* Wenige Kacheln sollen links anfangen, nicht in der Mitte
     schweben. */
  justify-content:start}
/* Dieselbe Falle wie bei der Reihe: Ein Rasterfeld hat "min-width:
   auto" und laesst sich von einem langen unteilbaren Wort
   auseinanderdruecken. Dann stimmen die Spalten nicht mehr. */
.kachelgitter > *{min-width:0}

/* Der rote Punkt am Menue sagt "da ist etwas". Er sagte bisher nicht
   WO. Diesen Punkt gibt es deshalb ein zweites Mal - am betroffenen
   Eintrag in der Schublade, mit der Zahl daneben. Wer das Menue
   oeffnet, sieht ohne Suchen, wohin er muss. */
.menuteil a.hatneues{display:flex;align-items:center;gap:8px}
.menuteil a.hatneues .neupunkt{width:8px;height:8px;border-radius:50%;
  background:var(--red,#e5484d);flex:none}
/* Auf dem Handy ist neben Profilbild, Inserieren und Menue kein Platz
   fuer zwei Woerter mehr. Die Lupe allein sagt dasselbe. */
.lupenknopf{padding-left:12px;padding-right:12px}
.lupenknopf .lupenwort{display:none}
@media(min-width:420px){
  .lupenknopf{padding-left:14px;padding-right:14px}
  .lupenknopf .lupenwort{display:inline}
}
/* Den Verwaltungsknopf sieht genau ein Konto. Er darf deshalb auffallen. */
.verwaltungknopf{border-color:var(--mint600,var(--mint500))}

.menuteil a.hatneues .neuzahl{margin-left:auto;font:700 12px Inter,system-ui,sans-serif;
  background:var(--red,#e5484d);color:#fff;border-radius:999px;
  min-width:20px;height:20px;display:inline-flex;align-items:center;
  justify-content:center;padding:0 6px}

@media(max-width:900px){
  .kachelgitter{grid-template-columns:repeat(auto-fill, minmax(170px, 1fr))}
}
/* Am Handy immer genau zwei nebeneinander - so sieht man beim
   Scrollen doppelt so viel wie mit einer grossen. */
@media(max-width:620px){
  .kachelgitter{grid-template-columns:1fr 1fr;gap:12px}
  .kachelgitter .tile .body{padding:10px 11px 12px}
  .kachelgitter .tile h3{font-size:14px}
  .kachelgitter .tile .preis{font-size:15px}
}

/* ---------- Die Kachel ----------
   GEAENDERT IN v163, nach dem Vergleich mit Airbnb.

   Die Ecken waren mit 18 Pixeln schon rund, wirkten aber weicher als
   beabsichtigt, weil das Bild bis an den Rand ging. Vierzehn ist
   naeher an dem, was die grossen Marktplaetze benutzen - genug, dass
   es nicht nach Tabelle aussieht, wenig genug, dass die Kachel
   nicht wie ein Knopf wirkt. */
.tile{border:1px solid var(--n200);border-radius:14px;overflow:hidden;background:var(--flaeche);
  transition:.18s;cursor:pointer;display:block;color:inherit}
.tile:hover{transform:translateY(-3px);border-color:var(--n300);text-decoration:none}
/* Das Bild war mit 4:3 zu hoch. In einer Reihe aus fuenf Kacheln
   nahm es zwei Drittel der Hoehe ein, und Titel, Ort und Preis
   quetschten sich darunter - man sah viele Fotos und wenig Angebote.

   3:2 ist flacher und ungefaehr das, was die grossen Marktplaetze
   zeigen. Die Breite bleibt, wie sie war: Die war nie das Problem. */
.tile .bild{aspect-ratio:3/2;background:var(--n100);position:relative;overflow:hidden}
.tile .bild img{width:100%;height:100%;object-fit:cover}
.tile .leer{width:100%;height:100%;position:relative;display:grid;place-items:center;
  background:var(--n100)}
.tile .leer img{width:100%;height:100%;object-fit:cover;opacity:.55}
.tile .leer span{position:absolute;font:600 12px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif;letter-spacing:.1em;
  text-transform:uppercase;color:#fff;background:rgba(20,26,25,.62);
  padding:5px 12px;border-radius:999px;backdrop-filter:blur(3px)}
.tile .body{padding:13px 15px 15px}

/* ---------- Titel und Bewertung ----------
   Die Quelle der Note steht als Wort dabei. Form und Farbe der Sterne
   sind deshalb auf Kachel, Angebot und Profil identisch; ein offener
   Stern als uneindeutiger Fallback-Code ist nicht mehr noetig. */
/* Titel links, Note rechts, beide auf einer Linie. gap haelt sie
   auseinander, wenn der Titel bis an die Note heranreicht. */
.tile .kopfzeile{display:flex;align-items:flex-start;gap:10px}
.tile .kopfzeile h3{flex:1;min-width:0;margin-bottom:0}
/* ---------- Die Note auf der Kachel ----------
   Ein Stern, die Zahl, die Anzahl. Der Stern traegt die Markenfarbe -
   er ist das einzige farbige Zeichen auf der Kachel und darf das auch
   sein, weil es genau eines ist. Die Anzahl steht zurueckgenommen
   daneben: ruhig, aber mit vollem Textkontrast, nicht ausgegraut.
   tabular-nums, damit die Zahlen in einer Reihe untereinander stehen
   und nicht tanzen. */
.tile .kachelnote{display:inline-flex;align-items:baseline;gap:4px;
  flex:none;min-width:0;white-space:nowrap;
  font:600 13px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  color:var(--ink);font-variant-numeric:tabular-nums}
/* --mint600 waere hier zu schwach: auf Weiss nur 2,47:1, unter den
   3:1, die fuer ein bedeutungstragendes Zeichen gelten - und der Stern
   traegt hier Bedeutung, er ist kein Zierrat. --mint700 ist der Ton,
   den die Skala ausdruecklich fuer Schrift vorsieht (4,51:1 hell) und
   der im dunklen Thema hell umschlaegt. */
.tile .kachelnote .ksterne{color:var(--mint700);font-size:12.5px;line-height:1}
.tile .kachelnote .kanzahl{font-weight:500;color:var(--n600)}
/* "Neu" ist eine Angabe ueber das Fehlen einer Note, keine Note.
   Gleiche Zeile, gleicher Stern, ruhigere Farbe. */
.tile .kachelnote.neu{color:var(--n600)}
.tile .kachelnote.neu .ksterne{color:var(--mint700)}
/* Auf schmalen Kacheln teilen sich Titel und Note eine Zeile von rund
   165 Pixeln. Dort gewinnt der Titel: "Mobil6000..." nach acht Zeichen
   abzuschneiden, um die Anzahl unterzubringen, ist der falsche Tausch -
   den Namen des Geraets braucht man zum Wiedererkennen, die Anzahl
   nicht. Die Note selbst bleibt, sie ist vier Zeichen.
   Der zugaengliche Name traegt die Anzahl weiterhin. */
@media(max-width:620px){
  .tile .kachelnote .kanzahl{display:none}
}

/* Dieselbe knappe Notenform ausserhalb der Kachel - in Nutzer- und
   Anbieterkarten. Ein Stern, eine Zahl, nachgeordnet zur grossen
   Geraetenote der Seite. */
.knappnote{display:inline-flex;align-items:baseline;gap:4px;white-space:nowrap;
  font:600 13px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  color:var(--ink);font-variant-numeric:tabular-nums}
.knappnote .ksterne{color:var(--mint700);font-size:12.5px;line-height:1}
/* Die Anzahl ist nachgeordnet, aber nicht ausgegraut: voller
   Textkontrast, nur leichteres Gewicht. Ruhig heisst nicht blass. */
.knappnote .kanzahl{font-weight:400;color:var(--n600)}
/* Eine Spur groesser, wo die Note eine ganze Liste zusammenfasst -
   ueber Bewertungen und unter dem Titel eines Angebots. */
.knappnote.gross{font-size:15px}
.knappnote.gross .ksterne{font-size:14.5px}
/* .bewertungsanzeige ist mit ihrer Funktion entfallen - die knappe
   Notenform steht als .knappnote weiter oben. */

/* Der erste Satz aus der Beschreibung. Eine Zeile, nicht mehr -
   sonst wird aus der Kachel ein Absatz. */
.tile .kurz{font-size:13px;color:var(--n600);line-height:1.4;margin:5px 0 0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  /* nowrap allein reicht nicht: Ohne min-width:0 am Elternteil zaehlt
     der Text trotzdem zur Mindestbreite. Beides zusammen schneidet
     ihn sauber ab. */
  min-width:0}

/* ---------- Der Rabatt unter dem Preis ----------
   Er steht UNTER dem Betrag und nicht daneben: Er gilt nicht fuer
   den Preis darueber, sondern erst ab einer laengeren Miete.
   Nebeneinander laese man ihn als Abzug vom gezeigten Betrag.

   Kein Prozentwert hier - der steht schon als Fahne auf dem Bild.
   Zweimal dieselbe Zahl auf einer Kachel ist einmal zu viel. */
.tile .rabattzeile{display:flex;align-items:center;gap:7px;margin-top:6px;
  flex-wrap:wrap}
.tile .rabattmarke{display:inline-block;background:var(--mint50);
  color:var(--mint800);border:1px solid var(--mint200);border-radius:999px;
  padding:2px 9px;font:600 11.5px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif}
.tile .rabattwann{font-size:11.5px;color:var(--n500);font-variant-numeric:tabular-nums}
/* Die Mint-Skala kippt im dunklen Thema: --mint200 ist hell (#A8EBCE)
   im hellen und DUNKEL (#204336) im dunklen Thema. Als Schriftfarbe auf
   einem dunklen Grund ergab das 1,26:1 - die Marke war da, aber nicht zu
   lesen. --mint800 ist die Gegenrichtung und im dunklen Thema hell. */
html[data-thema="dunkel"] .tile .rabattmarke{background:rgba(98,210,162,.12);
  border-color:rgba(98,210,162,.3);color:var(--mint800)}
.tile h3{font-size:15.5px;line-height:1.35;margin-bottom:5px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  /* Ein Titel wie "ZUTZOUTOUTOUTOITOTUZRKJRFIUZRF67" hat keine
     Trennstelle. Ohne diese Zeile schiebt er die ganze Kachel breiter
     als ihre Nachbarn - mit ihr bricht er einfach um. */
  overflow-wrap:anywhere}
.preis{font:700 17px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif;font-variant-numeric:tabular-nums;color:var(--ink)}
.preis .je{font:400 12.5px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif;color:var(--n500)}

#karte{width:100%;height:100%;background:var(--n100);z-index:1}
.leaflet-container{font-family:Inter,system-ui,sans-serif}
.preis-marker{background:var(--flaeche);border:1.5px solid var(--n300);border-radius:999px;
  padding:6px 11px;font:700 13px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif;font-variant-numeric:tabular-nums;color:var(--ink);
  box-shadow:0 3px 10px rgba(20,26,25,.18);white-space:nowrap;text-align:center;transition:.15s}
.preis-marker:hover,.preis-marker.aktiv{background:var(--btnd-bg);color:var(--btnd-fg);
  border-color:var(--btnd-bg);transform:scale(1.06)}
/* HIER STAND WEISS AUF MINT: 2,5:1 im hellen, 2,3:1 im dunklen Thema -
   beide unter den geforderten 4,5:1. Die Zahl im Marker sagt, wie viele
   Angebote darunter liegen; sie muss lesbar sein.

   --onbrand ist genau dafuer da ("Schrift auf Markenfarbe") und wird von
   .btn-mint schon so benutzt. Damit sind es 6,1:1 hell und 6,5:1 dunkel,
   und der Marker sieht endlich aus wie der Rest der Oberflaeche. */
.cluster-marker{background:var(--mint600);color:var(--onbrand);border-radius:50%;
  display:grid;place-items:center;font:700 14px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  box-shadow:0 4px 14px rgba(33,125,91,.45);border:3px solid var(--flaeche)}
.leaflet-popup-content-wrapper{border-radius:14px}
.leaflet-popup-content{margin:12px 14px;font-size:14px}

.spinner{width:34px;height:34px;border:3px solid var(--n200);border-top-color:var(--mint700);
  border-radius:50%;animation:dreh .8s linear infinite;margin:40px auto}
@keyframes dreh{to{transform:rotate(360deg)}}

.leer-box{text-align:center;padding:60px 20px;color:var(--n500)}
.leer-box .ic{font-size:44px;opacity:.4;margin-bottom:14px}
.leer-box h3{color:var(--ink);margin-bottom:8px}

/* ---------- Nutzerkarte ---------- */
.nutzerkarte{display:flex;align-items:center;gap:14px}
.nk-bild{border-radius:50%;background:linear-gradient(140deg,var(--mint),var(--mint600));
  color:#fff;display:grid;place-items:center;font-family:Poppins,system-ui,sans-serif;font-weight:700;
  flex:none;box-shadow:0 2px 8px rgba(33,125,91,.28)}
.nk-name{font:600 16px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif;line-height:1.3}
.nutzerkarte.gross .nk-name{font-size:19px;font-family:Poppins,system-ui,sans-serif;font-weight:700}
.nk-note{margin-top:2px;font-size:13.5px;display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.nk-abzeichen{margin-top:6px;display:flex;gap:5px;flex-wrap:wrap}

/* Anbieter als schmale Zeile. Vorher stand die Karte in einem leeren
   Riesenfeld - viel Rahmen um sehr wenig Inhalt. */
.anbieterzeile{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;
  border:1px solid var(--n200);border-radius:15px;padding:14px 16px;background:var(--flaeche)}
.anbieterzeile:hover{border-color:var(--mint600);background:var(--mint50)}
.anbieterzeile .nutzerkarte{flex:1;min-width:0}
.anbieterzeile .pfeilchen{flex:none;font-size:22px;color:var(--n400);line-height:1}
.anbieterzeile:hover .pfeilchen{color:var(--mint700)}
.badge.gold{background:var(--amber-bg);color:var(--amber-fg);border:1px solid #F0C87A}

/* ---------- Feinschliff: Bewegung ---------- */
.tile,.cat,.btn,.chip,.katbox,.wahlbox,.schalter,.treffer{
  transition:transform .18s cubic-bezier(.2,0,.1,1), box-shadow .18s, border-color .15s,
             background .15s}
/* ---------- Worauf man gerade zeigt ----------
   GEAENDERT IN v161.

   Die Kachel hob sich vorher nur um vier Pixel und bekam einen
   Schatten. Auf einem hellen Bildschirm sieht man das kaum - und in
   einer Reihe aus fuenf gleich aussehenden Kacheln weiss man dann
   nicht, welche man gerade anklickt.

   Jetzt kommt ein mintfarbener Rand dazu. Ein Rahmen ist deutlicher
   als ein Schatten, weil er die Kachel begrenzt statt sie nur
   anzuheben - man sieht sofort, wo sie anfaengt und aufhoert.

   Wer mit der Tastatur durchgeht, bekommt dasselbe Bild. Zwei
   verschiedene Zustaende fuer dieselbe Sache muesste man lernen. */
.tile:hover{transform:translateY(-4px);
  box-shadow:0 12px 28px rgba(20,26,25,.11), 0 0 0 2px var(--mint500);
  border-color:var(--mint500)}
.tile:focus-visible{outline:none;transform:translateY(-4px);
  box-shadow:0 12px 28px rgba(20,26,25,.11), 0 0 0 3px var(--mint600);
  border-color:var(--mint600)}
/* Beim Antippen kurz einsinken - am Handy die einzige Rueckmeldung,
   dass der Finger etwas getroffen hat. Dort gibt es kein Zeigen. */
.tile:active{transform:translateY(-1px) scale(.995)}
.tile:active{transform:translateY(-1px)}
.tile .bild img{transition:transform .5s cubic-bezier(.2,0,.1,1)}
.tile:hover .bild img{transform:scale(1.06)}
.btn:hover:not(:disabled){transform:translateY(-1px)}
.btn:active:not(:disabled){transform:translateY(0) scale(.98)}
.chip:active{transform:scale(.96)}
.nk-bild{transition:transform .2s}
.nutzerkarte:hover .nk-bild{transform:scale(1.05)}
a,button{-webkit-tap-highlight-color:transparent}

/* ---------- Einblenden beim Scrollen ---------- */
.reveal{opacity:0;transform:translateY(28px);
  transition:opacity .65s cubic-bezier(.2,0,.1,1), transform .65s cubic-bezier(.2,0,.1,1)}
.reveal.sichtbar{opacity:1;transform:none}
.reveal.v1{transition-delay:.07s}
.reveal.v2{transition-delay:.14s}
.reveal.v3{transition-delay:.21s}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  /* Wichtig: sonst blieben die Elemente unsichtbar liegen */
  .reveal{opacity:1!important;transform:none!important}
}

/* ---------- Einblendung ----------

   Frueher stand sie unten in der Mitte - direkt neben dem
   Hilfe-Knopf, der dort fest sitzt. Zwei Dinge, die sich um dieselbe
   Ecke draengeln, und die Meldung wirkte wie ein Fehler des
   Programms statt wie eine Antwort auf etwas, das man gerade getan
   hat.

   Jetzt: unten LINKS am Rechner, oben unter der Kopfzeile auf dem
   Handy. Beides weit weg vom Hilfe-Knopf. Und linksbuendig statt
   zentriert - zentrierter Fliesstext liest sich schlechter, sobald
   er ueber eine Zeile geht. */
.toast{position:fixed;left:24px;bottom:24px;transform:translateY(16px);
  background:var(--dunkel);color:#fff;padding:14px 20px;border-radius:14px;
  font:500 14.5px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif;box-shadow:0 10px 34px rgba(20,26,25,.32);z-index:9500;
  opacity:0;transition:.28s cubic-bezier(.2,0,.1,1);max-width:min(420px,92vw);
  text-align:left;line-height:1.5;
  border-left:4px solid var(--mint)}
.toast.an{opacity:1;transform:translateY(0)}
/* HIER LAG EIN FEHLER, und er hatte zwei Gesichter.
   Hier stand background:var(--amber-fg) bzw. var(--red-fg). Die
   beiden Werte sind FARBEN FUER SCHRIFT, gedacht fuer dunklen Text
   auf hellem --amber-bg. Als Hintergrund ergab --amber-fg das fast
   schwarze Braun #8A5300 - deshalb war die Warnung schwarz statt
   orange.
   Im Dunkelmodus war es schlimmer: dort kippt --amber-fg auf ein
   helles Gelb (#F5C877), waehrend die Grundregel color:#fff setzt.
   Weisse Schrift auf hellem Gelb, Kontrast etwa 1,3:1 - unlesbar.
   Dasselbe galt fuer Fehlermeldungen.
   Ein Hinweisstreifen ist eine eigene farbige Flaeche und hat sein
   eigenes Innen-Aussen-Paar. Deshalb stehen die Werte hier fest und
   kippen NICHT mit dem Thema: Orange traegt dunkle Schrift, Rot
   traegt weisse. Beide ueber 7:1 in hell wie dunkel. */
.toast.fehler{background:#A31219;color:#fff;border-left-color:#F7C1C1}
.toast.warn{background:#F5A623;color:#3B2400;border-left-color:#B4780F}
.toast.warn a{color:#3B2400}
.toast b{font-weight:600}
.toast a{color:#fff;text-decoration:underline}
@media(max-width:620px){
  /* Oben statt unten: Der Daumen liegt unten, der Blick geht oben
     hin - und der Hilfe-Knopf bleibt frei. */
  .toast{left:12px;right:12px;bottom:auto;top:78px;max-width:none;
    transform:translateY(-16px)}
  .toast.an{transform:translateY(0)}
}

/* ---------- Ladeplatzhalter ---------- */
.skel{background:linear-gradient(90deg,var(--n100) 25%,var(--n50) 50%,var(--n100) 75%);
  background-size:200% 100%;animation:sch 1.4s infinite;border-radius:12px}
@keyframes sch{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skel-kachel{border:1px solid var(--n200);border-radius:18px;overflow:hidden}
.skel-kachel .b{aspect-ratio:4/3}
.skel-kachel .z{height:13px;margin:13px 16px 0;border-radius:6px}
.skel-kachel .z.kurz{width:55%;margin-bottom:17px}

/* =====================================================================
   Laufband
   Endlos wandernde Leiste. Der Inhalt steht zweimal drin, damit der
   Sprung am Ende unsichtbar ist.
   ===================================================================== */
.laufband{position:relative;overflow:hidden;background:var(--dunkel);padding:15px 0}
.laufband::before,.laufband::after{content:"";position:absolute;top:0;bottom:0;
  width:70px;z-index:2;pointer-events:none}
.laufband::before{left:0;background:linear-gradient(90deg,var(--dunkel),transparent)}
.laufband::after{right:0;background:linear-gradient(270deg,var(--dunkel),transparent)}
.laufband .spur{display:flex;gap:44px;width:max-content;
  will-change:transform;backface-visibility:hidden;
  animation:wandern 34s linear infinite}
.laufband span{color:#fff;font:600 15px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif;white-space:nowrap;display:flex;
  align-items:center;gap:12px;opacity:.92}
.laufband span::after{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--mint);display:inline-block}
@keyframes wandern{from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}}

/* =====================================================================
   Bewertungs-Karussell
   Wischt von rechts nach links. Zeigt echte Bewertungen - oder gar nichts.
   ===================================================================== */
.karussell{position:relative;overflow:hidden}
.kspur{display:flex;transition:transform .6s cubic-bezier(.2,0,.1,1)}
.kfolie{min-width:100%;padding:0 4px;box-sizing:border-box}
.kzitat{background:var(--flaeche);border:1px solid var(--n200);border-radius:20px;padding:30px 32px}
.kzitat .txt{font-size:17px;line-height:1.68;color:var(--n700);margin:14px 0 20px}
.kpunkte{display:flex;gap:8px;justify-content:center;margin-top:20px}
.kpunkt{width:8px;height:8px;border-radius:50%;background:var(--n300);border:0;
  cursor:pointer;padding:0;transition:.2s}
.kpunkt.an{background:var(--mint600);width:26px;border-radius:4px}
.kpfeile{position:absolute;top:50%;left:0;right:0;display:flex;justify-content:space-between;
  transform:translateY(-50%);pointer-events:none;padding:0 4px}
.kpfeile button{pointer-events:auto;width:40px;height:40px;border-radius:50%;
  background:var(--flaeche);border:1px solid var(--n200);cursor:pointer;font-size:17px;
  box-shadow:0 3px 12px rgba(20,26,25,.12);color:var(--ink)}
.kpfeile button:hover{border-color:var(--mint600)}

/* =====================================================================
   Zahlenringe
   Der Ring füllt sich, sobald er ins Bild kommt.
   ===================================================================== */
.ringe{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:24px}
.ring{text-align:center}
/* Der Kreis und die Zahl liegen übereinander - deshalb ein eigener
   Rahmen mit fester Größe, in dem die Zahl exakt mittig sitzt. */
.ringkreis{position:relative;width:130px;height:130px;margin:0 auto 14px}
.ringkreis svg{transform:rotate(90deg);display:block;width:130px;height:130px}
.ring .bahn{stroke:rgba(11,44,32,.20);fill:none;stroke-width:9}
.ring .fuell{stroke:var(--mint900);fill:none;stroke-width:9;stroke-linecap:round;
  stroke-dasharray:283;stroke-dashoffset:283;
  transition:stroke-dashoffset 1.5s cubic-bezier(.2,0,.1,1)}
.ring .zahl{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;font-family:Poppins,system-ui,sans-serif;font-size:30px;font-weight:800;
  font-variant-numeric:tabular-nums;color:var(--onbrand);line-height:1}
.ring .bez{font-size:14.5px;font-weight:600;color:var(--onbrand)}


@media (prefers-reduced-motion: reduce){
  .laufband .spur{animation:none}
}


.leerbild{width:100%;max-width:190px;aspect-ratio:3/2;object-fit:cover;
  border-radius:14px;margin:0 auto 18px;opacity:.85}

/* Fotoband */
.fotoband{padding:0!important;min-height:420px;display:flex;
  align-items:center;background:#0B2C20}
.fotoband .pschleier{background:linear-gradient(100deg,rgba(11,44,32,.92) 0%,
  rgba(11,44,32,.74) 48%, rgba(11,44,32,.16) 100%)}
.fotoband .wrap{position:relative;z-index:2;padding-top:54px;padding-bottom:54px}
.fbtext{max-width:52ch}
.fotoband h2{color:#fff;margin-top:12px}
.fotoband p{color:rgba(255,255,255,.86);margin-top:14px;font-size:17px}
@media(max-width:760px){
  .fotoband{min-height:0}
  .fotoband .pschleier{background:linear-gradient(180deg,rgba(11,44,32,.9),
    rgba(11,44,32,.82))}
}

/* ---------- Laufband für Bewertungen ---------- */
.bewertungsband{position:relative;overflow:hidden;background:var(--mint100);
  border-top:1px solid var(--mint200);border-bottom:1px solid var(--mint200);
  padding:18px 0}
.bewertungsband::before,.bewertungsband::after{content:"";position:absolute;
  top:0;bottom:0;width:70px;z-index:2;pointer-events:none}
.bewertungsband::before{left:0;background:linear-gradient(90deg,var(--mint100),transparent)}
.bewertungsband::after{right:0;background:linear-gradient(270deg,var(--mint100),transparent)}
.bandkopf{font:600 13px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mint800);text-align:center;margin-bottom:14px}
.bkarte.leerbew{min-width:250px;max-width:280px;text-align:center}
.bkarte .skala{color:var(--mint200);font-size:17px;letter-spacing:3px;line-height:1}
.bkarte .krit{font:600 15px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif;color:var(--ink);margin-top:9px}
.bkarte .kritfrage{font-size:13px;color:var(--n500);margin-top:3px;line-height:1.45}
.bewertungsband .spur2{display:flex;gap:18px;width:max-content;
  will-change:transform;backface-visibility:hidden;
  animation:wandern2 48s linear infinite}
@keyframes wandern2{from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}}
.bkarte{background:var(--flaeche);border:1px solid var(--mint200);border-radius:14px;
  padding:14px 18px;min-width:300px;max-width:340px;flex:none}
.bkarte .txt2{font-size:14px;color:var(--n700);line-height:1.5;margin:7px 0 9px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bkarte .wer{font-size:12.5px;color:var(--n500)}
.bkarte .wer b{color:var(--ink);font-weight:600}

/* ---------- Abholcode ---------- */
/* Der Code ist das Wichtigste an der Uebergabe - also gehoert er nach
   vorn und nicht in einen schwarzen Kasten. Hell, mit dem QR-Code als
   Hauptsache und der Ziffernfolge darunter fuer den Fall, dass die
   Kamera streikt. */
.codebox{background:var(--flaeche);border:1px solid var(--mint200);border-radius:20px;
  padding:24px;text-align:center;margin-top:12px;
  background-image:linear-gradient(160deg,var(--mint50),transparent 58%)}
.codebox .lbl{font:600 14.5px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif;color:var(--ink)}
.codebox .qrfeld{background:#fff;border-radius:16px;padding:14px;margin:16px auto 0;
  display:inline-block;box-shadow:0 2px 14px rgba(20,26,25,.08)}
.codebox canvas{display:block;margin:0}
.codewert{font-family:Poppins,system-ui,sans-serif;font-size:31px;font-weight:800;letter-spacing:.2em;
  margin:16px 0 0;font-variant-numeric:tabular-nums;color:var(--ink)}
.codebox .untertitel{font-size:12.5px;color:var(--n500);margin-top:2px}
.codebox .hinw{color:var(--n600);font-size:13px;margin:16px auto 0;line-height:1.6;
  max-width:44ch}
.codeeingabe{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.codeeingabe input{width:150px;font-family:Poppins,system-ui,sans-serif;font-size:19px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;text-align:center;padding:11px}
.schrittleiste{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap}
.schritt{font:600 11.5px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif;padding:5px 11px;border-radius:999px;
  background:var(--n100);color:var(--n500)}
.schritt.fertig{background:var(--mint100);color:var(--mint800)}
.schritt.jetzt{background:var(--btnd-bg);color:var(--btnd-fg)}

/* ---------- Bewertungen ---------- */
.sterne{letter-spacing:1px;white-space:nowrap}
/* ---------- Sterne zum Ziehen ----------
   Kein Raster aus fuenf Knoepfen mehr, sondern ein Balken in Sternform.
   Man faehrt darueber und laesst los, wo es passt - auch mitten im
   vierten Stern. Die Zahl daneben sagt, was dabei herauskommt. */
.sternwahl{display:flex;align-items:center;gap:14px;margin-top:5px;flex-wrap:wrap}
.sw-bahn{position:relative;display:inline-block;font-size:30px;line-height:1.1;
  letter-spacing:4px;cursor:pointer;white-space:nowrap;touch-action:none;
  user-select:none;-webkit-user-select:none;padding:2px 0}
.sw-grund{color:var(--n200)}
.sw-voll{position:absolute;left:0;top:2px;overflow:hidden;white-space:nowrap;
  color:var(--amber);pointer-events:none;width:0}
.sw-bahn.vorschau .sw-voll{opacity:.5}
.sw-bahn:focus-visible{outline:2px solid var(--mint600);outline-offset:5px;
  border-radius:7px}
.sw-wert{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;
  min-width:78px;color:var(--ink)}
.sw-wert.leer{font-size:13.5px;font-weight:400;color:var(--n500)}
.sw-max{font-weight:400;color:var(--n500)}
.vonfuenf{color:var(--n500);font-weight:400}

.sternwahl span:hover{transform:scale(1.15)}
.sternwahl span.an{color:var(--amber)}
.kriterium{padding:14px 0;border-bottom:1px solid var(--n100)}
.kriterium:last-child{border-bottom:0}

/* ---------- Die Gesamtnote im Bewertungsformular ----------
   Sie ist das einzige Pflichtfeld und soll auch so aussehen: mehr
   Luft, groessere Ueberschrift, kein Trennstrich darunter, weil
   direkt danach der freiwillige Teil beginnt und nicht die naechste
   Frage. */
.kriterium.gesamtnote{border-bottom:0;padding-top:0;padding-bottom:6px}
.kriterium.gesamtnote .kname{font-size:17px}

/* ---------- Der freiwillige Kriterienblock ----------
   <details> statt eigener Klapplogik: Tastatur und Vorleser koennen
   es von Haus aus, und es bleibt bedienbar, falls das Skript
   einmal nicht laeuft.

   Zugeklappt sieht man eine Zeile. Das ist der Punkt: Wer nur die
   Sterne vergeben will, soll nicht an sechs Fragen vorbeiscrollen
   muessen, um den Absendeknopf zu finden. */
.kriterienblock{border:1px solid var(--n200);border-radius:14px;
  padding:0 16px;margin:6px 0 4px;background:var(--n50)}
.kriterienblock>summary{cursor:pointer;padding:14px 0;list-style:none;
  font:600 15px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  display:flex;align-items:center;gap:8px}
.kriterienblock>summary::-webkit-details-marker{display:none}
/* Das Dreieck zeichnen wir selbst - der Browserpfeil sitzt je nach
   System woanders und laesst sich nicht drehen. */
.kriterienblock>summary::before{content:"";width:0;height:0;flex:none;
  border-left:6px solid currentColor;border-top:4.5px solid transparent;
  border-bottom:4.5px solid transparent;transition:transform .16s}
.kriterienblock[open]>summary::before{transform:rotate(90deg)}
.kriterienblock>summary:hover{color:var(--mint700)}
.kriterienblock>summary .opt{font-weight:400;color:var(--n500);font-size:13px}
.kriterienblock .kriterium:last-child{padding-bottom:18px}

.kriterium .kname{font:600 15px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif}
.kriterium .khilfe{font-size:13px;color:var(--n500);margin:2px 0 9px}
.rezension{border-bottom:1px solid var(--n200);padding:18px 0}
.rezension:last-child{border-bottom:0}
.rezension .kopf{display:flex;align-items:center;gap:11px;margin-bottom:8px}
.rezension .txt{font-size:15px;color:var(--n700);line-height:1.65;margin-top:8px;
  white-space:pre-wrap}
.rezension .antwort{background:var(--n50);border-radius:12px;padding:12px 14px;
  margin-top:12px;font-size:14px;color:var(--n600)}
/* Die Teilnoten als Block - zwei Spalten, wo Platz ist. */
.notenblock{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:2px 34px;margin-bottom:22px}
.notenblock:empty{display:none}
.balkenzeile{display:grid;grid-template-columns:150px 1fr 40px;gap:10px;
  align-items:center;font-size:14px;padding:5px 0}
.balkenzeile .bar{height:7px;background:var(--n200);border-radius:4px;overflow:hidden}
/* HIER WAR ORANGE. Es war die einzige orange Flaeche im ganzen
   Produkt - GETLEND ist mint. Damit sah die Aufschluesselung aus wie
   ein fremdes Bauteil, und weil sie direkt unter der Note steht, wirkte
   sie wie eine dritte, konkurrierende Bewertungsdarstellung.

   Die Aufschluesselung selbst bleibt: "4,2" kann "ueberall gut" oder
   "top Geraet, miese Kommunikation" heissen, und das will man vor dem
   Buchen wissen. Sie ist eine Analyse, keine Zusammenfassung - dafuer
   ist ein Balken je Kriterium genau richtig. Nur die Farbe gehoert
   ins System. */
.balkenzeile .bar i{display:block;height:100%;background:var(--mint600);border-radius:4px}
.balkenzeile .wert{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}

/* ---------- Grüne Abschnitte, damit unten nicht alles weiss ist ---------- */
.sec-foto2{color:#fff;background:#0B2C20}
.sec-foto2 .pschleier{background:linear-gradient(rgba(11,44,32,.9),rgba(11,44,32,.78))}
.sec-foto2 h2{color:#fff}
.sec-foto2 p{color:rgba(255,255,255,.84)}
/* .sec-foto2 hat einen FESTEN dunklen Grund, in beiden Themen. Ein
   Token, das mit dem Thema kippt, passt darum nicht: --mint300 ist im
   dunklen Thema selbst dunkel und ergab 1,88:1. Feste Flaeche, feste
   Schrift - dieselbe Regel, die bei den Hinweisstreifen gilt. */
.sec-foto2 .eyebrow{color:#86DFB9}
.sec-foto2 .karte-vorschau{border-color:rgba(255,255,255,.28);
  box-shadow:0 18px 50px rgba(0,0,0,.3)}

.sec-foto{color:#fff;background:#0B2C20}
.sec-foto .pschleier{background:linear-gradient(rgba(11,44,32,.87),rgba(11,44,32,.75))}
.sec-foto h2,.sec-foto h3{color:#fff}
.sec-foto p{color:rgba(255,255,255,.84)}
.sec-foto .eyebrow{color:#86DFB9}  /* fester Grund, feste Schrift - siehe .sec-foto2 */
.sec-foto .ring .bahn{stroke:rgba(255,255,255,.22)}
.sec-foto .ring .fuell{stroke:var(--mint)}
.sec-foto .ring .zahl{color:#fff}
.sec-foto .ring .bez{color:rgba(255,255,255,.88)}
.sec-foto .kfolie .karte{color:var(--ink)}
.sec-zart{background:var(--mint50)}
.abschluss{color:#fff;padding:110px 0;text-align:center;background:#0B2C20}
.abschluss .pschleier{background:linear-gradient(rgba(11,44,32,.86),rgba(11,44,32,.74))}
.abschluss .wrap{position:relative;z-index:2}
.abschlusslogo{height:46px;width:auto;margin:0 auto 26px;opacity:.95}
.abschluss h2{color:#fff;font-size:clamp(26px,3.4vw,36px)}
.abschluss p{color:rgba(255,255,255,.86);max-width:46ch;margin:14px auto 0;font-size:17px}
.aknoepfe{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.btn-rand{border-color:rgba(255,255,255,.55);color:#fff;background:transparent}
.btn-rand:hover{background:rgba(255,255,255,.16);border-color:#fff}

footer.bot{background:var(--dunkel);border-top:0;padding:44px 0 30px;margin-top:0;color:#fff}
footer.bot .inner{color:rgba(255,255,255,.7)}
footer.bot a{color:rgba(255,255,255,.86);display:inline-flex;align-items:center;
  min-block-size:24px}
footer.bot a:hover{color:#fff}
footer.bot .inner{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;
  font-size:14px;color:var(--n600)}
footer.bot a{color:var(--n600);margin-left:20px}

/* Kleine Textlinks bleiben optisch klein, bekommen aber eine sichere
   Touchflaeche. Das ist besonders bei Passwort- und Stornohinweisen
   relevant, die zuvor nur 15 bis 17 Pixel hoch waren. */
.tiny a{display:inline-flex;align-items:center;min-block-size:24px}


/* ---------- Bildebene, die beim Scrollen sanft nachzieht ---------- */
.parallax{position:relative;overflow:hidden;isolation:isolate}
/* Die Bildebene ist nur wenig hoeher als der Abschnitt selbst und
   wandert beim Scrollen gedaempft mit.

   Vorher war sie eine volle Fensterhoehe hoch. Bei einem Abschnitt von
   400 Pixeln musste ein 1000 Pixel hohes Bild formatfuellend hineinpassen -
   dabei wird es so weit vergroessert, dass vom Boot nur noch das Heck
   uebrig bleibt. Mit wenig Ueberhoehe bleibt das Motiv erhalten und die
   Bewegung ist trotzdem da. */
/* Die Bildebene steht so gross wie das Fenster und wird beim Scrollen
   genau um die Position des Abschnitts zurueckgeschoben. Dadurch bleibt
   sie im Fenster stehen - dasselbe Bild wie frueher mit
   background-attachment:fixed, aber ohne dessen Zeichenaufwand.
   Die Hoehe setzt app.js auf die echte Fensterhoehe. */
/* background-size:cover ist der Grund fuer den engen Ausschnitt - es
   vergroessert das Bild, bis die ganze Ebene gefuellt ist, und die
   Ebene muss hoch sein, damit Bewegung moeglich ist.

   100% auto bindet das Bild an die Breite. Es wird nie weiter
   vergroessert als noetig, man sieht es in voller Breite, und der
   Ueberstand nach oben und unten ist genau der Bewegungsweg.
   Hoehe und Groesse setzt app.js, gemessen am Bild selbst. */
.parallax > .pbild{position:absolute;left:0;right:0;top:0;height:100vh;
  background-size:100% auto;background-position:center;
  background-repeat:no-repeat;background-color:#0B2C20;
  transform:translate3d(0,var(--verschub,0px),0);
  will-change:transform;backface-visibility:hidden;z-index:0}
/* Wer keine Bewegung moechte, bekommt ein Bild, das den Abschnitt fuellt. */
.parallax.ruhig > .pbild{top:0;height:100%;transform:none;will-change:auto}
.parallax > .pschleier{position:absolute;inset:0;z-index:1;pointer-events:none}
.parallax > .wrap{position:relative;z-index:2}


/* ---------- Sprachwahl ---------- */
/* Sprache und Design gehoeren nebeneinander. Ohne diese Zeile ist
   .menuzeile ein gewoehnlicher Block - und .sprachwahl, selbst ein
   Block, schiebt den Themaschalter eine Zeile tiefer. In der
   Kopfzeile sah das aus wie zwei uebereinandergestapelte Knoepfe. */
.menuzeile{display:flex;align-items:center;gap:10px;flex:none}

.minilink{display:block;flex:none;line-height:0;border-radius:11px;
  transition:.15s}
.minilink:hover{opacity:.85;transform:scale(1.03)}
.titellink{color:inherit;text-decoration:none}
.titellink:hover{color:var(--mint700);text-decoration:none}

/* Rein oder raus - ein Pfeil sagt es schneller als ein Vorzeichen,
   das man erst am rechten Rand findet. */
.richtung{display:inline-grid;place-items:center;width:19px;height:19px;
  border-radius:50%;font:700 12px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif;margin-right:7px;vertical-align:-3px}
.richtung.rein{background:var(--mint100);color:var(--mint800)}
.richtung.raus{background:#FDE5E6;color:#A31219}
html[data-thema="dunkel"] .richtung.rein{background:rgba(98,210,162,.18);color:var(--mint)}
html[data-thema="dunkel"] .richtung.raus{background:rgba(226,75,74,.2);color:#F09595}

/* ---------- Profilbild zuschneiden ----------
   Der Kreis liegt als Maske ueber dem Bild. Alles ausserhalb wird
   abgedunkelt - so sieht man sofort, was spaeter sichtbar ist. */
.zuschnitt{position:fixed;inset:0;z-index:9600;background:rgba(11,44,32,.62);
  display:grid;place-items:center;padding:20px;backdrop-filter:blur(2px)}
.zukasten{background:var(--flaeche);border-radius:20px;padding:24px;
  max-width:330px;width:100%;box-shadow:0 20px 60px rgba(20,26,25,.35)}
.zutitel{font:700 18px Poppins,"Avenir Next","Segoe UI",system-ui,-apple-system,Arial,sans-serif;margin-bottom:4px}
.zubuehne{position:relative;width:260px;height:260px;margin:0 auto;
  overflow:hidden;border-radius:14px;background:var(--n100);
  cursor:grab;touch-action:none;user-select:none}
.zubuehne:active{cursor:grabbing}
.zubuehne img{position:absolute;left:0;top:0;max-width:none;
  transform-origin:0 0;pointer-events:none;-webkit-user-drag:none}
/* Ein Kreis mit einem riesigen Schatten AUSSEN herum. Die Buehne
   schneidet ihn ab (overflow:hidden) - uebrig bleibt ein dunkler
   Rahmen mit einem klaren Loch in der Mitte. Ein inset-Schatten
   waere genau falsch herum: Der wuerde den Kreis abdunkeln. */
.zumaske{position:absolute;inset:0;pointer-events:none;
  border-radius:50%;
  box-shadow:0 0 0 999px rgba(20,26,25,.55);
  border:2px solid rgba(255,255,255,.9)}

/* ---------- Der Kontoknopf mit Profilbild ----------
   Am Rechner Bild plus Text, auf dem Handy nur das Bild. Ein Foto
   erkennt man schneller als das Wort "Konto" - und es beantwortet
   nebenbei die Frage, ob man ueberhaupt angemeldet ist. */
.kontoknopf{display:inline-flex;align-items:center;gap:9px;flex:none;
  border:1.5px solid var(--n200);border-radius:999px;padding:5px 14px 5px 5px;
  background:var(--flaeche);color:var(--ink);font:600 14px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  text-decoration:none;transition:.16s}
.kontoknopf:hover{text-decoration:none;border-color:var(--n300);background:var(--n50)}
.kkbild{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:none;display:block}
.kkinitialen{background:var(--mint100);color:var(--mint800);
  display:grid;place-items:center;font:700 12px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif}
html[data-thema="dunkel"] .kkinitialen{background:rgba(98,210,162,.18);color:var(--mint)}
/* Der Knopf neben "Inserieren" zeigt nur das Bild. Der im Menue
   behaelt seinen Text - dort ist Platz, und eine Reihe nackter
   Symbole in einer Schublade raet sich schlecht. */
.kontoknopf.nurschmal{padding:0;border:0;background:none}
/* Das Profil oben ist ein Kreis im Kreis, keine Pille um ein rundes
   Bild. Feste Masse halten Ring und Initialen bei 1× wie 2× DPR exakt
   zentriert. */
.topnav > .kontoknopf{width:42px;height:42px;padding:4px;border-radius:50%;justify-content:center;line-height:1}
.topnav > .kontoknopf .kkbild{width:32px;height:32px}
.profilklapp{position:relative;flex:none}
.profilknopf{min-width:42px;height:42px;padding:5px 12px 5px 5px;border-radius:999px;
  justify-content:flex-start;line-height:1;cursor:pointer}
.profilknopf .kkbild{width:32px;height:32px}
.profilname{max-width:13ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profilpfeil{font-size:16px;line-height:1;color:var(--n500);margin-left:1px}
.profiltafel{display:none;position:absolute;right:0;top:calc(100% + 9px);z-index:940;
  min-width:224px;padding:7px;background:var(--flaeche);border:1px solid var(--n200);
  border-radius:15px;box-shadow:0 18px 48px rgba(20,26,25,.16)}
.profilklapp.auf .profiltafel{display:block}
.profiltafel a,.profiltafel button{display:flex;width:100%;align-items:center;text-align:left;
  border:0;border-radius:9px;padding:10px 11px;background:none;color:var(--ink);cursor:pointer;
  font:500 14px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  text-decoration:none}
.profiltafel a:hover,.profiltafel button:hover{background:var(--n50);text-decoration:none}
.profiltafel a:focus-visible,.profiltafel button:focus-visible{outline:2px solid var(--mint600);outline-offset:-2px}
.profiltrenner{height:1px;margin:6px 4px;background:var(--n200)}
.profilpraeferenzen{display:flex;align-items:center;gap:10px;padding:7px 5px 5px}
.profilpraeferenzlabel{font-size:13px;color:var(--n500);flex:1}
.profilsprachwahl{flex:none}
.profilsprachwahl .sprachknopf{height:32px;padding:0 8px}
.profilthema{display:inline-flex !important;transform:scale(.82);transform-origin:right center}
@media(max-width:860px){
  .kontoknopf.nurschmal .kkbild{width:36px;height:36px}
  .topnav .right .kontoknopf{width:100%;justify-content:flex-start;
    padding:8px 14px 8px 8px;min-height:46px}
}
.sprachwahl{position:relative;flex:none}
.sprachknopf{display:flex;align-items:center;gap:7px;height:34px;padding:0 11px;
  border:1.5px solid var(--n200);border-radius:999px;background:var(--n50);
  cursor:pointer;font:600 13px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif;color:var(--n700);transition:.18s}
.sprachknopf:hover{border-color:var(--n300);color:var(--ink)}
.sprachknopf:focus-visible{outline:2px solid var(--mint600);outline-offset:2px}
.flagge{width:20px;height:14px;border-radius:3px;overflow:hidden;flex:none;
  display:block;box-shadow:0 0 0 1px rgba(20,26,25,.14) inset}
.flagge svg{width:100%;height:100%;display:block}
.sprachliste{position:absolute;right:0;top:calc(100% + 8px);z-index:1000;
  background:var(--flaeche);border:1px solid var(--n200);border-radius:14px;
  padding:6px;min-width:170px;box-shadow:0 12px 34px rgba(var(--schatten),.18)}
.sprachliste button{display:flex;align-items:center;gap:10px;width:100%;
  padding:9px 11px;border:0;border-radius:10px;background:none;cursor:pointer;
  font:500 14.5px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif;color:var(--n700);text-align:left}
.sprachliste button:hover{background:var(--n50);color:var(--ink)}
.sprachliste button.an{background:var(--mint50);color:var(--mint800);font-weight:600}
@media(max-width:520px){.sprachknopf .kuerzel{display:none}
  .sprachknopf{padding:0 9px}}

/* ---------- Ankreuzschalter ----------
   Standen bisher NUR in inserieren.html. Auf der Kontoseite wurden
   dieselben Klassen benutzt - dort gab es sie aber nicht, also
   erschienen die E-Mail-Schalter als nackte Zeilen mit einem
   verirrten Haken. Jetzt einmal zentral, damit sie ueberall gleich
   aussehen. */
.schalter{display:flex;align-items:flex-start;gap:12px;border:1.5px solid var(--n200);
  border-radius:14px;padding:14px;cursor:pointer;transition:.15s;margin-bottom:10px}
.schalter:hover{border-color:var(--n300)}
.schalter.on{border-color:var(--mint600);background:var(--mint50)}
.kastl{width:22px;height:22px;border-radius:7px;border:1.5px solid var(--n300);flex:none;
  display:grid;place-items:center;color:transparent;font-size:12px;margin-top:2px;
  transition:.15s}
.schalter.on .kastl{background:var(--mint700);border-color:var(--mint700);color:#fff}

/* ---------- Wer ist angemeldet ----------
   Steht oben in der Schublade: Name und Mailadresse, darunter der
   Weg hinaus.

   Hier stand bis v157 auch das alte Klappmenue unter dem Profilbild
   (.kontobox, .kontomenue, .kmraus, .kmtrenner). Seit v146 fuehrt
   jeder Weg durch die Schublade, das Klappmenue wurde nie mehr
   gebaut - die Regeln standen nur noch da. Entfernt.

   .kmkopf, .kmname und .kmmail sind geblieben: Die braucht die
   Schublade weiter (siehe app.js, "kmkopf"). */
.kmkopf{padding:11px 12px 12px;border-bottom:1px solid var(--n200);margin-bottom:6px}
.kmidentitaet{display:flex;align-items:center;gap:11px}
.kmidentitaettext{min-width:0;flex:1}
.kmavatar{flex:none;display:flex;align-items:center;justify-content:center}
.kmavatar .kkbild{width:38px;height:38px;font-size:13px}
.kmname{font:700 15px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif;color:var(--ink);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kmmail{font:400 12.5px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif;color:var(--n500);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ---------- Umschalter hell / dunkel ---------- */
.themaschalter{position:relative;flex:none;width:58px;height:30px;padding:0;
  border:1.5px solid var(--n200);border-radius:999px;background:var(--n50);
  cursor:pointer;transition:background .2s,border-color .2s}
.themaschalter:hover{border-color:var(--n300)}
.themaschalter svg{position:absolute;top:50%;transform:translateY(-50%);
  width:14px;height:14px;pointer-events:none;transition:opacity .25s}
.themaschalter .sonne{left:6px;color:var(--amber);opacity:1}
.themaschalter .mond{right:6px;color:var(--n400);opacity:.5}
html[data-thema="dunkel"] .themaschalter .sonne{opacity:.45}
/* Der Mond zeigt an, dass das dunkle Thema laeuft - im dunklen Thema.
   Genau dort war --mint300 aber selbst dunkel: 2,02:1 gegen die Leiste,
   unter den 3:1, die fuer Bedienelemente gelten. --mint700 ist im
   dunklen Thema hell und bringt 10:1. */
html[data-thema="dunkel"] .themaschalter .mond{color:var(--mint700);opacity:1}
.themaschalter .knopf{position:absolute;top:2px;left:2px;width:23px;height:23px;
  border-radius:50%;background:var(--flaeche);
  box-shadow:0 1px 5px rgba(var(--schatten),.3);
  transition:transform .3s cubic-bezier(.4,0,.2,1)}
html[data-thema="dunkel"] .themaschalter .knopf{transform:translateX(28px)}
.themaschalter:focus-visible{outline:2px solid var(--mint600);outline-offset:2px}
@media(max-width:400px){.themaschalter{display:none}}

/* Kartenkacheln von OpenStreetMap sind hell - im dunklen Design umkehren */
html[data-thema="dunkel"] .leaflet-tile{
  filter:invert(1) hue-rotate(180deg) brightness(.94) contrast(.86) saturate(.7)}
html[data-thema="dunkel"] .leaflet-container{background:#1B2220}
html[data-thema="dunkel"] .leaflet-control-attribution{
  background:rgba(21,27,25,.8)!important;color:var(--n500)!important}
html[data-thema="dunkel"] .leaflet-control-attribution a{color:var(--n600)!important}
/* Fotos einen Hauch ruhiger, damit sie nachts nicht blenden */
html[data-thema="dunkel"] .tile .bild img,
html[data-thema="dunkel"] .katkarte img{filter:brightness(.9)}

/* ---------- Eigener Standort auf der Karte ---------- */
.standortknopf{width:40px;height:40px;border:0;border-radius:11px;cursor:pointer;
  background:#fff;color:#141A19;display:grid;place-items:center;
  box-shadow:0 1px 5px rgba(0,0,0,.35);margin:0 10px 10px 0;transition:.15s}
.standortknopf:hover{color:#141A19}
.standortknopf.an{color:#1A73E8}
.standortknopf.sucht{opacity:.6;cursor:progress}
.standortknopf svg{width:21px;height:21px}
html[data-thema="dunkel"] .standortknopf{background:#232B29;color:#B7C3BE}
html[data-thema="dunkel"] .standortknopf.an{color:#7FB3F5}

.standortpunkt{width:18px;height:18px;border-radius:50%;background:#1A73E8;
  border:3px solid #fff;box-shadow:0 0 0 1px rgba(26,115,232,.5),
  0 2px 6px rgba(0,0,0,.35);position:relative}
.standortpunkt::after{content:"";position:absolute;inset:-9px;border-radius:50%;
  background:rgba(26,115,232,.28);animation:pulsieren 2.4s ease-out infinite}
@keyframes pulsieren{
  0%{transform:scale(.6);opacity:.9}
  70%{transform:scale(1.6);opacity:0}
  100%{transform:scale(1.6);opacity:0}
}
@media (prefers-reduced-motion: reduce){
  .standortpunkt::after{animation:none;opacity:.35;transform:scale(1.1)}
}

/* ---------- Hilfe-Chat ---------- */
#hilfechat{position:fixed;right:20px;bottom:20px;z-index:9500;
  font-family:Inter,system-ui,sans-serif}

/* HIER LAG EIN FEHLER, den man nur am Handy sieht.

   Der Chatknopf sitzt unten rechts. Auf der Angebotsseite sitzt dort
   auch die feste Buchungsleiste - und weil der Chat bei z-index 9500
   liegt und die Leiste bei 900, lag der Chatknopf genau auf dem
   Buchen-Knopf. Man tippte auf "Jetzt buchen" und oeffnete den Chat.

   Er ganz von der Seite zu nehmen waere zu viel: Gerade beim Buchen
   hat man Fragen. Er rueckt jetzt nur so weit hoch, dass er ueber
   der Leiste steht statt darauf.

   Dieselbe Zahl wie bei der Blase - eine Stelle, nicht zwei. */
body.hatleiste #hilfechat{bottom:calc(var(--leistenhoehe, 74px) + 16px)}
/* Solange die Zeitraumwahl offen ist, tritt der Hilfe-Knopf beiseite.
   Ihre Knoepfe "Löschen" und "Fertig" sitzen unten rechts im Kasten
   und stossen dort auf ihn. Gesetzt wird die Klasse in app.js beim
   Auf- und Zuklappen. */
body.zeitwahloffen #hilfechat{opacity:0;pointer-events:none}
/* DER HILFE-KNOPF SASS AUF DER KARTE.

   Auf der Suchseite steht am Handy unten mittig der Umschalter
   "Karte", und die Karte selbst legt ihre Herkunftsangabe unten
   rechts ab - beides genau dort, wo der Hilfe-Knopf klebt. Er ist
   rund und dunkel, man sieht nicht, dass darunter noch etwas liegt,
   und treffen kann man es schon gar nicht.

   Also raeumt der Hilfe-Knopf das Feld: eine Reihe hoeher, sobald ein
   Umschalter da ist. Und die Herkunftsangabe von OpenStreetMap
   bekommt rechts Platz - die muss lesbar bleiben, das ist keine
   Geschmacksfrage, sondern die Lizenz. */
/* Das Ausweichen vor dem Umschalter steht in suchen.html - nur dort
   gibt es ihn, und nur in einem bestimmten Groessenbereich. Eine
   Regel hier haette eine Klasse am body gebraucht, die jemand setzen
   muss; vergisst man das einmal, sitzt der Knopf wieder falsch. */
.leaflet-bottom.leaflet-right{padding-right:74px}
@media(max-width:520px){ .leaflet-bottom.leaflet-right{padding-right:66px} }
.chatknopf{display:flex;align-items:center;gap:9px;height:52px;padding:0 20px 0 17px;
  border:0;border-radius:999px;background:var(--mint);color:var(--onbrand);
  font:600 15px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif;cursor:pointer;
  box-shadow:0 8px 26px rgba(11,44,32,.28);transition:.2s}
.chatknopf:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(11,44,32,.34)}
.chatknopf svg{width:21px;height:21px;flex:none}
.chatknopf:focus-visible{outline:3px solid var(--mint800);outline-offset:2px}

.chatfenster{position:absolute;right:0;bottom:64px;width:370px;max-width:calc(100vw - 32px);
  height:540px;max-height:calc(100vh - 120px);display:flex;flex-direction:column;
  background:var(--flaeche);border:1px solid var(--n200);border-radius:20px;
  overflow:hidden;box-shadow:0 24px 60px rgba(var(--schatten),.28)}
.chatkopf{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:15px 17px;background:var(--dunkel);color:#fff;flex:none}
.chatkopf b{font:700 16px Poppins,"Avenir Next","Segoe UI",system-ui,-apple-system,Arial,sans-serif;display:block}
.chatlage{font-size:12.5px;color:rgba(255,255,255,.7)}
.chatzu{border:0;background:none;color:rgba(255,255,255,.8);font-size:26px;
  line-height:1;cursor:pointer;padding:0 4px}
.chatzu:hover{color:#fff}

.chatverlauf{flex:1;overflow-y:auto;padding:16px;display:flex;
  flex-direction:column;gap:10px}
.cnachricht{max-width:84%;padding:10px 14px;border-radius:15px;font-size:14.5px;
  line-height:1.55;word-wrap:break-word}
.cnachricht.chat{background:var(--n50);border:1px solid var(--n200);
  color:var(--ink);align-self:flex-start;border-bottom-left-radius:5px}
.cnachricht.ich{background:var(--mint);color:var(--onbrand);
  align-self:flex-end;border-bottom-right-radius:5px}
.cnachricht.tippt{display:flex;gap:4px;align-items:center;padding:14px}
.cnachricht.tippt span{width:7px;height:7px;border-radius:50%;background:var(--n400);
  animation:tippen 1.3s infinite}
.cnachricht.tippt span:nth-child(2){animation-delay:.18s}
.cnachricht.tippt span:nth-child(3){animation-delay:.36s}
@keyframes tippen{0%,60%,100%{opacity:.3;transform:translateY(0)}
  30%{opacity:1;transform:translateY(-3px)}}

.cnachricht.hinweis{background:var(--amber-bg);border:1px solid var(--amber);
  color:var(--amber-fg);font-size:13px;max-width:100%}

.chatvorschlaege{display:flex;flex-wrap:wrap;gap:7px;padding:0 16px 12px;flex:none}
.chatvorschlaege button{border:1.5px solid var(--n200);background:var(--flaeche);
  border-radius:999px;padding:7px 13px;font:500 13px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif;color:var(--n600);
  cursor:pointer;transition:.15s;text-align:left}
.chatvorschlaege button:hover{border-color:var(--mint600);color:var(--ink)}
.chatvorschlaege .anmensch{background:var(--mint100);border-color:var(--mint600);
  color:var(--mint800);font-weight:600;width:100%;text-align:center}

.chatzeile{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--n200);flex:none}
.chatzeile input{flex:1;border-radius:999px;padding:11px 16px;font-size:14.5px}
.chatzeile button{flex:none;width:42px;height:42px;border:0;border-radius:50%;
  background:var(--mint);color:var(--onbrand);cursor:pointer;display:grid;place-items:center}
.chatzeile button:hover{background:var(--mint500)}
.chatzeile button svg{width:19px;height:19px}

.chatfuss{padding:0 16px 12px;font-size:11.5px;line-height:1.5;color:var(--n500);flex:none}
.chatfuss a{color:var(--mint700)}

.chatformular{position:absolute;inset:56px 0 0;background:var(--flaeche);
  padding:20px 18px;overflow-y:auto;z-index:3}
.chatformular h3{font-size:17px;margin-bottom:5px}
.chatformular .field{margin-bottom:13px}
.chatformular input,.chatformular textarea{font-size:14.5px;padding:11px 13px}

@media(max-width:520px){
  #hilfechat{right:14px;bottom:14px}
  .chatknopf span{display:none}
  .chatknopf{width:52px;padding:0;justify-content:center}
  /* Auf der Kartenansicht sitzt die Hilfe-Blase hoeher, damit sie
     Bereichssuche und Liste nicht verdeckt. Das Panel darf deshalb
     nicht einfach die restliche Standardhoehe beanspruchen - sonst
     ragt es am oberen Bildschirmrand aus dem Viewport. */
  .chatfenster{width:calc(100vw - 28px);height:min(540px,calc(100vh - 180px));
    max-height:calc(100vh - 180px)}
}
@media (prefers-reduced-motion: reduce){
  .cnachricht.tippt span{animation:none;opacity:.55}
}

/* ---------- Abholadresse ---------- */
.adressfeld{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;
  background:var(--n50);border-radius:16px;padding:16px 18px;margin-top:12px}
.adressfeld .ort{flex:1 1 200px}
.adressfeld .ort .a{font-weight:600;font-size:15px;margin-top:3px}

/* ---------- Zahlungen und Belege ---------- */
.zahltabelle{width:100%;border-collapse:collapse;font-size:14.5px;
  table-layout:auto}
.zahltabelle th{text-align:left;font:600 12.5px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif;color:var(--n500);
  text-transform:uppercase;letter-spacing:.06em;padding:0 16px 10px 0;
  border-bottom:1px solid var(--n200);white-space:nowrap}
.zahltabelle td{padding:15px 16px 15px 0;border-bottom:1px solid var(--n100);
  vertical-align:middle}
/* Betrag und Beleg brauchen jeder eine eigene Spalte mit eigener Breite.
   Vorher klebte der Knopf am Betrag und verdeckte das Euro-Zeichen. */
.zahltabelle th.betrag,.zahltabelle td.betrag{text-align:right;
  font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap;
  width:1%;font-size:15.5px}
.zahltabelle th.tat,.zahltabelle td.tat{width:1%;white-space:nowrap;
  text-align:right;padding-right:0}
.zahltabelle .plus{color:var(--mint700)}
.zahltabelle tr:last-child td{border-bottom:0}
.jahrsumme{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:13px;margin-bottom:24px}
.jahrsumme .js{background:var(--n50);border-radius:15px;padding:16px 18px}
.jahrsumme .js .n{font:700 22px Poppins,"Avenir Next","Segoe UI",system-ui,-apple-system,Arial,sans-serif;font-variant-numeric:tabular-nums;margin-top:3px}
@media(max-width:700px){
  .zahltabelle thead{display:none}
  .zahltabelle tr{display:grid;grid-template-columns:1fr auto;gap:2px 12px;
    align-items:center;border-bottom:1px solid var(--n200);padding:14px 0}
  .zahltabelle td{display:block;border:0;padding:0}
  .zahltabelle td:nth-child(1){grid-column:1/2;order:1;font-size:12.5px;
    color:var(--n500)}
  .zahltabelle td:nth-child(2){grid-column:1/2;order:3}
  .zahltabelle td:nth-child(3){grid-column:1/2;order:4}
  .zahltabelle td.betrag{grid-column:2/3;order:2;text-align:right}
  .zahltabelle td.tat{grid-column:2/3;order:5;text-align:right;margin-top:6px}
}

/* ---------- Nachrichten ---------- */
.chatbox{background:var(--n50);border-radius:16px;padding:16px}
.faden{display:flex;flex-direction:column;gap:10px;max-height:340px;overflow-y:auto;
  padding-right:4px}
.blase{max-width:78%;padding:11px 14px;border-radius:15px;font-size:14.5px;
  line-height:1.55;white-space:pre-wrap;word-break:break-word;
  background:var(--flaeche);border:1px solid var(--n200)}
.blase.ich{align-self:flex-end;background:var(--mint600);color:#fff;border-color:transparent}

/* ---------- Der Hinweis des Vermieters ----------
   HIER WAR ETWAS FALSCH: Er stand mittig, gestrichelt umrandet und
   halb so breit - wie ein Systemhinweis, nicht wie etwas, das ein
   Mensch geschrieben hat. Genau das ist er aber: Der Vermieter hat
   ihn am Inserat hinterlegt, damit ihn jeder Mieter automatisch
   bekommt.

   Jetzt sieht er aus wie das, was er ist - eine Nachricht von ihm,
   links wie alle anderen von ihm. Nur der Ton bleibt etwas ruhiger:
   ein Strich an der Seite und ein Wort darueber, damit niemand
   zurueckschreibt und auf Antwort wartet. */
.blase.auto{align-self:flex-start;max-width:82%;
  background:var(--flaeche);border:1px solid var(--n200);
  border-left:3px solid var(--mint600);border-radius:15px}
.blase.auto .wer{color:var(--mint700);opacity:1;
  display:flex;align-items:center;gap:5px}
.blase.auto .wer::before{content:"\1F4CC";font-size:11px}
html[data-thema="dunkel"] .blase.auto .wer{color:var(--mint300,#8FE3BE)}
.blase.auto .autohinweis{display:block;font-size:11.5px;color:var(--n500);
  margin-top:6px;font-style:italic}
.blase .wer{font:600 12px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif;opacity:.72;margin-bottom:3px}
.blase.ich .wer{color:rgba(255,255,255,.8)}
.blase .zeit{font-size:11.5px;opacity:.6;margin-top:5px}
.schreibfeld{display:flex;gap:8px;margin-top:14px;align-items:flex-end}
.schreibfeld textarea{flex:1;min-height:44px;max-height:150px;resize:vertical;
  padding:11px 13px;font-size:14.5px}
.bausteine{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px;align-items:center}
.baustein{border:1px solid var(--n200);background:var(--flaeche);border-radius:999px;
  padding:6px 12px;font:500 13px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif;color:var(--n600);cursor:pointer;
  max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.baustein:hover{border-color:var(--mint600);color:var(--ink)}
.tat .zahl{display:inline-grid;place-items:center;min-width:19px;height:19px;
  padding:0 5px;margin-left:6px;border-radius:999px;background:var(--mint600);
  color:#fff;font:700 11.5px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif}
.textfelder .field{margin-bottom:16px}
.textfelder textarea{min-height:88px;resize:vertical}

/* Abholung und Rueckgabe nebeneinander, beide gleich wichtig */
.zweizeiten{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:4px;
  max-width:420px}
@media(max-width:520px){.zweizeiten{grid-template-columns:1fr}}
.ztitel{font:600 12.5px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif;color:var(--n600);margin-bottom:5px}
.zweizeiten input{width:100%}

/* Abholung und Rueckgabe als zwei feste Karten - der Mieter waehlt
   nur die Tage, die Uhrzeiten kommen vom Vermieter. */
.zeitkarte{display:flex;align-items:stretch;gap:10px;margin-top:4px}
.zeitkarte .zk{flex:1;background:var(--n50);border-radius:14px;padding:13px 15px}
.zeitkarte .zk.offen{border:1.5px dashed var(--n200);background:transparent}
.zeitkarte .zk .wann{font-weight:700;font-size:15px;margin-top:3px}
.zeitkarte .zk .zeit{font-size:14px;color:var(--n600);margin-top:1px;
  font-variant-numeric:tabular-nums}
.zeitkarte .zpfeil{align-self:center;color:var(--n400);font-size:19px}

/* Feste Zeitblöcke wie beim Bootsverleih. Gruen frei, rot vergeben -
   dieselbe Sprache wie im Kalender darueber. */
.bloecke{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:4px 0 2px}
@media(max-width:380px){.bloecke{grid-template-columns:1fr}}
.block{display:flex;flex-direction:column;gap:2px;text-align:left;
  border:1.5px solid var(--mint100);background:var(--mint50);border-radius:12px;
  padding:11px 13px;cursor:pointer;font-family:Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif}
.block:hover{border-color:var(--mint600)}
.block.on{border-color:var(--mint600);background:var(--mint100)}
.block b{font-size:14.5px;color:var(--ink);font-variant-numeric:tabular-nums}
.block span{font-size:12.5px;color:var(--mint800);font-weight:600}
.block.weg{background:#FDECEC;border-color:#F7D4D5;cursor:not-allowed}
.block.weg b{color:#C0454A}
.block.weg span{color:#C0454A;font-weight:500}

/* ---------- Mieten oder vermieten ---------- */
.rollenschalter{display:inline-flex;gap:4px;background:var(--n100);border-radius:12px;
  padding:4px;margin-bottom:22px}
.rollenschalter button{border:0;background:none;font:600 14.5px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif;color:var(--n600);
  padding:9px 18px;border-radius:9px;cursor:pointer}
.rollenschalter button.on{background:var(--flaeche);color:var(--ink);
  box-shadow:0 1px 3px rgba(20,26,25,.12)}

/* Zwei Felder nebeneinander, auf dem Handy untereinander. Stand
   frueher nur in inserieren.html - inzwischen brauchen es mehrere
   Seiten, und zwei Fassungen laufen frueher oder spaeter auseinander. */
.raster2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:620px){.raster2{grid-template-columns:1fr}}

/* =====================================================================
   Kacheln in Airbnb-Groesse

   Die alten Kacheln waren Kaesten mit Rahmen, Schatten und viel Luft -
   drei passten nebeneinander. Airbnb zeigt fuenf, und der Grund ist
   nicht Geiz: Wer sechs Angebote auf einen Blick sieht, vergleicht.
   Wer drei sieht, scrollt.

   Die schlanke Form hat deshalb keinen Rahmen und keinen Kasten. Das
   Bild ist die Kachel, der Text steht darunter.
   ===================================================================== */
.kachelbox{position:relative}

.kachelbox.schlank .tile{border:0;background:none;border-radius:0;overflow:visible;
  display:block;box-shadow:none}
.kachelbox.schlank .tile:hover{transform:none;box-shadow:none;border-color:transparent}
/* ---------- Das Bild in der schlanken Kachel ----------
   HIER LAG DER GRUND, warum die Bilder auf der Startseite riesig
   aussahen: 1:1, also quadratisch. Bei einer Kachel von 250 Pixeln
   Breite ist das Foto dann 250 Pixel hoch - und darunter stehen
   Titel, Ort und Preis auf gut siebzig. Das Bild nimmt also drei
   Viertel der Kachel ein.

   Ich hatte in v163 zwar .tile .bild auf 3:2 gestellt, aber diese
   Regel hier ueberschreibt sie: Die Startseite benutzt die schlanke
   Form. Geaendert habe ich also die falsche Stelle - aufgefallen ist
   es erst am Bildschirmfoto.

   Jetzt 3:2 wie ueberall. Aus 250 Pixeln Hoehe werden 167. */
.kachelbox.schlank .tile .bild{aspect-ratio:3/2;border-radius:12px;overflow:hidden;
  background:var(--n100);position:relative}
.kachelbox.schlank .tile .body{padding:9px 2px 0}
.kachelbox.schlank .tile h3{font:600 14.5px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif;margin:0 0 2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kachelbox.schlank .tile .ort{font-size:13px;color:var(--n500);margin:0 0 2px}
/* Titel und Preis standen beide auf 600/14,5px - zwei gleich laute
   Stimmen in einer Kachel. Auf einem Mietmarktplatz ist der Preis die
   Angabe, wegen der man ueberhaupt vergleicht; er darf einen Tick
   fester und groesser sein als der Name des Geraets. Ein Tick, nicht
   mehr: Wird der Preis zum Plakat, sieht die Kachel aus wie ein
   Sonderangebot statt wie ein Angebot. */
.kachelbox.schlank .tile .preis{font:700 15.5px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  margin-top:3px}
.kachelbox.schlank .tile .preis .je{font-weight:400;color:var(--n500);font-size:13px}
.kachelbox.schlank .tile:hover .bild img{transform:scale(1.04)}

/* ---------- Das Herz ----------
   Liegt ueber dem Bild, nicht daneben. Weisse Kontur auf jedem
   Hintergrund - ein dunkles Herz auf einem dunklen Foto findet
   niemand. */
.herz{position:absolute;top:10px;right:10px;z-index:3;
  width:34px;height:34px;border:0;padding:0;border-radius:50%;
  background:none;cursor:pointer;display:grid;place-items:center;
  transition:transform .14s}
.herz svg{fill:rgba(20,26,25,.45);stroke:#fff;stroke-width:1.7px;
  transition:fill .14s}
.herz:hover{transform:scale(1.12)}
.herz.an svg{fill:#E24B4A}
.herz:focus-visible{outline:2px solid var(--mint600);outline-offset:2px}
@media(max-width:620px){
  /* HIER WAR ES ANDERSHERUM ALS RICHTIG: Auf dem Handy wurde das Herz
     kleiner als am Rechner - 30 statt 34 Pixel. Ein Finger trifft aber
     schlechter als ein Mauszeiger, nicht besser. Wer danebengriff,
     oeffnete das Inserat, statt es zu merken.

     Der Knopf ist jetzt 44 Pixel gross, wie es die Empfehlung fuer
     Beruehrungsziele verlangt. SICHTBAR aendert sich nichts: Das Herz
     bleibt 17 Pixel und steht durch das verschobene top/right an genau
     derselben Stelle wie vorher (Mitte 22 Pixel von der Ecke).

     Ein unsichtbares ::after haette es NICHT getan - ein Pseudoelement
     ohne Hintergrund malt nichts und faengt darum auch keinen Griff.
     Im Browser nachgemessen. */
  .herz{width:44px;height:44px;top:0;right:0}
  .herz svg{width:17px;height:17px}
}

/* ---------- Rabatte ----------
   Ersparnis wird gruen gesetzt, aber nicht gross. Ein Rabatt, der
   schreit, weckt den Verdacht, dass der Preis davor zu hoch war. */
.sparen{color:var(--mint700);font-weight:600}
.zeile2.sparzeile span{color:var(--mint700)}
.sparsatz{font:600 13px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif;color:var(--mint700);margin-top:6px}
.codefeld{margin-top:4px}
.codezeile{display:flex;gap:8px;align-items:stretch}
.codezeile input{flex:1 1 auto;min-width:0;text-transform:uppercase;
  letter-spacing:.06em;font-weight:600}
.codezeile .btn{flex:none;white-space:nowrap}
.codegut{color:var(--mint700);font-weight:600}
.codeschlecht{color:#A31219}
html[data-thema="dunkel"] .codeschlecht{color:#F09595}
/* Prozentfeld in der Rabattverwaltung: Beschriftung darueber, damit
   in einer Reihe mit mehreren Feldern klar bleibt, welches welches ist. */
.rabfeld{display:flex;flex-direction:column;gap:3px;position:relative}
.rabfeld input{width:96px;padding-right:30px;text-align:right}
.rabfeld .proz{position:absolute;right:11px;bottom:12px;color:var(--n500);
  font-size:14px;pointer-events:none}
@media(max-width:620px){.rabfeld input{width:80px}}

/* Der Rabattstreifen auf einer Kachel in der Suche */
.rabattfahne{position:absolute;left:10px;top:10px;z-index:2;
  background:var(--mint);color:var(--onbrand);font:600 11.5px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  padding:5px 10px;border-radius:999px;letter-spacing:.01em}

/* ---------- Belegungskalender ---------- */
.kalkopf{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.gerate{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:14px;font-size:12.5px;
  color:var(--n600)}
.gerat{display:flex;align-items:center;gap:6px}
.gerat i{width:11px;height:11px;border-radius:4px;display:block;flex:none}
.kalender{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.kalender .wt{text-align:center;font:600 11.5px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif;color:var(--n500);
  text-transform:uppercase;letter-spacing:.05em;padding-bottom:5px}
.ktag{min-height:76px;border:1px solid var(--n200);border-radius:10px;padding:5px 6px;
  background:var(--flaeche);overflow:hidden}
.ktag.leer{border:0;background:none}
/* Heute wird an der Zahl kenntlich gemacht, nicht am Rahmen. Der
   gruene Rahmen gehoert der Auswahl - er soll mitwandern, wenn man
   einen anderen Tag antippt. */
/* Die gruene Zahl allein genuegt. Ein zusaetzlicher Punkt daneben
   sagt dasselbe noch einmal. */
.ktag.heute .nr{color:var(--mint700);font-weight:700}
/* Als Innenschatten statt als Rahmen - so springt beim Anwaehlen
   nichts, weil sich die Groesse des Kaestchens nicht aendert. */
.ktag.gewaehlt{box-shadow:inset 0 0 0 2px var(--mint600);background:var(--mint50)}
html[data-thema="dunkel"] .ktag.gewaehlt{background:rgba(98,210,162,.1)}
.ktag{cursor:pointer;transition:background .12s}
.ktag:hover{background:var(--n100)}
.ktag.leer{cursor:default}
.ktag.leer:hover{background:none}
.ktag:focus-visible{outline:2px solid var(--mint600);outline-offset:2px}
.ktipp-leer{color:rgba(255,255,255,.72);font-size:13px}
.ktag.belegt{background:var(--n50)}
.ktag .nr{font:600 12px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif;color:var(--n500);margin-bottom:3px}
.ktag .balken{font:600 10.5px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif;color:#fff;border-radius:5px;padding:2px 5px;
  margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ktag .mehr{font:600 10px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif;color:var(--n500)}
.termin{display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  border:1px solid var(--n200);border-radius:14px;padding:13px 15px;margin-bottom:9px}
.termin .punkt{width:11px;height:11px;border-radius:50%;flex:none}
/* Sechs Farben reichen - danach wiederholt es sich, und mehr als sechs
   Geraete gleichzeitig im Blick hat ohnehin niemand. */
.f0,i.f0{background:#2F8F63}  .f1,i.f1{background:#2C6FB5}
.f2,i.f2{background:#B5762C}  .f3,i.f3{background:#8B4FB5}
.f4,i.f4{background:#B53F53}  .f5,i.f5{background:#3F9AA8}
@media(max-width:620px){
  .ktag{min-height:58px;padding:4px}
  .ktag .balken{font-size:0;padding:0;height:5px;margin-bottom:3px}
  .ktag .mehr{display:none}
}

/* Zeitraum in der Suche */
.zeitraumfeld{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-top:11px}
.zeitraumfeld input{width:auto;padding:9px 11px;font-size:13.5px}
.zeitraumfeld .tiny{color:var(--mint700);font-weight:600;padding-bottom:9px}

/* Blase über einem Kalendertag. Erscheint beim Draufzeigen und beim
   Antippen - auf dem Handy gibt es kein Hovern. */
.ktag{position:relative}
.ktipp{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);
  min-width:230px;max-width:290px;background:var(--dunkel);color:#fff;
  border-radius:13px;padding:12px 14px;box-shadow:0 8px 26px rgba(20,26,25,.28);
  opacity:0;visibility:hidden;transition:opacity .13s;z-index:30;
  pointer-events:none;text-align:left}
.ktipp::after{content:"";position:absolute;top:100%;left:50%;margin-left:-6px;
  border:6px solid transparent;border-top-color:var(--dunkel)}
.ktag:hover .ktipp,.ktag:focus-within .ktipp,.ktag.offen .ktipp{
  opacity:1;visibility:visible}
.ktipp-kopf{font:700 12.5px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif;color:rgba(255,255,255,.65);margin-bottom:9px}
.ktipp-zeile{display:flex;gap:9px;align-items:flex-start;margin-top:8px}
.ktipp-zeile:first-of-type{margin-top:0}
.ktipp-zeile b{font-size:13.5px;font-weight:600}
.ktipp-zeile .tiny{color:rgba(255,255,255,.72);font-size:12px;margin-top:1px}
.ktipp-zeile .punkt{width:9px;height:9px;border-radius:50%;flex:none;margin-top:5px}
/* Am Rand würde die Blase aus dem Bild laufen */
.kalender>.ktag:nth-child(7n+1) .ktipp{left:0;transform:none}
.kalender>.ktag:nth-child(7n+1) .ktipp::after{left:26px}
.kalender>.ktag:nth-child(7n) .ktipp{left:auto;right:0;transform:none}
.kalender>.ktag:nth-child(7n) .ktipp::after{left:auto;right:20px}
@media(max-width:620px){
  .ktipp{min-width:200px;max-width:74vw}
}

/* Textvorschlag beim Inserieren */
.kihilfe{display:flex;gap:9px;margin-top:10px;flex-wrap:wrap;align-items:center}
.kihilfe input{flex:1 1 240px;padding:9px 12px;font-size:13.5px}
.kihilfe .btn{flex:none;white-space:nowrap}

/* Umschalter zwischen Miet- und Vermieterbereich in der Kopfzeile */
.bereichknopf{border:1px solid var(--n200);background:var(--flaeche);
  border-radius:999px;padding:8px 15px;font:600 13px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif;color:var(--n600);
  cursor:pointer;white-space:nowrap}
.bereichknopf:hover{border-color:var(--mint600);color:var(--ink)}
@media(max-width:900px){.bereichknopf{display:none}}

/* Ersatz, wenn der QR-Code nicht geladen werden konnte */
.qrweg{font:600 13px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif;color:var(--n500);line-height:1.5;padding:34px 18px;
  text-align:center}

/* Hier stand das "Vermieterband" der Startseite (#vermieterband,
   .vdrei, .vkachel, .vnum). Die Startseite wurde nach dem Airbnb-
   Vorbild umgebaut; den Abschnitt gibt es seitdem nicht mehr, die
   Regeln standen aber weiter da. Entfernt. */

/* ---------- Zeitraumwähler ---------- */
/* Sieht aus wie die Kategorie-Chips daneben - ein Filter unter
   vielen, kein Sonderfall in Signalfarbe. */
.zwknopf{display:inline-flex;align-items:center;gap:6px;background:var(--n50);
  border:1.5px solid var(--n200);border-radius:999px;padding:9px 15px;
  font:600 13.5px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif;color:var(--n600);cursor:pointer;transition:.15s;
  white-space:nowrap;user-select:none}
.zwknopf::before{content:"\1F4C5";font-size:14px}
.zwknopf:hover{border-color:var(--n300)}
.zwknopf.auf,.zwknopf.gesetzt{background:var(--mint100);
  border-color:var(--mint600);color:var(--mint800)}
.zwknopf b{font-weight:700;color:inherit}

/* Fest im Fenster statt im Fluss der Seite. In der Filterleiste, die
   oben klebt und ihren Inhalt beschneidet, wurde der Kasten sonst
   halb abgeschnitten und klappte nach oben aus dem Bild. Die Position
   rechnet app.js aus und haelt sie in den Fensterraendern. */
.zwkasten{position:fixed;z-index:9000;background:var(--flaeche);
  max-width:calc(100vw - 20px);overflow:auto;
  border:1px solid var(--n200);border-radius:18px;padding:16px;
  box-shadow:0 18px 44px rgba(20,26,25,.2);width:max-content;
  /* HIER WAR DER KASTEN ZU SCHMAL FUER SEINEN EIGENEN INHALT.
     Die Deckelung stand auf 560 Pixeln, der Inhalt braucht 694:
     172 fuer die Schnellwahl, dazu zwei Monatsgitter mit Abstand.
     Die Folge war ein waagerechter Rollbalken IM Kalender - der
     zweite Monat lag daneben und musste seitlich hereingeschoben
     werden. Ein Datumswaehler, in dem man scrollen muss, um den
     naechsten Monat zu sehen, ist keiner.

     Der zweite Monat entfaellt ohnehin unter 820 Pixeln Fensterbreite
     (Regel weiter unten); dort schrumpft der Kasten von selbst. Die
     740 gelten also nur, wo auch wirklich zwei Monate stehen. */
  max-width:min(740px,94vw);max-height:82vh;overflow:auto}
.zwleiste{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.zwtitel{flex:1;text-align:center;font:700 14.5px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif;color:var(--ink)}
.zwpfeil{width:34px;height:34px;border-radius:50%;border:1px solid var(--n200);
  background:var(--flaeche);color:var(--n600);cursor:pointer;font-size:15px}
.zwpfeil:hover:not(:disabled){border-color:var(--mint600);color:var(--ink)}
.zwpfeil:disabled{opacity:.35;cursor:not-allowed}
/* ---------- Vorschlagsliste ----------
   Haengt am Seitenkoerper, nicht im Suchfeld - sonst erbt sie jeden
   Beschnitt ihrer Umgebung. Dieselbe Ueberlegung wie beim
   Zeitraumkasten. */
.vorschlaege{position:fixed;z-index:9200;background:var(--flaeche);
  border:1px solid var(--n200);border-radius:14px;padding:6px;
  box-shadow:0 16px 40px rgba(20,26,25,.18);max-height:52vh;overflow:auto}
.vorschlaege.hide{display:none}
.vs{display:flex;align-items:center;gap:11px;width:100%;border:0;background:none;
  padding:10px 11px;border-radius:10px;cursor:pointer;text-align:left;
  font:400 15px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif;color:var(--ink)}
.vs:hover,.vs.an{background:var(--n50)}
.vs:focus-visible{outline:2px solid var(--mint600);outline-offset:-2px}
.vs .vtext{display:flex;flex:1;min-width:0;flex-direction:column;gap:1px;overflow:hidden}
.vs .vtext b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.vs .vtext small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;color:var(--n500)}
.vs .vzahl{flex:none;font:600 12px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif;color:var(--n500);
  background:var(--n100);border-radius:999px;padding:2px 8px}

/* Ortsnamen kommen von einem externen Geodienst. Die Liste bleibt wie
   die Suchvorschlaege am Seitenkoerper, damit weder Hero noch Filterblatt
   sie abschneiden. */
.ortvorschlaege{position:fixed;z-index:9200;background:var(--flaeche);
  border:1px solid var(--n200);border-radius:14px;padding:6px;
  box-shadow:0 16px 40px rgba(20,26,25,.18);max-height:min(46svh,360px);overflow:auto}
.ortvorschlaege.hide{display:none}
.ortv-eintrag{display:flex;flex-direction:column;align-items:stretch;gap:1px;width:100%;
  border:0;background:none;border-radius:10px;padding:11px 12px;cursor:pointer;text-align:left;color:var(--ink)}
.ortv-eintrag:hover,.ortv-eintrag.an{background:var(--n50)}
.ortv-eintrag:focus-visible{outline:2px solid var(--mint600);outline-offset:-2px}
.ortv-name{font:600 15px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif}
.ortv-zusatz,.ortv-hinweis{font:400 13px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif;color:var(--n500)}
.ortv-hinweis{padding:11px 12px}

/* Schnellwahl links, Kalender rechts - wie bei Airbnb. Auf dem Handy
   wandert die Schnellwahl nach oben und wird zu einer Reihe, durch
   die man schiebt. */
.zwkoerper{display:flex;gap:20px;align-items:flex-start}
.zwschnell{display:flex;flex-direction:column;gap:10px;flex:none;width:172px}
.zwsk{display:flex;flex-direction:column;gap:3px;text-align:left;
  border:1px solid var(--n200);border-radius:14px;padding:13px 15px;
  background:var(--flaeche);cursor:pointer;transition:.15s;width:100%}
.zwsk:hover{border-color:var(--n400,var(--n300))}
.zwsk.an{border-color:var(--ink);border-width:2px;padding:12px 14px}
.zwsk .skt{font:600 15px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif;color:var(--ink)}
.zwsk .skd{font-size:13px;color:var(--n500)}
@media(max-width:760px){
  .zwkoerper{flex-direction:column;gap:14px}
  .zwschnell{flex-direction:row;width:100%;overflow-x:auto;gap:8px;
    scrollbar-width:none;padding-bottom:2px}
  .zwschnell::-webkit-scrollbar{display:none}
  .zwsk{flex:0 0 auto;width:auto;padding:9px 13px;border-radius:999px;
    flex-direction:row;align-items:baseline;gap:7px;white-space:nowrap}
  .zwsk.an{padding:8px 12px}
  .zwsk .skt{font-size:14px}
  .zwsk .skd{font-size:12.5px}
}
.zwmonate{display:flex;gap:26px}
/* ZWEI MONATE BRAUCHEN PLATZ, DEN ES OFT NICHT GIBT.

   Der Kasten ist 172 (Schnellwahl) + 20 + 238 + 26 + 238 = 694 Pixel
   breit, dazu die Polsterung: rund 734. Ausgeblendet wurde der zweite
   Monat aber erst unter 640 - dazwischen liegen knapp hundert Pixel,
   in denen der Kasten breiter ist als das Fenster und rechts einfach
   abgeschnitten wird. Genau das war zu sehen: ein halber November.

   Jetzt faellt der zweite Monat schon unter 820 weg, und der Kasten
   kann grundsaetzlich nicht breiter werden als das Fenster. */
@media(max-width:820px){.zwmonate .zwmonat:last-child{display:none}}
.zwmonat{min-width:238px}
.zwkopf{font:600 13.5px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif;color:var(--n600);text-align:center;margin-bottom:9px}
.zwgitter{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.zwwt{text-align:center;font:600 11px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif;color:var(--n500);padding-bottom:5px}
.zwtag{aspect-ratio:1;display:grid;place-items:center;font:500 13px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  cursor:pointer;border:0;background:none;padding:0;border-radius:9px;color:var(--ink)}
.zwtag:hover:not(.zu):not(.leer){background:var(--mint100)}
.zwtag:focus-visible{outline:3px solid color-mix(in srgb,var(--mint600) 58%,transparent);outline-offset:1px}
.zwtag.leer{cursor:default}
.zwtag.zu{color:var(--n300);cursor:not-allowed}
/* Die Spanne wird durchgehend eingefaerbt - erst dadurch sieht man,
   was man ausgewaehlt hat, statt zweier einzelner Punkte. */
.zwtag.drin{background:var(--mint50);border-radius:0}
.zwtag.rand{background:var(--mint600);color:#fff;font-weight:700}
.zwtag.rand.start{border-radius:9px 0 0 9px}
.zwtag.rand.ende{border-radius:0 9px 9px 0}
.zwtag.rand.start.ende{border-radius:9px}
/* Zwei schlichte Textknoepfe. Zwei grosse Pillen unter einem Kalender
   ziehen mehr Aufmerksamkeit auf sich als der Kalender selbst. */
.zwfuss{display:flex;align-items:center;gap:16px;margin-top:12px;
  padding-top:11px;border-top:1px solid var(--n200)}
.zwinfo{flex:1;font-size:12.5px;color:var(--n500)}
.zwtext{border:0;background:none;padding:2px 0;font:600 13px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  color:var(--n500);cursor:pointer}
.zwtext:hover{color:var(--ink)}
.zwtext.fertig{color:var(--mint700)}

/* Ein Finger braucht keine Desktop-Nebenleiste. Auf dem Handy wird der
   Zeitraumwähler zu einem einzigen, grossen Monat mit 2×2-Schnellwahl.
   Das verhindert sowohl den alten Innen-Scrollbalken als auch Pillen,
   die ueber das Monatsraster ragen. */
@media(max-width:760px){
  .zwkasten{width:calc(100vw - 20px);max-width:calc(100vw - 20px);
    max-height:calc(100svh - 16px);padding:12px;overflow-y:auto;overflow-x:hidden}
  .zwleiste{margin-bottom:10px;gap:8px}
  .zwpfeil{width:42px;height:42px;font-size:17px}
  .zwschnell{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
    width:100%;overflow:visible;padding:0}
  .zwsk,.zwsk.an{width:100%;min-height:48px;padding:8px 10px;border-radius:12px;
    display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:0;white-space:normal}
  .zwsk .skt{font-size:13.5px}
  .zwsk .skd{font-size:11.5px;line-height:1.25}
  .zwmonate{display:block;width:100%}
  .zwmonat{width:100%;min-width:0}
  .zwtag{min-height:38px;font-size:14px;border-radius:10px}
  .zwfuss{gap:12px;margin-top:10px;padding-top:10px}
  .zwinfo{font-size:12px}
}

/* ---------- Der Zeitraumknopf in der grossen Suchbox ----------
   Die Grundform von .zwknopf ist eine Pille mit Rahmen und einem
   Kalender-Emoji davor. In der Suchleiste der Startseite passt beides
   nicht: Dort ist das ganze FELD die Pille, und das Kalendersymbol
   steht bereits als SVG links daneben. Ohne diesen Block standen zwei
   Kalender nebeneinander, einer davon bunt.

   Die uebrigen Erscheinungsformen des Knopfes - in der Filterleiste
   der Suche und auf der Angebotsseite - behalten Rahmen und Emoji. */
.suchbox .zwknopf{width:100%;height:auto;justify-content:flex-start;
  border:0;background:none;border-radius:0;padding:0;color:inherit}
.suchbox .zwknopf::before{content:none}
.suchbox .zwknopf:hover{background:none;border:0}
.suchbox .zwknopf.auf,.suchbox .zwknopf.gesetzt{background:none;border:0;
  color:#101614;font-weight:500}
.suchbox .zwknopf b{color:#101614;font-weight:600}

/* Kamerabild beim Scannen des Abholcodes */
.scanfeld{position:relative;margin-top:12px;border-radius:16px;overflow:hidden;
  background:#000;max-width:340px}
.scanfeld video{display:block;width:100%;height:auto}
.scanrahmen{position:absolute;inset:16%;border:2.5px solid rgba(255,255,255,.9);
  border-radius:14px;box-shadow:0 0 0 999px rgba(0,0,0,.35);pointer-events:none}
.scanfeld .scanweg{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);
  background:rgba(255,255,255,.92);border-color:transparent}
.codeeingabe{flex-wrap:wrap}

/* ---------- Verdienstrechner im Vermieterbereich ----------
   Aufklappbar: Wer seine Preise sucht, will rechnen. Wer seine
   Buchungen verwaltet, will das nicht jedes Mal sehen. */
/* Die Leiste selbst ist nur ein Kasten - geklickt wird der Knopf
   rechts. Ein unterstrichener Link ueber die ganze Breite sieht aus
   wie ein Versehen. */
.rechnerleiste{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  border:1px solid var(--n200);background:var(--flaeche);border-radius:18px;
  padding:16px 20px;margin-bottom:26px;font-family:Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif}
.rechnerleiste .btn{flex:none;text-decoration:none}
.rechnerleiste .rl-ic{font-size:22px;flex:none}
.rechnerleiste .rl-text{flex:1;display:flex;flex-direction:column;gap:3px}
.rechnerleiste .rl-text b{font-size:15.5px;color:var(--ink)}
.rechnerleiste .rl-text span{font-size:13px;color:var(--n500)}

.calc{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:start}
@media(max-width:860px){.calc{grid-template-columns:1fr;gap:32px}}
.rfeld{margin-bottom:26px}
.rfeld label{display:flex;justify-content:space-between;align-items:baseline;
  font:600 15px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif;margin-bottom:12px}
.rfeld label b{font-family:Poppins,system-ui,sans-serif;font-size:19px;color:var(--mint700);font-variant-numeric:tabular-nums}
input[type=range]{width:100%;height:24px;border-radius:3px;
  /* --fuell setzt app.js bei jeder Bewegung; der Verlauf faerbt alles
     links vom Knopf mint ein. Native Regler koennen das nicht selbst. */
  background:linear-gradient(to right,
    var(--mint) 0%, var(--mint) var(--fuell,0%),
    var(--n200) var(--fuell,0%), var(--n200) 100%) center / 100% 6px no-repeat;
  -webkit-appearance:none;appearance:none;outline:none;cursor:pointer;padding:0;border:0}
input[type=range]:focus-visible{outline:2px solid var(--mint600);outline-offset:3px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;
  border-radius:50%;background:var(--mint700);border:3px solid var(--flaeche);
  box-shadow:0 2px 6px rgba(20,26,25,.25);cursor:pointer}
input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;
  background:var(--mint700);border:3px solid var(--flaeche);cursor:pointer}
.ergebnis{background:var(--dunkel);color:#fff;border-radius:22px;padding:32px}
.ergebnis .gross{font-family:Poppins,system-ui,sans-serif;font-size:48px;font-weight:800;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;line-height:1.05;margin:6px 0 4px}
.ergebnis .lbl{color:rgba(255,255,255,.66);font-size:14px}
.brow{display:flex;justify-content:space-between;padding:8px 0;font-size:15px;
  color:rgba(255,255,255,.82);font-variant-numeric:tabular-nums}
.brow b{color:#fff;font-weight:600}
.trenner2{margin-top:24px;padding-top:20px;border-top:1px solid rgba(255,255,255,.16)}

.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px}
.tcard{background:var(--flaeche);border:1px solid var(--n200);border-radius:18px;padding:26px}

/* Identität durch Ausweisprüfung bestätigt - das stärkste Signal,
   das wir haben, also bekommt es eine eigene Farbe. */
.badge.geprueft{background:var(--mint100);color:var(--mint800);
  border:1px solid var(--mint600);font-weight:700}
.help.geprueft{color:var(--mint800);background:var(--mint50);
  border-radius:10px;padding:10px 12px;margin-top:8px;line-height:1.6}
.help.geprueft b{color:var(--mint800)}
input:disabled{background:var(--n50);color:var(--n500);cursor:not-allowed}

/* Bestätigte Anschrift - sieht nur der Inhaber */
.gepr-kasten{background:var(--n50);border-radius:12px;padding:13px 15px}
.gepr-kasten .a{font-weight:600;font-size:15px;margin-bottom:6px}
.gepr-kasten .tiny{color:var(--n500);line-height:1.6}

/* Sterne mit anteiliger Füllung. Zwei Lagen übereinander: graue
   Grundreihe, darüber die goldene, auf die Breite des Werts
   beschnitten. So zeigt 4,75 wirklich drei Viertel des fünften. */
.sterne{position:relative;display:inline-block;white-space:nowrap;
  vertical-align:middle;line-height:1}
.sterne .s-grund{color:#DDE4E1;letter-spacing:1px}
.sterne .s-voll{position:absolute;left:0;top:0;overflow:hidden;
  color:#F5A623;letter-spacing:1px;pointer-events:none}
html[data-thema="dunkel"] .sterne .s-grund{color:#3A423F}


/* =====================================================================
   HANDY

   Alles ab hier gilt nur auf schmalen Bildschirmen. Die Regeln stehen
   bewusst am Ende und an einer Stelle - so sieht man auf einen Blick,
   was sich am Telefon anders verhaelt, statt es ueber die ganze Datei
   verstreut zu suchen.

   Drei Grundsaetze:
     1. Nichts wird abgeschnitten. Lieber zwei Zeilen als drei Punkte.
     2. Knoepfe sind mindestens 44 Pixel hoch - das ist die Groesse
        einer Fingerkuppe. Alles darunter trifft man nicht.
     3. Nebeneinander wird untereinander, sobald es eng wird.
   ===================================================================== */

@media (max-width: 620px) {

  /* ---------- Grundmasse ---------- */
  h1 { font-size: clamp(24px, 7vw, 30px); }
  h2 { font-size: clamp(19px, 5.4vw, 23px); }
  .wrap { padding-left: 16px; padding-right: 16px; }

  /* Ein Knopf, den man trifft. 44px ist die Fingerkuppe. */
  .btn { min-height: 44px; padding-top: 11px; padding-bottom: 11px; }
  .btn-sm { min-height: 40px; }

  /* Knopfreihen: nebeneinander nur, wenn zwei nebeneinander passen.
     Sonst untereinander und ueber die volle Breite. */
  .eintrag .tat { width: 100%; display: grid; gap: 8px;
                  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .eintrag .tat .btn,
  .eintrag .tat a.btn { width: 100%; }
  .eintrag .tat .badge { grid-column: 1 / -1; }

  /* Titel duerfen umbrechen. Abgeschnittene Geraetenamen mit drei
     Punkten helfen niemandem beim Wiedererkennen. */
  .eintrag h3 { white-space: normal; overflow: visible; text-overflow: clip; }

  /* ---------- Teilnoten ---------- */
  /* 150 Pixel nur fuer die Beschriftung sind bei 360 Pixel Breite
     zu viel. Also Beschriftung nach oben, Balken darunter. */
  .balkenzeile { grid-template-columns: 1fr auto; gap: 4px 10px; }
  .balkenzeile .bar { grid-column: 1 / -1; }
  .balkenzeile .wert { grid-row: 1; grid-column: 2; }

  /* ---------- Bewertungen ---------- */
  .notenblock { grid-template-columns: 1fr; }
  .sw-bahn { font-size: 27px; letter-spacing: 3px; }
  .sw-wert { min-width: 66px; font-size: 16px; }

  /* ---------- Uebergabe ---------- */
  .codebox { padding: 20px 16px; }
  .codebox .qrfeld { padding: 10px; }
  .codeeingabe { flex-direction: column; align-items: stretch; }
  .codeeingabe input { width: 100%; }
  .codeeingabe .btn { width: 100%; }

  /* ---------- Tabellen ---------- */
  /* Tabellen brechen nicht um. Sie duerfen seitlich rutschen, und
     der Balken darunter zeigt, dass da noch mehr ist. */
  .zahltabelle, .btab { min-width: 520px; }
  .tabellenrutsch { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ---------- Karten und Kacheln ---------- */
  .karte-vorschau { height: 300px; }
  .karte-ueberlager { flex-direction: column; align-items: flex-start; padding: 16px; }
  .karte-ueberlager .btn { width: 100%; }

  /* ---------- Rezensionen ---------- */
  .rezension .kopf { align-items: flex-start; }
  .rezension .antwort { padding: 10px 12px; }

  /* ---------- Formulare ---------- */
  /* 16px Schriftgroesse verhindert, dass iPhones beim Antippen
     hineinzoomen. Alles darunter loest den Zoom aus. */
  input, select, textarea { font-size: 16px; }
  .raster2 { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .kennzahlen, .pzahlen { grid-template-columns: 1fr 1fr; }
  .kz, .pz { padding: 13px; }
  .kz .n, .pz .n { font-size: 20px; }
  .eintrag { padding: 14px; gap: 12px; }
  .eintrag .mini, .eintrag .mini-leer { width: 100%; height: 150px; }
  .geldzahl { font-size: 28px; }
  .sw-bahn { font-size: 24px; letter-spacing: 2px; }
}


/* =====================================================================
   NICHTS RUTSCHT SEITWAERTS

   Auf dem Handy liess sich die Seite nach links schieben und blieb
   dann dort stehen - halb aus dem Bild. Das passiert, wenn irgendein
   Element breiter ist als der Bildschirm. Bei uns war es die
   Kopfzeile: Sie stand auf "nicht umbrechen", und ihre Knoepfe
   brauchten zusammen mehr Platz, als ein Telefon hat.

   Zwei Ebenen:
     1. Die Ursachen beheben - Kopfzeile und Fusszeile duerfen
        umbrechen und schrumpfen.
     2. Ein Riegel darum. overflow-x:clip schneidet ab, was trotzdem
        uebersteht, ohne dass daraus ein Schiebefenster wird. Anders
        als overflow:hidden nimmt clip der Seite nicht das klebende
        Verhalten der Kopfzeile.
   ===================================================================== */

html, body { overflow-x: clip; max-width: 100%; min-width: 0; }
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}

/* Die Kopfzeile klebt und ist 67 Pixel hoch. Ein Sprung ueber einen
   Ankerlink (#abschnitt) setzt das Ziel sonst genau dorthin, wo die
   Kopfzeile schon liegt - die Ueberschrift, wegen der man gesprungen
   ist, steht dann dahinter. scroll-margin-top haelt den Abstand frei.
   Nur fuer wirklich angesprungene Elemente, nicht fuer jede Kennung. */
:target { scroll-margin-top: 84px; }

/* Ein Bild, eine Einbettung oder eine Tabelle sprengt sonst gern die
   Breite, ohne dass man es kommen sieht. */
img, video, canvas, iframe, svg { max-width: 100%; }
.wrap, main, header, footer { min-width: 0; }

@media (max-width: 860px) {
  /* Die Kopfzeile darf jetzt schrumpfen. Ohne min-width:0 weigert
     sich ein Flex-Element, kleiner zu werden als sein Inhalt - und
     schiebt stattdessen die ganze Seite auf. */
  .topnav { gap: 12px; min-width: 0; }
  .topnav .right { min-width: 0; gap: 7px; flex-wrap: nowrap; }
  .topnav .right .btn { padding: 11px 14px; font-size: 14px; }
}

@media (max-width: 620px) {
  /* Auf schmalen Geraeten reicht der Platz nur fuer das Noetigste.
     Der Themaschalter ist Komfort - der Rest ist der Weg ins Konto. */
  .themaschalter { display: none; }
  .topnav { gap: 10px; height: 62px; }
  .topnav .right { gap: 6px; }
  .topnav .right .btn { padding: 10px 12px; font-size: 13.5px }

  /* Die Fusszeile: Links untereinander statt in einer Reihe, die
     rechts aus dem Bild laeuft. */
  footer.bot .inner { flex-direction: column; align-items: flex-start; gap: 14px }
  footer.bot .inner > span:last-child {
    display: flex; flex-wrap: wrap; gap: 10px 18px }
  footer.bot a { margin-left: 0 }

  /* Die Reiterleiste im Konto rutscht in ihrem eigenen Fenster -
     dafuer darf sie nicht mehr aus dem Rand herausragen. */
  .reiter { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0 }
}

/* Der Hilfe-Knopf sitzt fest unten rechts. Auf dem Handy etwas
   weiter in die Ecke, damit er die Fusszeilen-Links nicht verdeckt. */
@media (max-width: 620px) {
  #hilfechat { right: 14px; bottom: 14px }
}


/* =====================================================================
   DAS MENUE AUF DEM HANDY

   Am Rechner ist .menuteil unsichtbar (display:contents) - seine
   Kinder .links und .right sitzen direkt in der Kopfzeile, so wie
   vorher. Auf dem Handy wird derselbe Behaelter zur Schublade, die
   von rechts hereinfaehrt.

   Warum nicht zwei getrennte Menues bauen? Weil dann jedes Element
   zweimal im HTML staende - zwei Sprachwahlen, zwei Themaschalter.
   Die laufen frueher oder spaeter auseinander, und dann sucht man
   den Fehler an der falschen Stelle.
   ===================================================================== */

.menuteil { display: contents; }
.nurschmal { display: none; }
.menuknopf, .menuschleier, .menuueber { display: none; }

/* ---------- Ab v146 gilt die Schublade UEBERALL ----------
   Vorher galt der ganze Block nur bis 860 Pixel; am Rechner stand
   die Navigation offen in der Kopfzeile. Zwei Anordnungen fuer
   dieselben Wege heisst aber: jede Aenderung zweimal machen und
   einmal vergessen. Jetzt ist oben nur noch Logo, Inserieren,
   Profilbild und der Knopf - alles andere steckt dahinter, auf
   jedem Bildschirm gleich. */
.nurschmal { display: inline-flex; }
.nurbreit { display: none; }

  /* ---------- Warum die Schublade vorher nicht aufging ----------
     header.top hatte backdrop-filter. Das sieht am Rechner gut aus,
     hat aber eine Nebenwirkung, die man nicht kommen sieht: Ein
     Element mit backdrop-filter wird zum Bezugsrahmen fuer alles,
     was position:fixed steht. Die Schublade rechnete ihr "oben 0,
     unten 0" also nicht mehr gegen den Bildschirm, sondern gegen
     die 66 Pixel hohe Kopfzeile - und wurde zu einem weissen
     Streifen, in dem gerade noch "Suchen" Platz hatte. Derselbe
     Grund, warum der Schleier daneben nichts zudeckte.

     Auf dem Handy scrollt ohnehin kaum etwas sichtbar unter der
     Kopfzeile durch. Also hier deckend statt durchscheinend. */
  header.top { backdrop-filter: none; -webkit-backdrop-filter: none;
    background: var(--flaeche) }

  /* Solange das Menue offen ist, muss die Kopfzeile ueber alles
     andere - sonst legt sich der Hilfe-Knopf (z-index 9500) darueber. */
  body.menuoffen header.top { z-index: 9600 }
  body.menuoffen #hilfechat { display: none }

  /* ---------- Der Knopf ---------- */
  .menuknopf { display: grid; place-content: center; gap: 5px;
    width: 44px; height: 44px; flex: none; border: 1.5px solid var(--n300);
    border-radius: 12px; background: var(--flaeche); cursor: pointer;
    padding: 0 11px }
  /* :not(.menuwort) ist noetig, nicht huebsch: Ohne den Ausschluss
     traefe diese Regel auch die Beschriftung und machte aus ihr
     einen 20 mal 2 Pixel grossen Balken, aus dem der Text
     herauslaeuft. */
  .menuknopf span:not(.menuwort) { display: block; width: 20px; height: 2px;
    border-radius: 2px;
    background: var(--ink); transition: transform .2s, opacity .2s }

  /* Das Wort neben den Strichen. Es haengt nicht am Strichgitter,
     sondern steht daneben: sonst wuerde es beim Umklappen zum Kreuz
     mitgedreht. Ab 1080 Pixeln braucht es den Knopf gar nicht mehr -
     dort steht die Navigation offen in der Zeile. */
  .menuwort { display: none }
  /* Aus drei Strichen wird ein Kreuz - ohne zweites Symbol. */
  .topnav.offen .menuknopf span:nth-child(1) { transform: translateY(7px) rotate(45deg) }
  .topnav.offen .menuknopf span:nth-child(2) { opacity: 0 }
  .topnav.offen .menuknopf span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) }

  /* ---------- Die Schublade ---------- */
  .menuteil { display: flex; flex-direction: column; align-items: stretch;
    position: fixed; top: 0; right: 0; bottom: 0; width: min(330px, 88vw);
    background: var(--flaeche); border-left: 1px solid var(--n200);
    padding: 22px 18px calc(24px + env(safe-area-inset-bottom));
    overflow-y: auto; z-index: 960; gap: 0;
    transform: translateX(101%); transition: transform .22s cubic-bezier(.2,0,.1,1);
    box-shadow: -16px 0 44px rgba(20,26,25,.2) }
  .topnav.offen .menuteil { transform: translateX(0) }

  .menuschleier { display: block; position: fixed; inset: 0; z-index: 955;
    background: rgba(11,44,32,.42); backdrop-filter: blur(2px) }
  .menuschleier[hidden] { display: none }

  /* ---------- Navigation in der Schublade ---------- */
  .topnav .links { display: flex !important; flex-direction: column;
    gap: 0; margin: 0 }
  .topnav .links a { padding: 15px 4px; font-size: 16px; font-weight: 500;
    border-bottom: 1px solid var(--n100); color: var(--ink) }

  /* ---------- Knoepfe in der Schublade ---------- */
  .topnav .right { margin: 18px 0 0; flex-direction: column;
    align-items: stretch; gap: 10px; min-width: 0 }
  .topnav .right .btn { width: 100%; justify-content: center;
    padding: 13px 18px; font-size: 15px; min-height: 46px }

  /* Eine kleine Ueberschrift, damit Sprache und Design nicht wie
     zwei uebrig gebliebene Symbole wirken. */
  .menuueber { display: block; font: 600 11.5px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif; letter-spacing: .1em;
    text-transform: uppercase; color: var(--n500); margin: 18px 0 8px }
  .menuzeile { display: flex; align-items: center; gap: 12px; flex-wrap: wrap }

  /* Der Themaschalter gehoert wieder her - im Menue ist Platz dafuer. */
  .themaschalter { display: inline-flex !important }
  .sprachwahl { flex: 1 1 auto }
  .sprachknopf { width: 100%; justify-content: flex-start }
  .sprachwahl .kuerzel { display: inline !important }
  /* Die Sprachliste klappt in der Schublade nach unten auf, nicht
     ueber den Bildschirmrand hinaus. */
  /* Auch im mobilen Drawer bleibt die Sprachliste ein Popover. Eine
     statische Liste vergroesserte den Drawer bei jedem Klick und schob
     Kontoaktionen aus dem sichtbaren Bereich. */
  .topnav .right .sprachwahl .sprachliste { position: absolute; left: 0; right: auto;
    top: calc(100% + 8px); width: max-content; min-width: 170px;
    margin-top: 0; box-shadow: 0 12px 34px rgba(var(--schatten),.18);
    border: 1px solid var(--n200) }

  .bereichknopf { display: inline-flex !important; width: 100%;
    justify-content: center; order: -1 }

  /* ---------- Die Leiste selbst ---------- */
  .topnav { gap: 10px; height: 66px; justify-content: space-between }
  .mark { margin-right: auto }
  .topnav .nurschmal.btn { padding: 11px 15px; font-size: 14px; flex: none }

@media(max-width:1079px){
  /* Konto und Suche stehen in der Schublade vollwertig bereit. In der
     mobilen Kopfzeile bleiben Marke, Inserieren und Menü ruhig lesbar. */
  .topnav > .kontoknopf,
  .topnav > .profilklapp,
  .topnav > .lupenknopf { display: none }
}

@media (max-width: 380px) {
  /* Ganz schmale Geraete: Der Inserieren-Knopf wandert mit ins Menue,
     sonst draengeln sich drei Dinge um zu wenig Platz. */
  .topnav > .nurschmal.btn { display: none }
  .topnav .right .btn.nurbreit { display: inline-flex }
}


/* ---------- Die Fusszeile darf kompakter ---------- */
@media (max-width: 620px) {
  footer.bot { padding: 26px 0 }
  footer.bot .inner { gap: 12px }
  footer.bot .inner > span:last-child { gap: 8px 16px }
  footer.bot a { font-size: 14px }
}


/* ---------- Der gewaehlte Tag, ueber dem Raster ----------
   Ein duenner Rahmen im Kaestchen allein reicht nicht: Man tippt
   einen Tag an und ist sich nicht sicher, ob etwas passiert ist.
   Hier steht es in Worten. */
.kalwahl{border:1px solid var(--n200);border-radius:14px;
  padding:14px 16px;margin:0 0 16px;background:var(--n50)}
.kalwahl .kw-datum{font:600 15px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif;color:var(--ink);
  display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.kalwahl .kw-text{font-size:14px;color:var(--n500);margin-top:5px}
.kalwahl .kw-liste{margin-top:10px}
.kalwahl .kw-zeile{display:flex;gap:10px;align-items:flex-start;
  padding:7px 0;border-top:1px solid var(--n200)}
.kalwahl .kw-zeile:first-child{border-top:0;padding-top:2px}
.kalwahl .kw-zeile b{font-size:14.5px;font-weight:600}
.kalwahl .kw-zeile .tiny{color:var(--n500);margin-top:1px}
.kalwahl .punkt{flex:none;margin-top:5px}
@media(max-width:620px){.kalwahl{padding:12px 13px}}


/* ---------- Newsletter in der Fusszeile ----------
   Ein Feld, ein Knopf, ein Satz darunter. Wer sich eintraegt, will
   nicht erst einen Absatz lesen - aber die Hinweise zur doppelten
   Bestaetigung und zum Abmelden muessen dastehen. */
.nlzeile{display:grid;grid-template-columns:1fr auto;gap:10px 26px;
  align-items:center;padding-bottom:24px;margin-bottom:22px;
  border-bottom:1px solid rgba(255,255,255,.14)}
.nltext b{display:block;font:600 16px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif;color:#fff}
.nltext span{display:block;font-size:13.5px;color:rgba(255,255,255,.62);margin-top:3px}
.nlform{display:flex;gap:9px;flex-wrap:wrap}
.nlform input{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.2);
  color:#fff;border-radius:12px;padding:12px 15px;font:400 15px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  min-width:230px;outline:none}
.nlform input::placeholder{color:rgba(255,255,255,.44)}
.nlform input:focus{border-color:var(--mint);background:rgba(255,255,255,.14);
  box-shadow:none}
.nl-meldung{grid-column:1/-1;font-size:13.5px;min-height:0}
.nl-meldung:empty{display:none}
.nl-meldung.ok{color:var(--mint300,#8FE3BE)}
.nl-meldung.fehler{color:#FFB4B7}
.nl-klein{grid-column:1/-1;font-size:12px;line-height:1.6;
  color:rgba(255,255,255,.5);margin:2px 0 0}
.nl-klein a{color:rgba(255,255,255,.78);text-decoration:underline}

@media(max-width:720px){
  .nlzeile{grid-template-columns:1fr}
  .nlform{width:100%}
  .nlform input{flex:1 1 190px;min-width:0}
}

/* =====================================================================
   DIE NAVIGATION AM RECHNER

   Seit v146 steckte die gesamte Navigation auf JEDER Breite hinter
   dem Menueknopf. Die Begruendung war gut - zwei Anordnungen fuer
   dieselben Wege heisst, jede Aenderung zweimal zu machen und einmal
   zu vergessen. Der Preis war aber hoch: Auf einem 1280 Pixel breiten
   Bildschirm bestand die Kopfzeile eines Marktplatzes aus einem Logo
   und zwei Knoepfen. Alles, was zeigt, WAS es hier gibt, lag hinter
   einem Klick.

   Ab 1080 Pixeln steht die Navigation deshalb wieder offen. Es
   bleibt trotzdem bei EINEM HTML-Baum: .menuteil ist am Rechner
   display:contents, seine Kinder ordnen sich in der Zeile ein; am
   Handy wird derselbe Behaelter zur Schublade. Kein Element steht
   zweimal im Dokument.
   ===================================================================== */
@media (min-width: 1080px) {
  .menuknopf { display: none }
  .menuschleier { display: none !important }
  .menuteil { display: contents }

  .topnav .links { display: flex; flex-direction: row; align-items: center;
    gap: 4px; margin: 0 0 0 14px; border: 0 }
  .topnav .links > a { padding: 9px 13px; border-radius: 10px; border-bottom: 0;
    font-size: 15px; font-weight: 500; color: var(--n700); white-space: nowrap }
  .topnav .links > a:hover { background: var(--n50); color: var(--ink);
    text-decoration: none }

  /* Was nur in der Schublade Sinn ergibt, faellt in der Zeile weg:
     Zwischenueberschriften, der Kontoblock und die Zweitwege, die am
     Rechner schon in der Kategorientafel oder der Fusszeile stehen. */
  .topnav .links .menuueber,
  .topnav .links .nurschublade,
  .topnav .right .menuueber,
  .topnav .right .schubladenkonto,
  .topnav .right .kmkopf { display: none }

  /* Die Schubladenregel setzt auf JEDES a in .links einen Trennstrich.
     In der Kategorientafel ergab das unter jedem Begriff eine Linie -
     eine Liste aus lauter Kaestchen statt einer Tafel. Der Reset
     zielt auf die Nachfahren, nicht auf die direkten Kinder: Die
     bekommen ihren eigenen Stil oben. */
  .topnav .links .klapptafel a { border-bottom: 0; padding: 0 }

  .topnav .right { margin-left: auto; flex-direction: row; align-items: center;
    gap: 8px; min-width: 0 }
  .topnav .right .btn { width: auto }

  /* Sprache und Design bleiben in der kompakten Navigation. Auf dem
     Rechner gehören rechts nur die Wege für Besucher bzw. die zwei
     eindeutigen Kontoaktionen hin. */
  .topnav .right .menuzeile { display:none }
  .topnav > .inserierknopf{margin-left:10px}
  .topnav > .lupenknopf{display:none}
}

/* Unter 1080 gilt weiter die Schublade - dort sind diese Klassen
   normale Eintraege. */
@media (max-width: 1079px) {
  .topnav .links > a.nurschublade { display: block }
}


/* =====================================================================
   DAS KATEGORIEN-KLAPPMENUE
   ===================================================================== */
.klapp { position: relative }
.klappknopf { display: flex; align-items: center; gap: 7px; cursor: pointer;
  background: none; border: 0; color: var(--n700); padding: 9px 13px;
  border-radius: 10px; white-space: nowrap;
  font: 500 15px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif }
.klappknopf:hover { background: var(--n50); color: var(--ink) }
.klapppfeil { transition: transform .18s; flex: none }
.klapp.auf > .klappknopf { background: var(--n50); color: var(--ink) }
.klapp.auf .klapppfeil { transform: rotate(180deg) }

/* ---------- Die Tafel am Rechner ----------
   Drei Spalten, eine je Kategorie. Sie haengt am Knopf und nicht am
   Bildschirmrand: So steht sie unter dem Wort, das man angeklickt
   hat, und nicht irgendwo. */
.klapptafel { display: none }
@media (min-width: 1080px) {
  .klapptafel { display: grid; position: absolute; top: calc(100% + 10px); left: 0;
    grid-template-columns: repeat(3, minmax(160px, 1fr));
    gap: 4px 30px; padding: 22px 26px 18px;
    background: var(--flaeche); border: 1px solid var(--n200);
    border-radius: 18px; box-shadow: 0 18px 48px rgba(20,26,25,.16);
    z-index: 940; opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .16s, transform .16s, visibility .16s }
  .klapp.auf .klapptafel { opacity: 1; visibility: visible; transform: none }
  .ktspalte { display: flex; flex-direction: column; min-width: 0 }
  .ktkopf { font: 600 15px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
    color: var(--ink); padding: 0 0 9px !important; margin-bottom: 8px;
    border-bottom: 1px solid var(--n100) !important }
  .ktkopf:hover { color: var(--mint700); text-decoration: none }
  .ktunter { font-size: 14.5px; color: var(--n700); padding: 5px 0 !important }
  .ktunter:hover { color: var(--mint700); text-decoration: none }
  .ktalle { font: 600 13.5px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
    color: var(--mint700); padding: 12px 0 0 !important; margin-top: auto }
  .ktalle:hover { text-decoration: none; opacity: .8 }
  .ktfuss { grid-column: 1 / -1; border-top: 1px solid var(--n100);
    margin-top: 14px; padding-top: 13px }
  .ktfuss a { font: 600 14px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
    color: var(--ink); padding: 0 !important }
  .ktfuss a:hover { color: var(--mint700); text-decoration: none }
}

/* ---------- Derselbe Block in der Schublade ----------
   Kein Schwebefenster, sondern ein Abschnitt, der aufklappt. Ein
   Overlay in einer Schublade waere ein Fenster im Fenster. */
@media (max-width: 1079px) {
  .klapp { display: block }
  .klappknopf { width: 100%; justify-content: space-between; padding: 15px 4px;
    font-size: 16px; color: var(--ink); border-bottom: 1px solid var(--n100);
    border-radius: 0 }
  .klappknopf:hover { background: none }
  .klapp.auf > .klappknopf { background: none }
  .klapptafel { display: none; padding: 4px 0 10px }
  .klapp.auf .klapptafel { display: block }
  .ktspalte { display: flex; flex-direction: column; padding: 6px 0 10px }
  .ktkopf { font: 600 15px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
    letter-spacing: 0; text-transform: none; color: var(--n500);
    padding: 8px 4px 4px }
  .ktkopf:hover { text-decoration: none }
  /* Die Unterpunkte sind in der Schublade zu viel des Guten: Drei
     Kategorien mal sechs Begriffe ergaeben achtzehn Zeilen vor allem
     anderen. Am Handy fuehrt die Kategorie selbst zur Trefferliste,
     dort stehen die Unterpunkte als Chips. */
  .ktunter { display: none }
  .ktalle { padding: 12px 4px; font-size: 16px; font-weight: 500; color: var(--ink);
    border-bottom: 1px solid var(--n100) }
  .ktalle:hover { text-decoration: none }
  .ktfuss { padding: 12px 4px 4px }
  .ktfuss a { font-size: 16px; font-weight: 500; color: var(--ink) }
}


/* ---------- Kopfzeile ohne Konto ----------
   Hier stand ".menuteil.ohnemenue{display:none}". Die Regel blendete
   fuer jeden Besucher ohne Konto die gesamte Schublade aus - mit ihr
   die Kategorien, alle oeffentlichen Seiten, die Sprachwahl und den
   Themaschalter. Uebrig blieben zwei Knoepfe.

   Die Klasse wird nicht mehr gesetzt (siehe baueKopfzeile in
   app.js). Der Selektor bleibt als Notausgang stehen: Wer eine Seite
   bauen will, die bewusst keine Navigation hat - eine Druckansicht
   etwa -, setzt ihn von Hand. */
.menuteil.ohnemenue{display:none}

/* Die Zwischenueberschriften in der Schublade ("Kategorien",
   "GETLEND", "Dein Konto") sitzen jetzt auch in .links. Ohne diese
   Zeile erbten sie den Trennstrich der Links darunter und sahen aus
   wie ein Eintrag, den man anklicken kann. */
.topnav .links .menuueber{border-bottom:0;padding:0}


/* =====================================================================
   BLATT - das Fenster, das von unten hochkommt
   =====================================================================
   Am Handy ist ein Blatt von unten die richtige Form fuer alles, was
   den Hauptinhalt kurz unterbricht: Preisaufschluesselung, Filter,
   Zeitraum. Der Daumen liegt unten, also gehoert die Bedienung dorthin.

   Am Rechner waere ein Blatt am unteren Rand seltsam - dort wird
   daraus ein mittig stehendes Fenster. Derselbe Bau, zwei Formen.

   Warum eigene Regeln und nicht <dialog>: Der Browser gibt <dialog>
   eine eigene Ebene, in der unsere Farbvariablen zwar gelten, aber
   position:fixed sich anders verhaelt - und wir brauchen genau das
   fuer die Leiste unten. */
.blatt{position:fixed;inset:0;z-index:1200;display:none}
.blatt.auf{display:block}
.blatt .schleier{position:absolute;inset:0;background:rgba(10,14,13,.5);
  backdrop-filter:blur(2px);animation:blattauf .2s ease}
.blatt .karte{position:absolute;left:0;right:0;bottom:0;
  background:var(--flaeche);border-radius:22px 22px 0 0;
  max-height:88vh;display:flex;flex-direction:column;
  box-shadow:0 -8px 40px rgba(10,14,13,.28);
  animation:blatthoch .26s cubic-bezier(.22,.9,.3,1)}
.blatt .griff{width:38px;height:4px;border-radius:99px;background:var(--n300);
  margin:9px auto 0;flex:none}
.blatt .bkopf{display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px 10px;flex:none}
.blatt .bkopf h3{font-size:20px;margin:0}
.blatt .zu{width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;
  background:var(--n50);color:var(--ink);font-size:17px;line-height:1;
  display:grid;place-items:center;flex:none}
.blatt .zu:hover{background:var(--n100)}
.blatt .binhalt{padding:4px 20px 20px;overflow-y:auto;flex:1 1 auto;
  -webkit-overflow-scrolling:touch}
.blatt .bfuss{padding:14px 20px;border-top:1px solid var(--n200);flex:none;
  padding-bottom:calc(14px + env(safe-area-inset-bottom))}

@keyframes blatthoch{from{transform:translateY(100%)}to{transform:none}}
@keyframes blattauf{from{opacity:0}to{opacity:1}}

@media(min-width:721px){
  .blatt .karte{left:50%;right:auto;bottom:auto;top:50%;
    transform:translate(-50%,-50%);width:min(520px,92vw);
    border-radius:20px;max-height:86vh;animation:blattzoom .2s ease}
  .blatt .griff{display:none}
  @keyframes blattzoom{from{opacity:0;transform:translate(-50%,-48%) scale(.97)}
    to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
}

/* Solange ein Blatt offen ist, darf die Seite darunter nicht mitrollen.
   Sonst scrollt der Finger den Hintergrund statt den Blattinhalt. */
html.blattoffen, html.blattoffen body{overflow:hidden}

/* ---------- Zeilen im Blatt ---------- */
.brechnung{font-size:15px}
.brechnung .bz{display:flex;justify-content:space-between;gap:16px;padding:11px 0;
  color:var(--n700);line-height:1.45}
.brechnung .bz span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap}
.brechnung .bz.spar span{color:var(--mint700);font-weight:600}
html[data-thema="dunkel"] .brechnung .bz.spar span{color:var(--mint300,#8FE3BE)}
.brechnung .bz.dick{border-top:1px solid var(--n200);margin-top:6px;padding-top:14px;
  font-weight:700;font-size:16.5px;color:var(--ink)}
.bzeitraum{border-top:1px solid var(--n200);margin-top:14px;padding-top:16px;
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.bzeitraum b{display:block;font-size:15.5px;margin-bottom:3px}
.bzeitraum .wann{color:var(--n600);font-size:14.5px}
.bzeitraum .klein{color:var(--n500);font-size:12.5px;margin-top:4px}


/* =====================================================================
   UNTERLEISTE - der feste Balken am unteren Rand (nur Handy)
   =====================================================================
   Links der Preis zum Antippen, rechts der Knopf. Wie bei Airbnb, und
   aus demselben Grund: Auf einer langen Angebotsseite scrollt man sonst
   wieder ganz nach oben, nur um zu buchen.

   env(safe-area-inset-bottom) faengt die Wischleiste auf dem iPhone ab.
   Ohne das liegt der Knopf unter der Leiste und laesst sich nicht
   treffen. */
/* Wie hoch die Leiste ist, steht an EINER Stelle. Die Blase auf der
   Angebotsseite und der Chatknopf rechnen beide damit - waeren es
   drei Zahlen an drei Orten, wuerde beim naechsten Umbau eine davon
   vergessen und etwas ueberlappt wieder. */
:root{--leistenhoehe:74px}
.unterleiste{position:fixed;left:0;right:0;bottom:0;z-index:900;display:none;
  align-items:center;gap:14px;padding:12px 18px;
  padding-bottom:calc(12px + env(safe-area-inset-bottom));
  background:var(--flaeche);border-top:1px solid var(--n200);
  box-shadow:0 -4px 22px rgba(var(--schatten),.12)}
.unterleiste.zeigen{display:flex}
.ulpreis{flex:1 1 auto;min-width:0;background:none;border:0;padding:0;
  text-align:left;cursor:pointer;color:var(--ink);font-family:inherit}
.ulpreis .gross{font:700 16.5px Inter,"Segoe UI Variable","Segoe UI",system-ui,
  -apple-system,Arial,sans-serif;text-decoration:underline;
  text-underline-offset:2px;font-variant-numeric:tabular-nums}
.ulpreis .klein{display:block;font-size:12.5px;color:var(--n500);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.unterleiste .btn{flex:0 0 auto;min-width:132px}
@media(max-width:940px){
  .unterleiste.zeigen{display:flex}
  /* Platz schaffen, damit die Leiste nichts verdeckt. */
  body.hatleiste{padding-bottom:88px}
}
@media(min-width:941px){
  .unterleiste{display:none !important}
  body.hatleiste{padding-bottom:0}
}


/* =====================================================================
   KONTO: Rollenschalter, Wegkacheln, Zahlungsfrist
   ===================================================================== */

/* ---------- Der Umschalter zwischen den Bereichen ----------
   Er sagt zuerst, wo man ist, und dann erst, wohin es geht. Anders
   herum muesste man den Knopf lesen, um die Ueberschrift zu
   verstehen. */
/* ---------- "Du bist im ..." ----------
   Die kleine Zeile ueber dem Bereichsnamen. Ohne sie standen zwei
   Bereichsnamen nebeneinander und keiner sagte, welcher gilt. */
.rs-hier{display:block;font:600 11px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  letter-spacing:.1em;text-transform:uppercase;color:var(--n500);margin-bottom:1px}

/* ---------- Ohne Auszahlungskonto passiert nichts ----------
   Das war bisher ein freundlicher Hinweis in Gelb und ging unter.
   Wer inseriert und nicht merkt, dass sein Angebot unsichtbar
   bleibt, wartet wochenlang auf Anfragen, die nie kommen konnten.
   Deshalb rot, breit und ganz oben. */
.auszahlwarnung{display:flex;align-items:flex-start;gap:14px;
  background:#FDECEC;border:2px solid #E24B4A;border-radius:16px;
  padding:16px 18px;margin:0 0 20px}
.auszahlwarnung .aw-ic{font-size:22px;line-height:1;flex:none}
.auszahlwarnung .aw-text{flex:1;min-width:0;font-size:14px;line-height:1.55;
  color:#8E2C2C}
.auszahlwarnung .aw-text b{display:block;font-size:15.5px;color:#7A2222;
  margin-bottom:3px}
html[data-thema="dunkel"] .auszahlwarnung{background:rgba(226,75,74,.12)}
html[data-thema="dunkel"] .auszahlwarnung .aw-text,
html[data-thema="dunkel"] .auszahlwarnung .aw-text b{color:#FFB3B2}

.rollschalt{display:flex;align-items:center;gap:14px;margin-top:16px;
  padding:13px 16px;border:1px solid var(--n200);border-radius:14px;
  background:var(--flaeche);max-width:520px}
.rollschalt.hide{display:none}
.rollschalt .rs-ic{font-size:21px;line-height:1;flex:none}
.rollschalt .rs-text{flex:1;min-width:0;display:block;line-height:1.4}
.rollschalt .rs-text b{display:block;font-size:14.5px}
.rollschalt .rs-text span{display:block;font-size:12.5px;color:var(--n500);
  margin-top:2px}
.rollschalt .btn{flex:none}
.rollschalt.einladung{background:var(--mint50);border-color:var(--mint100)}
html[data-thema="dunkel"] .rollschalt.einladung{
  background:rgba(98,210,162,.1);border-color:rgba(98,210,162,.25)}
@media(max-width:560px){
  .rollschalt{flex-wrap:wrap}
  .rollschalt .btn{flex:1 1 100%;margin-top:4px}
}

/* ---------- Die Wege zu Merkliste, Zahlungen, Bewertungen ---------- */
.wegkacheln{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  margin:0 0 22px}
.wegkachel{display:flex;align-items:center;gap:11px;padding:13px 14px;
  border:1px solid var(--n200);border-radius:14px;background:var(--flaeche);
  text-decoration:none;color:var(--ink);transition:.15s;min-width:0}
.wegkachel:hover{text-decoration:none;border-color:var(--n300);
  background:var(--n50);transform:translateY(-1px)}
.wegkachel .wk-ic{font-size:18px;line-height:1;flex:none;
  width:34px;height:34px;border-radius:10px;background:var(--n50);
  display:grid;place-items:center}
.wegkachel:hover .wk-ic{background:var(--flaeche)}
.wegkachel .wk-text{flex:1;min-width:0;line-height:1.35}
.wegkachel .wk-text b{display:block;font-size:14px}
.wegkachel .wk-text span{display:block;font-size:12px;color:var(--n500);
  margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wegkachel .wk-pfeil{color:var(--n400);font-size:19px;flex:none}
@media(max-width:700px){
  .wegkacheln{grid-template-columns:1fr;gap:8px;margin-bottom:18px}
}

/* ---------- Die Zahlungsfrist als ganzer Satz ----------
   Der Merker rechts sagt "noch 12 Minuten". Was danach passiert,
   sagt er nicht - und genau das ist die Frage. */
.fristsatz{margin-top:8px;padding:9px 12px;border-radius:10px;
  border-left:3px solid #E5941C;background:#FFF4E0;color:#7A4A00;
  font-size:13px;line-height:1.55;max-width:60ch}
.fristsatz b{font-variant-numeric:tabular-nums}
.fristsatz.knapp{border-left-color:#C0454A;background:#FDECEC;color:#8E2F33}
.fristsatz.aus{border-left-color:var(--n300);background:var(--n50);
  color:var(--n600)}
html[data-thema="dunkel"] .fristsatz{
  background:rgba(229,148,28,.14);color:#FFDFA8}
html[data-thema="dunkel"] .fristsatz.knapp{
  background:rgba(192,69,74,.16);color:#FFC2C4}
html[data-thema="dunkel"] .fristsatz.aus{
  background:var(--n50);color:var(--n600)}

/* ---------- Der frische Eintrag nach der Zahlung ----------
   Ein kurzes Aufleuchten statt eines Rahmens, der bleibt. Wer von
   Stripe zurueckkommt, soll sehen, wohin er geschickt wurde - danach
   soll die Buchung wieder aussehen wie jede andere. */
.eintrag.frisch{animation:frischauf 2.4s ease-out}
@keyframes frischauf{
  0%,55%{box-shadow:0 0 0 3px var(--mint);background:var(--mint50)}
  100%{box-shadow:0 0 0 0 transparent;background:transparent}
}
html[data-thema="dunkel"] .eintrag.frisch{
  animation:frischaufdunkel 2.4s ease-out}
@keyframes frischaufdunkel{
  0%,55%{box-shadow:0 0 0 3px var(--mint);background:rgba(98,210,162,.12)}
  100%{box-shadow:0 0 0 0 transparent;background:transparent}
}

/* ---------- Der Rueckweg auf den eigenen Seiten ----------
   Merkliste, Zahlungen und Bewertungen sind Sackgassen, wenn man
   nicht zurueckkommt. Die Schublade fuehrt zwar ueberallhin, aber
   nicht dorthin, wo man herkam. */
.zurueckweg{display:inline-flex;align-items:center;gap:6px;
  font-size:14px;font-weight:500;color:var(--n600);text-decoration:none;
  padding:7px 12px;margin-left:-12px;border-radius:9px}
.zurueckweg:hover{background:var(--n50);color:var(--ink);text-decoration:none}
.zurueckweg span{font-size:18px;line-height:1}

/* Der Punkt am Menueknopf, wenn etwas ansteht. */
.menuknopf{position:relative}
.menupunkt{position:absolute;top:-3px;right:-3px;width:10px;height:10px;
  border-radius:50%;background:#E24B4A;border:2px solid var(--flaeche);
  display:block}

/* ---------- Wer gebucht hat, im Kalender ---------- */
.kmieter{display:flex;align-items:center;gap:6px;margin:4px 0 2px}
.kmieter img,.kmieter .kleer{width:20px;height:20px;border-radius:50%;flex:none;
  object-fit:cover;background:var(--mint100);color:var(--mint700);
  display:grid;place-items:center;
  font:700 10.5px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif}
.kmieter a{font-size:13px;font-weight:600;color:var(--ink);text-decoration:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kmieter a:hover{text-decoration:underline}

/* ---------- Verwaltung: gemeldete Bewertungen ---------- */
.bwm{margin-bottom:16px}
.bwm-kopf{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bwm-text{margin:12px 0 0;padding:12px 14px;border-left:3px solid var(--n300);
  background:var(--n50);border-radius:0 10px 10px 0;font-size:14.5px;
  line-height:1.6;white-space:pre-wrap;word-break:break-word}
.bwm-grund{margin-top:10px;padding:10px 13px;border-radius:10px;
  background:#FFF4E0;color:#7A4A00;font-size:13.5px;line-height:1.55}
html[data-thema="dunkel"] .bwm-grund{background:rgba(229,148,28,.14);color:#FFDFA8}
.bwm-tat{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
@media(max-width:560px){ .bwm-tat .btn{flex:1 1 100%} }

/* ---------- Die Gegenseite einer Buchung ---------- */
.gegenueber{display:inline-flex;align-items:center;gap:6px;margin-left:8px;
  padding:3px 10px 3px 3px;border-radius:999px;border:1px solid var(--n200);
  background:var(--flaeche);font-size:12.5px;font-weight:600;
  color:var(--n700);text-decoration:none;vertical-align:middle}
.gegenueber:hover{border-color:var(--n300);color:var(--ink);text-decoration:none}
.gegenueber img,.gegenueber .gleer{width:20px;height:20px;border-radius:50%;
  object-fit:cover;flex:none;background:var(--mint100);color:var(--mint700);
  display:grid;place-items:center;
  font:700 10.5px Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif}