/* ============================================================
   TJORVEN BISTRO — Broschüren-Ansichten (Catering, Kindergeburtstag)
   und die zugehörigen Preisrechner

   Nur für catering-broschuere.html und kindergeburtstag-broschuere.html.
   Alle Regeln hängen an .page-broschuere bzw. an eigenen Klassen,
   damit style.css und alle anderen Seiten unberührt bleiben.
   ============================================================ */

.page-broschuere {
  --akzent:         #186118;   /* Markengrün laut Branding */
  --akzent-hover:   #124a12;
  --akzent-hell:    #f1f7f2;
  --akzent-ring:    rgba(24, 97, 24, .2);
  --tj-gold:        #e9ba5f;
  --viewer-bg:      #2a2724;   /* ruhiger, warmer Hintergrund hinter den Seiten */
  --viewer-text:    #e9e2d6;
  --seite-max:      1180px;
  --cta-h:          72px;      /* Höhe der mobilen Leiste ohne Safe-Area */

  /* Es gibt hier keine fixierte Kopfzeile: Sprungziele brauchen keinen Versatz */
  --nav-h: 0px;

  background: var(--viewer-bg);
  color: var(--viewer-text);
}
/* Kindergeburtstag: Farbe der Kindergeburtstag-Broschüre */
.page-broschuere.thema-kinder {
  --akzent:       #b02f3d;
  --akzent-hover: #8e2531;
  --akzent-hell:  #fbf0f1;
  --akzent-ring:  rgba(176, 47, 61, .2);
}

/* Nur für Screenreader sichtbar */
.page-broschuere .sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Tastatur: direkt zum Rechner, ohne durch alle Seiten zu tabben */
.page-broschuere .skip-link {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 1000;
  padding: 10px 16px;
  border-radius: 999px;
  background: #fff;
  color: var(--akzent);
  font-weight: 600;
  font-size: 15px;
  transition: top .2s;
}
.page-broschuere .skip-link:focus { top: 12px; }

/* ---------- Broschüre ---------- */

.broschuere {
  /* Platz für die mobile Leiste, damit die letzte Seite nie verdeckt ist */
  padding-bottom: calc(var(--cta-h) + env(safe-area-inset-bottom, 0px) + 12px);
}

.broschuere__seite {
  width: 100%;
  max-width: var(--seite-max);
  margin: 0 auto 6px;
}
.broschuere__seite img {
  display: block;
  width: 100%;
  height: auto;              /* Seitenverhältnis kommt aus width/height */
  background: #d3b182;       /* Sandton der Broschüre, solange ein Bild noch lädt */
}
.thema-kinder .broschuere__seite img { background: #b02f3d; }

/* Smartphone hochkant: breite Seiten als größere Teilansichten.
   Die Teile sind reine Ausschnitte der Originalseite – nichts neu gestaltet. */
.seite__teile { display: none; }
@media (max-width: 599px) {
  .broschuere__seite--geteilt .seite__voll { display: none; }
  .broschuere__seite--geteilt .seite__teile { display: grid; gap: 3px; }
  .broschuere__seite { margin-bottom: 14px; }
}

.broschuere__tipp {
  display: none;
  margin: 0;
  padding: 10px 16px;
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
  color: #cfc6b8;
}
@media (max-width: 599px) {
  .broschuere__tipp { display: block; }
}

.broschuere__ende {
  max-width: var(--seite-max);
  margin: 18px auto 0;
  padding: 0 16px;
  text-align: center;
  font-size: 13px;
  line-height: 2;
  color: #b9b0a3;
}
.broschuere__ende a {
  color: var(--viewer-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 6px 2px;          /* größere Tippfläche, ohne die Zeile aufzublähen */
}
.broschuere__ende span { margin: 0 6px; }

@media (min-width: 600px) {
  .broschuere { padding-top: 16px; padding-left: 16px; padding-right: 16px; }
}
@media (min-width: 768px) {
  .broschuere { padding-top: 24px; }
  .broschuere__seite {
    margin-bottom: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35), 0 2px 6px rgba(0, 0, 0, .25);
  }
}
@media (min-width: 1260px) {
  .broschuere { padding-left: 0; padding-right: 0; }
}

/* ---------- Aufruf zum Rechner ---------- */

.cta-leiste {
  position: fixed;
  z-index: 400;              /* unter dem Cookie-Hinweis (500) */
  left: 0; right: 0; bottom: 0;
  display: flex;
  gap: 10px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(33, 31, 28, .94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255, 255, 255, .08);
  transition: opacity .3s ease, transform .3s ease;
}

.cta-leiste__haupt,
.cta-leiste__pdf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  border-radius: 999px;
  font-family: var(--f-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .01em;
  text-decoration: none;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.cta-leiste__haupt {
  flex: 1;
  min-width: 0;
  padding: 0 18px;
  border: 0;
  background: var(--akzent);
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
}
.cta-leiste__haupt span { white-space: normal; text-align: center; }
.cta-leiste__haupt:hover { background: var(--akzent-hover); }
.cta-leiste__pdf {
  flex: none;
  padding: 0 16px;
  border: 1.5px solid rgba(255, 255, 255, .28);
  background: transparent;
  color: #fff;
}
.cta-leiste__pdf:hover { border-color: #fff; }
.cta-leiste__haupt:focus-visible,
.cta-leiste__pdf:focus-visible { outline: 3px solid var(--tj-gold); outline-offset: 3px; }

/* Solange der Datenschutz-Hinweis offen ist, weicht der Aufruf aus —
   genau wie der WhatsApp-Button auf den übrigen Seiten. */
body.consent-open .cta-leiste {
  opacity: 0;
  pointer-events: none;
  transform: translateY(16px);
}

@media (min-width: 768px) {
  .page-broschuere { --cta-h: 88px; }   /* 24px Abstand + 52px Button + 12px Luft */
  .cta-leiste {
    left: auto;
    right: 24px;
    bottom: 24px;
    padding: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 0;
  }
  .cta-leiste__haupt { flex: none; padding: 0 26px; box-shadow: 0 10px 28px rgba(0, 0, 0, .35); }
  .cta-leiste__haupt:hover { transform: translateY(-2px); }
  .cta-leiste__pdf { background: rgba(33, 31, 28, .85); box-shadow: 0 10px 28px rgba(0, 0, 0, .3); }
}

.rechner-noscript {
  position: fixed;
  left: 12px; right: 12px; bottom: 12px;
  z-index: 400;
  padding: 14px 16px;
  border-radius: 14px;
  background: #fff;
  color: #1a1816;
  font-size: 15px;
}
.rechner-noscript a { color: var(--akzent); text-decoration: underline; }

/* ============================================================
   PREISRECHNER
   Der <dialog> füllt den Bildschirm. Sichtbar ist .rechner__rahmen:
   auf dem Smartphone bildschirmfüllend, ab 900 px ein Seitenpanel
   rechts, neben dem die Broschüre sichtbar bleibt.
   Grundsatz: lieber ein Schritt mehr als viel Scrollen im Schritt.
   ============================================================ */

.rechner {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #1a1816;
  overflow: hidden;
}
.rechner::backdrop { background: rgba(18, 16, 14, .6); }

html.rechner-offen,
html.rechner-offen body { overflow: hidden; }

.rechner__rahmen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #fdfaf7;
  overflow: hidden;
  animation: rechner-hoch .3s cubic-bezier(.22, 1, .36, 1);
}
@keyframes rechner-hoch { from { transform: translateY(32px); opacity: .4; } to { transform: none; opacity: 1; } }

@media (min-width: 900px) {
  .rechner__rahmen {
    left: auto;
    width: min(580px, 48vw);
    box-shadow: -16px 0 48px rgba(0, 0, 0, .3);
    animation-name: rechner-seitlich;
  }
  @keyframes rechner-seitlich { from { transform: translateX(48px); opacity: .4; } to { transform: none; opacity: 1; } }
}
@media (prefers-reduced-motion: reduce) {
  .rechner__rahmen { animation: none; }
}

/* Kopf */
.rechner__kopf {
  flex: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 8px;
}
.rechner__eyebrow {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #7d5a1c;
}
.rechner__titel {
  font-family: var(--f-display);
  font-size: 19px;
  line-height: 1.2;
  font-weight: 600;
  color: var(--akzent);
}
.rechner__zu {
  flex: none;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1.5px solid #e0d8cd;
  border-radius: 50%;
  background: #fff;
  color: #1a1816;
}
.rechner__zu:hover { border-color: var(--akzent); color: var(--akzent); }

/* Fortschritt: „Schritt 3 von 11“ und ein Balken */
.rechner__fortschritt {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px 10px;
  border-bottom: 1px solid #ece5da;
  font-size: 12.5px;
  font-weight: 700;
  color: #4a4643;
  white-space: nowrap;
}
.rechner__balken {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: #ece5da;
  overflow: hidden;
}
.rechner__balken span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--akzent);
  transition: width .25s ease;
}

@media (min-width: 900px) {
  .rechner__kopf { padding: 18px 20px 10px; }
  .rechner__titel { font-size: 23px; }
  .rechner__fortschritt { padding: 0 20px 12px; }
}

/* Formular-Gerüst */
.rechner__form {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.rechner__inhalt {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 14px 16px 20px;
}
@media (min-width: 900px) { .rechner__inhalt { padding: 18px 20px 24px; } }
.rechner__inhalt:focus { outline: none; }
.rechner__laden { color: #726859; font-size: 15px; }

/* Wenn ein Schritt doch einmal länger ist: deutlicher Hinweis statt versteckter Optionen */
.rechner__mehr {
  position: absolute;
  left: 50%;
  bottom: calc(var(--fuss-h, 150px) + 10px);
  transform: translateX(-50%);
  z-index: 2;
  padding: 7px 14px;
  border: 0;
  border-radius: 999px;
  background: #2a2724;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
}
.rechner__mehr[hidden] { display: none; }

.rechner__schritt[hidden] { display: none; }
.rechner__schritt-titel {
  font-family: var(--f-display);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 600;
  color: #1a1816;
  margin-bottom: 6px;
}
.rechner__schritt-titel:focus { outline: none; }
.rechner__intro {
  font-size: 14px;
  line-height: 1.55;
  color: #4a4643;
  margin-bottom: 14px;
}

.rechner fieldset { border: 0; min-width: 0; }
.rechner legend {
  font-family: var(--f-display);
  font-size: 16px;
  font-weight: 700;
  color: #1a1816;
  padding: 0;
  margin-bottom: 8px;
}
.rechner__block { margin-top: 18px; }
.rechner__block:first-child { margin-top: 0; }
.rechner__abstand { margin-top: 10px; }

/* Felder */
.rechner__feld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.rechner__feld label,
.rechner__label {
  font-size: 13.5px;
  font-weight: 700;
  color: #2a2724;
}
.rechner__feld .opt { font-weight: 400; color: #726859; }
.rechner .pflicht { color: #7d1f1f; margin-left: 2px; }
.rechner__feld input,
.rechner__feld select,
.rechner__feld textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 1.5px solid #cec4b5;
  border-radius: 12px;
  background: #fff;
  color: #1a1816;
  font-family: var(--f-body);
  font-size: 16px;           /* 16 px verhindert das automatische Zoomen in iOS */
  line-height: 1.4;
  -webkit-appearance: none;
  appearance: none;
}
.rechner__feld input[type="date"],
.rechner__feld input[type="time"] { min-width: 0; }
.rechner__feld select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%234a4643' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}
.rechner__feld textarea { min-height: 76px; resize: vertical; }
.rechner__feld input:focus,
.rechner__feld select:focus,
.rechner__feld textarea:focus {
  outline: none;
  border-color: var(--akzent);
  box-shadow: 0 0 0 3px var(--akzent-ring);
}
.rechner__feld-hinweis { font-size: 12.5px; line-height: 1.5; color: #726859; }
.rechner__feld--fehler input,
.rechner__feld--fehler select,
.rechner__feld--fehler textarea { border-color: #a83232; }
.rechner__fehler { margin-top: 4px; font-size: 13px; font-weight: 700; color: #7d1f1f; }
.rechner__fehler::before { content: "⚠ "; }
.rechner__reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rechner__reihe > .rechner__feld { min-width: 0; }
/* Unterschiedlich lange Beschriftungen (z. B. „Voraussichtliche Ankunftszeit“): Felder unten bündig */
.rechner__reihe--unten { align-items: end; }
/* PLZ schmal, Ort breit – nebeneinander auch auf kleinen Smartphones */
.rechner__reihe--plz { grid-template-columns: minmax(7.5em, 1fr) minmax(0, 2fr); align-items: start; }

/* Zusammenfassung: Kontaktdaten kompakt, lange Namen und Straßen umbrechen */
.rechner__angaben { margin-top: 16px; font-size: 14px; line-height: 1.5; color: #2a2724; overflow-wrap: anywhere; }
.rechner__angaben p { margin: 4px 0 0; }
.rechner__angaben .rechner__aendern { margin-top: 6px; }
.rechner__angaben-nachricht { margin-top: 10px !important; color: #4a4643; }

/* Auswahlkarten (Radio/Checkbox) */
.rechner__karten { display: grid; gap: 8px; }
.rechner__karte {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 50px;
  padding: 11px 14px;
  border: 1.5px solid #e0d8cd;
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.rechner__karte input {
  flex: none;
  width: 22px; height: 22px;
  margin-top: 1px;
  accent-color: var(--akzent);
}
.rechner__karte-text { flex: 1; min-width: 0; font-size: 15px; line-height: 1.4; color: #1a1816; }
.rechner__karte-text strong { display: block; font-weight: 700; }
.rechner__karte-text small { display: block; font-size: 12.5px; line-height: 1.4; color: #4a4643; }
.rechner__karte-preis {
  flex: none;
  font-size: 14px;
  font-weight: 700;
  color: var(--akzent);
  white-space: nowrap;
  text-align: right;
}
.rechner__karte:has(input:checked) { border-color: var(--akzent); background: var(--akzent-hell); }
.rechner__karte:has(input:disabled) { cursor: not-allowed; opacity: .55; }
.rechner__karte:focus-within { box-shadow: 0 0 0 3px var(--akzent-ring); }

/* Rechenweg in der Preisspalte der Snack-Karten */
.rechner__karte--snack .rechner__karte-preis { color: #726859; font-weight: 600; min-width: 84px; }
.rechner__karte-preis--rechnung small { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.rechner__karte--snack:has(input:checked) .rechner__karte-preis { color: var(--akzent); font-weight: 700; }

/* Getränke: Auswahl der Dauer als Segmente */
.rechner__segmente { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.rechner__segment { position: relative; }
.rechner__segment input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.rechner__segment span {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 52px;
  padding: 6px 4px;
  border: 1.5px solid #e0d8cd;
  border-radius: 12px;
  background: #fff;
  font-size: 13px;
  line-height: 1.25;
  text-align: center;
  color: #2a2724;
}
.rechner__segment span b { font-size: 13.5px; color: var(--akzent); }
.rechner__segment input:checked + span { border-color: var(--akzent); background: var(--akzent-hell); font-weight: 700; }
.rechner__segment input:checked + span::before { content: "✓"; font-weight: 700; color: var(--akzent); }
.rechner__segment input:focus-visible + span { box-shadow: 0 0 0 3px var(--akzent-ring); }

.rechner__paket {
  padding: 12px 14px;
  border: 1.5px solid #e0d8cd;
  border-radius: 14px;
  background: #fff;
  margin-bottom: 12px;
}
.rechner__paket h4 { font-family: var(--f-display); font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.rechner__paket h4 small { font-family: var(--f-body); font-size: 12.5px; font-weight: 600; color: #726859; margin-left: 4px; }
.rechner__paket p { font-size: 13.5px; line-height: 1.5; color: #4a4643; }
.rechner__paket p strong { color: #1a1816; font-weight: 700; }

/* Informationsblöcke ohne Auswahl: Servicepersonal, Spülpauschale (Catering),
   Kindergeburtstags-Menüs, à la carte, Kuchen und Nachhaltigkeit (Kindergeburtstag) */
.rechner__info {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1.5px solid #e0d8cd;
  border-radius: 14px;
  background: #fff;
}
.rechner__info:first-child { margin-top: 0; }
.rechner__info h4 { font-family: var(--f-display); font-size: 16px; font-weight: 700; line-height: 1.3; color: #1a1816; margin-bottom: 4px; }
.rechner__info p { font-size: 13.5px; line-height: 1.5; color: #4a4643; }
.rechner__info p + p { margin-top: 4px; }
.rechner__info a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  color: var(--akzent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.rechner__info a:focus-visible { outline: 3px solid var(--tj-gold); outline-offset: 2px; border-radius: 4px; }
.rechner__info .rechner__info-preis {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--akzent-hell);
  color: var(--akzent);
  font-size: 14px;
  font-weight: 700;
}
.rechner__info--gruen { background: #eef6ee; border-color: #bcdcb8; }
.rechner__info--gruen h4 { color: #14520f; }
.rechner__info--gruen p { color: #24412a; }
.rechner__infokarten { display: grid; gap: 8px; margin: 6px 0 0; padding: 0; list-style: none; }
.rechner__infokarte { padding: 10px 12px; border: 1.5px solid #e0d8cd; border-radius: 14px; background: #fff; }
.rechner__infokarte-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 15px; line-height: 1.3; color: #1a1816; }
.rechner__infokarte-kopf strong { font-weight: 700; }
.rechner__infokarte-kopf span { flex: none; font-weight: 700; color: var(--akzent); }
.rechner__infokarte p + p { margin-top: 2px; font-size: 13px; line-height: 1.4; color: #4a4643; }
.rechner__infokarten + .rechner__info { margin-top: 12px; }

/* Datum/Uhrzeit: das ganze Feld öffnet den nativen Picker (siehe js/rechner-kern.js) */
.rechner__feld input[type="date"],
.rechner__feld input[type="time"] { cursor: pointer; }

/* Hinweise */
.rechner__hinweis {
  margin-top: 12px;
  padding: 11px 14px;
  border-radius: 12px;
  background: #faf5ec;
  border: 1px solid #efe2c4;
  font-size: 13.5px;
  line-height: 1.5;
  color: #4a4643;
}
.rechner__hinweis--oben { margin-top: 0; margin-bottom: 12px; }
.rechner__hinweis strong { color: #1a1816; }
.rechner__hinweis--liste ul { margin: 6px 0 0 18px; list-style: disc; }
.rechner__hinweis--liste li + li { margin-top: 4px; }

/* Zusammenfassung */
.rechner__tabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
.rechner__tabelle td { padding: 8px 0; border-bottom: 1px solid #ece5da; vertical-align: top; text-align: left; }
.rechner__tabelle td:last-child { text-align: right; white-space: nowrap; padding-left: 12px; }
.rechner__tabelle small { display: block; color: #726859; font-size: 12.5px; }
.rechner__tabelle tfoot td { font-weight: 700; font-size: 16px; border-bottom: 0; padding-top: 12px; color: var(--akzent); }
.rechner__aendern {
  margin-top: 4px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid #cec4b5;
  border-radius: 999px;
  background: #fff;
  font-size: 12.5px;
  font-weight: 600;
  color: #2a2724;
}
.rechner__aendern:hover { border-color: var(--akzent); color: var(--akzent); }
/* Gewählte Speisen je Menüposten */
.rechner__details { margin: 3px 0 0 16px; list-style: disc; font-size: 12.5px; line-height: 1.45; color: #4a4643; }
.rechner__details li + li { margin-top: 2px; }

/* Unverbindlich: keine Reservierung, bevor das Bistro bestätigt */
.rechner__verbindlich {
  margin-top: 14px;
  padding: 11px 14px;
  border-radius: 12px;
  background: #fff4d9;
  border: 1px solid #e9ba5f;
  font-size: 13.5px;
  line-height: 1.5;
  color: #4a3a17;
}
.rechner__verbindlich strong { color: #1a1816; }
.rechner__sende-hinweis {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 600;
  color: #6b4b12;
}
.rechner__sende-hinweis[hidden] { display: none; }
.rechner__leer { color: #726859; font-size: 14px; }
.rechner__eckdaten { margin-bottom: 8px; font-size: 14px; font-weight: 700; color: #2a2724; }
.rechner__eckdaten:empty { display: none; }

.rechner__rechtlich {
  margin-top: 14px;
  font-size: 12.5px;
  line-height: 1.6;
  color: #4a4643;
}
.rechner__rechtlich a { color: var(--akzent); text-decoration: underline; text-underline-offset: 2px; }

/* Freiwillige Einwilligung zu Gesundheitsangaben (Allergien, Unverträglichkeiten) vor dem Absenden */
.rechner__einwilligung { margin-top: 14px; padding: 10px 12px; border: 1px solid #e0d8cd; border-radius: 12px; background: #fff; }
.rechner__einwilligung-label { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; cursor: pointer;
  font-size: 13px; line-height: 1.5; color: #2a2724; }
.rechner__einwilligung-label input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--akzent); cursor: pointer; }
.rechner__einwilligung-label .opt { color: #726859; }
.rechner__einwilligung-hinweis { margin-top: 6px; padding-left: 32px; font-size: 12px; line-height: 1.5; color: #4a4643; }
.rechner__einwilligung-hinweis a { color: var(--akzent); text-decoration: underline; text-underline-offset: 2px; }
.rechner__einwilligung-label input:focus-visible { outline: 3px solid var(--tj-gold); outline-offset: 2px; }

.rechner__status {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.55;
  border: 1px solid transparent;
}
.rechner__status[hidden] { display: none; }
.rechner__status--pending { color: #4a4643; background: #f7f4ef; border-color: #e0d8cd; }
.rechner__status--success { color: #14520f; background: #e7f3e6; border-color: #bcdcb8; }
.rechner__status--error   { color: #7d1f1f; background: #fbeaea; border-color: #e6c3c3; }

.rechner__danke { text-align: center; padding: 18px 4px 20px; }
.rechner__danke-titel { font-family: var(--f-display); font-size: 22px; font-weight: 700; color: var(--akzent); margin-bottom: 8px; }
.rechner__danke p { font-size: 15px; line-height: 1.6; color: #2a2724; }

/* Fuß mit laufender Summe */
.rechner__fuss {
  flex: none;
  border-top: 1px solid #e0d8cd;
  background: #fff;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -8px 24px rgba(26, 24, 22, .06);
}
@media (min-width: 900px) { .rechner__fuss { padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px)); } }
.rechner__summe { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rechner__summe[hidden] { display: none; }
/* Planer ohne Summe (Kindergeburtstag): oben im Fuß bleibt ein freier Rand für den
   Hinweis „Weitere Optionen ↓“, der zur Hälfte auf der Fußkante sitzt */
.rechner__form--ohne-summe .rechner__fuss { padding-top: 14px; }
.rechner__form--ohne-summe .rechner__nav { margin-top: 0; }
.rechner__summe-text { display: flex; flex-direction: column; min-width: 0; }
.rechner__summe-label { font-size: 12px; font-weight: 700; color: #4a4643; }
.rechner__summe-betrag {
  font-family: var(--f-display);
  font-size: 22px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--akzent);
  font-variant-numeric: tabular-nums;
}
.rechner__summe-hinweis { font-size: 11.5px; line-height: 1.35; color: #726859; }
.rechner__aufklapp {
  flex: none;
  min-height: 44px;
  padding: 0 14px;
  border: 1.5px solid #cec4b5;
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  color: #2a2724;
}
.rechner__aufklapp[aria-expanded="true"] { border-color: var(--akzent); color: var(--akzent); }
.rechner__aufschluesselung {
  max-height: 38vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed #e0d8cd;
}
.rechner__aufschluesselung[hidden] { display: none; }

.rechner__nav { display: flex; gap: 10px; margin-top: 8px; }
.rechner__btn {
  min-height: 48px;
  padding: 0 20px;
  border-radius: 999px;
  font-family: var(--f-body);
  font-size: 16px;
  font-weight: 600;
  border: 1.5px solid transparent;
}
.rechner__btn[hidden] { display: none; }
.rechner__btn--zurueck { flex: none; background: #fff; border-color: #cec4b5; color: #2a2724; }
.rechner__btn--zurueck:disabled { opacity: .45; cursor: default; }
.rechner__btn--weiter,
.rechner__btn--senden { flex: 1; background: var(--akzent); color: #fff; }
.rechner__btn--weiter:hover,
.rechner__btn--senden:hover { background: var(--akzent-hover); }
.rechner__btn--senden:disabled { opacity: .6; cursor: default; }
.rechner__btn:focus-visible,
.rechner__aufklapp:focus-visible,
.rechner__zu:focus-visible,
.rechner__aendern:focus-visible,
.rechner__mehr:focus-visible { outline: 3px solid var(--tj-gold); outline-offset: 2px; }

/* Kleine Smartphones (geringe Höhe): Rahmen etwas kompakter, damit jeder
   Schritt ohne Scrollen passt. Schrift bleibt gleich groß, Tippflächen ≥ 44 px. */
@media (max-width: 899px) and (max-height: 800px) {
  .rechner__kopf { padding-top: calc(8px + env(safe-area-inset-top, 0px)); padding-bottom: 6px; }
  .rechner__eyebrow { font-size: 10.5px; }
  .rechner__titel { font-size: 18px; }
  .rechner__fortschritt { padding-bottom: 8px; }
  .rechner__inhalt { padding-top: 10px; padding-bottom: 12px; }
  .rechner__schritt-titel { font-size: 19px; margin-bottom: 4px; }
  .rechner__intro { margin-bottom: 10px; line-height: 1.5; }
  .rechner__hinweis { padding: 8px 12px; line-height: 1.45; }
  .rechner__hinweis--oben { margin-bottom: 10px; }
  .rechner__karten { gap: 6px; }
  .rechner__karte { min-height: 46px; padding: 9px 12px; }
  .rechner__feld { margin-bottom: 10px; gap: 4px; }
  
  
  
  
  
  .rechner__info, .rechner__infokarte { padding: 9px 12px; }
  .rechner__info { margin-top: 10px; }
  
  
  .rechner__fuss { padding-top: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  .rechner__summe-betrag { font-size: 21px; }
  .rechner__nav { margin-top: 6px; }
  .rechner__btn { min-height: 46px; }
}
/* Sehr niedrige Smartphones (z. B. 375 × 667, 360 × 640): noch etwas kompakter, damit
   auch dort jeder Schritt ohne inneres Scrollen passt. Tippflächen bleiben ≥ 44 px. */
@media (max-width: 899px) and (max-height: 700px) {
  .rechner__eyebrow { display: none; }
  /* Sehr niedrige Bildschirme: erklärende Einleitung entfällt, wo der Schrittitel reicht */
  .rechner__intro--kompakt-aus { display: none; }
  .rechner__titel { font-size: 17px; }
  .rechner__kopf { padding-bottom: 4px; }
  .rechner__fortschritt { padding-bottom: 6px; }
  .rechner__inhalt { padding-top: 8px; }
  .rechner__schritt-titel { font-size: 17px; }
  .rechner__intro { font-size: 13px; line-height: 1.45; margin-bottom: 8px; }
  .rechner__feld { margin-bottom: 8px; }
  .rechner__feld input,
  .rechner__feld select { min-height: 44px; padding-top: 9px; padding-bottom: 9px; }
  .rechner__feld textarea { min-height: 60px; }
  .rechner__hinweis { font-size: 13px; padding: 7px 10px; }
  .rechner__hinweis--oben { margin-bottom: 8px; }
  .rechner__karten { gap: 4px; }
  .rechner__karte { min-height: 44px; padding: 7px 12px; }
  .rechner__info p,
  .rechner__infokarte p + p { font-size: 13px; line-height: 1.45; }
  .rechner__fuss { padding-top: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); }
  .rechner__summe-betrag { font-size: 19px; }
  .rechner__btn { min-height: 44px; }
  .rechner__nav { margin-top: 4px; }
}
/* Hinweis „Weitere Optionen“ schmal am rechten Rand, auf der Oberkante des Fußes:
   höchstens 12 px ragen in den Inhalt (= dessen kleinster Innenabstand unten, vgl.
   MEHR_UEBERLAPPUNG in js/rechner-kern.js), der Rest liegt über dem freien oberen
   Rand des Fußes – so verdeckt er weder Summe noch „Aufschlüsselung“. */
.rechner__mehr {
  left: auto;
  right: 12px;
  bottom: calc(var(--fuss-h, 150px) - 12px);
  transform: none;
  min-height: 24px;
  padding: 4px 11px;
  font-size: 12px;
  line-height: 16px;
}