/* ===========================================================================
   Nordvest Kundenportal — Beispiel-Anmeldeseite (DEMO)

   Four drastically different treatments of ONE piece of markup. Everything that
   changes between them is in the four [data-variant] blocks at the bottom;
   the sections above are the shared skeleton.

   Structure of this file
     1. tokens + reset          the variables every variant overrides
     2. demo chrome             the variant switcher (NOT part of the design)
     3. stage / panel / card    shared layout
     4. logo, type, form        shared components
     5. VARIANT: klassisch      warm, photographic, gold on navy
     6. VARIANT: split          brand panel left, form right
     7. VARIANT: editorial      no card, hairlines, generous whitespace
     8. VARIANT: freundlich     warm, soft, rounded, pill button
     9. responsive + a11y

   System fonts only, no webfonts, no external requests — the file works opened
   straight from disk, which matters when this is shown on someone else's laptop
   in a meeting room with no wifi.
   =========================================================================== */

/* ============================ 1. tokens + reset ========================== */

:root {
  /* Overridden wholesale by each variant block. The values here are only the
     starting point for "klassisch". */
  --bg: #0b1a2e;
  --ink: #1a1f28;
  --ink-soft: #5c6472;
  --accent: #d6b26e;
  --primary: #0b1a2e;
  --primary-hover: #162943;
  --surface: #ffffff;
  --line: #d9dce2;
  --line-strong: #b7bcc6;
  --radius: 4px;
  --card-width: 436px;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-serif: Georgia, "Iowan Old Style", "Times New Roman", Times, serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--bg);
  color: var(--ink);
  font: 400 15px/1.55 var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

.backdrop { position: fixed; inset: 0; z-index: -1; }

/* --------------------------------- motion ---------------------------------
   Everything here animates ONLY opacity and transform, which the compositor
   handles without laying the page out again. Nothing animates width, height,
   padding or colour, so none of it costs a frame on a slow laptop in a meeting
   room.

   WHY THE CROSSFADE EXISTS — it is a fix, not decoration.

   The version before this transitioned background-color / color / border-color
   over 250ms on the swap. That looked broken, and it had to: the variants also
   differ in padding, text alignment, card width, border-radius and the
   background IMAGE, and not one of those interpolates. So the layout snapped
   instantly while the colours crawled, and for a quarter of a second the page
   was half one design and half the other.

   Fading the whole page out for ~180ms, swapping while it is invisible, and
   fading back in hides every one of those jumps behind a single motion. The
   demo chrome deliberately does NOT fade — the menu label updates the moment
   you click, so the control still feels immediate. */

body { transition: background-color 300ms ease; }
.backdrop { transition: opacity 190ms ease; }
.stage { transition: opacity 190ms ease, transform 190ms ease; }

[data-switching="true"] .backdrop { opacity: 0; }
[data-switching="true"] .stage { opacity: 0; transform: translateY(8px); }

/* Entrance. Runs on load, and again for .panel whenever "split" brings it back
   from display:none — leaving display:none restarts a CSS animation, which is
   exactly the behaviour wanted here. */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.card   { animation: rise-in 460ms cubic-bezier(0.22, 0.68, 0.32, 1) both; }
/* No rise on .panel: leaving display:none restarts the animation, so switching
   into Split slid the whole left column up WHILE the crossfade was fading it
   in — two motions doing the same job, which read as a stutter. The crossfade
   alone is enough. */
.footer { animation: rise-in 460ms cubic-bezier(0.22, 0.68, 0.32, 1) 90ms both; }

/* Micro-interactions on the controls. Short enough to read as feedback rather
   than as animation. */
.input  { transition: border-color 140ms ease, box-shadow 140ms ease,
                      background-color 140ms ease; }
.submit { transition: background-color 140ms ease, box-shadow 140ms ease,
                      transform 90ms ease; }
.submit:active { transform: translateY(1px); }
.reveal, .links a { transition: color 140ms ease, border-color 140ms ease; }

/* ------------------------------- loader ---------------------------------
   Shown from the very first paint (no JS needed to make it appear) and taken
   away by demo.js once the artwork has loaded. It sits on the variant's own
   background colour, so what the visitor sees is the page's colour with a
   spinner on it rather than a white flash followed by the design. */

.loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  transition: opacity 320ms ease, visibility 320ms;
}

.loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader__spinner {
  width: 30px;
  height: 30px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--accent);
  opacity: 0.85;
  animation: spin 720ms linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ============================= 2. demo chrome ============================ */
/* Dark glass, so one treatment stays legible over all five variants — including
   the two light ones. Fixed, above everything, and visually separate from the
   page so nobody mistakes it for part of the client's login screen. */

.chrome {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
}

.chrome__badge {
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(10, 14, 22, 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.switcher { position: relative; }

.switcher__button {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 13px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  background: rgba(10, 14, 22, 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.switcher__button:hover {
  background: rgba(10, 14, 22, 0.86);
  border-color: rgba(255, 255, 255, 0.3);
}

.switcher__button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.switcher__icon { width: 13px; height: 13px; fill: rgba(255, 255, 255, 0.6); flex: none; }
.switcher__label { color: rgba(255, 255, 255, 0.6); }

.switcher__current {
  padding-left: 9px;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  font-weight: 600;
}

.switcher__chevron {
  width: 11px; height: 11px; flex: none;
  color: rgba(255, 255, 255, 0.55);
  transition: transform 0.18s ease;
}

.switcher__button[aria-expanded="true"] .switcher__chevron { transform: rotate(180deg); }

.switcher__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 340px;
  max-width: calc(100vw - 32px);
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: rgba(12, 16, 24, 0.94);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}

.switcher__menu[hidden] { display: none; }

/* Opening the menu takes it out of display:none, which is what starts this. */
@keyframes menu-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

.switcher__menu {
  transform-origin: top right;
  animation: menu-in 140ms cubic-bezier(0.22, 0.68, 0.32, 1);
}

.switcher__hint {
  margin: 4px 8px 8px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 11.5px;
  line-height: 1.45;
}

.option {
  display: flex;
  gap: 11px;
  width: 100%;
  padding: 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.option:hover { background: rgba(255, 255, 255, 0.07); }
.option:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.option[aria-checked="true"] { background: rgba(255, 255, 255, 0.11); }

.option__swatch {
  display: flex;
  flex: none;
  width: 34px; height: 34px;
  margin-top: 2px;
  border-radius: 7px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.option__swatch i { flex: 1; }
.option__text { display: block; min-width: 0; }

.option__name {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 600;
}

.option__name kbd {
  padding: 1px 5px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.55);
  font: 500 10px/1.5 var(--font-sans);
}

.option__desc {
  display: block;
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  line-height: 1.45;
}

/* ----------------------------- disclaimer --------------------------------
   Demo chrome, not page content: same dark glass as the switcher so it reads
   as a label attached to the demo rather than as small print inside the
   client's design. Fixed bottom right — the one corner free in all five
   variants. It is never hidden, at any width; on the narrowest screens it
   drops the icon and shortens rather than disappearing, because it is the
   thing that keeps the invented companies honest. */

.disclaimer {
  position: fixed;
  right: 16px;
  bottom: 14px;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 340px;
  margin: 0;
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 9px;
  background: rgba(10, 14, 22, 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, 0.62);
  font-family: var(--font-sans);
  font-size: 11.5px;
  line-height: 1.45;
  animation: rise-in 460ms cubic-bezier(0.22, 0.68, 0.32, 1) 220ms both;
}

.disclaimer strong { color: rgba(255, 255, 255, 0.9); font-weight: 600; }

.disclaimer__icon {
  width: 13px;
  height: 13px;
  flex: none;
  margin-top: 1px;
  color: rgba(255, 255, 255, 0.5);
}

/* ======================= 3. stage / panel / card ========================= */

.stage { min-height: 100vh; display: flex; }

.panel { display: none; }      /* only "split" turns this on */

.main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* "safe center" centres the card but falls back to start-alignment when the
     content is taller than the viewport, so the top of the card never ends up
     above the scroll origin where it cannot be reached. */
  justify-content: center;
  justify-content: safe center;
  gap: 22px;
  padding: 40px 20px;
}

.card {
  position: relative;
  width: 100%;
  max-width: var(--card-width);
  background: var(--surface);
  border-radius: 8px;
  padding: 46px 46px 34px;
}

.footer { font-size: 12px; text-align: center; }

/* ====================== 4. logo, type, form ============================== */

.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 22px;
}

/* `color`, not `fill`: the mark's paths carry fill="currentColor" /
   stroke="currentColor" as presentation attributes, and an element's own
   presentation attribute beats an INHERITED css `fill` from the parent <svg>.
   Setting the colour is what actually reaches them, and it works for the
   stroke-based marks (Vierbaum, Helvron, Seehaus) as well as the filled ones. */
.logo__mark { width: 34px; height: 34px; flex: none; color: var(--accent); }
.logo__text { display: block; line-height: 1.1; }

.logo__word {
  display: block;
  font-family: var(--font-serif);
  font-size: 25px;
  letter-spacing: 0.005em;
  color: var(--primary);
}

.logo__sub {
  display: block;
  margin-top: 3px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--primary);
  text-align: center;
}

.subtitle {
  margin: 7px 0 0;
  font-size: 13px;
  color: var(--ink-soft);
  text-align: center;
}

.rule {
  width: 46px;
  height: 1px;
  margin: 22px auto 26px;
  border: 0;
  background: var(--accent);
}

.field { margin-bottom: 18px; }

.label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
}

.input-wrap { position: relative; }

.input {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}

.input::placeholder { color: var(--ink-soft); opacity: 0.6; }
.input--with-button { padding-right: 46px; }
.input:hover { border-color: var(--line-strong); }

.input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent);
}

.reveal {
  position: absolute;
  top: 1px; right: 1px; bottom: 1px;
  width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0 var(--radius) var(--radius) 0;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
}

.reveal:hover { color: var(--accent); }
.reveal:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.reveal__icon { width: 20px; height: 20px; }
.reveal__eye { fill: currentColor; }

.reveal__slash {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  display: none;
}

.reveal[aria-pressed="true"] .reveal__slash { display: inline; }

.submit {
  width: 100%;
  margin-top: 8px;
  padding: 13px 16px;
  border: 0;
  border-radius: var(--radius);
  background: var(--primary);
  color: #fff;
  font: inherit;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.submit:hover { background: var(--primary-hover); }
.submit:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.notice {
  margin: 14px 0 0;
  padding: 9px 12px;
  border-left: 2px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--ink-soft);
  font-size: 12.5px;
}

.notice[hidden] { display: none; }

.links { margin: 22px 0 0; text-align: center; font-size: 13px; }

.links a {
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1px;
}

.links a:hover { color: var(--accent); }
.links a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ====================== shared brand-panel skeleton ======================= */
/* Only "split" switches this on, but the rules live here so the variant block
   stays a list of decisions rather than a second layout engine. */

.panel {
  position: relative;
  flex: 0 0 46%;
  max-width: 620px;
  flex-direction: column;
  justify-content: flex-end;
  gap: 26px;
  padding: 56px;
  overflow: hidden;
  color: #fff;
}

.panel__mark {
  position: absolute;
  top: -70px;
  right: -90px;
  width: 420px;
  height: 420px;
  color: #fff;
  opacity: 0.09;
  pointer-events: none;
}

.panel__body { position: relative; }

.panel__eyebrow {
  margin: 0 0 18px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.panel__claim {
  margin: 0;
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.015em;
}

.panel__note {
  margin: 18px 0 0;
  max-width: 42ch;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.68);
}

.panel__foot {
  position: relative;
  margin: 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.42);
}

/* ========================= 5. VARIANT: klassisch ========================= */
/* Private-bank register: photographic field, one white card floating on it,
   gold used exactly twice. The closest of the five to the screens we have
   actually shipped. */

[data-variant="klassisch"] {
  --bg: #0b1a2e;
  --primary: #0b1a2e;
  --primary-hover: #17304e;
  --accent: #d6b26e;
  --surface: #ffffff;
  --ink: #1a1f28;
  --ink-soft: #5c6472;
  --line: #d9dce2;
  --line-strong: #b7bcc6;
  --radius: 4px;
  --card-width: 436px;
}

[data-variant="klassisch"] .backdrop {
  background: url("bg-klassisch.svg") center/cover no-repeat, #0b1a2e;
}

[data-variant="klassisch"] .card {
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(3, 12, 26, 0.16), 0 18px 48px rgba(3, 12, 26, 0.34);
}

/* the one full-strength stroke of gold */
[data-variant="klassisch"] .card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #ab8b52, #d6b26e, #ab8b52);
}

[data-variant="klassisch"] .footer {
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

/* =========================== 6. VARIANT: split =========================== */
/* Brand panel carries the image and the claim; the form sits on plain white
   with nothing around it. The layout does the work, so the form needs no card. */

[data-variant="split"] {
  --bg: #ffffff;
  --primary: #0d3b52;
  --primary-hover: #14556f;
  --accent: #22a5bd;
  --surface: #ffffff;
  --ink: #16222b;
  --ink-soft: #5d6f7a;
  --line: #d3dde2;
  --line-strong: #a9bcc5;
  --radius: 6px;
  --card-width: 392px;
}

[data-variant="split"] .backdrop { background: #ffffff; }
[data-variant="split"] .panel { display: flex; background: url("bg-split.svg") center/cover no-repeat, #0d3b52; }

[data-variant="split"] .main { padding: 48px 40px; }
[data-variant="split"] .card { padding: 0; border-radius: 0; background: transparent; }

/* Left-aligned throughout — the panel already supplies the symmetry. */
[data-variant="split"] .logo { justify-content: flex-start; margin-bottom: 34px; }
[data-variant="split"] .logo__word { font-family: var(--font-sans); font-weight: 700; font-size: 23px; letter-spacing: -0.015em; }
[data-variant="split"] .logo__sub { letter-spacing: 0.18em; }
[data-variant="split"] .title { text-align: left; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
[data-variant="split"] .subtitle { text-align: left; margin-top: 9px; font-size: 14px; }
[data-variant="split"] .rule { display: none; }
[data-variant="split"] .form { margin-top: 30px; }
[data-variant="split"] .input { padding: 12px 14px; }
[data-variant="split"] .submit { padding: 14px 16px; letter-spacing: 0.01em; }
[data-variant="split"] .links { text-align: left; }
[data-variant="split"] .footer { display: none; }

/* ========================= 7. VARIANT: editorial ========================= */
/* No card, no boxes: rules instead of borders, and a large serif heading doing
   the work a logo does elsewhere. The quietest of the five. */

[data-variant="editorial"] {
  --bg: #f6f4ef;
  --primary: #1b1a17;
  --primary-hover: #000000;
  --accent: #8a7f6a;
  --surface: transparent;
  --ink: #1b1a17;
  --ink-soft: #7b7466;
  --line: #cfc9bb;
  --line-strong: #1b1a17;
  --radius: 0;
  --card-width: 372px;
}

[data-variant="editorial"] .backdrop {
  background:
    radial-gradient(120% 80% at 50% 0%, #fffdf9 0%, rgba(255, 253, 249, 0) 55%),
    #f6f4ef;
}

[data-variant="editorial"] .card { padding: 0; background: transparent; }

[data-variant="editorial"] .logo { flex-direction: column; gap: 14px; margin-bottom: 30px; }
[data-variant="editorial"] .logo__mark { width: 26px; height: 26px; color: #1b1a17; }
[data-variant="editorial"] .logo__text { text-align: center; }
[data-variant="editorial"] .logo__word {
  font-family: var(--font-serif);
  font-size: 21px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
[data-variant="editorial"] .logo__sub { margin-top: 6px; letter-spacing: 0.28em; font-weight: 400; }

[data-variant="editorial"] .title {
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -0.01em;
}
[data-variant="editorial"] .subtitle { margin-top: 10px; font-size: 13.5px; }
[data-variant="editorial"] .rule { width: 100%; margin: 30px 0; background: var(--line); }

/* underline inputs — the single biggest visual departure in this file */
[data-variant="editorial"] .label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
[data-variant="editorial"] .field { margin-bottom: 26px; }
[data-variant="editorial"] .input {
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  font-size: 16px;
}
[data-variant="editorial"] .input--with-button { padding-right: 36px; }
[data-variant="editorial"] .input:hover { border-bottom-color: var(--ink-soft); }
[data-variant="editorial"] .input:focus {
  border-bottom-color: var(--primary);
  box-shadow: 0 1px 0 0 var(--primary);
}
[data-variant="editorial"] .reveal { right: 0; width: 32px; }

[data-variant="editorial"] .submit {
  margin-top: 4px;
  padding: 15px 16px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

[data-variant="editorial"] .links { margin-top: 26px; font-size: 12.5px; }
[data-variant="editorial"] .links a { border-bottom-color: var(--line-strong); }
[data-variant="editorial"] .footer { color: var(--ink-soft); }

/* ========================= 8. VARIANT: freundlich ======================== */
/* The warm, approachable one, and the only variant in the set with no hard
   geometry anywhere: soft cream ground, a big rounded card, rounded inputs and
   a pill button. Everything else here is architectural (Klassisch, Split,
   Editorial) or photographic (Vollbild), which is precisely why this one is
   not — it is aimed at Handwerk, Praxis, Verein and Mittelstand clients, who
   are badly served by all four of the others.

   Note the radii: 20px on the card and 999px on the button do most of the
   work. Softness here is a shape decision, not a colour one. */

[data-variant="freundlich"] {
  --bg: #f2efe7;
  --primary: #2f6b4f;
  --primary-hover: #3a8060;
  --accent: #5f9a7a;
  --surface: #ffffff;
  --ink: #24302a;
  --ink-soft: #6a7369;
  --line: #dedbd0;
  --line-strong: #bdbaad;
  --radius: 10px;
  --card-width: 452px;
}

[data-variant="freundlich"] .backdrop {
  background: url("bg-freundlich.svg") center/cover no-repeat, #f2efe7;
}

[data-variant="freundlich"] .card {
  border-radius: 22px;
  padding: 48px 46px 36px;
  box-shadow: 0 2px 4px rgba(45, 58, 48, 0.05),
              0 16px 44px rgba(45, 58, 48, 0.10);
}

/* Mark above the wordmark rather than beside it, and larger — a friendly mark
   is worth showing at a size where it reads. */
[data-variant="freundlich"] .logo { flex-direction: column; gap: 12px; margin-bottom: 20px; }
[data-variant="freundlich"] .logo__mark { width: 44px; height: 44px; }
[data-variant="freundlich"] .logo__text { text-align: center; }
[data-variant="freundlich"] .logo__word {
  font-family: var(--font-sans);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--primary);
}
[data-variant="freundlich"] .logo__sub {
  margin-top: 5px;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--accent);
}

[data-variant="freundlich"] .title { font-size: 21px; font-weight: 700; letter-spacing: -0.015em; }
[data-variant="freundlich"] .subtitle { margin-top: 8px; font-size: 13.5px; }

[data-variant="freundlich"] .rule {
  width: 34px;
  height: 3px;
  border-radius: 999px;
  margin: 24px auto 28px;
  background: var(--accent);
  opacity: 0.5;
}

[data-variant="freundlich"] .label { font-weight: 600; color: var(--ink); }
[data-variant="freundlich"] .field { margin-bottom: 20px; }

[data-variant="freundlich"] .input {
  padding: 13px 15px;
  background: #fbfaf6;
  border-color: var(--line);
}
[data-variant="freundlich"] .input--with-button { padding-right: 48px; }
[data-variant="freundlich"] .input:focus { background: #fff; }

/* Pill button, and roomier than the others — the single loudest signal that
   this design is meant to feel approachable rather than formal. */
[data-variant="freundlich"] .submit {
  margin-top: 10px;
  padding: 15px 18px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 6px 16px rgba(47, 107, 79, 0.22);
}
[data-variant="freundlich"] .submit:hover { box-shadow: 0 8px 20px rgba(47, 107, 79, 0.28); }

[data-variant="freundlich"] .links { margin-top: 20px; }
[data-variant="freundlich"] .links a { border-bottom-color: rgba(95, 154, 122, 0.55); }
[data-variant="freundlich"] .footer { color: var(--ink-soft); }

/* ========================== 9. VARIANT: vollbild ========================= */
/* No card at all. The form stands directly in the image, bottom-left, with
   translucent inputs. The most image-forward of the five and the one that
   depends most on the client supplying a good photograph. */

[data-variant="vollbild"] {
  --bg: #2b1f18;
  --primary: #ffffff;
  --primary-hover: #f2e6d8;
  --accent: #e8a06a;
  --surface: transparent;
  --ink: #f7f1e8;
  --ink-soft: rgba(247, 241, 232, 0.66);
  --line: rgba(247, 241, 232, 0.34);
  --line-strong: rgba(247, 241, 232, 0.62);
  --radius: 3px;
  --card-width: 396px;
}

[data-variant="vollbild"] .backdrop {
  background: url("bg-vollbild.svg") center/cover no-repeat, #2b1f18;
}

/* bottom-left composition instead of dead-centre */
[data-variant="vollbild"] .main {
  align-items: flex-start;
  justify-content: flex-end;
  justify-content: safe flex-end;
  padding: 60px clamp(24px, 7vw, 110px) 56px;
  gap: 34px;
}

[data-variant="vollbild"] .card { padding: 0; background: transparent; }

[data-variant="vollbild"] .logo { justify-content: flex-start; margin-bottom: 26px; }
[data-variant="vollbild"] .logo__mark { color: var(--accent); }
[data-variant="vollbild"] .logo__word { font-family: var(--font-serif); font-size: 26px; color: #fff; letter-spacing: 0.01em; }
[data-variant="vollbild"] .logo__sub { color: rgba(247, 241, 232, 0.6); }

[data-variant="vollbild"] .title {
  text-align: left;
  font-family: var(--font-serif);
  font-size: clamp(30px, 3.4vw, 40px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: #fff;
}
[data-variant="vollbild"] .subtitle { text-align: left; margin-top: 12px; font-size: 14.5px; max-width: 34ch; }
[data-variant="vollbild"] .rule { display: none; }
[data-variant="vollbild"] .form { margin-top: 30px; }

[data-variant="vollbild"] .label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* frosted glass inputs — legible over any photograph, unlike plain white ones */
[data-variant="vollbild"] .input {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--line);
  color: #fff;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
[data-variant="vollbild"] .input::placeholder { color: rgba(255, 255, 255, 0.5); }
[data-variant="vollbild"] .input:hover { border-color: var(--line-strong); }
[data-variant="vollbild"] .input:focus {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: none;
}
[data-variant="vollbild"] .reveal { color: rgba(255, 255, 255, 0.7); }
[data-variant="vollbild"] .reveal:hover { color: #fff; }

[data-variant="vollbild"] .submit {
  color: #2b1f18;
  font-weight: 700;
  letter-spacing: 0.06em;
}

[data-variant="vollbild"] .links { text-align: left; }
[data-variant="vollbild"] .links a { color: #fff; border-bottom-color: var(--accent); }
[data-variant="vollbild"] .footer {
  align-self: flex-start;
  color: rgba(255, 255, 255, 0.55);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
[data-variant="vollbild"] .notice { color: rgba(255, 255, 255, 0.8); }

/* ========================= 10. responsive + a11y ========================= */

/* The split panel is the only variant with a layout that cannot survive a
   narrow screen: below this width it stops being a panel and the page falls
   back to the single-column shape the other four already use. */
@media (max-width: 900px) {
  [data-variant="split"] .panel { display: none; }
  [data-variant="split"] .main { padding: 44px 24px; }
  [data-variant="split"] .card { max-width: 420px; }
}

@media (max-width: 560px) {
  .main { padding: 26px 16px; }
  .card { padding: 34px 24px 26px; }
  [data-variant="editorial"] .card,
  [data-variant="split"] .card,
  [data-variant="vollbild"] .card { padding: 0; }
  [data-variant="vollbild"] .main { padding: 40px 22px 34px; }
  .chrome { top: 10px; right: 10px; }
  .chrome__badge { display: none; }
  .switcher__label { display: none; }

  /* Narrow screens: the disclaimer shrinks and spans the width, but is never
     removed — it is the one piece of chrome that has to survive. */
  .disclaimer {
    left: 10px;
    right: 10px;
    bottom: 10px;
    max-width: none;
    font-size: 10.5px;
    padding: 8px 10px;
  }
  .disclaimer__icon { display: none; }
}

/* Short windows: stop centring so the top of the form stays reachable. */
@media (max-height: 660px) {
  .main { justify-content: flex-start; }
}

/* The old rule killed transitions but left the keyframe animations running.
   demo.js checks the same media query and skips the crossfade delay entirely,
   so a variant swap is instant rather than briefly invisible. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* Exempt: the blanket rule above would freeze the spinner as a static broken
     ring. A loading indicator is feedback rather than decoration, so it keeps
     turning — just more slowly. */
  .loader__spinner {
    animation-duration: 1100ms !important;
    animation-iteration-count: infinite !important;
  }
}

@media (forced-colors: active) {
  .card { border: 1px solid CanvasText; }
  .submit { border: 1px solid ButtonText; }
}