:root{color-scheme:dark;--bg:#0b1220;--panel:#121b2e;--text:#e8eefc;--muted:rgba(232,238,252,.75);--line:rgba(232,238,252,.12);--icon-line:rgba(180,190,205,.55);--frame:rgba(255,0,0,.95);--hover:rgba(255,0,0,.95)}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;padding:24px;color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Cantarell,"Noto Sans",Arial,sans-serif;background:radial-gradient(1000px 600px at 20% 10%,rgba(106,169,255,.25),transparent 60%),radial-gradient(900px 500px at 80% 90%,rgba(139,255,207,.18),transparent 55%),linear-gradient(180deg,#070b14,var(--bg))}
body.steinweb{--frame:rgba(106,169,255,.75);--hover:rgba(106,169,255,.75)}
.wrap{width:min(1100px,100%);margin:0 auto}
.frame{position:relative;border:1px solid var(--frame);border-radius:18px;padding:22px;background:var(--panel);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.toprow{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px;color:var(--muted);font-size:13px}
.toprow a,.footer a{color:var(--text);text-decoration:none;border-bottom:1px dotted rgba(232,238,252,.35)}
.toprow a:hover,.footer a:hover{border-bottom-color:rgba(232,238,252,.8)}
.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding-right:0;margin-bottom:14px;min-height:52px}
.brand-panel{display:flex;align-items:center;gap:12px;min-width:0}
.brand-panel-main{flex:0 1 600px}.brand-panel-portal{flex:0 0 auto}
.brand-panel h1,.brand-panel h2{margin:0;font-size:22px;line-height:1.15;letter-spacing:.2px}.brand-panel p{margin:2px 0 0;color:var(--muted);font-size:14px;line-height:1.25}
.brand-switch{display:inline-flex;flex:0 0 auto;text-decoration:none;border:0!important}
.brand-icon,.tile-icon{width:45px;height:45px;flex:0 0 45px;object-fit:contain;border-radius:11px;box-shadow:0 0 0 1px var(--icon-line)}
.hero-image{display:block;width:100%;max-height:400px;margin:0 0 18px;border-radius:14px;object-fit:cover}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
a.tile{display:flex;align-items:center;gap:12px;min-height:88px;padding:14px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:14px;color:var(--text);text-decoration:none;transition:border-color .2s ease,transform .15s ease}
a.tile:hover{border-color:var(--hover);transform:translateY(-1px)}
.tile-icon{width:45px;height:45px;flex-basis:45px;padding:4px;background:rgba(255,255,255,.04)}
.tile-copy{min-width:0}.tile-title{font-weight:700}.tile-desc,.tile-url{display:block;margin-top:3px;color:var(--muted);font-size:13px;line-height:1.35;word-break:break-word}
.tile-mark{display:grid;place-items:center;width:45px;height:45px;flex:0 0 45px;border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.06);font-size:12px;font-weight:800;letter-spacing:-.3px}
.footer{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:18px;color:var(--muted);font-size:13px}
.button{width:100%;margin-top:16px;padding:12px 14px;border:1px solid rgba(106,169,255,.55);border-radius:12px;background:linear-gradient(180deg,rgba(106,169,255,.28),rgba(106,169,255,.12));color:var(--text);font-weight:650;cursor:pointer}.button:hover{border-color:rgba(106,169,255,.9)}
.login-page{display:grid;place-items:center}.login-wrap{width:min(420px,100%)}.login-card{border:1px solid var(--line);border-radius:18px;padding:22px;background:var(--panel);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.login-card .brand{display:flex;align-items:center;gap:12px;margin-bottom:18px}.login-card h1{margin:0;font-size:22px}.subtitle{margin:3px 0 0;color:var(--muted);font-size:14px}
label{display:block;margin:12px 0 6px;color:var(--muted);font-size:13px}input{width:100%;padding:12px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.04);color:var(--text)}input:focus{outline:2px solid rgba(106,169,255,.4);border-color:rgba(106,169,255,.65)}
.error{padding:10px 12px;border:1px solid rgba(255,82,82,.45);border-radius:12px;background:rgba(255,82,82,.12);font-size:13px}
@media(max-width:900px){.topbar{padding-right:0;flex-wrap:wrap}.brand-panel-main{flex:1 1 100%}.brand-panel-portal{margin-left:auto}}
@media(max-width:560px){body{padding:12px}.frame{padding:16px}.grid{grid-template-columns:1fr}.hero-image{max-height:260px}}


/* Zurück-Navigation im Stil des Impressums */
.login-page .login-card .portal-back-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  color: #a7b0c0;
  font-size: 13px;
}
.login-page .login-card .portal-back-row a {
  color: #e8eefc;
  text-decoration: none;
  border-bottom: 1px dotted rgba(232, 238, 252, .35);
  word-break: break-word;
}
.login-page .login-card .portal-back-row a:hover {
  border-bottom-color: rgba(232, 238, 252, .75);
}
.login-page .login-card form .login-captcha {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 12px 0 14px;
}

.login-page .login-card form .login-captcha iframe {
  display: block;
  border: 0;
}

/* BEGIN CAPTCHA ALIGNMENT */

/* Formular auf Standard-hCaptcha-Breite begrenzen */
.login-page .login-card form {
    width: min(303px, 100%);
    margin-left: auto;
    margin-right: auto;
}

/* Eingabefelder und Button gleich breit */
.login-page .login-card form input:not([type="hidden"]),
.login-page .login-card form .button {
    width: 100%;
}

/* Captcha ohne zusätzlichen Rahmen */
.login-page .login-card form .login-captcha {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 12px 0 14px;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
}

/* Vorhandenen äußeren Captcha-Container neutralisieren */
.login-page .login-card form .captcha-shell {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.login-page .login-card form .login-captcha iframe {
    display: block;
    border: 0;
}

/* END CAPTCHA ALIGNMENT */

/* Captcha oberhalb des Benutzernamens */
.login-page .login-card form .login-captcha {
    margin-top: 4px;
    margin-bottom: 20px;
}

/* BEGIN CAPTCHA FULL WIDTH */

/* Ursprüngliche Formularbreite wiederherstellen */
.login-page .login-card form {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Eingabefelder und Button */
.login-page .login-card form input:not([type="hidden"]),
.login-page .login-card form .button {
    width: 100%;
}

/* Captcha mittig platzieren */
.login-page .login-card form .login-captcha {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 4px 0 20px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

/* Äußeren Container ohne Rahmen */
.login-page .login-card form .captcha-shell {
    display: block;
    flex: 0 0 373px;
    width: 373px;
    height: 96px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* hCaptcha proportional vergrößern */
.login-page .login-card form .h-captcha {
    display: block;
    width: 303px;
    height: 78px;
    transform: scale(1.23);
    transform-origin: top left;
}

/* hCaptcha iframe */
.login-page .login-card form .login-captcha iframe {
    display: block;
    border: 0;
}

/* Kleinere Displays */
@media (max-width: 460px) {
    .login-page .login-card form .captcha-shell {
        flex-basis: 303px;
        width: 303px;
        height: 78px;
    }

    .login-page .login-card form .h-captcha {
        transform: none;
    }
}

@media (max-width: 380px) {
    .login-page .login-card form .captcha-shell {
        flex-basis: 279px;
        width: 279px;
        height: 72px;
    }

    .login-page .login-card form .h-captcha {
        transform: scale(.92);
    }
}

/* END CAPTCHA FULL WIDTH */