/* Idee „prinzip-einstieg": fünf Sätze und Werttreiberbaum in Kurzform (v2, nur Überschriften) vor den Kacheln */
.pr-einstieg { margin: clamp(8px, 2vh, 20px) 0 clamp(28px, 5vh, 44px); }
/* Leitsatz (Nr 4): Navy, etwas kräftiger */
.page--prinzip .pr-hero .page-lead[data-nr="4"] { color: var(--sten); font-weight: 500; font-size: clamp(17px, 1.6vw, 20px); }
.pr-ein-spalten { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 3vw, 32px); align-items: start; }
@media (min-width: 900px) { .pr-ein-spalten { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 3.4vw, 44px); } }
@media (max-width: 899px) { .pr-ein-grafik { order: -1; } }
.pr-ein-titel { margin: 0 0 10px; font-size: clamp(22px, 2.6vw, 27px); font-weight: 500; color: var(--sten); line-height: 1.2; }
.pr-ein-hinweis { margin: 0 0 10px; font-size: 14px; color: var(--ink-soft); }
.pr-ein-saetze { list-style: none; counter-reset: satz; margin: 0; padding: 0; display: grid; gap: 0; }
.pr-ein-saetze li { counter-increment: satz; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: center; font-size: 16px; line-height: 1.45; color: var(--pr-text, #48484a); cursor: pointer; border-radius: 10px; padding: 8px 12px; margin-left: -12px; transition: background .2s ease; }
.pr-ein-saetze li::before { content: counter(satz); font-size: 20px; font-weight: 300; color: var(--val); line-height: 1; text-align: center; }
.pr-ein-saetze li:hover, .pr-ein-saetze li:focus, .pr-ein-saetze li.on { background: rgba(0, 47, 166, 0.08); outline: none; }
.pr-ein-saetze li:focus-visible { outline: 2px solid var(--val); outline-offset: 2px; }
.pr-ein-grafik { margin: 0; display: grid; gap: 8px; min-width: 0; }
.pr-ein-baum { overflow-x: auto; border-radius: 14px; border: 1px solid var(--hair); background: #fff; padding: 8px; -webkit-overflow-scrolling: touch; }
@media (max-width: 899px) { .pr-ein-baum svg { min-width: 600px; } }
.pr-ein-baum svg { display: block; width: 100%; height: auto; }
.pr-ein-link { margin: 0; text-align: right; }
.pr-ein-link button { font: inherit; font-size: 14px; font-weight: 500; color: var(--sten); background: none; border: 0; padding: 8px 0; cursor: pointer; border-bottom: 1px solid var(--hair-strong); }
@media (hover: hover) { .pr-ein-link button:hover { color: var(--val); border-bottom-color: var(--val); } }
.pr-ein-link button:focus-visible { outline: 3px solid var(--val); outline-offset: 3px; }
/* Hervorhebung und Mouseover im Baum */
.pr-kb .n { transition: opacity .15s; cursor: help; outline: none; }
.pr-kb.dim .n { opacity: .22; }
.pr-kb.dim .n.act { opacity: 1; }
.pr-kb.dim .n.act rect { stroke: var(--val); stroke-width: 3; }
.pr-kb .n:hover rect, .pr-kb .n:focus rect { stroke: var(--val); stroke-width: 2.5; }
.pr-kb .own { opacity: 0; transition: opacity .15s; }
.pr-kb.own5 .own { opacity: 1; }
.pr-tip { position: fixed; z-index: 70; max-width: 300px; background: var(--sten); color: #fff; padding: 8px 12px; border-radius: 8px; font-size: 14px; line-height: 1.4; pointer-events: none; display: none; box-shadow: 0 4px 14px rgba(0, 0, 0, .2); }
@media (prefers-reduced-motion: reduce) { .pr-kb .n, .pr-kb .own, .pr-ein-saetze li { transition: none; } }

.pr-ein-titel { margin-bottom: clamp(14px, 2vw, 22px); }
.pr-ein-hinweis--bild { margin: 0 0 10px; }

/* Kopfbereich: Nr 4 entfällt, Überschrift und Einleitung kleiner */
.page--prinzip .pr-hero h1 { font-size: clamp(28px, 3.1vw, 38px); line-height: 1.18; }
.page--prinzip .pr-hero .page-lead, .page--prinzip .pr-hero .page-lead[data-nr="3"] { font-size: clamp(16px, 1.45vw, 18px); line-height: 1.5; font-weight: 400; }
.page--prinzip .page-head.pr-hero { margin-bottom: clamp(18px, 3vh, 28px); }