/* Preisrechner – eigene Datei, damit grundgeruest.css 1:1 der Live-Seite entspricht. */
/* 09 Preisrechner — echte Preise aus dem Angebot vom 16.09.2026.
   Nur neue Regeln; die Platzhalter-Stile (.platzhalter) bleiben unberuehrt, falls sie noch gebraucht werden.
   Links die Eingaben auf Papierfarbe, rechts das Ergebnis als blaue Karte (Summe soll auffallen). */
.rechner{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(20px,3vw,32px);align-items:start}
@media (max-width:860px){.rechner{grid-template-columns:1fr}}
.rechner-eingaben{display:grid;grid-template-columns:1fr 1fr;gap:20px;min-width:0;
  background:var(--papier);border:1.5px solid var(--linie);border-radius:var(--rund);padding:clamp(20px,3vw,30px)}
@media (max-width:620px){.rechner-eingaben{grid-template-columns:1fr;gap:14px}}
.rechner-feld{display:flex;flex-direction:column;gap:6px;min-width:0}
.rechner-feld.ganz{grid-column:1/-1}
fieldset.rechner-feld{border:0;margin:0;padding:0}
.rechner-feld > label,.rechner-feld legend{font-size:15px;font-weight:500}
.rechner-feld legend{margin-bottom:10px;padding:0}
.rechner .freiwillig{font-weight:400;color:var(--grau)}
.rechner-feld input[type=number],.rechner-feld input[type=time],.rechner-feld input[type=text],.rechner-feld select{font:inherit;font-size:17px;padding:12px 14px;
  border:1.5px solid var(--linie);border-radius:12px;background:var(--weiss);color:var(--tinte);width:100%}
.rechner-feld input[type=number]:focus,.rechner-feld input[type=time]:focus,.rechner-feld input[type=text]:focus,.rechner-feld select:focus{outline:none;border-color:var(--blau-hell);box-shadow:0 0 0 3px rgba(0,106,158,.18)}
.rechner-hinweis{font-size:15px;color:var(--grau);text-wrap:balance}
/* Uhrzeit: beide Felder in EINER Zeile mit dem „bis" dazwischen – sonst steht auf dem Handy
   viel Platz leer (Tobias, 18.09.). Die Breite teilen sie sich, „bis" bleibt schmal. */
.rechner-feld .rechner-zeit input[type=time]{width:auto;flex:1 1 0;min-width:0;padding:12px 10px;text-align:center}
.rechner-zeit span{flex:none;color:var(--grau);font-size:15px}
.rechner-zeile-name,.rechner-zeile-detail,.rechner-zeile span,.rechner-fussnote,.rechner-wahl label{text-wrap:balance}
.rechner-inklusive{font-weight:500;color:var(--blau)}
.rechner-inklusive[hidden]{display:none}

/* Erlebnisse: eine Zeile je Haken, Preis rechts. Der Preis steht bewusst NEBEN dem <label>,
   nicht darin: sonst zaehlt er als letztes Wort des Beschriftungstextes und bricht auf schmalen
   Handys als eigene kurze Zeile um (von werkzeuge/zeilen-pruefen.js bei 320 px gemeldet). */
.rechner-liste{display:grid;gap:8px}
.rechner-wahl{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;
  padding-right:14px;border:1.5px solid var(--linie);border-radius:14px;background:var(--weiss)}
.rechner-wahl:has(input:checked){border-color:var(--blau);background:rgba(0,61,105,.06)}
.rechner-wahl label{display:flex;align-items:center;gap:10px;min-width:0;padding:10px 0 10px 14px;font-size:16px;cursor:pointer}
/* Zusatz gehoert unter den Namen (Tobias, 18.09.: keine halben Zeilen): „Theater" oben,
   „externer Show-Act" klein darunter – statt eines zufaelligen Umbruchs mitten im Namen. */
.rechner-zusatz{display:block;font-size:14px;color:var(--grau);line-height:1.3}
.rechner-wahl input{width:auto;accent-color:var(--blau);margin:0;flex:none}
.rechner-preis{font-weight:500;white-space:nowrap;color:var(--blau)}
.rechner-liste-offen .rechner-preis{font-weight:400;color:var(--grau)}
/* Schmale Handys: der Preis kommt unter die Beschriftung, damit lange Namen die ganze Breite haben */
@media (max-width:360px){
  .rechner-wahl{grid-template-columns:minmax(0,1fr);gap:0;padding-right:0}
  .rechner-wahl label{padding-bottom:2px}
  .rechner-wahl .rechner-preis{padding:0 14px 10px;font-size:15px}
}

/* Ergebnis */
.rechner-ergebnis{min-width:0;border-radius:var(--rund);padding:clamp(22px,3vw,30px);
  background:linear-gradient(155deg,var(--blau-tief),var(--blau-verlauf));color:var(--weiss)}
@media (min-width:861px){.rechner-ergebnis{position:sticky;top:92px}}
.rechner-ergebnis h3{font-size:clamp(21px,2.2vw,25px);margin-bottom:16px}
.rechner-zeilen{display:grid}
.rechner-zeile{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 14px;align-items:baseline;
  padding:11px 0;border-bottom:1px solid rgba(255,255,255,.22);font-size:16px;line-height:1.35}
.rechner-zeile span{color:rgba(255,255,255,.86);overflow-wrap:break-word}
/* Beträge in einer Spalte bündig: gleich breite Ziffern, rechts ausgerichtet */
.rechner-zeile b,.rechner-summe b,.rechner-pro-person b{font-variant-numeric:tabular-nums}
.rechner-zeile b{font-weight:500;white-space:nowrap;text-align:right}
.rechner-zeile-name{display:block;color:var(--weiss);font-weight:500}
.rechner-zeile-detail{display:block;margin-top:2px;font-size:14px;color:rgba(255,255,255,.66)}
.rechner-zeile-zwischen .rechner-zeile-name,.rechner-zeile-rabatt .rechner-zeile-name{font-weight:400}
.rechner-zeile-zwischen{color:rgba(255,255,255,.78)}
.rechner-zeile-rabatt b,.rechner-zeile-rabatt span{color:var(--himmel)}
.rechner-zeile-offen span::after{content:" · nicht in der Summe";color:rgba(255,255,255,.6)}
/* Tobias, 25.09.: Pro Person ist die Hauptzahl und steht oben, die Gesamtsumme darunter und klein. */
.rechner-pro-person{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 14px;align-items:baseline;
  margin-top:18px;padding-top:18px;border-top:2px solid rgba(255,255,255,.35);font-size:clamp(19px,2vw,22px);font-weight:500}
.rechner-pro-person b{font-size:clamp(32px,5vw,44px);font-weight:700;line-height:1;letter-spacing:-.02em;white-space:nowrap;text-align:right;color:var(--weiss)}
.rechner-summe{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;align-items:baseline;
  margin-top:8px;font-size:17px;color:rgba(255,255,255,.86)}
.rechner-summe b{font-size:21px;font-weight:500;white-space:nowrap;text-align:right;color:var(--weiss)}
.rechner-fussnote{margin-top:14px;font-size:15px;color:rgba(255,255,255,.78)}
.rechner-fussnote a{color:var(--weiss);text-decoration:underline;text-decoration-color:var(--himmel);text-underline-offset:3px}
/* Der Knopf steht auf Blau und traegt einen langen Satz: er darf umbrechen */
.rechner-knopf{margin-top:22px}
.rechner-knopf .knopf{width:100%;white-space:normal;text-align:center;text-wrap:balance;
  background:var(--weiss);color:var(--blau);padding:14px 22px}
@media (hover:hover){.rechner-knopf .knopf:hover{background:var(--himmel)}}
.rechner-status{margin-top:12px;font-size:15px;color:var(--himmel)}
.rechner-status:empty{display:none}

/* Rechner: Knopf fuer kleine Gruppen und die Zeitspanne (Tobias, 18.09.) */
.rechner-klein-knopf{margin-top:10px;align-self:flex-start;background:none;border:1.5px solid var(--linie);border-radius:var(--pille);
  padding:8px 16px;font:500 15px/1.2 Jost,system-ui,sans-serif;color:var(--blau);cursor:pointer}
.rechner-klein-knopf:hover{border-color:var(--blau)}
.rechner-klein{color:var(--blau)}
.rechner-zeit{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rechner-zeit input{flex:1 1 120px;min-width:120px}
/* Rueckmeldung zum Rabattcode: gruen erkannt, rot unbekannt (Tobias, 18.09.) */
.rechner-code-hinweis:empty{display:none}
.rechner-code-hinweis[data-art=ok]{color:#1F7A4D;font-weight:500}
.rechner-code-hinweis[data-art=fehler]{color:#A6321F}
.rechner-feld input#r-code{text-transform:uppercase;letter-spacing:.04em}

/* Rechner-Umbau (Tobias, 18.09.): Wunschtag oben, Getraenkeliste, leere Ergebniskarte.
   Nur neue Regeln – die bestehenden Rechner-Stile daruber bleiben unveraendert. */

/* Wunschtag und Uhrzeit stehen zusammen und untereinander, nicht nebeneinander */
.rechner-termin{grid-column:1/-1;display:grid;gap:14px}
.rechner-termin input[type=date]{max-width:340px}

/* Getraenke: sieben Gruppen, zugeklappt. Im Kopf steht, wie viele Artikel darin gewaehlt sind. */
.rechner-getraenke{display:grid;gap:8px}
.rechner-gruppe{border:1.5px solid var(--linie);border-radius:14px;background:var(--weiss);overflow:hidden}
.rechner-gruppe summary{display:flex;align-items:center;gap:10px;padding:12px 14px;font-size:16px;font-weight:500;cursor:pointer;list-style:none}
.rechner-gruppe summary::-webkit-details-marker{display:none}
/* Pfeil selbst zeichnen: dreht sich beim Aufklappen, faellt nie auf eine eigene Zeile */
.rechner-gruppe summary::before{content:"";flex:none;width:9px;height:9px;border-right:2px solid var(--blau);border-bottom:2px solid var(--blau);
  transform:rotate(-45deg);transition:transform .15s}
@media (prefers-reduced-motion:reduce){.rechner-gruppe summary::before{transition:none}}
.rechner-gruppe[open] summary::before{transform:rotate(45deg)}
.rechner-gruppe-name{flex:1 1 auto;min-width:0}
.rechner-gruppe-zahl{flex:none;font-weight:500;color:var(--blau);white-space:nowrap}
.rechner-gruppe-zahl:empty{display:none}
.rechner-gruppe[open] summary{border-bottom:1px solid var(--linie)}
.rechner-gruppe-liste{display:grid}
/* Eine Zeile je Artikel: oben der Name, darunter Groesse und Einzelpreis zusammen, rechts das
   Mengenfeld. Groesse und Preis stehen bewusst in EINER Zeile: allein waere „0,5 l" viel kuerzer
   als der Name, und werkzeuge/zeilen-pruefen.js meldet das zu Recht als unausgewogene Zeile. */
.rechner-getraenk{display:grid;grid-template-columns:minmax(0,1fr) 68px;align-items:center;gap:10px;
  padding:8px 14px;border-top:1px solid var(--linie)}
.rechner-getraenk:first-child{border-top:0}
.rechner-getraenk label{display:block;min-width:0;font-size:16px;cursor:pointer}
.rechner-getraenk-name{display:block}
/* Groesse links, Einzelpreis rechts – die Zeile nutzt die ganze Breite der Beschriftung.
   Waere der Preis direkt hinter der Groesse, blieben „0,5 l · 2,50 €" als kurzer Rest unter
   einem langen Namen stehen (von werkzeuge/zeilen-pruefen.js zu Recht gemeldet). */
.rechner-getraenk-detail{display:flex;justify-content:space-between;gap:10px;font-size:14px;color:var(--grau);line-height:1.3}
.rechner-getraenk-preis{font-weight:500;white-space:nowrap;color:var(--blau)}
.rechner-feld .rechner-getraenk input[type=number]{width:100%;padding:8px 6px;font-size:16px;text-align:center}
/* Sehr schmale Handys: das Mengenfeld wird knapper, der Name bekommt die restliche Breite */
@media (max-width:360px){
  .rechner-getraenk{grid-template-columns:minmax(0,1fr) 56px;gap:6px;padding:8px 10px}
  .rechner-getraenk label{font-size:15px}
}

/* Ergebniskarte: beim Laden kein Geld, nur die Einladung (Tobias, 18.09.) */
.rechner-einladung{font-size:17px;color:rgba(255,255,255,.88)}
/* Sagt in einem Satz, welche Eingabe fuer die Summe noch fehlt (Personen, Stunden). */
.rechner-fehlt{margin:10px 0 0;color:rgba(255,255,255,.8)}
.rechner-fehlt[hidden]{display:none}
.rechner-ergebnis:not([data-leer]) .rechner-einladung{display:none}
.rechner-ergebnis[data-leer] .rechner-zeilen,
.rechner-ergebnis[data-leer] .rechner-summe,
.rechner-ergebnis[data-leer] .rechner-pro-person{display:none}
/* Hinweis, wenn der Knopf gedrueckt wird, ohne dass etwas eingetragen ist */
.rechner-status[data-art=fehler]{color:var(--weiss)}
/* „nicht in der Summe" nur dort anhaengen, wo es nicht schon rechts steht. Die bestehende Regel
   .rechner-zeile-offen span::after trifft bei zweizeiligen Posten („Getränke · nach Verbrauch")
   jeden der drei Spans – der Zusatz stand dreimal in derselben Zeile. Zweizeilige Posten tragen
   ihn darum nicht mehr; einzeilige („Theater, externer Show-Act") behalten ihn. */
.rechner-zeile-offen span:has(> .rechner-zeile-name)::after,
.rechner-zeile-offen .rechner-zeile-name::after,
.rechner-zeile-offen .rechner-zeile-detail::after{content:none}

/* Menue-Inhalt unter der Essen-Auswahl (Menuekarte, Tobias 21.09.): klein, Punkt fuer Punkt */
.rechner-menue{margin:2px 0 0;padding:0 0 0 18px;display:grid;gap:2px;font-size:15px;line-height:1.4;color:var(--grau)}
.rechner-menue[hidden]{display:none}
.rechner-menue li{text-wrap:balance}
.rechner-menue .rechner-menue-hinweis{list-style:none;margin-left:-18px;font-weight:500;color:var(--blau)}
/* Personenzahl steht jetzt im Termin-Block unter der Uhrzeit (Tobias, 21.09.): nicht breiter als das Datum */
.rechner-termin input[type=number]{max-width:340px}
/* Personenzahl und Rabatt nebeneinander (Tobias, 21.09.); auf dem Handy untereinander */
.rechner-paar{display:grid;grid-template-columns:1fr 1fr;gap:20px;min-width:0}
@media (max-width:620px){.rechner-paar{grid-template-columns:1fr;gap:14px}}
.rechner-paar input[type=number]{max-width:none}

/* Kuehlschrank statt Mengen (Tobias, 21.09.): Haken vorne, ganze Zeile anklickbar; Preise schon im
   zugeklappten Gruppenkopf, damit die guenstigen Preise sofort ins Auge fallen. */
.rechner-getraenk{grid-template-columns:22px minmax(0,1fr)}
.rechner-feld .rechner-getraenk input[type=checkbox]{width:20px;height:20px;margin:0;accent-color:var(--blau);cursor:pointer}
@media (max-width:360px){.rechner-getraenk{grid-template-columns:22px minmax(0,1fr)}}
.rechner-gruppe-preis{flex:none;font-weight:400;font-size:15px;color:var(--grau);white-space:nowrap}
.rechner-guenstig{font-weight:500;color:var(--blau)}

/* Info-Zeile „Getränke … nach Verbrauch" (Sprachnachricht Tobias, 21.09.): wortgetreu, ohne den
   automatischen Zusatz der offen-Zeilen; ruhiger als die Preiszeilen. */
.rechner-zeile-info span,.rechner-zeile-info b{color:rgba(255,255,255,.82);font-weight:400}
/* Reihenfolge Tobias 21.09.: Essen → Event → Rabatt → Räume (zuletzt) → Getränke-Info.
   Paare (Essen|Personen, Rabatt|Code) laufen ueber beide Spalten; auf dem Handy untereinander. */
.rechner-eingaben > .rechner-reihe{grid-column:1/-1}
.rechner-termin-titel{font-size:15px;font-weight:500}
.rechner-feld.ganz input[type=number]{max-width:340px}