/* Startseite (homeoffice.sh / index.php): Kopfbereich in der Sprache der Terminal-Server-Seite (10.10.2026).
   Verlauf, Sonne, Sterne kommen aus .hero (style.css), Titel/Untertitel/Glas-Karte aus ts.css (.ts-hero ...).
   Hier nur das Schaubild "@Office -> verschluesselt -> @Home". Es skaliert mit seiner Breite (Container-Einheiten cqw,
   mit px-Rueckfallwerten) und bleibt auf jeder Bildschirmbreite waagerecht. */
.st-hero.ts-hero { padding: 48px 20px 110px; }
.st-hero .ts-hero-inner::before { opacity: .55; top: -270px; }
.st-hero.ts-hero h1.ts-hero-title { text-shadow: 0 2px 22px rgba(0,0,0,.42), 0 8px 34px rgba(0,0,0,.28); }
.st-hero .ts-hero-tagline { text-shadow: 0 1px 3px rgba(0,0,0,.35), 0 2px 14px rgba(0,0,0,.5); }
.st-hero .ts-flow-caption { text-shadow: 0 1px 3px rgba(0,0,0,.4), 0 2px 12px rgba(0,0,0,.4); }
.st-flow { max-width: 720px; }
.st-stage { position: relative; width: 100%; max-width: 640px; margin: 0 auto; aspect-ratio: 940 / 300; container-type: inline-size; }
.st-flow-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.st-node { position: absolute; left: var(--x); top: 50%; transform: translate(-50%, calc(var(--ic) / -2)); display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 2; --ic: 120px; --ic: clamp(64px, 14.5cqw, 120px); }
.st-ic { display: flex; align-items: center; justify-content: center; width: var(--ic); height: var(--ic); border-radius: 50%; background: rgba(255,255,255,.94); box-shadow: 0 10px 22px rgba(0,0,0,.18), 0 0 0 5px rgba(255,255,255,.16), 0 0 0 12px rgba(255,255,255,.08); }
.st-ic img { width: 60%; height: 60%; }
.st-lb { font-size: 24px; font-size: clamp(14px, 3.4cqw, 26px); font-weight: 800; color: #fff; line-height: 1.2; text-shadow: 0 2px 8px rgba(0,0,0,.25); }
.st-lock { position: absolute; left: 50%; top: 50%; z-index: 3; width: 64px; height: 64px; width: clamp(40px, 8cqw, 68px); height: clamp(40px, 8cqw, 68px); transform: translate(-50%,-50%); display: flex; align-items: center; justify-content: center; font-size: 28px; font-size: clamp(18px, 3.6cqw, 30px); border-radius: 50%; background: linear-gradient(160deg,#fff,#fff1d8); box-shadow: 0 8px 20px rgba(0,0,0,.28), 0 0 0 5px rgba(255,255,255,.22); }
.st-lockcap { position: absolute; left: 50%; top: 77%; z-index: 3; transform: translate(-50%,-50%); font-size: 15px; font-size: clamp(10px, 2cqw, 15px); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; color: rgba(255,255,255,.95); text-shadow: 0 2px 6px rgba(0,0,0,.25); }
@media (max-width: 700px) {
    .st-hero.ts-hero { padding: 44px 14px 110px; }
    /* schmale Bildschirme: Buehne hoeher, damit Beschriftungen unter den Kreisen Platz haben */
    .st-stage { aspect-ratio: 940 / 440; }
    .st-lockcap { top: calc(50% + 34px); }
}
@media (max-width: 420px) { .st-hero.ts-hero::after { display: none; } }

/* Erklaer- und Fragen-Bereich der Startseite (Fassung 10, 12.10.2026): sichtbarer Text fuer Suchmaschinen und Besucher.
   Aufklappbare Fragen (<details>) in der Sprache der Download-Karten; ohne Skript, mit Tastatur bedienbar. */
.about, .faq { max-width: 720px; margin: 56px auto 0; }
.about .steps-title, .faq .steps-title { margin-bottom: 18px; }
.about p { margin: 0; font-size: 16px; line-height: 1.7; text-align: center; color: var(--text); }
.faq-item { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14px; margin: 0 0 10px; box-shadow: 0 6px 16px rgba(120, 90, 40, .07); }
.faq-item summary { position: relative; cursor: pointer; list-style: none; padding: 14px 46px 14px 18px; font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--text); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 20px; font-weight: 700; color: var(--teal); }
.faq-item[open] summary::after { content: "\2013"; }
.faq-item summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 14px; }
.faq-item p { margin: 0; padding: 0 18px 16px; font-size: 14.5px; line-height: 1.65; color: var(--text); }
.faq-item a { color: var(--teal); }
@media (max-width: 560px) { .about, .faq { margin-top: 44px; } .about p { font-size: 15px; text-align: left; } }