/* ---------------------------------------------------------------------------
   Fiddleclass - Geigenunterricht
   Warmes Elfenbein, Rosenholz als Akzent, nachts Bernstein auf Nacht.
   --------------------------------------------------------------------------- */

@font-face {
  font-family: 'Newsreader';
  src: url('/assets/fonts/newsreader-latin.woff2') format('woff2');
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
  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: 'Newsreader';
  src: url('/assets/fonts/newsreader-latin-ext.woff2') format('woff2');
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
  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: 'Manrope';
  src: url('/assets/fonts/manrope-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  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: 'Manrope';
  src: url('/assets/fonts/manrope-latin-ext.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  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;
}

/* --- Farben -------------------------------------------------------------- */
:root {
  --paper: #F7F2E9;          /* Grundton der Seite, warmes Elfenbein */
  --card: #FFFBF4;           /* Karten und Felder */
  --tone: #EDE3D3;           /* abgesetzte Bänder */
  --ink: #231D18;            /* Schrift */
  --muted: #5B5149;          /* zweite Ebene */
  --accent: #8C2F39;         /* Rosenholz, der eine Akzent */
  --accent-text: #7C2831;    /* derselbe Ton, für kleine Schrift */
  --accent-soft: #F1DFDC;    /* Akzent als Fläche */
  --leaf: #8A6A3C;           /* Messing, nur für Zeichen */
  --line: #E0D3BF;
  --field-line: #857767;
  --focus: #231D18;

  --wolke-1: rgba(190, 128, 70, 0.24);
  --wolke-2: rgba(150, 70, 66, 0.14);
  --wolke-3: rgba(206, 176, 132, 0.32);
  --schatten: 0 1px 2px rgba(35, 29, 24, 0.05), 0 8px 24px -12px rgba(35, 29, 24, 0.16);
  --schatten-stark: 0 2px 4px rgba(35, 29, 24, 0.05), 0 18px 40px -18px rgba(35, 29, 24, 0.22);

  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --wrap: 66rem;
  --gap: clamp(3.5rem, 9vw, 7rem);
  --rund: 14px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --paper: #141210;
    --card: #1E1A16;
    --tone: #201B17;
    --ink: #F1EAE0;
    --muted: #B6AA9C;
    --accent: #D89B5A;
    --accent-text: #E3AC70;
    --accent-soft: #2C2119;
    --leaf: #C6A97C;
    --line: #2F2822;
    --field-line: #786B5E;
    --focus: #F1EAE0;

    --wolke-1: rgba(196, 132, 62, 0.17);
    --wolke-2: rgba(140, 60, 56, 0.14);
    --wolke-3: rgba(96, 74, 52, 0.22);
    --schatten: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -12px rgba(0, 0, 0, 0.5);
    --schatten-stark: 0 2px 4px rgba(0, 0, 0, 0.35), 0 18px 40px -18px rgba(0, 0, 0, 0.6);
    color-scheme: dark;
  }
}

:root[data-theme='dark'] {
  --paper: #141210;
  --card: #1E1A16;
  --tone: #201B17;
  --ink: #F1EAE0;
  --muted: #B6AA9C;
  --accent: #D89B5A;
  --accent-text: #E3AC70;
  --accent-soft: #2C2119;
  --leaf: #C6A97C;
  --line: #2F2822;
  --field-line: #786B5E;
  --focus: #F1EAE0;

  --wolke-1: rgba(196, 132, 62, 0.17);
  --wolke-2: rgba(140, 60, 56, 0.14);
  --wolke-3: rgba(96, 74, 52, 0.22);
  --schatten: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -12px rgba(0, 0, 0, 0.5);
  --schatten-stark: 0 2px 4px rgba(0, 0, 0, 0.35), 0 18px 40px -18px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.72;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  background-color: var(--paper);
  background-image:
    radial-gradient(58rem 40rem at 12% -8%, var(--wolke-1), transparent 62%),
    radial-gradient(46rem 34rem at 104% 6%, var(--wolke-2), transparent 58%),
    radial-gradient(52rem 40rem at 50% 108%, var(--wolke-3), transparent 60%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* Ein Hauch Korn, damit die Flächen nicht digital wirken. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

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

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.14;
  letter-spacing: -0.015em;
  margin: 0 0 0.55em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.3rem, 6.4vw, 4rem); }
h2 { font-size: clamp(1.85rem, 4.2vw, 2.7rem); }
h3 { font-size: clamp(1.25rem, 2.6vw, 1.6rem); }
h4 { font-family: var(--sans); font-size: 1.0625rem; font-weight: 600; margin: 0 0 0.5em; }

p { margin: 0 0 1.15em; max-width: 38em; }
p:last-child { margin-bottom: 0; }

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

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

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.narrow { max-width: 46rem; }

section { padding-block: var(--gap); position: relative; }

/* Abgesetztes Band: weiche Fläche mit sanften Kanten statt hartem Kasten. */
.band {
  background: linear-gradient(180deg, transparent, var(--tone) 5%, var(--tone) 95%, transparent);
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-text);
  font-weight: 600;
  margin: 0 0 1.1rem;
}
.kicker::before {
  content: '';
  width: 1.6rem;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}

.lead { font-size: clamp(1.1rem, 1.6vw, 1.2rem); color: var(--muted); max-width: 34em; }
.muted { color: var(--muted); }
.small { font-size: 0.92rem; }

/* --- Knöpfe -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 52px;
  min-width: 52px;
  padding: 0.8rem 1.7rem;
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  cursor: pointer;
  box-shadow: var(--schatten);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease,
              border-color 0.18s ease, color 0.18s ease;
}
.btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #FFF9F5;
  transform: translateY(-1px);
  box-shadow: var(--schatten-stark);
}
.btn:active { transform: translateY(0); }

.btn-quiet {
  background: var(--card);
  color: var(--ink);
  border-color: var(--field-line);
  box-shadow: none;
}
.btn-quiet:hover {
  background: var(--card);
  color: var(--accent-text);
  border-color: var(--accent);
  box-shadow: var(--schatten);
}

.btn-accent { background: var(--accent); border-color: var(--accent); color: #FFF9F5; }
.btn-accent:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.btn-small { min-height: 44px; padding: 0.5rem 1.1rem; font-size: 0.92rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2.2rem; }

/* --- Kopf ---------------------------------------------------------------- */
.site-head {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line);
}
@supports not (backdrop-filter: blur(1px)) {
  .site-head { background: var(--paper); }
}
.site-head .wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 74px;
  position: relative;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  text-decoration: none;
  margin-right: auto;
  padding: 0.5rem 0;
}
.brand:hover { color: inherit; }
.brand .mark {
  width: 42px;
  height: 42px;
  flex: none;
  object-fit: contain;
  transition: transform 0.25s ease;
}
/* In der hellen Ansicht steht das Gold auf Creme: etwas dunkler, damit es traegt. */
.brand .mark, .foot-mark img { filter: none; }
.brand:hover .mark { transform: rotate(-8deg); }

.nav { display: flex; align-items: center; gap: 0.1rem; }
.nav a {
  padding: 0.7rem 0.75rem;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-size: 0.96rem;
  font-weight: 500;
  color: var(--muted);
  border-radius: 999px;
  transition: color 0.15s ease, background 0.15s ease;
}
.nav a:hover { color: var(--ink); background: var(--tone); }
.nav a[aria-current='page'] { color: var(--ink); }

.icon-btn {
  min-width: 48px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--ink);
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.icon-btn:hover { border-color: var(--line); background: var(--card); }

.nav-toggle { display: none; }

@media (max-width: 52rem) {
  .nav-toggle { display: inline-flex; }
  .nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 0.5rem);
    flex-direction: column;
    align-items: stretch;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--rund);
    box-shadow: var(--schatten-stark);
    padding: 0.5rem;
    gap: 0.15rem;
  }
  .nav.open { display: flex; }
  .nav a { border-radius: 10px; padding-inline: 1rem; }
}

/* --- Start: der Kopfbereich mit dem gelieferten Hintergrund --------------- */
/* Tag- und Nachtfassung stecken in zwei Variablen. Die eigentlichen Regeln
   stehen dadurch nur einmal da - umgeschaltet wird weiter unten, indem die
   Variablen neu gesetzt werden. */
.hero {
  --grund-hoch: image-set(url("/assets/img/grund-hoch-tag.webp") type("image/webp") 1x,
                          url("/assets/img/grund-hoch-tag.jpg") type("image/jpeg") 1x);
  --grund-quer: image-set(url("/assets/img/grund-quer-tag.webp") type("image/webp") 1x,
                          url("/assets/img/grund-quer-tag.jpg") type("image/jpeg") 1x);
  /* Am Handy steht die Schrift unter dem Bild, dort reicht ein Hauch. */
  --grund-schleier: linear-gradient(180deg, rgba(247, 242, 233, 0.2) 0%,
                    rgba(247, 242, 233, 0.1) 55%, rgba(247, 242, 233, 0.3) 100%);
  /* Wie weit unten ausgeblendet wird. Der Wert bleibt innerhalb des unteren
     Innenabstands, damit keine Schrift in den Verlauf hineinragt. */
  --hero-blende: clamp(4.5rem, 11vw, 8rem);
  --hero-maske: linear-gradient(to bottom, #000 0,
                #000 calc(100% - var(--hero-blende)), rgba(0, 0, 0, 0) 100%);
  --hero-ton: var(--ink);
  --hero-leise: var(--muted);
  --hero-akzent: var(--accent-text, var(--accent));
  /* Am Tag: gefuellter Knopf in Terrakotta, zweiter Knopf mit dunklem Rand. */
  --hero-knopf-flaeche: var(--accent);
  --hero-knopf-flaeche-hover: var(--ink);
  --hero-knopf-schrift: #FFF9F5;
  --hero-rand: rgba(42, 30, 24, 0.42);
  --hero-rand-schrift: var(--ink);
  --hero-rand-fuell: rgba(42, 30, 24, 0.07);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(3.5rem, 10vw, 6.5rem) clamp(5rem, 12vw, 8rem);
  color: var(--hero-ton);
}

/* Bild und Schleier liegen als eigene Ebenen hinter dem Inhalt, nicht als
   Hintergrund des Kastens. Nur so lassen sie sich nach unten wegblenden - ein
   Hintergrund wuerde an der Unterkante hart abbrechen und dort eine Linie
   ziehen, weil die Seite dahinter ihre eigenen Farbwolken hat. */
.hero::before,
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask-image: var(--hero-maske);
          mask-image: var(--hero-maske);
}
.hero::before {
  z-index: -2;
  /* Quadratisch auf schmalen Bildschirmen, das breite Banner ab Tablet.
     Die Geige steht links im Bild, deshalb wird von links her angeschnitten -
     so bleibt sie stehen, egal wie breit der Bildschirm ist. */
  background-image: var(--grund-hoch);
  background-size: cover;
  background-position: left center;
  background-repeat: no-repeat;
}
.hero::after { z-index: -1; background-image: var(--grund-schleier); }

/* Ab Tablet steht die Schrift neben der Geige, also wird der Schleier quer
   gelegt: links bleibt das Bild frei, rechts unter der Schrift deckt er zu. */
@media (min-width: 48rem) {
  .hero::before { background-image: var(--grund-quer); }
  .hero {
    --grund-schleier: linear-gradient(90deg, rgba(247, 242, 233, 0) 0%,
                      rgba(247, 242, 233, 0.25) 26%, rgba(247, 242, 233, 0.82) 52%,
                      rgba(247, 242, 233, 0.9) 100%);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) .hero {
      --grund-schleier: linear-gradient(90deg, rgba(20, 18, 16, 0) 0%,
                        rgba(20, 18, 16, 0.3) 26%, rgba(20, 18, 16, 0.82) 52%,
                        rgba(20, 18, 16, 0.9) 100%);
    }
  }
  :root[data-theme='dark'] .hero {
    --grund-schleier: linear-gradient(90deg, rgba(20, 18, 16, 0) 0%,
                      rgba(20, 18, 16, 0.3) 26%, rgba(20, 18, 16, 0.82) 52%,
                      rgba(20, 18, 16, 0.9) 100%);
  }
}

/* Handyansicht: das Banner in voller Breite quer ueber den Kopf zu ziehen
   hiesse anschneiden und vergroessern. Stattdessen liegt der quadratische
   Ausschnitt mit der Geige oben, in voller Breite und damit verkleinert. Ist
   der Kopfbereich niedriger, wird unten abgeschnitten - dort blendet die Maske
   ohnehin aus. Die Zahl ist das Seitenverhaeltnis der Vorlage (724x724). */
@media (max-width: 47.99rem) {
  .hero::before,
  .hero::after {
    bottom: auto;
    height: min(100%, 82vw);
    --hero-maske: linear-gradient(to bottom, #000 0, #000 62%, rgba(0, 0, 0, 0) 100%);
  }
  .hero::before {
    background-size: 100% auto;
    background-position: top center;
  }
  /* Die Schrift beginnt unterhalb des Bildes. Steht sie darauf, ist sie vor
     dunklem Holz und hellen Blättern abwechselnd gut und gar nicht zu lesen -
     und ein Schleier, der das ausgleicht, nimmt dem Bild alles. */
  .hero { padding-top: calc(82vw + 0.75rem); }
}

/* Browser ohne Masken bekommen die alte Loesung: der Schleier laeuft in die
   Seitenfarbe aus und deckt die Bildkante zu. */
@supports not ((-webkit-mask-image: linear-gradient(#000, transparent)) or
               (mask-image: linear-gradient(#000, transparent))) {
  .hero { background-color: var(--paper); }
  .hero::after {
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, var(--paper) 100%),
                      var(--grund-schleier);
  }
}


/* Nachtfassung: dieselben Regeln, andere Bilder und ein dunkler Schleier. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .hero {
    --grund-hoch: image-set(url("/assets/img/grund-hoch-nacht.webp") type("image/webp") 1x,
                            url("/assets/img/grund-hoch-nacht.jpg") type("image/jpeg") 1x);
    --grund-quer: image-set(url("/assets/img/grund-quer-nacht.webp") type("image/webp") 1x,
                            url("/assets/img/grund-quer-nacht.jpg") type("image/jpeg") 1x);
    --grund-schleier: linear-gradient(180deg, rgba(20, 18, 16, 0.28) 0%,
                      rgba(20, 18, 16, 0.14) 55%, rgba(20, 18, 16, 0.35) 100%);
    --hero-ton: #F1EAE0;
    --hero-leise: #C9BCAD;
    --hero-akzent: #E3AC70;
    --hero-knopf-flaeche: #F1EAE0;
    --hero-knopf-flaeche-hover: #E3AC70;
    --hero-knopf-schrift: #241C17;
    --hero-rand: rgba(241, 234, 224, 0.55);
    --hero-rand-schrift: #F6EEE6;
    --hero-rand-fuell: rgba(241, 234, 224, 0.12);
  }
}
:root[data-theme='dark'] .hero {
  --grund-hoch: image-set(url("/assets/img/grund-hoch-nacht.webp") type("image/webp") 1x,
                          url("/assets/img/grund-hoch-nacht.jpg") type("image/jpeg") 1x);
  --grund-quer: image-set(url("/assets/img/grund-quer-nacht.webp") type("image/webp") 1x,
                          url("/assets/img/grund-quer-nacht.jpg") type("image/jpeg") 1x);
  --grund-schleier: linear-gradient(180deg, rgba(20, 18, 16, 0.28) 0%,
                      rgba(20, 18, 16, 0.14) 55%, rgba(20, 18, 16, 0.35) 100%);
  --hero-ton: #F1EAE0;
  --hero-leise: #C9BCAD;
  --hero-akzent: #E3AC70;
  --hero-knopf-flaeche: #F1EAE0;
  --hero-knopf-flaeche-hover: #E3AC70;
  --hero-knopf-schrift: #241C17;
  --hero-rand: rgba(241, 234, 224, 0.55);
  --hero-rand-schrift: #F6EEE6;
  --hero-rand-fuell: rgba(241, 234, 224, 0.12);
}

/* Aeltere Browser ohne image-set bekommen wenigstens das JPG. */
@supports not (background-image: image-set(url("x.webp") type("image/webp"))) {
  .hero::before { background-image: url("/assets/img/grund-hoch-tag.jpg"); }
  @media (min-width: 48rem) {
    .hero::before { background-image: url("/assets/img/grund-quer-tag.jpg"); }
  }
}

/* Die Geige steht links im Hintergrundbild. Deshalb ruecken Text und Knoepfe
   ab Tablet nach rechts - die linke Spalte bleibt dem Bild. */
.hero-inner { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 62rem) {
  .hero-inner { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 3.5rem; }
  .hero-text { grid-column: 2; }
}

.hero h1 { max-width: 15ch; color: var(--hero-ton); }
.hero p { font-size: clamp(1.05rem, 1.5vw, 1.18rem); max-width: 34em; color: var(--hero-leise); }
.hero .kicker { color: var(--hero-akzent); }
.hero .kicker::before { background: var(--hero-akzent); }

@media (max-width: 62rem) {
  .hero-inner { grid-template-columns: 1fr; }
}

/* Knoepfe im Kopfbereich. Die Farben kommen aus Variablen, weil der Bereich am
   Tag hell und in der Nacht dunkel ist - mit festen Farben war der zweite Knopf
   am Tag hell auf hell und damit unlesbar. */
.btn-hell {
  background: var(--hero-knopf-flaeche, #F1EAE0);
  border-color: var(--hero-knopf-flaeche, #F1EAE0);
  color: var(--hero-knopf-schrift, #241C17);
}
.btn-hell:hover {
  background: var(--hero-knopf-flaeche-hover, #E3AC70);
  border-color: var(--hero-knopf-flaeche-hover, #E3AC70);
  color: var(--hero-knopf-schrift, #241C17);
}
.btn-rand {
  background: transparent;
  border-color: var(--hero-rand, rgba(241, 234, 224, 0.55));
  color: var(--hero-rand-schrift, #F6EEE6);
  box-shadow: none;
}
.btn-rand:hover {
  background: var(--hero-rand-fuell, rgba(241, 234, 224, 0.12));
  border-color: var(--hero-rand-schrift, #F6EEE6);
  color: var(--hero-rand-schrift, #F6EEE6);
}
/* --- Karten -------------------------------------------------------------- */
.karte {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--rund);
  padding: clamp(1.6rem, 3vw, 2.2rem);
  box-shadow: var(--schatten);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.karte-hover:hover { transform: translateY(-2px); box-shadow: var(--schatten-stark); }

.grid-2 { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 50rem) { .grid-2 { grid-template-columns: 1fr 1fr; gap: 1.75rem; } }

.grid-3 { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 62rem) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

/* --- Angebot ------------------------------------------------------------- */
.offer { display: flex; flex-direction: column; }
.offer h3 { margin-bottom: 0.4rem; }
.offer .kicker { margin-bottom: 0.8rem; }
.offer ul {
  list-style: none;
  padding: 0;
  margin: 1.4rem 0;
  display: grid;
  gap: 0.75rem;
}
.offer li {
  display: grid;
  grid-template-columns: 1.35rem 1fr;
  gap: 0.65rem;
  align-items: start;
  font-size: 1rem;
}
.offer li svg { color: var(--leaf); margin-top: 0.3rem; }
.offer .foot { margin-top: auto; padding-top: 1.4rem; border-top: 1px solid var(--line); }
/* Steht über dem Fuss nichts (keine Beschreibung, keine Punkte), fällt die
   Trennlinie weg - sonst klebt sie direkt unter der Überschrift. */
.offer .foot-allein { border-top: 0; padding-top: 1rem; }
/* Jede Kurskarte ist so hoch wie ihr eigener Inhalt. Vorher wurde eine kurze
   Karte auf die Höhe der Nachbarkarte gestreckt und Preis und Knöpfe rutschten
   ganz nach unten - mit einem leeren Loch darüber. Kommt später Text dazu,
   wächst die Karte einfach mit. */
.kurse { align-items: start; }

/* --- Kurskarte mit Umschalter -------------------------------------------- */
/* Die Karte enthält alle Stufen. Ohne JavaScript stehen sie untereinander,
   getrennt durch eine dünne Linie; mit JavaScript wird eine davon gezeigt. */
.kurs .stufe-inhalt { display: flex; flex-direction: column; flex: 1 1 auto; }
/* Muss sein: ein eigenes "display" schlaegt die eingebaute Regel fuer
   [hidden], die versteckte Stufe waere sonst trotzdem zu sehen. */
.kurs .stufe-inhalt[hidden] { display: none; }
.kurs .stufe-inhalt + .stufe-inhalt {
  margin-top: 1.6rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
.kurs-umschaltbar .stufe-inhalt + .stufe-inhalt {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Gleich breite Felder in einer Reihe. Vorher brach die Leiste auf schmalen
   Handys in zwei Zeilen um und wurde zu einem schiefen Klotz. */
.stufen {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0.25rem;
  padding: 0.25rem;
  margin: 0 0 1.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--tone);
  width: 100%;
  max-width: 26rem;
}
.stufe-knopf {
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  hyphens: auto;
  overflow-wrap: break-word;
  padding: 0.5rem 0.6rem;
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.stufe-knopf:hover { color: var(--ink); }
.stufe-knopf[aria-selected='true'] {
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--schatten);
}
.stufe-knopf:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Ohne JavaScript gibt es keinen Umschalter - dann wäre die Leiste irreführend. */
.kurs:not(.kurs-umschaltbar) .stufen { display: none; }
.price {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3vw, 1.95rem);
  font-weight: 300;
  margin: 0.6rem 0 0.15rem;
  color: var(--ink);
}

/* --- Was ihr mitnehmt ---------------------------------------------------- */
.benefit { display: grid; gap: 0.85rem; align-content: start; }
.benefit .zeichen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--accent-soft);
  color: var(--accent-text);
}
/* Die neu erstellten Inhaltszeichen enthalten ihren eigenen Hintergrund. */
.benefit .zeichen.zeichen-bild {
  --icon-size: 72px;
  width: 72px;
  height: 72px;
  background: none;
  border-radius: 0;
}
/* Die Motive bleiben vollständig sichtbar; nur die Hintergrund-Ecken sind rund. */
.benefit .zeichen.zeichen-bild img {
  display: block;
  width: 100%;
  height: 100%;
}
.inhalt-icon-tag,
.inhalt-icon-nacht {
  flex: none;
  box-sizing: border-box;
  width: var(--icon-size, 44px);
  height: var(--icon-size, 44px);
  padding: 4px;
  border: 1px solid var(--icon-rand);
  background: var(--icon-grund);
  box-shadow: inset 0 0 0 1px var(--icon-glanz), 0 3px 8px rgb(35 25 15 / 12%);
  line-height: 0;
  border-radius: 25%;
  overflow: hidden;
}
/* Die Grundfarbe ist aus den Bildecken gemessen, nicht geschaetzt: Das Bild
   bringt seine eigene Flaeche mit, und die vier Pixel Kachel ringsum fielen
   sonst als schmaler Streifen in leicht anderer Farbe auf. */
.inhalt-icon-tag {
  --icon-rand: #BC945A;
  --icon-grund: #F2E4D0;
  --icon-glanz: rgb(255 255 255 / 65%);
  display: block;
}
.inhalt-icon-nacht {
  --icon-rand: #A67C43;
  --icon-grund: #24160C;
  --icon-glanz: rgb(233 183 111 / 18%);
  display: none;
}
.inhalt-icon-tag img,
.inhalt-icon-nacht img,
.zeichenknopf-bild .inhalt-icon-tag img,
.zeichenknopf-bild .inhalt-icon-nacht img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 20%;
  object-fit: contain;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .inhalt-icon-tag { display: none; }
  :root:not([data-theme='light']) .inhalt-icon-nacht { display: block; }
}
:root[data-theme='dark'] .inhalt-icon-tag { display: none; }
:root[data-theme='dark'] .inhalt-icon-nacht { display: block; }
:root[data-theme='light'] .inhalt-icon-tag { display: block; }
:root[data-theme='light'] .inhalt-icon-nacht { display: none; }
.benefit h3 {
  font-size: 1.12rem;
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 0;
  margin: 0;
  line-height: 1.35;
}
.benefit p { font-size: 0.98rem; color: var(--muted); }

/* --- Über mich ----------------------------------------------------------- */
.ueber-grid { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 56rem) {
  .ueber-grid { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: 4rem; }
}
.signatur {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 300;
  color: var(--accent-text);
  margin-top: 1.5rem;
}

/* --- Neues --------------------------------------------------------------- */
.post-list { display: grid; gap: 1rem; }
.post-item {
  display: grid;
  gap: 0.45rem;
  padding: 1.5rem 1.6rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--rund);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.post-item:hover { transform: translateY(-2px); box-shadow: var(--schatten); border-color: var(--field-line); }
.post-item time { font-size: 0.82rem; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
.post-item h3 { margin: 0; font-size: 1.3rem; }
.post-item h3 a { text-decoration: none; }
.post-item h3 a:hover { color: var(--accent-text); }

.post-body { max-width: 40em; font-size: 1.06rem; }
.post-body h3 { margin-top: 2.2rem; }
.post-body ul, .post-body ol { padding-left: 1.2rem; }
.post-body li { margin-bottom: 0.45rem; }
.post-body a { color: var(--accent-text); }

/* --- Fragen -------------------------------------------------------------- */
.faq {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--rund);
  margin-bottom: 0.75rem;
  overflow: hidden;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.15rem 3.2rem 1.15rem 1.5rem;
  min-height: 56px;
  display: flex;
  align-items: center;
  position: relative;
  font-weight: 600;
  transition: background 0.15s ease;
}
.faq summary:hover { background: var(--tone); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '';
  position: absolute;
  right: 1.5rem;
  width: 0.62rem;
  height: 0.62rem;
  border-right: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: rotate(45deg) translateY(-25%);
  transition: transform 0.22s ease;
}
.faq[open] summary::after { transform: rotate(-135deg) translateY(-25%); }
.faq .answer { padding: 0 3.2rem 1.5rem 1.5rem; max-width: 42em; color: var(--muted); }
.faq .answer p:first-child { margin-top: 0; }
.faq .answer a { color: var(--accent-text); }

/* --- Bezahlen ------------------------------------------------------------ */
.pay-list { display: grid; gap: 1rem; }
@media (min-width: 46rem) { .pay-list { grid-template-columns: 1fr 1fr; } }
.pay-item {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.5rem 1.6rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--rund);
}
.pay-item h3 { margin: 0; font-size: 1.18rem; font-family: var(--sans); font-weight: 600; letter-spacing: 0; }
.pay-item .betrag {
  font-family: var(--serif);
  font-size: 1.9rem;
  font-weight: 300;
  margin: 0.4rem 0 0.9rem;
}
.pay-item form { margin-top: auto; }
.pay-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.84rem;
  color: var(--muted);
  margin-top: 0.8rem;
}

/* --- Formular ------------------------------------------------------------ */
.field { display: grid; gap: 0.45rem; margin-bottom: 1.3rem; }
.field label { font-size: 0.93rem; font-weight: 600; }
.field .hint { font-size: 0.86rem; color: var(--muted); }

input[type='text'], input[type='email'], input[type='password'],
input[type='date'], input[type='number'], select, textarea {
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--field-line);
  border-radius: 10px;
  padding: 0.8rem 0.95rem;
  min-height: 52px;
  width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
textarea { min-height: 11rem; resize: vertical; line-height: 1.65; }
input:hover, textarea:hover, select:hover { border-color: var(--ink); }
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.notice {
  border-left: 3px solid var(--accent);
  padding: 1rem 1.2rem;
  margin-bottom: 1.75rem;
  background: var(--card);
  border-radius: 0 10px 10px 0;
  box-shadow: var(--schatten);
  font-size: 0.97rem;
}
.notice-error { border-left-color: #B4432B; }
:root[data-theme='dark'] .notice-error,
:root:not([data-theme='light']) .notice-error { border-left-color: #E98F72; }

/* --- Fuß ----------------------------------------------------------------- */
.site-foot {
  margin-top: 2rem;
  padding-block: 3.5rem 3rem;
  font-size: 0.92rem;
  color: var(--muted);
}
.site-foot .cols { display: grid; gap: 2rem; }
@media (min-width: 44rem) {
  .site-foot .cols { grid-template-columns: 1fr auto; align-items: start; }
}
.site-foot nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
.site-foot nav a { padding: 0.6rem 0; text-decoration: none; }
.site-foot nav a:hover { text-decoration: underline; }
.foot-mark { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0.9rem; font-weight: 600; }
.foot-mark img { width: 36px; height: 36px; object-fit: contain; }

/* --- Vorschau-Streifen --------------------------------------------------- */
.preview-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--accent);
  color: #FFF9F5;
  padding: 0.7rem 1.25rem;
  font-size: 0.92rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
}
.preview-bar a { color: inherit; font-weight: 700; }

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 1rem;
  top: 0.5rem;
  z-index: 60;
  background: var(--ink);
  color: var(--paper);
  padding: 0.7rem 1.1rem;
  border-radius: 999px;
}

/* Umschalter zeigt das Zeichen der jeweils anderen Ansicht */
.theme-toggle .only-dark { display: none; }
.theme-toggle .only-light { display: inline-flex; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .theme-toggle .only-dark { display: inline-flex; }
  :root:not([data-theme='light']) .theme-toggle .only-light { display: none; }
}
:root[data-theme='dark'] .theme-toggle .only-dark { display: inline-flex; }
:root[data-theme='dark'] .theme-toggle .only-light { display: none; }
:root[data-theme='light'] .theme-toggle .only-dark { display: none; }
:root[data-theme='light'] .theme-toggle .only-light { display: inline-flex; }

/* ==========================================================================
   Handy-Ansicht
   Geprüft gegen die üblichen Stolpersteine: iOS-Zoom in Formularen, Aussparungen
   am Bildschirmrand, zu kleine Tippflächen, waagerechtes Verrutschen.
   ========================================================================== */

/* Nichts darf seitlich hinausragen. */
html, body { max-width: 100%; overflow-x: clip; }
img, svg, video { max-width: 100%; height: auto; }
:where(.karte, .post-item, .pay-item, .faq, .block) { min-width: 0; }

/* Rand der Seite berücksichtigt Aussparungen (iPhone, gebogene Ränder). */
.wrap {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* Kein blauer Blitz beim Antippen, aber der Fokusrahmen bleibt. */
a, button, summary, label, input, select, textarea {
  -webkit-tap-highlight-color: transparent;
}

/* Lange Wörter und E-Mail-Adressen brechen um statt zu überstehen. */
p, li, dd, h1, h2, h3, .lead, .answer { overflow-wrap: break-word; }
a[href^='mailto:'], .code { word-break: break-word; }

@media (max-width: 52rem) {

  /* Schrift eine Spur ruhiger, Zeilen kürzer. */
  body { font-size: 1.0625rem; line-height: 1.7; }
  h1 { font-size: clamp(2rem, 8.5vw, 2.6rem); }
  h2 { font-size: clamp(1.65rem, 6.5vw, 2.1rem); }
  h3 { font-size: 1.25rem; }
  .lead { font-size: 1.06rem; }

  /* Etwas weniger Luft zwischen den Abschnitten, damit weniger gescrollt wird. */
  :root { --gap: clamp(2.75rem, 11vw, 4rem); }
  .wrap { width: min(100% - 2rem, var(--wrap)); }

  /* Knöpfe über die ganze Breite: mit einer Hand sicher zu treffen. */
  .btn-row { gap: 0.65rem; }
  .btn-row > .btn { flex: 1 1 100%; }
  .btn { min-height: 54px; }

  /* Karten dürfen bis fast an den Rand. */
  .karte, .post-item, .pay-item { padding: 1.35rem 1.25rem; border-radius: 12px; }
  .faq summary { padding: 1.1rem 3rem 1.1rem 1.15rem; }
  .faq .answer { padding: 0 1.15rem 1.35rem; }

  /* Der Kopf bleibt schmal, das Menü füllt die Breite. */
  .site-head .wrap { min-height: 64px; }
  .brand { font-size: 1.15rem; }
  .brand .mark { width: 34px; height: 34px; }
  .nav { max-height: 70dvh; overflow-y: auto; overscroll-behavior: contain; }
  .nav a { min-height: 52px; font-size: 1.02rem; }

  /* Der Fuß bekommt Platz für die Leiste des Browsers. */
  .site-foot { padding-bottom: calc(2.5rem + env(safe-area-inset-bottom)); }

  .hero-inner { gap: 2rem; }

  /* Über mich: Name über den Text statt daneben. */
  .ueber-grid { gap: 1.5rem; }
  .signatur { font-size: 1.6rem; margin-top: 0.5rem; }
}

/* Formulare: 16px verhindert, dass Safari beim Tippen hineinzoomt. */
@media (max-width: 52rem) {
  input[type='text'], input[type='email'], input[type='password'],
  input[type='date'], input[type='number'], select, textarea {
    font-size: 16px;
    min-height: 54px;
    border-radius: 12px;
  }
  textarea { min-height: 9rem; }
  .field { margin-bottom: 1.15rem; }
  .field label { font-size: 0.98rem; }
}

/* Auswahl beim Buchen: große, gut treffbare Flächen. */
.wahl { border: 0; padding: 0; margin: 0 0 1.6rem; }
.wahl legend { font-size: 0.93rem; font-weight: 600; padding: 0; margin-bottom: 0.7rem; }
.wahl-option {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.5rem 0.9rem;
  min-height: 64px;
  padding: 1rem 1.1rem;
  margin-bottom: 0.6rem;
  border: 1px solid var(--field-line);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.wahl-option:hover { border-color: var(--accent); }
.wahl-option:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.wahl-option input {
  width: 22px;
  height: 22px;
  min-height: 0;
  accent-color: var(--accent);
  flex: none;
}
.wahl-text { display: grid; gap: 0.15rem; flex: 1; min-width: 0; }
.wahl-preis { font-family: var(--serif); font-size: 1.3rem; white-space: nowrap; }

/* Häkchen für die AGB */
.haken {
  display: flex;
  align-items: start;
  gap: 0.8rem;
  padding: 0.9rem 0;
  min-height: 52px;
  cursor: pointer;
  font-size: 0.97rem;
}
.haken input {
  width: 22px;
  height: 22px;
  min-height: 0;
  margin-top: 0.15rem;
  accent-color: var(--accent);
  flex: none;
}

.zeichen-gross {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 24px;
  background: var(--accent-soft);
  color: var(--accent-text);
  margin-bottom: 1.5rem;
}

/* Auf Geräten ohne Maus keine Hover-Effekte, die hängen bleiben. */
@media (hover: none) {
  .btn:hover, .karte-hover:hover, .post-item:hover { transform: none; }
  .nav a:hover { background: none; }
}

/* Auf schmalen Bildschirmen rutscht der Preis unter den Namen. */
@media (max-width: 30rem) {
  .wahl-option { grid-template-columns: auto 1fr; }
  .wahl-preis {
    grid-column: 2;
    font-size: 1.25rem;
    text-align: left;
  }
  .wahl-option { padding: 0.9rem 1rem; }
}

/* Die ganze Karte in „Neues“ ist anklickbar – auf dem Handy viel leichter zu treffen. */
.post-item { position: relative; }
.post-item h3 a::after { content: ''; position: absolute; inset: 0; }
.post-item h3 a { position: static; }

/* Links mitten im Text bekommen etwas mehr Höhe zum Antippen. */
@media (max-width: 52rem) {
  .small a, .answer a, .post-body a { padding-block: 0.25rem; }
}

/* Knöpfe in der Angebotskarte: eine Spalte, feste Abstände, nichts überlappt. */
.offer .aktionen {
  display: grid;
  gap: 0.7rem;
  margin-top: 1.6rem;
}
.offer .aktionen .btn { width: 100%; margin: 0; }
.offer .aktionen form { margin: 0; display: block; }
.zahlblock {
  display: grid;
  gap: 0.45rem;
  justify-items: center;
  margin-top: 0.35rem;
}
.zahlblock form { width: 100%; }
.zahlblock .btn { width: 100%; }
.zahlblock .pay-mark { margin: 0; }
.zahlhinweis { margin-top: 2.5rem; max-width: 42em; }

/* --- Varianten: in der Gruppe oder einzeln ------------------------------- */
/* Die Wahl sind große Felder mit Name und Preis, darunter die Knöpfe der
   gewählten Variante. Ohne JavaScript fehlt die Wahl, dann steht jede
   Variante mit eigener Kopfzeile untereinander. */
.offer .variante { display: grid; gap: 0.7rem; }
.offer .variante[hidden] { display: none; }
.varianten-frage { margin: 0; font-size: 0.93rem; font-weight: 600; }
.wahlleiste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}
.wahl-knopf {
  display: grid;
  gap: 0.2rem;
  align-content: center;
  justify-items: start;
  text-align: left;
  min-height: 64px;
  padding: 0.7rem 0.95rem;
  font: inherit;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--field-line);
  border-radius: 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.wahl-knopf:hover { border-color: var(--accent); }
.wahl-knopf[aria-selected='true'] {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.wahl-knopf:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.wahl-name { font-weight: 600; font-size: 0.95rem; line-height: 1.25; overflow-wrap: break-word; hyphens: auto; }
.wahl-betrag { font-family: var(--serif); font-size: 1.3rem; line-height: 1.15; color: var(--ink); }

.varianten:not(.umschaltbar) .wahlleiste,
.varianten:not(.umschaltbar) .varianten-frage { display: none; }
.variante-kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.variante.erste .variante-kopf { padding-top: 0; border-top: 0; }
.variante-kopf strong { font-weight: 600; }
.variante-kopf span { font-family: var(--serif); font-size: 1.3rem; white-space: nowrap; }
.varianten.umschaltbar .variante-kopf { display: none; }
.variante-zusatz { margin: 0; }
.variante-marke {
  justify-self: start;
  margin: 0;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.3;
}

/* Die Zeichen sind gezeichnet, nicht geladen: ein SVG mit currentColor. Damit
   gibt es keine zweite Fassung für die Nacht, kein Nachladen und kein
   Aufblitzen beim Umschalten - und in jeder Größe eine saubere Kante. */

/* --- Fusszeile mit dem gelieferten Hintergrund ---------------------------- */
/* Das Bild steht nur unter der Startseite. Auf den Unterseiten waere es zuviel
   und wuerde vom Inhalt ablenken - dort bleibt die Fusszeile ruhig. */
.startseite .site-foot {
  --fuss-grund: image-set(url("/assets/img/grund-unten-tag.webp") type("image/webp") 1x,
                          url("/assets/img/grund-unten-tag.jpg") type("image/jpeg") 1x);
  --fuss-grund-schmal: image-set(url("/assets/img/grund-unten-schmal-tag.webp") type("image/webp") 1x,
                                 url("/assets/img/grund-unten-schmal-tag.jpg") type("image/jpeg") 1x);
  position: relative;
  isolation: isolate;
  /* Etwas mehr Luft nach oben, damit die Welle Platz hat. */
  padding-top: clamp(5rem, 11vw, 8rem);
}
/* Wie beim Kopfbereich: eigene Ebene mit Maske statt Hintergrund. Der obere
   Rand des Bildes loest sich dadurch wirklich auf, statt an einer Kante zu
   enden - die Farbwolken der Seite laufen ungestoert darunter durch. */
.startseite .site-foot::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--fuss-grund);
  background-size: cover;
  background-position: bottom center;
  background-repeat: no-repeat;
  --fuss-blende: clamp(4rem, 10vw, 7rem);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, #000 var(--fuss-blende));
          mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, #000 var(--fuss-blende));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .startseite .site-foot {
    --fuss-grund: image-set(url("/assets/img/grund-unten-nacht.webp") type("image/webp") 1x,
                            url("/assets/img/grund-unten-nacht.jpg") type("image/jpeg") 1x);
    --fuss-grund-schmal: image-set(url("/assets/img/grund-unten-schmal-nacht.webp") type("image/webp") 1x,
                                   url("/assets/img/grund-unten-schmal-nacht.jpg") type("image/jpeg") 1x);
  }
}
:root[data-theme='dark'] .startseite .site-foot {
  --fuss-grund: image-set(url("/assets/img/grund-unten-nacht.webp") type("image/webp") 1x,
                          url("/assets/img/grund-unten-nacht.jpg") type("image/jpeg") 1x);
  --fuss-grund-schmal: image-set(url("/assets/img/grund-unten-schmal-nacht.webp") type("image/webp") 1x,
                                 url("/assets/img/grund-unten-schmal-nacht.jpg") type("image/jpeg") 1x);
}
/* Handyansicht: eigener Ausschnitt der Vorlage im aufrechten Format
   (880x821, rechte Seite mit Blaettern und Welle). Das breite Bild passt dort
   nicht - anschneiden hiesse stark vergroessern, und legt man es als flaches
   Band unten hin, steht die halbe Fusszeile daneben statt darauf. Der
   Ausschnitt deckt die Fusszeile ganz ab, so wie am Rechner auch. */
/* Umgeschaltet wird an der Ebene selbst, nicht an der Variablen: die
   Nachtregeln stehen auf einem staerkeren Wahlausdruck und wuerden die
   Variable sonst wieder ueberschreiben. */
@media (max-width: 47.99rem) {
  .startseite .site-foot::before { background-image: var(--fuss-grund-schmal); }
}

/* Ohne Maskenunterstuetzung gar kein Bild - eine harte Kante waere schlimmer. */
@supports not ((-webkit-mask-image: linear-gradient(#000, transparent)) or
               (mask-image: linear-gradient(#000, transparent))) {
  .startseite .site-foot::before { content: none; }
}

/* --- Das Zeichen der Seite ------------------------------------------------ */
/* Es gibt zwei Fassungen: dunkles Gold fuer helle Flaechen, helles Gold fuer
   dunkle. Beide stehen im Quelltext, sichtbar ist immer nur eine. Ohne eigene
   Breite am Behaelter wuerde sich das Bild die ganze Zeile nehmen - deshalb
   hier eine Vorgabe und je Einsatzort eine Groesse. */
.logo-bild { display: inline-block; width: 2.25rem; vertical-align: middle; line-height: 0; }
.logo-bild picture { display: none; line-height: 0; }
.logo-bild .logo-tag { display: block; }
.logo-bild img { display: block; width: 100%; height: auto; }
.logo-bild.mark { width: 46px; }
.logo-bild.fuss { width: 38px; }
@media (max-width: 47.99rem) {
  .logo-bild.mark { width: 38px; }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .logo-bild .logo-tag { display: none; }
  :root:not([data-theme='light']) .logo-bild .logo-nacht { display: block; }
}
:root[data-theme='dark'] .logo-bild .logo-tag { display: none; }
:root[data-theme='dark'] .logo-bild .logo-nacht { display: block; }

/* Sehr schmale Handys: der Umschalter etwas kleiner, die Wahl in ganzen Zeilen
   (Name links, Preis rechts). Sonst brechen "Fortgeschritten" und
   "Einzelunterricht" mitten im Wort. */
@media (max-width: 24rem) {
  .stufe-knopf { font-size: 0.84rem; padding: 0.5rem 0.35rem; }
  .wahlleiste { grid-template-columns: 1fr; }
  .wahl-knopf {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 0.75rem;
    min-height: 56px;
  }
  .wahl-betrag { font-size: 1.2rem; }
}

/* Bricht die kleine Zeile ueber einer Ueberschrift am Handy um, bleibt der
   Strich vor der ersten Zeile stehen, statt zwischen beiden zu haengen. */
.kicker { align-items: flex-start; }
.kicker::before { flex: none; margin-top: 0.85em; margin-top: calc(0.5lh - 0.5px); }