/* Hausschrift Inter — lokal selbst gehostet (Variable Font, deckt 100–900 ab).
     Keine externe Einbindung mehr → keine Datenübertragung an Google/Dritte. */
  @font-face{
    font-family:'Inter';
    src:url('Inter/Inter-Variable.ttf') format('truetype');
    font-weight:100 900;
    font-style:normal;
    font-display:swap;
  }
  /* =========================================================
     Asklepios Brand-Tokens 2026 · Guideline 26.001
     Primärfarbe: Pantone 322 C · #007377 (Petrol/Türkisblau)
     Quelle: guideline_26.001.md · Anhang CSS-Tokens
     ========================================================= */
  :root{
    /* Primärfarbe — Tonleiter 50–900 */
    --ask-primary-50:#e0eff0;  --ask-primary-100:#b8dcdd; --ask-primary-200:#8bc1c4;
    --ask-primary-300:#5ba6aa; --ask-primary-400:#2c8a8e; --ask-primary-500:#007377;
    --ask-primary-600:#005d61; --ask-primary-700:#00474a; --ask-primary-800:#003234; --ask-primary-900:#001d1e;

    /* Störerfarbe (Akzent · Gold) */
    --ask-accent:#ffb81c; --ask-accent-50:#fff3d4; --ask-accent-700:#876300;

    /* Sekundärfarbe (Marke · Magenta · Pantone 247 C) */
    --ask-secondary-magenta:#bb16a3;

    /* Status (UI-Semantik) */
    --ask-success:#56b093; --ask-danger:#fa5007; --ask-warning:#ffb81c; --ask-magenta-500:#ff417d;

    /* Flächen & Text */
    --ask-bg:#f1f4f3;
    --ask-surface:#ffffff;
    --ask-bg-tinted:#eef4f3;
    --ask-fg:#0d2b29;          /* dunkle Petrol-Tinte */
    --ask-fg-muted:#5f7a73;
    --ask-border:#d8e2e2;
    --ask-border-strong:#b9cccb;

    /* Radien */
    --ask-radius:8px; --ask-radius-lg:12px; --ask-radius-xl:16px;

    /* Schatten */
    --ask-shadow-sm:0 1px 2px rgba(15,50,51,.06);
    --ask-shadow:0 2px 8px rgba(15,50,51,.08);
    --ask-shadow-lg:0 8px 24px rgba(15,50,51,.12);
    --ask-shadow-xl:0 24px 60px rgba(15,50,51,.16);
    --ask-shadow-focus:0 0 0 3px color-mix(in srgb, var(--ask-primary-500) 25%, transparent);

    /* Schrift — Hausschrift Inter */
    --ask-font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{
    font-family:var(--ask-font);
    color:var(--ask-fg);
    min-height:100vh;
    overflow:hidden;
    position:relative;
    /* AUTH-Hintergrund: zwei dezente Petrol-Spots (oben links + unten rechts),
       die den zentralen Globus diagonal rahmen — bewusst als weicher Punkt, nicht als Leiste. */
    background:
      radial-gradient(circle at 13% 11%, color-mix(in srgb, var(--ask-primary-500) 9%, transparent) 0%, transparent 24%),
      radial-gradient(circle at 87% 89%, color-mix(in srgb, var(--ask-primary-500) 7%, transparent) 0%, transparent 24%),
      var(--ask-bg);
  }

  /* ---------- Typografischer Globus aus den Asklepios-Gesellschaften ---------- */
  #globe{ position:fixed; top:0; left:0; right:0; bottom:clamp(64px,10vh,120px); z-index:0; display:grid; place-items:center; pointer-events:none; }
  #globe-inner{ position:relative; width:1px; height:1px; }
  #globe-inner span{
    position:absolute; left:0; top:0;
    font-family:var(--ask-font); font-weight:700;
    white-space:nowrap; transform-origin:center;
    will-change:transform,opacity; line-height:1;
  }

  /* ---------- Logo oben links: offizielle Asklepios-Wort-Bildmarke ---------- */
  .brand{ position:fixed; top:clamp(18px,3vw,34px); left:clamp(18px,3vw,40px); z-index:5; display:flex; align-items:center; text-decoration:none; }
  .brand img{ height:clamp(30px,3.4vw,44px); width:auto; display:block; }

  /* ---------- Stage / Login-Card ---------- */
  .stage{ position:relative; z-index:4; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:6rem 1.25rem 5rem; }
  .card{
    width:100%; max-width:430px;
    background:color-mix(in srgb, var(--ask-surface) 80%, transparent);
    border:1px solid var(--ask-border);
    border-radius:var(--ask-radius-xl);
    padding:clamp(2rem,4vw,2.9rem);
    box-shadow:var(--ask-shadow-xl);
    backdrop-filter:blur(20px) saturate(140%); -webkit-backdrop-filter:blur(20px) saturate(140%);
    animation:rise .9s cubic-bezier(.16,1,.3,1) both;
  }
  @keyframes rise{ from{opacity:0; transform:translateY(26px) scale(.98)} to{opacity:1; transform:none} }

  .logo-type{ font-weight:800; font-size:clamp(2.1rem,5.5vw,2.9rem); line-height:1; letter-spacing:-.03em; margin-bottom:.4rem; color:var(--ask-primary-700); text-align:center; }
  .logo-type .dot{ color:var(--ask-secondary-magenta); }
  .logo-type .team{ font-weight:300; color:var(--ask-fg-muted); }
  .tag{ color:var(--ask-fg-muted); font-size:.92rem; margin-bottom:2rem; text-align:center; }

  /* Eingabefelder (F-01/F-05/F-07) */
  .field{ margin-bottom:1.05rem; }
  .field label{ display:block; font-size:.75rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ask-fg-muted); margin-bottom:.45rem; }
  .field input{ width:100%; height:48px; padding:0 1rem; border-radius:var(--ask-radius); background:var(--ask-surface); border:1px solid var(--ask-border); color:var(--ask-fg); font-size:1rem; font-family:inherit; transition:border-color .2s, box-shadow .2s, background .2s; }
  .field input::placeholder{ color:color-mix(in srgb, var(--ask-fg-muted) 72%, transparent); }
  .field input:focus{ outline:none; border-color:var(--ask-primary-500); background:var(--ask-primary-50); box-shadow:var(--ask-shadow-focus); }

  .row{ display:flex; align-items:center; justify-content:space-between; margin:.2rem 0 1.5rem; font-size:.85rem; }
  .row label{ display:flex; align-items:center; gap:.5rem; color:var(--ask-fg-muted); cursor:pointer; }
  .row input[type=checkbox]{ accent-color:var(--ask-primary-500); width:16px; height:16px; }
  .row a{ color:var(--ask-primary-600); text-decoration:none; font-weight:500; }
  .row a:hover{ text-decoration:underline; }

  /* Primary-Button (B-01 · solid Petrol-500, .lg 48px für Auth-Pages) */
  .btn{ width:100%; height:48px; border:none; border-radius:var(--ask-radius); background:var(--ask-primary-500); color:#fff; font-family:var(--ask-font); font-weight:600; font-size:1rem; cursor:pointer; box-shadow:var(--ask-shadow); transition:background .15s ease, opacity .34s ease, transform .5s cubic-bezier(.22,1,.36,1), filter .34s ease; }
  .btn:hover{ background:var(--ask-primary-600); }
  .btn:active{ background:var(--ask-primary-700); }
  .btn:focus-visible{ outline:none; box-shadow:var(--ask-shadow-focus); }

  /* Login deaktiviert — sanfter Crossfade zwischen Button und Hinweis (gleiche Größe), 10 s lang.
     Beide liegen im selben Grid-Slot übereinander und blenden über die Opacity ineinander. */
  .login-slot{ display:grid; }
  .login-slot > *{ grid-area:1/1; }
  .login-msg{ display:flex; align-items:center; justify-content:center; width:100%; height:48px; border-radius:var(--ask-radius); background:color-mix(in srgb, var(--ask-danger) 9%, transparent); border:1px solid color-mix(in srgb, var(--ask-danger) 35%, transparent); color:var(--ask-danger); font-size:.9rem; font-weight:600; text-align:center; opacity:0; transform:translateY(6px) scale(.985); filter:blur(2px); pointer-events:none; transition:opacity .4s ease .08s, transform .55s cubic-bezier(.22,1,.36,1) .08s, filter .4s ease .08s; }
  .login-slot.denied .btn{ opacity:0; transform:translateY(-6px) scale(.985); filter:blur(2px); pointer-events:none; }
  .login-slot.denied .login-msg{ opacity:1; transform:none; filter:blur(0); }
  @media (prefers-reduced-motion:reduce){
    .login-msg{ transform:none; filter:none; transition:opacity .25s ease; }
    .login-slot.denied .btn{ transform:none; filter:none; }
  }

  .hint{ margin-top:1.2rem; text-align:center; font-size:.82rem; color:var(--ask-fg-muted); }
  .hint a{ color:var(--ask-primary-600); text-decoration:none; font-weight:500; }
  .hint a:hover{ text-decoration:underline; }

  /* ---------- Footer: Copyright mittig unten · Rechtliches rechts unten ---------- */
  .copyright{ position:fixed; bottom:clamp(16px,2.2vw,26px); left:50%; transform:translateX(-50%); z-index:5; font-size:.82rem; font-weight:500; color:var(--ask-fg-muted); white-space:nowrap; text-shadow:0 0 9px var(--ask-bg),0 0 18px var(--ask-bg); }
  .legal{ position:fixed; bottom:clamp(16px,2.2vw,26px); right:clamp(18px,3vw,40px); z-index:5; display:flex; align-items:center; gap:1.2rem; font-size:.82rem; }
  .legal a{ color:var(--ask-fg-muted); text-decoration:none; cursor:pointer; font-weight:500; transition:color .2s; text-shadow:0 0 9px var(--ask-bg),0 0 18px var(--ask-bg); }
  .legal a:hover{ color:var(--ask-primary-600); }
  /* Handy: Rechtliches mittig über dem Copyright stapeln (kein Überlapp) */
  @media (max-width:600px){
    .stage{ padding:5.5rem 1rem 6rem; }
    .legal{ left:50%; right:auto; transform:translateX(-50%); bottom:calc(clamp(16px,2.2vw,26px) + 1.7rem); }
  }
  /* Handy quer / niedrige Screens: Karte kompakter, Globus-Reservestreifen kleiner */
  @media (max-height:560px){
    .stage{ padding:3.75rem 1rem 4rem; }
    .card{ padding:1.5rem 1.5rem; }
    #globe{ bottom:clamp(44px,12vh,86px); }
  }

  /* ---------- Modal ---------- */
  .modal{ position:fixed; inset:0; z-index:50; display:none; align-items:center; justify-content:center; padding:1.25rem; background:color-mix(in srgb, var(--ask-primary-900) 45%, transparent); backdrop-filter:blur(8px); }
  .modal.open{ display:flex; animation:fade .25s ease both; }
  @keyframes fade{ from{opacity:0} to{opacity:1} }
  .modal-box{ width:100%; max-width:760px; max-height:84vh; position:relative; overflow:hidden; background:var(--ask-surface); border:1px solid var(--ask-border); border-radius:var(--ask-radius-xl); box-shadow:var(--ask-shadow-xl); animation:rise .4s cubic-bezier(.16,1,.3,1) both; }
  /* Innerer Scroll-Bereich mit schlanker, abgerundeter Petrol-Scrollbar */
  .modal-scroll{ max-height:84vh; overflow-y:auto; padding:clamp(1.6rem,4vw,2.8rem); scrollbar-width:thin; scrollbar-color:var(--ask-primary-200) transparent; overscroll-behavior:contain; }
  .modal-scroll::-webkit-scrollbar{ width:11px; }
  .modal-scroll::-webkit-scrollbar-track{ background:transparent; margin:14px 0; }
  .modal-scroll::-webkit-scrollbar-thumb{ background:var(--ask-primary-200); border-radius:999px; border:3px solid var(--ask-surface); background-clip:padding-box; }
  .modal-scroll::-webkit-scrollbar-thumb:hover{ background:var(--ask-primary-300); border:3px solid var(--ask-surface); background-clip:padding-box; }
  .modal-box h2{ font-size:1.5rem; font-weight:600; margin-bottom:.3rem; color:var(--ask-primary-700); }
  .modal-box h3{ font-size:1.125rem; font-weight:600; margin:1.6rem 0 .5rem; color:var(--ask-primary-700); }
  .modal-box p, .modal-box li{ color:var(--ask-fg); font-size:.94rem; line-height:1.65; margin-bottom:.7rem; }
  .modal-box ul{ padding-left:1.2rem; }
  .modal-box a{ color:var(--ask-primary-600); text-decoration:none; font-weight:500; }
  .modal-box a:hover{ text-decoration:underline; }
  .modal-box .ph{ color:var(--ask-accent-700); background:var(--ask-accent-50); padding:0 .25rem; border-radius:4px; }
  .modal-close{ position:absolute; top:.9rem; right:1.25rem; z-index:2; width:32px; height:32px; border-radius:50%; border:1px solid var(--ask-border); background:var(--ask-surface); color:var(--ask-fg-muted); font-size:1rem; line-height:1; display:grid; place-items:center; cursor:pointer; box-shadow:var(--ask-shadow-sm); transition:background .2s, border-color .2s, color .2s; }
  .modal-close:hover{ background:var(--ask-primary-50); border-color:var(--ask-primary-200); color:var(--ask-primary-700); }
  .scroll-note{ font-size:.78rem; color:var(--ask-fg-muted); border-top:1px solid var(--ask-border); margin-top:2rem; padding-top:1rem; }