/*
Theme Name: TAO Équilibre — Kompendium
Theme URI: https://tao-equilibre.de/
Author: TAO Équilibre
Description: Gestaltung der Tierärztlichen Akademie für Osteopathie im Entwurf „Kompendium“. Inhalte, Seitenstruktur und Vorlagennamen sind gegenüber dem Vorgängertheme unverändert; erneuert sind ausschließlich Typografie, Farbe und Layout. Schriften werden lokal ausgeliefert, Bootstrap und jQuery entfallen.
Version: 1.0
Requires PHP: 8.0
Text Domain: tao-kompendium
*/

/* ==========================================================================
   1. Schriften — lokal ausgeliefert, keine Verbindung zu fremden Servern
   ========================================================================== */

@font-face{
  font-family:"Instrument Serif"; font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/instrumentserif-regular-latin.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:"Instrument Serif"; font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/instrumentserif-regular-latinext.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:"Instrument Serif"; font-style:italic; font-weight:400; font-display:swap;
  src:url("fonts/instrumentserif-italic-latin.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:"Instrument Serif"; font-style:italic; font-weight:400; font-display:swap;
  src:url("fonts/instrumentserif-italic-latinext.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:"Karla"; font-style:normal; font-weight:200 800; font-display:swap;
  src:url("fonts/karla-var-latin.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:"Karla"; font-style:normal; font-weight:200 800; font-display:swap;
  src:url("fonts/karla-var-latinext.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:"Karla"; font-style:italic; font-weight:200 800; font-display:swap;
  src:url("fonts/karla-italic-latin.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:"Karla"; font-style:italic; font-weight:200 800; font-display:swap;
  src:url("fonts/karla-italic-latinext.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;
}

/* ==========================================================================
   2. Gestaltungswerte
   ========================================================================== */

:root{
  --paper:#EFF1EE;
  --card:#FBFCFB;
  --ink:#131A18;
  --ink-2:#3B4844;
  --stone:#77837E;
  --line:#CFD8D3;
  --line-2:#E2E8E5;

  --teal:#018671;
  --teal-dk:#015B4C;
  --teal-lt:#E3EFEA;
  --red:#CD1A1A;

  --disp:"Instrument Serif",Georgia,"Times New Roman",serif;
  --ui:"Karla",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --wrap:1160px;
  --gutter:42px;
}

/* ==========================================================================
   3. Grundlagen
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--ui);
  font-weight:400;
  font-size:16.5px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto}

a{color:var(--teal);text-decoration:none;transition:color .16s}
a:hover,a:focus{color:var(--teal-dk);text-decoration:underline}

:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

::selection{background:var(--teal);color:#fff}

h1,h2,h3{
  font-family:var(--disp);
  font-weight:400;
  line-height:1.08;
  letter-spacing:-.014em;
  color:var(--ink);
  margin:0 0 .5em;
}
h1{font-size:clamp(2.3rem,4.6vw,3.5rem);line-height:1.02}
h2{font-size:clamp(1.75rem,3.2vw,2.5rem)}
h3{font-size:clamp(1.35rem,2.2vw,1.8rem)}

h4,h5,h6{
  font-family:var(--ui);
  font-weight:700;
  letter-spacing:.01em;
  line-height:1.35;
  margin:0 0 .6em;
}
h4{font-size:1.1rem}
h5{font-size:1rem}
h6{font-size:.95rem}

p{margin:0 0 1.15em}
ul,ol{margin:0 0 1.15em;padding-left:1.4em}
li{margin-bottom:.4em}

hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}

blockquote{
  margin:1.8em 0;padding:0 0 0 22px;
  border-left:2px solid var(--teal);
  font-family:var(--disp);font-size:1.35rem;font-style:italic;line-height:1.4;
  color:var(--ink);
}

strong,b{font-weight:700}

table{border-collapse:collapse;width:100%}

.tao-skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--teal);color:#fff;padding:12px 20px;
  font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.tao-skip:focus{left:0;color:#fff;text-decoration:none}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}

/* ==========================================================================
   4. Kopfbereich
   ========================================================================== */

.tao-head{background:var(--paper);position:relative;z-index:50}

.tao-head-top{
  display:flex;align-items:flex-end;gap:22px;
  padding:22px 0 16px;
}
.tao-head-top .brandlink{display:flex;align-items:flex-end;gap:18px;text-decoration:none}
.tao-head-top .brandlink:hover{text-decoration:none}
.tao-head-top img.tao-logo{height:52px;width:auto;display:block;flex:none}
.tao-brand-name{
  display:block;
  font-family:var(--disp);font-size:31px;line-height:1.05;
  letter-spacing:-.015em;color:var(--ink);
}
.tao-brand-sub{
  display:block;
  font-size:10.5px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;
  color:var(--stone);margin-top:5px;
}
.tao-brand-sub i{font-style:normal;color:var(--red);font-weight:700}
.tao-head-top .spacer{flex:1}
.tao-head-meta{
  text-align:right;font-size:10.5px;font-weight:500;letter-spacing:.17em;
  text-transform:uppercase;color:var(--stone);line-height:1.8;
}

/* --- Navigation --- */
.tao-nav{
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--line);
  position:relative;
}
.tao-nav-inner{display:flex;align-items:stretch;gap:0}
.tao-nav ul{list-style:none;margin:0;padding:0}

.tao-nav-list{display:flex;align-items:stretch;flex-wrap:wrap;flex:1}
.tao-nav li{margin:0;position:relative}

.tao-nav a,
.tao-nav .tao-nav-toggle{
  display:block;
  font-family:var(--ui);font-size:13px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-2);
  padding:13px 20px 13px 0;
  background:none;border:0;cursor:pointer;
  text-align:left;
}
.tao-nav a:hover,.tao-nav .tao-nav-toggle:hover,
.tao-nav li:hover > .tao-nav-toggle{color:var(--teal);text-decoration:none}
.tao-nav .tao-nav-toggle::after{
  content:"";display:inline-block;margin-left:8px;
  border:4px solid transparent;border-top-color:currentColor;
  transform:translateY(2px);
}

.tao-nav .tao-portal{
  margin-left:auto;align-self:center;
  background:var(--teal);color:#fff;
  padding:8px 18px;letter-spacing:.13em;
}
.tao-nav .tao-portal:hover{background:var(--teal-dk);color:#fff;text-decoration:none}

/* Aufklappmenüs */
.tao-nav .sub{
  position:absolute;top:100%;left:0;min-width:270px;
  background:var(--card);
  border:1px solid var(--line);
  box-shadow:0 14px 34px -18px rgba(19,26,24,.5);
  padding:6px 0;
  display:none;z-index:60;
}
.tao-nav li:hover > .sub,
.tao-nav li.is-open > .sub{display:block}
.tao-nav .sub a{
  padding:9px 20px;font-size:12px;letter-spacing:.08em;
  text-transform:none;font-weight:500;color:var(--ink-2);
  white-space:normal;
}
.tao-nav .sub a:hover{background:var(--teal-lt);color:var(--teal-dk)}

.tao-burger{
  display:none;
  margin-left:auto;align-self:center;
  background:none;border:1px solid var(--line);
  padding:9px 12px;cursor:pointer;
}
.tao-burger span{display:block;width:20px;height:2px;background:var(--ink);margin:4px 0}

/* ==========================================================================
   5. Seitenkopf mit Tafel
   ========================================================================== */

.tao-pagehead{padding:52px 0 6px}
.tao-pagehead-grid{display:grid;gap:38px;align-items:center;grid-template-columns:1fr}
.tao-pagehead.has-figure .tao-pagehead-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}

.tao-eyebrow{
  display:flex;align-items:center;gap:14px;
  font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--teal);margin-bottom:18px;
}
.tao-eyebrow::after{content:"";flex:1;height:1px;background:var(--line)}

.tao-pagehead h1{margin:0;max-width:18ch}

.tao-figure{
  background:var(--card);border:1px solid var(--line);padding:5px;margin:0;
}
.tao-figure > span{display:block;border:1px solid var(--line-2);padding:5px;background:var(--card)}
.tao-figure img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}

/* --- Parallaxband mit dem Kopfbild ---------------------------------------
   Der Rahmen schneidet das Bild an; das Bild selbst ist höher und wird beim
   Scrollen verschoben. Steht JavaScript nicht bereit oder hat der Besucher
   Bewegung abbestellt, bleibt es einfach stehen — sichtbar ist es immer. */

.tao-hero{
  position:relative;
  height:clamp(280px,44vh,460px);
  overflow:hidden;
  background:var(--ink);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--ink);
}
.tao-hero-media{
  position:absolute;left:0;right:0;top:-14%;
  height:128%;
  will-change:transform;
}
.tao-hero.is-static .tao-hero-media{top:0;height:100%;will-change:auto}
.tao-hero-media img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:center 45%;
}
.tao-hero-veil{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(19,26,24,.88) 0%,rgba(19,26,24,.42) 42%,rgba(19,26,24,.12) 100%);
}
/* Trägt die Seite ihre Überschrift selbst, bleibt das Band ein reines Bild —
   dann genügt ein leichter Schleier, damit die Tafel darunter absetzt. */
.tao-hero.is-quiet .tao-hero-veil{
  background:linear-gradient(to top,rgba(19,26,24,.34) 0%,rgba(19,26,24,.06) 45%,transparent 100%);
}
.tao-hero-body{
  position:absolute;left:0;right:0;bottom:0;
  /* Die Inhaltstafel schiebt sich 42 px über das Band — so viel Abstand
     braucht der Titel mindestens, damit er nicht angeschnitten wird. */
  padding-bottom:74px;
}
.tao-hero-body h1{
  margin:0;color:#fff;max-width:20ch;
  text-shadow:0 2px 24px rgba(0,0,0,.35);
}
.tao-eyebrow-light{color:#8FD3C1}
.tao-eyebrow-light::after{background:rgba(255,255,255,.28)}

/* Die Inhaltstafel schiebt sich ein Stück über das Band. */
.tao-main.has-hero{padding-top:0}
.tao-main.has-hero .page-content{
  margin-top:-42px;
  position:relative;z-index:2;
  box-shadow:0 -1px 0 var(--line);
}

/* ==========================================================================
   6. Inhaltsfläche
   ========================================================================== */

.tao-main{padding:26px 0 70px}

.page-content{
  background:var(--card);
  border:1px solid var(--line);
  padding:44px 48px 48px;
  margin-top:22px;
}
.page-content::after{content:"";display:table;clear:both}

.page-content > h1:first-child,
.page-content > h2:first-child{margin-top:0}

.page-content h2{margin-top:1.6em}
.page-content h3{margin-top:1.5em}
.page-content h4{margin-top:1.6em;color:var(--teal-dk)}

/* Fließtext angenehm breit halten, ohne die Rasterelemente einzuengen */
.page-content > p,
.page-content > ul,
.page-content > ol{max-width:74ch}

/* ==========================================================================
   7. Fußbereich
   ========================================================================== */

.tao-foot{
  border-top:1px solid var(--ink);
  background:var(--paper);
  padding:52px 0 44px;
}
.tao-foot-grid{
  display:grid;gap:44px;
  grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) minmax(0,1fr);
}
.tao-foot h4{
  font-size:10.5px;font-weight:700;letter-spacing:.19em;text-transform:uppercase;
  color:var(--stone);margin-bottom:14px;
}
.tao-foot p{font-size:15px;line-height:1.78;color:var(--ink-2);margin:0}
.tao-foot .name{
  font-family:var(--disp);font-size:22px;color:var(--ink);
  display:block;margin-bottom:6px;letter-spacing:-.012em;
}
.tao-foot a{color:var(--ink-2)}
.tao-foot a:hover{color:var(--teal)}
.tao-foot-bottom{
  margin-top:40px;padding-top:20px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-size:10.5px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  color:var(--stone);
}
.tao-foot-bottom .r{color:var(--red);font-weight:700}
.tao-foot-bottom nav a{margin-right:18px;color:var(--stone)}

/* ==========================================================================
   8. Kursbereich: Videos, Downloads, Anmeldung
   ========================================================================== */

.tao-video-nav{display:flex;align-items:center;gap:18px;padding:14px 0}
.tao-back,.tao-logout{
  font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  padding:9px 18px;border:1px solid var(--line);color:var(--ink-2);
}
.tao-back:hover,.tao-logout:hover{border-color:var(--teal);color:var(--teal);text-decoration:none}
.tao-logout{margin-left:auto;border-color:var(--red);color:var(--red)}
.tao-logout:hover{background:var(--red);color:#fff;border-color:var(--red)}

/* Videoüberschriften und Player */
.page-content video{
  display:block;width:100%;height:auto;max-width:100%;
  background:#000;border:1px solid var(--line);
}
.centerVertically{
  margin:0 0 34px;
  background:var(--card);border:1px solid var(--line);padding:5px;
}
.centerVertically video{border:0}

/* Downloadliste */
.page-content a[download]{
  display:block;margin:0 0 2px !important;
  padding:12px 16px;
  border-bottom:1px solid var(--line-2);
  font-size:15px !important;
  color:var(--ink-2);
  transition:background .16s;
}
.page-content a[download]::before{
  content:"\2193";display:inline-block;width:22px;color:var(--teal);font-weight:700;
}
.page-content a[download]:hover{background:var(--teal-lt);color:var(--teal-dk);text-decoration:none}

/* Kursübersicht: die Kurstitel sind verlinkte Überschriften */
.page-content > a > h1,
.tao-main > a > h1{
  font-size:1.6rem;margin:0;
  padding:18px 22px;
  background:var(--card);border:1px solid var(--line);
  transition:background .16s,border-color .16s;
}
.page-content > a,
.tao-main > a{display:block;margin-bottom:10px}
.page-content > a:hover > h1,
.tao-main > a:hover > h1{background:var(--teal-lt);border-color:var(--teal)}
.page-content > a:hover,
.tao-main > a:hover{text-decoration:none}

/* Anmelde- und Kontaktformulare */
.loginBox,.contactform,.kundendaten{max-width:520px}
.contactform{padding-left:0}

input[type=text],input[type=email],input[type=password],
input[type=tel],input[type=number],input[type=date],
select,textarea{
  font-family:var(--ui);font-size:16px;color:var(--ink);
  width:100%;padding:11px 14px;
  background:#fff;border:1px solid var(--line);
  transition:border-color .16s;
}
input[type=text]:focus,input[type=email]:focus,input[type=password]:focus,
input[type=tel]:focus,input[type=number]:focus,input[type=date]:focus,
select:focus,textarea:focus{border-color:var(--teal);outline:none}
textarea{min-height:150px;resize:vertical}

label{
  display:block;margin:16px 0 6px;
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);
}

input[type=checkbox],input[type=radio]{
  width:17px;height:17px;accent-color:var(--teal);
  vertical-align:-3px;margin-right:9px;
}

input[type=submit],button[type=submit],.tao-btn{
  font-family:var(--ui);font-size:12.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  padding:14px 28px;margin-top:22px;
  background:var(--teal);color:#fff;border:1px solid var(--teal);
  cursor:pointer;transition:background .16s;
  width:auto;
}
input[type=submit]:hover,button[type=submit]:hover,.tao-btn:hover{
  background:var(--teal-dk);border-color:var(--teal-dk);color:#fff;text-decoration:none;
}

.error{color:var(--red);font-weight:600}
.error:not(:empty){
  background:#FBE8E6;border:1px solid #E9A9A3;
  padding:12px 16px;margin-bottom:20px;
}

/* Prüfungsbogen */
.subquestion{margin-left:26px}

/* --- Anmeldeformular --------------------------------------------------- */

.tao-anmeldung-unter{font-size:1.05rem;color:var(--ink-2);margin-top:-.4em}
.tao-anmeldung-termin{
  font-size:11.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--teal);margin-bottom:1.6em;
}
.tao-feldpaar{display:grid;gap:0 22px;grid-template-columns:1fr 1fr}
@media (max-width:640px){ .tao-feldpaar{grid-template-columns:1fr} }

.tao-feldgruppe{
  border:1px solid var(--line);background:var(--card);
  padding:20px 24px 24px;margin:28px 0;
}
.tao-feldgruppe legend{
  font-size:11px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--teal);padding:0 8px;
}
.tao-optional{color:var(--stone);font-weight:600;margin-left:8px}
.tao-gruppe-hinweis{font-size:14.5px;color:var(--ink-2);margin:0 0 4px}
.tao-gruppe-art{
  font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--stone);margin:0 0 14px;
}

.tao-optionsliste{list-style:none;padding:0;margin:0;border-top:1px solid var(--line-2)}
.tao-optionsliste li{margin:0;border-bottom:1px solid var(--line-2)}
.tao-optionsliste label{
  display:grid;grid-template-columns:24px 1fr auto;gap:14px;align-items:start;
  padding:14px 8px;cursor:pointer;transition:background .14s;
}
.tao-optionsliste label:hover{background:var(--teal-lt)}
.tao-optionsliste input{margin:3px 0 0}
.tao-option-text{display:flex;flex-direction:column;gap:3px;line-height:1.5}
.tao-option-label{font-weight:600;color:var(--ink)}
.tao-option-hinweis{font-size:13.5px;color:var(--stone)}
.tao-option-frueh{
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--teal);
}
.tao-option-preis{
  font-family:var(--disp);font-size:1.35rem;color:var(--ink);
  white-space:nowrap;align-self:center;font-variant-numeric:tabular-nums;
}
.tao-option-preis.ist-frueh{color:var(--teal)}

.tao-summe{
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  border-top:2px solid var(--ink);margin:26px 0 0;padding-top:14px;
}
.tao-summe span{
  font-size:11px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--stone);
}
.tao-summe b{
  font-family:var(--disp);font-size:1.9rem;font-weight:400;color:var(--ink);
  font-variant-numeric:tabular-nums;
}

.tao-zustimmung{margin:14px 0}
/* Das Grid hat genau zwei Zellen: Kaestchen und Text. Der Text muss
   deshalb in EINEM Element stehen — sonst wird jeder Link zur eigenen
   Zelle und rutscht in die schmale Kaestchenspalte. */
.tao-zustimmung label{
  display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start;
  font-size:15px;line-height:1.55;color:var(--ink-2);
  text-transform:none;letter-spacing:0;font-weight:400;cursor:pointer;
}
.tao-zustimmung label > span{display:block;min-width:0}
.tao-zustimmung label input[type=checkbox]{
  width:18px;height:18px;margin:2px 0 0;accent-color:var(--teal);
}
.tao-zustimmung a{color:var(--teal);text-decoration:underline;
  text-underline-offset:2px}

/* --- Anmeldung: Einleitung, Bild ---------------------------------------- */

.tao-anmeldung-bild{
  margin:0 0 26px;border-radius:3px;overflow:hidden;
  aspect-ratio:21/6;background:var(--line-2);
}
.tao-anmeldung-bild img{width:100%;height:100%;object-fit:cover;display:block}

.tao-anmeldung-einleitung{
  margin:0 0 30px;padding:0 0 22px;
  border-bottom:1px solid var(--line);
  font-size:16.5px;line-height:1.7;color:var(--ink-2);max-width:62ch;
}
.tao-anmeldung-einleitung .tao-anmeldung-kurs{
  display:block;margin:10px 0 2px;
  font-family:var(--disp);font-weight:400;font-size:25px;line-height:1.25;
  color:var(--ink);letter-spacing:-.01em;
}
.tao-anmeldung-einleitung .tao-anmeldung-termin{
  display:block;margin:0 0 2px;font-size:14px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--teal);
}
.tao-anmeldung-einleitung .tao-anmeldung-dozent{
  display:block;margin:6px 0 10px;font-size:15px;color:var(--stone);
}
.tao-anmeldung-einleitung b{font-weight:700;color:var(--ink)}

/* --- Kursmodul: Lektionen und Unterlagen ------------------------------- */

.tao-kursbereich-user{font-size:12.5px;color:var(--stone);letter-spacing:.02em}
.tao-kursbereich-user b{color:var(--ink);font-weight:700}

.tao-modul-meta{
  font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--stone);margin:0 0 4px;
}

.tao-hinweis{
  background:var(--teal-lt);border:1px solid var(--teal);
  padding:16px 20px;margin:20px 0;font-size:15px;color:var(--ink-2);
}

.tao-lektion{
  margin:34px 0 0;padding-top:30px;
  border-top:1px solid var(--line-2);
}
.tao-lektion:first-of-type{border-top:0;padding-top:14px}

.tao-lektion-kopf{display:flex;flex-direction:column;gap:5px;margin-bottom:16px}
.tao-lektion-nr{
  font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--teal);
}
.tao-lektion-kopf h2{
  margin:0;font-size:clamp(1.4rem,2.4vw,1.95rem);line-height:1.12;
}

/* Der Player sitzt in derselben Tafelfassung wie die Bilder. */
.tao-player{
  background:var(--card);border:1px solid var(--line);padding:5px;
  position:relative;
}
.tao-player video{
  display:block;width:100%;height:auto;aspect-ratio:16/9;
  background:#0B100F;border:1px solid var(--line-2);
}
.tao-player-hinweis{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  margin:0;padding:9px 18px;
  background:rgba(19,26,24,.82);color:#fff;
  font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  pointer-events:none;
}
.tao-player-hinweis[hidden]{display:none}

/* Unterlagen */
.tao-unterlagen{margin-top:44px;padding-top:30px;border-top:1px solid var(--ink)}
.tao-unterlagen h2{font-size:1.7rem;margin-bottom:14px}
.tao-unterlagen ul{list-style:none;padding:0;margin:0}
.tao-unterlagen li{margin:0}
.tao-unterlagen a{
  display:flex;align-items:baseline;gap:14px;
  padding:13px 16px;
  border-bottom:1px solid var(--line-2);
  color:var(--ink-2);transition:background .16s;
}
.tao-unterlagen a::before{
  content:"\2193";color:var(--teal);font-weight:700;flex:none;width:14px;
}
.tao-unterlagen a:hover{background:var(--teal-lt);color:var(--teal-dk);text-decoration:none}
.tao-unterlagen .tao-datei-name{flex:1}
.tao-unterlagen .tao-datei-typ{
  font-size:10px;font-weight:700;letter-spacing:.14em;color:var(--stone);
  border:1px solid var(--line);padding:2px 7px;flex:none;
}

/* Anmeldung am Kursbereich */
.tao-login{max-width:440px}
.tao-login h1{font-size:clamp(1.9rem,3.4vw,2.6rem);margin-bottom:.6em}
.tao-login .loginBox{display:flex;flex-direction:column}
.tao-login label:first-of-type{margin-top:0}
.tao-login input[type=submit]{align-self:flex-start}
.tao-login-hilfe{
  margin-top:30px;padding-top:20px;border-top:1px solid var(--line-2);
  font-size:14px;color:var(--stone);
}

/* --- Übungs- und Prüfungsmodus ---------------------------------------- */

.tao-fortschritt{margin-bottom:34px}
.tao-fortschritt-balken{
  display:flex;height:8px;background:var(--line-2);
  border:1px solid var(--line);overflow:hidden;
}
.tao-fortschritt-balken .sitzt{background:var(--teal)}
.tao-fortschritt-balken .wackelig{background:#D9A441}
.tao-fortschritt-zahlen{
  display:flex;gap:26px;list-style:none;padding:0;margin:12px 0 0;
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--stone);
}
.tao-fortschritt-zahlen b{
  font-family:var(--disp);font-size:20px;font-weight:400;letter-spacing:0;
  color:var(--ink);margin-right:6px;
}

.tao-fragebogen{
  background:var(--card);border:1px solid var(--line);
  padding:32px 34px 34px;
}
.tao-fragebogen.ist-richtig{border-color:var(--teal);border-left-width:4px}
.tao-fragebogen.ist-falsch{border-color:var(--red);border-left-width:4px}

.tao-frage-typ{
  font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--stone);margin:0 0 12px;
}
.tao-frage-text{margin:0 0 6px;font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.14}
.tao-frage-zusatz{color:var(--ink-2);font-style:italic;margin:0 0 6px}

.tao-optionen{list-style:none;padding:0;margin:22px 0 24px;border-top:1px solid var(--line-2)}
.tao-optionen li{margin:0;border-bottom:1px solid var(--line-2)}
/* Antwortoptionen sind ganze Sätze, keine Feldbeschriftungen — die
   Versalien der allgemeinen label-Regel machen sie unlesbar. */
.tao-optionen label{
  display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:12px;align-items:start;
  padding:14px 12px;cursor:pointer;line-height:1.6;
  text-transform:none;letter-spacing:0;font-weight:400;
  font-size:15.5px;color:var(--ink-2);
  transition:background .14s;
}
.tao-optionen label:hover{background:var(--teal-lt)}
.tao-optionen input{margin:3px 0 0}
.tao-optionen input:disabled + span{cursor:default}
.tao-optionen li.treffer{background:var(--teal-lt)}
.tao-optionen li.treffer label:hover{background:var(--teal-lt)}
.tao-optionen li.fehlgriff{background:#FBE8E6}
.tao-optionen li.fehlgriff label:hover{background:#FBE8E6}
.tao-optionen li.uebersehen{background:transparent;box-shadow:inset 3px 0 0 var(--teal)}
.tao-marke{
  font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:3px 8px;border:1px solid currentColor;white-space:nowrap;align-self:center;
}
.tao-optionen li.uebersehen .tao-marke{color:var(--teal)}
.tao-optionen li.fehlgriff .tao-marke{color:var(--red)}

.tao-auswertung{
  margin-top:26px;padding-top:24px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:12px;
}
.tao-verdikt{
  font-family:var(--disp);font-size:1.5rem;line-height:1.2;margin:0;
}
.ist-richtig .tao-verdikt{color:var(--teal-dk)}
.ist-falsch .tao-verdikt{color:var(--red)}
.tao-begruendung{margin:0;color:var(--ink-2)}
.tao-quelle{
  margin:0;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--stone);
}
.tao-quelle b{color:var(--teal);font-weight:600}
.tao-weiter{margin:8px 0 0}
.tao-weiter .tao-btn{display:inline-block;margin-top:0}

/* Kursübersicht: die Module als Tafeln */
.tao-kursliste{display:grid;gap:12px;margin-top:8px}
.tao-kursliste a{
  display:flex;align-items:baseline;gap:18px;
  background:var(--card);border:1px solid var(--line);
  padding:20px 24px;color:var(--ink);
  transition:background .16s,border-color .16s;
}
.tao-kursliste a:hover{background:var(--teal-lt);border-color:var(--teal);text-decoration:none}
.tao-kursliste .nr{
  font-size:10.5px;font-weight:700;letter-spacing:.18em;color:var(--teal);
  flex:none;min-width:62px;
}
.tao-kursliste .titel{font-family:var(--disp);font-size:1.45rem;line-height:1.15;flex:1}
.tao-kursliste .pfeil{color:var(--teal);font-size:1.1rem;flex:none}

/* ==========================================================================
   9. Klassen aus den Seiteninhalten
   Diese Namen stehen in den Texten der 77 Seiten und dürfen sich nicht
   ändern. Sie werden hier neu gestaltet, nicht ersetzt.
   ========================================================================== */

/* Das erste Bild einer Seite dient nur als Quelle für das Kopfbild
   und bleibt im Fließtext unsichtbar — wie im Vorgängertheme. */
.headerimage{display:none !important;width:0 !important;height:0 !important}

/* In einzelnen Seitentexten steht ein leeres <img/> ohne Adresse — ein Rest
   aus dem Editor. Statt den Text zu ändern, wird es hier ausgeblendet.
   (Sauberer wäre, es im Editor zu entfernen.) */
.page-content img:not([src]),
.page-content img[src=""]{display:none}

/* Hervorgehobener Textblock — wird zur Tafel */
.block{
  background:var(--card);
  border:1px solid var(--line);
  padding:26px 28px;
  margin:26px 0;
}
.block > :last-child{margin-bottom:0}
.block ul{list-style:none;padding-left:0}
.block ul li{
  margin-top:10px;padding-bottom:9px;
  border-bottom:1px solid var(--line-2);
  font-size:16px;
}
.block ul li:last-child{border-bottom:0}

/* Bild als gerahmte Tafel */
.thumbnail,.img-thumbnail{
  background:var(--card);
  border:1px solid var(--line);
  padding:5px;
  margin-bottom:22px;
  display:block;
}

/* Hervorgehobener Kasten */
.special{
  background:var(--teal);
  color:#fff;
  padding:26px 28px;
  margin:26px 0;
  border:1px solid var(--teal-dk);
}
.special a{color:#fff;text-decoration:underline}
.special > :last-child{margin-bottom:0}

/* Terminlisten */
.terminliste{
  width:100%;
  margin:24px 0;
  background:var(--card);
  border:1px solid var(--line);
}
.terminliste td,.terminliste th{
  padding:12px 16px;
  border-bottom:1px solid var(--line-2);
  vertical-align:top;
  font-size:15px;
  color:var(--ink-2);
}
.terminliste tr:last-child td{border-bottom:0}
.terminliste td:first-child{
  font-weight:700;color:var(--ink);white-space:nowrap;
  border-right:1px solid var(--line-2);
}

/* Veranstaltungs- und Impressumslisten */
.veranstaltungen ul,.impressum ul,.redq ul{list-style:none;padding-left:0}
.veranstaltungen li,.impressum li,.redq li{
  padding:14px 0;border-bottom:1px solid var(--line-2);
}
.veranstaltungen li:last-child,.impressum li:last-child{border-bottom:0}
.veranstaltungsheader{
  font-family:var(--disp);font-size:1.6rem;color:var(--ink);
  margin:1.6em 0 .5em;
}

/* Termin mit Datum links */
.event{width:100%;overflow:hidden;padding:12px 0;border-bottom:1px solid var(--line-2)}
.date{
  float:left;width:175px;
  font-weight:700;color:var(--teal);
  font-size:14px;letter-spacing:.03em;
}
.dates{overflow:hidden}

.bildunterschrift{
  font-size:13.5px;color:var(--stone);font-style:italic;
  margin-top:-14px;margin-bottom:22px;
}

.red{color:var(--red);font-weight:700}

.centered{text-align:center;margin-top:2.2em}

.anchor{display:block;position:relative;top:-90px;visibility:hidden}

.left-align{text-align:left}

.msg,.answer{margin-bottom:1em}

/* ==========================================================================
   10. Raster aus den Seiteninhalten
   Neun Seiten verwenden col-md-*, col-sm-* und col-xs-* direkt im Text.
   Nachgebaut mit denselben Umbruchpunkten wie zuvor, ohne Fremdbibliothek.
   ========================================================================== */

[class*="col-xs-"],[class*="col-sm-"],[class*="col-md-"],[class*="col-lg-"]{
  position:relative;min-height:1px;padding-left:15px;padding-right:15px;display:block;
}
.col-xs-12{width:100%;float:left}
.col-xs-6{width:50%;float:left}

@media (min-width:768px){
  .col-sm-12{width:100%;float:left}
  .col-sm-6{width:50%;float:left}
  .col-sm-4{width:33.3333%;float:left}
}
@media (min-width:992px){
  .col-md-12{width:100%;float:left}
  .col-md-8{width:66.6666%;float:left}
  .col-md-6{width:50%;float:left}
  .col-md-4{width:33.3333%;float:left}
  .col-md-3{width:25%;float:left}
}
.row{margin-left:-15px;margin-right:-15px}
.row::after{content:"";display:table;clear:both}

/* ==========================================================================
   11. Bildfolge auf der Startseite
   ========================================================================== */

.tao-slider{position:relative;margin:0 0 8px;background:var(--card);border:1px solid var(--line);padding:5px}
.tao-slider-frame{
  position:relative;overflow:hidden;border:1px solid var(--line-2);
  aspect-ratio:16/7;background:var(--line-2);
}
/* Die Folien liegen übereinander und werden überblendet — nicht aus- und
   eingeblendet. So bleiben sie für den Browser sichtbar und laden ihr Bild
   rechtzeitig, statt beim Weiterschalten kurz weiß zu bleiben. */
.tao-slide{
  position:absolute;inset:0;margin:0;
  opacity:0;transition:opacity .7s ease;
  pointer-events:none;
}
.tao-slide.is-active{opacity:1;pointer-events:auto;z-index:1}
.tao-slide img,.homepage_bilder{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:center 50%;
}
.tao-slide-caption{
  position:absolute;left:0;right:0;bottom:0;
  padding:34px 34px 26px;
  background:linear-gradient(to top,rgba(19,26,24,.86),rgba(19,26,24,0));
  color:#fff;
}
.tao-slide-caption h3{
  font-family:var(--disp);font-size:clamp(1.15rem,2.3vw,1.85rem);
  color:#fff;margin:0 0 8px;line-height:1.24;font-style:italic;
}
.tao-slide-caption cite{
  font-family:var(--ui);font-style:normal;
  font-size:11px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  color:rgba(255,255,255,.82);
}
.tao-slider-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  background:rgba(251,252,251,.9);border:1px solid var(--line);
  width:42px;height:42px;cursor:pointer;
  font-size:18px;color:var(--ink);line-height:1;
  display:grid;place-items:center;
  transition:background .16s;
}
.tao-slider-nav:hover{background:var(--teal);color:#fff;border-color:var(--teal)}
.tao-slider-prev{left:16px}
.tao-slider-next{right:16px}
.tao-slider-dots{display:flex;justify-content:center;gap:8px;padding:14px 0 4px}
.tao-slider-dots button{
  width:8px;height:8px;padding:0;border-radius:50%;
  border:1px solid var(--stone);background:none;cursor:pointer;
}
.tao-slider-dots button[aria-current="true"]{background:var(--teal);border-color:var(--teal)}

/* ==========================================================================
   12. Schmale Bildschirme
   ========================================================================== */

@media (max-width:991px){
  :root{--gutter:26px}

  .tao-pagehead.has-figure .tao-pagehead-grid{grid-template-columns:1fr}
  .tao-foot-grid{grid-template-columns:1fr 1fr}
  .page-content{padding:32px 26px 36px}
}

@media (max-width:767px){
  body{font-size:16px}

  .tao-head-top{flex-wrap:wrap;gap:14px;padding-bottom:14px}
  .tao-head-top img.tao-logo{height:42px}
  .tao-brand-name{font-size:25px}
  .tao-head-meta{display:none}

  .tao-burger{display:block}
  .tao-nav-inner{flex-wrap:wrap}
  .tao-nav-list{
    display:none;flex-direction:column;width:100%;
    padding-bottom:10px;
  }
  .tao-nav.is-open .tao-nav-list{display:flex}
  .tao-nav a,.tao-nav .tao-nav-toggle{padding:12px 0;width:100%}
  .tao-nav .sub{
    position:static;display:none;min-width:0;width:100%;
    border:0;border-left:2px solid var(--teal);
    box-shadow:none;background:transparent;padding:0 0 8px 16px;
  }
  .tao-nav li:hover > .sub{display:none}
  .tao-nav li.is-open > .sub{display:block}
  .tao-nav .tao-portal{margin:8px 0 14px;text-align:center;width:100%}

  .tao-pagehead{padding:32px 0 4px}
  .tao-foot-grid{grid-template-columns:1fr;gap:30px}

  .date{float:none;width:auto;display:block;margin-bottom:4px}

  .tao-slide-caption{padding:20px 18px 16px;position:static;background:var(--ink)}
  .tao-slider-nav{width:34px;height:34px}
}

/* ==========================================================================
   13. Druck und Barrierefreiheit
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}

@media print{
  .tao-nav,.tao-burger,.tao-slider-nav,.tao-slider-dots,.tao-video-nav{display:none}
  body{background:#fff;font-size:11pt}
  .page-content{border:0;padding:0;background:#fff}
  a{color:#000;text-decoration:underline}
}

/* --- Kursstatus: die Ampel ---------------------------------------------- */

.tao-status{
  display:inline-flex;align-items:center;gap:7px;vertical-align:middle;
  white-space:nowrap;
}
.tao-status-punkt{
  width:10px;height:10px;border-radius:50%;flex:0 0 auto;
  background:var(--status-farbe,#fff);
  box-shadow:0 0 0 1px var(--status-rand,var(--line)) inset,
             0 0 0 3px var(--status-hof,transparent);
}
/* In den Seitentexten steht der Hinweis in einer eigenen Zeile unter dem
   Anmeldelink — in den Termintabellen sind die Spalten zu schmal, um ihn
   daneben zu setzen, ohne dass die Zeile umbricht. */
.tao-status.ist-zeile{display:flex;margin:3px 0 0}

.tao-status.hat-text .tao-status-text{
  font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--status-schrift,var(--stone));
}

.tao-status--vorbereitung{--status-farbe:#fff;--status-rand:#B9C0BB;--status-schrift:#7A837D}
.tao-status--teilnehmer  {--status-farbe:#E08A1E;--status-rand:#E08A1E;--status-schrift:#9C5D0B;
                          --status-hof:rgba(224,138,30,.16)}
.tao-status--findet_statt{--status-farbe:#018671;--status-rand:#018671;--status-schrift:#016B5B;
                          --status-hof:rgba(1,134,113,.16)}
.tao-status--abgesagt    {--status-farbe:#CD1A1A;--status-rand:#CD1A1A;--status-schrift:#A31414;
                          --status-hof:rgba(205,26,26,.16)}

.tao-status-legende{
  display:flex;flex-wrap:wrap;gap:8px 20px;margin:14px 0 0;padding:12px 0 0;
  border-top:1px solid var(--line);
}

/* --- Standorte seitenweise ---------------------------------------------- */

.tao-standorte-kopf{margin:0 0 26px}
.tao-standorte-reiter{
  display:flex;flex-wrap:wrap;gap:8px;
}
.tao-standort-reiter{
  display:flex;align-items:center;gap:9px;
  padding:11px 16px;border:1px solid var(--line);border-radius:2px;
  background:var(--card);color:var(--ink-2);cursor:pointer;
  font:inherit;font-size:13px;letter-spacing:.02em;
  transition:border-color .15s,background .15s,color .15s;
}
.tao-standort-reiter b{font-weight:700;color:var(--ink)}
.tao-standort-reiter > span{color:var(--stone);font-variant-numeric:tabular-nums}
.tao-standort-reiter:hover{border-color:var(--stone)}
/* Dunkler statt teal: auf Teal wäre der grüne Statuspunkt unsichtbar. */
.tao-standort-reiter[aria-selected="true"]{
  border-color:var(--ink);background:var(--ink);
}
.tao-standort-reiter[aria-selected="true"] b{color:#fff}
.tao-standort-reiter[aria-selected="true"] > span{color:rgba(255,255,255,.62)}
.tao-standort-reiter[aria-selected="true"] .tao-status-punkt{
  box-shadow:0 0 0 1px rgba(255,255,255,.55) inset,
             0 0 0 3px var(--status-hof,rgba(255,255,255,.14));
}
.tao-standort-reiter:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

/* Ohne JavaScript bleibt alles untereinander stehen wie bisher. */
.tao-standorte-kopf,
.tao-standorte-blaettern{display:none}
.tao-standorte.is-aktiv .tao-standorte-kopf{display:block}
.tao-standorte.is-aktiv .tao-standorte-blaettern{display:flex}
.tao-standorte.is-aktiv .tao-standort-tafel[hidden]{display:none}
.tao-standort-tafel:focus{outline:none}
.tao-standort-tafel > h1:first-child{margin-top:0}

.tao-standorte-blaettern{
  align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin:30px 0 0;padding:18px 0 0;border-top:1px solid var(--line);
}
.tao-standorte-blaettern button{
  padding:10px 16px;border:1px solid var(--line);border-radius:2px;
  background:var(--card);color:var(--ink-2);cursor:pointer;
  font:inherit;font-size:13px;font-weight:700;letter-spacing:.04em;
}
.tao-standorte-blaettern button:hover:not(:disabled){border-color:var(--teal);color:var(--teal)}
.tao-standorte-blaettern button:disabled{opacity:.4;cursor:default}
.tao-standorte-zaehler{
  margin:0;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--stone);
}
.tao-standorte-zaehler b{color:var(--ink)}

@media (max-width:640px){
  .tao-standorte-blaettern{justify-content:center}
  .tao-standorte-zaehler{order:-1;width:100%;text-align:center}
}

/* --- Scharfe Prüfung ---------------------------------------------------- */

.tao-pruefung-kopf{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin:0 0 22px;padding:0 0 16px;border-bottom:1px solid var(--line);
}
.tao-pruefung-lage{margin:0;font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--stone)}
.tao-pruefung-lage b{color:var(--ink);font-size:16px}
.tao-pruefung-lage span{margin:0 6px;color:var(--line)}

.tao-restzeit{margin:0;display:flex;align-items:baseline;gap:8px}
.tao-restzeit-wert{
  font-family:var(--disp);font-size:30px;line-height:1;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.tao-restzeit-marke{font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--stone)}
/* Die letzten fünf Minuten sollen auffallen, ohne zu blinken —
   Blinken lenkt ab, und ablenken will man hier niemanden. */
.tao-restzeit.ist-knapp .tao-restzeit-wert{color:var(--red)}
.tao-restzeit.ist-aus   .tao-restzeit-wert{color:var(--red)}

.tao-pruefung-blaettern{
  display:flex;gap:12px;justify-content:space-between;flex-wrap:wrap;
  margin:22px 0 0;
}
/* Zwei Klassen, damit die Regel button[type=submit] uebersticht — sonst
   faerbt die allgemeine Knopfregel den stillen Knopf voll ein. Gilt
   ueberall, nicht nur im Pruefungsblaetterer. */
.tao-btn.tao-btn-still{
  background:transparent;color:var(--ink-2);border:1px solid var(--line);
}
.tao-btn.tao-btn-still:hover:not(:disabled){
  border-color:var(--ink);color:var(--ink);background:transparent;
}
.tao-pruefung-blaettern .tao-btn:disabled{opacity:.35;cursor:default}

.tao-fragenuebersicht{margin:34px 0 0;padding:20px 0 0;border-top:1px solid var(--line)}
.tao-uebersicht-marke{margin:0 0 12px;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--stone)}
.tao-fragenuebersicht ul{display:flex;flex-wrap:wrap;gap:7px;list-style:none;margin:0;padding:0}
.tao-fragenuebersicht .tao-fragenmarke{
  width:38px;height:38px;padding:0;border:1px solid var(--line);border-radius:2px;
  background:var(--card);color:var(--stone);cursor:pointer;
  font:inherit;font-size:13px;letter-spacing:0;font-variant-numeric:tabular-nums;
}
.tao-fragenuebersicht .tao-fragenmarke:hover{border-color:var(--stone);color:var(--ink)}
.tao-fragenuebersicht .tao-fragenmarke.ist-beantwortet{
  border-color:var(--teal);color:var(--teal);font-weight:700;
  background:rgba(1,134,113,.10);
}
.tao-fragenuebersicht .tao-fragenmarke.ist-hier{
  background:var(--ink);border-color:var(--ink);color:#fff;font-weight:700;
}

.tao-pruefung-abgabe{
  margin:30px 0 0;padding:20px 0 0;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
}
.tao-abgabe-warnung{margin:0;flex:1;min-width:240px;font-size:14px;color:var(--stone)}
.tao-btn-abgabe{background:var(--ink)}
.tao-btn-abgabe:hover{background:var(--red)}

/* --- Ergebnis und Bescheinigung ----------------------------------------- */

.tao-ergebnis{
  border:1px solid var(--line);border-top:4px solid var(--stone);
  padding:32px 34px;background:var(--card);
}
.tao-ergebnis.ist-bestanden{border-top-color:var(--teal)}
.tao-ergebnis.ist-durchgefallen{border-top-color:var(--red)}

.tao-ergebnis-marke{
  margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;
}
.ist-bestanden .tao-ergebnis-marke{color:var(--teal)}
.ist-durchgefallen .tao-ergebnis-marke{color:var(--red)}

.tao-ergebnis-titel{
  margin:0 0 24px;font-family:var(--disp);font-weight:400;
  font-size:30px;line-height:1.2;color:var(--ink);
}

.tao-ergebnis-zahlen{display:flex;flex-wrap:wrap;gap:12px 44px;margin:0 0 20px}
.tao-ergebnis-zahlen div{margin:0}
.tao-ergebnis-zahlen dt{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--stone);margin:0 0 4px;
}
.tao-ergebnis-zahlen dd{margin:0;font-size:17px;color:var(--ink-2);
  font-variant-numeric:tabular-nums}
.tao-ergebnis-zahlen .tao-gross{
  font-family:var(--disp);font-size:38px;line-height:1;color:var(--ink);
}

.tao-ergebnis-balken{
  position:relative;height:10px;background:var(--line-2);border-radius:2px;
  overflow:hidden;margin:0 0 24px;
}
.tao-balken-wert{position:absolute;inset:0 auto 0 0;background:var(--stone)}
.ist-bestanden .tao-balken-wert{background:var(--teal)}
.ist-durchgefallen .tao-balken-wert{background:var(--red)}
.tao-balken-grenze{
  position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink);
}

.tao-ergebnis-hinweis{margin:0 0 18px;font-size:15px;line-height:1.7;color:var(--ink-2)}
.tao-ergebnis-fuss{margin:22px 0 0;padding:16px 0 0;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--stone)}
.tao-ergebnis-aktionen{margin:22px 0 0}

.tao-bescheinigung{
  margin:8px 0 0;padding:26px 28px;border:1px solid var(--line);
  background:var(--paper);
}
.tao-bescheinigung-kopf{margin:0 0 16px;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--stone)}
.tao-bescheinigung-kopf b{color:var(--red);font-weight:700}
.tao-bescheinigung-text{
  margin:0 0 16px;font-family:var(--disp);font-size:20px;line-height:1.6;color:var(--ink);
}
.tao-bescheinigung-fuss{margin:0;font-size:12px;color:var(--stone)}

/* Auf Papier bleibt nur die Bescheinigung. */
@media print{
  .tao-hauptnav,.tao-kopf,.tao-fuss,.tao-hero,.tao-pagehead,
  .tao-ergebnis-aktionen,#wpadminbar{display:none !important}
  .tao-ergebnis{border:none;padding:0}
  .tao-bescheinigung{border:1px solid #333;background:#fff}
  body{background:#fff}
}

/* --- Weg vom Kursbereich zur Lernerfolgskontrolle ----------------------- */

.tao-lernkontrollen{margin:44px 0 0;padding:30px 0 0;border-top:1px solid var(--line)}
.tao-abschnitt-titel{
  margin:0 0 20px;font-family:var(--disp);font-weight:400;
  font-size:26px;line-height:1.2;color:var(--ink);
}

.tao-lernkarte{
  display:grid;grid-template-columns:minmax(0,1fr) 220px minmax(0,260px);
  gap:16px 28px;align-items:center;
  border:1px solid var(--line);border-radius:2px;background:var(--card);
  padding:20px 22px;margin:0 0 12px;
}
.tao-lernkarte-kopf h3{
  margin:0;font-family:var(--disp);font-weight:400;font-size:21px;
  line-height:1.25;color:var(--ink);
}
.tao-lernkarte-stand .tao-fortschritt-balken{margin:0 0 7px}
.tao-lernkarte-zahlen{margin:0;font-size:12.5px;color:var(--stone)}
.tao-lernkarte-zahlen b{color:var(--ink)}

.tao-lernkarte-wege{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.tao-lernkarte-wege .tao-btn{width:100%;text-align:center}
.tao-btn-pruefung{background:var(--red)}
.tao-btn-pruefung:hover{background:var(--ink)}
.tao-lernkarte-frist{margin:0;font-size:12px;line-height:1.5;color:var(--stone)}

.tao-lernkarte-ergebnis{
  margin:0;padding:9px 12px;width:100%;border-radius:2px;
  font-size:13px;line-height:1.45;
}
.tao-lernkarte-ergebnis.ist-bestanden{background:var(--teal-lt);color:var(--teal-dk)}
.tao-lernkarte-ergebnis.ist-durchgefallen{background:#FBE8E6;color:#A31414}

@media (max-width:820px){
  .tao-lernkarte{grid-template-columns:1fr;gap:14px}
  .tao-lernkarte-wege{flex-direction:row;flex-wrap:wrap;align-items:center}
  .tao-lernkarte-wege .tao-btn{width:auto}
}