/* =====================================================================
   Escola im Kanton Solothurn — Portierung der Astro-Seite (escola-website
   src/pages/solothurn.astro, <style is:global>-Block) als PHP-Microsite.

   Dieser Kopfblock stellt die Umgebung her, die auf der Astro-Seite global
   gilt (Font-Tokens aus der Fonts-API/Tailwind-@theme, Tailwind-Preflight,
   smooth scrolling) — bewusst auf #solothurn begrenzt, damit Navigation und
   Footer der Hauptseite unberührt bleiben. Ab dem nächsten ===-Kommentar
   folgt das Seiten-CSS unverändert 1:1 aus der Astro-Quelle.
   ===================================================================== */

/* Font-Tokens der Astro-Umgebung → Webfonts dieser Seite (escola-page.css:
   Nunito 400/500/600/700, Gothamrounded 300/400/500/700 — identische
   Font-Files wie im Astro-Repo). */
#solothurn {
  --font-nunito: Nunito, sans-serif;
  --font-sans: Gothamrounded, sans-serif;
}

/* Smooth in-page anchor navigation (Astro global.css; dieses Stylesheet
   wird nur auf /solothurn geladen, wirkt also nicht auf andere Seiten). */
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Tailwind-Preflight-Parität: Resets, die im Astro-Build global gelten und
   auf denen das Seiten-CSS aufbaut (Bootstrap/Webflow liefern hier andere
   Defaults). */
#solothurn ul,
#solothurn ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
#solothurn blockquote,
#solothurn dl,
#solothurn dd,
#solothurn figure,
#solothurn h4,
#solothurn h5,
#solothurn h6 {
  margin: 0;
}
#solothurn a {
  color: inherit;
  text-decoration: inherit;
}
#solothurn img,
#solothurn svg,
#solothurn video,
#solothurn canvas,
#solothurn iframe {
  display: block;
  vertical-align: middle;
}
#solothurn img,
#solothurn video {
  max-width: 100%;
  height: auto;
}
#solothurn button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
}

/* =====================================================================
   Escola im Kanton Solothurn — scoped under #solothurn. Visual language
   (tokens, container, buttons, full-bleed bands) mirrors #webinar-verwaltung.
   ===================================================================== */
#solothurn {
  --so-primary: #333;
  /* Body-Text auf #333 wie escola.ch/digitale-verwaltung (Seitendefault
     text-[#333]); #666 wirkte zu hell. Kleine Captions/Notes bleiben heller. */
  --so-secondary: #333;
  --so-brand: #0083db;
  --so-brand-hover: #006ab3;
  --so-surface: #ffffff;
  --so-soft-blue: #f0f8ff;
  --so-border: #e5e5e5;

  --so-radius-card: 16px;
  --so-radius-btn: 6px;
  --so-shadow-card:
    0 5px 10px rgba(0, 0, 0, 0.06), 0 18px 18px rgba(0, 0, 0, 0.05), 0 41px 25px rgba(0, 0, 0, 0.03),
    0 73px 29px rgba(0, 0, 0, 0.01);

  font-family: var(--font-nunito);
  color: var(--so-primary);
  font-size: 1rem;
  line-height: 1.5;
  text-align: left;
  display: flex;
  flex-direction: column;
  row-gap: 2.5rem;
  overflow-x: clip;
  margin-top: 0; /* Navbar wird bereits vom 80px-Spacer im Header freigestellt */
}

#solothurn :is(h1, h2, h3, p) {
  text-align: inherit;
  margin: 0;
}

#solothurn h1,
#solothurn h2,
#solothurn h3 {
  color: var(--so-primary);
  font-family: var(--font-nunito);
  font-weight: 700;
  letter-spacing: 0;
}

#solothurn h1 {
  font-size: 1.875rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
#solothurn h2 {
  font-size: 1.5rem;
  line-height: 1.33;
}
#solothurn h3 {
  font-size: 1.25rem;
  line-height: 1.33;
}
#solothurn p {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--so-primary);
}
#solothurn .so-bold {
  font-weight: 700;
}

#solothurn .so-container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 1.25rem;
  position: relative;
  width: 100%;
}

/* ---------- Buttons ---------- */
#solothurn .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 2.5rem;
  padding: 0.5rem 1.25rem;
  background: var(--so-brand);
  color: #fff !important;
  font-family: var(--font-nunito);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.5;
  border: none;
  border-radius: var(--so-radius-btn);
  text-decoration: none !important;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
#solothurn .btn-primary:hover {
  background: var(--so-brand-hover);
  transform: translateY(-1px);
}
/* Persistenter Anmelde-CTA, fix am rechten Rand. */
#solothurn .so-sticky-cta {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 20;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.18),
    0 1px 3px rgba(0, 0, 0, 0.12);
}
@media (max-width: 600px) {
  #solothurn .so-sticky-cta {
    right: 0.75rem;
    bottom: 0.75rem;
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
  }
}
#solothurn .btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  column-gap: 0.5rem;
  height: 40px;
  padding: 0 1rem;
  background-color: #fff;
  color: var(--so-brand) !important;
  font-family: var(--font-nunito);
  font-weight: 700;
  border: 1px solid var(--so-border);
  border-radius: var(--so-radius-btn);
  text-decoration: none !important;
  white-space: nowrap;
  transition: border-color 0.2s ease;
}
#solothurn .btn-secondary:hover {
  border-color: var(--so-brand);
}

/* ---------- Section heads ---------- */
#solothurn .so-section-head {
  text-align: center;
  max-width: 46rem;
  margin: 0 auto 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
#solothurn .so-section-head p {
  color: var(--so-secondary);
}
/* Icon-Badge über jeder Section-Überschrift (digilex-Stil) */
/* Section-Icons 1:1 wie digilex (.header img { height: 5rem }): Blob + Glyph
   stecken im SVG, daher kein CSS-Hintergrund/Rahmen – nur Groesse setzen. */
#solothurn .so-section-icon {
  align-self: center;
  display: inline-flex;
  margin-bottom: 0.75rem;
}
#solothurn .so-section-icon svg {
  width: 5rem;
  height: 5rem;
  display: block;
}

/* =====================================================================
   Hero — "Cinematic Aurora / Deep-Blue" (Approach A)
   Tall, atmospheric deep-brand-blue stage: drifting aurora/mesh glow,
   faint blueprint grid, grain + vignette. The Solothurn map line draws
   itself in glowing cyan/white (then breathes a soft shimmer); the coat
   of arms floats in a soft halo. Light text on deep blue (>= WCAG AA).
   ALL motion is gated behind prefers-reduced-motion:no-preference and the
   resting state (no motion) is fully composed. Full-bleed layers are
   clipped by .so-hero -> safe under #solothurn { overflow-x: clip }.
   ===================================================================== */
/* ---------- Hero (heller Page-Vibe: weich soft-blau/weiss, hoch, dezentes Grid) ---------- */
#solothurn .so-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: calc(86vh - 80px);
  min-height: calc(86svh - 80px);
  padding: clamp(3rem, 7vh, 5.5rem) 0;
}
/* heller, voll-bleed Hintergrund: soft-blau -> weiss + weiche Glows */
#solothurn .so-hero-bg {
  position: absolute;
  inset: 0 auto 0 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  /* Verlauf endet unten in soft-blue (nicht weiss), damit die weisse
     Wellenkante zur ersten Section sichtbar wird. */
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%2040'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,40%20H1440%20V18%20C1080,0%20900,34%20720,20%20C540,6%20360,32%200,16%20Z'%20fill='%23ffffff'/%3E%3C/svg%3E")
      bottom center / 100% 1.5rem no-repeat,
    radial-gradient(70% 60% at 85% 8%, rgba(0, 131, 219, 0.12) 0%, rgba(0, 131, 219, 0) 60%),
    radial-gradient(60% 70% at 6% 96%, rgba(0, 131, 219, 0.08) 0%, rgba(0, 131, 219, 0) 64%),
    linear-gradient(180deg, #f4faff 0%, var(--so-soft-blue) 62%, #e9f3fc 100%);
}
/* dezentes helles Blueprint-Grid (Bezug zur digitalen Verwaltung), maskiert */
#solothurn .so-hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 131, 219, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 131, 219, 0.06) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(120% 80% at 50% 24%, #000 0%, transparent 78%);
  mask-image: radial-gradient(120% 80% at 50% 24%, #000 0%, transparent 78%);
  opacity: 0.7;
}
#solothurn .so-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
  width: 100%;
}
#solothurn .so-hero-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.1rem;
}
#solothurn .so-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--so-brand);
}
#solothurn .so-eyebrow-dot {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #e8423f;
}
#solothurn .so-hero-text h1 {
  margin: 0;
  font-size: clamp(2.25rem, 1.1rem + 4vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--so-primary);
  text-wrap: balance;
}
#solothurn .so-hero-subtitle {
  margin: 0;
  max-width: 34rem;
  font-size: 1.25rem;
  line-height: 1.4;
  font-weight: 700;
  color: var(--so-primary);
  text-wrap: balance;
}
#solothurn .so-hero-paragraphs {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 38rem;
}
#solothurn .so-hero-paragraphs p {
  color: var(--so-secondary);
  line-height: 1.6;
  text-wrap: pretty;
}
#solothurn .so-hero-text .btn-primary {
  margin-top: 1rem;
}
#solothurn .so-hero-emblem {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
#solothurn .so-emblem-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  width: min(20rem, 78vw);
  margin: 0 auto;
}
#solothurn .so-emblem-halo {
  position: absolute;
  inset: -16%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(0, 131, 219, 0.16) 0%, rgba(0, 131, 219, 0) 72%);
}
#solothurn .so-map {
  grid-area: 1 / 1;
  z-index: 1;
  width: 100%;
  height: auto;
  color: var(--so-brand);
  overflow: visible;
  filter: drop-shadow(0 12px 26px rgba(0, 105, 175, 0.18));
}
#solothurn .so-map-line {
  stroke-dasharray: 2000;
  stroke-dashoffset: 0;
}
#solothurn .so-wappen {
  grid-area: 1 / 1;
  position: relative;
  z-index: 2;
  width: 40%;
  height: auto;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.16));
}

@keyframes so-map-draw {
  from {
    stroke-dashoffset: 2000;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes so-wappen-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes so-hero-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  #solothurn .so-eyebrow,
  #solothurn .so-hero-text h1,
  #solothurn .so-hero-subtitle,
  #solothurn .so-hero-paragraphs,
  #solothurn .so-hero-text .btn-primary,
  #solothurn .so-emblem-stage {
    animation: so-hero-rise 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) both;
  }
  #solothurn .so-eyebrow {
    animation-delay: 0.05s;
  }
  #solothurn .so-hero-text h1 {
    animation-delay: 0.12s;
  }
  #solothurn .so-hero-subtitle {
    animation-delay: 0.19s;
  }
  #solothurn .so-hero-paragraphs {
    animation-delay: 0.26s;
  }
  #solothurn .so-hero-text .btn-primary {
    animation-delay: 0.33s;
  }
  #solothurn .so-emblem-stage {
    animation-delay: 0.15s;
    animation-duration: 0.85s;
  }
  #solothurn .so-map-line {
    animation: so-map-draw 2.2s cubic-bezier(0.45, 0, 0.2, 1) 0.5s both;
  }
  #solothurn .so-wappen {
    animation: so-wappen-in 0.8s cubic-bezier(0.2, 0.7, 0.3, 1) 1.6s both;
  }
}
@media (prefers-reduced-motion: reduce) {
  #solothurn .so-eyebrow,
  #solothurn .so-hero-text h1,
  #solothurn .so-hero-subtitle,
  #solothurn .so-hero-paragraphs,
  #solothurn .so-hero-text .btn-primary,
  #solothurn .so-emblem-stage,
  #solothurn .so-map-line,
  #solothurn .so-wappen {
    animation: none !important;
  }
}
@media screen and (min-width: 768px) {
  #solothurn .so-emblem-stage {
    width: min(22rem, 56vw);
  }
}
@media screen and (min-width: 992px) {
  #solothurn .so-hero-inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    column-gap: 5rem;
  }
  #solothurn .so-hero-text {
    gap: 1.4rem;
  }
  #solothurn .so-hero-subtitle {
    font-size: 1.375rem;
  }
  #solothurn .so-emblem-stage {
    width: 24rem;
  }
}

/* =====================================================================
   Willkommen / Vorwort — "Der handsignierte Willkommensbrief"
   Synthese: K1 (Brief/Gruss/Koepfe-als-Unterschrift) auf K2-Engineering
   (Schichtentrennung li/stage/bubble, opt-in Entrance, hover:hover) mit
   K3-Editorial (Wasserzeichen-Quote, warmes Braun, h2+blockquote), K5-
   Spotlight + hartem reduced-motion-Guard und K4-Solothurn-Rot (AA).
   Ersetzt saemtliche alten .so-welcome* / .so-signature* Regeln.
   Alles gescoped unter #solothurn .so-welcome.
   ===================================================================== */
#solothurn .so-welcome {
  --so-accent: #0083db; /* dekorativ: Siegel, Unterstreichung, Wasserzeichen, Hover-Ring */
  --so-accent-ink: #006ab3; /* AA auf warmem Grund: Eyebrow, Signoff, Projektrolle */
  --so-ink: #6b4f49; /* warmes Braun statt Grau fuer den Fliesstext */
  --av: 4.5rem; /* Avatar-/Bubble-Durchmesser, mobile-first (dezent) */

  position: relative;
  padding: clamp(3rem, 7vw, 5rem) 0;
  isolation: isolate;
  /* Der <main> ist ein Flex-Column mit row-gap (2.5rem / ab 768px 3rem).
     Dieser Gap erzeugte den weissen Streifen zwischen Hero und Brief – hier
     fuer genau diese Section per negativem Margin neutralisiert, damit das
     warme Band nahtlos an den Hero anschliesst. */
  margin-top: -2.5rem;
}
/* Warmes Full-Bleed-Band als bewusster Kontrast zu den kuehlen Blau-Baendern */
#solothurn .so-welcome::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  z-index: -1;
  background: #ffffff;
}
#solothurn .so-welcome .so-container {
  max-width: 70rem;
}

/* Visually-hidden Ueberschrift (schliesst die semantische Outline-Luecke) */
#solothurn .so-welcome .so-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Kein Kasten mehr: direkt in der Section, volle Breite ---------- */
#solothurn .so-letter {
  margin: 0;
}
/* Zentrierter Kopf: Siegel -> Anrede -> Lead */
#solothurn .so-welcome-head {
  max-width: 44rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Herz-Siegel (zentriert, blau, dezent) */
#solothurn .so-letter-seal {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: radial-gradient(circle at 35% 28%, #4aa6e8 0%, #0083db 48%, #006ab3 100%);
  box-shadow:
    0 6px 14px rgba(0, 105, 175, 0.35),
    inset 0 2px 4px rgba(255, 255, 255, 0.5),
    inset 0 -3px 7px rgba(0, 0, 0, 0.18);
  margin: 0 0 1rem;
}
#solothurn .so-letter-seal svg {
  width: 1.4rem;
  height: 1.4rem;
}

/* ---------- Anrede (Eyebrow) ---------- */
#solothurn .so-welcome-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  color: var(--so-accent-ink);
  margin: 0 0 0.75rem;
}
#solothurn .so-welcome-eyebrow::before,
#solothurn .so-welcome-eyebrow::after {
  content: '';
  width: 1.5rem;
  height: 2px;
  border-radius: 2px;
  background: var(--so-accent);
}

/* ---------- Lead (zentriert) + Wasserzeichen + gezeichnete Unterstreichung ---------- */
#solothurn .so-welcome-lead {
  position: relative;
  margin: 0 auto;
  padding: 0;
  border: 0;
  /* Breit genug, dass bei der Desktop-Groesse (2rem) jede der beiden per <br>
     erzwungenen Zeilen auf eine Zeile passt und nicht selbst nochmal umbricht. */
  max-width: 48rem;
}
#solothurn .so-lead-text {
  position: relative;
  z-index: 1;
  display: block;
  /* Gleiche Schrift, Groesse und Gewicht wie die uebrigen Section-Titel
     (#solothurn h2): Nunito 700, 1.5rem / ab 768px 2rem. */
  font-family: var(--font-nunito);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.33;
  letter-spacing: -0.015em;
  color: var(--so-primary);
  text-wrap: balance;
}
/* Gezeichnete Unterstreichung (zentriert) */
#solothurn .so-lead-underline {
  display: block;
  width: min(18rem, 72%);
  height: 0.7rem;
  margin: 0.6rem auto 0;
  color: var(--so-accent);
  overflow: visible;
}
#solothurn .so-lead-underline path {
  stroke-dasharray: 420;
  stroke-dashoffset: 0; /* Ruhezustand = fertig gezeichnet */
}

/* ---------- Brieftext (zentriert, lesbares Mass) ---------- */
#solothurn .so-letter-body {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  max-width: 46rem;
  margin: 1.6rem auto 0;
  text-align: center;
}
#solothurn .so-letter-body p {
  font-family: var(--font-nunito);
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--so-ink);
  text-wrap: pretty;
}

/* ---------- Gruss-Schluss (blau) ---------- */
#solothurn .so-letter-signoff {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--so-accent-ink);
  text-align: center;
  margin: 1.5rem 0 0;
}

/* ---------- Unterschriften-Reihe (Koepfe = Signatur) + Spotlight ---------- */
#solothurn .so-signature {
  position: relative;
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0.5rem 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.1rem 0.6rem;
}
#solothurn .so-sign {
  position: relative;
  z-index: 1;
  flex: 0 0 calc(50% - 0.3rem);
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  text-align: center;
}

/* Buehne traegt NUR die Entrance-Animation (entkoppelt von Bogen + Hover) */
#solothurn .so-sign-stage {
  display: flex;
  justify-content: center;
}

/* ---------- Portrait-Bubble mit Foto-Rollover ---------- */
#solothurn .so-sign-bubble {
  position: relative;
  width: var(--av);
  height: var(--av);
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  border: 4px solid #fff; /* weisser Ring trennt den eingebrannten grauen Bildkreis */
  box-shadow: 0 0 0 1px #d6e9f7;
  transition:
    transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1),
    box-shadow 0.4s ease;
}
#solothurn .so-portrait {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: 50%;
  transition: opacity 0.4s ease;
}
#solothurn .so-portrait--hover {
  opacity: 0;
}

/* Hover NUR auf echten Zeigegeraeten; verspielter Cross-Fade + Lift + Kipp + Koralle-Ring */
@media (hover: hover) {
  #solothurn .so-sign:hover .so-sign-bubble {
    transform: translateY(-6px) rotate(-2deg);
    box-shadow:
      0 0 0 2px var(--so-accent),
      0 16px 26px rgba(0, 131, 219, 0.25);
  }
  #solothurn .so-sign:hover .so-portrait--base {
    opacity: 0;
  }
  #solothurn .so-sign:hover .so-portrait--hover {
    opacity: 1;
  }
}

/* ---------- Meta-Texte unter den Bubbles ---------- */
#solothurn .so-sign-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  line-height: 1.3;
}
#solothurn .so-sign-name {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--so-primary);
  transition: color 0.3s ease;
}
#solothurn .so-sign-role {
  font-weight: 700;
  font-size: 0.8125rem;
  color: var(--so-accent-ink); /* Blau, AA */
}
#solothurn .so-sign-escola {
  font-size: 0.75rem;
  color: var(--so-secondary);
}

/* ---------- 5. Bubble: Ganzes-Team-CTA (button-maessig) ---------- */
#solothurn .so-team-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none !important;
  color: inherit;
}
#solothurn .so-team-link:focus-visible {
  outline: none;
}
#solothurn .so-team-bubble {
  position: relative;
  width: var(--av);
  height: var(--av);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  border: 2px dashed var(--so-brand);
  transition:
    transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1),
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.4s ease;
}
#solothurn .so-team-front,
#solothurn .so-team-back {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  padding: 0 0.4rem;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}
#solothurn .so-team-front {
  color: var(--so-brand-hover); /* AA im Ruhezustand */
}
#solothurn .so-team-plus {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: calc(var(--av) * 0.3);
  line-height: 1;
}
#solothurn .so-team-sub {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--so-secondary);
}
#solothurn .so-team-back {
  opacity: 0;
  transform: translateY(8px);
  color: #fff;
}
#solothurn .so-team-go {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.9rem;
  color: #fff;
  text-align: center;
  line-height: 1.15;
}
#solothurn .so-team-arrow {
  width: 1.4rem;
  height: 1.4rem;
  margin-top: 0.2rem;
}

/* Zustandswechsel bei Hover (nur hover:hover) UND Tastatur-Fokus (immer) */
@media (hover: hover) {
  #solothurn .so-team-link:hover .so-team-bubble {
    transform: translateY(-6px);
    background: var(--so-brand-hover);
    border-color: var(--so-brand-hover);
    border-style: solid;
    box-shadow: 0 16px 26px rgba(0, 106, 179, 0.3);
  }
  #solothurn .so-team-link:hover .so-team-front {
    opacity: 0;
    transform: translateY(-8px);
  }
  #solothurn .so-team-link:hover .so-team-back {
    opacity: 1;
    transform: none;
  }
  #solothurn .so-team-link:hover .so-sign-name,
  #solothurn .so-team-link:hover .so-sign-role--team {
    color: var(--so-brand-hover);
  }
}
#solothurn .so-team-link:focus-visible .so-team-bubble {
  transform: translateY(-6px);
  background: var(--so-brand-hover);
  border-color: var(--so-brand-hover);
  border-style: solid;
  box-shadow: 0 16px 26px rgba(0, 106, 179, 0.3);
  outline: 3px solid var(--so-brand);
  outline-offset: 4px;
}
#solothurn .so-team-link:focus-visible .so-team-front {
  opacity: 0;
  transform: translateY(-8px);
}
#solothurn .so-team-link:focus-visible .so-team-back {
  opacity: 1;
  transform: none;
}
#solothurn .so-team-link:focus-visible .so-sign-name,
#solothurn .so-team-link:focus-visible .so-sign-role--team {
  color: var(--so-brand-hover);
}
#solothurn .so-sign-role--team {
  color: var(--so-brand-hover);
  transition: color 0.3s ease;
}

/* ---------- Aufklappbares Gesamt-Team (Bubble-Reihe) ---------- */
/* Pfeil der 5. Bubble dreht im offenen Zustand nach unten (Aufklapp-Geste) */
#solothurn .so-team-link[aria-expanded='true'] .so-team-arrow {
  transform: rotate(90deg);
}
/* Höhen-Animation über grid-template-rows 0fr -> 1fr (sanft, ohne max-height-Hack) */
#solothurn .so-team-reveal {
  --mini: 3.25rem; /* Durchmesser der Mini-Bubbles */
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  margin-top: 0;
  transition:
    grid-template-rows 0.55s cubic-bezier(0.2, 0.7, 0.3, 1),
    opacity 0.45s ease,
    margin-top 0.55s cubic-bezier(0.2, 0.7, 0.3, 1);
}
#solothurn .so-team-reveal.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 1.75rem;
}
#solothurn .so-team-reveal-inner {
  overflow: hidden;
  min-height: 0;
  text-align: center;
}
#solothurn .so-team-reveal-lead {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--so-accent-ink);
  margin: 0 0 1.1rem;
}
#solothurn .so-team-all {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 0.75rem;
}
#solothurn .so-team-member {
  flex: 0 0 auto;
  width: calc(var(--mini) + 3rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.05rem; /* enger Zeilenabstand Name -> Funktion */
  text-align: center;
}
#solothurn .so-team-mini {
  position: relative;
  width: var(--mini);
  height: var(--mini);
  margin-bottom: 0.35rem; /* Bubble -> Name grösser als Name -> Funktion */
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px #d6e9f7;
  transition:
    transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1),
    box-shadow 0.35s ease;
}
#solothurn .so-team-mini-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: 50%;
}
#solothurn .so-team-mini-name {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.72rem;
  line-height: 1.2;
  color: var(--so-primary);
}
#solothurn .so-team-mini-job {
  font-size: 0.65rem;
  line-height: 1.25;
  color: var(--so-secondary);
}
@media (hover: hover) {
  #solothurn .so-team-member:hover .so-team-mini {
    transform: translateY(-4px);
    box-shadow:
      0 0 0 2px var(--so-accent),
      0 12px 20px rgba(0, 131, 219, 0.22);
  }
}
/* Bubbles poppen beim Aufklappen gestaffelt herein (nur wenn Bewegung ok) */
@media (prefers-reduced-motion: no-preference) {
  #solothurn .so-team-reveal.is-open .so-team-member {
    animation: so-welcome-pop 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) calc(var(--j) * 0.045s) both;
  }
}

/* ---------- Keyframes ---------- */
@keyframes so-welcome-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes so-welcome-pop {
  from {
    opacity: 0;
    transform: scale(0.85) translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes so-welcome-seal {
  from {
    opacity: 0;
    transform: scale(0.4);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes so-welcome-draw {
  from {
    stroke-dashoffset: 420;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* ---------- Entrance: opt-in, einmalig. Ruhezustand IST der Endzustand ---------- */
@media (prefers-reduced-motion: no-preference) {
  #solothurn .so-welcome-head {
    animation: so-welcome-rise 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) both;
  }
  #solothurn .so-letter-body {
    animation: so-welcome-rise 0.6s ease-out 0.2s both;
  }
  #solothurn .so-letter-signoff {
    animation: so-welcome-rise 0.6s ease-out 0.3s both;
  }
  #solothurn .so-letter-seal {
    animation: so-welcome-seal 0.6s cubic-bezier(0.2, 0.8, 0.3, 1.5) 0.5s both;
  }
  #solothurn .so-lead-underline path {
    animation: so-welcome-draw 1s ease 0.45s both;
  }
  /* Pop auf der Buehne (nicht auf der Bubble), damit Hover/Bogen frei bleiben */
  #solothurn .so-sign-stage {
    animation: so-welcome-pop 0.6s cubic-bezier(0.2, 0.7, 0.3, 1) calc(0.55s + var(--i) * 0.09s) both;
  }
  #solothurn .so-sign-meta {
    animation: so-welcome-rise 0.55s ease-out calc(0.65s + var(--i) * 0.09s) both;
  }
}

/* ---------- Responsive ---------- */
@media screen and (max-width: 360px) {
  #solothurn .so-welcome {
    --av: 4rem;
  }
}
@media screen and (min-width: 540px) {
  #solothurn .so-welcome {
    --av: 4.75rem;
  }
}
@media screen and (min-width: 768px) {
  #solothurn .so-welcome {
    --av: 4.75rem;
  }
  #solothurn .so-letter-seal {
    width: 3.5rem;
    height: 3.5rem;
  }
  #solothurn .so-letter-seal svg {
    width: 1.65rem;
    height: 1.65rem;
  }
  /* Eine Reihe als einladender Willkommens-Bogen */
  #solothurn .so-signature {
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 1.1rem 0.55rem;
  }
  #solothurn .so-sign {
    flex: 0 0 auto;
    width: calc(var(--av) + 3rem);
  }
  /* Zickzack: Hannes hoch · Janick tief · Lars hoch · Valentin tief · Team hoch */
  #solothurn .so-sign:nth-child(1) {
    margin-top: 0;
  }
  #solothurn .so-sign:nth-child(2) {
    margin-top: 1.8rem;
  }
  #solothurn .so-sign:nth-child(3) {
    margin-top: 0;
  }
  #solothurn .so-sign:nth-child(4) {
    margin-top: 1.8rem;
  }
  #solothurn .so-sign:nth-child(5) {
    margin-top: 0;
  }
}
@media screen and (min-width: 992px) {
  #solothurn .so-welcome {
    --av: 5rem;
  }
  #solothurn .so-signature {
    gap: 1.25rem 0.75rem;
  }
}

/* ---------- Harter reduced-motion-Guard (Sicherheitsnetz, scoped) ---------- */
@media (prefers-reduced-motion: reduce) {
  #solothurn .so-welcome *,
  #solothurn .so-welcome *::before,
  #solothurn .so-welcome *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- Phase 1 & Phase 2 (soft-blue full-bleed band) ---------- */
#solothurn .so-phases {
  position: relative;
  padding: 3.5rem 0;
}
#solothurn .so-phases::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  background: var(--so-soft-blue);
  z-index: -1;
}
/* Two phases as two plain, full-width sections separated by a single
   horizontal line — no card boxes. */
#solothurn .so-phase-bands {
  display: flex;
  flex-direction: column;
}
#solothurn .so-phase-band {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.5rem 0;
}
#solothurn .so-phase-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}
#solothurn .so-phase-chip {
  align-self: flex-start;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #666;
  background: transparent;
  border: 1px solid var(--so-border);
  padding: 0.15rem 0.7rem;
  border-radius: 999px;
}
#solothurn .so-phase-band p {
  color: var(--so-secondary);
  line-height: 1.6;
  margin: 0;
}
/* single horizontal line separating the two phase sections */
#solothurn .so-phase-divider {
  width: 100%;
  height: 1px;
  margin: 1.75rem 0;
  background: #c7d4e0;
}
/* Phase-1 participation conditions — nested inside the Phase 1 section,
   plain (no box) like the rest of the phase content. */
#solothurn .so-conditions {
  margin-top: 0.5rem;
}
#solothurn .so-conditions h4 {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--so-primary);
  margin: 0 0 0.85rem;
}
#solothurn .so-conditions-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
/* Icon absolut links positioniert; Titel + Fliesstext fliessen normal im
   eingerückten Textblock (robust gegenüber nackten Text-Knoten). */
#solothurn .so-conditions-list li {
  position: relative;
  padding-left: 1.9rem;
  color: var(--so-primary);
  line-height: 1.5;
}
#solothurn .so-condition-icon {
  position: absolute;
  left: 0;
  top: 0.15rem;
  width: 1.2rem;
  height: 1.2rem;
  color: var(--so-brand);
}
#solothurn .so-condition-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
#solothurn .so-condition-title {
  font-weight: 700;
}
#solothurn .so-conditions-list a {
  color: var(--so-brand);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
#solothurn .so-conditions-list a:hover {
  color: var(--so-brand-hover);
}

/* ---------- Kernbeschaffungsgegenstand (nach Produkt gruppiert) ----------
   Jede Gruppe setzt --p = Produktfarbe (wie src/content/products/*). Chips
   nutzen dunklen Text auf hellem Produkt-Tint + farbige Akzentkante für
   klaren Kontrast und eindeutige Produkt-Zuordnung. */
#solothurn .so-core-groups {
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
}
#solothurn .so-core-grouphead {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.125rem;
  color: color-mix(in srgb, var(--p) 78%, #1a1a1a);
  margin-bottom: 1rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid color-mix(in srgb, var(--p) 45%, transparent);
}
#solothurn .so-core-logo {
  width: 1.75rem;
  height: 1.75rem;
  object-fit: contain;
  flex-shrink: 0;
}
#solothurn .so-core-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 0.6rem;
  align-items: flex-start;
}
/* Chip: heller Produkt-Tint, dunkler Text, dezenter Produkt-Rahmen. */
#solothurn .so-chip {
  position: relative;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.7rem 0.85rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--p) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--p) 35%, #fff);
  color: #2b2b2b;
  min-width: 6.5rem;
  max-width: 100%;
}
/* Chip-Link: füllt den Chip, klickbar, öffnet die Produkt-Infoseite. */
#solothurn .so-chip-link {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  text-decoration: none;
  color: inherit;
}
#solothurn .so-chip {
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}
#solothurn .so-chip.is-link {
  cursor: pointer;
}
#solothurn .so-chip.is-link:hover {
  border-color: var(--p);
  background: color-mix(in srgb, var(--p) 20%, #fff);
}
#solothurn .so-chip-label {
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.25;
  color: color-mix(in srgb, var(--p) 50%, #1a1a1a);
}
#solothurn .so-chip-note {
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1.35;
  color: #555;
  /* \n in note-Strings erzeugt einen sichtbaren Zeilenumbruch */
  white-space: pre-line;
}
/* Badge-Reihe oben rechts an der Chip-Ecke: «Phase 1» links, «Escola App»
   rechts daneben, beide rechtsbündig. */
#solothurn .so-chip-badges {
  position: absolute;
  top: -0.65rem;
  right: 0.55rem;
  z-index: 1;
  display: flex;
  gap: 0.3rem;
}
#solothurn .so-chip-phase,
#solothurn .so-chip-app {
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
  border: 1px solid #fff;
}
/* «Phase 1» grün; Phase-2-Module erhalten keins. */
#solothurn .so-chip-phase {
  background: #e3f3e6;
  color: #1f7a3d;
}
#solothurn .so-chip-phase::before {
  content: '✓ ';
}
/* «Escola App»: blaues Pendant zum Phase-1-Label. */
#solothurn .so-chip-app {
  background: #e2f3ff;
  color: #0069af;
}
/* In den Optionen ist Phase 1 grau (kein Lieferumfang der Ausschreibung). */
#solothurn .so-options .so-chip-phase {
  background: #eee;
  color: #777;
}
/* Container-Chip «Klassen & Gruppen»: rahmt die vier Kind-Chips ein. */
#solothurn .so-chip--box {
  padding: 0.85rem;
  gap: 0.9rem;
  background: color-mix(in srgb, var(--p) 7%, #fff);
}
#solothurn .so-chip-children {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.95rem 0.5rem;
}
#solothurn .so-chip-children .so-chip {
  background: #fff;
}
/* ---------- Anmeldung (soft-blue full-bleed band) ---------- */
#solothurn .so-anmeldung {
  position: relative;
  padding: 3.5rem 0;
  scroll-margin-top: 6rem;
}
#solothurn .so-anmeldung::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  /* Gleicher Verlauf wie im Hero, plus weisse Wellenkante oben (im Hintergrund,
     Weiss = Nachbar-Sektion → nahtlos, nur die Wellenkante bleibt sichtbar). */
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%2040'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,0%20H1440%20V22%20C1080,40%20900,6%20720,20%20C540,34%20360,8%200,24%20Z'%20fill='%23ffffff'/%3E%3C/svg%3E")
      top center / 100% 1.5rem no-repeat,
    radial-gradient(70% 60% at 85% 8%, rgba(0, 131, 219, 0.12) 0%, rgba(0, 131, 219, 0) 60%),
    radial-gradient(60% 70% at 6% 96%, rgba(0, 131, 219, 0.08) 0%, rgba(0, 131, 219, 0) 64%),
    linear-gradient(180deg, #f4faff 0%, var(--so-soft-blue) 55%, #ffffff 100%);
  z-index: -1;
}
#solothurn .so-anmeldung-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
}
#solothurn .so-anmeldung-sub {
  color: var(--so-secondary);
  max-width: 42rem;
}

/* Termine der Info-Präsentationen: weisse Karten auf dem blauen Band */
#solothurn .so-termine {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 48rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
#solothurn .so-termin {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  align-content: center;
  gap: 0.35rem 1rem;
  text-align: left;
  background: #fff;
  border: 1px solid var(--so-border);
  border-radius: var(--so-radius-card);
  padding: 1rem 1.25rem;
}
#solothurn .so-termin-badge {
  grid-row: span 2;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--so-brand);
  background: var(--so-soft-blue);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  white-space: nowrap;
}
#solothurn .so-termin--online .so-termin-badge {
  color: #4c8a1f;
  background: #eef7e3;
}
#solothurn .so-termin-datum {
  font-weight: 700;
  color: var(--so-primary);
  font-size: 1rem;
}
#solothurn .so-termin-zeit {
  grid-column: 2;
  color: var(--so-secondary);
  font-size: 0.9375rem;
}
#solothurn .so-termine-invite {
  color: var(--so-secondary);
  max-width: 42rem;
}
@media screen and (min-width: 620px) {
  #solothurn .so-termine {
    grid-template-columns: 1fr 1fr;
  }
}
#solothurn .so-airtable-wrap {
  width: 100%;
  max-width: 48rem;
  margin: 0.5rem auto 0;
}
#solothurn .so-airtable-wrap iframe {
  display: block;
  width: 100%;
  background: #fff;
  border: 1px solid var(--so-border);
  border-radius: var(--so-radius-card);
}
#solothurn .so-anmeldung-mail {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--so-secondary);
  font-size: 0.9375rem;
}

#solothurn .so-spacer,
.so-spacer {
  height: 80px;
}

/* =====================================================================
   SOeduAdmin Gantt — synthesized timeline (base: time-proportional
   36-column Gantt, hardened with the dashboard-board ideas). Self-contained:
   every brand value has a hard fallback baked in.
   ===================================================================== */
#solothurn .so-timeline {
  --so-text: #333;
  --so-text-soft: #666;
  --so-brand: #0083db;
  --so-soft-blue: #f0f8ff;
  --so-border: #e5e5e5;
  --tl-label-w: 17rem;
  --tl-axis-h: 2.25rem;
  --tl-row-h: 2rem;
  --tl-bar-h: 1rem;
  --tl-ms: #e0a100; /* milestone amber (star fill) — derived accent, not a brand token */
  --tl-ms-text: #8a5e00; /* darker amber for tag text → ~5.3:1 on the cream row (WCAG AA) */
  --tl-ms-soft: #fff6e0;
  --tl-stagger: 0.09s;
  background: #ffffff;
  padding: 2.25rem 0 2rem;
  font-family: var(--font-nunito);
  color: var(--so-text);
  position: relative;
}

#solothurn .tl-head {
  text-align: center;
  max-width: 46rem;
  margin: 0 auto 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
#solothurn .tl-sub {
  color: var(--so-text-soft);
}

/* Legend */
#solothurn .tl-legend {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  justify-content: center;
}
#solothurn .tl-legend li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--so-text-soft);
}
#solothurn .tl-legend .swatch {
  width: 1.25rem;
  height: 0.6rem;
  border-radius: 3px;
}
#solothurn .tl-legend .swatch--prep {
  background: #586676;
}
#solothurn .tl-legend .swatch--p1 {
  background: linear-gradient(90deg, #0083db, #3ea6ea);
}
#solothurn .tl-legend .swatch--p2 {
  background: linear-gradient(90deg, #00538f, #0a6bb0);
}
#solothurn .tl-legend .swatch--ms {
  width: auto;
  height: auto;
  color: var(--tl-ms);
  display: inline-flex;
}
#solothurn .tl-legend .swatch--ms .tl-star {
  width: 1rem;
  height: 1rem;
}

/* Phase colour families (derived from brand blue). Phase 2 is a deeper blue
   so the two phases never read as the same colour. */
#solothurn .tl-group--prep {
  --phase: #586676; /* darkened from #6b7c93 → white-on-chip reaches WCAG AA (~5.9:1) */
  --phase-2: #8896a8;
}
#solothurn .tl-group--p1 {
  --phase: #0083db;
  --phase-2: #3ea6ea;
}
#solothurn .tl-group--p2 {
  --phase: #00538f;
  --phase-2: #0a6bb0;
}

/* Chart frame */
#solothurn .tl-chart {
  position: relative;
  border: 1px solid var(--so-border);
  border-radius: 16px;
  background: #fff;
  padding: 1.25rem 1.5rem 1.5rem;
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.05);
}

/* Year axis */
#solothurn .tl-axis {
  display: grid;
  grid-template-columns: var(--tl-label-w) repeat(3, 1fr);
  height: var(--tl-axis-h);
  align-items: end;
  position: relative;
  z-index: 2;
}
#solothurn .tl-axis .tl-year {
  font-weight: 700;
  color: var(--so-text);
  font-size: 0.95rem;
  padding-left: 0.5rem;
  border-left: 1px solid var(--so-border);
}

/* Year gridlines (continuous, full chart height) */
#solothurn .tl-gridlines {
  position: absolute;
  left: calc(1.5rem + var(--tl-label-w));
  right: 1.5rem;
  top: 1.25rem;
  bottom: 1.5rem;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(to right, var(--so-border) 0 1px, transparent 1px) 33.333% 0 / 1px 100% no-repeat,
    linear-gradient(to right, var(--so-border) 0 1px, transparent 1px) 66.666% 0 / 1px 100% no-repeat;
}

/* The flowing rail (drawing line) — the signature forward-momentum stroke */
#solothurn .tl-spine {
  position: absolute;
  left: calc(1.5rem + var(--tl-label-w));
  right: 1.5rem;
  top: calc(1.25rem + var(--tl-axis-h) + 0.35rem);
  height: 3px;
  border-radius: 3px;
  background: var(--so-border);
  overflow: hidden;
  z-index: 3;
}
#solothurn .tl-spine > span {
  display: block;
  position: absolute;
  inset: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, #6b7c93 0%, #0083db 42%, #00538f 100%);
}

/* «Heute»-Markierung: dezente vertikale Linie beim aktuellen Monat */
#solothurn .tl-today {
  position: absolute;
  left: calc(1.5rem + var(--tl-label-w));
  right: 1.5rem;
  top: 1.25rem;
  bottom: 1.5rem;
  pointer-events: none;
  z-index: 4;
}
#solothurn .tl-today-line {
  position: absolute;
  top: 1.75rem;
  bottom: 0;
  left: var(--today, 16%);
  width: 0;
  border-left: 2px dashed var(--so-brand);
  opacity: 0.45;
}
#solothurn .tl-today-label {
  position: absolute;
  top: 0;
  left: var(--today, 16%);
  transform: translateX(-50%);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--so-brand);
  background: #fff;
  padding: 0 0.25rem;
  border-radius: 3px;
  white-space: nowrap;
}

/* Groups & rows */
#solothurn .tl-flow {
  display: none;
}
#solothurn .tl-groups {
  position: relative;
  z-index: 1;
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
#solothurn .tl-group {
  position: relative;
}
#solothurn .tl-group-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem 0.625rem;
  margin-bottom: 0.5rem;
}
#solothurn .tl-group-chip {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  font-size: 0.875rem;
  color: #fff;
  background: var(--phase);
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
}
#solothurn .tl-group-period {
  font-size: 0.8125rem;
  color: var(--so-text-soft);
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-left: auto;
}

#solothurn .tl-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
#solothurn .tl-row {
  position: relative;
  display: grid;
  grid-template-columns: var(--tl-label-w) 1fr;
  align-items: center;
  min-height: var(--tl-row-h);
  column-gap: 0;
  border-radius: 8px;
  transition: background 0.15s ease;
}
#solothurn .tl-row--milestone {
  background: var(--tl-ms-soft);
}
/* Default kompakt = nur Titel; Hover hebt die Zeile hervor und zeigt die Details. */
#solothurn .tl-row:hover {
  background: var(--so-soft-blue);
  z-index: 10;
}
#solothurn .tl-row--milestone:hover {
  background: var(--tl-ms-soft);
}
#solothurn .tl-row-label {
  padding: 0.15rem 0.9rem 0.15rem 0.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}
#solothurn .tl-row-title {
  font-size: 0.9375rem;
  line-height: 1.25;
  color: var(--so-text);
  font-weight: 700;
}
#solothurn .tl-row:hover .tl-row-title,
#solothurn .tl-row:focus-within .tl-row-title {
  color: var(--phase);
}
/* Details (Untertitel/Zeitraum/Termine): auf dem Desktop-Gantt erst beim Hover
   als saubere Tooltip-Karte mit Caret + phasenfarbigem Akzent — hält die Zeilen
   einzeilig und das Diagramm flach. opacity statt visibility, damit Screenreader
   die Texte trotzdem vorlesen. */
#solothurn .tl-row-meta {
  position: absolute;
  left: -0.4rem;
  top: calc(100% + 0.45rem);
  width: max-content;
  min-width: 13rem;
  max-width: 23rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.7rem 0.85rem;
  background: #fff;
  border: 1px solid var(--so-border);
  border-radius: 10px;
  box-shadow:
    0 12px 28px -10px rgba(15, 30, 50, 0.28),
    0 3px 8px rgba(15, 30, 50, 0.08);
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top left;
  transition:
    opacity 0.16s ease,
    transform 0.16s ease;
  pointer-events: none;
  z-index: 20;
}
/* Caret zur Zeile hin */
#solothurn .tl-row-meta::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 1.35rem;
  width: 9px;
  height: 9px;
  background: #fff;
  border-left: 1px solid var(--so-border);
  border-top: 1px solid var(--so-border);
  transform: rotate(45deg);
}
#solothurn .tl-row:hover .tl-row-meta,
#solothurn .tl-row:focus-within .tl-row-meta {
  opacity: 1;
  transform: translateY(0) scale(1);
}
/* Inhalt der Tooltip-Karte */
#solothurn .tl-row-caption {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--so-text);
}
#solothurn .tl-row-range {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  line-height: 1.2;
  color: var(--phase);
  font-weight: 700;
}
#solothurn .tl-row-range::before {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--phase);
  flex: none;
}
#solothurn .tl-row-detail {
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--so-text-soft);
  padding-top: 0.15rem;
  border-top: 1px solid var(--so-border);
}

#solothurn .tl-row-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(36, 1fr);
  align-items: center;
  height: var(--tl-row-h);
  overflow: visible;
}
#solothurn .tl-row-rail {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: var(--so-border);
  border-radius: 2px;
}

/* Bars — min-width so 1-month bars and the narrow 992–1100px band never
   collapse to a sliver. */
#solothurn .tl-bar {
  grid-column: var(--cs) / var(--ce);
  position: relative;
  min-width: 12px;
  height: var(--tl-bar-h);
  border-radius: 5px;
  background: linear-gradient(90deg, var(--phase), var(--phase-2));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  z-index: 2;
}

/* Milestone = amber star marker */
#solothurn .tl-bar--milestone {
  background: none;
  box-shadow: none;
  min-width: 0;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
#solothurn .tl-bar--milestone .tl-star {
  width: 2rem;
  height: 2rem;
  color: var(--tl-ms);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
  transform-origin: center;
}
#solothurn .tl-bar--milestone::before {
  content: '';
  position: absolute;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224, 161, 0, 0.22), transparent 70%);
  z-index: -1;
}

/* Einmaliges Ereignis (Zeugnisse) = Punkt statt Balken */
#solothurn .tl-bar--point {
  background: none;
  box-shadow: none;
  min-width: 0;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
#solothurn .tl-bar--point::before {
  content: '';
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  background: var(--phase);
  box-shadow:
    0 0 0 3px #fff,
    0 1px 3px rgba(0, 0, 0, 0.25);
}

/* ---------- Keyframes ---------- */
@keyframes so-tl-wipe {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes so-tl-wipe-y {
  from {
    clip-path: inset(0 0 100% 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes so-tl-rise {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes so-tl-stamp {
  0% {
    opacity: 0;
    transform: scale(2.1) rotate(-10deg);
  }
  60% {
    opacity: 1;
    transform: scale(0.9) rotate(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes so-tl-pop {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Resting style = final/visible state (= the reduced-motion state). Animations
   are added ONLY under prefers-reduced-motion:no-preference, fill-mode both so
   the "from" frame holds during the stagger delay; each runs exactly once. */

/* Shared — labels rise (both layouts) */
@media (prefers-reduced-motion: no-preference) {
  #solothurn .tl-row-label {
    animation: so-tl-rise 0.5s ease-out calc(var(--i) * var(--tl-stagger) + 0.4s) both;
  }
}

/* Desktop: horizontal rail draws, then bars wipe left-to-right, stars stamp */
@media (prefers-reduced-motion: no-preference) and (min-width: 992px) {
  #solothurn .tl-spine > span {
    animation: so-tl-wipe 1.7s cubic-bezier(0.4, 0, 0.1, 1) 0.15s both;
  }
  #solothurn .tl-bar:not(.tl-bar--milestone):not(.tl-bar--point) {
    animation: so-tl-wipe 0.7s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i) * var(--tl-stagger) + 0.35s) both;
  }
  #solothurn .tl-bar--point::before {
    animation: so-tl-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--i) * var(--tl-stagger) + 0.5s) both;
  }
  #solothurn .tl-bar--milestone .tl-star {
    animation: so-tl-stamp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--i) * var(--tl-stagger) + 0.55s) both;
  }
}

/* Mobile: each phase's vertical rail draws top-to-bottom (the Phase-1 to
   Phase-2 handover); nodes pop, stars stamp */
@media (prefers-reduced-motion: no-preference) and (max-width: 991px) {
  #solothurn .tl-flow {
    animation: so-tl-wipe-y 1s cubic-bezier(0.4, 0, 0.1, 1) calc(var(--gi) * 0.45s + 0.25s) both;
  }
  #solothurn .tl-bar:not(.tl-bar--milestone) {
    animation: so-tl-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--i) * 0.07s + 0.35s) both;
  }
  #solothurn .tl-bar--milestone .tl-star {
    animation: so-tl-stamp 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--i) * 0.07s + 0.4s) both;
  }
}

/* Hard guard — belt & suspenders: kill every animation under reduced motion */
@media (prefers-reduced-motion: reduce) {
  #solothurn .so-timeline *,
  #solothurn .so-timeline *::before,
  #solothurn .so-timeline *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- Mobile / tablet (< 992px): rail rotates to a vertical stepper ---------- */
@media (max-width: 991px) {
  #solothurn .tl-axis,
  #solothurn .tl-gridlines,
  #solothurn .tl-spine,
  #solothurn .tl-today {
    display: none;
  }
  #solothurn .tl-chart {
    padding: 1.25rem 1rem;
  }
  #solothurn .tl-groups {
    gap: 1.75rem;
    margin-top: 0.25rem;
  }
  #solothurn .tl-group-period {
    margin-left: 0;
  }

  /* per-phase vertical rail (static track) + drawing fill (.tl-flow) */
  #solothurn .tl-group::before {
    content: '';
    position: absolute;
    left: 0.75rem;
    transform: translateX(-50%);
    top: 2.4rem;
    bottom: -0.9rem;
    width: 3px;
    border-radius: 3px;
    background: var(--so-border);
    z-index: 0;
  }
  #solothurn .tl-group:last-child::before {
    bottom: 0.4rem;
  }
  #solothurn .tl-flow {
    display: block;
    position: absolute;
    left: 0.75rem;
    transform: translateX(-50%);
    top: 2.4rem;
    bottom: -0.9rem;
    width: 3px;
    border-radius: 3px;
    background: var(--phase);
    z-index: 1;
  }
  #solothurn .tl-group:last-child .tl-flow {
    bottom: 0.4rem;
  }

  #solothurn .tl-row {
    grid-template-columns: 1.5rem 1fr;
    column-gap: 0.85rem;
    align-items: start;
    min-height: 0;
    padding: 0.45rem 0;
    background: none !important;
  }
  #solothurn .tl-row-track {
    order: 0;
    height: auto;
    display: block;
    grid-template-columns: none;
    padding-top: 0.15rem;
  }
  #solothurn .tl-row-rail {
    display: none;
  }
  #solothurn .tl-row-label {
    order: 1;
    padding: 0;
  }
  #solothurn .tl-row--milestone .tl-row-label {
    background: var(--tl-ms-soft);
    border-radius: 8px;
    padding: 0.4rem 0.6rem;
    margin: -0.15rem 0;
  }
  /* Mobile (kein Hover): Details inline & sichtbar statt Popover */
  #solothurn .tl-row-meta {
    position: static;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    width: auto;
    min-width: 0;
    max-width: none;
    gap: 0.1rem;
    padding: 0.15rem 0 0;
    background: none;
    border: none;
    box-shadow: none;
    z-index: auto;
  }
  #solothurn .tl-row-meta::before {
    display: none;
  }
  #solothurn .tl-row-detail {
    border-top: none;
    padding-top: 0;
  }

  /* bar -> node dot sitting on the rail */
  #solothurn .tl-bar {
    grid-column: auto;
    min-width: 0;
    display: block;
    width: 0.95rem;
    height: 0.95rem;
    margin: 0.1rem auto 0;
    border-radius: 50%;
    background: var(--phase);
    box-shadow: 0 0 0 4px #fff;
    position: relative;
    z-index: 2;
  }
  #solothurn .tl-bar--milestone {
    width: 2rem;
    height: 2rem;
    margin: 0 auto;
    box-shadow: none;
  }
  #solothurn .tl-bar--milestone::before {
    width: 2rem;
    height: 2rem;
  }
  /* Punkt nutzt auf Mobile den Standard-Dot (.tl-bar); ::before-Dot ausblenden */
  #solothurn .tl-bar--point::before {
    display: none;
  }
}

/* ---------- Tablet / desktop refinements ---------- */
@media screen and (min-width: 768px) {
  #solothurn {
    row-gap: 3rem;
  }
  /* Gap zwischen Hero und Brief auch im Desktop-Wert neutralisieren. */
  #solothurn .so-welcome {
    margin-top: -3rem;
  }
  #solothurn h1 {
    font-size: 2.25rem;
  }
  #solothurn h2 {
    font-size: 2rem;
    line-height: 1.25;
  }
  /* Willkommens-Lead gleich gross wie die Section-Titel. */
  #solothurn .so-lead-text {
    font-size: 2rem;
    line-height: 1.25;
  }
  #solothurn h3 {
    font-size: 1.5rem;
  }
  #solothurn .so-container {
    padding: 0 2.5rem;
  }
}

@media screen and (min-width: 992px) {
  #solothurn h1 {
    font-size: 2.5rem;
  }
}

@media screen and (max-width: 540px) {
  #solothurn .tl-row-title {
    font-size: 0.875rem;
  }
  #solothurn .tl-chart {
    padding: 1rem 0.75rem;
  }
}

/* ========== Hero-Feinschliff / Overrides (zuletzt im Stylesheet = gewinnt) ========== */
/* Eyebrow: normale Schrift (keine Caps), roter Punkt weg */
#solothurn .so-eyebrow {
  text-transform: none;
  letter-spacing: normal;
}
#solothurn .so-eyebrow-dot {
  display: none;
}
/* Hintergrund-Grid entfernen */
#solothurn .so-hero-grid {
  display: none;
}
/* Hero etwas weniger hoch */
#solothurn .so-hero {
  min-height: calc(74vh - 80px);
  min-height: calc(74svh - 80px);
}
/* Karte/Emblem grösser */
#solothurn .so-emblem-stage {
  width: min(32rem, 92vw);
}
@media screen and (min-width: 992px) {
  #solothurn .so-emblem-stage {
    width: 38rem;
  }
}
/* CTA-Button reparieren: Pfeil begrenzen, kein Umbruch, automatische Höhe */
#solothurn .so-hero-cta {
  height: auto;
  min-height: 3rem;
  padding: 0.85rem 1.6rem;
  white-space: nowrap;
  line-height: 1.2;
}
#solothurn .so-hero-cta .so-cta-arrow {
  flex: none;
  width: 1.2rem;
  height: 1.2rem;
}
/* Floating-CTA: höher + sanft ein-/ausblendbar (Logik via Inline-Script) */
#solothurn .so-sticky-cta .so-cta-arrow {
  flex: none;
  width: 1.2rem;
  height: 1.2rem;
}
#solothurn .so-sticky-cta {
  bottom: 7rem;
  white-space: nowrap;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    visibility 0.25s ease;
}
#solothurn .so-sticky-cta.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(12px);
}
@media screen and (max-width: 640px) {
  #solothurn .so-sticky-cta {
    bottom: 4.5rem;
  }
}

/* ---------- Hero-Emblem: Kantonskarte rechts (kompakt) mit Wappen mittig ----------
   Die Karte sitzt in der Emblem-Spalte rechts (kein Vollflaechen-Wasserzeichen)
   und ist bewusst nicht zu gross. Das Wappen liegt konzentrisch darueber. */
#solothurn .so-emblem-stage {
  width: min(40rem, 96vw);
}
@media screen and (min-width: 992px) {
  #solothurn .so-emblem-stage {
    width: 48rem;
  }
}
#solothurn .so-map {
  opacity: 0.7;
}
/* Dickere Linien fuer die grosse Karte. */
#solothurn .so-map-line {
  stroke-width: 2.4;
}
#solothurn .so-wappen {
  width: 26%;
}

/* ===================== Einführung / Aufwand-Section ===================== */
#solothurn .so-intro {
  position: relative;
  padding: 4rem 0;
}
#solothurn .so-intro::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  background: var(--so-soft-blue);
  z-index: -1;
}
#solothurn .so-intro .so-container {
  max-width: 64rem;
}

/* Lead-Absatz direkt unter dem Section-Header (zentriert, digilex-Stil) */
#solothurn .so-intro-lead {
  text-align: center;
  max-width: 46rem;
  margin: 0 auto;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--so-secondary);
}

/* Grosszügiger digilex-Rhythmus zwischen den Unterblöcken */
#solothurn .so-intro-block {
  margin-top: 4.5rem;
}

/* Zurückhaltende, zentrierte Sub-Header — spiegeln die Typografie von
   .so-section-head, ohne ein zweites grosses Icon-Badge pro Block. */
#solothurn .so-intro-subhead {
  text-align: center;
  font-size: 1.5rem;
  line-height: 1.33;
  font-weight: 700;
  color: var(--so-primary);
  margin: 0 auto 0.625rem;
  max-width: 46rem;
}
#solothurn .so-intro-text {
  text-align: center;
  max-width: 44rem;
  margin: 0 auto 2rem;
  color: var(--so-secondary);
  line-height: 1.6;
}

/* Stepper */
#solothurn .so-steps {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 44rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
#solothurn .so-steps li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: start;
}
#solothurn .so-step-num {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--so-brand);
  color: #fff;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#solothurn .so-step-body h4 {
  margin: 0 0 0.25rem;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--so-primary);
}
#solothurn .so-step-body p {
  margin: 0;
  color: var(--so-secondary);
  line-height: 1.55;
}

/* Aufwand nach Rolle — Karten mit Standard-Card-Tokens */
#solothurn .so-effort {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
#solothurn .so-effort-card {
  background: #fff;
  border: 1px solid var(--so-border);
  border-radius: var(--so-radius-card);
  padding: 1.5rem;
  box-shadow: var(--so-shadow-card);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
#solothurn .so-effort-card--accent {
  border-color: var(--so-brand);
  box-shadow: 0 10px 28px rgba(0, 131, 219, 0.14);
}
#solothurn .so-effort-role {
  font-weight: 700;
  color: var(--so-primary);
  font-size: 1rem;
}
#solothurn .so-effort-hours {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--so-brand);
  line-height: 1.15;
  margin-bottom: 0.25rem;
}
#solothurn .so-effort-card p:last-child {
  color: var(--so-secondary);
  line-height: 1.55;
  font-size: 0.9375rem;
}

/* Beispiele */
#solothurn .so-examples {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
#solothurn .so-example {
  background: #fff;
  border: 1px solid var(--so-border);
  border-radius: var(--so-radius-card);
  padding: 1.5rem;
  box-shadow: var(--so-shadow-card);
}
#solothurn .so-example h4 {
  margin: 0 0 0.25rem;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--so-primary);
}
#solothurn .so-example-meta {
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  color: var(--so-secondary);
}
/* Fakten gestapelt: Label oben, Wert darunter – gibt langen Texten Luft und
   hält die kurzen Kennzahlen (Std.) trotzdem als markante Zahl lesbar. */
#solothurn .so-example-facts {
  margin: 0;
  display: flex;
  flex-direction: column;
}
#solothurn .so-fact {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--so-border);
}
#solothurn .so-fact:first-child {
  padding-top: 0;
}
#solothurn .so-fact:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
#solothurn .so-fact-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--so-secondary);
}
#solothurn .so-fact-value {
  margin: 0.25rem 0 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--so-primary);
  line-height: 1.45;
}
/* Kennzahlen-Zeilen: Wert als grosse Markenzahl */
#solothurn .so-fact--metric .so-fact-value {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--so-brand);
}
/* Ergänzende Erläuterung unter dem Hauptwert */
#solothurn .so-fact-detail {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--so-secondary);
  line-height: 1.5;
}
#solothurn .so-example-note {
  margin: 1rem 0 0;
  font-size: 0.875rem;
  color: var(--so-secondary);
  line-height: 1.5;
}

/* Das übernehmen wir */
/* Doppelklasse nötig: die Basis-Regel .so-checklist (margin: 0) steht weiter
   unten und würde das zentrierende auto-Margin sonst überschreiben. */
#solothurn .so-checklist.so-intro-takeover {
  max-width: 44rem;
  margin: 0 auto;
}
/* Zentrierte Zeilen: das Häkchen läuft inline im Text mit statt als
   hängendes Symbol links – so wandert es mit der Zentrierung. */
#solothurn .so-checklist.so-intro-takeover li {
  text-align: center;
  padding-left: 0;
}
#solothurn .so-checklist.so-intro-takeover li::before {
  position: static;
  margin-right: 0.5rem;
}
#solothurn .so-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
#solothurn .so-checklist li {
  position: relative;
  padding-left: 2rem;
  color: var(--so-primary);
  line-height: 1.5;
}
#solothurn .so-checklist li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--so-brand);
  font-weight: 800;
}

/* Und nach der Einführung — weisser Callout (Karte auf blauer Sektion) */
#solothurn .so-intro-after {
  max-width: 64rem;
  margin: 0 auto;
  background: #ffffff;
  border-radius: var(--so-radius-card);
  padding: 2.25rem 2rem;
  text-align: center;
}
#solothurn .so-intro-after h3 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--so-primary);
}
#solothurn .so-intro-after p {
  margin: 0 auto;
  max-width: 40rem;
  color: var(--so-secondary);
  line-height: 1.6;
}

/* FAQ — digilex-Accordion: Hairline-Zeilen + "+"-Marker im grauen Kreis */
#solothurn .so-faq {
  max-width: 46rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
#solothurn .so-faq-item {
  border-top: 1px solid var(--so-border);
  background: transparent;
}
#solothurn .so-faq-item:last-child {
  border-bottom: 1px solid var(--so-border);
}
#solothurn .so-faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem 0;
  font-weight: 700;
  color: var(--so-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
#solothurn .so-faq-item summary::-webkit-details-marker {
  display: none;
}
#solothurn .so-faq-item summary::after {
  content: '+';
  flex: none;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--so-border);
  border-radius: 9999px;
  color: #666;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
  transition: transform 200ms ease-out;
}
#solothurn .so-faq-item[open] summary::after {
  transform: rotate(45deg);
}
#solothurn .so-faq-item p {
  margin: 0;
  padding: 0 0 1.25rem;
  color: var(--so-secondary);
  line-height: 1.6;
}

#solothurn .so-intro-disclaimer {
  max-width: 46rem;
  margin: 3rem auto 0;
  font-size: 0.8125rem;
  color: var(--so-secondary);
  line-height: 1.5;
  text-align: center;
}

@media screen and (min-width: 768px) {
  #solothurn .so-effort {
    grid-template-columns: 1fr 1fr 1fr;
  }
  #solothurn .so-examples {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.75rem;
  }
}

/* Auf breiten Screens brechen die drei Boxen aus dem 1300px-Container aus und
   nutzen mehr Bildschirmbreite (mittig via margin-left:50% + translateX(-50%),
   der Container selbst ist bereits zentriert). Karten bekommen dadurch mehr
   Luft für die längeren Texte. */
@media screen and (min-width: 1180px) {
  #solothurn .so-intro .so-examples {
    width: min(94vw, 1560px);
    margin-left: 50%;
    transform: translateX(-50%);
    gap: 2rem;
  }
  #solothurn .so-intro .so-example {
    padding: 2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  #solothurn .so-faq-item summary::after {
    transition: none;
  }
}

/* ===== Typografie auf digilex-Grössen (ganze Seite) ===== */
#solothurn {
  font-size: 0.9375rem;
}
#solothurn h1 {
  font-size: 1.75rem;
  line-height: normal;
  letter-spacing: normal;
}
#solothurn h2 {
  font-size: 1.25rem;
  line-height: normal;
}
#solothurn h3 {
  font-size: 1.25rem;
  line-height: normal;
}
#solothurn p {
  font-size: 0.9375rem;
}
#solothurn .so-hero-text h1 {
  font-size: 1.75rem;
}
#solothurn .so-hero-subtitle {
  font-size: 1.25rem;
}
@media screen and (min-width: 992px) {
  #solothurn h1 {
    font-size: 2.5rem;
  }
  #solothurn h2 {
    font-size: 2rem;
  }
  #solothurn .so-hero-text h1 {
    font-size: 2.5rem;
  }
}

/* ===== Scroll-getriggerte Entrance-Animationen (nur /solothurn) =====
   Ohne JS (kein `.so-anim` auf #solothurn) laufen alle Animationen wie bisher
   einmalig beim Laden – Inhalte bleiben also auch ohne JS sichtbar. Mit JS
   werden sie via `animation-play-state` in ihrem «from»-Frame pausiert und erst
   freigegeben, sobald die jeweilige Section beim Scrollen in den Viewport kommt
   (Klasse `.in-view`, gesetzt vom IntersectionObserver, einmalig). Höhere
   Spezifität als die Animations-Shorthands ⇒ setzt sich unabhängig von der
   Quellreihenfolge durch; `.in-view` wiederum schlägt den paused-Zustand. */
@media (prefers-reduced-motion: no-preference) {
  #solothurn.so-anim .so-hero *,
  #solothurn.so-anim .so-hero *::before,
  #solothurn.so-anim .so-hero *::after,
  #solothurn.so-anim .so-welcome *,
  #solothurn.so-anim .so-welcome *::before,
  #solothurn.so-anim .so-welcome *::after,
  #solothurn.so-anim .so-timeline *,
  #solothurn.so-anim .so-timeline *::before,
  #solothurn.so-anim .so-timeline *::after {
    animation-play-state: paused;
  }
  #solothurn.so-anim .so-hero.in-view *,
  #solothurn.so-anim .so-hero.in-view *::before,
  #solothurn.so-anim .so-hero.in-view *::after,
  #solothurn.so-anim .so-welcome.in-view *,
  #solothurn.so-anim .so-welcome.in-view *::before,
  #solothurn.so-anim .so-welcome.in-view *::after,
  #solothurn.so-anim .so-timeline.in-view *,
  #solothurn.so-anim .so-timeline.in-view *::before,
  #solothurn.so-anim .so-timeline.in-view *::after {
    animation-play-state: running;
  }
}


/* =====================================================================
   Anpassungen an die PHP-Seite (nach dem 1:1-Block, damit sie gewinnen).
   ===================================================================== */

/* Die fixe Navbar (80px, escola-page.css .main-navigation) nimmt hier —
   anders als der 80px-Spacer im Astro-Header — keinen Platz im Fluss ein. */
#solothurn {
  margin-top: 80px;
}