/* Feinkost Jiménez: Bestellseite, Richtung „Abendlicht“ (von David am 19.09.2026 gewählt).
   Links steht die Flasche im Hain und bleibt stehen, rechts liegt der Bestellbogen.
   Eigenständig (lädt site.css NICHT), Farben und Schriften 1:1 aus 08_Designkonzept/BRAND.md.
   Keine style-Attribute im HTML, damit die Seite unter einer strengen Content-Security-Policy läuft. */

@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400 600;font-display:swap;src:url('../fonts/cormorant-400.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400 500;font-display:swap;src:url('../fonts/cormorant-400i.woff2') format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:300 600;font-display:swap;src:url('../fonts/outfit-400.woff2') format('woff2')}

:root{--oliv:#2c3720;--oliv2:#3c4a2a;--salbei:#5f6f43;--gold:#c2973c;--gold2:#e6c578;--paper:#f4eee1;--paper2:#ece2cf;--creme:#fbf7ee;--ink:#23271b;--muted:#5b5640;--line:rgba(44,55,32,.14);--nacht:#171d10;--fehler:#8c2318}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--nacht);color:var(--creme);font:300 16px/1.7 'Outfit',system-ui,sans-serif}
a{color:inherit}
button{font:inherit}
[hidden]{display:none!important}

.seite{display:grid;min-height:100dvh}
@media(min-width:980px){.seite{grid-template-columns:minmax(0,1fr) minmax(460px,580px)}}

/* ---------- Bühne ---------- */
.buehne{position:relative;min-height:62vh;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(22px,4vw,48px);overflow:hidden;isolation:isolate}
@media(min-width:980px){.buehne{position:sticky;top:0;height:100dvh}}
.buehne::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--nacht) url('../img/produkt-hain.jpg') 4% 40%/cover no-repeat}
.buehne::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(23,29,16,.72) 0%,rgba(23,29,16,.12) 32%,rgba(23,29,16,.18) 55%,rgba(23,29,16,.92) 100%)}
.buehne .logo{width:118px;display:block}
.buehne .logo img{width:100%;height:auto;display:block}
.kicker{font-weight:500;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold2);margin:0 0 14px}
.buehne h1{font:500 clamp(40px,4.6vw,62px)/1.04 'Cormorant Garamond',serif;margin:0;letter-spacing:-.01em;max-width:9ch}
.buehne h1 i{font-weight:400;color:var(--gold2)}
.herkunft{margin:18px 0 0;max-width:40ch;color:rgba(251,247,238,.86)}
.fakten{display:flex;flex-wrap:wrap;gap:8px 22px;margin:22px 0 0;padding:0;list-style:none;font-size:13.5px;letter-spacing:.04em;color:rgba(251,247,238,.8)}
.fakten li{display:flex;align-items:center;gap:9px}
.fakten li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold2)}
/* Handy: die Flasche steht oben frei, der Text sitzt darunter im Dunkel. So verdeckt keine Zeile das Etikett. */
@media(max-width:979px){
  .buehne{min-height:0;display:block;padding-bottom:30px}
  .buehne .logo{position:absolute;top:20px;left:22px;width:96px}
  .buehne .text{margin-top:96vw}
  .buehne::before{background-position:50% 0;background-size:auto 112vw}
  .buehne::after{background:linear-gradient(180deg,rgba(23,29,16,.5) 0,rgba(23,29,16,0) 18vw,rgba(23,29,16,0) 70vw,var(--nacht) 104vw)}
  .buehne h1{font-size:clamp(34px,9.4vw,46px);max-width:none}
  .buehne.kurz .text{margin-top:70vw}
  .buehne.kurz::before{background-size:auto 86vw}
  .buehne.kurz::after{background:linear-gradient(180deg,rgba(23,29,16,.5) 0,rgba(23,29,16,0) 18vw,rgba(23,29,16,0) 52vw,var(--nacht) 80vw)}
}

/* ---------- Bestellbogen ---------- */
.bogen{background:var(--paper);color:var(--ink);padding:clamp(26px,4vw,52px) clamp(20px,4vw,48px) 56px}
.bogen a{color:var(--salbei);text-underline-offset:3px}
.testband{background:var(--gold2);color:var(--oliv);font-weight:500;font-size:13.5px;text-align:center;border-radius:10px;padding:8px 14px;margin:0 0 28px}
.pause{background:var(--paper2);border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin:0 0 28px}
.bogen h2{font:500 30px/1.15 'Cormorant Garamond',serif;color:var(--oliv);margin:44px 0 4px}
.bogen h2.erste{margin-top:0}
.leise{color:var(--muted);font-size:14.5px;margin:0}

.menge{display:grid;grid-template-columns:1fr auto;align-items:end;gap:18px;margin-top:20px;padding-bottom:22px}
.zahl{font:500 clamp(84px,14vw,120px)/.8 'Cormorant Garamond',serif;color:var(--oliv);font-variant-numeric:lining-nums;letter-spacing:-.03em}
.zahl small{font:400 17px/1 'Outfit',sans-serif;color:var(--muted);letter-spacing:0;margin-left:10px}
.knoepfe{display:flex;gap:10px}
.knoepfe button{width:56px;height:56px;border-radius:50%;border:1px solid var(--oliv);background:transparent;color:var(--oliv);font-size:24px;line-height:1;cursor:pointer;transition:background .2s,color .2s}
.knoepfe button:hover:not(:disabled){background:var(--oliv);color:var(--creme)}
.knoepfe button:disabled{opacity:.25;cursor:default}
.preiszeile{display:flex;justify-content:space-between;gap:16px;font-size:15px;color:var(--muted)}
.preiszeile b{font-weight:500;color:var(--ink);white-space:nowrap}
.ausverkauft{color:var(--fehler);font-weight:500;margin:18px 0 0}
/* Signatur: die goldene Linie bis zum freien Versand */
.linie{height:2px;background:var(--line);margin:22px 0 10px;position:relative;border-radius:2px}
.linie::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--fuell,0%);background:var(--gold);border-radius:2px;transition:width .6s cubic-bezier(.22,.7,.2,1)}
.frei{font-size:14px;color:var(--salbei);margin:0;font-weight:400;min-height:1.7em}
.versand-frei .frei{color:var(--oliv);font-weight:500}

.feld{display:grid;gap:6px;margin-top:16px}
.feld label{font-size:13px;font-weight:500;color:var(--oliv)}
.feld input{font:300 16px 'Outfit',sans-serif;color:var(--ink);background:var(--creme);border:1px solid var(--line);border-radius:12px;padding:14px 16px;min-height:52px;width:100%}
.feld input[aria-invalid="true"]{border-color:var(--fehler)}
.feld .fehlertext{color:var(--fehler);font-size:13.5px}
.feld input:focus-visible,.knoepfe button:focus-visible,.kauf:focus-visible,.link:focus-visible,.wahl input:focus-visible+span,.haken input:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.zwei{display:grid;gap:0 14px}
@media(min-width:520px){.zwei{grid-template-columns:1fr 1fr}.zwei.plz{grid-template-columns:130px 1fr}}
.falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.haken{display:flex;gap:12px;align-items:flex-start;margin-top:22px;font-size:15px;line-height:1.5;cursor:pointer}
.haken input{accent-color:var(--oliv);width:20px;height:20px;flex:none;margin-top:2px}
.wahl{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.wahl label{display:flex;align-items:center;gap:10px;background:var(--creme);border:1px solid var(--line);border-radius:12px;padding:12px 14px;min-height:56px;cursor:pointer;font-weight:400;line-height:1.3}
.wahl input{accent-color:var(--oliv);width:18px;height:18px;flex:none}
.wahl small{display:block;color:var(--muted);font-size:12.5px}
.wahl label:has(input:checked){border-color:var(--oliv);box-shadow:inset 0 0 0 1px var(--oliv)}

.summe{margin-top:44px;border-top:1px solid var(--oliv);padding-top:18px}
.summe .zeile{display:flex;justify-content:space-between;gap:16px;padding:5px 0;font-variant-numeric:tabular-nums}
.summe .zeile span:last-child{white-space:nowrap}
.summe .klein{display:block;color:var(--muted);font-size:13.5px}
.summe .gesamt{font:500 34px/1.1 'Cormorant Garamond',serif;color:var(--oliv);padding-top:14px;font-variant-numeric:lining-nums}
.summe .ust{color:var(--muted);font-size:13.5px}
.kauf{display:flex;align-items:center;justify-content:center;width:100%;margin-top:24px;min-height:62px;border:0;border-radius:999px;background:var(--oliv);color:var(--creme);font-weight:500;font-size:16.5px;cursor:pointer;transition:background .25s;text-decoration:none}
.bogen a.kauf{color:var(--creme);text-decoration:none}
.kauf:hover{background:var(--oliv2)}
.kauf[disabled]{opacity:.55;cursor:progress}
.link{background:none;border:0;color:var(--salbei);text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:48px;padding:0}
.hinweis{font-size:13.5px;color:var(--muted);margin:16px 0 0}
.meldung{background:#f8dcd6;color:#7a1d13;border-radius:12px;padding:13px 16px;margin:20px 0 0;font-weight:500}

.angaben{display:grid;gap:2px 18px;margin:18px 0 0}
@media(min-width:520px){.angaben{grid-template-columns:150px 1fr}}
.angaben dt{color:var(--muted);font-size:13.5px;margin-top:14px}
.angaben dd{margin:0;overflow-wrap:anywhere}
@media(min-width:520px){.angaben dt{margin-top:0;padding:9px 0}.angaben dd{padding:9px 0;border-bottom:1px solid var(--line)}}
.rechtliches{margin:24px 0 0;font-size:14.5px;line-height:1.6}

.rueck p{margin:16px 0 0;max-width:52ch}
.rueck .nummer{font:500 30px/1.2 'Cormorant Garamond',serif;color:var(--oliv);font-variant-numeric:lining-nums}
/* Spam-Hinweis: soll auch ungeübten Augen sofort auffallen (Gmail sortiert die junge Domain noch aus, Befund 20.09.2026) */
.spamkasten{margin:28px 0 0;padding:18px 20px 20px;background:var(--gold2);color:var(--oliv);border-left:6px solid var(--oliv);border-radius:12px;max-width:52ch}
.spamkasten p{margin:8px 0 0;font-weight:400;font-size:16px;line-height:1.55}
.spamkasten .kopf{margin:0;font:600 22px/1.2 'Cormorant Garamond',serif}
.spamkasten strong{font-weight:600}
.bogen .spamkasten a{color:var(--oliv);font-weight:500}

/* ---------- Fuß ---------- */
.fuss{background:var(--nacht);color:rgba(251,247,238,.72);font-size:13.5px;padding:26px clamp(20px,4vw,48px) 34px;border-top:1px solid rgba(251,247,238,.1)}
.fuss nav{display:flex;flex-wrap:wrap;gap:6px 22px}
.fuss a{text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.fuss a:hover{color:var(--gold2)}
.fuss p{margin:10px 0 0}

@media(prefers-reduced-motion:reduce){*{transition:none!important}}