/* ==========================================================================
   index.css — Startseiten-Schicht der Hoesch-Index-Integration
   --------------------------------------------------------------------------
   Phase-5c-Status (2026-05-08):

   Diese Datei ist jetzt die EINZIGE Startseiten-CSS-Schicht. Sie wird in
   index.html direkt nach common_style.v2.css und shared-components.css
   geladen und enthaelt ALLE Index-spezifischen Regeln. assets/css/style.css
   wurde aus der Ladeliste entfernt; die letzten Helfer-Reste
   (--home1-section-overlap, scroll-behavior, scroll-margin-top, section-
   padding/-x, section-head-style1, Mobile-Helper-Overrides, html[lang=ar]
   RTL und home-unified-sections) sind in Section 0 weiter unten migriert.

   Inhalt nach Phase 5c:

   0. Index-Helfer-Reste aus style.css (Phase 5c, 2026-05-08).
   1. Token-Bridge .butn.color-orange1 → Hoesch Brand Primary (Phase 5a).
   2. Hover-Bridge .butn.hover-bg-orange1 / .hover-bg-black → Brand Gold.
   3. Phase-4b-Compat: hoesch-card--<tone> Top-Border auf Plan-Cards neutral.
   4. tc-blog-style1 + tc-chat-style1 (Phase 5b-2 Schritt 1).
   5. tc-experience-style1 (Phase 5b-2 Schritt 2).
   6. tc-testimonials-style1 + tc-clients-style1 (Phase 5b-2 Schritt 4).
   7. tc-process-style1 (Phase 5b-2 Schritt 5).
   8. tc-services-style1 (Phase 5b-2 Schritt 6).
   9. tc-projects-style1 + tc-projects-style1--mirrored (Phase 5b-2 Schritt 7).
   10. tc-header-style1 + .persHeader (Phase 5b-2 Schritt 8).
   11. tc-packages-style1 + Plan-Cards + .eyebrow (Phase 5b-2 Schritt 9).

   Source-Order: nach common_style.v2.css und shared-components.css. Damit
   gewinnen alle Index-Regeln ueber generische Suite-Primitives (z.B.
   :where(.hoesch-card.hoesch-card--<tone>) Spec 0). Body-Scope `.home-style1`
   isoliert die meisten Regeln auf die Startseite.

   Die hoesch-pages.v1.css enthaelt fuer (1) und (2) das gleiche Mapping
   global ohne body-scope. Diese index.css-Variante ist .home-style1-
   gescoped, sodass die Regeln nur auf der Startseite wirken und nicht
   in den Footer/Legacy-Seiten driften.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Index-Helfer-Reste (Tokens, Scroll-Helpers, Section-Padding,
      Section-Head-Style1, Mobile-Helper-Overrides, RTL, home-unified-sections)
   Phase 5c (2026-05-08): Verlagerung aus assets/css/style.css Z. 1-138 nach
   index.css. Damit ist style.css aus der Index-Ladeliste komplett entfernt.

   Sub-Inventar dieser Section:
   0a. Index-Token --home1-section-overlap auf .home-style1.
   0b. html { scroll-behavior: smooth } — globale Smooth-Scroll-Regel, war in
       style.css unscoped. Wirkt jetzt nur, weil index.css NUR von index.html
       geladen wird (Hoesch-Pages laden index.css nicht).
   0c. Anchor-Sprungmarken scroll-margin-top: 110px fuer
       #ueberuns/#pakete/#bewertung/#verkaufen/#projekte/#kaufen.
   0d. .home-style1 .section-padding (vertikales 100/100 Padding) und
       .section-padding-x (horizontal 4vw). .section-padding existiert auch
       global in common_style.v2.css mit identischem 100px-Wert; die scoped
       Regel hier bleibt wegen .home-style1 specifity Sieger. Mobile-Override
       in 0g schraenkt vertikales Padding auf 50/50 ein.
   0e. .home-style1 .section-head-style1 .sub-title (mit ::before-Bullet) +
       .heading-h2 Skala. Im aktuellen Index-Markup gibt es derzeit keine
       .section-head-style1-Container; die Regeln sind defensiv erhalten,
       falls historische Templates oder zukuenftige Section-Heads sie nutzen.
   0f. Mobile-Helper-Overrides @media (max-width: 991px): .home-style1 br
       (display:none gegen Mobile-Linebreaks), Font-Skala-Helfer .fsz-50/
       .fsz-45/.fsz-40/.fsz-30 auf 30/25/25/18 mit !important, Margin-Helfer
       .mb-90/.mb-50 + .mt-5, Section-Head-Skala 30px, .section-padding 50/50.
       !important wegen Bootstrap-Utility-Konflikten in common_style.v2.css.
   0g. html[lang=ar] .home-style1 RTL-Direction + IBM-Plex-Sans-Arabic-Font.
   0h. .home-style1 .home-unified-sections Wrapper (negative margin-top in
       Hoehe von --home1-section-overlap, abgerundete Top-Ecken, isolierte
       Stack-Schicht mit neutraler Hintergrundflaeche ohne Verlauf). Plus zwei
       dekorative ::before/::after Radial-Gradients (Bronze top-left,
       Smaragd bottom-right). Plus > section z-index-Stack.

   Vorher: assets/css/style.css Z. 1-13, 23-53, 55-90, 91-94, 104-138 (alle
   verbliebenen Helfer-Reste nach Phase 5b-2 Schritt 9). Migration 1:1 ohne
   Werte-Aenderung; Source-Order-Wechsel von "vor shared-components.css" zu
   "nach shared-components.css" hat hier keinen Effekt, weil shared-components.css
   keine konkurrierenden Selektoren mit gleicher Specificity enthaelt
   (verifiziert via rg + Pre/Post-Snapshot-Vergleich).
   -------------------------------------------------------------------------- */
/* 0a. Index-Token */
.home-style1,
body.hoesch-page--home {
  --home1-section-overlap: 40px;
}
/* 0b. Globale Smooth-Scroll (wirkt nur auf index.html, da index.css nur dort) */
html {
  scroll-behavior: smooth;
}
/* 0c. Anchor-Sprungmarken */
.home-style1 #ueberuns,
.home-style1 #pakete,
.home-style1 #bewertung,
.home-style1 #verkaufen,
.home-style1 #projekte,
.home-style1 #kaufen,
body.hoesch-page--home #ueberuns,
body.hoesch-page--home #pakete,
body.hoesch-page--home #bewertung,
body.hoesch-page--home #verkaufen,
body.hoesch-page--home #projekte,
body.hoesch-page--home #kaufen {
  scroll-margin-top: 110px;
}
/* 0d. Section-Padding-Helfer */
.home-style1 .section-padding,
body.hoesch-page--home .section-padding {
  padding-top: 100px;
  padding-bottom: 100px;
}
.home-style1 .section-padding-x,
body.hoesch-page--home .section-padding-x {
  padding-right: 4vw;
  padding-left: 4vw;
}
/* 0e. Section-Head-Style1 (Sub-Title + Heading-h2 Skala) */
.home-style1 .section-head-style1 .sub-title {
  font-size: 14px;
  color: #333;
  position: relative;
  padding-inline-start: 60px;
  text-transform: uppercase;
  letter-spacing: 3px;
}
.home-style1 .section-head-style1 .sub-title::before {
  position: absolute;
  content: "";
  left: 0;
  top: calc(50% - 4px);
  width: 30px;
  height: 8px;
  background-color: #888;
}
.home-style1 .section-head-style1 h2:not([class*="heading-h"]), .home-style1 .section-head-style1 .heading-h2 {
  font-size: 55px;
  letter-spacing: -1px;
  font-weight: 500;
  line-height: 1.1;
}
/* 0f. Mobile-Helper-Overrides */
@media screen and (max-width: 991px) {
  .home-style1 br {
    display: none;
  }
  .home-style1 .fsz-50 {
    font-size: 30px !important;
  }
  .home-style1 .fsz-45 {
    font-size: 25px !important;
  }
  .home-style1 .fsz-40 {
    font-size: 25px !important;
  }
  .home-style1 .mb-90 {
    margin-bottom: 40px !important;
  }
  .home-style1 .fsz-30 {
    font-size: 18px !important;
  }
  .home-style1 .mb-50 {
    margin-bottom: 30px !important;
  }
  .home-style1 .section-head-style1 .sub-title {
    margin-bottom: 15px !important;
  }
  .home-style1 .section-head-style1 h2:not([class*="heading-h"]), .home-style1 .section-head-style1 .heading-h2 {
    font-size: 30px;
  }
  .home-style1 .mt-5 {
    margin-top: 2rem !important;
  }
  .home-style1 .section-padding {
    padding-top: 50px;
    padding-bottom: 50px;
  }
}
/* 0g. RTL-Direction + Arabic-Font */
html[lang=ar] .home-style1 {
  direction: rtl;
  font-family: "IBM Plex Sans Arabic", sans-serif;
}
/* 0h. home-unified-sections Wrapper + Decor + > section Stack */
.home-style1 .home-unified-sections,
body.hoesch-page--home .home-unified-sections {
  position: relative;
  margin-top: calc(var(--home1-section-overlap) * -1);
  border-radius: 40px 40px 0 0;
  overflow: hidden;
  isolation: isolate;
  background-color: #F1EEE9;
  z-index: 10;
}
.home-style1 .home-unified-sections::before,
body.hoesch-page--home .home-unified-sections::before {
  position: absolute;
  content: "";
  left: -12vw;
  top: 60px;
  width: 34vw;
  height: 34vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--color-bronze-rgb, 205, 137, 70), 0.14) 0%, rgba(var(--color-bronze-rgb, 205, 137, 70), 0) 72%);
  pointer-events: none;
}
.home-style1 .home-unified-sections::after,
body.hoesch-page--home .home-unified-sections::after {
  position: absolute;
  content: "";
  right: -10vw;
  bottom: 120px;
  width: 32vw;
  height: 32vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--color-smaragd-rgb, 45, 87, 79), 0.12) 0%, rgba(var(--color-smaragd-rgb, 45, 87, 79), 0) 72%);
  pointer-events: none;
}
.home-style1 .home-unified-sections > section,
body.hoesch-page--home .home-unified-sections > section {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   1. Token-Bridge: Template-orange-1 → Hoesch Brand Primary
   Vorher: assets/css/style.css Z. 15-27 (vor Phase 5a)
   Greift auf alle .butn-Buttons in body.home-style1, die noch eine der
   Template-Farb-Klassen .color-orange1 / .border-orange1 / .bg-orange1
   tragen — Hero-CTAs, Section-Outline-CTAs (Bewertung, Projekte, Kaufen,
   Blog), Section-Primary-CTAs (Pakete, Verkaufen).
   -------------------------------------------------------------------------- */
.home-style1 .butn.color-orange1,
body.hoesch-page--home .butn.color-orange1 {
  color: var(--color-myprimary, #022424) !important;
}
.home-style1 .butn.border-orange1,
body.hoesch-page--home .butn.border-orange1 {
  border-color: var(--color-myprimary, #022424) !important;
}
.home-style1 .butn.bg-orange1,
body.hoesch-page--home .butn.bg-orange1 {
  background: var(--color-myprimary, #022424) !important;
}
.home-style1 .butn.bg-orange1.text-white,
.home-style1 .butn.bg-orange1 > span,
body.hoesch-page--home .butn.bg-orange1.text-white,
body.hoesch-page--home .butn.bg-orange1 > span {
  color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   2. Hover-Bridge: Template-orange-1 / Template-black → Hoesch Brand Gold
   Vorher: assets/css/style.css Z. 28-41 (vor Phase 5a)
   Mappt sowohl .hover-bg-orange1 als auch .hover-bg-black auf gold-fill mit
   primary-darkem Text. Wirkt auf Pakete-Primary-CTA, Verkaufen-Primary-CTA,
   Bewertung-Outline-CTA, Projekte-Outline-CTAs, Kaufen-Outline-CTAs sowie
   den About-Ghost-Light-CTA.
   -------------------------------------------------------------------------- */
.home-style1 .butn.hover-bg-orange1:hover,
.home-style1 .butn.hover-bg-orange1:focus-visible,
.home-style1 .butn.hover-bg-black:hover,
.home-style1 .butn.hover-bg-black:focus-visible,
body.hoesch-page--home .butn.hover-bg-orange1:hover,
body.hoesch-page--home .butn.hover-bg-orange1:focus-visible,
body.hoesch-page--home .butn.hover-bg-black:hover,
body.hoesch-page--home .butn.hover-bg-black:focus-visible {
  background: var(--color-gold, #DCBF6A) !important;
  border-color: var(--color-gold, #DCBF6A) !important;
  color: var(--color-myprimary, #022424) !important;
}
.home-style1 .butn.hover-bg-orange1:hover *,
.home-style1 .butn.hover-bg-orange1:focus-visible *,
.home-style1 .butn.hover-bg-black:hover *,
.home-style1 .butn.hover-bg-black:focus-visible *,
body.hoesch-page--home .butn.hover-bg-orange1:hover *,
body.hoesch-page--home .butn.hover-bg-orange1:focus-visible *,
body.hoesch-page--home .butn.hover-bg-black:hover *,
body.hoesch-page--home .butn.hover-bg-black:focus-visible * {
  color: var(--color-myprimary, #022424) !important;
}

/* --------------------------------------------------------------------------
   3. Phase-4b-Compat: Plan-Card Top-Border neutralisieren
   Vorher: assets/css/style.css Z. 42-53 (vor Phase 5a)

   Die additiven hoesch-card--<tone> Marker auf den 4 Pakete-Plan-Cards
   wuerden via :where(.hoesch-card.hoesch-card--<tone>) aus
   shared-components.css einen 4 px tonalen Top-Border zeichnen. Plan-Cards
   tragen aber bereits eine starke Tonalitaet via Linear-Gradient-Plan-
   Badge und tinted Plan-Visual; der zusaetzliche Top-Border waere Ueber-
   markierung und auf Mobile (perspective:2000px) deutlich sichtbar.

   Phase 4a Service-Cards behalten ihren 4 px Tone-Top-Border bewusst —
   sie tragen ihre Tonalitaet vorher nur ueber das transparente Step-Badge-
   Numeral. Diese Compat-Regel zielt strikt nur auf .tc-packages-style1
   .plan-card und beruehrt die Service-Cards in .tc-services-style1 nicht.
   -------------------------------------------------------------------------- */
.home-style1 .tc-packages-style1 .plan-card.hoesch-card,
body.hoesch-page--home .home-packages .plan-card.hoesch-card {
  border-top: 0;
}

/* --------------------------------------------------------------------------
   4. Active Home Sections: Blog and Chat
   Phase 5b-2 Schritt 1 (2026-05-07): Erste Migration aktiver tc-*-style1
   Welten von style.css nach index.css. Migrationsworkflow-Test mit den zwei
   kleinsten aktiven Sektionen.

   Vorher in assets/css/style.css:
   - Z. 140-144: html[lang=ar] .home-style1 .tc-chat-style1 .c-line (RTL)
   - Z. 1444-1494: tc-blog-style1 + zugehoerige @media (max-width: 991px)
   - Z. 1495-1541: tc-chat-style1 + zugehoerige @media (max-width: 991px)

   Migrierte Sektionen werden im Index-Markup in index.html genutzt:
   - <section class="tc-blog-style1"> (Aktuelles, Z. 1199)
   - <section class="tc-chat-style1"> (E-Mail-CTA, Z. 1276)

   Alle Selektoren bleiben unscoped (nicht .home-style1 .tc-blog-style1 ...),
   da style.css diese Regeln auch unscoped fuehrt und die Spezifizitaet beim
   Wechsel der Lade-Schicht (style.css -> index.css) identisch bleiben muss.
   Ziel: 0 computed-style Drift Desktop und Mobile.
   -------------------------------------------------------------------------- */
/* --------------- blog style1 --------------- */
.tc-blog-style1,
.home-news {
  position: relative;
  background-image: linear-gradient(to top, #F1EEE9, transparent);
}
.tc-blog-style1 .swiper-button-next,
.home-news .swiper-button-next {
  color: #000;
  right: 3vw;
}
.tc-blog-style1 .swiper-button-next::after,
.home-news .swiper-button-next::after {
  font-size: 40px;
}
.tc-blog-style1 .swiper-button-prev,
.home-news .swiper-button-prev {
  color: #000;
  left: 3vw;
}
.tc-blog-style1 .swiper-button-prev::after,
.home-news .swiper-button-prev::after {
  font-size: 40px;
}
.tc-blog-style1 .blog-card,
.home-news .blog-card {
  position: relative;
}
.tc-blog-style1 .blog-card .img,
.home-news .blog-card .img {
  position: relative;
  height: 415px;
  border-radius: 20px;
  overflow: hidden;
}
.tc-blog-style1 .blog-card .info,
.home-news .blog-card .info {
  padding-top: 40px;
  display: flex;
  width: 80%;
}
.tc-blog-style1 .blog-card .info .date,
.home-news .blog-card .info .date {
  width: 25%;
  flex-shrink: 0;
}

@media screen and (max-width: 991px) {
  .tc-blog-style1 .blog-card .img,
  .home-news .blog-card .img {
    height: 350px;
  }
  .tc-blog-style1 .blog-card .info,
  .home-news .blog-card .info {
    display: block;
    width: 100%;
  }
  .tc-blog-style1 .blog-card .info .date,
  .home-news .blog-card .info .date {
    width: 100%;
    margin-bottom: 15px;
  }
}
/* --------------- chat style1 --------------- */
.tc-chat-style1,
.home-contact {
  position: relative;
  padding: 150px 0;
  background-color: #F1EEE9;
}
.tc-chat-style1 .c-line,
.home-contact .c-line {
  position: absolute;
  right: 0;
  bottom: 70px;
  width: 60%;
  pointer-events: none;
  height: 450px;
  pointer-events: none;
  clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
  transition: all 2s linear;
}
.tc-chat-style1 .c-line.animated,
.home-contact .c-line.animated {
  clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
}
.tc-chat-style1 .xl-text,
.home-contact .xl-text {
  font-size: 80px;
  font-weight: 500;
  display: inline-block;
  max-width: 100%;
  position: relative;
  z-index: 10;
  line-height: 1;
  color: var(--color-smaragd, #2D574F);
  margin-bottom: 20px;
  overflow-wrap: anywhere;
  word-break: break-word;
  transition: color 0.2s ease;
}
.tc-chat-style1 a.xl-text:hover,
.tc-chat-style1 a.xl-text:focus-visible,
.home-contact a.xl-text:hover,
.home-contact a.xl-text:focus-visible {
  color: var(--color-gold, #DCBF6A);
}

@media screen and (max-width: 991px) {
  .tc-chat-style1 .c-line,
  .home-contact .c-line {
    width: 86vw;
    max-width: 360px;
    height: auto;
    right: 0;
    bottom: 18px;
  }
  .tc-chat-style1 .xl-text,
  .home-contact .xl-text {
    font-size: 6vw;
    line-height: 1.05;
  }
}
/* RTL-Adjustment fuer Chat-Decor-Linie */
html[lang=ar] .home-style1 .tc-chat-style1 .c-line,
html[lang=ar] body.hoesch-page--home .home-contact .c-line {
  right: auto;
  left: 0;
  transform: rotateX(180deg);
}

/* --------------------------------------------------------------------------
   5. Active Home Sections: Experience
   Phase 5b-2 Schritt 2 (2026-05-07): Zweite Migration aktiver tc-*-style1
   Welten von style.css nach index.css. Ueber-uns/Experience-Section mit
   c-line-Decor, exp-num Number-Display, rotate-txt Vertical-Label und
   gerottiertem Hero-Image.

   Vorher in assets/css/style.css:
   - Z. 111-113: html[lang=ar] .home-style1 .tc-experience-style1 .img.animated
   - Z. 114-118: html[lang=ar] .home-style1 .tc-experience-style1 .c-line
   - Z. 299-377: tc-experience-style1 Section + home-unified-sections-Override +
     c-line + exp-num .num + img + rotate-txt + @media (max-width: 991px)

   Aktiv im Index-Markup als <section id="ueberuns" class="tc-experience-style1
   section-padding-x"> in index.html (Z. 276), eingebettet in
   <div class="home-unified-sections">. Die home-unified-sections-Override
   Z. 309-313 stellt margin/border-radius/background auf 0 zurueck, weil der
   Container die Section-Optik neutralisiert.

   .exp-num und .rotate-txt sind exklusiv im tc-experience-style1-Scope
   verwendet (Markup-Treffer in index.html nur Z. 280, Z. 303). Die Klasse
   .c-line ist in mehreren Sections vorhanden, hier aber strikt unter
   .tc-experience-style1 gescoped. Reveal-Animations-Hooks (.animated)
   werden via assets/js/common_js.js IntersectionObserver gesetzt — die
   IO-Initialisierung wird von der Migration nicht beruehrt.
   -------------------------------------------------------------------------- */
/* --------------- experience style1 --------------- */
.tc-experience-style1,
.home-about {
  position: relative;
  padding: 150px 0 100px;
  background-color: #F1EEE9;
  border-radius: 40px 40px 0 0;
  overflow: hidden;
  margin-top: -40px;
  z-index: 10;
}
.home-style1 .home-unified-sections > .tc-experience-style1 {
  margin-top: 0;
  border-radius: 0;
  background-color: transparent;
}
.tc-experience-style1 .c-line,
.home-about .c-line {
  position: absolute;
  top: 70px;
  left: 0;
  width: 90%;
  height: calc(100% - 140px);
  z-index: 1;
  pointer-events: none;
  clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
  transition: all 2s linear;
}
.tc-experience-style1 .c-line.animated,
.home-about .c-line.animated {
  clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
}
.tc-experience-style1 .exp-num .num,
.home-about .exp-num .num {
  font-size: 150px;
  color: var(--color-smaragd);
  font-weight: 500;
}
.tc-experience-style1 .img,
.home-about .img {
  height: 550px;
  border-radius: 20px;
  overflow: hidden;
  transform: rotate(30deg) scale(1.3);
  transition: all 1s ease;
  transition-delay: 0.4s;
  opacity: 0;
}
.tc-experience-style1 .img.animated,
.home-about .img.animated {
  transform: rotate(0deg) scale(1);
  opacity: 1;
}
.tc-experience-style1 .rotate-txt,
.home-about .rotate-txt {
  font-size: 12px;
  color: #666;
  transform: rotate(90deg) translateX(30px);
  text-transform: uppercase;
  display: flex;
  transform-origin: right;
}
.tc-experience-style1 .rotate-txt ul,
.home-about .rotate-txt ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
}
.tc-experience-style1 .rotate-txt a,
.home-about .rotate-txt a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  line-height: 1.2;
}

@media screen and (min-width: 992px) {
  .tc-experience-style1 .rotate-txt,
  .home-about .rotate-txt {
    width: max-content;
    max-width: none;
  }

  .tc-experience-style1 .rotate-txt li,
  .tc-experience-style1 .rotate-txt a,
  .home-about .rotate-txt li,
  .home-about .rotate-txt a {
    white-space: nowrap;
  }
}

@media screen and (max-width: 991px) {
  .tc-experience-style1,
  .home-about {
    padding: 80px 0;
  }
  .tc-experience-style1 .c-line,
  .home-about .c-line {
    object-fit: contain;
  }
  .tc-experience-style1 .img,
  .home-about .img {
    transform: rotate(0);
    margin-bottom: 50px;
  }
  .tc-experience-style1 .exp-num .num,
  .home-about .exp-num .num {
    position: relative;
    margin-bottom: -175px;
    z-index: 10;
  }
  .tc-experience-style1 .rotate-txt,
  .home-about .rotate-txt {
    transform: none;
    transform-origin: initial;
    justify-content: flex-start !important;
    margin-top: 30px;
  }
  .tc-experience-style1 .rotate-txt ul,
  .home-about .rotate-txt ul {
    display: grid;
    gap: 6px;
  }
  .tc-experience-style1 .rotate-txt a,
  .home-about .rotate-txt a {
    min-height: 48px;
    padding: 0 4px;
    line-height: 1.4;
  }
}
/* RTL-Adjustments fuer Experience */
html[lang=ar] .home-style1 .tc-experience-style1 .img.animated,
html[lang=ar] body.hoesch-page--home .home-about .img.animated {
  transform: rotate(15deg) scale(1);
}
html[lang=ar] .home-style1 .tc-experience-style1 .c-line,
html[lang=ar] body.hoesch-page--home .home-about .c-line {
  left: auto;
  right: 0;
  transform: rotateY(180deg);
}

/* Shared-Footer-Integration (2026-05-07): Phase 5b-2 Schritt 3 reverted.
   tc-footer-style1 ist nun eine gemeinsame Hoesch-Komponente und liegt
   kanonisch in assets/css/shared-components.css ("2a. Shared Footer
   Primitives"). Damit haben Index-Seite und Hoesch-Seiten denselben Footer-
   Look und denselben Hover-Token (var(--hoesch-color-gold)). Siehe Action
   Plan Shared-Footer-Integration. */

/* --------------------------------------------------------------------------
   6. Active Home Sections: Testimonials and Clients
   Phase 5b-2 Schritt 4 (2026-05-07): Vierte Migration aktiver tc-*-style1
   Welten von style.css nach index.css. Testimonials/Kundenbewertungen-
   Section mit Quote-Icon, Slider mit 5 Kunden-Cards (Text + Avatar +
   Author-Inf), Slider-Controls mit Pagination, und Marquee-Slider
   (Hochgeschwindigkeits-Text-Marquee) am Ende.

   Vorher in assets/css/style.css:
   - Z. 124-131: html[lang=ar] .home-style1 .tc-testimonials-style1 RTL-Adjustments
     (slider-controls + c-line)
   - Z. 1240-1352: tc-testimonials-style1 Section + .c-line + .lg-icon +
     gekoppelte tc-clients-style1 Sub-Welt + .marq-slider + @media (max-width: 991px)

   Aktiv im Index-Markup als <section class="tc-testimonials-style1"> in
   index.html (Z. 1087). tc-clients-style1 (Z. 1098) ist EXKLUSIV als
   Nachfahre von tc-testimonials-style1 verwendet — alle CSS-Selektoren
   sind unter .tc-testimonials-style1 .tc-clients-style1 ... gescoped, im
   Markup gibt es nur 1 tc-clients-style1-Treffer eingebettet im Section-
   Wrapper. Damit ist die gesamte Sub-Welt sicher als zusammenhaengender
   Block migrierbar.

   Reveal-Animations-Hooks (.animated) werden via assets/js/common_js.js
   IntersectionObserver gesetzt. Swiper-Slider-Init via assets/js/innerpages.js
   und Bootstrap-Marquee-Pattern. JS wird von der Migration nicht beruehrt.
   -------------------------------------------------------------------------- */
/* --------------- testimonials style1 --------------- */
.tc-testimonials-style1,
.home-testimonials {
  position: relative;
  padding: 150px 0;
}
.tc-testimonials-style1 .c-line,
.home-testimonials .c-line {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 25%;
  z-index: 5;
  pointer-events: none;
}
.tc-testimonials-style1 .lg-icon,
.home-testimonials .lg-icon {
  font-size: 170px;
  margin-inline-start: -15px;
  display: block;
  color: var(--color-smaragd, #2D574F);
}
.tc-testimonials-style1 .tc-clients-style1,
.home-testimonials .tc-clients-style1 {
  position: relative;
  overflow: hidden;
}
.tc-testimonials-style1 .tc-clients-style1 .clients-slider1,
.home-testimonials .tc-clients-style1 .clients-slider1 {
  position: relative;
  overflow: hidden;
}
.tc-testimonials-style1 .tc-clients-style1 .author,
.home-testimonials .tc-clients-style1 .author {
  display: flex;
  align-items: center;
  padding-top: 50px;
  margin-top: 80px;
  border-top: 1px solid #ccc;
}
.tc-testimonials-style1 .tc-clients-style1 .author .au-img,
.home-testimonials .tc-clients-style1 .author .au-img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  margin-inline-end: 20px;
}
.tc-testimonials-style1 .tc-clients-style1 .slider-controls,
.home-testimonials .tc-clients-style1 .slider-controls {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  border-radius: 30px;
  border: 1px solid #ccc;
  position: absolute;
  right: 0;
  bottom: 0;
  background: #fff;
  z-index: 10;
}
.tc-testimonials-style1 .tc-clients-style1 .slider-controls .swiper-button-next,
.tc-testimonials-style1 .tc-clients-style1 .slider-controls .swiper-button-prev,
.home-testimonials .tc-clients-style1 .slider-controls .swiper-button-next,
.home-testimonials .tc-clients-style1 .slider-controls .swiper-button-prev {
  position: static;
  height: max-content;
  margin: 0;
}
.tc-testimonials-style1 .tc-clients-style1 .slider-controls .swiper-button-next::after,
.tc-testimonials-style1 .tc-clients-style1 .slider-controls .swiper-button-prev::after,
.home-testimonials .tc-clients-style1 .slider-controls .swiper-button-next::after,
.home-testimonials .tc-clients-style1 .slider-controls .swiper-button-prev::after {
  color: #000;
  font-size: 12px;
}
.tc-testimonials-style1 .tc-clients-style1 .slider-controls .swiper-button-next:hover::after,
.tc-testimonials-style1 .tc-clients-style1 .slider-controls .swiper-button-prev:hover::after,
.home-testimonials .tc-clients-style1 .slider-controls .swiper-button-next:hover::after,
.home-testimonials .tc-clients-style1 .slider-controls .swiper-button-prev:hover::after {
  color: var(--color-orange1);
}
.tc-testimonials-style1 .tc-clients-style1 .slider-controls .swiper-pagination,
.home-testimonials .tc-clients-style1 .slider-controls .swiper-pagination {
  position: static;
  margin: 0 10px;
}
.tc-testimonials-style1 .tc-clients-style1 .slider-controls .swiper-pagination .swiper-pagination-bullet,
.home-testimonials .tc-clients-style1 .slider-controls .swiper-pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  margin: 0 5px;
}
.tc-testimonials-style1 .tc-clients-style1 .slider-controls .swiper-pagination .swiper-pagination-bullet .swiper-pagination-bullet-active,
.home-testimonials .tc-clients-style1 .slider-controls .swiper-pagination .swiper-pagination-bullet .swiper-pagination-bullet-active {
  width: 10px;
  height: 10px;
}
.tc-testimonials-style1 .marq-slider,
.home-testimonials .marq-slider {
  position: relative;
  overflow: hidden;
  padding-top: 100px;
}
.tc-testimonials-style1 .marq-slider .swiper-wrapper,
.home-testimonials .marq-slider .swiper-wrapper {
  transition-timing-function: linear !important;
  position: relative;
}
.tc-testimonials-style1 .marq-slider .swiper-wrapper .swiper-slide,
.home-testimonials .marq-slider .swiper-wrapper .swiper-slide {
  width: max-content !important;
}
.tc-testimonials-style1 .marq-slider a,
.home-testimonials .marq-slider a {
  font-size: 150px;
  font-weight: 500;
  color: #000;
}
.tc-testimonials-style1 .marq-slider a:hover,
.home-testimonials .marq-slider a:hover {
  color: var(--color-orange1);
}

@media screen and (max-width: 991px) {
  .tc-testimonials-style1,
  .home-testimonials {
    padding: 50px 0;
  }
  .tc-testimonials-style1 .lg-icon,
  .home-testimonials .lg-icon {
    font-size: 120px;
  }
  .tc-testimonials-style1 .marq-slider a,
  .home-testimonials .marq-slider a {
    font-size: 50px;
  }
}
/* RTL-Adjustments fuer Testimonials */
html[lang=ar] .home-style1 .tc-testimonials-style1 .tc-clients-style1 .slider-controls,
html[lang=ar] body.hoesch-page--home .home-testimonials .tc-clients-style1 .slider-controls {
  left: 0;
  right: auto;
}
html[lang=ar] .home-style1 .tc-testimonials-style1 .c-line,
html[lang=ar] body.hoesch-page--home .home-testimonials .c-line {
  left: auto;
  right: 0;
  transform: rotateX(180deg);
}

/* --------------------------------------------------------------------------
   7. Active Home Sections: Process (Bewertung-Accordion)
   Phase 5b-2 Schritt 5 (2026-05-07): Fuenfte Migration aktiver tc-*-style1
   Welten von style.css nach index.css. Bewertung/Process-Section mit
   Bootstrap-Accordion (3 Items: "Daten eingeben" / "Marktwert erhalten" /
   "Persoenlich beraten lassen") + Hero-Bild rechts mit Reveal-Animation +
   Decorative-Linie mit Clip-Path-Animation.

   Vorher in assets/css/style.css:
   - Z. 116-122: html[lang=ar] .home-style1 .tc-process-style1 RTL-Adjustments
     (img.animated + c-line)
   - Z. 879-1032: tc-process-style1 Section + .home-unified-sections-Override +
     .c-line + Bootstrap-Accordion-Hooks (.accordion-item/.accordion-button/
     .accordion-collapse/.accordion-body) + js-reveal-Stagger-Animations +
     .img Reveal + @media (max-width: 991px)

   Aktiv im Index-Markup als <section id="bewertung" class="tc-process-style1"> in
   index.html (Z. 534), eingebettet in <div class="home-unified-sections">.
   3 .accordion-item-Children mit data-bs-toggle="collapse" Pattern; erstes
   Item initial open (.collapse.show), 2./3. .collapsed. CTA: <a class="butn
   ... hoesch-button hoesch-button--outline">.

   Bootstrap-Accordion-Hooks (.accordion-item, .accordion-button, .accordion-
   header, .accordion-collapse, .accordion-body) sind hier ausschliesslich
   im tc-process-style1-Scope ueberschrieben — keine Cross-Section-Konflikte.
   Bootstrap-Base laedt aus assets/css/lib/bootstrap.min.css.

   Reveal-Animations-Hooks .wow + .animated werden via assets/js/common_js.js
   IntersectionObserver gesetzt. Stagger via --process-item-stagger CSS-
   Variable (0s/0.14s/0.28s pro Item). JS wird nicht beruehrt.
   -------------------------------------------------------------------------- */
/* --------------- process style1 --------------- */
.tc-process-style1,
.home-valuation {
  position: relative;
  padding: 150px 0;
  background-color: #fff;
  z-index: 10;
  border-radius: 40px 40px 0 0;
  margin-top: -40px;
}
.home-style1 .home-unified-sections > .tc-process-style1,
body.hoesch-page--home .home-unified-sections > .home-valuation {
  background-color: transparent;
  border-radius: 0;
  margin-top: 0;
}
.tc-process-style1 .c-line,
.home-valuation .c-line {
  position: absolute;
  bottom: 100px;
  right: 0;
  width: 50%;
  height: 550px;
  z-index: 1;
  pointer-events: none;
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  transition: all 2s linear;
}
.tc-process-style1 .c-line.animated,
.home-valuation .c-line.animated {
  clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
}
.tc-process-style1 .accordion-item,
.home-valuation .accordion-item {
  border: 0;
  border-radius: 0;
  --process-item-stagger: 0s;
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23D9B768'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.tc-process-style1 .accordion-item:nth-child(1),
.home-valuation .accordion-item:nth-child(1) {
  --process-item-stagger: 0s;
}
.home-valuation .accordion-item:first-child .accordion-button {
  border-top: 0;
}
.tc-process-style1 .accordion-item:nth-child(2),
.home-valuation .accordion-item:nth-child(2) {
  --process-item-stagger: 0.14s;
}
.tc-process-style1 .accordion-item:nth-child(3),
.home-valuation .accordion-item:nth-child(3) {
  --process-item-stagger: 0.28s;
}
.tc-process-style1 .accordion-item .accordion-button,
.home-valuation .accordion-item .accordion-button {
  color: #000;
  background-color: transparent;
  box-shadow: none;
  border-top: 1px solid #ccc;
  border-radius: 0;
  padding: 30px;
}
/*
.tc-process-style1 .accordion-item .accordion-button:not(.collapsed) {
  border-color: #000;
}
*/
.tc-process-style1 .accordion-item .accordion-button:not(.collapsed)::after,
.home-valuation .accordion-item .accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23D9B768'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.tc-process-style1 .accordion-item .accordion-button:not(.collapsed) h3:not([class*="heading-h"]), .tc-process-style1 .accordion-item .accordion-button:not(.collapsed) .heading-h3,
.home-valuation .accordion-item .accordion-button:not(.collapsed) h3:not([class*="heading-h"]),
.home-valuation .accordion-item .accordion-button:not(.collapsed) .heading-h3 {
  color: var(--color-orange1);
}
.tc-process-style1 .accordion-item .accordion-button h3:not([class*="heading-h"]), .tc-process-style1 .accordion-item .accordion-button .heading-h3,
.home-valuation .accordion-item .accordion-button h3:not([class*="heading-h"]),
.home-valuation .accordion-item .accordion-button .heading-h3 {
  font-size: 24px;
}
.tc-process-style1 .accordion-item .accordion-button .num,
.home-valuation .accordion-item .accordion-button .num {
  font-size: 24px;
  color: #999;
  font-weight: 200;
  margin-inline-end: 30px;
}
.tc-process-style1 .accordion-item .accordion-body,
.home-valuation .accordion-item .accordion-body {
  padding-inline-start: 85px;
  padding-inline-end: 50px;
  padding-top: 16px;
  padding-bottom: 30px;
}
.tc-process-style1 .accordion-item .accordion-body .text,
.home-valuation .accordion-item .accordion-body .text {
  font-size: 15px;
  color: #666;
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 0.38s ease, transform 0.38s ease;
}
html.js-reveal .tc-process-style1 .accordion.wow .accordion-item,
html.js-reveal .home-valuation .accordion.wow .accordion-item {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  transition: opacity 0.58s ease, transform 0.58s ease;
  transition-delay: var(--process-item-stagger);
}
html.js-reveal .tc-process-style1 .accordion.wow .accordion-button .num,
html.js-reveal .tc-process-style1 .accordion.wow .accordion-button h3:not([class*=heading-h]),
html.js-reveal .tc-process-style1 .accordion.wow .accordion-button .heading-h3,
html.js-reveal .home-valuation .accordion.wow .accordion-button .num,
html.js-reveal .home-valuation .accordion.wow .accordion-button h3:not([class*=heading-h]),
html.js-reveal .home-valuation .accordion.wow .accordion-button .heading-h3 {
  opacity: 0;
  transition: opacity 0.48s ease, transform 0.48s ease, color 0.3s ease;
  will-change: opacity, transform;
}
html.js-reveal .tc-process-style1 .accordion.wow .accordion-button .num,
html.js-reveal .home-valuation .accordion.wow .accordion-button .num {
  transform: translate3d(-14px, 0, 0);
  transition-delay: calc(var(--process-item-stagger) + 0.08s);
}
html.js-reveal .tc-process-style1 .accordion.wow .accordion-button h3:not([class*=heading-h]),
html.js-reveal .tc-process-style1 .accordion.wow .accordion-button .heading-h3,
html.js-reveal .home-valuation .accordion.wow .accordion-button h3:not([class*=heading-h]),
html.js-reveal .home-valuation .accordion.wow .accordion-button .heading-h3 {
  transform: translate3d(0, 10px, 0);
  transition-delay: calc(var(--process-item-stagger) + 0.16s);
}
html.js-reveal .tc-process-style1 .accordion.wow.animated .accordion-item,
html.js-reveal .home-valuation .accordion.wow.animated .accordion-item {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
html.js-reveal .tc-process-style1 .accordion.wow.animated .accordion-button .num,
html.js-reveal .tc-process-style1 .accordion.wow.animated .accordion-button h3:not([class*=heading-h]),
html.js-reveal .tc-process-style1 .accordion.wow.animated .accordion-button .heading-h3,
html.js-reveal .home-valuation .accordion.wow.animated .accordion-button .num,
html.js-reveal .home-valuation .accordion.wow.animated .accordion-button h3:not([class*=heading-h]),
html.js-reveal .home-valuation .accordion.wow.animated .accordion-button .heading-h3 {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.tc-process-style1 .accordion-collapse.show .accordion-body .text,
.tc-process-style1 .accordion-collapse.collapsing .accordion-body .text,
.home-valuation .accordion-collapse.show .accordion-body .text,
.home-valuation .accordion-collapse.collapsing .accordion-body .text {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.tc-process-style1 .img,
.home-valuation .img {
  height: 550px;
  border-radius: 20px;
  overflow: hidden;
  transform: rotate(-30deg) scale(1.3);
  transition: all 1s ease;
  transition-delay: 0.4s;
  opacity: 0;
}
.tc-process-style1 .img.animated,
.home-valuation .img.animated {
  transform: rotate(0deg) scale(1);
  opacity: 1;
}

@media screen and (max-width: 991px) {
  .tc-process-style1,
  .home-valuation {
    padding: 80px 0;
  }
  .tc-process-style1 .accordion-item .accordion-button .num,
  .home-valuation .accordion-item .accordion-button .num {
    display: none;
  }
  .tc-process-style1 .accordion-item .accordion-button h3:not([class*="heading-h"]), .tc-process-style1 .accordion-item .accordion-button .heading-h3,
  .home-valuation .accordion-item .accordion-button h3:not([class*="heading-h"]),
  .home-valuation .accordion-item .accordion-button .heading-h3 {
    font-size: 21px;
  }
  .tc-process-style1 .accordion-item .accordion-body,
  .home-valuation .accordion-item .accordion-body {
    padding-inline-start: 30px;
  }
  .tc-process-style1 .img,
  .home-valuation .img {
    transform: rotate(0);
    margin-top: 50px;
    height: 350px;
  }
}
/* RTL-Adjustments fuer Process */
html[lang=ar] .home-style1 .tc-process-style1 .img.animated,
html[lang=ar] body.hoesch-page--home .home-valuation .img.animated {
  transform: rotate(-15deg) scale(1);
}
html[lang=ar] .home-style1 .tc-process-style1 .c-line,
html[lang=ar] body.hoesch-page--home .home-valuation .c-line {
  right: auto;
  left: 0;
  transform: rotateX(180deg);
}

/* --------------------------------------------------------------------------
   8. Active Home Sections: Services (Verkaufen-Cards)
   Phase 5b-2 Schritt 6 (2026-05-07): Sechste Migration aktiver tc-*-style1
   Welten von style.css nach index.css. Verkaufen-Section mit 4 Service-
   Cards (Tone-Modifier --bronze/--silver/--gold/--smaragd, Step-Badges,
   Hover-Arrow), .ser-img Section-Footer mit Mask-Gradient.

   Vorher in assets/css/style.css:
   - Z. 112-114: html[lang=ar] .home-style1 .tc-services-style1 .title p.animated
   - Z. 332-334: .tc-services-style1 .heading-h2 (margin-bottom)
   - Z. 727-871: tc-services-style1 Section + .home-unified-sections-Override +
     .title + .content + #verkaufen .services Stagger-Variablen + js-reveal
     Reveal + .service-card Base + 4 Tone-Modifier (--service-step-rgb) +
     .step-badge + .arrow + .img + .ser-img + @media (max-width: 991px)

   Aktiv im Index-Markup als <section id="verkaufen" class="tc-services-style1">
   in index.html (Z. 604), eingebettet in <div class="home-unified-sections">.
   4 .service-card-Children mit Tone-Modifier-Klassen sowie additiven Phase-4a
   hoesch-card-Markern (.hoesch-card.hoesch-card--bronze etc.). Step-Badges
   01-04 in absoluter Position rechts oben mit transparentem 156px-Numeral
   gefuellt durch --service-step-rgb-Variable.

   Tone-Modifier-Pattern: jede Karte erbt --service-step-rgb von ihrer Tone-
   Modifier-Klasse, Step-Badge und Tone-Border greifen ueber rgba(var(...))
   auf den Tone zu. Default-Wert ist Bronze fuer Cards ohne explizite Tonalitaet.

   Reveal-Animations-Hooks via assets/js/common_js.js IntersectionObserver,
   Stagger via --verkaufen-card-delay (0s/0.14s/0.28s/0.42s pro :nth-child).
   JS bleibt unangefasst.
   -------------------------------------------------------------------------- */
/* --------------- services style1 --------------- */
.tc-services-style1,
.home-selling {
  position: relative;
  background-image: linear-gradient(to bottom, #F1EEE9, rgba(241, 238, 233, 0.6), transparent);
}
.home-style1 .home-unified-sections > .tc-services-style1,
body.hoesch-page--home .home-unified-sections > .home-selling {
  background-image: none;
}
.tc-services-style1 .heading-h2,
.home-selling .heading-h2 {
  margin-bottom: 20px;
}
.tc-services-style1 .title p,
.home-selling .title p {
  letter-spacing: 50px;
  opacity: 0;
  transition: all 0.7s ease;
  transition-delay: 0.3s;
}
.tc-services-style1 .title p.animated,
.home-selling .title p.animated {
  letter-spacing: 10px;
  opacity: 1;
}
.tc-services-style1 .content,
.home-selling .content {
  position: relative;
  z-index: 10;
}
#verkaufen .services .col-lg-3,
.home-selling .services .col-lg-3 {
  --verkaufen-card-delay: 0s;
}
#verkaufen .services .col-lg-3:nth-child(1),
.home-selling .services .col-lg-3:nth-child(1) {
  --verkaufen-card-delay: 0s;
}
#verkaufen .services .col-lg-3:nth-child(2),
.home-selling .services .col-lg-3:nth-child(2) {
  --verkaufen-card-delay: 0.14s;
}
#verkaufen .services .col-lg-3:nth-child(3),
.home-selling .services .col-lg-3:nth-child(3) {
  --verkaufen-card-delay: 0.28s;
}
#verkaufen .services .col-lg-3:nth-child(4),
.home-selling .services .col-lg-3:nth-child(4) {
  --verkaufen-card-delay: 0.42s;
}
html.js-reveal #verkaufen .services.wow .service-card,
html.js-reveal .home-selling .services.wow .service-card {
  opacity: 0;
  transform: translate3d(0, 38px, 0);
  transition: opacity 0.78s ease, transform 0.78s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--verkaufen-card-delay);
}
html.js-reveal #verkaufen .services.wow.animated .service-card,
html.js-reveal .home-selling .services.wow.animated .service-card {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.tc-services-style1 .service-card,
.home-selling .service-card {
  --service-step-rgb: var(--color-bronze-rgb, 205, 137, 70);
  position: relative;
  padding: 20px 60px 20px 30px;
  border-top: 0;
  border-inline-start: 1px solid #ccc;
  display: block;
}
.tc-services-style1 .service-card--bronze,
.home-selling .service-card--bronze {
  --service-step-rgb: var(--color-bronze-rgb, 205, 137, 70);
}
.tc-services-style1 .service-card--silver,
.home-selling .service-card--silver {
  --service-step-rgb: var(--color-silver-rgb, 173, 176, 178);
}
.tc-services-style1 .service-card--gold,
.home-selling .service-card--gold {
  --service-step-rgb: var(--color-gold-rgb, 220, 191, 106);
}
.tc-services-style1 .service-card--smaragd,
.home-selling .service-card--smaragd {
  --service-step-rgb: var(--color-smaragd-rgb, 45, 87, 79);
}
.tc-services-style1 .services .row > div:first-child .service-card,
.home-selling .services .row > div:first-child .service-card {
  border-inline-start: 0;
}
.tc-services-style1 .service-card:hover .arrow,
.home-selling .service-card:hover .arrow {
  background-color: #000;
  color: #fff;
}
.tc-services-style1 .service-card .step-badge,
.home-selling .service-card .step-badge {
  position: absolute;
  top: -22px;
  right: -8px;
  left: auto;
  color: rgba(var(--service-step-rgb), 0.34);
  /*-webkit-text-stroke: 1.9px rgba(var(--service-step-rgb), 0.52);*/
  font-size: 156px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.78;
  text-align: right;
  z-index: 0;
  pointer-events: none;
}
.tc-services-style1 .service-card .heading-h5,
.tc-services-style1 .service-card .img,
.tc-services-style1 .service-card .text,
.tc-services-style1 .service-card .arrow,
.home-selling .service-card .heading-h5,
.home-selling .service-card .img,
.home-selling .service-card .text,
.home-selling .service-card .arrow {
  position: relative;
  z-index: 1;
}
.tc-services-style1 .service-card .img,
.home-selling .service-card .img {
  height: 160px;
  border-radius: 10px;
  overflow: hidden;
}
.tc-services-style1 .service-card .img .service-card-img-headroom,
.home-selling .service-card .img .service-card-img-headroom {
  object-position: center 15%;
}
.tc-services-style1 .service-card .arrow,
.home-selling .service-card .arrow {
  width: 35px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  border-radius: 50%;
  margin-top: 40px;
  border: 1px solid #ccc;
  transition: all 0.3s ease;
}
.tc-services-style1 .ser-img,
.home-selling .ser-img {
  position: relative;
  width: 100%;
  height: 1000px;
  margin-top: -400px;
  overflow: hidden;
}
.tc-services-style1 .ser-img img,
.home-selling .ser-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 28%, rgba(0, 0, 0, 1) 100%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 28%, rgba(0, 0, 0, 1) 100%);
}

@media screen and (max-width: 991px) {
  html.js-reveal #verkaufen .services.wow .service-card,
  html.js-reveal .home-selling .services.wow .service-card {
    transform: translate3d(0, 30px, 0);
  }
  .tc-services-style1 .service-card,
  .home-selling .service-card {
    border: 0;
    padding: 0;
    margin-top: 50px !important;
  }
  .tc-services-style1 .service-card .step-badge,
  .home-selling .service-card .step-badge {
    top: -14px;
    right: 0;
    /*-webkit-text-stroke: 1.5px rgba(var(--service-step-rgb), 0.48);*/
    font-size: 112px;
  }
}
/* RTL-Adjustment fuer Services */
html[lang=ar] .home-style1 .tc-services-style1 .title p.animated,
html[lang=ar] body.hoesch-page--home .home-selling .title p.animated {
  letter-spacing: normal;
  font-size: 30px;
}

/* --------------------------------------------------------------------------
   9. Active Home Sections: Projects and Buying (Mirrored)
   Phase 5b-2 Schritt 7 (2026-05-07): Siebte Migration aktiver tc-*-style1
   Welten von style.css nach index.css. Projekte- und Kaufen-Sections
   teilen das gleiche tc-projects-style1-Pattern; Kaufen ist die mirrored-
   Variante mit gespiegeltem Layout (rechts ausgerichtete Tabs, linke
   Bildkante, RTL-direction-Slider mit ltr-Reset auf Project-Card).

   Vorher in assets/css/style.css Z. 724-922 (199 Zeilen):
   - Hauptregeln tc-projects-style1: Section + .tabs-links + .nav-pills +
     .projects + .projects-content + .projects-slider + .float-cursor +
     js-reveal Reveal-Stagger fuer #projekte und #kaufen + .project-card
     (.img + .info + .tags + .title + .text)
   - @media (min-width: 992px): tc-projects-style1--mirrored Layout-Spiegel
     fuer Kaufen-Section (12 Selektoren)
   - @media (max-width: 991px): Mobile-Overrides (Tabs hidden, Slider full-
     width, project-card .img height 350px)

   Aktiv im Index-Markup als:
   - <section id="projekte" class="tc-projects-style1 section-padding"> in
     index.html (Z. 683)
   - <section id="kaufen" class="tc-projects-style1 tc-projects-style1--mirrored
     section-padding"> in index.html (Z. 886)

   Beide Sections nutzen Bootstrap-Tabs/Pills (.nav-pills, .nav-link,
   .tab-content, .tab-pane), Swiper-Slider und Fancybox (data-fancybox).
   Float-Cursor-Pattern via .float-cursor mit JS-gesteuerter .show-Klasse.
   Reveal-Animations-Hooks via assets/js/common_js.js IntersectionObserver,
   Stagger #projekte zu rechts (translate3d(56px,0)), #kaufen zu links
   (translate3d(-56px,0)). JS bleibt unangefasst.
   -------------------------------------------------------------------------- */
/* --------------- projects style1 --------------- */
.tc-projects-style1,
.home-projects,
.home-buying {
  overflow: hidden;
}
.tc-projects-style1 .tabs-links,
.home-projects .tabs-links,
.home-buying .tabs-links {
  overflow: hidden;
}
.tc-projects-style1 .tabs-links .nav-pills,
.home-projects .tabs-links .nav-pills,
.home-buying .tabs-links .nav-pills {
  gap: 0;
}
.tc-projects-style1 .tabs-links .nav-pills .nav-link,
.home-projects .tabs-links .nav-pills .nav-link,
.home-buying .tabs-links .nav-pills .nav-link {
  background-color: transparent;
  padding: 0;
  margin-inline-end: 40px;
  font-size: 18px;
  font-weight: 500;
  border-radius: 0;
  text-transform: capitalize;
  color: #000;
  white-space: nowrap;
}
.tc-projects-style1 .tabs-links .nav-pills .nav-link.active, .tc-projects-style1 .tabs-links .nav-pills .nav-link:hover,
.home-projects .tabs-links .nav-pills .nav-link.active,
.home-projects .tabs-links .nav-pills .nav-link:hover,
.home-buying .tabs-links .nav-pills .nav-link.active,
.home-buying .tabs-links .nav-pills .nav-link:hover {
  color: var(--color-orange1);
}
.tc-projects-style1 .projects,
.home-projects .projects,
.home-buying .projects {
  padding-bottom: 100px;
  border-bottom: 1px solid #ccc;
}
.tc-projects-style1 .projects .projects-content,
.home-projects .projects .projects-content,
.home-buying .projects .projects-content {
  position: relative;
  overflow: hidden;
}
.tc-projects-style1 .projects .projects-content *,
.home-projects .projects .projects-content *,
.home-buying .projects .projects-content * {
  cursor: none;
}
.tc-projects-style1 .projects .projects-slider,
.home-projects .projects .projects-slider,
.home-buying .projects .projects-slider {
  overflow: hidden;
}
.tc-projects-style1 .projects .projects-content .float-cursor,
.home-projects .projects .projects-content .float-cursor,
.home-buying .projects .projects-content .float-cursor {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  width: 160px;
  height: 160px;
  background-color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 16px;
  z-index: 10;
  transition: all 0.02 linear;
  pointer-events: none;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.0666666667);
}
.tc-projects-style1 .projects .projects-content .float-cursor.show,
.home-projects .projects .projects-content .float-cursor.show,
.home-buying .projects .projects-content .float-cursor.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
html.js-reveal #projekte .projects.wow .project-card,
html.js-reveal .home-projects .projects.wow .project-card {
  opacity: 0;
  transform: translate3d(56px, 0, 0);
  transition: opacity 0.78s ease, transform 0.78s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
html.js-reveal #kaufen .projects.wow .project-card,
html.js-reveal .home-buying .projects.wow .project-card {
  opacity: 0;
  transform: translate3d(-56px, 0, 0);
  transition: opacity 0.78s ease, transform 0.78s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
html.js-reveal #projekte .projects.wow.animated .project-card,
html.js-reveal #kaufen .projects.wow.animated .project-card,
html.js-reveal .home-projects .projects.wow.animated .project-card,
html.js-reveal .home-buying .projects.wow.animated .project-card {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.tc-projects-style1 .projects .project-card .img,
.home-projects .projects .project-card .img,
.home-buying .projects .project-card .img {
  height: 630px;
  border-radius: 20px;
  overflow: hidden;
  display: block;
}
.tc-projects-style1 .projects .project-card .info,
.home-projects .projects .project-card .info,
.home-buying .projects .project-card .info {
  padding-top: 40px;
}
.tc-projects-style1 .projects .project-card .info .tags,
.home-projects .projects .project-card .info .tags,
.home-buying .projects .project-card .info .tags {
  margin-bottom: 30px;
}
.tc-projects-style1 .projects .project-card .info .tags a,
.home-projects .projects .project-card .info .tags a,
.home-buying .projects .project-card .info .tags a {
  font-size: 12px;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 50px;
  margin-inline-end: 5px;
}
.tc-projects-style1 .projects .project-card .info .title,
.home-projects .projects .project-card .info .title,
.home-buying .projects .project-card .info .title {
  font-size: 35px;
  margin-bottom: 15px;
}
.tc-projects-style1 .projects .project-card .info .title a:hover,
.home-projects .projects .project-card .info .title a:hover,
.home-buying .projects .project-card .info .title a:hover {
  color: var(--color-orange1);
}
.tc-projects-style1 .projects .project-card .info .text,
.home-projects .projects .project-card .info .text,
.home-buying .projects .project-card .info .text {
  font-size: 14px;
  color: #666;
}

@media screen and (min-width: 992px) {
  .tc-projects-style1 .tabs-links,
  .home-projects .tabs-links,
  .home-buying .tabs-links {
    overflow: visible;
  }
  .tc-projects-style1 .projects .projects-content,
  .home-projects .projects .projects-content,
  .home-buying .projects .projects-content {
    width: calc(100% + (100vw - 100%) / 2);
    max-width: none;
  }
  .tc-projects-style1.tc-projects-style1--mirrored .projects .projects-content,
  .home-buying .projects .projects-content {
    margin-inline-start: calc((100vw - 100%) / -2);
  }
  .tc-projects-style1.tc-projects-style1--mirrored .title,
  .home-buying .title {
    text-align: right;
  }
  .tc-projects-style1.tc-projects-style1--mirrored .tabs-links .row,
  .home-buying .tabs-links .row {
    flex-direction: row-reverse;
  }
  .tc-projects-style1.tc-projects-style1--mirrored .tabs-links .nav-pills,
  .home-buying .tabs-links .nav-pills {
    gap: 40px;
    justify-content: flex-end;
  }
  .tc-projects-style1.tc-projects-style1--mirrored .tabs-links .nav-pills .nav-link,
  .home-buying .tabs-links .nav-pills .nav-link {
    margin-inline-end: 0;
  }
  .tc-projects-style1.tc-projects-style1--mirrored .tabs-links .text-lg-end,
  .home-buying .tabs-links .text-lg-end {
    text-align: left !important;
  }
  .tc-projects-style1.tc-projects-style1--mirrored .projects .projects-slider,
  .home-buying .projects .projects-slider {
    direction: rtl;
  }
  .tc-projects-style1.tc-projects-style1--mirrored .projects .project-card,
  .home-buying .projects .project-card {
    direction: ltr;
  }
  .tc-projects-style1.tc-projects-style1--mirrored .projects .project-card .info,
  .home-buying .projects .project-card .info {
    text-align: left;
  }
  .tc-projects-style1.tc-projects-style1--mirrored .projects .project-card .info .tags,
  .home-buying .projects .project-card .info .tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .tc-projects-style1.tc-projects-style1--mirrored .projects .project-card .info .tags a,
  .home-buying .projects .project-card .info .tags a {
    margin-inline-start: 0;
    margin-inline-end: 5px;
  }
  .tc-projects-style1.tc-projects-style1--mirrored .projects .project-card .info .title,
  .tc-projects-style1.tc-projects-style1--mirrored .projects .project-card .info .title a,
  .home-buying .projects .project-card .info .title,
  .home-buying .projects .project-card .info .title a {
    display: block;
    text-align: left;
  }
}

@media screen and (max-width: 991px) {
  html.js-reveal #projekte .projects.wow .project-card,
  html.js-reveal .home-projects .projects.wow .project-card {
    transform: translate3d(34px, 0, 0);
  }
  html.js-reveal #kaufen .projects.wow .project-card,
  html.js-reveal .home-buying .projects.wow .project-card {
    transform: translate3d(-34px, 0, 0);
  }
  .tc-projects-style1 .tabs-links,
  .home-projects .tabs-links,
  .home-buying .tabs-links {
    display: none;
  }
  .tc-projects-style1 .tabs-links .row,
  .home-projects .tabs-links .row,
  .home-buying .tabs-links .row {
    --bs-gutter-y: 1rem;
  }
  .tc-projects-style1 .tabs-links .nav-pills,
  .home-projects .tabs-links .nav-pills,
  .home-buying .tabs-links .nav-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 10px;
    margin-bottom: 0 !important;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .tc-projects-style1 .tabs-links .nav-pills::-webkit-scrollbar,
  .home-projects .tabs-links .nav-pills::-webkit-scrollbar,
  .home-buying .tabs-links .nav-pills::-webkit-scrollbar {
    display: none;
  }
  .tc-projects-style1 .projects,
  .home-projects .projects,
  .home-buying .projects {
    padding-bottom: 50px;
  }
  .tc-projects-style1 .projects .project-card .img,
  .home-projects .projects .project-card .img,
  .home-buying .projects .project-card .img {
    height: 350px;
  }
  .tc-projects-style1 .projects .project-card .info .title,
  .home-projects .projects .project-card .info .title,
  .home-buying .projects .project-card .info .title {
    font-size: 25px;
  }
}

/* --------------------------------------------------------------------------
   10. Active Home Sections: Hero
   Phase 5b-2 Schritt 8 (2026-05-08): Achte Migration aktiver tc-*-style1
   Welten von style.css nach index.css. Hero-Slider mit Swiper-Parallax,
   Fraction-Pagination, Slider-Controls und persHeader-Skala.

   Vorher in assets/css/style.css:
   - Z. 55-58: .persHeader Headline-Skala
   - Z. 100-110: Header-spezifische RTL-Overrides
   - Z. 119-238: tc-header-style1 Section + Slider/Card/Image/Overlay/Info-
     Regeln + @media (max-width: 991px) Mobile-Overrides

   Aktiv im Index-Markup als <header class="tc-header-style1"> in index.html
   (Z. 189), mit drei Swiper-Slides und data-swiper-parallax-Attributen auf
   .persHeader.
   -------------------------------------------------------------------------- */
.persHeader{
  font-size: calc(8vw + 20px) !important;
  text-transform: uppercase;
}

/* RTL-Adjustments fuer Hero */
html[lang=ar] .home-style1 .tc-header-style1 .header-slider .swiper-pagination,
html[lang=ar] body.hoesch-page--home .home-hero .header-slider .swiper-pagination {
  left: auto;
  right: 4vw;
}
html[lang=ar] .home-style1 .tc-header-style1 .header-slider .slider-controls,
html[lang=ar] body.hoesch-page--home .home-hero .header-slider .slider-controls {
  right: auto;
  left: 40px;
}
html[lang=ar] .home-style1 .tc-header-style1 .header-slider .slider-card .info h1:not([class*="heading-h"]), html[lang=ar] .home-style1 .tc-header-style1 .header-slider .slider-card .info .heading-h1,
html[lang=ar] body.hoesch-page--home .home-hero .header-slider .slider-card .info h1:not([class*="heading-h"]),
html[lang=ar] body.hoesch-page--home .home-hero .header-slider .slider-card .info .heading-h1 {
  font-size: calc(10vw + 10px);
}

/* --------------- header style1 --------------- */
.tc-header-style1 .header-slider,
.home-hero .header-slider {
  position: relative;
  overflow: hidden;
}
.tc-header-style1 .header-slider .swiper-slide,
.home-hero .header-slider .swiper-slide {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.tc-header-style1 .header-slider .swiper-slide-active,
.home-hero .header-slider .swiper-slide-active {
  position: relative;
  z-index: 20;
}
.tc-header-style1 .header-slider .slider-controls,
.home-hero .header-slider .slider-controls {
  position: absolute;
  right: 40px;
  bottom: 130px;
  z-index: 20;
  display: flex;
  align-items: center;
  padding: 10px 20px;
  border-radius: 30px;
  color: #fff;
}
.tc-header-style1 .header-slider .slider-controls .swiper-button-next,
.tc-header-style1 .header-slider .slider-controls .swiper-button-prev,
.home-hero .header-slider .slider-controls .swiper-button-next,
.home-hero .header-slider .slider-controls .swiper-button-prev {
  position: static;
  height: max-content;
  margin-inline-start: 50px;
  font-size: 30px;
}
.tc-header-style1 .header-slider .slider-controls .swiper-button-next::after,
.tc-header-style1 .header-slider .slider-controls .swiper-button-prev::after,
.home-hero .header-slider .slider-controls .swiper-button-next::after,
.home-hero .header-slider .slider-controls .swiper-button-prev::after {
  color: #fff;
  position: relative;
}
.tc-header-style1 .header-slider .swiper-pagination,
.home-hero .header-slider .swiper-pagination {
  position: absolute;
  left: 4vw;
  bottom: 120px;
  color: #fff;
  z-index: 30;
  width: max-content;
}
.tc-header-style1 .header-slider .swiper-pagination > span,
.home-hero .header-slider .swiper-pagination > span {
  font-size: 30px;
  font-weight: 100;
  display: block;
  margin: 10px 0;
}
.tc-header-style1 .slider-card,
.home-hero .slider-card {
  position: relative;
}
.tc-header-style1 .slider-card .img,
.home-hero .slider-card .img {
  height: calc(650px + var(--home1-section-overlap));
  position: relative;
  min-height: calc(100vh + var(--home1-section-overlap));
  overflow: hidden;
}
.tc-header-style1 .slider-card .img img,
.home-hero .slider-card .img img {
  transform: scale(1.065);
  transform-origin: center center;
  will-change: transform;
}
.tc-header-style1 .header-slider .swiper-slide-active .slider-card .img img,
.home-hero .header-slider .swiper-slide-active .slider-card .img img {
  animation: home-hero-image-zoom-out 7.5s linear both;
}
.tc-header-style1 .slider-card .img::after,
.home-hero .slider-card .img::after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 30%;
  pointer-events: none;
}
.tc-header-style1 .slider-card .info,
.home-hero .slider-card .info {
  position: absolute;
  left: 0;
  top: 50%;
  bottom: auto;
  width: 100%;
  transform: translateY(-32%);
  z-index: 20;
  color: #fff;
}
.tc-header-style1 .slider-card .info h1:not([class*="heading-h"]), .tc-header-style1 .slider-card .info .heading-h1,
.home-hero .slider-card .info h1:not([class*="heading-h"]),
.home-hero .slider-card .info .heading-h1 {
  font-size: calc(12vw + 20px);
  font-weight: 500;
  line-height: 1;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

@keyframes home-hero-image-zoom-out {
  from {
    transform: scale(1.065);
  }

  to {
    transform: scale(1);
  }
}

@media screen and (max-width: 991px) {
  .tc-header-style1 .slider-card .img,
  .home-hero .slider-card .img {
    height: calc(550px + var(--home1-section-overlap));
  }
  .tc-header-style1 .slider-card .info .row,
  .home-hero .slider-card .info .row {
    --bs-gutter-x: 0;
    margin-right: 0;
    margin-left: 0;
  }
  .tc-header-style1 .slider-card .info [class*=col-],
  .home-hero .slider-card .info [class*=col-] {
    padding-right: 0;
    padding-left: 0;
  }
  .tc-header-style1 .slider-card .info .persHeader,
  .home-hero .slider-card .info .persHeader {
    max-width: 100%;
    font-size: clamp(48px, 13vw, 68px) !important;
    line-height: 0.95;
  }
  .tc-header-style1 .slider-card .info,
  .home-hero .slider-card .info {
    bottom: 60px;
  }
  .tc-header-style1 .swiper-pagination,
  .home-hero .swiper-pagination {
    display: none;
  }
  .tc-header-style1 .header-slider .slider-controls,
  .home-hero .header-slider .slider-controls {
    bottom: 165px;
    right: 0;
  }
  .tc-header-style1 .header-slider .slider-controls .swiper-button-prev::after,
  .tc-header-style1 .header-slider .slider-controls .swiper-button-next::after,
  .home-hero .header-slider .slider-controls .swiper-button-prev::after,
  .home-hero .header-slider .slider-controls .swiper-button-next::after {
    font-size: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tc-header-style1 .slider-card .img img,
  .tc-header-style1 .header-slider .swiper-slide-active .slider-card .img img,
  .home-hero .slider-card .img img,
  .home-hero .header-slider .swiper-slide-active .slider-card .img img {
    animation: none;
    transform: scale(1);
  }
}

/* --------------- header style1 - video variant ---------------
   Phase 2/3 (2026-06-16): aktiver Hero in index.html laeuft als
   `home-hero--video`. Die alten Image-Slider-Regeln darueber
   bleiben fuer den Rollback-Header (siehe `OLD IMAGE SLIDER
   HEADER`-Marker in index.html) unveraendert; die `home-hero--video`-
   Regeln definieren Hoehe/Layering eigenstaendig, weil die alte
   `.slider-card .img`-Hoehe in dieser Variante entfaellt. */
.home-hero--video {
  position: relative;
  overflow: hidden;
  height: calc(100vh + var(--home1-section-overlap));
  min-height: calc(650px + var(--home1-section-overlap));
}
.home-hero--video .header-slider,
.home-hero--video .header-slider .swiper-wrapper,
.home-hero--video .header-slider .swiper-slide,
.home-hero--video .slider-card {
  height: 100%;
}
.home-hero--video .header-slider {
  position: relative;
  z-index: 2;
}
.home-hero-video__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.home-hero-video__poster {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 1;
  transition: opacity 0.4s ease;
}
.home-hero-video__poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.home-hero-video__player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.4s ease;
  background-color: transparent;
}
.home-hero-video__media.is-video-playing .home-hero-video__player {
  opacity: 1;
}
.home-hero-video__media.is-video-playing .home-hero-video__poster {
  opacity: 0;
}
.home-hero-video__overlay {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0.3;
  pointer-events: none;
  z-index: 1;
}

@media screen and (max-width: 991px) {
  .home-hero--video {
    min-height: calc(550px + var(--home1-section-overlap));
  }

  body.hoesch-page--home .tc-navbar-style1:not(.is-sticky) .hoesch-nav-mobile {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
  }

  .home-hero--video .home-hero-video__poster img,
  .home-hero--video .home-hero-video__player {
    transform: scale(1.06);
    transform-origin: center center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero-video__player {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   11. Active Home Sections: Packages (Pakete + Plan-Cards)
   Phase 5b-2 Schritt 9 (2026-05-08): Neunte und letzte Migration aktiver
   tc-*-style1-Welten von style.css nach index.css. Pakete-Section mit
   Intro/Heading/Text + 4 Plan-Cards (Bronze/Silber/Gold/Smaragd) + 3D-Flip-
   Interaktion (Front/Back via .plan-card-inner Grid) + Hover-Flip auf Desktop
   (hover/pointer-Media-Query) + Plan-Visual mit Tone-Tint-Overlay + Plan-Cta
   mit Hover-Gradient.

   Vorher in assets/css/style.css Z. 140-585 (446 Zeilen):
   - tc-packages-style1 Section + .home-unified-sections-Override + ::before/
     ::after-Decor.
   - .tc-packages-style1 .intro/.heading-h2/.text Header-Block.
   - .eyebrow GLOBALER Helper (unscoped) — wird nicht nur von der Pakete-Section
     genutzt, sondern auch von Ueber Uns, Bewertung, Verkaufen, Projekte und
     Kaufen-Section auf index.html. Der Helper lebt historisch in diesem Block;
     style.css ist nur in index.html geladen, daher beruehrt der unscoped-
     Selektor keine andere Seite. Wird hier 1:1 mitmigriert, damit Source-Order
     und Spezifizitaet identisch bleiben.
   - .tc-packages-style1 .plans-grid + :nth-child-Stagger (--plan-card-stagger
     0s/0.14s/0.28s/0.42s pro Slot).
   - .plan-card Base + 3 Tone-Modifier (.silver/.gold/.emerald). Bronze ist
     Default via custom-properties (--plan-primary etc.). Plan-Card Markup
     traegt zusaetzlich .hoesch-card.hoesch-card--<tone> aus Phase 4b.
   - .is-flipped + :focus-visible-State.
   - .plan-card-inner Grid + 3D-Transform (preserve-3d).
   - .plan-face Base + ::before/::after Tint-Decor.
   - .plan-front + Front-Reveal-Children (delays via --plan-child-delay).
   - .plan-back rotateY(180deg).
   - .plan-badge Linear-Gradient mit Box-Shadow.
   - .plan-front-copy/.plan-visual/.plan-label/.plan-name/.plan-price.
   - .plan-front-foot mit Icon-Pill.
   - .plan-summary/.plan-features.
   - .plan-back-bottom/.plan-note/.plan-cta + Hover-Gradient.
   - 4 Media Queries:
     * @media (hover: hover) and (pointer: fine) — Desktop-Hover-Flip.
     * @media (min-width: 1200px) and (max-width: 1499px) — 50%-Width Plans.
     * @media (max-width: 991px) — Mobile-Padding/Intro/Text/Plan-Summary.
     * @media (min-width: 768px) and (max-width: 991px) — Plan-Back-Padding.
     * @media (max-width: 767px) — Mobile-Schmal-Overrides.

   Aktiv im Index-Markup als <section id="pakete" class="tc-packages-style1
   section-padding-x"> in index.html (Z. 320), eingebettet in
   <div class="home-unified-sections">. 4 .plan-card-Children mit Tone-Modifier-
   Klassen .bronze/.silver/.gold/.emerald + additiven Phase-4b Hoesch-Markern
   .hoesch-card.hoesch-card--<tone>.

   Phase-4b-Compat liegt bereits weiter oben in dieser Datei (Section 3,
   Z. 101-103): .home-style1 .tc-packages-style1 .plan-card.hoesch-card
   { border-top: 0 }. Die Regel neutralisiert den 4 px tonalen Top-Border aus
   shared-components.css :where(.hoesch-card.hoesch-card--<tone>). Sie wird durch
   diese Migration NICHT veraendert, weil sich weder Selektor noch zu
   neutralisierende Quelle aendert.

   JS-Hooks (assets/js/index.js Z. 14, 51): bind nur auf
   .tc-packages-style1 .plan-card und State-Klasse .is-flipped. Keine Bindings
   auf Tone-Klassen oder Plan-Front/Plan-Back. Migration beruehrt JS nicht.

   Reveal-Animations-Hooks (.animated, html.js-reveal) werden via
   assets/js/common_js.js IntersectionObserver gesetzt. Stagger-Cascade via
   --plan-card-stagger (Card-Slot) + --plan-child-delay (Front-Children).
   JS bleibt unangefasst.
   -------------------------------------------------------------------------- */
/* --------------- packages style1 --------------- */
.tc-packages-style1,
.home-packages {
  position: relative;
  padding: 45px 0 140px;
  background: linear-gradient(180deg, #F1EEE9 0%, #F7F2EB 40%, #FFFFFF 100%);
  overflow: hidden;
}
.home-style1 .home-unified-sections > .tc-packages-style1,
body.hoesch-page--home .home-unified-sections > .home-packages {
  background: transparent;
}
.home-style1 .home-unified-sections > .tc-packages-style1::before,
.home-style1 .home-unified-sections > .tc-packages-style1::after,
body.hoesch-page--home .home-unified-sections > .home-packages::before,
body.hoesch-page--home .home-unified-sections > .home-packages::after {
  content: none;
}
.tc-packages-style1::before,
.home-packages::before {
  position: absolute;
  content: "";
  left: -10vw;
  top: 40px;
  width: 34vw;
  height: 34vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--color-bronze-rgb, 205, 137, 70), 0.14) 0%, rgba(var(--color-bronze-rgb, 205, 137, 70), 0) 72%);
  pointer-events: none;
}
.tc-packages-style1::after,
.home-packages::after {
  position: absolute;
  content: "";
  right: -8vw;
  bottom: 20px;
  width: 30vw;
  height: 30vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--color-smaragd-rgb, 45, 87, 79), 0.12) 0%, rgba(var(--color-smaragd-rgb, 45, 87, 79), 0) 72%);
  pointer-events: none;
}
.tc-packages-style1 .intro,
.home-packages .intro {
  position: relative;
  z-index: 2;
  max-width: 860px;
  margin: 0 auto 60px;
  text-align: center;
}
.eyebrow {
  font-size: 13px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--color-smaragd, #2D574F);
  margin-bottom: 18px;
}
/* Eyebrow als semantische Ueberschrift (h2/h3) verwendbar machen.
   common_style.v2.css:167 stylt nackte h2/h3:not([class*="heading-h"]) mit
   font-weight:bold / line-height:1.2 / margin:0 und ueberschreibt (Spez. 0-1-1)
   die .eyebrow-Defaults. Hier auf die <p class="eyebrow">-Optik zurueckgesetzt;
   gewinnt den 0-1-1-Gleichstand per Source-Order (index.css laedt nach common_style). */
h2.eyebrow,
h3.eyebrow {
  font-weight: 400;
  line-height: inherit;
  margin: 0 0 18px;
}
.tc-packages-style1 .heading-h2,
.home-packages .heading-h2 {
  margin-bottom: 20px;
}
.tc-packages-style1 .text,
.home-packages .text {
  font-size: 17px;
  line-height: 1.9;
}
.tc-packages-style1 .plans-grid,
.home-packages .plans-grid {
  position: relative;
  z-index: 2;
}
.tc-packages-style1 .plans-grid > [class*=col-]:nth-child(1) .plan-card,
.home-packages .plans-grid > [class*=col-]:nth-child(1) .plan-card {
  --plan-card-stagger: 0s;
}
.tc-packages-style1 .plans-grid > [class*=col-]:nth-child(2) .plan-card,
.home-packages .plans-grid > [class*=col-]:nth-child(2) .plan-card {
  --plan-card-stagger: 0.14s;
}
.tc-packages-style1 .plans-grid > [class*=col-]:nth-child(3) .plan-card,
.home-packages .plans-grid > [class*=col-]:nth-child(3) .plan-card {
  --plan-card-stagger: 0.28s;
}
.tc-packages-style1 .plans-grid > [class*=col-]:nth-child(4) .plan-card,
.home-packages .plans-grid > [class*=col-]:nth-child(4) .plan-card {
  --plan-card-stagger: 0.42s;
}
.tc-packages-style1 .plan-card,
.home-packages .plan-card {
  --plan-primary: var(--color-bronze, #CD8946);
  --plan-secondary: #f0c17c;
  --plan-surface: rgba(var(--color-bronze-rgb, 205, 137, 70), 0.22);
  --plan-outline: rgba(var(--color-bronze-rgb, 205, 137, 70), 0.26);
  --plan-shadow: rgba(160, 93, 27, 0.18);
  --plan-ink: #131313;
  --plan-badge-ink: #fff;
  position: relative;
  height: 100%;
  display: block;
  perspective: 2000px;
  cursor: pointer;
  outline: none;
  isolation: isolate;
}
.tc-packages-style1 .plan-card.silver,
.home-packages .plan-card.silver {
  --plan-primary: var(--color-silver, #ADB0B2);
  --plan-secondary: #d9dde6;
  --plan-surface: rgba(var(--color-silver-rgb, 173, 176, 178), 0.18);
  --plan-outline: rgba(var(--color-silver-rgb, 173, 176, 178), 0.24);
  --plan-shadow: rgba(114, 122, 138, 0.16);
  --plan-badge-ink: #151821;
}
.tc-packages-style1 .plan-card.gold,
.home-packages .plan-card.gold {
  --plan-primary: var(--color-gold, #DCBF6A);
  --plan-secondary: #f1dd93;
  --plan-surface: rgba(var(--color-gold-rgb, 220, 191, 106), 0.2);
  --plan-outline: rgba(var(--color-gold-rgb, 220, 191, 106), 0.24);
  --plan-shadow: rgba(176, 136, 21, 0.18);
  --plan-badge-ink: #473305;
}
.tc-packages-style1 .plan-card.emerald,
.home-packages .plan-card.emerald {
  --plan-primary: var(--color-smaragd, #2D574F);
  --plan-secondary: #8edec2;
  --plan-surface: rgba(var(--color-smaragd-rgb, 45, 87, 79), 0.18);
  --plan-outline: rgba(var(--color-smaragd-rgb, 45, 87, 79), 0.26);
  --plan-shadow: rgba(4, 53, 44, 0.18);
}
.tc-packages-style1 .plan-card.is-flipped .plan-card-inner,
.home-packages .plan-card.is-flipped .plan-card-inner {
  transform: rotateY(180deg);
}
.tc-packages-style1 .plan-card:focus-visible .plan-face,
.home-packages .plan-card:focus-visible .plan-face {
  box-shadow: 0 0 0 3px rgba(19, 19, 19, 0.08), 0 28px 60px var(--plan-shadow);
}
.tc-packages-style1 .plan-card-inner,
.home-packages .plan-card-inner {
  display: grid;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.tc-packages-style1 .plan-face,
.home-packages .plan-face {
  grid-area: 1 / 1;
  border-radius: 32px;
  padding: 30px 28px;
  overflow: hidden;
  backface-visibility: hidden;
  border: 1px solid var(--plan-outline);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.88) 100%);
  box-shadow: 0 28px 60px var(--plan-shadow);
  display: flex;
  flex-direction: column;
}
.tc-packages-style1 .plan-face::before,
.home-packages .plan-face::before {
  position: absolute;
  content: "";
  inset: 1px;
  border-radius: 31px;
  background: radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.86) 34%, var(--plan-surface) 100%);
  z-index: -2;
}
.tc-packages-style1 .plan-face::after,
.home-packages .plan-face::after {
  position: absolute;
  content: "";
  right: -40px;
  bottom: -35px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--plan-surface) 0%, rgba(255, 255, 255, 0) 72%);
  z-index: -1;
}
.tc-packages-style1 .plan-front,
.home-packages .plan-front {
  justify-content: space-between;
}
.tc-packages-style1 .plan-front > *,
.home-packages .plan-front > * {
  --plan-child-delay: 0s;
}
.tc-packages-style1 .plan-front > .plan-badge,
.home-packages .plan-front > .plan-badge {
  --plan-child-delay: 0.04s;
}
.tc-packages-style1 .plan-front > .plan-visual,
.home-packages .plan-front > .plan-visual {
  --plan-child-delay: 0.14s;
}
.tc-packages-style1 .plan-front > .plan-front-copy,
.home-packages .plan-front > .plan-front-copy {
  --plan-child-delay: 0.24s;
}
.tc-packages-style1 .plan-front > .plan-price,
.home-packages .plan-front > .plan-price {
  --plan-child-delay: 0.34s;
}
.tc-packages-style1 .plan-front > .plan-front-foot,
.home-packages .plan-front > .plan-front-foot {
  --plan-child-delay: 0.44s;
}
html.js-reveal .tc-packages-style1 .plan-card .plan-front > *,
html.js-reveal .home-packages .plan-card .plan-front > * {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity 0.65s ease, transform 0.65s ease;
  transition-delay: calc(var(--plan-card-stagger, 0s) + var(--plan-child-delay, 0s));
  will-change: opacity, transform;
}
html.js-reveal .tc-packages-style1 .plan-card.animated .plan-front > *,
html.js-reveal .home-packages .plan-card.animated .plan-front > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.tc-packages-style1 .plan-back,
.home-packages .plan-back {
  transform: rotateY(180deg);
  padding: 30px 32px 34px;
}
.tc-packages-style1 .plan-badge,
.home-packages .plan-badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--plan-primary), var(--plan-secondary));
  color: var(--plan-badge-ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  box-shadow: 0 16px 24px var(--plan-shadow);
}
.tc-packages-style1 .plan-front-copy,
.home-packages .plan-front-copy {
  margin-top: 24px;
}
.tc-packages-style1 .plan-visual,
.home-packages .plan-visual {
  position: relative;
  margin-top: 24px;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.36), var(--plan-surface));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.tc-packages-style1 .plan-visual img,
.home-packages .plan-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.03);
  filter: saturate(0.9) contrast(1.02) brightness(0.92);
}
.tc-packages-style1 .plan-visual::after,
.home-packages .plan-visual::after {
  position: absolute;
  content: "";
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 14, 14, 0.02) 0%, rgba(14, 14, 14, 0.3) 100%), linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, var(--plan-surface) 100%);
}
.tc-packages-style1 .plan-label,
.home-packages .plan-label {
  font-size: 12px;
  color: rgba(19, 19, 19, 0.45);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.tc-packages-style1 .plan-name,
.home-packages .plan-name {
  font-size: clamp(32px, 2.6vw, 42px);
  margin: 0;
}
.tc-packages-style1 .plan-price,
.home-packages .plan-price {
  font-size: clamp(44px, 4vw, 62px);
  line-height: 0.95;
  font-weight: 600;
  letter-spacing: -0.05em;
  color: var(--plan-ink);
  margin: 22px 0 0;
}
.tc-packages-style1 .plan-price .currency,
.home-packages .plan-price .currency {
  font-size: 0.44em;
  display: inline-block;
  vertical-align: top;
  margin-inline-end: 8px;
  transform: translateY(10px);
}
.tc-packages-style1 .plan-front-foot,
.home-packages .plan-front-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(19, 19, 19, 0.12);
  color: #1d1d1d;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.tc-packages-style1 .plan-front-foot i,
.home-packages .plan-front-foot i {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--plan-primary), var(--plan-secondary));
  box-shadow: 0 12px 22px var(--plan-shadow);
  font-size: 15px;
}
.tc-packages-style1 .plan-summary,
.home-packages .plan-summary {
  margin: 28px 0 24px;
  font-size: 19px;
  line-height: 1.65;
  color: #2f2f2f;
  max-width: 95%;
}
.tc-packages-style1 .plan-features,
.home-packages .plan-features {
  padding: 0;
  margin: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}
.tc-packages-style1 .plan-features li,
.home-packages .plan-features li {
  position: relative;
  padding-inline-start: 32px;
  color: #2c2c2c;
  font-size: 15px;
  line-height: 1.6;
}
.tc-packages-style1 .plan-features li i,
.home-packages .plan-features li i {
  position: absolute;
  left: 0;
  top: 5px;
  color: var(--plan-primary);
  font-size: 18px;
}
.tc-packages-style1 .plan-back-bottom,
.home-packages .plan-back-bottom {
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid rgba(19, 19, 19, 0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
}
.tc-packages-style1 .plan-note,
.home-packages .plan-note {
  display: block;
  width: 100%;
  max-width: 100%;
  font-size: 12px;
  color: rgba(19, 19, 19, 0.45);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
}
.tc-packages-style1 .plan-cta,
.home-packages .plan-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  max-width: 100%;
  min-height: 54px;
  padding: 0 24px;
  border-radius: 999px;
  border: 1px solid rgba(19, 19, 19, 0.14);
  background: rgba(255, 255, 255, 0.7);
  color: #111;
  transition: all 0.3s ease;
}
.tc-packages-style1 .plan-cta::after,
.home-packages .plan-cta::after {
  position: absolute;
  content: "";
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 -14px 18px rgba(4, 26, 22, 0.08);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 0;
}
.tc-packages-style1 .plan-cta:hover,
.home-packages .plan-cta:hover {
  background: linear-gradient(135deg, var(--plan-primary), var(--plan-secondary));
  border-color: var(--plan-primary);
  color: #fff;
  box-shadow: none;
  transform: translateY(-1px);
}
.tc-packages-style1 .plan-cta:hover::after,
.home-packages .plan-cta:hover::after {
  opacity: 1;
}
.tc-packages-style1 .plan-cta span,
.home-packages .plan-cta span {
  position: relative;
  z-index: 1;
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  .tc-packages-style1 .plan-card:hover .plan-card-inner,
  .home-packages .plan-card:hover .plan-card-inner {
    transform: rotateY(180deg);
  }
}
@media screen and (min-width: 1200px) and (max-width: 1499px) {
  .tc-packages-style1 .plans-grid > [class*=col-],
  .home-packages .plans-grid > [class*=col-] {
    flex: 0 0 auto;
    width: 50%;
  }
}
@media screen and (max-width: 991px) {
  .tc-packages-style1,
  .home-packages {
    padding: 30px 0 90px;
  }
  .tc-packages-style1 .intro,
  .home-packages .intro {
    margin-bottom: 40px;
  }
  .tc-packages-style1 .text,
  .home-packages .text {
    font-size: 15px;
    line-height: 1.8;
  }
  .tc-packages-style1 .plan-summary,
  .home-packages .plan-summary {
    max-width: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
  .tc-packages-style1 .plan-back,
  .home-packages .plan-back {
    padding: 30px 30px 40px;
  }
  .tc-packages-style1 .plan-note,
  .home-packages .plan-note {
    font-size: 11px;
    letter-spacing: 0.16em;
  }
}
@media screen and (max-width: 767px) {
  .tc-packages-style1 .plan-face,
  .home-packages .plan-face {
    padding: 24px 22px;
    border-radius: 26px;
  }
  .tc-packages-style1 .plan-visual,
  .home-packages .plan-visual {
    border-radius: 20px;
  }
  .tc-packages-style1 .plan-front-foot,
  .home-packages .plan-front-foot {
    font-size: 12px;
    letter-spacing: 0.1em;
  }
  .tc-packages-style1 .plan-summary,
  .home-packages .plan-summary {
    font-size: 17px;
  }
  .tc-packages-style1 .plan-back,
  .home-packages .plan-back {
    padding: 24px 28px 30px;
  }
  .tc-packages-style1 .plan-back-bottom,
  .home-packages .plan-back-bottom {
    align-items: flex-start;
    flex-direction: column;
    padding-inline: 8px;
  }
  .tc-packages-style1 .plan-cta,
  .home-packages .plan-cta {
    width: calc(100% - 12px);
    align-self: center;
  }
}