/* PLATTFORM OS – Einstieg und Anmeldung. Farben, Schriften und Formen von ART: die vier Bögen des EKK-MED-Logos
   (blau, grün, orange, rot), Montserrat für Überschriften. */
:root {
  --grund: #f3f6f8; --flaeche: #ffffff; --flaeche-2: #f7f9fb; --tinte: #1f2f3d; --marine: #283b4c; --leise: #5d6e7d; --linie: #dde5eb;
  --e1: #009dc8; --e2: #00a06f; --e3: #f07d00; --e4: #d40e47;
  --schatten: 0 1px 2px rgb(31 47 61 / .06), 0 8px 24px rgb(31 47 61 / .07);
  --schatten-hoch: 0 2px 4px rgb(31 47 61 / .08), 0 18px 40px rgb(31 47 61 / .14);
  --display: "Montserrat", "Segoe UI", system-ui, sans-serif; --text: "Source Sans 3", "Segoe UI", system-ui, sans-serif; --mono: "JetBrains Mono", ui-monospace, monospace;
}
@media (prefers-color-scheme: dark) { :root:not([data-farbe="hell"]) {
  --grund: #0f1820; --flaeche: #16222d; --flaeche-2: #1b2935; --tinte: #e6edf2; --marine: #e6edf2; --leise: #9aabb9; --linie: #2a3a48;
  --schatten: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px rgb(0 0 0 / .25); --schatten-hoch: 0 2px 4px rgb(0 0 0 / .35), 0 18px 40px rgb(0 0 0 / .4); color-scheme: dark; } }
:root[data-farbe="dunkel"] {
  --grund: #0f1820; --flaeche: #16222d; --flaeche-2: #1b2935; --tinte: #e6edf2; --marine: #e6edf2; --leise: #9aabb9; --linie: #2a3a48;
  --schatten: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px rgb(0 0 0 / .25); --schatten-hoch: 0 2px 4px rgb(0 0 0 / .35), 0 18px 40px rgb(0 0 0 / .4); color-scheme: dark; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: var(--grund); color: var(--tinte); font: 16px/1.5 var(--text); display: flex; flex-direction: column; }
.nur-dunkel { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-farbe="hell"]) .nur-hell { display: none; } :root:not([data-farbe="hell"]) .nur-dunkel { display: block; } }
:root[data-farbe="dunkel"] .nur-hell { display: none; }
:root[data-farbe="dunkel"] .nur-dunkel { display: block; }

/* Kopf: Logo, darunter PLATTFORM OS */
.einstieg { flex: 1; width: min(1040px, 100%); margin: 0 auto; padding: clamp(36px, 8vh, 88px) max(20px, env(safe-area-inset-right)) 40px max(20px, env(safe-area-inset-left)); }
.marke { display: grid; justify-items: center; gap: 14px; margin-bottom: clamp(32px, 6vh, 56px); text-align: center; }
.marke .logo { width: 132px; height: 132px; }
.marke h1 { margin: 0; font: 700 clamp(26px, 4vw, 38px)/1 var(--display); letter-spacing: .22em; color: var(--marine); padding-left: .22em; }
.marke h1 span { color: var(--e1); }
.boegen { display: flex; gap: 6px; margin-top: 2px; }
.boegen i { width: 28px; height: 4px; border-radius: 99px; }
.boegen i:nth-child(1) { background: var(--e1); } .boegen i:nth-child(2) { background: var(--e2); } .boegen i:nth-child(3) { background: var(--e3); } .boegen i:nth-child(4) { background: var(--e4); }

/* Kacheln */
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.kachel { --farbe: var(--e1); position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; padding: 28px 28px 24px; min-height: 260px;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 18px; box-shadow: var(--schatten); color: inherit; text-decoration: none; overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.kachel::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--farbe); }
.kachel::after { content: ""; position: absolute; width: 220px; height: 220px; right: -90px; bottom: -110px; border-radius: 50%; border: 22px solid var(--farbe); opacity: .07; transition: opacity .18s; }
.kachel:hover { transform: translateY(-3px); box-shadow: var(--schatten-hoch); border-color: color-mix(in srgb, var(--farbe) 45%, var(--linie)); }
.kachel:hover::after { opacity: .13; }
.kachel:focus-visible { outline: 3px solid var(--farbe); outline-offset: 3px; }
.kachel.daten { --farbe: var(--e2); }
.symbol { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--farbe) 12%, transparent); color: var(--farbe); }
.symbol svg { width: 28px; height: 28px; }
.kachel h2 { margin: 6px 0 0; font: 700 21px/1.2 var(--display); letter-spacing: -.01em; }
.kachel h2 small { font: 600 11px/1 var(--mono); letter-spacing: 0; color: var(--leise); border: 1px solid var(--linie); border-radius: 99px; padding: 2px 7px; margin-left: 6px; vertical-align: 3px; }
.kachel .unter { display: block; font: 500 11px/1.4 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--leise); margin-top: 4px; }
.kachel p { margin: 0; color: var(--leise); font-size: 15px; position: relative; }
.kachel .los { display: inline-flex; align-items: center; gap: 8px; font: 700 14px var(--display); color: var(--farbe); position: relative; }
.kachel .los svg { width: 18px; height: 18px; transition: transform .18s; }
.kachel:hover .los svg { transform: translateX(4px); }

/* Fuß */
.fuss { width: min(1040px, 100%); margin: 0 auto; padding: 0 max(20px, env(safe-area-inset-right)) 28px max(20px, env(safe-area-inset-left));
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: 12.5px; color: var(--leise); }
.fuss .rechts { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.knopf-klein { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border: 1px solid var(--linie); border-radius: 9px; background: var(--flaeche);
  color: var(--leise); font: 600 13px var(--display); text-decoration: none; cursor: pointer; }
.knopf-klein:hover { color: var(--tinte); border-color: var(--leise); }
.knopf-klein svg { width: 17px; height: 17px; }
.farbe-knopf { width: 34px; padding: 0; justify-content: center; }

/* Anmeldung */
.tor { width: min(400px, 100%); margin: 0 auto; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 18px; padding: 28px 30px 30px; box-shadow: var(--schatten); }
.tor p { margin: 0 0 18px; color: var(--leise); font-size: 14.5px; text-align: center; }
.tor form { display: grid; gap: 10px; }
.tor label { font: 600 11px var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--leise); }
.tor input { height: 48px; border-radius: 10px; border: 1px solid var(--linie); background: var(--grund); color: inherit; padding: 0 14px; font: inherit; }
.tor input:focus { outline: none; border-color: var(--e1); box-shadow: 0 0 0 3px rgb(0 157 200 / .25); }
.tor button { height: 48px; border: 0; border-radius: 10px; background: var(--e4); color: #fff; font: 700 15px var(--display); cursor: pointer; margin-top: 6px; }
.tor button:hover { background: #b80b3c; }
.tor button:focus-visible { outline: 3px solid var(--e1); outline-offset: 2px; }
#m { color: var(--e4); font-weight: 600; font-size: 14px; }