/* AIEE — Prüfung der Teilnahmebestätigung. Gleiche Designsprache wie die AIEE-Landingpage:
   souveränes Dunkel, navy #2B2E83 + ember #E94E1B, Roboto Light-led, harte
   Geometrie (kein Radius), Haarlinien, Ember-Dämmerung am unteren Rand.
   Tokens 1:1 aus istarium.css — hier wird keine neue Farbe/Schrift erfunden. */

@font-face{font-family:"Roboto";font-style:normal;font-weight:300;font-display:swap;src:url("Roboto-Light.woff2") format("woff2");}
@font-face{font-family:"Roboto";font-style:normal;font-weight:500;font-display:swap;src:url("Roboto-Medium.woff2") format("woff2");}

:root{
  --sky-top:#080915; --sky-mid:#101229; --sky-low:#1a1d45;
  --navy:#2B2E83; --ember:#E94E1B; --ember-soft:#f0693b;
  --text:#edeef6; --muted:#9698ba; --faint:#74769e;
  --ok:#4fd08a; --bad:#f0693b;
  --line:rgba(237,238,246,.12); --line-strong:rgba(237,238,246,.24);
  --ease:cubic-bezier(.22,.61,.36,1);
  --gutter:clamp(22px,6vw,72px);
}

*,*::before,*::after{box-sizing:border-box;}
[hidden]{display:none!important;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;min-height:100vh;position:relative;overflow-x:hidden;
  font-family:"Roboto",system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  font-weight:300;color:var(--text);line-height:1.65;
  background:
    radial-gradient(120% 80% at 50% 108%, rgba(43,46,131,.55) 0%, rgba(43,46,131,0) 50%),
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 56%, var(--sky-low) 100%);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
  display:flex;flex-direction:column;
}
/* Ember-Dämmerung am unteren Rand — das Signaturmotiv der Marke */
body::before{
  content:"";position:fixed;left:50%;bottom:-10%;z-index:0;pointer-events:none;
  width:150%;height:46%;transform:translateX(-50%);
  background:
    radial-gradient(60% 100% at 50% 102%, rgba(233,78,27,.42) 0%, rgba(233,78,27,.16) 32%, rgba(233,78,27,0) 66%),
    radial-gradient(34% 74% at 50% 102%, rgba(246,140,80,.45) 0%, rgba(246,140,80,0) 60%);
  filter:blur(8px);
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
::selection{background:rgba(233,78,27,.32);color:#fff;}
:focus-visible{outline:2px solid var(--ember-soft);outline-offset:3px;}

/* ---- Topbar: ISTARIUM-Logo, wie auf der Landingpage ---- */
.topbar{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;
  padding:clamp(20px,3.4vw,34px) var(--gutter);}
.topbar__mark img{height:22px;width:auto;opacity:.92;}
.topbar__back{font-size:13px;letter-spacing:.16em;color:var(--faint);transition:color .3s var(--ease);}
.topbar__back:hover{color:var(--text);}

/* ---- Inhaltsspalte ---- */
.shell{position:relative;z-index:1;flex:1;width:100%;max-width:720px;margin-inline:auto;
  padding:clamp(28px,6vh,72px) var(--gutter) clamp(60px,10vh,120px);}

.eyebrow{font-size:12px;font-weight:500;letter-spacing:.34em;text-transform:uppercase;color:var(--ember);
  margin:0 0 clamp(18px,3vw,28px);display:inline-flex;align-items:center;gap:14px;}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--ember);opacity:.75;}

/* Großer Programmtitel */
.title{font-weight:300;font-size:clamp(34px,6.5vw,60px);line-height:1.08;letter-spacing:.004em;margin:0;}
.subtitle{margin:clamp(14px,2vw,20px) 0 0;font-weight:300;color:var(--muted);
  font-size:clamp(15px,1.9vw,18px);max-width:46ch;}

/* Trennung zwischen Kopf und Prüfbereich */
.panel{margin-top:clamp(34px,6vw,56px);border-top:1px solid var(--line);padding-top:clamp(30px,5vw,48px);}

/* ---- Ladezustand ---- */
.state{display:flex;flex-direction:column;align-items:flex-start;gap:1rem;color:var(--muted);}
.spinner{width:30px;height:30px;border:2px solid var(--line-strong);border-top-color:var(--ember);
  border-radius:50%;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- Ergebnis ---- */
.result .badge{display:inline-flex;align-items:center;gap:12px;font-size:13px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;margin:0 0 clamp(18px,3vw,26px);}
.result .badge .dot{width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;color:var(--sky-top);font-weight:500;}
.result.ok .badge{color:var(--ok);}
.result.ok .badge .dot{background:var(--ok);}
.result.bad .badge{color:var(--bad);}
.result.bad .badge .dot{background:var(--bad);}
.result h1{font-weight:300;font-size:clamp(24px,3.6vw,34px);line-height:1.15;margin:0 0 clamp(20px,3vw,30px);color:var(--text);}
.result.bad p{color:var(--muted);font-size:clamp(15px,1.8vw,17px);margin:0;max-width:44ch;}

dl{display:grid;grid-template-columns:auto 1fr;gap:0;margin:0;}
dt,dd{padding:14px 0;border-top:1px solid var(--line);align-self:stretch;}
dt:last-of-type,dd:last-of-type{border-bottom:1px solid var(--line);}
dt{color:var(--faint);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;padding-right:24px;padding-top:17px;}
dd{margin:0;font-weight:300;color:var(--text);font-size:clamp(15px,1.8vw,17px);}

.content{margin-top:clamp(26px,4vw,40px);}
.content h2{font-weight:500;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ember);margin:0 0 14px;}
.content p{color:var(--muted);line-height:1.7;margin:0;font-size:clamp(15px,1.7vw,16px);max-width:60ch;}
.content p + p{margin-top:1em;}
.content h3{font-weight:500;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ember);margin:1.8em 0 12px;}
.content ul{margin:0;padding:0;list-style:none;color:var(--muted);line-height:1.7;font-size:clamp(15px,1.7vw,16px);max-width:60ch;}
.content li{position:relative;padding-left:20px;}
.content li + li{margin-top:.5em;}
.content li::before{content:"";position:absolute;left:0;top:.78em;width:8px;height:1px;background:var(--ember);opacity:.75;}

/* ---- Akkordeon (Kenntnis-Listen) ---- */
.acc{border-top:1px solid var(--line);margin-top:1.6em;}
.acc summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;
  padding:14px 0;font-weight:500;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ember);transition:opacity .3s var(--ease);}
.acc summary::-webkit-details-marker{display:none;}
.acc summary::after{content:"";margin-left:auto;width:8px;height:8px;flex:none;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .3s var(--ease);}
.acc[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px);}
.acc summary:hover{opacity:.75;}
.acc summary:focus-visible{outline:1px solid var(--ember-soft);outline-offset:4px;}
.acc .kenntnisse{padding-bottom:18px;}

/* ---- Verwendungshinweis (EU AI Act, Art. 4) ---- */
.content .usenote{border-top:1px solid var(--line);margin-top:1.8em;padding-top:1.4em;
  font-size:13px;line-height:1.65;color:var(--faint);}
.content .usenote b{color:var(--muted);font-weight:500;}

/* ---- Manuelle Eingabe ---- */
form{display:flex;flex-direction:column;gap:14px;max-width:32rem;}
label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:500;}
input{padding:.85rem 1rem;background:rgba(237,238,246,.04);border:1px solid var(--line-strong);
  border-radius:0;color:var(--text);font-size:1rem;font-family:inherit;}
input:focus{outline:none;border-color:var(--ember-soft);}
.hint{margin:-6px 0 0;font-size:13px;font-weight:300;color:var(--faint);line-height:1.6;}
.hint a{color:var(--muted);border-bottom:1px solid var(--line-strong);padding-bottom:1px;
  transition:color .3s var(--ease),border-color .3s var(--ease);}
.hint a:hover{color:var(--text);border-color:var(--ember);}
button{align-self:flex-start;background:transparent;color:var(--text);border:1px solid var(--ember);border-radius:0;
  padding:.8rem 2rem;font-size:13px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;font-family:inherit;
  cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease);}
button:hover{background:var(--ember);color:#fff;}

/* ---- Footer: Impressum + AIEE ---- */
.foot{position:relative;z-index:1;border-top:1px solid var(--line);
  padding:clamp(22px,3vw,30px) var(--gutter);margin-top:auto;
  display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;justify-content:space-between;
  font-size:13px;letter-spacing:.06em;color:var(--faint);}
.foot__links{display:flex;flex-wrap:wrap;gap:22px;}
.foot a{color:var(--muted);transition:color .3s var(--ease);border-bottom:1px solid transparent;padding-bottom:1px;}
.foot a:hover{color:var(--text);border-color:var(--ember);}