/* ==========================================================================
   schaefer-gedaechtnis.de – gemeinsames Stylesheet
   Systemschriften, keine externen Ressourcen (keine Google Fonts, kein CDN).
   ========================================================================== */

:root{
  --paper:#fdfaf5;
  --paper-2:#fff;
  --ink:#2b2748;
  --muted:#6f6b90;
  --violet:#6c4ef0;
  --violet-d:#5238cc;
  --pink:#d91e6c;          /* Buttonfarbe: weiße Schrift mit ausreichendem Kontrast */
  --pink-d:#a3165a;
  --pink-text:#c41f64;     /* für pinke Schrift auf hellem Grund */
  --cyan:#12a8e0;
  --cyan-d:#0b7aa5;        /* dunkles Cyan: weiße Schrift gut lesbar */
  --cyan-text:#08688f;     /* für cyanfarbene Schrift auf hellem Grund */
  --gruen:#0d8d7e;
  --sun:#ffc63d;
  --line:#eae4f5;
  /* Farbverlauf der Kursflächen. Die Endpunkte sind so dunkel gewählt,
     dass weiße Schrift überall auf dem Verlauf lesbar bleibt (WCAG AA). */
  --verlauf:linear-gradient(120deg,#0b7aa5,#6c4ef0 55%,#d91e6c);
  --sans:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}
/* hidden muss auch gegen display:flex/grid einzelner Klassen gewinnen */
[hidden]{display:none !important}
html{scroll-behavior:smooth}
/* Sprungziele nicht unter der klebenden Kopfzeile verstecken */
[id]{scroll-margin-top:96px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
     font-size:17.5px;line-height:1.68;-webkit-font-smoothing:antialiased}
/* height:auto ist wichtig: Die Bilder tragen width/height-Attribute (gegen das
   Springen des Layouts beim Laden). Ohne height:auto würde die Attributhöhe
   das Seitenverhältnis überschreiben und die Bilder verzerren. */
img{max-width:100%;display:block;height:auto}
a{color:inherit}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.wrap-schmal{max-width:860px;margin:0 auto;padding:0 24px}

/* Sprungmarke für Tastaturnutzer */
.skip{position:absolute;left:-9999px;top:0;background:var(--violet);color:#fff;
      padding:12px 20px;border-radius:0 0 12px 0;z-index:100;font-weight:700}
.skip:focus{left:0}

/* ---------- Kopfzeile ---------- */
header{position:sticky;top:0;z-index:50;background:rgba(253,250,245,.94);
       backdrop-filter:blur(10px);border-bottom:2px solid var(--line)}
nav{display:flex;align-items:center;gap:24px;padding:11px 0}
.brand{display:block;margin-right:auto;text-decoration:none}
.brand img{height:44px;width:auto}
.navlinks{display:flex;gap:20px}
.navlinks a{text-decoration:none;font-size:15.5px;font-weight:600;color:var(--muted);
            padding:6px 10px;border-radius:9px}
.navlinks a:hover,.navlinks a:focus{color:var(--violet);background:#f2edff}
.navlinks a[aria-current="page"]{color:var(--violet)}

/* ---------- Buttons ---------- */
.btn{display:inline-block;text-decoration:none;font-weight:800;border-radius:999px;
     padding:13px 26px;font-size:15.5px;border:0;cursor:pointer;font-family:inherit;
     text-align:center}
.btn-v{background:var(--violet);color:#fff;box-shadow:0 5px 0 var(--violet-d)}
.btn-v:active{transform:translateY(3px);box-shadow:0 2px 0 var(--violet-d)}
.btn-p{background:var(--pink);color:#fff;box-shadow:0 5px 0 var(--pink-d)}
.btn-p:active{transform:translateY(3px);box-shadow:0 2px 0 var(--pink-d)}
.btn-o{background:#fff;color:var(--violet);border:2px solid var(--violet)}
.btn-o:hover{background:#f4f0ff}
.btn-s{padding:10px 20px;font-size:14.5px}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:
  radial-gradient(760px 420px at 88% 5%,#ffe9c7,transparent 62%),
  radial-gradient(700px 460px at 4% 92%,#e3ecff,transparent 60%)}
.hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;
         padding:62px 24px 70px}
.pill{display:inline-block;background:#fff;border:2px solid var(--line);border-radius:999px;
      padding:7px 18px;font-size:13.5px;font-weight:700;color:var(--violet);margin-bottom:20px}
h1{font-size:clamp(34px,4.8vw,54px);line-height:1.08;margin:0 0 20px;letter-spacing:-1.2px;font-weight:800}
.hl{white-space:nowrap;padding:0 4px;border-radius:6px;
    background:linear-gradient(transparent 48%,rgba(255,198,61,.8) 48%,rgba(255,198,61,.8) 88%,transparent 88%)}
.lead{font-size:19px;color:var(--muted);max-width:36em;margin:0 0 28px}
.cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-photo{position:relative}
.hero-photo img{border-radius:26px;box-shadow:0 26px 60px rgba(43,39,72,.18)}
.bubble{position:absolute;background:#fff;border-radius:18px;padding:12px 18px;
        box-shadow:0 14px 34px rgba(43,39,72,.16);font-weight:800;font-size:14.5px}
.bubble.a{top:18px;left:-22px;color:var(--pink);transform:rotate(-5deg)}
.bubble.b{bottom:26px;right:-18px;color:var(--cyan);transform:rotate(4deg)}
.bubble small{display:block;font-weight:600;color:var(--muted);font-size:11.5px}

/* ---------- TV-Leiste als Laufschrift ----------
   Zwei identische Spuren laufen hintereinander her; sobald die erste ganz
   durch ist, steht die zweite exakt an ihrer Stelle – dadurch wirkt es
   endlos. Bei Mausberührung und bei Tastaturfokus hält sie an, und wer im
   Betriebssystem "Bewegung reduzieren" eingestellt hat, bekommt sie
   statisch und umgebrochen. */
.band{background:var(--violet);color:#fff;padding:14px 0;overflow:hidden;
      -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
              mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.band-lauf{display:flex;width:max-content;animation:band-scroll 46s linear infinite}
.band:hover .band-lauf,.band:focus-within .band-lauf{animation-play-state:paused}
.band-spur{display:flex;align-items:center;gap:16px;padding-right:16px;
           font-weight:700;font-size:14.5px;white-space:nowrap}
.band .sep{opacity:.55}
@keyframes band-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

@media(prefers-reduced-motion:reduce){
  .band{-webkit-mask-image:none;mask-image:none}
  .band-lauf{width:auto;animation:none;flex-wrap:wrap;justify-content:center;
             max-width:1160px;margin:0 auto;padding:0 24px}
  .band-spur{flex-wrap:wrap;justify-content:center;white-space:normal}
  .band-spur[aria-hidden="true"]{display:none}
}

/* ---------- Abschnitte ---------- */
section{padding:74px 0}
.sec-head{max-width:720px;margin:0 auto 42px;text-align:center}
.sec-head.links{margin-left:0;text-align:left}
.kicker{font-size:13px;letter-spacing:1.8px;text-transform:uppercase;color:var(--pink-text);
        font-weight:800;margin-bottom:10px}
h2{font-size:clamp(27px,3.2vw,38px);line-height:1.15;margin:0 0 12px;letter-spacing:-.8px;font-weight:800}
h3{font-size:21px;margin:0 0 9px;font-weight:800;letter-spacing:-.3px}
.sec-head p{color:var(--muted);font-size:18px;margin:0}
.hell{background:var(--paper-2);border-top:2px solid var(--line);border-bottom:2px solid var(--line)}

/* ---------- Drei Schritte ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.step{border:2px solid var(--line);border-radius:24px;padding:30px 28px;background:var(--paper)}
.step .n{width:48px;height:48px;border-radius:16px;color:#fff;display:grid;place-items:center;
         font-weight:900;font-size:20px;margin-bottom:18px}
.n1{background:var(--cyan)}.n2{background:var(--violet)}.n3{background:var(--pink)}
.step p{color:var(--muted);font-size:15.5px;margin:0}

/* ---------- Video-Vorschau ---------- */
.thumb{display:block;position:relative;border-radius:22px;overflow:hidden;text-decoration:none;
       box-shadow:0 18px 44px rgba(43,39,72,.18);border:3px solid #fff;background:#1b1e6b}
.thumb img{width:100%;aspect-ratio:16/9;object-fit:cover}
.play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:78px;height:56px;
      border-radius:16px;background:#ff0033;display:grid;place-items:center;
      box-shadow:0 12px 30px rgba(0,0,0,.45);transition:transform .18s}
.play::after{content:"";border-left:20px solid #fff;border-top:12px solid transparent;
             border-bottom:12px solid transparent;margin-left:5px}
.thumb:hover .play,.thumb:focus .play{transform:translate(-50%,-50%) scale(1.1)}
.thumb.bald{filter:grayscale(.55);cursor:default}
.thumb.bald .play{display:none}
.thumb .bald-tag{position:absolute;inset:auto 0 0 0;background:rgba(30,20,55,.9);color:#fff;
                 padding:10px;text-align:center;font-weight:800;font-size:14px}

/* ---------- Themenraster ---------- */
.feature{display:grid;grid-template-columns:1.15fr 1fr;gap:44px;align-items:center;
         margin-bottom:34px;padding-bottom:40px;border-bottom:2px solid var(--line)}
.badge{display:inline-block;font-size:12px;font-weight:800;letter-spacing:1.4px;
       text-transform:uppercase;color:#fff;background:var(--cyan-d);padding:6px 14px;
       border-radius:999px;margin-bottom:14px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.card{background:#fff;border:2px solid var(--line);border-radius:24px;overflow:hidden;
      display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s;
      position:relative}
.card:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(43,39,72,.14)}
/* Die ganze Karte anklickbar machen: Der vorhandene Link bekommt eine
   unsichtbare Fläche über die komplette Karte. So bleibt es genau ein Link –
   für Screenreader und Tastatur ändert sich nichts. */
.card .go::after{content:"";position:absolute;inset:0;z-index:1}
.card:focus-within{box-shadow:0 0 0 3px rgba(108,78,240,.45)}
.card > img{width:100%;aspect-ratio:16/9;object-fit:cover}
.card-in{padding:24px;display:flex;flex-direction:column;flex:1}
.tag{display:inline-block;font-size:12px;font-weight:800;padding:5px 12px;border-radius:999px;
     margin-bottom:12px;align-self:flex-start}
.tag-erd{background:#e2f4fc;color:var(--cyan-text)}
.tag-pol{background:#fdeaf3;color:#c41f64}
.tag-bio{background:#e6f7f4;color:#0a6e62}
.tag-bald{background:#f2f0f7;color:#6f6b90}
.card p{color:var(--muted);font-size:15px;margin:0 0 18px}
.card .go{margin-top:auto;font-weight:800;color:var(--violet);font-size:15px;text-decoration:none}
.card .go:hover{color:var(--pink)}
.mini{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.mini span{font-size:12px;font-weight:700;color:var(--muted);background:#f6f3fd;
           border-radius:8px;padding:4px 10px}
/* Ausblick-Karte: zeigt, dass die Sammlung weiterwächst */
.card-soon{border-style:dashed;background:transparent;text-align:center;
           color:var(--muted);min-height:230px}
.card-soon:hover{transform:none;box-shadow:none}
.card-soon .card-in{justify-content:center;align-items:center}
.card-soon .sym{font-size:34px;line-height:1;margin-bottom:8px}
.card-soon h3{color:var(--ink)}
.card-soon p{margin-bottom:16px}
.matlinks{display:flex;flex-direction:column;gap:10px;max-width:360px}
.matlink{display:flex;align-items:center;gap:12px;text-decoration:none;padding:12px 16px;
         border-radius:14px;background:#faf7ff;border:2px solid var(--line);font-size:15px;font-weight:700}
.matlink:hover{background:#f1ecff;border-color:#d9cdfa}
.ic{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font-size:13px;
    color:#fff;flex:none}
.ic-yt{background:#ff0033}.ic-pdf{background:#3b7bff}.ic-ex{background:var(--cyan)}
.ic-ig{background:linear-gradient(140deg,#f9ce34,#ee2a7b,#6228d7)}
.note{font-size:13.5px;color:var(--muted);margin-top:14px}

/* ---------- Über mich ---------- */
.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:52px;align-items:start}
.about-grid img{border-radius:24px}
.credit{font-size:11.5px;color:var(--muted);margin-top:8px}
.recgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px}
.rec{background:linear-gradient(150deg,#f4f0ff,#fff);border:2px solid #e2d9fb;
     border-radius:18px;padding:18px}
.rec b{display:block;font-size:24px;color:var(--violet);letter-spacing:-.8px;line-height:1.15}
.rec span{font-size:14px;color:var(--muted)}

/* ---------- Bilderreihe ---------- */
.gal{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.gal figure{margin:0}
.gal img{border-radius:20px;width:100%;height:280px;object-fit:cover;object-position:center top}
.gal figcaption{font-size:12px;color:var(--muted);margin-top:7px}

/* ---------- Kurs-Block (Startseite) ---------- */
.kursblock{background:var(--verlauf);color:#fff;
           padding:64px 0}
.kursblock h2{color:#fff}
.kursblock p{color:rgba(255,255,255,.94)}
.kursblock .kicker{color:#fff}
.kurs-in{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.kurs-punkte{list-style:none;padding:0;margin:0 0 26px}
.kurs-punkte li{padding:8px 0 8px 34px;position:relative;color:rgba(255,255,255,.96);font-size:16.5px}
.kurs-punkte li::before{content:"→";position:absolute;left:0;top:8px;font-weight:900;
                        color:#ffe08a;font-size:17px}
.kurs-karte{background:rgba(255,255,255,.14);border:2px solid rgba(255,255,255,.4);
            border-radius:24px;padding:30px;text-align:center;backdrop-filter:blur(4px)}
.kurs-karte .stand{font-size:12px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;
                   background:#fff;color:var(--violet);border-radius:999px;padding:5px 14px;
                   display:inline-block;margin-bottom:16px}
.kurs-karte h3{font-size:22px;margin:0 0 10px;color:#fff}
.kurs-karte p{font-size:15.5px;margin:0 0 20px}
.btn-weiss{background:#fff;color:var(--violet);box-shadow:0 5px 0 rgba(0,0,0,.18)}
.btn-weiss:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.18)}

/* ---------- Kursseite ---------- */
.kurs-hero{background:var(--verlauf);color:#fff;
           padding:52px 0 56px}
.kurs-hero h1{margin-bottom:16px}
.kurs-hero .intro{color:rgba(255,255,255,.94)}
.kurs-hero .stand{font-size:12px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;
                  background:rgba(255,255,255,.22);border:2px solid rgba(255,255,255,.45);
                  border-radius:999px;padding:5px 14px;display:inline-block;margin-bottom:18px;color:#fff}
.typen{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 10px}
.typ{border:2px solid var(--line);border-radius:18px;padding:20px 22px;background:#fff}
.typ b{display:block;margin-bottom:3px}
.typ span{color:var(--muted);font-size:15px}
.hervor{border:2px solid var(--cyan);background:#f0faff;border-radius:22px;padding:26px 28px;
        margin:0 0 22px}
.hervor .marke{font-size:12px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;
               color:var(--cyan-text);margin-bottom:8px}
.frei-hinweis{border-left:4px solid var(--cyan);background:#f0faff;border-radius:0 14px 14px 0;
              padding:14px 20px;margin:0 0 20px;font-size:15.5px;color:#0a5c7d}

/* ---------- Benachrichtigung bei neuem Material ---------- */
.news{background:var(--verlauf);color:#fff}
.news-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.news .kicker{color:#fff}
.news p{color:rgba(255,255,255,.93)}
.news h2{color:#fff}
.nl-liste{list-style:none;padding:0;margin:0 0 22px}
.nl-liste li{padding:7px 0 7px 32px;position:relative;color:rgba(255,255,255,.95);font-size:16px}
.nl-liste li::before{content:"✓";position:absolute;left:0;top:7px;width:22px;height:22px;
                     border-radius:7px;background:rgba(255,255,255,.22);display:grid;
                     place-items:center;font-weight:900;font-size:13px}
.newsbox{background:#fff;border-radius:24px;padding:30px;color:var(--ink);
         box-shadow:0 24px 56px rgba(30,10,80,.3)}
.follow{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}
.follow a{display:flex;align-items:center;gap:10px;text-decoration:none;padding:12px 20px;
          border-radius:14px;background:rgba(255,255,255,.16);border:2px solid rgba(255,255,255,.4);
          font-weight:800;font-size:15px;color:#fff}
.follow a:hover{background:rgba(255,255,255,.28)}

/* ---------- Formulare ---------- */
label{display:block;font-size:13.5px;font-weight:800;margin-bottom:7px}
input,select,textarea{width:100%;font-family:inherit;font-size:16px;padding:13px 15px;
       border-radius:13px;border:2px solid var(--line);background:#fdfbff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--violet);
       box-shadow:0 0 0 3px rgba(108,78,240,.18)}
.field{margin-bottom:15px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:13px;color:var(--muted);
         margin:4px 0 18px;font-weight:500}
.consent input{width:18px;height:18px;flex:none;margin-top:3px}
.consent a{color:var(--violet)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fehler{background:#fff2f7;border:2px solid var(--pink);color:#a8195a;border-radius:14px;
        padding:14px 18px;margin-bottom:18px;font-size:15px}

/* ---------- Kontakt ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:50px}
.social{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}
.social a{display:flex;align-items:center;gap:9px;text-decoration:none;padding:12px 20px;
          border-radius:14px;background:#fff;border:2px solid var(--line);font-weight:700;font-size:14.5px}
.social a:hover{border-color:var(--violet);color:var(--violet)}

/* ---------- Themenseite ---------- */
.crumb{font-size:13.5px;color:var(--muted);padding:18px 0 0}
.crumb a{color:var(--violet);text-decoration:none;font-weight:600}
.tagrow{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:6px}
.tagrow span{font-size:12.5px;font-weight:800;padding:5px 13px;border-radius:999px;
             background:#e2f4fc;color:var(--cyan-text)}
.intro{font-size:18.5px;color:var(--muted);margin:0 0 30px}
.mat{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 18px}
.matbtn{display:flex;align-items:center;gap:16px;text-decoration:none;padding:22px 24px;
        border-radius:22px;color:#fff;font-weight:800;font-size:19px;line-height:1.25;
        box-shadow:0 6px 0 rgba(0,0,0,.18)}
.matbtn small{display:block;font-weight:600;font-size:13.5px;opacity:.92;margin-top:2px}
.matbtn:active{transform:translateY(3px);box-shadow:0 3px 0 rgba(0,0,0,.18)}
.m-pdf{background:var(--violet)}
.m-ex{background:var(--cyan-d)}
.m-aus{background:#c9c4dd;cursor:default;box-shadow:0 6px 0 #b4aecc}
.matbtn .ic-gross{width:46px;height:46px;border-radius:14px;background:rgba(255,255,255,.22);
                  display:grid;place-items:center;font-size:22px;flex:none}
.schritte{list-style:none;padding:0;margin:0 0 10px;counter-reset:s}
.schritte li{position:relative;padding:12px 0 12px 44px;border-bottom:2px solid var(--line)}
.schritte li b{display:block}
.schritte li span{color:var(--muted);font-size:15.5px}
.schritte li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:14px;
                     width:30px;height:30px;border-radius:10px;background:var(--violet);color:#fff;
                     display:grid;place-items:center;font-weight:900;font-size:14px}
.more{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}
.morecard{border:2px solid var(--line);border-radius:20px;padding:22px;background:var(--paper-2);
          text-decoration:none;display:block}
.morecard:hover{border-color:var(--violet)}
.morecard b{display:block;font-size:17px;margin-bottom:4px}
.morecard span{color:var(--muted);font-size:14.5px}
.nl-klein{background:var(--verlauf);color:#fff;
          border-radius:26px;padding:32px;margin:44px 0 10px}
.nl-klein h2{margin:0 0 8px;color:#fff;font-size:26px}
.nl-klein p{color:rgba(255,255,255,.93);margin:0 0 20px;font-size:16px}
.nf{display:flex;gap:12px;flex-wrap:wrap}
.nf input{flex:1 1 240px;border:0}
.nf button{font-family:inherit;font-weight:800;font-size:16px;padding:14px 26px;border-radius:14px;
           border:0;background:#fff;color:var(--violet);cursor:pointer}
.nl-klein small{display:block;margin-top:12px;font-size:12.5px;color:#fff}
.nl-klein small a{color:#fff}

/* ---------- Textseiten (Impressum, Datenschutz) ---------- */
.textseite{padding:44px 24px 70px}
.textseite h1{font-size:clamp(30px,4vw,42px);margin-bottom:26px}
.textseite h2{font-size:23px;margin:40px 0 10px;padding-top:22px;border-top:2px solid var(--line)}
.textseite h3{font-size:18px;margin:26px 0 6px}
.textseite p,.textseite li{color:#403c63}
.textseite ul{padding-left:22px}
.textseite li{margin-bottom:6px}
.stand{color:var(--muted);font-size:14.5px}

/* ---------- Fußzeile ---------- */
footer{background:#2b2748;color:#b9b3d8;padding:42px 0 38px;font-size:14.5px}
.foot{display:flex;justify-content:space-between;gap:22px;flex-wrap:wrap;align-items:center}
.foot img{height:38px;width:auto}
.foot a{color:#e3dff6;text-decoration:none;margin-right:18px;display:inline-block;line-height:2}
.foot a:hover{color:var(--sun)}

/* ---------- Schmale Bildschirme ---------- */
@media(max-width:980px){
  .hero-in,.feature,.about-grid,.news-grid,.contact-grid{grid-template-columns:1fr;gap:34px}
  .steps,.gal{grid-template-columns:1fr}
  /* Navigation wandert in eine zweite Zeile, die man seitlich wischen kann –
     so bleibt sie auf dem Handy vollständig erreichbar, ganz ohne JavaScript. */
  nav{flex-wrap:wrap;row-gap:2px;padding:9px 0 6px}
  .brand img{height:36px}
  .navlinks{order:3;width:100%;gap:2px;overflow-x:auto;scrollbar-width:none;
            -webkit-overflow-scrolling:touch;margin-left:-10px}
  .navlinks::-webkit-scrollbar{display:none}
  /* sanftes Ausblenden rechts zeigt: hier geht es weiter */
  .navlinks{-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);
                    mask-image:linear-gradient(90deg,#000 82%,transparent);padding-right:30px}
  .navlinks a{white-space:nowrap;font-size:14.5px;padding:5px 10px}
  /* Blasen an den unteren Bildrand, damit sie nicht das Gesicht verdecken */
  .bubble.a{top:auto;bottom:-16px;left:8px}
  .hero-photo .credit{margin-top:30px}.bubble.b{bottom:auto;top:-14px;right:6px}
  section{padding:54px 0}
  .gal img{height:240px}
}
@media(max-width:640px){
  .bubble.b{display:none}
  .mat,.more,.grid2,.recgrid{grid-template-columns:1fr}
  body{font-size:17px}
}

/* ---------- Druck ---------- */
@media print{
  header,footer,.news,.nl-klein,.band,.cta,.follow{display:none}
  body{background:#fff;font-size:12pt}
}

@media(max-width:980px){
  .kurs-in{grid-template-columns:1fr;gap:30px}
  .typen{grid-template-columns:1fr}
}

/* ==========================================================================
   Ergänzungen September 2026
   ========================================================================== */

/* ---------- Häkchen-Liste (Kursinhalte, Vortrag) ---------- */
.haken{list-style:none;padding:0;margin:0 0 22px}
.haken li{position:relative;padding:10px 0 10px 42px;border-bottom:2px solid var(--line)}
.haken li:last-child{border-bottom:0}
.haken li::before{content:"✓";position:absolute;left:0;top:11px;width:28px;height:28px;border-radius:9px;
                  background:var(--gruen);color:#fff;display:grid;place-items:center;font-weight:900;font-size:15px}
.haken li b{display:block}
.haken li span{color:var(--muted);font-size:15.5px}

/* ---------- Kleine Eckdaten-Zeile ---------- */
.eckdaten{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 26px;padding:0;list-style:none}
.eckdaten li{background:#fff;border:2px solid var(--line);border-radius:14px;padding:9px 16px;font-size:15px}
.eckdaten b{color:var(--violet)}

/* ---------- Kasten für Eltern / Lehrkräfte ---------- */
.kasten{border:2px solid var(--line);background:#fff;border-radius:22px;padding:26px 28px;margin:0 0 26px}
.kasten .marke{font-size:12px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;
               color:var(--violet);margin-bottom:8px}
.kasten h3{margin-top:0}
.kasten p:last-child{margin-bottom:0}
.lehrer-hinweis{border-left:4px solid var(--gruen);background:#effaf7;border-radius:0 14px 14px 0;
                padding:12px 18px;margin:14px 0 0;font-size:15px;color:#0a5249}
.lehrer-hinweis b{color:#07443c}

/* ---------- Video-Platz auf der Kursseite ---------- */
.kursvideo{margin:0 0 34px;border-radius:22px;overflow:hidden;background:#1b1e6b;
           box-shadow:0 18px 44px rgba(43,39,72,.18)}
.kursvideo video{display:block;width:100%;aspect-ratio:16/9;background:#1b1e6b}

/* ---------- Vortragsseite ---------- */
.formate{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:0 0 30px}
.format{border:2px solid var(--line);border-radius:22px;padding:24px;background:#fff}
.format .sym{font-size:30px;line-height:1;margin:0 0 10px}
.format p{color:var(--muted);font-size:15.5px;margin:0}
.bild-rechts{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center;margin:0 0 20px}
.bild-rechts img{border-radius:22px}

/* ---------- Pressebereich ---------- */
.fakten{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:15.5px}
.fakten th,.fakten td{text-align:left;padding:10px 12px;border-bottom:2px solid var(--line);vertical-align:top}
.fakten th{width:34%;color:var(--muted);font-weight:700}
.vita{background:#fff;border:2px solid var(--line);border-radius:18px;padding:20px 24px;margin:0 0 18px}
.vita .marke{font-size:12px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.vita p:last-child{margin-bottom:0}
.kontaktzeile{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 20px}
.kontaktzeile a{display:inline-flex;align-items:center;gap:10px;text-decoration:none;padding:12px 20px;
                border-radius:14px;background:#fff;border:2px solid var(--line);font-weight:700}
.kontaktzeile a:hover{border-color:var(--violet);color:var(--violet)}

/* ---------- Instagram-Hinweis ---------- */
.folgen{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:24px;padding:16px 20px;
        border-radius:18px;background:#fff;border:2px solid var(--line)}
.folgen p{margin:0;font-size:15.5px;color:var(--muted);flex:1 1 240px}
.folgen a{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-weight:800;
          padding:10px 18px;border-radius:12px;background:linear-gradient(140deg,#c13584,#7a2bd6);color:#fff}

/* ---------- Aktuelle Meldung (Banner + Abschnitt) ----------
   Wird bei Bedarf über den Blöcken A/B in index.html genutzt; ohne diese
   Blöcke hat das CSS keine Wirkung. */
.aktuell{background:linear-gradient(100deg,#e6f6fd,#fdeaf3);border-bottom:2px solid var(--line)}
.aktuell .wrap{display:flex;align-items:center;gap:16px;padding:12px 24px;flex-wrap:wrap;font-size:15.5px}
.aktuell .flag{font-size:11.5px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;
               background:var(--pink);color:#fff;padding:5px 13px;border-radius:999px;flex:none}
.aktuell a{margin-left:auto;color:var(--violet);font-weight:800;text-decoration:none;white-space:nowrap}
.meldung-box{display:grid;grid-template-columns:1fr 400px;gap:34px;align-items:center;
             border:2px solid #f7c3da;border-radius:26px;padding:32px;
             background:linear-gradient(150deg,#fdeaf3,#fff)}
.meldung-box img{border-radius:20px}
.meldung-box .cta{margin-top:18px}
.fotostreifen{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}
.fotostreifen figure{margin:0}
.fotostreifen img{border-radius:18px;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 25%}
.fotostreifen figcaption{font-size:12px;color:var(--muted);margin-top:6px}

@media(max-width:820px){
  .meldung-box,.bild-rechts{grid-template-columns:1fr}
  .formate{grid-template-columns:1fr}
  .fakten th{width:40%}
}
@media(max-width:560px){
  .fotostreifen{grid-template-columns:1fr 1fr}
  .fotostreifen figure:last-child{display:none}
}

/* Texte in der weißen Box auf dem Verlauf (Kursseite) */
.newsbox p{color:var(--muted)}