/* =====================================================================
   Orameda: Design-System im Duolingo-Stil
   Reines CSS, alle Farben als HSL-Tokens (hsl(var(--token))).
   Aufbau: 1 Tokens · 2 Basis · 3 Layout · 4 Primitiven · 5 Komponenten
           6 Seiten · 7 Bewegung / Barrierefreiheit
   ===================================================================== */

/* ---------- 0 Schrift (selbst gehostet, kein Drittanbieter-Aufruf): Montserrat für Titel, Inter für Text ---------- */
@font-face {
  font-family: "Montserrat"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("../assets/fonts/montserrat-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Montserrat"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("../assets/fonts/montserrat-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("../assets/fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("../assets/fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 1 Tokens ---------- */
:root {
  /* Farbfamilien: Fläche / Kante / Text auf der Fläche (Ink) / Text auf Hell / sanfter Hintergrund / Linie.
     Palette der Plattform: EKG-Grün aus der Pulslinie des Logos, Tiefgrün, Mint und Türkis. Alle Töne bleiben im Grünbereich. */
  --green: 163 100% 45%;        /* EKG-Grün #00E5A3 */
  --green-edge: 162 100% 33%;   /* #00A876 */
  --green-ink: 164 76% 10%;     /* Tiefgrün #062C22 */
  --green-text: 163 94% 24%;    /* Smaragd als Schrift auf Hell #047857 */
  --green-soft: 141 84% 93%;    /* #DCFCE7 */
  --green-line: 152 60% 80%;

  --blue: 172 66% 50%;          /* Türkis als zweiter Akzent */
  --blue-edge: 175 84% 32%;
  --blue-ink: 176 80% 10%;
  --blue-text: 163 94% 24%;
  --blue-soft: 166 76% 94%;
  --blue-line: 168 55% 80%;

  --orange: 162 100% 39%;       /* mittleres Grün #00C98C */
  --orange-edge: 162 100% 30%;
  --orange-ink: 164 76% 10%;
  --orange-text: 163 88% 20%;
  --orange-soft: 150 80% 95%;
  --orange-line: 156 60% 80%;

  --yellow: 158 100% 71%;       /* helles Mint #6BFFCF für Licht und Schein */
  --yellow-edge: 162 100% 36%;
  --yellow-ink: 164 76% 10%;
  --yellow-soft: 152 100% 95%;

  --pink: 156 70% 72%;
  --pink-edge: 160 70% 40%;
  --pink-ink: 164 76% 10%;
  --pink-text: 163 94% 24%;
  --pink-soft: 145 70% 95%;
  --pink-line: 152 55% 84%;

  --red: 2 85% 70%;
  --red-edge: 2 60% 54%;
  --red-ink: 0 80% 12%;
  --red-text: 0 70% 38%;
  --red-soft: 0 85% 96%;

  --purple: 164 76% 14%;        /* Tiefgrün als dunkle Kachel */
  --purple-edge: 164 76% 8%;
  --purple-ink: 163 100% 45%;
  --purple-text: 164 76% 14%;
  --purple-soft: 150 45% 93%;
  --purple-line: 155 35% 80%;

  --grass: 163 90% 45%;
  --grass-edge: 162 100% 30%;
  --yellow-line: 155 70% 82%;
  --teal: 170 85% 44%;          /* Türkis der Pfad-Füllung */
  --logo-navy: 164 76% 10%;
  --teal-edge: 172 100% 28%;
  --teal-ink: 175 100% 8%;
  --teal-soft: 168 70% 94%;
  --teal-line: 168 50% 78%;

  --wool: 40 55% 95%;
  --navy: 164 76% 10%;          /* Titel in Tiefgrün */
  --navy-2: 164 50% 18%;
  --night: 164 70% 11%;
  --night-2: 164 45% 17%;

  --ink: 215 25% 27%;           /* Fliesstext */
  --ink-soft: 215 19% 35%;      /* Sekundärtext, > 7:1 auf Mint */
  --line: 152 60% 86%;
  --line-strong: 154 40% 74%;
  --bg: 138 76% 97%;            /* Mint #F0FDF4 */
  --bg-soft: 143 70% 94%;
  --focus: 164 76% 10%;

  --r-sm: 12px;
  --r: 16px;
  --r-lg: 28px;
  --r-xl: 40px;
  --edge: 0px;                  /* weiche Schatten statt harter Kanten */

  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ekg: #00e5a3;
  --deep: #062c22;
  --mint: #f0fdf4;
  --header-h: 72px;
  --container: 1200px;
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.6;
  color: hsl(var(--ink));
  background: hsl(var(--bg));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0 0 0.5em; font-weight: 900; line-height: 1.12; color: hsl(var(--navy)); letter-spacing: -0.012em; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 1.2rem + 4.6vw, 3.9rem); }
h2 { font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.7rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem); line-height: 1.2; }
h4 { font-size: 1.05rem; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
img, svg { display: block; max-width: 100%; }
a { color: hsl(var(--blue-text)); font-weight: 800; text-underline-offset: 0.2em; text-decoration-thickness: 2px; }
a:hover { color: hsl(var(--navy)); }
strong { font-weight: 900; color: hsl(var(--navy)); }
button { font: inherit; }
hr { border: 0; border-top: 2px solid hsl(var(--line)); margin: 2rem 0; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
[hidden] { display: none !important; }
address { font-style: normal; }
::selection { background: hsl(var(--green) / 0.35); }

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

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -80px; z-index: 200; padding: 0.8rem 1.2rem; background: hsl(var(--navy)); color: #fff; border-radius: var(--r); transition: top 0.2s; }
.skip-link:focus { top: 12px; color: #fff; }

.icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.icon--lg { width: 1.75em; height: 1.75em; }
.icon--xl { width: 2.2em; height: 2.2em; }

/* ---------- 3 Layout ---------- */
.container { width: min(100% - 40px, var(--container)); margin-inline: auto; }
.container--narrow { width: min(100% - 40px, 780px); margin-inline: auto; }

.section { padding-block: clamp(3.5rem, 2rem + 5.6vw, 6rem); }
.section--soft { background: hsl(var(--bg-soft)); border-block: 2px solid hsl(var(--line)); }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4rem); }
.section__head { max-width: 720px; margin-bottom: clamp(2rem, 1rem + 3vw, 3.25rem); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head p { font-size: 1.15rem; color: hsl(var(--ink-soft)); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem;
  font-size: 0.85rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; color: hsl(var(--blue-text));
}
.eyebrow--green { color: hsl(var(--green-text)); }
.eyebrow--orange { color: hsl(var(--orange-text)); }
.lead { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem); color: hsl(var(--ink-soft)); line-height: 1.55; }

.grid { display: grid; gap: clamp(1.5rem, 0.6rem + 2.6vw, 2.75rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 245px), 1fr)); }
.stack > * + * { margin-top: 1rem; }
.cluster { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }
.center { text-align: center; }

/* ---------- 4 Primitiven ---------- */

/* 4.1 Tactile 3D-Button */
.btn {
  --face: var(--green); --edge-c: var(--green-edge); --on: var(--green-ink);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 52px; padding: 0.8rem 1.6rem;
  border: 2px solid hsl(var(--face)); border-radius: var(--r);
  background: hsl(var(--face)); color: hsl(var(--on));
  font-size: 0.95rem; font-weight: 900; letter-spacing: 0.07em; text-transform: uppercase; text-decoration: none; text-align: center; line-height: 1.2;
  cursor: pointer; user-select: none;
  box-shadow: 0 var(--edge) 0 hsl(var(--edge-c));
  transform: translateY(0);
  transition: transform 0.09s ease, box-shadow 0.09s ease, filter 0.15s ease;
}
.btn:hover { color: hsl(var(--on)); filter: brightness(1.06); }
.btn:active, .btn.is-pressed { transform: translateY(var(--edge)); box-shadow: 0 0 0 hsl(var(--edge-c)); }
.btn--blue { --face: var(--blue); --edge-c: var(--blue-edge); --on: var(--blue-ink); }
.btn--orange { --face: var(--orange); --edge-c: var(--orange-edge); --on: var(--orange-ink); }
.btn--yellow { --face: var(--yellow); --edge-c: var(--yellow-edge); --on: var(--yellow-ink); }
.btn--purple { --face: var(--purple); --edge-c: var(--purple-edge); --on: var(--purple-ink); }
.btn--pink { --face: var(--pink); --edge-c: var(--pink-edge); --on: var(--pink-ink); }
.btn--white { --face: 0 0% 100%; --edge-c: var(--line-strong); --on: var(--blue-text); border-color: hsl(var(--line-strong)); }
.btn--white:hover { filter: none; background: hsl(var(--bg-soft)); }
.btn--ghost { --face: 0 0% 100% / 0; --edge-c: 0 0% 0% / 0; --on: var(--blue-text); border-color: transparent; box-shadow: none; background: transparent; }
.btn--ghost:hover { background: hsl(var(--blue-soft)); filter: none; }
.btn--ghost:active { transform: none; }
.btn--sm { min-height: 44px; padding: 0.55rem 1.1rem; font-size: 0.85rem; --edge: 3px; }
.btn--lg { min-height: 58px; padding: 1rem 2rem; font-size: 1.02rem; }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] {
  --face: var(--line); --edge-c: var(--line-strong); --on: var(--ink-soft);
  border-color: hsl(var(--line)); cursor: not-allowed; filter: none;
}
.btn[disabled]:active, .btn[aria-disabled="true"]:active { transform: none; box-shadow: 0 var(--edge) 0 hsl(var(--edge-c)); }
.btn .icon { width: 1.3em; height: 1.3em; }

/* 4.2 Karte */
.card {
  position: relative; background: #fff; border: 2px solid hsl(var(--line)); border-radius: var(--r-lg);
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.5rem); box-shadow: 0 var(--edge) 0 hsl(var(--line));
}
.card--soft { background: hsl(var(--bg-soft)); box-shadow: none; }
.card--green { background: hsl(var(--green-soft)); border-color: hsl(var(--green-line)); box-shadow: 0 var(--edge) 0 hsl(var(--green-line)); }
.card--blue { background: hsl(var(--blue-soft)); border-color: hsl(var(--blue-line)); box-shadow: 0 var(--edge) 0 hsl(var(--blue-line)); }
.card--orange { background: hsl(var(--orange-soft)); border-color: hsl(var(--orange-line)); box-shadow: 0 var(--edge) 0 hsl(var(--orange-line)); }
.card--pink { background: hsl(var(--pink-soft)); border-color: hsl(var(--pink-line)); box-shadow: 0 var(--edge) 0 hsl(var(--pink-line)); }
.card--link { display: block; color: inherit; text-decoration: none; transition: transform 0.15s var(--ease-bounce), box-shadow 0.15s; }
.card--link:hover { transform: translateY(-3px); box-shadow: 0 calc(var(--edge) + 3px) 0 hsl(var(--line)); color: inherit; }
.card--link:active { transform: translateY(var(--edge)); box-shadow: 0 0 0 hsl(var(--line)); }
.card h3 { margin-bottom: 0.4em; }
.card > :last-child { margin-bottom: 0; }

/* 4.3 Icon-Kachel */
.tile {
  --face: var(--green); --edge-c: var(--green-edge); --on: var(--green-ink);
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; flex: none;
  background: hsl(var(--face)); color: hsl(var(--on)); box-shadow: 0 4px 0 hsl(var(--edge-c));
}
.tile .icon { width: 30px; height: 30px; }
.tile--blue { --face: var(--blue); --edge-c: var(--blue-edge); --on: var(--blue-ink); }
.tile--orange { --face: var(--orange); --edge-c: var(--orange-edge); --on: var(--orange-ink); }
.tile--yellow { --face: var(--yellow); --edge-c: var(--yellow-edge); --on: var(--yellow-ink); }
.tile--purple { --face: var(--purple); --edge-c: var(--purple-edge); --on: var(--purple-ink); }
.tile--teal { --face: var(--teal); --edge-c: var(--teal-edge); --on: var(--teal-ink); }
.tile--pink { --face: var(--pink); --edge-c: var(--pink-edge); --on: var(--pink-ink); }
.tile--red { --face: var(--red); --edge-c: var(--red-edge); --on: var(--red-ink); }
.tile--sm { width: 48px; height: 48px; border-radius: 15px; }
.tile--sm .icon { width: 24px; height: 24px; }

/* 4.4 Badge */
.badge {
  display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.8rem;
  border: 2px solid hsl(var(--line)); border-radius: 999px; background: #fff;
  font-size: 0.78rem; font-weight: 900; letter-spacing: 0.07em; text-transform: uppercase; color: hsl(var(--ink-soft)); line-height: 1.3;
}
.badge .icon { width: 1.15em; height: 1.15em; }
.badge--green { background: hsl(var(--green-soft)); border-color: hsl(var(--green-line)); color: hsl(var(--green-text)); }
.badge--blue { background: hsl(var(--blue-soft)); border-color: hsl(var(--blue-line)); color: hsl(var(--blue-text)); }
.badge--orange { background: hsl(var(--orange-soft)); border-color: hsl(var(--orange-line)); color: hsl(var(--orange-text)); }
.badge--purple { background: hsl(var(--purple-soft)); border-color: hsl(var(--purple-line)); color: hsl(var(--purple-text)); }
.badge--teal { background: hsl(var(--teal-soft)); border-color: hsl(var(--teal-line)); color: hsl(175 100% 15%); }
.badge--pink { background: hsl(var(--pink-soft)); border-color: hsl(var(--pink-line)); color: hsl(var(--pink-text)); }

/* 4.5 Chip / Filter */
.chip {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0.5rem 1.1rem;
  border: 2px solid hsl(var(--line-strong)); border-radius: 999px; background: #fff; color: hsl(var(--ink-soft));
  font-weight: 800; font-size: 0.9rem; cursor: pointer; box-shadow: 0 3px 0 hsl(var(--line-strong));
  transition: transform 0.08s, box-shadow 0.08s, background 0.15s;
}
.chip:hover { background: hsl(var(--bg-soft)); }
.chip:active { transform: translateY(3px); box-shadow: none; }
a.chip { text-decoration: none; }
.chip[aria-pressed="true"], .chip[aria-selected="true"], .chip[aria-current="page"] { background: hsl(var(--blue-soft)); border-color: hsl(var(--blue)); color: hsl(var(--blue-text)); box-shadow: 0 3px 0 hsl(var(--blue)); }

/* 4.6 ProgressBar (Duolingo-Streifen) */
.progress { position: relative; height: 16px; border-radius: 999px; background: hsl(var(--line)); overflow: hidden; }
.progress__bar {
  position: relative; height: 100%; width: var(--value, 0%); border-radius: inherit; background: hsl(var(--green));
  transition: width 0.6s var(--ease-bounce);
}
.progress__bar::after { content: ""; position: absolute; left: 10px; right: 10px; top: 4px; height: 4px; border-radius: 999px; background: hsl(0 0% 100% / 0.35); }
.progress--blue .progress__bar { background: hsl(var(--blue)); }
.progress--thin { height: 12px; }
.progress-label { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; font-size: 0.82rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; color: hsl(var(--ink-soft)); }

/* 4.7 RingMeter */
.ring { --size: 168px; --track: var(--line); --bar: var(--green); position: relative; width: var(--size); height: var(--size); flex: none; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring__track { fill: none; stroke: hsl(var(--track)); stroke-width: 12; }
.ring__bar {
  fill: none; stroke: hsl(var(--bar)); stroke-width: 12; stroke-linecap: round;
  stroke-dasharray: 326.73; stroke-dashoffset: 326.73;
  transition: stroke-dashoffset 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.ring.is-in .ring__bar, html:not(.js) .ring__bar { stroke-dashoffset: calc(326.73 * (1 - var(--pct, 0) / 100)); }
.ring__label { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.05; }
.ring__value { font-size: calc(var(--size) * 0.27); font-weight: 900; color: inherit; letter-spacing: -0.02em; }
.ring__unit { font-size: 0.72rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.8; margin-top: 0.2rem; }

/* 4.8 Sprechblase */
.bubble {
  position: relative; display: inline-block; padding: 0.8rem 1.2rem; background: #fff; border: 2px solid hsl(var(--line-strong));
  border-radius: var(--r-lg); font-weight: 800; color: hsl(var(--navy)); box-shadow: 0 3px 0 hsl(var(--line-strong));
}
.bubble::after, .bubble::before { content: ""; position: absolute; left: var(--tail, 28px); border: 10px solid transparent; }
.bubble::before { top: 100%; border-top-color: hsl(var(--line-strong)); }
.bubble::after { top: calc(100% - 3px); border-top-color: #fff; }
.bubble--up::before, .bubble--up::after { top: auto; }
.bubble--up::before { bottom: 100%; border-top-color: transparent; border-bottom-color: hsl(var(--line-strong)); }
.bubble--up::after { bottom: calc(100% - 3px); border-top-color: transparent; border-bottom-color: #fff; }

/* 4.9 Formularfelder */
.field { display: grid; gap: 0.4rem; }
.field__label { font-weight: 900; font-size: 0.95rem; color: hsl(var(--navy)); }
.field__hint { font-size: 0.88rem; font-weight: 600; color: hsl(var(--ink-soft)); }
.input, .select, .textarea {
  width: 100%; min-height: 54px; padding: 0.8rem 1rem; border: 2px solid hsl(var(--line-strong)); border-radius: var(--r);
  background: hsl(var(--bg-soft)); color: hsl(var(--ink)); font: inherit; font-weight: 700;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.textarea { min-height: 132px; resize: vertical; line-height: 1.5; }
.input::placeholder, .textarea::placeholder { color: hsl(25 6% 42%); font-weight: 600; }
.input:hover, .select:hover, .textarea:hover { background: #fff; }
.input:focus, .select:focus, .textarea:focus { outline: none; background: #fff; border-color: hsl(var(--blue)); box-shadow: 0 0 0 4px hsl(var(--blue) / 0.25); }
.select { appearance: none; padding-right: 3rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23525252' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 18px; }
.field.has-error .input, .field.has-error .select, .field.has-error .textarea { border-color: hsl(var(--red-edge)); background: hsl(var(--red-soft)); }
.field__error { display: none; align-items: center; gap: 0.4rem; font-size: 0.88rem; font-weight: 800; color: hsl(var(--red-text)); }
.field.has-error .field__error { display: flex; }
.check { display: flex; gap: 0.8rem; align-items: flex-start; font-weight: 700; font-size: 0.95rem; line-height: 1.45; }
.check input { flex: none; width: 24px; height: 24px; margin: 0.1rem 0 0; accent-color: hsl(var(--green-edge)); }

/* 4.10 Auswahl-Karten (Radio) */
.options { display: grid; gap: 0.9rem; }
.options--row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.option { position: relative; display: block; cursor: pointer; }
.option input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.option__body {
  display: flex; align-items: center; gap: 1rem; height: 100%; padding: 1rem 1.15rem; background: #fff;
  border: 2px solid hsl(var(--line-strong)); border-radius: var(--r-lg); box-shadow: 0 var(--edge) 0 hsl(var(--line-strong));
  transition: transform 0.08s, box-shadow 0.08s, background 0.15s, border-color 0.15s;
}
.option:hover .option__body { background: hsl(var(--bg-soft)); }
.option input:active + .option__body { transform: translateY(var(--edge)); box-shadow: none; }
.option input:checked + .option__body { background: hsl(var(--blue-soft)); border-color: hsl(var(--blue)); box-shadow: 0 var(--edge) 0 hsl(var(--blue)); }
.option input:focus-visible + .option__body { outline: 3px solid hsl(var(--focus)); outline-offset: 3px; }
.option__title { display: block; font-weight: 900; font-size: 1.05rem; color: hsl(var(--navy)); line-height: 1.25; }
.option__text { display: block; font-size: 0.9rem; font-weight: 600; color: hsl(var(--ink-soft)); line-height: 1.4; margin-top: 0.15rem; }
.option input:checked + .option__body .option__title { color: hsl(var(--blue-text)); }

/* 4.11 Check-Liste */
.checklist { list-style: none; display: grid; gap: 0.75rem; }
.checklist li { display: flex; gap: 0.75rem; align-items: flex-start; font-weight: 700; }
.checklist .icon { width: 26px; height: 26px; padding: 4px; margin-top: 0.05rem; border-radius: 50%; background: hsl(var(--green)); color: hsl(var(--green-ink)); stroke-width: 3.5; }
.checklist--no .icon { background: hsl(var(--red)); color: hsl(var(--red-ink)); }

/* ---------- 5 Komponenten ---------- */

/* 5.1 Header & Navigation */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 100; border-bottom: 2px solid hsl(var(--line)); }
/* Blur im Pseudo-Element: backdrop-filter am Header selbst würde ihn zum Bezugsrahmen für das fixierte Mobile-Menü machen. */
.site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: hsl(var(--bg) / 0.94); backdrop-filter: saturate(1.6) blur(10px); -webkit-backdrop-filter: saturate(1.6) blur(10px); }
.site-header__inner { display: flex; align-items: center; gap: 0.85rem; height: var(--header-h); }

/* 5.0 Orameda-Logo
   Die offizielle Wortmarke liegt als zwei Alpha-Masken vor (assets/logo): Buchstaben und Pulslinie.
   Die Farben kommen aus den Tokens, deshalb wirkt das Logo auf hellen und dunklen Flächen mit vollem Kontrast.
   Hell: Navy-Buchstaben, Teal-Edge-Pulslinie. Dunkel (.on-dark, .brand-logo--light, Ladebildschirm): weiss und Original-Türkis. */
.logo { display: inline-flex; align-items: center; margin-right: auto; text-decoration: none; line-height: 0; border-radius: 12px; }
.brand-logo {
  --logo-ink: hsl(var(--navy));
  --logo-pulse: hsl(var(--teal-edge));
  position: relative; display: block; flex: none; height: var(--logo-h, 2.35rem); aspect-ratio: 933 / 187;
}
.on-dark .brand-logo, .brand-logo--light { --logo-ink: #fff; --logo-pulse: hsl(var(--teal)); }
.brand-logo__letters, .brand-logo__pulse { position: absolute; inset: 0; }
/* Fallback ohne Masken-Unterstützung: Schriftzug */
.brand-logo::after { content: "ORAMEDA"; position: absolute; inset: 0; display: flex; align-items: center; font-weight: 900; letter-spacing: 0.04em; color: var(--logo-ink); font-size: calc(var(--logo-h, 2.35rem) * 0.7); line-height: 1; }
@supports ((-webkit-mask-image: url("x.png")) or (mask-image: url("x.png"))) {
  .brand-logo::after { content: none; }
  .brand-logo__letters { background: var(--logo-ink); -webkit-mask: url("../assets/logo/orameda-letters.png") center / 100% 100% no-repeat; mask: url("../assets/logo/orameda-letters.png") center / 100% 100% no-repeat; }
  .brand-logo__pulse { background: var(--logo-pulse); -webkit-mask: url("../assets/logo/orameda-pulse.png") center / 100% 100% no-repeat; mask: url("../assets/logo/orameda-pulse.png") center / 100% 100% no-repeat; }
}
.brand-logo--xs { --logo-h: 1.25rem; }
.site-footer .brand-logo { --logo-h: 2.75rem; }
@media (max-width: 480px) { .site-header .brand-logo { --logo-h: 1.9rem; } }

@keyframes logo-letters-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes logo-pulse-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes logo-pulse-loop { 0% { clip-path: inset(0 100% 0 0); opacity: 1; } 55%, 80% { clip-path: inset(0 0 0 0); opacity: 1; } 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
@keyframes logo-beat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.035); } 24% { transform: scale(1); } 36% { transform: scale(1.02); } 48% { transform: scale(1); } }
.brand-logo.is-drawing .brand-logo__letters { animation: logo-letters-in 0.45s ease-out both; }
.brand-logo.is-drawing .brand-logo__pulse { animation: logo-pulse-draw 0.7s cubic-bezier(0.4, 0.1, 0.2, 1) 0.2s both; }
.brand-logo.is-loading .brand-logo__pulse { animation: logo-pulse-loop 1.4s ease-in-out infinite; }
.form-status .brand-logo { display: inline-block; vertical-align: middle; margin-right: 0.6rem; }

/* 5.0.1 Ladebildschirm: erster Aufruf pro Sitzung, bricht per Klick oder Esc ab, ohne JavaScript nie sichtbar */
.splash {
  position: fixed; inset: 0; z-index: 1000; display: none; place-items: center; padding: 24px;
  background: radial-gradient(60% 50% at 50% 42%, hsl(232 70% 21%) 0%, hsl(var(--logo-navy)) 72%); color: #fff; cursor: pointer;
  transition: opacity 0.35s ease, visibility 0.35s;
}
.splash-on .splash { display: grid; animation: splash-failsafe 0.01s linear 4.5s forwards; }
.splash.is-leaving { opacity: 0; visibility: hidden; }
.splash__inner { display: grid; justify-items: center; gap: 1.4rem; text-align: center; }
.splash .brand-logo { --logo-h: clamp(3rem, 10vw, 4.4rem); animation: logo-beat 1.6s ease-in-out 0.95s infinite; }
.splash__text { margin: 0; font-weight: 700; font-size: 0.98rem; letter-spacing: 0.02em; color: hsl(0 0% 100% / 0.74); }
@keyframes splash-failsafe { to { opacity: 0; visibility: hidden; } }


.nav { display: flex; align-items: center; gap: 0.25rem; }
.nav__list { display: flex; align-items: center; gap: 0.15rem; list-style: none; margin: 0; padding: 0; }
.nav__link, .nav__trigger {
  display: inline-flex; align-items: center; gap: 0.35rem; min-height: 44px; padding: 0.5rem 0.7rem;
  border: 2px solid transparent; border-radius: var(--r); background: none; color: hsl(var(--ink-soft)); cursor: pointer;
  font-size: 0.78rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
}
.nav__link:hover, .nav__trigger:hover { background: hsl(var(--bg-soft)); color: hsl(var(--navy)); }
.nav__link[aria-current="page"], .nav__trigger.is-current { background: hsl(var(--blue-soft)); border-color: hsl(var(--blue-line)); color: hsl(var(--blue-text)); }
.nav__trigger .icon { width: 1.1em; height: 1.1em; transition: transform 0.2s; }
.nav__trigger[aria-expanded="true"] .icon { transform: rotate(180deg); }
.has-dropdown { position: relative; }
.dropdown {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 20; min-width: 300px; padding: 0.5rem; list-style: none; margin: 0;
  background: #fff; border: 2px solid hsl(var(--line-strong)); border-radius: var(--r-lg); box-shadow: 0 6px 0 hsl(var(--line)), 0 24px 48px hsl(0 0% 0% / 0.1);
  animation: pop 0.18s var(--ease-bounce);
}
.dropdown[hidden] { display: none; }
.dropdown a { display: flex; align-items: center; gap: 0.9rem; padding: 0.7rem 0.8rem; border-radius: var(--r); text-decoration: none; color: hsl(var(--navy)); }
.dropdown a:hover { background: hsl(var(--bg-soft)); }
.dropdown a[aria-current="page"] { background: hsl(var(--blue-soft)); }
.dropdown__title { display: block; font-weight: 900; font-size: 0.98rem; line-height: 1.2; }
.dropdown__text { display: block; font-weight: 600; font-size: 0.85rem; color: hsl(var(--ink-soft)); line-height: 1.35; margin-top: 0.1rem; }
.nav__cta { display: flex; gap: 0.5rem; margin-left: 0.5rem; white-space: nowrap; }
.nav__cta .btn { white-space: nowrap; }
@media (min-width: 1241px) { .nav__cta .btn--sm { padding-inline: 0.95rem; } }
.nav-toggle { display: none; }
.drawer__head, .drawer__more, .drawer__foot, .nav-backdrop { display: none; }

/* Mobile Navigation: Off-Canvas-Drawer von rechts. Rahmen (Kopf, Fuss, Abdunklung) baut main.js. */
@media (max-width: 1240px) {
  :root { --header-h: 64px; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; flex: none; border: 2px solid hsl(var(--line-strong)); border-radius: var(--r); background: #fff; color: hsl(var(--navy)); cursor: pointer; box-shadow: 0 3px 0 hsl(var(--line-strong)); }
  .nav-toggle:active { transform: translateY(3px); box-shadow: none; }
  .nav-toggle .icon { width: 26px; height: 26px; }
  .nav-toggle .icon-close { display: none; }
  .nav-toggle[aria-expanded="true"] .icon-menu { display: none; }
  .nav-toggle[aria-expanded="true"] .icon-close { display: block; }

  .nav-backdrop { display: block; position: fixed; inset: 0; z-index: 1; background: hsl(var(--logo-navy) / 0.55); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s linear 0.3s; }
  .nav-open .nav-backdrop { opacity: 1; visibility: visible; transition-delay: 0s; }

  .nav {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column; align-items: stretch; gap: 0;
    width: min(88vw, 400px); padding: 0 0 calc(1.25rem + env(safe-area-inset-bottom, 0px)); overflow-y: auto; overscroll-behavior: contain;
    background: hsl(var(--bg)); border-radius: 24px 0 0 24px; box-shadow: -14px 0 40px hsl(var(--logo-navy) / 0.28);
    transform: translateX(104%); visibility: hidden;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.4s;
  }
  .nav.is-open { transform: none; visibility: visible; transition-delay: 0s; }

  .drawer__head {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex: none;
    min-height: calc(var(--header-h) + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 14px 0 20px; background: hsl(var(--logo-navy));
  }
  .drawer__head .logo { margin-right: 0; }
  .drawer__head .brand-logo { --logo-h: 1.9rem; }
  .drawer__close {
    display: inline-grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 2px solid hsl(0 0% 100% / 0.28); border-radius: var(--r);
    background: hsl(0 0% 100% / 0.1); color: #fff; cursor: pointer; box-shadow: 0 3px 0 hsl(0 0% 0% / 0.35);
  }
  .drawer__close:active { transform: translateY(3px); box-shadow: none; }
  .drawer__close .icon { width: 26px; height: 26px; }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0.6rem; padding: 1.1rem 16px 0; }
  .nav__link, .nav__trigger {
    width: 100%; justify-content: space-between; min-height: 56px; padding-inline: 1.1rem; white-space: normal; text-align: left; font-size: 0.92rem;
    background: #fff; border: 2px solid hsl(var(--line)); border-radius: var(--r-lg); box-shadow: 0 3px 0 hsl(var(--line)); color: hsl(var(--navy));
  }
  .nav__link:active, .nav__trigger:active { transform: translateY(3px); box-shadow: none; }
  .nav__link[aria-current="page"], .nav__trigger.is-current { border-color: hsl(var(--blue-line)); box-shadow: 0 3px 0 hsl(var(--blue-line)); }
  .nav__trigger[aria-expanded="true"] { background: hsl(var(--bg-soft)); }
  .dropdown { position: static; min-width: 0; margin: 0.5rem 0 0.2rem; padding: 0.35rem; background: hsl(var(--bg-soft)); border: 2px solid hsl(var(--line)); border-radius: var(--r-lg); box-shadow: none; animation: drawer-item 0.28s cubic-bezier(0.22, 1, 0.36, 1) both; }
  .dropdown a { min-height: 60px; }
  .dropdown a:active { background: hsl(var(--blue-soft)); }

  .drawer__more { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; padding: 0.6rem 16px 0; }
  .drawer__more a {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 52px; padding: 0.5rem 0.7rem; text-align: center; text-decoration: none;
    background: #fff; border: 2px solid hsl(var(--line)); border-radius: var(--r-lg); box-shadow: 0 3px 0 hsl(var(--line)); color: hsl(var(--navy)); font-size: 0.88rem; font-weight: 900; line-height: 1.2;
  }
  .drawer__more a:active { transform: translateY(3px); box-shadow: none; }
  .drawer__more .icon { width: 1.15em; height: 1.15em; color: hsl(var(--blue-text)); }

  .nav__cta { flex-direction: column; gap: 0.7rem; margin: 0; padding: 1.1rem 16px 0; }
  .nav__cta .btn { width: 100%; }

  .drawer__foot { display: grid; gap: 0.9rem; margin-top: auto; padding: 1.4rem 16px 0; }
  .drawer__orami { display: flex; align-items: flex-end; gap: 0.8rem; }
  .drawer__orami .mascot { width: 64px; height: auto; flex: none; filter: none; }
  .drawer__orami .bubble { margin-bottom: 0.4rem; padding: 0.65rem 0.9rem; font-size: 0.92rem; line-height: 1.4; }
  .drawer__orami .bubble::before, .drawer__orami .bubble::after { top: auto; bottom: 14px; left: auto; right: 100%; border-width: 9px; border-color: transparent; }
  .drawer__orami .bubble::before { border-right-color: hsl(var(--line-strong)); }
  .drawer__orami .bubble::after { right: calc(100% - 3px); border-right-color: #fff; }
  .drawer__contact { display: grid; gap: 0.5rem; }
  .drawer__contact .chip { justify-content: flex-start; min-height: 48px; text-decoration: none; }
  .drawer__legal { display: flex; flex-wrap: wrap; gap: 0 0.4rem; margin: 0; }
  .drawer__legal a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 0.6rem; font-size: 0.88rem; font-weight: 800; color: hsl(var(--ink-soft)); text-decoration: none; }

  .nav.is-open .nav__list > li, .nav.is-open .drawer__more, .nav.is-open .nav__cta, .nav.is-open .drawer__foot { animation: drawer-item 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; }
  .nav.is-open .nav__list > li:nth-child(1) { animation-delay: 0.08s; }
  .nav.is-open .nav__list > li:nth-child(2) { animation-delay: 0.13s; }
  .nav.is-open .nav__list > li:nth-child(3) { animation-delay: 0.18s; }
  .nav.is-open .nav__list > li:nth-child(4) { animation-delay: 0.23s; }
  .nav.is-open .drawer__more { animation-delay: 0.27s; }
  .nav.is-open .nav__cta { animation-delay: 0.31s; }
  .nav.is-open .drawer__foot { animation-delay: 0.36s; }

  body.nav-open { overflow: hidden; }
  /* Ohne JavaScript: Navigation als normale Liste unter dem Kopf */
  html:not(.js) .nav-toggle { display: none; }
  html:not(.js) .site-header__inner { flex-wrap: wrap; height: auto; padding-block: 0.5rem; }
  html:not(.js) .nav { position: static; width: 100%; transform: none; visibility: visible; border-radius: 0; box-shadow: none; padding-bottom: 0.5rem; overflow: visible; }
  html:not(.js) .dropdown[hidden] { display: block; }
}
@keyframes drawer-item { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }

/* 5.2 Hero */
.hero { position: relative; overflow: clip; padding-block: clamp(2.5rem, 1rem + 5vw, 5.5rem) clamp(3rem, 1.5rem + 5vw, 5.5rem); background: radial-gradient(80% 60% at 85% 10%, hsl(var(--blue-soft)) 0%, transparent 70%), radial-gradient(60% 50% at 0% 100%, hsl(var(--green-soft)) 0%, transparent 70%); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; }
.hero h1 .accent { color: hsl(var(--green-text)); }
.hero__lead { max-width: 36em; margin-bottom: 1.8rem; }
.hero__direct { margin: 1.5rem 0 0; font-size: 0.95rem; font-weight: 700; color: hsl(var(--ink-soft)); }
.hero__stage { position: relative; width: min(100%, 520px); margin-inline: auto; }
.hero__art { position: relative; aspect-ratio: 1 / 1; }
.hero__sky { position: absolute; inset: 3% 5% 9%; overflow: hidden; border-radius: 50%; background: linear-gradient(180deg, hsl(var(--blue-soft)) 0%, hsl(var(--blue) / 0.38) 100%); border: 3px solid hsl(var(--blue-line)); box-shadow: 0 10px 0 hsl(var(--blue-line)); }
.hero__sky::after { content: ""; position: absolute; left: -12%; right: -12%; bottom: -30%; height: 58%; border-radius: 50%; background: hsl(var(--grass)); box-shadow: inset 0 10px 0 hsl(0 0% 100% / 0.18); }
.cloud { position: absolute; width: 74px; height: 24px; border-radius: 999px; background: #fff; animation: drift 14s ease-in-out infinite alternate; }
.cloud::before, .cloud::after { content: ""; position: absolute; bottom: 6px; border-radius: 50%; background: #fff; }
.cloud::before { left: 12px; width: 32px; height: 32px; }
.cloud::after { left: 32px; width: 24px; height: 24px; }
.cloud--1 { top: 16%; left: 14%; }
.cloud--2 { top: 30%; right: 8%; transform: scale(0.8); animation-duration: 18s; animation-delay: -6s; }
.hero__mascot { position: absolute; inset: 7% 11% 3%; display: grid; place-items: end center; }
.hero__mascot .mascot { width: 100%; max-height: 100%; object-fit: contain; }
.hero__badges { position: absolute; inset: 0; list-style: none; margin: 0; padding: 0; pointer-events: none; }
.float-badge {
  position: absolute; display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 1rem 0.6rem 0.7rem;
  background: #fff; border: 2px solid hsl(var(--line-strong)); border-radius: var(--r-lg); box-shadow: 0 4px 0 hsl(var(--line-strong));
  font-size: 0.82rem; font-weight: 900; line-height: 1.2; color: hsl(var(--navy)); animation: bob 5s ease-in-out infinite;
}
.float-badge small { display: block; font-size: 0.74rem; font-weight: 700; color: hsl(var(--ink-soft)); }
.float-badge strong { display: block; font-size: 1.05rem; }
.float-badge:nth-child(1) { top: 4%; left: -2%; pointer-events: auto; }
.float-badge:nth-child(2) { top: 42%; right: -6%; animation-delay: -1.7s; pointer-events: auto; }
.float-badge:nth-child(3) { bottom: 6%; left: 0; animation-delay: -3.2s; pointer-events: auto; }
@media (max-width: 900px) { .float-badge:nth-child(n) { top: auto; right: auto; bottom: auto; left: auto; } }
.float-badge .tile { width: 40px; height: 40px; border-radius: 13px; box-shadow: 0 3px 0 hsl(var(--edge-c)); }
.float-badge .tile .icon { width: 22px; height: 22px; }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__stage { width: min(100%, 400px); }
  .hero__art { aspect-ratio: 1 / 0.82; }
  .hero__badges { position: static; display: grid; gap: 0.6rem; margin-top: 1.25rem; pointer-events: auto; }
  .float-badge { position: static; animation: none; }
  .hero__lead { max-width: none; }
}

/* 5.3 Seitenkopf der Unterseiten */
.page-hero { position: relative; overflow: clip; padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) clamp(2rem, 1rem + 3vw, 3.5rem); background: linear-gradient(180deg, hsl(var(--blue-soft)) 0%, hsl(var(--bg)) 100%); border-bottom: 2px solid hsl(var(--line)); }
.page-hero--green { background: linear-gradient(180deg, hsl(var(--green-soft)) 0%, hsl(var(--bg)) 100%); }
.page-hero--orange { background: linear-gradient(180deg, hsl(var(--orange-soft)) 0%, hsl(var(--bg)) 100%); }
.page-hero--purple { background: linear-gradient(180deg, hsl(var(--purple-soft)) 0%, hsl(var(--bg)) 100%); }
.page-hero--teal { background: linear-gradient(180deg, hsl(var(--teal-soft)) 0%, hsl(var(--bg)) 100%); }
.page-hero--pink { background: linear-gradient(180deg, hsl(var(--pink-soft)) 0%, hsl(var(--bg)) 100%); }
.page-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: center; }
.page-hero__mascot { width: 190px; }
.page-hero h1 { font-size: clamp(2.1rem, 1.2rem + 3.6vw, 3.3rem); max-width: 18em; }
.page-hero .lead { max-width: 40em; margin-bottom: 0; }
@media (max-width: 760px) { .page-hero__grid { grid-template-columns: 1fr; } .page-hero__mascot { display: none; } }
.crumbs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1.25rem; padding: 0; list-style: none; font-size: 0.88rem; font-weight: 800; color: hsl(var(--ink-soft)); }
.crumbs li + li::before { content: "›"; margin-right: 0.4rem; color: hsl(var(--line-strong)); }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* 5.4 Maskottchen Orami (Schaf, freigestelltes WebP) */
.mascot { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; filter: drop-shadow(0 10px 12px hsl(30 25% 30% / 0.16)); }
.mascot--float { animation: bob 5.5s ease-in-out infinite; }
.mascot--sway { transform-origin: 50% 92%; animation: sway 4.6s ease-in-out infinite; }
.bubble--left::before, .bubble--left::after { left: auto; top: 50%; border: 10px solid transparent; }
.bubble--left::before { right: 100%; border-right-color: hsl(var(--line-strong)); border-top-color: transparent; }
.bubble--left::after { right: calc(100% - 3px); border-right-color: #fff; border-top-color: transparent; }

/* 5.5 Rollen-Auswahl */
.picker { padding: clamp(1.25rem, 1rem + 2vw, 2.25rem); }
.picker__grid { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem 2rem; align-items: center; }
.picker__intro { display: flex; align-items: center; gap: 1.2rem; }
.picker__intro .mascot { width: 92px; flex: none; }
.picker__intro h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); margin: 0.6rem 0 0; }
.picker__intro .bubble { font-size: 0.95rem; }
.picker__foot { display: flex; justify-content: flex-end; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 2px solid hsl(var(--line)); }
@media (max-width: 900px) { .picker__grid { grid-template-columns: 1fr; } .picker__foot .btn { width: 100%; } }

/* 5.6 Säulen */
.pillar { display: flex; flex-direction: column; gap: 1rem; height: 100%; }
.pillar__num { margin-left: auto; font-size: 0.78rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: hsl(var(--ink-soft)); }
.pillar__top { display: flex; align-items: center; justify-content: space-between; }
.pillar p { color: hsl(var(--ink-soft)); margin: 0; }
.pillar:hover .tile { animation: wiggle 0.5s ease; }

/* 5.7 Orameda-Step-Journey (Pfadkarte im Stil der Lernpfade) */
.pathtabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-bottom: 2rem; }
.pathmap { display: grid; grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 3vw, 3.25rem); align-items: start; }
.pathmap__stage {
  position: relative; padding: 1.5rem 1rem 2.25rem; color: #fff; border-radius: var(--r-xl);
  background: radial-gradient(2px 2px at 14% 12%, #fff8 50%, transparent 52%), radial-gradient(2px 2px at 82% 22%, #fff7 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 30% 46%, #fff6 50%, transparent 52%), radial-gradient(2px 2px at 90% 64%, #fff6 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 8% 82%, #fff6 50%, transparent 52%), hsl(var(--night));
  border: 3px solid hsl(var(--night-2)); box-shadow: 0 8px 0 hsl(222 30% 8%);
}
.pathmap__head { text-align: center; margin-bottom: 0.75rem; }
.pathmap__head .badge { background: hsl(var(--night-2)); border-color: hsl(222 18% 34%); color: hsl(var(--green)); }
.pathmap__head h3 { margin: 0.6rem 0 0.25rem; color: #fff; }
.pathmap__head p { margin: 0; font-size: 0.95rem; color: hsl(220 14% 80%); }
.trail { position: relative; padding: 2.8rem 0 0.5rem; }
.trail__list { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2.7rem; margin: 0; padding: 0; list-style: none; }
.trail__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.trail__svg path { fill: none; stroke: hsl(222 16% 31%); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 1 13; }
.trail__svg path.is-done { stroke: hsl(var(--green)); }
.trail__item { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 0.55rem; transform: translateX(calc(var(--x, 0px) * var(--xs, 1))); }
.trail__label { max-width: 11em; font-size: 0.78rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.25; text-align: center; color: hsl(220 14% 84%); }
.trail__node {
  --face: 222 16% 30%; --edge-c: 222 22% 18%; --on: 220 12% 70%;
  position: relative; display: grid; place-items: center; width: 78px; height: 78px; padding: 0; border: 0; border-radius: 50%;
  background: hsl(var(--face)); color: hsl(var(--on)); cursor: pointer; text-decoration: none;
  box-shadow: 0 7px 0 hsl(var(--edge-c)); transition: transform 0.09s, box-shadow 0.09s, background 0.25s;
}
.trail__node .icon { width: 34px; height: 34px; stroke-width: 2.8; }
.trail__node:hover { filter: brightness(1.12); }
.trail__node:active { transform: translateY(5px); box-shadow: 0 2px 0 hsl(var(--edge-c)); }
.trail__node:focus-visible { outline-color: #fff; }
.trail__item--checkpoint .trail__node { border-radius: 24px; }
.trail__node.is-done { --face: var(--green); --edge-c: var(--green-edge); --on: var(--green-ink); }
.trail__item.is-current .trail__node { --face: var(--green); --edge-c: var(--green-edge); --on: var(--green-ink); }
.trail__item.is-current .trail__node::before { content: ""; position: absolute; inset: -10px; border: 5px solid hsl(0 0% 100% / 0.2); border-radius: inherit; animation: ring-pulse 1.8s ease-out infinite; }
.trail__item--checkpoint .trail__node.is-done, .trail__item--checkpoint.is-current .trail__node { --face: var(--yellow); --edge-c: var(--yellow-edge); --on: var(--yellow-ink); }
.trail__bubble {
  position: absolute; top: -2.3rem; left: 50%; display: none; padding: 0.3rem 0.85rem; border: 2px solid hsl(222 16% 36%); border-radius: 12px;
  background: hsl(var(--night)); color: hsl(var(--green)); font-size: 0.78rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
  transform: translateX(-50%); animation: bubble-bob 1.6s ease-in-out infinite;
}
.trail__bubble::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -6px; border: 6px solid transparent; border-top-color: hsl(222 16% 36%); }
.trail__item.is-current .trail__bubble { display: block; }
.trail__sheep { position: absolute; z-index: 2; width: 92px; height: auto; pointer-events: none; transition: top 0.7s var(--ease-bounce), left 0.7s var(--ease-bounce); filter: drop-shadow(0 6px 8px hsl(0 0% 0% / 0.35)); }
.trail__sheep.is-hop { animation: hop 0.6s ease; }
.trail__divider { display: flex; align-items: center; gap: 0.9rem; width: 100%; margin-top: 0.6rem; font-size: 0.85rem; font-weight: 800; text-align: center; color: hsl(220 12% 76%); }
.trail__divider::before, .trail__divider::after { content: ""; flex: 1; height: 2px; background: hsl(222 16% 28%); }
.trail__node--jump { --face: var(--purple); --edge-c: var(--purple-edge); --on: var(--purple-ink); }
.trail__item--jump .trail__bubble { display: block; color: hsl(var(--purple)); }
.pathmap__panel { position: sticky; top: calc(var(--header-h) + 24px); scroll-margin-top: calc(var(--header-h) + 12px); }
.pathmap__panel .badge { margin-bottom: 0.8rem; }
.pathmap__body > :last-child { margin-bottom: 0; }
.pathmap__panel .progress-label { margin-top: 1.5rem; }
.pathmap__nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; }
.step-data { display: none; }
html:not(.js) .step-data { display: block; max-width: 22em; margin-top: 0.4rem; font-size: 0.9rem; text-align: center; color: hsl(220 14% 84%); }
html:not(.js) .step-data h3 { font-size: 1rem; color: #fff; }
html:not(.js) .step-data .tip, html:not(.js) .pathmap__panel { display: none; }
.tip { display: flex; align-items: flex-end; gap: 0.9rem; margin-top: 1.25rem; }
.tip::before { content: ""; flex: none; width: 58px; height: 70px; background: url("../assets/mascot/orami-doctor-sm.webp") center / contain no-repeat; }
.tip p { position: relative; margin: 0 0 0.5rem; padding: 0.75rem 1rem; border: 2px solid hsl(var(--line-strong)); border-radius: var(--r-lg); background: #fff; box-shadow: 0 3px 0 hsl(var(--line-strong)); font-size: 0.95rem; font-weight: 800; line-height: 1.45; color: hsl(var(--navy)); }
.tip p::before { content: ""; position: absolute; right: 100%; bottom: 14px; border: 9px solid transparent; border-right-color: hsl(var(--line-strong)); }
.tip p::after { content: ""; position: absolute; right: calc(100% - 3px); bottom: 14px; border: 9px solid transparent; border-right-color: #fff; }
@media (max-width: 900px) {
  .pathmap { grid-template-columns: minmax(0, 1fr); }
  .pathmap__stage { max-width: 440px; width: 100%; margin-inline: auto; }
  .pathmap__panel { position: static; }
  .pathmap__nav .btn { flex: 1 1 0; min-width: 0; padding-inline: 0.9rem; }
  .trail { --xs: 0.8; }
  .trail__sheep { width: 76px; }
}

/* 5.8 Dunkles Zahlenband */
.band { position: relative; overflow: clip; background: hsl(var(--night)); color: #fff; border-radius: var(--r-xl); padding: clamp(1.75rem, 1rem + 4vw, 4rem); }
.band h2, .band h3, .band strong { color: #fff; }
.band .lead, .band p { color: hsl(0 0% 85%); }
.band__grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: center; }
.band .ring { --track: 222 20% 28%; --bar: var(--green); --size: 200px; color: #fff; }
.stat-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin: 1.5rem 0 0; padding: 0; }
.stat { padding: 1rem 1.1rem; border: 2px solid hsl(222 18% 30%); border-radius: var(--r-lg); background: hsl(var(--night-2)); }
.stat__num { display: block; font-size: clamp(2rem, 1.6rem + 1.4vw, 2.7rem); font-weight: 900; line-height: 1; color: hsl(var(--teal)); letter-spacing: -0.02em; }
.stat__label { display: block; margin-top: 0.35rem; font-size: 0.9rem; font-weight: 700; color: hsl(0 0% 86%); line-height: 1.35; }
.band__deco { position: absolute; right: -40px; bottom: -30px; width: 280px; opacity: 0.1; pointer-events: none; }
@media (max-width: 760px) { .band__grid { grid-template-columns: 1fr; justify-items: start; } }

/* 5.9 Tabs */
.tabs__list { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 2rem; }
.tab { min-height: 56px; padding: 0.7rem 1.4rem; font-size: 1rem; }
.tab .icon { width: 1.3em; height: 1.3em; }
.tabs__panel[hidden] { display: none; }
.tabs__panel { animation: fade-up 0.35s ease both; }
html:not(.js) .tabs__panel[hidden] { display: block !important; }
html:not(.js) .tabs__list { display: none; }
html:not(.js) .tabs__panel + .tabs__panel { margin-top: 4rem; }

/* 5.10 Level-Karten (mono-/bi-/polydisziplinär) */
.level { display: flex; flex-direction: column; gap: 1rem; height: 100%; }
.level__badge { display: inline-flex; align-items: center; gap: 0.5rem; align-self: flex-start; }
.level__dots { display: inline-flex; gap: 5px; }
.level__dots i { width: 14px; height: 14px; border-radius: 50%; background: hsl(var(--line-strong)); }
.level__dots i.on { background: hsl(var(--green)); box-shadow: 0 2px 0 hsl(var(--green-edge)); }
.level p { margin: 0; color: hsl(var(--ink-soft)); }

/* 5.11 Zwei-Spalten-Vergleich */
.compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 1.25rem; }
.compare .card h3 { display: flex; align-items: center; gap: 0.7rem; }

/* 5.12 Akkordeon (FAQ) */
.faq { display: grid; gap: 0.9rem; }
.faq details { background: #fff; border: 2px solid hsl(var(--line)); border-radius: var(--r-lg); box-shadow: 0 var(--edge) 0 hsl(var(--line)); transition: background 0.15s, border-color 0.15s; }
.faq details[open] { border-color: hsl(var(--blue-line)); box-shadow: 0 var(--edge) 0 hsl(var(--blue-line)); background: hsl(var(--blue-soft) / 0.5); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.4rem; cursor: pointer; list-style: none; font-weight: 900; font-size: 1.08rem; color: hsl(var(--navy)); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { transition: transform 0.25s; color: hsl(var(--blue-text)); }
.faq details[open] summary .icon { transform: rotate(180deg); }
.faq__body { padding: 0 1.4rem 1.3rem; color: hsl(var(--ink-soft)); }
.faq__body > :last-child { margin-bottom: 0; }

/* 5.13 CTA-Banner */
.cta { position: relative; overflow: clip; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: center; padding: clamp(1.75rem, 1rem + 3vw, 3.5rem); background: hsl(var(--green)); color: hsl(var(--green-ink)); border-radius: var(--r-xl); box-shadow: 0 8px 0 hsl(var(--green-edge)); }
.cta h2 { color: hsl(var(--green-ink)); margin-bottom: 0.4em; }
.cta p { font-size: 1.15rem; font-weight: 700; margin: 0 0 1.5rem; max-width: 34em; }
.cta__mascot { width: clamp(140px, 22vw, 230px); }
.cta .btn--white { --on: var(--green-ink); }
@media (max-width: 760px) { .cta { grid-template-columns: 1fr; } .cta__mascot { display: none; } }

/* 5.14 Formular-Wizard */
.wizard { padding: clamp(1.25rem, 1rem + 2vw, 2.25rem); }
.wizard__top { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.75rem; }
.wizard__top .progress { flex: 1; }
.wizard__count { font-size: 0.82rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: hsl(var(--ink-soft)); white-space: nowrap; }
.wizard__step[hidden] { display: none; }
.wizard__step { animation: fade-up 0.3s ease both; }
.wizard__step > h3 { margin-bottom: 1.25rem; }
.wizard__fields { display: grid; gap: 1.1rem; }
.wizard__fields--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.wizard__nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 2px solid hsl(var(--line)); }
.wizard__nav .btn:only-child { margin-left: auto; }
html:not(.js) .wizard__top, html:not(.js) .wizard__nav .btn--back, html:not(.js) .wizard__nav .btn--next { display: none; }
html:not(.js) .wizard__step[hidden] { display: block; }
html:not(.js) .wizard__step { margin-bottom: 2rem; }
.notice { display: flex; gap: 0.8rem; align-items: flex-start; padding: 0.9rem 1.1rem; border: 2px solid hsl(var(--orange-line)); border-radius: var(--r); background: hsl(var(--orange-soft)); font-size: 0.92rem; font-weight: 700; color: hsl(var(--orange-text)); line-height: 1.45; }
.notice .icon { margin-top: 0.1rem; }
.success { text-align: center; padding: clamp(1rem, 3vw, 2rem) 0; }
.success[hidden] { display: none; }
.success .mascot { width: 150px; margin: 0 auto 1rem; }
.success p { max-width: 30em; margin-inline: auto; }
.form-status { margin-top: 1rem; font-weight: 800; }

/* 5.15 Karte der Schweiz & Standorte */
.locations { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); align-items: start; }
.map-card { padding: clamp(0.75rem, 0.5rem + 1vw, 1.25rem); background: hsl(var(--blue-soft)); border-color: hsl(var(--blue-line)); box-shadow: 0 var(--edge) 0 hsl(var(--blue-line)); position: sticky; top: calc(var(--header-h) + 20px); }
.map { position: relative; width: 100%; aspect-ratio: 1000 / 662; }
.map__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map__country { fill: #fff; stroke: hsl(var(--ink-soft)); stroke-width: 4; stroke-linejoin: round; filter: drop-shadow(0 8px 0 hsl(var(--blue-line))); }
.map__lake { fill: hsl(var(--blue-soft)); stroke: hsl(var(--blue-line)); stroke-width: 3; stroke-linejoin: round; }
.pin { position: absolute; transform: translate(-50%, -100%); display: block; padding: 0; border: 0; background: none; cursor: pointer; }
.pin__dot {
  --face: var(--blue); --edge-c: var(--blue-edge); --on: var(--blue-ink);
  position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50% 50% 50% 8%; transform: rotate(-45deg);
  background: hsl(var(--face)); color: hsl(var(--on)); box-shadow: 0 4px 0 hsl(var(--edge-c)); transition: transform 0.2s var(--ease-bounce);
}
.pin__dot .icon { transform: rotate(45deg); width: 18px; height: 18px; stroke-width: 3; }
.pin--hq .pin__dot { --face: var(--green); --edge-c: var(--green-edge); --on: var(--green-ink); width: 46px; height: 46px; }
.pin--hq .pin__dot .icon { width: 22px; height: 22px; }
.pin:hover .pin__dot, .pin.is-active .pin__dot { transform: rotate(-45deg) scale(1.15); }
.pin.is-active .pin__dot { box-shadow: 0 4px 0 hsl(var(--edge-c)), 0 0 0 4px #fff, 0 0 0 7px hsl(var(--orange)); }
.pin.is-active { z-index: 2; }
.pin__label { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); padding: 0.1rem 0.5rem; border-radius: 999px; background: #fff; border: 2px solid hsl(var(--line-strong)); font-size: 0.74rem; font-weight: 900; color: hsl(var(--navy)); line-height: 1.3; white-space: nowrap; }
.pin.is-active .pin__label { background: hsl(var(--orange)); border-color: hsl(var(--orange-edge)); color: hsl(var(--orange-ink)); }
.pin--hq::after { content: ""; position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -26px 0 0 -23px; border: 4px solid hsl(var(--green) / 0.4); border-radius: 50%; animation: ring-pulse 2s ease-out infinite; pointer-events: none; }
.loc-list { display: grid; gap: 1rem; }
.loc-list { list-style: none; }
.loc { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1rem; align-items: start; padding: 1.1rem 1.25rem; background: #fff; border: 2px solid hsl(var(--line)); border-radius: var(--r-lg); box-shadow: 0 var(--edge) 0 hsl(var(--line)); transition: border-color 0.15s, background 0.15s, box-shadow 0.15s; }
.loc.is-active { border-color: hsl(var(--orange)); background: hsl(var(--orange-soft)); box-shadow: 0 var(--edge) 0 hsl(var(--orange)); }
.loc--hq { border-color: hsl(var(--green-line)); box-shadow: 0 var(--edge) 0 hsl(var(--green-line)); background: hsl(var(--green-soft)); }
.loc--hq.is-active { border-color: hsl(var(--orange)); background: hsl(var(--orange-soft)); box-shadow: 0 var(--edge) 0 hsl(var(--orange)); }
.loc__name { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.7rem; margin: 0; font-size: 1.15rem; line-height: 1.2; }
.loc__btn { padding: 0; border: 0; background: none; font: inherit; font-weight: 900; color: hsl(var(--navy)); cursor: pointer; text-align: left; text-decoration: underline; text-decoration-color: hsl(var(--line-strong)); text-decoration-thickness: 3px; text-underline-offset: 0.2em; }
.loc__btn:hover { text-decoration-color: hsl(var(--orange)); }
.loc__addr { display: block; margin: 0.25rem 0 0; font-size: 0.95rem; font-weight: 700; color: hsl(var(--ink-soft)); font-style: normal; line-height: 1.45; }
.loc__links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin: 0.6rem 0 0; font-size: 0.9rem; }
.loc__links a { display: inline-flex; align-items: center; gap: 0.4rem; }
.loc__links .icon { width: 1.05em; height: 1.05em; }
@media (max-width: 900px) { .locations { grid-template-columns: 1fr; } .map-card { position: static; } .pin__label { display: none; } .pin.is-active .pin__label { display: block; } }
html:not(.js) .map-card { display: none; }

/* 5.16 News */
.filters { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 2rem; }
.news-card { display: flex; flex-direction: column; height: 100%; padding: 0; overflow: hidden; }
.news-card__top { display: flex; align-items: flex-end; justify-content: space-between; padding: 1.25rem 1.25rem 1rem; min-height: 120px; border-bottom: 2px solid hsl(var(--line)); background: hsl(var(--soft, var(--bg-soft))); }
.news-card__body { display: flex; flex-direction: column; flex: 1; gap: 0.5rem; padding: 1.25rem; }
.news-card__body h3 { margin: 0; }
.news-card__body p { margin: 0; color: hsl(var(--ink-soft)); font-size: 0.98rem; }
.news-card__meta { margin-top: auto; padding-top: 0.75rem; font-size: 0.85rem; font-weight: 800; color: hsl(var(--ink-soft)); display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; }
.news-card { transition: transform 0.15s var(--ease-bounce), box-shadow 0.15s; }
.news-card:hover { transform: translateY(-3px); box-shadow: 0 calc(var(--edge) + 3px) 0 hsl(var(--line)); }
.news-card:active { transform: translateY(var(--edge)); box-shadow: 0 0 0 hsl(var(--line)); }
.news-card:focus-within { outline: 3px solid hsl(var(--focus)); outline-offset: 3px; }
.news-card h3 a { color: hsl(var(--navy)); text-decoration: none; }
.news-card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.news-card h3 a:focus-visible { outline: none; }
.news-card:hover h3 a { color: hsl(var(--blue-text)); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.2em; }
.news-card--green { --soft: var(--green-soft); }
.news-card--blue { --soft: var(--blue-soft); }
.news-card--orange { --soft: var(--orange-soft); }
.news-card--purple { --soft: var(--purple-soft); }
.news-card--teal { --soft: var(--teal-soft); }
.news-card--yellow { --soft: var(--yellow-soft); }
.empty { padding: 2rem; text-align: center; font-weight: 800; color: hsl(var(--ink-soft)); }

/* 5.17 Fliesstext (Artikel & Rechtliches) */
.prose { font-size: 1.08rem; line-height: 1.75; font-weight: 500; }
.prose h2 { font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem); margin: 2.4rem 0 0.7rem; }
.prose h3 { font-size: 1.2rem; margin: 1.8rem 0 0.5rem; }
.prose p, .prose li { color: hsl(25 8% 20%); }
.prose ul, .prose ol { margin: 0 0 1.2em 1.3em; padding: 0; display: grid; gap: 0.4rem; }
.prose li::marker { color: hsl(var(--green-text)); font-weight: 900; }
.prose blockquote { margin: 1.8rem 0; padding: 1.1rem 1.4rem; border-left: 6px solid hsl(var(--green)); border-radius: 0 var(--r) var(--r) 0; background: hsl(var(--green-soft)); font-weight: 700; }
.prose blockquote p { margin: 0; color: hsl(var(--green-ink)); }
.prose dl { display: grid; grid-template-columns: minmax(130px, 220px) 1fr; gap: 0.6rem 1.5rem; margin: 0 0 1.5rem; }
.prose dt { font-weight: 900; color: hsl(var(--navy)); }
.prose dd { margin: 0; }
@media (max-width: 560px) { .prose dl { grid-template-columns: 1fr; gap: 0.1rem; } .prose dd { margin-bottom: 0.8rem; } }
.article-head { display: grid; gap: 1rem; }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.2rem; font-size: 0.9rem; font-weight: 800; color: hsl(var(--ink-soft)); }
.legal { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: start; }
.toc { position: sticky; top: calc(var(--header-h) + 24px); padding: 1.25rem; }
.toc h2 { font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: hsl(var(--ink-soft)); margin-bottom: 0.8rem; }
.toc ol { list-style: none; display: grid; gap: 0.15rem; }
.toc a { display: block; padding: 0.35rem 0.6rem; border-radius: 10px; font-size: 0.92rem; font-weight: 800; text-decoration: none; color: hsl(var(--ink-soft)); }
.toc a:hover { background: hsl(var(--bg-soft)); color: hsl(var(--navy)); }
.legal-nav { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 2rem; }
.meta-line { font-size: 0.92rem; font-weight: 800; color: hsl(var(--ink-soft)); }
@media (max-width: 900px) { .legal { grid-template-columns: 1fr; } .toc { position: static; } }

/* 5.18 Footer */
.site-footer { margin-top: 0; padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) 2rem; background: hsl(var(--bg-soft)); border-top: 2px solid hsl(var(--line)); }
.footer__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 2.5rem; }
.footer__brand p { max-width: 24em; margin: 1rem 0 0; color: hsl(var(--ink-soft)); font-size: 0.98rem; }
.footer__col h2 { margin-bottom: 0.9rem; font-size: 0.8rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; color: hsl(var(--ink-soft)); }
.footer__col ul { list-style: none; display: grid; gap: 0.5rem; }
.footer__col a { text-decoration: none; color: hsl(var(--ink)); font-weight: 800; font-size: 0.98rem; }
.footer__col a:hover { color: hsl(var(--blue-text)); text-decoration: underline; }
.footer__col address { font-style: normal; font-weight: 700; line-height: 1.6; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem 2rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 2px solid hsl(var(--line)); font-size: 0.88rem; font-weight: 700; color: hsl(var(--ink-soft)); }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .footer__grid { grid-template-columns: 1fr; } }

/* 5.19 Konfetti */
.confetti { position: fixed; inset: 0; z-index: 300; pointer-events: none; overflow: hidden; }
.confetti i { position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 3px; animation: confetti-fall var(--dur, 2.2s) cubic-bezier(0.3, 0.6, 0.5, 1) forwards; }

/* ---------- 6 Seitenspezifisch ---------- */

/* 6.1 Unsere Haltung (Hirte & Schaf) */
.haltung { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(1.5rem, 1rem + 4vw, 4.5rem); align-items: center; }
.haltung__art { position: relative; width: min(100%, 420px); aspect-ratio: 1 / 1; margin-inline: auto; }
.haltung__art .hero__sky { inset: 4% 4% 6%; }
.haltung__art .mascot { position: absolute; left: 14%; right: 18%; bottom: 3%; width: auto; max-height: 90%; object-fit: contain; }
.crook { position: absolute; right: 9%; bottom: 6%; width: 17%; height: auto; overflow: visible; fill: none; stroke: hsl(28 38% 42%); stroke-width: 9; stroke-linecap: round; filter: drop-shadow(0 4px 0 hsl(28 30% 30% / 0.25)); }
.golden { position: relative; margin: 1.75rem 0 0; padding: 1.25rem 1.5rem 1.25rem 4.25rem; border: 2px solid hsl(var(--pink-line)); border-radius: var(--r-lg); background: hsl(var(--pink-soft)); box-shadow: 0 var(--edge) 0 hsl(var(--pink-line)); }
.golden::before { content: "\00AB"; position: absolute; left: 1.1rem; top: 0.2rem; font-size: 4.5rem; font-weight: 900; line-height: 1; color: hsl(var(--pink-edge)); }
.golden p { margin: 0; font-size: 1.15rem; font-weight: 800; line-height: 1.45; color: hsl(var(--navy)); }
.golden cite { display: block; margin-top: 0.5rem; font-size: 0.85rem; font-style: normal; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: hsl(var(--pink-text)); }
#haltung .golden p { font-size: clamp(1.3rem, 1.05rem + 0.9vw, 1.7rem); line-height: 1.4; }
#haltung .golden { padding-block: 1.6rem; }
.value { display: flex; flex-direction: column; gap: 0.9rem; height: 100%; }
.value p { margin: 0; color: hsl(var(--ink-soft)); }
.value:hover .tile { animation: wiggle 0.5s ease; }
@media (max-width: 900px) { .haltung { grid-template-columns: 1fr; } }

/* 6.2 Zugang: Login & Registrierung */
.access { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: 1.25rem; }
.access__card { display: flex; flex-direction: column; gap: 0.9rem; height: 100%; }
.access__card p { margin: 0; color: hsl(var(--ink-soft)); }
.access__card .cluster { margin-top: auto; padding-top: 0.5rem; }
.access__note { margin: 1.25rem 0 0; font-size: 0.9rem; font-weight: 700; color: hsl(var(--ink-soft)); }

/* 6.3 Orami führt durch Formulare */
.wizard__guide { display: flex; align-items: flex-end; gap: 1rem; margin-bottom: 1.5rem; }
.wizard__guide .mascot { width: 62px; flex: none; filter: none; }
.wizard__guide .bubble { font-size: 0.95rem; --tail: 26px; }
html:not(.js) .wizard__guide { display: none; }

.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 1.25rem; }
.kpi { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; text-align: center; }
.kpi .ring { --size: 150px; }
.kpi__num { font-size: 3.2rem; font-weight: 900; line-height: 1; color: hsl(var(--navy)); letter-spacing: -0.03em; }
.kpi__label { font-weight: 800; color: hsl(var(--ink-soft)); line-height: 1.35; }
.feature { display: flex; gap: 1.1rem; align-items: flex-start; }
.feature h3 { margin-bottom: 0.25rem; font-size: 1.15rem; }
.feature p { margin: 0; color: hsl(var(--ink-soft)); }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.contact-card { display: grid; gap: 1rem; }
.contact-card a { display: inline-flex; align-items: center; gap: 0.6rem; }

/* ---------- 7 Bewegung ---------- */
@keyframes pop { from { opacity: 0; transform: translateY(-6px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-8deg) scale(1.06); } 75% { transform: rotate(8deg) scale(1.06); } }
@keyframes sway { 0%, 100% { transform: rotate(-2.2deg); } 50% { transform: rotate(2.2deg); } }
@keyframes drift { from { transform: translateX(-10px); } to { transform: translateX(26px); } }
@keyframes hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-22px) rotate(-4deg); } 70% { transform: translateY(0) rotate(2deg); } }
@keyframes bubble-bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -5px); } }
@keyframes ring-pulse { 0% { transform: scale(0.9); opacity: 0.9; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes confetti-fall { to { transform: translate3d(var(--dx, 0), 110vh, 0) rotate(var(--rot, 720deg)); opacity: 0.9; } }

/* Einblenden beim Scrollen, nur wenn JavaScript läuft */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s var(--ease-bounce); transition-delay: var(--delay, 0ms); }
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .js .reveal { opacity: 1; transform: none; }
  .ring__bar { transition: none; }
  .brand-logo__letters, .brand-logo__pulse { animation: none !important; clip-path: none !important; opacity: 1 !important; }
}

@media print {
  .site-header, .site-footer, .cta, .skip-link, .nav-toggle, .toc, .legal-nav, .splash { display: none !important; }
  body { font-size: 11pt; color: #000; }
  .section, .page-hero { padding-block: 1rem; background: none; border: 0; }
  a { color: inherit; text-decoration: none; }
}

/* 6.4 Unterseiten-Kopf: Orami mit Begrüssung */
.page-hero__side { display: grid; justify-items: center; gap: 0.9rem; max-width: 230px; text-align: center; }
.page-hero__side .bubble { font-size: 0.95rem; }
.page-hero__side .page-hero__mascot { width: 170px; }
@media (max-width: 760px) { .page-hero__side { display: none; } }


/* ---------- 7 Mobile Feinschliff: Touch, Pfad, Footer, Karten ---------- */
a, button, summary, label, .option, .chip, .btn { -webkit-tap-highlight-color: transparent; }
button, .btn, .chip, .option, summary, .nav__link, .nav__trigger, .trail__node, .loc__btn, .pin { touch-action: manipulation; }

/* 7.1 Fusszeile mit vollständigen Firmendaten */
.footer__firm { font-weight: 900; font-size: 1.05rem; color: hsl(var(--navy)); }
.footer__line { display: block; color: hsl(var(--ink)); }
.footer__col address { display: grid; justify-items: start; gap: 0; line-height: 1.55; }
.footer__tap { gap: 0.5rem; }
.footer__tap .icon { width: 1.1em; height: 1.1em; color: hsl(var(--blue-text)); }
.footer__legal { display: grid; gap: 0.15rem; }
.nowrap { white-space: nowrap; }
@media (max-width: 900px), (pointer: coarse) {
  .footer__col a { display: flex; align-items: center; min-height: 44px; }
  .footer__col ul { gap: 0; }
  .logo { min-height: 44px; }
  .crumbs { align-items: center; margin-bottom: 0.5rem; }
  .crumbs li { display: inline-flex; align-items: center; min-height: 44px; }
  .crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 900px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 1.75rem 1.25rem; }
  .footer__col:last-child { grid-column: 1 / -1; }
  .footer__bottom { flex-direction: column; gap: 0.6rem; }
  .site-header::before { backdrop-filter: none; -webkit-backdrop-filter: none; background: hsl(var(--bg)); }
}
@media (max-width: 480px) { .footer__grid { grid-template-columns: 1fr 1fr; } }

/* 7.2 Buttons und Reiter auf kleinen Bildschirmen */
@media (max-width: 560px) {
  .hero .cluster, .page-hero .cluster, .cta .cluster { display: grid; grid-template-columns: 1fr; gap: 0.8rem; }
  .hero .cluster .btn, .page-hero .cluster .btn, .cta .cluster .btn { width: 100%; }
  .wizard__nav .btn { flex: 1 1 0; min-width: 0; padding-inline: 1rem; }
  .pathtabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .pathtabs .chip { justify-content: center; min-height: 60px; padding-inline: 0.6rem; font-size: 0.85rem; line-height: 1.2; text-align: center; }
}
@media (max-width: 900px) {
  .tabs__list, .filters { position: relative; display: flex; flex-wrap: nowrap; gap: 0.6rem; margin-inline: -20px; padding: 4px 20px 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .tabs__list::-webkit-scrollbar, .filters::-webkit-scrollbar { display: none; }
  .tabs__list > *, .filters > * { flex: none; scroll-snap-align: center; white-space: nowrap; }
}

/* 7.3 Pfadkarte auf dem Handy: Details erscheinen als Karte direkt unter dem angetippten Schritt */
@media (max-width: 900px) {
  .pathmap { display: block; }
  .pathmap__panel { display: none; }
  .trail__item { scroll-margin-top: calc(var(--header-h) + 44px); }
  .trail__detail { position: relative; z-index: 3; width: 100%; margin: 0; padding: 0; list-style: none; }
  .trail__card { position: relative; padding: 1.15rem 1.1rem 0.9rem; color: hsl(var(--ink)); animation: drawer-item 0.32s cubic-bezier(0.22, 1, 0.36, 1) both; }
  .trail__card::before { content: ""; position: absolute; left: 50%; top: -10px; width: 16px; height: 16px; margin-left: -8px; background: inherit; border: inherit; border-width: 2px 0 0 2px; border-radius: 4px 0 0 0; transform: rotate(45deg); }
  .trail__card h3 { margin: 0.1rem 0 0.4rem; font-size: 1.08rem; }
  .trail__card p { margin: 0 0 0.6rem; font-size: 0.98rem; }
  .trail__card .tip { margin-top: 0.4rem; }
  .trail__card .tip p { margin-bottom: 0.4rem; font-size: 0.92rem; }
  .trail__card:not(.is-more) .checklist { display: none; }
  .trail__card.is-more .checklist { margin-bottom: 0.7rem; }
  .trail__more { display: inline-flex; align-items: center; min-height: 44px; margin: 0 0 0.2rem; padding: 0 0.1rem; border: 0; background: none; color: hsl(var(--blue-text)); font: inherit; font-size: 0.8rem; font-weight: 900; letter-spacing: 0.07em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 0.25em; cursor: pointer; }
  .trail__card-nav { display: flex; gap: 0.7rem; margin-top: 0.5rem; }
  .trail__card-nav .btn { flex: 1 1 0; min-width: 0; padding-inline: 0.8rem; }
}

/* 7.4 Orami als kompakter Avatar: Begrüssung im Seitenkopf und im Abschluss-Banner */
@media (max-width: 760px) {
  .page-hero__side { display: flex; flex-direction: row-reverse; align-items: flex-end; justify-content: flex-end; gap: 0.8rem; max-width: none; margin-top: 1.5rem; text-align: left; }
  .page-hero__side .page-hero__mascot { display: block; width: 68px; flex: none; }
  .page-hero__side .bubble { margin-bottom: 0.5rem; padding: 0.65rem 0.95rem; font-size: 0.92rem; line-height: 1.4; }
  .page-hero__side .bubble::before, .page-hero__side .bubble::after { top: auto; bottom: 14px; left: auto; right: 100%; border-width: 9px; border-color: transparent; }
  .page-hero__side .bubble::before { border-right-color: hsl(var(--line-strong)); }
  .page-hero__side .bubble::after { right: calc(100% - 3px); border-right-color: #fff; }
  .cta__mascot { display: block; width: 84px; order: -1; }
}

/* 7.5 Standort-Karten: grosse Touch-Flächen */
@media (max-width: 900px) {
  .loc > div { display: contents; }
  .loc > .tile { grid-row: 1 / span 2; }
  .loc__name, .loc__addr { grid-column: 2; }
  .loc__links { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; margin: 0.6rem 0 0; font-size: 0.92rem; }
  .loc__links a {
    justify-content: center; min-height: 48px; padding: 0.4rem 0.7rem; text-align: center; text-decoration: none; background: #fff;
    border: 2px solid hsl(var(--line-strong)); border-radius: var(--r); box-shadow: 0 3px 0 hsl(var(--line-strong)); color: hsl(var(--blue-text)); font-weight: 800;
  }
  .loc__links a:first-child { grid-column: 1 / -1; }
  .loc__links a:active { transform: translateY(3px); box-shadow: none; }
  .loc__btn { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0.4rem; }
  .pin__dot { width: 44px; height: 44px; }
  .pin--hq .pin__dot { width: 52px; height: 52px; }
}

/* 7.6 Restliche Touch-Flächen (mindestens 44 px) */
@media (max-width: 900px) {
  .toc a { display: flex; align-items: center; min-height: 44px; }
  .crumbs a { padding-inline: 0.5rem; margin-inline: -0.5rem; }
  .loc__btn { min-width: 44px; }
  .hero__direct a { padding-block: 12px; margin-block: -12px; }
}


/* ---------- 8 Orami, Haltung, Formular und neue Seiten ---------- */

/* 8.1 Navigation: breitere Dropdowns am Desktop */
@media (min-width: 1241px) { .dropdown { min-width: 350px; } }

/* 8.2 Orami als Begleiter auf jeder Seite */
.orami { position: fixed; right: max(14px, env(safe-area-inset-right, 0px)); bottom: max(14px, env(safe-area-inset-bottom, 0px)); z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 0.7rem; pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease; }
.orami > * { pointer-events: auto; }
.orami.is-hidden { opacity: 0; transform: translateY(18px); }
.orami.is-hidden > * { pointer-events: none; }
.orami__btn { position: relative; width: 76px; height: 76px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; animation: orami-pop 0.6s var(--ease-bounce) both; -webkit-tap-highlight-color: transparent; }
.orami__face { position: absolute; inset: 0; display: block; overflow: hidden; border-radius: 50%; background: #fff; box-shadow: 0 4px 0 hsl(var(--line-strong)), 0 14px 26px -10px hsl(var(--navy) / 0.5); transition: transform 0.09s, box-shadow 0.09s; }
.orami__btn:active .orami__face { transform: translateY(4px); box-shadow: 0 0 0 hsl(var(--line-strong)), 0 6px 14px -8px hsl(var(--navy) / 0.4); }
.orami__face img { position: absolute; left: 50%; top: 9px; width: 62px; height: auto; transform: translateX(-50%); }
.orami__ring { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); transform: rotate(-90deg); pointer-events: none; overflow: visible; }
.orami__track { fill: none; stroke: hsl(var(--line)); stroke-width: 3.5; }
.orami__bar { fill: none; stroke: hsl(var(--teal-edge)); stroke-width: 3.5; stroke-linecap: round; transition: stroke-dashoffset 0.25s linear, stroke 0.3s; }
.orami.is-end .orami__bar { stroke: hsl(var(--green-edge)); }
.orami__bubble { position: relative; max-width: min(268px, calc(100vw - 96px)); padding: 0.85rem 2.7rem 0.85rem 1.05rem; background: #fff; border: 2px solid hsl(var(--line-strong)); border-radius: var(--r-lg); box-shadow: 0 3px 0 hsl(var(--line-strong)), 0 16px 30px -14px hsl(var(--navy) / 0.4); font-size: 0.93rem; font-weight: 800; line-height: 1.42; color: hsl(var(--navy)); transform-origin: 90% 100%; }
.orami__bubble.is-in { animation: orami-bubble-in 0.38s var(--ease-bounce) both; }
.orami__bubble::before, .orami__bubble::after { content: ""; position: absolute; right: 28px; border: 10px solid transparent; }
.orami__bubble::before { top: 100%; border-top-color: hsl(var(--line-strong)); }
.orami__bubble::after { top: calc(100% - 3px); border-top-color: #fff; }
.orami__text { margin: 0; }
.orami__close { position: absolute; top: 0; right: 0; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: hsl(var(--ink-soft)); cursor: pointer; }
.orami__close .icon { width: 17px; height: 17px; stroke-width: 3; }
.orami__close:hover { color: hsl(var(--navy)); }
.orami.is-hop .orami__btn { animation: orami-hop 0.75s cubic-bezier(0.3, 0.7, 0.4, 1); }
.orami.is-wave .orami__face img { animation: orami-wiggle 0.8s ease; }
@keyframes orami-pop { from { transform: scale(0.3); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes orami-bubble-in { from { transform: scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes orami-hop {
  0% { transform: translateY(0) scale(1, 1); }
  18% { transform: translateY(0) scale(1.1, 0.88); }
  45% { transform: translateY(-26px) scale(0.95, 1.07); }
  72% { transform: translateY(0) scale(1.07, 0.93); }
  100% { transform: translateY(0) scale(1, 1); }
}
@keyframes orami-wiggle { 0%, 100% { transform: translateX(-50%) rotate(0); } 25% { transform: translateX(-50%) rotate(-9deg); } 60% { transform: translateX(-50%) rotate(8deg); } }
@media (max-width: 560px) {
  .orami__btn { width: 64px; height: 64px; }
  .orami__bubble::before, .orami__bubble::after { right: 22px; }
  .orami__face img { top: 8px; width: 52px; }
}
@media print { .orami { display: none !important; } }

/* 8.4 Feiner Bibelvers */
.verse { margin: 1.5rem 0 0; padding: 0.15rem 0 0.15rem 1.1rem; max-width: 30em; border-left: 3px solid hsl(var(--pink-line)); }
.verse blockquote { margin: 0; }
.verse p { margin: 0; font-size: 1.12rem; font-weight: 700; font-style: italic; line-height: 1.5; color: hsl(var(--ink)); }
.verse figcaption { margin-top: 0.5rem; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: hsl(var(--ink-soft)); }

/* 8.5 Anfrage: Rollen-Umschalter und Mehrfachauswahl */
.role-switch { gap: 0.6rem; margin-bottom: 1.5rem; }
.role-switch__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.role-switch__opt { position: relative; display: block; cursor: pointer; }
.role-switch__opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.role-switch__body { display: grid; justify-items: center; align-content: center; gap: 0.35rem; height: 100%; padding: 1rem 0.6rem; text-align: center; background: #fff; border: 2px solid hsl(var(--line-strong)); border-radius: var(--r-lg); box-shadow: 0 var(--edge) 0 hsl(var(--line-strong)); transition: transform 0.08s, box-shadow 0.08s, background 0.15s, border-color 0.15s; }
.role-switch__opt:hover .role-switch__body { background: hsl(var(--bg-soft)); }
.role-switch__opt input:active + .role-switch__body { transform: translateY(var(--edge)); box-shadow: none; }
.role-switch__opt input:checked + .role-switch__body { background: hsl(var(--blue-soft)); border-color: hsl(var(--blue)); box-shadow: 0 var(--edge) 0 hsl(var(--blue)); }
.role-switch__opt input:focus-visible + .role-switch__body { outline: 3px solid hsl(var(--focus)); outline-offset: 3px; }
.role-switch__title { font-weight: 900; font-size: 1.05rem; line-height: 1.2; color: hsl(var(--navy)); }
.role-switch__opt input:checked + .role-switch__body .role-switch__title { color: hsl(var(--blue-text)); }
.role-switch__text { font-size: 0.85rem; font-weight: 600; line-height: 1.3; color: hsl(var(--ink-soft)); }
.role-switch.has-error .role-switch__body { border-color: hsl(var(--red-edge)); }
.role-switch.has-error .field__error { display: flex; }
.role-switch__alt { margin: 0.2rem 0 0; font-size: 0.9rem; font-weight: 600; color: hsl(var(--ink-soft)); }
.options--checks { gap: 0.7rem; }
.options--checks .option__body, .options .option__body { position: relative; }
.option__tick { display: grid; place-items: center; flex: none; width: 28px; height: 28px; margin-left: auto; border: 2px solid hsl(var(--line-strong)); border-radius: 50%; background: #fff; color: transparent; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.option__tick .icon { width: 16px; height: 16px; stroke-width: 3.6; }
.option input:checked + .option__body .option__tick { background: hsl(var(--blue)); border-color: hsl(var(--blue)); color: #fff; }
.option input:disabled { cursor: default; }
.field.has-error .options .option__body { border-color: hsl(var(--red-edge)); }
.contact-person { display: grid; gap: 0.6rem; }
.field__label--sub { font-size: 0.88rem; font-weight: 800; color: hsl(var(--ink-soft)); }
.notice--soft { background: hsl(var(--bg-soft)); border-color: hsl(var(--line)); }
.h3 { margin: 0 0 0.5em; font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem); line-height: 1.2; }
@media (max-width: 380px) { .role-switch__grid { grid-template-columns: 1fr; } }

/* 8.6 Seite "Ich habe einen Termin" und weitere Leistungen */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.step { display: grid; gap: 0.55rem; align-content: start; }
.step .badge { justify-self: start; }
.step h3 { margin: 0.2rem 0 0; }
.step p { margin: 0; color: hsl(var(--ink-soft)); }
.tips { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 1rem; }
.tipcard { display: flex; align-items: flex-start; gap: 1rem; }
.tipcard__num { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: hsl(var(--green)); color: hsl(var(--green-ink)); font-weight: 900; box-shadow: 0 3px 0 hsl(var(--green-edge)); }
.tipcard h3 { margin: 0 0 0.25rem; font-size: 1.1rem; }
.tipcard p { margin: 0; color: hsl(var(--ink-soft)); }
.services__intro { margin: -0.2rem 0 1.25rem; color: hsl(var(--ink-soft)); }
.services .feature h3 { font-size: 1.1rem; }

/* 8.7 Footer mit vier Spalten und Rechtliches als Zeile */
@media (min-width: 901px) { .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1.25fr; } }
.footer__legalnav { display: flex; flex-wrap: wrap; gap: 0 1.4rem; margin-top: 2rem; padding-top: 0.6rem; border-top: 2px solid hsl(var(--line)); }
.footer__legalnav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.95rem; font-weight: 800; color: hsl(var(--ink)); text-decoration: none; }
.footer__legalnav a:hover { color: hsl(var(--blue-text)); text-decoration: underline; }
.footer__bottom { margin-top: 0.4rem; padding-top: 0.6rem; border-top: 0; }

/* 8.8 Klare Karten für Inhalte, 3D bleibt bei Buttons, Auswahl und Pfad */
.card { border-width: 1.5px; box-shadow: 0 1px 0 hsl(var(--line)), 0 16px 32px -22px hsl(var(--navy) / 0.4); }
.card--green { box-shadow: 0 1px 0 hsl(var(--green-line)), 0 16px 32px -22px hsl(var(--green-edge) / 0.55); }
.card--blue { box-shadow: 0 1px 0 hsl(var(--blue-line)), 0 16px 32px -22px hsl(var(--blue-edge, var(--blue)) / 0.5); }
.card--orange { box-shadow: 0 1px 0 hsl(var(--orange-line)), 0 16px 32px -22px hsl(var(--orange-edge) / 0.55); }
.card--pink { box-shadow: 0 1px 0 hsl(var(--pink-line)), 0 16px 32px -22px hsl(var(--pink-edge) / 0.5); }
.card--soft { box-shadow: none; }
.card--link:hover { box-shadow: 0 1px 0 hsl(var(--line)), 0 22px 38px -20px hsl(var(--navy) / 0.45); }
.card--link:active { transform: translateY(1px); box-shadow: 0 1px 0 hsl(var(--line)); }
h1, h2 { letter-spacing: -0.02em; }

/* 8.9 Fusszeile: Kontaktzeilen mit Symbol nebeneinander */
.footer__tap { display: inline-flex; align-items: center; gap: 0.5rem; }
.footer__tap .icon { flex: none; width: 1.1em; height: 1.1em; color: hsl(var(--blue-text)); }

/* ---------- 9 Leistungen-Menü, Formular und 3D-Hirten-Szene ---------- */

/* 9.1 Leistungen-Menü zweispaltig am Desktop */
@media (min-width: 1241px) {
  .dropdown--wide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.15rem 0.35rem; min-width: 660px; }
  .dropdown--wide[hidden] { display: none; }
}

/* 9.2 Hirten-Szene: räumliche Ebenen, an die Scroll-Position gekoppelt (JS setzt --p von 0 bis 1) */
.shepherd-scene { position: relative; --p: 0; perspective: 900px; perspective-origin: 50% 35%; }
.shepherd-scene .hero__sky { inset: 2% 7% 16%; scale: calc(1.06 - 0.06 * var(--p)); }
.scene__island {
  position: absolute; left: 4%; right: 4%; bottom: 5%; height: 17%; border-radius: 50%;
  background: radial-gradient(110% 120% at 50% 18%, hsl(var(--grass)) 0 58%, hsl(var(--grass-edge)) 100%);
  box-shadow: inset 0 6px 0 hsl(0 0% 100% / 0.22), 0 10px 0 hsl(var(--grass-edge)), 0 28px 30px -16px hsl(var(--navy) / 0.45);
}
.scene__shadow { position: absolute; z-index: 1; border-radius: 50%; background: hsl(var(--navy) / 0.22); filter: blur(2px); pointer-events: none; }
.scene__shadow--hirte { left: 31%; width: 42%; bottom: 10.5%; height: 4.5%; }
.scene__shadow--orami { left: 0; top: 0; width: 17%; height: 4%; opacity: 0; }
.shepherd {
  position: absolute; z-index: 2; left: 50%; bottom: 10%; height: 82%; width: auto; overflow: visible;
  transform-origin: 50% 100%; transform: translateX(-46%) rotateY(calc(-16deg * (1 - var(--p))));
  filter: drop-shadow(0 4px 0 hsl(var(--navy) / 0.1));
}
.shepherd__orami {
  position: absolute; z-index: 3; left: 59%; top: 28%; width: 19%; height: auto;
  transform-origin: 50% 100%; backface-visibility: visible; will-change: transform;
  filter: drop-shadow(0 4px 5px hsl(var(--navy) / 0.28));
}
.scene__hearts { position: absolute; z-index: 4; left: var(--hx, 67%); top: var(--hy, 26%); width: 0; height: 0; pointer-events: none; }
.scene__hearts i { position: absolute; left: -0.5em; top: -1em; font-style: normal; font-size: 1.2rem; line-height: 1; color: hsl(var(--pink-edge)); opacity: 0; }
.scene__hearts i::before { content: "\2665"; }
.shepherd-scene.is-landed .scene__hearts i { animation: scene-heart 1.5s ease-out both; }
.shepherd-scene.is-landed .scene__hearts i:nth-child(2) { margin-left: -20px; font-size: 0.9rem; animation-delay: 0.15s; }
.shepherd-scene.is-landed .scene__hearts i:nth-child(3) { margin-left: 18px; font-size: 1rem; animation-delay: 0.3s; }
@keyframes scene-heart {
  0% { opacity: 0; transform: translateY(0) scale(0.4); }
  20% { opacity: 1; transform: translateY(-10px) scale(1.1); }
  100% { opacity: 0; transform: translateY(-48px) scale(0.9); }
}
@media (prefers-reduced-motion: reduce) { .shepherd-scene.is-landed .scene__hearts i { animation: none; } }

/* 9.3 Formular: Felder erscheinen nach der Rollenwahl */
[data-role-fields]:not([hidden]) { animation: drawer-item 0.35s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* ---------- 10 Weissraum, Bento-Karten und Fachwissen ---------- */

/* 10.1 Ergänzende Farben und Eyebrows */
.eyebrow--blue { color: hsl(var(--blue-text)); }
.eyebrow--pink { color: hsl(var(--pink-text)); }
.badge--yellow { background: hsl(var(--yellow-soft)); border-color: hsl(var(--yellow-line)); color: hsl(var(--orange-text)); }
.section__head { margin-bottom: clamp(2.25rem, 1.2rem + 3.4vw, 3.75rem); }

/* 10.2 Bento-Raster: sechs Spalten, Karten spannen 2, 3, 4 oder 6 */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(1.25rem, 0.4rem + 2.6vw, 2.75rem); }
.bento > * { grid-column: span 6; }
@media (min-width: 720px) {
  .bento > .b-2, .bento > .b-3 { grid-column: span 3; }
  .bento > .b-4 { grid-column: span 6; }
}
@media (min-width: 1024px) {
  .bento > .b-2 { grid-column: span 2; }
  .bento > .b-3 { grid-column: span 3; }
  .bento > .b-4 { grid-column: span 4; }
}
.bento__card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 0.85rem;
  padding: clamp(1.6rem, 1rem + 2vw, 2.75rem); background: #fff;
  border: 1.5px solid hsl(var(--line)); border-radius: 28px;
  box-shadow: 0 1px 0 hsl(var(--line)), 0 18px 36px -26px hsl(var(--navy) / 0.45);
}
.bento__card h3, .bento__card h4 { margin: 0.15rem 0 0; }
.bento__card h4 { font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem); }
.bento__card p { margin: 0; }
.bento__card > .checklist { margin-top: 0.25rem; }
.bento__card--green { background: hsl(var(--green-soft)); border-color: hsl(var(--green-line)); }
.bento__card--yellow { background: hsl(var(--yellow-soft)); border-color: hsl(var(--yellow-line)); }
.bento__card--blue { background: hsl(var(--blue-soft)); border-color: hsl(var(--blue-line)); }
.bento__card--pink { background: hsl(var(--pink-soft)); border-color: hsl(var(--pink-line)); }
.bento__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; }
.bento__note { margin-top: auto !important; padding-top: 0.6rem; font-size: 0.95rem; color: hsl(var(--ink-soft)); }
.bento__note a { display: inline-flex; align-items: center; gap: 0.4rem; }
.bento__more { margin: clamp(2rem, 1.4rem + 2vw, 3rem) 0 0; text-align: center; }
.checklist--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 0.8rem 1.5rem; }

/* 10.3 Fachwissen auf der Leistungsseite */
.wissen { display: grid; gap: clamp(3rem, 2rem + 4vw, 5rem); }
.wissen__title { display: flex; align-items: center; gap: 0.85rem; margin-bottom: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); }
.wissen__lead { max-width: 62ch; margin: -0.5rem 0 clamp(1.25rem, 1rem + 1vw, 1.75rem); font-size: 1.08rem; color: hsl(var(--ink-soft)); }
.bento__card .wissen__lead { margin: 0; }
.facts { display: grid; gap: 0.7rem; width: 100%; margin: 0.35rem 0 0; padding-top: 0.9rem; border-top: 2px dashed hsl(var(--line)); }
.facts dt { font-size: 0.78rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: hsl(var(--ink-soft)); }
.facts dd { margin: 0.1rem 0 0; font-weight: 700; color: hsl(var(--navy)); }
.dims { list-style: none; display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 0.4rem; }
.dims li { padding: 0.45rem 0.9rem; border: 2px solid hsl(var(--blue-line)); border-radius: 999px; background: hsl(var(--blue-soft)); color: hsl(var(--blue-text)); font-size: 0.9rem; font-weight: 800; box-shadow: 0 3px 0 hsl(var(--blue-line)); }
.scale { list-style: none; display: grid; gap: 0.45rem; width: 100%; }
.scale li { display: flex; align-items: center; gap: 0.75rem; font-weight: 800; color: hsl(var(--navy)); }
.scale b {
  display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 12px; font-weight: 900;
  background: hsl(var(--green) / calc(0.18 + var(--i) * 0.2)); color: hsl(var(--green-ink)); box-shadow: 0 3px 0 hsl(var(--green-edge) / calc(0.25 + var(--i) * 0.18));
}
.scale small { font-size: inherit; font-weight: 600; color: hsl(var(--ink-soft)); }
.crit { list-style: none; counter-reset: crit; display: grid; gap: 0.7rem; width: 100%; }
.crit li { counter-increment: crit; display: flex; align-items: center; gap: 0.8rem; font-weight: 800; color: hsl(var(--navy)); }
.crit li::before {
  content: counter(crit); display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%;
  background: hsl(var(--green)); color: hsl(var(--green-ink)); font-weight: 900; box-shadow: 0 3px 0 hsl(var(--green-edge));
}

/* ---------- 11 Higgsfield-Clips und Orami auf dem Pfad ---------- */

/* 11.1 Clips aus der Higgsfield-Pipeline liegen über der CSS-Szene; erst wenn sie geladen sind, tritt die Szene zurück */
.hf-media { position: absolute; inset: 0; z-index: 6; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.shepherd-scene .hf-media {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent), linear-gradient(180deg, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent), linear-gradient(180deg, transparent, #000 4%, #000 96%, transparent);
  mask-composite: intersect;
}
.shepherd-scene.hf-ready > :not(.hf-media):not(.scene__hearts) { visibility: hidden; }
.hero__mascot .hf-media { z-index: 0; object-fit: cover; object-position: 50% 100%; filter: drop-shadow(0 10px 12px hsl(30 25% 30% / 0.16)); }
.hero__mascot.hf-ready > img { visibility: hidden; }


/* ---------- 12 React-Inseln: Sprachwechsler, Übersetzungshinweis und Orami-Pfad ---------- */

/* 12.0 Erster Aufruf in Französisch oder Englisch: Seite erst zeigen, wenn die Übersetzung steht (spätestens nach 1,5 s) */
html.i18n-pending body { opacity: 0; animation: i18n-reveal 0s linear 1.5s forwards; }
@keyframes i18n-reveal { to { opacity: 1; } }

/* 12.1 Sprachwechsler: runder 3D-Knopf ganz rechts im Kopf, am Handy neben dem Menüknopf */
.lang-switch { order: 3; flex: none; display: flex; justify-content: flex-end; min-width: 8rem; min-height: 44px; }
.lang-switch:has(.lang) { min-width: 0; }
.lang.is-compact .lang__current { display: none; }
.lang.is-compact .lang__trigger { padding-inline: 0.7rem 0.6rem; }
.lang { position: relative; }
.lang__trigger {
  display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; padding: 0.4rem 0.7rem 0.4rem 0.6rem;
  border: 2px solid hsl(var(--line-strong)); border-radius: 999px; background: #fff; color: hsl(var(--navy));
  font: inherit; font-size: 0.86rem; font-weight: 900; letter-spacing: 0.02em; line-height: 1; cursor: pointer;
  box-shadow: 0 3px 0 hsl(var(--line-strong)); transition: transform 0.09s ease, box-shadow 0.09s ease, background-color 0.15s, border-color 0.2s;
}
.lang__trigger:hover { background: hsl(var(--bg-soft)); }
.lang__trigger:active { transform: translateY(3px); box-shadow: 0 0 0 hsl(var(--line-strong)); }
.lang__trigger[aria-expanded="true"] { border-color: hsl(var(--teal-edge)); box-shadow: 0 3px 0 hsl(var(--teal-edge)); }
.lang__globe { width: 1.35em; height: 1.35em; color: hsl(var(--teal-edge)); }
.lang__chevron { width: 1.05em; height: 1.05em; transition: transform 0.25s var(--ease-bounce); }
.lang__trigger[aria-expanded="true"] .lang__chevron { transform: rotate(180deg); }
.lang__list {
  position: absolute; top: calc(100% + 12px); right: 0; z-index: 40; width: max-content; min-width: 260px; margin: 0; padding: 0.45rem; list-style: none;
  background: #fff; border: 2px solid hsl(var(--line-strong)); border-radius: var(--r-lg); transform-origin: 90% 0;
  box-shadow: 0 6px 0 hsl(var(--line)), 0 24px 48px hsl(var(--logo-navy) / 0.14);
}
.lang__list:focus { outline: none; }
.lang__list:focus-visible { box-shadow: 0 6px 0 hsl(var(--line)), 0 24px 48px hsl(var(--logo-navy) / 0.14), 0 0 0 3px hsl(var(--focus)); }
.lang__option { display: flex; align-items: center; gap: 0.85rem; min-height: 60px; padding: 0.55rem 0.7rem; border-radius: var(--r); cursor: pointer; color: hsl(var(--navy)); }
.lang__option + .lang__option { margin-top: 0.2rem; }
.lang__option.is-active { background: hsl(var(--bg-soft)); }
.lang__option[aria-selected="true"] { background: hsl(var(--teal-soft)); }
.lang__list:focus-visible .lang__option.is-active { box-shadow: inset 0 0 0 2px hsl(var(--focus)); }
.lang__option .tile--sm { width: 40px; height: 40px; border-radius: 13px; box-shadow: 0 3px 0 hsl(var(--edge-c)); }
.lang__option .tile--sm .icon { width: 20px; height: 20px; }
.lang__names { display: grid; gap: 0.1rem; line-height: 1.2; }
.lang__endonym { font-size: 1rem; font-weight: 900; }
.lang__exonym { font-size: 0.84rem; font-weight: 700; color: hsl(var(--ink-soft)); }
.lang__check { width: 1.35em; height: 1.35em; margin-left: auto; padding-left: 0.5rem; color: hsl(var(--teal-edge)); stroke-width: 3; }
@media (max-width: 1240px) {
  .lang-switch { order: 0; min-width: 48px; min-height: 48px; }
  .lang__trigger { width: 48px; height: 48px; padding: 0; justify-content: center; border-radius: var(--r); }
  .lang__globe { width: 26px; height: 26px; }
  .lang__current, .lang__chevron { display: none; }
  .lang__list { min-width: min(280px, calc(100vw - 32px)); }
}

/* 12.2 Hinweis auf Unterseiten, deren Inhalt noch deutsch ist */
.i18n-notice { padding-top: 1.25rem; }
.i18n-notice__inner {
  display: flex; align-items: center; gap: 0.9rem; padding: 0.8rem 0.8rem 0.8rem 0.9rem;
  background: hsl(var(--blue-soft)); border: 2px solid hsl(var(--blue-line)); border-radius: var(--r-lg); box-shadow: 0 3px 0 hsl(var(--blue-line));
}
.i18n-notice__inner p { flex: 1; margin: 0; font-size: 0.95rem; line-height: 1.45; color: hsl(var(--blue-ink)); }
.i18n-notice__close {
  display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 2px solid hsl(var(--blue-line)); border-radius: 50%;
  background: #fff; color: hsl(var(--blue-text)); cursor: pointer; box-shadow: 0 3px 0 hsl(var(--blue-line));
}
.i18n-notice__close:active { transform: translateY(3px); box-shadow: none; }

/* 12.3 Orami-Pfad: Bühne, Pfad mit 3D-Kante, Stationen */
.hp-section { overflow-x: clip; }
.hp {
  --rail: clamp(250px, 24vw, 330px); --node: 84px; --shift: calc((var(--rail) - var(--node)) / 2 - 12px);
  --path-w: 18px; --orami-w: 92px;
}
.hp__eyebrow { color: hsl(var(--pink-text)); }
.hp__stage { position: relative; }
.hp__svg { position: absolute; left: 0; top: 0; z-index: 0; overflow: visible; pointer-events: none; }
.hp__svg path { fill: none; stroke-width: var(--path-w); stroke-linecap: round; stroke-linejoin: round; }
.hp__track { stroke: #fff; }
.hp__track-edge { stroke: hsl(var(--line-strong)); }
.hp__fill { stroke: hsl(var(--teal)); }
.hp__fill-edge { stroke: hsl(var(--teal-edge)); }

.hp__start, .hp__station { display: grid; grid-template-columns: minmax(0, 1fr) var(--rail) minmax(0, 1fr); column-gap: clamp(1.25rem, 0.5rem + 2vw, 2.25rem); }
.hp__start { height: clamp(190px, 150px + 4vw, 220px); }
.hp__pad {
  grid-column: 2; align-self: end; justify-self: center; width: 112px; height: 30px; margin-bottom: 30px; border-radius: 50%;
  background: radial-gradient(110% 120% at 50% 18%, hsl(var(--grass)) 0 58%, hsl(var(--grass-edge)) 100%);
  box-shadow: inset 0 4px 0 hsl(0 0% 100% / 0.25), 0 6px 0 hsl(var(--grass-edge));
}
.hp__list { position: relative; z-index: 1; display: grid; gap: clamp(4rem, 2rem + 5vw, 7rem); margin: 0; padding: 0; list-style: none; }
.hp__station { align-items: center; }
.hp__rail { grid-column: 2; grid-row: 1; display: flex; justify-content: center; }
.hp__node {
  --face: 0 0% 100%; --edge-c: var(--line-strong); --on: var(--ink-soft);
  position: relative; display: grid; place-items: center; width: var(--node); height: var(--node); padding: 0;
  border: 3px solid hsl(var(--edge-c)); border-radius: 50%; background: hsl(var(--face)); color: hsl(var(--on)); cursor: pointer;
  box-shadow: 0 7px 0 hsl(var(--edge-c)), inset 0 -5px 0 hsl(var(--edge-c) / 0.18);
  transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease, box-shadow 0.1s ease, translate 0.1s ease;
}
.hp__node .icon { width: 42%; height: 42%; stroke-width: 2.6; }
.hp__node:hover { filter: brightness(1.04); }
.hp__node:active { translate: 0 5px; box-shadow: 0 2px 0 hsl(var(--edge-c)), inset 0 -5px 0 hsl(var(--edge-c) / 0.18); }
.hp__station.is-right .hp__node { left: var(--shift); }
.hp__station.is-left .hp__node { left: calc(var(--shift) * -1); }
.hp__station.is-done .hp__node, .hp__station.is-current .hp__node { --face: var(--teal); --edge-c: var(--teal-edge); --on: var(--teal-ink); }
.hp__station.is-current .hp__node::after {
  content: ""; position: absolute; inset: -13px; border: 4px solid hsl(var(--teal) / 0.4); border-radius: 50%; pointer-events: none;
  animation: ring-pulse 1.9s ease-out infinite;
}

.hp__card {
  position: relative; grid-row: 1; width: min(100%, 420px); padding: clamp(1.4rem, 1rem + 1.1vw, 2rem);
  background: #fff; border: 2px solid hsl(var(--line)); border-radius: var(--r-lg); box-shadow: 0 var(--edge) 0 hsl(var(--line));
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.hp__station.is-right .hp__card { grid-column: 3; justify-self: start; }
.hp__station.is-left .hp__card { grid-column: 1; justify-self: end; }
/* Kurze Punktlinie verbindet Karte und Station */
.hp__card::before { content: ""; position: absolute; top: 50%; width: clamp(1rem, 0.4rem + 1.6vw, 1.75rem); border-top: 3px dotted hsl(var(--line-strong)); }
.hp__station.is-right .hp__card::before { right: 100%; margin-right: 6px; }
.hp__station.is-left .hp__card::before { left: 100%; margin-left: 6px; }
.hp__station.is-current .hp__card { border-color: hsl(var(--teal-line)); box-shadow: 0 var(--edge) 0 hsl(var(--teal-edge) / 0.55), 0 22px 44px -18px hsl(var(--teal-edge) / 0.35); }
.hp__station.is-current .hp__card::before, .hp__station.is-done .hp__card::before { border-top-color: hsl(var(--teal-edge)); }
.hp__card-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 0.75rem; margin-bottom: 0.9rem; }
.hp__count { font-size: 0.76rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: hsl(var(--ink-soft)); }
.hp__card h3 { margin: 0 0 0.35em; }
.hp__card p { margin: 0; color: hsl(var(--ink-soft)); }

/* 12.4 Ziel: Insel mit dem guten Hirten und Text zur Haltung */
/* Die Szene ragt neben die letzte Station hinauf: so führt der Pfad in einem Bogen zum Hirten */
.hp__finale { --fgap: clamp(2rem, 1rem + 4vw, 5rem); position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--fgap); align-items: end; margin-top: clamp(3rem, 2rem + 3vw, 5rem); }
.hp__scene { position: relative; height: clamp(360px, 300px + 8vw, 470px); margin-top: calc(clamp(360px, 300px + 8vw, 470px) * -0.42); }
/* Der Text beginnt rechts vom Bogen, den Orami zum Hirten läuft (Versatz der Station plus halbe Breite von Orami) */
.hp__finale-text { padding-bottom: clamp(1rem, 3vw, 3.5rem); padding-left: max(0px, calc(var(--shift) + var(--orami-w) / 2 + 10px - var(--fgap) / 2)); }
.hp__halo {
  position: absolute; left: 0; right: 0; bottom: 6%; width: 92%; aspect-ratio: 1; margin-inline: auto; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, hsl(var(--yellow) / 0.42), hsl(var(--yellow) / 0.16) 58%, transparent 74%);
}
.hp__island {
  position: absolute; left: 3%; right: 3%; bottom: 0; height: 15%; border-radius: 50%;
  background: radial-gradient(110% 120% at 50% 18%, hsl(var(--grass)) 0 58%, hsl(var(--grass-edge)) 100%);
  box-shadow: inset 0 6px 0 hsl(0 0% 100% / 0.22), 0 10px 0 hsl(var(--grass-edge)), 0 28px 30px -16px hsl(var(--navy) / 0.45);
}
/* Orami kommt am Desktop von rechts und setzt sich auf die rechte Schulter (Seite mit dem Hirtenstab) */
.hp__figure { --landing: 136%; --shoulder-x: 0.69; --shoulder-y: 0.48; --shoulder-size: 0.27; position: absolute; left: 0; right: 0; bottom: 7.5%; height: 82%; width: fit-content; margin-inline: auto; }
.hp__shepherd { display: block; height: 100%; width: auto; max-width: none; transform-origin: 50% 100%; filter: drop-shadow(0 4px 0 hsl(var(--navy) / 0.1)); }
.hp__landing { position: absolute; left: var(--landing); bottom: 2%; width: 2px; height: 2px; }
.hp__finale-text h3 { font-size: clamp(1.6rem, 1.15rem + 1.5vw, 2.3rem); }
.hp__finale-text .lead { margin-bottom: 0; }
.hp__values { list-style: none; margin: 1.4rem 0 0; padding: 0; }
.hp__more { margin: 1.9rem 0 0; }

/* 12.5 Orami: läuft auf dem Pfad, Schatten bleibt am Boden, Sprechblase über dem Kopf */
.hp__orami { position: absolute; left: 0; top: 0; z-index: 5; width: 0; height: 0; pointer-events: none; }
.hp__orami-img {
  position: absolute; left: calc(var(--orami-w) / -2); bottom: -6px; width: var(--orami-w); height: auto; max-width: none;
  transform-origin: 50% 100%; will-change: transform; user-select: none; -webkit-user-drag: none;
  filter: drop-shadow(0 6px 7px hsl(var(--navy) / 0.24));
}
.hp__shadow { position: absolute; left: 0; top: 0; z-index: 4; width: 64px; height: 15px; margin: -7px 0 0 -32px; border-radius: 50%; background: hsl(var(--navy) / 0.22); filter: blur(2px); pointer-events: none; }
.hp__bubble {
  position: absolute; left: 0; bottom: 0; z-index: 2; width: max-content; max-width: 230px; padding: 0.55rem 0.9rem;
  background: #fff; border: 2px solid hsl(var(--line-strong)); border-radius: 16px; box-shadow: 0 3px 0 hsl(var(--line-strong));
  font-size: 0.92rem; font-weight: 900; line-height: 1.3; text-align: center; color: hsl(var(--navy)); transform-origin: 50% 100%;
}
.hp__bubble::before, .hp__bubble::after { content: ""; position: absolute; left: 50%; top: 100%; border: 9px solid transparent; margin-left: -9px; }
.hp__bubble::before { border-top-color: hsl(var(--line-strong)); margin-top: 1px; }
.hp__bubble::after { border-top-color: #fff; margin-top: -2px; }
.hp__hearts { position: absolute; z-index: 4; width: 0; height: 0; pointer-events: none; }
.hp__hearts i { position: absolute; left: -0.5em; top: -1em; font-style: normal; font-size: 1.35rem; line-height: 1; color: hsl(var(--pink-edge)); }
.hp__hearts i::before { content: "\2665"; }

/* 12.6 Handy und Tablet: Pfad als Schiene links, Karten rechts daneben */
@media (max-width: 819px) {
  .hp { --rail: 76px; --node: 62px; --shift: 7px; --path-w: 14px; --orami-w: 70px; }
  .hp__start, .hp__station { grid-template-columns: var(--rail) minmax(0, 1fr); column-gap: 1rem; }
  .hp__start { height: 180px; }
  .hp__pad { grid-column: 1; width: 84px; height: 24px; margin-bottom: 26px; }
  .hp__rail { grid-column: 1; }
  .hp__list { gap: 2.75rem; }
  .hp__station.is-left .hp__card, .hp__station.is-right .hp__card { grid-column: 2; justify-self: stretch; width: auto; }
  .hp__station.is-left .hp__card::before { left: auto; right: 100%; margin: 0 6px 0 0; }
  .hp__finale { grid-template-columns: minmax(0, 1fr); margin-top: 4.5rem; }
  .hp__scene { height: 330px; margin-top: 0; }
  .hp__finale-text { padding: 0; }
  /* Am Handy kommt der Pfad links herunter und endet links auf der Insel, ohne den Hirten zu kreuzen */
  .hp__figure { --landing: -22%; }
  .hp__island { left: -2%; right: -2%; }
}
@media (max-width: 380px) { .hp__card { padding: 1.15rem; } }

/* 12.7 Ohne JavaScript: Stationen als Liste, Hirte daneben */
.hp__fallback { display: grid; gap: 1.25rem; max-width: 760px; margin: 0 auto; padding: 0; list-style: none; }
.hp__fallback-card h3 { margin: 0.8rem 0 0.35rem; }
.hp__fallback-card p { margin: 0; color: hsl(var(--ink-soft)); }
.hp__fallback-finale { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 2rem; align-items: center; max-width: 760px; margin: 3.5rem auto 0; }
@media (max-width: 600px) { .hp__fallback-finale { grid-template-columns: 1fr; } .hp__fallback-finale img { width: 150px; } }


/* ---------- 13 Look der Plattform: EKG-Grün, Tiefgrün, Mint, Montserrat und Inter ---------- */
/* Gleiche Sprache wie die Landingpage der Plattform: grüne Köpfe mit Welle, weisse Karten mit zartem Grünrand,
   Pillen-Buttons in Tiefgrün, dunkle Vertrauensflächen mit grünem Schein. Inhalte und Aufbau der Seiten bleiben unverändert. */

/* 13.1 Basis und Typografie */
body { font-family: var(--font); font-weight: 400; color: hsl(var(--ink)); background: var(--mint); }
h1, h2, h3, h4, .h3 { font-family: var(--font-display); font-weight: 800; color: var(--deep); letter-spacing: -0.02em; }
h3, h4, .h3 { font-weight: 700; letter-spacing: -0.01em; }
h1 { line-height: 1.04; letter-spacing: -0.03em; }
h2 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.1rem); line-height: 1.08; }
strong { font-weight: 700; color: var(--deep); }
a { color: hsl(var(--green-text)); font-weight: 600; text-decoration-thickness: 1.5px; }
a:hover { color: var(--deep); }
:focus-visible { outline: 3px solid var(--deep); outline-offset: 3px; border-radius: 10px; }
::selection { background: rgb(0 229 163 / 0.4); }
.section { padding-block: clamp(4.5rem, 2.5rem + 6vw, 7.5rem); }
.section--tight { padding-block: clamp(3rem, 2rem + 4vw, 5rem); }
.section--soft { background: #fff; border-block: 0; }
.section__head p, .lead { color: hsl(var(--ink-soft)); }
.eyebrow { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.18em; color: hsl(var(--green-text)); }
.prose { font-weight: 400; }
.prose p, .prose li { color: hsl(var(--ink)); }

/* Einblenden beim Scrollen: Inhalte sind immer sichtbar, nur die Bewegung kommt dazu */
.js .reveal { opacity: 1; transform: translateY(18px); transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.js .reveal.is-in { transform: none; }

/* 13.2 Buttons: Pillen in Tiefgrün, Akzent in EKG-Grün, hell mit feinem Rand */
.btn {
  --face: 164 76% 10%; --on: 0 0% 100%;
  min-height: 52px; padding: 0.8rem 1.6rem; border: 0; border-radius: 999px;
  background: hsl(var(--face)); color: hsl(var(--on));
  font-family: var(--font); font-size: 1rem; font-weight: 600; letter-spacing: 0; text-transform: none;
  box-shadow: 0 14px 30px -16px rgb(6 44 34 / 0.85);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.btn:hover { color: hsl(var(--on)); filter: none; transform: translateY(-2px); box-shadow: 0 18px 36px -14px rgb(0 229 163 / 0.85); }
.btn:active, .btn.is-pressed { transform: translateY(0); box-shadow: 0 10px 22px -16px rgb(6 44 34 / 0.85); }
.btn .icon { width: 1.2em; height: 1.2em; stroke-width: 2.2; }
.btn--blue, .btn--orange, .btn--yellow, .btn--purple, .btn--pink { --face: 163 100% 45%; --on: 164 76% 10%; box-shadow: 0 14px 30px -16px rgb(0 168 118 / 0.9); }
.btn--white { --face: 0 0% 100%; --on: 164 76% 10%; box-shadow: inset 0 0 0 1px rgb(6 44 34 / 0.14), 0 10px 24px -18px rgb(6 44 34 / 0.5); }
.btn--white:hover { background: #fff; box-shadow: inset 0 0 0 1.5px var(--ekg), 0 16px 30px -16px rgb(0 229 163 / 0.7); }
.btn--ghost { --on: 164 76% 10%; background: transparent; box-shadow: none; }
.btn--ghost:hover { background: rgb(6 44 34 / 0.06); box-shadow: none; }
.btn--sm { min-height: 44px; padding: 0.55rem 1.15rem; font-size: 0.92rem; }
.btn--lg { min-height: 56px; padding: 0.95rem 1.9rem; font-size: 1.04rem; }
.btn[disabled], .btn[aria-disabled="true"] { --face: 150 25% 88%; --on: 215 19% 42%; box-shadow: none; transform: none; }
.btn[disabled]:active, .btn[aria-disabled="true"]:active { transform: none; box-shadow: none; }

/* Auf grünen Flächen: helle Buttons als Glas mit feinem Rand */
.hero .btn--white, .page-hero .btn--white, .cta .btn--white, .site-header:not(.is-solid) .btn--white {
  background: rgb(255 255 255 / 0.4); box-shadow: inset 0 0 0 1px rgb(6 44 34 / 0.15); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.hero .btn--white:hover, .page-hero .btn--white:hover, .cta .btn--white:hover, .site-header:not(.is-solid) .btn--white:hover { background: rgb(255 255 255 / 0.6); }
.hero .btn--ghost:hover, .page-hero .btn--ghost:hover, .cta .btn--ghost:hover { background: rgb(255 255 255 / 0.35); }

/* 13.3 Karten, Kacheln, Badges, Chips */
.card, .bento__card, .faq details, .loc, .news-card, .wizard, .picker, .access__card {
  background: rgb(255 255 255 / 0.82); border: 1px solid rgb(0 229 163 / 0.25); border-radius: var(--r-lg);
  box-shadow: 0 24px 48px -34px rgb(6 44 34 / 0.45);
}
.section--soft .card, .section--soft .bento__card, .section--soft .faq details, .section--soft .news-card { background: #fff; }
.card--green, .card--blue, .card--orange, .card--pink, .bento__card--green, .bento__card--blue, .bento__card--yellow, .bento__card--pink {
  background: hsl(var(--green-soft)); border-color: rgb(0 229 163 / 0.3); box-shadow: 0 24px 48px -36px rgb(0 168 118 / 0.6);
}
.card--blue, .bento__card--blue { background: hsl(var(--blue-soft)); }
.card--soft { background: hsl(var(--bg-soft)); box-shadow: none; }
.card--link, .news-card, .bento__card { transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, border-color 0.3s ease; }
.card--link:hover, .news-card:hover { transform: translateY(-6px); border-color: rgb(0 229 163 / 0.6); box-shadow: 0 34px 70px -30px rgb(0 229 163 / 0.8); }
.card--link:active, .news-card:active { transform: translateY(-2px); box-shadow: 0 20px 40px -28px rgb(0 229 163 / 0.8); }
/* Grüner Schein folgt dem Mauszeiger (main.js setzt --mx und --my) */
.card--link::after, .news-card::after, .bento__card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.3s ease;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgb(0 229 163 / 0.2), transparent 62%);
}
.card--link:hover::after, .news-card:hover::after, .bento__card:hover::after { opacity: 1; }
.news-card__top { border-bottom: 1px solid rgb(0 229 163 / 0.2); }

.tile, .tile--sm {
  background: rgb(0 229 163 / 0.15); color: hsl(var(--green-text)); border-radius: 18px;
  box-shadow: inset 0 0 0 1px rgb(0 229 163 / 0.3);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.tile--sm { border-radius: 14px; }
.tile--blue, .tile--purple { background: var(--deep); color: var(--ekg); box-shadow: 0 10px 20px -12px rgb(6 44 34 / 0.7); }
.tile--teal { background: hsl(172 66% 50% / 0.18); color: hsl(175 84% 26%); box-shadow: inset 0 0 0 1px hsl(172 66% 50% / 0.38); }
.tile--orange, .tile--yellow { background: hsl(var(--green-soft)); color: hsl(var(--orange-text)); box-shadow: inset 0 0 0 1px rgb(0 229 163 / 0.35); }
.tile--pink { background: var(--ekg); color: var(--deep); box-shadow: 0 10px 20px -12px rgb(0 168 118 / 0.9); }
.tile--red { background: hsl(var(--red-soft)); color: hsl(var(--red-text)); box-shadow: inset 0 0 0 1px hsl(var(--red) / 0.5); }
.card--link:hover .tile, .bento__card:hover .tile:not(.tile--blue):not(.tile--purple) { background: var(--ekg); color: var(--deep); }
.float-badge .tile, .lang__option .tile--sm { box-shadow: inset 0 0 0 1px rgb(0 229 163 / 0.3); }
.float-badge .tile--blue, .lang__option .tile--blue { box-shadow: none; }

.badge {
  border: 0; padding: 0.3rem 0.8rem; background: rgb(0 229 163 / 0.18); color: hsl(var(--orange-text));
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.01em; text-transform: none;
}
.badge--blue { background: hsl(var(--blue-soft)); color: hsl(175 84% 24%); box-shadow: inset 0 0 0 1px hsl(var(--blue-line)); }
.badge--orange, .badge--yellow { background: hsl(var(--green-soft)); color: hsl(var(--orange-text)); }
.badge--purple { background: var(--deep); color: var(--ekg); }
.badge--pink, .badge--teal { background: hsl(var(--teal-soft)); color: hsl(175 84% 22%); }

.chip {
  border: 0; background: #fff; color: rgb(6 44 34 / 0.8); font-weight: 600;
  box-shadow: inset 0 0 0 1px rgb(6 44 34 / 0.12);
}
.chip:hover { background: hsl(var(--green-soft)); }
.chip:active { transform: translateY(1px); }
.chip[aria-pressed="true"], .chip[aria-selected="true"], .chip[aria-current="page"] { background: var(--deep); color: #fff; box-shadow: 0 10px 22px -14px rgb(6 44 34 / 0.9); }
.dims li { border: 0; background: hsl(var(--teal-soft)); color: hsl(175 84% 22%); box-shadow: inset 0 0 0 1px hsl(var(--teal-line)); font-weight: 600; }

.checklist li { font-weight: 500; color: var(--deep); }
.checklist .icon { background: var(--ekg); color: var(--deep); box-shadow: 0 6px 16px -6px rgb(0 201 140 / 0.9); }
.progress { background: hsl(var(--green-soft)); }
.progress__bar { background: hsl(162 100% 39%); }
.progress-label, .wizard__count, .pillar__num, .hp__count { font-weight: 700; color: hsl(var(--ink-soft)); }

/* 13.4 Formulare: weisse Felder mit feinem Rand, grüne Auswahl */
.field__label { font-weight: 600; color: var(--deep); }
.input, .select, .textarea {
  border: 0; border-radius: 16px; background: #fff; color: var(--deep); font-weight: 400;
  box-shadow: inset 0 0 0 1px rgb(6 44 34 / 0.14);
}
.input:hover, .select:hover, .textarea:hover { background: #fff; box-shadow: inset 0 0 0 1px rgb(6 44 34 / 0.24); }
.input:focus, .select:focus, .textarea:focus { background: #fff; box-shadow: inset 0 0 0 1.5px hsl(162 100% 39%), 0 0 0 4px rgb(0 229 163 / 0.25); }
.input::placeholder, .textarea::placeholder { color: hsl(215 16% 47%); font-weight: 400; }
.field.has-error .input, .field.has-error .select, .field.has-error .textarea { background: hsl(var(--red-soft)); box-shadow: inset 0 0 0 1.5px hsl(var(--red-edge)); }
.field__error { font-weight: 600; }
.check { font-weight: 500; }
.option__body, .role-switch__body {
  border: 0; border-radius: 22px; background: #fff;
  box-shadow: inset 0 0 0 1px rgb(0 229 163 / 0.35), 0 16px 32px -28px rgb(6 44 34 / 0.5);
}
.option:hover .option__body, .role-switch__opt:hover .role-switch__body { background: hsl(var(--bg)); }
.option input:active + .option__body, .role-switch__opt input:active + .role-switch__body { transform: translateY(1px); }
.option input:checked + .option__body, .role-switch__opt input:checked + .role-switch__body {
  background: hsl(var(--green-soft)); box-shadow: inset 0 0 0 2px hsl(162 100% 39%), 0 18px 34px -26px rgb(0 168 118 / 0.8);
}
.option__title, .role-switch__title { font-weight: 700; color: var(--deep); }
.option input:checked + .option__body .option__title, .role-switch__opt input:checked + .role-switch__body .role-switch__title { color: hsl(var(--orange-text)); }
.option__text, .role-switch__text { font-weight: 400; }
.option__tick { border: 0; box-shadow: inset 0 0 0 1.5px rgb(6 44 34 / 0.2); }
.option input:checked + .option__body .option__tick { background: var(--ekg); color: var(--deep); box-shadow: none; }
.role-switch.has-error .role-switch__body { box-shadow: inset 0 0 0 1.5px hsl(var(--red-edge)); }
.notice { border: 0; border-radius: 18px; background: hsl(var(--green-soft)); color: hsl(var(--orange-text)); font-weight: 500; box-shadow: inset 0 0 0 1px rgb(0 229 163 / 0.35); }
.notice--soft { background: #fff; color: hsl(var(--ink)); }
.wizard__nav { border-top: 1px solid rgb(0 229 163 / 0.25); }
.picker__foot { border-top: 1px solid rgb(0 229 163 / 0.25); }

/* 13.5 Sprechblasen: weiss, weicher Schatten, Spitze ohne Rand */
.bubble, .orami__bubble, .tip p {
  border: 0; font-weight: 600; color: var(--deep);
  box-shadow: 0 12px 30px -14px rgb(6 44 34 / 0.45), 0 0 0 1px rgb(6 44 34 / 0.05);
}
.bubble::before, .orami__bubble::before, .tip p::before { display: none; }
.bubble::after { top: calc(100% - 1px); }
.bubble--up::after { bottom: calc(100% - 1px); }
.mascot { filter: drop-shadow(0 16px 18px rgb(6 44 34 / 0.18)); }

/* 13.6 Kopfzeile: grün über dem grünen Seitenkopf, beim Scrollen hell mit Unschärfe */
.site-header { top: 0; padding-top: env(safe-area-inset-top, 0px); border-bottom: 0; transition: box-shadow 0.3s ease; }
.site-header::before { background: var(--ekg); -webkit-backdrop-filter: none; backdrop-filter: none; transition: background-color 0.3s ease; }
.site-header.is-solid { box-shadow: 0 10px 30px -18px rgb(6 44 34 / 0.45); }
.site-header.is-solid::before { background: rgb(255 255 255 / 0.86); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px); }
.nav__link, .nav__trigger {
  border: 0; border-radius: 999px; padding: 0.55rem 0.95rem; color: rgb(6 44 34 / 0.8);
  font-family: var(--font); font-size: 0.95rem; font-weight: 600; letter-spacing: 0; text-transform: none;
}
.nav__link:hover, .nav__trigger:hover { background: rgb(6 44 34 / 0.07); color: var(--deep); }
.nav__link[aria-current="page"], .nav__trigger.is-current { background: rgb(6 44 34 / 0.1); color: var(--deep); }
.dropdown {
  top: calc(100% + 12px); padding: 0.55rem; border: 1px solid rgb(0 229 163 / 0.3); border-radius: 26px; background: #fff;
  box-shadow: 0 30px 60px -28px rgb(6 44 34 / 0.45);
}
.dropdown a { border-radius: 18px; color: var(--deep); }
.dropdown a:hover { background: hsl(var(--bg)); }
.dropdown a[aria-current="page"] { background: hsl(var(--green-soft)); }
.dropdown__title { font-weight: 700; font-size: 0.97rem; }
.dropdown__text { font-weight: 400; }
.brand-logo { --logo-ink: var(--deep); --logo-pulse: #fff; --logo-glow: var(--deep); }
.site-header.is-solid .brand-logo { --logo-pulse: hsl(162 100% 39%); --logo-glow: var(--deep); }
.on-dark .brand-logo, .brand-logo--light, .site-footer .brand-logo, .drawer__head .brand-logo { --logo-ink: #fff; --logo-pulse: var(--ekg); --logo-glow: #fff; }
/* Ein Lichtpuls läuft wie ein Herzschlag über die EKG-Linie des Logos */
@supports ((-webkit-mask-image: url("x.png")) or (mask-image: url("x.png"))) {
  .brand-logo__pulse {
    background: linear-gradient(90deg, var(--logo-pulse) 0 44%, var(--logo-glow) 50%, var(--logo-pulse) 56% 100%);
    background-size: 320% 100%; background-position: 100% 0; animation: logo-sweep 3.2s ease-in-out 1s infinite;
  }
}
@keyframes logo-sweep { 0% { background-position: 100% 0; } 45%, 100% { background-position: 0% 0; } }

@media (max-width: 1240px) {
  .nav-toggle { border: 0; border-radius: 999px; background: rgb(6 44 34 / 0.08); color: var(--deep); box-shadow: none; }
  .nav-toggle:hover { background: rgb(6 44 34 / 0.14); }
  .nav-toggle:active { transform: scale(0.96); box-shadow: none; }
  .site-header.is-solid .nav-toggle { background: hsl(var(--green-soft)); }
  .nav { background: var(--mint); border-radius: 28px 0 0 28px; }
  .drawer__head { background: var(--deep); }
  .drawer__close { border: 0; border-radius: 999px; background: rgb(255 255 255 / 0.12); box-shadow: none; }
  .nav__link, .nav__trigger {
    justify-content: space-between; min-height: 56px; padding-inline: 1.15rem; background: #fff; border: 0; border-radius: 20px;
    color: var(--deep); font-size: 1rem; box-shadow: inset 0 0 0 1px rgb(0 229 163 / 0.3);
  }
  .nav__link:active, .nav__trigger:active { transform: scale(0.99); box-shadow: inset 0 0 0 1px rgb(0 229 163 / 0.5); }
  .nav__trigger[aria-expanded="true"] { background: hsl(var(--green-soft)); }
  .dropdown { border: 0; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px rgb(0 229 163 / 0.25); }
  .drawer__more a { border: 0; border-radius: 20px; box-shadow: inset 0 0 0 1px rgb(0 229 163 / 0.3); color: var(--deep); font-weight: 600; }
  .drawer__more .icon { color: hsl(var(--green-text)); }
  .drawer__contact .chip { box-shadow: inset 0 0 0 1px rgb(6 44 34 / 0.12); }
  .drawer__legal a { font-weight: 600; }
  .nav-backdrop { background: rgb(6 44 34 / 0.55); }
}
@media (max-width: 900px) {
  .site-header::before { background: var(--ekg); }
  .site-header.is-solid::before { background: rgb(255 255 255 / 0.95); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* 13.7 Grüne Seitenköpfe mit Welle, wie die Landingpage */
.hero, .page-hero {
  position: relative; isolation: isolate; border-bottom: 0; color: var(--deep);
  background: radial-gradient(55% 60% at 12% 8%, rgb(255 255 255 / 0.5), transparent 62%), radial-gradient(40% 45% at 92% 72%, rgb(6 44 34 / 0.16), transparent 70%), var(--ekg);
}
.page-hero--green, .page-hero--orange, .page-hero--purple, .page-hero--teal, .page-hero--pink { background: radial-gradient(55% 60% at 12% 8%, rgb(255 255 255 / 0.5), transparent 62%), radial-gradient(40% 45% at 92% 72%, rgb(6 44 34 / 0.16), transparent 70%), var(--ekg); }
.hero { padding-block: clamp(2.5rem, 1rem + 5vw, 5rem) calc(clamp(3rem, 1.5rem + 5vw, 5.5rem) + clamp(48px, 6vw, 84px)); }
.page-hero { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) calc(clamp(2rem, 1rem + 3vw, 3.5rem) + clamp(44px, 5vw, 76px)); }
.hero::after, .page-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; z-index: 1; height: clamp(44px, 5.5vw, 84px); pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 52C240 92 480 6 720 30C960 54 1200 96 1440 46V90H0Z' fill='%23F0FDF4'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
}
.hero h1, .page-hero h1 { color: var(--deep); }
.hero h1 { font-size: clamp(2.4rem, 1.4rem + 3.8vw, 4.1rem); }
.page-hero h1 { font-size: clamp(2.2rem, 1.3rem + 3.6vw, 3.6rem); line-height: 1.06; }
.hero h1 .accent, .page-hero h1 .accent {
  color: inherit; padding: 0 0.04em; border-radius: 0.2em;
  background-image: linear-gradient(transparent 58%, rgb(255 255 255 / 0.78) 58%, rgb(255 255 255 / 0.78) 94%, transparent 94%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.hero .lead, .page-hero .lead, .hero__lead { color: rgb(6 44 34 / 0.8); }
.hero .eyebrow, .page-hero .eyebrow {
  padding: 0.5rem 1rem; border-radius: 999px; background: rgb(6 44 34 / 0.1); box-shadow: inset 0 0 0 1px rgb(6 44 34 / 0.15);
  color: var(--deep); font-size: 0.9rem; font-weight: 600; letter-spacing: 0; text-transform: none;
}
.hero__direct { color: rgb(6 44 34 / 0.8); font-weight: 500; }
.hero__direct a, .page-hero a:not(.btn) { color: var(--deep); }
.crumbs { color: rgb(6 44 34 / 0.7); font-weight: 600; }
.crumbs li + li::before { color: rgb(6 44 34 / 0.35); }
.page-hero .badge { background: rgb(255 255 255 / 0.55); color: var(--deep); }
.page-hero .meta-line, .page-hero .article-meta { color: rgb(6 44 34 / 0.75); }

/* Startseite: Orami im Arztkittel vor dem Herzschlag, Kennzahlen als schwebende Karten */
.hero .hero__sky { display: none; }
.hero__art::before { content: ""; position: absolute; left: 50%; top: 46%; width: 96%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, rgb(255 255 255 / 0.75), rgb(255 255 255 / 0) 68%); }
.hero__mascot { inset: 4% 13% 2%; }
.hero__ekg { position: absolute; left: -14%; top: 50%; width: 175%; height: auto; transform: translateY(-50%); overflow: visible; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); }
.hero__ekg path { fill: none; stroke: #fff; stroke-linejoin: round; stroke-linecap: round; }
.hero__ekg-base { stroke-width: 3; opacity: 0.3; }
.hero__ekg-line { stroke-width: 3.5; stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: ekg-draw 3.6s ease-in-out infinite; }
@keyframes ekg-draw { 0% { stroke-dashoffset: 1; opacity: 1; } 78% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.float-badge {
  border: 0; border-radius: 20px; background: rgb(255 255 255 / 0.95); color: var(--deep); font-weight: 600;
  box-shadow: 0 24px 50px -22px rgb(6 44 34 / 0.6);
}
.float-badge strong { font-family: var(--font-display); font-weight: 800; }
.float-badge small { font-weight: 500; }
.float-badge:nth-child(2) { right: -8%; }

/* Seitenköpfe der Unterseiten: Orami mit Sprechblase */
.page-hero__side .bubble, .page-hero .bubble { background: #fff; }
.page-hero__mascot { filter: drop-shadow(0 18px 20px rgb(6 44 34 / 0.22)); }

/* 13.8 Dunkle Flächen: Zahlenband und Pfadkarte in Tiefgrün mit grünem Schein */
.band { background: radial-gradient(38% 55% at 20% 46%, rgb(0 229 163 / 0.28), transparent 70%), radial-gradient(30% 40% at 92% 8%, rgb(0 229 163 / 0.14), transparent 70%), var(--deep); border-radius: var(--r-xl); }
.band .lead, .band p { color: rgb(255 255 255 / 0.75); }
.band .ring { --track: 164 40% 22%; --bar: 163 100% 45%; }
.stat { border: 1px solid rgb(255 255 255 / 0.1); border-radius: 22px; background: rgb(255 255 255 / 0.06); }
.stat__num { font-family: var(--font-display); font-weight: 800; color: var(--ekg); }
.stat__label { font-weight: 500; color: rgb(255 255 255 / 0.75); }
.pathmap__stage {
  border: 0; border-radius: var(--r-xl);
  background: radial-gradient(2px 2px at 14% 12%, #fff8 50%, transparent 52%), radial-gradient(2px 2px at 82% 22%, #fff7 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 30% 46%, #fff6 50%, transparent 52%), radial-gradient(2px 2px at 90% 64%, #fff6 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 8% 82%, #fff6 50%, transparent 52%), radial-gradient(60% 40% at 50% 0%, rgb(0 229 163 / 0.22), transparent 70%), var(--deep);
  box-shadow: 0 34px 70px -34px rgb(6 44 34 / 0.85);
}
.pathmap__head .badge { background: rgb(255 255 255 / 0.08); color: var(--ekg); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12); }
.pathmap__head p, .trail__label, .trail__divider { color: rgb(255 255 255 / 0.72); }
.trail__svg path { stroke: rgb(255 255 255 / 0.22); }
.trail__node { --face: 164 45% 20%; --edge-c: 164 70% 6%; --on: 150 25% 78%; }
.trail__bubble { border-color: rgb(0 229 163 / 0.5); background: var(--deep); color: var(--ekg); }
.trail__bubble::after { border-top-color: rgb(0 229 163 / 0.5); }
.trail__divider::before, .trail__divider::after { background: rgb(255 255 255 / 0.14); }
.trail__node--jump { --face: 163 100% 45%; --edge-c: 162 100% 30%; --on: 164 76% 10%; }
.trail__item--jump .trail__bubble { color: var(--ekg); }
.trail__sheep { filter: drop-shadow(0 8px 10px rgb(0 0 0 / 0.4)); }

/* 13.9 Aufruf-Banner: leuchtendes Grün mit Herzschlag, Orami springt mit dem Umschlag */
.cta {
  border-radius: var(--r-xl); color: var(--deep);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 140' preserveAspectRatio='none'%3E%3Cpath d='M0 70H150l14-10 12 10H250l10 14 18-64 20 92 14-42 12 10H460l14-10 12 10H560l10 14 18-64 20 92 14-42 12 10H770l14-10 12 10H870l10 14 18-64 20 92 14-42 12 10H1200' fill='none' stroke='white' stroke-opacity='.55' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") left 0 bottom 6px / 1200px 96px repeat-x,
    radial-gradient(40% 70% at 100% 0%, rgb(255 255 255 / 0.35), transparent 70%),
    linear-gradient(125deg, #00e5a3 0%, #00f5a0 50%, #7affd3 100%);
  box-shadow: 0 40px 90px -40px rgb(0 201 140 / 0.9);
}
.cta { padding-bottom: calc(clamp(1.75rem, 1rem + 3vw, 3.5rem) + 64px); }
.cta h2 { color: var(--deep); }
.cta .btn--white { --face: 164 76% 10%; --on: 0 0% 100%; background: var(--deep); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 14px 30px -16px rgb(6 44 34 / 0.85); }
.cta .btn--white:hover { background: var(--deep); box-shadow: 0 18px 36px -14px rgb(6 44 34 / 0.9); }
.cta p { font-weight: 500; color: rgb(6 44 34 / 0.8); }
.cta__mascot { filter: drop-shadow(0 22px 22px rgb(6 44 34 / 0.25)); animation: cta-jump 2.6s cubic-bezier(0.33, 0, 0.25, 1) infinite; }
@keyframes cta-jump { 0%, 42%, 100% { transform: translateY(0) rotate(0); } 20% { transform: translateY(-22px) rotate(-2.5deg); } }

/* 13.10 FAQ, Standorte, News, Haltung, Fliesstext */
.faq details { border-radius: 22px; }
.faq details[open] { background: #fff; border-color: rgb(0 229 163 / 0.6); box-shadow: 0 30px 60px -36px rgb(0 168 118 / 0.6); }
.faq summary { font-family: var(--font-display); font-weight: 700; color: var(--deep); }
.faq summary .icon { color: hsl(162 100% 33%); }
.loc { border-radius: 22px; }
.loc.is-active, .loc--hq.is-active { background: hsl(var(--green-soft)); border-color: hsl(162 100% 39%); box-shadow: 0 24px 48px -30px rgb(0 168 118 / 0.7); }
.loc--hq { background: #fff; border-color: rgb(0 229 163 / 0.45); }
.loc__btn { font-family: var(--font-display); font-weight: 700; color: var(--deep); text-decoration-color: rgb(0 229 163 / 0.6); }
.loc__btn:hover { text-decoration-color: var(--deep); }
.map-card { background: #fff; border: 1px solid rgb(0 229 163 / 0.3); box-shadow: 0 24px 48px -34px rgb(6 44 34 / 0.45); }
.map__country { stroke: rgb(6 44 34 / 0.35); filter: drop-shadow(0 10px 0 hsl(var(--green-soft))); }
.pin__label { border: 0; box-shadow: 0 6px 14px -8px rgb(6 44 34 / 0.5); color: var(--deep); font-weight: 700; }
.pin.is-active .pin__label { background: var(--deep); color: #fff; }
.pin.is-active .pin__dot { box-shadow: 0 4px 0 hsl(var(--edge-c)), 0 0 0 4px #fff, 0 0 0 7px var(--deep); }
.news-card h3 a { color: var(--deep); }
.news-card:hover h3 a { color: hsl(var(--green-text)); }
.golden { border: 0; border-radius: 26px; background: hsl(var(--green-soft)); box-shadow: inset 0 0 0 1px rgb(0 229 163 / 0.35); }
.golden::before { color: hsl(162 100% 39%); }
.golden p { font-family: var(--font-display); font-weight: 700; color: var(--deep); }
.verse { border-left-color: var(--ekg); }
.verse p { font-weight: 500; }
.prose blockquote { border-left-color: var(--ekg); background: hsl(var(--green-soft)); font-weight: 500; }
.toc a { font-weight: 600; }
.toc a:hover { background: hsl(var(--green-soft)); }
.tipcard__num, .crit li::before { background: var(--ekg); color: var(--deep); box-shadow: 0 8px 18px -10px rgb(0 168 118 / 0.9); font-family: var(--font-display); }
.scale b { box-shadow: none; }
.kpi__num { font-family: var(--font-display); font-weight: 800; color: var(--deep); }
.level__dots i.on { box-shadow: none; }

/* 13.11 Fusszeile in Tiefgrün */
.site-footer {
  border-top: 0; color: rgb(255 255 255 / 0.75);
  background: radial-gradient(40% 60% at 0% 0%, rgb(0 229 163 / 0.16), transparent 70%), var(--deep);
}
.footer__brand p, .footer__col address, .footer__line { color: rgb(255 255 255 / 0.72); font-weight: 400; }
.footer__firm { color: #fff; font-family: var(--font-display); font-weight: 700; }
.footer__col h2 { color: var(--ekg); font-family: var(--font); font-weight: 700; letter-spacing: 0.16em; }
.footer__col a, .footer__legalnav a { color: rgb(255 255 255 / 0.78); font-weight: 500; }
.footer__col a:hover, .footer__legalnav a:hover { color: var(--ekg); }
.footer__tap .icon { color: var(--ekg); }
.footer__legalnav { border-top: 1px solid rgb(255 255 255 / 0.12); }
.footer__bottom { color: rgb(255 255 255 / 0.55); font-weight: 400; }
.site-footer :focus-visible { outline-color: var(--ekg); }

/* 13.12 Ladebildschirm und Orami als Begleiter */
.splash { background: radial-gradient(60% 50% at 50% 42%, #0b4a39 0%, var(--deep) 72%); }
.orami__face { box-shadow: 0 14px 26px -10px rgb(6 44 34 / 0.5), 0 0 0 1px rgb(0 229 163 / 0.3); }
.orami__face img { top: 7px; width: 66px; }
.orami__track { stroke: hsl(var(--green-soft)); }
.orami__bar, .orami.is-end .orami__bar { stroke: hsl(162 100% 39%); }
.drawer__orami .mascot { width: 70px; }
@media (max-width: 560px) { .orami__face img { top: 6px; width: 56px; } }

/* 13.13 Sprachwechsler: runde Glas-Pille im grünen Kopf, weiss beim Scrollen */
.lang__trigger {
  gap: 0.45rem; min-height: 44px; padding: 0.45rem 0.85rem 0.45rem 0.7rem; border: 0; border-radius: 999px;
  background: rgb(255 255 255 / 0.4); color: var(--deep); box-shadow: inset 0 0 0 1px rgb(6 44 34 / 0.15);
  font-family: var(--font); font-size: 0.92rem; font-weight: 600; letter-spacing: 0;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.12s ease;
}
.lang__trigger:hover { background: rgb(255 255 255 / 0.62); }
.lang__trigger:active { transform: scale(0.97); box-shadow: inset 0 0 0 1px rgb(6 44 34 / 0.15); }
.lang__trigger[aria-expanded="true"] { background: #fff; box-shadow: inset 0 0 0 1.5px var(--deep); }
.site-header.is-solid .lang__trigger { background: #fff; box-shadow: inset 0 0 0 1px rgb(6 44 34 / 0.12); }
.site-header.is-solid .lang__trigger[aria-expanded="true"] { box-shadow: inset 0 0 0 1.5px var(--deep); }
.lang__globe { color: var(--deep); }
.lang__list { border: 0; border-radius: 26px; padding: 0.5rem; box-shadow: 0 30px 60px -28px rgb(6 44 34 / 0.45), 0 0 0 1px rgb(0 229 163 / 0.3); }
.lang__list:focus-visible { box-shadow: 0 30px 60px -28px rgb(6 44 34 / 0.45), 0 0 0 3px var(--deep); }
.lang__option { border-radius: 18px; color: var(--deep); }
.lang__option.is-active { background: var(--mint); }
.lang__option[aria-selected="true"] { background: hsl(var(--green-soft)); }
.lang__endonym { font-weight: 700; }
.lang__exonym { font-weight: 500; color: hsl(var(--ink-soft)); }
.lang__check { color: hsl(162 100% 33%); }
@media (max-width: 1240px) {
  .lang__trigger { width: 48px; height: 48px; padding: 0; border-radius: 999px; background: rgb(6 44 34 / 0.08); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .site-header.is-solid .lang__trigger { background: hsl(var(--green-soft)); box-shadow: none; }
}

/* 13.14 Orami-Pfad: Türkis füllt den Weg, Karten wie auf der Landingpage, der 3D-Hirte am Ziel */
.hp__track-edge { stroke: hsl(152 45% 80%); }
.hp__fill { stroke: hsl(var(--teal)); }
.hp__fill-edge { stroke: hsl(var(--teal-edge)); }
.hp__node { border-width: 3px; }
.hp__card {
  border: 1px solid rgb(0 229 163 / 0.25); border-radius: var(--r-lg); background: rgb(255 255 255 / 0.9);
  box-shadow: 0 24px 48px -34px rgb(6 44 34 / 0.45);
}
.hp__station.is-current .hp__card { border-color: hsl(var(--teal) / 0.7); box-shadow: 0 30px 60px -30px hsl(var(--teal) / 0.85); }
.hp__card h3 { font-family: var(--font-display); }
.hp__bubble { border: 0; font-weight: 600; box-shadow: 0 12px 30px -14px rgb(6 44 34 / 0.45), 0 0 0 1px rgb(6 44 34 / 0.05); }
.hp__bubble::before { display: none; }
.hp__bubble::after { margin-top: -1px; }
.hp__halo { background: radial-gradient(closest-side, rgb(0 229 163 / 0.38), rgb(0 229 163 / 0.14) 58%, transparent 74%); }
.hp__hearts i { color: hsl(162 100% 39%); }
.hp__figure { --shoulder-x: 0.64; --shoulder-y: 0.44; --shoulder-size: 0.26; }
.hp__shepherd { filter: drop-shadow(0 18px 20px rgb(6 44 34 / 0.2)); }
.hp__orami-img { filter: drop-shadow(0 8px 9px rgb(6 44 34 / 0.24)); }
.hp__eyebrow { color: hsl(var(--green-text)); }

/* 13.15 Unsere Haltung: heller Schein statt Himmel, 3D-Hirte auf der grünen Insel */
.haltung__art .hero__sky { border: 0; box-shadow: none; background: radial-gradient(circle at 50% 45%, #fff 0%, rgb(255 255 255 / 0.6) 45%, rgb(0 229 163 / 0.16) 70%, transparent 71%); }
.haltung__art .hero__sky::after { display: none; }
.scene__shadow--hirte { left: 35%; width: 32%; }
.shepherd__orami { left: 52%; top: 26%; width: 17%; }
.shepherd { filter: drop-shadow(0 18px 20px rgb(6 44 34 / 0.18)); }
.scene__hearts i { color: hsl(162 100% 39%); }

@media (prefers-reduced-motion: reduce) {
  .brand-logo__pulse, .hero__ekg-line, .cta__mascot { animation: none !important; }
  .hero__ekg-line { stroke-dashoffset: 0; }
  .js .reveal { transform: none; }
}


/* ---------- 14 Netzwerk Karte: Hauptsitz Schlieren und die Kantone auf Umlaufbahnen ---------- */
.netz-section { background: #fafdfb; overflow-x: clip; }
.netz-fallback { max-width: 46em; margin: 0 auto; text-align: center; color: hsl(var(--ink-soft)); }
.netz { --badge: clamp(40px, 8.4%, 62px); --turq: hsl(var(--teal)); }
/* Nördlich von Schlieren liegt kaum ein Kanton: der obere Teil der Bahnen rückt unter die Einleitung und blendet weich aus */
.netz__map {
  position: relative; width: min(100%, 680px); aspect-ratio: 1; margin: calc(min(100%, 680px) * -0.13) auto 0; isolation: isolate;
  -webkit-mask-image: linear-gradient(to bottom, transparent 3%, #000 21%); mask-image: linear-gradient(to bottom, transparent 3%, #000 21%);
  pointer-events: none;
}
.netz__badge { pointer-events: auto; }
/* Landesgrenze als ruhiger Hintergrund, Schlieren liegt unter dem Zentrum */
.netz__land { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: -1; pointer-events: none; }
.netz__land-fill { fill: hsl(152 60% 94% / 0.9); }
.netz__land-line { fill: none; stroke: hsl(var(--teal) / 0.55); stroke-width: 0.35; stroke-linejoin: round; stroke-linecap: round; }
.netz__glow { position: absolute; inset: 18%; border-radius: 50%; background: radial-gradient(circle, rgb(0 229 163 / 0.22), transparent 68%); z-index: -1; }
.netz__track {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; border-radius: 50%;
  border: 1.5px dashed hsl(var(--teal) / 0.28); pointer-events: none;
}
.netz__ring { position: absolute; inset: 0; }
.netz__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.netz__lines line { stroke: var(--turq); stroke-width: 0.26; stroke-linecap: round; filter: drop-shadow(0 0 3px hsl(var(--teal) / 0.55)); opacity: 0.85; }
.netz__slot { position: absolute; width: var(--badge); aspect-ratio: 1; translate: -50% -50%; }

.netz__badge {
  position: relative; display: grid; place-items: center; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: linear-gradient(180deg, #fff 0%, #f3faf6 100%); color: var(--deep);
  box-shadow: 0 4px 0 hsl(152 40% 82%), 0 12px 22px -12px rgb(6 44 34 / 0.45), inset 0 0 0 1px rgb(0 229 163 / 0.28);
  -webkit-tap-highlight-color: transparent;
}
.netz__badge:hover, .netz__badge:focus-visible { box-shadow: 0 5px 0 hsl(162 60% 70%), 0 18px 30px -12px hsl(var(--teal) / 0.75), inset 0 0 0 1.5px var(--turq); z-index: 3; }
.netz__badge:focus-visible { outline: 3px solid var(--deep); outline-offset: 3px; }
.netz__slot:has(.netz__badge:hover), .netz__slot:has(.netz__badge:focus-visible) { z-index: 5; }
.netz__arms { width: 58%; height: auto; filter: drop-shadow(0 1.5px 0 rgb(6 44 34 / 0.12)); }
.netz__code { font-family: var(--font-display); font-weight: 800; font-size: clamp(0.7rem, 2.1vw, 0.95rem); letter-spacing: 0.02em; }
.netz__name {
  position: absolute; left: 50%; bottom: calc(100% + 8px); translate: -50% 4px; padding: 0.35rem 0.75rem; border-radius: 999px; white-space: nowrap;
  background: var(--deep); color: #fff; font-size: 0.82rem; font-weight: 600; line-height: 1.2; pointer-events: none;
  box-shadow: 0 10px 22px -10px rgb(6 44 34 / 0.7); opacity: 0; transition: opacity 0.18s ease, translate 0.18s ease;
}
.netz__badge:hover .netz__name, .netz__badge:focus-visible .netz__name, .netz__badge:focus .netz__name { opacity: 1; translate: -50% 0; }

.netz__hub {
  position: absolute; left: 50%; top: 50%; z-index: 4; width: 25%; aspect-ratio: 1; margin: -12.5% 0 0 -12.5%; border-radius: 50%;
  display: grid; place-content: center; justify-items: center; gap: 0.15rem; text-align: center;
  background: linear-gradient(180deg, #fff 0%, #effcf5 100%);
  box-shadow: 0 7px 0 hsl(152 45% 78%), 0 26px 46px -20px rgb(6 44 34 / 0.55), inset 0 0 0 2px var(--turq);
}
.netz__hub-arms { width: clamp(30px, 34%, 64px); }
.netz__hub-arms .netz__arms { width: 100%; }
.netz__hub-arms .netz__code { font-size: clamp(1rem, 3.2vw, 1.6rem); }
.netz__hq { font-family: var(--font-display); font-weight: 800; font-size: clamp(0.62rem, 1.9vw, 0.98rem); line-height: 1.1; color: var(--deep); max-width: 88%; }
.netz__canton { font-size: clamp(0.55rem, 1.5vw, 0.78rem); font-weight: 500; color: hsl(var(--ink-soft)); }
.netz__pulse { position: absolute; inset: -8%; border-radius: 50%; border: 3px solid hsl(var(--teal) / 0.35); animation: ring-pulse 2.6s ease-out infinite; pointer-events: none; }
.netz__hint { margin: 1.25rem 0 0; text-align: center; font-size: 0.92rem; color: hsl(var(--ink-soft)); }
@media (max-width: 560px) {
  .netz { --badge: clamp(30px, 9.6%, 44px); }
  .netz__name { font-size: 0.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .netz__pulse { animation: none !important; }
}

/* ---------- 15 Login Menü: genau zwei Zugänge, Ärzte und Versicherung ---------- */
.login-menu { position: relative; }
.login__trigger { gap: 0.4rem; }
.login__chevron { width: 1.1em; height: 1.1em; transition: transform 0.2s; }
.login__trigger[aria-expanded="true"] .login__chevron { transform: rotate(180deg); }
.dropdown--login { left: auto; right: 0; min-width: 300px; }
@media (max-width: 1240px) {
  .login-menu { width: 100%; }
  .login-menu .login__trigger { width: 100%; justify-content: center; }
  .dropdown--login { right: auto; min-width: 0; }
}
.login__note { margin-top: 2rem; }
.dropdown--login a > span:not(.tile) { min-width: 0; }
.dropdown--login .dropdown__text { overflow-wrap: anywhere; }
.dropdown--login { white-space: normal; }