/* wozise software
   Aufbau wie ein Programmfenster: Leiste oben, Paketliste links, Detail rechts,
   Statuszeile unten. Liste und Detail scrollen getrennt, die Seite selbst nicht.
   Paketseiten haben Reiter ohne Skript (versteckte Radioknöpfe). Auf dem Handy
   wird daraus eine normale Seite: Startseite = Liste, Paketseite = Detail. */

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  --seite: #ffffff;
  --rand: #f3f3f1;
  --linie: #e2e2de;
  --ink: #16181b;
  --soft: #5f646b;
  --leise: #868b92;
  --link: #1c5fc0;
  --akzent: #f5b800;
  --schlitz: #3b4048;
  --fell: #9aa0a8;
  --ringe: #16181b;
  --schnauze: #e9ebee;
  --bezel: #16181b;
  --tint: 15%;
  --schatten: 0 18px 40px -26px rgba(22, 24, 27, .45);
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  /* Fließtext in der Systemschrift: Archivo ist ungehintet und wirkt klein auf
     Bildschirmen mit normaler Auflösung unruhig. Archivo bleibt für Überschriften,
     Namen und Knöpfe. */
  --text: system-ui, -apple-system, "Segoe UI", Ubuntu, Cantarell, "Noto Sans", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "DejaVu Sans Mono", "Liberation Mono", monospace;
  color-scheme: light;
}
/* Dunkel nach Systemeinstellung oder per Knopf in der Leiste (#thema-hell/-dunkel).
   :is() verzeiht Browser ohne :has(), dort gilt einfach die Systemeinstellung. */
@media (prefers-color-scheme: dark) {
  :root:not(:is([data-theme="light"], :has(#thema-hell:checked))) {
    --seite: #16181b; --rand: #1d2024; --linie: #2d3137; --ink: #eceef1; --soft: #a5abb3; --leise: #7f868f;
    --link: #82b2ff; --schlitz: #b9bec6; --fell: #c9ced4; --ringe: #3b4048; --schnauze: #f3f3f1; --bezel: #000; --tint: 24%; --schatten: 0 18px 40px -22px rgba(0, 0, 0, .8);
    color-scheme: dark;
  }
  :root:not(:is([data-theme="light"], :has(#thema-hell:checked))) [style*="--c:"] { --a: var(--c-d); --a-ink: #0f1216 }
}
:root:is([data-theme="dark"], :has(#thema-dunkel:checked)) {
  --seite: #16181b; --rand: #1d2024; --linie: #2d3137; --ink: #eceef1; --soft: #a5abb3; --leise: #7f868f;
  --link: #82b2ff; --schlitz: #b9bec6; --fell: #c9ced4; --ringe: #3b4048; --schnauze: #f3f3f1; --bezel: #000; --tint: 24%; --schatten: 0 18px 40px -22px rgba(0, 0, 0, .8);
  color-scheme: dark;
}
:root:is([data-theme="dark"], :has(#thema-dunkel:checked)) [style*="--c:"] { --a: var(--c-d); --a-ink: #0f1216 }
[style*="--c:"] { --a: var(--c); --a-ink: var(--c-ink) }

*, *::before, *::after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--seite); color: var(--ink); font: 400 15.5px/1.55 var(--text) }
img { max-width: 100%; height: auto }
a { color: var(--link); text-underline-offset: 2px }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 4px }
h1, h2, h3 { font-family: var(--sans); line-height: 1.15; letter-spacing: -.015em }
.eintrag-text b, .kachel-titel b { font-family: var(--sans) }
p { margin: 0 0 .9em }
code { font: .9em var(--mono); overflow-wrap: anywhere }

/* ================================================================ Fenster */
.app { display: grid; grid-template-columns: 300px minmax(0, 1fr); grid-template-rows: 58px minmax(0, 1fr) 30px;
  height: 100vh; height: 100dvh; background: var(--seite) }

.leiste { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding: 0 max(18px, env(safe-area-inset-right, 0px)) 0 max(18px, env(safe-area-inset-left, 0px));
  background: var(--rand); border-bottom: 1px solid var(--linie) }
.marke { display: inline-flex; align-items: center; gap: 10px; font: 750 17px/1 var(--sans); letter-spacing: -.02em; color: var(--ink); text-decoration: none; white-space: nowrap }
.logo { width: 52px; height: 52px; flex: none; color: var(--ink); margin: -6px -4px 0 -7px }
.logo .schlitze { stroke: var(--schlitz) }
.logo .led { fill: var(--akzent) }
.logo .fell, .logo .ohren { fill: var(--fell) }
.logo .ohren, .logo .schwanz { stroke: var(--fell) }
.logo .ringe { stroke: var(--ringe) }
.logo .maske { fill: #16181b }
.logo .auge { fill: #ffffff }
.logo .schnauze { fill: var(--schnauze) }
.untertitel { color: var(--soft); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.ist-start .untertitel { visibility: hidden }
.oben { margin-left: auto; display: flex; align-items: center; gap: 18px; font-size: 14px; font-weight: 550 }
.oben > a { color: var(--ink); text-decoration: none }
.oben > a:hover, .oben > a[aria-current] { text-decoration: underline }
.sprachen { display: inline-flex; border: 1px solid var(--linie); border-radius: 8px; overflow: hidden; font: 650 12.5px/1 var(--text) }
.sprachen > * { padding: 6px 9px; color: var(--soft); text-decoration: none }
.sprachen > a:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent) }
.sprachen [aria-current] { background: var(--ink); color: var(--seite) }
.thema-wahl { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none }
.thema { display: none }
.thema label { display: grid; place-items: center; width: 31px; height: 27px; border: 1px solid var(--linie); border-radius: 8px; color: var(--soft); cursor: pointer }
.thema label:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent) }
@supports selector(:has(a)) {
  .thema { display: inline-flex }
  .thema .zu-hell { display: none }
  @media (prefers-color-scheme: dark) {
    :root:not(:has(#thema-hell:checked)) .thema .zu-hell { display: grid }
    :root:not(:has(#thema-hell:checked)) .thema .zu-dunkel { display: none }
  }
  :root:has(#thema-dunkel:checked) .thema .zu-hell { display: grid }
  :root:has(#thema-dunkel:checked) .thema .zu-dunkel { display: none }
  :root:has(#thema-hell:focus-visible) .zu-hell,
  :root:has(#thema-dunkel:focus-visible) .zu-dunkel { outline: 2px solid var(--link); outline-offset: 2px }
}

/* Paketliste */
.liste { overflow-y: auto; background: var(--rand); border-right: 1px solid var(--linie); padding: 12px 10px 24px max(10px, env(safe-area-inset-left, 0px)) }
.liste h2 { font: 700 11.5px/1 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--leise); margin: 22px 10px 8px }
.liste ul { list-style: none; margin: 0; padding: 0 }
.eintrag { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 11px;
  color: var(--ink); text-decoration: none; position: relative }
.eintrag:hover { background: color-mix(in srgb, var(--ink) 5%, transparent) }
.eintrag[aria-current] { background: color-mix(in srgb, var(--a, var(--ink)) 14%, var(--rand)) }
.eintrag[aria-current]::before { content: ""; position: absolute; left: -10px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--a, var(--akzent)) }
.eintrag .symbol { width: 40px; height: 40px; border-radius: 10px; display: block }
.eintrag-text { min-width: 0 }
.eintrag-text b { display: block; font-size: 15px; font-weight: 650; letter-spacing: -.01em }
.eintrag-text small { display: block; font-size: 12.5px; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.mosaik { width: 40px; height: 40px; display: grid; grid-template-columns: repeat(2, 18.5px); gap: 3px }
.mosaik img { width: 18.5px; height: 18.5px; border-radius: 5px; display: block }

.ver { font: 500 12px/1.4 var(--mono); color: var(--soft); background: color-mix(in srgb, var(--ink) 6%, transparent); padding: 2px 7px; border-radius: 6px; white-space: nowrap; text-decoration: none }
a.ver:hover { color: var(--ink) }

/* Detail */
.detail { overflow-y: auto; padding: 30px clamp(22px, 3.2vw, 48px) 56px; min-width: 0 }
.zurueck { display: none }
.oberzeile { font-size: 13px; font-weight: 600; color: var(--soft); margin: 0 0 6px }
.oberzeile a { color: inherit; text-decoration: none }
.oberzeile a:hover { text-decoration: underline }

.statuszeile { grid-column: 1 / -1; display: flex; align-items: center; gap: 22px; padding: 0 max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px));
  font: 500 12px/1 var(--text); color: var(--soft); background: var(--rand); border-top: 1px solid var(--linie); white-space: nowrap; overflow: hidden }
.statuszeile > span:last-child { margin-left: auto }
.fuss-datenschutz { display: none }
.lampe { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #2fbf5f; margin-right: 8px; vertical-align: 1px }

/* ================================================================ Startseite */
.start-kopf h1 { font: 800 clamp(28px, 2.8vw, 40px)/1.08 var(--sans); letter-spacing: -.035em; margin: 0 0 24px }
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px }
.kachel { display: flex; flex-direction: column; border: 1px solid var(--linie); border-radius: 16px; overflow: hidden; color: var(--ink); text-decoration: none;
  background: var(--seite); transition: border-color .2s, box-shadow .2s }
.kachel:hover { border-color: color-mix(in srgb, var(--a) 45%, var(--linie)); box-shadow: var(--schatten) }
.flaeche { display: flex; justify-content: center; align-items: flex-start; height: 150px; overflow: hidden; padding-top: 18px;
  background: color-mix(in srgb, var(--a) var(--tint), var(--seite)) }
.flaeche img { transition: transform .35s cubic-bezier(.2, .7, .2, 1) }
.flaeche.phone img { width: 40%; border-radius: 18px; border: 5px solid var(--bezel); box-shadow: var(--schatten) }
.flaeche.wide { justify-content: flex-start; padding-left: 20px }
.flaeche.wide img { width: 100%; max-width: none; border-radius: 9px 0 0 0; box-shadow: var(--schatten) }
.kachel:hover .flaeche img { transform: translateY(-5px) }
.kachel-titel { display: flex; align-items: center; gap: 10px; padding: 14px 16px 0 }
.kachel-titel .symbol { width: 32px; height: 32px; border-radius: 8px }
.kachel-titel b { font-size: 16.5px; letter-spacing: -.015em }
.kachel-titel .ver { margin-left: auto }
.kachel-text { flex: 1; padding: 6px 16px 0; color: var(--soft); font-size: 14px; line-height: 1.45 }
.kachel-kat { padding: 10px 16px 14px; font-size: 12px; color: var(--leise) }

.abschnitt { font-size: 18px; font-weight: 700; margin: 38px 0 8px }
.tabelle { border-collapse: collapse; width: 100%; max-width: 620px; font-size: 14.5px }
.tabelle th { text-align: left; font-size: 12px; font-weight: 650; color: var(--leise); padding: 0 16px 8px 0; border-bottom: 1px solid var(--linie) }
.tabelle td { padding: 9px 16px 9px 0; border-bottom: 1px solid var(--linie); vertical-align: middle }
.tabelle td:first-child { white-space: nowrap; color: var(--soft) }
.neueste img { width: 20px; height: 20px; border-radius: 5px; vertical-align: -5px; margin-right: 10px }
.neueste td:nth-child(2) a { color: var(--ink); font-weight: 600; text-decoration: none }
.neueste td:nth-child(2) a:hover { text-decoration: underline }

/* ================================================================ Paketseite */
.paket-kopf { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 8px 20px; align-items: center; margin-bottom: 18px }
.app-symbol { width: 72px; height: 72px; border-radius: 18px; display: block }
.paket-titel h1 { font: 800 clamp(28px, 2.6vw, 36px)/1.05 var(--sans); letter-spacing: -.035em; margin: 0 }
.app-kurz { font-size: 16px; color: var(--soft); margin: 4px 0 0 }
.aktionen { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; max-width: 480px }
.knopf { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border-radius: 9px; font: 650 14.5px/1.2 var(--sans);
  color: var(--ink); background: var(--seite); border: 1px solid var(--linie); text-decoration: none; white-space: nowrap }
.knopf:hover { border-color: var(--soft) }
.knopf.voll { background: var(--a); border-color: var(--a); color: var(--a-ink) }
.knopf.voll:hover { filter: brightness(1.08) }
.store { display: inline-flex; border-radius: 9px }
.store img { display: block; height: 42px; width: auto }
.store:hover img { filter: brightness(1.25) }

/* Reiter */
.reiter-wahl { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none }
.reiterleiste { position: sticky; top: -30px; z-index: 2; display: flex; gap: 4px; margin: 0 0 26px; background: var(--seite);
  border-bottom: 1px solid var(--linie); overflow-x: auto; scrollbar-width: none }
.reiterleiste label { padding: 12px 14px 11px; font-weight: 600; font-size: 14.5px; color: var(--soft); border-bottom: 2px solid transparent; margin-bottom: -1px;
  cursor: pointer; white-space: nowrap; user-select: none }
.reiterleiste label:hover { color: var(--ink) }
.tafel { display: none }
.tafel > h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap }
#r-uebersicht:checked ~ .reiterleiste [for="r-uebersicht"],
#r-installation:checked ~ .reiterleiste [for="r-installation"],
#r-versionen:checked ~ .reiterleiste [for="r-versionen"],
#r-fragen:checked ~ .reiterleiste [for="r-fragen"] { color: var(--ink); border-bottom-color: var(--a) }
#r-uebersicht:focus-visible ~ .reiterleiste [for="r-uebersicht"],
#r-installation:focus-visible ~ .reiterleiste [for="r-installation"],
#r-versionen:focus-visible ~ .reiterleiste [for="r-versionen"],
#r-fragen:focus-visible ~ .reiterleiste [for="r-fragen"] { outline: 2px solid var(--link); outline-offset: -5px; border-radius: 8px }
#r-uebersicht:checked ~ .spalten .t-uebersicht,
#r-installation:checked ~ .spalten .t-installation,
#r-versionen:checked ~ .spalten .t-versionen,
#r-fragen:checked ~ .spalten .t-fragen { display: block }

.spalten { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 48px; align-items: start }
.tafeln { min-width: 0 }
.tafel h3 { font-size: 17px; font-weight: 700; margin: 30px 0 12px }
.intro { font-size: 17px; line-height: 1.6; max-width: 68ch; margin: 0 0 24px }

.galerie { display: flex; gap: 16px; overflow-x: auto; padding: 2px 2px 16px; scroll-snap-type: x proximity }
.galerie figure { margin: 0; flex: none; scroll-snap-align: start }
.galerie figure.phone img { height: 380px; width: auto; border-radius: 24px; border: 5px solid var(--bezel); display: block }
.galerie figure.wide img { width: min(640px, 68vw); border-radius: 10px; border: 1px solid var(--linie); display: block }
.galerie figcaption { margin-top: 8px; font-size: 12.5px; line-height: 1.4; color: var(--soft); max-width: 200px }
.galerie figure.wide figcaption { max-width: none }

/* Großansicht der Bilder, ohne Skript über :target */
.zoom { display: block; cursor: zoom-in }
.grossansicht { display: none; position: fixed; inset: 0; z-index: 50; align-items: center; justify-content: center;
  padding: 24px 64px; background: rgba(10, 12, 14, .88) }
.grossansicht:target { display: flex }
.grossansicht .hintergrund { position: absolute; inset: 0; cursor: zoom-out }
.grossansicht figure { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none }
.grossansicht img { max-width: min(1400px, 100%); max-height: calc(100dvh - 90px); width: auto; height: auto; border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .6); pointer-events: auto }
.grossansicht figcaption { color: #e6e8eb; font-size: 14px; text-align: center }
.grossansicht .schliessen, .grossansicht .blaettern { position: absolute; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 255, 255, .12); color: #fff; font: 400 28px/1 var(--text); text-decoration: none }
.grossansicht .schliessen:hover, .grossansicht .blaettern:hover { background: rgba(255, 255, 255, .24) }
.grossansicht .schliessen { top: 14px; right: 14px }
.grossansicht .zurueck-bild { left: 12px; top: 50% }
.grossansicht .weiter-bild { right: 12px; top: 50% }

.funktionen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px }
.funktionen li { padding: 14px 16px; border: 1px solid var(--linie); border-radius: 12px; color: var(--soft); font-size: 14.5px; line-height: 1.5 }
.funktionen b { display: block; color: var(--ink); font-size: 15px; margin-bottom: 3px }

.schritte { list-style: none; margin: 0; padding: 0; counter-reset: schritt; max-width: 70ch }
.schritte li { position: relative; padding: 3px 0 14px 46px; counter-increment: schritt }
.schritte li::before { content: counter(schritt); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font: 700 14px/1 var(--sans); background: color-mix(in srgb, var(--a) var(--tint), var(--seite)); color: var(--ink) }
.t-installation > p { max-width: 70ch; color: var(--soft) }
.knopf .mb { font-weight: 500; opacity: .75; margin-left: 6px }
.tabelle-box { overflow-x: auto; max-width: 100% }
.dateien { max-width: none }
.dateien td:first-child { color: inherit }
.hash { font-size: 11.5px; color: var(--soft); word-break: break-all }
.hinweis { font-size: 13.5px; color: var(--soft); margin-top: 10px }
.hinweis code { white-space: nowrap }

/* Änderungsverlauf */
.verlauf { max-width: 75ch; border-top: 1px solid var(--linie); margin-bottom: 16px }
.release { border-bottom: 1px solid var(--linie) }
.release summary { display: flex; align-items: center; gap: 12px; padding: 12px 0; cursor: pointer; list-style: none; font-weight: 600 }
.release summary::-webkit-details-marker { display: none }
.release summary::before { content: "›"; display: inline-block; width: 12px; color: var(--soft); font-size: 18px; transition: transform .15s }
.release[open] summary::before { transform: rotate(90deg) }
.release.ohne a { display: flex; align-items: center; gap: 12px; padding: 12px 0 12px 24px; color: inherit; text-decoration: none; font-weight: 600 }
.release .ver { font-size: 13px }
.rel-datum { color: var(--soft); font-weight: 400; font-size: 14px }
.notizen { padding: 0 0 16px 24px; color: var(--soft); font-size: 15px }
.notizen h4, .notizen h5, .notizen h6 { font-size: 15px; color: var(--ink); margin: 14px 0 6px; letter-spacing: 0 }
.notizen h4:first-child, .notizen p:first-child { margin-top: 0 }
.notizen ul, .notizen ol { margin: 0 0 10px; padding-left: 20px }
.notizen li { margin-bottom: 5px }
.notizen b { color: var(--ink) }
.notizen pre { background: color-mix(in srgb, var(--ink) 6%, transparent); padding: 10px 12px; border-radius: 8px; overflow-x: auto; font-size: 13px }
.notizen hr { border: 0; border-top: 1px solid var(--linie); margin: 14px 0 }
.notizen code { font-size: .88em }
.rel-link { font-size: 13.5px; margin-top: 8px }

.fragen { margin: 0; max-width: 70ch }
.fragen dt { font-weight: 650; font-size: 16px; margin-top: 20px }
.fragen dt:first-child { margin-top: 0 }
.fragen dd { margin: 4px 0 0; color: var(--soft) }

.info { font-size: 14px }
.info dl { margin: 0 }
.info dl > div { padding: 9px 0; border-bottom: 1px solid var(--linie) }
.info dl > div:first-child { padding-top: 0 }
.info dt { font-size: 12px; font-weight: 600; color: var(--leise) }
.info dd { margin: 2px 0 0; overflow-wrap: anywhere }
.info h3 { font-size: 12px; font-weight: 600; color: var(--leise); margin: 18px 0 6px; letter-spacing: 0 }
.info ul { list-style: none; margin: 0; padding: 0 }
.info li { margin: 0 0 5px }

/* Unterstützen */
.ico { width: 17px; height: 17px; flex: none; margin-right: 8px }
.knopf.spende-knopf { background: var(--ink); border-color: var(--ink); color: var(--seite) }
.knopf.spende-knopf .ico { color: #e5484d }
.spende { margin-top: 40px; max-width: 760px; padding: 26px 28px; border-radius: 16px;
  background: color-mix(in srgb, var(--akzent) 13%, var(--seite)); border: 1px solid color-mix(in srgb, var(--akzent) 35%, var(--linie)) }
.spende h2 { font-size: 24px; font-weight: 800; letter-spacing: -.03em; margin: 0 0 10px }
.spende > p:not(.oberzeile) { max-width: 64ch }
.spende .aktionen { justify-content: flex-start; margin: 18px 0 0 }
.spende-hinweis { font-size: 14px; color: var(--soft); margin: 16px 0 0 !important }
.spende-kasten { margin-top: 22px; padding: 16px; border-radius: 12px; background: color-mix(in srgb, var(--akzent) 13%, var(--seite)) }
.spende-kasten p { margin: 0 0 12px; color: var(--soft) }
.spende-kasten .knopf { width: 100%; justify-content: center }
.spende-kasten ul { margin-top: 12px }

/* Textseite */
.text-seite { max-width: 70ch }
.text-seite h1 { font-size: 32px; font-weight: 800; letter-spacing: -.03em; margin: 0 0 16px }
.text-seite h2 { font-size: 17px; font-weight: 700; margin: 28px 0 6px }
.text-seite p { color: var(--soft) }

@media (prefers-reduced-motion: reduce) { .flaeche img, .kachel { transition: none } }

/* ================================================================ mittel */
@media (max-width: 1180px) {
  .app { grid-template-columns: 270px minmax(0, 1fr) }
  .spalten { grid-template-columns: minmax(0, 1fr); gap: 30px }
  .info { position: static; border-top: 1px solid var(--linie); padding-top: 20px }
  .info dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 24px }
  .info dl > div:first-child { padding-top: 9px }
  .paket-kopf { grid-template-columns: 64px minmax(0, 1fr) }
  .app-symbol { width: 64px; height: 64px; border-radius: 16px }
  .aktionen { grid-column: 1 / -1; justify-content: flex-start; margin-top: 8px; max-width: none }
}

/* ================================================================ Handy */
@media (max-width: 820px) {
  .app { display: flex; flex-direction: column; height: auto; min-height: 100dvh }
  .leiste { position: sticky; top: 0; z-index: 5; height: 58px; flex: none; gap: 10px }
  .untertitel, .oben > a[href^="http"] { display: none }
  .oben { gap: 14px }
  .liste { border-right: 0; padding: 4px max(8px, env(safe-area-inset-right, 0px)) 8px max(8px, env(safe-area-inset-left, 0px)) }
  .liste .alle { display: none }
  .eintrag[aria-current]::before { display: none }
  .ist-paket .liste, .ist-text .liste { display: none }
  .detail { overflow: visible; flex: 1; padding: 18px max(16px, env(safe-area-inset-right, 0px)) 40px max(16px, env(safe-area-inset-left, 0px)) }
  .zurueck { display: inline-block; font-size: 14px; font-weight: 600; text-decoration: none; margin-bottom: 14px }
  .zurueck::before { content: "‹ " }

  /* Startseite: Überschrift, dann die Liste, dann die neuesten Versionen */
  .ist-start .detail { display: contents }
  .ist-start .zurueck, .ist-start .kacheln { display: none }
  .ist-start .start-kopf { order: 1; padding: 22px 16px 0 }
  .ist-start .start-kopf h1 { margin-bottom: 4px }
  .ist-start .liste { order: 2 }
  .ist-start .abschnitt { order: 3; margin: 26px 16px 4px }
  .ist-start .neueste { order: 4; margin: 0 16px 36px; width: calc(100% - 32px) }
  .ist-start .spende { order: 5; margin: 0 16px 36px; padding: 22px 18px }
  .ist-start .statuszeile { order: 6 }
  .nav-spende { display: none }

  .reiterleiste { top: 58px; margin-inline: -16px; padding-inline: 8px }
  .galerie { margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px }
  .galerie figure.phone img { height: 340px }
  .galerie figure.wide img { width: 86vw }
  .grossansicht { padding: 56px 8px 16px }
  .grossansicht .blaettern { top: auto; bottom: 12px }
  .funktionen { grid-template-columns: minmax(0, 1fr) }
  .paket-kopf { grid-template-columns: 56px minmax(0, 1fr); gap: 6px 14px }
  .app-symbol { width: 56px; height: 56px; border-radius: 14px }
  .knopf { flex: 1 1 auto; justify-content: center }
  .store { flex: 1 1 100%; justify-content: center }

  .statuszeile { flex-wrap: wrap; gap: 6px 16px; padding-block: 12px; white-space: normal; line-height: 1.5 }
  .statuszeile > span:last-child { margin-left: 0 }
}

/* Schmale Handys: Datenschutz wandert aus der Leiste in die Statuszeile */
@media (max-width: 480px) {
  .nav-datenschutz { display: none }
  .fuss-datenschutz { display: inline }
}