/* Klettgau-Perle / Dreher Fruchtsäfte — statische Seite.
   Blend: roter Kopfbalken + Plakate des alten Auftritts,
   aufgeräumte Struktur mit echtem Text. */

:root {
  --rot:        #cc2b1d;
  --rot-dunkel: #a51f14;
  --gruen:      #5c9a3d;
  --gruen-tief: #34641f;
  --gold:       #bf9a3f;
  --creme:      #ffffff;
  --karte:      #ffffff;
  --tinte:      #262420;
  --tinte-weich:#5a554c;
  --linie:      #e3dcc9;
  --schatten:   0 1px 2px rgba(38,36,32,.06), 0 6px 20px rgba(38,36,32,.07);
  --radius:     14px;
  --breite:     1120px;
  --schrift:    "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --display:    "Oswald", "Source Sans 3", Impact, sans-serif;
}

:root[data-theme="dark"]{ --creme:#191713; --karte:#23201a; --tinte:#f0ead9; --tinte-weich:#b7ad98; --linie:#3a352b; --rot:#e8503f; --rot-dunkel:#c8341f; --gruen:#7ab857; --schatten:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.4); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html { scroll-behavior:auto; } }
body { margin:0; font-family:var(--schrift); font-size:18px; line-height:1.62; color:var(--tinte); background:var(--creme); -webkit-font-smoothing:antialiased; }
h1,h2,h3 { font-family:var(--display); font-weight:600; line-height:1.1; text-wrap:balance; margin:0; }
p { margin:0 0 1em; }
img { max-width:100%; height:auto; display:block; }
a { color:var(--rot-dunkel); }
.wrap { max-width:var(--breite); margin:0 auto; padding:0 24px; }

/* Roter Kopfbalken (aus dem alten Auftritt) */
.balken { background:var(--rot); position:sticky; top:0; z-index:20; }
.balken .wrap { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:66px; }
.marke { display:flex; flex-direction:column; line-height:1; text-decoration:none; color:#fff; }
.marke b { font-family:var(--display); font-weight:700; font-size:1.5rem; letter-spacing:.05em; text-transform:uppercase; }
.marke span { font-size:.7rem; letter-spacing:.34em; text-transform:uppercase; color:#f6d9b0; margin-top:4px; }
.nav { display:flex; gap:26px; }
.nav a { color:#fff; text-decoration:none; font-weight:600; font-size:.98rem; opacity:.92; }
.nav a:hover { opacity:1; text-decoration:underline; }
@media (max-width:720px){ .nav a:not(.thema) { display:none; } }
.kopf-rechts { display:flex; align-items:center; gap:20px; }
.thema { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border:1.5px solid rgba(255,255,255,.5); background:transparent; color:#fff; border-radius:999px; cursor:pointer; padding:0; }
.thema:hover { background:rgba(255,255,255,.15); }
.thema svg { width:20px; height:20px; }
.thema .mond { display:none; }
:root[data-theme="dark"] .thema .sonne { display:none; }
:root[data-theme="dark"] .thema .mond { display:block; }

/* Hero */
.hero { padding:48px 0 38px; }
.hero .wrap { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.82fr); gap:44px; align-items:center; }
@media (max-width:860px){ .hero .wrap { grid-template-columns:minmax(0,1fr); gap:28px; } .hero-bild { order:-1; max-width:440px; margin:0 auto; } }
.eyebrow { display:inline-block; font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:.76rem; color:var(--rot); background:color-mix(in srgb,var(--rot) 12%,transparent); padding:5px 12px; border-radius:999px; }
.hero h1 { font-size:clamp(2.4rem,5.5vw,3.7rem); text-transform:uppercase; margin:16px 0 8px; }
.hero h1 .jahr { color:var(--rot); }
.hero .lead { font-size:1.2rem; color:var(--tinte-weich); max-width:36ch; }
.termin { margin:22px 0 24px; padding:16px 20px; background:var(--karte); border:1px solid var(--linie); border-left:5px solid var(--gruen); border-radius:var(--radius); box-shadow:var(--schatten); }
.termin strong { font-family:var(--display); font-weight:600; font-size:1.28rem; color:var(--gruen-tief); display:block; }
:root[data-theme="dark"] .termin strong{ color:var(--gruen); }
.termin em { font-style:normal; color:var(--tinte-weich); }
.cta-reihe { display:flex; flex-wrap:wrap; gap:12px; }
.btn { display:inline-flex; align-items:center; gap:9px; text-decoration:none; font-weight:700; padding:12px 20px; border-radius:999px; font-size:1rem; }
.btn-rot { background:var(--rot); color:#fff; box-shadow:var(--schatten); }
.btn-rot:hover { background:var(--rot-dunkel); }
.btn-linie { background:transparent; color:var(--tinte); border:1.5px solid var(--linie); }
.btn-linie:hover { border-color:var(--rot); color:var(--rot); }
.hero-bild img { border-radius:var(--radius); box-shadow:var(--schatten); width:100%; }
.hero-bild figcaption { font-size:.8rem; color:var(--tinte-weich); text-align:center; margin-top:8px; }

/* Auszeichnungsstreifen */
.trust { border-top:1px solid var(--linie); border-bottom:1px solid var(--linie); background:color-mix(in srgb,var(--gruen) 8%,var(--creme)); }
.trust .wrap { display:flex; flex-wrap:wrap; gap:8px 40px; align-items:center; justify-content:center; padding:16px 24px; text-align:center; }
.trust b { font-family:var(--display); font-weight:600; }
.trust .dlg { color:var(--gold); }
.trust .sep { color:var(--linie); }
@media (max-width:620px){ .trust .sep{ display:none; } }

section { padding:54px 0; }
.abschnitt-kopf { max-width:62ch; margin-bottom:32px; }
.abschnitt-kopf .eyebrow { margin-bottom:12px; }
.abschnitt-kopf h2 { font-size:clamp(1.8rem,4vw,2.5rem); text-transform:uppercase; }
.abschnitt-kopf p { color:var(--tinte-weich); font-size:1.08rem; margin-top:10px; }

.karten { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
@media (max-width:900px){ .karten { grid-template-columns:1fr; } }
.karte { background:var(--karte); border:1px solid var(--linie); border-radius:var(--radius); padding:26px 24px; box-shadow:var(--schatten); }
.karte .num { font-family:var(--display); font-weight:700; color:var(--rot); letter-spacing:.1em; }
.karte h3 { font-size:1.45rem; margin:6px 0 12px; }
.karte p { color:var(--tinte-weich); margin-bottom:14px; }
.karte p:last-child { margin-bottom:0; }
.tausch { width:100%; border-collapse:collapse; margin:6px 0 12px; font-variant-numeric:tabular-nums; }
.tausch td { padding:8px 0; border-bottom:1px solid var(--linie); }
.tausch td:first-child { font-weight:600; }
.tausch td:last-child { text-align:right; color:var(--gruen-tief); font-weight:700; }
:root[data-theme="dark"] .tausch td:last-child{ color:var(--gruen); }
.hinweis { font-size:.92rem; color:var(--tinte-weich); background:color-mix(in srgb,var(--rot) 7%,transparent); border-radius:10px; padding:12px 14px; }
.merkmale { list-style:none; padding:0; margin:0; }
.merkmale li { padding-left:26px; position:relative; margin-bottom:8px; color:var(--tinte-weich); }
.merkmale li::before { content:"✓"; position:absolute; left:0; color:var(--gruen); font-weight:700; }

/* Produkt/Auszeichnung */
.produkt .wrap > div { background:var(--karte); border:1px solid var(--linie); border-radius:var(--radius); box-shadow:var(--schatten); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px; align-items:center; padding:28px; }
@media (max-width:760px){ .produkt .wrap > div { grid-template-columns:1fr; } }
.produkt img { border-radius:12px; }

/* Kontakt */
.kontakt { background:color-mix(in srgb,var(--gruen) 7%,var(--creme)); border-top:1px solid var(--linie); }
.kontakt-gitter { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; }
@media (max-width:820px){ .kontakt-gitter { grid-template-columns:1fr; gap:24px; } }
.info-zeile { display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--linie); align-items:flex-start; }
.info-zeile:last-child { border-bottom:0; }
.info-zeile .label { min-width:120px; color:var(--tinte-weich); font-weight:600; }
.info-zeile a { color:var(--tinte); text-decoration:none; font-weight:600; }
.info-zeile a:hover { color:var(--rot); }
.zeiten { font-variant-numeric:tabular-nums; }

/* Fuß */
.fuss { background:var(--gruen-tief); color:#e9f0e2; padding:34px 0 26px; }
:root[data-theme="dark"] .fuss{ background:#14260c; }
.fuss a { color:#fff; }
.fuss .wrap { display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; align-items:baseline; }
.fuss .rechtslinks { display:flex; gap:22px; }
.fuss small { color:#c3d3b6; }

/* Rechtsseiten */
.rechtsseite { max-width:760px; margin:0 auto; padding:44px 24px 64px; }
.rechtsseite h1 { font-size:2.1rem; text-transform:uppercase; }
.rechtsseite h2 { font-size:1.3rem; margin:28px 0 8px; }
.rechtsseite .zurueck { display:inline-block; margin-bottom:22px; color:var(--rot); text-decoration:none; font-weight:600; }
.platzhalter { background:#fdf0c7; border:1px dashed #d8b34a; border-radius:5px; padding:0 5px; font-weight:600; color:#6b5410; }

/* Overflow-Schutz mobil */
.hero-bild, .produkt img, .spalte { min-width:0; }
body { overflow-x:hidden; }