/* ==========================================================================
   Smart Serve – Seite «Zeitersparnis» (DE/FR/IT/EN)
   Konzept: Zahlen & Vorher/Nachher. Lädt nach ss-site.css und ss-pages-b.css.
   Nur Blau als Akzent; «vorher» = neutrales Grau, «mit Smart Serve» = Blau.
   ========================================================================== */

.sst-sr {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Balken (gemeinsam) ---------- */
.sst-track { position: relative; height: 12px; border-radius: 99px; background: rgba(255,255,255,.06); overflow: hidden; }
.sst-fill {
    display: block; height: 100%; width: 0; border-radius: 99px;
    transition: width 1.1s var(--ss-ease, ease);
}
.sst-fill--before { background: rgba(229,234,245,.26); }
.sst-fill--after { background: linear-gradient(90deg, var(--ss-blue, #3874ff), var(--ss-blue-bright, #6f9bff)); box-shadow: 0 0 18px rgba(56,116,255,.45); }
/* Animation: Breite wird erst gesetzt, wenn der Container eingeblendet ist (ss-site.js setzt .is-in) */
.is-in .sst-fill { width: var(--w, 0%); }
.is-in .sst-fill--after { transition-delay: .25s; }

/* ==========================================================================
   HERO: links Text, rechts «Zeitkarte»
   ========================================================================== */
.sst-hero { position: relative; padding: 76px 0 72px; overflow: hidden; }
.sst-hero::before {
    content: ""; position: absolute; z-index: 0; pointer-events: none;
    width: 820px; height: 820px; top: -380px; right: -220px; border-radius: 50%;
    background: radial-gradient(circle, rgba(56,116,255,.20), transparent 62%);
}
.sst-hero > .ss-container { position: relative; z-index: 1; }
.sst-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; }
.sst-hero h1 {
    font-size: clamp(2rem, 1.3rem + 2.4vw, 3.25rem) !important; color: #fff; margin: 0 0 1.2rem;
    text-wrap: balance; -webkit-hyphens: manual; hyphens: manual;
}
.sst-hero h1 em { font-style: normal; color: var(--ss-blue-bright, #6f9bff); }
.sst-hero .ss-lead { margin: 0 0 2rem; max-width: 36rem; }
.sst-hero .ss-hero2__cta { margin-bottom: 0; }

/* Zeitkarte */
.sst-timecard {
    position: relative; padding: 30px 30px 26px; border-radius: 26px;
    background: linear-gradient(165deg, #172243 0%, var(--ss-card, #121829) 70%);
    border: 1px solid rgba(56,116,255,.28);
    box-shadow: 0 40px 90px rgba(0,0,0,.45), 0 0 0 1px rgba(56,116,255,.05);
}
.sst-timecard__kicker {
    display: inline-flex; align-items: center; gap: .45rem; margin-bottom: 1.5rem;
    font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ss-muted);
}
.sst-timecard__kicker i { font-size: 1.05rem; color: var(--ss-blue-bright, #6f9bff); letter-spacing: 0; }
.sst-meter { display: grid; gap: 22px; }
.sst-meter__label { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .55rem; }
.sst-meter__label span { font-size: .92rem; font-weight: 700; color: var(--ss-muted); }
.sst-meter__label b { font-family: "Inter Tight", "Nunito Sans", sans-serif; font-variant-numeric: tabular-nums; font-size: 1.6rem; font-weight: 800; color: #fff; letter-spacing: -.03em; line-height: 1; }
.sst-meter__row--after .sst-meter__label b { color: var(--ss-blue-bright, #6f9bff); }
.sst-meter .sst-track { height: 18px; }
/* gewonnene Zeit als gestrichelte «Lücke» im unteren Balken */
.sst-meter__row--after .sst-track {
    background: repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 6px, rgba(255,255,255,.07) 6px 12px);
}
.sst-timecard__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--ss-line); }
.sst-timecard__stats b {
    display: block; font-family: "Inter Tight", "Nunito Sans", sans-serif; font-variant-numeric: tabular-nums;
    font-size: clamp(2rem, 1.6rem + 1.4vw, 2.7rem); font-weight: 800; color: #fff; letter-spacing: -.04em; line-height: 1;
}
.sst-timecard__stats b small { font-size: .5em; color: var(--ss-blue-bright, #6f9bff); margin-left: .08em; letter-spacing: 0; }
.sst-timecard__stats span { display: block; margin-top: .45rem; font-size: .86rem; color: var(--ss-muted); font-weight: 600; line-height: 1.35; }
.sst-timecard__note { margin: 18px 0 0; font-size: .78rem; color: var(--ss-faint); line-height: 1.5; }
.sst-timecard__note a { color: var(--ss-blue-bright, #6f9bff); font-weight: 700; text-decoration: none; }
.sst-timecard__note a:hover { text-decoration: underline; }

@media (max-width: 991px) {
    .sst-hero { padding: 44px 0 48px; }
    .sst-hero__grid { grid-template-columns: 1fr; gap: 36px; }
    .sst-timecard { max-width: 560px; }
}
@media (max-width: 480px) {
    .sst-timecard { padding: 24px 20px 20px; border-radius: 22px; }
    .sst-meter__label b { font-size: 1.35rem; }
}

/* ==========================================================================
   Abschnitts-Kopf links/rechts (Rechner, Alltag)
   ========================================================================== */
.sst-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 16px 56px; align-items: end; margin-bottom: 44px; }
.sst-head .ss-h2 { margin: 0; }
.sst-head .ss-lead { margin: 0; }
@media (max-width: 991px) { .sst-head { grid-template-columns: 1fr; margin-bottom: 32px; } }

/* ==========================================================================
   RECHNER als Herzstück
   ========================================================================== */
.sst-calc-section { padding-top: 40px; }
.sst-calc {
    position: relative; counter-reset: sst-step;
    border-color: rgba(56,116,255,.32) !important;
    box-shadow: 0 50px 110px rgba(0,0,0,.45), 0 0 80px rgba(56,116,255,.10);
}
.sst-calc .ss-calc__inputs { padding: 44px 44px; }
.sst-calc .ss-calc__out { padding: 44px 44px; background: linear-gradient(160deg, #19264f 0%, #121a30 80%); }
.sst-calc .ss-range { position: relative; padding-left: 48px; margin-bottom: 30px; counter-increment: sst-step; }
.sst-calc .ss-range::before {
    content: counter(sst-step); position: absolute; left: 0; top: -2px;
    width: 32px; height: 32px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
    font-family: "Inter Tight", "Nunito Sans", sans-serif; font-weight: 800; font-size: .9rem;
    color: var(--ss-blue-bright, #6f9bff); background: var(--ss-accent-soft, rgba(56,116,255,.14)); border: 1px solid rgba(56,116,255,.28);
}
.sst-calc .ss-range__head output { font-size: 1.45rem; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.sst-calc .ss-range input[type=range] { height: 8px; }
.sst-calc .ss-calc__fill--before { background: rgba(229,234,245,.26); }
.sst-calc .ss-calc__fill--after { box-shadow: 0 0 16px rgba(56,116,255,.45); }
.sst-calc .ss-calc__track { height: 14px; }
.sst-calc .ss-calc__bar-head b { font-variant-numeric: tabular-nums; }
.sst-calc .ss-calc__value { font-variant-numeric: tabular-nums; font-size: clamp(2.6rem, 1.8rem + 3vw, 4.2rem); }
.sst-calc .ss-calc__pct { color: #fff; background: var(--ss-blue, #3874ff); border-color: transparent; box-shadow: 0 8px 22px rgba(56,116,255,.35); }
.sst-calc .ss-calc__sub b { font-family: "Inter Tight", "Nunito Sans", sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.sst-calc .ss-calc__note a { color: var(--ss-blue-bright, #6f9bff); font-weight: 700; text-decoration: none; }
@media (max-width: 991px) {
    .sst-calc .ss-calc__inputs, .sst-calc .ss-calc__out { padding: 30px 22px; }
}
@media (max-width: 480px) {
    .sst-calc .ss-range { padding-left: 0; padding-top: 0; }
    .sst-calc .ss-range::before { position: static; display: inline-flex; width: 26px; height: 26px; font-size: .78rem; border-radius: 8px; margin-bottom: .5rem; }
}

/* ==========================================================================
   BEISPIELRECHNUNG als Balkendiagramm pro Aufgabe
   ========================================================================== */
.sst-chart {
    border-radius: var(--ss-radius, 22px); background: var(--ss-card, #121829); border: 1px solid var(--ss-line);
    padding: 30px 32px 10px;
}
.sst-chart__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; padding-bottom: 20px; border-bottom: 1px solid var(--ss-line); }
.sst-chart__title { font-size: 1.05rem !important; color: #fff; margin: 0; letter-spacing: -.01em !important; line-height: 1.3 !important; }
.sst-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; list-style: none; }
.sst-legend li { display: inline-flex; align-items: center; gap: .5rem; font-size: .86rem; color: var(--ss-muted); font-weight: 700; }
.sst-legend li small { font-weight: 600; color: var(--ss-faint); font-size: .8rem; }
.sst-legend i { width: 22px; height: 10px; border-radius: 99px; flex: 0 0 22px; }
.sst-legend__before i { background: rgba(229,234,245,.26); }
.sst-legend__after i { background: linear-gradient(90deg, var(--ss-blue, #3874ff), var(--ss-blue-bright, #6f9bff)); }

.sst-chart__rows { list-style: none; margin: 0; padding: 0; }
.sst-chart__row {
    display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) 8.5rem; gap: 10px 28px; align-items: center;
    padding: 20px 0; border-bottom: 1px dashed rgba(255,255,255,.08);
}
.sst-chart__row:last-child { border-bottom: 0; }
.sst-chart__label { font-weight: 700; color: #fff; font-size: .96rem; line-height: 1.35; }
.sst-chart__bars { display: grid; gap: 6px; }
.sst-chart__bars .sst-track { height: 10px; background: transparent; }
.sst-chart__vals { display: flex; align-items: baseline; justify-content: flex-end; gap: .35rem; white-space: nowrap; font-family: "Inter Tight", "Nunito Sans", sans-serif; font-variant-numeric: tabular-nums; }
.sst-chart__vals s { text-decoration: none; color: var(--ss-faint); font-weight: 700; font-size: .95rem; }
.sst-chart__vals .sst-arrow { color: var(--ss-faint); font-size: .85rem; }
.sst-chart__vals b { color: var(--ss-blue-bright, #6f9bff); font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; }

.sst-chart__total {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px;
    margin: 0 -32px; padding: 22px 32px; border-top: 1px solid var(--ss-line); background: rgba(255,255,255,.02);
    border-radius: 0 0 var(--ss-radius, 22px) var(--ss-radius, 22px);
}
.sst-chart__total > span { font-weight: 800; color: #fff; }
.sst-chart__total .sst-chart__vals s { font-size: 1.3rem; }
.sst-chart__total .sst-chart__vals b { font-size: 2rem; }

.sst-result {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 28px; align-items: center;
    margin-top: 16px; padding: 26px 30px; border-radius: var(--ss-radius, 22px);
    background: linear-gradient(135deg, rgba(56,116,255,.16), rgba(56,116,255,.05)); border: 1px solid rgba(56,116,255,.32);
}
.sst-result__big { font-family: "Inter Tight", "Nunito Sans", sans-serif; font-variant-numeric: tabular-nums; font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.4rem); font-weight: 800; color: #fff; letter-spacing: -.035em; line-height: 1.1; }
.sst-result__big em { font-style: normal; color: var(--ss-blue-bright, #6f9bff); }
.sst-result p { margin: 0; color: var(--ss-muted); font-size: .92rem; line-height: 1.55; }

@media (max-width: 767px) {
    .sst-chart { padding: 22px 18px 4px; }
    .sst-chart__row { grid-template-columns: minmax(0, 1fr) auto; padding: 16px 0; }
    .sst-chart__bars { grid-column: 1 / -1; grid-row: 2; }
    .sst-chart__label { font-size: .92rem; }
    .sst-chart__total { margin: 0 -18px; padding: 18px; }
    .sst-chart__total .sst-chart__vals b { font-size: 1.6rem; }
    .sst-result { grid-template-columns: 1fr; padding: 22px 20px; }
}

/* ==========================================================================
   ALLTAG als «Zeittafel»
   ========================================================================== */
.sst-clock {
    list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr;
    border-radius: var(--ss-radius, 22px); border: 1px solid var(--ss-line); background: var(--ss-card, #121829); overflow: hidden;
}
.sst-clock__row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 22px; padding: 26px 28px; border-bottom: 1px solid var(--ss-line); }
.sst-clock__row:nth-child(odd) { border-right: 1px solid var(--ss-line); }
.sst-clock__row:nth-last-child(-n+2) { border-bottom: 0; }
.sst-clock__time {
    display: flex; flex-direction: column; justify-content: flex-start; gap: .3rem;
    padding-right: 18px; border-right: 2px solid rgba(56,116,255,.35);
    font-family: "Inter Tight", "Nunito Sans", sans-serif; font-variant-numeric: tabular-nums;
}
.sst-clock__time b { font-size: 2.6rem; font-weight: 800; color: #fff; line-height: .9; letter-spacing: -.05em; }
.sst-clock__time span { font-size: .82rem; font-weight: 700; color: var(--ss-blue-bright, #6f9bff); line-height: 1.25; letter-spacing: 0; }
.sst-clock__time i { font-size: 1.7rem; line-height: 1; color: var(--ss-blue-bright, #6f9bff); }
.sst-clock__time--word span { font-size: .95rem; font-weight: 800; color: #fff; }
.sst-clock__title { display: block; font-size: 1.02rem !important; font-weight: 800 !important; color: #fff; margin: 0 0 .35rem; letter-spacing: -.01em !important; line-height: 1.3 !important; }
.sst-clock__text { margin: 0; font-size: .9rem; color: var(--ss-muted); line-height: 1.55; }

@media (max-width: 991px) {
    .sst-clock { grid-template-columns: 1fr; }
    .sst-clock__row:nth-child(odd) { border-right: 0; }
    .sst-clock__row:nth-last-child(2) { border-bottom: 1px solid var(--ss-line); }
}
@media (max-width: 480px) {
    .sst-clock__row { grid-template-columns: 5.6rem minmax(0, 1fr); gap: 16px; padding: 20px 18px; }
    .sst-clock__time { padding-right: 12px; }
    .sst-clock__time b { font-size: 2.1rem; }
    .sst-clock__time--word span { font-size: .85rem; }
}

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
    .sst-fill { transition: none; }
}
/* Zeitangabe steht im DOM nach dem Titel (Screenreader), optisch links */
.sst-clock__time { order: -1; }
.sst-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.sst-link:hover { color: var(--ss-blue-bright, #6f9bff); }