/* Eros -- Aufbau der Seiten (Paket EROS1). Farben, Schrift und Rundungen kommen aus der Datenbank (Tabelle design, /design.css). */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--hintergrund);color:var(--text);font-family:var(--schrift);font-size:16px;line-height:1.5;
     min-height:100vh;display:flex;flex-direction:column}
a{color:var(--akzent)}
.kopf{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;padding:.75rem 1rem;background:var(--flaeche);
      border-bottom:1px solid var(--rand)}
.marke{font-weight:700;font-size:1.25rem;text-decoration:none;color:var(--akzent);letter-spacing:.02em}
.menue{display:flex;flex-wrap:wrap;gap:.25rem .75rem;flex:1}
.menue a{text-decoration:none;color:var(--text-leise);padding:.25rem 0}
.menue a[aria-current]{color:var(--text);font-weight:600;border-bottom:2px solid var(--akzent)}
.abmelden{margin:0}
.inhalt{flex:1;width:100%;max-width:960px;margin:0 auto;padding:1.25rem 1rem 2rem}
.fuss{text-align:center;color:var(--text-leise);font-size:.85rem;padding:1rem}
h1{font-size:1.5rem;margin:.25rem 0 1rem}
h2{font-size:1.15rem;margin:1.5rem 0 .75rem}
.leise{color:var(--text-leise)}
.klein{font-size:.85rem}
.karte{background:var(--flaeche);border:1px solid var(--rand);border-radius:var(--rundung);padding:1.25rem;margin:1rem 0}
.schmal{max-width:440px;margin-left:auto;margin-right:auto}
label{display:block;margin:.75rem 0;font-weight:600;font-size:.95rem}
input,select{display:block;width:100%;margin-top:.3rem;padding:.6rem .7rem;font:inherit;color:var(--text);background:var(--hintergrund);
             border:1px solid var(--rand);border-radius:calc(var(--rundung) / 2)}
input:focus,select:focus{outline:2px solid var(--akzent);outline-offset:1px}
button{font:inherit;padding:.5rem 1rem;border-radius:calc(var(--rundung) / 2);border:1px solid var(--rand);background:var(--flaeche);
       color:var(--text);cursor:pointer}
button.haupt{width:100%;margin-top:.5rem;background:var(--akzent);color:var(--akzent-text);border-color:var(--akzent);font-weight:600}
.meldung{padding:.75rem 1rem;border-radius:calc(var(--rundung) / 2);margin:0 0 1rem}
.meldung.fehler{background:var(--fehler-flaeche);color:var(--fehler)}
.meldung.ok{background:var(--ok-flaeche);color:var(--ok)}
.kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.75rem}
.kachel{background:var(--flaeche);border:1px solid var(--rand);border-radius:var(--rundung);padding:1rem;display:flex;flex-direction:column;
        gap:.25rem;min-width:0;overflow-wrap:anywhere}
.liste{width:100%;border-collapse:collapse;background:var(--flaeche);border:1px solid var(--rand);border-radius:var(--rundung);
       display:block;overflow-x:auto}
.liste th,.liste td{text-align:left;padding:.55rem .75rem;border-bottom:1px solid var(--rand);vertical-align:top}
.liste th{font-size:.85rem;color:var(--text-leise);font-weight:600;white-space:nowrap}
.marke-ok{color:var(--ok);font-weight:600}
.marke-aus{color:var(--fehler);font-weight:600}
.blaettern{display:flex;justify-content:center;gap:1rem;margin:1rem 0;align-items:center}
.qr{display:flex;justify-content:center;margin:1rem 0}
.qr svg{background:#fff;padding:8px;border-radius:8px;max-width:100%;height:auto}
code{font-family:ui-monospace,monospace;overflow-wrap:anywhere}
.buehne{text-align:center;padding:3rem 0 2rem}
.buehne h1{font-size:clamp(1.6rem,5vw,2.4rem);line-height:1.25;max-width:22ch;margin:0 auto 1rem}
.versprechen{list-style:none;padding:0;margin:2rem auto 0;max-width:560px;text-align:left;display:grid;gap:.6rem}
.versprechen li{background:var(--flaeche);border:1px solid var(--rand);border-radius:var(--rundung);padding:.75rem 1rem}
/* Paket EROS1b: Symbole (Tabelle symbol) und Gliederung nach Fachbereichen -- im Kern; Kacheln: Modul oberflaeche. */
.symbole{position:absolute;width:0;height:0;overflow:hidden}
.i{width:22px;height:22px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-5px}
.i.k{width:16px;height:16px;vertical-align:-3px}
.fb-kopf{display:flex;align-items:center;gap:.5rem;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
         color:var(--text-leise);margin:1.5rem 0 .25rem}
.fb-kopf .i{color:var(--akzent)}
.fb-text{margin:0 0 .6rem}
.ob-klassisch .marke .i{display:none}
/* Paket EROS1b: Modultabellen je Fachbereich mit gleichen Spalten (Version, Braucht, Zustand stehen untereinander) */
.liste.modultabelle{display:table;table-layout:fixed;width:100%}
.modultabelle .sp-version{width:6.5rem}
.modultabelle .sp-braucht{width:12rem}
.modultabelle .sp-zustand{width:8.5rem}
.modultabelle td,.modultabelle th{overflow-wrap:anywhere}
@media (max-width:640px){.liste.modultabelle{display:block;table-layout:auto}.modultabelle colgroup{display:none}}