/* ═══════════════════════════════════════════════════════════════════════ SEKTIONSGRUPPE „TEAM" — [tp_team] · Neuaufbau „Kontrast-Rhythmus" Datei: tp-neuaufbau/sektionen/team.css · Stand: 2026-08-07 MATERIAL-RHYTHMUS (Stand Neuaufbau 2026-08-13) — kein Kapitel wie sein Nachbar. Die vier Kapitel liegen seit dem Umbau in VIER eigenen
- Hüllen (siehe tp_team_shortcode), das Material kommt aus dem Fundament: · Intro + Zahlen → .tp-sec--light Papier + Rasterlinien · Geschichte → .tp-sec--dark Maschinenblau; Zeitstrahl von Haarlinie nach Rot, letzter Punkt = heute · Orga-Team → .tp-sec--sand tieferes Papier; helle Porträtkarten darauf, Platzhalter als dunkle Monogramm-Platte · Finale-CTA → .tp-sec--light --tight, helle Karte, rote Topline ACHSE: alles zentriert. Vorher stand das Intro links und alles darunter mittig — zwei Achsen auf einer Seite. !important-Overrides in dieser Datei sind Alt-Kaskaden-Abwehr: der Audit-Fix-Style-Block im von treckerparty-design.php setzt für .tp-tm-*-Klassen noch weiße/rote Farben und Font-Floors mit !important (dunkle Tonwelt). Diese Datei lädt später und gewinnt per Spezifität. ═══════════════════════════════════════════════════════════════════════ */ /* ═══════════ SEKTIONS-GERÜST ═══════════ Material und Rasterlinien kommen jetzt komplett aus dem Fundament (.tp-sec--light / --dark / --sand). Die frühere Eigenfläche `.tp-sec.tp-team{ background: … }` ist entfallen — sie hätte jedes Material überschrieben, weil sie mit (0,2,0) spezifischer ist. */ /* Blockrhythmus innerhalb eines Kapitels (zwischen Kapiteln zählt --tp-sec) */ .tp-tm-intro{ margin-bottom: 0; } .tp-tm-block{ margin-bottom: 0; } /* ═══════════ INTRO — EINE Achse: die Mitte ═══════════ Vorher linksbündig, während jeder Kapitelkopf darunter zentriert war. Jetzt folgt das Intro derselben Kopfgruppen-Logik wie der Rest der Seite: Mono-Etikett → rote Linie → Anton-Headline → Lead. */ .tp-tm-intro{ display: flex; flex-direction: column; align-items: center; text-align: center; } .tp-tm-intro__text{ display: flex; flex-direction: column; align-items: center; width: 100%; max-width: none; } .tp-team .tp-tm-intro__eye{ display: inline-flex; align-items: center; gap: var(--tp-s1); font-family: var(--nb-font-mono); font-size: var(--nb-fs-mono) !important; /* Abwehr: Font-Floor 13px */ line-height: 1.4; letter-spacing: var(--tp-ls-mono); text-transform: uppercase; font-weight: 400; color: var(--nb-ink-3) !important; /* Abwehr: #FF4D57 !important */ background: transparent; border: 0; border-radius: 0; padding: 0; margin: 0; } .tp-team .tp-tm-intro__h{ font-family: var(--nb-font-display); font-weight: 400; text-transform: uppercase; font-size: var(--tp-fs-d2); line-height: var(--tp-lh-display); letter-spacing: var(--tp-ls-display); color: var(--nb-ink); margin: 0 0 var(--tp-s5); max-width: var(--tp-measure-head); } /* Rote Linie zwischen Mono-Zeile und Headline (Kopfgruppen-Muster, mittig) */ .tp-team .tp-tm-intro__h::before{ content: ""; display: block; width: 56px; height: 2px; background: var(--nb-red); margin: var(--tp-s3) auto var(--tp-s4); } .tp-team .tp-tm-intro__lead{ font-family: var(--nb-font-text); font-size: var(--tp-fs-body); line-height: var(--tp-lh-body); color: var(--nb-ink-2); max-width: var(--tp-measure); /* 68ch = 60–75 Zeichen */ margin: 0 auto var(--tp-s3); text-align: left; /* Fließtext bleibt links — nur der Block ist zentriert */ } /* Erster Absatz ist der Lead: eine Stufe größer, mittig, eigene Lesebreite */ .tp-team .tp-tm-intro__lead:first-of-type{ font-size: var(--nb-fs-lead); line-height: var(--tp-lh-lead); max-width: var(--tp-measure-lead); text-align: center; color: var(--nb-ink-2); margin-bottom: var(--tp-s5); } .tp-team .tp-tm-intro__lead:last-of-type{ margin-bottom: 0; } .tp-team .tp-tm-intro__lead strong{ color: var(--nb-ink); font-weight: 600; } /* ═══════════ STATS — Hairline-Band (Muster .tp-zh-board) ═══════════ */ .tp-tm-stats{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; width: 100%; margin-top: var(--tp-s7); border-top: 1px solid var(--nb-hair-l); border-bottom: 1px solid var(--nb-hair-l); } .tp-tm-stat{ display: flex; flex-direction: column; align-items: center; gap: var(--tp-s2); padding: var(--tp-s5) var(--tp-s3); text-align: center; background: transparent; border: 0; border-left: 1px solid var(--nb-hair-l); border-radius: 0; transition: none; transform: none; } .tp-tm-stat:first-child{ border-left: 0; } .tp-tm-stat:hover{ border-color: var(--nb-hair-l); transform: none; } .tp-team .tp-tm-stat strong{ font-family: var(--nb-font-display); font-weight: 400; font-size: var(--nb-fs-l); line-height: 1; letter-spacing: .006em; color: var(--nb-ink); } .tp-team .tp-tm-stat span{ font-family: var(--nb-font-mono); font-size: var(--nb-fs-mono) !important; /* Abwehr: Font-Floor 13px */ line-height: 1.4; letter-spacing: .24em; text-transform: uppercase; color: var(--nb-ink-3); } @media (max-width: 900px){ .tp-tm-stats{ grid-template-columns: 1fr 1fr; } .tp-tm-stat{ border-left: 1px solid var(--nb-hair-l); border-bottom: 1px solid var(--nb-hair-l); } .tp-tm-stat:nth-child(2n+1){ border-left: 0; } .tp-tm-stat:nth-child(n+3){ border-bottom: 0; } } @media (max-width: 640px){ .tp-tm-stats{ grid-template-columns: 1fr; } .tp-tm-stat{ border-left: 0; border-bottom: 1px solid var(--nb-hair-l); padding: 34px 16px 30px; } .tp-tm-stat:last-child{ border-bottom: 0; } } /* ═══════════ GRUPPENKÖPFE — zentriert (macht das Fundament) ═══════════ .tp-pl-block__head wird von neuaufbau.css als khead--mini gestylt. Hier nur Alt-Kaskaden-Abwehr für die Sub-Zeile (war weiß !important). */ .tp-team .tp-pl-block__head span{ color: var(--nb-ink-3) !important; } .tp-team .tp-pl-block__head h2{ color: var(--nb-ink); } /* ═══════════ TIMELINE — vertikaler Strahl (Muster .tp-jahre__line) ═══════════ KASKADEN-FALLE: Das Kadence-Theme setzt in content.min.css `.single-content ul, .single-content ol { margin: 0 0 var(--global-md-spacing) }`. Das ist (0,1,1) und schlägt jede einfache Klassenregel (0,1,0) — der Zeitstrahl stand deshalb trotz `margin: 0 auto` links am Rand statt mittig. Deshalb hier und bei allen anderen ul/ol dieser Seiten die Doppelklasse. */ .tp-team .tp-tm-timeline, .tp-tm-timeline{ list-style: none; padding: 0; margin: 0 auto; max-width: 840px; display: block; position: relative; border-left: 2px solid var(--nb-hair-l); gap: 0; } .tp-tm-timeline::before{ content: none; } /* alte Mittel-Linie aus */ /* Der Strahl läuft von der Haarlinie des Kapitels ins Signalrot (= heute). --nb-hair-l schaltet im dunklen Kapitel automatisch auf die helle Haarlinie um (Fundament 5.6), deshalb steht hier kein fester Farbwert mehr. */ .tp-tm-timeline::after{ content: ''; position: absolute; left: -2px; top: 0; width: 2px; height: 100%; background: linear-gradient(180deg, var(--nb-hair-l) 0%, var(--nb-red) 100%); } .tp-tm-mile{ display: grid; grid-template-columns: 110px 1fr; gap: var(--tp-s3); align-items: baseline; padding: var(--tp-s4) 0 var(--tp-s4) var(--tp-s4); border-top: 1px solid var(--nb-hair-l); position: relative; } .tp-tm-mile:first-child{ border-top: 0; } /* Punkt auf der Linie — Kern in der Kapitelfarbe, damit der Strahl „durch" den Ring läuft. --tp-sec-bg wird je Kapitel gesetzt (siehe unten). */ .tp-tm-mile::before{ content: ''; position: absolute; left: -10px; top: 1.7rem; width: 15px; height: 15px; box-sizing: border-box; background: var(--tp-sec-bg, var(--nb-paper)); border: 2px solid var(--nb-ink-3); border-radius: 50%; z-index: 1; } /* Kapitel „Geschichte" liegt auf --dark: Kern in Maschinenblau statt Papier */ .tp-team--geschichte{ --tp-sec-bg: var(--tp-d1); } .tp-tm-mile:last-child::before{ background: var(--nb-red); border-color: var(--nb-red); box-shadow: 0 0 0 6px rgba(227,6,19,.14); } .tp-team .tp-tm-mile__year{ font-family: var(--nb-font-display); font-weight: 400; font-size: var(--nb-fs-m) !important; /* Abwehr: Audit-clamp !important */ line-height: 1 !important; letter-spacing: .01em; text-transform: uppercase; color: var(--nb-ink) !important; /* Abwehr: #FF4D57 !important */ text-align: left; padding: 0; position: static; } .tp-team .tp-tm-mile:last-child .tp-tm-mile__year{ color: var(--tp-red-ink) !important; } .tp-tm-mile__year::after{ content: none; } /* alter Punkt am Jahr aus */ /* Body: keine Karte mehr — ruhiger Text auf Papier */ .tp-tm-mile__body{ background: transparent; border: 0; border-radius: 0; padding: 0; transition: none; transform: none; } .tp-tm-mile__body:hover{ border-color: transparent; transform: none; } .tp-team .tp-tm-mile__body h3{ font-family: var(--nb-font-display); font-weight: 400; font-size: var(--tp-fs-d3); line-height: 1.06; letter-spacing: var(--tp-ls-display); text-transform: uppercase; color: var(--nb-ink); margin: 0 0 var(--tp-s2); } .tp-team .tp-tm-mile__body p{ font-family: var(--nb-font-text); font-size: var(--tp-fs-body) !important; /* Abwehr: weiß + Floor !important */ line-height: var(--tp-lh-body) !important; color: var(--nb-ink-2) !important; margin: 0; max-width: var(--tp-measure); } .tp-team .tp-tm-mile__body p strong{ color: var(--nb-ink); font-weight: 600; } @media (max-width: 640px){ .tp-tm-mile{ grid-template-columns: 1fr; gap: 6px; padding: 20px 0 20px 24px; } .tp-tm-mile::before{ top: 1.35rem; } } /* ═══════════ „40+ HÄNDE"-BAND — helle Leiste mit Hairline ═══════════ */ /* Auf der Mittelachse wie alles andere im Kapitel — vorher klebte der Inhalt links in einer Leiste über die volle Breite. */ .tp-tm-band{ display: flex; align-items: center; justify-content: center; gap: var(--tp-s2); flex-wrap: wrap; width: fit-content; max-width: 100%; margin: 0 auto var(--tp-s6); padding: var(--tp-s2) var(--tp-s5); background: var(--nb-surface); border: 1px solid var(--nb-hair-l); border-radius: var(--nb-r-ui); } /* Doppelklasse gegen `.single-content ul` des Themes (siehe Notiz Timeline) */ .tp-team .tp-tm-band__links, .tp-tm-band__links{ list-style: none; margin: 0; padding: 0; display: flex; align-items: center; } .tp-tm-band__links li{ width: 22px; height: 22px; margin-left: -6px; border-radius: 50%; background: var(--nb-paper-deep); border: 2px solid var(--nb-surface); box-shadow: none; } .tp-tm-band__links li:first-child{ margin-left: 0; } .tp-tm-band__links li:last-child{ background: var(--nb-red); box-shadow: none; } .tp-tm-band__cap{ margin: 0; font-family: var(--nb-font-text); font-size: var(--tp-fs-body); line-height: var(--tp-lh-body); color: var(--nb-ink-2); text-align: center; /* mobil bricht die Zeile — dann mittig wie der Rest */ } .tp-tm-band__cap strong{ font-family: var(--nb-font-text); font-weight: 700; font-size: inherit; letter-spacing: 0; color: var(--tp-red-ink); margin-right: .15em; } /* Entrance (JS im Shortcode setzt .is-live per IntersectionObserver) */ html.tp-anim .tp-tm-band__links li{ transition: transform .45s var(--nb-ease), opacity .45s var(--nb-ease); } html.tp-anim .tp-tm-band:not(.is-live) .tp-tm-band__links li{ opacity: 0; transform: translateY(10px) scale(.6); } .tp-tm-band.is-live .tp-tm-band__links li{ opacity: 1; transform: none; } html.tp-anim .tp-tm-band.is-live .tp-tm-band__links li:nth-child(1){ transition-delay: .05s; } html.tp-anim .tp-tm-band.is-live .tp-tm-band__links li:nth-child(2){ transition-delay: .12s; } html.tp-anim .tp-tm-band.is-live .tp-tm-band__links li:nth-child(3){ transition-delay: .19s; } html.tp-anim .tp-tm-band.is-live .tp-tm-band__links li:nth-child(4){ transition-delay: .26s; } html.tp-anim .tp-tm-band.is-live .tp-tm-band__links li:nth-child(5){ transition-delay: .33s; } html.tp-anim .tp-tm-band.is-live .tp-tm-band__links li:nth-child(6){ transition-delay: .40s; } html.tp-anim .tp-tm-band.is-live .tp-tm-band__links li:nth-child(7){ transition-delay: .47s; } html.tp-anim .tp-tm-band.is-live .tp-tm-band__links li:nth-child(8){ transition-delay: .54s; } @media (prefers-reduced-motion: reduce){ html.tp-anim .tp-tm-band__links li{ transition: none !important; opacity: 1 !important; transform: none !important; } } /* ═══════════ GRUPPENFOTO DER CREW ═══════════ Seit 14.08.2026 zeigt das Kapitel ein echtes Gruppenbild statt sechs Platzhalterkarten. Bewusst als im Fluss, nicht als background-image: das Foto ist 3:2 und darf NICHT quadratisch beschnitten werden (außen stehen Personen), außerdem liefert WordPress so srcset für kleine Displays. */ .tp-tm-crew{ margin: 0; border-radius: var(--tp-r-fl); overflow: hidden; background: var(--tp-surface); border: 1px solid var(--tp-hair-l); } /* BEWUSST OHNE max-height/object-fit: Ein Deckel schneidet unten die Sponsorenbanner an (halbe Logos sehen nach Versehen aus) und oben die erhobenen Hände. Das Bild läuft deshalb im vollen 3:2 — die Breite begrenzt ohnehin der Satzspiegel. */ .tp-tm-crew__img{ display: block; width: 100%; height: auto; } .tp-tm-crew__cap{ margin: 0; padding: var(--tp-s3) var(--tp-s4); border-top: 1px solid var(--tp-hair-l); font-family: var(--tp-font-mono); font-size: var(--tp-fs-mono); letter-spacing: var(--tp-ls-mono); text-transform: uppercase; color: var(--tp-ink-2); text-align: center; } @media (max-width: 700px){ .tp-tm-crew__cap{ padding: var(--tp-s2) var(--tp-s3); } } /* ═══════════ TEAM-MITGLIEDER — helle .nb-day-Karten ═══════════ */ /* 6 Spuren, jede Karte über 2 = drei pro Reihe. Die doppelte Spurzahl ist nötig, damit eine angebrochene letzte Reihe MITTIG sitzt statt links zu kleben (vorher: auto-fill → 4 Spalten, 6 Mitglieder = 4 + 2 Waisen). */ .tp-tm-members{ display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--tp-gap-lg) var(--nb-gap); } .tp-tm-members > *{ grid-column: span 2; } .tp-tm-members > :last-child:nth-child(3n + 1){ grid-column: 3 / span 2; } .tp-tm-members > :nth-last-child(2):nth-child(3n + 1){ grid-column: 2 / span 2; } @media (max-width: 1000px){ .tp-tm-members{ grid-template-columns: repeat(4, minmax(0, 1fr)); } .tp-tm-members > *, .tp-tm-members > :nth-last-child(2):nth-child(3n + 1){ grid-column: span 2; } .tp-tm-members > :last-child:nth-child(3n + 1), .tp-tm-members > :last-child:nth-child(2n + 1){ grid-column: 2 / span 2; } } @media (max-width: 640px){ .tp-tm-members{ grid-template-columns: minmax(0, 1fr); } .tp-tm-members > *, .tp-tm-members > :last-child:nth-child(2n + 1), .tp-tm-members > :last-child:nth-child(3n + 1), .tp-tm-members > :nth-last-child(2):nth-child(3n + 1){ grid-column: 1 / -1; } } .tp-tm-member{ position: relative; display: flex; flex-direction: column; background: var(--nb-surface); border: 1px solid var(--nb-hair-l); border-radius: var(--nb-r-fl); overflow: hidden; box-shadow: 0 1px 0 rgba(22,24,28,.03); transition: transform .2s ease, box-shadow .2s ease; } .tp-tm-member::before{ content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--nb-hair-l); z-index: 1; } .tp-tm-member:hover{ border-color: var(--nb-hair-l); transform: translateY(-4px); box-shadow: 0 18px 44px -22px rgba(22,24,28,.45); } /* Porträt oben — Foto ruhig entsättigt. Ohne Foto: dunkle Monogramm-Platte im Maschinenton mit Bühnenlicht und Signalraute (dasselbe Motiv wie bei den Band-Karten). Der frühere paper-deep-Grund war auf dem Sand-Kapitel praktisch unsichtbar und sah aus wie ein Ladefehler. */ .tp-tm-member__photo{ aspect-ratio: 1 / 1; background-color: var(--nb-paper-deep); background-size: cover; background-position: center top; background-repeat: no-repeat; display: flex; align-items: center; justify-content: center; position: relative; filter: saturate(.82) contrast(1.03); } .tp-tm-member__photo:has(.tp-tm-member__initials){ background-color: var(--tp-d1); background-image: radial-gradient(72% 58% at 50% 32%, rgba(227,6,19,.20) 0%, rgba(227,6,19,0) 70%), var(--tp-mat-dark); filter: none; } .tp-tm-member__photo:has(.tp-tm-member__initials)::after{ content: ""; position: absolute; left: 18px; top: 18px; width: 9px; height: 9px; background: var(--tp-red); transform: rotate(45deg); } .tp-tm-member__initials{ font-family: var(--nb-font-display); font-weight: 400; font-size: var(--tp-fs-d1); line-height: 1; letter-spacing: .06em; text-indent: .06em; text-transform: uppercase; color: rgba(243,239,232,.30); } .tp-tm-member__body{ padding: var(--tp-s4); display: flex; flex-direction: column; gap: var(--tp-s2); } .tp-team .tp-tm-member__name{ font-family: var(--nb-font-display); font-weight: 400; font-size: var(--tp-fs-d3); line-height: 1.06; letter-spacing: var(--tp-ls-display); text-transform: uppercase; color: var(--nb-ink); margin: 0; } .tp-team .tp-tm-member__role{ font-family: var(--nb-font-mono); font-size: var(--nb-fs-mono) !important; /* Abwehr: Font-Floor 13px */ line-height: 1.4; letter-spacing: .18em; text-transform: uppercase; color: var(--tp-red-ink); margin: 0; order: -1; /* Etikett steht ÜBER dem Namen */ } .tp-team .tp-tm-member__bio{ font-family: var(--nb-font-text); font-size: var(--tp-fs-body); line-height: 1.6; color: var(--nb-ink-2); margin: 4px 0 0; } /* Mail = kleiner Ghost-Button (dunkel auf hell), Werte aus dem Fundament */ .tp-team .tp-tm-member__email, .tp-team .tp-tm-member__email:link, .tp-team .tp-tm-member__email:visited, .tp-team .tp-tm-member__email:hover, .tp-team .tp-tm-member__email:focus, .tp-team .tp-tm-member__email:active{ display: inline-flex !important; align-items: center; justify-content: center; gap: .45em; align-self: flex-start; margin-top: 12px; font-family: var(--nb-font-text) !important; font-size: var(--tp-fs-body) !important; font-weight: 600 !important; letter-spacing: .012em !important; line-height: 1; text-transform: none !important; padding: 14px 24px; background: transparent !important; background-color: transparent !important; color: var(--nb-ink) !important; border: 1px solid rgba(22,24,28,.28) !important; border-radius: var(--nb-r-ui) !important; outline: none !important; box-shadow: none !important; text-decoration: none !important; transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease !important; } .tp-team .tp-tm-member__email:hover{ background: rgba(22,24,28,.05) !important; background-color: rgba(22,24,28,.05) !important; color: var(--nb-ink) !important; border-color: var(--nb-ink) !important; transform: translateY(-2px); } /* Leerer Zustand — Inter, kein Mono für ganze Sätze */ .tp-tm-members__empty{ padding: 48px 32px; text-align: center; font-family: var(--nb-font-text); font-size: var(--tp-fs-body); line-height: 1.6; color: var(--nb-ink-3); background: var(--nb-surface); border: 1px dashed var(--nb-hair-l); border-radius: var(--nb-r-fl); margin: 0; } /* ═══════════ FINALE-CTA — helle Karte, rote Topline, zentriert ═══════════ */ .tp-team .tp-pl-cta{ margin-top: 0; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 88px 60px 80px; background: var(--nb-surface); border: 1px solid var(--nb-hair-l); border-top: 3px solid var(--nb-red); border-radius: var(--nb-r-fl); box-shadow: none; } .tp-team .tp-pl-cta__head{ max-width: 640px; margin: 0 auto 40px; } .tp-team .tp-pl-cta__head h2{ font-family: var(--nb-font-display); font-weight: 400; font-size: var(--tp-fs-d2); line-height: var(--tp-lh-display); letter-spacing: var(--tp-ls-display); text-transform: uppercase; color: var(--nb-ink); margin: 0 0 var(--tp-s3); max-width: var(--tp-measure-head); margin-inline: auto; } /* rote Linie über der Headline — dasselbe Kopfmuster wie in jedem Kapitel */ .tp-team .tp-pl-cta__head h2::before{ content: ""; display: block; width: 56px; height: 2px; background: var(--nb-red); margin: 0 auto var(--tp-s4); } .tp-team .tp-pl-cta__head p{ font-family: var(--nb-font-text); font-size: var(--nb-fs-lead) !important; /* Abwehr: weiß !important */ line-height: 1.6 !important; color: var(--nb-ink-2) !important; max-width: 30em; margin: 0 auto; } .tp-team .tp-pl-cta__btns{ display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } /* Ghost-Button des Fundaments ist für dunkle Flächen gebaut — auf der hellen Finale-Karte auf Ghost-Dark drehen (Primary bleibt rot). */ .tp-team .tp-pl-cta__btn:not(.tp-pl-cta__btn--primary), .tp-team .tp-pl-cta__btn:not(.tp-pl-cta__btn--primary):link, .tp-team .tp-pl-cta__btn:not(.tp-pl-cta__btn--primary):visited, .tp-team .tp-pl-cta__btn:not(.tp-pl-cta__btn--primary):focus, .tp-team .tp-pl-cta__btn:not(.tp-pl-cta__btn--primary):active{ color: var(--nb-ink) !important; border-color: rgba(22,24,28,.28) !important; padding: 14px 24px !important; } .tp-team .tp-pl-cta__btn:not(.tp-pl-cta__btn--primary):hover{ background: rgba(22,24,28,.05) !important; background-color: rgba(22,24,28,.05) !important; color: var(--nb-ink) !important; border-color: var(--nb-ink) !important; transform: translateY(-2px); } .tp-team .tp-pl-cta__btn--primary, .tp-team .tp-pl-cta__btn--primary:link, .tp-team .tp-pl-cta__btn--primary:visited, .tp-team .tp-pl-cta__btn--primary:focus, .tp-team .tp-pl-cta__btn--primary:active{ background: var(--nb-red) !important; background-color: var(--nb-red) !important; border-color: var(--nb-red) !important; color: #fff !important; padding: 14px 24px !important; box-shadow: none !important; } .tp-team .tp-pl-cta__btn--primary:hover{ background: var(--nb-red-dark) !important; background-color: var(--nb-red-dark) !important; border-color: var(--nb-red-dark) !important; color: #fff !important; transform: translateY(-2px); } @media (max-width: 640px){ .tp-team .tp-pl-cta{ padding: 56px 24px 52px; } .tp-team .tp-pl-cta__btns{ width: 100%; flex-direction: column; } .tp-team .tp-pl-cta__btn{ width: 100%; } } /* ═══════════ TEXT-LINKS auf hell (alte weiße Link-Defense ersetzen) ═══════════ */ .tp-team a:not([class]), .tp-team .tp-tm-intro__lead a, .tp-team .tp-tm-mile__body a{ color: var(--nb-ink); text-decoration: none; border-bottom: 1px solid var(--nb-red); padding-bottom: 1px; transition: color .18s ease, border-color .18s ease; } .tp-team a:not([class]):hover, .tp-team .tp-tm-intro__lead a:hover, .tp-team .tp-tm-mile__body a:hover{ color: var(--tp-red-ink); border-bottom-color: var(--nb-red); } /* ═══════════ REDUCED MOTION — alles ruhig ═══════════ */ @media (prefers-reduced-motion: reduce){ .tp-tm-member, .tp-tm-member:hover, .tp-team .tp-tm-member__email, .tp-team .tp-pl-cta__btn{ transition: none !important; transform: none !important; } }