@import url('/fonts/ci.css');
@import url('/fonts/inter.css');
:root{color-scheme:dark;--font-inter:Inter;--font-montserrat:Montserrat;--text-100:rgba(255,255,255,.96);--text-200:rgba(255,255,255,.80);--text-300:rgba(255,255,255,.60);--text-400:rgba(255,255,255,.44);--border:rgba(255,255,255,.1);--surface-base:#0c141c}
*{box-sizing:border-box}body{margin:0;background:var(--surface-base);color:var(--text-100);font:14px/1.5 var(--font-inter),system-ui,sans-serif}h1,h2,p{margin:0}button,a,input{font:inherit}button{cursor:pointer}a{text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid #b3ccdf;outline-offset:5px}[hidden]{display:none!important}
[data-theme=light]{color-scheme:light;--text-100:#0a0f14;--text-200:rgba(10,15,20,.8);--text-300:rgba(10,15,20,.6);--text-400:rgba(10,15,20,.44);--border:rgba(15,23,42,.1);--surface-base:#f4f7fa}

/* Copied from Cockpit login CSS modules; regenerate with scripts/sync-cockpit-login.mjs. */
/* Anmeldung — Schwesterseite zur Akademie, gebaut nach ci-design-system.
   Gleiche Architektur, gleiche Schrift, gleicher Aufbau: Logo + Wortmarke
   links, ein Knopf rechts. Der Unterschied ist die Wortmarke selbst. */

.shell {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: clamp(32px, 6vw, 56px);
  padding: clamp(28px, 5vw, 64px);
}

@media (min-width: 980px) {
  .shell {
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(48px, 7vw, 120px);
    padding-inline: clamp(48px, 8vw, 140px);
  }
}

/* ── Hintergrund: CI-Verlauf + Aurora ───────────────────────────────────── */

.backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 70% at 50% 40%, rgba(44, 110, 169, 0.14) 0%, rgba(31, 52, 71, 0.07) 40%, transparent 70%),
    linear-gradient(180deg, #000000 0%, #0c141c 45%, #1f3447 100%);
}

[data-theme="light"] .backdrop {
  background:
    radial-gradient(ellipse 80% 70% at 50% 40%, rgba(44, 110, 169, 0.09) 0%, transparent 68%),
    linear-gradient(180deg, #ffffff 0%, #f4f7fa 55%, #e6edf4 100%);
}

.aurora {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.aurora::before,
.aurora::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  will-change: transform;
}

.aurora::before {
  width: 58vw;
  height: 58vw;
  min-width: 400px;
  min-height: 400px;
  top: -18vw;
  left: -12vw;
  background: radial-gradient(circle at 50% 50%, rgba(44, 110, 169, 0.5) 0%, transparent 68%);
  animation: auroraDrift1 28s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
}

.aurora::after {
  width: 46vw;
  height: 46vw;
  min-width: 340px;
  min-height: 340px;
  right: -14vw;
  bottom: -18vw;
  background: radial-gradient(circle at 50% 50%, rgba(77, 168, 218, 0.26) 0%, transparent 66%);
  animation: auroraDrift2 38s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
}

[data-theme="light"] .aurora::before {
  background: radial-gradient(circle at 50% 50%, rgba(44, 110, 169, 0.16) 0%, transparent 68%);
}

[data-theme="light"] .aurora::after {
  background: radial-gradient(circle at 50% 50%, rgba(77, 168, 218, 0.12) 0%, transparent 66%);
}

@keyframes auroraDrift1 {
  0%   { transform: translate(-5%, -3%) scale(1);    opacity: 0.5; }
  50%  { transform: translate(5%, 3%)   scale(1.15); opacity: 0.7; }
  100% { transform: translate(-5%, -3%) scale(1);    opacity: 0.5; }
}

@keyframes auroraDrift2 {
  0%   { transform: translate(4%, 2%)   scale(1.1); opacity: 0.4; }
  50%  { transform: translate(-6%, -4%) scale(0.9); opacity: 0.6; }
  100% { transform: translate(4%, 2%)   scale(1.1); opacity: 0.4; }
}

/* ── Markenraum ─────────────────────────────────────────────────────────── */

.brand {
  position: relative;
  z-index: 2;
  max-width: 38ch;
}

.logo {
  height: clamp(30px, 4vw, 40px);
  width: auto;
  display: block;
}

[data-theme="light"] .logoWeiss { display: none; }
.logoDunkel { display: none; }
[data-theme="light"] .logoDunkel { display: block; }

.headline {
  position: relative;
  margin-top: clamp(24px, 3.4vw, 36px);
  font-family: var(--font-montserrat), system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(3rem, 7vw, 5.4rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--text-100);
  animation: markSettle 1.1s cubic-bezier(0.25, 0.1, 0.25, 1) 0.15s both;
}

/* Lichtstreif läuft genau einmal über die Buchstaben. */
.headline::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 38%,
    rgba(179, 204, 223, 0.85) 50%,
    transparent 62%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 260% 100%;
  animation: markShine 2.6s cubic-bezier(0.25, 0.1, 0.25, 1) 0.9s both;
}

/* Das TÜV-Siegel unter der Wortmarke — Abstand im selben Maß wie zwischen Logo und
   Headline, damit die drei Zeilen (Logo, „Cockpit", Siegel) als ein Block lesen. */
.siegel {
  margin-top: clamp(22px, 3vw, 32px);
}

@keyframes markSettle {
  from { opacity: 0; letter-spacing: 0.06em; }
  to   { opacity: 1; letter-spacing: -0.03em; }
}

@keyframes markShine {
  from { background-position: 210% 0; }
  to   { background-position: -60% 0; }
}

/* ── Anmelde-Karte ──────────────────────────────────────────────────────── */

.panel {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 420px;
  padding: clamp(26px, 3vw, 34px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(19, 31, 43, 0.72);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 40px 90px -30px rgba(0, 0, 0, 0.8);
}

[data-theme="light"] .panel {
  border-color: rgba(15, 23, 42, 0.1);
  background: rgba(255, 255, 255, 0.86);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 32px 70px -30px rgba(31, 52, 71, 0.35);
}

@media (min-width: 980px) {
  .panel { justify-self: end; }
}

.panel::before {
  content: "";
  position: absolute;
  inset-inline: 16%;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(179, 204, 223, 0.6), transparent);
}

/* ── Zustände ───────────────────────────────────────────────────────────── */

.error {
  margin-bottom: 18px;
  padding: 13px 16px;
  border-radius: 12px;
  border: 1px solid rgba(239, 68, 68, 0.5);
  background: rgba(239, 68, 68, 0.14);
  color: var(--text-100);
  /* Fehlermeldung ist Lesetext — Inter wie überall; Montserrat nur für Display. */
  font-family: var(--font-inter), system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.55;
}

.rise { animation: rise 0.7s cubic-bezier(0.25, 0.1, 0.25, 1) both; }
.d1 { animation-delay: 0.05s; }
.d2 { animation-delay: 0.16s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rise { animation: none; }
  .headline { animation: none; }
  .headline::after { animation: none; content: none; }
  .aurora::before,
  .aurora::after { animation: none; }
}

/* Google-Knopf — identisch zur Akademie, damit beide Anmeldungen
   als ein System auftreten. */

.google {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 22px;
  border-radius: 30px;
  border: 1px solid transparent;
  background: #ffffff;
  color: #16202b;
  font-family: var(--font-montserrat), system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.28s ease;
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.75);
}

.google:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow:
    0 18px 38px -14px rgba(0, 0, 0, 0.8),
    0 0 0 4px rgba(77, 168, 218, 0.22);
}

.google:active:not(:disabled) { transform: translateY(0); }
.google:disabled { opacity: 0.6; cursor: not-allowed; }
.google svg { flex: none; }

/* Hell auf Hell wäre unsichtbar — im Light-Theme dreht der Knopf auf Dunkel. */
[data-theme="light"] .google {
  background: linear-gradient(90deg, #2c6ea9 40%, #1f3447 80%);
  color: #ffffff;
  box-shadow: 0 14px 30px -14px rgba(31, 52, 71, 0.6);
}

[data-theme="light"] .google:hover:not(:disabled) {
  box-shadow:
    0 20px 38px -16px rgba(31, 52, 71, 0.65),
    0 0 0 4px rgba(44, 110, 169, 0.2);
}

.error {
  margin-top: 16px;
  padding: 13px 16px;
  border-radius: 12px;
  border: 1px solid rgba(239, 68, 68, 0.5);
  background: rgba(239, 68, 68, 0.14);
  color: var(--text-100);
  /* Fehlermeldung ist Lesetext — Inter wie überall; Montserrat nur für Display. */
  font-family: var(--font-inter), system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.55;
}

.signOut {
  margin-top: 16px;
  width: 100%;
  text-align: center;
  font-family: var(--font-inter), system-ui, sans-serif;
  font-size: 13px;
  color: var(--text-200);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  transition: color 0.2s ease;
}

.signOut:hover { color: var(--text-100); }

.seal-trigger{display:flex;align-items:center;gap:12px;border:0;border-radius:10px;padding:0;background:none;text-align:left;color:var(--text-100)}.seal-trigger img{flex:none}.seal-trigger strong{display:block;font-size:13px;font-weight:600;line-height:1.25}.seal-trigger small{display:block;margin-top:2px;font-size:11.5px;line-height:1.25;color:var(--text-300)}
#certificate{position:fixed;inset:0 0 0 auto;margin:0;padding:0;width:400px;max-width:100%;height:100dvh;max-height:100dvh;border:0;border-left:1px solid var(--border);background:var(--surface-base);color:var(--text-100);box-shadow:0 24px 70px #0005}#certificate::backdrop{background:#0006}.certificate-sheet{padding:24px;min-height:100%;overflow:auto}.certificate-sheet header{display:flex;align-items:center;justify-content:space-between;gap:12px}.certificate-sheet h2{font:600 15px var(--font-montserrat),sans-serif}.certificate-sheet button{border:1px solid var(--border);border-radius:30px;padding:4px 12px;color:var(--text-300);background:none;font-size:12px}.certificate-mark{margin-top:16px;border-radius:10px;background:white;padding:12px}.certificate-mark img{display:block;width:100%;height:auto;max-width:260px;margin:auto}.certificate-sheet p{margin-top:16px;font-size:13px;line-height:1.625;color:var(--text-200)}.certificate-sheet dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin-top:16px;font-size:12.5px;line-height:1.375}.certificate-sheet dt{color:var(--text-300)}.certificate-sheet dd{margin:0;font-weight:500}.certificate-sheet .customer{margin-top:20px;padding-top:16px;border-top:1px solid var(--border);font-size:12px;color:var(--text-300)}.certificate-sheet .scope-note{margin-top:8px;font-size:11.5px;color:var(--text-400)}body.certificate-open{overflow:hidden}@media(max-width:767px){#certificate{inset:auto 0 0;width:100%;height:auto;max-height:88dvh;border-left:0;border-top:1px solid var(--border);border-radius:18px 18px 0 0}.certificate-sheet{padding:12px 20px calc(env(safe-area-inset-bottom,0px) + 20px)}.certificate-sheet:before{content:'';display:block;width:40px;height:4px;border-radius:10px;background:var(--border);margin:0 auto 12px}}