@charset "utf-8";
/* ==========================================================================
   MG.MotionArts – Stylesheet
   Alle Schriften werden selbst gehostet. Keine externen Requests.
   ========================================================================== */

/* --- Schriften ---------------------------------------------------------- */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url("../fonts/archivo-latin.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url("../fonts/archivo-latin-ext.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Serif";
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url("../fonts/source-serif-latin.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif";
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url("../fonts/source-serif-latin-ext.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Serif";
  font-style: italic;
  font-display: swap;
  font-weight: 200 900;
  src: url("../fonts/source-serif-latin-italic.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Tokens ------------------------------------------------------------- */

:root {
  /* --- Farben aus dem Logo -------------------------------------------
     Das Lila ist der gemessene Wert aus der Logodatei. Auf Schwarz
     erreicht es 3,59:1 - genug fuer grosse Schrift und Flaechen, zu
     wenig fuer Fliesstext. Fuer kleine Akzente steht deshalb ein
     helleres Lila mit 7,39:1 bereit. */
  --schwarz: #000000;
  --kohle: #0e0c13;
  --kohle-2: #17141f;
  --lila: #8816fe;
  --lila-hell: #b77dff;
  --lila-tief: #390870;
  --lila-rgb: 136, 22, 254;
  --weiss: #ffffff;
  --weiss-leise: #e9e7ef;
  --grau: #a9a3b8;

  /* --- Rollen ---------------------------------------------------------
     Die Namen stammen aus der ersten Fassung und bleiben, damit nicht
     jede Regel angefasst werden muss. Was frueher dunkle Schrift auf
     hellem Grund war, ist jetzt helle Schrift auf dunklem Grund - die
     kraeftigen Konturen tragen den Charakter unveraendert weiter. */
  --petrol: var(--kohle);
  --petrol-hell: var(--kohle-2);
  --petrol-tief: var(--schwarz);
  --chalk: var(--weiss-leise);
  --chalk-2: var(--kohle-2);
  --ink: var(--weiss-leise);
  --ink-leise: var(--grau);
  --sun: var(--lila);
  --sun-schrift: var(--lila-hell);

  /* Rueckmeldungen im dunklen Kleid */
  --clay: #6b2436;
  --sage: #1f5138;
  --sky: #2a3f6b;

  /* Kursstufen: hell nach dunkel bildet jung nach alt ab */
  --kurs-weiss: #ffffff;
  --kurs-flieder-hell: #dcc7ff;
  --kurs-flieder: #b98cff;
  --kurs-lila: var(--lila);
  --kurs-lila-tief: var(--lila-tief);

  /* Schrift */
  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-text: "Source Serif", Georgia, "Times New Roman", serif;

  --t-xs: 0.8125rem;
  --t-sm: 0.9375rem;
  --t-base: 1.125rem;
  --t-md: 1.3125rem;
  --t-lg: clamp(1.45rem, 1.1rem + 1.4vw, 2rem);
  --t-xl: clamp(1.9rem, 1.2rem + 3vw, 3.1rem);
  --t-2xl: clamp(1.9rem, 0.9rem + 6.5vw, 4.6rem);

  /* Raster */
  --seite: 1280px;
  --lesebreite: 34rem;
  --luft: clamp(1.25rem, 4vw, 3rem);
  --band-y: clamp(3.5rem, 8vw, 7rem);
}

/* --- Grundlagen --------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--schwarz);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: var(--t-base);
  line-height: 1.62;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
}

h1,
h2,
h3,
h4 {
  font-family: var(--f-display);
  line-height: 1.03;
  margin: 0;
  letter-spacing: -0.015em;
  font-weight: 800;
  font-variation-settings: "wdth" 108;
}

p {
  margin: 0 0 1.05em;
}

p:last-child {
  margin-bottom: 0;
}

strong {
  font-weight: 650;
}

:focus-visible {
  outline: 3px solid var(--sun);
  outline-offset: 3px;
  border-radius: 2px;
}

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

.skip {
  position: absolute;
  left: 0.5rem;
  top: -4rem;
  z-index: 100;
  background: var(--sun);
  color: var(--ink);
  padding: 0.7rem 1.1rem;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-sm);
  text-decoration: none;
  transition: top 0.15s;
}

.skip:focus {
  top: 0.5rem;
}

/* --- Raster ------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--seite);
  margin-inline: auto;
  padding-inline: var(--luft);
}

.band {
  padding-block: var(--band-y);
  /* Eigener Blockformatierungskontext: verhindert, dass Aussenabstaende von
     Kindelementen nach aussen kollabieren. Ohne das entsteht bei
     padding-top: 0 ein heller Streifen ueber dem Band. */
  display: flow-root;
}

.band--petrol {
  background: var(--petrol);
  color: var(--chalk);
}

.band--tief {
  background: var(--petrol-tief);
  color: var(--chalk);
}

.band--sun {
  background: var(--sun);
  /* Reines Weiss statt des leicht abgetoenten Weiss: auf dem Lila sind das
     5,85:1 statt 4,77:1 - dieselbe Optik, mehr Reserve. */
  color: var(--weiss);
}

.band--chalk2 {
  background: var(--chalk-2);
}

.band--knapp {
  padding-block: clamp(2.25rem, 5vw, 3.5rem);
}

/* --- Typografische Bausteine -------------------------------------------- */

.kicker {
  font-family: var(--f-display);
  font-size: var(--t-sm);
  font-weight: 600;
  font-variation-settings: "wdth" 100;
  letter-spacing: 0.01em;
  color: var(--ink-leise);
  margin: 0 0 0.6rem;
}

.band--petrol .kicker,
.band--tief .kicker,
.hero .kicker {
  color: var(--sun-schrift);
}

.titel-xl {
  font-size: var(--t-xl);
  font-variation-settings: "wdth" 112;
  font-weight: 800;
}

.titel-2xl {
  font-size: var(--t-2xl);
  font-variation-settings: "wdth" 112;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.lead {
  font-size: var(--t-md);
  line-height: 1.5;
  max-width: 38rem;
}

.prosa {
  max-width: var(--lesebreite);
}

.prosa h2 {
  font-size: var(--t-lg);
  margin: 2.4em 0 0.7em;
  font-variation-settings: "wdth" 105;
}

.prosa h2:first-child {
  margin-top: 0;
}

.prosa a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.prosa ul {
  margin: 0 0 1.05em;
  padding-left: 1.15rem;
}

.prosa li {
  margin-bottom: 0.3em;
}

.schluss {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-lg);
  font-variation-settings: "wdth" 105;
  line-height: 1.15;
  margin: 2rem 0 0;
  padding-top: 1.6rem;
  border-top: 3px solid var(--ink);
}

/* --- Buttons ------------------------------------------------------------ */

.btn {
  display: inline-block;
  font-family: var(--f-display);
  font-size: var(--t-sm);
  font-weight: 700;
  font-variation-settings: "wdth" 100;
  line-height: 1.1;
  padding: 0.95rem 1.5rem;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 0.14s ease, color 0.14s ease,
    border-color 0.14s ease;
}

.btn--sun {
  background: var(--sun);
  color: var(--ink);
  border-color: var(--sun);
}

.btn--sun:hover {
  background: #ffd873;
  border-color: #ffd873;
}

.btn--ink {
  background: var(--lila);
  color: var(--chalk);
  border-color: var(--ink);
}

.btn--ink:hover {
  background: var(--petrol);
  border-color: var(--petrol);
}

.btn--linie {
  background: transparent;
  color: currentColor;
  border-color: currentColor;
}

.btn--linie:hover {
  background: currentColor;
}

.band--petrol .btn--linie:hover,
.band--tief .btn--linie:hover {
  color: var(--petrol);
}

.band--sun .btn--linie:hover {
  color: var(--sun-schrift);
}

.btn-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.8rem;
}

.mehr {
  display: inline-block;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-sm);
  text-decoration: none;
  border-bottom: 3px solid var(--sun);
  padding-bottom: 2px;
}

.mehr:hover {
  border-bottom-color: currentColor;
}

/* --- Kopfzeile ---------------------------------------------------------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--petrol);
  color: var(--chalk);
}

.kopf__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.25rem;
}

.marke {
  font-family: var(--f-display);
  font-size: 1.32rem;
  font-weight: 800;
  font-variation-settings: "wdth" 112;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--chalk);
  white-space: nowrap;
}

.marke b {
  color: var(--sun-schrift);
  font-weight: inherit;
}

.nav {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

.nav a,
.nav .nav__toggle {
  font-family: var(--f-display);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--chalk);
  text-decoration: none;
  padding: 0.6rem 0.7rem;
  background: none;
  border: 0;
  cursor: pointer;
  font-variation-settings: "wdth" 100;
  white-space: nowrap;
}

.nav a:hover,
.nav .nav__toggle:hover {
  color: var(--sun-schrift);
}

.nav a[aria-current="page"] {
  color: var(--sun-schrift);
  box-shadow: inset 0 -3px 0 var(--sun);
}

.nav__grp {
  position: relative;
}

.nav__toggle::after {
  content: "";
  display: inline-block;
  width: 0.42em;
  height: 0.42em;
  margin-left: 0.45em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-0.15em) rotate(45deg);
}

.nav__panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 15rem;
  background: var(--petrol-tief);
  padding: 0.4rem;
  border-top: 3px solid var(--sun);
}

.nav__grp[data-offen="1"] .nav__panel {
  display: block;
}

.nav__panel a {
  display: block;
  padding: 0.6rem 0.7rem;
}

.kopf__cta {
  font-family: var(--f-display);
  font-size: var(--t-sm);
  font-weight: 700;
  background: var(--sun);
  color: var(--ink);
  text-decoration: none;
  padding: 0.7rem 1.05rem;
  white-space: nowrap;
}

/* Die Kopie im Navigationsblock ist nur fuer das mobile Menue gedacht. */
.nav > .kopf__cta {
  display: none;
}

.kopf__cta:hover {
  background: #ffd873;
}

.burger {
  display: none;
  background: none;
  border: 2px solid var(--chalk);
  color: var(--chalk);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-sm);
  padding: 0.55rem 0.8rem;
  cursor: pointer;
}

@media (max-width: 1000px) {
  .burger {
    display: block;
  }
  .kopf__cta {
    display: none;
  }
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--petrol-tief);
    padding: 0.5rem var(--luft) 1.5rem;
    border-top: 3px solid var(--sun);
    max-height: calc(100vh - 4.25rem);
    overflow-y: auto;
  }
  .kopf[data-menue="offen"] .nav {
    display: flex;
  }
  .nav a,
  .nav .nav__toggle {
    padding: 0.85rem 0;
    font-size: var(--t-md);
    text-align: left;
    width: 100%;
  }
  .nav__panel {
    position: static;
    display: block;
    min-width: 0;
    background: none;
    border-top: 0;
    padding: 0 0 0.5rem 1rem;
  }
  .nav__toggle {
    display: none;
  }
  .nav__panel a {
    font-size: var(--t-base);
    padding: 0.6rem 0;
  }
  .nav .kopf__cta {
    display: block;
    margin-top: 1rem;
    text-align: center;
    padding: 0.95rem 1rem;
    font-size: var(--t-base);
  }
}

/* --- Hero --------------------------------------------------------------- */

.hero {
  background: var(--petrol);
  color: var(--chalk);
  padding-block: clamp(2.75rem, 8vw, 5.5rem) clamp(3rem, 8vw, 5.5rem);
  overflow: hidden;
  position: relative;
  /* Eigener Stapelkontext, damit die negativen z-index der beiden
     Hintergrundebenen nicht hinter den Seitenhintergrund rutschen. */
  isolation: isolate;
}

/* Hintergrundbild als echtes img-Element, nicht als style-Attribut:
   Die Content-Security-Policy lässt kein Inline-CSS zu. */
.hero__grund {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  z-index: -2;
}

/* Der Schleier bringt das Bild so weit herunter, dass die Wortmarke und
   der Fließtext sicher über den Kontrastvorgaben bleiben. Die Werte sind
   gemessen, nicht geschätzt - siehe hero-kontrast.py. */
.hero__schleier {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg,
      rgba(0, 0, 0, .90) 0%,
      rgba(0, 0, 0, .82) 45%,
      rgba(0, 0, 0, .93) 100%),
    linear-gradient(100deg,
      rgba(0, 0, 0, .55) 0%,
      rgba(0, 0, 0, .18) 60%,
      rgba(0, 0, 0, .55) 100%);
}

/* Ohne Bild bleibt alles wie bisher. */
.hero--bild { background: var(--schwarz); }

/* Buehnenlicht: ein weicher Lilaschein, der langsam wandert. Nur eine
   zusaetzliche Ebene, bewegt wird ausschliesslich per transform. */
.hero__licht {
  position: absolute;
  top: -30%;
  left: -20%;
  width: 70%;
  height: 160%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side,
    rgba(var(--lila-rgb), .42) 0%,
    rgba(var(--lila-rgb), .18) 45%,
    rgba(var(--lila-rgb), 0) 100%);
  opacity: 0;
}

.hero__wort {
  font-family: var(--f-display);
  font-weight: 900;
  font-variation-settings: "wdth" 118;
  font-size: clamp(3.4rem, 17vw, 15rem);
  line-height: 0.82;
  letter-spacing: -0.05em;
  margin: 0;
}

.hero__wort span {
  display: block;
}

.hero__wort span:nth-child(2) {
  color: var(--sun-schrift);
}

/*
 * Der einzige animierte Moment der Seite: die Wortmarke faehrt beim Laden
 * einmalig ueber die Breitenachse der Schrift von schmal auf breit auf.
 */
@media (prefers-reduced-motion: no-preference) {
  .hero__wort span {
    animation: strecken 0.9s cubic-bezier(0.22, 0.75, 0.3, 1) both;
  }
  .hero__wort span:nth-child(2) {
    animation-delay: 0.09s;
  }
  .hero__wort span:nth-child(3) {
    animation-delay: 0.18s;
  }
  @keyframes strecken {
    from {
      font-variation-settings: "wdth" 62;
      opacity: 0.35;
    }
    to {
      font-variation-settings: "wdth" 118;
      opacity: 1;
    }
  }
}

.hero__claim {
  font-family: var(--f-display);
  font-weight: 700;
  font-variation-settings: "wdth" 100;
  font-size: clamp(1.1rem, 2.8vw, 1.75rem);
  letter-spacing: 0.01em;
  margin: clamp(1.6rem, 4vw, 2.4rem) 0 0;
  line-height: 1.25;
}

.hero__text {
  margin: 0.85rem 0 0;
  max-width: 34rem;
  font-size: var(--t-md);
  color: #cfd8d6;
}

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

.seitenkopf {
  background: var(--petrol);
  color: var(--chalk);
  padding-block: clamp(2.75rem, 7vw, 5rem);
}

.seitenkopf__titel {
  font-size: var(--t-2xl);
  font-variation-settings: "wdth" 115;
  font-weight: 900;
  letter-spacing: -0.03em;
  margin: 0;
  max-width: 18ch;
}

.seitenkopf .lead {
  margin-top: 1.15rem;
  color: #cfd8d6;
}

/* Geht der Seitenkopf nahtlos in ein dunkles Band ueber, faellt der
   doppelte Abstand weg. */
.seitenkopf--anschluss {
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.seitenkopf--anschluss + .band--petrol,
.seitenkopf--anschluss + .band--tief {
  padding-top: 0;
}

.brotkrumen {
  font-family: var(--f-display);
  font-size: var(--t-xs);
  font-weight: 600;
  color: #93aeaf;
  margin: 0 0 1rem;
}

.brotkrumen a {
  text-decoration: none;
}

.brotkrumen a:hover {
  color: var(--sun-schrift);
}

/* --- Startseite: Willkommen --------------------------------------------- */

.willkommen {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.willkommen__bild img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

@media (max-width: 860px) {
  .willkommen {
    grid-template-columns: 1fr;
  }
  .willkommen__bild {
    order: -1;
  }
  .willkommen__bild img {
    aspect-ratio: 4 / 3;
  }
}

/* --- Aktionsband -------------------------------------------------------- */

.aktion {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}

.aktion__titel {
  font-size: var(--t-xl);
  font-variation-settings: "wdth" 118;
  font-weight: 900;
  letter-spacing: -0.03em;
  margin: 0 0 0.5rem;
}

.aktion__stufen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.aktion__stufe {
  border: 2px solid var(--ink);
  padding: 0.9rem 1rem;
}

.aktion__menge {
  font-family: var(--f-display);
  font-size: var(--t-sm);
  font-weight: 700;
  display: block;
}

.aktion__preis {
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 4.5vw, 2.35rem);
  font-weight: 900;
  font-variation-settings: "wdth" 112;
  line-height: 1.05;
  display: block;
  margin-top: 0.2rem;
}

.aktion__statt {
  font-family: var(--f-display);
  font-size: var(--t-xs);
  font-weight: 600;
  text-decoration: line-through;
  opacity: 0.75;
}

.aktion__fuss {
  font-size: var(--t-sm);
  margin: 1rem 0 0;
  max-width: 46rem;
}

@media (max-width: 860px) {
  .aktion {
    grid-template-columns: 1fr;
  }
  .aktion__stufen {
    grid-template-columns: 1fr;
  }
  .aktion__stufe {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
  }
  .aktion__preis {
    margin-top: 0;
  }
}

/* --- Kurskacheln -------------------------------------------------------- */

.kurse {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
  margin-top: 2.5rem;
}

.kurs {
  display: flex;
  flex-direction: column;
  background: var(--kohle);
  color: var(--ink);
  text-decoration: none;
  border: 2px solid var(--ink);
  transition: transform 0.16s ease;
}

.band--petrol .kurs,
.band--tief .kurs {
  border-color: var(--chalk);
}

.kurs:hover {
  transform: translateY(-4px);
}

.kurs__bild {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  width: 100%;
  border-bottom: 2px solid var(--ink);
}

.kurs__body {
  padding: 1.4rem 1.5rem 1.6rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.kurs__titel {
  font-size: var(--t-lg);
  font-variation-settings: "wdth" 108;
  margin: 0 0 0.55rem;
}

.kurs__text {
  margin: 0 0 1.3rem;
  font-size: var(--t-sm);
  line-height: 1.55;
}

.kurs__mehr {
  margin-top: auto;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-sm);
  border-bottom: 3px solid var(--sun);
  align-self: flex-start;
  padding-bottom: 2px;
}

.kurs__mehr::after {
  content: "\2192";
  display: inline-block;
  margin-left: 0.45em;
}

/* --- Kursplan ----------------------------------------------------------- */

.plan {
  display: grid;
  grid-template-columns: auto repeat(7, minmax(0, 1fr));
  gap: 2px;
  background: rgba(255, 255, 255, 0.14);
  border: 2px solid rgba(255, 255, 255, 0.14);
  margin-top: 2.25rem;
}

.plan__kopf {
  background: var(--petrol-tief);
  color: var(--chalk);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-sm);
  padding: 0.7rem 0.6rem;
  grid-row: 1;
}

.plan__zeit {
  background: var(--petrol-tief);
  color: #9fb6b7;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-xs);
  padding: 0.35rem 0.7rem;
  grid-column: 1;
  white-space: nowrap;
  display: flex;
  align-items: flex-start;
}

.plan__zelle {
  background: var(--petrol);
  min-height: 2.4rem;
}

.plan__kurs {
  display: block;
  color: var(--ink);
  text-decoration: none;
  padding: 0.6rem 0.7rem;
  margin: 0;
  overflow: hidden;
}

.plan__kurs:hover {
  box-shadow: inset 0 0 0 3px var(--ink);
}

.plan__kurs-titel {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-sm);
  line-height: 1.15;
  display: block;
}

.plan__kurs-zeit {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-xs);
  display: block;
  margin-top: 0.25rem;
}

.plan__kurs-alter {
  font-size: var(--t-xs);
  display: block;
  margin-top: 0.35rem;
  line-height: 1.3;
}

.f-weiss {
  background: var(--kurs-weiss);
  color: var(--schwarz);
}

.f-flieder-hell {
  background: var(--kurs-flieder-hell);
  color: var(--schwarz);
}

.f-flieder {
  background: var(--kurs-flieder);
  color: var(--schwarz);
}

.f-lila {
  background: var(--kurs-lila);
  color: var(--weiss);
}

.f-lila-tief {
  background: var(--kurs-lila-tief);
  color: var(--weiss);
}

.plan-liste {
  margin: 2.25rem 0 0;
  padding: 0;
  list-style: none;
  display: none;
}

.plan-tag {
  border-top: 2px solid rgba(255, 255, 255, 0.2);
  padding-top: 1rem;
  margin-bottom: 1.6rem;
}

.plan-tag__name {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--t-lg);
  margin: 0 0 0.85rem;
}

.plan-tag__leer {
  font-size: var(--t-sm);
  color: #9fb6b7;
  margin: 0;
}

.plan-tag__kurse {
  display: grid;
  gap: 0.6rem;
}

@media (max-width: 900px) {
  .plan {
    display: none;
  }
  .plan-liste {
    display: block;
  }
}

.legende {
  margin-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  padding: 0;
  list-style: none;
  font-family: var(--f-display);
  font-size: var(--t-sm);
  font-weight: 600;
}

.legende li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.legende i {
  width: 1.05rem;
  height: 1.05rem;
  display: block;
  flex: none;
}

/* --- Kursdetail --------------------------------------------------------- */

.detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

@media (max-width: 900px) {
  .detail {
    grid-template-columns: 1fr;
  }
}

.seitenbox {
  border: 2px solid var(--ink);
  padding: 1.4rem 1.5rem 1.6rem;
}

.seitenbox__titel {
  font-size: var(--t-md);
  font-variation-settings: "wdth" 105;
  margin: 0 0 1rem;
}

.terminliste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.termin {
  display: block;
  text-decoration: none;
  color: var(--ink);
  padding: 0.7rem 0.85rem;
  border-left: 5px solid var(--ink);
  background: var(--chalk-2);
}

.termin:hover {
  background: var(--sun);
}

.termin__tag {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-sm);
  display: block;
}

.termin__name {
  font-size: var(--t-sm);
  display: block;
  margin-top: 0.15rem;
}

.hinweis {
  font-size: var(--t-sm);
  border-left: 5px solid var(--sun);
  padding: 0.15rem 0 0.15rem 1rem;
  margin: 2rem 0 0;
}

.band--petrol .hinweis,
.band--tief .hinweis {
  color: #cfd8d6;
}

/* --- Person ------------------------------------------------------------- */

.person {
  display: grid;
  grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.person__bild img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.person__meta {
  font-family: var(--f-display);
  font-size: var(--t-sm);
  font-weight: 600;
  margin: 1rem 0 0;
}

@media (max-width: 860px) {
  .person {
    grid-template-columns: 1fr;
  }
}

.zitat {
  margin: 0;
  border-top: 3px solid var(--sun);
  padding-top: 1.5rem;
}

.zitat p {
  font-family: var(--f-display);
  font-weight: 700;
  font-variation-settings: "wdth" 105;
  font-size: var(--t-lg);
  line-height: 1.18;
  letter-spacing: -0.015em;
  margin: 0;
}

/* --- Blog --------------------------------------------------------------- */

.beitraege {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  gap: clamp(1.5rem, 3vw, 2.25rem);
}

.beitrag {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

.beitrag__bild {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border: 2px solid var(--ink);
}

.beitrag__datum {
  font-family: var(--f-display);
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--ink-leise);
  margin: 1rem 0 0.4rem;
}

.beitrag__titel {
  font-size: var(--t-lg);
  font-variation-settings: "wdth" 105;
  margin: 0 0 0.5rem;
}

.beitrag:hover .beitrag__titel {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 0.15em;
  text-decoration-color: var(--sun-schrift);
}

.beitrag__teaser {
  font-size: var(--t-sm);
  margin: 0;
}

.artikel__bild {
  width: 100%;
  aspect-ratio: 16 / 8;
  object-fit: cover;
  margin-bottom: clamp(2rem, 5vw, 3.25rem);
  border: 2px solid var(--ink);
}

.artikel__fuss {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: 1.5rem;
  border-top: 2px solid var(--chalk-2);
}

/* --- Anmeldung ---------------------------------------------------------- */

.schritte {
  counter-reset: schritt;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
}

.schritt {
  border-top: 3px solid var(--sun);
  padding-top: 1rem;
}

.schritt__nr {
  counter-increment: schritt;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--t-sm);
  display: block;
  margin-bottom: 0.35rem;
}

.schritt__nr::before {
  content: "Schritt " counter(schritt);
}

.schritt__titel {
  font-size: var(--t-md);
  font-variation-settings: "wdth" 105;
  margin: 0 0 0.5rem;
}

.schritt p {
  font-size: var(--t-sm);
}

.wahl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 0.9rem;
  margin-top: 2.25rem;
  padding: 0;
  list-style: none;
}

.wahl__kurs {
  display: block;
  text-decoration: none;
  color: var(--ink);
  padding: 1.15rem 1.25rem;
  height: 100%;
  border: 2px solid transparent;
}

.wahl__kurs:hover {
  border-color: var(--ink);
}

.wahl__name {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--t-md);
  font-variation-settings: "wdth" 105;
  line-height: 1.12;
  display: block;
}

.wahl__zeit {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-sm);
  display: block;
  margin-top: 0.45rem;
}

.wahl__alter {
  font-size: var(--t-sm);
  display: block;
  margin-top: 0.35rem;
}

.wahl__cta {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-xs);
  display: block;
  margin-top: 0.9rem;
  border-top: 2px solid currentColor;
  padding-top: 0.5rem;
}

/* --- Standort / Karte --------------------------------------------------- */

.standort {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

@media (max-width: 860px) {
  .standort {
    grid-template-columns: 1fr;
  }
}

.adresse {
  font-size: var(--t-md);
  font-style: normal;
  line-height: 1.45;
}

.karte {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--chalk-2);
  border: 2px solid var(--ink);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 1.5rem;
  gap: 0.75rem;
}

.karte__hinweis {
  font-size: var(--t-sm);
  margin: 0;
  max-width: 30rem;
}

.karte iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --- Fusszeile ---------------------------------------------------------- */

.fuss {
  background: var(--petrol-tief);
  color: var(--chalk);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}

.fuss__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: clamp(1.75rem, 4vw, 3.5rem);
}

@media (max-width: 800px) {
  .fuss__grid {
    grid-template-columns: 1fr;
  }
}

.fuss__marke {
  font-family: var(--f-display);
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  font-weight: 900;
  font-variation-settings: "wdth" 115;
  letter-spacing: -0.03em;
  line-height: 0.95;
  margin: 0 0 0.75rem;
}

.fuss__marke b {
  color: var(--sun-schrift);
  font-weight: inherit;
}

.fuss__claim {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-sm);
  margin: 0 0 1.25rem;
  color: var(--sun-schrift);
}

.fuss p,
.fuss address {
  color: #c3cfce;
  font-size: var(--t-sm);
  font-style: normal;
  line-height: 1.6;
}

.fuss a {
  color: inherit;
}

.fuss h2 {
  font-size: var(--t-sm);
  font-weight: 700;
  font-variation-settings: "wdth" 100;
  margin: 0 0 0.85rem;
  color: var(--chalk);
}

.fuss__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
  font-size: var(--t-sm);
}

.fuss__liste a {
  text-decoration: none;
  color: #c3cfce;
}

.fuss__liste a:hover {
  color: var(--sun-schrift);
}

.fuss__vertrag {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.1rem;
}

.fuss__vertrag a {
  font-family: var(--f-display);
  font-size: var(--t-xs);
  font-weight: 700;
  text-decoration: none;
  border: 2px solid #4c6d70;
  color: var(--chalk);
  padding: 0.45rem 0.7rem;
}

.fuss__vertrag a:hover {
  border-color: var(--sun);
  color: var(--sun-schrift);
}

.fuss__unten {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.25rem;
  border-top: 1px solid #2c4a4e;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  font-size: var(--t-xs);
  color: #93aeaf;
}

.fuss__unten a {
  color: inherit;
}

/* --- 404 ---------------------------------------------------------------- */

.fehler {
  min-height: 58vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

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

@media print {
  .kopf,
  .fuss__vertrag,
  .btn-reihe,
  .skip {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
  }
  .band--petrol,
  .band--tief,
  .hero,
  .seitenkopf {
    background: #fff !important;
    color: #000 !important;
  }
}

/* ==========================================================================
   Formulare, Meldungen, Quittungen
   ========================================================================== */

.meldung {
  border: 2px solid var(--ink);
  padding: .85rem 1.1rem;
  font-weight: 600;
  font-size: var(--t-sm);
}
.meldung--ok     { background: var(--sage); color: var(--weiss); }
.meldung--fehler { background: var(--clay); color: var(--weiss); }

.fehlerbox {
  border: 3px solid var(--ink);
  background: var(--clay);
  color: var(--weiss);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.fehlerbox__titel {
  font-family: var(--f-display);
  font-size: var(--t-lg);
  font-weight: 800;
  margin: 0 0 .6rem;
}
.fehlerbox ul { margin: 0; padding-left: 1.2rem; }
.fehlerbox li { margin-top: .3rem; }

.formular { margin-top: 0; }

.honigtopf {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.block {
  border: 2px solid var(--ink);
  background: var(--kohle);
  padding: clamp(1.35rem, 3.5vw, 2.25rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.band--chalk2 .block { background: var(--kohle); }

.block__titel {
  font-family: var(--f-display);
  font-size: var(--t-lg);
  font-weight: 800;
  font-variation-settings: 'wdth' 110;
  letter-spacing: -.01em;
  padding: 0;
  margin-bottom: 1.25rem;
}
.block__hilfe {
  font-size: var(--t-sm);
  margin: -.75rem 0 1.25rem;
  opacity: .8;
}

.raster {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.1rem 1rem;
}
/* Nur grid-column-end setzen, damit .feld--zeile den Start ueberschreiben
   kann, ohne die Spannweite zu verlieren. Die Kurzschreibweise grid-column
   wuerde den Start mit zuruecksetzen. */
.feld { display: flex; flex-direction: column; grid-column-end: span 12; }
.feld--2  { grid-column-end: span 2; }
.feld--3  { grid-column-end: span 3; }
.feld--4  { grid-column-end: span 4; }
.feld--5  { grid-column-end: span 5; }
.feld--6  { grid-column-end: span 6; }
.feld--7  { grid-column-end: span 7; }
.feld--8  { grid-column-end: span 8; }
.feld--12 { grid-column-end: span 12; }
/* Erzwingt einen Zeilenumbruch im Raster, ohne Fuellelement im Markup. */
.feld--zeile { grid-column-start: 1; }

.feld label {
  font-family: var(--f-display);
  font-size: var(--t-sm);
  font-weight: 700;
  margin-bottom: .35rem;
}
.feld abbr { color: #A4341C; text-decoration: none; }

.feld input,
.feld select,
.feld textarea {
  font: inherit;
  font-size: var(--t-md);
  color: var(--weiss);
  background: var(--kohle-2);
  border: 2px solid var(--ink);
  padding: .6rem .75rem;
  width: 100%;
  border-radius: 0;
  appearance: none;
}
.feld textarea { resize: vertical; min-height: 6rem; }

.feld input::placeholder,
.feld textarea::placeholder { color: var(--grau); opacity: 1; }

/* Kalender- und Auswahlsymbole in Eingaben sind sonst schwarz auf dunkel. */
.feld input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); }
.feld input:focus-visible,
.feld select:focus-visible,
.feld textarea:focus-visible {
  outline: 3px solid var(--sun);
  outline-offset: 1px;
}
.feld__hilfe {
  font-size: var(--t-xs);
  margin-top: .35rem;
  opacity: .75;
}

.kurswahl {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .8rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.kurswahl__feld {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  border: 2px solid var(--ink);
  padding: .9rem 1rem;
  cursor: pointer;
  background: var(--kohle-2);
  /* Die Klassen f-weiss bis f-lila-tief setzen fuer den Kursplan auch eine
     Schriftfarbe. Hier ist nur die farbige Kante erwuenscht, deshalb wird
     die Schriftfarbe ausdruecklich zurueckgeholt. */
  color: var(--weiss-leise);
  border-left-width: 10px;
  transition: transform .12s ease;
}
.kurswahl__feld:hover { transform: translateY(-2px); }
.kurswahl__feld:has(input:checked) { background: var(--lila); color: var(--weiss); }
.kurswahl__feld:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 2px; }
.kurswahl__feld input { width: 1.35rem; height: 1.35rem; flex: none; margin-top: .15rem; accent-color: var(--ink); }
.kurswahl__text { display: flex; flex-direction: column; gap: .15rem; }
.kurswahl__name { font-family: var(--f-display); font-weight: 800; font-size: var(--t-md); }
.kurswahl__zeit { font-size: var(--t-sm); }
.kurswahl__alter,
.kurswahl__frei { font-size: var(--t-xs); opacity: .8; }

.kurswahl__feld.f-weiss        { border-left-color: var(--kurs-weiss); }
.kurswahl__feld.f-flieder-hell { border-left-color: var(--kurs-flieder-hell); }
.kurswahl__feld.f-flieder      { border-left-color: var(--kurs-flieder); }
.kurswahl__feld.f-lila         { border-left-color: var(--kurs-lila); }
.kurswahl__feld.f-lila-tief    { border-left-color: var(--kurs-lila-tief); }

.wahlgruppe { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1.25rem; }
.wahl-radio,
.wahl-check {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  cursor: pointer;
  font-size: var(--t-md);
}
.wahl-radio input,
.wahl-check input {
  width: 1.25rem; height: 1.25rem; flex: none; margin-top: .2rem;
  accent-color: var(--ink);
}
.wahl-check { margin-top: 1.25rem; }

.kinderbereich { border-top: 2px solid var(--ink); padding-top: 1.5rem; }
.kind { border-left: 6px solid var(--sun); padding-left: 1rem; margin-bottom: 1.5rem; }
.kind__titel {
  font-family: var(--f-display);
  font-size: var(--t-md);
  font-weight: 800;
  margin: 0 0 .75rem;
}

.btn--klein { padding: .5rem .95rem; font-size: var(--t-xs); }

.formular__fuss {
  font-size: var(--t-sm);
  opacity: .8;
  margin-top: 1rem;
  max-width: 42rem;
}

.zusammenfassung {
  border: 3px solid var(--ink);
  background: var(--kohle-2);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}
.zusammenfassung__titel {
  font-family: var(--f-display);
  font-size: var(--t-xl);
  font-weight: 800;
  margin: 0 0 .5rem;
}
.zusammenfassung__satz { font-size: var(--t-md); margin-bottom: 1.5rem; }
.zusammenfassung dl { margin: 0; }
.zusammenfassung__zeile {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: 1rem;
  padding: .65rem 0;
  border-top: 1px solid rgba(20, 32, 31, .18);
}
.zusammenfassung__zeile dt { font-weight: 700; font-family: var(--f-display); font-size: var(--t-sm); }
.zusammenfassung__zeile dd { margin: 0; }

.quittung {
  border: 3px solid var(--ink);
  background: var(--lila);
  color: var(--weiss);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}
.quittung__kopf {
  font-family: var(--f-display);
  font-size: var(--t-lg);
  font-weight: 900;
  font-variation-settings: 'wdth' 112;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 1rem;
}
.quittung__zeile { margin: .35rem 0; font-size: var(--t-md); }

.karte {
  border: 2px solid var(--ink);
  background: var(--kohle);
  aspect-ratio: 4 / 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  text-align: center;
}
.karte__hinweis { font-size: var(--t-sm); margin: 0; }
.karte iframe { width: 100%; height: 100%; border: 0; display: block; }
.karte--geladen { display: block; padding: 0; }

@media (max-width: 40rem) {
  .feld--2, .feld--3, .feld--4, .feld--5,
  .feld--6, .feld--7, .feld--8 { grid-column-end: span 12; }
  .zusammenfassung__zeile { grid-template-columns: 1fr; gap: .15rem; }
}

@media print {
  .kopf, .fuss, .btn-reihe, .skip { display: none !important; }
  .band { padding-block: 1rem; }
  .quittung { border-width: 2px; }
  body { background: #fff; }
}

/* ==========================================================================
   Hilfsklassen statt Inline-Styles
   Die Content-Security-Policy erlaubt kein style="..." im Markup. Alles,
   was vorher inline stand, hat hier eine Klasse.
   ========================================================================== */

.m-0    { margin: 0; }
.mt-0   { margin-top: 0; }
.mt-xs  { margin-top: .6rem; }
.mt-1   { margin-top: 1rem; }
.mt-2   { margin-top: 1.25rem; }
.mt-3   { margin-top: 1.5rem; }
.mt-4   { margin-top: 1.75rem; }
.mt-5   { margin-top: 2rem; }
.mt-6   { margin-top: 2.5rem; }
.mb-5   { margin-bottom: 2rem; }
.pt-3   { padding-top: 1.5rem; }
.klein  { font-size: var(--t-sm); }

.figur      { margin: 0; }
.figur--abstand { margin: 0 0 clamp(2rem, 5vw, 3rem); }
.bild--rahmen { border: 2px solid var(--ink); }

.wrap--eng    { max-width: 52rem; }
.wrap--schmal { max-width: 56rem; }
.wrap--mittel { max-width: 62rem; }

.hero__wort--klein { font-size: clamp(2.6rem, 9vw, 6rem); }

/* Farbpunkte in der Legende */
.pkt-weiss        { background: var(--kurs-weiss); }
.pkt-flieder-hell { background: var(--kurs-flieder-hell); }
.pkt-flieder      { background: var(--kurs-flieder); }
.pkt-lila         { background: var(--kurs-lila); }
.pkt-lila-tief    { background: var(--kurs-lila-tief); }

/* Farbige Kante an Terminen */
.termin.t-weiss        { border-left-color: var(--kurs-weiss); }
.termin.t-flieder-hell { border-left-color: var(--kurs-flieder-hell); }
.termin.t-flieder      { border-left-color: var(--kurs-flieder); }
.termin.t-lila         { border-left-color: var(--kurs-lila); }
.termin.t-lila-tief    { border-left-color: var(--kurs-lila-tief); }

/* --- Kursplan-Raster ---------------------------------------------------- */
/* Die erste Zeile traegt die Wochentage, alle weiteren entstehen implizit.
   Dadurch braucht das Raster keine berechnete grid-template-rows-Angabe. */

.plan {
  grid-template-rows: auto;
  grid-auto-rows: minmax(2.4rem, auto);
}

/* Spaltenpositionen: 1 = Uhrzeit, 2-8 = Montag bis Sonntag */
.sp-1 { grid-column: 1; }
.sp-2 { grid-column: 2; }
.sp-3 { grid-column: 3; }
.sp-4 { grid-column: 4; }
.sp-5 { grid-column: 5; }
.sp-6 { grid-column: 6; }
.sp-7 { grid-column: 7; }
.sp-8 { grid-column: 8; }

/* Zeilenpositionen und Hoehen im Halbstundenraster */
.ze-1 { grid-row-start: 1; }
.ze-2 { grid-row-start: 2; }
.ze-3 { grid-row-start: 3; }
.ze-4 { grid-row-start: 4; }
.ze-5 { grid-row-start: 5; }
.ze-6 { grid-row-start: 6; }
.ze-7 { grid-row-start: 7; }
.ze-8 { grid-row-start: 8; }
.ze-9 { grid-row-start: 9; }
.ze-10 { grid-row-start: 10; }
.ze-11 { grid-row-start: 11; }
.ze-12 { grid-row-start: 12; }
.ze-13 { grid-row-start: 13; }
.ze-14 { grid-row-start: 14; }
.ze-15 { grid-row-start: 15; }
.ze-16 { grid-row-start: 16; }
.ze-17 { grid-row-start: 17; }
.ze-18 { grid-row-start: 18; }
.ze-19 { grid-row-start: 19; }
.ze-20 { grid-row-start: 20; }
.ze-21 { grid-row-start: 21; }
.ze-22 { grid-row-start: 22; }
.ze-23 { grid-row-start: 23; }
.ze-24 { grid-row-start: 24; }
.ze-25 { grid-row-start: 25; }
.ze-26 { grid-row-start: 26; }
.ze-27 { grid-row-start: 27; }
.ze-28 { grid-row-start: 28; }
.ze-29 { grid-row-start: 29; }
.ze-30 { grid-row-start: 30; }
.ze-31 { grid-row-start: 31; }
.ze-32 { grid-row-start: 32; }
.ze-33 { grid-row-start: 33; }
.ze-34 { grid-row-start: 34; }
.ze-35 { grid-row-start: 35; }
.ze-36 { grid-row-start: 36; }
.ze-37 { grid-row-start: 37; }
.ze-38 { grid-row-start: 38; }
.ze-39 { grid-row-start: 39; }
.ze-40 { grid-row-start: 40; }
.ze-41 { grid-row-start: 41; }
.ze-42 { grid-row-start: 42; }
.ze-43 { grid-row-start: 43; }
.ze-44 { grid-row-start: 44; }
.ze-45 { grid-row-start: 45; }
.ze-46 { grid-row-start: 46; }
.ze-47 { grid-row-start: 47; }
.ze-48 { grid-row-start: 48; }
.hh-1 { grid-row-end: span 1; }
.hh-2 { grid-row-end: span 2; }
.hh-3 { grid-row-end: span 3; }
.hh-4 { grid-row-end: span 4; }
.hh-5 { grid-row-end: span 5; }
.hh-6 { grid-row-end: span 6; }
.hh-7 { grid-row-end: span 7; }
.hh-8 { grid-row-end: span 8; }
.hh-9 { grid-row-end: span 9; }
.hh-10 { grid-row-end: span 10; }
.hh-11 { grid-row-end: span 11; }
.hh-12 { grid-row-end: span 12; }

/* ==========================================================================
   Bewegung
   Grundsatz: nur transform und opacity, damit der Browser nichts neu
   berechnen muss. Alles steckt in prefers-reduced-motion: no-preference,
   und ohne JavaScript ist alles sofort sichtbar (siehe keine-animation.css).
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

  /* --- Abschnitte beim Hereinscrollen ----------------------------------- */

  .js .enthuellen {
    opacity: 0;
    transform: translateY(1.35rem);
    transition: opacity .62s cubic-bezier(.22, .75, .3, 1),
                transform .62s cubic-bezier(.22, .75, .3, 1);
    will-change: opacity, transform;
  }
  .js .enthuellen.ist-da {
    opacity: 1;
    transform: none;
    will-change: auto;
  }

  /* Kinder eines Rasters laufen versetzt ein. Die Verzoegerung steckt in
     nth-child, nicht in einem style-Attribut - sonst blockt die CSP. */
  .js .staffel > *:nth-child(1) { transition-delay: 0s; }
  .js .staffel > *:nth-child(2) { transition-delay: .07s; }
  .js .staffel > *:nth-child(3) { transition-delay: .14s; }
  .js .staffel > *:nth-child(4) { transition-delay: .21s; }
  .js .staffel > *:nth-child(5) { transition-delay: .28s; }
  .js .staffel > *:nth-child(6) { transition-delay: .35s; }
  .js .staffel > *:nth-child(7) { transition-delay: .42s; }
  .js .staffel > *:nth-child(8) { transition-delay: .49s; }

  .js .staffel > * {
    opacity: 0;
    transform: translateY(1.1rem);
    transition: opacity .55s cubic-bezier(.22, .75, .3, 1),
                transform .55s cubic-bezier(.22, .75, .3, 1);
  }
  .js .staffel.ist-da > * {
    opacity: 1;
    transform: none;
  }

  /* --- Hero: Claim, Text und Knoepfe folgen der Wortmarke --------------- */

  .hero__grund {
    animation: grundblende 1.1s ease .05s both;
  }

  .hero__licht {
    animation:
      lichtblende 1.6s ease .5s both,
      lichtwandern 26s ease-in-out 2.1s infinite alternate;
  }
  @keyframes lichtblende {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  @keyframes lichtwandern {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(58vw, 6%, 0) scale(1.18); }
  }

  /* Kurskacheln bekommen beim Zeigen einen Lilaschimmer an der Kante. */
  .kurs { transition: transform .16s ease, border-color .25s ease, box-shadow .25s ease; }
  .kurs:hover,
  .kurs:focus-visible {
    border-color: var(--lila);
    box-shadow: 0 0 0 1px var(--lila), 0 10px 34px rgba(var(--lila-rgb), .28);
  }

  /* Kurse im Wochenplan heben sich mit einem Lilaschein an. */
  .plan__kurs:hover,
  .plan__kurs:focus-visible {
    box-shadow: 0 6px 0 rgba(0, 0, 0, .35), 0 0 22px rgba(var(--lila-rgb), .45);
  }
  @keyframes grundblende {
    from { opacity: 0; transform: scale(1.03); }
    to   { opacity: 1; transform: none; }
  }

  .hero__claim { animation: aufsteigen .75s cubic-bezier(.22,.75,.3,1) .34s both; }
  .hero__text  { animation: aufsteigen .75s cubic-bezier(.22,.75,.3,1) .44s both; }
  .hero .btn-reihe { animation: aufsteigen .75s cubic-bezier(.22,.75,.3,1) .54s both; }

  @keyframes aufsteigen {
    from { opacity: 0; transform: translateY(1.2rem); }
    to   { opacity: 1; transform: none; }
  }

  /* --- Kurskacheln: Bild zieht beim Zeigen leicht an -------------------- */

  .kurs__bild {
    transition: transform .5s cubic-bezier(.22, .75, .3, 1);
  }
  .kurs:hover .kurs__bild,
  .kurs:focus-visible .kurs__bild { transform: scale(1.045); }

  .kurs__mehr::after { transition: transform .22s cubic-bezier(.22,.75,.3,1); }
  .kurs:hover .kurs__mehr::after,
  .kurs:focus-visible .kurs__mehr::after { transform: translateX(.35rem); }

  /* --- Kursplan: Kurse setzen sich nacheinander ------------------------- */

  .js .plan .plan__kurs,
  .js .plan-liste .plan__kurs {
    opacity: 0;
    transform: scale(.965);
    transition: opacity .45s ease, transform .45s cubic-bezier(.22,.75,.3,1);
  }
  .js .plan.ist-da .plan__kurs,
  .js .plan-liste.ist-da .plan__kurs { opacity: 1; transform: none; }

  .js .plan.ist-da .plan__kurs:nth-of-type(1),
  .js .plan-liste.ist-da .plan__kurs:nth-of-type(1) { transition-delay: .05s; }
  .js .plan.ist-da .plan__kurs:nth-of-type(2),
  .js .plan-liste.ist-da .plan__kurs:nth-of-type(2) { transition-delay: .12s; }
  .js .plan.ist-da .plan__kurs:nth-of-type(3),
  .js .plan-liste.ist-da .plan__kurs:nth-of-type(3) { transition-delay: .19s; }
  .js .plan.ist-da .plan__kurs:nth-of-type(4),
  .js .plan-liste.ist-da .plan__kurs:nth-of-type(4) { transition-delay: .26s; }
  .js .plan.ist-da .plan__kurs:nth-of-type(5),
  .js .plan-liste.ist-da .plan__kurs:nth-of-type(5) { transition-delay: .33s; }
  .js .plan.ist-da .plan__kurs:nth-of-type(6),
  .js .plan-liste.ist-da .plan__kurs:nth-of-type(6) { transition-delay: .40s; }

  .plan__kurs { transition: transform .16s ease, box-shadow .16s ease; }
  .plan__kurs:hover,
  .plan__kurs:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 6px 0 rgba(20, 32, 31, .22);
  }

  /* --- Navigation: Unterstrich laeuft ein ------------------------------- */

  .nav > a,
  .nav__toggle {
    position: relative;
  }
  .nav > a::after,
  .nav__toggle::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -.25rem;
    height: 2px;
    background: var(--sun);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .26s cubic-bezier(.22,.75,.3,1);
  }
  .nav > a:hover::after,
  .nav > a:focus-visible::after,
  .nav__toggle:hover::after,
  .nav__toggle:focus-visible::after { transform: scaleX(1); }
  .nav > a[aria-current]::after { transform: scaleX(1); }

  /* --- Mobiles Menue gleitet auf ---------------------------------------- */

  @media (max-width: 60rem) {
    .kopf .nav {
      transition: opacity .28s ease, transform .28s cubic-bezier(.22,.75,.3,1);
    }
    .kopf[data-menue="zu"] .nav {
      opacity: 0;
      transform: translateY(-.6rem);
    }
    .kopf[data-menue="offen"] .nav {
      opacity: 1;
      transform: none;
    }
    .kopf[data-menue="offen"] .nav > *:nth-child(1) { animation: aufsteigen .4s ease .04s both; }
    .kopf[data-menue="offen"] .nav > *:nth-child(2) { animation: aufsteigen .4s ease .08s both; }
    .kopf[data-menue="offen"] .nav > *:nth-child(3) { animation: aufsteigen .4s ease .12s both; }
    .kopf[data-menue="offen"] .nav > *:nth-child(4) { animation: aufsteigen .4s ease .16s both; }
    .kopf[data-menue="offen"] .nav > *:nth-child(5) { animation: aufsteigen .4s ease .20s both; }
    .kopf[data-menue="offen"] .nav > *:nth-child(6) { animation: aufsteigen .4s ease .24s both; }
  }

  /* --- Aktionsband: Preisstufen setzen sich nacheinander ---------------- */

  .js .aktion__stufen.ist-da .aktion__stufe:nth-child(1) { animation: stufe .5s cubic-bezier(.34,1.3,.64,1) .05s both; }
  .js .aktion__stufen.ist-da .aktion__stufe:nth-child(2) { animation: stufe .5s cubic-bezier(.34,1.3,.64,1) .15s both; }
  .js .aktion__stufen.ist-da .aktion__stufe:nth-child(3) { animation: stufe .5s cubic-bezier(.34,1.3,.64,1) .25s both; }
  .js .aktion__stufen .aktion__stufe { opacity: 0; }
  .js .aktion__stufen.ist-da .aktion__stufe { opacity: 1; }

  @keyframes stufe {
    from { opacity: 0; transform: translateY(1rem) scale(.94); }
    to   { opacity: 1; transform: none; }
  }

  /* --- Knoepfe: Fuellung laeuft durch ----------------------------------- */

  /* Nur die flaechigen Knoepfe bekommen den Durchlauf. Der Umrissknopf
     kehrt sich schon ueber currentColor um und wirkt je nach Band anders -
     da wuerde ein zweiter Effekt dazwischenfunken. */
  .btn--ink,
  .btn--sun {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }
  .btn--ink::before,
  .btn--sun::before {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-101%);
    transition: transform .34s cubic-bezier(.22,.75,.3,1);
    z-index: -1;
  }
  .btn--ink::before { background: var(--sun); }
  .btn--sun::before { background: var(--ink); }

  .btn--ink:hover::before,
  .btn--ink:focus-visible::before,
  .btn--sun:hover::before,
  .btn--sun:focus-visible::before { transform: none; }

  .btn--ink:hover, .btn--ink:focus-visible { color: var(--ink); }
  .btn--sun:hover, .btn--sun:focus-visible { color: var(--chalk); }

  .mehr { transition: border-bottom-color .2s ease; }

  /* --- Kurswahl: Haken setzt sich ---------------------------------------- */

  .kurswahl__feld {
    transition: transform .14s ease, background-color .2s ease,
                border-left-width .2s ease;
  }
  .kurswahl__feld:has(input:checked) { border-left-width: 14px; }

  /* --- Quittung: Eingangsbestaetigung setzt sich einmal auf ------------- */

  .quittung { animation: quittung .55s cubic-bezier(.22,.75,.3,1) both; }
  @keyframes quittung {
    from { opacity: 0; transform: translateY(1rem) rotate(-.4deg); }
    to   { opacity: 1; transform: none; }
  }

  /* --- Fehlerbox meldet sich ------------------------------------------- */

  .fehlerbox { animation: melden .4s ease both; }
  @keyframes melden {
    0%   { opacity: 0; transform: translateY(-.5rem); }
    100% { opacity: 1; transform: none; }
  }
}

/* Im Druck bleibt alles ruhig und sichtbar. */
@media (prefers-reduced-motion: reduce) {
  /* Das Licht bleibt, es wandert nur nicht. */
  .hero__licht { opacity: 1; }
}

@media print {
  .hero__grund,
  .hero__schleier,
  .hero__licht { display: none !important; }

  .enthuellen,
  .staffel > *,
  .plan__kurs,
  .aktion__stufe {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* ==========================================================================
   Portfolio
   ========================================================================== */

.galerien {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  margin-top: clamp(2rem, 5vw, 3rem);
}

.galerie-kachel {
  display: flex;
  flex-direction: column;
  background: var(--kohle);
  color: var(--ink);
  text-decoration: none;
  border: 2px solid var(--ink);
  overflow: hidden;
}

.galerie-kachel__bild {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  border-bottom: 2px solid var(--ink);
}

.galerie-kachel__body {
  padding: clamp(1rem, 2.5vw, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: .4rem;
  flex: 1;
}

.galerie-kachel__titel {
  font-family: var(--f-display);
  font-size: var(--t-lg);
  font-weight: 800;
  font-variation-settings: "wdth" 108;
  margin: 0;
}

.galerie-kachel__claim {
  font-size: var(--t-sm);
  margin: 0;
  color: var(--grau);
}

.galerie-kachel__zahl {
  margin-top: auto;
  padding-top: .6rem;
  font-family: var(--f-display);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sun-schrift);
}

/* --- Bildraster ---------------------------------------------------------- */

.bildraster {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}

.bildraster__feld { margin: 0; }

.bildraster__link {
  display: block;
  position: relative;
  border: 2px solid transparent;
  background: var(--kohle-2);
  line-height: 0;
}

.bildraster__link img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}

.bildraster__lupe {
  position: absolute;
  inset: 0;
  background: rgba(var(--lila-rgb), 0);
}

.bildraster__link:focus-visible {
  outline: 3px solid var(--sun);
  outline-offset: 2px;
}

/* --- Vollansicht --------------------------------------------------------- */

.leuchtkasten {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, .96);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
}

.leuchtkasten[hidden] { display: none; }

.leuchtkasten__bild {
  max-width: 100%;
  max-height: calc(100vh - 9rem);
  object-fit: contain;
  display: block;
  border: 2px solid var(--ink);
}

.leuchtkasten__knopf {
  position: absolute;
  background: var(--kohle-2);
  color: var(--weiss);
  border: 2px solid var(--ink);
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.4rem;
  line-height: 1;
  width: 3rem;
  height: 3rem;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.leuchtkasten__knopf:hover { background: var(--lila); border-color: var(--lila); }
.leuchtkasten__knopf:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }

.leuchtkasten__zu   { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.leuchtkasten__vor  { right: clamp(1rem, 3vw, 2rem); top: 50%; transform: translateY(-50%); }
.leuchtkasten__zur  { left: clamp(1rem, 3vw, 2rem);  top: 50%; transform: translateY(-50%); }

.leuchtkasten__zaehler {
  position: absolute;
  bottom: clamp(1rem, 3vw, 2rem);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--f-display);
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--weiss-leise);
  background: var(--kohle-2);
  border: 2px solid var(--ink);
  padding: .35rem .9rem;
}

@media (max-width: 40rem) {
  .leuchtkasten__vor { right: clamp(1rem, 3vw, 2rem); top: auto; bottom: clamp(1rem, 3vw, 2rem); transform: none; }
  .leuchtkasten__zur { left: clamp(1rem, 3vw, 2rem);  top: auto; bottom: clamp(1rem, 3vw, 2rem); transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .galerie-kachel { transition: transform .16s ease, border-color .25s ease, box-shadow .25s ease; }
  .galerie-kachel:hover,
  .galerie-kachel:focus-visible {
    transform: translateY(-3px);
    border-color: var(--lila);
    box-shadow: 0 0 0 1px var(--lila), 0 12px 36px rgba(var(--lila-rgb), .3);
  }

  .bildraster__link { transition: border-color .2s ease, transform .2s ease; }
  .bildraster__link img { transition: transform .5s cubic-bezier(.22, .75, .3, 1); }
  .bildraster__link:hover { border-color: var(--lila); }
  .bildraster__link:hover img { transform: scale(1.06); }
  .bildraster__feld { overflow: hidden; }

  .bildraster__lupe { transition: background-color .25s ease; }
  .bildraster__link:hover .bildraster__lupe { background: rgba(var(--lila-rgb), .22); }

  .leuchtkasten { animation: kastenauf .22s ease both; }
  .leuchtkasten__bild { animation: bildauf .3s cubic-bezier(.22, .75, .3, 1) both; }
  @keyframes kastenauf { from { opacity: 0; } to { opacity: 1; } }
  @keyframes bildauf {
    from { opacity: 0; transform: scale(.97); }
    to   { opacity: 1; transform: none; }
  }
}

@media print {
  .leuchtkasten { display: none !important; }
}

/* ==========================================================================
   Bildmarke
   ========================================================================== */

.marke {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}

.marke__zeichen {
  position: relative;
  display: block;
  width: 2.1rem;
  height: 2.17rem;
  flex: none;
}

.marke__zeichen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.marke__wort { display: inline-block; }

.fuss__zeichen {
  width: 3.4rem;
  height: auto;
  display: block;
  margin-bottom: .8rem;
}

/* Briefkopf auf der Quittung: am Bildschirm dezent, im Ausdruck der
   Absender oben auf dem Blatt. */
.briefkopf {
  width: 3.2rem;
  height: auto;
  display: block;
  margin-bottom: 1.25rem;
  filter: invert(1);
}

@media print {
  .briefkopf { filter: none; width: 2.4cm; margin-bottom: .6cm; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Der violette Schwung zeichnet sich beim Laden nach - von unten links
     nach oben rechts, in Richtung der Pfeilspitze im Logo. Maskiert wird
     mit einem Verlauf, nicht mit einer Grafik: So bleibt es eine reine
     Kompositionsarbeit der Grafikkarte. */
  .marke__schwung {
    -webkit-mask-image: linear-gradient(48deg,
      #000 0 35%, rgba(0, 0, 0, .35) 48%, transparent 58%);
    mask-image: linear-gradient(48deg,
      #000 0 35%, rgba(0, 0, 0, .35) 48%, transparent 58%);
    -webkit-mask-size: 260% 260%;
    mask-size: 260% 260%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    animation: schwung-zeichnen 1.15s cubic-bezier(.3, .7, .3, 1) .35s both;
  }

  /* Die Endwerte sind gemessen, nicht geschaetzt: Bei einer Maske, die
     groesser als das Element ist, laufen Prozentwerte gegenintuitiv.
     100%/0% verbirgt den Schwung vollstaendig, 0%/100% deckt ihn zu
     100 Prozent auf - nachgeprueft an der Zahl violetter Bildpunkte. */
  @keyframes schwung-zeichnen {
    from { -webkit-mask-position: 100% 0%; mask-position: 100% 0%; }
    to   { -webkit-mask-position: 0% 100%; mask-position: 0% 100%; }
  }

  .marke__strich { animation: marke-auf .6s ease .1s both; }
  @keyframes marke-auf {
    from { opacity: 0; transform: scale(.9); }
    to   { opacity: 1; transform: none; }
  }

  .marke:hover .marke__schwung,
  .marke:focus-visible .marke__schwung {
    animation: schwung-zeichnen .9s cubic-bezier(.3, .7, .3, 1) both;
  }
}

/* --- Urheberzeile im Seitenfuß ------------------------------------------- */

.urheber {
  margin-top: 1.6rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(233, 231, 239, .14);
  text-align: center;
}

.urheber__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .55rem;
  text-decoration: none;
  color: var(--grau);
}

.urheber__text {
  font-family: var(--f-display);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .02em;
}

.urheber__herz {
  color: var(--lila-hell);
  font-size: 1.1em;
  line-height: 1;
  vertical-align: -.06em;
  margin: 0 .1em;
}

.urheber__logo {
  /* Nur die Wortmarke, ohne die Leistungszeile: Die waere bei dieser
     Groesse rund fuenf Pixel hoch und damit unlesbar. */
  height: 1rem;
  width: auto;
  display: block;
  opacity: .78;
}

/* Auf schmalen Schirmen fuellte das Logo sonst fast die ganze Breite und
   wirkte lauter als die Zeile davor. */
@media (max-width: 30rem) {
  .urheber__logo { height: .8rem; }
  .urheber__text { font-size: .72rem; }
}

.urheber__link:hover,
.urheber__link:focus-visible { color: var(--weiss-leise); }
.urheber__link:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }

@media (prefers-reduced-motion: no-preference) {
  .urheber__logo { transition: opacity .22s ease; }
  .urheber__herz { transition: transform .22s ease; display: inline-block; }
  .urheber__link:hover .urheber__logo,
  .urheber__link:focus-visible .urheber__logo { opacity: 1; }
  .urheber__link:hover .urheber__herz,
  .urheber__link:focus-visible .urheber__herz { transform: scale(1.18); }
}

@media print {
  .urheber { display: none; }
}

/* ==========================================================================
   Verbindliche Buchung
   ========================================================================== */

.block--geschuetzt { border-color: var(--lila); }

.schutzhinweis {
  border-left: 4px solid var(--lila);
  background: rgba(var(--lila-rgb), .12);
  padding: 1rem 1.1rem;
  margin-bottom: 1.5rem;
  font-size: var(--t-sm);
}
.schutzhinweis p { margin: 0; }

.preiszeile {
  margin-top: 1.5rem;
  border: 2px solid var(--ink);
  background: var(--kohle-2);
  padding: .9rem 1.1rem;
  font-family: var(--f-display);
  font-size: var(--t-md);
  font-weight: 700;
}
.preiszeile--aktiv { background: var(--lila); color: var(--weiss); border-color: var(--lila); }
.preiszeile__betrag { font-size: var(--t-lg); font-weight: 900; }
.preiszeile__statt { font-size: var(--t-sm); font-weight: 600; opacity: .85; }

.mandat {
  border: 2px solid var(--ink);
  padding: clamp(1rem, 2.5vw, 1.5rem);
  margin: 1.5rem 0;
  background: var(--kohle-2);
}
.mandat__titel {
  font-family: var(--f-display);
  font-size: var(--t-md);
  font-weight: 800;
  margin: 0 0 .9rem;
}
.mandat__daten { margin: 0 0 1rem; }
.mandat__daten > div {
  display: grid;
  grid-template-columns: 14rem 1fr;
  gap: .8rem;
  padding: .35rem 0;
  border-top: 1px solid rgba(233, 231, 239, .12);
  font-size: var(--t-sm);
}
.mandat__daten dt { font-weight: 700; }
.mandat__daten dd { margin: 0; }
.mandat__text { font-size: var(--t-sm); margin-top: .7rem; }

.pruef__abschnitt {
  font-family: var(--f-display);
  font-size: var(--t-md);
  font-weight: 800;
  margin: 1.75rem 0 .6rem;
  padding-top: 1rem;
  border-top: 2px solid var(--ink);
}
.pruef__kurse { list-style: none; margin: 0; padding: 0; }
.pruef__kurse li {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: .6rem 0;
  border-bottom: 1px solid rgba(233, 231, 239, .12);
}
.pruef__kurse strong { font-family: var(--f-display); font-size: var(--t-md); }
.pruef__kurse span { font-size: var(--t-sm); }

.pruef__preis {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem 1rem;
  margin-top: 1.1rem;
  padding: 1rem 1.1rem;
  background: var(--lila);
  color: var(--weiss);
  border: 2px solid var(--lila);
}
.pruef__preis-menge { font-family: var(--f-display); font-weight: 700; }
.pruef__preis-betrag {
  font-family: var(--f-display);
  font-size: var(--t-xl);
  font-weight: 900;
  margin-left: auto;
}
.pruef__preis-takt { font-size: var(--t-sm); font-weight: 600; }
.pruef__preis-statt { flex-basis: 100%; font-size: var(--t-sm); }
.pruef__hinweis { font-size: var(--t-sm); margin-top: .8rem; }

.kasten-widerruf {
  border: 2px solid var(--ink);
  padding: clamp(1rem, 2.5vw, 1.5rem);
  margin-top: 1.75rem;
}
.kasten-widerruf h3 {
  font-family: var(--f-display);
  font-size: var(--t-md);
  font-weight: 800;
  margin: 0 0 .5rem;
}
.kasten-widerruf p { font-size: var(--t-sm); margin: 0; }

.btn--gross { font-size: var(--t-md); padding: .95rem 1.9rem; }

.feld--fehler input { border-color: #E27A94; }
.feld__hilfe--gut { color: #7ED9A6; }
.feld__hilfe--schlecht { color: #E27A94; }

.btn[aria-busy="true"] { opacity: .75; cursor: progress; }

@media (max-width: 40rem) {
  .mandat__daten > div { grid-template-columns: 1fr; gap: .1rem; }
  .pruef__preis-betrag { margin-left: 0; }
}

/* --- Bildmarke im Kopfbereich der Startseite ----------------------------- */

.hero__marke {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1rem, 2.5vw, 1.8rem);
  margin: 0;
}

.hero__zeichen {
  position: relative;
  display: block;
  width: clamp(8rem, 21vw, 15rem);
  aspect-ratio: 900 / 929;
}

.hero__zeichen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Die Wortmarke tritt zurueck, das Zeichen traegt jetzt den Auftritt. */
.hero__marke .hero__wort {
  display: block;
  font-family: var(--f-display);
  font-weight: 900;
  font-variation-settings: "wdth" 118;
  font-size: clamp(2.4rem, 11vw, 9rem);
  line-height: .84;
  letter-spacing: -.045em;
}

@media (prefers-reduced-motion: no-preference) {
  /* Erst zeichnet sich der helle Bogen, dann faehrt der violette Schwung
     nach - von unten links nach oben rechts, in Richtung der Pfeilspitze.
     Danach erst laeuft die Wortmarke auf. */
  .hero__strich {
    -webkit-mask-image: linear-gradient(38deg,
      #000 0 32%, rgba(0, 0, 0, .3) 46%, transparent 58%);
    mask-image: linear-gradient(38deg,
      #000 0 32%, rgba(0, 0, 0, .3) 46%, transparent 58%);
    -webkit-mask-size: 260% 260%;
    mask-size: 260% 260%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    animation: zeichen-malen 1.05s cubic-bezier(.35, .1, .45, 1) .2s both;
  }

  .hero__schwung {
    -webkit-mask-image: linear-gradient(48deg,
      #000 0 32%, rgba(0, 0, 0, .3) 46%, transparent 58%);
    mask-image: linear-gradient(48deg,
      #000 0 32%, rgba(0, 0, 0, .3) 46%, transparent 58%);
    -webkit-mask-size: 260% 260%;
    mask-size: 260% 260%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    animation: zeichen-malen 1.15s cubic-bezier(.35, .1, .45, 1) .95s both;
  }

  /* Der Wegbereich ist ausgemessen, nicht geraten.
     Von 100%/0% bis 50%/50% passiert nichts, ab 15%/85% ist alles
     aufgedeckt - der Ablauf haette also zwei Drittel der Zeit still
     gestanden und dann aufgeblitzt. Bewegt wird deshalb nur der Bereich
     dazwischen, in dem sich tatsaechlich etwas tut. */
  @keyframes zeichen-malen {
    from { -webkit-mask-position: 50% 50%; mask-position: 50% 50%; }
    to   { -webkit-mask-position: 15% 85%; mask-position: 15% 85%; }
  }

  .hero__marke .hero__wort span:nth-child(1) { animation: aufsteigen .7s cubic-bezier(.22,.75,.3,1) 1.55s both; }
  .hero__marke .hero__wort span:nth-child(2) { animation: aufsteigen .7s cubic-bezier(.22,.75,.3,1) 1.68s both; }
  .hero__marke .hero__wort span:nth-child(3) { animation: aufsteigen .7s cubic-bezier(.22,.75,.3,1) 1.81s both; }

  .hero__claim { animation-delay: 2.0s; }
  .hero__text  { animation-delay: 2.12s; }
  .hero .btn-reihe { animation-delay: 2.24s; }
}

/* --- Schriftzug im Kopfbereich ------------------------------------------- */

.hero__schriftzug {
  position: relative;
  display: block;
  width: min(92%, 44rem);
  aspect-ratio: 1400 / 290;
}

.hero__schriftzug img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
  display: block;
}

@media (max-width: 40rem) {
  .hero__schriftzug { width: 100%; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Der Schriftzug schreibt sich von links nach rechts. Der Verlauf steht
     leicht schräg, weil die Schreibschrift schräg steht - senkrecht
     abgewischt sähe es nach Vorhang aus, nicht nach Handschrift.

     Der Wegbereich ist ausgemessen: Von 100 % bis 70 % passiert nichts,
     ab 15 % ist alles geschrieben. Bewegt wird nur dazwischen. */
  .hero__schrift {
    -webkit-mask-image: linear-gradient(100deg,
      #000 0 40%, rgba(0, 0, 0, .35) 50%, transparent 62%);
    mask-image: linear-gradient(100deg,
      #000 0 40%, rgba(0, 0, 0, .35) 50%, transparent 62%);
    -webkit-mask-size: 300% 100%;
    mask-size: 300% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    animation: schreiben 1.5s cubic-bezier(.25, .55, .45, .95) 1.3s both;
  }

  /* Ausgemessen mit einem Differenzverfahren gegen den Hintergrund, nicht
     über eine Helligkeitsschwelle: Die hätte den blass durchscheinenden
     Anfang nicht erfasst und 70 % faelschlich als unsichtbar gemeldet -
     tatsaechlich stand dort schon ein Fuenftel des Schriftzugs.
     Wirklich unsichtbar ist es ab 92 %, fertig geschrieben bei 10 %. */
  @keyframes schreiben {
    from { -webkit-mask-position: 92% 0%; mask-position: 92% 0%; }
    to   { -webkit-mask-position: 10% 0%; mask-position: 10% 0%; }
  }

  /* Der Ablauf rückt zusammen, sonst wartet man zu lange auf den Text. */
  .hero__strich  { animation-duration: .85s; animation-delay: .15s; }
  .hero__schwung { animation-duration: .9s;  animation-delay: .65s; }

  .hero__claim { animation-delay: 2.75s; }
  .hero__text  { animation-delay: 2.87s; }
  .hero .btn-reihe { animation-delay: 2.99s; }
}

/* --- Tarifwahl ----------------------------------------------------------- */

.tarifwahl {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.tarif {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  border: 2px solid var(--ink);
  background: var(--kohle-2);
  padding: 1rem 1.1rem;
  cursor: pointer;
}
.tarif:has(input:checked) { background: var(--lila); color: var(--weiss); border-color: var(--lila); }
.tarif:has(input:focus-visible) { outline: 3px solid var(--sun); outline-offset: 2px; }
.tarif__text { display: flex; flex-direction: column; gap: .2rem; }
.tarif__name { font-family: var(--f-display); font-weight: 800; font-size: var(--t-md); }
.tarif__preis { font-family: var(--f-display); font-weight: 700; }
.tarif__hilfe { font-size: var(--t-sm); opacity: .85; }

.einwilligung {
  border-left: 4px solid var(--lila);
  background: rgba(var(--lila-rgb), .1);
  padding: 1rem 1.1rem;
  margin: 1.25rem 0;
}
.einwilligung__titel {
  font-family: var(--f-display);
  font-weight: 800;
  margin: 0 0 .6rem;
}

/* --- Schriftzug statt gesetzter Wortmarke -------------------------------- */

.marke__schrift {
  /* Die Bildmarke ist das "MG", der Schriftzug das "Motion Arts".
     Zusammen ergeben sie die Wortmarke - deshalb steht der Name nur noch
     als unsichtbarer Text daneben, fuer Screenreader und Suche. */
  /* Die Schreibschrift hat viel Oberlaenge - die eigentlichen Buchstaben
     sind nur rund ein Drittel der Bildhoehe. Bei gleicher Hoehe wie eine
     gesetzte Schrift waere sie unleserlich. */
  height: 1.75rem;
  width: auto;
  display: block;
}

.fuss__marke {
  margin: 0 0 .35rem;
  line-height: 0;
}
.fuss__schrift {
  height: 2.2rem;
  width: auto;
  display: block;
}

@media (max-width: 40rem) {
  .marke__schrift { height: 1.5rem; }
}

/* ==========================================================================
   Sw!tchLan3z
   --------------------------------------------------------------------------
   Die Gruppe hat ein eigenes Erscheinungsbild: Orange auf Schwarz, so wie
   das Logo und die Herzen im Text. Das Orange gilt nur auf dieser Seite -
   der Rest der Website bleibt beim Markenlila. Ein Unterauftritt darf
   erkennbar sein, ohne die Marke darueber zu verdraengen.
   ========================================================================== */

.sl-hero { --sl-orange: #F08500; --sl-orange-hell: #FFA633; }
.sl-hero__schleier {
  background:
    linear-gradient(180deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.74) 45%, rgba(0,0,0,.94) 100%),
    linear-gradient(100deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 60%, rgba(0,0,0,.55) 100%);
}

.sl-titel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(.8rem, 2vw, 1.4rem);
  margin: 0;
}
.sl-titel__logo {
  width: clamp(6rem, 14vw, 10rem);
  height: auto;
  display: block;
  border: 2px solid #F08500;
}
.sl-titel__wort {
  font-family: var(--f-display);
  font-weight: 900;
  font-variation-settings: "wdth" 112;
  font-size: clamp(2.6rem, 11vw, 8rem);
  line-height: .88;
  letter-spacing: -.035em;
  color: #F08500;
}
.sl-titel__unter {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.1rem, 3.4vw, 2.1rem);
  color: var(--weiss);
}
.sl-hero__text { max-width: 34rem; }

/* --- Aufzaehlungen mit Takt ---------------------------------------------- */

.sl-liste {
  list-style: none;
  margin: clamp(1.75rem, 4vw, 2.75rem) 0;
  padding: 0;
  border-left: 3px solid #F08500;
}
.sl-liste li {
  position: relative;
  padding: .55rem 0 .55rem clamp(1.1rem, 3vw, 1.8rem);
  font-family: var(--f-display);
  font-size: var(--t-md);
  font-weight: 600;
}
.sl-liste li strong { font-weight: 800; color: #FFA633; }
.sl-liste li em { font-style: normal; color: var(--grau); }
.sl-liste--eng li { font-size: var(--t-sm); padding-block: .38rem; }

.sl-betont {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--t-lg);
  line-height: 1.2;
}
.sl-betont--gross { font-size: var(--t-xl); color: #F08500; }

.sl-zitat {
  margin: clamp(1.5rem, 4vw, 2.25rem) 0;
  padding: clamp(1.1rem, 3vw, 1.75rem);
  border: 2px solid #F08500;
  font-family: var(--f-display);
  font-size: var(--t-lg);
  font-weight: 800;
  line-height: 1.25;
  color: #FFA633;
}
.sl-zitat::before { content: '\201E'; }
.sl-zitat::after  { content: '\201C'; }

/* --- Die drei Werte ------------------------------------------------------ */

.sl-werte {
  display: grid;
  gap: clamp(1.1rem, 2.5vw, 1.8rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  margin-top: clamp(2rem, 5vw, 3rem);
}
.sl-wert {
  border: 2px solid var(--ink);
  background: var(--kohle);
  padding: clamp(1.25rem, 3vw, 1.9rem);
  position: relative;
  overflow: hidden;
}
.sl-wert__zahl {
  position: absolute;
  top: -.35em;
  right: .1em;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 6rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px rgba(240, 133, 0, .35);
  pointer-events: none;
}
.sl-wert__titel {
  font-family: var(--f-display);
  font-size: var(--t-lg);
  font-weight: 800;
  margin: 0 0 .6rem;
  color: #F08500;
}
.sl-wert p { margin: 0; position: relative; }

/* --- Abschluss ----------------------------------------------------------- */

.band--sl-schluss {
  background: #F08500;
  color: #14100A;
  text-align: center;
}
.sl-schluss__marke {
  font-family: var(--f-display);
  font-weight: 900;
  font-variation-settings: "wdth" 112;
  font-size: clamp(2.2rem, 9vw, 6rem);
  line-height: .9;
  letter-spacing: -.035em;
  margin: 0;
}
.sl-schluss__claim {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-lg);
  margin: .6rem 0 0;
}
/* Auf dem orangen Band ist das Band selbst das Orange - zwei Herzen
   nebeneinander waeren dort beide schwarz und saehen nach Versehen aus. */
.sl-schluss__herzen { font-size: 1.6rem; margin: 1rem 0 0; color: #14100A; }

/* Die Knopfreihe ist ein Flexkasten und erbt die Mittelstellung des
   Bandes nicht. */
.band--sl-schluss .btn-reihe { justify-content: center; margin-top: 1.5rem; }

.band--sl-schluss .btn--ink {
  background: #14100A;
  color: #F08500;
  border-color: #14100A;
}
.band--sl-schluss .btn--linie {
  border-color: #14100A;
  color: #14100A;
}
.band--sl-schluss .btn--linie:hover { background: #14100A; color: #F08500; }

@media (prefers-reduced-motion: no-preference) {
  .sl-wert { transition: transform .16s ease, border-color .25s ease, box-shadow .25s ease; }
  .sl-wert:hover {
    transform: translateY(-3px);
    border-color: #F08500;
    box-shadow: 0 0 0 1px #F08500, 0 12px 34px rgba(240, 133, 0, .25);
  }
  .sl-hero .hero__licht { display: none; }
}

/* Auf schmalen Schirmen zwei Spalten statt einer: Bei 14 Aufnahmen je
   Galerie waere eine einzelne Spalte eine sehr lange Strecke. */
@media (max-width: 40rem) {
  .bildraster--sl { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
}

/* Sw!tchLan3z ist ein Wort. Browser behandeln das Ausrufezeichen als
   erlaubte Trennstelle und brechen sonst zu "Sw!" / "tchLan3z" um. */
.wortfest { white-space: nowrap; }

/* --- Kontaktformular ----------------------------------------------------- */

.kontakt {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  align-items: start;
}

.kontakt__seite {
  border: 2px solid var(--ink);
  background: var(--kohle-2);
  padding: clamp(1.1rem, 2.5vw, 1.6rem);
  position: sticky;
  top: 6rem;
}
.kontakt__titel {
  font-family: var(--f-display);
  font-size: var(--t-md);
  font-weight: 800;
  margin: 0 0 .9rem;
}
.kontakt__daten > div { padding: .45rem 0; border-top: 1px solid rgba(233,231,239,.12); }
.kontakt__daten dt { font-size: var(--t-xs); color: var(--grau); font-weight: 700; }
.kontakt__daten dd { margin: 0; }
.kontakt__hinweis { font-size: var(--t-sm); margin-top: 1.1rem; }

@media (max-width: 52rem) {
  .kontakt { grid-template-columns: 1fr; }
  .kontakt__seite { position: static; }
}

/* --- Kundenportal ------------------------------------------------------- */

.portal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: 1.75rem;
  font-family: var(--f-display);
  font-size: var(--t-sm);
}
.portal-nav a {
  color: var(--ink);
  text-decoration: none;
  padding: .45rem .85rem;
  border: 2px solid var(--ink);
}
.portal-nav a[aria-current] { background: var(--lila); border-color: var(--lila); color: var(--weiss); }
.portal-nav a:hover { border-color: var(--lila-hell); }
.portal-nav__ab { margin-left: auto; }
.portal-schmal { max-width: 34rem; }
.portal-kacheln {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  margin-bottom: 1.75rem;
}
.portal-kachel {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: 1.1rem 1.25rem;
  border: 2px solid var(--ink);
  color: var(--ink);
  text-decoration: none;
  background: var(--kohle-2);
  font-size: var(--t-sm);
}
.portal-kachel:hover { border-color: var(--lila-hell); }
.portal-kachel__zahl { font-family: var(--f-display); font-size: var(--t-lg); font-weight: 800; color: var(--lila-hell); }
.portal-liste { list-style: none; margin: 0; padding: 0; }
.portal-liste li { padding: .55rem 0; border-bottom: 1px solid var(--kohle-2); }
.portal-dl { margin: 0; }

/* Kurse dazubuchen und abbestellen (Portal) */
.kursliste {
  display: grid;
  gap: .25rem;
  border-left: 6px solid var(--sun);
  padding-left: 1rem;
}
.kursliste .wahl-check { margin-top: .5rem; }
/* Ausgebuchte Kurse bleiben sichtbar, aber erkennbar nicht waehlbar -
   sie einfach auszublenden liesse den Kunden raetseln, wo sein Kurs hin ist. */
.wahl-check--aus { opacity: .5; cursor: not-allowed; }

.preisstaffel { border-collapse: collapse; width: 100%; font-size: var(--t-sm); }
.preisstaffel caption { text-align: left; padding-bottom: .5rem; }
.preisstaffel th,
.preisstaffel td { border-bottom: 1px solid var(--ink); padding: .4rem .6rem; text-align: left; }
.preisstaffel th { font-weight: 700; white-space: nowrap; }
.preisstaffel .ist-aktuell { background: var(--sun); }
.preisstaffel .ist-aktuell td,
.preisstaffel .ist-aktuell th { font-weight: 800; }
.portal-dl > div { display: grid; grid-template-columns: 8rem 1fr; gap: .75rem; padding: .4rem 0; border-bottom: 1px solid var(--kohle-2); }
.portal-dl dt { font-family: var(--f-display); font-weight: 700; font-size: var(--t-sm); color: var(--grau); }
.portal-dl dd { margin: 0; }
.portal-saldo { font-size: var(--t-md); }
.portal-tabelle { overflow-x: auto; }
.portal-tabelle table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.portal-tabelle th, .portal-tabelle td { padding: .5rem .4rem; border-bottom: 1px solid var(--kohle-2); text-align: left; }
.portal-tabelle .zahl { text-align: right; white-space: nowrap; }
.band .block details summary { cursor: pointer; font-family: var(--f-display); }
.ampel { display: inline-block; width: .75rem; height: .75rem; border-radius: 50%; vertical-align: 0; margin-right: .2rem; }
.ampel--gruen, .ampel--offen { background: #2e9d5b; }
.ampel--gelb { background: #f2b705; }
.ampel--rot { background: #d2372b; }
@media (max-width: 40rem) {
  .portal-dl > div { grid-template-columns: 1fr; gap: .1rem; }
  .portal-nav__ab { margin-left: 0; }
}

/* Hinweis der Plattform (Server-Protokolle, Meldeweg nach Art. 16 DSA) – dezent, aber immer da */
.plattformhinweis { margin: 1rem 0 0; font-size: .78rem; opacity: .72; text-align: center; }
.plattformhinweis a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* --- Schmale Bildschirme und Touch (Prüfung 2026.11.2) -------------------- */
/* Fieldsets haben im Browser min-width: min-content – lange Auswahllisten
   würden die Seite auf 320 px seitlich verbreitern. */
fieldset { min-width: 0; }
@media (pointer: coarse) {
  .fuss__unten a, .fuss__vertrag a, .plattformhinweis a { display: inline-block; padding-block: .45rem; }
}
/* Lange Wörter (Streitbeilegungsverfahren …) dürfen schmale Bildschirme nicht sprengen */
h1, h2, h3, h4, dt, dd, th, td, label, legend { overflow-wrap: break-word; }
@media (max-width: 30rem) { h1, h2, h3, h4, legend { -webkit-hyphens: auto; hyphens: auto; } }
@media (pointer: coarse) { .urheber__link { padding-block: .5rem; } }
/* Handy im Querformat: Startbild so bemessen, dass Zeichen, Schriftzug und
   Knöpfe zusammen auf den kurzen Bildschirm passen. */
@media (orientation: landscape) and (max-height: 540px) {
  .hero { padding-block: 1.5rem 2rem; }
  .hero__zeichen { width: clamp(4.5rem, 24vh, 8.5rem); }
  .hero__schriftzug { width: min(92%, 24rem); }
  .hero__marke { gap: .8rem; }
}

/* ==========================================================================
   Auftritt ohne eigene Fotos und ohne eigenes Logo (Plattform-Studios, 2026.12.1)
   --------------------------------------------------------------------------
   Statt grauer Platzhalter: Monogramm und Name als Schrift, Flächen in der
   Studiofarbe mit den Bewegungslinien der Marke, echte Eckdaten und die
   nächsten Kurse. Sobald ein Studio eigene Bilder oder ein Logo hochlädt,
   greift wieder der bisherige Auftritt.
   ========================================================================== */

/* --- Monogramm (erzeugtes Logo) ------------------------------------------ */
.monogramm {
  display: inline-grid;
  place-items: center;
  flex: none;
  border-radius: 50%;
  color: #fff;
  font-family: var(--f-display);
  font-weight: 800;
  font-variation-settings: "wdth" 105;
  letter-spacing: -.02em;
  line-height: 1;
  background:
    radial-gradient(120% 120% at 20% 10%, rgba(255, 255, 255, .28), transparent 55%),
    linear-gradient(140deg, var(--lila) 10%, var(--lila-tief) 95%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 6px 18px -8px rgba(var(--lila-rgb), .8);
}
.marke__monogramm { width: 2.35rem; height: 2.35rem; font-size: .88rem; }
.fuss__monogramm { width: 3.2rem; height: 3.2rem; font-size: 1.1rem; margin-bottom: .9rem; }
.marke--monogramm { gap: .7rem; }
.marke__name {
  display: block;
  max-width: min(52vw, 22rem);
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 1.18rem;
  font-weight: 800;
  font-variation-settings: "wdth" 108;
  letter-spacing: -.015em;
}
.fuss__name {
  display: block;
  font-family: var(--f-display);
  font-size: var(--t-lg);
  font-weight: 800;
  font-variation-settings: "wdth" 110;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--weiss);
}
.fuss__marke--text { line-height: 1.1; }
@media (max-width: 40rem) {
  .marke__monogramm { width: 2.1rem; height: 2.1rem; font-size: .8rem; }
  .marke__name { font-size: 1.05rem; max-width: 46vw; }
}

/* --- Kopfbereich als gestaltete Fläche ------------------------------------ */
.hero--flaeche {
  background:
    radial-gradient(55% 70% at 12% 18%, rgba(var(--lila-rgb), .38), transparent 70%),
    radial-gradient(45% 55% at 92% 8%, rgba(var(--lila-rgb), .20), transparent 72%),
    radial-gradient(60% 60% at 75% 110%, rgba(var(--lila-rgb), .24), transparent 70%),
    linear-gradient(180deg, #0b0a10 0%, var(--schwarz) 100%);
}
.hero--flaeche .hero__schleier {
  background: linear-gradient(90deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .1) 55%, rgba(0, 0, 0, .35) 100%);
}
.hero__baender {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  opacity: .9;
}
.hero__baender stop:nth-child(1) { stop-color: var(--lila); stop-opacity: 0; }
.hero__baender stop:nth-child(2) { stop-color: var(--lila-hell); stop-opacity: .9; }
.hero__baender stop:nth-child(3) { stop-color: var(--lila); stop-opacity: 0; }
.hero__band { fill: none; stroke: url(#hero-band); stroke-width: 2.2; stroke-linecap: round; }
.hero__band--2 { stroke-width: 1.4; opacity: .6; }
.hero__band--3 { stroke-width: 1; opacity: .45; }

.hero--flaeche { padding-block: clamp(3.5rem, 10vw, 7.5rem) clamp(3.5rem, 9vw, 6.5rem); }
.hero__raster {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 960px) {
  .hero__raster { grid-template-columns: minmax(0, 1fr); }
}
.hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 1.4rem;
  padding: .42rem .9rem;
  font-family: var(--f-display);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--weiss-leise);
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}
.hero__kicker::before {
  content: "";
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: var(--lila-hell);
  box-shadow: 0 0 12px var(--lila-hell);
}
.hero__name {
  margin: 0;
  max-width: 13ch;
  font-family: var(--f-display);
  font-weight: 900;
  font-variation-settings: "wdth" 116;
  font-size: clamp(2.7rem, 1.2rem + 6.4vw, 6.4rem);
  line-height: .93;
  letter-spacing: -.04em;
  color: var(--weiss);
  text-wrap: balance;
}
.hero--schrift .hero__text { margin-top: clamp(1.2rem, 3vw, 1.8rem); font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); color: var(--weiss-leise); max-width: 32rem; }
.hero--schrift .btn-reihe { margin-top: clamp(1.6rem, 4vw, 2.4rem); }

/* Nächste Kurse als Karte neben dem Namen */
.hero__woche {
  position: relative;
  padding: clamp(1.2rem, 2.5vw, 1.6rem);
  background: rgba(14, 12, 19, .72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 30px 60px -30px rgba(0, 0, 0, .8);
}
.hero__woche::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--lila), var(--lila-hell));
}
.hero__woche-titel {
  margin: 0 0 .9rem;
  font-family: var(--f-display);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--grau);
}
.hero__woche ul { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .5rem; }
.hero__woche li a {
  display: grid;
  grid-template-columns: 3.9rem 3.3rem minmax(0, 1fr);
  align-items: baseline;
  gap: .4rem;
  padding: .75rem .8rem;
  color: var(--weiss-leise);
  text-decoration: none;
  background: rgba(255, 255, 255, .04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
  transition: background .2s ease, box-shadow .2s ease;
}
.hero__woche li a:hover,
.hero__woche li a:focus-visible { background: rgba(var(--lila-rgb), .18); box-shadow: inset 0 0 0 1px rgba(var(--lila-rgb), .6); }
.hero__woche-tag { font-family: var(--f-display); font-weight: 800; font-size: var(--t-sm); color: var(--lila-hell); }
.hero__woche-zeit { font-family: var(--f-display); font-weight: 700; font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.hero__woche-kurs { min-width: 0; }
.hero__woche-kurs b { display: block; font-family: var(--f-display); font-weight: 700; font-size: var(--t-sm); color: var(--weiss); overflow-wrap: anywhere; }
.hero__woche-kurs small { display: block; font-size: var(--t-xs); color: var(--grau); margin-top: .1rem; }
.hero__woche .mehr { font-size: var(--t-sm); }
@media (max-width: 30rem) {
  .hero__woche li a { grid-template-columns: 3.4rem minmax(0, 1fr); }
  .hero__woche-zeit { grid-column: 1; grid-row: 2; }
  .hero__woche-kurs { grid-column: 2; grid-row: 1 / span 2; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero__name { animation: aufsteigen .8s cubic-bezier(.22, .75, .3, 1) .1s both; }
  .hero__kicker { animation: aufsteigen .7s cubic-bezier(.22, .75, .3, 1) 0s both; }
  .hero--schrift .hero__text { animation-delay: .32s; }
  .hero--schrift .btn-reihe { animation-delay: .44s; }
  .hero__woche { animation: aufsteigen .8s cubic-bezier(.22, .75, .3, 1) .55s both; }
  .hero__band { stroke-dasharray: 1; stroke-dashoffset: 1; animation: band-zeichnen 2.4s cubic-bezier(.45, .1, .25, 1) .2s forwards; }
  .hero__band--2 { animation-delay: .45s; }
  .hero__band--3 { animation-delay: .7s; }
  @keyframes band-zeichnen { to { stroke-dashoffset: 0; } }
}

/* --- Flächen statt Platzhalterfotos --------------------------------------- */
.flaeche {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  background: linear-gradient(145deg, var(--lila) 0%, var(--lila-tief) 100%);
}
.flaeche--2 { background: radial-gradient(90% 90% at 85% 15%, var(--lila-hell) 0%, transparent 60%), linear-gradient(160deg, var(--lila-tief), #0e0c13 90%); }
.flaeche--3 { background: radial-gradient(80% 80% at 15% 85%, var(--lila) 0%, transparent 65%), linear-gradient(20deg, #0e0c13 10%, var(--lila-tief) 100%); }
.flaeche--4 { background: conic-gradient(from 210deg at 70% 30%, var(--lila-tief), var(--lila), var(--lila-hell), var(--lila-tief)); }
.flaeche::after {
  /* feines Korn gegen Streifen im Verlauf */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(120% 90% at 50% 120%, rgba(0, 0, 0, .45), transparent 60%);
}
.flaeche__linien {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.flaeche__linien path { fill: none; stroke: rgba(255, 255, 255, .34); stroke-width: 2; vector-effect: non-scaling-stroke; }
.flaeche__linien path + path { stroke: rgba(255, 255, 255, .18); }
.flaeche__text {
  position: absolute;
  left: 1.3rem;
  right: 1.3rem;
  bottom: 1.1rem;
  font-family: var(--f-display);
  font-weight: 900;
  font-variation-settings: "wdth" 112;
  font-size: clamp(1.5rem, 1rem + 1.6vw, 2.3rem);
  line-height: .98;
  letter-spacing: -.03em;
  text-wrap: balance;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
div.kurs__bild { aspect-ratio: 16 / 10; }
div.beitrag__bild { aspect-ratio: 16 / 10; }
.kurse--wenige { grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }

/* Eckdaten statt Foto neben dem Willkommenstext */
.eckdaten {
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: flex-end;
  padding: clamp(1.4rem, 3vw, 2.2rem);
}
.eckdaten dl { margin: 0; display: grid; gap: 1.1rem; width: 100%; }
.eckdaten dl > div { padding-top: .9rem; border-top: 1px solid rgba(255, 255, 255, .28); }
.eckdaten dt { font-family: var(--f-display); font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .82; }
.eckdaten dd {
  margin: .2rem 0 0;
  font-family: var(--f-display);
  font-weight: 900;
  font-variation-settings: "wdth" 115;
  font-size: clamp(2.4rem, 1.4rem + 3vw, 3.8rem);
  line-height: 1;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.eckdaten dd.eckdaten__wort { font-size: clamp(1.5rem, 1rem + 1.4vw, 2.1rem); letter-spacing: -.02em; }
.willkommen > .eckdaten { align-self: stretch; aspect-ratio: auto; min-height: 22rem; }
@media (max-width: 860px) {
  .willkommen > .eckdaten { order: 0; min-height: 0; padding-top: 3.5rem; }
  .eckdaten dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1rem; }
  .eckdaten dl > div:last-child { grid-column: 1 / -1; }
  .eckdaten dd { font-size: clamp(2rem, 9vw, 2.8rem); }
  .eckdaten dd.eckdaten__wort { font-size: clamp(1.3rem, 5.5vw, 1.7rem); }
}

/* Nur ein Kurs: breite Karte mit Fläche links statt einer schmalen Kachel */
@media (min-width: 761px) {
  .kurse--eins { grid-template-columns: minmax(0, 1fr); }
  .kurse--eins .kurs { flex-direction: row; }
  .kurse--eins .kurs__bild { width: 46%; flex: none; aspect-ratio: 16 / 10; border-bottom: 0; border-right: 2px solid var(--ink); }
  .kurse--eins .kurs__body { justify-content: center; padding: clamp(1.6rem, 3vw, 2.6rem); }
  .band--petrol .kurse--eins .kurs__bild, .band--tief .kurse--eins .kurs__bild { border-right-color: var(--chalk); }
}

/* Monogramm statt Porträtfoto */
.portrait-monogramm {
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
}
.portrait-monogramm span {
  font-family: var(--f-display);
  font-weight: 900;
  font-variation-settings: "wdth" 118;
  font-size: clamp(4rem, 2rem + 8vw, 8.5rem);
  letter-spacing: -.05em;
  line-height: 1;
  text-shadow: 0 10px 40px rgba(0, 0, 0, .35);
}
@media (max-width: 860px) {
  .portrait-monogramm { aspect-ratio: 16 / 9; max-width: 28rem; }
}

.kontaktwege { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; }

/* --- Dienst im Fuß: „Website & Buchung mit Motionarts Studio“ ------------- */
.dienst {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .8rem 1.5rem;
  margin-top: 1.4rem;
  padding-top: 1.3rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.dienst__marke {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .5rem .9rem .5rem .6rem;
  color: var(--weiss);
  text-decoration: none;
  background: rgba(255, 255, 255, .04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--t-sm);
  letter-spacing: -.01em;
  line-height: 1.15;
  transition: background .2s ease, box-shadow .2s ease;
}
.dienst__marke small { display: block; font-weight: 600; font-size: .72rem; letter-spacing: .02em; color: var(--grau); }
a.dienst__marke:hover,
a.dienst__marke:focus-visible { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
.dienst__zeichen { width: 1.9rem; height: 1.9rem; flex: none; }
.dienst__links { margin: 0; font-size: .78rem; color: var(--grau); }
.dienst__links a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.dienst__links a:hover { color: var(--weiss-leise); }
@media (pointer: coarse) {
  .dienst__links a { display: inline-block; padding-block: .45rem; }
}
@media print {
  .dienst { border: 0; }
  .hero__baender, .hero__woche { display: none; }
}
.flaeche--breit { aspect-ratio: 16 / 9; }
.dienst + .urheber { margin-top: 1.1rem; padding-top: 1.1rem; }

/* ==========================================================================
   Bewegung mit Absicht (2026.12.1)
   --------------------------------------------------------------------------
   Orientierung, Relevanz, eine klare Handlung. Alles Bewegte hängt an
   .bewegt (setzt mg.js nur ohne „reduzierte Bewegung“) oder an
   prefers-reduced-motion: no-preference. Bewegt wird nur transform/opacity.
   ========================================================================== */

/* Kopf: beim Scrollen Glas und feine Kante */
.kopf { transition: background-color .3s ease, box-shadow .3s ease; }
.kopf--gerollt {
  background: rgba(14, 12, 19, .82);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08), 0 10px 30px -18px rgba(0, 0, 0, .9);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .kopf--gerollt { background: var(--petrol); }
}

/* Navigation: Unterstrich wächst aus der Mitte */
.bewegt .nav > a:not(.kopf__cta) {
  background: linear-gradient(currentColor, currentColor) no-repeat 50% calc(100% - .35rem) / 0 2px;
  transition: background-size .28s cubic-bezier(.22, .75, .3, 1), color .14s ease;
}
.bewegt .nav > a:not(.kopf__cta):hover { background-size: calc(100% - 1.4rem) 2px; }

/* Knöpfe: spürbare Rückmeldung beim Drücken */
.btn { position: relative; overflow: hidden; }
.bewegt .btn { transition: background-color .14s ease, color .14s ease, border-color .14s ease, transform .12s ease; }
.bewegt .btn:active { transform: scale(.97); }

/* Genau eine Handlung bekommt Aufmerksamkeit: ein einzelner Lichtstreif über
   „Probestunde buchen“, wenn der Kopfbereich steht – einmal, nicht in Schleife. */
@media (prefers-reduced-motion: no-preference) {
  .hero .btn--sun::after {
    content: "";
    position: absolute;
    inset: -2px;
    background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .55) 48%, transparent 66%);
    transform: translateX(-120%);
    animation: glanz 1.1s cubic-bezier(.4, 0, .2, 1) 2.2s 1 both;
    pointer-events: none;
  }
  .hero--bild:not(.hero--schrift) .btn--sun::after { animation-delay: 3.6s; }
  @keyframes glanz { to { transform: translateX(120%); } }
}

/* Bewegungslinien im Kopfbereich: nach dem Zeichnen ein ruhiges Atmen */
@media (prefers-reduced-motion: no-preference) {
  .hero__baender { animation: baender-atmen 18s ease-in-out 2.6s infinite alternate; transform-origin: 50% 60%; }
  .hero__baender.ist-pausiert { animation-play-state: paused; }
  @keyframes baender-atmen {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(-2.5%, 1.5%, 0) scale(1.04); }
  }
}

/* Nächste Kurse: „heute“ mit ruhigem Puls, Beginn in Kürze hervorgehoben */
.hero__woche-wann { display: block; margin-top: .2rem; font-family: var(--f-display); font-size: var(--t-xs); font-weight: 700; color: var(--lila-hell); }
.hero__woche-wann:empty { display: none; }
.hero__woche li a.ist-heute .hero__woche-tag::before {
  content: "";
  display: inline-block;
  width: .45rem;
  height: .45rem;
  margin-right: .35rem;
  border-radius: 50%;
  vertical-align: .08em;
  background: var(--lila-hell);
  box-shadow: 0 0 0 0 rgba(var(--lila-rgb), .6);
}
.hero__woche li a.ist-bald { box-shadow: inset 0 0 0 1px rgba(var(--lila-rgb), .7); background: rgba(var(--lila-rgb), .12); }
@media (prefers-reduced-motion: no-preference) {
  .hero__woche li a.ist-heute .hero__woche-tag::before { animation: puls-ruhig 2.6s ease-out infinite; }
  @keyframes puls-ruhig {
    70%  { box-shadow: 0 0 0 .5rem rgba(var(--lila-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--lila-rgb), 0); }
  }
  .hero__woche ul li { animation: aufsteigen .6s cubic-bezier(.22, .75, .3, 1) both; }
  .hero__woche ul li:nth-child(1) { animation-delay: .75s; }
  .hero__woche ul li:nth-child(2) { animation-delay: .85s; }
  .hero__woche ul li:nth-child(3) { animation-delay: .95s; }
}

/* Lichtschein unter dem Mauszeiger (Kurskarten, Beiträge, nächste Kurse) */
.bewegt .kurs, .bewegt .beitrag, .bewegt .hero__woche { position: relative; }
.bewegt .kurs::before, .bewegt .beitrag::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(22rem circle at var(--licht-x, 50%) var(--licht-y, 50%), rgba(var(--lila-rgb), .18), transparent 60%);
  transition: opacity .3s ease;
}
.bewegt .kurs:hover::before, .bewegt .beitrag:hover::before { opacity: 1; }
.bewegt .kurs .flaeche__linien { transition: transform .9s cubic-bezier(.22, .75, .3, 1); }
.bewegt .kurs:hover .flaeche__linien { transform: translateX(-3%) scaleY(1.08); }

/* Wochenplan: der heutige Tag */
.plan__heute {
  display: inline-block;
  margin-left: .35rem;
  padding: .12rem .45rem;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  vertical-align: .12em;
  color: var(--weiss);
  background: var(--lila);
}
.plan__kopf--heute { box-shadow: inset 0 -3px 0 var(--lila); color: var(--weiss); }
.plan-tag--heute .plan-tag__name { color: var(--weiss); }

/* Eckdaten: Zahlen in fester Breite, damit das Hochzählen nicht springt */
.eckdaten dd[data-zahl] { font-variant-numeric: tabular-nums; }

/* Bestätigungsseiten: ein Haken zeichnet sich – der Abschluss fühlt sich gut an */
.erfolg { display: block; width: clamp(3.4rem, 8vw, 4.6rem); height: auto; margin: 0 0 1.2rem; overflow: visible; }
.erfolg__kreis { fill: rgba(var(--lila-rgb), .16); stroke: var(--lila-hell); stroke-width: 2.5; }
.erfolg__haken { fill: none; stroke: var(--weiss); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) {
  .erfolg__kreis { stroke-dasharray: 1; stroke-dashoffset: 1; animation: strich .7s cubic-bezier(.65, 0, .35, 1) .15s forwards; }
  .erfolg__haken { stroke-dasharray: 1; stroke-dashoffset: 1; animation: strich .45s cubic-bezier(.65, 0, .35, 1) .75s forwards; }
  .erfolg { animation: erfolg-glanz 1.4s ease-out .9s 1 both; border-radius: 50%; }
  @keyframes strich { to { stroke-dashoffset: 0; } }
  @keyframes erfolg-glanz {
    0%   { filter: drop-shadow(0 0 0 rgba(var(--lila-rgb), 0)); }
    40%  { filter: drop-shadow(0 0 18px rgba(var(--lila-rgb), .75)); }
    100% { filter: drop-shadow(0 0 0 rgba(var(--lila-rgb), 0)); }
  }
  .seitenkopf--erfolg .seitenkopf__titel { animation: aufsteigen .6s cubic-bezier(.22, .75, .3, 1) .55s both; }
  .seitenkopf--erfolg .lead { animation: aufsteigen .6s cubic-bezier(.22, .75, .3, 1) .7s both; }
}

/* Buchungsleiste auf dem Handy: Daumenzone, erscheint erst nach dem Kopfbereich */
.schnellbuchung { display: none; }
@media (max-width: 760px) {
  .schnellbuchung {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: .5rem;
    padding: .6rem max(.75rem, env(safe-area-inset-right)) calc(.6rem + env(safe-area-inset-bottom)) max(.75rem, env(safe-area-inset-left));
    background: rgba(14, 12, 19, .9);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 -1px 0 rgba(255, 255, 255, .08), 0 -12px 30px -16px rgba(0, 0, 0, .9);
    transform: translateY(110%);
    visibility: hidden;
    transition: transform .35s cubic-bezier(.22, .75, .3, 1), visibility 0s linear .35s;
  }
  .schnellbuchung.ist-sichtbar { transform: none; visibility: visible; transition: transform .35s cubic-bezier(.22, .75, .3, 1), visibility 0s; }
  .schnellbuchung .btn { text-align: center; padding: .85rem .6rem; color: var(--weiss-leise); }
  .schnellbuchung .btn--sun { color: var(--ink); }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .schnellbuchung { transition: none; }
}
@media print { .schnellbuchung { display: none !important; } }

/* Seitenwechsel: sanft überblenden, der Kopf bleibt stehen (wo der Browser es kann) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .kopf { view-transition-name: kopf; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }
}