/* RailMentis-Designsystem. Jede Regel steht unter html[data-brand=railmentis]; eurobahn wird nicht berührt.
   Grundsätze: weiße Flächen auf kühlem Grau, wenig Dekoration, ein Petrol-Akzent, Modulfarbe nur als kleine Kennzeichnung.
   Schrift: Manrope (lokal, public/fonts). Abstände auf 4-px-Raster, Radien 10/14, Schatten nur zur Abhebung. */
html[data-brand=railmentis]{
  --rm-ink:#0f1b2d;--rm-mute:#5a6678;--rm-line:#e2e8f0;--rm-line2:#c9d3df;--rm-bg:#f7f9fb;--rm-card:#fff;--rm-soft:#eef3f6;
  --rm-accent:#00717a;--rm-accent-d:#005a62;--rm-accent-soft:#e3f2f3;
  --rm-lernen:#00717a;--rm-pruefen:#3a4d94;--rm-planen:#9a5b00;--rm-mod:var(--rm-accent);
  --rm-r1:10px;--rm-r2:14px;--rm-sh:0 1px 2px rgba(15,27,45,.05),0 1px 1px rgba(15,27,45,.03);
  --bg:var(--rm-bg);--ink:var(--rm-ink);--muted:var(--rm-mute);--grey:var(--rm-mute);--line:var(--rm-line);--line2:var(--rm-line2);--tint:var(--rm-soft);--card:var(--rm-card);--shadow:var(--rm-sh);--nbtn:var(--rm-accent);--navy-d:var(--rm-accent-d);
}
html[data-brand=railmentis][data-rmmod=lernen]{--rm-mod:var(--rm-lernen)}
html[data-brand=railmentis][data-rmmod=pruefen]{--rm-mod:var(--rm-pruefen)}
html[data-brand=railmentis][data-rmmod=planen]{--rm-mod:var(--rm-planen)}
html[data-brand=railmentis] body{font-size:16px;line-height:1.6;letter-spacing:-.003em}
html[data-brand=railmentis] h1,html[data-brand=railmentis] h2,html[data-brand=railmentis] h3{font-weight:700;letter-spacing:-.012em;color:var(--rm-ink);text-wrap:balance}
html[data-brand=railmentis] h2{font-size:1.25rem}
html[data-brand=railmentis] h3{font-size:1.02rem}

/* Seitenkopf: keine Farbfläche, große ruhige Überschrift, Modulkennzeichnung als kleine Zeile darüber */
html[data-brand=railmentis] .hero{background:none;border-radius:0;padding:8px 4px 4px;margin-bottom:12px;overflow:visible}
html[data-brand=railmentis] .hero h1{font-size:clamp(1.7rem,3vw,2.2rem);line-height:1.15;font-weight:700;max-width:24ch}
html[data-brand=railmentis] .hero h1::before{content:attr(data-kicker);display:block;font:700 .72rem var(--f);letter-spacing:.1em;text-transform:uppercase;color:var(--rm-mod);margin-bottom:6px}
html[data-brand=railmentis] .hero .lead{color:var(--rm-mute);font-size:1.02rem;max-width:62ch}
html[data-brand=railmentis] .hero.compact{padding-block:4px}
html[data-brand=railmentis] .hero .cmd-open,html[data-brand=railmentis] .herosea input{border:1px solid var(--rm-line2);background:var(--rm-card);box-shadow:var(--rm-sh)}
html[data-brand=railmentis] .herosea input{border-radius:99px}

/* Flächen */
html[data-brand=railmentis] .card{background:var(--rm-card);border:1px solid var(--rm-line);border-radius:var(--rm-r2);box-shadow:var(--rm-sh);padding:24px}
html[data-brand=railmentis] .stack{gap:16px}

/* Schaltflächen: primär Petrol, sekundär weiß mit Rahmen */
html[data-brand=railmentis] .btn{border-radius:var(--rm-r1);font-weight:600;padding:11px 18px;background:var(--rm-accent)}
html[data-brand=railmentis] .btn:hover{background:var(--rm-accent-d)}
html[data-brand=railmentis] .btn.sec{background:var(--rm-card);color:var(--rm-ink);box-shadow:inset 0 0 0 1px var(--rm-line2)}
html[data-brand=railmentis] .btn.sec:hover{background:var(--rm-soft)}
html[data-brand=railmentis] .btn.sm{padding:7px 12px}
html[data-brand=railmentis] .btn:focus-visible,html[data-brand=railmentis] .chip:focus-visible,html[data-brand=railmentis] .tile:focus-visible,html[data-brand=railmentis] input:focus-visible,html[data-brand=railmentis] select:focus-visible,html[data-brand=railmentis] textarea:focus-visible,html[data-brand=railmentis] a:focus-visible{outline:3px solid var(--rm-ink);outline-offset:2px}
html[data-brand=railmentis] .chip{box-shadow:inset 0 0 0 1px var(--rm-line2);font-weight:600}
html[data-brand=railmentis] .chip[aria-pressed="true"]{background:var(--rm-ink);color:var(--rm-card)}
html[data-brand=railmentis] input:not([type]),html[data-brand=railmentis] input[type=email],html[data-brand=railmentis] input[type=url],html[data-brand=railmentis] input[type=time],html[data-brand=railmentis] input[type=tel],html[data-brand=railmentis] input[type=text],html[data-brand=railmentis] input[type=password],html[data-brand=railmentis] input[type=number],html[data-brand=railmentis] input[type=date],html[data-brand=railmentis] input[type=search],html[data-brand=railmentis] select,html[data-brand=railmentis] textarea{border:1px solid var(--rm-line2);border-radius:var(--rm-r1)}
html[data-brand=railmentis] input:not([type]),html[data-brand=railmentis] input[type=email],html[data-brand=railmentis] input[type=url],html[data-brand=railmentis] input[type=time],html[data-brand=railmentis] input[type=tel]{color:var(--rm-ink);background:var(--rm-card);padding:10px 12px;width:100%;font-weight:400;font-size:16px;min-height:46px}
@media (min-width:901px){html[data-brand=railmentis] input:not([type]),html[data-brand=railmentis] input[type=email],html[data-brand=railmentis] input[type=url],html[data-brand=railmentis] input[type=time],html[data-brand=railmentis] input[type=tel]{font-size:inherit}}
html[data-brand=railmentis][data-mode=dark] input:not([type]),html[data-brand=railmentis][data-mode=dark] input[type=email],html[data-brand=railmentis][data-mode=dark] input[type=url],html[data-brand=railmentis][data-mode=dark] input[type=time]{background:var(--rm-card);color:var(--rm-ink)}
html[data-brand=railmentis] .pill{font-weight:600}

/* Kacheln (Verwaltung, Bereiche): weiß mit Rahmen statt getönter Fläche */
html[data-brand=railmentis] .tile{background:var(--rm-card);box-shadow:none;border:1px solid var(--rm-line);border-radius:var(--rm-r2);transition:border-color .15s,box-shadow .15s}
html[data-brand=railmentis] .tile:hover{border-color:var(--rm-accent);box-shadow:var(--rm-sh)}
html[data-brand=railmentis] .tile.ticon svg{stroke:var(--rm-accent)}
html[data-brand=railmentis] .tile b{color:var(--rm-ink)}

/* Tabellen */
html[data-brand=railmentis] th{border-bottom:1px solid var(--rm-line2);font-weight:700}
html[data-brand=railmentis] td{border-bottom-color:var(--rm-line)}
html[data-brand=railmentis] tbody tr:hover{background:var(--rm-bg)}

/* Lernen: Kurskopf hell statt Farbfläche, Fortschritt in Petrol */
html[data-brand=railmentis] .khead{background:var(--rm-card)!important;color:var(--rm-ink)!important;border:1px solid var(--rm-line);box-shadow:var(--rm-sh);border-radius:var(--rm-r2)}
html[data-brand=railmentis] .khead h2{color:var(--rm-ink)}
html[data-brand=railmentis] .khead .linkbtn{color:var(--rm-accent)}
html[data-brand=railmentis] .khead p{opacity:1;color:var(--rm-mute)}
html[data-brand=railmentis] .khead .kback{background:var(--rm-card);color:var(--rm-ink);box-shadow:inset 0 0 0 1px var(--rm-line2)}
html[data-brand=railmentis] .khead .pill{box-shadow:none}
html[data-brand=railmentis] .kcard{border:1px solid var(--rm-line);border-radius:var(--rm-r2);box-shadow:var(--rm-sh)}
html[data-brand=railmentis] .klesson{background:transparent}
html[data-brand=railmentis] .klesson:hover{background:var(--rm-soft)}
html[data-brand=railmentis] .klesson.on{background:var(--rm-accent-soft);color:var(--rm-ink);box-shadow:inset 3px 0 0 var(--rm-accent)}
html[data-brand=railmentis] .kbar{height:6px}
html[data-brand=railmentis] .kbar i{background:var(--rm-accent)}
html[data-brand=railmentis] .kles{box-shadow:none;border:1px solid var(--rm-line)}

/* Linienstreifen unter dem Seitenkopf: doppelt die Seitenleiste, deshalb am Desktop ausgeblendet, mobil als Reiter */
@media (min-width:901px){html[data-brand=railmentis] .net-strip{display:none}}
html[data-brand=railmentis] .net-strip{border:1px solid var(--rm-line);box-shadow:none;border-radius:var(--rm-r2)}

/* Seitenleiste */
html[data-brand=railmentis] #nav .rm-l{border-radius:var(--rm-r1);font-weight:600}
html[data-brand=railmentis] #nav button[aria-current="page"]{background:var(--rm-accent);color:#fff}
html[data-brand=railmentis] #nav .rm-m[aria-current="true"]{background:var(--rm-accent-soft)}
html[data-brand=railmentis] .rm-subs{border-left-color:var(--rm-line)}

/* Dashboard */
html[data-brand=railmentis] .dash-c{border:1px solid var(--rm-line);border-left:1px solid var(--rm-line);border-radius:var(--rm-r2);box-shadow:var(--rm-sh);padding:18px 20px;position:relative}
html[data-brand=railmentis] .dash-c::before{content:'';position:absolute;left:0;top:18px;bottom:18px;width:3px;border-radius:0 3px 3px 0;background:var(--rm-line2)}
html[data-brand=railmentis] .dash-c.info::before{background:var(--rm-accent)}
html[data-brand=railmentis] .dash-c.ok::before{background:#2f7d32}
html[data-brand=railmentis] .dash-c.warn::before{background:#b07c00}
html[data-brand=railmentis] .dash-c.bad::before{background:#b3261e}
html[data-brand=railmentis] .dash-c.info,html[data-brand=railmentis] .dash-c.ok,html[data-brand=railmentis] .dash-c.warn,html[data-brand=railmentis] .dash-c.bad{border-left-color:var(--rm-line)}
html[data-brand=railmentis] .dash-h{font-size:1.1rem;margin:0 0 12px}
html[data-brand=railmentis] .dash-c .btn{justify-self:start}

/* Hinweis- und Demo-Banner */
html[data-brand=railmentis] .notice{border-radius:var(--rm-r1)}

/* Prüfen: ablenkungsarm. In der Durchführung verschwindet alles außer der Aufgabe */
html[data-brand=railmentis] body.insession .hero{display:none}
html[data-brand=railmentis] body.insession .net-strip{display:none}

/* Planen: kompaktere Abstände und Schrift */
html[data-brand=railmentis][data-rmmod=planen] .card{padding:16px}
html[data-brand=railmentis][data-rmmod=planen] .stack{gap:12px}
@media (max-width:900px){
  html[data-brand=railmentis] .card{padding:18px}
  html[data-brand=railmentis] .hero{padding-inline:2px}
}
@media (prefers-reduced-motion:reduce){html[data-brand=railmentis] *{transition:none!important}}

/* Schaltfläche „beenden/abgeben“ bleibt rot auf Weiß (die Basisregel .btn oben hätte sie sonst überdeckt) */
html[data-brand=railmentis] .btn.end{background:var(--rm-card);color:var(--bad);box-shadow:inset 0 0 0 2px var(--bad)}
html[data-brand=railmentis] .btn.end:hover{background:var(--bad-bg)}
/* Prüfen in der Durchführung: nur die Aufgabe, keine Seitenleiste */
@media (min-width:901px){
  html[data-brand=railmentis] body.insession .side{display:none}
  html[data-brand=railmentis] body.insession .app{grid-template-columns:minmax(0,1fr);max-width:1040px}
}

/* Dunkler Modus (folgt der Einstellung des Geräts, siehe data-mode in app.js) */
html[data-brand=railmentis][data-mode=dark]{
  --rm-ink:#e6ecf3;--rm-mute:#a3afc0;--rm-line:#263244;--rm-line2:#3a4a60;--rm-bg:#0e1623;--rm-card:#152030;--rm-soft:#1b2a3d;
  --rm-accent:#0a8a93;--rm-accent-d:#0c747c;--rm-accent-soft:#12383d;--rm-lernen:#5cc8cf;--rm-pruefen:#9fb2f0;--rm-planen:#f0b35c;
  --navy:#e6ecf3;--tint:#1b2a3d;--bad-bg:#3a1a1d;--ok-bg:#16301c
}
html[data-brand=railmentis][data-mode=dark] .dash-c.info::before{background:#5cc8cf}
html[data-brand=railmentis][data-mode=dark] .tile.ticon svg{stroke:#5cc8cf}
html[data-brand=railmentis][data-mode=dark] .btn.end{background:var(--rm-card);color:#ff8a8a;box-shadow:inset 0 0 0 2px #ff8a8a}

/* Planen mobil: Filter und Aktionen umbrechen statt abgeschnitten zu scrollen */
@media (max-width:900px){
  html[data-brand=railmentis] .pl-acts,html[data-brand=railmentis] .pl-filters,html[data-brand=railmentis] .pl-bar .row,html[data-brand=railmentis] .pl-bar .chips{flex-wrap:wrap;overflow:visible}
  html[data-brand=railmentis] .pl-filters .chip{flex:0 0 auto}
}
/* Linienstreifen (mobil): ruhige Reiter statt Bahnlinie mit Knoten */
html[data-brand=railmentis] .net-strip{flex-direction:row;align-items:center;gap:10px;padding:8px 10px;margin-bottom:12px}
html[data-brand=railmentis] .net-sname{background:none;color:var(--rm-mod);padding:0;font-size:.7rem}
html[data-brand=railmentis] .net-sts{gap:4px;padding:0;flex:1;min-width:0}
html[data-brand=railmentis] .net-sts::before,html[data-brand=railmentis] .net-sts .net-n{display:none}
html[data-brand=railmentis] .net-sts button{flex:0 0 auto;min-width:0;padding:8px 12px;border-radius:99px;min-height:40px;align-items:center}
html[data-brand=railmentis] .net-sts button .net-l{font-weight:600;font-size:.88rem;color:var(--rm-mute)}
html[data-brand=railmentis] .net-sts button[aria-selected=true]{background:var(--rm-accent-soft)}
html[data-brand=railmentis] .net-sts button[aria-selected=true] .net-l{color:var(--rm-ink)}

/* Linienstreifen mobil: Reiter umbrechen, nichts wird abgeschnitten */
@media (max-width:900px){
  html[data-brand=railmentis] .net-strip{flex-wrap:wrap;align-items:flex-start}
  html[data-brand=railmentis] .net-sts{flex-wrap:wrap;overflow:visible;flex-basis:100%}
}

/* Weiterlernen-Kopf (Lernen) und Anmeldung: ruhige weiße Fläche statt Verlauf, Kontrast gesichert */
html[data-brand=railmentis] .kresume,html[data-brand=railmentis] .kresume.late{background:var(--rm-card)!important;color:var(--rm-ink);border:1px solid var(--rm-line);border-left:4px solid var(--rm-lernen);border-radius:var(--rm-r2);box-shadow:var(--rm-sh)}
html[data-brand=railmentis] .kresume.late{border-left-color:#b42318}
html[data-brand=railmentis] .kresume h2{color:var(--rm-ink)}
html[data-brand=railmentis] .kresume p{opacity:1;color:var(--rm-mute)}
html[data-brand=railmentis] .kresume-k{background:var(--rm-accent-soft);color:var(--rm-accent-d)}
html[data-brand=railmentis] .kresume .kbar{background:var(--rm-soft)}
html[data-brand=railmentis] .kresume .kbar i{background:var(--rm-lernen)}
html[data-brand=railmentis] .kresume .btn{background:var(--rm-accent);color:#fff}
html[data-brand=railmentis] .login{border-radius:var(--rm-r2);border:1px solid var(--rm-line);box-shadow:0 8px 28px rgba(15,27,45,.08)}
html[data-brand=railmentis] .login .top{background:var(--rm-card);border-bottom:1px solid var(--rm-line)}
html[data-brand=railmentis] .login .top h1{color:var(--rm-ink)}
html[data-brand=railmentis] .login .top p{color:var(--rm-mute)}

/* Dein nächster Schritt: eine hervorgehobene Karte, kein zusätzlicher Farbblock */
html[data-brand=railmentis] .dash-c.hero{border-color:var(--rm-accent);box-shadow:0 0 0 1px var(--rm-accent),var(--rm-sh);padding:22px 24px}
html[data-brand=railmentis] .dash-c.hero h3{font-size:1.25rem}
html[data-brand=railmentis] .dash-k{margin:0 0 6px;font:700 .74rem var(--f);letter-spacing:.07em;text-transform:uppercase;color:var(--rm-accent-d)}

/* Kurs-Assistent: Dateiliste */
html[data-brand=railmentis] .wz-files{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}
html[data-brand=railmentis] .wz-files li{display:grid;gap:2px;padding:10px 12px;border:1px solid var(--rm-line);border-left:3px solid #2f7d32;border-radius:var(--rm-r1);background:var(--rm-card)}
html[data-brand=railmentis] .wz-files li.warn{border-left-color:#b07c00}
html[data-brand=railmentis] .wz-files li.bad{border-left-color:#b42318}

/* Kurs zuweisen */
html[data-brand=railmentis] .asg-l{list-style:none;margin:0;padding:0;display:grid;border:1px solid var(--rm-line);border-radius:var(--rm-r1);overflow:hidden}
html[data-brand=railmentis] .asg-r{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:10px 14px;background:var(--rm-card);border-top:1px solid var(--rm-line)}
html[data-brand=railmentis] .asg-r:first-child{border-top:0}
html[data-brand=railmentis] .asg-r.off{background:var(--rm-soft)}
html[data-brand=railmentis] .asg-r .chk{flex:1 1 220px;min-width:0}
html[data-brand=railmentis] .asg-n{flex:1 1 100%;margin-left:30px}
html[data-brand=railmentis] .asg-r .chk{border:0;background:transparent;border-radius:0;padding:0;box-shadow:none;min-height:0}

/* Listenzeilen mit eigener Aktion (Steuerungskarten) */
html[data-brand=railmentis] .dash-l li:has(> .btn){grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px;padding:6px 0;border-top:1px solid var(--rm-line)}
html[data-brand=railmentis] .dash-l li:has(> .btn):first-child{border-top:0}
html[data-brand=railmentis] .dash-l li:has(> .btn) b{grid-column:1}
html[data-brand=railmentis] .dash-l li:has(> .btn) span{grid-column:1}
html[data-brand=railmentis] .dash-l li:has(> .btn) .btn{grid-column:2;grid-row:1 / span 2}

html[data-brand=railmentis] .cert ul.plain{list-style:none;padding:0;margin:8px 0}html[data-brand=railmentis] .cert ul.plain li{padding:2px 0}

/* Planungsraster: Konflikt- und Hinweismarken überdecken die Uhrzeit nicht; Uhrzeit im Dunkelmodus lesbar */
html[data-brand=railmentis] .pl-chip.ev:has(.fl){padding-right:26px}
html[data-brand=railmentis][data-mode=dark] .pl-chip.ev b,html[data-brand=railmentis][data-mode=dark] .pl-chip .tm{color:var(--ink)}
html[data-brand=railmentis][data-mode=dark] .pl-chip .sb{color:var(--muted)}
/* Zeitachse auf schmalen Bildschirmen: Marken stehen in einer eigenen Zeile unter dem Text, damit die Uhrzeit vollständig bleibt */
@media (max-width:700px){
  html[data-brand=railmentis] .pl-chip:not(.ev):has(.fl){padding-right:8px}
  html[data-brand=railmentis] .pl-chip:not(.ev) .fl{position:static;display:inline-grid;margin:3px 3px 0 0;vertical-align:middle}
}

/* Mein Bereich */
html[data-brand=railmentis] .me{max-width:760px}
html[data-brand=railmentis] .me-head{display:flex;gap:16px;align-items:center}
html[data-brand=railmentis] .me-head h2{margin:0;font-size:1.25rem}
html[data-brand=railmentis] .me-head .ub-av{width:56px;height:56px;font-size:1.1rem;flex:none}
html[data-brand=railmentis] .me-s h2{font-size:1.05rem;margin:0 0 12px}
html[data-brand=railmentis] .me-l{list-style:none;margin:0;padding:0;display:grid;gap:0}
html[data-brand=railmentis] .me-l li{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;padding:12px 0;border-top:1px solid var(--rm-line)}
html[data-brand=railmentis] .me-l li:first-child{border-top:0;padding-top:0}
html[data-brand=railmentis] .me-l li b{flex:1 1 220px}
html[data-brand=railmentis] .me-l li .btn{margin-left:auto}
html[data-brand=railmentis] .stack.me{max-width:760px;margin-inline:0}
html[data-brand=railmentis] .me-head .ub-av{display:grid;place-items:center;border-radius:50%;background:var(--rm-btn,#00787f);color:#fff;font-weight:700}