/* Gästeseiten (Startseite, Reservierung, Anfrage, Telefon, Speisekarte, Catering, Gutschein, Rechtliches) und die Gast-Seiten des Servers
 * (/r/…, /w/…, /v/…). Ruhige Typografie, warmes Papier, eine Akzentfarbe aus den Einstellungen (--akzent), Linien statt Kästen.
 * Ohne Fotos vollständig. Hell und dunkel (prefers-color-scheme, zusätzlich data-theme am <html>). Handy zuerst. */

@font-face { font-family: 'Lora'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/lora-normal-400-700.woff2) format('woff2'); }

:root {
  --akzent: #7a3b2e;            /* wird aus den Einstellungen gesetzt (js/gast.js bzw. auf dem Server) */
  --auf-akzent: #ffffff;        /* Schrift auf der Akzentfarbe: weiß oder fast schwarz, je nach Kontrast */
  --akzent-linie: var(--akzent);   /* Linien in Akzentfarbe (Fokus, Unterstreichung, Markierungen); dunkel aufgehellt, siehe unten */
  --papier: #faf7f2;
  --tinte: #231f1a;
  --tinte-2: #5d554b;           /* Nebentext */
  --linie: #e4ddd2;
  --feld: #ffffff;
  --feldrand: #b3a797;
  --warn: #9a3412;
  --serif: 'Lora', Georgia, 'Times New Roman', serif;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --breite: 64rem;
  --rand: clamp(16px, 4vw, 40px);
  color-scheme: light;
}
/* Dunkel: Die Akzentfarbe ist meist dunkel und hätte auf dem dunklen Feld zu wenig Kontrast (#7a3b2e auf #23201c: 1,9:1).
   Linien nutzen deshalb eine aufgehellte Fassung (mit color-mix), ohne color-mix die helle Tinte. Knopfflächen bleiben --akzent. */
:root[data-theme="dark"] {
  --papier: #1b1916; --tinte: #ece6dc; --tinte-2: #b0a698; --linie: #38332c; --feld: #23201c; --feldrand: #61584d; --warn: #f0a58a;
  --akzent-linie: var(--tinte);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papier: #1b1916; --tinte: #ece6dc; --tinte-2: #b0a698; --linie: #38332c; --feld: #23201c; --feldrand: #61584d; --warn: #f0a58a;
    --akzent-linie: var(--tinte);
    color-scheme: dark;
  }
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  :root[data-theme="dark"] { --akzent-linie: color-mix(in srgb, var(--akzent) 55%, #fff); }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { --akzent-linie: color-mix(in srgb, var(--akzent) 55%, #fff); }
  }
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--papier);
  color: var(--tinte);
  font: 400 1.0625rem/1.6 var(--sans);
  overflow-wrap: break-word;
}
[hidden] { display: none !important; }
img { max-width: 100%; height: auto; }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; line-height: 1.2; margin: 0 0 .6em; color: var(--tinte); text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.2rem); letter-spacing: -.01em; }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
small { font-size: .875rem; }
strong, b { font-weight: 600; }

a { color: inherit; text-decoration: underline; text-decoration-color: var(--akzent-linie); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--akzent-linie); outline-offset: 3px; border-radius: 2px; }
::selection { background: color-mix(in srgb, var(--akzent) 22%, transparent); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.leise { color: var(--tinte-2); }

/* ---------- Knöpfe ---------- */
.knopf, .btn, button {
  display: inline-block;
  font: 600 1rem/1.2 var(--sans);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  padding: .8rem 1.4rem;
  border: 1px solid var(--akzent);
  border-radius: 3px;
  background: var(--akzent);
  color: var(--auf-akzent);
  transition: background-color .15s ease, border-color .15s ease;
}
.knopf:hover, .btn:hover, button:hover { background: color-mix(in srgb, var(--akzent) 86%, #000); border-color: color-mix(in srgb, var(--akzent) 86%, #000); text-decoration: none; }
button:disabled, .btn[aria-disabled="true"] { opacity: .6; cursor: default; }
.btn-outline, button.plain, .knopf-leise {
  background: transparent; color: var(--tinte); border-color: var(--feldrand);
}
.btn-outline:hover, button.plain:hover, .knopf-leise:hover { background: transparent; border-color: var(--akzent-linie); }

/* ---------- Seitenrahmen ---------- */
.seite { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }
main.seite { flex: 1; padding-top: clamp(2rem, 5vw, 3.5rem); padding-bottom: clamp(3rem, 7vw, 5rem); }
.schmal { max-width: 44rem; }

.kopf { border-bottom: 1px solid var(--linie); }
.kopf-innen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 28px; padding-top: 18px; padding-bottom: 18px; }
.marke { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--tinte); min-width: 0; }
.marke-logo { display: block; max-height: 52px; width: auto; }
.marke-name { font-family: var(--serif); font-weight: 600; font-size: 1.4rem; line-height: 1.15; }
.kopf-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 24px; }
.kopf-nav a:not(.knopf) { text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; }
.kopf-nav a:not(.knopf):hover { border-bottom-color: var(--linie); }
.kopf-nav a[aria-current="page"]:not(.knopf) { border-bottom-color: var(--akzent-linie); }
.kopf-nav .knopf { padding: .6rem 1.05rem; }
@media (max-width: 480px) {
  .kopf-innen { padding-top: 14px; padding-bottom: 14px; }
  .kopf-nav { width: 100%; justify-content: space-between; gap: 6px 18px; }
  .kopf-nav .knopf { margin-left: auto; }
}

.fuss { border-top: 1px solid var(--linie); color: var(--tinte-2); font-size: .94rem; }
.fuss-innen { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 14px 40px; padding-top: 28px; padding-bottom: 36px; }
.fuss p { margin: 0; }
.fuss nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.fuss a { color: var(--tinte-2); text-decoration-color: var(--linie); }
.fuss a:hover { color: var(--tinte); text-decoration-color: var(--akzent-linie); }

/* ---------- Seitenkopf der Unterseiten ---------- */
.seitenkopf { margin-bottom: 2.2rem; max-width: 44rem; }
.seitenkopf h1 { margin-bottom: .4em; }
.seitenkopf p { color: var(--tinte-2); font-size: 1.08rem; }
/* Sprachwahl klein oben rechts über der Überschrift */
.seitenkopf-zeile { display: flex; flex-direction: column; }
.seitenkopf-zeile .lang-switch { order: -1; align-self: flex-end; margin: 0 0 .4rem; }

/* ---------- Startseite ---------- */
.einstieg { max-width: 44rem; padding-bottom: clamp(2.2rem, 6vw, 3.5rem); }
.einstieg h1 { font-size: clamp(2.5rem, 1.6rem + 4.4vw, 4.4rem); margin-bottom: .35em; }
.einleitung { font-size: 1.15rem; line-height: 1.65; color: var(--tinte); max-width: 38em; }
.einleitung > :last-child { margin-bottom: 0; }
.einstieg-aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin: 1.8rem 0 0; }
.einstieg-aktion .leise a { color: var(--tinte); }

.abschnitt { border-top: 1px solid var(--linie); padding: clamp(1.8rem, 5vw, 2.8rem) 0; }
.abschnitt:last-child { padding-bottom: 0; }
.spalten { display: grid; gap: 2.4rem 4rem; }
@media (min-width: 760px) { .spalten { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.spalten h2 { margin-bottom: .8em; }

/* Öffnungszeiten als Tabelle, der heutige Tag hervorgehoben */
.zeiten table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.zeiten th, .zeiten td { text-align: left; vertical-align: top; padding: .55rem 0; border-bottom: 1px solid var(--linie); font-weight: 400; }
.zeiten tr:first-child th, .zeiten tr:first-child td { border-top: 1px solid var(--linie); }
.zeiten th { padding-right: 1.2rem; white-space: nowrap; }
.zeiten td { text-align: right; }
.zeiten .dienste { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .15rem 1.4rem; }
.zeiten .dienst span { display: block; }
.zeiten .zu { color: var(--tinte-2); }
.zeiten .kueche { font-size: .85rem; color: var(--tinte-2); }
.zeiten tr[aria-current="date"] th, .zeiten tr[aria-current="date"] td { font-weight: 600; }
.zeiten tr[aria-current="date"] th { box-shadow: inset 3px 0 0 var(--akzent-linie); padding-left: .7rem; }
.zeiten .heute { margin-left: .25rem; font-size: .8rem; font-weight: 400; color: var(--tinte-2); }
.zeiten-hinweis { margin-top: .9rem; font-size: .94rem; color: var(--tinte-2); }
.zeiten-hinweis > :last-child { margin-bottom: 0; }

.kontakt address { font-style: normal; margin: 0 0 1rem; line-height: 1.65; }
.kontakt p { margin: 0 0 .35rem; }
.kontakt .anfahrt { margin: 0 0 1.4rem; }
.kontakt dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .3rem 1rem; margin: .7rem 0 0; }
.kontakt dt { color: var(--tinte-2); }
.kontakt dd { margin: 0; }


/* Hinweise oben auf der Seite (Betriebsferien, Aktuelles) */
.hinweis { border-top: 2px solid var(--akzent-linie); border-bottom: 1px solid var(--linie); padding: 1.1rem 0 1.2rem; margin: 0 0 2.2rem; max-width: 44rem; }
.hinweis .holiday-badge { display: block; font-family: var(--serif); font-size: 1.2rem; font-weight: 600; margin-bottom: .4rem; }
.hinweis .holiday-dates { font-family: var(--sans); font-size: 1rem; font-weight: 600; margin: 0 0 .35rem; }
.hinweis .holiday-dates em { font-style: normal; font-weight: 400; }
.hinweis .holiday-text, .hinweis .holiday-note { margin: 0 0 .5rem; }
.hinweis .holiday-note { color: var(--tinte-2); font-size: .95rem; }
.hinweis .holiday-reopen { margin: .3rem 0; }
.hinweis .notice-image { display: block; max-width: min(100%, 520px); height: auto; margin: .6rem 0; }
.hinweis .notice-entry + .notice-entry { border-top: 1px solid var(--linie); margin-top: .9rem; padding-top: .9rem; }
.hinweis > :last-child, .hinweis .notice-single > :last-child { margin-bottom: 0; }

/* ---------- Unterseiten mit Formular: Formular links, Öffnungszeiten und Kontakt rechts ---------- */
.mit-seite { display: grid; gap: 3rem 4.5rem; align-items: start; }
@media (min-width: 900px) { .mit-seite { grid-template-columns: minmax(0, 1fr) minmax(0, 19rem); } }
.mit-seite > aside { font-size: .97rem; }
.mit-seite > aside h2 { font-size: 1.2rem; }
.mit-seite > aside section + section { margin-top: 2.2rem; }
@media (max-width: 899px) { .mit-seite > aside { border-top: 1px solid var(--linie); padding-top: 2rem; } }

/* ---------- Formulare ---------- */
.nice-form { max-width: 40rem; }
.form-intro { color: var(--tinte-2); }
.form-row { display: grid; gap: 0 18px; }
@media (min-width: 560px) { .form-row, .form-row.form-row-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.form-group { margin: 0 0 1.1rem; min-width: 0; }
#areaStandalone:empty { display: none; }
label { display: block; font-weight: 500; }
.form-group > label, .form-group > .feld-titel { display: block; margin-bottom: .35rem; font-size: .95rem; font-weight: 500; }
input, select, textarea {
  display: block; width: 100%; max-width: 100%; margin: 0;
  font: inherit; font-size: 1rem; color: var(--tinte);
  background: var(--feld);
  border: 1px solid var(--feldrand);
  border-radius: 3px;
  padding: .7rem .8rem;
  min-height: 3rem;
}
textarea { resize: vertical; min-height: 6rem; line-height: 1.5; }
select { padding-right: .5rem; }
select:disabled, input:disabled { opacity: .65; }
input::placeholder, textarea::placeholder { color: var(--tinte-2); opacity: .75; }
input, select, textarea { font-weight: 400; }   /* Felder innerhalb eines <label> (Gast-Seiten des Servers) erben sonst dessen Gewicht */
input:focus, select:focus, textarea:focus { outline: 2px solid transparent; border-color: var(--akzent-linie); box-shadow: 0 0 0 1px var(--akzent-linie); }
input[type="checkbox"], input[type="radio"] { width: 1.15rem; height: 1.15rem; min-height: 0; padding: 0; margin: .2rem 0 0; flex: none; accent-color: var(--akzent); }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 2px solid var(--akzent-linie); outline-offset: 2px; box-shadow: none; }
.field-error, input.field-error, select.field-error, textarea.field-error { border-color: var(--warn); box-shadow: 0 0 0 1px var(--warn); }
.field-msg { margin: .35rem 0 0; color: var(--warn); font-size: .92rem; font-weight: 600; }

.check-row { display: flex; gap: .7rem; align-items: flex-start; font-weight: 400; margin: 0 0 .9rem; line-height: 1.5; }
.check-row span { min-width: 0; }
.form-hint { font-size: .95rem; color: var(--tinte-2); margin: .2rem 0 1rem; }
.form-hint:empty { display: none; }
.form-hint.is-warn, .is-warn { color: var(--warn); }
.form-hint-box { margin: 0 0 1.3rem; padding: .2rem 0 .2rem 1rem; border-left: 2px solid var(--linie); }
.form-hint-box p { margin: 0 0 .6rem; }
.form-hint-box > p:first-child { color: var(--tinte); }
.alt-day, #waitlistAltBtns button { display: inline-block; margin: 0 .5rem .5rem 0; padding: .45rem .8rem; font-weight: 500; font-size: .95rem; background: transparent; color: var(--tinte); border: 1px solid var(--feldrand); }
.alt-day:hover, #waitlistAltBtns button:hover { background: transparent; border-color: var(--akzent-linie); }
.waitlist-box .check-row { margin: .6rem 0; }

.deposit-note { margin: 0 0 1.3rem; padding: .2rem 0 .2rem 1rem; border-left: 2px solid var(--akzent-linie); }
.visit-info { margin: 0 0 1.3rem; padding: .2rem 0 .2rem 1rem; border-left: 2px solid var(--linie); }
.visit-info p { margin: 0 0 .5rem; }
.visit-info p:last-child { margin-bottom: 0; }
.visit-info .visit-info-title { font-weight: 600; margin-bottom: .1rem; }
.visit-info .visit-info-sub { color: var(--tinte-2); font-size: .92rem; }
.visit-dur { font-weight: 600; }

.form-divider { margin: 2rem 0 1.1rem; padding-top: 1.3rem; border-top: 1px solid var(--linie); font-family: var(--serif); font-size: 1.2rem; font-weight: 500; }

.addons-box { margin: .4rem 0 1.4rem; padding: 1rem 0 0; border: 0; border-top: 1px solid var(--linie); min-width: 0; }
.addons-box legend { padding: 0 .6rem 0 0; font-family: var(--serif); font-size: 1.2rem; font-weight: 500; }
.addons-opt { font-family: var(--sans); font-size: .9rem; color: var(--tinte-2); }
.addon-row { display: grid; grid-template-columns: minmax(0, 1fr) 5.5rem; gap: 1rem; align-items: center; padding: .6rem 0; border-bottom: 1px solid var(--linie); }
.addon-text label { font-weight: 500; }
.addon-text small { display: block; color: var(--tinte-2); }
.addon-row input { min-height: 2.6rem; padding: .45rem .6rem; }

.hp-field { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-error { color: var(--warn); font-weight: 600; margin: .5rem 0 1rem; }
.btn-submit { margin-top: .6rem; min-width: 14rem; }
@media (max-width: 559px) { .btn-submit { width: 100%; } }

.lang-switch { display: flex; gap: 2px; font-size: .92rem; }
.lang-switch button { padding: .3rem .55rem; font-weight: 500; font-size: .92rem; background: transparent; color: var(--tinte-2); border: 0; border-bottom: 2px solid transparent; border-radius: 0; }
.lang-switch button:hover { background: transparent; color: var(--tinte); }
.lang-switch button[aria-pressed="true"] { color: var(--tinte); border-bottom-color: var(--akzent-linie); }

/* Bestätigung nach dem Absenden */
.form-success { max-width: 40rem; border-top: 2px solid var(--akzent-linie); padding-top: 1.4rem; }
.form-success h2, .form-success h3 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.9rem); margin-bottom: .6rem; }
.success-icon { display: none; }
#successText { white-space: pre-line; }
.form-success .btn { margin: .4rem 0 .6rem; }
.deposit-amount { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1rem; margin: 1.2rem 0 1.4rem; padding: .9rem 0; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.deposit-amount-label { font-weight: 600; }
.deposit-amount-value { font-family: var(--serif); font-size: 2.1rem; font-weight: 600; line-height: 1.1; }
.deposit-amount-note { flex-basis: 100%; color: var(--tinte-2); font-size: .94rem; }

/* Kalender (flatpickr): Auswahl in der Akzentfarbe, Papierfarben, dunkel lesbar */
.flatpickr-calendar { font-family: var(--sans); background: var(--feld); border: 1px solid var(--feldrand); border-radius: 3px; box-shadow: 0 6px 20px rgb(0 0 0 / 12%); }
.flatpickr-calendar.arrowTop::before, .flatpickr-calendar.arrowTop::after, .flatpickr-calendar.arrowBottom::before, .flatpickr-calendar.arrowBottom::after { display: none; }
.flatpickr-months .flatpickr-month, .flatpickr-current-month .flatpickr-monthDropdown-months, .flatpickr-current-month input.cur-year, span.flatpickr-weekday { color: var(--tinte); fill: var(--tinte); background: transparent; }
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { color: var(--tinte); fill: var(--tinte); }
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--akzent-linie); }
.flatpickr-day { color: var(--tinte); border-radius: 3px; }
.flatpickr-day:hover, .flatpickr-day:focus { background: color-mix(in srgb, var(--akzent) 12%, transparent); border-color: transparent; }
.flatpickr-day.today { border-color: var(--feldrand); }
.flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.selected:focus { background: var(--akzent); border-color: var(--akzent); color: var(--auf-akzent); }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: color-mix(in srgb, var(--tinte) 30%, transparent); background: transparent; }
.flatpickr-calendar .flatpickr-monthDropdown-months option { background: var(--feld); color: var(--tinte); }

/* ---------- Telefon-Seite ---------- */
.phone-text { max-width: 38rem; font-size: 1.08rem; }
.phone-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.6rem 0 0; }
.btn-phone { font-size: 1.05rem; padding: .9rem 1.5rem; }

/* ---------- Speisekarte ---------- */
.karte-teil + .karte-teil { margin-top: 3rem; padding-top: 2.4rem; border-top: 1px solid var(--linie); }
.karte-teil > h2, .karte-teil > h1 { margin-bottom: .9em; }
.menu-text-view { max-width: 44rem; }
.menu-text-category { margin: 0 0 2.2rem; }
.menu-text-category > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: .5rem; border-bottom: 1px solid var(--tinte); }
.menu-text-category > summary::-webkit-details-marker { display: none; }
.menu-text-category > summary h3 { margin: 0; font-size: 1.3rem; }
.menu-text-chevron { width: .55rem; height: .55rem; border-right: 1.5px solid var(--tinte-2); border-bottom: 1.5px solid var(--tinte-2); transform: rotate(45deg); flex: none; margin-right: .2rem; position: relative; top: -.2rem; }
.menu-text-category:not([open]) .menu-text-chevron { transform: rotate(-45deg); top: 0; }
.dish-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1.2rem; padding: .75rem 0; border-bottom: 1px solid var(--linie); }
.dish-info { min-width: 0; }
.dish-name { font-weight: 600; }
.dish-desc { margin: .15rem 0 0; color: var(--tinte-2); font-size: .95rem; }
.dish-price { white-space: nowrap; font-variant-numeric: tabular-nums; }
.menu-text-block { display: grid; gap: 1.2rem; margin-bottom: 2.2rem; }
.menu-text-block .menu-text-category { margin-bottom: 0; }
.menu-text-image { display: block; width: 100%; max-height: 18rem; object-fit: cover; }
@media (min-width: 760px) { .menu-text-block { grid-template-columns: 14rem minmax(0, 1fr); align-items: start; } }
.pdf-scroll-viewer { display: grid; gap: 1.2rem; max-width: 52rem; }
.pdf-scroll-viewer img { display: block; width: 100%; height: auto; border: 1px solid var(--linie); background: #fff; }
.pdf-scroll-viewer:empty { display: none; }
.dish-note { margin-top: 1.6rem; color: var(--tinte-2); font-size: .92rem; }
.karte-leer { color: var(--tinte-2); max-width: 38rem; }
.karte-einleitung { max-width: 38rem; font-size: 1.08rem; color: var(--tinte-2); margin-bottom: 2rem; }
.karte-pdf { margin-top: 1.4rem; }

/* ---------- Gutschein ---------- */
.form-wrap { display: grid; gap: 2.5rem 4rem; align-items: start; }
@media (min-width: 900px) { .form-wrap.has-live { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); } }
.voucher-live { position: sticky; top: 1.5rem; }
@media (max-width: 899px) { .voucher-live { position: static; order: -1; } }
.vl-stage { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--linie); }
.vl-stage img { display: block; width: 100%; height: auto; user-select: none; }
.vl-field { position: absolute; pointer-events: none; }
.vl-multi { overflow-wrap: anywhere; clip-path: inset(-1em 0 0 0); }
.vl-field.pop { animation: vl-pop .35s ease-out; }
@keyframes vl-pop { from { opacity: 0; } to { opacity: 1; } }
.vl-hint { margin: .7rem 0 0; font-size: .88rem; color: var(--tinte-2); }
.presets { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .7rem; }
.preset { padding: .55rem 1rem; font-weight: 500; background: transparent; color: var(--tinte); border: 1px solid var(--feldrand); font-variant-numeric: tabular-nums; }
.preset:hover { background: transparent; border-color: var(--akzent-linie); }
.preset.active, .preset.active:hover { background: var(--akzent); border-color: var(--akzent); color: var(--auf-akzent); }
.methods .check-row { margin-bottom: .6rem; }
#voucherStatus:empty { display: none; }
#doneText p { margin: 0 0 .4rem; }

/* Dankesseite nach der Zahlung (gutschein.html?paid=1) */
.ty { max-width: 40rem; border-top: 2px solid var(--akzent-linie); padding-top: 1.4rem; }
.ty.ty-warn { border-top-color: var(--warn); }
.ty-title { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.1rem); margin-bottom: .6rem; }
.ty-lead { font-size: 1.08rem; }
.ty-ref { color: var(--tinte-2); }
.ty-ref b { color: var(--tinte); font-variant-numeric: tabular-nums; letter-spacing: .03em; }
.ty-steps { list-style: none; margin: 1.6rem 0; padding: 0; border-top: 1px solid var(--linie); }
.ty-steps li { padding: .8rem 0; border-bottom: 1px solid var(--linie); }
.ty-steps b { display: block; font-weight: 600; }
.ty-steps span { color: var(--tinte-2); }
.ty-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.4rem; }

/* ---------- Text-Seiten (Impressum, Datenschutz, Gutscheinbedingungen) ---------- */
.text-seite { max-width: 44rem; }
.text-seite h2 { font-size: 1.25rem; margin-top: 2.2rem; }
.text-seite h1 + h2 { margin-top: 1rem; }
.text-seite ol, .text-seite ul { padding-left: 1.3rem; margin: 0 0 1em; }
.text-seite li { margin-bottom: .35em; }
.vorlage-hinweis { font-size: .94rem; color: var(--tinte-2); border-left: 2px solid var(--linie); padding-left: 1rem; }

/* ---------- Formatierte Texte aus der Verwaltung (js/rich-text.js) ---------- */
.rich-text > :first-child { margin-top: 0; }
.rich-text > :last-child { margin-bottom: 0; }
.rich-text p, .rich-text ul, .rich-text ol, .rich-text blockquote { margin: 0 0 .8em; }
.rich-text ul, .rich-text ol { padding-left: 1.3rem; }
.rich-text blockquote { padding-left: 1rem; border-left: 2px solid var(--linie); color: var(--tinte-2); }
.rich-text h2, .rich-text h3, .rich-text h4 { margin: 1em 0 .4em; }
.rich-text hr { border: 0; border-top: 1px solid var(--linie); margin: 1.2em 0; }

/* ---------- Gast-Seiten des Servers: /r/… und /w/… (api/lib/public.php → guest_page) ---------- */
/* Kopf- und Fußlinie über die ganze Breite, Inhalt bündig mit der 40rem-Spalte */
.g-head, .g-foot { width: 100%; padding-left: max(var(--rand), calc(50% - 20rem + var(--rand))); padding-right: var(--rand); }
.g-head { border-bottom: 1px solid var(--linie); padding-top: 18px; padding-bottom: 18px; }
.g-head > a { display: inline-flex; align-items: center; text-decoration: none; color: var(--tinte); }
.g-main { width: 100%; max-width: 40rem; margin: 0 auto; padding-left: var(--rand); padding-right: var(--rand); }
.brand-logo { display: block; max-height: 52px; width: auto; }
.brand-name { font-family: var(--serif); font-weight: 600; font-size: 1.4rem; line-height: 1.15; }
main.g-main { flex: 1; padding-top: clamp(2rem, 6vw, 3.2rem); padding-bottom: 3rem; }
.g-card h1 { font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.4rem); }
.g-card p { color: var(--tinte); }
.g-card form { margin: 1.2rem 0 0; }
.g-card form label { margin: 0 0 1rem; font-size: .95rem; }
.g-card form label input, .g-card form label select { margin-top: .35rem; }
.g-card form button { margin-top: .4rem; }
.g-amount { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1rem; margin: 1.2rem 0; padding: .9rem 0; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.g-amount span { font-weight: 600; }
.g-amount strong { font-family: var(--serif); font-size: 2.1rem; font-weight: 600; line-height: 1.1; }
.g-foot { display: flex; flex-wrap: wrap; gap: 6px 24px; border-top: 1px solid var(--linie); padding-top: 22px; padding-bottom: 30px; font-size: .94rem; color: var(--tinte-2); }
.g-foot a { color: var(--tinte-2); }
@media (max-width: 480px) { .g-card form button { width: 100%; } }
/* Live-Demo, Bezahlseite (demo/zahlung.php): „Zahlung simulieren“ und „Abbrechen“ auf einer Linie, auf dem Handy beide in voller Breite untereinander */
.zahl-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.g-card form .zahl-knoepfe button { margin-top: 0; }
@media (max-width: 480px) { .zahl-knoepfe > * { width: 100%; } }

/* ---------- Gutschein zum Ausdrucken: /v/CODE (api/lib/vouchers.php → handle_voucher_page) ---------- */
.gutschein-seite main { width: 100%; max-width: 32rem; margin: 0 auto; padding: clamp(1.5rem, 6vw, 3rem) var(--rand); text-align: center; flex: 1; }
.gutschein-seite .brand { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; margin: 1rem 0 .2rem; }
.gutschein-seite h1 { font-size: clamp(1.9rem, 1.5rem + 2vw, 2.6rem); margin: 0 0 .8rem; }
.gutschein-seite .amount { font-family: var(--serif); font-size: 2.8rem; font-weight: 600; line-height: 1.1; margin: .2rem 0 .6rem; }
.gutschein-seite .codel { margin: 1.4rem 0 .2rem; color: var(--tinte-2); font-size: .9rem; }
.gutschein-seite .code { font: 600 1.45rem/1.3 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .08em; margin: 0 0 1.2rem; padding: .7rem .5rem; border-top: 1px solid var(--akzent-linie); border-bottom: 1px solid var(--akzent-linie); overflow-wrap: anywhere; }
.gutschein-seite img.card { display: block; max-width: 100%; height: auto; margin: 0 auto; border: 1px solid var(--linie); }
.gutschein-seite .muted { color: var(--tinte-2); font-size: .92rem; }
.gutschein-seite .flag { border-top: 2px solid var(--warn); border-bottom: 1px solid var(--linie); padding: .6rem 0; color: var(--warn); }
.gutschein-seite blockquote { margin: 1.2rem 0; padding: 0 0 0 1rem; border-left: 2px solid var(--linie); font-family: var(--serif); font-style: normal; text-align: left; }
.gutschein-seite button { margin-top: 1rem; }

@media print {
  :root:root:root { --papier: #fff; --tinte: #111; --tinte-2: #444; --linie: #bbb; --feld: #fff; color-scheme: light; }
  body { background: #fff; color: #111; }
  .noprint, .kopf, .fuss, .g-foot { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}