/* ============================================================================
   LP-ALT · Übersetzungs-Layer für die Bestands-Pattern aus main.css
   Zweck: inhaltsreiche Seiten (Ratgeber, Standorte, Team, Jobs, Rechtstexte,
   Leistungsseiten) behalten ihr bewährtes Markup und erscheinen trotzdem in
   der Formsprache der abgenommenen Landingpages: Inter statt Anton,
   Rot #f80202, weiche Radien, ruhige Flächen.
   Ladereihenfolge: main.css → lp.css → **lp-alt.css** → lp-geraete.css →
   lp-seiten.css (→ lp-service.css). Diese Datei muss VOR den LP-Pattern-Dateien
   liegen: Ihre Grundregeln für p/h3/li haben dieselbe Spezifität wie die
   Pattern-Klassen (`.lp p` vs `.lp-standort__zeile`) und würden sonst deren
   Farben gewinnen – auf dunklen Karten stand Text dadurch anthrazit auf
   anthrazit. Zusätzlich stehen die Grundregeln in :where().
   ========================================================================== */

/* ── Grundraster ─────────────────────────────────────────────────────────── */
.lp .sektion { padding-block: clamp(56px, 5.2vw, 100px); position: relative; }
.lp .sektion--knapp { padding-block: clamp(36px, 3.4vw, 64px); }
.lp .sektion--kohle { background: var(--lp-black); color: var(--lp-light); }
.lp .sektion--stahl { background: var(--lp-flaeche-dunkel); color: var(--lp-light); }
.lp .sektion--hell,
.lp .sektion--weiss { background: var(--lp-light); }
.lp .sektion--rot { background: var(--lp-red-fill); color: #fff; }   /* weiß darauf 5,66:1 statt 4,20:1 */
.lp .bahn { width: min(1180px, 100% - clamp(32px, 6vw, 80px)); margin-inline: auto; }
.lp .bahn--breit { width: min(1594px, 100% - clamp(32px, 6vw, 80px)); margin-inline: auto; }
.lp .bahn--lese { width: min(760px, 100% - clamp(32px, 6vw, 80px)); margin-inline: auto; }
.lp .abstand-oben { margin-top: clamp(32px, 3vw, 56px); }
.lp .abstand-oben-klein { margin-top: clamp(14px, 1.4vw, 24px); }

/* ── Typografie: Anton raus, Inter rein ──────────────────────────────────── */
.lp .display-xl, .lp .display-l, .lp .display-m, .lp .display-s, .lp .riesenzahl {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 900; text-transform: none; letter-spacing: -0.015em; line-height: 1.08;
  color: var(--lp-anthrazit); text-wrap: balance;
}
.lp .sektion--kohle .display-xl, .lp .sektion--kohle .display-l,
.lp .sektion--kohle .display-m, .lp .sektion--kohle .display-s,
.lp .sektion--stahl .display-m, .lp .sektion--rot .display-m,
.lp .sektion--kohle h2, .lp .sektion--stahl h2, .lp .sektion--rot h2,
.lp .sektion--kohle h3, .lp .sektion--stahl h3 { color: var(--lp-light); }
.lp .display-xl { font-size: clamp(2.125rem, 4.17vw, 5rem); }
.lp .display-l  { font-size: clamp(1.875rem, 3.2vw, 3.75rem); }
.lp .display-m  { font-size: clamp(1.75rem, 2.6vw, 3.125rem); }
.lp .display-s  { font-size: clamp(1.375rem, 1.9vw, 2.25rem); }
.lp .riesenzahl { font-size: clamp(3rem, 9vw, 8rem); line-height: .95; color: var(--lp-akzent); }
.lp .display-outline { color: transparent; -webkit-text-stroke: 2px var(--lp-red); }
.lp :where(h1, h2, h3, h4) { font-family: inherit; }
/* Diese Grundregeln stehen absichtlich in :where(): lp-alt.css lädt NACH
   lp-seiten.css/lp-geraete.css, hätte als `.lp h3` also die gleiche Spezifität
   wie `.lp-standort h3` und würde deren Farben überschreiben – auf dunklen
   Karten wurde Text dadurch anthrazit auf anthrazit. :where() nimmt der Regel
   die Spezifität, sie greift nur noch als Voreinstellung. */
.lp :where(h3, .h3) { font-size: clamp(1.125rem, 1.35vw, 1.625rem); font-weight: 700; line-height: 1.3; }
.lp :where(h4, .h4) { font-size: clamp(1rem, 1.1vw, 1.25rem); font-weight: 700; }
.lp :where(p, li) { font-size: clamp(.9375rem, 1vw, 1.1875rem); line-height: 1.65; }
/* Die FARBE der Grundschrift steht absichtlich in :where(.lp) :where(...) und hat
   damit Spezifität 0-0-0-0: jede Pattern-Klasse (lp.css/lp-geraete/lp-seiten)
   gewinnt, egal in welcher Reihenfolge die Dateien laden. Vorher überschrieb
   diese Regel z. B. .lp-hero__text und .lp-standort__zeile – hell auf hell
   bzw. anthrazit auf anthrazit. Maße oben behalten ihre Spezifität, sonst
   greifen wieder die Bestandsgrößen aus main.css. */
:where(.lp) :where(p, li, h3, .h3, h4, .h4, address, dd, dt, figcaption, blockquote) { color: var(--lp-anthrazit); }
.lp .sektion--kohle p, .lp .sektion--kohle li,
.lp .sektion--stahl p, .lp .sektion--stahl li { color: var(--lp-silber); }
.lp .sektion--rot p, .lp .sektion--rot li { color: #fff; }
.lp :where(.klein, small) { font-size: clamp(.8125rem, .85vw, 1rem); }
.lp .lesetext > * + * { margin-top: clamp(12px, 1.2vw, 20px); }
.lp .lesetext h2 { margin-top: clamp(28px, 2.6vw, 46px); }
.lp .lesetext h3 { margin-top: clamp(20px, 1.8vw, 32px); }
.lp .lesetext ul, .lp .lesetext ol { padding-left: 1.3em; }
.lp .lesetext li + li { margin-top: 6px; }

/* Label / Kennziffer → LP-Eyebrow */
.lp .label {
  font-size: clamp(.75rem, .8vw, .9375rem); font-weight: 700; font-stretch: normal;
  letter-spacing: .1em; text-transform: uppercase; color: var(--lp-akzent);
}
.lp .label--hell { color: var(--lp-akzent); }   /* Akzent folgt der Fläche, siehe lp.css */
/* main.css setzt .stapel__karte .kennziffer und .person__daten .label direkt
   auf das Bestandsrot (#e7302a) und ist dabei spezifischer als .lp .label. */
.lp .stapel__karte .kennziffer, .lp .person__daten .label, .lp .duo__region .label,
.lp .portal .label, .lp .sektion--kohle .label, .lp .hero__inhalt .label { color: var(--lp-akzent); }
.lp .sektion--kohle .label, .lp .sektion--stahl .label { color: var(--lp-akzent); }
.lp .kennziffer { display: inline-flex; align-items: center; gap: 10px; }
.lp .kennziffer::before { content: ""; width: 26px; height: 3px; background: var(--lp-red); flex: none; }
.lp .sektion-kopf { margin-bottom: clamp(28px, 2.8vw, 52px); }
.lp .sektion-kopf .label { display: block; margin-bottom: 12px; }
.lp .sektion-kopf--split { display: flex; flex-wrap: wrap; gap: clamp(16px, 1.6vw, 28px); align-items: flex-end; justify-content: space-between; }

/* Textlinks */
.lp .text-link {
  font-weight: 700; color: var(--lp-akzent); text-decoration: underline;
  text-decoration-color: rgba(248,2,2,.4); text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.lp .text-link:hover { text-decoration-color: var(--lp-akzent); }
.lp .sektion--kohle .text-link, .lp .sektion--stahl .text-link { color: #fff; text-decoration-color: var(--lp-akzent); }
.lp .zahl { font-variant-numeric: tabular-nums lining-nums; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.lp .knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 11px 26px; border-radius: 10px; border: 0;
  background: var(--lp-red-fill); color: #fff;
  font-size: clamp(.9375rem, .94vw, 1.125rem); font-weight: 700; text-decoration: none;
  transition: background-color .25s, transform .25s, box-shadow .25s;
}
.lp .knopf:hover { background: var(--lp-red-hover); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(248,2,2,.28); }
.lp .knopf--gross { min-height: 52px; padding: 14px 32px; font-size: clamp(1rem, 1.04vw, 1.25rem); }
.lp .knopf--kontur { background: #fff; color: var(--lp-anthrazit); border: 1px solid var(--lp-anthrazit); }
.lp .knopf--kontur:hover { background: var(--lp-light); box-shadow: 0 6px 18px rgba(0,0,0,.15); }
.lp .sektion--kohle .knopf--kontur, .lp .sektion--stahl .knopf--kontur,
.lp .sektion--rot .knopf--kontur { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.lp .sektion--kohle .knopf--kontur:hover, .lp .sektion--stahl .knopf--kontur:hover { background: rgba(255,255,255,.1); }
.lp .sektion--rot .knopf { background: #fff; color: var(--lp-red-text); }
/* Kontur-Variante auf roter Fläche: transparent mit weißer Schrift, nicht
   weiß auf weiß (gemessen 1,0:1 auf /kategorie/frontstapler-elektro/). */
.lp .sektion--rot .knopf.knopf--kontur { background: transparent; color: #fff; border-color: rgba(255,255,255,.8); }

/* ── Spalten / Raster ────────────────────────────────────────────────────── */
.lp .spalten { display: grid; gap: clamp(20px, 2.4vw, 46px); grid-template-columns: minmax(0,1fr); }
@media (min-width: 800px) {
  .lp .spalten--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .lp .spalten--2-1 { grid-template-columns: minmax(0,2fr) minmax(0,1fr); }
  .lp .spalten--1-2 { grid-template-columns: minmax(0,1fr) minmax(0,2fr); }
  .lp .spalten--5-7 { grid-template-columns: minmax(0,5fr) minmax(0,7fr); }
  .lp .spalten--7-5 { grid-template-columns: minmax(0,7fr) minmax(0,5fr); }
}

/* ── Kurzgesagt (GEO-Antwortblock) ───────────────────────────────────────── */
.lp .kurzgesagt {
  background: var(--lp-light); border-left: 4px solid var(--lp-red);
  border-radius: 0 18px 18px 0; padding: clamp(18px, 1.8vw, 30px) clamp(20px, 2vw, 34px);
  max-width: 1060px;
}
.lp .sektion--kohle .kurzgesagt, .lp .sektion--rot .kurzgesagt { background: rgba(255,255,255,.07); }
.lp .kurzgesagt .label { display: block; margin-bottom: 10px; }
.lp .kurzgesagt p { font-size: clamp(1rem, 1.04vw, 1.25rem); line-height: 1.7; max-width: none; }

/* ── Akkordeon ───────────────────────────────────────────────────────────── */
.lp .akkordeon { max-width: 1060px; margin-inline: auto; }
.lp .akkordeon details {
  background: #fff; border: 0; border-radius: 18px; margin-bottom: 12px; overflow: hidden;
}
.lp .sektion--kohle .akkordeon details, .lp .sektion--stahl .akkordeon details { background: var(--lp-card); }
.lp .akkordeon summary {
  list-style: none; cursor: pointer; position: relative;
  padding: clamp(16px, 1.4vw, 26px) clamp(48px, 3.6vw, 64px) clamp(16px, 1.4vw, 26px) clamp(18px, 1.6vw, 30px);
  font-size: clamp(1rem, 1.04vw, 1.25rem); font-weight: 700; line-height: 1.4; color: var(--lp-anthrazit);
  border: 0;
}
.lp .sektion--kohle .akkordeon summary, .lp .sektion--stahl .akkordeon summary { color: var(--lp-light); }
.lp .akkordeon summary::-webkit-details-marker { display: none; }
.lp .akkordeon summary::after {
  content: ""; position: absolute; right: clamp(20px, 1.8vw, 30px); top: 50%;
  width: 12px; height: 12px; border-right: 3px solid var(--lp-red); border-bottom: 3px solid var(--lp-red);
  transform: translateY(-70%) rotate(45deg); transition: transform .25s var(--ease-out);
}
.lp .akkordeon details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.lp .akkordeon summary:hover { color: var(--lp-akzent); }
.lp .akkordeon__inhalt {
  padding: 0 clamp(18px, 1.6vw, 30px) clamp(18px, 1.6vw, 28px);
  font-size: clamp(.9375rem, .94vw, 1.125rem); line-height: 1.65; color: var(--lp-grau);
}
.lp .sektion--kohle .akkordeon__inhalt, .lp .sektion--stahl .akkordeon__inhalt { color: var(--lp-silber); }
.lp .akkordeon__inhalt p + p { margin-top: 10px; }
.lp .akkordeon__inhalt a { color: var(--lp-akzent); font-weight: 700; }

/* ── Schritte / Prozesse ─────────────────────────────────────────────────── */
.lp .schritt-liste { display: grid; gap: clamp(18px, 1.8vw, 30px); counter-reset: altschritt; }
.lp .schritt {
  position: relative; padding-left: 62px; counter-increment: altschritt; min-height: 0;
}
.lp .schritt::before {
  content: counter(altschritt, decimal-leading-zero);
  position: absolute; left: 0; top: -2px;
  font-size: clamp(1.5rem, 1.9vw, 2.25rem); font-weight: 900; line-height: 1; color: var(--lp-akzent);
  background: none; width: auto; height: auto; border-radius: 0; display: block;
}
.lp .schritt h3 { margin-bottom: 6px; }

/* ── Hinweis-Bänder / Teaser-Karten ──────────────────────────────────────── */
.lp .hinweis-band {
  display: block; background: var(--lp-light); border-left: 5px solid var(--lp-red);
  border-radius: 0 18px 18px 0; padding: clamp(18px, 1.8vw, 30px) clamp(20px, 2vw, 32px);
  text-decoration: none; transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.lp a.hinweis-band:hover { transform: translateX(4px); box-shadow: 0 10px 26px rgba(0,0,0,.1); }
.lp .hinweis-band h3 { color: var(--lp-anthrazit); }
/* Kohle-Variante MUSS nach der generischen h3-Regel stehen: gleiche Spezifität,
   die spätere Regel gewinnt. Vorher stand hier Anthrazit auf Anthrazit (1,68:1). */
.lp .hinweis-band--kohle { background: var(--lp-card); border-left-color: var(--lp-akzent); }
/* Doppelte Klasse, damit die Regel die generische `.lp .hinweis-band h3`
   (0-0-2-1) schlägt – sonst bleibt Anthrazit auf der dunklen Karte. */
.lp .hinweis-band.hinweis-band--kohle :where(h2, h3, .h3) { color: var(--lp-light); }
.lp .hinweis-band.hinweis-band--kohle :where(p, li) { color: var(--lp-silber); }
.lp a.hinweis-band:hover h3 { color: var(--lp-akzent); }

/* ── Zahlenband ──────────────────────────────────────────────────────────── */
.lp .zahlenband { display: grid; gap: clamp(20px, 2vw, 34px); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.lp .zahlenband__zahl, .lp .zahlenband strong {
  display: block; font-size: clamp(2rem, 3.2vw, 3.875rem); font-weight: 900; line-height: 1.05; color: var(--lp-red);
}
.lp .zahlenband__kontext { margin-top: 6px; font-size: clamp(.875rem, .94vw, 1.125rem); color: var(--lp-grau); max-width: none; }
.lp .sektion--kohle .zahlenband__kontext { color: var(--lp-silber); }
.lp .sektion--rot .zahlenband__kontext { color: #fff; }

/* ── Timeline ────────────────────────────────────────────────────────────── */
.lp .timeline { position: relative; display: grid; gap: clamp(24px, 2.4vw, 42px); padding-left: clamp(26px, 2.4vw, 44px); }
.lp .timeline::before {
  content: ""; position: absolute; left: clamp(6px, .6vw, 11px); top: 8px; bottom: 8px;
  width: 3px; background: linear-gradient(180deg, var(--lp-red), rgba(248,2,2,.12));
}
.lp .timeline__eintrag { position: relative; }
.lp .timeline__eintrag::before {
  content: ""; position: absolute; left: calc(-1 * clamp(26px, 2.4vw, 44px) + 2px); top: 8px;
  width: 15px; height: 15px; border-radius: 50%; background: var(--lp-red); box-shadow: 0 0 0 4px rgba(248,2,2,.16);
}
.lp .timeline__jahr { display: block; font-size: clamp(1.125rem, 1.35vw, 1.625rem); font-weight: 900; color: var(--lp-akzent); }

/* ── Spec-Karten / Datenblöcke ───────────────────────────────────────────── */
.lp .spec {
  background: #fff; border: 0; border-radius: 20px; padding: clamp(18px, 1.8vw, 30px);
  display: grid; gap: 14px; border-top: 4px solid var(--lp-red);
}
.lp .sektion--kohle .spec, .lp .sektion--stahl .spec { background: var(--lp-card); }
.lp .spec__werte { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 14px; border-top: 1px solid rgba(0,0,0,.08); padding-top: 14px; }
.lp .sektion--kohle .spec__werte { border-top-color: rgba(255,255,255,.12); }
.lp .spec__wert .zahl { display: block; font-size: clamp(1.125rem, 1.35vw, 1.625rem); font-weight: 900; color: var(--lp-akzent); }
.lp .spec__werte .label { hyphens: auto; overflow-wrap: anywhere; }

/* ── Karten-Schiene (horizontal scrollbar) ───────────────────────────────── */
.lp .schiene__spur { display: grid; grid-auto-flow: column; grid-auto-columns: min(320px, 78vw); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
.lp .klasse-karte {
  background: #fff; border: 0; border-radius: 20px; overflow: hidden; scroll-snap-align: start;
  display: flex; flex-direction: column; box-shadow: 0 6px 20px rgba(0,0,0,.07);
}
.lp .sektion--kohle .klasse-karte { background: var(--lp-card); }
.lp .klasse-karte__bild { aspect-ratio: 4/3; overflow: hidden; background: var(--lp-light); }
.lp .klasse-karte__bild img { width: 100%; height: 100%; object-fit: cover; }
.lp .klasse-karte__inhalt { padding: clamp(14px, 1.3vw, 22px); display: grid; gap: 6px; }
.lp .klasse-karte__titel { font-size: clamp(1.0625rem, 1.15vw, 1.375rem); font-weight: 900; color: var(--lp-anthrazit); }
.lp .sektion--kohle .klasse-karte__titel { color: var(--lp-light); }
.lp .klasse-karte__meta { font-size: clamp(.875rem, .9vw, 1.0625rem); color: var(--lp-grau); }
.lp .schiene__knopf { border-radius: 50%; border: 1px solid rgba(0,0,0,.2); background: #fff; color: var(--lp-anthrazit); }

/* ── Tabs ────────────────────────────────────────────────────────────────── */
.lp .tabs__leiste { display: flex; flex-wrap: wrap; gap: 8px; border-bottom: 1px solid rgba(0,0,0,.1); }
.lp .sektion--kohle .tabs__leiste { border-bottom-color: rgba(255,255,255,.14); }
.lp .tabs__tab {
  background: none; border: 0; border-bottom: 3px solid transparent; cursor: pointer;
  padding: 12px 18px; font-size: clamp(.9375rem, .94vw, 1.125rem); font-weight: 700; color: var(--lp-grau);
  transition: color .2s, border-color .2s;
}
.lp .tabs__tab[aria-selected="true"] { color: var(--lp-akzent); border-bottom-color: var(--lp-akzent); }
.lp .tabs__panel { padding-top: clamp(20px, 2vw, 34px); }

/* ── Stapel-Karten (sticky) ──────────────────────────────────────────────── */
.lp .stapel__karte {
  background: #fff; border: 0; border-radius: 22px; padding: clamp(20px, 2vw, 38px);
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}
.lp .sektion--kohle .stapel__karte { background: var(--lp-card); box-shadow: none; }

/* ── Matrix-Tabelle ──────────────────────────────────────────────────────── */
.lp .tabelle-rahmen { border: 0; border-radius: 20px; overflow-x: auto; background: #fff; }
.lp table.matrix thead th { background: var(--lp-black); color: var(--lp-light); font-size: clamp(.8125rem, .83vw, 1rem); letter-spacing: .06em; }
.lp table.matrix th, .lp table.matrix td { border-top-color: rgba(0,0,0,.08); font-size: clamp(.9375rem, .94vw, 1.125rem); }
.lp table.matrix tbody tr:nth-child(even) { background: var(--lp-light); }

/* ── Personen (Teamseite und Ansprechpartner-Blöcke) ─────────────────────
   Ruhige, flache Karten: kleiner Radius (10 px statt 22 – die runden Kacheln
   wirkten neben den Porträts wie Sticker), Haarlinie statt Schatten im
   Ruhezustand, Farbe und Anhebung erst beim Zeigen. justify-content:start,
   weil die Gruppen-Labels links stehen; zentrierte Reihen (z. B. die
   zweiköpfige Geschäftsleitung) liefen sonst dagegen. */
.lp .person-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 248px)); justify-content: start; gap: clamp(14px, 1.2vw, 22px); }
.lp .person {
  background: #fff; border: 1px solid rgba(0,0,0,.09); border-radius: 10px; overflow: hidden;
  transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out), border-color .28s;
}
@media (hover: hover) and (pointer: fine) {
  .lp .person:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0,0,0,.12); border-color: rgba(0,0,0,.16); }
  .lp .person:hover .person__bild img { filter: none; transform: scale(1.035); }
}
.lp .sektion--kohle .person, .lp .sektion--stahl .person { background: var(--lp-card); border-color: rgba(255,255,255,.10); }
.lp .person__bild { background: var(--lp-light); }
/* Porträts oben ausrichten: Die Quellen reichen von 0,71 bis 1,04 Seitenver-
   hältnis, der Rahmen ist 4/5. Bei den hochformatigeren Dateien schnitt der
   mittige Ausschnitt bis zu 5 % in die Köpfe (gemessen über den Motivbeginn
   je Datei). Von oben ausgerichtet fällt der Beschnitt immer unten an, also
   auf Brusthöhe. Bei den breiteren Dateien ist Y wirkungslos. */
/* height:100% ausdrücklich zurückholen: ».lp img{height:auto}« (lp.css) gewinnt
   sonst per Reihenfolge gegen ».person__bild img{height:100%}« (main.css) – das
   Porträt füllte den 4/5-Rahmen nicht und ließ unten einen hellen Streifen. */
.lp .person__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; filter: grayscale(.3) contrast(1.02); transition: filter .35s, transform .5s var(--ease-out); }
.lp .person__bild--leer { background: var(--lp-light); color: var(--lp-grau); font-family: inherit; font-weight: 900; }
.lp .person__daten { padding: 13px 15px 15px; display: grid; gap: 1px; border-top: 1px solid rgba(0,0,0,.07); }
.lp .sektion--kohle .person__daten { border-top-color: rgba(255,255,255,.10); }
/* Bereichs-Marker als Chip, nicht als roter Fließtext. Getönt statt voll rot:
   auf den Standortseiten stehen drei Karten nebeneinander, drei satte rote
   Flächen erschlagen dort das Porträt. */
.lp .person__daten .label {
  justify-self: start; margin-bottom: 6px; padding: 3px 8px; border-radius: 4px;
  background: rgba(248, 2, 2, .09); color: var(--lp-akzent);
  font-size: .6875rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
}
.lp .sektion--kohle .person__daten .label { background: rgba(255, 122, 122, .16); }
.lp .person__name { font-size: clamp(1rem, 1.04vw, 1.1875rem); font-weight: 700; line-height: 1.25; color: var(--lp-anthrazit); }
.lp .sektion--kohle .person__name { color: var(--lp-light); }
.lp .person__funktion { margin-top: 4px; font-size: clamp(.8125rem, .83vw, .9375rem); line-height: 1.35; color: var(--lp-grau); }
.lp .person__tel {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  font-size: clamp(.9375rem, .95vw, 1.0625rem); font-weight: 700; color: var(--lp-akzent); text-decoration: none;
}
.lp .person__tel::before {
  content: ""; width: 14px; height: 14px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.02-.24c1.12.37 2.33.57 3.57.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.02-.24c1.12.37 2.33.57 3.57.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.lp .person__tel:hover { color: var(--lp-red-fill); text-decoration: underline; text-underline-offset: 3px; }

/* ── Teamseite: Gruppen und Filterleiste ─────────────────────────────────
   Jede Gruppe (Überschrift + Reihe) trägt data-kategorie, damit der Filter
   in main.js beides zusammen ein- und ausblendet – vorher wären leere
   Überschriften stehen geblieben. */
.lp .lp-team__gruppe + .lp-team__gruppe { margin-top: clamp(30px, 2.8vw, 52px); }
.lp .lp-team__titel {
  display: flex; align-items: center; gap: 11px; margin-bottom: clamp(14px, 1.2vw, 20px);
  font-size: clamp(.8125rem, .85vw, 1rem); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--lp-akzent);
}
.lp .lp-team__titel::before { content: ""; width: 24px; height: 3px; background: var(--lp-red); flex: none; }
.lp .filterleiste { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(24px, 2.2vw, 40px); }
.lp .filterleiste button {
  border: 1px solid rgba(0,0,0,.13); border-radius: 8px; background: #fff;
  padding: 9px 16px; font: inherit; font-size: clamp(.875rem, .9vw, 1rem); font-weight: 700;
  color: var(--lp-anthrazit); cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.lp .filterleiste button:hover { border-color: var(--lp-akzent); color: var(--lp-akzent); }
.lp .filterleiste button[aria-pressed="true"] { background: var(--lp-red-fill); border-color: var(--lp-red-fill); color: #fff; }
/* Auf dem Handy zwei gleich breite Spalten statt einer 248-px-Karte mit
   90 px Leerraum daneben (Vorgabe aus main.css, hier nachgezogen). */
@media (max-width: 640px) {
  .lp .person-reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .lp .person__daten { padding: 11px 12px 13px; }
  .lp .filterleiste button { padding: 8px 13px; }
}

/* ── Weitere Bausteine ───────────────────────────────────────────────────── */
.lp .duo__inhalt { border-radius: 22px; }
.lp .versatz::before { border-radius: 22px; }
.lp .versatz > img, .lp .versatz picture img { border-radius: 22px; }
.lp .galerie img { border-radius: 16px; }
.lp .portal { background: var(--lp-black); border-radius: 22px; padding: clamp(22px, 2.2vw, 40px); }
.lp .portal h3 { color: var(--lp-light); }
.lp .portal p { color: var(--lp-silber); }
.lp .weiche__karte, .lp .bento__feld {
  background: #fff; border: 0; border-radius: 20px; padding: clamp(18px, 1.8vw, 30px);
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
}
.lp .sektion--kohle .weiche__karte, .lp .sektion--kohle .bento__feld { background: var(--lp-card); box-shadow: none; }
.lp .mass { font-size: clamp(.75rem, .8vw, .9375rem); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--lp-grau); }
.lp .marquee { border-block-color: rgba(0,0,0,.1); }
.lp .marquee__eintrag { font-family: inherit; font-weight: 900; text-transform: none; color: var(--lp-grau); }
.lp .marquee__eintrag::after { background: var(--lp-red); }
/* Abschluss-CTA im LP-Look als helle Fläche. Das Markup trägt weiter
   sektion--kohle bzw. --rot aus der Bestandsfassung; ohne die Farben unten
   blieben deren helle Textfarben stehen – die Headline stand hell auf hell
   (gemessen 1,0:1), der Fließtext auf 2,1:1. Betraf 6 Seiten. */
.lp .cta-schluss:not(.sektion--rot) { background: var(--lp-light); color: var(--lp-anthrazit); }
.lp .cta-schluss:not(.sektion--rot) :where(h2, h3, p, li, .display-xl, .display-l, .display-m, .display-s) { color: var(--lp-anthrazit); }
.lp .cta-schluss:not(.sektion--rot) .label, .lp .cta-schluss:not(.sektion--rot) .label--hell { color: var(--lp-red-text); }
.lp .cta-schluss:not(.sektion--rot) .cta-schluss__tel a { color: var(--lp-anthrazit); }
.lp .cta-schluss:not(.sektion--rot) .knopf--kontur { background: #fff; color: var(--lp-anthrazit); border-color: var(--lp-anthrazit); }
.lp .cta-schluss.sektion--rot { background: var(--lp-red-fill); color: #fff; }
.lp .cta-schluss.sektion--rot :where(h2, p, li, .display-l, .display-m) { color: #fff; }
.lp .cta-schluss.sektion--rot .label, .lp .cta-schluss.sektion--rot .cta-schluss__tel a { color: #fff; }
.lp .cta-schluss__wege { display: grid; gap: clamp(14px, 1.4vw, 24px); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.lp .karte-consent { border-radius: 20px; }
.lp .hotspots__punkt { background: var(--lp-red); }

/* Formulare erben aus lp-seiten.css; hier nur Sektions-Kontext */
.lp .formular-karte, .lp .form-rahmen {
  background: #fff; border-radius: 26px; padding: clamp(20px, 2vw, 40px);
}

/* Breadcrumb im LP-Kontext (falls eine Seite ihn behält) */
.lp .breadcrumb { font-size: clamp(.8125rem, .85vw, 1rem); color: var(--lp-grau); }
.lp .breadcrumb ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; }
.lp .breadcrumb a { color: var(--lp-grau); text-decoration: none; }
.lp .breadcrumb a:hover { color: var(--lp-akzent); }

/* Eyebrow im LP-Hero (übernimmt das .label der Bestandsseiten) */
.lp .lp-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px;
  font-size: clamp(.8125rem, .88vw, 1.0625rem); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.4);
}
.lp .lp-hero__eyebrow::before { content: ""; width: 26px; height: 3px; background: var(--lp-red); flex: none; }

/* ── Kompakter Hero ohne Foto (Text- und Rechtsseiten) ───────────────────── */
.lp .lp-hero--kompakt {
  min-height: 0; padding-top: clamp(56px, 5vw, 96px); padding-bottom: clamp(40px, 3.6vw, 70px);
  background: linear-gradient(135deg, #1a1a1a 0%, var(--lp-anthrazit) 100%);
}
.lp .lp-hero--kompakt::after { display: none; }
.lp .lp-hero--kompakt .lp-hero__grid { grid-template-columns: minmax(0, 900px); align-items: start; }
.lp .lp-hero--kompakt h1 { font-size: clamp(1.75rem, 3.05vw, 3.5rem); }
.lp .lp-hero--kompakt .lp-hero__text { max-width: 760px; }

/* ── Bento-Kacheln (Bild-/Farbflächen aus dem Bestand) ───────────────────────
   main.css färbt .bento__inhalt .display-s weiß; die LP-Grundregel für
   .display-* stand danach und machte daraus Anthrazit auf Dunkel (1,8–2,1:1).
   Deshalb hier wieder explizit hell – und die rote Typo-Kachel auf die
   dunklere Rotvariante, damit auch der Fließtext AA erreicht. */
.lp .bento__inhalt .display-s, .lp .bento__inhalt .display-m,
.lp .bento__inhalt h3 { color: #fff; }
.lp .bento__inhalt p { color: rgba(255,255,255,.94); }
.lp .bento__zelle--typo { background: var(--lp-red-fill); }

/* Bestands-Label, die main.css spezifischer als .lp .label einfärbt */
.lp .stapel__karte .kennziffer, .lp .person__daten .label,
.lp .portal .label, .lp .sektion--kohle .label { color: var(--lp-akzent); }
.lp .duo__region .label { background: var(--lp-red-fill); color: #fff; }