/*
 * TYCETOOLZ Sections v2 — Apple-Anmutung in Dark/Gold
 * Stand 2026-05-14
 *
 * Section-Layouts: Hero, Comparison (Pain), Buy-Grid, etc.
 * Aktivieren sich erst, wenn V2-Markup verwendet wird (--v2-Modifier in Phase 2-4).
 * Kein visueller Effekt auf bestehendes Markup.
 */

/* ===========================================================
 * PRODUKT-HINTERGRUND (site-weit, UNLAYERED für höchste Spezifität)
 * Kabelabroller schräg ohne Trommel — blurred, fixed.
 * Greift auf JEDER Seite (Landing, Standardmodelle, Impressum, etc.),
 * unabhängig vom V2-Modus.
 * Kein Parallax (Anti-Pattern-konform) — fixed.
 * =========================================================== */
body {
  position: relative;
  isolation: isolate;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url('images/kabelabroller-schraeg.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(70px) brightness(0.4) saturate(1.1);
  opacity: 0.4;
  transform: scale(1.15);
  z-index: -1;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  body::before { opacity: 0.22; }
}

@layer sections {

  /* ===========================================================
   * SECTION CONTAINER — Padding, Background-Rhythmus
   * =========================================================== */
  .tc-section {
    padding-block: var(--tc-space-section-desktop);
    background: var(--tc-bg-0);
  }
  @media (max-width: 768px) {
    .tc-section {
      padding-block: var(--tc-space-section-mobile);
    }
  }

  .tc-section--bg-0 { background: var(--tc-bg-0); }
  .tc-section--bg-1 { background: var(--tc-bg-1); }
  .tc-section--bg-2 { background: var(--tc-bg-2); }

  /* Im V2-Modus: Section-Backgrounds leicht transparent,
     damit der Produkt-Hintergrund durchscheint. */
  body.tc-v2 .tc-section--bg-0 { background: rgba(10, 10, 10, 0.88); }
  body.tc-v2 .tc-section--bg-1 { background: rgba(17, 17, 17, 0.88); }
  body.tc-v2 .tc-section--bg-2 { background: rgba(22, 22, 22, 0.88); }

  .tc-section__container {
    max-width: var(--tc-container-max);
    margin-inline: auto;
    padding-inline: var(--tc-space-3);
  }
  @media (max-width: 768px) {
    .tc-section__container {
      padding-inline: var(--tc-space-2);
    }
  }

  .tc-section__header {
    max-width: var(--tc-content-max);
    margin-block-end: var(--tc-space-8);
  }
  .tc-section__eyebrow + .tc-section__title {
    margin-block-start: var(--tc-space-2);
  }
  .tc-section__title + .tc-section__lead {
    margin-block-start: var(--tc-space-3);
  }

  /* ===========================================================
   * HERO — Split 60/40 Desktop, Stacked Mobile
   * Phase 2 wird tc-mini-hero--v2 + tc-sm-hero--v2 hierauf basieren
   * =========================================================== */
  .tc-hero {
    padding-block: var(--tc-space-hero-desktop) var(--tc-space-section-desktop);
    background: var(--tc-bg-0);
    overflow: hidden;
  }
  @media (max-width: 768px) {
    .tc-hero {
      padding-block: var(--tc-space-section-mobile);
    }
  }

  .tc-hero__container {
    max-width: var(--tc-container-max);
    margin-inline: auto;
    padding-inline: var(--tc-space-3);
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 4fr);
    gap: var(--tc-space-8);
    align-items: center;
  }
  @media (max-width: 1024px) {
    .tc-hero__container {
      grid-template-columns: 1fr;
      gap: var(--tc-space-6);
    }
  }
  @media (max-width: 768px) {
    .tc-hero__container {
      padding-inline: var(--tc-space-2);
      gap: var(--tc-space-4);
    }
  }

  .tc-hero__text > * + * {
    margin-block-start: var(--tc-space-3);
  }
  .tc-hero__text .tc-eyebrow + .tc-display,
  .tc-hero__text .tc-eyebrow + .tc-h1 {
    margin-block-start: var(--tc-space-2);
  }

  .tc-hero__media {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: var(--tc-radius-md);
    overflow: hidden;
    background: var(--tc-color-bg-elevated);
  }
  @media (max-width: 768px) {
    .tc-hero__media {
      aspect-ratio: 4 / 5;
    }
  }
  .tc-hero__media img,
  .tc-hero__media picture > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* ===========================================================
   * COMPARISON — Apple-Pain-Pattern, 2 Bilder side-by-side
   * Phase 3 nutzt tc-pain--v2 hierauf basierend
   * =========================================================== */
  .tc-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--tc-space-4);
    margin-block-start: var(--tc-space-6);
  }
  @media (max-width: 768px) {
    .tc-comparison {
      grid-template-columns: 1fr;
      gap: 0;
      border-block-start: 1px solid var(--tc-color-accent);
    }
    .tc-comparison > :not(:first-child) {
      border-block-start: 1px solid var(--tc-color-accent);
      padding-block-start: var(--tc-space-3);
    }
  }

  .tc-comparison__item {
    display: flex;
    flex-direction: column;
    gap: var(--tc-space-2);
  }

  .tc-comparison__media {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--tc-radius-md);
    overflow: hidden;
    background: var(--tc-color-bg-elevated);
  }
  .tc-comparison__media img,
  .tc-comparison__media picture > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* ===========================================================
   * BUY-GRID — Standardmodelle Product-Grid
   * Phase 4 nutzt tc-sm-buy-card--v2 hierauf basierend
   * =========================================================== */
  .tc-buy-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--tc-space-4);
    margin-block-start: var(--tc-space-6);
  }
  @media (max-width: 768px) {
    .tc-buy-grid {
      grid-template-columns: 1fr;
      gap: var(--tc-space-3);
    }
  }

  /*
   * Reveal-Choreografie: kein eigener Block hier.
   * Der bestehende Mechanismus in functions.php tycetoolz_premium_global_css()
   * nutzt [data-tc-reveal] + .is-visible + [data-tc-reveal="delay-1..3"].
   * Phase 3 modernisiert diesen Block (≤300ms, --tc-ease-out, --tc-dur-slow)
   * direkt in functions.php, damit keine Doppel-Selektoren entstehen.
   */

  /* ===========================================================
   * MINI-HERO V2 (Landing) + SM-HERO V2 (Standardmodelle)
   * Phase 2: text-only, Display-Headline, Lead, CTA-Pair / Facts.
   * Bild-Slot bleibt für Phase 2.x reserviert (Studio-Aufnahmen).
   * =========================================================== */
  .tc-mini-hero--v2,
  .tc-sm-hero--v2 {
    padding-block-start: var(--tc-space-hero-desktop);
  }
  @media (max-width: 768px) {
    .tc-mini-hero--v2,
    .tc-sm-hero--v2 {
      padding-block-start: var(--tc-space-section-mobile);
    }
  }

  .tc-mini-hero--v2__text > * + *,
  .tc-sm-hero--v2__text > * + * {
    margin-block-start: var(--tc-space-3);
  }
  .tc-mini-hero--v2__text .tc-eyebrow + .tc-display,
  .tc-sm-hero--v2__text .tc-eyebrow + .tc-display {
    margin-block-start: var(--tc-space-2);
  }

  .tc-mini-hero--v2__title {
    max-width: 18ch;
  }
  .tc-sm-hero--v2__title {
    max-width: 20ch;
  }
  .tc-mini-hero--v2__lead,
  .tc-sm-hero--v2__lead {
    max-width: 60ch;
  }

  /* ===========================================================
   * PAIN V2 (Apple-Comparison-Pattern)
   * Phase 3: Vorher/Nachher-Bilder mit Header oben
   * =========================================================== */
  .tc-pain--v2__header {
    max-width: var(--tc-container-narrow);
    margin-inline: auto;
    margin-block-end: var(--tc-space-6);
    text-align: center;
  }
  .tc-pain--v2__header > * + * {
    margin-block-start: var(--tc-space-2);
  }
  .tc-pain--v2__header .tc-eyebrow + .tc-h1 {
    margin-block-start: var(--tc-space-3);
  }
  .tc-pain--v2__title {
    max-width: 22ch;
    margin-inline: auto;
  }
  .tc-pain--v2__lead {
    max-width: 60ch;
    margin-inline: auto;
    margin-block-start: var(--tc-space-3);
  }

  /* SM-Hero Facts: Apple-Chip-Reihe (statt Liste) */
  .tc-sm-hero--v2__facts {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-block-start: var(--tc-space-4);
    display: flex;
    flex-wrap: wrap;
    gap: var(--tc-space-2);
    font-family: var(--tc-font-text);
    font-size: var(--tc-type-caption);
    font-weight: var(--tc-weight-medium);
    color: var(--tc-color-text-secondary);
  }
  .tc-sm-hero--v2__facts li {
    display: inline-flex;
    align-items: center;
    padding-block: 6px;
    padding-inline: 12px;
    border: 1px solid var(--tc-color-border-subtle);
    border-radius: var(--tc-radius-full);
    background: var(--tc-color-bg-surface);
  }
  .tc-sm-hero--v2__facts li::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-inline-end: 8px;
    background: var(--tc-color-accent);
    border-radius: 50%;
    flex-shrink: 0;
  }

  /* ===========================================================
   * TRUST V2 (Phase 3 — zusammengeführt aus tc-trust + tc-lp-b2b-strip)
   * 3 Trust-Cards + 7 Chip-Reihe in einer Sektion
   * =========================================================== */
  .tc-trust--v2__header {
    max-width: var(--tc-container-narrow);
    margin-inline: auto;
    margin-block-end: var(--tc-space-6);
    text-align: center;
  }
  .tc-trust--v2__header .tc-eyebrow + .tc-h2 {
    margin-block-start: var(--tc-space-3);
  }
  .tc-trust--v2__title {
    max-width: 24ch;
    margin-inline: auto;
  }

  .tc-trust--v2__cards {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--tc-space-3);
  }
  @media (max-width: 1024px) {
    .tc-trust--v2__cards {
      grid-template-columns: 1fr;
      gap: var(--tc-space-2);
    }
  }

  .tc-trust--v2__card {
    background: var(--tc-color-bg-surface);
    border: 1px solid var(--tc-color-border-subtle);
    border-radius: var(--tc-radius-md);
    padding: var(--tc-space-4);
    transition: border-color var(--tc-dur-base) var(--tc-ease-standard);
  }
  .tc-trust--v2__card:hover {
    border-color: var(--tc-color-border-strong);
  }

  .tc-trust--v2__card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--tc-radius-sm);
    background: rgba(212, 168, 83, 0.08);
    color: var(--tc-color-accent);
    margin-block-end: var(--tc-space-3);
  }
  .tc-trust--v2__card-icon svg {
    width: 22px;
    height: 22px;
  }
  .tc-trust--v2__card-title {
    margin-block-end: var(--tc-space-1);
  }
  .tc-trust--v2__card-text {
    font-family: var(--tc-font-text);
    font-size: var(--tc-type-body);
    line-height: var(--tc-leading-body);
    color: var(--tc-color-text-secondary);
    margin: 0;
  }

  .tc-trust--v2__chips {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-block-start: var(--tc-space-6);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--tc-space-2);
  }
  .tc-trust--v2__chips li {
    display: inline-flex;
    align-items: center;
    padding-block: 6px;
    padding-inline: 12px;
    background: var(--tc-color-bg-surface);
    border: 1px solid var(--tc-color-border-subtle);
    border-radius: var(--tc-radius-full);
    font-family: var(--tc-font-text);
    font-size: var(--tc-type-caption);
    font-weight: var(--tc-weight-medium);
    color: var(--tc-color-text-secondary);
  }
  .tc-trust--v2__chips li::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-inline-end: 8px;
    background: var(--tc-color-accent);
    border-radius: 50%;
    flex-shrink: 0;
  }

  /* ===========================================================
   * HOWTO V2 (Phase 3 — zusammengeführt aus tc-howto-lp + tc-service)
   * Oben: 3-Step-Process. Unten: 3 Branchen.
   * =========================================================== */
  .tc-howto--v2__header,
  .tc-howto--v2__subheader {
    max-width: var(--tc-container-narrow);
    margin-inline: auto;
    text-align: center;
  }
  .tc-howto--v2__header {
    margin-block-end: var(--tc-space-6);
  }
  .tc-howto--v2__header .tc-eyebrow + .tc-h1 {
    margin-block-start: var(--tc-space-3);
  }
  .tc-howto--v2__title {
    max-width: 22ch;
    margin-inline: auto;
  }

  .tc-howto--v2__steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--tc-space-3);
  }
  @media (max-width: 1024px) {
    .tc-howto--v2__steps {
      grid-template-columns: 1fr;
      gap: var(--tc-space-2);
    }
  }

  .tc-howto--v2__step {
    padding: var(--tc-space-4);
    background: var(--tc-color-bg-surface);
    border: 1px solid var(--tc-color-border-subtle);
    border-radius: var(--tc-radius-md);
    transition: border-color var(--tc-dur-base) var(--tc-ease-standard);
  }
  .tc-howto--v2__step:hover {
    border-color: var(--tc-color-border-strong);
  }
  .tc-howto--v2__step-num {
    display: block;
    font-family: var(--tc-font-display);
    font-size: var(--tc-type-h2);
    font-weight: var(--tc-weight-bold);
    line-height: 1;
    letter-spacing: var(--tc-tracking-h2);
    color: var(--tc-color-accent);
    margin-block-end: var(--tc-space-3);
    font-variant-numeric: tabular-nums lining-nums;
  }
  .tc-howto--v2__step-title {
    margin-block-end: var(--tc-space-1);
  }
  .tc-howto--v2__step-text {
    font-family: var(--tc-font-text);
    font-size: var(--tc-type-body);
    line-height: var(--tc-leading-body);
    color: var(--tc-color-text-secondary);
    margin: 0;
  }

  .tc-howto--v2__divider {
    height: 1px;
    background: var(--tc-color-border-subtle);
    margin-block: var(--tc-space-8);
  }

  .tc-howto--v2__subheader {
    margin-block-end: var(--tc-space-6);
  }
  .tc-howto--v2__subheader .tc-eyebrow + .tc-h2 {
    margin-block-start: var(--tc-space-3);
  }
  .tc-howto--v2__subtitle {
    max-width: 22ch;
    margin-inline: auto;
  }
  .tc-howto--v2__sublead {
    max-width: 60ch;
    margin-inline: auto;
    margin-block-start: var(--tc-space-2);
  }

  .tc-howto--v2__industries {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--tc-space-3);
  }
  @media (max-width: 1024px) {
    .tc-howto--v2__industries {
      grid-template-columns: 1fr;
      gap: var(--tc-space-2);
    }
  }

  .tc-howto--v2__industry {
    padding: var(--tc-space-4);
    background: var(--tc-color-bg-surface);
    border: 1px solid var(--tc-color-border-subtle);
    border-radius: var(--tc-radius-md);
    transition: border-color var(--tc-dur-base) var(--tc-ease-standard);
  }
  .tc-howto--v2__industry:hover {
    border-color: var(--tc-color-border-strong);
  }
  .tc-howto--v2__industry-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--tc-radius-sm);
    background: rgba(212, 168, 83, 0.08);
    color: var(--tc-color-accent);
    margin-block-end: var(--tc-space-3);
  }
  .tc-howto--v2__industry-icon svg {
    width: 22px;
    height: 22px;
  }
  .tc-howto--v2__industry-title {
    margin-block-end: var(--tc-space-1);
  }
  .tc-howto--v2__industry-text {
    font-family: var(--tc-font-text);
    font-size: var(--tc-type-body);
    line-height: var(--tc-leading-body);
    color: var(--tc-color-text-secondary);
    margin: 0;
  }

  /* ===========================================================
   * PERSONA V2 (Phase 3 — Apple-Two-Column-Layout)
   * Text links + Foto rechts (Desktop), gestapelt Mobile.
   * =========================================================== */
  .tc-persona--v2__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--tc-space-8);
    align-items: center;
  }
  @media (max-width: 1024px) {
    .tc-persona--v2__grid {
      grid-template-columns: 1fr;
      gap: var(--tc-space-4);
    }
  }

  .tc-persona--v2__text > * + * {
    margin-block-start: var(--tc-space-3);
  }
  .tc-persona--v2__text .tc-eyebrow + .tc-h1 {
    margin-block-start: var(--tc-space-2);
  }
  .tc-persona--v2__title {
    max-width: 18ch;
  }
  .tc-persona--v2__lead {
    max-width: 55ch;
  }
  .tc-persona--v2__linkedin {
    margin-block-start: var(--tc-space-3);
  }

  .tc-persona--v2__figure {
    margin: 0;
    text-align: start;
  }
  .tc-persona--v2__figure img {
    display: block;
    width: 100%;
    max-width: 400px;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: var(--tc-radius-md);
  }
  .tc-persona--v2__caption {
    display: flex;
    flex-direction: column;
    gap: var(--tc-space-1);
    margin-block-start: var(--tc-space-3);
  }
  .tc-persona--v2__name {
    font-family: var(--tc-font-display);
    font-size: var(--tc-type-h3);
    font-weight: var(--tc-weight-semibold);
    color: var(--tc-color-text-primary);
  }
  .tc-persona--v2__role {
    font-family: var(--tc-font-text);
    font-size: var(--tc-type-caption);
    color: var(--tc-color-text-secondary);
  }

  /* ===========================================================
   * REQUEST V2 (Phase 3 — Anfrage-CTA-Sektion)
   * Apple-style: zentrierter Block mit Display + Speed-Promise + CTA-Pair
   * =========================================================== */
  .tc-request--v2__text {
    max-width: var(--tc-container-narrow);
    margin-inline: auto;
    text-align: center;
  }
  .tc-request--v2__text > * + * {
    margin-block-start: var(--tc-space-3);
  }
  .tc-request--v2__text .tc-eyebrow + .tc-h1 {
    margin-block-start: var(--tc-space-2);
  }
  .tc-request--v2__title {
    max-width: 18ch;
    margin-inline: auto;
  }
  .tc-request--v2__lead {
    max-width: 60ch;
    margin-inline: auto;
  }
  .tc-request--v2__promise {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-block: 6px;
    padding-inline: 12px;
    background: var(--tc-color-bg-surface);
    border: 1px solid var(--tc-color-border-subtle);
    border-radius: var(--tc-radius-full);
    font-family: var(--tc-font-text);
    font-size: var(--tc-type-caption);
    font-weight: var(--tc-weight-medium);
    color: var(--tc-color-accent);
    margin: 0;
  }
  .tc-request--v2__text .tc-cta-pair {
    justify-content: center;
  }

  /* ===========================================================
   * FAQ V2 (Phase 3 — Apple-Accordion)
   * details/summary; Schema.org JSON-LD bleibt in wp_head unverändert.
   * =========================================================== */
  .tc-faq--v2__header {
    max-width: var(--tc-container-narrow);
    margin-inline: auto;
    margin-block-end: var(--tc-space-6);
    text-align: center;
  }
  .tc-faq--v2__header .tc-eyebrow + .tc-h1 {
    margin-block-start: var(--tc-space-3);
  }
  .tc-faq--v2__title {
    max-width: 22ch;
    margin-inline: auto;
  }

  .tc-faq--v2__list {
    max-width: 800px;
    margin-inline: auto;
  }

  .tc-faq--v2__item {
    border-block-end: 1px solid var(--tc-color-border-subtle);
  }
  .tc-faq--v2__item:first-child {
    border-block-start: 1px solid var(--tc-color-border-subtle);
  }

  .tc-faq--v2__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tc-space-3);
    padding-block: var(--tc-space-3);
    font-family: var(--tc-font-display);
    font-size: var(--tc-type-h3);
    font-weight: var(--tc-weight-semibold);
    color: var(--tc-color-text-primary);
    cursor: pointer;
    list-style: none;
    transition: color var(--tc-dur-fast) var(--tc-ease-standard);
  }
  .tc-faq--v2__summary::-webkit-details-marker {
    display: none;
  }
  .tc-faq--v2__summary::after {
    content: "+";
    flex-shrink: 0;
    font-size: var(--tc-type-h2);
    line-height: 1;
    color: var(--tc-color-accent);
    transition: transform var(--tc-dur-base) var(--tc-ease-standard);
  }
  .tc-faq--v2__item[open] .tc-faq--v2__summary::after {
    content: "−";
  }
  .tc-faq--v2__summary:hover {
    color: var(--tc-color-accent);
  }
  .tc-faq--v2__summary:focus-visible {
    outline: var(--tc-focus-ring-width) solid var(--tc-focus-ring-color);
    outline-offset: var(--tc-focus-ring-offset);
  }

  .tc-faq--v2__body {
    padding-block-end: var(--tc-space-3);
    padding-inline-end: var(--tc-space-6);
    font-family: var(--tc-font-text);
    font-size: var(--tc-type-body);
    line-height: var(--tc-leading-body);
    color: var(--tc-color-text-secondary);
  }
  .tc-faq--v2__body p {
    margin: 0;
  }
}