:root {
    color-scheme: dark;
    --bg: #06161e;
    --surface: #0d2833;
    --surface-soft: #102f3b;
    --border: #28515d;
    --text: #f3f7f8;
    --muted: #99b7c1;
    --accent: #22a8d7;
    --accent-strong: #36b9e8;
    --danger: #ff6875;
    --success: #63d5a0;
    --info: #8fcbe0;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body {
    background: radial-gradient(circle at 50% 35%, #0b2631 0, var(--bg) 48%, #031016 100%);
    color: var(--text);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.gate-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 28px;
}
.gate-card {
    width: min(520px, 100%);
    border: 1px solid var(--border);
    border-radius: 22px;
    background: rgba(13, 40, 51, .94);
    box-shadow: 0 28px 80px rgba(0,0,0,.34);
    padding: 30px;
}
.gate-card.wide { width: min(760px, 100%); }
.gate-mark {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: 18px;
    border-radius: 14px;
    background: var(--accent);
    color: white;
    font-size: 24px;
    font-weight: 800;
}
h1 { margin: 0 0 10px; font-size: clamp(28px, 4vw, 38px); letter-spacing: -.02em; }
h2 { margin: 26px 0 8px; font-size: 18px; }
.lead { color: var(--muted); line-height: 1.55; margin: 0 0 22px; }
.muted, .gate-foot { color: var(--muted); font-size: 13px; line-height: 1.5; }
.gate-foot { margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(143,203,224,.16); }
.form-stack { display: grid; gap: 14px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
label { display: grid; gap: 7px; color: var(--text); font-size: 14px; font-weight: 650; }
input {
    width: 100%;
    min-height: 44px;
    border: 1px solid #3a6270;
    border-radius: 11px;
    background: #071b23;
    color: var(--text);
    padding: 9px 12px;
    font: inherit;
}
input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.button {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 15px;
    border: 1px solid #3a6270;
    border-radius: 10px;
    background: #153846;
    color: var(--text);
    text-decoration: none;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.button:hover, .button:focus-visible { filter: brightness(1.08); outline: none; }
.notice {
    margin: 16px 0;
    padding: 13px 15px;
    border-radius: 11px;
    border: 1px solid #3b6170;
    background: var(--surface-soft);
    color: var(--info);
    line-height: 1.5;
}
.notice.error { border-color: rgba(255,104,117,.55); color: #ff9da5; }
.notice.success { border-color: rgba(99,213,160,.5); color: var(--success); }
.notice.info { color: var(--info); }
.secret-output {
    overflow: auto;
    border: 1px solid #3a6270;
    border-radius: 10px;
    background: #06171e;
    padding: 12px;
    color: #dff8ff;
    user-select: all;
}
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 18px 0 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
code { color: #d5f5ff; }
.gate-spinner {
    width: 46px;
    height: 46px;
    margin: 0 auto 20px;
    border-radius: 50%;
    border: 4px solid rgba(34,168,215,.18);
    border-top-color: var(--accent-strong);
    animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .gate-spinner { animation: none; border-top-color: var(--accent-strong); } }
@media (max-width: 620px) { .grid2 { grid-template-columns: 1fr; } .gate-shell { padding: 16px; } .gate-card { padding: 22px; } }
input[type="file"] { padding: 8px 10px; }
input[type="file"]::file-selector-button {
    margin-right: 10px;
    min-height: 34px;
    border: 1px solid #3a6270;
    border-radius: 8px;
    background: #153846;
    color: var(--text);
    padding: 6px 10px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.compact-form { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(143,203,224,.16); }
.facts-wrap { overflow-x: auto; }

/* Öffentliche Rootseite: ausschließlich Marke und dekorative Gate-Visualisierung. */
.gate-brand-page {
    min-height: 100vh;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 43%, rgba(0, 177, 255, .13), transparent 31%),
        radial-gradient(circle at 50% 88%, rgba(0, 149, 255, .08), transparent 34%),
        linear-gradient(180deg, #020912 0%, #04131d 49%, #01070c 100%);
}
.gate-brand-page::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .34;
    background-image:
        linear-gradient(rgba(75, 200, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(75, 200, 255, .035) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: linear-gradient(to bottom, transparent 0, #000 28%, #000 80%, transparent 100%);
}
.gate-brand-shell {
    position: relative;
    min-height: 100vh;
    display: grid;
    grid-template-rows: minmax(88px, .7fr) minmax(360px, 2.2fr);
    place-items: center;
    isolation: isolate;
    padding: clamp(22px, 4vw, 54px);
}
.gate-brand-lockup {
    position: relative;
    z-index: 8;
    align-self: end;
    text-align: center;
    padding-bottom: clamp(12px, 2vh, 28px);
}
.gate-brand-title {
    margin: 0;
    color: #f7fbff;
    font-size: clamp(38px, 7vw, 96px);
    line-height: .98;
    font-weight: 820;
    letter-spacing: .035em;
    text-transform: uppercase;
    text-shadow:
        0 1px 0 #7dc8eb,
        0 0 22px rgba(50, 191, 255, .24),
        0 12px 36px rgba(0, 0, 0, .75);
}
.gate-brand-title::after {
    content: "";
    display: block;
    width: min(560px, 68vw);
    height: 1px;
    margin: 18px auto 0;
    background: linear-gradient(90deg, transparent, rgba(43, 195, 255, .18) 15%, rgba(58, 203, 255, .9) 50%, rgba(43, 195, 255, .18) 85%, transparent);
    box-shadow: 0 0 16px rgba(47, 194, 255, .56);
}
.gate-brand-visual {
    position: relative;
    z-index: 1;
    width: min(1120px, 96vw);
    height: min(610px, 67vh);
    min-height: 380px;
    align-self: start;
    perspective: 1100px;
}
.gate-brand-stars {
    position: absolute;
    inset: -18% -10% 12%;
    opacity: .56;
    background-image:
        radial-gradient(circle, rgba(141, 225, 255, .85) 0 1px, transparent 1.3px),
        radial-gradient(circle, rgba(31, 173, 244, .55) 0 1px, transparent 1.4px);
    background-position: 0 0, 33px 41px;
    background-size: 92px 92px, 127px 127px;
    mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.8) 50%, transparent 100%);
    animation: gate-stars-drift 22s linear infinite;
}
.gate-brand-haze {
    position: absolute;
    top: 12%;
    width: 44%;
    height: 68%;
    border-radius: 50%;
    filter: blur(34px);
    opacity: .2;
    background: radial-gradient(circle, rgba(16, 176, 255, .62), rgba(0, 86, 140, .08) 55%, transparent 72%);
    animation: gate-haze-breathe 8s ease-in-out infinite alternate;
}
.gate-brand-haze--left { left: 1%; transform: rotate(-10deg); }
.gate-brand-haze--right { right: 1%; transform: rotate(10deg); animation-delay: -4s; }
.gate-brand-fortress {
    position: absolute;
    left: 50%;
    bottom: 11%;
    width: min(830px, 84vw);
    height: min(445px, 50vh);
    min-height: 290px;
    transform: translateX(-50%);
    filter: drop-shadow(0 24px 28px rgba(0,0,0,.7));
}
.gate-brand-fortress::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -16%;
    width: 62%;
    height: 34%;
    transform: translateX(-50%);
    clip-path: polygon(4% 100%, 8% 38%, 19% 38%, 22% 13%, 29% 13%, 33% 0, 39% 0, 43% 22%, 48% 22%, 50% 5%, 52% 22%, 57% 22%, 61% 0, 67% 0, 71% 13%, 78% 13%, 81% 38%, 92% 38%, 96% 100%);
    background: linear-gradient(180deg, #102a3b 0%, #071720 74%, #041018 100%);
    border-bottom: 1px solid rgba(62, 199, 255, .4);
    box-shadow: inset 0 -16px 28px rgba(0,0,0,.45), 0 0 30px rgba(22, 176, 242, .08);
}
.gate-brand-tower {
    position: absolute;
    bottom: 0;
    width: 21%;
    height: 88%;
    border: 1px solid rgba(66, 190, 238, .28);
    background:
        linear-gradient(90deg, rgba(61, 196, 255, .09), transparent 16% 84%, rgba(61, 196, 255, .07)),
        linear-gradient(180deg, #0b2431 0%, #07151e 48%, #030b11 100%);
    box-shadow: inset 0 0 0 5px rgba(0, 0, 0, .18), inset 0 0 34px rgba(0,0,0,.52);
    clip-path: polygon(10% 0, 86% 0, 100% 12%, 94% 100%, 0 100%, 5% 12%);
}
.gate-brand-tower::before,
.gate-brand-tower::after {
    content: "";
    position: absolute;
    left: 14%;
    right: 14%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(49, 195, 255, .8), transparent);
    box-shadow: 0 0 12px rgba(49, 195, 255, .42);
}
.gate-brand-tower::before { top: 18%; }
.gate-brand-tower::after { bottom: 20%; }
.gate-brand-tower span {
    position: absolute;
    inset: 31% 30% 43%;
    border: 1px solid rgba(60, 200, 255, .45);
    border-radius: 9px;
    background: linear-gradient(180deg, rgba(31, 171, 226, .12), rgba(0, 0, 0, .22));
    box-shadow: inset 0 0 16px rgba(42, 193, 255, .1), 0 0 12px rgba(29, 177, 237, .12);
}
.gate-brand-tower span::before,
.gate-brand-tower span::after {
    content: "";
    position: absolute;
    left: 22%;
    right: 22%;
    height: 1px;
    background: rgba(76, 209, 255, .64);
}
.gate-brand-tower span::before { top: 38%; }
.gate-brand-tower span::after { top: 58%; }
.gate-brand-tower i {
    position: absolute;
    top: 8%;
    left: 50%;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(67, 207, 255, .82);
    border-radius: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 20px rgba(38, 194, 255, .85), inset 0 0 8px rgba(38, 194, 255, .58);
    animation: gate-beacon 3.4s ease-in-out infinite;
}
.gate-brand-tower--left { left: 0; transform: skewY(1.2deg); }
.gate-brand-tower--right { right: 0; transform: scaleX(-1) skewY(1.2deg); }
.gate-brand-door {
    position: absolute;
    left: 15%;
    right: 15%;
    bottom: 0;
    height: 71%;
    overflow: hidden;
    border: 2px solid rgba(46, 196, 255, .52);
    border-radius: 24px 24px 8px 8px;
    background: linear-gradient(180deg, rgba(11, 37, 50, .96), rgba(3, 12, 18, .98));
    box-shadow:
        0 0 0 8px rgba(5, 25, 35, .9),
        0 0 0 10px rgba(55, 199, 255, .15),
        0 0 38px rgba(31, 177, 245, .22),
        inset 0 0 45px rgba(0, 0, 0, .78);
}
.gate-brand-door::before {
    content: "";
    position: absolute;
    inset: 7% 5%;
    border: 1px solid rgba(52, 199, 255, .3);
    clip-path: polygon(0 0, 100% 0, 94% 100%, 6% 100%);
    box-shadow: inset 0 0 22px rgba(45, 192, 255, .08);
}
.gate-brand-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    background:
        linear-gradient(135deg, transparent 0 27%, rgba(47, 193, 255, .16) 27.5% 28%, transparent 28.5% 52%, rgba(47, 193, 255, .11) 52.5% 53%, transparent 53.5%),
        linear-gradient(180deg, #0a2634 0%, #05151f 72%, #020a0f 100%);
}
.gate-brand-panel::before,
.gate-brand-panel::after {
    content: "";
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(51, 203, 255, .6), transparent);
    box-shadow: 0 0 8px rgba(51, 203, 255, .3);
}
.gate-brand-panel::before { left: 8%; right: 18%; top: 38%; transform: rotate(-12deg); }
.gate-brand-panel::after { left: 16%; right: 7%; top: 69%; transform: rotate(8deg); }
.gate-brand-panel--left { left: 0; border-right: 1px solid rgba(71, 211, 255, .18); }
.gate-brand-panel--right { right: 0; transform: scaleX(-1); border-right: 1px solid rgba(71, 211, 255, .18); }
.gate-brand-seam {
    position: absolute;
    z-index: 3;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, transparent, #5ad6ff 18%, #15b8f6 50%, #5ad6ff 82%, transparent);
    box-shadow: 0 0 8px #2bc7ff, 0 0 22px rgba(33, 191, 255, .82), 0 0 58px rgba(30, 174, 255, .5);
    animation: gate-seam-pulse 3.1s ease-in-out infinite;
}
.gate-brand-scan {
    position: absolute;
    z-index: 2;
    left: 4%;
    right: 4%;
    height: 13%;
    top: -16%;
    background: linear-gradient(180deg, transparent, rgba(49, 203, 255, .08), rgba(74, 214, 255, .24), transparent);
    filter: blur(.2px);
    animation: gate-scan 7.5s ease-in-out infinite;
}
.gate-brand-mark {
    position: absolute;
    z-index: 7;
    left: 50%;
    bottom: 17%;
    width: clamp(86px, 11vw, 132px);
    aspect-ratio: .84;
    transform: translateX(-50%);
    display: grid;
    place-items: center;
    clip-path: polygon(50% 0, 92% 17%, 87% 66%, 50% 100%, 13% 66%, 8% 17%);
    background: linear-gradient(145deg, #2bc9ff 0%, #0870ab 48%, #043454 100%);
    box-shadow: 0 0 38px rgba(31, 190, 255, .7);
    animation: gate-mark-breathe 4s ease-in-out infinite;
}
.gate-brand-mark::before {
    content: "";
    position: absolute;
    inset: 6px;
    clip-path: inherit;
    background: linear-gradient(145deg, rgba(8, 40, 61, .98), rgba(4, 20, 31, .98));
    box-shadow: inset 0 0 24px rgba(52, 206, 255, .22);
}
.gate-brand-mark span {
    position: relative;
    z-index: 2;
    color: #dff8ff;
    font-size: clamp(42px, 6.5vw, 74px);
    line-height: 1;
    font-weight: 900;
    font-style: italic;
    transform: skewX(-7deg);
    text-shadow: 0 0 10px rgba(83, 220, 255, .75), 0 0 28px rgba(31, 184, 255, .5);
}
.gate-brand-floor {
    position: absolute;
    left: 4%;
    right: 4%;
    bottom: -22%;
    height: 44%;
    transform: rotateX(68deg);
    transform-origin: center top;
    background-image:
        linear-gradient(rgba(41, 183, 235, .13) 1px, transparent 1px),
        linear-gradient(90deg, rgba(41, 183, 235, .1) 1px, transparent 1px),
        radial-gradient(ellipse at 50% 0, rgba(34, 191, 255, .22), transparent 58%);
    background-size: 54px 34px, 54px 34px, 100% 100%;
    border-top: 1px solid rgba(66, 208, 255, .28);
    box-shadow: 0 -10px 44px rgba(34, 191, 255, .08);
    opacity: .74;
}
@keyframes gate-stars-drift { to { background-position: 92px 46px, -94px 104px; } }
@keyframes gate-haze-breathe { from { opacity: .12; transform: translateY(8px) scale(.96); } to { opacity: .28; transform: translateY(-10px) scale(1.06); } }
@keyframes gate-beacon { 0%, 100% { opacity: .42; box-shadow: 0 0 8px rgba(38,194,255,.35), inset 0 0 6px rgba(38,194,255,.28); } 50% { opacity: 1; box-shadow: 0 0 26px rgba(38,194,255,.95), inset 0 0 11px rgba(38,194,255,.7); } }
@keyframes gate-seam-pulse { 0%, 100% { opacity: .56; filter: brightness(.88); } 50% { opacity: 1; filter: brightness(1.22); } }
@keyframes gate-scan { 0%, 12% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 75% { opacity: .72; } 88%, 100% { transform: translateY(880%); opacity: 0; } }
@keyframes gate-mark-breathe { 0%, 100% { filter: brightness(.92) drop-shadow(0 0 7px rgba(39,195,255,.3)); } 50% { filter: brightness(1.14) drop-shadow(0 0 19px rgba(39,195,255,.72)); } }
@media (prefers-reduced-motion: reduce) {
    .gate-brand-stars, .gate-brand-haze, .gate-brand-tower i, .gate-brand-seam, .gate-brand-scan, .gate-brand-mark { animation: none; }
    .gate-brand-scan { display: none; }
}
@media (max-width: 720px) {
    .gate-brand-shell { grid-template-rows: minmax(96px, .7fr) minmax(320px, 1.8fr); padding: 18px; }
    .gate-brand-title { font-size: clamp(34px, 10.5vw, 58px); letter-spacing: .02em; }
    .gate-brand-visual { width: 100vw; min-height: 330px; height: 56vh; }
    .gate-brand-fortress { width: 96vw; min-height: 265px; }
    .gate-brand-tower { width: 18%; }
    .gate-brand-door { left: 12%; right: 12%; }
    .gate-brand-mark { bottom: 18%; }
}
@media (max-height: 620px) and (min-width: 721px) {
    .gate-brand-shell { grid-template-rows: 116px 1fr; padding-block: 16px; }
    .gate-brand-title { font-size: clamp(34px, 6vw, 62px); }
    .gate-brand-visual { height: 68vh; min-height: 320px; }
    .gate-brand-fortress { height: 48vh; min-height: 270px; }
}