/* ==========================================================================
   Pâtisserie Pauline Donath
   Werte aus dem Entwurf uebernommen (Artboards 5a Startseite, 6a-6d Unterseiten).
   Der Entwurf ist auf 820px Kartenbreite gezeichnet, Inhaltsbreite 752px.
   Alle Groessen sind mit Faktor 1.28 auf 960px Inhaltsbreite skaliert,
   damit die Proportionen des Entwurfs erhalten bleiben.
   ========================================================================== */

:root{
  /* Farben, exakt aus dem Entwurf */
  --creme:        #faf5ec;   /* Grundflaeche, Navigation */
  --creme-hell:   #fdfaf4;   /* Karten */
  --sand:         #f2e8d7;   /* Hero, Wechselflaechen */
  --sand-tief:    #ead9c0;
  /* Vorher #f3e8d7, also bis auf einen Rotwert dasselbe wie --sand. Der
     "tiefe" Ton war gar nicht tiefer, deshalb wirkten Ablauf und
     Herkunftsband auf /torten wie ein Streifen. Jetzt messbar dunkler
     (Leuchtdichte 0,71 gegen 0,82). Schrift darauf: braun-mittel 4,87:1,
     braun 9,4:1. Die gedeckten Toene (muted, akzent) fallen darauf unter
     4,5, deshalb bekommt .ablauf unten eigene Textfarben. */   /* Ablaufband Unterseite Torten */
  --salbei:       #819981;   /* exakt die Hintergrundfarbe des Logos */
  /* Dasselbe Gruen, aber tief genug fuer helle Schrift darauf. Kontrast:
     Creme auf #819981 ergibt 2,84:1, WCAG AA verlangt 4,5:1. Auf #5c7059
     sind es 4,94:1. Das Logo-Gruen bleibt unangetastet, es traegt keinen Text,
     jede Flaeche MIT Text nutzt ab hier die tiefe Variante. */
  --salbei-tief:  #5c7059;
  --salbei-deko:  #dfe6d8;   /* Dekokreis im Hero */
  --safran:       #e3a83c;   /* yellow of the pressed flowers on the cake, notice strip; braun on it 6.15:1 */
  --salbei-icon:  #6d8064;   /* Icons */
  --braun:        #3a2f26;   /* Ueberschriften */
  --braun-mittel: #6b5a46;   /* Flitztext */
  --braun-logo:   #5b4d40;   /* Logo-Braun, Fliesstext dunkel */
  --braun-akzent: #786042;   /* war #8a6f4e, auf Sand nur 3,87:1 */   /* Eyebrow, Kursiv-Akzent */
  --muted:        #746551;   /* war #8a7a64, auf Sand nur 3,43:1 */
  --muted-hell:   #756751;   /* war #9a8a72, auf Sand nur 2,77:1 */
  --auf-salbei:   #faf5ec;   /* Text auf Salbei */
  --auf-salbei-2: #e8eee6;
  --linie:        rgba(58,47,38,.14);

  /* Schattenleiter. Vorher standen sieben verschiedene Werte im Blatt,
     dadurch lagen Elemente optisch auf unterschiedlichen Ebenen ohne Grund.
     Zwei Schichten je Stufe: eine enge fuer die Kante, eine weite fuer die Tiefe. */
  --schatten-s:  0 1px 2px rgba(58,47,38,.05), 0 4px 10px rgba(58,47,38,.07);
  --schatten-m:  0 2px 4px rgba(58,47,38,.05), 0 12px 26px rgba(58,47,38,.10);
  --schatten-l:  0 4px 8px rgba(58,47,38,.06), 0 24px 52px rgba(58,47,38,.15);
  --schatten-xl: 0 6px 12px rgba(58,47,38,.07), 0 36px 72px rgba(58,47,38,.18);

  /* Typo, fluid. Maximalwert = Entwurfswert x 1.28 */
  --t-hero:   clamp(2.4rem, 1.5rem + 3.4vw, 4.0rem);   /* 62px, auf 2 Zeilen wie im Entwurf */
  --t-h1:     clamp(1.7rem, 1.1rem + 2.8vw, 3.5rem);    /* 44px  -> 56px */
  --t-h2:     clamp(1.7rem, 1.25rem + 2vw, 2.75rem);   /* 34px  -> 44px */
  --t-h2s:    clamp(1.52rem, 1.2rem + 1.6vw, 2.55rem); /* 32px  -> 41px */
  --t-h3:     clamp(1.35rem, 1.2rem + .7vw, 1.75rem);  /* 22px  -> 28px */
  --t-h4:     clamp(1.2rem, 1.1rem + .5vw, 1.5rem);    /* 19px  -> 24px */
  --t-h5:     clamp(1.15rem, 1.05rem + .4vw, 1.38rem); /* 17px  -> 22px */
  --t-lead:   clamp(1.1rem, 1rem + .45vw, 1.38rem);    /* 17px  -> 22px */
  --t-body:   clamp(1.02rem, .96rem + .3vw, 1.28rem);  /* 16px  -> 20.5px */
  --t-body-s: clamp(.98rem, .94rem + .25vw, 1.19rem);  /* 15px  -> 19px */
  --t-small:  clamp(.94rem, .9rem + .22vw, 1.13rem);   /* 14px  -> 18px */
  --t-mono:   clamp(.8rem, .76rem + .15vw, .85rem);    /* 12.8px -> 13.6px, Mindestmass am Handy */
  --t-mono-s: clamp(.75rem, .72rem + .12vw, .78rem);   /* 12px  -> 12.5px, nie kleiner */
  --t-mono-l: clamp(.82rem, .78rem + .15vw, .9rem);    /* 13px  -> 14.4px */
  --t-btn:    clamp(.85rem, .8rem + .2vw, .9rem);      /* 13.6px -> 14.4px, Knoepfe */

  /* Abstaende, Maximalwert = Entwurfswert x 1.28 */
  --s-sec:    clamp(3.25rem, 2.2rem + 4vw, 4.5rem);    /* 56px  -> 72px */
  --s-sec-l:  clamp(3.75rem, 2.4rem + 4.8vw, 5.15rem); /* 64px  -> 82px */
  --s-block:  clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem); /* 34px  -> 44px */
  --s-gap:    clamp(1.25rem, .9rem + 1.4vw, 1.95rem);  /* 24px  -> 31px */
  --s-gap-l:  clamp(1.5rem, 1rem + 2.2vw, 2.85rem);    /* 34px  -> 44px */

  --wrap: min(100% - 2.5rem, 960px);
  --mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Courier New", monospace;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--creme);
  color:var(--braun-mittel);
  font-family:var(--serif);
  font-weight:400;
  font-size:var(--t-body);
  line-height:1.6;
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
}
/* Papierkoernung ueber der ganzen Seite.
   Gibt den grossen Creme- und Sandflaechen Tiefe, ohne dass man die Struktur
   bewusst wahrnimmt. Liegt als Overlay ueber allem, nimmt keine Klicks an und
   ist auf 3 Prozent gesetzt, darueber wirkt es schmutzig statt gedruckt. */
body::before{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22140%22%20height%3D%22140%22%3E%3Cfilter%20id%3D%22k%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.85%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22140%22%20height%3D%22140%22%20filter%3D%22url%28%23k%29%22%20opacity%3D%220.5%22%2F%3E%3C%2Fsvg%3E");
  background-size:140px 140px;
  opacity:.035;mix-blend-mode:multiply
}
@media print{ body::before{display:none} }

/* Eigene Symbole: uebernehmen die Textfarbe, skalieren mit der Schrift */
.sym{width:1em;height:1em;display:inline-block;vertical-align:middle;flex:0 0 auto}

h1,h2,h3,h4{font-family:var(--serif);font-weight:400;color:var(--braun);margin:0;line-height:1.15;
  text-wrap:balance}
/* balance verteilt die Zeilen gleichmaessig, dadurch bleibt am Ende kein
   kurzer Rest von ein bis zwei Woertern stehen. Fuer lange Fliesstexte
   waere das unruhig, dort genuegt pretty gegen einzelne Schusterjungen. */
p{margin:0;text-wrap:balance}
li,figcaption,.footer-adresse,.kontaktzeile span,.footer-kontaktliste span{text-wrap:balance}

/* Bei den langen Rechtstexten liefert balance weniger einzelne
   Woerter am Absatzende als pretty. Deshalb bleibt es bei balance. */
.rechtstext p,.rechtstext li{text-wrap:balance}
.faq-eintrag p{text-wrap:balance}
.anlass-inhalt p{text-wrap:balance}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

.wrap{width:var(--wrap);margin-inline:auto}
/* Feinschliff, den man erst merkt, wenn er fehlt:
   Markierung in Markenfarbe statt Browserblau, lesbare Auswahllisten unter
   Windows, ruhige Scrollleiste und kein knallblaues Autofill in Chrome. */
::selection{background:var(--salbei-tief);color:var(--creme)}

/* Versteckt heisst versteckt. Ohne diese Zeile schlaegt jede display-Regel
   mit Klasse das Attribut, und im Mehrschritt-Formular blieben die Knoepfe
   "Zurueck" und "Absenden" auf Mobil sichtbar, obwohl sie hidden waren.
   Einer der wenigen berechtigten Faelle fuer !important. */
[hidden]{display:none !important}
select,option{background:var(--creme);color:var(--braun)}
html{scrollbar-color:var(--salbei) var(--creme)}
input:-webkit-autofill,textarea:-webkit-autofill{
  -webkit-text-fill-color:var(--braun);
  box-shadow:0 0 0 100px var(--creme) inset;
  caret-color:var(--braun)
}
input::placeholder,textarea::placeholder{color:var(--muted-hell);opacity:1}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Sprunglink: unsichtbar, bis jemand mit der Tastatur ankommt.
   Ohne diese Regel ist er da, aber niemand sieht ihn je. */
a.sr-only:focus{
  position:fixed;top:.75rem;left:.75rem;z-index:1000;
  width:auto;height:auto;margin:0;clip:auto;overflow:visible;
  padding:.7rem 1.2rem;background:var(--braun);color:var(--creme);
  border-radius:2rem;font-family:var(--mono);font-size:var(--t-mono-s);
  letter-spacing:.12em;text-transform:uppercase;text-decoration:none
}

/* Ein sichtbarer Fokus fuer alles, was per Tastatur erreichbar ist.
   Nur :focus-visible, damit ein Mausklick keinen Ring hinterlaesst. */
a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--braun-akzent);outline-offset:3px;border-radius:2px
}
.footer a:focus-visible,.footer button:focus-visible,
.footer input:focus-visible,.btn-salbei:focus-visible{outline-color:var(--creme)}

/* Monospace-Label, im Entwurf durchgehend fuer Navigation, Buttons, Eyebrows */
.mono{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.18em;text-transform:uppercase}
.eyebrow{font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:.2em;text-transform:uppercase;color:var(--braun-akzent)}
.eyebrow-hell{color:var(--muted-hell);letter-spacing:.18em;font-size:var(--t-mono)}
.eyebrow-line{display:flex;align-items:center;gap:.65rem}
.eyebrow-line::before{content:"";width:33px;height:1px;background:var(--braun-akzent);flex:0 0 auto}

/* --------------------------------------------------------------- Buttons */
.btn{
  display:inline-block;border-radius:99px;
  padding:.95rem 1.95rem;
  font-family:var(--mono);font-size:var(--t-btn);letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;white-space:nowrap;border:1px solid transparent;cursor:pointer;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,
    transform .22s cubic-bezier(.2,.65,.2,1),box-shadow .22s ease;
}
/* Leichter Hub beim Zeigen, gedrueckt wieder unten. Nur transform und
   Schatten, damit es nichts im Layout bewegt. */
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0);box-shadow:none;transition-duration:.08s}
.btn-salbei{background:var(--salbei-tief);color:var(--creme);border-color:var(--salbei-tief)}
.btn-salbei:hover{background:#6f8670;border-color:#6f8670;box-shadow:0 12px 24px -12px rgba(92,112,89,.7)}
.btn-creme{background:var(--creme);color:#4a3b2c;border-color:var(--creme)}
.btn-creme:hover{background:#fff}
.btn-outline{background:transparent;color:var(--braun-logo);border-color:var(--braun-akzent)}
.btn-outline:hover{background:var(--braun-akzent);color:var(--creme)}
.btn-outline-hell{background:transparent;color:var(--creme);border-color:var(--creme)}
.btn-outline-hell:hover{background:var(--creme);color:#4a3b2c}
.btn-sm{padding:.72rem 1.35rem}

/* ------------------------------------------------------------ Navigation */
/* Klebt oben. Beim Scrollen wird sie zur Glasleiste (Klasse geschrumpft, aus
   main.js) und weicht beim Runterscrollen nach oben (versteckt), beim
   Hochscrollen kommt sie sofort zurueck. Tastatur: sobald etwas darin den
   Fokus hat, bleibt sie sichtbar. */
/* Notice for holidays or market days, one sentence, on every page:
   saffron strip above the menu, scrolls away with the page. */
.hinweis{text-align:center;font-family:var(--serif);line-height:1.4}
.hinweis p{margin:0 auto;width:min(100% - 2rem,62rem);overflow-wrap:break-word;text-wrap:balance}
.hinweis--leiste{background:var(--safran);color:var(--braun);
  font-size:clamp(1.06rem,1rem + .35vw,1.25rem);letter-spacing:.015em;padding:.75rem 0 .8rem}
.nav{background:var(--creme);position:sticky;top:0;z-index:20;
  transition:transform .4s cubic-bezier(.2,.65,.2,1),background-color .3s ease,box-shadow .3s ease}
.nav.geschrumpft{
  background:rgba(250,245,236,.86);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 1px 0 rgba(120,96,66,.12),0 14px 30px -20px rgba(58,47,38,.28)
}
.nav.versteckt{transform:translateY(-100%)}
.nav.versteckt:focus-within{transform:none}
.nav-inner{transition:padding .3s ease}
.nav.geschrumpft .nav-inner{padding:.75rem 0}
.brand img{transition:width .3s ease,height .3s ease}
.nav.geschrumpft .brand img{height:46px;width:46px}
html{scroll-padding-top:5.5rem}
.nav-inner{
  /* Das Logo steht links, Menue und Knopf ruecken nach rechts.
     Ein grosser Mindestabstand ueber gap hat bei 1100 Pixel die Leiste
     ueber die Breite geschoben. margin-left:auto nimmt dagegen genau den
     Platz, der uebrig ist, und faellt bei Enge von selbst zusammen. */
  display:flex;align-items:center;
  gap:clamp(1.5rem,.75rem + 2.5vw,3rem);
  padding:1.28rem 0;
  /* Die Leiste darf breiter sein als der Textbereich. Bei 1120 Pixel war sie
     schlicht voll, Logo, Menue und Knopf ergaben zusammen schon 976 Pixel.
     Mit 1320 rueckt das Logo nach aussen und es entsteht echte Luft. */
  width:min(100% - 2.5rem,1320px);
}
/* flex:0 0 auto ist hier entscheidend. Mit min-width:0 hat das Flex-Layout
   die Logo-Box unter ihre Textbreite gedrueckt, und weil der Name auf
   white-space:nowrap steht, lief er sichtbar in die Navigation hinein.
   Die Box misst dann 194 Pixel, der Text daneben deutlich mehr. */
.brand{display:flex;align-items:center;gap:.95rem;text-decoration:none;flex:0 0 auto}
.brand img{height:59px;width:59px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.brand-name{display:block;font-family:var(--serif);font-size:1.52rem;color:var(--braun);line-height:1.1;white-space:nowrap}
.brand-sub{display:block;font-family:var(--mono);font-size:var(--t-mono-s);color:var(--muted-hell);letter-spacing:.1em;margin-top:.15rem;text-transform:uppercase}
/* Menue-Abstand: mit "Brottag & Feines" fehlten bei 1280 px 31 px, die Punkte
   wurden per Ellipse gekuerzt. 26 px statt 34 px zwischen den Punkten reichen. */
.nav-menu{display:flex;gap:clamp(1.25rem,.75rem + 1.1vw,1.6rem);list-style:none;
  margin:0 0 0 auto;padding:0;min-width:0}
/* min-width:0 an beiden Stellen, sonst weigert sich Flex zu schrumpfen und
   schiebt stattdessen die ganze Leiste ueber den Rand. */
.nav-menu > li{min-width:0}
/* Der Knopf in der Kopfzeile traegt Paulines Text "Unverbindlich anfragen" (22 Zeichen):
   mit dem Standard-Innenabstand der Knoepfe (1.95rem) war er 299 px breit und
   die Menuepunkte wurden ab 1440 px gekuerzt. Schmaler und enger gesetzt: 262 px. */
.nav-inner > .btn{flex:0 0 auto;padding:.85rem 1.4rem;letter-spacing:.08em}
.nav-menu a{
  font-family:var(--mono);font-size:var(--t-mono-l);color:var(--braun-mittel);
  text-decoration:none;white-space:nowrap;transition:color .2s ease;
  /* Notbremse: Pauline kann jeden Menuenamen selbst aendern. Ein sehr langer
     Name ("Brottag & feines aus der Pâtisserie" = 303 px) schob die
     Leiste bei 1280 px um 152 px ueber den Rand. Jetzt gibt das Menue nach
     und kuerzt den laengsten Punkt, statt die Kopfzeile zu zerreissen.
     Kurze Namen merken davon nichts. */
  max-width:100%;overflow:hidden;text-overflow:ellipsis;
  /* Nur 15 Pixel hoch. Auf schmalen Bildschirmen faellt das nicht auf,
     weil dort das Burger-Menue greift, ab 1024 aber schon. WCAG 2.5.8 will
     24, und am Notebook mit Touch trifft man 15 Pixel kaum.
     Padding statt Schriftgroesse, damit die Leiste gleich aussieht. */
  display:inline-flex;align-items:center;min-height:24px;
}
.nav-menu a:hover{color:var(--braun)}
/* Aktive Seite: gleiche Farbe wie die anderen, nur eine feine Linie.
   Ein dunklerer Ton wirkt in der Mono-Schrift fetter und damit groesser. */
@media (min-width:769px){
  .nav-menu a{position:relative}
  .nav-menu a::after{
    content:"";position:absolute;left:0;right:0;bottom:-.3em;height:1px;
    background:var(--braun-akzent);transform:scaleX(0);transform-origin:left;
    transition:transform .3s cubic-bezier(.2,.65,.2,1)
  }
  .nav-menu a:hover::after,.nav-menu a:focus-visible::after,.nav-menu a[aria-current="page"]::after{transform:scaleX(1)}
}
@media (max-width:768px){
  .nav-menu a[aria-current="page"]{color:var(--braun)}
}
.nav-toggle{display:none;background:none;border:0;padding:.5rem;color:var(--braun);font-size:1.25rem;cursor:pointer;min-width:44px;min-height:44px}
.nav-toggle .sym{width:1.4rem;height:1.4rem;transition:transform .25s ease}
.nav-toggle .sym-zu{display:none}
.nav-toggle.ist-offen .sym-auf{display:none}
.nav-toggle.ist-offen .sym-zu{display:block}
/* Nur im Handy-Menue: Knopf und Kontaktzeile am Ende der Liste */
.nav-menu-cta,.nav-menu-kontakt{display:none}

/* ----------------------------------------------------------------- Hero */
.hero{
  background:var(--sand);position:relative;overflow:hidden;
  padding:var(--s-sec) 0 var(--s-sec-l);
}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;
  gap:clamp(2.2rem,1.3rem + 3.6vw,4.6rem);align-items:center;position:relative;z-index:1}
.hero h1{font-size:var(--t-hero);line-height:1.04;letter-spacing:-.015em;margin-top:1.28rem}
/* Eigene Zeile, damit der Ausgleich nur die zweite Haelfte umbricht
   und dort nie ein einzelnes Wort allein stehen bleibt */
.hero h1 em{display:block;text-wrap:balance;font-style:italic;color:var(--braun-akzent)}
.hero-lead{font-size:var(--t-lead);line-height:1.6;color:var(--braun-mittel);margin-top:1.45rem;max-width:none}
/* Zwei Wege gleich im Hero: die Torte auf Bestellung und der Brottag.
   Vorher stand hier nur ein Knopf und darunter blieb die Spalte leer,
   waehrend das Bild daneben deutlich hoeher war. */
.hero-cta{margin-top:1.9rem;display:flex;gap:.75rem;flex-wrap:wrap;align-items:center}
.hero-notiz{
  display:flex;align-items:flex-start;gap:.7rem;
  margin-top:1.6rem;padding-top:1.4rem;
  border-top:1px solid var(--linie);max-width:26rem
}
.hero-notiz .sym{color:var(--salbei-icon);width:1.05rem;height:1.05rem;flex:0 0 auto;margin-top:.2rem}
.hero-notiz span{font-size:var(--t-small);line-height:1.55;color:var(--muted)}

/* Der Hero taucht beim Laden nacheinander auf. Kein Scroll noetig, deshalb
   reine CSS-Animation statt Beobachter. Ohne JS ist ohnehin alles sichtbar. */
.js .hero-grid > div > *{animation:hero-auf .7s ease both}
.js .hero-grid > div > *:nth-child(1){animation-delay:.05s}
.js .hero-grid > div > *:nth-child(2){animation-delay:.15s}
.js .hero-grid > div > *:nth-child(3){animation-delay:.25s}
.js .hero-grid > div > *:nth-child(4){animation-delay:.35s}
.js .hero-media{animation:hero-auf .8s ease .1s both}
@keyframes hero-auf{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .js .hero-grid > div > *,.js .hero-media{animation:none}
}
.hero-media{position:relative}
.hero-media img{
  width:100%;height:clamp(20rem,16rem + 18vw,34.6rem);object-fit:cover;
  border-radius:230px 230px 33px 33px;
  box-shadow:var(--schatten-xl);
}
/* Siegel am Hero-Bild.
   Sitzt bewusst halb auf dem Bild und halb daneben, damit es wie aufgelegt
   wirkt. Traegt die beiden Meisterbriefe, also das Argument, das Pauline von
   jeder anderen Konditorei unterscheidet. */
.siegel{
  position:absolute;left:-1.75rem;bottom:1.75rem;z-index:2;
  width:clamp(7.5rem,5.4rem + 6vw,11rem);aspect-ratio:1;
  display:grid;place-items:center;
  background:var(--creme);border-radius:50%;
  box-shadow:var(--schatten-m)
}
.siegel-ring{position:absolute;inset:0;width:100%;height:100%;animation:siegel-dreht 26s linear infinite}
.siegel-ring text{
  font-family:var(--mono);font-size:15px;letter-spacing:0;
  text-transform:uppercase;fill:var(--braun-akzent)
}
.siegel-mitte{display:grid;place-items:center;gap:.1rem;line-height:1}
.siegel-zeichen{color:var(--salbei-icon);width:1.5rem;height:1.5rem}
.siegel-mitte b{
  display:grid;place-items:center;gap:.12em;
  font-family:var(--mono);font-size:var(--t-mono-s);font-weight:400;
  letter-spacing:.12em;color:var(--braun-logo)
}
/* "seit" eine Stufe kleiner und blasser, damit die Jahreszahl das Auge
   behaelt und die Zeile nicht breiter wird als der freie Kreis innen. */
.siegel-mitte b i{
  font-style:normal;font-size:.82em;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted)
}
@keyframes siegel-dreht{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .siegel-ring{animation:none}
}

/* -------------------------------------------------- Merkmale, 4 Spalten */
/* Handwerk-Sektion direkt unter dem Hero.
   Eigener Farbton, damit sie sich vom Hero absetzt, und ein Dekokreis wie in
   den anderen Baendern. Sie traegt das staerkste Argument der Seite. */
.features{
  background:var(--creme);position:relative;overflow:hidden;
  padding:var(--s-sec-l) 0 calc(var(--s-sec-l) * 1.2)
}
.features::after{
  content:"";position:absolute;left:-165px;top:-150px;width:390px;height:390px;
  border-radius:50%;background:radial-gradient(circle,var(--salbei-deko) 0 54%,transparent 72%);opacity:.16;pointer-events:none
}
.features > .wrap{position:relative;z-index:1}

.features-kopf{text-align:center;max-width:44rem;margin:0 auto clamp(2.4rem,1.6rem + 3vw,4rem)}
.features-kopf h2{font-size:var(--t-h2s);line-height:1.14;margin-top:.85rem}
.features-lead{
  font-size:var(--t-lead);line-height:1.6;color:var(--braun-mittel);
  margin-top:1.15rem;max-width:38rem;margin-inline:auto
}

/* Diese Reihe darf breiter laufen als der Textbereich: bei 960 px blieben je
   Spalte nur 284 px, und ein fuenfwortiger Titel wie "Frisch fuer dich
   gefertigt" brach als einziger um. */
.features > .wrap{width:min(100% - 2.5rem,1100px)}
.features-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  /* Nummer, Zeichen, Strich, Titel und Text liegen in allen drei Spalten auf
     derselben Hoehe, auch wenn ein Titel doch einmal zwei Zeilen braucht. */
  grid-template-rows:auto auto auto auto auto;
  /* Nur zwischen den Spalten Luft. Ein row-gap wuerde im Subgrid auch
     zwischen Zeichen, Nummer, Strich, Titel und Text wirken und die Karte
     auseinanderziehen; die Abstaende dort machen weiter die Margins. */
  column-gap:clamp(1.5rem,.9rem + 2.4vw,3rem);row-gap:0
}
.feature{text-align:center;position:relative;padding:0 clamp(.25rem,.1rem + .5vw,.7rem);
  display:grid;grid-row:span 5;grid-template-rows:subgrid;align-content:start}
/* Feine Trennlinien zwischen den Spalten, dasselbe Mittel wie bei den Anlaessen */
.feature + .feature::before{
  content:"";position:absolute;left:calc(clamp(1.5rem,.9rem + 2.4vw,3rem) / -2);
  top:.4rem;bottom:.4rem;width:1px;background:var(--linie)
}
.feature-nr{
  display:block;font-family:var(--mono);font-size:var(--t-mono-s);
  letter-spacing:.2em;color:var(--braun-akzent);opacity:.65;margin-bottom:1.1rem
}
.feature .sym{color:var(--salbei-icon);width:1.9rem;height:1.9rem}
.feature h3{font-size:var(--t-h3);margin:1.35rem 0 .6rem;line-height:1.2;text-wrap:balance}
.feature p{font-size:var(--t-body-s);line-height:1.6;color:var(--braun-mittel);max-width:30ch;margin-inline:auto}

/* Einblenden beim Scrollen, gleiche Mechanik wie die Zeitleiste */

/* Feiner Strich statt Symbol. Ersetzt die gefuellten Font-Awesome-Icons
   in den Fakten- und Ablaufbloecken, auf Wunsch der Kundin. */
.marke{display:block;width:44px;height:1px;background:var(--braun-akzent);margin:0 auto}
.feature .marke{margin-bottom:0}
.ablauf-schritt .marke{margin-bottom:1.45rem}

/* Herkunftsband. Steht auf den Unterseiten und zeigt, woher die Zutaten
   kommen und was Pauline gelernt hat. Bewusst keine erfundenen Guetesiegel,
   nur Nachweisbares, sonst waere es Irrefuehrung. */
/* Das Band traegt Paulines staerkste Belege und ging vorher im Untergrund
   unter: auf /brottag und /torten steht davor eine Sandflaeche, das Band ist
   selbst Sand, zusammen wurde daraus ein einziger langer Streifen.

   Statt es je nach Nachbar umzufaerben, was das Problem nur eine Sektion
   weiterschiebt, steht es jetzt als eigene Karte auf der Flaeche. Die hebt
   sich auf JEDEM Untergrund ab, egal was davor oder danach kommt, und passt
   zur uebrigen Formensprache (Zeitleiste, Rechtstexte, Handschrift-Karte). */
.herkunft{background:none;padding:clamp(1.8rem,1.3rem + 2vw,3rem) 0}
.herkunft > .wrap{
  /* Die tiefgruene Karte war zu dominant, die stille
     Reihe mit Haarlinien sah aus wie die drei Meisterin-Spalten darueber
     Jetzt eine schmale helle Leiste mit liegenden
     Paaren: Zeichen links, zwei kurze Zeilen rechts, kleiner gesetzt. Anderer
     Rhythmus als die zentrierten Spalten, andere Flaeche, trotzdem leise. */
  background:rgba(255,255,255,.55);border:1px solid var(--linie);border-radius:18px;box-shadow:none;
  padding:clamp(1.1rem,.8rem + 1.2vw,1.7rem) clamp(1rem,.6rem + 1.6vw,2rem);
  /* Breiter als die Textspalte (wie die Feature-Reihe), sonst brechen die
     Titel neben dem Zeichen um: 960 px ergaben 130 px je Text. */
  width:min(100% - 2.5rem,1100px)
}
.herkunft-titel{text-align:center;display:block;margin-bottom:clamp(.9rem,.6rem + 1vw,1.4rem)}
/* Vier gleiche Felder nebeneinander, jedes identisch aufgebaut:
   Zeichen, Titel, eine kurze Zeile. Unterschiedlich lange Texte haben die
   Reihe vorher unruhig wirken lassen, deshalb sind sie bewusst kurz gehalten.
   Jede Spalte gleich breit, alles zentriert, dazwischen feine Striche. */
.herkunft-reihe{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;max-width:none;margin-inline:auto
}
.herkunft-punkt{
  display:flex;flex-direction:row;align-items:center;text-align:left;gap:.85rem;
  position:relative;padding:.15rem clamp(.5rem,.3rem + .8vw,1rem)
}
.herkunft-punkt + .herkunft-punkt::before{
  content:"";position:absolute;left:0;top:.25rem;bottom:.25rem;
  width:1px;background:var(--linie)
}
.herkunft-kreis{
  width:2.6rem;height:2.6rem;border-radius:50%;flex:0 0 auto;
  display:grid;place-items:center;margin:0;
  background:var(--sand);box-shadow:none
}
.herkunft-zeichen{width:1.25rem;height:1.25rem;color:var(--salbei-icon)}
.herkunft-text{display:flex;flex-direction:column;min-width:0}
.herkunft-punkt b{
  font-family:var(--serif);font-weight:400;font-size:clamp(1.05rem,.98rem + .3vw,1.2rem);
  color:var(--braun);line-height:1.2
}
/* Die Zeile darunter in der Schmalschrift, das liest sich wie eine
   Herkunftsangabe und nicht wie ein angefangener Satz. */
.herkunft-text > span{
  font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:.08em;
  line-height:1.45;color:var(--muted);margin-top:.3rem;text-transform:uppercase
}

/* ------------------------------------------------ Band "Beliebte Anlässe" */
.band-salbei{background:var(--salbei-tief);position:relative;overflow:hidden;
  padding:var(--s-sec-l) 0 calc(var(--s-sec-l) * 1.3)}
/* Kopf der Sektion ueber die volle Breite statt in einer schmalen Spalte.
   Vorher war das eine stille Zeile links, jetzt traegt sie die Sektion. */
.band-kopf{position:relative;z-index:1;text-align:center;max-width:44rem;
  margin:0 auto clamp(2.6rem,1.7rem + 3.4vw,4.5rem)}
/* Auf dem gruenen Band braucht die kleine Zeile einen hellen Ton,
   in Braun war sie dort nur ein Fleck ueber der Ueberschrift. */
.band-kopf .eyebrow-hell{color:var(--auf-salbei-2);opacity:.9}
.band-kopf h2{font-size:var(--t-h2s);line-height:1.14;color:var(--auf-salbei);margin-top:.85rem}
.band-lead{font-size:var(--t-lead);line-height:1.6;color:var(--auf-salbei-2);
  margin-top:1.1rem;max-width:38rem;margin-inline:auto}

/* Zwei mal zwei Karten statt vier nebeneinander.
   Bei vier Spalten brach "Firmen & Gastronomie" zweizeilig um und die Texte
   waren unterschiedlich hoch. Zu zweit ist genug Breite fuer Bild links und
   Text rechts, und alle vier Karten sind gleich gross. */
.anlaesse{position:relative;z-index:1;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-rows:1fr;
  gap:clamp(1.25rem,.8rem + 1.6vw,2rem);
  max-width:64rem;margin-inline:auto}
/* Volle Reihen, kein Einzelgaenger: drei Kacheln nebeneinander (dann Bild
   oben, Text darunter, sonst wird die Textspalte zu schmal), eine mittig */
.anlaesse[data-anzahl="3"]{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none}
.anlaesse[data-anzahl="3"] .anlass{grid-template-columns:1fr}
.anlaesse[data-anzahl="3"] .anlass-bild{aspect-ratio:4 / 3}
.anlaesse[data-anzahl="1"]{grid-template-columns:1fr;max-width:32rem}
.anlass{
  position:relative;display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  background:var(--creme);border-radius:24px;overflow:hidden;
  box-shadow:var(--schatten-s);
  transition:transform .3s ease,box-shadow .3s ease
}
.anlass:hover{transform:translateY(-4px);box-shadow:var(--schatten-m)}
/* Das Bild sitzt buendig an der Kante und fuellt die ganze Kartenhoehe.
   Vorher war es ein kleiner Kreis mit viel Luft daneben. */
.anlass-bild{display:block;position:relative}
.anlass img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;background:#eef2ea
}
.anlass-inhalt{padding:clamp(1.4rem,1rem + 1.6vw,2.1rem)}
.anlass-inhalt{display:flex;flex-direction:column;min-width:0}
.anlass h3{font-size:var(--t-h5);color:var(--braun);line-height:1.25}
.anlass p{font-size:var(--t-body-s);line-height:1.5;color:var(--braun-mittel);
  margin-top:.45rem}
.anlass-link{
  margin-top:.9rem;align-self:flex-start;
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:.14em;
  text-transform:uppercase;color:var(--braun-akzent);text-decoration:none;
  border-bottom:1px solid rgba(120,96,66,.4);padding-bottom:.2rem;
  /* Nur 21 Pixel hoch, WCAG 2.5.8 verlangt 24. Der Unterstrich bleibt
     dort wo er ist, die Flaeche waechst nach oben. */
  min-height:24px;box-sizing:content-box;
  transition:border-color .2s ease
}
.anlass-link:hover{border-bottom-color:var(--braun-akzent)}
.anlass-pfeil{width:.85rem;height:.85rem;transform:rotate(-90deg);
  transition:transform .25s ease}
.anlass:hover .anlass-pfeil{transform:rotate(-90deg) translateX(3px)}

/* Die ganze Karte anklickbar, ohne verschachtelte Links */
.anlass-link::after{content:"";position:absolute;inset:0}

.band-cta{position:relative;z-index:1;margin-top:clamp(2.4rem,1.6rem + 3vw,3.75rem);text-align:center}

/* Einblenden wie in der Handwerk-Sektion */

/* ------------------------------------------------------- Brottag Startseite */
.brottag{background:var(--creme);padding:var(--s-sec-l) 0;text-align:center;position:relative;overflow:hidden}
.brottag::after{
  content:"";position:absolute;right:-102px;top:-102px;width:320px;height:320px;
  border-radius:50%;background:radial-gradient(circle,var(--sand) 0 54%,transparent 72%);opacity:.4;pointer-events:none;
}
.brottag > .wrap{position:relative;z-index:1}
.brottag h2{font-size:var(--t-h1);line-height:1.15;margin:.9rem auto 0;max-width:666px}
.brottag h2 em{font-style:italic;color:var(--braun-akzent)}
.brottag-sub{font-size:var(--t-body);color:var(--braun-mittel);margin-top:.9rem}
.brot-buehne{position:relative;width:589px;max-width:100%;margin:1.95rem auto 0}
.brot-buehne::before{
  content:"";position:absolute;left:14%;right:14%;bottom:8px;height:33px;
  border-radius:50%;background:rgba(58,47,38,.16);filter:blur(18px);
}
.brot-buehne img{position:relative;width:100%;height:auto}
.sortiment-head{margin-top:3.35rem}
.sortiment-head h2{font-size:var(--t-h2s);margin-top:.65rem}
.sortiment{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.8rem;margin-top:1.95rem}
.sortiment figure{margin:0;display:flex;flex-direction:column;gap:.65rem;align-items:center}
.sortiment img{
  box-shadow:var(--schatten-s);
  width:100%;height:clamp(11rem,8rem + 11vw,18.4rem);object-fit:cover;
  border-radius:50% 50% 50% 50% / 34% 34% 34% 34%;
}
.sortiment figcaption{font-size:var(--t-h5);color:var(--braun)}
.sortiment .preis{font-size:var(--t-small);color:var(--braun-akzent)}
/* Karte statt Bildraster, solange kein Brot ein Foto hat */
.sortiment-karte{list-style:none;margin:1.95rem auto 0;padding:0;max-width:30rem;text-align:left}
.sortiment-karte li{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.72rem 0;border-bottom:1px solid var(--linie)
}
.sortiment-karte li:first-child{border-top:1px solid var(--linie)}
.karte-name{font-size:var(--t-h5);color:var(--braun)}
.karte-preis{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.08em;color:var(--braun-akzent);white-space:nowrap}
.brottag-schluss{font-size:var(--t-h5);line-height:1.6;color:var(--braun-logo);margin:1.95rem auto 0;max-width:48ch}
.brottag-cta{margin-top:1.45rem}

/* ------------------------------------------------------- Band "Über mich" */
/* Ueber mich auf der Startseite.
   Frueher ein durchgehendes gruenes Band. Zusammen mit dem Anlaesse-Band und
   dem Fussbereich waren das drei grosse gruene Flaechen auf einer Seite.
   Jetzt helle Flaeche, das Gruen sitzt nur noch als Bogen hinter dem Portrait.
   Nebeneffekt: dunkler Text auf Creme liest sich deutlich besser als Creme
   auf Salbei. */
.ueber{background:var(--creme);padding:var(--s-sec-l) 0 calc(var(--s-sec-l) * 1.15)}
.ueber-grid{
  display:grid;grid-template-columns:1fr 1.02fr;
  gap:clamp(2.25rem,1.2rem + 4.5vw,5.5rem);align-items:center
}
.ueber-inner{max-width:34rem}
.ueber h2,.ueber h1{font-size:var(--t-h2s);line-height:1.16;color:var(--braun);margin-top:.9rem}
/* Gleiche Groesse wie auf der Startseite. Eine Stufe groesser liess bei
   1440 Pixel "umgezogen" allein in der letzten Zeile stehen. */
.ueber-seite h1{font-size:var(--t-h2s);text-wrap:balance}
.ueber p.ueber-text{font-size:var(--t-lead);line-height:1.65;color:var(--braun-mittel);
  margin-top:1.15rem;max-width:none}
.ueber .btn{margin-top:1.75rem}

.ueber .ueber-bild{position:relative;isolation:isolate}
/* Der Bogen liegt als schmaler Rahmen hinter dem Foto und nimmt das Motiv
   des Heros auf. Ringsum gleich viel, sonst wirkt er wie ein Fleck.
   Nur hier, nicht auf der Ueber-mich-Seite: dort fuellt das Bild eine halbe
   Spalte und der negative Versatz wuerde ueber den Rand ragen. */
.ueber .ueber-bild::before{
  content:"";position:absolute;z-index:-1;
  inset:clamp(-1.9rem,-1.1rem - 1.6vw,-.9rem) clamp(-1.9rem,-1.1rem - 1.6vw,-.9rem)
        clamp(.9rem,.5rem + 1vw,1.6rem);
  border-radius:230px 230px 33px 33px;background:var(--salbei)
}
.ueber .ueber-bild img{
  position:relative;width:100%;
  height:clamp(21rem,15rem + 24vw,33rem);
  object-fit:cover;object-position:54% 16%;
  border-radius:230px 230px 33px 33px;
  box-shadow:var(--schatten-xl)
}

/* ------------------------------------------------- Kontakt & Newsletter */
/* Kontakt vor dem Fussbereich.
   War vorher ein schmaler zweigeteilter Anhang mit ungleichen Spalten und der
   kleinsten Polsterung der Seite. Jetzt eigener Kopf und zwei gleich grosse
   Karten, damit die Sektion Gewicht bekommt. */
.kontaktband{background:var(--creme);position:relative;overflow:hidden;
  padding:var(--s-sec-l) 0 calc(var(--s-sec-l) * 1.15)}
.kontaktband::after{
  content:"";position:absolute;right:-150px;bottom:-160px;width:400px;height:400px;
  border-radius:50%;background:radial-gradient(circle,var(--salbei-deko) 0 54%,transparent 72%);opacity:.14;pointer-events:none
}
.kontaktband > .wrap{position:relative;z-index:1}

.kontaktband-kopf{text-align:center;max-width:44rem;
  margin:0 auto clamp(2.4rem,1.6rem + 3vw,3.75rem)}
.kontaktband-kopf h2{font-size:var(--t-h2s);line-height:1.14;margin-top:.85rem}
.kontaktband-lead{font-size:var(--t-lead);line-height:1.6;color:var(--braun-mittel);
  margin-top:1.1rem;max-width:38rem;margin-inline:auto}

.kontaktband-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.5rem,1rem + 2vw,2.5rem);align-items:stretch}
.kontaktkarte{
  background:var(--sand);border-radius:33px;box-shadow:var(--schatten-s);
  padding:clamp(1.75rem,1.2rem + 2.2vw,2.85rem);
  display:flex;flex-direction:column
}
.kontaktkarte h3{font-size:var(--t-h3);line-height:1.2}
.kontaktkarte-text{font-size:var(--t-body-s);line-height:1.6;color:var(--braun-mittel);
  margin-top:.7rem}
.kontaktkarte-cta{margin-top:auto;padding-top:1.75rem}
.kontaktkarte-hinweis{margin-top:auto;padding-top:1.15rem;
  font-size:var(--t-small);line-height:1.5;color:var(--muted)}
.kontaktkarte-hinweis a{color:inherit;text-decoration:underline;text-underline-offset:2px;display:inline-block;padding-block:.75rem;margin-block:-.75rem}
.kontaktliste{display:flex;flex-direction:column;gap:.88rem;margin-top:1.5rem}
.kontaktliste a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;
  transition:border-color .2s ease}
.kontaktliste a:hover{border-bottom-color:currentColor}
.kontaktzeile{display:flex;gap:.88rem;align-items:flex-start}
.kontaktzeile .sym{color:var(--salbei-icon);width:1.1rem;height:1.1rem;flex:0 0 auto;margin-top:.3rem}
.kontaktzeile span{font-size:var(--t-body-s);line-height:1.4;color:var(--braun-logo)}
.kontaktzeile .kontakt-weg{display:inline-block;font-size:var(--t-small);opacity:.78;margin:.1rem 0 .25rem}
/* Google-Zeile: Sterne in Mono, Link wie der Karten-Link */
.google-sterne{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.06em;color:var(--braun-akzent)}
.google-link{display:inline-flex;align-items:center;min-height:44px;font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:.12em;text-transform:uppercase;
  color:var(--braun-akzent);text-decoration:none;border-bottom:1px solid rgba(120,96,66,.4)}
.google-link:hover{border-bottom-color:var(--braun-akzent)}
.footer-kontaktliste .google-link{color:var(--auf-salbei);border-bottom-color:rgba(250,245,236,.35);letter-spacing:.08em;font-size:var(--t-mono-s)}
.newsletter-form{display:flex;gap:.65rem;margin-top:1.5rem;flex-wrap:wrap}
.newsletter-form input{
  flex:1 1 12rem;min-width:0;background:#fff;border:1px solid var(--linie);border-radius:99px;
  padding:.95rem 1.45rem;font-family:var(--mono);font-size:var(--t-mono);
  color:var(--braun-logo);letter-spacing:.1em;text-transform:uppercase;
}
.newsletter-form input::placeholder{color:#b9a98e}
.newsletter-form input:focus{outline:2px solid var(--salbei);outline-offset:2px}

/* ---------------------------------------------------------------- Footer */
.footer{background:var(--salbei-tief);color:var(--auf-salbei-2);padding:clamp(2.4rem,1.8rem + 2vw,3.4rem) 0 0}
.footer-grid{
  /* Die Adressspalte etwas breiter: "86946 Vilgertshofen/ OT Stadl" braucht
     225 px und brach bei vier gleichen Spalten (209 px) mitten im Namen um.
     Die anderen drei kommen mit hoechstens 190 px aus. */
  display:grid;grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(0,1fr));
  gap:clamp(1.5rem,1.1rem + 2vw,2.6rem);align-items:start;
}
/* Logo als eigene Zeile, mittig, mit feiner Linie darunter wie ueber der
   Copyright-Zeile. Darunter beginnen alle vier Spalten auf einer Hoehe. */
.footer-logo{display:flex;justify-content:center;
  padding-bottom:clamp(1.3rem,1rem + 1vw,1.8rem);margin-bottom:clamp(1.6rem,1.2rem + 1.4vw,2.3rem);
  border-bottom:1px solid rgba(250,245,236,.22)}
.footer-logo img{width:clamp(9rem,7.5rem + 3vw,10.5rem);height:auto;display:block}
.footer-adresse{font-size:var(--t-body-s);line-height:1.5;color:var(--auf-salbei-2);margin-top:0}


.footer-titel{
  font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:.18em;
  text-transform:uppercase;color:var(--auf-salbei-2);margin-bottom:.7rem;
}
.footer-titel--abstand{margin-top:1.4rem}
/* ------------------------------------ Trefferflaechen, Mindestmass 24 Pixel
   Gilt auf JEDER Breite. Vorher stand die Regel nur im Mobil-Block, ab 768px
   waren die Footer-Links wieder 15 bis 20 Pixel hoch. Am Notebook mit
   Touchscreen ist das genauso daneben wie am Handy. Der Mobil-Block hebt
   weiter auf 44 an, wo wirklich nur der Daumen im Spiel ist. Links mitten im
   Satz nimmt die Richtlinie selbst aus, die bleiben wie sie sind. */
.footer-spalte ul a,
.footer-kontaktliste a,
.footer-links a,
.kontaktzeile a,
.zurueck,
.nav-auf{
  display:inline-flex;align-items:center;min-height:24px
}

.footer-spalte ul{list-style:none;margin:0;padding:0;display:grid;gap:.42rem}
.footer-spalte a{
  font-size:var(--t-body-s);color:var(--auf-salbei);text-decoration:none;
  border-bottom:1px solid transparent;transition:border-color .2s ease;
}
.footer-spalte a:hover{border-bottom-color:var(--auf-salbei)}
.footer-text{font-size:var(--t-small);line-height:1.5;color:var(--auf-salbei-2);margin-bottom:.7rem}

.footer-kontaktliste{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.footer-kontaktliste li{display:flex;gap:.7rem;align-items:flex-start}
.footer-kontaktliste .sym{color:var(--auf-salbei-2);width:1.05rem;height:1.05rem;flex:0 0 auto;margin-top:.32rem}
.footer-kontaktliste span{font-size:var(--t-body-s);line-height:1.45;color:var(--auf-salbei)}
.footer-kontaktliste a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s ease}
.footer-kontaktliste a:hover{border-bottom-color:var(--auf-salbei)}

.footer-unten{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-gap);flex-wrap:wrap;
  margin-top:clamp(1.2rem,.9rem + 1vw,1.7rem);padding:1.1rem 0 1.3rem;
  border-top:1px solid rgba(250,245,236,.22);
  font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:.12em;text-transform:uppercase;
  color:var(--auf-salbei);
}
.formular-hinweis{font-size:var(--t-small);line-height:1.5;color:var(--muted);
  margin:1.4rem 0 1.6rem;text-wrap:balance}
.formular-hinweis a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* Ohne soziale Kanaele entfaellt die Zeile ganz, dann rueckt die
   Copyright-Zeile nach links und die Rechtslinks bleiben rechts. */
.footer-unten--ohne-social{justify-content:flex-start}
.footer-unten--ohne-social .footer-copy{margin-right:auto}

.footer-social{display:flex;gap:1.1rem;align-items:center}
.sym-social{width:1.3rem;height:1.3rem}
.footer-social a{display:inline-flex;color:var(--auf-salbei);text-decoration:none;transition:opacity .2s ease}
.footer-social a:hover{opacity:.7}
/* Jeder Rechtslink mindestens 44 px breit und hoch (Launch-Check), die Luft dafuer
   kommt aus dem Innenabstand, der Rand wird zurueckgezogen */
.footer-links{display:flex;gap:.3rem;flex-wrap:wrap;margin-inline:-.6rem}
.footer-links a{color:var(--auf-salbei);text-decoration:none;padding-inline:.6rem}
.footer-links a:hover{text-decoration:underline}

/* ================================================= Unterseiten, gemeinsam */
.seiten-hero{background:var(--sand);position:relative;overflow:hidden;padding:var(--s-sec) 0 var(--s-sec-l)}
.seiten-hero-grid{display:grid;grid-template-columns:1.08fr .92fr;
  gap:clamp(2.2rem,1.3rem + 3.6vw,4.6rem);align-items:center;position:relative;z-index:1}
.seiten-hero h1{font-size:var(--t-h1);line-height:1.1}
.seiten-hero h1 em{display:block;text-wrap:balance;font-style:italic;color:var(--braun-akzent)}
.seiten-hero p{font-size:var(--t-lead);line-height:1.6;color:var(--braun-mittel);margin-top:1.28rem;max-width:none}
.seiten-hero .btn{margin-top:1.75rem}
.seiten-hero-media img{
  width:100%;height:clamp(17rem,13rem + 16vw,27.5rem);object-fit:cover;
  border-radius:230px 230px 33px 33px;box-shadow:var(--schatten-xl);
}
.seiten-hero-freisteller{position:relative;width:100%;height:clamp(17rem,13rem + 16vw,27.5rem)}
.seiten-hero-freisteller::before{
  content:"";position:absolute;left:12%;right:12%;bottom:18px;height:33px;
  border-radius:50%;background:rgba(58,47,38,.16);filter:blur(18px);
}
.seiten-hero-freisteller img{position:relative;width:100%;height:100%;object-fit:contain}

/* Auf dem tieferen Sand fallen --muted (4,18:1) und --braun-akzent (4,24:1)
   unter AA. Deshalb hier braun-mittel, das kommt auf 4,87:1. */
.ablauf .eyebrow,.ablauf-schritt p{color:var(--braun-mittel)}

/* Anlass-Karten, Unterseite Torten */
.anlass-karten{background:var(--creme);padding:var(--s-sec) 0 var(--s-sec-l)}
.anlass-karten-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-gap)}
.anlass-karten-grid[data-anzahl="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.anlass-karten-grid[data-anzahl="1"]{grid-template-columns:1fr;max-width:32rem;margin-inline:auto}
.anlass-karte{background:var(--creme);border-radius:18px;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--schatten-s);
  transition:transform .3s ease,box-shadow .3s ease}
.anlass-karte:hover{transform:translateY(-5px);box-shadow:var(--schatten-m)}
/* Der gestreifte Eigenbau-Platzhalter ist raus, fehlende Bilder zeigen
   jetzt ueberall dieselbe Grafik aus assets/img/platzhalter/. */
.anlass-karte img{
  width:100%;height:clamp(13rem,10rem + 9vw,17.2rem);object-fit:cover;display:block;
}
.anlass-karte-body{padding:1.6rem 1.6rem 1.9rem;display:flex;flex-direction:column;flex:1}
.anlass-karte-body h3{font-size:var(--t-h3);margin:.65rem 0}
.anlass-karte-body p{font-size:var(--t-small);line-height:1.5;color:var(--braun-mittel)}
.anlass-karte-body .btn{margin-top:auto;align-self:flex-start}
.anlass-karte-body .btn-wrap{margin-top:auto;padding-top:1.1rem}

/* Ablauf, drei Schritte */
.ablauf{padding:var(--s-sec) 0 var(--s-sec-l);background:var(--sand-tief)}
.ablauf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-gap)}
.ablauf-schritt{text-align:center}
.ablauf-schritt .sym{color:var(--salbei-icon);width:1.9rem;height:1.9rem}
.ablauf-schritt h3{font-size:var(--t-h4);margin:.8rem 0 .48rem}
.ablauf-schritt p{font-size:var(--t-small);line-height:1.55;color:var(--muted);max-width:34ch;margin-inline:auto;text-wrap:balance}

/* Abschluss-CTA */
.abschluss{background:var(--creme);padding:var(--s-sec-l) 0;text-align:center}
.abschluss h1,.abschluss h2{font-size:var(--t-h2)}
.abschluss p{font-size:var(--t-body);color:var(--braun-mittel);margin:.78rem auto 0;max-width:56ch}
.abschluss .btn{margin-top:1.75rem}

/* Kontaktseite */
.kontakt-kopf{background:var(--sand);padding:var(--s-sec) 0 1.6rem;text-align:center}
.kontakt-kopf h1{font-size:var(--t-h1)}
.kontakt-kopf p{font-size:var(--t-body);color:var(--braun-mittel);margin:.78rem auto 0;max-width:56ch}
.kontakt-body{background:var(--sand);padding:1.6rem 0 var(--s-sec-l)}
.kontakt-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:2.9rem;align-items:start}
.formular{background:var(--creme);border-radius:18px;padding:2.55rem;box-shadow:var(--schatten-m)}
.feld{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1.28rem}
.feld label{font-family:var(--mono);font-size:var(--t-mono-s);color:var(--muted);letter-spacing:.1em;text-transform:uppercase}
.feld input,.feld textarea{
  border:0;border-bottom:1px solid rgba(58,47,38,.2);background:transparent;
  font-family:var(--serif);font-size:var(--t-body-s);color:var(--braun);
  padding:.5rem 0;width:100%;
}
.feld textarea{min-height:5.1rem;resize:vertical}
.feld input:focus,.feld textarea:focus{border-bottom-color:var(--salbei)}
.feld input:focus-visible,.feld textarea:focus-visible{outline:2px solid var(--braun-akzent);outline-offset:3px}
.formular .btn{margin-top:.65rem}
.kontakt-info{display:flex;flex-direction:column;gap:1.6rem}
.kontakt-info h2{font-size:var(--t-h3)}

/* Meldungen */
.meldung{border-radius:8px;padding:1.1rem 1.45rem;margin-bottom:1.6rem;font-size:var(--t-body-s)}
.meldung-ok{background:#e6eee2;color:#3c5136;border:1px solid #b9cdb2}
.meldung-fehler{background:#f4e2df;color:#7a3b31;border:1px solid #dcb5ae}

/* Rechtstexte */
/* ------------------------------------------------------------ Rechtstexte
   Vorher fing hier direkt unter der Navigation eine nackte Ueberschrift an
   und der Text lief ohne Halt durch. Jetzt derselbe Kopfbereich wie auf den
   anderen Unterseiten, der Text in einer Karte, und ein Verzeichnis zum
   Springen. Rechtstexte liest niemand von oben nach unten, man sucht eine
   bestimmte Stelle. */
.rechts-hero .eyebrow{margin-bottom:.7rem}
.rechts-lead{
  font-size:var(--t-lead);line-height:1.6;color:var(--braun-mittel);
  max-width:52ch;margin:1rem auto 0;text-wrap:balance
}

.rechtstext{background:var(--creme);padding:var(--s-sec-l) 0}
.rechtstext .wrap{max-width:min(100% - 2.5rem,760px)}

.rechts-inhalt{
  background:var(--sand);border-radius:20px;
  padding:clamp(1.25rem,1rem + 1vw,1.8rem);
  margin-bottom:var(--s-block)
}
.rechts-inhalt-titel{
  font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:.16em;
  text-transform:uppercase;color:var(--braun-akzent);margin-bottom:.85rem
}
.rechts-inhalt ol{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.15rem 1.6rem;counter-reset:rechtspunkt
}
.rechts-inhalt li{counter-increment:rechtspunkt}
.rechts-inhalt a{
  display:inline-flex;align-items:baseline;gap:.5rem;min-height:24px;
  font-size:var(--t-body-s);color:var(--braun-mittel);text-decoration:none;
  border-bottom:1px solid transparent;transition:color .2s ease,border-color .2s ease
}
.rechts-inhalt a::before{
  content:counter(rechtspunkt,decimal-leading-zero);
  font-family:var(--mono);font-size:.72em;color:var(--braun-akzent);
  flex:0 0 auto
}
.rechts-inhalt a:hover{color:var(--braun);border-bottom-color:var(--braun-akzent)}

.rechts-karte{
  background:var(--creme-hell);border:1px solid var(--linie);border-radius:22px;
  padding:clamp(1.5rem,1rem + 2.4vw,3rem);
  box-shadow:var(--schatten-s)
}
.rechtstext h2{
  position:relative;font-size:var(--t-h4);color:var(--braun);
  margin:2.4rem 0 .8rem;padding-top:1.6rem
}
.rechtstext h2:first-child{margin-top:0;padding-top:0}
/* Feiner Strich statt eines groesseren Abstands: trennt die Abschnitte,
   ohne die Seite noch laenger zu machen. */
.rechtstext h2:not(:first-child)::before{
  content:"";position:absolute;left:0;top:0;width:2.6rem;height:1px;
  background:linear-gradient(to right,var(--braun-akzent),transparent)
}
.rechtstext p,.rechtstext li{
  font-size:var(--t-body-s);line-height:1.75;color:var(--braun-logo)
}
.rechtstext p + p{margin-top:.8rem}
.rechtstext ul{padding-left:1.2rem;margin-top:.6rem;display:grid;gap:.35rem}
.rechtstext code{
  font-family:var(--mono);font-size:.86em;background:var(--sand);
  padding:.1rem .35rem;border-radius:5px
}
/* Ziel eines Sprungs nicht unter die Navigationsleiste schieben */
.rechtstext h2[id]{scroll-margin-top:6rem}

@media (max-width:600px){
  .rechts-inhalt ol{grid-template-columns:1fr}
}

/* KI-Kennzeichnung nach KI-VO Art. 50 */
.ki-hinweis{
  font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:.06em;
  color:var(--muted);text-align:center;margin-top:.55rem;text-transform:none;
}

/* --------------------------------------- Unterseite Über mich, Kopfbereich */


/* ------------------------------------------ Unterseite Brottag, Sortiment */
/* Grosses Bild als Ruhepunkt, gleicher Aufbau wie die Buehne auf der Startseite */
/* Freigestellt wie auf der Startseite: das Brot ist ein Freisteller ohne
   eigenen Hintergrund, in einer Karte mit Rand und Schatten sah man deshalb
   den Kasten statt das Brot. Stattdessen derselbe weiche Bodenschatten wie
   bei .brot-buehne, damit das Motiv auf der Seite steht statt zu schweben. */
.bildband{padding:0 0 var(--s-block)}
.bildband-figur{
  position:relative;margin:0 auto;
  width:min(100%,589px)
}
.bildband-figur::before{
  content:"";position:absolute;left:14%;right:14%;bottom:8px;height:33px;
  border-radius:50%;background:rgba(58,47,38,.16);filter:blur(18px);
  pointer-events:none
}
.bildband-figur img{
  position:relative;width:100%;height:auto;display:block
}
.bildband-figur figcaption{
  margin-top:1rem;text-align:center;
  font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)
}

.sortiment-band{background:var(--sand);padding:var(--s-sec) 0 var(--s-sec-l);text-align:center}
.sortiment-band h2{font-size:var(--t-h2s);margin-top:.65rem}
.sortiment-sub{font-size:var(--t-body-s);color:var(--braun-mittel);margin-top:.45rem}
.sortiment-band .sortiment{margin-top:2rem}

.band-zentriert{text-align:center;position:relative;z-index:1}
.band-zentriert h2{font-size:var(--t-h3);color:var(--auf-salbei)}
.band-zentriert p{font-size:var(--t-body-s);color:var(--auf-salbei);margin:.65rem auto 0;max-width:52ch}
.band-cta-zwei{display:flex;gap:.65rem;justify-content:center;flex-wrap:wrap;margin-top:1.75rem}

/* --------------------------------------------------- Spezifitaets-Korrekturen
   .seiten-hero p und .band-zentriert p greifen tiefer als
   .eyebrow bzw. .band-cta-zwei. Gleiche Tiefe statt !important. */
.seiten-hero p.eyebrow{font-size:var(--t-mono-s);line-height:1.4;color:var(--braun-akzent);margin-top:0;max-width:none}
.band-zentriert p.band-cta-zwei{max-width:none;margin-top:1.3rem}

/* Ueberschrift Brottag ist im Entwurf kleiner als auf den anderen Unterseiten
   (38px statt 44px), damit sie zweizeilig bleibt. */
.seiten-hero--klein h1{font-size:clamp(1.9rem, 1.35rem + 2.1vw, 3.05rem)}

/* ------------------------------------------------- Aufklappmenue Portfolio */
.nav-hat{position:relative;display:flex;align-items:center}
.nav-auf{
  background:none;border:0;padding:.2rem .35rem;margin-left:.15rem;
  color:var(--braun-mittel);font-size:.8rem;cursor:pointer;line-height:1;
}
.nav-unter{
  position:absolute;top:100%;left:-1rem;z-index:30;margin:0;padding:.7rem 0;
  min-width:15rem;list-style:none;background:var(--creme);
  border:1px solid var(--linie);border-radius:4px;
  box-shadow:var(--schatten-m);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
.nav-hat:hover .nav-unter,
.nav-hat:focus-within .nav-unter,
.nav-unter.offen{opacity:1;visibility:visible;transform:translateY(0)}
.nav-unter li{display:block}
.nav-unter a{
  display:block;padding:.55rem 1.2rem;white-space:nowrap;
  font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--braun-mittel);text-decoration:none;
}
.nav-unter a:hover{background:var(--sand);color:var(--braun)}
/* Unsichtbare Bruecke, damit der Mauszeiger die Luecke ueberqueren kann */
.nav-hat::after{content:"";position:absolute;top:100%;left:0;right:0;height:.75rem}

/* ------------------------------------------------------------- Portfolio */
.seiten-hero--schmal{padding:var(--s-sec) 0 var(--s-sec);text-align:center}
.seiten-hero--schmal h1{margin-top:.7rem}
.seiten-hero--schmal p{margin-inline:auto;max-width:58ch}
.zurueck{color:var(--braun-akzent);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px}

.kat-leiste{background:var(--creme);border-bottom:1px solid var(--linie)}
.kat-leiste-inner{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center;padding:1rem 0}
.kat-leiste a{
  font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--braun-mittel);text-decoration:none;border:1px solid transparent;
  border-radius:99px;padding:.5rem 1.1rem;white-space:nowrap;
}
.kat-leiste a:hover{border-color:var(--linie)}
.kat-leiste a[aria-current="page"]{background:var(--salbei-tief);color:var(--creme);border-color:var(--salbei-tief)}

.kat-uebersicht{background:var(--creme);padding:var(--s-sec) 0 var(--s-sec-l)}
/* Fuenf Kategorien in drei Spalten liessen die zweite Reihe links haengen.
   Flex statt Grid: die letzte Reihe steht mittig, 3 + 2 wirkt symmetrisch. */
.kat-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-gap)}
.kat-kachel{display:block;text-decoration:none;text-align:center;
  flex:0 1 calc((100% - 2 * var(--s-gap)) / 3)}
.kat-grid[data-anzahl="4"] .kat-kachel{flex-basis:calc((100% - 3 * var(--s-gap)) / 4)}
.kat-grid[data-anzahl="2"] .kat-kachel{flex-basis:calc((100% - var(--s-gap)) / 2);max-width:20rem}
.galerie-stueck:hover img{transform:translateY(-4px);box-shadow:var(--schatten-m)}
/* Platzhalter sollen ruhig im Hintergrund bleiben und nicht mithuepfen */
.galerie-stueck--platzhalter img{box-shadow:none;opacity:.85}
.galerie-stueck--platzhalter:hover img{transform:none;box-shadow:none}
.kat-bild{
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  aspect-ratio:1/1;border-radius:50% 50% 50% 50% / 34% 34% 34% 34%;
  background:var(--sand);margin-bottom:1rem;
}
.kat-bild{transition:border-radius .6s cubic-bezier(.2,.65,.2,1)}
.kat-bild img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.65,.2,1)}
.kat-kachel:hover .kat-bild{border-radius:50% 50% 50% 50% / 42% 42% 26% 26%}
.kat-kachel:hover .kat-bild img{transform:scale(1.05)}
.kat-name{display:block;font-family:var(--serif);font-size:var(--t-h3);color:var(--braun)}
.kat-zahl{display:block;font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-top:.35rem}

.galerie-band{background:var(--creme);padding:var(--s-sec) 0 var(--s-sec-l)}
.galerie{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-gap)}
.galerie-stueck{margin:0}
.galerie-stueck img{
  /* Einheitliches Format fuer alle Kacheln, echte Arbeiten wie Platzhalter.
     Ohne das waren die Reihen unterschiedlich hoch. */
  aspect-ratio:3 / 4;object-fit:cover;
  box-shadow:var(--schatten-s);transition:transform .3s ease,box-shadow .3s ease;
  width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:4px;
  background:var(--creme);
}
.galerie-stueck figcaption{padding-top:.7rem;text-align:center}
.galerie-stueck figcaption b{display:block;font-family:var(--serif);font-weight:400;
  font-size:var(--t-h5);color:var(--braun)}
.galerie-stueck figcaption span{display:block;font-size:var(--t-small);color:var(--muted);margin-top:.2rem;text-wrap:balance}
.galerie-leer{text-align:center;font-size:var(--t-lead);color:var(--braun-mittel);padding:var(--s-block) 0}
.galerie-leer a{color:var(--braun-akzent)}

/* ============================================ Anlass-Seiten (vier Stueck) */
/* Reiner Fliesstext ohne Struktur laesst sich schlecht ueberfliegen.
   Deshalb Ueberschrift mittig darueber und die Absaetze in einer Karte,
   auf breiten Schirmen nebeneinander statt als ein langer Block. */
.anlass-text{background:var(--creme);padding:var(--s-sec-l) 0}
.anlass-text-kopf{text-align:center;max-width:42rem;
  margin:0 auto clamp(2rem,1.4rem + 2.4vw,3rem)}
.anlass-text-kopf h2{font-size:var(--t-h2s);line-height:1.14;margin-top:.85rem}
/* Karte im Menue-Stil. Zentriert, mit Haarlinien zwischen den Zeilen, wie
   eine Karte in der Auslage. Symmetrisch wird das nur, weil jede Zeile kurz
   genug ist, um einzeilig zu bleiben. */
/* Karte im Menue-Stil, alles linksbuendig.
   Zentrierte Zeilen unterschiedlicher Laenge wirken ausgefranst, weil links
   und rechts jeweils eine andere Kante entsteht. Buendig gibt es nur eine. */
.anlass-text-karte{
  max-width:36rem;margin-inline:auto;
  background:var(--sand);border-radius:24px;box-shadow:var(--schatten-m);
  padding:clamp(1.9rem,1.3rem + 2.2vw,2.75rem)
}
.anlass-text-marke{
  display:flex;align-items:center;gap:.9rem;
  padding-bottom:clamp(1.1rem,.85rem + 1vw,1.5rem);
  border-bottom:1px solid var(--linie)
}
.anlass-text-kreis{
  width:2.85rem;height:2.85rem;border-radius:50%;flex:0 0 auto;
  display:grid;place-items:center;
  background:var(--creme);box-shadow:var(--schatten-s)
}
.anlass-text-zeichen{width:1.3rem;height:1.3rem;color:var(--salbei-icon)}
.anlass-text-marke b{
  font-family:var(--mono);font-size:var(--t-mono-s);font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;color:var(--braun-akzent)
}

/* Jeder Punkt laesst sich aufklappen. Kurz steht sichtbar da, das Ausfuehrliche
   holt sich, wer es wissen will. Gleiche Mechanik wie beim FAQ. */
.stichpunkte{list-style:none;margin:0;padding:0}
.stichpunkte li{border-bottom:1px solid var(--linie)}
.stichpunkte li:last-child{border-bottom:0}
.stich summary{
  display:flex;align-items:center;gap:.9rem;cursor:pointer;list-style:none;
  padding:clamp(.85rem,.65rem + .8vw,1.15rem) 0;
  transition:color .2s ease
}
.stich summary::-webkit-details-marker{display:none}
.stich summary:hover{color:var(--braun-akzent)}
.stich summary:focus{outline:0}
.stich summary:focus-visible{outline:2px solid var(--braun-akzent);outline-offset:3px}
.stich-zeichen{
  width:1.1rem;height:1.1rem;flex:0 0 auto;color:var(--salbei-icon);stroke-width:1.2
}
.stich summary > span{
  flex:1;font-family:var(--serif);font-size:var(--t-h5);line-height:1.35;color:var(--braun)
}
.stich-pfeil{
  width:.95rem;height:.95rem;flex:0 0 auto;color:var(--braun-akzent);
  transition:transform .3s ease
}
.stich[open] .stich-pfeil{transform:rotate(180deg)}

.stich-mehr{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.stich[open] .stich-mehr{grid-template-rows:1fr}
.stich-mehr > p{
  overflow:hidden;font-size:var(--t-body-s);line-height:1.65;color:var(--braun-mittel);
  padding:0 0 clamp(.85rem,.65rem + .8vw,1.15rem) 2rem
}
@media (prefers-reduced-motion:reduce){
  .stich-mehr,.stich-pfeil{transition:none}
}

.ablauf-kopf{text-align:center;margin-bottom:var(--s-block)}
.ablauf-kopf h2{font-size:var(--t-h2s);margin-top:.6rem}
.schritt-nr{display:block;font-family:var(--mono);font-size:var(--t-mono-s);
  letter-spacing:.24em;color:var(--braun-akzent);margin-bottom:.9rem}

.galerie-mehr{text-align:center;margin-top:var(--s-block)}

/* Preis in der Karte "So arbeite ich" statt in einer eigenen Sektion:
   Einstiegszahl sichtbar, die Spanne klappt auf wie die anderen Punkte. */
.preis-kurz{margin-top:.4rem;padding-top:clamp(1.1rem,.85rem + 1vw,1.5rem);border-top:1px solid var(--linie)}
.preis-ab{margin:0 0 .3rem;padding-left:2rem}
.preis-ab b{display:block;font-family:var(--serif);font-weight:400;font-size:var(--t-h4);line-height:1.3;color:var(--braun)}
.preis-ab span{display:block;font-size:var(--t-body-s);line-height:1.55;color:var(--braun-mittel);margin-top:.25rem}
.stich-mehr > div{overflow:hidden}
.preis-detail-inhalt{padding:0 0 .6rem 2rem}
.preis-detail-inhalt > p{font-size:var(--t-body-s);line-height:1.65;color:var(--braun-mittel);margin:0 0 .5rem}
.preis-liste{background:none;border-radius:0;padding:0}
.preis-karte-fuss{
  font-size:var(--t-small);line-height:1.5;color:var(--muted);
  margin-top:1.3rem;padding-top:1.1rem;border-top:1px solid var(--linie)
}
.preis-zeile{display:flex;justify-content:space-between;align-items:baseline;gap:1.2rem;
  padding:.95rem 0;border-bottom:1px solid var(--linie)}
.preis-zeile:last-child{border-bottom:0}
.preis-zeile span{font-size:var(--t-body-s);color:var(--braun-logo)}
.preis-zeile b{font-family:var(--serif);font-weight:400;font-size:var(--t-h5);
  color:var(--braun-akzent);white-space:nowrap}

/* Creme statt Sand: direkt davor liegt der Ablauf in Sand-tief, zwei
   Sandtoene hintereinander wirkten wie eine Flaeche. Der Abschluss dahinter
   bekommt auf den Anlass-Seiten dafuer Sand, damit sich Creme nicht
   wiederholt: Sand-tief, Creme, Sand, Salbei. */
.faq-band{background:var(--creme);padding:var(--s-sec-l) 0 calc(var(--s-sec-l) * 1.1)}
.abschluss--sand{background:var(--sand)}
/* FAQ als Aufklapper.
   details statt eigenem JavaScript, damit es ohne Skript funktioniert und
   die Tastaturbedienung von selbst stimmt. Die Hoehe wird ueber ein Raster
   animiert, das ist der einzige Weg, der ohne feste Pixelhoehe auskommt. */
/* Schmaler als der Textbereich. Ueber die volle Breite laufen Frage und
   Pfeil so weit auseinander, dass sie nicht mehr zusammengehoerig wirken. */
.faq{max-width:40rem;margin-inline:auto}
.faq-eintrag{border-top:1px solid var(--linie)}
.faq-eintrag:last-child{border-bottom:1px solid var(--linie)}
.faq-eintrag summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1.2rem;
  padding:clamp(1.1rem,.9rem + .8vw,1.6rem) 0;cursor:pointer;list-style:none;
  transition:color .2s ease
}
.faq-eintrag summary::-webkit-details-marker{display:none}
.faq-eintrag summary:focus{outline:0}
.faq-eintrag summary:focus-visible{outline:2px solid var(--braun-akzent);outline-offset:3px}
.faq-eintrag summary:hover{color:var(--braun-akzent)}
.faq-frage{font-family:var(--serif);font-size:var(--t-h5);color:var(--braun);line-height:1.3}
.faq-pfeil{
  width:1.1rem;height:1.1rem;flex:0 0 auto;margin-top:.25rem;
  color:var(--braun-akzent);transition:transform .3s ease
}
.faq-eintrag[open] .faq-pfeil{transform:rotate(180deg)}

.faq-antwort{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s ease}
.faq-eintrag[open] .faq-antwort{grid-template-rows:1fr}
.faq-antwort > p{
  overflow:hidden;font-size:var(--t-body-s);line-height:1.75;color:var(--braun-mittel);
  padding-bottom:clamp(1.1rem,.9rem + .8vw,1.6rem)
}
@media (prefers-reduced-motion:reduce){
  .faq-antwort{transition:none}
  .faq-pfeil{transition:none}
}

/* -------------------------------------------------- Ablauf als Schrittkarten */
/* Jede Karte hat denselben Aufbau: links die Schrittzahl in eigener Spalte,
   dahinter eine Haarlinie, rechts der Text. Dadurch ist jede Zeile gleich
   gebaut und der Text nutzt die volle Breite, statt links zu kleben. */
.zeitleiste{
  list-style:none;margin:0 auto;padding:0;
  width:min(100%,46rem);
  display:grid;gap:clamp(.85rem,.6rem + 1vw,1.25rem)
}
.zeitleiste-inhalt{
  display:grid;
  grid-template-columns:clamp(5.4rem,4.3rem + 3.2vw,7.2rem) 1fr;
  align-items:center;
  background:var(--creme-hell);
  border:1px solid var(--linie);border-radius:18px;
  box-shadow:var(--schatten-s);
  overflow:hidden;
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease
}
.zeitleiste-punkt:hover .zeitleiste-inhalt{
  transform:translateY(-2px);box-shadow:var(--schatten-m);
  border-color:var(--braun-akzent)
}

/* Die Zahlenspalte ist leicht getoent, damit sie als eigener Bereich lesbar
   ist und nicht wie eine vergessene Einrueckung wirkt. */
.zeitleiste-marke{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.34rem;align-self:stretch;
  padding:clamp(1.3rem,1rem + 1.3vw,1.85rem) .5rem;
  background:linear-gradient(150deg,var(--sand) 0%,var(--sand-tief) 100%)
}
.zeitleiste-wort{
  font-size:var(--t-mono-s);letter-spacing:.2em;text-transform:uppercase;
  color:var(--braun-akzent)
}
.zeitleiste-nr{
  font-family:var(--serif);line-height:1;
  font-size:clamp(1.95rem,1.5rem + 1.4vw,2.7rem);
  color:var(--braun)
}
/* Kurze Linie unter der Zahl. Sie schliesst die Spalte ab und sitzt in jeder
   Karte an derselben Stelle, das haelt die Reihe ruhig. */
.zeitleiste-marke::after{
  content:"";width:1.7rem;height:1px;margin-top:.5rem;
  background:linear-gradient(to right,transparent,var(--braun-akzent),transparent);
  opacity:.6
}

.zeitleiste-text{
  border-left:1px solid var(--linie);
  padding:clamp(1.3rem,1rem + 1.3vw,1.85rem) clamp(1.4rem,1rem + 1.6vw,2.1rem);
  align-self:stretch;display:flex;flex-direction:column;justify-content:center
}
.zeitleiste-text h3{
  position:relative;font-size:var(--t-h4);
  margin-bottom:.55rem;padding-bottom:.55rem
}
/* Kurze Linie unter der Ueberschrift, dieselbe Geste wie in den anderen
   Karten der Seite. */
.zeitleiste-text h3::after{
  content:"";position:absolute;left:0;bottom:0;width:2.4rem;height:1px;
  background:linear-gradient(to right,var(--braun-akzent),transparent)
}
/* Zwei Zeilen sind reserviert, damit alle Karten gleich hoch bleiben,
   auch wenn Pauline einen Text spaeter kuerzer schreibt. Zeichen zaehlen
   waere hier die falsche Loesung, das haelt keine Aenderung aus. */
.zeitleiste-text p{
  font-size:var(--t-body-s);line-height:1.65;color:var(--braun-mittel);
  min-height:calc(2 * 1.65em)
}
@supports (min-height: 2lh){
  .zeitleiste-text p{min-height:2lh}
}

/* Einblenden beim Scrollen. Ohne JavaScript bleibt alles sichtbar. */
@media (prefers-reduced-motion:reduce){
  .zeitleiste-inhalt{transition:none}
}

/* ------------------------------------------------- Brotsortiment, gepflegt */
.brotliste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-gap);margin-top:2rem;text-align:left}
.brot{display:grid;grid-template-columns:clamp(7rem,5rem + 7vw,10.5rem) 1fr;gap:var(--s-gap);align-items:start}
.brot img,.brot-ohne-bild{
  box-shadow:var(--schatten-s);
  width:100%;aspect-ratio:1/1;object-fit:cover;
  border-radius:50% 50% 50% 50% / 34% 34% 34% 34%;background:var(--creme);
}
.brot-text h3{font-size:var(--t-h5)}
.brot-beschreibung{font-size:var(--t-small);line-height:1.6;color:var(--braun-mittel);margin-top:.35rem}
.brot-preis{font-family:var(--serif);font-size:var(--t-h5);color:var(--braun-akzent);margin-top:.6rem}
.brot-preis span{
  display:inline-block;margin-left:.5rem;font-family:var(--mono);font-size:var(--t-mono-s);
  letter-spacing:.06em;color:var(--muted);
}
.brot-details{margin-top:.6rem}
.brot-details summary{
  cursor:pointer;font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:.14em;
  text-transform:uppercase;color:var(--braun-akzent);
  /* Nur 17 Pixel hoch. WCAG 2.5.8 verlangt 24, und mit dem
     Daumen trifft man 17 Pixel schlicht nicht. Padding statt Schriftgroesse,
     damit das Schriftbild gleich bleibt. */
  display:inline-flex;align-items:center;min-height:24px;padding:.2rem 0
}
.brot-details summary:hover{color:var(--braun)}
.brot-details p{font-size:var(--t-small);line-height:1.6;color:var(--braun-mittel);margin-top:.5rem}
.brot-details strong{font-weight:400;color:var(--braun)}

.sortiment-leer{
  display:block;width:100%;height:clamp(11rem,8rem + 11vw,18.4rem);
  border-radius:50% 50% 50% 50% / 34% 34% 34% 34%;background:var(--sand);
}

/* ===================================================== Mobile Overrides
   Ans Dateiende, gleiche Selektor-Tiefe wie oben, deshalb ohne !important. */

/* Zwischen Burger (ab 1024) und voller Leiste (ab 1200) ist die Kopfzeile
   knapp: Logo, sechs Punkte und der Knopf liefen bei 1100 px um 64 px ueber.
   Eigener Bereich mit dokumentiertem Grund, keine neue Layout-Stufe. */
@media (min-width:1025px) and (max-width:1440px){
  /* Kompakte Leiste bis 1440 px. Mit "Brottag & Feines" im Menue und
     "Unverbindlich anfragen" auf dem Knopf: bei 1025 px fehlten 55 px, die
     grosse Leiste kuerzte zwischen 1281 und 1440 px die Punkte per Ellipse.
     Hier ist alles eine Stufe enger: Menueschrift 13 px, Abstaende ab 8 px,
     Pfeil hinter Torten ohne Rand, Knopf schmal. Logo und Name wachsen fluid
     von 46 px/16 px bei 1025 px auf 59 px/24 px bei 1440 px, damit der
     Sprung zur grossen Leiste bei 1441 px kaum sichtbar ist. */
  .nav-inner{gap:.5rem}
  .nav-menu{gap:clamp(.65rem,.65rem + (100vw - 1025px) * .03,1.1rem)}
  .nav-menu a{font-size:.82rem}
  .nav-auf{padding:.2rem .15rem;margin-left:0}
  .brand{gap:.7rem}
  .brand img{height:clamp(46px,46px + (100vw - 1025px) * .031,59px);width:clamp(46px,46px + (100vw - 1025px) * .031,59px)}
  .brand-name{font-size:clamp(1rem,-.3rem + 2vw,1.52rem)}
  .nav-inner > .btn{padding:.8rem .7rem;letter-spacing:.06em}
}

@media (max-width:1024px){
  /* Fusszeile auf dem Tablet als Zweierraster: vier Spalten waeren bei 769 px
     nur 150 px breit, Adresse und Listen braechen mehrfach um */
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:2rem}
  /* Ab Tablet quer uebernimmt der Burger: mit sechs Punkten plus Knopf lief die
     Desktop-Leiste bei 1024 px um 41 px ueber den rechten Rand. */
  .nav-inner{gap:clamp(1.25rem,.6rem + 2vw,2.25rem)}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;margin-left:auto}
  .nav-inner > .btn{display:none}
  /* Das Menue ist eine Flaeche unter der Kopfzeile bis zum unteren Rand, nicht
     mehr ein Block in der Kopfzeile mit fester Hoehe, der ab dem siebten
     Eintrag abschnitt. Absolut zur klebenden Kopfzeile, deshalb sitzt es auch
     nach dem Scrollen direkt darunter. */
  .nav-menu{
    position:absolute;left:0;right:0;top:100%;
    height:calc(100vh - 100%);height:calc(100dvh - 100%);
    flex-direction:column;gap:0;margin:0;
    padding:.25rem 1.25rem calc(2rem + env(safe-area-inset-bottom,0px));
    background:var(--creme);border-top:1px solid var(--linie);
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    opacity:0;visibility:hidden;transform:translateY(-.5rem);
    transition:opacity .25s ease,transform .25s ease,visibility 0s linear .25s;
  }
  .nav-menu.offen{opacity:1;visibility:visible;transform:none;transition:opacity .25s ease,transform .25s ease}
  .nav-menu > li{width:100%}
  .nav-menu a{display:flex;align-items:center;min-height:56px;padding:.5rem 0;border-bottom:1px solid var(--linie);
    font-family:var(--serif);font-size:1.45rem;letter-spacing:0;text-transform:none;color:var(--braun);white-space:normal}
  /* Untermenue auf Mobil dauerhaft sichtbar und eingerueckt, kein zweites Aufklappen */
  .nav-auf{display:none}
  .nav-hat{display:block}
  .nav-hat::after{display:none}
  .nav-unter{position:static;opacity:1;visibility:visible;transform:none;
    min-width:0;background:none;border:0;box-shadow:none;padding:0 0 .4rem 1.1rem}
  .nav-unter a{min-height:48px;padding:.35rem 0;font-size:1.12rem;color:var(--braun-mittel);border-bottom:1px solid rgba(58,47,38,.08)}
  .nav-unter li:last-child a{border-bottom:0}
  .nav-menu-cta{display:block;padding-top:1.25rem}
  .nav-menu-cta a{min-height:52px;justify-content:center;border-bottom:0;
    font-family:var(--mono);font-size:var(--t-btn);letter-spacing:.14em;text-transform:uppercase;color:var(--creme)}
  .nav-menu-kontakt{display:flex;gap:1.5rem;padding-top:.75rem}
  .nav-menu-kontakt a{min-height:44px;padding:0;border-bottom:0;
    font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--braun-akzent)}
  body.menue-offen{overflow:hidden}
  .features-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .anlaesse{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--s-gap)}
  .anlaesse[data-anzahl="3"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .anlaesse[data-anzahl="3"] .anlass{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)}
  .anlaesse[data-anzahl="3"] .anlass-bild{aspect-ratio:auto}
  .anlaesse[data-anzahl="3"] .anlass:last-child{grid-column:1 / -1}
  .herkunft-reihe{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:1rem}
  .herkunft-punkt + .herkunft-punkt::before{content:none}
  .herkunft-punkt:nth-child(even)::before{content:""}
  .sortiment{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--s-block)}
  .kontaktband-grid{grid-template-columns:1fr;gap:var(--s-block)}
  .kontakt-grid{grid-template-columns:1fr;gap:var(--s-block)}
  /* Der Bogen hinter dem Portrait ragte bei 800 bis 1024 px zehn Pixel ueber
     den rechten Rand (Seitenrand ist dort nur 1,25rem breit) */
  .ueber .ueber-bild::before{inset:-1.1rem -1.1rem .8rem}
}

@media (max-width:768px){
  /* Das Siegel haengt am Rechner bewusst ueber die Bildkante. Am Handy ist
     links kein Rand mehr uebrig, dort wurde "Stadl" im Ring abgeschnitten,
     deshalb rueckt es hier vollstaendig ins Bild. */
  .siegel{left:.5rem;bottom:.75rem;width:6rem}

  /* Am Handy zaehlt die Trefferflaeche, nicht die Schriftgroesse.
     Padding statt Hoehe, damit das Schriftbild gleich bleibt. */
  .footer-spalte ul a,.footer-kontaktliste a,.footer-links a,
  .kontaktzeile a{
    display:inline-flex;align-items:center;min-height:44px
  }
  .footer-spalte ul{gap:0}
  .newsletter-form input,.newsletter-form .btn{min-height:44px}
  .btn,.brand{min-height:44px}
  .btn{display:inline-flex;align-items:center;justify-content:center}

  /* Kopfzeile 64 px hoch: Logo 40, Name einzeilig, Burger rechts */
  html{scroll-padding-top:4.5rem}
  .nav-inner{padding:.6rem 0;gap:.75rem}
  .nav.geschrumpft .nav-inner{padding:.6rem 0}
  .brand{gap:.7rem;min-width:0}
  .brand img,.nav.geschrumpft .brand img{height:40px;width:40px}
  .brand-name{font-size:1.2rem;line-height:1.05}
  .brand-sub{margin-top:.1rem}
  .zurueck{display:inline-flex;align-items:center;min-height:44px}
  .anlass-link{min-height:44px;margin-top:.35rem}

  /* Erster Bildschirm: Bild als flacher Bogen, darunter sofort Titel und Knopf */
  .hero{padding:1.25rem 0 var(--s-sec)}
  .hero-grid{grid-template-columns:1fr;gap:1.4rem}
  .hero-media{order:-1}
  .hero-media img{height:clamp(13rem,8rem + 22vw,19rem);border-radius:999px 999px 28px 28px}
  .hero h1{margin-top:.3rem}
  .hero-lead{max-width:none;margin-top:.9rem}
  .hero-cta{margin-top:1.3rem}
  .hero-cta .btn{flex:1 1 100%}
  .hero-notiz{margin-top:1.1rem}

  /* Eingaben: 16 px, sonst zoomt iOS beim Tippen; 48 px hoch fuer den Daumen */
  .feld input,.feld textarea{font-size:max(16px,var(--t-body-s));min-height:48px}
  .feld textarea{min-height:6rem}
  .newsletter-form input{font-size:16px;text-transform:none;letter-spacing:.02em;min-height:48px}
  .newsletter-form .btn{min-height:48px}
  .menge-knopf{width:2.75rem;height:2.75rem}
  .menge-feld{height:2.75rem;font-size:max(16px,var(--t-h5))}
  .faq-weiter,.brot-details summary{min-height:44px}
  .kat-leiste a{display:inline-flex;align-items:center;min-height:44px;padding:.55rem 1.1rem}
  /* Anfrage und Bestellung als Blatt von unten, wie eine App */
  .anfrage-dialog{width:100%;max-width:none;max-height:min(92%,52rem);margin:auto 0 0;border-radius:22px 22px 0 0;border-bottom:0}
  .anfrage-dialog-innen{padding-bottom:calc(1.6rem + env(safe-area-inset-bottom,0px))}

  .anlaesse{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-gap)}
  /* Zweierraster bleibt bis 480 px, vier Punkte untereinander wurden mit den
     Haarlinien zu einer langen Liste. */
  .herkunft-reihe{row-gap:.9rem}

  .ueber-grid{grid-template-columns:1fr;gap:var(--s-block)}
  .ueber-bild{order:-1}
  .ueber-inner{max-width:none}
  /* Der Bogen dahinter braucht auf schmalen Schirmen weniger Versatz,
     sonst schiebt er sich ueber den Rand */
  .ueber .ueber-bild::before{inset:-.85rem -.85rem .8rem}
  .ueber .ueber-bild img{height:clamp(18rem,13rem + 22vw,25rem)}

  .seiten-hero-grid{grid-template-columns:1fr;gap:var(--s-block)}
  .seiten-hero-media{order:-1}
  .anlass-karten-grid{grid-template-columns:1fr}
  .anlass-karten-grid[data-anzahl="3"]{grid-template-columns:1fr}
  .brotliste{grid-template-columns:1fr}
  .kat-kachel{flex-basis:calc((100% - var(--s-gap)) / 2)}
  .galerie{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ablauf-grid{grid-template-columns:1fr;row-gap:var(--s-block)}

  .formular{padding:1.75rem}
  .footer-grid{grid-template-columns:1fr 1fr;row-gap:1.6rem;column-gap:1.6rem}
}


@media (max-width:480px){
  .herkunft-reihe{grid-template-columns:1fr;gap:.6rem}
  .herkunft-punkt::before,.herkunft-punkt:nth-child(even)::before{content:none}
  .herkunft-punkt{padding-inline:.2rem}
  .sortiment{grid-template-columns:1fr}
  .kat-kachel{flex-basis:100%}
  .galerie{grid-template-columns:1fr}
  .features-grid{grid-template-columns:1fr}
  /* Untereinander braucht es keine senkrechte Trennlinie mehr,
     den Absatz macht der feine Strich ueber jeder Ueberschrift */
  .feature + .feature::before{content:none}
  /* row-gap ist 0 (siehe Subgrid), deshalb hier der Abstand zwischen den Karten */
  .feature + .feature{margin-top:var(--s-block)}
  .footer-unten{flex-direction:column;align-items:flex-start;gap:1rem;text-align:left}
  .newsletter-form .btn{width:100%;text-align:center}
  .hero .btn,.abschluss .btn,.brottag-cta .btn{width:100%;text-align:center}
  .brot-buehne{width:100%}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem}
  .footer-marke{grid-column:1 / -1}
  /* Erreichbarkeit ueber die volle Breite: sonst steht die Spalte allein in der
     letzten Zeile und Uhrzeit wie Telefonnummer brechen auf halber Breite um */
  .footer-erreichbar{grid-column:1 / -1}
  .footer-erreichbar .footer-kontaktliste{grid-template-columns:1fr}
}

@media (max-width:380px){
  .brand-name{font-size:1.1rem}
  .brand img{height:42px;width:42px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms;animation-duration:.01ms}
}

@media print{
  .nav,.footer,.abschluss{display:none}
  body{background:#fff}
}

/* ============================================================ Anfrage-Pop-up
   Das Formular oeffnet sich ueber der Seite, statt sie zu verlassen. Der
   Kasten nutzt <dialog>, damit Fokusfalle, Escape und der Hintergrund-Klick
   vom Browser kommen und nicht selbst gebaut werden muessen. */
.anfrage-dialog{
  /* Prozent statt dvh: dvh rechnet gegen die grosse Ansichtsflaeche, dadurch
     stand der Kasten am Handy 28 Pixel unter dem Bildschirmrand und der
     Absenden-Knopf lag ausserhalb. Prozent bezieht sich beim modalen Dialog
     auf genau den Bereich, in dem er auch sitzt. */
  width:min(100% - 2rem,34rem);max-height:min(90%,52rem);
  padding:0;border:1px solid var(--linie);border-radius:22px;
  background:var(--creme-hell);color:var(--braun-mittel);
  box-shadow:var(--schatten-xl);
  overflow:auto;overscroll-behavior:contain
}
.anfrage-dialog::backdrop{
  background:rgba(58,47,38,.42);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)
}
.anfrage-dialog-innen{
  position:relative;
  padding:clamp(1.6rem,1.1rem + 2.2vw,2.6rem)
}
.anfrage-dialog-innen h2{
  font-size:var(--t-h3);margin:.5rem 0 .55rem
}
/* Auf der Kontaktseite ist das Formular eine eigene Karte. Im Pop-up ist der
   Kasten schon die Karte, sonst steckt eine Box in der naechsten. */
.anfrage-dialog .formular{
  background:none;border-radius:0;padding:0;box-shadow:none
}
.anfrage-dialog-lead{
  font-size:var(--t-body-s);color:var(--muted);
  margin-bottom:clamp(1.2rem,.9rem + 1.2vw,1.7rem)
}
/* Trefferflaeche 44 Pixel, auch wenn das Kreuz kleiner aussieht. */
.anfrage-dialog-zu{
  position:absolute;top:.75rem;right:.75rem;z-index:2;
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border:0;border-radius:50%;
  background:transparent;color:var(--muted);cursor:pointer;
  transition:background .2s ease,color .2s ease
}
.anfrage-dialog-zu .sym{width:1.15rem;height:1.15rem}
.anfrage-dialog-zu:hover{background:var(--sand);color:var(--braun)}
/* The general focus rule sets border-radius:2px, which turned the round
   cross into a square box in Safari. The ring stays round. */
.anfrage-dialog-zu:focus-visible{border-radius:50%;outline-offset:2px}
/* Focus target when the dialog has no field (pause, thank-you), see main.js */
.anfrage-dialog-innen h2:focus-visible{outline:0}

/* Message instead of form (pause, empty assortment, thank-you): the whole
   card is centered, header included. Before, the header stood left above a
   centered message. The form itself stays left aligned. */
.anfrage-dialog-innen:has(.brot-leer, .anfrage-fertig){text-align:center}
.anfrage-dialog-innen:has(.brot-leer, .anfrage-fertig) :is(h2, .anfrage-dialog-lead){text-wrap:balance}
/* Same room on both sides as the cross takes on the right, so the centered
   title never runs under it (at 320 px it wraps into two even lines). */
.anfrage-dialog-innen:has(.brot-leer, .anfrage-fertig) :is(.eyebrow, h2){padding-inline:2rem}
/* The card padding already closes the notice off; its own bottom padding
   left about 20 px more room below than above the header. */
.anfrage-dialog .brot-leer{padding-bottom:0}

/* Auftakt beim Oeffnen. Ohne @starting-style zeigt der Browser den Kasten
   einfach sofort, das ist kein Verlust. */
/* Bewusst NUR Deckkraft, keine Verschiebung. Eine Animation, die nicht
   anlaeuft, haelt ihr Startbild fest; bei einer Verschiebung sass der Kasten
   dann dauerhaft 28 Pixel zu tief und der Absenden-Knopf lag unter dem
   Bildschirmrand. Bei Deckkraft kann selbst ein haengender Lauf die Position
   nicht verfaelschen. Genau wie bei den Einblendern beim Scrollen. */
@media (prefers-reduced-motion:no-preference){
  .anfrage-dialog[open]{animation:anfrage-auf .28s ease}
  .anfrage-dialog[open]::backdrop{animation:anfrage-schleier .28s ease}
}
@keyframes anfrage-auf{from{opacity:0}to{opacity:1}}
@keyframes anfrage-schleier{from{opacity:0}to{opacity:1}}

/* Auf dem Handy von unten hereinfahren und die volle Breite nutzen. */
/* -------------------------------------------------- Abweichung vom Satz: 600px
   Der feste Satz ist 1024 / 768 / 480 / 380. Hier steht bewusst 600 dazwischen,
   bei 520px waeren zwei Anlass-Karten nur noch 230px breit,
   dafuer reicht der Platz neben dem Bild nicht. Bei 680px sind es 308px und es
   passt. Der Umbruch liegt also wirklich in diesem Bereich, ein fluider Wert
   loest das nicht, weil es ein Layoutwechsel ist und keine Skalierung.
   Beide Regeln stehen hier zusammen, damit es bei diesem einen Ausreisser
   bleibt und nicht wieder drei verstreute Bloecke werden. */
@media (max-width:600px){
  /* Darunter ist neben dem Bild kein Platz mehr fuer den Text */
  .anlaesse{grid-template-columns:1fr;gap:var(--s-gap)}
  .anlaesse[data-anzahl="3"]{grid-template-columns:1fr}
  .anlaesse[data-anzahl="3"] .anlass:last-child{grid-column:auto}

  /* Pop-up als Blatt von unten, fest an der Unterkante, damit der Knopf am
     Ende des Formulars immer im Bild bleibt. */
  .anfrage-dialog{
    inset:auto 0 0 0;margin:0;
    width:100%;max-width:100%;max-height:92%;
    border-radius:22px 22px 0 0;border-bottom:0
  }
}

/* ==================================================== Kennzeichnung KI-Bilder
   Sitzt am Bild und nicht im Impressum, so verlangt es KI-VO Art. 50. Der
   Wortlaut sagt zusaetzlich, dass es KEIN Produktfoto ist: eine blosse
   KI-Kennzeichnung wuerde die Irrefuehrung nach § 5 UWG nicht heilen, solange
   das Bild neben Name, Zutaten und Preis wie Paulines Ware wirkt.
   Faellt automatisch weg, sobald das Bild ersetzt ist. */
.bild-mit-hinweis{position:relative;display:block}
.bild-mit-hinweis > img{display:block;width:100%}
.ki-hinweis{
  position:absolute;left:.6rem;bottom:.6rem;z-index:2;
  padding:.3rem .6rem;border-radius:999px;
  background:rgba(58,47,38,.72);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  font-family:var(--mono);
  /* Fluid statt in einer Media Query korrigiert: eine Schriftgroesse ist
     eine Skalierung, kein Layoutwechsel. */
  font-size:clamp(.55rem,.5rem + .2vw,.62rem);
  letter-spacing:clamp(.05em,.04em + .1vw,.08em);
  text-transform:uppercase;color:#fff;line-height:1.3;
  white-space:nowrap;pointer-events:none
}
/* Der Freisteller hat keine Bildkante, auf die sich eine Ecke beziehen koennte.
   Dort steht der Hinweis unter dem Motiv statt darauf, sonst liegt er mitten
   im Brot und bricht um. */
.seiten-hero-freisteller .ki-hinweis{
  left:50%;bottom:auto;top:100%;transform:translate(-50%,.5rem);
  background:var(--sand);color:var(--braun-mittel);
  -webkit-backdrop-filter:none;backdrop-filter:none
}
/* Im Bildband steht direkt unter dem Bild schon die Bildunterschrift. Ein
   schwebender Hinweis lag darueber, deshalb hier im normalen Fluss. */
.bildband .bild-mit-hinweis{display:block;text-align:center}
.bildband .ki-hinweis{
  position:static;display:inline-block;margin-top:.75rem;
  background:var(--sand);color:var(--braun-mittel);
  -webkit-backdrop-filter:none;backdrop-filter:none
}
.bildband-figur figcaption{margin-top:.55rem}

/* Sichtbar offener Punkt statt einer Verknuepfung ins Leere. Betrifft in der
   Vorschau die Telefonnummer, solange der Platzhalter drinsteht. */
.offen{
  font-family:var(--mono);font-size:.9em;letter-spacing:.04em;
  color:var(--muted);border-bottom:1px dashed currentColor
}
.footer .offen{color:var(--auf-salbei-2)}

/* ============================================== Anfrage in drei Schritten
   Ohne JavaScript stehen alle Schritte untereinander, dann ist es ein ganz
   normales Formular. Die Klasse mehrschritt-an setzt erst das Skript. */
.schritt{border:0;margin:0;padding:0;min-width:0}
.schritt-titel{
  padding:0;margin-bottom:1.1rem;
  font-family:var(--serif);font-size:var(--t-h4);color:var(--braun)
}
.mehrschritt:not(.mehrschritt-an) .schritt + .schritt{margin-top:var(--s-block)}
.mehrschritt:not(.mehrschritt-an) .schritt-anzeige{display:none}

.schritt-anzeige{
  display:flex;gap:.4rem;list-style:none;margin:0 0 1.4rem;padding:0
}
.schritt-anzeige li{
  height:3px;flex:1;border-radius:999px;background:var(--linie);
  transition:background .35s ease
}
.schritt-anzeige li.jetzt,
.schritt-anzeige li.erledigt{background:var(--salbei-tief)}

.schritt-steuerung{
  display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;margin-top:1.6rem
}
/* Zurueck bleibt links, die vorwaertsfuehrende Schaltflaeche rechts.
   So liegt der Daumen immer an derselben Stelle. */
.schritt-steuerung .schritt-weiter,
.schritt-steuerung .schritt-senden{margin-left:auto}

@media (max-width:480px){
  /* Zwei Knoepfe nebeneinander passen hier nicht mehr, ohne dass die
     Beschriftung umbricht. */
  /* Untereinander statt nebeneinander, und die fuehrende Schaltflaeche
     unten, wo der Daumen ohnehin liegt. */
  .schritt-steuerung{flex-direction:column;align-items:stretch}
  .schritt-steuerung .btn{width:100%}
  .schritt-steuerung .schritt-weiter,
  .schritt-steuerung .schritt-senden{margin-left:0}
}

/* ------------------------------------------- Abschluss nach dem Absenden
   Ersetzt das Formular, statt eine Meldung darueber zu setzen. Ein wieder
   leeres Formular unter einer Erfolgsmeldung liest sich, als waere nichts
   passiert, und laedt sofort zur zweiten Anfrage ein. */
.anfrage-fertig{
  display:grid;justify-items:center;text-align:center;gap:.55rem;
  padding:clamp(1.5rem,1rem + 2vw,2.6rem) 0
}
.anfrage-fertig-kreis{
  display:grid;place-items:center;
  width:3.4rem;height:3.4rem;border-radius:50%;
  background:var(--salbei-tief);color:var(--creme);
  margin-bottom:.5rem
}
.anfrage-fertig-kreis .sym{width:1.5rem;height:1.5rem}
.anfrage-fertig-titel{
  font-family:var(--serif);font-size:var(--t-h4);color:var(--braun)
}
.anfrage-fertig-text{
  font-size:var(--t-body-s);line-height:1.65;color:var(--braun-mittel);
  max-width:38ch;text-wrap:balance
}
.anfrage-fertig .btn{margin-top:1rem}

/* ------------------------------------------------ Seite Brottag-Erinnerung */
.newsletter-seite .rechts-karte{text-align:center}
.newsletter-titel{font-size:var(--t-h2s);margin:.6rem 0 .8rem}
.newsletter-text{
  font-size:var(--t-body);line-height:1.65;color:var(--braun-mittel);
  max-width:46ch;margin:0 auto 1.6rem;text-wrap:balance
}
.newsletter-form--seite{max-width:30rem;margin:0 auto 1rem}
.newsletter-seite .formular-hinweis{max-width:46ch;margin:1rem auto 0}

/* ======================================================= Brot-Vorbestellung
   Jede Zeile: Name und Beschreibung links, Mengenwaehler rechts. Die Zeilen
   sind gleich hoch, egal ob ein Preis dasteht oder nicht, sonst wackelt die
   Liste je nachdem, was Pauline gepflegt hat. */
.brot-wahl{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.brot-zeile{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem 0;border-bottom:1px solid var(--linie)
}
.brot-zeile:last-child{border-bottom:0}
.brot-zeile-text{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.brot-zeile-text label{
  font-family:var(--serif);font-size:var(--t-h5);color:var(--braun);cursor:pointer
}
.brot-zeile-text > span{font-size:var(--t-small);color:var(--muted);line-height:1.45}
.brot-zeile-preis{
  font-family:var(--mono);font-size:var(--t-mono);font-weight:400;
  letter-spacing:.04em;color:var(--braun-akzent);margin-top:.2rem
}
.brot-zeile-preis small{color:var(--muted);letter-spacing:0}
/* Kleine Vorschau je Brot, sobald Fotos da sind (Bogenform wie in der Sortimentsliste) */
.brot-zeile-bild{flex:0 0 3.6rem;width:3.6rem;height:3.6rem;border-radius:50% 50% 50% 50% / 38% 38% 38% 38%;background:var(--sand);overflow:hidden}
.brot-zeile-bild img{display:block;width:100%;height:100%;object-fit:cover}
.brot-wahl--bilder .brot-zeile-text{flex:1 1 auto}

.menge{display:inline-flex;align-items:center;flex:0 0 auto;
  border:1px solid var(--linie);border-radius:999px;background:var(--creme-hell)}
.menge-knopf{
  width:2.6rem;height:2.6rem;border:0;background:none;cursor:pointer;
  font-size:1.3rem;line-height:1;color:var(--braun-akzent);border-radius:999px;
  transition:background .2s ease,color .2s ease
}
.menge-knopf:hover{background:var(--sand);color:var(--braun)}
.menge-feld{
  width:2.4rem;text-align:center;border:0;background:none;padding:0;
  font-family:var(--serif);font-size:var(--t-h5);color:var(--braun);
  -moz-appearance:textfield
}
.menge-feld::-webkit-outer-spin-button,.menge-feld::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.menge-feld:focus-visible{outline:2px solid var(--braun-akzent);outline-offset:2px;border-radius:6px}

.brot-summe{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--braun-akzent);
  font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.08em;
  text-transform:uppercase;color:var(--braun-mittel)
}
.brot-summe b{font-family:var(--serif);font-size:var(--t-h5);text-transform:none;letter-spacing:0;color:var(--braun)}
.brot-wahl-hinweis{margin-top:.8rem;font-size:var(--t-small);color:#7a3b31}
.brot-leer{font-size:var(--t-body-s);line-height:1.6;color:var(--braun-mittel);text-align:center;padding:1rem 0}

/* Abholtermin als zwei grosse Wahlkarten */
.termin-wahl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;margin-bottom:1.2rem}
.termin-wahl--eins{grid-template-columns:minmax(0,1fr)}   /* one Saturday at a time */
.termin{position:relative;cursor:pointer}
.termin input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer}
.termin > span{
  display:flex;flex-direction:column;gap:.2rem;padding:.95rem 1rem;
  border:1px solid var(--linie);border-radius:14px;background:var(--creme-hell);
  transition:border-color .2s ease,background .2s ease
}
.termin > span b{font-family:var(--serif);font-weight:400;font-size:var(--t-h5);color:var(--braun)}
.termin > span small{font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.termin input:checked + span{border-color:var(--salbei-tief);background:var(--sand)}
.termin input:focus-visible + span{outline:2px solid var(--braun-akzent);outline-offset:2px}

.haken{display:flex;align-items:flex-start;gap:.65rem;margin:1rem 0 .4rem;cursor:pointer;
  font-size:var(--t-body-s);color:var(--braun-mittel);line-height:1.5}
.haken input{width:1.15rem;height:1.15rem;margin-top:.15rem;accent-color:var(--salbei-tief);flex:0 0 auto}
.feld label em{font-style:normal;font-weight:400;color:var(--muted);text-transform:none;letter-spacing:0}

@media (max-width:480px){
  .termin-wahl{grid-template-columns:1fr}
  .brot-zeile{gap:.6rem}
  /* Mit Foto reicht die Breite nicht fuer Bild, Text und Zaehler nebeneinander:
     Zaehler rueckt unter den Text, rechtsbuendig, das Bild bleibt links */
  .brot-wahl--bilder .brot-zeile{display:grid;grid-template-columns:3.4rem minmax(0,1fr);grid-template-areas:"bild text" "bild menge";column-gap:.85rem;row-gap:.55rem;align-items:start}
  .brot-wahl--bilder .brot-zeile-bild{grid-area:bild;width:3.4rem;height:3.4rem}
  .brot-wahl--bilder .brot-zeile-text{grid-area:text}
  .brot-wahl--bilder .menge{grid-area:menge;justify-self:end}
}

/* Querverweise am Fuss der Anlass-Seiten: leise Pillen unter dem Knopf */
.andere-anlaesse{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.6rem;
  margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid rgba(120,96,66,.18);
  font-size:var(--t-small);color:var(--muted)
}
.andere-anlaesse span{font-style:italic;margin-right:.2rem}
.andere-anlaesse a{
  display:inline-flex;align-items:center;min-height:2.25rem;padding:0 1rem;
  border:1px solid rgba(120,96,66,.35);border-radius:999px;
  color:var(--braun-akzent);text-decoration:none;
  transition:background-color .2s,border-color .2s
}
.andere-anlaesse a:hover,.andere-anlaesse a:focus-visible{background:rgba(120,96,66,.08);border-color:var(--braun-akzent)}
/* Umgebrochen standen die Links je nach Namenslaenge als 3 + 1 oder
   2 + 1 + 1, mit Einzelgaengern. Tablet: Zweierraster, bei ungerader Zahl
   nimmt der letzte die ganze Zeile. Handy: eine Spalte, alle gleich breit. */
@media (max-width:768px){
  .andere-anlaesse{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;max-width:30rem;margin-inline:auto}
  .andere-anlaesse span{grid-column:1 / -1;margin:0 0 .1rem;text-align:center}
  .andere-anlaesse a{min-height:44px;justify-content:center;text-align:center}
  .andere-anlaesse a:last-child:nth-child(even){grid-column:1 / -1}
}
@media (max-width:480px){
  .andere-anlaesse{grid-template-columns:1fr;max-width:20rem}
}
.faq-weiter{font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:.1em;text-transform:uppercase;
  color:var(--braun-akzent);text-decoration:none;display:inline-flex;align-items:center;min-height:24px}

/* =============================================== Flaechen mit Charakter
   Sand- und Salbeiflaechen waren reine Farbe. Drei leise Elemente, alle als
   Hintergrundebene oder Pseudoelement ohne Markup und ohne Bilddatei:
   Papierkorn auf Sand, Haarlinien-Innenrahmen und Aehren-Wasserzeichen auf
   Salbei. Alles nur Hintergrund, deshalb keine Stapelprobleme mit Inhalt. */
:root{
  /* Fraktales Rauschen, per Farbmatrix in Braun mit rund 6 % Deckung gefaerbt */
  --korn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .23 0 0 0 0 .18 0 0 0 0 .15 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 1. Papierkorn auf allen Sandflaechen */
.hero,.seiten-hero,.ablauf,.zitat,.kontakt-kopf,.kontakt-body,.sortiment-band,.abschluss--sand{
  background-image:var(--korn)
}

/* 2. Haarlinien-Innenrahmen auf den Salbeiflaechen, wie eine Menuekarte */
.herkunft > .wrap{position:relative}
.band-salbei::before{
  content:"";position:absolute;inset:14px;border:1px solid rgba(250,245,236,.16);
  border-radius:12px;pointer-events:none
}
.band-salbei::before{inset:18px 18px 18px 18px;border-radius:0}

/* 3. Die Aehren-Strichzeichnung ist dem Schattenspiel gewichen (Abschnitt
   "Schattenspiel" am Ende). */
@media (max-width:768px){
  /* Auf dem Handy liegen die Karten fast am Rand: Rahmen enger,
     sonst schneidet die Linie die Karten. */
  .band-salbei::before{inset:8px}
}

/* Ablauf: die vier Karten stehen schmal auf einer breiten Sandflaeche, links
   und rechts war nichts. Drei Hintergrundelemente, alle hinter dem Inhalt:
   links eine grosse Aehre in Braun, rechts ein weicher Kreis wie im Hero,
   dazwischen eine Haarlinie, die die Schrittzahlen verbindet. */
:root{
}
.ablauf{position:relative;overflow:hidden;background-image:var(--korn)}
.ablauf::before{
  content:"";position:absolute;right:-140px;top:-120px;width:460px;height:460px;
  border-radius:50%;background:radial-gradient(circle,var(--creme) 0 54%,transparent 72%);opacity:.26;pointer-events:none
}
.ablauf > .wrap{position:relative;z-index:1}
/* Haarlinie hinter den Karten, sie verbindet die Schrittzahlen */
.zeitleiste{position:relative}
.zeitleiste::before{
  content:"";position:absolute;top:1rem;bottom:1rem;
  left:clamp(2.2rem,1.5rem + 2vw,3.3rem);width:1px;
  background:rgba(120,96,66,.28);pointer-events:none
}
.zeitleiste-punkt{position:relative;z-index:1}
@media (max-width:768px){
  .ablauf::before{width:300px;height:300px;right:-120px;top:-100px}
  .zeitleiste::before{display:none}
}


/* ================================================================ Bewegung
   Ein Mechanismus fuer alle Sektionen. Ein Element startet leicht abgesenkt
   und durchsichtig; main.js setzt .sichtbar, sobald es in den Blick kommt,
   und danach .angekommen, sobald der Uebergang durch ist. Ab dann gilt keine
   Regel von hier mehr, Hover-Effekte der Elemente laufen wieder normal.
   Reihenfolge ueber --verzug (Geschwister zaehlt das Skript durch).
   Nur opacity und transform, nichts im Layout.
   Notfall: laedt main.js nicht, blendet die Animation unten alles nach drei
   Sekunden von selbst ein (html.js ohne .bewegt). */
.js :is(.features-kopf,.feature,.band-kopf,.anlass,.band-cta,.herkunft > .wrap,.bildband-figur,
  .sortiment-head,.brot,.brottag-cta,.brottag-schluss,.kontaktband-kopf,.kontaktkarte,.newsletter-form,
  .abschluss .wrap > *,.footer-spalte,.ablauf-kopf,.galerie-stueck,.galerie-mehr,.anlass-text-kopf,
  .anlass-text-karte,.zeitleiste-punkt,.faq-eintrag,.kat-kachel,.ueber-bild,.ueber-text,.meister-karte,
  .zitat p,.kontakt-grid > *,.termin,.anlass-karte,.rechts-karte):not(.sichtbar){opacity:0;transform:translateY(18px)}
.js :is(.features-kopf,.feature,.band-kopf,.anlass,.band-cta,.herkunft > .wrap,.bildband-figur,
  .sortiment-head,.brot,.brottag-cta,.brottag-schluss,.kontaktband-kopf,.kontaktkarte,.newsletter-form,
  .abschluss .wrap > *,.footer-spalte,.ablauf-kopf,.galerie-stueck,.galerie-mehr,.anlass-text-kopf,
  .anlass-text-karte,.zeitleiste-punkt,.faq-eintrag,.kat-kachel,.ueber-bild,.ueber-text,.meister-karte,
  .zitat p,.kontakt-grid > *,.termin,.anlass-karte,.rechts-karte).sichtbar:not(.angekommen){
  opacity:1;transform:none;
  transition:opacity .75s cubic-bezier(.2,.65,.2,1) var(--verzug,0ms),
    transform .75s cubic-bezier(.2,.65,.2,1) var(--verzug,0ms)
}
.js:not(.bewegt) :is(.features-kopf,.feature,.band-kopf,.anlass,.band-cta,.herkunft > .wrap,.bildband-figur,
  .sortiment-head,.brot,.brottag-cta,.brottag-schluss,.kontaktband-kopf,.kontaktkarte,.newsletter-form,
  .abschluss .wrap > *,.footer-spalte,.ablauf-kopf,.galerie-stueck,.galerie-mehr,.anlass-text-kopf,
  .anlass-text-karte,.zeitleiste-punkt,.faq-eintrag,.kat-kachel,.ueber-bild,.ueber-text,.meister-karte,
  .zitat p,.kontakt-grid > *,.termin,.anlass-karte,.rechts-karte):not(.sichtbar){animation:auf-notfall .6s ease 3s forwards}
@keyframes auf-notfall{to{opacity:1;transform:none}}

/* Unterseiten-Hero: Zeilen nacheinander, wie auf der Startseite */
.js .seiten-hero .wrap > :not(.seiten-hero-grid),.js .seiten-hero-grid > *{animation:hero-auf .7s ease both}
.js .seiten-hero-grid > :nth-child(2){animation-delay:.18s}
.js .seiten-hero .wrap > :nth-child(2){animation-delay:.12s}
.js .seiten-hero .wrap > :nth-child(3){animation-delay:.22s}
/* Siegel springt nach dem Bild auf */
.js .siegel{animation:siegel-auf .6s cubic-bezier(.3,1.35,.5,1) .55s both,siegel-schwebt 6s ease-in-out 1.4s infinite}
/* scale und translate statt transform, damit Aufspringen und Schweben sich
   nicht gegenseitig ueberschreiben (transform kann nur eine Animation) */
@keyframes siegel-auf{from{opacity:0;scale:.7}to{opacity:1;scale:1}}
@keyframes siegel-schwebt{0%,100%{translate:0 0}50%{translate:0 -5px}}

/* Schrittlinie zeichnet sich, sobald die Liste im Blick ist */
.js .zeitleiste::before{transform:scaleY(0);transform-origin:top;transition:transform 1.4s cubic-bezier(.2,.65,.2,1) .3s}
.js .zeitleiste.sichtbar::before{transform:none}

/* Herkunft: die Kreise springen nacheinander auf */
.js .herkunft-kreis{opacity:0;transform:scale(.55);
  transition:opacity .5s ease var(--verzug,0ms),transform .6s cubic-bezier(.3,1.35,.5,1) var(--verzug,0ms)}
.js .herkunft-punkt.sichtbar .herkunft-kreis{opacity:1;transform:none}

/* Pop-up: Kasten kommt leicht von unten, Schritte wechseln weich,
   die Erfolgsmeldung springt auf. Ohne Fuellmodus: bleibt eine Animation
   haengen, steht das Element einfach normal da. */
@media (prefers-reduced-motion:no-preference){
  .anfrage-dialog[open] .anfrage-dialog-innen{animation:dialog-innen .4s cubic-bezier(.2,.65,.2,1)}
  .mehrschritt-an .schritt{animation:schritt-auf .35s cubic-bezier(.2,.65,.2,1)}
  .anfrage-fertig{animation:hero-auf .5s ease}
  .anfrage-fertig-kreis{animation:siegel-auf .55s cubic-bezier(.3,1.4,.5,1)}
}
@keyframes dialog-innen{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@keyframes schritt-auf{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.sendet button[type="submit"]{opacity:.75}

@media (prefers-reduced-motion:reduce){
  .js :is(.features-kopf,.feature,.band-kopf,.anlass,.band-cta,.herkunft > .wrap,.bildband-figur,
  .sortiment-head,.brot,.brottag-cta,.brottag-schluss,.kontaktband-kopf,.kontaktkarte,.newsletter-form,
  .abschluss .wrap > *,.footer-spalte,.ablauf-kopf,.galerie-stueck,.galerie-mehr,.anlass-text-kopf,
  .anlass-text-karte,.zeitleiste-punkt,.faq-eintrag,.kat-kachel,.ueber-bild,.ueber-text,.meister-karte,
  .zitat p,.kontakt-grid > *,.termin,.anlass-karte,.rechts-karte){opacity:1;transform:none;transition:none;animation:none}
  .js .seiten-hero .wrap > *,.js .seiten-hero-grid > *,.js .siegel{animation:none}
  .js .zeitleiste::before,.js .herkunft-kreis{transform:none;opacity:1;transition:none}
  .nav{transition:none}
}


/* ============================================================ Tiefe im Hero
   Fuenf Griffe, alle leise: Licht statt Flaeche, zwei Deko-Ebenen mit
   eigener Geschwindigkeit (--p aus main.js, 0 bis 1 ueber die Hero-Hoehe),
   eine zweite Bogenkante hinter dem Bild, ein Bild, das auf der Seite steht
   (Kontakt- plus Umgebungsschatten, heller Saum oben), und ein Siegel, das
   schwebt. Nur Hintergruende, Pseudoelemente und transform. */

/* Licht: Creme-Saum hinter dem Text, Ecke rechts unten einen Hauch tiefer */
.hero,.seiten-hero{
  background-image:
    radial-gradient(ellipse 62% 70% at 16% 28%,rgba(250,245,236,.85),rgba(250,245,236,0) 70%),
    radial-gradient(ellipse 55% 60% at 100% 100%,rgba(212,190,160,.42),rgba(212,190,160,0) 70%),
    var(--korn)
}

/* Ebenen: Salbei-Kreis (::after, vorhanden) faehrt nach oben, die neue
   Sand-tief-Form (::before) langsam nach unten. Inhalt liegt darueber. */
.hero > .wrap,.seiten-hero > .wrap{position:relative;z-index:1}
/* Die Sand-tief-Form haengt als groesserer Halo hinter dem Salbei-Kreis,
   gleiche Mitte, etwas tiefer. Beim Scrollen faehrt der Kreis nach oben,
   der Halo nach unten, die beiden loesen sich sichtbar voneinander.
   Links unten stand die Form vorher versetzt zum Kreis der naechsten
   Sektion, das sah nach Zufall aus. */
.hero::before,.seiten-hero::before{
  content:"";position:absolute;right:-160px;top:-180px;width:680px;height:680px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(250,245,236,.8) 0,rgba(250,245,236,.38) 34%,rgba(250,245,236,0) 66%);
  transform:translate3d(0,calc(var(--p,0) * 28px),0);will-change:transform
}

/* Zweite Bogenkante und Bild als Objekt */
.hero-media,.seiten-hero-media{position:relative;isolation:isolate}
.hero-media img,.seiten-hero-media img{
  display:block;
  box-shadow:0 44px 70px -40px rgba(58,47,38,.48),0 14px 28px -18px rgba(58,47,38,.3)
}
.hero-media::before,.seiten-hero-media::before{
  content:"";position:absolute;inset:0;border-radius:230px 230px 33px 33px;
  border:1px solid rgba(120,96,66,.22);transform:translate(18px,18px);
  z-index:-1;pointer-events:none
}
.hero-media::after,.seiten-hero-media::after{
  content:"";position:absolute;inset:0;border-radius:230px 230px 33px 33px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);pointer-events:none
}
/* Der Bogen wird mit dem Bild eingeblendet; die Kante soll etwas spaeter
   nachkommen, damit man die zweite Ebene als solche liest. */
.js .hero-media::before,.js .seiten-hero-media::before{animation:kante-nach .9s ease .5s both}
@keyframes kante-nach{from{opacity:0;transform:translate(6px,6px)}to{opacity:1;transform:translate(18px,18px)}}

/* Siegel liegt sichtbar ueber dem Bild */
.siegel{box-shadow:0 22px 44px -20px rgba(58,47,38,.5),0 6px 14px -6px rgba(58,47,38,.22)}

@media (max-width:768px){
  .hero::before,.seiten-hero::before{width:420px;height:420px;right:-160px;top:-160px}
  .hero-media::before,.seiten-hero-media::before{transform:translate(12px,12px)}
  @keyframes kante-nach{from{opacity:0;transform:translate(4px,4px)}to{opacity:1;transform:translate(12px,12px)}}
}
@media (prefers-reduced-motion:reduce){
  .hero::before,.seiten-hero::before{transform:none}
  .js .hero-media::before,.js .seiten-hero-media::before{animation:none}
}


/* Handwerk (Startseite): war einen Tick eng und textlastig. Mehr Luft oben
   und unten, breiterer Kopf (Leitsatz auf zwei Zeilen), je Spalte ein
   Zeichen im Sandkreis als Anker, weiterer Spaltenabstand.
   Spaltenabstand und Innenrand etwas enger, damit ein
   laengerer Titel wie "Frisch fuer dich gefertigt" auf eine Zeile passt
   (Pauline). row-gap muss 0 bleiben, sonst zieht das Subgrid die Karte
   auseinander; die Abstaende darin machen die Margins der Elemente. */
.features{padding-block:clamp(4rem,3rem + 4vw,7.5rem)}
.features-kopf{max-width:48rem;margin-bottom:clamp(3rem,2rem + 3.5vw,5rem)}
.features-lead{max-width:44rem}
.features-grid{column-gap:clamp(1.75rem,1rem + 2.6vw,3.25rem);row-gap:0}
.feature + .feature::before{left:calc(clamp(1.75rem,1rem + 2.6vw,3.25rem) / -2)}
.feature{padding:0 clamp(.4rem,.2rem + .8vw,1.1rem)}
.feature-kreis{
  width:3.6rem;height:3.6rem;border-radius:50%;margin:0 auto 1.1rem;
  display:grid;place-items:center;background:var(--sand);box-shadow:var(--schatten-s)
}
.feature-zeichen{width:1.55rem;height:1.55rem;color:var(--salbei-icon)}
.feature h3{margin-top:1rem}
.feature p{max-width:28ch;line-height:1.65}
@media (max-width:768px){
  .features{padding-block:clamp(3rem,2rem + 4vw,4.5rem)}
  .feature-kreis{width:3.2rem;height:3.2rem}
}


/* ============================================================ Tiefe der Seite
   Tiefe entsteht nicht durch gestapelte Scheiben, sondern durch Licht,
   Unschaerfe und Ebenen, die aufeinander liegen. Drei Mittel, ueberall gleich:
   1. Alle Deko-Kreise haben weiche Raender (radial-gradient statt Flaeche):
      sie liegen wie unscharfes Licht hinter dem scharfen Inhalt, nicht wie
      Aufkleber darauf. Der Halo im Hero ist jetzt reines Licht.
   2. Die getoenten Flaechen (Sand, Sand-tief, Salbei) liegen wie Papier auf
      dem Creme-Grund und werfen einen weichen Schatten auf die naechste
      Sektion (z-index ueber dem Nachbarn, Schatten nach unten).
   3. Salbei-Flaechen bekommen oben einen Hauch Licht, der Fuss oben einen
      Hauch Schatten (inset-Schatten, keine zusaetzlichen Ebenen). */
.hero,.seiten-hero{z-index:2;box-shadow:0 26px 50px -36px rgba(58,47,38,.3)}
.band-salbei{z-index:2;box-shadow:0 36px 60px -34px rgba(40,52,38,.5),inset 0 70px 90px -70px rgba(255,255,255,.09)}
.ablauf{z-index:2;box-shadow:0 30px 56px -36px rgba(58,47,38,.32)}
.sortiment-band,.abschluss--sand,.kontakt-kopf,.kontakt-body{position:relative}
.abschluss--sand{z-index:2;box-shadow:0 30px 56px -36px rgba(58,47,38,.3)}
@media (prefers-reduced-motion:reduce){ .hero::before,.seiten-hero::before{transform:none} }


/* ============================================================ Schattenspiel
   Vier Schatten von Weizen und Wiesenblumen (Alpha-WebP, KI-generiert und
   in Alpha umgerechnet), als laege vor dem Fenster der Backstube ein Feld.
   Sie verhalten sich wie Licht: eine Richtung (oben rechts, wie im
   Hero-Foto), angeschnitten statt mittig, multiply auf jeder Flaeche.
   Beim Scrollen laufen sie langsamer als der Inhalt (--q aus main.js, 0 bis 1
   ueber den Weg der Sektion durch den Blick) und wiegen sich kaum sichtbar,
   als stuende Wind im Feld. translate und rotate als getrennte Eigenschaften,
   damit Parallaxe und Wiegen sich nicht ueberschreiben. */
.schatten{
  position:absolute;z-index:0;pointer-events:none;mix-blend-mode:multiply;
  background-repeat:no-repeat;background-size:contain;
  translate:0 calc(var(--q,0) * -36px);
  animation:schatten-wiegt 11s ease-in-out infinite alternate;
  will-change:translate,rotate
}
@keyframes schatten-wiegt{from{rotate:-1.1deg}to{rotate:1.1deg}}
/* Gravur fuer die dunklen Flaechen: scharfe Creme-Linien, wie mit heller
   Tinte gedruckt. Ein weicher Schatten wurde auf Salbei zu Flecken. */
.gravur{mix-blend-mode:screen;background-size:contain;background-position:right bottom}
.gravur--wiese{
  height:88%;aspect-ratio:1000/1506;left:28px;bottom:-40px;opacity:.2;
  background-image:url("../img/schatten/gravur-wiese.webp");scale:-1 1;transform-origin:50% 100%;animation-duration:14s
}
.gravur--weizen{
  height:150%;aspect-ratio:1000/1506;right:2vw;bottom:-46%;opacity:.17;
  background-image:url("../img/schatten/gravur-weizen.webp");transform-origin:100% 100%;animation-duration:12s
}
/* Zweige auf Sand: ein feiner Graeserzweig in leisem Braun, links und rechts
   gespiegelt, gleiche Hoehe, gleiche Deckung. Symmetrie statt Einzelstueck.
   Creme-Linien waren auf Sand kaum zu erkennen. */
.gravur--zweig{
  height:62%;aspect-ratio:1000/1506;bottom:-30px;mix-blend-mode:multiply;opacity:.42;
  background-image:url("../img/schatten/zweig-graeser.webp");background-position:left bottom;animation-duration:13s
}
.gravur--zweig-l{left:-80px;transform-origin:0 100%}
.gravur--zweig-r{right:-80px;scale:-1 1;transform-origin:50% 100%;animation-delay:-6s}
.ablauf .gravur--zweig{height:72%}
.footer{position:relative;overflow:hidden}
/* :not(.schatten): gleiche Spezifitaet wie .schatten, sonst wuerde der Halm
   hier wieder relativ und damit zu einem leeren Inline-Span */
.footer > :not(.schatten){position:relative;z-index:1}
.band-salbei > .wrap{position:relative;z-index:1}
@media (max-width:768px){
  /* Auf dem Handy liegt das Bild oben, der Text darunter: der Schatten
     gehoert hinter das Bild, nicht hinter die Knoepfe */
  .gravur--zweig{display:none}
  .gravur--wiese{display:none}   /* 280 KB Zierde, am Handy kaum zu sehen */
  .gravur--weizen{display:none}
}
@media (prefers-reduced-motion:reduce){
  .schatten{animation:none;translate:none}
}

/* Karten-Link unter der Adresse */
.route-link{display:inline-flex;align-items:center;min-height:44px;margin-top:.15rem;
  font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:.12em;text-transform:uppercase;
  color:var(--braun-akzent);text-decoration:none;border-bottom:1px solid rgba(120,96,66,.4)}
.route-link:hover{border-bottom-color:var(--braun-akzent)}

/* =============================== Mobile Overrides, Teil 2 (Dateiende)
   Regeln, die weiter oben von spaeteren Desktop-Regeln gleicher Tiefe
   ueberstimmt wurden (.faq-weiter, .anfrage-dialog, .menge-feld). */
@media (max-width:768px){
  .faq-weiter{min-height:44px}
  .anfrage-dialog{width:100%;max-width:none;max-height:min(92%,52rem);margin:auto 0 0;border-radius:22px 22px 0 0;border-bottom:0}
  .menge-feld{width:2.6rem}
  .siegel-mitte b i{font-size:.92em}
}

/* ================================ Einwilligung fuer die Nutzungsanalyse
   Ein kleines Blatt unten, keine Wand ueber der Seite. Am Handy ueber die
   ganze Breite, am Rechner unten links. */
.einwilligung{
  position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:150;max-width:26rem;margin:0 auto;
  background:var(--creme);color:var(--braun);border:1px solid var(--linie);border-radius:18px;
  padding:1.1rem 1.2rem 1.2rem;box-shadow:var(--schatten-xl);font-size:var(--t-small)
}
.einwilligung-titel{margin:0 0 .35rem;font-family:var(--serif);font-size:var(--t-h5);line-height:1.25;color:var(--braun)}
.einwilligung-text{margin:0 0 .9rem;color:var(--braun-mittel);line-height:1.5}
.einwilligung-text a{color:var(--braun-akzent);display:inline-block;padding-block:.6rem;margin-block:-.6rem}   /* 44 px Tippflaeche ohne Layoutsprung */
.einwilligung-knoepfe{display:flex;gap:.6rem;flex-wrap:wrap}
.einwilligung-knoepfe .btn{flex:1 1 auto;min-height:44px}
@media (min-width:769px){
  .einwilligung{left:1.5rem;right:auto;bottom:1.5rem;margin:0;width:26rem}
}

/* ================================ Veranstaltung (Einladung mit Flyer)
   A small card at the bottom right (phone: across the bottom), a tap opens
   the flyer large. Shown by main.js only after the consent sheet is answered;
   on the phone only after the first scroll, so title and buttons of the
   first screen stay free. Hides while the footer or the open menu is visible. */
.veranstaltung{
  position:fixed;right:1.5rem;bottom:1.5rem;z-index:140;width:min(23rem,100% - 3rem);
  transition:opacity .35s ease,transform .45s cubic-bezier(.2,.65,.2,1),visibility .35s
}
.veranstaltung.ist-weg,body.menue-offen .veranstaltung{opacity:0;visibility:hidden;transform:translateY(1.2rem)}
.veranstaltung-karte{
  display:flex;align-items:center;gap:1rem;width:100%;margin:0;text-align:left;cursor:pointer;
  padding:1rem 3.1rem 1rem 1rem;border:1px solid var(--linie);border-radius:20px;
  background:rgba(253,250,244,.97);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:var(--schatten-xl);color:var(--braun);font:inherit
}
.veranstaltung-mini{
  flex:0 0 auto;width:4.6rem;height:auto;margin:-2.2rem 0 -.4rem -.2rem;transform:rotate(-5deg);
  filter:drop-shadow(0 8px 14px rgba(58,47,38,.25));transition:transform .35s cubic-bezier(.2,.65,.2,1)
}
.veranstaltung-karte:hover .veranstaltung-mini{transform:rotate(-2deg) translateY(-3px) scale(1.04)}
.veranstaltung-text{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.veranstaltung-tag{font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:.16em;text-transform:uppercase;color:var(--braun-akzent)}
.veranstaltung-titel{font-family:var(--serif);font-size:var(--t-h4);line-height:1.15;color:var(--braun);overflow-wrap:break-word}
.veranstaltung-mehr{font-size:var(--t-small);font-weight:600;color:var(--salbei-tief);margin-top:.15rem}
.veranstaltung-mehr::after{content:" \2192"}
.veranstaltung-zu{
  position:absolute;top:.35rem;right:.35rem;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--muted);cursor:pointer;
  transition:background .2s ease,color .2s ease
}
.veranstaltung-zu .sym,.veranstaltung-dialog-zu .sym{width:1.15rem;height:1.15rem}
.veranstaltung-zu:hover{background:var(--sand);color:var(--braun)}

/* The dialog itself is invisible: the flyer stands free on the blurred page */
.veranstaltung-dialog{
  width:min(100% - 2rem,36rem);max-width:none;max-height:100%;padding:1rem 0;border:0;background:transparent;overflow:visible;
  flex-direction:column;align-items:center;gap:1rem
}
.veranstaltung-dialog[open]{display:flex}
.veranstaltung-dialog::backdrop{background:rgba(58,47,38,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.veranstaltung-flyer{
  display:block;width:auto;max-width:100%;height:auto;max-height:calc(100svh - 10rem);
  filter:drop-shadow(0 24px 40px rgba(0,0,0,.28))
}
.veranstaltung-leiste{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.7rem 1.2rem;
  padding:.85rem 1.1rem;border-radius:18px;background:rgba(253,250,244,.94);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:var(--schatten-l)
}
.veranstaltung-leiste p{margin:0;font-size:var(--t-small);line-height:1.45;color:var(--braun-mittel);text-align:center}
.veranstaltung-leiste b{font-weight:600;color:var(--braun)}
.veranstaltung-leiste .btn{min-height:44px}
.veranstaltung-dialog-zu{
  position:fixed;top:1rem;right:1rem;display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;border:1px solid rgba(253,250,244,.4);border-radius:50%;
  background:rgba(253,250,244,.9);color:var(--braun);cursor:pointer;box-shadow:var(--schatten-m)
}
@media (prefers-reduced-motion:no-preference){
  .veranstaltung-dialog[open]{animation:anfrage-auf .28s ease}
  .veranstaltung-dialog[open]::backdrop{animation:anfrage-schleier .28s ease}
}
@media (prefers-reduced-motion:reduce){
  .veranstaltung,.veranstaltung-mini{transition:none}
}
@media (max-width:768px){
  .veranstaltung{left:.75rem;right:.75rem;bottom:calc(.75rem + env(safe-area-inset-bottom,0px));width:auto}
  .veranstaltung-dialog{width:calc(100% - 1.5rem)}
  .veranstaltung-flyer{max-height:calc(100svh - 11rem)}
}

/* =============================== Mobile Overrides, Teil 3 (Dateiende)
   Buehne und Symmetrie am Handy:
   das Foto steht randlos oben und laeuft weich in den Sand aus, Titel und
   erster Knopf bleiben im ersten Bildschirm, und ab dort ist jede Sektion
   mittig gesetzt, auch "Ueber mich", Kontakt und der Fussbereich. Steht am
   Dateiende, weil die Tiefe-Regeln weiter oben dieselbe Selektortiefe haben. */
@media (max-width:768px){
  /* --- Startseite: Foto als Buehne, Siegel mittig auf der Naht --- */
  .hero{--buehne:clamp(22rem,56vh,40rem);--ueberlapp:clamp(4.5rem,11vh,7rem);padding:0 0 var(--s-sec)}
  .hero-grid{display:flex;flex-direction:column;gap:0}
  /* Beide Raender negativ, nicht nur links: der Flex-Container zentriert seine
     Kinder, mit einseitigem Rand rutschte das Foto 10 px nach links und liess
     rechts einen Streifen frei. */
  .hero-media{order:-1;isolation:auto;width:100vw;margin-inline:calc(50% - 50vw)}
  .hero-media img{
    width:100%;height:var(--buehne);object-fit:cover;object-position:center 42%;
    border-radius:0;box-shadow:none;
    -webkit-mask-image:linear-gradient(180deg,#000 56%,rgba(0,0,0,.55) 78%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 56%,rgba(0,0,0,.55) 78%,transparent 100%)
  }
  .hero-media::before,.hero-media::after{content:none}
  .hero-grid > div:first-child{position:relative;z-index:1;text-align:center;margin-top:calc(-1 * var(--ueberlapp))}
  .hero .eyebrow-line{display:none}   /* das Siegel traegt dieselbe Aussage */
  .hero h1{margin-top:0}
  .hero-lead{margin:1rem auto 0;max-width:32ch}
  .hero-cta{flex-direction:column;gap:.7rem;margin-top:1.4rem}
  .hero-cta .btn{width:100%}
  .hero-notiz{justify-content:center;max-width:none;margin-top:1.3rem}
  .hero-notiz .sym{display:none}
  .siegel{left:50%;bottom:auto;top:calc(var(--buehne) - var(--ueberlapp) - 6.4rem);width:6rem;transform:translateX(-50%)}

  /* --- Unterseiten: gleiche Buehne, etwas flacher --- */
  .seiten-hero{--buehne:clamp(17rem,44vh,26rem);--ueberlapp:clamp(2.5rem,6vh,4rem);padding:0 0 var(--s-sec)}
  .seiten-hero-grid{display:flex;flex-direction:column;gap:0}
  .seiten-hero-media{order:-1;isolation:auto;width:100vw;margin-inline:calc(50% - 50vw)}
  .seiten-hero-media img{
    width:100%;height:var(--buehne);object-fit:cover;object-position:center 45%;
    border-radius:0;box-shadow:none;
    -webkit-mask-image:linear-gradient(180deg,#000 60%,rgba(0,0,0,.55) 82%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 60%,rgba(0,0,0,.55) 82%,transparent 100%)
  }
  .seiten-hero-media::before,.seiten-hero-media::after{content:none}
  .seiten-hero-grid > div:first-child{position:relative;z-index:1;text-align:center}
  .seiten-hero:not(.seiten-hero--klein) .seiten-hero-grid > div:first-child{margin-top:calc(-1 * var(--ueberlapp))}
  .seiten-hero p{margin-inline:auto;max-width:36ch}
  .seiten-hero .btn{width:100%}
  /* Brottag: das freigestellte Brot bleibt Objekt, nur groesser und mittig */
  .seiten-hero--klein{padding-top:1.25rem}
  .seiten-hero-freisteller{order:-1;height:clamp(15rem,40vh,23rem);margin-bottom:1rem}

  /* --- Sektionen, die links standen, jetzt mittig --- */
  .ueber-inner{text-align:center}
  .ueber p.ueber-text{margin-inline:auto}
  .kontakt-info,.kontaktkarte,.anlass-karte-body{text-align:center}
  /* Jede Zeile fuer sich mittig, Symbol und Text als Einheit */
  .kontakt-info .kontaktzeile,.kontaktkarte .kontaktzeile{justify-content:center}
  .anlass-karte-body .btn{align-self:center}

  /* --- Fussbereich: mittig gesetzt, innen buendig ---
     Drei klar getrennte Gruppen (Marke, Seiten, Erreichbarkeit) mit Haarlinien
     dazwischen. Listen stehen als Block in der Mitte, sind innen aber links
     buendig: mittig gesetzte Einzelzeilen fransten je nach Laenge aus, und
     die Symbole der Erreichbarkeit standen auf vier verschiedenen Hoehen. */
  .footer{text-align:center}
  .footer-grid{row-gap:0}
  .footer-marke,.footer-erreichbar{grid-column:1 / -1}
  .footer-marke{display:flex;flex-direction:column;align-items:center;padding-bottom:1.7rem;margin-bottom:1.7rem;border-bottom:1px solid rgba(250,245,236,.18)}
  .footer-marke .footer-titel{margin-bottom:.35rem}
  /* Am Handy gehoert das Logo zur Adresse darunter: keine eigene Linie */
  .footer-logo{border-bottom:0;padding-bottom:0;margin-bottom:1.2rem}
  .footer-logo img{width:min(100%,10rem)}
  /* Ueberschrift und Liste teilen sich eine linke Kante, der ganze Block sitzt
     mittig in seiner Spalte; nur die Marke oben bleibt als Emblem zentriert. */
  .footer-spalte:not(.footer-marke){width:max-content;max-width:100%;margin-inline:auto;text-align:left}
  .footer-spalte:not(.footer-marke) .footer-titel{margin-bottom:.35rem;text-align:left}
  .footer-spalte ul{justify-items:start;text-align:left}
  /* Erreichbarkeit: die Trennlinie ueber die volle Breite, der Inhalt als
     mittige Spalte mit gemeinsamer linker Kante */
  .footer-spalte.footer-erreichbar{width:auto;margin-inline:0;display:grid;grid-template-columns:max-content;justify-content:center;justify-items:start;
    padding-top:1.7rem;margin-top:1.7rem;border-top:1px solid rgba(250,245,236,.18)}
  .footer-kontaktliste{gap:0;grid-template-columns:1fr}
  .footer-kontaktliste li{justify-content:flex-start;align-items:center;text-align:left;min-height:44px}
  .footer-kontaktliste .sym{margin-top:0}
  .footer-kontaktliste .google-link{font-family:inherit;font-size:var(--t-body-s);letter-spacing:0;text-transform:none;border-bottom-color:transparent}
  .footer-kontaktliste .google-link:hover{border-bottom-color:var(--auf-salbei)}
  .footer-unten,.footer-unten--ohne-social{flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.6rem;margin-top:1.7rem}
  .footer-unten--ohne-social .footer-copy{margin-right:0}
  .footer-social{justify-content:center}
  .footer-links{justify-content:center;column-gap:1.6rem;row-gap:0;margin-inline:0}
  .footer-links a{padding-inline:0}
}
@media (max-width:480px){
  /* Vier Rechtslinks als Zweierraster statt einer Zeile mit Einzelgaenger */
  .footer-links{display:grid;grid-template-columns:repeat(2,max-content);justify-content:center;column-gap:2rem}
}

/* Sortiment-Vorschau mit weniger als vier Fotos: mittig, keine Luecken */
.sortiment[data-anzahl="1"]{grid-template-columns:minmax(0,1fr);max-width:17rem;margin-inline:auto}
.sortiment[data-anzahl="2"]{grid-template-columns:repeat(2,minmax(0,1fr));max-width:34rem;margin-inline:auto}
.sortiment[data-anzahl="3"]{grid-template-columns:repeat(3,minmax(0,1fr));max-width:50rem;margin-inline:auto}

/* ------------------------------------------- Ueber mich: Qualifikation
   Sandflaeche mit Graeserzweigen wie der Ablauf der Anlass-Seiten, darin eine
   helle Karte mit feinem Innenrahmen. Das Siegel liegt auf der Oberkante,
   halb draussen, wie auf einer Urkunde. */
.meister{position:relative;overflow:hidden;background:var(--sand-tief);background-image:var(--korn);
  padding:calc(var(--s-sec) + clamp(2.4rem,1.8rem + 2vw,3.6rem)) 0 var(--s-sec);z-index:2;
  box-shadow:0 30px 56px -36px rgba(58,47,38,.32)}
.meister > .wrap{position:relative;z-index:1}
.meister .gravur--zweig{height:72%}
.meister-karte{
  --siegel-g:clamp(6.5rem,5.2rem + 3vw,8.5rem);
  position:relative;max-width:38rem;margin-inline:auto;text-align:center;
  background:var(--creme);border-radius:24px;box-shadow:var(--schatten-m);
  padding:calc(var(--siegel-g) / 2 + 1.5rem) clamp(1.4rem,.8rem + 2.6vw,3rem) clamp(1.8rem,1.2rem + 2vw,2.6rem)
}
.meister-karte::before{content:"";position:absolute;inset:10px;border:1px solid var(--linie);border-radius:16px;pointer-events:none}
.meister-karte .siegel{
  position:absolute;left:calc(50% - var(--siegel-g) / 2);top:calc(var(--siegel-g) / -2);bottom:auto;
  width:var(--siegel-g);transform:none;z-index:2
}
.meister-karte h2{font-size:var(--t-h2s);line-height:1.14;margin-top:.8rem;text-wrap:balance}
.meister-liste{list-style:none;margin:clamp(1.4rem,1rem + 1.4vw,2rem) 0 0;padding:0}
.meister-liste li{position:relative;padding:clamp(1rem,.8rem + .8vw,1.35rem) 0;border-top:1px solid var(--linie)}
.meister-liste li:last-of-type{border-bottom:1px solid var(--linie)}
.meister-liste h3{font-size:var(--t-h3);line-height:1.2;margin:0;text-wrap:balance}
.meister-liste p{font-size:var(--t-body-s);line-height:1.55;color:var(--braun-mittel);margin:.35rem auto 0;max-width:34ch}
.meister-zitat{
  font-family:var(--serif);font-style:italic;font-size:clamp(1.15rem,1rem + .6vw,1.45rem);line-height:1.45;
  color:var(--braun);max-width:30ch;margin:clamp(1.3rem,1rem + 1.2vw,1.9rem) auto 0;text-wrap:balance
}
@media (max-width:480px){
  .meister-karte{--siegel-g:6rem;border-radius:20px}
  .meister-karte::before{inset:8px;border-radius:13px}
}