/* =========================================================================
   TERMINJÄGER – Stylesheet
   Struktur & Animationslogik nach dem Vorbild fachkrafthaus.de,
   eigenes Farbschema (Nacht/Signal-Orange) und eigene Inhalte.
   ========================================================================= */

/* ---------- Farbschema & Tokens ---------- */
:root{
  --tj-night:      #111A23;   /* dunkle Sektionen */
  --tj-night-2:    #0B1219;
  --tj-ink:        #101820;   /* Fließtext dunkel */
  --tj-muted:      #5F6B78;
  --tj-line:       #E7E2DA;
  --tj-sand:       #FBF7F2;   /* heller Seitenhintergrund */
  --tj-white:      #FFFFFF;

  --tj-orange:     #FF6A2B;   /* Primärakzent */
  --tj-orange-dk:  #E4551A;
  --tj-amber:      #FFB020;   /* Sekundärakzent */
  --tj-green:      #17B26A;

  --tj-shell:      1200px;
  --tj-r:          18px;

  --tj-ease:       cubic-bezier(.22,1,.36,1);
  --tj-bounce:     cubic-bezier(.34,1.56,.64,1);

  --font-h:        'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-b:        'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-s:        'Instrument Serif', Georgia, serif;
}

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

html{
  scroll-behavior:smooth;
  scroll-padding-top:88px;   /* Zielbereiche rutschen nicht unter den Sticky-Header */
  overflow-x:clip;           /* kein seitliches Verrutschen auf dem Handy */
}

body{
  margin:0;
  background:var(--tj-sand);
  color:var(--tj-ink);
  font-family:var(--font-b);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  /* clip statt hidden: verhindert seitliches Überlaufen, ohne den Body zu
     einem eigenen Scroll-Container zu machen (sonst greifen Ankersprünge nicht) */
  overflow-x:clip;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

h1,h2,h3{ font-family:var(--font-h); font-weight:700; letter-spacing:-.02em; line-height:1.12; margin:0; }
h1{ font-size:clamp(38px,5.6vw,68px); }
h2{ font-size:clamp(28px,3.6vw,46px); }
h3{ font-size:clamp(18px,1.6vw,21px); }
h1 em, h2 em{ font-family:var(--font-s); font-style:italic; font-weight:400; letter-spacing:0; }
h1 em{ color:var(--tj-orange); }
h2 em{ color:var(--tj-orange); }

.tj-shell{ width:min(100% - 40px, var(--tj-shell)); margin-inline:auto; }
.tj-sec{ padding:clamp(64px,8vw,120px) 0; position:relative; }
.tj-sec--flush{ padding-bottom:0; }
.tj-center{ text-align:center; }

/* ---------- Buttons ---------- */
.tj-btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-h); font-weight:600; font-size:15px;
  padding:13px 24px; border-radius:999px; border:1px solid transparent;
  cursor:pointer; position:relative; overflow:hidden;
  transition:transform .35s var(--tj-ease), box-shadow .35s ease, background .3s ease, color .3s ease;
}
.tj-btn--lg{ padding:16px 30px; font-size:16px; }
.tj-btn--solid{
  color:#fff;
  background:linear-gradient(135deg,var(--tj-orange),var(--tj-orange-dk));
  box-shadow:0 10px 24px -10px rgba(255,106,43,.75);
}
.tj-btn--solid::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.35) 50%,transparent 60%);
  transform:translateX(-130%); transition:transform .7s var(--tj-ease);
}
.tj-btn--solid:hover{ transform:translateY(-2px); box-shadow:0 16px 32px -12px rgba(255,106,43,.85); }
.tj-btn--solid:hover::after{ transform:translateX(130%); }
.tj-btn--ghost{ border-color:rgba(16,24,32,.18); color:var(--tj-ink); background:transparent; }
.tj-btn--ghost:hover{ border-color:var(--tj-orange); color:var(--tj-orange); transform:translateY(-2px); }

/* ---------- Eyebrow / Live-Punkt ---------- */
.tj-eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-h); font-size:11.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--tj-orange-dk);
  background:rgba(255,106,43,.10); border:1px solid rgba(255,106,43,.28);
  padding:7px 15px; border-radius:999px; margin-bottom:22px;
}
.tj-eyebrow--light{ color:var(--tj-amber); background:rgba(255,176,32,.12); border-color:rgba(255,176,32,.35); }
.tj-dotlive{
  width:7px; height:7px; border-radius:50%; background:var(--tj-orange);
  animation:tjBlink 1.4s ease-in-out infinite;
}
@keyframes tjBlink{ 0%,100%{opacity:.25} 50%{opacity:1} }

/* =========================================================================
   BILD-PLATZHALTER
   ========================================================================= */
.ph{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; text-align:center; padding:14px;
  background:
    repeating-linear-gradient(45deg, rgba(16,24,32,.028) 0 10px, transparent 10px 20px),
    var(--tj-white);
  border:1.5px dashed rgba(16,24,32,.22);
  border-radius:14px; color:var(--tj-muted); overflow:hidden;
}
.ph::before{
  content:"Bild " attr(data-ph);
  font-family:var(--font-h); font-size:9.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--tj-orange);
  position:absolute; top:8px; left:10px;
}
.ph__t{ font-size:12px; line-height:1.35; font-weight:500; max-width:92%; }
.ph__f{ font-size:10.5px; opacity:.7; }
.tj-dark .ph{
  background:repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 10px, transparent 10px 20px), rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.24); color:rgba(255,255,255,.62);
}
.tj-dark .ph::before{ color:var(--tj-amber); }

.ph--av{ width:42px; height:42px; border-radius:11px; padding:0; flex:none; }
.ph--av::before{ display:none; }
.ph--av .ph__t{ font-size:8px; letter-spacing:.02em; }
.ph--logo{ width:150px; height:56px; border-radius:10px; flex:none; }
.ph--logo::before{ font-size:8px; top:5px; left:7px; }
.ph--logo .ph__t{ font-size:11px; }
.ph--sq{ aspect-ratio:1/1; }
.ph--tall{ aspect-ratio:4/5; }
.ph--wide{ aspect-ratio:16/10; }
.ph--por{ aspect-ratio:4/5; border-radius:16px; }
.ph--map{ aspect-ratio:6/7; border-radius:20px; }
.ph--orb{ width:100%; height:100%; border-radius:50%; padding:4px; }
.ph--orb::before{ display:none; }
.ph--orb .ph__t{ font-size:9px; }
.ph--center{ width:100%; aspect-ratio:1/1; border-radius:50%; }
.ph--center::before{ display:none; }

/* =========================================================================
   SCROLL-REVEAL  (Fade + Slide + Blur, wie im Original)
   ========================================================================= */
.tj-rev{
  opacity:0; transform:translateY(28px); filter:blur(6px);
  transition:opacity .8s var(--tj-ease), transform .8s var(--tj-ease), filter .8s ease;
}
.tj-rev.is-in{ opacity:1; transform:none; filter:none; }
.tj-rev:nth-child(2){ transition-delay:.06s; }
.tj-rev:nth-child(3){ transition-delay:.12s; }
.tj-rev:nth-child(4){ transition-delay:.18s; }
.tj-rev:nth-child(5){ transition-delay:.24s; }

/* =========================================================================
   HEADER
   ========================================================================= */
.tj-head{
  position:sticky; top:0; z-index:60;
  background:rgba(251,247,242,.82);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.tj-head.is-stuck{ border-color:var(--tj-line); box-shadow:0 8px 30px -20px rgba(16,24,32,.4); }
.tj-head__in{ display:flex; align-items:center; justify-content:space-between; gap:20px; height:74px; }

.tj-logo{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-h); font-weight:700; font-size:19px; letter-spacing:-.02em; }
.tj-logo__mark{ width:28px; height:28px; color:var(--tj-orange); display:block; }
.tj-logo__mark svg{ width:100%; height:100%; transition:transform .4s var(--tj-ease); }
.tj-logo:hover .tj-logo__mark svg{ transform:translateY(-2px); }
.tj-logo__txt em{ font-family:var(--font-s); font-style:italic; font-weight:400; color:var(--tj-orange); }

.tj-nav{ display:flex; gap:28px; margin-left:auto; }
.tj-nav a{
  font-size:14.5px; font-weight:500; color:var(--tj-ink); position:relative; padding:4px 0;
  transition:color .3s ease;
}
.tj-nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0; border-radius:2px;
  background:linear-gradient(90deg,var(--tj-amber),var(--tj-orange));
  transition:width .35s var(--tj-ease);
}
.tj-nav a:hover{ color:var(--tj-orange); }
.tj-nav a:hover::after{ width:100%; }

.tj-head__cta{ display:flex; align-items:center; gap:12px; }
.tj-burger{ display:none; width:42px; height:38px; border:1px solid var(--tj-line); border-radius:10px; background:#fff; padding:9px 10px; flex-direction:column; justify-content:space-between; cursor:pointer; }
.tj-burger span{ display:block; height:2px; background:var(--tj-ink); border-radius:2px; transition:transform .3s var(--tj-ease), opacity .2s; }
.tj-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.tj-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.tj-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* =========================================================================
   HERO
   ========================================================================= */
.tj-hero{ position:relative; padding:clamp(48px,6vw,86px) 0 clamp(60px,7vw,100px); overflow:hidden; }
.tj-hero::before{
  content:""; position:absolute; width:820px; height:820px; top:-460px; right:-220px; pointer-events:none;
  border-radius:50%; background:radial-gradient(circle, rgba(255,106,43,.16), transparent 62%);
}
.tj-hero__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,64px); align-items:center; position:relative; }
.tj-lead{ font-size:clamp(16px,1.25vw,18.5px); color:var(--tj-muted); max-width:56ch; margin:20px 0 0; }
.tj-hero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }

.tj-hero__facts{ display:flex; flex-wrap:wrap; gap:32px; margin:44px 0 0; padding:26px 0 0; list-style:none; border-top:1px solid var(--tj-line); }
.tj-hero__facts strong{ display:block; font-family:var(--font-h); font-size:30px; font-weight:700; line-height:1; color:var(--tj-ink); }
.tj-hero__facts span{ font-size:13.5px; color:var(--tj-muted); }

/* ---------- Kandidaten-Bühne ---------- */
.tj-cards{ position:relative; max-width:620px; margin:0 auto; padding:28px 8px 8px; }
.tj-cards::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(circle, #D7CFC4 1px, transparent 1px);
  background-size:24px 24px; opacity:.5;
}
.tj-cards__grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; position:relative; }
.tj-col{ display:flex; flex-direction:column; gap:16px; animation:tjFloat 7s ease-in-out infinite; }
.tj-col--offset{ margin-top:54px; animation-delay:-3.5s; }
@keyframes tjFloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-6px) } }

.tj-card{
  background:var(--tj-white); border:1px solid var(--tj-line); border-radius:14px; padding:16px;
  box-shadow:0 1px 2px rgba(16,24,32,.06); position:relative; overflow:hidden;
  transition:transform .35s var(--tj-ease), box-shadow .35s ease, border-color .35s ease;
}
.tj-card:hover{ transform:translateY(-4px) scale(1.01); box-shadow:0 14px 30px -10px rgba(255,106,43,.28); border-color:rgba(255,106,43,.45); }
.tj-card--selected{ border:2px solid var(--tj-orange); background:#FFF6F1; }

/* Glanz-Sweep auf dem Top-Match */
.tj-card--selected::after{
  content:""; position:absolute; inset:-2px; pointer-events:none;
  background:linear-gradient(105deg,transparent 42%, rgba(255,255,255,.8) 50%, transparent 58%);
  transform:translateX(-130%);
}
.is-live .tj-card--selected::after{ animation:tjShine 6.5s ease-in-out 1.8s infinite; }
@keyframes tjShine{ 0%{transform:translateX(-130%)} 14%{transform:translateX(130%)} 100%{transform:translateX(130%)} }

/* Puls-Ring */
.is-live .tj-card--selected{ animation:tjRing 3.2s cubic-bezier(.4,0,.2,1) .9s infinite; }
@keyframes tjRing{
  0%{ box-shadow:0 0 0 0 rgba(255,106,43,.30) }
  45%{ box-shadow:0 0 0 14px rgba(255,106,43,0) }
  100%{ box-shadow:0 0 0 0 rgba(255,106,43,0) }
}

.tj-card__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.tj-card__id{ display:flex; align-items:center; gap:10px; min-width:0; }
.tj-card__name{ font-family:var(--font-h); font-weight:600; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Häkchen: poppt auf, Check zeichnet sich */
.tj-check{
  width:21px; height:21px; border-radius:50%; background:var(--tj-orange); flex:none;
  display:flex; align-items:center; justify-content:center; transform:scale(0); --d:0s;
}
.is-live .tj-check{ animation:tjPop .55s var(--tj-bounce) var(--d) forwards; }
@keyframes tjPop{ 0%{transform:scale(0)} 100%{transform:scale(1)} }
.tj-check svg{ width:12px; height:12px; stroke:#fff; stroke-width:3; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.tj-check path{ stroke-dasharray:24; stroke-dashoffset:24; }
.is-live .tj-check path{ animation:tjDraw .35s ease-out calc(var(--d) + .3s) forwards; }
@keyframes tjDraw{ to{ stroke-dashoffset:0 } }

.tj-card__tags{ margin-top:12px; display:flex; flex-direction:column; gap:6px; }
.tj-tag{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--tj-muted); line-height:1.35; }
.tj-tag svg{ width:14px; height:14px; flex:none; stroke:#9AA4AF; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.tj-tag--accent{ color:var(--tj-orange-dk); }
.tj-tag--accent svg{ stroke:var(--tj-orange-dk); }
.tj-tag--go{ color:var(--tj-green); }
.tj-tag--go svg{ stroke:var(--tj-green); }
.tj-num{ font-weight:700; }

/* Matching-Balken */
.tj-bar{ height:4px; background:rgba(255,106,43,.14); border-radius:2px; margin-top:10px; overflow:hidden; }
.tj-bar i{ display:block; height:100%; width:0; border-radius:2px; background:linear-gradient(90deg,var(--tj-amber),var(--tj-orange)); transition:width 1.4s var(--tj-ease); }
.tj-bar--lg{ height:8px; border-radius:4px; background:rgba(255,255,255,.12); margin-top:18px; }

/* Karten-Einblendung mit Blur */
.tj-reveal{
  opacity:0; transform:translateY(26px) scale(.96); filter:blur(8px);
  transition:opacity .8s var(--tj-ease) var(--d,0s), transform .8s var(--tj-ease) var(--d,0s), filter .8s ease var(--d,0s);
}
.is-go .tj-reveal{ opacity:1; transform:none; filter:none; }

/* Filter-Pill */
.tj-pillwrap{ position:absolute; left:50%; top:6px; transform:translateX(-50%); z-index:10; }
.tj-pill-float{ animation:tjFloat 5.5s ease-in-out -1.5s infinite; }
.tj-pill{
  display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--tj-line);
  border-radius:999px; padding:9px 17px; white-space:nowrap; font-size:13px; color:var(--tj-ink);
  box-shadow:0 10px 25px -5px rgba(16,24,32,.16), 0 4px 10px -6px rgba(16,24,32,.1);
}
.tj-pill svg{ width:15px; height:15px; stroke:var(--tj-orange); stroke-width:2; fill:none; }
.tj-ell i{ display:inline-block; width:3px; height:3px; border-radius:50%; background:var(--tj-muted); margin-left:2px; vertical-align:middle; animation:tjDot 1.2s infinite; }
.tj-ell i:nth-child(2){ animation-delay:.2s }
.tj-ell i:nth-child(3){ animation-delay:.4s }
@keyframes tjDot{ 0%,60%,100%{opacity:.25} 30%{opacity:1} }
.tj-pill__dot{ width:6px; height:6px; border-radius:50%; background:var(--tj-orange); animation:tjBlink 1.4s ease-in-out infinite; }

/* =========================================================================
   LOGO-MARQUEE
   ========================================================================= */
.tj-logos{ padding:clamp(40px,5vw,64px) 0; border-block:1px solid var(--tj-line); background:#fff; overflow:hidden; }
.tj-logos__label{ text-align:center; margin:0 0 26px; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--tj-muted); font-family:var(--font-h); font-weight:600; }
.tj-marquee{ position:relative; overflow:hidden; padding:8px 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.tj-marquee__track{ display:flex; gap:26px; width:max-content; animation:tjMarquee 42s linear infinite; }
.tj-marquee--rev .tj-marquee__track{ animation-direction:reverse; animation-duration:56s; }
.tj-marquee:hover .tj-marquee__track{ animation-play-state:paused; }
@keyframes tjMarquee{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

/* =========================================================================
   DUNKLE SEKTIONEN (Punktraster + Glow)
   ========================================================================= */
.tj-dark{ position:relative; background-color:var(--tj-night); color:#F4F1EC; overflow:hidden; }
.tj-dark::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(circle, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:26px 26px;
}
.tj-dark::after{
  content:""; position:absolute; width:640px; height:640px; top:-320px; left:-160px; pointer-events:none;
  border-radius:50%; background:radial-gradient(circle, rgba(255,106,43,.24), transparent 65%);
}
.tj-dark > *{ position:relative; z-index:1; }

.tj-sechead{ max-width:760px; margin:0 auto clamp(38px,5vw,64px); text-align:center; }
.tj-sechead p{ color:var(--tj-muted); font-size:17px; margin:18px 0 0; }
.tj-sechead--light h2{ color:#F7F4EF; }
.tj-sechead--light p{ color:rgba(244,241,236,.7); }

/* ---------- Vorteils-Karten ---------- */
.tj-acards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.tj-acard{
  position:relative; border-radius:20px; padding:34px 28px 32px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); overflow:hidden;
  transition:transform .4s var(--tj-ease), border-color .4s ease, background .4s ease;
}
.tj-acard:hover{ transform:translateY(-6px); border-color:rgba(255,106,43,.6); background:rgba(255,255,255,.08); }
.tj-ghostnum{
  position:absolute; top:6px; right:22px; font-family:var(--font-s); font-style:italic;
  font-size:78px; line-height:1; color:rgba(255,255,255,.08); user-select:none;
  transition:color .4s ease;
}
.tj-acard:hover .tj-ghostnum{ color:rgba(255,106,43,.28); }
.tj-chip{
  width:48px; height:48px; border-radius:14px; margin-bottom:22px; flex:none;
  background:rgba(255,106,43,.14); border:1px solid rgba(255,106,43,.38);
  display:flex; align-items:center; justify-content:center;
}
.tj-chip svg{ width:22px; height:22px; stroke:var(--tj-orange); stroke-width:1.8; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.tj-acard h3{ margin:0 0 12px; color:#F7F4EF; }
.tj-acard p{ margin:0; color:rgba(244,241,236,.7); font-size:15px; line-height:1.7; }
.tj-acard--feat{ border-color:rgba(255,106,43,.55); }
.tj-chiprow{ display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.tj-chiprow .tj-chip{ margin-bottom:0; }
.tj-badge{
  display:inline-block; padding:5px 13px; border-radius:999px;
  background:rgba(255,176,32,.16); border:1px solid rgba(255,176,32,.42);
  color:var(--tj-amber); font-family:var(--font-h); font-size:11px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
}

/* =========================================================================
   ROADMAP (Sticky-Scroll-Bühne)
   ========================================================================= */
.tj-rd{ --rd-ink:#101820; --rd-muted:#5F6B78; position:relative; }
.tj-rd__wrap{ height:240vh; position:relative; }
.tj-rd__stage{
  position:sticky; top:74px; height:calc(100vh - 74px);
  display:flex; align-items:center; justify-content:center;
  padding:26px clamp(20px,4vw,56px) 40px; overflow:hidden;
}
.tj-rd__ghost{
  position:absolute; top:10px; left:clamp(20px,4vw,56px);
  font-family:var(--font-h); font-size:clamp(80px,12vw,150px); font-weight:800; line-height:.9;
  color:rgba(16,24,32,.06); user-select:none; z-index:1;
}
.tj-rd__canvas{
  position:relative; width:min(100%, calc((100vh - 155px) * 1.263));
  aspect-ratio:1200/950; container-type:inline-size;
}
.tj-rd__canvas > svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.tj-roadgroup{ filter:drop-shadow(0 10px 22px rgba(16,24,32,.18)); }
#tj-road-progress{ stroke-dasharray:1; stroke-dashoffset:1; }

/* Hexagon-Stopps */
.tj-stop{
  position:absolute; z-index:2; transform:translate(-50%,-50%) scale(.35); opacity:0;
  transition:opacity .55s ease, transform .65s var(--tj-bounce);
}
.tj-stop.is-show{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.tj-hexwrap{
  filter:drop-shadow(0 8px 14px rgba(16,24,32,.22));
  width:6.2cqw; min-width:44px; aspect-ratio:1/1.05; margin:0 auto;
  animation:tjBob 4s ease-in-out infinite;
}
.tj-stop:nth-of-type(even) .tj-hexwrap{ animation-delay:-2s; }
@keyframes tjBob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-5px) } }
.tj-hex{
  width:100%; height:100%;
  clip-path:polygon(50% 2%, 94% 26%, 94% 74%, 50% 98%, 6% 74%, 6% 26%);
  background:linear-gradient(150deg, var(--tj-orange), var(--tj-amber));
  display:grid; place-items:center;
}
.tj-stop--alt .tj-hex{ background:linear-gradient(150deg, var(--tj-amber), var(--tj-orange-dk)); }
.tj-hex svg{ width:46%; height:46%; }

/* Icon zeichnet sich, danach dezente Loops */
.tj-hex svg path, .tj-hex svg circle, .tj-hex svg ellipse{
  stroke-dasharray:1; stroke-dashoffset:1; transform-box:fill-box; transform-origin:center;
}
.tj-stop.is-show .tj-hex svg path,
.tj-stop.is-show .tj-hex svg circle,
.tj-stop.is-show .tj-hex svg ellipse{ animation:tjRdDraw .9s ease var(--dd,.3s) forwards; }
@keyframes tjRdDraw{ to{ stroke-dashoffset:0 } }

.tj-stop.is-show .tj-hex svg .tj-i-scan{ animation:tjRdScan 2.8s ease-in-out 1.6s infinite alternate; }
@keyframes tjRdScan{ from{ transform:translate(-1.2px,-1px) } to{ transform:translate(1px,1.2px) } }
.tj-stop.is-show .tj-hex svg .tj-i-ping{ animation:tjRdDraw .9s ease var(--dd,.3s) forwards, tjRdPing 2.4s ease-in-out 1.8s infinite; }
@keyframes tjRdPing{ 0%,100%{ transform:scale(1); opacity:1 } 50%{ transform:scale(1.16); opacity:.7 } }
.tj-stop.is-show .tj-hex svg .tj-i-check{ animation:tjRdDraw .8s ease var(--dd,.3s) forwards, tjRdCheck 2.8s ease-in-out 2s infinite; }
@keyframes tjRdCheck{ 0%,100%{ transform:scale(1) } 12%{ transform:scale(1.18) } 24%{ transform:scale(1) } }
.tj-stop.is-show .tj-hex svg .tj-i-join{ animation:tjRdDraw .9s ease var(--dd,.3s) forwards, tjRdJoin 3s ease-in-out 2.2s infinite; }
@keyframes tjRdJoin{ 0%,100%{ opacity:1; transform:translateX(0) } 50%{ opacity:.55; transform:translateX(-1px) } }

/* Textboxen */
.tj-stopbox{
  position:absolute; z-index:2; transform:translate(-50%,-50%) scale(.6); opacity:0;
  transition:opacity .55s ease .12s, transform .65s var(--tj-bounce) .12s;
  width:22cqw; min-width:196px; max-width:268px; text-align:center;
  background:rgba(255,255,255,.96); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(16,24,32,.06); border-radius:16px; padding:14px 16px 15px;
  box-shadow:0 10px 24px -8px rgba(16,24,32,.14);
}
.tj-stopbox.is-show{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.tj-stopnum{ font-family:var(--font-h); font-size:clamp(10.5px,1.2cqw,12.5px); font-weight:700; letter-spacing:.12em; color:var(--tj-orange); }
.tj-stopbox h3{ margin:3px 0 4px; font-size:clamp(14px,1.6cqw,19px); font-weight:700; line-height:1.2; }
.tj-stopbox p{ margin:0; font-size:clamp(11.5px,1.2cqw,14px); line-height:1.5; color:var(--rd-muted); }

/* Leuchtpunkt an der Spitze */
.tj-rd__dot{
  position:absolute; z-index:3; width:16px; height:16px; border-radius:50%;
  background:var(--tj-amber); transform:translate(-50%,-50%); opacity:0; transition:opacity .3s;
  box-shadow:0 0 0 5px rgba(255,176,32,.25), 0 0 20px rgba(255,106,43,.85); pointer-events:none;
}
.tj-rd__dot.is-on{ opacity:1; }

/* CTA am Straßenende */
.tj-ctaslot{
  position:absolute; z-index:4; left:50%; top:99%;
  transform:translate(-50%,-60%) scale(.6); opacity:0;
  transition:opacity .5s ease, transform .6s var(--tj-bounce);
}
.tj-ctaslot.is-show{ opacity:1; transform:translate(-50%,-60%) scale(1); }

/* Mobile-Fallback */
.tj-rd__mobile{ display:none; }
.tj-mcard{
  display:flex; gap:16px; align-items:flex-start; background:#fff;
  border:1px solid rgba(16,24,32,.07); border-radius:18px; padding:20px; margin-bottom:16px;
  box-shadow:0 6px 20px rgba(16,24,32,.06);
}
.tj-mhex{
  flex:0 0 52px; height:56px;
  clip-path:polygon(50% 2%, 94% 26%, 94% 74%, 50% 98%, 6% 74%, 6% 26%);
  background:linear-gradient(150deg,var(--tj-orange),var(--tj-amber)); display:grid; place-items:center;
}
.tj-mhex svg{ width:24px; height:24px; fill:none; }
.tj-mcard h3{ margin:2px 0 6px; font-size:17px; }
.tj-mcard p{ margin:0; font-size:14px; line-height:1.55; color:var(--tj-muted); }

/* =========================================================================
   TALENTPOOL
   ========================================================================= */
.tj-pool__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,64px); align-items:center; }
.tj-ticks{ list-style:none; margin:28px 0 32px; padding:0; display:grid; gap:12px; }
.tj-ticks li{ position:relative; padding-left:32px; font-size:15.5px; }
.tj-ticks li::before{
  content:""; position:absolute; left:0; top:4px; width:20px; height:20px; border-radius:50%;
  background:rgba(255,106,43,.14);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF6A2B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size:12px; background-position:center; background-repeat:no-repeat;
}
.tj-pool__gallery{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.tj-pool__gallery .ph:nth-child(2), .tj-pool__gallery .ph:nth-child(3){ margin-top:0; }
.tj-pool__gallery .ph:nth-child(odd){ transform-origin:center; }
.tj-pool__gallery .ph{ transition:transform .4s var(--tj-ease), box-shadow .4s ease; }
.tj-pool__gallery .ph:hover{ transform:translateY(-6px); box-shadow:0 20px 40px -24px rgba(16,24,32,.5); }

/* =========================================================================
   KOSTENVERGLEICH
   ========================================================================= */
.tj-compare{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.tj-comp{
  position:relative; border-radius:20px; padding:32px 30px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  transition:transform .4s var(--tj-ease), border-color .4s ease;
}
.tj-comp:hover{ transform:translateY(-4px); }
.tj-comp h3{ margin:14px 0 6px; color:#F7F4EF; }
.tj-comp--win{ border-color:rgba(255,106,43,.55); background:rgba(255,106,43,.07); }
.tj-comp__price{ display:block; font-size:14px; color:rgba(244,241,236,.65); }
.tj-comp__price b{ font-family:var(--font-h); font-size:38px; font-weight:800; color:#fff; display:block; line-height:1.1; }
.tj-comp--win .tj-comp__price b{ color:var(--tj-amber); }
.tj-comp__list{ list-style:none; margin:22px 0 0; padding:0; display:grid; gap:10px; }
.tj-comp__list li{ position:relative; padding-left:26px; font-size:14.5px; color:rgba(244,241,236,.72); }
.tj-comp__list li::before{ content:""; position:absolute; left:0; top:9px; width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.28); }
.tj-comp--win .tj-comp__list li::before{ background:var(--tj-orange); }
.tj-comp__save{ margin:22px 0 0; padding-top:18px; border-top:1px solid rgba(255,255,255,.12); font-size:15px; color:#F7F4EF; }
.tj-comp__save b{ color:var(--tj-amber); font-family:var(--font-h); }
.tj-note{ max-width:760px; margin:34px auto 0; text-align:center; font-size:13px; color:rgba(244,241,236,.55); }

/* =========================================================================
   ORBIT-SZENE
   ========================================================================= */
.tj-promise__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,64px); align-items:center; }
.tj-orbit-scene{ position:relative; width:min(92vmin,520px); aspect-ratio:1; margin-inline:auto; container-type:inline-size; }
.tj-ring{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); border-radius:50%;
  border:1.5px solid rgba(255,106,43,.5);
  box-shadow:0 0 18px rgba(255,106,43,.16), inset 0 0 18px rgba(255,106,43,.09);
}
.tj-ring--1{ width:36%; height:36%; }
.tj-ring--2{ width:62%;   height:62%; }
.tj-ring--3{ width:88%;   height:88%; }
.tj-ring--4{ width:99%;   height:99%; border-color:rgba(16,24,32,.10); box-shadow:none; }

.tj-orbit{ position:absolute; inset:0; will-change:transform; }
.tj-orbit--inner{  animation:tjSpin 45s linear infinite; }
.tj-orbit--middle{ animation:tjSpin 70s linear infinite reverse; }
.tj-orbit--outer{  animation:tjSpin 95s linear infinite; }
@keyframes tjSpin{ to{ transform:rotate(360deg) } }

.tj-sat{ position:absolute; top:50%; left:50%; width:12cqw; height:12cqw; margin:-6cqw 0 0 -6cqw; }
.tj-satbadge{
  width:100%; height:100%; border-radius:50%; background:#fff;
  display:grid; place-items:center; transition:box-shadow .3s;
  box-shadow:0 6px 18px rgba(16,24,32,.16), 0 0 0 1px rgba(16,24,32,.05);
}
.tj-orbit--inner  .tj-satbadge{ animation:tjSpin 45s linear infinite reverse; }
.tj-orbit--middle .tj-satbadge{ animation:tjSpin 70s linear infinite; }
.tj-orbit--outer  .tj-satbadge{ animation:tjSpin 95s linear infinite reverse; }
.tj-satbadge:hover{ box-shadow:0 10px 26px rgba(255,106,43,.38), 0 0 0 2px rgba(255,106,43,.45); }

.tj-center-logo{
  position:absolute; top:50%; left:50%; width:24cqw; transform:translate(-50%,-50%);
  animation:tjBreathe 5s ease-in-out infinite alternate;
}
@keyframes tjBreathe{
  from{ transform:translate(-50%,-50%) scale(1) }
  to{   transform:translate(-50%,-50%) scale(1.04) }
}

.tj-stats{ display:flex; flex-wrap:wrap; gap:30px; margin:34px 0 32px; padding-top:26px; border-top:1px solid var(--tj-line); }
.tj-stats b{ display:block; font-family:var(--font-h); font-size:28px; line-height:1.1; }
.tj-stats span{ font-size:13.5px; color:var(--tj-muted); }

/* =========================================================================
   TEAM & BÜRO
   ========================================================================= */
.tj-teamgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.tj-person{ margin:0; }
.tj-person .ph{ transition:transform .4s var(--tj-ease), box-shadow .4s ease; }
.tj-person:hover .ph{ transform:translateY(-6px); box-shadow:0 20px 40px -24px rgba(16,24,32,.5); }
.tj-person figcaption{ margin-top:14px; }
.tj-person b{ display:block; font-family:var(--font-h); font-size:16px; }
.tj-person span{ font-size:13.5px; color:var(--tj-muted); }

.tj-office{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:clamp(40px,5vw,72px); }
.tj-quote{
  max-width:900px; margin:clamp(44px,6vw,80px) auto 0; padding:0 0 0 28px;
  border-left:3px solid var(--tj-orange);
  font-family:var(--font-s); font-style:italic; font-size:clamp(19px,2.2vw,27px); line-height:1.5;
}

/* =========================================================================
   KONTAKTLEISTE
   ========================================================================= */
.tj-contactbar{ padding-top:0; }
.tj-contactbar__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.tj-cbox{
  background:#fff; border:1px solid var(--tj-line); border-radius:20px; padding:28px;
  display:flex; flex-direction:column; gap:4px;
  transition:transform .35s var(--tj-ease), box-shadow .35s ease, border-color .3s ease;
}
.tj-cbox .tj-chip{ background:rgba(255,106,43,.10); border-color:rgba(255,106,43,.3); margin-bottom:16px; }
a.tj-cbox:hover{ transform:translateY(-5px); border-color:rgba(255,106,43,.5); box-shadow:0 18px 36px -22px rgba(16,24,32,.5); }
.tj-cbox__lab{ font-size:13px; color:var(--tj-muted); }
.tj-cbox__val{ font-family:var(--font-h); font-weight:600; font-size:17px; }

/* =========================================================================
   EINSATZFELDER
   ========================================================================= */
.tj-fields__grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(28px,4vw,64px); align-items:center; }
.tj-fieldlist{ list-style:none; margin:28px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.tj-fieldlist li{
  background:#fff; border:1px solid var(--tj-line); border-radius:14px; padding:16px 18px;
  transition:transform .35s var(--tj-ease), border-color .3s ease, box-shadow .35s ease;
}
.tj-fieldlist li:hover{ transform:translateY(-4px); border-color:rgba(255,106,43,.5); box-shadow:0 16px 30px -22px rgba(16,24,32,.5); }
.tj-fieldlist b{ display:block; font-family:var(--font-h); font-size:15px; }
.tj-fieldlist span{ font-size:13px; color:var(--tj-muted); }

/* =========================================================================
   SCHLUSS-CTA & FOOTER
   ========================================================================= */
.tj-cta{ padding:clamp(70px,9vw,130px) 0; text-align:center; }
.tj-cta__in{ max-width:760px; margin-inline:auto; }
.tj-cta h2{ color:#F7F4EF; font-size:clamp(34px,5vw,60px); }
.tj-cta p{ color:rgba(244,241,236,.72); margin:20px 0 34px; font-size:17px; }

.tj-foot{ background:var(--tj-night-2); color:rgba(244,241,236,.72); padding:56px 0 40px; }
.tj-foot__in{ display:grid; gap:26px; justify-items:center; text-align:center; }
.tj-logo--foot{ color:#F7F4EF; }
.tj-foot__nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 22px; font-size:14px; }
.tj-foot__nav a{ transition:color .3s ease; }
.tj-foot__nav a:hover{ color:var(--tj-orange); }
.tj-foot__legal{ margin:0; font-size:12.5px; color:rgba(244,241,236,.45); }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:1080px){
  .tj-acards{ grid-template-columns:1fr; }
  .tj-teamgrid{ grid-template-columns:repeat(2,1fr); }
  .tj-office{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px){
  .tj-nav{
    position:fixed; inset:74px 0 auto; flex-direction:column; gap:0; padding:10px 20px 22px;
    background:rgba(251,247,242,.97); backdrop-filter:blur(14px); border-bottom:1px solid var(--tj-line);
    transform:translateY(-120%); transition:transform .45s var(--tj-ease); z-index:55;
  }
  .tj-nav.is-open{ transform:none; }
  .tj-nav a{ padding:13px 0; border-bottom:1px solid var(--tj-line); font-size:16px; }
  .tj-burger{ display:flex; }
  .tj-head__cta .tj-btn{ display:none; }

  .tj-hero__grid,
  .tj-pool__grid,
  .tj-promise__grid,
  .tj-fields__grid,
  .tj-compare{ grid-template-columns:1fr; }
  .tj-promise__grid .tj-orbit-scene{ order:2; }
  .tj-contactbar__grid{ grid-template-columns:1fr; }
}
@media (max-width:860px), (prefers-reduced-motion:reduce){
  .tj-rd__wrap{ display:none; }
  .tj-rd__mobile{ display:block; padding:56px 20px 0; max-width:640px; margin:0 auto; }
}
@media (max-width:640px){
  .tj-fieldlist{ grid-template-columns:1fr; }
  .tj-teamgrid{ grid-template-columns:repeat(2,1fr); gap:14px; }
  .tj-office{ grid-template-columns:1fr; }
  .tj-cards__grid{ gap:10px; }
  .tj-col{ gap:10px; }
  .tj-card{ padding:12px; }
  .tj-card__name{ font-size:14px; }
  .tj-tag{ font-size:11.5px; }
  .tj-pill{ font-size:11.5px; padding:7px 13px; }
  .tj-hero__facts{ gap:20px; }
  .tj-quote{ padding-left:18px; }
}

/* =========================================================================
   REDUZIERTE BEWEGUNG
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .tj-rev, .tj-reveal{ opacity:1 !important; transform:none !important; filter:none !important; transition:none !important; }
  .tj-col, .tj-pill-float, .tj-pill__dot, .tj-ell i, .tj-dotlive,
  .tj-marquee__track, .tj-orbit, .tj-satbadge, .tj-center-logo,
  .is-live .tj-card--selected, .tj-card--selected::after{ animation:none !important; }
  .tj-check{ transform:scale(1); animation:none !important; }
  .tj-check path{ stroke-dashoffset:0; animation:none !important; }
  .tj-bar i{ transition:none; }
}

/* =========================================================================
   ECHTE BILDER (ersetzen die Platzhalter)
   ========================================================================= */
.tj-figure{ margin:0; border-radius:16px; overflow:hidden; position:relative; background:#EFE9E1; }
.tj-figure img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Porträts oben ausrichten, damit der Kopf im Ausschnitt bleibt */
.tj-figure--por img{ object-position:50% 8%; }
.tj-figure--tall img{ object-position:50% 25%; }
.tj-figure--sq{ aspect-ratio:1/1; }
.tj-figure--tall{ aspect-ratio:4/5; }
.tj-figure--wide{ aspect-ratio:16/10; }
.tj-figure--por{ aspect-ratio:4/5; }
.tj-avatar{ width:42px; height:42px; border-radius:11px; object-fit:cover; flex:none; border:1px solid var(--tj-line); background:#EFE9E1; }
.tj-pool__gallery .tj-figure, .tj-person .tj-figure, .tj-office .tj-figure{
  transition:transform .4s var(--tj-ease), box-shadow .4s ease;
}
.tj-pool__gallery .tj-figure:hover, .tj-person:hover .tj-figure, .tj-office .tj-figure:hover{
  transform:translateY(-6px); box-shadow:0 20px 40px -24px rgba(16,24,32,.5);
}

/* Branchenband statt Kundenlogos */
.tj-chipband{ display:flex; gap:14px; width:max-content; }
.tj-chipband span{
  display:inline-flex; align-items:center; gap:9px; white-space:nowrap;
  background:var(--tj-sand); border:1px solid var(--tj-line); border-radius:999px;
  padding:11px 22px; font-family:var(--font-h); font-weight:600; font-size:14.5px; color:var(--tj-ink);
}
.tj-chipband span::before{
  content:""; width:7px; height:7px; border-radius:50%; flex:none;
  background:linear-gradient(135deg,var(--tj-amber),var(--tj-orange));
}

/* Orbit-Badges mit eigenen Zeichen */
.tj-satbadge--icon{ background:#fff; }
.tj-satbadge--icon svg{ width:38%; height:38%; stroke:var(--tj-orange); stroke-width:1.9; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.tj-satbadge--flag{ overflow:hidden; }
.tj-satbadge--flag svg{ width:100%; height:100%; }
.tj-satbadge--word{
  font-family:var(--font-h); font-weight:600; font-size:1.8cqw; color:var(--tj-ink);
  letter-spacing:-.01em; text-align:center; line-height:1; padding:0 6%; white-space:nowrap;
}
@media (max-width:900px){ .tj-satbadge--word{ font-size:2.3cqw; } }
.tj-centermark{ width:100%; aspect-ratio:1/1; border-radius:50%; background:var(--tj-night); display:grid; place-items:center; box-shadow:0 18px 40px -18px rgba(16,24,32,.6); }
.tj-centermark svg{ width:52%; height:52%; color:var(--tj-orange); }
.tj-figure--map{ aspect-ratio:6/7; background:transparent; border-radius:20px; }
.tj-figure--map img{ object-fit:contain; }

/* =========================================================================
   TEAM-KARUSSELL
   ========================================================================= */
.tj-teamcar{ position:relative; }
.tj-teamcar__viewport{
  display:flex; gap:20px; overflow-x:auto; scroll-behavior:smooth;
  scroll-snap-type:x mandatory; padding:6px 2px 14px;
  scrollbar-width:none; -ms-overflow-style:none;
}
.tj-teamcar__viewport::-webkit-scrollbar{ display:none; }

.tj-pcard{
  position:relative; flex:0 0 calc((100% - 60px) / 4); margin:0;
  aspect-ratio:3/4; border-radius:20px; overflow:hidden; scroll-snap-align:start;
  box-shadow:0 14px 34px -20px rgba(16,24,32,.55);
  transition:transform .45s var(--tj-ease), box-shadow .45s ease;
}
.tj-pcard img{ width:100%; height:100%; object-fit:cover; object-position:50% 12%; display:block;
  transition:transform .6s var(--tj-ease); }
.tj-pcard::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(16,24,32,0) 45%, rgba(16,24,32,.35) 68%, rgba(16,24,32,.82) 100%);
}
.tj-pcard figcaption{ position:absolute; left:22px; right:18px; bottom:20px; z-index:1; color:#fff; }
.tj-pcard figcaption b{
  display:block; font-family:var(--font-h); font-weight:600; font-size:clamp(15px,1.3vw,18px);
  letter-spacing:-.01em; text-shadow:0 2px 12px rgba(0,0,0,.35);
}
.tj-pcard figcaption span{
  display:block; margin-top:2px; font-family:var(--font-s); font-style:italic;
  font-size:clamp(13px,1.1vw,16px); color:rgba(255,255,255,.82);
}
.tj-pcard:hover{ transform:translateY(-6px); box-shadow:0 24px 46px -22px rgba(16,24,32,.6); }
.tj-pcard:hover img{ transform:scale(1.05); }

.tj-teamcar__nav{ display:flex; justify-content:center; gap:14px; margin-top:26px; }
.tj-carbtn{
  width:52px; height:52px; border-radius:50%; border:1px solid var(--tj-line);
  background:#fff; color:var(--tj-muted); display:grid; place-items:center; cursor:pointer;
  transition:transform .3s var(--tj-ease), background .3s ease, color .3s ease, box-shadow .3s ease, opacity .3s ease;
}
.tj-carbtn svg{ width:22px; height:22px; }
.tj-carbtn--on{
  background:linear-gradient(135deg,var(--tj-orange),var(--tj-orange-dk)); color:#fff;
  border-color:transparent; box-shadow:0 10px 22px -12px rgba(255,106,43,.9);
}
.tj-carbtn:hover{ transform:translateY(-2px); }
.tj-carbtn[disabled]{ opacity:.35; cursor:default; transform:none; }

@media (max-width:1080px){ .tj-pcard{ flex:0 0 calc((100% - 20px) / 2); } }
@media (max-width:640px){ .tj-pcard{ flex:0 0 78%; } }
@media (prefers-reduced-motion:reduce){
  .tj-teamcar__viewport{ scroll-behavior:auto; }
  .tj-pcard, .tj-pcard img{ transition:none; }
}

/* =========================================================================
   LEAD-FORMULAR (Modal)
   ========================================================================= */
.tj-modal{
  width:min(100% - 32px, 660px); max-height:90vh; padding:clamp(26px,4vw,42px);
  border:none; border-radius:26px; background:var(--tj-white); color:var(--tj-ink);
  box-shadow:0 40px 90px -40px rgba(16,24,32,.7);
  overflow:auto; position:relative;
}
.tj-modal::backdrop{ background:rgba(16,24,32,.62); backdrop-filter:blur(4px); }
.tj-modal[open]{ animation:tjModalIn .45s var(--tj-ease); }
.tj-modal[open]::backdrop{ animation:tjFadeIn .35s ease; }
@keyframes tjModalIn{ from{ opacity:0; transform:translateY(24px) scale(.97) } to{ opacity:1; transform:none } }
@keyframes tjFadeIn{ from{ opacity:0 } to{ opacity:1 } }

.tj-modal__close{
  position:absolute; top:16px; right:16px; width:40px; height:40px; border-radius:50%;
  border:1px solid var(--tj-line); background:#fff; color:var(--tj-muted);
  display:grid; place-items:center; cursor:pointer; transition:transform .3s var(--tj-ease), color .3s ease, border-color .3s ease;
}
.tj-modal__close svg{ width:19px; height:19px; }
.tj-modal__close:hover{ color:var(--tj-orange); border-color:var(--tj-orange); transform:rotate(90deg); }

.tj-modal__head{ margin-bottom:26px; padding-right:44px; }
.tj-modal__head h2{ font-size:clamp(24px,3vw,32px); margin:0 0 8px; }
.tj-modal__head p{ margin:0; color:var(--tj-muted); font-size:15px; }
.tj-modal .tj-eyebrow{ margin-bottom:16px; }

.tj-form{ display:grid; gap:16px; }
.tj-form__row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.tj-field{ display:grid; gap:7px; }
.tj-field > span{ font-family:var(--font-h); font-size:13px; font-weight:600; }
.tj-field > span b{ color:var(--tj-orange); }
.tj-field input, .tj-field select, .tj-field textarea{
  font-family:var(--font-b); font-size:15px; color:var(--tj-ink);
  padding:13px 15px; border:1px solid var(--tj-line); border-radius:12px; background:var(--tj-sand);
  transition:border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.tj-field textarea{ resize:vertical; min-height:88px; }
.tj-field input:focus, .tj-field select:focus, .tj-field textarea:focus{
  outline:none; border-color:var(--tj-orange); background:#fff;
  box-shadow:0 0 0 4px rgba(255,106,43,.14);
}
.tj-field input:user-invalid, .tj-field textarea:user-invalid{ border-color:#E5484D; }

.tj-check2{ display:flex; align-items:flex-start; gap:11px; font-size:13.5px; color:var(--tj-muted); line-height:1.5; }
.tj-check2 input{ margin-top:3px; width:18px; height:18px; accent-color:var(--tj-orange); flex:none; }
.tj-check2 a{ color:var(--tj-orange-dk); text-decoration:underline; }

.tj-hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

.tj-form__submit{ justify-content:center; margin-top:4px; }
.tj-form__submit[disabled]{ opacity:.6; cursor:progress; }
.tj-form__hinweis{ margin:0; font-size:13.5px; min-height:20px; color:#C13515; text-align:center; }

.tj-form__danke{ text-align:center; padding:16px 0 8px; }
.tj-form__haken{
  width:64px; height:64px; margin:0 auto 18px; border-radius:50%; display:grid; place-items:center;
  background:rgba(23,178,106,.12); color:var(--tj-green);
  animation:tjPop .55s var(--tj-bounce) both;
}
.tj-form__haken svg{ width:30px; height:30px; }
.tj-form__danke h3{ margin:0 0 8px; font-size:22px; }
.tj-form__danke p{ margin:0 0 22px; color:var(--tj-muted); }

@media (max-width:560px){
  .tj-form__row{ grid-template-columns:1fr; }
  .tj-modal{ border-radius:20px; }
}
@media (prefers-reduced-motion:reduce){
  .tj-modal[open], .tj-modal[open]::backdrop, .tj-form__haken{ animation:none; }
}

/* =========================================================================
   MOBIL – Feinschliff
   ========================================================================= */

/* CTA im Mobilmenü (auf dem Desktop ausgeblendet) */
.tj-nav__cta{ display:none; }

@media (max-width:900px){
  .tj-nav__cta{
    display:block; margin-top:16px; text-align:center; border-bottom:none !important;
    background:linear-gradient(135deg,var(--tj-orange),var(--tj-orange-dk));
    color:#fff !important; border-radius:999px; padding:15px 24px !important;
    font-family:var(--font-h); font-weight:600;
    box-shadow:0 10px 24px -12px rgba(255,106,43,.8);
  }
  .tj-nav__cta::after{ display:none; }
  .tj-nav{ max-height:calc(100dvh - 74px); overflow-y:auto; }
}

/* ---------- Hero auf schmalen Geräten ---------- */
@media (max-width:640px){
  .tj-hero{ padding-top:26px; }
  .tj-hero__grid{ gap:34px; }
  h1{ font-size:clamp(34px,10vw,44px); }
  .tj-lead{ font-size:16px; }
  .tj-hero__actions{ gap:10px; }
  .tj-hero__actions .tj-btn{ width:100%; justify-content:center; }
  .tj-hero__facts{ gap:18px 26px; margin-top:34px; padding-top:22px; }
  .tj-hero__facts strong{ font-size:25px; }
  .tj-hero__facts li{ flex:1 1 40%; }

  /* Kandidatenkarten: eine Spalte, dafür lesbar */
  .tj-cards{ padding:16px 0 0; }
  .tj-cards__grid{ grid-template-columns:1fr; gap:12px; }
  .tj-col--offset{ margin-top:0; }
  .tj-col:last-child .tj-card:nth-child(n+3){ display:none; }  /* nicht endlos lang */
  .tj-pillwrap{ position:static; transform:none; margin:0 auto 14px; width:max-content; }
  .tj-card__name{ font-size:15px; }
  .tj-tag{ font-size:12.5px; }
}

/* ---------- Lead-Formular auf dem Handy ---------- */
@media (max-width:640px){
  .tj-modal{
    width:100%; max-width:none; max-height:94dvh;
    margin:auto auto 0;                       /* sitzt unten wie ein Sheet */
    border-radius:24px 24px 0 0;
    padding:26px 20px calc(24px + env(safe-area-inset-bottom));
    overscroll-behavior:contain;
  }
  .tj-modal[open]{ animation:tjSheetIn .4s var(--tj-ease); }
  @keyframes tjSheetIn{ from{ transform:translateY(100%) } to{ transform:none } }

  /* Griff oben wie bei nativen Sheets */
  .tj-modal::before{
    content:""; display:block; width:44px; height:4px; border-radius:99px;
    background:var(--tj-line); margin:-8px auto 18px;
  }

  .tj-modal__close{ top:14px; right:14px; width:44px; height:44px; }
  .tj-modal__head{ margin-bottom:20px; padding-right:52px; }
  .tj-modal__head h2{ font-size:26px; }
  .tj-modal__head p{ font-size:14.5px; }
  .tj-modal .tj-eyebrow{ margin-bottom:12px; font-size:10.5px; padding:6px 12px; }

  .tj-form{ gap:14px; }
  /* 16px verhindert das automatische Hineinzoomen unter iOS */
  .tj-field input, .tj-field select, .tj-field textarea{ font-size:16px; padding:14px 15px; }
  .tj-field textarea{ min-height:76px; }
  .tj-check2{ font-size:13px; gap:13px; }
  .tj-check2 input{ width:22px; height:22px; }
  .tj-form__submit{ width:100%; padding:17px 24px; font-size:16px; }
  .tj-form__danke{ padding:8px 0 4px; }
}

/* Eigener Pfeil statt der Systemdarstellung (iOS zeigt sonst nichts) */
.tj-field select{
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F6B78' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:17px;
  padding-right:42px;
}

/* Hintergrund friert ein, solange das Formular offen ist */
body.tj-modal-offen{ overflow:hidden; }

/* ---------- Restliche Abschnitte auf dem Handy ---------- */
@media (max-width:640px){
  .tj-sec{ padding:52px 0; }
  .tj-sechead{ margin-bottom:30px; }
  .tj-sechead p{ font-size:15.5px; }
  .tj-acard{ padding:26px 22px; }
  .tj-ghostnum{ font-size:62px; right:16px; }
  .tj-comp{ padding:26px 22px; }
  .tj-comp__price b{ font-size:32px; }
  .tj-quote{ font-size:19px; }
  .tj-cbox{ padding:22px; }
  .tj-teamcar__nav{ margin-top:20px; }
  .tj-carbtn{ width:48px; height:48px; }
  .tj-pool__gallery{ gap:12px; }
  .tj-office{ gap:12px; }
  .tj-cta{ padding:64px 0; }
  .tj-foot__nav{ gap:10px 16px; font-size:13.5px; }
}

/* Sichtbarer Fokus für Tastatur- und Screenreader-Bedienung */
:focus-visible{ outline:3px solid rgba(255,106,43,.55); outline-offset:2px; border-radius:6px; }

/* =========================================================================
   ABSCHNITT „WARUM SO GÜNSTIG"
   ========================================================================= */
.tj-why{ background:#fff; border-block:1px solid var(--tj-line); }
.tj-whygrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.tj-wcard{
  position:relative; padding:32px 28px; border-radius:20px;
  background:var(--tj-sand); border:1px solid var(--tj-line);
  transition:transform .4s var(--tj-ease), border-color .4s ease, box-shadow .4s ease;
}
.tj-wcard:hover{
  transform:translateY(-6px); border-color:rgba(255,106,43,.45);
  box-shadow:0 22px 44px -30px rgba(16,24,32,.55);
}
.tj-wcard h3{ margin:0 0 12px; font-size:19px; line-height:1.35; }
.tj-wcard p{ margin:0; color:var(--tj-muted); font-size:15px; line-height:1.7; }
.tj-chip--light{ background:rgba(255,106,43,.10); border-color:rgba(255,106,43,.3); }

.tj-whynote{
  margin-top:26px; padding:26px 30px; border-radius:20px;
  background:var(--tj-night); color:rgba(244,241,236,.78);
  position:relative; overflow:hidden;
}
.tj-whynote::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:24px 24px;
}
.tj-whynote p{ margin:0; position:relative; font-size:15.5px; line-height:1.7; }
.tj-whynote b{ color:#F7F4EF; }

@media (max-width:1080px){ .tj-whygrid{ grid-template-columns:1fr; } }
@media (max-width:640px){
  .tj-wcard{ padding:26px 22px; }
  .tj-whynote{ padding:22px; }
  .tj-whynote p{ font-size:15px; }
}