/* =============================================================================
   Kosmetik- & Fußpflegeschule Barbara Weigel — Elite-Ausbildung Schweiz
   Gestaltungsgrundlage

   Vorbild: kosmetik-fusspflegeschule.de (Indigo #4d54a1, Orange #ffa858,
   Open Sans). Übernommen und veredelt: Indigo bleibt die Hausfarbe, das
   Orange wird zum warmen Handlungsakzent, Gold kommt NUR dort hinzu, wo die
   CIFA (Weltverband, Campus Schweiz) spricht.

   DREI REGELN
     1. Gold nie als Schrift auf hellem Grund — nur Linie, Rahmen oder
        Schrift auf Indigo.
     2. Orange ist der EINE Handlungsakzent (Knöpfe). Schrift darauf ist
        Indigo-tief, nicht Weiß (Kontrast).
     3. Keine Inline-Stile und keine Inline-Skripte: die Content-Security-
        Policy (.htaccess) erlaubt nur Dateien von dieser Domain.
   ========================================================================== */

:root{
  --indigo:#3B4190;          /* Hausfarbe (aus #4d54a1 vertieft) */
  --indigo-tief:#1F2356;     /* Fuß, dunkle Flächen, Schrift auf Orange */
  --indigo-mitte:#4D54A1;    /* Original-Ton der Schule */
  --indigo-hauch:#EEF0F9;    /* helle Flächen */
  --orange:#F7A25C;          /* Handlungsakzent */
  --orange-hell:#FFB878;
  --gold:#C9A13B;            /* CIFA / Elite — Linie, Rahmen */
  --gold-hell:#E7C884;       /* Gold als Schrift nur auf Indigo */
  --rot-ch:#DA291C;
  --papier:#FFFFFF;
  --grund:#F7F7FB;
  --tinte:#1D1F33;
  --tinte-leise:#565A75;
  --linie:#E3E5F0;

  --serif:"Iowan Old Style","Hoefler Text","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Open Sans","Helvetica Neue",Arial,sans-serif;

  --mass:min(1180px,100% - 2.5rem);
  --eng:min(780px,100% - 2.5rem);
  --rund:14px;
  --schatten:0 1px 2px rgba(31,35,86,.06),0 8px 28px rgba(31,35,86,.08);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}
body{margin:0;background:var(--grund);color:var(--tinte);font-family:var(--sans);font-size:17px;line-height:1.65;overflow-x:hidden}
img,video,svg{max-width:100%;height:auto;display:block}
a{color:var(--indigo)}
a:hover{color:var(--indigo-tief)}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.15;margin:0;color:var(--indigo-tief);text-wrap:balance}
h1{font-size:clamp(2.1rem,5vw,3.6rem);letter-spacing:-.01em}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem)}
h3{font-size:1.3rem}
p{margin:0 0 1rem}
.eng{width:var(--eng);margin-inline:auto}
.mass{width:var(--mass);margin-inline:auto}

.sprung{position:absolute;top:.5rem;left:.5rem;padding:.6rem 1rem;background:var(--indigo-tief);color:#fff;z-index:100;clip-path:inset(50%)}
.sprung:focus{clip-path:none}

/* ---------- Kopf ---------------------------------------------------------- */
.leiste{background:var(--indigo-tief);color:#DCDFF3;font-size:.86rem}
.leiste .mass{display:flex;gap:1.4rem;justify-content:space-between;align-items:center;min-height:38px;flex-wrap:wrap}
.leiste a{color:#fff;text-decoration:none}
.leiste a:hover{text-decoration:underline;color:#fff}
.leiste .kontaktwege{display:flex;gap:1.3rem;flex-wrap:wrap}
.leiste .ch{display:inline-flex;align-items:center;gap:.5rem;letter-spacing:.08em;text-transform:uppercase;font-size:.74rem;color:var(--gold-hell)}
.flagge{width:14px;height:14px;background:var(--rot-ch);position:relative;flex:none;border-radius:2px}
.flagge::before,.flagge::after{content:"";position:absolute;background:#fff}
.flagge::before{left:6px;top:3px;width:2px;height:8px}
.flagge::after{left:3px;top:6px;width:8px;height:2px}

.kopf-marke{background:#fff}
.kopf-marke .mass{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:1.4rem 0 1.2rem}
.kopf-marke .logo img{width:340px;height:auto}
.auszeichnungen{display:flex;align-items:center;gap:1.2rem}
.auszeichnungen p{margin:0;max-width:17rem;text-align:right;font-size:.86rem;line-height:1.4;color:var(--indigo-mitte);font-weight:600}
.auszeichnungen img{height:76px;width:auto}
.marke-klein img{width:36px;height:36px}
@media (max-width:900px){
  .auszeichnungen p{display:none}
  .auszeichnungen img{height:54px}
  .kopf-marke .logo img{width:250px}
}
@media (max-width:560px){
  .kopf-marke .mass{padding:1rem 0 .9rem;gap:1rem}
  .kopf-marke .logo img{width:200px}
  .auszeichnungen{gap:.5rem}
  .auszeichnungen img{height:42px}
}
.fuss .logo img{width:250px;height:auto;margin-bottom:1rem}
.kopf{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--linie)}
.kopf .mass{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:62px}
.marke{display:flex;align-items:center;gap:.8rem;text-decoration:none;color:var(--indigo-tief)}
.marke img{width:46px;height:46px}
.marke span{display:flex;flex-direction:column;line-height:1.1}
.marke b{font-family:var(--serif);font-style:italic;font-weight:600;font-size:1.45rem;color:var(--indigo)}
.marke small{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--tinte-leise);margin-top:.2rem}
.menue{display:flex;align-items:center;gap:.3rem}
.menue a{white-space:nowrap;padding:.55rem .8rem;border-radius:8px;text-decoration:none;color:var(--tinte);font-weight:500;font-size:.96rem}
.menue a:hover{background:var(--indigo-hauch);color:var(--indigo-tief)}
.menue a[aria-current="page"]{color:var(--indigo);box-shadow:inset 0 -2px 0 var(--indigo)}
.menue .knopf{margin-left:.6rem}
.menue-knopf{display:none;background:none;border:1px solid var(--linie);border-radius:10px;padding:.55rem .75rem;font:inherit;color:var(--indigo-tief);cursor:pointer}
.menue-knopf span{display:block;width:20px;height:2px;background:currentColor;margin:4px 0;transition:transform .2s}
@media (max-width:1100px){
  .menue-knopf{display:block}
  .menue{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;background:#fff;border-bottom:1px solid var(--linie);padding:.8rem 1.25rem 1.2rem;gap:.1rem;box-shadow:var(--schatten)}
  .menue[hidden]{display:none}
  .menue a{padding:.8rem .6rem}
  .menue .knopf{margin:.6rem 0 0;text-align:center}
  .leiste .ch{display:none}
}
@media (min-width:1101px){ .menue[hidden]{display:flex} }

/* ---------- Knöpfe -------------------------------------------------------- */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.8rem 1.4rem;border-radius:999px;background:var(--orange);color:var(--indigo-tief)!important;font-weight:700;text-decoration:none;border:0;transition:background .2s,transform .2s;box-shadow:0 6px 18px rgba(247,162,92,.35)}
.knopf:hover{background:var(--orange-hell);transform:translateY(-1px)}
.knopf.leise{background:transparent;color:#fff!important;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7)}
.knopf.leise:hover{background:rgba(255,255,255,.12)}
.knopf.umriss{background:transparent;color:var(--indigo)!important;box-shadow:inset 0 0 0 1.5px var(--indigo)}
.knopf.umriss:hover{background:var(--indigo-hauch)}

/* ---------- Held ---------------------------------------------------------- */
.held{position:relative;color:#fff;min-height:min(86vh,760px);display:grid;align-items:end;overflow:hidden;background:var(--indigo-tief)}
.held-bild,.held-bild img,.held-bild video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.held::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(31,35,86,.25) 0%,rgba(31,35,86,.35) 40%,rgba(22,24,60,.92) 100%)}
.held-inhalt{position:relative;z-index:2;padding:7rem 0 4rem}
.held h1{color:#fff;max-width:17ch}
.held h1 em{font-style:italic;color:var(--gold-hell)}
.held p.unter{font-size:clamp(1.05rem,1.8vw,1.3rem);max-width:56ch;color:#E9EBF8;margin:1.2rem 0 2rem}
.held .knoepfe{display:flex;gap:.8rem;flex-wrap:wrap}
.dachzeile{display:inline-flex;align-items:center;gap:.6rem;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--gold-hell);margin-bottom:1.1rem}
.dachzeile::before{content:"";width:34px;height:1px;background:var(--gold)}
.held .fakten-leiste{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid rgba(231,200,132,.35);font-size:.92rem;color:#DDE0F4}
.held .fakten-leiste b{color:#fff;font-weight:600}

.seitenkopf{background:linear-gradient(135deg,var(--indigo-tief),var(--indigo));color:#fff;padding:4.5rem 0 3.5rem;position:relative;overflow:hidden}
.seitenkopf::after{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;border:1px solid rgba(231,200,132,.28);border-radius:50%}
.seitenkopf h1{color:#fff}
.seitenkopf p{max-width:62ch;color:#E3E6F7;font-size:1.12rem;margin:1rem 0 0}
.seitenkopf.bild{padding:0;min-height:420px;display:grid;align-items:end}
.seitenkopf.bild .held-bild{position:absolute;inset:0}
.seitenkopf.bild::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(31,35,86,.2),rgba(22,24,60,.9))}
.seitenkopf.bild .mass{position:relative;z-index:2;padding:6rem 0 3rem}

/* ---------- Siegelband (Vertrauen) ---------------------------------------- */
.siegelband{background:#fff;border-bottom:1px solid var(--linie)}
.siegelband .mass{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;padding:1.6rem 0;align-items:center}
.siegel{display:flex;align-items:center;gap:.9rem;font-size:.86rem;line-height:1.35;color:var(--tinte-leise)}
.siegel img{height:46px;width:84px;object-fit:contain;object-position:left center;flex:none}
.siegel .flagge{width:20px;height:20px;margin-right:64px}
.siegel .flagge::before{left:8.5px;top:4px;width:3px;height:12px}
.siegel .flagge::after{left:4px;top:8.5px;width:12px;height:3px}
.siegel b{display:block;color:var(--indigo-tief);font-size:.95rem}
@media (max-width:900px){.siegelband .mass{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.siegelband .mass{grid-template-columns:1fr;gap:1rem}}
@media (max-width:600px){
  .leiste .mass{min-height:0;padding:.45rem 0;gap:.2rem}
  .leiste .kontaktwege{gap:.2rem 1rem;font-size:.8rem}
}

/* ---------- Abschnitte ---------------------------------------------------- */
.abschnitt{padding:clamp(3.5rem,7vw,6rem) 0}
.abschnitt.weiss{background:#fff}
.abschnitt.indigo{background:var(--indigo-tief);color:#E3E6F7}
.abschnitt.indigo h2,.abschnitt.indigo h3{color:#fff}
.abschnitt-kopf{max-width:720px;margin-bottom:2.6rem}
.abschnitt-kopf p{color:var(--tinte-leise);font-size:1.08rem;margin-top:1rem}
.abschnitt.indigo .abschnitt-kopf p{color:#C9CDEA}
.ueber{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--indigo-mitte);margin-bottom:.8rem;display:block}
.abschnitt.indigo .ueber{color:var(--gold-hell)}

.zwei{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.zwei.umgekehrt>:first-child{order:2}
@media (max-width:880px){.zwei{grid-template-columns:1fr}.zwei.umgekehrt>:first-child{order:0}}
.bildrahmen{border-radius:var(--rund);overflow:hidden;box-shadow:var(--schatten);position:relative}
.bildrahmen img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.bildrahmen.gold::after{content:"";position:absolute;inset:12px;border:1px solid rgba(231,200,132,.8);border-radius:8px;pointer-events:none}
figure{margin:0}
figcaption{font-size:.84rem;color:var(--tinte-leise);margin-top:.6rem}

/* Nutzen-Raster */
.raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem}
.karte{background:#fff;border:1px solid var(--linie);border-radius:var(--rund);padding:1.6rem;box-shadow:0 1px 2px rgba(31,35,86,.04)}
.abschnitt.weiss .karte{background:var(--grund)}
.karte h3{margin:.2rem 0 .5rem}
.karte p{margin:0;color:var(--tinte-leise);font-size:.97rem}
.symbol{width:44px;height:44px;border-radius:12px;background:var(--indigo-hauch);display:grid;place-items:center;margin-bottom:.9rem;color:var(--indigo)}
.symbol svg{width:24px;height:24px}
.abschnitt.indigo .karte{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
.abschnitt.indigo .karte p{color:#C9CDEA}
.abschnitt.indigo .symbol{background:rgba(231,200,132,.14);color:var(--gold-hell)}

/* Programm-Karten */
.programme{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1.4rem}
.programm{background:#fff;border-radius:var(--rund);overflow:hidden;box-shadow:var(--schatten);display:flex;flex-direction:column;border:1px solid var(--linie)}
.programm .kopfzeile{background:linear-gradient(135deg,var(--indigo-tief),var(--indigo));color:#fff;padding:1.4rem 1.5rem 1.3rem;position:relative}
.programm .kopfzeile::after{content:"";position:absolute;left:1.5rem;right:1.5rem;bottom:0;height:2px;background:linear-gradient(90deg,var(--gold),transparent)}
.programm .fach{font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--gold-hell);font-weight:700}
.programm h3{color:#fff;margin-top:.35rem;font-size:1.45rem}
.programm .rumpf{padding:1.3rem 1.5rem 1.5rem;display:flex;flex-direction:column;gap:1rem;flex:1}
.programm .rumpf p{margin:0;color:var(--tinte-leise);font-size:.97rem}
.programm dl{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1rem;margin:0;font-size:.92rem}
.programm dt{color:var(--tinte-leise)}
.programm dd{margin:0;font-weight:600;color:var(--indigo-tief)}
.programm .fussleiste{margin-top:auto;padding-top:.4rem}
.programm .fussleiste a{font-weight:700;text-decoration:none}
.programm .fussleiste a::after{content:" →"}

/* Leistungsliste (all-inclusive) */
.inklusive{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin:0;padding:0;list-style:none}
.inklusive li{display:flex;gap:.7rem;align-items:flex-start;background:#fff;border-radius:12px;padding:1rem 1.1rem;border:1px solid var(--linie);font-size:.96rem}
.inklusive li::before{content:"";flex:none;width:20px;height:20px;margin-top:.15rem;border-radius:50%;background:var(--indigo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}

/* Ablauf / Reise */
.ablauf{counter-reset:schritt;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1.2rem;list-style:none;margin:0;padding:0}
.ablauf li{counter-increment:schritt;position:relative;padding:1.4rem;border-radius:var(--rund);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}
.ablauf li::before{content:counter(schritt);display:grid;place-items:center;width:2.2rem;height:2.2rem;margin-bottom:.8rem;border-radius:50%;border:1px solid var(--gold);color:var(--gold-hell);font-family:var(--serif);font-size:1.1rem}
.ablauf b{display:block;color:#fff;font-size:1.05rem;margin-bottom:.3rem}
.ablauf span{color:#C9CDEA;font-size:.95rem}

/* Abschluss / Urkunden */
.urkunden{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
@media (max-width:760px){.urkunden{grid-template-columns:1fr}}
.urkunde{background:#fff;border-radius:var(--rund);padding:2rem 1.8rem;border:1px solid var(--linie);box-shadow:var(--schatten);position:relative}
.urkunde::before{content:"";position:absolute;inset:8px;border:1px solid var(--linie);border-radius:10px;pointer-events:none}
.urkunde.cifa::before{border-color:rgba(201,161,59,.55)}
.urkunde img{height:54px;width:auto;margin-bottom:1.2rem}
.urkunde h3{margin-bottom:.5rem}
.urkunde p{color:var(--tinte-leise);margin:0}

/* Zitat / Stimme der Schulleitung */
.stimme{display:grid;grid-template-columns:auto 1fr;gap:2rem;align-items:start}
.stimme blockquote{margin:0;font-family:var(--serif);font-size:clamp(1.25rem,2.4vw,1.6rem);line-height:1.45;color:var(--indigo-tief)}
.stimme cite{display:block;margin-top:1rem;font-family:var(--sans);font-style:normal;font-size:.95rem;color:var(--tinte-leise)}
.stimme cite b{color:var(--indigo-tief)}
.monogramm{width:84px;height:84px}
@media (max-width:620px){.stimme{grid-template-columns:1fr}}

/* Kennzahlen */
.zahlen{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:0}
.zahlen div{padding:1.2rem 0;border-top:2px solid var(--indigo)}
.zahlen dt{font-family:var(--serif);font-size:clamp(2rem,4vw,2.8rem);color:var(--indigo);line-height:1}
.zahlen dd{margin:.5rem 0 0;color:var(--tinte-leise);font-size:.95rem}
@media (max-width:760px){.zahlen{grid-template-columns:1fr 1fr}}

/* Galerie */
.galerie{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem}
.galerie figure{grid-column:span 4;border-radius:var(--rund);overflow:hidden;position:relative}
.galerie figure.breit{grid-column:span 8}
.galerie img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.galerie figure.breit img{aspect-ratio:auto;height:100%}
.galerie figcaption{position:absolute;left:0;right:0;bottom:0;margin:0;padding:1.6rem 1rem .8rem;background:linear-gradient(transparent,rgba(22,24,60,.85));color:#fff;font-size:.88rem}
@media (max-width:760px){.galerie figure,.galerie figure.breit{grid-column:span 12}}

/* Detail (Ausbildungsseite) */
.programm-detail{display:grid;grid-template-columns:1fr 330px;gap:2.5rem;align-items:start;padding:2.6rem 0;border-top:1px solid var(--linie)}
.programm-detail:first-of-type{border-top:0;padding-top:0}
.programm-detail h2{margin-bottom:.4rem}
.programm-detail .fach{font-size:.74rem;letter-spacing:.15em;text-transform:uppercase;color:var(--indigo-mitte);font-weight:700}
.programm-detail ul.inhalte{columns:2;column-gap:2rem;padding-left:1.1rem;margin:1rem 0 0;color:var(--tinte-leise)}
.programm-detail ul.inhalte li{break-inside:avoid;margin-bottom:.35rem}
.eckdaten{position:sticky;top:100px;background:#fff;border:1px solid var(--linie);border-radius:var(--rund);padding:1.4rem;box-shadow:var(--schatten)}
.eckdaten dl{margin:0 0 1.2rem;display:grid;gap:.8rem}
.eckdaten dt{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tinte-leise)}
.eckdaten dd{margin:.1rem 0 0;font-weight:600;color:var(--indigo-tief)}
.eckdaten .knopf{width:100%}
@media (max-width:880px){.programm-detail{grid-template-columns:1fr}.programm-detail ul.inhalte{columns:1}.eckdaten{position:static}}

/* Team */
.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.2rem}
.person{background:#fff;border:1px solid var(--linie);border-radius:var(--rund);padding:1.5rem}
.person .initialen{width:56px;height:56px;border-radius:50%;background:var(--indigo-hauch);color:var(--indigo);display:grid;place-items:center;font-family:var(--serif);font-size:1.3rem;font-weight:600;margin-bottom:.9rem}
.person h3{font-size:1.2rem}
.person .rolle{font-size:.85rem;color:var(--indigo-mitte);font-weight:600;margin:.2rem 0 .7rem}
.person ul{margin:0;padding-left:1.05rem;color:var(--tinte-leise);font-size:.93rem}

/* CIFA-Band */
.cifa-band{background:linear-gradient(120deg,var(--indigo-tief) 0%,#2A2E6E 100%);color:#E3E6F7;border-radius:var(--rund);padding:clamp(2rem,4vw,3rem);display:grid;grid-template-columns:auto 1fr;gap:2.5rem;align-items:center;position:relative;overflow:hidden}
.cifa-band::before{content:"";position:absolute;inset:10px;border:1px solid rgba(231,200,132,.45);border-radius:10px;pointer-events:none}
.cifa-band .logo-flaeche{background:#fff;border-radius:12px;padding:1.2rem 1.5rem}
.cifa-band .logo-flaeche img{width:180px}
.cifa-band h2{color:#fff}
.cifa-band h2 em{color:var(--gold-hell);font-style:italic}
.cifa-band p{margin:.8rem 0 0;color:#C9CDEA}
@media (max-width:720px){.cifa-band{grid-template-columns:1fr}}

/* Kontakt */
.kontakt-raster{display:grid;grid-template-columns:1.2fr 1fr;gap:2rem;align-items:start}
@media (max-width:860px){.kontakt-raster{grid-template-columns:1fr}}
.kontaktweg{display:flex;gap:1rem;align-items:flex-start;padding:1.2rem 0;border-bottom:1px solid var(--linie)}
.kontaktweg:last-child{border-bottom:0}
.kontaktweg .symbol{margin:0}
.kontaktweg b{display:block;color:var(--indigo-tief)}
.kontaktweg a{font-size:1.1rem;font-weight:600;text-decoration:none}
.checkliste{margin:0;padding-left:1.1rem;color:var(--tinte-leise)}
.checkliste li{margin-bottom:.4rem}

/* Aufruf */
.aufruf{text-align:center}
.aufruf h2{max-width:24ch;margin-inline:auto}
.aufruf p{max-width:58ch;margin:1rem auto 2rem;color:var(--tinte-leise);font-size:1.08rem}
.aufruf .knoepfe{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}

/* Rechtstexte */
.recht h2{font-size:1.35rem;margin:2.2rem 0 .6rem}
.recht p,.recht li{color:var(--tinte-leise)}
.recht address{font-style:normal;color:var(--tinte-leise);margin-bottom:1rem}

/* ---------- Fuß ----------------------------------------------------------- */
.fuss{background:var(--indigo-tief);color:#C9CDEA;padding:4rem 0 2rem;font-size:.94rem}
.fuss .mass{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem}
.fuss h2{font-family:var(--sans);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-hell);margin-bottom:1rem}
.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.fuss a{color:#fff;text-decoration:none}
.fuss a:hover{text-decoration:underline;color:#fff}
.fuss .marke b{color:#fff}
.fuss .marke small{color:#AEB3DA}
.fuss .zeichen{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;margin-top:1.4rem}
.fuss .zeichen span{background:#fff;border-radius:8px;padding:.45rem .6rem;display:inline-flex}
.fuss .zeichen img{height:34px;width:auto}
.fuss .unten{grid-column:1/-1;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.12);padding-top:1.5rem;margin-top:1rem;font-size:.84rem;color:#9EA3CF}
@media (max-width:860px){.fuss .mass{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.fuss .mass{grid-template-columns:1fr}}

/* Einblenden beim Scrollen (nur mit JS aktiv) */
.einblenden{transition:opacity .7s ease,transform .7s ease}
.einblenden.warten{opacity:0;transform:translateY(18px)}

/* ---------- Startseite im Stil der Schule (26.09.2026) ------------------- */
.einstieg{background:linear-gradient(180deg,var(--indigo-hauch) 0%,#fff 100%);padding:clamp(3rem,6vw,5rem) 0;border-top:1px solid var(--linie)}
.einstieg-raster{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.einstieg h1{font-size:clamp(1.9rem,3.8vw,2.9rem);color:var(--indigo)}
.einstieg h1 em{font-style:italic;color:var(--indigo-tief);background:linear-gradient(transparent 70%,rgba(201,161,59,.35) 70%)}
.einstieg .unter{font-size:1.1rem;color:var(--tinte-leise);margin:1.2rem 0 1.8rem;max-width:58ch}
.einstieg .knoepfe{display:flex;gap:.8rem;flex-wrap:wrap}
@media (max-width:900px){.einstieg-raster{grid-template-columns:1fr}}
.film-karte{background:#fff;border-radius:var(--rund);padding:10px;box-shadow:var(--schatten);border:1px solid var(--linie)}
.film{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:16/10;background:var(--indigo-tief)}
.film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.film::after{content:"";position:absolute;inset:10px;border:1px solid rgba(231,200,132,.7);border-radius:6px;pointer-events:none}
.film-karte figcaption{display:flex;align-items:center;gap:.8rem;margin:0;padding:.9rem .6rem .4rem;font-size:.86rem;color:var(--tinte-leise);line-height:1.35}
.film-karte figcaption b{display:block;color:var(--indigo-tief);font-size:.95rem}
.film-karte figcaption img{margin-left:auto;height:28px;width:auto}
.film-karte .flagge{width:18px;height:18px}
.film-karte .flagge::before{left:7.5px;top:3.5px;width:3px;height:11px}
.film-karte .flagge::after{left:3.5px;top:7.5px;width:11px;height:3px}

.seminargruppe+.seminargruppe{margin-top:3.5rem}
.seminar-titel{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;border-bottom:2px solid var(--indigo);padding-bottom:.7rem;margin-bottom:1.5rem}
.seminar-titel h2{color:var(--indigo);font-size:clamp(1.5rem,2.8vw,2rem)}
.seminar-titel a{font-weight:700;text-decoration:none;white-space:nowrap}
.seminargruppe .programme{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.chips{list-style:none;margin:1.3rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.chips li{padding:.4rem .9rem;border-radius:999px;background:var(--indigo-hauch);color:var(--indigo-tief);font-size:.9rem;font-weight:500}
.haken{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.haken li{position:relative;padding-left:1.8rem;color:var(--tinte-leise)}
.haken li::before{content:"";position:absolute;left:0;top:.3rem;width:18px;height:18px;border-radius:50%;background:var(--indigo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.bildrahmen .im-bild{position:absolute;left:0;right:0;bottom:0;margin:0;padding:2rem 1.2rem 1rem;background:linear-gradient(transparent,rgba(22,24,60,.85));color:#fff;font-size:.88rem}
.weiter{margin-top:2rem}

/* Herstellerhinweis csl atthis AG (Familien-Baustein cctest/vorlagen/csl-atthis-signum) */
.fuss .auctor{grid-column:1/-1;margin:0;text-align:center}
.fuss .auctor a:hover{text-decoration:none}
.csl-atthis-signum {
  display: inline-flex; align-items: center; gap: 6px;
  font: 400 11px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: 0.02em;
  text-transform: none; color: inherit; text-decoration: none; border: 0;
}
.csl-atthis-signum span { opacity: 0.6; transition: opacity 0.2s; }
.csl-atthis-signum svg { display: block; flex: none; opacity: 0.9; }
.csl-atthis-signum:hover span, .csl-atthis-signum:focus-visible span { opacity: 0.95; }

/* ---------- Termine & Preise (30.09.2026) --------------------------------- */
.sprungleiste{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.8rem}
.sprungleiste a{padding:.45rem 1rem;border-radius:999px;background:rgba(255,255,255,.12);color:#fff;text-decoration:none;font-size:.92rem;font-weight:600;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.sprungleiste a:hover{background:rgba(255,255,255,.22);color:#fff}
.terminort+.terminort{margin-top:3.2rem}
.terminort-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;border-bottom:2px solid var(--indigo);padding-bottom:.7rem;margin-bottom:.4rem}
.terminort-kopf h2{color:var(--indigo);font-size:clamp(1.5rem,2.8vw,2rem)}
.terminort-kopf p{margin:0;color:var(--tinte-leise);font-size:.92rem}
.terminliste{list-style:none;margin:0;padding:0}
.termin{display:grid;grid-template-columns:11rem 1fr auto auto;gap:1rem;align-items:center;padding:1rem .2rem;border-bottom:1px solid var(--linie)}
.termin[hidden]{display:none}
.termin-datum{font-family:var(--serif);font-size:1.1rem;color:var(--indigo-tief);font-weight:600}
.termin-name b{display:block;color:var(--indigo-tief)}
.termin-name small{color:var(--tinte-leise);font-size:.86rem}
.termin-status{display:inline-block;margin:.25rem 0 .1rem;padding:.12rem .6rem;border-radius:999px;background:#FFF1E4;color:#8A4A12;font-size:.78rem;font-weight:700}
.termin-status.voll{background:#F1F1F4;color:var(--tinte-leise)}
.termin-preis{font-weight:700;color:var(--indigo-tief);white-space:nowrap}
.termin-knopf{display:inline-block;padding:.5rem 1rem;border-radius:999px;background:var(--orange);color:var(--indigo-tief);font-weight:700;font-size:.9rem;text-decoration:none;white-space:nowrap}
.termin-knopf:hover{background:var(--orange-hell);color:var(--indigo-tief)}
.termin-knopf.aus{background:#F1F1F4;color:var(--tinte-leise)}
.termin.voll .termin-datum,.termin.voll .termin-name b{color:var(--tinte-leise)}
.termin-leer{color:var(--tinte-leise);padding:1rem 0;margin:0}
@media (max-width:760px){
  .termin{grid-template-columns:1fr auto;gap:.3rem 1rem}
  .termin-datum{grid-column:1/-1}
  .termin-knopf{grid-column:1/-1;justify-self:start;margin-top:.4rem}
}
.preisblock+.preisblock{margin-top:2.5rem}
.preisblock h3{color:var(--indigo);margin-bottom:.8rem}
.preistabelle{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--rund);overflow:hidden;box-shadow:0 1px 2px rgba(31,35,86,.05);border:1px solid var(--linie)}
.preistabelle th,.preistabelle td{text-align:left;padding:.85rem 1rem;border-bottom:1px solid var(--linie);vertical-align:top;font-size:.95rem}
.preistabelle thead th{background:var(--indigo-hauch);color:var(--indigo-tief);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
.preistabelle tbody th{font-weight:600;color:var(--indigo-tief)}
.preistabelle small{display:block;color:var(--tinte-leise);font-weight:400;font-size:.84rem;margin-top:.15rem}
.preistabelle td.preis{font-weight:700;color:var(--indigo-tief);width:30%}
.preistabelle tbody th{width:32%}
.preistabelle tr:last-child>*{border-bottom:0}
@media (max-width:700px){
  .preistabelle thead{display:none}
  .preistabelle tr{display:block;padding:.6rem 0;border-bottom:1px solid var(--linie)}
  .preistabelle th,.preistabelle td{display:block;border:0;padding:.2rem 1rem}
  .preistabelle td.preis,.preistabelle tbody th{width:auto}
}