/* ═══════════════════════════════════════════════════════════════
   Startseite · Seiten-Canvas + Schlussbereich
   Ein Verlauf über die ganze Landing, Glas nur auf Inhaltskarten
═══════════════════════════════════════════════════════════════ */

/* ─── Ganzseitiger, ruhiger Verlauf (fixiert beim Scrollen) ─── */
#taktflo-landing {
  --tf-glass-bg: rgba(255, 255, 255, 0.52);
  --tf-glass-border: rgba(255, 255, 255, 0.72);
  --tf-glass-shadow: 0 10px 36px rgba(15, 23, 42, 0.08);
  /* Glas wie Plattformen-Bereich (.tf-closing-stage) */
  --tf-glass-panel-bg: rgba(255, 255, 255, 0.5);
  --tf-glass-panel-border: rgba(255, 255, 255, 0.78);
  --tf-glass-panel-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.03) inset,
    0 20px 50px rgba(0, 113, 227, 0.07);
  --tf-glass-panel-blur: blur(28px) saturate(1.25);
  --tf-bg: #dce2ec;
  /* Titel-Verlauf: volle Textbreite, blaue Kante rechts (~6em, Referenz „…TaktFlo“) */
  --tf-title-gradient: linear-gradient(
    90deg,
    #1d1d1f 0%,
    #1d1d1f calc(100% - 6.75em),
    #0071e3 calc(100% - 4.35em),
    #2563eb 100%
  );
  /* Abstand Ende Vorgänger-Sektion → Eyebrow (Referenz: Digitize → „In drei Schritten“) */
  --tf-section-gap: clamp(8.25rem, 12vw, 10.5rem);
  position: relative;
  isolation: isolate;
  background: #dce2ec !important;
  background-image: none !important;
  color: var(--tf-text);
}

#taktflo-landing::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 130% 70% at 50% -8%, rgba(0, 113, 227, 0.26), transparent 58%),
    radial-gradient(ellipse 90% 58% at 100% 38%, rgba(41, 151, 255, 0.18), transparent 54%),
    radial-gradient(ellipse 85% 52% at 0% 68%, rgba(0, 113, 227, 0.15), transparent 52%),
    radial-gradient(ellipse 65% 42% at 50% 95%, rgba(99, 102, 241, 0.14), transparent 58%),
    linear-gradient(
      180deg,
      #ccd4e4 0%,
      #d4dae8 14%,
      #dce2ee 32%,
      #d6deea 52%,
      #d8e0ec 72%,
      #c8d2e4 100%
    );
}

/* Hero: blaue Trennlinie unter der Headline (alle Stylesheets) */
#taktflo-landing .tf-hero .tf-hero__title::after,
#taktflo-landing .tf-hero .tf-hero__title::before {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  animation: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Landing: keine dekorativen Striche vor Überschriften / zwischen Sektionen */
#taktflo-landing main .tf-section::before,
#taktflo-landing main .tf-section::after,
#taktflo-landing #ablauf .tf-steps::before,
#taktflo-landing #ablauf .tf-steps::after {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  animation: none !important;
}

/* ─── Einheitlich zentrierte Sektions-Überschriften (Landing) ─── */
#taktflo-landing .tf-section-intro,
#taktflo-landing .tf-pricing-intro,
#taktflo-landing .tf-reviews-stack__head {
  text-align: center;
  margin-inline: auto;
  max-width: 42rem;
}

#taktflo-landing .tf-section-intro .tf-eyebrow,
#taktflo-landing .tf-section-intro .tf-section__title,
#taktflo-landing .tf-section-intro .tf-section__subtitle,
#taktflo-landing .tf-pricing-intro .tf-eyebrow,
#taktflo-landing .tf-pricing-intro .tf-section__title,
#taktflo-landing .tf-pricing-intro .tf-section__subtitle,
#taktflo-landing .tf-reviews-stack__lead {
  text-align: center !important;
  margin-inline: auto !important;
}

#taktflo-landing main .tf-section > .tf-container > .tf-eyebrow,
#taktflo-landing main .tf-section > .tf-container > .tf-section__title,
#taktflo-landing main .tf-section > .tf-container > .tf-section__subtitle {
  text-align: center;
  margin-inline: auto;
}

#taktflo-landing .tf-pricing-zone .tf-pricing-intro {
  width: 100%;
  margin-bottom: clamp(1rem, 2.5vw, 1.35rem);
}

/* Mehrzeilige Sektions-Überschriften: Platz für Unterlängen (j, g, y) + Abstand zum Untertitel */
#taktflo-landing .tf-section-intro .tf-section__title {
  line-height: 1.22 !important;
  padding-bottom: 0.18em !important;
  margin-bottom: clamp(0.85rem, 2vw, 1.2rem) !important;
  overflow: visible !important;
}

#taktflo-landing .tf-section-intro .tf-section__subtitle {
  margin-top: clamp(1.15rem, 2.6vw, 1.55rem) !important;
}

/* Landing: mehr Luft zwischen Eyebrow → Titel → Untertitel (alle Sektionen) */
#taktflo-landing main .tf-section > .tf-container > .tf-eyebrow,
#taktflo-landing .tf-section-intro .tf-eyebrow,
#taktflo-landing .tf-pricing-intro .tf-eyebrow,
#taktflo-landing .tf-reviews-stack__head .tf-eyebrow,
#taktflo-landing .tf-audience-intro .tf-eyebrow,
#taktflo-landing .tf-platforms-intro .tf-eyebrow {
  margin: 0 0 clamp(1.35rem, 3vw, 1.85rem) !important;
}

#taktflo-landing main .tf-section > .tf-container > .tf-section__title,
#taktflo-landing .tf-section-intro .tf-section__title,
#taktflo-landing .tf-pricing-intro .tf-section__title,
#taktflo-landing .tf-reviews-stack__head .tf-section__title,
#taktflo-landing .tf-audience-intro .tf-section__title,
#taktflo-landing .tf-platforms-intro .tf-section__title,
#taktflo-landing .tf-digitize__title {
  margin-bottom: clamp(1.1rem, 2.6vw, 1.55rem) !important;
}

#taktflo-landing main .tf-section > .tf-container > .tf-section__subtitle,
#taktflo-landing .tf-section-intro .tf-section__subtitle,
#taktflo-landing .tf-pricing-intro .tf-section__subtitle,
#taktflo-landing .tf-audience-intro .tf-section__subtitle,
#taktflo-landing .tf-platforms-intro .tf-section__subtitle {
  margin-top: clamp(0.85rem, 2vw, 1.2rem) !important;
}

#taktflo-landing > header,
#taktflo-landing > main,
#taktflo-landing > footer {
  position: relative;
  z-index: 1;
}

/* Nach WP-Theme-Reset: Abstand unter fixierter Kopfzeile (siehe taktflo.css) */
#taktflo-landing > main {
  padding-top: var(--tf-header-offset) !important;
}

/* Kein dunkler Trennstrich unter der Kopfzeile (Border/1px-Shadow von tf-scrolled) */
body.tf-scrolled #taktflo-landing .tf-header,
#taktflo-landing .tf-header {
  border-bottom: none !important;
  box-shadow: none !important;
}

body.tf-scrolled #taktflo-landing .tf-header {
  background: rgba(228, 232, 240, 0.94) !important;
}

/* Sektionen: transparent — der Seiten-Verlauf scheint durch */
/* Anker-Scroll: Sticky-Header nicht über Überschrift legen */
#taktflo-landing #vorteile,
#taktflo-landing #einblicke,
#taktflo-landing #fuer-wen,
#taktflo-landing #preise,
#taktflo-landing #offline-koffer {
  scroll-margin-top: clamp(4.5rem, 12vw, 5.75rem);
}

#taktflo-landing main .tf-section,
#taktflo-landing .tf-digitize,
#taktflo-landing .tf-section--feature-flow,
#taktflo-landing .tf-closing-band,
#taktflo-landing #preise,
#taktflo-landing .tf-section--coming-soon,
#taktflo-landing .tf-section--contact {
  background: transparent !important;
  border-top: none !important;
  box-shadow: none !important;
}

#taktflo-landing .tf-digitize::before {
  display: none;
}

.tf-closing-band {
  position: relative;
  overflow: visible;
  padding-block: 0;
  background: transparent !important;
}

.tf-closing-band > .tf-closing-mesh {
  display: none;
}

/* Überschriften-Blöcke: kein Glas (nur Typo) */
.tf-section-intro {
  padding: 0 !important;
  margin-bottom: clamp(1rem, 2.5vw, 1.5rem);
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Sektionen im Band: einheitlicher Abstand wie Digitize → Ablauf */
.tf-closing-band .tf-section--closing {
  position: relative;
  z-index: 1;
  padding-top: 0 !important;
  padding-bottom: var(--tf-section-gap) !important;
  margin: 0 !important;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible;
}

.tf-closing-band .tf-section--closing > .tf-container {
  position: relative;
  z-index: 2;
}

.tf-closing-band .tf-section--closing:first-of-type,
.tf-closing-band .tf-section--closing:last-of-type {
  padding-top: 0 !important;
}

/* ─── Glas-System ─── */
.tf-glass {
  background: var(--tf-glass-bg);
  border: 1px solid var(--tf-glass-border);
  box-shadow: var(--tf-glass-shadow);
  backdrop-filter: blur(22px) saturate(1.2);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
}

.tf-glass--panel {
  border-radius: 20px;
  padding: clamp(1.15rem, 2.8vw, 1.5rem) clamp(1.2rem, 3vw, 1.55rem);
}

.tf-glass--elevated {
  background: rgba(255, 255, 255, 0.72);
  box-shadow:
    0 0 0 1px rgba(0, 113, 227, 0.05) inset,
    0 16px 48px rgba(0, 113, 227, 0.08),
    0 4px 16px rgba(15, 23, 42, 0.05);
}

.tf-eyebrow--left {
  text-align: left !important;
}

.tf-section__title--left {
  text-align: left !important;
  margin-inline: 0 !important;
}

.tf-section__subtitle--left {
  text-align: left !important;
  margin-inline: 0 !important;
  margin-bottom: 0 !important;
  max-width: 38rem !important;
}

/* Blauer Verlauf über volle Überschrift (kein Abschneiden links) */
#taktflo-landing .tf-section__title,
#taktflo-landing .tf-digitize__title,
#taktflo-landing .tf-cta__title,
#taktflo-landing .tf-promo-soon__title:not(#offline-koffer-title) {
  display: inline-block;
  max-width: 100%;
  line-height: 1.2 !important;
  padding-bottom: 0.16em !important;
  overflow: visible !important;
  color: var(--tf-text);
  -webkit-text-fill-color: currentColor;
  background: none;
  background-repeat: no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

#taktflo-landing #offline-koffer-title {
  display: block;
  max-width: 100%;
  line-height: 1.2 !important;
  padding-bottom: 0 !important;
  overflow: visible !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
  text-shadow: 0 2px 24px rgba(15, 23, 42, 0.35);
}

#taktflo-landing .tf-section > .tf-container,
#taktflo-landing .tf-section-intro,
#taktflo-landing .tf-digitize__inner,
#taktflo-landing .tf-pricing-intro,
#taktflo-landing .tf-reviews-stack__head,
#taktflo-landing .tf-section--cta .tf-cta {
  text-align: center;
}

@supports (background-clip: text) {
  #taktflo-landing .tf-section__title,
  #taktflo-landing .tf-digitize__title,
  #taktflo-landing .tf-cta__title,
  #taktflo-landing .tf-section__title--gradient,
  #taktflo-landing #plattformen .tf-section__title {
    background: var(--tf-title-gradient) !important;
    background-size: 100% 100% !important;
    background-position: 0 0 !important;
    background-repeat: no-repeat !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    /* background-clip:text schneidet Unterlängen — extra Innenabstand */
    padding-bottom: 0.2em !important;
  }
}

/* Reveal-Blur zerstört background-clip: text auf Überschriften */
html.tf-reveal-js #taktflo-landing .tf-section__title.tf-reveal--future,
html.tf-reveal-js #taktflo-landing .tf-digitize__title.tf-reveal--future,
html.tf-reveal-js #taktflo-landing .tf-cta__title.tf-reveal--future,
html.tf-reveal-js #taktflo-landing .tf-promo-soon__title.tf-reveal--future {
  filter: none !important;
}

/* ─── Einheitlicher Sektionsabstand (Landing) ─── */
#taktflo-landing .tf-digitize {
  padding-top: clamp(2.5rem, 5vw, 4rem) !important;
  padding-bottom: var(--tf-section-gap) !important;
}

#taktflo-landing #ablauf.tf-section--tight,
#taktflo-landing #einblicke.tf-section--feature-flow,
#taktflo-landing .tf-closing-band .tf-section--closing,
#taktflo-landing #preise.tf-section--pricing {
  padding-top: 0 !important;
  padding-bottom: var(--tf-section-gap) !important;
}

#taktflo-landing #einblicke.tf-section--feature-flow {
  padding-left: 0;
  padding-right: 0;
}

/* Glas-Stage Geräte */
.tf-closing-stage {
  position: relative;
  margin-top: 0;
  padding: clamp(1.15rem, 3vw, 1.75rem) clamp(0.65rem, 2vw, 1rem) clamp(0.85rem, 2vw, 1.1rem);
  border-radius: 24px;
  background: var(--tf-glass-panel-bg);
  border: 1px solid var(--tf-glass-panel-border);
  box-shadow: var(--tf-glass-panel-shadow);
  backdrop-filter: var(--tf-glass-panel-blur);
  -webkit-backdrop-filter: var(--tf-glass-panel-blur);
}

.tf-closing-stage--devices .tf-devices-showcase {
  margin-top: 0;
}

/* ─── Plattformen: Überschrift + Geräte in einer Glasfläche ─── */
.tf-platforms-unified {
  padding-top: clamp(1.15rem, 3vw, 1.55rem);
  padding-bottom: clamp(0.5rem, 1.5vw, 0.85rem);
  overflow: visible;
}

.tf-platforms-unified .tf-platforms-intro {
  max-width: 40rem;
  margin-inline: auto;
  margin-bottom: clamp(0.1rem, 0.5vw, 0.25rem);
  padding-bottom: 0.15rem;
  overflow: visible;
}

.tf-platforms-unified .tf-platforms-intro .tf-section__title {
  line-height: 1.26 !important;
  padding-bottom: 0.24em !important;
  margin-bottom: 0.5em !important;
}

.tf-platforms-unified .tf-platforms-intro .tf-section__subtitle {
  margin-top: clamp(1.15rem, 2.6vw, 1.55rem) !important;
  /* taktflo.css: 2.5rem — Geräte näher an den Fließtext */
  margin-bottom: clamp(0.2rem, 0.65vw, 0.45rem) !important;
}

.tf-closing-stage--devices {
  overflow: visible;
  padding-top: clamp(0.85rem, 2vw, 1.15rem);
  padding-bottom: clamp(0.45rem, 1.2vw, 0.65rem);
}

.tf-platforms-unified .tf-devices-showcase {
  margin-top: 0;
  padding-top: 0;
}

/* OS-Badges (Windows, macOS, …) weiter unter den Gerätebildern */
.tf-platforms-unified .tf-devices-showcase__platforms {
  margin-top: clamp(1.35rem, 3.2vw, 2rem) !important;
}

.tf-platforms-foot {
  display: grid;
  gap: 0.85rem;
  margin-top: clamp(1.35rem, 3vw, 2rem);
  align-items: stretch;
}

@media (min-width: 900px) {
  .tf-platforms-foot {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
}

.tf-platforms-foot .tf-devices-overlap__hint {
  margin: 0;
  text-align: left;
  max-width: none;
  font-size: 1rem;
  line-height: 1.6;
}

.tf-devices-browser-info--card {
  margin: 0;
  max-width: none;
  text-align: left;
}

.tf-devices-browser-info--card .tf-devices-browser-info__list {
  justify-content: flex-start;
}

.tf-devices-browser-info--card .tf-devices-browser-info__list li {
  background: rgba(255, 255, 255, 0.65);
  border-color: rgba(0, 113, 227, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Rezensionen: Intro oben, Karte darunter — zentriert */
.tf-reviews-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.1rem, 2.5vw, 1.45rem);
  max-width: 46rem;
  margin-inline: auto;
}

.tf-reviews-stack__head {
  width: 100%;
}

.tf-reviews-stack__head .tf-section__title--left {
  margin-bottom: 0 !important;
}

.tf-reviews-stack__lead {
  margin: 0.65rem 0 0;
  font-size: clamp(0.98rem, 2vw, 1.08rem);
  line-height: 1.55;
  color: var(--tf-muted);
}

.tf-reviews-wrap--card {
  max-width: none;
  margin: 0;
  text-align: left;
  position: relative;
  overflow: hidden;
  background: var(--tf-glass-bg) !important;
  border: 1px solid var(--tf-glass-border) !important;
  box-shadow: var(--tf-glass-shadow) !important;
  backdrop-filter: blur(22px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.2) !important;
}

.tf-reviews-wrap--card::before {
  content: "“";
  position: absolute;
  top: 0.1rem;
  left: 1rem;
  font-family: var(--tf-display);
  font-size: clamp(4rem, 10vw, 5.5rem);
  line-height: 1;
  font-weight: 700;
  color: rgba(0, 113, 227, 0.12);
  pointer-events: none;
  user-select: none;
}

.tf-closing-band .tf-reviews__text {
  color: var(--tf-text) !important;
  font-size: clamp(1.12rem, 2.6vw, 1.48rem) !important;
  font-weight: 600 !important;
  letter-spacing: -0.022em;
  line-height: 1.42 !important;
}

.tf-closing-band .tf-reviews__meta {
  color: var(--tf-muted) !important;
}

.tf-closing-band .tf-reviews__stars {
  color: var(--tf-accent) !important;
}

.tf-closing-band .tf-reviews__btn {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.55);
  color: var(--tf-text);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.tf-closing-band .tf-reviews__btn:hover {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(0, 113, 227, 0.28);
}

.tf-closing-band .tf-reviews__dot {
  background: rgba(0, 0, 0, 0.14);
}

.tf-closing-band .tf-reviews__dot.is-active {
  background: var(--tf-accent);
}

.tf-reviews-wrap--card {
  width: 100%;
}

.tf-reviews-wrap--card .tf-reviews__text {
  max-width: none;
  position: relative;
  z-index: 1;
  text-align: center;
}

.tf-reviews-wrap--card .tf-reviews__slide {
  align-items: center;
}

.tf-reviews-wrap--card .tf-reviews__meta {
  text-align: center;
}

.tf-reviews-wrap--card .tf-reviews__nav {
  justify-content: center;
}

/* ─── Zielgruppen: Bento aus Glas ─── */
.tf-audience-intro {
  max-width: 42rem;
}

.tf-audience-intro .tf-section__subtitle {
  margin-top: 0.65rem;
}

.tf-audience-bento {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

@media (min-width: 640px) {
  .tf-audience-bento {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
  }
}

.tf-audience-card {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.9rem 1rem;
  min-height: 4.5rem;
  border-radius: 16px;
  background: var(--tf-glass-panel-bg);
  border: 1px solid var(--tf-glass-panel-border);
  box-shadow: var(--tf-glass-panel-shadow);
  backdrop-filter: var(--tf-glass-panel-blur);
  -webkit-backdrop-filter: var(--tf-glass-panel-blur);
  transition:
    transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.24s ease;
}

@media (hover: hover) and (pointer: fine) {
  .tf-audience-card:hover {
    transform: translateY(-3px);
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.03) inset,
      0 24px 56px rgba(0, 113, 227, 0.1);
  }
}

.tf-audience-card__icon {
  flex-shrink: 0;
  width: 2.15rem;
  height: 2.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.78);
  box-shadow: 0 2px 8px rgba(0, 113, 227, 0.06);
}

.tf-audience-card__label {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--tf-text);
  line-height: 1.25;
}

.tf-reveal-stagger.is-visible > .tf-audience-card:nth-child(1) { transition-delay: 0.04s; }
.tf-reveal-stagger.is-visible > .tf-audience-card:nth-child(2) { transition-delay: 0.09s; }
.tf-reveal-stagger.is-visible > .tf-audience-card:nth-child(3) { transition-delay: 0.14s; }
.tf-reveal-stagger.is-visible > .tf-audience-card:nth-child(4) { transition-delay: 0.19s; }
.tf-reveal-stagger.is-visible > .tf-audience-card:nth-child(5) { transition-delay: 0.24s; }
.tf-reveal-stagger.is-visible > .tf-audience-card:nth-child(6) { transition-delay: 0.29s; }

/* ─── Preise: eigene Zone, Intro + Karten in einer Glasfläche ─── */
#taktflo-landing #preise.tf-section--pricing::before,
#taktflo-landing #preise.tf-section--pricing::after,
#taktflo-landing #home-pricing-mount::before,
#taktflo-landing #home-pricing-mount::after {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

#taktflo-landing #home-pricing-mount,
#taktflo-landing #preise.tf-section--pricing {
  border-top: none !important;
  box-shadow: none !important;
}

.tf-pricing-zone {
  padding: clamp(1.35rem, 3vw, 1.85rem);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.52);
  border: 1px solid rgba(255, 255, 255, 0.82);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.03) inset,
    0 20px 56px rgba(0, 113, 227, 0.08);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
}

.tf-pricing-intro {
  max-width: 42rem;
  margin-bottom: clamp(1.15rem, 2.5vw, 1.5rem);
}

.tf-pricing-intro .tf-section__subtitle--left {
  margin-top: 0.65rem;
}

.tf-pricing-zone .tf-pricing-home {
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.tf-pricing-zone .tf-pricing-home .tf-pricing--embed .tf-price-card--link {
  background: rgba(255, 255, 255, 0.78) !important;
  border: 1px solid rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04) !important;
}

.tf-pricing-zone .tf-pricing-home .tf-pricing--embed .tf-price-card--featured {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(0, 113, 227, 0.22) !important;
  box-shadow:
    0 0 0 1px rgba(0, 113, 227, 0.08),
    0 12px 32px rgba(0, 113, 227, 0.1) !important;
}

/* ─── Mobile ─── */
@media (max-width: 559px) {
  .tf-reviews-stack,
  .tf-platforms-unified .tf-platforms-intro,
  .tf-audience-intro,
  .tf-pricing-intro {
    max-width: none;
  }

  .tf-platforms-foot .tf-devices-overlap__hint,
  .tf-devices-browser-info--card {
    text-align: center;
  }

  .tf-devices-browser-info--card .tf-devices-browser-info__list {
    justify-content: center;
  }

  .tf-audience-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .tf-audience-card:hover {
    transform: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .tf-glass,
  .tf-closing-stage,
  .tf-audience-bento,
  .tf-audience-card,
  .tf-pricing-zone {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.94);
  }
}

/* ─── CTA: kräftigerer Blauton — hebt sich vom Seiten-Canvas ab ─── */
#taktflo-landing .tf-section--cta.tf-section--cinema-cta {
  position: relative;
  margin-top: 0 !important;
  padding-block: clamp(4rem, 9vw, 6.5rem) !important;
  background:
    radial-gradient(ellipse 90% 80% at 50% 0%, rgba(0, 113, 227, 0.1), transparent 58%),
    linear-gradient(
      165deg,
      #c5d4e8 0%,
      #b0c4de 42%,
      #9eb5d0 100%
    ) !important;
  border-top: 1px solid rgba(15, 23, 42, 0.06) !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.05) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 12px 40px rgba(15, 23, 42, 0.06) !important;
  overflow: hidden;
}

#taktflo-landing .tf-section--cta .tf-cinema-scene--cta {
  display: none !important;
}

#taktflo-landing .tf-section--cta .tf-cta {
  position: relative;
  z-index: 1;
}

#taktflo-landing .tf-section--cta .tf-eyebrow {
  text-align: center;
  color: var(--tf-accent) !important;
}

#taktflo-landing .tf-section--cta .tf-cta__title {
  color: var(--tf-text) !important;
  text-shadow: none !important;
}

#taktflo-landing .tf-section--cta .tf-cta__text {
  color: var(--tf-muted) !important;
  text-shadow: none !important;
}

#taktflo-landing .tf-section--cta .tf-cta__btns .tf-btn--primary {
  box-shadow:
    0 4px 16px rgba(0, 113, 227, 0.28),
    0 0 0 1px rgba(0, 113, 227, 0.12);
}

/* ─── Kontakt: Glas-Panel, nur Formular ─── */
#taktflo-landing .tf-section--contact {
  padding-block: clamp(2.5rem, 5vw, 4rem) !important;
}

.tf-contact-panel {
  max-width: 52rem;
  margin-inline: auto;
  border-radius: 24px;
  padding: clamp(1.35rem, 3vw, 1.85rem) clamp(1.25rem, 3vw, 1.75rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.tf-contact-panel__head {
  margin-bottom: clamp(1.1rem, 2.5vw, 1.45rem);
  max-width: 36rem;
  width: 100%;
  margin-inline: auto;
  text-align: center;
}

.tf-contact-panel__head .tf-eyebrow,
.tf-contact-panel__head .tf-section__title {
  text-align: center !important;
  margin-inline: auto !important;
}

.tf-contact-panel__lead {
  margin: 0.55rem auto 0;
  max-width: 32rem;
  font-size: clamp(0.98rem, 2vw, 1.06rem);
  line-height: 1.55;
  color: var(--tf-muted);
}

.tf-contact-card {
  max-width: 28rem;
  width: 100%;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.55rem;
  padding: clamp(1rem, 2.5vw, 1.2rem);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.05);
  backdrop-filter: blur(14px) saturate(1.12);
  -webkit-backdrop-filter: blur(14px) saturate(1.12);
}

.tf-contact-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 12px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--tf-accent);
  background: rgba(0, 113, 227, 0.1);
  border: 1px solid rgba(0, 113, 227, 0.14);
}

.tf-contact-card__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--tf-text);
}

.tf-contact-card__text {
  margin: 0;
  flex: 1;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--tf-muted);
}

.tf-contact-panel.is-visible .tf-contact-card {
  animation: tfContactCardIn 1.15s cubic-bezier(0.19, 1, 0.22, 1) 0.12s both;
}

@keyframes tfContactCardIn {
  from {
    opacity: 0;
    transform: translate3d(0, 28px, 0) scale(0.985);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

/* ─── Footer: Lesbarkeit auf hellem Verlauf ─── */
#taktflo-landing .tf-footer,
#taktflo-landing > footer.tf-footer {
  position: relative;
  z-index: 1;
  color: #1d1d1f !important;
  background: rgba(228, 232, 240, 0.92) !important;
  border-top: 1px solid rgba(15, 23, 42, 0.1) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

#taktflo-landing .tf-footer__about,
#taktflo-landing .tf-footer__cta p {
  color: #51565f !important;
}

#taktflo-landing .tf-footer__cols a,
#taktflo-landing .tf-footer__cols a:link,
#taktflo-landing .tf-footer__cols a:visited {
  color: #3d4350 !important;
}

#taktflo-landing .tf-footer__cols strong {
  color: #1d1d1f !important;
}

#taktflo-landing .tf-footer__cols a:hover,
#taktflo-landing .tf-footer__cols a:focus-visible {
  color: #0071e3 !important;
}

/* Footer-Navigation: vertikal wie Spalte „Rechtliches“ */
#taktflo-landing .tf-footer__cols .tf-nav--footer {
  display: block;
  margin: 0;
}

#taktflo-landing .tf-footer__cols .tf-nav--footer a {
  display: block;
  padding: 0.2rem 0;
  font-size: 0.9rem;
}

#taktflo-landing .tf-footer__copy {
  color: #5c6578 !important;
}

#taktflo-landing .tf-footer .tf-logo__text {
  color: #1d1d1f !important;
}

/* Footer mobil: kürzer — Branding oben, darunter Links + CTA nebeneinander */
@media (max-width: 899.98px) {
  #taktflo-landing .tf-footer {
    padding-block: 1.15rem 0.9rem !important;
  }

  #taktflo-landing .tf-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(8.75rem, 36%);
    gap: 0.85rem 0.65rem;
    align-items: start;
  }

  #taktflo-landing .tf-footer__grid > div:first-child {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.45rem 0.75rem;
  }

  #taktflo-landing .tf-logo--footer {
    margin-bottom: 0;
  }

  #taktflo-landing .tf-logo--footer .tf-logo__img {
    height: 46px;
    max-width: 140px;
  }

  #taktflo-landing .tf-footer__about {
    flex: 1 1 10rem;
    max-width: none;
    margin: 0.1rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.42;
  }

  #taktflo-landing .tf-footer__cols {
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem 0.6rem;
    min-width: 0;
  }

  #taktflo-landing .tf-footer__cols strong {
    margin-bottom: 0.35rem;
    font-size: 0.78rem;
  }

  #taktflo-landing .tf-footer__cols a,
  #taktflo-landing .tf-footer__cols .tf-nav--footer a {
    font-size: 0.8125rem;
    padding: 0.1rem 0;
    line-height: 1.35;
  }

  #taktflo-landing .tf-footer__cta {
    align-self: end;
    text-align: right;
  }

  #taktflo-landing .tf-footer__cta p {
    margin-bottom: 0.45rem;
    font-size: 0.78rem;
  }

  #taktflo-landing .tf-footer__cta .tf-btn {
    width: 100%;
    min-height: 44px;
    padding-inline: 0.75rem;
    font-size: 0.875rem;
    white-space: normal;
    text-align: center;
    justify-content: center;
  }

  #taktflo-landing .tf-footer__copy {
    margin-top: 0.85rem !important;
    padding-top: 0.6rem !important;
  }

  #taktflo-landing main > .tf-digitize,
  #taktflo-landing main > section.tf-section:not(.tf-section--cta),
  #taktflo-landing .tf-closing-band > section.tf-section,
  #taktflo-landing #preise.tf-section--pricing {
    padding-top: 0 !important;
    padding-bottom: var(--tf-section-gap) !important;
  }

  #taktflo-landing main > .tf-digitize {
    padding-top: clamp(2.75rem, 7vw, 3.75rem) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #taktflo-landing::before {
    position: absolute;
  }

  .tf-contact-panel.is-visible .tf-contact-card {
    animation: none;
  }
}

/* ─── Futuristischer Scroll-Reveal (nicht für Feature-Flow-Slots) ─── */
html.tf-reveal-js .tf-reveal.tf-reveal--future:not(.is-visible):not(.tf-feature-flow__slot):not(
    .tf-section__title
  ):not(.tf-digitize__title):not(.tf-cta__title):not(.tf-promo-soon__title) {
  opacity: 0;
  transform: translate3d(0, 36px, 0) scale(0.982);
  filter: blur(12px);
  transition:
    transform 1.05s cubic-bezier(0.19, 1, 0.22, 1),
    opacity 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.08s,
    filter 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.05s;
}

html.tf-reveal-js .tf-reveal.tf-reveal--future.is-visible:not(.tf-feature-flow__slot):not(
    .tf-section__title
  ):not(.tf-digitize__title):not(.tf-cta__title):not(.tf-promo-soon__title) {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
  transition:
    transform 1.05s cubic-bezier(0.19, 1, 0.22, 1),
    opacity 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.08s,
    filter 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.05s;
}

html.tf-reveal-js #taktflo-landing .tf-section__title.tf-reveal--future:not(.is-visible),
html.tf-reveal-js #taktflo-landing .tf-section__title.tf-reveal--future.is-visible,
html.tf-reveal-js #taktflo-landing .tf-digitize__title.tf-reveal--future:not(.is-visible),
html.tf-reveal-js #taktflo-landing .tf-digitize__title.tf-reveal--future.is-visible,
html.tf-reveal-js #taktflo-landing .tf-cta__title.tf-reveal--future:not(.is-visible),
html.tf-reveal-js #taktflo-landing .tf-cta__title.tf-reveal--future.is-visible,
html.tf-reveal-js #taktflo-landing .tf-promo-soon__title.tf-reveal--future:not(.is-visible),
html.tf-reveal-js #taktflo-landing .tf-promo-soon__title.tf-reveal--future.is-visible {
  filter: none;
  transition:
    transform 1.05s cubic-bezier(0.19, 1, 0.22, 1),
    opacity 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.08s;
}

html.tf-reveal-js .tf-reveal.tf-reveal--future.tf-reveal--delay-1:not(.is-visible),
html.tf-reveal-js .tf-reveal.tf-reveal--future.tf-reveal--delay-1.is-visible {
  transition-delay: 0.16s, 0.2s, 0.18s;
}

html.tf-reveal-js .tf-reveal.tf-reveal--future.tf-reveal--delay-2:not(.is-visible),
html.tf-reveal-js .tf-reveal.tf-reveal--future.tf-reveal--delay-2.is-visible {
  transition-delay: 0.3s, 0.34s, 0.32s;
}

/* Schritte + Zielgruppen: gestaffelt, langsamer */
html.tf-reveal-js #taktflo-landing .tf-reveal-stagger:not(.is-visible) > .tf-step,
html.tf-reveal-js #taktflo-landing .tf-reveal-stagger:not(.is-visible) > .tf-audience-card {
  opacity: 0;
  transform: translate3d(0, 32px, 0) scale(0.975);
  filter: blur(10px);
  transition:
    transform 1.05s cubic-bezier(0.19, 1, 0.22, 1),
    opacity 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.08s,
    filter 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.05s;
}

html.tf-reveal-js #taktflo-landing .tf-reveal-stagger.is-visible > .tf-step,
html.tf-reveal-js #taktflo-landing .tf-reveal-stagger.is-visible > .tf-audience-card {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}

html.tf-reveal-js #taktflo-landing .tf-reveal-stagger.is-visible > .tf-step:nth-child(1) {
  transition-delay: 0.12s, 0.16s, 0.14s;
}
html.tf-reveal-js #taktflo-landing .tf-reveal-stagger.is-visible > .tf-step:nth-child(2) {
  transition-delay: 0.28s, 0.32s, 0.3s;
}
html.tf-reveal-js #taktflo-landing .tf-reveal-stagger.is-visible > .tf-step:nth-child(3) {
  transition-delay: 0.44s, 0.48s, 0.46s;
}

html.tf-reveal-js #taktflo-landing .tf-reveal-stagger.is-visible > .tf-audience-card:nth-child(1) {
  transition-delay: 0.1s, 0.14s, 0.12s;
}
html.tf-reveal-js #taktflo-landing .tf-reveal-stagger.is-visible > .tf-audience-card:nth-child(2) {
  transition-delay: 0.22s, 0.26s, 0.24s;
}
html.tf-reveal-js #taktflo-landing .tf-reveal-stagger.is-visible > .tf-audience-card:nth-child(3) {
  transition-delay: 0.34s, 0.38s, 0.36s;
}
html.tf-reveal-js #taktflo-landing .tf-reveal-stagger.is-visible > .tf-audience-card:nth-child(4) {
  transition-delay: 0.46s, 0.5s, 0.48s;
}
html.tf-reveal-js #taktflo-landing .tf-reveal-stagger.is-visible > .tf-audience-card:nth-child(5) {
  transition-delay: 0.58s, 0.62s, 0.6s;
}
html.tf-reveal-js #taktflo-landing .tf-reveal-stagger.is-visible > .tf-audience-card:nth-child(6) {
  transition-delay: 0.7s, 0.74s, 0.72s;
}

/* Hero: Prozess-Kacheln gestaffelt */
html.tf-reveal-js #taktflo-landing .tf-hero .tf-reveal-stagger:not(.is-visible) > .tf-hero-process__step {
  opacity: 0;
  transform: translate3d(0, 32px, 0) scale(0.975);
  filter: blur(10px);
  transition:
    transform 1.05s cubic-bezier(0.19, 1, 0.22, 1),
    opacity 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.08s,
    filter 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.05s;
}

html.tf-reveal-js #taktflo-landing .tf-hero .tf-reveal-stagger.is-visible > .tf-hero-process__step {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}

html.tf-reveal-js #taktflo-landing .tf-hero .tf-reveal-stagger.is-visible > .tf-hero-process__step:nth-child(1) {
  transition-delay: 0.1s, 0.14s, 0.12s;
}
html.tf-reveal-js #taktflo-landing .tf-hero .tf-reveal-stagger.is-visible > .tf-hero-process__step:nth-child(2) {
  transition-delay: 0.26s, 0.3s, 0.28s;
}
html.tf-reveal-js #taktflo-landing .tf-hero .tf-reveal-stagger.is-visible > .tf-hero-process__step:nth-child(3) {
  transition-delay: 0.42s, 0.46s, 0.44s;
}

html.tf-reveal-js #taktflo-landing .tf-hero .tf-reveal-stagger:not(.is-visible) > .tf-hero-process__step {
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  html.tf-reveal-js .tf-reveal.tf-reveal--future:not(.is-visible),
  html.tf-reveal-js #taktflo-landing .tf-reveal-stagger:not(.is-visible) > .tf-step,
  html.tf-reveal-js #taktflo-landing .tf-reveal-stagger:not(.is-visible) > .tf-audience-card,
  html.tf-reveal-js #taktflo-landing .tf-hero .tf-reveal-stagger:not(.is-visible) > .tf-hero-process__step {
    filter: none;
    transform: none;
    transition-delay: 0s !important;
  }
}