/* Schrift LOKAL, nicht von Google (Fund 12.09.2026): Beim Einbinden ueber
   fonts.googleapis.com geht bei jedem Seitenaufruf die IP-Adresse des
   Besuchers an Google — ohne Einwilligung heikel und in der
   Datenschutzerklaerung erklaerungsbeduerftig. Die zwoelf Schnitte liegen
   jetzt unter /schrift/ auf unserem eigenen Server (800 KB, latin und
   latin-ext, deckt auch die spaeteren Sprachen ab). */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/bzl-datei/schrift/inter-latin-ext-400.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/bzl-datei/schrift/inter-latin-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/bzl-datei/schrift/inter-latin-ext-500.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/bzl-datei/schrift/inter-latin-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/bzl-datei/schrift/inter-latin-ext-600.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/bzl-datei/schrift/inter-latin-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/bzl-datei/schrift/inter-latin-ext-700.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/bzl-datei/schrift/inter-latin-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/bzl-datei/schrift/inter-latin-ext-800.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/bzl-datei/schrift/inter-latin-800.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/bzl-datei/schrift/inter-latin-ext-900.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/bzl-datei/schrift/inter-latin-900.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
*{margin:0;padding:0;box-sizing:border-box}
:root{--rot:#CF2E2E;--dunkel:#111114;--grau:#6b6b70;--hell:#f5f5f7;--rand:#e5e5ea}
body{font-family:Inter,Arial,sans-serif;color:var(--dunkel);background:#fff;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.breite{max-width:1240px;margin:0 auto;padding:0 28px}

.baustelle{background:#1c1c1e;color:#fff;font-size:12px;text-align:center;padding:9px 16px}
.kopf{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--rand)}
.kopf .breite{display:flex;align-items:center;gap:26px;height:74px}
.kopf .logo{height:42px}
.menue{display:flex;gap:22px;margin-left:auto;font-size:16px;font-weight:600}
.menue a:hover,.menue a.an{color:var(--rot)}
.kopf .tel{font-size:16px;font-weight:700}
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--rot);
  color:#fff;border-radius:10px;padding:13px 22px;font-size:16px;font-weight:700;border:2px solid var(--rot)}
.knopf.hell{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.knopf.dunkel{background:var(--dunkel);border-color:var(--dunkel)}
.knopf.klein{padding:10px 18px;font-size:14px}
.burger{display:none;background:none;border:0;padding:8px;cursor:pointer}
.burger span{display:block;width:24px;height:2.5px;background:var(--dunkel);border-radius:2px}
.burger span+span{margin-top:5px}

.aufmacher{position:relative;background:var(--dunkel);color:#fff;overflow:hidden}
.aufmacher img.foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%;opacity:.42}
.aufmacher:after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(17,17,20,.94) 0%,rgba(17,17,20,.72) 52%,rgba(17,17,20,.45) 100%)}
.aufmacher .breite{position:relative;z-index:2;padding-top:96px;padding-bottom:86px}
.aufmacher.schmal .breite{padding-top:66px;padding-bottom:58px}
/* Wichtigster Punkt eines Kurses, gut lesbar oben (Florian, 15.09.2026: "europaweit gültig") */
.aufmacher .hervor{display:inline-flex;align-items:center;gap:12px;margin-top:22px;background:#fff;color:var(--dunkel);font-weight:800;font-size:18px;line-height:1.3;padding:11px 20px 11px 16px;border-radius:999px}
.aufmacher .hervor:before{content:"";flex:0 0 auto;width:12px;height:12px;border-radius:50%;background:var(--rot)}
/* Schwebende rote Punkte in den Aufmachern der Unterseiten (Florian, 15.09.2026) */
.aufmacher canvas.schwebepunkte{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
#punktwolke{pointer-events:none}
.fragen h3{font-size:1.08rem;margin:22px 0 6px;color:var(--text,#1c1c1e)}
.fragen h3:first-child{margin-top:0}
.fragen a{color:var(--rot);font-weight:700;text-decoration:underline}
.marke{display:inline-flex;align-items:center;gap:10px;background:var(--rot);font-size:12px;font-weight:800;
  letter-spacing:2.4px;text-transform:uppercase;padding:8px 15px;border-radius:999px}
.aufmacher h1{font-size:68px;font-weight:900;line-height:1.02;letter-spacing:-2.4px;margin:24px 0 0;max-width:17ch}
.aufmacher.schmal h1{font-size:56px;max-width:20ch}
.aufmacher h1 em{font-style:normal;color:var(--rot)}
.aufmacher p.lead{font-size:21px;line-height:1.55;color:rgba(255,255,255,.86);margin-top:22px;max-width:52ch}
.knoepfe{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap}
.vertrauen{display:flex;gap:34px;margin-top:54px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.16);padding-top:26px}
.vertrauen div b{display:block;font-size:26px;font-weight:900;letter-spacing:-1px}
.vertrauen .mitsiegel{display:flex;align-items:center;gap:12px}
.vertrauen .siegel{height:60px;width:auto;display:block;flex:0 0 auto}
.vertrauen div span{display:block;font-size:14px;color:rgba(255,255,255,.62);margin-top:3px;
  text-transform:uppercase;letter-spacing:1.4px}

section{padding:88px 0}
section.grau{background:var(--hell)}
.kicker{font-size:12px;font-weight:800;letter-spacing:2.6px;text-transform:uppercase;color:var(--rot)}
h2{font-size:46px;font-weight:900;letter-spacing:-1.8px;line-height:1.06;margin:14px 0 0}
h3{font-size:26px;font-weight:800;letter-spacing:-.8px}
.untertitel{font-size:18px;color:var(--grau);margin-top:14px;max-width:62ch;line-height:1.6}
.kopfzeile{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:38px}
/* Pruefplakette auf /pruefservice (Florian, 25.09.2026) */
.pl-kasten{display:flex;align-items:center}.pl-kasten .plakette{width:190px;height:190px;flex:none;filter:drop-shadow(0 6px 14px rgba(0,0,0,.12))}@media (max-width:700px){.pl-kasten{margin-top:6px}.pl-kasten .plakette{width:150px;height:150px}}
.fliess{font-size:16px;line-height:1.75;color:#3a3a3c;max-width:70ch}
.fliess p{margin-bottom:18px}
.fliess p:last-child{margin-bottom:0}

.termine{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.termin{display:flex;gap:22px;align-items:center;background:#fff;border:1px solid var(--rand);border-radius:16px;
  padding:22px 24px;transition:border-color .15s,transform .15s}
.termin:hover{border-color:var(--rot);transform:translateY(-2px)}
.termin .datum{flex:none;width:82px;text-align:center;background:var(--dunkel);color:#fff;border-radius:12px;padding:12px 0}
.termin .datum b{display:block;font-size:32px;font-weight:900;line-height:1}
.termin .datum span{display:block;font-size:12px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  color:rgba(255,255,255,.7);margin-top:4px}
.termin .was{flex:1}
.termin .was b{display:block;font-size:16px;font-weight:800;line-height:1.3}
.termin .was span{display:block;font-size:14px;color:var(--grau);margin-top:5px}
.termin .frei{flex:none;font-size:14px;font-weight:800;color:#1f7a3f;white-space:nowrap;text-align:right}
.termin .frei.knapp{color:#b36b00}
.termin .frei.voll{color:var(--grau)}
.termin.partner{border-style:dashed}
.termin.partner .datum{background:#3a3a40}
.termin.partner .frei{font-weight:700;font-size:14px;color:var(--grau);text-align:right;line-height:1.9}
.termin.partner .frei a{color:var(--rot)}
.termin.partner .frei a:hover{text-decoration:underline}
.termin.partner .frei .mehr{color:var(--rot);font-weight:800}
.termin .was .wo{display:block;font-size:16px;font-weight:800;color:var(--dunkel);margin-top:4px}
.termin.partner .was .wo{color:var(--dunkel)}
.termin .was .klein{font-size:14px;color:#8a929c;margin-top:3px}
.hinweisband{display:flex;gap:14px;align-items:flex-start;background:#fff;border-left:4px solid var(--rot);
  border-radius:12px;padding:20px 24px;margin-top:20px;font-size:16px;line-height:1.6;color:var(--grau)}
.hinweisband b{color:var(--dunkel)}
.filter{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:26px}
.filter a{border:1.5px solid var(--rand);border-radius:999px;padding:9px 17px;font-size:14px;font-weight:700;color:var(--grau)}
.filter a.an{background:var(--dunkel);border-color:var(--dunkel);color:#fff}
.filter a:hover{border-color:var(--rot);color:var(--dunkel)}

.kurse{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.kurs{background:#fff;border:1px solid var(--rand);border-radius:16px;padding:26px 24px;transition:border-color .15s,transform .15s}
.kurs:hover{border-color:var(--rot);transform:translateY(-2px)}
.kurs .zeichen{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:12px;
  background:var(--rot);color:#fff;font-size:21px;font-weight:900}
.kurs b{display:block;font-size:18px;font-weight:800;margin:18px 0 8px;letter-spacing:-.4px}
.kurs span{display:block;font-size:14px;color:var(--grau);line-height:1.55}
.kurs .preis{display:block;font-size:14px;font-weight:800;color:var(--dunkel);margin-top:14px}

.argumente{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.arg{background:var(--dunkel);color:#fff;border-radius:20px;padding:44px 42px}
.arg.rot{background:var(--rot)}
.arg .nr{font-size:14px;font-weight:800;letter-spacing:2.4px;text-transform:uppercase;color:rgba(255,255,255,.65)}
.arg h3{font-size:32px;font-weight:900;letter-spacing:-1px;line-height:1.1;margin:14px 0 14px}
.arg p{font-size:16px;line-height:1.65;color:rgba(255,255,255,.85)}
.arg .vorteile{list-style:none;margin:16px 0 0;padding:0}
.arg .vorteile li{position:relative;padding:0 0 0 22px;margin:0 0 9px;font-size:16px;line-height:1.5;color:rgba(255,255,255,.85)}
.arg .vorteile li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:2px;background:var(--rot)}
.arg.rot .vorteile li::before{background:#fff}
.arg .vorteile b{color:#fff;font-weight:800}
.arg .fragen{margin-top:22px;font-size:16px;font-weight:700;border-top:1px solid rgba(255,255,255,.22);padding-top:18px}

.stimmen{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.stimme{background:#fff;border:1px solid var(--rand);border-radius:16px;padding:30px 28px}
.stimme p{font-size:16px;line-height:1.62;color:#3a3a3c}
.stimme .wer{margin-top:20px;padding-top:16px;border-top:1px solid var(--rand)}
.stimme .wer b{display:block;font-size:16px;font-weight:800}
.stimme .wer span{display:block;font-size:14px;color:var(--grau);margin-top:2px}

/* Hervorgehobene Kundenstimme ganz oben im Abschnitt (Auftrag Florian,
   16.09.2026: "dass das auf jeden Fall gut sichtbar ist, weil das ist ein
   ganz grosser Kunde"). Wortlaut unveraendert von bildungszentrum-logistik.at
   uebernommen. */
.stimme-gross{background:#fff;border:1px solid var(--rand);border-left:5px solid var(--rot);
  border-radius:16px;padding:34px 36px;margin-bottom:18px}
.stimme-gross .firma{display:block;font-size:12px;font-weight:800;letter-spacing:2px;
  text-transform:uppercase;color:var(--rot);margin-bottom:14px}
.stimme-gross p{font-size:18px;line-height:1.66;color:#3a3a3c}
.stimme-gross .wer{margin-top:22px;padding-top:16px;border-top:1px solid var(--rand)}
.stimme-gross .wer b{display:block;font-size:16px;font-weight:800}
.stimme-gross .wer span{display:block;font-size:14px;color:var(--grau);margin-top:2px}

.google{display:flex;align-items:center;gap:18px;background:#fff;border:1.5px solid var(--rand);
  border-radius:14px;padding:20px 26px;margin-bottom:16px;flex-wrap:wrap}
.google .sterne{font-size:26px;color:#f5a623;letter-spacing:2px;line-height:1}
.google .zahl{font-size:16px;color:var(--grau)}
.google .zahl b{font-size:26px;font-weight:900;color:var(--dunkel);margin-right:4px}
.google .wort{margin-left:auto;font-size:12px;font-weight:800;letter-spacing:2px;
  text-transform:uppercase;color:#1f7a3f}
.googlestimmen{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px}
.gs{background:#fff;border:1px solid var(--rand);border-radius:14px;padding:20px 22px}
.gs p{font-size:16px;line-height:1.6;color:#3a3a3c}

/* Google-Bewertungen, taeglich frisch (Auftrag Florian, 12.09.2026: "dass das
   immer aktuell ist ... auf eine moderne Art und Weise"). Die Inhalte kommen
   aus website_neu/bewertungen.json und werden beim Ausliefern eingesetzt.
   Kein fremdes Widget: keine Fremdskripte, keine Profilbilder von Google,
   kein Datenabfluss beim Besucher. */
.bnote{display:flex;align-items:center;gap:22px;background:#fff;
  border:1.5px solid var(--rand);border-radius:16px;padding:22px 26px;
  margin-bottom:18px;flex-wrap:wrap}
.bnote .zahl{font-size:46px;font-weight:900;letter-spacing:-2px;line-height:1;
  color:var(--dunkel)}
.bnote .wort{font-size:14px;font-weight:800;letter-spacing:2px;text-transform:uppercase;
  color:#1f7a3f;display:block;margin-bottom:6px}
.bnote .sterne{font-size:21px;color:#f5a623;letter-spacing:3px;line-height:1;
  display:block}
.bnote .darunter{font-size:16px;color:var(--grau);margin-top:7px;display:block}
.bnote .darunter b{color:var(--dunkel);font-weight:800}
.bnote .hin{margin-left:auto;font-size:14px;font-weight:700;color:var(--rot);
  text-decoration:none;white-space:nowrap}
.bnote .hin:hover{text-decoration:underline}
/* Die Karten wandern alle paar Sekunden um eine Stelle weiter (Wunsch
   Florian, 12.09.2026: "dass die immer wieder eins weiterrutschen, so alle
   paar Sekunden ... dass die Leute sehen, dass wirklich immer wieder neue
   dazukommen"). Das Fenster schneidet ab, die Reihe darin wird geschoben. */
.bfenster{overflow:hidden;margin:0 -2px;padding:2px}
.bkarten{display:flex;gap:14px;will-change:transform}
.bkarte{flex:0 0 calc((100% - 28px)/3);background:#fff;border:1px solid var(--rand);
  border-radius:16px;padding:22px 22px 24px;display:flex;flex-direction:column}
.bkarte .oben{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.bkarte .kreis{width:38px;height:38px;border-radius:50%;background:var(--rot);
  color:#fff;font-size:16px;font-weight:800;display:flex;align-items:center;
  justify-content:center;flex:none}
.bkarte .wer b{display:block;font-size:14px;font-weight:800;line-height:1.25}
.bkarte .wer span{display:block;font-size:12px;color:var(--grau);margin-top:2px}
.bkarte .sterne{font-size:16px;color:#f5a623;letter-spacing:2px;margin-bottom:9px}
.bkarte p{font-size:16px;line-height:1.6;color:#3a3a3c}
.eckdaten{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:44px}
.eckdaten div{background:var(--hell);border-radius:14px;padding:22px 24px}
.eckdaten span{display:block;font-size:12px;font-weight:800;letter-spacing:2px;
  text-transform:uppercase;color:var(--rot);margin-bottom:8px}
.eckdaten b{display:block;font-size:18px;font-weight:800;line-height:1.35}
.eckdaten i{display:block;font-style:normal;font-size:14px;color:var(--grau);margin-top:5px}
.zweispalt{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:start}
/* Kranarten als Karten (Florian, 15.09.2026) */
.kranarten{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:6px 0 22px}
.kranart{background:#fff;border:1px solid var(--rand);border-radius:14px;padding:22px 22px 16px;display:flex;flex-direction:column}
.kranart b{font-size:18px;font-weight:800;line-height:1.3;letter-spacing:-.3px}
.kranart p{font-size:15px;line-height:1.55;color:#3a3a3c;margin:8px 0 14px;flex:1}
.kranart .zahlen{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;border-top:1px solid var(--rand);padding-top:12px;font-size:14px;font-weight:700}
.kranart .zahlen .preis{color:var(--rot)}
/* Kurskacheln mit freigestellten Geraetebildern — auch auf der Kursuebersicht
   (Florian, 15.09.2026: "genauso, dass wir die alle dabei haetten, die ganzen Fotos") */
.kurs.mitbild{display:flex;flex-direction:column}
.kurs .kachelkopf{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;min-height:84px}
.kurs .kachelkopf .zeichen{flex:0 0 auto;align-self:flex-start}
.kurs .geraet{display:block;flex:0 1 auto;width:auto;max-width:68%;height:84px;object-fit:contain;object-position:right bottom;
  background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;
  padding:0!important;margin:0!important;aspect-ratio:auto!important;
  filter:drop-shadow(0 8px 10px rgba(0,0,0,.15));transition:transform .25s ease}
.kurs.mitbild:hover .geraet{transform:translateY(-2px) scale(1.05)}
@media (max-width:900px){ .kurs .geraet{height:76px} .kurs .kachelkopf{min-height:76px} }
.inhaltskasten{background:var(--dunkel);color:#fff;border-radius:18px;padding:34px 32px}
/* Zweiter Weg zur Anmeldung, direkt unter den Kursinhalten (Florian, 22.09.2026) */
.anmeldekasten{margin-top:18px;background:#fff;border:1px solid var(--rand);border-radius:18px;
  padding:26px 28px 28px;text-align:center}
.anmeldekasten b{display:block;font-size:21px;font-weight:800;line-height:1.3;letter-spacing:-.3px;margin-top:8px}
.anmeldekasten p{font-size:15px;line-height:1.6;color:#3a3a3c;margin:10px 0 18px}
.anmeldekasten .knopf{width:100%;justify-content:center}
.inhaltskasten .k{font-size:12px;font-weight:800;letter-spacing:2.4px;text-transform:uppercase;
  color:rgba(255,255,255,.6);margin-bottom:16px}
.inhaltskasten ul{list-style:none}
.inhaltskasten li{font-size:16px;line-height:1.5;padding:11px 0 11px 26px;position:relative;
  border-bottom:1px solid rgba(255,255,255,.12)}
.inhaltskasten li:last-child{border-bottom:none}
.inhaltskasten li:before{content:"";position:absolute;left:0;top:18px;width:9px;height:9px;
  border-radius:3px;background:var(--rot)}
.preise{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.preiszeile{background:#fff;border:1px solid var(--rand);border-radius:12px;padding:18px 22px;
  font-size:16px;font-weight:700}
.leitsaetze{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:10px}
.leitsatz{background:#fff;border:1px solid var(--rand);border-radius:16px;padding:30px 28px}
.leitsatz .k{font-size:12px;font-weight:800;letter-spacing:2.2px;text-transform:uppercase;color:var(--rot)}
.leitsatz b{display:block;font-size:21px;font-weight:800;margin:12px 0 10px;line-height:1.25;letter-spacing:-.4px}
.leitsatz p{font-size:16px;line-height:1.65;color:var(--grau)}

.trainer{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.trainer.zweier{grid-template-columns:repeat(2,1fr);gap:18px;max-width:820px;
  margin-inline:auto}   /* mittig ueber den uebrigen, wie eine Pyramide (Florian, 12.09.2026) */
/* Sprungmarken: die Kopfleiste klebt oben und ist 75 px hoch — ohne Abstand
   verschwindet die Ueberschrift des Ziels darunter (Florian, 16.09.2026). */
[id]{scroll-margin-top:90px}
.person{background:#fff;border:1px solid var(--rand);border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;transition:border-color .15s}
.person:hover{border-color:var(--rot)}
.person .bild{aspect-ratio:4/5;background:var(--hell);overflow:hidden}
/* Die Fotos liegen bereits im Kartenformat 4:5 vor — deshalb mittig
   und ohne Verschiebung, sonst werden Koepfe angeschnitten. */
.person .bild img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.person .bild.ohne{display:flex;align-items:center;justify-content:center}
.person .bild.ohne span{font-size:46px;font-weight:900;color:var(--rand)}
.person .text{padding:22px 24px 26px}
.person b{display:block;font-size:18px;font-weight:800;margin:0 0 4px}
.person .rolle{display:block;font-size:14px;font-weight:700;color:var(--rot);text-transform:uppercase;
  letter-spacing:1.2px;margin-bottom:12px}
.person ul{list-style:none}
.person li{font-size:14px;color:var(--grau);line-height:1.6;padding-left:16px;position:relative}
.person li:before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:2px;background:var(--rand)}

.abschluss{background:var(--dunkel);color:#fff}
.abschluss .breite{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;
  padding-top:70px;padding-bottom:70px}
.abschluss h2{font-size:46px;max-width:18ch}
.abschluss .kontakt{font-size:16px;line-height:1.8;color:rgba(255,255,255,.8)}
.abschluss .kontakt b{color:#fff}
.fuss{background:#0b0b0d;color:rgba(255,255,255,.5);font-size:14px}
.fuss .breite{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:26px;padding-bottom:26px}

.geraete{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.geraet{display:flex;align-items:center;gap:20px;background:#fff;border:1px solid var(--rand);
  border-radius:14px;padding:22px 24px}
.geraet .g-text b{display:block;font-size:16px;font-weight:800;letter-spacing:-.3px}
.geraet .g-text span{display:block;font-size:14px;color:var(--grau);line-height:1.55;margin-top:6px}
.geraet .g-preis{flex:none;margin-left:auto;font-size:21px;font-weight:900;color:var(--rot);white-space:nowrap}

.formular{margin-top:26px;display:flex;flex-direction:column;gap:14px}
.feldpaar{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.formular .pflicht,.pflichthinweis .pflicht{color:var(--rot);margin-left:3px}
.pflichthinweis{font-size:14px;color:var(--grau);margin:4px 0 14px}
.formular label{display:block;font-size:14px;font-weight:800;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--grau)}
.formular input,.formular select,.formular textarea{display:block;width:100%;margin-top:8px;
  font-family:inherit;font-size:16px;color:var(--dunkel);background:#fff;border:1.5px solid var(--rand);
  border-radius:11px;padding:13px 15px;transition:border-color .15s}
.formular input:focus,.formular select:focus,.formular textarea:focus{outline:none;border-color:var(--rot)}
.formular textarea{resize:vertical;line-height:1.6}
.formular .haken{display:flex;gap:11px;align-items:flex-start;text-transform:none;letter-spacing:0;
  font-size:14px;font-weight:400;color:var(--grau);line-height:1.55}
.formular .haken input{width:19px;height:19px;margin:2px 0 0;flex:none;accent-color:var(--rot)}
.formular .haken a{color:var(--rot);font-weight:700}
.formular button{align-self:flex-start;margin-top:6px;cursor:pointer}

.formular .fotofeld{display:block}
.formular .fotofeld i{font-style:normal;font-weight:400;text-transform:none;letter-spacing:0;color:var(--grau)}
.fotoknopf{position:relative;display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin-top:8px;
  border:1.5px solid var(--rand);border-radius:11px;padding:10px 12px;background:#fafafc}
.fotoknopf input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.fk-knopf{background:var(--dunkel);color:#fff;border-radius:8px;padding:9px 15px;font-size:14px;
  font-weight:700;letter-spacing:0;text-transform:none;white-space:nowrap}
.fk-name{font-size:14px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--grau);
  word-break:break-all}
.fk-name.da{color:var(--dunkel);font-weight:700}
.kdaten div{padding:16px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.kdaten div:last-child{border-bottom:none}
.kdaten span{display:block;font-size:12px;font-weight:800;letter-spacing:2.2px;
  text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:7px}
.kdaten b{display:block;font-size:16px;font-weight:700;line-height:1.5}
.kdaten a:hover{color:var(--rot)}

.dateien{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:10px}
.datei{display:flex;gap:18px;align-items:flex-start;background:#fff;border:1px solid var(--rand);
  border-radius:16px;padding:22px 24px;transition:border-color .15s,transform .15s}
.datei:hover{border-color:var(--rot);transform:translateY(-2px)}
.datei .art{flex:none;width:52px;height:52px;border-radius:12px;background:var(--dunkel);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;letter-spacing:.6px}
.datei .art.amt{background:#3a3a40}
.datei .was b{display:block;font-size:16px;font-weight:800;line-height:1.3}
.datei .was span{display:block;font-size:14px;color:var(--grau);margin-top:6px;line-height:1.55}
.datei .was em{display:block;font-style:normal;font-size:12px;font-weight:700;color:var(--rot);margin-top:8px;
  letter-spacing:.4px}
.raeume{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:10px}
.raeume.drei{grid-template-columns:repeat(3,1fr)}
.raeume.praxis{grid-template-columns:repeat(2,1fr);margin-top:12px}
.raeume.praxis img{aspect-ratio:3/2}
.raeume img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;display:block;
  border:1px solid var(--rand)}
.beitraege{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:10px}
.beitrag .vorschau{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px;
  margin:-6px 0 4px;background:#f2f2f4}
.titelbild{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:18px;display:block;
  border:1px solid var(--rand);background:#f2f2f4}
.fotoshow{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
.fotoshow img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;display:block;
  border:1px solid var(--rand)}
.film{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--rand);
  background:#000;aspect-ratio:16/9;cursor:pointer}
.film img{width:100%;height:100%;object-fit:cover;display:block;opacity:.86;transition:opacity .15s}
.film:hover img{opacity:1}
.film iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.film .knopfrund{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:78px;height:78px;border-radius:50%;background:var(--rot);border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:0 8px 28px rgba(0,0,0,.35)}
.film .knopfrund:after{content:"";border-left:22px solid #fff;border-top:14px solid transparent;
  border-bottom:14px solid transparent;margin-left:6px}
.filmhinweis{font-size:14px;color:var(--grau);margin-top:10px}
.beitrag{display:flex;flex-direction:column;background:#fff;border:1px solid var(--rand);
  border-radius:16px;padding:28px 26px;transition:border-color .15s,transform .15s}
.beitrag:hover{border-color:var(--rot);transform:translateY(-2px)}
.beitrag .wann{font-size:12px;font-weight:800;letter-spacing:2.2px;text-transform:uppercase;color:var(--rot)}
.beitrag b{display:block;font-size:21px;font-weight:800;margin:12px 0 10px;line-height:1.28;letter-spacing:-.4px}
.beitrag p{font-size:16px;line-height:1.65;color:var(--grau);flex:1}
.beitrag .mehr{margin-top:16px;font-size:14px;font-weight:800;color:var(--rot)}
.beitragskopf{font-size:14px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--grau)}
.fliess h2{font-size:21px;font-weight:800;letter-spacing:-.5px;color:var(--dunkel);margin:30px 0 12px}
.fliess ul{margin:0 0 18px 0;padding-left:0;list-style:none}
.fliess li{position:relative;padding-left:26px;margin-bottom:9px}
.fliess li:before{content:"";position:absolute;left:8px;top:11px;width:6px;height:6px;
  border-radius:50%;background:var(--rot)}
.fliess blockquote{margin:24px 0;padding:2px 0 2px 22px;border-left:4px solid var(--rot);
  font-size:18px;line-height:1.6;color:var(--dunkel);font-weight:600}
.zurueck{display:inline-block;margin-top:34px;font-size:16px;font-weight:800;color:var(--rot)}
.fliess.recht{max-width:78ch}
.fliess.recht h3{font-size:21px;letter-spacing:-.4px;margin-bottom:10px}
.melde{background:#fff;border:1px solid var(--rand);border-left:4px solid var(--rot);
  border-radius:14px;padding:26px 28px;font-size:16px;line-height:1.65;color:var(--grau)}
.melde b{color:var(--dunkel)}

/* Eigene Regeln mit display ueberstimmen das HTML-Attribut hidden — deshalb
   diese Zeile, sonst steht der Rechnungsblock trotz hidden auf der Seite. */
[hidden]{display:none!important}
.wegwahl{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px}
.formular label.weg,.weg{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1.5px solid var(--rand);
  border-radius:14px;padding:22px 24px;cursor:pointer;text-transform:none;letter-spacing:0;
  font-weight:400;color:var(--grau);font-size:16px;line-height:1.55;transition:border-color .15s}
.weg:hover{border-color:var(--rot)}
.weg:has(input:checked){border-color:var(--rot);background:#fff7f7}
.weg input{width:20px;height:20px;margin:2px 0 0;flex:none;accent-color:var(--rot)}
.formular .weg b,.weg b{display:block;font-size:18px;font-weight:800;color:var(--dunkel);margin-bottom:6px;letter-spacing:-.3px}
.anmeldeform h3{font-size:21px;letter-spacing:-.5px}
.tnzeile{margin-bottom:14px}
.anmeldeform .knopf.klein{align-self:flex-start;cursor:pointer;font-size:14px;padding:10px 18px}

/* Chatbot — oeffnet beim ersten Aufruf, bleibt nach dem Wegklicken die ganze
   Sitzung zu (Florian, 11.09.2026). */
.chatblase{position:fixed;right:22px;bottom:22px;z-index:80;width:58px;height:58px;border-radius:50%;
  border:0;background:var(--rot);color:#fff;cursor:pointer;box-shadow:0 10px 28px rgba(207,46,46,.38);
  display:flex;align-items:center;justify-content:center;transition:transform .2s,opacity .2s}
.chatblase:hover{transform:scale(1.06)}
/* Am Handy verschwindet der Knopf beim Scrollen, damit er keinen Text verdeckt
   (Florian, 14.09.2026). */
.chatblase.weg{opacity:0;transform:translateY(14px) scale(.8);pointer-events:none}
/* Am Handy geht der Chat NICHT von selbst auf; stattdessen steht neben der Blase ein
   kleiner Hinweis (Florian, 15.09.2026: "dass es nicht aufgeht, aber unten rechts die
   Moeglichkeit anzeigt, dass da ein Chat waere bei Fragen, aber nur beim Handy"). */
.chathinweis{display:none}
.chat{position:fixed;right:22px;bottom:22px;z-index:81;width:372px;max-width:calc(100vw - 32px);
  max-height:min(620px,calc(100vh - 44px));background:#fff;border-radius:20px;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:0 24px 60px rgba(0,0,0,.28);border:1px solid var(--rand)}
.chatkopf{display:flex;align-items:center;gap:12px;background:var(--dunkel);color:#fff;padding:18px 20px}
.chatkopf b{display:block;font-size:16px;font-weight:800}
.chatkopf span{display:block;font-size:12px;color:rgba(255,255,255,.6);margin-top:2px}
.chatzu{margin-left:auto;background:none;border:0;color:rgba(255,255,255,.75);font-size:26px;
  line-height:1;cursor:pointer;padding:0 2px}
.chatzu:hover{color:#fff}
.chatlauf{flex:1;overflow-y:auto;padding:18px 18px 6px;display:flex;flex-direction:column;gap:11px}
.cnachricht{font-size:14px;line-height:1.6;padding:13px 15px;border-radius:14px;max-width:88%}
.cnachricht.bot{background:var(--hell);color:#2b2b30;border-bottom-left-radius:5px}
.cnachricht.ich{background:var(--rot);color:#fff;align-self:flex-end;border-bottom-right-radius:5px}
.cnachricht a{color:var(--rot);font-weight:700;text-decoration:underline}
.cnachricht.ich a{color:#fff}
.chatschnell{display:flex;gap:7px;flex-wrap:wrap;padding:12px 18px 4px}
.chatschnell button{background:#fff;border:1.5px solid var(--rand);border-radius:999px;padding:8px 14px;
  font-family:inherit;font-size:14px;font-weight:700;color:var(--grau);cursor:pointer}
.chatschnell button:hover{border-color:var(--rot);color:var(--dunkel)}
.chatzeile{display:flex;gap:8px;padding:14px 18px 18px}
.chatzeile input{flex:1;font-family:inherit;font-size:14px;border:1.5px solid var(--rand);
  border-radius:11px;padding:12px 14px}
.chatzeile input:focus{outline:none;border-color:var(--rot)}
.chatzeile button{flex:none;width:44px;border:0;border-radius:11px;background:var(--rot);color:#fff;
  font-size:18px;cursor:pointer}

.fusslinks{background:#0b0b0d;color:rgba(255,255,255,.55);border-top:1px solid rgba(255,255,255,.08)}
.fusslinks .breite{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;
  padding-top:44px;padding-bottom:34px}
.fusslinks .fk{display:block;font-size:12px;font-weight:800;letter-spacing:2.2px;
  text-transform:uppercase;color:var(--rot);margin-bottom:14px}
.fusslinks a{display:block;font-size:14px;line-height:2;color:rgba(255,255,255,.62)}
.fusslinks a:hover{color:#fff}

/* Sprachwahl: sichtbar, aber noch ohne Funktion. Florian, 11.09.2026:
   "Du kannst ja schon mal oben rechts das mit einbauen, dass man das einmal
   sieht, aber halt noch ohne Funktion." Die Uebersetzungen kommen zum Schluss,
   damit nicht jede Aenderung zwoelfmal nachgezogen werden muss. */
.sprachwahl{position:relative}
.sprachknopf{display:flex;align-items:center;gap:7px;background:none;border:1.5px solid var(--rand);
  border-radius:9px;padding:8px 12px;font-family:inherit;font-size:14px;font-weight:700;
  color:var(--dunkel);cursor:pointer}
.sprachknopf:hover{border-color:var(--rot);color:var(--rot)}
.sprachliste{position:absolute;right:0;top:calc(100% + 8px);width:310px;background:#fff;
  border:1px solid var(--rand);border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.14);
  padding:16px 18px;z-index:60;display:flex;flex-direction:column;gap:7px}
.sprachliste span{font-size:14px;line-height:1.6;color:var(--grau)}
.sprachliste .sl-kopf{font-size:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase;
  color:var(--rot)}
.sprachliste .sl-jetzt{font-size:16px;font-weight:800;color:var(--dunkel)}
.sprachliste .sl-fuss{border-top:1px solid var(--rand);padding-top:10px;margin-top:4px;font-size:12px}

/* Das Klappmenue fuers Handy. Der Burger-Knopf war da, hatte aber keine
   Funktion — am Handy kam man dadurch nur ueber die Fusszeile weiter.
   Gefunden von Florian am 11.09.2026 beim Ausprobieren. */
.handymenue{display:none;flex-direction:column;background:#fff;border-top:1px solid var(--rand);
  padding:8px 20px 18px}
.handymenue a{display:block;padding:14px 0;font-size:16px;font-weight:700;
  border-bottom:1px solid var(--rand)}
.handymenue a:active,.handymenue a:hover{color:var(--rot)}
.handymenue a.an{color:var(--rot)}
.handymenue .hm-tel{color:var(--rot)}
.handymenue .hm-sprachen{display:block;padding-top:14px;font-size:12px;color:var(--grau)}
.burger span{transition:transform .18s,opacity .18s}
.burger.auf span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger.auf span:nth-child(2){opacity:0}
.burger.auf span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.zuruf{background:var(--hell);padding:34px 0}
.zuruf .kasten{border-left:4px solid var(--rot);padding:4px 0 4px 20px}
.zuruf b{display:block;font-size:26px;font-weight:800;letter-spacing:-.5px;line-height:1.2;color:var(--dunkel)}
.zuruf span{display:block;font-size:16px;margin-top:6px;color:var(--grau)}

/* Mit Aktuelles hat das Kopfmenue sieben Punkte; auf mittleren Bildschirmen
   weicht die Telefonnummer (sie steht im Fuss und im Handymenue). */
.menue a,.kopf .tel{white-space:nowrap}
@media (max-width:1240px){
  .kopf .tel{display:none}
  .menue{gap:18px}
}
@media (max-width:1080px){
  .kopf .breite{gap:16px}
  .menue{gap:13px;font-size:15px}
}
/* Knapp ueber der Handy-Grenze fehlt sonst Platz; die Sprachwahl hat noch
   keine Uebersetzungen hinter sich und darf hier weichen. */
@media (max-width:980px){
  .sprachwahl{display:none}
}

@media (max-width:900px){
  .breite{padding:0 20px}
  .menue,.kopf .tel,.sprachwahl{display:none}
  .handymenue[hidden]{display:none}
  .handymenue{display:flex}
  .burger{display:block;order:3}
  .kopf .breite{height:64px;gap:14px}
  .kopf .knopf.klein{margin-left:auto;padding:9px 15px;font-size:14px}
  .aufmacher .breite{padding-top:62px;padding-bottom:56px}
  .aufmacher h1,.aufmacher.schmal h1{font-size:40px;letter-spacing:-1.4px;max-width:none}
  .aufmacher p.lead{font-size:16px;margin-top:16px}
  /* Vier Raumfotos nebeneinander waren am Handy briefmarkengroß (15.09.2026) */
  .raeume,.fotoshow{grid-template-columns:repeat(2,1fr);gap:10px}
  .raeume.drei{grid-template-columns:repeat(2,1fr)}
  .raeume.drei img:first-child{grid-column:1 / -1}
  .raeume.praxis{grid-template-columns:1fr}
  .kranarten{grid-template-columns:1fr}
  .knoepfe .knopf{flex:1 1 100%;min-width:0}
  .vertrauen{gap:22px;margin-top:38px}
  .vertrauen div b{font-size:21px}
  section{padding:54px 0}
  h2{font-size:32px;letter-spacing:-1.1px}
  .untertitel,.fliess{font-size:16px}
  .termine,.kurse,.argumente,.stimmen,.leitsaetze,.trainer,.googlestimmen,
  .eckdaten,.zweispalt,.preise,.geraete,.feldpaar,.wegwahl{grid-template-columns:1fr}
  .dateien,.beitraege{grid-template-columns:1fr}
  /* Karten duerfen am Handy nicht breiter werden als der Bildschirm: lange Woerter
     umbrechen, die Platz-Angabe rutscht bei Bedarf unter den Text. */
  .termine>*,.dateien>*,.beitraege>*{min-width:0}
  .termin{flex-wrap:wrap;gap:14px 16px;padding:18px}
  .termin .was{min-width:0;flex:1 1 160px}
  .termin .frei{white-space:normal;text-align:left}
  /* Handy: Status unter den Text, damit der Kurstitel die ganze Breite hat und
     nicht mitten im Wort getrennt wird (Florians Bildschirmfoto, 14.09.2026). */
  .termin .frei{flex:1 0 100%;padding-left:98px}
  .termin .was b,.datei .was b,.datei .was span,.beitrag b{overflow-wrap:anywhere;hyphens:auto}
  .termin .was b{overflow-wrap:break-word;hyphens:manual}
  .datei,.beitrag{padding:20px 18px}
  /* Die Bewertungen bleiben am Handy nebeneinander und werden gewischt —
     untereinander waeren es vier lange Kaesten, durch die man scrollen muss. */
  /* Am Handy wird gewischt statt geschoben — eine Automatik, die einem den
     Text unter dem Daumen wegzieht, ist am Telefon nur laestig. */
  .bfenster{overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -20px;
    padding:2px 20px 8px;scrollbar-width:none}
  .bfenster::-webkit-scrollbar{display:none}
  .bkarten{gap:12px;transform:none !important;transition:none !important}
  .bkarte{flex:0 0 78%;scroll-snap-align:start}
  .bnote{gap:16px;padding:20px}
  .bnote .zahl{font-size:40px}
  .bnote .hin{margin-left:0;flex-basis:100%}
  /* Auch die Zweierreihe der Geschaeftsfuehrer stapelt am Handy — nebeneinander
     waeren die Karten nur halb so breit wie die darunter. */
  .trainer.zweier{grid-template-columns:1fr;max-width:none}
  .google{gap:12px}
  .google .wort{margin-left:0}
  .arg{padding:32px 26px}
  .arg h3{font-size:26px}
  .abschluss h2{font-size:32px}
  .zuruf{padding:26px 0}
  .zuruf b{font-size:21px;letter-spacing:-.3px}
  .zuruf span{font-size:16px}
  .fusslinks .breite{grid-template-columns:1fr 1fr;gap:18px;padding-top:34px}
  /* Am Handy nur halbhoch: Der Chat geht beim ersten Aufruf von selbst auf,
     und eine Seite, von der man nichts mehr sieht, schreckt eher ab. */
  .chat{right:10px;bottom:10px;width:calc(100vw - 20px);max-height:62vh}
  .chatlauf{max-height:30vh}
  .chatblase{right:14px;bottom:14px;width:48px;height:48px}
  .chathinweis{display:block;position:fixed;right:70px;bottom:22px;z-index:80;border:0;
    background:#fff;color:var(--dunkel);font:700 14px/1 inherit;font-family:inherit;padding:10px 14px;
    border-radius:999px;box-shadow:0 8px 22px rgba(0,0,0,.18);cursor:pointer;transition:opacity .2s}
  .chathinweis[hidden],.chatblase[hidden] + .chathinweis{display:none}
  .chatblase.weg + .chathinweis{opacity:0;pointer-events:none}
  .chatblase svg{width:22px;height:22px}
  .fuss .breite{padding-bottom:78px}
}