/* Login und Gast-Seiten im Weltraum-Design von modernhosting.ch
   (Login, Zwei-Faktor, Passwort vergessen/setzen, Registrieren).
   Greift nur, wenn views/layout/header.php <html class="mc-space"> setzt; die
   Bestellseiten und das Panel selbst bleiben unberuehrt. Keine externen Quellen:
   Schriften lokal (SIL Open Font License, siehe ../fonts/OFL-*.txt), Logo lokal,
   Rakete als Inline-SVG.
   Bewegung: html.mc-intro (Kopf, einmaliger Auftritt) und html.mc-motion (setzt
   login.js erst, wenn der Pause-Knopf bereit ist). Ohne beides bleibt alles
   still - also auch bei "Bewegung reduzieren" oder ohne JavaScript. */

@font-face {
    font-family: 'Rajdhani';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/rajdhani-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Rajdhani';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/rajdhani-600-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Rajdhani';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/rajdhani-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Rajdhani';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/rajdhani-700-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Squada One';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/squada-one-400-latin.woff2') format('woff2');
}

@property --mc-edge-angle {
    syntax: '<angle>';
    initial-value: 220deg;
    inherits: false;
}

/* ---------- Grundlagen ---------- */

/* Farben mit denselben Namen und Werten wie public/assets/css/order.css, aber
   nur auf den Gast-Seiten gesetzt (am body, damit sie :root[data-theme] schlagen). */
.mc-space {
    color-scheme: dark;
    background: #070a13;
    /* Eigenes overflow an der Wurzel: dann clippt der body selbst (statt es an den
       Viewport weiterzureichen) und Rakete/Planet lösen am Handy kein Querscrollen
       und kein Herauszoomen aus. */
    overflow-x: hidden;
    overflow-x: clip;
}

.mc-space body.mc-body {
    color-scheme: dark;
    --bg: #070a13;
    --surface: #0d1322;
    --surface-2: #121b2d;
    --text: #eef3ff;
    --text-dim: #a6b2ca;
    --border: #54627d;
    --hairline: #ffffff2e;
    --accent: #69e1f5;
    --accent-strong: #9af5d4;
    --success: #9af5d4;
    --warning: #f4d28b;
    --danger: #ffb2c0;
    --pending: #c4b7ff;
    --info: #69e1f5;
    --neutral-status: #a6b2ca;
    --mc-violet: #a492ff;
    --mc-indigo: #6550db;
    --mc-gradient: linear-gradient(105deg, var(--mc-violet), var(--accent) 65%, var(--accent-strong));
    --mc-label: #d3dcee;
    --mc-faint: #8794b0;
    --mc-line: rgba(255, 255, 255, 0.09);
    --mc-field: rgba(4, 7, 14, 0.62);
    /* Feldrahmen mind. 3:1 gegen die Karte (#121b2d: 3.99:1), WCAG 1.4.11 */
    --mc-field-border: #6b7a99;
    --mc-field-hover: #8391ad;
    --mc-font: Inter, Arial, Helvetica, sans-serif;
    --mc-title: Rajdhani, Inter, Arial, sans-serif;
    --mc-mono: 'JetBrains Mono', Consolas, Monaco, monospace;
    --mc-wordmark: 'Squada One', Rajdhani, Arial, sans-serif;
    display: block;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-x: clip;
    background: radial-gradient(ellipse at 75% 30%, rgba(113, 82, 218, 0.2), transparent 55%), var(--bg) !important;
    background-attachment: scroll !important;
    background-size: auto !important;
    color: var(--text);
    font-family: var(--mc-font);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.mc-space body.mc-body::before,
.mc-space body.mc-body::after {
    content: none !important;
    animation: none !important;
}

.mc-space ::selection {
    background: var(--mc-violet);
    color: var(--bg);
}

.mc-space [hidden] {
    display: none !important;
}

.mc-space .mc-body :is(a, button, input, select, textarea, summary):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

:where(.mc-space) :where(p, h2) {
    margin: 0;
}

/* ---------- Himmel: Sternenflug (Canvas), Nebel, Planet, Rasterlinien ---------- */

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

.mc-starfield {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.mc-nebula {
    position: absolute;
    border-radius: 50%;
}

.mc-nebula-one {
    top: -28vh;
    right: -24vw;
    width: 78vw;
    height: 92vh;
    background: radial-gradient(ellipse at center, rgba(52, 44, 130, 0.72), rgba(37, 32, 95, 0.3) 38%, transparent 66%);
    transform: rotate(-30deg);
}

.mc-nebula-two {
    bottom: -32vh;
    left: -22vw;
    width: 64vw;
    height: 74vh;
    background: radial-gradient(ellipse at center, rgba(71, 206, 235, 0.14), rgba(101, 80, 219, 0.08) 42%, transparent 68%);
}

/* Planetenhorizont, leicht nach links versetzt: die Rakete startet von hier. */
.mc-planet {
    position: absolute;
    top: calc(100% - 14vh);
    left: 36%;
    width: 300vmax;
    height: 300vmax;
    margin-left: -150vmax;
    border-top: 1px solid rgba(154, 245, 212, 0.55);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 0, rgba(105, 225, 245, 0.2), rgba(26, 36, 72, 0.9) 5%, #04070e 14%);
    box-shadow: 0 -6px 36px rgba(105, 225, 245, 0.2), 0 -36px 140px rgba(164, 146, 255, 0.24), inset 0 16px 60px rgba(105, 225, 245, 0.14);
}

.mc-scanlines {
    position: absolute;
    inset: 0;
    opacity: 0.2;
    background-image: repeating-linear-gradient(0deg, transparent 0 3px, var(--bg) 3px 4px);
}

/* ---------- Seitenraster ---------- */

.mc-page {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: auto 1fr auto;
    width: min(1180px, 100% - 64px);
    min-height: 100vh;
    min-height: 100dvh;
    margin-inline: auto;
}

.mc-header {
    display: flex;
    align-items: center;
    padding: 28px 0 8px;
}

.mc-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--text);
}

.mc-brand img {
    display: block;
    width: 30px;
    height: 34px;
    flex: 0 0 auto;
}

.mc-brand-text {
    display: flex;
    align-items: center;
    gap: 14px;
}

.mc-wordmark {
    font-family: var(--mc-wordmark);
    font-size: 29px;
    line-height: 1;
    letter-spacing: -0.025em;
    white-space: nowrap;
}

.mc-wordmark-dot {
    color: var(--accent);
}

.mc-product {
    padding-left: 14px;
    border-left: 1px solid var(--hairline);
    color: var(--text-dim);
    font-family: var(--mc-mono);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
}

.mc-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
    gap: clamp(32px, 5vw, 88px);
    align-items: center;
    padding-block: 20px 28px;
}

.mc-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 20px;
    padding: 6px 0 22px;
    color: var(--mc-faint);
    font-size: 13px;
}

.mc-motion-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 6px 2px;
    border: 0;
    background: none;
    color: var(--text-dim);
    font: 12px/1.4 var(--mc-mono);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.mc-motion-toggle:hover,
.mc-motion-toggle[aria-pressed="true"] {
    color: var(--accent);
}

/* Kleines Kaestchen zeigt den Zustand auch ohne Screenreader (aria-pressed). */
.mc-motion-toggle::before {
    content: "";
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border: 1px solid currentColor;
    border-radius: 2px;
}

.mc-motion-toggle[aria-pressed="true"]::before {
    background: currentColor;
    box-shadow: 0 0 10px currentColor;
}

/* ---------- Rakete (Original von modernhosting.ch) mit Telemetrie ---------- */

.mc-visual {
    position: relative;
    min-width: 0;
}

.mc-flight-label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 4px 16px;
    color: var(--mc-faint);
    font: 11px/1.4 var(--mc-mono);
    letter-spacing: 0.15em;
}

.mc-flight-label > span:last-child {
    margin-left: auto;
}

.mc-crosshair {
    color: var(--accent);
    font-size: 22px;
    line-height: 1;
}

.mc-scene {
    position: relative;
    height: 390px;
}

.mc-rocket {
    position: absolute;
    top: -38px;
    left: 50%;
    width: 460px;
    height: 452px;
    overflow: visible;
    transform: translateX(-50%);
}

.mc-orbit {
    position: absolute;
    top: 8px;
    left: 50%;
    width: 370px;
    height: 370px;
    transform: translateX(-50%) rotate(-28deg) scaleY(0.5);
}

.mc-orbit-two {
    top: -22px;
    width: 430px;
    height: 430px;
    opacity: 0.45;
    transform: translateX(-50%) rotate(48deg) scaleY(0.6);
}

.mc-orbit-track {
    position: absolute;
    inset: 0;
    border: 1px solid var(--hairline);
    border-radius: 50%;
}

.mc-orbit-dot {
    position: absolute;
    top: -4px;
    left: calc(50% - 4px);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 20px var(--accent);
}

.mc-coord {
    position: absolute;
    color: var(--mc-faint);
    font: 11px/1.4 var(--mc-mono);
    letter-spacing: 0.1em;
    white-space: nowrap;
}

.mc-coord-one {
    top: 96px;
    left: 0;
}

.mc-coord-two {
    top: 250px;
    right: 0;
}

/* Telemetrie (aria-hidden): spiegelt nur, ob Felder ausgefuellt sind. */
.mc-telemetry {
    position: absolute;
    bottom: 4px;
    left: 16px;
    display: grid;
    gap: 5px;
    min-width: 256px;
    padding: 9px 12px 9px 14px;
    border-left: 1px solid var(--hairline);
    background: linear-gradient(90deg, rgba(13, 19, 34, 0.7), rgba(13, 19, 34, 0));
    color: var(--text-dim);
    font: 11px/1.45 var(--mc-mono);
    letter-spacing: 0.1em;
}

.mc-readout {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mc-status-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: var(--accent-strong);
    box-shadow: 0 0 14px var(--accent-strong);
}

.mc-telemetry-row {
    display: flex;
    align-items: center;
    gap: 10px;
    transition: color 0.3s;
}

.mc-telemetry-row::before {
    content: "";
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: var(--mc-faint);
    transition: background-color 0.3s, box-shadow 0.3s;
}

.mc-telemetry-row b {
    margin-left: auto;
    padding-left: 14px;
    color: var(--mc-faint);
    font-weight: 500;
    white-space: nowrap;
    transition: color 0.3s;
}

.mc-telemetry-row.is-active {
    color: var(--text);
}

.mc-telemetry-row.is-active::before {
    background: var(--mc-violet);
    box-shadow: 0 0 10px var(--mc-violet);
}

.mc-telemetry-row.is-ready::before {
    background: var(--accent-strong);
    box-shadow: 0 0 12px var(--accent-strong);
}

.mc-telemetry-row.is-ready b {
    color: var(--accent-strong);
}

.mc-telemetry-row.is-final {
    margin-top: 3px;
    padding-top: 7px;
    border-top: 1px solid var(--mc-line);
}

.mc-tagline {
    margin: 18px 0 0 16px;
    color: var(--text);
    font-family: var(--mc-title);
    font-size: clamp(3rem, 4.8vw, 4.6rem);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.045em;
}

.mc-tagline > span {
    display: block;
}

.mc-lead {
    max-width: 30ch;
    margin: 16px 0 0 16px;
    color: var(--text-dim);
    font-size: 17px;
    line-height: 1.55;
}

.mc-gradient {
    color: var(--accent);
    background: var(--mc-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.mc-stop-hull-dark { stop-color: #526584; }
.mc-stop-hull-light { stop-color: #eff8ff; }
.mc-stop-hull-mid { stop-color: #b6c8dc; }
.mc-stop-violet { stop-color: var(--mc-violet); }
.mc-stop-indigo { stop-color: var(--mc-indigo); }
.mc-stop-white { stop-color: #ffffff; }
.mc-stop-cyan { stop-color: var(--accent); }
.mc-stop-fade { stop-color: var(--mc-violet); stop-opacity: 0; }
.mc-stop-window { stop-color: #102d4d; }
.mc-stop-trail { stop-color: var(--accent); stop-opacity: 0.9; }
.mc-stop-trail-end { stop-color: var(--mc-violet); stop-opacity: 0.15; }

.mc-rocket-body { fill: url(#mc-hull); }
.mc-rocket-fin,
.mc-rocket-nose { fill: url(#mc-fin); }
.mc-rocket-seam { fill: none; stroke: #526584; stroke-width: 2; }
.mc-rocket-window { fill: url(#mc-window); }
.mc-window-frame { fill: #526584; stroke: #eff8ff; stroke-width: 3; }
.mc-window-glint { fill: none; stroke: #ffffff; stroke-width: 3; stroke-linecap: round; opacity: 0.65; }
.mc-rocket-center-fin { fill: var(--mc-indigo); }
.mc-rocket-nozzle { fill: #526584; }
.mc-rocket-mark { stroke: #526584; stroke-width: 2; }

/* Kurs zur Karte ("Andocken"), verschwindet hinter der Karte. */
.mc-trajectory {
    fill: none;
    stroke: url(#mc-trail);
    stroke-width: 2;
    stroke-dasharray: 3 11;
    stroke-linecap: round;
    opacity: 0.55;
    transition: opacity 0.4s;
}

.mc-exhaust-halo,
.mc-exhaust-core {
    fill: url(#mc-exhaust);
    transform-origin: 300px 350px;
}

.mc-exhaust-halo {
    opacity: 0.35;
    filter: blur(3px);
}

.mc-exhaust-core {
    opacity: 0.8;
}

.mc-rocket-clouds {
    fill: var(--mc-violet);
    opacity: 0.09;
    filter: blur(3px);
    transform-origin: 300px 520px;
}

.mc-particles {
    fill: var(--accent);
    stroke: var(--accent);
    opacity: 0.55;
}

/* ---------- Karte "Mission Control" ---------- */

.mc-space .mc-card {
    position: relative;
    isolation: isolate;
    z-index: 1;
    width: 100%;
    min-width: 0;
    padding: 34px 36px 30px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(18, 27, 45, 0.94), rgba(10, 15, 27, 0.96));
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5), 0 0 80px -30px rgba(113, 82, 218, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

@supports ((-webkit-backdrop-filter: blur(16px)) or (backdrop-filter: blur(16px))) {
    .mc-space .mc-card {
        background: linear-gradient(180deg, rgba(18, 27, 45, 0.86), rgba(10, 15, 27, 0.9));
        -webkit-backdrop-filter: blur(16px) saturate(1.2);
        backdrop-filter: blur(16px) saturate(1.2);
    }
}

/* Irisierender Rand; der helle Abschnitt folgt dem Zeiger (--mc-edge-angle aus login.js). */
.mc-space .mc-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    padding: 1px;
    border-radius: inherit;
    background: conic-gradient(from var(--mc-edge-angle), rgba(255, 255, 255, 0.1), var(--mc-violet) 8%, var(--accent) 16%, var(--accent-strong) 21%, rgba(255, 255, 255, 0.1) 34%, rgba(255, 255, 255, 0.06) 70%, rgba(164, 146, 255, 0.35) 88%, rgba(255, 255, 255, 0.1));
    -webkit-mask: linear-gradient(#ffffff 0 0) content-box, linear-gradient(#ffffff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#ffffff 0 0) content-box, linear-gradient(#ffffff 0 0);
    mask-composite: exclude;
    pointer-events: none;
}

.mc-space .mc-card::after {
    content: "";
    position: absolute;
    top: -1px;
    right: 28px;
    left: 28px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(105, 225, 245, 0.75), transparent);
    pointer-events: none;
}

/* Andock-Rahmen: vier Eckwinkel wie bei einer Zielerfassung. */
.mc-card-fx {
    position: absolute;
    inset: -12px;
    z-index: -2;
    pointer-events: none;
    --mc-corner: rgba(105, 225, 245, 0.7);
    background:
        linear-gradient(var(--mc-corner), var(--mc-corner)) left top / 20px 1px no-repeat,
        linear-gradient(var(--mc-corner), var(--mc-corner)) left top / 1px 20px no-repeat,
        linear-gradient(var(--mc-corner), var(--mc-corner)) right top / 20px 1px no-repeat,
        linear-gradient(var(--mc-corner), var(--mc-corner)) right top / 1px 20px no-repeat,
        linear-gradient(var(--mc-corner), var(--mc-corner)) left bottom / 20px 1px no-repeat,
        linear-gradient(var(--mc-corner), var(--mc-corner)) left bottom / 1px 20px no-repeat,
        linear-gradient(var(--mc-corner), var(--mc-corner)) right bottom / 20px 1px no-repeat,
        linear-gradient(var(--mc-corner), var(--mc-corner)) right bottom / 1px 20px no-repeat;
    opacity: 0.8;
}

.mc-card-sheen {
    display: none;
}

.mc-card-scan {
    position: absolute;
    top: 12px;
    right: 24px;
    left: 24px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), var(--accent-strong), transparent);
    box-shadow: 0 0 18px var(--accent);
    opacity: 0;
}

.mc-space .mc-card .mc-eyebrow {
    display: block;
    margin: 0 0 14px;
    color: var(--accent);
    font-family: var(--mc-mono);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.mc-space .mc-card .mc-eyebrow::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 10px 2px 0;
    vertical-align: middle;
    border-radius: 50%;
    background: var(--accent-strong);
    box-shadow: 0 0 14px var(--accent-strong);
}

.mc-space .mc-card h1 {
    margin: 0 0 22px;
    color: var(--text);
    font-family: var(--mc-title);
    font-size: 38px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    overflow-wrap: anywhere;
    text-shadow: none;
    text-wrap: balance;
}

.mc-space .mc-card h1 .mc-gradient {
    display: block;
    padding-bottom: 0.06em;
}

.mc-space .mc-card .mc-section-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0 12px;
    color: var(--text-dim);
    font-family: var(--mc-mono);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.mc-space .mc-card .mc-section-label::after {
    content: "";
    order: 1;
    height: 1px;
    flex: 1;
    background: var(--mc-line);
}

.mc-space .mc-card .mc-section-note {
    order: 2;
    color: var(--mc-faint);
    letter-spacing: 0.08em;
    text-transform: none;
}

.mc-space .mc-card .mc-section-label:first-child,
.mc-space .mc-card h1 + .mc-section-label {
    margin-top: 0;
}

.mc-space .mc-card .auth-note {
    margin: -12px 0 20px;
    color: var(--text-dim);
    font-size: 14px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.mc-space .mc-card .form-hint,
.mc-space .mc-card .field-help {
    margin: 0;
    color: var(--text-dim);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.5;
    text-wrap: pretty;
}

.mc-space .mc-card .form .field-help {
    margin-top: -6px;
}

.mc-nowrap {
    white-space: nowrap;
}

.mc-space .mc-card .form-hint:empty {
    margin: 0;
}

.mc-space .mc-card .mc-section-label + .form-hint {
    margin-bottom: 14px;
}

/* ---------- Meldungen ---------- */

.mc-space .mc-card .alert-list {
    display: grid;
    gap: 8px;
    margin: 0 0 18px;
}

.mc-space .mc-card .flash {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 18px;
    padding: 12px 14px;
    border: 1px solid var(--hairline);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    overflow-wrap: anywhere;
    text-wrap: pretty;
}

.mc-space .mc-card .alert-list .flash {
    margin: 0;
}

.mc-space .mc-card .flash::before {
    content: "";
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    margin-top: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 12px currentColor;
}

.mc-space .mc-card .flash-error {
    border-color: rgba(255, 112, 140, 0.55);
    background: rgba(255, 77, 109, 0.11);
    color: var(--danger);
}

.mc-space .mc-card .flash-success {
    border-color: rgba(154, 245, 212, 0.45);
    background: rgba(154, 245, 212, 0.08);
    color: var(--success);
}

.mc-space .mc-card .flash-warning {
    border-color: rgba(255, 209, 102, 0.45);
    background: rgba(255, 209, 102, 0.08);
    color: var(--warning);
}

/* ---------- Formular ---------- */

.mc-space .mc-card .form {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.mc-space .mc-card label {
    display: grid;
    gap: 7px;
    min-width: 0;
    color: var(--mc-label);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* Alle Feld-Regeln haengen an demselben (starken) Selektor wie die Grundregel -
   sonst gewinnt sie gegen Autofill, Fokus und das Code-Feld (workspace.css hat
   fuer min-height einen noch staerkeren Selektor). */
.mc-space .mc-body .mc-card input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid var(--mc-field-border);
    border-radius: 10px;
    background: var(--mc-field);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    color: var(--text);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0;
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.mc-space .mc-body .mc-card input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):hover {
    border-color: var(--mc-field-hover);
}

.mc-space .mc-body .mc-card input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus {
    border-color: var(--accent);
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    background: rgba(4, 7, 14, 0.8);
    box-shadow: 0 0 0 5px rgba(105, 225, 245, 0.14), 0 0 26px rgba(71, 206, 235, 0.18);
}

.mc-space .mc-body .mc-card input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):disabled {
    cursor: not-allowed;
    opacity: 0.65;
}

.mc-space .mc-body .mc-card input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"])::placeholder {
    color: #8e9bb5;
    opacity: 1;
}

/* Browser-Autofill hell ueberdecken, damit Text und Feld dunkel bleiben. */
.mc-space .mc-body .mc-card input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):-webkit-autofill,
.mc-space .mc-body .mc-card input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):-webkit-autofill:hover {
    -webkit-text-fill-color: var(--text);
    caret-color: var(--text);
    box-shadow: 0 0 0 40px #0b1120 inset;
    transition: background-color 600000s 0s, color 600000s 0s;
}

.mc-space .mc-body .mc-card input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text);
    box-shadow: 0 0 0 40px #0b1120 inset, 0 0 0 5px rgba(105, 225, 245, 0.14);
}

.mc-space .mc-body .mc-card input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]).mc-code-input {
    font-family: var(--mc-mono);
    font-size: 18px;
    letter-spacing: 0.12em;
    text-align: center;
}

.mc-space .mc-body .mc-card input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]).mc-code-input::placeholder {
    font-size: 13px;
    letter-spacing: 0.02em;
}

/* ---------- Knoepfe ---------- */

.mc-space .mc-card .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: 10px;
    box-shadow: none;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0;
    text-decoration: none;
    transform: none;
    transition: transform 0.25s, box-shadow 0.25s, background-color 0.25s, border-color 0.25s, color 0.25s;
}

.mc-space .mc-card .form .button {
    margin-top: 6px;
}

.mc-space .mc-card .mc-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mc-space .mc-card .button-primary {
    border-color: transparent;
    background: var(--mc-gradient);
    color: #04070e;
    box-shadow: 0 10px 30px rgba(105, 225, 245, 0.16);
}

.mc-space .mc-card .button-primary:hover {
    background: var(--mc-gradient);
    color: #04070e;
    box-shadow: 0 14px 38px rgba(105, 225, 245, 0.28), 0 0 32px rgba(164, 146, 255, 0.24);
    transform: translateY(-2px);
}

/* Alle Felder ausgefuellt: der Startknopf leuchtet auf (html.mc-ready aus login.js). */
.mc-ready .mc-card form[data-mc-launch] .button-primary {
    box-shadow: 0 14px 40px rgba(105, 225, 245, 0.3), 0 0 36px rgba(154, 245, 212, 0.28);
}

.mc-space .mc-card .button-secondary {
    border-color: var(--hairline);
    background: rgba(105, 225, 245, 0.06);
    color: var(--text);
}

.mc-space .mc-card .button-secondary:hover {
    border-color: rgba(105, 225, 245, 0.55);
    background: rgba(105, 225, 245, 0.11);
    color: #ffffff;
}

.mc-space .mc-card .button-ghost {
    border-color: transparent;
    background: transparent;
    color: var(--text-dim);
}

.mc-space .mc-card .button-ghost:hover {
    border-color: var(--mc-line);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
}

.mc-space .mc-card .button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    box-shadow: 0 0 0 6px rgba(105, 225, 245, 0.12), 0 0 30px rgba(71, 206, 235, 0.25);
}

.mc-space .mc-card .button:disabled,
.mc-space .mc-card .button[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
    box-shadow: none;
    transform: none;
}

.mc-space .mc-card .auth-secondary-form {
    margin-top: 12px;
}

.mc-space .mc-card .mc-passkey .form-hint:not(:empty) {
    margin-top: 10px;
}

/* "oder" nur zeigen, wenn der Passkey-Knopf sichtbar ist (app.js entfernt hidden). */
.mc-space .mc-card .mc-or {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0 0;
    color: var(--mc-faint);
    font-size: 12.5px;
    font-weight: 500;
}

.mc-space .mc-card .mc-or::before,
.mc-space .mc-card .mc-or::after {
    content: "";
    height: 1px;
    flex: 1;
    background: var(--mc-line);
}

.mc-space .mc-card .mc-or:has(+ .mc-passkey > [data-webauthn-login-button][hidden]) {
    display: none;
}

.mc-space .mc-card .mc-or + .mc-passkey {
    margin-top: 12px;
}

/* SSO fuer Mitarbeitende und Admins: bewusst gross und zuoberst. */
.mc-space .mc-card .mc-sso {
    justify-content: flex-start;
    gap: 14px;
    min-height: 64px;
    padding: 12px 16px 12px 12px;
    border: 1px solid transparent;
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(38, 33, 84, 0.96), rgba(13, 30, 44, 0.96)) padding-box,
        linear-gradient(120deg, var(--mc-violet), var(--accent) 60%, var(--accent-strong)) border-box;
    color: var(--text);
    box-shadow: 0 14px 36px rgba(101, 80, 219, 0.2);
    text-align: left;
}

.mc-space .mc-card .mc-sso:hover {
    color: #ffffff;
    box-shadow: 0 18px 44px rgba(101, 80, 219, 0.3), 0 0 30px rgba(105, 225, 245, 0.18);
    transform: translateY(-2px);
}

.mc-sso-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 11px;
    background: rgba(164, 146, 255, 0.18);
    color: var(--accent-strong);
}

.mc-space .mc-card .mc-sso-icon .mc-icon {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
}

.mc-sso-label {
    display: grid;
    gap: 1px;
    min-width: 0;
    color: #c3cde0;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.35;
}

.mc-sso-label strong {
    color: var(--text);
    font-size: 15px;
    font-weight: 700;
}

.mc-space .mc-card .mc-sso-arrow {
    margin-left: auto;
    color: var(--accent);
    transition: transform 0.25s;
}

.mc-space .mc-card .mc-sso:hover .mc-sso-arrow {
    transform: translateX(3px);
}

/* ---------- Links ---------- */

.mc-space .mc-card a:not(.button) {
    color: var(--accent);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(105, 225, 245, 0.45);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

.mc-space .mc-card a:not(.button):hover {
    color: #ffffff;
    text-decoration-color: currentColor;
}

.mc-space .mc-card .form-link {
    display: inline-flex;
    align-items: center;
    justify-self: center;
    min-height: 32px;
    font-size: 14px;
}

.mc-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 18px;
    margin-top: 16px;
}

/* Fehlerseite "Formular abgelaufen" im Gast-Layout */
.mc-space .mc-card .empty-state {
    display: grid;
    gap: 14px;
    max-width: none;
    padding: 0;
    color: var(--text-dim);
}

.mc-space .mc-card .empty-state h1 {
    margin-bottom: 0;
}

/* ---------- Bewegung (nur mit html.mc-motion bzw. html.mc-intro) ---------- */

@keyframes mc-hover {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

@keyframes mc-flame {
    from { transform: scaleY(0.9); opacity: 0.6; }
    to { transform: scaleY(1.07); opacity: 0.85; }
}

@keyframes mc-flame-ready {
    from { transform: scaleY(1.02); opacity: 0.75; }
    to { transform: scaleY(1.2); opacity: 0.95; }
}

@keyframes mc-clouds {
    from { transform: translateY(0) scale(1); opacity: 0.07; }
    to { transform: translateY(-6px) scale(1.02); opacity: 0.13; }
}

@keyframes mc-twinkle {
    from { opacity: 0.3; }
    to { opacity: 0.7; }
}

@keyframes mc-spin {
    to { transform: rotate(360deg); }
}

@keyframes mc-dash {
    to { stroke-dashoffset: -140; }
}

@keyframes mc-arrive {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
}

/* Karte "materialisiert" sich von oben nach unten wie ein Hologramm. */
@keyframes mc-materialize {
    from { opacity: 0; clip-path: inset(0 0 100% 0 round 20px); }
    35% { opacity: 1; }
    to { opacity: 1; clip-path: inset(-160px -160px -160px -160px round 20px); }
}

@keyframes mc-scan {
    0% { top: 12px; opacity: 0; }
    12% { opacity: 1; }
    88% { opacity: 1; }
    100% { top: calc(100% - 14px); opacity: 0; }
}

@keyframes mc-lock {
    from { opacity: 0; transform: scale(1.06); }
    to { opacity: 0.8; transform: none; }
}

@keyframes mc-liftoff {
    0% { transform: translate(0, 0); animation-timing-function: cubic-bezier(0.55, 0, 0.8, 0.2); }
    100% { transform: translate(250px, -560px); opacity: 0; }
}

@keyframes mc-boost {
    to { transform: scaleY(1.8); opacity: 1; }
}

@keyframes mc-puff {
    0% { transform: scale(1); opacity: 0.09; }
    35% { transform: translateY(-4px) scale(1.25); opacity: 0.32; }
    100% { transform: translateY(-10px) scale(1.55); opacity: 0; }
}

.mc-motion .mc-rocket-float {
    animation: mc-hover 6s ease-in-out infinite;
}

.mc-motion .mc-exhaust-halo,
.mc-motion .mc-exhaust-core {
    animation: mc-flame 1.2s ease-in-out infinite alternate;
}

.mc-motion.mc-ready .mc-exhaust-halo,
.mc-motion.mc-ready .mc-exhaust-core {
    animation: mc-flame-ready 0.9s ease-in-out infinite alternate;
}

.mc-motion .mc-rocket-clouds {
    animation: mc-clouds 7s ease-in-out infinite alternate;
}

.mc-motion .mc-particles {
    animation: mc-twinkle 4s ease-in-out infinite alternate;
}

.mc-motion .mc-orbit-one .mc-orbit-track {
    animation: mc-spin 28s linear infinite;
}

.mc-motion .mc-trajectory {
    animation: mc-dash 9s linear infinite;
}

/* Auftritt nur beim ersten Zeichnen (html.mc-intro aus dem Kopf), nicht nach einer Pause. */
.mc-intro .mc-card {
    animation: mc-materialize 0.95s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s backwards;
}

.mc-intro .mc-card-scan {
    animation: mc-scan 0.95s cubic-bezier(0.4, 0, 0.2, 1) 0.1s backwards;
}

.mc-intro .mc-card-fx {
    animation: mc-lock 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) 0.85s backwards;
}

.mc-intro .mc-tagline > span,
.mc-intro .mc-lead,
.mc-intro .mc-telemetry {
    animation: mc-arrive 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.mc-intro .mc-tagline > span:nth-child(2) {
    animation-delay: 0.14s;
}

.mc-intro .mc-lead {
    animation-delay: 0.26s;
}

.mc-intro .mc-telemetry {
    animation-delay: 0.5s;
}

/* Start beim Absenden (login.js setzt html.mc-launch, das Absenden wartet nie darauf). */
.mc-motion.mc-launch .mc-rocket-launch {
    animation: mc-liftoff 1.3s forwards;
}

.mc-motion.mc-launch .mc-exhaust-halo,
.mc-motion.mc-launch .mc-exhaust-core {
    animation: mc-boost 0.35s ease-out forwards;
}

.mc-motion.mc-launch .mc-rocket-clouds {
    animation: mc-puff 1.2s ease-out forwards;
}

.mc-launch .mc-trajectory {
    opacity: 0.95;
}

/* Tab im Hintergrund oder Pause: die Dauer-Animationen stehen still (der kurze
   Auftritt der Karte laeuft immer zu Ende, damit sie nie unsichtbar bleibt). */
.mc-paused .mc-visual *,
.mc-paused .mc-visual *::before,
.mc-paused .mc-visual *::after {
    animation-play-state: paused !important;
}

/* ---------- Anpassungen nach Bildschirm ---------- */

@media (max-width: 1100px) {
    .mc-main {
        grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
        gap: 40px;
    }

    .mc-scene {
        height: 340px;
    }

    .mc-rocket {
        top: -24px;
        width: 400px;
        height: 393px;
    }

    .mc-orbit {
        top: 16px;
        width: 310px;
        height: 310px;
    }

    .mc-orbit-two {
        top: -6px;
        width: 360px;
        height: 360px;
    }

    .mc-coord-one {
        top: 84px;
    }

    .mc-coord-two {
        top: 220px;
    }
}

@media (min-width: 901px) and (max-height: 820px) {
    .mc-header {
        padding-top: 18px;
    }

    .mc-main {
        padding-block: 8px 16px;
    }

    .mc-scene {
        height: 300px;
    }

    .mc-rocket {
        top: -20px;
        width: 350px;
        height: 344px;
    }

    .mc-orbit {
        top: 18px;
        width: 280px;
        height: 280px;
    }

    .mc-orbit-two {
        top: 0;
        width: 320px;
        height: 320px;
    }

    .mc-coord-one {
        top: 70px;
    }

    .mc-coord-two {
        top: 196px;
    }

    .mc-tagline {
        font-size: clamp(2.6rem, 4vw, 3.6rem);
    }

    .mc-lead {
        display: none;
    }

    .mc-space .mc-card {
        padding-block: 28px 24px;
    }

    .mc-space .mc-card h1 {
        margin-bottom: 20px;
        font-size: 34px;
    }

    .mc-space .mc-card h1 .mc-gradient {
        display: inline;
    }
}

/* Schmal: Karte zuerst, kleine Rakete oben rechts neben der Marke. */
@media (max-width: 900px) {
    .mc-page {
        width: min(480px, 100% - 40px);
    }

    .mc-header {
        min-height: 92px;
        padding: 20px 0 12px;
    }

    .mc-main {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        padding-block: 0 24px;
    }

    .mc-visual {
        position: absolute;
        top: 0;
        right: -14px;
        z-index: 2;
        width: clamp(104px, 28vw, 136px);
        height: clamp(104px, 28vw, 136px);
        pointer-events: none;
    }

    .mc-flight-label,
    .mc-coord,
    .mc-telemetry,
    .mc-orbit-two,
    .mc-tagline,
    .mc-lead,
    .mc-rocket-clouds,
    .mc-trajectory {
        display: none;
    }

    .mc-scene {
        height: 100%;
    }

    .mc-rocket {
        top: -2%;
        width: 118%;
        height: 116%;
    }

    .mc-orbit {
        top: 18%;
        width: 88%;
        height: 88%;
    }

    .mc-orbit-dot {
        top: -3px;
        left: calc(50% - 3px);
        width: 6px;
        height: 6px;
    }

    .mc-planet {
        top: calc(100% - 12vh);
        left: 50%;
    }

    .mc-card-fx {
        inset: -8px;
    }
}

@media (max-width: 720px) {
    .mc-space .mc-card {
        padding: 26px 22px 22px;
        border-radius: 18px;
        background: linear-gradient(180deg, rgba(16, 24, 41, 0.95), rgba(9, 13, 24, 0.97));
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .mc-space .mc-card h1 {
        font-size: 34px;
    }

    .mc-footer {
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 420px) {
    .mc-page {
        width: calc(100% - 32px);
    }

    .mc-brand-text {
        display: grid;
        gap: 3px;
    }

    .mc-wordmark {
        font-size: 26px;
    }

    .mc-product {
        padding-left: 0;
        border-left: 0;
        font-size: 10px;
    }

    .mc-space .mc-card {
        padding: 22px 18px 20px;
    }

    .mc-space .mc-card h1 {
        font-size: 31px;
    }

    .mc-space .mc-card .mc-sso {
        gap: 12px;
        padding: 10px 12px 10px 10px;
    }

    .mc-links {
        justify-content: flex-start;
    }

    .mc-card-fx {
        display: none;
    }
}

@media (max-width: 359px) {
    .mc-visual {
        display: none;
    }

    .mc-space .mc-card h1 {
        font-size: 29px;
    }
}

/* ---------- Barrierefreiheit ---------- */

@media (prefers-reduced-motion: reduce) {
    .mc-space *,
    .mc-space *::before,
    .mc-space *::after {
        animation: none !important;
        transition: none !important;
    }

    .mc-space .mc-card .button:hover,
    .mc-space .mc-card .mc-sso:hover .mc-sso-arrow {
        transform: none;
    }
}

@media (prefers-reduced-transparency: reduce) {
    .mc-space .mc-card {
        background: #0d1322;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

@media (forced-colors: active) {
    .mc-sky,
    .mc-visual,
    .mc-card-fx,
    .mc-space .mc-card::before,
    .mc-space .mc-card::after,
    .mc-space .mc-card .flash::before,
    .mc-space .mc-card .mc-eyebrow::before {
        display: none;
    }

    .mc-gradient {
        background: none;
        color: CanvasText;
        -webkit-text-fill-color: CanvasText;
    }

    .mc-space .mc-card {
        border: 1px solid CanvasText;
    }

    .mc-space .mc-card .button {
        border: 1px solid ButtonText;
    }
}