/* ---------------------------------------------------------------------------
   Babymassage und Begleitung mit Melanie
   Warmes Papier, weiche Farbwolken, zwei Schriften, ein Akzent.
   --------------------------------------------------------------------------- */

@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: #F5EEE4;          /* Grundton der Seite, warm und ruhig */
  --card: #FDF8F1;           /* Karten und Felder */
  --tone: #EBDFD1;           /* abgesetzte Bänder */
  --ink: #2A2320;            /* Schrift */
  --muted: #5F5550;          /* zweite Ebene */
  --accent: #A9573C;         /* Terrakotta, der eine Akzent */
  --accent-text: #96492F;    /* derselbe Ton, für kleine Schrift */
  --accent-soft: #EEDCCE;    /* Akzent als Fläche */
  --leaf: #6E8467;           /* Salbei, nur für Zeichen */
  --line: #DFD1C0;
  --field-line: #867A6C;
  --focus: #2A2320;

  --wolke-1: rgba(198, 140, 108, 0.26);
  --wolke-2: rgba(142, 168, 134, 0.18);
  --wolke-3: rgba(206, 178, 148, 0.32);
  --schatten: 0 1px 2px rgba(42, 35, 32, 0.05), 0 8px 24px -12px rgba(42, 35, 32, 0.16);
  --schatten-stark: 0 2px 4px rgba(42, 35, 32, 0.05), 0 18px 40px -18px rgba(42, 35, 32, 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: #191614;
    --card: #211D1A;
    --tone: #221C19;
    --ink: #F2EBE4;
    --muted: #B9ADA4;
    --accent: #E2977A;
    --accent-text: #E8A88D;
    --accent-soft: #33231C;
    --leaf: #A6BD9C;
    --line: #332B27;
    --field-line: #7A6D63;
    --focus: #F2EBE4;

    --wolke-1: rgba(196, 118, 84, 0.16);
    --wolke-2: rgba(120, 150, 116, 0.13);
    --wolke-3: rgba(90, 72, 60, 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: #191614;
  --card: #211D1A;
  --tone: #221C19;
  --ink: #F2EBE4;
  --muted: #B9ADA4;
  --accent: #E2977A;
  --accent-text: #E8A88D;
  --accent-soft: #33231C;
  --leaf: #A6BD9C;
  --line: #332B27;
  --field-line: #7A6D63;
  --focus: #F2EBE4;

  --wolke-1: rgba(196, 118, 84, 0.16);
  --wolke-2: rgba(120, 150, 116, 0.13);
  --wolke-3: rgba(90, 72, 60, 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);
  --grund-schleier: linear-gradient(180deg, rgba(251, 247, 242, 0.38) 0%,
                    rgba(251, 247, 242, 0.14) 45%, rgba(251, 247, 242, 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;
  /* Hochkant auf schmalen Bildschirmen, quer ab Tablet. */
  background-image: var(--grund-hoch);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero::after { z-index: -1; background-image: var(--grund-schleier); }

@media (min-width: 48rem) {
  .hero::before { background-image: var(--grund-quer); }
}

/* Handyansicht: "cover" muesste das hohe Bild seitlich anschneiden und dafuer
   kraeftig vergroessern - dann sieht man die Punkte. Stattdessen liegt es in
   voller Breite oben, also so wenig vergroessert wie ueberhaupt moeglich. Die
   Ebene ist genau so hoch wie das Bild (Vorlage 941x1672); ist der Kopfbereich
   niedriger, wird unten abgeschnitten - die Maske blendet dort ohnehin aus. */
@media (max-width: 47.99rem) {
  .hero::before,
  .hero::after {
    bottom: auto;
    height: min(100%, calc(100vw * 1672 / 941));
    --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;
  }
}

/* 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, 16, 13, 0.5) 0%,
                      rgba(20, 16, 13, 0.32) 45%, rgba(20, 16, 13, 0.45) 100%);
    --hero-ton: #FBF5EE;
    --hero-leise: #E4D8CC;
    --hero-akzent: #E9B98D;
    --hero-knopf-flaeche: #FBF5EE;
    --hero-knopf-flaeche-hover: #E9B98D;
    --hero-knopf-schrift: #241C17;
    --hero-rand: rgba(246, 238, 230, 0.55);
    --hero-rand-schrift: #F6EEE6;
    --hero-rand-fuell: rgba(246, 238, 230, 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, 16, 13, 0.5) 0%,
                      rgba(20, 16, 13, 0.32) 45%, rgba(20, 16, 13, 0.45) 100%);
  --hero-ton: #FBF5EE;
  --hero-leise: #E4D8CC;
  --hero-akzent: #E9B98D;
  --hero-knopf-flaeche: #FBF5EE;
  --hero-knopf-flaeche-hover: #E9B98D;
  --hero-knopf-schrift: #241C17;
  --hero-rand: rgba(246, 238, 230, 0.55);
  --hero-rand-schrift: #F6EEE6;
  --hero-rand-fuell: rgba(246, 238, 230, 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"); }
  }
}

.hero-inner { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 62rem) {
  .hero-inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 3.5rem; }
}

.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); }

.hero-logo { display: flex; justify-content: center; }
.hero-logo .logo-bild {
  width: clamp(10rem, 26vw, 17rem);
  height: auto;
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.45));
}
@media (max-width: 62rem) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-logo { order: -1; }
  .hero-logo .logo-bild { width: clamp(7.5rem, 34vw, 11rem); }
}

/* 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, #FBF5EE);
  border-color: var(--hero-knopf-flaeche, #FBF5EE);
  color: var(--hero-knopf-schrift, #241C17);
}
.btn-hell:hover {
  background: var(--hero-knopf-flaeche-hover, #E9B98D);
  border-color: var(--hero-knopf-flaeche-hover, #E9B98D);
  color: var(--hero-knopf-schrift, #241C17);
}
.btn-rand {
  background: transparent;
  border-color: var(--hero-rand, rgba(246, 238, 230, 0.55));
  color: var(--hero-rand-schrift, #F6EEE6);
  box-shadow: none;
}
.btn-rand:hover {
  background: var(--hero-rand-fuell, rgba(246, 238, 230, 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; }
.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);
}
.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;
}

/* Sehr schmale Handys: die Wahl in ganzen Zeilen (Name links, Preis rechts),
   sonst brechen laengere Namen mitten im Wort. */
@media (max-width: 24rem) {
  .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; }
}

/* --- Zeichen als Bild, Tag- und Nachtfassung ------------------------------ */
/* Beide Fassungen stehen im Quelltext; sichtbar ist immer nur eine. So passt
   das Zeichen sofort zur eingestellten Ansicht, ohne Nachladen und ohne
   Aufblitzen beim Umschalten. */
.zeichen-bild { display: inline-flex; width: 72px; height: 72px; }
.benefit .zeichen.zeichen-bild { width: 72px; height: 72px; background: none; }
.zeichen-bild picture {
  display: none;
  flex: none;
  box-sizing: border-box;
  width: 72px;
  height: 72px;
  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;
}
.zeichen-bild img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 20%;
  object-fit: contain;
}
/* 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. */
.zeichen-bild .zeichen-tag {
  --icon-rand: #C28C71;
  --icon-grund: #EED5C5;
  --icon-glanz: rgb(255 255 255 / 65%);
  display: block;
}
.zeichen-bild .zeichen-nacht {
  --icon-rand: #AA775E;
  --icon-grund: #362019;
  --icon-glanz: rgb(255 209 178 / 18%);
}

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

/* --- 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; }
}

/* --- Logo, Tag- und Nachtfassung ----------------------------------------- */
/* Ohne eigene Breite bliebe der Behaelter als Inline-Element unbestimmt und
   das Bild wuerde sich die ganze Zeile nehmen - deshalb hier eine Vorgabe. */
.logo-bild { display: inline-block; width: 2.25rem; vertical-align: middle; }
.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.gross { display: block; width: auto; }   /* Breite kommt von .hero-logo */

@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; }

/* Im Kopfbereich steht das Logo immer auf dem Bild - dort gilt die Nachtfassung
   nur, wenn die ganze Seite dunkel ist; das regelt schon die Regel darueber. */

/* Groessen der beiden kleinen Logos. Vorher stand die Breite am img selbst -
   jetzt am Behaelter, weil darin zwei Fassungen uebereinanderliegen. */
.logo-bild.mark { width: 42px; }
.logo-bild.fuss { width: 36px; }
@media (max-width: 47.99rem) {
  .logo-bild.mark { width: 34px; }
}

/* 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); }