/* Schriften liegen auf dem eigenen Server (kein Google-Fonts-Abruf, wichtig für den Datenschutz) */
@font-face { font-family: "Bodoni Moda"; src: url("schriften/BodoniModa-Black.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("schriften/EBGaramond-Regular.woff2") format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("schriften/EBGaramond-SemiBold.woff2") format("woff2"); font-weight: 600 700; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("schriften/EBGaramond-Italic.woff2") format("woff2"); font-weight: 400 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Pinyon Script"; src: url("schriften/PinyonScript-Regular.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }

:root {
  --blau: #0b2bff;
  --neon: #e8ff1c;
  --schwarz: #0a0a0a;
  --weiss: #ffffff;
  --papier: #f4f2ee;
  --grau: #6b6b6b;
  --linie: #dcd8d0;
  --leiste: 64px;
  /* Akzentfarbe: in der Einzelansicht aus dem Gemälde gelesen (app.js), sonst Blau */
  --akzent: var(--blau);
  --akzent-text: var(--weiss);
  --akzent-tief: var(--blau);
  --schrift: "EB Garamond", Garamond, Georgia, serif;
  --titel-schrift: "Snell Roundhand", "Pinyon Script", "Apple Chancery", cursive;
  --hero-schrift: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--schwarz);
  color: var(--schwarz);
  font-family: var(--schrift);
  -webkit-font-smoothing: antialiased;
}
body.gesperrt { overflow: hidden; }
img { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
[hidden] { display: none !important; }

/* ---------- Obere Leiste ---------- */
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--leiste);
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 65;
  color: var(--weiss);
  padding-top: env(safe-area-inset-top, 0px);
  height: calc(var(--leiste) + env(safe-area-inset-top, 0px));
  transition: background .3s, color .3s;
}
.topbar.ueber-bild { background: linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,0)); }
body.detail-offen .topbar { background: var(--papier); color: var(--akzent-tief); }
body.menu-offen .topbar { background: transparent; color: var(--weiss); }

.logo { color: inherit; text-decoration: none; display: flex; align-items: center; }
.logo img { height: 48px; width: auto; }
body.detail-offen .logo img { filter: invert(1); }
body.menu-offen .logo img { filter: none; }
.logo-text { font-weight: 800; font-size: 1.25rem; letter-spacing: .04em; }

.topbar-rechts { display: flex; align-items: center; gap: 6px; }

/* Auswahl Gemälde / Designs */
.filter {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex; gap: 4px;
  padding: 3px;
  border: 1px solid rgba(255,255,255,.55); border-radius: 999px;
  background: rgba(0,0,0,.12);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.filter-btn {
  border: 0; border-radius: 999px;
  padding: 6px 14px;
  background: transparent; color: var(--weiss);
  font-size: .82rem; font-weight: 500;
  transition: background .2s, color .2s;
}
.filter-btn.aktiv { background: var(--weiss); color: var(--schwarz); font-weight: 700; }
.filter-btn:not(.aktiv):hover { background: rgba(255,255,255,.18); }
body.detail-offen .filter, body.menu-offen .filter { display: none; }
.werk.ausgeblendet { display: none; }
.icon-btn {
  position: relative;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: none; border: 0; color: inherit; padding: 0;
}
.icon-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.badge {
  position: absolute; top: 4px; right: 2px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px;
  background: var(--neon); color: var(--schwarz);
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
.burger { gap: 5px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.burger span { display: block; width: 24px; height: 2px; background: currentColor; transition: transform .3s, opacity .2s; }
body.menu-offen .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-offen .burger span:nth-child(2) { opacity: 0; }
body.menu-offen .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Menü ---------- */
.menu {
  position: fixed; inset: 0; z-index: 64;
  background: var(--blau);
  display: flex; align-items: center;
  padding: var(--leiste) 24px 24px;
  animation: einblenden .25s ease;
}
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu a {
  display: block;
  color: var(--weiss); text-decoration: none;
  font-size: clamp(2.6rem, 9vw, 6rem); font-weight: 800;
  line-height: 1.05; letter-spacing: -.03em;
}
.menu a:hover { color: var(--neon); }

/* ---------- Startbild ---------- */
.hero {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  background: var(--blau);
  display: grid; place-items: center;
  padding: calc(var(--leiste) + env(safe-area-inset-top, 0px) + 10px) 16px 16px;
  overflow: hidden;
  z-index: 0;
}
/* Der Schriftzug füllt per Script (app.js, heroEinpassen) exakt Breite und Höhe */
.hero h1 {
  margin: 0;
  color: var(--weiss);
  font-family: var(--hero-schrift);
  font-weight: 900;
  display: flex; flex-direction: column;
  font-size: 12vw;
  line-height: .86;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  transform-origin: center;
}
.hero h1 .zeile { display: block; width: max-content; margin-inline: auto; }
/* „TO“: T ganz links, O ganz rechts, gleich breit wie die anderen Zeilen */
.hero h1 .zeile[data-klein], .hero h1 .zeile[data-klein] > span { display: flex; justify-content: space-between; width: 100%; }
.hero-fertig .hero-titel .b { animation: none; opacity: 1; transform: none; filter: none; }
.neon { color: var(--neon); }

/* Startbild-Animation: Buchstaben fliegen rein */
.hero-titel .b {
  display: inline-block;
  opacity: 0;
  transform: translateY(.35em) rotate(4deg);
  filter: blur(10px);
  animation: buchstabe-rein .7s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: calc(var(--i) * 45ms + 150ms);
}
@keyframes buchstabe-rein { to { opacity: 1; transform: none; filter: blur(0); } }

/* ---------- Galerie ---------- */
.galerie { position: relative; z-index: 1; background: var(--schwarz); }
.werk { position: relative; cursor: pointer; }
.werk-buehne { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: var(--schwarz); }
.werk-szene { width: 100%; height: 100%; object-fit: cover; object-position: center; transform-origin: 0 0; }
.werk-nah, .werk-dunkel { display: none; }

/* Zoom beim Scrollen: jede Szene bekommt Scroll-Strecke, die Bühne bleibt stehen */
.zoom-an .werk { height: 280vh; }
.zoom-an .werk-buehne { position: sticky; top: 0; }
.zoom-an .werk-szene { will-change: transform; }
.zoom-an .werk-dunkel { display: block; position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }
.zoom-an .werk-nah {
  display: block;
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
}
.werk-buehne::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top right, rgba(0,0,0,.7) 0%, rgba(0,0,0,.25) 22%, rgba(0,0,0,0) 45%);
  pointer-events: none;
}
.interesse-btn {
  position: absolute; left: 20px; bottom: 20px; z-index: 2;
  padding: 9px 16px;
  border: 1px solid rgba(255,255,255,.85); border-radius: 999px;
  background: rgba(0,0,0,.15); color: var(--weiss);
  font-size: .85rem; font-weight: 500; letter-spacing: .01em;
  backdrop-filter: blur(4px);
  transition: background .2s, color .2s, border-color .2s;
}
.interesse-btn:hover { background: var(--neon); color: var(--schwarz); border-color: var(--neon); }

/* ---------- Fuß ---------- */
.fuss {
  position: relative; z-index: 1;
  background: var(--blau); color: var(--weiss);
  padding: 64px 20px 40px;
}
.fuss-hinweis { margin: 0 0 14px; font-size: .95rem; opacity: .8; }
.fuss-claim { font-family: var(--hero-schrift); text-transform: uppercase; margin: 0 0 32px; font-size: clamp(2rem, 6vw, 4rem); font-weight: 900; letter-spacing: 0; line-height: 1; }
.insta { display: inline-flex; color: var(--weiss); margin-bottom: 28px; transition: color .2s, transform .2s; }
.insta svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.insta .punkt { fill: currentColor; stroke: none; }
.insta:hover { color: var(--neon); transform: scale(1.08); }
.fuss-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.fuss-links a { color: var(--weiss); text-decoration: none; font-size: .95rem; opacity: .85; }
.fuss-links a:hover { opacity: 1; color: var(--neon); }

/* ---------- Detailansicht ---------- */
.detail {
  position: fixed; inset: 0; z-index: 60;
  background: var(--papier);
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr);
  padding-top: var(--leiste);
  overflow-y: auto;
  animation: einblenden .25s ease;
}
.detail-bild {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 40px;
  min-height: calc(100svh - var(--leiste));
}
.lupe-rahmen { position: relative; line-height: 0; flex-shrink: 0; }
.detail-bild img {
  max-height: calc(100svh - var(--leiste) - 110px);
  width: auto;
  box-shadow: 0 2px 6px rgba(0,0,0,.08), 0 24px 60px rgba(0,0,0,.18);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.lupe-hinweis { margin: 0; font-size: .8rem; color: var(--grau); }

/* ---------- Lupe ---------- */
@media (hover: hover) { .lupe-rahmen { cursor: zoom-in; } .lupe-rahmen.lupe-aktiv { cursor: none; } }
.lupe {
  position: absolute; left: 0; top: 0;
  width: 220px; height: 220px;
  margin: -110px 0 0 -110px;
  border-radius: 50%;
  border: 3px solid var(--weiss);
  box-shadow: 0 10px 40px rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.15);
  background-color: var(--papier);
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 3;
}
.detail-info {
  position: relative;
  background: transparent;
  padding: 56px 40px 40px;
  display: flex; flex-direction: column;
}
.schliessen {
  position: absolute; top: 12px; right: 12px;
  width: 44px; height: 44px;
  border: 0; background: none;
  font-size: 2rem; line-height: 1; color: var(--schwarz);
}
.detail-jahr { margin: 0 0 6px; color: var(--grau); font-size: .9rem; }
.detail-info h2 { color: var(--akzent-tief); transition: color .3s; margin: 0 0 28px; font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.fakten { margin: 0 0 28px; border-top: 1px solid var(--linie); }
.fakten div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--linie); }
.fakten dt { color: var(--grau); }
.fakten dd { margin: 0; font-weight: 500; text-align: right; }

.optionen { border: 0; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; }
.optionen legend { padding: 0; margin-bottom: 10px; font-weight: 700; }
.option input { position: absolute; opacity: 0; pointer-events: none; }
.option-box {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 14px 16px;
  border: 1.5px solid var(--linie); border-radius: 10px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.option input:checked + .option-box { border-color: var(--akzent-tief); }
.option input:focus-visible + .option-box { outline: 2px solid var(--blau); outline-offset: 2px; }
.option input:disabled + .option-box { opacity: .45; cursor: not-allowed; }
.option-name { font-weight: 700; display: flex; flex-direction: column; }
.option-name small { font-weight: 400; color: var(--grau); font-size: .8rem; }
#d-varianten { display: grid; gap: 10px; }
.option-preis { font-weight: 700; font-size: 1.1rem; }

.knoepfe { display: grid; gap: 10px; }
.btn {
  height: 52px; padding: 0 20px;
  border-radius: 999px;
  font-weight: 700; font-size: 1rem;
  transition: transform .1s, background .2s, color .2s;
}
.btn:active { transform: scale(.98); }
.btn-voll { background: var(--akzent); color: var(--akzent-text); border: 0; }
.btn-voll:hover { background: var(--akzent-tief); color: var(--weiss); }
.btn-rand { background: none; color: var(--akzent-tief); border: 1.5px solid var(--akzent-tief); }
.btn-rand:hover { background: var(--akzent-tief); color: var(--weiss); }
.link-btn { margin-top: 18px; align-self: flex-start; padding: 0; border: 0; background: none; color: var(--grau); text-decoration: underline; text-underline-offset: 3px; }
.link-btn:hover { color: var(--akzent-tief); }

.wand-btn {
  margin-top: 12px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; border-radius: 999px;
  border: 1.5px dashed var(--akzent-tief); background: none; color: var(--akzent-tief);
  font-weight: 700;
  transition: background .2s;
}
.wand-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.wand-btn:hover { background: var(--akzent); color: var(--akzent-text); border-style: solid; border-color: var(--akzent); }

/* ---------- An deiner Wand ---------- */
.wand {
  position: fixed; inset: 0; z-index: 75;
  background: #161616; color: var(--weiss);
  display: grid; grid-template-rows: auto 1fr auto;
  animation: einblenden .25s ease;
}
.wand-kopf { position: relative; padding: 18px 20px; }
.wand-kopf h3 { margin: 0; padding-right: 44px; font-size: 1.3rem; font-weight: 800; }
.wand .schliessen { color: var(--weiss); top: 6px; }
.wand-flaeche { position: relative; display: grid; place-items: center; overflow: hidden; padding: 0 16px; min-height: 0; }
.wand-raum {
  position: relative;
  overflow: hidden;
  background: var(--papier);
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  touch-action: none;
}
.wand-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wand-werk {
  position: absolute;
  transform: translate(-50%, -50%);
  object-fit: cover;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none; user-select: none;
  box-shadow: 0 2px 3px rgba(0,0,0,.25), 6px 14px 28px rgba(0,0,0,.35);
}
.wand-werk:active { cursor: grabbing; }
.wand-steuerung {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px;
  padding: 16px 20px 20px;
}
.wand-upload { display: inline-flex; align-items: center; cursor: pointer; }
.wand-breite { display: flex; align-items: center; gap: 12px; font-size: .9rem; }
.wand-breite input { width: 160px; accent-color: var(--neon); }
.wand-breite output { min-width: 56px; font-weight: 700; }
.wand-tipp { margin: 0; flex-basis: 100%; font-size: .8rem; opacity: .6; }

/* ---------- Warenkorb ---------- */
.abdunkler { position: fixed; inset: 0; z-index: 69; background: rgba(0,0,0,.45); animation: einblenden .2s ease; }
.warenkorb {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 70;
  width: min(420px, 100%);
  background: var(--weiss);
  display: flex; flex-direction: column;
  animation: reinschieben .3s ease;
}
.wk-kopf { position: relative; padding: 22px 24px; border-bottom: 1px solid var(--linie); }
.wk-kopf h3 { margin: 0; font-size: 1.4rem; font-weight: 800; }
.wk-kopf .schliessen { top: 10px; }
.wk-liste { list-style: none; margin: 0; padding: 8px 24px; flex: 1; overflow-y: auto; }
.wk-leer { color: var(--grau); padding: 24px 0; }
.wk-item { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--linie); }
.wk-item img { width: 64px; height: 64px; object-fit: cover; background: var(--papier); }
.wk-item strong { display: block; }
.wk-item small { color: var(--grau); }
.wk-item .wk-rechts { text-align: right; }
.wk-entfernen { border: 0; background: none; padding: 0; color: var(--grau); font-size: .8rem; text-decoration: underline; }
.wk-fuss { padding: 20px 24px 24px; border-top: 1px solid var(--linie); display: grid; gap: 14px; }
.wk-summe { display: flex; justify-content: space-between; font-size: 1.1rem; }

/* ---------- Interesse-Formular ---------- */
.modal {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(0,0,0,.55);
  display: grid; place-items: center;
  padding: 16px;
  animation: einblenden .2s ease;
}
.modal-karte {
  position: relative;
  width: min(440px, 100%);
  background: var(--weiss);
  border-radius: 16px;
  padding: 36px 28px 28px;
  display: grid; gap: 14px;
}
.modal-karte h3 { margin: 0; font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; padding-right: 32px; }
.modal-text { margin: 0 0 4px; color: var(--grau); }
.modal-karte label { display: grid; gap: 6px; font-size: .85rem; font-weight: 500; }
.modal-karte input, .modal-karte textarea {
  font: inherit; font-size: 1rem;
  padding: 12px 14px;
  border: 1.5px solid var(--linie); border-radius: 10px;
  resize: vertical;
}
.modal-karte input:focus, .modal-karte textarea:focus { outline: none; border-color: var(--blau); }
.modal-karte .btn { margin-top: 6px; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 90;
  transform: translateX(-50%);
  background: var(--schwarz); color: var(--weiss);
  padding: 12px 20px; border-radius: 999px;
  font-size: .9rem;
  animation: einblenden .2s ease;
}

@keyframes einblenden { from { opacity: 0; } to { opacity: 1; } }
@keyframes reinschieben { from { transform: translateX(100%); } to { transform: none; } }

/* ---------- Handy ---------- */
@media (max-width: 800px) {
  .detail { display: block; }
  .detail-bild { display: block; min-height: 0; padding: 24px 16px; text-align: center; }
  .lupe-rahmen { display: inline-block; }
  .lupe-hinweis { margin-top: 12px; }
  .detail-bild img { max-height: 60svh; }
  .lupe { width: 160px; height: 160px; margin: -80px 0 0 -80px; }
  .wand-breite input { width: 120px; }
  .detail-info { padding: 40px 16px 32px; }
  .interesse-btn { left: 14px; bottom: 14px; font-size: .78rem; padding: 7px 13px; }
  .topbar { padding: 0 10px 0 16px; }
  .filter-btn { padding: 6px 10px; font-size: .76rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
  .hero-titel .b { opacity: 1; transform: none; filter: none; }
}

/* ---------- Schrift: Überschriften in Bodoni, Daten und Texte in feiner, schmaler Serifenschrift ---------- */
body { font-size: 17px; font-variant-numeric: lining-nums; }
.menu a, .detail-info h2, .wand-kopf h3, .wk-kopf h3, .modal-karte h3, .logo-text {
  font-family: var(--hero-schrift);
  font-weight: 900;
  letter-spacing: 0;
}
.menu a { text-transform: uppercase; }
.fakten dd, .fakten dt { font-weight: 400; }
.optionen legend { font-weight: 600; }
.option-name { font-weight: 600; font-size: 1.1rem; }
.option-name small { font-weight: 400; font-size: .9rem; }
.option-preis { font-weight: 400; font-size: 1.1rem; }
.btn, .wand-btn { font-weight: 600; font-size: 1.05rem; letter-spacing: .02em; }
.filter-btn { font-size: .9rem; }
.filter-btn.aktiv { font-weight: 600; }
.interesse-btn { font-size: .92rem; font-weight: 500; }
.wand-breite output { font-weight: 600; }
.modal-karte label { font-weight: 500; font-size: .95rem; }
.detail-jahr, .lupe-hinweis, .wand-tipp { font-style: italic; }

/* ---------- Lieferstatus & Versand ---------- */
.option-status {
  display: flex; align-items: baseline; gap: 7px;
  margin-top: 4px;
  font-style: normal; font-weight: 400; font-size: .86rem; color: var(--grau);
}
.option-status::before {
  content: ""; flex: none;
  width: 7px; height: 7px; border-radius: 50%;
  transform: translateY(-1px);
}
.option-status[data-status="sofort"]::before { background: #2f9d5c; }
.option-status[data-status="anfertigung"]::before { background: #d99a00; }
.wk-lieferart { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; }
.wk-lieferart legend { padding: 0; margin-bottom: 4px; font-weight: 600; }
.wk-lieferart label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.wk-lieferart input { accent-color: var(--akzent-tief); }
.wk-zeile { display: flex; justify-content: space-between; color: var(--grau); }

/* ---------- Werktitel kalligrafisch (Snell Roundhand auf Apple-Geräten, sonst Pinyon Script) ---------- */
.detail-info h2 {
  font-family: var(--titel-schrift);
  font-weight: 700;
  font-synthesis: none;   /* Ersatzschrift nicht künstlich fett machen */
  font-size: clamp(2.8rem, 4.6vw, 4.2rem);
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 22px;
  padding-right: 40px;
}
.wk-item strong { font-family: var(--titel-schrift); font-weight: 700; font-synthesis: none; font-size: 1.45rem; line-height: 1.15; }

/* ---------- Bodoni überall gleich und gut lesbar: kräftigere Haarstriche ---------- */
.hero h1, .fuss-claim, .menu a, .wand-kopf h3, .wk-kopf h3, .modal-karte h3, .logo-text {
  font-optical-sizing: none;
  font-variation-settings: "opsz" 11;
}

/* ---------- Hinweis Echtheitszertifikat ---------- */
.zertifikat {
  display: flex; align-items: center; gap: 8px;
  margin: 18px 0 0;
  font-size: .95rem; color: var(--grau);
}
.zertifikat svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--akzent-tief); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Unterseiten (Über mich, Impressum, Datenschutz) ---------- */
body.unterseite { background: var(--papier); color: var(--schwarz); }
body.unterseite .topbar { background: var(--papier); color: var(--schwarz); }
body.unterseite .logo img { filter: invert(1); }
body.unterseite.menu-offen .topbar { background: transparent; color: var(--weiss); }
body.unterseite.menu-offen .logo img { filter: none; }
a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
a.icon-btn { text-decoration: none; }
.seite { max-width: 760px; margin: 0 auto; padding: calc(var(--leiste) + 56px) 20px 96px; }
.seite-titel {
  margin: 0 0 10px;
  font-family: var(--hero-schrift); font-weight: 900; text-transform: uppercase;
  font-optical-sizing: none; font-variation-settings: "opsz" 11;
  font-size: clamp(2.6rem, 8vw, 5rem); line-height: .95; text-wrap: balance;
}
.seite-unterzeile { margin: 0 0 40px; font-style: italic; color: var(--grau); }
.seite h2 {
  margin: 44px 0 10px;
  font-family: var(--hero-schrift); font-weight: 900; text-transform: uppercase; letter-spacing: .04em;
  font-optical-sizing: none; font-variation-settings: "opsz" 11;
  font-size: 1.15rem; text-wrap: balance;
}
.seite p, .seite li { font-size: 1.06rem; line-height: 1.65; max-width: 65ch; }
.seite ul { padding-left: 1.2em; }
.seite address { font-style: normal; font-size: 1.06rem; line-height: 1.65; }
.platzhalter { background: rgba(232, 255, 28, .55); padding: 0 .2em; border-radius: 2px; }
.hinweis-box { margin: 0 0 8px; padding: 14px 18px; border: 1px solid var(--linie); border-radius: 10px; font-size: .95rem; color: var(--grau); }
.seite-stand { margin-top: 48px; font-style: italic; color: var(--grau); }

/* Über mich */
.ueber-kopf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 40px; align-items: center; margin-bottom: 56px; }
.portraet {
  aspect-ratio: 4 / 5; max-width: 100%;
  display: grid; place-items: center;
  background: linear-gradient(160deg, #e7e2d8, #d6cfc2);
  color: var(--grau); font-style: italic; text-align: center; padding: 16px;
}
.seite .ueber-name { margin: 0 0 6px; font-family: var(--titel-schrift); font-weight: 700; font-synthesis: none; font-size: clamp(3rem, 7vw, 4.4rem); line-height: 1.05; color: var(--blau); }
.seite .zitat { max-width: none; margin: 56px 0; font-family: var(--titel-schrift); font-weight: 700; font-synthesis: none; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.3; text-align: center; color: var(--blau); }
.bilderreihe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 40px 0 12px; }
.bilderreihe figure { margin: 0; }
.bilderreihe img { width: 100%; aspect-ratio: 5 / 7; object-fit: cover; }
.bilderreihe figcaption { margin-top: 6px; font-size: .88rem; font-style: italic; color: var(--grau); }
.seite-cta { margin-top: 48px; display: flex; gap: 12px; flex-wrap: wrap; }
.seite-cta .btn { min-width: 220px; }
@media (max-width: 700px) {
  .ueber-kopf { grid-template-columns: 1fr; gap: 24px; }
  .portraet { width: min(100%, 340px); }
  .bilderreihe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bilderreihe figure:last-child { display: none; }
}

/* ---------- Detailseite weiter unten: Geschichte, Details, Gut zu wissen ---------- */
.mehr-link { margin-top: 26px; align-self: flex-start; color: var(--akzent-tief); text-decoration: none; font-weight: 500; }
.mehr-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.detail-mehr { grid-column: 1 / -1; border-top: 1px solid var(--linie); padding: 64px 40px 96px; scroll-margin-top: var(--leiste); }
.mehr-inhalt { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 64px; }
.mehr-titel {
  margin: 0 0 16px;
  font-family: var(--hero-schrift); font-weight: 900; text-transform: uppercase; letter-spacing: .04em;
  font-optical-sizing: none; font-variation-settings: "opsz" 11;
  font-size: 1.15rem; color: var(--akzent-tief);
}
.mehr-seite .mehr-titel + .fakten { margin-bottom: 40px; }
.mehr-geschichte p { margin: 0 0 16px; max-width: 62ch; font-size: 1.1rem; line-height: 1.7; }
.mehr-platzhalter { color: var(--grau); font-style: italic; }
.mehr-zitat {
  margin: 36px 0 0 !important;
  font-family: var(--titel-schrift); font-weight: 700; font-synthesis: none;
  font-size: clamp(1.7rem, 3vw, 2.3rem) !important; line-height: 1.3 !important; color: var(--akzent-tief);
}
.mehr-liste { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.mehr-liste li { position: relative; padding-left: 18px; line-height: 1.5; }
.mehr-liste li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--akzent-tief); }
@media (max-width: 800px) {
  .detail-mehr { padding: 48px 16px 72px; }
  .mehr-inhalt { grid-template-columns: 1fr; gap: 40px; }
}

/* ---------- Solange der Online-Shop noch nicht läuft (hinweis.js) ---------- */
.bald-hinweis { display: none; }
.shop-aus .bald-hinweis {
  display: grid; gap: 14px; margin: 4px 0 14px;
  padding: 16px 18px; border: 1.5px solid var(--akzent-tief); border-radius: 4px;
}
.bald-hinweis p { margin: 0; font-size: 1rem; line-height: 1.45; }
.bald-hinweis strong { font-weight: 600; color: var(--akzent-tief); }
.shop-aus #detail-interesse { display: none; }
.shop-aus .knoepfe .btn { opacity: .42; cursor: not-allowed; background: none; color: var(--schwarz); border: 1.5px solid currentColor; display: grid; gap: 1px; justify-items: center; }
.shop-aus .knoepfe .btn:hover { background: none; color: var(--schwarz); }
.knoepfe .bald { font-size: .78rem; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; }
.anstupsen { animation: anstupsen .5s ease; }
@keyframes anstupsen { 30% { transform: scale(1.04); } 60% { transform: scale(.98); } }

/* Warenkorb ausblenden */
.shop-aus #warenkorb-btn, .shop-aus [data-oeffne-warenkorb],
.shop-aus a[href="./#warenkorb"], .shop-aus li:has(> a[href="./#warenkorb"]) { display: none !important; }

/* Hinweis-Banner unten */
.hinweis-banner {
  position: fixed; z-index: 85; left: 24px; bottom: 24px; max-width: 460px;
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 14px 16px 20px;
  background: var(--papier); color: var(--schwarz);
  border-left: 4px solid var(--blau); border-radius: 4px;
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
  font-family: var(--schrift); font-size: .98rem; line-height: 1.45;
  animation: banner-rein .5s ease 1s both;
  transition: opacity .25s, transform .25s;
}
.hinweis-banner p { margin: 0; }
.hinweis-banner strong { display: block; margin-bottom: 2px; color: var(--blau); font-weight: 600; }
.hinweis-banner b { font-weight: 600; }
.hinweis-zu {
  flex: none; width: 32px; height: 32px; margin: -6px -2px 0 0; padding: 0;
  border: 0; background: none; color: var(--schwarz); font-size: 1.6rem; line-height: 1;
}
.hinweis-zu:hover { color: var(--blau); }
.hinweis-banner.weg { opacity: 0; transform: translateY(12px); }
@keyframes banner-rein { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (max-width: 800px) {
  .hinweis-banner { left: 16px; right: 16px; bottom: 16px; max-width: none; font-size: .92rem; }
}
@media (prefers-reduced-motion: reduce) { .hinweis-banner, .anstupsen { animation: none; } }

.mehr-inhalt.ohne-geschichte { grid-template-columns: 1fr; max-width: 640px; }
.modal-direkt { margin: 4px 0 0; font-size: .92rem; color: var(--grau); text-align: center; }
.modal-direkt a { color: inherit; text-underline-offset: 3px; }