/* ============================================================
   Backend Camper-Upgrade. Baut auf dem KERN auf (assets/kern.php):
   gleiche Farben, Schriften, Knoepfe, Felder und vier Radien.
   Flaechen grau oder weiss, Ueberschriften schwarz, Gold nur fuer
   Knoepfe, Linien und Haken. Ein Hauptknopf je Ansicht.
   ============================================================ */

body.admin{background:var(--grau-50)}

/* ── Kopf ── */
.admin-kopf .bahn{max-width:1240px; gap:14px}
.admin-bereich{display:inline-flex; align-items:center; height:26px; padding:0 10px; border-radius:var(--r-s);
  background:var(--grau-100); color:var(--grau-700); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase}
.admin-konto{margin-left:auto; display:flex; align-items:center; gap:24px; font-size:14.5px; color:var(--grau-700)}
.admin-konto > a{display:inline-flex; align-items:center; gap:7px; color:var(--grau-700); text-decoration:none}
.admin-konto > a:hover{color:var(--schwarz)}
.admin-konto .i{width:16px; height:16px}
.abmelden{margin:0}
.abmelden .btn-schlicht{display:inline-flex; align-items:center; gap:7px; font:inherit; font-weight:600; cursor:pointer}
.abmelden .btn-schlicht .i{width:16px; height:16px}
.menue .klappe nav a{display:flex; align-items:center; gap:12px}
.menue .klappe .abmelden{margin-top:10px; padding:16px 12px 0; border-top:1px solid var(--grau-200)}

/* ── Rahmen: Navigation links, Inhalt rechts ── */
.admin-rahmen{max-width:1240px; margin:0 auto; padding:36px 28px 72px; display:grid;
  grid-template-columns:216px minmax(0,1fr); gap:44px; align-items:start}
.admin-nav{position:sticky; top:24px; display:flex; flex-direction:column; gap:4px}
.admin-nav a{position:relative; display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:var(--r-m);
  font-size:15.5px; font-weight:600; color:var(--grau-900); text-decoration:none}
.admin-nav a .i{color:var(--grau-700)}
.admin-nav a:hover{background:var(--grau-100)}
.admin-nav a[aria-current="page"]{background:var(--weiss); color:var(--schwarz); box-shadow:inset 0 0 0 1px var(--grau-200), var(--schatten-s)}
.admin-nav a[aria-current="page"] .i{color:var(--schwarz)}
/* Goldene Linie wie der Unterstrich im Menue der Website */
.admin-nav a[aria-current="page"]::before{content:""; position:absolute; left:0; top:11px; bottom:11px; width:3px; background:var(--brand)}

.admin-inhalt{min-width:0}
.zurueck{display:inline-flex; align-items:center; gap:6px; margin-bottom:12px; font-size:14.5px; font-weight:600;
  color:var(--grau-700); text-decoration:none}
.zurueck:hover{color:var(--schwarz)}
.zurueck .i{width:16px; height:16px}
.admin-titel{display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:16px 24px; margin-bottom:28px}
.admin-titel h1{font-size:clamp(34px,3.4vw,44px); line-height:1}
.admin-titel p{margin-top:10px; max-width:64ch; color:var(--grau-700)}
.admin-titel-aktionen{display:flex; flex-wrap:wrap; gap:12px}
.admin-meldung{margin-bottom:20px}

/* ── Tafeln: weisse Flaechen fuer je ein Thema ── */
.tafel{background:var(--weiss); border:1px solid var(--grau-200); border-radius:var(--r-l); box-shadow:var(--schatten-s);
  padding:28px 30px; margin-bottom:20px}
.tafel h2{font-size:26px; line-height:1.1}
.tafel h3{font-size:21px}
.tafel-titel{margin-bottom:20px}
.tafel-kopf{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 20px; margin-bottom:20px}
.tafel-kopf:last-child{margin-bottom:0}
.tafel > .hilfe{margin-top:14px}
.tafel > .wahl:last-child{margin-bottom:0}

/* ── Uebersicht ── */
.status-raster{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-bottom:20px}
.status-raster .tafel{margin:0}
/* Die ganze Karte ist der Link: Titel mit Pfeil, darunter Status, darunter Text */
.status-karte{display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"titel pfeil" "wert wert" "text text";
  align-content:start; align-items:center; gap:10px 12px; color:inherit; text-decoration:none; transition:border-color .15s, box-shadow .15s}
.status-karte:hover{border-color:var(--grau-300); box-shadow:var(--schatten)}
.status-karte h2{grid-area:titel; font-size:22px}
.status-pfeil{grid-area:pfeil; color:var(--grau-500)}
.status-karte:hover .status-pfeil{color:var(--schwarz)}
.status-karte > p,.status-karte > ul{grid-area:text}
.status-wert{grid-area:wert; display:flex; align-items:center}
.kurzliste{list-style:none; margin:0; padding:0}
.kurzliste li{padding:8px 0; border-bottom:1px solid var(--grau-200)}
.kurzliste li:first-child{padding-top:0}
.kurzliste b{display:block; font-weight:700; line-height:1.35}
.kurzliste span{display:block; font-size:14px; color:var(--grau-700)}
.offen-liste{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px}
.offen-liste a{display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:var(--r-m); background:var(--grau-50);
  color:var(--schwarz); font-weight:600; text-decoration:none}
.offen-liste a:hover{background:var(--grau-100)}
.offen-liste a span{flex:1}
.offen-liste a .i:first-child{color:var(--warnung)}
.offen-liste a .i:last-child{color:var(--grau-500)}
.miet-kurz{display:flex; flex-direction:column; gap:10px}
.miet-kurz-zeile{display:flex; align-items:center; gap:16px; padding:10px 18px 10px 10px; border:1px solid var(--grau-200);
  border-radius:var(--r-m); color:inherit; text-decoration:none; transition:border-color .15s}
.miet-kurz-zeile:hover{border-color:var(--schwarz)}
.miet-kurz-zeile img{width:76px; height:56px; object-fit:cover; border-radius:var(--r-s); flex:0 0 auto}
.miet-kurz-text{flex:1; min-width:0}
.miet-kurz-text b{display:block; line-height:1.35}
.miet-kurz-text span{display:block; font-size:14px; color:var(--grau-700)}
.miet-kurz-zeile em{font-style:normal; font-family:"Barlow Condensed",sans-serif; font-size:22px; font-weight:700; white-space:nowrap}

/* ── Formulare ── */
.formraster.drei{grid-template-columns:repeat(3,minmax(0,1fr))}
.mit-einheit{position:relative}
.mit-einheit .eingabe{padding-right:40px}
.mit-einheit > span{position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--grau-500); font-weight:600; pointer-events:none}
.zaehler{font-size:12.5px; color:var(--grau-500); text-align:right}
.google-stand{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 16px; margin:0 0 16px}
/* Kurze Auswahl als Umschalter: Felder nebeneinander, so hoch wie die Eingabefelder,
   die gewaehlte Seite schwarz wie der gewaehlte Tag im Kalender */
fieldset.segmente{flex-direction:row; flex-wrap:wrap; gap:0}
.segmente legend{padding-bottom:8px}
.segmente .wahl{position:relative; flex:1 1 0; max-width:170px; justify-content:center; height:48px; margin:0; padding:0 14px;
  border:1px solid var(--feld-rahmen); background:var(--weiss); transition:background .14s, border-color .14s}
.segmente .wahl + .wahl{margin-left:-1px}
.segmente .wahl:first-of-type{border-radius:var(--r-m) 0 0 var(--r-m)}
.segmente .wahl:last-of-type{border-radius:0 var(--r-m) var(--r-m) 0}
.segmente .wahl input{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.segmente .wahl span{font-size:15px; font-weight:600; color:var(--grau-900); white-space:nowrap}
.segmente .wahl:hover{z-index:1; border-color:var(--schwarz)}
.segmente .wahl:has(input:checked){z-index:2; background:var(--schwarz); border-color:var(--schwarz)}
.segmente .wahl:has(input:checked) span{color:var(--weiss)}
.segmente .wahl:has(input:focus-visible){z-index:3; outline:3px solid var(--schwarz); outline-offset:2px}
.segmente .fehlertext{flex-basis:100%; margin-top:6px}
.unterformular{margin-top:26px; padding-top:24px; border-top:1px solid var(--grau-200)}
.unterformular h3{margin-bottom:16px}
/* Speichern bleibt beim Scrollen unten sichtbar */
.speicherleiste{position:sticky; bottom:0; z-index:20; display:flex; align-items:center; gap:24px; margin-top:4px; padding:18px 0 22px;
  background:linear-gradient(to bottom, rgba(250,250,250,0), var(--grau-50) 16px)}
.speicherleiste .btn-schlicht{font-weight:600}
/* Ohne Aenderung bleibt die Leiste weg, mit der ersten Aenderung kommt sie von unten */
.speicherleiste.ist-ruhig{display:none}
.speicherleiste{animation:leiste-ein .18s ease-out}
@keyframes leiste-ein{from{opacity:0; transform:translateY(12px)}}
/* Kurze Bestaetigung unten, Haken in Gold auf Dunkel */
/* links und rechts 20 px statt left:50%, sonst bleibt der Meldung nur die halbe Breite */
.toast{position:fixed; left:20px; right:20px; bottom:24px; z-index:60; display:flex; align-items:center; gap:10px; width:fit-content; max-width:560px;
  margin:0 auto; padding:12px 18px; border-radius:var(--r-m); background:var(--schwarz); color:var(--weiss); font-size:15px; font-weight:600;
  box-shadow:var(--schatten); opacity:0; transform:translateY(16px); pointer-events:none; transition:opacity .2s, transform .2s}
.toast::before{content:""; flex:0 0 auto; width:12px; height:6px; margin-top:-3px; border-left:2.5px solid var(--brand); border-bottom:2.5px solid var(--brand); transform:rotate(-45deg)}
.toast.ist-sichtbar{opacity:1; transform:none}
.toast.ist-warnung{background:var(--fehler)}
.toast.ist-warnung::before{display:none}
@media (prefers-reduced-motion:reduce){ .speicherleiste{animation:none} .toast{transition:none} }
.btn-gefahr{background:var(--weiss); color:var(--fehler); border-color:#F1C8C8}
.btn-gefahr:hover{border-color:var(--fehler)}
.loeschen-form{margin-top:36px; padding-top:20px; border-top:1px solid var(--grau-200)}

/* ── Vorschau: so steht es auf der Website ── */
.vorschau{background:var(--grau-50); border:1px solid var(--grau-200); border-radius:var(--r-m); padding:18px 20px}
.vorschau-etikett{display:block; margin-bottom:12px; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--grau-500)}
.vorschau .preiszeilen > div{align-items:flex-start}
.vorschau-preis{flex:0 0 auto; text-align:right}
.vorschau-leiste{padding:0; overflow:hidden; background:var(--weiss)}
/* Angedeutete Kopfzeile unter der Leiste */
.vorschau-leiste::after{content:"CAMPER-UPGRADE"; display:block; padding:16px 20px; border-top:1px solid var(--grau-200);
  font-family:"Barlow Condensed",sans-serif; font-size:20px; font-weight:700; letter-spacing:.02em; color:var(--brand)}
.vorschau-leiste.ist-aus .hinweisleiste{opacity:.45}

/* Die Hinweisleiste selbst steht im KERN wie auf der Website */
.hinweisleiste p:empty::before{content:"Noch kein Text"; opacity:.6}

/* ── Erreichbarkeit ── */
.zeiten-liste{display:flex; flex-direction:column}
.zeiten-zeile{display:grid; grid-template-columns:180px minmax(0,1fr); align-items:center; gap:6px 20px; padding:10px 0}
.zeiten-zeile + .zeiten-zeile{border-top:1px solid var(--grau-200)}
.zeiten-zeile .wahl{margin:0}
.zeiten-felder{display:flex; align-items:center; gap:12px}
.zeiten-felder .eingabe{width:132px}
.zeiten-felder span{color:var(--grau-700)}
.zeiten-zu{display:none; color:var(--grau-500)}
.zeiten-zeile.ist-zu .zeiten-felder{display:none}
.zeiten-zeile.ist-zu .zeiten-zu{display:block}
.zeiten-zeile .fehlertext{grid-column:2}

/* ── Listen mit Zeilen: Preise, Urlaub, Belegung, Leistungen ── */
.zeilenliste{display:flex; flex-direction:column}
.zeile{display:flex; align-items:center; gap:14px 18px; padding:14px 0}
.zeile + .zeile{border-top:1px solid var(--grau-200)}
.zeile:first-child{padding-top:2px}
.zeile:last-child{padding-bottom:2px}
.zeile-text{flex:1; min-width:0; display:flex; flex-direction:column; color:inherit; text-decoration:none}
.zeile-text b{font-weight:700; line-height:1.35}
.zeile-text span{font-size:14px; line-height:1.4; color:var(--grau-700)}
a.zeile-text:hover b{text-decoration:underline; text-decoration-color:var(--brand); text-decoration-thickness:2px; text-underline-offset:3px}
.zeile-kennzeichen{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px}
.zeile-kennzeichen:empty{display:none}
.zeile-preis{min-width:130px; text-align:right; font-style:normal; font-family:"Barlow Condensed",sans-serif; font-size:22px; font-weight:700; white-space:nowrap}
.zeile.ist-aus .zeile-text b,.zeile.ist-aus .zeile-preis,.zeile.ist-aus .wahl > span{color:var(--grau-500)}
.zeile-aktionen{margin:0}
.leistung-zeile .wahl{flex:1; margin:0}
.leistung-zeile.ist-am-speichern{pointer-events:none}
.reihe-knoepfe{display:flex; gap:4px}
.reihe-knoepfe form{margin:0}
.symbolknopf{width:34px; height:34px; padding:0; display:grid; place-items:center; border:1px solid var(--grau-200); border-radius:var(--r-m);
  background:var(--weiss); color:var(--schwarz); cursor:pointer; transition:border-color .14s}
.symbolknopf:hover:not(:disabled){border-color:var(--schwarz)}
.symbolknopf:disabled{opacity:.35; cursor:default}
.symbolknopf .i{width:16px; height:16px}

/* ── Anfahrt ── */
/* Letzte Spalte fest (drei Symbolknoepfe), damit der Kopf ohne Knoepfe gleich breit aufteilt */
.anfahrt-kopf,.anfahrt-zeile{display:grid; grid-template-columns:minmax(0,1fr) 124px 124px 150px 110px; gap:12px; align-items:start}
.anfahrt-kopf{margin-bottom:6px; font-size:13.5px; font-weight:600; color:var(--grau-900)}
.anfahrt-zeile{padding:6px 0}
.anfahrt-feld .fehlertext{margin-top:6px}
.anfahrt-vorschau{display:flex; align-items:center; height:48px; font-style:normal; font-family:"Barlow Condensed",sans-serif;
  font-size:20px; font-weight:700; white-space:nowrap}
.anfahrt-zeile .reihe-knoepfe{height:48px; align-items:center}
.anfahrt-liste ~ .btn{margin-top:14px}

/* ── Vermietung ── */
.miet-raster{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px}
.miet-karte{position:relative; display:flex; flex-direction:column; margin:0; padding:0; overflow:hidden; color:inherit; text-decoration:none;
  transition:border-color .15s, box-shadow .15s, transform .15s}
.miet-karte:hover{border-color:var(--grau-300); box-shadow:var(--schatten); transform:translateY(-2px)}
/* Bild liegt absolut, sonst sprengt ein hohes Foto das Seitenverhaeltnis */
.miet-bild{position:relative; overflow:hidden; display:grid; place-items:center; aspect-ratio:16/10; background:var(--grau-100); color:var(--grau-500)}
.miet-bild img{position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover}
.miet-bild .i{width:34px; height:34px; stroke-width:1.5}
.miet-text{padding:20px 76px 24px 24px}
.miet-text h2{font-size:24px}
.miet-preis{margin:8px 0 4px}
.miet-preis b{font-family:"Barlow Condensed",sans-serif; font-size:24px; font-weight:700}
.miet-text .badge{margin-top:10px}
.miet-pfeil{position:absolute; right:20px; bottom:24px; width:40px; height:40px; display:grid; place-items:center;
  border-radius:var(--r-m); background:var(--grau-100); transition:background .15s}
.miet-karte:hover .miet-pfeil{background:var(--brand)}
.belegung-raster{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px; align-items:start}
.admin-kalender{border:1px solid var(--grau-200); border-radius:var(--r-l); padding:18px 18px 14px}
.admin-kalender .kal-legende{flex-wrap:wrap; gap:7px 16px}
.admin-kalender .kal-legende span{display:inline-flex; align-items:center; gap:7px}
.admin-kalender .kal-legende b{width:14px; height:14px; border-radius:4px; background:var(--schwarz)}
.unterzeile{margin:30px 0 10px}
.bild-feld{display:grid; grid-template-columns:260px minmax(0,1fr); gap:24px; align-items:start; margin-bottom:22px}
.miet-bild.gross{aspect-ratio:4/3; border-radius:var(--r-m); overflow:hidden}
.datei-knopf{position:relative; overflow:hidden}
.datei-knopf input{position:absolute; inset:0; opacity:0; cursor:pointer}
.datei-knopf:focus-within{outline:3px solid var(--schwarz); outline-offset:2px}
.bild-feld .hilfe{margin:10px 0 12px}

/* ── Anmeldung mit Code aus Google Authenticator ── */
.code-einrichten{display:grid; grid-template-columns:184px minmax(0,1fr); gap:28px; align-items:start}
.qr{padding:8px; background:var(--weiss); border:1px solid var(--grau-200); border-radius:var(--r-m)}
.qr svg{display:block; width:100%; height:auto}
.code-schritte{margin:0 0 14px; padding-left:20px}
.code-schritte li + li{margin-top:6px}
.schluessel{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; letter-spacing:.06em; background:var(--grau-100);
  padding:2px 7px; border-radius:var(--r-s)}
.code-form{max-width:300px; margin-top:24px}
.code-feld .eingabe{font-size:22px; letter-spacing:.3em; text-align:center; font-variant-numeric:tabular-nums}
.code-wechsel{margin-top:16px}

/* ── Anmelden ── */
.anmelde-flaeche{min-height:100vh; display:grid; place-items:center; padding:32px 20px}
.anmelde-karte{width:100%; max-width:420px; background:var(--weiss); border:1px solid var(--grau-200); border-radius:var(--r-xl);
  box-shadow:var(--schatten); padding:40px 36px}
.anmelde-marke{display:flex; align-items:center; gap:12px; margin-bottom:30px}
.anmelde-karte h1{font-size:38px; margin-bottom:22px}
.anmelde-karte .meldung{margin-bottom:18px}
.anmelde-karte .btn{width:100%}
.anmelde-qr{width:200px; margin:0 auto 14px}
.anmelde-karte .hilfe{margin-bottom:18px}

/* ── Breakpoints ── */
@media (max-width:960px){
  .admin-konto,.admin-nav{display:none}
  .admin-rahmen{grid-template-columns:minmax(0,1fr); padding-top:26px}
  .status-raster,.belegung-raster{grid-template-columns:minmax(0,1fr)}
  /* Karten untereinander: Kennzeichen neben dem Titel, Text darunter */
  .status-karte{grid-template-columns:minmax(0,1fr) auto auto; grid-template-areas:"titel wert pfeil" "text text text"}
  /* Kopf bleibt oben, damit das Menue nach dem Scrollen erreichbar bleibt */
  .admin-kopf{position:sticky; top:0}
  [id]{scroll-margin-top:84px}
}
@media (max-width:760px){
  /* Anfahrt: Gebiet mit Loeschen oben, ab und bis mit den Pfeilen darunter, ohne Luecke */
  .anfahrt-kopf,.anfahrt-vorschau{display:none}
  .anfahrt-zeile{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 40px 40px; grid-template-areas:"gebiet gebiet gebiet weg" "von bis hoch runter";
    gap:8px; align-items:center; padding:14px 0}
  .anfahrt-zeile + .anfahrt-zeile{border-top:1px solid var(--grau-200)}
  .anfahrt-gebiet{grid-area:gebiet}
  .anfahrt-von{grid-area:von}
  .anfahrt-bis{grid-area:bis}
  .anfahrt-von,.anfahrt-bis{display:flex; flex-wrap:wrap; align-items:center; column-gap:8px}
  .anfahrt-von::before{content:"ab"}
  .anfahrt-bis::before{content:"bis"}
  .anfahrt-von::before,.anfahrt-bis::before{font-size:14px; color:var(--grau-700)}
  .anfahrt-von .mit-einheit,.anfahrt-bis .mit-einheit{flex:1; min-width:0}
  .anfahrt-feld .fehlertext{flex-basis:100%}
  .anfahrt-zeile .reihe-knoepfe{display:contents}
  .anfahrt-zeile [data-zeile-hoch]{grid-area:hoch}
  .anfahrt-zeile [data-zeile-runter]{grid-area:runter}
  .anfahrt-zeile [data-zeile-weg]{grid-area:weg}
  .zeile{flex-wrap:wrap}
  .zeile-text{flex:1 1 60%}
  .zeile-kennzeichen{justify-content:flex-start}
  .zeile-preis{min-width:0}
  /* Groessere Ziele fuer den Daumen */
  .symbolknopf{width:40px; height:40px}
  .btn-klein{height:40px}
  /* Preisliste: die ganze Zeile oeffnet den Preis, die Pfeile stehen rechts neben dem Preis */
  .preis-zeile{position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"text text" "preis reihe" "kenn kenn"; column-gap:16px; row-gap:4px; align-items:center}
  .preis-zeile .zeile-text{grid-area:text}
  .preis-zeile .zeile-text span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .preis-zeile .zeile-text::after{content:""; position:absolute; inset:0}
  .preis-zeile .zeile-preis{grid-area:preis; text-align:left; font-size:20px}
  .preis-zeile .zeile-kennzeichen{grid-area:kenn}
  .preis-zeile .reihe-knoepfe{grid-area:reihe; position:relative; z-index:1}
  .preis-zeile > .btn{display:none}
}
@media (max-width:600px){
  .admin-kopf .bahn{min-height:62px}
  .admin-rahmen{padding:20px 20px 40px}
  .admin-titel{margin-bottom:20px}
  .admin-titel h1{font-size:32px}
  .admin-titel p{margin-top:8px; font-size:15px; line-height:1.5}
  .admin-titel-aktionen .btn{height:40px; padding:0 14px; font-size:14.5px}
  /* Tafeln randlos: mehr Breite fuer Felder, Listen und Kalender */
  .tafel{margin:0 -20px 12px; padding:24px 20px; border-radius:0; border-left:0; border-right:0; box-shadow:none}
  .status-raster{gap:12px; margin-bottom:12px}
  .status-raster .tafel,.miet-karte{margin:0 -20px}
  .miet-raster{gap:12px}
  .admin-kalender{border:0; padding:0}
  .vorschau{padding:16px}
  /* Kurze Felder bleiben nebeneinander: PLZ und Ort, Sterne und Anzahl, Datumspaare, Betraege */
  .formraster.eng,.formraster.drei{grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:12px}
  .formraster.drei > :nth-child(3){grid-column:1/-1}
  .formraster.anschrift{grid-template-columns:104px minmax(0,1fr); column-gap:12px}
  /* Seitennamen in der Link-Auswahl brauchen die ganze Breite */
  .formraster.eng .link-feld,.formraster.eng .link-feld + .nur-link{grid-column:1/-1}
  .bild-feld,.code-einrichten{grid-template-columns:minmax(0,1fr)}
  .qr{width:184px}
  /* Zeiten: Tag links, beide Uhrzeiten rechts in derselben Zeile */
  .zeiten-zeile{grid-template-columns:116px minmax(0,1fr); column-gap:10px}
  .zeiten-zeile .fehlertext{grid-column:1/-1}
  .zeiten-felder{gap:8px}
  .zeiten-felder .eingabe{flex:1; width:auto; min-width:0; padding:0 10px}
  /* Ohne Uhr-Symbol passt die Uhrzeit ganz ins Feld, das Handy oeffnet beim Antippen ohnehin seine Auswahl */
  .zeiten-felder input[type="time"]::-webkit-calendar-picker-indicator{display:none}
  .zeile > .kachel{display:none}
  .miet-kurz-zeile{display:grid; grid-template-columns:64px minmax(0,1fr); column-gap:14px; row-gap:6px; padding:10px}
  .miet-kurz-zeile img,.miet-kurz-zeile > .kachel{grid-row:span 2; width:64px; height:48px}
  .miet-kurz-zeile > .badge,.miet-kurz-zeile em{grid-column:2; justify-self:start}
  /* Mietobjekte: Bild links, Text rechts statt grossem Foto */
  .miet-karte{flex-direction:row; align-items:stretch}
  .miet-karte .miet-bild{flex:0 0 108px; aspect-ratio:auto; min-height:100px}
  .miet-text{padding:14px 16px}
  .miet-text h2{font-size:20px}
  .miet-preis{margin:4px 0 2px}
  .miet-preis b{font-size:20px}
  .miet-pfeil{display:none}
  /* Speichern als feste Leiste unten, Knopf ueber die ganze Breite */
  .speicherleiste{margin:12px -20px 0; padding:12px 20px calc(12px + env(safe-area-inset-bottom)); gap:18px;
    background:var(--weiss); border-top:1px solid var(--grau-200); box-shadow:0 -10px 24px -18px rgba(20,18,16,.45)}
  .speicherleiste .btn{flex:1}
  .loeschen-form{margin-top:24px; padding-top:16px}
  .anmelde-karte{padding:32px 24px}
}
/* Logo, Kennzeichen und Menue passen unter 480 px nicht nebeneinander */
@media (max-width:479px){
  .admin-kopf .admin-bereich{display:none}
}
/* Sehr schmale Geraete: Uhrzeiten wieder unter dem Tag */
@media (max-width:359px){
  .zeiten-zeile{grid-template-columns:minmax(0,1fr)}
}

/* ── E-Mail: Hilfetexte, Trenner, Signatur ── */
.tafel-hilfe{margin:-8px 0 20px; max-width:70ch; font-size:15px}
.trenner{height:1px; margin:16px 0 18px; background:var(--grau-200)}
.signatur-vorschau{background:var(--weiss); padding:24px}

/* ── Anfragen: eine Zeile je Anfrage, aufgeklappt mit allen Angaben ── */
.anfrage-liste{display:flex; flex-direction:column}
.anfrage + .anfrage{border-top:1px solid var(--grau-200)}
.anfrage summary{display:flex; align-items:center; gap:14px 18px; padding:14px 0; cursor:pointer; list-style:none}
.anfrage summary::-webkit-details-marker{display:none}
.anfrage summary:hover .zeile-text b{text-decoration:underline; text-decoration-color:var(--brand); text-decoration-thickness:2px; text-underline-offset:3px}
.anfrage-zeit{flex:0 0 92px; display:flex; flex-direction:column; font-weight:700; line-height:1.3}
.anfrage-zeit small{font-size:13px; font-weight:400; color:var(--grau-700)}
.anfrage-pfeil{flex:0 0 auto; color:var(--grau-500); transition:transform .14s}
.anfrage[open] .anfrage-pfeil{transform:rotate(180deg)}
.anfrage.ist-erledigt .zeile-text b,.anfrage.ist-erledigt .anfrage-zeit{color:var(--grau-500)}
.anfrage-inhalt{padding:4px 0 24px 110px; display:flex; flex-direction:column; gap:16px}
.anfrage-kontakt{display:flex; flex-wrap:wrap; gap:8px 24px; margin:0}
.anfrage-kontakt a{display:inline-flex; align-items:center; gap:8px; font-weight:600; color:inherit}
.anfrage-angaben{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px 24px; margin:0}
.anfrage-angaben dt{font-size:13px; color:var(--grau-700)}
.anfrage-angaben dd{margin:2px 0 0; font-weight:600}
.anfrage-nachricht{margin:0; padding:16px 18px; background:var(--grau-50); border-radius:var(--r-m); max-width:70ch}
.anfrage-aktionen{display:flex; flex-wrap:wrap; gap:12px}
.anfrage-aktionen form{margin:0}
@media (max-width:700px){
  .anfrage summary{flex-wrap:wrap}
  .anfrage-zeit{flex-basis:auto; flex-direction:row; gap:8px}
  .anfrage-inhalt{padding-left:0}
}