/* Käserei Brunnholz. Seitenstil. Die Engine-Klassen (.sc-*, [data-sc-*]) bleiben
   unangetastet; hier stehen Marke, Kessel-Bühnen, Harfen-Navigation und Schluss. */
:root {
  --sc-canvas:     #F3EFE3;   /* Rahmweiß */
  --sc-surface:    #E9E3D2;
  --sc-ink:        #1C3527;   /* Alpgrün, dunkel */
  --sc-ink-soft:   #46594B;
  --sc-accent:     #2B44B0;   /* Enzianblau */
  --sc-accent-ink: #F6F3EA;
  --sc-font-display: "Rokkitt", system-ui, sans-serif;
  --sc-font-text:    "Mukta", system-ui, sans-serif;
  --sc-font-mono:    "Mukta", system-ui, sans-serif;
  --sc-shadow-color: 80 25% 20%;
  --gruen-tief: #16291D;
  --gruen-ink: #EEEADB;
  --gruen-soft: #BCC6B5;
  --molke: #D6D08C;
  --r: 10px;                  /* Fotos und Felder 10px, Knöpfe rund */
  color-scheme: light;
}
html { background: var(--sc-canvas); scrollbar-color: #B9B4A2 var(--sc-canvas); }
body { font-family: var(--sc-font-text); background: var(--sc-canvas); color: var(--sc-ink); }
input, select { caret-color: var(--sc-accent); }

.sc-display { font-weight: 700; letter-spacing: -0.022em; line-height: 1.0; }
.sc-display--xl { font-size: clamp(2.6rem, 1.3rem + 4.2vw, 5.4rem); font-weight: 800; }
.sc-display--lg { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.7rem); line-height: 1.04; }
.sc-body { font-size: var(--sc-t-base); line-height: 1.62; }
.sc-lede { font-size: var(--sc-t-lg); color: var(--sc-ink); }
.vorzeile {
  margin: 0; font: 700 var(--sc-t-xs)/1.2 var(--sc-font-text); letter-spacing: .1em; text-transform: uppercase;
  color: var(--sc-accent);
}
.klein { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); margin: .6rem 0 0; }
@media (max-width: 700px) {
  .sc-display--xl { font-size: clamp(2.05rem, 1.2rem + 4.6vw, 2.9rem); }
  .sc-display--lg { font-size: clamp(1.7rem, 1.1rem + 3.2vw, 2.3rem); }
}

/* ---------- Kopf: Harfenrahmen als Navigation ---------- */
.kopf {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  display: flex; align-items: flex-start; gap: 18px;
  padding: 18px var(--sc-gutter) 22px;
  pointer-events: none;
  background: linear-gradient(color-mix(in oklab, var(--sc-canvas) 97%, transparent) 68%, transparent);
  color: var(--sc-ink);
  transition: color 240ms var(--sc-ease-out);
}
.marke {
  font: 800 21px/1 var(--sc-font-display); letter-spacing: -.01em; text-decoration: none; color: inherit;
  padding-top: 4px;
}
.harfe ol {
  list-style: none; margin: 0; padding: 0 6px; display: flex; gap: 2px;
  border-top: 3px solid currentColor;
  position: relative;
}
.harfe ol::before, .harfe ol::after { /* die beiden Holme des Rahmens */
  content: ""; position: absolute; top: -3px; width: 3px; height: 34px; background: currentColor; border-radius: 0 0 2px 2px;
}
.harfe ol::before { left: -1px; }
.harfe ol::after { right: -1px; }
.harfe a {
  position: relative; display: block; width: 22px; height: 40px; color: inherit;
}
.harfe a i {
  position: absolute; left: 50%; top: 0; width: 1.5px; height: 30px; translate: -50% 0;
  background: currentColor; opacity: .55; transform-origin: 50% 0;
  transition: opacity 160ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out);
}
.harfe a.ist-hier i { opacity: 1; background: var(--sc-accent); width: 2px; animation: schwingen 1.6s var(--sc-ease-in-out) infinite; }
@keyframes schwingen {
  0%, 100% { transform: skewX(0deg); }
  20% { transform: skewX(4deg); }
  40% { transform: skewX(-3deg); }
  60% { transform: skewX(1.5deg); }
  80% { transform: skewX(-.6deg); }
}
.harfe a span {
  position: absolute; left: 50%; top: 42px; translate: -50% 0; white-space: nowrap;
  font: 700 var(--sc-t-xs)/1 var(--sc-font-text); padding: 6px 8px; border-radius: 6px;
  background: var(--sc-ink); color: var(--sc-canvas); opacity: 0; pointer-events: none;
  transition: opacity 140ms var(--sc-ease-out);
}
.harfe a:focus-visible span { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .harfe a:hover i { opacity: 1; }
  .harfe a:hover span { opacity: 1; }
}
.kopf__hier {
  margin: 0; padding-top: 6px; font: 700 var(--sc-t-sm)/1 var(--sc-font-text); letter-spacing: .01em;
  opacity: .9;
}
.kopf a { pointer-events: auto; }
.kopf--dunkel { color: var(--gruen-ink); background: linear-gradient(rgb(22 41 29 / .9) 55%, transparent); }
.kopf--dunkel .harfe a span { background: var(--gruen-ink); color: var(--gruen-tief); }
@media (max-width: 560px) {
  .kopf { gap: 12px; padding-top: 14px; }
  .marke { font-size: 18px; }
  .harfe a { width: 18px; height: 34px; }
  .harfe a i { height: 26px; }
  .harfe ol::before, .harfe ol::after { height: 30px; }
  .kopf__hier { display: none; }
}

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 28px; border-radius: 999px;
  font: 700 1rem/1 var(--sc-font-text); letter-spacing: .01em; text-decoration: none; white-space: nowrap;
  color: var(--sc-accent-ink); background: var(--sc-accent); border: 0; cursor: pointer;
  position: relative; overflow: hidden; isolation: isolate;
  box-shadow: var(--sc-e1);
  transition: transform 140ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out);
}
.knopf::before { /* feines Mosaik mit einem Lichtstreif */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(105deg, transparent 35%, rgb(255 255 255 / .26) 50%, transparent 65%) -200% 0 / 200% 100% no-repeat,
    repeating-linear-gradient(90deg, rgb(255 255 255 / .06) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(0deg, rgb(255 255 255 / .06) 0 1px, transparent 1px 6px);
  animation: streif 4.8s var(--sc-ease-in-out) infinite;
}
@keyframes streif { 0%, 55% { background-position: -200% 0, 0 0, 0 0; } 100% { background-position: 200% 0, 0 0, 0 0; } }
.knopf:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) { .knopf:hover { background: #2239A0; } }
.textknopf {
  background: none; border: 0; padding: 6px 0; cursor: pointer; color: var(--sc-accent);
  font: 700 var(--sc-t-sm)/1.2 var(--sc-font-text);
  text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px;
}
.textknopf:active { transform: translateY(1px); }

/* ---------- Bühnen ---------- */
.buehne { background: var(--sc-canvas); }
.kesselbox {
  position: absolute; z-index: 1;
  --d: min(86svh, 52vw);
  width: var(--d); height: var(--d);
  right: calc(var(--sc-gutter) * .6); top: 50%; translate: 0 -46%;
}
.kesselbox canvas { width: 100%; height: 100%; }

/* Hero und Tafel teilen sich die linke untere Ecke und lösen sich ab. */
.held, .tafel {
  position: absolute; z-index: var(--sc-z-copy);
  left: var(--sc-gutter); bottom: clamp(3rem, 12svh, 8rem);
  width: min(38rem, calc(100vw - var(--d, 52vw) - var(--sc-gutter) * 2.2));
}
.held h1 { max-width: 13ch; }
.held__sub { margin-top: var(--sc-5); max-width: 38ch; }
.held .knopf { margin-top: var(--sc-6); }
.buehne--kessel { --d: min(86svh, 52vw); }

.tafel p { margin: 0; }
.tafel__zeile { font: 700 var(--sc-t-xs)/1 var(--sc-font-text); letter-spacing: .1em; text-transform: uppercase; color: var(--sc-ink-soft); }
.tafel__korn {
  font: 800 clamp(2.4rem, 1.4rem + 3vw, 4.4rem)/1 var(--sc-font-display); letter-spacing: -.025em;
  margin-top: .35rem !important;
}
.tafel__sorte { margin-top: .5rem !important; font-size: var(--sc-t-lg); }
.tafel__sorte b { color: var(--sc-accent); }
.skala {
  list-style: none; margin: var(--sc-6) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--sc-hairline-strong);
}
.skala button {
  width: 100%; background: none; border: 0; cursor: pointer; color: var(--sc-ink);
  display: grid; justify-items: start; gap: 4px; padding: 12px 6px 10px 0; text-align: left;
  position: relative;
}
.skala button::before { /* Markierung auf der Skala */
  content: ""; position: absolute; top: -1px; left: 0; right: 10px; height: 3px; background: transparent;
  transition: background-color 160ms var(--sc-ease-out);
}
.skala button.ist-an::before { background: var(--sc-accent); }
.skala button i { /* das Korn in seiner Größe, gezeichnet */
  width: var(--g); height: var(--g); border-radius: 30%; background: #FBF8EE;
  box-shadow: inset 0 0 0 1px rgb(28 53 39 / .35), 1px 1.5px 0 rgb(150 140 80 / .45);
  margin: 4px 0 6px;
}
.skala span { font: 700 var(--sc-t-sm)/1.1 var(--sc-font-text); }
.skala small { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
@media (hover: hover) and (pointer: fine) { .skala button:hover span { color: var(--sc-accent); } }
.tafel__status { margin-top: var(--sc-4) !important; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); min-height: 2.6em; }
.tafel .textknopf { margin-top: 2px; }

/* ---------- Warum ---------- */
.warum { padding-top: clamp(3rem, 6vw, 6rem); }
.warum__raster { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--sc-6); align-items: start; }
.warum__text { grid-column: 1 / span 6; }
.warum__text .sc-body { max-width: 56ch; }
.warum__rand { grid-column: 8 / span 5; display: grid; gap: var(--sc-7); }
.randkessel { display: grid; grid-template-columns: 9rem 1fr; gap: var(--sc-5); align-items: center; }
.randkessel canvas { width: 9rem; height: 9rem; }
.randkessel p { margin: 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.randkessel b { display: block; color: var(--sc-ink); font: 800 var(--sc-t-xl)/1.1 var(--sc-font-display); margin-top: 4px; }
.bruchprobe { margin: 0; width: min(100%, 26rem); justify-self: end; }
.bruchprobe img { width: 100%; height: auto; border-radius: var(--r); box-shadow: var(--sc-e2); }
.bruchprobe figcaption { margin-top: var(--sc-3); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); max-width: 40ch; }

/* ---------- Rühren ---------- */
.ruehren { padding-block: clamp(5rem, 11vw, 11rem); }
.ruehren__raster { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--sc-6); align-items: center; }
.ruehren__text { grid-column: 1 / span 7; }
.ruehren__text h2 { max-width: 14ch; }
.ruehren__text .sc-lede { margin-top: var(--sc-5); max-width: 40ch; color: var(--sc-ink-soft); }
.ruhekessel { grid-column: 9 / span 4; aspect-ratio: 1; }
.ruhekessel canvas { width: 100%; height: 100%; }

/* ---------- Höhepunkt: der Laib ---------- */
.buehne--laib { background: var(--gruen-tief); color: var(--gruen-ink); --d: min(86svh, 52vw); }
.buehne--laib .sc-body { color: var(--gruen-soft); letter-spacing: .008em; line-height: 1.66; }
.buehne--laib .sc-lede { color: var(--gruen-ink); }
.buehne--laib .sc-display { letter-spacing: -.016em; }
.laibfoto {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: var(--laib-d, 50%); height: auto; max-width: none;
  opacity: var(--laib-o, 0); pointer-events: none;
  filter: drop-shadow(0 18px 30px rgb(0 0 0 / .35));
}
.messer {
  position: absolute; left: 50%; top: 50%; width: calc(var(--laib-d, 50%) * 1.2); height: 3px;
  translate: -50% -50%; rotate: -14deg; box-shadow: 0 0 0 1px rgb(255 255 255 / .15);
  background: linear-gradient(90deg, transparent, #F4F1E6 12%, #F4F1E6 88%, transparent);
  transform: scaleX(var(--messer, 0)); transform-origin: 0 50%; opacity: var(--messer-o, 0);
  pointer-events: none;
}
.anschnitt {
  position: absolute; inset: 0; margin: 0; border-radius: var(--r); overflow: hidden;
  box-shadow: 0 24px 60px -20px rgb(0 0 0 / .55);
}
.anschnitt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.anschnitt img.ist-an { display: block; }
.laib__text {
  position: absolute; z-index: var(--sc-z-copy);
  left: var(--sc-gutter); bottom: clamp(3rem, 14svh, 9rem);
  width: min(34rem, calc(100vw - var(--d) - var(--sc-gutter) * 2.2));
  display: grid; align-items: end;
}
.laib__text > div { grid-area: 1 / 1; }
.laib__text .sc-body, .laib__text .sc-lede { margin-top: var(--sc-4); }
.laib__name { font-weight: 700; }

/* ---------- Drei Käse ---------- */
.buehne--sorten { display: flex; align-items: center; }
.leiste {
  align-items: center; gap: clamp(2rem, 4vw, 4.5rem);
  padding: 84px var(--sc-gutter) 24px; height: 100%;
}
.leiste > * { flex: 0 0 auto; }
.leiste__kopf { width: min(28rem, 78vw); }
.leiste__kopf .sc-body { margin-top: var(--sc-5); max-width: 32ch; }
.sorte { width: clamp(16rem, 24vw, 22rem); }
.sorte img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--r); box-shadow: var(--sc-e2); }
.sorte h3 { margin: var(--sc-4) 0 0; font: 800 var(--sc-t-xl)/1.05 var(--sc-font-display); letter-spacing: -.015em; }
.sorte__deins { margin: 4px 0 0; font: 700 var(--sc-t-xs)/1 var(--sc-font-text); letter-spacing: .1em; text-transform: uppercase; color: var(--sc-accent); visibility: hidden; }
.sorte.ist-deins .sorte__deins { visibility: visible; }
.sorte dl { margin: var(--sc-3) 0 0; display: grid; grid-template-columns: auto 1fr; column-gap: var(--sc-4); }
.sorte dl > div { display: contents; }
.sorte dt, .sorte dd { padding: 5px 0; border-top: 1px solid var(--sc-hairline); font-size: var(--sc-t-sm); }
.sorte dt { color: var(--sc-ink-soft); }
.sorte dd { margin: 0; font-variant-numeric: tabular-nums; }
.sorte .textknopf { margin-top: var(--sc-3); }
.sorte.ist-deins .textknopf { color: var(--sc-ink-soft); text-decoration: none; cursor: default; }
.leiste__notiz { width: min(22rem, 78vw); }
.leiste__notiz .sc-body { margin-top: var(--sc-3); font-size: var(--sc-t-sm); }
@media (prefers-reduced-motion: no-preference) {
  .leiste > * {
    opacity: clamp(.55, calc(var(--sc-p, 0) * 6 - var(--i, 0) + 1.4), 1);
    transform: translateY(clamp(0px, calc((var(--i, 0) - var(--sc-p, 0) * 6 - .4) * 18px), 18px));
    transition: opacity 120ms linear;
  }
}

/* ---------- Schluss: Kaseinmarke ---------- */
.buehne--marke { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--sc-7); padding: 80px var(--sc-gutter) 64px; }
.markenlaib { position: relative; width: min(66svh, 40vw); aspect-ratio: 1; justify-self: center; }
.markenlaib img { width: 100%; height: 100%; filter: drop-shadow(0 22px 26px rgb(60 50 20 / .28)); }
.kasein {
  position: absolute; left: 50%; top: 50%; width: 34%; translate: -50% -50%;
  transform: scale(calc(1.32 - var(--druck, 1) * .32)); opacity: var(--druck, 1);
  filter: drop-shadow(0 calc((1 - var(--druck, 1)) * 18px + 1px) calc((1 - var(--druck, 1)) * 16px + 1px) rgb(40 30 10 / .35));
}
.kasein__grund { fill: #F1EBD3; }
.kasein__linie { fill: none; stroke: var(--sc-accent); stroke-width: 3; }
.kasein__linie--fein { stroke-width: 1.4; }
.kasein__ring { font: 700 13.5px var(--sc-font-text); letter-spacing: .14em; fill: var(--sc-accent); }
.kasein__nr { font: 800 38px var(--sc-font-display); fill: var(--sc-accent); letter-spacing: .02em; }
.kasein__tag { font: 700 12px var(--sc-font-text); fill: var(--sc-accent); letter-spacing: .2em; }
.schluss { max-width: 34rem; }
.schluss > .sc-body { margin-top: var(--sc-4); }
.vormerkung { margin-top: var(--sc-6); display: grid; gap: var(--sc-5); }
.vormerkung fieldset { border: 0; margin: 0; padding: 0; }
.vormerkung legend { font: 700 var(--sc-t-sm)/1.2 var(--sc-font-text); margin-bottom: var(--sc-3); padding: 0; }
.weg {
  display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start;
  padding: 12px 0; border-top: 1px solid var(--sc-hairline-strong); cursor: pointer;
}
.weg:last-of-type { border-bottom: 1px solid var(--sc-hairline-strong); }
.weg input { width: 20px; height: 20px; margin: 2px 0 0; }
.weg span { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); line-height: 1.45; }
.weg b { display: block; color: var(--sc-ink); font-size: var(--sc-t-base); margin-bottom: 2px; }
.feld { display: grid; gap: 6px; }
.feld label { font: 700 var(--sc-t-sm)/1.2 var(--sc-font-text); }
.feld input {
  min-height: 48px; padding: 0 14px; border-radius: var(--r);
  border: 1.5px solid #8E9A88; background: #FBF9F2; color: var(--sc-ink);
  transition: border-color 160ms var(--sc-ease-out);
}
.feld input:focus { border-color: var(--sc-accent); outline: none; box-shadow: 0 0 0 3px rgb(43 68 176 / .22); }
.feld__fehler { color: #8E2A1E; font-size: var(--sc-t-sm); }
.vormerkung .knopf { justify-self: start; }
.vormerkung__hinweis { margin: 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.fuss {
  position: absolute; left: var(--sc-gutter); right: var(--sc-gutter); bottom: 16px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: var(--sc-t-xs); color: var(--sc-ink-soft);
}

/* ---------- Handy ---------- */
@media (max-width: 860px) {
  .kesselbox, .buehne--kessel, .buehne--laib { --d: min(88vw, 47svh); }
  .kesselbox { right: auto; left: 50%; top: 64px; translate: -50% 0; }
  .held, .tafel, .laib__text {
    left: var(--sc-gutter); right: var(--sc-gutter); width: auto;
    bottom: max(18px, 2.4svh);
  }
  .held h1 { max-width: 15ch; }
  .held__sub { margin-top: var(--sc-3); }
  .held .knopf { margin-top: var(--sc-4); }
  .tafel__korn { font-size: clamp(2rem, 1.3rem + 4vw, 2.6rem); }
  .tafel__sorte { font-size: var(--sc-t-base); }
  .skala { margin-top: var(--sc-4); }
  .skala button { padding: 8px 4px 6px 0; }
  .tafel__status { margin-top: var(--sc-3) !important; min-height: 0; }
  .warum__text, .warum__rand { grid-column: 1 / -1; }
  .bruchprobe { justify-self: start; }
  .ruehren__text { grid-column: 1 / -1; }
  .ruhekessel { grid-column: 1 / -1; width: min(70vw, 300px); justify-self: end; }
  .sorte { width: min(74vw, 19rem); }
  .buehne--marke { grid-template-columns: 1fr; align-content: start; gap: var(--sc-4); padding: 64px var(--sc-gutter) 40px; }
  .markenlaib { width: min(26vw, 13svh); justify-self: start; }
  .schluss h2 { font-size: clamp(1.6rem, 1rem + 3vw, 2.2rem); }
  .vormerkung { margin-top: var(--sc-4); gap: var(--sc-3); }
  .weg { padding: 8px 0; }
  .fuss { position: static; flex-direction: column; gap: 2px; }
}
@media (max-width: 860px) and (max-height: 700px) {
  .held__sub { font-size: .95rem; line-height: 1.5; }
  .skala small { display: none; }
  .weg span { font-size: 0; }
  .weg b { font-size: var(--sc-t-sm); margin: 0; }
  .sorte img { aspect-ratio: 4 / 3; }
  .leiste { padding-top: 64px; }
  .schluss > .sc-body { font-size: .92rem; line-height: 1.5; }
}

@media (prefers-reduced-motion: reduce) {
  .harfe a.ist-hier i { animation: none; }
  .knopf::before { animation: none; }
  .kasein { transform: none; opacity: 1; }
}