/* Konzept: Das Haus als Passepartout. Heller Museumskarton als Fläche, jedes Bild im Schrägschnitt,
   Schildblau der ovalen Fassadenschilder für Struktur, Blattgold nur als Kante. Die Geschichte steht als Buchrücken im Regal. */

@font-face { font-family: "Caslon Display"; src: url("../fonts/libre-caslon-display-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Caslon Text"; src: url("../fonts/libre-caslon-text-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Caslon Text"; src: url("../fonts/libre-caslon-text-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Caslon Text"; src: url("../fonts/libre-caslon-text-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow SC"; src: url("../fonts/barlow-semi-condensed-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow SC"; src: url("../fonts/barlow-semi-condensed-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow SC"; src: url("../fonts/barlow-semi-condensed-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  /* Farbe */
  --karton: #EFEEE9;          /* Museumskarton, die Fläche der Seite */
  --passepartout: #F9F8F4;    /* Passepartout um jedes Bild */
  --kern-hell: #FFFFFF;       /* Schrägschnitt, Lichtseite */
  --kern-schatten: #DCD9CF;   /* Schrägschnitt, Schattenseite */
  --text: #1E2840;            /* Schildblau */
  --text-2: #4C536A;
  --linie: rgba(30, 40, 64, .16);
  --band: #1E2840;            /* Schilderband, Fuß */
  --band-text: #F1EEE6;
  --gold: #9A7737;            /* Blattgold auf hell */
  --gold-schrift: #84652C;    /* Gold für kleine Schrift, Kontrast 4,7:1 */
  --gold-hell: #D2B26C;       /* Blattgold auf dunkel */
  --licht: #E8813F;           /* Lichtband der Fassade, nur für „geöffnet“ */
  --knopf: #1E2840;
  --knopf-text: #F7F5EF;
  --matte-dunkel: #24262B;
  --schatten-rgb: 30, 40, 64;
  --leder-blau: #22304F; --leder-rot: #6B2D2A; --leder-gruen: #2F4A3E; --leder-braun: #5E4130;
  --wand: #E6E3DA;
  --logo: #1E2840;
  --fehler: #9C3B2E;
  --erfolg: #2F5D46;
  --feld: #FFFFFF;

  /* Schrift */
  --f-display: "Caslon Display", "Libre Caslon Display", "Big Caslon", "Baskerville", Georgia, serif;
  --f-text: "Caslon Text", "Libre Caslon Text", "Baskerville", Georgia, serif;
  --f-ui: "Barlow SC", "Barlow Semi Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;

  /* Maß */
  --breite: 78rem;
  --rand: clamp(1rem, 4vw, 3rem);
  --abstand: clamp(4.5rem, 10vw, 9rem);
  --ease: cubic-bezier(.23, 1, .32, 1);
  color-scheme: light;
}

/* Die Seite erscheint immer hell, unabhängig von der Geräteeinstellung. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--karton);
  color: var(--text);
  font-family: var(--f-text);
  font-size: clamp(1.0625rem, .35vw + 1rem, 1.1875rem);
  line-height: 1.62;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: var(--gold); }
a:hover { text-decoration-color: currentColor; }
::selection { background: var(--gold-hell); color: #141A27; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
[hidden] { display: none !important; }
.nw { white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

html { scrollbar-color: var(--text-2) var(--karton); }

.skip { position: absolute; left: 1rem; top: -4rem; z-index: 50; background: var(--band); color: var(--band-text); padding: .6rem 1rem; font-family: var(--f-ui); }
.skip:focus { top: 1rem; }

/* ---------- Kopf ---------- */
.kopf {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: var(--karton);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease;
}
.kopf.ist-gerollt { border-bottom-color: var(--linie); }
.kopf__innen {
  max-width: var(--breite); margin: 0 auto;
  padding: .85rem var(--rand);
  display: flex; align-items: center; gap: 1.5rem;
}
.marke { display: flex; align-items: center; gap: .75rem; text-decoration: none; margin-right: auto; }
.marke__schild { width: 2.1rem; height: auto; color: var(--logo); flex: none; }
.marke__text { display: grid; line-height: 1.15; }
.marke__name { font-family: var(--f-display); font-size: 1.28rem; letter-spacing: .005em; white-space: nowrap; }
.marke__ort { font-family: var(--f-ui); font-size: .82rem; color: var(--text-2); letter-spacing: .02em; }

.nav__liste { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.6rem; }
.nav a {
  font-family: var(--f-ui); font-weight: 500; font-size: 1.02rem; letter-spacing: .01em;
  text-decoration: none; padding-block: .7rem; display: inline-block; background-image: linear-gradient(var(--gold), var(--gold));
  background-size: 0 1px; background-repeat: no-repeat; background-position: 0 calc(100% - .5rem);
  transition: background-size .25s var(--ease);
}
.nav a:hover, .nav a[aria-current="true"] { background-size: 100% 1px; }
.nav__termin { padding-left: 1.6rem; border-left: 1px solid var(--linie); }
.nav__termin a { font-weight: 600; background-size: 100% 1px; }
.nav__termin a:hover { background-size: 100% 2px; }

/* Status als kleines Oval-Schild */
.schild-status {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .42rem 1rem .42rem .8rem;
  border-radius: 999px;
  background: var(--band); color: var(--band-text);
  font-family: var(--f-ui); font-weight: 500; font-size: .92rem; letter-spacing: .02em;
  text-decoration: none; white-space: nowrap;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.1), inset 0 0 0 3px var(--band), inset 0 0 0 4px rgba(210,178,108,.45);
}
.schild-status__licht { width: .5rem; height: .5rem; border-radius: 50%; background: #8B8F9C; flex: none; }
.schild-status.ist-offen .schild-status__licht { background: var(--licht); box-shadow: 0 0 0 3px rgba(232,129,63,.25), 0 0 10px 2px rgba(232,129,63,.55); }

/* Sprachwechsel: schlichte Textlinks, groß genug zum Antippen */
.sprachen { display: flex; align-items: center; }
.sprache {
  font-family: var(--f-ui); font-weight: 600; font-size: .95rem; letter-spacing: .08em;
  text-decoration: none; color: var(--text);
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.4rem; min-height: 2.75rem;
  background-image: linear-gradient(var(--gold), var(--gold)); background-repeat: no-repeat;
  background-size: 0 1px; background-position: 50% calc(100% - .55rem);
  transition: background-size .25s var(--ease);
}
.sprache:hover, .sprache:focus-visible { background-size: 1.4rem 1px; }

.menue-knopf { display: none; }

@media (max-width: 1400px) {
  .nav__liste { gap: 1.1rem; }
  .nav__termin { padding-left: 1.1rem; }
}
.nav a { white-space: nowrap; }
@media (max-width: 1260px) {
  .kopf__innen { gap: .75rem; }
  .menue-knopf {
    display: inline-flex; align-items: center; gap: .5rem;
    background: none; border: 1px solid var(--linie); color: var(--text);
    font-family: var(--f-ui); font-weight: 500; font-size: 1rem; padding: .45rem .8rem; border-radius: 4px; cursor: pointer;
  }
  .menue-knopf__striche, .menue-knopf__striche::before { display: block; width: 1rem; height: 1px; background: currentColor; position: relative; }
  .menue-knopf__striche::before { content: ""; position: absolute; top: 5px; }
  .menue-knopf__striche { transform: translateY(-2px); }
  .nav {
    position: absolute; inset: 100% 0 auto 0;
    background: var(--karton); border-bottom: 1px solid var(--linie);
    padding: .5rem var(--rand) 1.25rem;
    display: none;
  }
  .nav.ist-offen { display: block; }
  .nav__liste { flex-direction: column; gap: 0; }
  .nav a { display: block; padding: .8rem 0; font-size: 1.2rem; border-bottom: 1px solid var(--linie); background: none; }
  .nav__termin { padding-left: 0; border-left: 0; }
  .nav__termin a { margin-top: 1rem; border: 0; text-align: center; background: var(--knopf); color: var(--knopf-text); border-radius: 3px; }
  .schild-status__text { font-size: .85rem; }
}
@media (max-width: 560px) {
  .marke__ort { display: none; }
  .marke__name { font-size: 1.05rem; white-space: normal; }
  .schild-status { padding: .4rem .7rem; min-width: 2.75rem; min-height: 2.75rem; justify-content: center; }
  .schild-status__text { display: none; }
  .schild-status__licht { width: .6rem; height: .6rem; }
}
@media (max-width: 400px) {
  /* sehr schmale Handys: Menü nur als Symbol, Text bleibt für Vorlesesoftware */
  .menue-knopf { min-width: 2.75rem; min-height: 2.75rem; justify-content: center; padding: .45rem; }
  .menue-knopf__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .kopf__innen { gap: .4rem; }
  .marke { gap: .5rem; }
  .sprache { min-width: 2rem; }
  .schild-status { min-width: 2.5rem; }
}

/* ---------- Passepartout-System ---------- */
.matte {
  background: var(--passepartout);
  padding: clamp(.8rem, 4.5%, 2.6rem);
  box-shadow:
    0 1px 1px rgba(var(--schatten-rgb), .06),
    0 22px 44px -28px rgba(var(--schatten-rgb), .45);
}
.matte--gross { padding: clamp(1rem, 7%, 3.6rem); }
.matte--klein { padding: clamp(.6rem, 5%, 1.2rem); }
.matte--dunkel { background: var(--matte-dunkel); --kern-hell: #4A4D55; --kern-schatten: #0E0F12; }
.fenster {
  position: relative;
  border: 3px solid;
  border-color: var(--kern-schatten) var(--kern-hell) var(--kern-hell) var(--kern-schatten);
}
.fenster::after { /* Bild liegt eine Kartonstärke tiefer */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 1px 2px 3px rgba(0,0,0,.22);
}
.fenster img { width: 100%; }

/* Museums-Etikett */
.etikett { display: grid; gap: .2rem; margin-top: 1rem; max-width: 34rem; }
.etikett__titel { font-family: var(--f-text); font-style: italic; font-size: 1.05rem; }
.etikett__zeile { font-family: var(--f-ui); font-size: .98rem; line-height: 1.45; color: var(--text-2); }
.etikett__zeile + .etikett__zeile { margin-top: .35rem; }

/* ---------- Bausteine ---------- */
.abschnitt { max-width: var(--breite); margin: 0 auto; padding: var(--abstand) var(--rand) 0; }
.titel { font-family: var(--f-display); font-size: clamp(2.1rem, 4.2vw, 3.5rem); line-height: 1.08; letter-spacing: -.01em; }
.untertitel { font-family: var(--f-display); font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.15; }
.lead { font-size: clamp(1.1rem, .6vw + 1rem, 1.3rem); line-height: 1.55; color: var(--text-2); max-width: 36em; }
.spalten__text { display: grid; gap: 1.1rem; justify-items: start; }
.spalten--kopf { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1.5rem 4rem; align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
@media (max-width: 860px) { .spalten--kopf { grid-template-columns: 1fr; } }

.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: .75rem 1.4rem;
  background: var(--knopf); color: var(--knopf-text);
  font-family: var(--f-ui); font-weight: 600; font-size: 1.06rem; letter-spacing: .015em;
  text-decoration: none; border-radius: 3px;
  transition: transform .16s var(--ease), box-shadow .2s ease;
  box-shadow: 0 1px 0 rgba(var(--schatten-rgb), .2);
}
.knopf:hover { box-shadow: 0 8px 18px -10px rgba(var(--schatten-rgb), .6); }
.knopf:active { transform: translateY(1px) scale(.985); }
.textlink { display: inline-block; padding-block: .6rem; font-family: var(--f-ui); font-weight: 600; font-size: 1.06rem; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: .3em; }
.kleingedruckt { font-family: var(--f-ui); font-size: .95rem; color: var(--text-2); }

/* ---------- Auftakt ---------- */
.auftakt {
  max-width: var(--breite); margin: 0 auto;
  padding: clamp(2rem, 5vw, 4.5rem) var(--rand) clamp(3rem, 6vw, 5rem);
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.auftakt__titel {
  font-family: var(--f-display);
  font-size: clamp(2.75rem, 6.4vw, 5.6rem);
  line-height: .98; letter-spacing: -.02em;
}
.auftakt__lead { margin-top: 1.6rem; font-size: clamp(1.15rem, .7vw + 1rem, 1.38rem); line-height: 1.5; max-width: 30em; }
.auftakt__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2rem; }
.auftakt__hinweis { margin-top: 1.4rem; font-family: var(--f-ui); font-size: 1rem; color: var(--text-2); max-width: 32em; }
.auftakt__bild { margin: 0; }
.auftakt__bild .fenster { overflow: hidden; }
.auftakt__bild .fenster img { aspect-ratio: 4 / 4.4; object-fit: cover; object-position: 50% 40%; }

/* Ein einziger Auftritt: das Foto setzt sich beim Laden sanft ins Passepartout */
@media (prefers-reduced-motion: no-preference) {
  /* Das Bild ist sofort sichtbar (zählt für Google als „geladen“) und setzt sich nur sanft */
  .auftakt__bild .matte { animation: matte-auf .9s var(--ease) both; }
  .auftakt__bild .fenster img { animation: bild-auf 1.4s var(--ease) both; }
}
@keyframes matte-auf { from { box-shadow: 0 0 0 rgba(0,0,0,0); } }
@keyframes bild-auf { from { transform: scale(1.04); } }

@media (max-width: 860px) {
  .auftakt { grid-template-columns: 1fr; }
  .auftakt__bild { max-width: 34rem; }
}

/* ---------- Schilderband ---------- */
.schilderband {
  background: var(--band); color: var(--band-text);
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
  gap: .9rem clamp(1rem, 4vw, 3.5rem);
  padding: 1.1rem var(--rand);
}
.schilderband a {
  font-family: var(--f-ui); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; font-size: clamp(.85rem, 1.4vw, 1.05rem);
  text-decoration: none; padding: .3rem .2rem;
}
.schilderband a:hover { color: var(--gold-hell); }
.schilderband__oval { width: 2.4rem; color: var(--gold-hell); opacity: .8; }
@media (max-width: 640px) { .schilderband { flex-direction: column; gap: .2rem; } .schilderband__oval { display: none; } }

/* ---------- Werkstatt ---------- */
.leistungen {
  list-style: none; padding: 0;
  margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--linie);
}
.leistung { padding: 1.6rem 0 1.7rem; border-bottom: 1px solid var(--linie); display: grid; gap: .45rem; align-content: start; }
.leistung:nth-child(odd) { padding-right: clamp(1.5rem, 4vw, 3.5rem); }
.leistung:nth-child(even) { padding-left: clamp(1.5rem, 4vw, 3.5rem); border-left: 1px solid var(--linie); }
.leistung h3 { font-family: var(--f-display); font-size: 1.55rem; line-height: 1.2; }
.leistung p { margin: 0; max-width: 34em; }
.leistung .material { font-family: var(--f-ui); font-size: .98rem; color: var(--gold-schrift); font-weight: 500; letter-spacing: .01em; }
@media (max-width: 760px) {
  .leistungen { grid-template-columns: 1fr; }
  .leistung:nth-child(n) { padding-left: 0; padding-right: 0; border-left: 0; }
}

.ablauf { margin-top: clamp(4rem, 8vw, 6.5rem); }
.ablauf__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
.ablauf__hilfe { font-family: var(--f-ui); color: var(--text-2); }
.ablauf__liste {
  list-style: none; margin: 0; padding: 0 0 1.5rem;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(13.5rem, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  counter-reset: schritt;
  scrollbar-width: thin;
}
.schritt { scroll-snap-align: start; counter-increment: schritt; display: grid; gap: .6rem; align-content: start; }
.schritt .fenster img { aspect-ratio: 4 / 3; object-fit: cover; }
.schritt__titel { font-family: var(--f-display); font-size: 1.4rem; margin-top: .6rem; display: flex; gap: .6rem; align-items: baseline; }
.schritt__titel::before { content: counter(schritt); font-family: var(--f-ui); font-weight: 600; font-size: .95rem; color: var(--gold-schrift); min-width: 1.4rem; height: 1.4rem; display: inline-grid; place-items: center; border: 1px solid var(--gold); border-radius: 50%; transform: translateY(-.15rem); }
.schritt p { font-size: 1rem; color: var(--text-2); }
@media (max-width: 900px) { .ablauf__liste { grid-auto-columns: 78%; } }

/* ---------- Rahmenprobe ---------- */
.probe__flaeche {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
.probe__wand {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.35), transparent 60%),
    var(--wand);
  min-height: 34rem; display: grid; place-items: center;
  padding: clamp(1.5rem, 5vw, 3.5rem);
  position: relative; overflow: hidden;
}
.probe__wand::before { /* Lichtkegel eines Strahlers */
  content: ""; position: absolute; inset: -20% 15% auto; height: 70%;
  background: radial-gradient(50% 60% at 50% 0%, rgba(255,240,215,.45), transparent 70%);
  pointer-events: none;
}
.rahmen {
  --fw: 27px; --pw: 54px; --pp: #fbfaf6;
  --m1: #5A3A27; --m2: #3E2617; --m3: #7A5136; --korn: rgba(0,0,0,.08);
  position: relative; padding: var(--fw);
  width: min(100%, var(--rahmen-max, 26rem));
  filter: drop-shadow(0 18px 18px rgba(20, 16, 10, .28)) drop-shadow(0 3px 3px rgba(20,16,10,.25));
  transition: width .35s var(--ease);
}
.rahmen__seite { position: absolute; display: block; }
.rahmen__seite--o { inset: 0 0 auto 0; height: var(--fw); clip-path: polygon(0 0, 100% 0, calc(100% - var(--fw)) 100%, var(--fw) 100%);
  background: linear-gradient(180deg, var(--m3), var(--m1) 45%, var(--m2)), repeating-linear-gradient(90deg, var(--korn) 0 2px, transparent 2px 7px); background-blend-mode: multiply; }
.rahmen__seite--u { inset: auto 0 0 0; height: var(--fw); clip-path: polygon(var(--fw) 0, calc(100% - var(--fw)) 0, 100% 100%, 0 100%);
  background: linear-gradient(0deg, var(--m2), var(--m1) 55%, var(--m2)), repeating-linear-gradient(90deg, var(--korn) 0 2px, transparent 2px 9px); background-blend-mode: multiply; filter: brightness(.78); }
.rahmen__seite--l { inset: 0 auto 0 0; width: var(--fw); clip-path: polygon(0 0, 100% var(--fw), 100% calc(100% - var(--fw)), 0 100%);
  background: linear-gradient(90deg, var(--m3), var(--m1) 45%, var(--m2)), repeating-linear-gradient(0deg, var(--korn) 0 2px, transparent 2px 8px); background-blend-mode: multiply; filter: brightness(.93); }
.rahmen__seite--r { inset: 0 0 0 auto; width: var(--fw); clip-path: polygon(0 var(--fw), 100% 0, 100% 100%, 0 calc(100% - var(--fw)));
  background: linear-gradient(270deg, var(--m2), var(--m1) 55%, var(--m3)), repeating-linear-gradient(0deg, var(--korn) 0 2px, transparent 2px 6px); background-blend-mode: multiply; filter: brightness(.84); }
.rahmen__pp {
  position: relative; background: var(--pp); padding: var(--pw);
  box-shadow: inset 2px 2px 3px rgba(0,0,0,.35), inset -1px -1px 1px rgba(255,255,255,.15);
  transition: padding .3s var(--ease), background-color .3s ease;
}
.rahmen__ausschnitt { position: relative; border: 2px solid; border-color: #d7d3c8 #ffffff #ffffff #d7d3c8; }
.rahmen.ohne-pp .rahmen__ausschnitt { border-color: transparent; }
.rahmen__ausschnitt img { width: 100%; }
.rahmen__glas {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(118deg, transparent 18%, rgba(255,255,255,var(--glanz, .3)) 32%, transparent 44%, transparent 62%, rgba(255,255,255,calc(var(--glanz, .3) * .55)) 70%, transparent 78%);
  -webkit-backdrop-filter: blur(var(--matt, 0px));
  backdrop-filter: blur(var(--matt, 0px));
  transition: opacity .3s ease;
}

.probe__steuerung { display: grid; gap: 1.35rem; }
.feld { border: 0; margin: 0; padding: 0; min-width: 0; }
.feld legend, .feld--regler label { font-family: var(--f-ui); font-weight: 600; font-size: .98rem; letter-spacing: .02em; margin-bottom: .55rem; padding: 0; display: flex; justify-content: space-between; width: 100%; }
.feld output { font-weight: 500; color: var(--text-2); font-variant-numeric: tabular-nums; }
.wahl { display: flex; flex-wrap: wrap; gap: .5rem; }
.wahl label { position: relative; cursor: pointer; }
.wahl input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.wahl label > span:last-child {
  display: inline-flex; align-items: center; min-height: 2.6rem; padding: .45rem .85rem;
  border: 1px solid var(--linie); border-radius: 3px; background: var(--passepartout);
  font-family: var(--f-ui); font-size: 1rem; transition: border-color .15s ease, box-shadow .15s ease;
}
.wahl--leiste label, .wahl--pp label { display: inline-flex; }
.wahl--leiste label > span:last-child, .wahl--pp label > span:last-child { padding-left: 2.6rem; }
.muster, .tupfer { position: absolute; left: .55rem; top: 50%; translate: 0 -50%; width: 1.6rem; height: 1.6rem; border-radius: 2px; z-index: 1; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.tupfer { background: var(--t); border-radius: 50%; }
.muster--gold { background: linear-gradient(135deg, #8a6420, #e6c46a 40%, #a57b2c 60%, #f0d68a); }
.muster--silber { background: linear-gradient(135deg, #8d9196, #e9ebee 45%, #a3a7ad 60%, #f5f6f7); }
.muster--nuss { background: repeating-linear-gradient(100deg, #5A3A27 0 3px, #4a2f1f 3px 6px, #6b4630 6px 8px); }
.muster--eiche { background: repeating-linear-gradient(100deg, #c9a573 0 3px, #b89262 3px 5px, #d6b583 5px 9px); }
.muster--alu { background: linear-gradient(135deg, #1a1b1d, #46484c 50%, #222326); }
.muster--weiss { background: repeating-linear-gradient(100deg, #f1ede4 0 3px, #e3ddd0 3px 5px, #f7f4ec 5px 9px); }
.wahl input:checked + span, .wahl input:checked ~ span:last-child { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.wahl input:focus-visible ~ span:last-child { outline: 2px solid var(--gold); outline-offset: 2px; }
.wahl label:hover > span:last-child { border-color: var(--text-2); }

input[type="range"] { width: 100%; accent-color: var(--text); height: 1.6rem; margin: 0; }

.probe__ergebnis { border-top: 1px solid var(--linie); padding-top: 1.1rem; display: grid; gap: .4rem; }
.probe__satz { font-size: 1.05rem; }
.probe__mass { font-family: var(--f-ui); color: var(--text-2); font-variant-numeric: tabular-nums; }

@media (max-width: 960px) {
  .probe__flaeche { grid-template-columns: 1fr; }
  .probe__wand { min-height: 0; }
}

.wissen {
  margin-top: clamp(3.5rem, 7vw, 6rem);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.wissen__zitat { margin: 0; font-family: var(--f-display); font-size: clamp(1.6rem, 2.8vw, 2.4rem); line-height: 1.2; }
.wissen__liste dl { margin: 1.25rem 0 0; display: grid; gap: 1.1rem; }
.wissen__liste dl > div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1rem; padding-top: 1.1rem; border-top: 1px solid var(--linie); }
.wissen__liste dt { font-family: var(--f-ui); font-weight: 600; }
.wissen__liste dd { margin: 0; }
.wissen__aktion { margin-top: 1.4rem; font-style: italic; color: var(--text-2); }
@media (max-width: 860px) {
  .wissen { grid-template-columns: 1fr; }
  .wissen__liste dl > div { grid-template-columns: 1fr; gap: .2rem; }
}

/* ---------- Sortiment: eine gehängte Wand ---------- */
.wand {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem) clamp(1.25rem, 3vw, 2.75rem);
  align-items: start;
}
.werk { margin: 0; min-width: 0; }
.werk--a { grid-column: 1 / span 7; }
.werk--b { grid-column: 8 / span 4; margin-top: 4rem; }
.werk--c { grid-column: 2 / span 6; }
.werk--d { grid-column: 8 / span 3; }
.werk--e { grid-column: 11 / span 2; margin-top: 6rem; }
.werk--f { grid-column: 1 / span 3; }
.werk--g { grid-column: 4 / span 5; margin-top: 3rem; }
.werk--h { grid-column: 9 / span 4; margin-top: 1rem; }
.werk--b .fenster img { aspect-ratio: 3 / 4; object-fit: cover; }
.werk--d .fenster img { aspect-ratio: 3 / 4.4; object-fit: cover; }
.werk--e .fenster img { aspect-ratio: 3 / 4.4; object-fit: cover; }
.werk--f .fenster img { aspect-ratio: 3 / 4.6; object-fit: cover; }
@media (max-width: 1000px) {
  .werk--e { grid-column: 11 / span 2; }
}
@media (max-width: 860px) {
  .wand { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .werk { grid-column: auto !important; margin-top: 0 !important; }
  .werk--a, .werk--c, .werk--g, .werk--h { grid-column: 1 / -1 !important; }
}
@media (max-width: 520px) {
  .wand { grid-template-columns: 1fr; }
  .werk { grid-column: 1 / -1 !important; }
}

/* ---------- Schaufenster ---------- */
.fensterreihe { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2.5rem); }
.fensterreihe figure { margin: 0; }
.fensterreihe .fenster img { aspect-ratio: 4 / 5; object-fit: cover; }
.fensterreihe li:nth-child(2) { margin-top: 2.5rem; }
@media (max-width: 760px) {
  .fensterreihe { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 74%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; }
  .fensterreihe li { scroll-snap-align: start; }
  .fensterreihe li:nth-child(2) { margin-top: 0; }
}

/* ---------- Hausbesuch ---------- */
.hausbesuch { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.hausbesuch__bild { margin: 0; }
.hausbesuch__bild .fenster img { aspect-ratio: 1600 / 1728; object-fit: cover; }
.hausbesuch__text { display: grid; gap: 1.5rem; justify-items: start; }
.haken { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; width: 100%; }
.haken li { padding: .7rem 0 .7rem 2rem; border-bottom: 1px solid var(--linie); position: relative; }
.haken li::before { content: ""; position: absolute; left: .15rem; top: 1.25rem; width: .8rem; height: .45rem; border-left: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold); transform: rotate(-45deg); }
@media (max-width: 860px) { .hausbesuch { grid-template-columns: 1fr; } .hausbesuch__bild { max-width: 30rem; } }

/* ---------- Geschichte: das Regal ---------- */
.regal {
  position: relative;
  padding-top: 2.5rem;
  overflow-x: auto; overflow-y: hidden;
}
.regal__boden, .regal__reihe { display: flex; align-items: flex-end; gap: 3px; }
.regal__reihe { height: 100%; }
.regal__boden {
  justify-content: center;
  height: 22rem; min-width: max-content;
  border-bottom: 14px solid #6A4A33;
  box-shadow: 0 10px 14px -8px rgba(0,0,0,.35);
  padding-inline: .5rem;
}
.ruecken {
  --farbe: var(--leder-blau);
  position: relative;
  height: var(--h); width: var(--b);
  border: 0; border-radius: 3px 3px 1px 1px; cursor: pointer;
  color: #E7CF8E;
  font-family: var(--f-display); font-size: 1.35rem; letter-spacing: .06em;
  writing-mode: vertical-rl; transform-origin: bottom center;
  display: grid; place-items: center;
  background:
    linear-gradient(90deg, rgba(0,0,0,.35), rgba(255,255,255,.08) 18%, rgba(255,255,255,.14) 30%, rgba(0,0,0,0) 55%, rgba(0,0,0,.3)),
    var(--farbe);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
  text-shadow: 0 1px 0 rgba(0,0,0,.45);
  transition: transform .35s var(--ease), filter .2s ease;
}
/* Bünde und Goldlinien */
.ruecken::before, .ruecken::after {
  content: ""; position: absolute; left: 10%; right: 10%; height: 9px;
  border-top: 1px solid rgba(231,207,142,.7); border-bottom: 1px solid rgba(231,207,142,.7);
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.2));
}
.ruecken::before { top: 12%; }
.ruecken::after { bottom: 10%; }
.ruecken--rot { --farbe: var(--leder-rot); }
.ruecken--gruen { --farbe: var(--leder-gruen); }
.ruecken--braun { --farbe: var(--leder-braun); }
.ruecken--leer { cursor: default; filter: saturate(.7) brightness(.85); }
.ruecken--leer:hover { transform: none; }
.ruecken--schraeg { transform: rotate(8deg) translate(.5rem, -.1rem); transform-origin: bottom left; margin-left: .2rem; }
.ruecken--schraeg:hover { transform: rotate(8deg) translate(.5rem, -.1rem); }
.ruecken { font-size: 1.5rem; }
.ruecken:hover { transform: translateY(-.45rem); }
.ruecken[aria-selected="true"] { transform: translateY(-1.6rem); filter: brightness(1.12); }
.ruecken:focus-visible { outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .ruecken { transition: none; } }

.chronik {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem clamp(1.5rem, 4vw, 3.5rem); align-items: start;
  padding: 2.25rem 0 0; max-width: 56rem;
}
.chronik:focus-visible { outline-offset: 8px; }
.chronik__jahr { font-family: var(--f-display); font-size: clamp(3.5rem, 8vw, 6rem); line-height: .85; color: var(--gold); font-variant-numeric: lining-nums; min-width: 4ch; }
.chronik__titel { font-family: var(--f-display); font-size: 1.7rem; margin-bottom: .5rem; }
.chronik__text p { max-width: 36em; }
.chronik.mit-bild { grid-template-columns: auto minmax(0, 1fr) auto; max-width: 66rem; }
.chronik__bild { margin: 0; display: grid; gap: .6rem; justify-items: center; }
.chronik__bild figcaption { font-style: italic; font-size: .98rem; color: var(--text-2); text-align: center; max-width: 12rem; }
/* Ovales Passepartout, wie bei Porträts dieser Zeit üblich */
.oval {
  background: var(--passepartout); padding: 1rem 1.1rem;
  box-shadow: 0 1px 1px rgba(var(--schatten-rgb), .06), 0 18px 34px -22px rgba(var(--schatten-rgb), .5);
}
.oval__fenster {
  width: clamp(8.5rem, 14vw, 10.5rem); aspect-ratio: 3 / 4;
  border-radius: 50%; overflow: hidden;
  border: 3px solid; border-color: var(--kern-schatten) var(--kern-hell) var(--kern-hell) var(--kern-schatten);
  box-shadow: inset 1px 2px 3px rgba(0,0,0,.25);
}
.oval__fenster img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: sepia(.18) contrast(1.02); }
@media (prefers-reduced-motion: no-preference) {
  .chronik__bild:not([hidden]) { animation: portraet-auf .5s var(--ease) both; }
}
@keyframes portraet-auf { from { opacity: 0; transform: translateY(.5rem); } }
@media (max-width: 760px) {
  .chronik.mit-bild { grid-template-columns: auto minmax(0, 1fr); }
  .chronik__bild { grid-column: 1 / -1; justify-items: start; }
  .chronik__bild figcaption { text-align: left; }
}
@media (max-width: 600px) { .chronik.mit-bild { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .chronik { grid-template-columns: 1fr; }
  .regal__boden { height: 16rem; justify-content: flex-start; }
  .ruecken--leer { display: none; }
}

/* ---------- Besuch ---------- */
.besuch { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 6vw, 5.5rem); align-items: start; padding-bottom: var(--abstand); }
.besuch__info { display: grid; gap: 1.4rem; justify-items: start; }
.status { font-family: var(--f-ui); font-weight: 600; font-size: 1.1rem; display: inline-flex; align-items: center; gap: .6rem; }
.status::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: #8B8F9C; }
.status.ist-offen::before { background: var(--licht); box-shadow: 0 0 10px 2px rgba(232,129,63,.5); }
.zeiten { border-collapse: collapse; width: 100%; max-width: 30rem; font-family: var(--f-ui); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.zeiten th, .zeiten td { text-align: left; padding: .5rem .8rem .5rem 0; border-bottom: 1px solid var(--linie); font-weight: 400; }
.zeiten th { font-weight: 500; width: 9.5rem; }
.zeiten tr.ist-heute th, .zeiten tr.ist-heute td { font-weight: 600; }
.zeiten tr.ist-heute th::after { content: "heute"; margin-left: .5rem; font-size: .78rem; font-weight: 500; letter-spacing: .03em; color: var(--gold-schrift); }
.kontakt { margin: .4rem 0 0; display: grid; gap: 1rem; width: 100%; }
.kontakt > div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: .8rem; }
.kontakt dt { font-family: var(--f-ui); font-weight: 500; color: var(--text-2); }
.kontakt dd { margin: 0; overflow-wrap: anywhere; }
.kopie { min-height: 2rem; margin-left: .4rem; background: none; border: 1px solid var(--linie); border-radius: 3px; color: var(--text-2); font-family: var(--f-ui); font-size: .85rem; padding: .15rem .5rem; cursor: pointer; vertical-align: .1em; }
.kopie:hover { color: var(--text); border-color: var(--text-2); }
@media (max-width: 520px) { .kontakt > div { grid-template-columns: 1fr; gap: .1rem; } .zeiten th { width: auto; } }

.besuch__bilder { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
.besuch__haupt { margin: 0; }
.einblicke { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.6rem, 2vw, 1.25rem); }
.einblicke .fenster img { aspect-ratio: 3 / 4; object-fit: cover; }
@media (max-width: 860px) { .besuch { grid-template-columns: 1fr; } }

/* ---------- Fuß ---------- */
.fuss { background: var(--band); color: var(--band-text); }
.fuss__innen { max-width: var(--breite); margin: 0 auto; padding: clamp(3rem, 6vw, 4.5rem) var(--rand) calc(2.5rem + env(safe-area-inset-bottom, 0px)); display: grid; grid-template-columns: 1fr auto; gap: 2rem 3rem; align-items: end; }
.fuss__marke { display: flex; gap: 1.2rem; align-items: center; }
.fuss__schild { width: 3.2rem; color: var(--gold-hell); flex: none; }
.fuss__marke p { font-family: var(--f-ui); font-size: 1.02rem; line-height: 1.5; }
.fuss__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1.6rem; font-family: var(--f-ui); font-weight: 500; }
.fuss__links a { display: inline-block; padding-block: .7rem; }
.fuss__links a { text-decoration-color: rgba(210,178,108,.6); }
.fuss__zeile { grid-column: 1 / -1; padding-top: 1.5rem; border-top: 1px solid rgba(241,238,230,.15); font-family: var(--f-ui); font-size: .92rem; color: rgba(241,238,230,.7); }
.fuss :focus-visible { outline-color: var(--gold-hell); }
@media (max-width: 700px) { .fuss__innen { grid-template-columns: 1fr; } }

/* ---------- Kontaktseite ---------- */
.kontaktbereich {
  max-width: var(--breite); margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem) var(--rand) var(--abstand);
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start;
}
.kontaktbereich__info { display: grid; gap: 1.6rem; justify-items: start; }
.zurueck { padding-block: .6rem; font-family: var(--f-ui); font-weight: 500; font-size: 1rem; text-decoration: none; display: inline-flex; gap: .45rem; align-items: center; }
.zurueck::before { content: ""; width: .5rem; height: .5rem; border-left: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold); transform: rotate(45deg); }
.zurueck:hover { text-decoration: underline; }
.wege { margin: 0; display: grid; gap: 0; width: 100%; border-top: 1px solid var(--linie); }
.wege > div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: .8rem; padding: 1rem 0; border-bottom: 1px solid var(--linie); }
.wege dt { font-family: var(--f-ui); font-weight: 500; color: var(--text-2); padding-top: .1rem; }
.wege dd { margin: 0; overflow-wrap: anywhere; }
.wege__notiz { display: block; margin-top: .3rem; font-family: var(--f-ui); font-size: .95rem; color: var(--text-2); line-height: 1.45; }
.kontaktbereich__zeiten { display: grid; gap: .8rem; width: 100%; }
.zeiten--kompakt { font-size: .98rem; }
.zeiten--kompakt th, .zeiten--kompakt td { padding-block: .35rem; }

.formular { padding: clamp(1.25rem, 4vw, 2.75rem); display: grid; gap: 1rem; align-content: start; scroll-margin-top: 6rem; }
.formular__hilfe { font-family: var(--f-ui); font-size: .98rem; color: var(--text-2); }
.meldung { padding: 1rem 1.2rem; border: 1px solid; border-radius: 3px; }
.meldung p { font-size: 1rem; }
.meldung--ok { border-color: var(--erfolg); color: var(--erfolg); background: var(--passepartout); background: color-mix(in srgb, var(--erfolg) 8%, transparent); }
.meldung--fehler { border-color: var(--fehler); color: var(--fehler); background: var(--passepartout); background: color-mix(in srgb, var(--fehler) 8%, transparent); }
.meldung strong { color: var(--text); }
.meldung p { color: var(--text); }

.kform { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.15rem 1.25rem; margin-top: .5rem; }
.kfeld { display: grid; gap: .4rem; align-content: start; min-width: 0; }
.kfeld--breit { grid-column: 1 / -1; }
.kfeld--falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.kfeld label { font-family: var(--f-ui); font-weight: 600; font-size: .98rem; letter-spacing: .01em; }
.kfeld__opt { font-weight: 400; color: var(--text-2); }
.kfeld input[type="text"], .kfeld input[type="email"], .kfeld input[type="tel"], .kfeld input[type="password"], .kfeld select, .kfeld textarea {
  width: 100%; min-height: 2.9rem; padding: .6rem .8rem;
  font: inherit; font-size: 1.05rem; color: var(--text);
  background: var(--feld); border: 1px solid var(--text-2); border: 1px solid color-mix(in srgb, var(--text) 28%, transparent); border-radius: 3px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.kfeld textarea { resize: vertical; min-height: 9rem; line-height: 1.5; }
.kfeld select {
  appearance: none; -webkit-appearance: none; padding-right: 2.4rem; font-family: var(--f-ui);
  background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 55%, calc(100% - .8rem) 55%; background-size: .35rem .35rem; background-repeat: no-repeat;
}
.kfeld input:hover, .kfeld select:hover, .kfeld textarea:hover { border-color: var(--text-2); }
.kfeld input:focus-visible, .kfeld select:focus-visible, .kfeld textarea:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 45%, transparent); }
@supports (color: color-mix(in srgb, red, blue)) { .kfeld input:focus-visible, .kfeld select:focus-visible, .kfeld textarea:focus-visible { outline: none; } }
.kfeld [aria-invalid="true"] { border-color: var(--fehler); }
.kfeld__hilfe { font-family: var(--f-ui); font-size: .92rem; color: var(--text-2); }
.kfeld__fehler { font-family: var(--f-ui); font-size: .95rem; font-weight: 500; color: var(--fehler); }
.kfeld__rechnung { display: flex; align-items: center; gap: .8rem; }
.kfeld__aufgabe { font-family: var(--f-display); font-size: 1.5rem; white-space: nowrap; font-variant-numeric: lining-nums; }
.kfeld__rechnung input { max-width: 6rem; text-align: center; }
.kfeld__check { display: grid !important; grid-template-columns: auto minmax(0, 1fr); gap: .7rem; align-items: start; font-weight: 400 !important; font-family: var(--f-text) !important; font-size: .98rem !important; line-height: 1.5; cursor: pointer; }
.kfeld__check input { width: 1.5rem; height: 1.5rem; margin: .2rem 0 0; accent-color: var(--text); }
.kform__ende { justify-items: start; padding-top: .4rem; }
.kform .knopf { border: 0; cursor: pointer; min-width: 13rem; }
.kform .knopf[disabled] { opacity: .6; cursor: progress; }
.nur-schmal { display: none; }
@media (max-width: 900px) { .kontaktbereich { grid-template-columns: 1fr; } .nur-schmal { display: inline; } }
@media (max-width: 560px) {
  .kform { grid-template-columns: 1fr; }
  .wege > div { grid-template-columns: 1fr; gap: .15rem; }
  .kform .knopf { width: 100%; }
}

/* ---------- Unterseiten allgemein ---------- */
.unterseite { max-width: var(--breite); margin: 0 auto; padding: clamp(2rem, 5vw, 4rem) var(--rand) var(--abstand); display: grid; gap: 1.5rem; }
.unterseite > .zurueck { justify-self: start; }
.unterseite > .spalten--kopf { margin-bottom: clamp(.5rem, 2vw, 1.5rem); }
.meldung:not(.meldung--ok):not(.meldung--fehler) { border-color: var(--linie); }

/* ---------- Kunstgalerie ---------- */
.galerieseite > .unterseite { min-height: calc(100vh - 4.5rem); align-content: start; }
.galerie-filter ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.galerie-filter button {
  display: inline-flex; gap: .45rem; padding: .45rem .95rem; min-height: 2.6rem; align-items: center;
  border: 1px solid var(--linie); border-radius: 999px; background: var(--passepartout); color: var(--text);
  font-family: var(--f-ui); font-weight: 500; font-size: 1rem; cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.galerie-filter button span { color: var(--gold-schrift); font-variant-numeric: tabular-nums; }
.galerie-filter button:hover { border-color: var(--text-2); }
.galerie-filter button[aria-pressed="true"] { background: var(--knopf); color: var(--knopf-text); border-color: var(--knopf); }
.galerie-filter button[aria-pressed="true"] span { color: inherit; opacity: .75; }
.galerie { display: grid; gap: clamp(3rem, 6vw, 5rem); }
.galerie-gruppe { scroll-margin-top: 6rem; }
.galerie-gruppe__titel { display: flex; align-items: baseline; gap: .7rem; padding-bottom: .9rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); border-bottom: 1px solid var(--linie); }
.galerie-gruppe__anzahl { font-family: var(--f-ui); font-size: 1rem; color: var(--gold-schrift); font-variant-numeric: tabular-nums; }
.werkwand { columns: 3 17rem; column-gap: clamp(1.25rem, 3vw, 2.5rem); }
.werkkarte { break-inside: avoid; margin: 0 0 clamp(2rem, 4vw, 3rem); display: grid; }
.werkkarte__bild { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; text-align: inherit; color: inherit; }
.werkkarte__bild .matte, .werkkarte__bild .fenster { display: block; }
.werkkarte__bild .matte { transition: box-shadow .25s ease, transform .25s var(--ease); }
.werkkarte__bild:hover .matte { box-shadow: 0 1px 1px rgba(var(--schatten-rgb), .06), 0 30px 50px -28px rgba(var(--schatten-rgb), .55); transform: translateY(-2px); }
.werkkarte__bild:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }
.werkkarte__bild img { width: 100%; height: auto; }
.werkkarte .etikett { gap: .25rem; }
.werkkarte__preis { font-family: var(--f-ui); font-weight: 600; font-variant-numeric: tabular-nums; }
.werkkarte__text { font-size: .98rem; color: var(--text-2); line-height: 1.5; }
.werkkarte__anfrage { justify-self: start; margin-top: .4rem; font-size: .98rem; }
@media (prefers-reduced-motion: reduce) { .werkkarte__bild .matte { transition: none; } .werkkarte__bild:hover .matte { transform: none; } }

.grossansicht {
  width: min(64rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem);
  padding: clamp(1rem, 3vw, 2rem); border: 0; border-radius: 3px;
  background: var(--karton); color: var(--text);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.6);
}
.grossansicht::backdrop { background: rgba(12, 16, 26, .72); }
.grossansicht__zu { display: flex; justify-content: flex-end; margin-bottom: .75rem; }
.grossansicht__zu button { background: none; border: 1px solid var(--linie); border-radius: 3px; color: var(--text); font-family: var(--f-ui); font-weight: 500; padding: .45rem .9rem; cursor: pointer; }
.grossansicht__zu button:hover { border-color: var(--text-2); }
.grossansicht__inhalt { margin: 0; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(1rem, 3vw, 2.5rem); align-items: start; }
.grossansicht__inhalt img { width: 100%; max-height: 70vh; max-height: 70dvh; object-fit: contain; background: var(--passepartout); }
.grossansicht__etikett { margin-top: 0; gap: .5rem; }
.grossansicht__etikett .etikett__titel { font-size: 1.5rem; }
.grossansicht__text { white-space: pre-line; }
.grossansicht__etikett .knopf { justify-self: start; margin-top: .75rem; }
@media (max-width: 760px) { .grossansicht__inhalt { grid-template-columns: 1fr; } .grossansicht__inhalt img { max-height: 55vh; max-height: 55dvh; } }
@media (prefers-reduced-motion: no-preference) {
  .grossansicht[open] { animation: gross-auf .3s var(--ease); }
  .grossansicht[open]::backdrop { animation: schleier-auf .3s ease; }
}
@keyframes gross-auf { from { opacity: 0; transform: translateY(.75rem) scale(.985); } }
@keyframes schleier-auf { from { opacity: 0; } }

.galerie-leer { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.galerie-leer__text { display: grid; gap: 1rem; justify-items: start; max-width: 40rem; padding: clamp(1.5rem, 4vw, 2.5rem); border: 1px solid var(--linie); background: var(--passepartout); }
.galerie-leer__text .auftakt__aktionen { margin-top: .5rem; }

/* ---------- Galerie-Verwaltung ---------- */
.admin-login { display: grid; justify-items: center; gap: 1.5rem; padding-block: clamp(1rem, 6vw, 4rem); }
.admin-karte { width: min(100%, 28rem); padding: clamp(1.5rem, 5vw, 2.75rem); display: grid; gap: 1rem; justify-items: start; }
.admin-karte__schild { width: 2.6rem; color: var(--logo); }
.kform--eins { grid-template-columns: 1fr; width: 100%; }
.admin-kopf { display: flex; justify-content: space-between; align-items: end; gap: 1rem 2rem; flex-wrap: wrap; }
.admin-kopf__links { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.admin-raster { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; margin-top: .5rem; }
.kfeld__datei { font-family: var(--f-ui); font-size: 1rem; padding: .6rem; border: 1px dashed var(--text-2); border: 1px dashed color-mix(in srgb, var(--text) 35%, transparent); border-radius: 3px; background: var(--feld); width: 100%; cursor: pointer; }
.kfeld__datei::file-selector-button { font-family: var(--f-ui); font-weight: 600; margin-right: .8rem; padding: .5rem .9rem; border: 0; border-radius: 3px; background: var(--knopf); color: var(--knopf-text); cursor: pointer; }
.upload-vorschau { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: .3rem 1rem; align-items: center; margin-top: .5rem; }
.upload-vorschau .matte { grid-row: span 2; }
.upload-vorschau img { aspect-ratio: 1; object-fit: cover; }
.admin-liste { display: grid; gap: 1.25rem; }
.admin-liste .untertitel { display: flex; gap: .7rem; align-items: baseline; }
.admin-leer { color: var(--text-2); padding: 1.5rem; border: 1px dashed var(--linie); }
.admin-werke { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--linie); }
.admin-werk { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; gap: 1rem; align-items: start; padding: 1rem 0; border-bottom: 1px solid var(--linie); }
.admin-werk img { width: 100%; aspect-ratio: 1; object-fit: cover; box-shadow: 0 0 0 .4rem var(--passepartout), 0 8px 16px -10px rgba(var(--schatten-rgb), .5); margin: .4rem; width: calc(100% - .8rem); }
.admin-werk__text { display: grid; gap: .15rem; }
.admin-werk__text p { margin: 0; }
.knopf-loeschen { background: none; border: 1px solid var(--fehler); color: var(--fehler); border-radius: 3px; font-family: var(--f-ui); font-weight: 500; font-size: .95rem; padding: .4rem .8rem; cursor: pointer; white-space: nowrap; }
.knopf-loeschen:hover, .knopf-loeschen.ist-scharf { background: var(--fehler); color: var(--karton); }
@media (max-width: 900px) { .admin-raster { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .admin-werk { grid-template-columns: 4.5rem minmax(0, 1fr); } .admin-werk form { grid-column: 2; } }

/* ---------- Fehlerseite ---------- */
.fehler { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; padding-block: clamp(1rem, 4vw, 3rem); }
.fehler__rahmen .fenster { aspect-ratio: 4 / 5; display: grid; place-items: center; background: var(--karton); }
.fehler__leer { font-family: var(--f-display); font-size: clamp(3rem, 8vw, 5.5rem); color: var(--gold); opacity: .7; }
.fehler__text { display: grid; gap: 1.4rem; justify-items: start; }
.fehler__wege { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
@media (max-width: 760px) { .fehler { grid-template-columns: 1fr; } .fehler__rahmen { max-width: 14rem; } }

/* ---------- Impressum und Datenschutz ---------- */
.rechtstext > .lead, .rechtstext__inhalt { max-width: 52rem; width: 100%; }
.rechtstext > .titel { margin-top: .5rem; }
.rechtstext__inhalt { display: grid; gap: 0; margin-top: 1rem; border-top: 1px solid var(--linie); }
.rechtstext__inhalt section { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: .5rem 2rem; padding: 1.4rem 0; border-bottom: 1px solid var(--linie); }
.rechtstext__inhalt h2 { font-family: var(--f-ui); font-weight: 600; font-size: 1.05rem; line-height: 1.4; padding-top: .15rem; }
.rechtstext__inhalt p { max-width: 38em; }
@media (max-width: 700px) { .rechtstext__inhalt section { grid-template-columns: 1fr; } }

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