@charset "UTF-8";


/* =========================================================
   TJ Media – Global Style.css (FINAL / STABIL)
   ========================================================= */

/* ---------- Variablen ---------- */
body {
  font-family: Inter, system-ui, sans-serif;
}

:root {
  --tj-blue: #0b1e39;
  --tj-cyan: #23c3c9;
  --tj-bg: #020617;
  --tj-text: #e5e7eb;
  --tj-muted: #9ca3af;

  --tj-radius-lg: 1rem;
  --tj-radius-xl: 1.25rem;
  --tj-shadow-soft: 0 18px 40px rgba(15, 23, 42, 0.75);

  /* Header / Anchor */
  --tj-header-h: 88px;     /* wird per JS exakt gesetzt */
  --tj-anchor-gap: -50px;   /* Luft unter Header */
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: radial-gradient(circle at top, #020617 0, #020617 35%, #020617 100%);
  color: var(--tj-text);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---------- Layout ---------- */
body {
  display: flex;
  flex-direction: column;
  padding-top: var(--tj-header-h); /* Platz für fixen Header */
}

main {
  flex: 1;
}

/* ---------- Scroll / Anker ---------- */
html {
  scroll-padding-top: calc(var(--tj-header-h) + var(--tj-anchor-gap));
}

section[id] {
  scroll-margin-top: calc(var(--tj-header-h) + var(--tj-anchor-gap));
}

/* ---------- Header ---------- */
#tjHeader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2147483647;
  isolation: isolate;
}

/* ---------- Links ---------- */
a {
  color: var(--tj-cyan);
  text-decoration: none;
  transition: color 0.15s ease, opacity 0.15s ease;
}

a:hover {
  text-decoration: underline;
}

/* ---------- Headlines ---------- */
section h1,
section h2,
section h3 {
  letter-spacing: 0.02em;
}

section h2 {
  font-size: 1.6rem;
  margin-bottom: 0.25rem;
}

/* ---------- Glass Cards ---------- */
.glass {
  background: linear-gradient(
    135deg,
    rgba(15, 23, 42, 0.98),
    rgba(15, 23, 42, 0.92)
  );
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* ---------- Buttons ---------- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1.3rem;
  border-radius: 999px;
  border: none;
  background: var(--tj-cyan);
  color: #020617;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(35, 195, 201, 0.35);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.btn-primary:hover {
  background: #35d4da;
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(35, 195, 201, 0.45);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.2rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.7);
  background: transparent;
  color: var(--tj-text);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.btn-secondary:hover {
  background: rgba(15, 23, 42, 0.9);
  border-color: var(--tj-cyan);
}

/* ---------- Badges ---------- */
.badge-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.4);
  font-size: 0.7rem;
  color: #e5e7eb;
  gap: 0.35rem;
}

/* ---------- Footer ---------- */
#site-footer a:hover {
  text-decoration: none;
}

/* ---------- Social Circles ---------- */
.social-circle {
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  background: var(--tj-cyan);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 0 0 0 rgba(35,195,201,0);
}

.social-circle img {
  width: 20px;
  height: 20px;
  filter: brightness(0) saturate(100%);
}

.social-circle:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 25px rgba(35,195,201,0.85);
}

/* ===== FAQ Accordion (robust & simpel) ===== */

.faq-answer {
  display: none;
}

.faq-item.is-open .faq-answer {
  display: block;
}

.faq-item button svg {
  transition: transform 0.2s ease;
}

.faq-item.is-open button svg {
  transform: rotate(180deg);
}


/* ---------- Calendly (Mobile Fix) ---------- */
.calendly-container {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.calendly-inline-widget {
  width: 100% !important;
  min-width: 0 !important;
  height: 640px;
}

.calendly-inline-widget iframe {
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  display: block !important;
}

@media (max-width: 640px) {
  .calendly-container {
    min-height: 95vh;
  }

  .calendly-inline-widget {
    height: 95vh !important;
    min-height: 900px !important;
  }

  @supports (height: 100dvh) {
    .calendly-container {
      min-height: 95dvh;
    }
    .calendly-inline-widget {
      height: 95dvh !important;
    }
  }

  elevenlabs-convai {
    bottom: 120px !important;
  }
}

/* ---------- Mobile Headlines ---------- */
@media (max-width: 768px) {
  section h2 {
    font-size: 1.4rem;
  }
}

/* Billing Toggle: alter Preis als "vorher" */
.price-base.is-old {
  color: rgba(148, 163, 184, 0.85); /* slate-400-ish */
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(148, 163, 184, 0.7);
}

/* Trust carousel: hide scrollbar + subtle focus scale */
.trust-scroller { scrollbar-width: none; -ms-overflow-style: none; }
.trust-scroller::-webkit-scrollbar { display: none; }

.trust-card { transition: transform 180ms ease, opacity 180ms ease; opacity: .85; }
.trust-card.is-active { transform: scale(1.02); opacity: 1; }

/* =========================
   TRUSTFLOW (Coverflow) – FINAL (Business)
   ========================= */

.trustflow { position: relative; }

.trustflow-stage{
  position: relative;
  padding: 0;
}

.trustflow-slides{
  position: relative;
  height: 300px;
  margin-top: 12px;
  overflow: hidden;                 /* Bühne clippt sauber */
  border-radius: 22px;              /* optischer Rahmen fürs ganze Coverflow */
}

/* Pfeile: links/rechts, mittig, hochwertig */
.trustflow-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 80;

  width: 46px;
  height: 46px;
  border-radius: 999px;

  border: 1px solid rgba(255,255,255,.14);
  background: rgba(2,6,23,.70);
  color: rgba(226,232,240,.95);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  box-shadow:
    0 10px 30px rgba(0,0,0,.35),
    0 0 0 1px rgba(35,195,201,.05);
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}
.trustflow-arrow:hover{
  transform: translateY(-50%) scale(1.05);
  border-color: rgba(35,195,201,.35);
  background: rgba(2,6,23,.82);
}
.trustflow-prev{ left: 10px; }
.trustflow-next{ right: 10px; }

/* Cards: gleiche Höhe, opak, sauber */
.trustflow-card{
  position: absolute;
  top: 18px;
  left: 50%;
  margin: 0;

  width: min(760px, calc(100% - 120px)); /* Platz für Pfeile */
  height: 264px;                          /* FIX: alle gleich hoch */

  padding: 18px 18px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);

  background: #050B1A;                    /* opak */
  box-shadow: 0 18px 50px rgba(0,0,0,.45);

  display: flex;                          /* Note sauber nach unten */
  flex-direction: column;

  transform: translateX(-50%) scale(.98);
  transition:
    transform 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    filter 220ms ease;
}

/* Content spacing */
.trustflow-cardtitle{
  margin: 10px 0 0;
  font-size: 19px;
  font-weight: 750;
  color: #fff;
}
.trustflow-text{
  margin-top: 8px;
  font-size: 15.5px;
  line-height: 1.55;
  color: rgba(226,232,240,.92);
}
.trustflow-note{
  margin-top: auto;                      /* FIX: bleibt unten */
  font-size: 12.5px;
  color: rgba(148,163,184,.9);
}

/* Icons */
.trustflow-icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(15,23,42,.55);
  color: rgba(226,232,240,.9);
}
.trustflow-icon--emerald{ border-color: rgba(34,197,94,.30); background: rgba(34,197,94,.10); color: rgba(187,247,208,.95); }
.trustflow-icon--cyan{ border-color: rgba(34,211,238,.30); background: rgba(34,211,238,.08); color: rgba(165,243,252,.95); }
.trustflow-icon--slate{ border-color: rgba(139,92,246,.30); background: rgba(139,92,246,.10); color: rgba(221,214,254,.95); }

/* Accent words */
.trustflow-accent{ font-weight: 750; letter-spacing: .1px; }
.trustflow-accent--emerald{ color: rgba(187,247,208,.95); }
.trustflow-accent--cyan{ color: rgba(165,243,252,.95); }
.trustflow-accent--violet{ color: rgba(221,214,254,.95); }

/* STATES: NICHT per opacity dimmen -> per filter */
.trustflow-card.is-center{
  transform: translateX(-50%) scale(1.00);
  border-color: rgba(35,195,201,.30);
  box-shadow:
    0 18px 55px rgba(0,0,0,.55),
    0 0 0 1px rgba(35,195,201,.08),
    0 0 34px rgba(35,195,201,.12);
  filter: none;
  z-index: 30;
}
.trustflow-card.is-center:hover{
  transform: translateX(-50%) scale(1.03);
  border-color: rgba(35,195,201,.40);
}

.trustflow-card.is-left{
  transform: translateX(calc(-50% - 220px)) scale(.86);
  filter: brightness(.65) saturate(.80);
}

.trustflow-card.is-right{
  transform: translateX(calc(-50% + 220px)) scale(.86);
  filter: brightness(.65) saturate(.80);
}

.trustflow-card.is-left,
.trustflow-card.is-right{
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}


/* Mobile tuning */
@media (max-width: 900px){
  .trustflow-card.is-left{  transform: translateX(calc(-50% - 160px)) scale(.93); }
  .trustflow-card.is-right{ transform: translateX(calc(-50% + 160px)) scale(.93); }
}
@media (max-width: 640px){
  .trustflow-slides{ height: 400px; }
  .trustflow-card{
    top: 16px;
    height: 320px;
    width: calc(100% - 96px);
  }
  .trustflow-card.is-left{
    transform: translateX(calc(-50% - 120px)) scale(.90);
  }
  .trustflow-card.is-right{
    transform: translateX(calc(-50% + 120px)) scale(.90);
  }
}

/* Dots (falls du sie aktiv nutzt) */
.trustflow-dots{
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 10px;
}
.trustflow-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.18);
}
.trustflow-dot.is-active{
  background: rgba(35,195,201,.95);
  border-color: rgba(35,195,201,.55);
}

.hdr-search{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px; height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color:#fff;
  text-decoration:none;
  margin-left:10px;
}
.hdr-search:hover{
  background: rgba(255,255,255,.10);
}
.hdr-search:focus{
  outline:2px solid rgba(35,195,201,.75);
  outline-offset:2px;
}

/* 1) Standard: Gate-Button aus (wichtig, damit Cookie-Banner nicht blockiert) */
#tjSupportGateBtn { display: none !important; }

/* 2) Nach Consent-Speicherung: Gate-Button an (Fallback, falls comfort nicht aktiv) */
body.tj-consent-ok #tjSupportGateBtn { display: inline-flex !important; }

/* 3) Sobald Komfort aktiv: Gate-Button wieder aus (weil ElevenLabs übernimmt) */
body.tj-consent-ok.tj-comfort-ok #tjSupportGateBtn { display: none !important; }