/* Nur auf den Takt-Seiten unter /takt (Landingpage, Rechtstexte), von worker.js eingebunden.
   Kopf und Fuß der Website stecken dort in eigenen Shadow Roots (#pw-head, #pw-foot); diese Datei passt nur die
   Seite von Takt daran an. data-pw-chrome am body: "landing" oder "legal". */

/* Die eigene Kopfzeile von Takt bleibt im Dokument (ihr Skript braucht sie), wird aber nicht gezeigt. */
body[data-pw-chrome] > header#nav{ display:none !important; }

/* Platz für den festen Kopf der Website (Höhe misst app.js als --head-h) */
body[data-pw-chrome="landing"] .hero{ padding-top:calc(var(--head-h, 110px) + 40px); }
body[data-pw-chrome="legal"] > main{ padding-top:calc(var(--head-h, 110px) + 32px); }
body[data-pw-chrome="legal"] .top .brand{ display:none; }

/* FAQ (nur /takt/), Abschluss „Schluss mit Raten“ und die eigene Fußzeile von Takt entfernt worker.js;
   ihre Fragen stehen unter /haeufige-fragen#takt, Zweckbestimmung und Rechtstexte im Fuß der Website. */

/* Offenes Menü am Handy: Seite dahinter nicht scrollen */
html.menu-open{ overflow:hidden; }

/* =====================================================================================================
   Takt-Landingpage im Rahmen der Website (nur body[data-pw-chrome="landing"]): Hintergründe und Schrift der
   Website, kompaktere Abschnitte, Kopfbereich wie die anderen Seiten. Die Bausteine von Takt (Karten, Handys,
   Glas, Knöpfe) bleiben, die Bildschirme der App ebenso (die nutzen nur --font, das hier nicht geändert wird).
   ===================================================================================================== */
body[data-pw-chrome="landing"]{
  --ink:#131A2B;  --ink-2:#5E6879;  --paper:#FCFBF9;  --mist:#F5F4F0;  --line:rgba(19,26,43,.11);
  font-family:"Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* Dunkle Abschnitte: das Marineblau der Website statt Braun, mit kühlem und einem Hauch goldenem Licht */
body[data-pw-chrome="landing"] .dark{ background:#131A2B; }
body[data-pw-chrome="landing"] .scene-warm{
  background:
    radial-gradient(48% 42% at 82% 8%, rgba(131,140,197,.30), transparent 72%),
    radial-gradient(34% 30% at 66% 36%, rgba(232,169,58,.10), transparent 70%),
    radial-gradient(42% 46% at 6% 62%, rgba(176,184,204,.12), transparent 72%),
    radial-gradient(70% 50% at 50% 112%, rgba(0,0,0,.45), transparent 70%),
    linear-gradient(168deg, #27304d 0%, #1a2238 44%, #0f1526 100%);
}
body[data-pw-chrome="landing"] .scene-cool{
  background:
    radial-gradient(56% 46% at 18% 0%, rgba(131,140,197,.22), transparent 72%),
    radial-gradient(50% 50% at 100% 100%, rgba(95,104,176,.18), transparent 70%),
    linear-gradient(180deg, #1f2740 0%, #161d31 60%, #10162a 100%);
}

/* Schriftgrößen näher an der Website */
body[data-pw-chrome="landing"] h2{ font-size:clamp(1.9rem, 1.15rem + 2.3vw, 3rem); letter-spacing:-.032em; }
body[data-pw-chrome="landing"] .lead{ font-size:clamp(1.0625rem, 1rem + .3vw, 1.25rem); }
body[data-pw-chrome="landing"] .block{ padding:clamp(56px, 2.5rem + 3vw, 96px) 0; }
body[data-pw-chrome="landing"] .progress{ padding-bottom:clamp(56px, 2.5rem + 3vw, 96px); }
body[data-pw-chrome="landing"] .intro .lead{ margin-top:14px; }

/* ---------- Kopfbereich wie auf den anderen Seiten: Text links, Handy mit zwei Karten rechts, ein Bildschirm hoch */
body[data-pw-chrome="landing"] .pw-eyebrow{
  font-size:11.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.78); margin:0 0 14px;
}
body[data-pw-chrome="landing"] .hero h1{
  font-size:clamp(2.4rem, 1.5rem + 3.4vw, 4.25rem); font-weight:650; letter-spacing:-.035em; line-height:1;
}
body[data-pw-chrome="landing"] .hero-copy{ text-align:left; }
body[data-pw-chrome="landing"] .hero .lead{ margin:18px 0 0; max-width:42ch; }
body[data-pw-chrome="landing"] .hero .ctas{ justify-content:flex-start; margin-top:26px; }
body[data-pw-chrome="landing"] .hero .btn-lg{ min-height:48px; font-size:1rem; padding:0 24px; }
body[data-pw-chrome="landing"] .hero .btn-light{ background:#E8A93A; color:#2E1F04; }   /* Gold wie „Termin anfragen" */
body[data-pw-chrome="landing"] .hero .btn-light:hover{ background:#D2932A; }
body[data-pw-chrome="landing"] .hero-fine{ margin-top:14px; }
body[data-pw-chrome="landing"] .hero-stage{ margin-top:36px; }
body[data-pw-chrome="landing"] .g-b,
body[data-pw-chrome="landing"] .g-c{ display:none; }

/* Handy: das Handy schaut unten hervor und ist beim Weiterscrollen ganz zu sehen (keine feste Höhe, sonst schneidet
   der nächste Abschnitt es auf niedrigen Bildschirmen ab); die Karten erst ab Tablet */
@media (max-width: 999px){
  body[data-pw-chrome="landing"] .hero{ padding-bottom:clamp(48px, 8vw, 72px); }
  body[data-pw-chrome="landing"] .hero-visual{ display:block; max-width:none; }
  body[data-pw-chrome="landing"] .hero-visual .device{ margin:0 auto; }
  body[data-pw-chrome="landing"] .g-stat{ display:none; }
  body[data-pw-chrome="landing"] .device-hero{ --k:.62; --bz:9px; }
}
@media (min-width: 1000px){
  body[data-pw-chrome="landing"] .hero{
    display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr); align-items:center; column-gap:48px;
    min-height:100svh; max-height:1100px;
    padding:calc(var(--head-h, 110px) + 24px) max(var(--gutter), calc((100vw - 1180px) / 2)) 40px;
  }
  body[data-pw-chrome="landing"] .hero > .wrap{ max-width:none; margin:0; padding:0; }
  body[data-pw-chrome="landing"] .hero-stage{ margin-top:0; }
  body[data-pw-chrome="landing"] .hero-visual{ display:flex; justify-content:center; position:relative; max-width:none; }
  body[data-pw-chrome="landing"] .hero-visual .device{ margin:0; }
  body[data-pw-chrome="landing"] .device-hero{ --k:.62; --bz:10px; }
  body[data-pw-chrome="landing"] .g-stat{ position:absolute; z-index:2; width:212px; margin:0; }
  body[data-pw-chrome="landing"] .g-a{ left:0; top:14%; }
  body[data-pw-chrome="landing"] .g-d{ right:0; bottom:12%; }
}
@media (min-width: 1000px) and (max-height: 760px){
  body[data-pw-chrome="landing"] .device-hero{ --k:.54; }
}

/* ---------- „So funktioniert's" am Handy: das Handy bleibt oben stehen und wechselt beim Scrollen den Bildschirm,
   wie am Computer. Die App selbst (landing.css) macht das erst ab 740 px Höhe und unter ihrer eigenen, flachen
   Leiste; hier steht der Kopf der Website darüber (--head-h), deshalb schon ab 640 px Höhe und mit kleinerem Handy.
   landing.ts liest die Höhe der Leiste (.tour-sticky) selbst und setzt die Leselinie darunter. */
@media (max-width: 899px) and (prefers-reduced-motion: no-preference) and (min-height: 640px){
  html.js body[data-pw-chrome="landing"] .tour{
    --tk:.28;
    --ph:calc(844px * var(--tk) + 2 * var(--tbz));
    --stick:calc(var(--head-h, 116px) + 12px + var(--ph) + 34px);
  }
  html.js body[data-pw-chrome="landing"] .tour-sticky{
    position:sticky; top:0; z-index:2; display:flex; flex-direction:column; align-items:center; gap:10px;
    height:var(--stick); margin:0 calc(-1 * var(--gutter)); padding:calc(var(--head-h, 116px) + 12px) var(--gutter) 0;
    background:linear-gradient(var(--mist) calc(100% - 18px), rgba(245,244,240,0));
  }
  html.js body[data-pw-chrome="landing"] .tour-steps{ gap:0; margin-top:0; }
  html.js body[data-pw-chrome="landing"] .tour-step{
    min-height:max(220px, calc((100svh - var(--stick)) * .9));
    padding:0 0 32px;
    scroll-margin-top:calc(var(--stick) - var(--scroll-pad));
  }
  html.js body[data-pw-chrome="landing"] .tour-copy :is(a, button){ scroll-margin-top:calc(var(--stick) + 12px - var(--scroll-pad)); }
  /* jeder Schritt behält sein eigenes Handy für Screenreader, sichtbar ist nur das stehende */
  html.js body[data-pw-chrome="landing"] .tour-art{
    position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;
  }
}
@media (max-width: 899px) and (prefers-reduced-motion: no-preference) and (min-height: 720px){
  html.js body[data-pw-chrome="landing"] .tour{ --tk:.33; }
}
@media (max-width: 899px) and (prefers-reduced-motion: no-preference) and (min-height: 800px){
  html.js body[data-pw-chrome="landing"] .tour{ --tk:.38; }
}
@media (max-width: 899px) and (prefers-reduced-motion: no-preference) and (min-height: 880px){
  html.js body[data-pw-chrome="landing"] .tour{ --tk:.43; }
}

/* ---------- „Ihr Befund": Befundseite und Handy kleiner, damit der Abschnitt auf einen Bildschirm passt */
body[data-pw-chrome="landing"] .duo{ margin-top:40px; gap:40px; }
body[data-pw-chrome="landing"] .step-art{ min-height:0; margin-bottom:20px; }
body[data-pw-chrome="landing"] .paper{ --k:.6; }
body[data-pw-chrome="landing"] .device-step{ --k:.42; --bz:7px; }
body[data-pw-chrome="landing"] .duo-item h3{ font-size:1.125rem; }

/* ---------- „Fortschritt": Karten kompakter */
body[data-pw-chrome="landing"] .board{ margin-top:36px; gap:12px; max-width:980px; }
body[data-pw-chrome="landing"] .g-card{ padding:16px 20px 18px; }
body[data-pw-chrome="landing"] .progress .g-num{ font-size:clamp(1.75rem, 1.4rem + 1vw, 2.25rem); }
body[data-pw-chrome="landing"] .progress .g-chart{ max-height:150px; }
body[data-pw-chrome="landing"] .progress .g-bars{ max-height:96px; }

/* Karten am Handy im Kopfbereich: dunkleres Glas, damit sie über dem hellen Bildschirm lesbar bleiben */
body[data-pw-chrome="landing"] .hero .g-stat{
  background:linear-gradient(180deg, rgba(31,39,64,.88), rgba(19,26,43,.82));
  border-color:rgba(255,255,255,.16);
}
@media (min-width: 1000px){
  body[data-pw-chrome="landing"] .g-stat{ width:196px; }
  body[data-pw-chrome="landing"] .g-a{ left:-28px; }
  body[data-pw-chrome="landing"] .g-d{ right:-28px; }
}

/* „Fortschritt" breit: Text links, Karten rechts (wie die Abschnitte der Website), damit es auf einen Bildschirm passt */
@media (min-width: 1100px){
  body[data-pw-chrome="landing"] .progress > .wrap{
    display:grid; grid-template-columns:minmax(0, .78fr) minmax(0, 1.22fr); column-gap:56px; align-items:center;
  }
  body[data-pw-chrome="landing"] .progress .intro{ text-align:left; margin:0; }
  body[data-pw-chrome="landing"] .progress .intro .lead{ margin-left:0; max-width:34ch; }
  body[data-pw-chrome="landing"] .progress .board{ margin:0; max-width:none; }
  body[data-pw-chrome="landing"] .progress .stage-note{ grid-column:2; margin-top:16px; }
}
body[data-pw-chrome="landing"] .progress .g-logged .g-num{ font-size:clamp(1.4rem, 1.1rem + .8vw, 1.75rem); }

/* =====================================================================================================
   Rechtstexte von Takt (Impressum, Datenschutz, AGB) wie die der Website: hell auch im Dunkelmodus, Figtree,
   Überschriften und Abstände wie .legal in styles.css. Die Bildschirm-App selbst bleibt unberührt.
   ===================================================================================================== */
body[data-pw-chrome="legal"]{
  --bg:#FCFBF9; --ink:#131A2B; --muted:#5E6879; --line:rgba(19,26,43,.11); --accent:#5F68B0;
  color-scheme:light; background:#FCFBF9; color:#131A2B;
  font-family:"Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size:16px; line-height:1.6;
}
body[data-pw-chrome="legal"] > main{
  max-width:calc(820px + 2 * clamp(18px, 4.5vw, 64px)); padding-left:clamp(18px, 4.5vw, 64px); padding-right:clamp(18px, 4.5vw, 64px);
  padding-top:calc(var(--head-h, 110px) + clamp(48px, 6vw, 90px)); padding-bottom:clamp(40px, min(5vw, 8vh), 72px);
}
body[data-pw-chrome="legal"] .top{ display:none; }            /* „Zur Startseite“: der Kopf der Website führt überall hin */
body[data-pw-chrome="legal"] h1{ font-size:clamp(32px, 3.6vw, 50px); font-weight:600; letter-spacing:-.035em; line-height:1; margin:0; }
body[data-pw-chrome="legal"] h1 + p{ font-size:clamp(16px, 1.2vw, 18px); color:#5E6879; margin:22px 0 36px; line-height:1.45; }
body[data-pw-chrome="legal"] h2{ font-size:clamp(19px, 1.5vw, 22px); font-weight:600; margin:2em 0 .6em; letter-spacing:-.018em; line-height:1.1; }
body[data-pw-chrome="legal"] p, body[data-pw-chrome="legal"] li, body[data-pw-chrome="legal"] td{ color:#3B4457; }
body[data-pw-chrome="legal"] p + p{ margin-top:12px; }
body[data-pw-chrome="legal"] main a{ color:#5F68B0; font-weight:600; text-decoration:none; }
body[data-pw-chrome="legal"] main a:hover{ text-decoration:underline; text-underline-offset:3px; }
body[data-pw-chrome="legal"] ul{ padding-left:1.2em; display:grid; gap:8px; }
body[data-pw-chrome="legal"] table{
  background:#fff; border:1px solid rgba(19,26,43,.11); border-radius:20px; border-collapse:separate; border-spacing:0;
  overflow:hidden; font-size:15px; margin:8px 0 28px;
}
body[data-pw-chrome="legal"] th, body[data-pw-chrome="legal"] td{ padding:14px 18px; border-bottom:1px solid rgba(19,26,43,.11); }
body[data-pw-chrome="legal"] tr:last-child > th, body[data-pw-chrome="legal"] tr:last-child > td{ border-bottom:0; }
body[data-pw-chrome="legal"] th{ font-weight:600; color:#131A2B; }
body[data-pw-chrome="legal"] table.stack tr:first-child > th{ background:#F5F4F0; }   /* Kopfzeile der Datenschutz-Tabelle */
html:has(body[data-pw-chrome="legal"]){ color-scheme:light; background:#FCFBF9; }
@media (max-width: 600px){
  body[data-pw-chrome="legal"] table.stack tr{ padding:14px 18px; }
  body[data-pw-chrome="legal"] table.stack td{ padding:0; border:0; }
  body[data-pw-chrome="legal"] th, body[data-pw-chrome="legal"] td{ padding:12px 14px; }
  /* Impressum: Bezeichnung über dem Wert statt zwei schmaler Spalten */
  body[data-pw-chrome="legal"] table:not(.stack) tr{ display:block; padding:12px 16px; border-bottom:1px solid rgba(19,26,43,.11); }
  body[data-pw-chrome="legal"] table:not(.stack) tr:last-child{ border-bottom:0; }
  body[data-pw-chrome="legal"] table:not(.stack) th, body[data-pw-chrome="legal"] table:not(.stack) td{ display:block; padding:0; border:0; }
  body[data-pw-chrome="legal"] table:not(.stack) th{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:#5E6879; margin-bottom:2px; }
}

/* Ende der Landingpage: die Zweckbestimmung der App, klein, wie ein Hinweis der Website */
body[data-pw-chrome="landing"] .pw-purpose{
  max-width:820px; margin:0 auto; padding:28px clamp(18px, 4.5vw, 64px) 36px; text-align:center;
  font-size:13px; line-height:1.55; color:#5E6879;
}
body[data-pw-chrome="landing"] .pw-purpose b{ color:#131A2B; font-weight:600; }