/* ==========================================================================
   Getränke-Lieferdienst Rosenheim – Kontoseite, Rechtstexte, Widerruf/Kündigung, 404
   Ergänzt ro.css (Grundlage, Kopf, Fuß, Formularfelder, .text-seite).
   ========================================================================== */

/* Sprungmarke für Tastatur und Vorleseprogramme */
.sprung{position:fixed;left:var(--rand);top:-100px;z-index:80;background:var(--helles);color:#160E02;padding:.7em 1em;font:600 .9rem/1 var(--text);text-decoration:none}
.sprung:focus{top:calc(env(safe-area-inset-top,0px) + 10px)}

/* Seitenkopf */
.seiten-kopf{display:grid;gap:clamp(14px,2vw,22px);justify-items:start;padding-block:clamp(40px,6vw,90px) clamp(26px,4vw,48px)}
.text-seite .inhalt>.eyebrow{margin-bottom:-.2em}
.text-seite .lead a,.seiten-kopf .lead a{color:var(--helles)}
.stand-zeile{margin-top:1.4em}

/* Kästen */
.kasten{background:rgba(14,27,22,.82);border:1px solid var(--linie);padding:clamp(20px,3vw,34px);display:grid;gap:18px;align-content:start;min-width:0}
.kasten+.kasten{margin-top:clamp(18px,2.4vw,28px)}
.kasten h2{font:900 italic clamp(1.6rem,2.8vw,2.2rem)/1 var(--display);text-transform:uppercase}
/* Der Kasten ist ein Raster mit gap: kein zusätzlicher Abstand über der Überschrift (.text-seite h2 in ro.css) */
.kasten h2,.text-seite .kasten h2{margin-top:0}
/* Zweizeiliges Textfeld für einen vorbelegten Satz, der am Handy nicht in eine Zeile passt (Kündigung: Vertrag) */
.feld textarea.zweizeilig{min-height:0;resize:none}
.kasten h3{font:700 1rem/1.3 var(--text)}
.kasten p{color:#D9D4C7}
.kasten a:not(.btn){color:var(--helles)}
.kasten-leise{background:transparent}
.kasten ul.punkte{list-style:none;display:grid;gap:.7em}
.kasten ul.punkte li{position:relative;padding-left:1.4em;color:#D9D4C7}
.kasten ul.punkte li::before{content:"";position:absolute;left:0;top:.62em;width:.6em;height:2px;background:var(--helles)}

/* Kontoseite */
.konto{padding-bottom:clamp(80px,10vw,140px)}
.konto-raster{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(18px,3vw,40px);align-items:start}
.konto-raster.gleich{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:900px){.konto-raster,.konto-raster.gleich{grid-template-columns:minmax(0,1fr)}}

.reiter{display:flex;flex-wrap:wrap;gap:4px 22px;border-bottom:1px solid var(--linie);margin:-4px 0 4px}
.reiter button{background:none;border:0;padding:.9em 0 .8em;cursor:pointer;color:var(--dunst);font:500 .74rem/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;position:relative;transition:color .25s}
.reiter button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--helles);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--weich)}
.reiter button:hover{color:var(--schaum)}
.reiter button[aria-selected="true"]{color:var(--schaum)}
.reiter button[aria-selected="true"]::after{transform:none}

.formular{display:grid;gap:16px}
.zwei{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.zwei.plz-ort{grid-template-columns:8.5em minmax(0,1fr)}
@media (max-width:520px){.zwei{grid-template-columns:minmax(0,1fr)}.zwei.plz-ort{grid-template-columns:7em minmax(0,1fr)}}
.notiz{font:400 .74rem/1.45 var(--mono);letter-spacing:.03em;color:var(--dunst)}
.notiz a{color:var(--schaum)}
.feld .notiz{margin-top:-2px}
.telefon-gruppe{display:grid;gap:8px}
.telefon-gruppe.fehlt input{border-color:var(--rot)}
.telefon-gruppe.fehlt .notiz{color:var(--rot)}
.plz-hinweis{font:500 .78rem/1.45 var(--mono);color:var(--helles)}
.plz-hinweis:empty{display:none}
.knopfzeile{display:flex;flex-wrap:wrap;gap:12px 14px;align-items:center}
.btn-klein{font-size:.86rem;padding:.72em 1.05em}
.btn-gefahr{box-shadow:inset 0 0 0 1.5px rgba(255,107,87,.7);color:var(--rot)}
.btn-gefahr::before{background:var(--rot)}
.btn-gefahr:hover{color:#160E02}

/* Meldungen */
.meldung,.feld,.kasten,.eintrag{scroll-margin-top:calc(var(--navh) + 16px)}
.meldung{padding:.9em 1.1em;border-left:3px solid var(--inn);background:rgba(122,220,203,.08);color:var(--schaum);font-size:.95rem;display:grid;gap:10px;justify-items:start}
.meldung.fehler{border-left-color:var(--rot);background:rgba(255,107,87,.09)}
.meldung.warnung{border-left-color:var(--helles);background:rgba(246,176,46,.08)}
.meldung strong{font-weight:700}
.meldung a{color:var(--helles)}
.laedt{color:var(--dunst);font:400 .82rem/1.5 var(--mono)}

/* Daten */
.daten{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.55em 1.4em;margin:0}
.daten dt{font:500 .7rem/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dunst)}
.daten dd{margin:0;color:var(--schaum);overflow-wrap:anywhere}
@media (max-width:420px){.daten{grid-template-columns:minmax(0,1fr);gap:.1em}.daten dd{margin-bottom:.6em}}

/* Bestellungen und Dauerbestellungen */
.eintraege{display:grid;gap:14px}
.eintrag{border:1px solid var(--linie);background:rgba(8,16,13,.55);padding:16px 18px;display:grid;gap:10px}
.eintrag.aus{opacity:.62}
.eintrag-kopf{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 14px}
.eintrag-kopf strong{font:900 italic 1.35rem/1 var(--display);text-transform:uppercase;letter-spacing:.02em}
.eintrag-info{font:400 .8rem/1.5 var(--mono);color:var(--dunst);letter-spacing:.02em}
.eintrag-info b{color:var(--schaum);font-weight:500}
.posten{display:grid;gap:4px;font-size:.93rem}
.posten li{display:flex;justify-content:space-between;gap:14px;color:#D9D4C7}
.posten li span:last-child:not(:first-child){font-family:var(--mono);font-size:.86rem;white-space:nowrap}
/* Dauerbestellungen haben je Position nur einen Text: der darf umbrechen, die Karte bleibt in der Breite */
.posten li span:first-child{min-width:0;overflow-wrap:anywhere}
.eintrag{grid-template-columns:minmax(0,1fr)}
.eintrag-info{overflow-wrap:anywhere}
.posten.summen{border-top:1px dashed rgba(244,239,226,.14);padding-top:6px;color:var(--dunst)}
.eintrag-fuss{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 14px}
.eintrag-summe{font:900 italic 1.3rem/1 var(--display);text-transform:uppercase}
.schild{display:inline-block;font:500 .64rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:.5em .7em;border:1px solid rgba(244,239,226,.3);border-radius:3px;color:var(--dunst);white-space:nowrap}
.schild.aktiv,.schild.geliefert{color:var(--inn);border-color:rgba(122,220,203,.5)}
.schild.pausiert,.schild.neu,.schild.importiert{color:var(--helles);border-color:rgba(246,176,46,.5)}
.schild.storniert{color:var(--rot);border-color:rgba(255,107,87,.5)}
.aktionen{display:flex;flex-wrap:wrap;gap:8px 10px}
.aktion-feld{border-top:1px solid var(--linie);padding-top:14px;display:grid;gap:12px}
.aktion-feld .meldung{font-size:.9rem}
.tage-wahl{display:grid;gap:8px}
.tage-wahl .haken{color:var(--schaum)}
.liste-leer{color:var(--dunst);font-size:.95rem}

/* Häkchen als Auswahlpunkt (Radio) */
.haken input[type="radio"]{border-radius:50%}
.haken input[type="radio"]::after{width:10px;height:10px;border:0;border-radius:50%;background:#160E02;transform:scale(0);margin:0}
.haken input[type="radio"]:checked::after{transform:scale(1)}

/* Widerruf und Kündigung */
.rechts-formular{max-width:40em;display:grid;gap:18px}
.rechts-formular .kasten{gap:16px}
.auswahl{display:grid;gap:10px}
.auswahl .beschr{margin-bottom:2px}
.falle{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.ergebnis{display:grid;gap:14px}
.ergebnis h2{font:900 italic clamp(1.6rem,2.8vw,2.2rem)/1 var(--display);text-transform:uppercase;color:var(--inn)}
.ergebnis .daten{border-top:1px solid var(--linie);padding-top:14px}

/* Muster-Widerrufsformular */
.muster{border:1px dashed rgba(244,239,226,.3);padding:clamp(16px,2.4vw,26px);display:grid;gap:.5em}
.muster .linie{border-bottom:1px solid rgba(244,239,226,.35);height:1.8em}
.text-seite .knopfzeile{margin-top:.4em}

/* 404 */
.nicht-da{padding-block:clamp(60px,10vw,140px);display:grid;gap:clamp(18px,2.4vw,28px);justify-items:start}
.nicht-da .riesig{font:900 italic clamp(7rem,26vw,20rem)/.8 var(--display);color:transparent;-webkit-text-stroke:2px var(--helles);letter-spacing:-.02em}

/* Drucken (Bestätigungen von Widerruf und Kündigung, Rechtstexte) */
@media print{
  :root{color-scheme:light}
  html,body{background:#fff;color:#000}
  body::after,.nav,.fuss,.sprung,.hinweisleiste,.knopfzeile,.aktionen,#blasen{display:none!important}
  .seite{padding-top:0}
  .text-seite,.seiten-kopf{padding-block:0 20px}
  .text-seite p,.text-seite li,.kasten p,.daten dd,.meldung,.ergebnis h2{color:#000!important}
  .daten dt,.notiz,.klein,.eyebrow{color:#333!important}
  .kasten,.meldung,.eintrag,.muster{background:none!important;border-color:#999!important}
  a{color:#000!important}
}