/* Detail reader. V19.9 Lesemodus (Owner 23.10.: „die Seite drückt“, gewählt „Lesemodus“): das Blatt hält rundum großzügig Abstand,
   der Grund dahinter ist beruhigt, eine Lesespalte (~720 px) mit dem Bild unter dem Einstieg. Drei Schriftgrößen: 46 (Überschriften,
   Light), 17 (Text), 13 (Kleines). Ein roter Hauptknopf, alles andere Textlinks; keine Linien zwischen den Abschnitten. */
:root {
  --leser-grund: 10 11 13; --leser-text: #fff; --leser-text-2: rgb(255 255 255 / 86%); --leser-text-3: rgb(255 255 255 / 78%);
  --leser-grau: rgb(255 255 255 / 62%); --leser-leise: rgb(255 255 255 / 38%); --leser-linie: rgb(255 255 255 / 10%);
}
html[data-theme="light"] {
  --leser-grund: 243 244 246; --leser-text: #17191d; --leser-text-2: rgb(24 29 36 / 88%); --leser-text-3: rgb(24 29 36 / 80%);
  --leser-grau: rgb(24 29 36 / 66%); --leser-leise: rgb(24 29 36 / 46%); --leser-linie: rgb(24 29 36 / 14%);
}
html[data-detail-open], html[data-detail-open] body { overflow: hidden; overscroll-behavior: none; }
html[data-detail-open][data-modus="buehne"] body { touch-action: pan-y pinch-zoom; }
.detail-panel.glas {
  position: fixed;
  z-index: 8;
  /* unten bleibt die Rechtszeile außerhalb der Lesefläche */
  inset: calc(var(--kopf-unten, var(--kopf-h, 88px)) + 20px) clamp(24px, 6vw, 96px) calc(52px + env(safe-area-inset-bottom, 0px));
  width: auto;
  max-width: none;
  height: auto;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: var(--leser-text);
  text-shadow: none;
  border: 0;
  border-radius: 22px;
  background: rgb(var(--leser-grund) / 80%);
  -webkit-backdrop-filter: blur(26px) saturate(.6);
  backdrop-filter: blur(26px) saturate(.6);
  /* Der Grund ringsum tritt zurück: ein weiter Schatten statt filter auf der Szene – die Szene zeichnet ungefiltert weiter (gemessen,
     Vault 2026-10-22-website-eva-cockpit), der Schatten wird nur zusammengesetzt. Kopf, Rechtszeile und EVA liegen darüber. */
  box-shadow: 0 0 0 100vmax rgb(var(--leser-grund) / 58%), 0 40px 90px rgb(0 0 0 / 55%);
  overscroll-behavior: none;
  touch-action: pan-y pinch-zoom;
}
.detail-panel.glas::before { display: none; }
.detail-panel[open] { display: flex; flex-direction: column; animation: detail-panel-rise 500ms cubic-bezier(.2, .65, .3, 1) both; }
.detail-panel[open][data-switching] { pointer-events: none; animation: detail-panel-leave 220ms ease-in both; }
.detail-panel[data-pending] { visibility: hidden; opacity: 0; pointer-events: none; animation: none !important; }
.detail-panel[open][data-closing] { pointer-events: none; animation: detail-panel-leave 240ms ease-in both; }
.detail-panel-toolbar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 60px; padding: 10px 14px 0 clamp(20px, 3vw, 40px); }
.detail-panel-title { min-width: 0; margin: 0; color: var(--leser-grau); font-size: 13px; font-weight: 500; letter-spacing: .01em; line-height: 1.5; overflow-wrap: anywhere; }
.detail-panel-scroll { flex: 1 1 auto; min-height: 0; width: 100%; overflow: auto; overscroll-behavior: contain; scrollbar-color: #fff #000; scrollbar-gutter: stable; touch-action: pan-y pinch-zoom; -webkit-overflow-scrolling: touch; }
.detail-panel-content.detail-shell { width: min(720px, calc(100% - 48px)); margin-inline: auto; padding-bottom: 96px; }
.detail-panel-document { min-width: 0; color: var(--leser-text-2); font-size: 17px; line-height: 1.65; overflow-wrap: break-word; }
.detail-panel-document .breadcrumbs { display: none; }   /* Blatttitel und Schließen reichen */
/* Einstieg: Kicker, Überschrift, Text, Knöpfe; das Bild darunter in voller Spaltenbreite */
.detail-panel-document .detail-hero { display: block; padding: 40px 0 0; }
.detail-panel-document :is(.detail-kicker, .detail-example .detail-kicker) { margin-bottom: 18px; color: var(--leser-grau); font-size: 13px; font-weight: 500; letter-spacing: .01em; text-transform: none; }
.detail-panel-document :is(.detail-hero, .service-hero) h1,
.detail-panel-document .detail-contact h2 { max-width: 17ch; color: var(--leser-text); font-size: clamp(34px, 3.4vw, 46px); font-weight: 300; line-height: 1.12; letter-spacing: -.025em; }
.detail-panel-document .detail-hero .detail-lead { max-width: none; margin-top: 28px; color: var(--leser-text-3); font-size: 17px; line-height: 1.65; }
.detail-panel-document :is(.detail-context, .work-status, figcaption, .detail-footer) { color: var(--leser-grau); }
.detail-panel-document .service-visual { margin: 56px 0 0; }
.detail-panel-document .service-visual img { width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; border: 0; border-radius: 14px; }
.detail-panel-document :is(img, video) { border-color: var(--leser-linie); }
/* Knöpfe: ein gefüllter roter Hauptknopf zuerst, der Rest als Textlink; kein Glühen, keine Kontur (base.css: Fläche, Kontur, Glühen) */
.detail-panel-document .detail-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; margin-top: 36px; }
.detail-panel-document .detail-actions > .aktion { width: auto; height: auto; }
.detail-panel-document .detail-actions > .detail-primary { order: -1; }
.detail-panel :is(.aktion, .service-link)::before, .detail-panel :is(.aktion, .service-link)::after { display: none; }
.detail-panel :is(.aktion, .service-link):not(.detail-primary) {
  min-height: 44px; padding: 0; border: 0; background: none; color: var(--leser-text); font-size: 17px; font-weight: 500;
  text-decoration: underline; text-decoration-color: var(--leser-leise); text-decoration-thickness: 1px; text-underline-offset: 6px;
}
.detail-panel :is(.aktion, .service-link):not(.detail-primary):hover { background: none; text-decoration-color: currentColor; }
.detail-panel .aktion.detail-primary {
  min-height: 50px; padding: 0 30px; border: 0; border-radius: var(--button-radius, 7px); background: var(--ci-interaction-red, #ea0313);
  color: #fff; font-size: 17px; font-weight: 600; transition: background-color 200ms ease;
}
.detail-panel .aktion.detail-primary:hover { background: #c80210; }
/* Inhaltsverzeichnis: eine leise Zeile */
.detail-panel-document .detail-toc { margin-top: 64px; padding: 0; gap: 4px 22px; color: var(--leser-grau); font-size: 13px; }
.detail-panel-document .detail-toc > span { color: var(--leser-leise); }
.detail-panel-document .detail-toc a { color: var(--leser-grau); text-decoration: none; }
.detail-panel-document .detail-toc a:hover { color: var(--leser-text); }
/* Abschnitte: eine Spalte, keine Linien, viel Luft */
.detail-panel-document .detail-section { display: block; padding: 96px 0 0; border: 0; }
.detail-panel-document .detail-section > h2 { max-width: none; margin: 0 0 20px; color: var(--leser-grau); font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.detail-panel-document .section-body { max-width: none; }
.detail-panel-document :is(.section-body, .detail-example) h3 { max-width: none; margin: 0 0 22px; color: var(--leser-text); font-size: 17px; font-weight: 600; line-height: 1.5; letter-spacing: 0; }
.detail-panel-document .detail-example { padding: 0; border: 0; }
.detail-panel-document .example-flow > div { margin-bottom: 26px; }
.detail-panel-document .example-flow dt { color: var(--leser-grau); font-size: 13px; font-weight: 500; }
.detail-panel-document .example-flow dd { margin: 4px 0 0; color: var(--leser-text-2); }
.detail-panel-document :is(.detail-list li::marker, .detail-steps li::before) { color: var(--leser-leise); }
.detail-panel-document .detail-steps strong { color: var(--leser-text); }
.detail-panel-document .detail-note { color: var(--leser-grau); font-size: 13px; }
.detail-panel-document .detail-faq details { border-color: var(--leser-linie); }
.detail-panel-document .detail-faq details p { color: var(--leser-grau); font-size: 17px; }
.detail-panel-document :is(.work-item, .service-visual figcaption, .detail-footer) { border-color: var(--leser-linie); }
.detail-panel-document .related-projects article { padding: 0; border: 0; }
.detail-panel-document .detail-contact { margin-top: 112px; padding: 0 0 24px; border: 0; }
.detail-panel-document .detail-contact h2 { margin-bottom: 22px; }
.detail-panel-document .detail-contact .contact-address { font-size: 17px; }
.detail-panel :is(a, button, summary, [tabindex], [id]) { scroll-margin-block: 24px; }
.detail-panel :is(a, button, summary):focus-visible,
.detail-panel-scroll:focus-visible { outline: 2px solid var(--leser-text); outline-offset: 4px; box-shadow: none; }
.detail-panel .detail-panel-close { width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 10px; border: 0; border-radius: 0; justify-content: center; flex: 0 0 44px; background: none; box-shadow: none; color: var(--leser-grau); }
.detail-panel-close .control-icon { display: block; width: 18px; height: 18px; }
.detail-panel-status, .detail-panel-error { padding-block: clamp(48px, 8vw, 96px); max-width: 48ch; }
.detail-panel-error-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.detail-panel-error-actions .aktion { min-width: 0; width: 100%; overflow-wrap: anywhere; }
@keyframes detail-panel-rise { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: translateY(0); } }
@keyframes detail-panel-leave { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(32px); } }
@media (max-width: 760px), (max-height: 500px) {
  .detail-panel.glas { inset: calc(var(--kopf-unten, var(--kopf-h, 88px)) + 12px) 12px calc(52px + env(safe-area-inset-bottom, 0px)); border-radius: 20px; }
  .detail-panel-toolbar { min-height: 56px; gap: 12px; padding: 8px 10px 0 18px; }
  .detail-panel-content.detail-shell { width: calc(100% - 44px); padding-bottom: max(48px, env(safe-area-inset-bottom, 0px)); }
  .detail-panel-document .detail-hero { padding-top: 24px; }
  .detail-panel-document .detail-section { padding-top: 72px; }
  .detail-panel-document .detail-actions { gap: 8px 24px; }
  .detail-panel-document .detail-actions > .aktion.detail-primary { width: 100%; }
}
/* V19.13 (Rundgang 24.10., P05): Telefon quer (≤ 500 px Höhe): Kopfzeile und Rechtszeile bleiben, also zählt jeder Pixel Lesefläche.
   Schmalere Titelzeile, kleinere Lücke zur Kopfzeile, weniger Luft vor dem Einstieg; unten Platz, damit der letzte Absatz über das
   EVA-Dock (rechts unten) hinaufrollen kann. Die Rechtszeile (links unten, über dem Blatt) bleibt frei. */
@media (max-height: 500px) and (orientation: landscape) {
  .detail-panel.glas { inset: calc(var(--kopf-unten, var(--kopf-h, 88px)) + 6px) 12px calc(52px + env(safe-area-inset-bottom, 0px)); border-radius: 16px; }
  .detail-panel-toolbar { min-height: 44px; padding: 0 6px 0 18px; }
  .detail-panel-document .detail-hero { padding-top: 6px; }
  .detail-panel-document :is(.detail-kicker, .detail-example .detail-kicker) { margin-bottom: 8px; }
  .detail-panel-document .detail-hero .detail-lead { margin-top: 16px; }
  .detail-panel-content.detail-shell { padding-bottom: max(104px, env(safe-area-inset-bottom, 0px)); }
}
html[data-bewegung="aus"] .detail-panel,
html[data-bewegung="aus"] .detail-panel * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) {
  .detail-panel, .detail-panel *, .detail-panel::before, .detail-panel::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .detail-panel.glas { background: Canvas; border: 1px solid CanvasText; }
  .detail-panel .aktion, .detail-panel .aktion.detail-primary { background: ButtonFace; border: 1px solid ButtonText; color: ButtonText; }
}