/* =========================================================================
   FOKALiS – nur Seite „AI Automation“
   1. Protokoll im Seitenkopf (läuft langsam wie ein Abspann)
   2. „Ihr Tag. Neu geschnitten.“ – Schnitt-Zeitleiste mit zwei Spuren:
      Ein Abspielkopf fährt beim Scrollen über den Tag; jede Routine-Aufgabe,
      die er erreicht, gleitet auf die KI-Spur. Auf Ihrer Spur bleibt „frei“.
   ========================================================================= */

/* ---------- 1. PROTOKOLL ---------------------------------------------- */
.log{margin:0;align-self:end;min-width:0;background:rgba(10,10,10,.55);border:1px solid var(--line-dark);border-radius:var(--radius);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.log-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 20px;border-bottom:1px solid var(--line-dark);
  font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-muted)}
.log-rec{display:flex;align-items:center;gap:10px}
.log-rec::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold);flex:none;animation:sub-blink 4s ease-in-out infinite}
.log-note{flex:none;padding:4px 9px;border:1px solid rgba(255,255,255,.25);border-radius:999px;letter-spacing:.16em}
.log-window{position:relative;height:clamp(250px,36vh,340px);overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 16%,#000 80%,transparent);mask-image:linear-gradient(180deg,transparent,#000 16%,#000 80%,transparent)}
.log-track{display:flex;flex-direction:column}
.log-roll .log-track{animation:log-roll var(--roll-speed,70s) linear infinite}
.log:hover .log-track,.log:focus-within .log-track{animation-play-state:paused}
@keyframes log-roll{to{transform:translate3d(0,-50%,0)}}
.log-list{list-style:none;padding:0 20px}
.log-list li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:18px;row-gap:4px;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.log-time{grid-row:span 2;font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--on-dark-muted);font-variant-numeric:tabular-nums;padding-top:3px}
.log-what{text-wrap:balance;font-family:var(--font-head);font-weight:300;text-transform:uppercase;letter-spacing:.03em;font-size:clamp(17px,1.4vw,20px);line-height:1.2;color:var(--white)}
.log-done{display:flex;align-items:baseline;gap:10px;font-size:12.5px;font-weight:500;line-height:1.45;color:var(--gold)}
.log-done::before{content:"";flex:none;width:.85em;height:.45em;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-.2em) rotate(-45deg)}
@media (max-width:1020px){.log{max-width:560px;width:100%}}
@media (max-width:760px){.log-window{height:230px}.log-list{padding:0 16px}.log-head{padding:12px 16px}}

/* ---------- 2. SCHNITT-ZEITLEISTE ------------------------------------ */
.cut .section-head{margin-bottom:clamp(40px,5vw,72px)}
.daytrack{
  --p:1;                                    /* ohne JS / bei weniger Bewegung: Endzustand */
  --ph:clamp(0,(var(--p) - .12) / .5,1);    /* Position des Abspielkopfs 0–1 */
  --row:88px;--gap:18px;--label:76px;--bpy:6px;--bpx:3px;
  position:relative;display:grid;grid-template-columns:var(--label) repeat(30,minmax(0,1fr));
  grid-template-rows:30px var(--row) var(--row);row-gap:var(--gap)}
.js .daytrack{--p:0}
.dt-scale{grid-column:2 / -1;grid-row:1;display:grid;grid-template-columns:repeat(30,minmax(0,1fr));
  font-size:11px;font-weight:600;letter-spacing:.12em;color:var(--on-dark-muted);font-variant-numeric:tabular-nums}
.dt-scale span{grid-column:var(--s);grid-row:1;position:relative;padding-left:6px;border-left:1px solid rgba(255,255,255,.18);line-height:1;align-self:end;padding-bottom:8px}
.dt-scale .dt-scale-end{grid-column:30;justify-self:end;border-left:0;border-right:1px solid rgba(255,255,255,.18);padding:0 6px 8px 0}
.dt-label{display:grid;align-content:center;gap:4px;font-family:var(--font-head);font-weight:400;font-size:24px;text-transform:uppercase;line-height:1;color:var(--white)}
.dt-label span{font-family:var(--font-body);font-size:10px;font-weight:600;letter-spacing:.2em;color:var(--on-dark-muted)}
.dt-label--you{grid-column:1;grid-row:2}
.dt-label--ki{grid-column:1;grid-row:3;color:var(--gold)}
.dt-lane{grid-column:2 / -1;border-radius:var(--radius)}
.dt-lane--you{grid-row:2;background:rgba(255,255,255,.035);border:1px solid var(--line-dark)}
.dt-lane--ki{grid-row:3;background:rgba(236,176,20,.04);border:1px dashed rgba(236,176,20,.35)}

.dt-list{display:contents;list-style:none}
.dt-block{--m:0;position:relative;grid-row:2;grid-column:calc(var(--s) + 1) / span var(--l);padding:var(--bpy) var(--bpx);min-width:0}
/* Die Routine wandert, sobald der Abspielkopf die Mitte des Blocks erreicht */
.dt-block--routine{--m:clamp(0,(var(--ph) - (var(--s) - 1 + var(--l) / 2) / 30) * 1000,1)}
.dt-block--core{--m:clamp(0,(var(--ph) - .97) * 1000,1)}
.dt-card{position:relative;z-index:1;height:100%;display:grid;align-items:center;padding:8px 10px;border-radius:3px;
  background:#323333;border:1px solid rgba(255,255,255,.14);color:var(--on-dark);
  font-size:12.5px;font-weight:500;line-height:1.3;
  transform:translate3d(0,calc(var(--m) * (var(--row) + var(--gap))),0);
  transition:transform 1.4s var(--ease-glide),background-color 1.2s var(--ease-glide),color 1.2s var(--ease-glide)}
.dt-card>span{grid-area:1 / 1;min-width:0}
.dt-card::after{content:"";position:absolute;inset:-1px;border-radius:3px;border:1px solid var(--gold);opacity:var(--m);transition:opacity 1.2s var(--ease-glide) .4s;pointer-events:none}
.dt-before{opacity:calc(1 - var(--m));transition:opacity .8s var(--ease-glide)}
.dt-after{display:flex;align-items:baseline;gap:8px;color:var(--gold);opacity:var(--m);transition:opacity 1.2s var(--ease-glide) .6s}
.dt-after::before{content:"";flex:none;width:.8em;height:.42em;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-.2em) rotate(-45deg)}
.dt-block--routine .dt-card{background:color-mix(in srgb,#2A2A20 calc(var(--m) * 100%),#323333)}
/* zurückgebliebener Platz auf Ihrer Spur */
.dt-block--routine::before{content:"frei";position:absolute;inset:var(--bpy) var(--bpx);display:grid;place-items:center;border-radius:3px;
  border:1px dashed rgba(236,176,20,.55);font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
  opacity:var(--m);transition:opacity 1.4s var(--ease-glide) .8s}
/* Das Wesentliche wird am Ende „scharf gestellt“ */
.dt-block--core .dt-card{transform:none;background:color-mix(in srgb,var(--white) calc(var(--m) * 100%),#323333);color:color-mix(in srgb,var(--anth) calc(var(--m) * 100%),var(--on-dark));
  transition:background-color 1.6s var(--ease-glide),color 1.6s var(--ease-glide)}
.dt-block--core .dt-card::after{display:none}

/* Abspielkopf */
.dt-head{position:absolute;z-index:3;top:18px;bottom:-6px;left:calc(var(--label) + (100% - var(--label)) * var(--ph));width:1px;margin-left:-.5px;
  background:var(--gold);pointer-events:none;opacity:calc(1 - var(--ph) * .6)}
.dt-head::before{content:"";position:absolute;left:-5px;top:-2px;width:11px;height:11px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 5px rgba(236,176,20,.18)}

.dt-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:20px 48px;margin-top:clamp(40px,5vw,64px);padding-top:28px;border-top:1px solid var(--line-dark)}
.dt-claim{font-family:var(--font-head);font-weight:300;text-transform:uppercase;font-size:clamp(24px,2.8vw,40px);line-height:1.15;color:var(--white)}
.dt-note{max-width:52ch;font-size:14px;color:var(--on-dark-muted)}

/* schmale Desktops: Haken weg, damit „Telefon-Agent“ in die Karte passt */
@media (min-width:1100px) and (max-width:1279px){
  .dt-card{padding:8px 7px;font-size:12px}
  .dt-after::before{display:none}
}

/* Hochkant unter 1100 px: Stunden laufen nach unten, Spuren stehen nebeneinander */
@media (max-width:1099px){
  .daytrack{--row:22px;--gap:12px;--label:34px;--bpy:2px;--bpx:5px;
    grid-template-columns:var(--label) minmax(0,1fr) minmax(0,1fr);grid-template-rows:56px repeat(30,var(--row));row-gap:0;column-gap:var(--gap)}
  .dt-scale{grid-column:1;grid-row:2 / -1;grid-template-columns:1fr;grid-template-rows:repeat(30,minmax(0,1fr))}
  .dt-scale span{grid-column:1;grid-row:var(--s);border-left:0;border-top:1px solid rgba(255,255,255,.18);padding:4px 0 0;align-self:start}
  .dt-scale .dt-scale-end{grid-column:1;grid-row:30;align-self:end;justify-self:start;border-right:0;border-top:0;border-bottom:1px solid rgba(255,255,255,.18);padding:0 0 4px}
  .dt-label{align-content:end;padding-bottom:12px;font-size:20px}
  .dt-label--you{grid-column:2;grid-row:1}
  .dt-label--ki{grid-column:3;grid-row:1}
  .dt-lane{grid-row:2 / -1}
  .dt-lane--you{grid-column:2}
  .dt-lane--ki{grid-column:3}
  .dt-block{grid-column:2;grid-row:calc(var(--s) + 1) / span var(--l)}
  .dt-card{font-size:12.5px;padding:6px 10px;transform:translate3d(calc(var(--m) * (100% + 2 * var(--bpx) + var(--gap))),0,0)}
  .dt-head{top:calc(56px + (100% - 56px) * var(--ph));bottom:auto;left:var(--label);right:0;width:auto;height:1px;margin:-.5px 0 0}
  .dt-head::before{left:-6px;top:-5px}
}

@media (max-width:420px){
  .daytrack{--label:28px;--gap:8px;--bpx:3px}
  .dt-card{font-size:11.5px;padding:6px 6px}
  .dt-after::before{display:none}
  .dt-label{font-size:17px}
}

@media (prefers-reduced-motion:reduce){
  .js .daytrack{--p:1}
  .log-track{animation:none!important}
}

/* Fallbeispiel (FOKALiS CMS, 12.10.): Link nur so breit wie sein Text; Ü-Punkte im Titel brauchen Luft */
.proof .case-link{justify-self:start;color:var(--white)}
.proof .case-link:hover{color:var(--gold)}
.proof .case h3{line-height:1.16}