/* ============================================================================
   offline.css — "Read offline"

   Die Seite, die erklärt, wie man das Archiv aufs Gerät holt, und den Knopf
   dafür trägt. Bewusst nüchtern: keine Bewegung, keine Wasserzeichen, keine
   Inszenierung. Wer hierherkommt, will eine Anleitung, keine Vorstellung.

   Alle Farben kommen aus den --lib-* Token (library.css § 0), damit die Seite
   Hell/Dunkel und alle fünf 五行-Phasen ohne eigenes Zutun mitmacht.
   ============================================================================ */

/* ============================================================================
   Der Hinweis auf neues Material

   Er steht ausserhalb von #view-offline — direkt unter der Navigation, auf
   jeder Ansicht —, weil er dort erscheinen soll, wo gelesen wird, und nicht
   nur dort, wo man ohnehin schon nach Neuem sucht. Verdrahtet in offline.js.

   Bewusst ein Streifen im Fluss und kein schwebender Kasten: er schiebt die
   Seite einmal nach unten und verdeckt nie etwas. Wer ihn wegklickt, ist ihn
   los, bis wirklich wieder etwas dazukommt.
   ============================================================================ */

/* Zuerst, und getrennt: [hidden] muss gewinnen. Stuende das display auf dem
   Streifen selbst, waere das Attribut wirkungslos und der Hinweis stuende bei
   jedem Aufruf da — auch bei Lesern, die nie etwas heruntergeladen haben. */
.oa-newsbar[hidden] { display: none !important; }

.oa-newsbar {
  background: var(--lib-surf, #fff);
  border-bottom: 1px solid var(--lib-bd, #e4e0d8);
}

.oa-newsbar-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 12px 28px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.oa-newsbar-text {
  flex: 1 1 340px;
  margin: 0;
  font-family: 'Source Serif 4', serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--lib-t2, #4b4540);
}

.oa-newsbar-acts {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.oa-newsbar-go {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--lib-acc, #9e2b25);
}
.oa-newsbar-go:hover { background: var(--lib-bg, #f6f5f2); }

/* Das Wegklicken ist die leisere der beiden Handlungen und sieht auch so aus.
   28px im Quadrat sind fuer eine Fingerkuppe knapp — die Trefferflaeche wird
   darum ueber ::before auf 44px gedehnt, ohne dass das Zeichen waechst. */
.oa-newsbar-x {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 19px;
  line-height: 1;
  color: var(--lib-t3, #7a736b);
}
.oa-newsbar-x::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}
.oa-newsbar-x:hover { background: var(--lib-bg, #f6f5f2); color: var(--lib-t1, #14110f); }

.oa-newsbar-go:focus-visible,
.oa-newsbar-x:focus-visible {
  outline: 2px solid var(--lib-acc, #9e2b25);
  outline-offset: 2px;
}

@media (max-width: 560px) {
  .oa-newsbar-inner { padding: 11px 20px; gap: 10px; }
  .oa-newsbar-text { flex-basis: 100%; font-size: 14.5px; }
  .oa-newsbar-acts { margin-left: auto; }
  .oa-newsbar-go { padding-left: 0; }
}

#view-offline {
  --off-gutter: clamp(20px, 5vw, 40px);
}

#view-offline .off-wrap {
  max-width: 780px;
  margin: 0 auto;
  padding-left: var(--off-gutter);
  padding-right: var(--off-gutter);
}

/* ---- Kopf ---------------------------------------------------------------- */

#view-offline .off-head {
  padding: clamp(56px, 9vw, 104px) 0 clamp(28px, 4vw, 44px);
}

#view-offline .off-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--lib-acc, #9e2b25);
  margin: 0 0 18px;
}

#view-offline h1 {
  font-family: 'Spectral', serif;
  font-weight: 700;
  font-size: clamp(30px, 5.6vw, 46px);
  line-height: 1.14;
  letter-spacing: -.015em;
  margin: 0 0 20px;
  color: var(--lib-t1, #14110f);
  text-wrap: balance;
}

#view-offline .off-lead {
  font-family: 'Source Serif 4', serif;
  font-size: clamp(16px, 2.1vw, 18.5px);
  line-height: 1.66;
  color: var(--lib-t2, #4b4540);
  margin: 0;
  max-width: 56ch;
}

/* ---- Die Reihenfolge ------------------------------------------------------
   Das einzige an dieser Seite, das man falsch machen kann, steht deshalb vor
   allem anderen — noch vor dem Knopf. Getragen wird es von einer Linie links,
   derselben Geste wie bei .off-note, nur kräftiger: kein Kasten, keine Farbe,
   keine Warnung. Es ist ein Hinweis, keine Ermahnung. */

#view-offline .off-order {
  border-left: 2px solid var(--lib-acc, #9e2b25);
  padding: 2px 0 2px clamp(18px, 3vw, 26px);
  margin: 0 0 clamp(40px, 6vw, 64px);
}

#view-offline .off-order h2 { margin-bottom: 18px; }

/* Eigene Zählung, damit die beiden Schritte nicht mit den nummerierten
   Kreisen der Geräte-Anleitungen (.off-steps) verwechselt werden: hier eine
   schlichte Ziffer mit Punkt, dort ein Kreis. Zwei Ebenen, zwei Zeichen. */
#view-offline .off-order-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: off-order;
}
#view-offline .off-order-list li {
  counter-increment: off-order;
  position: relative;
  padding: 0 0 14px 34px;
  font-family: 'Source Serif 4', serif;
  font-size: clamp(15.5px, 2vw, 17px);
  line-height: 1.6;
  color: var(--lib-t2, #4b4540);
  max-width: 56ch;
}
#view-offline .off-order-list li:last-child { padding-bottom: 0; }
#view-offline .off-order-list li::before {
  content: counter(off-order) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--lib-acc, #9e2b25);
  font-variant-numeric: tabular-nums;
}
#view-offline .off-order-list li b { color: var(--lib-t1, #14110f); font-weight: 600; }

#view-offline .off-order-why {
  font-family: 'Source Serif 4', serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--lib-t3, #7a736b);
  margin: 20px 0 0;
  max-width: 58ch;
}

/* Die Marke über den beiden grossen Abschnitten. Sie trägt die Reihenfolge
   noch einmal dorthin, wo gehandelt wird — wer von oben herunterscrollt, hat
   die Aufzählung sonst längst hinter sich. */
#view-offline .off-step-tag {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--lib-t3, #7a736b);
  margin: 0 0 10px;
}

/* ---- Der Knopf und sein Kasten ------------------------------------------- */

#view-offline .off-panel {
  border: 1px solid var(--lib-bd, #e4e0d8);
  border-radius: 14px;
  background: var(--lib-surf, #fff);
  padding: clamp(22px, 3.4vw, 32px);
  margin: 0 0 clamp(40px, 6vw, 64px);
}

#view-offline .off-panel-size {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lib-t3, #7a736b);
  margin: 0 0 10px;
}

#view-offline .off-panel-title {
  font-family: 'Spectral', serif;
  font-weight: 700;
  font-size: clamp(20px, 3vw, 24px);
  line-height: 1.25;
  margin: 0 0 10px;
  color: var(--lib-t1, #14110f);
}

#view-offline .off-panel-note {
  font-family: 'Source Serif 4', serif;
  font-size: 15px;
  line-height: 1.62;
  color: var(--lib-t2, #4b4540);
  margin: 0 0 22px;
  max-width: 54ch;
}

#view-offline .off-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  /* NICHT #fff. Der Akzent ist im Dunkelmodus ein HELLER Ton — in der
     Metall-Phase etwa #a9bcc4 —, damit er auf dunklem Grund lesbar bleibt.
     Weiße Schrift darauf käme auf ein Kontrastverhältnis von rund 1,9:1 und
     wäre praktisch unleserlich. Der Grundton dreht sich mit: hell, wenn der
     Akzent dunkel ist, und dunkel, wenn er hell ist. Dieselbe Paarung
     benutzt phases.css für ::selection. */
  color: var(--lib-surf, #fff);
  background: var(--lib-acc, #9e2b25);
  border: none;
  border-radius: 9px;
  padding: 13px 22px;
  /* Apples Richtlinie nennt 44pt als Mindestmaß für ein Tippziel; aus
     Polsterung und Zeilenhöhe allein kamen 43px heraus. Ein Pixel klingt nach
     Pedanterie, ist aber genau die Grenze, an der ein Daumen auf einem
     fahrenden Zug danebentrifft. */
  min-height: 44px;
  box-sizing: border-box;
  cursor: pointer;
  transition: background var(--dur, .28s) var(--ease-out, ease),
              transform var(--dur, .28s) var(--ease-out, ease);
}
#view-offline .off-btn:hover:not(:disabled) {
  background: var(--lib-acc2, #b23a33);
  transform: translateY(-1px);
}
#view-offline .off-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring, 0 0 0 3px rgba(158, 43, 37, .32));
}
#view-offline .off-btn:disabled {
  cursor: default;
  opacity: .55;
  transform: none;
}

/* ---- Der zweite Knopf: alles noch einmal holen ---------------------------
   Er steht bewusst leiser da. Zwei zinnoberrote Knöpfe untereinander
   stritten um dieselbe Aufmerksamkeit, und der falsche von beiden gewänne:
   "Update everything now" kostet den vollen Download ein zweites Mal und ist
   die Ausnahme, nicht der Weg. Also derselbe Umriss, dieselbe Höhe, aber nur
   eine Linie statt einer Fläche.

   Der Rahmen als inset-Schatten und nicht als border: sonst wäre dieser Knopf
   zwei Pixel höher als der andere, und die 44 px Mindestmaß von oben
   verschöben sich mit. */
#view-offline .off-btn-quiet {
  color: var(--lib-t1, #14110f);
  /* Nicht durchsichtig, sondern gedämpft gefüllt. Durchsichtig hinge der
     Knopf allein an seinem Rand — und --lib-bd ist die Linie zwischen zwei
     Flächen, nicht der Umriss eines Bedienelements: im Dunkelmodus kam sie
     auf ein Kontrastverhältnis von 1,2:1 gegen den Grund der Seite und war
     kaum zu sehen. Eine ruhige Fläche sagt "Knopf", ohne mit dem
     zinnoberroten daneben um die Aufmerksamkeit zu streiten. */
  background: var(--lib-surf2, #efece6);
  /* Der Rand in voller Stärke, nicht abgeschwächt. Gemessen: --lib-surf2
     hebt sich vom Grund der Seite nur um 1,2:1 ab — in beiden Modi —, die
     Fläche allein trägt den Knopf also nicht. Erst diese Linie tut es, mit
     4:1 im Hellen und 5,5:1 im Dunkeln gegen die Füllung; die Richtlinie
     nennt 3:1 für den Umriss eines Bedienelements. Abgeschwächt (40 %) kam
     sie auf 2:1 und war knapp darunter. */
  box-shadow: inset 0 0 0 1px var(--lib-t3, #7a736b);
}
#view-offline .off-btn-quiet:hover:not(:disabled) {
  background: var(--lib-surf, #fff);
  box-shadow: inset 0 0 0 1px var(--lib-t2, #4b4540);
}
#view-offline .off-btn-quiet:focus-visible {
  box-shadow: inset 0 0 0 1px var(--lib-t3, #7a736b),
              var(--focus-ring, 0 0 0 3px rgba(158, 43, 37, .32));
}

/* Und der Kasten drumherum ebenso: kein weißes Feld, das sich neben das
   eigentliche Angebot stellt, sondern der Grund der Seite mit einer Linie. */
#view-offline .off-panel-quiet {
  background: transparent;
  border-style: dashed;
  /* Dieselbe Rechnung wie beim Knopf: --lib-bd allein verschwand im
     Dunkelmodus fast im Grund. Gestrichelt und etwas kräftiger — sichtbar
     als Kasten, ohne die Fläche zu beanspruchen, die dem eigentlichen
     Angebot gehört. */
  border-color: color-mix(in srgb, var(--lib-t3, #7a736b) 34%, transparent);
}
#view-offline .off-panel-quiet .off-panel-title {
  font-size: clamp(18px, 2.4vw, 21px);
}

/* Der Balken erscheint erst, wenn er etwas zu zeigen hat. */
#view-offline .off-progress { display: none; margin-top: 20px; }
#view-offline .off-progress[data-on] { display: block; }

#view-offline .off-bar {
  height: 7px;
  border-radius: 4px;
  background: var(--lib-surf2, #efece6);
  overflow: hidden;
}
#view-offline .off-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 4px;
  background: var(--lib-acc, #9e2b25);
  transition: width .3s var(--ease-out, ease);
}
#view-offline .off-bar-label {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  color: var(--lib-t3, #7a736b);
  margin: 10px 0 0;
}

/* Zustandsmeldung unter dem Knopf: da / nicht da / geht hier nicht. */
#view-offline .off-state {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  line-height: 1.55;
  color: var(--lib-t3, #7a736b);
  margin: 16px 0 0;
}
#view-offline .off-state[data-ok] { color: var(--lib-xiu, #1c502c); font-weight: 600; }
#view-offline .off-state[data-warn] { color: var(--lib-acc, #9e2b25); }

/* ---- Die Anleitungen ------------------------------------------------------ */

#view-offline .off-section { margin: 0 0 clamp(36px, 5.5vw, 58px); }

#view-offline h2 {
  font-family: 'Spectral', serif;
  font-weight: 700;
  font-size: clamp(21px, 3.2vw, 27px);
  line-height: 1.22;
  margin: 0 0 8px;
  color: var(--lib-t1, #14110f);
}

#view-offline .off-sub {
  font-family: 'Source Serif 4', serif;
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--lib-t3, #7a736b);
  margin: 0 0 24px;
  max-width: 56ch;
}

/* ---- Die Geräte-Klappen ---------------------------------------------------
   Drei Anleitungen, von denen für jeden Leser genau eine stimmt. Offen
   nebeneinander waren sie der längste Teil der Seite — und zwei Drittel davon
   Anweisungen für ein Gerät, das der Leser nicht in der Hand hält.

   Geschlossen bleibt pro Gerät eine Zeile stehen, die schon verrät, wohin es
   geht ("Safari · Share · Add to Home Screen"): wer den Weg kennt, muss gar
   nicht aufmachen. Getragen wird der Zustand von <details> selbst, damit
   Tastatur, Suchfunktion des Browsers und ein Besuch ohne JavaScript ohne
   eigenes Zutun funktionieren. offline.js klappt nur die passende auf. */

#view-offline .off-devices {
  border-bottom: 1px solid var(--lib-bd, #e4e0d8);
}

#view-offline .off-device {
  border-top: 1px solid var(--lib-bd, #e4e0d8);
}

#view-offline .off-device-sum {
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  /* Beides nötig: Safari braucht den ::-webkit-Marker, Firefox das list-style.
     Bleibt eins davon stehen, hat die Zeile ein zweites Dreieck neben dem
     eigenen Zeichen. */
  list-style: none;
  padding: 20px 2px;
  border-radius: 8px;
  transition: background var(--dur, .28s) var(--ease-out, ease);
}
#view-offline .off-device-sum::-webkit-details-marker { display: none; }
#view-offline .off-device-sum::marker { content: ""; }
#view-offline .off-device-sum:hover { background: var(--lib-surf, #fff); }
#view-offline .off-device-sum:focus-visible {
  outline: 2px solid var(--lib-acc, #9e2b25);
  outline-offset: -2px;
}

#view-offline .off-device-txt { flex: 1 1 auto; min-width: 0; }

#view-offline .off-device-name {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--lib-acc, #9e2b25);
  margin: 0 0 7px;
}

/* Die Marke, die offline.js an die erkannte Anleitung hängt. Sie steht nur
   da, wenn wirklich erkannt wurde — geraten wird nicht. */
#view-offline .off-device-mine {
  margin-left: 10px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--lib-bds, #cfc8bd);
  color: var(--lib-t3, #7a736b);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .12em;
  vertical-align: 1px;
}

#view-offline .off-device-hint {
  display: block;
  font-family: 'Source Serif 4', serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--lib-t3, #7a736b);
}

#view-offline .off-device-chev {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--lib-bd, #e4e0d8);
  color: var(--lib-t3, #7a736b);
  transition: transform var(--dur, .28s) var(--ease-out, ease),
              border-color var(--dur, .28s) var(--ease-out, ease),
              color var(--dur, .28s) var(--ease-out, ease);
}
#view-offline .off-device-sum:hover .off-device-chev {
  border-color: var(--lib-bds, #cfc8bd);
  color: var(--lib-t1, #14110f);
}
#view-offline .off-device[open] .off-device-chev { transform: rotate(180deg); }

#view-offline .off-device-body {
  padding: 6px 0 28px;
  animation: off-fold-in .3s var(--ease-out, ease) both;
}
@keyframes off-fold-in {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: none; }
}

/* Nummerierte Schritte. Die Zahl steht in einem eigenen Kreis links, damit
   man beim Überfliegen sofort sieht, wieviele Schritte es sind. */
#view-offline .off-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: off-step;
}
#view-offline .off-steps li {
  counter-increment: off-step;
  position: relative;
  padding: 0 0 18px 46px;
  font-family: 'Source Serif 4', serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--lib-t2, #4b4540);
}
#view-offline .off-steps li::before {
  content: counter(off-step);
  position: absolute;
  left: 0;
  top: -1px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--lib-bd, #e4e0d8);
  background: var(--lib-surf, #fff);
  color: var(--lib-t3, #7a736b);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  display: grid;
  place-items: center;
}
#view-offline .off-steps li b {
  color: var(--lib-t1, #14110f);
  font-weight: 600;
}

/* Ein Hinweiskasten für die Dinge, die man sonst erst schmerzhaft lernt. */
#view-offline .off-note {
  border-left: 2px solid var(--lib-bds, #cfc8bd);
  padding: 2px 0 2px 18px;
  margin: 22px 0 0;
  font-family: 'Source Serif 4', serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--lib-t3, #7a736b);
  max-width: 58ch;
}
#view-offline .off-note b { color: var(--lib-t2, #4b4540); font-weight: 600; }

#view-offline .off-foot {
  border-top: 1px solid var(--lib-bd, #e4e0d8);
  padding: 26px 0 clamp(64px, 9vw, 110px);
  font-family: 'Source Serif 4', serif;
  font-size: 15px;
  line-height: 1.62;
  color: var(--lib-t3, #7a736b);
  max-width: 58ch;
}

#view-offline .off-panel-quiet .off-bar-fill { background: var(--lib-t3, #7a736b); }

@media (prefers-reduced-motion: reduce) {
  #view-offline .off-btn,
  #view-offline .off-bar-fill,
  #view-offline .off-device-sum,
  #view-offline .off-device-chev { transition: none; }
  #view-offline .off-device-body { animation: none; }
}