/* ============ Schriften, selbst gehostet ============ */
@font-face{font-family:Bodoni;src:url(/s/schrift/bodoni-400.woff2)format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Bodoni;src:url(/s/schrift/bodoni-500.woff2)format('woff2');
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Jost;src:url(/s/schrift/jost-300.woff2)format('woff2');
  font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:Jost;src:url(/s/schrift/jost-400.woff2)format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Jost;src:url(/s/schrift/jost-500.woff2)format('woff2');
  font-weight:500;font-style:normal;font-display:swap}

/* ============ Farben ============ */
:root{
  --display:Bodoni,'Bodoni 72','Didot',Georgia,'Times New Roman',serif;
  --text:Jost,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --schmal:1280px; --weit:1560px;
  --schnell:.22s cubic-bezier(.4,0,.2,1);
  --ruhig:.42s cubic-bezier(.22,.61,.36,1);
}
:root, [data-modus="dunkel"]{
  --grund:#0A0A0B; --flaeche:#131316; --flaeche-hoch:#1B1B1F; --linie:#27272C; --linie-stark:#3A3A41;
  --schrift:#F6F4F0; --gedaempft:#A8A49D; --leise:#7D7A74;
  --gold:#D2A93C; --gold-tief:#B08D28; --gold-hauch:rgba(210,169,60,.13);
  --auf-gold:#14100A;
  --knopf:#D2A93C; --knopf-tief:#B08D28; --auf-knopf:#14100A; --schatten:0 18px 48px rgba(0,0,0,.5);
  --bild-grund:#101013;
}
[data-modus="hell"]{
  --grund:#FBFAF7; --flaeche:#FFFFFF; --flaeche-hoch:#F3F1EB; --linie:#E3E0D7; --linie-stark:#CFCBBF;
  --schrift:#15151A; --gedaempft:#5E5B54; --leise:#74716A;
  /* Gold auf Hell muss deutlich dunkler sein, sonst reisst der Kontrast. */
  --gold:#8A6B12; --gold-tief:#6E5410; --gold-hauch:rgba(138,107,18,.10);
  --auf-gold:#FFFDF6;
  --knopf:#17171B; --knopf-tief:#000; --auf-knopf:#FBFAF7; --schatten:0 16px 40px rgba(30,26,14,.10);
  --bild-grund:#EFEDE6;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--grund);color:var(--schrift);font-family:var(--text);
  font-size:16px;font-weight:300;line-height:1.65;-webkit-font-smoothing:antialiased;
  transition:background .5s ease,color .5s ease;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}

/* ============ Grundbausteine ============ */
.huelle{max-width:var(--schmal);margin:0 auto;padding:0 24px}
.huelle.weit{max-width:var(--weit)}
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;letter-spacing:.005em;line-height:1.14}
.ueber{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--gedaempft);
  font-weight:400;margin:0 0 14px}
.leise{color:var(--gedaempft)}

.knopf{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 34px;background:var(--knopf);color:var(--auf-knopf);border-radius:2px;
  font-size:12.5px;letter-spacing:.17em;text-transform:uppercase;font-weight:500;
  transition:var(--schnell);position:relative;overflow:hidden}
.knopf:hover{background:var(--knopf-tief);transform:translateY(-1px)}
.knopf:active{transform:translateY(0)}
.knopf:disabled{opacity:.45;cursor:not-allowed;transform:none}
.knopf.linie{background:transparent;color:var(--schrift);border:1px solid var(--linie-stark)}
.knopf.linie:hover{border-color:var(--gold);color:var(--gold);background:transparent;transform:translateY(-1px)}

/* Feiner Unterstrich, der von links einläuft */
.wisch{position:relative;display:inline-block;padding-bottom:3px}
.wisch::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform var(--ruhig)}
.wisch:hover::after{transform:scaleX(1);transform-origin:left}

/* ============ Kopfleiste ============ */
.oben{position:fixed;top:0;left:0;right:0;z-index:60}
.kopf{position:relative;
  transition:background .4s ease,border-color .4s ease,backdrop-filter .4s ease;
  border-bottom:1px solid transparent}
.kopf.fest{background:color-mix(in srgb,var(--grund) 96%,transparent);
  backdrop-filter:blur(14px) saturate(1.3);border-bottom-color:var(--linie)}
.kopf-innen{max-width:var(--weit);margin:0 auto;padding:18px 24px;
  display:flex;align-items:center;gap:28px;transition:padding var(--ruhig)}
.kopf.fest .kopf-innen{padding-top:11px;padding-bottom:11px}
.kopf.fest .wm-zeichen{height:19px}
.kopf.fest .wm-schrift{width:98px}
/* Zeichen über dem Schriftzug — beide einzeln maskiert, damit das Monogramm
   in Gold und der Schriftzug in Textfarbe stehen kann. */
.wortmarke{display:flex;flex-direction:column;align-items:center;gap:7px;
  flex:0 0 auto;transition:opacity var(--schnell)}
.wortmarke:hover{opacity:.75}
.wm-zeichen{display:block;height:27px;aspect-ratio:452/552;background-color:var(--gold);
  transition:background-color var(--schnell),transform var(--ruhig),height var(--ruhig);
  -webkit-mask:url(/s/marke/monogramm.webp) no-repeat center/contain;
  mask:url(/s/marke/monogramm.webp) no-repeat center/contain}
.wortmarke:hover .wm-zeichen{transform:translateY(-1px)}
.wm-schrift{display:block;width:126px;aspect-ratio:1025/143;background-color:var(--schrift);
  transition:background-color var(--schnell),width var(--ruhig);
  -webkit-mask:url(/s/marke/schriftzug.webp) no-repeat center/contain;
  mask:url(/s/marke/schriftzug.webp) no-repeat center/contain}
@media(max-width:520px){
  .wortmarke{gap:5px}
  .wm-zeichen{height:22px}
  .wm-schrift{width:104px}
}
.monogramm{display:block;aspect-ratio:452/552;background-color:var(--gold);
  -webkit-mask:url(/s/marke/monogramm.webp) no-repeat center/contain;
  mask:url(/s/marke/monogramm.webp) no-repeat center/contain}
.navi{display:flex;gap:26px;margin-left:auto;align-items:center}
.navi a{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gedaempft);
  transition:color var(--schnell)}
.navi a:hover,.navi a[aria-current="page"]{color:var(--schrift)}
.werkzeuge{display:flex;align-items:center;gap:6px}
.rund{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  color:var(--gedaempft);transition:var(--schnell);position:relative}
.rund:hover{color:var(--schrift);background:var(--flaeche-hoch)}
.rund svg{width:19px;height:19px;stroke-width:1.5}
.zahl{position:absolute;top:3px;right:2px;min-width:17px;height:17px;padding:0 4px;
  border-radius:9px;background:var(--knopf);color:var(--auf-knopf);font-size:10.5px;
  font-weight:500;display:grid;place-items:center;transform:scale(0);transition:transform .3s cubic-bezier(.34,1.6,.64,1)}
.zahl.an{transform:scale(1)}
.brenner{display:none}

/* ============ Seitenwechsel ============ */
main{padding-top:var(--oben,86px);min-height:100vh}
.seite{animation:auf .5s cubic-bezier(.22,.61,.36,1) both}
@keyframes auf{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ============ Bühne ============ */
.buehne{position:relative;min-height:min(92vh,820px);display:flex;align-items:flex-end;
  overflow:hidden;margin-bottom:clamp(60px,9vw,120px);
  /* randlos: die Buehne schiebt sich unter die feste Kopfleiste */
  margin-top:calc(-1 * var(--oben,86px));padding-top:var(--oben,86px)}
.buehne-bild{position:absolute;inset:0;background:var(--bild-grund)}
.buehne-bild img{width:100%;height:100%;object-fit:cover;object-position:center 28%;
  animation:langsamZoom 18s ease-out both}
@keyframes langsamZoom{from{transform:scale(1.07)}to{transform:scale(1)}}
.buehne-schleier{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.12) 38%,rgba(0,0,0,.78) 100%)}
[data-modus="hell"] .buehne-schleier{
  background:linear-gradient(180deg,rgba(0,0,0,.30) 0%,rgba(0,0,0,.08) 38%,rgba(0,0,0,.62) 100%)}
.buehne-text{position:relative;z-index:2;width:100%;max-width:var(--weit);margin:0 auto;
  padding:0 24px clamp(46px,7vw,86px);color:#F7F5F1}
.buehne-text .ueber{color:rgba(247,245,241,.72)}
.buehne h1{font-size:clamp(40px,7.4vw,86px);margin-bottom:18px;letter-spacing:.01em}
.buehne p{font-size:clamp(15px,1.6vw,18px);max-width:44ch;color:rgba(247,245,241,.85);
  margin:0 0 30px;font-weight:300}

/* ============ Reveal beim Scrollen ============ */
.zeig{opacity:0;transform:translateY(22px);
  transition:opacity .75s cubic-bezier(.22,.61,.36,1),transform .75s cubic-bezier(.22,.61,.36,1)}
.zeig.da{opacity:1;transform:none}

/* ============ Abschnitte ============ */
.abschnitt{padding:clamp(50px,7vw,96px) 0}
.abschnitt.erster{padding-top:clamp(22px,3vw,40px)}
.abschnitt-kopf{display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;margin-bottom:clamp(28px,4vw,46px);flex-wrap:wrap}
.abschnitt-kopf h2{font-size:clamp(26px,3.6vw,42px)}
.abschnitt-kopf p{margin:8px 0 0;color:var(--gedaempft);font-size:15px}

/* ============ Produktraster ============ */
.raster{display:grid;gap:clamp(18px,2.4vw,34px);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr))}
.karte{position:relative;display:block}
.karte-bild{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--bild-grund);
  border-radius:2px}
.karte-bild img{width:100%;height:100%;object-fit:cover;
  transition:transform .85s cubic-bezier(.22,.61,.36,1),opacity .55s ease}
.karte-bild .zweit{position:absolute;inset:0;opacity:0}
.karte:hover .karte-bild img{transform:scale(1.045)}
.karte:hover .karte-bild .zweit{opacity:1}
.karte-schild{position:absolute;top:12px;left:12px;z-index:2;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;padding:5px 10px;border-radius:2px;
  background:color-mix(in srgb,var(--grund) 82%,transparent);backdrop-filter:blur(6px);
  color:var(--gedaempft);border:1px solid var(--linie)}
.karte-schild.knapp{color:var(--gold);border-color:var(--gold)}
.karte-text{padding:16px 2px 0}
.karte-text .n{font-family:var(--display);font-size:19px;line-height:1.25;
  transition:color var(--schnell)}
.karte:hover .karte-text .n{color:var(--gold)}
.karte-text .m{font-size:12.5px;color:var(--leise);margin-top:3px;letter-spacing:.02em}
.karte-text .p{font-size:15px;margin-top:9px;letter-spacing:.03em}

/* ============ Filterleiste ============ */
.filterreihe{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:clamp(24px,3.5vw,40px)}
.filterreihe button{padding:9px 20px;border:1px solid var(--linie);border-radius:2px;
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gedaempft);
  transition:var(--schnell)}
.filterreihe button:hover{border-color:var(--linie-stark);color:var(--schrift)}
.filterreihe button[aria-pressed="true"]{background:var(--knopf);border-color:var(--knopf);
  color:var(--auf-knopf);font-weight:500}

/* ============ Produktseite ============ */
.produkt{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,60px);
  padding:clamp(24px,4vw,52px) 0 clamp(50px,7vw,90px)}
.produkt>*{min-width:0}
@media(min-width:900px){.produkt{grid-template-columns:1.15fr .85fr;align-items:start}}
.galerie-gross{position:relative;aspect-ratio:3/4;background:var(--bild-grund);overflow:hidden;
  border-radius:2px}
.galerie-gross img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;
  opacity:0;transition:opacity .55s ease}
.galerie-gross img.an{opacity:1}
.galerie-reihe{display:flex;gap:9px;margin-top:11px;overflow-x:auto;padding-bottom:4px;
  scrollbar-width:thin;max-width:100%}
.galerie-reihe button{flex:0 0 74px;aspect-ratio:3/4;overflow:hidden;border-radius:2px;
  border:1px solid var(--linie);opacity:.55;transition:var(--schnell);background:var(--bild-grund)}
.galerie-reihe button:hover{opacity:.85}
.galerie-reihe button[aria-current="true"]{opacity:1;border-color:var(--gold)}
.galerie-reihe img{width:100%;height:100%;object-fit:cover}

@media(min-width:900px){.produkt-text{position:sticky;top:100px}}
.produkt-text h1{font-size:clamp(30px,4.2vw,46px);margin-bottom:10px}
.produkt-preis{font-size:22px;letter-spacing:.04em;margin:16px 0 0}
.produkt-preis .mwst{display:block;font-size:11.5px;color:var(--leise);letter-spacing:.02em;margin-top:5px}
.produkt-text .fliess{margin:26px 0;color:var(--gedaempft);font-size:15.5px;line-height:1.75}
.merkmale{border-top:1px solid var(--linie);margin-top:28px}
.merkmal{display:flex;gap:18px;padding:13px 0;border-bottom:1px solid var(--linie);font-size:14px}
.merkmal dt{flex:0 0 116px;color:var(--leise);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;padding-top:2px}
.merkmal dd{margin:0}

.groessen{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 0}
.groesse{min-width:54px;padding:12px 14px;border:1px solid var(--linie);border-radius:2px;
  font-size:13px;letter-spacing:.08em;transition:var(--schnell);position:relative}
.groesse:hover:not(:disabled){border-color:var(--linie-stark)}
.groesse[aria-pressed="true"]{background:var(--schrift);color:var(--grund);border-color:var(--schrift)}
.groesse:disabled{opacity:.3;cursor:not-allowed;text-decoration:line-through}
.knapp-hinweis{font-size:12.5px;color:var(--gold);margin:12px 0 0;min-height:19px}

/* ============ Warenkorb ============ */
.schub-grund{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:90;opacity:0;
  pointer-events:none;transition:opacity var(--ruhig);backdrop-filter:blur(2px)}
.schub-grund.auf{opacity:1;pointer-events:auto}
.schub{position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);background:var(--flaeche);
  border-left:1px solid var(--linie);z-index:91;transform:translateX(100%);
  transition:transform var(--ruhig);display:flex;flex-direction:column;box-shadow:var(--schatten)}
.schub.auf{transform:none}
.schub-kopf{display:flex;align-items:center;gap:14px;padding:22px 24px;border-bottom:1px solid var(--linie)}
.schub-kopf h2{font-size:20px;flex:1}
.schub-koerper{flex:1;overflow-y:auto;padding:8px 24px}
.korb-zeile{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid var(--linie);
  animation:auf .35s ease both;position:relative}
.korb-zeile img{width:74px;height:98px;object-fit:cover;background:var(--bild-grund);flex:0 0 74px;border-radius:2px}
.korb-info{flex:1;min-width:0;padding-right:32px}
.korb-info .n{font-family:var(--display);font-size:16.5px;line-height:1.3}
.korb-info .g{font-size:12px;color:var(--leise);margin-top:3px;letter-spacing:.06em}
.korb-info .p{font-size:14px;margin-top:7px}
.mengen{display:flex;align-items:center;gap:2px;margin-top:9px}
.mengen button{width:28px;height:28px;border:1px solid var(--linie);display:grid;place-items:center;
  font-size:15px;color:var(--gedaempft);transition:var(--schnell);line-height:1}
.mengen button:hover:not(:disabled){border-color:var(--gold);color:var(--gold)}
.mengen button:disabled{opacity:.3;cursor:not-allowed}
.mengen span{min-width:34px;text-align:center;font-size:14px}
/* Als Kreuz oben rechts statt als Textknopf in der Mengenzeile — dort lief
   "Entfernen" bei 420 px Schubbreite aus dem Rand. */
.weg{position:absolute;top:14px;right:0;width:26px;height:26px;display:grid;place-items:center;
  color:var(--leise);transition:color var(--schnell);border-radius:50%}
.weg:hover{color:var(--schrift);background:var(--flaeche-hoch)}
.weg svg{width:14px;height:14px;stroke-width:1.6}
.schub-fuss{border-top:1px solid var(--linie);padding:20px 24px 26px}
.rechnung{font-size:14px;margin-bottom:16px}
.rechnung div{display:flex;justify-content:space-between;padding:5px 0;color:var(--gedaempft)}
.rechnung div.gesamt{color:var(--schrift);font-size:18px;padding-top:13px;margin-top:8px;
  border-top:1px solid var(--linie);letter-spacing:.02em}
.schub-fuss .knopf{width:100%}

/* ============ Kasse ============ */
.kasse{display:grid;grid-template-columns:1fr;gap:clamp(30px,4vw,56px);
  padding:clamp(26px,4vw,52px) 0 clamp(56px,8vw,96px)}
@media(min-width:880px){.kasse{grid-template-columns:1.25fr .75fr;align-items:start}}
.feldpaar{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:560px){.feldpaar.zwei{grid-template-columns:1fr 1fr}
  .feldpaar.plz{grid-template-columns:.42fr 1fr}}
.feld{position:relative;margin-bottom:16px}
.feld label{display:block;font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--leise);margin-bottom:7px}
.feld input,.feld textarea{width:100%;background:var(--flaeche);border:1px solid var(--linie);
  border-radius:2px;padding:13px 15px;color:var(--schrift);font-family:var(--text);
  font-size:15.5px;font-weight:300;transition:var(--schnell);-webkit-appearance:none}
.feld textarea{min-height:96px;resize:vertical;line-height:1.6}
.feld input:focus,.feld textarea:focus{outline:0;border-color:var(--gold);
  box-shadow:0 0 0 3px var(--gold-hauch)}
.feld input[aria-invalid="true"]{border-color:#C4564E}
.feldfehler{font-size:12px;color:#C4564E;margin-top:6px;min-height:16px}
.zusammen{background:var(--flaeche);border:1px solid var(--linie);padding:24px;border-radius:2px}
@media(min-width:880px){.zusammen{position:sticky;top:100px}}
.zusammen h3{font-size:19px;margin-bottom:18px}
.zeile-mini{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--linie);font-size:13.5px}
.zeile-mini img{width:48px;height:64px;object-fit:cover;background:var(--bild-grund);flex:0 0 48px}
.zeile-mini .r{margin-left:auto;text-align:right;white-space:nowrap}

/* ============ Meldung nach Bestellung ============ */
.danke{text-align:center;padding:clamp(70px,12vw,140px) 0;max-width:520px;margin:0 auto}
.danke .siegel{width:62px;height:62px;border-radius:50%;border:1px solid var(--gold);
  color:var(--gold);display:grid;place-items:center;margin:0 auto 26px;
  animation:siegelAuf .6s cubic-bezier(.34,1.5,.64,1) both}
@keyframes siegelAuf{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
.danke .siegel svg{width:26px;height:26px;stroke-width:1.4}
.danke h1{font-size:clamp(28px,4.4vw,40px);margin-bottom:14px}
.danke p{color:var(--gedaempft);margin:0 0 8px}
.danke .nummer{font-family:var(--display);font-size:21px;color:var(--gold);letter-spacing:.1em;margin:22px 0 30px}

/* ============ Fußzeile ============ */
.fuss{border-top:1px solid var(--linie);margin-top:clamp(50px,8vw,110px);
  padding:clamp(40px,5vw,64px) 0 34px;background:var(--flaeche)}
.fuss-raster{display:grid;gap:34px;grid-template-columns:1fr}
@media(min-width:720px){.fuss-raster{grid-template-columns:1.5fr 1fr 1fr}}
.fuss h4{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--leise);
  margin:0 0 14px;font-weight:400;font-family:var(--text)}
.fuss ul{list-style:none;margin:0;padding:0}
.fuss li{margin-bottom:9px}
.fuss li a{font-size:14px;color:var(--gedaempft);transition:color var(--schnell)}
.fuss li a:hover{color:var(--gold)}
.fuss .marke .monogramm{width:38px}
.fuss .marke p{font-size:14px;color:var(--gedaempft);margin:12px 0 0;max-width:34ch}
.fuss-unten{border-top:1px solid var(--linie);margin-top:34px;padding-top:22px;
  display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--leise)}

/* ============ Hinweisband ============ */
.band{background:color-mix(in srgb,var(--grund) 94%,var(--gold));
  border-bottom:1px solid var(--linie);font-size:12px;letter-spacing:.06em;
  color:var(--gold);text-align:center;padding:8px 20px;
  backdrop-filter:blur(14px)}

/* ============ Leerzustand, Laden ============ */
.leer{text-align:center;padding:80px 20px;color:var(--gedaempft)}
.laden{display:grid;place-items:center;padding:110px 20px}
.laden i{width:26px;height:26px;border:1.5px solid var(--linie);border-top-color:var(--gold);
  border-radius:50%;animation:dreh .8s linear infinite;display:block}
@keyframes dreh{to{transform:rotate(360deg)}}

/* ============ Handy ============ */
@media(max-width:820px){
  .navi{position:absolute;top:100%;left:0;right:0;flex-direction:column;
    align-items:stretch;gap:0;margin:0;padding:0 24px;
    background:var(--grund);border-bottom:1px solid transparent;
    max-height:0;overflow:hidden;
    transition:max-height var(--ruhig),border-color var(--ruhig)}
  .navi.auf{max-height:320px;border-bottom-color:var(--linie)}
  .navi a{padding:16px 0;font-size:14px;letter-spacing:.2em;
    border-bottom:1px solid var(--linie)}
  .navi a:last-child{border-bottom:0}
  .brenner{display:grid;place-items:center;order:-1}
  .werkzeuge{margin-left:auto}
  .kopf-innen{gap:12px}
}

/* ============ Wer keine Bewegung mag, kriegt keine ============ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .zeig{opacity:1;transform:none}
}


/* ============ Erzählstrecke ============ */
.geschichte{display:grid;grid-template-columns:1fr;gap:clamp(24px,4vw,56px);
  align-items:center;padding:clamp(46px,7vw,96px) 0;border-top:1px solid var(--linie)}
@media(min-width:860px){
  .geschichte{grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,80px)}
  .geschichte.gedreht .g-bild{order:2}
}
.geschichte>*{min-width:0}
.g-bild{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--bild-grund);
  border-radius:2px}
.g-bild img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s cubic-bezier(.22,.61,.36,1)}
.geschichte:hover .g-bild img{transform:scale(1.03)}
.g-text h2{font-size:clamp(25px,3.4vw,40px);margin-bottom:16px;max-width:19ch}
.g-text p{color:var(--gedaempft);font-size:clamp(15px,1.5vw,16.5px);line-height:1.78;
  margin:0 0 15px;max-width:46ch}
.g-text p:last-child{margin-bottom:0}
.g-text p strong{color:var(--schrift);font-weight:400}
/* Das grosse Zeichen als Erzaehlbild statt eines Fotos */
.g-zeichen{display:grid;place-items:center;aspect-ratio:4/5;background:var(--flaeche);
  border:1px solid var(--linie);border-radius:2px}
.g-zeichen .monogramm{width:min(46%,190px);transition:transform 1.1s cubic-bezier(.22,.61,.36,1)}
.geschichte:hover .g-zeichen .monogramm{transform:scale(1.05)}

/* Zahlenband */
.zahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));
  gap:clamp(18px,3vw,40px);padding:clamp(38px,5vw,64px) 0;
  border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.zahl-feld{text-align:center}
.zahl-feld b{display:block;font-family:var(--display);font-weight:400;
  font-size:clamp(34px,5vw,54px);line-height:1;color:var(--gold);letter-spacing:.01em}
.zahl-feld span{display:block;margin-top:10px;font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gedaempft)}

/* Schlusswort */
.schluss{text-align:center;padding:clamp(56px,8vw,110px) 0}
.schluss .monogramm{width:44px;margin:0 auto 26px}
.schluss h2{font-size:clamp(26px,4vw,44px);max-width:17ch;margin:0 auto 18px}
.schluss p{color:var(--gedaempft);max-width:48ch;margin:0 auto 30px;font-size:16px}

/* ============ Rechtstexte, Hinweiskasten ============ */
.rechtsseite{max-width:66ch;padding:clamp(30px,5vw,60px) 0 clamp(56px,8vw,96px)}
.rechtsseite h1{font-size:clamp(30px,4.4vw,46px);margin-bottom:26px}
.fliesstext h3{font-family:var(--text);font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gedaempft);font-weight:500;margin:34px 0 10px}
.fliesstext h3:first-child{margin-top:0}
.fliesstext p{color:var(--gedaempft);font-size:15.5px;line-height:1.8;margin:0 0 14px}
.fliesstext p strong{color:var(--schrift);font-weight:400}
.fliesstext p.offen{border-left:2px solid var(--gold);padding-left:16px;color:var(--gold)}
.hinweiskasten{border:1px solid var(--linie);border-left:2px solid var(--gold);
  border-radius:2px;padding:15px 18px;margin:0 0 28px;font-size:14.5px;line-height:1.7;
  color:var(--gedaempft);background:var(--flaeche)}
.hinweiskasten strong{color:var(--schrift);font-weight:500}