:root{
  --weiss:#ffffff;
  --papier:#f6f7f8;
  --linie:#e3e6e8;
  --tinte:#1a1d1f;
  --grau:#5f666b;
  --grau-hell:#9aa1a6;
  --rot:#d2202f;
  --rot-dunkel:#b81b28;
  --rot-hell:#ff5b68;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --sans:'IBM Plex Sans',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
/* Sprungziele bündig unter den Sticky-Header setzen (Header = 64px) */
section[id], div[id]{scroll-margin-top:64px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  font-family:var(--sans);color:var(--tinte);background:var(--weiss);
  line-height:1.6;-webkit-font-smoothing:antialiased;
}
a{color:inherit}
img{max-width:100%}

/* ---------- Lineal-Motiv ---------- */
.lineal{
  height:26px;position:relative;overflow:hidden;
  background:repeating-linear-gradient(to right,
    var(--grau-hell) 0,var(--grau-hell) 1px,transparent 1px,transparent 10px);
  background-size:100px 100%;
}
.lineal::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(to right,
    var(--tinte) 0,var(--tinte) 1px,transparent 1px,transparent 100px);
}
.lineal::after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:2px;background:var(--rot);
  animation:messen 14s cubic-bezier(.65,0,.35,1) infinite alternate;
}
@keyframes messen{0%{left:8%}25%{left:8%}50%{left:63%}70%{left:63%}100%{left:31%}}
.lineal--kurz{max-width:220px;height:18px;margin-top:28px}
.lineal--kurz::after{animation-duration:9s}

/* ---------- Layout ---------- */
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
section{padding:96px 0}
section.eng{padding:64px 0}
.eyebrow{
  font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--rot);display:block;margin-bottom:14px;
}
h1,h2,h3{font-weight:600;letter-spacing:-.01em;line-height:1.15}
/* Lange deutsche Komposita (Datenschutzhinweise, Akkreditierungsurkunde ...)
   sprengen sonst schmale Displays, weil sie nicht umbrechen koennen. */
h1,h2,h3{overflow-wrap:break-word;hyphens:auto}
h1{font-size:clamp(2rem,4.6vw,3.1rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.4rem);margin-bottom:18px}
.intro{max-width:640px;color:var(--grau);font-size:1.05rem}
.hell{background:var(--papier);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}

/* ---------- Header ---------- */
header.site{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--linie);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.logo{
  font-weight:700;font-size:1.15rem;letter-spacing:-.01em;
  text-decoration:none;display:flex;align-items:center;gap:10px;min-width:0;
}
.logo img{display:block;width:auto}
.logo em{
  font-style:normal;font-family:var(--mono);font-weight:400;
  font-size:.72rem;color:var(--grau);letter-spacing:.06em;
  line-height:1.15;max-width:9ch;white-space:normal;
}
.logo .punkt{color:var(--rot)}
nav.haupt ul{display:flex;gap:28px;list-style:none}
nav.haupt a{
  text-decoration:none;font-size:.92rem;color:var(--grau);transition:color .15s;
  padding-bottom:4px;border-bottom:2px solid transparent;
}
nav.haupt a:hover,nav.haupt a:focus-visible{color:var(--tinte)}
nav.haupt a.aktiv{color:var(--tinte);border-bottom-color:var(--rot)}
nav.haupt a:focus-visible{outline:2px solid var(--rot);outline-offset:4px}
.nav-cta{
  font-size:.9rem;text-decoration:none;border:1px solid var(--tinte);
  padding:8px 18px;border-radius:2px;transition:background .15s,color .15s;white-space:nowrap;
}
.nav-cta:hover,.nav-cta:focus-visible{background:var(--tinte);color:#fff}
.burger{
  display:none;background:none;border:1px solid var(--linie);border-radius:2px;
  width:42px;height:38px;cursor:pointer;font-size:1.1rem;color:var(--tinte);
}
@media(max-width:900px){
  nav.haupt{display:none;position:absolute;top:64px;left:0;right:0;
    background:#fff;border-bottom:1px solid var(--linie);padding:12px 24px 20px}
  nav.haupt.offen{display:block}
  nav.haupt ul{flex-direction:column;gap:14px}
  .burger{display:block}
  .nav-cta{display:none}
}

/* ---------- Buttons ---------- */
.btn{
  text-decoration:none;font-size:.95rem;font-weight:500;font-family:var(--sans);
  padding:13px 26px;border-radius:2px;cursor:pointer;display:inline-block;
  transition:background .15s,color .15s;border:none;
}
.btn:focus-visible{outline:2px solid var(--rot);outline-offset:3px}
.btn--voll{background:var(--rot);color:#fff}
.btn--voll:hover{background:var(--rot-dunkel)}
.btn--rand{border:1px solid var(--tinte);background:transparent;color:var(--tinte)}
.btn--rand:hover{background:var(--tinte);color:#fff}
.btn-reihe{display:flex;gap:14px;flex-wrap:wrap}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* ---------- Karten ---------- */
.karten{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:52px}
.karten--drei{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.karten--drei{grid-template-columns:1fr}}
@media(max-width:760px){.karten{grid-template-columns:1fr}}
.karte{
  background:#fff;border:1px solid var(--linie);border-radius:3px;
  padding:34px 32px;position:relative;transition:border-color .15s;
}
.karte:hover{border-color:var(--grau-hell)}
.karte::before{content:"";position:absolute;top:0;left:0;width:34px;height:3px;background:var(--rot)}
.karte h3{font-size:1.2rem;margin-bottom:12px}
.karte .kuerzel{
  font-family:var(--mono);font-size:.72rem;color:var(--grau-hell);
  letter-spacing:.1em;display:block;margin-bottom:14px;text-transform:uppercase;
}
.karte p{color:var(--grau);font-size:.96rem;margin-bottom:16px}
.karte ul{list-style:none;font-size:.9rem;color:var(--grau)}
.karte li{padding-left:18px;position:relative;margin-bottom:6px}
.karte li::before{content:"—";position:absolute;left:0;color:var(--rot)}
.karte .mehr{
  font-size:.88rem;color:var(--rot);text-decoration:none;font-weight:500;
}
.karte .mehr:hover{text-decoration:underline}

/* ---------- Hero ---------- */
.hero{padding:100px 0 80px}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:center}
.hero-grid > *{min-width:0}
@media(max-width:860px){.hero-grid{grid-template-columns:1fr;gap:40px}}
.hero h1{margin-bottom:22px}
.hero h1 .rot{color:var(--rot)}
.hero p{color:var(--grau);font-size:1.12rem;max-width:520px;margin-bottom:34px}
.hero-badges{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:36px}
.badge{
  font-family:var(--mono);font-size:.75rem;border:1px solid var(--linie);
  border-radius:2px;padding:6px 12px;color:var(--grau);background:var(--papier);
}
.tol-karte{
  border:1px solid var(--linie);border-radius:3px;background:var(--papier);
  padding:36px 32px;font-family:var(--mono);
}
.tol-titel{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--grau);margin-bottom:20px}
/* --- Toleranzrahmen (Basis) --- */
.tol-rahmen{
  display:flex;border:1.5px solid var(--tinte);background:#fff;
  width:max-content;max-width:100%;font-size:1.25rem;
}
.tol-rahmen span{
  padding:10px 16px;border-right:1.5px solid var(--tinte);
  display:flex;align-items:center;white-space:nowrap;gap:5px;
}
.tol-rahmen span:last-child{border-right:none}
.tol-rahmen .wert{color:var(--rot);font-weight:500}
.tol-rahmen .wert .modifikator{color:var(--tinte);font-weight:400;padding:0;border:none}

/* --- Startseite: grosse Symbole, schlanker Rahmen ---
   Die Karte ist der Bezugsrahmen (container-type). Dadurch skalieren
   Symbole und Innenabstand mit der KARTENBREITE statt mit der
   Fensterbreite - der Rahmen kann so nie herausragen, egal wie schmal
   die Spalte wird. clamp() begrenzt nach unten und oben. */
.tol-karte{container-type:inline-size}
.tol-karte .tol-rahmen{
  font-size:clamp(1.3rem, 8.6cqw, 2.5rem);
  border-width:1px;
}
.tol-karte .tol-rahmen span{
  padding:2px clamp(4px, 2.4cqw, 12px);
  border-right-width:1px;
}

/* --- Messwelt: gezeichneter Rahmen in der Vergleichskarte --- */
.tol-rahmen--klein{font-family:var(--mono);font-size:1.05rem;margin:0 0 16px}
.tol-rahmen--klein span{padding:8px 14px}

/* --- 404-Seite: enthaelt langen Text, darf auf schmalen Displays
       kleiner werden und umbrechen --- */
@media(max-width:440px){
  .tol-rahmen--text{font-size:.95rem}
  .tol-rahmen--text span{padding:8px 10px;white-space:normal}
}
.tol-fuss{margin-top:22px;font-size:.8rem;color:var(--grau);line-height:1.7}
.tol-fuss b{color:var(--tinte);font-weight:500}

/* ---------- Abgrenzung ---------- */
.abgrenzung{margin-top:40px;border-left:2px solid var(--rot);padding:6px 0 6px 22px;max-width:680px}
.abgrenzung p{color:var(--grau);font-size:.95rem}
.abgrenzung b{color:var(--tinte);font-weight:600}

/* ---------- Dunkle Sektion ---------- */
.dunkel{background:#2e3338;color:#fff}
/* Graue Kacheln im dunklen Seminarbereich (heben sich vom Hintergrund ab) */
.karte--grau{background:#3d444a;border-color:#4a5158}
.karte--grau:hover{border-color:#5c646b}
.karte--grau h3{color:#fff}
.karte--grau .kuerzel{color:var(--rot-hell)}
.karte--grau p{color:#c7ccd0}
.dunkel .eyebrow{color:var(--rot-hell)}
.dunkel .intro{color:#b8bdc1}

/* ---------- Fakten-Liste ---------- */
.akk-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
@media(max-width:820px){.akk-grid{grid-template-columns:1fr}}
.akk-fakten{list-style:none;margin-top:26px}
.akk-fakten li{display:flex;gap:18px;padding:18px 0;border-bottom:1px solid var(--linie);align-items:baseline}
.akk-fakten li:first-child{border-top:1px solid var(--linie)}
.akk-fakten .norm{font-family:var(--mono);font-size:.82rem;color:var(--rot);min-width:150px;flex-shrink:0}
.akk-fakten .text{font-size:.95rem;color:var(--grau)}

/* ---------- Formulare ---------- */
form .feld{margin-bottom:20px}
label{display:block;font-size:.85rem;font-weight:500;margin-bottom:6px}
label .pflicht{color:var(--rot)}
input[type=text],input[type=email],input[type=tel],input[type=date],select,textarea{
  width:100%;padding:11px 14px;font:inherit;font-size:.95rem;
  border:1px solid var(--linie);border-radius:2px;background:#fff;color:var(--tinte);
}
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--rot);outline-offset:1px;border-color:var(--rot);
}
textarea{min-height:120px;resize:vertical}
.feld-hinweis{font-size:.8rem;color:var(--grau-hell);margin-top:5px}
.feld-tipp{font-size:.8rem;font-weight:400;color:var(--grau-hell)}

.form-status{
  margin-top:18px;padding:14px 18px;border-radius:2px;font-size:.92rem;display:none;
}
.form-status.ok{display:block;background:#eef7ef;border:1px solid #bfe0c2;color:#1e5b25}
.form-status.fehler{display:block;background:#fdeeee;border:1px solid #f2c4c8;color:var(--rot-dunkel)}

/* ---------- Terminbuchung ---------- */
.team-wahl{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin:26px 0 34px}
@media(max-width:760px){.team-wahl{grid-template-columns:1fr}}
.person{
  border:1px solid var(--linie);border-radius:3px;background:#fff;
  padding:22px 20px;cursor:pointer;text-align:left;font:inherit;
  transition:border-color .15s,box-shadow .15s;position:relative;
}
.person:hover{border-color:var(--grau-hell)}
.person:focus-visible{outline:2px solid var(--rot);outline-offset:2px}
.person.gewaehlt{border-color:var(--rot);box-shadow:0 0 0 1px var(--rot)}
.person .portrait{
  width:44px;height:44px;border-radius:50%;background:var(--papier);
  border:1px solid var(--linie);display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:.9rem;color:var(--rot);margin-bottom:14px;font-weight:500;
  overflow:hidden;flex-shrink:0;
}
.person .portrait.mit-bild{border-color:var(--linie);background:#fff}
.person .portrait img{width:100%;height:100%;object-fit:cover;display:block}
.person.gewaehlt .portrait{border-color:var(--rot)}

/* Grosses Portrait in der Seitenspalte: rund, mittig, dezent
   Kein Kasten drumherum - das Bild selbst ist der Kreis. */
.person-bild{
  margin:0 auto 22px;
  max-width:220px;
  text-align:center;
}
.person-bild img{
  width:180px;height:180px;
  border-radius:50%;
  object-fit:cover;object-position:center top;
  display:block;margin:0 auto;
  border:1px solid var(--linie);background:#fff;
}
.person-bild .bild-unterschrift{
  display:block;margin-top:14px;
  font-size:.82rem;color:var(--grau);line-height:1.5;
}
.person-bild .bild-unterschrift b{
  display:block;font-size:.95rem;color:var(--tinte);font-weight:600;margin-bottom:2px;
}
/* Zustand ohne Bild: gleicher Kreis, nur mit Initialen */
.person-bild.leer{
  display:flex;flex-direction:column;align-items:center;
  gap:6px;padding:0;
  background:none;border:none;aspect-ratio:auto;
}
.person-bild.leer .gross-initialen{
  font-family:var(--mono);font-size:2.4rem;color:var(--rot);
  width:180px;height:180px;border-radius:50%;background:var(--papier);
  border:1px dashed var(--linie);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:8px;
}
.person-bild.leer .bild-name{font-size:.95rem;font-weight:600;color:var(--tinte)}
.person-bild.leer .bild-rolle{
  font-family:var(--mono);font-size:.72rem;color:var(--grau-hell);
  letter-spacing:.06em;max-width:200px;line-height:1.5;
}
.person h3{font-size:1.02rem;margin-bottom:4px}
.person .rolle{font-size:.82rem;color:var(--grau);margin-bottom:10px}
.person .themen{font-family:var(--mono);font-size:.7rem;color:var(--grau-hell);letter-spacing:.04em}
.person .haken{
  position:absolute;top:14px;right:14px;width:20px;height:20px;border-radius:50%;
  background:var(--rot);color:#fff;font-size:.7rem;display:none;
  align-items:center;justify-content:center;
}
.person.gewaehlt .haken{display:flex}
.slots{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.slot{
  font-family:var(--mono);font-size:.85rem;padding:9px 16px;
  border:1px solid var(--linie);border-radius:2px;background:#fff;cursor:pointer;
  transition:border-color .15s;
}
.slot:hover{border-color:var(--grau-hell)}
.slot:focus-visible{outline:2px solid var(--rot);outline-offset:2px}
.slot.gewaehlt{border-color:var(--rot);background:var(--rot);color:#fff}
.slot.belegt{
  color:var(--grau-hell);background:var(--papier);
  text-decoration:line-through;cursor:not-allowed;border-style:dashed;
}
.slot.belegt:hover{border-color:var(--linie)}
.termin-layout{display:grid;grid-template-columns:1.2fr .8fr;gap:56px;align-items:start}
@media(max-width:860px){.termin-layout{grid-template-columns:1fr}}
.zusammenfassung{
  border:1px solid var(--linie);border-radius:3px;background:var(--papier);
  padding:28px;
}
.termin-layout > div:last-child{position:sticky;top:92px}
@media(max-width:860px){.termin-layout > div:last-child{position:static}}
.zusammenfassung h3{font-size:1rem;margin-bottom:16px}
.zusammenfassung dl{font-size:.92rem}
.zusammenfassung dt{
  font-family:var(--mono);font-size:.72rem;text-transform:uppercase;
  letter-spacing:.08em;color:var(--grau-hell);margin-top:12px;
}
.zusammenfassung dd{color:var(--tinte);margin-left:0}
.zusammenfassung .leer{color:var(--grau-hell);font-style:italic}

/* ---------- Messwelt ---------- */
.mass-band{margin-top:52px}
.mass-zeile{display:grid;grid-template-columns:210px 1fr 90px;gap:18px;align-items:center;padding:14px 0;border-bottom:1px solid var(--linie)}
@media(max-width:640px){.mass-zeile{grid-template-columns:1fr;gap:6px}}
.mass-zeile:first-child{border-top:1px solid var(--linie)}
.mass-name{font-size:.92rem}
.mass-balken{height:10px;background:var(--papier);border:1px solid var(--linie);border-radius:2px;overflow:hidden}
.mass-balken i{display:block;height:100%;background:var(--rot);border-radius:1px;min-width:2px}
.mass-wert{font-family:var(--mono);font-size:.82rem;color:var(--grau);text-align:right}
@media(max-width:640px){.mass-wert{text-align:left}}
.zitat{
  margin:52px auto;max-width:720px;text-align:center;
  font-size:clamp(1.2rem,2.6vw,1.6rem);font-weight:600;line-height:1.4;
}
.zitat .rot{color:var(--rot)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:44px}
@media(max-width:760px){.duo{grid-template-columns:1fr}}
.duo .karte h3 .vs{font-family:var(--mono);font-size:.75rem;color:var(--grau-hell);display:block;margin-bottom:6px;letter-spacing:.1em}

/* Quiz */
.quiz{border:1px solid var(--linie);border-radius:3px;background:#fff;padding:36px 32px;margin-top:44px}
.quiz .frage{font-size:1.1rem;font-weight:600;margin-bottom:20px}
.quiz .antworten{display:grid;gap:10px}
.quiz .antwort{
  text-align:left;font:inherit;font-size:.95rem;padding:13px 18px;cursor:pointer;
  border:1px solid var(--linie);border-radius:2px;background:#fff;transition:border-color .15s;
}
.quiz .antwort:hover{border-color:var(--grau-hell)}
.quiz .antwort:focus-visible{outline:2px solid var(--rot);outline-offset:2px}
.quiz .antwort.richtig{border-color:#2e7d32;background:#eef7ef}
.quiz .antwort.falsch{border-color:var(--rot);background:#fdeeee}
.quiz .erklaerung{margin-top:18px;font-size:.92rem;color:var(--grau);display:none}
.quiz .erklaerung.sichtbar{display:block}
.quiz .quiz-fuss{display:flex;justify-content:space-between;align-items:center;margin-top:24px}
.quiz .zaehler{font-family:var(--mono);font-size:.8rem;color:var(--grau-hell)}

/* Glossar */
.glossar{margin-top:44px}
.glossar details{border-bottom:1px solid var(--linie)}
.glossar details:first-child{border-top:1px solid var(--linie)}
.glossar summary{
  cursor:pointer;padding:18px 0;font-weight:500;font-size:1rem;list-style:none;
  display:flex;justify-content:space-between;align-items:center;
}
.glossar summary::-webkit-details-marker{display:none}
.glossar summary::after{content:"+";font-family:var(--mono);color:var(--rot);font-size:1.2rem}
.glossar details[open] summary::after{content:"–"}
.glossar .inhalt{padding:0 0 20px;color:var(--grau);font-size:.95rem;max-width:720px}

/* ---------- CT-Galerie ---------- */
.ct-galerie{
  display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:52px;
}
@media(max-width:760px){.ct-galerie{grid-template-columns:1fr}}
.ct-bild{
  border:none;border-radius:0;background:#fff;
  position:relative;
  display:flex;flex-direction:column;
}
.ct-bild figure{margin:0;display:flex;flex-direction:column;height:100%}
.ct-bild .rahmen{
  background:#fff;
  padding:8px 8px 22px;
  flex:1;
  display:flex;align-items:center;justify-content:center;
}
.ct-bild img{
  max-width:100%;
  max-height:340px;
  width:auto;height:auto;
  object-fit:contain;display:block;
}
.ct-bild figcaption{
  padding:20px 0 0;
  border-top:1px solid var(--linie);
  background:#fff;
}
.ct-bild .kuerzel{
  font-family:var(--mono);font-size:.7rem;color:var(--grau-hell);
  letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:8px;
}
.ct-bild h3{font-size:1.05rem;margin-bottom:8px}
.ct-bild p{font-size:.9rem;color:var(--grau);line-height:1.6}
.ct-bild .voxel{
  position:absolute;top:0;right:0;
  font-family:var(--mono);font-size:.68rem;
  border:1px solid var(--linie);
  border-radius:2px;padding:4px 9px;color:var(--rot);
  background:#fff;
}
.ct-hinweis{
  margin-top:26px;font-size:.85rem;color:var(--grau-hell);
  font-family:var(--mono);
}

/* CT-Blickfang auf der Startseite */
.ct-teaser{
  display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;
}
@media(max-width:820px){.ct-teaser{grid-template-columns:1fr;gap:36px}}
.ct-teaser-bild{
  background:#fff;position:relative;
}
.ct-teaser-bild img{
  width:100%;height:auto;display:block;
}
.ct-teaser-bild .voxel{
  display:inline-block;margin-top:14px;
  font-family:var(--mono);font-size:.7rem;
  border:1px solid var(--linie);
  border-radius:2px;padding:5px 10px;color:var(--rot);
  background:#fff;
}

/* ---------- Bild-Platzhalter ---------- */
.bildplatz{
  border:1px dashed var(--linie);border-radius:3px;
  background:var(--papier);
  aspect-ratio:4/3;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;text-align:center;padding:24px;
}
.bildplatz .symbol{
  font-family:var(--mono);font-size:1.4rem;color:var(--grau-hell);
}
.bildplatz .titel{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--grau-hell);
}
.bildplatz .pfad{
  font-family:var(--mono);font-size:.7rem;color:var(--rot);
  background:#fff;border:1px solid var(--linie);border-radius:2px;
  padding:4px 10px;
}
/* Sobald ein echtes Bild geladen ist */
.bildfertig{
  border:none;border-radius:3px;overflow:hidden;background:#fff;
  aspect-ratio:auto;padding:0;display:block;
}
.bildfertig img{width:100%;height:auto;display:block}
.bildunterschrift{
  font-family:var(--mono);font-size:.7rem;color:var(--grau-hell);
  margin-top:10px;display:block;
}

/* ---------- Akkreditierungsurkunde anfordern ---------- */
.urkunde{
  display:flex;gap:14px;align-items:flex-start;
  margin-top:26px;padding:18px 20px;
  background:#fff;border:1px solid var(--linie);border-radius:3px;
  font-size:.92rem;color:var(--grau);line-height:1.6;
}
.urkunde-symbol{
  flex-shrink:0;width:24px;height:24px;border-radius:50%;
  background:var(--rot);color:#fff;font-size:.75rem;
  display:flex;align-items:center;justify-content:center;margin-top:2px;
}
.urkunde b{display:block;color:var(--tinte);font-weight:600;margin-bottom:3px}
.urkunde a{color:var(--rot);text-decoration:none;border-bottom:1px solid transparent}
.urkunde a:hover{border-bottom-color:var(--rot)}

/* ---------- Download-Link ---------- */
.download{
  display:flex;align-items:center;gap:20px;
  margin-top:40px;padding:22px 26px;
  background:#fff;border:1px solid var(--linie);border-radius:3px;
  text-decoration:none;color:inherit;
  transition:border-color .15s,transform .15s;
  max-width:640px;
}
/* hidden muss gewinnen, sonst zeigt display:flex den Link trotzdem an */
.download[hidden]{display:none}
.download:hover{border-color:var(--rot);transform:translateY(-1px)}
.download:focus-visible{outline:2px solid var(--rot);outline-offset:3px}
.download-symbol{
  flex-shrink:0;width:44px;height:44px;border-radius:50%;
  background:var(--papier);border:1px solid var(--linie);
  display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;color:var(--rot);
  transition:background .15s,color .15s,border-color .15s;
}
.download:hover .download-symbol{background:var(--rot);color:#fff;border-color:var(--rot)}
.download-text{flex:1;min-width:0}
.download-text b{display:block;font-size:1rem;font-weight:600;margin-bottom:3px}
.download-meta{font-size:.85rem;color:var(--grau);display:block}
.download-format{
  flex-shrink:0;font-family:var(--mono);font-size:.72rem;
  color:var(--grau-hell);border:1px solid var(--linie);
  border-radius:2px;padding:5px 10px;white-space:nowrap;
}
@media(max-width:560px){
  .download{flex-wrap:wrap;gap:14px}
  .download-format{order:3}
}

/* ---------- Mobile Feinschliff ---------- */
@media(max-width:760px){
  /* Abstaende: 96px sind auf kleinen Displays verschenkte Hoehe */
  section{padding:56px 0}
  section.eng{padding:44px 0}
  .hero{padding:48px 0 40px}
  .wrap{padding:0 20px}

  /* Typografie etwas kompakter, aber nie unter 16px (sonst zoomt iOS beim Tippen) */
  h2{margin-bottom:14px}
  .intro{font-size:1rem}
  .hero p{font-size:1.05rem;margin-bottom:28px}

  /* Karten: weniger Innenabstand, mehr Platz fuer Inhalt */
  .karte{padding:26px 22px}
  .karten{margin-top:34px;gap:16px}

  /* Tap-Targets vergroessern: Empfehlung 44px */
  .burger{width:46px;height:44px;font-size:1.3rem}
  nav.haupt a{padding:10px 0;display:block}
  footer.site nav a{padding:8px 0;display:inline-block}
  .kontakt-daten a{padding:6px 0;display:inline-block}

  /* Buttons volle Breite: leichter zu treffen, ruhigeres Bild */
  .btn-reihe{flex-direction:column;align-items:stretch}
  .btn{text-align:center;padding:15px 24px}

  /* Fakten-Liste stapeln statt quetschen */
  .akk-fakten li{flex-direction:column;gap:4px;padding:14px 0}
  .akk-fakten .norm{min-width:0}

  /* Kontaktdaten stapeln */
  .kontakt-daten li{flex-direction:column;gap:2px;margin-bottom:18px}
  .kontakt-daten .label{min-width:0}

  /* Download-Kachel */
  .download{padding:18px 20px;gap:14px}
  .download-text b{font-size:.95rem}
}

/* Sehr schmale Geraete */
@media(max-width:380px){
  .wrap{padding:0 16px}
  .karte{padding:22px 18px}
  h1{font-size:1.85rem}
}

/* Messwelt mobil */
@media(max-width:640px){
  .mass-zeile{padding:12px 0}
  .zitat{margin:36px auto;font-size:1.15rem}
  .ct-galerie{margin-top:34px;gap:28px}
  .ct-bild .rahmen{padding:4px 4px 18px}
  .ct-bild img{max-height:260px}
  .glossar summary{padding:16px 0;font-size:.95rem}
  .quiz{padding:26px 20px}
  .quiz .antwort{padding:14px 16px}   /* gut treffbar */
}

/* Beratungsseite mobil */
@media(max-width:760px){
  .termin-layout{gap:32px}
  .person{padding:18px 16px}
  .slots{gap:8px}
  .slot{padding:12px 14px;flex:1 1 auto;min-width:78px;text-align:center}
  .person-bild{margin-bottom:18px}
  .person-bild img,
  .person-bild.leer .gross-initialen{width:140px;height:140px}
  .person-bild.leer .gross-initialen{font-size:1.9rem}
  .zusammenfassung{padding:22px 20px}

  /* WICHTIG: unter 16px zoomt iOS beim Antippen automatisch hinein.
     16px verhindert diesen Sprung. */
  input[type=text],input[type=email],input[type=tel],input[type=date],
  select,textarea{font-size:16px;padding:13px 14px}
}

/* ---------- Stellenanzeigen ---------- */
.stellen-liste{margin-top:44px}
.stelle{border-bottom:1px solid var(--linie);background:#fff}
.stelle:first-child{border-top:1px solid var(--linie)}
.stelle summary{
  cursor:pointer;padding:22px 24px;list-style:none;
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  transition:background .15s;
}
.stelle summary::-webkit-details-marker{display:none}
.stelle summary::after{
  content:"+";font-family:var(--mono);color:var(--rot);font-size:1.3rem;
  flex-shrink:0;line-height:1;
}
.stelle[open] summary::after{content:"–"}
.stelle summary:hover{background:var(--papier)}
.stelle summary:focus-visible{outline:2px solid var(--rot);outline-offset:-2px}
.stelle-titel{font-weight:600;font-size:1.02rem;flex:1}
.stelle-umfang{
  font-family:var(--mono);font-size:.72rem;color:var(--grau-hell);
  letter-spacing:.06em;white-space:nowrap;
}
.stelle-inhalt{padding:0 24px 26px;max-width:720px}
.stelle-inhalt p{color:var(--grau);font-size:.95rem;line-height:1.7}
.stelle-zwischen{
  font-weight:600;color:var(--tinte)!important;font-size:.9rem!important;
  margin-top:18px;margin-bottom:8px;
}
.stelle-inhalt ul{list-style:none;font-size:.92rem;color:var(--grau)}
.stelle-inhalt li{padding-left:18px;position:relative;margin-bottom:6px}
.stelle-inhalt li::before{content:"—";position:absolute;left:0;color:var(--rot)}
.stelle-btn{margin-top:22px;font-size:.9rem;padding:11px 22px}
.stellen-fuss{
  margin-top:28px;font-size:.9rem;color:var(--grau);
}
.stellen-fuss a{color:var(--rot);text-decoration:none;border-bottom:1px solid transparent}
.stellen-fuss a:hover{border-bottom-color:var(--rot)}
@media(max-width:560px){
  .stelle summary{flex-direction:column;gap:4px;padding:18px 18px}
  .stelle summary::after{position:absolute;right:18px;top:18px}
  .stelle{position:relative}
  .stelle-inhalt{padding:0 18px 22px}
}

/* Kleinere Download-Variante (z. B. AGB im Kontaktbereich) */
.download--klein{margin-top:22px;padding:16px 20px;gap:14px;max-width:none}
.download--klein .download-symbol{width:36px;height:36px;font-size:1rem}
.download--klein .download-text b{font-size:.92rem}
.download--klein .download-meta{font-size:.8rem}

/* Download im dunklen Bereich (Seminare) */
.download--dunkel{
  margin-top:28px;background:rgba(255,255,255,.03);
  border-color:#34393c;color:#fff;
}
.download--dunkel:hover{border-color:var(--rot-hell);background:rgba(255,255,255,.05)}
.download--dunkel .download-symbol{
  background:rgba(0,0,0,.3);border-color:#34393c;color:var(--rot-hell);
}
.download--dunkel:hover .download-symbol{background:var(--rot);color:#fff;border-color:var(--rot)}
.download--dunkel .download-meta{color:#8b9296}
.download--dunkel .download-format{color:#8b9296;border-color:#34393c}

/* Social-Links im Footer */
.footer-social{display:flex;gap:20px}
.footer-social a{
  text-decoration:none;color:var(--grau);
  border-bottom:1px solid transparent;
}
.footer-social a:hover{color:var(--tinte);border-bottom-color:var(--rot)}

/* ---------- Kalender ---------- */
.kalender{
  border:1px solid var(--linie);border-radius:3px;background:#fff;
  padding:14px;max-width:320px;
}
.kal-kopf{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:12px;
}
.kal-monat{font-size:.95rem;font-weight:600;color:var(--tinte)}
.kal-pfeil{
  width:32px;height:32px;border:1px solid var(--linie);border-radius:2px;
  background:#fff;color:var(--tinte);cursor:pointer;
  font-size:1.1rem;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .15s;
}
.kal-pfeil:hover:not([disabled]){border-color:var(--rot);color:var(--rot)}
.kal-pfeil:focus-visible{outline:2px solid var(--rot);outline-offset:2px}
.kal-pfeil[disabled]{opacity:.3;cursor:not-allowed}
.kal-wochentage{
  display:grid;grid-template-columns:repeat(7,1fr);gap:2px;
  margin-bottom:4px;
}
.kal-wochentage span{
  text-align:center;font-family:var(--mono);font-size:.68rem;
  color:var(--grau-hell);letter-spacing:.04em;padding:4px 0;
}
.kal-gitter{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.kal-leer{aspect-ratio:1}
.kal-tag{
  aspect-ratio:1;border:1px solid transparent;border-radius:2px;
  background:#fff;color:var(--tinte);
  font-family:var(--mono);font-size:.82rem;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0;
  transition:border-color .12s,background .12s;
}
.kal-tag:hover:not(.gesperrt){border-color:var(--rot);color:var(--rot)}
.kal-tag:focus-visible{outline:2px solid var(--rot);outline-offset:1px}
.kal-tag.gewaehlt{
  background:var(--rot);border-color:var(--rot);color:#fff;font-weight:500;
}
.kal-tag.gewaehlt:hover{color:#fff}
/* Gesperrt: sichtbar da, aber eindeutig nicht wählbar */
.kal-tag.gesperrt{
  color:var(--grau-hell);background:var(--papier);
  cursor:not-allowed;
}
@media(max-width:760px){
  .kalender{max-width:100%}
  .kal-tag{font-size:.9rem}   /* auf dem Handy gut treffbar */
  .kal-pfeil{width:40px;height:40px}
}

/* ---------- Seminartermine ---------- */
.seminar-ueberschrift{
  font-size:1.05rem;color:#fff;margin:52px 0 20px;
  padding-bottom:12px;border-bottom:1px solid #34393c;
}
.seminar-liste{display:flex;flex-direction:column;gap:18px}
.seminar-termin{
  display:flex;gap:24px;
  border:1px solid #34393c;border-radius:3px;
  padding:24px;background:rgba(255,255,255,.02);
  transition:border-color .15s;
}
.seminar-termin:hover{border-color:#4a5155}
.seminar-termin.ausgebucht{opacity:.62}

/* Datumsblock - Anlehnung an den Kalender */
.seminar-datum{
  flex-shrink:0;width:82px;
  border:1px solid #34393c;border-radius:3px;
  background:rgba(0,0,0,.25);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:12px 6px;text-align:center;
  align-self:flex-start;
}
.sd-monat{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--rot-hell);margin-bottom:4px;
}
.sd-tage{font-size:1.35rem;font-weight:600;color:#fff;line-height:1.1}
.sd-jahr{font-family:var(--mono);font-size:.65rem;color:#8b9296;margin-top:4px}

.seminar-info{flex:1;min-width:0}
.seminar-info h3{font-size:1.05rem;color:#fff;margin-bottom:8px}
.seminar-meta{
  display:flex;flex-wrap:wrap;gap:14px;
  font-family:var(--mono);font-size:.72rem;color:#8b9296;
  margin-bottom:12px;
}
.seminar-meta .sm-preis{color:var(--rot-hell)}
.seminar-text{font-size:.92rem;color:#b8bdc1;line-height:1.65;margin-bottom:14px}

.seminar-inhalte{margin-bottom:16px}
.seminar-inhalte summary{
  cursor:pointer;font-size:.82rem;color:#b8bdc1;
  font-family:var(--mono);letter-spacing:.04em;
  list-style:none;display:inline-flex;align-items:center;gap:7px;
  padding:4px 0;
}
.seminar-inhalte summary::-webkit-details-marker{display:none}
.seminar-inhalte summary::after{content:"+";color:var(--rot-hell);font-size:.95rem}
.seminar-inhalte[open] summary::after{content:"–"}
.seminar-inhalte summary:hover{color:#fff}
.seminar-inhalte summary:focus-visible{outline:2px solid var(--rot-hell);outline-offset:3px}
.seminar-inhalte ul{list-style:none;margin-top:10px;font-size:.86rem;color:#b8bdc1}
.seminar-inhalte li{padding-left:16px;position:relative;margin-bottom:5px;line-height:1.5}
.seminar-inhalte li::before{content:"—";position:absolute;left:0;color:var(--rot-hell)}

.seminar-fuss{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding-top:14px;border-top:1px solid #2b3033;
}
.seminar-status{
  font-family:var(--mono);font-size:.72rem;color:#8b9296;
  display:flex;align-items:center;gap:7px;
}
.seminar-status::before{
  content:"";width:7px;height:7px;border-radius:50%;background:#4a8f5b;
}
.seminar-status.knapp{color:#e8a33d}
.seminar-status.knapp::before{background:#e8a33d}
.seminar-status.voll{color:#8b9296}
.seminar-status.voll::before{background:#6b7276}

/* ---------- Seminar-Anmeldeformular (dunkler Bereich) ---------- */
.seminar-anmeldung{
  margin-top:18px;padding:22px;border:1px solid #3a4045;border-radius:3px;
  background:#262b30;
}
.seminar-form h4{
  font-size:.95rem;color:#fff;font-weight:600;margin-bottom:18px;
  padding-bottom:12px;border-bottom:1px solid #2b3033;
}
.seminar-form label{color:#d5d9db}
.seminar-form input[type=text],
.seminar-form input[type=email],
.seminar-form input[type=tel],
.seminar-form select,
.seminar-form textarea{
  background:#1a1d1f;border-color:#3a4044;color:#fff;
}
.seminar-form input::placeholder,
.seminar-form textarea::placeholder{color:#6b7276}
.seminar-form input:focus-visible,
.seminar-form select:focus-visible,
.seminar-form textarea:focus-visible{
  outline-color:var(--rot-hell);border-color:var(--rot-hell);
}
.seminar-form textarea{min-height:0}
.seminar-form .feld{margin-bottom:16px}
.sf-zeile{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.sf-zeile:has(.sf-schmal){grid-template-columns:110px 1fr}
@media(max-width:640px){.sf-zeile,.sf-zeile:has(.sf-schmal){grid-template-columns:1fr}}
.sf-bedingungen{
  display:flex;gap:10px;align-items:flex-start;
  font-size:.88rem;font-weight:400;color:#d5d9db;line-height:1.5;
  margin:4px 0 18px;cursor:pointer;
}
.sf-bedingungen input{width:16px;height:16px;margin-top:3px;accent-color:var(--rot);flex:none}
.sf-bedingungen a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.sf-bedingungen a:hover{color:var(--rot-hell)}
.seminar-form .form-status.ok{background:#1e3323;border-color:#2d5a37;color:#9fd3ab}
.seminar-form .form-status.fehler{background:#3a2124;border-color:#6e3138;color:#f2a6ad}
.seminar-anmeldung > .form-status.ok{margin-top:0}
.seminar-fuss .btn{margin-left:auto;font-size:.88rem;padding:10px 20px}
.seminar-hinweis{
  margin-top:20px;font-size:.8rem;color:#8b9296;line-height:1.6;max-width:680px;
}

@media(max-width:640px){
  .seminar-termin{flex-direction:column;gap:16px;padding:20px}
  .seminar-datum{
    width:auto;flex-direction:row;gap:8px;align-self:stretch;
    justify-content:flex-start;padding:8px 14px;
  }
  .sd-monat,.sd-jahr{margin:0}
  .sd-tage{font-size:1.05rem}
  .seminar-fuss{flex-direction:column;align-items:stretch;gap:12px}
  .seminar-fuss .btn{margin-left:0;text-align:center}
}

/* ---------- Consent-Dialog ----------
   Mittig statt am unteren Rand: Ein Banner unten wird als Fusszeile
   wahrgenommen und uebersehen. Die Einwilligung ist aber eine echte
   Entscheidung - die gehoert in den Blick. */
#consent-hintergrund{
  position:fixed;inset:0;z-index:99;
  background:rgba(26,29,31,.55);
  backdrop-filter:blur(2px);
  opacity:0;transition:opacity .2s ease-out;
}
#consent-hintergrund.sichtbar{opacity:1}

#consent-banner{
  position:fixed;z-index:100;
  top:50%;left:50%;
  transform:translate(-50%,-50%) scale(.97);
  width:min(560px, calc(100vw - 40px));
  max-height:calc(100vh - 40px);overflow-y:auto;
  background:#fff;border-radius:3px;
  border-top:3px solid var(--rot);
  box-shadow:0 18px 60px rgba(0,0,0,.28);
  opacity:0;transition:opacity .2s ease-out, transform .2s ease-out;
}
#consent-banner.sichtbar{opacity:1;transform:translate(-50%,-50%) scale(1)}

.consent-inhalt{padding:32px 32px 28px}
.consent-text strong{
  display:block;font-size:1.15rem;font-weight:600;
  margin-bottom:10px;color:var(--tinte);letter-spacing:-.01em;
}
.consent-text p{font-size:.92rem;color:var(--grau);line-height:1.6;margin:0}
.consent-text a{color:var(--rot);text-decoration:none;border-bottom:1px solid transparent}
.consent-text a:hover{border-bottom-color:var(--rot)}
.consent-knoepfe{
  display:flex;gap:12px;margin-top:26px;
}
.consent-knoepfe .btn{flex:1;text-align:center;font-size:.92rem;padding:13px 20px}

/* Lineal-Motiv als Signatur */
.consent-lineal{
  height:5px;margin-bottom:20px;
  background:repeating-linear-gradient(to right,
    var(--grau-hell) 0,var(--grau-hell) 1px,transparent 1px,transparent 8px);
  border-left:2px solid var(--rot);
}

@media(max-width:560px){
  .consent-inhalt{padding:26px 22px 22px}
  .consent-text strong{font-size:1.05rem}
  .consent-knoepfe{flex-direction:column-reverse}
  .consent-knoepfe .btn{width:100%}
}

/* ---------- Kontakt ---------- */
.kontakt-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px}
@media(max-width:820px){.kontakt-grid{grid-template-columns:1fr}}
.kontakt-daten{list-style:none;margin-top:26px;font-size:.98rem}
.kontakt-daten li{margin-bottom:14px;display:flex;gap:16px}
.kontakt-daten .label{
  font-family:var(--mono);font-size:.78rem;color:var(--grau-hell);
  min-width:88px;padding-top:3px;text-transform:uppercase;letter-spacing:.08em;
}
.kontakt-daten a{color:var(--tinte);text-decoration:none;border-bottom:1px solid var(--linie)}
.kontakt-daten a:hover{border-color:var(--rot)}

/* ---------- Rechtstexte ---------- */
.rechtstext{max-width:760px}
.rechtstext h2{font-size:1.3rem;margin:40px 0 12px}
.rechtstext h2:first-of-type{margin-top:0}
.rechtstext p,.rechtstext li{color:var(--grau);font-size:.95rem;margin-bottom:10px}
.rechtstext ul{padding-left:22px}
/* Lange URLs und Adressen duerfen umbrechen, sonst sprengen sie schmale Displays */
.rechtstext a{word-break:break-word;overflow-wrap:anywhere}

/* ---------- Footer ---------- */
footer.site{border-top:1px solid var(--linie);padding:36px 0;font-size:.85rem;color:var(--grau)}
.footer-zeile{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
footer.site nav{display:flex;gap:24px}
footer.site a{text-decoration:none;color:var(--grau)}
footer.site a:hover{color:var(--tinte)}