/* TILAS – Website. Die drei Farben des Laufs (Bereit, Feuer, Halt) tragen die Seite, Schrift wie in der App.
   Größen in rem und Umbrüche in em: So wächst alles mit der Schriftgröße des Browsers. */
@font-face{font-family:'Atkinson Hyperlegible Next'; font-style:normal; font-weight:200 800; font-display:swap; src:url(fonts/atkinson-next.woff2) format('woff2');}
:root{
  --ink:#0A0B0C; --ground:#111214; --bone:#F2F1EC; --bone2:#E7E5DE; --paper:#FFFFFF; --red:#E30714; --ready:#F5B700; --fire:#22C55E;
  --m:clamp(1rem,4vw,3.5rem);
  --h1:min(max(1.85rem,9.2vw),10.4vw);
  /* Nach oben begrenzt wie .wrap (100rem): Auf sehr breiten Bildschirmen wuchs die Schrift sonst weiter als die Spalten und zerriss Wörter (Flo) */
  --h2:min(max(1.9rem,4.6vw),9.6vw,4.6rem);
  --big:min(max(2.2rem,8vw),11vw,8rem);
  --gap:clamp(5rem,12vw,10rem);
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:1rem;}
body{margin:0; background:var(--bone); color:var(--ink); font:400 1.125rem/1.55 'Atkinson Hyperlegible Next',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; overflow-wrap:break-word;}
h1,h2{margin:0; font-weight:800; letter-spacing:-.02em; line-height:1.03; hyphens:manual; text-wrap:balance;}
h1{font-size:var(--h1);} .nb{white-space:nowrap;} h2{font-size:var(--h2);} h2.big{font-size:var(--big);}
p{margin:0 0 1em;} p:last-child{margin-bottom:0;}
img{display:block; max-width:100%; height:auto;}
a{color:inherit; text-underline-offset:.18em; text-decoration-thickness:.09em;}
:focus-visible{outline:.2rem solid currentColor; outline-offset:.2rem;}
::selection{background:var(--red); color:#fff;}
.wrap{padding-inline:var(--m); max-width:100rem; margin-inline:auto;}
.sec{padding-block:var(--gap);}
.dark{background:var(--ground); color:var(--bone);}
.bone2{background:var(--bone2);}
.f-ready{background:var(--ready); color:var(--ink);}
.f-fire{background:var(--fire); color:var(--ink);}
.f-halt{background:var(--red); color:#fff;}

/* Knöpfe: flach, eckig, eine Farbe */
.btn{display:inline-block; max-width:100%; overflow-wrap:anywhere; border:0; cursor:pointer; font-family:inherit; font-weight:800; font-size:1.125rem; line-height:1.2; text-decoration:none; padding:1.05em 1.5em; text-align:center; transition:transform .12s ease,background-color .12s ease;}
.btn:hover{transform:translateY(-.12rem);} .btn:active{transform:translateY(.08rem);}
.btn-invert{background:#fff; color:var(--ink);}
.btn-invert:hover{background:var(--bone2);}

/* Kopf: das ganze Feld wechselt die Farbe wie der Lauf in der App */
.hero{position:relative; isolation:isolate; --f:var(--ground); --i:var(--bone); --cta:var(--red); --ctai:#fff; background:var(--f); color:var(--i); display:flex; flex-direction:column; min-height:100vh; min-height:100svh;}
.hero[data-phase=pre]{--f:var(--ready); --i:var(--ink); --cta:var(--ink); --ctai:#fff;}
.hero[data-phase=fire]{--f:var(--fire); --i:var(--ink); --cta:var(--ink); --ctai:#fff;}
.hero[data-phase=halt]{--f:var(--red); --i:#fff; --cta:#fff; --ctai:var(--ink);}
.bar{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1.5rem; padding:1rem var(--m); max-width:100rem; width:100%; margin-inline:auto;}
.mark{display:flex; align-items:center; gap:.65rem; font-weight:800; font-size:1.375rem; text-decoration:none; margin-right:auto;}
.mark img{width:2.5rem; height:2.5rem; border-radius:.55rem;}
.links{display:none; gap:1.5rem;} .links a{text-decoration:none; font-weight:600; padding:.5rem 0;} .links a:hover{text-decoration:underline;}
.navcta{font-weight:800; text-decoration:none; background:var(--i); color:var(--f); padding:.6rem 1rem;}
.navcta:hover{opacity:.88;}
/* Hintergrundfilm: schwarzweiß und unscharf aus dem Video, darüber Raster und Farbe des Felds. Nur Stimmung, die Schrift bleibt lesbar. */
.film{position:absolute; inset:0 0 auto 0; z-index:-1; height:100%; max-height:100vh; max-height:100svh; overflow:hidden; background:var(--ground) url(video/hero-tall.webp) center/cover no-repeat; -webkit-mask-image:linear-gradient(#000 72%,transparent); mask-image:linear-gradient(#000 72%,transparent);}
.film video{display:block; width:100%; height:100%; object-fit:cover;}
.film::before,.film::after{content:''; position:absolute; inset:0;}
.film::before{z-index:1; background-image:radial-gradient(rgba(0,0,0,.36) 1px,transparent 1.5px); background-size:.3rem .3rem;}
.film::after{background:var(--f); opacity:.66;}
.hero[data-phase] .film::after{opacity:.94;} .hero[data-phase] .film::before{display:none;}
.filmctl{display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:.4rem 1rem; padding:0 var(--m) 1rem; max-width:100rem; width:100%; margin-inline:auto;}
.filmbtn{min-height:2.75rem; padding:.5rem .95rem; border:.09rem solid currentColor; background:transparent; color:inherit; font:inherit; font-weight:700; line-height:1.2; cursor:pointer;}
.filmbtn:hover{background:var(--i); color:var(--f);} .filmbtn[hidden]{display:none;}
.herogrid{flex:1; display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(2rem,5vw,4rem); padding:clamp(1.25rem,4vw,3rem) var(--m) clamp(2rem,5vw,4rem); max-width:100rem; width:100%; margin-inline:auto; align-content:center;}
.lead{font-size:clamp(1.125rem,1.7vw,1.5rem); line-height:1.45; margin:1.25rem 0 0; max-width:38em;}
.actions{display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.25rem; margin:1.75rem 0 0;}
.btn-main{background:var(--cta); color:var(--ctai);}
.demo .phase{font-weight:800; font-size:clamp(2.25rem,7vw,4.75rem); line-height:1; margin:0; letter-spacing:-.01em;}
.demo .clock{font-weight:800; font-size:min(max(5.75rem,15vw),29vw,15rem); line-height:.98; margin:.04em 0 .08em -.03em; font-variant-numeric:tabular-nums; letter-spacing:-.03em; white-space:nowrap;}
.demo .info{font-size:clamp(1.125rem,1.7vw,1.5rem); font-weight:600; margin:0; min-height:1.5em;}
.democtl{display:grid; grid-template-columns:1fr; gap:.85rem; margin-top:1.25rem;}
.democtl[hidden]{display:none;}
.pick{display:grid; gap:.3rem; font-weight:600;}
.pick select{font-family:inherit; font-weight:600; font-size:1.0625rem; line-height:1.3; color:var(--ink); background:var(--bone); border:0; border-radius:0; padding:.8em .8em; width:100%; max-width:100%; min-height:3rem;}
.btn-start{background:var(--i); color:var(--f); font-size:clamp(1.375rem,2.4vw,1.75rem); padding:.85em 1em; width:100%;}
.tone{display:flex; align-items:center; gap:.55rem; font-weight:600;}
.tone input{width:1.35rem; height:1.35rem; accent-color:var(--cta); margin:0;}

/* Überschrift links, Text rechts */
.twocol{display:grid; grid-template-columns:minmax(0,1fr); gap:1.5rem; margin-bottom:0;}
#timer .twocol{margin-bottom:clamp(2.5rem,6vw,4.5rem);}
.intro{max-width:44em; margin:1.25rem 0 0; font-size:clamp(1.125rem,1.5vw,1.3125rem);}

/* Drei Felder in der Breite der Seite (Flo: nicht über den ganzen Bildschirm), die App mit Rahmen wie ein Handy, sonst verschwimmt sie mit dem Feld */
.fields{display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(.5rem,1.2vw,1rem); max-width:100rem; margin-inline:auto; padding-inline:var(--m);}
.field{margin:0; padding:clamp(1.25rem,3vw,2.5rem); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1.25rem; align-items:center;}
.field img{width:100%; border-radius:1rem; box-shadow:0 0 0 .3rem var(--ink);}
.field figcaption{order:-1; font-size:1.125rem;}
.field b{display:block; font-size:clamp(1.75rem,3vw,2.75rem); line-height:1.05; font-weight:800; margin-bottom:.35em; letter-spacing:-.015em;}

/* Merkmale: Größe statt Kästchen */
.facts{display:grid; grid-template-columns:minmax(0,1fr); gap:1.75rem 3rem; margin:clamp(3rem,6vw,5rem) 0 0;}
.facts dt{font-weight:800; font-size:clamp(1.25rem,1.9vw,1.625rem); line-height:1.2; margin-bottom:.3em;}
.facts dd{margin:0;}

/* Verbände: echte Tabelle */
.tablebox{margin-top:clamp(2.5rem,5vw,4rem);}
.feds{width:100%; border-collapse:collapse; font-size:1.0625rem;}
.feds thead{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%);}
.feds tr{display:grid; grid-template-columns:minmax(0,1fr); gap:.25rem; padding:1.15rem 0; border-top:.0625rem solid #3A3A3F;}
.feds th,.feds td{padding:0; text-align:left; font-weight:400;}
.feds b{display:block; font-size:clamp(1.625rem,3.2vw,2.75rem); font-weight:800; line-height:1.05; letter-spacing:-.015em;}
.feds td:nth-of-type(1){margin-top:.2rem;}
.feds .n{font-variant-numeric:tabular-nums; font-weight:800;}
.feds td.n::before{content:attr(data-l) ' '; font-weight:400;}

/* Bild und Text nebeneinander */
.split{display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(2rem,6vw,5rem); align-items:center;}
.splittext p{max-width:38em;}
.splittext h2{margin-bottom:.55em;}
.shot{width:100%; max-width:27rem; margin-inline:auto;}
.note{background:rgba(0,0,0,.06); padding:1rem 1.15rem;}
.dark .note{background:rgba(255,255,255,.09);}
.rows{margin:1.5rem 0; display:grid; gap:1.1rem;}
.rows dt{font-weight:800; font-size:clamp(1.25rem,1.9vw,1.5rem); line-height:1.2; margin-bottom:.2em;}
.rows dd{margin:0; max-width:38em;}
.pair{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(.75rem,2vw,1.5rem);}
.pair .shot{max-width:none;}
.trio{display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(2.5rem,4vw,3.5rem); margin-top:clamp(2.5rem,5vw,4rem);}
.trio figure{margin:0;}
.trio img{width:100%; max-width:27rem;}
.trio figcaption{margin-top:1rem; max-width:27rem;}
.trio figcaption b{display:block; font-size:1.25rem; line-height:1.25; font-weight:800; margin-bottom:.2em;}
.after{margin-top:clamp(2.5rem,5vw,4rem); max-width:50em; font-size:clamp(1.125rem,1.5vw,1.3125rem);}

/* Fragen */
.faq{display:grid; grid-template-columns:minmax(0,1fr); gap:2rem;}
.qa details{background:var(--paper); margin-bottom:.5rem;}
.qa summary{cursor:pointer; font-weight:800; font-size:clamp(1.125rem,1.6vw,1.3125rem); line-height:1.3; padding:1.05rem 3rem 1.05rem 1.15rem; position:relative; list-style:none;}
.qa summary::-webkit-details-marker{display:none;}
.qa summary::after{content:'+'; position:absolute; right:1.1rem; top:.8rem; font-size:1.625rem; line-height:1.2; font-weight:600; transition:transform .15s ease;}
.qa details[open] summary::after{transform:rotate(45deg);}
.qa summary:hover{background:var(--bone2);}
.qa details p{padding:0 1.15rem 1.15rem; margin:0; max-width:46em;}

/* Schluss: Name über die ganze Breite */
.foot{background:var(--ground); color:var(--bone); padding-block:clamp(3rem,7vw,6rem) 2rem; overflow:hidden;}
.word{font-weight:800; font-size:min(33vw,33.5rem); line-height:.86; letter-spacing:-.035em; margin:0 0 .9rem -.035em; white-space:nowrap;}
.acro{margin:0 0 1.5rem; font-size:clamp(1.125rem,1.7vw,1.5rem);} .acro b{color:var(--red); font-weight:800;}
.legal{max-width:52em; margin:0 0 1.25rem;}
.flinks{display:flex; flex-wrap:wrap; gap:.5rem 1.75rem; margin:0; font-weight:600;}
.flinks a{padding:.4rem 0; overflow-wrap:anywhere;}

/* Rechtstexte */
.page{max-width:44rem; margin:0 auto; padding:2rem var(--m) 4rem;}
.page h1{font-size:min(max(2rem,5vw),10vw); margin:1.5rem 0 1rem;} .page h2{font-size:1.5rem; margin:2rem 0 .5rem; letter-spacing:-.01em;}
.todo{background:#FBE3E4; color:#7A0A10; padding:.05em .35em;}

/* Bewegung: nur beim Hereinkommen, nie versteckt ohne Skript */
html.js .rise{opacity:0; transform:translateY(1.25rem); transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1);}
html.js .rise.in{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  html.js .rise{opacity:1; transform:none; transition:none;}
  .btn,.qa summary::after{transition:none;} .btn:hover,.btn:active{transform:none;}
}

@media (orientation:landscape){
  .film{background-image:url(video/hero-wide.webp);}
}
@media (min-width:38em){
  .democtl{grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:end;}
  .tone{grid-column:1/-1;}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr));}
  .trio{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (min-width:48em){
  .feds thead{position:static; width:auto; height:auto; clip-path:none;}
  .feds thead th{font-weight:600; padding-bottom:.6rem;}
  .feds tr{display:table-row; border:0; padding:0;}
  .feds tbody th,.feds td{display:table-cell; padding:1.15rem 1.25rem 1.15rem 0; border-top:.0625rem solid #3A3A3F; vertical-align:baseline;}
  .feds tbody th{width:40%;}
  .feds .n{text-align:right; padding-right:0; padding-left:1.25rem; width:1%; white-space:nowrap;}
  .feds td.n::before{content:none;}
  .field{grid-template-columns:minmax(0,1fr);}
  .field figcaption{order:0;}
  .fields{grid-template-columns:repeat(3,minmax(0,1fr));}
  .field{align-items:start; align-content:start;}
  .field img{max-width:20rem; margin-inline:auto;}
}
@media (min-width:60em){
  .links{display:flex;}
  :root{--h1:min(5.2vw,5.4rem);}
  .herogrid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); align-items:center;}
  .twocol{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(2rem,6vw,6rem); align-items:end;}
  .split{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);}
  .split.rev{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);}
  .trio{grid-template-columns:repeat(3,minmax(0,1fr));}
  .facts{grid-template-columns:repeat(3,minmax(0,1fr));}
  .faq{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:clamp(2rem,6vw,6rem); align-items:start;}
}