/* =========================================================================
   KLUG – Transferveranstaltungen 2026
   Anmelde-Landingpage

   Gestaltung an klug-projekt.de angelehnt: vollflächige Farbbänder über die
   ganze Bildschirmbreite, blaue Überschriften, Fira Sans, eckige Buttons mit
   vorangestelltem Pfeil, Bilder mit türkisem Rahmen, Dreiecke aus dem
   Seitenmotiv am Rand.

   Aufbau:
     01  Design-Tokens
     02  Basis & Typografie
     03  Bänder, Raster, Dekoration
     04  Buttons und kleine Elemente
     05  Kopfbereich und Sprungnavigation
     06  Hero
     07  Textabschnitte (Projekt, Zielgruppe, Nutzen)
     08  Termine  – Kernstück der Seite
     09  Ablauf
     10  Showroom
     11  Verbund
     12  Häufige Fragen
     13  Abschluss-CTA
     14  Formular (Anmeldeseite)
     15  Bestätigungsseite
     16  Footer
     17  Einwilligungsbanner
     18  Mobile und mittlere Breiten
   ========================================================================= */


/* == 01  Design-Tokens ==================================================== */
/* Farben abgenommen von klug-projekt.de und aus der KLUG-Bildmarke.         */

:root {
  --color-blue:        #1A38BE;   /* Überschriften, Links, Primärbutton      */
  --color-blue-deep:   #0E1F5E;   /* dunkles Band und Footer                 */

  --band-green:        #DEE8D1;   /* Bildband oben auf der Projektseite      */
  --band-mint:         #DFF3F0;   /* Band unter dem Bildband                 */
  --band-blue:         #E8EDF8;   /* Fläche hinter Textabschnitten           */

  --color-teal:        #46C6C0;   /* Bildrahmen und Dreieck                  */
  --color-magenta:     #C4239A;   /* Dreieck                                 */
  --color-lime:        #A9D24A;   /* Dreieck, Flächen – nicht als Schrift    */
  --color-lime-soft:   #D8ECB4;   /* Schrift auf blauem Grund                */
  --color-green:       #98C67C;   /* Grün der Wortmarke                      */

  --color-ink:         #16181D;
  --color-ink-muted:   #45484F;
  --color-ink-light:   #666B73;
  --color-line:        #DCE0DA;
  --color-paper:       #FFFFFF;

  --font-base: 'Fira Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;

  --content-width: 1360px;    /* Inhaltsbreite in den vollflächigen Bändern  */
  --gutter: 56px;
}


/* == 02  Basis & Typografie =============================================== */

/* Fira Sans liegt im Projekt (assets/fonts/) und wird nicht mehr von Google
   nachgeladen – sonst ginge bei jedem Seitenaufruf die IP-Adresse der
   Besucherin an einen Dritten. Subsets latin und latin-ext, vier Schnitte;
   über unicode-range holt der Browser latin-ext nur, wenn er es braucht.
   Fira Sans steht unter der SIL Open Font License 1.1, siehe assets/fonts/OFL.txt. */

@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/fira-sans-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/fira-sans-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/fira-sans-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/fira-sans-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/fira-sans-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/fira-sans-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/fira-sans-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/fira-sans-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }

body {
  font-family: var(--font-base);
  font-size: 17px;
  line-height: 1.62;
  color: var(--color-ink);
  background: var(--color-paper);
}

h1, h2, h3 {
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.012em;
  color: var(--color-blue);
}
h1 { font-size: 58px; }
h2 { font-size: 42px; }
h3 { font-size: 24px; }
h4 { font-size: 19px; font-weight: 600; line-height: 1.3; }

p { color: var(--color-ink-muted); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.lead { font-size: 20px; line-height: 1.6; color: var(--color-ink-muted); }

/* Kleine Rubrik über einer Überschrift */
.eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-blue);
  margin-bottom: 14px;
}
.eyebrow--light { color: var(--color-lime-soft); }


/* == 03  Bänder, Raster, Dekoration ======================================= */

/* Jedes Band läuft über die volle Bildschirmbreite, der Inhalt darin ist
   auf --content-width begrenzt und mittig gesetzt. */
.band { position: relative; width: 100%; padding: 96px 0; overflow: hidden; scroll-margin-top: 70px; }
.band--green { background: var(--band-green); }
.band--mint  { background: var(--band-mint); }
.band--blue  { background: var(--band-blue); }
.band--deep  { background: var(--color-blue-deep); }
.band--tight { padding: 64px 0; }

.band--deep h2,
.band--deep h3 { color: #fff; }
.band--deep p  { color: rgba(255, 255, 255, 0.82); }

.container { width: 100%; max-width: var(--content-width); margin: 0 auto; padding: 0 var(--gutter); }

/* Zweispaltiger Einstieg: Überschrift links, Erläuterung rechts */
.split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 72px; align-items: start; }
.split--center { align-items: center; }

.cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.cols-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }

/* Dreiecke am linken Rand, wie im Kopfbereich von klug-projekt.de */
.decor-triangles { position: absolute; left: 0; top: 0; height: 100%; width: 210px; pointer-events: none; }
.decor-triangles svg { height: 100%; width: 100%; }
/* Inhalt liegt immer über dem Rand-Muster. */
.band > .container { position: relative; z-index: 1; }

/* Bildrahmen in Türkis */
.framed { border: 2px solid var(--color-teal); }


/* == 04  Buttons und kleine Elemente ====================================== */

/* Pfeil steht vor der Beschriftung – wie auf der Projektseite. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 15px 30px;
  border: 2px solid var(--color-blue);
  background: transparent;
  color: var(--color-blue);
  font-family: inherit;
  font-size: 16.5px;
  font-weight: 600;
  cursor: pointer;
}
.btn::before { content: '\2192'; font-size: 19px; line-height: 1; }
.btn--solid { background: var(--color-blue); color: #fff; }
.btn--on-dark { border-color: #fff; color: #fff; }
.btn--on-dark.btn--solid { background: #fff; color: var(--color-blue); border-color: #fff; }
.btn--small { padding: 11px 20px; font-size: 15px; gap: 10px; }
.btn--block { width: 100%; justify-content: center; }
.btn--plain::before { content: none; }

/* Handlungsaufruf am Ende eines Abschnitts */
.section-cta {
  margin-top: 48px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 28px;
}
.section-cta p { margin: 0; max-width: 32em; font-size: 18px; font-weight: 500; color: var(--color-ink); }
.section-cta--dark p { color: rgba(255, 255, 255, 0.9); }

/* Offener Punkt – vor dem Livegang nach „todo“ suchen und alles entfernen. */
.todo {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 7px;
  border: 1px solid #E5CE96;
  background: #FFF3D4;
  color: #7E5A0F;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  vertical-align: middle;
}
.todo--dark { background: rgba(255, 243, 212, 0.16); border-color: rgba(229, 206, 150, 0.35); color: #F0DCA8; }

/* Aufzählung mit Häkchen */
.checklist { list-style: none; }
.checklist li { position: relative; padding-left: 36px; padding-bottom: 16px; color: var(--color-ink-muted); }
.checklist li:last-child { padding-bottom: 0; }
.checklist li::before {
  content: '';
  position: absolute;
  left: 4px; top: 9px;
  width: 16px; height: 8px;
  border-left: 2.5px solid var(--color-blue);
  border-bottom: 2.5px solid var(--color-blue);
  transform: rotate(-45deg);
}
.checklist strong { color: var(--color-ink); font-weight: 600; }

/* Hinweiskasten */
.note { border-left: 4px solid var(--color-teal); background: #fff; padding: 24px 28px; }
.note h4 { color: var(--color-ink); margin-bottom: 8px; }
.note p { font-size: 16px; }


/* == 05  Kopfbereich und Sprungnavigation ================================= */

.site-header { width: 100%; background: #fff; border-bottom: 1px solid var(--color-line); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; padding-top: 20px; padding-bottom: 20px; }
/* Logo wird unverändert eingebunden – kein Filter, keine Einfärbung. */
.site-logo { height: 62px; }
.header-right { display: flex; align-items: center; gap: 28px; }
.header-link { font-weight: 600; color: var(--color-blue); font-size: 16px; }

/* Sprungnavigation im Mint-Band, analog zur Unternavigation der Projektseite */
.jumpnav { width: 100%; background: var(--band-mint); position: sticky; top: 0; z-index: 100; border-bottom: 1px solid rgba(22, 24, 29, 0.06); box-shadow: 0 2px 10px rgba(14, 31, 94, 0.05); }
.jumpnav .container { display: flex; gap: 40px; padding-top: 20px; padding-bottom: 20px; white-space: nowrap; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; }
/* Die Rollleiste würde die Leiste um ein paar Pixel höher machen und sieht in
   einer Navigation nach Fehler aus. Geschoben wird mit dem Finger, gezogen mit
   dem Trackpad – und der Verlauf rechts sagt, dass es weitergeht. */
.jumpnav .container::-webkit-scrollbar { display: none; }
.jumpnav a { flex: 0 0 auto; font-weight: 500; color: var(--color-blue); font-size: 16px; padding-bottom: 3px; }
.jumpnav a.is-current { border-bottom: 2px solid var(--color-blue); }

/* Weicher Übergang am rechten Rand: sagt ohne Worte, dass dort noch Einträge
   stehen. Die Klasse setzt main.js und nur dann, wenn die Leiste wirklich
   breiter ist als der Bildschirm – sonst läge ein Schleier über nichts. */
.jumpnav.hat-mehr::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 56px; background: linear-gradient(to right, rgba(223, 243, 240, 0), var(--band-mint)); pointer-events: none; }


/* == 06  Hero ============================================================= */

.hero { background: var(--band-green); }
/* Eigene Klasse statt „.hero .container“ – sonst gewinnt diese Regel gegen
   das Raster der Kennzahlenreihe, die ebenfalls ein .container ist. */
.hero__grid { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: center; }
.hero__title { max-width: 13em; }
.hero__text { margin-top: 26px; max-width: 30em; color: #384231; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }
.hero__facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 48px; }
.hero__fact { display: flex; gap: 14px; align-items: flex-start; background: #fff; padding: 20px 20px; border-top: 3px solid var(--color-teal); }
.hero__fact__icon { flex: 0 0 auto; width: 32px; height: 32px; color: var(--color-teal); margin-top: 1px; }
.hero__fact__icon svg { width: 100%; height: 100%; display: block; }
.hero__fact__body { display: block; }
.hero__fact__body strong { display: block; font-size: 16px; font-weight: 700; color: var(--color-ink); line-height: 1.25; }
.hero__fact__body span { display: block; font-size: 14px; color: var(--color-ink-light); margin-top: 3px; line-height: 1.4; }
.hero__fact:nth-child(2) { border-top-color: var(--color-blue); }
.hero__fact:nth-child(2) .hero__fact__icon { color: var(--color-blue); }
.hero__fact:nth-child(3) { border-top-color: var(--color-magenta); }
.hero__fact:nth-child(3) .hero__fact__icon { color: var(--color-magenta); }
.hero__fact:nth-child(4) { border-top-color: var(--color-green); }
.hero__fact:nth-child(4) .hero__fact__icon { color: var(--color-green); }
.hero__media { position: relative; }
.hero__media img { width: 100%; }
.hero__caption { margin-top: 12px; font-size: 14.5px; color: #4C5545; }


/* == 07  Textabschnitte =================================================== */

.pillar h3 { font-size: 21px; margin-bottom: 10px; }
.pillar p { font-size: 16px; }
.pillar__rule { width: 46px; height: 4px; background: var(--color-teal); margin-bottom: 18px; }
.pillar:nth-child(2) .pillar__rule { background: var(--color-lime); }
.pillar:nth-child(3) .pillar__rule { background: var(--color-magenta); }

/* Trennlinie zwischen Textblöcken */
.rule { border: 0; border-top: 1px solid var(--color-line); margin: 56px 0 44px; }

/* Drei Säulen als geordnete Spalten mit feinen Trennlinien */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); }
.pillars .pillar { padding: 0 36px; }
.pillars .pillar:first-child { padding-left: 0; }
.pillars .pillar:last-child { padding-right: 0; }
.pillars .pillar + .pillar { border-left: 1px solid var(--color-line); }

/* Vier Kacheln inkl. Ministeriums-Kachel */
.pillars--four { grid-template-columns: repeat(4, 1fr); }
.pillars--four .pillar { padding: 0 22px; }
.pillars--four .pillar:first-child { padding-left: 0; }
.pillars--four .pillar:last-child { padding-right: 0; }
.pillar--funding { display: flex; flex-direction: column; }
.pillar__logo { margin-top: auto; padding-top: 16px; max-width: 160px; width: 100%; height: auto; }

/* Fußnote (z. B. Showroom-Verfügbarkeit) */
.footnote { margin-top: 14px; font-size: 13px; color: var(--color-ink-light); }

/* Verweis auf die Ansprechpartnerin. Steht in Fließtext und soll dort auffallen,
   ohne wie ein Knopf auszusehen – blau, fett und unterstrichen. Vorher stand
   dasselbe als style-Attribut im Markup; als Klasse bleiben beide Fundstellen
   gleich, wenn sich etwas ändert. */
.kontakt-hervor { color: var(--color-blue); font-weight: 600; text-decoration: underline; }
/* Auf dem grünen Band trägt --color-ink-light nicht: 4,23:1 gegen die
   geforderten 4,5:1. Auf Weiß und auf Mint steht dieselbe Farbe sicher, das
   Band ist dafür zu dunkel. Deshalb hier eine eigene, dunklere Fassung – die
   Schrift bleibt klein, der Text also weiter erkennbar eine Fußnote. */
.footnote--auf-band { color: #2C5450; }

/* Zusammenfassung: zwei Auswahlzeilen (Online / Vor Ort) */
.summary__row { display: flex; gap: 12px; align-items: baseline; font-size: 16px; margin-bottom: 8px; color: var(--color-ink); }
.summary__tag { flex: 0 0 auto; min-width: 58px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-light); }

/* Formular-Zusätze */
.form-field__opt { font-weight: 400; color: var(--color-ink-light); font-size: 0.85em; }
.option--clear .option__label { color: var(--color-ink-light); font-weight: 500; }
.form-error { margin-top: 12px; color: #C0392B; font-weight: 600; font-size: 15px; }
.form-error[hidden] { display: none; }

/* Partnerlogos in den Kacheln */
.partner-logo img { max-width: 100%; max-height: 54px; width: auto; height: auto; object-fit: contain; }

/* Technologiepartner-Hinweis (Showroom) */
.tech-partner { display: flex; align-items: center; gap: 16px; margin-top: 26px; }
.tech-partner img { height: 34px; width: auto; }
.tech-partner span { font-size: 14px; color: #274B47; }

/* [hidden] soll auch Flex-/Block-Elemente sicher ausblenden */
[hidden] { display: none !important; }

/* Fixierter Termin (Anmeldung, kontextabhängig) */
.fixed-termin { background: #fff; border: 1px solid var(--color-line); padding: 16px 18px; margin-top: 8px; }
.fixed-termin__date { display: block; font-size: 19px; font-weight: 700; color: var(--color-ink); }
.fixed-termin__meta { display: block; font-size: 14px; color: var(--color-ink-muted); margin-top: 2px; }

/* Empfehlungshinweis im Formular */
.rec-hint { margin: 8px 0 14px; font-size: 14px; color: #2F5233; background: #EEF5E9; border-left: 3px solid var(--color-green); padding: 12px 14px; }

/* Honigtopf gegen automatische Ausfüller. Nicht display:none – das erkennen
   viele Bots und lassen das Feld dann in Ruhe. Stattdessen aus dem sichtbaren
   Bereich geschoben, ohne Höhe und nicht antabbar. */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Kenntnisnahme der Datenschutzhinweise */
.form-consent { margin-top: 4px; }
.consent { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.consent input { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--color-blue); }
.consent span { font-size: 15px; color: var(--color-ink-muted); line-height: 1.5; }
.consent a { color: var(--color-blue); font-weight: 600; text-decoration: underline; }

.benefit { background: #fff; padding: 32px 30px; border-top: 5px solid var(--color-blue); }
.benefit h3 { font-size: 21px; margin-bottom: 10px; }
.benefit p { font-size: 16px; }

/* Rechtstexte (Impressum, Datenschutz). Schmales Textmaß, damit die langen
   Absätze lesbar bleiben. Der globale Reset nimmt Listen ihre Einrückung –
   hier bekommen sie sie zurück. */
.legal { max-width: 44em; }
.legal h2 { font-size: 26px; margin-top: 54px; margin-bottom: 14px; }
.legal h2:first-child { margin-top: 0; }
.legal h3 { font-size: 19px; margin-top: 30px; margin-bottom: 8px; color: var(--color-ink); }
.legal p { margin-bottom: 14px; font-size: 16.5px; }
.legal ul { margin: 0 0 16px 0; padding-left: 22px; list-style: disc; }
.legal li { color: var(--color-ink-muted); font-size: 16.5px; margin-bottom: 7px; }
.legal address { font-style: normal; color: var(--color-ink-muted); font-size: 16.5px; margin-bottom: 14px; }
/* Links in Rechtstexten müssen als Links erkennbar sein. */
.legal a { color: var(--color-blue); font-weight: 600; text-decoration: underline; }
.legal a.todo { text-decoration: none; }

/* Inhaltsübersicht am Kopf eines Rechtstextes */
.legal__toc { background: var(--band-blue); padding: 22px 26px; margin-bottom: 8px; }
.legal__toc h2 { font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 12px; }
.legal__toc ol { margin: 0; padding-left: 20px; }
.legal__toc li { font-size: 16px; }
/* Freistehende Sprunglinks – im Fließtext gilt die 24-px-Ausnahme nicht,
   hier schon. Deshalb als Block mit Innenabstand statt als reiner Textlink. */
.legal__toc a { display: inline-block; padding: 5px 0; font-weight: 500; text-decoration: none; }
.legal__toc a:hover { text-decoration: underline; }

/* Anschrift-Block, z. B. Diensteanbieter im Impressum */
.legal__box { background: #fff; border: 1px solid var(--color-line); border-left: 4px solid var(--color-teal); padding: 20px 24px; margin-bottom: 18px; }
.legal__box p:last-child, .legal__box address:last-child { margin-bottom: 0; }


/* „Für wen“: Der rechte Block beginnt auf Höhe der Stichpunkte statt neben der
   Überschrift. Sonst fängt das Lesen an zwei Stellen gleichzeitig an, und der
   Blick springt. Der Wert ist die Höhe von Kennzeile und Überschrift zusammen –
   die bricht über den ganzen zweispaltigen Bereich in zwei Zeilen um, weil ihre
   Breite in em begrenzt ist. Wird der Text dort länger, gehört der Wert
   nachgemessen. */
.fuer-wen__seite { margin-top: 157px; }


/* == 08  Termine ========================================================== */

/* Deutlicher Hinweis, dass genau ein Termin gewählt wird. */
.pick-one {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  background: #fff;
  border: 2px solid var(--color-blue);
  padding: 26px 30px;
  margin-bottom: 48px;
}
.pick-one__badge {
  flex: 0 0 auto;
  background: var(--color-blue);
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  padding: 12px 16px;
}
.pick-one h3 { font-size: 22px; margin-bottom: 6px; }
.pick-one p { font-size: 16px; }

.event-group { margin-bottom: 46px; }
.event-group:last-child { margin-bottom: 0; }
.event-group__head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 6px; }
.event-group__head h3 { font-size: 26px; }
.event-group__hint {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-blue);
  border: 1px solid var(--color-blue);
  padding: 3px 12px;
}
.event-group > p { max-width: 52em; margin-bottom: 24px; }

.events { display: grid; gap: 20px; }
.events--four  { grid-template-columns: repeat(4, 1fr); }
.events--three { grid-template-columns: repeat(3, 1fr); }
.events--two   { grid-template-columns: repeat(2, 1fr); }

.event { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--color-line); padding: 30px 30px 26px; }
.event__kind { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-light); }
.event__date { margin-top: 14px; font-size: 34px; font-weight: 700; line-height: 1.08; color: var(--color-blue); }
.event__time { margin-top: 10px; font-size: 16.5px; font-weight: 600; color: var(--color-ink); }
.event__where { margin-top: 4px; font-size: 15.5px; color: var(--color-ink-light); }
.event__note { margin-top: 16px; font-size: 15.5px; line-height: 1.5; }
.event .btn { margin-top: 26px; }
.event--onsite { border-top: 5px solid var(--color-teal); }
.event--online { border-top: 5px solid var(--color-blue); }


/* == 09  Ablauf =========================================================== */

.agenda { background: #fff; padding: 36px 36px 34px; height: 100%; }
.agenda--dark { background: rgba(255, 255, 255, 0.07); }
.agenda h3 { margin-bottom: 4px; }
.agenda__meta { font-size: 16px; font-weight: 600; color: var(--color-ink); margin-bottom: 22px; }
.agenda--dark .agenda__meta { color: var(--color-lime-soft); }
.agenda__list { list-style: none; }
.agenda__list li { display: grid; grid-template-columns: 128px 1fr; gap: 20px; padding: 13px 0; border-top: 1px solid var(--color-line); font-size: 16px; }
.agenda--dark .agenda__list li { border-top-color: rgba(255, 255, 255, 0.2); }
.agenda__list time { font-weight: 600; color: var(--color-blue); }
.agenda--dark .agenda__list time { color: var(--color-lime-soft); }
.agenda__list span { color: var(--color-ink-muted); }
.agenda--dark .agenda__list span { color: rgba(255, 255, 255, 0.82); }


/* == 10  Showroom ========================================================= */

.showroom__media {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 260px;
  padding: 30px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px dashed #8FBDB8;
  text-align: center;
  font-size: 15px;
  color: #2C5450;
}
/* Anforderung an das noch fehlende Asset, damit sie beim Zuliefern danebensteht. */
.showroom__spec { display: inline-block; margin-top: 10px; font-size: 13px; color: #4A7570; }

/* Der Text steht über der Kamerafahrt und bleibt in lesbarer Breite; das Video
   bekommt dafür die ganze Inhaltsbreite. In der früheren schmalen Spalte war es
   bei einem Seitenverhältnis von 2,08:1 kaum größer als eine Briefmarke. */
.showroom__intro { max-width: 760px; }
.showroom__shot { margin-top: 44px; }

/* Zustand mit echtem Asset – Bild oder Kamerafahrt, beide türkis gerahmt. */
.showroom__shot img,
.showroom__shot video { width: 100%; height: auto; display: block; }


/* == 11  Verbund ========================================================== */

.partner-logos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin-top: 28px; }
.partner-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 92px;
  padding: 14px;
  border: 1px dashed #C3C8BF;
  background: #fff;
  text-align: center;
  font-size: 14px;
  color: var(--color-ink-light);
}


/* == 12  Häufige Fragen =================================================== */

.faq { border-top: 1px solid #C9D2E4; }
.faq__item { border-bottom: 1px solid #C9D2E4; padding: 26px 0; }
.faq__item h3 { font-size: 20px; margin-bottom: 8px; }
.faq__item p { font-size: 16.5px; max-width: 62em; }


/* == 13  Abschluss-CTA ==================================================== */

.cta { text-align: center; }
.cta h2 { color: #fff; max-width: 16em; margin: 0 auto; }
.cta p { max-width: 40em; margin: 22px auto 0; font-size: 18px; }
.cta__actions { display: flex; justify-content: center; gap: 14px; margin-top: 36px; }


/* == 14  Formular (Anmeldeseite) ========================================== */

.form-layout { display: grid; grid-template-columns: 1fr 520px; gap: 64px; align-items: start; }

.form-card { background: #fff; border: 1px solid var(--color-line); padding: 38px 38px 34px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-field { margin-bottom: 20px; }
.form-field__label { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 600; }
.form-field__label .optional { font-weight: 400; color: var(--color-ink-light); }

.input, select.input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid #BFC5CF;
  background: #fff;
  font-family: inherit;
  font-size: 16.5px;
  color: var(--color-ink);
  appearance: none;
}
.input::placeholder { color: #8A9099; }

/* Terminwahl: genau eine Option ist möglich */
.option {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 14px;
  align-items: start;
  padding: 15px 18px;
  margin-bottom: 10px;
  border: 1px solid #BFC5CF;
  background: #fff;
  cursor: pointer;
}
.option--selected { border: 2px solid var(--color-blue); background: #F2F5FF; padding: 14px 17px; }
.option__mark { width: 20px; height: 20px; margin-top: 3px; border: 2px solid #9AA1AC; border-radius: 50%; }
.option--selected .option__mark { border: 6px solid var(--color-blue); }
.option__label { font-weight: 600; font-size: 16.5px; }
.option__meta { display: block; font-size: 15px; color: var(--color-ink-light); font-weight: 400; }

.option-group { margin-bottom: 8px; }
.option-group__title { display: block; margin: 22px 0 10px; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-light); }

.form-note { margin-top: 16px; font-size: 14px; line-height: 1.55; color: var(--color-ink-light); }
.form-note a { text-decoration: underline; }

.summary { background: #fff; border-top: 5px solid var(--color-blue); padding: 30px 32px; }
.summary h3 { font-size: 24px; margin-bottom: 4px; }
.summary__meta { font-size: 16.5px; font-weight: 600; color: var(--color-ink); }
.summary ul { list-style: none; margin-top: 22px; }
.summary li { position: relative; padding-left: 22px; padding-bottom: 12px; font-size: 16px; color: var(--color-ink-muted); }
.summary li::before { content: ''; position: absolute; left: 0; top: 10px; width: 8px; height: 8px; background: var(--color-teal); }


/* == 15  Bestätigungsseite ================================================ */

.confirm { text-align: center; }
.confirm__icon {
  display: flex; align-items: center; justify-content: center;
  width: 76px; height: 76px; margin: 0 auto 28px;
  background: var(--color-blue); color: #fff; font-size: 34px;
}
.confirm > .container > p { max-width: 34em; margin: 20px auto 0; }
.confirm__actions { display: flex; justify-content: center; gap: 14px; margin-top: 34px; }
.next-step { background: #fff; border-top: 5px solid var(--color-teal); padding: 26px 26px 24px; text-align: left; }
.next-step h3 { font-size: 19px; margin-bottom: 8px; }
.next-step p { font-size: 16px; }


/* == 16  Footer =========================================================== */

.site-footer { width: 100%; background: var(--color-blue-deep); color: rgba(255, 255, 255, 0.78); padding: 72px 0 40px; font-size: 16px; }
/* Weiße Trägerfläche, damit das Logo unverändert bleiben kann. */
.logo-plate { display: inline-flex; padding: 14px 18px; background: #fff; }
.logo-plate img { height: 54px; }

.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 48px; padding-bottom: 44px; border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
.footer-col h4 { font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); margin-bottom: 16px; }
.footer-col a { display: block; padding: 6px 0; color: #fff; }
/* Der Knopf für die Tracking-Einstellungen sitzt zwischen den Footer-Links und
   soll aussehen wie sie – ein Knopf ist es, weil er etwas auslöst und nicht
   irgendwohin führt. */
.footer-col button.footer-aktion {
  display: block; padding: 6px 0; color: #fff; background: none; border: 0;
  font: inherit; text-align: left; cursor: pointer; text-decoration: underline;
}
.footer-col p { color: rgba(255, 255, 255, 0.78); font-size: 15.5px; margin-top: 18px; }
.funding { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 18px; margin-top: 24px; }
/* Weiße Trägerfläche für das Förderlogo auf dem dunklen Band. */
.funding__plate { flex: 0 0 auto; display: inline-flex; max-width: 100%; background: #fff; padding: 12px 16px; }
/* max-width und object-fit sind die Rückfallebene: das Logo ist mit 88 px Höhe
   rund 176 px breit und damit breiter als eine Footer-Spalte auf schmalen
   Geräten. Ohne die beiden Angaben schiebt es die ganze Seite auf. */
.funding__plate img { height: 88px; width: auto; max-width: 100%; object-fit: contain; display: block; }
.footer-bottom { display: flex; justify-content: space-between; gap: 24px; padding-top: 26px; font-size: 15px; color: rgba(255, 255, 255, 0.78); }


/* == 17  Einwilligungsbanner ============================================== */

/* Liegt über allem und bleibt am unteren Rand stehen. Die Seite bleibt
   benutzbar – wer nicht entscheidet, wird nicht getrackt, das genügt. */
.einwilligung {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 900;
  background: var(--color-blue-deep);
  border-top: 4px solid var(--color-teal);
  box-shadow: 0 -6px 24px rgba(14, 31, 94, 0.22);
}
.einwilligung__inner {
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 26px var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px 40px;
  align-items: center;
}
.einwilligung__titel { font-size: 20px; color: #fff; margin-bottom: 10px; }
.einwilligung__titel:focus { outline: 2px solid var(--color-teal); outline-offset: 4px; }
.einwilligung__text p { font-size: 15px; color: rgba(255, 255, 255, 0.86); margin-bottom: 8px; }
.einwilligung__text p:last-child { margin-bottom: 0; }
.einwilligung__text a { color: var(--color-lime-soft); font-weight: 600; text-decoration: underline; }

/* Beide Knöpfe gleich gross und gleich gestaltet. Ein hervorgehobenes
   „Einverstanden“ neben einem blassen „Ablehnen“ wäre eine Nudge-Gestaltung
   und würde die Freiwilligkeit der Einwilligung in Frage stellen. */
/* Raster statt Flex, damit beide Knöpfe exakt gleich breit sind und nicht der
   längere Text den Knopf grösser macht. */
.einwilligung__aktionen { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.btn--consent {
  border-color: #fff;
  color: var(--color-blue-deep);
  background: #fff;
  min-width: 180px;
  justify-content: center;
}
.btn--consent::before { content: none; }

.einwilligung__stand {
  grid-column: 1 / -1;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

/* Rückmeldung nach einem Widerruf */
.einwilligung__widerruf {
  position: fixed;
  left: 50%; bottom: 24px;
  transform: translateX(-50%);
  z-index: 950;
  max-width: 34em;
  background: var(--color-blue-deep);
  color: #fff;
  font-size: 15px;
  padding: 16px 20px;
  border-left: 4px solid var(--color-teal);
  box-shadow: 0 6px 24px rgba(14, 31, 94, 0.3);
}


/* == 18  Mobile und mittlere Breiten ====================================== */

@media (max-width: 1100px) {
  :root { --gutter: 36px; }
  h1 { font-size: 46px; }
  h2 { font-size: 34px; }
  .hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .split { grid-template-columns: 1fr; gap: 32px; }
  /* Untereinander wäre der Vorlauf nur eine Lücke. */
  .fuer-wen__seite { margin-top: 0; }
  .cols-3 { grid-template-columns: 1fr 1fr; }
  .events--four, .events--three { grid-template-columns: 1fr 1fr; }
  .hero__facts { grid-template-columns: 1fr 1fr; }
  .form-layout { grid-template-columns: 1fr; gap: 36px; }
  .pillars { grid-template-columns: 1fr; }
  .pillars .pillar { padding: 28px 0 0; }
  .pillars .pillar:first-child { padding: 0; }
  .pillars .pillar + .pillar { border-left: 0; border-top: 1px solid var(--color-line); }
}

@media (max-width: 700px) {
  :root { --gutter: 20px; }
  .decor-triangles { display: none; }
  body { font-size: 16px; }
  h1 { font-size: 32px; }
  h2 { font-size: 27px; }
  h3 { font-size: 21px; }
  .lead { font-size: 17.5px; }

  .band { padding: 52px 0; }
  .band--tight { padding: 40px 0; }
  .site-logo { height: 46px; }
  .header-right { gap: 14px; }
  .header-link { display: none; }

  .jumpnav .container { gap: 22px; }

  .hero__facts { grid-template-columns: 1fr; gap: 16px; margin-top: 34px; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { justify-content: center; }

  .cols-3, .cols-2, .events--four, .events--three, .events--two { grid-template-columns: 1fr; gap: 16px; }

  .pick-one { flex-direction: column; gap: 14px; padding: 22px; margin-bottom: 34px; }
  .event { padding: 24px 22px 22px; }
  .event__date { font-size: 28px; }
  .event .btn { justify-content: center; }

  .agenda { padding: 26px 22px; }
  .agenda__list li { grid-template-columns: 1fr; gap: 2px; }

  .partner-logos { grid-template-columns: 1fr 1fr; }

  .cta__actions { flex-direction: column; }
  .cta__actions .btn { justify-content: center; }

  .form-card { padding: 24px 20px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .footer-bottom { flex-direction: column; gap: 10px; }

  /* Banner untereinander, Knöpfe über die volle Breite und weiterhin gleich gross.
     Kompakter als am Desktop – auf einem Handy darf die Abfrage nicht den
     halben Bildschirm belegen. Der Rest scrollt innerhalb des Banners. */
  .einwilligung__inner { grid-template-columns: 1fr; gap: 14px; padding: 18px var(--gutter); }
  .einwilligung__aktionen { grid-template-columns: 1fr; gap: 10px; }
  .btn--consent { width: 100%; min-width: 0; padding: 13px 20px; }
  .einwilligung { max-height: 50vh; overflow-y: auto; }
  .einwilligung__titel { font-size: 18px; margin-bottom: 8px; }
  .einwilligung__text p { font-size: 14px; }
  .confirm__actions { flex-direction: column; }
  .confirm__actions .btn { justify-content: center; }
}

/* Kleine Telefone: zwei Footer-Spalten sind hier schmaler als das Förderlogo,
   die Seite bekäme sonst einen waagerechten Scrollbalken. */
@media (max-width: 460px) {
  .footer-grid { grid-template-columns: 1fr; gap: 26px; }
}