:root { --bg:#020617; --white:#f1f5f9; --text:#e5e7eb; --ember-soft:#ff7a55; }
* { box-sizing:border-box; } body { margin:0; background:var(--bg); color:var(--text); font:16px/1.5 Arial,sans-serif; } .glass { border:1px solid #ffffff30; border-radius:24px; background:#0a0e1a; }
.tor { position: fixed; inset: 0; z-index: 1000; display: none; place-items: center; padding: 20px; background: var(--bg); overflow: hidden; }
.gesperrt .tor, .tor--auf { display: grid; }
.tor--auf { pointer-events: none; animation: tor-auf .9s var(--ease) forwards; }
/* Bis app.js übernimmt, bleiben Wort und Startbild-Texte verborgen: kein Aufblitzen vor der Animation */
.motion:not(.app-da) .hero .wasser, .motion:not(.app-da) .hero .hero-in { opacity: 0; }
@keyframes tor-auf { to { opacity: 0; transform: scale(1.04); } }
.gesperrt, .gesperrt body { overflow: hidden; }
.gesperrt body > :not(.tor):not(script) { visibility: hidden; }
.tor__karte { position: relative; width: min(420px, 100%); padding: 34px 30px 22px; text-align: center; }
.tor__mono { display: block; width: 54px; height: auto; margin: 0 auto 18px; fill: var(--white); }
.tor__marke { margin: 0; font-size: 40px; font-weight: 600; letter-spacing: -.06em; line-height: 1; color: var(--white); }
.tor__sub { margin: 8px 0 26px; font-size: 13px; color: var(--text); }
.tor label { display: block; text-align: left; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text); margin-bottom: 8px; }
.tor__zeile { display: flex; gap: 8px; }
.tor input { flex: 1; min-width: 0; height: 48px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .28); background: rgba(2, 6, 23, .45); color: var(--white); font: inherit; font-size: 16px; letter-spacing: .18em; text-transform: uppercase; }
.tor input:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.tor button { height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--white); background: var(--white); color: #0b1020; font: inherit; font-weight: 600; cursor: pointer; transition: background-color .2s; }
.tor button:hover { background: #fff; }
.tor__hinweis { font-size: 12.5px; color: var(--text); margin: 14px 0 0; min-height: 1.6em; }
.tor__karte.falsch { animation: shake .45s var(--ease); }
.tor__karte.falsch .tor__hinweis { color: var(--ember-soft); }
@media (max-width: 480px) { .tor__zeile { flex-direction: column; } .tor input { flex: none; width: 100%; } .tor__karte { padding: 28px 22px 18px; } }