/* OIT Module – erbt die Schrift der Website (font-family: inherit), keine externen Fonts. */
.oit-mod{
  --oit-bg:#0A0F1E;--oit-fg:#fff;--oit-mut:#B9C2D6;--oit-line:rgba(255,255,255,.22);
  --oit-mag:#D42BDB;--oit-cy:#00DCF5;--oit-btn:#B51DBB;--oit-panel:rgba(255,255,255,.07);--oit-focus:#00DCF5;
  --oit-ok-bg:#0E3B36;--oit-ok:#7CF0DC;--oit-warn-bg:#4A2E0A;--oit-warn:#FFC46B;--oit-fail-bg:#4D1414;--oit-fail:#FF9C9C;
  --oit-dots:rgba(60,100,255,.28);
  font-family:inherit;color:var(--oit-fg);margin:24px 0;box-sizing:border-box;
}
.oit-mod[data-theme="light"]{
  --oit-bg:#DCDCDC;--oit-fg:#0A0F1E;--oit-mut:#3B4256;--oit-line:rgba(10,15,30,.3);
  --oit-mag:#9A17A0;--oit-cy:#00606F;--oit-btn:#B51DBB;--oit-panel:rgba(10,15,30,.06);--oit-focus:#0A0F1E;
  --oit-ok-bg:#CDEBE6;--oit-ok:#0B5E57;--oit-warn-bg:#F7E2BF;--oit-warn:#7A3606;--oit-fail-bg:#F6CFCF;--oit-fail:#8A1414;
  --oit-dots:transparent;
}
.oit-mod *,.oit-mod *::before,.oit-mod *::after{box-sizing:border-box}
/* data-full="1": derzeit deaktiviert (führte zum Ausbruch bis an den echten Browserrand,
   ohne den seiteneigenen Rand zu kennen). Wird ersetzt, sobald die reale Content-Breite
   der Seite bekannt ist – siehe Chat. Bis dahin verhält sich [full="1"] wie ohne den Parameter. */
.oit-card{
  background-color:var(--oit-bg);
  background-image:radial-gradient(var(--oit-dots) 2px,transparent 2.5px);background-size:56px 56px;
  border-radius:28px;padding:32px 24px;
}
.oit-eyebrow{margin:0 0 14px;color:var(--oit-cy);text-transform:uppercase;letter-spacing:.02em;font-size:1.05rem;line-height:1.2}
.oit-h{margin:0 0 20px;font-size:clamp(1.7rem,5.5vw,2.6rem);line-height:1.12;font-weight:700;color:var(--oit-fg)}
.oit-h em{font-style:normal;color:var(--oit-mag);display:block}
.oit-h:focus{outline:none}
.oit-p{margin:0 0 16px;color:var(--oit-fg);font-size:1.05rem;line-height:1.6}
.oit-mut{color:var(--oit-mut);font-size:.95rem;line-height:1.55;margin:12px 0 0}
.oit-label{display:block;margin:0 0 8px;font-weight:600}
.oit-input{width:100%;min-height:56px;padding:0 16px;font:inherit;font-size:1.1rem;color:#0A0F1E;background:#fff;border:2px solid transparent;border-radius:2px}
.oit-row{display:flex;flex-direction:column;gap:14px;max-width:560px}
.oit-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 26px;font:inherit;font-weight:600;color:#fff;background:var(--oit-btn);border:2px solid var(--oit-btn);border-radius:2px;cursor:pointer;text-decoration:none}
.oit-btn:hover{filter:brightness(1.1)}
.oit-btn[disabled]{opacity:.6;cursor:default}
.oit-btn--ghost{background:transparent;color:var(--oit-fg);border-color:var(--oit-fg)}
.oit-link{background:none;border:0;padding:8px 0;font:inherit;color:var(--oit-cy);text-decoration:underline;cursor:pointer}
.oit-mod :focus-visible{outline:3px solid var(--oit-focus);outline-offset:3px}
/* Überschrift wird bei jedem Zustandswechsel per JS fokussiert (Screenreader-Ankündigung),
   soll aber keinen sichtbaren Rahmen bekommen. Muss NACH der allgemeinen Regel stehen,
   da gleiche Spezifität sonst durch Reihenfolge zugunsten der allgemeinen Regel entschieden wird. */
.oit-h:focus-visible{outline:none}
.oit-err{color:var(--oit-fail);font-weight:600;margin:0}
.oit-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.oit-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}

.oit-bar{height:8px;border-radius:4px;background:var(--oit-line);overflow:hidden;max-width:420px;margin:18px 0}
.oit-bar span{display:block;height:100%;width:30%;background:var(--oit-mag);border-radius:4px;animation:oit-scan 1.3s ease-in-out infinite}
@keyframes oit-scan{0%{transform:translateX(-100%)}100%{transform:translateX(340%)}}
@media (prefers-reduced-motion:reduce){.oit-bar span{animation:none;width:60%}}

.oit-grid{display:grid;gap:28px}
@media (min-width:900px){.oit-card{padding:48px 56px}.oit-grid--2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.oit-grid--cfg{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}}

.oit-score{display:flex;align-items:baseline;gap:12px;margin:0 0 12px}
.oit-score b{font-size:4.5rem;line-height:1;color:var(--oit-fg)}
.oit-segs{display:flex;gap:6px;margin:0 0 18px}
.oit-segs i{flex:1;height:10px;border-radius:5px;background:var(--oit-line)}
.oit-segs i.ok{background:var(--oit-ok)}.oit-segs i.warn{background:var(--oit-warn)}.oit-segs i.fail{background:var(--oit-fail)}
.oit-list{list-style:none;margin:0;padding:0}
.oit-list li{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--oit-line)}
.oit-list strong{display:block;margin-bottom:2px}
.oit-list span.t{color:var(--oit-mut);font-size:.95rem;line-height:1.45}
.oit-pill{flex-shrink:0;min-width:92px;text-align:center;padding:6px 12px;border-radius:999px;font-size:.85rem;font-weight:700}
.oit-pill.ok{background:var(--oit-ok-bg);color:var(--oit-ok)}.oit-pill.warn{background:var(--oit-warn-bg);color:var(--oit-warn)}.oit-pill.fail{background:var(--oit-fail-bg);color:var(--oit-fail)}

.oit-opts{display:flex;flex-direction:column;gap:12px;margin:18px 0}
.oit-opt{text-align:left;min-height:60px;padding:14px 20px;font:inherit;font-size:1.05rem;color:var(--oit-fg);background:var(--oit-panel);border:2px solid var(--oit-line);border-radius:12px;cursor:pointer}
.oit-opt[aria-pressed="true"]{border-color:var(--oit-mag);background:var(--oit-panel)}
.oit-opt small{display:block;color:var(--oit-mut);font-size:.9rem;margin-top:4px}
.oit-opt .tag{float:right;font-size:.75rem;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--oit-ok-bg);color:var(--oit-ok)}
.oit-pills{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.oit-pills .oit-opt{min-height:46px;padding:8px 18px;border-radius:999px;font-size:1rem}
.oit-cards{display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:640px){.oit-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.oit-step{color:var(--oit-mut);font-size:.9rem;margin:0 0 10px}
.oit-prog{display:flex;gap:6px;margin:0 0 22px}
.oit-prog i{flex:1;height:6px;border-radius:3px;background:var(--oit-line)}
.oit-prog i.on{background:var(--oit-mag)}

.oit-mail{background:#fff;color:#0A0F1E;border-radius:14px;overflow:hidden;margin:0 0 18px}
.oit-mail header{padding:18px 20px;border-bottom:1px solid #DDE3EA}
.oit-mail h3{margin:0 0 10px;font-size:1.15rem;line-height:1.3}
.oit-mail .meta{font-size:.9rem;color:#3B4256;margin:2px 0;word-break:break-word}
.oit-mail .flag{background:#F6CFCF;color:#8A1414;border-radius:4px;padding:1px 5px}
.oit-mail .mb{padding:18px 20px;line-height:1.6}
.oit-mail .mb p{margin:0 0 12px}
.oit-mail .lnk{display:inline-block;background:#0A6E93;color:#fff;padding:10px 16px;border-radius:6px;font-weight:600}
.oit-mail footer{padding:10px 20px;background:#F3F6F8;border-top:1px solid #DDE3EA;font-size:.85rem;color:#22394D;word-break:break-all}
.oit-verdict{padding:14px 16px;border-radius:10px;margin:0 0 14px;font-weight:700}
.oit-verdict.ok{background:var(--oit-ok-bg);color:var(--oit-ok)}.oit-verdict.no{background:var(--oit-warn-bg);color:var(--oit-warn)}
.oit-flags{margin:0 0 14px;padding-left:20px;line-height:1.5}
.oit-ai{background:rgba(0,0,0,.35);border-radius:10px;padding:14px 16px;margin:0 0 16px;font-size:.95rem;line-height:1.5}
.oit-mod[data-theme="light"] .oit-ai{background:rgba(10,15,30,.08)}
.oit-ai b{display:block;color:var(--oit-cy);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px}

.oit-bars{display:flex;flex-direction:column;gap:14px;margin:0 0 20px}
.oit-bars div.h{display:flex;justify-content:space-between;font-size:.95rem;margin-bottom:6px}
.oit-bars .b{height:10px;border-radius:5px;background:var(--oit-line)}
.oit-bars .b i{display:block;height:100%;border-radius:5px}
.oit-bars .b i.ok{background:var(--oit-ok)}.oit-bars .b i.warn{background:var(--oit-warn)}.oit-bars .b i.fail{background:var(--oit-fail)}

.oit-aside{background:var(--oit-panel);border:1px solid var(--oit-line);border-radius:18px;padding:24px}
.oit-aside h3{margin:0 0 10px;font-size:1.1rem;color:var(--oit-cy);text-transform:uppercase;letter-spacing:.02em}
.oit-aside ul{margin:0 0 16px;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.oit-aside li::before{content:"+ ";color:var(--oit-mag);font-weight:700}
.oit-lead{display:flex;flex-direction:column;gap:12px;margin-top:22px;padding:20px;border-radius:14px;background:var(--oit-panel);border:1px solid var(--oit-line)}
.oit-lead .oit-input{min-height:48px;font-size:1rem}
.oit-lead label.c{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;line-height:1.45;color:var(--oit-mut)}
.oit-lead label.c input{width:20px;height:20px;flex-shrink:0;margin-top:2px}
.oit-lead label.c a{color:var(--oit-cy)}
.oit-lead .lt{margin:0;font-weight:600}
.oit-lead.is-done>*:not(.oit-status){display:none}
.oit-status{margin:0;font-weight:600}
