/* ═══ V19 (David 10.10.: Texte wie bei Apple, besonders auf dem Handy) ═══
   Aufbau jedes Abschnitts wie auf Apple-Produktseiten:
   1. Bereichsname – normal geschrieben, halbfett, in einem Farbverlauf (statt Versalien mit Sperrung),
   2. Titel in zwei Zeilen, zweite Zeile grau, enge Laufweite bei grosser Schrift,
   3. ein kurzer Absatz: Kernaussage weiss (<b>), Details grau – keine Unterstreichungen.
   Laufweite und Zeilenabstand passen sich der Grösse an (gross = enger), Fliesstext auf dem Handy 17 px wie bei Apple. */
:root{--ap-white:#f5f5f7;--ap-grey:rgba(245,245,247,.6);--ap-grad:linear-gradient(90deg,#e4dcff 0%,#b9a2ff 45%,#8a5cff 100%)}

/* 1. Bereichsname */
/* V19b: im Film einfarbig (Lavendel) – ein Verlauf per background-clip:text auf animierten Wort-Spans kostete beim Scrollen Bildrate */
.reel .beat:not(.beat--hero) .eyebrow{display:block;text-transform:none;letter-spacing:-.006em;font-size:clamp(16px,1.2vw,20px);font-weight:600;line-height:1.2;color:#c9b8ff;margin-bottom:8px}
.reel .beat:not(.beat--hero) .eyebrow b{color:inherit;letter-spacing:inherit}
.reel .beat:not(.beat--hero) .eyebrow b::after{display:none}
.reel .beat .eyebrow .auth-logo{margin:-3px 9px 0 0;vertical-align:middle}

/* 2. Titel */
.reel .beat:not(.beat--hero) h2{font-weight:650;letter-spacing:-.03em;line-height:1.03;text-wrap:balance;color:var(--ap-white)}
/* reel.js zerlegt Titel in Wort-Spans (.w/.wi) – nur die vom Text vorgegebene zweite Zeile (span ohne .w) wird grau */
.reel .beat:not(.beat--hero) h2 .w,.reel .beat:not(.beat--hero) h2 .wi{color:inherit}
.reel .beat:not(.beat--hero) h2 > span:not(.w){color:rgba(245,245,247,.5)}

/* 3. Absatz: Kernaussage weiss, Rest grau */
.reel .beat .lede{font-weight:540;color:var(--ap-grey);letter-spacing:-.006em;text-wrap:pretty}
.reel .beat .lede b,.reel .beat .lede strong{font-weight:640;color:var(--ap-white)}
.reel .beat em,.reel:not(.is-film) .beat em{color:var(--ap-white);font-weight:inherit;background:none!important;padding:0}
.reel .pinhint{font-size:13px;color:rgba(245,245,247,.45);letter-spacing:0}

@media (min-width:861px){
  .reel .beat:not(.beat--hero) h2{font-size:clamp(44px,4.6vw,86px)}
  .reel.is-film .beat:not(.beat--hero):not(.beat--opener) .lede,.reel .beat .lede{font-size:clamp(18px,1.4vw,23px);line-height:1.38;max-width:23em;margin-top:18px;color:var(--ap-grey)}
}

/* Handy & Tablet hoch: Bild oben frei, Text darunter in Apple-Grössen */
@media (max-width:860px){
  .reel .beat:not(.beat--hero) .eyebrow{font-size:15px;margin-bottom:6px}
  .reel .beat:not(.beat--hero) h2,.reel .beat--desk h2,.reel .beat--compact h2{margin-top:0;font-size:clamp(31px,8.8vw,40px);letter-spacing:-.024em;line-height:1.06}
  .reel .beat .lede{margin-top:12px;font-size:17px;line-height:1.42;max-width:none}
  .t-say .lede,.t-line .lede,.t-swap .lede{font-size:17px;line-height:1.42;color:var(--ap-grey)}
  /* Einblendungen über dem Bild (Ketten, App-Symbole, Kennzahlen) und Hinweise weg – das Bild bleibt ruhig, eine Aussage pro Bild */
  .reel.is-film .topo2.flow3,.reel.is-film .topo2.apps3,.reel.is-film .topo2.kpis3,.reel .pinhint{display:none}
}
/* Handy quer: kompakter */
@media (orientation:landscape) and (max-height:520px){
  .reel .beat:not(.beat--hero) .eyebrow{font-size:12px;margin-bottom:2px}
  .reel .beat:not(.beat--hero) h2{font-size:clamp(22px,7vh,32px)}
  .reel .beat .lede{font-size:13.5px;line-height:1.4;margin-top:8px}
}

/* Kurze Satz-Abschnitte (say) und grosse Wortfolgen (Fernwartung «Schnell. Sicher. Direkt.») im gleichen Schriftschnitt wie die Titel */
.reel.is-film .t-say h2.say,.reel.is-film .t-line h2.say,.reel.is-film .t-swap h2.say,.reel.is-film .t-mark h2.say{font-weight:640;letter-spacing:-.024em;line-height:1.08;color:var(--ap-white)}
.reel .t-words--big,.reel .t-words--big .tw{font-weight:650;letter-spacing:-.03em}

/* ═══ Themenseiten (Hardware, Microsoft 365 …) im gleichen Apple-Aufbau ═══ */
.topic .eyebrow,.topic__head .eyebrow,.hero .eyebrow,main .eyebrow{text-transform:none;letter-spacing:-.006em;font-size:clamp(16px,1.15vw,19px);font-weight:600;
  color:#c9b8ff;background:var(--ap-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
main .eyebrow b{-webkit-text-fill-color:var(--ap-white);letter-spacing:-.006em}
.topic__head h2,main h1,main h2{letter-spacing:-.028em;line-height:1.04;font-weight:650;text-wrap:balance}
main h1 span,main h2 span{color:rgba(245,245,247,.5)}
main .lede,.topic__intro p{font-weight:540;letter-spacing:-.006em;color:var(--ap-grey);line-height:1.45;text-wrap:pretty}
main .lede strong,main .lede b,.topic__intro p strong{color:var(--ap-white);font-weight:640}
.card h3,.benefit h3{letter-spacing:-.016em;font-weight:640}
.card p,.benefit p{color:rgba(245,245,247,.62);line-height:1.5}
@media (max-width:860px){
  main .eyebrow{font-size:15px}
  .topic__head h2,main h2{font-size:clamp(31px,8.8vw,40px)}
  main .lede,.topic__intro p{font-size:17px;line-height:1.45}
  .card p,.benefit p{font-size:16px}
  .card h3,.benefit h3{font-size:20px}
}
/* Pfad oben auf den Themenseiten («PCFOX / Hardware & Software») wie bei Apple: normal geschrieben, ruhig */
.crumbs{text-transform:none;letter-spacing:-.004em;font-size:14px;font-weight:560;color:rgba(245,245,247,.5)}
.crumbs a{color:rgba(245,245,247,.72)}
.crumbs span:last-child{background:var(--ap-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:600}