/* ==========================================================================
   Holz Feuer Rauch — Basis (Startseite + /bestellen)
   CI fix: ember/fire/cream/ash/ashlt · Alfa Slab One / Oswald / Open Sans (lokal)
   Heller als bisher: warm-dunkle Holzkohle-Bänder im Wechsel mit Papierflächen.
   ========================================================================== */
:root{
  /* CI (unverändert) */
  --ember:#e85d04; --fire:#f48c06; --cream:#ede3d2; --ash:#7a6e5e; --ashlt:#b0a090;
  /* Flächen */
  --coal:#2a221b;      /* Holzkohle-Braun, Grund der dunklen Bänder */
  --coal-2:#332920;    /* etwas heller, Karten auf dunkel */
  --coal-3:#1f1913;    /* tiefster Ton: Footer, Hero-Verlauf */
  --paper:#f4ece0;     /* heller Grund */
  --paper-2:#ede3d2;   /* = cream, zweite helle Fläche */
  --ink:#2a221b;       /* Text auf hell */
  --ink-2:#5a4c3e;     /* Sekundärtext auf hell (AA 7:1) */
  --ember-ink:#b04400; /* Ember für TEXT auf hell (AA 4.7:1) – #e85d04 nur für Flächen */
  --wood:#8a6a4a;      /* Holzton für Rahmen/Etiketten */
  --wood-lt:#c9b08f;
  --line-lt:#d9cbb6;   /* Haarlinie auf hell */
  --line-dk:rgba(237,227,210,.14);
  --grad-fire:linear-gradient(135deg,#f9b234 0%,#f48c06 45%,#e85d04 100%);
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --gut:clamp(16px,4vw,56px);
  --wrap:1320px;
  --slab:'Alfa Slab One',Rockwell,Georgia,serif;
  --osw:'Oswald','Arial Narrow',sans-serif;
  --sans:'Open Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:76px}
@media (max-width:900px){html{scroll-padding-top:68px}}
body{background:var(--paper);color:var(--ink);font:400 16px/1.65 var(--sans);max-width:100vw;-webkit-font-smoothing:antialiased}
/* Seitlichen Überlauf kappen, ohne einen Scroll-Container zu erzeugen (sonst klebt position:sticky nicht) */
html,body{overflow-x:hidden}
@supports (overflow:clip){html,body{overflow-x:clip}}
img,video,picture{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3{font-weight:400;hyphens:none;-webkit-hyphens:none;text-wrap:balance}
p,li,dd{hyphens:none;-webkit-hyphens:none;text-wrap:pretty}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.sr-only,.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:-1px;padding:0;border:0}
@media (pointer:coarse){.kbd-only{display:none}}
.nobr{white-space:nowrap}
.tnum{font-variant-numeric:tabular-nums lining-nums}

/* Skip-Link + Fokus */
.skip{position:absolute;left:-9999px;top:12px;z-index:1000;background:var(--cream);color:var(--coal);padding:12px 18px;font:600 15px/1 var(--sans);border-radius:50px;text-decoration:none}
.skip:focus{left:16px}
:focus-visible{outline:2px solid var(--fire);outline-offset:3px}
/* Fokusrahmen ≥ 3:1: auf hellen Flächen Ember-Ink, auf dunklen Flächen Fire (Footer liegt außerhalb von main) */
main :focus-visible,.on-light :focus-visible,.light :focus-visible{outline-color:var(--ember-ink)}
main :is(.dark,.hero,.band,.herkunft,.aroma,.cat-head,.phead,.u-hero,.order-head) :focus-visible{outline-color:var(--fire)}
main :is(.dark,.aroma) .card :focus-visible{outline-color:var(--ember-ink)}

/* Korn (statisches PNG, kein Filter) */
.grain{position:relative;isolation:isolate}
.grain::after{content:"";position:absolute;inset:0;background:url(/img/korn.png);opacity:.55;pointer-events:none;z-index:0;mix-blend-mode:overlay}
.grain>*{position:relative;z-index:1}

/* --------------------------------------------------------------------------
   Buttons — Pill + Fire-Verlauf (CI), Füll-Wipe beim Hover (Amberbijou)
   -------------------------------------------------------------------------- */
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:52px;padding:0 30px;border-radius:50px;border:0;cursor:pointer;text-decoration:none;
  font:600 15.5px/1.2 var(--sans);letter-spacing:.01em;color:#1d140c;background:var(--grad-fire);
  box-shadow:0 10px 28px -14px rgba(232,93,4,.7);transition:transform .25s var(--ease),box-shadow .35s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:#ffc46b;transform:scaleX(0);transform-origin:100% 50%;transition:transform .7s var(--ease)}
.btn .arr{display:inline-block;transition:transform .6s var(--ease)}
.btn:active{transform:translateY(1px)}
@media (hover:hover) and (pointer:fine){
  .btn:hover::before{transform:scaleX(1);transform-origin:0 50%}
  .btn:hover .arr{transform:translateX(6px)}
  .btn:hover{box-shadow:0 16px 36px -14px rgba(232,93,4,.8)}
}
.btn:focus-visible::before{transform:scaleX(1);transform-origin:0 50%}
.btn:focus-visible{outline:2px solid var(--cream);outline-offset:4px}
.light .btn:focus-visible,.on-light .btn:focus-visible{outline-color:var(--ink)}
main .btn:focus-visible{outline-color:var(--ink)}
main :is(.dark,.hero,.band,.herkunft,.aroma,.cat-head,.phead,.u-hero,.order-head) .btn:focus-visible{outline-color:var(--cream)}
main :is(.dark,.aroma) .card .btn:focus-visible{outline-color:var(--ink)}
/* Ghost (auf dunkel) */
.btn--ghost{background:transparent;color:var(--cream);box-shadow:inset 0 0 0 1.5px rgba(237,227,210,.55)}
.btn--ghost::before{background:var(--cream)}
@media (hover:hover) and (pointer:fine){.btn--ghost:hover{color:var(--coal)}}
/* Ghost (auf hell) */
.btn--ink{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn--ink::before{background:var(--ink)}
@media (hover:hover) and (pointer:fine){.btn--ink:hover{color:var(--paper)}}

/* Textlink mit wanderndem Unterstrich */
.tlink{display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;font:600 15px/1.2 var(--sans);letter-spacing:.02em;text-transform:none;
  background:linear-gradient(currentColor,currentColor) 0 calc(100% - 8px)/100% 1.5px no-repeat;transition:background-size .45s var(--ease),color .2s}
.tlink .arr{transition:transform .5s var(--ease)}
@media (hover:hover){.tlink:hover{background-size:0 1.5px;background-position:100% calc(100% - 8px)}.tlink:hover .arr{transform:translateX(5px)}}

/* KI-Kennzeichnung (Art. 50 KI-VO) — sichtbar am Bild */
.ki-tag{position:absolute;top:8px;right:8px;z-index:4;font:600 10.5px/1 var(--sans);letter-spacing:.02em;white-space:nowrap;
  color:#fff;background:rgba(31,25,19,.72);padding:5px 8px;border-radius:3px;pointer-events:none}
/* Stockfoto-Kennzeichnung (analog KI-Tag, unten rechts) */
.sym-tag{position:absolute;right:8px;bottom:8px;z-index:4;font:600 10.5px/1 var(--sans);letter-spacing:.02em;white-space:nowrap;
  color:#fff;background:rgba(31,25,19,.62);padding:5px 8px;border-radius:3px;pointer-events:none}

/* NAV: seit r7 komplett in assets/nav.css (Header, Mega-Panel, Drawer) */

/* --------------------------------------------------------------------------
   FOOTER — Wortmarke, asymmetrisch, Widerrufsbutton
   -------------------------------------------------------------------------- */
.foot{background:var(--coal-3);color:rgba(237,227,210,.78);padding:clamp(64px,8vw,112px) 0 0;font-size:15px;position:relative;overflow:hidden}
/* Wortmarke immer einzeilig: Breite bei 1px Schriftgröße = 10,96 px (Alfa Slab, gemessen) → Größe = Inhaltsbreite × 0,088 (≈ 3 % Luft) */
.foot__word{font-family:var(--slab);font-size:calc((min(100vw, var(--wrap)) - 2 * var(--gut)) * .088);line-height:.92;letter-spacing:-.01em;white-space:nowrap;margin-bottom:clamp(36px,5vw,72px)}
.foot__word span{display:inline-block}
.w-cream{color:var(--cream)}
.w-fire{background:var(--grad-fire);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--fire)}
.w-ash{color:var(--ashlt)}
.foot__grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr) minmax(0,.9fr);gap:40px clamp(32px,5vw,80px);padding-bottom:56px;align-items:start}
.foot__brand{display:flex;gap:24px;align-items:flex-start}
.foot__brand img{width:110px;height:auto;opacity:.85;flex:none}
.foot address{font-style:normal;line-height:1.75}
.foot address strong{color:var(--cream);font-weight:600}
.foot h3{font:400 clamp(24px,2.1vw,30px)/1.1 var(--slab,"Alfa Slab One",serif);letter-spacing:.01em;text-transform:none;color:var(--fire);margin-bottom:18px;padding-bottom:14px;position:relative}
.foot h3::after{content:"";position:absolute;left:0;bottom:0;width:40px;height:3px;border-radius:2px;background:var(--grad-fire)}
.foot ul{list-style:none}
.foot li a,.foot__contact a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:rgba(237,227,210,.75);transition:color .2s}
.foot li a:hover,.foot__contact a:hover{color:var(--fire)}
.foot__contact{display:flex;flex-direction:column}
.foot__legal{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px 28px;border-top:1px solid rgba(237,227,210,.12);padding:18px 0 26px;font-size:13.5px;color:rgba(237,227,210,.6)}
.foot__legal nav{display:flex;flex-wrap:wrap;gap:0 24px}
.foot__legal nav a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;text-decoration:none;color:rgba(237,227,210,.75)}
.foot__legal nav a:hover{color:var(--cream)}
.foot__legal .credit{white-space:nowrap}
@media (max-width:600px){.foot__legal .sep{display:none}.foot__legal .credit{display:block;margin-top:4px}}
.foot__legal .credit a{color:var(--fire);text-underline-offset:2px}
.btn-widerruf{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:50px;border:1.5px solid rgba(237,227,210,.5);
  color:var(--cream);text-decoration:none;font:600 14px/1 var(--sans);transition:background .3s,color .3s,border-color .3s}
.btn-widerruf:hover{background:var(--cream);color:var(--coal);border-color:var(--cream)}
@media (max-width:900px){
  .foot__grid{grid-template-columns:1fr 1fr}
  .foot__grid>.foot__brand{grid-column:1/-1}
}
@media (max-width:560px){
  .foot__grid{grid-template-columns:1fr;gap:28px}
  .foot__brand{flex-direction:column;gap:16px}
  .foot__brand img{width:88px}
  .foot__legal{flex-direction:column;align-items:stretch}
  .foot__legal .btn-widerruf{width:100%}
}

/* --------------------------------------------------------------------------
   MOTION (Basis: Amberbijou motion.css) — nur transform/opacity/clip-path
   Gate html.js · Notfall .am-off · prefers-reduced-motion
   -------------------------------------------------------------------------- */
:root{--am-ease:cubic-bezier(.2,.7,.2,1);--am-ease-out:cubic-bezier(.16,1,.3,1);--am-dur:900ms;--am-dur-long:1100ms;--am-rise:20px}
@media (prefers-reduced-motion:no-preference){
  .js:not(.am-off) :is([data-am-reveal=""],[data-am-reveal="fade"],[data-am-reveal="rise"],[data-am-stagger=""]>:not([data-am-reveal]),[data-am-stagger="fade"]>:not([data-am-reveal]),[data-am-stagger="rise"]>:not([data-am-reveal])):not(.is-in){opacity:0;transform:translate3d(0,var(--am-rise),0)}
  .js:not(.am-off) :is([data-am-reveal=""],[data-am-reveal="fade"],[data-am-reveal="rise"],[data-am-stagger=""]>:not([data-am-reveal]),[data-am-stagger="fade"]>:not([data-am-reveal]),[data-am-stagger="rise"]>:not([data-am-reveal])):not(.am-done){transition:opacity calc(var(--am-dur)*.8) var(--am-ease) var(--am-d,0ms),transform var(--am-dur) var(--am-ease) var(--am-d,0ms)}
  .js:not(.am-off) :is([data-am-reveal="rise"],[data-am-stagger="rise"]>:not([data-am-reveal])):not(.is-in) .am-img{transform:scale(1.06)}
  .js:not(.am-off) :is([data-am-reveal="rise"],[data-am-stagger="rise"]>:not([data-am-reveal])):not(.am-done) .am-img{transition:transform var(--am-dur-long) var(--am-ease) var(--am-d,0ms)}
  .js:not(.am-off) [data-am-reveal="clip"]:not(.is-in){clip-path:inset(100% 0 0 0)}
  .js:not(.am-off) [data-am-reveal="clip"].is-in:not(.am-done){clip-path:inset(0 0 0 0)}
  .js:not(.am-off) [data-am-reveal="clip"]:not(.am-done){transition:clip-path var(--am-dur-long) var(--am-ease-out) var(--am-d,0ms)}
  .js:not(.am-off) [data-am-reveal="clip"]:not(.is-in) img{transform:scale(1.08)}
  .js:not(.am-off) [data-am-reveal="clip"]:not(.am-done) img{transform-origin:50% 100%;transition:transform calc(var(--am-dur-long) + 200ms) var(--am-ease-out) var(--am-d,0ms)}
  .js:not(.am-off) [data-am-reveal="lines"]:not(.am-split){opacity:0}
  .js:not(.am-off) [data-am-reveal="lines"]:not(.is-in) .am-line__in{transform:translate3d(0,110%,0)}
  .js:not(.am-off) [data-am-reveal="lines"]:not(.am-done) .am-line__in{transition:transform var(--am-dur-long) var(--am-ease-out) calc(var(--am-d,0ms) + var(--am-ld,0ms))}
  .js:not(.am-off) [data-am-reveal="rule"]:not(.is-in){transform:scaleX(0)}
  .js:not(.am-off) [data-am-reveal="rule"]:not(.am-done){transition:transform var(--am-dur-long) var(--am-ease-out) var(--am-d,0ms)}
  .am-anim,.am-anim .am-line__in{will-change:transform,opacity}
  .am-instant,.am-instant *{transition:none!important}
}
.am-line{display:block;overflow:hidden;padding:.1em 0 .14em;margin:-.1em 0 -.14em}
.am-line__in{display:block}
.am-done .am-line{overflow:visible}
@media print{[data-am-reveal],[data-am-stagger]>*,.am-line__in{opacity:1!important;transform:none!important;clip-path:none!important}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* Großbildschirme (2560): Satzspiegel mitwachsen lassen */
@media (min-width:1900px){:root{--wrap:1600px}body{font-size:17px}}