/* =====================================================================
   ARTEFAKT – Basis-CSS für jede veröffentlichte Seite.
   Enthält nur Struktur und Verhalten. Alles Gestalterische (Farben,
   Schriften, Abstände) kommt aus site.css (Theme) und dem Seiten-CSS.
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }
:root { interpolate-size: allow-keywords; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; line-height: 1.5; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, ul, ol { margin: 0; }
h1, h2, h3, h4 { font-weight: inherit; }
img, video { max-width: 100%; height: auto; }

/* ---------- Weiche Zustandswechsel (Oli, 28.09.2026) ----------
   Darüberfahren, Fokus, Drücken: Farbe, Fläche, Rahmen, Unterstreichung,
   Deckkraft und Schatten wechseln weich – nie Maße oder Lage (kein Ruckeln).
   Eine Sprache für die ganze Website: 0,5 s mit auslaufender Kurve
   („expo-out“). Sie antwortet sofort – drei Viertel des Wechsels sind nach
   0,1 s da, nichts wirkt träge – und kommt dann ruhig an. So liefen die
   Buttons schon (wie auf Olis Semplice-Seite: ease-out-expo); Menülinie und
   Umschalter (vorher 0,3 s ease) sprechen jetzt dieselbe Sprache.
   Seitenwechsel, Menü-Overlay und Akkordeon bleiben eigene Bewegungen.
   Der Fokusrahmen (Tastatur) erscheint bewusst sofort.
   Dauer und Kurve: --art-dur und --art-ease – für die ganze Website an
   :root oder nur für einen Bereich (Sektion, Code-Modul). Die fertige Liste
   --art-state entsteht deshalb an jedem Element neu (:where(*)), nicht nur
   einmal an :root – sonst käme ein lokaler Wert unten nie an. */
:root {
  --art-dur: .5s;
  --art-ease: cubic-bezier(.16, 1, .3, 1);
}
:where(*) {
  --art-state: color var(--art-dur) var(--art-ease), background-color var(--art-dur) var(--art-ease),
    border-color var(--art-dur) var(--art-ease), text-decoration-color var(--art-dur) var(--art-ease),
    opacity var(--art-dur) var(--art-ease), box-shadow var(--art-dur) var(--art-ease),
    fill var(--art-dur) var(--art-ease), stroke var(--art-dur) var(--art-ease);
}
/* Spezifität 0: ein eigener Übergang (Code-Modul, Kunde) gewinnt immer.
   Wer selbst einen setzt, nimmt var(--art-state) in seine Liste auf. */
:where(a, button, summary, input, select, textarea, a img, .nav-menu a span, .nav-extra a span) {
  transition: var(--art-state);
}

/* ---------- Struktur: Sektion > Zeile > Spalte > Modul ---------- */
.sec {
  --display: flex;
  position: relative;
  display: flex;
  flex-direction: column;
  scroll-margin-top: var(--nav-h, 0px);
}
.sec-inner { position: relative; z-index: 1; width: 100%; }
/* Sektion hinter Kopf- und Hinweisleiste: --topbar-h setzt artefakt.js auf die Sektion direkt unter der Hinweisleiste */
.sec-under-bars { margin-top: calc(-1 * (var(--nav-h, 0px) + var(--topbar-h, 0px))); }
.topbar { position: relative; z-index: 3; }
.sec-inner.container { max-width: var(--container); margin-inline: auto; }
.sec-video, .sec-overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.sec-video { object-fit: cover; }

.row {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  /* Abstand, begrenzt: die schmalste Spalte der Zeile bleibt mindestens 8 px breit
     (--gap-fit setzt der Renderer je Zeile; Spaltenformel und Abstand rechnen mit --g) */
  --g: min(var(--gap, 0px), var(--gap-fit, var(--gap, 0px)));
  column-gap: var(--g);
  row-gap: var(--gap, 0px);
}
.col {
  --display: flex;
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 0 100%;
  max-width: 100%;
  min-width: 0;
}
.mod { --display: block; display: var(--display); min-width: 0; }
/* Basis-Abstände mit :where() (Spezifität 0): eigene Abstände eines Moduls
   gewinnen immer. Reihenfolge wichtig – der Modulabstand kommt nach dem
   Zurücksetzen der <figure>-Ränder. */
:where(figure.mod-image) { margin: 0; }
:where(.col > .mod + .mod) { margin-top: var(--mod-gap, 0px); }
/* Gruppe (mehrere Module als ein Block): innen derselbe Modulabstand */
:where(.mod-group > .mod + .mod) { margin-top: var(--mod-gap, 0px); }
/* Positioniertes Modul (Flex): diese Kinder behalten trotzdem volle Breite */
:where(.mod-image > a, .img-placeholder, .mod-accordion > .acc-item) { align-self: stretch; }

/* ---------- Module ---------- */
.mod-text > :last-child { margin-bottom: 0; }

.mod-image img { display: inline-block; vertical-align: bottom; }
.mod-image figcaption { margin-top: .6em; font-size: .85em; opacity: .8; }
.img-placeholder {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #ece8e1 0%, #cdd8d2 100%);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: var(--art-state);
}

/* Symbol am Button (Pfeil …): Form aus der Grafik des Kunden (Maske),
   Farbe = Schriftfarbe, auch beim Darüberfahren. Abstand = halbe Größe. */
.btn-icon {
  flex: none;
  width: var(--icon, 1em);
  height: var(--icon, 1em);
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.btn-icon + .btn-label, .btn-label + .btn-icon { margin-left: calc(var(--icon, 1em) / 2); }
/* Symbol und Text bleiben eine Zeile (gesetzte Zeilenumbrüche gelten weiter);
   Telefonnummern brechen nie um */
.btn-label, .btn[href^="tel:"] { white-space: nowrap; }

/* Terminkalender (artefakt-termin.js): erscheint nach dem Klick unter der Zeile des Buttons,
   volle Breite der Sektion, in der Gestaltung der Website (Farben, Schrift) */
.booking {
  width: 100%;
  margin-top: clamp(24px, 4vw, 48px);
  scroll-margin-top: calc(var(--nav-h, 0px) + 12px);
  opacity: 0;
  translate: 0 12px;
  transition: opacity .5s ease, translate .5s ease;
}
.booking.is-open { opacity: 1; translate: 0 0; }
.booking:focus { outline: none; }
.booking-bar { display: flex; justify-content: center; padding: 1.2em 0 .6em; }
.booking-close {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  opacity: .75;
}
.booking-close:hover, .booking-close:focus-visible { opacity: 1; }
.booking-frame { display: block; width: 100%; height: clamp(560px, 82vh, 780px); border: 0; background: transparent; }
/* Solange der Anbieter lädt: ruhiges Warterad mit Satz, in Farbe und Schrift der Website */
.booking-stage { position: relative; }
.booking-wait {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.1em;
  margin: 0; opacity: .85; pointer-events: none;
  transition: opacity .4s ease;
}
.booking-wait::before {
  content: ""; width: 1.6em; height: 1.6em; border-radius: 50%;
  border: 3px solid currentColor; border-top-color: transparent;
  animation: art-booking-spin 1s linear infinite;
}
.booking.is-ready .booking-wait { opacity: 0; }
/* Der Rahmen bleibt unsichtbar, bis der Kalender fertig ist – nur eine Ladeanzeige, nicht zwei */
.booking-frame { opacity: 0; transition: opacity .4s ease; }
.booking.is-ready .booking-frame { opacity: 1; }
@keyframes art-booking-spin { to { rotate: 360deg; } }
@media (max-width: 767px) { .booking-frame { height: 740px; } }

.mod-divider hr {
  width: 100%;
  margin: 0 auto;
  border: 0;
  border-top: 1px solid currentColor;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--c-primary, #333);
  color: #fff;
  line-height: 1;
}

.acc-item { border-bottom: 1px solid currentColor; }
.acc-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1em;
  padding: .8em 0;
  cursor: pointer;
  list-style: none;
}
.acc-item summary::-webkit-details-marker { display: none; }
.acc-item summary::after { content: "+"; font-size: 1.4em; line-height: 1; transition: rotate .35s ease; }
.acc-item[open] summary::after { rotate: 45deg; }
.acc-item::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size .35s ease, content-visibility .35s allow-discrete;
}
.acc-item[open]::details-content { block-size: auto; }
.acc-body { padding-bottom: 1em; }

.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 30px;
  z-index: 2;
  translate: -50% 0;
  animation: art-hint 2.4s ease-in-out infinite;
}
.scroll-hint img { display: block; width: 30px; }
@keyframes art-hint { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }

/* ---------- Navigation ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  height: var(--nav-h, 80px);
}
/* min-width: im Raster (Menü mittig) darf das Logo nie schrumpfen */
.nav-logo { display: block; flex: none; min-width: max-content; }
.nav-logo img { display: block; width: 160px; }
.nav-menu ul { list-style: none; margin: 0; padding: 0; }
/* Nur die obere Ebene nebeneinander – sonst gewänne display: flex gegen .sub und jedes Untermenü stünde immer offen */
.nav-menu > ul { display: flex; }
.nav-menu a { display: block; padding: 0 15px; line-height: var(--nav-h, 80px); color: inherit; text-decoration: none; }
.nav-menu a span { border-bottom: 1px solid transparent; }
.logo-left-menu-left .nav-menu { margin-left: 40px; }
.logo-left-menu-right .nav-menu { margin-left: auto; }
/* Menü mittig: drei Spalten Logo · Menü · Zusatz (dazu Hamburger und noscript).
   Die äußeren Spalten teilen sich den freien Platz gleich – das Menü steht
   genau in der Seitenmitte, solange links und rechts Platz ist. Wird es eng
   (z. B. Umschalter plus „Termin“-Button zwischen 768 und 1300 px), behält
   die rechte Spalte, was ihr Inhalt braucht, und das Menü rückt nach links:
   nie eine Überlappung, nie ein Umbruch (Oli, 29.09.2026). Vorher stand das
   Menü absolut in der Mitte und der Zusatz lief darüber. */
.logo-left-menu-center { display: grid; grid-template-columns: 1fr auto 1fr auto auto; }
.logo-left-menu-center .nav-logo { grid-column: 1; }
.logo-left-menu-center .nav-menu { grid-column: 2; }
.logo-left-menu-center .nav-extra { grid-column: 3; justify-self: end; }
.logo-left-menu-center .nav-burger { grid-column: 4; }
.logo-left-menu-center > noscript { grid-column: 5; }
/* Logo mittig; ein Menü steht mittig darunter, der Hamburger frei am rechten Rand */
.logo-center { justify-content: center; }
.logo-center .nav-menu { position: absolute; left: 50%; bottom: 0; translate: -50% 0; }
.logo-center .nav-menu a { line-height: 2.5; }
.logo-center .nav-burger, .logo-center > noscript { position: absolute; top: 50%; right: var(--nav-px, 20px); translate: 0 -50%; margin: 0; }

/* Logo rechts, Menü links (Hamburger bleibt links): Reihenfolge der Kinder tauschen */
.logo-right-menu-left .nav-burger, .logo-right-menu-left .nav-extra ~ .nav-burger { order: 0; margin-left: 0; margin-right: auto; }
/* Der erste Menütext beginnt am Rand der Leiste (der Innenabstand des Punktes steht links davon) */
.logo-right-menu-left .nav-menu { order: 1; margin-left: calc(-1 * var(--nav-ip, 15px)); }
.logo-right-menu-left .nav-extra { order: 2; margin-left: 0; }
.logo-right-menu-left .nav-logo { order: 3; margin-left: auto; }
.logo-right-menu-left > noscript { order: 0; margin-right: auto; margin-left: 0; }

/* Zusatz rechts (nav.extra): Button(s) oder zweite Navigation, auch auf dem Handy sichtbar.
   --extra-fit: passt nicht alles in die Zeile, verkleinert artefakt.js die
   Einträge stufenweise (0,9 · 0,8 · 0,7) – jeden als Ganzes, mit Innenabstand
   und Rahmen (zoom); ohne zoom (ältere Firefox) bleiben sie in voller Größe.
   Logo, Hamburger und die Mindestabstände behalten immer ihre Größe. */
.nav-extra { display: flex; align-items: center; column-gap: var(--extra-gap, 1em); margin-left: auto; line-height: 1; white-space: nowrap; }
/* Mindestabstand zu Logo und Menü: der Abstand der Einträge, mindestens 16 px – nie näher, auch verkleinert nicht */
.nav-extra { padding-left: max(16px, var(--extra-gap, 16px)); }
.nav-extra a { display: inline-flex; align-items: center; zoom: var(--extra-fit, 1); }
.nav-extra a:not(.btn) { color: inherit; text-decoration: none; }
.nav-extra a:not(.btn) span { border-bottom: 1px solid transparent; }
.nav-extra ~ .nav-burger, .nav-extra ~ noscript { margin-left: var(--extra-gap, 16px); }
/* Art „Kontur“ und „Fläche“ (Voreinstellungen): in den Farben der Kopfleiste
   (--nav-fg Schrift, --nav-bg Hintergrund, site.css); beim Darüberfahren
   tauschen sie. Innenabstand in em – wächst mit der Schrift. */
.nav-extra a.nav-x-outline, .nav-extra a.nav-x-solid { padding: .45em 1em; border: 1px solid currentColor; }
/* „a.“: gewinnt gegen .nav-extra a:not(.btn) { color: inherit } (gleich spezifisch wie .nav-extra a.x) */
.nav-extra a.nav-x-solid { color: var(--nav-bg, #fff); background: var(--nav-fg, #000); border-color: var(--nav-fg, #000); }
.nav-extra a.nav-x-outline:hover, .nav-extra a.nav-x-outline:focus-visible { color: var(--nav-bg, #fff); background: var(--nav-fg, #000); }
.nav-extra a.nav-x-solid:hover, .nav-extra a.nav-x-solid:focus-visible { color: var(--nav-fg, #000); background: transparent; }
/* Ecken (Voreinstellungen): Eckig, Leicht rund, Pille – auch über einen Button-Stil */
.nav-extra a.nav-x-square { border-radius: 0; }
.nav-extra a.nav-x-soft { border-radius: .3em; }
.nav-extra a.nav-x-pill { border-radius: 9999px; }
/* Reicht der Platz auch verkleinert nicht (artefakt.js): auf dem Tablet wandert
   zuerst das Menü in den Hamburger (wie auf dem Handy), zuletzt der Zusatz ins Menü */
.nav-menu-collapsed .nav-menu { display: none; }
.nav-menu-collapsed .nav-burger { display: flex; }
.nav-extra-in-menu .nav-extra { display: none; }
.nav-overlay-extra { display: none; margin-top: .8em; padding-top: .8em; border-top: 1px solid currentColor; }
.nav-extra-in-menu + .nav-overlay .nav-overlay-extra { display: block; }
/* Umschalter (z. B. Orte): die eigene Seite hell, die anderen leicht ausgeblendet.
   Kein eigener Übergang hier – die Deckkraft wechselt über --art-state mit Farbe und Fläche. */
.nav-extra-switch a { opacity: .4; }
.nav-extra-switch a[aria-current], .nav-extra-switch a:hover, .nav-extra-switch a:focus-visible { opacity: 1; }
/* Tastatur: ein ausgeblendeter Eintrag ist mit dem Fokus sofort ganz da – sonst
   blendete der Fokusrahmen mit der Deckkraft ein (anfangs nur zu 40 % sichtbar) */
.nav-extra-switch a:focus-visible { transition: none; }

.has-sub { position: relative; }
/* Untermenü: blendet weich ein und aus (Deckkraft, nie Maße oder Lage).
   Versteckt ist es display: none – für Maus, Tastatur und Screenreader nicht
   da. Das Überblenden von und zu display: none braucht @starting-style und
   allow-discrete; Browser ohne beides zeigen es wie bisher sofort. */
.sub {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  flex-direction: column;
  min-width: 220px;
  background: var(--nav-bg, #fff);
  opacity: 0;
  transition: opacity var(--art-dur) var(--art-ease), display var(--art-dur) allow-discrete;
}
.sub a { line-height: 1.4; padding: .6em 15px; }
.has-sub:hover > .sub, .has-sub:focus-within > .sub, .has-sub.open > .sub { display: flex; opacity: 1; }
@starting-style {
  .has-sub:hover > .sub, .has-sub:focus-within > .sub, .has-sub.open > .sub { opacity: 0; }
}

.nav-burger {
  display: none;
  position: relative;
  align-items: center;
  flex: none; /* schrumpft nie, egal wie viel rechts daneben steht */
  width: 28px;
  height: 20px;
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
.nav-burger span, .nav-burger span::before, .nav-burger span::after {
  display: block;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: transform .3s ease, background-color .3s ease;
}
.nav-burger span { position: relative; }
.nav-burger span::before, .nav-burger span::after { content: ""; position: absolute; left: 0; }
.nav-burger span::before { transform: translateY(-7px); }
.nav-burger span::after { transform: translateY(7px); }
.nav-open .nav-burger span { background: transparent; }
.nav-open .nav-burger span::before { transform: rotate(45deg); }
.nav-open .nav-burger span::after { transform: rotate(-45deg); }

.nav-overlay {
  position: fixed;
  inset: var(--nav-h, 80px) 0 0 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s;
}
/* Beim Öffnen sofort sichtbar (Fokus lässt sich gleich hineinsetzen), beim Schließen erst nach dem Ausblenden */
.nav-open .nav-overlay { opacity: 1; visibility: visible; transition: opacity .3s ease, visibility 0s; }
.nav-open { overflow: hidden; }
.nav-overlay ul { list-style: none; margin: 0; padding: 0; text-align: center; }
.nav-overlay a { display: block; padding: .4em 0; color: inherit; text-decoration: none; font-size: 32px; }

/* Ohne JavaScript: Link in <noscript> öffnet das Menü über :target, der
   Button (braucht Skript) tritt zurück. Mit JavaScript ist <noscript> leer.
   Rückfall ohne :has(): beide Symbole sichtbar, der Link funktioniert. */
.nav > noscript { margin-left: auto; }
.nav:has(> noscript > .nav-burger) > button.nav-burger { display: none; }
.nav-overlay:target { opacity: 1; visibility: visible; }
.nav-overlay .nav-close { margin-top: 1em; font-size: 16px; text-decoration: underline; }

/* ---------- Schwebender Kreis-Button ---------- */
.float-btn {
  position: fixed;
  top: calc(var(--nav-h, 80px) + 50px);
  right: 20px;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 140px;
  border: 1px solid var(--c-primary, #333);
  border-radius: 50%;
  background: #fff;
  color: var(--c-primary, #333);
  font-size: 18px;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  /* Farben weich wie überall; Ein- und Ausblenden beim Scrollen mit eigener Zeit */
  transition: var(--art-state), opacity .5s ease, visibility .5s;
}
/* visibility: ausgeblendet auch für Tastatur und Screenreader nicht erreichbar */
.float-btn.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }

/* ---------- Seitenübergang: Push-Slide über die View Transition API ----------
   Bekannt: Chromium meldet gelegentlich „InvalidStateError: Transition was
   aborted …“, wenn es einen Übergang selbst abbricht (v. a. Headless-Shell,
   selten beim schnellen Zurück). Die Seite wechselt trotzdem; abfangen ließe
   es sich nur mit einem Inline-Skript im <head> jeder Seite. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: 700ms;
  animation-timing-function: cubic-bezier(.83, 0, .17, 1);
  mix-blend-mode: normal;
}
::view-transition-old(root) { animation-name: art-push-out; }
::view-transition-new(root) { animation-name: art-push-in; }
@keyframes art-push-out { to { transform: translateX(-100%); } }
@keyframes art-push-in { from { transform: translateX(100%); } }

/* Seitenwechsel mit Richtung (Button „Seitenwechsel: nach links / rechts“,
   wie der Pfeil zeigt): „links“ = die neue Seite kommt von links, die alte
   geht nach rechts. Beide Seiten schieben gemeinsam, 1 s mit sanftem
   Anlauf und Auslauf (wie Olis Semplice-Seite: Expo.easeInOut). */
html[data-swipe]::view-transition-old(root), html[data-swipe]::view-transition-new(root) {
  animation-duration: 1000ms;
  animation-timing-function: cubic-bezier(.87, 0, .13, 1);
}
html[data-swipe="left"]::view-transition-old(root) { animation-name: art-push-out-right; }
html[data-swipe="left"]::view-transition-new(root) { animation-name: art-push-in-left; }
@keyframes art-push-out-right { to { transform: translateX(100%); } }
@keyframes art-push-in-left { from { transform: translateX(-100%); } }
/* Firefox (ohne Seitenübergänge): die Zielseite im Rahmen neben der Seite,
   beide schieben gemeinsam (artefakt.js) */
.art-swipe-frame {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  border: 0; z-index: 2147483000; pointer-events: none;
}
html[data-swipe-wait] { overflow-x: hidden; }
/* Zu einer anderen Website: die Seite schiebt allein hinaus, anlaufend */
html[data-swipe-out] { overflow-x: hidden; }
html[data-swipe-out] body {
  animation: art-push-out 500ms cubic-bezier(.7, 0, .84, 0) forwards;
  pointer-events: none;
}
html[data-swipe-out="left"] body { animation-name: art-push-out-right; }

@media (prefers-reduced-motion: reduce) {
  /* Auch eigene Übergänge, die var(--art-state) benutzen, wechseln sofort */
  :root { --art-dur: 0s; }
  html { scroll-behavior: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  html[data-swipe]::view-transition-old(root), html[data-swipe]::view-transition-new(root),
  html[data-swipe-out] body { animation: none; }
  .scroll-hint { animation: none; }
  .btn, .nav-burger span, .nav-burger span::before, .nav-burger span::after,
  .nav-overlay, .nav-open .nav-overlay, .float-btn, .acc-item summary::after, .sub { transition: none; }
  :where(a, button, summary, input, select, textarea, a img, .nav-menu a span, .nav-extra a span) { transition: none; }
  /* Eigene Regel: Browser ohne ::details-content verwerfen sonst die ganze Liste */
  .acc-item::details-content { transition: none; }
  .booking { transition: none; translate: none; }
  .booking-frame { transition: none; }
  .booking-wait::before { animation: none; border-top-color: currentColor; opacity: .5; }
}

/* ---------- Karte mit Zustimmung (Baustein „Karte“, artefakt-karte.js) ---------- */
.mod-map { position: relative; display: flex; align-items: center; justify-content: center; min-height: 20rem; background: #eee; background: color-mix(in srgb, var(--c-primary, #888) 10%, #fff); }
.mod-map .map-gate { max-width: 20rem; padding: 1.5em; text-align: center; }
.mod-map .map-gate p { margin: 0 0 1em; font-size: .85em; line-height: 1.5; }
.mod-map .map-btn { cursor: pointer; }
.mod-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Galerie (Baustein „Galerie“, artefakt.js) ----------
   Alle Bilder liegen im selben Rahmen übereinander; das sichtbare blendet weich über und gibt dem Rahmen
   seine Höhe (Hochformat: höchstens 80 % der Fensterhöhe, mittig). Ecken am Bild selbst. */
.mod-gallery { position: relative; }
.gal-frame { position: relative; }
.gal-slide {
  position: absolute; top: 0; left: 50%; translate: -50% 0; display: block;
  max-width: 100%; max-height: 80vh; width: auto; height: auto;
  opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s .6s;
}
.gal-slide.is-on { position: relative; left: auto; translate: none; margin: 0 auto; opacity: 1; visibility: visible; transition: opacity .6s ease, visibility 0s; }
.gal-prev, .gal-next {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; background: var(--gal-bg, #fff); color: var(--gal-fg, #2e2e2f); cursor: pointer;
}
.gal-prev { left: 15px; }
.gal-next { right: 15px; }
.gal-prev svg, .gal-next svg { width: 50%; height: 50%; }
@media (prefers-reduced-motion: reduce) { .gal-slide, .gal-slide.is-on { transition: none; } }

@font-face{font-family:"Continua-Regular";src:url("../../fonts/Continua-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Dia-Regular";src:url("../../fonts/Dia-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Dia-Bold";src:url("../../fonts/Dia-Bold.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
:root{--c-ink:#2e2e2f;--c-paper:#fbfbfb;--c-line:#a5a5a5;--c-lilac:#d1bdf2;--container:1170px}
html{font-size:18px}
.art br{display:block;margin-top:0.4em}
body.art{hyphens:auto;overflow-wrap:break-word}
:root{--mod-gap:0px}
body.art{font-family:"Dia-Regular",sans-serif;color:var(--c-ink);background:var(--c-paper)}
.art h1{font-family:"Continua-Regular",sans-serif;color:var(--c-ink)}
.art h1{font-size:46px}
.art h1{line-height:52px}
.art h1{position:relative;display:block;width:fit-content;max-width:100%}
.art h1{padding-top:18px}
.art h1::before{content:"";position:absolute;left:0;width:100%;height:1px;background:var(--c-line);top:-5px}
.art h2{font-family:"Continua-Regular",sans-serif;color:var(--c-ink)}
.art h2{font-size:46px}
.art h2{line-height:52px}
.art h2{position:relative;display:block;width:fit-content;max-width:100%}
.art h2{padding-top:18px}
.art h2::before{content:"";position:absolute;left:0;width:100%;height:1px;background:var(--c-line);top:-5px}
.art h3{font-family:"Dia-Regular",sans-serif;color:var(--c-ink)}
.art h3{font-size:30px}
.art h3{line-height:40px}
.art p{font-family:"Dia-Regular",sans-serif;color:var(--c-ink)}
.art p{font-size:26px}
.art p{line-height:37.5469px}
.art p{margin-bottom:26px}
.art li{font-size:26px}
.art li{line-height:37.5469px}
.art :is(strong,b){font-family:"Dia-Bold",sans-serif;font-weight:inherit}
.art .mod-text a{color:var(--c-ink);text-decoration:none}
.art .mod-text a:hover{color:var(--c-lilac)}
.btn-primary{font-family:"Continua-Regular",sans-serif;color:#000000;background:var(--c-paper);border:1px solid var(--c-ink);line-height:1.6667;letter-spacing:0.5px}
.btn-primary{font-size:25px}
.btn-primary{border-radius:0px}
.btn-primary{padding-top:8px;padding-right:20px;padding-bottom:12px;padding-left:20px}
.btn-primary:hover,.btn-primary:focus-visible{color:#000000;background:var(--c-lilac)}
:root{--nav-h:60px}
.nav{background:var(--c-paper);--nav-bg:var(--c-paper);color:var(--c-ink);--nav-fg:var(--c-ink)}
.nav{padding-left:20px;padding-right:20px;--nav-px:20px}
.nav-menu a{font-size:26px}
.nav{--nav-ip:13px}
.nav-menu a{padding-left:13px;padding-right:13px}
.nav-menu a{letter-spacing:0.5px}
.nav-menu a:hover,.nav-menu a:focus-visible,.nav-menu a[aria-current]{color:var(--c-lilac)}
.nav-logo{font-family:"Continua-Regular",sans-serif;color:var(--c-ink);letter-spacing:1.5px;text-decoration:none;white-space:nowrap}
.nav-logo{font-size:25px;line-height:1}
.nav-logo{margin-top:-4px}
.nav{--extra-gap:15px}
.nav-extra-switch a{opacity:1}
.nav .nav-extra .nav-x-0{border-radius:50%}
.nav-overlay .nav-ox-0{border-radius:50%}
.nav .nav-extra .nav-x-0{font-size:24px}
.nav .nav-extra .nav-x-0{color:var(--c-ink);background:var(--c-paper);border-style:solid;border-width:1px;border-color:var(--c-ink)}
.nav .nav-extra .nav-x-0{padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px}
.nav .nav-extra .nav-x-0{width:32px;height:32px;justify-content:center}
.nav .nav-extra .nav-x-0:hover,.nav .nav-extra .nav-x-0:focus-visible{color:var(--c-paper);background:var(--c-ink)}
.nav-overlay .nav-ox-0{font-size:24px}
.nav-overlay .nav-ox-0{color:var(--c-ink);background:var(--c-paper);border-style:solid;border-width:1px;border-color:var(--c-ink)}
.nav-overlay .nav-ox-0{padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px}
.nav-overlay .nav-ox-0{width:32px;height:32px;justify-content:center}
.nav-overlay .nav-ox-0:hover,.nav-overlay .nav-ox-0:focus-visible{color:var(--c-paper);background:var(--c-ink)}
.nav .nav-extra .nav-x-1{border-radius:50%}
.nav-overlay .nav-ox-1{border-radius:50%}
.nav .nav-extra .nav-x-1{font-size:24px}
.nav .nav-extra .nav-x-1{color:var(--c-ink);background:var(--c-paper);border-style:solid;border-width:1px;border-color:var(--c-ink)}
.nav .nav-extra .nav-x-1{padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px}
.nav .nav-extra .nav-x-1{width:32px;height:32px;justify-content:center}
.nav .nav-extra .nav-x-1:hover,.nav .nav-extra .nav-x-1:focus-visible{color:var(--c-paper);background:var(--c-ink)}
.nav-overlay .nav-ox-1{font-size:24px}
.nav-overlay .nav-ox-1{color:var(--c-ink);background:var(--c-paper);border-style:solid;border-width:1px;border-color:var(--c-ink)}
.nav-overlay .nav-ox-1{padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px}
.nav-overlay .nav-ox-1{width:32px;height:32px;justify-content:center}
.nav-overlay .nav-ox-1:hover,.nav-overlay .nav-ox-1:focus-visible{color:var(--c-paper);background:var(--c-ink)}
.nav-overlay{background:var(--c-paper);color:var(--c-ink)}
.nav-overlay a{font-size:30px}
.nav-overlay a{letter-spacing:0.5px}
.nav-overlay a{padding-top:9px;padding-bottom:9px}
.nav-overlay{inset:0}
.nav-overlay a{line-height:30px}
.nav-overlay a:hover,.nav-overlay a:focus-visible,.nav-overlay a[aria-current]{color:var(--c-lilac)}
.nav-burger{width:24px}
.nav-burger{color:#000000}
.nav-burger span,.nav-burger span::before,.nav-burger span::after{height:1px}
.nav-burger span::before{transform:translateY(-8px)}
.nav-burger span::after{transform:translateY(8px)}
.nav-burger{height:17px}
@media (max-width:991px){.art br{display:block;margin-top:0.4em}:root{--mod-gap:0px}.art h1{font-size:36px}.art h1{line-height:43.92px}.art h1{padding-top:14px}.art h2{font-size:36px}.art h2{line-height:43.92px}.art h2{padding-top:14px}.art h3{font-size:22px}.art h3{line-height:30px}.art p{font-size:21.96px}.art p{line-height:31.7188px}.art p{margin-bottom:22px}.art li{font-size:21.96px}.art li{line-height:31.7188px}.btn-primary{font-size:20px}.btn-primary{border-radius:0px}:root{--nav-h:50px}.nav{padding-left:20px;padding-right:20px;--nav-px:20px}.nav-menu a{font-size:26px}.nav{--nav-ip:13px}.nav-menu a{padding-left:13px;padding-right:13px}.nav-logo{font-size:21px;line-height:1}.nav-logo{margin-top:-4px}.nav{--extra-gap:15px}.nav-extra{display:none}.nav-overlay-extra{display:block;border-top:0;padding-top:0;margin-top:22px}.nav-overlay-extra li{display:flex;justify-content:center}.nav .nav-extra .nav-x-0{border-radius:50%}.nav-overlay .nav-ox-0{border-radius:50%}.nav .nav-extra .nav-x-0{font-size:24px}.nav .nav-extra .nav-x-0{width:32px;height:32px;justify-content:center}.nav-overlay .nav-ox-0{font-size:24px}.nav-overlay .nav-ox-0{width:32px;height:32px;justify-content:center}.nav .nav-extra .nav-x-1{border-radius:50%}.nav-overlay .nav-ox-1{border-radius:50%}.nav .nav-extra .nav-x-1{font-size:24px}.nav .nav-extra .nav-x-1{width:32px;height:32px;justify-content:center}.nav-overlay .nav-ox-1{font-size:24px}.nav-overlay .nav-ox-1{width:32px;height:32px;justify-content:center}.nav-overlay a{font-size:28px}.nav-overlay a{padding-top:9px;padding-bottom:9px}.nav-overlay a{line-height:28px}.nav-burger{width:40px}.nav-burger span,.nav-burger span::before,.nav-burger span::after{height:1px}.nav-burger span::before{transform:translateY(-8px)}.nav-burger span::after{transform:translateY(8px)}.nav-burger{height:17px}.nav-menu{display:none}.nav-burger{display:flex}}
@media (max-width:767px){.art br{display:block;margin-top:0.32em}:root{--mod-gap:0px}.art h1{font-size:30.06px}.art h1{line-height:39.96px}.art h1{padding-top:10px}.art h2{font-size:30.06px}.art h2{line-height:39.96px}.art h2{padding-top:10px}.art h3{font-size:20px}.art h3{line-height:28px}.art p{font-size:19.98px}.art p{line-height:28.8594px}.art p{margin-bottom:20px}.art li{font-size:19.98px}.art li{line-height:28.8594px}.btn-primary{font-size:18px}.btn-primary{border-radius:0px}:root{--nav-h:50px}.nav{padding-left:20px;padding-right:20px;--nav-px:20px}.nav-menu a{font-size:26px}.nav{--nav-ip:13px}.nav-menu a{padding-left:13px;padding-right:13px}.nav-logo{font-size:24px;line-height:1}.nav-logo{margin-top:0px}.nav{--extra-gap:15px}.nav .nav-extra .nav-x-0{border-radius:50%}.nav-overlay .nav-ox-0{border-radius:50%}.nav .nav-extra .nav-x-0{font-size:24px}.nav .nav-extra .nav-x-0{width:32px;height:32px;justify-content:center}.nav-overlay .nav-ox-0{font-size:24px}.nav-overlay .nav-ox-0{width:32px;height:32px;justify-content:center}.nav .nav-extra .nav-x-1{border-radius:50%}.nav-overlay .nav-ox-1{border-radius:50%}.nav .nav-extra .nav-x-1{font-size:24px}.nav .nav-extra .nav-x-1{width:32px;height:32px;justify-content:center}.nav-overlay .nav-ox-1{font-size:24px}.nav-overlay .nav-ox-1{width:32px;height:32px;justify-content:center}.nav-overlay a{font-size:24px}.nav-overlay a{padding-top:7px;padding-bottom:7px}.nav-overlay a{line-height:26px}.nav-burger{width:35px}.nav-burger span,.nav-burger span::before,.nav-burger span::after{height:1px}.nav-burger span::before{transform:translateY(-7px)}.nav-burger span::after{transform:translateY(7px)}.nav-burger{height:15px}}
.s-cover{padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px}
.s-cover{min-height:100svh}
.s-cover>.sec-inner{display:flex;flex-direction:column;flex:1 0 auto}
.r-cover-row{align-items:center}
.r-cover-row{--gap:0px}
.r-cover-row{flex:1 0 auto}
.r-cover-row{--gap-fit:max(0px,100% - 16px)}
.c-cover-logo-col{flex:0 0 calc((100% + var(--g, 0px)) * 0.5 - var(--g, 0px));max-width:calc((100% + var(--g, 0px)) * 0.5 - var(--g, 0px));--col-w:calc((100% + var(--g, 0px)) * 0.5 - var(--g, 0px))}
.m-cover-logo{padding-top:0px;padding-right:min(15%,max(0px,(100% - 48px)/2));padding-bottom:0px;padding-left:min(15%,max(0px,(100% - 48px)/2))}
.c-cover-bild-col{flex:0 0 calc((100% + var(--g, 0px)) * 0.5 - var(--g, 0px));max-width:calc((100% + var(--g, 0px)) * 0.5 - var(--g, 0px));--col-w:calc((100% + var(--g, 0px)) * 0.5 - var(--g, 0px))}
.c-cover-bild-col{min-height:100svh}
.c-cover-bild-col{background-image:url("../../media/hero-desktop.webp");background-color:var(--c-paper);background-repeat:no-repeat;background-size:cover;background-position:50% 100%}
.s-inde-1{padding-top:150px;padding-bottom:150px}
.r-inde-1-0{--gap:0px}
.c-inde-1-0-0{flex:0 0 100%;max-width:100%;--col-w:100%}
.c-inde-1-0-0{padding-right:min(20%,max(0px,(var(--col-w,100%) - 48px)/2));padding-left:min(20%,max(0px,(var(--col-w,100%) - 48px)/2))}
.m-inde-1-0-0-0{padding-bottom:25px}
.m-inde-1-0-0-1{padding-bottom:35px}
.m-inde-1-0-0-1 hr{border-top-color:var(--c-line);border-top-width:1px}
.m-inde-1-0-0-2 :is(h1,h2,h3,h4,p,li,a){font-size:26px}
.m-inde-1-0-0-2 :is(h1,h2,h3,h4,p,li,a){line-height:37.5469px}
.m-inde-1-0-0-3{margin-top:40px}
.m-inde-1-0-0-3{border-radius:15px;overflow:hidden}
.m-inde-1-0-0-3{min-height:40vh}
.nav-logo{display:none}
:root{--nav-h:60px}
.nav{padding-left:20px;padding-right:20px;--nav-px:20px}
.nav-logo{font-size:25px}
@media (max-width:991px){.s-inde-1{padding-top:80px;padding-bottom:80px}.c-inde-1-0-0{padding-right:min(12%,max(0px,(var(--col-w,100%) - 48px)/2));padding-left:min(12%,max(0px,(var(--col-w,100%) - 48px)/2))}.m-inde-1-0-0-0{padding-bottom:23px}.m-inde-1-0-0-1{padding-bottom:28px}.m-inde-1-0-0-2 :is(h1,h2,h3,h4,p,li,a){font-size:21.96px}.m-inde-1-0-0-2 :is(h1,h2,h3,h4,p,li,a){line-height:31.7188px}.m-inde-1-0-0-3{margin-top:30px}.m-inde-1-0-0-3{border-radius:15px;overflow:hidden}.nav-logo{display:block}:root{--nav-h:50px}.nav{padding-left:20px;padding-right:20px;--nav-px:20px}.nav-logo{font-size:24px}}
@media (max-width:767px){.c-cover-logo-col{display:none}.c-cover-bild-col{flex:0 0 100%;max-width:100%;--col-w:100%}.s-inde-1{padding-top:50px;padding-bottom:50px}.c-inde-1-0-0{flex:0 0 100%;max-width:100%;--col-w:100%}.c-inde-1-0-0{padding-right:min(5%,max(0px,(var(--col-w,100%) - 48px)/2));padding-left:min(5%,max(0px,(var(--col-w,100%) - 48px)/2))}.m-inde-1-0-0-0{padding-bottom:18px}.m-inde-1-0-0-1{padding-bottom:20px}.m-inde-1-0-0-2 :is(h1,h2,h3,h4,p,li,a){font-size:19.98px}.m-inde-1-0-0-2 :is(h1,h2,h3,h4,p,li,a){line-height:28.8594px}.m-inde-1-0-0-3{margin-top:20px}.m-inde-1-0-0-3{border-radius:10px;overflow:hidden}:root{--nav-h:40px}.nav{padding-left:15px;padding-right:15px;--nav-px:15px}.nav-logo{font-size:24px}}
@media(max-width:600px) and (max-aspect-ratio:3/5){.c-cover-bild-col{background-image:url("../../media/hero-phone.webp")}}

/* LOA interaction refinements, isolated from the original export. */
.art a,.art a:visited {color:var(--c-ink);text-decoration:none}
.art a:hover,.art a:focus-visible {color:var(--c-lilac)}
.art .nav-menu a span {border-bottom:0}
.art a {transition:color .2s ease,background-color .2s ease}
.art a:focus-visible,.art button:focus-visible,.art summary:focus-visible {outline:2px solid var(--c-ink);outline-offset:4px}
.nav {transition:transform .32s cubic-bezier(.22,.61,.36,1),box-shadow .25s ease}
.nav.loa-nav-hidden {transform:translateY(-105%)}
.nav-open .nav {transform:none}
.loa-reveal {opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s cubic-bezier(.22,.61,.36,1)}
.loa-reveal.loa-visible {opacity:1;transform:none}
.acc-item::details-content,.acc-item[open]::details-content {block-size:auto;transition:none}
.acc-item summary::after {transition:rotate .36s cubic-bezier(.22,.61,.36,1)}
.acc-item[data-expanding="false"] summary::after {rotate:0deg}
.gal-frame {touch-action:pan-y pinch-zoom;user-select:none}
.gal-slide {transition:opacity .45s ease,visibility 0s .45s}
.gal-slide.is-on {transition:opacity .45s ease,visibility 0s}
@view-transition {navigation:none}
@media(prefers-reduced-motion:reduce){.loa-reveal{opacity:1;transform:none}.nav,.art a,.loa-reveal,.gal-slide,.gal-slide.is-on{transition:none}}

/* Prevent scroll anchoring from fighting the explicit accordion height animation. */
html {overflow-anchor:none}
.acc-item,.acc-body {overflow-anchor:none}
/* Hero logo follows its designed column width, rather than its SVG pixel size. */
.m-cover-logo img {display:block;width:100%;height:auto}
.art .nav-menu a[aria-current="page"],
.art .nav-menu a[aria-current="page"]:visited,
.art .nav-overlay a[aria-current="page"],
.art .nav-overlay a[aria-current="page"]:visited {color:var(--c-lilac)}
/* Keep the white scroll cue within the photograph at every breakpoint. */
.s-cover > .scroll-hint {left:75%;bottom:30px;display:flex;align-items:center;justify-content:center;min-width:53px;min-height:44px}
.s-cover > .scroll-hint img {width:53px;height:auto;max-width:none}
@media(max-width:767px){.s-cover > .scroll-hint {left:50%;bottom:20px}}
[data-loa-map] {height:40vh;min-height:300px;z-index:0;background:#eee8dc}
.loa-map-marker {background:none;border:0}
.loa-map-link {display:block;width:65px;height:65px}
.loa-map-link img {display:block;width:65px;height:65px;transform-origin:50% 50%;transition:transform .55s cubic-bezier(.22,.61,.36,1)}
.loa-map-link:hover img,.loa-map-link:focus-visible img {transform:scale(1.10)}
.leaflet-control-attribution {font:10px/1.4 Arial,sans-serif;max-width:100%}
@media(prefers-reduced-motion:reduce){.loa-map-link img{transition:none}}

/* Restore scholarship text blocks and the original step-number typeface. */
.art .mod-accordion .acc-body .loa-stay-heading {margin:1.25em 0 .45em}
.art .mod-accordion .acc-body .loa-stay-heading:first-child {margin-top:0}
.art .mod-accordion .acc-body .loa-stay-paragraph {margin:0 0 .7em}
.art .mod-accordion .acc-body .loa-step-number {font-family:"Continua-Regular",sans-serif;font-size:28px;line-height:32px;margin:0}
/* Button labels must stay readable on the lilac hover background. */
.art a.btn-primary,.art a.btn-primary:visited {color:var(--c-ink)}
.art .btn-primary:hover,.art .btn-primary:focus-visible,
.art a.btn-primary:hover,.art a.btn-primary:focus-visible {color:var(--c-ink);background:var(--c-lilac)}
.art .mod-accordion .acc-body .loa-step-number {display:inline-flex;align-items:center;justify-content:center;width:55px;height:55px;box-sizing:border-box;border:1px solid var(--c-ink);border-radius:50%;padding:9px 20px 11px}

.loa-process-heading {margin-top:1.2em!important;margin-bottom:.5em!important}
.loa-process-heading:first-child {margin-top:0!important}
.loa-process-divider {border:0;border-top:1px solid var(--c-line);margin:1.8em 0}
.loa-process-steps {list-style:none;padding:0;margin:1.2em 0;counter-reset:loa-step}
.loa-process-steps>li {padding:0;margin:0 0 1.4em}
.art .mod-accordion .loa-process-steps>li>p {font-size:inherit;line-height:inherit;margin:.7em 0 0}
.art .mod-accordion .loa-process-steps>li {font-size:inherit;line-height:inherit}
/* Keep each application step's text beside its numbered circle. */
.art .mod-accordion .loa-process-steps>li {display:grid;grid-template-columns:55px minmax(0,1fr);column-gap:18px;align-items:start}
.art .mod-accordion .loa-process-steps>li>p {margin:0;padding-top:10px}
@media(max-width:767px){.art .mod-accordion .loa-process-steps>li{column-gap:14px}}

/* Number above its own text; spacing separates complete steps. */
.art .mod-accordion .loa-process-steps>li {display:block;margin:0 0 1.5em}
.art .mod-accordion .loa-process-steps>li>p {margin:.25em 0 0;padding-top:0}

/* Matched download button widths, constrained to available mobile width. */
.c-stip-1-0-0>.mod-button {width:100%;max-width:430px}
.c-stip-1-0-0>.mod-button>.btn {display:flex;align-items:center;justify-content:center;width:100%;box-sizing:border-box;text-align:center}