/* =========================================================================
   TeachercocKpit – gemeinsames Stylesheet (v2, modernisiert)
   Keine externen Fonts, keine CDNs, keine Tracker.
   ========================================================================= */
:root {
  --petrol: #2c6e63;
  --petrol-bright: #3a8f80;
  --petrol-dark: #1f4a42;
  --petrol-deep: #143530;
  --petrol-tint: #e9f1ef;
  --petrol-line: #cadfda;
  --bg: #f5f7f8;
  --card: #ffffff;
  --ink: #1e2b27;
  --ink-soft: #566661;
  --line: #e0e7e5;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(20, 53, 48, .05), 0 10px 30px rgba(20, 53, 48, .08);
  --shadow-lift: 0 2px 4px rgba(20, 53, 48, .06), 0 18px 44px rgba(20, 53, 48, .13);
  --grad-primary: linear-gradient(135deg, #358375, #245c53);
  --maxw: 1100px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Ankersprünge landen sonst unter dem sticky Header. */
[id] { scroll-margin-top: 76px; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--petrol); color: #fff; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

a { color: var(--petrol); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--petrol-dark); }
:focus-visible { outline: 3px solid var(--petrol); outline-offset: 2px; border-radius: 4px; }

/* --- Wortmarke ----------------------------------------------------------- */
.wordmark {
  font-weight: 700; letter-spacing: -0.01em; color: var(--ink);
  text-decoration: none; font-size: 1.18rem; white-space: nowrap;
}
.wordmark .tk { color: var(--petrol); font-weight: 800; }

/* --- Kopfzeile ----------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  border-bottom: 1px solid rgba(202, 223, 218, .6);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 62px; gap: 16px;
}
.site-nav { display: flex; gap: 6px; flex-wrap: wrap; }
.site-nav a {
  color: var(--ink-soft); text-decoration: none; font-size: .93rem; font-weight: 550;
  padding: 6px 13px; border-radius: 999px;
  transition: background .18s ease, color .18s ease;
}
.site-nav a:hover { color: var(--petrol-dark); background: var(--petrol-tint); }

/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-block; padding: 13px 26px; border-radius: 999px;
  font-weight: 620; font-size: 1rem; text-decoration: none;
  border: 1.5px solid transparent; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn-primary {
  background: var(--grad-primary); color: #fff;
  box-shadow: 0 2px 6px rgba(31, 74, 66, .28), 0 8px 22px rgba(31, 74, 66, .22);
}
.btn-primary:hover {
  color: #fff; transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(31, 74, 66, .3), 0 14px 32px rgba(31, 74, 66, .28);
}
.btn-primary.is-pending {
  background: linear-gradient(135deg, #6c7b76, #566661);
  cursor: default; pointer-events: none; box-shadow: none;
}
.btn-secondary {
  background: rgba(255, 255, 255, .7); color: var(--petrol-dark);
  border-color: var(--petrol-line);
}
.btn-secondary:hover { background: var(--petrol-tint); border-color: var(--petrol); transform: translateY(-2px); }

/* --- Hero ---------------------------------------------------------------- */
.hero { position: relative; padding: 88px 0 72px; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(640px 420px at 82% 8%, rgba(58, 143, 128, .16), transparent 65%),
    radial-gradient(520px 380px at 4% 96%, rgba(44, 110, 99, .1), transparent 65%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(44, 110, 99, .14) 1px, transparent 1.5px);
  background-size: 26px 26px;
  mask-image: radial-gradient(700px 480px at 78% 22%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(700px 480px at 78% 22%, #000 0%, transparent 72%);
}
.hero .wrap {
  position: relative;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .8rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase;
  color: var(--petrol-dark); background: rgba(255, 255, 255, .75);
  border: 1px solid var(--petrol-line);
  padding: 6px 14px; border-radius: 999px; margin-bottom: 22px;
  box-shadow: 0 1px 3px rgba(20, 53, 48, .06);
}
.eyebrow::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--petrol-bright); flex: none;
  box-shadow: 0 0 0 3px rgba(58, 143, 128, .2);
}
.hero h1 {
  font-size: clamp(2.2rem, 4.8vw, 3.4rem);
  line-height: 1.08; letter-spacing: -0.028em; margin: 0 0 20px; font-weight: 760;
}
.hero h1 .accent {
  color: var(--petrol);
  background: linear-gradient(180deg, transparent 78%, rgba(58, 143, 128, .28) 78%, rgba(58, 143, 128, .28) 94%, transparent 94%);
  padding: 0 .04em;
}
.hero p.lead { font-size: 1.16rem; color: var(--ink-soft); margin: 0 0 30px; max-width: 33em; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
/* Die Mac-Ankuendigung unter den Knoepfen. Bewusst kein dritter Knopf: Es gibt noch
   nichts zu klicken, und ein Knopf, der nichts tut, ist schlechter als ein Satz. */
.hero-note { margin: 14px 0 0; font-size: 15px; color: var(--ink-soft); }
.hero-note strong { color: var(--ink); }

/* Fensterrahmen für Screenshots / Platzhalter */
.window {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.hero .window { transform: rotate(.6deg); box-shadow: var(--shadow-lift); }
.hero .window:hover { transform: rotate(0deg) translateY(-3px); }
.window-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #fbfcfc, #f3f6f5);
}
.window-bar i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.window-bar i:nth-child(1) { background: #e8a9a0; }
.window-bar i:nth-child(2) { background: #ecd3a0; }
.window-bar i:nth-child(3) { background: #a9cfc4; }
.window img { display: block; width: 100%; height: auto; }
/* Eine Seite statt eines Fensters (Rückmelde-PDF): ohne Fensterleiste, schmal wie ein Blatt */
.window.papier { max-width: 560px; border-radius: 6px; }
.shot-placeholder {
  aspect-ratio: 16 / 10; display: grid; place-items: center;
  background:
    radial-gradient(420px 260px at 20% 15%, rgba(58, 143, 128, .14), transparent 70%),
    linear-gradient(150deg, var(--petrol-tint) 0%, #f7fbfa 65%);
  color: var(--petrol-dark); font-size: .92rem; font-weight: 550;
  text-align: center; padding: 12px;
}

/* --- Vertrauensband ------------------------------------------------------ */
.trust {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--card); padding: 18px 0; position: relative;
}
.trust ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px 12px; justify-content: center;
}
.trust li {
  font-size: .92rem; color: var(--petrol-dark); font-weight: 570;
  display: flex; align-items: center; gap: 8px;
  background: var(--petrol-tint); border: 1px solid var(--petrol-line);
  padding: 6px 16px; border-radius: 999px;
}
.trust li::before { content: "✓"; color: var(--petrol); font-weight: 800; }

/* --- Abschnitte ---------------------------------------------------------- */
section { padding: 84px 0; }
section.alt { background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head { max-width: 46em; margin-bottom: 44px; }
.section-eyebrow {
  display: block; font-size: .8rem; font-weight: 680; letter-spacing: .1em;
  text-transform: uppercase; color: var(--petrol-bright); margin-bottom: 10px;
}
.section-head h2 {
  font-size: clamp(1.6rem, 3vw, 2.15rem); letter-spacing: -0.022em; margin: 0 0 12px; font-weight: 730;
}
.section-head p { color: var(--ink-soft); margin: 0; font-size: 1.05rem; }

/* Funktions-Karten */
.grid { display: grid; gap: 22px; }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.card {
  position: relative; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px; overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card::before {
  content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px;
  background: var(--grad-primary); opacity: 0; transition: opacity .22s ease;
}
.card:hover {
  transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--petrol-line);
}
.card:hover::before { opacity: 1; }
section.alt .card { background: var(--bg); }
.card h3 { margin: 0 0 8px; font-size: 1.08rem; letter-spacing: -0.01em; }
.card p { margin: 0; color: var(--ink-soft); font-size: .95rem; }
.card .tag {
  display: inline-block; font-size: .73rem; font-weight: 680;
  color: var(--petrol); letter-spacing: .07em; text-transform: uppercase;
  background: var(--petrol-tint); border-radius: 999px; padding: 3px 11px;
  margin-bottom: 12px;
}

/* Screenshot-Raster */
.shots { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.shots figure { margin: 0; }
.shots .window:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.shots figcaption { font-size: .9rem; color: var(--ink-soft); margin-top: 12px; padding-left: 4px; }
.shots figcaption strong { color: var(--ink); font-weight: 640; }
/* --- Vergrößern per Klick (Lightbox, ohne Fremdbibliothek) -----------------
   Nötig, weil die Seite auf 1100 px Inhaltsbreite begrenzt ist: Auch auf einem
   großen Monitor wird ein Screenshot dort nicht größer, sondern nur der Rand
   breiter. Gemessen landet die 13-px-Schrift der App in der zweispaltigen
   Galerie bei ~5 px. Im Overlay wird das Bild bis zur vollen Fensterhöhe
   gezeigt — damit ist jedes Detail lesbar. */
.zoomable { display: block; position: relative; cursor: zoom-in; }
.zoomable::after {
  content: "⤢"; position: absolute; right: 10px; bottom: 10px;
  width: 32px; height: 32px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .94); color: var(--petrol-dark);
  border: 1px solid var(--petrol-line); border-radius: 8px;
  font-size: 1.05rem; opacity: 0; transition: opacity .18s ease;
  box-shadow: 0 2px 8px rgba(20, 53, 48, .12);
}
.window:hover .zoomable::after,
.zoomable:focus-visible::after { opacity: 1; }

.lightbox {
  position: fixed; inset: 0; z-index: 100; display: none;
  background: rgba(15, 34, 31, .93);
  padding: 24px; place-items: center;
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.lightbox[open], .lightbox.is-open { display: grid; }
.lightbox img {
  max-width: 100%; max-height: calc(100vh - 128px);
  width: auto; height: auto; display: block;
  border-radius: 10px; box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
  background: #fff;
}
.lightbox figcaption {
  color: #dfece8; font-size: .95rem; text-align: center;
  margin-top: 16px; max-width: 70ch;
}
.lightbox-close {
  position: absolute; top: 18px; right: 22px;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 255, 255, .12); color: #fff;
  border: 1px solid rgba(255, 255, 255, .3);
  font-size: 1.4rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  transition: background .18s ease;
}
.lightbox-close:hover { background: rgba(255, 255, 255, .24); }
.lightbox-hint {
  position: absolute; bottom: 20px; left: 0; right: 0;
  text-align: center; color: rgba(255, 255, 255, .55); font-size: .84rem;
}
body.lightbox-offen { overflow: hidden; }

/* --- Schultag: Text schmal, Bild über die volle Breite ---------------------
   Bewusst NICHT nebeneinander: Gemessen wäre ein Screenshot dann nur ~530 px breit,
   die 13-px-Schrift der App also auf 4,8 px geschrumpft — unlesbar. Über die volle
   Spaltenbreite (1052 px) landen die 1280-px-Bilder bei Faktor ~0,82; die App-Schrift
   bleibt bei rund 11 px und damit erkennbar. */
.steps { display: flex; flex-direction: column; gap: 72px; }
.step { display: block; }
.step .step-text { max-width: 46em; margin-bottom: 26px; }
.step .window:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.step-num {
  display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--petrol);
  background: var(--petrol-tint); border: 1px solid var(--petrol-line);
  padding: 4px 13px; border-radius: 999px; margin-bottom: 14px;
}
.step-text h3 { font-size: 1.42rem; letter-spacing: -0.02em; margin: 0 0 12px; font-weight: 720; }
.step-text p { color: var(--ink-soft); margin: 0 0 12px; }
.step-text .step-note {
  font-size: .93rem; border-left: 3px solid var(--petrol-line);
  padding-left: 14px; margin-bottom: 0; color: var(--ink-soft);
}

/* Karten ohne Hover-Effekt (Abgrenzungs-Abschnitt) */
.card.plain:hover { transform: none; box-shadow: none; border-color: var(--line); }
.card.plain:hover::before { opacity: 0; }
.card-note { font-size: .88rem; color: var(--ink-soft); margin-top: 14px; }
.plain-list { margin: 0; padding-left: 20px; color: var(--ink-soft); font-size: .95rem; }
.plain-list li { margin-bottom: 7px; }
.plain-list strong { color: var(--ink); font-weight: 640; }
.contact-note { font-size: .92rem; color: var(--ink-soft); margin-top: 18px !important; }

/* --- Signatur: "Deine Daten bleiben hier" -------------------------------- */
.local-diagram {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 30px; align-items: center;
}
.device {
  position: relative; background: var(--card);
  border: 2px solid var(--petrol); border-radius: 20px; padding: 26px;
  box-shadow: 0 0 0 6px rgba(58, 143, 128, .1), var(--shadow-lift);
}
.device h4 {
  margin: 0 0 16px; font-size: .98rem; color: var(--petrol-dark);
  display: flex; align-items: center; gap: 9px;
}
.device h4::before { content: "💻"; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-size: .84rem; font-weight: 550; color: var(--petrol-dark);
  background: var(--petrol-tint); border: 1px solid var(--petrol-line);
  border-radius: 999px; padding: 5px 13px;
}
.no-flow {
  text-align: center; color: var(--ink-soft); font-size: .9rem; font-weight: 640;
}
.no-flow .barrier {
  display: block; font-size: 1.7rem; color: var(--petrol); margin-bottom: 6px;
}
.cloud-crossed {
  border: 2px dashed var(--petrol-line); border-radius: 20px; padding: 26px;
  color: var(--ink-soft); background: rgba(255, 255, 255, .5);
}
.cloud-crossed h4 { margin: 0 0 10px; font-size: .98rem; }
.cloud-crossed ul { margin: 0; padding-left: 20px; font-size: .9rem; }
.cloud-crossed li { margin-bottom: 3px; }

/* Fächer-Chips */
.subject-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.subject-chips .chip {
  font-size: .93rem; padding: 7px 17px;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.subject-chips .chip:hover {
  background: #dcebe7; border-color: var(--petrol); transform: translateY(-1px);
}

/* Preis */
.price-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; max-width: 840px; }
.price-card {
  position: relative; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 34px 30px;
  transition: transform .22s ease, box-shadow .22s ease;
}
.price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.price-card.featured {
  border: 2px solid var(--petrol);
  background:
    radial-gradient(360px 220px at 100% 0%, rgba(58, 143, 128, .1), transparent 70%),
    var(--card);
  box-shadow: var(--shadow-lift);
}
.price-card.featured .ribbon {
  position: absolute; top: -13px; right: 24px;
  font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: var(--grad-primary);
  padding: 4px 14px; border-radius: 999px;
  box-shadow: 0 3px 10px rgba(31, 74, 66, .3);
}
.price-card h3 { margin: 0 0 6px; font-size: 1.15rem; }
.price-card .amount {
  font-size: 1.55rem; font-weight: 750; letter-spacing: -0.02em;
  color: var(--petrol-dark); margin: 6px 0 18px;
}
/* Einführungspreis groß, regulärer Preis daneben durchgestrichen (aus config.js) */
.price-now { color: var(--petrol-dark); }
.price-was {
  margin-left: 12px; font-size: .92rem; font-weight: 550;
  color: var(--ink-soft); text-decoration: line-through; text-decoration-thickness: 1.5px;
  letter-spacing: 0;
}
/* `hidden` gilt immer, auch wo eine Klasse `display` setzt (etwa .intro-badge): web-preis.js versteckt die Einführungshinweise
   statisch, damit sie ohne JavaScript nicht stehen bleiben. */
[hidden] { display: none !important; }
.intro-badge {
  display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #fff; background: var(--grad-primary);
  padding: 3px 12px; border-radius: 999px; margin-bottom: 10px;
}
.price-card ul { margin: 0 0 24px; padding-left: 20px; color: var(--ink-soft); font-size: .95rem; }
.price-card li { margin-bottom: 5px; }
/* Zwei Store-Knoepfe (Microsoft, Mac App Store) nebeneinander; brechen bei Platzmangel um. */
.store-row { display: flex; gap: 10px; flex-wrap: wrap; }
.store-row .btn { flex: 1 1 auto; text-align: center; padding-left: 18px; padding-right: 18px; }
.note { font-size: .92rem; color: var(--ink-soft); margin-top: 24px; max-width: 46em; }

/* FAQ */
.faq details {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 0 24px; margin-bottom: 12px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.faq details:hover { border-color: var(--petrol-line); }
.faq details[open] { border-color: var(--petrol); box-shadow: var(--shadow); }
.faq summary {
  cursor: pointer; font-weight: 620; padding: 18px 0; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; color: var(--petrol); font-size: 1.35rem; font-weight: 400;
  transition: transform .2s ease;
}
.faq details[open] summary::after { content: "+"; transform: rotate(45deg); }
.faq details p { margin: 0 0 20px; color: var(--ink-soft); }

/* Kontakt */
.contact-box {
  position: relative; overflow: hidden;
  background:
    radial-gradient(480px 280px at 88% -10%, rgba(58, 143, 128, .18), transparent 70%),
    linear-gradient(150deg, var(--petrol-tint), #f2f8f6);
  border: 1px solid var(--petrol-line);
  border-radius: 20px; padding: 44px 32px; text-align: center;
  box-shadow: var(--shadow);
}
.contact-box p { margin: 0 0 8px; }

/* --- Fußzeile ------------------------------------------------------------ */
.site-footer {
  background: linear-gradient(160deg, var(--petrol-dark), var(--petrol-deep));
  color: #cfe2dd; padding: 40px 0;
}
.site-footer .wrap {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 16px;
}
.site-footer a { color: #fff; }
.site-footer nav { display: flex; gap: 22px; flex-wrap: wrap; }
.site-footer .wordmark { color: #fff; }
.site-footer .wordmark .tk { color: #8fd0c2; }
.site-footer small { font-size: .85rem; opacity: .75; }

/* --- Kein Einblend-Effekt mehr — mit Absicht -----------------------------
   Hier standen nacheinander zwei Anläufe, die Inhalte beim Scrollen einzublenden:
   erst ein IntersectionObserver, dann eine reine CSS-Animation. BEIDE hatten dieselbe
   Schwachstelle — den Ausgangszustand `opacity: 0`. Bleibt der Auslöser aus (Observer
   schweigt, Animation startet nicht, weil der Tab nicht rendert), bleibt der Inhalt
   unsichtbar. Auf der veröffentlichten Seite ist genau das passiert: Die Screenshots
   fehlten, und weil unsichtbare Container keine `loading="lazy"`-Bilder anfordern, lud
   der Browser sie nicht einmal herunter.

   Eine Verzierung, die den Inhalt verschlucken kann, ist auf einer Seite, deren einziger
   Zweck das Zeigen dieses Inhalts ist, keinen Effekt wert. Deshalb: ersatzlos gestrichen.
   Wer später wieder animieren will — nur über Eigenschaften, die den Inhalt sichtbar
   lassen (z. B. `transform`), niemals über `opacity` als Startzustand. */

/* --- Aufklappbare Funktionskarten -----------------------------------------
   Natives <details>: Tastatur, Suchmaschinen und die Suche im Browser (Strg+F klappt in
   Chrome von selbst auf) funktionieren ohne Skript. Aufgeklappt bleibt der Inhalt in der
   Kartenbreite: Die Nachbarkarten behalten ihre Höhe (align-items: start) und rücken nicht —
   ruhiger als eine volle Breite, die die Reihe umordnen müsste.
   ⚠ Im aufklappbaren Inhalt gibt es KEINE Einblend-Klasse mit opacity:0 (siehe unten „Kein
   Einblend-Effekt“): Unsichtbare Container fordern ihre loading="lazy"-Bilder nie an. */
.grid.karten { align-items: start; }
.card:has(details[open]):hover { transform: none; }
details.mehr { margin-top: 16px; }
details.mehr > summary {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  font-size: .9rem; font-weight: 640; color: var(--petrol-dark);
  padding: 6px 14px; border-radius: 999px; border: 1px solid var(--petrol-line);
  background: var(--petrol-tint); transition: background .18s ease, border-color .18s ease;
}
details.mehr > summary::-webkit-details-marker { display: none; }
details.mehr > summary::after { content: "+"; font-size: 1.15rem; line-height: 1; font-weight: 500; transition: transform .2s ease; }
details.mehr[open] > summary::after { transform: rotate(45deg); }
details.mehr > summary:hover { background: #dcebe7; border-color: var(--petrol); }
.mehr-inhalt { margin-top: 18px; }
.mehr-inhalt figure { margin: 0 0 18px; }
.mehr-inhalt figcaption { font-size: .86rem; color: var(--ink-soft); margin-top: 8px; line-height: 1.55; }
.mehr-inhalt figcaption strong { color: var(--ink); font-weight: 640; }
.mehr-inhalt .window { border-radius: var(--radius-sm); }
.mehr-inhalt .window-bar { padding: 7px 10px; }
.mehr-inhalt .window-bar i { width: 8px; height: 8px; }
.mehr-inhalt h4 {
  margin: 22px 0 10px; font-size: .78rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--petrol-bright);
}
.mehr-inhalt .plain-list { font-size: .9rem; }
/* Volle Breite unter der Kartenreihe (seite.js setzt .voll, sobald das Raster mehr als eine
   Spalte hat). Der Inhalt liegt dann über der ganzen Rasterbreite unter der Reihe; die Karte
   selbst behält ihre Stelle, die Nachbarn rücken nicht. Ohne Skript bleibt alles in der Karte.
   Die geöffnete Karte ist dafür nicht positioniert (Bezug ist das Raster) — ihr Akzentstreifen
   (::before) würde sonst an den Rasterrand springen und entfällt. */
.karten { position: relative; }
.karten.voll .card:has(details[open]) { position: static; border-color: var(--petrol); }
.karten.voll .card:has(details[open])::before { display: none; }
.karten.voll details[open] > .mehr-inhalt {
  position: absolute; left: 0; right: 0; margin-top: 0; z-index: 1;
  background: var(--card); border: 1px solid var(--petrol-line); border-radius: var(--radius);
  padding: 28px 30px; box-shadow: var(--shadow-lift);
}
.karten.voll .mehr-bilder { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.karten.voll .mehr-bilder figure { margin: 0; }
.karten.voll .mehr-inhalt .plain-list { columns: 2; column-gap: 40px; }
.karten.voll .mehr-inhalt .plain-list li { break-inside: avoid; }
/* Der Datenschutz-Abschnitt klappt die Punkte zu Daten und Technik in voller Breite auf. */
details.mehr.breit .mehr-inhalt { max-width: 46em; }
.bald {
  margin: 26px 0 0; padding: 14px 20px; border: 1px dashed var(--petrol-line);
  border-radius: var(--radius-sm); color: var(--ink-soft); font-size: .93rem; background: rgba(255, 255, 255, .5);
}
.bald strong { color: var(--petrol-dark); }

/* --- Zwei Module: Sport und Ausbildung ------------------------------------ */
.module-karten { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.modul-karte {
  display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.modul-karte:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--petrol-line); color: inherit; }
.modul-karte img { display: block; width: 100%; height: auto; border-bottom: 1px solid var(--line); }
.modul-karte .modul-text { padding: 22px 26px 26px; }
.modul-karte h3 { margin: 6px 0 8px; font-size: 1.15rem; letter-spacing: -0.01em; }
.modul-karte p { margin: 0 0 14px; color: var(--ink-soft); font-size: .95rem; }
.modul-karte .weiter { font-weight: 640; color: var(--petrol); }
.modul-karte .tag {
  display: inline-block; font-size: .73rem; font-weight: 680; color: var(--petrol);
  letter-spacing: .07em; text-transform: uppercase; background: var(--petrol-tint);
  border-radius: 999px; padding: 3px 11px;
}
section.alt .modul-karte { background: var(--bg); }

/* --- Unterseiten (sport/, ausbildung/) ------------------------------------ */
.site-nav a[aria-current="page"] { color: var(--petrol-dark); background: var(--petrol-tint); }
.kaesten { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 8px; }
.kasten {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 26px;
}
section.alt .kasten { background: var(--bg); }
.kasten h3 { margin: 0 0 10px; font-size: 1.05rem; }
.kasten .plain-list li { margin-bottom: 8px; }
.zitat {
  margin: 0 0 8px; padding: 18px 24px; border-left: 4px solid var(--petrol);
  background: var(--petrol-tint); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 1.02rem; color: var(--ink); max-width: 46em;
}
.zitat p { margin: 0; }
.zitat cite { display: block; margin-top: 8px; font-style: normal; font-size: .86rem; color: var(--ink-soft); }
.schluss { text-align: center; }
.schluss p { color: var(--ink-soft); max-width: 40em; margin: 0 auto 22px; }
.schluss .store-row { justify-content: center; max-width: 560px; margin: 0 auto; }
.schluss .zurueck { display: inline-block; margin-top: 22px; font-weight: 620; }

/* --- Rechtsseiten -------------------------------------------------------- */
.legal { padding: 56px 0 80px; }
.legal .wrap { max-width: 780px; }
.legal h1 { font-size: clamp(1.7rem, 3vw, 2.2rem); letter-spacing: -0.02em; }
.legal h2 { font-size: 1.25rem; margin-top: 2.2em; }
.legal h3 { font-size: 1.05rem; margin-top: 1.6em; }
.legal .placeholder-warning {
  background: #fdf3e7; border: 1px solid #ecd4b3; color: #7a5a2e;
  border-radius: var(--radius-sm); padding: 16px 20px; font-size: .95rem; margin-bottom: 32px;
}

/* --- Bewegungsreduktion & Responsiv -------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}
@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 40px; }
  .hero .window { transform: none; }
  .grid.cols-3 { grid-template-columns: 1fr 1fr; }
  .local-diagram { grid-template-columns: 1fr; }
  .no-flow { padding: 4px 0; }
  .steps { gap: 52px; }
}
@media (max-width: 900px) {
  /* Acht Einträge passen nicht mehr neben die Wortmarke: die Leiste bleibt EINE Zeile und
     lässt sich waagerecht wischen (nur die Leiste, nie die Seite). Kein Menü-Knopf, kein Skript. */
  .site-header .wrap { gap: 12px; }
  .site-nav {
    flex-wrap: nowrap; overflow-x: auto; min-width: 0; flex: 1 1 auto; gap: 2px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(90deg, #000 88%, transparent);
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { white-space: nowrap; padding: 6px 10px; }
  .module-karten, .kaesten { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .grid.cols-3, .grid.cols-2, .shots, .price-cards { grid-template-columns: 1fr; }
  /* Nav bleibt sichtbar (vorher display:none — auf dem Smartphone fehlte jede
     Navigation), jetzt als wischbare Zeile neben der Wortmarke (s. 900 px). */
  .site-header .wrap { min-height: 54px; }
  .site-nav a { padding: 5px 9px; font-size: .84rem; }
  .wordmark { font-size: 1.05rem; }
  .modul-karte .modul-text, .kasten { padding: 20px; }
  section { padding: 56px 0; }
  .hero { padding: 64px 0 52px; }
  .step-text h3 { font-size: 1.24rem; }
}