/* * global.css — vogel-kollegen.de (VuK), Golden Template Startseite * * QUELLE: website_VuK.pen, Frames QhGWL (Desktop 1280) + d3qLt (Mobile 390), * gelesen per batch_get(resolveVariables:false) am 2026-07-07. * TOKEN-BASIS: tokens.css (Bereich 0/2). Reihenfolge im : fonts.css → * tokens.css → global.css. * Zwei Stufen: Mobil (@media ≤1024px, Layout + Schrift) und Desktop (CSS-Default, >1024). * Null Inline-Styles. Dokumentierte Ausnahmen (kein Token-Treffer) tragen * einen "Drift:"-Kommentar an Ort und Stelle — Details: ../../_drift-startseite.md */ /* ── RESET ──────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-family: var(--font-family); color: var(--color-body); background-color: var(--color-surface-page); -webkit-text-size-adjust: 100%; } body { max-width: var(--frame-width-desktop); margin: 0 auto; } a { color: inherit; text-decoration: none; } a:focus-visible, button:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; } img { display: block; max-width: 100%; height: auto; } strong { font-weight: var(--weight-semibold); color: var(--color-heading); /* wie ruedigervogel.de: Fett koppelt Gewicht + dunklere Farbe */ } /* ── RESPONSIVE-UTILITIES ───────────────────────────────────── */ /* Manuelle Umbrüche, die nur auf einem Gerät gelten (Pencil-Delta Desktop↔Mobile bei identischem Text, s. Prompt §1 "Umbrüche"). */ .mobile-break { display: none; } .desktop-break { display: block; } @media (max-width: 1024px) { .mobile-break { display: block; } .desktop-break { display: none; } } .dot { color: var(--color-brand); } /* ── EYEBROW (geteilt: Hero + Der Weg) ──────────────────────── */ .eyebrow { display: flex; align-items: center; gap: 14px; } .eyebrow__bar { display: block; flex-shrink: 0; width: var(--stroke-marker-w); height: var(--stroke-eyebrow-bar); background-color: var(--color-brand); } .eyebrow__txt { font-family: var(--font-family); font-size: var(--size-eyebrow); font-weight: var(--weight-semibold); color: var(--color-meta); letter-spacing: var(--ls-eyebrow); } /* ── AMPEL-PUNKT (geteilt: Cockpit-Übersicht + Cockpit-Detail) ─ */ .ampel-dot { display: block; flex-shrink: 0; border-radius: 50%; /* Größe wird kontextabhängig gesetzt (Pencil-Update 2026-07-07: 14px Desktop / 16px Mobile in beiden Kacheln) — s. .cockpit-overview__ampeln .ampel-dot, .cockpit-detail__row .ampel-dot */ } .ampel-dot--ok { background-color: var(--color-status-ok); } .ampel-dot--warn { background-color: var(--color-status-warn); } .ampel-dot--stop { background-color: var(--color-status-stop); } /* ── BUTTON PRIMÄR (Rot) ────────────────────────────────────── */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; padding: 16px 28px; background-color: var(--color-brand); color: var(--color-on-dark); font-family: var(--font-family); font-size: var(--size-button-d); font-weight: var(--weight-semibold); border-radius: var(--radius-button); } /* ── NAV ────────────────────────────────────────────────────── */ .nav-bar { position: relative; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 28px 80px; background-color: var(--color-surface-page); } .nav__brand { display: flex; align-items: center; gap: 10px; } .nav__signet { width: 20px; height: 20px; } .nav__wordmark { font-family: var(--font-family); font-size: var(--size-wordmark-d); font-weight: var(--weight-bold); color: var(--color-heading); } .nav__amp { color: var(--color-brand); } .nav__menu { display: flex; align-items: center; gap: 36px; } .nav__link { font-family: var(--font-family); font-size: var(--size-nav-link); font-weight: var(--weight-regular); color: var(--color-meta); } .nav__link--active { font-weight: var(--weight-semibold); color: var(--color-brand); } .nav__cta { display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; background-color: var(--color-brand); color: var(--color-on-dark); font-family: var(--font-family); font-size: var(--size-nav-link); font-weight: var(--weight-semibold); border-radius: var(--radius-button); } .nav__burger { display: none; background: none; border: none; cursor: pointer; padding: 4px; color: var(--color-heading); line-height: 0; } /* ── HERO (S1) ──────────────────────────────────────────────── */ .hero { padding: 88px 80px 96px; display: flex; flex-direction: column; gap: 44px; } .hero__h1 { font-family: var(--font-family); font-size: var(--size-hero-lp-d); font-weight: var(--weight-bold); letter-spacing: var(--ls-hero-d); line-height: var(--lh-hero-lp); color: var(--color-heading); } .hero__row { display: flex; align-items: flex-start; gap: 96px; } .hero__left { display: flex; flex-direction: column; gap: 36px; flex: 1; min-width: 0; /* Pencil-Update 2026-07-07: Kachel ist jetzt fix 357px (s. .cockpit-overview), Hero-Left füllt den Rest */ } .hero__lead { font-family: var(--font-family); font-size: var(--size-lead-d); font-weight: var(--weight-regular); line-height: var(--lh-lead); color: var(--color-body); } .hero__cta-row { display: flex; align-items: center; gap: 28px; } .hero__scroll-link { font-family: var(--font-family); font-size: var(--size-button-d); font-weight: var(--weight-semibold); color: var(--color-brand); } .hero__scroll-link:hover { text-decoration: underline; } /* Cockpit-Übersicht (Hero, drei Mini-Kacheln) — Pencil-Update 2026-07-07: fixe Breite 357px (= Breite eines Frage-Kastens in "Drei Fragen"), Ampel-Cluster statt Balken, Schrift geräteunabhängig 16px */ .cockpit-overview { flex: 0 1 357px; width: 357px; background-color: var(--color-surface-kachel); border: var(--stroke-border) solid var(--color-border-kachel); border-radius: var(--radius-kachel); padding: 28px; display: flex; flex-direction: column; gap: 18px; } .cockpit-overview__grid { display: flex; flex-direction: column; gap: 12px; } .cockpit-overview__mini { background-color: var(--color-surface-band); border-radius: var(--radius-mini); padding: 12px 14px; display: flex; align-items: center; gap: 10px; } .cockpit-overview__label { flex: 1; min-width: 0; font-family: var(--font-family); font-size: var(--size-body-m); /* Pencil-Literal 16, geräteunabhängig — size-body-m ist der einzig passende 16px-Token */ font-weight: var(--weight-semibold); color: var(--color-kachel); } .hr-prefix-m { display: none; } /* "HR / "-Präfix nur Mobile; Desktop-Label ist gekürzt auf "Recruiting" (Pencil-Vorlage) */ .cockpit-overview__ampeln { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .cockpit-overview__ampeln .ampel-dot { width: 14px; height: 14px; } .cockpit-overview__caption { font-family: var(--font-family); font-size: var(--size-body-m); /* Pencil-Literal 16, geräteunabhängig */ font-weight: var(--weight-regular); line-height: var(--lh-kachel); color: var(--color-subtle); } /* ── S2 BLINDFLUG ───────────────────────────────────────────── */ .blindflug { padding: 32px 80px 96px; display: flex; gap: 96px; } .blindflug__h2 { width: 460px; flex-shrink: 0; font-family: var(--font-family); font-size: var(--size-h2-d); font-weight: var(--weight-bold); letter-spacing: var(--ls-h2); line-height: var(--lh-h2); color: var(--color-heading); } .blindflug__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 20px; } .blindflug__body p { font-family: var(--font-family); font-size: var(--size-body-d); font-weight: var(--weight-regular); line-height: var(--lh-body); color: var(--color-body); } /* ── S3 DREI FRAGEN (dunkles Rot-Band) ──────────────────────── */ .questions-band { background-color: var(--color-brand); padding: 88px 80px 96px; } .questions-band__layout { display: grid; /* Pencil-Update 2026-07-07: Kachel jetzt fix 357px (= Frage-Kasten-Breite); Titel-Spalte füllt den Rest (minmax(max-content,1fr) statt fixer 460px), "cards"-Zeile bleibt volle Breite */ grid-template-columns: minmax(max-content, 1fr) 357px; grid-template-areas: "titles cockpit" "cards cards"; gap: 56px 80px; } .questions-band__titles { grid-area: titles; display: flex; flex-direction: column; gap: 12px; } .questions-band__h2 { font-family: var(--font-family); font-size: var(--size-band-h2-d); font-weight: var(--weight-bold); letter-spacing: var(--ls-h2); line-height: var(--lh-h2); color: var(--color-on-brand); } .questions-band__sub { font-family: var(--font-family); font-size: 18px; /* Drift: kein Token-Treffer, PO-Entscheid offen (§3b Audit) */ font-weight: var(--weight-regular); color: var(--color-on-brand-subtle); } .questions-band__grid { grid-area: cards; display: flex; gap: 24px; } /* Cockpit-Detail (S3, eine Bereichs-Kachel) — Pencil-Update 2026-07-07: fixe Breite 357px, Indikatoren einzeilig gestapelt, Schrift geräteunabhängig 16px */ .cockpit-detail { grid-area: cockpit; width: 357px; background-color: var(--color-surface-kachel); border: var(--stroke-border) solid var(--color-border-kachel); border-radius: var(--radius-kachel); padding: 24px; display: flex; flex-direction: column; gap: 14px; } .cockpit-detail__title { font-family: var(--font-family); font-size: var(--size-body-m); /* Pencil-Literal 16, geräteunabhängig */ font-weight: var(--weight-semibold); color: var(--color-on-dark); } .cockpit-detail__grid { display: flex; flex-direction: column; gap: 16px; } .cockpit-detail__row { display: flex; align-items: center; gap: 10px; } .cockpit-detail__row .ampel-dot { width: 14px; height: 14px; } .cockpit-detail__label { font-family: var(--font-family); font-size: var(--size-body-m); /* Pencil-Literal 16, geräteunabhängig */ font-weight: var(--weight-regular); color: var(--color-kachel); } .cockpit-detail__caption { font-family: var(--font-family); font-size: var(--size-body-m); /* Pencil-Literal 16, geräteunabhängig */ font-weight: var(--weight-regular); line-height: var(--lh-kachel); color: var(--color-subtle); } /* Frage-Kästen */ .question-card { flex: 1; min-width: 0; border: 5px solid var(--color-on-brand); /* Drift: Desktop-Literal 5, kein Token-Treffer (Mobile nutzt 3=stroke-bar) */ padding: 28px 28px 32px; display: flex; flex-direction: column; gap: 16px; } .question-card__num { font-family: var(--font-family); font-size: var(--size-ziffer-d); font-weight: var(--weight-bold); line-height: var(--lh-ziffer); color: var(--color-on-brand); } .question-card__marker { display: block; width: var(--stroke-marker-w); height: var(--stroke-bar); background-color: var(--color-on-brand); } .question-card__kicker { font-family: var(--font-family); font-size: var(--size-eyebrow); font-weight: var(--weight-semibold); letter-spacing: var(--ls-eyebrow); color: var(--color-on-brand-subtle); } .question-card__text { font-family: var(--font-family); font-size: var(--size-fragen-d); font-weight: var(--weight-semibold); line-height: var(--lh-fragen); color: var(--color-on-brand); } /* ── S4 SCHATTENARBEIT ──────────────────────────────────────── */ .shadow-work { padding: 96px 80px; display: flex; gap: 96px; } .shadow-work__intro { width: 460px; flex-shrink: 0; display: flex; flex-direction: column; gap: 20px; } .shadow-work__intro h2 { font-family: var(--font-family); font-size: var(--size-h2-d); font-weight: var(--weight-bold); letter-spacing: var(--ls-h2); line-height: var(--lh-h2); color: var(--color-heading); } .shadow-work__intro p { font-family: var(--font-family); font-size: var(--size-body-d); font-weight: var(--weight-regular); line-height: var(--lh-body); color: var(--color-body); } .shadow-work__examples { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 28px; } .shadow-example { display: flex; align-items: stretch; gap: 24px; } .shadow-example__marker { width: 2px; flex-shrink: 0; background-color: var(--color-brand); } .shadow-example p { font-family: var(--font-family); font-size: var(--size-body-d); font-weight: var(--weight-regular); line-height: var(--lh-body); color: var(--color-body); } .shadow-work__closing { font-family: var(--font-family); font-size: var(--size-body-d); font-weight: var(--weight-semibold); /* Desktop: Pencil-Literal 600 = weight-semibold */ line-height: var(--lh-body); color: var(--color-body); } /* ── S5 GELOBTES LAND ───────────────────────────────────────── */ .result-band { background-color: var(--color-surface-card); padding: 88px 80px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; } .result-band__kicker { font-family: var(--font-family); font-size: var(--size-eyebrow); font-weight: var(--weight-semibold); letter-spacing: var(--ls-eyebrow); color: var(--color-meta); } .result-band__pull { max-width: 760px; font-family: var(--font-family); font-size: var(--size-pull-d); font-weight: var(--weight-semibold); line-height: var(--lh-pull); color: var(--color-heading); } /* ── S6 DER WEG ─────────────────────────────────────────────── */ .path { padding: 96px 80px; display: flex; flex-direction: column; gap: 56px; } .path__header { display: flex; flex-direction: column; gap: 14px; } .path__h2 { font-family: var(--font-family); font-size: var(--size-h2-d); font-weight: var(--weight-bold); letter-spacing: var(--ls-h2); line-height: var(--lh-h2); color: var(--color-heading); } .path__steps { display: flex; gap: 48px; } .path__step { flex: 1; min-width: 0; border-top: var(--stroke-border) solid var(--color-border); padding: 24px 0 0; display: flex; flex-direction: column; gap: 14px; } .path__step-num { font-family: var(--font-family); font-size: 48px; /* Sondergröße, PO-Beschluss: dokumentierte Ausnahme (Hardcode-Audit §3c) */ font-weight: var(--weight-semibold); color: var(--color-brand); } .path__step-title { font-family: var(--font-family); font-size: var(--size-pull-d); font-weight: var(--weight-semibold); line-height: var(--lh-h3); color: var(--color-heading); } .path__step-text { font-family: var(--font-family); font-size: var(--size-body-d); font-weight: var(--weight-regular); line-height: var(--lh-body); color: var(--color-body); } .path__footnotes { display: flex; flex-direction: column; gap: 8px; } .path__objection { font-family: var(--font-family); font-size: var(--size-body-d); font-weight: var(--weight-semibold); line-height: var(--lh-body); color: var(--color-heading); } .path__jg-note { font-family: var(--font-family); font-size: var(--size-band-sub-d); font-weight: var(--weight-regular); line-height: var(--lh-body); color: var(--color-meta); } /* ── S7 ABSENDER / BEWEIS ───────────────────────────────────── */ .proof { background-color: var(--color-surface-card); padding: 88px 80px; display: flex; gap: 96px; } .proof__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 20px; } .proof__text h2 { font-family: var(--font-family); font-size: var(--size-h2-d); font-weight: var(--weight-bold); letter-spacing: var(--ls-h2); line-height: var(--lh-h2); color: var(--color-heading); } .proof__text p { font-family: var(--font-family); font-size: var(--size-body-d); font-weight: var(--weight-regular); line-height: var(--lh-body); color: var(--color-body); } .proof__link { font-family: var(--font-family); font-size: var(--size-internelinks-d); font-weight: var(--weight-regular); line-height: var(--lh-lead); color: var(--color-brand); } .proof__link:hover { text-decoration: underline; } .proof__facts { width: 400px; flex-shrink: 0; display: flex; flex-direction: column; gap: 32px; } .proof__fact { border-top: var(--stroke-border) solid var(--color-border); padding-top: 20px; display: flex; flex-direction: column; gap: 6px; } .proof__fact-num { font-family: var(--font-family); font-size: var(--size-h2-d); font-weight: var(--weight-bold); line-height: var(--lh-h2); color: var(--color-heading); } .proof__fact-label { font-family: var(--font-family); font-size: var(--size-band-sub-d); font-weight: var(--weight-regular); line-height: var(--lh-lead); color: var(--color-meta); } /* ── S8 CLOSING ─────────────────────────────────────────────── */ .closing { padding: 112px 80px; display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; } .closing__headline { font-family: var(--font-family); font-size: var(--size-cta-hl-d); font-weight: var(--weight-bold); letter-spacing: var(--ls-h2); line-height: var(--lh-h2); color: var(--color-heading); } .closing__text { max-width: 560px; font-family: var(--font-family); font-size: var(--size-m5-text-d); font-weight: var(--weight-regular); line-height: var(--lh-body); color: var(--color-body); } .closing__button-wrap { padding-top: 12px; } /* ── SEITEN-HERO (Innenseiten: Kontakt, Über, Impressum, Datenschutz) ── */ .page-hero { padding: var(--space-xl) 80px 40px; /* Pencil: [space-xl,80,40,80] — 40 literal, kein Token-Treffer */ display: flex; flex-direction: column; gap: var(--space-md); } .page-hero__h1 { font-family: var(--font-family); font-size: var(--size-hero-content-d); font-weight: var(--weight-bold); letter-spacing: var(--ls-hero-d); line-height: var(--lh-hero-lp); color: var(--color-heading); /* Schutz gegen einzelne, nicht umbrechbare lange Wörter (z. B. "Datenschutzerklärung") bei kleinen Viewports — sonst überläuft der Text seine Box (gemessener Bug 2026-07-07: scrollWidth 462px bei rectWidth 342px auf 390px-Viewport). */ overflow-wrap: break-word; hyphens: auto; } .page-hero__lead { max-width: 760px; font-family: var(--font-family); font-size: var(--size-lead-d); font-weight: var(--weight-regular); line-height: var(--lh-lead); color: var(--color-body); } /* ── KONTAKT: ZWEI BLÖCKE (Formular + Bookings), gestapelt ─── */ .kontakt-content { padding: 40px 80px var(--space-xl); display: flex; flex-direction: column; align-items: flex-start; gap: 56px; /* Pencil-Literal, kein Token-Treffer (Mobile nutzt space-lg=50) */ } .kontakt-block { width: 640px; display: flex; flex-direction: column; gap: 24px; } .kontakt-block__title { font-family: var(--font-family); font-size: var(--size-fragen-d); font-weight: var(--weight-bold); letter-spacing: var(--ls-h2); line-height: var(--lh-h2); color: var(--color-heading); } .kontakt-divider { width: 640px; height: var(--stroke-border); background-color: var(--color-border); border: none; } /* Formular */ #kontaktform { display: flex; flex-direction: column; gap: 24px; } .kontakt-block__subline { font-family: var(--font-family); font-size: var(--size-body-d); font-weight: var(--weight-regular); color: var(--color-body); } .form-field { display: flex; flex-direction: column; gap: 8px; width: 100%; } .form-field__label { font-family: var(--font-family-body); font-size: var(--size-label); font-weight: var(--weight-semibold); color: var(--color-heading); } .form-field__input, .form-field__textarea { width: 100%; padding: 14px 16px; border: var(--stroke-border) solid var(--color-border); border-radius: var(--radius-button); background-color: var(--color-surface-page); font-family: var(--font-family-body); font-size: var(--size-body-m); font-weight: var(--weight-regular); color: var(--color-heading); } .form-field__input::placeholder, .form-field__textarea::placeholder { color: var(--color-subtle); } .form-field__input:focus, .form-field__textarea:focus { outline: 2px solid var(--color-brand); outline-offset: 1px; } .form-field__textarea { resize: vertical; min-height: 120px; font-family: var(--font-family-body); } .kontakt-form__submit { width: 100%; padding: 15px 24px; background-color: var(--color-brand); color: var(--color-on-dark); font-family: var(--font-family); font-size: var(--size-button-d); font-weight: var(--weight-semibold); border: none; border-radius: var(--radius-button); cursor: pointer; } .kontakt-form__submit:hover { background-color: var(--color-brand-hover); } .kontakt-form__hint { font-family: var(--font-family); font-size: var(--size-footer); font-weight: var(--weight-regular); color: var(--color-meta); } .kontakt-direct { padding-top: 16px; display: flex; flex-direction: column; gap: 16px; } .kontakt-direct__title { font-family: var(--font-family); font-size: var(--size-h4); font-weight: var(--weight-semibold); color: var(--color-heading); } .kontakt-direct__text { font-family: var(--font-family); font-size: var(--size-label); font-weight: var(--weight-regular); line-height: var(--lh-body); color: var(--color-body); /* strong-Farbe/Gewicht kommt aus der globalen strong-Regel (Reset-Sektion) */ } .kontakt-direct__text a { color: var(--color-brand); } .kontakt-direct__text a:hover { text-decoration: underline; } /* Bookings-Karte */ /* Bookings-Einbettung — Umbau 2026-07-07 auf das offizielle Embed-Snippet des PO. Diese Bookings-Seite bringt eigenes Logo/Titel/Beschreibung mit, deshalb kein eigener Header mehr nötig (Duplikat entfernt) und kein Beschnitt-Hack für Scrollen/Höhe mehr (kein Scrollen-Abschalten — Microsofts eigenes Snippet empfiehlt scrolling="yes"). Höhe deckt die real gemessene Inhaltshöhe (~1650px, Desktop wie Mobile nahezu gleich) plus kleinem Puffer, ganz ohne internes Scrollen nötig. PO-Wunsch 2026-07-07 (siebte Runde): Logo/Titel/Info-Kachel oben ausblenden, „Buchung für Erstgespräch" soll das erste sichtbare Element sein. Nur der KOPF wird beschnitten (statisch, ändert sich nicht durch den Buchungs- Fortschritt) — anders als der frühere Crop betrifft das nicht den unteren, dynamischen Teil, daher hier unbedenklich. Eyebrow-Position real gemessen: y=285px, identisch bei 640px und 342px Breite. Beschnitt bewusst auf 265px (statt 285px) — 20px Weißraum bleiben über der Eyebrow stehen, PO-Wunsch 2026-07-07 (achte Runde), damit sie nicht an der Kante klebt. */ .booking-card { width: 100%; border: var(--stroke-border) solid var(--color-border-kachel); border-radius: var(--radius-mini); overflow: hidden; background-color: var(--color-surface-page); position: relative; } /* Volle Höhe erst nach Klick — das iframe ist position:absolute und braucht die feste Container-Höhe (1700 Iframe − 265 Kopf-Beschnitt). */ .booking-card.is-loaded { height: 1435px; } /* Bookings-Fassade (Stufe 3): kompakter Platzhalter statt sofortigem iframe */ .booking-facade { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 40px; } .booking-facade__hint { font-family: var(--font-family); font-size: var(--size-body-d); line-height: var(--lh-body); color: var(--color-body); } .booking-facade__fallback { font-family: var(--font-family); font-size: var(--size-band-sub-d); color: var(--color-meta); } .booking-facade__fallback a { color: var(--color-brand); text-decoration: none; } .booking-facade__fallback a:hover { text-decoration: underline; } .booking-card__frame { width: 100%; height: 1700px; border: none; display: block; position: absolute; top: -265px; left: 0; } /* ── ÜBER: HERO (Eyebrow + H1 + Intro) ──────────────────────── */ .about-hero { padding: var(--space-xl) 80px 60px; /* 60 Pencil-Literal, kein Token-Treffer */ display: flex; flex-direction: column; gap: var(--space-md); } .about-hero__h1 { display: flex; align-items: baseline; font-family: var(--font-family); font-size: var(--size-hero-content-d); font-weight: var(--weight-bold); letter-spacing: var(--ls-hero-d); line-height: var(--lh-hero-lp); color: var(--color-heading); } .about-hero__intro { max-width: 720px; font-family: var(--font-family-body); font-size: var(--size-lead-d); font-weight: var(--weight-regular); line-height: var(--lh-lead); color: var(--color-body); } /* ── ÜBER: TEXT-ABSCHNITTE ──────────────────────────────────── */ .about-section { padding: var(--space-xl) 80px 0; display: flex; flex-direction: column; gap: var(--space-md); } /* Letzter Abschnitt vor dem Footer (Impressum/Datenschutz): etwas Weißraum nach PO-Feedback 2026-07-07 — .pen selbst hat hier 0 Puffer (BottomSpacer height:0), bewusste Abweichung auf Wunsch. */ .about-section--last { padding-bottom: var(--space-xl); } .about-section__h2 { max-width: 720px; font-family: var(--font-family); font-size: var(--size-h2-d); font-weight: var(--weight-bold); letter-spacing: var(--ls-h2); line-height: var(--lh-h2); color: var(--color-heading); } .about-section__p { max-width: 720px; font-family: var(--font-family-body); font-size: var(--size-body-d); font-weight: var(--weight-regular); line-height: var(--lh-body); color: var(--color-body); } .about-section__link { font-family: var(--font-family-body); font-size: var(--size-internelinks-d); font-weight: var(--weight-regular); color: var(--color-brand); } .about-section__link:hover { text-decoration: underline; } .about-cta { padding: var(--space-xl) 80px; } /* ── IMPRESSUM: LABEL:WERT-PAARE (Handelsregister, USt-IdNr.) ── */ .legal-kv { display: flex; gap: 8px; max-width: 720px; font-family: var(--font-family-body); font-size: var(--size-body-d); font-weight: var(--weight-regular); line-height: var(--lh-body); color: var(--color-body); } .legal-kv__label { font-weight: var(--weight-semibold); color: var(--color-heading); } /* ── STANDALONE-SEITEN (Cookie-LP, 404) — kein Nav/Footer, domain-neutral: kein Signet, keine Wordmark ────────────────── */ .center-eyebrow { display: flex; flex-direction: column; align-items: center; gap: 10px; } .standalone-headline { max-width: 720px; font-family: var(--font-family); font-weight: var(--weight-bold); font-size: var(--size-hero-content-d); letter-spacing: var(--ls-hero-d); line-height: var(--lh-hero-lp); color: var(--color-heading); text-align: center; } .standalone-lead { font-family: var(--font-family); font-weight: var(--weight-regular); font-size: var(--size-lead-d); line-height: var(--lh-lead); color: var(--color-body); text-align: center; } .btn-primary--lg { padding: 18px 36px; } .btn-primary--md { padding: 16px 32px; } /* Cookie-Landingpage */ .cookie-lp { padding: 120px 80px 100px; display: flex; flex-direction: column; align-items: center; gap: 48px; } .cookie-lp__kopf { display: flex; flex-direction: column; align-items: center; gap: 18px; } .cookie-lp__lead { max-width: 640px; } .trust-card { width: 560px; padding: 40px; display: flex; flex-direction: column; align-items: center; gap: 20px; background-color: var(--color-surface-kachel); border: var(--stroke-border) solid var(--color-border-kachel); border-radius: var(--radius-kachel); } .trust-card__icon { color: var(--color-brand); } .trust-card__quote { font-family: var(--font-family); font-size: var(--size-pull-d); font-weight: var(--weight-semibold); line-height: var(--lh-pull); color: var(--color-on-dark); text-align: center; } .trust-card__note { font-family: var(--font-family); font-size: var(--size-body-m); /* Pencil-Literal 16, geräteunabhängig (wie Cockpit-Kacheln) */ font-weight: var(--weight-regular); line-height: var(--lh-kachel); color: var(--color-subtle); text-align: center; } .cookie-lp__deal { max-width: 640px; font-family: var(--font-family); font-size: var(--size-pull-d); font-weight: var(--weight-semibold); line-height: var(--lh-pull); color: var(--color-heading); text-align: center; } .cookie-lp__cta { display: flex; flex-direction: column; align-items: center; gap: 14px; } .cookie-lp__hint { max-width: 520px; font-family: var(--font-family); font-size: var(--size-footer); font-weight: var(--weight-regular); color: var(--color-meta); text-align: center; } /* 404 */ .error-page { padding: 140px 80px 120px; display: flex; flex-direction: column; align-items: center; gap: 40px; } .error-page__kopf { display: flex; flex-direction: column; align-items: center; gap: 14px; } .error-page__lead { max-width: 560px; } /* ── FOOTER ─────────────────────────────────────────────────── */ .site-footer { display: flex; align-items: center; justify-content: space-between; padding: 28px 80px 36px; border-top: var(--stroke-border) solid var(--color-border); } .site-footer__copy, .site-footer__nav { font-family: var(--font-family); font-size: var(--size-footer); font-weight: var(--weight-regular); color: var(--color-meta); } .site-footer__nav { display: flex; gap: 24px; } .site-footer__nav a { color: var(--color-meta); } .site-footer__nav a:hover { color: var(--color-heading); } .site-footer__sep { color: var(--color-meta); } /* ═══════════════════════════════════════════════════════════ RESPONSIVE — Mobile (≤ 640px) ═══════════════════════════════════════════════════════════ */ /* ========================================================================== Tablet-Stufe (≤1024px): mehrspaltige Sektionen werden einspaltig gestapelt, die schmalen Elemente auf 357px gedeckelt und LINKSBÜNDIG ausgerichtet (gemeinsame linke Linie mit Titeln/Text). Verhindert den Overflow im Bereich 640–1024px. Der Feinschliff (Schrift + Abstände) steht ebenfalls im ≤1024-Block; der ≤640-Block trägt nur noch das Consent-Modal. ========================================================================== */ @media (max-width: 1024px) { /* Burger-Menü ab Tablet — verhindert, dass die Menüpunkte in die Wortmarke laufen */ .nav__menu { display: none; } .nav__burger { display: flex; } .nav-bar.is-open .nav__menu { display: flex; flex-direction: column; align-items: stretch; gap: 0; position: absolute; top: 100%; left: 0; right: 0; background-color: var(--color-surface-page); border-bottom: var(--stroke-border) solid var(--color-border); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06); padding: 4px 24px 12px; } .nav-bar.is-open .nav__link { padding: 12px 0; } .nav-bar.is-open .nav__link + .nav__link { border-top: var(--stroke-border) solid var(--color-border); } .nav-bar.is-open .nav__cta { margin: 12px 0 4px; align-self: flex-start; } .hero__row { flex-direction: column; } .hero__left { width: 100%; } .hero__cta-row { flex-direction: column; align-items: flex-start; } .blindflug { flex-direction: column; } .questions-band__layout { grid-template-columns: 1fr; grid-template-areas: "titles" "cards" "cockpit"; } .questions-band__grid { flex-direction: column; } .shadow-work { flex-direction: column; } .path__steps { display: contents; } .proof { flex-direction: column; } /* flex: 0 0 auto → Höhe wieder inhaltsbasiert. Sonst wird die Desktop-flex-basis (357px = Breite in der Zeile) im gestapelten Zustand zur Höhe → Kachel quadratisch. */ .cockpit-overview { width: 100%; max-width: 357px; align-self: flex-start; flex: 0 0 auto; } .cockpit-detail { width: 100%; max-width: 357px; justify-self: start; } .question-card { width: 100%; max-width: 357px; align-self: flex-start; } .path__step { width: 100%; max-width: 357px; align-self: flex-start; } .btn-primary { width: 100%; max-width: 357px; } /* Statement-/CTA-Sektionen mobil ebenfalls linksbündig (Konsistenz mit dem Rest) */ .result-band { align-items: flex-start; text-align: left; } .closing { align-items: flex-start; text-align: left; } } @media (max-width: 1024px) { /* Mobile-Feinschliff (Schrift + Abstände) — gilt bis Tablet (≤1024), damit die Schrift nicht desktop-groß wird, solange das Layout noch einspaltig ist. NAV-Feinschliff; Burger + Dropdown stehen im oberen ≤1024-Block. */ .nav-bar { padding: 20px 24px; } .nav__signet { width: 16px; height: 16px; } .nav__wordmark { font-size: var(--size-wordmark-m); } /* HERO */ .hero { padding: 48px 24px 64px; gap: 28px; } .hero__h1 { font-size: var(--size-hero-content-m); letter-spacing: var(--ls-hero-m); } .hero__row { flex-direction: column; gap: 28px; } .hero__left { gap: 16px; } .hero__lead { font-size: var(--size-lead-m); } .hero__cta-row { flex-direction: column; align-items: flex-start; gap: 16px; } .btn-primary { width: 100%; padding: 15px 24px; font-size: var(--size-button-m); } .hero__scroll-link { font-size: var(--size-button-m); text-align: center; } .cockpit-overview { padding: 20px; gap: 12px; } .cockpit-overview__mini { padding: 12px 14px; gap: 10px; } /* Ampeln bleiben bei Desktop-Größe 14px → kompaktere Kachelhöhe (PO 08.07.) */ .hr-prefix-m { display: inline; } /* Mobile-Label ungekürzt: "HR / Recruiting" */ /* S2 BLINDFLUG */ .blindflug { flex-direction: column; padding: 16px 24px 64px; gap: 18px; } .blindflug__h2 { width: auto; font-size: var(--size-h2-m); } .blindflug__body { gap: 18px; } .blindflug__body p { font-size: var(--size-body-m); } /* S3 DREI FRAGEN */ .questions-band { padding: 56px 24px 64px; } .questions-band__layout { grid-template-columns: 1fr; grid-template-areas: "titles" "cards" "cockpit"; gap: 32px; } .questions-band__h2 { font-size: var(--size-band-h2-m); } .questions-band__sub { font-size: 16px; } /* Drift: Mobile-Literal 16, kein Token-Treffer */ .questions-band__grid { flex-direction: column; gap: 12px; } .cockpit-detail { padding: 20px; gap: 12px; } .question-card { border-width: var(--stroke-bar); /* Mobile: 3 = stroke-bar (Token-Treffer, anders als Desktop) */ padding: 24px 24px 28px; gap: 12px; } .question-card__num { font-size: var(--size-ziffer-m); } .question-card__text { font-size: var(--size-fragen-m); } /* S4 SCHATTENARBEIT */ .shadow-work { flex-direction: column; padding: 64px 24px; gap: 20px; } .shadow-work__intro { width: auto; gap: 18px; } .shadow-work__intro h2 { font-size: var(--size-h2-m); } .shadow-work__intro p { font-size: var(--size-body-m); } .shadow-work__examples { gap: 16px; } .shadow-example { gap: 16px; } .shadow-example p { font-size: var(--size-body-m); } .shadow-work__closing { font-size: var(--size-body-m); font-weight: var(--weight-regular); /* Mobile: Pencil bindet hier $weight-regular (≠ Desktop) */ color: var(--color-meta); /* Mobile: Pencil bindet hier $color-meta (≠ Desktop $color-body) */ } /* S5 GELOBTES LAND */ .result-band { padding: 56px 24px; gap: 12px; } .result-band__pull { max-width: none; font-size: var(--size-pull-m); } /* S6 DER WEG */ .path { padding: 64px 24px; gap: 36px; } .path__h2 { font-size: var(--size-h2-m); } .path__steps { display: contents; } .path__step { gap: 10px; padding-top: 20px; } .path__step-num { font-size: 32px; } /* Sondergröße Mobile, dokumentierte Ausnahme */ .path__step-title { font-size: var(--size-pull-m); } .path__step-text { font-size: var(--size-body-m); } .path__objection { font-size: var(--size-body-m); } .path__jg-note { font-size: var(--size-band-sub-m); } /* S7 ABSENDER / BEWEIS */ .proof { flex-direction: column; padding: 56px 24px; gap: 20px; } .proof__text h2 { font-size: var(--size-h2-m); } .proof__text p { font-size: var(--size-body-m); } .proof__link { font-size: var(--size-internelinks-m); } .proof__facts { width: auto; gap: 20px; } .proof__fact { padding-top: 16px; gap: 4px; } .proof__fact-num { font-size: var(--size-h2-m); } .proof__fact-label { font-size: var(--size-band-sub-m); } /* S8 CLOSING */ .closing { padding: 72px 24px; gap: 18px; } .closing__headline { font-size: var(--size-cta-hl-m); } .closing__text { max-width: none; font-size: var(--size-m5-text-m); } .closing__button-wrap { padding-top: 10px; width: 100%; } .closing .btn-primary { width: 100%; } /* FOOTER */ .site-footer { flex-direction: column; align-items: flex-start; gap: 10px; padding: 24px 24px 32px; } .site-footer__nav { order: 1; gap: 20px; } .site-footer__copy { order: 2; } /* SEITEN-HERO */ .page-hero { padding: 60px 24px 32px; } /* Pencil-Literal 60, kein Token-Treffer */ .page-hero__h1 { font-size: var(--size-hero-content-m); letter-spacing: var(--ls-hero-m); } .page-hero__lead { max-width: none; font-size: var(--size-lead-m); } /* KONTAKT */ .kontakt-content { padding: 8px 24px var(--space-xl); gap: var(--space-lg); } /* Pencil: Mobile-Gap = space-lg (50) */ .kontakt-block { width: 100%; } .kontakt-divider { width: 100%; } .kontakt-form__submit { font-size: var(--size-button-m); } .kontakt-block__subline { font-size: var(--size-body-m); } /* ÜBER */ .about-hero { padding: 60px 24px 32px; } /* Pencil-Literal [60,24,32,24] */ .about-hero__h1 { font-size: var(--size-hero-content-m); letter-spacing: var(--ls-hero-m); } .about-hero__intro { max-width: none; font-size: var(--size-lead-m); } .about-section { padding: var(--space-lg) 24px 0; } /* Pencil: Mobile-Top = space-lg (50) */ .about-section--last { padding-bottom: var(--space-lg); } .about-section__h2 { max-width: none; font-size: var(--size-h2-m); } .about-section__p { max-width: none; font-size: var(--size-body-m); } .about-section__link { font-size: var(--size-internelinks-m); } .about-cta { padding: var(--space-lg) 24px; } /* IMPRESSUM */ .legal-kv { max-width: none; font-size: var(--size-body-m); gap: 6px; } /* Pencil: Mobile-Gap = 6 (Desktop 8) */ /* STANDALONE-SEITEN */ .standalone-headline { font-size: var(--size-hero-content-m); letter-spacing: var(--ls-hero-m); max-width: none; } .standalone-lead { font-size: var(--size-lead-m); max-width: none; } .btn-primary--lg, .btn-primary--md { padding: 16px 24px; } .cookie-lp { padding: 64px 24px; gap: 32px; } .cookie-lp__kopf { gap: 14px; } .cookie-lp__lead { max-width: none; } .trust-card { width: 100%; padding: 28px; gap: 16px; } .cookie-lp__deal { max-width: none; } .cookie-lp__cta { gap: 12px; } .error-page { padding: 100px 24px 80px; gap: 32px; } .error-page__kopf { gap: 12px; } .error-page__lead { max-width: none; } } /* ========================================================================== Consent-Modal (consent.js) — Basis: ruedigervogel.de, auf VuK-Tokens gestellt ========================================================================== */ .consent-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; } .consent-modal__backdrop { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.65); } .consent-modal__card { position: relative; max-width: 520px; width: 100%; padding: 32px; background: var(--color-surface-page); border-radius: var(--radius-mini); text-align: center; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25); } .consent-modal__text { font-family: var(--font-family-body); font-size: 18px; line-height: 1.5; color: var(--color-body); margin-bottom: 24px; } .consent-modal__text strong { font-weight: var(--weight-semibold); } .consent-modal__actions { display: flex; gap: 16px; justify-content: center; margin-bottom: 24px; } .consent-modal__btn { flex: 1; min-width: 120px; padding: 12px 20px; border: none; border-radius: var(--radius-button); font-family: var(--font-family-body); font-size: 16px; font-weight: var(--weight-semibold); cursor: pointer; text-align: center; } .consent-modal__btn--primary { background: var(--color-brand); color: var(--color-on-dark); } .consent-modal__btn--secondary { background: var(--color-meta); color: var(--color-on-dark); } .consent-modal__divider { border: none; border-top: var(--stroke-border) solid var(--color-border); margin-bottom: 16px; } .consent-modal__link { font-family: var(--font-family-body); font-size: 15px; color: var(--color-meta); text-decoration: none; } .consent-modal__link:hover { text-decoration: underline; } body.consent-modal-open { overflow: hidden; } @media (max-width: 640px) { .consent-modal__card { padding: 24px; } .consent-modal__actions { flex-direction: column; } } /* ========================================================================== Zentrierte Inhaltsspalte (Handy/Tablet): der Sektionsinhalt sitzt auf einer 357px-Spalte, horizontal zentriert — bleibt linksbündig, aber ohne den einseitigen Weißraum auf breiten Handys. Das Seitenpolster wächst mit der Breite; farbige Flächen (roter Fragen-Block) bleiben voll, nur der Inhalt rückt ein. Steht bewusst am Dateiende → überschreibt die Sektions-Paddings. ========================================================================== */ @media (max-width: 1024px) { .hero, .blindflug, .questions-band, .shadow-work, .result-band, .path, .proof, .closing { /* round(…, 1px): ganze Pixel — sonst halbes Pixel bei geraden Breiten (z.B. 430px → 36,5px), das in Safari beim Scrollen „springt". */ padding-inline: max(24px, round((100% - 357px) / 2, 1px)); } }