/* ksandar — Website. Farben, Schriften: /css/tokens.css (gestaltung/tokens.css).
   Zuerst fürs Handy (ab 360 px), dann 768 / 1100 / 1280. */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font: 500 var(--t-text)/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

img { display: block; max-width: 100%; height: auto; }
picture { display: contents; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { color: var(--akzent); }

:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }
main:focus { outline: none; }

h1, h2, h3 { font-weight: 600; text-wrap: balance; }
p { text-wrap: pretty; }

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

.sprung {
  position: absolute; left: var(--rand); top: -6rem; z-index: 200;
  background: var(--tinte); color: var(--papier); padding: .75rem 1.1rem;
  font: 600 .9rem/1 var(--sans); text-decoration: none; border-radius: 999px;
}
.sprung:focus { top: .75rem; color: var(--papier); }

.kicker {
  margin: 0 0 1.1rem;
  font: 600 .75rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--leise);
}

/* Vorlage: sichtbar markiert, bis der Text ersetzt ist */
.vorlage-label {
  display: inline-block;
  margin: 0 .6rem .3rem 0;
  padding: .12rem .5rem;
  border: 1px dashed currentColor;
  border-radius: 999px;
  color: var(--akzent);
  font: 600 .6875rem/1.45 var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  vertical-align: .15em;
  white-space: nowrap;
}

/* --- Knöpfe und Pfeil-Links --------------------------------------------------- */

.knoepfe { display: flex; flex-wrap: wrap; gap: .75rem; margin: 2rem 0 0; }

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 48px; padding: .8rem 1.4rem;
  border: 1px solid var(--tinte); border-radius: 999px;
  background: var(--tinte); color: var(--papier);
  font: 650 .95rem/1.2 var(--sans); letter-spacing: .01em;
  text-decoration: none; cursor: pointer;
  position: relative; isolation: isolate; overflow: hidden;
  transition: background-color var(--dauer) var(--kurve), border-color var(--dauer) var(--kurve), color var(--dauer) var(--kurve), translate .5s var(--kurve);
}
.knopf:hover { background: var(--akzent); border-color: var(--akzent); color: var(--auf-akzent); }
.knopf:active { transform: scale(.98); }
a, button, summary { -webkit-tap-highlight-color: rgba(62, 90, 111, .12); }
.knopf--leise { background: transparent; color: var(--tinte); border-color: var(--linie); }
.knopf--leise:hover { background: transparent; color: var(--akzent); border-color: var(--akzent); }
.knopf--klein { min-height: 40px; padding: .5rem 1.05rem; font-size: .875rem; }
.knopf--hell { background: #f4f2ee; color: #16181a; border-color: #f4f2ee; }
.knopf--hell:hover { background: #c9d4dc; border-color: #c9d4dc; color: #16181a; }
.knopf[disabled] { opacity: .55; cursor: not-allowed; }

.pfeil {
  display: inline-flex; align-items: center; min-height: 44px; gap: .45em;
  font-weight: 650; text-decoration: none; color: var(--akzent);
}
.pfeil::after { content: '→'; transition: transform var(--dauer) var(--kurve); }
.pfeil:hover::after { transform: translateX(4px); }

/* --- Kopfleiste ------------------------------------------------------------ */

.kopfleiste {
  position: sticky; top: 0; z-index: 50;
  background: var(--papier);
  background: color-mix(in srgb, var(--papier) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--linie);
}
.kopfleiste__innen {
  width: var(--mass); margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.5rem;
  min-height: 4rem;
}
.marke { display: inline-flex; align-items: center; margin-right: auto; padding-block: .7rem; color: var(--tinte); }
.marke:hover { color: var(--tinte); }
.marke__logo { display: block; width: auto; height: 30px; overflow: visible; }
.marke__ecken { color: var(--akzent); transition: transform var(--dauer) var(--kurve); transform-origin: center; transform-box: fill-box; }
.marke:hover .marke__ecken { transform: scale(1.12); }

.menue-knopf {
  display: none; align-items: center; gap: .6rem; min-height: 44px; padding: 0 .95rem;
  background: none; color: var(--tinte); border: 1px solid var(--linie); border-radius: 999px;
  font: 600 .875rem/1 var(--sans); cursor: pointer;
}
.menue-knopf__striche { position: relative; width: 16px; height: 10px; }
.menue-knopf__striche::before, .menue-knopf__striche::after {
  content: ''; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor;
  transition: transform var(--dauer) var(--kurve), top var(--dauer) var(--kurve);
}
.menue-knopf__striche::before { top: 1px; }
.menue-knopf__striche::after { top: 7.5px; }
.menue-knopf[aria-expanded="true"] { border-color: var(--tinte); }
.menue-knopf[aria-expanded="true"] .menue-knopf__striche::before { top: 4.25px; transform: rotate(45deg); }
.menue-knopf[aria-expanded="true"] .menue-knopf__striche::after { top: 4.25px; transform: rotate(-45deg); }

.hauptnav { flex-basis: 100%; padding-bottom: 1rem; }
.hauptnav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.hauptnav a { display: inline-block; padding: .55rem 0; text-decoration: none; font-weight: 600; font-size: .95rem; }
.hauptnav a[aria-current="page"] { color: var(--akzent); }
.hauptnav__aktion { display: flex; align-items: center; gap: 1rem; margin: .5rem 0 0; }
.hauptnav__aktion .knopf { color: var(--papier); padding: .5rem 1.15rem; }
.hauptnav__aktion .knopf:hover { color: var(--auf-akzent); }
.hauptnav__aktion .knopf[aria-current="page"] { color: var(--papier); }
.sprachwahl {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px;
  font-weight: 700; font-size: .85rem; letter-spacing: .06em; text-decoration: none;
}

.js .menue-knopf { display: inline-flex; }
.js .hauptnav { display: none; }
.js .hauptnav.offen {
  display: flex; flex-direction: column; gap: 1.5rem;
  position: fixed; left: 0; right: 0; top: 4rem; bottom: 0; z-index: 49;
  padding: 1.5rem var(--rand) calc(2rem + env(safe-area-inset-bottom));
  background: var(--papier); border-top: 1px solid var(--linie);
  overflow-y: auto; overscroll-behavior: contain;
}
.js .hauptnav.offen ul { flex-direction: column; }
.js .hauptnav.offen .hauptnav__kategorien a {
  display: block; padding: .35rem 0;
  font: 600 clamp(2rem, 7.5vw, 2.8rem)/1.08 var(--display); letter-spacing: var(--eng-2);
}
.js .hauptnav.offen .hauptnav__studio { border-top: 1px solid var(--linie); padding-top: .75rem; }
.js .hauptnav.offen .hauptnav__studio a { display: block; padding: .6rem 0; font-size: 1.1rem; }
html.menue-offen { overflow: hidden; }
/* backdrop-filter macht die Kopfleiste zum Bezugsrahmen für position: fixed — beim offenen Menü aus */
html.menue-offen .kopfleiste { background: var(--papier); -webkit-backdrop-filter: none; backdrop-filter: none; }

@media (min-width: 1100px) {
  .kopfleiste__innen { flex-wrap: nowrap; }
  .js .menue-knopf { display: none; }
  .hauptnav, .js .hauptnav {
    display: flex; align-items: center; gap: 2.25rem; flex-basis: auto; padding: 0;
  }
  .hauptnav__kategorien { position: relative; padding-right: 2.25rem; }
  .hauptnav__kategorien::after { content: ''; position: absolute; right: 0; top: 25%; bottom: 25%; width: 1px; background: var(--linie); }
  .hauptnav__aktion { margin: 0; }
  .hauptnav a { position: relative; }
  .hauptnav ul a::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: .3rem; height: 1px; background: currentColor;
    transform: scaleX(0); transform-origin: left; transition: transform var(--dauer) var(--kurve);
  }
  .hauptnav ul a:hover::after, .hauptnav ul a[aria-current="page"]::after { transform: scaleX(1); }
}

/* --- Held (Start) mit Sucher --------------------------------------------------- */

.held {
  width: var(--mass); margin-inline: auto;
  display: grid; gap: 2.5rem;
  padding-block: clamp(2rem, 6vw, 5rem) clamp(3.5rem, 8vw, 6.5rem);
}
.held__titel {
  margin: 0;
  font-family: var(--display); font-weight: 650; font-size: clamp(2.5rem, 1.3rem + 4.3vw, 5.1rem); line-height: .98; letter-spacing: var(--eng);
}
.held__satz { max-width: 32ch; margin: 1.5rem 0 0; font-size: var(--t-gross); line-height: 1.45; color: var(--tinte-2); }

@media (min-width: 1024px) {
  .held { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 4rem; }
}

.sucher {
  --fx: .5; --fy: .5; --zoom: 0; --nadel: 0; --unschaerfe: 0;
  position: relative; margin: 0;
  width: 100%;
  container-type: inline-size;
  -webkit-user-select: none; user-select: none;
}
.sucher__bild, .sucher__overlay { border-radius: 4px; }
.sucher__bild {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--rahmen); color: var(--rahmen-schrift);
  box-shadow: var(--schatten);
  touch-action: pan-y;
}
@media (min-width: 1024px) { .sucher__bild { aspect-ratio: 5 / 4; } }
.sucher.ist-lebendig .sucher__bild { cursor: crosshair; }
.sucher__bild img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(calc(1.02 + var(--zoom) * .07));
  transform-origin: calc(var(--fx) * 100%) calc(var(--fy) * 100%);
  filter: blur(calc(var(--unschaerfe) * .25px));
}
.sucher__leer {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background:
    radial-gradient(60% 55% at 50% 45%, rgba(159, 183, 201, .16), transparent 70%),
    radial-gradient(90% 80% at 50% 110%, rgba(255, 255, 255, .05), transparent 60%),
    var(--rahmen);
}
.sucher__wort {
  font-family: var(--display); font-weight: 500; font-size: 15.5cqw; line-height: 1; letter-spacing: -.035em;
  color: #eef1f3;
  transform: scale(calc(1 + var(--zoom) * .08));
  filter: blur(calc(var(--unschaerfe) * 1px));
  transition: opacity .25s ease;
  will-change: filter, transform;
}
.sucher__wort.wechsel { opacity: 0; }
.sucher__overlay { position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 4 / 5; pointer-events: none; color: #eef1f3; }
@media (min-width: 1024px) { .sucher__overlay { aspect-ratio: 5 / 4; } }
.sucher__ecke {
  --e: calc(5cqw + var(--zoom) * 4cqw);
  position: absolute; width: 8cqw; height: 8cqw;
  border: 0 solid currentColor; opacity: .85;
}
.sucher__ecke--ol { top: var(--e); left: var(--e); border-top-width: 1.5px; border-left-width: 1.5px; }
.sucher__ecke--or { top: var(--e); right: var(--e); border-top-width: 1.5px; border-right-width: 1.5px; }
.sucher__ecke--ul { bottom: calc(var(--e) + 5cqw); left: var(--e); border-bottom-width: 1.5px; border-left-width: 1.5px; }
.sucher__ecke--ur { bottom: calc(var(--e) + 5cqw); right: var(--e); border-bottom-width: 1.5px; border-right-width: 1.5px; }
.sucher__fokus {
  position: absolute; left: calc(var(--fx) * 100%); top: calc(var(--fy) * 100%);
  width: 10cqw; height: 10cqw; transform: translate(-50%, -50%);
  border: 1.5px solid currentColor; opacity: .95; border-radius: 2px;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.sucher__fokus::before, .sucher__fokus::after {
  content: ''; position: absolute; left: 50%; top: 50%; background: currentColor;
  transform: translate(-50%, -50%);
}
.sucher__fokus::before { width: 1.8cqw; height: 1.5px; }
.sucher__fokus::after { width: 1.5px; height: 1.8cqw; }
.sucher.ist-scharf .sucher__fokus { border-color: #9fd3b0; box-shadow: 0 0 0 1px rgba(159, 211, 176, .35); }
.sucher__zeile {
  position: absolute; left: 5cqw; right: 5cqw;
  display: flex; justify-content: space-between; align-items: center; gap: 3cqw;
  font: 400 max(.625rem, 2.3cqw)/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
  font-variant-numeric: tabular-nums;
}
.sucher__zeile--oben { top: 2cqw; }
.sucher__af { transition: color .25s ease; }
.sucher.ist-scharf .sucher__af { color: #9fd3b0; }
.sucher__zeile--unten { bottom: 2.6cqw; }
.sucher__skala {
  position: relative; flex: 1; max-width: 24cqw; height: 2cqw;
  border-bottom: 1px solid currentColor;
  background: repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 12.5%) bottom / 100% 45% no-repeat;
  opacity: .9;
}
.sucher__nadel {
  position: absolute; bottom: 0; left: calc(50% + var(--nadel) * 50%); width: 2px; height: 180%;
  background: #9fb7c9; transform: translateX(-50%);
}
.sucher__bild::after {
  content: ''; position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none;
}
.sucher.ausloesen .sucher__bild::after { animation: verschluss .24s ease-out; }
@keyframes verschluss { from { opacity: .92; } to { opacity: 0; } }
.sucher__hinweis {
  display: none; margin-top: .75rem;
  font: 600 .72rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--leise);
}
.sucher.ist-lebendig .sucher__hinweis { display: block; }

/* --- Abschnitte ---------------------------------------------------------------- */

.abschnitt {
  width: var(--mass); margin-inline: auto;
  padding-block: clamp(3.5rem, 9vw, 7rem);
  border-top: 1px solid var(--linie);
}
.abschnitt--ohne-linie { border-top: 0; padding-top: 0; }
.seite .abschnitt, .kategorie .abschnitt { width: auto; }
.abschnitt__kopf { display: grid; gap: .5rem; max-width: 46rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.abschnitt__titel {
  margin: 0;
  font-family: var(--display); font-weight: 600; font-size: var(--t-titel-2); line-height: 1.04; letter-spacing: var(--eng-2);
}
.abschnitt__titel--klein { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem); margin-bottom: 1.75rem; }
.abschnitt__einleitung { margin: .6rem 0 0; max-width: 40rem; font-size: 1.125rem; line-height: 1.55; color: var(--tinte-2); }
.abschnitt__kopf p { margin-block: .25rem 0; }

@media (min-width: 1024px) {
  .abschnitt--zwei { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 4rem; }
  .abschnitt--zwei > .abschnitt__kopf { position: sticky; top: 6.5rem; align-self: start; margin-bottom: 0; }
}

/* --- Kacheln der Kategorien (Start) ----------------------------------------------- */

.kacheln { list-style: none; margin: 0; padding: 0; display: grid; gap: 3rem 2rem; }
.kachel__link { display: block; text-decoration: none; }
.kachel__link:hover { color: inherit; }
.kachel__bild {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 4 / 5; border-radius: 4px;
  background: var(--rahmen);
}
.kachel__bild img { width: 100%; height: 100%; object-fit: cover; transition: scale 1s var(--kurve); }
.kachel__link:hover .kachel__bild img { scale: 1.035; }
.kachel__bild::before, .kachel__bild::after {
  content: ''; position: absolute; width: 11%; aspect-ratio: 1; border: 0 solid #eef1f3; opacity: 0; z-index: 1;
  transition: opacity var(--dauer) var(--kurve), transform var(--dauer) var(--kurve);
}
.kachel__bild::before { top: 6%; left: 6%; border-top-width: 1.5px; border-left-width: 1.5px; transform: translate(6px, 6px); }
.kachel__bild::after { bottom: 6%; right: 6%; border-bottom-width: 1.5px; border-right-width: 1.5px; transform: translate(-6px, -6px); }
.kachel__link:hover .kachel__bild::before, .kachel__link:hover .kachel__bild::after,
.kachel__link:focus-visible .kachel__bild::before, .kachel__link:focus-visible .kachel__bild::after { opacity: .9; transform: none; }
.kachel__leer {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 1rem; text-align: center;
  background: radial-gradient(70% 60% at 50% 42%, rgba(159, 183, 201, .14), transparent 70%), var(--rahmen);
  font-family: var(--display); font-weight: 600; font-size: clamp(2.3rem, 1.4rem + 3.6vw, 4.1rem); line-height: 1; letter-spacing: var(--eng); color: #eef1f3;
}
.kachel__leer span { display: block; transition: filter .8s var(--kurve), scale 1s var(--kurve); }
.kachel__link:hover .kachel__leer span { scale: 1.04; }
.kachel__leer--diskret span { filter: blur(5px); }
.kachel__link:hover .kachel__leer--diskret span, .kachel__link:focus-visible .kachel__leer--diskret span { filter: blur(0); }
.kachel__glanz { display: none; }
.kachel__nummer {
  position: absolute; top: 1rem; right: 1.1rem; z-index: 2;
  font: 400 .75rem/1 var(--mono); letter-spacing: .1em; color: #c9d4dc;
}
.kachel__text { display: grid; gap: .35rem; padding-top: 1.1rem; }
.kachel__titel { margin: 0; font-family: var(--display); font-weight: 600; font-size: clamp(1.7rem, 1.35rem + 1vw, 2.25rem); line-height: 1.08; letter-spacing: var(--eng-2); }
.kachel__kurz { margin: 0; color: var(--tinte-2); max-width: 38ch; }
.kachel__mehr { font-weight: 650; font-size: .95rem; color: var(--akzent); }

@media (min-width: 768px) {
  .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem 2.5rem; }
  .kacheln > :nth-child(even) { margin-top: 6rem; }
}
@media (min-width: 1280px) {
  .kacheln { gap: 4.5rem 5rem; padding-inline: 4%; }
}

/* --- Ablauf kurz (Start) ----------------------------------------------------------- */

.schritte-kurz {
  list-style: none; margin: 0; padding: 0; counter-reset: s;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem;
  border-top: 1px solid var(--tinte);
}
.schritte-kurz li {
  counter-increment: s;
  display: flex; flex-direction: column; gap: .35rem;
  padding: 1.1rem 0 1.3rem; border-bottom: 1px solid var(--linie);
  font-family: var(--display); font-weight: 500; font-size: clamp(1.25rem, 1.05rem + .7vw, 1.6rem); line-height: 1.2; letter-spacing: -.015em;
}
.schritte-kurz li::before {
  content: counter(s, decimal-leading-zero);
  font: 400 .75rem/1 var(--mono); letter-spacing: .08em; color: var(--akzent);
}
@media (min-width: 768px) { .schritte-kurz { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* --- Band: Anfrage ------------------------------------------------------------------ */

.band { background: var(--rahmen); color: #eef1f3; }
.band__innen { width: var(--mass); margin-inline: auto; padding-block: clamp(3.5rem, 9vw, 6.5rem); }
.band__titel {
  margin: 0; max-width: 18ch;
  font-family: var(--display); font-weight: 600; font-size: var(--t-titel-2); line-height: 1.04; letter-spacing: var(--eng-2);
}
.band__text { max-width: 36rem; margin: 1.1rem 0 1.75rem; font-size: 1.125rem; color: #c4cacf; }
.band a:not(.knopf) { color: #eef1f3; }
.band :focus-visible { outline-color: #9fb7c9; }

/* --- Seitenkopf (Unterseiten) ------------------------------------------------------- */

.seite, .kategorie { width: var(--mass); margin-inline: auto; padding-bottom: clamp(2rem, 6vw, 4rem); }
.seitenkopf { max-width: 52rem; padding-block: clamp(2.5rem, 7vw, 5.5rem) clamp(2rem, 5vw, 3.5rem); }
.seitenkopf__titel {
  margin: 0;
  font-family: var(--display); font-weight: 650; font-size: var(--t-titel); line-height: .96; letter-spacing: var(--eng);
}
.seitenkopf__text { max-width: 40rem; margin: 1.4rem 0 0; font-size: var(--t-gross); line-height: 1.45; color: var(--tinte-2); }

/* --- Galerie ------------------------------------------------------------------------ */

.kategorie__galerie { margin-bottom: clamp(3rem, 8vw, 5.5rem); }
.galerie { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; align-items: start; }
.galerie__bild { display: block; overflow: hidden; border-radius: 3px; background: var(--rahmen); }
.galerie__bild img { width: 100%; transition: transform .8s var(--kurve); }
.galerie__bild:hover img { transform: scale(1.02); }
@media (min-width: 768px) { .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } }
@media (min-width: 1280px) { .galerie { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.galerie__hinweis { margin: 0 0 1.25rem; color: var(--leise); font-size: .95rem; }

/* Diskret (Boudoir): unscharf, bis man ein Bild ausdrücklich anzeigen lässt */
.diskret { position: relative; margin: 0; overflow: hidden; border-radius: 3px; background: var(--rahmen); }
.diskret__bild img { width: 100%; transition: filter .6s var(--kurve), transform .6s var(--kurve); }
.js .diskret:not(.ist-offen) .diskret__bild img { filter: blur(28px) saturate(.6); transform: scale(1.12); }
.diskret__knopf {
  display: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  min-height: 44px; padding: .6rem 1.2rem; border-radius: 999px;
  background: rgba(14, 16, 17, .72); color: #f4f2ee; border: 1px solid rgba(244, 242, 238, .4);
  font: 650 .9rem/1 var(--sans); cursor: pointer;
}
.js .diskret__knopf { display: inline-flex; align-items: center; }
.diskret.ist-offen .diskret__knopf { top: auto; bottom: 1rem; transform: translateX(-50%); }

.leer { position: relative; }
.leer__rahmen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.leer__rahmen span {
  aspect-ratio: 4 / 5; border-radius: 3px;
  background: radial-gradient(70% 60% at 50% 45%, rgba(159, 183, 201, .12), transparent 70%), var(--rahmen);
}
.leer--diskret .leer__rahmen span { filter: blur(1px); }
.leer__text {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: max-content; max-width: min(34rem, 88%); margin: 0; padding: .8rem 1.2rem; text-align: center;
  background: var(--papier); color: var(--tinte); border-radius: 999px;
  font-weight: 650; font-size: .95rem; line-height: 1.35;
}
.leer--diskret .leer__text { border-radius: 14px; }

/* --- Infos der Kategorie -------------------------------------------------------------- */

.infos { display: grid; gap: 2.5rem 3rem; }
.info { border-top: 1px solid var(--tinte); padding-top: 1.1rem; }
.info__titel { margin: 0 0 .9rem; font-family: var(--display); font-weight: 600; font-size: clamp(1.45rem, 1.2rem + .8vw, 1.85rem); line-height: 1.12; letter-spacing: -.015em; }
.info p { margin: 0 0 .8rem; color: var(--tinte-2); }
.info__liste { list-style: none; margin: 0; padding: 0; }
.info__liste li { position: relative; padding: .55rem 0 .55rem 1.6rem; border-bottom: 1px solid var(--linie); color: var(--tinte-2); }
.info__liste li::before { content: ''; position: absolute; left: 0; top: 1.15rem; width: .8rem; height: 1px; background: var(--akzent); }
.info--hervor {
  border-top: 0; padding: 1.5rem 1.4rem 1.2rem; border-radius: 6px;
  background: var(--papier-2); box-shadow: inset 3px 0 0 var(--akzent);
}
.info--hervor .info__liste li { color: var(--tinte); }
.info--hervor .info__liste li:last-child { border-bottom: 0; }
@media (min-width: 768px) { .infos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .info--hervor { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .infos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Weitere Kategorien */
.weitere { width: var(--mass); margin-inline: auto; padding-block: 2.5rem 3.5rem; }
.weitere__titel { margin: 0 0 .75rem; font: 600 .75rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--leise); }
.weitere ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 2.25rem; }
.weitere a { display: inline-block; padding: .2rem 0; font-family: var(--display); font-weight: 600; font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.5rem); letter-spacing: var(--eng-2); text-decoration: none; }

/* --- Angebot ------------------------------------------------------------------------ */

.pakete { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.paket {
  display: flex; flex-direction: column; gap: .9rem;
  padding: 1.6rem 1.4rem 1.3rem; border: 1px solid var(--linie); border-radius: 6px;
  background: var(--papier);
}
.paket__name { margin: 0; font-family: var(--display); font-weight: 600; font-size: clamp(1.7rem, 1.35rem + 1vw, 2.15rem); line-height: 1.08; letter-spacing: var(--eng-2); }
.paket__text { margin: 0; color: var(--tinte-2); }
.paket__leistungen { list-style: none; margin: 0; padding: 0; }
.paket__leistungen li { position: relative; padding: .4rem 0 .4rem 1.5rem; font-size: .975rem; }
.paket__leistungen li::before {
  content: ''; position: absolute; left: .1rem; top: .95rem; width: .55rem; height: .3rem;
  border-left: 1.5px solid var(--akzent); border-bottom: 1.5px solid var(--akzent); transform: rotate(-45deg);
}
.paket__daten { margin: auto 0 0; padding-top: .9rem; border-top: 1px solid var(--linie); display: grid; gap: .3rem; }
.paket__daten div { display: flex; justify-content: space-between; gap: 1rem; }
.paket__daten dt { color: var(--leise); }
.paket__daten dd { margin: 0; font-weight: 650; text-align: right; }
.paket__link { align-self: flex-start; }
@media (min-width: 768px) { .pakete { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } }

.hinweisbox { margin-top: 1.5rem; padding: 1.4rem; border-radius: 6px; background: var(--papier-2); }
.hinweisbox h3 { margin: 0 0 .4rem; font-family: var(--display); font-weight: 600; font-size: 1.5rem; letter-spacing: -.015em; line-height: 1.1; }
.hinweisbox p { margin: 0; color: var(--tinte-2); max-width: 48rem; }

.ablauf { list-style: none; margin: 0; padding: 0; counter-reset: schritt; }
.ablauf li {
  counter-increment: schritt;
  display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: .25rem 1rem;
  padding: 1.25rem 0; border-top: 1px solid var(--linie);
}
.ablauf li:last-child { border-bottom: 1px solid var(--linie); }
.ablauf li::before {
  content: counter(schritt, decimal-leading-zero);
  grid-row: span 2; padding-top: .55rem;
  font: 400 .8rem/1 var(--mono); letter-spacing: .06em; color: var(--akzent);
}
.ablauf h3 { margin: 0; font-family: var(--display); font-weight: 600; font-size: 1.5rem; letter-spacing: -.015em; line-height: 1.15; }
.ablauf p { margin: 0; color: var(--tinte-2); max-width: 44rem; }

/* --- Über ---------------------------------------------------------------------------- */

.ueber { display: grid; gap: 2.5rem; padding-bottom: clamp(3rem, 8vw, 5rem); }
.ueber__text { max-width: 42rem; font-size: 1.125rem; line-height: 1.65; }
.ueber__text p { margin: 0 0 1.1em; }
.ueber__bild { margin: 0; max-width: 30rem; overflow: hidden; border-radius: 4px; }
@media (min-width: 900px) {
  .ueber--mit-bild { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: 4rem; }
}
.werte { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem 2.5rem; }
.werte li { border-top: 1px solid var(--tinte); padding-top: 1rem; }
.werte h3 { margin: 0 0 .4rem; font-family: var(--display); font-weight: 600; font-size: 1.75rem; letter-spacing: -.02em; line-height: 1.1; }
.werte p { margin: 0; color: var(--tinte-2); }
@media (min-width: 768px) { .werte { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* --- Fragen -------------------------------------------------------------------------- */

.fragen { max-width: 58rem; border-top: 1px solid var(--tinte); margin-bottom: 2rem; }
.frage { border-bottom: 1px solid var(--linie); }
.frage summary {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1rem;
  padding: 1.2rem 2.75rem 1.2rem 0; position: relative;
  list-style: none; cursor: pointer;
  font-family: var(--display); font-weight: 500; font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); line-height: 1.25; letter-spacing: -.01em;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after {
  content: ''; position: absolute; right: .35rem; top: 1.55rem; width: .7rem; height: .7rem;
  border-right: 1.5px solid var(--akzent); border-bottom: 1.5px solid var(--akzent);
  transform: rotate(45deg); transition: transform var(--dauer) var(--kurve);
}
.frage[open] summary::after { transform: rotate(-135deg); top: 1.85rem; }
.frage summary:hover .frage__text { color: var(--akzent); }
.frage__antwort { padding: 0 0 1.4rem; max-width: 62ch; color: var(--tinte-2); }
.frage__antwort p { margin: 0 0 .8em; }

/* --- Anfrage (Kontakt) und Formular ---------------------------------------------------- */

.kontakt { display: grid; gap: 2.5rem; padding-bottom: clamp(2rem, 6vw, 4rem); }
.kontakt__titel { margin: 0 0 1rem; font: 600 .75rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--leise); }
.kontakt__direkt p { margin: 0 0 1.25rem; color: var(--tinte-2); }
.kontakt__daten { margin: 0; display: grid; gap: 1rem; align-content: start; }
.kontakt__daten dt { color: var(--leise); font-size: .875rem; margin-bottom: .15rem; }
.kontakt__daten dd { margin: 0; font-family: var(--display); font-weight: 500; font-size: clamp(1.35rem, 1.1rem + .9vw, 1.8rem); line-height: 1.2; letter-spacing: -.015em; }
.kontakt__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; }
.kontakt__formular { max-width: 48rem; }
@media (min-width: 1024px) {
  .kontakt { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 5rem; }
  .kontakt__direkt { position: sticky; top: 6.5rem; align-self: start; }
}

.anfrage { display: grid; gap: 1.35rem 1.25rem; }
.feld { min-width: 0; }
.feld label { display: block; margin-bottom: .45rem; font-weight: 650; font-size: .925rem; color: var(--tinte); }
.feld__pflicht { color: var(--akzent); }
.feld__optional { color: var(--leise); font-weight: 500; }
.feld__hilfe { margin: -.2rem 0 .5rem; color: var(--leise); font-size: .875rem; }
.feld input, .feld select, .feld textarea {
  width: 100%; min-height: 50px; margin: 0;
  padding: .75rem .95rem;
  background: var(--papier); color: var(--tinte);
  border: 1px solid var(--leise); border-radius: 8px;
  font: inherit; font-size: max(16px, 1rem);
}
.feld textarea { resize: vertical; min-height: 9rem; line-height: 1.5; }
/* iOS Safari: Datumsfeld sonst breiter als die Spalte */
.feld input[type="date"] { -webkit-appearance: none; appearance: none; display: block; min-width: 0; max-width: 100%; }
.feld input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.anfrage { scroll-margin-top: 7.5rem; }
.feld select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--tinte) 50%), linear-gradient(135deg, var(--tinte) 50%, transparent 50%); background-position: calc(100% - 1.15rem) 50%, calc(100% - .8rem) 50%; background-size: .35rem .35rem; background-repeat: no-repeat; padding-right: 2.2rem; }
.feld input:hover, .feld select:hover, .feld textarea:hover { border-color: var(--tinte); }
.feld input:focus-visible, .feld select:focus-visible, .feld textarea:focus-visible { outline-offset: 1px; border-color: var(--tinte); }
.feld [aria-invalid="true"] { border-color: var(--fehler); border-width: 2px; }
.feld__fehler { margin: .35rem 0 0; color: var(--fehler); font-size: .9375rem; }
.feld__fehler:empty { display: none; }

.feld--haken { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .3rem .85rem; align-items: start; }
.feld--haken input { width: 1.35rem; height: 1.35rem; min-height: 0; margin-top: .2rem; accent-color: var(--akzent); }
.feld--haken label { margin: 0; font-weight: 500; font-size: 1rem; color: var(--tinte); }
.feld--haken .feld__fehler, .feld--haken .feld__hilfe { grid-column: 2; margin: 0; }
.feld[hidden] { display: none; }

.honigtopf { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.anfrage__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.anfrage__meldung { min-height: 1px; }
.anfrage__meldung:not(:empty) {
  padding: 1rem 1.1rem; border-left: 3px solid var(--leise); background: var(--papier-2); border-radius: 0 6px 6px 0;
}
.anfrage__meldung[data-art="ok"] { border-color: var(--ok); }
.anfrage__meldung[data-art="fehler"] { border-color: var(--fehler); }
.anfrage__meldung[data-art="hinweis"] { border-color: var(--warn); }
.anfrage__meldung:focus { outline: none; }
.anfrage__meldung:focus-visible { outline: 2px solid var(--akzent); }

@media (min-width: 768px) {
  .anfrage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feld--breit { grid-column: 1 / -1; }
}

/* --- TFP-Bewerbung (/tfp/) ------------------------------------------------------------ */

.tfp__infos { margin-bottom: clamp(3rem, 8vw, 5rem); }
@media (min-width: 1100px) { .tfp__infos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tfp-formular { max-width: 52rem; gap: 0; }
@media (min-width: 768px) { .tfp-formular { grid-template-columns: minmax(0, 1fr); } }

/* Abschnitte des Formulars: Linie oben, Titel wie die Infos (Legende fliesst im Block) */
.gruppe { min-width: 0; margin: 0; padding: 1.4rem 0 2.5rem; border: 0; border-top: 1px solid var(--tinte); }
.gruppe__titel {
  float: left; width: 100%; padding: 0; margin: 0 0 1.25rem;
  font-family: var(--display); font-weight: 600; font-size: clamp(1.45rem, 1.2rem + .8vw, 1.85rem); line-height: 1.12; letter-spacing: -.015em; color: var(--tinte);
}
.gruppe__titel + * { clear: both; }
.gruppe__titel .feld__optional { font-family: var(--sans); font-size: .95rem; }
.gruppe__text { max-width: 42rem; margin-bottom: 1.25rem; color: var(--tinte-2); }
.gruppe__text p { margin: 0 0 .8rem; }
.gruppe__text .info__liste { margin-bottom: 1rem; }
.gruppe__felder { display: grid; gap: 1.35rem 1.25rem; align-items: start; }
.feld__hilfe--unten { margin: .4rem 0 0; }
.gruppe[aria-invalid="true"] .gruppe__felder--drei { padding: .75rem; border: 2px solid var(--fehler); border-radius: 8px; }
.gruppe > .feld__fehler { margin-top: .75rem; }
@media (min-width: 768px) {
  .gruppe__felder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Polas untereinander: Dateiname und Vorschau brauchen die Breite */
  .gruppe__felder--drei { grid-template-columns: minmax(0, 1fr); }
}

/* Auswahl (Erfahrung, Aufnahmearten) */
.wahl { margin: 0; padding: 0; border: 0; }
.wahl__titel { padding: 0; margin-bottom: .45rem; font-weight: 650; font-size: .925rem; color: var(--tinte); }
.wahl__optionen { display: grid; gap: .1rem 1.5rem; }
.wahl__option { display: flex; align-items: center; gap: .7rem; min-height: 44px; }
.wahl__option input { width: 1.3rem; height: 1.3rem; min-height: 0; margin: 0; padding: 0; flex: none; accent-color: var(--akzent); }
.wahl__option label { margin: 0; font-weight: 500; font-size: 1rem; }
.wahl__hinweis { margin: .35rem 0 0; }
.wahl[aria-invalid="true"] .wahl__optionen { padding: .25rem .75rem; border: 2px solid var(--fehler); border-radius: 8px; }
@media (min-width: 600px) {
  .wahl__optionen--checkbox { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wahl__optionen--radio { grid-template-columns: repeat(3, max-content); }
}

/* Dateien: Auswahl-Knopf im Stil der Knöpfe, Vorschau als kleine Kontaktabzüge */
.feld input[type="file"] { min-height: 0; padding: .55rem; font-size: .9375rem; color: var(--tinte-2); cursor: pointer; }
.feld input[type="file"]::file-selector-button {
  margin-right: .8rem; padding: .55rem 1rem; min-height: 40px;
  background: var(--tinte); color: var(--papier); border: 0; border-radius: 999px;
  font: inherit; font-weight: 650; cursor: pointer;
}
.feld input[type="file"]:hover::file-selector-button { background: var(--akzent); color: var(--auf-akzent); }
.vorschau { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: .6rem; }
.vorschau:empty { display: none; }
.vorschau__bild { display: grid; gap: .3rem; min-width: 0; }
.vorschau__rahmen {
  display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 4px;
  background: var(--papier-2); border: 1px solid var(--linie);
}
.vorschau__rahmen img { width: 100%; height: 100%; object-fit: cover; }
.vorschau__text { font-size: .8125rem; color: var(--leise); overflow-wrap: anywhere; }
.vorschau__bild.ist-falsch .vorschau__rahmen { border: 2px solid var(--fehler); }
.vorschau__bild.ist-falsch .vorschau__text { color: var(--fehler); }

/* Fortschritt beim Hochladen */
.tfp-fortschritt { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; flex: 1 1 14rem; }
.tfp-fortschritt[hidden] { display: none; }
.tfp-fortschritt progress {
  -webkit-appearance: none; appearance: none; flex: 1 1 10rem; height: 6px; border: 0; border-radius: 999px;
  background: var(--papier-2); color: var(--akzent); overflow: hidden;
}
.tfp-fortschritt progress::-webkit-progress-bar { background: var(--papier-2); border-radius: 999px; }
.tfp-fortschritt progress::-webkit-progress-value { background: var(--akzent); border-radius: 999px; transition: width .2s linear; }
.tfp-fortschritt progress::-moz-progress-bar { background: var(--akzent); border-radius: 999px; }
.tfp-fortschritt span { font-size: .9375rem; color: var(--tinte-2); font-variant-numeric: tabular-nums; }

/* --- Impressum, Datenschutz, 404 ------------------------------------------------------ */

.textseite { width: var(--mass); margin-inline: auto; padding-block: clamp(2.5rem, 7vw, 5rem) clamp(3rem, 8vw, 6rem); }
.textseite > * { max-width: 46rem; }
.textseite__titel { margin: 0 0 2rem; font-family: var(--display); font-weight: 650; font-size: var(--t-titel); line-height: .96; letter-spacing: var(--eng); }
.textseite__zweit { display: block; color: var(--leise); font-size: .5em; margin-top: .4rem; }
.textseite__abschnitt { padding-top: 1.25rem; margin-top: 1.25rem; border-top: 1px solid var(--linie); }
.textseite__abschnitt h2 { margin: 0 0 .6rem; font-family: var(--display); font-weight: 600; font-size: 1.5rem; letter-spacing: -.015em; line-height: 1.15; }
.textseite__abschnitt p, .textseite__abschnitt ul { margin: 0 0 .8rem; color: var(--tinte-2); }
.textseite__abschnitt ul { padding-left: 1.2rem; }
.textseite--kurz { min-height: 50vh; }
.anschrift { font-size: 1.125rem; line-height: 1.5; color: var(--tinte) !important; }

/* --- Fuss ----------------------------------------------------------------------------- */

.fuss { border-top: 1px solid var(--linie); padding-block: 3rem calc(2.5rem + env(safe-area-inset-bottom)); color: var(--tinte-2); }
.fuss__innen { width: var(--mass); margin-inline: auto; display: grid; gap: 2rem 2.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fuss__marke { grid-column: 1 / -1; }
.marke--fuss { margin: 0; padding: 0; }
.marke--fuss .marke__logo { height: 34px; }
.fuss__satz { margin: .75rem 0 0; color: var(--leise); font-size: .95rem; }
.fuss__titel { margin: 0 0 .5rem; font: 600 .72rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--leise); }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss__spalte a { display: inline-block; padding: .35rem 0; text-decoration: none; font-size: .95rem; }
.fuss__spalte a:hover { text-decoration: underline; }
.fuss__unten {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem;
  padding-top: 1.5rem; border-top: 1px solid var(--linie);
}
.fuss__kopie { margin: 0; font-size: .875rem; color: var(--leise); }
.thema { display: none; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: .8125rem; }
.js .thema { display: flex; }
.thema__titel { margin-right: .35rem; color: var(--leise); font-weight: 600; }
.thema button {
  min-height: 40px; padding: .4rem .85rem;
  background: none; color: inherit; border: 1px solid var(--linie); border-radius: 999px;
  font: inherit; font-weight: 600; cursor: pointer;
}
.thema button:hover { border-color: var(--tinte); }
.thema button[aria-pressed="true"] { background: var(--tinte); color: var(--papier); border-color: var(--tinte); }
@media (min-width: 900px) {
  .fuss__innen { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); }
  .fuss__marke { grid-column: auto; }
}

/* --- Einblenden (nur mit JS und ohne reduzierte Bewegung) ------------------------------ */

@media (prefers-reduced-motion: no-preference) {
  .js .einblenden {
    opacity: 0; transform: translateY(18px);
    transition: opacity .9s var(--kurve), transform .9s var(--kurve);
  }
  .js .einblenden.sichtbar { opacity: 1; transform: none; }
  .js .kacheln > .einblenden:nth-child(even) { transition-delay: .1s; }
  .js .galerie > .einblenden:nth-child(3n + 2) { transition-delay: .06s; }
  .js .galerie > .einblenden:nth-child(3n + 3) { transition-delay: .12s; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* --- Bewegung -------------------------------------------------------------------------
   Alles hier ist Verbesserung: ohne JavaScript steht jeder Inhalt da (Ausnahme: die
   Seitentitel kommen per CSS-Animation und sind nach <1 s ganz da), bei reduzierter
   Bewegung ist alles aus (siehe auch tokens.css). Animiert werden nur transform/opacity
   (bzw. translate/scale) — 60 fps, kein Layout-Springen. */

/* Seitenübergänge: View Transitions zwischen den Seiten (Chrome, Edge, Safari ≥ 18.2).
   Rückfall (html.ohne-vt, gesetzt von thema.js): Inhalt kurz ausblenden (seite.js),
   neue Seite weich einblenden. Die Kopfleiste bleibt stehen. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .kopfleiste { view-transition-name: kopf; }
  ::view-transition-old(root) { animation: vt-raus .24s cubic-bezier(.4, 0, 1, 1) both; }
  ::view-transition-new(root) { animation: vt-rein .5s var(--kurve) .05s backwards; }
  .ohne-vt main { animation: vt-rein .5s var(--kurve) backwards; }
  .ohne-vt.geht main { opacity: 0; transform: translateY(-8px); transition: opacity .18s ease-in, transform .18s ease-in; }
}
@keyframes vt-raus { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vt-rein { from { opacity: .01; transform: translateY(14px); } }

/* Fortschritt beim Scrollen: feine Linie an der Unterkante der Kopfleiste.
   Scroll-gesteuert per CSS, wo es das gibt; sonst setzt seite.js --fortschritt. */
.kopfleiste::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--akzent-flaeche); transform-origin: 0 50%; transform: scaleX(0);
  opacity: 0; pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .js .kopfleiste::after { opacity: 1; transform: scaleX(var(--fortschritt, 0)); }
  @supports (animation-timeline: scroll()) {
    .js .kopfleiste::after { animation: fortschritt linear both; animation-timeline: scroll(root block); }
  }
}
html.menue-offen .kopfleiste::after { opacity: 0; }
@keyframes fortschritt { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Wortmarke: die Sucher-Ecken stellen beim Laden scharf */
@media (prefers-reduced-motion: no-preference) {
  .kopfleiste .marke__ecken { animation: ecken-rein .9s var(--kurve) .1s backwards; }
}
@keyframes ecken-rein { from { opacity: 0; transform: scale(1.4); } }

/* Titel Wort für Wort (bauen.mjs: woerterTitel). Seitentitel beim Laden, Abschnitts-
   titel beim Hineinscrollen (seite.js setzt .sichtbar). */
.woerter .w { display: inline-block; transform-origin: 0 100%; }
@media (prefers-reduced-motion: no-preference) {
  .woerter--sofort .w { animation: wort-rein .95s var(--kurve) backwards; }
  .js .woerter:not(.woerter--sofort) .w {
    opacity: 0; transform: translateY(.45em) rotate(2deg);
    transition: opacity .8s var(--kurve), transform 1s var(--kurve);
  }
  .js .woerter.sichtbar .w { opacity: 1; transform: none; }
  .woerter .w:nth-child(2) { animation-delay: .06s; transition-delay: .06s; }
  .woerter .w:nth-child(3) { animation-delay: .12s; transition-delay: .12s; }
  .woerter .w:nth-child(4) { animation-delay: .18s; transition-delay: .18s; }
  .woerter .w:nth-child(5) { animation-delay: .24s; transition-delay: .24s; }
  .woerter .w:nth-child(6) { animation-delay: .3s; transition-delay: .3s; }
  .woerter .w:nth-child(7) { animation-delay: .36s; transition-delay: .36s; }
  .woerter .w:nth-child(8) { animation-delay: .42s; transition-delay: .42s; }
  .woerter .w:nth-child(n + 9) { animation-delay: .48s; transition-delay: .48s; }
}
@keyframes wort-rein { from { opacity: .01; transform: translateY(.45em) rotate(2deg); } }

/* Laufband der vier Kategorien (Start) */
.laufband {
  position: relative; overflow: hidden;
  border-block: 1px solid var(--linie);
  padding-block: clamp(.9rem, 2.4vw, 1.6rem);
}
.laufband::before, .laufband::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 9%; z-index: 1; pointer-events: none;
}
.laufband::before { left: 0; background: linear-gradient(90deg, var(--papier), transparent); }
.laufband::after { right: 0; background: linear-gradient(-90deg, var(--papier), transparent); }
.laufband__spur { display: flex; width: max-content; }
.laufband__gruppe { display: flex; flex: none; align-items: center; }
.laufband__wort {
  padding-inline: clamp(1rem, 2.6vw, 2.4rem); white-space: nowrap;
  font: 600 clamp(2rem, 1.2rem + 3.4vw, 4.4rem)/1.1 var(--display); letter-spacing: var(--eng);
}
.laufband__wort:nth-child(4n + 3) { font-weight: 400; color: var(--leise); }
.laufband__trenner {
  flex: none; width: clamp(14px, 1.3vw, 20px); aspect-ratio: 1; border-radius: 50%;
  border: 1.5px solid var(--akzent);
  background: radial-gradient(circle, var(--akzent) 0 22%, transparent 26%);
}
.laufband__knopf {
  display: none; position: absolute; right: var(--rand); top: 50%; z-index: 2;
  width: 44px; height: 44px; margin-top: -22px; padding: 0;
  place-items: center; border: 1px solid var(--linie); border-radius: 50%;
  background: var(--papier); color: var(--tinte); cursor: pointer;
}
.laufband__knopf:hover { border-color: var(--tinte); }
.laufband + .abschnitt { border-top: 0; }
.laufband__knopf::before { content: ''; width: 10px; height: 12px; border-inline: 3px solid currentColor; }
.laufband__knopf[aria-pressed="true"]::before {
  width: 0; height: 0; margin-left: 3px; border: 0;
  border-left: 10px solid currentColor; border-block: 6px solid transparent;
}
@media (prefers-reduced-motion: no-preference) {
  .js .laufband__knopf { display: grid; }
  .js .laufband__spur { animation: laufen 60s linear infinite; }
  .js .laufband:hover .laufband__spur,
  .js .laufband.steht .laufband__spur,
  .js .laufband.aus-sicht .laufband__spur { animation-play-state: paused; }
}
@keyframes laufen { to { transform: translate3d(-50%, 0, 0); } }

/* Kategorie-Kacheln: Tiefe. Das Bild liegt etwas grösser im Rahmen und wandert beim
   Scrollen (--p, −1…1); mit Maus neigt sich die Kachel zum Zeiger (--rx/--ry) und ein
   Glanz folgt (--gx/--gy); auf dem Handy neigt sie sich sanft mit dem Scrollen (--sx) —
   ohne Bewegungssensor, ohne Berechtigungsabfrage. Werte setzt seite.js. */
@media (prefers-reduced-motion: no-preference) {
  .mit-tiefe .kachel__bild {
    transform: perspective(1100px) rotateX(calc(var(--sx, 0deg) + var(--rx, 0deg))) rotateY(var(--ry, 0deg));
    transition: transform .6s var(--kurve);
    will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  }
  .mit-tiefe .kachel__bild img, .mit-tiefe .kachel__leer span {
    scale: 1.1; translate: 0 calc(var(--p, 0) * 4.5%);
  }
  .mit-tiefe .kachel__link:hover .kachel__bild img, .mit-tiefe .kachel__link:hover .kachel__leer span { scale: 1.14; }
  .mit-tiefe .kachel__glanz {
    display: block; position: absolute; left: -50%; top: -50%; width: 200%; height: 200%; z-index: 1;
    pointer-events: none; opacity: 0;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .2), transparent 32%);
    transform: translate3d(calc(var(--gx, 0) * 25%), calc(var(--gy, 0) * 25%), 0);
    transition: opacity .5s var(--kurve);
  }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .mit-tiefe .kachel__link:hover .kachel__glanz { opacity: 1; }
}

/* Fokus ziehen: Zahlen kommen unscharf und ziehen scharf (zwei Ebenen — die unscharfe
   Kopie blendet aus, die scharfe ein; nur opacity/transform). */
.kachel__nummer::after, .schritte-kurz li::after, .ablauf li::after { content: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .kachel__nummer { color: transparent; }
  .js .kachel__nummer::before, .js .kachel__nummer::after {
    content: attr(data-n); position: absolute; right: 0; top: 0; color: #c9d4dc;
  }
  .js .kachel__nummer::after { filter: blur(3px); opacity: 0; }
  .js .sichtbar .kachel__nummer::before { animation: fokus-her 1.2s var(--kurve) .3s backwards; }
  .js .sichtbar .kachel__nummer::after { animation: fokus-weg 1.2s var(--kurve) .3s backwards; }

  .js .schritte-kurz li { position: relative; }
  .js .schritte-kurz li::after {
    content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: 1.1rem;
    font: 400 .75rem/1 var(--mono); letter-spacing: .08em; color: var(--akzent);
    filter: blur(2.5px); opacity: 0;
  }
  .js .schritte-kurz.sichtbar li::before { animation: fokus-her 1.1s var(--kurve) backwards; }
  .js .schritte-kurz.sichtbar li::after { animation: fokus-weg 1.1s var(--kurve) backwards; }
  .js .schritte-kurz li:nth-child(2)::before, .js .schritte-kurz li:nth-child(2)::after { animation-delay: .08s; }
  .js .schritte-kurz li:nth-child(3)::before, .js .schritte-kurz li:nth-child(3)::after { animation-delay: .16s; }
  .js .schritte-kurz li:nth-child(4)::before, .js .schritte-kurz li:nth-child(4)::after { animation-delay: .24s; }
  .js .schritte-kurz li:nth-child(n + 5)::before, .js .schritte-kurz li:nth-child(n + 5)::after { animation-delay: .32s; }

  .js .ablauf li { position: relative; }
  .js .ablauf li::after {
    content: counter(schritt, decimal-leading-zero); position: absolute; left: 0; top: calc(1.25rem + .55rem);
    font: 400 .8rem/1 var(--mono); letter-spacing: .06em; color: var(--akzent);
    filter: blur(2.5px); opacity: 0;
  }
  .js .ablauf li.sichtbar::before { animation: fokus-her 1.1s var(--kurve) .15s backwards; }
  .js .ablauf li.sichtbar::after { animation: fokus-weg 1.1s var(--kurve) .15s backwards; }
}
@keyframes fokus-her { from { opacity: 0; transform: scale(1.3); } 45% { opacity: .2; } to { opacity: 1; transform: none; } }
@keyframes fokus-weg { from { opacity: .95; transform: scale(1.3); } to { opacity: 0; transform: none; } }

/* Magnetische Knöpfe (nur Maus): seite.js setzt --mx/--my */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .js .knopf { translate: var(--mx, 0px) var(--my, 0px); }
}

/* Auslöser und Blende beim Absenden: Verschluss-Blitz, dazu schliesst und öffnet sich
   eine Blende mit sechs Lamellen (seite.js setzt .ausloesen, sobald gesendet wird). */
.knopf.ausloesen::before {
  content: ''; position: absolute; left: 50%; top: 50%; z-index: 1;
  width: 3em; height: 3em; margin: -1.5em 0 0 -1.5em; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from 15deg, currentColor 0 36deg, transparent 36deg 60deg);
  -webkit-mask: radial-gradient(circle, transparent 0 24%, #000 25%);
  mask: radial-gradient(circle, transparent 0 24%, #000 25%);
  animation: blende .75s var(--kurve) both;
}
.knopf.ausloesen::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: currentColor; animation: blitz .4s ease-out both;
}
@keyframes blende {
  0% { opacity: 0; transform: scale(.25) rotate(-100deg); }
  35% { opacity: .85; transform: scale(1) rotate(0deg); }
  100% { opacity: 0; transform: scale(4) rotate(50deg); }
}
@keyframes blitz { from { opacity: .5; } to { opacity: 0; } }

/* Sucher-Fadenkreuz über Bildern (nur Maus; seite.js legt .fadenkreuz an) */
.fadenkreuz {
  position: fixed; left: 0; top: 0; z-index: 60; width: 68px; height: 68px; margin: -34px 0 0 -34px;
  pointer-events: none; color: #eef1f3; opacity: 0;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, .55));
  transition: opacity .2s ease;
}
.fadenkreuz.ist-an { opacity: 1; }
.fadenkreuz__ecken {
  position: absolute; inset: 0; border: 1.5px solid currentColor;
  -webkit-mask: conic-gradient(at 14px 14px, transparent 75%, #000 0) 0 0 / calc(100% - 14px) calc(100% - 14px);
  mask: conic-gradient(at 14px 14px, transparent 75%, #000 0) 0 0 / calc(100% - 14px) calc(100% - 14px);
  transition: color .2s ease;
}
.fadenkreuz__punkt { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; }
.fadenkreuz__punkt::before, .fadenkreuz__punkt::after { content: ''; position: absolute; background: currentColor; }
.fadenkreuz__punkt::before { left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; }
.fadenkreuz__punkt::after { top: 0; bottom: 0; left: 50%; width: 1.5px; margin-left: -.75px; }
.fadenkreuz__text {
  position: absolute; left: 100%; top: 100%; margin: 4px 0 0 4px;
  font: 500 .625rem/1 var(--mono); letter-spacing: .1em; white-space: nowrap;
}
.fadenkreuz.ist-scharf .fadenkreuz__ecken, .fadenkreuz.ist-scharf .fadenkreuz__text { color: #9fd3b0; }
.mit-fadenkreuz :is(.kachel__bild, .galerie__bild, .diskret, .ueber__bild) { cursor: none; }
.mit-fadenkreuz .diskret__knopf { cursor: pointer; }

/* Sucher, verfeinert: bestätigt die Schärfe mit einem kurzen Zucken des Messfelds */
@media (prefers-reduced-motion: no-preference) {
  .sucher.ist-scharf .sucher__fokus { animation: af-schnapp .34s var(--kurve); }
}
@keyframes af-schnapp { from { transform: translate(-50%, -50%) scale(1.25); } to { transform: translate(-50%, -50%) scale(1); } }

/* --- Druck ---------------------------------------------------------------------------- */

@media print {
  .kopfleiste, .sucher__overlay, .thema, .anfrage, .sprung, .band { display: none !important; }
  .js .einblenden, .woerter .w { opacity: 1 !important; transform: none !important; }
  .laufband, .fadenkreuz, .kopfleiste::after { display: none !important; }
  body { background: #fff; color: #000; }
}

/* Sieben Aufnahmen (01.10.2026): ohne Skript sieben Rahmen; mit kamera.js und Bewegung
   wird daraus eine Fahrt mit klebender Bühne (.js .kamera.laeuft, unten). Dunkel in beiden Modi. */
.kamera { background: var(--rahmen); color: #eef1f3; padding-block: clamp(4rem, 9vw, 7rem); }
.kamera__kopf { width: var(--mass); margin: 0 auto 2.5rem; display: grid; gap: .5rem; }
.kamera .kicker, .kamera__nr { color: var(--rahmen-schrift); }
.kamera__aufnahmen { list-style: none; width: var(--mass); margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .75rem; }
.kamera__aufnahme { aspect-ratio: 3 / 2; display: grid; align-content: end; gap: .15rem; padding: .7rem .8rem; border: 1px solid rgba(201, 212, 220, .25); border-radius: var(--radius); font-family: var(--mono); font-size: .75rem; }
.kamera__kat { font: 600 1rem var(--display); letter-spacing: var(--eng-2); }
.kamera__folgt { color: #979ca0; }
.bilder__raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 9rem; gap: .6rem; }
.bilder__kachel { grid-row: span 2; }
.bilder__kachel--breit { grid-column: span 2; }
@media (min-width: 64rem) { .bilder__raster { grid-template-columns: repeat(12, 1fr); grid-auto-rows: 7.5rem; } .bilder__kachel { grid-column: span 4; grid-row: span 3; } .bilder__kachel--breit { grid-column: span 8; } .bilder__kachel--hoch { grid-row: span 4; } }
.bilder__link { position: relative; display: block; height: 100%; overflow: hidden; border-radius: var(--radius); color: #eef1f3; text-decoration: none; background: var(--rahmen); }
.bilder__bild, .bilder__bild picture, .bilder__bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bilder__leer { height: 100%; display: grid; place-items: center; background: radial-gradient(60% 55% at 50% 45%, rgba(159, 183, 201, .14), transparent 70%), var(--rahmen); }
.bilder__leer span { width: 3rem; aspect-ratio: 1; border: 1px solid rgba(201, 212, 220, .5); border-radius: 50%; font-size: 0; }
.bilder__unter { position: absolute; inset: auto 0 0; display: flex; justify-content: space-between; gap: .5rem; padding: 1.6rem .8rem .6rem; font: .75rem var(--mono); background: linear-gradient(to top, rgba(8, 9, 9, .8), transparent); }
.bilder__kat { letter-spacing: .14em; text-transform: uppercase; }
.bilder__folgt { color: var(--rahmen-schrift); }
@media (prefers-reduced-motion: no-preference) {
  .bilder__bild img { transition: transform .8s var(--kurve); }
  .bilder__link:hover img { transform: scale(1.04); }
  .js .kamera.laeuft { padding-bottom: 0; }
  .js .kamera.laeuft .kamera__fahrt { position: relative; height: 1700vh; }
  .js .kamera.laeuft .kamera__buehne { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
  .js .kamera.laeuft .kamera__blitz { position: sticky; top: 0; height: 100vh; margin-top: -100vh; background: #fff; opacity: 0; pointer-events: none; }
  .js .kamera.laeuft .kamera__aufnahmen { position: sticky; top: 0; height: 100vh; height: 100svh; margin-top: -100vh; width: auto; display: block; pointer-events: none; }
  .js .kamera.laeuft .kamera__aufnahme { position: absolute; inset: auto 0 calc(2rem + env(safe-area-inset-bottom, 0px)); aspect-ratio: auto; display: flex; justify-content: center; align-items: baseline; gap: 1.2rem; border: 0; opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .5s; }
  .js .kamera.laeuft .kamera__aufnahme.an { opacity: 1; transform: none; }
}
/* Bildnachweis (texte.json › nachweis), z. B. bei Beispielbildern: immer sichtbar */
.nachweis { display: block; margin-top: .4rem; font: .72rem/1.4 var(--mono); color: var(--leise); }
.nachweis--auf { position: absolute; inset: auto 0 0; margin: 0; padding: 1.4rem .7rem .5rem; color: #eef1f3; background: linear-gradient(to top, rgba(8, 9, 9, .75), transparent); }