/* Farys-Baukasten · Admin-Bereich. Ruhig, gut lesbar, mobil zuerst, ohne Skripte und ohne fremde Server.
   Farben, Schriften, Ecken und Logo kommen aus dem Design der Website (Block „design“ in fm.konfig.json). */
:root {
  /* Standard ohne Block „design“; mit Block überschreibt admin/design.css diese Werte (bausteine/admin/design.mjs) */
  --grund: #f3f5f7;
  --flaeche: #ffffff;
  --text: #17202b;
  --leise: #4f5b67;
  --linie: #c9d1da;
  --feld-rand: #8a97a5;
  --akzent: #0a58a6;
  --akzent-dunkel: #07437f;
  --knopf: #0a58a6;
  --knopf-text: #ffffff;
  --knopf-rand: #0a58a6;
  --knopf-hover: #07437f;
  --knopf-rand-hover: #07437f;
  --kopf: #17202b;
  --kopf-text: #ffffff;
  --kopf-leise: #c8d2dc;
  --kopf-streifen: transparent;
  --gefahr: #a8231b;
  --erfolg: #1b6334;
  --hinweis: #6b4a00;
  --radius: 10px;
  --radius-knopf: 999px;
  --radius-feld: 8px;
  --schrift-text: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --schrift-titel: var(--schrift-text);
  --titel-gewicht: 700;
  --schrift-marke: var(--schrift-titel);
  --marke-gewicht: 700;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: 17px;
  line-height: 1.55;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
a { color: var(--akzent); text-underline-offset: 3px; }
a:hover { color: var(--akzent-dunkel); }
:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; border-radius: 4px; }
.springen { position: absolute; left: 12px; top: -100px; z-index: 50; padding: 10px 16px; background: var(--flaeche); color: var(--text); border-radius: var(--radius); }
.springen:focus { top: 12px; }

/* Rahmen: Inhalt und Fuß; am Rechner rechts neben dem Menü (ab 60rem) */
.app { flex: 1; display: flex; flex-direction: column; }
.rahmen { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.inhalt { flex: 1; width: min(100% - 32px, 60rem); margin-inline: auto; padding: 8px 0 48px; overflow-wrap: break-word; /* lange Namen und Adressen schieben die Seite nicht breiter */ }
.inhalt:focus { outline: none; }
.inhalt > p, .inhalt .leise { max-width: 46rem; }
.formular { max-width: 42rem; }

/* Kopf: Marke und „Website ansehen“ (am Handy oben, am Rechner oben im Menü) */
.kopf { background: var(--kopf); color: var(--kopf-text); padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left)); border-bottom: 4px solid var(--kopf-streifen); }
.kopf-innen { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; flex-wrap: wrap; width: min(100%, 60rem); margin-inline: auto; }
.kopf :focus-visible, .seitenleiste :focus-visible { outline-color: var(--kopf-text); }
.marke { margin: 0; display: flex; align-items: center; gap: 12px; min-width: 0; }
.marke img { display: block; height: 40px; width: auto; max-width: 200px; flex: none; }
.marke-name { display: block; font-family: var(--schrift-marke); font-weight: var(--marke-gewicht); font-size: 20px; line-height: 1.3; overflow-wrap: anywhere; }
.marke-zusatz { display: block; font-weight: 400; font-size: 14px; line-height: 1.3; color: var(--kopf-leise); }
.zur-seite { color: var(--kopf-text); font-size: 15px; padding: 10px 0; text-decoration-thickness: 1px; }
.zur-seite:hover { color: var(--kopf-text); text-decoration-thickness: 2px; }
.zeichen { flex: none; display: block; }

/* Menü am Handy: feste Leiste unten (Übersicht, drei Bereiche, „Mehr“); Konto und Abmelden auf der Seite „Mehr“ */
.menue { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; background: var(--kopf); border-top: 1px solid color-mix(in srgb, var(--kopf-text) 22%, var(--kopf));
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.menue ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.menue.leiste-2 ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.menue.leiste-3 ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.menue.leiste-4 ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.menue a { position: relative; display: grid; justify-items: center; align-content: center; gap: 3px; min-height: 64px; padding: 8px 2px 6px;
  color: var(--kopf-text); text-decoration: none; font-size: 13px; font-weight: 600; line-height: 1.2; touch-action: manipulation; }
.menue .lang { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.menue .kurz { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menue a[aria-current="page"], .menue a.ueber-mehr { background: color-mix(in srgb, var(--kopf-text) 14%, var(--kopf)); }
.menue a[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 22%; right: 22%; height: 3px; background: var(--kopf-text); border-radius: 0 0 2px 2px; }
.zaehler { position: absolute; top: 5px; left: calc(50% + 6px); min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  background: var(--kopf-text); color: var(--kopf); font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; }
.nur-breit, .menue-unten { display: none; }
body.mit-menue .rahmen { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }

/* Seite „Mehr“ */
.mehr-liste { list-style: none; margin: 0 0 16px; padding: 0; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); }
.mehr-liste li + li { border-top: 1px solid var(--linie); }

/* Angaben einer Nachricht (Kontakt): am Handy Bezeichnung über dem Wert, breiter als Tabelle mit Bezeichnung links */
.angaben { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0 0 16px; padding: 4px 20px;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); }
.angaben dt { padding-top: 12px; color: var(--leise); font-size: 14px; font-weight: 600; }
.angaben dd { margin: 0; padding: 2px 0 12px; border-bottom: 1px solid var(--linie); overflow-wrap: anywhere; }
.angaben dd:last-of-type { border-bottom: 0; }
@media (min-width: 40rem) {
  .angaben { grid-template-columns: minmax(10rem, max-content) minmax(0, 1fr); }
  .angaben dt, .angaben dd { padding: 10px 0; border-bottom: 1px solid var(--linie); font-size: inherit; }
  .angaben dt { padding-right: 24px; }
  .angaben dt:last-of-type, .angaben dd:last-of-type { border-bottom: 0; }
}
.mehr-liste form { margin: 0; }
.mehr-liste a, .mehr-liste button { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 0 16px;
  color: var(--text); background: none; border: 0; font: inherit; font-weight: 600; text-decoration: none; text-align: left; cursor: pointer; }
.mehr-liste .zaehler { position: static; margin-left: auto; background: var(--knopf); color: var(--knopf-text); }
.mehr-hilfe { color: var(--leise); font-size: 15px; }

/* Am Rechner: Menü als Spalte links (wie im CRM von Farys Media), klebt beim Scrollen */
@media (min-width: 60rem) {
  body.mit-menue { display: block; }
  .app { display: grid; grid-template-columns: 15rem minmax(0, 1fr); min-height: 100dvh;
    background: linear-gradient(to right, var(--kopf) calc(15rem - 4px), var(--kopf-streifen) 0, var(--kopf-streifen) 15rem, transparent 0); }
  .seitenleiste { position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; overflow-y: auto; background: var(--kopf); color: var(--kopf-text);
    border-right: 4px solid transparent; background-clip: padding-box; /* der Streifen kommt aus dem Hintergrund von .app und reicht so bis ganz unten */ }
  .seitenleiste .kopf { border-bottom: 0; padding: 20px 16px 8px; }
  .seitenleiste .kopf-innen { display: block; }
  .seitenleiste .marke { align-items: flex-start; flex-direction: column; gap: 10px; }
  .menue { position: static; border: 0; padding: 8px 10px; background: none; }
  .menue ul, .menue.leiste-2 ul, .menue.leiste-3 ul, .menue.leiste-4 ul { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .nur-breit { display: block; }
  .nur-schmal { display: none; }
  .menue a, .menue-unten a, .menue-unten button { display: flex; align-items: center; justify-items: start; gap: 12px; min-height: 44px; padding: 0 12px;
    border-radius: var(--radius); font-size: 16px; font-weight: 600; color: var(--kopf-text); }
  .menue .lang { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; min-width: 0; hyphens: manual; line-height: 1.25; padding-block: 4px; }
  .menue .kurz { display: none; }
  .menue a[aria-current="page"]::before { top: 10px; bottom: 10px; left: 0; right: auto; width: 3px; height: auto; border-radius: 0 2px 2px 0; }
  .zaehler { position: static; margin-left: auto; }
  .menue-unten { display: block; margin-top: auto; padding: 8px 10px 16px; border-top: 1px solid color-mix(in srgb, var(--kopf-text) 22%, var(--kopf)); }
  .menue-unten ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .menue-unten form { margin: 0; }
  .menue-unten a, .menue-unten button { width: 100%; text-decoration: none; background: none; border: 0; font: inherit; font-weight: 600; cursor: pointer; text-align: left; }
  .menue-unten a[aria-current="page"] { background: color-mix(in srgb, var(--kopf-text) 14%, var(--kopf)); }
  body.mit-menue .rahmen { padding-bottom: 0; min-height: 100dvh; }
  body.mit-menue .inhalt { width: min(100% - 64px, 60rem); padding-top: 24px; }
}
@media (hover: hover) and (pointer: fine) {
  .menue a:hover, .menue-unten a:hover, .menue-unten button:hover { background: color-mix(in srgb, var(--kopf-text) 10%, var(--kopf)); color: var(--kopf-text); }
  .mehr-liste a:hover, .mehr-liste button:hover { background: var(--grund); color: var(--text); }
}
@media print { .menue, .menue-unten, .kopf, .fuss, .springen { display: none !important; } .app { display: block; background: none; } }

h1, h2 { font-family: var(--schrift-titel); font-weight: var(--titel-gewicht); }
h1 { font-size: 28px; line-height: 1.2; margin: 20px 0 16px; }
h2 { font-size: 20px; line-height: 1.3; margin: 0 0 8px; }
h3 { font-family: var(--schrift-titel); font-weight: var(--titel-gewicht); font-size: 18px; line-height: 1.3; margin: 20px 0 8px; }
.formular h3:first-child, .gruppe > h3:first-child { margin-top: 0; }
p { margin: 0 0 12px; }
.leise { color: var(--leise); }
.klein { font-size: 15px; color: var(--leise); margin: 0; }

.meldung { padding: 12px 16px; border-radius: var(--radius); border-left: 5px solid; background: var(--flaeche); margin: 0 0 16px; }
.meldung-erfolg { border-color: var(--erfolg); color: var(--erfolg); }
.meldung-fehler { border-color: var(--gefahr); color: var(--gefahr); }
.meldung-hinweis { border-color: var(--hinweis); color: var(--hinweis); }

.kacheln { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.kachel { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 18px 20px; position: relative; }
.kachel h2 a { text-decoration: none; display: flex; align-items: center; gap: 10px; }
.kachel .zaehler { position: static; margin-left: auto; background: var(--knopf); color: var(--knopf-text); }
.kachel h2 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.kachel p { color: var(--leise); margin: 0; }
@media (hover: hover) and (pointer: fine) { .kachel:hover { border-color: var(--akzent); } }

.gruppe { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 18px 20px; margin: 0 0 16px; }
.eintraege { list-style: none; padding: 0; margin: 0; }
.eintraege li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; padding: 12px 0; border-top: 1px solid var(--linie); }
.eintraege li:first-child { border-top: 0; }
.eintrag-titel { font-weight: 600; margin: 0; }
.aktionen { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 12px; }
.eintraege .aktionen { margin: 0; }
.aktionen a { display: inline-flex; align-items: center; min-height: 44px; }

.formular { margin: 0; }
.feld { margin: 0 0 18px; border: 0; padding: 0; min-width: 0; }
.feld > label, .feld > legend { display: block; font-weight: 600; margin-bottom: 4px; padding: 0; }
.pflicht { font-weight: 400; color: var(--leise); font-size: 15px; }
.hilfe { font-size: 15px; color: var(--leise); margin: 0 0 6px; }
/* Alle Feldtypen, die fm_feld() erzeugt (auch tel und url: ohne Eintrag hier zeigt der Browser seine kleinen Standardfelder) */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="search"],
input[type="password"], input[type="date"], input[type="time"], input[type="file"], textarea, select {
  display: block; width: 100%; font: inherit; font-size: 17px; line-height: 1.3; color: var(--text);
  background: var(--flaeche); border: 1px solid var(--feld-rand); border-radius: var(--radius-feld); padding: 8px 12px; min-height: 44px;
}
input[type="date"], input[type="time"] { max-width: 16rem; }
input[type="file"] { padding: 6px; background: var(--grund); }
input[type="file"]::file-selector-button {
  font: inherit; font-weight: 600; min-height: 34px; margin-right: 12px; padding: 0 14px; cursor: pointer;
  border: 2px solid var(--akzent); border-radius: var(--radius-knopf); background: var(--flaeche); color: var(--akzent);
}
textarea { resize: vertical; min-height: 9rem; line-height: 1.5; }
.feld-fehler input, .feld-fehler textarea { border: 2px solid var(--gefahr); }
.fehlertext { color: var(--gefahr); font-weight: 600; font-size: 15px; margin: 6px 0 0; }
.wahl { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 400; cursor: pointer; }
.feld > .wahl { display: flex; font-weight: 400; margin: 0; }
.wahl input { width: 22px; height: 22px; margin: 0; accent-color: var(--akzent); flex: none; }
.gruppe-feld { border: 1px solid var(--linie); border-radius: var(--radius); padding: 14px 16px 2px; margin: 0 0 18px; background: var(--flaeche); }
.gruppe-feld > legend { font-weight: 700; padding: 0 6px; }
.gruppe-feld .leise { font-weight: 400; font-size: 15px; }

.knoepfe { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 8px; }
.knopf {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px;
  border-radius: var(--radius-knopf); border: 2px solid var(--knopf-rand); background: var(--knopf); color: var(--knopf-text);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; touch-action: manipulation;
}
.knopf:hover { background: var(--knopf-hover); border-color: var(--knopf-rand-hover); color: var(--knopf-text); }
.knopf:active { transform: scale(0.97); }
.knopf-rand { background: transparent; color: var(--akzent); border-color: var(--akzent); }
.knopf-rand:hover { background: var(--grund); color: var(--akzent-dunkel); border-color: var(--akzent-dunkel); }
.knopf-gefahr { background: var(--gefahr); border-color: var(--gefahr); color: #fff; }
.knopf-gefahr:hover { background: #861b15; border-color: #861b15; color: #fff; }
.eintraege .knopf { min-height: 44px; padding: 0 16px; font-size: 16px; background: transparent; color: var(--akzent); border-color: var(--akzent); }
.eintraege .knopf:hover { background: var(--grund); color: var(--akzent-dunkel); border-color: var(--akzent-dunkel); }

.bild-vorschau { margin: 0 0 8px; }
.bild-vorschau img { display: block; max-width: 240px; height: auto; border-radius: var(--radius-feld); border: 1px solid var(--linie); }
.bild-vorschau figcaption { font-size: 15px; color: var(--leise); }

.karte h2 { margin-bottom: 6px; }
.frueher { margin-top: 16px; border-top: 1px solid var(--linie); padding-top: 8px; }
.frueher summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 10px; color: var(--akzent); font-weight: 600; list-style: none; }
.frueher summary::-webkit-details-marker, .af-klappe > summary::-webkit-details-marker { display: none; }
/* Pfeil statt des Browser-Dreiecks (das fehlt bei display: flex): zu = nach rechts, offen = nach unten */
.frueher summary::before, .af-klappe > summary::before { content: ""; flex: none; width: 8px; height: 8px; margin-left: 2px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.frueher[open] > summary::before, .af-klappe[open] > summary::before { transform: rotate(45deg); }

.unsichtbar { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.fuss { font-size: 14px; color: var(--leise); padding: 16px max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); border-top: 1px solid var(--linie); }
.fuss p { width: min(100%, 60rem); margin: 0 auto; }
.fuss a { color: var(--leise); }

@media (min-width: 640px) {
  .kacheln { grid-template-columns: 1fr 1fr; }
  h1 { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) { .knopf:active { transform: none; } }

/* Öffnungszeiten: zwei Zeitfelder nebeneinander, Vorschau wie auf der Website (schlicht) */
.eintraege form { margin: 0; }
.zeitfenster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; align-items: end; }
.zeitfenster .feld { margin-bottom: 12px; }
.zeitfenster input[type="time"] { max-width: none; }
/* Datumspaare (Von/Bis): am Handy untereinander, sonst überlappen sie auf dem iPhone oder schneiden das Datum ab */
.zeitfenster:has(input[type="date"]) { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
/* iPhone: Datumsfelder haben eine eigene Mindestbreite und zentrieren das Datum */
input[type="date"] { min-width: 0; }
input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.oz-tag > legend { font-size: 18px; }
.oz-vorschau .fm-heute { font-weight: 600; }
.oz-vorschau .fm-woche { display: grid; gap: 4px; margin: 0 0 12px; }
.oz-vorschau .fm-tag { display: grid; grid-template-columns: minmax(9rem, auto) 1fr; gap: 0 16px; }
.oz-vorschau dt { font-weight: 600; }
.oz-vorschau dd { margin: 0; }
.oz-vorschau .fm-ist-heute { background: var(--grund); border-radius: 6px; }
.oz-vorschau .fm-sonder-titel { font-weight: 600; margin: 12px 0 4px; }
.oz-vorschau .fm-sonder ul { margin: 0; padding-left: 20px; }
@media (max-width: 420px) { .oz-vorschau .fm-tag { grid-template-columns: 1fr; } }
/* Sehr schmale Handys: etwas weniger Rand, damit zwei Zeitfelder nebeneinander passen */
@media (max-width: 380px) {
  .gruppe { padding: 16px 12px; }
  .gruppe-feld { padding: 12px 10px 2px; }
  .zeitfenster input[type="time"] { padding-inline: 8px; }
}
.neu-knoepfe { margin: 0 0 12px; }

/* Besucherstatistik: Tabellen mit Balken (meter), ohne Skript */
.tabelle { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 16px; }
.tabelle caption { text-align: left; font-weight: 700; font-size: 18px; padding: 4px 0 8px; }
.tabelle th, .tabelle td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--linie); vertical-align: middle; }
.tabelle thead th { font-size: 15px; color: var(--leise); font-weight: 600; }
.tabelle tbody th { font-weight: 400; overflow-wrap: anywhere; }
.tabelle .zahl { text-align: right; white-space: nowrap; }
/* Balken nur zur Anschauung (aria-hidden), in der Hausfarbe statt im Grün des Browsers */
.tabelle meter { width: 5.5rem; height: 12px; vertical-align: middle; -webkit-appearance: none; appearance: none; border: 0; border-radius: 999px; background: var(--linie); }
.tabelle meter::-webkit-meter-bar { height: 12px; border: 0; border-radius: 999px; background: var(--linie); }
.tabelle meter::-webkit-meter-optimum-value, .tabelle meter::-webkit-meter-suboptimum-value, .tabelle meter::-webkit-meter-even-less-good-value { border-radius: 999px; background: var(--knopf); }
.tabelle meter::-moz-meter-bar { border-radius: 999px; background: var(--knopf); }
@media (max-width: 480px) { .tabelle meter { width: 3rem; } .tabelle { font-size: 15px; } }

/* Verfügbarkeitskalender: Reiter je Angebot, Jahresübersicht (nur ansehen), Monat zum Ankreuzen (Kästchen ab 44 px), ohne Skript */
.vk-reiter ul, .reiter ul { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.vk-reiter a, .reiter a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: var(--radius-knopf); border: 1px solid var(--linie); background: var(--flaeche); color: var(--text); text-decoration: none; }
.vk-reiter a[aria-current="page"], .reiter a[aria-current="page"] { background: var(--knopf); border-color: var(--knopf-rand); color: var(--knopf-text); }
.vk-reiter a[aria-current="page"] .klein, .reiter a[aria-current="page"] .klein { color: inherit; }
.vk-wege { margin-bottom: 16px; }
.vk-wege .knopf { min-height: 44px; }
.vk-jahr-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.vk-jahre { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 8px; }
.vk-jahre a { display: inline-flex; align-items: center; min-height: 44px; }
.vk-legende { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 15px; color: var(--leise); }
.vk-legende li { display: inline-flex; align-items: center; gap: 8px; }
.vk-muster { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 4px; font-size: 13px; font-weight: 700; }
.vk-jahr { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: 14px 18px; }
.vk-mini table { width: 100%; border-collapse: separate; border-spacing: 2px; table-layout: fixed; font-size: 13px; font-variant-numeric: tabular-nums; }
.vk-mini caption { text-align: left; padding-bottom: 2px; }
.vk-mini-titel { display: block; font-weight: 700; font-size: 16px; }
.vk-mini-titel a { display: inline-flex; align-items: center; min-height: 44px; }
.vk-mini-summe { display: block; font-size: 13px; color: var(--leise); }
.vk-mini th { font-weight: 600; color: var(--leise); font-size: 12px; }
.vk-mini td { text-align: center; height: 24px; border-radius: 4px; padding: 0; }
/* Status: Farbe und Form (frei mit Rahmen, vorgemerkt gestrichelt, gebucht gefüllt), nie nur Farbe */
.vk-frei { background: color-mix(in srgb, var(--akzent) 14%, var(--flaeche)); box-shadow: inset 0 0 0 2px var(--akzent); font-weight: 700; color: var(--text); }
.vk-vorgemerkt { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--hinweis) 22%, var(--flaeche)) 0 3px, var(--flaeche) 3px 6px); outline: 2px dashed var(--hinweis); outline-offset: -2px; color: var(--text); font-weight: 700; }
.vk-gebucht { background: var(--text); color: var(--flaeche); font-weight: 700; }
.vk-aus { color: var(--leise); }
.vk-vorbei { color: var(--leise); }
.vk-muster.vk-aus { box-shadow: inset 0 0 0 1px var(--linie); }
.vk-ft { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; }
.vk-heute { box-shadow: inset 0 0 0 2px var(--text); }
.vk-raster { width: 100%; border-collapse: separate; border-spacing: 4px; table-layout: fixed; margin: 0 0 8px; font-variant-numeric: tabular-nums; }
.vk-raster th { font-size: 14px; font-weight: 600; color: var(--leise); }
.vk-raster td { padding: 0; }
.vk-tag { position: relative; display: grid; place-items: center; min-height: 48px; border-radius: 6px; font-size: 17px; text-decoration-skip-ink: none; }
a.vk-tag { text-decoration: none; }
a.vk-tag.vk-ft, .vk-waehlbar.vk-ft > span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.vk-waehlbar { cursor: pointer; border: 1px solid var(--feld-rand); background: var(--flaeche); color: var(--text); }
/* Das Kästchen selbst bleibt bedienbar (Tastatur, Screenreader), sichtbar ist die ganze Fläche */
.vk-waehlbar input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.vk-waehlbar:has(input:checked) { background: color-mix(in srgb, var(--akzent) 14%, var(--flaeche)); border: 2px solid var(--akzent); font-weight: 700; }
.vk-waehlbar:has(input:checked)::after { content: "✓"; position: absolute; top: 1px; right: 4px; font-size: 12px; color: var(--akzent); }
.vk-waehlbar:has(input:focus-visible) { outline: 3px solid var(--akzent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .vk-waehlbar:hover { border-color: var(--akzent); } }
.vk-ft-titel { margin-top: 12px; }
.vk-ft-liste { margin: 4px 0 0; padding-left: 20px; }
.vk-wahl { display: flex; flex-wrap: wrap; gap: 0 18px; }
.vk-wahl-feiertage { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--linie); }
.vk-buchung .aktionen form { margin: 0; }
@media (max-width: 400px) { .vk-raster { border-spacing: 2px; } .vk-tag { font-size: 16px; } }

/* Startseite: „Jetzt wichtig“ (Warnung rot, Hinweis in der Akzentfarbe, Info leise), darunter alle Bereiche */
.wichtig ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wichtig a { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 10px 12px; border-radius: var(--radius-feld);
  border-left: 4px solid var(--linie); background: var(--grund); color: var(--text); text-decoration: none; }
.wichtig a .zeichen { margin-top: 2px; }
.wichtig-warnung a { border-left-color: var(--gefahr); color: var(--gefahr); font-weight: 600; }
.wichtig-hinweis a { border-left-color: var(--akzent); }
.wichtig-info a { color: var(--leise); }
@media (hover: hover) and (pointer: fine) { .wichtig a:hover { text-decoration: underline; text-underline-offset: 3px; } }
.kacheln-titel { margin-top: 8px; }

/* Reiter (z. B. Öffnungszeiten): Zähler als Marke in der Knopffarbe */
.reiter .zaehler { position: static; background: var(--knopf); color: var(--knopf-text); }
.reiter a[aria-current="page"] .zaehler { background: var(--knopf-text); color: var(--knopf); }

/* Neuigkeiten: kleines Vorschaubild je Beitrag, Hinweis „endet …“ */
.nk-liste li { flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start; }
.nk-liste .nk-text { flex: 1; min-width: 0; }
.nk-liste .aktionen { flex: none; }
.nk-vorschau { flex: none; display: block; width: 72px; height: auto; border-radius: var(--radius-feld); object-fit: cover; background: var(--grund); }
.nk-ohne-bild { display: grid; place-items: center; height: 48px; color: var(--leise); border: 1px solid var(--linie); }
.nk-endet { color: var(--hinweis); }
@media (max-width: 480px) { .nk-liste li { flex-wrap: wrap; } .nk-liste .nk-text { flex-basis: calc(100% - 88px); } .nk-liste .aktionen { width: 100%; padding-left: 88px; } }

/* Besucher: Verlauf der letzten 30 Tage als Balken (Inline-SVG) */
.st-verlauf { margin: 0 0 18px; }
.st-verlauf svg { display: block; width: 100%; height: 120px; }
.st-verlauf .st-tag { fill: var(--knopf); }
.st-verlauf .st-we { fill: color-mix(in srgb, var(--knopf) 55%, var(--flaeche)); }
.st-verlauf figcaption { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; color: var(--leise); margin-top: 4px; }
.st-vergleich { margin: 10px 0 0; font-weight: 600; }
.st-summe { margin: 0 0 14px; font-weight: 600; }

/* Reservierungen: Anfragen, Tagesraster (Uhrzeit waagerecht, Tische senkrecht; nur am Rechner, darunter dieselben Angaben
   als Liste), Woche. Lage der Balken über feste Klassen (keine style-Attribute wegen der CSP): rv-n-<Spalten>,
   rv-s-<Beginn in Viertelstunden>, rv-d-<Dauer in Viertelstunden>. */
.rv-entscheiden { align-items: center; }
.rv-entscheiden form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.rv-tisch { font-size: 15px; }
.rv-entscheiden input.rv-tisch-feld { width: 5.5rem; min-height: 44px; padding: 6px 10px; font: inherit; border: 1px solid var(--feld-rand); border-radius: var(--radius-feld); background: var(--flaeche); color: var(--text); }
.rv-anmerkung { font-style: italic; }
.rv-frei { color: var(--erfolg); font-weight: 600; }
.rv-zeiten > summary { display: flex; align-items: center; min-height: 44px; font-weight: 600; cursor: pointer; color: var(--akzent); }
.rv-zeiten[open] > summary { margin-bottom: 8px; }
.rv-entscheiden button.knopf { background: var(--knopf); color: var(--knopf-text); border-color: var(--knopf-rand); }
.rv-entscheiden button.knopf:hover { background: var(--knopf-hover); color: var(--knopf-text); }
.rv-eintrag.rv-nicht-erschienen .eintrag-titel, .rv-eintrag.rv-abgesagt .eintrag-titel { text-decoration: line-through; }
.rv-tage { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.rv-tage a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.rv-tag-wahl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 4px 0 12px; }
.rv-tag-wahl input[type="date"] { min-height: 44px; padding: 6px 10px; font: inherit; border: 1px solid var(--feld-rand); border-radius: var(--radius-feld); background: var(--flaeche); color: var(--text); }
.rv-tag-wahl .knopf { min-height: 44px; padding: 0 16px; font-size: 16px; }
.rv-raster { display: none; margin: 8px 0 12px; font-size: 13px; --rv-name: 9.5rem; }
@media (min-width: 60rem) { .rv-raster { display: grid; gap: 3px; } }
.rv-zeile { display: grid; grid-template-columns: var(--rv-name) repeat(var(--rv-n, 48), minmax(0, 1fr)); align-items: stretch; min-height: 30px;
  background-image: linear-gradient(to right, var(--linie) 1px, transparent 1px); background-size: calc((100% - var(--rv-name)) / var(--rv-n, 48) * 4) 100%;
  background-position: var(--rv-name) 0; background-repeat: repeat-x; }
.rv-kopf { background: none; min-height: 0; color: var(--leise); }
.rv-name { grid-column: 1; align-self: center; padding-right: 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--leise); }
.rv-stunde { grid-row: 1; padding-left: 3px; border-left: 1px solid var(--linie); }
.rv-balken { grid-row: 1; display: flex; align-items: center; min-width: 0; padding: 2px 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  border-radius: 4px; text-decoration: none; font-weight: 600; z-index: 1; }
.rv-balken.rv-bestaetigt, .rv-muster.rv-bestaetigt { background: var(--knopf); color: var(--knopf-text); }
.rv-balken.rv-angefragt, .rv-muster.rv-angefragt { background: var(--flaeche); color: var(--text); outline: 2px dashed var(--akzent); outline-offset: -2px; }
.rv-balken.rv-nicht-erschienen, .rv-muster.rv-nicht-erschienen { background: var(--grund); color: var(--leise); text-decoration: line-through; outline: 1px solid var(--linie); outline-offset: -1px; }
.rv-puffer { grid-row: 1; background: repeating-linear-gradient(135deg, var(--linie) 0 3px, transparent 3px 7px); border-radius: 0 4px 4px 0; }
.rv-legende { display: none; list-style: none; margin: 0 0 12px; padding: 0; flex-wrap: wrap; gap: 4px 18px; font-size: 15px; color: var(--leise); }
@media (min-width: 60rem) { .rv-legende { display: flex; } }
.rv-legende li { display: inline-flex; align-items: center; gap: 8px; }
.rv-muster { display: inline-block; width: 22px; height: 14px; border-radius: 3px; }
.rv-muster.rv-puffer { border-radius: 3px; }
.rv-woche, .rv-monate { list-style: none; margin: 0; padding: 0; }
.rv-woche li { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; min-height: 44px; border-top: 1px solid var(--linie); }
.rv-woche li:first-child { border-top: 0; }
.rv-woche a { display: inline-flex; align-items: center; min-height: 44px; min-width: 7.5rem; font-weight: 600; }
.rv-woche a[aria-current] { color: var(--text); }
.rv-monate li { padding: 4px 0; }
.rv-tische { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
.rv-tische th { text-align: left; font-size: 15px; font-weight: 600; color: var(--leise); padding: 0 8px 4px 0; }
.rv-tische td { padding: 0 8px 8px 0; vertical-align: top; }
.rv-tische input { width: 100%; min-height: 44px; padding: 6px 10px; font: inherit; border: 1px solid var(--feld-rand); border-radius: var(--radius-feld); background: var(--flaeche); color: var(--text); }
.rv-tische .feld-fehler input { border: 2px solid var(--gefahr); }
.rv-adresse { display: block; padding: 10px 12px; overflow-wrap: anywhere; background: var(--grund); border-radius: var(--radius-feld); font-size: 15px; }
.rv-n-1{--rv-n:1} .rv-n-2{--rv-n:2} .rv-n-3{--rv-n:3} .rv-n-4{--rv-n:4} .rv-n-5{--rv-n:5} .rv-n-6{--rv-n:6} .rv-n-7{--rv-n:7} .rv-n-8{--rv-n:8} .rv-n-9{--rv-n:9} .rv-n-10{--rv-n:10} .rv-n-11{--rv-n:11} .rv-n-12{--rv-n:12} .rv-n-13{--rv-n:13} .rv-n-14{--rv-n:14} .rv-n-15{--rv-n:15} .rv-n-16{--rv-n:16} .rv-n-17{--rv-n:17} .rv-n-18{--rv-n:18} .rv-n-19{--rv-n:19} .rv-n-20{--rv-n:20} .rv-n-21{--rv-n:21} .rv-n-22{--rv-n:22} .rv-n-23{--rv-n:23} .rv-n-24{--rv-n:24} .rv-n-25{--rv-n:25} .rv-n-26{--rv-n:26} .rv-n-27{--rv-n:27} .rv-n-28{--rv-n:28} .rv-n-29{--rv-n:29} .rv-n-30{--rv-n:30} .rv-n-31{--rv-n:31} .rv-n-32{--rv-n:32} .rv-n-33{--rv-n:33} .rv-n-34{--rv-n:34} .rv-n-35{--rv-n:35} .rv-n-36{--rv-n:36} .rv-n-37{--rv-n:37} .rv-n-38{--rv-n:38} .rv-n-39{--rv-n:39} .rv-n-40{--rv-n:40} .rv-n-41{--rv-n:41} .rv-n-42{--rv-n:42} .rv-n-43{--rv-n:43} .rv-n-44{--rv-n:44} .rv-n-45{--rv-n:45} .rv-n-46{--rv-n:46} .rv-n-47{--rv-n:47} .rv-n-48{--rv-n:48} .rv-n-49{--rv-n:49} .rv-n-50{--rv-n:50} .rv-n-51{--rv-n:51} .rv-n-52{--rv-n:52} .rv-n-53{--rv-n:53} .rv-n-54{--rv-n:54} .rv-n-55{--rv-n:55} .rv-n-56{--rv-n:56} .rv-n-57{--rv-n:57} .rv-n-58{--rv-n:58} .rv-n-59{--rv-n:59} .rv-n-60{--rv-n:60} .rv-n-61{--rv-n:61} .rv-n-62{--rv-n:62} .rv-n-63{--rv-n:63} .rv-n-64{--rv-n:64} .rv-n-65{--rv-n:65} .rv-n-66{--rv-n:66} .rv-n-67{--rv-n:67} .rv-n-68{--rv-n:68} .rv-n-69{--rv-n:69} .rv-n-70{--rv-n:70} .rv-n-71{--rv-n:71} .rv-n-72{--rv-n:72} .rv-n-73{--rv-n:73} .rv-n-74{--rv-n:74} .rv-n-75{--rv-n:75} .rv-n-76{--rv-n:76} .rv-n-77{--rv-n:77} .rv-n-78{--rv-n:78} .rv-n-79{--rv-n:79} .rv-n-80{--rv-n:80} .rv-n-81{--rv-n:81} .rv-n-82{--rv-n:82} .rv-n-83{--rv-n:83} .rv-n-84{--rv-n:84} .rv-n-85{--rv-n:85} .rv-n-86{--rv-n:86} .rv-n-87{--rv-n:87} .rv-n-88{--rv-n:88} .rv-n-89{--rv-n:89} .rv-n-90{--rv-n:90} .rv-n-91{--rv-n:91} .rv-n-92{--rv-n:92} .rv-n-93{--rv-n:93} .rv-n-94{--rv-n:94} .rv-n-95{--rv-n:95} .rv-n-96{--rv-n:96}
.rv-s-0{grid-column-start:2} .rv-s-1{grid-column-start:3} .rv-s-2{grid-column-start:4} .rv-s-3{grid-column-start:5} .rv-s-4{grid-column-start:6} .rv-s-5{grid-column-start:7} .rv-s-6{grid-column-start:8} .rv-s-7{grid-column-start:9} .rv-s-8{grid-column-start:10} .rv-s-9{grid-column-start:11} .rv-s-10{grid-column-start:12} .rv-s-11{grid-column-start:13} .rv-s-12{grid-column-start:14} .rv-s-13{grid-column-start:15} .rv-s-14{grid-column-start:16} .rv-s-15{grid-column-start:17} .rv-s-16{grid-column-start:18} .rv-s-17{grid-column-start:19} .rv-s-18{grid-column-start:20} .rv-s-19{grid-column-start:21} .rv-s-20{grid-column-start:22} .rv-s-21{grid-column-start:23} .rv-s-22{grid-column-start:24} .rv-s-23{grid-column-start:25} .rv-s-24{grid-column-start:26} .rv-s-25{grid-column-start:27} .rv-s-26{grid-column-start:28} .rv-s-27{grid-column-start:29} .rv-s-28{grid-column-start:30} .rv-s-29{grid-column-start:31} .rv-s-30{grid-column-start:32} .rv-s-31{grid-column-start:33} .rv-s-32{grid-column-start:34} .rv-s-33{grid-column-start:35} .rv-s-34{grid-column-start:36} .rv-s-35{grid-column-start:37} .rv-s-36{grid-column-start:38} .rv-s-37{grid-column-start:39} .rv-s-38{grid-column-start:40} .rv-s-39{grid-column-start:41} .rv-s-40{grid-column-start:42} .rv-s-41{grid-column-start:43} .rv-s-42{grid-column-start:44} .rv-s-43{grid-column-start:45} .rv-s-44{grid-column-start:46} .rv-s-45{grid-column-start:47} .rv-s-46{grid-column-start:48} .rv-s-47{grid-column-start:49} .rv-s-48{grid-column-start:50} .rv-s-49{grid-column-start:51} .rv-s-50{grid-column-start:52} .rv-s-51{grid-column-start:53} .rv-s-52{grid-column-start:54} .rv-s-53{grid-column-start:55} .rv-s-54{grid-column-start:56} .rv-s-55{grid-column-start:57} .rv-s-56{grid-column-start:58} .rv-s-57{grid-column-start:59} .rv-s-58{grid-column-start:60} .rv-s-59{grid-column-start:61} .rv-s-60{grid-column-start:62} .rv-s-61{grid-column-start:63} .rv-s-62{grid-column-start:64} .rv-s-63{grid-column-start:65} .rv-s-64{grid-column-start:66} .rv-s-65{grid-column-start:67} .rv-s-66{grid-column-start:68} .rv-s-67{grid-column-start:69} .rv-s-68{grid-column-start:70} .rv-s-69{grid-column-start:71} .rv-s-70{grid-column-start:72} .rv-s-71{grid-column-start:73} .rv-s-72{grid-column-start:74} .rv-s-73{grid-column-start:75} .rv-s-74{grid-column-start:76} .rv-s-75{grid-column-start:77} .rv-s-76{grid-column-start:78} .rv-s-77{grid-column-start:79} .rv-s-78{grid-column-start:80} .rv-s-79{grid-column-start:81} .rv-s-80{grid-column-start:82} .rv-s-81{grid-column-start:83} .rv-s-82{grid-column-start:84} .rv-s-83{grid-column-start:85} .rv-s-84{grid-column-start:86} .rv-s-85{grid-column-start:87} .rv-s-86{grid-column-start:88} .rv-s-87{grid-column-start:89} .rv-s-88{grid-column-start:90} .rv-s-89{grid-column-start:91} .rv-s-90{grid-column-start:92} .rv-s-91{grid-column-start:93} .rv-s-92{grid-column-start:94} .rv-s-93{grid-column-start:95} .rv-s-94{grid-column-start:96} .rv-s-95{grid-column-start:97}
.rv-d-1{grid-column-end:span 1} .rv-d-2{grid-column-end:span 2} .rv-d-3{grid-column-end:span 3} .rv-d-4{grid-column-end:span 4} .rv-d-5{grid-column-end:span 5} .rv-d-6{grid-column-end:span 6} .rv-d-7{grid-column-end:span 7} .rv-d-8{grid-column-end:span 8} .rv-d-9{grid-column-end:span 9} .rv-d-10{grid-column-end:span 10} .rv-d-11{grid-column-end:span 11} .rv-d-12{grid-column-end:span 12} .rv-d-13{grid-column-end:span 13} .rv-d-14{grid-column-end:span 14} .rv-d-15{grid-column-end:span 15} .rv-d-16{grid-column-end:span 16} .rv-d-17{grid-column-end:span 17} .rv-d-18{grid-column-end:span 18} .rv-d-19{grid-column-end:span 19} .rv-d-20{grid-column-end:span 20} .rv-d-21{grid-column-end:span 21} .rv-d-22{grid-column-end:span 22} .rv-d-23{grid-column-end:span 23} .rv-d-24{grid-column-end:span 24} .rv-d-25{grid-column-end:span 25} .rv-d-26{grid-column-end:span 26} .rv-d-27{grid-column-end:span 27} .rv-d-28{grid-column-end:span 28} .rv-d-29{grid-column-end:span 29} .rv-d-30{grid-column-end:span 30} .rv-d-31{grid-column-end:span 31} .rv-d-32{grid-column-end:span 32}
/* Galerie: Themen als Gruppen, Fotos als Raster mit Vorschau, Beschreibung und kleinen Knöpfen zum Schieben */
.ga-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; }
.ga-kopf h2 { margin: 0; }
.ga-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.ga-aktionen a { display: inline-flex; align-items: center; min-height: 44px; }
.ga-knopf { display: inline; margin: 0; }
.ga-knopf .knopf-klein { min-height: 44px; min-width: 44px; padding: 0 12px; font-size: 18px; background: transparent; color: var(--akzent); border-color: var(--akzent); }
.ga-knopf .knopf-klein:hover { background: var(--grund); color: var(--akzent-dunkel); border-color: var(--akzent-dunkel); }
.ga-knopf .knopf-klein:disabled { opacity: 0.35; cursor: default; }
.ga-fotos { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: 16px; }
.ga-foto { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); }
.ga-ohne { border: 2px dashed var(--gefahr); }
.ga-vorschau { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-feld); background: var(--grund); }
.ga-alt { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
.ga-auswahl { display: block; width: 100%; max-width: 24rem; min-height: 44px; font: inherit; font-size: 17px; color: var(--text); background: var(--flaeche); border: 1px solid var(--feld-rand); border-radius: var(--radius-feld); padding: 8px 12px; }

/* Anfragen und Termine: Stand als Schild, Vorschau der Mail, Zeilen für Telefontermine, Blättern, Platzhalter-Tabelle, Verlauf */
.af-etikett { display: inline-block; padding: 1px 10px; border: 1px solid var(--linie); border-radius: 999px; background: var(--grund); color: var(--text);
  font-size: 14px; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.af-etikett-neu { background: var(--knopf); border-color: var(--knopf-rand); color: var(--knopf-text); }
.af-etikett-fehler { background: var(--gefahr); border-color: var(--gefahr); color: #fff; }
/* Liste: Der Name ist der einzige Link der Zeile und deckt sie ganz ab */
.af-liste li { position: relative; }
.af-zeilenlink::after { content: ""; position: absolute; inset: 0; }
@media (hover: hover) and (pointer: fine) { .af-liste li:has(.af-zeilenlink):hover { background: var(--grund); } }
/* Anfrage: gewählter Telefontermin oben, offene Vorschläge abgesetzt darunter; „Angaben ändern“ aufklappbar wie eine Gruppe */
.af-gewaehlt { font-size: 18px; margin: 0 0 8px; }
.af-gewaehlt ~ .af-vorschlaege { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--linie); }
.af-vorschlaege h3 { margin: 0 0 4px; }
.af-klappe > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 10px; list-style: none;
  font-family: var(--schrift-titel); font-weight: var(--titel-gewicht); font-size: 20px; line-height: 1.3; }
.af-klappe[open] > summary { margin-bottom: 8px; }
.af-mehr-zeiten { margin: 0 0 18px; }
.af-mehr-zeiten[open] > summary { margin-bottom: 8px; }
.af-so-gehts { margin: 0 0 16px; padding-top: 0; border-top: 0; max-width: 46rem; }
.af-mail { background: var(--grund); border: 1px solid var(--linie); border-radius: var(--radius); padding: 14px 16px; margin: 0 0 12px; overflow-wrap: anywhere; }
.af-mail p { margin: 0 0 12px; }
.af-mail > :last-child, .af-mail > :last-child > :last-child { margin-bottom: 0; }
.af-signatur { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--linie); color: var(--leise); }
.af-zeile-felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.af-zeile-felder .feld:first-child { grid-column: 1 / -1; }
.af-zeile input[type="date"], .af-zeile input[type="time"] { max-width: none; }
.af-seiten { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; margin: 8px 0 0; }
.af-seiten a { display: inline-flex; align-items: center; min-height: 44px; }
.af-verlauf li > div, .af-liste li > div { min-width: 0; flex: 1 1 14rem; }
.af-verlauf li p:last-child { margin-bottom: 0; }
/* Anleitung zur Einrichtung von Google: nummerierte Schritte mit Luft dazwischen */
.af-anleitung { margin: 0 0 12px; padding-left: 1.5em; max-width: 46rem; }
.af-anleitung li { margin: 0 0 12px; padding-left: 4px; }
.af-platzhalter td { overflow-wrap: anywhere; }
.af-platzhalter code { font-size: 15px; white-space: nowrap; }
@media (min-width: 40rem) {
  .af-zeile-felder { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .af-zeile-felder .feld:first-child { grid-column: auto; }
}
/* Status ändern: ab etwa 1100 px Formular und Vorschau der Mail nebeneinander; die Zeilen der Telefontermine dann wieder zweispaltig */
@media (min-width: 68.75rem) {
  .af-nebeneinander { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; align-items: start; }
  .af-nebeneinander .af-zeile-felder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .af-nebeneinander .af-zeile-felder .feld:first-child { grid-column: 1 / -1; }
}
@media (max-width: 39.99rem) {
  .af-platzhalter thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .af-platzhalter, .af-platzhalter tbody, .af-platzhalter tr, .af-platzhalter th, .af-platzhalter td { display: block; }
  .af-platzhalter tr { padding: 10px 0; border-bottom: 1px solid var(--linie); }
  .af-platzhalter th, .af-platzhalter td { padding: 2px 0; border: 0; }
  .af-platzhalter td::before { content: attr(data-label) ": "; font-weight: 600; color: var(--leise); }
}