/* ================================================================
   CASify — Shared styles (tokens, base, navbar, buttons, footer,
   page template). Linked from every page in the site.
   ================================================================ */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  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-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  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-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  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-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  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-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  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-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  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-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  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-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  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-weight: 800;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  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-weight: 800;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  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;
}

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

:root {
  --blue:         oklch(0.50 0.225 264);
  --blue-dark:    oklch(0.44 0.215 264);
  --blue-xlight:  oklch(0.971 0.016 264);
  --text:         oklch(0.152 0.015 265);
  --text-sec:     oklch(0.335 0.022 265);
  --muted:        oklch(0.455 0.030 265);
  --muted-light:  oklch(0.655 0.022 265);
  --bg:           oklch(0.998 0.002 264);
  --bg-soft:      oklch(0.980 0.006 264);
  --border:       oklch(0.917 0.010 264);
  --border-light: oklch(0.958 0.006 264);
  --green:        oklch(0.530 0.178 145);
  --r-sm:         8px;
  --r-btn:        10px;
  --r-full:       9999px;
  --shadow-blue:  0 2px 10px rgba(37,99,235,.16);
  --ease:         cubic-bezier(0.16, 1, 0.3, 1);
  --container-max: 1120px;
  /* Flaechenton: Hintergrund jedes zweiten Abschnitts und der Boxen.
     Hoechstens drei Prozent vom Seitenhintergrund entfernt: --bg hat 0.998,
     --surface 0.970 Helligkeit, also 2,8 Prozentpunkte. Ein spaeterer
     Dunkelmodus muesste nur diese Variablen ueberschreiben. */
  --surface: oklch(0.970 0.006 264);
  /* Einheitlicher Abstand zwischen den Abschnitten. Bis Schritt 3 je
     Abschnitt einzeln gesetzt, zwischen 56 und 128 px. */
  --section-y: clamp(80px, 11.5vw, 168px);
}

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

.accent { color: var(--blue); font-weight: inherit; font-size: inherit; }

html { scroll-behavior: smooth; }

/* Ueberschriften brechen von selbst um. balance verteilt die Woerter
   gleichmaessig auf die Zeilen, statt ein Wort allein stehen zu lassen. */
h1, h2, h3 { text-wrap: balance; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
  font-optical-sizing: auto;
  overflow-x: hidden;
}

h1, h2, h3, h4 { text-wrap: balance; }

p { text-wrap: pretty; }

.skip-link {
  position: absolute; top: -40px; left: 0;
  background: var(--blue); color: white;
  padding: 8px 16px; font-size: 0.875rem; font-weight: 600;
  text-decoration: none; border-radius: 0 0 var(--r-sm) 0;
  z-index: 100; transition: top .2s;
}
.skip-link:focus { top: 0; }

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 40px);
}

@media (min-width: 901px) {
  :root { --container-max: 1200px; }
}

/* ── NAV ──────────────────────────────── */
header {
  position: sticky; top: 0; z-index: 50;
  height: 60px;
  background: oklch(0.998 0.002 264 / 0.88);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid oklch(0.917 0.010 264 / 0.55);
}

.nav-bar {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.logo {
  display: flex; align-items: center; gap: 8px;
  font-size: 1.125rem; font-weight: 800;
  color: var(--text); text-decoration: none;
  letter-spacing: -.02em;
  flex-shrink: 0;
}
.logo:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
.logo-icon {
  width: 36px; height: 36px;
  border-radius: 9px;
  display: block; flex-shrink: 0;
}

.nav-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  flex: 1;
}

.nav-link {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 40px;
  font-size: 0.8125rem; font-weight: 600;
  color: var(--text-sec); text-decoration: none;
  padding: 8px 2px;
  background: none; border: none; cursor: pointer; font-family: inherit;
  transition: color .2s var(--ease);
}
.nav-link:hover { color: var(--blue); }
.nav-link.active { color: var(--blue); }
.nav-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }

.nav-right {
  display: flex; align-items: center; gap: 14px;
  flex-shrink: 0;
}

/* Sprachlink im Kopf, seit Schritt 4. Ersetzt den JavaScript-Umschalter:
   ein einfacher Link auf dieselbe Seite in der anderen Sprache. */
.lang-link {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.04em; line-height: 1;
  color: var(--muted);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  padding: 4px 12px;
  min-height: 30px;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.lang-link:hover { color: var(--text); border-color: var(--muted-light); }
.lang-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Navbar CTA — outline pill button */
.nav-cta {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px;
  font-family: inherit;
  font-size: 0.8125rem; font-weight: 600;
  color: var(--blue); text-decoration: none;
  background: transparent;
  border: 1.5px solid var(--blue);
  border-radius: var(--r-full);
  padding: 7.5px 16.5px;
  transition: all .2s var(--ease);
}
.nav-cta:hover {
  background: var(--blue);
  color: white;
  transform: translateY(-1px);
  box-shadow: var(--shadow-blue);
}
.nav-cta:active {
  background: var(--blue-dark);
  color: white;
  transform: translateY(1px);
  box-shadow: none;
}
.nav-cta:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* ── HAMBURGER ──────────────────────── */
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  border-radius: var(--r-sm);
  flex-shrink: 0;
  transition: background .18s var(--ease);
}
.menu-toggle:hover         { background: var(--bg-soft); }
.menu-toggle:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.menu-bar {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform .26s var(--ease), opacity .18s;
}
.menu-toggle[aria-expanded="true"] .menu-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .menu-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.menu-toggle[aria-expanded="true"] .menu-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── MOBILE NAV PANEL ───────────────── */
.mobile-nav-panel {
  display: none;
  position: fixed;
  top: 60px;
  left: 0; right: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 8px 28px rgba(0,0,0,.09);
  z-index: 49;
  max-height: 0;
  overflow: hidden;
  transition: max-height .32s var(--ease);
}
.mobile-nav-panel.open { max-height: 600px; overflow-y: auto; }

.mobile-nav-list { list-style: none; padding: 6px 0 4px; }

.mobile-nav-link {
  display: flex;
  align-items: center;
  padding: 0 clamp(20px, 5vw, 40px);
  height: 52px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -.01em;
  transition: color .15s, background .15s;
}
.mobile-nav-link:hover        { color: var(--blue); background: var(--blue-xlight); }
.mobile-nav-link:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}

.mobile-nav-lang {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px clamp(20px, 5vw, 40px) 20px;
  border-top: 1px solid var(--border-light);
}

.mobile-lang-label {
  font-size: 0.8125rem;
  color: var(--muted);
  margin-right: 4px;
}

.mobile-lang-link {
  display: inline-flex; align-items: center;
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-sec);
  text-decoration: none;
  border: 1.5px solid var(--border);
  border-radius: var(--r-full);
  padding: 6px 16px;
  min-height: 34px;
  transition: all .18s var(--ease);
}
.mobile-lang-link:hover { color: var(--text); border-color: var(--muted-light); }
.mobile-lang-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ── BACKDROP ───────────────────────── */
.nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.18);
  z-index: 47;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s var(--ease);
}
.nav-backdrop.visible {
  opacity: 1;
  pointer-events: auto;
}

/* Mobile nav covers the same range as every other "mobile" rule (900px),
   see Global Constraints note on the breakpoint change. */
@media (max-width: 900px) {
  .logo-icon          { display: none; }
  body:not(.legal-page) .nav-right .lang-link { display: none; }
  .nav-center         { display: none; }
  .menu-toggle        { display: flex; }
  .mobile-nav-panel   { display: block; }
  .nav-backdrop       { display: block; }
  .nav-right          { gap: 10px; }
  .nav-cta {
    white-space: nowrap;
    font-size: 0.75rem;
    padding: 7px 12px;
    min-height: 36px;
  }
}

/* Extra-narrow phones (≈320-400px): shrink further so hamburger + logo +
   CTA never overflow the available width. */
@media (max-width: 400px) {
  .nav-right { gap: 6px; }
  .nav-cta {
    font-size: 0.6875rem;
    padding: 6px 9px;
    min-height: 32px;
  }
}

/* ── BUTTONS ──────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit; font-weight: 600;
  text-decoration: none; border: none; cursor: pointer;
  border-radius: var(--r-btn);
  transition: all .2s var(--ease);
}

.btn-primary {
  background: var(--blue);
  color: white;
  box-shadow: var(--shadow-blue);
}
.btn-primary:hover {
  background: var(--blue-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(37,99,235,.20);
}
.btn-primary:active {
  transform: translateY(1px);
  box-shadow: 0 1px 6px rgba(37,99,235,.14);
}
.btn-primary:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

.btn-lg { font-size: 1rem; padding: 16px 40px; letter-spacing: -0.01em; }

/* ── FOOTER ───────────────────────────── */
footer {
  border-top: 1px solid var(--border);
  padding: clamp(32px, 4vw, 48px) 0; background: var(--bg);
}

.footer-inner {
  display: flex; align-items: center;
  justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
}

.footer-logo {
  font-size: 0.9375rem; font-weight: 800;
  color: var(--text); text-decoration: none;
  letter-spacing: -.02em;
}

footer nav { display: flex; gap: 28px; flex-wrap: wrap; }

footer nav a {
  font-size: 0.8125rem; color: var(--muted);
  text-decoration: none; transition: color .2s;
}
footer nav a:hover { color: var(--text); }
footer nav a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 2px; }

.footer-copy { font-size: 0.75rem; color: var(--muted); }
/* Markenhinweis nach WEBSITE-PLAN.md, Punkt 4. Eigene Zeile unter Logo,
   Links und Copyright. Seit Schritt 3 auf den Erklaerungsseiten, auf den
   uebrigen Seiten folgt er in Schritt 4. */
.footer-note {
  flex-basis: 100%;
  font-size: 0.75rem; color: var(--muted); line-height: 1.6;
}

@media (max-width: 640px) {
  .footer-inner { flex-direction: column; align-items: flex-start; }
  footer nav { gap: 20px; }
}

/* ── PAGE TEMPLATE (Uebersicht, Ueber mich, Feature pages) ── */
.page-header {
  padding: clamp(64px, 8vw, 112px) 0 clamp(48px, 6vw, 80px);
  text-align: center;
}

/* ── ABSCHNITTE IM FARBWECHSEL ──
   Seit Schritt 3 gibt es keine Trennlinien zwischen den Abschnitten und
   keine Ueberzeilen in Versalien mehr. Die Abschnitte wechseln stattdessen
   ihren Hintergrund: ungerade im Seitenhintergrund, gerade im Flaechenton.
   Der Wechsel zaehlt automatisch mit. Ein neuer Abschnitt reiht sich von
   selbst ein, ohne dass eine Farbe von Hand gesetzt werden muss. */
main > section,
.page-content > section {
  --card-bg: var(--surface);
}
main > section:nth-of-type(even) {
  --card-bg: var(--bg);
  background: var(--surface);
}
/* Auf den Unterseiten liegen die Abschnitte in einer schmalen Spalte.
   Der Schatten zieht die Flaeche trotzdem ueber die volle Fensterbreite,
   clip-path schneidet sie oben und unten wieder buendig ab. */
.page-content > section:nth-of-type(even) {
  --card-bg: var(--bg);
  background: var(--surface);
  box-shadow: 0 0 0 100vmax var(--surface);
  clip-path: inset(0 -100vmax);
}

/* ── BOXEN ──
   Boxen setzen sich allein durch ihre Flaeche ab: kein Rahmen, kein
   Schatten. Sie nehmen immer die jeweils andere Farbe als ihr Abschnitt
   (--card-bg), auf weissem Grund also den Flaechenton und umgekehrt.
   Einzige Box mit Rahmen ist die Pro-Preiskarte, siehe .pricing-card--highlight.
   Abweichende Innenabstaende und Radien stehen bei der jeweiligen Box. */
.problem-card, .compare-box, .compare-extra-tile, .feature-table-wrap,
.pricing-card, .stat-tile, .survey-card, .mission-tile,
.contact-card, .explain-card, .article-summary, .article-box {
  background: var(--card-bg, var(--surface));
  border-radius: 18px;
  padding: clamp(24px, 2.8vw, 32px);
}

/* ── SECTION HEADER (zentrierte Ueberschrift mit optionalem Absatz) ── */
.section-header {
  text-align: center;
  max-width: 560px;
  margin: 0 auto clamp(40px, 5vw, 64px);
}
.section-header h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 800; line-height: 1.2;
  letter-spacing: -.025em; color: var(--text);
}
.section-header p {
  margin-top: 12px;
  font-size: 0.9375rem; color: var(--muted); line-height: 1.7;
}

/* ── ACCORDION (used by FAQ and Themen) ── */

.accordion-trigger {
  width: 100%;
  display: flex; align-items: center;
  justify-content: space-between; gap: 16px;
  background: none; border: none; cursor: pointer;
  font-family: inherit;
  padding: 24px 0; min-height: 64px;
  text-align: left;
}
.accordion-trigger:hover .accordion-arrow { color: var(--blue); }
.accordion-trigger:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.accordion-label {
  font-size: 1rem; font-weight: 600;
  color: var(--text); line-height: 1.4;
  letter-spacing: -.015em;
  transition: color 200ms;
}

.accordion-arrow {
  flex-shrink: 0; width: 20px; height: 20px;
  color: var(--muted);
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1), color 200ms;
}
.accordion-trigger[aria-expanded="true"] .accordion-arrow { transform: rotate(180deg); color: var(--blue); }
.accordion-trigger[aria-expanded="true"] .accordion-label { color: var(--blue); }

.accordion-panel {
  max-height: 0; overflow: hidden;
  transition: max-height 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
.accordion-body {
  padding-bottom: 24px;
  font-size: 0.9375rem; color: var(--muted); line-height: 1.75;
}

@media (prefers-reduced-motion: reduce) {
  .accordion-panel { transition: none; }
  .accordion-arrow  { transition: none; }
}
@media (max-width: 640px) {
  .accordion-trigger { min-height: 56px; padding: 20px 0; }
  .accordion-label { font-size: 0.9375rem; }
}

.page-title {
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 800; line-height: 1.15;
  letter-spacing: -.03em; color: var(--text);
  max-width: 700px; margin: 0 auto 16px;
}

.page-subtitle {
  font-size: clamp(1rem, 2vw, 1.125rem);
  color: var(--muted); max-width: 560px;
  margin: 0 auto; line-height: 1.65;
}

.page-content {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 40px);
  display: flex; flex-direction: column;
}
.page-content > section { padding-block: var(--section-y); }
/* Der erste Abschnitt schliesst direkt an den Seitenkopf an, beide weiss. */
.page-content > section:first-child { padding-top: 0; }

/* ── BACK TO TOP ──────────────────────── */
.back-to-top {
  position: fixed; right: 24px; bottom: 24px;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--muted);
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
  cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s, color .2s, border-color .2s;
  z-index: 40;
}
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { color: var(--blue); border-color: rgba(37,99,235,.4); }
.back-to-top:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.back-to-top svg { width: 18px; height: 18px; }

@media (prefers-reduced-motion: reduce) {
  .back-to-top { transition: opacity .01s linear, visibility .01s linear; }
}




/* ── COMPARE (CASify vs. KI-Chatbots) ── */
.compare-section {
  padding: var(--section-y) 0;
}
/* Ueberschrift zentriert ueber der Box wie bei den anderen Abschnitten.
   Darunter eine einzige Box mit drei Absaetzen in einer Lesespalte.
   content-box, damit max-width die Textbreite begrenzt und nicht die Box
   samt Innenabstand: 33em sind in Inter bei diesem Text im Schnitt
   68 Zeichen je Zeile, gemessen an den Zeichenbreiten der Schrift.
   Der dritte, kurze Absatz steht abgesetzt als eigener Gedanke.
   Bis Schritt 3 eine Tabelle mit Haekchen, danach kurz Text neben einem
   Screenshot, dann eine Box mit der Ueberschrift darin. */
.compare-box {
  box-sizing: content-box;
  max-width: 33em;
  margin: 0 auto;
  padding: clamp(28px, 5.5vw, 64px);
}
.compare-box p {
  font-size: 1rem; color: var(--text-sec);
  line-height: 1.75;
}
.compare-box p + p { margin-top: 1.1em; }
.compare-box .compare-coda {
  margin-top: 2em;
  font-weight: 500; color: var(--text);
}

.compare-extra-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(18px, 2.2vw, 24px);
  max-width: 900px;
  margin: clamp(40px, 5vw, 56px) auto 0;
}
@media (max-width: 640px) {
  .compare-extra-grid { grid-template-columns: 1fr; }
}
.compare-extra-tile {
  text-align: center;
  padding: clamp(22px, 2.8vw, 28px);
}
.compare-extra-tile--wide { grid-column: 1 / -1; }
.compare-extra-tile h3 {
  font-size: 0.9375rem; font-weight: 700;
  color: var(--text); margin-bottom: 8px;
}
.compare-extra-tile p { font-size: 0.8438rem; color: var(--muted); line-height: 1.6; }

/* ── FEATURE TABLE (checkmark list, e.g. Kompatibilität) ── */
.feature-table-wrap {
  max-width: 640px;
  margin: clamp(40px, 5vw, 56px) auto 0;
  padding: 0;
  overflow: hidden;
}
.feature-table {
  width: 100%;
  border-collapse: collapse;
}
.feature-table thead th {
  padding: 12px 24px;
  font-size: 0.6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--muted);
  text-align: left;
  border-bottom: 1px solid var(--border-light);
}
.feature-table thead th:last-child {
  width: 48px;
  text-align: center;
}
.feature-table td {
  padding: 14px 24px;
  font-size: 0.9375rem;
  color: var(--text-sec);
  text-align: left;
}
.feature-table td:last-child {
  width: 48px;
  text-align: center;
}
.feature-table td:last-child svg {
  width: 18px; height: 18px; color: var(--blue);
}
.feature-table-group td {
  padding: 28px 24px 6px;
  font-size: 0.6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--muted);
}

/* ── PRICING (Lite vs Pro) ── */
.pricing-section {
  padding: var(--section-y) 0;
}
.pricing-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 28px;
  max-width: 820px;
  margin: 0 auto;
}
.pricing-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 320px;
  max-width: 360px;
  border: 1.5px solid transparent;
  border-radius: 24px;
  padding: clamp(32px, 3.5vw, 44px);
  position: relative;
  text-align: center;
}
/* Die einzige hervorgehobene Karte der Website. Nur hier Rahmen und Akzent. */
.pricing-card--highlight {
  border-color: var(--blue);
}
.pricing-card-badge {
  position: absolute;
  top: -13px; left: 50%;
  transform: translateX(-50%);
  background: var(--blue); color: white;
  font-size: 0.6875rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 5px 14px;
  border-radius: var(--r-full);
  white-space: nowrap;
}
.pricing-card-icon {
  width: 96px; height: 96px;
  margin-bottom: 20px;
  border-radius: 22%;
  border: 1px solid var(--border);
  overflow: hidden;
  flex-shrink: 0;
}
.pricing-card-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pricing-card-price {
  font-size: 2rem; font-weight: 800;
  color: var(--text); margin-bottom: 4px;
}
.pricing-card-price-suffix {
  font-size: 0.875rem; font-weight: 500; color: var(--muted);
}
.pricing-card-tagline {
  font-size: 0.875rem; color: var(--muted); line-height: 1.6;
  margin-bottom: 24px;
  width: 100%;
}
.pricing-card-list {
  list-style: none;
  display: flex; flex-direction: column; gap: 12px;
  width: 100%;
  margin-bottom: 28px;
  text-align: left;
  flex: 1;
}
.pricing-card-list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 0.9375rem; color: var(--text-sec);
}
.pricing-card-list svg {
  width: 18px; height: 18px; color: var(--blue);
  flex-shrink: 0; margin-top: 2px;
}
.pricing-card .btn {
  width: 100%;
  justify-content: center;
  font-size: 0.9375rem;
  padding: 14px 28px;
}

/* ── ERKLAERUNGEN (Raster auf der Startseite, 3 x 2) ──
   Jede Kachel ist ein Link. Der Titel-Link spannt per ::after ueber die
   ganze Box, so ist die ganze Kachel anklickbar und trotzdem nur ein
   Link fuer Screenreader. */
.explain-section { padding: var(--section-y) 0; }
.explain-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 2vw, 24px);
}
@media (min-width: 640px) {
  .explain-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .explain-grid { grid-template-columns: repeat(3, 1fr); }
}
.explain-card {
  position: relative;
  transition: background .2s var(--ease);
}
/* Hover nur, wenn die Kachel schon auf eine Seite verlinkt */
.explain-card:has(a):hover { background: var(--blue-xlight); }
.explain-card:has(a:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
.explain-card h3 {
  font-size: 1.0625rem; font-weight: 700;
  line-height: 1.35; margin-bottom: 8px;
}
.explain-card h3 a { color: var(--text); text-decoration: none; }
.explain-card h3 a:focus-visible { outline: none; }
.explain-card h3 a::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
}
.explain-card:has(a):hover h3 a { color: var(--blue); }
.explain-card p { font-size: 0.9375rem; color: var(--muted); line-height: 1.65; }
/* Uebersichtsseite /ti-nspire/: dasselbe Raster wie auf der Startseite,
   direkt unter dem Seitenkopf. Bis Schritt 3 drei Gruppen mit Ueberschrift. */
.page-header + .explain-section { padding-top: 0; }
.explain-more {
  text-align: center;
  margin-top: clamp(32px, 4vw, 48px);
}
.explain-more a {
  font-size: 0.9375rem; font-weight: 600;
  color: var(--blue); text-decoration: none;
}
.explain-more a:hover { color: var(--blue-dark); text-decoration: underline; }
.explain-more a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }

/* ── ERKLAERUNGSSEITEN (/ti-nspire/...) ──
   Kopf zweispaltig wie ein Hero: links H1 und Antwort, etwa zwei Drittel,
   rechts die Box "Kurz gesagt", etwa ein Drittel. Sie klebt beim Scrollen
   nicht fest. Auf dem Handy steht sie unter der Antwort.
   Darunter Fliesstext in einer Lesespalte, linksbuendig unter der H1.
   33em sind bei diesen Texten in Inter im Schnitt 68 Zeichen je Zeile,
   gemessen an den Zeichenbreiten der Schrift. 68ch waeren rund 89, weil
   ch an der breiteren Ziffer 0 misst.
   Ein durchgehender Hintergrund, kein Farbwechsel, normale Absatzabstaende.
   Boxen nur dort, wo der Text eine markiert (.article-box). */
.article {
  max-width: 1040px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 80px) clamp(16px, 4vw, 40px) clamp(64px, 8vw, 112px);
}
.article-crumb {
  font-size: 0.875rem; font-weight: 600;
  margin-bottom: clamp(14px, 2vw, 20px);
}
.article-crumb a { color: var(--blue); text-decoration: none; }
.article-crumb a:hover { color: var(--blue-dark); text-decoration: underline; }
.article-crumb a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
.article-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 40px);
  align-items: start;
  margin-bottom: clamp(40px, 5.5vw, 64px);
}
@media (min-width: 900px) {
  .article-top {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: clamp(40px, 5vw, 64px);
  }
}
.article-title {
  font-size: clamp(2rem, 4.5vw, 2.75rem);
  font-weight: 800; line-height: 1.15;
  letter-spacing: -.03em; color: var(--text);
}
.article-answer {
  margin-top: clamp(16px, 2vw, 24px);
  font-size: clamp(1.125rem, 2vw, 1.3125rem);
  line-height: 1.6; color: var(--text-sec);
  max-width: 32em;
}
.article-summary { padding: clamp(22px, 2.4vw, 28px); }
.article-summary h2 {
  font-size: 1rem; font-weight: 700;
  color: var(--text); margin-bottom: 12px;
}
.article-summary ul {
  list-style: none;
  display: flex; flex-direction: column; gap: 10px;
}
.article-summary li {
  position: relative;
  padding-left: 18px;
  font-size: 0.9375rem; line-height: 1.5;
  color: var(--text-sec);
}
.article-summary li::before {
  content: "";
  position: absolute; left: 2px; top: .6em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--muted-light);
}
/* Fliesstext: Abstaende nur zwischen Absaetzen und vor Ueberschriften */
.article-text {
  max-width: 33em;
  font-size: 1.0625rem;
}
.article-text p { line-height: 1.75; color: var(--text-sec); }
.article-text > * + * { margin-top: 1.1em; }
.article-text > h2 {
  margin-top: 2.2em;
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  font-weight: 800; line-height: 1.3;
  letter-spacing: -.02em; color: var(--text);
}
.article-text > h2:first-child { margin-top: 0; }
.article-text > h2 + * { margin-top: .6em; }
.article-text > .article-box { margin-block: 1.75em; }
.article-box { padding: clamp(20px, 2.6vw, 28px); }
.article-box p { color: var(--text); }
/* Verwandte Fragen: eine schlichte Zeile unter dem Text */
.article-text > .article-related {
  margin-top: 2.5em;
  font-size: 0.9375rem; line-height: 1.6;
  color: var(--muted);
}
.article-related-label { font-weight: 700; color: var(--text); margin-right: .4em; }
.article-related a { color: var(--blue); font-weight: 600; text-decoration: none; }
.article-related a:hover { color: var(--blue-dark); text-decoration: underline; }
.article-related a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
/* Tasten wie eine flache Taste, Code in Festbreitenschrift auf leisem Grau */
.article kbd {
  font-family: inherit; font-size: .85em; font-weight: 600;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 6px;
  padding: .05em .45em;
  white-space: nowrap;
}
.article code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em;
  color: var(--text);
  background: var(--border-light);
  border-radius: 5px;
  padding: .1em .35em;
  white-space: nowrap;
}

/* ── APP-STORE-VERWEIS (Ende jeder Erklaerungsseite) ──
   Pro-Logo links, rechts zwei Zeilen Text und ein Knopf. Ohne Flaeche,
   damit er sich von den markierten Boxen im Text unterscheidet. Gleiche
   Breite wie die Lesespalte. */
.app-cta {
  display: flex; align-items: flex-start;
  gap: clamp(16px, 2.5vw, 24px);
  max-width: 33em;
  font-size: 1.0625rem;
  margin-top: clamp(48px, 6vw, 72px);
}
.app-cta-logo {
  flex-shrink: 0;
  width: 72px; height: 72px;
  border-radius: 22%;
  border: 1px solid var(--border);
}
.app-cta-title { font-weight: 800; color: var(--text); letter-spacing: -.01em; }
.app-cta-text {
  margin-top: 2px;
  font-size: 0.9375rem; line-height: 1.55;
  color: var(--muted);
}
.app-cta-btn {
  margin-top: 14px;
  font-size: 0.9375rem;
  padding: 12px 24px;
}
@media (max-width: 480px) {
  .app-cta-logo { width: 56px; height: 56px; }
}

/* ── STATS / SOCIAL PROOF (bento grid) ── */
.stats-section { padding: var(--section-y) 0; }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(20px, 2.5vw, 28px);
}
.stat-tile {
  text-align: center;
  padding: clamp(32px, 4vw, 44px) clamp(20px, 2.8vw, 28px);
}
.stat-tile-num {
  display: block;
  font-size: clamp(2.25rem, 4vw, 3rem);
  font-weight: 800; color: var(--blue);
  letter-spacing: -.03em; margin-bottom: 8px;
}
.stat-tile-label { font-size: 0.9375rem; font-weight: 600; color: var(--text-sec); margin-bottom: 4px; }
.stat-tile-sub { font-size: 0.8125rem; color: var(--muted); line-height: 1.6; }

/* ── SCHULEN ── */
.schools-section { padding: var(--section-y) 0; }
.schools-inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.schools-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: clamp(20px, 2.5vw, 28px);
  font-size: 0.9375rem; font-weight: 600;
  color: var(--blue); text-decoration: none;
}
.schools-link:hover { color: var(--blue-dark); text-decoration: underline; }
.schools-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }

/* ── STAR RATING (survey results) ── */
.star-rating {
  position: relative;
  display: inline-block;
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: 3px;
  color: var(--border);
}
.star-rating-fill {
  position: absolute;
  top: 0; left: 0;
  overflow: hidden;
  white-space: nowrap;
  color: var(--blue);
}

/* ── SURVEY RESULT CARDS (used on schulen.html) ── */
.survey-grid {
  display: flex; flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  max-width: 720px;
  margin: 0 auto;
}
.survey-card {
  flex: 1 1 300px;
  max-width: 340px;
  text-align: center;
  padding: clamp(28px, 3.5vw, 40px);
}
.survey-card-value {
  margin-top: 16px;
  font-size: 1.75rem; font-weight: 800; color: var(--text);
  letter-spacing: -.02em;
}
.survey-card-value span { font-size: 1rem; font-weight: 500; color: var(--muted); }
.survey-card-label {
  margin-top: 6px;
  font-size: 0.9375rem; font-weight: 600; color: var(--text-sec);
}
.survey-card-note {
  margin-top: 10px;
  font-size: 0.8125rem; color: var(--muted); line-height: 1.6;
}

/* ── MISSION / VALUES tiles (used on ueber-mich.html, bento grid) ── */
.mission-grid {
  max-width: 680px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2.5vw, 28px);
}
@media (max-width: 640px) {
  .mission-grid { grid-template-columns: 1fr; }
}
.mission-tile {
  text-align: center;
}
.mission-tile--wide {
  grid-column: 1 / -1;
}
.mission-tile-icon {
  color: var(--blue);
  display: flex; justify-content: center;
  margin: 0 auto 14px;
}
.mission-tile-icon svg { width: 22px; height: 22px; }
.mission-tile h3 {
  font-size: 1rem; font-weight: 700;
  color: var(--text); margin-bottom: 8px;
}
.mission-tile p { font-size: 0.875rem; color: var(--muted); line-height: 1.6; }

/* ── CONTACT / SOCIAL cards (used on ueber-mich.html, bento grid) ── */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(20px, 2.5vw, 28px);
}
.contact-card {
  display: flex; align-items: center; gap: 14px;
  padding: clamp(20px, 2.5vw, 24px);
  text-decoration: none;
  transition: background .2s var(--ease);
}
/* Kontaktboxen sind Links, deshalb als einzige Boxen mit Hover-Zustand */
.contact-card:hover { background: var(--blue-xlight); }
.contact-card:hover .contact-card-label { color: var(--blue); }
.contact-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.contact-card-icon {
  flex-shrink: 0;
  display: flex;
  color: var(--blue);
}
.contact-card-icon svg { width: 20px; height: 20px; }
.contact-card-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.contact-card-label { font-size: 0.9375rem; font-weight: 700; color: var(--text); }
.contact-card-sub {
  font-size: 0.8125rem; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}


/* ── RECHTSTEXTE (impressum.html, datenschutz.html) ──
   Die Seiten trugen diese Regeln bis Schritt 2 inline und mit einer
   aelteren Farbpalette. Hier zusammengefuehrt, die Farben kommen jetzt
   aus den Tokens oben. Der schmalere Textblock bleibt erhalten:
   Rechtstexte auf 1120px Breite liest niemand. */
.legal-page main { padding: 64px 0 96px; }
.legal-page main > .container { max-width: 720px; }

.legal-page h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800; letter-spacing: -.025em;
  line-height: 1.15; margin-bottom: 8px;
}

.meta { font-size: 0.875rem; color: var(--muted-light); margin-bottom: 48px; }

.nav-back {
  font-size: 0.875rem; font-weight: 600;
  color: var(--blue); text-decoration: none;
  transition: opacity .2s var(--ease);
}
.nav-back:hover { opacity: .7; }

.legal-section { margin-bottom: 40px; }
.legal-section h2 {
  font-size: 1.0625rem; font-weight: 700;
  color: var(--text); margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-light);
}
.legal-section h3 {
  font-size: 0.875rem; font-weight: 600;
  color: var(--text); margin: 16px 0 8px;
}
.legal-section p {
  font-size: 0.9375rem; line-height: 1.75;
  color: var(--muted); margin-bottom: 12px;
}
.legal-section ul { list-style: none; padding: 0; margin-bottom: 12px; }
.legal-section ul li {
  font-size: 0.9375rem; line-height: 1.75;
  color: var(--muted); padding-left: 16px;
  position: relative; margin-bottom: 4px;
}
.legal-section ul li::before {
  content: '‚2'; position: absolute; left: 0; color: var(--muted-light);
}

.info-box {
  background: var(--surface);
  border-radius: var(--r-sm); padding: 16px 20px;
  font-size: 0.875rem; color: var(--text-sec); line-height: 1.65;
  margin-bottom: 48px;
}
.warning-box {
  background: oklch(0.977 0.038 92);
  border: 1px solid oklch(0.900 0.107 92);
  border-radius: var(--r-sm); padding: 16px 20px;
  font-size: 0.8125rem; color: oklch(0.452 0.096 62); line-height: 1.6;
  margin-bottom: 48px;
}
/* markiert offene Platzhalter in Rechtstexten */
.placeholder {
  background: oklch(0.971 0.024 17); color: oklch(0.437 0.156 27);
  border-radius: 4px; padding: 1px 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8125rem;
}

/* ── COOKIE-BANNER (alle Seiten ausser 404) ── */
#cookie-banner {
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(16px);
  width: calc(100% - 48px); max-width: 500px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px 24px;
  z-index: 9999;
  box-shadow: 0 4px 28px rgba(0,0,0,0.10), 0 1px 6px rgba(0,0,0,0.06);
  display: flex; flex-direction: column; gap: 14px;
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.34, 1.2, 0.64, 1), opacity 0.35s ease;
}
#cookie-banner.visible { transform: translateX(-50%) translateY(0); opacity: 1; }
.cookie-msg { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--text); }
.cookie-btns { display: flex; gap: 8px; }
#cookie-accept {
  background: var(--blue); color: #fff;
  border: none; border-radius: var(--r-sm); padding: 9px 20px;
  cursor: pointer; font-size: 0.875rem; font-weight: 500; font-family: inherit;
  transition: background 0.15s;
}
#cookie-accept:hover { background: var(--blue-dark); }
#cookie-decline {
  background: transparent; color: var(--text-sec);
  border: 1px solid var(--border); border-radius: var(--r-sm); padding: 9px 18px;
  cursor: pointer; font-size: 0.875rem; font-family: inherit;
  transition: border-color 0.15s, color 0.15s;
}
#cookie-decline:hover { color: var(--text); border-color: var(--text-sec); }
.cookie-more { font-size: 0.8rem; color: var(--blue); text-decoration: none; }
.cookie-more:hover { text-decoration: underline; }
@media (max-width: 540px) {
  #cookie-banner { bottom: 16px; width: calc(100% - 32px); padding: 18px; gap: 12px; }
  #cookie-accept, #cookie-decline { flex: 1; padding: 12px 16px; font-size: 0.9rem; text-align: center; border-radius: 10px; }
}

/* ── 404-SEITE ── */
.nf {
  min-height: 100vh;   /* Rueckfall fuer aeltere Browser */
  min-height: 100svh;  /* springt auf iOS nicht, wenn die Safari-Leisten fahren */
  display: flex; flex-direction: column;
}
.nf-top { padding: clamp(20px, 4vw, 32px) 0; }
.nf-top .container { display: flex; justify-content: center; }
.nf-top .container { position: relative; align-items: center; }
.nf-top .lang-link { position: absolute; right: clamp(16px, 4vw, 40px); }
.nf-main { flex: 1; display: flex; padding: 0 0 clamp(16px, 6vh, 72px); }
.nf-main > .container { margin: auto; }
.nf-inner { max-width: 34rem; margin: 0 auto; text-align: center; }
.nf-code {
  /* min(18vw, 22vh): auf breiten, aber flachen Fenstern bremst die Hoehe
     die Zahl aus, sonst frisst sie den Platz auf */
  font-size: clamp(4rem, min(18vw, 22vh), 9rem);
  font-weight: 800; line-height: 1; letter-spacing: -.05em;
  color: oklch(0.930 0.012 264);
  margin-bottom: clamp(12px, 2vh, 20px); user-select: none;
}
.nf-title {
  font-size: clamp(1.5rem, 5vw, 2.5rem);
  font-weight: 800; line-height: 1.15; letter-spacing: -.025em;
  color: var(--text); margin-bottom: clamp(10px, 1.6vh, 16px);
  text-wrap: balance;
}
.nf-text {
  font-size: clamp(0.9375rem, 2vw, 1.0625rem);
  line-height: 1.65; color: var(--muted); text-wrap: pretty;
}
.footer-slim {
  border-top: 1px solid var(--border);
  background: var(--bg-soft);
  padding: clamp(18px, 3vw, 26px) 0;
}
.footer-slim-inner {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: 6px 20px; font-size: 0.75rem; color: var(--muted);
}
.footer-slim a { color: var(--muted); text-decoration: none; transition: color .2s; }
.footer-slim a:hover { color: var(--text); }
.footer-slim a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 2px; }

/* ════════════════════════════════════════════════════════════════
   SEITENSPEZIFISCHE REGELN
   Bis Schritt 2 standen sie inline im <head> der jeweiligen Seite.
   Sie stehen bewusst am Dateiende: Dort lagen sie vorher in der
   Kaskade auch, weil ein Inline-<style> nach dem <link> kommt.
   Alle Selektoren sind seitenspezifisch und greifen auf keiner
   anderen Seite (vor dem Umzug geprueft).
   ════════════════════════════════════════════════════════════════ */

/* ── STARTSEITE (index.html) ── */
/* ── HERO ─────────────────────────────── */
.hero {
  position: relative;
  padding: clamp(80px, 10vw, 140px) 0 clamp(64px, 8vw, 100px);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}


.hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 140px;
  background: linear-gradient(to bottom, transparent, var(--bg));
  pointer-events: none;
  z-index: 0;
}

.hero .container { position: relative; z-index: 1; }

/* ── HERO PATHS ──────────────────────────────── */
.hero-paths {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.hero-paths path {
  fill: none;
  opacity: 0;
}

/* ── HERO LETTER ANIMATION ───────────────────── */
.hero-letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-letter.visible {
  opacity: 1;
  transform: translateY(0);
}

.hero-word {
  display: inline-block;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .hero-paths { will-change: auto; transform: none; }
  .hero-letter { opacity: 1; transform: none; transition: none; }
  .badge-dot { animation: none; }
  .hero-visual { animation: none; will-change: auto; transform: none; }
}

.badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--blue-xlight);
  border: 1px solid rgba(37,99,235,.22);
  color: var(--blue-dark);
  font-size: 0.8125rem; font-weight: 500;
  padding: 6px 16px; border-radius: var(--r-full);
  margin-bottom: 28px;
}

.badge-dot {
  width: 6px; height: 6px;
  background: var(--green);
  border-radius: 50%; flex-shrink: 0;
  animation: pulse-dot 2.5s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .5; transform: scale(.85); }
}

.hero h1 {
  font-size: clamp(2.1rem, 8vw, 4rem);
  font-weight: 800; line-height: 1.1;
  letter-spacing: -.03em; color: var(--text);
  max-width: 760px; margin: 0 auto 24px;
}

/* Unterzeile unter der H1, seit Schritt 3. Darunter folgt .hero-sub. */
.hero-tagline {
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 700; line-height: 1.3;
  letter-spacing: -.02em; color: var(--text-sec);
  max-width: 640px; margin: -8px auto 20px;
}

.hero-sub {
  font-size: clamp(1rem, 2vw, 1.125rem);
  color: var(--muted);
  max-width: 460px; margin: 0 auto 40px;
  line-height: 1.65;
}

/* ── PROBLEM UND LOESUNG ──
   Seit Schritt 3 ein einziger Abschnitt. Drei Boxen nebeneinander, auf dem
   Handy untereinander. In jeder Box oben die Ueberschrift, darunter das
   Hindernis in Grau, darunter die Antwort von CASify, dunkler und etwas
   kraeftiger. Ueberschrift des Abschnitts linksbuendig. */
.problem-section { padding: var(--section-y) 0; }
.problem-inner { max-width: 1040px; margin: 0 auto; }
.problem-intro {
  max-width: 640px;
  margin-bottom: clamp(40px, 5vw, 56px);
}
.problem-intro h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 800; line-height: 1.2;
  letter-spacing: -.025em; color: var(--text);
}
.problem-intro p {
  margin-top: 12px;
  font-size: 1rem; color: var(--muted); line-height: 1.7;
}
.problem-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 2vw, 24px);
}
@media (min-width: 860px) {
  .problem-list { grid-template-columns: repeat(3, 1fr); }
}
.problem-card h3 {
  font-size: 1.0625rem; font-weight: 700;
  color: var(--text); letter-spacing: -.01em;
  margin-bottom: 10px;
}
.problem-obstacle { font-size: 0.9375rem; color: var(--muted); line-height: 1.65; }
.problem-answer {
  margin-top: 14px;
  font-size: 1rem; font-weight: 500; line-height: 1.6;
  color: var(--text);
}

/* ── FINAL CTA ────────────────────────── */
.cta-section {
  padding: var(--section-y) clamp(16px, 4vw, 40px);
}

.cta-inner {
  text-align: center;
  max-width: 520px; margin: 0 auto;
}

.cta-inner h2 {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 800; letter-spacing: -.025em;
  line-height: 1.2; color: var(--text);
  margin-bottom: 16px;
}

.cta-sub {
  font-size: 1rem; color: var(--muted);
  margin-bottom: 36px; line-height: 1.65;
}

.cta-note {
  margin-top: 18px;
  font-size: 0.8125rem; color: var(--muted);
}

/* ── RESPONSIVE ──
   Die Fusszeilen-Regel unter 640px stand hier doppelt. Sie steht
   wortgleich weiter oben in dieser Datei und ist deshalb entfallen. */
@media (max-width: 480px) {
  /* :where() begrenzt die Regel auf den Abschluss-CTA der Startseite,
     ohne die Spezifitaet zu erhoehen. Sonst traefe sie auch den
     Kontakt-Button auf schulen.html. */
  :where(.cta-inner) .btn-lg { font-size: 0.9375rem; padding: 14px 28px; }
}

/* ── PHONE MOCKUP ────────────────────── */
.phone-mockup {
  border-radius: clamp(18px, 3.5vw, 38px);
  border: 10px solid #1C1C1E;
  overflow: hidden;
  background: #1C1C1E;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 28px 72px rgba(0,0,0,.22),
    0 6px 20px rgba(0,0,0,.12);
}

.phone-mockup img {
  width: 100%;
  height: auto;
  display: block;
}

.phone-mockup--right {
  transform: rotate(4deg);
  transform-origin: center bottom;
}

.phone-mockup--left {
  transform: rotate(-3deg);
  transform-origin: center bottom;
}

/* ── HERO SPLIT ──────────────────────── */
.hero-split {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(24px, 3vw, 36px);
  text-align: center;
}

.hero-text { flex: 1; min-width: 0; width: 100%; }

/* Phone mockup — shown only below 900px, keeps the current mobile hero unchanged */
.hero-visual {
  display: none;
  flex: 0 0 clamp(200px, 20vw, 280px);
  width: clamp(200px, 20vw, 280px);
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  animation: heroFloat 4s ease-in-out infinite;
}

@keyframes heroFloat {
  0%, 100% { transform: translateZ(0) translateY(0px); }
  50%       { transform: translateZ(0) translateY(-12px); }
}

/* Wide-screen hero screenshot — shown from 900px up, replaces the phone mockup */
.hero-shot-frame {
  display: block;
  width: 100%;
  max-width: 900px;
  margin: clamp(16px, 3vw, 32px) auto 0;
  border-radius: clamp(16px, 2vw, 24px);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,.10);
}

.hero-shot {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
  -webkit-mask-image: linear-gradient(to bottom, black 92%, transparent 100%);
          mask-image: linear-gradient(to bottom, black 92%, transparent 100%);
}

@media (max-width: 900px) {
  .hero-shot-frame { display: none; }
  .hero-visual {
    display: block;
    flex: none;
    width: 180px;
    order: -1;
  }
}

@media (max-width: 600px) {
  .hero-visual     { width: 150px; }
}

/* ── FAQ ─────────────────────────────── */
.faq {
  padding: var(--section-y) 0;
}

.faq-header {
  text-align: center;
  max-width: 560px;
  margin: 0 auto clamp(40px, 5vw, 64px);
}

.faq-header h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 800; line-height: 1.2;
  letter-spacing: -.025em; color: var(--text);
  margin-bottom: 14px;
}

.faq-intro {
  font-size: 1rem; color: var(--muted);
}

.faq-list {
  max-width: 720px;
  margin: 0 auto;
}

@media (max-width: 640px) {
  .faq-header { margin-bottom: 48px; }
}

/* ── WIDE-SCREEN TUNING (≥901px) ─────── */
@media (min-width: 901px) {
  .hero-shot-frame { max-width: 1040px; }

  .hero        { padding: clamp(96px, 11vw, 160px) 0 clamp(80px, 9vw, 120px); }
}


/* ── UEBER MICH (ueber-mich.html) ── */
.about-inner {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
.about-avatar {
  width: 172px; height: 172px;
  border-radius: 34px; overflow: hidden;
  margin: 0 auto 28px;
}
.about-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-text { font-size: 0.9375rem; color: var(--muted); line-height: 1.75; }
@media (max-width: 640px) {
  .about-avatar { width: 136px; height: 136px; }
}

/* ── FUER SCHULEN (schulen.html) ── */
.schools-cta-inner {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}