/* ==========================================================================
Die Hofröster — Design System
Barista-Ästhetik (Qode/Elementor): Vollbild-Hero mit transparentem Header,
gerissene Papierkanten zwischen den Sektionen, nummerierte Blöcke,
Linien-Icons, goldene Akzentflächen und eine dunkle Preisliste.
Oswald für Headlines, Merriweather kursiv als Vorspann, Open Sans im Text.
========================================================================== */
/* Schriften: /assets/fonts/hofroester/fonts.css wird direkt im geladen. */
:root {
/* Farben */
--c-ink: #30271c;
--c-ink-soft: #5c5245;
--c-bg: #ffffff;
--c-bg-alt: #eeebe1;
--c-surface: #f6f4ee;
--c-dark: #211a12;
--c-gold: #c7a17a;
--c-gold-dark: #a8825b;
--c-gold-soft: rgba(199, 161, 122, 0.14);
--c-muted: #8a8074;
--c-line: #e3ded1;
--c-line-light: rgba(255, 255, 255, 0.14);
--c-ok: #4b7a3f;
--c-warn: #b4741f;
--c-err: #b23b32;
/* Bewegung -- einheitliche Dauer und Kurve fuer alle Zustandswechsel */
--t-fast: .22s;
--t-slow: .38s;
--ease: cubic-bezier(.4, 0, .2, 1);
/* Typografie */
--f-display: 'Oswald', 'Impact', sans-serif;
--f-body: 'Open Sans', -apple-system, 'Segoe UI', sans-serif;
--f-serif: 'Merriweather', Georgia, serif;
/* Maße */
--w-max: 1300px;
--w-narrow: 820px;
--topbar-h: 36px;
--header-h: 84px;
--top-h: 120px; /* topbar + header */
--radius: 0px;
--shadow: 0 18px 48px rgba(48, 39, 28, 0.10);
--shadow-sm: 0 6px 20px rgba(48, 39, 28, 0.07);
}
/* --------------------------------------------------------------- Reset */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 3px; }
body {
margin: 0;
background: var(--c-bg);
color: var(--c-ink-soft);
font-family: var(--f-body);
font-size: 15px;
line-height: 1.85;
font-weight: 400;
overflow-x: hidden;
}
/* Seiten ohne Bild-Kopf brauchen Platz unter dem fixierten Header */
body:not(.has-hero) { padding-top: var(--top-h); }
body.menu-open { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
figure { margin: 0; }
h1, h2, h3, h4, h5 {
font-family: var(--f-display);
font-weight: 600;
color: var(--c-ink);
letter-spacing: 0.01em;
line-height: 1.12;
margin: 0 0 0.5em;
text-transform: uppercase;
}
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
h3 { font-size: 1.15rem; letter-spacing: 0.03em; }
h4 { font-size: 0.9rem; letter-spacing: 0.12em; }
p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }
::selection { background: var(--c-gold); color: #fff; }
:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 3px; }
/* --------------------------------------------------------------- Layout */
.container { width: 100%; max-width: var(--w-max); margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: var(--w-narrow); }
.container-wide { max-width: 1560px; }
.section { padding: clamp(64px, 8vw, 118px) 0; }
.section-sm { padding: clamp(36px, 4vw, 60px) 0; }
.section-alt { background: var(--c-bg-alt); }
.section-dark { background: var(--c-dark); color: rgba(255, 255, 255, 0.72); }
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: #fff; }
.text-center { text-align: center; }
.stack > * + * { margin-top: 18px; }
/* Felder tragen in den Formularen style="margin:0" (gegen den Unterabstand
in .row) – das darf den Abstand zum Feld darueber nicht wegnehmen. */
.stack > * + .field { margin-top: 18px !important; }
/* Kursiver Serif-Vorspann */
.eyebrow, .script {
display: block;
font-family: var(--f-serif);
font-style: italic;
font-weight: 300;
font-size: 1.05rem;
letter-spacing: 0;
text-transform: none;
color: var(--c-gold-dark);
margin-bottom: 10px;
line-height: 1.5;
}
.section-dark .eyebrow, .hero .eyebrow, .page-hero .eyebrow, .band .eyebrow { color: var(--c-gold); }
/* Kurze goldene Linie unter zentrierten Überschriften */
.rule { width: 74px; height: 1px; background: var(--c-gold); border: 0; margin: 22px 0 28px; }
.rule-center { margin-left: auto; margin-right: auto; }
.lead { font-size: 1.02rem; line-height: 1.95; color: var(--c-muted); }
.section-dark .lead, .band .lead { color: rgba(255, 255, 255, 0.7); }
.section-head { max-width: 720px; margin-bottom: 56px; }
.section-head.text-center { margin-left: auto; margin-right: auto; }
.widget-title {
font-family: var(--f-display);
font-size: 0.95rem;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--c-ink);
padding-bottom: 12px;
margin: 0 0 18px;
border-bottom: 1px solid var(--c-line);
}
/* --------------------------------------------------------------- Gerissene Papierkante */
.torn { position: relative; }
.torn::after {
content: '';
position: absolute;
left: -1px; right: -1px; bottom: -1px;
height: 46px;
z-index: 4;
pointer-events: none;
background: var(--torn-fill, #ffffff);
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / 100% 100%;
mask: url("data:image/svg+xml;utf8,") no-repeat center / 100% 100%;
}
/* Die Kante ist links/rechts 1px breiter (gegen Haarlinien) – seitlich
abschneiden, sonst wird die Seite 1px breiter als der Bildschirm. */
.torn, .torn-top { overflow-x: clip; }
.torn-cream { --torn-fill: var(--c-bg-alt); }
.torn-white { --torn-fill: #ffffff; }
.torn-dark { --torn-fill: var(--c-dark); }
.torn-gold { --torn-fill: var(--c-gold); }
/* Dieselbe Kante nach oben -- gespiegelt, damit ein Abschnitt oben und unten
gerissen wirkt (z. B. das Foto-Band). Fuellfarbe ist der Abschnitt darueber. */
.torn-top { position: relative; }
.torn-top::before {
content: '';
position: absolute;
left: -1px; right: -1px; top: -1px;
height: 46px;
z-index: 4;
pointer-events: none;
transform: scaleY(-1);
background: var(--torn-top-fill, #ffffff);
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / 100% 100%;
mask: url("data:image/svg+xml;utf8,") no-repeat center / 100% 100%;
}
.torn-top-cream { --torn-top-fill: var(--c-bg-alt); }
.torn-top-white { --torn-top-fill: #ffffff; }
.torn-top-dark { --torn-top-fill: var(--c-dark); }
/* --------------------------------------------------------------- Instagram-Feed */
/* LightWidget haengt sein Beitrags-Overlay per postMessage in unsere Seite --
mit position:fixed und z-index:100. Damit landet es unter der festen
Kopfleiste (.site-top, z-index 300). Hier ueber sie ziehen. */
.lightwidget__lightbox { z-index: 950 !important; }
.ig-embed { min-height: 120px; }
.ig-embed-gate {
padding: 24px 0 8px;
text-align: center;
max-width: 620px;
margin: 0 auto;
}
.ig-embed-gate p { margin: 0 0 20px; }
.ig-embed-note { font-size: 0.85rem; color: var(--c-muted); margin: 18px 0 0; }
.ig-embed .lightwidget-widget { display: block; }
/* --------------------------------------------------------------- Bewegung */
/* Einblenden beim Scrollen. Versteckt wird nur, wenn motion.js laeuft --
ohne JavaScript bleibt alles sichtbar. */
.has-motion [data-reveal] {
opacity: 0;
transform: translateY(20px);
transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.has-motion [data-reveal].is-in { opacity: 1; transform: none; }
/* Seitenkopf-Auftritt beim Laden */
.hero-inner, .page-hero .container {
animation: rise-in .9s var(--ease) both;
}
.hero-actions { animation: rise-in .9s var(--ease) .18s both; }
@keyframes rise-in {
from { opacity: 0; transform: translateY(22px); }
to { opacity: 1; transform: none; }
}
/* Farb- und Randwechsel laufen ueberall gleich weich ab -- ohne das springen
Hover- und Aktiv-Zustaende hart um. */
a, button, input, select, textarea, summary,
.h-icon, .product-card, .vp-opt, .deliv-opt, .dsm-opt, .ds-opt, .pay-opt, .thumbs img {
transition:
color var(--t-fast) var(--ease),
background-color var(--t-fast) var(--ease),
border-color var(--t-fast) var(--ease),
opacity var(--t-fast) var(--ease);
}
/* Sanfter Seitenwechsel (Chrome, Edge, Safari). Browser ohne Unterstuetzung
wechseln wie bisher -- es braucht keinen Fallback. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: page-out .16s var(--ease) both; }
::view-transition-new(root) { animation: page-in var(--t-slow) var(--ease) both; }
@keyframes page-out { to { opacity: 0; } }
@keyframes page-in { from { opacity: 0; } }
/* --------------------------------------------------------------- Buttons */
.btn {
--btn-bg: var(--c-gold);
--btn-fg: #fff;
--btn-bd: var(--c-gold);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 15px 38px;
background: var(--btn-bg);
color: var(--btn-fg);
border: 1px solid var(--btn-bd);
border-radius: var(--radius);
font-family: var(--f-display);
font-size: 0.76rem;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
cursor: pointer;
transition: background .22s ease, color .22s ease, border-color .22s ease;
white-space: nowrap;
}
.btn { transform: translateZ(0); }
.btn:hover { --btn-bg: var(--c-ink); --btn-bd: var(--c-ink); --btn-fg: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(48, 39, 28, 0.16); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-accent { --btn-bg: var(--c-gold); --btn-bd: var(--c-gold); --btn-fg: #fff; }
.btn-outline { --btn-bg: transparent; --btn-fg: var(--c-ink); --btn-bd: var(--c-line); }
.btn-outline:hover { --btn-bg: var(--c-gold); --btn-fg: #fff; --btn-bd: var(--c-gold); }
.btn-ghost { --btn-bg: transparent; --btn-fg: var(--c-muted); --btn-bd: transparent; padding-left: 8px; padding-right: 8px; }
.btn-ghost:hover { --btn-bg: transparent; --btn-fg: var(--c-gold-dark); --btn-bd: transparent; }
.btn-light { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,.65); }
.btn-light:hover { --btn-bg: #fff; --btn-fg: var(--c-ink); --btn-bd: #fff; }
.btn-sm { padding: 11px 24px; font-size: 0.68rem; }
.btn-block { width: 100%; }
.btn-invoice { --btn-bg: transparent; --btn-fg: var(--c-ink); --btn-bd: var(--c-line); }
/* Auf dunklem Grund wird der Umriss-Button hell, sonst verschwindet er */
.section-dark .btn-outline, .band .btn-outline { --btn-fg: #fff; --btn-bd: rgba(255,255,255,.65); }
.section-dark .btn-outline:hover, .band .btn-outline:hover { --btn-bg: #fff; --btn-fg: var(--c-ink); --btn-bd: #fff; }
/* "MEHR ERFAHREN →" */
.link-u {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--f-display);
font-size: 0.74rem;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--c-gold-dark);
transition: gap .22s ease, color .22s ease;
}
.link-u::after { content: '→'; font-size: 1rem; line-height: 1; }
.link-u:hover { gap: 16px; color: var(--c-ink); }
.section-dark .link-u, .band .link-u { color: #fff; }
/* --------------------------------------------------------------- Kopfbereich */
.site-top {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 300;
transition: background .3s ease, box-shadow .3s ease;
background: var(--c-bg-alt);
}
/* Über einem Bild-Kopf startet die Leiste transparent … */
body.has-hero .site-top { background: transparent; }
body.has-hero .site-top .topbar { background: rgba(0, 0, 0, 0.28); }
body.has-hero .site-top .site-header { background: transparent; border-bottom-color: rgba(255, 255, 255, 0.14); }
body.has-hero .site-top .nav a,
body.has-hero .site-top .h-icon,
body.has-hero .site-top .mobile-toggle { color: #fff; }
body.has-hero .site-top .header-icons { border-left-color: rgba(255, 255, 255, 0.22); }
body.has-hero .site-top .logo-dark { display: none; }
body.has-hero .site-top .logo-light { display: block; }
/* … und wird beim Scrollen zur festen Creme-Leiste. */
.site-top.is-stuck {
background: color-mix(in srgb, var(--c-bg-alt) 88%, transparent);
-webkit-backdrop-filter: saturate(150%) blur(12px);
backdrop-filter: saturate(150%) blur(12px);
box-shadow: 0 2px 18px rgba(48, 39, 28, 0.09);
}
@supports not (backdrop-filter: blur(1px)) {
.site-top.is-stuck { background: var(--c-bg-alt); }
}
body.has-hero .site-top.is-stuck .topbar { background: var(--c-dark); }
body.has-hero .site-top.is-stuck .site-header { background: var(--c-bg-alt); border-bottom-color: rgba(48, 39, 28, 0.07); }
body.has-hero .site-top.is-stuck .nav a,
body.has-hero .site-top.is-stuck .h-icon,
body.has-hero .site-top.is-stuck .mobile-toggle { color: var(--c-ink); }
body.has-hero .site-top.is-stuck .header-icons { border-left-color: var(--c-line); }
body.has-hero .site-top.is-stuck .logo-dark { display: block; }
body.has-hero .site-top.is-stuck .logo-light { display: none; }
.logo-light { display: none; }
.topbar {
background: var(--c-dark);
color: rgba(255, 255, 255, 0.6);
font-size: 0.71rem;
letter-spacing: 0.1em;
text-transform: uppercase;
font-family: var(--f-display);
font-weight: 300;
transition: background .3s ease;
}
.topbar .container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
min-height: var(--topbar-h);
max-width: 1560px;
}
.topbar a { color: rgba(255, 255, 255, 0.8); }
.topbar a:hover { color: var(--c-gold); }
.topbar-hours strong { color: var(--c-gold); font-weight: 500; }
.topbar-right { display: flex; gap: 22px; align-items: center; }
.site-header { border-bottom: 1px solid rgba(48, 39, 28, 0.07); transition: background .3s ease; }
.header-main {
max-width: 1560px;
margin: 0 auto;
padding: 0 30px;
min-height: var(--header-h);
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 24px;
}
.logo-center { display: flex; align-items: center; }
.logo-center img { height: 50px; width: auto; }
.nav { justify-self: end; }
.nav ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav a {
display: block;
padding: 10px 15px;
font-family: var(--f-display);
font-size: 0.8rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--c-ink);
transition: color .2s;
}
.nav a { position: relative; }
.nav a::after {
content: '';
position: absolute;
left: 15px; right: 15px; bottom: 4px;
height: 1px;
background: currentColor;
transform: scaleX(0);
transform-origin: left;
transition: transform var(--t-fast) var(--ease);
}
.nav a:hover::after, .nav a.active::after { transform: scaleX(1); }
.nav a:hover, .nav a.active { color: var(--c-gold) !important; }
.nav .sub { display: none; }
.header-icons {
display: flex;
align-items: center;
gap: 2px;
justify-self: end;
padding-left: 22px;
margin-left: 4px;
border-left: 1px solid var(--c-line);
}
.h-icon {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px; height: 40px;
border: 0;
background: transparent;
cursor: pointer;
color: var(--c-ink);
transition: color .2s;
}
.h-icon:hover { color: var(--c-gold) !important; }
.h-icon svg { width: 20px; height: 20px; fill: currentColor; }
.cart-count, .wishlist-count {
position: absolute;
top: 3px; right: 1px;
min-width: 16px; height: 16px;
padding: 0 4px;
background: var(--c-gold);
color: #fff;
font-family: var(--f-body);
font-size: 0.6rem;
font-weight: 700;
display: none;
align-items: center;
justify-content: center;
line-height: 1;
}
.cart-count[style*="inline-flex"], .wishlist-count:not([hidden]) { display: inline-flex; }
.account-dot { position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--c-ok); }
.mobile-toggle {
display: none;
width: 40px; height: 40px;
background: transparent;
border: 0;
color: var(--c-ink);
font-size: 1.4rem;
cursor: pointer;
}
/* Mobile Navigation */
.nav-mobile {
position: fixed;
inset: 0 0 0 auto;
width: min(340px, 88vw);
background: var(--c-dark);
transform: translateX(100%);
transition: transform .34s cubic-bezier(.4, 0, .2, 1);
z-index: 400;
padding: 84px 30px 30px;
overflow-y: auto;
display: none;
}
.nav-mobile.open { transform: translateX(0); }
.nav-mobile ul { list-style: none; margin: 0; padding: 0; }
.nav-mobile li { border-bottom: 1px solid rgba(255, 255, 255, 0.09); }
.nav-mobile a { display: block; padding: 16px 0; color: #fff; }
.nav-mobile .lbl { font-family: var(--f-display); font-size: 1rem; letter-spacing: 0.12em; text-transform: uppercase; }
.nav-mobile .sub { display: block; font-family: var(--f-serif); font-style: italic; font-size: 0.78rem; color: var(--c-gold); text-transform: none; margin-top: 2px; }
.nav-mobile-close {
position: absolute;
top: 22px; right: 24px;
width: 40px; height: 40px;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.2);
color: #fff;
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
}
.nav-mobile-foot { margin-top: 32px; font-family: var(--f-display); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); }
.nav-mobile-foot a { display: block; color: var(--c-gold); font-size: 0.95rem; padding: 6px 0 0; }
/* --------------------------------------------------------------- Vollbild-Hero */
.hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: #fff;
overflow: hidden;
padding: calc(var(--top-h) + 40px) 0 90px;
}
.hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; }
.hero-bg::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(20,16,11,.55) 0%, rgba(20,16,11,.35) 45%, rgba(20,16,11,.6) 100%);
}
.hero .container { position: relative; z-index: 2; }
.hero-inner { max-width: 900px; margin: 0 auto; }
.hero-badge { width: clamp(96px, 12vw, 150px); margin: 0 auto 26px; opacity: .92; filter: brightness(0) invert(1); }
.hero h1 {
color: #fff;
font-size: clamp(2.4rem, 7vw, 5.4rem);
font-weight: 700;
letter-spacing: 0.005em;
margin-bottom: 20px;
text-shadow: 0 2px 30px rgba(0, 0, 0, .35);
}
.hero-sub {
font-family: var(--f-serif);
font-style: italic;
font-weight: 300;
font-size: clamp(1rem, 1.6vw, 1.25rem);
color: rgba(255, 255, 255, 0.92);
max-width: 620px;
margin: 0 auto 34px;
line-height: 1.75;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.hero-scroll {
position: absolute;
left: 50%; bottom: 78px;
transform: translateX(-50%);
z-index: 3;
display: flex;
gap: 9px;
}
.hero-scroll span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .45); }
.hero-scroll span.on { background: #fff; }
/* Startseite: unten im Titelbild steht die Ueberschrift der Standbeine,
darunter laufen deren Bahnen mit der Welle ins Bild (.hof--flush). */
.hero--flow { flex-direction: column; padding-bottom: calc(46px + 30px); }
.hero--flow > .container { margin-block: auto; }
.hero-next {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
margin-top: 48px;
padding: 0 24px;
color: #fff;
}
.hero-next .eyebrow { color: var(--c-gold); margin-bottom: 6px; }
.hero-next h2 {
display: flex;
align-items: center;
gap: clamp(14px, 2vw, 24px);
color: #fff;
font-size: clamp(1.45rem, 3vw, 2.6rem);
text-align: center;
margin: 0;
text-shadow: 0 2px 24px rgba(0, 0, 0, .4);
}
.hero-next h2::before, .hero-next h2::after { content: ''; flex: none; width: clamp(24px, 6vw, 90px); height: 1px; background: var(--c-gold); }
.hero-next-arrow {
width: 22px; height: 22px;
margin-top: 14px;
fill: none;
stroke: var(--c-gold);
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
animation: hero-nudge 2.4s var(--ease) infinite;
}
.hero-next:hover .hero-next-arrow { stroke: #fff; }
@keyframes hero-nudge { 0%, 100% { transform: none; } 50% { transform: translateY(6px); } }
@media (max-width: 960px) { .hero--flow { padding-bottom: calc(28px + 26px); } }
@media (prefers-reduced-motion: reduce) { .hero-next-arrow { animation: none; } }
/* Seitenkopf der Unterseiten */
.page-hero {
position: relative;
color: #fff;
text-align: center;
padding: calc(var(--top-h) + 60px) 0 clamp(80px, 8vw, 120px);
overflow: hidden;
}
.page-hero .hero-bg::after { background: linear-gradient(180deg, rgba(20,16,11,.62), rgba(20,16,11,.7)); }
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1, .page-hero h2 { color: #fff; margin-bottom: 0; }
.page-hero p { color: rgba(255, 255, 255, 0.82); max-width: 620px; margin: 18px auto 0; }
.page-hero .rule { margin-left: auto; margin-right: auto; }
/* Unruhiges, helles Hintergrundfoto: dunkler abdecken, Unterzeile groesser und mit Schatten */
.page-hero--contrast .hero-bg::after { background: linear-gradient(180deg, rgba(20,16,11,.72), rgba(20,16,11,.8)); }
.page-hero--contrast p { color: #fff; font-size: clamp(1.05rem, 1.6vw, 1.25rem); text-shadow: 0 1px 12px rgba(0, 0, 0, .55); }
/* --------------------------------------------------------------- Breadcrumb */
.breadcrumb { font-family: var(--f-serif); font-style: italic; font-size: 0.85rem; color: var(--c-muted); padding: 26px 0; }
.breadcrumb a:hover { color: var(--c-gold-dark); }
.breadcrumb .sep { margin: 0 9px; opacity: .45; }
/* --------------------------------------------------------------- Nummerierte Blöcke */
.numbered-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 48px); }
.numbered { display: flex; flex-direction: column; height: 100%; }
.numbered img { width: 100%; aspect-ratio: 4/3; object-fit: cover; margin-bottom: 26px; }
.numbered .link-u { margin-top: auto; align-self: flex-start; }
.numbered-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 14px; }
.numbered-num {
font-family: var(--f-serif);
font-style: italic;
font-weight: 300;
font-size: 2.6rem;
line-height: 1;
color: var(--c-gold);
}
.numbered-head h3 { margin: 0; font-size: 1.15rem; letter-spacing: 0.04em; }
.numbered p { color: var(--c-muted); margin-bottom: 20px; }
/* --------------------------------------------------------------- Foto-Band */
.band {
position: relative;
color: rgba(255, 255, 255, 0.8);
padding: clamp(110px, 12vw, 190px) 0;
overflow: hidden;
}
.band .hero-bg::after { background: linear-gradient(90deg, rgba(20,16,11,.88) 0%, rgba(20,16,11,.72) 45%, rgba(20,16,11,.55) 100%); }
/* Zentrierte Bänder (Preisliste) brauchen eine gleichmäßige, kräftige Abdeckung */
.band.section-dark .hero-bg::after { background: rgba(20, 16, 11, 0.86); }
.band .container { position: relative; z-index: 2; }
.band h2 { color: #fff; }
.band-inner { max-width: 560px; }
.band-badge { width: 110px; margin-bottom: 24px; opacity: .9; filter: brightness(0) invert(1); }
/* --------------------------------------------------------------- Icon-Reihe */
.feature-row, .icon-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: clamp(28px, 3vw, 46px); }
.feature, .icon-cell { text-align: center; padding: 0 8px; }
.feature-icon, .icon-cell-icon { width: 66px; height: 66px; margin: 0 auto 20px; color: var(--c-gold); }
.feature-icon svg, .icon-cell-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.feature h3, .icon-cell h3 { font-size: 1rem; letter-spacing: 0.06em; margin-bottom: 12px; }
.feature p, .icon-cell p { font-size: 0.92rem; color: var(--c-muted); margin: 0; }
/* --------------------------------------------------------------- Preisliste */
.pricelist {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px clamp(30px, 4vw, 64px);
}
.price-item { display: flex; gap: 20px; align-items: flex-start; padding: 14px 0; }
.price-item img { width: 78px; height: 78px; object-fit: cover; flex: 0 0 auto; background: rgba(255,255,255,.06); }
.price-item-body { flex: 1; min-width: 0; }
.price-item-top { display: flex; align-items: baseline; gap: 12px; }
.price-item-top h3 {
margin: 0;
min-width: 0;
font-size: 1rem;
letter-spacing: 0.04em;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.price-item-top::after { content: ''; flex: 1; border-bottom: 1px solid rgba(255, 255, 255, 0.22); transform: translateY(-4px); }
.price-item-price { font-family: var(--f-display); font-size: 1.05rem; color: #fff; white-space: nowrap; order: 3; flex-shrink: 0; }
.price-item-desc { font-family: var(--f-serif); font-style: italic; font-weight: 300; font-size: 0.88rem; color: var(--c-gold); margin: 4px 0 0; }
.price-tag {
display: inline-block;
background: var(--c-gold);
color: #fff;
font-family: var(--f-serif);
font-style: italic;
font-size: 0.72rem;
padding: 1px 10px;
margin-left: 8px;
}
/* --------------------------------------------------------------- Split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 76px); align-items: center; }
.split-top { align-items: start; }
.split-media { position: relative; }
.split-media img { width: 100%; object-fit: cover; }
.split-media.framed::before { content: ''; position: absolute; inset: 18px -18px -18px 18px; border: 1px solid var(--c-gold); z-index: -1; }
.split-stack { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.split-stack img { aspect-ratio: 3/4; object-fit: cover; width: 100%; }
.split-stack img:first-child { margin-top: 30px; }
.circle-stack { display: grid; gap: 26px; justify-items: center; }
.circle-stack img { width: min(300px, 78%); aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 5px solid #fff; box-shadow: var(--shadow); }
.circle-stack img:nth-child(2) { justify-self: end; margin-right: 8%; }
.circle-stack img:nth-child(3) { justify-self: start; margin-left: 8%; }
/* --------------------------------------------------------------- Produktkarten */
.products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 44px 30px; }
.product-card { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--c-line); transition: transform var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease); }
.product-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(48, 39, 28, 0.12); }
.pc-media, .product-card .img-wrap { position: relative; display: block; background: var(--c-surface); overflow: hidden; }
.pc-media img, .product-card .img-wrap img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .3, 1); }
.product-card:hover .pc-media img, .product-card:hover .img-wrap img { transform: scale(1.05); }
.pc-flag {
position: absolute;
top: 0; left: 0;
background: var(--c-gold);
color: #fff;
font-family: var(--f-display);
font-size: 0.66rem;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 7px 15px;
}
.pc-body, .product-card .body { padding: 18px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.pc-cat { display: block; font-family: var(--f-serif); font-style: italic; font-size: 0.8rem; color: var(--c-muted); margin-bottom: 6px; }
.pc-title, .product-card h3 {
font-family: var(--f-display);
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.03em;
text-transform: uppercase;
line-height: 1.35;
color: var(--c-ink);
margin: 0 0 8px;
}
.pc-title a:hover, .product-card h3 a:hover { color: var(--c-gold-dark); }
.pc-price, .product-card .price { font-family: var(--f-serif); font-size: 1.1rem; font-weight: 400; color: var(--c-gold-dark); margin: 0 0 16px; }
.pc-from { font-family: var(--f-body); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--c-muted); margin-right: 5px; }
.pc-actions, .product-card .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.pc-actions .btn, .product-card .actions .btn { padding: 11px 22px; font-size: 0.68rem; letter-spacing: 0.14em; }
.badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.badge { display: inline-block; font-family: var(--f-display); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; padding: 5px 12px; border: 1px solid var(--c-line); color: var(--c-muted); }
.badge.bio { background: var(--c-gold); border-color: var(--c-gold); color: #fff; }
.badge.bundle { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
/* --------------------------------------------------------------- Shop */
.shop-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: clamp(32px, 4vw, 62px); align-items: start; }
.shop-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 34px; }
.shop-count { font-family: var(--f-serif); font-style: italic; font-size: 0.92rem; color: var(--c-muted); }
.shop-sort { font-family: var(--f-serif); font-style: italic; font-size: 0.92rem; padding: 9px 14px; border: 1px solid var(--c-line); background: #fff; color: var(--c-ink-soft); }
.shop-tools { display: flex; flex-wrap: wrap; gap: 10px; }
.shop-search { font-family: var(--f-serif); font-style: italic; font-size: 0.92rem; padding: 9px 14px; border: 1px solid var(--c-line); background: #fff; color: var(--c-ink-soft); width: 220px; max-width: 100%; }
.shop-search:focus, .shop-sort:focus { outline: none; border-color: var(--c-gold); }
.shop-side { position: sticky; top: calc(var(--top-h) + 20px); }
.side-promo { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; min-height: 210px; padding: 26px 24px; color: #fff; background: linear-gradient(180deg, rgba(33,26,18,.15), rgba(33,26,18,.85)), url('/assets/img/hof/roesterei/rohkaffee-saecke.jpg') center / cover; overflow: hidden; }
.side-promo h3 { color: #fff; margin: 0; }
.side-promo .eyebrow { color: var(--c-gold); }
.side-promo .link-u { color: #fff; margin-top: 8px; align-self: flex-start; }
.side-promo:hover .link-u { color: var(--c-gold); }
.shop-widget { margin-bottom: 40px; }
.shop-widget ul { list-style: none; margin: 0; padding: 0; }
.cat-filter { display: flex; flex-direction: column; gap: 1px; }
.cat-filter button {
background: transparent;
border: 0;
border-bottom: 1px solid var(--c-line);
padding: 11px 2px;
text-align: left;
font-family: var(--f-display);
font-size: 0.78rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--c-ink-soft);
cursor: pointer;
transition: color .2s, padding-left .2s;
}
.cat-filter button:hover { color: var(--c-gold-dark); padding-left: 8px; }
.cat-filter button.active { color: var(--c-gold-dark); font-weight: 600; }
.mini-list { display: grid; gap: 16px; }
.mini-item { display: flex; gap: 14px; align-items: center; }
.mini-item img { width: 66px; height: 66px; object-fit: cover; background: var(--c-surface); flex: 0 0 auto; }
.mini-item strong { display: block; font-family: var(--f-display); font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-ink); line-height: 1.35; }
.mini-item span { font-family: var(--f-serif); font-size: 0.9rem; color: var(--c-gold-dark); }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-cloud a, .tag-cloud button {
font-family: var(--f-serif);
font-style: italic;
font-size: 0.86rem;
color: var(--c-ink-soft);
border: 1px solid var(--c-line);
background: transparent;
padding: 5px 13px;
cursor: pointer;
transition: all .2s;
}
.tag-cloud a:hover, .tag-cloud button:hover, .tag-cloud button.active { border-color: var(--c-gold); color: var(--c-gold-dark); }
/* --------------------------------------------------------------- Produktdetail */
.product-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 4.5vw, 64px); align-items: start; }
.gallery-main { background: var(--c-surface); overflow: hidden; }
.gallery-main img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.thumbs { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.thumbs img { width: 80px; height: 80px; object-fit: cover; background: var(--c-surface); cursor: pointer; opacity: .6; transition: opacity .2s; }
.thumbs img:hover, .thumbs img.active { opacity: 1; }
.pd-info h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.pd-lead { font-family: var(--f-serif); font-style: italic; font-weight: 300; color: var(--c-muted); font-size: 1rem; margin-bottom: 22px; }
.pd-info .price { font-family: var(--f-serif); font-size: 1.8rem; color: var(--c-gold-dark); display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.pd-info .price small { font-family: var(--f-body); font-size: 0.76rem; color: var(--c-muted); font-style: normal; }
.variant-picker { margin-bottom: 24px; }
.vp-label { display: block; font-family: var(--f-display); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-muted); margin-bottom: 10px; }
.vp-options { display: flex; flex-wrap: wrap; gap: 8px; }
.vp-opt {
padding: 11px 20px;
border: 1px solid var(--c-line);
background: #fff;
font-family: var(--f-display);
font-size: 0.8rem;
letter-spacing: 0.08em;
color: var(--c-ink);
cursor: pointer;
transition: all .18s;
}
.vp-opt:hover { border-color: var(--c-gold); }
.vp-opt.active { background: var(--c-gold); border-color: var(--c-gold); color: #fff; }
/* --------------------------------------------------------------- Kaffee-Abo Konfigurator */
.abo-config { margin: 8px 0 30px; }
.abo-step { padding: 18px 0; border-top: 1px solid var(--c-line); }
.abo-step:first-child { border-top: 0; padding-top: 4px; }
.abo-step-title { display: flex; align-items: center; gap: 10px; font-family: var(--f-display); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-ink); margin-bottom: 12px; }
.abo-step-n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--c-gold); color: #fff; font-size: 0.7rem; letter-spacing: 0; }
.abo-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.abo-opts-2 { display: grid; grid-template-columns: repeat(2, 1fr); }
.abo-opts-3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.abo-opt { display: flex; flex-direction: column; gap: 3px; padding: 11px 16px; border: 1px solid var(--c-line); background: #fff; text-align: left; cursor: pointer; transition: all .18s; color: var(--c-ink); }
.abo-opt:hover { border-color: var(--c-gold); }
.abo-opt-lbl { font-family: var(--f-display); font-size: 0.82rem; letter-spacing: 0.06em; }
.abo-opt-sub { font-size: 0.78rem; color: var(--c-muted); line-height: 1.35; }
.abo-opt.active { background: var(--c-gold); border-color: var(--c-gold); color: #fff; }
.abo-opt.active .abo-opt-sub { color: rgba(255, 255, 255, .88); }
.abo-count { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.abo-count .qty-input { display: inline-grid; place-items: center; min-width: 44px; font-family: var(--f-display); }
.abo-count .qty button:disabled { opacity: .3; cursor: default; }
.abo-hint { font-size: 0.86rem; color: var(--c-muted); }
.abo-config select { width: 100%; }
.abo-gift { margin: 14px 0 0; }
.abo-gift[hidden] { display: none; }
.abo-gift-hint { display: block; margin-top: 6px; color: var(--c-muted); font-size: 0.8rem; }
.abo-summary { margin-top: 10px; padding: 22px 24px; background: var(--c-bg-alt); }
.abo-summary-line { font-size: 0.92rem; color: var(--c-ink-soft); margin-bottom: 8px; }
.abo-price { margin-bottom: 16px; }
.abo-price .abo-price-unit { font-size: .55em; white-space: nowrap; }
.abo-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.abo-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 0.86rem; color: var(--c-ink-soft); }
.abo-checks li { padding-left: 22px; position: relative; }
.abo-checks li::before { content: '✓'; position: absolute; left: 0; color: var(--c-gold-dark); font-weight: 700; }
.abo-info { margin: 0 0 28px; }
.abo-info-title { font-size: 1.3rem; margin-bottom: 16px; }
.abo-how { list-style: none; counter-reset: how; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.abo-how li { counter-increment: how; display: flex; flex-direction: column; gap: 4px; font-size: 0.88rem; color: var(--c-ink-soft); }
.abo-how li::before { content: '0' counter(how); font-family: var(--f-display); color: var(--c-gold-dark); letter-spacing: .1em; }
.abo-how strong { color: var(--c-ink); font-family: var(--f-display); font-weight: 500; letter-spacing: .04em; }
.abo-faq details { border-top: 1px solid var(--c-line); padding: 12px 0; }
.abo-faq details:last-child { border-bottom: 1px solid var(--c-line); }
.abo-faq summary { cursor: pointer; font-weight: 600; color: var(--c-ink); }
.abo-faq p { margin: 8px 0 0; font-size: 0.9rem; color: var(--c-ink-soft); }
@media (max-width: 600px) {
.abo-opts-3, .abo-how { grid-template-columns: 1fr; }
}
.stock { display: inline-flex; align-items: center; gap: 8px; font-size: 0.86rem; margin-bottom: 22px; }
.stock::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.stock-ok { color: var(--c-ok); }
.stock-low { color: var(--c-warn); }
.stock-out { color: var(--c-err); }
.prod-attrs { margin: 0 0 26px; padding: 22px 24px; background: var(--c-bg-alt); display: grid; gap: 10px; }
.prod-attr { display: grid; grid-template-columns: 130px 1fr; gap: 12px; font-size: 0.9rem; }
.prod-attr dt { font-family: var(--f-display); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-muted); padding-top: 3px; }
.prod-attr dd { margin: 0; color: var(--c-ink); }
.desc { color: var(--c-ink-soft); margin-bottom: 28px; }
.desc p { margin-bottom: 0.95em; }
.qty-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; margin-bottom: 26px; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--c-line); background: #fff; }
.qty button { width: 42px; min-height: 48px; border: 0; background: transparent; font-size: 1.05rem; cursor: pointer; color: var(--c-muted); }
.qty button:hover { color: var(--c-gold-dark); }
.trust-bar {
list-style: none;
margin: 30px 0 0;
padding: 26px 0 0;
border-top: 1px solid var(--c-line);
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 18px;
}
.trust-bar li { display: flex; gap: 12px; align-items: flex-start; }
.trust-bar .ti { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--c-gold-soft); color: var(--c-gold-dark); display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem; margin-top: 3px; }
.trust-bar strong { display: block; font-family: var(--f-display); font-size: 0.76rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--c-ink); font-weight: 500; }
.trust-bar small { color: var(--c-muted); font-size: 0.8rem; }
.prod-video { margin-top: 40px; }
.prod-video-iframe { width: 100%; aspect-ratio: 16/9; border: 0; }
/* --------------------------------------------------------------- Galerie */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.gallery-grid a { position: relative; overflow: hidden; display: block; aspect-ratio: 1; }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2,.7,.3,1); }
.gallery-grid a::after { content: ''; position: absolute; inset: 0; background: rgba(48, 39, 28, 0.3); opacity: 0; transition: opacity .3s; }
.gallery-grid a:hover img { transform: scale(1.07); }
.gallery-grid a:hover::after { opacity: 1; }
/* Feste Spalten, damit 4 bzw. 8 Bilder ohne halbe Reihe aufgehen */
.gallery-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 760px) { .gallery-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
/* --------------------------------------------------------------- Team */
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 30px; }
/* Bleiben nur zwei Karten uebrig, sollen sie nicht auf halbe Seitenbreite
aufgehen -- auto-fit wuerde sie sonst riesig ziehen. */
.team-grid:has(> .team-card:nth-child(2):last-child) { max-width: 780px; margin: 0 auto; }
.team-card { text-align: center; display: flex; flex-direction: column; }
/* Steckbrief an den Kartenboden schieben, damit beide auf gleicher Hoehe beginnen. */
.team-card .team-text { margin-bottom: 18px; }
.team-card img { width: 100%; aspect-ratio: 4/5; object-fit: cover; margin-bottom: 18px; filter: grayscale(.3); transition: filter .4s; }
.team-card:hover img { filter: grayscale(0); }
.team-card h3 { margin-bottom: 4px; font-size: 1.05rem; }
.team-role { font-family: var(--f-serif); font-style: italic; font-size: 0.88rem; color: var(--c-gold-dark); }
.team-text { max-width: 34ch; margin: 10px auto 0; font-size: 0.92rem; color: var(--c-muted); }
.team-photo { display: block; width: 100%; max-width: 780px; height: auto; margin: 0 auto 32px; }
/* Steckbrief unter der Kurzbeschreibung */
.team-facts { width: 100%; max-width: 320px; margin: auto auto 0; padding-top: 14px; border-top: 1px solid var(--c-gold); text-align: left; font-size: 0.88rem; }
.team-facts > div { padding: 8px 0; border-bottom: 1px dotted rgba(0, 0, 0, .12); }
.team-facts dt { font-family: var(--f-serif); font-style: italic; font-size: 0.82rem; color: var(--c-gold-dark); }
.team-facts dd { margin: 2px 0 0; font-weight: 600; }
/* --------------------------------------------------------------- Öffnungszeiten */
.hours-list { display: grid; gap: 2px; }
.hours-row {
display: flex;
align-items: baseline;
gap: 10px;
font-family: var(--f-display);
font-size: 0.78rem;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 7px 0;
}
.hours-row span:first-child { flex: 0 0 auto; }
.hours-row::before { content: ''; flex: 1; border-bottom: 1px dotted currentColor; opacity: .32; order: 1; transform: translateY(-3px); }
.hours-row strong { order: 2; font-weight: 500; color: var(--c-gold); }
.hours-card { background: var(--c-dark); color: rgba(255, 255, 255, 0.78); padding: 30px 34px; }
.hours-card h3 { color: #fff; }
/* --------------------------------------------------------------- Herkünfte */
.origin-list { display: grid; gap: 1px; }
.origin-item { border-bottom: 1px solid var(--c-line); background: #fff; }
.origin-item > summary {
list-style: none;
cursor: pointer;
padding: 24px 4px;
display: flex;
align-items: center;
gap: 18px;
font-family: var(--f-display);
font-size: 0.98rem;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--c-ink);
}
.origin-item > summary::-webkit-details-marker { display: none; }
.origin-item > summary::after { content: '+'; margin-left: auto; font-size: 1.4rem; color: var(--c-gold); line-height: 1; }
.origin-item[open] > summary::after { content: '–'; }
.origin-country { font-family: var(--f-serif); font-style: italic; font-size: 0.86rem; text-transform: none; letter-spacing: 0; color: var(--c-gold-dark); min-width: 118px; }
.origin-body { padding: 0 4px 28px; color: var(--c-muted); }
.origin-body dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin: 0 0 18px; padding: 20px 22px; background: var(--c-bg-alt); }
.origin-body dt { font-family: var(--f-display); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-gold-dark); }
.origin-body dd { margin: 2px 0 0; color: var(--c-ink); font-size: 0.92rem; }
/* --------------------------------------------------------------- FAQ */
.faq-list { display: grid; gap: 1px; }
.faq-item { border-bottom: 1px solid var(--c-line); background: #fff; }
.faq-item summary {
cursor: pointer;
padding: 20px 4px;
list-style: none;
font-family: var(--f-display);
font-size: 0.95rem;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--c-ink);
display: flex;
align-items: center;
gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; margin-left: auto; color: var(--c-gold); font-size: 1.3rem; }
.faq-item[open] summary::after { content: '–'; }
.faq-answer { padding: 0 4px 22px; color: var(--c-muted); }
/* --------------------------------------------------------------- Kontakt */
.contact-block { display: flex; gap: 16px; align-items: center; padding: 14px 0; }
.ct-icon { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; background: var(--c-gold-soft); color: var(--c-gold-dark); display: inline-flex; align-items: center; justify-content: center; }
.ct-icon svg { width: 19px; height: 19px; fill: currentColor; }
.contact-block small { display: block; font-family: var(--f-serif); font-style: italic; font-size: 0.82rem; text-transform: none; letter-spacing: 0; color: var(--c-muted); }
.contact-block strong { font-family: var(--f-display); font-size: 0.98rem; color: var(--c-ink); font-weight: 500; letter-spacing: 0.03em; }
.map-embed { width: 100%; aspect-ratio: 16/9; border: 0; filter: grayscale(1) contrast(1.05); }
/* --------------------------------------------------------------- Prosa */
.prose { max-width: var(--w-narrow); }
.prose h2 { font-size: 1.3rem; margin-top: 44px; }
.prose h3 { font-size: 0.98rem; margin-top: 30px; }
.prose ul, .prose ol { padding-left: 22px; color: var(--c-ink-soft); }
.prose li { margin-bottom: 8px; }
.prose a { color: var(--c-gold-dark); border-bottom: 1px solid currentColor; }
.prose table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 0.9rem; }
.prose th, .prose td { border: 1px solid var(--c-line); padding: 10px 12px; text-align: left; }
.agb-intro, .agb-stand, .agb-pdf-link { font-size: 0.9rem; color: var(--c-muted); }
.agb-pdf-link a { color: var(--c-gold-dark); }
/* --------------------------------------------------------------- Newsletter */
.footer-newsletter { padding: 0; margin: 0 0 44px; }
.nl-inner { display: grid; gap: 14px; }
.footer-newsletter h3 { color: #fff; font-size: 0.9rem; letter-spacing: 0.12em; margin-bottom: 12px; }
.footer-newsletter p { color: rgba(255, 255, 255, 0.5); font-size: 0.86rem; margin: 0 0 14px; }
.nl-form { display: grid; grid-template-columns: 1fr auto; gap: 0; }
.nl-form input[type=email] {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.16);
border-right: 0;
color: #fff;
padding: 12px 14px;
font-size: 0.9rem;
}
.nl-form input[type=email]::placeholder { color: rgba(255, 255, 255, 0.38); }
.nl-form .btn { padding: 12px 22px; font-size: 0.7rem; }
.nl-hint { grid-column: 1 / -1; font-size: 0.72rem; color: rgba(255, 255, 255, 0.38); margin-top: 8px; }
.nl-hint a { color: var(--c-gold); }
.nl-msg { grid-column: 1 / -1; font-size: 0.85rem; margin-top: 8px; }
.nl-msg .ok { color: #9cc58a; }
.nl-msg .error { color: #e8958d; background: none; border: 0; padding: 0; margin: 0; }
/* Newsletter-Popup (newsletter-popup.js, vom Backend auf jeder Seite eingebunden) */
.nl-popup {
position: fixed; inset: 0; z-index: 1200;
display: grid; place-items: center;
padding: 16px;
background: rgba(20, 16, 11, .62);
opacity: 0; visibility: hidden;
transition: opacity .35s var(--ease), visibility .35s;
}
.nl-popup.open { opacity: 1; visibility: visible; }
.nl-popup-box {
position: relative;
width: min(460px, 100%);
background: var(--c-dark);
border-top: 3px solid var(--c-gold);
padding: clamp(28px, 5vw, 44px);
box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
transform: translateY(18px);
transition: transform .45s var(--ease);
}
.nl-popup.open .nl-popup-box { transform: none; }
.nl-popup-box .eyebrow { color: var(--c-gold); display: block; margin-bottom: 6px; }
.nl-popup-box h3 {
color: #fff;
font-family: var(--f-display);
font-size: clamp(1.6rem, 4vw, 2.1rem);
letter-spacing: .04em;
text-transform: uppercase;
line-height: 1.05;
margin: 0 0 14px;
}
.nl-popup-box p { color: rgba(255, 255, 255, .7); font-size: .92rem; line-height: 1.7; margin: 0 0 22px; }
.nl-popup-close {
position: absolute; top: 10px; right: 12px;
width: 36px; height: 36px;
background: none; border: 0; cursor: pointer;
color: rgba(255, 255, 255, .55);
font-size: 1.7rem; line-height: 1;
transition: color var(--t-fast) var(--ease);
}
.nl-popup-close:hover, .nl-popup-close:focus-visible { color: var(--c-gold); }
@media (prefers-reduced-motion: reduce) {
.nl-popup, .nl-popup-box { transition: none; }
}
/* --------------------------------------------------------------- Footer */
.site-footer { position: relative; background: var(--c-dark); color: rgba(255, 255, 255, 0.6); font-size: 0.88rem; overflow: hidden; }
.site-footer::before {
content: '';
position: absolute;
inset: 0;
background: url('/assets/img/hof/landwirtschaft/felder-nebel.jpg') center/cover no-repeat;
opacity: 0.10;
filter: grayscale(1);
}
.site-footer > .container { position: relative; z-index: 1; padding-top: 76px; padding-bottom: 46px; max-width: 1560px; }
.site-footer h4 { color: #fff; font-size: 0.82rem; letter-spacing: 0.16em; margin-bottom: 24px; }
.footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 44px; }
.footer-brand img { height: 58px; width: auto; margin-bottom: 20px; }
.footer-intro p { color: rgba(255, 255, 255, 0.55); margin-bottom: 18px; }
.footer-contact .contact-block { padding: 8px 0; }
.footer-contact .ct-icon { background: rgba(199, 161, 122, 0.16); color: var(--c-gold); }
.footer-contact small { color: rgba(255, 255, 255, 0.42); }
.footer-contact strong { color: #fff; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { color: rgba(255, 255, 255, 0.6); transition: color .2s; }
.footer-col a:hover { color: var(--c-gold); }
.site-footer .hours-row { color: rgba(255, 255, 255, 0.66); padding: 6px 0; }
.footer-bottom-row {
position: relative;
z-index: 1;
background: rgba(0, 0, 0, 0.45);
display: flex;
flex-wrap: wrap;
gap: 18px;
justify-content: space-between;
align-items: center;
font-size: 0.78rem;
color: rgba(255, 255, 255, 0.4);
padding: 20px 30px;
max-width: 1560px;
margin: 0 auto;
}
.follow { display: flex; align-items: center; gap: 10px; }
.follow strong { font-family: var(--f-display); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); font-weight: 400; }
.follow a { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.6); transition: color .2s; }
.follow a:hover { color: var(--c-gold); }
.follow svg { width: 15px; height: 15px; fill: currentColor; }
.brand-strip { display: flex; flex-wrap: wrap; gap: 30px; align-items: center; justify-content: center; opacity: .65; }
.brand-logo { height: 44px; width: auto; filter: grayscale(1); }
/* --------------------------------------------------------------- Nach-oben-Pfeil */
.to-top {
position: fixed;
right: 22px; bottom: 22px;
width: 42px; height: 42px;
background: var(--c-gold);
color: #fff;
border: 0;
cursor: pointer;
display: none;
align-items: center;
justify-content: center;
font-size: 1.1rem;
z-index: 250;
transition: background .2s;
}
.to-top.show { display: inline-flex; }
.to-top:hover { background: var(--c-ink); }
/* --------------------------------------------------------------- Lightbox */
.lb-overlay { position: fixed; inset: 0; background: rgba(20, 16, 11, 0.95); z-index: 900; display: flex; align-items: center; justify-content: center; padding: 40px; animation: fade-in var(--t-slow) var(--ease) both; }
.lb-overlay:not(.open) { display: none; }
.lb-overlay.single .lb-prev, .lb-overlay.single .lb-next { display: none; }
.lb-overlay img { animation: zoom-in var(--t-slow) var(--ease) both; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes zoom-in { from { opacity: 0; transform: scale(.97); } }
.lb-overlay img { max-width: 92vw; max-height: 84vh; object-fit: contain; }
.lb-close, .lb-prev, .lb-next { position: absolute; background: transparent; border: 1px solid rgba(255, 255, 255, 0.25); color: #fff; width: 46px; height: 46px; cursor: pointer; font-size: 1.3rem; }
.lb-close { top: 24px; right: 24px; }
.lb-prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 24px; top: 50%; transform: translateY(-50%); }
.lb-caption { position: absolute; bottom: 26px; left: 0; right: 0; text-align: center; color: rgba(255, 255, 255, 0.7); font-size: 0.85rem; }
/* --------------------------------------------------------------- Popup */
.nlp-overlay { position: fixed; inset: 0; background: rgba(20, 16, 11, 0.72); z-index: 850; display: flex; align-items: center; justify-content: center; padding: 24px; }
.nlp-card { background: var(--c-bg-alt); max-width: 460px; width: 100%; padding: 40px; position: relative; text-align: center; }
.nlp-close { position: absolute; top: 12px; right: 14px; background: transparent; border: 0; font-size: 1.5rem; color: var(--c-muted); cursor: pointer; }
/* --------------------------------------------------------------- Merkliste-Herz */
.wl-heart {
position: absolute;
top: 10px; right: 10px;
width: 34px; height: 34px;
border: 0;
background: rgba(255, 255, 255, 0.94);
color: var(--c-muted);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity .2s, color .2s;
z-index: 2;
}
.product-card:hover .wl-heart, .wl-heart.is-on { opacity: 1; }
.wl-heart svg { width: 16px; height: 16px; fill: currentColor; }
.wl-heart:hover { color: var(--c-gold-dark); opacity: 1; }
.wl-heart.is-on { color: var(--c-gold-dark); }
@media (hover: none) { .wl-heart { opacity: 1; } }
.cross-sell { background: var(--c-bg-alt); }
.cross-sell h2 { text-align: center; margin-bottom: 42px; }
/* --------------------------------------------------------------- Responsive */
@media (max-width: 1180px) {
.shop-layout { grid-template-columns: minmax(0, 1fr); }
.shop-side { position: static; }
.shop-widget .cat-filter { flex-direction: row; flex-wrap: wrap; gap: 6px; }
.shop-widget .cat-filter button { border: 1px solid var(--c-line); padding: 8px 16px; }
.shop-widget .cat-filter button:hover { padding-left: 16px; }
.numbered-row { grid-template-columns: 1fr; max-width: 620px; margin: 0 auto; }
.pricelist { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1080px) {
.footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 960px) {
:root { --header-h: 68px; --top-h: 104px; }
.nav { display: none; }
.nav-mobile { display: block; }
.mobile-toggle { display: inline-flex; align-items: center; justify-content: center; }
.header-main { grid-template-columns: auto 1fr; gap: 12px; padding: 0 20px; }
.logo-center img { height: 40px; }
.header-icons { border-left: 0; padding-left: 0; }
.split, .product-detail, .contact-layout { grid-template-columns: minmax(0, 1fr); }
.split-media.framed::before { display: none; }
.topbar .container { justify-content: center; }
.topbar-right { display: none; }
.hero { min-height: 88vh; }
.torn::after, .torn-top::before { height: 28px; }
}
@media (max-width: 720px) {
.footer-grid { grid-template-columns: minmax(0, 1fr); }
.products-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 30px 16px; }
.pc-title, .product-card h3 { font-size: 0.88rem; }
.pc-body, .product-card .body { padding: 14px 12px 16px; }
.pc-actions .btn, .product-card .actions .btn { padding: 10px 12px; }
.shop-tools, .shop-search, .shop-sort { width: 100%; }
.prod-attr { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.circle-stack img { width: min(240px, 70%); }
.split-stack img:first-child { margin-top: 0; }
.footer-bottom-row { justify-content: center; text-align: center; }
.price-item img { width: 58px; height: 58px; }
.price-item-top h3 { font-size: 0.9rem; white-space: normal; }
.price-item { gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
* { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
.has-motion [data-reveal] { opacity: 1 !important; transform: none !important; }
}
@media print {
.site-top, .site-footer, .nav-mobile, .kh-consent, .to-top { display: none !important; }
body { background: #fff; padding-top: 0 !important; }
}
/* ==========================================================================
SHOP-FLOW — Original-Layout aus dem Kagerhuber-Stand
--------------------------------------------------------------------------
Warenkorb, Checkout, Konto, Login/Registrierung, Formulare, Captcha und
Cookie-Dialog behalten bewusst ihr bisheriges Layout. Nur die Farb- und
Schrift-Tokens sind auf das Hofröster-Design gemappt, damit Header und
Footer dazu passen.
Diese Sektion steht absichtlich am Dateiende und überschreibt die
Craft-Regeln weiter oben.
========================================================================== */
:root {
/* Aliase auf die alten Variablennamen */
--c-text: var(--c-ink);
--c-accent: var(--c-gold);
--c-accent-dark: var(--c-gold-dark);
--c-border: var(--c-line);
--font-display: var(--f-display);
--font-sans: var(--f-body);
--font-serif: var(--f-body);
}
/* ---- CART + CHECKOUT ---- */
/* CART + CHECKOUT ---------------------------------------- */
.checkout-stepper { display: flex; justify-content: center; gap: 0; margin-bottom: 40px; max-width: 720px; margin-left: auto; margin-right: auto; }
.checkout-stepper .step { flex: 1; display: flex; align-items: center; gap: 12px; padding: 12px 16px; position: relative; color: var(--c-muted); font-size: 0.9rem; font-weight: 500; }
.checkout-stepper .step::after { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 28px; height: 1px; background: var(--c-border); }
.checkout-stepper .step:last-child::after { display: none; }
.checkout-stepper .snum { width: 32px; height: 32px; border-radius: 50%; background: #e6e1d9; color: var(--c-muted); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.95rem; transition: all .2s; flex-shrink: 0; }
.checkout-stepper .step.done .snum { background: var(--c-accent); color: #fff; }
.checkout-stepper .step.done .snum::before { content: '✓'; }
.checkout-stepper .step.done .snum-text { display: none; }
.checkout-stepper .step.active .snum { background: var(--c-accent); color: #fff; box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--c-accent); }
.checkout-stepper .step.active { color: var(--c-text); font-weight: 600; }
.cart-table-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--c-border); border-radius: 6px; margin-bottom: 28px; }
.cart-table { width: 100%; border-collapse: collapse; }
.cart-table th { text-align: left; padding: 16px 18px; background: var(--c-bg-alt); border-bottom: 1px solid var(--c-border); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--c-muted); font-weight: 600; }
.cart-table td { padding: 18px; border-bottom: 1px solid var(--c-border); vertical-align: middle; }
.cart-table tr:last-child td { border-bottom: 0; }
.cart-prod { display: flex; align-items: center; gap: 16px; min-width: 240px; text-decoration: none; color: inherit; padding: 4px; border-radius: 6px; transition: background .15s; }
.cart-prod:hover { background: var(--c-bg-alt); color: inherit; }
.cart-prod:hover strong { color: var(--c-accent-dark); }
.cart-prod img { width: 72px; height: 72px; object-fit: contain; background: var(--c-bg-alt); border-radius: 4px; padding: 6px; flex-shrink: 0; }
.cart-prod strong { display: block; font-size: 0.98rem; font-weight: 600; transition: color .15s; }
.cart-meta { font-size: 0.8rem; color: var(--c-muted); margin-top: 4px; line-height: 1.45; }
.cart-price { font-weight: 700; white-space: nowrap; text-align: right; font-family: var(--f-display); font-size: 1.05rem; }
.cart-remove, .cart-edit { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--c-border); background: #fff; border-radius: 50%; cursor: pointer; font-size: 1rem; color: var(--c-muted); transition: all .2s; text-decoration: none; margin-left: 4px; }
.cart-edit:hover { background: #fffaf0; border-color: var(--c-accent); color: var(--c-accent); }
.cart-remove:hover { background: #fef2f2; border-color: #dc2626; color: #dc2626; }
.qty-input { width: 72px; padding: 9px 10px; border: 1px solid var(--c-border); border-radius: 4px; text-align: center; font-family: inherit; font-size: 0.95rem; }
.cart-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding: 20px 0 0; flex-wrap: wrap; }
.cart-foot-sum { font-size: 1.05rem; }
.cart-foot-sum .sum-row { display: flex; gap: 24px; align-items: baseline; }
.cart-foot-sum .sum-row span:last-child { font-family: var(--f-display); font-size: 1.5rem; font-weight: 700; color: var(--c-accent-dark); }
.cart-mwst { color: var(--c-muted); font-size: 0.82rem; margin: 6px 0 0; font-style: italic; }
.cart-foot-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.empty-cart { text-align: center; padding: 80px 24px; }
.empty-cart h2 { font-family: var(--f-display); margin-bottom: 12px; }
.empty-cart p { color: var(--c-muted); margin-bottom: 24px; }
.checkout-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: start; }
.checkout-main h2 { font-family: var(--f-display); font-size: 1.2rem; font-weight: 600; margin: 0 0 16px; }
.checkout-main .field, .checkout-main .row { margin-bottom: 14px; }
.checkout-main .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.checkout-main .row3 { display: grid; grid-template-columns: 120px 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .checkout-main .row3 { grid-template-columns: 1fr; } }
.checkout-main label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--c-text); margin-bottom: 6px; letter-spacing: 0.3px; }
.checkout-main input[type=text], .checkout-main input[type=email], .checkout-main input[type=tel], .checkout-main textarea, .checkout-main select { width: 100%; padding: 12px 14px; border: 1px solid var(--c-border); border-radius: 4px; font-family: inherit; font-size: 0.95rem; background: #fff; }
.checkout-main textarea { min-height: 90px; resize: vertical; }
.check-row { display: flex; align-items: flex-start; gap: 10px; font-size: 0.92rem; line-height: 1.45; cursor: pointer; }
.check-row input { accent-color: var(--c-accent); width: 18px; height: 18px; margin: 1px 0 0; flex-shrink: 0; }
/* .checkout-main label (Feldbeschriftung) darf Checkbox-Zeilen und Bezahlarten nicht zu Bloecken machen */
.checkout-main .check-row { display: flex; font-size: 0.92rem; font-weight: 400; letter-spacing: 0; margin-bottom: 0; }
.checkout-main .pay-opt { display: flex; font-weight: 400; letter-spacing: 0; margin-bottom: 12px; }
.check-row a { color: var(--c-accent); }
/* Text mit Links als ein Block, sonst wird jedes Wort/jeder Link ein eigenes Flex-Element */
.check-row > span { flex: 1; min-width: 0; }
/* Grid-Spalten duerfen schmaler werden als ihr Inhalt (lange E-Mail, Gutscheinfeld) */
.checkout-grid > * { min-width: 0; }
.deliv-opts { display: flex; flex-direction: column; gap: 10px; }
.deliv-opt { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border: 2px solid var(--c-border); border-radius: 6px; cursor: pointer; background: #fff; transition: all .2s; }
.deliv-opt:hover { border-color: var(--c-accent); }
.deliv-opt.selected, .deliv-opt:has(input:checked) { border-color: var(--c-accent); background: #fffaf0; }
.deliv-opt input { accent-color: var(--c-accent); width: 20px; height: 20px; flex-shrink: 0; }
.deliv-opt > div { flex: 1; }
.deliv-opt strong { display: block; font-weight: 600; font-size: 1rem; margin-bottom: 3px; }
.deliv-opt small { display: block; color: var(--c-muted); font-size: 0.82rem; }
.deliv-price { font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; color: var(--c-text); white-space: nowrap; }
/* Mini delivery switch (compact, in aside above order summary) */
.deliv-switch-mini { background: #fff; border: 1px solid var(--c-border); border-radius: 6px; padding: 14px 16px; margin-bottom: 14px; }
.dsm-title { display: block; font-size: 0.74rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; color: var(--c-muted); margin-bottom: 10px; }
.dsm-opt { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--c-border); border-radius: 4px; cursor: pointer; transition: all .15s; margin-bottom: 6px; background: #fff; }
.dsm-opt:last-child { margin-bottom: 0; }
.dsm-opt input { position: absolute; opacity: 0; pointer-events: none; }
.dsm-opt::before { content: ''; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--c-border); flex-shrink: 0; transition: all .15s; background: #fff; }
.dsm-opt .dsm-name { flex: 1; font-size: 0.88rem; font-weight: 500; color: var(--c-text); }
.dsm-opt .dsm-price { font-family: var(--f-display); font-weight: 700; font-size: 0.95rem; color: var(--c-muted); white-space: nowrap; }
.dsm-opt:hover { border-color: var(--c-accent); }
.dsm-opt.active { border-color: var(--c-accent); background: #fffaf0; }
.dsm-opt.active::before { border-color: var(--c-accent); background: var(--c-accent); box-shadow: inset 0 0 0 3px #fffaf0; }
.dsm-opt.active .dsm-price { color: var(--c-accent-dark); }
/* Delivery switch (Versand vs Selbstabholung) */
.deliv-switch-wrap { margin-bottom: 16px; }
.deliv-switch-label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--c-text); margin-bottom: 8px; letter-spacing: 0.2px; }
.deliv-switch { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.ds-opt { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #fff; border: 2px solid var(--c-border); border-radius: 6px; cursor: pointer; transition: all .15s; position: relative; }
.ds-opt input { position: absolute; opacity: 0; pointer-events: none; }
.ds-opt > svg { color: var(--c-muted); flex-shrink: 0; transition: color .15s; }
.ds-opt .ds-text { flex: 1; min-width: 0; }
.ds-opt strong { display: block; font-weight: 600; color: var(--c-text); font-size: 0.95rem; line-height: 1.25; }
.ds-opt small { display: block; color: var(--c-muted); font-size: 0.78rem; margin-top: 2px; line-height: 1.3; }
.ds-opt .ds-price { font-family: var(--f-display); font-weight: 700; color: var(--c-text); font-size: 1.05rem; white-space: nowrap; }
.ds-opt::before { content: ''; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--c-border); flex-shrink: 0; transition: all .15s; background: #fff; }
.ds-opt:hover { border-color: var(--c-accent); }
.ds-opt:hover > svg { color: var(--c-accent); }
.ds-opt.active { border-color: var(--c-accent); background: #fffaf0; box-shadow: 0 4px 14px rgba(207,180,151,0.18); }
.ds-opt.active::before { border-color: var(--c-accent); background: var(--c-accent); box-shadow: inset 0 0 0 4px #fffaf0; }
.ds-opt.active > svg { color: var(--c-accent); }
.ds-opt.active .ds-price { color: var(--c-accent-dark); }
@media (max-width: 500px) { .ds-opt small { font-size: 0.74rem; } }
/* Form cards (compact stacked sections in checkout) */
.form-card { background: #fff; border: 1px solid var(--c-border); border-radius: 6px; padding: 18px 20px; margin-bottom: 14px; }
.form-title { font-family: var(--f-display); font-size: 1.02rem; font-weight: 600; margin: 0 0 14px; }
.form-card .field { margin-bottom: 10px; }
.form-card .field:last-child { margin-bottom: 0; }
.form-card label { font-size: 0.78rem; font-weight: 600; color: var(--c-text); margin-bottom: 4px; letter-spacing: 0.2px; }
.form-card input, .form-card textarea, .form-card select { padding: 10px 12px; font-size: 0.92rem; }
.form-card .row, .form-card .row3 { margin-bottom: 10px; }
.form-card .row .field, .form-card .row3 .field { margin-bottom: 0; }
.pay-opt { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border: 2px solid var(--c-border); border-radius: 6px; cursor: pointer; background: #fff; transition: all .2s; }
.pay-opt:hover { border-color: var(--c-accent); }
.pay-opt.selected, .pay-opt:has(input:checked) { border-color: var(--c-accent); background: #fffaf0; }
.pay-opt input { accent-color: var(--c-accent); width: 20px; height: 20px; flex-shrink: 0; }
.pay-opt > div { flex: 1; }
.pay-opt strong { display: block; font-weight: 600; font-size: 1rem; margin-bottom: 3px; }
.pay-opt small { display: block; color: var(--c-muted); font-size: 0.82rem; }
.pay-icons { display: flex; gap: 6px; flex-wrap: wrap; }
.pay-pill { background: var(--c-bg-alt); border: 1px solid var(--c-border); padding: 4px 10px; border-radius: 4px; font-size: 0.7rem; font-weight: 600; color: var(--c-muted); }
.info-box { background: #fff8ec; border: 1px solid #f0d9a8; border-radius: 4px; padding: 16px 20px; color: #5a4723; font-size: 0.95rem; line-height: 1.55; }
.address-recap { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 20px; background: var(--c-bg-alt); border-radius: 6px; padding: 18px 22px; }
.address-recap h4 { font-family: var(--f-body); font-size: 0.74rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; color: var(--c-muted); margin: 0 0 6px; }
.address-recap p { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--c-text); overflow-wrap: anywhere; }
.checkout-aside { position: sticky; top: 100px; align-self: start; }
.order-summary { background: var(--c-bg-alt); border-radius: 6px; padding: 24px 22px; }
.order-summary h3 { font-family: var(--f-display); font-size: 1.1rem; font-weight: 700; margin: 0 0 16px; }
.sum-items { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 12px; }
.sum-items li { display: flex; align-items: center; gap: 12px; }
.sum-items img { width: 48px; height: 48px; object-fit: contain; background: #fff; border-radius: 4px; padding: 4px; flex-shrink: 0; }
.sum-items > li > div { flex: 1; min-width: 0; }
.sum-items strong { display: block; font-size: 0.88rem; font-weight: 600; line-height: 1.25; }
.sum-items small { color: var(--c-muted); font-size: 0.78rem; display: block; margin-top: 2px; }
.sum-items > li > span { font-family: var(--f-display); font-weight: 700; font-size: 0.95rem; white-space: nowrap; }
.sum-row { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; font-size: 0.95rem; }
.sum-row.sum-tax { color: var(--c-muted); font-size: 0.82rem; padding: 2px 0; }
.sum-row.sum-total { border-top: 1px solid var(--c-border); margin-top: 8px; padding-top: 14px; font-size: 1.05rem; font-weight: 700; }
.sum-row.sum-total span:last-child { font-family: var(--f-display); font-size: 1.4rem; color: var(--c-accent-dark); }
.sum-row.sum-total small { display: block; font-weight: 400; font-size: 0.72rem; color: var(--c-muted); font-style: italic; font-family: var(--f-body); }
@media (max-width: 900px) {
.checkout-grid { grid-template-columns: 1fr; }
.checkout-aside { position: static; }
.checkout-stepper .slabel { display: none; }
.cart-foot { flex-direction: column; align-items: stretch; }
.checkout-main .row { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
.pay-opt { flex-wrap: wrap; }
.pay-opt .pay-icons { width: 100%; padding-left: 36px; }
.voucher-box input { min-width: 0; }
}
/* ---- CONSENT MODAL ---- */
/* CONSENT MODAL ------------------------------------------ */
.kh-consent { position: fixed; inset: 0; background: rgba(0,0,0,0.65); display: none; align-items: center; justify-content: center; z-index: 10000; padding: 24px; }
.kh-consent.open { display: flex; }
.kh-consent-dialog { background: #fff; border-radius: 6px; padding: 36px 36px 28px; max-width: 560px; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,0.35); }
.kh-consent-dialog h2 { margin: 0 0 14px; font-size: 1.45rem; font-weight: 700; }
.kh-consent-dialog p { color: var(--c-muted); font-size: 0.95rem; margin: 0 0 12px; line-height: 1.6; }
.kh-consent-dialog strong { color: var(--c-text); }
.kh-consent-dialog a { color: var(--c-accent); font-weight: 600; }
.kh-consent-actions { display: flex; gap: 12px; margin: 22px 0 16px; }
.kh-consent-actions .btn { flex: 1; padding: 14px 18px; font-size: 0.88rem; }
.kh-consent-links { text-align: center; font-size: 0.82rem; margin: 0; }
/* ---- CAPTCHA + UTIL ---- */
/* CAPTCHA ------------------------------------------------- */
.captcha-wrap { display: block; }
.captcha-row { display: flex; gap: 10px; align-items: center; background: var(--c-bg-alt); padding: 10px 14px; border: 1px solid var(--c-border); border-radius: 6px; }
.captcha-q { font-size: 0.92rem; font-weight: 600; flex: 1; margin: 0; color: var(--c-text); }
.captcha-a { width: 96px; padding: 8px 10px; border: 1px solid var(--c-border); border-radius: 4px; font-size: 0.95rem; font-family: inherit; text-align: center; }
.captcha-reload { background: none; border: 1px solid var(--c-border); width: 36px; height: 36px; border-radius: 4px; cursor: pointer; font-size: 1rem; color: var(--c-muted); }
.captcha-reload:hover { border-color: var(--c-accent); color: var(--c-accent); }
.captcha-hp { position: absolute !important; left: -10000px !important; opacity: 0 !important; width: 1px !important; height: 1px !important; pointer-events: none; }
/* UTIL --------------------------------------------------- */
.notice { padding: 12px 16px; background: #eef6e8; border-left: 3px solid #5a7a3e; color: #2d4a20; border-radius: var(--radius); margin: 16px 0; }
.error { padding: 12px 16px; background: #fdecea; border-left: 3px solid #c0392b; color: #7b1e15; border-radius: var(--radius); margin: 16px 0; }
/* ---- GLOBAL FORM FIELDS + CONTACT ---- */
/* GLOBAL FORM FIELDS ------------------------------------- */
.field { display: flex; flex-direction: column; margin-bottom: 14px; }
.field > label { font-size: 0.78rem; font-weight: 600; color: var(--c-text); margin-bottom: 6px; letter-spacing: 0.2px; }
.field > input,
.field > textarea,
.field > select {
width: 100%;
padding: 12px 14px;
border: 1px solid var(--c-border);
border-radius: var(--radius);
font-family: inherit;
font-size: 0.95rem;
background: #fff;
color: var(--c-text);
transition: border-color .15s, box-shadow .15s, background .15s;
-webkit-appearance: none;
appearance: none;
}
.field > input:focus,
.field > textarea:focus,
.field > select:focus {
outline: none;
border-color: var(--c-accent);
box-shadow: 0 0 0 3px rgba(207,180,151,0.22);
background: #fff;
}
.field > input::placeholder,
.field > textarea::placeholder { color: #b6b3ac; }
.field > input[disabled],
.field > input[readonly] { background: var(--c-bg-alt); color: var(--c-muted); cursor: not-allowed; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.row3 { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 14px; }
.row .field, .row3 .field { margin-bottom: 14px; }
@media (max-width: 600px) {
.row, .row3 { grid-template-columns: 1fr; }
}
/* Contact page – address + form side-by-side on desktop, stacked on mobile */
.contact-layout { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; max-width: 1000px; margin: 0 auto; }
@media (max-width: 800px) {
.contact-layout { grid-template-columns: 1fr; gap: 28px; }
}
/* ---- AUTH + ACCOUNT ---- */
/* AUTH PAGES (login, register, forgot, reset) ------------ */
.auth-page { background: var(--c-bg-alt); padding: 80px 0; min-height: calc(100vh - 200px); }
.auth-shell { max-width: 480px; margin: 0 auto; padding: 0 20px; }
.auth-shell--wide { max-width: 580px; }
.auth-card {
background: #fff;
border-radius: 10px;
box-shadow: 0 14px 50px rgba(20, 18, 14, 0.10), 0 1px 3px rgba(20, 18, 14, 0.04);
border: 1px solid var(--c-border);
overflow: hidden;
position: relative;
}
.auth-card::before {
content: '';
display: block;
height: 4px;
background: linear-gradient(90deg, var(--c-accent), var(--c-accent-dark));
}
.auth-head { padding: 40px 40px 8px; text-align: center; }
.auth-icon {
width: 64px; height: 64px; border-radius: 50%;
background: rgba(207,180,151,0.16);
color: var(--c-accent-dark);
display: inline-flex; align-items: center; justify-content: center;
margin-bottom: 18px;
}
.auth-icon svg { width: 28px; height: 28px; }
.auth-head .subtitle { margin-bottom: 6px; }
.auth-head h1 { font-size: clamp(1.7rem, 3vw, 2.1rem); margin: 0 0 10px; }
.auth-head p { color: var(--c-muted); margin: 0; font-size: 0.98rem; line-height: 1.55; }
.auth-body { padding: 24px 40px 36px; }
.auth-body .btn { padding: 14px 24px; font-size: 0.88rem; }
.auth-hint { display: block; margin: -4px 0 16px; color: var(--c-muted); font-size: 0.82rem; line-height: 1.45; }
.auth-foot {
display: flex; justify-content: space-between; align-items: center;
gap: 16px; flex-wrap: wrap;
padding: 18px 40px;
background: #fbf9f5;
border-top: 1px solid var(--c-border);
font-size: 0.92rem;
color: var(--c-muted);
}
.auth-foot a { color: var(--c-text); font-weight: 500; }
.auth-foot a:hover { color: var(--c-accent-dark); }
.auth-foot--center { justify-content: center; }
@media (max-width: 520px) {
.auth-page { padding: 32px 0 56px; }
.auth-head { padding: 32px 24px 4px; }
.auth-body { padding: 20px 24px 28px; }
.auth-foot { padding: 16px 24px; }
}
/* ACCOUNT PAGE polish ------------------------------------ */
.account-shell { display: grid; grid-template-columns: 260px 1fr; gap: 36px; align-items: start; }
.account-side {
background: #fff;
border: 1px solid var(--c-border);
border-radius: 10px;
padding: 18px;
position: sticky; top: 20px; align-self: start;
box-shadow: 0 4px 18px rgba(20, 18, 14, 0.04);
}
.account-side .who { padding: 10px 12px 16px; border-bottom: 1px solid var(--c-border); margin-bottom: 12px; }
.account-side .who-name { font-weight: 600; font-size: 0.98rem; color: var(--c-text); display: block; line-height: 1.3; }
.account-side .who-email { color: var(--c-muted); font-size: 0.82rem; display: block; word-break: break-all; margin-top: 2px; }
.account-tabs { display: flex; flex-direction: column; gap: 2px; }
.account-tabs button {
background: transparent; border: none;
padding: 11px 14px; text-align: left; cursor: pointer;
border-radius: 6px;
font-family: inherit; font-size: 0.94rem; color: var(--c-text);
display: flex; align-items: center; gap: 12px;
transition: background .15s, color .15s;
}
.account-tabs button svg { flex-shrink: 0; opacity: 0.65; }
.account-tabs button:hover { background: var(--c-bg-alt); }
.account-tabs button.active { background: var(--c-accent); color: #fff; font-weight: 600; }
.account-tabs button.active svg { opacity: 1; }
.account-tabs .acc-divider { height: 1px; background: var(--c-border); margin: 8px 0; }
.account-tabs .acc-logout { color: var(--c-muted); }
.account-tabs .acc-logout:hover { background: #fdecea; color: #7b1e15; }
.account-pane { background: #fff; border: 1px solid var(--c-border); border-radius: 10px; padding: 28px 32px; box-shadow: 0 4px 18px rgba(20, 18, 14, 0.04); }
.account-pane h2 { margin: 0 0 8px; font-size: 1.4rem; }
.account-pane .pane-sub { color: var(--c-muted); margin: 0 0 22px; font-size: 0.95rem; }
.account-pane .form-card { border: none; padding: 0; box-shadow: none; background: transparent; }
.account-pane .form-card .field { margin-bottom: 14px; }
.account-pane .form-card label { font-size: 0.78rem; }
.account-pane .form-card input, .account-pane .form-card textarea, .account-pane .form-card select { padding: 12px 14px; font-size: 0.95rem; }
.account-pane .form-card .row, .account-pane .form-card .row3 { margin-bottom: 14px; }
@media (max-width: 800px) {
.account-shell { grid-template-columns: 1fr; }
.account-side { position: static; }
.account-tabs { flex-direction: row; flex-wrap: wrap; }
.account-tabs button { flex: 1 1 auto; justify-content: center; }
.account-pane { padding: 22px 18px; }
}
/* ---- Mobile-Polish Warenkorb/Checkout ---- */
@media (max-width: 600px) {
/* Cart table → card layout */
.cart-table-wrap { border: 0; background: transparent; border-radius: 0; overflow: visible; }
.cart-table, .cart-table tbody, .cart-table tr, .cart-table td { display: block; width: 100%; }
.cart-table thead { display: none; }
.cart-table tr {
background: #fff; border: 1px solid var(--c-border); border-radius: 6px;
margin-bottom: 12px; padding: 14px; position: relative;
}
.cart-table td { padding: 6px 0; border-bottom: none; }
.cart-table td:last-child { padding-top: 10px; }
.cart-prod { min-width: 0; }
.cart-prod img { width: 60px; height: 60px; }
.cart-prod strong { font-size: 0.92rem; }
.cart-price { text-align: left; font-size: 1rem; }
.cart-remove, .cart-edit { width: 32px; height: 32px; }
.cart-foot-sum .sum-row span:last-child { font-size: 1.3rem; }
.cart-foot-actions { width: 100%; }
.cart-foot-actions .btn { flex: 1; }
/* Checkout */
.checkout-stepper { margin-bottom: 24px; gap: 4px; }
.checkout-stepper .step { padding: 8px 4px; font-size: 0.75rem; }
.checkout-stepper .snum { width: 26px; height: 26px; font-size: 0.82rem; }
.checkout-stepper .step::after { display: none; }
.sum-items img { width: 40px; height: 40px; }
.order-summary { padding: 18px 16px; }
}
/* ---- Feinschliff: Produktseite behält den Craft-Look ---- */
/* .qty-input stammt aus dem Warenkorb-Stand und würde im Mengen-Widget
der Produktseite einen zweiten Rahmen zeichnen. */
.qty .qty-input {
width: 52px;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
font-family: var(--f-display);
font-size: 1rem;
}
/* Der Varianten-Picker nutzt eigene Buttons, keine .field-Regeln */
.variant-picker .vp-opt { width: auto; }
/* ---- Cookie-Dialog auf schmalen Displays ---- */
@media (max-width: 520px) {
.kh-consent { padding: 16px; }
.kh-consent-dialog { padding: 28px 22px 22px; }
.kh-consent-actions { flex-direction: column; gap: 8px; }
.kh-consent-actions .btn { width: 100%; }
}
/* ---- WIDERRUFSFUNKTION (§ 13a FAGG) ----
Der Button muss während der gesamten Rücktrittsfrist gut lesbar,
hervorgehoben und ohne Login erreichbar sein — deshalb steht er als
eigener Block im Footer und nicht nur als Zeile in der Linkliste. */
.footer-widerruf {
display: inline-flex;
align-items: center;
gap: 9px;
margin: 10px 0 18px;
padding: 12px 20px;
border: 1px solid var(--c-gold);
border-radius: 3px;
background: rgba(199, 161, 122, 0.12);
color: #fff;
font-family: var(--f-display);
font-size: 0.82rem;
letter-spacing: 0.14em;
text-transform: uppercase;
text-decoration: none;
transition: background 0.25s ease, color 0.25s ease;
}
/* Spezifitaet muss ueber `.footer-col a:hover` liegen, sonst faerbt die
generische Footer-Regel den Text gold — auf goldem Grund unlesbar. */
.footer-col a.footer-widerruf { color: #fff; }
.footer-col a.footer-widerruf:hover { background: var(--c-gold); color: var(--c-dark); }
.footer-widerruf svg { width: 17px; height: 17px; fill: currentColor; flex: none; }
.footer-widerruf-note { display: block; margin: 0 0 4px; font-size: 0.78rem; color: rgba(255, 255, 255, 0.5); }
.widerruf-layout { display: grid; grid-template-columns: 1.35fr 1fr; gap: 48px; align-items: start; max-width: 1060px; margin: 0 auto; }
.widerruf-aside { position: sticky; top: 110px; display: grid; gap: 22px; }
@media (max-width: 860px) {
.widerruf-layout { grid-template-columns: 1fr; gap: 32px; }
.widerruf-aside { position: static; }
}
.field-hint { display: block; margin-top: 6px; font-size: 0.82rem; line-height: 1.5; color: var(--c-muted); }
.wd-scope { border: 1px solid var(--c-line); border-radius: 3px; padding: 16px 18px; }
.wd-scope legend { padding: 0 8px; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-gold-dark); }
.wd-radio { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; font-size: 0.95rem; color: var(--c-ink-soft); cursor: pointer; }
.wd-radio input { margin-top: 3px; accent-color: var(--c-gold-dark); }
/* Der Bestätigungsbutton trägt den gesetzlich geforderten Wortlaut und darf
optisch nicht untergehen. */
.btn-widerruf { width: 100%; padding: 18px 28px; font-size: 0.92rem; }
.wd-alt { border: 1px solid var(--c-line); border-radius: 3px; padding: 24px 26px; background: var(--c-surface); }
.wd-alt h3 { font-size: 1.05rem; margin: 0 0 12px; }
.wd-alt p { font-size: 0.92rem; line-height: 1.8; margin: 0 0 14px; }
.wd-receipt { border: 1px solid var(--c-gold); border-radius: 3px; padding: 30px 32px; background: var(--c-gold-soft); }
.wd-receipt h2 { font-size: 1.35rem; margin: 0 0 18px; }
.wd-receipt h3 { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-gold-dark); margin: 22px 0 8px; }
.wd-receipt p { font-size: 0.94rem; line-height: 1.8; margin: 14px 0 0; }
.wd-receipt-meta { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin: 0; }
.wd-receipt-meta dt { font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-muted); }
.wd-receipt-meta dd { margin: 0; font-weight: 600; color: var(--c-ink); }
.wd-declaration {
margin: 0;
padding: 16px 18px;
border: 1px solid var(--c-line);
border-radius: 3px;
background: var(--c-bg);
font-family: inherit;
font-size: 0.92rem;
line-height: 1.8;
color: var(--c-ink);
white-space: pre-wrap;
word-break: break-word;
}
.wd-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px !important; }
/* Ausdruck der Eingangsbestätigung als Nachweis für den Verbraucher */
@media print {
.site-top, .nav-mobile, #siteFooter, .breadcrumb, .widerruf-aside, .wd-actions { display: none !important; }
.wd-receipt { border-color: #999; background: none; }
}
/* Ruecktrittsfunktion je Bestellung im Kundenkonto — muss hervorgehoben und
ohne Suchen erreichbar sein, deshalb ein echter Button statt eines Links. */
.order-widerruf-row {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid var(--c-line, #e3ded1);
}
.order-widerruf {
display: inline-block;
padding: 9px 18px;
border: 1px solid var(--c-gold-dark, #a8825b);
border-radius: 3px;
background: transparent;
color: var(--c-gold-dark, #a8825b);
font-size: 0.84rem;
letter-spacing: 0.06em;
text-decoration: none;
white-space: nowrap;
transition: background 0.2s ease, color 0.2s ease;
}
.order-widerruf:hover { background: var(--c-gold-dark, #a8825b); color: #fff; }
.order-widerruf-row small { color: var(--c-muted, #8a8074); font-size: 0.8rem; }
.wd-itempick { display: grid; gap: 2px; margin-bottom: 12px; }
.wd-itempick .wd-radio input { accent-color: var(--c-gold-dark); }
/* ==========================================================================
ERGAENZUNGEN — Mega-Menue, vier Standbeine, Schrittkette
Bewusst in der bestehenden Bildsprache: Creme, Gold, Oswald-Versalien.
========================================================================== */
/* --------------------------------------------------------------- Mega-Menue */
/* Schwarzes Panel ueber die volle Breite: links ein Vorspann, rechts die
Unterpunkte als Kacheln mit Linien-Icon. */
.nav .has-mega { position: static; }
.nav-caret {
width: 9px; height: 6px;
margin-left: 7px;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
opacity: .5;
transition: transform var(--t-fast) var(--ease);
}
.nav .has-mega > a { display: flex; align-items: center; }
.nav .has-mega:hover > a .nav-caret { transform: rotate(180deg); opacity: 1; }
.mega {
position: absolute;
left: 0; right: 0;
top: 100%;
background: #0e0b07;
border-top: 1px solid rgba(255, 255, 255, .1);
box-shadow: 0 26px 52px rgba(0, 0, 0, .42);
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), visibility var(--t-fast);
z-index: 310;
}
.nav .has-mega:hover > .mega,
.nav .has-mega:focus-within > .mega { opacity: 1; visibility: visible; transform: translateY(0); }
.mega-inner {
max-width: 1560px;
margin: 0 auto;
padding: 44px 30px 48px;
display: grid;
grid-template-columns: minmax(200px, 250px) 1fr;
gap: clamp(32px, 4vw, 76px);
align-items: start;
}
/* Vorspann */
.mega-lead {
border-right: 1px solid rgba(255, 255, 255, .09);
padding-right: clamp(20px, 2.5vw, 40px);
}
.mega-lead .eyebrow { color: var(--c-gold); margin-bottom: 6px; font-size: .92rem; }
.mega-lead h4 {
font-size: 1.45rem;
line-height: 1.15;
letter-spacing: .02em;
color: #fff;
margin: 0 0 14px;
}
.mega-lead p {
font-family: var(--f-body);
font-size: .84rem;
line-height: 1.75;
color: rgba(255, 255, 255, .48);
margin: 0 0 20px;
text-transform: none;
letter-spacing: 0;
}
/* `.nav a` ist spezifischer — sonst greift display/gap hier nicht. */
.nav .mega-cta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 0;
font-family: var(--f-display);
font-size: .72rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--c-gold) !important;
transition: gap var(--t-fast) var(--ease);
}
.nav .mega-cta::after { content: '→'; position: static; width: auto; height: auto; background: none; transform: none; font-size: 1rem; line-height: 1; }
.nav .mega-cta:hover { gap: 16px; }
/* Spalten mit den Unterpunkten */
.mega-cols {
display: flex;
align-items: flex-start;
gap: clamp(24px, 3vw, 52px);
}
.mega-col { flex: 1 1 0; min-width: 0; }
.mega-col.is-wide { flex: 2 1 0; }
.mega-title {
display: block;
font-family: var(--f-serif);
font-style: italic;
font-size: .92rem;
color: var(--c-gold);
margin: 0 0 14px;
}
/* `.nav ul` ist flex — im Panel muessen die Punkte ins Raster. */
.nav .mega-list { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }
.nav .mega-col.is-wide .mega-list { grid-template-columns: 1fr 1fr; }
/* Einzelne Gruppe (Kontakt): nicht ueber die volle Breite ausleiern. */
.nav .mega-col:only-child .mega-list { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 660px; }
.mega-list li { display: block; }
.mega-list a {
display: flex;
align-items: center;
gap: 14px;
padding: 13px 16px;
border: 1px solid rgba(255, 255, 255, .08);
background: rgba(255, 255, 255, .025);
color: #fff !important;
transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.nav .mega-list a::after { display: none; }
.mega-list a:hover {
background: rgba(199, 161, 122, .13);
border-color: rgba(199, 161, 122, .5);
transform: translateY(-2px);
}
.mega-ico { flex: 0 0 auto; width: 32px; height: 32px; color: var(--c-gold); }
.mega-ico svg {
width: 100%; height: 100%;
fill: none;
stroke: currentColor;
stroke-width: 2.4;
stroke-linecap: round;
stroke-linejoin: round;
}
.mega-txt { min-width: 0; }
.mega-txt .lbl {
display: block;
font-family: var(--f-display);
font-size: .8rem;
letter-spacing: .09em;
line-height: 1.3;
text-transform: uppercase;
}
.mega-txt .sub {
display: block;
font-family: var(--f-serif);
font-style: italic;
font-size: .76rem;
line-height: 1.5;
letter-spacing: 0;
text-transform: none;
color: rgba(255, 255, 255, .45);
margin-top: 2px;
}
@media (max-width: 1340px) {
.mega-inner { grid-template-columns: 1fr; gap: 28px; }
.mega-cols { flex-wrap: wrap; }
.mega-lead { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .09); padding: 0 0 22px; }
.mega-lead p { max-width: 620px; }
}
/* Mobil: aufklappbare Unterlisten in der Schublade */
.nav-mobile .has-sub { position: relative; }
.nav-mobile .sub-toggle {
position: absolute;
top: 6px; right: -8px;
width: 44px; height: 44px;
background: transparent;
border: 0;
color: rgba(255, 255, 255, .6);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.nav-mobile .sub-toggle .nav-caret { width: 13px; height: 8px; margin: 0; opacity: 1; }
.nav-mobile .sub-toggle[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }
.nav-mobile .sub-list {
display: none;
margin: 0 0 14px;
padding: 2px 0 2px;
list-style: none;
}
.nav-mobile .sub-list.open { display: grid; gap: 6px; }
.nav-mobile .sub-list li { border: 0; }
.nav-mobile .sub-list .sub-title {
font-family: var(--f-serif);
font-style: italic;
font-size: .88rem;
color: var(--c-gold);
padding: 4px 2px 0;
}
.nav-mobile .sub-list .sub-title:not(:first-child) {
margin-top: 10px;
padding-top: 14px;
border-top: 1px solid rgba(255, 255, 255, .1);
}
.nav-mobile .sub-list a {
display: flex;
align-items: center;
gap: 12px;
padding: 11px 14px;
border: 1px solid rgba(255, 255, 255, .08);
background: rgba(255, 255, 255, .03);
}
.nav-mobile .sub-list a:hover { background: rgba(199, 161, 122, .13); border-color: rgba(199, 161, 122, .45); }
.nav-mobile .sub-list .mega-ico { width: 24px; height: 24px; }
.nav-mobile .sub-list .lbl { font-size: .78rem; letter-spacing: .08em; }
.nav-mobile .sub-list .sub { font-size: .72rem; color: rgba(255, 255, 255, .45); margin-top: 1px; }
/* --------------------------------------------------------------- Vier Standbeine (Startseite, Der Hof) */
/* Die vier Standbeine randlos ueber die volle Breite. Am Desktop ziehen sich
die Bahnen beim Darueberfahren auf, das Foto bekommt Farbe und Text samt
Schlagworten blendet ein. Auf Touch-Geraeten und schmalen Bildschirmen
steht alles offen im Raster. Unten laeuft der Kreislauf als Goldband. */
.hof { background: var(--c-gold); padding: clamp(80px, 9vw, 130px) 0 0; overflow: hidden; }
/* Kopf auf Gold -- wie das Laufband mit dunkler Schrift. */
.hof-head, .hof-head h2 { color: var(--c-dark); }
.hof-head .eyebrow { color: rgba(33, 26, 18, .72); }
.hof-head .lead { color: rgba(33, 26, 18, .82); }
.hof-head .link-u, .hof-head .link-u:hover { color: var(--c-dark); }
.hof-head {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
align-items: end;
gap: clamp(28px, 5vw, 90px);
margin-bottom: clamp(44px, 5vw, 72px);
}
.hof-head h2 { font-size: clamp(2.4rem, 5.6vw, 5rem); line-height: .98; margin: 0; }
.hof-intro { border-left: 1px solid rgba(33, 26, 18, .3); padding-left: clamp(20px, 2.4vw, 36px); }
.hof-intro .lead { margin: 0 0 18px; }
/* Mindesthoehe so, dass der aufgezogene Text (Brot: mit Brottag-Zeile) auch
auf Laptops unter die grosse Nummer passt. */
.hof-panels { display: flex; height: calc(clamp(460px, 50vh, 500px) + var(--hof-top, 0px)); background: var(--c-dark); }
.hof-panel {
position: relative;
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: clamp(26px, 2.4vw, 40px);
/* Oben Platz fuer die Nummer freihalten, damit der Text nie darunter rutscht. */
padding-top: calc(var(--hof-top, 0px) + clamp(20px, 2vw, 32px) + clamp(3rem, 5vw, 5.25rem) * .85 + 18px);
overflow: hidden;
isolation: isolate;
transition: flex-grow .75s var(--ease);
}
.hof-panel + .hof-panel { border-left: 1px solid rgba(255, 255, 255, .1); }
.hof-media {
position: absolute;
inset: 0;
z-index: -2;
background-size: cover;
/* --fy: Hoehe des Motivs (Gesicht) im Foto. Bildausschnitt und Zoom richten
sich danach, sonst rutschen Koepfe beim Aufziehen oben aus dem Bild. */
background-position: center var(--fy, 50%);
transform-origin: center var(--fy, 50%);
transform: scale(1.04);
transition: transform 1.2s var(--ease), filter .6s var(--ease);
}
.hof-panel.is-pending .hof-media {
background:
radial-gradient(120% 70% at 50% 0%, rgba(199, 161, 122, .26), transparent 60%),
repeating-linear-gradient(135deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 11px),
#2a2117;
}
.hof-panel::after {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(180deg, rgba(20, 16, 11, .35) 0%, rgba(20, 16, 11, .2) 30%, rgba(20, 16, 11, .78) 62%, rgba(20, 16, 11, .95) 100%);
}
/* Goldkante unten, die beim aktiven Standbein aufzieht */
.hof-panel::before {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: 3px;
z-index: 2;
background: var(--c-gold);
transform: scaleX(0);
transform-origin: left;
transition: transform .6s var(--ease);
}
.hof-panel:hover::before, .hof-panel:focus-within::before { transform: scaleX(1); }
.hof-num {
position: absolute;
top: calc(var(--hof-top, 0px) + clamp(20px, 2vw, 32px));
left: clamp(22px, 2.4vw, 38px);
font-family: var(--f-display);
font-weight: 600;
font-size: clamp(3rem, 5vw, 5.25rem);
line-height: .85;
color: transparent;
-webkit-text-stroke: 1px rgba(199, 161, 122, .6);
transition: color .6s var(--ease);
}
.hof-panel:hover .hof-num, .hof-panel:focus-within .hof-num { color: rgba(199, 161, 122, .92); }
.hof-glyph {
position: absolute;
top: calc(var(--hof-top, 0px) + clamp(24px, 2.4vw, 38px));
right: clamp(22px, 2.4vw, 38px);
width: 54px; height: 54px;
color: var(--c-gold);
opacity: .7;
}
.hof-glyph svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
/* Ohne Foto wird das Symbol zum grossen Wasserzeichen in der Bahnmitte. */
.hof-panel.is-pending .hof-glyph {
top: 42%; right: 50%;
width: min(46%, 200px); height: auto;
aspect-ratio: 1;
transform: translate(50%, -50%);
opacity: .16;
}
.hof-body { position: relative; z-index: 1; max-width: 460px; }
.hof-panel .eyebrow { color: var(--c-gold); margin-bottom: 4px; }
.hof-panel h3 { color: #fff; font-size: clamp(1.35rem, 1.9vw, 2.1rem); letter-spacing: .04em; margin: 0; }
.hof-more { display: grid; grid-template-rows: 1fr; }
.hof-more > div { min-height: 0; overflow: hidden; }
.hof-more p { color: rgba(255, 255, 255, .76); font-size: .92rem; line-height: 1.75; margin: 14px 0 16px; }
.hof-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.hof-tags li {
font-family: var(--f-display);
font-size: .62rem;
letter-spacing: .13em;
text-transform: uppercase;
color: rgba(255, 255, 255, .7);
border: 1px solid rgba(255, 255, 255, .24);
padding: 4px 9px;
}
.hof-link {
display: inline-flex;
align-items: center;
gap: 9px;
margin-top: 20px;
font-family: var(--f-display);
font-size: .74rem;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--c-gold);
}
.hof-link::after { content: "→"; transition: transform var(--t-fast) var(--ease); }
.hof-panel:hover .hof-link::after { transform: translateX(5px); }
.hof-cover { position: absolute; inset: 0; z-index: 3; }
/* Aufziehen nur, wo es eine Maus gibt und Platz ist. */
@media (hover: hover) and (min-width: 1101px) {
.hof-panel:hover, .hof-panel:focus-within { flex-grow: 1.85; }
.hof-media { filter: grayscale(.45) brightness(.8); }
.hof-panel:hover .hof-media, .hof-panel:focus-within .hof-media { transform: scale(1.1); filter: none; }
.hof-more { grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .6s var(--ease), opacity .35s var(--ease); }
.hof-panel:hover .hof-more, .hof-panel:focus-within .hof-more { grid-template-rows: 1fr; opacity: 1; transition-delay: .15s; }
/* Feste Textbreite, damit der Absatz beim Aufziehen nicht neu umbricht. */
.hof-more > div { width: min(420px, 30vw); }
}
@media (max-width: 1000px), (hover: none) {
.hof-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); height: auto; }
.hof-panel { min-height: calc(clamp(280px, 38vw, 360px) + var(--hof-top, 0px)); }
.hof-panel + .hof-panel { border-left: 0; }
.hof-panel:nth-child(even) { border-left: 1px solid rgba(255, 255, 255, .1); }
.hof-panel:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .1); }
}
@media (max-width: 760px) {
.hof-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
.hof-panels { grid-template-columns: minmax(0, 1fr); }
.hof-panel { min-height: calc(270px + var(--hof-top, 0px)); }
.hof-panel:nth-child(even) { border-left: 0; }
.hof-panel + .hof-panel { border-top: 1px solid rgba(255, 255, 255, .1); }
}
/* Startseite: kein Kopf, die Bahnen ruecken ins Titelbild hinauf. Ihre
Oberkante ist mit derselben Welle maskiert wie die Papierkante -- so laufen
die Fotos direkt ins Titelbild hinein. --hof-top schiebt Nummer und Symbol
der obersten Reihe unter die Welle. */
.hof--flush {
--wave: 46px;
--hof-top: var(--wave);
position: relative;
z-index: 3;
margin-top: calc(-1 * var(--wave));
padding-top: 0;
background: none;
}
.hof--flush .hof-panels {
-webkit-mask:
url("data:image/svg+xml;utf8,") center top / 100% var(--wave) no-repeat,
linear-gradient(#000 0 0) 0 calc(var(--wave) - 1px) / 100% 100% no-repeat;
mask:
url("data:image/svg+xml;utf8,") center top / 100% var(--wave) no-repeat,
linear-gradient(#000 0 0) 0 calc(var(--wave) - 1px) / 100% 100% no-repeat;
}
@media (max-width: 1000px), (hover: none) { .hof--flush .hof-panel:nth-child(n+3) { --hof-top: 0px; } }
@media (max-width: 960px) { .hof--flush { --wave: 28px; } }
@media (max-width: 760px) { .hof--flush .hof-panel:nth-child(n+2) { --hof-top: 0px; } }
/* Laufband: Unten reisst die Papierkante ins Gold, daher der Puffer. */
.hof-ticker { background: var(--c-gold); color: var(--c-dark); overflow: hidden; padding: 18px 0 62px; }
.hof-ticker-track { display: flex; width: max-content; animation: hof-marquee 70s linear infinite; }
.hof-ticker span {
display: inline-flex;
align-items: center;
font-family: var(--f-display);
font-size: clamp(.9rem, 1.3vw, 1.15rem);
letter-spacing: .18em;
text-transform: uppercase;
white-space: nowrap;
}
.hof-ticker span::after {
content: '';
width: 7px; height: 7px;
margin: 0 1.7em;
background: currentColor;
opacity: .5;
transform: rotate(45deg);
}
@keyframes hof-marquee { to { transform: translateX(-50%); } }
@media (max-width: 960px) { .hof-ticker { padding-bottom: 44px; } }
@media (prefers-reduced-motion: reduce) { .hof-ticker-track { animation: none; } }
/* --------------------------------------------------------------- Schrittkette */
/* Einkauf -> Roestprozess, Korn -> Mehl -> Brot, ... */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); }
.step-card { background: var(--c-bg); padding: 34px 30px 32px; }
.section-alt .step-card { background: var(--c-surface); }
/* Dunkler Abschnitt: Karten dunkel lassen. Die halbtransparente Karte liess
sonst den hellen .steps-Hintergrund durchscheinen -> weisse Schrift auf Hell. */
.section-dark .steps { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .12); }
.section-dark .step-card { background: #2a2219; }
.section-dark .step-card p { color: rgba(255, 255, 255, .72); }
.step-card .step-n {
display: block;
font-family: var(--f-display);
font-size: .68rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--c-gold-dark);
margin-bottom: 12px;
}
.section-dark .step-card .step-n { color: var(--c-gold); }
.step-card h3 { margin-bottom: 10px; }
.step-card > img { width: 100%; aspect-ratio: 4/3; object-fit: cover; margin-bottom: 24px; }
.step-card p { font-size: .92rem; margin: 0; color: var(--c-muted); }
.step-card p + p { margin-top: 12px; }
/* --------------------------------------------------------------- Faktenzeile */
.factbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 30px; }
.fact { border-left: 2px solid var(--c-gold); padding-left: 18px; }
.fact strong { display: block; font-family: var(--f-display); font-size: 1.45rem; color: var(--c-ink); line-height: 1.15; text-transform: uppercase; letter-spacing: .02em; }
.section-dark .fact strong { color: #fff; }
.fact span { font-size: .84rem; color: var(--c-muted); }
/* Interner Hinweis auf fehlendes Bildmaterial — vor dem Livegang entfernen. */
.todo-note {
background: var(--c-gold-soft);
border: 1px dashed rgba(199, 161, 122, .6);
color: var(--c-gold-dark);
font-size: .82rem;
padding: 12px 18px;
margin: 0 auto;
max-width: 900px;
text-align: center;
}
/* Seitenkopf, solange fuer eine Seite noch kein Foto vorliegt — dieselbe
dunkle Flaeche wie bei den Foto-Baendern, damit die Schrift lesbar bleibt. */
.hero-bg.is-pending {
background:
radial-gradient(90% 80% at 25% 0%, rgba(199, 161, 122, .26), transparent 62%),
var(--c-dark);
}
.hero-bg.is-pending::after { background: linear-gradient(180deg, rgba(20, 16, 11, .3), rgba(20, 16, 11, .58)); }
/* Startseite: Titelbild mit mehreren Bildern, die ineinander ueberblenden. */
.hero-slides { position: absolute; inset: 0; z-index: 0; }
.hero-slides .hero-bg { opacity: 0; transition: opacity 1.2s var(--ease); }
.hero-slides .hero-bg.is-on { opacity: 1; }
.hero-arrow {
position: absolute; top: 50%; z-index: 3;
width: 52px; height: 52px; margin-top: -26px;
display: grid; place-items: center;
border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%;
background: rgba(20, 16, 11, .22); color: #fff; cursor: pointer;
transition: background .25s, border-color .25s;
}
.hero-arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hero-arrow:hover, .hero-arrow:focus-visible { background: rgba(20, 16, 11, .5); border-color: var(--c-gold); }
.hero-arrow--prev { left: clamp(12px, 3vw, 40px); }
.hero-arrow--next { right: clamp(12px, 3vw, 40px); }
.hero-dots {
position: absolute; z-index: 3; left: 50%; transform: translateX(-50%);
top: calc(var(--top-h) + 18px);
display: flex; gap: 4px;
}
.hero-dots button { width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.hero-dots button::before { content: ''; width: 22px; height: 2px; background: rgba(255, 255, 255, .45); transition: background .25s; }
.hero-dots button.on::before { background: var(--c-gold); }
@media (max-width: 720px) {
.hero-arrow { width: 40px; height: 40px; margin-top: -20px; top: auto; bottom: 30%; }
.hero-arrow svg { width: 18px; height: 18px; }
}
@media (prefers-reduced-motion: reduce) { .hero-slides .hero-bg { transition: none; } }
.hero-badge { display: block; }
.hero-texts { display: grid; }
.hero-texts > .hero-inner { grid-area: 1 / 1; align-self: center; opacity: 0; visibility: hidden; transition: opacity .8s var(--ease), visibility 0s .8s; }
.hero-texts > .hero-inner.is-on { opacity: 1; visibility: visible; transition: opacity .8s var(--ease) .25s, visibility 0s; }
.hero .hero-title {
color: #fff;
font-size: clamp(2.4rem, 7vw, 5.4rem);
font-weight: 700;
letter-spacing: 0.005em;
margin-bottom: 20px;
text-shadow: 0 2px 30px rgba(0, 0, 0, .35);
}
@media (prefers-reduced-motion: reduce) { .hero-texts > .hero-inner, .hero-texts > .hero-inner.is-on { transition: none; } }
/* Der Lade-Auftritt laeuft auf dem ganzen Textstapel, sonst haelt die Animation jeden Text sichtbar. */
.hero-texts { animation: rise-in .9s var(--ease) both; }
.hero-texts > .hero-inner { animation: none; }
/* Helle Landschaftsbilder: weniger abdunkeln, damit der Hof im Bild sichtbar bleibt. */
.hero-bg--light::after { background: linear-gradient(180deg, rgba(20,16,11,.5) 0%, rgba(20,16,11,.22) 50%, rgba(20,16,11,.4) 100%); }
/* ===== Brottage-Kalender (assets/js/brottage.js) ===== */
.bt-sub { font-size: 1rem; letter-spacing: .08em; margin: 30px 0 12px; }
.bt-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-line); }
.bt-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 12px 0 12px 22px; border-bottom: 1px solid var(--c-line); position: relative; }
.bt-list li::before { content: ''; position: absolute; left: 0; top: 18px; width: 10px; height: 10px; background: var(--c-ok); }
.bt-list li strong { font-weight: 600; color: var(--c-ink); }
.bt-list li span { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--c-err); font-weight: 600; }
.bt-list li small { flex-basis: 100%; color: var(--c-muted); font-size: .85rem; }
.bt-list li.is-off::before { background: var(--c-err); }
.bt-list li.is-off strong { text-decoration: line-through; color: var(--c-muted); }
.bt-empty { color: var(--c-muted); }
.bt-abo { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.bt-hint { font-size: .85rem; color: var(--c-muted); margin-top: 12px; }
.bt-card { background: #fff; padding: clamp(18px, 3vw, 32px); box-shadow: var(--shadow-sm); }
.bt-month-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.bt-month-head strong { font-family: var(--f-display); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; font-size: 1.25rem; flex: 1; text-align: center; }
.bt-nav { width: 40px; height: 40px; border: 1px solid var(--c-line); background: transparent; font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--c-ink); transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.bt-nav:hover { background: var(--c-gold); border-color: var(--c-gold); color: #fff; }
.bt-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.bt-wd { text-align: center; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--c-muted); padding-bottom: 6px; }
.bt-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: .95rem; color: var(--c-ink); background: var(--c-surface); }
.bt-day.is-empty { background: transparent; }
.bt-day.is-weekend { color: var(--c-muted); }
.bt-day.is-bake { background: var(--c-ok); color: #fff; font-weight: 700; }
.bt-day.is-off { background: rgba(178, 59, 50, .12); color: var(--c-err); text-decoration: line-through; }
.bt-day.is-today { outline: 2px solid var(--c-gold); outline-offset: -2px; }
.bt-legend { display: flex; gap: 20px; margin-top: 16px; font-size: .82rem; color: var(--c-muted); }
.bt-legend span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.bt-legend .bt-legend-hint { white-space: normal; }
.bt-dot { width: 12px; height: 12px; display: inline-block; }
.bt-dot.is-bake { background: var(--c-ok); }
.bt-dot.is-off { background: rgba(178, 59, 50, .3); }
.bt-next-pill { display: inline-flex; gap: 6px; margin-top: 22px; padding: 10px 18px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .35); color: #fff; font-size: .9rem; text-decoration: none; }
.bt-next-pill:hover { background: rgba(255, 255, 255, .24); }
/* Am Handy nicht als zwei schmale Spalten umbrechen, sondern untereinander */
@media (max-width: 560px) {
.bt-next-pill { flex-direction: column; align-items: center; gap: 2px; text-align: center; }
}
.bt-next-pill[hidden], .bt-next-line[hidden] { display: none; }
.bt-next-line { margin-top: 10px; }
.bt-next-line strong { color: var(--c-gold); }
/* Druckansicht (neues Fenster aus "Drucken / PDF") */
body.bt-print { padding: 24px; background: #fff; }
.bt-print-head { display: flex; align-items: center; gap: 18px; margin-bottom: 24px; }
.bt-print-head h1 { margin: 0; font-size: 2rem; }
.bt-print-head p { margin: 4px 0 0; color: var(--c-muted); font-size: .9rem; }
.bt-print-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 28px; }
.bt-print .bt-day { font-size: .8rem; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.bt-print .bt-dot { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
@media print { @page { size: A4 landscape; margin: 12mm; } body.bt-print { padding: 0; } }
@media (max-width: 760px) { .bt-abo .btn { flex: 1 1 calc(50% - 10px); text-align: center; justify-content: center; } }
/* ===== Brot-Vorbestellung (brot-bestellen.html) ===== */
.bb-next { background: #fff; border: 1px solid var(--c-line); padding: clamp(20px, 3vw, 30px); display: grid; grid-template-columns: 1fr auto; gap: 18px 30px; align-items: center; }
.bb-badge { display: inline-block; background: var(--c-gold); color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 5px 10px; }
.bb-next-head h3 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); margin: 10px 0 6px; }
.bb-cd { margin: 0; color: var(--c-muted); font-size: .92rem; }
.bb-cd.is-soon { color: var(--c-warn); font-weight: 600; }
.bb-next-days { display: flex; gap: 10px; flex-wrap: wrap; }
.bb-next .bb-day { min-width: 150px; padding: 16px 20px; }
.bb-next .bb-day strong { font-size: 1.15rem; }
.bb-later-title { margin: 26px 0 8px; font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); }
.bb-later { border-top: 1px solid var(--c-line); }
.bb-later-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; padding: 12px 4px; border-bottom: 1px solid var(--c-line); }
.bb-later-row strong { display: block; font-size: 1rem; }
.bb-later-row small { color: var(--c-muted); font-size: .82rem; }
.bb-later-row.is-chosen { background: var(--c-gold-soft); }
.bb-later-days { display: flex; gap: 8px; }
.bb-later-days .bb-day { flex-direction: row; align-items: baseline; gap: 6px; padding: 8px 14px; }
.bb-later-days .bb-day small { font-size: .85rem; }
.bb-more { margin-top: 12px; background: none; border: 0; padding: 4px 0; color: var(--c-gold-dark); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; }
@media (max-width: 640px) {
.bb-next { grid-template-columns: 1fr; }
.bb-next .bb-day { flex: 1 1 0; min-width: 0; }
}
.bb-wrap { max-width: 860px; }
.bb-empty { color: var(--c-muted); padding: 40px 0; text-align: center; }
.bb-form[hidden], .bb-done[hidden], .bb-empty[hidden] { display: none; }
.bb-step { padding: 30px 0; border-bottom: 1px solid var(--c-line); }
.bb-step:first-child { padding-top: 0; }
.bb-step h2 { display: flex; align-items: center; gap: 14px; font-size: 1.35rem; margin: 0 0 18px; }
.bb-num { width: 34px; height: 34px; flex: 0 0 34px; display: inline-flex; align-items: center; justify-content: center; background: var(--c-gold); color: #fff; font-size: 1rem; }
.bb-locs { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.bb-day, .bb-loc { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 14px 16px; border: 1px solid var(--c-line); background: #fff; cursor: pointer; font: inherit; color: var(--c-ink); transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.bb-day:hover:not(:disabled), .bb-loc:hover { border-color: var(--c-gold); }
.bb-day.active, .bb-loc.active { border-color: var(--c-gold); background: var(--c-gold-soft); box-shadow: inset 0 0 0 1px var(--c-gold); }
.bb-day:disabled { opacity: .5; cursor: not-allowed; }
.bb-day strong, .bb-loc strong { font-size: 1.02rem; }
.bb-day small, .bb-loc small { color: var(--c-muted); font-size: .82rem; }
.bb-day em { font-style: normal; font-size: .8rem; color: var(--c-gold-dark); }
.bb-loc input { position: absolute; opacity: 0; pointer-events: none; }
.bb-loc { position: relative; }
.bb-products { display: grid; gap: 10px; }
.bb-prod { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding: 14px 18px; background: #fff; border: 1px solid var(--c-line); }
.bb-prod.is-out { opacity: .55; }
.bb-prod-name { display: flex; flex-direction: column; gap: 2px; }
.bb-out { color: var(--c-err); font-weight: 600; font-size: .8rem; }
.bb-few { color: var(--c-warn); font-weight: 600; font-size: .8rem; }
.bb-sizes { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.bb-size { display: flex; align-items: center; gap: 12px; }
.bb-size-label { font-size: .92rem; color: var(--c-ink-soft); min-width: 52px; }
.bb-size-label b { color: var(--c-ink); font-weight: 600; margin-left: 4px; }
.bb-stepper { display: inline-flex; align-items: center; border: 1px solid var(--c-line); }
.bb-stepper button { width: 36px; height: 36px; border: 0; background: transparent; font-size: 1.15rem; cursor: pointer; color: var(--c-ink); }
.bb-stepper button:hover:not(:disabled) { background: var(--c-gold); color: #fff; }
.bb-stepper button:disabled { color: var(--c-line); cursor: default; }
.bb-stepper output { min-width: 30px; text-align: center; font-weight: 600; }
.bb-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.bb-fields .bb-wide { grid-column: 1 / -1; }
.bb-fields label small { font-weight: 400; color: var(--c-muted); }
.bb-hint { font-size: .85rem; color: var(--c-muted); margin: 6px 0 14px; }
.bb-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin: 28px 0 14px; padding: 20px 22px; background: var(--c-dark); color: #fff; }
.bb-sum-text { font-weight: 600; }
.bb-sum-total { color: var(--c-gold); font-size: .92rem; margin-top: 2px; }
.bb-done { background: #fff; padding: clamp(24px, 4vw, 44px); box-shadow: var(--shadow-sm); }
.bb-done h2 { margin: 6px 0 20px; }
.bb-done-facts { list-style: none; padding: 0; margin: 0 0 18px; border-top: 1px solid var(--c-line); }
.bb-done-facts li { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--c-line); }
.bb-done-facts span { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--c-muted); padding-top: 3px; }
.bb-done-facts small { color: var(--c-muted); font-weight: 400; }
.bb-done-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
@media (max-width: 640px) {
.bb-fields { grid-template-columns: 1fr; }
.bb-prod { padding: 14px; }
.bb-sizes { flex-direction: column; width: 100%; }
.bb-size { justify-content: space-between; }
.bb-summary .btn { width: 100%; justify-content: center; }
.bb-done-facts li { grid-template-columns: 1fr; gap: 2px; }
}
/* Symbole über den Fakten (gleicher Strich wie die Menü-Symbole im Header) */
.fact-ico { display: block; width: 42px; height: 42px; margin-bottom: 14px; color: var(--c-gold); }
.fact-ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
/* Brottage-Kalender: grüne Tage sind Links zur Vorbestellung */
a.bt-day.is-link { text-decoration: none; cursor: pointer; transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
a.bt-day.is-link:hover, a.bt-day.is-link:focus-visible { background: #3b6331; transform: translateY(-2px); box-shadow: 0 6px 14px rgba(48, 39, 28, .18); }
.bt-legend-hint { margin-left: auto; font-style: italic; }
.bt-list .bt-order { margin-left: auto; font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--c-gold-dark); text-decoration: none; }
.bt-list .bt-order::after { content: ' →'; }
.bt-list .bt-order:hover { color: var(--c-ink); }
/* Nummer der vier Bereiche im Titelbild (z. B. "02 Korn, Mehl, Brot") */
.hero-kicker { display: inline-flex; align-items: center; gap: 14px; }
.hero-num { font-family: var(--f-display); font-style: normal; font-weight: 500; font-size: 2.1rem; line-height: 1; letter-spacing: .02em; color: var(--c-gold); padding-right: 14px; border-right: 1px solid rgba(255, 255, 255, .35); }
/* Kasse: fehlerhaftes Pflichtfeld markieren */
.checkout-form [aria-invalid="true"], #cartWrap input[aria-invalid="true"] { border-color: #c0392b !important; box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.15); }
/* Widerruf: Bestell-Auswahl nur für angemeldete Kunden – .field setzt sonst display und hebt [hidden] auf */
.widerruf-form [hidden] { display: none !important; }
/* Lange Einzelwörter in Überschriften (z. B. „Datenschutzerklärung“) nicht über den Rand laufen lassen */
h1 { overflow-wrap: break-word; hyphens: auto; }
h2 { overflow-wrap: break-word; }
@media (max-width: 420px) {
h1 { font-size: clamp(1.7rem, 8.2vw, 2.1rem); }
}