/* =========================================================
   R+V KwK Landingpage – Bankenverteiler
   Vorlage für den MPP.360 HTML Service

   Desktop 1:1 ausgemessen am Export 1442x1236, mobil am Screenshot
   250x1225 (Faktor 1,61, also etwa +-1,6px genau). Stand 2026-08-21.
   Noch geschaetzt: Schriftgrad der Ziffer im Kreis, Lage des KwK-Herzens
   auf dem mobilen Key-Visual.
   ========================================================= */

/* ---------- Schriften ---------- */
@font-face { font-family:"RuV Sans"; src:url("https://www.kwk-bank.de/assets/lp/bankenverteiler/fonts/RuVSans-Regular.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"RuV Sans"; src:url("https://www.kwk-bank.de/assets/lp/bankenverteiler/fonts/RuVSans-Bold.woff2")    format("woff2"); font-weight:700; font-display:swap; }
@font-face { font-family:"RuV Slab"; src:url("https://www.kwk-bank.de/assets/lp/bankenverteiler/fonts/RuVSlab-Bold.woff2")    format("woff2"); font-weight:700; font-display:swap; }

/* ---------- Tokens (gleich wie Standalone/GA) ---------- */
:root{
  --ruv-blau:#011957;
  --ruv-mint:#00dcdc;
  --ruv-mint-dunkel:#109da8;
  --ruv-grey:#f5f5f5;
  --linien-grau:#cdcdcd;
  --ruv-orange-light:#eb6504;
  --ruv-orange-dark:#f79506;
  --content:1128px;   /* 1080 Inhalt + 2x24 Rand */
  --font:"RuV Sans",Arial,Helvetica,sans-serif;
  --font-slab:"RuV Slab","RuV Sans",Georgia,serif;
}

/* ---------- Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-weight:400;color:var(--ruv-blau);background:#fff;font-size:26px;line-height:40px}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.wrap{max-width:var(--content);margin:0 auto;padding:0 24px;position:relative}
.c-orange{color:var(--ruv-orange-light)}
/* Auf der dunkelblauen Fläche nutzt das Design den helleren Orangeton */
.hero .c-orange{color:var(--ruv-orange-dark)}
.d-only{display:inline}
.m-only{display:none}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- CTA ---------- */
.cta{display:inline-flex;align-items:center;justify-content:center;text-align:center;
  min-height:61px;padding:8px 16px;border-radius:12px;text-decoration:none;
  font-weight:700;font-size:22px;line-height:28px;border:3px solid transparent}
.cta--filled-dark{background:var(--ruv-blau);color:#fff}
.cta:hover{filter:brightness(1.1)}

/* ---------- NAV ----------
   Der Bankenverteiler hat auf dem Desktop keine Navigationsleiste: dort steht
   das R+V-Zeichen negativ im blauen Feld. Mobil gibt es eine weiße Leiste mit
   dem positiven Logo und Claim, aber keine Menüpunkte und keinen Burger. */
.nav{display:none;background:#fff}

/* ---------- HEADER ---------- */
/* Auf die Rahmenbreite des Designs gedeckelt (1442px). Darüber bleibt
   links und rechts weißer Rand statt einer immer breiteren Bühne. */
.hero{max-width:1442px;margin:0 auto;display:grid;grid-template-columns:51.73% 48.27%;min-height:579px}   /* Farbkante x=746 von 1442 */
/* Der Stapel sitzt nicht mittig, sondern 57px unter der Oberkante. */
.hero__panel{background:var(--ruv-blau);display:flex;justify-content:flex-end;align-items:flex-start}
.hero__content{max-width:650px;padding:57px 24px 60px;width:100%}   /* Text beginnt bei x=120 */
.hero__brand{margin:0 0 41px}
.hero__brand-logo{display:block;width:164px;height:114px}   /* Zeichen 163x66, Unterzeile 163x25, Abstand 23 */
.hero__h1{margin:0;font-weight:700;font-size:69.9px;line-height:69.9px;color:#fff}
.hero__h2{margin:33px 0 0;font-weight:700;font-size:44.65px;line-height:54px;color:#fff}
.hero__visual{position:relative;order:2;overflow:hidden}
/* Klassen statt >img:first-child - durch das <picture> ist das Foto kein
   direktes Kind mehr, und der Selektor haette sonst das Herz-Logo getroffen. */
.hero__pic{display:block;width:100%;height:100%}
.hero__img{width:100%;height:100%;object-fit:cover;object-position:center}

/* ---------- BERATERAUSWAHL ---------- */
.pick{padding:65px 0 68px;text-align:center}
.pick__kicker{margin:0;font-weight:700;font-size:25px;line-height:34px}
.pick__title{margin:22px 0 0;font-weight:700;font-size:53px;line-height:60px}
.pick__lead{margin:20px 0 0}
.pick__hint{margin:39px 0 0;font-weight:700}
.pick__steps{display:flex;justify-content:center;align-items:center;gap:45px;margin-top:70px}
.pick__step{display:flex;align-items:center;gap:18px}
/* vorläufig: Zifferngröße geschätzt, die Messung hat die Kreiskante mitgefasst */
.pick__num{flex:none;width:61px;height:61px;border-radius:50%;background:var(--ruv-orange-light);
  color:#fff;display:grid;place-items:center;font-weight:700;font-size:26px;line-height:1}

/* Auswahlfeld: native <select>, damit Tastatur, Screenreader und die
   Auswahlliste auf dem Handy ohne Nachbau funktionieren.

   Linksbuendig auf Kundenwunsch (27.08.2026). Gemeint war das GESCHLOSSENE
   Feld - die aufgeklappte Liste zeichnet das Betriebssystem und stand dort
   ohnehin schon links. Die Ausrichtung gilt fuer Platzhalter und ausgewaehlten
   Namen gemeinsam, getrennt geht es bei einem <select> nicht.

   Polster weicht bewusst vom Design ab: dort sind 52px links gemessen, aber
   fuer zentrierten Text. Linksbuendig lief der Text damit bis fast an den
   Pfeil, deshalb 24px. Rechts 88px statt 74px, weil 74px exakt an der
   Pfeilkante endete und ein abgeschnittener langer Name ohne Luft dagegen
   stiess. Der Pfeil bleibt auf seiner gemessenen Position, 52px von rechts. */
.pick__select-wrap{position:relative;width:376px}
.pick__select{-webkit-appearance:none;appearance:none;width:100%;height:61px;
  padding:0 88px 0 24px;border:3px solid var(--ruv-blau);border-radius:12px;
  background:#fff url("https://www.kwk-bank.de/assets/lp/bankenverteiler/select-arrow.png") no-repeat right 52px center/22px 13px;
  color:var(--ruv-blau);font-family:inherit;font-weight:700;font-size:22px;line-height:28px;cursor:pointer;
  text-align:left;text-align-last:left}
.pick__select:focus-visible{outline:3px solid var(--ruv-mint-dunkel);outline-offset:2px}

/* Schritt 2 ist gesperrt, bis ein Berater gewählt ist – im Design ist die
   Beschriftung dort abgeschwächt. */
/* Kein waagerechtes Polster: die Beschriftung ist im Design 339px breit, mit
   Polster und Rahmen blieben nur 338px - der Text bricht dann um. */
.pick__cta{width:376px;padding-left:0;padding-right:0}
.pick__cta.is-disabled{color:rgba(255,255,255,.49);pointer-events:none}   /* gemessen */

/* ---------- FOOTER ---------- */
.footer{background:var(--ruv-blau);color:#fff;padding:32px 0}   /* Band 95px */
.footer__inner{display:flex;justify-content:center;gap:42px;font-size:18px;line-height:30px}
.footer__inner a{text-decoration:none}

/* =========================================================
   MOBILE (Figma 402px)
   ========================================================= */
@media (max-width:900px){
  .wrap{padding:0 14px;max-width:none}
  .d-only{display:none}
  .m-only{display:inline}

  .nav{display:block}
  .nav__inner{display:flex;align-items:center;height:64px;padding:0 35px}
  .nav__logo img{width:215px}

  /* Header: Visual oben, darunter die blaue Fläche. Anders als bei Standalone
     ist die Oberkante der blauen Fläche gerade, nicht geformt. */
  .hero{display:block;min-height:0}
  .hero__visual{height:402px}
    .hero__panel{display:block}
  .hero__content{max-width:none;padding:50px 30px 55px 40px}
  .hero__brand{display:none}    /* mobil steht das Logo in der weißen Leiste */
  .hero__h1{font-size:44px;line-height:53px}
  .hero__h2{font-size:39px;line-height:49px;margin-top:43px}

  /* Kicker und Überschrift gibt es nur auf dem Desktop. Am 5-fach
     vergrößerten Mobil-Screenshot geprüft: der weiße Bereich beginnt
     direkt mit dem Fließtext. */
  .pick__kicker,.pick__title{display:none}

  .pick{padding:64px 0 93px}
  .pick__hint{margin-top:37px}
  .pick__steps{flex-direction:column;gap:58px;margin-top:38px}
  .pick__step{flex-direction:column;gap:16px;width:100%}
  .pick__select-wrap,.pick__cta{width:100%;max-width:375px}
  .pick__step{align-items:center}

  .footer{padding:20px 0}   /* Band 71px */
}