/*
Theme Name: Gold Gans
Theme URI: https://gold-gans.com
Author: Polfood GmbH
Description: One-Page-Theme für die Marke Gold-Gans (Hafermastgans aus Freilandhaltung). Alle Texte und Bilder sind unter Design > Customizer > „Gold Gans Inhalte“ bearbeitbar, Rezepte unter „Rezepte“. Schriften lokal eingebunden (DSGVO-freundlich), Kontaktformular integriert.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gold-gans
Tags: one-column, custom-logo, custom-menu, featured-images, translation-ready
*/

/* Schriften lokal eingebunden (DSGVO), Lizenz: SIL Open Font License */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/caveat-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/caveat-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/caveat-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/caveat-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Gloock';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/gloock-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Gloock';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/gloock-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/hanken-grotesk-400-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/hanken-grotesk-400-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/hanken-grotesk-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/hanken-grotesk-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/hanken-grotesk-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/hanken-grotesk-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/hanken-grotesk-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/hanken-grotesk-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/hanken-grotesk-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/hanken-grotesk-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/ibm-plex-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/ibm-plex-mono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Layout: festliche Tafel. Rotkohl-Violett und Bratengold als Bänder, dazwischen helles Tischtuch; der Ofen ist das Herzstück. */
:root{
  --paper:#FCFAF6;      /* Tischtuch */
  --paper-2:#F3ECE2;
  --ink:#2B1824;        /* Pflaumenschwarz */
  --ink-soft:#6B5562;
  --gold:#D99A12;       /* Kruste */
  --gold-hi:#F4C24A;
  --kohl:#4A1F3E;       /* Rotkohl */
  --kohl-ink:#FBEFD9;
  --beere:#B8293F;      /* Preiselbeere */
  --line:#E4D9CB;
  --tray:#C9C6C1;
  --on-gold:#2B1824;
  --f-display:"Gloock", "Georgia", "Times New Roman", serif;
  --f-body:"Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --f-hand:"Caveat", "Comic Sans MS", cursive;
  --gutter-l:max(16px, env(safe-area-inset-left, 0px));
  --gutter-r:max(16px, env(safe-area-inset-right, 0px));
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#170D14; --paper-2:#21141D; --ink:#F6EBDD; --ink-soft:#BFA9B5;
    --gold:#F0B33A; --gold-hi:#FFD372; --kohl:#2E1228; --kohl-ink:#FBEFD9;
    --beere:#E2566C; --line:#3A2733; --tray:#8E8A86; --on-gold:#1B0F17;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#170D14; --paper-2:#21141D; --ink:#F6EBDD; --ink-soft:#BFA9B5;
  --gold:#F0B33A; --gold-hi:#FFD372; --kohl:#2E1228; --kohl-ink:#FBEFD9;
  --beere:#E2566C; --line:#3A2733; --tray:#8E8A86; --on-gold:#1B0F17;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--kohl)}
h1,h2,h3{font-family:var(--f-display);font-weight:400;line-height:1.05;text-wrap:balance;margin:0}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}
.wrap{max-width:1180px;margin-inline:auto;padding-left:var(--gutter-l);padding-right:var(--gutter-r)}
.eyebrow{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.btn{display:inline-flex;align-items:center;gap:.6em;font:600 1rem/1 var(--f-body);padding:1em 1.5em;border-radius:999px;border:2px solid transparent;text-decoration:none;cursor:pointer;transition:transform .2s, background .2s, color .2s}
.btn:hover{transform:translateY(-2px)}
.btn-gold{background:var(--gold);color:var(--on-gold)}
.btn-gold:hover{background:var(--gold-hi)}
.btn-ghost{border-color:currentColor;background:transparent;color:inherit}

/* ---------- Header ---------- */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--kohl);color:var(--kohl-ink)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.6rem}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:inherit}
.brand svg{width:58px;height:58px;flex:none}
.brand-word{display:flex;flex-direction:column;line-height:1}
.brand-word small{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.32em;color:var(--gold-hi)}
.brand-word b{font-family:var(--f-display);font-weight:400;font-size:1.7rem;letter-spacing:.01em}
.nav{display:flex;gap:1.6rem;align-items:center}
.nav a{text-decoration:none;font-weight:500;font-size:.98rem;position:relative;padding-block:.3rem}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--gold-hi);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.nav a:hover::after{transform:scaleX(1)}
.nav .btn{padding:.7em 1.1em;font-size:.92rem}
.nav-toggle{display:none;background:none;border:2px solid var(--kohl-ink);color:inherit;border-radius:999px;padding:.45em .9em;font:600 .9rem var(--f-body);cursor:pointer}
@media (max-width:860px){
  .nav-toggle{display:inline-flex}
  .nav{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:flex-start;gap:0;background:var(--kohl);padding:0 var(--gutter-r) 1rem var(--gutter-l);display:none}
  .nav.open{display:flex}
  .nav a{padding-block:.75rem;width:100%;border-top:1px solid rgba(255,255,255,.12)}
  .nav .btn{margin-top:.8rem;width:auto;border-top:0}
}

/* ---------- Logo animation ---------- */
.logo .ring{stroke-dasharray:340;stroke-dashoffset:340;animation:draw 1.6s .2s cubic-bezier(.6,0,.2,1) forwards}
.logo .goose{transform-origin:62px 92px;animation:settle .9s .9s both cubic-bezier(.3,1.4,.5,1)}
.logo .head{transform-box:fill-box;transform-origin:70% 100%;animation:nod 7s 2.4s ease-in-out infinite}
.logo .wing{transform-box:fill-box;transform-origin:15% 30%}
.logo:hover .wing,.brand:hover .wing{animation:flap .5s ease-in-out 2}
.logo .sheen{animation:sheen 6s 2s ease-in-out infinite}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes settle{from{transform:translateY(14px) scale(.85);opacity:0}to{transform:none;opacity:1}}
@keyframes nod{0%,86%,100%{transform:rotate(0)}90%{transform:rotate(-9deg)}94%{transform:rotate(4deg)}}
@keyframes flap{50%{transform:rotate(-16deg) scaleY(1.08)}}
@keyframes sheen{0%,70%{transform:translateX(-140px)}100%{transform:translateX(140px)}}

/* ---------- Hero ---------- */
.hero{background:var(--kohl);color:var(--kohl-ink);overflow:hidden;position:relative}
.hero::after{content:"";position:absolute;inset:auto 0 0;height:56px;background:var(--paper);clip-path:ellipse(70% 100% at 50% 100%)}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:2.5rem;align-items:center;padding-block:4.5rem 6.5rem;position:relative;z-index:1}
.hero h1{font-size:clamp(2.9rem,7.4vw,6.1rem);letter-spacing:-.01em}
.hero h1 em{font-style:normal;color:var(--gold-hi);position:relative;white-space:nowrap}
.hero h1 em svg{position:absolute;left:-2%;bottom:-.12em;width:104%;height:.3em;overflow:visible}
.hero h1 em path{stroke-dasharray:420;stroke-dashoffset:420;animation:draw 1.2s 1.1s ease-out forwards}
.hero .lede{font-size:1.2rem;max-width:34ch;margin-top:1.4rem;color:color-mix(in srgb,var(--kohl-ink) 82%,transparent)}
.hero .actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.hero .facts{display:flex;flex-wrap:wrap;gap:1.6rem;margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid color-mix(in srgb,var(--kohl-ink) 22%,transparent)}
.hero .facts div{display:flex;flex-direction:column}
.hero .facts b{font-family:var(--f-mono);font-weight:500;font-size:1.5rem;color:var(--gold-hi)}
.hero .facts span{font-size:.85rem;opacity:.8}
.plate-stage{position:relative;max-width:560px;justify-self:center;width:100%}
.plate-stage{padding:0 0 12% 0}
.hero-photo{margin:0;border-radius:999px 999px 32px 32px;overflow:hidden;aspect-ratio:4/5;max-width:100%;width:82%;margin-left:auto;border:6px solid var(--gold);box-shadow:0 30px 60px rgba(0,0,0,.35)}
.hero-photo img,.hero-badge img{width:100%;height:100%;object-fit:cover;display:block}
.hero-photo img{object-position:60% 50%;animation:kenburns 18s ease-in-out infinite alternate}
@keyframes kenburns{to{transform:scale(1.08) translate(-2%,1%)}}
.hero-badge{margin:0;position:absolute;left:0;bottom:2%;width:44%;aspect-ratio:1;border-radius:50%;overflow:hidden;border:6px solid var(--kohl);box-shadow:0 20px 40px rgba(0,0,0,.35)}
.seal{position:absolute;right:-2%;top:30%;width:22%;height:auto;animation:spin 24s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.steam-svg{position:absolute;left:30%;top:-4%;width:50%;height:auto}
.steam path{fill:none;stroke:var(--kohl-ink);stroke-width:3;stroke-linecap:round;opacity:0;animation:steam 4.2s ease-in-out infinite}
.steam path:nth-child(2){animation-delay:1.4s}
.steam path:nth-child(3){animation-delay:2.8s}
@keyframes steam{0%{opacity:0;transform:translateY(16px)}30%{opacity:.5}100%{opacity:0;transform:translateY(-34px)}}
.tag-note{position:absolute;font-family:var(--f-hand);font-size:1.6rem;color:var(--gold-hi);line-height:1;transform:rotate(-6deg)}
.tag-note.n1{left:2%;top:10%}
.tag-note.n2{right:0;bottom:0;transform:rotate(-3deg)}
@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr;padding-block:2.5rem 5rem}
  .plate-stage{max-width:440px}
}

/* ---------- Ticker ---------- */
.ticker{background:var(--paper);border-block:1px solid var(--line);overflow:hidden}
.ticker-track{display:flex;gap:2.5rem;width:max-content;padding-block:1rem;animation:tick 38s linear infinite}
.ticker span{font-family:var(--f-display);font-size:1.5rem;white-space:nowrap;display:flex;align-items:center;gap:2.5rem}
.ticker span::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--gold)}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- Sections ---------- */
section{scroll-margin-top:84px}
.sec{padding-block:5.5rem}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem;align-items:end;margin-bottom:3rem}
.sec-head h2{font-size:clamp(2.3rem,5vw,3.8rem);margin-top:.6rem}
.sec-head p{color:var(--ink-soft);max-width:46ch}
@media (max-width:760px){.sec-head{grid-template-columns:1fr;gap:1rem}}

/* Produkte */
.products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem}
.product{background:var(--paper-2);border-radius:28px;padding:2rem;display:grid;grid-template-rows:auto auto 1fr auto;gap:1rem;position:relative;overflow:hidden}
.product .art{aspect-ratio:3/2;max-width:100%;border-radius:20px;overflow:hidden;margin:0}
.product .art img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.product:hover .art img{transform:scale(1.06)}
.product h3{font-size:2rem}
.product p{color:var(--ink-soft)}
.specs{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0}
.specs li{font-family:var(--f-mono);font-size:.8rem;padding:.35em .8em;border-radius:999px;border:1px solid var(--line);background:var(--paper)}
.badge-new{position:absolute;top:1.4rem;right:1.4rem;background:var(--beere);color:#fff;font:600 .75rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;padding:.5em .9em;border-radius:999px;transform:rotate(6deg)}
@media (max-width:760px){.products{grid-template-columns:1fr}.product{padding:1.4rem}}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem;margin-top:4rem;counter-reset:s}
.step{border-top:2px solid var(--ink);padding-top:1.2rem;display:grid;gap:.5rem}
.step::before{counter-increment:s;content:"Schritt " counter(s);font-family:var(--f-mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--beere)}
.step h3{font-size:1.6rem}
.step p{color:var(--ink-soft)}
@media (max-width:760px){.steps{grid-template-columns:1fr}}

/* Ofen */
.oven-sec{background:var(--ink);color:var(--paper)}
.oven-sec .sec-head p{color:color-mix(in srgb,var(--paper) 70%,transparent)}
.oven{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:2.5rem;align-items:center}
.oven-box{background:#2a2a2c;border-radius:26px;padding:1.2rem;box-shadow:inset 0 0 0 2px #444;position:relative}
.oven-top{display:flex;justify-content:space-between;align-items:center;padding:.2rem .4rem 1rem;gap:1rem}
.oven-display{font-family:var(--f-mono);font-size:clamp(2rem,6vw,3rem);color:#FF9B3D;text-shadow:0 0 12px rgba(255,140,40,.6);background:#140a06;padding:.1em .5em;border-radius:10px;font-variant-numeric:tabular-nums;letter-spacing:.04em}
.oven-temp{font-family:var(--f-mono);color:#ddd;font-size:.9rem;text-align:right}
.oven-temp b{display:block;font-size:1.6rem;color:#fff;font-weight:500}
.oven-window{border-radius:18px;background:#120806;aspect-ratio:16/9;max-width:100%;position:relative;overflow:hidden;box-shadow:inset 0 0 0 6px #1b1b1d}
.oven-window .glow{position:absolute;inset:0;background:radial-gradient(80% 70% at 50% 20%,rgba(255,150,40,.9),rgba(160,40,10,.4) 55%,transparent 80%);opacity:.15;transition:opacity 1s}
.oven-window .rack{position:absolute;left:6%;right:6%;top:72%;height:3px;background:#555;box-shadow:0 0 0 1px #333}
.oven-window svg{position:absolute;left:50%;top:70%;width:62%;transform:translate(-50%,-78%)}
.oven-window .coil{position:absolute;left:8%;right:8%;top:8%;height:6px;border-radius:6px;background:#5a1d0e;transition:background 1s, box-shadow 1s}
.oven.on .coil{background:#ff5a1f;box-shadow:0 0 18px #ff6a2a}
.controls{display:grid;gap:1.4rem}
.ctl-label{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-hi);margin-bottom:.5rem}
.seg{display:flex;flex-wrap:wrap;gap:.5rem}
.seg button{font:500 .95rem var(--f-body);padding:.7em 1.1em;border-radius:999px;border:1.5px solid color-mix(in srgb,var(--paper) 35%,transparent);background:transparent;color:var(--paper);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}
.progress{height:8px;border-radius:8px;background:color-mix(in srgb,var(--paper) 15%,transparent);overflow:hidden}
.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--beere))}
.oven-note{font-size:.95rem;color:color-mix(in srgb,var(--paper) 72%,transparent)}
.oven-actions{display:flex;flex-wrap:wrap;gap:.6rem}
.oven-actions .btn-ghost{color:var(--paper)}
@media (max-width:860px){.oven{grid-template-columns:1fr}}

/* Rezepte */
.recipes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem}
.recipe{all:unset;cursor:pointer;display:grid;grid-template-rows:auto 1fr;border-radius:24px;overflow:hidden;background:var(--paper-2);transition:transform .3s}
.recipe:hover{transform:translateY(-6px) rotate(-.4deg)}
.recipe:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.recipe .thumb{aspect-ratio:4/3;max-width:100%;display:grid;place-items:center;background:var(--tone,var(--gold))}
.recipe .thumb svg{width:70%;height:auto}
.recipe .thumb.photo{overflow:hidden}
.recipe .thumb.photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s}
.recipe:hover .thumb.photo img{transform:scale(1.06)}
.recipe .body{padding:1.3rem 1.4rem 1.5rem;display:grid;gap:.5rem;align-content:start}
.recipe h3{font-size:1.45rem;line-height:1.15}
.recipe .meta{display:flex;gap:1rem;font-family:var(--f-mono);font-size:.78rem;color:var(--ink-soft)}
.recipe.wide{grid-column:span 2;grid-template-columns:1fr 1fr;grid-template-rows:auto}
.recipe.wide .thumb{aspect-ratio:auto;height:100%;min-height:240px}
.recipe.full{grid-column:1/-1}
@media (max-width:900px){.recipes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.recipes{grid-template-columns:1fr}.recipe.wide,.recipe.full{grid-column:auto;grid-template-columns:1fr}.recipe.wide .thumb{min-height:0;aspect-ratio:4/3}}

dialog{border:0;padding:0;border-radius:28px;max-width:min(720px,calc(100% - 32px));width:100%;background:var(--paper);color:var(--ink);max-height:calc(100% - 48px)}
dialog::backdrop{background:rgba(30,10,25,.6);backdrop-filter:blur(4px)}
.dlg-inner{padding:2rem;display:grid;gap:1.4rem}
.dlg-inner h3{font-size:2rem;padding-right:3rem}
.dlg-close{position:absolute;top:1rem;right:1rem;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);background:var(--paper-2);color:var(--ink);font-size:1.4rem;cursor:pointer}
.dlg-cols{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:2rem}
.dlg-cols h4{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--beere);margin:0 0 .6rem}
.ing{list-style:none;margin:0;padding:0}
.ing li{display:flex;justify-content:space-between;gap:1rem;padding:.45rem 0;border-bottom:1px dashed var(--line);font-size:.98rem}
.ing li span:last-child{font-family:var(--f-mono);font-size:.85rem;color:var(--ink-soft);white-space:nowrap}
.dlg-cols ol{margin:0;padding-left:1.2rem;display:grid;gap:.7rem}
.hand{font-family:var(--f-hand);font-size:1.5rem;color:var(--beere);line-height:1.1}
@media (max-width:600px){.dlg-cols{grid-template-columns:1fr}.dlg-inner{padding:1.4rem}}

/* Fotoband */
.band{position:relative;overflow:hidden;color:#FBEFD9;background:#1B0F17}
.band img{position:absolute;left:0;top:-12%;width:100%;height:124%;object-fit:cover}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(27,15,23,.85),rgba(27,15,23,.15) 70%)}
.band .wrap{position:relative;z-index:1;padding-block:clamp(6rem,16vw,11rem)}
.band p{font-family:var(--f-display);font-size:clamp(2.4rem,6vw,4.8rem);line-height:1.02;max-width:12ch}
.band p span{color:#FFD372}

/* Qualität */
.quality{background:var(--paper-2)}
.q-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3rem;align-items:start}
.pledges{list-style:none;margin:0;padding:0;display:grid;gap:0}
.pledges li{display:grid;grid-template-columns:44px 1fr;gap:1rem;padding:1.1rem 0;border-bottom:1px solid var(--line)}
.pledges li:first-child{border-top:1px solid var(--line)}
.pledges svg{width:40px;height:40px}
.pledges b{font-family:var(--f-display);font-weight:400;font-size:1.35rem;display:block;line-height:1.2}
.pledges span{color:var(--ink-soft);font-size:.96rem}
.route{background:var(--paper);border-radius:28px;padding:1.6rem}
.route svg{width:100%;height:auto;display:block}
.route .path{stroke-dasharray:6 8;animation:march 1.4s linear infinite}
@keyframes march{to{stroke-dashoffset:-28}}
.route figcaption{margin-top:1rem;color:var(--ink-soft);font-size:.95rem}
.nutri{margin-top:2rem;border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
.nutri caption{text-align:left;font-family:var(--f-mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--beere);padding-bottom:.6rem}
.nutri td{padding:.55rem 0;border-bottom:1px solid var(--line)}
.nutri td:last-child{text-align:right;font-family:var(--f-mono)}
@media (max-width:860px){.q-grid{grid-template-columns:1fr}}

/* Über uns */
.about .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:3rem;align-items:center}
.about blockquote{margin:0;font-family:var(--f-display);font-size:clamp(1.8rem,3.6vw,2.8rem);line-height:1.15}
.about blockquote::before{content:"„";color:var(--gold);display:block;font-size:4rem;line-height:.6}
.about .copy{display:grid;gap:1rem;color:var(--ink-soft)}
.about .sig{font-family:var(--f-hand);font-size:1.8rem;color:var(--ink)}
@media (max-width:860px){.about .wrap{grid-template-columns:1fr}}

/* Kontakt */
.contact{background:var(--kohl);color:var(--kohl-ink)}
.contact .wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:3rem}
.contact h2{font-size:clamp(2.3rem,5vw,3.8rem);margin-block:.6rem 1.4rem}
.addr{display:grid;gap:1rem;font-size:1.05rem}
.addr div{display:grid;gap:.1rem}
.addr small{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-hi)}
.addr .copyable{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.copy-btn{font:500 .78rem var(--f-mono);background:transparent;color:inherit;border:1px solid color-mix(in srgb,var(--kohl-ink) 40%,transparent);border-radius:999px;padding:.2em .7em;cursor:pointer}
.gg-form{display:grid;grid-template-columns:1fr 1fr;gap:1rem;background:var(--paper);color:var(--ink);padding:1.8rem;border-radius:28px}
.gg-form .full{grid-column:1/-1}
.gg-form label{display:grid;gap:.35rem;font-size:.85rem;font-weight:600}
.gg-form input,.gg-form textarea{font:400 1rem var(--f-body);padding:.85em 1em;border-radius:14px;border:1.5px solid var(--line);background:var(--paper-2);color:var(--ink);width:100%}
.gg-form input:focus,.gg-form textarea:focus{outline:none;border-color:var(--gold)}
.gg-form textarea{min-height:120px;resize:vertical}
.form-msg{grid-column:1/-1;font-size:.95rem}
@media (max-width:860px){.contact .wrap{grid-template-columns:1fr}}
@media (max-width:520px){.gg-form{grid-template-columns:1fr;padding:1.2rem}}

/* Footer */
.foot{background:var(--ink);color:var(--paper)}
.foot .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.4rem;padding-block:2.2rem}
.foot nav{display:flex;flex-wrap:wrap;gap:1.4rem;font-size:.95rem}
.foot small{opacity:.7}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .logo .ring{stroke-dashoffset:0}
  .ticker-track{animation:none}
}


/* ---------- WordPress-Ergänzungen ---------- */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important}
.skip-link:focus{clip:auto;clip-path:none;height:auto;width:auto;left:1rem;top:1rem;z-index:100;background:var(--gold);color:var(--on-gold);padding:.8rem 1.2rem;border-radius:999px;margin:0}
.admin-bar .site-head{top:32px}
@media (max-width:782px){.admin-bar .site-head{top:46px}}
@media (max-width:600px){.admin-bar .site-head{top:0}}
.brand .custom-logo{width:auto;height:58px;max-width:180px;object-fit:contain;display:block}
.gg-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.gg-form .consent{display:flex;gap:.6rem;align-items:flex-start;font-weight:400;font-size:.85rem}
.gg-form .consent input{width:auto;margin-top:.2rem;flex:none}
.gg-form .consent a{color:var(--beere)}
.form-msg.ok{color:#2E7D32}
.form-msg.err{color:var(--beere)}

/* Unterseiten (Impressum, Datenschutz, Beiträge) */
.page-sec{padding-block:clamp(3rem,8vw,6rem)}
.page-sec .wrap{max-width:820px}
.page-sec h1{font-size:clamp(2.4rem,6vw,4rem);margin:.6rem 0 2rem}
.entry{display:grid;gap:1.1rem}
.entry h2{font-size:clamp(1.6rem,3vw,2.2rem);margin-top:1.2rem}
.entry h3{font-size:1.4rem;margin-top:.8rem}
.entry a{color:var(--beere)}
.entry img{max-width:100%;height:auto;border-radius:16px}
.entry ul,.entry ol{margin:0;padding-left:1.3rem;display:grid;gap:.4rem}
.post-list{display:grid;gap:2rem}
.post-list article{padding-bottom:2rem;border-bottom:1px solid var(--line)}
.post-list h2{font-size:1.8rem;margin:.4rem 0 .8rem}
.post-list h2 a{text-decoration:none}
.pagination{display:flex;gap:1rem;margin-top:2rem;font-family:var(--f-mono)}
.alignwide{max-width:1100px}
.aligncenter{margin-inline:auto}
.wp-caption-text,.wp-element-caption{font-size:.9rem;color:var(--ink-soft)}