/* ==========================================================
   PANELLO — Die knusprige Backwerkstatt
   Farbkonzept «Schiefer & Amber» (abgeleitet aus dem Logo:
   #434F55 Schiefer, #F9B000 Amber, dazu Creme/Mehl/Kruste)
   Struktur analog Kafi Zweisam.
   ========================================================== */

:root {
  --russ:        #14181A;
  --ofen:        #22292C;
  --schiefer:    #434F55;
  --schiefer2:   #4F5D64;
  --schiefer-h:  #A9B6BC;
  --creme:       #F7F2E9;
  --papier:      #FFFDF8;
  --mehl:        #EFE7D8;
  --tinte:       #2E383D;
  --grau:        #5C6670;
  --amber:       #F9B000;
  --amber-tief:  #D99700;
  --amber-hell:  #FCD98A;
  --kruste:      #B5763A;

  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-ui: "Karla", "Helvetica Neue", Arial, sans-serif;

  --max-w: 1100px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--creme);
  color: var(--tinte);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--amber); color: var(--russ); }

img, video, canvas { display: block; max-width: 100%; }
/* Fehlende Bilder brechen das Layout nicht auf */
img { background: var(--mehl); color: var(--grau); font-family: var(--font-ui); font-size: .8rem; }

a { color: inherit; }

/* ---------- Filmkorn über allem ---------- */
.grain {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 90;
  opacity: .05;
  mix-blend-mode: overlay;
}

/* ---------- Navigation ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 80;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.4rem 2rem;
  transition: background .4s ease, backdrop-filter .4s ease;
}
.nav.solid {
  background: rgba(67,79,85,.93);
  backdrop-filter: blur(10px);
}
.nav-wordmark {
  font-family: var(--font-ui);
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--creme);
}
.nav-wordmark em { font-style: normal; color: var(--amber); }

.nav-toggle {
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-ui);
  font-size: .72rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--creme);
  padding: .6rem 0;
}

.menu {
  position: fixed; inset: 0;
  z-index: 85;
  background: rgba(67,79,85,.97);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .4rem;
  opacity: 0; pointer-events: none;
  transition: opacity .45s ease;
}
.menu.open { opacity: 1; pointer-events: auto; }
.menu a {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 3.4rem);
  font-weight: 400;
  text-decoration: none;
  color: var(--creme);
  padding: .3rem 1rem;
  transition: color .3s ease, letter-spacing .3s ease;
}
.menu a:hover, .menu a.aktiv { color: var(--amber); letter-spacing: .03em; font-style: italic; }
.menu .menu-meta {
  margin-top: 2.5rem;
  font-family: var(--font-ui);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(247,242,233,.75);
  text-align: center;
  line-height: 2.1;
}
.menu-close {
  position: absolute; top: 1.4rem; right: 2rem;
  background: none; border: 0; cursor: pointer;
  color: var(--creme);
  font-family: var(--font-ui);
  font-size: .72rem; letter-spacing: .28em; text-transform: uppercase;
  padding: .6rem 0;
}

/* ---------- Statischer Hero (Unterseiten) ---------- */
.hero-still {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: flex; align-items: flex-end;
  background: var(--ofen);
}
.hero-still .hero-media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero-still::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(20,24,26,.22) 0%, rgba(20,24,26,.06) 30%, rgba(20,24,26,.55) 60%, rgba(20,24,26,.9) 100%);
}
.hero-inner {
  position: relative; z-index: 2;
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 2rem 14vh;
}
.hero-still.kenburns-raus .hero-media {
  animation: kenBurnsRaus 16s ease-out forwards;
}
@keyframes kenBurnsRaus {
  from { transform: scale(1.22) translateY(1%); }
  to   { transform: scale(1) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-still.kenburns-raus .hero-media { animation: none; }
}

/* ---------- Ankommen: Sticky-Hero mit Scroll-Ken-Burns ---------- */
.ankommen {
  position: relative;
  height: 140vh;
  background: var(--ofen);
}
.ankommen-sticky {
  position: sticky; top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
.ankommen-scrim {
  position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(20,24,26,.22) 0%, rgba(20,24,26,.06) 30%, rgba(20,24,26,.55) 60%, rgba(20,24,26,.9) 100%);
}
.ankommen-title {
  position: absolute; inset: 0;
  z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
  max-width: var(--max-w);
  width: 100%;
  margin: 0 auto;
  padding: 0 2rem 14vh;
  will-change: transform, opacity;
}
.uebergabe-titel { will-change: transform, opacity; }

.scrub-kenburns {
  --s: 1.35; --y: 0%;
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(var(--s)) translateY(var(--y));
  will-change: transform;
}
.scrub-fade {
  position: absolute; inset: 0;
  z-index: 4;
  opacity: 0;
  pointer-events: none;
}
.scrub-fade.nach-hell { background: var(--creme); }
.scrub-fade.unten-halb.nach-hell {
  background: linear-gradient(to bottom, rgba(247,242,233,0) 0%, rgba(247,242,233,0) 42%, var(--creme) 100%);
}

.scroll-hint {
  position: absolute; left: 50%; bottom: 2.2rem;
  transform: translateX(-50%);
  z-index: 3;
  font-family: var(--font-ui);
  font-size: .66rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(247,242,233,.85);
  display: flex; flex-direction: column; align-items: center; gap: .7rem;
}
.scroll-hint::after {
  content: "";
  width: 1px; height: 42px;
  background: linear-gradient(to bottom, rgba(247,242,233,.85), transparent);
  animation: hintlinie 2.4s ease-in-out infinite;
}
@keyframes hintlinie {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

.hero-eyebrow {
  font-family: var(--font-ui);
  font-size: .72rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 1rem;
  text-shadow: 0 1px 18px rgba(20,24,26,.85), 0 0 2px rgba(20,24,26,.6);
}
.hero-title {
  font-size: clamp(3rem, 9vw, 6.5rem);
  font-weight: 400;
  line-height: 1.02;
  color: var(--creme);
  text-shadow: 0 2px 32px rgba(20,24,26,.7);
}
.hero-title em { font-style: italic; color: var(--amber-hell); }
.hero-sub {
  margin-top: 1.2rem;
  max-width: 34ch;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  color: rgba(247,242,233,.9);
  text-shadow: 0 1px 16px rgba(20,24,26,.7);
}

@media (prefers-reduced-motion: reduce) {
  .ankommen { height: 100vh; }
  html { scroll-behavior: auto; }
}

/* ---------- Inhaltssektionen ---------- */
.abschnitt {
  position: relative;
  padding: 8rem 2rem;
}
.abschnitt.mehl { background: var(--mehl); }
.abschnitt.dunkel { background: var(--ofen); }
.abschnitt.dunkel h2 { color: var(--creme); }
.abschnitt.dunkel h2 em { color: var(--amber); }
.abschnitt.dunkel .eyebrow { color: var(--amber); }
.abschnitt.dunkel .fliesstext { color: rgba(247,242,233,.72); }
.abschnitt-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
.eyebrow {
  font-family: var(--font-ui);
  font-size: .72rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--amber-tief);
  margin-bottom: 1.1rem;
}
h2 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 400;
  line-height: 1.1;
  margin-bottom: 1.6rem;
  color: var(--tinte);
}
h2 em { font-style: italic; color: var(--kruste); }
.fliesstext { max-width: 58ch; color: var(--grau); }
.fliesstext + .fliesstext { margin-top: 1.2rem; }

/* ---------- Teaser-Kacheln (Startseite) ---------- */
.teaser-reihe {
  margin-top: 4.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.teaser {
  background: var(--schiefer);
  color: var(--creme);
  border-radius: 4px;
  padding: 2.4rem 2rem 2.7rem;
  text-decoration: none;
  transition: background .35s ease;
}
.teaser:hover { background: var(--schiefer2); }
.teaser .eyebrow { margin-bottom: .8rem; color: var(--amber); }
.teaser h3 {
  font-size: 1.9rem;
  font-weight: 400;
  margin-bottom: .6rem;
  color: var(--creme);
}
.teaser p { color: rgba(247,242,233,.78); font-size: 1.05rem; }
.teaser .weiter {
  display: inline-block;
  margin-top: 1.4rem;
  font-family: var(--font-ui);
  font-size: .7rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--amber-hell);
}

/* ---------- Werte-Liste («Darauf legen wir Wert») ---------- */
.werte {
  margin-top: 3.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2.6rem 2.4rem;
}
.wert { border-top: 2px solid var(--amber); padding-top: 1.2rem; }
.wert h3 { font-size: 1.5rem; font-weight: 400; margin-bottom: .5rem; }
.wert p { color: var(--grau); font-size: 1.02rem; }
.abschnitt.dunkel .wert p { color: rgba(247,242,233,.7); }
.abschnitt.dunkel .wert h3 { color: var(--creme); }

/* ---------- Freisteller-Raster (Angebot) ---------- */
.frei-raster {
  margin-top: 4rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 3rem 2rem;
}
.frei { text-align: center; text-decoration: none; }
.frei-bild {
  aspect-ratio: 1 / 1;
  width: 100%;
  object-fit: contain;
  background: transparent;
  transition: transform .45s cubic-bezier(.2,.7,.3,1);
}
.frei:hover .frei-bild { transform: translateY(-8px) scale(1.03); }
.frei h3 { font-size: 1.45rem; font-weight: 400; margin-top: .8rem; }
.frei .beschrieb {
  font-family: var(--font-ui);
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--amber-tief);
  margin-top: .3rem;
}

/* ---------- Bildband s/w (Handwerk) ---------- */
.band {
  margin-top: 4rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}
.band img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
}
.band.quer img { aspect-ratio: 4 / 3; }

/* ---------- Weg-Strecke (UrDinkel, nummerierte Schritte) ---------- */
.strecke { margin-top: 4.5rem; }
.schritt {
  display: grid;
  grid-template-columns: 90px 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
  padding: 3rem 0;
  border-top: 1px solid rgba(46,56,61,.16);
}
.abschnitt.dunkel .schritt { border-top-color: rgba(247,242,233,.16); }
.schritt-nr {
  font-family: var(--font-ui);
  font-size: .8rem;
  letter-spacing: .24em;
  color: var(--amber);
}
.schritt h3 { font-size: 1.8rem; font-weight: 400; margin-bottom: .6rem; }
.schritt p { color: var(--grau); font-size: 1.05rem; }
.abschnitt.dunkel .schritt h3 { color: var(--creme); }
.abschnitt.dunkel .schritt p { color: rgba(247,242,233,.7); }
.schritt img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
}
@media (max-width: 860px) {
  .schritt { grid-template-columns: 1fr; gap: 1.4rem; }
  .schritt img { aspect-ratio: 16 / 10; max-width: 460px; }
}

/* ---------- Zwei-Spalten-Bild/Text ---------- */
.duo {
  margin-top: 4rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.duo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.duo.quer img { aspect-ratio: 4 / 3; }
@media (max-width: 800px) { .duo { grid-template-columns: 1fr; gap: 2rem; } }

/* ---------- Galerie ---------- */
.galerie {
  margin-top: 4rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.galerie img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* ---------- Sortiments-/Preisliste ---------- */
.karte-gruppe { margin-top: 4rem; }
.karte-gruppe h3 {
  font-size: 1.2rem;
  font-family: var(--font-ui);
  font-weight: 400;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--amber-tief);
  margin-bottom: 1.8rem;
}
.karte-zeile {
  display: flex; align-items: baseline; gap: 1rem;
  padding: .85rem 0;
  border-bottom: 1px solid rgba(46,56,61,.14);
}
.karte-zeile .name { font-size: 1.35rem; }
.karte-zeile .beschrieb { color: var(--grau); font-size: 1rem; font-style: italic; }
.karte-zeile .punkte { flex: 1; border-bottom: 1px dotted rgba(46,56,61,.3); transform: translateY(-6px); }
.karte-zeile .preis { font-family: var(--font-ui); font-size: .95rem; color: var(--tinte); white-space: nowrap; }

/* ---------- Team-Karussell ---------- */
.team-carousel { position: relative; margin-top: 4rem; }
.team-track {
  display: flex;
  gap: 1.8rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: .5rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.team-track::-webkit-scrollbar { display: none; }
.team-card { flex: 0 0 auto; width: 260px; scroll-snap-align: start; }
.team-foto {
  aspect-ratio: 4 / 5;
  background: var(--mehl);
  border: 1px solid rgba(46,56,61,.15);
  display: flex; align-items: center; justify-content: center;
  color: var(--grau);
  font-style: italic;
  font-size: .95rem;
  text-align: center;
  padding: 1rem;
  width: 100%;
  object-fit: cover;
}
.team-name { margin-top: 1.1rem; font-size: 1.5rem; font-weight: 400; }
.team-rolle {
  font-family: var(--font-ui);
  font-size: .68rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--amber-tief);
  margin-top: .3rem;
}
.team-bio { margin-top: .7rem; color: var(--grau); font-size: 1.05rem; }
.team-nav { display: flex; gap: .8rem; margin-top: 1.8rem; }
.team-nav button {
  background: none;
  border: 1px solid rgba(46,56,61,.3);
  color: var(--tinte);
  width: 44px; height: 44px;
  font-family: var(--font-ui);
  font-size: 1rem;
  cursor: pointer;
  transition: border-color .3s ease, color .3s ease;
}
.team-nav button:hover { border-color: var(--amber-tief); color: var(--amber-tief); }
@media (max-width: 640px) { .team-card { width: 76vw; } }

/* ---------- Kontakt / Formular ---------- */
.kontakt-grid {
  margin-top: 3.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
}
@media (max-width: 800px) { .kontakt-grid { grid-template-columns: 1fr; } }

.form-feld { margin-bottom: 1.6rem; }
.form-feld label {
  display: block;
  font-family: var(--font-ui);
  font-size: .68rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--grau);
  margin-bottom: .5rem;
}
.form-feld input,
.form-feld textarea,
.form-feld select {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(46,56,61,.35);
  color: var(--tinte);
  font-family: var(--font-display);
  font-size: 1.2rem;
  padding: .5rem 0;
  transition: border-color .3s ease;
}
.form-feld input:focus,
.form-feld textarea:focus,
.form-feld select:focus { outline: none; border-bottom-color: var(--amber-tief); }
.hp { position: absolute; left: -9999px; }

.btn {
  display: inline-block;
  background: none;
  border: 1px solid var(--amber-tief);
  color: var(--amber-tief);
  font-family: var(--font-ui);
  font-size: .72rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  padding: 1rem 2.4rem;
  cursor: pointer;
  text-decoration: none;
  transition: background .3s ease, color .3s ease;
}
.btn:hover { background: var(--amber); border-color: var(--amber); color: var(--russ); }

.info-block { font-size: 1.15rem; color: var(--grau); }
.info-block strong {
  display: block;
  font-weight: 400;
  color: var(--tinte);
  font-size: 1.35rem;
  margin-bottom: .4rem;
}
.info-block + .info-block { margin-top: 2.2rem; }

/* Bestell-Banner */
.bestellen {
  margin-top: 3rem;
  border-left: 3px solid var(--amber);
  background: var(--papier);
  padding: 1.8rem 2rem;
}
.bestellen strong { display: block; font-weight: 400; font-size: 1.5rem; margin-bottom: .4rem; }
.bestellen a { color: var(--kruste); }

/* Auszeichnungen / Logos */
.siegel-reihe {
  margin-top: 3rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 2.5rem;
}
.siegel-reihe img { height: 62px; width: auto; background: transparent; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--amber-tief);
  outline-offset: 3px;
}

/* ---------- Footer ---------- */
footer { background: var(--ofen); padding: 4.5rem 2rem 3rem; }
.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex; flex-wrap: wrap;
  justify-content: space-between;
  gap: 2.5rem;
  font-family: var(--font-ui);
  font-size: .82rem;
  letter-spacing: .08em;
  color: #A9B4BE;
  line-height: 2;
}
.footer-inner a { color: #A9B4BE; }
.icon-link { display: inline-flex; align-items: center; gap: .5rem; }
.icon-instagram, .icon-pin, .icon-tel { width: 1.15em; height: 1.15em; flex: 0 0 auto; }
.footer-wordmark {
  font-family: var(--font-ui);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--creme);
}
.footer-wordmark em { font-style: normal; color: var(--amber); }
.footer-fein {
  max-width: var(--max-w);
  margin: 3rem auto 0;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(247,242,233,.12);
  font-family: var(--font-ui);
  font-size: .72rem;
  letter-spacing: .1em;
  color: #7C8892;
}

@media (max-width: 640px) {
  .abschnitt { padding: 5.5rem 1.4rem; }
  .hero-inner, .ankommen-title { padding: 0 1.4rem 16vh; }
  .nav { padding: 1.1rem 1.4rem; }
  .ankommen { height: 130vh; }
}
/* ==========================================================
   TEASER-STRUKTUR — Doodle-Muster als Alpha-Maske
   Ans Ende von assets/style.css anhaengen.
   WebP nach bilder/ (Projektwurzel, neben den Freistellern).
   Kein Eingriff in build.py noetig.
   ========================================================== */

.teaser {
  position: relative;
  overflow: hidden;               /* schneidet das Muster am border-radius ab */
  isolation: isolate;             /* eigener Stapelkontext: ::before bleibt hinter dem Text */
}

.teaser::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  /* hell auf dunkel — die Karte ist bereits var(--schiefer) */
  background-color: var(--creme);

  -webkit-mask-image: var(--muster);
          mask-image: var(--muster);
  -webkit-mask-size: cover;
          mask-size: cover;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;

  opacity: var(--muster-deckkraft, .07);
  transition: opacity .35s ease;
}

/* Hover und Tastaturfokus: Struktur tritt hervor.
   Gleicht zugleich den helleren --schiefer2 Hintergrund aus. */
.teaser:hover::before,
.teaser:focus-visible::before {
  --muster-deckkraft: .14;
}

@media (prefers-reduced-motion: reduce) {
  .teaser::before { transition: none; }
}

/* Muster pro Ziel-Seite — Pfade relativ zu assets/style.css */
.teaser[href="angebot.html"]  { --muster: url("../bilder/muster-angebot.webp"); }
.teaser[href="handwerk.html"] { --muster: url("../bilder/muster-handwerk.webp"); }
.teaser[href="kafi.html"]     { --muster: url("../bilder/muster-kafi.webp"); }
.teaser[href="team.html"]     { --muster: url("../bilder/muster-team.webp"); }


/* ----------------------------------------------------------
   OPTIONAL: Muster nach oben ausblenden, falls Eyebrow und
   Titel ruhiger stehen sollen. Ersetzt die mask-image/-size
   Zeilen oben in .teaser::before.
   ----------------------------------------------------------
.teaser::before {
  -webkit-mask-image: var(--muster), linear-gradient(to top, #000 45%, rgba(0,0,0,.15) 100%);
          mask-image: var(--muster), linear-gradient(to top, #000 45%, rgba(0,0,0,.15) 100%);
  -webkit-mask-size: cover, 100% 100%;
          mask-size: cover, 100% 100%;
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
   ---------------------------------------------------------- */


/* ==========================================================
   MENUELEISTE — dieselbe Struktur als schmaler Streifen
   Gespiegelte Kachel (2160 x 180), kachelt horizontal nahtlos.
   ========================================================== */

.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;                    /* ueber dem Leisten-Hintergrund, unter Wortmarke und Toggle */
  pointer-events: none;

  background-color: var(--creme);

  -webkit-mask-image: url("../bilder/muster-leiste.webp");
          mask-image: url("../bilder/muster-leiste.webp");
  -webkit-mask-size: auto 200%;   /* Kachel doppelt so hoch wie die Leiste */
          mask-size: auto 200%;           /* -> Motive bleiben lesbar gross */
  -webkit-mask-repeat: repeat-x;
          mask-repeat: repeat-x;
  -webkit-mask-position: center;
          mask-position: center;

  opacity: 0;                     /* oben transparent: kein Muster ueber dem Hero */
  transition: opacity .4s ease;
}

/* Erscheint zusammen mit dem anthrazit Balken beim Scrollen */
.nav.solid::before { opacity: .09; }

@media (prefers-reduced-motion: reduce) {
  .nav::before { transition: none; }
}
/* ==========================================================
   PANELLO — Bestellliste auf kontakt.html
   ----------------------------------------------------------
   Drop-in-Block: ans Ende von assets/style.css anhängen.

   Die alten Regeln für .bestell-liste, .bestell-gruppe,
   .bestell-zeile und .auswahl-summe können danach ersatzlos
   gelöscht werden — das Markup benutzt sie nicht mehr.

   Alle var() haben einen Fallback, falls ein Token in deiner
   style.css anders heisst als in der README.
   ========================================================== */

/* ---------- Der Schalter ------------------------------------
   Hier liegt das ganze Gewicht dieses Bauteils. Alles darunter
   bleibt bewusst ruhig, damit die Liste den Rest des Formulars
   nicht erschlägt.
   ---------------------------------------------------------- */

.bestellung {
  margin: 3rem 0 0;
  border-top: 1px solid rgba(74, 87, 94, .16);
  border-bottom: 1px solid rgba(74, 87, 94, .16);
}

.bestellung-schalter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.4rem 0;
  cursor: pointer;
  list-style: none;
  transition: color .18s ease;
}

/* Das native Dreieck weg — wir zeichnen selbst. */
.bestellung-schalter::-webkit-details-marker { display: none; }
.bestellung-schalter::marker { content: ""; }

.bestellung-schalter-titel {
  display: block;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.7rem;
  line-height: 1.15;
  color: var(--schiefer, #4A575E);
}

.bestellung-schalter-zusatz {
  display: block;
  margin-top: .3rem;
  font-size: .82rem;
  letter-spacing: .01em;
  color: rgba(74, 87, 94, .68);
}

/* Sobald etwas gewählt ist, trägt der Schalter den Stand —
   auch dann, wenn die Liste wieder zugeklappt ist. */
.bestellung.hat-auswahl .bestellung-schalter-zusatz {
  color: var(--amber-tief, #D99700);
  font-weight: 500;
}

.bestellung-schalter-aktion {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  flex-shrink: 0;
  font-size: .84rem;
  color: var(--amber-tief, #D99700);
}

/* Beschriftung wechselt mit dem Zustand. */
.bestellung-schalter-aktion .wenn-auf { display: none; }
.bestellung[open] .bestellung-schalter-aktion .wenn-zu { display: none; }
.bestellung[open] .bestellung-schalter-aktion .wenn-auf { display: inline; }

/* Winkel, dreht sich beim Aufklappen. */
.bestellung-schalter-aktion::after {
  content: "";
  width: .5rem;
  height: .5rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .22s ease;
}

.bestellung[open] .bestellung-schalter-aktion::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.bestellung-schalter:hover .bestellung-schalter-titel,
.bestellung-schalter:focus-visible .bestellung-schalter-titel {
  color: var(--kruste, #B5763A);
}

.bestellung-schalter:focus-visible {
  outline: 2px solid var(--amber, #F9B000);
  outline-offset: 3px;
}

/* ---------- Das Raster -------------------------------------- */

.bestellung-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.6rem 3rem;
  padding: .5rem 0 2rem;
}

.bestellung-gruppe h3 {
  margin: 0 0 .5rem;
  padding-bottom: .45rem;
  border-bottom: 1px solid rgba(74, 87, 94, .18);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--schiefer, #4A575E);
}

.bestellung-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.2rem;
  padding: .42rem 0;
  border-bottom: 1px solid rgba(74, 87, 94, .09);
}

.bestellung-zeile:last-child { border-bottom: 0; }

.bestellung-zeile label {
  flex: 1;
  min-width: 0;
  font-size: .93rem;
  line-height: 1.3;
  color: var(--schiefer, #4A575E);
  cursor: pointer;
}

.bestellung-zeile label .zusatz {
  display: block;
  margin-top: .1rem;
  font-size: .76rem;
  line-height: 1.25;
  color: rgba(74, 87, 94, .6);
}

/* Gewählte Zeile: ein leiser Amber-Anker, kein Farbfeuerwerk. */
.bestellung-zeile.gewaehlt label { font-weight: 500; }

.bestellung-zeile.gewaehlt .mengen-stepper {
  border-color: var(--amber-tief, #D99700);
  background: rgba(249, 176, 0, .09);
}

/* ---------- Mengenknöpfe ------------------------------------
   site.js baut den Stepper nachträglich um das Zahlenfeld.
   Ohne JavaScript steht hier ein blankes number-Feld — deshalb
   ist auch das eigenständig gestylt.
   ---------------------------------------------------------- */

.mengen-stepper {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  border: 1px solid rgba(74, 87, 94, .28);
  border-radius: 2px;
  background: var(--creme, #F7F2E9);
  transition: border-color .18s ease, background-color .18s ease;
}

.mengen-knopf {
  width: 2.3rem;
  height: 2.3rem;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--schiefer, #4A575E);
  transition: color .15s ease, background-color .15s ease;
}

.mengen-knopf:hover {
  background: rgba(249, 176, 0, .16);
  color: var(--amber-tief, #D99700);
}

.mengen-knopf:focus-visible {
  outline: 2px solid var(--amber, #F9B000);
  outline-offset: -2px;
}

.bestellung-zeile input[type="number"] {
  width: 2.6rem;
  padding: .35rem 0;
  border: 0;
  background: none;
  text-align: center;
  font: inherit;
  font-size: .95rem;
  color: var(--schiefer, #4A575E);
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Native Spinner weg — der Stepper übernimmt das. */
.bestellung-zeile input[type="number"]::-webkit-outer-spin-button,
.bestellung-zeile input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.bestellung-zeile input[type="number"]:focus-visible {
  outline: 2px solid var(--amber, #F9B000);
  outline-offset: -1px;
}

/* Ohne JS steht das Feld allein da und braucht einen Rahmen. */
.bestellung-zeile > input[type="number"] {
  width: 4rem;
  border: 1px solid rgba(74, 87, 94, .28);
  border-radius: 2px;
  background: var(--creme, #F7F2E9);
}

/* ---------- Zusammenfassung ---------------------------------
   Steht bewusst ausserhalb des <details>: wer die Liste wieder
   zuklappt, soll trotzdem sehen, was drinsteht.
   ---------------------------------------------------------- */

.bestellung-summe {
  margin: 0 0 1.5rem;
  padding: 1.1rem 1.3rem;
  border-left: 3px solid var(--amber, #F9B000);
  background: rgba(249, 176, 0, .1);
}

.bestellung-summe[hidden] { display: none; }

.bestellung-summe .titel {
  margin: 0 0 .35rem;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(74, 87, 94, .72);
}

.bestellung-summe .inhalt {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--schiefer, #4A575E);
}

.bestellung-reset {
  margin-top: .7rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: .82rem;
  color: var(--amber-tief, #D99700);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.bestellung-reset:hover { color: var(--kruste, #B5763A); }

.bestellung-reset:focus-visible {
  outline: 2px solid var(--amber, #F9B000);
  outline-offset: 2px;
}

/* ---------- Absenden ---------------------------------------- */

.bestellung-absenden { margin-top: 2rem; }

/* ---------- Bewegung ----------------------------------------
   Eine einzige Bewegung, und sie beantwortet eine Handlung:
   das Aufklappen. Sonst nichts.
   ---------------------------------------------------------- */

@keyframes bestellung-auf {
  from { opacity: 0; transform: translateY(-.4rem); }
  to   { opacity: 1; transform: none; }
}

.bestellung[open] .bestellung-raster {
  animation: bestellung-auf .26s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .bestellung[open] .bestellung-raster { animation: none; }
  .bestellung-schalter-aktion::after { transition: none; }
}

/* ---------- Schmale Schirme ---------------------------------- */

@media (max-width: 40rem) {
  .bestellung-schalter { gap: 1rem; }
  .bestellung-schalter-titel { font-size: 1.45rem; }
  .bestellung-raster { gap: 1.4rem 0; }

  /* Grössere Trefferflächen für den Daumen. */
  .mengen-knopf { width: 2.7rem; height: 2.7rem; }
  .bestellung-zeile { padding: .55rem 0; }
}