/* ===========================================================
   Schule wird Staat — Vertriebsseite
   Leitmotiv: modern & bunt, Farben aus der echten Schulfassade
   (Grün / Lila / Mint), Cassadonien-Wappen als Logo-Badge.
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Public+Sans:wght@400;500;600;700&display=swap');

:root{
  --green:      #2E8B57;
  --green-deep: #1F6B41;
  --green-tint: #E7F5EC;
  --purple:     #7C5CD8;
  --purple-deep:#5F3FBD;
  --purple-tint:#EFEAFB;
  --mint:       #57C99A;
  --mint-deep:  #1E8E67;
  --mint-tint:  #E4FAF1;
  --ink:        #191A2B;
  --ink-soft:   #56596E;
  --paper:      #FFFFFF;
  --surface:    #F7F6FC;
  --line:       rgba(25,26,43,0.10);
  --shadow: 0 24px 60px -24px rgba(93,63,189,0.28);
  --shadow-sm: 0 10px 26px -14px rgba(25,26,43,0.22);
  --radius: 18px;
  --radius-sm: 12px;
  --wrap: 1280px;
  --topbar-h: 73px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:var(--topbar-h);}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Public Sans', system-ui, sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{
  font-family:'Bricolage Grotesque', 'Public Sans', sans-serif;
  font-weight:700;
  color:var(--ink);
  letter-spacing:-0.015em;
  margin:0;
}
a{color:inherit;}
img{max-width:100%;display:block;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 40px;}
::selection{background:var(--purple);color:#fff;}

/* --- top bar: fixed overlay so the video shows through from y=0, with a
   subtle permanent vignette (not fully invisible), solid once scrolled past
   the hero. Uses `fixed` rather than `sticky` — sticky only floats once its
   resting position has scrolled past, leaving a white gap at the very top
   otherwise, which was the earlier bug. --- */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:linear-gradient(180deg, rgba(8,11,20,0.38) 0%, rgba(8,11,20,0.14) 65%, rgba(8,11,20,0) 100%);
  backdrop-filter:blur(8px) saturate(1.3);
  -webkit-backdrop-filter:blur(8px) saturate(1.3);
  border-bottom:1px solid rgba(255,255,255,0.1);
  transition:background .25s ease, border-color .25s ease, backdrop-filter .25s ease;
}
.topbar.scrolled{
  background:rgba(255,255,255,0.86);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom-color:var(--line);
}
.topbar .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:14px; padding-bottom:14px;
}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none;}
.brand .word{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:21px;color:#fff;
  transition:color .25s ease; text-shadow:0 1px 8px rgba(0,0,0,0.35);
}
.topbar.scrolled .brand .word{color:var(--ink); text-shadow:none;}
.topbar nav{display:flex;align-items:center;gap:8px;}
.topbar nav a{
  color:rgba(255,255,255,0.92);text-decoration:none;font-size:14.5px;font-weight:600;
  padding:9px 15px;border-radius:999px;transition:background .18s ease, color .18s ease, border-color .18s ease;
  text-shadow:0 1px 8px rgba(0,0,0,0.35);
  border:1px solid rgba(255,255,255,0.22); background:rgba(255,255,255,0.07);
}
.topbar nav a:hover{background:rgba(255,255,255,0.18);}
.topbar.scrolled nav a{color:var(--ink-soft); text-shadow:none; border-color:var(--line); background:transparent;}
.topbar.scrolled nav a:hover{background:var(--purple-tint);color:var(--purple-deep); border-color:transparent;}
.topbar .nav-cta{
  background:#fff; color:var(--ink) !important; margin-left:2px; text-shadow:none; border-color:#fff;
}
.topbar .nav-cta:hover{background:var(--mint) !important;}
.topbar.scrolled .nav-cta{background:var(--ink); color:#fff !important; border-color:var(--ink);}
.topbar.scrolled .nav-cta:hover{background:var(--purple-deep) !important;}
.burger{
  display:none; width:40px;height:40px; border-radius:10px; border:1px solid var(--line);
  background:#fff; align-items:center; justify-content:center; cursor:pointer;
}
.burger span, .burger span::before, .burger span::after{
  content:""; display:block; width:18px; height:2px; background:var(--ink); position:relative;
  transition:transform .2s ease, opacity .2s ease;
}
.burger span::before{position:absolute; top:-6px;}
.burger span::after{position:absolute; top:6px;}
.mobile-nav{
  display:none; position:fixed; z-index:99;
  top:calc(var(--topbar-h) + 10px); left:16px; right:16px; max-height:75vh;
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(26px) saturate(1.6);
  -webkit-backdrop-filter:blur(26px) saturate(1.6);
  border:1px solid rgba(255,255,255,0.5);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:10px; overflow-y:auto;
}
.mobile-nav a{
  display:block; padding:14px 12px; font-size:17px; font-weight:600; color:var(--ink);
  text-decoration:none; border-radius:var(--radius-sm);
  transition:background .15s ease;
}
.mobile-nav a:hover, .mobile-nav a:active{background:rgba(124,92,216,0.14);}
.mobile-nav.open{display:block;}
.mobile-nav-scrim{
  display:none; position:fixed; inset:0; z-index:98;
  background:rgba(10,12,22,0.25);
}
.mobile-nav-scrim.open{display:block;}

/* --- hero: full-bleed video/photo cover, fits one screen on desktop.
   Height is the FULL viewport now (not minus topbar) because the topbar is
   `position:fixed` and overlays the hero from y=0 — the video must reach
   all the way up so it shows through the transparent bar immediately,
   instead of a flow gap showing the white body background. --- */
.hero{
  position:relative; overflow:hidden;
  height:100vh;
  min-height:560px;
  color:#fff;
}
.hero-bg{position:absolute; inset:0; z-index:0; background:var(--ink);}
.hero-video, .hero-poster-fallback{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
}
.hero-tint{
  position:absolute; inset:0;
  background:linear-gradient(135deg, var(--mint) 0%, transparent 50%, var(--purple) 100%);
  mix-blend-mode:color; opacity:0.55;
}
.hero-poster-fallback{display:none;}
@media (prefers-reduced-motion: reduce){
  .hero-video{display:none;}
  .hero-poster-fallback{display:block;}
}
.hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,12,22,0.55) 0%, rgba(10,12,22,0.32) 30%, rgba(10,12,22,0.68) 78%, rgba(10,12,22,0.88) 100%);
}
.hero-content{
  position:relative; z-index:2; height:100%;
  display:flex; flex-direction:column;
  padding-top:calc(var(--topbar-h) + 4px); padding-bottom:30px;
}
.hero-top-row{display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap;}
.kicker{
  font-size:13px; font-weight:700; letter-spacing:0.09em; text-transform:uppercase;
  color:var(--mint); margin:0;
}
.hero-badges{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.support-badge{
  background:#fff; border-radius:14px; padding:12px 24px 12px 14px;
  box-shadow:var(--shadow-sm); display:flex; align-items:center; gap:14px;
}
.support-badge img{height:56px;width:auto;flex-shrink:0;}
.support-badge .txt{font-size:12.5px; font-weight:600; color:var(--ink-soft); line-height:1.35;}
.support-badge--lg img{height:64px;}
.hero-bottom{margin-top:10px;}
.hero h1{
  font-size:clamp(30px, 3.6vw, 48px);
  line-height:1.08;
  margin-bottom:14px;
  max-width:22ch;
  color:#fff;
}
.hero h1 .hl{
  background:linear-gradient(100deg, #7BE0A8 0%, #C4AFFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero .lede{font-size:16.5px; line-height:1.55; color:rgba(255,255,255,0.82); max-width:60ch; margin-bottom:22px;}

/* --- keyword marquee: continuously scrolling, repeated, one word per row,
   varying size, muted grey — echoes the Sichtungsexemplar cover, but in motion --- */
.hero-marquee{
  flex:1 1 auto; min-height:0;
  display:grid; grid-template-rows:repeat(4, minmax(0,1fr)); row-gap:2px;
  margin-top:34px; overflow:hidden;
}
/* Garantiert der Laufschrift auf Desktop-Breiten einen Mindestanteil an
   Hoehe, damit sie nicht durch einen laengeren H1-Zeilenumbruch bei
   bestimmten Fensterbreiten unnoetig klein gequetscht wird. */
@media (min-width: 881px){
  .hero-marquee{min-height:150px;}
}
.kw-row{
  display:flex; overflow:hidden; width:100%; min-height:0;
  /* Macht die eigene Boxhoehe als "cqh" fuer die Schriftgroesse abfragbar,
     siehe .kw-track span unten — dadurch passt sich der Text IMMER an die
     tatsaechlich verfuegbare Zeilenhoehe an, egal wie eng das Fenster ist,
     statt zu ueberlappen oder (bei abgeschnittenen Zeilen) zu verschwinden. */
  container-type:size;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.kw-track{display:flex; flex-shrink:0; align-items:center; height:100%;}
.kw-track--left{animation:marquee-left linear infinite;}
.kw-track--right{animation:marquee-right linear infinite;}
.kw-track span{
  display:inline-block; flex-shrink:0;
  font-family:'Bricolage Grotesque',sans-serif; font-weight:800; text-transform:uppercase;
  letter-spacing:-0.01em; line-height:1; white-space:nowrap;
  color:rgba(255,255,255,0.3);
  padding:0 0.45em;
}
/* Zwei Grenzen zugleich: die bisherige, breiten-basierte clamp() fuers
   gewohnte Aussehen, gedeckelt durch einen Prozentsatz der eigenen
   Zeilenhoehe (cqh) als harte Obergrenze gegen Ueberlauf. */
.kw-row--xl .kw-track span{font-size:min(clamp(30px,5.2vw,66px), 72cqh);}
.kw-row--md .kw-track span{font-size:min(clamp(20px,3.4vw,44px), 58cqh);}
.kw-row--xxl .kw-track span{font-size:min(clamp(36px,6.6vw,86px), 82cqh);}
.kw-row--lg .kw-track span{font-size:min(clamp(24px,4vw,52px), 65cqh);}
/* Sehr langsam und gleichmäßig — soll beruhigend wirken, nicht wie ein Ticker. */
.kw-row--xl .kw-track{animation-duration:110s;}
.kw-row--md .kw-track{animation-duration:95s;}
.kw-row--xxl .kw-track{animation-duration:130s;}
.kw-row--lg .kw-track{animation-duration:100s;}
@keyframes marquee-left{ from{transform:translateX(0);} to{transform:translateX(-100%);} }
@keyframes marquee-right{ from{transform:translateX(-100%);} to{transform:translateX(0);} }
@media (prefers-reduced-motion: reduce){
  .kw-track--left, .kw-track--right{animation:none;}
}
.cta-row{display:flex;flex-wrap:wrap;gap:16px;align-items:center;}
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:'Public Sans',sans-serif; font-weight:700; font-size:15.5px;
  padding:15px 26px; text-decoration:none; border-radius:12px;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  border:1.5px solid transparent; cursor:pointer;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--ink);color:#fff;}
.btn-primary:hover{box-shadow:var(--shadow-sm); background:var(--purple-deep);}
.btn-ghost{border-color:var(--line); color:var(--ink); background:#fff;}
.btn-ghost:hover{border-color:var(--purple); color:var(--purple-deep); box-shadow:var(--shadow-sm);}
.hero .btn-ghost{border-color:rgba(255,255,255,0.55); color:#fff; background:transparent;}
.hero .btn-ghost:hover{border-color:#fff; color:#fff; background:rgba(255,255,255,0.12);}
.btn svg{width:16px;height:16px;flex-shrink:0;}

/* --- fact strip (Kurzübersicht) --- */
.facts{background:var(--ink); padding:0;}
.facts .wrap{display:grid; grid-template-columns:repeat(4,1fr);}
.fact{
  padding:34px 30px; text-align:center;
  border-right:1px solid rgba(255,255,255,0.1);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  min-height:128px;
}
.fact:last-child{border-right:none;}
.fact .label{
  font-size:11.5px; font-weight:700; letter-spacing:0.09em; text-transform:uppercase;
  color:var(--mint);
}
.fact .value{
  font-family:'Bricolage Grotesque',sans-serif; font-weight:600; font-size:18px; color:#fff; line-height:1.3;
}

/* --- section shell --- */
section{padding:104px 0;}
.section-head{max-width:640px; margin-bottom:52px;}
.section-head h2{font-size:clamp(28px,3.6vw,40px); margin-bottom:14px;}
.section-head p{color:var(--ink-soft); font-size:17px;}

/* --- kurzbeschreibung / editorial --- */
.editorial{background:var(--paper);}
.editorial .grid{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start;}
.editorial p{font-size:17.5px; color:var(--ink); margin:0 0 20px;}
.pull-card{
  background:#fff; border-radius:var(--radius); padding:26px 38px 40px;
  box-shadow:var(--shadow-sm); border:1px solid var(--line);
}
.pull-card .quote-mark{
  display:block; font-family:'Times New Roman', Times, serif; font-weight:700;
  font-size:52px; line-height:1; color:var(--mint-deep); margin:-14px 0 6px;
}
.pull-card p{
  font-family:'Bricolage Grotesque',sans-serif; font-weight:600; font-size:22px; color:var(--ink);
  line-height:1.45; margin:0;
}
.pull-card cite{
  display:block; font-style:normal; font-size:13px; font-weight:700; color:var(--ink-soft);
  margin-top:16px;
}

/* --- testimonials --- */
.testimonials{background:var(--surface);}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.testi{
  position:relative; overflow:hidden;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 26px 30px; box-shadow:var(--shadow-sm);
}
/* Klassisches Anführungszeichen, ueber dem Zitat stehend. Farben sind bewusst
   je nach Thema der Aussage gewaehlt: Ausbildung (gruen), Schulleitung/
   Vertrauen (lila), Demokratie-Mission (mint). Negativer margin-top zieht
   das Zeichen naeher an den Boxrand, da die Schriftart selbst oberhalb der
   sichtbaren Striche noch viel Leerraum mitbringt. */
.testi .quote-mark{
  display:block;
  font-family:'Times New Roman', Times, serif; font-weight:700;
  font-size:52px; line-height:1; margin:-14px 0 4px; user-select:none; pointer-events:none;
}
.testi:nth-child(1) .quote-mark{color:var(--green-deep);}
.testi:nth-child(2) .quote-mark{color:var(--purple-deep);}
.testi:nth-child(3) .quote-mark{color:var(--mint-deep);}
.testi blockquote{position:relative; z-index:1; margin:0 0 18px; font-size:16.5px; line-height:1.55; color:var(--ink);}
.testi cite{position:relative; z-index:1; font-style:normal; font-size:13px; font-weight:700; color:var(--ink-soft);}

/* --- table of contents (exakt) --- */
.toc{background:var(--paper);}
.toc-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 64px;align-items:start;}
.toc-list{border-top:1px solid var(--line);}
.toc-row{
  display:flex; align-items:baseline; gap:10px;
  padding:11px 0; border-bottom:1px solid var(--line);
}
.toc-row .t{font-size:15.5px;color:var(--ink);}
.toc-row .fill{flex:1; border-bottom:1.5px dotted var(--line); margin:0 2px 3px; min-width:12px;}
.toc-row .p{font-size:13.5px;color:var(--ink-soft); font-variant-numeric:tabular-nums;}
.toc-row.l1{padding-top:16px;}
.toc-row.l1 .t{font-weight:700; font-family:'Bricolage Grotesque',sans-serif; font-size:16.5px;}
.toc-row.l2{padding-left:20px;}
.toc-row.l2 .t{font-weight:600;}
.toc-row.l3{padding-left:40px;}
.toc-row.l3 .t{color:var(--ink-soft); font-size:14.5px;}
.toc-note{margin-top:24px; font-size:14px; color:var(--ink-soft);}

/* --- pricing --- */
.pricing{
  background:var(--surface); padding:32px 0;
  min-height:calc(100vh - var(--topbar-h));
  display:flex;
}
/* Statt den Inhalt als Block zu zentrieren (das liess bei viel Y-Platz einen
   toten Freiraum unten entstehen), wird der uebrige Platz per space-between
   auf Ueberschrift/Karten/Fussnote verteilt: Fussnote sitzt dadurch immer
   ganz unten, die Ueberschrift bekommt automatisch mehr Luft zu den Karten.
   Bei knapper Hoehe (siehe max-height:820px) gibt es ohnehin keinen
   Ueberschuss zu verteilen, dort greifen die kompakten Werte direkt. */
.pricing .wrap{width:100%; display:flex; flex-direction:column; justify-content:space-between;}
.pricing .section-head{margin-bottom:24px;}
.pricing .section-head h2{line-height:1.15;}
.price-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; align-items:stretch;}
.price-card{
  background:#fff; border:1.5px solid var(--line); border-radius:var(--radius);
  padding:28px 24px; display:flex; flex-direction:column;
  position:relative;
}
.price-card.free{background:var(--ink); border-color:var(--ink);}
.price-card.featured{
  border-color:var(--purple); box-shadow:var(--shadow);
}
.price-card .badge{
  position:absolute; top:-13px; left:26px; background:var(--purple); color:#fff;
  font-size:11px; letter-spacing:0.06em; text-transform:uppercase; padding:5px 13px; border-radius:999px; font-weight:700;
}
.price-card.free .badge{background:var(--mint); color:var(--green-deep);}
.price-card .name{font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:19px; margin-bottom:10px;}
.price-card.free .name{color:#fff;}
.price-block{margin-bottom:5px;}
.price-main{
  font-family:'Bricolage Grotesque',sans-serif; font-size:33px; font-weight:700; color:var(--ink);
  line-height:1.1; display:block;
}
.price-card.free .price-main{color:#fff;}
.price-credit{
  display:block; font-size:13px; font-weight:600; color:var(--ink-soft); margin-top:5px; line-height:1.35;
}
.price-card.free .price-credit{color:rgba(255,255,255,0.65);}
.price-card ul{list-style:none;margin:16px 0 20px;padding:0;flex-grow:1;}
.price-card li{
  padding:9px 0 9px 24px; position:relative; font-size:14px; line-height:1.4; border-top:1px solid var(--line);
  color:var(--ink-soft);
}
.price-card.free li{border-top-color:rgba(255,255,255,0.14); color:rgba(255,255,255,0.8);}
.price-card li::before{
  content:"✓"; position:absolute; left:0; top:7px; color:var(--green); font-weight:700; font-size:12px;
}
.price-card.free li::before{color:var(--mint);}
.price-card .btn{justify-content:center; width:100%; padding:11px 20px; font-size:14px;}
.price-card.free .btn-primary{background:#fff;color:var(--ink);}
.price-card.free .btn-primary:hover{background:var(--mint);color:var(--green-deep);}
.price-note{
  margin-top:16px; font-size:12.5px; color:var(--ink-soft); border-top:1px solid var(--line); padding-top:12px;
}

/* --- process --- */
.process{background:var(--paper);}
.process-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:36px;}
.process-step{background:var(--surface); border-radius:var(--radius); padding:32px;}
.process-step .n{
  width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-family:'Bricolage Grotesque',sans-serif; font-size:17px; color:#fff; font-weight:700; margin-bottom:18px;
}
.process-step:nth-child(1) .n{background:var(--green);}
.process-step:nth-child(2) .n{background:var(--purple);}
.process-step:nth-child(3) .n{background:var(--ink);}
.process-step h3{font-size:18.5px;margin-bottom:10px;}
.process-step p{font-size:15px; color:var(--ink-soft); margin:0;}

/* --- faq --- */
.faq{background:var(--surface);}
.faq-list{max-width:800px; display:flex; flex-direction:column; gap:12px;}
.faq-item{
  background:#fff; border:1.5px solid var(--line); border-radius:var(--radius-sm);
  padding:0 24px;
}
.faq-q{
  display:block; width:100%; text-align:left; background:none; border:none;
  font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:16.5px; color:var(--ink);
  padding:18px 30px 18px 0; cursor:pointer; position:relative;
}
.faq-q::after{
  content:"+"; position:absolute; right:0; top:18px;
  font-size:22px; font-weight:400; color:var(--purple); transition:transform .25s ease;
}
.faq-q[aria-expanded="true"]::after{transform:rotate(45deg);}
/* Grid-Trick fuers sanfte Auf-/Zuklappen: 0fr->1fr ist (anders als height)
   direkt animierbar, .faq-a-inner mit overflow:hidden schneidet den
   Inhalt waehrend der Animation sauber ab. */
.faq-a{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .3s ease;
}
.faq-a-inner{overflow:hidden;}
.faq-item.open .faq-a{grid-template-rows:1fr;}
.faq-item p{font-size:15px; line-height:1.6; color:var(--ink-soft); margin:0 0 20px;}

/* --- contact --- */
/* Die Box hatte vertikal null Abstand zu FAQ/Verlag und sass dadurch flach
   zwischen den Nachbarsektionen statt freizuschweben. Jetzt ragt sie bewusst
   leicht in beide Nachbarbereiche hinein (negativer Aussenabstand + Schatten
   + hoeherer z-index), wirkt dadurch wie eine ueber dem Seitenfluss
   liegende Karte statt wie ein einfacher Block im Raster. */
.contact{
  background:linear-gradient(120deg, var(--green-deep), var(--purple-deep));
  color:#fff; text-align:center; border-radius:32px; margin:0 40px; padding:80px 40px;
  max-width:calc(var(--wrap) - 80px);
  box-shadow:0 40px 80px -24px rgba(31,107,65,0.35), 0 24px 48px -20px rgba(95,63,189,0.3);
}
.contact-wrap{
  max-width:var(--wrap); margin:-64px auto -64px; padding:0 40px;
  position:relative; z-index:2;
}
.contact h2{color:#fff; font-size:clamp(28px,4vw,40px); margin-bottom:16px;}
.contact p{color:rgba(255,255,255,0.85); max-width:52ch; margin:0 auto 32px; font-size:16.5px;}
.contact .btn-primary{background:#fff;color:var(--ink);}
.contact .btn-primary:hover{background:var(--mint);color:var(--purple-deep);}

/* --- publisher: about DemokratieMedia, its own section + nav destination --- */
.publisher{background:var(--surface);}
.publisher-inner{max-width:760px;}
.publisher p{font-size:16.5px; line-height:1.7; color:var(--ink-soft); margin:0 0 18px;}
.publisher p strong{color:var(--ink);}
.publisher .placeholder-block{margin-top:22px; font-size:14px;}

/* --- footer --- */
footer{background:var(--paper); padding:44px 0 36px; border-top:1px solid var(--line);}
footer .wrap{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
footer .flinks{display:flex; gap:26px; font-size:13.5px;}
footer .flinks a{text-decoration:none; color:var(--ink-soft);}
footer .flinks a:hover{color:var(--purple-deep);}
footer .copy{font-size:12.5px; color:var(--ink-soft);}
.placeholder{color:var(--purple-deep); font-style:italic;}

/* --- simple legal page --- */
.legal{background:var(--paper); padding:calc(var(--topbar-h) + 40px) 0 100px;}
.legal .wrap{max-width:760px;}
.legal h1{font-size:36px;margin-bottom:8px;}
.legal .updated{font-size:13.5px;color:var(--ink-soft);margin-bottom:44px;}
.legal h2{font-size:20px;margin:40px 0 12px;}
.legal p, .legal li{font-size:16px;color:var(--ink);}
.legal ul{padding-left:20px;}
.legal .back{
  display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--purple-deep);font-weight:600;
  text-decoration:none;margin-bottom:36px;
}
mark.ph{background:var(--purple-tint);color:var(--purple-deep);font-style:italic;padding:1px 6px;border-radius:5px;}

/* --- responsive --- */
/* Kurze Desktop-Fenster (z.B. 1280x680 im Browser ohne Vollbild):
   Hero-Innenabstände und Typografie verdichten, damit der CTA-Button
   innerhalb der festen Hero-Höhe bleibt und nicht vom overflow:hidden
   abgeschnitten wird. */
@media (max-height: 760px) and (min-width: 881px){
  .hero-content{padding-top:14px; padding-bottom:16px;}
  .kicker{margin-top:2px; font-size:12px;}
  .support-badge img{height:40px;}
  .hero-bottom{margin-top:10px;}
  .hero-marquee{margin-top:6px;}
  .hero h1{font-size:clamp(22px,2.6vw,32px); margin-bottom:6px;}
  .hero .lede{display:none;}
  .cta-row{gap:10px;}
  .hero .btn{padding:11px 20px; font-size:14px;}
}
/* Lizenzen-Sektion soll nach einem Anker-Sprung ebenfalls ohne Scrollen
   sichtbar sein — bei niedrigeren Fenstern (z.B. 1366x768, ein sehr
   verbreitetes Laptop-Format) reicht die normale Verdichtung noch nicht,
   daher hier eine zweite, staerkere Stufe. */
@media (max-height: 820px) and (min-width: 881px){
  .pricing{padding:12px 0;}
  .pricing .section-head{margin-bottom:12px;}
  .pricing .section-head h2{font-size:clamp(20px,2.4vw,26px); margin-bottom:6px;}
  .pricing .section-head p{display:none;}
  .price-card{padding:16px 18px;}
  .price-card .name{font-size:16px; margin-bottom:5px;}
  .price-main{font-size:25px;}
  .price-credit{font-size:11.5px; margin-top:2px;}
  .price-card ul{margin:8px 0 10px;}
  .price-card li{padding:5px 0 5px 20px; font-size:12.5px; line-height:1.35;}
  .price-card li::before{top:5px;}
  .price-card .btn{padding:9px 18px; font-size:13.5px;}
  .price-note{margin-top:10px; padding-top:8px; font-size:10.5px; line-height:1.35;}
}
@media (max-width: 1080px){
  .facts .wrap{grid-template-columns:repeat(2,1fr);}
  .fact{border-bottom:1px solid rgba(255,255,255,0.1);}
  .fact:nth-child(2n){border-right:none;}
  .price-grid{grid-template-columns:repeat(2,1fr);}
}
/* Below 881px the "fits one screen" rule relaxes: mobile viewports vary too
   much in height to guarantee no-scroll without crushing text/readability. */
@media (max-width: 880px){
  .hero{height:auto; min-height:100vh; padding-bottom:40px;}
  .hero-content{height:auto;}
  /* Schulverein-Banner wandert unter die CTA-Buttons statt über die Titelzeile. */
  .hero-top-row{display:contents;}
  .kicker{order:1;}
  .hero-bottom{order:2; margin-top:22px;}
  .hero-badges{order:3; margin-top:20px;}
  /* Mobile darf scrollen (siehe Kommentar oben), deshalb braucht die
     Laufschrift hier keine Hoehen-Deckelung per Container-Query — die
     wuerde ohne eine vom Grid vorgegebene definierte Hoehe ohnehin auf 0
     kollabieren. Stattdessen: normale, inhaltsbasierte Zeilenhoehe. */
  .hero-marquee{
    order:4; margin-top:26px;
    display:flex; flex-direction:column; flex:none; row-gap:10px;
  }
  .kw-row{container-type:normal;}
  .kw-row--xl .kw-track span{font-size:clamp(18px,3vw,32px);}
  .kw-row--md .kw-track span{font-size:clamp(14px,2.2vw,24px);}
  .kw-row--xxl .kw-track span{font-size:clamp(22px,3.8vw,40px);}
  .kw-row--lg .kw-track span{font-size:clamp(16px,2.6vw,28px);}
  .editorial .grid{grid-template-columns:1fr;gap:32px;}
  .testi-grid{grid-template-columns:1fr;}
  .toc-cols{grid-template-columns:1fr;}
  .process-grid{grid-template-columns:1fr;gap:20px;}
  .topbar nav{display:none;}
  .burger{display:flex;}
  .contact{margin:0 20px; padding:56px 24px; border-radius:22px;}
  .contact-wrap{margin:-32px auto -32px;}
  section{padding:72px 0;}
}
@media (max-width: 640px){
  .wrap{padding:0 22px;}
  .price-grid{grid-template-columns:1fr;}
  .hero-badges{gap:8px;}
  .support-badge{padding:10px 16px 10px 10px; gap:10px;}
  .support-badge .txt{font-size:11px;}
  .support-badge img{height:40px;}
  .contact-wrap{padding:0 20px;}
  /* Der Button enthaelt die volle E-Mail-Adresse ohne Umbruchstellen (kein
     Leerzeichen) -- bei knappem Platz lief er dadurch rechts ueber den Rand
     hinaus statt umzubrechen, was wie "nicht mittig" aussah. */
  .contact .btn-primary{width:100%; justify-content:center; padding:15px 14px; font-size:13.5px;}
  /* mix-blend-mode ueber dem <video> zwingt viele Handy-GPUs in teures
     Software-Compositing pro Frame -> Ruckeln unabhaengig von Dateigroesse.
     Auf Mobile daher ganz weglassen, ist nur eine dekorative Zutat. */
  .hero-tint{display:none;}
  /* backdrop-filter (Glaseffekt) muss pro Frame den Videoinhalt dahinter
     neu abtasten -- auf schwaecheren Handy-GPUs ein weiterer haeufiger
     Ruckel-Verursacher. Auf Mobile daher aus, dafuer etwas dunklerer,
     deckenderer Verlauf, damit der Text trotzdem lesbar bleibt. */
  .topbar{
    background:linear-gradient(180deg, rgba(8,11,20,0.6) 0%, rgba(8,11,20,0.3) 65%, rgba(8,11,20,0) 100%);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
}