@font-face { font-family: "Bricolage Grotesque"; src: url("../schriften/bricolage-grotesque-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("../schriften/bricolage-grotesque-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../schriften/instrument-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../schriften/instrument-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("../schriften/fraunces-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

/* Seite bereit, Kern der Kundenseiten-Vorlagen (vorlagen/README.md).
   Jede Vorlage setzt in ihrer stil.css die Marken-Variablen unten. Der Kern regelt Raster, Typografie,
   Abstände, Zustände und die gemeinsamen Module. Keine Inline-Styles (CSP), keine fremden Server. */

/* ---------- Vertrag: diese Variablen setzt jede Vorlage (hier neutrale Werte als Rückfall) ---------- */
:root {
  --grund: #FBFAF7;          /* Seitenhintergrund */
  --flaeche: #F3F0EA;        /* ruhige zweite Fläche */
  --karte: #FFFFFF;          /* Karten, Formulare */
  --text: #1D1B18;
  --leise: #5F5A53;          /* Nebentext, mindestens 4,5:1 auf --grund */
  --linie: #E3DED5;
  --marke: #2B2E33;          /* Hauptfarbe des Betriebs */
  --marke-text: #FFFFFF;     /* Text auf --marke */
  --akzent: #B5652B;         /* Knöpfe, Hervorhebung */
  --akzent-text: #FFFFFF;
  --akzent-dunkel: #8F4E20;  /* Hover, Links auf hellem Grund */
  --dunkel: #1F1D1A;         /* dunkle Abschnitte */
  --dunkel-text: #F4F1EC;
  --dunkel-leise: #B9B2A7;
  --gut: #2E7A4C;            /* "Jetzt geöffnet" */
  --warn: #A85A12;
  --schrift-titel: Georgia, "Times New Roman", serif;
  --schrift-text: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --schrift-hand: var(--schrift-titel);  /* optionale Akzentschrift (Kreide, Handschrift) */
  --titel-gewicht: 600;
  --titel-laufweite: -0.01em;
  --titel-zeile: 1.08;
  --radius: 8px;
  --radius-bild: 6px;
  --breite: 1180px;
  --schatten: 0 1px 2px rgb(20 18 15 / 6%), 0 8px 24px rgb(20 18 15 / 6%);
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0; background: var(--grund); color: var(--text);
  font: 400 1.0625rem/1.62 var(--schrift-text);
  font-kerning: normal; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--akzent-dunkel); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--fokus, var(--akzent)); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--akzent); color: var(--akzent-text); }
p, ul, ol, dl, figure, blockquote { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
h1, h2, h3, h4 {
  margin: 0; font-family: var(--schrift-titel); font-weight: var(--titel-gewicht);
  letter-spacing: var(--titel-laufweite); line-height: var(--titel-zeile); text-wrap: balance; color: inherit;
}
h1 { font-size: clamp(2.35rem, 1.2rem + 4.6vw, 4.6rem); }
h2 { font-size: clamp(1.85rem, 1.25rem + 2.3vw, 3rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + .55vw, 1.45rem); line-height: 1.25; }
h4 { font-size: 1.05rem; line-height: 1.3; font-family: var(--schrift-text); font-weight: 700; letter-spacing: 0; }
.lead { font-size: clamp(1.12rem, 1.02rem + .4vw, 1.3rem); line-height: 1.55; color: var(--leise); max-width: 40em; text-wrap: pretty; }
.fliess > * + * { margin-top: 1em; }
.fliess { max-width: 38em; text-wrap: pretty; }
.leise { color: var(--leise); }
.klein { font-size: .9rem; }
.zahl { font-variant-numeric: tabular-nums; }
.kicker {
  display: inline-flex; align-items: center; gap: .6em; margin-bottom: 1.1rem;
  font: 600 .8rem/1.3 var(--schrift-text); letter-spacing: .12em; text-transform: uppercase; color: var(--akzent-dunkel);
}
.kicker::before { content: ""; width: 1.6em; height: 2px; background: currentColor; }
.hand { font-family: var(--schrift-hand); }
.nur-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Raster ---------- */
.wrap { width: min(100% - 2.5rem, var(--breite)); margin-inline: auto; }
.wrap--schmal { width: min(100% - 2.5rem, 760px); }
.abschnitt { padding-block: clamp(4rem, 2.5rem + 6vw, 7.5rem); }
.abschnitt--eng { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.abschnitt--flaeche { background: var(--flaeche); }
.abschnitt--dunkel { background: var(--dunkel); color: var(--dunkel-text); }
.abschnitt--dunkel .lead, .abschnitt--dunkel .leise { color: var(--dunkel-leise); }
.abschnitt--dunkel .kicker { color: var(--kicker-dunkel, var(--akzent)); }
.abschnitt--dunkel a:not(.knopf) { color: var(--dunkel-text); }
.abschnitt--marke { background: var(--marke); color: var(--marke-text); }
.abschnitt--marke .lead, .abschnitt--marke .leise { color: color-mix(in srgb, var(--marke-text) 78%, var(--marke)); }
.abschnitt--marke .kicker { color: inherit; }
.kopfzeile { display: grid; gap: 1rem; margin-bottom: clamp(2rem, 1.4rem + 2vw, 3.5rem); max-width: 46rem; }
.kopfzeile--mitte { margin-inline: auto; text-align: center; justify-items: center; }
.kopfzeile--zeile { max-width: none; grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
/* Überschrift links, kurzer Text rechts daneben */
.kopfzeile--seite { max-width: none; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; column-gap: 3rem; }
.kopfzeile--seite .kicker, .kopfzeile--seite h2 { grid-column: 1; }
.kopfzeile--seite .lead { grid-column: 2; grid-row: 1 / span 2; align-self: end; justify-self: end; max-width: 42ch; margin: 0; font-size: 1rem; }
@media (max-width: 760px) { .kopfzeile--seite { grid-template-columns: 1fr; } .kopfzeile--seite .lead { grid-column: 1; grid-row: auto; justify-self: start; } }
/* Kursiv-Akzent in Überschriften: *Wort* */
h1 em.akzent, h2 em.akzent { font-style: italic; color: var(--akzent); }   /* gezielt: die Rücksetzung für em in Überschriften bleibt für alles andere */
.abschnitt--dunkel h2 em.akzent, .abschnitt--marke h2 em.akzent { color: color-mix(in srgb, var(--akzent) 55%, #FFE6A0); }
.raster { display: grid; gap: clamp(1rem, .6rem + 1.4vw, 1.75rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--spalte, 280px)), 1fr)); }
.raster--2 { --spalte: 420px; }
.raster--3 { --spalte: 300px; }
.raster--4 { --spalte: 230px; }
.zwei { display: grid; gap: clamp(2rem, 1rem + 4vw, 5rem); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.zwei--oben { align-items: start; }
.zwei--breit-links { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.zwei--breit-rechts { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
@media (max-width: 860px) {
  .zwei, .zwei--breit-links, .zwei--breit-rechts { grid-template-columns: minmax(0, 1fr); }
  .kopfzeile--zeile { grid-template-columns: minmax(0, 1fr); align-items: start; }
}

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 48px; padding: .8em 1.35em;
  border: 2px solid var(--akzent); border-radius: var(--radius); background: var(--akzent); color: var(--akzent-text);
  font: 650 1rem/1.2 var(--schrift-text); text-decoration: none; cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s, transform .2s;
}
.knopf:hover { background: var(--akzent-hover, var(--akzent-dunkel)); border-color: var(--akzent-hover, var(--akzent-dunkel)); text-decoration: none; }
.knopf:active { transform: translateY(1px); }
.knopf svg { width: 1.15em; height: 1.15em; flex: none; }
.knopf--rand { background: transparent; color: var(--text); border-color: color-mix(in srgb, var(--text) 30%, transparent); }
.knopf--rand:hover { background: var(--text); color: var(--grund); border-color: var(--text); }
.abschnitt--dunkel .knopf--rand, .abschnitt--marke .knopf--rand, .held--voll .knopf--rand { color: inherit; border-color: color-mix(in srgb, currentColor 45%, transparent); }
.abschnitt--dunkel .knopf--rand:hover, .abschnitt--marke .knopf--rand:hover, .held--voll .knopf--rand:hover { background: var(--dunkel-text); color: var(--dunkel); border-color: var(--dunkel-text); }
.knopf--leise { background: transparent; border-color: transparent; color: inherit; padding-inline: .2em; text-decoration: underline; text-underline-offset: .25em; }
.knopf--leise:hover { background: transparent; border-color: transparent; }
.knoepfe { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; }

/* ---------- Kopf ---------- */
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: .7rem 1rem; background: var(--text); color: var(--grund); border-radius: var(--radius); }
.skip:focus { top: 1rem; }
.hinweisband { background: var(--marke); color: var(--marke-text); font-size: .95rem; }
.hinweisband .wrap { display: flex; gap: .5rem 1rem; flex-wrap: wrap; align-items: center; justify-content: center; padding-block: .6rem; text-align: center; }
.hinweisband a { color: inherit; font-weight: 600; }
.hinweisband--live .wrap { gap: .3rem 1.2rem; }
.hinweisband--sanft { animation: hinweis-rein .5s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes hinweis-rein { from { opacity: 0; transform: translateY(-.6rem); } }
@media (prefers-reduced-motion: reduce) { .hinweisband--sanft { animation: none; } }
.kopf { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--grund) 94%, transparent); border-bottom: 1px solid var(--linie); }
@supports (backdrop-filter: blur(8px)) { .kopf { backdrop-filter: saturate(1.4) blur(10px); } }
.kopf .wrap { display: flex; align-items: center; gap: 1.5rem; min-height: 76px; }
.marke { display: flex; align-items: center; gap: .8rem; color: var(--text); text-decoration: none; min-width: 0; margin-right: auto; }
.marke img { width: auto; height: 44px; }
.marke-text { display: grid; line-height: 1.15; min-width: 0; }
.marke-text b { font: var(--titel-gewicht) 1.2rem/1.1 var(--schrift-titel); letter-spacing: var(--titel-laufweite); }
.marke-text span { font-size: .8rem; color: var(--leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.navi { display: flex; align-items: center; gap: .25rem; }
.navi a { padding: .55rem .75rem; border-radius: var(--radius); color: var(--text); text-decoration: none; font-weight: 550; font-size: .97rem; }
.navi a:hover { background: var(--flaeche); }
.navi a[aria-current="page"] { color: var(--akzent-dunkel); box-shadow: inset 0 -2px 0 var(--akzent); border-radius: 0; }
.kopf-anruf { white-space: nowrap; }
.kopf-anruf .zahl { font-weight: 650; }
.menue { display: none; }
@media (max-width: 1000px) {
  .navi, .kopf-anruf { display: none; }
  .menue { display: block; position: static; }
  .menue > summary { list-style: none; display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .5rem .9rem;
    border: 1px solid var(--linie); border-radius: var(--radius); font-weight: 600; cursor: pointer; background: var(--karte); }
  .menue > summary::-webkit-details-marker { display: none; }
  .menue > summary svg { width: 1.2em; height: 1.2em; }
  .menue[open] > summary { background: var(--text); color: var(--grund); border-color: var(--text); }
  .menue-feld { position: absolute; left: 0; right: 0; top: 100%; background: var(--grund); border-bottom: 1px solid var(--linie);
    box-shadow: 0 24px 40px rgb(0 0 0 / 12%); padding: .75rem 1.25rem 1.5rem; display: grid; gap: .25rem; max-height: calc(100dvh - 80px); overflow: auto; }
  .menue-feld a { padding: .9rem .25rem; border-bottom: 1px solid var(--linie); color: var(--text); text-decoration: none; font-size: 1.1rem; font-weight: 600; }
  .menue-feld .knopf { margin-top: 1rem; border-bottom: 0; color: var(--akzent-text); }
}

/* ---------- Held (Start jeder Seite) ---------- */
.held { padding-block: clamp(3rem, 2rem + 5vw, 6.5rem) clamp(3.5rem, 2rem + 5vw, 6rem); }
.held h1 { max-width: 15ch; }
.held .lead { margin-top: 1.4rem; }
.held .knoepfe { margin-top: 2rem; }
.held-fakten { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: 2.25rem; padding: 0; list-style: none; color: var(--leise); font-size: .95rem; }
.held-fakten li { display: inline-flex; align-items: center; gap: .5rem; }
.held-fakten svg { width: 1.1em; height: 1.1em; color: var(--akzent); }
.held--bild .zwei { align-items: center; }
.held-bild { position: relative; }
.held-bild .bild { aspect-ratio: 4 / 5; }
.held-stempel { position: absolute; left: -1.25rem; bottom: 1.5rem; max-width: 15rem; padding: 1rem 1.15rem; border-radius: var(--radius);
  background: var(--karte); box-shadow: var(--schatten); font-size: .92rem; line-height: 1.4; }
.held-stempel b { display: block; font: var(--titel-gewicht) 1.6rem/1 var(--schrift-titel); color: var(--akzent-dunkel); margin-bottom: .3rem; }
@media (max-width: 860px) { .held-stempel { left: .75rem; bottom: .75rem; } .held-bild .bild { aspect-ratio: 4 / 3.4; } }
.held--voll { position: relative; display: grid; align-items: end; min-height: min(86dvh, 820px); padding: 0; color: #fff; isolation: isolate; overflow: hidden; }   /* Schatten endet an der Bildkante */
.held--voll .held-hintergrund { position: absolute; inset: 0; z-index: -2; }
.held--voll .held-hintergrund img, .held--voll .held-hintergrund .bild { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; border-radius: 0; }
/* Bühne: Titel direkt auf dem Foto. Weicher Schatten hinter dem Text, ohne Kasten und ohne Kante, das Foto bleibt rechts hell */
.held--voll::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgb(10 9 8 / 8%) 0%, rgb(10 9 8 / 0%) 35%, rgb(10 9 8 / 40%) 100%); }
/* Der weiche Schatten hängt am Textblock, nicht an der Fotobreite: wirkt bei 1440 und 1920 px gleich, läuft ohne Kante aus */
.held--voll .held-text { position: relative; max-width: 46rem; }   /* Textblock so breit wie der Text, damit der Schatten genau dahinter sitzt */
.held--voll .held-text::before { content: ""; position: absolute; z-index: -1; inset: -35% -20% -35% -45%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(12 14 12 / 84%) 0%, rgb(12 14 12 / 72%) 45%, rgb(12 14 12 / 38%) 75%, rgb(12 14 12 / 0%) 100%); }
.held--voll h1 { font-size: clamp(2.8rem, 1rem + 6vw, 6rem); line-height: 1.02; letter-spacing: -.02em; max-width: 12ch; color: #fff; text-wrap: balance; }
.held--voll h1, .held--voll .lead, .held--voll .kicker { text-shadow: 0 1px 2px rgb(0 0 0 / 35%), 0 4px 24px rgb(0 0 0 / 30%); }
.held--voll .lead { max-width: 46ch; }
.held--voll h1 em.akzent { color: color-mix(in srgb, var(--akzent) 55%, #FFE6A0); }
@media (max-width: 760px) { .held--voll .held-text::before { inset: -25% -30% -20% -30%; } }
.held--voll .wrap { padding-block: clamp(3rem, 2rem + 6vw, 6rem); }
.held--voll .lead, .held--voll .held-fakten { color: rgb(255 255 255 / 86%); }
.held--voll .kicker { color: #fff; }
.held--typo h1 { max-width: 18ch; font-size: clamp(2.6rem, 1.2rem + 5.6vw, 5.6rem); }

/* ---------- Bilder und Platzhalter ---------- */
.bild { position: relative; overflow: hidden; border-radius: var(--radius-bild); background: var(--flaeche); aspect-ratio: var(--format, 4 / 3); }
.bild img { width: 100%; height: 100%; object-fit: cover; }
.bild--quer { --format: 16 / 10; } .bild--hoch { --format: 4 / 5; } .bild--quadrat { --format: 1 / 1; } .bild--breit { --format: 21 / 9; }
figure figcaption { margin-top: .6rem; font-size: .88rem; color: var(--leise); }
.bild--platz { display: grid; place-items: center; border: 1.5px dashed color-mix(in srgb, var(--leise) 45%, transparent);
  background: repeating-linear-gradient(135deg, var(--flaeche) 0 14px, color-mix(in srgb, var(--flaeche) 70%, var(--linie)) 14px 15px); }
.bild--platz span { max-width: 22ch; padding: 1rem; text-align: center; font-size: .9rem; color: var(--leise); }
.bild--platz svg { width: 2.2rem; height: 2.2rem; margin: 0 auto .5rem; color: var(--leise); opacity: .7; }
.offen { padding: .05em .35em; border-radius: 4px; background: color-mix(in srgb, var(--warn) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 40%, transparent); color: inherit; }
.bildnachweis { font-size: .78rem; color: var(--leise); }

/* ---------- Eckdaten-Leiste ---------- */
.eckdaten { border-block: 1px solid var(--linie); background: var(--karte); }
.eckdaten ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); margin: 0; padding: 0; list-style: none; }
.eckdaten li { display: flex; gap: .85rem; align-items: flex-start; padding: 1.35rem 1.25rem; border-left: 1px solid var(--linie); }
.eckdaten li:first-child { border-left: 0; }
.eckdaten svg { flex: none; width: 1.4rem; height: 1.4rem; margin-top: .15rem; color: var(--akzent); }
.eckdaten b { display: block; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--leise); font-weight: 600; }
/* Faktenleiste: Titel in der Titelschrift, Zeile darunter, Symbol im Kreis */
.eckdaten--fakten { background: var(--grund); border-top: 0; }
.eckdaten--fakten ul { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.eckdaten--fakten li { align-items: center; padding: 1.6rem 1.5rem; }
.eckdaten--fakten li:first-child { padding-left: 0; }
.eckdaten.eckdaten--fakten svg { width: 2.6rem; height: 2.6rem; margin: 0; padding: .62rem; border-radius: 50%; background: color-mix(in srgb, var(--akzent) 13%, transparent); color: var(--akzent-dunkel, var(--akzent)); }
.eckdaten.eckdaten--fakten b { font-family: var(--schrift-titel); font-weight: var(--titel-gewicht); font-size: 1.12rem; letter-spacing: 0; text-transform: none; color: var(--text); line-height: 1.25; }
.eckdaten.eckdaten--fakten span { display: block; margin-top: .15rem; font-size: .85rem; color: var(--leise); }
@media (max-width: 760px) {
  .eckdaten--fakten ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eckdaten--fakten li { flex-direction: column; align-items: flex-start; gap: .6rem; padding: 1.1rem .9rem; }
  .eckdaten--fakten li:nth-child(odd) { border-left: 0; padding-left: 0; }
  .eckdaten--fakten li:nth-child(n+3) { border-top: 1px solid var(--linie); }
}
.eckdaten span, .eckdaten a { font-weight: 600; color: var(--text); text-decoration: none; }
@media (max-width: 720px) { .eckdaten li { border-left: 0; border-top: 1px solid var(--linie); } .eckdaten li:first-child { border-top: 0; } }

/* ---------- Status "Jetzt geöffnet" ---------- */
.status { display: inline-flex; align-items: center; gap: .45rem; font-weight: 650; }
.status::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--leise); }
.status[data-zustand="offen"]::before { background: var(--gut); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gut) 20%, transparent); }
.status[data-zustand="bald"]::before { background: var(--warn); }
.status[data-zustand="zu"]::before { background: #B4462E; }

/* ---------- Karten ---------- */
.karte { display: grid; align-content: start; gap: .75rem; padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); border-radius: var(--radius);
  background: var(--karte); border: 1px solid var(--linie); }
.karte--bild { padding: 0; overflow: hidden; gap: 0; }
.karte--bild .karte-inhalt { display: grid; gap: .6rem; padding: 1.25rem 1.35rem 1.5rem; }
.karte--bild .bild { border-radius: 0; }
.karte h3 { font-size: 1.3rem; }
.karte .liste-haken { margin-top: .25rem; }
.symbol { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--radius); background: color-mix(in srgb, var(--akzent) 13%, transparent); color: var(--akzent-dunkel); }
.symbol svg { width: 1.6rem; height: 1.6rem; }
.liste-haken { display: grid; gap: .45rem; padding: 0; list-style: none; }
.liste-haken li { position: relative; padding-left: 1.6rem; }
.liste-haken li::before { content: ""; position: absolute; left: 0; top: .5em; width: .85rem; height: .5rem; border-left: 2px solid var(--haken, var(--akzent)); border-bottom: 2px solid var(--haken, var(--akzent)); transform: rotate(-45deg); }
a.karte { color: inherit; text-decoration: none; transition: border-color .2s, box-shadow .2s, transform .2s; }
a.karte:hover { border-color: color-mix(in srgb, var(--akzent) 45%, var(--linie)); box-shadow: var(--schatten); transform: translateY(-2px); }

/* ---------- Text mit Bild ---------- */
.geschichte .fliess { font-size: 1.08rem; }
.zitat { position: relative; margin-top: 2rem; padding: 1.25rem 0 0 1.5rem; border-left: 3px solid var(--akzent); }
.zitat p { font: italic var(--titel-gewicht) clamp(1.25rem, 1.05rem + .8vw, 1.6rem)/1.35 var(--schrift-titel); letter-spacing: var(--titel-laufweite); }
.zitat footer { margin-top: .7rem; font-size: .92rem; color: var(--leise); }

/* ---------- Ablauf ---------- */
.ablauf { counter-reset: schritt; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); padding: 0; list-style: none; }
.ablauf li { counter-increment: schritt; position: relative; padding-top: 3.6rem; }
.ablauf li::before { content: counter(schritt, decimal-leading-zero); position: absolute; top: 0; left: 0;
  font: var(--titel-gewicht) 2.4rem/1 var(--schrift-titel); color: var(--akzent); }
.ablauf li::after { content: ""; position: absolute; top: 1.2rem; left: 3.8rem; right: 0; height: 1px; background: var(--linie); }
.ablauf li:last-child::after { display: none; }
.ablauf h3 { margin-bottom: .4rem; }
.ablauf p { color: var(--leise); }
.ablauf .dauer { display: inline-block; margin-top: .6rem; font-size: .85rem; font-weight: 600; color: var(--akzent-dunkel); }
.abschnitt--dunkel .ablauf p { color: var(--dunkel-leise); }
.abschnitt--dunkel .ablauf li::after { background: rgb(255 255 255 / 15%); }

/* ---------- Kennzahlen ---------- */
.zahlen { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); padding: 0; list-style: none; }
.zahlen li { display: grid; gap: .35rem; padding-top: 1rem; border-top: 2px solid currentColor; }
.zahlen b { font: var(--titel-gewicht) clamp(2.2rem, 1.6rem + 2vw, 3.2rem)/1 var(--schrift-titel); font-variant-numeric: tabular-nums; letter-spacing: var(--titel-laufweite); }
.zahlen span { color: var(--leise); font-size: .95rem; }
.abschnitt--dunkel .zahlen span, .abschnitt--marke .zahlen span { color: inherit; opacity: .8; }

/* ---------- Vertrauen ---------- */
.siegel { display: flex; flex-wrap: wrap; gap: .75rem; padding: 0; list-style: none; }
.siegel li { display: inline-flex; align-items: center; gap: .6rem; padding: .6rem .95rem .6rem .7rem; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--karte); font-weight: 600; font-size: .95rem; }
.siegel svg { width: 1.4rem; height: 1.4rem; color: var(--akzent); }
.siegel small { display: block; font-weight: 400; color: var(--leise); font-size: .8rem; }

/* ---------- Projekte und Galerie ---------- */
.projekte { display: grid; gap: clamp(1rem, .6rem + 1.5vw, 2rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.projekt { display: grid; gap: .8rem; }
.projekt .bild { --format: 4 / 3; }
.projekt-zeile { display: flex; flex-wrap: wrap; gap: .25rem .9rem; font-size: .88rem; color: var(--leise); padding: 0; list-style: none; }
.projekt-zeile li + li::before { content: "·"; margin-right: .9rem; }
.projekt--gross { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; gap: clamp(1.5rem, 1rem + 3vw, 4rem); }
@media (max-width: 860px) { .projekt--gross { grid-template-columns: minmax(0, 1fr); } }
.galerie { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.galerie .bild { --format: 1 / 1; }

/* ---------- Stimmen ---------- */
.stimmen { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.stimme { display: grid; gap: 1rem; align-content: space-between; padding: 1.6rem; border-radius: var(--radius); background: var(--karte); border: 1px solid var(--linie); }
.stimme p { font: var(--titel-gewicht) 1.18rem/1.45 var(--schrift-titel); letter-spacing: var(--titel-laufweite); }
.stimme footer { font-size: .9rem; color: var(--leise); }
.stimme footer a { color: inherit; }

/* ---------- Fragen ---------- */
.fragen { display: grid; border-top: 1px solid var(--linie); }
.fragen details { border-bottom: 1px solid var(--linie); }
.fragen summary { display: flex; justify-content: space-between; gap: 1.5rem; align-items: center; padding: 1.25rem 0; cursor: pointer; list-style: none;
  font: 600 1.12rem/1.4 var(--schrift-text); }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: ""; flex: none; width: .7rem; height: .7rem; margin-right: .3rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-25%); transition: transform .25s; }
.fragen details[open] summary::after { transform: rotate(-135deg) translateY(-25%); }
.fragen .antwort { padding: 0 0 1.4rem; max-width: 46em; color: var(--leise); }
.abschnitt--dunkel .fragen, .abschnitt--dunkel .fragen details { border-color: rgb(255 255 255 / 16%); }

/* ---------- Team ---------- */
.team { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.person { display: grid; gap: .5rem; }
.person .bild { --format: 4 / 5; margin-bottom: .4rem; }
.person h3 { font-size: 1.2rem; }
.person span { color: var(--leise); font-size: .95rem; }

/* ---------- Zeitleiste (Chronik) ---------- */
.zeitleiste { position: relative; display: grid; gap: 2rem; padding: 0 0 0 2rem; list-style: none; }
.zeitleiste::before { content: ""; position: absolute; left: .4rem; top: .4rem; bottom: .4rem; width: 2px; background: var(--linie); }
.zeitleiste li { position: relative; display: grid; gap: .3rem; }
.zeitleiste li::before { content: ""; position: absolute; left: -2rem; top: .35rem; width: .85rem; height: .85rem; border-radius: 50%;
  background: var(--grund); border: 3px solid var(--akzent); }
.zeitleiste .jahr { font: var(--titel-gewicht) 1.5rem/1 var(--schrift-titel); color: var(--akzent-dunkel); font-variant-numeric: tabular-nums; }
.zeitleiste p { color: var(--leise); max-width: 40em; }
@media (min-width: 861px) {
  .zeitleiste--quer { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding: 2.2rem 0 0; gap: 1.5rem; }
  .zeitleiste--quer::before { left: 0; right: 0; top: .4rem; bottom: auto; width: auto; height: 2px; }
  .zeitleiste--quer li::before { left: 0; top: -2.2rem; }
}

/* ---------- Öffnungszeiten ---------- */
.zeiten { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.zeiten th, .zeiten td { padding: .7rem 0; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top; }
.zeiten th { font-weight: 600; padding-right: 1.5rem; white-space: nowrap; }
.zeiten tr[data-heute] th, .zeiten tr[data-heute] td { color: var(--akzent-dunkel); }
.zeiten tr[data-heute] th::after { content: " · Heute"; font-weight: 500; font-size: .85em; }
.ausnahmen { margin-top: 1.25rem; padding: 1rem 1.15rem; border-radius: var(--radius); background: color-mix(in srgb, var(--warn) 9%, var(--karte)); border: 1px solid color-mix(in srgb, var(--warn) 28%, transparent); }
.ausnahmen b { display: block; margin-bottom: .25rem; }

/* ---------- Termine ---------- */
.termine { display: grid; gap: 0; padding: 0; list-style: none; border-top: 1px solid var(--linie); }
.termin { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; gap: 1.25rem; align-items: center; padding: 1.25rem 0; border-bottom: 1px solid var(--linie); }
.termin-datum { display: grid; justify-items: center; padding: .6rem .3rem; border-radius: var(--radius); background: var(--flaeche); line-height: 1.05; font-variant-numeric: tabular-nums; }
.termin-datum b { font: var(--titel-gewicht) 1.9rem/1 var(--schrift-titel); }
.termin-datum span { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--leise); }
.termin h3 { font-size: 1.2rem; }
.termin p { color: var(--leise); font-size: .95rem; }
@media (max-width: 640px) { .termin { grid-template-columns: 4.5rem minmax(0, 1fr); } .termin .knopf { grid-column: 2; justify-self: start; } }

/* ---------- Kontakt, Formular ---------- */
.kontakt-liste { display: grid; gap: 1.1rem; padding: 0; list-style: none; }
.kontakt-liste li { display: flex; gap: .9rem; align-items: flex-start; }
.kontakt-liste svg { flex: none; width: 1.35rem; height: 1.35rem; margin-top: .2rem; color: var(--akzent); }
.kontakt-liste b { display: block; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--leise); font-weight: 600; }
.kontakt-liste a { font-weight: 600; color: inherit; }
.formular { display: grid; gap: 1.1rem; padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); border-radius: var(--radius); background: var(--karte); border: 1px solid var(--linie); color: var(--text); }
.formular h3 { margin-bottom: .2rem; }
.feld { display: grid; gap: .4rem; }
.feld > span { font-weight: 600; font-size: .95rem; }
.feld > span small { font-weight: 400; color: var(--leise); }
.feld input, .feld select, .feld textarea {
  width: 100%; min-height: 50px; padding: .75rem .9rem; border: 1.5px solid color-mix(in srgb, var(--text) 22%, transparent); border-radius: var(--radius);
  background: var(--grund); color: var(--text); font: inherit; font-size: 1rem; transition: border-color .2s, box-shadow .2s; }
.feld textarea { min-height: 140px; resize: vertical; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--akzent) 22%, transparent); }
.feld[data-fehler] input, .feld[data-fehler] textarea, .feld[data-fehler] select { border-color: #B4462E; }
.feld-fehler { color: #B4462E; font-size: .88rem; }
.felder-2 { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.haken { display: flex; gap: .7rem; align-items: flex-start; font-size: .95rem; }
.haken input { width: 1.25rem; height: 1.25rem; margin-top: .2rem; accent-color: var(--akzent); flex: none; }
.wahl { display: flex; flex-wrap: wrap; gap: .5rem; border: 0; padding: 0; margin: 0; }
.wahl legend { width: 100%; margin-bottom: .45rem; font-weight: 600; font-size: .95rem; }
.wahl label { position: relative; }
.wahl input { position: absolute; opacity: 0; }
.wahl span { display: inline-flex; min-height: 44px; align-items: center; padding: .55rem .95rem; border: 1.5px solid var(--linie); border-radius: var(--radius); background: var(--grund); cursor: pointer; font-size: .95rem; }
.wahl input:checked + span { border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 12%, var(--grund)); font-weight: 600; }
.wahl input:focus-visible + span { outline: 3px solid var(--akzent); outline-offset: 2px; }
.fang { position: absolute; left: -9999px; }
.formular-meldung { padding: 1rem 1.15rem; border-radius: var(--radius); background: color-mix(in srgb, var(--gut) 12%, var(--karte)); border: 1px solid color-mix(in srgb, var(--gut) 35%, transparent); }
.formular-meldung[data-art="fehler"] { background: color-mix(in srgb, #B4462E 10%, var(--karte)); border-color: color-mix(in srgb, #B4462E 35%, transparent); }
.datenschutz-satz { font-size: .85rem; color: var(--leise); }

/* ---------- Karte nach Klick ---------- */
.karte-klick { position: relative; overflow: hidden; border-radius: var(--radius); aspect-ratio: 4 / 3; background: var(--flaeche); border: 1px solid var(--linie); }
.karte-klick .karte-vorhang { position: absolute; inset: 0; display: grid; place-content: center; gap: .9rem; padding: 1.5rem; text-align: center;
  background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--akzent) 10%, transparent), transparent 60%), var(--flaeche); }
.karte-klick .karte-vorhang p { max-width: 30ch; margin-inline: auto; font-size: .88rem; color: var(--leise); }
.karte-klick iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.karte-muster { position: absolute; inset: 0; opacity: .5; color: var(--linie); }
/* Stadtplan als Bild: sofort da, Nadel auf der Adresse, „Karte bewegen“ lädt OpenStreetMap nach */
.karte--plan { background: var(--grund); }
.karte-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.karte-nadel { position: absolute; left: 50%; top: 50%; width: 34px; transform: translate(-50%, -100%); filter: drop-shadow(0 6px 8px rgb(0 0 0 / 28%)); }
.karte-nadel svg { display: block; width: 100%; height: auto; }
.karte-nadel path { fill: var(--akzent); stroke: #fff; stroke-width: 2; }
.karte-nadel circle { fill: #fff; }
.karte-nadel::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 14px; height: 6px; margin-left: -7px; border-radius: 50%;
  background: color-mix(in srgb, var(--akzent) 45%, transparent); animation: nadel-puls 2.4s ease-out infinite; }
@keyframes nadel-puls { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(3.2); opacity: 0; } }
.karte-bewegen { position: absolute; left: .75rem; bottom: .75rem; display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .8rem; min-height: 40px;
  border: 1px solid var(--linie); border-radius: var(--radius); background: color-mix(in srgb, var(--grund) 92%, transparent); color: var(--text);
  font: 600 .82rem/1 var(--schrift-text); cursor: pointer; box-shadow: 0 4px 14px rgb(0 0 0 / 10%); }
.karte-bewegen:hover { border-color: var(--akzent); color: var(--akzent-dunkel); }
.karte-bewegen svg { width: 1rem; height: 1rem; }
.karte-quelle { position: absolute; right: 0; bottom: 0; padding: .2rem .5rem; font-size: .68rem; color: var(--leise);
  background: color-mix(in srgb, var(--grund) 85%, transparent); border-top-left-radius: 6px; }
.karte-quelle a { color: inherit; }
@media (prefers-reduced-motion: reduce) { .karte-nadel::after { animation: none; } }

/* ---------- Einzugsgebiet ---------- */
.orte { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; list-style: none; }
.orte li { padding: .45rem .85rem; border-radius: 999px; background: var(--karte); border: 1px solid var(--linie); font-size: .95rem; }
.orte li[data-haupt] { background: var(--marke); color: var(--marke-text); border-color: var(--marke); font-weight: 600; }

/* ---------- Abschluss-Band ---------- */
.abschluss { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.abschluss h2 { max-width: 20ch; }
@media (max-width: 860px) { .abschluss { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Downloads, Stellen ---------- */
.dateien { display: grid; padding: 0; list-style: none; border-top: 1px solid var(--linie); }
.dateien a { display: flex; gap: 1rem; align-items: center; justify-content: space-between; padding: 1rem 0; border-bottom: 1px solid var(--linie); color: inherit; text-decoration: none; font-weight: 600; }
.dateien a span { font-weight: 400; font-size: .88rem; color: var(--leise); }
.dateien a:hover { color: var(--akzent-dunkel); }
.stelle { display: grid; gap: .8rem; }
.stelle-kopf { display: flex; flex-wrap: wrap; gap: .5rem; }
.etikett { display: inline-flex; align-items: center; padding: .2rem .6rem; border-radius: 999px; background: var(--flaeche); font-size: .82rem; font-weight: 600; color: var(--leise); }
.etikett--akzent { background: color-mix(in srgb, var(--akzent) 15%, transparent); color: var(--akzent-dunkel); }

/* ---------- Fuß ---------- */
.fuss { padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) 2rem; background: var(--dunkel); color: var(--dunkel-text); font-size: .95rem; }
.fuss a { color: var(--dunkel-text); text-decoration: none; }
.fuss a:hover { text-decoration: underline; }
.fuss-raster { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(160px, 1fr)); }
.fuss h2 { font-size: 1.5rem; margin-bottom: .8rem; }
.fuss h3 { font: 600 .78rem/1.3 var(--schrift-text); letter-spacing: .1em; text-transform: uppercase; color: var(--dunkel-leise); margin-bottom: .9rem; }
.fuss ul { display: grid; gap: .5rem; padding: 0; list-style: none; }
.fuss p { color: var(--dunkel-leise); }
.fuss-unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgb(255 255 255 / 14%); color: var(--dunkel-leise); font-size: .85rem; }
.fuss-unten nav { display: flex; gap: 1.25rem; }
@media (max-width: 720px) { .fuss-raster { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Leiste unten am Handy: Anrufen, Route, Anfrage ---------- */
.handyleiste { display: none; }
@media (max-width: 720px) {
  .handyleiste { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    padding: .5rem .5rem calc(.5rem + env(safe-area-inset-bottom, 0px)); gap: .5rem; background: var(--grund); border-top: 1px solid var(--linie);
    box-shadow: 0 -10px 30px rgb(0 0 0 / 8%); }
  .handyleiste a { display: grid; justify-items: center; gap: .15rem; padding: .45rem .25rem; border-radius: var(--radius); color: var(--text); text-decoration: none; font-size: .78rem; font-weight: 650; }
  .handyleiste a:first-child { background: var(--akzent); color: var(--akzent-text); }
  .handyleiste svg { width: 1.35rem; height: 1.35rem; }
  body:has(.handyleiste) { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Rechtliches ---------- */
.recht { max-width: 46rem; }
.recht h1 { font-size: clamp(2rem, 1.4rem + 2.5vw, 3rem); margin-bottom: 2rem; }
.recht h2 { font-size: 1.4rem; margin: 2.5rem 0 .8rem; }
.recht h3 { font-size: 1.1rem; margin: 1.6rem 0 .5rem; }
.recht p, .recht ul { margin-bottom: .9rem; }
.recht address { font-style: normal; }

/* ---------- Bewegung ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .einblenden { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
  .js .einblenden.sichtbar { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }

/* ---------- Druck ---------- */
@media print {
  .kopf, .handyleiste, .menue, .karte-klick, .formular, .hinweisband { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .abschnitt { padding-block: 1.2rem; }
  .abschnitt--dunkel, .abschnitt--marke, .fuss { background: #fff; color: #000; }
  a { color: #000; }
}

/* ---------- Abstände (Hilfsklassen für Module) ---------- */
.abstand-oben-k { margin-top: 1rem; }
.abstand-oben { margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.abstand-oben-g { margin-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.abstand-unten { margin-bottom: 1rem; }
.stapel { display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.projekte-gross { display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3.5rem); margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.status { align-items: flex-start; }
.status::before { flex: none; margin-top: .5em; }
/* Seiten mit reinem Schrift-Start: der erste Abschnitt rückt näher heran */
.held--typo { padding-bottom: clamp(1.5rem, 1rem + 2vw, 3rem); }
.held--typo + .abschnitt:not([class*="abschnitt--"]) { padding-top: clamp(1.5rem, 1rem + 2vw, 3rem); }
.kopf-status { font-size: .8rem; font-weight: 600; color: var(--leise); white-space: nowrap; }
.kopf-status::before { width: .5rem; height: .5rem; margin-top: .35em; }
.karte-klick .karte-vorhang .symbol { margin-inline: auto; }
.kopfzeile--nur-knopf { display: flex; justify-content: flex-end; }
.monogramm { display: grid; place-items: center; background: color-mix(in srgb, var(--marke) 10%, var(--flaeche)); }
.monogramm span { font: var(--titel-gewicht) clamp(2.4rem, 1.8rem + 2vw, 3.4rem)/1 var(--schrift-titel); color: var(--marke); letter-spacing: .02em; }

/* Überschriften in einer Farbe und einem Schnitt: kein farbiges oder kursives Einzelwort (Erkennungszeichen von KI-Seiten) */
:is(h1, h2, h3) :is(em, strong, i, b) { font: inherit; color: inherit; }

/* Akzent auf dunklem Grund einstellbar (marke.farben.akzent_auf_dunkel), z. B. wenn das Logo-Blau dort zu dunkel ist */
.abschnitt--dunkel .ablauf li::before, .abschnitt--dunkel .zahlen b { color: var(--akzent-auf-dunkel, var(--akzent)); }
.abschnitt--dunkel .ablauf .dauer { color: var(--akzent-auf-dunkel, var(--akzent)); }
/* Offene Fragen auch auf dunklen und farbigen Flächen lesbar */
:is(.abschnitt--dunkel, .abschnitt--marke, .held--voll) .offen { background: color-mix(in srgb, #F6C77A 26%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, #F6C77A 60%, transparent); color: inherit; }
/* Bildausschnitt aus der Inhaltsdatei: bild.position = oben, unten, links, rechts */
.bild img.pos-oben { object-position: center top; } .bild img.pos-unten { object-position: center bottom; }
.bild img.pos-links { object-position: left center; } .bild img.pos-rechts { object-position: right center; }

/* Musterbild im Entwurf: sichtbares Schild, bis ein echtes Foto da ist */
.bild--muster { position: relative; }
.bild-muster { position: absolute; right: 12px; top: 12px; z-index: 2; max-width: calc(100% - 24px); padding: 6px 10px; border-radius: 4px;
  background: rgba(20, 18, 14, .78); color: #FFFFFF; font-size: 13px; line-height: 1.3; letter-spacing: .01em; }

/* Vorrat aus dem Kunden-Portal (Nur noch wenig da, Ausverkauft) */
.vorrat-hinweis { margin: 0 0 18px; padding: 14px 16px; border-left: 3px solid var(--akzent); background: var(--grund, #FFFFFF); color: var(--tinte, inherit); line-height: 1.5; }
.vorrat-hinweis--aus { font-weight: 600; }
form[data-vorrat-pause] { display: none !important; }

/* Menge je Sorte: Minus und Plus */
.feld--anzahl { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--linie); }
.anzahl { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--karte); width: max-content; }
.anzahl input { width: 4.5em; text-align: center; border: 0; background: transparent; font: inherit; font-size: 18px; padding: 10px 0; color: var(--text); -moz-appearance: textfield; }
.anzahl input::-webkit-outer-spin-button, .anzahl input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.anzahl input:focus { outline: none; }
.anzahl:focus-within { border-color: var(--akzent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--akzent) 18%, transparent); }
.anzahl-knopf { width: 44px; height: 44px; border: 0; background: transparent; color: var(--akzent-dunkel); font-size: 22px; line-height: 1; cursor: pointer; border-radius: var(--radius); }
.anzahl-knopf:hover { background: var(--flaeche); }
.anzahl-einheit { padding: 0 14px 0 2px; color: var(--leise); font-size: 14px; }

/* Kalender im Stil der Seite */
.datum-feld { cursor: pointer; caret-color: transparent; }
.kalender { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: 308px; padding: 14px; border: 1px solid var(--linie); border-radius: var(--radius);
  background: var(--karte); box-shadow: 0 14px 40px rgba(20, 18, 14, .14); }
.kalender[hidden] { display: none; }
.kalender-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.kalender-kopf b { font-family: var(--schrift-titel); font-weight: var(--titel-gewicht); font-size: 17px; color: var(--text); }
.kalender-kopf button { width: 36px; height: 36px; border: 1px solid var(--linie); border-radius: var(--radius); background: transparent; color: var(--text); font-size: 20px; cursor: pointer; }
.kalender-kopf button:disabled { opacity: .35; cursor: default; }
.kalender-tage, .kalender-raster { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.kalender-tage span { font-size: 12px; color: var(--leise); padding: 4px 0; }
.kalender-raster button { height: 36px; border: 0; border-radius: var(--radius); background: transparent; color: var(--text); font: inherit; font-size: 14.5px; cursor: pointer; }
.kalender-raster button:hover:not([disabled]) { background: var(--flaeche); }
.kalender-raster button.kalender-heute { box-shadow: inset 0 0 0 1px var(--linie); }
.kalender-raster button[aria-pressed="true"] { background: var(--akzent); color: var(--akzent-text); }
.kalender-raster button:disabled { color: var(--linie); cursor: default; }
.kalender-raster button:focus-visible, .kalender-kopf button:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
.kalender-fuss { margin-top: 8px; text-align: right; }
.kalender-fuss button { border: 0; background: none; color: var(--akzent-dunkel); font: inherit; font-size: 14px; cursor: pointer; text-decoration: underline; }
/* Sorte gerade aus (Vorrat je Sorte aus dem Portal): Menge gesperrt, Hinweis am Feld */
.feld--anzahl > label { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 2px; min-width: 0; }
.feld--anzahl .feld-name { flex-basis: 100%; }
.feld--anzahl .feld-zusatz { font-size: 14px; color: var(--leise); }
.feld--anzahl:has(input:disabled) > label::after { content: "Gerade aus"; font-size: 14px; color: #8A2E1E; font-weight: 600; }
.feld--anzahl:has(input:disabled) .feld-zusatz::after { content: " ·"; }
@media (max-width: 480px) {
  .feld--anzahl .anzahl input { width: 2.6em; }
  .feld--anzahl .anzahl-einheit { display: none; }
}
.feld--anzahl:has(input:disabled) { opacity: .75; }
/* Kalendertage gegen Klassen aus Vorlagen absichern (genuss hat einen Baustein „.heute“) */
.kalender-raster { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.kalender-raster button { min-width: 0; padding: 0; margin: 0; display: block; width: 100%; }

/* ---------- Bestätigung nach dem Absenden (formulare.<name>.erfolg) ---------- */
.formular-erfolg { display: grid; gap: 1.25rem; outline: none; animation: erfolg-rein .4s ease-out; }
.erfolg-kopf { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: start; }
.erfolg-haken { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: #E3F1E8; }   /* Erfolg in Grün, unabhängig von der Markenfarbe */
.erfolg-haken svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: #2E7A4C; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 24; stroke-dashoffset: 24; animation: erfolg-haken .5s .15s ease-out forwards; }
.erfolg-kopf h3 { margin: 0; font-family: var(--schrift-titel); font-weight: var(--titel-gewicht); font-size: clamp(1.45rem, 1.2rem + 1vw, 1.85rem); line-height: 1.2; }
.erfolg-kopf p { margin: .35rem 0 0; color: var(--leise); }
.erfolg-liste { margin: 0; display: grid; border-top: 1px solid var(--linie); }
.erfolg-liste div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; padding: .65rem 0; border-bottom: 1px solid var(--linie); }
.erfolg-liste dt { color: var(--leise); }
.erfolg-liste dd { margin: 0; font-weight: 600; text-align: right; }
.erfolg-zwischen { margin: .25rem 0 0; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--leise); font-weight: 600; }
.erfolg-schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: schritt; }
.erfolg-schritte li { position: relative; display: grid; gap: .15rem; padding: 0 0 1.1rem 2.6rem; counter-increment: schritt; }
.erfolg-schritte li::before { content: counter(schritt); position: absolute; left: 0; top: -.1rem; display: grid; place-items: center; width: 1.8rem; height: 1.8rem;
  border-radius: 50%; border: 1px solid var(--linie); background: var(--karte); font-size: .85rem; font-weight: 600; color: var(--leise); }
.erfolg-schritte li::after { content: ""; position: absolute; left: .87rem; top: 1.8rem; bottom: .2rem; width: 1px; background: var(--linie); }
.erfolg-schritte li:last-child { padding-bottom: 0; }
.erfolg-schritte li:last-child::after { display: none; }
.erfolg-schritte li.erledigt::before { content: "✓"; background: #2E7A4C; border-color: #2E7A4C; color: #fff; }
.erfolg-schritte b { font-weight: 600; color: var(--text); }
.erfolg-schritte span { color: var(--leise); font-size: .95rem; }
.erfolg-fuss { margin: .25rem 0 0; }
@keyframes erfolg-rein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes erfolg-haken { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .formular-erfolg { animation: none; } .erfolg-haken svg { animation: none; stroke-dashoffset: 0; } }

/* Bestätigung als eigene Ansicht: der ganze Abschnitt zeigt nur noch sie */
.abschnitt--erfolg { scroll-margin-top: 5.5rem; }
.abschnitt--erfolg > .wrap > :not(.formular-erfolg), .formular--erfolg > :not(.formular-erfolg) { display: none !important; }
.abschnitt--erfolg .formular-erfolg { max-width: 42rem; margin-inline: auto; padding: clamp(1.75rem, 1rem + 3vw, 3rem); background: var(--karte);
  border: 1px solid var(--linie); border-radius: calc(var(--radius) + 4px); box-shadow: 0 24px 60px -30px rgb(40 30 15 / 30%); }
.abschnitt--erfolg .erfolg-kopf h3 { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem); }
.erfolg-aus { display: none !important; }   /* nach dem Absenden: nur Kopf, Bestätigung und Fuß */

/* Eigene Erfolgsseite (danke.html, reserviert.html) */
.erfolg-seite { min-height: 70dvh; display: grid; align-items: center; }
.erfolg-seite .formular-erfolg { max-width: 42rem; margin-inline: auto; padding: clamp(1.75rem, 1rem + 3vw, 3rem); background: var(--karte);
  border: 1px solid var(--linie); border-radius: calc(var(--radius) + 4px); box-shadow: 0 24px 60px -30px rgb(40 30 15 / 30%); }
.erfolg-seite .erfolg-kopf h1 { margin: 0; font-family: var(--schrift-titel); font-weight: var(--titel-gewicht); font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.6rem); line-height: 1.15; }
.erfolg-seite .erfolg-fuss { display: flex; flex-wrap: wrap; gap: .75rem; }


/* Vorlage Laden ("Backzettel"). Café, Bäckerei, Konditorei, kleiner Laden.
   Idee: Die Seite ist ein Tageszettel vom Tresen. Heute steht oben, groß und mit Datum. Zettel und Preisschilder haben
   einen Zackenrand wie eine Bäckertüte, Preise stehen mit Punktlinie wie auf der Tafel im Laden, nur lesbar gesetzt.
   Schrift: kräftige, freundliche Grotesk (Bricolage) für Titel, ruhige Grotesk (Instrument Sans) für Text,
   eine warme Kursiv-Serife (Fraunces) nur für Datum, Kicker und den Haltungssatz. Keine Kreide, keine Schreibschrift.
   Farben je Art des Ladens: vorlage.json (Krume und Kruste auf Mehlweiß, ein dunkler Akzent). */
:root {
  --grund: #FBF7F0;          /* Mehlweiß */
  --flaeche: #F3EADB;        /* helle Krume */
  --krume: #EAD8B5;          /* Weizen, für Flächen hinter Symbolen und den heutigen Tag */
  --karte: #FFFDF9;
  --text: #241A14;
  --leise: #66574B;
  --linie: #E5D9C7;
  --marke: #2B201A;          /* Ofenschwarz */
  --marke-text: #FBF7F0;
  --akzent: #B04E26;         /* Kruste */
  --akzent-text: #FFFFFF;
  --akzent-dunkel: #8A3B1B;
  --dunkel: #241B16;
  --dunkel-text: #F6EFE4;
  --dunkel-leise: #C9BAA8;
  --gut: #2E7444;
  --schrift-titel: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --schrift-text: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --schrift-hand: "Fraunces", Georgia, "Times New Roman", serif;
  --titel-gewicht: 800;
  --titel-laufweite: -0.028em;
  --titel-zeile: 1;
  --radius: 8px;
  --radius-bild: 10px;
  --breite: 1220px;
  --schatten: 0 1px 2px rgb(60 36 18 / 6%), 0 10px 30px rgb(60 36 18 / 8%);
  --zacke: 14px;
}

/* ---------- Grundton ---------- */
body { font-size: 1.0625rem; line-height: 1.6; }
h1 { font-size: clamp(2.5rem, 1.35rem + 4.6vw, 4.9rem); line-height: .98; letter-spacing: -0.035em; }
h2 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.3rem); line-height: 1.02; }
h3 { font-family: var(--schrift-titel); font-weight: 600; letter-spacing: -0.01em; font-size: clamp(1.2rem, 1.08rem + .5vw, 1.45rem); line-height: 1.2; }
.lead { color: var(--leise); }
/* Kicker: kursive Serife statt Versalien-Etikett */
.kicker { font: italic 400 clamp(1.05rem, 1rem + .25vw, 1.2rem)/1.3 var(--schrift-hand); letter-spacing: 0; text-transform: none; color: var(--akzent-dunkel); margin-bottom: .8rem; }
.kicker::before { width: .5rem; height: .5rem; border-radius: 50%; background: var(--akzent); }
.abschnitt--marke .kicker, .abschnitt--dunkel .kicker { color: var(--krume); }
.abschnitt--marke .kicker::before, .abschnitt--dunkel .kicker::before { background: var(--krume); }
.knopf { font-weight: 600; letter-spacing: .005em; }
.knopf--rand { border-width: 1.5px; }
.kopfzeile h2 { max-width: 18ch; }
.abschnitt--flaeche { background: var(--flaeche); }

/* Zackenrand wie an einer Bäckertüte (Maske, keine Grafik) */
.zacken-unten, .zettel, .preisschild { --z: var(--zacke);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / var(--z) 100%;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / var(--z) 100%; }

/* ---------- Kopf ---------- */
.kopf { background: color-mix(in srgb, var(--grund) 95%, transparent); }
.marke-text b { font-size: 1.45rem; letter-spacing: -0.02em; }
.marke-text .kopf-status { font-size: .82rem; font-weight: 600; color: var(--text); overflow: visible; white-space: normal; text-overflow: clip; }
.marke-text .kopf-status::before { width: .5rem; height: .5rem; margin-top: .38em; }
.marke-text:has(.kopf-status) > span:not(.kopf-status) { display: none; }
.navi a { font-weight: 600; font-size: 1rem; }
.navi a[aria-current="page"] { color: var(--text); box-shadow: inset 0 -3px 0 var(--akzent); }
.kopf-anruf { font-variant-numeric: tabular-nums; }

/* ---------- Status "Jetzt geöffnet" ---------- */
.status[data-zustand="zu"]::before { background: #B4462E; }

/* ---------- Heute (Start) ---------- */
.heute { position: relative; padding-block: clamp(2rem, 1rem + 3.5vw, 4.25rem) clamp(3rem, 2rem + 3vw, 4.5rem); overflow: hidden; }
.heute::before { content: ""; position: absolute; inset: auto 0 0 0; height: clamp(5rem, 3rem + 6vw, 9rem); background: var(--flaeche); z-index: -1; }
.heute { isolation: isolate; }
.heute-raster { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); grid-template-areas: "oben buehne" "unten buehne";
  grid-template-rows: auto 1fr; column-gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.heute-text { grid-area: oben; } .heute-unten { grid-area: unten; } .lb-buehne { grid-area: buehne; }
.heute-text h1 { max-width: 16ch; font-size: clamp(2.5rem, 1.2rem + 4vw, 4.4rem); }
.heute-status { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem; margin-top: 1.4rem; }
.heute-status .status { font: 600 clamp(1.3rem, 1.05rem + 1vw, 1.75rem)/1.2 var(--schrift-titel); letter-spacing: -0.01em; gap: .65rem; }
.heute-status .status::before { width: .85rem; height: .85rem; margin-top: .3em; }
.heute-status .status[data-zustand="offen"]::before { box-shadow: 0 0 0 5px color-mix(in srgb, var(--gut) 20%, transparent); }
.heute-status a { font-weight: 600; font-size: .95rem; }
.heute-ausnahme { display: flex; gap: .65rem; align-items: flex-start; margin-top: 1rem; max-width: 34rem; padding: .75rem 1rem; border-radius: var(--radius);
  background: color-mix(in srgb, var(--warn) 10%, var(--karte)); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); font-size: .97rem; }
.heute-ausnahme svg { flex: none; width: 1.25rem; height: 1.25rem; margin-top: .15rem; color: var(--warn); }
.heute-text .lead { margin-top: 1.25rem; }
.heute-knoepfe { margin-top: 1.75rem; }

/* Tageszettel: Zettel vom Tresen mit Datum und Zackenrand */
.zettel-rahmen { margin-top: 1.6rem; max-width: 34rem; filter: drop-shadow(0 10px 18px rgb(60 36 18 / 10%)) drop-shadow(0 1px 1px rgb(60 36 18 / 8%)); }
.zettel { padding: 1.35rem 1.5rem calc(1.5rem + var(--zacke)); background: var(--karte); border-radius: var(--radius) var(--radius) 0 0; }
.zettel-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; padding-bottom: .8rem; margin-bottom: .35rem;
  border-bottom: 2px solid var(--text); }
.zettel-kopf span { font: 800 1.5rem/1 var(--schrift-titel); letter-spacing: -0.02em; }
.zettel-kopf time { font: italic 400 1.15rem/1.2 var(--schrift-hand); color: var(--akzent-dunkel); }
.zettel-liste { display: grid; padding: 0; list-style: none; }
.zettel-liste li { display: grid; gap: .15rem; padding: .8rem 0; border-bottom: 1px dashed var(--linie); }
.zettel-liste li[hidden] { display: none; }
.zettel-liste li:last-child { border-bottom: 0; }
.zettel-zeile { display: flex; align-items: baseline; gap: .55rem; }
.zettel-zeile b { font-weight: 600; font-size: 1.06rem; line-height: 1.35; }
.zettel-punkte { flex: 1 1 1.5rem; min-width: 1.5rem; height: 0; border-bottom: 2px dotted color-mix(in srgb, var(--text) 26%, transparent); transform: translateY(-.28em); transform-origin: left; }
.zettel-preis { flex: none; margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.zettel-unten { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.zettel-text { color: var(--leise); font-size: .93rem; line-height: 1.45; }
.zettel-menge { flex: none; margin-left: auto; font-size: .82rem; color: var(--leise); font-variant-numeric: tabular-nums; white-space: nowrap; }
.zettel-leer { padding: .9rem 0 .2rem; color: var(--leise); }
.zettel-fuss { margin-top: .6rem; padding-top: .7rem; border-top: 1px solid var(--linie); font-size: .88rem; color: var(--leise); }
.zettel-fuss a { font-weight: 600; }

.heute-bild { position: relative; margin: .5rem 0 0; }
.heute-bild figcaption { margin-top: .7rem; }
.stempel { position: absolute; right: -4cqw; bottom: 9cqw; width: clamp(6.25rem, 24cqw, 8.5rem); height: auto; color: var(--akzent-dunkel); transform: rotate(-12deg); }
.stempel-grund { fill: var(--grund); stroke: currentColor; stroke-width: 1.5; }
.stempel-ring { fill: none; stroke: currentColor; stroke-width: 1; stroke-dasharray: 2 3; }
.stempel-text { fill: currentColor; font: 700 12.5px/1 var(--schrift-text); letter-spacing: .12em; }
.stempel-bild { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Vier Wege: Leiste unter dem Heute-Bereich */
.wege { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); background: var(--karte);
  border: 1px solid var(--linie); border-radius: calc(var(--radius) + 4px); box-shadow: var(--schatten); overflow: hidden; }
.weg { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .9rem; align-items: center; min-height: 6.25rem; padding: 1.15rem 1.25rem;
  color: var(--text); text-decoration: none; border-left: 1px solid var(--linie); transition: background-color .2s; }
.weg:first-child { border-left: 0; }
.weg:hover { background: var(--flaeche); }
.weg:focus-visible { outline-offset: -4px; }
.weg-symbol { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 50%; background: var(--krume); color: var(--text); }
.weg-symbol svg { width: 1.45rem; height: 1.45rem; }
.weg-text { display: grid; gap: .15rem; min-width: 0; }
.weg-text b { font: 600 1.18rem/1.15 var(--schrift-titel); letter-spacing: -0.01em; }
.weg-text > span { font-size: .9rem; line-height: 1.35; color: var(--leise); }
.weg-text .status { font-weight: 600; color: var(--text); }
.weg-text .status::before { margin-top: .4em; }
.weg-pfeil svg { width: 1.2rem; height: 1.2rem; color: var(--akzent); transition: transform .2s; }
.weg:hover .weg-pfeil svg { transform: translateX(3px); }
.wege-abschnitt .wege { margin-top: 0; }
@media (max-width: 1060px) { .wege { grid-template-columns: repeat(2, minmax(0, 1fr)); } .weg:nth-child(3) { border-left: 0; } .weg:nth-child(n+3) { border-top: 1px solid var(--linie); } }
@media (max-width: 860px) {
  .heute-raster { grid-template-columns: minmax(0, 1fr); grid-template-areas: "oben" "buehne" "unten"; grid-template-rows: none; }
  .lb-buehne { margin-top: 1.75rem; }
  .stempel { right: .75rem; bottom: -1.75rem; width: 6.25rem; }
}
@media (max-width: 560px) {
  .wege { grid-template-columns: minmax(0, 1fr); }
  .weg { border-left: 0; border-top: 1px solid var(--linie); min-height: 0; padding: .95rem 1rem; }
  .weg:first-child { border-top: 0; }
  .zettel { padding-inline: 1.1rem; }
}

/* ---------- Signatur "Der Morgen im Laden" (Startbereich) ----------
   Einmal beim Laden, rund fünf Sekunden, nur CSS. Bewusst leise: ein Gefühl von frühem Morgen und Wärme, kein Effekt.
   0 bis 2 s es dämmert über dem Foto, ab 0,9 s dreht sich das Türschild auf den Status, ab 1,5 s schreibt sich der Tageszettel,
   ab 2,4 s das Motiv (Bäckerei: Ofenwärme und feiner Dampf, Café: Tasse zeichnet sich; Laden: Markise rollt gleich zu Beginn aus),
   4,6 s Stempel. Der Endzustand ist der Normalzustand: ohne Bewegung (prefers-reduced-motion, kern.css) steht alles sofort da. */
.lb-buehne { container-type: inline-size; isolation: isolate; }
.lb-bild { position: relative; overflow: hidden; border-radius: var(--radius-bild); box-shadow: var(--schatten); }
.lb-bild .bild { aspect-ratio: 4 / 5; border-radius: 0; }
.lb-bild::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, #1A2033 0%, #3A3142 100%); mix-blend-mode: multiply; }
/* Bäckerei: Ofenwärme von unten, sehr dezent, bleibt als warmer Ton */
.lb--baeckerei .lb-bild::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .55;
  background: radial-gradient(75% 42% at 50% 104%, rgb(255 170 96 / 55%), transparent 72%); mix-blend-mode: soft-light; }
.lb-dampf { position: absolute; left: 22%; bottom: 26%; z-index: 1; width: 56%; height: auto; overflow: visible; filter: blur(7px); pointer-events: none; mix-blend-mode: screen; }
.lb-d { fill: none; stroke: rgb(255 244 228 / 34%); stroke-width: 18; stroke-linecap: round; stroke-dasharray: .4 1.5; stroke-dashoffset: .4; }

/* Türschild an der Schnur: Rückseite dunkel, Vorderseite hell mit Statuspunkt */
.lb-schild { position: absolute; z-index: 4; top: 5cqw; left: -6cqw; display: grid; justify-items: center; transform-origin: 50% 0; perspective: 700px;
  filter: drop-shadow(0 10px 12px rgb(40 24 12 / 24%)) drop-shadow(0 1px 1px rgb(40 24 12 / 20%)); }
.lb-schnur { display: block; width: 21cqw; height: auto; overflow: visible; }
.lb-schnur path { fill: none; stroke: var(--text); stroke-width: 1.4; }
.lb-schnur circle { fill: var(--text); }
.lb-dreh { display: grid; margin-top: -1px; transform-style: preserve-3d; }
.lb-seite { grid-area: 1 / 1; display: grid; justify-items: center; align-content: center; gap: .9cqw; min-width: 31cqw; padding: 3.6cqw 4.6cqw 3cqw;
  border-radius: 7px; text-align: center; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.lb-seite b { font: 800 clamp(1.15rem, 6.4cqw, 2.3rem)/1 var(--schrift-titel); letter-spacing: -0.025em; white-space: nowrap; }
.lb-seite span { max-width: 30cqw; font: 600 clamp(.68rem, 2.4cqw, .86rem)/1.3 var(--schrift-text); text-wrap: balance; }
.lb-seite--auf { background: var(--karte); color: var(--text); box-shadow: inset 0 0 0 2px var(--text), inset 0 0 0 5px var(--karte), inset 0 0 0 6px color-mix(in srgb, var(--text) 30%, transparent); }
.lb-seite--auf b::before { content: ""; display: inline-block; width: .42em; height: .42em; margin: 0 .28em .1em 0; border-radius: 50%; background: var(--akzent); vertical-align: middle; }
.lb-schild[data-zustand="offen"] .lb-seite--auf b::before, .lb-schild[data-zustand="bald"] .lb-seite--auf b::before { background: var(--gut); }
.lb-schild[data-zustand="zu"] .lb-seite--auf b::before { background: #B4462E; }
.lb-seite--zu { background: var(--marke); color: var(--marke-text); transform: rotateY(180deg); }
/* Ösen, an denen die Schnur hängt (Abstand passt zu den Enden der Schnur) */
.lb-seite::before, .lb-seite::after { content: ""; position: absolute; top: 1.3cqw; width: 1.3cqw; height: 1.3cqw; border-radius: 50%;
  background: color-mix(in srgb, currentColor 30%, transparent); box-shadow: inset 0 1px 1px rgb(0 0 0 / 30%); }
.lb-seite::before { left: calc(50% - 7.56cqw - .65cqw); } .lb-seite::after { left: calc(50% + 7.56cqw - .65cqw); }
.lb-seite { position: relative; }
.lb-seite--zu span { color: var(--krume); }
.lb--laden .lb-schild { top: 17cqw; }

/* Café: Tasse auf einem runden Untersetzer, als Linie gezeichnet */
.lb-tasse { position: absolute; z-index: 3; left: -7cqw; bottom: 9cqw; display: grid; place-items: center; width: 30cqw; aspect-ratio: 1; border-radius: 50%;
  background: var(--karte); box-shadow: 0 1px 2px rgb(40 24 12 / 12%), 0 16px 30px -10px rgb(40 24 12 / 35%); }
.lb-tasse svg { width: 76%; height: auto; overflow: visible; }
.lb-t { fill: none; stroke: var(--text); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.lb-k { stroke: var(--akzent); stroke-width: 2.2; }

/* Laden: Markise über dem Schaufenster, Streifen in Akzent und Papier, Bogenkante */
.lb-markise { position: absolute; z-index: 3; top: -2.5cqw; left: -3cqw; right: -3cqw; height: 13cqw; border-top: 1.4cqw solid var(--marke); border-radius: 4px 4px 0 0; transform-origin: 50% 0;
  background: linear-gradient(rgb(0 0 0 / 16%), transparent 45%, rgb(0 0 0 / 6%)), repeating-linear-gradient(90deg, var(--akzent) 0 4.5cqw, var(--karte) 4.5cqw 9cqw); }
.lb-markise::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 2.25cqw;
  background: repeating-linear-gradient(90deg, var(--akzent) 0 4.5cqw, var(--karte) 4.5cqw 9cqw);
  -webkit-mask: radial-gradient(circle at 50% 0, #000 2.2cqw, #0000 2.3cqw) 0 0 / 4.5cqw 100% repeat-x;
  mask: radial-gradient(circle at 50% 0, #000 2.2cqw, #0000 2.3cqw) 0 0 / 4.5cqw 100% repeat-x; filter: drop-shadow(0 4px 4px rgb(0 0 0 / 18%)); }

/* Tageszettel: Zeilen und Ziffern für die Schreib-Reihenfolge (vorlage.js setzt sie nach dem echten Tag neu) */
.zettel { --lb-start: 1.5s; --n: 0; }
.zettel-kopf { border-bottom: 0; background: linear-gradient(var(--text), var(--text)) 0 100% / 100% 2px no-repeat; }
.zettel-liste li { --i: 1; }
[data-zeile="2"] { --i: 2; } [data-zeile="3"] { --i: 3; } [data-zeile="4"] { --i: 4; } [data-zeile="5"] { --i: 5; } [data-zeile="6"] { --i: 6; } [data-zeile="7"] { --i: 7; } [data-zeile="8"] { --i: 8; }
[data-zeilen="1"] { --n: 1; } [data-zeilen="2"] { --n: 2; } [data-zeilen="3"] { --n: 3; } [data-zeilen="4"] { --n: 4; } [data-zeilen="5"] { --n: 5; } [data-zeilen="6"] { --n: 6; } [data-zeilen="7"] { --n: 7; } [data-zeilen="8"] { --n: 8; }

@media (max-width: 860px) {
  .lb-bild .bild { aspect-ratio: 4 / 3.3; }
  .lb-schild { left: 4cqw; top: 4cqw; }
  .lb--laden .lb-schild { top: 15cqw; }
  .lb-tasse { left: 3cqw; bottom: -6cqw; width: 27cqw; }
  .lb-markise { left: -1.5cqw; right: -1.5cqw; }
  .zettel { --lb-start: .35s; }   /* am Handy liegt der Zettel unter dem Foto: er schreibt sich, sobald er ins Bild kommt */
}

@media (prefers-reduced-motion: no-preference) {
  .lb-bild::after { animation: lb-daemmern 2s cubic-bezier(.4, 0, .2, 1) .1s both; }
  .lb--baeckerei .lb-bild::before { animation: lb-waerme 2.4s ease 2.2s both; }
  .lb-d { animation: lb-dampf 3s cubic-bezier(.3, 0, .4, 1) both; }
  .lb-d1 { animation-delay: 2.7s; } .lb-d2 { animation-delay: 3.1s; } .lb-d3 { animation-delay: 3.5s; }
  .lb-schild { animation: lb-pendeln 2.6s ease-out .2s both; }
  .lb-dreh { animation: lb-drehen 1s cubic-bezier(.5, 0, .25, 1.25) .9s both; }
  .lb-markise { animation: lb-rollen 1s cubic-bezier(.3, 1.2, .5, 1) .15s both; }
  .lb--laden .lb-schild { animation-delay: .9s; } .lb--laden .lb-dreh { animation-delay: 1.4s; }
  .lb-tasse { animation: lb-auf .6s ease 2.4s both; }
  .lb-t { stroke-dashoffset: 1; animation: lb-zeichnen .8s cubic-bezier(.45, 0, .2, 1) forwards; }
  .lb-t1 { animation-delay: 2.7s; } .lb-t2 { animation-delay: 2.95s; } .lb-t3 { animation-delay: 3.2s; } .lb-t4 { animation-delay: 3.45s; }
  .lb-k { animation-duration: 1.1s; } .lb-k1 { animation-delay: 3.8s; } .lb-k2 { animation-delay: 4.05s; }
  .lb-buehne .stempel { animation: lb-stempel .45s cubic-bezier(.3, 1.6, .5, 1) 4.6s both; }

  .zettel-rahmen .zettel-kopf span { animation: lb-schreiben .5s ease-out var(--lb-start) both; }
  .zettel-rahmen .zettel-kopf time { animation: lb-schreiben .7s ease-out calc(var(--lb-start) + .3s) both; }
  .zettel-rahmen .zettel-kopf { animation: lb-strich .6s ease-out calc(var(--lb-start) + .2s) both; }
  .zettel-rahmen li { --t: calc(var(--lb-start) + .7s + (var(--i) - 1) * .42s); }
  .zettel-rahmen li b { animation: lb-schreiben .5s ease-out var(--t) both; }
  .zettel-rahmen .zettel-punkte { animation: lb-linie .4s ease-out calc(var(--t) + .35s) both; }
  .zettel-rahmen .zettel-preis { animation: lb-auf .35s ease-out calc(var(--t) + .65s) both; }
  .zettel-rahmen .zettel-unten { animation: lb-schreiben .55s ease-out calc(var(--t) + .2s) both; }
  .zettel-rahmen :is(.zettel-fuss, .zettel-leer) { animation: lb-auf .5s ease calc(var(--lb-start) + .8s + var(--n) * .42s) both; }
  /* Am Handy liegt der Zettel unter dem Foto: Er wartet, bis er ins Bild kommt (kern.js setzt .sichtbar), am Rechner schreibt er sich sofort */
  @media (max-width: 860px) { .js .zettel-rahmen:not(.sichtbar), .js .zettel-rahmen:not(.sichtbar) * { animation-play-state: paused; } }
  @media (min-width: 861px) { .js .zettel-rahmen.einblenden { opacity: 1; transform: none; } }
}
@keyframes lb-daemmern { from { opacity: .72; } to { opacity: 0; } }
@keyframes lb-waerme { from { opacity: 0; } 55% { opacity: .8; } to { opacity: .55; } }
@keyframes lb-dampf { 0% { stroke-dashoffset: .4; opacity: 0; } 30% { opacity: 1; } 100% { stroke-dashoffset: -1.1; opacity: 0; } }
@keyframes lb-pendeln { 0%, 35% { transform: rotate(0); } 50% { transform: rotate(3.5deg); } 64% { transform: rotate(-2.2deg); } 78% { transform: rotate(1.1deg); } 90% { transform: rotate(-.4deg); } 100% { transform: rotate(0); } }
@keyframes lb-drehen { from { transform: rotateY(180deg); } to { transform: rotateY(0); } }
@keyframes lb-rollen { from { transform: scaleY(.06); } to { transform: none; } }
@keyframes lb-zeichnen { to { stroke-dashoffset: 0; } }
@keyframes lb-auf { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes lb-linie { from { transform: translateY(-.28em) scaleX(0); } to { transform: translateY(-.28em) scaleX(1); } }
@keyframes lb-schreiben { from { clip-path: inset(-.3em 100% -.3em 0); } to { clip-path: inset(-.3em 0 -.3em 0); } }
@keyframes lb-strich { from { background-size: 0 2px; } to { background-size: 100% 2px; } }
@keyframes lb-stempel { from { opacity: 0; transform: scale(1.6) rotate(-4deg); } to { opacity: 1; transform: rotate(-12deg); } }

/* ---------- Spezialität ---------- */
.spezial { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(2rem, 1rem + 5vw, 6rem); align-items: center; }
.spezial-bild { position: relative; }
.spezial-bild .bild { border-radius: var(--radius-bild); }
.spezial-text h2 { max-width: 14ch; margin-bottom: 1.25rem; }
.spezial-text .fliess { font-size: 1.1rem; color: color-mix(in srgb, var(--marke-text) 86%, var(--marke)); }
.spezial-fakten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; padding: 1.4rem 0; list-style: none;
  border-block: 1px solid color-mix(in srgb, var(--marke-text) 20%, transparent); }
.spezial-fakten li { display: grid; gap: .3rem; }
.spezial-fakten b { font: 800 clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem)/1 var(--schrift-titel); letter-spacing: -0.03em; color: var(--krume); font-variant-numeric: tabular-nums; }
.spezial-fakten span { font-size: .92rem; line-height: 1.35; color: color-mix(in srgb, var(--marke-text) 75%, var(--marke)); }
.spezial-wann { display: flex; gap: .6rem; align-items: flex-start; margin-top: 1.4rem; font-weight: 600; }
.spezial-wann svg { flex: none; width: 1.3rem; height: 1.3rem; margin-top: .15rem; color: var(--krume); }
.spezialitaet .knopf { background: var(--krume); border-color: var(--krume); color: var(--marke); }
.spezialitaet .knopf:hover { background: var(--marke-text); border-color: var(--marke-text); }
.spezialitaet .knopf--rand { background: transparent; color: var(--marke-text); border-color: color-mix(in srgb, var(--marke-text) 45%, transparent); }
/* Preisschild am Bild */
.preisschild-rahmen { position: absolute; right: clamp(-1.5rem, -1rem - 1vw, -.5rem); bottom: 2rem; width: min(15rem, 70%); transform: rotate(2.5deg);
  filter: drop-shadow(0 12px 18px rgb(0 0 0 / 28%)); }
.preisschild { display: grid; gap: .2rem; padding: 1rem 1.15rem calc(1rem + var(--zacke)); background: var(--grund); color: var(--text); border-radius: 6px 6px 0 0; }
.preisschild-name { font: italic 400 1.05rem/1.2 var(--schrift-hand); color: var(--akzent-dunkel); }
.preisschild b { font: 800 2.1rem/1 var(--schrift-titel); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.preisschild > span:last-child { font-size: .85rem; color: var(--leise); }
@media (max-width: 860px) {
  .spezial { grid-template-columns: minmax(0, 1fr); }
  .spezial-bild .bild { aspect-ratio: 4 / 3.6; }
  .preisschild-rahmen { right: .75rem; bottom: -1.5rem; }
  .spezial-text { margin-top: 1.5rem; }
}
@media (max-width: 480px) { .spezial-fakten { grid-template-columns: minmax(0, 1fr); gap: .9rem; } .spezial-fakten li { grid-template-columns: 6.5rem minmax(0, 1fr); align-items: baseline; } }

/* ---------- Haltung ---------- */
.haltung-satz p { max-width: 24ch; font: italic 400 clamp(1.9rem, 1.2rem + 2.9vw, 3.6rem)/1.14 var(--schrift-hand); letter-spacing: -0.015em; text-wrap: balance; }
.haltung-satz footer { margin-top: 1.1rem; font-size: .95rem; color: var(--leise); }
.haltung-bild { margin-top: clamp(2rem, 1.5rem + 2vw, 3.25rem); }
.haltung-bild .bild { --format: 21 / 8; border-radius: var(--radius-bild); }
.werte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 1rem + 2vw, 3rem); margin-top: clamp(2rem, 1.5rem + 2vw, 3.25rem); padding: 0; list-style: none; }
.werte li { display: grid; align-content: start; gap: .6rem; padding-top: 1.25rem; border-top: 2px solid var(--text); }
.wert-symbol { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--krume); }
.wert-symbol svg { width: 1.4rem; height: 1.4rem; }
.werte h3 { font-size: 1.35rem; }
@media (max-width: 860px) { .werte { grid-template-columns: minmax(0, 1fr); } .haltung-bild .bild { --format: 16 / 9; } }

/* ---------- Saison ---------- */
.saison { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1.25rem; }
.saison-gross { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); background: var(--karte); border: 1px solid var(--linie); border-radius: calc(var(--radius) + 4px); overflow: hidden; }
.saison-gross .bild { border-radius: 0; height: 100%; aspect-ratio: auto; min-height: 18rem; }
.saison-text, .saison-klein { display: grid; align-content: start; gap: .7rem; padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); }
.saison-klein { background: var(--karte); border: 1px dashed color-mix(in srgb, var(--text) 25%, transparent); border-radius: calc(var(--radius) + 4px); }
.saison-text h3, .saison-klein h3 { font-size: clamp(1.45rem, 1.2rem + .9vw, 1.9rem); font-weight: 800; letter-spacing: -0.02em; }
.saison-zeitraum { display: inline-flex; align-items: center; gap: .45rem; justify-self: start; padding: .3rem .7rem; border-radius: 6px; background: var(--krume);
  font-size: .85rem; font-weight: 600; }
.saison-zeitraum svg { width: 1rem; height: 1rem; }
.saison-preis { margin-top: .4rem; font-variant-numeric: tabular-nums; color: var(--leise); font-size: .92rem; }
.saison-preis b { font: 800 1.6rem/1 var(--schrift-titel); color: var(--text); letter-spacing: -0.02em; margin-right: .35rem; }
@media (max-width: 980px) { .saison { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .saison-gross { grid-template-columns: minmax(0, 1fr); } .saison-gross .bild { min-height: 0; aspect-ratio: 16 / 10; } }

/* ---------- Wochenplan: Mittagstisch ---------- */
.mittag-woche { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; align-items: center; margin: -.75rem 0 1.5rem; font-weight: 600; }
.mittag-woche svg { width: 1.2rem; height: 1.2rem; color: var(--akzent); }
.mittag-woche > span:first-of-type { margin-left: -.8rem; }
.mittag-zeit { font-weight: 400; color: var(--leise); }
.mittag { display: grid; padding: 0; list-style: none; border-top: 2px solid var(--text); }
.mittag li { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) auto; gap: 1.25rem; align-items: baseline; padding: 1.15rem 1.1rem; border-bottom: 1px solid var(--linie); }
.mittag time { display: grid; gap: .1rem; }
.mittag time b { font: 600 1.1rem/1.2 var(--schrift-titel); }
.mittag time span { font-size: .88rem; color: var(--leise); }
.mittag h3 { font-family: var(--schrift-text); font-weight: 600; font-size: 1.1rem; letter-spacing: 0; line-height: 1.35; }
.mittag .leise { font-size: .95rem; }
.mittag-preis { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mittag li[data-heute] { position: relative; background: var(--karte); border-radius: var(--radius); box-shadow: inset 4px 0 0 var(--akzent); border-bottom-color: transparent; }
.mittag li[data-heute] time b::after { content: " · Heute"; font: italic 400 1rem var(--schrift-hand); color: var(--akzent-dunkel); }
.mittag li[data-vorbei] { opacity: .55; }
.mittag-alt { margin-top: 1rem; color: var(--leise); }
@media (max-width: 640px) { .mittag li { grid-template-columns: minmax(0, 1fr) auto; gap: .35rem 1rem; } .mittag time { grid-column: 1 / -1; grid-auto-flow: column; justify-content: start; gap: .6rem; align-items: baseline; } }

/* ---------- Wochenplan: Backplan ---------- */
.backplan-rahmen { overflow-x: auto; border-radius: calc(var(--radius) + 4px); border: 1px solid var(--linie); background: var(--karte); }
.backplan { width: 100%; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; }
.backplan thead th:first-child { width: 34%; }
.backplan th, .backplan td { padding: .85rem .5rem; border-bottom: 1px solid var(--linie); text-align: center; }
.backplan tbody tr:last-child th, .backplan tbody tr:last-child td { border-bottom: 0; }
.backplan thead th { font: 600 .95rem/1 var(--schrift-text); color: var(--leise); padding-block: 1rem; }
.backplan abbr { text-decoration: none; }
.backplan tbody th { text-align: left; padding-left: 1.25rem; }
.backplan tbody th b { display: block; font-weight: 600; }
.backplan tbody th small { display: block; font-weight: 400; font-size: .85rem; color: var(--leise); line-height: 1.35; }
.backplan [data-heute] { background: color-mix(in srgb, var(--krume) 55%, transparent); }
.backplan thead th[data-heute] { color: var(--text); }
.backplan thead th[data-heute] abbr::after { content: "Heute"; display: block; margin-top: .25rem; font: italic 400 .85rem var(--schrift-hand); color: var(--akzent-dunkel); }
.punkt { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; background: var(--akzent); vertical-align: middle; }
@media (max-width: 560px) { .backplan thead th:first-child { width: 44%; } .backplan thead th[data-heute] abbr::after { display: none; } .backplan thead th[data-heute] { color: var(--akzent-dunkel); } .backplan tbody th { padding-left: .85rem; } .backplan th, .backplan td { padding-inline: .3rem; } }

/* ---------- Karte ---------- */
.karte-status { margin: -1rem 0 1.5rem; }
.karte-sprung { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.karte-sprung a { display: inline-flex; align-items: center; min-height: 44px; padding: .5rem 1rem; border: 1.5px solid var(--linie); border-radius: var(--radius);
  background: var(--karte); color: var(--text); text-decoration: none; font-weight: 600; font-size: .95rem; transition: border-color .2s, background-color .2s; }
.karte-sprung a:hover { border-color: var(--text); background: var(--flaeche); }
.karte-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.5rem, 1.5rem + 3vw, 4rem) clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.karte-gruppe { scroll-margin-top: 100px; }
.karte-gruppe--breit { grid-column: 1 / -1; }
.gruppe-kopf { display: grid; gap: .35rem; padding-bottom: .9rem; margin-bottom: .25rem; border-bottom: 2px solid var(--text); }
.gruppe-kopf h3 { font-weight: 800; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); letter-spacing: -0.025em; }
.gruppe-zeit { display: flex; align-items: center; gap: .45rem; font-size: .92rem; font-weight: 600; color: var(--akzent-dunkel); }
.gruppe-zeit svg { width: 1.05rem; height: 1.05rem; }
.gruppe-kopf .leise { font-size: .95rem; }
.karte-liste { display: grid; padding: 0; list-style: none; }
.posten { padding: .85rem 0; border-bottom: 1px solid var(--linie); }
.posten-zeile { display: flex; align-items: baseline; gap: .55rem; }
.posten-name { font-weight: 600; font-size: 1.07rem; line-height: 1.35; }
.posten-punkte { flex: 1 1 1.5rem; min-width: 1.5rem; height: 0; border-bottom: 2px dotted color-mix(in srgb, var(--text) 28%, transparent); transform: translateY(-.28em); }
.posten-preis { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.posten-info { margin-top: .2rem; font-size: .93rem; line-height: 1.45; color: var(--leise); }
.posten-menge { display: inline-block; margin-right: .35rem; padding: 0 .4rem; border-radius: 4px; background: var(--flaeche); color: var(--text); font-size: .84rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.posten-kennung { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; margin-top: .4rem; }
.kennungen { display: inline-flex; flex-wrap: wrap; gap: .25rem; }
.kennung { display: inline-grid; place-items: center; min-width: 1.45rem; height: 1.45rem; padding: 0 .25rem; border: 1px solid color-mix(in srgb, var(--text) 30%, transparent);
  border-radius: 4px; font-size: .72rem; font-weight: 600; line-height: 1; color: var(--leise); text-decoration: none; cursor: help; }
.kennung--zahl { border-style: dashed; }
.merkmal { display: inline-flex; align-items: center; gap: .25rem; font-size: .8rem; font-weight: 600; color: var(--gut); }
.merkmal svg { width: .95rem; height: .95rem; }
.grundpreis { font-size: .8rem; color: var(--leise); font-variant-numeric: tabular-nums; }
.gruppe-hinweis { margin-top: .8rem; font-size: .9rem; color: var(--leise); }
.karte-legende { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 1.5rem 2.5rem; margin-top: clamp(3rem, 2rem + 3vw, 4.5rem);
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); border-radius: calc(var(--radius) + 4px); background: var(--flaeche); }
.karte-legende h3 { font-size: 1.15rem; margin-bottom: .7rem; }
.legende-liste { display: grid; gap: .35rem; margin: 0; }
.legende-liste div { display: flex; gap: .6rem; align-items: center; }
.legende-liste dt { display: inline-grid; place-items: center; min-width: 1.45rem; height: 1.45rem; border: 1px solid color-mix(in srgb, var(--text) 30%, transparent); border-radius: 4px;
  font-size: .72rem; font-weight: 600; }
.legende-liste dd { margin: 0; font-size: .92rem; }
.legende-text { display: grid; gap: .6rem; align-content: start; }
@media (max-width: 860px) { .karte-raster { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Torte anfragen ---------- */
.torte-raster { display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); align-items: start; }
.torte-form { gap: 0; padding: 0; overflow: hidden; }
.torte-schritt { display: grid; gap: 1.1rem; padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); border-bottom: 1px solid var(--linie); }
.torte-schritt h3 { display: flex; align-items: center; gap: .75rem; font-size: clamp(1.3rem, 1.15rem + .6vw, 1.6rem); font-weight: 800; letter-spacing: -0.02em; }
.schritt-nr { display: grid; place-items: center; flex: none; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--text); color: var(--grund);
  font: 600 1rem/1 var(--schrift-text); letter-spacing: 0; }
.schritt-text { margin-top: -.6rem; }
.torte-form > .datenschutz-satz, .torte-form > .knoepfe, .torte-form > .formular-meldung { margin: 0 clamp(1.25rem, 1rem + 1.5vw, 2rem); }
.torte-form > .datenschutz-satz { margin-top: 1.25rem; }
.torte-form > .knoepfe { margin-top: 1rem; margin-bottom: clamp(1.25rem, 1rem + 1.5vw, 2rem); }
.torte-form > .formular-meldung:not([hidden]) { margin-bottom: clamp(1.25rem, 1rem + 1.5vw, 2rem); }
.torte-form .knopf { min-width: min(100%, 16rem); }
.torte-wahl { border: 0; padding: 0; margin: 0; min-width: 0; }
.torte-wahl legend { padding: 0; margin-bottom: .6rem; font-weight: 600; font-size: .95rem; }
.sorten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }

.sorte, .groesse { position: relative; display: grid; }
.sorte input, .groesse input { position: absolute; opacity: 0; pointer-events: none; }
.sorte-karte { position: relative; display: grid; grid-template-rows: auto 1fr; height: 100%; overflow: hidden; border: 1.5px solid var(--linie); border-radius: calc(var(--radius) + 2px);
  background: var(--grund); cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .2s; }
.sorte-karte .bild { border-radius: 0; --format: 16 / 10; }
.sorte-ohne-bild { display: grid; place-items: center; aspect-ratio: 16 / 10; background: var(--flaeche); color: var(--akzent-dunkel); }
.sorte-ohne-bild svg { width: 2.6rem; height: 2.6rem; }
.sorte-inhalt { display: grid; align-content: start; gap: .3rem; padding: .85rem .95rem 1rem; }
.sorte-inhalt b { font: 600 1.12rem/1.25 var(--schrift-titel); letter-spacing: -0.01em; }
.sorte-inhalt small { font-size: .88rem; line-height: 1.4; color: var(--leise); }
.sorte-preis { font-weight: 600; font-variant-numeric: tabular-nums; }
.sorte-allergene { font-size: .8rem; line-height: 1.4; color: var(--leise); }
.sorte-haken { position: absolute; top: .6rem; right: .6rem; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: var(--akzent); color: var(--akzent-text); opacity: 0; transform: scale(.7); transition: opacity .2s, transform .2s; }
.sorte-haken svg { width: 1.1rem; height: 1.1rem; }
.sorte-karte:hover, .groesse-karte:hover { border-color: color-mix(in srgb, var(--text) 40%, var(--linie)); }
.sorte input:checked + .sorte-karte { border-color: var(--akzent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--akzent) 22%, transparent); }
.sorte input:checked + .sorte-karte .sorte-haken { opacity: 1; transform: none; }
.sorte input:focus-visible + .sorte-karte, .groesse input:focus-visible + .groesse-karte { outline: 3px solid var(--akzent); outline-offset: 2px; }
.groessen { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: .75rem; }
.groesse-karte { display: grid; justify-items: center; gap: .25rem; height: 100%; padding: 1rem .75rem 1.1rem; text-align: center; border: 1.5px solid var(--linie);
  border-radius: calc(var(--radius) + 2px); background: var(--grund); cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.groesse-karte b { font: 600 1.1rem/1.2 var(--schrift-titel); }
.groesse-karte small { font-size: .86rem; color: var(--leise); line-height: 1.35; }
.groesse-kreis { display: block; margin-bottom: .35rem; border-radius: 50%; border: 2px solid currentColor; color: var(--akzent-dunkel);
  background: color-mix(in srgb, var(--krume) 70%, transparent); }
.groesse-kreis--s { width: 1.9rem; height: 1.9rem; margin-top: 1.2rem; }
.groesse-kreis--m { width: 2.5rem; height: 2.5rem; margin-top: .6rem; }
.groesse-kreis--l { width: 3.1rem; height: 3.1rem; }
.groesse input:checked + .groesse-karte { border-color: var(--akzent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--akzent) 22%, transparent); background: var(--karte); }
.torte-wahl[data-fehler] .sorte-karte, .torte-wahl[data-fehler] .groesse-karte { border-color: #B4462E; }
.torte-wahl > .feld-fehler { display: block; margin-top: .5rem; font-weight: 600; }
.torte-frueh { display: flex; gap: .55rem; align-items: flex-start; margin-top: -.35rem; font-size: .93rem; color: var(--leise); }
.torte-frueh svg { flex: none; width: 1.15rem; height: 1.15rem; margin-top: .2rem; color: var(--akzent); }
.torte-frueh b { color: var(--text); }
.torte-tag-fehler { margin-top: -.5rem; padding: .6rem .85rem; border-radius: var(--radius); background: color-mix(in srgb, #B4462E 10%, var(--karte)); color: #8E3020; font-size: .93rem; font-weight: 600; }
.torte-form.ist-gesendet .torte-schritt { display: none; }
@media (max-width: 560px) {
  .sorten { grid-template-columns: minmax(0, 1fr); gap: .65rem; }
  .sorte-karte { grid-template-columns: 6.5rem minmax(0, 1fr); grid-template-rows: none; }
  .sorte-karte .bild, .sorte-ohne-bild { aspect-ratio: auto; height: 100%; min-height: 7rem; }
  .sorte-inhalt { padding: .75rem .85rem .85rem; }
  .sorte-haken { top: .5rem; left: .5rem; right: auto; }
  .groessen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
  .groesse-karte { padding: .8rem .4rem .9rem; }
}/* Seite: Zusammenfassung und Regeln */
.torte-seite { position: sticky; top: 96px; display: grid; gap: 1.25rem; }
.torte-summe { padding: 1.4rem 1.5rem 1.5rem; border-radius: calc(var(--radius) + 4px); background: var(--marke); color: var(--marke-text); }
.torte-summe h3 { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: .9rem; }
.torte-summe dl { display: grid; gap: 0; margin: 0; }
.torte-summe dl div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .75rem; padding: .55rem 0; border-top: 1px solid color-mix(in srgb, var(--marke-text) 16%, transparent); }
.torte-summe dt { font-size: .88rem; color: color-mix(in srgb, var(--marke-text) 70%, var(--marke)); }
.torte-summe dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.torte-summe dd[data-leer] { font-weight: 400; color: color-mix(in srgb, var(--marke-text) 62%, var(--marke)); }
.torte-summe-text { margin-top: .9rem; font-size: .88rem; line-height: 1.5; color: color-mix(in srgb, var(--marke-text) 78%, var(--marke)); }
.torte-regeln { display: grid; gap: .9rem; padding: 0; list-style: none; }
.torte-regeln li { display: flex; gap: .8rem; align-items: flex-start; }
.torte-regeln svg { flex: none; width: 1.3rem; height: 1.3rem; margin-top: .2rem; color: var(--akzent); }
.torte-regeln b { display: block; font-weight: 600; }
.torte-regeln span { font-size: .95rem; color: var(--leise); line-height: 1.5; }
.torte-regeln span b { color: var(--text); }
.torte-anruf { padding-top: 1rem; border-top: 1px solid var(--linie); font-size: .95rem; color: var(--leise); }
.torte-anruf a { font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 960px) { .torte-raster { grid-template-columns: minmax(0, 1fr); } .torte-seite { position: static; } }

/* ---------- Zahlung ---------- */
.zahlung { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 2rem; }
.zahlung-satz { font: 600 clamp(1.15rem, 1rem + .5vw, 1.35rem)/1.3 var(--schrift-titel); letter-spacing: -0.01em; }
.zahlung-liste { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; list-style: none; }
.zahlung-liste li { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .75rem; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--karte);
  font-size: .92rem; font-weight: 600; }
.zahlung-liste svg { width: 1.25rem; height: 1.25rem; color: var(--akzent-dunkel); }
.zahlung-hinweis { margin-top: .8rem; }
.zahlung-abschnitt { border-block: 1px solid var(--linie); }
.zahlung-abschnitt.abschnitt--flaeche { border: 0; }

/* ---------- Für Gäste ---------- */
.gaeste .kopfzeile h2 { max-width: 22ch; }
.gaeste-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 1rem 2rem; padding: 0; list-style: none; }
.gaeste-liste li { display: flex; gap: .75rem; align-items: flex-start; padding-top: 1rem; border-top: 1px solid var(--linie); }
.gaeste-liste svg { flex: none; width: 1.35rem; height: 1.35rem; margin-top: .15rem; color: var(--akzent); }

/* ---------- Gemeinsame Module im Ton der Vorlage ---------- */
.held--typo { padding-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.held--typo h1 { font-size: clamp(2.4rem, 1.3rem + 4.4vw, 4.6rem); max-width: 16ch; }
.held--bild .bild { border-radius: var(--radius-bild); }
.zeiten th { font-weight: 600; white-space: normal; }
.zeiten td { white-space: nowrap; }
.zeiten tr[data-heute] th, .zeiten tr[data-heute] td { color: var(--text); background: color-mix(in srgb, var(--krume) 50%, transparent); }
.zeiten tr[data-heute] th { padding-left: .6rem; border-radius: 6px 0 0 6px; }
.zeiten tr[data-heute] td { border-radius: 0 6px 6px 0; }
.zeiten tr[data-heute] th::after { font: italic 400 .95em var(--schrift-hand); color: var(--akzent-dunkel); }
.zeiten-abschnitt .status { font: 600 1.25rem/1.25 var(--schrift-titel); }
.karte--bild, .karte { border-radius: calc(var(--radius) + 4px); }
.text-bild .bild { border-radius: var(--radius-bild); }
.zitat { border-left-color: var(--akzent); }
.zitat p { font-family: var(--schrift-hand); font-weight: 400; font-style: italic; }
.zeitleiste .jahr { font-weight: 800; color: var(--akzent-dunkel); }
.zeitleiste li::before { background: var(--grund); border-color: var(--akzent); }
.galerie { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.galerie .bild { border-radius: var(--radius-bild); --format: 4 / 3; }
.person .bild { border-radius: var(--radius-bild); }
.stelle { border-top: 3px solid var(--akzent); }
.fragen summary { font-weight: 600; }
.fragen summary::after { color: var(--akzent); }
.symbol { border-radius: 50%; background: var(--krume); color: var(--text); }
.kontakt-liste svg, .anfahrt .kontakt-liste svg { color: var(--akzent); }
.abschluss-abschnitt h2 { font-size: clamp(2.1rem, 1.4rem + 2.8vw, 3.6rem); }
.abschnitt--marke .knopf:not(.knopf--rand) { background: var(--krume); border-color: var(--krume); color: var(--marke); }
.abschnitt--marke .knopf:not(.knopf--rand):hover { background: var(--marke-text); border-color: var(--marke-text); }
.karte-klick { border-radius: calc(var(--radius) + 4px); }
.handyleiste a:first-child { background: var(--marke); color: var(--marke-text); }

/* ---------- Fuß mit Zackenrand oben ---------- */
.fuss { position: relative; margin-top: calc(var(--zacke) * -.5); padding-top: calc(clamp(3rem, 2rem + 3vw, 4.5rem) + var(--zacke));
  -webkit-mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% / var(--zacke) 100%;
  mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% / var(--zacke) 100%; }
.fuss h2 { font-size: 1.9rem; }

@media print { .stempel, .wege, .torte-seite { display: none !important; } .zettel, .preisschild, .fuss { -webkit-mask: none; mask: none; } }

/* ---------- Abschluss-Band in Weizen, damit der dunkle Fuß mit Zackenrand davor steht ---------- */
.abschluss-abschnitt.abschnitt--marke { background: var(--krume); color: var(--text); }
.abschluss-abschnitt.abschnitt--marke .lead { color: color-mix(in srgb, var(--text) 78%, var(--krume)); }
.abschluss-abschnitt.abschnitt--marke .knopf:not(.knopf--rand) { background: var(--marke); border-color: var(--marke); color: var(--marke-text); }
.abschluss-abschnitt.abschnitt--marke .knopf:not(.knopf--rand):hover { background: var(--akzent-dunkel); border-color: var(--akzent-dunkel); }
.abschluss-abschnitt.abschnitt--marke .knopf--rand { color: var(--text); border-color: color-mix(in srgb, var(--text) 40%, transparent); }
.abschluss-abschnitt.abschnitt--marke .knopf--rand:hover { background: var(--text); color: var(--krume); border-color: var(--text); }

/* ---------- Sprachwahl: dezent neben dem Status ---------- */
.heute-status .sprachwahl { display: inline-flex; align-items: center; gap: .3rem; min-height: 44px; margin-left: auto; color: var(--leise); font-weight: 600; font-size: .9rem;
  text-decoration: none; }
.heute-status .sprachwahl svg { width: 1rem; height: 1rem; }
.heute-status .sprachwahl:hover { color: var(--text); text-decoration: underline; text-underline-offset: .2em; }
.heute-status > a:not(.sprachwahl) { min-height: 44px; display: inline-flex; align-items: center; }

/* ---------- Torte: Assistent Schritt für Schritt (vorlage.js; ohne Skript stehen alle Schritte untereinander) ---------- */
.torte-fortschritt { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); margin: 0; padding: 1.25rem clamp(1.25rem, 1rem + 1.5vw, 2rem) 1rem; list-style: none;
  border-bottom: 1px solid var(--linie); counter-reset: none; }
.torte-fortschritt li { position: relative; display: grid; justify-items: center; }
.torte-fortschritt li + li::before { content: ""; position: absolute; top: 1.05rem; right: calc(50% + 1.3rem); left: calc(-50% + 1.3rem); height: 2px; background: var(--linie); }
.torte-fortschritt li[data-fertig] + li::before, .torte-fortschritt li[data-fertig] + li[aria-current]::before { background: var(--akzent); }
.fortschritt-knopf { display: grid; justify-items: center; gap: .35rem; min-width: 44px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--leise); font: inherit; cursor: default; }
li[data-fertig] .fortschritt-knopf { cursor: pointer; color: var(--text); }
.fortschritt-nr { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 2px solid var(--linie); background: var(--karte);
  font-weight: 600; font-size: .95rem; transition: background-color .25s, border-color .25s, color .25s, transform .25s; }
.fortschritt-name { font-size: .82rem; font-weight: 600; line-height: 1.2; text-align: center; }
li[aria-current] .fortschritt-nr { border-color: var(--text); background: var(--text); color: var(--grund); transform: scale(1.08); }
li[aria-current] .fortschritt-name { color: var(--text); }
li[data-fertig]:not([aria-current]) .fortschritt-nr { border-color: var(--akzent); background: var(--akzent); color: var(--akzent-text); }
li[data-fertig] .fortschritt-knopf:hover .fortschritt-nr { transform: scale(1.08); }
.fortschritt-knopf:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; border-radius: 8px; }
.torte-zaehler { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.torte-form.ist-assistent .torte-schritt { border-bottom: 0; }
.torte-form.ist-assistent .torte-schritt[hidden] { display: none; }
.torte-schritt h3:focus { outline: none; }
.torte-schritt h3:focus-visible { outline: 3px solid var(--akzent); outline-offset: 4px; border-radius: 4px; }
.torte-weiter { margin-top: .5rem; }
.torte-form.ist-assistent:not(.ist-letzter) > :is(.datenschutz-satz, .knoepfe) { display: none; }
.torte-form.ist-assistent > .datenschutz-satz { margin-top: 0; }
.torte-form.ist-gesendet .torte-fortschritt { display: none; }
@media (max-width: 560px) {
  .torte-fortschritt { padding-inline: .75rem; }
  .fortschritt-name { display: none; }
  li[aria-current] .fortschritt-name { display: block; position: absolute; top: 100%; white-space: nowrap; margin-top: .3rem; }
  .torte-fortschritt { padding-bottom: 2.1rem; }
  .torte-weiter .knopf { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: no-preference) {
  .torte-schritt.kommt-vor { animation: lb-schritt-vor .38s cubic-bezier(.2, .7, .2, 1) both; }
  .torte-schritt.kommt-zurueck { animation: lb-schritt-zurueck .38s cubic-bezier(.2, .7, .2, 1) both; }
  .torte-summe dd.frisch { animation: lb-frisch 1.1s ease both; }
}
@keyframes lb-schritt-vor { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes lb-schritt-zurueck { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes lb-frisch { 0% { color: var(--krume); transform: translateX(4px); } 30% { transform: none; } 100% { color: inherit; } }

/* ---------- Kleine Bewegung im Rest der Seite ----------
   Leise und einmal: Preisschild schwingt an den Bildrand, Backplan-Punkte setzen sich, Linien der Werte ziehen sich,
   Bilder der Saison und Sorten werden beim Darüberfahren minimal größer. Ohne Skript und bei reduzierter Bewegung steht alles. */
@media (prefers-reduced-motion: no-preference) {
  .js .preisschild-rahmen.einblenden { opacity: 0; transform: translateY(-1.5rem) rotate(-6deg); transform-origin: 50% 0;
    transition: opacity .5s ease .25s, transform 1.1s cubic-bezier(.3, 1.5, .45, 1) .25s; }
  .js .preisschild-rahmen.einblenden.sichtbar { opacity: 1; transform: rotate(2.5deg); }
  .js .spezial-fakten.einblenden li { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; }
  .js .spezial-fakten.einblenden { opacity: 1; transform: none; }
  .js .spezial-fakten.sichtbar li { opacity: 1; transform: none; }
  .js .spezial-fakten.sichtbar li:nth-child(2) { transition-delay: .12s; } .js .spezial-fakten.sichtbar li:nth-child(3) { transition-delay: .24s; }
  .js .backplan-rahmen .punkt { transform: scale(0); transition: transform .45s cubic-bezier(.3, 1.6, .5, 1); }
  .js .backplan-rahmen.sichtbar .punkt { transform: none; }
  .js .backplan-rahmen.sichtbar tr:nth-child(2) .punkt { transition-delay: .08s; } .js .backplan-rahmen.sichtbar tr:nth-child(3) .punkt { transition-delay: .16s; }
  .js .backplan-rahmen.sichtbar tr:nth-child(4) .punkt { transition-delay: .24s; } .js .backplan-rahmen.sichtbar tr:nth-child(5) .punkt { transition-delay: .32s; }
  .js .backplan-rahmen.sichtbar tr:nth-child(n+6) .punkt { transition-delay: .4s; }
  .js .werte.einblenden { opacity: 1; transform: none; }
  .js .werte li { border-top-color: transparent; background: linear-gradient(var(--text), var(--text)) 0 0 / 0 2px no-repeat border-box; transition: background-size .9s cubic-bezier(.45, 0, .2, 1); }
  .js .werte.sichtbar li { background-size: 100% 2px; }
  .js .werte.sichtbar li:nth-child(2) { transition-delay: .15s; } .js .werte.sichtbar li:nth-child(3) { transition-delay: .3s; }
  .saison-gross .bild img, .sorte-karte .bild img, .haltung-bild .bild img { transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
  .saison-gross:hover .bild img, .sorte-karte:hover .bild img { transform: scale(1.035); }
  .sorte-karte:hover { transform: translateY(-2px); }
  .weg-symbol { transition: background-color .25s, transform .25s; }
  .weg:hover .weg-symbol { background: var(--karte); transform: rotate(-6deg); box-shadow: inset 0 0 0 1.5px var(--krume); }
}
@media (max-width: 860px) { .lb-buehne .stempel { bottom: -1.1rem; right: .5rem; } .heute-unten .zettel-rahmen { margin-top: 2.4rem; } }
.heute-status { max-width: 34rem; }


/* Farben des Betriebs */
:root {
  --grund: #FBF7F0;
  --flaeche: #F3EADB;
  --krume: #EAD8B5;
  --marke: #2B201A;
  --akzent: #B04E26;
  --akzent-dunkel: #8A3B1B;
}