/* Rahmen (Header, Footer, Farben) – übernommen von der neuen Website 2026 (Theme esd-2026):
   Blau #002f6c, Rot #ff0000 als Signal, Neue Haas Unica (Typekit srq7vmz). Gilt für Formular und Datenschutzseite. */

:root {
  --blue: #002f6c;
  --blue-deep: #001d42;
  --blue-soft: #e8eef7;
  --red: #ff0000;
  --nav-h: 72px;
  --gutter: clamp(16px, 4vw, 56px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}
body { background: #fff; }
::selection { background: var(--blue); color: #fff; }

/* Header: immer Weiß auf Blau */
.site-nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--blue); color: #fff;
}
.site-nav .bar {
  height: var(--nav-h); padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand { display: flex; align-items: center; gap: 14px; color: #fff; text-decoration: none; }
.brand .word { font-weight: 800; letter-spacing: .04em; font-size: 15px; text-transform: uppercase; white-space: nowrap; }
.brand .sub {
  font-weight: 300; font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  border-left: 1px solid rgba(255,255,255,.35); padding-left: 14px; opacity: .85; white-space: nowrap;
}
.heart { fill: currentColor; display: block; }
.brand .heart { width: 34px; height: 34px; flex: none; }
.site-nav .meta-right { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); font-size: 14px; font-weight: 600; }
.site-nav .step-info { color: rgba(255,255,255,.75); font-weight: 300; font-variant-numeric: tabular-nums; white-space: nowrap; }
.site-nav .auth-info { color: rgba(255,255,255,.75); font-weight: 300; }
.site-nav .auth-info a { color: #fff; font-weight: 600; text-decoration: none; cursor: pointer; border-bottom: 1.5px solid rgba(255,255,255,.5); }
.site-nav .auth-info a:hover { border-color: #fff; }
.site-nav a.back { color: #fff; text-decoration: none; position: relative; padding: 6px 0; }
.site-nav a.back::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.site-nav a.back:hover::after { transform: scaleX(1); }

/* Sprachumschalter als Pille: zeigt nur die jeweils andere Sprache */
.lang-switch { display: flex; }
.lang-switch a {
  font-size: 12px; font-weight: 600; letter-spacing: .14em; line-height: 1; color: #fff; text-decoration: none; cursor: pointer;
  border: 1.5px solid rgba(255,255,255,.5); border-radius: 999px; padding: 6px 10px;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.lang-switch a:hover { background: #fff; color: var(--blue); }
.lang-switch a.active { display: none; }
.lang-switch .sep { display: none; }

/* Fortschritt: rote Linie an der Unterkante der Leiste */
#progress { height: 3px; background: rgba(255,255,255,.15); }
#progress-bar { height: 100%; background: var(--red); width: 0%; transition: width .35s var(--ease); }

/* Footer: Blau, Herz + Spalten wie auf der Website */
.site-footer { background: var(--blue); color: #fff; padding: clamp(40px, 5vw, 64px) var(--gutter) 28px; font-size: 15px; font-weight: 300; line-height: 1.5; }
.site-footer .cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; max-width: 1440px; margin: 0 auto; }
.site-footer .heart { width: 44px; height: 44px; margin-bottom: 20px; fill: #fff; }
.site-footer strong { font-weight: 600; }
.site-footer h4 { font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; margin: 0 0 14px; opacity: .7; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { padding: 3px 0; margin: 0; font-size: 15px; line-height: 1.5; }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer p { margin: 0; font-size: 15px; line-height: 1.5; }
.site-footer .bottom {
  max-width: 1440px; margin: 40px auto 0; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.2);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 13px; opacity: .8;
}

@media (max-width: 820px) {
  .site-footer .cols { grid-template-columns: 1fr 1fr; }
  .site-footer .cols > :first-child { grid-column: 1 / -1; }
  .brand .sub { display: none; }
}
@media (max-width: 560px) {
  :root { --nav-h: 60px; }
  .brand .word { font-size: 13px; }
  .brand .heart { width: 28px; height: 28px; }
  .site-nav .auth-info .auth-mail { display: none; }
  .site-nav .step-info { display: none; }
  .site-nav .back-txt { display: none; }
}
@media (max-width: 340px) {
  .brand .word { display: none; }
}