/* ==========================================================================
   Tarif-Konzept – T254 Finales Premium-Design (Über uns, Vision, Mehrwert)
   Wird NUR von ueber-uns.html, vision.html und mehrwert.html geladen.
   Alle Selektoren sind über body.tk254-ueber-uns / body.tk254-vision /
   body.tk254-mehrwert gekapselt; keine globalen Selektoren, keine Änderung
   an styles.css, tk2.css oder main.js.
   Farbwerte (Startseite / T247): Schwarz #111214, Anthrazit #232529,
   Graphit #393B3F, Hellgrau #F5F5F5, Weiß; Blau nur als Akzent.
   ========================================================================== */

body.tk254-ueber-uns,
body.tk254-vision,
body.tk254-mehrwert {
  --t254-black: #111214;
  --t254-anthracite: #232529;
  --t254-graphite: #393B3F;
  --t254-light: #F5F5F5;
  --t254-text-dark: #D9DADC;   /* Fließtext auf dunklen Flächen */
  --t254-text-dim: #B4B6BA;    /* Nebentexte auf dunklen Flächen */
  --t254-accent: #4A87C9;      /* Akzentlinien (Startseite --accent-light) */
  --t254-accent-on-dark: #8CBBFF; /* Eyebrows/Links auf Dunkel (tk2) */
  --t254-radius: 14px;
  --t254-shadow-dark: 0 1px 2px rgba(0, 0, 0, .25), 0 18px 40px rgba(0, 0, 0, .32);
}

/* ---------- gemeinsame Bausteine: dunkle Abschnitte ---------- */
body.tk254-ueber-uns .tk254-uu-wer,
body.tk254-ueber-uns .tk254-uu-leistung,
body.tk254-vision .tk254-vi-grund {
  color: #fff;
}
body.tk254-ueber-uns .tk254-uu-wer .eyebrow,
body.tk254-ueber-uns .tk254-uu-leistung .eyebrow,
body.tk254-vision .tk254-vi-grund > .container > .section-head .eyebrow {
  color: var(--t254-accent-on-dark);
}
body.tk254-ueber-uns .tk254-uu-wer h2,
body.tk254-ueber-uns .tk254-uu-leistung h2,
body.tk254-vision .tk254-vi-grund > .container > .section-head h2 {
  color: #fff;
}

/* ==========================================================================
   ÜBER UNS – Variante 3 „Schwarz mit Bildfokus“
   ========================================================================== */

/* Hero: großes Architekturfoto, neutral abgedunkelt, weicher Übergang in Schwarz */
body.tk254-ueber-uns .tk254-hero {
  min-height: min(78vh, 720px);
}
/* T270 29.10.2026: Mehrwert-Hero übernimmt Hintergrund, Unterkante (Abdunklung in Schwarz) und
   unteren Abstand des Über-uns-Heros; Hero-Höhe (min-height, T268) bleibt unverändert.
   Die Abdunklung des Mehrwert-Fotos (styles.css) bleibt für die Lesbarkeit der Hero-Texte erhalten;
   darüber liegt nur der untere Verlauf des Über-uns-Heros (bis 900 px: .18 bei 38 %, .78 bei 82 %,
   ab 901 px: .10 bei 70 %, jeweils Schwarz bei 100 %), damit die Unterkante nahtlos in Schwarz übergeht. */
body.tk254-ueber-uns .tk254-hero,
body.tk254-mehrwert .page-hero {
  background: var(--t254-black);
  padding-bottom: clamp(4rem, 8vw, 6.5rem);
}
body.tk254-ueber-uns .tk254-hero .page-hero-media::after {
  background:
    linear-gradient(180deg, rgba(17, 18, 20, .30) 0%, rgba(17, 18, 20, .18) 38%, rgba(17, 18, 20, .78) 82%, var(--t254-black) 100%),
    linear-gradient(90deg, rgba(17, 18, 20, .88) 0%, rgba(17, 18, 20, .70) 42%, rgba(17, 18, 20, .22) 78%, rgba(17, 18, 20, .08) 100%);
}
body.tk254-ueber-uns .tk254-hero h1 {
  font-size: clamp(2.5rem, 6vw, 4.6rem);
  max-width: 14ch;
}
body.tk254-ueber-uns .tk254-hero .lead {
  color: rgba(245, 245, 245, .9);
  max-width: 38rem;
}
/* Desktop: Text links auf Schwarz, Architekturfoto großflächig rechts (Vorlage 01) */
@media (min-width: 901px) {
  body.tk254-ueber-uns .tk254-hero { min-height: min(82vh, 760px); }
  body.tk254-ueber-uns .tk254-hero .page-hero-media {
    left: auto;
    right: 0;
    width: 60%;
  }
  body.tk254-ueber-uns .tk254-hero .page-hero-media::after {
    background:
      linear-gradient(180deg, rgba(17, 18, 20, .35) 0%, rgba(17, 18, 20, 0) 22%, rgba(17, 18, 20, 0) 70%, var(--t254-black) 100%),
      linear-gradient(90deg, var(--t254-black) 0%, rgba(17, 18, 20, .82) 16%, rgba(17, 18, 20, .30) 46%, rgba(17, 18, 20, .12) 100%);
  }
  body.tk254-ueber-uns .tk254-hero .lead { max-width: 34rem; }
}
body.tk254-ueber-uns .tk254-hero .page-hero-content::after {
  content: "";
  display: block;
  width: 72px;
  height: 2px;
  margin-top: .5rem;
  background: var(--t254-accent);
}

body.tk254-mehrwert .page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(17, 18, 20, 0) 0%, rgba(17, 18, 20, .18) 38%, rgba(17, 18, 20, .78) 82%, var(--t254-black) 100%);
}
@media (min-width: 901px) {
  body.tk254-mehrwert .page-hero::after {
    background: linear-gradient(180deg, rgba(17, 18, 20, 0) 0%, rgba(17, 18, 20, 0) 24%, rgba(17, 18, 20, .10) 70%, var(--t254-black) 100%);
  }
}

/* „Wer wir sind“: schwarze Fläche, Bild im Fokus, dunkle Faktenkarten */
body.tk254-ueber-uns .tk254-uu-wer,
body.tk254-mehrwert .section--fair-acc {  /* T270: gleicher Übergang/Hintergrund wie „Wer wir sind“ */
  background: var(--t254-black);
  padding-top: clamp(3rem, 6vw, 5rem);
}
body.tk254-ueber-uns .tk254-uu-wer .tk2-split-media {
  box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
  background: var(--t254-graphite);
}
body.tk254-ueber-uns .tk254-uu-wer .tk2-split-copy > p:not(.eyebrow) {
  color: var(--t254-text-dark);
}
body.tk254-ueber-uns .tk254-uu-wer .tk2-facts li {
  position: relative;
  overflow: hidden;
  background: var(--t254-anthracite);
  border: 1px solid var(--t254-graphite);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .28);
  padding: 1.45rem 1.25rem 1.3rem;
}
body.tk254-ueber-uns .tk254-uu-wer .tk2-facts li::before {
  content: "";
  position: absolute;
  left: 1.25rem;
  top: 0;
  width: 32px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--t254-accent);
}
body.tk254-ueber-uns .tk254-uu-wer .tk2-facts strong { color: #fff; }
body.tk254-ueber-uns .tk254-uu-wer .tk2-facts span { color: var(--t254-text-dark); }

/* „Arbeitsweise“: heller Kontrastabschnitt, dunkles Bildband bleibt */
body.tk254-ueber-uns .tk254-uu-arbeit {
  background: var(--t254-light);
}
body.tk254-ueber-uns .tk254-uu-arbeit .tk2-band {
  background: var(--t254-anthracite);
  border: 1px solid var(--t254-graphite);
}
body.tk254-ueber-uns .tk254-uu-arbeit .tk2-band-media::after {
  background: linear-gradient(270deg, var(--t254-anthracite) 0%, rgba(35, 37, 41, .35) 18%, rgba(35, 37, 41, 0) 48%);
}

/* „Leistungsbereiche“: Anthrazit-Fläche, schwarze Bildkacheln */
body.tk254-ueber-uns .tk254-uu-leistung {
  background: var(--t254-anthracite);
}
body.tk254-ueber-uns .tk254-uu-leistung .tk2-tile {
  background: var(--t254-black);
  border: 1px solid var(--t254-graphite);
  box-shadow: var(--t254-shadow-dark);
}

@media (max-width: 860px) {
  body.tk254-ueber-uns .tk254-uu-arbeit .tk2-band-media::after {
    background: linear-gradient(0deg, var(--t254-anthracite) 0%, rgba(35, 37, 41, .14) 40%, rgba(35, 37, 41, 0) 100%);
  }
}
@media (max-width: 640px) {
  body.tk254-ueber-uns .tk254-hero { min-height: min(72vh, 600px); }
}
/* T262 28.10.2026: Hero-Bild und Abdunklung ab 901px ueber die volle Breite (vorher nur rechte 60 %).
   Animation (Parallax/Scale aus js/main.js) unveraendert; kein 100vw (Scrollbar-Falle), nur inset 0. */
@media (min-width: 901px) {
  body.tk254-ueber-uns .tk254-hero { overflow: hidden; }
  body.tk254-ueber-uns .tk254-hero .page-hero-media {
    left: 0;
    right: 0;
    width: auto;
  }
  body.tk254-ueber-uns .tk254-hero .page-hero-media::after {
    background:
      linear-gradient(180deg, rgba(17, 18, 20, .40) 0%, rgba(17, 18, 20, .08) 24%, rgba(17, 18, 20, .10) 70%, var(--t254-black) 100%),
      linear-gradient(90deg, rgba(17, 18, 20, .92) 0%, rgba(17, 18, 20, .86) 34%, rgba(17, 18, 20, .74) 56%, rgba(17, 18, 20, .40) 80%, rgba(17, 18, 20, .22) 100%);
  }
}

/* ==========================================================================
   VISION – Schwarz/Anthrazit mit wechselnden Bild-Text-Bändern
   ========================================================================== */
body.tk254-vision .tk254-vi-grund {
  background: var(--t254-black);
  padding-bottom: 0;
  overflow-x: clip;
}
body.tk254-vision .tk254-vi-grund > .container > .section-head {
  margin-bottom: clamp(2.25rem, 4vw, 3rem);
}
body.tk254-vision .tk254-vi-grund > .container > .section-head .section-lead {
  color: var(--t254-text-dark);
}
body.tk254-vision .tk254-vi-grund .tk2-stack { gap: 0; }

/* jede Bild-Text-Zeile als vollflächiges Band (Hintergrund per Pseudo-Element) */
body.tk254-vision .tk254-vi-grund .tk2-split {
  position: relative;
  isolation: isolate;
  padding-block: clamp(3rem, 6vw, 5rem);
  color: var(--tk2-text);
}
body.tk254-vision .tk254-vi-grund .tk2-split::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--t254-light);
}
/* zweites Band: Anthrazit, Text links / Bild rechts */
body.tk254-vision .tk254-vi-grund .tk2-split--flip::before {
  background: var(--t254-anthracite);
}
body.tk254-vision .tk254-vi-grund .tk2-split--flip .tk2-split-copy h3.h2 { color: #fff; }
body.tk254-vision .tk254-vi-grund .tk2-split--flip .tk2-split-copy > p:not(.eyebrow) { color: var(--t254-text-dark); }
body.tk254-vision .tk254-vi-grund .tk2-split--flip .eyebrow { color: var(--t254-accent-on-dark); }
body.tk254-vision .tk254-vi-grund .tk2-split--flip .tk2-split-media {
  box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
}
body.tk254-vision .tk254-vi-grund .tk2-split-media { aspect-ratio: 16 / 11; }
body.tk254-vision .tk254-vi-grund .tk2-split-copy { max-width: 34rem; }
body.tk254-vision .tk254-vi-grund .tk2-split-copy h3.h2::after {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  margin-top: 1rem;
  background: var(--t254-accent);
}
@media (max-width: 860px) {
  body.tk254-vision .tk254-vi-grund .tk2-split { gap: 1.75rem; }
  body.tk254-vision .tk254-vi-grund .tk2-split-media { aspect-ratio: 16 / 10; }
  body.tk254-vision .tk254-vi-grund .tk2-split-copy { max-width: none; }
}

/* ==========================================================================
   MEHRWERT – Variante 2 „Anthrazit“, bestehende Auswahl (Tabs) bleibt
   Desktop (ab 901 px): vier gleich breite Auswahlbereiche in einer Reihe,
   darunter großer Inhaltsbereich (Beschreibung + Bild) des aktiven Vorteils.
   Mobil (bis 900 px): bestehende vertikale Auswahl, nur neu eingefärbt.
   ========================================================================== */
body.tk254-mehrwert .section--fair-acc {
  /* T270: Flächenfarbe jetzt Schwarz (siehe „Wer wir sind“-Regel oben) */
  color: #fff;
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
}
body.tk254-mehrwert .section--fair-acc > .container > .eyebrow { color: var(--t254-accent-on-dark); }
body.tk254-mehrwert .section--fair-acc .fair-acc-heading { color: #fff; }

body.tk254-mehrwert .section--fair-acc .fair-acc {
  background: transparent;
  counter-reset: t254-vorteil;
}
body.tk254-mehrwert .fair-acc-item { counter-increment: t254-vorteil; }
body.tk254-mehrwert .fair-acc-item {
  background: var(--t254-anthracite);  /* T270: Reiter behalten ihr bisheriges Anthrazit auf schwarzer Fläche */
  border-top: 3px solid var(--t254-graphite);
  box-shadow: none;
  transition: background-color .25s ease, border-color .25s ease;
}
body.tk254-mehrwert .fair-acc-item:not(:last-child) { box-shadow: none; }
body.tk254-mehrwert .fair-acc-item:not(.is-active):hover { background: #2A2C30; }
body.tk254-mehrwert .fair-acc-item.is-active {
  background: #2E3035;  /* etwas helleres Anthrazit (Vorlage 03) */
  border-top-color: var(--t254-accent);
}
body.tk254-mehrwert .fair-acc-item:focus-visible {
  outline: 2px solid var(--t254-accent-on-dark);
  outline-offset: -4px;
}
body.tk254-mehrwert .fair-acc-line { display: none; }
body.tk254-mehrwert .fair-acc-step { color: var(--t254-text-dim); }
body.tk254-mehrwert .fair-acc-item h3 { color: var(--t254-text-dark); }
body.tk254-mehrwert .fair-acc-item.is-active h3 { color: #fff; }
body.tk254-mehrwert .fair-acc-item.is-active .fair-acc-step { color: var(--t254-accent-on-dark); }
body.tk254-mehrwert .fair-acc-desc { color: var(--t254-text-dark); }
body.tk254-mehrwert .fair-acc-desc strong { color: #fff; }

@media (min-width: 901px) {
  body.tk254-mehrwert .section--fair-acc .fair-acc {
    --t254-panel-h: clamp(380px, 34vw, 460px);
    position: relative;
    display: flex;
    gap: 0;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    height: auto;
    min-height: 0;
    overflow: visible;
    padding-bottom: var(--t254-panel-h);
    border-radius: var(--t254-radius);
  }
  /* großer Inhaltsbereich (schwarz), an den aktiven Reiter anschließend */
  body.tk254-mehrwert .section--fair-acc .fair-acc::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--t254-panel-h);
    background: transparent;
    pointer-events: none;
  }
  /* alle vier Reiter immer gleich breit (auch der aktive) */
  body.tk254-mehrwert .section--fair-acc .fair-acc-item,
  body.tk254-mehrwert .section--fair-acc .fair-acc-item.is-active {
    position: static;
    flex: 1 1 0;
    min-width: 0;
    overflow: visible;
  }
  body.tk254-mehrwert .section--fair-acc .fair-acc-item + .fair-acc-item {
    box-shadow: inset 1px 0 0 var(--t254-graphite);
  }
  body.tk254-mehrwert .section--fair-acc .fair-acc-item:first-child { border-top-left-radius: var(--t254-radius); }
  body.tk254-mehrwert .section--fair-acc .fair-acc-item:last-child { border-top-right-radius: var(--t254-radius); }
  body.tk254-mehrwert .section--fair-acc .fair-acc-item.is-active { cursor: default; }
  body.tk254-mehrwert .section--fair-acc .fair-acc-inner,
  body.tk254-mehrwert .section--fair-acc .fair-acc-item:not(.is-active) .fair-acc-inner {
    height: auto;
    padding: 1.5rem clamp(1rem, 1.8vw, 1.75rem) 1.6rem;
  }
  body.tk254-mehrwert .section--fair-acc .fair-acc-item h3,
  body.tk254-mehrwert .section--fair-acc .fair-acc-item:not(.is-active) h3,
  body.tk254-mehrwert .section--fair-acc .fair-acc-item.is-active h3 {
    font-size: clamp(1.05rem, 1.45vw, 1.35rem);
    line-height: 1.25;
    letter-spacing: -0.02em;
    white-space: normal;
    hyphens: manual;
    margin: 0;
  }
  /* Beschreibung (links) und Bild (rechts) des aktiven Vorteils im Inhaltsbereich */
  body.tk254-mehrwert .section--fair-acc .fair-acc-item.is-active .fair-acc-desc {
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 0;
    width: 40%;
    height: calc(var(--t254-panel-h) - 2rem);
    max-width: none;
    margin: 0;
    padding: clamp(.75rem, 2vw, 2rem) 0 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    font-size: clamp(1.05rem, 1.25vw, 1.2rem);
    line-height: 1.7;
    overflow: hidden;
  }
  /* Label „VORTEIL N“ (CSS-Zähler, kein neuer HTML-Text) */
  body.tk254-mehrwert .section--fair-acc .fair-acc-item.is-active .fair-acc-desc::before {
    content: "Vorteil " counter(t254-vorteil);
    display: block;
    margin-bottom: 1rem;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    line-height: 1.2;
    color: var(--t254-accent-on-dark);
  }
  body.tk254-mehrwert .section--fair-acc .fair-acc-item.is-active .fair-acc-media {
    position: absolute;
    z-index: 1;
    left: 0;
    bottom: 0;
    width: 55%;
    height: calc(var(--t254-panel-h) - 2rem);
    margin: 0;
    border-radius: 12px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
  }
  body.tk254-mehrwert .section--fair-acc .fair-acc-item.is-active .fair-acc-desc,
  body.tk254-mehrwert .section--fair-acc .fair-acc-item.is-active .fair-acc-media {
    animation: t254-einblenden .3s ease both;
  }
}
@media (min-width: 901px) and (max-width: 1100px) {
  body.tk254-mehrwert .section--fair-acc .fair-acc { --t254-panel-h: 420px; }
  body.tk254-mehrwert .section--fair-acc .fair-acc-item.is-active .fair-acc-desc { width: 42%; font-size: 1rem; line-height: 1.7; }
  body.tk254-mehrwert .section--fair-acc .fair-acc-item.is-active .fair-acc-media { width: 53%; }
}
@keyframes t254-einblenden {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Mobil: vertikale Auswahl (bestehendes Verhalten), dunkel eingefärbt */
@media (max-width: 900px) {
  body.tk254-mehrwert .section--fair-acc .fair-acc {
    gap: .6rem;
    background: transparent;
  }
  body.tk254-mehrwert .fair-acc-item {
    border-radius: 12px;
    border: 1px solid var(--t254-graphite);
    border-top: 3px solid var(--t254-graphite);
    background: var(--t254-anthracite);  /* T270 */
  }
  body.tk254-mehrwert .fair-acc-item.is-active {
    background: #2E3035;
    border-color: var(--t254-graphite);
    border-top-color: var(--t254-accent);
    min-height: 0;
  }
  body.tk254-mehrwert .fair-acc-item.is-active .fair-acc-media {
    height: auto;
    flex: none;
    aspect-ratio: 16 / 10;
    border-radius: 8px;
  }
  body.tk254-mehrwert .fair-acc-item.is-active .fair-acc-inner { padding: 1.5rem 1.35rem 1.35rem; }
  body.tk254-mehrwert .fair-acc-item h3 { font-size: clamp(1.2rem, 4.6vw, 1.5rem); }
  body.tk254-mehrwert .fair-acc-item:not(.is-active) h3 { font-size: 1.1rem; margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  body.tk254-mehrwert .fair-acc-item { transition: none; }
  body.tk254-mehrwert .fair-acc-item.is-active .fair-acc-desc,
  body.tk254-mehrwert .fair-acc-item.is-active .fair-acc-media { animation: none !important; }
}


/* T374: H1 nicht in 14ch mitten im Wort begrenzen; Schriftgröße auf dem Desktop unverändert */
body.tk254-ueber-uns .tk254-hero h1 {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  max-width: none;
}
@media (max-width: 520px) {
  body.tk254-ueber-uns .tk254-hero h1 {
    font-size: clamp(1.28rem, 6.85vw, 2rem);
  }
}