/* =============================================================================
   wg-pages.css: geteiltes Seiten-Chrome der Wachstum-Group-Folgeseiten
   (Kontakt, Karriere, Impressum, Datenschutz). Token-pur: nur var()/color-mix(),
   kein roher Hex/rgb/hsl. Distanzen size-/token-relativ, kein vw-Distanz-Anti-Pattern.
   Lade-Reihenfolge: _tokens/_base.css -> wachstum-group.css -> Komponenten-CSS -> diese Datei.
   ============================================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--color-bg); color: var(--color-ink);
  font-family: var(--font-body); line-height: 1.6; -webkit-font-smoothing: antialiased;
  min-height: 100vh; display: flex; flex-direction: column;
}
main { flex: 1 0 auto; }
h1, h2, h3 { font-family: var(--font-headline); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
a { color: inherit; }
img { max-width: 100%; display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* --- Nav (identisch zur Home): VOLLE Breite, Inhalt auf 1080px = .container gedeckelt + zentriert (P2.5).
   width:100% ist Pflicht: body{display:flex} macht die Nav zum Flex-Item, das sonst zusammen mit dem
   Komponenten-margin-inline:auto auf Content-Breite schrumpft (Bug: Nav auf Folgeseiten gequetscht). --- */
.sticky-mini-nav { width: 100%; padding-inline: max(var(--space-m), calc((100% - 1080px) / 2)); }
.sticky-mini-nav__brand { display: inline-flex; align-items: center; min-height: 44px; }
.sticky-mini-nav__logo { height: clamp(19px, 2.2vw, 25px); width: auto; display: block; }

/* --- Sektion / Container --- */
.section { padding: clamp(3rem, 8vw, 6rem) var(--space-m); }
.section--surface { background: var(--color-bg-warm); }
.container { max-width: 1080px; margin: 0 auto; }
.container--narrow { max-width: 760px; margin: 0 auto; }

/* --- Seiten-Hero (kompakt, fuer Unterseiten) --- */
.page-hero { padding: clamp(5rem, 12vw, 9rem) var(--space-m) clamp(2rem, 5vw, 3.5rem); }
.page-hero__eyebrow { display: inline-block; font-size: var(--font-scale-small); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-primary); margin-bottom: var(--space-s); }
.page-hero__title { font-size: clamp(2.2rem, 6vw, 3.6rem); font-weight: 800; }
.page-hero__intro { color: var(--color-ink-soft); max-width: 60ch; margin-top: var(--space-m); font-size: clamp(1.05rem, 2.2vw, 1.25rem); line-height: 1.6; }
.page-hero__intro strong { color: var(--color-ink); font-weight: 600; }

/* --- Buttons (Pill, an cta-band angelehnt) --- */
.wg-btn { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; padding: var(--space-s) var(--space-l); font-family: var(--font-body); font-size: var(--font-scale-body); font-weight: 600; line-height: 1.2; text-decoration: none; color: var(--color-on-primary); background: var(--color-primary); border: none; border-radius: var(--radius-pill); cursor: pointer; transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }
.wg-btn:hover, .wg-btn:focus-visible { background: var(--color-primary-strong); transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.wg-btn:focus-visible { outline: 2px solid var(--color-on-primary); outline-offset: 2px; }
.wg-btn--ghost { color: var(--color-ink); background: transparent; border: 1px solid var(--color-line); }
.wg-btn--ghost:hover, .wg-btn--ghost:focus-visible { background: color-mix(in srgb, var(--color-ink) 8%, transparent); color: var(--color-ink); }

/* --- Kontakt-Formular --- */
.form { margin-top: var(--space-l); display: grid; gap: var(--space-m); max-width: 620px; }
.form__field { display: grid; gap: var(--space-xs); }
.form__label { font-size: var(--font-scale-small); font-weight: 600; letter-spacing: 0.02em; color: var(--color-ink); }
.form__input, .form__textarea {
  width: 100%; font-family: var(--font-body); font-size: var(--font-scale-body); color: var(--color-ink);
  background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-card);
  padding: var(--space-s); line-height: 1.5; transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form__textarea { min-height: 9rem; resize: vertical; }
.form__input::placeholder, .form__textarea::placeholder { color: color-mix(in srgb, var(--color-ink-soft) 75%, transparent); }
.form__input:focus, .form__textarea:focus { outline: none; border-color: color-mix(in srgb, var(--color-primary) 60%, var(--color-line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent); }
/* Honeypot: fuer Menschen unsichtbar, faengt Bots ab (token-frei, JS-frei) */
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__submit { justify-self: start; margin-top: var(--space-xs); }
.form__note { font-size: var(--font-scale-small); color: var(--color-ink-soft); line-height: 1.55; max-width: 60ch; }
/* Erfolgs-/Fehler-Banner nach Formular-Versand (funktionale Farben, token-eingebettet) */
.form__status { padding: var(--space-s) var(--space-m); border-radius: var(--radius-card); border: 1px solid; margin-bottom: var(--space-m); font-size: var(--font-scale-body); line-height: 1.55; max-width: 620px; }
.form__status--ok { border-color: color-mix(in srgb, #2fbf71 70%, var(--color-line)); background: color-mix(in srgb, #2fbf71 12%, transparent); color: color-mix(in srgb, #2fbf71 32%, var(--color-ink)); }
.form__status--err { border-color: color-mix(in srgb, #e05656 70%, var(--color-line)); background: color-mix(in srgb, #e05656 12%, transparent); color: color-mix(in srgb, #e05656 38%, var(--color-ink)); }
.form__status a { color: inherit; text-decoration: underline; }

/* --- Direkt-Alternativen (Mail / LinkedIn) --- */
.contact-alts { margin-top: var(--space-xl); display: grid; gap: var(--space-m); grid-template-columns: 1fr; }
@media (min-width: 640px) { .contact-alts { grid-template-columns: 1fr 1fr; } }
.contact-alt { border: 1px solid var(--color-line); border-radius: var(--radius-card); padding: var(--space-l); background: var(--color-surface); }
.contact-alt__label { font-size: var(--font-scale-small); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-ink-soft); }
.contact-alt__value { display: inline-block; margin-top: var(--space-xs); font-family: var(--font-headline); font-size: 1.15rem; font-weight: 600; color: var(--color-ink); text-decoration: none; word-break: break-word; transition: color 0.2s ease; }
.contact-alt__value:hover, .contact-alt__value:focus-visible { color: var(--color-primary); }

/* --- Rechtstext-Geruest (Impressum / Datenschutz) --- */
.legal { margin-top: var(--space-l); }
.legal__lede { color: var(--color-ink-soft); max-width: 70ch; line-height: 1.7; }
.legal__note { margin-top: var(--space-l); padding: var(--space-m); border: 1px solid var(--color-line); border-left: 3px solid var(--color-primary); border-radius: var(--radius-card); background: var(--color-surface); color: var(--color-ink-soft); font-size: var(--font-scale-small); line-height: 1.65; }
.legal__note strong { color: var(--color-ink); font-weight: 600; }
.legal__block { margin-top: var(--space-xl); }
.legal__h { font-size: clamp(1.25rem, 3vw, 1.6rem); color: var(--color-ink); overflow-wrap: break-word; hyphens: auto; }
.legal__body { margin-top: var(--space-s); color: var(--color-ink-soft); max-width: 70ch; line-height: 1.7; overflow-wrap: break-word; hyphens: auto; }
.legal__body a { color: var(--color-primary); text-decoration: none; }
.legal__body a:hover { text-decoration: underline; }
.legal__placeholder { color: var(--color-primary); font-weight: 600; }

/* Rechtstext-Dokument (Datenschutz): native Heading-/Absatz-/Listen-Typografie im Legal-Design */
.legal--doc h2 { font-size: clamp(1.4rem, 3.4vw, 1.9rem); color: var(--color-ink); margin-top: var(--space-xl); overflow-wrap: break-word; hyphens: auto; }
.legal--doc h2:first-child { margin-top: 0; }
.legal--doc h3 { font-size: clamp(1.15rem, 2.6vw, 1.45rem); color: var(--color-ink); margin-top: var(--space-l); overflow-wrap: break-word; hyphens: auto; }
.legal--doc h4 { font-size: 1.05rem; color: var(--color-ink); margin-top: var(--space-m); }
.legal--doc h5 { font-size: 0.95rem; color: var(--color-ink-soft); margin-top: var(--space-m); }
.legal--doc p { margin-top: var(--space-s); color: var(--color-ink-soft); max-width: 75ch; line-height: 1.7; overflow-wrap: break-word; }
.legal--doc ul { margin: var(--space-s) 0 0; padding-left: 1.25rem; color: var(--color-ink-soft); max-width: 75ch; line-height: 1.7; }
.legal--doc li { margin-top: var(--space-xs); }
.legal--doc a { color: var(--color-primary); text-decoration: none; overflow-wrap: anywhere; }
.legal--doc a:hover { text-decoration: underline; }
.legal--doc strong { color: var(--color-ink); font-weight: 600; }

/* --- Tiefe: dezente Oberlicht-Kante auf den Folgeseiten-Karten (wie Home) --- */
.contact-alt, .legal__note { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-ink) 7%, transparent); }

/* --- Footer (Premium-Struktur, identisch zur Home) --- */
.footer { background: var(--color-bg-warm); border-top: 1px solid var(--color-line); padding: clamp(3.5rem,8vw,5.5rem) var(--space-m) var(--space-l); }
.footer__top { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); }
@media (min-width: 860px) { .footer__top { grid-template-columns: 1.4fr 2fr; gap: clamp(var(--space-xl), 8vw, var(--space-xxl)); } }
.footer__wordmark { height: 26px; width: auto; opacity: 0.95; }
.footer__tagline { margin-top: var(--space-m); color: var(--color-ink-soft); font-size: var(--font-scale-small); line-height: 1.6; max-width: 38ch; }
.footer__social { margin-top: var(--space-l); display: flex; flex-wrap: wrap; gap: var(--space-s) var(--space-m); }
.footer__social a { display: inline-flex; align-items: center; gap: 6px; color: var(--color-ink-soft); font-size: var(--font-scale-small); text-decoration: none; transition: color 0.2s ease; }
.footer__social a:hover { color: var(--color-primary); }
.footer__li-icon { fill: currentColor; flex-shrink: 0; }
.footer__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-l) var(--space-m); }
@media (min-width: 560px) { .footer__cols { grid-template-columns: repeat(3, 1fr); } }
.footer__col { display: flex; flex-direction: column; gap: var(--space-s); }
.footer__col-title { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ink-soft); margin-bottom: var(--space-xs); font-family: var(--font-body); }
.footer__col a { color: var(--color-ink); font-size: var(--font-scale-small); text-decoration: none; transition: color 0.2s ease; }
.footer__col a:hover { color: var(--color-primary); }
.footer__col--brands { gap: var(--space-m); }
.footer__brand-link { display: inline-flex; }
.footer__brand-link img { height: 28px; width: auto; opacity: 0.78; transition: opacity 0.2s ease; }
.footer__brand-link img[src*="logo-mr"] { height: 36px; }
.footer__brand-link:hover img { opacity: 1; }
.footer__bar { margin-top: clamp(var(--space-xl), 6vw, var(--space-xxl)); padding-top: var(--space-l); border-top: 1px solid var(--color-line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-s) var(--space-m); }
.footer__copy, .footer__meta { color: var(--color-ink-soft); font-size: var(--font-scale-small); }   /* kein opacity: voll deckendes ink-soft haelt AA-Kontrast (Feedback-R2-Verify) */
.footer__meta { letter-spacing: 0.02em; }

/* =============================================================================
   Kontakt-Seite (Iteration 3, 27.06.): Premium-Hub-Kontakt. Router-Tiles ->
   Formular + Reassurance-Rail -> Direkt-Alternativen -> Sub-Brand-Bruecke.
   Premium-Tiefe (Oberlicht-Kante + Low-Spread-Schatten) wie Home. Token-pur, DARK.
   ============================================================================ */
:root { --wg-shadow-card: 0 24px 60px -28px rgba(0,0,0,.7); --wg-shadow-lift: 0 34px 80px -24px rgba(0,0,0,.85); --wg-edge: inset 0 1px 0 rgba(255,255,255,.07); }

/* Hero-Glow (zwei Herzen) nur auf der Kontakt-Seite */
.page-hero--glow { position: relative; isolation: isolate; }
.page-hero--glow::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.7;
  background: radial-gradient(42vw 26vw at 30% 38%, color-mix(in srgb, var(--color-primary) 13%, transparent), transparent 70%),
             radial-gradient(42vw 26vw at 70% 42%, color-mix(in srgb, var(--color-secondary) 11%, transparent), transparent 70%); }

/* Router-Tiles (auf die Submarken leiten) */
.kontakt-router__title { text-align: center; font-family: var(--font-headline); font-size: clamp(1.5rem, 4vw, 2.2rem); font-weight: 700; letter-spacing: -0.02em; color: var(--color-ink); }
.kontakt-router { list-style: none; margin: var(--space-l) 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--space-m); }
@media (min-width: 720px) { .kontakt-router { grid-template-columns: 1fr 1fr; } }
.kontakt-router__tile { --tile-accent: var(--color-primary); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-s);
  padding: clamp(var(--space-l), 3.5vw, var(--space-xl)); border: 1px solid var(--color-line); border-radius: var(--radius-card);
  background: radial-gradient(135% 95% at 100% 0%, color-mix(in srgb, var(--tile-accent) 13%, transparent), transparent 55%), var(--color-surface);
  box-shadow: var(--wg-edge), var(--wg-shadow-card); transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease; }
.kontakt-router__tile--mr { --tile-accent: var(--color-secondary); }
.kontakt-router__tile:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), var(--wg-shadow-lift); }
.kontakt-router__logo { height: 50px; width: auto; max-width: 230px; object-fit: contain; }
.kontakt-router__tile--mr .kontakt-router__logo { height: 62px; }
.kontakt-router__h { font-family: var(--font-headline); font-size: clamp(1.2rem, 2.2vw, 1.45rem); font-weight: 700; color: var(--color-ink); margin: 0; }
.kontakt-router__p { color: var(--color-ink-soft); font-size: var(--font-scale-body); margin: 0; }
.kontakt-router__cta { margin-top: var(--space-xs); display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 48px; padding: var(--space-s) var(--space-l);
  background: var(--tile-accent); color: var(--color-on-primary); border-radius: var(--radius-pill); font-weight: 600; text-decoration: none;
  box-shadow: 0 12px 30px -14px color-mix(in srgb, var(--tile-accent) 65%, transparent); transition: filter .2s ease; }
.kontakt-router__cta:hover { filter: brightness(1.07); }
.kontakt-router__bridge { text-align: center; color: var(--color-ink-soft); font-size: var(--font-scale-small); margin-top: var(--space-l); }

/* Formular + Reassurance-Rail (2-spaltig ab 820px) */
.kontakt-grid { display: grid; grid-template-columns: 1fr; gap: clamp(var(--space-l), 5vw, var(--space-xl)); }
@media (min-width: 820px) { .kontakt-grid { grid-template-columns: 1.4fr 1fr; align-items: start; } }
.kontakt-form__title { font-family: var(--font-headline); font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 700; letter-spacing: -0.02em; color: var(--color-ink); margin: var(--space-xs) 0 0; }
.kontakt-form-col .form { margin-top: var(--space-l); max-width: none; }
/* Select im Input-Look + dezenter Pfeil */
.form__select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 2.5rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-ink-soft) 50%), linear-gradient(135deg, var(--color-ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 15px) center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.form__select option { color: var(--color-ink); background: var(--color-bg-warm); }
.kontakt-rail { border: 1px solid var(--color-line); border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--wg-edge), var(--wg-shadow-card); padding: clamp(var(--space-l), 3vw, var(--space-xl)); }
.kontakt-rail__title { font-family: var(--font-headline); font-size: 1.15rem; font-weight: 700; color: var(--color-ink); margin: 0 0 var(--space-m); }
.kontakt-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-m); }
.kontakt-steps__item { display: grid; grid-template-columns: auto 1fr; gap: var(--space-s); align-items: start; }
.kontakt-steps__item p { margin: 0; color: var(--color-ink-soft); font-size: var(--font-scale-small); line-height: 1.55; }
.kontakt-steps__item strong { color: var(--color-ink); font-weight: 600; }
.kontakt-steps__num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--color-primary); color: var(--color-on-primary); font-weight: 700; font-size: 0.85rem; flex-shrink: 0; box-shadow: 0 0 24px color-mix(in srgb, var(--color-primary) 35%, transparent); }
.kontakt-rail__trust { margin: var(--space-l) 0 0; padding-top: var(--space-m); border-top: 1px solid var(--color-line); color: var(--color-ink); font-size: var(--font-scale-small); line-height: 1.5; font-weight: 500; }

/* Sub-Brand-Bruecke (Lockup + Links) */
.closer__lockup { display: flex; align-items: center; justify-content: center; gap: clamp(var(--space-l), 7vw, var(--space-xxl)); flex-wrap: wrap; }
.closer__logo { height: clamp(34px, 4.5vw, 46px); width: auto; }
.closer__logo[src*="logo-mr"] { height: clamp(44px, 5.5vw, 58px); }
.closer__x { color: var(--color-ink-soft); font-size: clamp(1rem, 2vw, 1.3rem); font-weight: 300; }
.kontakt-bridge { text-align: center; }
.kontakt-bridge__text { margin-top: var(--space-l); color: var(--color-ink-soft); font-size: var(--font-scale-body); }
.kontakt-bridge__text a { color: var(--color-primary); font-weight: 600; text-decoration: none; }
.kontakt-bridge__text a.kontakt-bridge__mr { color: var(--color-secondary); }
.kontakt-bridge__text a:hover { text-decoration: underline; }

/* Karriere-Seite (Iteration 3): Haltungs-Karten + Initiativbewerbung-Closer (reuse Kontakt-Vokabular) */
.karriere-values { list-style: none; margin: var(--space-l) 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--space-m); }
@media (min-width: 760px) { .karriere-values { grid-template-columns: repeat(3, 1fr); } }
.karriere-value { border: 1px solid var(--color-line); border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--wg-edge), var(--wg-shadow-card); padding: clamp(var(--space-l), 3vw, var(--space-xl)); }
.karriere-value__h { font-family: var(--font-headline); font-size: clamp(1.15rem, 2vw, 1.35rem); font-weight: 700; color: var(--color-ink); margin: 0 0 var(--space-s); }
.karriere-value__p { color: var(--color-ink-soft); font-size: var(--font-scale-body); line-height: 1.55; margin: 0; }
.karriere-closer__text { margin: var(--space-m) auto 0; max-width: 60ch; color: var(--color-ink-soft); line-height: 1.6; }
.karriere-closer__note { margin-top: var(--space-m); color: var(--color-ink-soft); font-size: var(--font-scale-small); }