/* ACHTUNG bei Aenderungen an dieser Datei:
   Das Stylesheet wird ein Jahr lang zwischengespeichert (max-age=31536000).
   Wiederkehrende Besucher sehen Aenderungen nur, wenn sich der Parameter
   ?v=... in allen HTML-Dateien aendert. Er entspricht der Pruefsumme dieser
   Datei und muss nach jeder Aenderung neu gesetzt werden. */
/* ============================================================
   THE INNOVATION SPEAKER — Mario A. Brückner
   Stylesheet nach CALADE Markenhandbuch
   Vier Markenfarben, keine Rundungen, kein Schwarz.
   ============================================================ */

/* ---------- 1. Marken-Tokens ---------- */
:root{
  /* Die vier Markenfarben — mehr gibt es nicht. */
  --lila-hell:#B297C7;
  --lila-dunkel:#9E6BAB;
  --blau-hell:#5B57A2;
  --blau-dunkel:#363B68;

  /* Zulässige Neutralwerte: Papier und gebrochenes Weiß. Kein #000. */
  --papier:#FFFFFF;
  --papier-warm:#F4F2F6;

  --masse:1200px;
  --gasse:clamp(1.25rem,5vw,4rem);
  --luft-sektion:clamp(4.5rem,9vw,8rem);

  --fs-display:clamp(2.6rem,7vw,5.4rem);
  --fs-h2:clamp(1.9rem,4vw,3.1rem);
  --fs-h3:clamp(1.15rem,1.9vw,1.45rem);
  --fs-body:clamp(1rem,1.15vw,1.1rem);
  --fs-klein:0.82rem;
}

/* ---------- 2. Schrift ----------
   N27 ist die Hausschrift. local() greift auf Geräten, auf denen sie
   installiert ist (CALADE-Rechner). Für die Auslieferung vom Server
   müssen die lizenzierten .woff2 in assets/fonts/ liegen —
   Webfont-Lizenz bei Atipo Foundry erforderlich.
   Fallback ist eine geometrische Grotesk, damit nichts bricht. */
@font-face{
  font-family:'N27';
  src:local('N27 Bold'),local('N27-Bold'),
      url('fonts/N27-Bold.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'N27';
  src:local('N27 Regular'),local('N27-Regular'),
      url('fonts/N27-Regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;
  /* Die Kopfzeile ist fixiert. Ohne diesen Abstand landet jede
     Sprungmarke dahinter — auf schmalen Geräten sichtbar. */
  scroll-padding-top:6.5rem}
@media (min-width:1120px){html{scroll-padding-top:7.5rem}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

body{
  margin:0;
  background:var(--papier);
  color:var(--blau-dunkel);
  font-family:'N27','Helvetica Neue',Arial,sans-serif;
  font-size:var(--fs-body);
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block;height:auto}

/* Markenvorgabe: Bildsprache schwarzweiß */
.bild img,img.bild{filter:grayscale(1);width:100%;object-fit:cover}

a{color:inherit}

/* Keine Rundungen. 90-Grad-Winkel, überall. */
button,input,textarea,select,img,.karte,.knopf{border-radius:0}

/* ---------- 3. Typografische Rollen ---------- */
h1,h2,h3,h4{
  font-family:'N27','Helvetica Neue',Arial,sans-serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:-.015em;
  line-height:1.02;
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{font-size:var(--fs-display)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);line-height:1.18}

/* Unterzeilen: kleingeschrieben, fett — Gegenpol zur Versal-Headline */
.unterzeile{
  font-weight:700;
  text-transform:lowercase;
  letter-spacing:.005em;
  font-size:clamp(1.05rem,1.7vw,1.3rem);
  line-height:1.4;
  margin:0 0 1.4rem;
  opacity:1;
}

/* Kennung über der Headline */
.kennung{
  display:inline-block;
  font-size:var(--fs-klein);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.22em;
  margin:0 0 1.5rem;
  padding-bottom:.5rem;
  border-bottom:2px solid currentColor;
}

p{margin:0 0 1.1rem;max-width:66ch}
ul{margin:0 0 1.1rem;padding-left:1.1rem}
li{margin-bottom:.4rem}

/* ---------- 4. Layout ---------- */
.huelle{max-width:var(--masse);margin-inline:auto;padding-inline:var(--gasse);position:relative;z-index:1}
.sektion{padding-block:var(--luft-sektion);position:relative;overflow:hidden}

.raster{display:grid;gap:1px}
@media (min-width:720px){.raster-2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.raster-3{grid-template-columns:repeat(3,1fr)}}

/* ---------- 5. Farbflächen ----------
   Regel: pro Bildschirmabschnitt maximal zwei Markenfarben. */
.f-blau-dunkel{background:var(--blau-dunkel);color:var(--papier)}
.f-blau-hell{background:var(--blau-hell);color:var(--papier)}
.f-lila-dunkel{background:var(--lila-dunkel);color:var(--papier)}
.f-lila-hell{background:var(--lila-hell);color:var(--blau-dunkel)}
.f-papier{background:var(--papier);color:var(--blau-dunkel)}
.f-papier-warm{background:var(--papier-warm);color:var(--blau-dunkel)}

/* ---------- 6. Markenmuster ----------
   Geometrisch, berührt drei Kanten des Abschnitts. */
.muster{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.muster span{position:absolute;display:block;background:currentColor;opacity:.14}
.muster .m1{top:0;right:0;width:22%;height:38%}
.muster .m2{top:38%;right:0;width:11%;height:24%;opacity:.2}
.muster .m3{bottom:0;right:11%;width:11%;height:26%;opacity:.1}
.muster .m4{bottom:0;left:0;width:14%;height:9%;opacity:.18}
@media (max-width:719px){.muster .m1{width:34%}.muster .m2,.muster .m3{display:none}}


/* ---------- 7. Kopfzeile ---------- */
.kopf{
  position:sticky;top:0;z-index:60;
  background:var(--blau-dunkel);color:var(--papier);
  border-bottom:1px solid rgba(255,255,255,.16);
}
.kopf-inhalt{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(.8rem,1.6vw,1.5rem);padding-block:.9rem;
}
.wortmarke{
  font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  font-size:.92rem;text-decoration:none;line-height:1.15;
}
.wortmarke small{
  display:block;font-size:.68rem;letter-spacing:.18em;
  opacity:.85;font-weight:400;text-transform:uppercase;
}
.navi{display:none;gap:1.6rem;font-size:.82rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em}
.navi a{text-decoration:none;padding-block:.3rem;border-bottom:2px solid transparent}
.navi a:hover,.navi a:focus-visible{border-bottom-color:var(--lila-hell)}
/* Erst ab 1120 px ist neben Wortmarke, Sprachwahl und Knopf genug
   Platz für die vollständige Navigation. */
@media (min-width:1120px){.navi{display:flex}}
@media (min-width:1120px) and (max-width:1260px){.navi{gap:1.1rem;font-size:.78rem}}

/* ---------- 8. Knöpfe ---------- */
.knopf{
  display:inline-block;
  font-family:inherit;font-size:.85rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;
  padding:1.05rem 2.1rem;
  text-decoration:none;border:2px solid currentColor;
  background:transparent;color:inherit;cursor:pointer;
  transition:background-color .18s ease,color .18s ease;
}
.knopf-voll{background:var(--papier);color:var(--blau-dunkel);border-color:var(--papier)}
.knopf-voll:hover,.knopf-voll:focus-visible{background:var(--lila-hell);border-color:var(--lila-hell);color:var(--blau-dunkel)}
.knopf-linie:hover,.knopf-linie:focus-visible{background:currentColor}
.knopf-linie:hover span,.knopf-linie:focus-visible span{color:var(--blau-dunkel)}
.knopf-reihe{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem}

:focus-visible{outline:3px solid var(--lila-hell);outline-offset:3px}

/* ---------- 9. Bühne ---------- */
.buehne{padding-block:clamp(3.5rem,8vw,6.5rem) clamp(2.4rem,4vw,3.2rem)}
.buehne-raster{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:center}
@media (min-width:900px){.buehne-raster{grid-template-columns:1.5fr .8fr}}
/* Die Ueberschrift nennt jetzt die Angebotskategorie und ist deutlich laenger
   als die frueher. Sie braucht mehr Breite (19ch statt 15ch, sonst bricht
   "Transformation" mitten im Wort) und weniger Groesse, damit Hook, Knoepfe
   und Kennzahlen im ersten Bildschirm bleiben. */
.buehne h1{
  max-width:24ch;
  font-size:clamp(1.9rem,4vw,3rem);
  line-height:1.08;
}
.buehne h1 .punkt{color:var(--lila-hell)}
.buehne-fakten{
  display:grid;grid-template-columns:1fr;gap:0;margin-top:2.2rem;
  border-top:1px solid rgba(255,255,255,.28);
}
@media (min-width:560px){.buehne-fakten{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.buehne-fakten{grid-template-columns:repeat(4,1fr)}}
.buehne-fakten div{
  padding:1.4rem 1.4rem;
  border-right:1px solid rgba(255,255,255,.28);
}
.buehne-fakten div:first-child{padding-left:0}
.buehne-fakten div:last-child{border-right:0;padding-right:0}
.buehne-fakten b{display:block;font-size:1.35rem;line-height:1.1;margin-bottom:.35rem}
.buehne-fakten span{font-size:var(--fs-klein);text-transform:uppercase;letter-spacing:.14em;opacity:.88}

/* ---------- 10. Zitatband ---------- */
.zitat{padding-block:clamp(3rem,6vw,4.5rem)}
.zitat blockquote{
  margin:0;font-size:clamp(1.4rem,3.2vw,2.3rem);
  font-weight:700;line-height:1.25;text-transform:uppercase;
  letter-spacing:-.01em;max-width:24ch;
}
.zitat cite{
  display:block;margin-top:1.5rem;font-style:normal;
  font-size:var(--fs-klein);text-transform:uppercase;letter-spacing:.18em;
}

/* ---------- 11. Karten ---------- */
.karte{
  background:rgba(255,255,255,.09);
  padding:clamp(1.6rem,2.5vw,2.2rem);
  border:1px solid rgba(255,255,255,.2);
  display:flex;flex-direction:column;
}
.f-lila-hell .karte,.f-papier .karte,.f-papier-warm .karte{
  background:rgba(54,59,104,.06);border-color:rgba(54,59,104,.22);
}
.karte h3{margin-bottom:.7rem}
.karte p{margin-bottom:0;font-size:.96rem}
.karte .nummer{
  font-size:var(--fs-klein);font-weight:700;letter-spacing:.18em;
  opacity:.82;margin-bottom:.9rem;display:block;
}

/* ---------- 13. Galerie ---------- */
.galerie{display:grid;gap:1px}
@media (min-width:760px){.galerie{grid-template-columns:repeat(3,1fr)}}
.galerie figure{margin:0;position:relative}
.galerie img{aspect-ratio:4/5;filter:grayscale(1)}
.galerie figcaption{
  position:absolute;left:0;bottom:0;
  background:var(--blau-dunkel);color:var(--papier);
  font-size:var(--fs-klein);text-transform:uppercase;letter-spacing:.12em;
  padding:.6rem 1rem;font-weight:700;
}

/* ---------- 14. Ablauf ---------- */
.ablauf{counter-reset:schritt;display:grid;gap:1px}
@media (min-width:860px){.ablauf{grid-template-columns:repeat(4,1fr)}}
.schritt{padding:clamp(1.6rem,2.4vw,2.1rem);border:1px solid rgba(255,255,255,.22)}
.schritt::before{
  counter-increment:schritt;content:counter(schritt,decimal-leading-zero);
  display:block;font-size:2.4rem;font-weight:700;line-height:1;
  opacity:.4;margin-bottom:.9rem;
}
.schritt h3{font-size:1.05rem}
.schritt p{font-size:.92rem;margin-bottom:0}

/* ---------- 15. FAQ ---------- */
.faq details{
  border-bottom:1px solid rgba(255,255,255,.28);
  padding-block:1.15rem;
}
.faq details:first-of-type{border-top:1px solid rgba(255,255,255,.28)}
.faq summary{
  cursor:pointer;list-style:none;font-weight:700;
  font-size:1.02rem;display:flex;gap:1rem;align-items:flex-start;
  justify-content:space-between;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.5rem;line-height:1;flex:none}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:.9rem 0 .2rem;font-size:.97rem;opacity:.94}

/* ---------- 16. Formular ---------- */
.formular{display:grid;gap:1.1rem}
/* Ohne min-width:0 kann eine Rasterzelle nicht unter die Inhaltsbreite
   schrumpfen. Ein <select> mit langen Optionstexten sprengt sonst das
   Raster und wird auf schmalen Bildschirmen rechts abgeschnitten. */
.formular > *{min-width:0}
.feld input,.feld textarea,.feld select{width:100%;min-width:0;box-sizing:border-box}
@media (min-width:720px){.formular{grid-template-columns:1fr 1fr}.formular .breit{grid-column:1/-1}}
.feld{display:flex;flex-direction:column;gap:.4rem}
.feld label{font-size:var(--fs-klein);font-weight:700;text-transform:uppercase;letter-spacing:.13em}
.feld input,.feld textarea,.feld select{
  font-family:inherit;font-size:1rem;padding:.85rem 1rem;
  border:1px solid rgba(255,255,255,.45);
  background:rgba(255,255,255,.08);color:var(--papier);
}
.feld input::placeholder,.feld textarea::placeholder{color:rgba(255,255,255,.55)}
.feld select option{color:var(--blau-dunkel)}
.hinweis{font-size:var(--fs-klein);opacity:.9;max-width:70ch}
.hinweis a{text-decoration:underline}
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.direktkontakt{margin-top:2.2rem;display:flex;flex-wrap:wrap;gap:2rem;font-size:.95rem}
.direktkontakt a{font-weight:700}

/* ---------- 17. Fußzeile ---------- */
.fuss{background:var(--blau-dunkel);color:var(--papier);padding-block:3.5rem 2.5rem}
.fuss-raster{display:grid;gap:2rem}
@media (min-width:760px){.fuss-raster{grid-template-columns:2fr 1fr 1fr}}
.fuss a{text-decoration:none;opacity:.9}
.fuss a:hover{opacity:1;text-decoration:underline}
.fuss ul{list-style:none;padding:0;font-size:.92rem}
.claim{
  font-size:clamp(1.1rem,2.4vw,1.6rem);font-weight:700;
  text-transform:lowercase;letter-spacing:-.01em;margin-bottom:1.2rem;
}
.fuss-schluss{
  margin-top:2.5rem;padding-top:1.4rem;
  border-top:1px solid rgba(255,255,255,.2);
  font-size:var(--fs-klein);opacity:.88;
  display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:space-between;
}

/* ---------- 18. Blog ---------- */
.beitrag-karte{display:flex;flex-direction:column;text-decoration:none}
.beitrag-karte .datum{font-size:var(--fs-klein);letter-spacing:.15em;text-transform:uppercase;opacity:.88;margin-bottom:.7rem}
.beitrag-karte h3{font-size:1.1rem}
.beitrag-karte .weiter{margin-top:auto;padding-top:1.2rem;font-size:var(--fs-klein);font-weight:700;letter-spacing:.14em;text-transform:uppercase}

.artikel{max-width:72ch;margin-inline:auto}
.artikel h2{font-size:clamp(1.5rem,2.6vw,2rem);margin-top:2.6rem}
.artikel h3{font-size:1.15rem;margin-top:2rem}
.artikel .meta{font-size:var(--fs-klein);text-transform:uppercase;letter-spacing:.15em;opacity:.85;margin-bottom:2rem}

/* ---------- 19. Sprungmarke ---------- */
.skip{
  position:absolute;left:-9999px;background:var(--papier);color:var(--blau-dunkel);
  padding:.8rem 1.2rem;font-weight:700;z-index:100;
}
.skip:focus{left:1rem;top:1rem}

/* ---------- 20. Druck ---------- */
@media print{
  .kopf,.muster,.knopf-reihe,form{display:none}
  body{color:#363B68;background:#fff}
  .sektion{padding-block:1.5rem;color:#363B68!important;background:#fff!important}
}

/* ---------- 21. Referenzen ---------- */
.stimme{
  margin:0;
  background:rgba(54,59,104,.06);
  border:1px solid rgba(54,59,104,.22);
  padding:clamp(1.6rem,2.5vw,2.2rem);
  display:flex;flex-direction:column;
}
.stimme blockquote{
  margin:0 0 1.6rem;font-size:1.02rem;line-height:1.5;font-weight:700;
}
.stimme blockquote::before{content:"„"}
.stimme blockquote::after{content:"“"}
.stimme figcaption{
  margin-top:auto;display:flex;gap:1rem;align-items:center;
  border-top:1px solid rgba(54,59,104,.22);padding-top:1.1rem;
}
.stimme figcaption img{width:72px;height:72px;flex:none;filter:grayscale(1);object-fit:cover}
.stimme figcaption span{font-size:.82rem;line-height:1.4;opacity:.92}
.stimme figcaption b{display:block;font-size:.92rem;opacity:1;margin-bottom:.15rem}

/* ---------- 22. Video ---------- */
.video{position:relative;padding-top:56.25%;background:var(--blau-dunkel)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- 23. Belegband ---------- */
.saalband{margin:0;position:relative}
.saalband img{width:100%;filter:grayscale(1);display:block;object-fit:cover;max-height:46vh}
.saalband figcaption{
  position:absolute;left:0;bottom:0;
  background:var(--blau-dunkel);color:var(--papier);
  font-size:var(--fs-klein);text-transform:uppercase;letter-spacing:.12em;
  padding:.6rem 1rem;font-weight:700;
}

/* ---------- 24. Themenraster ---------- */
.themen-raster{display:grid;gap:1px;margin-top:2.5rem;background:rgba(255,255,255,.24)}
@media (min-width:860px){.themen-raster{grid-template-columns:1fr 1fr}}
.thema{
  background:var(--blau-hell);
  padding:clamp(1.7rem,2.6vw,2.4rem);
  display:flex;flex-direction:column;position:relative;
}
.thema-nr{
  display:block;font-size:2.6rem;font-weight:700;line-height:1;
  opacity:.32;margin-bottom:1rem;letter-spacing:-.03em;
}
.thema h3{font-size:clamp(1.15rem,1.7vw,1.4rem);margin-bottom:.35rem;max-width:22ch}
.thema-unter{
  font-weight:700;text-transform:lowercase;font-size:.95rem;
  opacity:.92;margin-bottom:1.1rem;max-width:34ch;
}
.thema p{font-size:.95rem;margin-bottom:1.3rem}
.thema-tags{
  list-style:none;padding:0;margin:auto 0 0;display:flex;flex-wrap:wrap;gap:.4rem;
}
.thema-tags li{
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  border:1px solid rgba(255,255,255,.5);padding:.34rem .6rem;margin:0;
}

/* ---------- 25. Video mit Klickstart ---------- */
.video-start{
  position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;
  background:none;cursor:pointer;display:block;
}
.video-start img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .25s ease}
.video-start:hover img,.video-start:focus-visible img{filter:grayscale(.35)}
.video-knopf{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:84px;height:60px;background:var(--lila-dunkel);
  display:flex;align-items:center;justify-content:center;
  transition:background-color .2s ease;
}
.video-start:hover .video-knopf{background:var(--lila-hell)}
.video-knopf::after{
  content:"";border-style:solid;border-width:13px 0 13px 21px;
  border-color:transparent transparent transparent var(--papier);margin-left:4px;
}

/* ---------- 26. Fachbeiträge ---------- */
.beitraege{display:grid;gap:1px;margin-top:2.5rem;background:rgba(255,255,255,.24)}
@media (min-width:900px){.beitraege{grid-template-columns:1.35fr 1fr}}
.beitrag{
  background:var(--lila-dunkel);color:var(--papier);
  padding:clamp(1.7rem,2.6vw,2.4rem);
  display:flex;flex-direction:column;text-decoration:none;
}
.beitrag-marke{
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.16em;
  opacity:.92;margin-bottom:1rem;display:block;
}
.beitrag h3{margin-bottom:.7rem}
.beitrag p{font-size:.96rem;margin-bottom:0}
.beitrag .weiter{
  margin-top:auto;padding-top:1.5rem;font-size:var(--fs-klein);
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.beitrag-haupt h3{font-size:clamp(1.35rem,2.3vw,1.9rem);max-width:20ch}
.beitrag-haupt{transition:background-color .2s ease}
.beitrag-haupt:hover,.beitrag-haupt:focus-visible{background:var(--lila-hell);color:var(--blau-dunkel)}
.beitrag-liste{display:grid;gap:1px;background:rgba(255,255,255,.24)}
.beitrag-klein h3{font-size:1.05rem}
.beitrag-klein{opacity:.94}

/* ---------- 27. Hilfsklassen ---------- */
.fuss-titel{
  font-size:.78rem;letter-spacing:.18em;opacity:.88;margin-bottom:1rem;
  font-weight:700;text-transform:uppercase;
}
.visuell-versteckt{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- 28. Merksatz ---------- */
.merksatz{
  font-size:clamp(1.15rem,2vw,1.5rem);font-weight:700;line-height:1.3;
  border-left:4px solid var(--lila-hell);
  padding-left:1.2rem;margin:2rem 0 0;max-width:34ch;
}

/* ---------- 29. Belegzeile im Hero ---------- */
.beleg{margin:2.6rem 0 0;border-top:1px solid rgba(255,255,255,.28);padding-top:1.4rem}
.beleg p{
  margin:0 0 .6rem;font-size:var(--fs-klein);text-transform:uppercase;
  letter-spacing:.11em;display:grid;gap:.45rem;max-width:none;align-items:start;
}
@media (min-width:760px){
  .beleg p{grid-template-columns:14rem 1fr;gap:.45rem 1.2rem;align-items:center}
}
.beleg p:last-child{margin-bottom:0}
.beleg span{opacity:.85}
.beleg .marken{display:flex;flex-wrap:wrap;gap:.45rem}
.beleg b{
  font-weight:700;border:1px solid rgba(255,255,255,.45);
  padding:.32rem .62rem;letter-spacing:.08em;white-space:nowrap;
  max-width:100%;
}
/* Auf sehr schmalen Bildschirmen sind einzelne Nennungen breiter als das
   Fenster ("Production Systems Stuttgart 2023"). Dort darf umbrochen werden. */
@media (max-width:400px){
  .beleg b{white-space:normal;letter-spacing:.05em;padding:.3rem .5rem}
  .beleg .marken{gap:.35rem}
}

/* ---------- 30. Ergebnisversprechen ---------- */
.ergebnis{
  font-weight:700;font-size:.9rem;
  border-left:3px solid rgba(255,255,255,.55);
  padding-left:.9rem;margin-bottom:1.3rem;
}


/* ---------- 31. Direktkontakt im Fuß ---------- */
.fuss-direkt{
  font-size:.92rem;margin:0 0 1.2rem;
}
.fuss-direkt a{text-decoration:underline;opacity:.95}

/* ---------- 32. Formular-Rückmeldung ---------- */
.formular-meldung{
  grid-column:1/-1;margin:0 0 .6rem;font-weight:700;font-size:.95rem;
  border-left:4px solid var(--lila-hell);padding-left:1rem;
}

/* ---------- 33. Weitere Anlässe ---------- */
.anlass-weitere{
  margin:1.6rem 0 0;font-size:.88rem;line-height:1.7;max-width:none;
  border-top:1px solid rgba(255,255,255,.28);padding-top:1.3rem;opacity:.94;
}

/* ---------- 34. Kopierbare Textblöcke im Speaker-Kit ---------- */
.kopierbar{
  background:rgba(54,59,104,.06);border-left:4px solid var(--lila-hell);
  padding:1rem 1.2rem;max-width:none;
}
.kopierbar p{margin:0 0 .8rem;max-width:none}
.kopierbar p:last-child{margin-bottom:0}

/* ---------- 33. Aufzählungen in Karten ---------- */
.karte-liste{list-style:none;padding:0;margin:1rem 0 0;font-size:.9rem}
.karte-liste li{padding-left:1.1rem;position:relative;margin-bottom:.45rem}
.karte-liste li::before{
  content:"";position:absolute;left:0;top:.6em;
  width:.45rem;height:.45rem;background:currentColor;opacity:.7;
}
.karte-liste a{text-decoration:underline}

/* ---------- 34. Quellen und Autorenkasten ---------- */
.quellen{list-style:none;padding:0;margin:1rem 0 0;font-size:.94rem}
.quellen li{padding-left:1.1rem;position:relative;margin-bottom:.5rem}
.quellen li::before{content:"";position:absolute;left:0;top:.62em;width:.45rem;height:.45rem;background:currentColor;opacity:.7}
.quellen a{text-decoration:underline}

.autor{display:grid;gap:1.4rem;align-items:start}
@media (min-width:640px){.autor{grid-template-columns:120px 1fr}}
.autor img{width:120px;height:150px;object-fit:cover;filter:grayscale(1)}
.autor-name{font-weight:700;font-size:1.1rem;margin-bottom:.4rem;text-transform:uppercase;letter-spacing:-.01em}
.autor p{font-size:.95rem;margin-bottom:.6rem}
.autor-links a{text-decoration:underline}

/* ---------- 35. Verwandte Beiträge ---------- */
.verwandt h2{font-size:clamp(1.4rem,2.6vw,2rem)}
.verwandt .beitrag-karte h3{font-size:1.05rem}

/* ================================================================
   36. BEWEGUNG
   Grundsatz: Ohne Unterstützung oder bei reduzierter Bewegung ist
   alles sofort sichtbar. Animation ist Zugabe, nie Voraussetzung.
   ================================================================ */

@media (prefers-reduced-motion: no-preference) {

  /* ---- Fortschrittsbalken am oberen Rand ---- */
  @supports (animation-timeline: scroll()) {
    body::before{
      content:"";position:fixed;left:0;top:0;height:3px;width:100%;
      transform-origin:0 50%;transform:scaleX(0);z-index:200;
      background:var(--lila-hell);
      animation:fortschritt linear both;
      animation-timeline:scroll(root block);
    }
    @keyframes fortschritt{ to{ transform:scaleX(1) } }
  }

  /* ---- Abschnitte blenden beim Scrollen auf ---- */
  @supports (animation-timeline: view()) {
    .sektion > .huelle > *{
      animation:auftauchen linear both;
      animation-timeline:view();
      animation-range:entry 15% entry 80%;
    }
    /* Der Hero steht sofort — er ist der erste Eindruck */
    .buehne > .huelle > *{animation:none}

    /* Rasterkinder gestaffelt */
    .raster > *, .themen-raster > *, .beitraege > *, .buehne-fakten > *{
      animation:auftauchen linear both;
      animation-timeline:view();
      animation-range:entry 10% entry 62%;
    }
    .raster > *:nth-child(2),.themen-raster > *:nth-child(2),
    .buehne-fakten > *:nth-child(2){animation-range:entry 14% entry 70%}
    .raster > *:nth-child(3),.themen-raster > *:nth-child(3),
    .buehne-fakten > *:nth-child(3){animation-range:entry 18% entry 78%}
    .themen-raster > *:nth-child(4),.buehne-fakten > *:nth-child(4){animation-range:entry 22% entry 86%}
  }
  @keyframes auftauchen{
    from{opacity:0;transform:translateY(22px)}
    to{opacity:1;transform:none}
  }

  /* ---- Hero baut sich beim Laden auf ---- */
  .buehne .kennung{animation:einblenden .5s .05s both}
  .buehne h1{animation:einblenden .6s .15s both}
  .buehne .unterzeile{animation:einblenden .6s .3s both}
  .buehne .knopf-reihe{animation:einblenden .6s .45s both}
  .buehne .beleg{animation:einblenden .7s .6s both}
  .buehne .bild img{animation:einblenden .8s .2s both}
  @keyframes einblenden{
    from{opacity:0;transform:translateY(16px)}
    to{opacity:1;transform:none}
  }

  /* ---- Karten reagieren auf den Zeiger ---- */
  .karte,.thema,.stimme,.schritt{transition:transform .22s ease, background-color .22s ease}
  a.karte:hover,a.karte:focus-visible{transform:translateY(-4px)}
  .thema:hover{background:var(--blau-dunkel)}
  .beitrag-haupt{transition:background-color .22s ease,color .22s ease,transform .22s ease}
  .beitrag-haupt:hover{transform:translateY(-4px)}

  /* ---- Knöpfe ---- */
  .knopf{transition:transform .18s ease, background-color .18s ease, color .18s ease}
  .knopf:hover{transform:translateY(-2px)}

  /* ---- Markenmuster driftet langsam mit ---- */
  @supports (animation-timeline: view()) {
    .muster span{
      animation:driften linear both;
      animation-timeline:view();
      animation-range:cover;
    }
    @keyframes driften{
      from{transform:translateY(-14px)}
      to{transform:translateY(14px)}
    }
  }
}

/* ---- Rückfall für Browser ohne scroll-getriebene Animationen ---- */
@media (prefers-reduced-motion: no-preference) {
  .js-auftauchen .sektion:not(.buehne) > .huelle > *,
  .js-auftauchen .raster > *,
  .js-auftauchen .themen-raster > *,
  .js-auftauchen .beitraege > *{
    opacity:0;transform:translateY(22px);
    transition:opacity .55s ease, transform .55s ease;
  }
  .js-auftauchen .sichtbar{opacity:1;transform:none}
}

/* ---------- 37. Abschlussband am Ende eines Abschnitts ----------
   Nimmt die volle Breite ein, statt einen einzelnen Knopf in einer
   leeren Fläche stehen zu lassen. */
.abschlussband{
  margin-top:clamp(2.2rem,4vw,3.2rem);
  padding-top:1.6rem;
  border-top:1px solid rgba(255,255,255,.32);
  display:grid;gap:1.2rem;align-items:center;
}
@media (min-width:760px){
  .abschlussband{grid-template-columns:1fr auto;gap:2.5rem}
}
.abschlussband p{
  margin:0;max-width:46ch;font-weight:700;
  font-size:clamp(1rem,1.5vw,1.15rem);line-height:1.4;
}
.abschlussband .knopf{justify-self:start}
@media (min-width:760px){.abschlussband .knopf{justify-self:end}}

/* ---------- 38. Hinweis auf weitere Nennungen ---------- */
.beleg b.mehr{border-style:dashed;opacity:.85;font-style:normal}

/* ---------- 39. Veröffentlichungen ---------- */
.werke{display:grid;gap:1px;margin-top:2.5rem;background:rgba(54,59,104,.22)}
@media (min-width:700px){.werke{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.werke{grid-template-columns:repeat(4,1fr)}}
.werk{
  background:var(--lila-hell);
  padding:clamp(1.5rem,2.4vw,2rem);
  display:flex;flex-direction:column;
}
.werk-jahr{
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.16em;
  margin-bottom:1.4rem;display:block;
}
.werk h3{font-size:1.15rem;margin-bottom:.4rem;max-width:18ch}
.werk-unter{font-weight:700;font-size:.9rem;margin-bottom:1rem;max-width:26ch}
.werk p{font-size:.9rem;margin-bottom:0}

/* Aufmacher-Kachel und Belegzeile bei den Veröffentlichungen */
@media (min-width:1100px){
  .werke{grid-template-columns:repeat(3,1fr)}
  .werk-haupt{grid-column:span 2}
}
.werk-beleg{margin-top:auto;padding-top:1rem;font-size:.82rem}
.werk-beleg b{font-size:.95rem}

/* Medien- und Presseangaben unter den Veröffentlichungen */
.medien{margin-top:2.5rem;padding-top:1.6rem;border-top:1px solid rgba(54,59,104,.3)}
.medien p{
  display:grid;gap:.5rem 1.4rem;margin-bottom:1rem;
  font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;
}
@media (min-width:760px){.medien p{grid-template-columns:13rem 1fr;align-items:start}}
.medien p > span:first-child{font-weight:700;opacity:.7}
.medien .marken{display:flex;flex-wrap:wrap;gap:.5rem}
.medien .marken b{border:1px solid rgba(54,59,104,.4);padding:.3rem .7rem;font-size:.75rem}

/* Verweise in den Buchkacheln */
.werk h3 a{color:inherit;text-decoration:none;border-bottom:2px solid rgba(54,59,104,.35);padding-bottom:.1rem}
.werk h3 a:hover,.werk h3 a:focus-visible{border-bottom-color:currentColor}

/* ---------- 40. Sprachwahl in der Kopfzeile ---------- */
.sprachwahl{
  display:flex;flex-shrink:0;
  border:1px solid rgba(255,255,255,.45);
  font-size:.72rem;font-weight:700;letter-spacing:.1em;line-height:1;
}
.sprachwahl > span,
.sprachwahl > a{
  display:flex;align-items:center;justify-content:center;
  min-height:26px;min-width:26px;
  padding:.5rem .55rem;
  text-decoration:none;color:inherit;
}
/* aktuelle Sprache: gefüllt */
.sprachwahl > span{background:#fff;color:var(--blau-dunkel)}
/* andere Sprache: nur Text */
.sprachwahl > a{opacity:.9;transition:opacity .18s ease}
.sprachwahl > a:hover,
.sprachwahl > a:focus-visible{opacity:1;text-decoration:underline}
@media (max-width:700px){
  .sprachwahl{font-size:.68rem}
  .sprachwahl > span,.sprachwahl > a{padding:.42rem .5rem}
}

/* Auf schmalen Bildschirmen konkurrieren Wortmarke, Sprachwahl und Knopf
   um denselben Platz. Bis 430 px werden alle drei etwas kleiner. */
@media (max-width:430px){
  .kopf-inhalt{gap:.6rem}
  .wortmarke{font-size:.8rem;letter-spacing:.04em}
  .wortmarke small{font-size:.66rem;letter-spacing:.1em}
  .kopf .knopf{font-size:.7rem;padding:.6rem .8rem;letter-spacing:.06em}
  .sprachwahl{font-size:.68rem}
  .sprachwahl > span,.sprachwahl > a{padding:.42rem .45rem;min-height:26px}
}

/* ---------- 41. Abgrenzung: wann es nicht passt ---------- */
.abgrenzung{
  margin-top:clamp(2.5rem,4vw,3.5rem);
  padding:clamp(1.6rem,2.6vw,2.2rem);
  border:1px solid rgba(255,255,255,.35);
}
.abgrenzung h3{font-size:clamp(1.1rem,1.8vw,1.35rem);margin-bottom:1.1rem}
.abgrenzung ul{list-style:none;display:grid;gap:.7rem;margin-bottom:1.2rem}
.abgrenzung li{padding-left:1.5rem;position:relative;max-width:62ch;font-size:.95rem}
.abgrenzung li::before{content:"—";position:absolute;left:0;opacity:.7}
.abgrenzung > p{font-size:.95rem;font-weight:700;max-width:62ch;margin-bottom:0}

/* Hook unter der H1 — die These bleibt, ist der Kategorie aber nachgeordnet */
.buehne .hook{
  font-size:clamp(1.05rem,1.9vw,1.35rem);font-weight:700;
  max-width:34ch;margin-top:1rem;margin-bottom:0;line-height:1.35;
}

/* Lange Fachbegriffe im Hero dürfen umbrechen. "KI-Transformation" ist bei
   voller Schriftgröße breiter als ein 320-px-Bildschirm; ohne Trennung
   sprengt ein einziges Wort das Layout. */
.buehne h1,
.buehne .kennung,
.buehne .hook{
  overflow-wrap:break-word;
  hyphens:auto;
  -webkit-hyphens:auto;
}
@media (max-width:400px){
  /* "Transformation" braucht bei 28px rund 258px, verfuegbar sind 234px.
     Bei 24px passt das laengste Wort in eine Zeile. */
  /* max-width:15ch begrenzt die Ueberschrift auf 187px, obwohl 280px
     verfuegbar sind. Auf schmalen Geraeten die volle Spalte nutzen. */
  .buehne h1{font-size:clamp(1.5rem,7.4vw,1.9rem);line-height:1.15;
             letter-spacing:-.01em;max-width:none}
  .buehne .kennung{white-space:normal;letter-spacing:.08em}
}

/* Der Kopfbereich traegt jetzt Kennung, Ueberschrift, Hook, Knoepfe, Belege
   und Kennzahlen. Auf 720-px-Laptops muss der Anfragen-Knopf sichtbar
   bleiben, deshalb dort engere Abstaende. */
@media (min-width:1000px) and (max-height:920px){
  .buehne{padding-block:clamp(2rem,4vh,3.5rem)}
  .buehne .kennung{margin-bottom:1rem}
  .buehne .hook{margin-top:.8rem;font-size:1.1rem}
  .buehne .knopf-reihe{margin-top:1.4rem}
}

/* Verlinkte Podcast-Nennungen: sehen aus wie die übrigen Marken,
   heben sich beim Überfahren aber ab. */
.medien .marken a{text-decoration:none;color:inherit;display:inline-flex}
.medien .marken a b{transition:background-color .18s ease,border-color .18s ease}
.medien .marken a:hover b,
.medien .marken a:focus-visible b{background:rgba(54,59,104,.12);border-color:rgba(54,59,104,.75)}