/* Einstiegsseite der Myra-AI-Workspace-Online-Hilfe.
   Farben, Schriften und Abstände stammen aus dem Myra Design System 1.2 —
   dieselben Werte wie in docs/stylesheets/myra.css der drei Handbücher,
   damit der Einstieg und die Handbücher wie eine Anwendung wirken.       */

@font-face{font-family:"Montserrat";font-style:normal;font-weight:600;font-display:swap;
  src:url("fonts/Montserrat-SemiBold.woff2") format("woff2");}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:800;font-display:swap;
  src:url("fonts/Montserrat-ExtraBold.woff2") format("woff2");}
@font-face{font-family:"Rubik";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/Rubik-Regular.woff2") format("woff2");}
@font-face{font-family:"Rubik";font-style:normal;font-weight:500;font-display:swap;
  src:url("fonts/Rubik-Medium.woff2") format("woff2");}
@font-face{font-family:"Rubik";font-style:normal;font-weight:600;font-display:swap;
  src:url("fonts/Rubik-SemiBold.woff2") format("woff2");}

:root{
  --brand-cyan:#2AD9FF; --brand-cyan-hi:#5BE3FF; --brand-darkblue:#002B4A;
  --font-head:"Montserrat","Segoe UI",system-ui,sans-serif;
  --font-body:"Rubik","Segoe UI",system-ui,sans-serif;
  --font-mono:ui-monospace,"DejaVu Sans Mono",monospace;
  --space-xs:8px; --space-s:12px; --space-m:16px; --space-l:24px;
  --space-xl:32px; --space-2xl:48px; --radius:10px;
}

/* Hellmodus — die Vorgabe, solange niemand umschaltet. */
:root{
  color-scheme:light;
  --ds-bg:#F2F4F6; --ds-bg-2:#FFFFFF; --ds-surface:#FFFFFF; --ds-surface-2:#F2F4F6;
  --ds-line:#CCD5DB; --ds-line-soft:#E1E6EA;
  --ds-ink:#002B4A; --ds-ph:#4D6B80;
  --ds-accent:#005E8A; --ds-accent-bg:#E0F4FF;
  --ds-shadow:0 1px 2px rgba(0,43,74,.08);
  --ds-shadow-hover:0 6px 18px rgba(0,43,74,.14);
  --logo-hell:none; --logo-dunkel:block;
}
/* Dunkelmodus — die Systemeinstellung, solange niemand umschaltet. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --ds-bg:#0A1A29; --ds-bg-2:#0F2334; --ds-surface:#102A40; --ds-surface-2:#163049;
    --ds-line:rgba(62,221,255,.20); --ds-line-soft:rgba(255,255,255,.10);
    --ds-ink:#FFFFFF; --ds-ph:#C2D2DF;
    --ds-accent:#5BE3FF; --ds-accent-bg:rgba(62,221,255,.12);
    --ds-shadow:0 1px 0 rgba(0,0,0,.30);
    --ds-shadow-hover:0 8px 24px rgba(0,0,0,.45);
    --logo-hell:block; --logo-dunkel:none;
  }
}
/* Die Wahl des Lesenden schlägt beide Vorgaben. */
:root[data-theme="dark"]{
  color-scheme:dark;
  --ds-bg:#0A1A29; --ds-bg-2:#0F2334; --ds-surface:#102A40; --ds-surface-2:#163049;
  --ds-line:rgba(62,221,255,.20); --ds-line-soft:rgba(255,255,255,.10);
  --ds-ink:#FFFFFF; --ds-ph:#C2D2DF;
  --ds-accent:#5BE3FF; --ds-accent-bg:rgba(62,221,255,.12);
  --ds-shadow:0 1px 0 rgba(0,0,0,.30);
  --ds-shadow-hover:0 8px 24px rgba(0,0,0,.45);
  --logo-hell:block; --logo-dunkel:none;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--ds-bg); color:var(--ds-ink);
  /* Die Fusszeile sitzt auch auf kurzen Seiten am unteren Rand. */
  min-height:100vh; display:flex; flex-direction:column;
  font-family:var(--font-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--ds-accent);}

/* ---------- Kopfleiste ---------- */
.kopf{
  background:var(--brand-darkblue); color:#FFFFFF;
  box-shadow:0 1px 0 rgba(0,0,0,.30);
  position:sticky; top:0; z-index:10;
}
.kopf__innen{
  max-width:1080px; margin:0 auto; padding:0 var(--space-l);
  height:56px; display:flex; align-items:center; gap:var(--space-m);
}
.kopf__marke{display:flex;align-items:center;gap:var(--space-s);text-decoration:none;color:inherit;}
.kopf__marke svg{height:24px;width:auto;display:block;}
.kopf__titel{font-family:var(--font-head);font-weight:800;font-size:.82rem;letter-spacing:.01em;}
.kopf__werkzeuge{margin-left:auto;display:flex;align-items:center;gap:var(--space-xs);}
.kopf__knopf{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:2rem;height:2rem;padding:0 .5rem;border:0;border-radius:6px;
  background:transparent;color:#FFFFFF;cursor:pointer;text-decoration:none;
  font-family:var(--font-mono);font-size:.7rem;font-weight:600;letter-spacing:.04em;
}
.kopf__knopf:hover{background:rgba(255,255,255,.12);}
.kopf__knopf svg{width:18px;height:18px;fill:currentColor;}

/* ---------- Titelbereich ---------- */
.buehne{
  background:linear-gradient(180deg,var(--ds-bg-2) 0%,var(--ds-bg) 100%);
  border-bottom:1px solid var(--ds-line-soft);
}
.buehne__innen{max-width:1080px;margin:0 auto;padding:var(--space-2xl) var(--space-l) var(--space-xl);}
.buehne h1{
  font-family:var(--font-head);font-weight:800;font-size:2rem;line-height:1.2;
  margin:0 0 var(--space-s);letter-spacing:-.01em;
}
.buehne p{margin:0;max-width:62ch;color:var(--ds-ink);font-size:1.05rem;}
.marke-pruef{
  display:inline-block;margin-bottom:var(--space-m);padding:2px 10px;
  border:1px solid var(--ds-accent);border-radius:999px;
  background:var(--ds-accent-bg);color:var(--ds-accent);
  font-family:var(--font-mono);font-size:.7rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;
}

/* ---------- Karten ---------- */
.inhalt{max-width:1080px;margin:0 auto;padding:var(--space-2xl) var(--space-l) var(--space-xl);}
.karten{display:grid;gap:var(--space-l);grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
.karte{
  display:flex;flex-direction:column;
  background:var(--ds-surface);border:1px solid var(--ds-line);border-radius:var(--radius);
  box-shadow:var(--ds-shadow);padding:var(--space-l);
  transition:box-shadow .15s ease,border-color .15s ease,transform .15s ease;
}
.karte:hover{box-shadow:var(--ds-shadow-hover);border-color:var(--ds-accent);transform:translateY(-2px);}
.karte__symbol{
  width:40px;height:40px;margin-bottom:var(--space-m);
  display:flex;align-items:center;justify-content:center;
  border-radius:8px;background:var(--ds-accent-bg);color:var(--ds-accent);
}
.karte__symbol svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;}
.karte h2{font-family:var(--font-head);font-weight:800;font-size:1.1rem;margin:0 0 var(--space-xs);}
.karte__fuer{
  font-family:var(--font-mono);font-size:.7rem;font-weight:600;letter-spacing:.04em;
  color:var(--ds-ph);text-transform:uppercase;margin:0 0 var(--space-s);
}
.karte p.karte__text{margin:0 0 var(--space-l);color:var(--ds-ink);font-size:.94rem;}
.karte__wege{margin-top:auto;display:flex;flex-wrap:wrap;gap:var(--space-xs);}
.knopf{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:6px;text-decoration:none;
  font-family:var(--font-head);font-weight:600;font-size:.85rem;
  border:1px solid var(--ds-accent);
}
.knopf--voll{background:var(--ds-accent);color:var(--ds-bg-2);}
.knopf--voll:hover{filter:brightness(1.08);}
.knopf--leer{background:transparent;color:var(--ds-accent);}
.knopf--leer:hover{background:var(--ds-accent-bg);}

/* ---------- Hinweiskasten ---------- */
.hinweis{
  margin-top:var(--space-2xl);padding:var(--space-m) var(--space-l);
  border-left:4px solid var(--ds-accent);border-radius:0 var(--radius) var(--radius) 0;
  background:var(--ds-surface-2);
}
.hinweis h3{font-family:var(--font-head);font-weight:600;font-size:.95rem;margin:0 0 var(--space-xs);}
.hinweis p{margin:0;font-size:.9rem;color:var(--ds-ink);}
.hinweis ul{margin:var(--space-xs) 0 0;padding-left:1.2em;font-size:.9rem;}

/* ---------- Fußzeile ---------- */
.fuss{margin-top:auto;border-top:1px solid var(--ds-line-soft);background:var(--ds-bg-2);}
.fuss__innen{
  max-width:1080px;margin:0 auto;padding:var(--space-l);
  display:flex;flex-wrap:wrap;gap:var(--space-s);align-items:center;
  font-size:.82rem;color:var(--ds-ph);
}
.fuss__innen .rechts{margin-left:auto;}

.logo-hell{display:var(--logo-hell);}
.logo-dunkel{display:var(--logo-dunkel);}

@media (max-width:600px){
  .buehne h1{font-size:1.5rem;}
  .kopf__titel{font-size:.72rem;}
}