/*
 * Talentkontor Website: Bausteine nur für Funktionen und Für Creator (Design „Bühne“, lädt nach buehne.css).
 * Rundgang durch das Agentur-Portal (Reiter links, Browser rechts, am Handy Auswahlliste), Creator-Portal im Telefon
 * mit Pillen-Reitern, Kacheln ohne Bild, Foto im Rahmen. Umschalten und gleitende Markierung (.tab-cursor) setzt
 * site.js; Bewegung nur unter .fx, bei prefers-reduced-motion steht alles (buehne.css).
 */

/* Eigene Seite in der Navigation */
.hd-links a[aria-current="page"]{color:var(--tx);background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--line)}
.mnav a.ml[aria-current="page"]{color:var(--tx)}
.mnav a.ml[aria-current="page"] .i{color:var(--g400)}

/* Seitenkopf: zweite Zeile im Verlauf der Startseite, erste Zeile hell (Text bleibt ein Satz) */
.page-h.tone{background:linear-gradient(96deg,#fff 0%,#cde6d8 38%,#6fae8f 78%,#2d7a5c 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.1em;margin-bottom:-.1em}
.page-h.tone::first-line{color:var(--tx)}
.page-hero .note{margin-top:20px;text-wrap:balance}
.page-hero.center .lead{margin-inline:auto;text-wrap:balance}
.btn:hover .i-down{transform:translateY(3px)}
.fx .tour-sec .up{opacity:0;animation:upIn 1.2s var(--ease) forwards;animation-delay:var(--d,0ms)}

/* ── Rundgang durch das Agentur-Portal ─────────────────────────────────────────── */
.tour-sec{position:relative;padding-bottom:var(--sec);overflow-x:clip}
.tour{display:grid;grid-template-columns:minmax(0,256px) minmax(0,1fr);gap:clamp(28px,3.6vw,52px);align-items:start}

/* Reiterliste links */
.tour-tabs{position:relative;display:flex;flex-direction:column;gap:2px;padding:10px;border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));box-shadow:inset 0 0 0 1px var(--line)}
.tour-group{padding:13px 12px 6px;font:600 11.5px/1.2 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--tx3)}
.tour-group:first-child{padding-top:8px}
.tour-tabs [role="tab"]{position:relative;z-index:1;display:flex;align-items:center;gap:11px;width:100%;min-height:37px;padding:7px 12px;border-radius:11px;text-align:left;font:500 14.5px/1.3 Inter,sans-serif;color:var(--tx2);transition:color .3s var(--ease)}
.tour-tabs [role="tab"] .i{width:18px;height:18px;color:var(--tx3);transition:color .3s var(--ease)}
.tour-tabs [role="tab"]:hover{color:var(--tx)}
.tour-tabs [role="tab"]:not([aria-selected="true"]):hover{background:rgba(255,255,255,.04)}
.tour-tabs [role="tab"][aria-selected="true"]{color:#fff}
.tour-tabs [role="tab"][aria-selected="true"] .i{color:var(--g100)}
.tour-tabs [role="tab"]:focus-visible{outline-offset:1px}
.tour-tabs:not(.has-cursor) [role="tab"][aria-selected="true"],
.tour-tabs .tab-cursor{background:linear-gradient(180deg,rgba(47,131,99,.34),rgba(27,94,69,.2));box-shadow:inset 0 0 0 1px rgba(111,174,143,.45),0 0 26px -6px rgba(45,122,92,.75)}
.tour-tabs .tab-cursor{position:absolute;left:0;top:0;z-index:0;border-radius:11px;opacity:0;pointer-events:none}
.tour-tabs .tab-cursor.on{opacity:1}
.fx .tour-tabs .tab-cursor.live{transition:transform .5s var(--ease),width .5s var(--ease),height .5s var(--ease)}

/* Auswahlliste am Handy (statt der Reiter) */
.tour-select{display:none}
.tour-select label{display:block;margin-bottom:10px;font:500 14px/1.3 Inter,sans-serif;color:var(--tx3)}
.sel{position:relative;display:block}
.sel select{-webkit-appearance:none;appearance:none;display:block;width:100%;height:54px;padding:0 50px 0 18px;border:0;border-radius:16px;background:linear-gradient(180deg,#191c1c,#121414);box-shadow:inset 0 0 0 1px rgba(111,174,143,.4),0 0 30px -10px rgba(45,122,92,.7);color:var(--tx);font:600 16px/1.2 Inter,sans-serif;cursor:pointer}
.sel select option{background:#111312;color:var(--tx)}
.sel .i{position:absolute;right:18px;top:50%;margin-top:-10px;color:var(--g400);stroke-width:2;pointer-events:none}

/* Ansicht rechts */
.tour-panel{min-width:0}
.tour-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 40px;align-items:end;min-height:92px}
.tour-head h2{font:700 clamp(26px,2.5vw,34px)/1.12 Manrope,sans-serif;letter-spacing:-.035em;text-wrap:balance;color:var(--tx)}
.tour-head p{font-size:16px;line-height:1.55;color:var(--tx2);max-width:48ch}
.tour-stage{position:relative;margin-top:28px;isolation:isolate}
.tour-glow{position:absolute;inset:-14% -10% -18%;z-index:-1;pointer-events:none;background:radial-gradient(50% 50% at 50% 46%,rgba(45,122,92,.36),rgba(27,94,69,.1) 55%,transparent 74%)}
.tour-stage .browser{box-shadow:0 0 0 1px rgba(255,255,255,.1),0 50px 120px -30px rgba(0,0,0,.9),0 0 80px -30px rgba(45,122,92,.45)}
.tour-count{margin-top:18px;font-size:14px;color:var(--tx3)}
.tour-count [data-slot="count"]{color:var(--tx);font-weight:600;font-variant-numeric:tabular-nums}

/* ── Kacheln ohne Bild (Im Arbeitsalltag, Vorteile für Creator) ──────────────── */
.cat .tile,.perks .tile{--c:4;min-height:0}
.perks{margin-top:0}
.cat .tile .tx,.perks .tile .tx{padding:30px 30px 32px}
.cat .ico,.perks .ico{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:linear-gradient(180deg,rgba(45,122,92,.4),rgba(27,94,69,.16));box-shadow:inset 0 0 0 1px rgba(111,174,143,.4),0 0 40px -8px rgba(45,122,92,.6);color:var(--g100)}
.cat .ico .i,.perks .ico .i{width:22px;height:22px}
.cat .tile h3,.perks .tile h3{margin-top:22px}

/* Weitere Funktionen für Creator: ruhige Reihe unter den Kacheln */
.subfeatures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--line)}
.subfeatures article{padding:32px 28px 4px 0}
.subfeatures article+article{padding-left:28px;border-left:1px solid var(--line)}
.subfeatures .i{width:20px;height:20px;color:var(--g400)}
.subfeatures h3{margin-top:16px;font:600 18px/1.3 Manrope,sans-serif;letter-spacing:-.015em}
.subfeatures p{margin-top:8px;font-size:15px;line-height:1.6;color:var(--tx2);max-width:40ch}

/* ── Foto: Arbeit hinter dem Content ─────────────────────────────────────────── */
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,88px);align-items:center}
.duo-copy .h2{margin-top:18px;font-size:clamp(34px,3.9vw,54px)}
.duo-copy .lead{margin-top:22px}
.duo-link{margin-top:28px}
.photo{position:relative;isolation:isolate}
.photo-glow{position:absolute;inset:-16% -12%;z-index:-1;pointer-events:none;background:radial-gradient(46% 46% at 55% 50%,rgba(45,122,92,.3),transparent 72%)}
.photo-frame{position:relative;border-radius:24px;overflow:hidden;background:var(--bg3);box-shadow:0 0 0 1px rgba(255,255,255,.12),0 50px 110px -40px rgba(0,0,0,.95)}
.photo-frame::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);pointer-events:none}
.photo img{width:100%;aspect-ratio:1400/933;object-fit:cover}

/* Abschluss mit längerem Satz */
.final .h-xl.h-long{font-size:clamp(40px,6.4vw,96px);max-width:15em;margin-inline:auto;-webkit-hyphens:manual;hyphens:manual}

/* ── Creator-Portal im Telefon ───────────────────────────────────────────────── */
.ptour-sec{position:relative;padding-bottom:var(--sec);overflow-x:clip}
.ptour{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:clamp(40px,6vw,96px);align-items:center}
.ptour-copy .h2{margin-top:18px;font-size:clamp(34px,4.4vw,60px);-webkit-hyphens:manual;hyphens:manual}
.ptour-copy .lead{margin-top:22px}
.ptabs-wrap{margin-top:32px}
.pill-tabs{position:relative;display:inline-flex;flex-wrap:wrap;gap:4px;padding:5px;border-radius:26px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--line2)}
.pill-tabs [role="tab"]{position:relative;z-index:1;height:40px;padding:0 17px;border-radius:999px;font:500 14.5px/1 Inter,sans-serif;color:var(--tx2);white-space:nowrap;transition:color .3s var(--ease)}
.pill-tabs [role="tab"]:hover{color:var(--tx)}
.pill-tabs [role="tab"][aria-selected="true"]{color:#fff}
.pill-tabs:not(.has-cursor) [role="tab"][aria-selected="true"],
.pill-tabs .tab-cursor{background:linear-gradient(180deg,#2f8363,#1f6b4f);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 0 0 1px rgba(111,174,143,.45),0 0 26px -4px rgba(45,122,92,.8)}
.pill-tabs .tab-cursor{position:absolute;left:0;top:0;z-index:0;border-radius:999px;opacity:0;pointer-events:none}
.pill-tabs .tab-cursor.on{opacity:1}
.fx .pill-tabs .tab-cursor.live{transition:transform .5s var(--ease),width .5s var(--ease),height .5s var(--ease)}
.ptour-copy .checks{margin-top:34px}

.phone-stage{position:relative;display:flex;flex-direction:column;align-items:center;isolation:isolate}
.pstage-glow{position:absolute;left:50%;top:44%;width:720px;height:720px;margin:-360px 0 0 -360px;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(45,122,92,.42),rgba(27,94,69,.12) 55%,transparent)}
.phone-stage .phone{width:min(100%,312px)}
.phone-note{margin-top:24px;max-width:36ch;min-height:3.1em;text-align:center;font-size:15px;line-height:1.55;color:var(--tx2)}
.phone-note::before{content:"";display:inline-block;width:7px;height:7px;margin:0 10px 2px 0;border-radius:50%;background:var(--g400);box-shadow:0 0 10px 1px rgba(111,174,143,.55);vertical-align:middle}

/* ── Tablet und Handy ────────────────────────────────────────────────────────── */
@media (max-width:1080px){
  .tour{grid-template-columns:minmax(0,224px) minmax(0,1fr)}
  .tour-head{grid-template-columns:minmax(0,1fr);min-height:0}
  .cat .tile{--c:3}
  .perks .tile{--c:2}
}
@media (max-width:860px){
  .tour{grid-template-columns:minmax(0,1fr);gap:26px}
  .tour-tabs{display:none}
  .tour-select{display:block}
  .tour-head h2{font-size:clamp(24px,6.4vw,30px)}
  .tour-head p{font-size:15.5px}
  .tour-stage{margin-top:22px}
  .duo{grid-template-columns:minmax(0,1fr)}
  /* am Handy: Reiter direkt über dem Telefon, die Liste danach */
  .ptour{grid-template-columns:minmax(0,1fr);gap:0}
  .ptour-copy{display:contents}
  .phone-stage{order:1;margin-top:44px}
  .ptour-copy .checks{order:2;margin-top:44px}
  .phone-stage .phone{width:min(78%,320px)}
  .subfeatures{grid-template-columns:minmax(0,1fr)}
  .subfeatures article,.subfeatures article+article{padding:26px 0 4px;border-left:0}
  .subfeatures article+article{border-top:1px solid var(--line);margin-top:22px}
}
@media (max-width:700px){
  .cat .tile .tx,.perks .tile .tx{padding:24px 22px 26px}
  .page-hero .cta-row{width:100%;flex-direction:column;align-items:stretch;max-width:360px}
  .tour-count{font-size:13px}
}

/* Pillen-Reiter in zwei Reihen (3 + 2), wenn eine Reihe nicht passt */
@media (min-width:861px) and (max-width:1120px),(max-width:600px){
  .pill-tabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-radius:22px}
  .pill-tabs [role="tab"]{grid-column:span 2;padding:0 8px}
  .pill-tabs button:nth-of-type(n+4){grid-column:span 3}
}

/* Abschnitt „Für die Arbeit hinter dem Content“: echtes Agentur-Portal mit Creator-Handy davor (statt Foto) */
.duo-shot{position:relative;isolation:isolate;margin:0 6% 10% 0}
.duo-shot .browser{box-shadow:0 0 0 1px rgba(255,255,255,.1),0 50px 110px -40px rgba(0,0,0,.95)}
.duo-phone{position:absolute;right:-7%;bottom:-14%;width:30%;min-width:104px;z-index:2}
@media (max-width:700px){.duo-shot{margin:0 4% 18% 0}.duo-phone{width:34%;right:-3%;bottom:-20%}}