/* Cockpit: Rahmen nach Entwurf E2 (design/entwurf-05). Nur lokale Schriften, keine externen Quellen. */
:root {
  --n9: #0D1340; --n8: #121B52; --pri: #2563D6; --bg: #F6F8FC; --line: #E3E8F2; --fg: #151E3A; --mut: #4A5470;
  --warn: #9A3412; --warnbg: #FFF4EC; --warnline: #F3C9A8; --ok: #166534;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); font-family: 'Inter', system-ui, 'Segoe UI', sans-serif; color: var(--fg);
       font-size: 14px; line-height: 1.45; }
a { color: #1B4FB8; }
:focus-visible { outline: 3px solid #4C9CF0; outline-offset: 2px; }

.rahmen { display: flex; flex-wrap: wrap; min-height: 100vh; }
nav.haupt { flex: 1 1 210px; max-width: 230px; background: var(--n9); color: #EEF2FA; padding: 18px 12px;
            display: flex; flex-direction: column; gap: 4px; }
.logo { display: flex; align-items: center; gap: 10px; padding: 4px 10px 20px;
        font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 16px; font-weight: 600; }
nav.haupt a { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: 8px;
              color: #D5DBF0; text-decoration: none; min-height: 44px; }
nav.haupt a[aria-current] { background: var(--pri); color: #fff; font-weight: 500; }
.domain { margin-top: auto; padding: 16px 12px 4px; font-size: 12px; color: #B4BEE0; }

.inhalt { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; }
header.kopf { background: var(--n8); color: #EEF2FA; padding: 10px 28px; min-height: 56px; display: flex; flex-wrap: wrap;
              align-items: center; justify-content: space-between; gap: 12px; }
main { padding: 20px 28px 32px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
h1 { margin: 0; font-size: 22px; font-weight: 600; color: var(--n8); }
.hinweis { background: var(--warnbg); border: 1px solid var(--warnline); color: var(--warn); border-radius: 10px;
           padding: 10px 14px; }
.demo-hinweis { margin: 0; padding: 8px 28px; background: var(--warnbg); border-bottom: 1px solid var(--warnline);
                color: var(--warn); font-size: 13px; }

.konto { display: flex; align-items: center; gap: 12px; font-size: 13px; color: #D5DBF0; }
.konto form { margin: 0; }
.konto button { font: inherit; min-height: 44px; padding: 6px 14px; border-radius: 8px; border: 1px solid #5B67A8;
                background: transparent; color: #EEF2FA; }
form.anmeldung { display: flex; flex-direction: column; gap: 8px; max-width: 360px; background: #fff;
                 border: 1px solid var(--line); border-radius: 12px; padding: 20px; }
form.anmeldung label { font-weight: 500; }
form.anmeldung input { font: inherit; min-height: 44px; padding: 8px 12px; border: 1px solid #9AA6C2; border-radius: 8px; }
form.anmeldung button { font: inherit; min-height: 44px; margin-top: 8px; border: 0; border-radius: 8px;
                        background: var(--pri); color: #fff; font-weight: 600; }

@media (max-width: 700px) {
  nav.haupt { max-width: none; flex-basis: 100%; flex-direction: row; flex-wrap: wrap; padding: 10px 12px; }
  .logo { padding: 4px 10px; }
  .domain { display: none; }
  header.kopf, main { padding-left: 16px; padding-right: 16px; }
}