/* =============================================================================
   rauMKult — App-Ansicht (rk-app.css)
   Version: 1.6 | 2026-10-01 | Spec 014: Academy-Hub-Regeln aus index.html hierher (Abschnitt „Academy-Hub“), Auswahlfelder der Formulare 48 px.
   Version: 1.5 | 2026-10-01 | Spec 009 Teil A: „Mehr lesen“ ohne Hülle ([data-rk-mehr], Knopf .rk-mehr__knopf--teil baut rk-app.js),
                                Variante für lange Verkaufsseiten; Optik und Beschriftung wie details.rk-mehr.
   Version: 1.4 | 2026-10-01 | Spec 011: keine Kopfzeile in der App-Ansicht (--rk-header-h = 0, --rk-sicher-oben, --rk-app-oben);
                                Logo, Hell/Dunkel und Barrierefreiheit im Menü-Blatt; Abstände oben (Fortschritt, Sprunglink,
                                Hinweisbalken, Fenster, Kurs-Sprungmarken) und scroll-padding für Anker und Fokus.
   Version: 1.3 | 2026-10-01 | Spec 007 Runde 2: Cookie-Hinweis im niedrigen Querformat behält den Satz „Wahl ändern“ (Text rollt, Knöpfe bleiben).
   Version: 1.2 | 2026-10-01 | Spec 004 Runde 2: Akkordeon mit Titel ([data-rk-akkordeon]), dichtere Formulare (.rk-pform), feste Werte auf Token.
   Version: 1.1 | 2026-10-01 | Spec 004: Bausteine „Mehr lesen“ (.rk-mehr), Karussell ([data-rk-karussell]),
                                Fußzeile als Akkordeon, bewusst Ausgeblendetes ([data-rk-app-aus]) und Nur-App-Einträge
                                ([data-rk-app-nur]); Grundzustand (Webansicht, Desktop) layoutneutral, siehe Abschnitt unten.
   Spec 007 (2026-10-01): Schwebeknöpfe über dem Cookie-Hinweis in allen Ansichten (--rk-hinweis-h), Abschnitt vor der App-Ansicht.
   Version: 1.0 | 2026-10-01 | Spec 003 (App-Ansicht Fundament)
   Gilt nur auf dem Handy (bis 767 px) und nur bei html[data-view="app"] — gesetzt vom Kopf-Skript in base.njk,
   umschaltbar im Handy-Menü (rk-app.js). Ab 768 px greift keine Regel dieser Datei; die Webansicht bleibt wie bisher.
   Ausnahmen, bewusst und nur bis 767 px:
     - Umschalter im Menü: html[data-view] (beide Ansichten), sonst käme man aus der Webansicht nicht zurück.
     - Die Freigabe der Seitenübergänge (@view-transition, Regel ohne Selektor) steht NICHT hier, sondern inline im
       <head> von base.njk: aus einer verlinkten Datei nahm Chromium sie auf der neuen Seite nicht an (gemessen
       01.10.2026, Spec 003). Außerhalb der App-Ansicht und bei „Bewegung aus“ überspringen base.njk (pagereveal)
       und rk-app.js (pageswap) den Übergang; hier nur die Gestaltung der Übergänge.
   Stapelung unten (von unten nach oben): Tab-Leiste → ggf. Cookie-Hinweis → Schwebeknöpfe
   (Widerruf links, Nach oben rechts, Chatbot darüber). Alles misst sich an --rk-tabbar-h.
   Werte nur aus Tokens (main-v2.css); Schalter-Optik zentral (.a11y-switch).
   Einzige Regeln außerhalb von 767 px: der Grundzustand der Bausteine aus Spec 004 (Abschnitt „Grundzustand“),
   der in Webansicht und Desktop nichts verändert (gemessen: Desktop pixelgleich).
   ============================================================================= */

/* ── Grundzustand der Bausteine (Webansicht und Desktop, alle Breiten) ─────────────────────────────
   „Mehr lesen“: <details class="rk-mehr"> um sekundären Text. Außerhalb der App-Ansicht ist das <details>
   für das Layout unsichtbar (display: contents, auch ::details-content) und sein Inhalt immer sichtbar,
   egal ob offen oder zu; der Knopf (summary) ist ausgeblendet. Im HTML steht <details> ohne „open“,
   damit die App-Ansicht ohne Flackern eingeklappt startet. Browser ohne ::details-content (Safari < 18.4,
   Firefox < 143) bekommen außerhalb der App-Ansicht „open“ von rk-app.js.
   .rk-mehr--block: behält seinen eigenen Kasten (z. B. Fußzeilen-Spalte als Rasterzelle).
   Akkordeon mit Titel ([data-rk-akkordeon]): kein <details>, sondern das Original-HTML; den Knopf in der Überschrift
   baut rk-app.js nur in der App-Ansicht (Webansicht und Desktop behalten Überschrift und Text ohne Knopf). */
details.rk-mehr {
  display: contents;
}
details.rk-mehr::details-content {
  display: contents;
  content-visibility: visible;
}
details.rk-mehr.rk-mehr--block {
  display: block;
}
details.rk-mehr > .rk-mehr__knopf,
details.rk-mehr .rk-mehr__pfeil,
.rk-mehr__knopf--teil,
.rk-karussell__nav,
[data-rk-app-nur][hidden] {
  display: none;
}
details.rk-mehr > .rk-mehr__knopf::-webkit-details-marker {
  display: none;
}
/* Spec 011: Barrierefreiheit im Kopf des Menü-Blatts nur in der App-Ansicht (Webansicht: Knopf oben in der Kopfzeile) */
.rk-mm .rk-mm__tool.rk-mm__tool--a11y {
  display: none;
}

/* ── Cookie-Hinweis offen: Schwebeknöpfe rücken darüber (Spec 007, alle Ansichten und Breiten) ──
   rk-app.js misst die Höhe des Hinweises und setzt --rk-hinweis-h auf <html> (0, solange er zu ist); dieselbe Größe
   steckt im Widerruf-Knopf (partials/widerruf-fab.njk) und im Chatbot (chatbot-widget.css). In der App-Ansicht
   (bis 767 px) gelten stattdessen die Regeln unten (Leiste + Hinweis, --rk-app-unten). Weicher Übergang, bei
   „Bewegung reduziert“ und „Bewegung aus“ (Barrierefreiheit) ohne Bewegung. */
html .rk-totop {
  bottom: calc(var(--rk-fab-gap) + env(safe-area-inset-bottom, 0px) + var(--rk-hinweis-h, 0px));
  transition: opacity .35s var(--rk-ease-out), transform .35s var(--rk-ease-out), visibility 0s linear .35s, background-color .2s, bottom .25s var(--rk-ease-out);
}
html .rk-totop.is-on {
  transition: opacity .35s var(--rk-ease-out), transform .35s var(--rk-ease-out), visibility 0s, background-color .2s, bottom .25s var(--rk-ease-out);
}
@media (prefers-reduced-motion: reduce) {
  html .rk-totop,
  html .rk-totop.is-on {
    transition: none;
  }
}
html[data-motion="reduced"] .rk-totop,
html[data-motion="reduced"] .rk-totop.is-on,
html.no-motion .rk-totop,
html.no-motion .rk-totop.is-on {
  transition: none;
}
/* Kurs-Kaufleiste (Handy, kurs-premium.css): der offene Hinweis liegt darüber (z-index 9000 gegen 75), die Knöpfe
   rücken deshalb nur über den Hinweis und nicht zusätzlich um die Leistenhöhe (data-rk-hinweis setzt rk-app.js). */
html[data-rk-hinweis].kp-buybar-on .rk-wfab,
html[data-rk-hinweis].kp-buybar-on .rk-totop,
html[data-rk-hinweis].kp-buybar-on .rk-chatbot {
  translate: none;
}

/* Niedriges Querformat (Handy gedreht): der Hinweis wäre sonst über 200 px hoch und ließe dem Widerruf-Knopf
   keinen Platz im Bild. Kompakter: ohne Kopfzeile, engerer Rand; der Text bekommt eine begrenzte Höhe und rollt
   für sich, die Knöpfe bleiben darunter stehen. Der Satz „Wahl jederzeit ändern“ bleibt im Hinweis (Art. 7 Abs. 3
   DSGVO: Information vor der Einwilligung, Prüfbefund Spec 007 Runde 1) — der Inhalt des Hinweises ändert sich nicht. */
@media (max-height: 480px) and (orientation: landscape) {
  html .rk-cookie-banner__inner {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--rk-space-2, 8px);
    padding-block: var(--rk-space-2, 8px);
  }
  /* Spec 014: Nicht der ganze Text rollt, sondern nur der erste Absatz; der Satz „Wahl jederzeit ändern“ steht darunter
     fest im Bild (gemessen sichtbar, auch bei Schrift „groß“), die Höhe lässt dem Widerruf-Knopf darüber Platz. */
  html .rk-cookie-banner__text {
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    max-height: 28vh;
    overflow: hidden;
  }
  html .rk-cookie-banner__body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }
  html .rk-cookie-banner__hint {
    flex: none;
    margin: var(--rk-space-1, 4px) 0 0;
  }
  html .rk-cookie-banner__eyebrow {
    display: none;
  }

  /* Spec 014 (Messung „Cookie-Einstellungen im Querformat“): Kopf, Liste und Fußleiste standen bisher übereinander in
     einem Fenster, das nur 94 vh hoch sein darf — für die Liste mit den Schaltern blieben 0 bis 6 px, die Kategorien
     waren nicht erreichbar. Jetzt rollt das ganze Fenster, die Liste behält ihre natürliche Höhe, die Knöpfe stehen
     nebeneinander am Ende. Inhalt und Texte unverändert. */
  html .rk-cookie-settings__panel {
    max-height: 94vh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  html .rk-cookie-settings__list {
    flex: none;
    max-height: none;
    overflow: visible;
  }
  html .rk-cookie-settings__footer {
    flex-direction: row;
  }
  html .rk-cookie-settings__btn {
    width: auto;
  }
}

@media (max-width: 767px) {

  /* ── Tokens der App-Ansicht ── */
  html[data-view="app"] {
    --rk-tabbar-h: 64px;                                        /* Höhe der Leiste ohne Sicherheitsabstand */
    --rk-tabbar-unten: env(safe-area-inset-bottom, 0px);        /* Home-Indikator (iPhone) */
    /* Spec 011: Die Kopfzeile entfällt in der App-Ansicht. Alles, was bisher unter ihr saß, misst sich an --rk-app-oben
       (Kopfzeile 0 + Statusleiste/Notch); --rk-sicher-oben ist die einzige Stelle mit env(safe-area-inset-top). */
    --rk-header-h: 0px;
    --rk-sicher-oben: env(safe-area-inset-top, 0px);
    --rk-app-oben: calc(var(--rk-header-h) + var(--rk-sicher-oben));    /* Oberkante des freien Bereichs */
    --rk-app-kopf-h: calc(var(--rk-app-oben) + var(--rk-space-4, 16px)); /* Abstand offener Fenster nach oben */
    --rk-tabbar-fs-min: 14px;                                   /* Mindestschrift (mobile-first-app.md) */
    /* Oberkante der Leiste bzw. des Cookie-Hinweises darüber (Höhe meldet rk-app.js als --rk-hinweis-h) */
    --rk-app-unten: calc(var(--rk-tabbar-h) + var(--rk-tabbar-unten) + var(--rk-hinweis-h, 0px));
  }

  /* Inhalt endet über der Leiste (Fußzeile bleibt ganz lesbar) */
  html[data-view="app"] body {
    padding-bottom: calc(var(--rk-tabbar-h) + var(--rk-tabbar-unten));
  }

  /* ── Keine Kopfzeile (Spec 011) ──
     Kopfzeile (Logo, Hamburger) und die Knöpfe Hell/Dunkel und Barrierefreiheit oben entfallen; im HTML bleiben sie für
     Webansicht und Desktop (Wechsel ohne Neuladen). Logo, Hell/Dunkel und Barrierefreiheit stehen im Menü-Blatt (Tab
     „Menü“), „Start“ in der Leiste ersetzt den Logo-Link. #a11y-toolbar-trigger löst das Menü-Blatt aus
     (rk-mobilmenue.js); beim Schließen kehrt der Fokus auf den auslösenden Knopf zurück (a11y-toolbar.js). */
  html[data-view="app"] .site-header,
  html[data-view="app"] .theme-fab,
  html[data-view="app"] .a11y-trigger {
    display: none;
  }
  /* Inhalt beginnt oben unter der Statusleiste (rk-legal.js liest diesen Abstand für die klebende Leiste) */
  html[data-view="app"] body {
    padding-top: var(--rk-app-oben);
  }
  /* Ankersprünge und Tastaturfokus landen frei: oben unter der Statusleiste, unten über Leiste und Schwebeknöpfen */
  html[data-view="app"] {
    scroll-padding-top: calc(var(--rk-app-oben) + var(--rk-space-2, 8px));
    scroll-padding-bottom: calc(var(--rk-app-unten) + var(--rk-fab-size) + var(--rk-fab-gap) * 2);
    /* Kurs-Seiten (kurs-premium.css, beratung.css): Sprungmarken ohne Kopfzeile */
    --kp-sticky-top: calc(var(--rk-app-oben) + var(--rk-space-4, 16px));
  }
  html[data-view="app"] .rk-progress {
    top: var(--rk-app-oben);
  }
  html[data-view="app"] .skip-link:focus,
  html[data-view="app"] .skip-link:focus-visible {
    transform: translateY(var(--rk-app-oben));
  }
  /* Hinweisbalken (banner-loader.js): Fläche reicht unter die Statusleiste, Text beginnt darunter */
  html[data-view="app"] .rk-banner-top,
  html[data-view="app"] .rk-banner-marquee,
  html[data-view="app"] .rk-banner-countdown {
    top: var(--rk-header-h);
    border-top: var(--rk-sicher-oben) solid transparent;
  }
  html[data-view="app"] .rk-banner-slidein {
    bottom: calc(var(--rk-app-unten) + var(--rk-fab-size) + var(--rk-fab-gap) * 2);
  }
  /* Barrierefreiheit (aus dem Menü-Blatt geöffnet): zwischen Statusleiste und Schwebeknöpfen, rollt für sich */
  html[data-view="app"] .a11y-panel {
    top: var(--rk-app-kopf-h);
    max-height: calc(100vh - var(--rk-app-kopf-h) - var(--rk-app-unten) - var(--rk-fab-size) - var(--rk-fab-gap) * 2);
    max-height: calc(100dvh - var(--rk-app-kopf-h) - var(--rk-app-unten) - var(--rk-fab-size) - var(--rk-fab-gap) * 2);
    overscroll-behavior: contain;
  }
  /* Menü-Blatt: Barrierefreiheit als Knopf neben Hell/Dunkel (nur App-Ansicht, sonst steht er oben in der Kopfzeile) */
  html[data-view="app"] .rk-mm .rk-mm__tool.rk-mm__tool--a11y {
    display: inline-grid;
  }

  /* ── Tab-Leiste ── */
  html[data-view="app"] .rk-tabbar[hidden] {
    display: block;
  }
  html[data-view="app"] .rk-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 8900;                                              /* unter Schwebeknöpfen, Hinweis, Menü und Fenstern */
    padding-bottom: var(--rk-tabbar-unten);
    background: var(--surface-card);
    border-top: 1px solid var(--rk-line);
    box-shadow: var(--rk-shadow-card-rest);
    font-family: var(--font-ui);
  }
  html[data-view="app"] .rk-tabbar__liste {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
  }
  html[data-view="app"] .rk-tabbar__eintrag {
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  html[data-view="app"] .rk-tabbar__eintrag::marker {
    content: none;
  }
  html[data-view="app"] .rk-tabbar__ziel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 100%;
    min-width: var(--rk-touch-comfort);
    min-height: calc(var(--rk-tabbar-h) - 1px);                 /* + 1 px Linie oben = --rk-tabbar-h */
    margin: 0;
    padding: 6px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color .2s;
  }
  html[data-view="app"] .rk-tabbar__symbol {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  html[data-view="app"] .rk-tabbar__text {
    display: block;
    max-width: 100%;
    overflow: hidden;
    font-size: var(--rk-fs-xs);
    line-height: 1.2;
    letter-spacing: 0;
    white-space: nowrap;
  }
  /* Aktuelles Ziel: dunkler, kräftiger, feine orange Linie oben (Orange nur als Linie) */
  html[data-view="app"] .rk-tabbar__ziel[aria-current="page"] {
    color: var(--text-primary);
    font-weight: var(--rk-fw-medium);
  }
  html[data-view="app"] .rk-tabbar__ziel[aria-current="page"]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 24px;
    height: 2px;
    margin-left: -12px;
    background: var(--accent-orange);
  }
  html[data-view="app"] .rk-tabbar__ziel[aria-expanded="true"] {
    color: var(--text-primary);
  }
  html[data-view="app"] .rk-tabbar__ziel:focus-visible {
    outline: 2px solid var(--rk-focus-color);
    outline-offset: -4px;
  }
  /* Große Schrift (Barrierefreiheit) auf sehr schmalen Geräten: Beschriftung bleibt in der Tippfläche */
  html[data-view="app"][data-fs-accessible="xl"] .rk-tabbar__text {
    font-size: max(var(--rk-tabbar-fs-min), min(var(--rk-fs-xs), 4.4vw));
  }

  /* ── Schwebeknöpfe über der Leiste ── */
  html[data-view="app"] .rk-wfab {
    left: var(--rk-fab-gap);
    bottom: calc(var(--rk-app-unten) + var(--rk-fab-gap));
  }
  /* Offenes Widerruf-Fenster liegt vorn und bleibt zwischen Statusleiste und Leiste */
  html[data-view="app"] .rk-wfab.is-open {
    z-index: 9050;
  }
  html[data-view="app"] .rk-wfab__panel {
    max-height: calc(100vh - var(--rk-app-unten) - var(--rk-fab-gap) - var(--rk-fab-size) - var(--rk-space-5, 24px) - var(--rk-app-kopf-h));
    max-height: calc(100dvh - var(--rk-app-unten) - var(--rk-fab-gap) - var(--rk-fab-size) - var(--rk-space-5, 24px) - var(--rk-app-kopf-h));
  }
  html[data-view="app"] .rk-totop {
    right: var(--rk-fab-gap);
    bottom: calc(var(--rk-app-unten) + var(--rk-fab-gap));
  }
  /* Chatbot über dem Nach-oben-Knopf */
  html[data-view="app"] .rk-chatbot {
    --rk-app-chat-unten: calc(var(--rk-app-unten) + var(--rk-fab-gap) * 2 + var(--rk-fab-size));
    right: var(--rk-fab-gap);
    bottom: var(--rk-app-chat-unten);
  }
  html[data-view="app"] .rk-chatbot__panel {
    width: calc(100vw - var(--rk-fab-gap) * 2);
    height: min(560px, calc(100vh - var(--rk-app-chat-unten) - var(--rk-app-kopf-h)));
    height: min(560px, calc(100dvh - var(--rk-app-chat-unten) - var(--rk-app-kopf-h)));
    max-height: none;
  }
  /* Spec 009 K3: Kurs-Kaufleiste offen (kurs-premium.js setzt html.kp-buybar-on und --kp-buybar-h) — die Schwebeknöpfe
     rücken um ihre Höhe nach oben; Widerruf-Fenster und Chatbot werden um dieselbe Höhe kürzer, sonst ragten sie oben
     aus dem Bild (gemessen 57 px, Stand b932423). */
  html[data-view="app"].kp-buybar-on .rk-wfab__panel {
    max-height: calc(100vh - var(--rk-app-unten) - var(--rk-fab-gap) - var(--rk-fab-size) - var(--rk-space-5, 24px) - var(--rk-app-kopf-h) - var(--kp-buybar-h, 0px));
    max-height: calc(100dvh - var(--rk-app-unten) - var(--rk-fab-gap) - var(--rk-fab-size) - var(--rk-space-5, 24px) - var(--rk-app-kopf-h) - var(--kp-buybar-h, 0px));
  }
  html[data-view="app"].kp-buybar-on .rk-chatbot__panel {
    height: min(560px, calc(100vh - var(--rk-app-chat-unten) - var(--rk-app-kopf-h) - var(--kp-buybar-h, 0px)));
    height: min(560px, calc(100dvh - var(--rk-app-chat-unten) - var(--rk-app-kopf-h) - var(--kp-buybar-h, 0px)));
  }

  /* ── Cookie-Hinweis sitzt auf der Leiste ── */
  html[data-view="app"] .rk-cookie-banner {
    bottom: calc(var(--rk-tabbar-h) + var(--rk-tabbar-unten));
  }

  /* ── Seitenübergänge (nur App-Ansicht, siehe Kopf) ── */
  html[data-view="app"] .rk-tabbar {
    view-transition-name: rk-tabbar;
  }
  html[data-view="app"]::view-transition-old(root),
  html[data-view="app"]::view-transition-new(root) {
    animation-duration: .22s;
  }
  html[data-view="app"][data-motion="reduced"]::view-transition-group(*),
  html[data-view="app"][data-motion="reduced"]::view-transition-old(*),
  html[data-view="app"][data-motion="reduced"]::view-transition-new(*),
  html[data-view="app"].no-motion::view-transition-group(*),
  html[data-view="app"].no-motion::view-transition-old(*),
  html[data-view="app"].no-motion::view-transition-new(*) {
    animation: none !important;
  }

  /* ── Umschalter im Handy-Menü (beide Ansichten, siehe Kopf) ── */
  html[data-view] .rk-mm__ansicht {
    margin: var(--rk-space-4, 16px) 0 0;
    border-top: 1px solid var(--rk-line);
    padding-top: var(--rk-space-2, 8px);
  }
  html[data-view] .rk-mm .rk-mm__ansicht-knopf {
    justify-content: space-between;
    min-height: var(--rk-touch-comfort);
    color: var(--text-primary);
  }
  html[data-view] .rk-mm__ansicht-knopf .a11y-switch__track {
    flex: 0 0 auto;
  }
  html[data-view] .rk-mm__ansicht-hinweis {
    margin: 0;
    padding: 0 16px var(--rk-space-2, 8px);
    font-size: var(--rk-fs-xs);
    line-height: 1.45;
    color: var(--text-secondary);
  }
}

/* =============================================================================
   Spec 004 — Bausteine der App-Ansicht (nur bis 767 px und nur bei data-view="app")
   ============================================================================= */
@media (max-width: 767px) {

  html[data-view="app"] {
    --rk-app-rand: 16px;                                         /* Seitenrand der Inhalte in der App-Ansicht */
    --rk-karte-breite: 86%;                                      /* nächste Karte bleibt angeschnitten sichtbar */
    /* Schaugrößen des Wow-Baukastens (rk-wow.css) kompakter: kurze Seiten statt Plakatschrift; rem skaliert mit „Schrift groß“ */
    --rk-wow-fs-statement: 2rem;
    --rk-wow-fs-giant: 4rem;
    --rk-wow-fs-number: 2.5rem;
    --rk-wow-fs-big: 1.5rem;
    --rk-wow-fs-title: 1.25rem;
    --rk-wow-fs-lead: 1.0625rem;
  }

  /* ── Bewusst ausgeblendet (Spec 004, nur wo die Spec es nennt; Text bleibt im HTML) ── */
  html[data-view="app"] [data-rk-app-aus] {
    display: none !important;
  }
  /* ── Nur in der App-Ansicht (z. B. weitere Rechtstexte in der Fußzeile) ── */
  html[data-view="app"] [data-rk-app-nur][hidden] {
    display: revert;
  }

  /* ── „Mehr lesen“ ── */
  html[data-view="app"] details.rk-mehr {
    display: block;
    margin: 0;
  }
  html[data-view="app"] details.rk-mehr::details-content {
    display: block;
  }
  html[data-view="app"] details.rk-mehr:not([open])::details-content {
    content-visibility: hidden;
  }
  html[data-view="app"] details.rk-mehr > .rk-mehr__knopf,
  html[data-view="app"] .rk-mehr__knopf--teil {
    display: flex;
    align-items: center;
    gap: var(--rk-space-2, 8px);
    min-height: var(--rk-touch-comfort);
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--font-ui);
    font-size: var(--rk-fs-button, 16px);
    font-weight: var(--rk-fw-medium);
    color: var(--text-primary);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  html[data-view="app"] details.rk-mehr > .rk-mehr__knopf::marker {
    content: none;
  }
  html[data-view="app"] details.rk-mehr > .rk-mehr__knopf:focus-visible,
  html[data-view="app"] .rk-mehr__knopf--teil:focus-visible {
    outline: 2px solid var(--rk-focus-color);
    outline-offset: 2px;
    border-radius: 4px;
  }
  /* Pfeil rechts im Knopf (dreht sich beim Öffnen) */
  html[data-view="app"] details.rk-mehr .rk-mehr__pfeil,
  html[data-view="app"] .rk-mehr__knopf--teil .rk-mehr__pfeil {
    display: block;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-left: auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .2s;
  }
  html[data-view="app"] details.rk-mehr[open] > .rk-mehr__knopf .rk-mehr__pfeil,
  html[data-view="app"] .rk-mehr__knopf--teil[aria-expanded="true"] .rk-mehr__pfeil {
    transform: rotate(180deg);
  }
  html[data-view="app"] .rk-mehr__knopf .rk-mehr__pfeil {
    margin-left: 0;
  }
  /* Beschriftung wechselt: „Mehr lesen“ zu, „Weniger“ offen */
  html[data-view="app"] details.rk-mehr > .rk-mehr__knopf .rk-mehr__weniger,
  html[data-view="app"] details.rk-mehr[open] > .rk-mehr__knopf .rk-mehr__mehr,
  html[data-view="app"] .rk-mehr__knopf--teil .rk-mehr__weniger,
  html[data-view="app"] .rk-mehr__knopf--teil[aria-expanded="true"] .rk-mehr__mehr {
    display: none;
  }
  html[data-view="app"] details.rk-mehr[open] > .rk-mehr__knopf .rk-mehr__weniger,
  html[data-view="app"] .rk-mehr__knopf--teil[aria-expanded="true"] .rk-mehr__weniger {
    display: inline;
  }
  /* „Mehr lesen“ ohne Hülle ([data-rk-mehr]): Knopf als <button> ohne eigene Fläche, Gruppe eingeklappt
     (!important wie [data-rk-app-aus]: Seitenregeln mit ID-Selektor setzen display sonst stärker) */
  html[data-view="app"] .rk-mehr__knopf--teil {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    justify-self: stretch;
  }
  html[data-view="app"] .rk-mehr-teil--zu {
    display: none !important;
  }
  html[data-view="app"] details.rk-mehr[open] > :not(summary):first-of-type {
    margin-top: var(--rk-space-2, 8px);
  }

  /* ── Akkordeon mit Titel ([data-rk-akkordeon], Knopf in der Überschrift baut rk-app.js) ──
     Jeder Eintrag: Kopf (alles bis einschließlich Überschrift) + Inhalt (alles danach, class rk-akk__inhalt).
     Ohne Skript bleibt alles offen. */
  html[data-view="app"] [data-rk-akkordeon] .rk-akk__eintrag.is-zu > .rk-akk__inhalt {
    display: none;
  }
  html[data-view="app"] .rk-akk__knopf {
    display: flex;
    align-items: center;
    gap: var(--rk-space-2, 8px);
    justify-content: space-between;
    width: 100%;
    min-height: var(--rk-touch-comfort);
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  html[data-view="app"] .rk-akk__knopf:focus-visible {
    outline: 2px solid var(--rk-focus-color);
    outline-offset: 2px;
    border-radius: 4px;
  }
  html[data-view="app"] .rk-akk__pfeil {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .2s;
  }
  html[data-view="app"] .rk-akk__eintrag:not(.is-zu) .rk-akk__pfeil {
    transform: rotate(180deg);
  }

  /* ── Formulare (.rk-pform): dichter gesetzt, Tippflächen bleiben ≥ 44 px (Spec 004 Runde 2) ── */
  html[data-view="app"] .rk-pform__cell {
    padding: var(--rk-space-2) var(--rk-space-4);
    min-height: 0;
  }
  html[data-view="app"] .rk-pform__cell textarea {
    min-height: calc(var(--rk-touch-min) * 2);
  }
  /* Auswahlfelder sind Bedienelemente: App-Ansicht 48 px (Spec 014, Prüfurteil Spec 004) */
  html[data-view="app"] .rk-pform__cell select {
    min-height: var(--rk-touch-comfort);
  }
  html[data-view="app"] .rk-pform__choices {
    gap: calc(var(--rk-space-2) / 2);
  }
  html[data-view="app"] .rk-pform__choices .rk-check,
  html[data-view="app"] .rk-pform__choices .rk-radio {
    min-height: var(--rk-touch-min);
    padding-block: calc(var(--rk-space-2) / 2);
  }
  html[data-view="app"] .rk-pform__consent {
    margin-top: var(--rk-space-2);
  }
  html[data-view="app"] .rk-pform__actions {
    margin-top: var(--rk-space-3);
  }

  /* ── Karussell ──
     :not(#rk-nie) hebt die Spezifität auf ID-Niveau, damit seitenlokale Rasterregeln mit ID-Selektor
     (z. B. #rkAca-block3 .rkAca-pillars) das Karussell in der App-Ansicht nicht überstimmen. */
  html[data-view="app"] [data-rk-karussell]:not(#rk-nie) {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--rk-space-3);
    margin-inline: calc(var(--rk-app-rand) * -1);
    padding: calc(var(--rk-space-2) / 2) var(--rk-app-rand) var(--rk-space-3);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--rk-app-rand);
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  html[data-view="app"] [data-rk-karussell]::-webkit-scrollbar {
    display: none;
  }
  html[data-view="app"] [data-rk-karussell]:not(#rk-nie) > * {
    flex: 0 0 var(--rk-karte-breite);
    min-width: 0;
    max-width: var(--rk-karte-breite);
    margin: 0;
    scroll-snap-align: start;
  }
  html[data-view="app"] [data-rk-karussell]:focus-visible {
    outline: 2px solid var(--rk-focus-color);
    outline-offset: -2px;
  }
  html[data-view="app"] .rk-karussell__nav {
    display: flex;
    justify-content: flex-end;
    gap: var(--rk-space-2, 8px);
    margin: 0;
  }
  html[data-view="app"] .rk-karussell__knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--rk-touch-comfort);
    height: var(--rk-touch-comfort);
    padding: 0;
    border: 1px solid var(--rk-line-strong);
    border-radius: 50%;
    background: var(--surface-card);
    color: var(--text-primary);
    cursor: pointer;
  }
  html[data-view="app"] .rk-karussell__knopf svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  html[data-view="app"] .rk-karussell__knopf[aria-disabled="true"] {
    opacity: .4;
    cursor: default;
  }
  html[data-view="app"] .rk-karussell__knopf:focus-visible {
    outline: 2px solid var(--rk-focus-color);
    outline-offset: 2px;
  }
  /* Auf dunklen Bühnen dieselben Token in der dunklen Fassung */
  html[data-view="app"] .rk-wow-dark .rk-karussell__knopf {
    background: transparent;
    border-color: currentColor;
    color: inherit;
  }

  /* ── Wischleiste für Chips (eine Zeile, bewusst seitlich scrollbar) ── */
  html[data-view="app"] [data-rk-wischzeile] {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    margin-inline: calc(var(--rk-app-rand) * -1);
    padding-inline: var(--rk-app-rand);
    justify-content: flex-start;
  }
  html[data-view="app"] [data-rk-wischzeile]::-webkit-scrollbar {
    display: none;
  }
  html[data-view="app"] [data-rk-wischzeile] > * {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* ── Fußzeile als Akkordeon (Spec 004 K3) ── */
  html[data-view="app"] .site-footer {
    padding: var(--rk-space-2) var(--rk-app-rand) var(--rk-space-4);
  }
  html[data-view="app"] .site-footer__grid {
    gap: 0;
    margin-bottom: var(--rk-space-3);
  }
  html[data-view="app"] .site-footer details.rk-mehr {
    border-bottom: 1px solid var(--rk-line);
  }
  html[data-view="app"] .site-footer details.rk-mehr > .rk-mehr__knopf {
    min-height: calc(var(--rk-touch-comfort) + var(--rk-space-2));
    font-size: var(--rk-fs-xs);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--rk-gold-text);
  }
  html[data-view="app"] .site-footer details.rk-mehr > .rk-mehr__knopf .rk-mehr__pfeil {
    margin-left: auto;
    color: var(--text-secondary);
  }
  html[data-view="app"] .site-footer details.rk-mehr[open] {
    padding-bottom: var(--rk-space-3);
  }
  html[data-view="app"] .site-footer__nav {
    gap: 0;
  }
  html[data-view="app"] .site-footer__col--contact a,
  html[data-view="app"] .site-footer__nav a,
  html[data-view="app"] .site-footer__nav-btn {
    display: flex;
    align-items: center;
    min-height: var(--rk-touch-comfort);
  }
  html[data-view="app"] .site-footer__socials a {
    width: var(--rk-touch-comfort);
    height: var(--rk-touch-comfort);
  }
  html[data-view="app"] .site-footer__bottom {
    padding-top: var(--rk-space-3);
    border-top: 0;
  }
  /* Ganz unten liegen Widerruf- und Nach-oben-Knopf über der Leiste: die letzte Zeile endet darüber */
  html[data-view="app"] .site-footer {
    padding-bottom: calc(var(--rk-fab-size) + var(--rk-fab-gap) * 2);
  }
  html[data-view="app"] .site-footer__nav [data-rk-app-nur][hidden] {
    display: flex;
  }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  html[data-view="app"] [data-rk-karussell] {
    scroll-behavior: auto;
  }
  html[data-view="app"] .rk-mehr__pfeil,
  html[data-view="app"] .rk-akk__pfeil {
    transition: none;
  }
}
html[data-motion="reduced"][data-view="app"] [data-rk-karussell] {
  scroll-behavior: auto;
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  html[data-view="app"] .rk-tabbar__ziel {
    transition: none;
  }
}

/* ── Academy-Hub (/academy/): App-Ansicht, ehemals seitenlokal in src/academy/index.html (Spec 014) ──
   Nur Abstände und Seitenverhältnis aus Token; die Blöcke bleiben so kurz, wie das Längenbudget es verlangt (Spec 004). */
@media (max-width: 767px) {
  html[data-view="app"] #rkAca-block3 .rkAca-wrap { padding-top: var(--rk-space-5); padding-bottom: var(--rk-space-3); }
  html[data-view="app"] #rkAca-block3 .rkAca-pillarsHeader { margin-bottom: 0; }
  html[data-view="app"] #rkAca-block3 .rkAca-pillarsSub { padding-bottom: var(--rk-space-3); }
  html[data-view="app"] #rkAca-block3 .rkAca-pillars { margin-top: var(--rk-space-3); }
  html[data-view="app"] #rkAca-block3 .rkAca-pImgWrap { aspect-ratio: 4 / 3; }
  html[data-view="app"] #rkAca-block3 .rkAca-pBody { padding: var(--rk-space-3) var(--rk-space-4) var(--rk-space-4); }
  html[data-view="app"] #rkAca-block3 .rkAca-pTitle { margin-bottom: var(--rk-space-2); }
  html[data-view="app"] #rkAca-block3 .rkAca-pText { margin-bottom: var(--rk-space-3); line-height: 1.5; }
  html[data-view="app"] .rkAca2-wrap { padding-block: var(--rk-space-5); }
  html[data-view="app"] .rkAca2-grid { gap: var(--rk-space-4); }
  html[data-view="app"] #rkAca-blockContact { --rkPadY: var(--rk-space-5); --rkGap: var(--rk-space-3); }
}