:root {
  --olive: #9ca469;
  /* V13 (WCAG AA): #9ca469 bleibt Markenton für Flächen/Rahmen; Schrift und Flächen unter weißer Schrift nutzen
     #6f7748 (4,76:1), Hover #4f5531 (7,85:1); kleine graue Texte OJ-Dunkelgrau #646363 (5,99:1). */
  --olive-action: #6f7748;
  --olive-action-strong: #4f5531;
  --charcoal: #252d3a;
  --grey: #646363;
  --line: #e4e8ed;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; color: var(--charcoal); background: #f7f8f9; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: inherit; }
.login-header { height: 68px; padding: 10px clamp(20px, 5vw, 76px); background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 2; }
.brand { display: inline-flex; align-items: center; gap: 13px; text-decoration: none; font-weight: 780; }
.brand img { width: 40px; height: 40px; object-fit: contain; }
.language-picker { min-height: 38px; padding: 0 11px; border: 1px solid #d9dfe6; border-radius: 9px; background: #fff; display: inline-flex; align-items: center; gap: 7px; }
.language-picker select { border: 0; outline: 0; background: transparent; color: #42516a; font: inherit; }
/* V13: die Auswahl selbst hat keine Umrandung; die Fokusmarkierung sitzt sichtbar am Rahmen (7,85:1 auf Weiß). */
.language-picker:focus-within { outline: 2px solid var(--olive-action-strong); outline-offset: 2px; }
.login-layout { min-height: calc(100vh - 126px); display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(440px, .92fr); }
.portal-visual { min-height: 650px; background-image: linear-gradient(0deg, rgba(28,35,44,.66), rgba(28,35,44,.08) 60%), var(--portal-image); background-size: cover; background-position: center; position: relative; }
.visual-overlay { position: absolute; left: clamp(28px, 6vw, 90px); right: 28px; bottom: clamp(34px, 8vh, 86px); color: #fff; display: grid; gap: 10px; }
/* V13: eigene dunkle Unterlage für die weiße Schrift, unabhängig vom Bildausschnitt (Bild und Verlauf bleiben). */
.visual-overlay { right: auto; max-width: calc(100% - clamp(28px, 6vw, 90px) - 28px); padding: 14px 18px; border-radius: 14px; background: rgba(28, 35, 44, .64); }
.visual-overlay span { font-size: 12px; font-weight: 800; letter-spacing: .15em; }
.visual-overlay strong { max-width: 620px; font-size: clamp(30px, 4vw, 54px); line-height: 1.05; letter-spacing: -.045em; }
.login-panel { padding: clamp(36px, 7vw, 96px); background: #fff; display: grid; place-items: center; }
.login-card { width: min(450px, 100%); }
/* V12: lange deutsche Wörter brechen um, statt Karte und Raster über den Viewport hinaus zu verbreitern. */
.login-card { overflow-wrap: anywhere; }
.back-link { display: inline-flex; margin-bottom: 46px; color: var(--grey); font-size: 13px; text-decoration: none; }
.back-link:hover { color: var(--olive-action); text-decoration: underline; }
.kicker { margin: 0 0 10px; color: var(--olive-action); font-size: 12px; font-weight: 850; letter-spacing: .14em; }
h1 { margin: 0; font-size: clamp(36px, 4.5vw, 52px); line-height: 1.02; letter-spacing: -.05em; }
.lead { margin: 18px 0 26px; color: #61718a; font-size: 16px; line-height: 1.65; }
.security-note { margin: 0 0 26px; padding: 14px 15px; border: 1px solid #e4e8da; border-radius: 11px; background: #fafbf6; color: #566033; display: flex; align-items: flex-start; gap: 10px; }
.security-note span { width: 22px; height: 22px; border-radius: 50%; background: var(--olive-action); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 900; flex: 0 0 auto; }
.security-note p { margin: 1px 0 0; font-size: 13px; line-height: 1.5; }
.primary-button, .secondary-button { min-height: 48px; border-radius: 9px; display: flex; align-items: center; justify-content: center; text-decoration: none; font-weight: 780; }
.primary-button[hidden], .secondary-button[hidden] { display: none; }
.primary-button { padding: 0 18px; background: var(--olive-action); color: #fff; justify-content: space-between; }
.primary-button:hover { background: var(--olive-action-strong); }
.secondary-button { margin-top: 11px; border: 1px solid #dce2e8; color: #4b5b71; }
.secondary-button:hover { border-color: var(--olive); color: var(--charcoal); }
.helper { margin: 15px 0 0; color: var(--grey); font-size: 12px; line-height: 1.55; text-align: center; }
.session-note { margin-top: 18px; padding: 12px 14px; border-radius: 9px; background: #f0f4e5; color: #52602e; font-size: 13px; line-height: 1.5; }
footer { min-height: 58px; padding: 16px clamp(20px, 5vw, 76px); border-top: 1px solid var(--line); background: #fff; color: var(--grey); font-size: 12px; display: flex; justify-content: space-between; gap: 18px; }
footer span:last-child { display: flex; gap: 18px; }
footer a { text-decoration: none; }

@media (max-width: 900px) {
  .login-layout { grid-template-columns: 1fr; }
  .portal-visual { min-height: 280px; }
  .visual-overlay strong { font-size: clamp(28px, 8vw, 42px); }
  .login-panel { padding: 46px 24px 64px; }
  .back-link { margin-bottom: 30px; }
}
@media (max-width: 540px) {
  #portal-title { font-size: clamp(24px, 7.2vw, 34px); }
  .brand span { display: none; }
  .language-picker { max-width: 170px; }
  .portal-visual { min-height: 220px; }
  footer { flex-direction: column-reverse; }
}