@import url('schrift/firasans.css');

/* ============================================================
   Heilpraktikerverband Bayern e. V. - Prototyp
   Gestaltungsgrundlage: Jahresprogramm der Akademie (Print).
   Schrift Fira Sans, lokal eingebunden. Keine externen Dienste.
   ============================================================ */

:root{
  --papier:#fbfaf5;
  --papier-tief:#f4f2e9;
  --karte:#ffffff;
  --tinte:#2b342e;
  --tinte-weich:#5a675e;
  --tinte-leise:#7d887f;
  --salbei:#93a691;
  --salbei-tief:#485a4e;
  --salbei-nacht:#32423a;
  --lind:#c3d68e;
  --lind-blass:#eef2e0;
  --gold:#e8c979;
  --gold-tief:#96700f;
  --linie:#e2e2d6;
  --linie-stark:#cfcfbf;
  --auf-dunkel:#eef1e8;
  --auf-dunkel-weich:#b9c6b4;
  --r:2px;
  --sans:'Fira Sans','Segoe UI',system-ui,sans-serif;
  --breite:1200px;
  --schatten:0 1px 2px rgba(43,52,46,.05), 0 8px 28px rgba(43,52,46,.07);
}

@media (prefers-color-scheme:dark){
  :root{
    --papier:#1c231f;
    --papier-tief:#18201b;
    --karte:#232c26;
    --tinte:#e7ece5;
    --tinte-weich:#a9b7a8;
    --tinte-leise:#8b9a8b;
    --salbei-tief:#7fa084;
    --salbei-nacht:#141a16;
    --lind-blass:#222b23;
    --gold-tief:#e8c979;
    --linie:#333e36;
    --linie-stark:#414d44;
    --schatten:0 1px 2px rgba(0,0,0,.3), 0 8px 28px rgba(0,0,0,.35);
  }
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  background:var(--papier);
  color:var(--tinte);
  line-height:1.65;
  font-size:16.5px;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-weight:600;line-height:1.16;letter-spacing:-.012em;text-wrap:balance}
h1{font-weight:700}
p{text-wrap:pretty}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:2px solid var(--gold-tief);outline-offset:3px;border-radius:var(--r)}

.wrap{max-width:var(--breite);margin:0 auto;padding:0 28px;width:100%}
.eng{max-width:820px}

/* --- Print-Elemente --------------------------------------- */
.ci-balken{display:flex;height:7px}
.ci-balken span:nth-child(1){flex:2.2;background:var(--salbei)}
.ci-balken span:nth-child(2){flex:1.4;background:var(--lind)}
.ci-balken span:nth-child(3){flex:1;background:var(--gold)}
.punktlinie{border:0;border-top:3px dotted var(--salbei);width:112px;margin-bottom:24px}
.akzent{
  font-style:italic;font-weight:600;color:var(--gold-tief);
  font-size:1.02rem;margin-bottom:10px;display:block;letter-spacing:0;
}

/* --- Knöpfe ------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  font-weight:600;font-size:.95rem;padding:13px 26px;border-radius:var(--r);
  border:1px solid transparent;cursor:pointer;font-family:inherit;
  transition:background .2s ease, border-color .2s ease, transform .12s ease, color .2s ease;
}
.btn svg{width:17px;height:17px;stroke-width:2;flex:none}
.btn:active{transform:translateY(1px)}
.btn.primaer{background:var(--salbei-tief);color:#f6f8f2}
.btn.primaer:hover{background:var(--salbei-nacht)}
.btn.gold{background:var(--gold);color:#3a2c08}
.btn.gold:hover{background:#f2d68d}
.btn.leise{border-color:var(--salbei-tief);color:var(--salbei-tief);background:transparent}
.btn.leise:hover{background:var(--lind-blass)}
.btn.hell{border-color:rgba(255,255,255,.55);color:#fff;background:rgba(255,255,255,.06)}
.btn.hell:hover{background:rgba(255,255,255,.16);border-color:#fff}
.mehr{
  display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:.9rem;
  color:var(--gold-tief);border-bottom:1px solid currentColor;padding-bottom:2px;
  transition:gap .18s ease;
}
.mehr svg{width:15px;height:15px;stroke-width:2}
.mehr:hover{gap:12px}

/* --- Kopfzeile --------------------------------------------- */
header{
  background:color-mix(in srgb, var(--papier) 88%, transparent);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--linie);
  position:sticky;top:0;z-index:50;
}
.nav{display:flex;align-items:center;gap:28px;height:70px}
.marke{margin-right:auto;display:flex;align-items:center;gap:12px;line-height:1.2}
.marke img{height:40px;width:auto}
.marke b{font-weight:700;font-size:1rem;display:block;letter-spacing:-.01em}
.marke small{font-size:.68rem;color:var(--tinte-weich);letter-spacing:.01em}
.nav .p{
  font-size:.93rem;font-weight:500;color:var(--tinte-weich);
  padding:6px 0;border-bottom:2px solid transparent;transition:color .18s,border-color .18s;
}
.nav .p:hover,.nav .p[aria-current]{color:var(--tinte);border-color:var(--gold)}
.nav .btn{padding:10px 18px;font-size:.9rem}
.burger{
  display:none;background:none;border:1px solid var(--linie-stark);border-radius:var(--r);
  padding:8px;cursor:pointer;color:var(--tinte);
}
.burger svg{width:22px;height:22px;stroke-width:1.8;display:block}

/* --- Abschnitte -------------------------------------------- */
section{position:relative}
.pol{padding:96px 0}
.pol-eng{padding:72px 0}
/* Abschnittskopf. Vorher begrenzte ein einziges max-width von 34em sowohl
   Ueberschrift als auch Einleitung, dadurch nutzte die Einleitung nur rund
   die Haelfte der Inhaltsbreite. Jetzt getrennt: die Ueberschrift bleibt
   kompakt, die Einleitung nutzt die volle Inhaltsbreite (Michaels Ansage).
   Zum Ausgleich fuer die laengeren Zeilen etwas mehr Durchschuss. */
.kopfzeile{max-width:none;margin-bottom:44px}
.kopfzeile h2{font-size:clamp(1.75rem,3.1vw,2.25rem);margin-bottom:14px;max-width:19em}
.kopfzeile p{color:var(--tinte-weich);font-size:1.06rem;line-height:1.72}

/* --- Held ---------------------------------------------------
   Das Münchenpanorama läuft von hellem Dunsthimmel oben zu dunklen
   Baumkronen unten. Die Gestaltung folgt dem Bild: dunkle Schrift auf
   dem hellen Himmel, die dunkle Säulenleiste sitzt auf den Kronen.
   ------------------------------------------------------------ */
.hero{
  position:relative;min-height:min(76dvh,640px);
  display:flex;flex-direction:column;justify-content:flex-end;
  color:var(--tinte);isolation:isolate;background:var(--papier);
}
.hero .bg{
  position:absolute;inset:0;z-index:-2;
  background:url('bilder/muenchen-panorama.jpg') center bottom/cover no-repeat;
}
.hero .schleier{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(96deg, rgba(251,250,245,.97) 0%, rgba(251,250,245,.90) 30%, rgba(251,250,245,.55) 56%, rgba(251,250,245,0) 78%),
    linear-gradient(to bottom, rgba(251,250,245,.72) 0%, rgba(251,250,245,0) 34%);
}
.hero .inhalt{padding:78px 28px 56px}
.hero .akzent{color:var(--gold-tief)}
.hero h1{font-size:clamp(2.05rem,4.3vw,3.25rem);max-width:15em;margin-bottom:16px}
.hero .sub{font-size:clamp(1rem,1.5vw,1.14rem);color:var(--tinte-weich);max-width:31em;margin-bottom:32px}
.hero .aktionen{display:flex;gap:13px;flex-wrap:wrap}
.hero .btn.hell{border-color:var(--salbei-tief);color:var(--salbei-tief);background:rgba(251,250,245,.72)}
.hero .btn.hell:hover{background:var(--lind-blass);border-color:var(--salbei-nacht)}

@media (prefers-color-scheme:dark){
  .hero{color:var(--tinte)}
  .hero .schleier{
    background:
      linear-gradient(96deg, rgba(20,26,22,.95) 0%, rgba(20,26,22,.88) 30%, rgba(20,26,22,.58) 56%, rgba(20,26,22,.15) 78%),
      linear-gradient(to bottom, rgba(20,26,22,.72) 0%, rgba(20,26,22,.10) 40%);
  }
  .hero .akzent{color:var(--gold)}
  .hero .btn.hell{background:rgba(20,26,22,.5);border-color:var(--salbei-tief);color:var(--tinte)}
}

.saeulenleiste{background:rgba(24,32,25,.82);backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.16)}
.saeulenleiste .wrap{display:grid;grid-template-columns:repeat(3,1fr)}
.saeulenleiste a{padding:20px 26px;border-left:1px solid rgba(255,255,255,.13);transition:background .2s}
.saeulenleiste a:first-child{border-left:0;padding-left:0}
.saeulenleiste a:hover{background:rgba(255,255,255,.08)}
.saeulenleiste b{display:flex;align-items:center;gap:9px;font-size:1rem;color:#fff}
.saeulenleiste b i{width:10px;height:10px;border-radius:50%;flex:none}
.saeulenleiste a:nth-child(1) b i{background:var(--gold)}
.saeulenleiste a:nth-child(2) b i{background:var(--lind)}
.saeulenleiste a:nth-child(3) b i{background:var(--salbei)}
.saeulenleiste small{color:#b3c2b0;font-size:.82rem;display:block;margin-top:2px}

/* --- Nächster Termin (Band) --------------------------------- */
.terminband{background:var(--salbei-nacht);color:var(--auf-dunkel);padding:26px 0}
.terminband .wrap{display:flex;align-items:center;gap:36px;flex-wrap:wrap}
.terminband .datum{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:1px solid rgba(232,201,121,.45);border-radius:var(--r);
  padding:10px 18px;flex:none;line-height:1.1;
}
.terminband .datum b{font-size:1.5rem;color:var(--gold);font-weight:700}
.terminband .datum small{font-size:.74rem;color:var(--auf-dunkel-weich);letter-spacing:.06em}
.terminband .txt{flex:1;min-width:230px}
.terminband .kicker{font-style:italic;font-weight:600;color:var(--gold);font-size:.92rem}
.terminband h2{font-size:1.32rem;margin:2px 0 3px}
.terminband p{font-size:.92rem;color:var(--auf-dunkel-weich)}
.terminband .mehr{color:var(--gold)}

/* --- Suche -------------------------------------------------- */
.suche{background:var(--lind-blass);border-block:1px solid var(--linie)}
.suche .wrap{max-width:900px}
.suche .kopfzeile{max-width:none;margin-bottom:32px}
.suchform{display:grid;grid-template-columns:1.25fr 1.25fr .8fr auto;gap:10px;align-items:end}
.feldgruppe{display:flex;flex-direction:column;gap:6px}
.feldgruppe label{font-size:.82rem;font-weight:600;color:var(--tinte-weich)}
.feld{
  padding:14px 16px;border:1px solid var(--linie-stark);border-radius:var(--r);
  background:var(--karte);font:inherit;font-size:.97rem;color:var(--tinte);width:100%;
}
.feld::placeholder{color:var(--tinte-leise)}
.feld:focus{outline:2px solid var(--salbei-tief);outline-offset:0;border-color:var(--salbei-tief)}
.suchform .btn{height:50px;justify-content:center}
.suchhinweis{margin-top:18px;font-size:.88rem;color:var(--tinte-weich);display:flex;align-items:center;gap:8px}
.suchhinweis svg{width:16px;height:16px;stroke-width:2;flex:none;color:var(--salbei-tief)}

/* --- Drei Säulen -------------------------------------------- */
.saeulen .wrap{display:grid;grid-template-columns:.82fr 1.35fr;gap:76px;align-items:center}
.kreise{position:relative;aspect-ratio:1/.94;max-width:400px;width:100%}
.kreis{position:absolute;border-radius:50%;width:62%;aspect-ratio:1;mix-blend-mode:multiply}
.kreis.gold{background:var(--gold);top:0;left:19%}
.kreis.salbei{background:var(--salbei);bottom:0;left:0}
.kreis.lind{background:var(--lind);bottom:0;right:0}
@media (prefers-color-scheme:dark){.kreis{mix-blend-mode:screen;opacity:.62}}
.zeile{display:grid;gap:7px;padding:26px 0;border-top:1px solid var(--linie)}
.zeile:last-child{border-bottom:1px solid var(--linie)}
.zeile h3{font-size:1.2rem;display:flex;align-items:center;gap:11px}
/* Farbpunkt der Zeilen. Vorher ueber nth-of-type geloest, das zaehlt aber
   alle div-Geschwister mit. Stand eine Kopfzeile davor, verrutschte die
   Zaehlung und die hinteren Zeilen bekamen gar keinen Punkt. Jetzt gilt eine
   Grundfarbe (nie unsichtbar) plus ein Dreierwechsel innerhalb von .zeilen. */
.zeile h3 i{width:11px;height:11px;border-radius:50%;flex:none;background:var(--salbei)}
.zeilen .zeile:nth-of-type(3n+1) h3 i{background:var(--gold)}
.zeilen .zeile:nth-of-type(3n+2) h3 i{background:var(--lind)}
.zeilen .zeile:nth-of-type(3n)   h3 i{background:var(--salbei)}
.zeile p{color:var(--tinte-weich);font-size:.95rem}
.zeile .mehr{justify-self:start;margin-top:3px}

/* --- Aktuelles ---------------------------------------------- */
.aktuelles{background:var(--papier-tief);border-block:1px solid var(--linie)}
.news{display:grid;grid-template-columns:1.55fr 1fr 1fr;gap:26px}
.karte{
  background:var(--karte);border:1px solid var(--linie);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .22s cubic-bezier(.16,1,.3,1), box-shadow .22s ease;
}
.karte:hover{transform:translateY(-3px);box-shadow:var(--schatten)}
.karte .bild{aspect-ratio:16/9;overflow:hidden;background:var(--lind-blass)}
.karte .bild img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.karte:hover .bild img{transform:scale(1.035)}
.karte .txt{padding:22px 24px 24px;display:flex;flex-direction:column;gap:9px;flex:1}
.karte .wann{font-size:.79rem;font-weight:600;color:var(--tinte-leise);letter-spacing:.03em}
.karte h3{font-size:1.1rem}
.karte.gross h3{font-size:1.45rem}
.karte p{font-size:.92rem;color:var(--tinte-weich);flex:1}
.karte .mehr{align-self:start;margin-top:4px}
.karte.ton{background:var(--salbei-tief);border-color:var(--salbei-tief);color:var(--auf-dunkel)}
.karte.ton .wann{color:var(--auf-dunkel-weich)}
.karte.ton p{color:#cad6c5}
.karte.ton .mehr{color:var(--gold)}

/* --- Mitgliedschaft ------------------------------------------ */
.mitglied{background:var(--salbei-tief);color:var(--auf-dunkel)}
@media (prefers-color-scheme:dark){.mitglied{background:#1f2a22;border-block:1px solid var(--linie)}}
.mitglied .wrap{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.mitglied .akzent{color:var(--gold)}
.mitglied h2{font-size:clamp(1.75rem,3.1vw,2.25rem);margin-bottom:16px}
.mitglied .txt{color:#cbd7c5;margin-bottom:28px;max-width:32em}
/* Vorteilsliste. Grundfassung fuer helle Flaechen, Umkehrung im dunklen
   Mitgliedschafts-Abschnitt. Vorher war nur die dunkle Fassung da, dadurch
   stand die Liste auf hellem Grund weiss auf weiss. */
.vorteile{display:grid;gap:0}
.vorteile li{
  list-style:none;display:grid;grid-template-columns:auto 1fr;gap:14px;
  padding:15px 0;border-top:1px solid var(--linie);align-items:start;
}
.vorteile li:last-child{border-bottom:1px solid var(--linie)}
.vorteile svg{width:19px;height:19px;stroke-width:1.7;color:var(--gold-tief);margin-top:2px}
.vorteile b{display:block;font-weight:600;font-size:.99rem;color:var(--tinte)}
.vorteile span{font-size:.88rem;color:var(--tinte-weich)}

.mitglied .vorteile li{border-top-color:rgba(255,255,255,.15)}
.mitglied .vorteile li:last-child{border-bottom-color:rgba(255,255,255,.15)}
.mitglied .vorteile svg{color:var(--gold)}
.mitglied .vorteile b{color:#fff}
.mitglied .vorteile span{color:#bbc9b6}
.leitbild{border-left:3px dotted var(--gold);padding-left:26px;margin-top:34px}
.leitbild p{font-size:1.18rem;font-style:italic;font-weight:500;line-height:1.5;margin-bottom:12px;color:#fff}
.leitbild cite{font-style:normal;font-size:.86rem;color:#b5c4b0}

/* --- Fußzeile ------------------------------------------------ */
footer{background:var(--salbei-nacht);color:#a9bca5;padding:64px 0 34px;font-size:.92rem}
@media (prefers-color-scheme:dark){footer{border-top:1px solid var(--linie)}}
footer .wrap{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:44px}
footer b{color:var(--auf-dunkel);display:block;margin-bottom:14px;font-size:1rem}
footer a{display:block;padding:3.5px 0;transition:color .18s}
footer a:hover{color:#fff}
footer .kontakt{line-height:1.85}
.rechtlich{
  border-top:1px solid rgba(255,255,255,.14);margin-top:44px;padding-top:22px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 24px;font-size:.82rem;
}
/* Impressum, Datenschutz und Barrierefreiheit gehoeren in eine Zeile.
   Aber nur die Linkgruppe: Die Copyright-Zeile ist je nach Auftritt laenger
   und wuerde mit nowrap auf schmalen Geraeten aus dem Bild laufen. */
.rechtlich span{white-space:normal}
.rechtlich span:last-child{white-space:nowrap}
@media (max-width:440px){ .rechtlich span:last-child{white-space:normal} }
.rechtlich a{display:inline}

/* --- Demo-Stempel -------------------------------------------- */
.stempel{
  position:fixed;bottom:0;left:0;right:0;z-index:80;
  background:rgba(43,52,46,.94);color:#f0f2ea;font-size:.8rem;
  padding:9px 20px;display:flex;gap:14px;justify-content:center;align-items:center;
  flex-wrap:wrap;text-align:center;backdrop-filter:blur(6px);
}
.stempel b{color:var(--gold);font-weight:600}
body{padding-bottom:44px}

/* --- Sanftes Einblenden -------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  .hero .akzent,.hero h1,.hero .sub,.hero .aktionen{animation:auf .85s cubic-bezier(.16,1,.3,1) both}
  .hero h1{animation-delay:.06s}
  .hero .sub{animation-delay:.14s}
  .hero .aktionen{animation-delay:.22s}
  @keyframes auf{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
  .zeigen{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
  .zeigen.da{opacity:1;transform:none}
}

/* ============================================================
   Navigation: eigener Umschaltpunkt bei 1000 px.
   Grund: Logo, Verbandsname, fuenf Menuepunkte und der
   Mitgliederbereich-Knopf brauchen zusammen rund 1000 px. Vorher
   griff das Klappmenue erst bei 760 px, dadurch lief der Knopf
   zwischen 761 und 999 px aus dem Bild. Genau dort liegen Tablets
   im Hochformat und kleine Notebooks.
   ============================================================ */
@media (max-width:1000px){
  header .wrap{position:relative}
  .nav{gap:14px}
  .marke small{display:none}
  .nav .p,.nav .btn{display:none}
  .burger{display:block;position:absolute;right:28px;top:11px}
  .nav.offen{height:auto;flex-wrap:wrap;padding-bottom:18px;align-items:flex-start}
  .nav.offen .p,.nav.offen .btn{display:flex;width:100%}
  .nav.offen .p{
    padding:13px 0;border-bottom:1px solid var(--linie);border-top:0;
    font-size:1.02rem;color:var(--tinte);
  }
  .nav.offen .btn{margin-top:14px;justify-content:center}
  .nav.offen .marke{width:calc(100% - 56px)}
}

/* ============================================================
   Mobil. Bewusst durchgearbeitet, nicht nur umgebrochen.
   ============================================================ */
@media (max-width:1000px){
  .saeulen .wrap{grid-template-columns:1fr;gap:48px}
  .kreise{max-width:290px;margin:0 auto}
  .mitglied .wrap{grid-template-columns:1fr;gap:48px}
  .news{grid-template-columns:1fr 1fr}
  .karte.gross{grid-column:1/-1}
  .karte.gross .bild{aspect-ratio:21/9}
  footer .wrap{grid-template-columns:1fr 1fr;gap:34px}
}

@media (max-width:760px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  .pol{padding:64px 0}
  .pol-eng{padding:52px 0}

  .marke img{height:34px}
  .marke b{font-size:.9rem}
  .nav{height:62px}
  .burger{right:20px}

  /* Held mobil: Panorama wird zum eigenen Bildstreifen unter dem Text.
     Ein 3,4:1 breites Bild in einen hochkant-Ausschnitt zu zwängen,
     würde nur einen sinnlosen Streifen Himmel zeigen. */
  .hero{min-height:auto;display:flex;flex-direction:column;background:var(--papier)}
  .hero .inhalt{order:1;padding:44px 20px 34px;position:relative;z-index:1}
  .hero .bg{
    order:2;position:static;z-index:0;width:100%;height:190px;
    background-position:center 62%;
  }
  .hero .schleier{display:none}
  .hero .saeulenleiste{order:3}
  .hero h1{font-size:1.72rem;max-width:none;line-height:1.2}
  .hero .sub{font-size:1rem;margin-bottom:26px}
  .hero .aktionen{gap:10px}
  .hero .aktionen .btn{flex:1;justify-content:center;min-width:0}
  .saeulenleiste{background:var(--salbei-nacht)}
  .saeulenleiste .wrap{grid-template-columns:1fr;padding:0 20px}
  .saeulenleiste a{border-left:0;border-top:1px solid rgba(255,255,255,.13);padding:14px 0}
  .saeulenleiste a:first-child{border-top:0;padding-left:0}

  .terminband .wrap{gap:18px}
  .terminband .datum{padding:8px 14px}
  .terminband .datum b{font-size:1.25rem}

  .suchform{grid-template-columns:1fr;gap:14px}
  .suchform .btn{width:100%}

  .news{grid-template-columns:1fr;gap:20px}
  .karte.gross .bild{aspect-ratio:16/9}
  .karte.gross h3{font-size:1.24rem}

  .leitbild{padding-left:20px;margin-top:26px}
  .leitbild p{font-size:1.06rem}

  footer{padding:48px 0 30px}
  footer .wrap{grid-template-columns:1fr;gap:28px}
  .rechtlich{flex-direction:column;gap:8px}
  .stempel{font-size:.74rem;padding:8px 14px;gap:8px}
}

@media (max-width:380px){
  .hero h1{font-size:1.54rem}
  .hero .aktionen .btn{min-width:0;width:100%}
}

/* ============================================================
   Klickdemo-Kennzeichnung
   ============================================================ */
.demoband{
  background:repeating-linear-gradient(135deg,#3c3c35 0 13px,#2d2d28 13px 26px);
  color:#f2f1e9;font-size:.76rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;padding:9px 0;
}
.demoband .wrap{display:flex;gap:12px;align-items:center;justify-content:center;text-align:center;flex-wrap:wrap}
.demoband svg{width:15px;height:15px;stroke-width:2;flex:none;color:#e8c979}

/* ============================================================
   Gemeinsame Bausteine der Unterseiten
   ============================================================ */
.seitenkopf{background:var(--papier-tief);border-bottom:1px solid var(--linie);padding:56px 0 46px}
.seitenkopf.gruen{background:var(--lind-blass)}
.seitenkopf h1{font-size:clamp(1.8rem,3.4vw,2.5rem);margin-bottom:12px;max-width:17em}
.seitenkopf p{color:var(--tinte-weich);font-size:1.06rem;line-height:1.72}

/* Zahlenfelder */
/* Zahlenband. Vorher hatte jede Zelle 26 px rechts und 0 links, dadurch klebte
   der Text an der Trennlinie zu seiner Linken und liess rechts eine grosse
   Luecke. Jetzt gleicher Abstand zu beiden Linien, aussen buendig zur
   Inhaltskante. */
.fakten{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--linie)}
.fakten div{padding:24px 30px;border-right:1px solid var(--linie)}
.fakten div:first-child{padding-left:0}
.fakten div:last-child{border-right:0;padding-right:0}
.fakten b{display:block;font-size:1.85rem;font-weight:700;color:var(--salbei-tief);line-height:1.1;letter-spacing:-.02em}
.fakten span{font-size:.86rem;color:var(--tinte-weich);display:block;margin-top:5px}
@media (prefers-color-scheme:dark){.fakten b{color:var(--gold)}}

/* Zweispalter Text + Bild */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.duo.schmal{grid-template-columns:1.2fr .8fr}
.duo img{border-radius:var(--r);border:1px solid var(--linie)}
.duo h2{font-size:clamp(1.6rem,2.8vw,2.1rem);margin-bottom:14px}
.duo p{color:var(--tinte-weich);margin-bottom:14px}

/* Ausbildungswege */
.wege{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.weg{border:1px solid var(--linie);border-radius:var(--r);padding:28px 30px;background:var(--karte);display:flex;flex-direction:column;gap:10px}
.weg.haupt{border-color:var(--salbei);box-shadow:var(--schatten)}
.weg h3{font-size:1.22rem}
.weg .daten{display:grid;gap:7px;margin:6px 0 4px}
.weg .daten div{display:grid;grid-template-columns:9.5em 1fr;gap:10px;font-size:.9rem;border-top:1px dotted var(--linie-stark);padding-top:7px}
.weg .daten dt{color:var(--tinte-leise)}
.weg .daten dd{font-weight:500}
.weg .preis{font-size:1.3rem;font-weight:700;color:var(--salbei-tief);margin-top:4px}
@media (prefers-color-scheme:dark){.weg .preis{color:var(--gold)}}
.weg .mehr{align-self:start;margin-top:auto;padding-top:12px}

/* Seminartabelle */
.seminare{border-top:1px solid var(--linie)}
.seminar{
  display:grid;grid-template-columns:11.5em 1fr auto;gap:26px;align-items:center;
  padding:19px 0;border-bottom:1px solid var(--linie);
}
.seminar .wann b{display:block;font-weight:600;font-size:.95rem}
.seminar .wann span{font-size:.83rem;color:var(--tinte-leise)}
.seminar h3{font-size:1.04rem;font-weight:600;margin-bottom:3px}
.seminar h3 a{border-bottom:1px solid transparent;transition:border-color .18s}
.seminar h3 a:hover{border-bottom-color:var(--gold)}
.seminar .wo{font-size:.86rem;color:var(--tinte-weich);display:flex;align-items:center;gap:6px}
.seminar .wo svg{width:14px;height:14px;stroke-width:2;color:var(--salbei-tief);flex:none}
.seminar .btn{padding:9px 20px;font-size:.88rem}
.seminar.online .wo svg{color:var(--gold-tief)}

/* Personen */
.personen{display:grid;grid-template-columns:repeat(3,1fr);gap:0 40px}
.personen li{list-style:none;display:grid;grid-template-columns:auto 1fr;gap:14px;padding:16px 0;border-top:1px solid var(--linie);align-items:start}
.personen .ini{
  width:44px;height:44px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  font-weight:600;font-size:.9rem;background:var(--lind-blass);color:var(--salbei-tief);border:1px solid var(--linie-stark);
}
.personen b{display:block;font-size:.99rem}
.personen span{font-size:.85rem;color:var(--tinte-weich)}

@media (max-width:1000px){
  /* Zweispaltig: linke Spalte buendig zur Inhaltskante, rechte Spalte ohne Linie */
  .fakten{grid-template-columns:1fr 1fr}
  .fakten div:nth-child(odd){padding-left:0}
  .fakten div:nth-child(even){border-right:0;padding-right:0}
  .fakten div:nth-child(1),.fakten div:nth-child(2){border-bottom:1px solid var(--linie)}
  .duo,.duo.schmal{grid-template-columns:1fr;gap:36px}
  .personen{grid-template-columns:1fr 1fr;gap:0 30px}
}
@media (max-width:760px){
  .seitenkopf{padding:40px 0 34px}
  .fakten{grid-template-columns:1fr}
  .fakten div{border-right:0;border-bottom:1px solid var(--linie);padding:18px 0}
  .wege{grid-template-columns:1fr}
  .weg{padding:24px 22px}
  .weg .daten div{grid-template-columns:1fr;gap:1px}
  .seminar{grid-template-columns:1fr;gap:10px;padding:20px 0}
  .seminar .btn{justify-self:start}
  .personen{grid-template-columns:1fr}
  .demoband{font-size:.68rem;letter-spacing:.05em;padding:8px 0}
}

/* ------------------------------------------------------------
   Themenreihen. Lagen bisher nur im lokalen Stilblock der
   Veranstaltungsseite, deshalb standen sie auf der Akademie-Seite
   voellig ungestaltet untereinander.
   ------------------------------------------------------------ */
.reihen{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:26px}
.reihe{border-top:3px solid var(--salbei);padding:22px 0 0;display:flex;flex-direction:column;gap:8px}
.reihe:nth-child(2){border-top-color:var(--lind)}
.reihe:nth-child(3){border-top-color:var(--gold)}
.reihe .turnus{
  font-size:.78rem;font-weight:600;color:var(--tinte-leise);
  letter-spacing:.05em;text-transform:uppercase;
}
.reihe h3{font-size:1.14rem;margin-top:-2px}
.reihe p{font-size:.93rem;color:var(--tinte-weich);flex:1}
.reihe .mehr{align-self:start;margin-top:6px}
@media (max-width:1000px){.reihen{grid-template-columns:1fr;gap:26px}}


/* ------------------------------------------------------------
   Hinweiskasten. Lag zuvor doppelt in zwei Seiten lokal, also
   genau die Falle, die schon einmal zugeschlagen hat.
   ------------------------------------------------------------ */
.hinweiskasten{
  border-left:3px dotted var(--salbei);background:var(--papier-tief);
  padding:26px 30px;border-radius:0 var(--r) var(--r) 0;
}
.hinweiskasten b{display:block;margin-bottom:8px;font-size:1.04rem}
.hinweiskasten p{color:var(--tinte-weich);font-size:.95rem;line-height:1.72}
@media (max-width:760px){.hinweiskasten{padding:22px 20px}}