/* =============================================================================
   PfotenHarmonie Ausbildungsplattform – Stylesheet
   Unveraendert aus dem Phase-1-Mockup uebernommen (docs/mockup/).
   Designgrundlage: Farbwerte und Typografie der Partner-Guideline.
   Aenderungen bitte hier vornehmen, nicht im Mockup – das ist ab jetzt
   nur noch Referenz fuer den urspruenglich abgenommenen Stand.
   ============================================================================= */

/* ============================================================================
   PFOTENHARMONIE – AUSBILDUNGSPLATTFORM · PHASE 1 MOCKUP
   Designgrundlage: Farbwerte, Typografie und Bildsprache der Partner-Guideline.
   Alle Farben ausschliesslich aus der Guideline; Ableitungen sind als solche
   gekennzeichnet. Einziges Theme – die Guideline definiert keinen Dark Mode.
   ========================================================================= */
/* ============================================================================
   Schrift: Poppins, vom eigenen Server
   Direkt von Google Fonts geladen, ginge die IP-Adresse jedes Besuchers ohne
   Einwilligung an Google (LG München I, 20.01.2022, Az. 3 O 17493/20).
   Dateien und Zeichenbereiche stammen unverändert von Google Fonts.
   Lizenz: SIL Open Font License 1.1, siehe fonts/OFL.txt.
   Die latin-ext-Dateien lädt der Browser nur, wenn eine Seite solche Zeichen
   enthält – für deutsche Texte samt Umlauten genügt latin.
   ========================================================================= */
@font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap;src:url('fonts/poppins-300-latin-ext.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:'Poppins';font-style:normal;font-weight:300;font-display:swap;src:url('fonts/poppins-300-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:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/poppins-400-latin-ext.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:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/poppins-400-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:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/poppins-500-latin-ext.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:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/poppins-500-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:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/poppins-600-latin-ext.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:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/poppins-600-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}

:root{
  /* --- Guideline-Farben, unveraendert --- */
  --weiss:#FFFFFF;
  --alge:#3A3D0C;          /* Alge / Dunkelgruen */
  --kalk:#EAE2D5;          /* Kalk / Beige – Flaeche */
  --chloro-hell:#EEF5B2;   /* Chlorophyll Hell – Flaeche */
  --rot:#FF9888;           /* Kristall-Rot – nur Stoerer & interaktive Elemente */

  /* Chlorophyll Dunkel: laut Guideline Schrift- bzw. Akzentfarbe, NIE Flaeche.
     Wird deshalb ausschliesslich als Text auf Alge eingesetzt. */
  --chloro-dunkel:#E7F191;

  /* Sekundaerfarbe Hund. Dient laut Guideline nur der Produktunterscheidung
     und darf nicht als Schriftfarbe dienen – hier bewusst ungenutzt. */
  --hund:#6E8C82;

  /* --- Logo PfotenHarmonie: eigene Markenfarben, nicht aus der Guideline --- */
  --logo-disc:#D9DDAE;
  --logo-ink:#4C6373;

  /* --- Ableitungen: reine Alge-/Kalk-Abstufungen, kein Neutralgrau,
         keine Sekundaerfarbe als Schrift --- */
  --ground:#EAE2D5;
  --ground-2:#F2ECE2;
  --ink:#3A3D0C;
  --ink-2:#5B5F2B;
  --ink-3:#74773E;
  --line:#D9CFBD;
  --line-2:#C6BAA4;
  --rot-tief:#E8705C;      /* Kristall-Rot abgedunkelt, nur fuer Hover/Rand */
  --shadow:0 1px 2px rgba(58,61,12,.05), 0 8px 24px -12px rgba(58,61,12,.14);
  --shadow-lift:0 2px 4px rgba(58,61,12,.06), 0 18px 40px -18px rgba(58,61,12,.22);

  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:22px;
  --fs-label:.6875rem;
  --sans:'Poppins','Segoe UI',system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,'Cascadia Mono','SF Mono',Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--sans);font-weight:400;font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.22;text-wrap:balance;letter-spacing:-.015em}
h1{font-size:1.75rem}
h2{font-size:1.3rem}
h3{font-size:1.0625rem}
h4{font-size:.9375rem;font-weight:500}
p{margin:0}
ul,ol{margin:0;padding-left:1.15em}
a{color:var(--ink);text-decoration-color:var(--rot);text-underline-offset:3px}
button{font:inherit;color:inherit}
:focus-visible{outline:2.5px solid var(--rot-tief);outline-offset:2px;border-radius:3px}
.label{font-size:var(--fs-label);font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.mono{font-family:var(--mono);font-size:.8125rem}
.num{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center}
.muted{color:var(--ink-3)}
.prose{max-width:63ch}

/* ---------- Buttons: Kristall-Rot als Flaeche, Alge als Schrift ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:.6875rem 1.15rem;border-radius:999px;border:1.5px solid transparent;
  font-weight:500;font-size:.9375rem;cursor:pointer;background:none;
  transition:transform .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
  text-align:center;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn--primary{background:var(--rot);color:var(--alge);font-weight:600;box-shadow:0 1px 0 rgba(58,61,12,.06)}
.btn--primary:hover{background:#FFA898;box-shadow:var(--shadow)}
.btn--ghost{border-color:var(--line-2);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink-3);background:var(--ground-2)}
.btn--quiet{color:var(--ink-2);padding:.5rem .75rem}
.btn--quiet:hover{background:var(--ground-2)}
.btn--dark{background:var(--alge);color:var(--chloro-hell);font-weight:500}
.btn--dark:hover{background:#4A4E12}
.btn--sm{padding:.4375rem .8125rem;font-size:.8125rem}
.btn--block{width:100%}
.btn[disabled]{opacity:.42;cursor:not-allowed;transform:none!important}
.btn--danger{border-color:var(--rot-tief);color:var(--rot-tief)}
.btn--danger:hover{background:#FFF1EE}

/* ---------- Flaechen ---------- */
.card{background:var(--weiss);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.panel{background:var(--chloro-hell);border-radius:var(--r-md);padding:1rem 1.15rem}
.sheet{background:var(--weiss);border:1px solid var(--line);border-radius:var(--r-xl)}
.divider{height:1px;background:var(--line);border:0;margin:0}

/* ---------- Badges / Status ---------- */
.badge{display:inline-flex;align-items:center;gap:.4em;padding:.25rem .625rem;border-radius:999px;font-size:.75rem;font-weight:500;white-space:nowrap}
.badge--done{background:var(--chloro-hell);color:var(--alge);border:1px solid #D5E08C}
.badge--now{background:var(--rot);color:var(--alge);font-weight:600}
.badge--lock{background:var(--ground-2);color:var(--ink-3);border:1px solid var(--line)}
.badge--demo{background:var(--weiss);color:var(--ink-3);border:1px dashed var(--line-2);font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600}

/* ---------- Fortschritt ---------- */
.bar{height:8px;border-radius:999px;background:var(--kalk);overflow:hidden;border:1px solid var(--line)}
.bar__fill{height:100%;background:var(--alge);border-radius:999px;transition:width .55s cubic-bezier(.22,1,.36,1)}
.bar--slim{height:5px}
.bar--dark{background:rgba(255,255,255,.14);border-color:transparent}

/* ---------- Formular ---------- */
.field{display:flex;flex-direction:column;gap:.375rem}
.field > label{font-size:.8125rem;font-weight:500;color:var(--ink-2)}
.input,.select,.textarea{
  width:100%;padding:.6875rem .875rem;border:1.5px solid var(--line-2);border-radius:var(--r-sm);
  background:var(--weiss);color:var(--ink);font:inherit;font-size:.9375rem;transition:border-color .15s
}
.input:hover,.select:hover,.textarea:hover{border-color:var(--ink-3)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--rot-tief);box-shadow:0 0 0 3px rgba(255,152,136,.28)}
.textarea{resize:vertical;min-height:5rem;line-height:1.55}
.hint{font-size:.8125rem;color:var(--ink-3)}
.err{font-size:.8125rem;color:var(--rot-tief);font-weight:500}

/* =========================== APP SHELL ================================== */
#app{min-height:100vh;display:flex;flex-direction:column}

/* ---------- Marke ---------- */
.brand{display:flex;align-items:center;gap:.6875rem;text-align:left}
.brand__mark{flex:none;width:40px;height:40px;display:grid;place-items:center}
.brand__mark img{display:block;width:40px;height:40px}
.brand__name{font-weight:600;font-size:1rem;letter-spacing:-.01em;line-height:1.15}
.brand__sub{font-size:.6875rem;color:var(--ink-3);letter-spacing:.055em;text-transform:uppercase;font-weight:500}
.brand--lg .brand__mark{width:56px;height:56px}
.brand--lg .brand__mark img{width:56px;height:56px}
.brand--lg .brand__name{font-size:1.375rem}

.brand--dark .brand__name{color:var(--weiss)}
.brand--dark .brand__sub{color:var(--chloro-dunkel);opacity:.8}

/* Logo-Badge: Vollversion mit Schriftring, nur in grossen Groessen lesbar */
.logo-badge{flex:none;display:block}

/* ---------- Teilnehmer-Topbar ---------- */
.topbar{background:var(--weiss);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.topbar__in{max-width:1140px;margin:0 auto;padding:.75rem 1.25rem;display:flex;align-items:center;gap:1rem}
.topbar__nav{margin-left:auto;display:flex;align-items:center;gap:.25rem}
.tnav{padding:.4375rem .75rem;border-radius:999px;border:0;background:none;cursor:pointer;font-size:.875rem;color:var(--ink-2)}
.tnav:hover{background:var(--ground-2)}
.tnav[aria-current="page"]{background:var(--chloro-hell);color:var(--alge);font-weight:500}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--alge);color:var(--chloro-hell);display:grid;place-items:center;font-size:.8125rem;font-weight:600;flex:none}

.wrap{max-width:1140px;margin:0 auto;padding:2rem 1.25rem 4rem;width:100%}
.wrap--narrow{max-width:820px}

/* ---------- Modulraster ---------- */
.mgrid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(268px,1fr))}
.mcard{
  position:relative;display:flex;flex-direction:column;gap:.75rem;
  padding:1.25rem;border-radius:var(--r-lg);border:1px solid var(--line);
  background:var(--weiss);text-align:left;cursor:pointer;
  transition:transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s, border-color .18s;
  box-shadow:var(--shadow);font:inherit;color:inherit
}
.mcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:var(--line-2)}
.mcard__no{font-size:1.75rem;font-weight:300;color:var(--ink-3);line-height:1;letter-spacing:-.02em}
.mcard__title{font-size:1rem;font-weight:500;line-height:1.35}
.mcard__meta{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:.75rem;font-size:.8125rem;color:var(--ink-3)}
.mcard--done{background:linear-gradient(180deg,#FBFDF0 0%,var(--weiss) 62%)}
.mcard--done .mcard__no{color:var(--alge);font-weight:400}
.mcard--now{border-color:var(--rot);border-width:1.5px;box-shadow:0 2px 0 rgba(255,152,136,.3),var(--shadow)}
.mcard--now .mcard__no{color:var(--alge);font-weight:400}
.mcard--lock{background:var(--ground-2);cursor:not-allowed;box-shadow:none;opacity:.9}
.mcard--lock:hover{transform:none;box-shadow:none;border-color:var(--line)}
.mcard--lock .mcard__title{color:var(--ink-3);font-weight:400}

/* ---------- Modulansicht ---------- */
.modhead{display:flex;align-items:flex-start;gap:1rem;flex-wrap:wrap;margin-bottom:1.5rem}
.reader{display:grid;grid-template-columns:1fr 208px;gap:2rem;align-items:start}
.rail{position:sticky;top:5.5rem;display:flex;flex-direction:column;gap:.5rem}
.rail__list{display:flex;flex-direction:column;gap:2px}
.rail__item{display:flex;align-items:center;gap:.625rem;padding:.4375rem .5625rem;border-radius:var(--r-sm);border:0;background:none;cursor:pointer;font-size:.8125rem;text-align:left;width:100%;color:var(--ink-2)}
.rail__item:hover:not([disabled]){background:var(--ground-2)}
.rail__item[aria-current="true"]{background:var(--weiss);border:1px solid var(--line);font-weight:500;color:var(--ink)}
.rail__item[disabled]{color:var(--ink-3);opacity:.65;cursor:not-allowed}
.rail__dot{flex:none;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;font-size:.625rem;font-weight:600;background:var(--kalk);color:var(--ink-3)}
.rail__dot--done{background:var(--chloro-hell);color:var(--alge);box-shadow:inset 0 0 0 1px #D5E08C}
.rail__dot--now{background:var(--rot);color:var(--alge)}

.page{background:var(--weiss);border:1px solid var(--line);border-radius:var(--r-xl);padding:2rem 2.25rem;box-shadow:var(--shadow)}
.pagenav{display:flex;align-items:center;gap:1rem;margin-top:1.5rem}
.pagenav__mid{margin-inline:auto;font-size:.8125rem;color:var(--ink-3)}

/* ---------- Inhaltsbloecke ---------- */
.blocks{display:flex;flex-direction:column;gap:1.375rem}
.b-h2{font-size:1.4375rem}
.b-h3{font-size:1.0625rem;font-weight:500;color:var(--ink-2)}
.b-text{max-width:63ch;color:var(--ink-2)}
.b-list{max-width:63ch;color:var(--ink-2);display:flex;flex-direction:column;gap:.4375rem}
.b-quote{border-left:3px solid var(--alge);padding:.25rem 0 .25rem 1.125rem;font-size:1.0625rem;line-height:1.5;color:var(--ink);max-width:52ch}
.b-quote cite{display:block;margin-top:.5rem;font-size:.8125rem;font-style:normal;color:var(--ink-3)}
.b-info{background:var(--chloro-hell);border-radius:var(--r-md);padding:1.125rem 1.25rem;display:flex;gap:.875rem;max-width:63ch}
.b-note{background:var(--weiss);border:1.5px solid var(--rot);border-radius:var(--r-md);padding:1.125rem 1.25rem;display:flex;gap:.875rem;max-width:63ch}
.b-info svg,.b-note svg{flex:none;width:20px;height:20px;margin-top:2px}
.b-fig{margin:0;display:flex;flex-direction:column;gap:.625rem}
.b-fig__art{background:var(--chloro-hell);border-radius:var(--r-md);padding:1.5rem;display:grid;place-items:center;border:1px solid var(--line)}
.b-fig__art svg{width:100%;height:auto;max-width:420px;display:block}
.b-fig figcaption{font-size:.8125rem;color:var(--ink-3)}
.b-split{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:center}
.b-split .b-fig__art{padding:1.125rem}
.b-rule{height:1px;background:var(--line);border:0;max-width:63ch}
.b-table{overflow-x:auto;max-width:100%}
.b-table table{border-collapse:collapse;width:100%;font-size:.875rem;min-width:420px}
.b-table th,.b-table td{text-align:left;padding:.625rem .75rem;border-bottom:1px solid var(--line)}
.b-table th{font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);font-weight:600}

/* ---------- Quiz ---------- */
.qgrid{display:flex;flex-wrap:wrap;gap:.375rem}
.qdot{width:35px;height:35px;border-radius:var(--r-sm);border:1.5px solid var(--line-2);background:var(--weiss);cursor:pointer;font-size:.8125rem;font-weight:500;font-variant-numeric:tabular-nums}
.qdot:hover{border-color:var(--ink-3)}
.qdot--ans{background:var(--chloro-hell);border-color:#D5E08C;color:var(--alge)}
.qdot[aria-current="true"]{border-color:var(--rot);border-width:2.5px}
.opt{display:flex;align-items:flex-start;gap:.875rem;padding:1rem 1.125rem;border:1.5px solid var(--line-2);border-radius:var(--r-md);background:var(--weiss);cursor:pointer;text-align:left;width:100%;font:inherit;transition:border-color .15s,background-color .15s}
.opt:hover{border-color:var(--ink-3);background:var(--ground-2)}
.opt--sel{border-color:var(--rot);border-width:2px;background:#FFF6F4}
.opt__key{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:.75rem;font-weight:600;background:var(--kalk);color:var(--ink-2)}
.opt--sel .opt__key{background:var(--rot);color:var(--alge)}
.opt__key--multi{border-radius:7px}
.opt--right{border-color:var(--alge);background:#FBFDF0}
.opt--right .opt__key{background:var(--alge);color:var(--chloro-hell)}
.opt--wrong{border-color:var(--rot-tief);background:#FFF1EE}
.opt--wrong .opt__key{background:var(--rot-tief);color:var(--weiss)}

.score{width:132px;height:132px;flex:none;position:relative;display:grid;place-items:center}
.score svg{position:absolute;inset:0;transform:rotate(-90deg)}
.score__v{font-size:1.875rem;font-weight:600;letter-spacing:-.02em;line-height:1}
.score__l{font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);font-weight:600}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:90}

/* ---------- Admin Shell ---------- */
.admin{display:grid;grid-template-columns:246px 1fr;min-height:100vh}
.side{background:var(--alge);color:var(--kalk);padding:1.25rem 1rem;display:flex;flex-direction:column;gap:1.5rem;position:sticky;top:0;height:100vh;overflow-y:auto}
.side__nav{display:flex;flex-direction:column;gap:2px}
.snav{display:flex;align-items:center;gap:.6875rem;padding:.5625rem .75rem;border-radius:var(--r-sm);border:0;background:none;color:rgba(234,226,213,.82);cursor:pointer;font-size:.875rem;text-align:left;width:100%}
.snav:hover{background:rgba(255,255,255,.08);color:var(--weiss)}
.snav[aria-current="page"]{background:var(--chloro-hell);color:var(--alge);font-weight:500}
.snav svg{width:17px;height:17px;flex:none}
.side__foot{margin-top:auto;display:flex;flex-direction:column;gap:.75rem;font-size:.75rem;color:rgba(234,226,213,.6)}
.admin__main{min-width:0;background:var(--ground)}
.abar{background:var(--weiss);border-bottom:1px solid var(--line);padding:1rem 1.75rem;display:flex;align-items:center;gap:1rem;position:sticky;top:0;z-index:30}
.abody{padding:1.75rem}

.stats{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));margin-bottom:1.5rem}
.stat{background:var(--weiss);border:1px solid var(--line);border-radius:var(--r-md);padding:1.125rem 1.25rem}
.stat__v{font-size:1.75rem;font-weight:600;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.stat__l{font-size:.8125rem;color:var(--ink-3);margin-top:.25rem}

.tbl{width:100%;border-collapse:collapse;font-size:.875rem}
.tbl th{text-align:left;padding:.6875rem 1rem;font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);font-weight:600;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:.8125rem 1rem;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:var(--ground-2)}
.tblwrap{overflow-x:auto;background:var(--weiss);border:1px solid var(--line);border-radius:var(--r-md)}
.acts{display:flex;gap:.375rem;flex-wrap:wrap}

/* ---------- Content-Builder ---------- */
.builder{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:start}
.blist{display:flex;flex-direction:column;gap:.5rem}
.brow{display:flex;align-items:center;gap:.75rem;padding:.75rem .875rem;background:var(--weiss);border:1px solid var(--line);border-radius:var(--r-md);cursor:grab}
.brow:hover{border-color:var(--line-2)}
.brow--drag{opacity:.35}
.brow--over{border-color:var(--rot);border-width:1.5px;box-shadow:0 0 0 3px rgba(255,152,136,.22)}
.brow--hidden{background:var(--ground-2);border-style:dashed}
.brow__grip{flex:none;color:var(--ink-3);display:grid;place-items:center}
.brow__grip svg{width:15px;height:15px}
.brow__type{font-size:.6875rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);min-width:82px}
.brow__txt{flex:1;min-width:0;font-size:.875rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brow__acts{flex:none;display:flex;gap:1px}
.iconbtn{width:29px;height:29px;border-radius:var(--r-sm);border:0;background:none;cursor:pointer;display:grid;place-items:center;color:var(--ink-3)}
.iconbtn:hover{background:var(--kalk);color:var(--ink)}
.iconbtn svg{width:15px;height:15px}
.preview{background:var(--ground-2);border:1px solid var(--line);border-radius:var(--r-md);padding:1.25rem;max-height:640px;overflow-y:auto}
.preview__frame{background:var(--weiss);border:1px solid var(--line);border-radius:var(--r-md);padding:1.375rem}
.preview .b-fig__art svg{max-width:280px}
.preview .b-split{grid-template-columns:1fr;gap:1rem}

/* ---------- Modal ---------- */
.scrim{position:fixed;inset:0;background:rgba(58,61,12,.42);z-index:70;display:grid;place-items:center;padding:1.25rem;animation:fade .18s ease}
.modal{background:var(--weiss);border-radius:var(--r-xl);max-width:490px;width:100%;padding:1.75rem;box-shadow:0 24px 60px -16px rgba(58,61,12,.4);animation:pop .22s cubic-bezier(.22,1,.36,1);max-height:88vh;overflow-y:auto}
.modal--wide{max-width:640px}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.985)}}
.toast{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%);background:var(--alge);color:var(--chloro-hell);padding:.75rem 1.25rem;border-radius:999px;font-size:.875rem;z-index:95;box-shadow:var(--shadow-lift);animation:rise .26s cubic-bezier(.22,1,.36,1)}
@keyframes rise{from{opacity:0;transform:translate(-50%,12px)}}

.enter{animation:enter .3s cubic-bezier(.22,1,.36,1) both}
@keyframes enter{from{opacity:0;transform:translateY(7px)}}

/* ---------- Login ---------- */
.auth{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}
.auth__art{background:var(--alge);color:var(--kalk);padding:clamp(2rem,4vw,3.25rem);display:flex;flex-direction:column;gap:2.5rem;position:relative;overflow:hidden}
.auth__deco{position:absolute;right:-56px;top:6%;width:300px;opacity:.075;pointer-events:none}
.auth__deco svg{width:100%;height:auto;display:block}
.auth__form{display:grid;place-items:center;padding:2.5rem 1.5rem;background:var(--ground)}

/* --- Anmelde-Panel: Typografie traegt die Seite --- */
.hero{position:relative;z-index:1;display:flex;flex-direction:column;gap:1.75rem;margin-top:auto;max-width:34ch}
.hero__eyebrow{font-size:.6875rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--chloro-dunkel)}
.hero__title{margin:0;color:var(--weiss);font-weight:500;letter-spacing:-.022em;
  font-size:clamp(1.75rem,2.9vw,2.375rem);line-height:1.16;text-wrap:initial}
.hero__title b{display:block;font-weight:500}
.hero__pre{font-style:normal;font-weight:300;color:var(--chloro-dunkel);margin-right:0}
.hero__lead{color:rgba(234,226,213,.86);font-size:.9375rem;line-height:1.65;max-width:32ch}
.hero__facts{display:flex;flex-direction:column;border-top:1px solid rgba(234,226,213,.2);max-width:32ch}
.hero__fact{display:flex;gap:1rem;align-items:baseline;padding:.75rem 0;border-bottom:1px solid rgba(234,226,213,.2)}
.hero__fact b{flex:none;min-width:2.6rem;color:var(--chloro-dunkel);font-weight:600;font-size:.9375rem;font-variant-numeric:tabular-nums}
.hero__fact span{color:rgba(234,226,213,.88);font-size:.875rem;line-height:1.45}
.auth__box{width:100%;max-width:404px}
.demobox{background:var(--chloro-hell);border-radius:var(--r-md);padding:.875rem 1rem;font-size:.8125rem;display:flex;flex-direction:column;gap:.375rem}
.demorow{display:grid;grid-template-columns:1fr auto;gap:.125rem .75rem;width:100%;text-align:left;
  background:none;border:0;border-top:1px solid rgba(58,61,12,.14);padding:.5rem .25rem;cursor:pointer;border-radius:var(--r-sm)}
.demorow:hover{background:rgba(255,255,255,.5)}
.demorow__r{font-size:.8125rem;font-weight:500}
.demorow__p{font-size:.75rem;color:var(--ink-2);text-align:right;align-self:center;grid-row:span 2}
.demorow__m{font-size:.75rem;color:var(--ink-2)}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .builder{grid-template-columns:1fr}
}
@media (max-width:900px){
  .auth{grid-template-columns:1fr}
  .auth__art{display:none}
  .reader{grid-template-columns:1fr}
  .rail{position:static;order:-1;background:var(--weiss);border:1px solid var(--line);border-radius:var(--r-md);padding:.75rem}
  .rail__list{flex-direction:row;overflow-x:auto;gap:.375rem;padding-bottom:2px}
  .rail__item{flex:none;flex-direction:column;gap:.25rem;min-width:56px;text-align:center;font-size:.6875rem}
  .rail__item span:last-child{display:none}
  .admin{grid-template-columns:1fr}
  .side{position:static;height:auto;flex-direction:row;align-items:center;gap:1rem;overflow-x:auto;padding:.75rem 1rem}
  .side__nav{flex-direction:row;gap:.25rem}
  .snav{white-space:nowrap;padding:.5rem .6875rem}
  .snav span{display:none}
  .side__brand,.side__foot{display:none}
  .b-split{grid-template-columns:1fr}
}
@media (max-width:640px){
  body{font-size:15px}
  h1{font-size:1.4375rem}
  .wrap{padding:1.25rem 1rem 3rem}
  .page{padding:1.375rem 1.125rem;border-radius:var(--r-lg)}
  .abody{padding:1rem}
  .abar{padding:.875rem 1rem}
  .mgrid{grid-template-columns:1fr}
  .btn{padding:.75rem 1.15rem}         /* groessere Touch-Flaechen */
  .qdot{width:41px;height:41px}
  .opt{padding:1.0625rem 1rem}
  .pagenav{flex-wrap:wrap}
  .pagenav .btn{flex:1 1 44%}
  .pagenav__mid{order:-1;flex-basis:100%;text-align:center;margin-bottom:.25rem}
  .score{width:112px;height:112px}
  .topbar__nav .tnav{padding:.4375rem .5625rem;font-size:.8125rem}
  .brand__sub{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .btn:hover,.mcard:hover{transform:none}
}

/* =============================================================================
   Anwendungskomponenten (Phase 2)

   Das Mockup setzte Abstände und Breiten über style-Attribute. Die Content
   Security Policy der Anwendung verbietet Inline-Styles, deshalb liegt jede
   dieser Abweichungen hier als Klasse. Fortschrittsbalken sind echte
   <progress>-Elemente statt Divs mit Inline-Breite – das ist zugleich für
   Screenreader verständlich.
   ============================================================================= */
body{min-height:100vh;display:flex;flex-direction:column}
.icon{width:16px;height:16px;flex:none;display:inline-block;vertical-align:-3px}
.inline-form{display:inline-flex;margin:0}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap}
a.brand{text-decoration:none;color:inherit}
/* Die Navigation mischt Links und den Abmelde-Button – beide sollen gleich aussehen */
a.tnav{text-decoration:none}
.tnav{white-space:nowrap}

/* Kopfzeile auf dem Smartphone: zweizeilig statt überlaufend.
   Gemessen brauchte die einzeilige Leiste 517 px – bei 375 px Bildschirmbreite
   zog der Überlauf die ganze Seite in die Breite. Zeile 1: Marke und Kürzel,
   Zeile 2: Navigation über die volle Breite, fingerfreundlich hoch. */
@media (max-width:640px){
  .topbar__in{flex-wrap:wrap;row-gap:.375rem}
  .topbar .avatar{order:1;margin-left:auto}
  .topbar__nav{order:2;flex:1 0 100%;margin-left:0;justify-content:space-between}
  .topbar__nav .tnav{min-height:2.5rem;display:inline-flex;align-items:center}
}
/* Bei 320 px reicht die Breite nur ohne „Meine“ */
@media (max-width:400px){.tnav__long{display:none}}

/* =============================================================================
   Verwaltungsbereich
   Grundgerüst (.admin, .side, .snav, .abar, .stats, .tbl) stammt aus dem
   Mockup weiter oben; hier nur, was dort per style-Attribut gesetzt war.
   ============================================================================= */
a.snav{text-decoration:none}
a.side__brand{text-decoration:none}
.side__who{display:block;line-height:1.45}
.side__who strong{color:var(--chloro-hell);font-weight:500}
.side__logout{border:1px solid rgba(234,226,213,.3);color:var(--kalk);justify-content:flex-start}
.side__logout:hover{background:rgba(255,255,255,.08)}
.abar__title{font-size:1.1875rem}
.admin .flashes{margin:1rem 0 0;padding:0 1.75rem;max-width:none}
.acols{display:grid;grid-template-columns:1.1fr 1fr;gap:1.25rem;align-items:start}
.acard{padding:1.25rem 1.5rem;display:flex;flex-direction:column;gap:.875rem}
.acard__title{font-size:1.0625rem}
.alist{margin:.375rem 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.375rem;font-size:.875rem}
.alist li{display:flex;gap:.625rem}
.alist .num{color:var(--ink-3);min-width:1.75rem}
.activity{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.875rem}
.activity li{display:flex;flex-direction:column;gap:.125rem;font-size:.875rem}
.activity strong{font-weight:500}
.admin-info{display:flex;gap:.875rem;align-items:flex-start;margin-bottom:1.25rem}
.admin-info .icon{width:20px;height:20px;margin-top:2px}
.tbl__title{font-weight:500}
.admin-note{gap:1rem}
/* Kennzahlen: 4 oder 2×2 – nie eine allein in der letzten Reihe */
.stats{grid-template-columns:repeat(4,1fr)}

/* =============================================================================
   Content-Builder
   ============================================================================= */
.stack.gap-xs{gap:.25rem}
.pagehead{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-end;justify-content:space-between;margin-bottom:1.25rem}
.pagebar{margin-bottom:1.25rem}
.pagebar__status{display:inline-flex;align-items:center;gap:.5rem;font-size:.875rem;color:var(--ink-2)}
.inline-fields{display:flex;gap:.625rem;align-items:flex-end;flex-wrap:wrap}
.field.grow{flex:1 1 260px}
.newpage{margin-top:1.25rem}
.tbl__link{font-weight:500;text-decoration:none}
.tbl__link:hover{text-decoration:underline}
a.iconbtn{text-decoration:none}
.iconbtn[disabled]{opacity:.3;cursor:not-allowed}
.iconbtn[disabled]:hover{background:none}
.builder__col{gap:1rem}
.blist{list-style:none;margin:0;padding:0}
.bitem{display:flex;flex-direction:column;gap:.5rem}
.bitem.is-dragging{opacity:.35}
.bitem.is-over > .brow{border-color:var(--rot);border-width:1.5px;box-shadow:0 0 0 3px rgba(255,152,136,.22)}
.bitem .brow{cursor:default}
.brow--active{border-color:var(--alge)}
.brow__grip{cursor:grab;padding:.25rem}
.bedit{background:var(--weiss);border:1px solid var(--line-2);border-radius:var(--r-md);padding:1rem 1.125rem;display:flex;flex-direction:column;gap:.875rem}
.bconfirm{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;justify-content:space-between;padding:.875rem 1rem;border:1.5px solid var(--rot-tief);border-radius:var(--r-md);background:#FFF6F4;font-size:.875rem}
.bconfirm__field{flex:1 1 100%}
.acts--end{justify-content:flex-end}
.textarea--table{font-family:var(--mono);font-size:.8125rem}
.addblock,.danger-zone{display:flex;flex-direction:column;gap:.75rem}
.danger-zone{margin-top:.5rem}
summary.btn{list-style:none;width:max-content}
summary.btn::-webkit-details-marker{display:none}
.addblock__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.5rem}
.addblock__grid .inline-form{display:block}

@media (max-width:900px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .acols{grid-template-columns:1fr}
  /* Das Mockup blendete den Fuss der Seitenleiste mobil aus – dann gäbe es
     dort kein Abmelden mehr. Er bleibt, nur die Namenszeile entfällt. */
  .side__foot{display:flex;flex-direction:row;align-items:center;gap:.5rem;margin:0 0 0 auto}
  .side__who{display:none}
  .admin .flashes{padding:0 1rem}
  /* Einspaltig verteilt das Raster sonst den Rest bis 100vh auch auf die
     Zeile der Seitenleiste – auf kurzen Seiten wurde die Leiste riesig. */
  .admin{grid-template-rows:auto 1fr}
}

/* =============================================================================
   Rasterspalten dürfen nie breiter werden als ihr Container.

   1fr bedeutet minmax(auto, 1fr): eine Spalte wächst dann auf die Breite des
   längsten unumbrechbaren Inhalts. Gemessen im Builder: 927 px breite Spalte
   in 724 px Container, weil die Kurzfassung eines Textblocks nicht umbricht –
   die Knöpfe zum Bearbeiten und Löschen lagen ausserhalb des Bildes.
   minmax(0, 1fr) hält die Spalte in ihren Grenzen; der Inhalt kürzt sich dann
   mit „…“ oder scrollt in seinem eigenen Rahmen.

   Steht am Ende der Datei, damit es alle früheren Spaltenangaben ablöst.
   ============================================================================= */
.builder{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.acols{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.reader{grid-template-columns:minmax(0,1fr) 208px}
.stats{grid-template-columns:repeat(4,minmax(0,1fr))}
/* Lange Wörter und Internetadressen im Fliesstext brechen um statt überzulaufen */
.blocks{overflow-wrap:break-word}
@media (max-width:1080px){
  .builder{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .reader{grid-template-columns:minmax(0,1fr)}
  .acols{grid-template-columns:minmax(0,1fr)}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Fortschritt */
progress.bar{appearance:none;-webkit-appearance:none;display:block;width:100%;color:var(--alge)}
progress.bar::-webkit-progress-bar{background:var(--kalk);border-radius:999px}
progress.bar::-webkit-progress-value{background:var(--alge);border-radius:999px;transition:width .55s cubic-bezier(.22,1,.36,1)}
progress.bar::-moz-progress-bar{background:var(--alge);border-radius:999px}

/* Meldungen */
.flashes{max-width:1140px;width:100%;margin:1rem auto 0;padding:0 1.25rem;display:flex;flex-direction:column;gap:.5rem}
.flash{margin:0;padding:.75rem 1rem;border-radius:var(--r-md);font-size:.9375rem;background:var(--chloro-hell);color:var(--alge);box-shadow:inset 0 0 0 1px #D5E08C}
.flash--error{background:#FFF1EE;box-shadow:inset 0 0 0 1px var(--rot-tief)}

/* Formulare */
.form{display:flex;flex-direction:column;gap:1rem}
.err-list{margin:0;padding:.75rem 1rem .75rem 2rem;background:#FFF1EE;border-radius:var(--r-md);color:var(--rot-tief);font-size:.875rem;font-weight:500;display:flex;flex-direction:column;gap:.25rem}
.btn[aria-disabled="true"]{opacity:.42;cursor:not-allowed;pointer-events:none}

/* Anmeldung */
.auth__box{display:flex;flex-direction:column;gap:1.5rem}
.auth__head{display:flex;flex-direction:column;gap:.5rem}
.auth__title{font-size:1.875rem;font-weight:500;letter-spacing:-.02em}
.auth__logo{width:126px;position:relative;z-index:1}
.auth__logo img{display:block;width:100%;height:auto}
.auth__back{align-self:center}
.auth__mobile-brand{display:none;align-items:center;gap:.625rem}
.auth__mobile-brand img{display:block;width:44px;height:44px}
@media (max-width:900px){.auth__mobile-brand{display:flex}.auth__head .label{display:none}}

/* Übersicht */
.dash-head{display:flex;gap:1.5rem;flex-wrap:wrap;margin-bottom:2rem}
.dash-head__text{display:flex;flex-direction:column;gap:.375rem;flex:1 1 300px}
.dash-overall{padding:1.25rem 1.5rem;flex:1 1 320px;max-width:420px;display:flex;flex-direction:column;gap:.625rem}
.resume{padding:1.5rem;margin-bottom:2rem;display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap}
.resume__text{display:flex;flex-direction:column;gap:.5rem;flex:1 1 320px}
.admin-note{margin-bottom:2rem}
.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}
a.mcard{text-decoration:none}
.mcard__bar{margin-top:.25rem}

/* Modulansicht */
.back-link{margin-bottom:1rem;padding-left:0}
.modhead__text{display:flex;flex-direction:column;gap:.375rem;flex:1 1 340px}
.modhead__progress{display:flex;flex-direction:column;gap:.5rem;min-width:200px}
.page__meta{display:flex;justify-content:space-between;align-items:center;gap:.75rem;flex-wrap:wrap;margin-bottom:1.25rem}
.pagenav__form{display:contents}
.pagenav__hint{margin-top:.875rem}
.rail__label{padding-left:.5625rem}
.rail__divider{margin:.5rem 0}
a.rail__item{text-decoration:none}
.rail__item[aria-current="page"]{background:var(--weiss);border:1px solid var(--line);font-weight:500;color:var(--ink)}
.rail__item[aria-disabled="true"]{color:var(--ink-3);opacity:.65;cursor:not-allowed}
.rail__dot .icon{width:11px;height:11px;vertical-align:0}
.rail__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.empty-state{padding:2rem;display:flex;flex-direction:column;gap:.75rem;align-items:flex-start}

/* Inhaltsblöcke */
.b-info strong,.b-note strong{font-weight:600}
.b-note .icon{color:var(--rot-tief)}
.b-fig__art img{display:block;width:100%;height:auto;border-radius:var(--r-sm)}
.b-split--reverse .b-fig__art{order:2}
.b-split--text{grid-template-columns:1fr}
.b-split__text{display:flex;flex-direction:column;gap:.5rem}
.b-video{display:block;width:100%;border-radius:var(--r-md);background:var(--alge)}

/* Fußzeile */
.footer{border-top:1px solid var(--line);background:var(--weiss);padding:1.25rem;margin-top:auto}
.footer__in{max-width:1140px;margin:0 auto}

/* =============================================================================
   Rechtliches
   ============================================================================= */
.footer__in{display:flex;justify-content:space-between;align-items:center;gap:.5rem 1.25rem;flex-wrap:wrap}
.footer__links{display:flex;gap:1.25rem;font-size:.8125rem}
.footer__links a,.auth__legal a{color:var(--ink-3);text-decoration:none}
.footer__links a:hover,.auth__legal a:hover{color:var(--ink);text-decoration:underline}
.auth__legal{display:flex;justify-content:center;gap:1.25rem;font-size:.8125rem;margin-top:.25rem}
.legal{display:flex;flex-direction:column;gap:1.25rem}
.legal h1{font-size:1.625rem}
.legal h2{font-size:1.0625rem;margin-bottom:.5rem}
.legal section{display:flex;flex-direction:column;gap:.5rem}
.legal p,.legal li,.legal address{color:var(--ink-2);max-width:68ch;margin:0}
.legal address{font-style:normal;line-height:1.7}
.legal ul{margin:0;padding-left:1.25rem;display:flex;flex-direction:column;gap:.375rem}
.legal .tbl td{vertical-align:top}
.legal__back{margin-top:.5rem}

/* =============================================================================
   Einstellungen
   ============================================================================= */
.stack.gap-lg{gap:1.25rem}
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.375rem 1rem;margin:0;font-size:.875rem}
.kv dt{color:var(--ink-3)}
.kv dd{margin:0;color:var(--ink);overflow-wrap:anywhere}

/* =============================================================================
   Teilnehmerverwaltung
   ============================================================================= */
.stack.gap-md{gap:1rem}
.handover{margin-bottom:1.25rem;border-color:var(--rot-tief)}
.handover__data{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.375rem 1rem;margin:0;font-size:.9375rem}
.handover__data dt{color:var(--ink-3);font-size:.8125rem;align-self:center}
.handover__data dd{margin:0}
.handover__pw{font-size:1.125rem;font-weight:600;letter-spacing:.04em}
.tbl progress.bar--slim{margin-top:.25rem;max-width:12rem}
a.auth__forgot{text-decoration:none}
a.auth__forgot:hover{text-decoration:underline;color:var(--ink-2)}
.auth__note{display:flex;gap:.75rem;align-items:flex-start;font-size:.9375rem}
.auth__note .icon{flex:none;margin-top:3px}

/* =============================================================================
   Medienbereich
   ============================================================================= */
.mupload{margin-bottom:1.25rem}
.mupload .field.grow{min-width:0}
input[type="file"]{padding:.5rem .625rem;line-height:1.4;cursor:pointer}
input[type="file"]::file-selector-button{
  font:inherit;font-size:.8125rem;margin-right:.75rem;padding:.375rem .75rem;cursor:pointer;
  border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--ground-2);color:var(--ink);
}
input[type="file"]::file-selector-button:hover{border-color:var(--ink-3);background:var(--kalk)}
.mthumb{width:56px;height:40px;border-radius:var(--r-sm);border:1px solid var(--line);object-fit:cover;display:block;background:var(--ground-2)}
.mthumb--icon,.mthumb--missing{display:grid;place-items:center;color:var(--ink-3)}
.mthumb--missing{border-color:var(--rot-tief);color:var(--rot-tief)}
.mthumb--icon .icon,.mthumb--missing .icon{width:18px;height:18px}
.tbl .hint{display:block}
.muses{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.25rem;font-size:.8125rem}
.muses li{display:flex;align-items:center;gap:.375rem;flex-wrap:wrap}
.mreplace{display:inline-block}
.mreplace__form{display:flex;flex-direction:column;gap:.5rem;margin-top:.5rem;padding:.75rem;min-width:15rem;
  background:var(--weiss);border:1px solid var(--line-2);border-radius:var(--r-md)}
.mconfirm{margin-top:.625rem}

/* =============================================================================
   Quiz – Teilnehmer
   .opt, .qdot, .score und #confetti stammen aus dem Mockup weiter oben.
   Die Antworten sind echte Formularfelder im Label; markiert wird über :has,
   damit die Auswahl ohne JavaScript sichtbar ist.
   ============================================================================= */
.h-section{font-size:1.125rem;margin:1.75rem 0 .875rem}
.qintro{padding:2rem;display:flex;flex-direction:column;gap:1rem}
.qintro__note{display:flex;gap:.625rem;align-items:flex-start;box-shadow:inset 0 0 0 1px #D5E08C;margin:0}
.qintro__note .icon{margin-top:3px}
.qfacts{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin:0;padding:0;list-style:none;font-size:.9375rem;color:var(--ink-2)}
.qfacts strong{font-weight:600;color:var(--ink)}
.qhead{display:flex;justify-content:space-between;align-items:flex-end;gap:.75rem;flex-wrap:wrap;margin-bottom:1.25rem}
.qhead h1{font-size:1.375rem}
.qcard{padding:1.125rem 1.25rem;margin-bottom:1rem;display:flex;flex-direction:column;gap:.75rem}
.qdot{display:grid;place-items:center;font-family:inherit;color:var(--ink);padding:0}
a.qdot{text-decoration:none}
.qq{font-size:1.1875rem;max-width:52ch;margin-bottom:.5rem;white-space:pre-line;overflow-wrap:break-word}
.qhint{margin-bottom:1.25rem}
.opts{display:flex;flex-direction:column;gap:.625rem;border:0;margin:0;padding:0;min-width:0}
.opt{position:relative}
.opt__in{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.opt__txt{padding-top:1px;white-space:pre-line;overflow-wrap:break-word;min-width:0}
.opt:has(.opt__in:checked){border-color:var(--rot);border-width:2px;background:#FFF6F4}
.opt:has(.opt__in:checked) .opt__key{background:var(--rot);color:var(--alge)}
.opt:has(.opt__in:focus-visible){outline:2px solid var(--alge);outline-offset:2px}
.qconfirm{padding:2rem;display:flex;flex-direction:column;gap:.875rem;max-width:600px;margin:0 auto}
.qconfirm__acts{display:flex;gap:.625rem;justify-content:flex-end;flex-wrap:wrap;margin-top:.5rem}

.result{padding:2rem;text-align:center}
.result--passed{background:linear-gradient(180deg,#FBFDF0,var(--weiss) 70%)}
.result__row{display:flex;gap:2rem;justify-content:center;align-items:center;flex-wrap:wrap}
.result__text{display:flex;flex-direction:column;gap:.625rem;text-align:left;max-width:36ch}
.result__text h1{font-size:1.625rem}
.result__text strong{font-weight:600}
.result__acts{display:flex;gap:.625rem;justify-content:center;flex-wrap:wrap;margin-top:1.75rem}
.result__meta{margin-top:1rem}
.score__in{position:relative;display:flex;flex-direction:column;align-items:center;gap:.125rem}
.score__track{stroke:var(--kalk)}
.score__bar{stroke:var(--alge);transition:stroke-dashoffset 1s cubic-bezier(.22,1,.36,1)}
.score__bar--fail{stroke:var(--rot)}
.unlock{display:flex;gap:.625rem;align-items:flex-start;margin:0;font-size:.9375rem;box-shadow:inset 0 0 0 1px #D5E08C}
.unlock .icon{margin-top:3px}
.review-list{display:flex;flex-direction:column;gap:.5rem}
.review-note{margin:0 0 .875rem}
.review{border:1px solid var(--line);border-radius:var(--r-md);padding:.875rem 1rem;background:var(--weiss)}
.review summary{cursor:pointer;display:flex;gap:.625rem;align-items:flex-start;font-size:.9375rem;list-style:none}
.review summary::-webkit-details-marker{display:none}
.review__q{white-space:pre-line;overflow-wrap:break-word;min-width:0}
.review__q .badge{font-size:.6875rem;margin-left:.25rem}
.review__mark{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:.8125rem;font-weight:600}
.review__mark .icon{width:14px;height:14px;vertical-align:0}
.review__mark--right{background:var(--alge);color:var(--chloro-hell)}
.review__mark--wrong{background:var(--rot-tief);color:var(--weiss)}
.review__mark--part{background:var(--rot);color:var(--alge)}
.review__body{display:flex;flex-direction:column;gap:.375rem;margin-top:.75rem;padding-left:2.25rem;font-size:.875rem;overflow-wrap:break-word}
.review__body p{margin:0}
.review__why{white-space:pre-line}

@media (max-width:640px){
  .qintro,.qconfirm,.result{padding:1.375rem 1.125rem}
  .result__text{text-align:center;align-items:center}
  .review__body{padding-left:0}
}

/* =============================================================================
   Quiz – Verwaltung
   ============================================================================= */
.qsettings-card{margin-bottom:1.25rem}
.qsettings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:1rem;align-items:end}
.with-unit{display:flex;align-items:center;gap:.5rem}
.input--pct{max-width:7rem}
.qlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.75rem}
.qitem{padding:1.125rem 1.25rem;display:flex;flex-direction:column;gap:.75rem;scroll-margin-top:5rem}
.qitem--off{background:var(--ground-2);box-shadow:none}
.qitem__head{display:flex;justify-content:space-between;align-items:center;gap:.75rem;flex-wrap:wrap}
.qitem__meta{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.qitem__q{margin:0;font-weight:500;white-space:pre-line;overflow-wrap:break-word}
.qans{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.375rem;font-size:.875rem}
.qans li{display:flex;align-items:center;gap:.625rem;overflow-wrap:break-word;min-width:0}
.qans__right{font-weight:500}
.opt__key--sm{width:22px;height:22px;font-size:.6875rem}
.opt__key--right{background:var(--alge);color:var(--chloro-hell)}
.qerrors{margin-bottom:1rem}
.qform{padding:1.5rem;display:flex;flex-direction:column;gap:1.125rem;max-width:860px}
.qform__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.qform__answers{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:.625rem}
.qform__legend{font-size:.8125rem;font-weight:500;color:var(--ink-2);padding:0;margin-bottom:.375rem}
.arows{display:flex;flex-direction:column;gap:.5rem}
.arow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.625rem;align-items:center}
.arow__ok{display:inline-flex;align-items:center;gap:.375rem;font-size:.8125rem;white-space:nowrap;cursor:pointer}
.qform input[type="checkbox"]{accent-color:var(--alge);width:18px;height:18px;margin:0;flex:none}
.checkline{display:flex;gap:.625rem;align-items:flex-start;font-size:.9375rem;cursor:pointer}
.checkline input[type="checkbox"]{margin-top:3px}
.checkline strong{font-weight:500}

@media (max-width:1080px){
  .qsettings{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .qsettings,.qform__row{grid-template-columns:minmax(0,1fr)}
  .qform{padding:1.125rem}
}