/* Lauke Immigration Services – Stylesheet V1.1
   Aufbau: Vollbild-Bühne, darüber gleitende Bänder, Split-Menü, Slider mit Fortschrittsbalken.
   Schrift: überall Nunito Sans (OFL, im Ordner), Entscheid Max 01.11.2026. */

@font-face {
  font-family: "Nunito Sans";
  src: url("../fonts/nunito-sans-latin-200-normal.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito Sans";
  src: url("../fonts/nunito-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito Sans";
  src: url("../fonts/nunito-sans-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito Sans";
  src: url("../fonts/nunito-sans-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito Sans";
  src: url("../fonts/nunito-sans-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --warmweiss: #FAF8F5;
  --bordeaux: #790B2D;
  --bordeaux-tief: #4E0619;
  --tinte: #2B1D22;
  --schiefer: #6E6266;
  --linie: #E7E0DB;
  --rose: #F4EAEC;
  --fehler: #A3122F;
  --hell-70: rgba(250, 248, 245, 0.72);
  --hell-45: rgba(250, 248, 245, 0.45);
  --hell-20: rgba(250, 248, 245, 0.2);

  --schrift: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --t-klein: 0.875rem;
  --t-basis: 1.0625rem;
  --t-m: 1.25rem;
  --t-l: 1.5625rem;
  --t-xl: clamp(1.7rem, 1.2rem + 1.6vw, 2.6rem);
  --t-gross: clamp(1.75rem, 1.1rem + 3vw, 3.4rem);
  --t-buehne: clamp(2.5rem, 1rem + 5.4vw, 6rem);

  --rand: clamp(1.25rem, 3vw, 3rem);
  --breite: 84rem;
  --mass: 64ch;
  --kurve: cubic-bezier(.7, 0, .2, 1);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bordeaux-tief);
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: var(--t-basis);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body.menue-offen { overflow: hidden; }

a, button, input, select, textarea, label {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(121, 11, 45, 0.12);
}

img, svg { display: block; max-width: 100%; height: auto; }

h1, h2, h3 {
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 0.6em;
  text-wrap: balance;
  overflow-wrap: break-word;
  -webkit-hyphens: auto; hyphens: auto;
}
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-m); line-height: 1.3; }

p { margin: 0 0 1em; max-width: var(--mass); text-wrap: pretty; }

a { color: var(--bordeaux); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
@media (hover: hover) { a:hover { text-decoration-thickness: 2px; } }

:focus-visible { outline: 2px solid var(--bordeaux); outline-offset: 3px; border-radius: 2px; }
.dunkel :focus-visible, .buehne :focus-visible, .menue__rechts :focus-visible, .karte:focus-visible { outline-color: var(--warmweiss); }
.karte:focus-visible { outline-offset: -6px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--rand); top: -4rem; z-index: 100;
  background: var(--warmweiss); color: var(--bordeaux);
  padding: 0.6rem 1rem; text-decoration: none;
}
.skip-link:focus { top: 0.75rem; }

.wrap {
  width: 100%;
  max-width: calc(var(--breite) + 2 * var(--rand));
  margin-inline: auto;
  padding-inline: var(--rand);
}

.platzhalter { background: var(--rose); color: var(--schiefer); padding: 0 0.25em; border-radius: 2px; }
.dunkel .platzhalter, .buehne .platzhalter, .menue__rechts .platzhalter, .karte .platzhalter {
  background: transparent; color: var(--hell-70); outline: 1px dashed var(--hell-45);
}

/* ---------- Pills und Pfeile ---------- */
.pfeil { width: 1rem; height: 1rem; flex: none; transition: transform .25s var(--kurve); }
.pfeil path { fill: none; stroke: currentColor; stroke-width: 1.4; }

.pill {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font: inherit; font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.02em;
  color: var(--bordeaux);
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 0.7rem 1.35rem;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
@media (hover: hover) { .pill:hover { background: var(--bordeaux); border-color: var(--bordeaux); color: var(--warmweiss); } }
@media (hover: hover) { .pill:hover .pfeil { transform: translateX(4px); } }
.pill--voll { background: var(--bordeaux); border-color: var(--bordeaux); color: var(--warmweiss); }
@media (hover: hover) { .pill--voll:hover { background: var(--bordeaux-tief); border-color: var(--bordeaux-tief); } }
.dunkel .pill, .buehne .pill { color: var(--warmweiss); border-color: var(--hell-45); }
@media (hover: hover) { .dunkel .pill:hover, .buehne .pill:hover { background: var(--warmweiss); color: var(--bordeaux-tief); border-color: var(--warmweiss); } }
.dunkel .pill--voll { background: var(--warmweiss); color: var(--bordeaux-tief); border-color: var(--warmweiss); }
.pill[aria-selected="true"] { background: var(--bordeaux); color: var(--warmweiss); border-color: var(--bordeaux); }
.pill:disabled { opacity: .6; cursor: progress; }

/* Link mit Kreis-Pfeil */
.kreislink {
  display: inline-flex; align-items: center; gap: 0.75rem;
  color: inherit; text-decoration: none; font-weight: 500;
}
.kreislink .kreis {
  display: grid; place-items: center;
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
  border: 1px solid currentColor;
  transition: background-color .2s, color .2s, border-color .2s;
}
.kreislink .kreis .pfeil { width: 0.85rem; height: 0.85rem; }
@media (hover: hover) { .kreislink:hover .kreis { background: var(--bordeaux); border-color: var(--bordeaux); color: var(--warmweiss); } }
@media (hover: hover) { .dunkel .kreislink:hover .kreis { background: var(--warmweiss); border-color: var(--warmweiss); color: var(--bordeaux-tief); } }

/* ---------- Kopf: Logo + runder Menüknopf ---------- */
.logo-oben {
  position: absolute; z-index: 5;
  top: clamp(1.4rem, 3vw, 2.4rem); left: var(--rand);
}
.logo-oben img { width: clamp(9rem, 14vw, 12.5rem); }

.menu-knopf {
  position: fixed; z-index: 60;
  top: clamp(1.2rem, 2.6vw, 2.2rem); right: var(--rand);
  display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 0.75rem; letter-spacing: 0.06em; font-weight: 500;
  color: var(--warmweiss);
}
.menu-knopf__kreis {
  display: grid; place-items: center;
  width: 3.25rem; height: 3.25rem; border-radius: 50%;
  background: var(--warmweiss); color: var(--bordeaux);
  box-shadow: 0 0 0 1px rgba(78, 6, 25, 0.1);
  transition: transform .35s var(--kurve), background-color .25s, color .25s;
}
.menu-knopf__kreis svg { width: 1.3rem; height: 1.3rem; transition: transform .5s var(--kurve); }
.menu-knopf__kreis line { stroke: currentColor; stroke-width: 1.5; }
@media (hover: hover) { .menu-knopf:hover .menu-knopf__kreis { transform: scale(1.07); } }
.menu-knopf[aria-expanded="true"] .menu-knopf__kreis svg { transform: rotate(135deg); }
.menu-knopf__text { transition: color .25s, opacity .25s; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.2); }
/* Über hellen Bändern: Knopf bordeaux, Beschriftung ausgeblendet */
.menu-knopf.ist-hell .menu-knopf__kreis { background: var(--bordeaux); color: var(--warmweiss); }
.menu-knopf.ist-hell .menu-knopf__text { opacity: 0; }
.menu-knopf[aria-expanded="true"] .menu-knopf__kreis { background: var(--bordeaux); color: var(--warmweiss); }
.menu-knopf[aria-expanded="true"] .menu-knopf__text { opacity: 1; color: var(--bordeaux); text-shadow: none; }
@media (min-width: 52rem) {
  .menu-knopf[aria-expanded="true"] .menu-knopf__kreis { background: var(--warmweiss); color: var(--bordeaux); }
  .menu-knopf[aria-expanded="true"] .menu-knopf__text { color: var(--warmweiss); }
}

/* ---------- Split-Menü: zwei Balken fahren von oben herein ---------- */
.menue {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 50;
  display: grid; grid-template-columns: 1fr 1fr;
  visibility: hidden;
  transition: visibility 0s linear .85s;
}
.menue.ist-offen { visibility: visible; transition: visibility 0s; }
.menue__links, .menue__rechts {
  transform: translateY(-101%);
  transition: transform .75s var(--kurve);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.menue__links {
  background: var(--warmweiss);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(1.4rem, 3vw, 2.4rem) var(--rand) 2rem;
  transition-delay: .08s;
}
.menue__rechts {
  background: var(--bordeaux-tief); color: var(--warmweiss);
  position: relative;
}
.menue.ist-offen .menue__links { transform: none; transition-delay: 0s; }
.menue.ist-offen .menue__rechts { transform: none; transition-delay: .08s; }

.menue__logo img { width: clamp(9rem, 14vw, 12.5rem); }
.menue__liste { list-style: none; margin: 3rem 0; padding: 0; }
.menue__liste a {
  display: inline-flex; align-items: center;
  font-size: var(--t-gross); line-height: 1.22; font-weight: 400;
  color: rgba(43, 29, 34, 0.42);
  text-decoration: none;
  transition: color .25s;
}
.menue__liste a::before {
  content: ""; width: 0; height: 0.32em; border-radius: 50%;
  background: var(--bordeaux); margin-right: 0;
  transition: width .25s var(--kurve), margin-right .25s var(--kurve);
}
.menue__liste a:focus-visible, .menue__liste a.ist-aktiv, .menue__liste a[aria-current="page"] { color: var(--tinte); }
@media (hover: hover) { .menue__liste a:hover { color: var(--tinte); } }
.menue__liste a:focus-visible::before, .menue__liste a.ist-aktiv::before, .menue__liste a[aria-current="page"]::before {
  width: 0.32em; margin-right: 0.35em;
}
@media (hover: hover) { .menue__liste a:hover::before {
  width: 0.32em; margin-right: 0.35em;
} }
.menue__fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; font-size: var(--t-klein); }
.menue__fuss a { color: var(--tinte); }

.sprachen { display: inline-flex; gap: 0.35rem; }
.sprachen a, .sprachen span {
  display: inline-block; min-width: 2.7rem; text-align: center;
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.04em;
  padding: 0.25rem 0.7rem; border-radius: 999px;
  border: 1px solid currentColor; text-decoration: none;
}
.sprachen span { background: var(--tinte); border-color: var(--tinte); color: var(--warmweiss); }
.sprachen a { color: var(--tinte); }
@media (hover: hover) { .sprachen a:hover { background: var(--rose); } }
.dunkel .sprachen span { background: var(--warmweiss); border-color: var(--warmweiss); color: var(--bordeaux-tief); }
.dunkel .sprachen a { color: var(--warmweiss); border-color: var(--hell-45); }
@media (hover: hover) { .dunkel .sprachen a:hover { background: var(--hell-20); } }

.menue__panel {
  position: absolute; top: clamp(6rem, 14vh, 8rem); right: clamp(2rem, 5vw, 4.5rem); bottom: 2.25rem; left: clamp(2rem, 5vw, 4.5rem);
  opacity: 0; visibility: hidden;
  transition: opacity .3s, visibility 0s linear .3s;
  display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
}
.menue__panel.ist-aktiv { opacity: 1; visibility: visible; transition: opacity .4s .1s, visibility 0s; }
.menue__panel ul { list-style: none; margin: 0; padding: 0; }
.menue__panel li a { color: var(--hell-70); text-decoration: none; font-size: var(--t-l); line-height: 1.7; }
@media (hover: hover) { .menue__panel li a:hover { color: var(--warmweiss); } }
.menue__panel p { color: var(--hell-70); font-size: var(--t-basis); margin: 0; }
/* Beim Öffnen: Foto füllt den ganzen roten Bereich, randlos */
.menue__panel--bild { inset: 0; gap: 0; }
/* Dunkler Verlauf oben, damit Sprachwahl und «Schliessen» auf der hellen Wand lesbar bleiben */
.menue__panel--bild::before { content: ""; position: absolute; inset: 0 0 auto; height: 10rem; background: linear-gradient(rgba(43, 29, 34, 0.55), transparent); pointer-events: none; }
.menue__panel--bild img { flex: 1 1 0; width: 100%; min-height: 0; object-fit: cover; object-position: 58% 50%; }
/* «Über mich»: Satz oben, gleich gross, hell und platziert wie die Leistungsliste */
.menue__panel--text { justify-content: flex-start; }
.menue__panel .menue__claim { font-size: var(--t-l); line-height: 1.7; color: var(--hell-70); }

@media (max-width: 52rem) {
  .menue { grid-template-columns: 1fr; }
  .menue__rechts { display: none; }
}

/* ---------- Bühne (Vollbild, bleibt stehen, Inhalt gleitet darüber) ---------- */
.buehne {
  position: sticky; top: 0; z-index: 0;
  height: 100vh; height: 100svh;
  min-height: 34rem;
  background: var(--bordeaux-tief);
  color: var(--warmweiss);
  overflow: hidden;
}
.buehne--klein { height: 70vh; height: 70svh; min-height: 27rem; }
/* Monogramm «LIS»: Nunito Sans 200, weit gesperrt wie die Wortmarke */
.monogramm {
  display: flex;
  font-family: var(--schrift);
  font-weight: 200;
  line-height: 0.74;
  letter-spacing: 0.06em;
  white-space: nowrap;
  user-select: none;
}
.buehne__zeichen {
  position: absolute; right: var(--rand); bottom: -3vh;
  width: min(56vw, 92vh);
  transform: translate3d(0, calc(var(--p, 0) * 22vh), 0);
  pointer-events: none;
  overflow: visible;
}
.buehne--klein .buehne__zeichen { width: min(46vw, 64vh); bottom: -2vh; }
.lis text {
  font-family: var(--schrift);
  font-weight: 200;
  font-size: 760px;
  fill: rgba(250, 248, 245, 0.3);
  fill-opacity: 0;
  stroke: rgba(250, 248, 245, 0.3);
  stroke-width: 1;
}
.lis .lis-i { fill: var(--bordeaux); stroke: var(--bordeaux); }
@media (prefers-reduced-motion: reduce) { .lis text { fill-opacity: 1; } }

.buehne__inhalt {
  position: absolute; left: 0; right: 0; bottom: clamp(2rem, 7vh, 4.5rem);
  transform: translate3d(0, calc(var(--p, 0) * -10vh), 0);
  opacity: calc(1 - var(--p, 0) * 1.5);
}
.buehne h1 {
  font-size: var(--t-buehne);
  line-height: 1.02;
  letter-spacing: -0.02em;
  max-width: 15ch;
  -webkit-hyphens: manual; hyphens: manual;
  margin: 0 0 clamp(1.5rem, 4vh, 2.5rem);
  color: var(--warmweiss);
}
.buehne--klein h1 { font-size: clamp(2.2rem, 1rem + 3.8vw, 4.4rem); max-width: 18ch; }
.buehne__unten { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.buehne__hinweis { font-size: var(--t-klein); color: var(--hell-70); margin: 0; }
.buehne__text { font-size: var(--t-m); color: var(--hell-70); max-width: 40ch; margin: 0; }
.brotkrumen {
  display: inline-flex; gap: 0.5rem; align-items: center;
  font-size: 0.75rem; letter-spacing: 0.03em;
  border: 1px solid var(--hell-45); border-radius: 999px;
  padding: 0.3rem 0.9rem; margin: 0 0 1.25rem; color: var(--hell-70);
  list-style: none;
}
.brotkrumen li + li::before { content: "›"; margin-right: 0.5rem; }
.brotkrumen a { color: var(--warmweiss); text-decoration: none; }

@media (prefers-reduced-motion: no-preference) {
  .lis tspan { stroke-dasharray: 6000; stroke-dashoffset: 6000; animation: zeichnen 2.2s var(--kurve) .2s forwards, fuellen .9s ease 1.7s forwards; }
  .lis .lis-i { animation-delay: .55s, 1.9s; }
  .lis .lis-s { animation-delay: .8s, 2.1s; animation-duration: 2.4s, .9s; }
  .buehne h1, .buehne .brotkrumen { animation: hoch 1.1s var(--kurve) both; }
  .buehne__unten, .buehne__text { animation: hoch 1.1s var(--kurve) .15s both; }
}
@keyframes zeichnen { to { stroke-dashoffset: 0; } }
@keyframes fuellen { to { fill-opacity: 1; } }
@keyframes hoch { from { opacity: 0; transform: translateY(2rem); } }

/* ---------- Blatt: gleitet über die Bühne ---------- */
.blatt { position: relative; z-index: 1; background: var(--warmweiss); }

.band { padding-block: clamp(4rem, 10vw, 8rem); }
.dunkel { background: var(--bordeaux-tief); color: var(--warmweiss); }
.dunkel h2, .dunkel h3 { color: var(--warmweiss); }
.dunkel p { color: var(--hell-70); }
.dunkel a { color: var(--warmweiss); }

/* Leiste: Titel links, Links rechts, Linie darunter */
.leiste { border-bottom: 1px solid var(--linie); }
.leiste.dunkel { border-color: var(--hell-20); }
.leiste__innen {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem 2rem; padding-block: 1.6rem;
}
.leiste h2 { font-size: var(--t-m); margin: 0; }
.leiste__links { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-size: var(--t-klein); color: var(--schiefer); margin: 0; padding: 0; list-style: none; }
.leiste__links a { color: inherit; text-decoration: none; }
@media (hover: hover) { .leiste__links a:hover { color: var(--bordeaux); } }
.leiste__links strong { font-weight: 500; color: var(--tinte); }

/* Intro: Porträt links, Aussage rechts */
.intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem clamp(2rem, 6vw, 6rem); }
.intro__person { display: flex; flex-direction: column; gap: 1.5rem; align-items: flex-start; }
.avatar { width: 6.5rem; height: 6.5rem; border-radius: 50%; object-fit: cover; object-position: center 18%; background: var(--rose); }
.intro__aussage { font-size: var(--t-xl); line-height: 1.22; font-weight: 400; color: var(--tinte); margin: 0 0 2.5rem; max-width: 22ch; }
.intro__text { color: var(--schiefer); margin-bottom: 2.5rem; }
@media (max-width: 52rem) { .intro { grid-template-columns: 1fr; } }

/* Grosse Liste (Leistungen) */
.umschalter { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.gross-liste { list-style: none; margin: 0 0 clamp(2.5rem, 6vw, 4rem); padding: 0; }
[role="tabpanel"][hidden] { display: none; }
.gross-liste li { max-width: 100%; }
.gross-liste a {
  display: inline;
  font-size: var(--t-gross); line-height: 1.24; font-weight: 400;
  color: rgba(43, 29, 34, 0.38);
  text-decoration: none;
  -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word;
  transition: color .25s;
}
.gross-liste a::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 0; height: 0.3em; border-radius: 50%; background: var(--bordeaux);
  transition: width .25s var(--kurve), margin-right .25s var(--kurve);
}
.gross-liste a:focus-visible { color: var(--tinte); }
@media (hover: hover) { .gross-liste a:hover { color: var(--tinte); } }
.gross-liste a:focus-visible::before { width: 0.3em; margin-right: 0.35em; }
@media (hover: hover) { .gross-liste a:hover::before { width: 0.3em; margin-right: 0.35em; } }

/* Slider mit Fortschrittsbalken */
.slider { padding-block: clamp(2.5rem, 6vw, 4rem) clamp(4rem, 9vw, 7rem); }
.karten {
  display: flex; gap: clamp(1rem, 2vw, 1.5rem);
  list-style: none; margin: 0;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 0 max(var(--rand), calc((100% - var(--breite)) / 2));
  scroll-padding-inline: max(var(--rand), calc((100% - var(--breite)) / 2));
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.karten::-webkit-scrollbar { display: none; }
.karten > li { flex: 0 0 clamp(16.5rem, 31vw, 27rem); scroll-snap-align: start; }
.karte {
  aspect-ratio: 4 / 5;
  position: relative; overflow: hidden;
  border-radius: 16px;
  background: var(--bordeaux);
  color: var(--warmweiss);
  text-decoration: none;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 1.4rem;
  isolation: isolate;
}
.karten > li:nth-child(2n) .karte { background: var(--bordeaux-tief); }
.karte__zeichen {
  position: absolute; z-index: -1; right: -0.03em; bottom: -0.06em;
  font-size: clamp(7rem, 12vw, 11rem);
  color: rgba(250, 248, 245, 0.08);
  transition: transform .8s var(--kurve), color .4s;
}
.karte:focus-visible .karte__zeichen { transform: translateY(-8%); color: rgba(250, 248, 245, 0.14); }
@media (hover: hover) { .karte:hover .karte__zeichen { transform: translateY(-8%); color: rgba(250, 248, 245, 0.14); } }
.karte__autor { display: flex; align-items: center; gap: 0.6rem; font-size: 0.75rem; color: var(--hell-70); }
.karte__autor img { width: 2.1rem; height: 2.1rem; border-radius: 50%; object-fit: cover; object-position: center 18%; }
.karte h3 { font-size: clamp(1.25rem, 1rem + 0.8vw, 1.6rem); font-weight: 400; line-height: 1.25; margin: 0 0 1.25rem; color: var(--warmweiss); }
.karte__meta { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.75rem; color: var(--hell-70); }
.balken {
  position: relative; height: 2px; border-radius: 2px;
  background: var(--linie);
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  width: min(80%, 60rem);
  overflow: hidden;
}
.balken__daumen {
  position: absolute; top: 0; height: 100%;
  left: var(--links, 0%); width: var(--breit, 33%);
  background: var(--bordeaux); border-radius: 2px;
}

/* CTA-Band */
.cta__innen { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2.5rem; align-items: end; }
.cta h2 { font-size: var(--t-buehne); line-height: 1.02; letter-spacing: -0.02em; margin-bottom: 2rem; }
.cta__bild { justify-self: end; width: min(100%, 22rem); aspect-ratio: 4 / 5; object-fit: cover; border-radius: 16px; }
@media (max-width: 52rem) { .cta__innen { grid-template-columns: 1fr; } .cta__bild { justify-self: start; width: 14rem; } }

/* Erscheinen beim Scrollen */
@media (prefers-reduced-motion: no-preference) {
  .js .zeigen { opacity: 0; transform: translateY(2.2rem); transition: opacity .9s var(--kurve), transform .9s var(--kurve); }
  .js .zeigen.ist-sichtbar { opacity: 1; transform: none; }
  .js .zeigen-liste > * { opacity: 0; transform: translateY(1.2rem); transition: opacity .7s var(--kurve), transform .7s var(--kurve); }
  .js .zeigen-liste.ist-sichtbar > * { opacity: 1; transform: none; }
  .js .zeigen-liste.ist-sichtbar > :nth-child(2) { transition-delay: .06s; }
  .js .zeigen-liste.ist-sichtbar > :nth-child(3) { transition-delay: .12s; }
  .js .zeigen-liste.ist-sichtbar > :nth-child(4) { transition-delay: .18s; }
  .js .zeigen-liste.ist-sichtbar > :nth-child(5) { transition-delay: .24s; }
  .js .zeigen-liste.ist-sichtbar > :nth-child(n+6) { transition-delay: .3s; }
}

/* ---------- Inhaltsseiten ---------- */
.zweispaltig { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 2rem clamp(2rem, 6vw, 6rem); }
.zweispaltig > h2 { margin: 0; }
@media (max-width: 52rem) { .zweispaltig { grid-template-columns: 1fr; } }

.linienliste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.linienliste > li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 0.5rem 2rem; padding-block: 1.6rem; border-bottom: 1px solid var(--linie); }
.linienliste h3 { margin: 0; }
.linienliste p { margin: 0; color: var(--schiefer); }
@media (max-width: 40rem) { .linienliste > li { grid-template-columns: 1fr; } }
/* Blocksatz für Fliesstexte (Wunsch Max): Silbentrennung verhindert grosse Wortlücken, Überschriften bleiben linksbündig */
/* Früherer Name hinter dem Namen auf «Über mich», kleiner und zurückhaltend */
.name-zusatz { font-size: var(--t-m); color: var(--schiefer); white-space: nowrap; }
.buehne__text.text-block, .text-block p, .text-block li { text-align: justify; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 6 3 2; }

.ablauf { list-style: none; margin: 0; padding: 0; counter-reset: schritt; }
.ablauf li { counter-increment: schritt; position: relative; padding: 0 0 1.9rem 3.4rem; max-width: var(--mass); }
.ablauf li::before {
  content: counter(schritt); position: absolute; left: 0; top: -0.1rem;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  border: 1px solid currentColor; display: grid; place-items: center;
  font-weight: 500; font-size: var(--t-klein);
}
.ablauf li:not(:last-child)::after { content: ""; position: absolute; left: 1.05rem; top: 2.3rem; bottom: 0.3rem; border-left: 1px solid var(--hell-20); }
.ablauf h3 { margin-bottom: 0.25em; }
.ablauf p { margin: 0; }

.ueber { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 2.5rem clamp(2rem, 6vw, 6rem); align-items: start; }
.portrait { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; border-radius: 16px; background: var(--rose); }
@media (max-width: 52rem) { .ueber { grid-template-columns: 1fr; } .portrait { max-width: 22rem; } }

.fakten { margin: 2rem 0 0; padding: 0; border-top: 1px solid var(--linie); }
.fakten div { display: grid; grid-template-columns: 11rem 1fr; gap: 1rem; padding-block: 0.85rem; border-bottom: 1px solid var(--linie); }
.fakten dt { color: var(--schiefer); }
.fakten dd { margin: 0; }
@media (max-width: 40rem) { .fakten div { grid-template-columns: 1fr; gap: 0.1rem; } }

.hinweis-recht { border-left: 2px solid var(--bordeaux); padding: 0.25rem 0 0.25rem 1.25rem; color: var(--schiefer); font-size: var(--t-klein); margin: 2.5rem 0 0; }

.artikel > * { max-width: var(--mass); }
.artikel h2 { font-size: var(--t-l); margin-top: 2em; }
.artikel ul { padding-left: 1.25rem; margin: 0 0 1em; }
.artikel li { margin-bottom: 0.6em; }
.artikel li::marker { color: var(--bordeaux); }

/* Tabelle im Beitrag (Visum): breit als Tabelle, schmal je Zeile als Block mit Spaltentitel */
.tabelle { margin: 2rem 0; max-width: 56rem !important; }
.tabelle table { width: 100%; border-collapse: collapse; font-size: var(--t-klein); line-height: 1.45; }
.tabelle th, .tabelle td { text-align: left; vertical-align: top; padding: 0.8rem 1rem 0.8rem 0; border-bottom: 1px solid var(--linie); }
.tabelle thead th { font-weight: 600; color: var(--bordeaux); border-bottom: 2px solid var(--bordeaux); }
.tabelle tbody th { font-weight: 600; width: 22%; }
@media (max-width: 40rem) {
  .tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tabelle table, .tabelle tbody, .tabelle tr, .tabelle th, .tabelle td { display: block; width: auto; }
  .tabelle tr { padding: 0.9rem 0; border-bottom: 1px solid var(--linie); }
  .tabelle th, .tabelle td { padding: 0; border: 0; }
  .tabelle tbody th { width: auto; color: var(--bordeaux); margin-bottom: 0.4rem; }
  .tabelle td + td { margin-top: 0.4rem; }
  .tabelle td::before { content: attr(data-titel) ": "; font-weight: 600; }
}
.beitrag-aufruf { margin-top: 1.5rem; }
/* «Weitere Beiträge» direkt unter dem Beitrag, ohne zweiten grossen Abstand */
.band.weitere { padding-top: 0; }
.weitere h2 { font-size: var(--t-l); margin-bottom: 1.5rem; }
.beitrag-meta { color: var(--hell-70); font-size: var(--t-klein); margin: 0; }

/* ---------- Formular ---------- */
.formular-raster { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 3rem clamp(2rem, 6vw, 6rem); align-items: start; }
@media (max-width: 56rem) { .formular-raster { grid-template-columns: 1fr; } }
.formular { max-width: 44rem; }
.formular fieldset { border: 0; padding: 0; margin: 0 0 3rem; }
.formular legend { font-size: var(--t-l); font-weight: 500; padding: 0; margin-bottom: 0.25rem; }
.formular .legende-text { color: var(--schiefer); font-size: var(--t-klein); margin-bottom: 1.5rem; }
.felder { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem 2rem; }
.feld--breit { grid-column: 1 / -1; }
@media (max-width: 36rem) { .felder { grid-template-columns: 1fr; } }
.feld label { display: block; font-size: var(--t-klein); font-weight: 500; color: var(--schiefer); margin-bottom: 0.2rem; }
.feld .pflicht { color: var(--bordeaux); }
.feld input, .feld select, .feld textarea {
  width: 100%; font: inherit; font-size: var(--t-m); color: var(--tinte);
  background: transparent;
  border: 0; border-bottom: 1px solid #BFB3AD; border-radius: 0;
  padding: 0.5rem 0; min-height: 2.9rem;
  transition: border-color .2s;
}
.feld textarea { min-height: 7rem; resize: vertical; border: 1px solid #BFB3AD; border-radius: 8px; padding: 0.75rem; font-size: var(--t-basis); }
.feld select {
  appearance: none; background-color: transparent; color: var(--tinte);
  background-image: linear-gradient(45deg, transparent 50%, var(--schiefer) 50%), linear-gradient(135deg, var(--schiefer) 50%, transparent 50%);
  background-position: calc(100% - 0.7rem) 1.25rem, calc(100% - 0.35rem) 1.25rem;
  background-size: 0.35rem 0.35rem; background-repeat: no-repeat; padding-right: 1.8rem;
}
.feld select option { background: #fff; color: var(--tinte); }
.feld input:focus-visible, .feld select:focus-visible { outline: none; border-bottom-color: var(--bordeaux); box-shadow: 0 1px 0 var(--bordeaux); }
.feld textarea:focus-visible { outline: 2px solid var(--bordeaux); outline-offset: 0; }
.feld .hilfe { color: var(--schiefer); font-size: var(--t-klein); margin: 0.4rem 0 0; }
.feld .fehler { color: var(--fehler); font-size: var(--t-klein); margin: 0.4rem 0 0; font-weight: 500; }
.feld .fehler:empty { display: none; }
/* Anhänge: Auswahlknopf im Stil der Pill-Knöpfe, gewählte Dateien als schlichte Liste */
.feld input[type="file"] { border-bottom: 0; padding: 0.35rem 0; font-size: var(--t-klein); color: var(--schiefer); cursor: pointer; }
.feld input[type="file"]::file-selector-button {
  font: inherit; font-weight: 500; color: var(--bordeaux); background: transparent;
  border: 1px solid var(--bordeaux); border-radius: 999px; padding: 0.6rem 1.15rem; margin-right: 1rem; cursor: pointer;
  transition: background-color .2s, color .2s;
}
@media (hover: hover) { .feld input[type="file"]:hover::file-selector-button { background: var(--bordeaux); color: var(--warmweiss); } }
.feld input[type="file"]:focus-visible { outline: 2px solid var(--bordeaux); outline-offset: 3px; border-radius: 999px; }
.anhang-liste { list-style: none; margin: 0.6rem 0 0; padding: 0; font-size: var(--t-klein); color: var(--tinte); }
.anhang-liste li { padding: 0.15rem 0; border-bottom: 1px solid var(--linie); display: flex; align-items: center; gap: 1rem; }
.anhang-liste__name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.anhang-liste__groesse { color: var(--schiefer); white-space: nowrap; }
/* «Entfernen»: kleiner Textknopf, Trefferfläche 44 px hoch */
.anhang-liste__weg {
  font: inherit; font-weight: 500; color: var(--bordeaux); background: transparent; border: 0;
  min-height: 2.75rem; padding: 0 0 0 0.25rem; cursor: pointer;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.2em;
  transition: text-decoration-color .2s;
}
@media (hover: hover) { .anhang-liste__weg:hover { text-decoration-color: currentColor; } }
.anhang-liste__weg:focus-visible { outline: 2px solid var(--bordeaux); outline-offset: 2px; border-radius: 2px; }
.feld [aria-invalid="true"] { border-color: var(--fehler); }
.formular__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.formular__fuss p { margin: 0; color: var(--schiefer); font-size: var(--t-klein); }
.meldung { border-left: 3px solid var(--bordeaux); background: #fff; padding: 1.75rem 2rem; max-width: 44rem; border-radius: 0 12px 12px 0; }
.meldung h2 { font-size: var(--t-l); }
.meldung p:last-child { margin-bottom: 0; }
/* Falle für Bots: für Menschen unsichtbar, nicht per Tab erreichbar */
.feld-falle { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.formular__fuss .formular__hinweis { flex-basis: 100%; max-width: var(--mass); }
.formular__fuss .formular__status { flex-basis: 100%; margin: 0; color: var(--bordeaux); font-weight: 500; }
.randspalte { border-top: 1px solid var(--linie); padding-top: 1.25rem; }
.randspalte h2 { font-size: var(--t-m); }
.randspalte p { color: var(--schiefer); }

/* ---------- Fusszeile ---------- */
.fuss { padding-block: clamp(4.5rem, 9vw, 7rem) 2rem; font-size: var(--t-klein); }
.fuss__oben { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.8fr) minmax(0, 1fr); gap: 3rem 2rem; }
.fuss__logo img { width: clamp(11rem, 18vw, 15rem); }
.fuss h2 { font-size: var(--t-basis); color: var(--warmweiss); margin-bottom: 0.6rem; }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss__nav a { font-size: var(--t-m); color: var(--hell-70); text-decoration: none; line-height: 1.75; }
@media (hover: hover) { .fuss__nav a:hover { color: var(--warmweiss); } }
.fuss__klein { margin-top: 2rem; }
.fuss__klein a { color: var(--hell-70); text-decoration: none; line-height: 1.9; }
@media (hover: hover) { .fuss__klein a:hover { color: var(--warmweiss); } }
.fuss p { margin: 0 0 0.35rem; }
.fuss__kontakt p { font-size: var(--t-basis); }
.fuss__unten { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: clamp(3rem, 6vw, 4.5rem); color: var(--hell-70); }
.fuss__unten p { color: var(--hell-70); margin: 0; }
@media (max-width: 52rem) { .fuss__oben { grid-template-columns: 1fr; } }

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

@media print {
  .menu-knopf, .menue, .buehne__zeichen { display: none; }
  .buehne { position: static; height: auto; min-height: 0; background: #fff; color: #000; padding: 6rem 0 2rem; }
  .buehne h1 { color: #000; }
  .buehne__inhalt { position: static; }
  body { background: #fff; }
}

/* Blog-Übersicht: Karten im Raster statt Slider */
.karten--raster {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
  overflow: visible; padding: 0; scroll-snap-type: none;
}
.fuss { position: relative; z-index: 1; border-top: 1px solid var(--hell-20); }

/* ---------- Startbühne mit Video ---------- */
.buehne__video {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  overflow: hidden;
  background: var(--bordeaux-tief) url("../video/start-poster.jpg") center / cover no-repeat;
}
.buehne__video video {
  position: absolute; left: 0; top: 0;
  width: 100%; height: calc(100% + 18vh);
  object-fit: cover;
  transform: translate3d(0, calc(var(--p, 0) * -18vh), 0);
}
/* Abdunkelung für Lesbarkeit: oben fürs Logo, unten für die Headline; warmer Ton passend zu Bordeaux */
.buehne__video::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background:
    linear-gradient(180deg, rgba(43, 29, 34, 0.5) 0%, rgba(43, 29, 34, 0.08) 28%, rgba(43, 29, 34, 0.12) 52%, rgba(43, 29, 34, 0.78) 100%),
    linear-gradient(90deg, rgba(78, 6, 25, 0.38) 0%, rgba(78, 6, 25, 0) 60%);
}
/* Weiche Blende beim Neustart der Schleife */
.buehne__blende {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1;
  background: var(--bordeaux-tief);
  opacity: 0; transition: opacity .7s ease;
}
.buehne__blende.ist-an { opacity: 1; }
.buehne--video h1 { text-shadow: 0 2px 24px rgba(43, 29, 34, 0.25); }

.buehne__pause {
  position: absolute; z-index: 2;
  right: var(--rand); bottom: clamp(2rem, 7vh, 4.5rem);
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  display: grid; place-items: center;
  background: transparent; color: var(--warmweiss);
  border: 1px solid var(--hell-45); cursor: pointer;
  transition: background-color .2s, color .2s;
}
@media (hover: hover) { .buehne__pause:hover { background: var(--warmweiss); color: var(--bordeaux-tief); } }
.buehne__pause svg { width: 0.85rem; height: 0.85rem; }
.buehne__pause path { stroke: currentColor; stroke-width: 1.6; fill: none; }
.buehne__pause .i-play { display: none; fill: currentColor; stroke: none; }
.buehne__pause[aria-pressed="true"] .i-pause { display: none; }
.buehne__pause[aria-pressed="true"] .i-play { display: block; }
.buehne--video .buehne__inhalt { z-index: 2; padding-right: 3.5rem; }

/* Handy hochkant: eigenes Hochformat-Standbild (passt zum Hochformat-Video) */
@media (max-width: 52rem) and (orientation: portrait) {
  .buehne__video { background-image: url("../video/start-poster-hoch.jpg"); }
}
/* Video erst einblenden, wenn es wirklich flüssig läuft – bis dahin steht das Standbild */
.js .buehne__video video { opacity: 0; transition: opacity .5s ease; }
.js .buehne__video video.ist-bereit { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .buehne__video video { transform: none !important; }
}
@media print {
  .buehne__video, .buehne__pause { display: none; }
}

/* Handy: Monogramm liegt hinter Text, deshalb gedämpft */
@media (max-width: 52rem) {
  .buehne__zeichen { opacity: 0.75; width: 78vw; right: var(--rand); bottom: auto; top: 6.5rem; }
}
/* Handy: Unterseiten-Bühne wächst mit längerem Text mit, statt unter Logo und Menüknopf zu rutschen */
@media (max-width: 52rem) {
  .buehne--klein { height: auto; min-height: 70vh; min-height: 70svh; display: flex; flex-direction: column; justify-content: flex-end; }
  .buehne--klein .buehne__inhalt { position: relative; bottom: auto; padding: 7rem 0 clamp(2rem, 7vh, 4.5rem); }
}

/* Startseite: LIS über dem Video, wie früher das grosse A */
.buehne--video .buehne__zeichen { z-index: 1; width: min(50vw, 82vh); right: calc(var(--rand) + 4.5rem); bottom: -2vh; }
.buehne--video .lis text { fill: rgba(250, 248, 245, 0.55); stroke: rgba(250, 248, 245, 0.55); }
@media (max-width: 52rem) {
  .buehne--video .buehne__zeichen { width: 78vw; top: 6.5rem; bottom: auto; }
}

/* Blog-Karten mit Foto */
.karte__bild {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1s var(--kurve);
}
.karte--bild::before {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(78, 6, 25, 0.7) 0%, rgba(78, 6, 25, 0.1) 26%, rgba(78, 6, 25, 0.55) 62%, rgba(78, 6, 25, 0.95) 100%);
}
.karte--bild:focus-visible .karte__bild { transform: scale(1.05); }
@media (hover: hover) { .karte--bild:hover .karte__bild { transform: scale(1.05); } }

/* Beitragsseite: Titelbild */
.beitrag-bild { margin: 0 0 3rem; max-width: none !important; }
.beitrag-bild img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; background: var(--rose); }
.beitrag-bild figcaption { margin-top: 0.6rem; font-size: 0.75rem; color: var(--schiefer); }
.artikel .beitrag-bild { max-width: 56rem !important; }

/* Mehrere Autoren: runde Fotos leicht überlappend */
.avatare { display: inline-flex; flex: none; }
.karte__autor .avatare img { border: 1.5px solid rgba(250, 248, 245, 0.85); }
.karte__autor .avatare img + img { margin-left: -0.7rem; }

/* =========================================================
   Smartphones: Tippflächen, Safe Areas, Querformat, Formular
   ========================================================= */

/* Safe Areas (iPhone mit Notch / Home-Balken, v. a. im Querformat) */
.wrap {
  padding-left: max(var(--rand), env(safe-area-inset-left));
  padding-right: max(var(--rand), env(safe-area-inset-right));
}
.logo-oben { left: max(var(--rand), env(safe-area-inset-left)); top: calc(clamp(1.4rem, 3vw, 2.4rem) + env(safe-area-inset-top)); }
.menu-knopf { right: max(var(--rand), env(safe-area-inset-right)); top: calc(clamp(1.2rem, 2.6vw, 2.2rem) + env(safe-area-inset-top)); }
.buehne__pause { right: max(var(--rand), env(safe-area-inset-right)); }
.fuss { padding-bottom: calc(2rem + env(safe-area-inset-bottom)); }
.menue__links { padding-left: max(var(--rand), env(safe-area-inset-left)); padding-bottom: calc(2rem + env(safe-area-inset-bottom)); }

/* Menü füllt auch bei ein-/ausfahrender Browserleiste genau den Bildschirm */
.menue { height: 100vh; height: 100dvh; }

/* Tippflächen: Kleine Text-Links bekommen eine unsichtbar vergrösserte Trefferfläche,
   ohne dass sich das Layout verschiebt */
.brotkrumen a, .leiste__links a, .fuss__klein a, .fuss__nav a, .fuss__kontakt a,
.randspalte a, .menue__fuss a, .sprachen a, .kreislink, .gross-liste a,
.formular__fuss a, .fuss__logo, .menue__logo {
  position: relative;
}
/* .logo-oben ist bereits absolut positioniert und dient selbst als Bezugsrahmen */
.brotkrumen a::after, .leiste__links a::after, .fuss__klein a::after, .fuss__nav a::after,
.fuss__kontakt a::after, .randspalte a::after, .menue__fuss a::after, .sprachen a::after,
.kreislink::after, .gross-liste a::after, .formular__fuss a::after, .logo-oben::after,
.fuss__logo::after, .menue__logo::after {
  content: ""; position: absolute;
  top: 50%; left: 50%;
  width: max(100%, 44px); height: max(100%, 44px);
  transform: translate(-50%, -50%);
}
.fuss__logo, .menue__logo { display: inline-block; }

@media (pointer: coarse) {
  /* Untereinander stehende Links: echte Höhe ≥ 44 px, damit sich Trefferflächen nicht überlappen */
  .fuss__nav a, .fuss__klein a, .leiste__links a, .gross-liste a { display: inline-block; }
  .fuss__nav a { padding-block: 0.3rem; }        /* 35 px Zeile + 9,6 px */
  .fuss__klein a { padding-block: 0.55rem; }     /* 27 px Zeile + 17,6 px */
  .leiste__links a { padding-block: 0.8rem; }    /* 19 px Zeile + 25,6 px */
  .leiste__links { gap: 0 1rem; }
  .gross-liste a { padding-block: 0.17em; }      /* ≥ 44 px ab 28 px Schrift */
  .menue__liste a { padding-block: 0.2em; }
  .fuss__nav a::after, .fuss__klein a::after, .leiste__links a::after, .gross-liste a::after { height: 100%; }
  .buehne__pause { width: 2.75rem; height: 2.75rem; }
  .sprachen a, .sprachen span { min-height: 2.25rem; min-width: 2.75rem; padding: 0.45rem 0.85rem; display: inline-flex; align-items: center; justify-content: center; }
  .sprachen { gap: 0.5rem; }
}

/* Rückmeldung beim Antippen (Touch hat kein Hover) */
@media (hover: none) {
  .pill:active { background: var(--bordeaux); border-color: var(--bordeaux); color: var(--warmweiss); }
  .dunkel .pill:active, .buehne .pill:active { background: var(--warmweiss); color: var(--bordeaux-tief); }
  .karte:active { transform: scale(0.985); }
  .karte { transition: transform .15s ease; }
  .kreislink:active .kreis { background: var(--bordeaux); border-color: var(--bordeaux); color: var(--warmweiss); }
  .gross-liste a:active, .menue__liste a:active { color: var(--tinte); }
  .menu-knopf:active .menu-knopf__kreis { transform: scale(0.94); }
}

/* Formular auf iPhone: Datumsfeld linksbündig und gleich hoch wie die anderen Felder */
.feld input[type="date"] {
  -webkit-appearance: none; appearance: none;
  display: block; min-height: 2.9rem; text-align: left;
  background-color: transparent; color: var(--tinte);
}
.feld input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.feld input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.6; }

/* Querformat auf dem Handy (wenig Höhe): Bühne passt in den Bildschirm */
@media (max-height: 500px) and (orientation: landscape) {
  .buehne, .buehne--klein { min-height: 0; height: 100vh; height: 100svh; }
  .buehne h1, .buehne--klein h1 { font-size: clamp(1.7rem, 1rem + 4.2vh, 2.6rem); max-width: 22ch; margin-bottom: 0.9rem; }
  .buehne__inhalt { bottom: 1.25rem; }
  .buehne__text, .buehne__hinweis { display: none; }
  .brotkrumen { margin-bottom: 0.6rem; }
  .buehne__zeichen { width: min(34vw, 62vh) !important; top: auto !important; bottom: -4vh !important; opacity: 0.6; }
  .menue__liste { margin: 1.25rem 0; }
  .menue__liste a { font-size: clamp(1.4rem, 1rem + 4vh, 2rem); }
}

/* Sehr schmale Geräte (z. B. iPhone SE 1. Gen., 320 px) */
@media (max-width: 22rem) {
  :root { --rand: 1rem; }
  .buehne h1 { font-size: 2.05rem; }
  .pill { padding: 0.65rem 1.1rem; }
  .karten > li { flex-basis: 84vw; }
}

/* Weniger Arbeit beim Scrollen: nur das Video auf eine eigene Grafikebene (Text bliebe sonst unscharf) */
.buehne__video video { will-change: transform; }
/* LIS wird nur verschoben, nie skaliert → eigene Ebene bleibt scharf, kein Neuzeichnen pro Bild */
.buehne__zeichen { will-change: transform; }

/* Parallax direkt an die Scrollposition gekoppelt (läuft im Grafik-Thread, ruckelt auf dem Handy nicht).
   Gleiche Wege wie die JS-Variante mit --p; Browser ohne Unterstützung nutzen weiter --p. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .buehne__zeichen, .buehne__inhalt, .buehne__video video {
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: scroll(root block);
      animation-range: 0 max(100svh, 34rem);
    }
    .buehne--klein .buehne__zeichen, .buehne--klein .buehne__inhalt { animation-range: 0 max(70svh, 27rem); }
    .buehne__zeichen { animation-name: zug-lis; }
    .buehne__inhalt { animation-name: zug-inhalt; }
    .buehne__video video { animation-name: zug-video; }
  }
}
@keyframes zug-lis { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 22vh, 0); } }
@keyframes zug-inhalt {
  0% { transform: translate3d(0, 0, 0); opacity: 1; }
  66.667% { opacity: 0; }
  100% { transform: translate3d(0, -10vh, 0); opacity: 0; }
}
@keyframes zug-video { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -18vh, 0); } }

/* Pause-Knopf muss über dem Textbereich der Bühne liegen, sonst ist er nicht antippbar */
.buehne__pause { z-index: 3; }

/* ---------- Sprachschalter DE/EN neben dem Menüknopf ---------- */
.sprachen--oben {
  position: fixed; z-index: 60;
  right: calc(max(var(--rand), env(safe-area-inset-right)) + 3.25rem + 1rem);
  top: calc(clamp(1.2rem, 2.6vw, 2.2rem) + env(safe-area-inset-top) + 1.625rem);
  transform: translateY(-50%);
}
/* Über dunklem Grund (Bühne, dunkle Bänder): helle Variante */
.sprachen--oben span { background: var(--warmweiss); border-color: var(--warmweiss); color: var(--bordeaux-tief); }
.sprachen--oben a { color: var(--warmweiss); border-color: var(--hell-45); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.2); }
@media (hover: hover) { .sprachen--oben a:hover { background: var(--hell-20); } }
/* Über hellen Bändern (gleicher Zustand wie der Menüknopf): dunkle Variante */
.sprachen--oben.ist-hell span { background: var(--bordeaux); border-color: var(--bordeaux); color: var(--warmweiss); }
.sprachen--oben.ist-hell a { color: var(--bordeaux); border-color: var(--bordeaux); text-shadow: none; }
@media (hover: hover) { .sprachen--oben.ist-hell a:hover { background: var(--rose); } }
/* Menü offen: Handy = helle Menüfläche, Desktop = Schalter über der dunklen rechten Hälfte */
.menue-offen .sprachen--oben span { background: var(--tinte); border-color: var(--tinte); color: var(--warmweiss); }
.menue-offen .sprachen--oben a { color: var(--tinte); border-color: var(--tinte); text-shadow: none; }
@media (min-width: 52rem) {
  .menue-offen .sprachen--oben span { background: var(--warmweiss); border-color: var(--warmweiss); color: var(--bordeaux-tief); }
  .menue-offen .sprachen--oben a { color: var(--warmweiss); border-color: var(--hell-45); }
}
.sprachen--oben a, .sprachen--oben span { transition: background-color .25s, color .25s, border-color .25s; }
/* Sehr schmale Geräte: kompakter, damit Logo, Schalter und Knopf nebeneinander Platz haben */
@media (max-width: 22rem) {
  .sprachen--oben a, .sprachen--oben span { min-width: 2.2rem; padding-inline: 0.5rem; }
  .sprachen--oben { right: calc(var(--rand) + 3.25rem + 0.6rem); }
}

/* ---------- Social-Media-Links (Footer, Kontaktseite) ---------- */
.social__titel { margin: 1.5rem 0 0.6rem !important; font-size: var(--t-klein); }
.social { display: flex; gap: 0.6rem; }
.social a {
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  border: 1px solid currentColor; color: inherit;
  text-decoration: none;
  transition: background-color .2s, color .2s, border-color .2s;
}
.social a svg { width: 1.15rem; height: 1.15rem; fill: currentColor; }
.randspalte .social a { color: var(--bordeaux); }
.fuss .social a { color: var(--hell-70); }
@media (hover: hover) {
  .randspalte .social a:hover { background: var(--bordeaux); border-color: var(--bordeaux); color: var(--warmweiss); }
  .fuss .social a:hover { background: var(--warmweiss); border-color: var(--warmweiss); color: var(--bordeaux-tief); }
}
@media (hover: none) {
  .randspalte .social a:active { background: var(--bordeaux); border-color: var(--bordeaux); color: var(--warmweiss); }
  .fuss .social a:active { background: var(--warmweiss); border-color: var(--warmweiss); color: var(--bordeaux-tief); }
}
/* Platzhalter ohne Ziel: sichtbar gestrichelt, bis die Adressen eingetragen sind */
.social a[data-platzhalter] { border-style: dashed; cursor: default; }

/* Abstände statt Inline-Stilen; helle Linienliste auf dunklem Band */
.abstand-oben { margin-top: 2rem; }
.abstand-oben--gross { margin-top: 2.5rem; }
.linienliste--hell, .linienliste--hell > li { border-color: var(--hell-20); }