/* Naturewalk Forest · Bestellen, Rechtstexte, Widerruf. Gleicher Look wie die App (app.css). */
@import url('/fonts.css');
:root {
  --kalk: #F4F1EC; --lehm: #C8B9A6; --tiefe: #222518; --flaeche: #2F3324;
  --glas: rgb(47 51 36 / 72%); --rand: rgb(214 206 194 / 22%);
  --gold-tief: #5C4929; --gold-tief-hell: #6E5934;
  --text-ruhig: rgb(244 241 236 / 86%); --text-leise: rgb(244 241 236 / 68%);
  --font-head: 'Cormorant Garamond', Georgia, serif; --font-body: 'Inter', -apple-system, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--tiefe); color: var(--text-ruhig); font-family: var(--font-body); font-weight: 300; line-height: 1.7; -webkit-font-smoothing: antialiased; }
a { color: var(--lehm); text-underline-offset: 4px; }
.wrap { max-width: 560px; margin: 0 auto; padding: calc(36px + env(safe-area-inset-top, 0px)) 22px calc(48px + env(safe-area-inset-bottom, 0px)); }
.hero { position: relative; margin: -36px -22px 28px; min-height: 340px; background-size: cover; background-position: center 35%; display: flex; align-items: flex-end; }
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgb(34 37 24 / 25%) 0%, rgb(34 37 24 / 10%) 40%, rgb(34 37 24 / 92%) 100%); }
.hero > div { position: relative; z-index: 1; padding: 0 22px 18px; }
.kicker { font-size: 11px; font-weight: 400; letter-spacing: .26em; text-transform: uppercase; color: var(--lehm); }
.h { font-family: var(--font-head); font-weight: 300; font-size: clamp(30px, 8.5vw, 42px); letter-spacing: .14em; text-transform: uppercase; line-height: 1.2; color: var(--kalk); margin: 8px 0 0; text-wrap: balance; }
.h2 { font-family: var(--font-head); font-weight: 400; font-size: 24px; letter-spacing: .06em; color: var(--kalk); margin: 34px 0 10px; }
.akzent { font-family: var(--font-head); font-style: italic; font-size: 22px; color: var(--kalk); margin: 10px 0 0; }
.text { font-size: 16px; color: var(--text-ruhig); }
.text.soft, .soft { color: var(--text-leise); font-size: 14px; }
.karte { background: var(--glas); border: 1px solid var(--rand); border-radius: 18px; padding: 22px 20px; margin: 22px 0; }
.karte ul { margin: 8px 0 0; padding-left: 18px; }
.karte li { margin: 4px 0; }
.preis { font-family: var(--font-head); font-size: 34px; color: var(--kalk); letter-spacing: .04em; }
label.feld { display: block; margin-top: 16px; font-size: 13px; letter-spacing: .04em; color: var(--text-leise); }
input[type=text], input[type=email], input[type=date], select, textarea {
  width: 100%; margin-top: 6px; background: rgb(244 241 236 / 6%); color: var(--kalk); border: 1px solid var(--rand); border-radius: 12px;
  padding: 13px 14px; font-family: var(--font-body); font-size: 16px; font-weight: 300; }
input:focus, select:focus, textarea:focus { outline: none; border-color: rgb(214 206 194 / 55%); }
select option { color: #1E1D1B; }
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.zwei .klein { grid-column: span 1; }
.check { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; font-size: 15px; color: var(--text-ruhig); cursor: pointer; }
.check input { width: 22px; height: 22px; margin-top: 2px; flex: none; accent-color: #A69887; }
.btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; width: 100%; border: 1px solid var(--gold-tief); background: var(--gold-tief); color: var(--kalk);
  font-family: var(--font-body); font-weight: 400; font-size: 14px; letter-spacing: .16em; text-transform: uppercase; padding: 17px 24px; border-radius: 999px; cursor: pointer; margin-top: 24px; text-decoration: none; }
.btn:hover, .btn:active { background: var(--gold-tief-hell); border-color: var(--gold-tief-hell); }
.btn.light { background: transparent; border-color: rgb(244 241 236 / 45%); }
.btn[disabled] { opacity: .5; cursor: default; }
.fehler { color: #e0a896; font-size: 14px; margin-top: 12px; min-height: 1em; }
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.qr { display: block; width: 200px; height: 200px; margin: 14px auto; background: #fff; border-radius: 12px; padding: 6px; }
.daten { width: 100%; border-collapse: collapse; font-size: 15px; }
.daten td { padding: 6px 0; border-bottom: 1px solid var(--rand); vertical-align: top; }
.daten td:first-child { color: var(--text-leise); padding-right: 14px; white-space: nowrap; }
.daten td:last-child { color: var(--kalk); word-break: break-word; }
.kopie { appearance: none; background: none; border: 0; color: var(--lehm); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; padding: 0 0 0 8px; }
.fuss { margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--rand); font-size: 13px; color: var(--text-leise); text-align: center; }
.fuss a { margin: 0 6px; }
.recht h2 { font-family: var(--font-head); font-weight: 400; font-size: 22px; color: var(--kalk); margin: 30px 0 6px; }
.recht p, .recht li { font-size: 15px; }

/* .qr setzt display: block und ueberstimmt damit das hidden-Attribut: bei Bestellungen
   ausserhalb des SEPA-Raums blieb der Code auf /bestellt sichtbar, obwohl das Skript ihn ausblendet.
   Korrektur von Lukas' Team vom 02.10.2026, am 04.10.2026 ins HQ uebernommen. */
.qr[hidden] { display: none; }
.qr-zeile { text-align: center; margin: 0 0 4px; }
/* Unterschrift wie in der App (15.10.2026) */
.unterschrift { margin-top: 30px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.unterschrift span { font-size: clamp(16px, 4.4vw, 19px); color: var(--text-ruhig, var(--kalk)); }
.unterschrift img { height: 44px; width: auto; }
/* "So einfach geht's" ganz oben auf der Bestellseite (15.10.2026) */
.sub.einfach { margin-top: 14px; color: var(--kalk); }

/* Ausstiegsfrage auf der Bestellseite (20.10.2026) */
.abhalt__wahl { display: flex; flex-direction: column; gap: 8px; }
.abhalt__knopf { text-align: left; background: transparent; color: inherit; border: 1px solid var(--rand); border-radius: 999px; padding: 11px 16px; font: inherit; font-size: 15px; cursor: pointer; }
.abhalt__knopf:hover, .abhalt__knopf:focus-visible { border-color: var(--gold, #c9a45c); }
.erst-schreiben a { color: var(--gold, #c9a45c); }