/* hilfmirmal v11 · Seite /zeitcheck/ (vorlagen/zeitcheck.j2, inhalte/seiten/zeitcheck.md).
   Baut auf schale.css und seite.css auf. Der Check nutzt dieselben Klassen wie die Startseite (assets/v11/site.css,
   Abschnitt 23:00: check-grid, ci, chip, check-result, cr-*), hier für die Unterseite nachgebaut: dunkle Bühne in
   night wie die Szene, Ergebniskarte in paper wie Papier unter der Lampe.
   Abweichungen zur Startseite, bewusst: Chips, Kästchen und Knöpfe mindestens 44 x 44 px (Handy, QR-Code), der
   Haken auf der dunklen Bühne in sky-2 statt blue (Kontrast auf night), kein Wasserzeichen (spart eine Datei).
   Farben nur aus designsystem/tokens.json; Transparenzen sind Token-Farben mit Alpha (on-dark, sky-2, ink). */

:root{
  --night:#1c2a35;
  --on-dark:#f7f5f2;
  --on-dark-2:rgba(247,245,242,.74);
  --zc-linie-dunkel:rgba(247,245,242,.14);   /* on-dark mit Alpha, wie die Trenner der Szene 23:00 */
  --zc-rand:clamp(8px,1.6vw,24px);           /* Abstand der Bühne zum Fensterrand */
}

/* ---------- Kopf der Seite ---------- */
.zc .seite-kopf{padding-bottom:clamp(32px,6vh,64px)}
.zc .seite-kopf .big{max-width:12em;font-size:clamp(2.3rem,1rem + 3.9vw,5.4rem)}
.zc .seite-kopf .say{margin-top:1.4rem}
.zc .seite-kopf .dm{margin-top:1.6rem}

/* ---------- Bühne: der Check auf night ---------- */
.zc-buehne{position:relative;margin-inline:var(--zc-rand);padding-block:clamp(44px,8vh,96px);border-radius:clamp(24px,3vw,40px);background:radial-gradient(ellipse 60% 46% at 50% 36%,rgba(159,205,238,.09) 0%,transparent 70%),var(--night);color:var(--on-dark);isolation:isolate}
.zc-buehne>.inner{padding-inline:calc(var(--gutter) + var(--rail) - var(--zc-rand)) calc(var(--gutter) - var(--zc-rand))}
.zc-titel{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,1.1rem + 2.8vw,4.2rem);line-height:1.04;letter-spacing:-.01em;max-width:13em;text-wrap:balance;color:var(--on-dark)}
.zc-titel em{color:var(--sky-2)}
.zc-punkte{color:var(--sky-2);margin-left:.04em}
.zc-buehne .say{margin-top:1.2rem;color:var(--on-dark-2)}
.zc-ohne-js{margin-top:1.2rem;max-width:34em;color:var(--on-dark)}
.zc-buehne :focus-visible{outline-color:var(--sky-2)}
.zc-buehne .check-result :focus-visible{outline-color:var(--blue)}

.check-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(24px,4vw,64px);margin-top:2.6rem;align-items:start}
.check-list{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--zc-linie-dunkel)}
.ci{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-top:1px solid var(--zc-linie-dunkel);padding:.35rem 0;transition:background-color .4s}
.ci.on{background:rgba(159,205,238,.07)}
.ci-toggle{display:flex;align-items:center;gap:.9rem;flex:1;min-width:0;min-height:48px;margin:0;background:none;border:0;padding:.7rem 0;font:inherit;font-size:clamp(1.02rem,.95rem + .45vw,1.3rem);font-weight:500;line-height:1.3;color:var(--on-dark);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ci-toggle:focus-visible{border-radius:10px}
.ci-box{flex:none;width:1.35em;height:1.35em;border-radius:50%;border:1.5px solid rgba(247,245,242,.42);transition:background-color .35s,border-color .35s,transform .35s var(--ease)}
.ci.on .ci-box{background:var(--sky-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%231d2b36' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat;border-color:var(--sky-2);transform:scale(1.08)}
.ci-hours{display:flex;gap:.35rem;flex:none}
.chip{min-width:46px;min-height:44px;margin:0;padding:.45rem .6rem;border-radius:999px;border:1.5px solid rgba(247,245,242,.24);background:transparent;font:inherit;font-size:.86rem;font-weight:600;line-height:1.1;color:var(--on-dark-2);cursor:pointer;font-variant-numeric:tabular-nums;-webkit-tap-highlight-color:transparent;transition:background-color .3s,color .3s,border-color .3s}
.chip:hover{color:var(--on-dark);border-color:var(--sky-2)}
.chip:focus-visible{border-radius:999px}
.chip[aria-checked="true"]{background:var(--sky-2);border-color:var(--sky-2);color:var(--ink)}

/* Ergebniskarte: hell wie Papier, klebt am Desktop neben der Liste */
.check-result{position:sticky;top:6.5rem;background:var(--paper);color:var(--ink);border-radius:28px;padding:clamp(1.3rem,2.6vw,2.2rem);box-shadow:var(--card-shadow)}
.cr-label{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-deep)}
.cr-hours{display:flex;align-items:flex-end;gap:1rem;margin-top:.8rem}
.cr-hours strong{font-family:var(--serif);font-weight:400;font-size:clamp(4.6rem,3rem + 5vw,8.5rem);line-height:.8;color:var(--blue);font-variant-numeric:tabular-nums}
.cr-hours span{font-size:1.05rem;font-weight:500;line-height:1.2;padding-bottom:.5rem}
.cr-days{font-size:1.1rem;line-height:1.45;color:var(--ink-2);margin-top:1rem;min-height:2.9em}
.cr-days b{color:var(--ink)}
.cr-does{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.9rem;align-items:start;margin:1.4rem 0 1.4rem;padding:1.1rem 1.2rem;border-radius:18px;background:var(--sky-pale);min-height:10.5rem}
.cr-does .dm-face{font-size:34px}
.cr-does small{display:block;font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-deep);margin-bottom:.4rem}
.cr-does p{font-size:1.02rem;line-height:1.45}
.check-result .zc-erik{margin-top:0;max-width:none}
.check-result .zc-erik .dm-bubble{background:var(--sand);box-shadow:none;font-size:1rem}
.check-result .zc-cta{margin-top:1.1rem}
.check-result .fine{font-size:.88rem;line-height:1.5;color:var(--ink-3);margin-top:1.1rem}
html:not(.js) .check-result{display:none}
.cr-mini{display:none}

/* ---------- Was dein digitaler Mitarbeiter übernimmt ---------- */
.zc-uebernimmt{padding-block:clamp(56px,10vh,120px) clamp(32px,6vh,72px)}
.zc-h2{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,1.2rem + 2.4vw,3.8rem);line-height:1.05;letter-spacing:-.01em;max-width:14em;text-wrap:balance}
.zc-uebernimmt .say{margin-top:1.2rem}
.zc-aufgaben{list-style:none;margin:2.4rem 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 1.2rem;max-width:76rem}
.zc-aufgabe{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.9rem;align-items:start;padding:1.15rem 1.3rem 1.3rem 1.1rem;border-radius:20px;background:var(--paper);box-shadow:var(--bubble-shadow)}
.zc-aufgabe:nth-child(4n+2),.zc-aufgabe:nth-child(4n+3){background:var(--sky-air)}   /* Schachbrett in zwei Spalten */
.zc-aufgabe .dm-face{font-size:34px;animation:none}
.zc-aufgabe-titel{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:1.35;color:var(--blue-deep)}
.zc-aufgabe p{margin-top:.45rem;font-size:1.02rem;line-height:1.5;color:var(--ink)}

/* ---------- FAQ und Schluss ---------- */
.zc-faq{padding-top:clamp(24px,4vh,48px)}
.zc-faq .faq-punkt summary{gap:1rem;justify-content:space-between;list-style:none}
.zc-faq .faq-punkt summary::-webkit-details-marker{display:none}
.zc-faq .faq-punkt summary::after{content:"";flex:none;width:.55rem;height:.55rem;margin-right:.3rem;border-right:2px solid var(--blue-deep);border-bottom:2px solid var(--blue-deep);transform:translateY(-25%) rotate(45deg);transition:transform .3s var(--ease)}
.zc-faq .faq-punkt[open] summary::after{transform:translateY(15%) rotate(-135deg)}
.zc-faq .faq-antwort p{max-width:36em}
.zc-schluss{padding-bottom:clamp(24px,4vh,48px)}
.zc-schluss .erstgespraech{margin-top:0}

/* ---------- Mittel und Handy (Brüche wie auf der Startseite) ---------- */
@media (max-width:1099px){
  .check-grid{grid-template-columns:1fr}
  .check-result{position:relative;top:0}
  .js .cr-mini{display:flex;align-items:center;justify-content:space-between;gap:1rem;white-space:nowrap;position:sticky;bottom:12px;z-index:5;margin:0;background:var(--ink);color:var(--paper);border-radius:999px;padding:.4rem .4rem .4rem 1.2rem;box-shadow:0 0 0 1px rgba(247,245,242,.16),0 18px 40px -18px rgba(29,43,54,.6);font-size:.95rem}
  .cr-mini b{font-family:var(--serif);font-weight:400;font-size:1.5rem;line-height:1;margin-right:.3rem;white-space:nowrap}
  .cr-mini a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;background:var(--paper);color:var(--ink);text-decoration:none;font-weight:600;font-size:.82rem;border-radius:999px;padding:.45rem .9rem;text-align:center;line-height:1.25;white-space:normal;text-wrap:balance;min-width:0;max-width:62%}
}
/* Tablet: Die Karte steht unter der Liste und ist breit, also Summe links, Blase rechts */
@media (min-width:761px) and (max-width:1099px){
  .check-result{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:clamp(20px,3vw,40px);align-items:start}
  .check-result>*{grid-column:1}
  .check-result .cr-does{grid-column:2;grid-row:1/span 3;margin:0;min-height:0;align-self:stretch}
  .check-result .zc-erik,.check-result .fine{grid-column:1/-1}
  .check-result .zc-erik{margin-top:1.6rem}
  .check-result .zc-cta{justify-self:start}
}
@media (max-width:900px){
  .zc-buehne>.inner{padding-inline:16px}
  .zc-aufgaben{grid-template-columns:1fr}
  .zc-aufgabe:nth-child(n){background:var(--paper)}
  .zc-aufgabe:nth-child(even){background:var(--sky-air)}
}
@media (max-width:760px){
  .ci{flex-direction:column;align-items:stretch;gap:0;padding-bottom:.8rem}
  .ci-hours{padding-left:2.25em}
  .chip{min-width:0;flex:1}
  .check-grid{margin-top:2rem}
  /* Handy (QR-Code): Kopf kompakter, damit die dunkle Bühne schon im ersten Bild anklingt */
  .zc .seite-kopf{padding-top:18px;padding-bottom:28px}
  .zc .seite-kopf .kicker{margin-bottom:1rem}
  .zc .seite-kopf .say{margin-top:1rem}
  .zc .seite-kopf .dm{margin-top:1.1rem}
  .zc .seite-kopf .dm-face{font-size:42px}
  .zc-buehne{padding-block:34px 40px}
}
/* Ganz schmal (320 bis 400 px): Chips unter das Kästchen, damit jeder mindestens 44 px breit bleibt */
@media (max-width:400px){
  .ci-hours{padding-left:0;gap:.3rem}
  .cr-hours strong{font-size:4.2rem}
  .zc-aufgabe{padding:1rem 1rem 1.15rem .9rem;gap:.75rem}
  .zc-aufgabe .dm-face{font-size:28px}
}

/* ---------- Bewegung nur, wenn erwünscht ---------- */
@media (prefers-reduced-motion:no-preference){
  .cr-does.swap p{animation:zc-tausch .7s var(--ease)}
}
@keyframes zc-tausch{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .ci,.ci-box,.chip,.zc-faq .faq-punkt summary::after{transition:none}
  .ci.on .ci-box{transform:none}
}

@media print{
  .zc-buehne{margin:0;background:none;color:var(--ink)}
  .zc-titel,.ci-toggle{color:var(--ink)}
  .zc-buehne .say{color:var(--ink-2)}
  .ci-hours,.cr-mini,.check-result{display:none}
  .zc-aufgabe{box-shadow:none;border:1px solid var(--line)}
}