/* =========================================================================
   HAPPY KIDS SALZSPIELPLATZ - Design System
   =========================================================================
   Doodle-Stil, mobile-first, ohne Framework, ohne externe Requests.
   Schriften liegen lokal unter /assets/fonts (DSGVO: kein Google-CDN).

   Kontrast-Hinweis
   ----------------
   Die hellen Markenfarben (--teal, --coral, --brown) erfuellen als
   Textfarbe die WCAG-Vorgaben NICHT. Fuer Text und Buttons gibt es
   deshalb abgedunkelte Varianten (--teal-ink, --coral-ink, --brown-ink).
   Alle Werte unten sind gegen --cream geprueft:
     --ink       auf --cream  = 12.9:1   (AAA)
     --teal-ink  auf --cream  =  4.9:1   (AA)
     --coral-ink auf --cream  =  4.9:1   (AA)
     --brown-ink auf --cream  =  6.0:1   (AA)
     #fff auf --teal-ink      =  5.0:1   (AA)
     #fff auf --coral-ink     =  5.0:1   (AA)
   Die hellen Toene sind ausschliesslich Dekoration (Raender, Flaechen,
   Doodles) und tragen nie Text.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Schriften
   ------------------------------------------------------------------------- */

@font-face {
  font-family: 'Quicksand';
  src: url('../fonts/quicksand-var-latin.woff2') format('woff2');
  font-weight: 300 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: 'Quicksand';
  src: url('../fonts/quicksand-var-latin-ext.woff2') format('woff2');
  font-weight: 300 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: 'Baloo 2';
  src: url('../fonts/baloo2-var-latin.woff2') format('woff2');
  font-weight: 400 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: 'Baloo 2';
  src: url('../fonts/baloo2-var-latin-ext.woff2') format('woff2');
  font-weight: 400 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;
}
@font-face {
  font-family: 'Pacifico';
  src: url('../fonts/pacifico-400-latin.woff2') format('woff2');
  font-weight: 400;
  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: 'Pacifico';
  src: url('../fonts/pacifico-400-latin-ext.woff2') format('woff2');
  font-weight: 400;
  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;
}

/* -------------------------------------------------------------------------
   2. Tokens
   ------------------------------------------------------------------------- */

:root {
  /* Flaechen */
  --peach: #fceae2;
  --peach-soft: #fff4ee;
  --peach-deep: #f8ded2;
  --cream: #fffdf8;
  --sand: #f5e6d3;

  /* Dekorative Markenfarben (nie als Textfarbe) */
  --teal: #5bb5a2;
  --coral: #ef8e7c;
  --pink: #f7c4b9;
  --brown: #a07e66;
  --rose: #e88ba0;
  --gold: #f0a93c;

  /* Textsichere Varianten */
  --teal-ink: #2e7c6c;
  --coral-ink: #be452d;
  --rose-ink: #b0455c;
  --gold-ink: #96640f;
  --brown-ink: #7a5b45;
  --ink: #5c4b42;
  --ink-soft: #7d6a5f;

  /* Raster */
  --wrap: 68rem;
  --gap: 1.25rem;
  --radius-sm: 0.875rem;
  --radius: 1.5rem;
  --radius-lg: 2rem;

  /* Schatten */
  --shadow-sm: 0 2px 8px rgba(92, 75, 66, 0.07);
  --shadow: 0 10px 26px rgba(92, 75, 66, 0.1);
  --shadow-lg: 0 18px 40px rgba(92, 75, 66, 0.14);

  /* Blob-Radius aus den Instagram-Visuals */
  --blob: 56% 44% 55% 45% / 54% 50% 50% 46%;
  --blob-alt: 45% 55% 48% 52% / 50% 46% 54% 50%;
}

/* -------------------------------------------------------------------------
   3. Reset und Grundlagen
   ------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  font-family: 'Quicksand', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.65;
  color: var(--ink);
  background:
    radial-gradient(ellipse 60rem 40rem at 50% -8rem, var(--peach-soft) 0%, rgba(255, 244, 238, 0) 60%),
    var(--peach);
  background-attachment: fixed;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

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

a {
  color: var(--teal-ink);
  text-decoration-thickness: 0.09em;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--coral-ink);
}

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

ul,
ol {
  padding-left: 1.2rem;
}

/* -------------------------------------------------------------------------
   4. Typografie
   ------------------------------------------------------------------------- */

h1,
h2,
h3,
h4 {
  font-family: 'Baloo 2', 'Quicksand', system-ui, sans-serif;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0 0 0.6em;
  color: var(--ink);
  text-wrap: balance;
}

h1 {
  font-weight: 800;
  font-size: clamp(2rem, 7.6vw, 3.4rem);
  text-transform: uppercase;
  color: var(--teal-ink);
}

h1 .accent {
  display: block;
  color: var(--coral-ink);
}

h2 {
  font-weight: 800;
  font-size: clamp(1.65rem, 6.2vw, 2.6rem);
  text-transform: uppercase;
  color: var(--teal-ink);
}

h3 {
  font-weight: 700;
  font-size: clamp(1.2rem, 4.4vw, 1.5rem);
  color: var(--coral-ink);
}

h4 {
  font-weight: 700;
  font-size: 1.08rem;
  color: var(--ink);
}

p {
  margin: 0 0 1rem;
  text-wrap: pretty;
}

.lead {
  font-size: 1.15rem;
  color: var(--ink-soft);
  max-width: 40ch;
}

.kicker {
  font-family: 'Pacifico', 'Baloo 2', cursive;
  font-size: clamp(1.15rem, 4.5vw, 1.5rem);
  color: var(--brown-ink);
  line-height: 1.2;
  margin: 0 0 0.35rem;
  transform: rotate(-1.5deg);
  transform-origin: left center;
}

.script {
  font-family: 'Pacifico', cursive;
  color: var(--teal-ink);
  font-size: clamp(1.35rem, 5.5vw, 2rem);
  line-height: 1.25;
}

/* Zentrierte Bereiche
   -------------------
   text-align: center allein reicht hier nicht, und das ist die Ursache
   fuer eine ganze Fehlerklasse gewesen:

     .lead    hat eine max-width und braucht zusaetzlich margin-inline:auto,
              sonst klebt der Absatz links.
     .btn-row ist ein Flex-Container. Textausrichtung greift darin nicht,
              es braucht justify-content: center.
     .kicker  ist um -1.5deg gedreht, mit Drehpunkt links. Zentriert muss
              die Drehung raus, sonst sitzt die Zeile schief.

   Deshalb stehen alle zentrierten Behaelter hier gemeinsam. Kommt ein
   neuer dazu, gehoert er in diese Liste, dann stimmt er sofort. */

.u-center,
.cta-band,
.error-page,
.jump {
  text-align: center;
}

:is(.u-center, .cta-band, .error-page, .jump) .kicker,
.u-center.kicker {
  transform: none;
}

:is(.u-center, .cta-band, .error-page, .jump) .lead,
.u-center.lead {
  margin-inline: auto;
}

:is(.u-center, .cta-band, .error-page, .jump) .btn-row {
  justify-content: center;
}

/* -------------------------------------------------------------------------
   5. Layout
   ------------------------------------------------------------------------- */

.wrap {
  width: min(100% - 2rem, var(--wrap));
  margin-inline: auto;
}

.section {
  padding-block: 3rem;
}

.section--tight {
  padding-block: 2rem;
}

.section--cream {
  background: var(--cream);
  border-block: 3px dashed var(--pink);
}

.section__head {
  margin-bottom: 1.75rem;
}

.grid {
  display: grid;
  gap: var(--gap);
}

.grid--2 {
  grid-template-columns: 1fr;
}

.grid--3 {
  grid-template-columns: 1fr;
}

.split {
  display: grid;
  gap: 1.75rem;
  align-items: center;
}

.stack > * + * {
  margin-top: 1rem;
}

/* -------------------------------------------------------------------------
   6. Skip-Link
   ------------------------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -100px;
  z-index: 200;
  background: var(--teal-ink);
  color: #fff;
  padding: 0.7rem 1.1rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 700;
  text-decoration: none;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 0;
  color: #fff;
}

/* -------------------------------------------------------------------------
   7. Kopfbereich und Navigation
   ------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 253, 248, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 3px dashed var(--pink);
}

.site-header__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  min-height: 4rem;
  padding-block: 0.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.brand img {
  width: 108px;
  height: 88px;
  object-fit: contain;
}

/* Ohne JavaScript waere der Umschalter wirkungslos, deshalb blendet ihn
   erst das Skript ein (es setzt .js auf <html>). Ohne JavaScript bleibt
   stattdessen die vollstaendige Navigation dauerhaft sichtbar. */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  min-width: 44px;
  padding: 0.5rem 0.9rem;
  border: 2px solid var(--teal-ink);
  border-radius: 999px;
  background: var(--cream);
  color: var(--teal-ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.nav-toggle__bars {
  position: relative;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: '';
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.nav-toggle__bars::before {
  top: -6px;
}

.nav-toggle__bars::after {
  top: 6px;
}

.js .nav-toggle {
  display: inline-flex;
}

.site-nav {
  display: block;
  flex-basis: 100%;
  padding-bottom: 1rem;
}

.js .site-nav {
  display: none;
}

.js .site-nav.is-open {
  display: block;
}

.site-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.25rem;
}

/* :not(.btn) ist wichtig: ohne diese Einschraenkung wuerde die hoehere
   Spezifitaet dieser Regel die Button-Farben im Menue ueberschreiben. */
.site-nav__list a:not(.btn) {
  display: block;
  padding: 0.75rem 1rem;
  min-height: 44px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}

.site-nav__list a:not(.btn):hover {
  background: var(--peach-soft);
  color: var(--coral-ink);
}

.site-nav__list a[aria-current='page']:not(.btn) {
  background: var(--peach);
  color: var(--teal-ink);
  box-shadow: inset 0 0 0 2px var(--teal);
}

.site-nav__cta {
  margin-top: 0.75rem;
}

.lang-switch {
  display: inline-flex;
  gap: 0.35rem;
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 2px dotted var(--pink);
  width: 100%;
}

.lang-switch a {
  padding: 0.45rem 0.85rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--ink-soft);
  border: 2px solid transparent;
}

.lang-switch a[aria-current='true'] {
  border-color: var(--teal-ink);
  color: var(--teal-ink);
}

/* -------------------------------------------------------------------------
   8. Buttons
   ------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.75rem 1.5rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn--nowrap {
  white-space: nowrap;
}

.btn--primary {
  background: var(--teal-ink);
  color: #fff;
  box-shadow: var(--shadow);
}

.btn--primary:hover {
  background: #256456;
  color: #fff;
}

.btn--coral {
  background: var(--coral-ink);
  color: #fff;
  box-shadow: var(--shadow);
}

.btn--coral:hover {
  background: #a53a25;
  color: #fff;
}

.btn--ghost {
  background: var(--cream);
  color: var(--teal-ink);
  border-color: var(--teal-ink);
}

.btn--ghost:hover {
  background: var(--peach-soft);
  color: var(--teal-ink);
}

.btn--block {
  width: 100%;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* -------------------------------------------------------------------------
   9. Pills, Badges, Ribbons
   ------------------------------------------------------------------------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  background: var(--cream);
  border: 2px solid var(--teal);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--teal-ink);
}

/* Pillen, die Links sind. Das Tippziel wird auf die geforderten 44 Pixel
   gebracht, dazu ein sichtbarer Zustand bei Hover und Tastaturfokus. */
/* Partnerbilder: freigestellte Figur vor einem Kreis in Markenfarbe.
   Die Figur steht auf dem Kreis, deshalb align-items: flex-end. Feste Hoehe
   und width/height am Bild verhindern, dass das Layout beim Laden springt. */
.partner-figur {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 210px;
  margin: 0 0 1rem;
}

.partner-figur::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: var(--peach-deep);
}

.partner-figur img {
  position: relative;
  width: auto;
  height: 100%;
  display: block;
}

a.pill {
  min-height: 44px;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

a.pill:hover,
a.pill:focus-visible {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}

a.pill--coral:hover,
a.pill--coral:focus-visible {
  background: var(--coral-ink);
  border-color: var(--coral-ink);
  color: #fff;
}

.pill--coral {
  border-color: var(--coral);
  color: var(--coral-ink);
}

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ribbon {
  display: inline-block;
  background: var(--coral-ink);
  color: #fff;
  font-family: 'Pacifico', cursive;
  font-size: clamp(1.1rem, 4.4vw, 1.4rem);
  padding: 0.45rem 1.4rem;
  border-radius: 0.7rem;
  transform: rotate(-1.5deg);
  box-shadow: 0 8px 18px rgba(190, 69, 45, 0.28);
}

.badge {
  display: inline-block;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: var(--teal-ink);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.badge--coral {
  background: var(--coral-ink);
}

/* -------------------------------------------------------------------------
   10. Karten
   ------------------------------------------------------------------------- */

.card {
  position: relative;
  background: var(--cream);
  border: 3px dashed var(--coral);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.35rem;
  box-shadow: var(--shadow-sm);
}

.card--teal {
  border-color: var(--teal);
}

.card--solid {
  border-style: solid;
  border-color: var(--pink);
}

.card--tint {
  background: var(--peach-soft);
}

.card > :last-child {
  margin-bottom: 0;
}

.card__icon {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  margin-bottom: 0.9rem;
}

.card__icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.card__icon--coral {
  background: var(--coral-ink);
}

.card__icon--brown {
  background: var(--brown-ink);
}

.card-link {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.card-link:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  color: inherit;
}

.card-link h3 {
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
}

/* -------------------------------------------------------------------------
   11. Fotos im Doodle-Blob
   ------------------------------------------------------------------------- */

.photo {
  position: relative;
  margin: 0;
}

.photo img {
  width: 100%;
  border-radius: var(--blob);
  border: 5px dashed var(--coral);
  background: var(--peach-deep);
  box-shadow: var(--shadow);
  object-fit: cover;
}

.photo--alt img {
  border-radius: var(--blob-alt);
  border-color: var(--teal);
}

.photo--soft img {
  border-radius: var(--radius-lg);
  border-style: solid;
  border-width: 4px;
}

.photo figcaption {
  margin-top: 0.6rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
  text-align: center;
}

/* -------------------------------------------------------------------------
   12. Hero
   ------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding-block: 2rem 2.5rem;
}

.hero__inner {
  display: grid;
  gap: 1.75rem;
}

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
}

/* Dekorative Punkte, rein per CSS (keine zusaetzlichen Requests) */
.deco-dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image:
    radial-gradient(circle, var(--coral) 0 5px, transparent 6px),
    radial-gradient(circle, var(--teal) 0 4px, transparent 5px),
    radial-gradient(circle, var(--brown) 0 3px, transparent 4px);
  background-repeat: no-repeat;
  background-position: 6% 12%, 92% 22%, 12% 82%;
  opacity: 0.5;
}

/* -------------------------------------------------------------------------
   13. Schrittfolge
   ------------------------------------------------------------------------- */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  counter-reset: step;
}

.steps > li {
  counter-increment: step;
  position: relative;
  background: var(--cream);
  border: 3px solid var(--pink);
  border-radius: var(--radius);
  padding: 1.15rem 1.2rem 1.15rem 3.9rem;
}

.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 1rem;
  top: 1.1rem;
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--teal-ink);
  color: #fff;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
}

.steps h3 {
  margin-bottom: 0.3rem;
  font-size: 1.1rem;
}

.steps p {
  margin: 0;
  color: var(--ink-soft);
}

/* -------------------------------------------------------------------------
   14. Checkliste
   ------------------------------------------------------------------------- */

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

.checklist li {
  position: relative;
  padding-left: 2rem;
}

.checklist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--teal-ink);
  /* Haken als Maske, damit kein zusaetzlicher Request noetig ist */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 78% no-repeat,
    linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 78% no-repeat,
    linear-gradient(#000, #000);
  mask-composite: exclude;
}

.checklist--coral li::before {
  background: var(--coral-ink);
}

/* Gegenteil-Liste: Was NICHT zutrifft. Sie braucht ein eigenes Zeichen,
   ein Haken in Rot laese sich immer noch als Zusage. Deshalb ein Kreuz. */
.checklist--nein li::before {
  background: var(--coral-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center / 70% no-repeat,
    linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center / 70% no-repeat,
    linear-gradient(#000, #000);
  mask-composite: exclude;
}

/* -------------------------------------------------------------------------
   15. Preistabellen
   ------------------------------------------------------------------------- */

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* "separate" statt "collapse" ist Absicht: nur damit greift border-radius
   zuverlaessig an der Tabelle selbst. Mit "collapse" braeuchte es
   overflow:hidden, und das schneidet die caption an der abgerundeten
   Ecke an (das "E" von "Eintritt" fehlte dann links). */
.price-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--cream);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.price-table caption {
  caption-side: top;
  text-align: left;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.25;
  color: var(--coral-ink);
  padding: 0 0.25rem 0.6rem;
}

.price-table th,
.price-table td {
  padding: 0.85rem 1rem;
  text-align: left;
  border-bottom: 2px dotted rgba(239, 142, 124, 0.4);
}

.price-table thead th {
  background: var(--peach-soft);
  font-family: 'Baloo 2', sans-serif;
  font-weight: 700;
  color: var(--teal-ink);
  border-bottom: 3px solid var(--pink);
}

.price-table thead th:first-child {
  border-top-left-radius: var(--radius);
}

.price-table thead th:last-child {
  border-top-right-radius: var(--radius);
}

.price-table tbody tr:last-child th,
.price-table tbody tr:last-child td {
  border-bottom: 0;
}

.price-table td:last-child,
.price-table th:last-child {
  text-align: right;
  white-space: nowrap;
  font-weight: 700;
  color: var(--coral-ink);
}

.price-table tbody th {
  font-weight: 600;
  color: var(--ink);
}

/* -------------------------------------------------------------------------
   16. Oeffnungszeiten
   ------------------------------------------------------------------------- */

.hours {
  margin: 0;
  display: grid;
  gap: 0.15rem;
}

/* Auf schmalen Displays gestapelt, sonst wuerden je nach Laenge des
   Wochentags manche Zeiten umbrechen und andere nicht. */
.hours__row {
  padding: 0.65rem 0;
  border-bottom: 2px dotted rgba(239, 142, 124, 0.4);
}

.hours__row:last-child {
  border-bottom: 0;
}

.hours dt {
  font-weight: 700;
}

.hours dd {
  margin: 0;
  color: var(--teal-ink);
  font-weight: 700;
}

@media (min-width: 30em) {
  .hours__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .hours dd {
    text-align: right;
  }
}

.hours__row--closed dd {
  color: var(--ink-soft);
}

/* -------------------------------------------------------------------------
   17. FAQ
   ------------------------------------------------------------------------- */

.faq {
  display: grid;
  gap: 0.75rem;
}

.faq details {
  background: var(--cream);
  border: 3px solid var(--pink);
  border-radius: var(--radius);
  overflow: hidden;
}

.faq details[open] {
  border-color: var(--teal);
}

.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem;
  min-height: 48px;
  cursor: pointer;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--teal-ink);
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: '';
  flex: 0 0 auto;
  width: 1.4rem;
  height: 1.4rem;
  margin-top: 0.15rem;
  background: var(--coral-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.2s ease;
}

.faq details[open] summary::after {
  transform: rotate(180deg);
}

.faq__body {
  padding: 0 1.15rem 1.15rem;
  border-top: 2px dotted rgba(239, 142, 124, 0.4);
  padding-top: 0.9rem;
}

.faq__body > :last-child {
  margin-bottom: 0;
}

/* -------------------------------------------------------------------------
   18. Hinweisbaender und Frida
   ------------------------------------------------------------------------- */

.note {
  background: var(--peach-soft);
  border: 3px dashed var(--teal);
  border-radius: var(--radius);
  padding: 1.15rem 1.25rem;
}

.note > :last-child {
  margin-bottom: 0;
}

.note--warn {
  border-color: var(--coral);
}

.frida-note {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 1rem;
  align-items: start;
  background: var(--cream);
  border: 3px dashed var(--coral);
  border-radius: var(--radius-lg);
  padding: 1.2rem;
}

.frida-note img {
  width: 4.5rem;
  height: auto;
}

.frida-note p {
  margin: 0;
}

.frida-note__name {
  font-family: 'Pacifico', cursive;
  color: var(--brown-ink);
  font-size: 1.05rem;
  margin-bottom: 0.2rem;
}

/* -------------------------------------------------------------------------
   19. Kontakt-Band
   ------------------------------------------------------------------------- */

.cta-band {
  background: var(--cream);
  border: 4px dashed var(--teal);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.35rem;
}

.cta-band h2 {
  margin-bottom: 0.5rem;
}

.cta-band .btn-row {
  margin-top: 1.25rem;
}

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

.contact-list a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 48px;
  padding: 0.75rem 1rem;
  background: var(--cream);
  border: 3px solid var(--pink);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  font-weight: 700;
}

.contact-list a:hover {
  border-color: var(--teal);
  color: var(--teal-ink);
}

.contact-list svg {
  width: 1.4rem;
  height: 1.4rem;
  flex: 0 0 auto;
  color: var(--teal-ink);
}

.contact-list small {
  display: block;
  font-weight: 500;
  color: var(--ink-soft);
}

/* -------------------------------------------------------------------------
   19b. Terminliste
   -------------------------------------------------------------------------
   Die Farbe links zeigt, fuer wen ein Termin gedacht ist. Sie ist reine
   Dekoration; welche Gruppe gemeint ist, steht zusaetzlich als Text im
   Etikett, damit die Information nicht allein an der Farbe haengt. */

.events__month + .events__month {
  margin-top: 2.5rem;
}

.events__month h2 {
  font-size: clamp(1.35rem, 5vw, 1.9rem);
  margin-bottom: 1rem;
}

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

.event {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: 1rem;
  align-items: start;
  background: var(--cream);
  border: 3px solid var(--pink);
  border-left-width: 8px;
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  /* Jeder Termin hat eine id und ist damit direkt verlinkbar. Ohne diesen
     Abstand landet er beim Sprung hinter dem feststehenden Kopfbereich. */
  scroll-margin-top: 6rem;
}

.event--erwachsen { border-left-color: var(--teal); }
.event--familie { border-left-color: var(--coral); }
.event--mama { border-left-color: var(--rose); }
.event--highlight { border-left-color: var(--gold); }

.event__date {
  margin: 0;
  text-align: center;
  line-height: 1.05;
}

.event__wd {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.event__day {
  display: block;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--teal-ink);
}

.event__day--range {
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}

.event__body > :last-child {
  margin-bottom: 0;
}

.event__body h3 {
  font-size: 1.08rem;
  margin-bottom: 0.2rem;
  color: var(--ink);
}

/* Uhrzeit direkt unter dem Titel. Sie wird von sync-event-schema.py aus
   data-time erzeugt, damit sichtbarer Text und Strukturdaten dasselbe
   sagen. Steht keine Zeit fest, fehlt die Zeile ganz. */
.event__time {
  margin-bottom: 0.25rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--teal-ink);
  font-variant-numeric: tabular-nums;
}

.event__sub {
  margin-bottom: 0.5rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* Buchungsknopf, ebenfalls von sync-event-schema.py erzeugt, aus
   data-buchung. Er steht als Letztes in der Kachel, weil er die Handlung
   ist und nicht die Beschreibung. */
.event__buchen {
  margin: 0.7rem 0 0;
}

/* Gegenstueck zum Knopf: Hier ist keine Anmeldung noetig. Bewusst als
   ruhiger Text und nicht als Knopf, denn es gibt nichts zu klicken. */
.event__frei {
  margin: 0.7rem 0 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--teal-ink);
}

.event__tag {
  display: inline-block;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
}

.event__tag--erwachsen { background: var(--teal-ink); }
.event__tag--familie { background: var(--coral-ink); }
.event__tag--mama { background: var(--rose-ink); }
.event__tag--highlight { background: var(--gold-ink); }

.event__tag--schwanger { background: var(--brown-ink); }

/* Naechster Termin in der Partnerkachel. Die Zeile steht zwischen Marke und
   Beschreibung, weil sie die konkreteste Information der Kachel ist. */
/* Mehrere Angebote einer Partnerin. Jedes bekommt einen eigenen Block statt
   alles in einen Satz zu packen: Lisa hat genau das zu Recht angemerkt. Die
   Liste traegt keine Aufzaehlungszeichen, damit sie neben den Karten mit nur
   einem Angebot nicht wie ein Fremdkoerper wirkt. */
.partner-angebote {
  list-style: none;
  margin: 0 0 0.85rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.partner-angebote li {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  border-left: 3px solid var(--peach-deep);
  padding-left: 0.85rem;
}

.partner-angebote strong {
  color: var(--teal-ink);
}

/* Ist der Name des Angebots verlinkt, fuehrt er direkt zur Buchung. Er soll
   deshalb erkennbar anklickbar sein, ohne die ruhige Optik zu stoeren. */
.partner-angebote strong a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.partner-angebote strong a:hover,
.partner-angebote strong a:focus-visible {
  color: var(--coral-ink);
}

/* Naechster Termin innerhalb eines einzelnen Angebots. Kuerzer als die
   Zeile oben in der Kachel, weil daneben schon der Kursname steht. Sie ist
   ein Flex-Element der Angebotszeile, deshalb wirkt hidden aus site.js. */
.partner-termin {
  margin-top: 0.15rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--teal-ink);
}

.partner-next {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.55rem;
  margin: 0 0 0.85rem;
  font-size: 0.95rem;
  color: var(--ink);
}

.partner-next__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal-ink);
}

.partner-next span[data-end] {
  font-weight: 600;
}

/* Dieselben Marken auf den Partnerkarten. Sie stehen dort direkt unter der
   Ueberschrift, weil sie diese naeher bestimmen. Katja traegt zwei, weil sie
   als Einzige sowohl fuer Familien als auch fuer Erwachsene anbietet. */
.partner-marken {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

/* Legende ueber der Liste */
.event-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
}

/* Vom Skript eingeblendet, wenn kein Termin mehr ansteht */
.events__empty {
  background: var(--peach-soft);
  border: 3px dashed var(--teal);
  border-radius: var(--radius);
  padding: 1.5rem 1.25rem;
  text-align: center;
}

.events__empty > :last-child {
  margin-bottom: 0;
}

@media (min-width: 40em) {
  .event {
    grid-template-columns: 4.75rem 1fr;
    padding: 1.15rem 1.4rem;
  }

  .event__day {
    font-size: 1.85rem;
  }

  .event__day--range {
    font-size: 1.4rem;
  }
}

/* -------------------------------------------------------------------------
   19c. WhatsApp-Sprungseite
   ------------------------------------------------------------------------- */

.jump {
  padding-block: 2rem 1rem;
}

.jump img {
  width: 8rem;
  margin: 0 auto 1.25rem;
}

.jump .btn {
  font-size: 1.1rem;
  padding: 1rem 2rem;
  min-height: 56px;
}


/* -------------------------------------------------------------------------
   19d. Preisrechner Kindergeburtstag
   -------------------------------------------------------------------------
   Ohne JavaScript waeren die Eingabefelder wirkungslos, deshalb erscheint
   der Rechner erst, wenn das Skript laeuft (es setzt .js auf <html>).
   Die Preise stehen als data-Attribute im HTML, nicht im Skript. So lassen
   sie sich dort aendern, wo auch die sichtbaren Preise stehen. */

.calc {
  display: none;
  background: var(--cream);
  border: 3px dashed var(--teal);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.35rem;
  margin-top: 1.75rem;
}

.js .calc {
  display: block;
}

.calc h3 {
  margin-bottom: 0.3rem;
}

.calc__grid {
  display: grid;
  gap: 0.9rem;
  margin: 1.25rem 0 1.5rem;
}

.calc__field {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.calc__field label {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
}

/* Feste Hoehe statt min-height: <select> und <input> leiten ihre Hoehe aus
   unterschiedlichen Standardwerten ab und werden mit Innenabstand allein
   nie exakt gleich hoch. */
.calc__field input,
.calc__field select {
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  background: var(--peach-soft);
  border: 2px solid var(--pink);
  border-radius: var(--radius-sm);
  height: 48px;
  padding: 0 0.85rem;
  width: 100%;
}

/* Eigener Pfeil, damit das Dropdown zum uebrigen Design passt statt in
   jedem Browser anders auszusehen. */
.calc__field select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23be452d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 1.1rem;
}

.calc__field input:focus-visible,
.calc__field select:focus-visible {
  border-color: var(--teal-ink);
}

.calc__out {
  border-top: 2px dotted var(--pink);
  padding-top: 1.25rem;
}

.calc__sum {
  display: block;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: clamp(1.9rem, 7vw, 2.6rem);
  line-height: 1.1;
  color: var(--teal-ink);
}

.calc__sum-label {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.15rem;
}

.calc__hint {
  margin-top: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--peach-soft);
  border-radius: var(--radius-sm);
  border-left: 5px solid var(--coral);
  font-size: 0.95rem;
}

.calc__hint[hidden] {
  display: none;
}

@media (min-width: 40em) {
  .calc {
    padding: 2rem 1.75rem;
  }

  .calc__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
  }
}


/* -------------------------------------------------------------------------
   20. Rechtstexte
   ------------------------------------------------------------------------- */

.legal {
  background: var(--cream);
  border: 3px solid var(--pink);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.25rem;
}

.legal h2 {
  font-size: clamp(1.25rem, 5vw, 1.6rem);
  margin-top: 2rem;
}

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

.legal h3 {
  font-size: 1.05rem;
  margin-top: 1.5rem;
}

.legal ul,
.legal ol {
  margin: 0 0 1rem;
}

.legal li {
  margin-bottom: 0.35rem;
}

.toc {
  background: var(--peach-soft);
  border: 3px dashed var(--teal);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.75rem;
}

.toc h2 {
  font-size: 1.1rem;
  margin: 0 0 0.6rem;
}

.toc ol {
  margin: 0;
  padding-left: 1.2rem;
}

.toc li {
  margin-bottom: 0.25rem;
}

address {
  font-style: normal;
}

/* -------------------------------------------------------------------------
   21. Brotkrumen
   ------------------------------------------------------------------------- */

.breadcrumb {
  padding-top: 1.25rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
}

.breadcrumb li + li::before {
  content: '›';
  margin-right: 0.4rem;
  color: var(--coral-ink);
}

/* -------------------------------------------------------------------------
   22. Fussbereich
   ------------------------------------------------------------------------- */

.site-footer {
  margin-top: 2rem;
  background: var(--cream);
  border-top: 4px dashed var(--pink);
  padding-block: 2.5rem 1.5rem;
}

.site-footer h2 {
  font-size: 1.1rem;
  color: var(--coral-ink);
  margin-bottom: 0.75rem;
}

.footer-grid {
  display: grid;
  gap: 1.75rem;
}

.footer-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.15rem;
}

.footer-nav a {
  display: inline-block;
  padding: 0.4rem 0;
  min-height: 44px;
  line-height: 1.7;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
}

.footer-nav a:hover {
  color: var(--coral-ink);
  text-decoration: underline;
}

.footer-bottom {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 2px dotted var(--pink);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.footer-bottom ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0;
  padding: 0;
}

/* -------------------------------------------------------------------------
   23. 404
   ------------------------------------------------------------------------- */

.error-page {
  padding-block: 3.5rem;
}

.error-page img {
  width: 9rem;
  margin: 0 auto 1.5rem;
}

.error-page .code {
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: clamp(4rem, 22vw, 8rem);
  line-height: 1;
  color: var(--pink);
  margin: 0;
}

/* -------------------------------------------------------------------------
   24. Hilfsklassen
   ------------------------------------------------------------------------- */

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

.u-mt-0 {
  margin-top: 0;
}

.u-mb-0 {
  margin-bottom: 0;
}

.u-small {
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.u-mt {
  margin-top: 1.25rem;
}

.u-mt-lg {
  margin-top: 1.75rem;
}

.footer-logo {
  width: 150px;
  height: auto;
  margin-bottom: 0.85rem;
}

/* -------------------------------------------------------------------------
   25. Breakpoints
   ------------------------------------------------------------------------- */

@media (min-width: 40em) {
  body {
    font-size: 1.09375rem;
  }

  .section {
    padding-block: 4rem;
  }

  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .card {
    padding: 1.75rem 1.6rem;
  }

  .cta-band {
    padding: 2.5rem 2rem;
  }

  .legal {
    padding: 2.25rem 2rem;
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .frida-note {
    grid-template-columns: 6rem 1fr;
  }

  .frida-note img {
    width: 6rem;
  }
}

@media (min-width: 60em) {
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .split {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }

  .split--wide-text {
    grid-template-columns: 1.15fr 1fr;
  }

  .split--reverse > :first-child {
    order: 2;
  }

  .hero {
    padding-block: 3.5rem 4rem;
  }

  .hero__inner {
    grid-template-columns: 1.05fr 1fr;
    gap: 3rem;
    align-items: center;
  }

  .steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 2.5rem;
  }

  .deco-dots {
    background-size: auto;
    opacity: 0.65;
  }
}

/* Navigation: erst ab 68em (rund 1088 px) waagerecht - darunter bliebe
   fuer sieben Eintraege plus Sprachumschalter zu wenig Platz. */
@media (min-width: 68em) {
  .site-header__bar {
    flex-wrap: nowrap;
    min-height: 5rem;
  }

  .brand img {
    width: 132px;
    height: 108px;
  }

  .nav-toggle,
  .js .nav-toggle {
    display: none;
  }

  .site-nav,
  .js .site-nav {
    display: flex;
    align-items: center;
    flex-basis: auto;
    margin-left: auto;
    padding-bottom: 0;
  }

  .site-nav__list {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.1rem;
  }

  .site-nav__list > li {
    flex: 0 0 auto;
  }

  .site-nav__list a:not(.btn) {
    padding: 0.5rem 0.6rem;
    font-size: 0.95rem;
    white-space: nowrap;
  }

  .site-nav__cta {
    margin: 0 0 0 0.35rem;
  }

  .site-nav__cta .btn {
    min-height: 44px;
    padding: 0.5rem 1.1rem;
    font-size: 0.92rem;
    white-space: nowrap;
  }

  .lang-switch {
    width: auto;
    margin: 0 0 0 0.5rem;
    padding: 0 0 0 0.6rem;
    border-top: 0;
    border-left: 2px dotted var(--pink);
  }

  .lang-switch a {
    min-height: 40px;
    padding: 0.35rem 0.55rem;
  }
}

@media (min-width: 75em) {
  :root {
    --wrap: 74rem;
  }
}

/* -------------------------------------------------------------------------
   26. Bewegung reduzieren
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .btn:hover,
  .card-link:hover {
    transform: none;
  }
}

/* -------------------------------------------------------------------------
   27. Hoher Kontrast
   ------------------------------------------------------------------------- */

@media (prefers-contrast: more) {
  :root {
    --ink-soft: #5c4b42;
  }

  .card,
  .steps > li,
  .faq details {
    border-color: var(--ink);
  }
}

/* -------------------------------------------------------------------------
   28. Druck
   ------------------------------------------------------------------------- */

@media print {
  .site-header,
  .site-footer,
  .cta-band,
  .skip-link,
  .breadcrumb,
  .deco-dots {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  .card,
  .legal,
  .price-table {
    border: 1px solid #999;
    box-shadow: none;
  }

  .faq details {
    border: 1px solid #999;
  }

  a[href^='http']::after {
    content: ' (' attr(href) ')';
    font-size: 9pt;
  }
}