@font-face {
  font-family: 'Bricolage';
  src: url('/assets/fonts/BricolageGrotesque-Latin.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'Bricolage';
  src: url('/assets/fonts/BricolageGrotesque-LatinExt.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  src: url('/assets/fonts/DMSans-Latin.woff2') format('woff2');
  font-weight: 100 1000;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'DM Sans';
  src: url('/assets/fonts/DMSans-LatinExt.woff2') format('woff2');
  font-weight: 100 1000;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --leinen: #f2e9d8;
  --leinen-tief: #e6d8c0;
  --karte: #fdf8ee;
  --weide: #b8874a;
  --weide-dunkel: #7f5a2c;
  --terrakotta: #a8452f;
  --rinde: #3a2d22;
  --rinde-weich: #665545;
  --moos: #56683f;
  --raum-1: 8px;
  --raum-2: 16px;
  --raum-3: 24px;
  --raum-4: 32px;
  --raum-6: 48px;
  --raum-8: 64px;
  --raum-12: 96px;
  --rund: 20px;
  --bogen: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--leinen);
  color: var(--rinde);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: clamp(1rem, 0.95rem + 0.24vw, 1.09rem);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

.geflecht {
  background-image:
    repeating-linear-gradient(45deg, rgba(184,135,74,0.055) 0 3px, transparent 3px 14px),
    repeating-linear-gradient(-45deg, rgba(184,135,74,0.055) 0 3px, transparent 3px 14px);
}

h1, h2, h3, h4 {
  font-family: 'Bricolage', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 var(--raum-3); max-width: 64ch; }
ul, ol { max-width: 64ch; }

a { color: var(--weide-dunkel); text-underline-offset: 3px; }
a:hover { color: var(--terrakotta); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--terrakotta); outline-offset: 3px; border-radius: 4px; }

img { max-width: 100%; height: auto; }

.sprung {
  position: absolute; left: -9999px;
  background: var(--rinde); color: var(--leinen);
  padding: 12px 20px; border-radius: 0 0 12px 0; z-index: 10;
}
.sprung:focus { left: 0; top: 0; color: var(--leinen); }

.bahn { max-width: 1160px; margin: 0 auto; padding: 0 var(--raum-3); }

/* ---------- Kopf ---------- */
.kopf { padding: var(--raum-3) 0; }
.kopf-innen { display: flex; align-items: center; justify-content: space-between; gap: var(--raum-3); flex-wrap: wrap; }
.marke {
  font-family: 'Bricolage', system-ui, sans-serif;
  font-weight: 800; font-size: 1.4rem; letter-spacing: -0.045em;
  color: var(--rinde); text-decoration: none;
}
.marke span { color: var(--weide); }
.nav { display: flex; gap: 4px; flex-wrap: wrap; }
.nav a {
  text-decoration: none; color: var(--rinde-weich);
  font-size: 0.93rem; font-weight: 500;
  padding: 10px 14px; border-radius: 999px;
  transition: background 0.35s var(--bogen), color 0.3s;
}
.nav a:hover, .nav a[aria-current="page"] { background: var(--leinen-tief); color: var(--rinde); }

/* ---------- Hero ---------- */
.hero { padding: clamp(var(--raum-6), 7vw, var(--raum-12)) 0; }
.hero-box {
  background: var(--karte);
  border-radius: var(--rund);
  padding: clamp(var(--raum-6), 6vw, var(--raum-12));
  position: relative; overflow: hidden;
  border: 2px solid var(--leinen-tief);
}
.hero-box::before, .hero-box::after { content: ''; position: absolute; border-radius: 50%; }
.hero-box::before { right: -90px; top: -90px; width: 340px; height: 340px; background: var(--weide); opacity: 0.3; }
.hero-box::after { right: 30px; bottom: -130px; width: 260px; height: 260px; background: var(--moos); opacity: 0.26; }
.hero-inhalt { position: relative; max-width: 46ch; }
.hero h1 { font-size: clamp(2.2rem, 1.3rem + 3.6vw, 4rem); margin-bottom: var(--raum-3); max-width: 17ch; }
.hero h1 mark { background: none; color: var(--terrakotta); }
.hero p { font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); color: var(--rinde-weich); max-width: 44ch; }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-block; background: var(--rinde); color: var(--leinen);
  padding: 15px 30px; border-radius: 999px; text-decoration: none;
  font-weight: 700; font-size: 0.97rem; min-height: 44px;
  transition: transform 0.4s var(--bogen), background 0.3s;
}
.knopf:hover { background: var(--terrakotta); color: #fff; transform: translateY(-3px); }
.knopf-hell { background: var(--weide); color: #fff; }
.knopf-hell:hover { background: var(--weide-dunkel); }

/* ---------- Abschnitte ---------- */
.abschnitt { padding: 0 0 var(--raum-12); }
.abschnitt > .bahn > h2, .abschnitt-kopf h2 { font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3rem); margin-bottom: var(--raum-3); }
.vorsatz { font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--weide-dunkel); font-weight: 700; margin-bottom: var(--raum-2); }
.zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(var(--raum-4), 5vw, var(--raum-8)); align-items: center; }

/* ---------- Karten: für überschaubare Mengen (bis ~12) ---------- */
.faecher { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--raum-3); margin-top: var(--raum-6); }
.fach {
  background: var(--karte); border-radius: var(--rund); padding: var(--raum-4);
  text-decoration: none; color: var(--rinde); border: 2px solid transparent;
  transition: transform 0.45s var(--bogen), border-color 0.35s;
}
.fach:hover { transform: translateY(-5px); border-color: var(--weide); color: var(--rinde); }
.fach .zeichen {
  width: 42px; height: 42px; border-radius: 12px; background: var(--leinen-tief);
  display: grid; place-items: center;
  font-family: 'Bricolage', system-ui, sans-serif; font-weight: 800; color: var(--weide-dunkel);
  margin-bottom: var(--raum-3);
}
.fach h3 { font-size: 1.22rem; margin-bottom: 6px; }
.fach p { font-size: 0.93rem; color: var(--rinde-weich); margin: 0; }

/* ---------- Kompakte Liste: für große Mengen (Regionen, Orte) ---------- */
.register {
  list-style: none; margin: var(--raum-4) 0 0; padding: 0;
  columns: 3; column-gap: var(--raum-6);
}
.register li { break-inside: avoid; margin-bottom: 2px; }
.register a {
  display: block; text-decoration: none; color: var(--rinde);
  padding: 9px var(--raum-2); border-radius: 10px; min-height: 44px;
  transition: background 0.3s var(--bogen);
}
.register a:hover { background: var(--karte); color: var(--rinde); }
.register strong { font-weight: 600; }
.register span { display: block; font-size: 0.85rem; color: var(--rinde-weich); }

.register-kopf {
  font-family: 'Bricolage', system-ui, sans-serif; font-weight: 800;
  color: var(--weide-dunkel); font-size: 0.95rem;
  border-bottom: 2px solid var(--leinen-tief); padding-bottom: 4px;
  margin: var(--raum-4) 0 var(--raum-1); break-after: avoid;
}

/* ---------- Dunkles Band ---------- */
.breit { background: var(--rinde); color: var(--leinen); border-radius: var(--rund); padding: clamp(var(--raum-6), 6vw, var(--raum-8)); }
.breit h2 { color: var(--karte); font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); margin-bottom: var(--raum-3); }
.breit p { color: #ded0ba; }
.breit .vorsatz { color: var(--weide); }
.breit .knopf { background: var(--leinen); color: var(--rinde); }
.breit .knopf:hover { background: var(--weide); color: #fff; }
.breit .zutaten li { background: rgba(242,233,216,0.07); }
.breit .zutaten strong { color: #e6b877; }
.breit .zutaten span { color: #ccbda9; }

/* ---------- Artikel ---------- */
.brot { font-size: 0.86rem; color: var(--rinde-weich); padding: var(--raum-2) 0 var(--raum-4); }
.brot a { color: var(--rinde-weich); }

.artikel { padding-bottom: var(--raum-12); }
.artikel-kopf {
  background: var(--karte); border-radius: var(--rund);
  padding: clamp(var(--raum-4), 5vw, var(--raum-8));
  margin-bottom: var(--raum-8); border: 2px solid var(--leinen-tief);
}
.artikel-kopf h1 { font-size: clamp(2.1rem, 1.3rem + 3.2vw, 3.8rem); margin-bottom: var(--raum-3); max-width: 16ch; }
.artikel-kopf .unter { font-size: 1.08rem; color: var(--rinde-weich); max-width: 58ch; margin: 0; }

.satz { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: clamp(var(--raum-4), 5vw, var(--raum-8)); align-items: start; }
.haupt h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); margin: var(--raum-8) 0 var(--raum-3); }
.haupt h2:first-child { margin-top: 0; }
.haupt h3 { font-size: 1.18rem; margin: var(--raum-4) 0 var(--raum-1); }

.zutaten { list-style: none; margin: var(--raum-3) 0 var(--raum-6); padding: 0; display: grid; gap: var(--raum-2); }
.zutaten li {
  background: var(--karte); border-radius: 14px; padding: var(--raum-3);
  display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: var(--raum-3); align-items: baseline;
}
.zutaten strong { font-family: 'Bricolage', system-ui, sans-serif; color: var(--weide-dunkel); }
.zutaten span { font-size: 0.95rem; color: var(--rinde-weich); }

.seite { position: sticky; top: var(--raum-3); display: grid; gap: var(--raum-3); }
.merk { background: var(--leinen-tief); border-radius: var(--rund); padding: var(--raum-4); }
.merk h2, .merk h3 { font-size: 1.05rem; margin-bottom: var(--raum-2); }
.merk ul { margin: 0; padding-left: 1.1rem; font-size: 0.94rem; color: var(--rinde-weich); }
.merk li { margin-bottom: 6px; }

.hinweis { font-size: 0.86rem; color: var(--rinde-weich); background: var(--leinen-tief); border-radius: 14px; padding: var(--raum-3); margin: var(--raum-6) 0 0; max-width: none; }
.hinweis-wichtig {
  max-width: none;
  font-size: 0.92rem; color: var(--rinde);
  background: var(--karte); border-left: 5px solid var(--terrakotta);
  border-radius: 0 14px 14px 0; padding: var(--raum-3) var(--raum-4);
}

/* ---------- Fuß ---------- */
.fuss { padding: var(--raum-6) 0; font-size: 0.9rem; color: var(--rinde-weich); }
.fuss-innen { display: flex; justify-content: space-between; gap: var(--raum-3); flex-wrap: wrap; border-top: 2px solid var(--leinen-tief); padding-top: var(--raum-4); }
.fuss p { margin: 0; }
.fuss a { color: var(--rinde-weich); }

@media (max-width: 980px) { .register { columns: 2; } }
@media (max-width: 860px) {
  .zwei, .satz { grid-template-columns: minmax(0, 1fr); }
  .seite { position: static; }
  .register { columns: 1; }
  .faecher { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

/* ---------- Adressliste auf Ortsseiten ---------- */
.adressen { list-style: none; margin: var(--raum-2) 0 var(--raum-4); padding: 0; display: grid; gap: 1px; background: var(--leinen-tief); border-radius: 14px; overflow: hidden; }
.adressen li { background: var(--karte); padding: var(--raum-2) var(--raum-3); display: flex; flex-wrap: wrap; gap: 4px var(--raum-3); align-items: baseline; }
.adressen strong { font-family: 'Bricolage', system-ui, sans-serif; font-weight: 700; }
.adressen span { font-size: 0.9rem; color: var(--rinde-weich); }
.adressen--schmal li { justify-content: space-between; }
.klein { font-size: 0.85rem; color: var(--rinde-weich); }

/* ---------- Formular ---------- */
.formular { max-width: 46rem; margin: var(--raum-6) 0; }
.feld { display: grid; gap: 6px; margin-bottom: var(--raum-4); max-width: none; }
.feld label { font-family: 'Bricolage', system-ui, sans-serif; font-weight: 700; font-size: 0.95rem; }
.feld input, .feld textarea {
  font: inherit; color: var(--rinde);
  background: var(--karte); border: 2px solid var(--leinen-tief);
  border-radius: 14px; padding: 12px var(--raum-2); width: 100%;
  min-height: 44px;
}
.feld textarea { min-height: 9rem; resize: vertical; }
.feld input:focus, .feld textarea:focus { outline: 3px solid var(--terrakotta); outline-offset: 2px; border-color: var(--weide); }
.feld-hinweis { font-size: 0.85rem; color: var(--rinde-weich); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Schnellauswahl: Zeile mit Icon ---------- */
.schnell-zeile {
  display: flex; align-items: center;
  gap: var(--raum-2);
  max-width: none;
  margin: var(--raum-6) 0 var(--raum-1);
  font-size: clamp(1.4rem, 1.1rem + 1.1vw, 2rem);
  color: var(--rinde);
}
.schnell-unter { max-width: none; margin: 0 0 var(--raum-2); padding-bottom: var(--raum-2); border-bottom: 2px solid var(--leinen-tief); }
.schnell-icon {
  width: 1.1em; height: 1.1em; flex: none;
  fill: none; stroke: var(--weide-dunkel); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- Klassen statt style-Attribut ----------
   Inline-Styles zwingen die Content-Security-Policy zu 'unsafe-inline' und
   heben damit einen guten Teil ihres Schutzes auf. Die zwoelf Stellen aus
   den Views stehen deshalb hier. */
.abschnitt--luft { padding-top: var(--raum-8); }
.seitentitel     { font-size: clamp(2rem, 1.3rem + 2.8vw, 3.2rem); margin-bottom: var(--raum-3); }
.kopf--abstand   { margin-top: var(--raum-8); }
.kopf--abstand-s { margin-top: var(--raum-6); }
.faecher--abstand{ margin-top: var(--raum-3); }
.fach-titel      { font-size: 1.22rem; margin-bottom: 6px; }
.mehr-zeile      { margin-top: var(--raum-6); }
.mehr-zeile--s   { margin-top: var(--raum-4); }
.hinweis-wichtig--kopf { margin: 0 0 var(--raum-6); }