/* Idee „prinzip-bedienung" – nur Seite „Das Prinzip" */
.pr-abschnitt[data-kapitel] { scroll-margin-top: 90px; }
.pr-abschnitt h2:focus, .pr-faq h3:focus { outline: none; }

/* Keine automatische Silbentrennung; nur die weichen Trennstriche in sehr langen Wörtern (siehe Skript) */
.page--prinzip .pr-kachel, .page--prinzip .pr-abschnitt { hyphens: manual; -webkit-hyphens: manual; overflow-wrap: break-word; }

/* „Weiterlesen · n Min. →" statt ▾ */
.pr-kachel::after { content: "Weiterlesen · " attr(data-min) " Min. →"; left: 24px; right: auto; bottom: 14px; font-size: 14px; font-weight: 500; color: var(--val); transition: none; transform: none; }
.pr-kachel--faq::after { left: auto; }
@media (hover: hover) { .pr-kachel:hover::after { text-decoration: underline; text-underline-offset: 3px; } }
.pr-kachel[aria-expanded="true"]::after { content: "Zuklappen ↑"; transform: none; }
.pr-kachel--navy::after { color: #bed4ff; }
.pr-kachel:not(.pr-kachel--faq) { padding-bottom: 52px; }

/* Aktiv: helles Blau mit Rahmen (unterscheidet sich von der Navy-Kachel 04); 04 bekommt einen Ring */
.pr-kachel[aria-expanded="true"]:not(.pr-kachel--navy) { background: rgba(0, 47, 166, 0.08); border-color: var(--val); border-left-color: var(--val); outline: none; }
.pr-kachel--navy[aria-expanded="true"] { outline: 3px solid var(--val); outline-offset: 3px; }
@media (hover: hover) { .pr-kachel:not([aria-expanded="true"]):hover { box-shadow: 0 10px 28px rgba(22, 62, 120, 0.12); } }

/* Lesbarkeit (fest): Dachzeilen 14 px, 600, 0,12 em, Navy; Text im Kapitel 17 px */
.page--prinzip .page-eyebrow,
.page--prinzip .pr-abschnitt:not(.pr-navy) .pr-dach { font-size: 14px; font-weight: 600; letter-spacing: 0.12em; color: var(--sten); }
.page--prinzip .pr-navy .pr-dach { font-size: 14px; font-weight: 600; letter-spacing: 0.12em; }
.page--prinzip .pr-abschnitt p, .page--prinzip .pr-abschnitt li { font-size: 17px; line-height: 1.6; }

/* Flyover-Knopf mit Kachelname (Stil wie der Nach-oben-Knopf auf Beiträge) */
.pr-flug { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 60; max-width: calc(100vw - 32px); display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px 0 14px; border: 1px solid #d5dbe6; border-radius: 999px; background: #fff; color: #002FA6; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: 0 8px 24px rgba(22, 62, 120, .18); opacity: 0; transform: translateY(12px); visibility: hidden; transition: opacity .2s, transform .2s, visibility .2s; }
.pr-flug span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sten); }
.pr-flug svg { flex: none; display: block; }
.pr-flug.sichtbar { opacity: 1; transform: none; visibility: visible; }
.pr-flug:hover { border-color: #002FA6; }
.pr-flug:focus-visible { outline: 3px solid #002FA6; outline-offset: 3px; }
html[style*="--ed-h"] .pr-flug { bottom: calc(var(--ed-h, 0px) + 16px); }
@media (prefers-reduced-motion: reduce) { .pr-flug { transition: none; } }

/* Kontakt-Pille mittig in der Kopfzeile (nur auf dieser Seite) */
.nav-kontakt, .nav-zurueck + .nav-kontakt { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; padding: 0 18px; }

/* Block „Haben Sie noch Fragen?" am Seitenende */
.pr-fragen { margin: clamp(24px, 4vh, 40px) 0 0; padding: clamp(20px, 3vw, 28px) clamp(20px, 3vw, 32px); border: 1px solid var(--hair); border-left: 4px solid var(--val); border-radius: 14px; background: var(--paper); display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between; }
.pr-fragen p { margin: 0; flex: 1 1 320px; font-size: 16px; line-height: 1.55; color: var(--pr-text, #48484a); }
.pr-fragen strong { color: var(--sten); font-weight: 600; }
.pr-fragen a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border: 1px solid var(--hair-strong); border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--sten); text-decoration: none; background: var(--paper); }
@media (hover: hover) { .pr-fragen a:hover { border-color: var(--val); color: var(--val); } }

/* Weiter-Navigation am Kapitelende: schlank und fein (Textlinks statt großer Pillen) */
.pr-weiter { margin-top: 16px; padding-top: 6px; gap: 8px; }
.pr-weiter button { background: none; border: 0; border-radius: 0; padding: 0 2px; min-height: 44px; font-size: 14px; font-weight: 500; color: var(--sten); }
@media (hover: hover) { .pr-weiter button:hover { color: var(--val); text-decoration: underline; text-underline-offset: 4px; } }
.pr-weiter button:focus-visible { outline: 2px solid var(--val); outline-offset: 2px; }
.pr-navy .pr-weiter button { color: #fff; }

/* Statisches Menü „Nach oben · 01 … 06 · FAQ" entfällt (Flyover/Leiste übernimmt); der Fragen-Block schließt die Seite */
.pr-menue { display: none; }
.pr-fragen { margin-bottom: clamp(16px, 3vh, 32px); }

/* Weniger Leerraum unter der Weiter-Navigation am Kapitelende */
.pr-abschnitt[data-kapitel] { padding-bottom: 8px; }
.pr-weiter { margin-bottom: 0; }
.pr-weiter button { min-height: 40px; }

/* FAQ-Leiste (07) bleibt unten: Kapitel 01–06 öffnen davor, das FAQ-Kapitel danach */
.pr-kapitel > .pr-kachel--faq { order: 2; }
.pr-kapitel > .pr-abschnitt[data-kapitel] { margin-top: 0; margin-bottom: 0; }

/* Kapitel 06 „Die Werttreiber": sieben Beispiele */
.pr-ausschnitt { margin: 22px 0 0; max-width: 52rem; }
.pr-ausschnitt-titel { margin: 0 0 6px; font-size: 20px; font-weight: 500; color: var(--sten); }
.pr-ausschnitt-text { margin: 0; font-size: 16px; color: var(--ink-soft); }
.pr-karten--bsp { margin-top: 16px; }
.pr-karten--bsp .pr-karte .pr-dach { letter-spacing: 0.08em; font-size: 11.5px; overflow-wrap: normal; }