@font-face { font-family: "Young Serif"; src: url(/assets/fonts/young-serif-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Work Sans"; src: url(/assets/fonts/work-sans.woff2) format("woff2"); font-weight: 400 600; font-display: swap; }

:root {
  --nacht: #141B2E; --daemmerung: #3D4560; --rosa: #E8D3C4; --creme: #F6EEDF; --bernstein: #EAD7B5;
  --grund: var(--creme); --flaeche: #FFF9EF; --gold: #D89A3D; --kruste: #A9592A;
  --text: #3A2A1C; --leise: #5C4936; --linie: #CDB89A; --zeit: #8E4A22;
  --akzent: var(--kruste); --akzent-text: #FFF9EF; --fehler: #9E2F1B; --fokus: var(--kruste);
  --feld: #FFFDF8;
  --schrift-titel: "Young Serif", Georgia, serif; --schrift-text: "Work Sans", "Helvetica Neue", Arial, sans-serif;
  --rundung: 4px; --rundung-fenster: 6px; --groesse: 17px; --rand: 48px;
  --oben: 48px;
}

/* Zwei Farbsätze: Nacht (helle Schrift) und Tag (dunkle Schrift). Die Schrift kippt hart, nie im Zwischenton. */
main#inhalt, .bk-zettel { color: var(--text); }
.bk-kopf-text, main:not(.bk-tag) .bk-st-dunkel, main.bk-tag.bk-dunkel {
  --text: #F6EEDF; --leise: #D3CABB; --linie: #4A5470; --zeit: #E7AE5C;
  color: var(--text);
}
.bk-zettel { --text: #3A2A1C; --leise: #5C4936; --linie: #CDB89A; }

/* Ohne Bewegung hat jede Etappe ihren festen Grund, mit Bewegung färbt funktion.js den ganzen Grund. */
main:not(.bk-tag) { background: var(--bernstein); }
main:not(.bk-tag) .bk-g-nacht { background: var(--nacht); --hier: var(--nacht); }
main:not(.bk-tag) .bk-g-daemmerung { background: var(--daemmerung); --hier: var(--daemmerung); }
main:not(.bk-tag) .bk-g-rosa { background: var(--rosa); --hier: var(--rosa); }
main:not(.bk-tag) .bk-g-creme { background: var(--creme); --hier: var(--creme); }
main:not(.bk-tag) .bk-g-bernstein { background: var(--bernstein); --hier: var(--bernstein); }
main.bk-tag { background: var(--tag, var(--nacht)); --hier: var(--tag); }

.bk-huelle { width: min(1080px, calc(100% - 2 * var(--rand))); margin-inline: auto; }
.logo-halm { fill: none; stroke: var(--kruste); stroke-width: 2.6; stroke-linecap: round; }
.logo-korn ellipse { fill: none; stroke: var(--gold); stroke-width: 2.2; }
.logo-wort { fill: #2A1C10; font: 34px var(--schrift-titel); }

/* Die Uhr ist die Navigation */
.bk-uhr-halter { position: sticky; top: calc(var(--oben) + 20px); z-index: 30; height: 0; }
.bk-uhr {
  position: absolute; top: 0; right: 24px; width: 132px;
  display: grid; padding: 12px 8px 8px; border-radius: 4px;
  background: var(--nacht); color: #F6EEDF; box-shadow: 0 14px 40px #0B0F1A40;
}
.bk-jetzt {
  padding: 0 8px 10px; margin-bottom: 6px; border-bottom: 1px solid #3A4560;
  font: 30px/1.2 var(--schrift-titel); font-variant-numeric: tabular-nums; color: var(--gold);
}
.bk-uhr a { display: grid; padding: 7px 8px; border-radius: 3px; text-decoration: none; }
.bk-uhr b { font: 400 21px/1.3 var(--schrift-titel); font-variant-numeric: tabular-nums; }
.bk-uhr span { font-size: 13px; line-height: 1.5; color: #D3CABB; }
.bk-uhr a:hover b { text-decoration: underline; text-underline-offset: 4px; }
.bk-uhr a[aria-current] { background: var(--gold); color: #24170B; }
.bk-uhr a[aria-current] span { color: #24170B; }

/* Kopf: Nacht vor dem Ofen */
.bk-kopf { position: relative; clip-path: inset(0); contain: paint; height: var(--kopf-h, calc(100svh - 82px)); min-height: 620px; }
.bk-kopf .bk-kopf-bild { position: absolute; inset: 0; }
.bk-kopf-bild img { object-position: 64% 50%; }
.bk-ofen { position: relative; }
.bk-ofen img { filter: sepia(.14) saturate(1.06); }
.bk-ofen::before, .bk-ofen::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.bk-ofen::before {
  z-index: 1; opacity: .05; mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23k)'/%3E%3C/svg%3E");
}
.bk-ofen::after { box-shadow: inset 0 0 140px 30px var(--vignette, var(--hier)); }
.bk-kopf-bild { --vignette: var(--nacht); }

.bk-schild { position: absolute; top: 28px; left: 0; z-index: 3; width: 250px; }
.bk-ausleger { display: block; width: 250px; height: 50px; overflow: visible; }
.bk-eisen { fill: none; stroke: #1B140E; stroke-width: 4; stroke-linecap: round; }
.bk-kette { fill: none; stroke: #1B140E; stroke-width: 2; stroke-dasharray: 4 3; }
.bk-brett {
  display: block; width: 176px; margin: -8px 0 0 44px; padding: 10px 14px 12px; line-height: 0;
  border: 3px solid #2A1C10; border-radius: 3px; background: var(--creme);
  box-shadow: 0 10px 24px #0B0F1A55; transform-origin: 50% -36px;
  animation: bk-schwingen 1.2s cubic-bezier(.3, .6, .4, 1) .2s both;
}
.bk-brett svg { width: 100%; height: auto; overflow: visible; }
@keyframes bk-schwingen {
  0% { transform: rotate(3deg); } 30% { transform: rotate(-2.2deg); } 55% { transform: rotate(1.2deg); }
  78% { transform: rotate(-.5deg); } 100% { transform: rotate(0); }
}

.bk-kopf-text {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  display: grid; gap: 22px; justify-items: start;
  --links: max(var(--rand), calc((100% - 1080px) / 2));
  width: min(100%, calc(var(--links) + 600px)); max-width: 100%; padding: 44px 56px 52px var(--links);
  background: var(--nacht);
}
/* Verlauf nur in der Ecke, in der der Text steht */
.bk-kopf-text::before {
  --weich: 200px;
  content: ""; position: absolute; left: 0; bottom: 0; z-index: -1; pointer-events: none;
  width: calc(100% + var(--weich)); height: calc(100% + var(--weich)); background: var(--nacht);
  -webkit-mask-image: linear-gradient(to top, #000 calc(100% - var(--weich)), transparent), linear-gradient(to right, #000 calc(100% - var(--weich)), transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to top, #000 calc(100% - var(--weich)), transparent), linear-gradient(to right, #000 calc(100% - var(--weich)), transparent);
  mask-composite: intersect;
}
.bk-kopf h1 { font-size: clamp(48px, 5.2vw, 78px); line-height: 1.02; text-wrap: nowrap; }
.bk-satz { max-width: 30ch; font-size: 19px; line-height: 1.5; color: var(--leise); }
.bk-brot {
  display: grid; gap: 2px; padding: 14px 20px 14px; min-width: 300px;
  border: 1px dashed var(--kruste); border-radius: 4px; background: var(--creme); color: #2A1C10;
}
.bk-etikett { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; line-height: 1.5; color: #8E4A22; }
.bk-brot strong { font: 400 28px/1.25 var(--schrift-titel); }
.bk-offen { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding-top: 8px; border-top: 1px dotted #CDB89A; font-size: 15px; font-weight: 600; line-height: 1.5; }
.bk-lampe { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #A8957C; }
[data-zustand="offen"] .bk-lampe { background: #3F8A3A; box-shadow: 0 0 0 4px #3F8A3A2E; }
.bk-kopf .knopf { border-color: var(--gold); }

/* Aufgehen: von unten, wie Teig */
[data-beim-sehen] { transform-origin: 50% 100%; transition: opacity .5s ease-out, transform .5s cubic-bezier(.2, .7, .3, 1); }
.sehen-bereit [data-beim-sehen]:not([data-gesehen]) { opacity: 0; transform: scale(.97); pointer-events: none; }

section h2 { font-size: clamp(36px, 4.2vw, 58px); line-height: 1.08; }
.bk-uhrzeile { font: 24px/1.5 var(--schrift-titel); font-variant-numeric: tabular-nums; letter-spacing: .04em; color: var(--zeit); }

.bk-backstube { position: relative; padding-block: 128px; }
.bk-backstube::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(36% 38% at 18% 62%, #C2702A2E, transparent);
}
.bk-backstube-text { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 64px; align-items: center; }
.bk-gross-uhr { font: clamp(96px, 13vw, 190px)/1 var(--schrift-titel); font-variant-numeric: tabular-nums; color: var(--zeit); }
.bk-backstube-text > div { display: grid; gap: 20px; }
.bk-backstube-text p:not(.bk-gross-uhr) { max-width: 38ch; font-size: 21px; color: var(--leise); }

.bk-sortiment { padding-block: 112px; }
.bk-sortiment-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.bk-theke { aspect-ratio: 3 / 4; }
.bk-theke img { object-position: 50% 60%; }
.bk-sortiment-text { display: grid; gap: 6px; }
.bk-regal { list-style: none; margin: 30px 0 0; padding: 0; }
.bk-regal li { display: grid; grid-template-columns: 9.5rem 1fr; gap: 16px; padding: 18px 0; border-top: 1px solid var(--linie); }
.bk-regal li:last-child { border-bottom: 1px solid var(--linie); }
.bk-regal h3 { font-size: 26px; line-height: 1.2; }
.bk-regal p { color: var(--leise); }

.bk-vorbestellen { padding-block: 112px; }
.bk-vorbestellen-raster { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: start; }
.bk-vorbestellen-kopf { display: grid; gap: 14px; position: sticky; top: calc(var(--oben) + 40px); }
.bk-vorbestellen-kopf p:last-child { font-size: 19px; color: var(--leise); max-width: 30ch; }
.bk-zettel {
  padding: 36px 36px 32px; background: #FFFDF8;
  border-block: 2px dashed var(--linie); box-shadow: 0 24px 60px #3A2A1C1F;
}
.bk-posten { display: grid; gap: 14px; }
.bk-posten-zeile { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: end; }
.bk-posten-zeile + .bk-posten-zeile .frage > label, .bk-posten-zeile + .bk-posten-zeile .feldname { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.bk-zaehler { display: flex; align-items: center; gap: 6px; min-height: 48px; }
.bk-zaehler button {
  position: relative; width: 44px; height: 44px; padding: 0; border: 1.5px solid #8E4A22; border-radius: 50%;
  background: var(--feld); color: #8E4A22; cursor: pointer;
}
.bk-zaehler button::before, .bk-plus::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; translate: -50% -50%; border-radius: 1px; background: currentColor;
}
.bk-plus::after { rotate: 90deg; }
.bk-zaehler button:hover { background: #8E4A22; color: #FFF9EF; }
.bk-zaehler output { min-width: 34px; text-align: center; font: 24px/1.5 var(--schrift-titel); font-variant-numeric: tabular-nums; }
.bk-textlink { justify-self: start; min-height: 32px; margin-top: -12px; padding: 0; border: 0; background: none; color: #8E4A22; font-weight: 600; line-height: 1.5; text-decoration: underline; text-underline-offset: 5px; }
.bk-kurz { max-width: 200px; }
.bk-abholtage { margin-top: 4px; }
.bk-abholtage .chip span { font-variant-numeric: tabular-nums; }
.bk-abholtage small { font-size: 13px; line-height: 1.5; }
.bk-abholtage .chip input:disabled + span { opacity: 1; border-style: dashed; background: none; color: var(--leise); text-decoration: none; }

/* Der Zettel: Felder als Zeilen zum Ausfüllen, Auswahl als kleine Preisschilder mit Loch */
.bk-zettel .frage legend, .bk-zettel .frage > label, .bk-zettel .feldname { font: 19px/1.5 var(--schrift-titel); }
.bk-zettel .auswahl, .bk-zettel .eingabe {
  border: 0; border-bottom: 1.5px dotted #8E4A22; border-radius: 0; background: transparent; padding-inline: 2px;
  font-size: 18px;
}
.bk-zettel .auswahl:focus, .bk-zettel .eingabe:focus { border-bottom-style: solid; }
.bk-zettel .auswahl[aria-invalid], .bk-zettel .eingabe[aria-invalid] { border-bottom-color: var(--fehler); }
.bk-zettel .chip span { gap: 8px; padding: 8px 14px 8px 10px; border: 1px solid #8E4A22; border-radius: 3px 12px 12px 3px; background: var(--feld); }
.bk-zettel .chip span::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; }
.bk-zettel .chip input:checked + span { background: var(--kruste); border-color: var(--kruste); color: #FFF9EF; }
.bk-zettel .formhinweis { padding-left: 14px; border-left: 2px solid var(--linie); }
.formhinweis:empty { display: none; }
.bk-zettel .knopf { justify-self: start; }

.bk-zeiten { padding-block: 112px 40px; }
.bk-zeiten-raster { display: grid; grid-template-columns: 1.1fr .9fr; gap: 72px; align-items: center; }
.bk-oeffnung { margin: 28px 0 0; }
.bk-oeffnung div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--linie); }
.bk-oeffnung dt { font-weight: 600; }
.bk-oeffnung dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.bk-zeiten-text { display: grid; gap: 10px; margin-top: 28px; max-width: 52ch; color: var(--leise); }
.beispielangaben { font-size: 13px; line-height: 1.5; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.bk-adresse { font: 22px/1.4 var(--schrift-titel); color: var(--text); }

/* Brotpapier-Etikett für morgen */
.bk-papier {
  position: relative; display: grid; gap: 6px; padding: 44px 44px 48px; rotate: -2deg;
  background: #FBF5E8; color: #2A1C10;
  outline: 1px solid #8E4A22; outline-offset: -12px;
  box-shadow: 0 2px 0 #D9C7A5, 0 26px 50px #5A3A1E33;
}
.bk-papier strong { font: 400 clamp(36px, 4vw, 56px)/1.1 var(--schrift-titel); }
.bk-papier-korn { position: absolute; right: 24px; bottom: 20px; width: 64px; height: 64px; opacity: .8; }

.bk-ende { width: 120px; height: 60px; }
.bk-mond { fill: var(--kruste); }
.bk-stern { fill: var(--gold); }
.beispiel-baeckerei .fuss { padding-top: 32px; }

/* Abholzettel im Stil eines Kassenbons */
.beispiel-baeckerei #modal { --rundung: 4px; --text: #3A2A1C; --leise: #5C4936; --linie: #CDB89A; }
.beispiel-baeckerei .anfrage-text { padding: 22px 20px; border: 0; border-block: 2px dashed var(--linie); background: #FFFDF8; font-size: 17px; }
.beispiel-baeckerei .anfrage-text p:first-child { font: 22px/1.3 var(--schrift-titel); }
.beispiel-baeckerei .anfrage-text p:nth-child(2) { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px dotted var(--linie); font-weight: 600; }
.beispiel-baeckerei .anfrage-hinweis { font-style: italic; }
.beispiel-baeckerei .anfrage-hinweis strong { font-style: normal; }

@media (min-width: 1100px) {
  .bk-huelle { width: min(1080px, calc(100% - 2 * 160px)); }
}

@media (max-width: 1099px) {
  .bk-uhr-halter { top: var(--oben); height: auto; }
  .bk-uhr {
    position: static; width: auto; display: flex; align-items: center; gap: 4px;
    padding: 6px max(16px, calc((100% - 1080px) / 2)); border-radius: 0; box-shadow: none;
  }
  .bk-jetzt { margin: 0 auto 0 0; padding: 0 12px 0 0; border: 0; font-size: 22px; }
  .bk-uhr a { padding: 4px 10px; }
  .bk-uhr b { font-size: 18px; }
  .bk-uhr-halter + .bk-kopf { min-height: 560px; }
  .bk-vorbestellen-raster, .bk-sortiment-raster, .bk-zeiten-raster { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .bk-vorbestellen-kopf { position: static; }
  .bk-theke { aspect-ratio: 4 / 3; }
}

@media (max-width: 759px) {
  :root { --rand: 16px; --oben: 0px; }
  .bk-uhr { justify-content: space-between; padding: 4px 8px; }
  .bk-jetzt, .bk-uhr span { display: none; }
  .bk-uhr a { flex: 1; min-height: 44px; place-items: center; padding: 4px; }
  .bk-uhr b { font-size: 18px; }
  .bk-kopf { min-height: 600px; }
  .bk-kopf .bk-kopf-bild { bottom: auto; height: 64%; }
  .bk-kopf-bild img { object-position: 84% 50%; }
  .bk-schild { top: 12px; width: 180px; }
  .bk-ausleger { width: 180px; height: 36px; }
  .bk-brett { width: 132px; margin: -6px 0 0 30px; padding: 7px 10px 9px; transform-origin: 50% -28px; }
  .bk-kopf-text { width: 100%; gap: 16px; padding: 12px 16px 28px; }
  .bk-kopf-text::before { --weich: 140px; width: 100%; -webkit-mask-image: linear-gradient(to top, #000 calc(100% - var(--weich)), transparent); mask-image: linear-gradient(to top, #000 calc(100% - var(--weich)), transparent); }
  .bk-kopf h1 { font-size: clamp(38px, 10.6vw, 46px); }
  .bk-satz { font-size: 17px; }
  .bk-brot { min-width: 0; width: 100%; padding: 12px 16px; }
  .bk-brot strong { font-size: 24px; }
  .bk-backstube { padding-block: 72px; }
  .bk-backstube-text { grid-template-columns: 1fr; gap: 20px; }
  .bk-gross-uhr { font-size: 88px; }
  .bk-backstube-text p:not(.bk-gross-uhr) { font-size: 19px; }
  .bk-sortiment, .bk-vorbestellen { padding-block: 64px; }
  .bk-theke { aspect-ratio: 4 / 5; }
  .bk-regal li { grid-template-columns: 1fr; gap: 4px; }
  .bk-zettel { padding: 24px 16px; }
  .bk-posten-zeile { grid-template-columns: 1fr; gap: 10px; }
  .bk-zaehler { justify-self: start; }
  .bk-zeiten { padding-block: 64px 24px; }
  .bk-papier { padding: 32px 28px 36px; rotate: -1deg; }
  .bk-adresse { font-size: 20px; }
}