/* ==========================================================================
   Tarif-Konzept – Premium-Komponenten T242 (tk2)
   Wird NUR auf umgestellten Seiten geladen (<body class="... tk2">).
   Alle Selektoren sind mit body.tk2 bzw. .tk2- gekapselt; keine globalen
   Selektoren, keine Änderungen an styles.css / main.js.
   Basis: Energie-Kacheln der Designvorschau T241.
   ========================================================================== */

body.tk2 {
  /* T247: dunkle Flächen an die Startseite angeglichen (Schwarz/Anthrazit statt Navy);
     Variablennamen bleiben aus Kompatibilitätsgründen erhalten. Blau nur noch für Akzente. */
  --tk2-navy: #111214;
  --tk2-navy-2: #232529;
  --tk2-navy-3: #393B3F;
  --tk2-blue: #1967D2;
  --tk2-blue-hover: #155BB5;
  --tk2-blue-soft: #EAF2FD;
  --tk2-blue-on-dark: #8CBBFF;
  --tk2-surface: #F5F5F5;
  --tk2-text: #0A0A0A;
  --tk2-text-2: #5C5C5C;
  --tk2-text-on-dark: #D9DADC;
  --tk2-line: #E6E6E6;
  --tk2-radius: 14px;
  --tk2-radius-sm: 10px;
  --tk2-shadow: 0 1px 2px rgba(10, 10, 10, .04), 0 10px 30px rgba(10, 10, 10, .07);
  --tk2-shadow-lg: 0 2px 6px rgba(10, 10, 10, .05), 0 24px 60px rgba(10, 10, 10, .12);
}

/* ---- Flächen ---- */
.tk2-surface { background: var(--tk2-surface); }
.tk2-dark { background: var(--tk2-navy); color: #fff; }
.tk2-dark h2, .tk2-dark h3 { color: #fff; }
.tk2-dark :focus-visible { outline-color: #fff; }
.tk2-section-tight { padding-top: clamp(2.5rem, 4vw, 3.5rem); }

/* ---- Hero: lokaler Kontrast-Scrim (nur tk2-Seiten) ---- */
body.tk2 .tk2-hero .page-hero-media::after {
  background:
    linear-gradient(180deg, rgba(10, 22, 38, .35) 0%, rgba(10, 22, 38, .82) 100%),
    linear-gradient(90deg, rgba(10, 22, 38, .9) 0%, rgba(10, 22, 38, .72) 45%, rgba(10, 22, 38, .2) 82%, rgba(10, 22, 38, .05) 100%);
}
body.tk2 .tk2-hero .page-hero-content { text-shadow: 0 1px 14px rgba(5, 12, 22, .45); }
body.tk2 .tk2-hero .lead { color: rgba(245, 245, 245, .88); }
.tk2-hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: .25rem; text-shadow: none; }
@media (min-width: 1025px) {
  body.tk2 .tk2-hero .page-hero-media::after {
    background:
      linear-gradient(180deg, rgba(var(--tk2-scrim), .16) 0%, rgba(var(--tk2-scrim), .62) 100%),
      linear-gradient(90deg, rgba(var(--tk2-scrim), .84) 0%, rgba(var(--tk2-scrim), .64) 45%, rgba(var(--tk2-scrim), .2) 82%, rgba(var(--tk2-scrim), .05) 100%);
  }
}
body.tk2 .tk2-hero .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .6); background: rgba(10, 22, 38, .35); }
body.tk2 .tk2-hero .btn-ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .1); }
body.tk2 .tk2-hero--subnav { padding-bottom: clamp(5rem, 9vw, 6.5rem); }

/* ---- Kopfbereich einer Sektion ---- */
.tk2-head { max-width: 760px; margin-bottom: clamp(2rem, 4vw, 3rem); }
.tk2-head h2 { margin-bottom: .9rem; text-wrap: balance; }
.tk2-head p:not(.eyebrow) { color: var(--tk2-text-2); font-size: 1.05rem; line-height: 1.7; margin: 0; }
.tk2-dark .tk2-head p:not(.eyebrow) { color: var(--tk2-text-on-dark); }
.tk2-dark .eyebrow, .tk2-on-dark .eyebrow { color: var(--tk2-blue-on-dark); }

/* ---- Textlink mit Pfeil ---- */
.tk2-link {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 32px;
  color: var(--tk2-blue); font-weight: 600; font-size: .95rem; text-decoration: none;
}
.tk2-link svg { width: 17px; height: 17px; flex-shrink: 0; transition: transform .2s var(--ease); }
a:hover > .tk2-link svg, .tk2-link:hover svg, a:hover .tk2-link svg { transform: translateX(3px); }
.tk2-link--on-dark { color: var(--tk2-blue-on-dark); }

/* ---- Icon-Kreis (nur ergänzend) ---- */
.tk2-icon {
  display: inline-grid; place-items: center; flex-shrink: 0;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--tk2-blue-soft); color: var(--tk2-blue);
}
.tk2-icon svg { width: 24px; height: 24px; }

/* ==========================================================================
   Unternavigation Energie (bestehendes Markup .energie-subnav + .tk2-subnav)
   ========================================================================== */
body.tk2 .energie-subnav.tk2-subnav {
  margin-top: -44px;
  background: transparent; border: 0; padding: 0;
}
body.tk2 .energie-subnav.tk2-subnav:has(+ .tk2-surface) { background: linear-gradient(180deg, transparent 50%, var(--tk2-surface) 50%); }
body.tk2 .tk2-subnav + .section { padding-top: clamp(3.25rem, 6vw, 5rem); }
body.tk2 .tk2-subnav .energie-subnav-inner {
  background: #fff; border-radius: var(--tk2-radius); box-shadow: var(--tk2-shadow-lg);
  padding: 0 .75rem; display: flex; gap: 0; border: 0;
}
body.tk2 .tk2-subnav .energie-subnav-inner a {
  flex: 1 0 auto; display: flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 76px; padding: 0 1.25rem; margin: 0; border: 0;
  color: var(--tk2-text-2); font-weight: 500; font-size: .97rem; white-space: nowrap; position: relative;
  letter-spacing: 0; text-transform: none;
}
body.tk2 .tk2-subnav .energie-subnav-inner a + a::before {
  content: ""; position: absolute; left: 0; top: 30%; bottom: 30%; width: 1px; background: var(--tk2-line);
}
body.tk2 .tk2-subnav .energie-subnav-inner a svg { width: 22px; height: 22px; color: var(--tk2-text-2); flex-shrink: 0; }
body.tk2 .tk2-subnav .energie-subnav-inner a:hover { color: var(--tk2-text); }
body.tk2 .tk2-subnav .energie-subnav-inner a.is-active { color: var(--tk2-text); font-weight: 650; border: 0; }
body.tk2 .tk2-subnav .energie-subnav-inner a.is-active svg { color: var(--tk2-blue); }
body.tk2 .tk2-subnav .energie-subnav-inner a.is-active::after {
  content: ""; position: absolute; left: 1rem; right: 1rem; bottom: 0; height: 3px;
  border-radius: 3px 3px 0 0; background: var(--tk2-blue);
}
body.tk2 .tk2-subnav .energie-subnav-inner a:focus-visible { outline: 2px solid var(--tk2-blue); outline-offset: -4px; border-radius: 8px; }

/* ==========================================================================
   Dunkle Bildkacheln (Energie-Referenz T241)
   ========================================================================== */
.tk2-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.tk2-tile {
  display: flex; flex-direction: column; background: var(--tk2-navy-2); color: #fff;
  border-radius: var(--tk2-radius); overflow: hidden; text-decoration: none;
  box-shadow: var(--tk2-shadow); transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
a.tk2-tile:hover { transform: translateY(-3px); box-shadow: var(--tk2-shadow-lg); }
.tk2-tile-media { aspect-ratio: 16 / 7.5; overflow: hidden; background: var(--tk2-navy-3); }
.tk2-tile-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
a.tk2-tile:hover .tk2-tile-media img { transform: scale(1.03); }
.tk2-tile-body { display: flex; flex-direction: column; gap: .6rem; padding: 1.6rem 1.75rem 1.5rem; flex: 1; }
.tk2-kicker { margin: 0; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tk2-blue); }
.tk2-tile .tk2-kicker, .tk2-dark .tk2-kicker, .tk2-hcard .tk2-kicker, .tk2-phase .tk2-kicker { color: var(--tk2-blue-on-dark); }
.tk2-tile h3 { margin: 0; font-size: 1.4rem; font-weight: 700; color: #fff; letter-spacing: -0.02em; }
.tk2-tile p:not(.tk2-kicker) { margin: 0; color: var(--tk2-text-on-dark); font-size: .98rem; line-height: 1.6; }
.tk2-tile .tk2-link { margin-top: auto; padding-top: .4rem; color: var(--tk2-blue-on-dark); }
.tk2-tile--wide { grid-column: 1 / -1; }

/* ==========================================================================
   Bild-Text-Bereich (Split mit großem Bild)
   ========================================================================== */
.tk2-split {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.tk2-split--flip .tk2-split-media { order: 2; }
.tk2-split-media {
  position: relative; border-radius: calc(var(--tk2-radius) + 4px); overflow: hidden;
  box-shadow: var(--tk2-shadow-lg); aspect-ratio: 4 / 3; background: var(--tk2-navy-3);
}
.tk2-split-media img { width: 100%; height: 100%; object-fit: cover; }
.tk2-split-copy h2 { margin-bottom: 1rem; text-wrap: balance; }
.tk2-split-copy > p:not(.eyebrow) { color: var(--tk2-text-2); font-size: 1.05rem; line-height: 1.75; margin: 0 0 1rem; }
.tk2-dark .tk2-split-copy > p:not(.eyebrow) { color: var(--tk2-text-on-dark); }
.tk2-split-copy .btn { margin-top: .75rem; }
.tk2-checks { display: grid; gap: .65rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.tk2-checks li { position: relative; padding-left: 1.75rem; line-height: 1.6; color: var(--tk2-text-2); }
.tk2-dark .tk2-checks li { color: var(--tk2-text-on-dark); }
.tk2-checks li::before {
  content: ""; position: absolute; left: 2px; top: .45em; width: 13px; height: 7px;
  border-left: 2px solid var(--tk2-blue); border-bottom: 2px solid var(--tk2-blue); transform: rotate(-45deg);
}
.tk2-dark .tk2-checks li::before { border-color: var(--tk2-blue-on-dark); }

/* ---- Kennzahlen (Fakten) ---- */
.tk2-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.75rem, 1.5vw, 1rem); margin: 1.5rem 0 0; padding: 0; list-style: none; }
.tk2-facts li {
  display: flex; flex-direction: column; gap: .3rem; padding: 1.25rem 1.2rem;
  background: #fff; border-radius: var(--tk2-radius-sm); border: 1px solid var(--tk2-line); box-shadow: var(--tk2-shadow);
}
.tk2-facts strong { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 800; letter-spacing: -0.03em; color: var(--tk2-blue); line-height: 1.1; }
.tk2-facts span { color: var(--tk2-text-2); font-size: .92rem; line-height: 1.5; }
.tk2-dark .tk2-facts li, .tk2-band .tk2-facts li { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); box-shadow: none; }
.tk2-dark .tk2-facts strong, .tk2-band .tk2-facts strong { color: #fff; }
.tk2-dark .tk2-facts span, .tk2-band .tk2-facts span { color: var(--tk2-text-on-dark); }

/* ==========================================================================
   Strategie: drei große nummerierte Phasen mit Verbindungslinie
   ========================================================================== */
.tk2-phases {
  position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem); margin: 0; padding: 0; list-style: none; counter-reset: none;
}
.tk2-phase {
  position: relative; display: flex; flex-direction: column;
  background: var(--tk2-navy-2); border: 1px solid rgba(255, 255, 255, .08);
  border-radius: calc(var(--tk2-radius) + 2px); overflow: visible; box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
}
.tk2-phase-media { aspect-ratio: 16 / 10; overflow: hidden; border-radius: calc(var(--tk2-radius) + 2px) calc(var(--tk2-radius) + 2px) 0 0; background: var(--tk2-navy-3); }
.tk2-phase-media img { width: 100%; height: 100%; object-fit: cover; }
.tk2-phase-num {
  position: relative; z-index: 2; display: grid; place-items: center;
  width: 64px; height: 64px; margin: -32px 0 0 1.75rem; border-radius: 50%;
  background: var(--tk2-blue); color: #fff; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em;
  box-shadow: 0 0 0 6px var(--tk2-navy-2), 0 10px 24px rgba(25, 103, 210, .35);
}
/* dezente Verbindungslinie zwischen den Nummern (Höhe der Bildkante = 62,5 % der Kartenbreite) */
.tk2-phases { --tk2-gap: clamp(1.25rem, 2.5vw, 2rem); gap: var(--tk2-gap); }
.tk2-phase:not(:last-child)::after {
  content: ""; position: absolute; z-index: 3; top: 0; margin-top: 62.5%;
  left: calc(1.75rem + 64px + 10px); right: calc(-1 * var(--tk2-gap) - 1.75rem + 10px); height: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .15));
  pointer-events: none;
}
.tk2-phase-body { display: flex; flex-direction: column; gap: .6rem; padding: 1.4rem 1.75rem 2rem; }
.tk2-phase h3 { margin: 0; font-size: clamp(1.25rem, 1.8vw, 1.5rem); color: #fff; letter-spacing: -0.02em; line-height: 1.2; }
.tk2-phase p:not(.tk2-kicker) { margin: 0; color: var(--tk2-text-on-dark); line-height: 1.7; }
.tk2-phases-foot { margin-top: clamp(2rem, 4vw, 3rem); display: flex; flex-wrap: wrap; gap: .85rem; align-items: center; }

/* ==========================================================================
   Referenzen: große Hauptreferenz + mittlere Bildkarten
   ========================================================================== */
.tk2-feature {
  position: relative; isolation: isolate; overflow: hidden; border-radius: calc(var(--tk2-radius) + 4px);
  background: var(--tk2-navy); color: #fff; min-height: 500px; display: flex; align-items: center; box-shadow: var(--tk2-shadow-lg);
}
.tk2-feature-media { position: absolute; inset: 0 0 0 34%; z-index: -2; }
.tk2-feature-media img { width: 100%; height: 100%; object-fit: cover; }
.tk2-feature::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, var(--tk2-navy) 0%, var(--tk2-navy) 34%, rgba(10, 22, 38, .78) 48%, rgba(10, 22, 38, .15) 74%, rgba(10, 22, 38, 0) 100%);
}
.tk2-feature-body { padding: clamp(2rem, 4.5vw, 3.75rem); max-width: 640px; display: flex; flex-direction: column; gap: 1rem; }
.tk2-feature h3 { margin: 0; font-size: clamp(1.8rem, 3.2vw, 2.6rem); font-weight: 750; color: #fff; letter-spacing: -0.03em; }
.tk2-feature .btn { align-self: flex-start; margin-top: .75rem; }
.tk2-metrics { display: flex; flex-wrap: wrap; gap: 1rem 0; margin: .5rem 0; padding: 0; list-style: none; }
.tk2-metrics li { padding: 0 1.5rem; border-left: 1px solid rgba(255, 255, 255, .22); min-width: 0; }
.tk2-metrics li:first-child { padding-left: 0; border-left: 0; }
.tk2-metrics strong { display: block; font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; color: #fff; }
.tk2-metrics span { display: block; font-size: .9rem; color: #C8C9CC; margin-top: .2rem; }
.tk2-metrics li:has(.tk2-pre) { display: flex; flex-direction: column-reverse; justify-content: flex-end; }

.tk2-refs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); margin-top: clamp(1rem, 2vw, 1.5rem); }
.tk2-ref { display: flex; flex-direction: column; background: #fff; border-radius: var(--tk2-radius); overflow: hidden; box-shadow: var(--tk2-shadow); border: 1px solid rgba(227, 232, 239, .7); }
.tk2-ref-media { position: relative; aspect-ratio: 16 / 9.5; background: var(--tk2-navy-3); }
.tk2-ref-media img { width: 100%; height: 100%; object-fit: cover; }
.tk2-badge {
  position: absolute; left: 1.25rem; bottom: -15px; display: inline-flex; align-items: center; min-height: 30px;
  padding: .3rem .85rem; border-radius: 999px; background: #fff; color: var(--tk2-blue);
  font-size: .8rem; font-weight: 700; box-shadow: 0 4px 14px rgba(10, 10, 10, .12);
}
.tk2-ref-body { display: flex; flex-direction: column; gap: .9rem; padding: 1.85rem 1.5rem 1.5rem; flex: 1; }
.tk2-ref h3 { margin: 0; font-size: 1.25rem; color: var(--tk2-text); letter-spacing: -0.02em; }
.tk2-ref .tk2-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 0; margin: 0; }
.tk2-ref .tk2-metrics li { padding: 0 0 0 1rem; border-left: 1px solid var(--tk2-line); }
.tk2-ref .tk2-metrics li:nth-child(odd) { padding-left: 0; border-left: 0; }
.tk2-ref .tk2-metrics strong { font-size: 1.15rem; color: var(--tk2-text); }
.tk2-ref .tk2-metrics span { color: var(--tk2-text-2); font-size: .86rem; }

/* ==========================================================================
   Bildkarten (Cloud)
   ========================================================================== */
.tk2-mcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.tk2-mcard {
  display: flex; flex-direction: column; background: #fff; border-radius: calc(var(--tk2-radius) + 2px);
  overflow: hidden; box-shadow: var(--tk2-shadow); border: 1px solid rgba(227, 232, 239, .7);
  transition: box-shadow .25s var(--ease), transform .25s var(--ease);
}
.tk2-mcard:hover { box-shadow: var(--tk2-shadow-lg); transform: translateY(-2px); }
.tk2-mcard-media { position: relative; aspect-ratio: 4 / 3; background: var(--tk2-navy-3); overflow: hidden; }
.tk2-mcard-media img { width: 100%; height: 100%; object-fit: cover; }
.tk2-mcard-media::after { content: ""; position: absolute; inset: 55% 0 0 0; background: linear-gradient(180deg, rgba(10, 22, 38, 0), rgba(10, 22, 38, .35)); }
.tk2-mcard .tk2-icon { position: relative; z-index: 2; margin: -26px 0 0 1.5rem; background: #fff; box-shadow: 0 6px 18px rgba(10, 10, 10, .14); }
.tk2-mcard-body { display: flex; flex-direction: column; gap: .7rem; padding: 1rem 1.6rem 1.6rem; flex: 1; }
.tk2-mcard h3 { margin: 0; font-size: 1.3rem; color: var(--tk2-text); letter-spacing: -0.02em; line-height: 1.25; }
.tk2-mcard p:not(.tk2-kicker) { margin: 0; color: var(--tk2-text-2); line-height: 1.65; }
.tk2-mcard .tk2-link { margin-top: auto; padding-top: .35rem; }

/* ---- Dunkles Bildband mit Plattform-Fakten (Cloud) ---- */
.tk2-band {
  position: relative; isolation: isolate; overflow: hidden; border-radius: calc(var(--tk2-radius) + 4px);
  background: var(--tk2-navy); color: #fff; box-shadow: var(--tk2-shadow-lg);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 420px;
}
.tk2-band-media { position: relative; min-height: 260px; }
.tk2-band-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tk2-band-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(270deg, var(--tk2-navy) 0%, rgba(10, 22, 38, .4) 28%, rgba(10, 22, 38, 0) 60%); }
.tk2-band-copy { padding: clamp(2rem, 4.5vw, 3.5rem); display: flex; flex-direction: column; justify-content: center; }
.tk2-band-copy h2 { color: #fff; margin-bottom: 1rem; }
.tk2-band-copy > p:not(.eyebrow) { color: var(--tk2-text-on-dark); line-height: 1.7; margin: 0; }
.tk2-band .eyebrow, .tk2-feature .eyebrow { color: var(--tk2-blue-on-dark); }

/* ==========================================================================
   Horizontale Premium-Karten (Telekommunikation)
   ========================================================================== */
.tk2-hstack { display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem); }
.tk2-hcard {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); min-height: 380px;
  background: var(--tk2-navy-2); color: #fff; border-radius: calc(var(--tk2-radius) + 4px); overflow: hidden;
  box-shadow: var(--tk2-shadow-lg); text-decoration: none;
}
.tk2-hcard--reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.tk2-hcard--reverse .tk2-hcard-media { order: 2; }
.tk2-hcard-media { position: relative; overflow: hidden; background: var(--tk2-navy-3); min-height: 260px; }
.tk2-hcard-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.tk2-hcard:hover .tk2-hcard-media img { transform: scale(1.03); }
.tk2-hcard-body { display: flex; flex-direction: column; justify-content: center; gap: .8rem; padding: clamp(1.75rem, 4vw, 3.25rem); }
.tk2-hcard h3 { margin: 0; font-size: clamp(1.45rem, 2.4vw, 2rem); color: #fff; letter-spacing: -0.025em; line-height: 1.2; }
.tk2-hcard p:not(.tk2-kicker) { margin: 0; color: var(--tk2-text-on-dark); font-size: 1.05rem; line-height: 1.7; }
.tk2-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: .4rem 0 .2rem; padding: 0; list-style: none; }
.tk2-chips li {
  display: inline-flex; align-items: center; min-height: 32px; padding: .3rem .85rem; border-radius: 999px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .2); color: #EDEDED; font-size: .86rem; font-weight: 500;
}
.tk2-hcard .tk2-link { color: var(--tk2-blue-on-dark); margin-top: .4rem; }
.tk2-hcard-links { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .tk2-mcards, .tk2-refs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tk2-mcards > :last-child:nth-child(odd), .tk2-refs > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .tk2-mcards > :last-child:nth-child(odd) .tk2-mcard-media, .tk2-refs > :last-child:nth-child(odd) .tk2-ref-media { aspect-ratio: 16 / 7; }
  .tk2-phases { grid-template-columns: 1fr; max-width: 720px; }
  .tk2-phase { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .tk2-phase-media { aspect-ratio: auto; min-height: 220px; border-radius: calc(var(--tk2-radius) + 2px) 0 0 calc(var(--tk2-radius) + 2px); }
  .tk2-phase-num { position: absolute; left: calc(45% - 32px); top: 1.5rem; margin: 0; }
  .tk2-phase-body { padding: 1.75rem 1.75rem 1.75rem 3rem; justify-content: center; }
  .tk2-phase:not(:last-child)::after {
    margin-top: 0; top: calc(1.5rem + 64px + 10px); bottom: calc(-1 * var(--tk2-gap) - 1.5rem + 10px);
    left: calc(45% - 1px); right: auto; width: 2px; height: auto;
    background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .15));
  }
  .tk2-feature-media { left: 22%; }
  .tk2-hcard, .tk2-hcard--reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .tk2-split, .tk2-split--flip { grid-template-columns: 1fr; }
  .tk2-split--flip .tk2-split-media { order: 0; }
  .tk2-split-media { aspect-ratio: 16 / 9; }
  .tk2-band { grid-template-columns: 1fr; }
  .tk2-band-media::after { background: linear-gradient(0deg, var(--tk2-navy) 0%, rgba(10, 22, 38, .2) 55%, rgba(10, 22, 38, 0) 100%); }
  .tk2-feature { min-height: 0; flex-direction: column; align-items: stretch; }
  .tk2-feature-media { position: relative; inset: auto; height: 260px; z-index: 0; }
  .tk2-feature::before { display: none; }
  .tk2-feature-body { max-width: none; }
  .tk2-hcard, .tk2-hcard--reverse { grid-template-columns: 1fr; min-height: 0; }
  .tk2-hcard--reverse .tk2-hcard-media { order: 0; }
  .tk2-hcard-media { aspect-ratio: 16 / 9; min-height: 0; }
}
@media (max-width: 800px) {
  .tk2-tiles { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .tk2-mcards, .tk2-refs { grid-template-columns: 1fr; }
  .tk2-mcards > :last-child:nth-child(odd) .tk2-mcard-media, .tk2-refs > :last-child:nth-child(odd) .tk2-ref-media { aspect-ratio: 16 / 9.5; }
  .tk2-phase { display: flex; }
  .tk2-phase-media { aspect-ratio: 16 / 9; min-height: 0; border-radius: calc(var(--tk2-radius) + 2px) calc(var(--tk2-radius) + 2px) 0 0; }
  .tk2-phase-num { position: relative; left: auto; top: auto; margin: -32px 0 0 1.5rem; }
  .tk2-phase-body { padding: 1.25rem 1.5rem 1.75rem; }
  .tk2-phase:not(:last-child)::after { display: none; }
  .tk2-facts { grid-template-columns: 1fr; }
  .tk2-tile-body { padding: 1.4rem 1.35rem 1.4rem; }
  .tk2-tile-media { aspect-ratio: 16 / 9; }
  .tk2-hero-actions .btn { flex: 1 1 100%; }
  body.tk2 .energie-subnav.tk2-subnav { margin-top: 0; padding-top: .9rem; }
  body.tk2 .energie-subnav.tk2-subnav:has(+ .tk2-surface) { background: var(--tk2-surface); }
  body.tk2 .tk2-hero--subnav { padding-bottom: 3rem; }
  body.tk2 .tk2-subnav .energie-subnav-inner a { min-height: 60px; padding: 0 1rem; }
  .tk2-metrics li { padding: 0 1rem; }
  .tk2-feature-media { height: 220px; }
}
@media (max-width: 360px) {
  .tk2-metrics { flex-direction: column; }
  .tk2-metrics li, .tk2-ref .tk2-metrics li { border-left: 0; padding: 0; }
  .tk2-ref .tk2-metrics { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .tk2-tile, .tk2-tile-media img, .tk2-mcard, .tk2-hcard-media img, .tk2-link svg { transition: none !important; }
  a.tk2-tile:hover, .tk2-mcard:hover { transform: none; }
  a.tk2-tile:hover .tk2-tile-media img, .tk2-hcard:hover .tk2-hcard-media img { transform: none; }
}

/* ---------- Bento: asymmetrische Bildkarten (Cloud) ---------- */
.tk2-bento { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: clamp(1rem, 2vw, 1.5rem); }
.tk2-bcard { display: flex; flex-direction: column; background: var(--tk2-navy-2); border-radius: var(--tk2-radius); overflow: hidden; box-shadow: var(--tk2-shadow); color: #fff; }
.tk2-bcard--lead { grid-row: 1 / span 2; }
.tk2-bcard-media { position: relative; aspect-ratio: 16 / 7; overflow: hidden; background: var(--tk2-navy-3); }
.tk2-bcard--lead .tk2-bcard-media { aspect-ratio: auto; flex: 1; min-height: 340px; }
.tk2-bcard-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.tk2-bcard:hover .tk2-bcard-media img { transform: scale(1.03); }
.tk2-bcard-body { display: flex; flex-direction: column; gap: .65rem; padding: 1.6rem 1.75rem 1.6rem; }
.tk2-bcard--lead .tk2-bcard-body { padding: clamp(1.75rem, 3vw, 2.5rem); }
.tk2-bcard .tk2-kicker { color: var(--tk2-blue-on-dark); }
.tk2-bcard h3 { margin: 0; font-size: 1.35rem; color: #fff; letter-spacing: -0.02em; line-height: 1.25; }
.tk2-bcard--lead h3 { font-size: clamp(1.5rem, 2.4vw, 1.95rem); }
.tk2-bcard p:not(.tk2-kicker) { margin: 0; color: var(--tk2-text-on-dark); line-height: 1.65; }
.tk2-bcard .tk2-link { color: var(--tk2-blue-on-dark); margin-top: .35rem; align-self: flex-start; }
@media (max-width: 860px) {
  .tk2-bento { grid-template-columns: 1fr; }
  .tk2-bcard--lead { grid-row: auto; }
  .tk2-bcard--lead .tk2-bcard-media, .tk2-bcard-media { flex: none; min-height: 0; aspect-ratio: 16 / 9; }
}
@media (prefers-reduced-motion: reduce) {
  .tk2-bcard-media img { transition: none !important; }
  .tk2-bcard:hover .tk2-bcard-media img { transform: none; }
}

/* T242 – Energie-Unterseiten: Band mit Fließtext/Checks, gespiegelte Variante */
.tk2-band-copy > p:not(.eyebrow) + p { margin-top: 1rem; }
.tk2-band .tk2-checks li { color: var(--tk2-text-on-dark); }
.tk2-band .tk2-checks li::before { border-color: var(--tk2-blue-on-dark); }
.tk2-band--flip .tk2-band-media { order: 2; }
.tk2-band--flip .tk2-band-media::after { background: linear-gradient(90deg, var(--tk2-navy) 0%, rgba(10, 22, 38, .4) 28%, rgba(10, 22, 38, 0) 60%); }
@media (max-width: 860px) {
  .tk2-band--flip .tk2-band-media { order: 0; }
  .tk2-band--flip .tk2-band-media::after { background: linear-gradient(0deg, var(--tk2-navy) 0%, rgba(10, 22, 38, .2) 55%, rgba(10, 22, 38, 0) 100%); }
}
body.tk2 .energie-subnav.tk2-subnav:has(+ .tk2-dark) { background: linear-gradient(180deg, transparent 50%, var(--tk2-navy) 50%); }
.tk2-facts--rows { grid-template-columns: 1fr; gap: .6rem; }
.tk2-facts--rows li { flex-direction: row; align-items: baseline; gap: 1rem; }
.tk2-facts--rows strong { flex: 0 0 6.5rem; font-size: clamp(1.15rem, 1.6vw, 1.35rem); }
@media (max-width: 640px) {
  body.tk2 .energie-subnav.tk2-subnav:has(+ .tk2-dark) { background: var(--tk2-navy); }
  .tk2-facts--rows li { flex-direction: column; gap: .2rem; }
  .tk2-facts--rows strong { flex: none; }
}

/* ===== T243 Teil A – natürliche Bildwirkung: Blauschimmer über Fotos neutralisiert (nur body.tk2 / .tk2-Komponenten) ===== */
body.tk2 { --img-grade: saturate(0.97) contrast(1.02); --tk2-scrim: 14, 14, 15; }
body.tk2 .tk2-hero .page-hero-media::after {
  background:
    linear-gradient(180deg, rgba(var(--tk2-scrim), .36) 0%, rgba(var(--tk2-scrim), .84) 100%),
    linear-gradient(90deg, rgba(var(--tk2-scrim), .9) 0%, rgba(var(--tk2-scrim), .74) 45%, rgba(var(--tk2-scrim), .2) 82%, rgba(var(--tk2-scrim), .05) 100%);
}
body.tk2 .tk2-hero .btn-ghost { background: rgba(var(--tk2-scrim), .35); }
body.tk2 .cta-banner-media::after { background: linear-gradient(100deg, rgba(var(--tk2-scrim), .92) 0%, rgba(var(--tk2-scrim), .8) 45%, rgba(var(--tk2-scrim), .55) 100%); }
body.tk2 .tk2-feature::before { background: linear-gradient(90deg, var(--tk2-navy) 0%, var(--tk2-navy) 34%, rgba(var(--tk2-scrim), .62) 46%, rgba(var(--tk2-scrim), .12) 72%, rgba(var(--tk2-scrim), 0) 100%); }
body.tk2 .tk2-mcard-media::after { background: linear-gradient(180deg, rgba(var(--tk2-scrim), 0), rgba(var(--tk2-scrim), .28)); }
body.tk2 .tk2-band-media::after { background: linear-gradient(270deg, var(--tk2-navy) 0%, rgba(var(--tk2-scrim), .30) 18%, rgba(var(--tk2-scrim), 0) 48%); }
body.tk2 .tk2-band--flip .tk2-band-media::after { background: linear-gradient(90deg, var(--tk2-navy) 0%, rgba(var(--tk2-scrim), .30) 18%, rgba(var(--tk2-scrim), 0) 48%); }
@media (max-width: 860px) {
  body.tk2 .tk2-band-media::after, body.tk2 .tk2-band--flip .tk2-band-media::after { background: linear-gradient(0deg, var(--tk2-navy) 0%, rgba(var(--tk2-scrim), .14) 40%, rgba(var(--tk2-scrim), 0) 100%); }
}

/* ===== T243 Teil B – Ergänzungen für Über uns, Vision, Service, Mobilfunk, Festnetz, Statistiken ===== */
.tk2-lede { max-width: 62rem; margin: 0; font-size: clamp(1.2rem, 2.1vw, 1.65rem); line-height: 1.55; font-weight: 500; letter-spacing: -0.015em; color: var(--tk2-text); text-wrap: pretty; }
.tk2-lede-wrap { display: grid; gap: 1rem; }
.tk2-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); margin: 0; padding: 0; list-style: none; }
.tk2-kpi { display: flex; flex-direction: column; background: var(--tk2-navy-2); color: #fff; border-radius: calc(var(--tk2-radius) + 2px); overflow: hidden; box-shadow: var(--tk2-shadow-lg); border: 1px solid rgba(255, 255, 255, .06); }
.tk2-kpi-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--tk2-navy-3); }
.tk2-kpi-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tk2-kpi-body { display: flex; flex-direction: column; gap: .35rem; padding: 1.5rem 1.6rem 1.7rem; }
.tk2-kpi .tk2-kicker { color: var(--tk2-blue-on-dark); }
.tk2-kpi-num { margin: 0; font-size: clamp(3rem, 5.2vw, 4.6rem); font-weight: 800; line-height: 1; letter-spacing: -0.045em; color: #fff; font-variant-numeric: tabular-nums; }
.tk2-kpi-label { margin: 0; font-size: 1.08rem; font-weight: 600; color: var(--tk2-text-on-dark); }
.tk2-note { margin: 1.5rem 0 0; color: var(--tk2-text-on-dark); font-size: .95rem; line-height: 1.6; }
.tk2-surface .tk2-note, .tk2-note--light { color: var(--tk2-text-2); }
.tk2-tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tk2-tiles--3 .tk2-tile-media { aspect-ratio: 16 / 10; }
@media (max-width: 1024px) {
  .tk2-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tk2-tiles--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tk2-tiles--3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .tk2-tiles--3 > :last-child:nth-child(odd) .tk2-tile-media { aspect-ratio: 16 / 7; }
}
@media (max-width: 800px) {
  .tk2-tiles--3 { grid-template-columns: 1fr; }
  .tk2-tiles--3 > :last-child:nth-child(odd) .tk2-tile-media, .tk2-tiles--3 .tk2-tile-media { aspect-ratio: 16 / 9; }
}
@media (max-width: 560px) {
  .tk2-kpis { grid-template-columns: 1fr; }
  .tk2-kpi { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .tk2-kpi-media { aspect-ratio: auto; min-height: 150px; }
  .tk2-kpi-body { justify-content: center; padding: 1.2rem 1.2rem 1.3rem; }
  .tk2-kpi-num { font-size: clamp(2.5rem, 12vw, 3.2rem); }
}
.tk2-stack { display: grid; gap: clamp(3rem, 7vw, 5.5rem); }
.tk2-split-copy h3.h2 { font-size: clamp(1.75rem, 3vw, 2.4rem); letter-spacing: -0.025em; line-height: 1.15; color: var(--tk2-text); }