/* Schrift: Manrope, selbst gehostet (SIL Open Font License, siehe fonts/LICENSE-manrope.txt). Keine externen Anfragen. */ @font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url(/static/fonts/manrope-latin-wght-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url(/static/fonts/manrope-latin-ext-wght-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Seit 6. September 2026 (Stefan: einheitliches Farbschema) ist jede Seite dunkel, auf dem Grund der Startseite. */ /* Farbrollen, Raster, Radien und Schriftstufen an einer Stelle (Designsprache Abschnitt 2 bis 5, Phase 2 am 8. September 2026). Jede Seite traegt body.ed oder body.pg; die Werte gelten ueberall. scrollcraft.css bleibt unangetastet, seine --sc-* Tokens werden unten auf diese Rollen gesetzt. */ :root { color-scheme: dark; /* Farben und ihre Rollen (Abschnitt 4). --white ist der alte Name der Kartenflaeche und bleibt fuer bestehende Regeln. */ --ink: #eceef3; --paper: #0a0c10; --karte: #12151c; --white: var(--karte); --accent: #4f8cff; --accent-strong: #6a9dff; --muted: #9aa3b4; --muted-dark: var(--muted-dark); --line: rgba(255,255,255,0.1); --line-dark: rgba(255,255,255,0.1); --leiste: var(--leiste); --feld-rahmen: rgba(236,238,243,0.34); --btn: #2f6be6; --btn-hover: #2a63d9; --btn-active: #2459c4; --rot: #ff6b6b; --gelb: #ffd166; --gruen: #2ec4b6; --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 20px 50px rgba(0,0,0,0.35); /* Raster mit 4 px Grundmass (Abschnitt 3): 4, 8, 12, 16, 24, 32, 48, 64, 96. */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-6: 24px; --s-8: 32px; --s-12: 48px; --s-16: 64px; --s-24: 96px; /* Radien (Abschnitt 5): Feld und Optionskarte 12, Karte 20, Knopf und Pille rund. */ --r-klein: 6px; --r-feld: 12px; --r-karte: 20px; --r-pille: 999px; /* Schriftstufen mit fester Zeilenhoehe (Abschnitt 2), 390 bis 1440 px. */ --t-display: clamp(2.5rem, 1.9rem + 2.6vw, 3.75rem); --t-titel: clamp(1.75rem, 1.5rem + 1vw, 2.25rem); --t-h: clamp(1.3rem, 1.2rem + 0.4vw, 1.5rem); --t-lead: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem); --t-text: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); --t-klein: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem); --t-etikett: clamp(0.6875rem, 0.66rem + 0.12vw, 0.75rem); --lh-display: 1.02; --lh-titel: 1.1; --lh-h: 1.25; --lh-lead: 1.45; --lh-text: 1.55; --lh-klein: 1.5; --lh-etikett: 1.2; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: "Manrope", "Segoe UI", Helvetica, Arial, sans-serif; font-size: 17px; line-height: 1.55; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; } /* Inhaltsseiten */ main { max-width: 46rem; margin: 0 auto; padding: 2.5rem clamp(20px, 4vw, 64px) 5rem; } main.wide { max-width: 72rem; } main.full { max-width: none; padding: 0; } h1 { font-size: var(--t-display); line-height: var(--lh-display); letter-spacing: -.035em; font-weight: 800; margin: .2rem 0 .8rem; } h2 { line-height: var(--lh-h); font-size: var(--t-h); letter-spacing: -.01em; font-weight: 800; margin-top: 2rem; } h3 { font-size: var(--t-text); font-weight: 700; } .muted { color: var(--muted); } .small { font-size: .9em; } .notice { background: rgba(242,181,68,0.10); border: 1px solid rgba(242,181,68,0.45); color: #f4d48a; padding: .7rem 1rem; font-size: var(--t-klein); border-radius: var(--r-feld); } .error { color: #ff8a80; font-size: var(--t-klein); font-weight: 600; } .status { font-size: var(--t-klein); color: var(--muted); } .kicker { font-size: var(--t-etikett); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 0; } .lead { font-size: var(--t-lead); line-height: var(--lh-lead); margin: 0; } .wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 64px); } .btn { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 28px; border-radius: var(--r-pille); font-weight: 700; font-size: 16px; border: 1px solid transparent; cursor: pointer; text-decoration: none; font-family: inherit; } .btn:hover { text-decoration: none; } .btn-accent { background: var(--accent); color: #fff; } .btn-accent:hover { background: var(--accent-strong); } .btn-ghost { background: transparent; border-color: rgba(255,255,255,0.22); color: #fff; } .btn-ghost:hover { border-color: #fff; } .btn:disabled { opacity: .5; cursor: not-allowed; } .cta-row { display: flex; gap: clamp(14px, 2vw, 28px); align-items: center; flex-wrap: wrap; justify-content: center; margin-top: 10px; } .price { display: flex; align-items: baseline; gap: 14px; } .price .amount { font-size: clamp(3.4rem, 6vw, 5.5rem); line-height: 1; font-weight: 800; letter-spacing: -.04em; } .price .tax { font-size: 16px; color: rgba(245,245,247,0.55); } .buyform { width: min(520px, 100%); display: flex; flex-direction: column; gap: var(--s-3); text-align: left; margin-top: 8px; } .buyform label { font-size: 13px; font-weight: 600; color: rgba(245,245,247,0.7); } .buyform input[type=email] { height: 52px; border-radius: var(--r-feld); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18); padding: 0 var(--s-4); font: inherit; font-size: 16px; color: #f5f5f7; width: 100%; } .buyform input[type=email]::placeholder { color: rgba(245,245,247,0.45); } .buyform label.check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; font-weight: 400; line-height: 1.45; color: rgba(245,245,247,0.7); } .buyform label.check input { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--accent); flex-shrink: 0; } .buyform label.check a { color: #fff; text-decoration: underline; } .buyform .btn { height: 56px; width: 100%; margin-top: 6px; } .buyform .fine { font-size: 12px; color: rgba(245,245,247,0.45); text-align: center; } .buyform .status-box { border-radius: var(--r-feld); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); padding: 14px 16px; font-size: 15px; color: rgba(245,245,247,0.85); } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } /* Formulare auf den Unterseiten: derselbe Ton wie das Bestellformular */ .stack { display: flex; flex-direction: column; gap: .7rem; } .stack.narrow { max-width: 28rem; } label { font-size: 13px; font-weight: 600; color: rgba(245,245,247,0.7); } label.check { font-weight: 400; display: flex; gap: .5rem; align-items: flex-start; } label.check input { margin-top: .3rem; } input[type=email], input[type=text], input[type=tel], input[type=date], input:not([type]), select, textarea { font: inherit; font-size: 16px; height: 52px; padding: 0 var(--s-4); border: 1px solid rgba(255,255,255,0.18); border-radius: var(--r-feld); width: 100%; background: rgba(255,255,255,0.06); color: #f5f5f7; } textarea { height: auto; padding: 14px 16px; line-height: 1.5; resize: vertical; min-height: 140px; } select { appearance: none; -webkit-appearance: none; padding-right: 44px; background-image: url('data:image/svg+xml;utf8,'); background-repeat: no-repeat; background-position: right 16px center; background-size: 16px; } select option { background: var(--karte); color: #f5f5f7; } input::placeholder, textarea::placeholder { color: rgba(245,245,247,0.4); } input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } button, .button { font: inherit; font-weight: 700; font-size: 15px; padding: .6rem 1.1rem; border: 1px solid rgba(255,255,255,0.22); border-radius: var(--r-pille); background: rgba(255,255,255,0.04); color: #fff; cursor: pointer; text-decoration: none; display: inline-block; } button.primary, .button.primary { background: var(--accent); border-color: transparent; color: #fff; } button:hover, .button:hover { text-decoration: none; border-color: #fff; } button:disabled { opacity: .5; cursor: not-allowed; } .table { border-collapse: collapse; width: 100%; font-size: 14px; color: var(--ink); } .table th, .table td { border: 1px solid var(--line); padding: .5rem .7rem; vertical-align: top; text-align: left; } .table th { color: var(--muted); font-weight: 600; } .scroll { overflow-x: auto; } .actions form { display: inline; } .actions button { font-size: 13px; padding: .3rem .6rem; margin: .1rem; } .faq { border-top: 1px solid var(--line); } .faq details { border-bottom: 1px solid var(--line); } .faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); padding: 20px 0; font-weight: 700; font-size: 1.05rem; } .faq summary::-webkit-details-marker { display: none; } .faq .plus { position: relative; width: 22px; height: 22px; border: 1px solid var(--line); border-radius: 50%; flex-shrink: 0; } .faq .plus::before, .faq .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); } .faq .plus::after { transform: translate(-50%, -50%) rotate(90deg); } .faq details[open] .plus::after { transform: translate(-50%, -50%) rotate(0); } .faq p { margin: 0 0 20px; color: var(--muted); } .check-list, .cross-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); } .check-list li, .cross-list li { position: relative; padding-left: 34px; } .check-list li::before, .cross-list li::before { content: ""; position: absolute; left: 0; top: .1em; width: 22px; height: 22px; border-radius: 50%; } @media (max-width: 520px) { .cta-row .btn { width: 100%; } } /* Reiter Shop: Produktlinien mit Karten, auf dem Grund der Startseite. */ .shop-line { margin: 0 0 3.5rem; padding-top: 2rem; border-top: 1px solid var(--line); } .shop-line-head { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center; margin-bottom: 1.6rem; } .shop-line-head .range-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--series, var(--accent)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--series, var(--accent)) 18%, transparent); } .shop-line-head h2 { line-height: var(--lh-titel); margin: 0; font-size: var(--t-titel); letter-spacing: -.02em; } .shop-line-head p { grid-column: 2; margin: 0; color: var(--muted); font-size: var(--t-klein); } .shop-tools { display: flex; flex-direction: column; gap: var(--s-4); } .shop-tools .tl-rail { grid-auto-columns: calc((100% - 42px) / 4); } .shop-tools-mehr { margin: 0; display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; font-size: var(--t-klein); color: var(--muted); } .shop-tools-mehr b { color: var(--ink); } @media (max-width: 980px) { .shop-tools .tl-rail { grid-auto-columns: calc((100% - 14px) / 2); } } @media (max-width: 760px) { .shop-tools .tl-rail { grid-auto-columns: 82%; } } .shop-card { display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(24px, 3vw, 44px); border-radius: 24px; background: var(--karte); border: 1px solid rgba(255,255,255,0.08); color: #f5f5f7; box-shadow: 0 30px 80px rgba(0,0,0,0.45); } .shop-cover { display: flex; justify-content: center; perspective: 1200px; } .shop-body { display: flex; flex-direction: column; gap: var(--s-3); } .shop-body h3 { margin: 0; font-size: var(--t-titel); letter-spacing: -.025em; line-height: var(--lh-titel); } .shop-sub { margin: 0; color: rgba(245,245,247,0.75); max-width: 52ch; } .shop-facts { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: var(--t-klein); color: rgba(245,245,247,0.6); } .shop-facts li { position: relative; padding-left: 16px; } .shop-facts li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } .shop-buy { display: flex; align-items: baseline; gap: var(--s-3); margin-top: 8px; } .shop-price { font-size: 2.4rem; font-weight: 800; letter-spacing: -.03em; } .shop-tax { font-size: var(--t-klein); color: rgba(245,245,247,0.55); } .shop-actions { display: flex; gap: var(--s-3); flex-wrap: wrap; } .shop-empty { margin: 0; padding: 22px 26px; border: 1px dashed rgba(255,255,255,0.18); border-radius: 16px; color: var(--muted); font-size: var(--t-klein); } .shop-empty b { display: inline-block; margin-right: 10px; font-size: var(--t-etikett); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); border: 1px solid rgba(255,255,255,0.18); border-radius: var(--r-pille); padding: 3px 9px; } @media (max-width: 760px) { .shop-card { grid-template-columns: minmax(0, 1fr); } .shop-cover { max-width: 240px; margin: 0 auto; } } /* =================================================================== Lesestrecke: dunkle Seitenleiste, das Buch als helles Blatt. Gestaltung des Blatts kommt aus /produkt/book.css (Stylesheet des E-Books, auf .book begrenzt). =================================================================== */ .reader { display: grid; grid-template-columns: 300px minmax(0, 1fr); min-height: calc(100vh - 56px); background: #0b0d12; color: #e6e7ec; } .pg .reader .side-brand { display: none; } .side { position: sticky; top: 56px; align-self: start; height: calc(100vh - 56px); overflow-y: auto; padding: 24px 16px 28px 24px; background: #0f1116; border-right: 1px solid var(--line-dark); display: flex; flex-direction: column; gap: 18px; scrollbar-width: thin; } .side-brand { display: flex; align-items: center; gap: var(--s-2); font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: rgba(245,245,247,0.7); } .side-brand:hover { text-decoration: none; color: #fff; } .side-title { display: block; font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; color: #fff; margin: 10px 0 2px; line-height: 1.1; } .side-title:hover { text-decoration: none; color: var(--accent); } .side-meta { margin: 0; font-size: 12px; color: rgba(245,245,247,0.5); } .side-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; } .side-part { margin: 14px 0 4px; padding: 0 var(--s-3); font-size: 12px; font-weight: 600; color: rgba(245,245,247,0.55); display: flex; gap: var(--s-2); align-items: baseline; } .side-part span { font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); white-space: nowrap; flex: none; } .side-nav .item { display: flex; gap: 10px; align-items: baseline; padding: 7px 12px; border-radius: 10px; color: var(--muted-dark); font-size: 13.5px; line-height: 1.3; font-weight: 500; position: relative; } .side-nav .item:hover { background: rgba(255,255,255,0.05); color: #fff; text-decoration: none; } .side-nav .item.current { background: rgba(79,140,255,0.14); color: #fff; font-weight: 700; } .side-nav .item.current::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; background: var(--accent); border-radius: 2px; } .side-nav .item.locked { color: rgba(245,245,247,0.38); } /* Die Spalte ist 38px breit, damit die Zahlen untereinander stehen. Laengere Woerter (englisch "Contents") duerfen sie aufweiten, sonst laufen sie in den Titel. Deshalb min-width statt fester Breite. */ .side-nav .num { font-size: 10.5px; font-weight: 700; color: var(--accent); min-width: 38px; flex-shrink: 0; letter-spacing: .04em; white-space: nowrap; } .side-nav .item.locked .num { color: rgba(79,140,255,0.5); } .side-nav .txt { flex: 1; } .lock-ico { align-self: center; opacity: .6; flex-shrink: 0; } .side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line-dark); } .side-foot .btn { width: 100%; height: 46px; font-size: 15px; } .side-note { margin: 0; font-size: 12.5px; color: rgba(245,245,247,0.5); line-height: 1.45; } .side-note a { color: var(--accent); } .side-mobile { display: none; } .reader-main { padding: clamp(24px, 4vw, 56px) clamp(16px, 4vw, 56px) clamp(64px, 8vw, 120px); } .reader-col { max-width: 860px; margin: 0 auto; } .reader-eyebrow { margin: 0 0 16px; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(245,245,247,0.55); } @media (max-width: 480px) { .reader-eyebrow .eb-trenner { display: none; } .reader-eyebrow .eb-teil { display: block; margin-top: 4px; } } .reader-h1 { color: #fff; font-size: var(--t-titel); line-height: var(--lh-titel); } .reader-col .lead { color: var(--muted-dark); margin: 0 0 24px; } .cta-row.left { justify-content: flex-start; margin-bottom: 40px; } .idx-part { margin: 22px 0 10px; font-size: 13px; color: rgba(245,245,247,0.6); } .idx-part b { font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin-right: 8px; } .chapter-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 20px; } .chapter-tile { display: flex; gap: var(--s-3); align-items: baseline; padding: 14px 16px; border-radius: 14px; background: var(--karte); border: 1px solid var(--line-dark); color: #fff; font-weight: 600; font-size: 14.5px; line-height: 1.35; } .chapter-tile:hover { border-color: rgba(79,140,255,0.6); text-decoration: none; } .chapter-tile .num { color: var(--accent); font-size: 11px; font-weight: 700; flex-shrink: 0; white-space: nowrap; } /* Das Blatt: book.css setzt Farben und Typografie des E-Books auf .book. Hier nur Rahmen, Schrift und Rundung. */ .reader .book { --sans: "Manrope", "Segoe UI", Helvetica, Arial, sans-serif; background: transparent; } .reader .book .sheet { max-width: none; margin: 0; border-radius: 18px; box-shadow: 0 30px 80px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.35) inset; padding: clamp(28px, 4vw, 56px) clamp(22px, 4.5vw, 64px) clamp(40px, 5vw, 72px); } .reader .book .sheet > .kicker, .reader .book .sheet > .sn { margin-bottom: .6rem; } .reader .book .sheet > h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); letter-spacing: -.025em; margin-bottom: .6rem; } .sample-cta { margin: 40px 0 8px; padding: var(--s-8); border-radius: 22px; background: radial-gradient(120% 160% at 100% 0%, rgba(79,140,255,0.22), rgba(79,140,255,0.04) 60%), var(--karte); border: 1px solid rgba(79,140,255,0.3); } .sample-cta h2 { margin: 8px 0 10px; font-size: 1.6rem; letter-spacing: -.02em; color: #fff; } .sample-cta p { margin: 0 0 20px; color: var(--muted-dark); } .pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-top: 28px; } .pager-card { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-radius: 16px; background: var(--karte); border: 1px solid var(--line-dark); color: #fff; } .pager-card:hover { border-color: rgba(79,140,255,0.6); text-decoration: none; } .pager-card.next { text-align: right; align-items: flex-end; } .pager-card .dir { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); } .pager-card .ttl { font-weight: 600; font-size: 15px; line-height: 1.35; } .pager-card .lock { font-size: 12px; color: rgba(245,245,247,0.5); } .pager-card.locked { color: rgba(245,245,247,0.6); } @media (max-width: 960px) { .reader { grid-template-columns: minmax(0, 1fr); } .reader-main, .reader-col, .side-mobile { min-width: 0; max-width: 100%; } .side { display: none; } .side-mobile { display: block; background: #0f1116; border-bottom: 1px solid var(--line-dark); padding: 0 clamp(16px, 4vw, 40px); } .side-mobile summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding: 14px 0; font-weight: 700; color: #fff; font-size: 14px; } .side-mobile summary::-webkit-details-marker { display: none; } .side-mobile summary .muted { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); } .side-mobile .side-nav { padding-bottom: 14px; } .reader-main { padding-left: 10px; padding-right: 10px; } .reader .book .sheet { border-radius: var(--r-feld); } .chapter-grid { grid-template-columns: minmax(0, 1fr); } .pager { grid-template-columns: minmax(0, 1fr); } .pager-card.next { text-align: left; align-items: flex-start; } } /* =================================================================== Startseite: Chaptered editorial nach scroll-craft, Build v2 "Das Buch im Licht". Engine-Tokens (scrollcraft.css) werden hier auf die Marke gesetzt. =================================================================== */ body.ed, body.pg { --sc-canvas: #0a0c10; --sc-surface: #12151c; --sc-surface-2: #1a1f2a; --sc-ink: #eceef3; --sc-ink-soft: #9aa3b4; --sc-accent: #4f8cff; --sc-accent-ink: #0a0c10; --sc-font-display: "Manrope", "Segoe UI", Helvetica, Arial, sans-serif; --sc-font-text: "Manrope", "Segoe UI", Helvetica, Arial, sans-serif; --sc-shadow-color: 222 40% 3%; background: var(--sc-canvas); color: var(--sc-ink); font-family: var(--sc-font-text); } body.ed main.full { max-width: none; padding: 0; } body.ed a { color: var(--sc-accent); } body.ed .btn-accent { color: #fff; } body.ed .btn-ghost { color: var(--sc-ink); } body.ed .idx-free { color: var(--sc-accent-ink); } .ed-wrap { max-width: var(--sc-maxw); margin: 0 auto; padding: 0 var(--sc-gutter); } .ed-over { font-size: var(--t-etikett); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sc-accent); margin: 0; } .ed-over-muted { color: var(--sc-ink-soft); } .ed-h1 { font-family: var(--sc-font-display); font-size: clamp(2.8rem, 6.4vw, 6rem); line-height: .98; letter-spacing: -.035em; font-weight: 800; margin: 0; text-wrap: balance; max-width: 12ch; } .ed-h2 { font-family: var(--sc-font-display); font-size: var(--sc-t-2xl); line-height: var(--sc-leading-tight); letter-spacing: var(--sc-track-snug); font-weight: 800; margin: 0; text-wrap: balance; } .ed-h2-big { font-size: clamp(2rem, 3.4vw, 3.2rem); overflow-wrap: anywhere; } .ed-sub { font-size: var(--sc-t-lg); line-height: 1.5; color: var(--sc-ink-soft); max-width: 46ch; margin: 0; font-weight: 500; text-wrap: pretty; } .ed-lede { font-size: var(--sc-t-lg); line-height: 1.5; color: var(--sc-ink); max-width: 34ch; margin: 0; font-weight: 500; text-wrap: pretty; } .ed-fine { font-size: var(--sc-t-sm); line-height: 1.55; color: var(--sc-ink-soft); max-width: 40ch; margin: 0; } .ed-run { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); margin: 0; display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; } .ed-sep { color: var(--sc-ink-soft); opacity: .7; } /* Chrome: schmale Leiste oben (Marke, Shop, Buch, Leseprobe, Zugang, Kaufen), Buchruecken rechts als Kapitelnavigation. */ .topbar { position: fixed; left: 0; right: 0; top: 0; z-index: var(--sc-z-chrome); display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); height: 56px; padding: 0 calc(var(--sc-gutter) + 56px) 0 var(--sc-gutter); background: linear-gradient(180deg, var(--leiste), rgba(10,12,16,0.55) 70%, rgba(10,12,16,0)); } .topbar-brand { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--sc-ink); text-decoration: none; } .topbar-brand:hover { text-decoration: none; color: var(--sc-accent); } .topbar-nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); font-size: 13px; font-weight: 600; } .topbar-nav a { color: var(--sc-ink-soft); text-decoration: none; } .topbar-nav a:hover { color: var(--sc-ink); } .topbar-nav .topbar-cta { color: var(--sc-accent-ink); background: var(--sc-accent); padding: var(--s-2) var(--s-4); border-radius: var(--sc-r-pill); font-weight: 700; } .topbar-nav .topbar-cta:hover { background: var(--accent-strong); color: var(--sc-accent-ink); } /* Sprachumschalter (Deutsch/Englisch, Stefan 6. September 2026). Ohne Skript, zwei Verweise. */ .langswitch { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: var(--sc-r-pill); border: 1px solid var(--sc-hairline); background: rgba(255,255,255,0.03); font-size: 11px; font-weight: 700; letter-spacing: .06em; } .langswitch a, .langswitch span { padding: 4px 9px; border-radius: var(--sc-r-pill); line-height: 1; text-decoration: none; color: var(--sc-ink-soft); } .langswitch a:hover { color: var(--sc-ink); background: rgba(255,255,255,0.06); } .langswitch .on { color: var(--sc-accent-ink); background: var(--sc-accent); } .langswitch-foot { order: 4; } .spine { position: fixed; right: 0; top: 0; bottom: 0; width: 72px; z-index: var(--sc-z-chrome); display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 22px 0; pointer-events: none; } .spine > * { pointer-events: auto; } .spine-cur { writing-mode: vertical-rl; transform: rotate(180deg); display: flex; gap: 10px; align-items: center; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--sc-ink-soft); white-space: nowrap; } .spine-cur b { color: var(--sc-accent); font-weight: 800; } .spine-cur i { font-style: normal; font-weight: 600; color: var(--sc-ink); } .spine-ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; align-items: center; } /* Jeder Strich ist ein Ziel von 24 x 24 px (WCAG 2.5.8, Paket F 14. September 2026); der sichtbare Strich bleibt 18 x 3 px im ::before. */ .spine-ticks li a { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; } .spine-ticks li a::before { content: ''; display: block; width: 18px; height: 3px; border-radius: 2px; background: var(--sc-hairline-strong); transition: background var(--sc-d-base) var(--sc-ease-out), transform var(--sc-d-base) var(--sc-ease-out); } .spine-ticks li.on a::before { background: var(--sc-accent); transform: scaleX(1.5); } .spine-ticks li a:hover::before { background: var(--sc-ink); } .spine-foot { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--sc-ink-soft); white-space: nowrap; } /* Markenakt: Scutoria zuerst. Zeichen, Wort, Untertitel, ein Satz, drei Saeulen, dann die Produktlinien. */ .ed-brand { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: clamp(5rem, 11vh, 7.5rem) 0 var(--sc-section); background: var(--sc-canvas); overflow: hidden; } .brand-grid { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 88px); align-items: center; width: 100%; } .brand-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(50% 45% at 30% 30%, rgba(79,140,255,0.18), rgba(79,140,255,0) 70%); } .brand-stage { position: relative; display: flex; flex-direction: column; gap: var(--sc-5); } .brand-mark { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 24px); } .brand-mark svg { width: clamp(44px, 5vw, 72px); height: auto; flex-shrink: 0; } .brand-word { font-family: var(--sc-font-display); font-size: clamp(2.4rem, 5.6vw, 5.2rem); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; line-height: 1; color: var(--sc-ink); } .brand-tag { margin: 0; font-size: var(--sc-t-sm); font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--sc-accent); } .brand-claim { margin: var(--sc-3) 0 0; font-family: var(--sc-font-display); font-size: clamp(1.5rem, 2.5vw, 2.2rem); font-weight: 700; letter-spacing: var(--sc-track-snug); line-height: 1.15; max-width: 24ch; text-wrap: balance; } .brand-sub { margin: 0; font-size: var(--sc-t-base); line-height: 1.55; color: var(--sc-ink-soft); max-width: 62ch; text-wrap: pretty; } .brand-pillars { list-style: none; margin: var(--sc-3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); border-top: 1px solid var(--sc-hairline-strong); } .brand-pillars li { display: flex; flex-direction: column; gap: 6px; padding-top: 16px; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); line-height: 1.45; } .brand-pillars b { font-size: var(--sc-t-base); color: var(--sc-ink); font-weight: 800; letter-spacing: .02em; } .brand-range { position: relative; display: flex; flex-direction: column; gap: 10px; } .brand-range .ed-over { margin-bottom: 6px; } .range-all { align-self: flex-end; margin-top: 4px; font-size: var(--t-klein); font-weight: 700; color: var(--sc-ink-soft); text-decoration: none; } .range-all:hover { color: var(--sc-ink); } .range-card { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 0 18px; align-items: center; padding: 18px 22px 18px 20px; border-radius: var(--sc-r-md); background: var(--sc-surface); border: 1px solid var(--sc-hairline); color: var(--sc-ink); text-decoration: none; transition: border-color var(--sc-d-base) var(--sc-ease-out), transform var(--sc-d-base) var(--sc-ease-out); --series: #4f8cff; } .range-card:hover { border-color: var(--sc-hairline-strong); transform: translateY(-2px); text-decoration: none; } .range-card.has { border-color: rgba(79,140,255,0.35); } .range-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--series); box-shadow: 0 0 0 4px color-mix(in srgb, var(--series) 18%, transparent); } .range-text { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; } .range-cover { display: flex; perspective: 900px; } .range-cover .book3d { width: 118px; transform: rotateY(-16deg) rotateX(2deg); font-size: 4.4px; } .range-cover .book3d-cover { border-radius: 1px 3px 3px 1px; padding: 8% 9%; box-shadow: 0 10px 24px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.08) inset; } .range-cover .book3d-spine { width: 12px; transform: rotateY(-90deg) translateX(-6px); } .range-cover .book3d-pages { width: 8px; right: -6px; } .range-cover .b3-light, .range-cover .b3-meta, .range-cover .b3-sub { display: none; } [data-series="handbuch"] { --series: #4f8cff; } [data-series="anleitung"] { --series: #2ec4b6; } [data-series="kit"] { --series: #b07cff; } [data-series="werkzeug"] { --series: #f2b544; } .range-card .range-text b { font-size: var(--t-text); font-weight: 800; } /* nur der Linienname; bis 21. September 2026 traf die Regel auch das im Reihenbalken des Mini-Covers und sprengte ihn */ .range-claim { font-size: var(--t-klein); color: var(--sc-ink-soft); line-height: 1.4; } .range-state { margin-top: 4px; font-size: var(--t-etikett); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sc-ink-soft); } .range-card.has .range-state { color: var(--sc-accent); } /* Das Hauptprodukt: das Buch im Licht */ .ed-title { position: relative; min-height: 92vh; display: flex; align-items: center; padding: var(--sc-section) 0; background: #0d1017; overflow: hidden; border-top: 1px solid var(--sc-hairline); } .hero-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(42% 60% at 68% 55%, rgba(79,140,255,0.30), rgba(79,140,255,0) 70%), radial-gradient(30% 40% at 84% 20%, rgba(46,196,182,0.10), rgba(46,196,182,0) 70%); } .hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: center; width: 100%; } .hero-copy { display: flex; flex-direction: column; gap: var(--sc-5); } .hero-brand { display: flex; align-items: center; gap: var(--s-2); } .hero-series { margin: var(--sc-3) 0 0; font-size: var(--sc-t-sm); font-weight: 600; letter-spacing: .06em; color: var(--sc-ink-soft); } .hero-copy .ed-h1 { margin: 0 0 var(--sc-2); } .hero-status { margin: 0; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); letter-spacing: .02em; } .hero-book { display: flex; justify-content: center; perspective: 1600px; } /* Das Buch als Gegenstand nach dem Scutoria-Cover-System, Vorschlag A "Reihe im Regal" (Stefan, 8. September 2026): Ruecken, Seitenblock, Einband mit Marke, Streifen in der Linienfarbe ueber die ganze linke Kante, Titelblock im oberen Drittel, Bandzahl als Kontur unten rechts, Reihenbalken und Angaben unten. Details: shop/planung/11-cover-system.md */ .book3d { position: relative; width: clamp(280px, 32vw, 500px); aspect-ratio: 1 / 1.42; transform-style: preserve-3d; transform: rotateY(-22deg) rotateX(4deg); --series: #4f8cff; font-size: clamp(9.5px, 1.16vw, 17.5px); } /* Farbe je Produktlinie, gleiche Reihenfolge wie catalog in config.mjs. */ .book3d.series-anleitung { --series: #2ec4b6; } .book3d.series-kit { --series: #b07cff; } .book3d.series-werkzeug { --series: #f2b544; } .book3d-cover { position: absolute; inset: 0; color: #f4f6fa; border-radius: 4px 12px 12px 4px; padding: 7.5% 8% 7% 12%; display: flex; flex-direction: column; overflow: hidden; transform: translateZ(14px); background: radial-gradient(90% 60% at 10% 0%, rgba(79,140,255,0.22), rgba(79,140,255,0) 60%), repeating-linear-gradient(135deg, rgba(255,255,255,0.018) 0 2px, rgba(255,255,255,0) 2px 9px), linear-gradient(180deg, #11151d, #0b0e14 70%, #090b10); box-shadow: 0 40px 90px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.08) inset, -18px 0 40px rgba(0,0,0,0.35) inset; } .book3d-cover::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5%; background: var(--series); opacity: .92; } .book3d-spine { position: absolute; left: 0; top: 0; bottom: 0; width: 28px; background: linear-gradient(90deg, #06080b, #161b24 60%, #0b0e13); transform-origin: left center; transform: rotateY(-90deg) translateX(-14px); border-radius: 2px 0 0 2px; } .book3d-pages { position: absolute; top: 3%; bottom: 3%; right: -12px; width: 14px; background: repeating-linear-gradient(180deg, #f2efe6 0 2px, #d9d5cb 2px 3px); border-radius: 0 3px 3px 0; transform: translateZ(0); box-shadow: 4px 0 10px rgba(0,0,0,0.5); } .b3-top { display: flex; justify-content: space-between; align-items: center; gap: 1em; } .b3-brand { display: flex; align-items: center; gap: .5em; font-size: .9em; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; } .b3-brand svg { width: 1.35em; height: 1.35em; } .b3-line { font-size: .68em; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--series); } .b3-no { position: absolute; right: 6%; bottom: 21%; font-family: var(--sc-font-display, "Manrope", sans-serif); font-size: 9.5em; font-weight: 800; letter-spacing: -.06em; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.22); pointer-events: none; } .b3-body { margin-top: 2.2em; display: flex; flex-direction: column; gap: .5em; padding-bottom: 1.4em; } .b3-rail { font-size: .66em; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #7aa2ff; } .b3-title { font-size: 3.1em; font-weight: 800; letter-spacing: -.03em; line-height: 1.02; text-wrap: balance; } .b3-sub { font-size: .95em; line-height: 1.4; color: #cfd6e3; max-width: 30em; } .b3-bar { margin-top: auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: .2em .8em; padding-top: .9em; border-top: 3px solid var(--series); font-size: .72em; letter-spacing: .06em; color: #e6eaf2; } .b3-bar b { white-space: nowrap; } .b3-bar b { font-weight: 800; text-transform: uppercase; letter-spacing: .16em; color: var(--series); } .b3-meta { margin-top: .9em; display: flex; flex-wrap: wrap; gap: .5em 1.4em; font-size: .68em; color: #98a2b3; } .b3-meta b { display: block; color: #e6eaf2; font-weight: 650; } .b3-light { position: absolute; inset: -40%; background: linear-gradient(115deg, rgba(255,255,255,0) 42%, rgba(255,255,255,0.14) 50%, rgba(255,255,255,0) 58%); transform: translateX(-70%); pointer-events: none; } /* V3: kein Lichtstreifen, kein Hochfahren. Das Buch steht, wenn die Seite steht. */ .b3-light { display: none; } /* Schriftgroesse aus der Breite (1/27), damit der Titel bei jeder Breite in den Kasten passt; mit festen clamp-Werten war das Cover am Tablet (154 px) zu eng, "KI im Unternehme" und die Bandzahl waren abgeschnitten (21. September 2026). */ .book3d-small { --b3w: clamp(150px, 15vw, 220px); width: var(--b3w); transform: rotateY(18deg) rotateX(2deg); font-size: calc(var(--b3w) / 27); } .book3d-shop { width: 100%; max-width: 300px; transform: none; font-size: 10.5px; } .book3d-shop .book3d-spine { display: none; } .book3d-shop .b3-light { display: none; } .book3d-small .book3d-spine { display: none; } .book3d-small .book3d-pages { right: auto; left: -10px; border-radius: 3px 0 0 3px; } .book3d-small .b3-light { display: none; } /* Kapitel: harte Schnitte, jedes auf eigenem Grund */ .ed-chapter { padding: var(--sc-section) 0; position: relative; } .ed-g1 { background: #0d1017; --sc-canvas: #0d1017; } .ed-g2 { background: #07090c; --sc-canvas: #07090c; } .ed-g3 { background: #0f1218; --sc-canvas: #0f1218; } .ed-g4 { background: var(--paper); --sc-canvas: var(--paper); } .ed-g5 { background: #0d1017; --sc-canvas: #0d1017; } .ed-g6 { background: var(--paper); --sc-canvas: var(--paper); } .ed-inter { display: flex; align-items: baseline; gap: var(--sc-5); max-width: var(--sc-maxw); margin: 0 auto var(--sc-8); padding: 0 var(--sc-gutter) var(--sc-5); border-bottom: 1px solid var(--sc-hairline-strong); } .ed-inter-inline { margin: 0 0 var(--sc-6); padding-left: 0; padding-right: 0; } /* Die hellere Karte je Kapitel (Stefans Wahl F6 B, 16. September 2026, gebaut 21. September): eine Stufe heller als die Kartenflaeche, traegt den wichtigsten Knopf des Kapitels. Der Grund der Seite bleibt dunkel (Entscheidung 6. September). */ .ed-cta { display: flex; flex-direction: column; gap: var(--s-3); padding: clamp(18px, 2.4vw, 28px); background: var(--sc-surface-2); border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-lg); box-shadow: var(--sc-e2), var(--sc-edge); } .ed-cta > p { margin: 0; } .ed-cta-text { font-size: var(--t-text); line-height: var(--lh-text); color: var(--sc-ink); max-width: 44ch; } .ed-cta > .btn { align-self: flex-start; } .idx-cta { margin-top: var(--s-8); max-width: 520px; } .faq-cta { margin-top: var(--s-8); } /* Kernaussage je Kapitelkopf (Stefans Wahl F7 C, 16. September 2026): ein Satz rechts vom Titel, auf schmalen Fenstern darunter. */ .ed-kern { margin: 0; padding-left: var(--sc-5); border-left: 1px solid var(--sc-hairline-strong); font-size: var(--t-text); line-height: var(--lh-text); color: var(--sc-ink-soft); max-width: 40ch; text-wrap: pretty; } @media (max-width: 760px) { .ed-inter { flex-wrap: wrap; } .ed-kern { flex-basis: 100%; padding-left: 0; border-left: 0; } } .ed-num { font-family: var(--sc-font-display); font-size: var(--sc-t-2xl); font-weight: 800; color: var(--sc-accent); letter-spacing: var(--sc-track-tight); line-height: 1; } .ed-spread { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 96px); align-items: start; } .ed-lead { display: flex; flex-direction: column; gap: var(--sc-6); } .ed-media { margin: 0; } .ed-questions { display: flex; flex-direction: column; border-top: 1px solid var(--sc-hairline); } .ed-questions-plain { list-style: none; margin: 0; padding: 0; } .ed-questions-plain li { font-family: var(--sc-font-display); font-size: var(--sc-t-xl); font-weight: 700; padding: var(--sc-5) 0; border-bottom: 1px solid var(--sc-hairline); } .q-item { border-bottom: 1px solid var(--sc-hairline); } .q-item summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) 26px; gap: var(--s-3); align-items: baseline; padding: var(--sc-5) 0; } .q-item summary::-webkit-details-marker { display: none; } .q-no { font-size: var(--sc-t-xs); font-weight: 700; letter-spacing: .18em; color: var(--sc-accent); } .q-text { font-family: var(--sc-font-display); font-size: var(--sc-t-xl); font-weight: 700; letter-spacing: var(--sc-track-snug); line-height: 1.15; text-wrap: balance; } .q-item .plus { position: relative; width: 26px; height: 26px; border: 1px solid var(--sc-hairline-strong); border-radius: 50%; align-self: center; } .q-item .plus::before, .q-item .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: var(--sc-ink); transform: translate(-50%, -50%); transition: transform var(--sc-d-base) var(--sc-ease-out); } .q-item .plus::after { transform: translate(-50%, -50%) rotate(90deg); } .q-item[open] .plus::after { transform: translate(-50%, -50%) rotate(0); } .q-item summary:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 4px; border-radius: var(--r-klein); } .q-body { padding: 0 38px var(--sc-6) 2.6rem; display: flex; flex-direction: column; gap: 14px; } .q-answer { margin: 0; font-size: var(--sc-t-base); line-height: 1.5; color: var(--sc-ink); max-width: 52ch; } .q-how { margin: 0; font-size: var(--sc-t-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sc-ink-soft); } .q-chapters { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .q-chapters li a, .q-chapters li > span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: var(--sc-t-sm); color: var(--sc-ink); text-decoration: none; } .q-chapters li a:hover .q-t, .q-chapters li a:hover { color: var(--sc-accent); text-decoration: none; } .q-chapters b { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--sc-accent); width: 44px; flex-shrink: 0; } .q-chapters i { font-style: normal; color: var(--sc-ink-soft); } .q-chapters em { font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--sc-accent-ink); background: var(--sc-accent); padding: 2px 7px; border-radius: var(--sc-r-pill); } .range-more { margin: 4px 0 0; font-size: 12.5px; color: var(--sc-ink-soft); display: flex; gap: 10px; align-items: baseline; } .range-more b { font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--sc-ink-soft); border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-pill); padding: 2px 8px; } .ed-silence { height: 16vh; } /* Dichte der Startseite (Stefan, 22. September 2026: „auf 90 % passt ein Kapitel auf den Bildschirm“): ab 1200 px Fensterbreite ist die Grundgroesse 90 %. Alle Stufen und Abstaende der Startseite rechnen in rem, darum skaliert alles mit; Unterseiten (body.pg) bleiben. Abschnitt 9 der Designsprache. */ @media (min-width: 1200px) { html:has(body.ed) { font-size: 90%; } } /* Kapitel II: die Teile als Zug (pan). Kopfkarte, vier Teile, Schlusskarte. */ .ed-pan { padding: 0; } .ed-stage-pan { min-height: 100vh; display: flex; align-items: center; padding: 72px 0 40px; overflow: hidden; } .rail { display: flex; gap: clamp(16px, 2vw, 28px); padding: 0 var(--sc-gutter); align-items: stretch; width: max-content; } .rail-card { flex: 0 0 auto; width: clamp(300px, 32vw, 440px); min-height: 62vh; background: var(--sc-surface); border: 1px solid var(--sc-hairline); border-radius: var(--sc-r-lg); padding: clamp(22px, 2.4vw, 36px); display: flex; flex-direction: column; gap: var(--sc-4); box-shadow: var(--sc-e2), var(--sc-edge); position: relative; overflow: hidden; } .rail-head { background: transparent; border-color: transparent; box-shadow: none; width: clamp(300px, 34vw, 480px); justify-content: center; } .rail-head .ed-inter-inline { margin-bottom: var(--sc-4); } .rail-letter { position: absolute; right: 18px; top: 4px; font-family: var(--sc-font-display); font-size: clamp(120px, 14vw, 200px); font-weight: 800; letter-spacing: -.06em; line-height: 1; color: rgba(79,140,255,0.08); pointer-events: none; } .rail-rail { margin: 0; font-size: var(--sc-t-xs); font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--sc-accent); } .rail-h3 { margin: 0; font-family: var(--sc-font-display); font-size: var(--sc-t-2xl); font-weight: 800; letter-spacing: var(--sc-track-snug); line-height: 1.05; } .rail-lead { margin: 0; font-size: var(--sc-t-sm); line-height: 1.5; color: var(--sc-ink-soft); max-width: 36ch; } .rail-list { list-style: none; margin: auto 0 0; padding: var(--sc-4) 0 0; border-top: 1px solid var(--sc-hairline); display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--sc-ink); } .rail-list li { display: flex; gap: 10px; align-items: baseline; } .rail-list li span { flex-shrink: 0; min-width: 42px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; color: var(--sc-accent); } .rail-close { background: linear-gradient(160deg, rgba(79,140,255,0.16), rgba(79,140,255,0.03) 60%), var(--sc-surface); border-color: rgba(79,140,255,0.3); justify-content: center; } .rail-close-big { margin: 0; font-family: var(--sc-font-display); font-size: var(--sc-t-3xl); font-weight: 800; letter-spacing: var(--sc-track-tight); line-height: 1; } .rail-close .btn { align-self: flex-start; margin-top: var(--sc-3); } /* Die Fahrt durch die Teile bleibt (Stefan, 7. September 2026, abends); mit reduzierter Bewegung ein Raster. */ @media (prefers-reduced-motion: reduce) { .ed-pan { height: auto !important; } .ed-stage-pan { position: static !important; min-height: auto; padding: var(--sc-section) 0; transform: none !important; } .rail { transform: none !important; } .rail { width: auto; flex-wrap: wrap; } .rail-card { width: min(100%, 440px); min-height: auto; } } /* Kapitel III: eine Seite aus dem Buch, als Blatt. */ .ed-spread-sheet { align-items: center; } .sheet-stage { position: relative; min-height: 660px; } .paper.book { margin: 0; position: absolute; left: 0; top: 0; width: 88%; --sans: "Manrope", "Segoe UI", Helvetica, Arial, sans-serif; background: transparent; font-size: 14px; } .paper .sheet { max-width: none; margin: 0; border-radius: var(--r-klein); padding: clamp(24px, 2.6vw, 40px) clamp(24px, 2.8vw, 44px) clamp(28px, 3vw, 48px); box-shadow: 0 40px 100px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.5) inset; max-height: 560px; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent); mask-image: linear-gradient(to bottom, #000 78%, transparent); font-size: 14px; line-height: 1.6; } .paper .sheet .kicker, .paper .sheet .sn { font-size: 9.5px; } .paper .sheet h2 { font-size: 1.45rem; margin-bottom: .35rem; } .paper .sheet h3 { font-size: 1rem; margin-top: 1.2rem; } .paper .sheet .lead { font-size: .98rem; } .paper .sheet p { font-size: 14px; } .paper figcaption { position: absolute; left: 0; width: 46%; bottom: -62px; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); letter-spacing: .04em; line-height: 1.45; } .got-card { position: absolute; right: 0; bottom: 0; width: 52%; background: var(--sc-surface); border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-lg); padding: 22px 22px 20px; box-shadow: var(--sc-e3), var(--sc-edge); } .ed-got { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); font-size: var(--sc-t-sm); font-weight: 600; color: var(--sc-ink); } .ed-got li { display: flex; gap: var(--s-3); align-items: center; } .ed-got svg { flex-shrink: 0; } /* Umschalter je Band ueber der Textprobe (Stefans Wahl F2 A, 16. September 2026, gebaut 21. September). Rein CSS: die Radios stehen vor beiden Spalten, ohne Skript. Sechs Baende reichen; ein siebter braucht eine weitere Regel. */ .seite-input { position: absolute; opacity: 0; width: 1px; height: 1px; } .seite-spread [data-seite] { display: none; } .seite-spread #seite-0:checked ~ * [data-seite="0"], .seite-spread #seite-1:checked ~ * [data-seite="1"], .seite-spread #seite-2:checked ~ * [data-seite="2"], .seite-spread #seite-3:checked ~ * [data-seite="3"], .seite-spread #seite-4:checked ~ * [data-seite="4"], .seite-spread #seite-5:checked ~ * [data-seite="5"] { display: block; } .seite-spread .seite-text[data-seite] { display: none; } .seite-spread .seite-text { flex-direction: column; gap: var(--sc-6); } .seite-spread #seite-0:checked ~ * .seite-text[data-seite="0"], .seite-spread #seite-1:checked ~ * .seite-text[data-seite="1"], .seite-spread #seite-2:checked ~ * .seite-text[data-seite="2"], .seite-spread #seite-3:checked ~ * .seite-text[data-seite="3"], .seite-spread #seite-4:checked ~ * .seite-text[data-seite="4"], .seite-spread #seite-5:checked ~ * .seite-text[data-seite="5"] { display: flex; } .seite-wahl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .seite-wahl .ed-over { flex-basis: 100%; margin-bottom: 2px; } .seite-tab { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: var(--sc-r-md); border: 1px solid var(--sc-hairline); background: var(--sc-surface); cursor: pointer; max-width: 200px; transition: border-color var(--sc-d-base) var(--sc-ease-out); } .seite-tab b { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--sc-accent); } .seite-tab span { font-size: var(--t-klein); line-height: 1.3; color: var(--sc-ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .seite-tab:hover { border-color: var(--sc-hairline-strong); } .seite-spread #seite-0:checked ~ * label[for="seite-0"], .seite-spread #seite-1:checked ~ * label[for="seite-1"], .seite-spread #seite-2:checked ~ * label[for="seite-2"], .seite-spread #seite-3:checked ~ * label[for="seite-3"], .seite-spread #seite-4:checked ~ * label[for="seite-4"], .seite-spread #seite-5:checked ~ * label[for="seite-5"] { border-color: var(--sc-accent); background: rgba(79,140,255,0.10); } .seite-spread #seite-0:checked ~ * label[for="seite-0"] span, .seite-spread #seite-1:checked ~ * label[for="seite-1"] span, .seite-spread #seite-2:checked ~ * label[for="seite-2"] span, .seite-spread #seite-3:checked ~ * label[for="seite-3"] span, .seite-spread #seite-4:checked ~ * label[for="seite-4"] span, .seite-spread #seite-5:checked ~ * label[for="seite-5"] span { color: var(--sc-ink); } .seite-input:focus-visible ~ * label[for] { outline: 0; } .seite-spread #seite-0:focus-visible ~ * label[for="seite-0"], .seite-spread #seite-1:focus-visible ~ * label[for="seite-1"], .seite-spread #seite-2:focus-visible ~ * label[for="seite-2"], .seite-spread #seite-3:focus-visible ~ * label[for="seite-3"], .seite-spread #seite-4:focus-visible ~ * label[for="seite-4"], .seite-spread #seite-5:focus-visible ~ * label[for="seite-5"] { outline: 2px solid var(--sc-accent); outline-offset: 3px; } .ed-media-quiet { border: 1px dashed var(--sc-hairline-strong); border-radius: var(--sc-r-lg); padding: var(--sc-7); margin: 0; } .ed-quiet { margin: 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); } /* Kapitel IV: Ihr Leseweg (Signature Move). Schalter aus den Lesewegen des Buchs, der Index ordnet sich. */ .ed-paths { display: flex; flex-direction: column; gap: var(--sc-7); } .paths { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sc-4); } .paths legend { padding: 0; margin-bottom: var(--sc-3); } .paths-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .paths input { position: absolute; opacity: 0; width: 1px; height: 1px; } .paths label { display: flex; flex-direction: column; gap: var(--s-1); padding: 16px 18px; border-radius: var(--sc-r-md); background: var(--sc-surface); border: 1px solid var(--sc-hairline); cursor: pointer; transition: border-color var(--sc-d-base) var(--sc-ease-out), transform var(--sc-d-base) var(--sc-ease-out), background var(--sc-d-base) var(--sc-ease-out); } .paths label b { font-size: var(--sc-t-base); font-weight: 800; letter-spacing: -.01em; } .paths label span { font-size: 12.5px; color: var(--sc-ink-soft); line-height: 1.35; } .paths label:hover { border-color: var(--sc-hairline-strong); transform: translateY(-2px); } .paths input:checked + label { border-color: var(--sc-accent); background: rgba(79,140,255,0.10); } .paths input:focus-visible + label { outline: 2px solid var(--sc-accent); outline-offset: 3px; } .paths-note { margin: 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); min-height: 1.5em; } .idx { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); } .idx-parts { grid-template-columns: repeat(5, minmax(0, 1fr)); } .idx-front { grid-column: 1 / -1; } .idx-front .idx-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-8); } .ed-paths .idx-part { margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--sc-hairline-strong); color: var(--sc-ink); font-size: 13px; } .idx-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .idx-row { display: flex; gap: 10px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--sc-hairline); font-size: 13.5px; font-weight: 500; line-height: 1.3; transition: opacity var(--sc-d-slow) var(--sc-ease-out); } .idx-row:first-child { border-top: 0; } .idx-k { flex-shrink: 0; min-width: 42px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; color: var(--sc-accent); } .idx-t { flex: 1; } .idx-free { font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--sc-accent-ink); background: var(--sc-accent); padding: 2px 7px; border-radius: var(--sc-r-pill); text-decoration: none; } .idx-foot { max-width: none; } /* Der Index ordnet sich: Zeilen ausserhalb des gewaehlten Wegs treten zurueck. Rein CSS, kein Skript noetig. */ .ed-paths:has(#path-a:checked) .idx-row:not([data-paths~="a"]), .ed-paths:has(#path-b:checked) .idx-row:not([data-paths~="b"]), .ed-paths:has(#path-c:checked) .idx-row:not([data-paths~="c"]), .ed-paths:has(#path-d:checked) .idx-row:not([data-paths~="d"]), .ed-paths:has(#path-e:checked) .idx-row:not([data-paths~="e"]) { opacity: .28; } .ed-paths:has(#path-a:checked) .idx-row[data-paths~="a"] .idx-t, .ed-paths:has(#path-b:checked) .idx-row[data-paths~="b"] .idx-t, .ed-paths:has(#path-c:checked) .idx-row[data-paths~="c"] .idx-t, .ed-paths:has(#path-d:checked) .idx-row[data-paths~="d"] .idx-t, .ed-paths:has(#path-e:checked) .idx-row[data-paths~="e"] .idx-t { font-weight: 700; color: #fff; } /* Signature Move v2.2 "Fünf Handlungsfelder": Schalter mit sechs Feldern (Alle + A bis E), darunter die Aussagen des gewaehlten Felds. */ .paths-lede { margin: 0; max-width: 62ch; font-size: var(--sc-t-base); color: var(--sc-ink-soft); line-height: 1.5; } /* F3 B (Stefan, 16. September 2026, gebaut 21. September): "Alle Felder" ist eine eigene, schlanke Zeile ueber dem Raster, die fuenf Felder A bis E stehen als Raster mit Piktogramm (F7 A); vorher sechs gleichwertige Knoepfe in einem Raster. */ .paths-grid { display: flex; flex-direction: column; gap: 10px; } .paths-all label { flex-direction: row; align-items: baseline; gap: var(--s-3); padding: 10px 16px; background: transparent; border: 1px dashed var(--sc-hairline-strong); } .paths-all label b { font-size: var(--t-klein); } .paths .paths-all input:checked + label { background: rgba(79,140,255,0.08); border: 1px solid var(--sc-accent); } .paths-row-fields { grid-template-columns: repeat(5, minmax(0, 1fr)); } .feld-pikt { display: inline-flex; width: 36px; height: 36px; border-radius: 50%; align-items: center; justify-content: center; color: var(--sc-accent); background: rgba(79,140,255,0.12); margin-bottom: 4px; } .paths-fields input:checked + label .feld-pikt { background: var(--sc-accent); color: #fff; } .ed-over-pikt { display: flex; align-items: center; gap: var(--s-3); } .fw-pikt { display: inline-flex; width: 36px; height: 36px; border-radius: 50%; align-items: center; justify-content: center; color: var(--gruen); background: rgba(46,196,182,0.14); } .ed-over-muted .fw-pikt { color: var(--sc-ink-soft); background: rgba(255,255,255,0.06); } .paths-fields label b { display: flex; align-items: baseline; gap: var(--s-2); } .paths-fields label b i { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .12em; color: var(--sc-accent); min-width: 14px; } .paths-fields input:checked + label b i { color: #fff; } .paths-fields .paths-note { min-height: 0; } .paths-note p { margin: 0; } .field-list[hidden] { display: none; } .field-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; } .field-list li { position: relative; padding: 12px 14px 12px 40px; border-radius: var(--sc-r-md); background: var(--sc-surface); border: 1px solid var(--sc-hairline); font-size: 13.5px; line-height: 1.45; color: var(--sc-ink); } .field-list li b { position: absolute; left: 14px; top: 12px; font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--sc-accent); } .field-list li i { font-style: normal; color: var(--sc-ink-soft); white-space: nowrap; } /* Kapitel V, VI */ .ed-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); } .ed-listblock { display: flex; flex-direction: column; gap: var(--sc-5); padding: clamp(24px, 3vw, 40px); background: var(--sc-surface); border: 1px solid var(--sc-hairline); border-radius: var(--sc-r-lg); box-shadow: var(--sc-e2), var(--sc-edge); } .ed-listblock-muted { background: transparent; box-shadow: none; } body.ed .check-list, body.ed .cross-list { font-size: var(--sc-t-base); color: var(--sc-ink); } body.ed .cross-list li { color: var(--sc-ink-soft); } body.ed .check-list li::before { background: rgba(46,196,182,0.14) url('data:image/svg+xml;utf8,') center/14px no-repeat; } body.ed .cross-list li::before { background: rgba(255,255,255,0.06) url('data:image/svg+xml;utf8,') center/12px no-repeat; } .ed-faq-wrap { max-width: 56rem; } body.ed .faq { border-top-color: var(--sc-hairline-strong); } body.ed .faq details { border-bottom-color: var(--sc-hairline); } body.ed .faq summary { color: var(--sc-ink); font-size: var(--sc-t-lg); } body.ed .faq summary:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 4px; border-radius: var(--r-klein); } body.ed .faq .plus { border-color: var(--sc-hairline-strong); } body.ed .faq .plus::before, body.ed .faq .plus::after { background: var(--sc-ink); } body.ed .faq p { color: var(--sc-ink-soft); } /* Rueckseite: die Seite endet wie ein Buch, mit der Rueckseite. Preis, Bestellung, Kleindruck. */ .ed-back { background: #07080b; padding: var(--sc-section) 0 0; border-top: 1px solid var(--sc-hairline-strong); position: relative; overflow: hidden; } .ed-back::before { content: ""; position: absolute; inset: 0; background: radial-gradient(40% 50% at 12% 50%, rgba(79,140,255,0.16), rgba(79,140,255,0) 70%); pointer-events: none; } .ed-back-grid { position: relative; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 72px); align-items: center; padding-bottom: var(--sc-section); } .ed-back-book { display: flex; justify-content: center; perspective: 1400px; } .ed-col-price { display: flex; flex-direction: column; gap: var(--sc-4); } .ed-included { margin: 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); max-width: 40ch; } body.ed .price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: var(--sc-3); } body.ed .price .amount { font-family: var(--sc-font-display); font-size: clamp(3rem, 5vw, 4.6rem); line-height: 1; font-weight: 800; letter-spacing: var(--sc-track-tight); } body.ed .price .tax { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); } body.ed .buyform { width: 100%; text-align: left; } .ed-foot { position: relative; border-top: 1px solid var(--sc-hairline); padding: 28px 0 36px; font-size: 12px; color: var(--sc-ink-soft); } .ed-foot-row { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); flex-wrap: wrap; } .ed-foot-brand { display: flex; align-items: center; gap: 9px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--sc-ink); font-size: 11px; } .ed-foot-tag { letter-spacing: .12em; color: var(--sc-ink-soft); font-weight: 600; } .ed-foot nav { display: flex; gap: 20px; } .ed-foot nav a { color: var(--sc-ink-soft); text-decoration: none; } .ed-foot nav a:hover { color: var(--sc-ink); text-decoration: underline; text-underline-offset: .2em; } body.ed a:focus-visible, body.ed button:focus-visible, body.ed input:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; } body.ed .notice { color: var(--ink); } @media (min-width: 1181px) { .ed-wrap, .ed-inter { padding-right: calc(var(--sc-gutter) + 56px); } .ed-inter-inline { padding-right: 0; } .rail { padding-right: calc(var(--sc-gutter) + 56px); } } @media (max-width: 1180px) { .topbar { position: sticky; height: 52px; padding: 0 var(--sc-gutter); background: rgba(10,12,16,0.94); border-bottom: 1px solid var(--sc-hairline); } .topbar-nav { gap: var(--s-3); font-size: 12px; } .topbar-nav a:nth-child(2), .topbar-nav a:nth-child(4) { display: none; } .langswitch { font-size: 10px; } .topbar-nav .topbar-cta { padding: 6px 12px; } .ed-brand { min-height: auto; padding-top: clamp(3rem, 8vh, 5rem); } .brand-grid { grid-template-columns: minmax(0, 1fr); } .brand-pillars { grid-template-columns: minmax(0, 1fr); } .spine { position: fixed; top: auto; bottom: 0; left: 0; right: 0; width: auto; flex-direction: row; padding: 8px var(--sc-gutter); background: rgba(10,12,16,0.94); border-top: 1px solid var(--sc-hairline); gap: var(--s-3); } .spine-cur, .spine-foot { writing-mode: horizontal-tb; transform: none; } .spine-foot { display: none; } .spine-cur { flex: 1; min-width: 0; overflow: hidden; } .spine-cur i { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .spine-ticks { display: none; } .ed-title { min-height: 86vh; padding-top: clamp(3rem, 8vh, 5rem); } .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; } .hero-book { justify-content: flex-start; padding-left: 10%; } .book3d { width: clamp(240px, 52vw, 360px); font-size: clamp(9px, 1.9vw, 13px); } .book3d-small { --b3w: clamp(150px, 40vw, 220px); width: var(--b3w); font-size: calc(var(--b3w) / 27); } /* nach .book3d, sonst gewinnt dessen Schrift */ .ed-back-grid { grid-template-columns: minmax(0, 1fr); } .ed-back-book { justify-content: flex-start; } body.ed main.full { padding-bottom: 44px; } } @media (max-width: 960px) { .ed-spread, .ed-two { grid-template-columns: minmax(0, 1fr); } .sheet-stage { min-height: 0; display: flex; flex-direction: column; gap: 20px; } /* Unter 960 px steht die Figur im Fluss; die Bildunterschrift folgt ihr, statt absolut am Fuss der Buehne unter der Karte „Was Sie bekommen“ zu landen (Fotobefund 22. September 2026, DE und EN am Handy). */ .paper.book { position: static; width: 100%; padding-bottom: 0; } .paper figcaption { position: static; width: 100%; margin-top: 14px; } .got-card { position: static; width: 100%; } .paths-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .paths-row-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); } .field-list { grid-template-columns: minmax(0, 1fr); } .idx-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .idx-front .idx-list { grid-template-columns: minmax(0, 1fr); } .ed-h1 { font-size: clamp(2.4rem, 10vw, 3.6rem); } .ed-silence { height: 18vh; } .rail-card { width: min(78vw, 400px); min-height: 56vh; } .rail-head { width: min(84vw, 440px); } } @media (max-width: 520px) { .paths-row, .paths-row-fields { grid-template-columns: minmax(0, 1fr); } .idx-parts { grid-template-columns: minmax(0, 1fr); } .q-text, .ed-questions-plain li { font-size: var(--sc-t-lg); } .q-item summary { grid-template-columns: 2rem minmax(0, 1fr) 24px; } .q-body { padding-left: 2rem; padding-right: 0; } .hero-book { padding-left: 4%; } .topbar-nav a:nth-child(3) { display: none; } .brand-word { letter-spacing: .1em; } .ed-run .btn { width: 100%; } } /* =================================================================== V2 (5. September 2026, Stefan: "steril, nicht einladend, nicht zukunftsorientiert"): Licht, Tiefe, Waerme. Aurora hinter der Marke, Boden-Raster mit Perspektive, Farbverlauf Blau nach Tuerkis auf Schluesselworten, Icons, Tasten mit Leuchten, Karten mit Verlaufsrand. Alles ohne Fotos, alles mit reduzierter Bewegung abschaltbar. =================================================================== */ body.ed, body.pg { --sc-accent-2: var(--gruen); --grad: linear-gradient(120deg, var(--accent), var(--gruen)); } .aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .aurora i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; mix-blend-mode: screen; } .aurora i:nth-child(1) { width: 56vw; height: 56vw; left: -14vw; top: -18vw; background: radial-gradient(circle, rgba(79,140,255,0.55), rgba(79,140,255,0) 65%); } .aurora i:nth-child(2) { width: 44vw; height: 44vw; right: -8vw; top: 8vh; background: radial-gradient(circle, rgba(46,196,182,0.38), rgba(46,196,182,0) 65%); } .aurora i:nth-child(3) { width: 38vw; height: 38vw; left: 30vw; bottom: -20vw; background: radial-gradient(circle, rgba(124,108,255,0.30), rgba(124,108,255,0) 65%); } .floor { position: absolute; left: -10%; right: -10%; bottom: -14%; height: 58%; pointer-events: none; opacity: .55; background: repeating-linear-gradient(90deg, rgba(120,160,255,0.16) 0 1px, transparent 1px 90px), repeating-linear-gradient(0deg, rgba(120,160,255,0.16) 0 1px, transparent 1px 90px); transform: perspective(700px) rotateX(62deg); transform-origin: 50% 100%; -webkit-mask-image: radial-gradient(60% 90% at 50% 100%, #000 30%, transparent 100%); mask-image: radial-gradient(60% 90% at 50% 100%, #000 30%, transparent 100%); } /* V3: Aurora und Boden stehen still (die Elemente selbst sind seit dem 7. September 2026 nicht mehr im Markup). */ .brand-glow { display: none; } .ed-brand .brand-grid, .ed-brand .brand-stage, .ed-brand .brand-range { position: relative; z-index: 1; } .grad { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .brand-word { background: linear-gradient(180deg, #ffffff, #c9d4ea); -webkit-background-clip: text; background-clip: text; color: transparent; } .brand-tag { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .brand-pillars li { position: relative; padding-top: 18px; } .pillar-ico { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: var(--r-feld); background: rgba(79,140,255,0.08); border: 1px solid rgba(79,140,255,0.22); margin-bottom: 8px; box-shadow: 0 0 0 6px rgba(79,140,255,0.04); } .pillar-ico svg { width: 24px; height: 24px; } /* Tasten mit Licht */ body.ed .btn-accent, body.pg .btn-accent, .topbar-nav .topbar-cta { background: linear-gradient(120deg, #5a95ff, #3f7cf0); box-shadow: 0 10px 30px rgba(79,140,255,0.32), 0 1px 0 rgba(255,255,255,0.18) inset; transition: transform var(--sc-d-base) var(--sc-ease-out), box-shadow var(--sc-d-base) var(--sc-ease-out); } body.ed .btn-accent:hover, body.pg .btn-accent:hover, .topbar-nav .topbar-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(79,140,255,0.42), 0 1px 0 rgba(255,255,255,0.22) inset; } body.ed .btn-ghost, body.pg .btn-ghost { background: rgba(255,255,255,0.03); backdrop-filter: blur(6px); } /* Karten mit Verlaufsrand */ .range-card, .got-card, .rail-card:not(.rail-head), .ed-listblock:not(.ed-listblock-muted), .paths label, .shop-card { border-color: transparent; background: linear-gradient(var(--sc-surface), var(--sc-surface)) padding-box, linear-gradient(135deg, rgba(79,140,255,0.45), rgba(46,196,182,0.18) 45%, rgba(255,255,255,0.05)) border-box; } .range-card.has { background: linear-gradient(160deg, rgba(79,140,255,0.10), var(--sc-surface) 55%) padding-box, linear-gradient(135deg, rgba(79,140,255,0.7), rgba(46,196,182,0.35) 50%, rgba(255,255,255,0.08)) border-box; } .paths input:checked + label { background: linear-gradient(160deg, rgba(79,140,255,0.16), rgba(46,196,182,0.06)) padding-box, var(--grad) border-box; border-color: transparent; } .rail-close { background: linear-gradient(160deg, rgba(79,140,255,0.16), rgba(46,196,182,0.05) 60%, var(--sc-surface)) padding-box, var(--grad) border-box; border-color: transparent; } /* Kapitelgruende: leises Licht statt flacher Flaeche */ .ed-chapter::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .9; } .ed-g1::before { background: radial-gradient(50% 40% at 85% 20%, rgba(79,140,255,0.10), transparent 70%); } .ed-g3::before { background: radial-gradient(45% 50% at 80% 60%, rgba(46,196,182,0.09), transparent 70%); } .ed-g4::before { background: radial-gradient(50% 40% at 15% 80%, rgba(79,140,255,0.10), transparent 70%); } .ed-g5::before { background: radial-gradient(40% 40% at 50% 100%, rgba(124,108,255,0.08), transparent 70%); } .ed-chapter > *:not([data-sc-stage]) { position: relative; } /* nie die Bühne eines gepinnten Akts: sie muss sticky bleiben */ .ed-title .hero-glow { background: radial-gradient(42% 60% at 68% 55%, rgba(79,140,255,0.34), rgba(79,140,255,0) 70%), radial-gradient(30% 40% at 84% 20%, rgba(46,196,182,0.16), rgba(46,196,182,0) 70%), radial-gradient(30% 40% at 20% 85%, rgba(124,108,255,0.10), rgba(124,108,255,0) 70%); } .ed-num { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .spine-ticks li.on a::before { background: var(--grad); box-shadow: 0 0 12px rgba(79,140,255,0.6); } .ed-back::before { background: radial-gradient(40% 50% at 12% 50%, rgba(79,140,255,0.20), rgba(79,140,255,0) 70%), radial-gradient(30% 40% at 90% 20%, rgba(46,196,182,0.10), rgba(46,196,182,0) 70%); } body.ed .price .amount { background: linear-gradient(180deg, #fff, #bcd0ff); -webkit-background-clip: text; background-clip: text; color: transparent; } .q-no, .idx-k, .rail-rail, .b3-line { background: none; } @media (max-width: 960px) { .aurora i { filter: blur(50px); } .floor { height: 40%; } } /* =================================================================== Unterseiten (6. September 2026, Stefan: einheitliches Farbschema, Leiste 3, Zugang 4, Support, Kasse): Shop, Kasse, Zugang, Support, Rechtstexte, Bestellseiten. Dieselben Tokens wie die Startseite, ohne die Engine. Seit 7. September 2026 (V3, Designsprache Abschnitt 7) laeuft auch die Startseite ohne Engine; die Tokens stehen hier fuer beide. =================================================================== */ body.ed, body.pg { --sc-t-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.82rem); --sc-t-sm: clamp(0.875rem, 0.84rem + 0.18vw, 0.95rem); --sc-t-base: clamp(1rem, 0.96rem + 0.22vw, 1.125rem); --sc-t-lg: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem); --sc-t-xl: clamp(1.6rem, 1.35rem + 1.2vw, 2.25rem); --sc-t-2xl: clamp(2.1rem, 1.6rem + 2.4vw, 3.4rem); --sc-track-tight: -0.035em; --sc-track-snug: -0.02em; --sc-leading-tight: 1.06; --sc-1: 0.25rem; --sc-2: 0.5rem; --sc-3: 0.75rem; --sc-4: 1rem; --sc-5: 1.5rem; --sc-6: 2rem; --sc-7: 3rem; --sc-8: 4rem; --sc-section: clamp(3rem, 6vw, 6rem); --sc-gutter: clamp(1.25rem, 5vw, 5.5rem); --sc-maxw: 82rem; --sc-r-sm: 6px; --sc-r-md: 12px; --sc-r-lg: 20px; --sc-r-pill: 999px; --sc-hairline: rgba(236,238,243,0.12); --sc-hairline-strong: rgba(236,238,243,0.22); --sc-e2: 0 2px 4px rgba(4,6,12,0.24), 0 12px 32px rgba(4,6,12,0.32); --sc-edge: inset 0 1px 0 rgba(236,238,243,0.08); --sc-ease-out: cubic-bezier(0.23, 1, 0.32, 1); --sc-d-base: 240ms; --sc-d-slow: 420ms; --sc-z-chrome: 60; background: var(--sc-canvas); color: var(--sc-ink); min-height: 100vh; display: flex; flex-direction: column; } body.pg main { flex: 1; width: 100%; } body.pg main.full { max-width: none; padding: 0; } body.pg h1, body.pg h2, body.pg h3 { color: var(--sc-ink); } body.pg .book h1, body.pg .book h2, body.pg .book h3, body.pg .book h4 { color: inherit; } /* das Blatt faerbt seine Ueberschriften selbst (book.css) */ body.pg .ed-over { font-size: var(--t-etikett); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sc-accent); margin: 0; } body.pg .btn-ghost { color: var(--sc-ink); } body.pg .btn-accent { color: #fff; } body.pg .ed-foot { margin-top: auto; } body.pg .ed-wrap { max-width: var(--sc-maxw); margin: 0 auto; padding: 0 var(--sc-gutter); } body.pg .ed-foot-meta a { color: var(--sc-ink-soft); } /* Zwei-Wort-Links im Fuß brechen als Ganzes um, nicht mitten im Namen (Nr. 152). */ .ed-foot-meta a { white-space: nowrap; } body.pg .ed-foot-meta a:hover { color: var(--sc-ink); } /* Leiste: fest auf dunklem Grund. Auf der Startseite schwebt sie (Stil oben, .topbar-home = .topbar). */ .topbar-solid { position: sticky; top: 0; height: 56px; padding: 0 var(--sc-gutter); background: var(--leiste); backdrop-filter: blur(16px); border-bottom: 1px solid var(--sc-hairline); } .topbar-brand span { background: linear-gradient(180deg, #ffffff, #c9d4ea); -webkit-background-clip: text; background-clip: text; color: transparent; } .topbar-nav a { position: relative; padding: 6px 0; transition: color var(--sc-d-base) var(--sc-ease-out); } .topbar-nav a:not(.topbar-cta)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform var(--sc-d-base) var(--sc-ease-out); } .topbar-nav a:not(.topbar-cta):hover::after, .topbar-nav a.on::after { transform: scaleX(1); } .topbar-nav a.on { color: var(--sc-ink); } .topbar-nav .topbar-cta { padding: 9px 18px; margin-left: 6px; } .topbar-price { font-weight: 600; } /* volle Deckung: 13 px Weiss auf Blau braucht 4,5:1 (Lighthouse, Paket F) */ .nav-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } .nav-burger { display: none; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--sc-hairline-strong); background: rgba(255,255,255,0.04); cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 5px; } .nav-burger span:not(.sr-only) { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--sc-ink); transition: transform var(--sc-d-base) var(--sc-ease-out), opacity var(--sc-d-base) var(--sc-ease-out); } @media (max-width: 760px) { .topbar-solid, .topbar { padding-right: var(--sc-gutter); } .nav-burger { display: flex; margin-left: auto; } .topbar-nav { position: absolute; left: 0; right: 0; top: 100%; height: calc(100vh - 56px); height: calc(100dvh - 56px); z-index: var(--sc-z-chrome); flex-direction: column; align-items: stretch; gap: 0; padding: 16px var(--sc-gutter) 32px; background: #0b0d12; border-top: 1px solid var(--sc-hairline); font-size: 18px; transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity var(--sc-d-base) var(--sc-ease-out), transform var(--sc-d-base) var(--sc-ease-out); overflow-y: auto; } .topbar-nav a { display: block !important; padding: var(--s-4) 0; border-bottom: 1px solid var(--sc-hairline); color: var(--sc-ink); } .topbar-nav a:not(.topbar-cta)::after { display: none; } .topbar-nav .topbar-cta { margin: 20px 0 0; text-align: center; padding: 14px 18px; border-bottom: 0; } .topbar-nav .langswitch { align-self: flex-start; margin-top: 18px; } .topbar-nav .langswitch a, .topbar-nav .langswitch span { display: inline-block !important; padding: 8px 14px; border-bottom: 0; font-size: 14px; } .nav-toggle:checked ~ .topbar-nav { transform: none; opacity: 1; pointer-events: auto; } .nav-toggle:checked ~ .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity: 0; } .nav-toggle:checked ~ .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } body.ed .topbar { position: sticky; } body.ed .spine { z-index: 59; } } /* Seitenrahmen und Kopf */ .pg-wrap { position: relative; max-width: var(--sc-maxw); margin: 0 auto; padding: clamp(2.5rem, 6vw, 5rem) var(--sc-gutter) clamp(4rem, 8vw, 7rem); } .pg-wrap::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 520px; pointer-events: none; z-index: -1; background: radial-gradient(50% 60% at 20% 0%, rgba(79,140,255,0.16), rgba(79,140,255,0) 70%), radial-gradient(35% 45% at 85% 10%, rgba(46,196,182,0.10), rgba(46,196,182,0) 70%); } body.pg main { position: relative; z-index: 0; } .pg-head { display: flex; flex-direction: column; gap: 14px; max-width: 60rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); } .pg-head-narrow { max-width: 46rem; } .pg-h1 { font-size: var(--t-display); line-height: var(--lh-display); letter-spacing: var(--sc-track-tight); font-weight: 800; margin: 0; text-wrap: balance; } .pg-lead { margin: 0; font-size: var(--t-lead); line-height: var(--lh-lead); color: var(--sc-ink-soft); max-width: 58ch; text-wrap: pretty; } .pg-h3 { margin: 0; font-size: var(--t-h); letter-spacing: -.01em; line-height: var(--lh-h); } .pg-muted { margin: 0; color: var(--sc-ink-soft); font-size: var(--t-klein); line-height: var(--lh-klein); } .pg-fine { margin: 0; font-size: var(--t-klein); color: var(--sc-ink-soft); } /* Muster-Widerrufsformular: 
 bricht nicht um, die Seite war am Handy 1054 px breit (21. September 2026). */
pre.form { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 68ch; font: inherit; font-size: var(--t-klein); line-height: var(--lh-klein); }
.pg-note { max-width: 46rem; margin: 0 auto; padding: clamp(2.5rem, 6vw, 5rem) var(--sc-gutter); }
.pg-actions { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-top: 8px; }
.pg-actions .btn { min-width: 160px; }
.pg-actions-stack { flex-direction: column; align-items: flex-start; }

/* Karten */
.pg-card { position: relative; display: flex; flex-direction: column; gap: 18px; padding: clamp(22px, 3vw, 36px); border-radius: var(--sc-r-lg); border: 1px solid transparent; background: linear-gradient(var(--sc-surface), var(--sc-surface)) padding-box, linear-gradient(135deg, rgba(79,140,255,0.45), rgba(46,196,182,0.18) 45%, rgba(255,255,255,0.05)) border-box; box-shadow: var(--sc-e2), var(--sc-edge); }
.pg-card-soft { background: linear-gradient(rgba(18,21,28,0.6), rgba(18,21,28,0.6)) padding-box, linear-gradient(135deg, rgba(79,140,255,0.22), rgba(255,255,255,0.05)) border-box; box-shadow: none; }
.pg-two { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.pg-two-wide { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
.pg-side { display: flex; flex-direction: column; gap: 18px; }
/* Konto in vier Karten (Stefans Wahl F9 A, 16. September 2026, gebaut 21. September): Ergebnisse, Tools, Premium, Konto; Loeschen abgesetzt. */
.konto-karten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.konto-karte { min-width: 0; }
.konto-loeschen { margin-top: var(--s-2); padding-top: var(--s-4); border-top: 1px dashed var(--sc-hairline-strong); display: flex; flex-direction: column; gap: var(--s-3); }
@media (max-width: 760px) { .konto-karten { grid-template-columns: minmax(0, 1fr); } }
.pg-form .buyform { width: 100%; margin-top: 0; }
.pg-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.pg-grid2 > div { display: flex; flex-direction: column; gap: var(--s-2); }
.pg-contact { gap: 10px; }
.pg-done { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-2) 0; }
.pg-done > svg { width: 44px; height: 44px; padding: 10px; border-radius: 50%; color: var(--gruen); background: rgba(46,196,182,0.14); border: 1px solid rgba(46,196,182,0.4); }
.pg-band { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 1rem; padding: clamp(20px, 3vw, 32px); border-radius: var(--sc-r-lg); border: 1px solid var(--sc-hairline); background: linear-gradient(120deg, rgba(79,140,255,0.10), rgba(46,196,182,0.05)); }
.pg-band-text { margin: 6px 0 0; font-size: var(--t-text); color: var(--sc-ink); }

/* Drei Schritte */
.pg-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.pg-steps li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; align-items: start; color: var(--sc-ink-soft); }
.pg-steps li > span:last-child { display: flex; flex-direction: column; gap: 2px; font-size: var(--t-klein); line-height: 1.45; }
.pg-steps b { color: var(--sc-ink); font-size: var(--t-text); }
.pg-step-no { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--sc-hairline-strong); font-size: 13px; font-weight: 800; color: var(--sc-ink-soft); }
.pg-step-no svg { width: 16px; height: 16px; }
.pg-steps li.on .pg-step-no { background: var(--grad); border-color: transparent; color: var(--paper); box-shadow: 0 0 0 5px rgba(79,140,255,0.14); }
.pg-steps li.on b { color: #fff; }
.pg-steps li.done .pg-step-no { background: rgba(46,196,182,0.16); border-color: rgba(46,196,182,0.5); color: var(--gruen); }

/* Kasse */
.pg-checkout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.pg-summary { position: sticky; top: 76px; }
.pg-summary-book { display: flex; justify-content: center; perspective: 1200px; padding: var(--s-2) 0 var(--s-3); }
.pg-summary .book3d-small { --b3w: clamp(150px, 14vw, 200px); }
/* Zwischen 620 und 1000 px liegen Kasse und Titelseite in einer Spalte: das Cover links, der Text daneben, statt eines
   kleinen Covers allein in einer 700 px breiten Karte (Fotoprüfung 21. September 2026). */
@media (min-width: 620px) and (max-width: 1000px) {
  .pg-summary, .pg-two > section:has(> .pg-summary-book) { display: grid; grid-template-columns: 200px minmax(0, 1fr); column-gap: var(--s-6); row-gap: 14px; align-items: start; }
  .pg-summary > .pg-summary-book, .pg-two > section > .pg-summary-book { grid-column: 1; grid-row: 1 / span 9; padding-top: 0; }
  .pg-summary > :not(.pg-summary-book), .pg-two > section:has(> .pg-summary-book) > :not(.pg-summary-book) { grid-column: 2; }
}
.pg-includes { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--sc-hairline); display: flex; flex-direction: column; gap: 10px; font-size: var(--t-klein); color: var(--sc-ink); }
.pg-includes li { display: flex; gap: var(--s-3); align-items: flex-start; }
.pg-includes svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--sc-accent); margin-top: 1px; } /* Haken an der ersten Zeile, nicht mittig bei drei Zeilen */
.pg-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 16px; border-top: 1px solid var(--sc-hairline-strong); font-weight: 700; }
.pg-total-amount { font-size: 2rem; font-weight: 800; letter-spacing: -.03em; background: linear-gradient(180deg, #fff, #bcd0ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pg-trust { list-style: none; margin: 4px 0 0; padding: 14px 0 0; border-top: 1px solid var(--sc-hairline); display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: var(--t-klein); color: var(--sc-ink-soft); }
.pg-trust li { display: flex; gap: var(--s-2); align-items: center; }
.pg-trust svg { width: 16px; height: 16px; color: var(--sc-accent); }
.pg-trust a { color: var(--sc-ink); text-decoration: underline; text-underline-offset: .2em; }
.ed-buy-cta { display: flex; flex-direction: column; gap: var(--s-3); width: min(420px, 100%); }
.ed-buy-cta .btn { width: 100%; height: 56px; }
.ed-buy-cta .fine { margin: 0; font-size: 12px; color: var(--sc-ink-soft); text-align: center; }

/* Support */
.pg-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.pg-quick-card { display: flex; flex-direction: column; gap: var(--s-2); padding: 22px; border-radius: var(--sc-r-lg); border: 1px solid transparent; background: linear-gradient(var(--sc-surface), var(--sc-surface)) padding-box, linear-gradient(135deg, rgba(79,140,255,0.4), rgba(46,196,182,0.15) 50%, rgba(255,255,255,0.05)) border-box; color: var(--sc-ink); text-decoration: none; transition: transform var(--sc-d-base) var(--sc-ease-out), box-shadow var(--sc-d-base) var(--sc-ease-out); }
.pg-quick-card:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(0,0,0,0.4); text-decoration: none; }
.pg-quick-card b { font-size: var(--t-text); }
.pg-quick-card > span:last-child { font-size: var(--t-klein); line-height: 1.45; color: var(--sc-ink-soft); }
.pg-ico { display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: var(--r-feld); background: rgba(79,140,255,0.1); border: 1px solid rgba(79,140,255,0.25); color: var(--sc-accent); margin-bottom: 6px; }
.pg-ico svg { width: 22px; height: 22px; }
.pg-faq { display: flex; flex-direction: column; gap: 10px; }
body.pg .ed-questions { border-top: 1px solid var(--sc-hairline); }
.q-text-sm { font-size: var(--sc-t-lg); }
body.pg .q-item summary { padding: 18px 0; }
body.pg .q-body { padding-bottom: 22px; }

/* Rechtstexte und schlichte Inhaltsseiten */
body.pg main:not(.full) { max-width: 50rem; padding-top: clamp(2.5rem, 6vw, 4.5rem); }
body.pg main:not(.full) h1 { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: var(--sc-track-tight); margin-bottom: 1.2rem; }
body.pg main:not(.full) h2 { font-size: 1.3rem; margin-top: 2.2rem; }
body.pg main:not(.full) h3 { font-size: 1.05rem; margin-top: 1.4rem; }
body.pg main:not(.full) p { color: rgba(236,238,243,0.82); line-height: 1.65; }
body.pg main:not(.full) p.muted { color: var(--sc-ink-soft); }
body.pg main:not(.full) a { text-decoration: underline; text-underline-offset: .2em; }

/* Admin: sachlich, dunkel */
.pg-admin { max-width: var(--sc-maxw); }
.pg-admin h1 { font-size: 2rem; }
.pg-admin .table td, .pg-admin .table th { font-size: 13px; }
.pg-admin .actions button { font-size: 12px; padding: .3rem .6rem; }
.pg-admin code { background: rgba(255,255,255,0.08); padding: 1px 6px; border-radius: var(--r-klein); font-size: .9em; }

/* Angekuendigte Titel im Shop: eine Zeile je Titel, Stand links, Preisrahmen rechts. */
.shop-plan { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; }
.shop-plan-row { display: grid; grid-template-columns: 92px 1fr auto; gap: var(--s-2) var(--s-4); align-items: baseline; padding: 14px 0; border-top: 1px solid var(--sc-hairline); }
.shop-plan-row:first-child { border-top: 0; }
.shop-plan-stand { font-size: var(--t-etikett); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--sc-r-pill); text-align: center; white-space: nowrap; }
.shop-plan-inArbeit { color: var(--sc-accent-ink); background: var(--sc-accent); }
.shop-plan-geplant { color: var(--sc-ink-soft); border: 1px solid var(--sc-hairline); }
.shop-plan-text { display: flex; flex-direction: column; gap: 3px; }
.shop-plan-text a { text-decoration: none; }
.shop-plan-text a:hover b { text-decoration: underline; }
.shop-plan-kurz { font-size: var(--t-klein); color: var(--sc-ink-soft); line-height: 1.5; max-width: 62ch; }
.shop-plan-preis { font-size: var(--t-klein); color: var(--sc-ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.shop-plan-fein { margin: 14px 0 0; font-size: var(--t-klein); color: var(--sc-ink-soft); max-width: 70ch; }

/* Reiter Werkzeuge: Karten, Fragebogen, Ergebnis. Alles im Raster der uebrigen Unterseiten. */
.wz-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(16px, 2.5vw, 28px); margin-top: 1rem; }
.wz-card { display: flex; flex-direction: column; gap: var(--s-3); }
.wz-card-soon { opacity: .72; }
.wz-soon { margin: 0; font-size: var(--t-klein); color: var(--sc-ink-soft); letter-spacing: .1em; text-transform: uppercase; }
.check-form { display: flex; flex-direction: column; gap: clamp(20px, 3vw, 30px); }
.check-q { border: 0; margin: 0; padding: 0; }
.check-q legend { display: flex; align-items: baseline; gap: 10px; font-size: var(--sc-t-lg); font-weight: 700; line-height: 1.25; padding: 0; margin-bottom: 6px; }
.check-no { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; background: rgba(79,140,255,0.16); color: var(--sc-accent); font-size: 13px; font-weight: 800; }
.check-help { margin: 0 0 10px 36px; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.check-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--s-2); margin-left: 36px; }
.check-opt { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--sc-hairline); border-radius: var(--sc-r-md); cursor: pointer; font-size: var(--sc-t-sm); line-height: 1.3; transition: border-color var(--sc-d-fast) var(--sc-ease-out), background var(--sc-d-fast) var(--sc-ease-out); }
.check-opt:hover { border-color: rgba(79,140,255,0.5); }
.check-opt input { accent-color: var(--sc-accent); width: 17px; height: 17px; flex-shrink: 0; }
.check-opt:has(input:checked) { border-color: var(--sc-accent); background: rgba(79,140,255,0.12); }
.check-hints { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.check-hints li { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--sc-t-sm); line-height: 1.5; color: var(--sc-ink); }
.check-hints svg { width: 19px; height: 19px; flex-shrink: 0; margin-top: 2px; color: var(--sc-accent); }
.check-grund { display: flex; gap: var(--s-3); align-items: flex-start; margin: 4px 0 0; font-size: var(--sc-t-sm); line-height: 1.5; color: var(--sc-ink-soft); }
.check-grund svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; color: var(--sc-accent); }
.check-ausblick { list-style: none; margin: 10px 0 0; padding: var(--s-3) 0 0; border-top: 1px solid var(--sc-hairline); display: flex; flex-direction: column; gap: 10px; font-size: var(--sc-t-sm); }
.check-ausblick li { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 2px 10px; }
.check-ausblick .range-dot { grid-row: 1; align-self: center; }
.check-ausblick b { grid-row: 1; }
.check-ausblick .check-wann { grid-row: 1; justify-self: end; }
.check-ausblick .check-linie { grid-column: 2 / -1; grid-row: 2; }
.check-wann { font-size: var(--t-etikett); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--sc-ink-soft); }
.check-linie { font-size: var(--t-klein); color: var(--sc-ink-soft); }
.pg-h4 { margin: 18px 0 0; font-size: var(--t-h); letter-spacing: -.01em; }

/* Die Ampel: drei Lichter, eines leuchtet. Kein Bild, damit sie in beiden Themen stimmt. */
.ampel { display: inline-flex; align-self: flex-start; width: max-content; flex-direction: column; gap: 10px; padding: var(--s-3); border-radius: 16px; border: 1px solid var(--sc-hairline); background: rgba(0,0,0,.16); margin-bottom: 18px; }
.ampel-licht { width: 34px; height: 34px; border-radius: 50%; background: var(--sc-hairline); opacity: .25; }
.ampel-rot .ampel-rot-licht { background: #e5484d; opacity: 1; box-shadow: 0 0 18px rgba(229,72,77,.6); }
.ampel-gelb .ampel-gelb-licht { background: #f2b544; opacity: 1; box-shadow: 0 0 18px rgba(242,181,68,.6); }
.ampel-gruen .ampel-gruen-licht { background: var(--gruen); opacity: 1; box-shadow: 0 0 18px rgba(46,196,182,.6); }

/* Newsletter: Band unter den Seiten, Formular in einer Zeile. */
.pg-band-form { align-items: center; }
.nl-inline { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.nl-inline input[type="email"] { min-width: 230px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (max-width: 960px) {
  .pg-checkout { grid-template-columns: minmax(0, 1fr); }
  .pg-summary { position: static; order: -1; }
  .pg-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-two, .pg-two-wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .pg-two, .pg-two-wide { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .pg-quick { grid-template-columns: minmax(0, 1fr); }
  .check-opts, .check-help { margin-left: 0; }
  .shop-plan-row { grid-template-columns: minmax(0, 1fr); }
  .shop-plan-stand { justify-self: start; }
  .nl-inline, .nl-inline input[type="email"], .nl-inline .btn { width: 100%; }
  .pg-grid2 { grid-template-columns: minmax(0, 1fr); }
  .pg-actions .btn, .shop-actions .btn { width: 100%; }
}


/* ===================================================================
   V3 "Ruhe" (7. September 2026, Stefan: Note 3, drei Befunde bei 1512 px). Massstab: shop/planung/12-designsprache.md.
   Grundlagen fuer alle Seiten: Leiste mit Grund, Knopfkontrast, Fokusring, Zeilenlaenge, keine Bewegung.
   Die Bloecke stehen am Ende, damit sie die V2-Regeln oben ueberschreiben, ohne sie umzuschreiben.
   =================================================================== */
/* Schriftstufen, Knopffarben und Ampelfarben stehen seit Phase 2 in :root (oben). */
/* Bewegung: nur Farbe und Rahmen bei Hover und Fokus, hoechstens 240 ms; mit reduzierter Bewegung gar keine. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0ms !important; scroll-behavior: auto !important; }
}
/* Leiste: auf jeder Seite gleich, mit Grund, sticky. Die schwebende Leiste der Startseite liess Text durch die Reiter laufen (Befund 2). */
.topbar, body.ed .topbar { position: sticky; top: 0; height: 56px; padding: 0 var(--sc-gutter); background: var(--leiste); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--sc-hairline); }
body.ed .topbar { padding-right: calc(var(--sc-gutter) + 56px); }
.topbar-nav .topbar-cta, .topbar-nav a { white-space: nowrap; }
/* Konto als Personensymbol rechts neben der Taste (Stefan, 2. Oktober 2026, Nr. 156 B). Das Wort steht fuer Vorleser
   immer dabei und wird nur im Handy-Menue sichtbar; am Desktop zeigt es der Tooltip. Fokusring wie ueberall. */
.topbar-nav .topbar-konto { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--sc-hairline-strong); color: var(--sc-ink-soft); padding: 0; margin-left: 2px; }
.topbar-nav .topbar-konto:hover, .topbar-nav .topbar-konto.on { color: var(--sc-ink); border-color: var(--sc-ink-soft); }
.topbar-nav .topbar-konto::after { display: none; }
.topbar-konto-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 760px) {
  .topbar-nav .topbar-konto { width: auto; height: auto; border-radius: 0; border: 0; border-bottom: 1px solid var(--sc-hairline); justify-content: flex-start; gap: 10px; margin: 0; padding: 14px 0; font-size: 15px; color: var(--sc-ink); }
  .topbar-konto-text { position: static; width: auto; height: auto; clip: auto; }
}
/* Knoepfe: Flaeche statt Licht, Weiss auf #2f6be6 = 4.8:1 (vorher 3.2:1). Kein Versatz beim Hover. */
body.ed .btn-accent, body.pg .btn-accent, .topbar-nav .topbar-cta { background: var(--btn); box-shadow: none; color: #fff; transition: background-color var(--sc-d-base) var(--sc-ease-out); }
body.ed .btn-accent:hover, body.pg .btn-accent:hover, .topbar-nav .topbar-cta:hover { background: var(--btn-hover); transform: none; box-shadow: none; color: #fff; }
body.ed .btn-accent:active, body.pg .btn-accent:active { background: var(--btn-active); }
body.ed .btn-ghost, body.pg .btn-ghost { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-color: var(--feld-rahmen); transition: border-color var(--sc-d-base) var(--sc-ease-out); }
body.ed .btn-ghost:hover, body.pg .btn-ghost:hover { border-color: var(--sc-ink); }
.btn { height: 48px; padding: 0 var(--s-6); }
@media (max-width: 640px) { .pg-actions .btn, .check-form .btn, .buyform .btn, .stack .btn { width: 100%; } }
/* Eingabefelder: Rahmen 3.1:1 statt 1.9:1, Hoehe 48. */
body.pg input[type="text"], body.pg input[type="email"], body.pg select, body.pg textarea { border-color: var(--feld-rahmen); min-height: 48px; }
/* Fokus: ueberall sichtbar, auch bei Optionskarten mit verstecktem Radio. */
body.ed a:focus-visible, body.pg a:focus-visible, body.ed button:focus-visible, body.pg button:focus-visible, body.pg input:focus-visible, body.pg select:focus-visible, body.pg textarea:focus-visible, .nav-burger:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
.nav-toggle:focus-visible ~ .nav-burger { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
.check-opt:has(input:focus-visible), .paths label:has(input:focus-visible) { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
/* Zeilenlaenge: Absaetze hoechstens 68 Zeichen, unabhaengig von der Kartenbreite (Befund 4). */
main:not(.full) { max-width: 42rem; }
.pg-card p, .pg-card li, .pg-card legend, .pg-lead, .pg-muted, .pg-fine, .check-help, .pg-band-text, .pg-note p, .pg-faq p, .brand-sub, .ed-lede, .ed-sub, .notice { max-width: 68ch; }
.pg-h1, .pg-h3, .pg-h4, .ed-h1, .ed-h2 { text-wrap: balance; }
.pg-lead, .pg-muted, .pg-card p { text-wrap: pretty; }
/* Karten: Text oben, Knoepfe auf einer Grundlinie (Designsprache Abschnitt 5). */
.pg-card, .wz-card, .range-card, .shop-card { align-self: stretch; }
.pg-card > .pg-actions, .wz-card > .pg-actions { margin-top: auto; padding-top: 8px; }
/* Konto-Karten und Kasse: die Karte endet mit ihrem Inhalt, statt sich an der hoeheren Nachbarkarte zu strecken (Loch von 115 px
   in der Premium-Karte, 190 px in der Kasse; Fotoprüfung 21. September 2026). */
.konto-karten > .pg-card, .pg-checkout > .pg-card { align-self: start; }
.konto-karten + .pg-fine { margin-top: var(--s-4); }
.pg-two, .wz-grid, .pg-quick { align-items: stretch; }
@media (min-width: 1001px) { .nav-toggle { display: none; } } /* ohne Burger auch kein verstecktes Kaestchen im Zugriffsbaum */
/* Leiste auf dem Tablet: bis 1000 px das Menue, damit die Reiter nicht wegfallen (Befund 13). */
@media (max-width: 1000px) {
  .topbar-solid, .topbar { padding-right: var(--sc-gutter); }
  .nav-burger { display: flex; margin-left: auto; }
  .topbar-nav { position: absolute; left: 0; right: 0; top: 100%; height: calc(100vh - 56px); height: calc(100dvh - 56px); z-index: var(--sc-z-chrome); flex-direction: column; align-items: stretch; gap: 0; padding: 16px var(--sc-gutter) 32px; background: #0b0d12; border-bottom: 1px solid var(--sc-hairline); transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity var(--sc-d-base) var(--sc-ease-out); overflow: auto; }
  .topbar-nav a { display: block !important; padding: var(--s-4) 0; border-bottom: 1px solid var(--sc-hairline); color: var(--sc-ink); }
  .topbar-nav a:not(.topbar-cta)::after { display: none; }
  .topbar-nav .topbar-cta { margin: 20px 0 0; text-align: center; padding: 14px 18px; border-bottom: 0; }
  .topbar-nav .langswitch { align-self: flex-start; margin-top: 18px; }
  .topbar-nav .langswitch a, .topbar-nav .langswitch span { display: inline-block !important; padding: 8px 14px; border-bottom: 0; font-size: 14px; }
  .nav-toggle:checked ~ .topbar-nav { transform: none; opacity: 1; pointer-events: auto; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* --- V3 Startseite (Befunde 1 und 3): Abschnitte so hoch wie ihr Inhalt, rechte Spalte des Markenakts stabil. --- */
.ed-brand { min-height: 0; justify-content: flex-start; padding: clamp(3rem, 6vw, 5rem) 0 var(--sc-section); }
.brand-grid { align-items: start; }
.ed-title { min-height: 0; }
/* "Im Aufbau" und "Kostenlos": Pille links, Text rechts, der Link bricht nicht mehr mitten im Namen. */
.range-more { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; align-items: start; font-size: var(--t-klein); line-height: var(--lh-klein); }
.range-more b { white-space: nowrap; margin-top: 2px; justify-self: start; }
.idx-foot { max-width: 68ch; }
.range-more a { white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; } /* Link im Fliesstext: Unterstrich statt Farbe allein */
.range-all { white-space: nowrap; }
.range-card:hover, .paths label:hover { transform: none; }
.paths-note, .idx-note, .ed-paths p { max-width: 68ch; }
/* Buchruecken nur, wo er Platz hat und nichts verdeckt. */
@media (max-width: 1100px) { .spine { display: none; } body.ed .topbar { padding-right: var(--sc-gutter); } }
@media (max-width: 760px) { .range-more { grid-template-columns: minmax(0, 1fr); } .range-more a { white-space: normal; } }

/* --- V3 Werkzeuge und Fragebogen (Befunde 5 bis 8): gleich hohe Karten, Fortschritt, Fokus, Ergebnis nach Entwurf B. --- */
.wz-grid { align-items: stretch; }
.wz-card { justify-content: flex-start; }
.wz-card .pg-muted { flex: 0 0 auto; }
.wz-card .pg-actions, .wz-card .wz-soon { margin-top: auto; }
.check-form { max-width: 56rem; gap: var(--s-8); padding: clamp(24px, 3vw, 32px); }
.check-q legend { display: flex; flex-direction: column; gap: 6px; font-size: var(--t-h); line-height: var(--lh-h); font-weight: 700; margin-bottom: 12px; max-width: 68ch; }
.check-step { font-size: var(--t-etikett); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sc-accent); }
.check-help { margin: 0 0 12px; max-width: 68ch; }
.check-opts { margin-left: 0; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-2); }
.check-opt { min-height: 48px; padding: var(--s-3) var(--s-4); font-size: var(--t-text); line-height: 1.35; border-color: var(--feld-rahmen); transition: border-color var(--sc-d-base) var(--sc-ease-out), background-color var(--sc-d-base) var(--sc-ease-out); }
.check-opt:hover { border-color: var(--sc-accent); }
.check-opt:has(input:checked) { border-color: var(--sc-accent); background: rgba(79,140,255,0.12); }
.check-opt input { width: 18px; height: 18px; }
@media (max-width: 640px) { .check-opts { grid-template-columns: minmax(0, 1fr); } }
/* Ergebnis (Entwurf B, Stefan 7. September 2026): Karte mit farbiger Kante, drei Lichter waagrecht, das aktive mit Symbol. */
.ampel-erg { --f: var(--sc-accent); overflow: hidden; }
.ampel-erg::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--f); }
.ampel-erg.ampel-rot { --f: var(--rot); } .ampel-erg.ampel-gelb { --f: var(--gelb); } .ampel-erg.ampel-gruen { --f: var(--gruen); }
.ampel-kopf { display: flex; align-items: flex-start; gap: var(--s-4); flex-wrap: wrap; }
.ampel-erg .ampel { display: inline-flex; flex-direction: row; gap: var(--s-2); padding: var(--s-2); margin: 4px 0 0; border-radius: var(--r-pille); background: rgba(0,0,0,.28); border: 1px solid var(--sc-hairline); width: auto; }
.ampel-erg .ampel-licht { width: 28px; height: 28px; opacity: 1; background: rgba(255,255,255,.08); display: grid; place-items: center; box-shadow: none; }
.ampel-erg .ampel-licht.on { background: var(--f); }
.ampel-erg .ampel-licht svg { width: 18px; height: 18px; color: var(--paper); }
.ampel-wort { margin: 0; flex: 1 1 260px; font-size: var(--t-titel); line-height: 1; font-weight: 800; letter-spacing: -.02em; }
.ampel-wort small { display: block; margin-top: 8px; font-size: var(--t-text); line-height: var(--lh-text); font-weight: 600; color: var(--sc-ink-soft); letter-spacing: 0; max-width: 60ch; }
.ampel-erg .pg-h4 { margin: 0; font-size: var(--t-etikett); letter-spacing: .14em; text-transform: uppercase; color: var(--sc-ink-soft); }
.ampel-liste ul { list-style: none; margin: 8px 0 12px; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: var(--t-klein); line-height: var(--lh-klein); }
.ampel-liste li { padding-left: 16px; border-left: 2px solid var(--f); max-width: 68ch; }
.ampel-liste b { display: block; }
.ampel-jetzt { background: rgba(255,255,255,.04); border: 1px solid var(--sc-hairline); border-radius: var(--sc-r-md); padding: 16px 20px; display: flex; flex-direction: column; gap: var(--s-2); }
.ampel-jetzt .pg-h4 { color: var(--f); }
.ampel-jetzt ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: var(--s-2); font-size: var(--t-klein); line-height: var(--lh-klein); }
.ampel-jetzt li { max-width: 60ch; }

/* --- V3 Unterseiten (Befunde 4, 12): Seitenleisten oben ausgerichtet, Links brechen nicht im Namen, Kleindruck lesbar. --- */
.pg-two > aside { align-self: start; }
.pg-card a, .pg-muted a, .pg-fine a { white-space: nowrap; }
/* Ausnahme: Adressen und Fundstellen in den Quellenlisten sind laenger als eine Handyzeile; ohne Umbruch waren die
   Ergebnisseiten am Handy bis zu 580 px breit (21. September 2026). */
.pg-card a[href^="http"], .n2-quellen a, .n2-quelle a, .n2-sektor a { white-space: normal; overflow-wrap: anywhere; }
.pg-fine { font-size: var(--t-klein); line-height: var(--lh-klein); }
body.pg main:not(.full) p, body.pg main:not(.full) li { max-width: 68ch; }
.reader-lead, .reader-h1, .reader .lead, .shop-line-head p, .sample-cta p { max-width: 68ch; }

/* --- Nachtrag 7. September 2026, abends (Stefans Durchsicht auf 2000 px Breite) --- */
/* Der Grund der Unterseiten fuellt die ganze Breite; vorher endete das Licht an der Inhaltsbreite und liess seitlich einen schwarzen Rand. */
.pg-wrap::before { display: none; }
body.pg main { position: relative; }
body.pg main::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 640px; pointer-events: none; z-index: -1; background: radial-gradient(50% 60% at 20% 0%, rgba(79,140,255,0.16), rgba(79,140,255,0) 70%), radial-gradient(35% 45% at 85% 10%, rgba(46,196,182,0.10), rgba(46,196,182,0) 70%);; }
/* Aurora und Boden der Startseite stehen still: kein Blinken, aber der Grund, den Stefan wollte. */
.aurora i, .floor { animation: none; }
/* Kleinere Stufen auf der Startseite, damit ein Kapitel auf einen Bildschirm passt (1037 px hoch). */
.ed-h1 { font-size: clamp(2.6rem, 4.8vw, 4.6rem); }
.ed-h2 { font-size: clamp(1.8rem, 2.8vw, 2.6rem); }
.ed-h2-big { font-size: clamp(1.8rem, 2.8vw, 2.6rem); }
.ed-lede { font-size: var(--t-lead); }
/* Stufe Text statt Lead (16 bis 18 px): die Listen unter "Fuer wen" wirkten mit 22 px aufgeblasen (externe Pruefung, 16. September 2026). */
body.ed .check-list li, body.ed .cross-list li { font-size: var(--t-text); line-height: var(--lh-text); }
.ed-listblock { gap: var(--s-4); }
/* Die Startseite ist kein Flex-Koerper: mit display:flex (aus dem Unterseiten-Block) dehnte der breite Zug der Teile die
   ganze Seite auf seine Breite (3052 px bei 2000 px Fenster) -- Inhalt nach rechts verschoben, Leiste ohne Reiter. */
body.ed { display: block; min-height: 0; }
/* Auf der Startseite bleibt die Leiste fest (fixed) wie in V2, nur jetzt mit Grund: sticky liegt dort in der Hand der
   Engine und rutscht beim Scrollen mit. Der Markenakt beginnt unter der Leiste. */
body.ed .topbar { position: fixed; }
.ed-brand { padding-top: calc(56px + clamp(2rem, 5vw, 4.5rem)); }

/* Marke mittig und groesser, der Schild bleibt links vom Wort (Stefan, 7. September, abends). */
.brand-head { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-4); margin-bottom: clamp(40px, 5vw, 72px); }
.brand-head .brand-mark { justify-content: center; gap: clamp(18px, 2vw, 32px); }
.brand-head .brand-mark svg { width: clamp(56px, 6.5vw, 104px); }
.brand-head .brand-word { font-size: clamp(2.8rem, 7.2vw, 7rem); }
.brand-head .brand-tag { font-size: var(--t-klein); letter-spacing: .32em; }

/* --- Kapitel I als Leiter (Stefan, 7. September 2026, abends: Variante I-B) --- */
.leiter { list-style: none; margin: 0; padding: 0; position: relative; }
.leiter::before { content: ""; position: absolute; left: 19px; top: 20px; bottom: 28px; width: 2px; background: linear-gradient(var(--sc-accent), var(--sc-accent-2)); }
.leiter-step { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 18px; padding: 0 0 var(--s-8); }
.leiter-step:last-child { padding-bottom: 0; }
.leiter-dot { width: 40px; height: 40px; border-radius: 50%; background: var(--sc-surface); border: 2px solid var(--sc-accent); display: grid; place-items: center; font-size: 12px; font-weight: 800; color: var(--sc-accent); position: relative; z-index: 1; }
.leiter-q { margin: 6px 0 8px; font-size: var(--t-h); line-height: var(--lh-h); font-weight: 700; letter-spacing: -.01em; max-width: 52ch; text-wrap: balance; }
.leiter .q-body { display: flex; flex-direction: column; gap: var(--s-2); }
.leiter .q-answer, .leiter .q-how { max-width: 60ch; }
/* Die Verweise je Frage sind ausklappbar (Stefans Wahl F1 A, 16. September 2026): die vier Fragen und ihre Antwort bleiben
   sichtbar, die 14 Fundstellen stehen in einem 
 je Frage. Beim Drucken sind alle offen (site.js, beforeprint). */
.q-details { margin-top: var(--s-1); }
.q-details > summary { list-style: none; cursor: pointer; display: block; position: relative; padding: 6px 0 6px 20px; line-height: 1.5; }
.q-details > summary::-webkit-details-marker { display: none; }
.q-details > summary::before { content: ""; position: absolute; left: 3px; top: 11px; width: 8px; height: 8px; border-right: 2px solid var(--sc-accent); border-bottom: 2px solid var(--sc-accent); transform: rotate(-45deg); transition: transform var(--sc-d-base) var(--sc-ease-out); }
.q-details[open] > summary::before { top: 9px; transform: rotate(45deg); }
.q-details > summary:hover { color: var(--sc-ink); }
.q-details > summary:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; border-radius: 4px; }
.q-details .q-n { font-weight: 600; letter-spacing: .04em; text-transform: none; color: var(--sc-ink-soft); }
.q-details .q-chapters { padding: 6px 0 4px 18px; }
@media print { .q-details::details-content { display: block; content-visibility: visible; } .q-details > summary::before { display: none; } }
@media (prefers-reduced-motion: reduce) { .q-details > summary::before { transition: none; } }
@media (max-width: 640px) { .leiter::before { left: 15px; } .leiter-step { grid-template-columns: 32px 1fr; gap: var(--s-3); } .leiter-dot { width: 32px; height: 32px; font-size: 11px; } }

/* --- Kapitel III als Regal (Variante III-C): Buchobjekte im Zug, darunter die Teile des gewaehlten Bands --- */
.regal-stage { flex-direction: column; align-items: stretch; justify-content: center; gap: var(--s-6); padding: 64px 0 40px; }
.regal-head { display: flex; flex-direction: column; gap: var(--s-3); }
.regal-head .ed-lede { max-width: 60ch; }
.rail.regal { align-items: flex-end; gap: clamp(14px, 1.6vw, 24px); padding-top: 8px; padding-bottom: 8px; }
.regal-buch { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: var(--s-3); text-decoration: none; color: var(--sc-ink); width: clamp(150px, 13vw, 200px); }
.regal-buch .book3d { width: 100%; transform: rotateY(-10deg) rotateX(1deg); font-size: clamp(5.2px, 0.62vw, 8px); transition: transform var(--sc-d-base) var(--sc-ease-out); }
.regal-buch:hover .book3d { transform: rotateY(-4deg); }
.regal-buch:hover { text-decoration: none; }
.regal-buch.on { width: clamp(190px, 16vw, 250px); }
.regal-buch.on .book3d { font-size: clamp(6.5px, 0.78vw, 10px); }
.regal-buch.on .book3d-cover { box-shadow: 0 0 0 1px var(--sc-accent), 0 30px 60px rgba(0,0,0,0.6); }
.regal-soon .book3d { opacity: .62; }
.regal-soon .book3d-cover { background: linear-gradient(180deg, #10131a, #0b0e14 70%, #090b10); box-shadow: 0 16px 36px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.08) inset; }
.regal-soon .b3-bar { border-top-color: var(--sc-hairline-strong); }
.regal-inArbeit .book3d { opacity: .8; }
.regal-inArbeit .b3-bar { border-top-color: var(--sc-accent-2); }
.regal-inArbeit .b3-bar b { color: var(--sc-accent-2); }
.regal-stand { font-size: var(--t-etikett); letter-spacing: .1em; text-transform: uppercase; color: var(--sc-ink-soft); text-align: center; line-height: 1.3; }
.regal-stand b { color: var(--sc-ink); }
.regal-buch.on .regal-stand b { color: var(--sc-accent); }
.regal-alle { justify-content: flex-end; gap: var(--s-4); width: clamp(180px, 15vw, 240px); align-self: center; }
.regal-alle-text { font-size: var(--t-klein); color: var(--sc-ink-soft); text-align: center; line-height: 1.4; }
.regal-alle-text b { display: block; font-size: var(--t-titel); color: var(--sc-ink); font-weight: 800; letter-spacing: -.02em; }
.regal-alle .btn { height: 40px; padding: 0 18px; font-size: 14px; }
.regal-teile { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); border-top: 1px solid var(--sc-hairline); padding-top: 24px; }
.regal-teil { display: flex; flex-direction: column; gap: var(--s-2); }
.regal-teil-h { margin: 0; font-size: var(--t-h); line-height: var(--lh-h); font-weight: 800; letter-spacing: -.01em; }
.regal-teil .rail-list { margin: 4px 0 0; padding-top: 10px; }
@media (max-width: 1000px) { .regal-teile { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .regal-teile { grid-template-columns: minmax(0, 1fr); } .regal-stage { padding-top: 40px; } }
/* Regal als Slider (Stefan, 9. September 2026): Buecher rasten mittig ein, der gewaehlte Titel waechst per Transform
   (kein Layoutsprung beim Scrollen), erhaeltliche Titel tragen den Akzentring. Bewegung nur als Browser-Scroll. */
.regal-slider { position: relative; }
.rail.regal { width: auto; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; padding: clamp(56px, 6vw, 80px) calc(50% - clamp(75px, 6.5vw, 100px)) var(--s-3); }
.rail.regal::-webkit-scrollbar { display: none; }
.regal-buch { scroll-snap-align: center; scroll-snap-stop: always; }
.regal-buch, .regal-buch.on { width: clamp(150px, 13vw, 200px); }
.regal-buch .book3d, .regal-buch.on .book3d { font-size: clamp(5.2px, 0.62vw, 8px); transform-origin: 50% 100%; }
.regal-buch.on .book3d { transform: rotateY(-4deg) scale(1.22); }
.regal-buch.on:hover .book3d { transform: rotateY(-2deg) scale(1.22); }
.regal-buch.on .regal-stand { margin-top: var(--s-2); }
.regal-erhaeltlich .book3d-cover { box-shadow: 0 0 0 1px var(--sc-accent), 0 20px 44px rgba(0,0,0,0.55); }
.regal-erhaeltlich .regal-stand b { color: var(--sc-accent); }
.regal-buch.on .book3d-cover { box-shadow: 0 0 0 1px var(--sc-accent), 0 30px 60px rgba(0,0,0,0.65); }
.regal-buch:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 6px; border-radius: var(--r-klein); }
.regal-nav { position: absolute; top: 50%; z-index: 2; width: 44px; height: 44px; margin-top: -34px; border-radius: var(--r-pille); border: 1px solid var(--line); background: var(--karte); color: var(--ink); font-size: 26px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--sc-d-base) var(--sc-ease-out), border-color var(--sc-d-base) var(--sc-ease-out); }
.regal-nav:hover { background: var(--leiste); border-color: var(--line-dark); }
.regal-nav:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
.regal-prev { left: max(8px, calc(var(--sc-gutter) - 12px)); }
.regal-next { right: max(8px, calc(var(--sc-gutter) - 12px)); }
.regal-hinweis { max-width: 60ch; }
.regal-infos { border-top: 1px solid var(--sc-hairline); padding-top: 24px; }
/* Nur der Block des gewaehlten Titels ist sichtbar. Ohne diese Regel gewinnen display: grid und display: flex
   der Bloecke gegen das hidden-Attribut, und alle Bloecke stehen untereinander (Stefan, 10. September 2026). */
.regal-info[hidden] { display: none; }
.regal-info.regal-teile { border-top: 0; padding-top: 0; }
.regal-info .regal-weg { grid-column: 1 / -1; margin: var(--s-2) 0 0; }
.regal-kurz { display: flex; flex-direction: column; gap: var(--s-2); max-width: 60ch; }
.regal-kurz-text { margin: 0; font-size: var(--t-text); line-height: var(--lh-text); color: var(--sc-ink-soft); }
@media (min-width: 1181px) { .regal-slider { margin-right: 56px; } }
@media (max-width: 640px) { .regal-nav { display: none; } .rail.regal { padding-left: calc(50% - 75px); padding-right: calc(50% - 75px); } }
@media (prefers-reduced-motion: reduce) { .rail.regal { scroll-behavior: auto; } .regal-buch .book3d, .regal-nav { transition: none; } }
/* Regal: Kopf buendig mit dem Raster, alles passt in eine gepinnte Buehne von 900 px Hoehe. */
.regal-head .ed-inter, .regal-head .ed-inter-inline { padding-left: 0; padding-right: 0; margin-left: 0; }
.regal-stage { padding: var(--s-12) 0 var(--s-6); gap: var(--s-4); }
.regal-buch { width: clamp(140px, 11.5vw, 180px); }
.regal-buch.on { width: clamp(170px, 14vw, 220px); }
.regal-teile { padding-top: 16px; }
.regal-teil .rail-list { font-size: 12.5px; gap: 3px; padding-top: 8px; }
.regal-teil-h { font-size: var(--t-text); }
@media (max-height: 820px) { .regal-teil .rail-list { display: none; } .regal-head .ed-lede { display: none; } }
.regal-head, .regal-teile { width: 100%; } /* im Flex-Stapel der Buehne sonst nur so breit wie der Text */
/* Leiter kompakt (Stefan: "unuebersichtlich"): Frage eine Stufe kleiner, Antwort ein Satz, Abschnitte als eine Zeile je Abschnitt
   mit Nummer, Titel und Marke -- ohne Kurzbeschreibung, ohne Umbruch der Marke. */
.leiter-q { font-size: var(--t-lead); line-height: 1.3; margin: 8px 0 6px; }
.leiter-step { padding-bottom: 24px; }
.leiter .q-body { gap: 6px; }
.leiter .q-answer { font-size: var(--t-klein); line-height: var(--lh-klein); color: var(--sc-ink-soft); }
.leiter .q-how { margin-top: 4px; }
.leiter .q-chapters { gap: 3px; }
.leiter .q-chapters li a, .leiter .q-chapters li > span { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 0 var(--s-2); align-items: baseline; flex-wrap: nowrap; }
.leiter .q-chapters b { width: auto; }
.leiter .q-chapters .q-t { min-width: 0; }
.leiter .q-chapters em { white-space: nowrap; }
.ed-g1 .ed-spread { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
/* Regal: nichts wird abgeschnitten -- Buecher und Listen skalieren mit der Fensterhoehe, die Buehne darf vertikal wachsen. */
.regal-buch { width: clamp(120px, min(11.5vw, 20vh), 180px); }
.regal-buch.on { width: clamp(150px, min(14vw, 24vh), 220px); }
.regal-teil .rail-list { font-size: 12px; line-height: 1.25; gap: 2px; }
.regal-teil .rail-list li span { min-width: 30px; }
.regal-stage { min-height: 100vh; min-height: 100svh; height: auto; overflow: visible; overflow-x: clip; }
@media (max-height: 760px) { .regal-teil .rail-list { display: none; } .regal-head .ed-lede { display: none; } }
@media (min-height: 761px) { .regal-teil .rail-list { display: flex; } .regal-head .ed-lede { display: block; } }

/* --- Tools, Stefans Wahl vom 7. September 2026, abends: Bedarfscheck T-C (Tabelle mit Live-Ergebnis), Ergebnis E-A (Kacheln), Ampel A-B (Schieber) --- */
.tc { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.tc-fragen { display: flex; flex-direction: column; }
.tc-q { border: 0; margin: 0; padding: 20px 0; border-top: 1px solid var(--sc-hairline); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
.tc-q:first-child { border-top: 0; padding-top: 0; }
.tc-q legend { display: flex; flex-direction: column; gap: var(--s-1); padding: 0; margin: 0; font-size: var(--t-text); font-weight: 700; line-height: var(--lh-text); max-width: 68ch; float: left; width: 100%; }
.tc-help { display: block; font-size: var(--t-klein); font-weight: 400; color: var(--sc-ink-soft); margin: 0; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; clear: both; }
.seg-opt { position: relative; }
.seg-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg-opt span { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border-radius: var(--r-pille); border: 1px solid var(--feld-rahmen); font-size: var(--t-klein); line-height: 1.3; color: var(--sc-ink-soft); cursor: pointer; transition: border-color var(--sc-d-base) var(--sc-ease-out), background-color var(--sc-d-base) var(--sc-ease-out), color var(--sc-d-base) var(--sc-ease-out); }
.seg-opt:hover span { border-color: var(--sc-accent); color: var(--sc-ink); }
.seg-opt input:checked + span { background: var(--btn); border-color: var(--btn); color: #fff; font-weight: 700; }
.seg-opt input:focus-visible + span { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
.tc-live { position: sticky; top: 72px; gap: 14px; }
.tc-live .btn { align-self: flex-start; }
.kacheln-satz { margin: 0 0 12px; font-size: var(--t-h); line-height: var(--lh-h); font-weight: 800; letter-spacing: -.01em; text-wrap: balance; }
.kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-md); overflow: hidden; }
.kachel { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-right: 1px solid var(--sc-hairline-strong); --f: var(--sc-hairline-strong); }
.kachel:last-child { border-right: 0; }
.kachel-k { font-size: var(--t-etikett); letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--sc-ink-soft); }
.kachel-v { font-weight: 700; font-size: var(--t-klein); line-height: 1.3; }
.kachel-band { height: 6px; border-radius: 3px; background: var(--f); margin-top: auto; }
.kachel-gruen { --f: var(--gruen); } .kachel-gelb { --f: var(--gelb); } .kachel-rot { --f: var(--rot); }
.kacheln-wrap { max-width: 56rem; margin: -8px 0 32px; }
.kacheln-wrap .kacheln { background: var(--sc-surface); }
.tc-live .kacheln { grid-template-columns: minmax(0, 1fr); }
.tc-live .kachel { border-right: 0; border-bottom: 1px solid var(--sc-hairline-strong); flex-direction: row; align-items: center; gap: var(--s-3); }
.tc-live .kachel:last-child { border-bottom: 0; }
.tc-live .kachel-k { min-width: 84px; }
.tc-live .kachel-band { width: 24px; height: 6px; margin: 0 0 0 auto; flex-shrink: 0; }
/* Ampel als Schieber */
.schieber-form { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.schieber-fragen { display: flex; flex-direction: column; gap: var(--s-2); }
.schieber { padding: 20px 0; border-top: 1px solid var(--sc-hairline); display: flex; flex-direction: column; gap: 10px; }
.schieber:first-child { border-top: 0; padding-top: 0; }
.schieber > label { display: flex; flex-direction: column; gap: var(--s-1); font-size: var(--t-text); font-weight: 700; line-height: var(--lh-text); max-width: 68ch; }
.schieber input[type=range] { width: 100%; max-width: 40rem; height: 32px; margin: 4px 0 0; accent-color: var(--sc-accent); cursor: pointer; }
.schieber input[type=range]:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 4px; border-radius: var(--r-klein); }
.schieber-rasten { list-style: none; margin: 0; padding: 0; max-width: 40rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); font-size: 12px; line-height: 1.3; color: var(--sc-ink-soft); hyphens: auto; overflow-wrap: anywhere; }
@media (max-width: 480px) { .schieber-rasten { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* „Personalakte“ passte nicht in 82 px (21. September 2026) */
.schieber-rasten li { position: relative; padding-top: 10px; }
.schieber-rasten li::before { content: ""; position: absolute; top: 0; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--sc-hairline-strong); }
.schieber-rasten li.on { color: var(--sc-ink); font-weight: 700; }
.schieber-rasten li.on::before { background: var(--sc-accent); }
.schieber-rasten li:nth-child(2), .schieber-rasten li:nth-child(3) { text-align: left; }
.schieber-wahl { margin: 0; font-size: var(--t-klein); color: var(--sc-ink-soft); }
.schieber-wahl b { color: var(--sc-ink); }
.schieber-live { position: sticky; top: 72px; align-items: flex-start; gap: 14px; }
.gauge { display: flex; align-items: center; gap: var(--s-4); }
.gauge-ring { width: 64px; height: 64px; border-radius: 50%; border: 6px solid var(--sc-hairline-strong); background: transparent; transition: border-color var(--sc-d-base) var(--sc-ease-out), background-color var(--sc-d-base) var(--sc-ease-out); }
.gauge[data-farbe="gruen"] .gauge-ring { border-color: var(--gruen); background: rgba(46,196,182,.18); }
.gauge[data-farbe="gelb"] .gauge-ring { border-color: var(--gelb); background: rgba(255,209,102,.18); }
.gauge[data-farbe="rot"] .gauge-ring { border-color: var(--rot); background: rgba(255,107,107,.18); }
.gauge-wort { font-size: var(--t-titel); font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.gauge[data-farbe="gruen"] .gauge-wort { color: var(--gruen); } .gauge[data-farbe="gelb"] .gauge-wort { color: var(--gelb); } .gauge[data-farbe="rot"] .gauge-wort { color: var(--rot); }
.gauge-rat { max-width: 40ch; }
@media (max-width: 900px) { .tc, .schieber-form { grid-template-columns: minmax(0, 1fr); } .tc-live, .schieber-live { position: static; } .kacheln { grid-template-columns: minmax(0, 1fr); } .kachel { border-right: 0; border-bottom: 1px solid var(--sc-hairline-strong); } .kachel:last-child { border-bottom: 0; } }
/* Kapitel I in einer Spalte (Stefan: links zu viel Platz): Lede oben, die Leiter in zwei Spalten, 1-2 links, 3-4 rechts. */
.ed-g1 .ed-spread { grid-template-columns: minmax(0, 1fr); gap: var(--s-8); }
.ed-g1 .ed-lead { display: flex; gap: clamp(24px, 4vw, 64px); align-items: baseline; flex-wrap: wrap; }
.ed-g1 .ed-lead .ed-lede { max-width: 30ch; }
.ed-g1 .ed-lead .ed-fine { max-width: 52ch; }
.leiter { display: grid; grid-auto-flow: column; grid-template-rows: auto auto; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 80px); }
.leiter::before { display: none; }
.leiter-step { position: relative; }
.leiter-step::before { content: ""; position: absolute; left: 19px; top: 44px; bottom: 0; width: 2px; background: linear-gradient(var(--sc-accent), var(--sc-accent-2)); }
.leiter-step:nth-child(2n)::before { display: none; }
@media (max-width: 900px) { .leiter { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; } .leiter-step:nth-child(2n)::before { display: block; } .leiter-step:last-child::before { display: none; } }
@media (max-width: 640px) { .leiter-step::before { left: 15px; top: 36px; } }
/* "Fuer wen" nach Variante F-A: links Tuerkis mit leichtem Grund, rechts leiser, gestrichelt. */
.ed-listblock:not(.ed-listblock-muted) { background: linear-gradient(rgba(46,196,182,0.06), rgba(46,196,182,0.06)) padding-box, linear-gradient(135deg, rgba(46,196,182,0.55), rgba(46,196,182,0.15)) border-box; border-color: transparent; }
.ed-listblock-muted { border: 1px dashed var(--sc-hairline-strong); background: transparent; }
.ed-listblock-muted .cross-list li::before { background-color: rgba(255,255,255,0.06); }

/* --- Eingabe-Pruefer (Werkzeug 3, 8. September 2026): Textfeld, Ausgabe mit Markierungen, Zaehler. Farbe nie allein: jede Markierung traegt ihre Art als Titel und steht im Zaehler mit Wort. --- */
.ep-feld { display: flex; flex-direction: column; gap: var(--s-3); }
.ep-feld textarea { min-height: 200px; font-family: inherit; }
.ep-ausgabe { white-space: pre-wrap; overflow-wrap: anywhere; min-height: 96px; padding: var(--s-3) var(--s-4); border: 1px dashed var(--feld-rahmen); border-radius: var(--r-feld); font-size: var(--t-klein); line-height: var(--lh-klein); color: var(--sc-ink-soft); }
.ep-leer { color: var(--muted); }
.ep-mark { border-radius: 4px; padding: 0 3px; color: var(--ink); background: rgba(255,209,102,0.22); border-bottom: 2px solid var(--gelb); }
.ep-mark.ep-iban, .ep-mark.ep-uid, .ep-mark.ep-nummer { background: rgba(255,107,107,0.2); border-bottom-color: var(--rot); }
.ep-mark.ep-email, .ep-mark.ep-telefon { background: rgba(79,140,255,0.2); border-bottom-color: var(--accent); }
.ep-zaehler { list-style: none; margin: 0 0 var(--s-4); padding: 0; display: flex; flex-direction: column; gap: var(--s-2); font-size: var(--t-klein); line-height: var(--lh-klein); }
.ep-zaehler li { display: flex; align-items: baseline; gap: var(--s-2); }
.ep-zaehler li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; background: var(--gelb); transform: translateY(1px); }
.ep-zaehler li.ep-iban::before, .ep-zaehler li.ep-uid::before, .ep-zaehler li.ep-nummer::before { background: var(--rot); }
.ep-zaehler li.ep-email::before, .ep-zaehler li.ep-telefon::before { background: var(--accent); }
.ep-zaehler b { font-variant-numeric: tabular-nums; }
.ep-stand:empty { display: none; }

/* --- Reifegrad-Kurzcheck (Werkzeug 4, 8. September 2026): Aussagen mit Pillen, Profil mit Symbol, Wort und Balken. --- */
.rg-form { display: flex; flex-direction: column; gap: var(--s-8); max-width: 56rem; }
.rg-feld { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-4); }
.rg-feld legend { display: flex; flex-direction: column; gap: 6px; font-size: var(--t-h); line-height: var(--lh-h); font-weight: 700; margin-bottom: var(--s-3); max-width: 68ch; padding: 0; }
.rg-aussage { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); padding: var(--s-4) 0; border-top: 1px solid var(--sc-hairline); }
.rg-text { margin: 0; max-width: 68ch; font-size: var(--t-text); line-height: var(--lh-text); }
.rg-ref { color: var(--muted); font-size: var(--t-klein); }
.rg-erg { display: flex; flex-direction: column; gap: var(--s-6); }
.rg-gesamt { display: flex; gap: var(--s-4); align-items: center; }
.rg-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; border: 1px solid var(--feld-rahmen); color: var(--muted); }
.rg-icon svg { width: 22px; height: 22px; }
.rg-steht .rg-icon { color: var(--gruen); border-color: var(--gruen); background: rgba(46,196,182,0.12); }
.rg-aufbau .rg-icon { color: var(--gelb); border-color: var(--gelb); background: rgba(255,209,102,0.12); }
.rg-anfang .rg-icon { color: var(--rot); border-color: var(--rot); background: rgba(255,107,107,0.12); }
.rg-wort { margin: 0; font-size: var(--t-titel); line-height: var(--lh-titel); font-weight: 800; letter-spacing: -.02em; }
.rg-wort small { display: block; font-size: var(--t-klein); font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; margin-top: 2px; }
.rg-felder { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-4); }
.rg-kopf { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; font-size: var(--t-text); }
.rg-kopf .rg-icon { width: 32px; height: 32px; } .rg-kopf .rg-icon svg { width: 16px; height: 16px; }
.rg-stufe { margin-left: auto; color: var(--muted); font-size: var(--t-klein); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rg-balken { height: 6px; border-radius: 3px; background: rgba(236,238,243,0.12); overflow: hidden; margin-top: var(--s-2); }
.rg-balken span { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--muted); }
/* Breite in Fuenferschritten als Klasse, weil die CSP keine Inline-Stile zulaesst. */
.rg-balken .rg-w0 { width: 0%; } .rg-balken .rg-w5 { width: 5%; } .rg-balken .rg-w10 { width: 10%; } .rg-balken .rg-w15 { width: 15%; } .rg-balken .rg-w20 { width: 20%; } .rg-balken .rg-w25 { width: 25%; } .rg-balken .rg-w30 { width: 30%; } .rg-balken .rg-w35 { width: 35%; } .rg-balken .rg-w40 { width: 40%; } .rg-balken .rg-w45 { width: 45%; } .rg-balken .rg-w50 { width: 50%; } .rg-balken .rg-w55 { width: 55%; } .rg-balken .rg-w60 { width: 60%; } .rg-balken .rg-w65 { width: 65%; } .rg-balken .rg-w70 { width: 70%; } .rg-balken .rg-w75 { width: 75%; } .rg-balken .rg-w80 { width: 80%; } .rg-balken .rg-w85 { width: 85%; } .rg-balken .rg-w90 { width: 90%; } .rg-balken .rg-w95 { width: 95%; } .rg-balken .rg-w100 { width: 100%; }
.rg-steht .rg-balken span { background: var(--gruen); } .rg-aufbau .rg-balken span { background: var(--gelb); } .rg-anfang .rg-balken span { background: var(--rot); }
.rg-jetzt { display: flex; flex-direction: column; gap: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--sc-hairline); }
.rg-lesestoff { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: var(--s-2); font-size: var(--t-klein); line-height: var(--lh-klein); }

/* --- Schatten-KI-Inventar (Werkzeug 5, 8. September 2026): Zeilen als Raster, Tabelle darunter, Druckstil. --- */
.inv { display: flex; flex-direction: column; gap: var(--s-6); }
.inv-hinweis { margin: 0; }
.inv-zeilen { display: flex; flex-direction: column; border-top: 1px solid var(--sc-hairline); }
.inv-kopfzeile { display: none; }
.inv-zeile { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) 150px 130px; gap: var(--s-3) var(--s-4); align-items: start; padding: var(--s-4) 0; border-bottom: 1px solid var(--sc-hairline); }
.inv-name { display: flex; flex-direction: column; gap: 2px; }
.inv-check { display: flex; align-items: center; gap: var(--s-3); font-weight: 700; cursor: pointer; min-height: 48px; }
.inv-check input { width: 20px; height: 20px; accent-color: var(--btn); flex-shrink: 0; }
.inv-beispiel { font-size: var(--t-klein); line-height: var(--lh-klein); color: var(--muted); padding-left: 32px; }
.inv-feld { display: flex; flex-direction: column; gap: 4px; font-size: var(--t-klein); color: var(--muted); }
.inv-feld input, .inv-feld select, .inv-name input[type=text] { width: 100%; }
.inv-feld input[type=month] { font: inherit; font-size: 16px; min-height: 48px; padding: 0 var(--s-4); border: 1px solid var(--feld-rahmen); border-radius: var(--r-feld); background: rgba(255,255,255,0.06); color: var(--ink); color-scheme: dark; }
.inv-ergebnis { display: flex; flex-direction: column; gap: var(--s-3); }
.inv-ergebnis h2 { margin: 0; }
.inv-stand:empty { display: none; }
.inv-ausgabe { width: 100%; border-collapse: collapse; font-size: var(--t-klein); line-height: var(--lh-klein); }
.inv-ausgabe th, .inv-ausgabe td { text-align: left; padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--sc-hairline); vertical-align: top; }
.inv-ausgabe th { color: var(--muted); font-weight: 600; }
.inv-weiter { max-width: 42rem; }
@media (max-width: 900px) { .inv-zeile { grid-template-columns: repeat(2, minmax(0, 1fr)); } .inv-name { grid-column: 1 / -1; } }
@media (max-width: 520px) { .inv-zeile { grid-template-columns: minmax(0, 1fr); } }
@media print {
  .topbar, .topbar-solid, footer, .site-footer, .inv-aktionen, .inv-weiter, .inv-hinweis, .nl-inline, .pg-wrap::before { display: none !important; }
  body { background: #fff; color: #000; }
  .inv-zeile { break-inside: avoid; border-bottom: 1px solid #999; }
  .inv-feld input, .inv-feld select, .inv-name input[type=text] { border: 0; border-bottom: 1px solid #999; border-radius: 0; background: transparent; color: #000; }
  .inv-ausgabe th, .inv-ausgabe td { border-bottom: 1px solid #999; color: #000; }
}

/* --- Admin-Uebersicht (Phase 12, 8. September 2026): Kacheln mit Zahl, Zaehlertabelle mit Wort. --- */
.admin-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-3); margin: 0 0 var(--s-6); }
.admin-kachel { display: flex; flex-direction: column; gap: 2px; padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-feld); background: var(--karte); }
.admin-k { font-size: var(--t-etikett); letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.admin-v { font-size: var(--t-titel); line-height: var(--lh-titel); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.admin-u { font-size: var(--t-klein); line-height: var(--lh-klein); color: var(--muted); }
.admin-zaehler td:last-child { text-align: right; font-variant-numeric: tabular-nums; }

/* --- Kurzchecks 7 und 8 (Anmeldung, Sicherung), 10. September 2026: wie der Reifegrad, andere Fragen. --- */
.kc-frage { border: 0; margin: 0; padding: var(--s-4) 0; border-bottom: 1px solid var(--sc-hairline); display: flex; flex-direction: column; gap: var(--s-3); }
.kc-frage legend { display: flex; flex-direction: column; gap: 6px; font-size: var(--t-text); line-height: var(--lh-text); font-weight: 700; max-width: 68ch; padding: 0; margin-bottom: var(--s-2); }
.kc-frage .tc-help { font-weight: 400; color: var(--muted); font-size: var(--t-klein); line-height: var(--lh-klein); }
.kc-schritte { margin: 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: var(--s-3); font-size: var(--t-text); line-height: var(--lh-text); max-width: 68ch; }
.kc-schritte li::marker { font-weight: 800; color: var(--accent); }
.kc-plan-liste { margin: 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: var(--s-3); max-width: 68ch; }
.kc-plan-liste li { display: flex; flex-direction: column; gap: 6px; font-size: var(--t-text); line-height: var(--lh-text); }
.kc-plan-feld { display: block; height: 28px; border-bottom: 1px dashed var(--feld-rahmen); }
.kc-plan-fuss { margin: 0; font-size: var(--t-etikett); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* --- Blaetter 10, 12, 14 (Notfallkarte, Anbieter-Fragen, Zustaendigkeiten): Formular links, Vorschau rechts, Druck. --- */
.blatt-feld { display: flex; flex-direction: column; gap: 4px; font-size: var(--t-klein); color: var(--muted); }
.blatt-feld input, .blatt-feld textarea { width: 100%; }
.blatt-feld textarea { min-height: 64px; font-family: inherit; }
.blatt-gruppe { border: 0; margin: 0; padding: var(--s-4) 0 0; display: flex; flex-direction: column; gap: var(--s-3); border-top: 1px solid var(--sc-hairline); }
.blatt-gruppe legend { font-weight: 700; font-size: var(--t-text); padding: 0; margin-bottom: var(--s-1); }
.blatt-gruppe > .pg-muted { margin: 0; }
.blatt-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-3); }
.blatt-kopf { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-3); margin-bottom: var(--s-4); }
.blatt-aktionen { align-items: center; }
.blatt-stand:empty { display: none; }
.blatt-vorschau { align-self: start; position: sticky; top: 80px; }
.blatt-luecke { color: var(--rot); font-weight: 700; }
.nk-karte { background: #fff; color: #111; border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow); font-size: 13px; line-height: 1.35; max-width: 340px; }
.nk-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); margin: 0 0 8px; border-bottom: 2px solid #2f6be6; padding-bottom: 6px; }
.nk-kopf b { font-size: 15px; letter-spacing: -.01em; }
.nk-kopf span { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #2f6be6; font-weight: 800; }
.nk-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.nk-liste li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 4px 0; border-bottom: 1px solid #e3e6ee; }
.nk-liste .nk-rolle { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #6b7280; }
.nk-liste b { font-variant-numeric: tabular-nums; }
.nk-fuss { margin: 8px 0 0; font-size: 11px; color: #4b5563; }
.zu-aushang { background: #fff; color: #111; border-radius: 12px; padding: 16px 18px; box-shadow: var(--shadow); }
.zu-aushang .nk-kopf b { font-size: 17px; }
.zu-tabelle { width: 100%; border-collapse: collapse; font-size: 13px; }
.zu-tabelle th, .zu-tabelle td { text-align: left; padding: 6px 8px 6px 0; border-bottom: 1px solid #e3e6ee; color: #111; vertical-align: top; }
.zu-tabelle th { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #6b7280; }
.zu-tabelle .blatt-luecke { color: #c0392b; }
.af-liste { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s-5); }
.af-frage { display: flex; flex-direction: column; gap: var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--sc-hairline); }
.af-text { margin: 0; max-width: 68ch; font-size: var(--t-text); line-height: var(--lh-text); }
.af-text b { color: var(--accent); }
@media (max-width: 1000px) { .blatt-vorschau { position: static; } }
@media print {
  .blatt-aktionen, .blatt-stand, .pg-fine, .kc-form .pg-actions { display: none !important; }
  .blatt .pg-two { display: block; }
  .blatt .pg-card { border: 0; box-shadow: none; padding: 0; background: none; }
  .blatt-feld input, .blatt-feld textarea { border: 0; border-bottom: 1px solid #999; border-radius: 0; background: transparent; color: #000; }
  .nk .blatt-vorschau { display: block; break-before: page; }
  .nk-karte { box-shadow: none; border: 1px solid #999; width: 85.6mm; min-height: 54mm; max-width: none; margin-bottom: 6mm; page-break-inside: avoid; }
  .nk-karte + .nk-karte { margin-top: 0; }
  .zu-aushang, .nk-karte { color: #000; }
  .kc-plan { break-before: page; }
  .rg-erg .rg-gesamt, .rg-erg .kc-schritte { break-inside: avoid; }
}

/* NIS2-Selbstcheck (D3): Auswahlliste, Gründe mit Fundstelle, Fristentabelle, Sektoren im Wortlaut. */
.n2-select { width: 100%; max-width: 40rem; }
.n2-erfasst .rg-icon { color: var(--gelb); border-color: var(--gelb); background: rgba(242,181,68,0.12); }
.n2-nicht .rg-icon { color: var(--gruen); border-color: var(--gruen); background: rgba(46,196,182,0.12); }
.n2-offen .rg-icon { color: var(--muted); border-color: var(--muted); }
.n2-gruende { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.n2-gruende li { display: flex; flex-direction: column; gap: 4px; padding-left: 14px; border-left: 2px solid var(--accent); max-width: 68ch; }
.n2-vorbehalte li { border-left-color: var(--gelb); }
.n2-quelle { font-size: var(--t-etikett); letter-spacing: .06em; color: var(--muted); font-variant-numeric: tabular-nums; }
.n2-tabelle { width: 100%; border-collapse: collapse; font-size: var(--t-klein); }
.n2-tabelle th, .n2-tabelle td { text-align: left; vertical-align: top; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--sc-hairline); max-width: 34ch; }
.n2-tabelle th { font-size: var(--t-etikett); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.n2-liste { margin-top: var(--s-6); max-width: 56rem; }
.n2-liste > summary, .n2-sektor > summary { cursor: pointer; font-weight: 700; }
.n2-sektoren { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-3); }
.n2-sektor { padding: var(--s-3) 0; border-bottom: 1px solid var(--sc-hairline); }
.n2-sektor > summary b { color: var(--accent); margin-right: 6px; }
.n2-arten { margin: 6px 0 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; max-width: 68ch; font-size: var(--t-klein); }
.n2-quellen { padding-top: var(--s-4); border-top: 1px solid var(--sc-hairline); }
.n2-quellen ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: var(--t-klein); }
@media print { .n2-liste, .n2-form .pg-actions { display: none; } }

/* min-width: 0, sonst hat der Rollkasten als Flex-Kind die Mindestbreite seiner Tabelle und spannt die Karte auf (NIS2-Ergebnis
   517 px am Handy, 21. September 2026). Ebenso die Quellenzeilen mit langen Adressen. */
.tabelle-scroll { overflow-x: auto; max-width: 100%; min-width: 0; width: 100%; }
.rg-erg > *, .n2-gruende li, .pg-card > * { min-width: 0; }
.n2-quelle, .rg-ref, .n2-gruende small { overflow-wrap: anywhere; }
@media (max-width: 760px) { .n2-tabelle th, .n2-tabelle td { hyphens: auto; overflow-wrap: anywhere; } }

/* Tools-Seite A „Bühne und Reihen“ und die Reihe auf der Startseite (Stefan, 11. September 2026; shop/planung/16).
   Eine Bildszene je Tool in der Farbe des Zwecks, nie mehr als drei Karten je Ansicht, Reihen mit scroll-snap. */
.ed-g7 { background: #0d1017; --sc-canvas: #0d1017; }
.ed-g7::before { background: radial-gradient(45% 45% at 20% 30%, rgba(46,196,182,0.08), transparent 70%); }
.tl-illu { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-feld); display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); background: radial-gradient(120% 100% at 20% 0%, rgba(79,140,255,0.28), rgba(79,140,255,0.04) 60%), #171b24; color: var(--accent); }
.tl-illu svg { width: 46%; height: auto; }
.tl-illu.tl-absichern { background: radial-gradient(120% 100% at 80% 0%, rgba(46,196,182,0.26), rgba(46,196,182,0.03) 60%), #171b24; color: var(--gruen); }
.tl-illu.tl-vorbereiten { background: radial-gradient(120% 100% at 50% 100%, rgba(255,209,102,0.22), rgba(255,209,102,0.03) 60%), #171b24; color: var(--gelb); }
.tl-bild { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: var(--r-feld); border: 1px solid var(--line); background: #171b24; }
.tl-illu-gross { aspect-ratio: 4 / 3; }
.tl-illu-gross svg { width: 40%; }
/* Bild links ueber beide Zeilen, Text und Zweckwahl rechts untereinander; bis 21. September 2026 stand der Text mittig
   und die Wahl erst unter dem Bild, dazwischen ein Loch von 130 px (Fotoprüfung). */
.tl-buehne { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: clamp(20px, 3vw, 40px); align-items: start; margin-top: var(--s-6); }
.tl-buehne .tl-illu-gross { grid-column: 1; grid-row: 1 / 3; align-self: center; }
.tl-held-text { grid-column: 2; grid-row: 1; }
.tl-held { display: contents; }
.tl-held[hidden] { display: none; }
.tl-held-text { display: flex; flex-direction: column; gap: var(--s-3); }
.tl-held-titel { margin: 0; font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem); line-height: 1.1; font-weight: 800; letter-spacing: -.02em; max-width: 18ch; }
.tl-held-satz { margin: 0; color: var(--muted); max-width: 44ch; }
.tl-held-meta { margin: 0; display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; font-size: var(--t-klein); color: var(--muted); }
.tl-held-cta { margin: 0; }
.tl-chip { display: inline-flex; align-items: center; border-radius: var(--r-pille); padding: 3px 10px; font-size: var(--t-etikett); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gruen); border: 1px solid rgba(46,196,182,0.4); }
.tl-wahl { grid-column: 2; grid-row: 2; align-self: start; display: flex; gap: 6px; flex-wrap: wrap; }
.tl-wahl-knopf { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border-radius: var(--r-pille); border: 1px solid var(--line); color: var(--muted); font-size: var(--t-klein); font-weight: 700; text-decoration: none; }
.tl-wahl-knopf:hover { border-color: var(--accent); color: var(--ink); }
.tl-wahl-knopf[aria-current="true"] { border-color: var(--accent); color: var(--ink); background: rgba(79,140,255,0.12); }
.tl-gruppe { padding-top: var(--s-8); margin-top: var(--s-8); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--s-4); }
.tl-gruppe-kopf { display: flex; flex-direction: column; gap: 4px; }
.tl-gruppe-kopf .pg-h3 { margin: 0; }
.tl-reihe { position: relative; }
.tl-rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 28px) / 3); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 0 8px; }
.tl-rail::-webkit-scrollbar { display: none; }
.tl-karte { scroll-snap-align: start; display: flex; flex-direction: column; gap: var(--s-3); padding: 12px 12px 16px; border: 1px solid var(--line); border-radius: var(--r-karte); background: var(--karte); color: var(--ink); text-decoration: none; transition: border-color .15s, transform .15s; }
.tl-karte:hover { border-color: var(--accent); transform: translateY(-2px); }
.tl-karte:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.tl-karte-titel { margin: 0; padding: 0 4px; font-size: var(--t-h); line-height: var(--lh-h); font-weight: 700; letter-spacing: -.01em; }
.tl-karte-satz { margin: 0; padding: 0 4px; font-size: var(--t-klein); color: var(--muted); max-width: 40ch; }
.tl-karte-fuss { margin-top: auto; padding: 0 4px; display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); flex-wrap: wrap; }
.tl-dauer { font-size: var(--t-etikett); color: var(--muted); letter-spacing: .04em; }
.tl-premium { color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.tl-chip-premium { color: var(--accent); border-color: rgba(47,107,230,0.5); }
.pg-band-premium { margin: 0 0 var(--s-4); padding: 10px 14px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--r-karte); color: var(--muted); font-size: var(--t-klein); }
.pg-band-premium a { color: var(--accent); }
.pg-laufzeit { margin: 0 0 var(--s-4); padding: 0; border: 0; display: grid; gap: var(--s-2); }
.pg-laufzeit legend { font-weight: 700; margin-bottom: var(--s-2); }
.tl-btn { padding: 8px 14px; font-size: var(--t-klein); }
.tl-nav { position: absolute; top: 34%; z-index: 2; width: 40px; height: 40px; border-radius: var(--r-pille); border: 1px solid var(--line); background: var(--karte); color: var(--ink); font-size: 22px; line-height: 1; display: grid; place-items: center; cursor: pointer; }
.tl-nav:hover { border-color: var(--accent); }
.tl-nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.tl-prev { left: -14px; } .tl-next { right: -14px; }
.tl-start { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(20px, 3vw, 40px); align-items: center; }
.tl-start-text { display: flex; flex-direction: column; gap: var(--s-3); }
.tl-start-cta { margin: 0; }
.tl-start .tl-rail { grid-auto-columns: calc((100% - 14px) / 2); }
@media (max-width: 980px) { .tl-rail { grid-auto-columns: calc((100% - 14px) / 2); } }
/* Ein Spaltenmass von 1fr hat einen min-content-Boden: die Reihe (overflow-x: auto) spannt die Spalte sonst auf die Breite
   aller Karten auf, die Startseite war am Handy 570 px breit (Stefan, 21. September 2026). Darum minmax(0, 1fr). */
@media (max-width: 760px) { .tl-buehne { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; } .tl-illu-gross, .tl-held-text, .tl-wahl { grid-column: 1; grid-row: auto; } .tl-rail, .tl-start .tl-rail { grid-auto-columns: 82%; } .tl-start { grid-template-columns: minmax(0, 1fr); } .tl-nav { display: none; } }
@media (prefers-reduced-motion: reduce) { .tl-karte { transition: none; } .tl-rail { scroll-behavior: auto; } }
@media print { .tl-nav { display: none; } }


/* Fragen A (11. September 2026): eine Frage je Bildschirm, Erklärung an jeder Antwort, „i“ für mehr.
   Ohne Skript stehen alle Fragen untereinander; .fq-schritte setzt das Modul fragen.mjs. */
.fq-form [hidden] { display: none !important; }
.fq { border: 0; margin: 0; padding: var(--s-4) 0; border-bottom: 1px solid var(--sc-hairline); display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.fq-schritte .fq { border-bottom: 0; padding-top: var(--s-2); }
.fq legend { display: flex; flex-direction: column; gap: 6px; font-size: var(--t-text); line-height: var(--lh-text); font-weight: 700; max-width: 68ch; padding: 0; margin-bottom: var(--s-2); float: left; width: 100%; }
.fq-schritte .fq legend { font-size: var(--t-h); line-height: var(--lh-h); }
.fq legend .tc-help { font-weight: 400; color: var(--muted); font-size: var(--t-klein); line-height: var(--lh-klein); }
.fq-opts { display: flex; flex-direction: column; gap: 8px; clear: both; max-width: 44rem; }
.fq-opt { position: relative; }
.fq-lbl { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 14px; border: 1px solid var(--feld-rahmen); border-radius: var(--r-feld); background: var(--karte); cursor: pointer; transition: border-color var(--sc-d-base) var(--sc-ease-out), background-color var(--sc-d-base) var(--sc-ease-out); }
.fq-opt:has(.fq-mehr) .fq-lbl { padding-right: 52px; }
.fq-lbl input { margin: 3px 0 0; width: 18px; height: 18px; accent-color: var(--sc-accent); flex: none; }
.fq-lbl:hover { border-color: var(--sc-accent); }
.fq-lbl:has(input:checked) { border-color: var(--btn); background: rgba(47, 107, 230, 0.14); }
.fq-lbl:has(input:focus-visible) { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
.fq-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fq-body b { font-size: var(--t-text); line-height: var(--lh-text); color: var(--sc-ink); }
.fq-erkl { display: block; font-size: var(--t-klein); line-height: var(--lh-klein); font-weight: 400; color: var(--sc-ink-soft); }
.fq-mehr { position: static; }
.fq-mehr summary { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--feld-rahmen); background: var(--karte); color: var(--sc-ink-soft); display: grid; place-items: center; cursor: pointer; list-style: none; font-weight: 700; font-size: 14px; line-height: 1; }
.fq-mehr summary::-webkit-details-marker { display: none; }
.fq-mehr summary:hover { border-color: var(--sc-accent); color: var(--sc-ink); }
.fq-mehr summary:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; }
.fq-mehr[open] summary { background: var(--btn); border-color: var(--btn); color: #fff; }
.fq-mehr p { margin: 8px 0 0; padding: 10px 14px; border-left: 3px solid var(--sc-accent); border-radius: 0 var(--r-klein) var(--r-klein) 0; background: rgba(47, 107, 230, 0.10); font-size: var(--t-klein); line-height: var(--lh-klein); color: var(--sc-ink); max-width: 68ch; }
.fq-fort { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-klein); color: var(--sc-ink-soft); max-width: 44rem; }
.fq-fort-text { white-space: nowrap; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: var(--t-etikett); color: var(--sc-accent); }
.fq-balken { flex: 1; height: 6px; border-radius: 3px; background: var(--sc-hairline); overflow: hidden; }
.fq-balken > span { display: block; height: 100%; width: 0; background: var(--sc-accent); transition: width var(--sc-d-base) var(--sc-ease-out); }
.fq-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; max-width: 44rem; padding-top: var(--s-2); }
.fq-nav .btn { min-width: 128px; }
.fq-hinweis { flex: 1 1 14rem; margin: 0; }
.fq-legende { font-size: var(--t-klein); color: var(--sc-ink-soft); max-width: 40rem; }
.fq-legende summary { cursor: pointer; color: var(--sc-accent); }
.fq-legende dl { margin: 8px 0 0; display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: 4px 12px; }
@media (max-width: 600px) { .fq-legende dl { grid-template-columns: minmax(0, 1fr); } .fq-legende dd { margin-bottom: 4px; } }
.fq-legende dt { font-weight: 700; color: var(--sc-ink); }
.fq-legende dd { margin: 0; }
.fq-legende-text { font-size: var(--t-klein); line-height: var(--lh-klein); color: var(--sc-ink-soft); margin: 0 0 var(--s-2); max-width: 68ch; }
.schieber-wahl .fq-erkl { margin-top: 2px; }
.schieber .schieber-wahl { display: flex; flex-direction: column; gap: 2px; }
@media (prefers-reduced-motion: reduce) { .fq-lbl, .fq-balken > span { transition: none; } }
@media (max-width: 640px) { .fq-nav { flex-direction: column-reverse; align-items: stretch; } .fq-nav .btn { width: 100%; } .fq-hinweis { flex: none; order: 2; } }
.fq-schritte [data-fq] .check-step { display: none; }
.pg-two + .pg-fine { margin-top: var(--s-4); }
.pg-stack { justify-content: flex-start; gap: var(--s-6); }
.pg-stack > div { display: flex; flex-direction: column; gap: var(--s-2); }
.sp-block { margin-bottom: var(--s-6); }
.sp-block .pg-actions { margin-top: 0; }
.sp-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sp-liste li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-2); align-items: center; padding: 10px 14px; border: 1px solid var(--feld-rahmen); border-radius: var(--r-feld); }
.sp-liste li b { display: block; font-size: var(--t-text); }
.sp-liste li span { display: block; font-size: var(--t-klein); color: var(--sc-ink-soft); }
.sp-liste li form { display: inline; }
.sp-liste .btn { height: 36px; padding: 0 14px; font-size: 13px; min-width: 0; }

/* Menue bei halber Fensterbreite (Stefan, 13. September 2026, Note 4): kein Vollbild mehr, sondern ein Panel unter
   der Leiste, so hoch wie sein Inhalt, mit Rand und Schatten. Ab 761 px zwei Spalten in den Menuepunkten. */
@media (max-width: 1000px) {
  .topbar-nav { height: auto; max-height: calc(100dvh - 56px); overflow: auto; padding: 8px var(--sc-gutter) 22px; border-bottom: 1px solid var(--sc-hairline-strong); border-radius: 0 0 20px 20px; box-shadow: 0 30px 60px rgba(0,0,0,0.55); }
  .topbar-nav a:not(.topbar-cta) { padding: 14px 0; font-size: 15px; }
  .topbar-nav .topbar-cta { margin-top: 16px; }
  .topbar-nav .langswitch { margin-top: 12px; }
}
@media (min-width: 761px) and (max-width: 1000px) {
  .topbar-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-8); }
  .topbar-nav .topbar-cta, .topbar-nav .langswitch { grid-column: 1 / -1; }
  .nav-toggle:checked ~ .topbar-nav { display: grid; }
}

/* Startseite: Abschnitt Premium (13. September 2026): Text links, die vier Tools als Liste rechts. */
.pm-start { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.pm-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pm-liste li { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-md); background: rgba(255,255,255,0.03); }
.pm-liste li b { font-size: var(--t-text); }
.pm-liste li span { font-size: var(--t-klein); line-height: var(--lh-klein); color: var(--sc-ink-soft); }
.pm-text .tl-start-cta { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 960px) { .pm-start { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .pm-liste { grid-template-columns: minmax(0, 1fr); } }

@media (max-width: 1000px) {
  .topbar-nav .langswitch { display: inline-flex; width: max-content; justify-self: start; align-self: flex-start; }
}
@media (max-width: 1000px) {
  .topbar-nav .langswitch { width: auto; min-width: max-content; overflow: visible; padding: 3px; gap: 4px; box-sizing: content-box; }
  .topbar-nav .langswitch a, .topbar-nav .langswitch span { display: inline-block !important; width: auto; padding: 8px 14px; font-size: 13px; line-height: 1; white-space: nowrap; }
}

/* --- Premium-Tools (docs/16 Nr. 85, 14. September 2026): Prompt-Ersteller, Maßnahmenplan, Nachweisordner, Jahreskalender. --- */
.pt .pg-two { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.pt-zurueck { margin-top: var(--s-6); font-size: var(--t-klein); }
.pt-aufgaben { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s-3); }
.pt-aufgabe { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px var(--s-3); align-items: start; padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-karte); background: var(--karte); color: var(--ink); text-decoration: none; height: 100%; }
.pt-aufgabe:hover { border-color: var(--accent); text-decoration: none; }
.pt-nr { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(79,140,255,0.16); color: var(--accent); font-weight: 800; font-size: var(--t-klein); }
.pt-aufgabe-text b { display: block; font-size: var(--t-text); line-height: var(--lh-text); }
.pt-aufgabe-text > span { display: block; font-size: var(--t-klein); line-height: var(--lh-klein); color: var(--muted); margin-top: 4px; }
.pt-stand { grid-column: 2; font-size: var(--t-etikett); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pt-ungeprueft { color: var(--gelb); }
.pt-geprueft { color: var(--gruen); }
.pt-vier { margin: 0; padding-left: 1.3em; font-size: var(--t-klein); line-height: var(--lh-klein); color: var(--muted); display: flex; flex-direction: column; gap: 4px; }
.pt-felder { display: flex; flex-direction: column; gap: var(--s-3); }
.pt-feld { display: flex; flex-direction: column; gap: 4px; }
.pt-feld > span { font-size: 13px; font-weight: 600; color: rgba(245,245,247,0.7); }
.pt-prompt { margin: 0; padding: var(--s-4); border-radius: var(--r-feld); background: rgba(255,255,255,0.05); border: 1px solid var(--line); white-space: pre-wrap; overflow-wrap: anywhere; font: 500 var(--t-klein)/1.55 "Manrope", "Segoe UI", sans-serif; max-width: 68ch; }
.pt-beispiel summary { cursor: pointer; font-weight: 700; font-size: var(--t-klein); }
.pt-beispiel pre { white-space: pre-wrap; font: inherit; font-size: var(--t-klein); color: var(--muted); max-width: 68ch; }
.pt-pruef { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 8px; font-size: var(--t-klein); line-height: var(--lh-klein); }
.pt-pruef-allg { list-style: disc; color: var(--muted); }
.pt-massnahmen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pt-m { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px var(--s-3); align-items: start; padding: 10px 14px; border: 1px solid var(--feld-rahmen); border-radius: var(--r-feld); }
.pt-m-haken { display: contents; }
.pt-haken { width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 2px solid var(--accent); background: transparent; color: #fff; font-weight: 800; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; margin-top: 2px; }
.pt-haken[aria-pressed="true"] { background: var(--accent); }
.pt-m-text span { display: block; font-size: var(--t-klein); line-height: var(--lh-klein); }
.pt-m-text small { display: block; font-size: var(--t-etikett); color: var(--muted); margin-top: 2px; }
.pt-m-erledigt .pt-m-text span { color: var(--muted); text-decoration: line-through; }
.pt-m-aktionen { grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.pt-m-aktionen form { display: flex; gap: var(--s-2); align-items: center; }
.pt-m-aktionen input[type=date] { height: 36px; padding: 0 10px; font-size: 13px; width: auto; }
.pt-m-aktionen .btn, .pt-vorschlaege .btn, .pt-nw .btn { height: 36px; padding: 0 14px; font-size: 13px; min-width: 0; }
.pt-nw td, .pt-nw th { font-size: var(--t-klein); }
.pt-nw td:first-child { white-space: nowrap; }
.pt-druck .pg-head { margin-bottom: var(--s-6); }
.pt-jahr { display: flex; align-items: center; justify-content: center; gap: var(--s-4); margin: var(--s-4) 0; }
.pt-jahr-zahl { font-size: var(--t-titel); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pt-jahr .btn { height: 40px; padding: 0 16px; min-width: 0; }
.pt-monate { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s-3); margin-bottom: var(--s-6); }
.pt-monat { padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-feld); background: var(--karte); min-height: 120px; }
.pt-monat h2 { margin: 0 0 var(--s-2); font-size: var(--t-text); }
.pt-monat ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pt-monat li { display: grid; grid-template-columns: 2.2em minmax(0, 1fr); gap: 6px; font-size: var(--t-klein); line-height: var(--lh-klein); }
.pt-monat small { color: var(--muted); }
.pt-tag { font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.pt-vorschlaege { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pt-vorschlaege li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-2); align-items: center; padding: 10px 14px; border: 1px solid var(--feld-rahmen); border-radius: var(--r-feld); }
.pt-vorschlaege li span { display: block; font-size: var(--t-klein); line-height: var(--lh-klein); }
.pt-vorschlaege li small { display: block; font-size: var(--t-etikett); color: var(--muted); margin-top: 2px; }
.pt-konto-tools li { display: block; }
.tl-illu.tl-dranbleiben { background: radial-gradient(120% 100% at 50% 0%, rgba(79,140,255,0.3), rgba(79,140,255,0.04) 60%), #171b24; color: var(--accent); }
@media (max-width: 860px) { .pt .pg-two { grid-template-columns: minmax(0, 1fr); } }
@media print {
  .pt .pg-actions, .pt-m-aktionen, .pt-zurueck, .pt-seite, .pt-jahr .btn, .notice, .pt-druck-aktionen { display: none !important; }
  .pt .pg-two { display: block; }
  .pt .pg-card, .pt-monat, .pt-m, .pt-aufgabe { border: 1px solid #999; box-shadow: none; background: none; color: #000; }
  .pt-m-text span, .pt-m-text small, .pt-monat small, .pt-tag, .pt-nw td, .pt-nw th { color: #000; }
  .pt-haken { border-color: #000; color: #000; background: none !important; }
  .pt-monate { grid-template-columns: repeat(3, 1fr); }
}

/* --- Kennzeichnungs-Check und Lieferanten-Selbstauskunft (14. September 2026, docs/16 Nr. 93). --- */
.kz-chip { display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: var(--r-pille); font-size: var(--t-etikett); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border: 1px solid var(--line); color: var(--muted); vertical-align: middle; }
.kz-pflicht .kz-chip { color: var(--gelb); border-color: rgba(255,209,102,0.5); }
.kz-keine .kz-chip { color: var(--gruen); border-color: rgba(46,196,182,0.5); }
.kz-unsicher .kz-chip { color: var(--accent); border-color: rgba(79,140,255,0.5); }
.sa-form { display: flex; flex-direction: column; gap: var(--s-6); max-width: 52rem; }
.sa-abschnitt { border: 1px solid var(--line); border-radius: var(--r-karte); padding: var(--s-4) var(--s-6) var(--s-6); margin: 0; background: var(--karte); display: flex; flex-direction: column; gap: var(--s-3); }
.sa-abschnitt legend { font-weight: 800; font-size: var(--t-h); line-height: var(--lh-h); padding: 0 var(--s-2); }
.sa-feld { display: flex; flex-direction: column; gap: 6px; }
.sa-feld > label { font-size: var(--t-klein); font-weight: 600; color: var(--ink); max-width: 68ch; }
.sa-jn { display: flex; flex-direction: column; gap: 8px; }
.sa-opts { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-4); }
.sa-opts label.check { align-items: center; font-size: var(--t-klein); }
.sa-opts label.check input { margin-top: 0; }
.sa-tabelle th[scope=row] { width: 45%; font-weight: 600; color: var(--ink); }
.sa-tabelle td { color: var(--ink); }
.sa-offen { color: var(--gelb); font-weight: 700; }
.sa-satz { font-weight: 600; max-width: 68ch; }
.sa-unterschrift { margin-top: var(--s-6); color: var(--muted); overflow-wrap: anywhere; } /* die Unterschriftslinie aus Unterstrichen bricht um */
.sa-zurueck { display: inline; }
@media print {
  .sa-druck .pg-two { display: block; } .sa-seite, .sa-druck .pg-actions, .sa-druck .sp-block, .topbar, .ed-foot { display: none !important; }
  .sa-blatt { border: 0; box-shadow: none; background: none; color: #000; padding: 0; }
  .sa-tabelle th, .sa-tabelle td { color: #000; border-color: #999; } .sa-satz, .sa-unterschrift { color: #000; }
}
/* Titelseite: Inhaltskarte unter den zwei Spalten (vorher Inline-Stil, den die CSP blockiert hat; Paket F). */
.pg-card-inhalt { margin-top: 2rem; }
.pg-card-inhalt .regal-teile { width: 100%; }
/* Auf der Titelseite stehen die Teile oben buendig; die Liste haengt nicht am unteren Rand, und die Zeile ueber dem Teil
   („Teil IV · Abschnitte 15 – 19“) laeuft enger, damit sie in ihrer Spalte bleibt (Fotoprüfung 21. September 2026). */
.pg-card-inhalt .regal-teil { align-self: start; }
.pg-card-inhalt .regal-teil .rail-list { margin-top: 4px; }
.pg-card-inhalt .rail-rail { letter-spacing: .12em; }
.book3d-small .b3-title { font-size: 2.9em; text-wrap: pretty; }
/* Links im Fliesstext tragen den Unterstrich, damit Farbe nie der einzige Traeger ist (Designsprache, Lighthouse link-in-text-block). */
body.pg .pg-wrap p a:not(.btn):not([class]), body.pg .shop-empty a, body.pg .book p a, body.ed p a:not(.btn):not([class]) { text-decoration: underline; text-underline-offset: 3px; }
/* Druck, für alle Seiten (14. September 2026, Paket D): weißer Grund, schwarze Schrift, keine Leiste, kein Fuß, keine
   Verläufe. Die Blätter, Ergebnisseiten und Premium-Tools haben oben eigene Regeln; diese hier gilt zuerst, weil
   body.ed/body.pg sonst den dunklen Grund in den Druck tragen (Befund Nachweisordner-Druck, Sichtprüfung). */
@media print {
  html, body, body.ed, body.pg { background: #fff !important; color: #000 !important; }
  body.ed::before, body.pg::before, .pg-wrap::before, .ed-g7::before, .topbar, .topbar-solid, .spine, .site-footer, .ed-foot, .langswitch, .nav-burger, .skiplink { display: none !important; }
  .pg-wrap, .pg-card, .pg-card-soft, .pg-note, .pt .pg-card, .sa-blatt, .blatt .pg-card { background: none !important; box-shadow: none !important; }
  h1, h2, h3, h4, p, li, td, th, dt, dd, label, legend, small, .pg-lead, .pg-muted, .pg-fine, .ed-over, .pg-kicker, .rail-rail, .muted { color: #000 !important; }
  a { color: #000 !important; text-decoration: underline; }
  .btn, .btn-accent, .btn-ghost, .notice, form .pg-actions { display: none !important; }
  .sa-offen, .kz-chip, .tl-premium { color: #000 !important; }
}

/* Cover-Leiste vor dem Fuss (Stefans Wahl F4 A, 16. September 2026, gebaut 21. September): alle Titel als Bild, waagrecht schiebbar. */
.cover-leiste-wrap { position: relative; display: flex; flex-direction: column; gap: var(--s-4); padding-top: var(--s-8); padding-bottom: var(--s-8); border-top: 1px solid var(--sc-hairline); }
.cover-leiste { list-style: none; margin: 0; padding: var(--s-1) 0 var(--s-2); display: grid; grid-auto-flow: column; grid-auto-columns: clamp(120px, 11vw, 160px); gap: var(--s-4); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; }
.cover-leiste li { scroll-snap-align: start; }
.cover-leiste a { display: flex; flex-direction: column; gap: var(--s-2); color: var(--sc-ink); text-decoration: none; border-radius: var(--sc-r-md); transition: transform var(--sc-d-base) var(--sc-ease-out); }
.cover-leiste a:hover { transform: translateY(-3px); text-decoration: none; }
.cover-leiste a:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 4px; }
.cover-leiste img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 7; border-radius: 4px; box-shadow: 0 12px 30px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.08); background: #12151c; }
.cover-leiste span { font-size: var(--t-klein); line-height: 1.35; color: var(--sc-ink-soft); }
.cover-leiste span b { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--sc-accent); }
.cover-leiste-mehr { margin: 0; }
@media (max-width: 760px) { .cover-leiste { grid-auto-columns: 42%; } }
@media (prefers-reduced-motion: reduce) { .cover-leiste a { transition: none; } }

/* ===================================================================
   V4 "Fünf Stationen" (Variante C, Stefans Wahl vom 25. September 2026 nach dem Prototyp im Artefakt, docs/07):
   Stationsleiste mit Fortschrittslinie unter der Leiste, jede Station mit Nummer und Überschrift links (bleibt beim
   Scrollen stehen) und einem Block rechts. Band 1 in einer Karte mit vier Reitern, alle Titel als Slider unter den drei
   Linien, Tools als Slider mit Bild, Premium mit Vorteilen und Vergleich, Rückseite und Fragen in einer Station.
   Bewegung: Nummer leuchtet im Bild, Reiter blenden um, Karten heben sich; nichts läuft endlos (Abschnitt 9).
   =================================================================== */
:root { --st-bar: 48px; }
/* Markenakt zentriert, ohne Produktkarten (die stehen in Station I). */
.brand-center { align-items: center; text-align: center; max-width: 60rem; gap: var(--sc-5); }
.brand-center .brand-claim { max-width: 26ch; margin-top: var(--sc-4); font-size: clamp(1.6rem, 3vw, 2.6rem); }
.brand-center .brand-sub { text-align: center; }
/* Erster Bildschirm, Variante A (Stefan, 2. Oktober 2026, docs/16 Nr. 154): unter der Zeile „Für Betriebe ohne
   IT-Abteilung“ zwei Knöpfe (Check, Produkte) und die Grenze als Fußnote. Knöpfe wie überall (.btn), am Handy
   untereinander und volle Breite; die Fußnote in der kleinen Stufe, ohne Farbe als einzigem Träger. */
.brand-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); margin: 0; }
.brand-cta .btn { min-width: 15rem; }
.brand-fuss { margin: calc(var(--sc-5) * -1 + var(--sc-2)) 0 0; font-size: var(--t-klein); color: var(--sc-ink-soft); letter-spacing: .01em; }
@media (max-width: 600px) { .brand-cta { flex-direction: column; width: 100%; } .brand-cta .btn { width: 100%; min-width: 0; } }
.brand-center .brand-pillars { width: 100%; max-width: 56rem; text-align: left; }
.brand-down { display: inline-flex; align-items: center; gap: 10px; margin-top: var(--sc-4); font-size: var(--t-klein); color: var(--sc-ink-soft); text-decoration: none; }
.brand-down i { font-style: normal; color: var(--sc-accent-2); transition: transform var(--sc-d-base) var(--sc-ease-out); }
.brand-down:hover { color: var(--sc-ink); text-decoration: none; } .brand-down:hover i { transform: translateY(3px); }
.ed-brand { min-height: auto; padding-bottom: clamp(2.5rem, 5vw, 4rem); }
/* Stationsleiste */
.st-bar { position: sticky; top: 56px; z-index: calc(var(--sc-z-chrome) - 1); background: rgba(10,12,16,0.86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--sc-hairline); border-bottom: 1px solid var(--sc-hairline); }
.st-bar-in { display: flex; gap: 6px; max-width: var(--sc-maxw); margin: 0 auto; padding: 6px var(--sc-gutter); overflow-x: auto; scrollbar-width: none; }
.st-bar-in::-webkit-scrollbar { display: none; }
.st-bar-in > * { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: var(--sc-r-pill); border: 1px solid transparent; color: var(--sc-ink-soft); font-size: 13.5px; font-weight: 600; white-space: nowrap; text-decoration: none; transition: color var(--sc-d-base) var(--sc-ease-out), border-color var(--sc-d-base) var(--sc-ease-out), background var(--sc-d-base) var(--sc-ease-out); }
.st-bar-in > * > i { font-style: normal; font-weight: 800; color: var(--sc-accent-2); font-size: 12px; letter-spacing: .06em; }
.st-bar-in > a:hover { color: var(--sc-ink); border-color: var(--sc-hairline); text-decoration: none; }
.st-bar-in > .on { color: var(--sc-ink); background: rgba(79,140,255,0.12); border-color: rgba(79,140,255,0.35); }
.st-bar-in > a:focus-visible { outline: 2px solid var(--sc-accent-2); outline-offset: 2px; }
.st-prog { height: 2px; background: rgba(255,255,255,0.06); }
.st-prog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--sc-accent), var(--sc-accent-2)); transition: width 150ms linear; }
/* Stationen */
.st { border-top: 1px solid var(--sc-hairline); scroll-margin-top: calc(56px + var(--st-bar) + 8px); } /* Sprung per Anker landet unter Leiste und Stationsleiste, auch ohne Skript */
.st-in { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: clamp(24px, 3vw, 40px); align-items: start; }
@media (min-width: 1181px) { .st .ed-wrap, .ed-wrap.brand-stage, .ed-wrap.brand-head { padding-right: var(--sc-gutter); } } /* der Platz des alten Buchruecken-Rails (56 px) gehoert wieder der Seite */
.st-h { display: flex; gap: 16px; align-items: flex-start; position: sticky; top: calc(56px + var(--st-bar) + 24px); }
.st-num { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid rgba(46,196,182,0.35); display: grid; place-items: center; flex-shrink: 0; color: var(--sc-accent-2); transition: box-shadow var(--sc-d-slow) var(--sc-ease-out), border-color var(--sc-d-slow) var(--sc-ease-out), background var(--sc-d-slow) var(--sc-ease-out); }
.st-num i { font-style: normal; font-family: var(--sc-font-display); font-weight: 800; font-size: 17px; letter-spacing: .04em; }
.st.on .st-num { border-color: var(--sc-accent-2); background: rgba(46,196,182,0.12); box-shadow: 0 0 0 6px rgba(46,196,182,0.08), 0 0 30px rgba(46,196,182,0.25); }
.st-t { margin: 6px 0 6px; font-size: clamp(1.5rem, 2.4vw, 2rem); }
.st-s { padding-left: 0; border-left: 0; max-width: 26ch; font-size: var(--t-klein); line-height: var(--lh-klein); }
.st-c { min-width: 0; display: flex; flex-direction: column; gap: var(--sc-6); }
.st-fuss { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; margin: 0; }
.st-fuss .ed-fine { margin: 0; }
/* I Produkte */
.cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cards3 .range-card { grid-template-columns: 10px minmax(0, 1fr); grid-template-rows: auto auto; align-items: start; gap: 14px 14px; padding: 20px; background: linear-gradient(160deg, color-mix(in srgb, var(--series) 12%, transparent), var(--sc-surface) 60%); }
.cards3 .range-cover { grid-column: 2; justify-content: flex-end; }
.cards3 .range-cover .book3d { width: 104px; font-size: 3.9px; }
.st-regal-head { gap: 0; }
.st-regal-head .range-more { flex-wrap: wrap; }
.st .regal-slider { margin-right: 0; }
.st .rail.regal { padding-top: clamp(40px, 5vw, 64px); padding-bottom: 12px; }
.st-regal-infos { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 16px; min-height: 150px; }
.st-regal-infos .regal-kurz { align-items: center; }
.regal-weg { display: flex; align-items: center; gap: 16px; margin: 6px 0 0; }
.regal-preis { font-size: var(--t-h); font-weight: 800; letter-spacing: -.01em; }
.regal-weg .btn { height: 40px; padding: 0 18px; font-size: 14px; }
/* II Band 1: Cover links, Karte mit Reitern rechts */
.st .hero-glow { background: radial-gradient(45% 50% at 80% 60%, rgba(46,196,182,0.07), transparent 70%); }
.band { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.band-cover { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sc-4); padding-top: 12px; }
.band-cover .hero-book { width: 100%; }
.band-cover .book3d { width: clamp(240px, 26vw, 360px); font-size: clamp(9px, 0.95vw, 13px); }
.band-cover .ed-run { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 0; }
.band-card { position: relative; background: var(--sc-surface); border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-lg); padding: 22px; box-shadow: var(--sc-e2), var(--sc-edge); min-width: 0; }
.band-card.ed-paths { gap: 0; }
.tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: -22px -22px 20px; border-bottom: 1px solid var(--sc-hairline); background: rgba(255,255,255,0.02); border-radius: var(--sc-r-lg) var(--sc-r-lg) 0 0; overflow: hidden; }
.tabs button { display: flex; flex-direction: column; align-items: center; gap: 6px; background: transparent; border: 0; border-bottom: 3px solid transparent; color: var(--sc-ink-soft); padding: 16px 8px 12px; font-family: inherit; font-weight: 700; font-size: 13px; line-height: 1.2; text-align: center; cursor: pointer; transition: color var(--sc-d-base) var(--sc-ease-out), border-color var(--sc-d-base) var(--sc-ease-out), background var(--sc-d-base) var(--sc-ease-out); }
.tabs button svg { color: var(--sc-ink-soft); transition: color var(--sc-d-base) var(--sc-ease-out); }
.tabs button:hover { color: var(--sc-ink); background: rgba(255,255,255,0.03); }
.tabs button[aria-selected="true"] { color: var(--sc-ink); border-bottom-color: var(--sc-accent); background: rgba(79,140,255,0.08); }
.tabs button[aria-selected="true"] svg { color: var(--sc-accent); }
.tabs button:focus-visible { outline: 2px solid var(--sc-accent-2); outline-offset: -3px; }
.tabp[hidden] { display: none; }
.tabp { display: flex; flex-direction: column; gap: var(--sc-5); }
.tabp-in { animation: tabin 350ms var(--sc-ease-out); }
@keyframes tabin { from { opacity: .3; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* Ohne Skript stehen die Felder untereinander, mit Ueberschrift je Feld. */
html:not(.js) .tabp[hidden] { display: flex; }
html:not(.js) .tabs { display: none; }
.tab-fuss { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 0; padding-top: 14px; border-top: 1px solid var(--sc-hairline); font-size: var(--t-klein); color: var(--sc-ink-soft); }
.btn-s { height: 40px; padding: 0 18px; font-size: 14px; }
.band-card .ed-lede { margin: 0; font-size: var(--t-text); font-weight: 600; }
.band-card .leiter { display: flex; flex-direction: column; gap: 0; }
.band-card .leiter-q { font-size: var(--t-text); }
.band-card .leiter-step { padding-bottom: 18px; }
.band-card .ed-fine { margin: 0; }
.st-sheet-stage { position: static; min-height: 0; }
.st-sheet-stage .paper.book { position: static; width: 100%; }
.st-sheet-stage .paper .sheet { max-height: 380px; }
.st-sheet-stage .paper figcaption { position: static; width: 100%; margin-top: 12px; }
.seite-spread { display: flex; flex-direction: column; gap: var(--sc-4); }
.seite-texts .seite-text { gap: var(--sc-4); }
.band-card .paths-row-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.band-card .paths-fields label b { flex-wrap: wrap; }
.band-card .field-list { grid-template-columns: minmax(0, 1fr); }
.band-card .idx-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.band-card .idx-front .idx-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.band-card .idx-foot { margin: 0; }
/* III Tools: die Reihe ist der Slider, drei Karten je Ansicht */
.st .tl-reihe { padding: 0 12px; }
.st .tl-rail { grid-auto-columns: calc((100% - 28px) / 3); }
.st .tl-karte { background: var(--sc-surface); }
/* IV Premium */
.vorteile { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.vt { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: var(--sc-r-md); background: linear-gradient(160deg, rgba(46,196,182,0.10), var(--sc-surface) 60%); border: 1px solid var(--sc-hairline); }
.vt svg { width: 22px; height: 22px; color: var(--sc-accent-2); }
.vt b { font-size: var(--t-text); }
.vt span { font-size: var(--t-klein); line-height: var(--lh-klein); color: var(--sc-ink-soft); }
.vgl { border: 1px solid var(--sc-hairline); border-radius: var(--sc-r-md); overflow: hidden; font-size: var(--t-klein); }
.vgl-h, .vgl-r { display: grid; grid-template-columns: minmax(0, 1fr) 110px 110px; align-items: center; }
.vgl-h { background: rgba(255,255,255,0.03); padding: 10px 18px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sc-ink-soft); text-align: center; }
.vgl-h span:first-child { text-align: left; } .vgl-h .on { color: var(--sc-accent-2); }
.vgl-r { padding: 10px 18px; border-top: 1px solid var(--sc-hairline); }
.vgl-r i { justify-self: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.12); position: relative; }
.vgl-r i.ok { border-color: var(--sc-accent-2); background: rgba(46,196,182,0.15); }
.vgl-r i.ok::after { content: ""; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px; border: solid var(--sc-accent-2); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.pm-preis { display: flex; align-items: baseline; gap: 12px; margin: 0; }
.pm-preis strong { font-family: var(--sc-font-display); font-size: clamp(2rem, 3vw, 2.8rem); font-weight: 800; letter-spacing: -.03em; }
.pm-preis span { color: var(--sc-ink-soft); font-size: var(--t-klein); }
/* V Fragen und Kauf: Rueckseite volle Breite, Fragen darunter in zwei Spalten */
.ed-back-grid.rueck { grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); padding: clamp(20px, 3vw, 32px); border-radius: var(--sc-r-lg); border: 1px solid var(--sc-hairline-strong); background: linear-gradient(160deg, rgba(79,140,255,0.10), var(--sc-surface) 60%); box-shadow: var(--sc-e2), var(--sc-edge); }
.rueck .ed-back-book .book3d-small { --b3w: clamp(150px, 12vw, 180px); }
.rueck .ed-back-book { grid-row: 1 / span 2; }
.rueck .ed-col-form { grid-column: 2; }
.rueck .ed-h2-big { font-size: clamp(1.5rem, 2.4vw, 2.2rem); margin: 0; }
.rueck .ed-col-price { gap: var(--sc-3); min-width: 0; }
body.ed .rueck .price .amount { font-size: clamp(2.2rem, 3.6vw, 3.2rem); }
.rueck .ed-buy-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.rueck .ed-buy-cta .fine { flex-basis: 100%; margin: 0; font-size: 12.5px; color: var(--sc-ink-soft); }
.faq2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.faq2 .faq-cta { margin-top: 0; display: flex; flex-direction: column; gap: 16px; }
.fuerwen { gap: var(--sc-4); padding: 20px; }
.st .ed-foot { margin-top: clamp(2rem, 5vw, 4rem); }
/* Fuss: LinkedIn und Instagram */
.social { display: flex; gap: 8px; }
.social a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--sc-hairline); color: var(--sc-ink-soft); transition: color var(--sc-d-base) var(--sc-ease-out), border-color var(--sc-d-base) var(--sc-ease-out); }
.social a:hover { color: var(--sc-ink); border-color: var(--sc-accent); }
/* Titelseite und Kasse in Stationen (body.pg) */
.pg-stationen { padding-top: 0; }
.pg-stationen .st-bar { margin: 0 calc(-1 * var(--sc-gutter)); }
.pg-stationen .st { padding: clamp(2rem, 5vw, 4rem) 0; }
.pg-stationen .st-first { border-top: 0; }
.titel-r { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.titel-r .pg-h1 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); }
.titel-r .pg-includes { border-top: 0; padding-top: 0; }
.titel-buy { display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: var(--sc-r-lg); border: 1px solid var(--sc-hairline-strong); background: linear-gradient(160deg, rgba(79,140,255,0.10), var(--sc-surface) 60%); }
.titel-buy .pg-actions { margin: 0; }
.titel-buy .pg-actions-stack .btn { width: 100%; }
.titel-buy .buy-price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.titel-buy .buy-price strong { font-family: var(--sc-font-display); font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 800; letter-spacing: -.03em; }
.titel-buy .buy-price span { color: var(--sc-ink-soft); font-size: var(--t-klein); }
.toc-open { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; border-top: 0; padding-top: 0; }
.toc-open .regal-teil { padding-top: 18px; border-top: 2px solid var(--sc-accent); min-width: 0; }
.toc-open .rail-list { border-top: 0; }
.st .paper.book.probe { position: static; width: 100%; max-width: 640px; }
.st .paper.book.probe .sheet { max-height: 420px; }
.st .paper.book.probe figcaption { position: static; width: 100%; margin-top: 12px; }
.dazu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.dazu a { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: var(--sc-r-md); border: 1px solid transparent; color: var(--sc-ink); text-decoration: none; transition: border-color var(--sc-d-base) var(--sc-ease-out), background var(--sc-d-base) var(--sc-ease-out); }
.dazu a:hover { border-color: var(--sc-hairline); background: rgba(255,255,255,0.03); text-decoration: none; }
.dazu .book3d-small { --b3w: 100%; max-width: 150px; width: var(--b3w); font-size: 5.4px; transform: rotateY(-14deg) rotateX(3deg); }
.dazu b { font-size: 13.5px; line-height: 1.25; }
.dazu .ed-over { font-size: 10.5px; margin-top: 8px; }
.dazu .price { color: var(--sc-ink-soft); font-size: 13px; }
.st-brief { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.st-brief .pg-band { margin: 0; flex-direction: column; align-items: flex-start; }
.kasse { max-width: 640px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.kasse .st-bar { position: static; margin: 0; border-radius: var(--sc-r-pill); border: 1px solid var(--sc-hairline); background: var(--sc-surface); }
.kasse .st-bar-in { padding: 4px; }
.kasse .st-bar a { cursor: default; }
.sumbar { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding: 14px 18px; border-radius: var(--sc-r-md); background: var(--sc-surface); border: 1px solid var(--sc-hairline); }
.sumbar .book3d.book3d-small { --b3w: 64px; width: 64px; max-width: 64px; font-size: 2.4px; transform: rotateY(-12deg) rotateX(2deg); flex-shrink: 0; }
.sumbar > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sumbar > div > b { font-size: var(--t-h); line-height: var(--lh-h); }
.sumbar .pg-fine { margin: 0; }
.sumbar > strong { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; }
.sum-more summary { cursor: pointer; color: var(--sc-accent); font-weight: 700; font-size: var(--t-klein); letter-spacing: .04em; }
.sum-more .pg-includes { margin-top: 10px; border-top: 0; padding-top: 0; }
.kasse .pg-trust { border-top: 0; padding-top: 0; }
@media (max-width: 1180px) {
  .st-in { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .st-h { position: static; }
  .st-s { max-width: 60ch; }
  .band { grid-template-columns: minmax(0, 1fr); }
  .band-cover .book3d { width: clamp(240px, 44vw, 340px); font-size: clamp(9px, 1.6vw, 12.5px); }
}
@media (max-width: 1000px) {
  .cards3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toc-open { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st .tl-rail { grid-auto-columns: calc((100% - 14px) / 2); }
}
@media (max-width: 960px) {
  .faq2, .st-brief { grid-template-columns: minmax(0, 1fr); }
  .ed-back-grid.rueck { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .rueck .ed-back-book { grid-row: auto; } .rueck .ed-col-form { grid-column: auto; width: 100%; } .rueck .ed-buy-cta { justify-content: center; }
  body.ed .rueck .price { justify-content: center; }
}
@media (max-width: 760px) {
  .cards3, .vorteile, .dazu { grid-template-columns: minmax(0, 1fr); }
  .band-card { padding: 16px; }
  .tabs { margin: -16px -16px 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tabs button { padding: 12px 6px 10px; font-size: 12px; }
  .band-card .paths-row-fields, .band-card .idx-parts, .band-card .idx-front .idx-list { grid-template-columns: minmax(0, 1fr); }
  .vgl-h, .vgl-r { grid-template-columns: minmax(0, 1fr) 70px 70px; }
  .st .tl-rail { grid-auto-columns: 86%; }
  .st .tl-reihe { padding: 0; }
  .st-bar a { font-size: 12px; padding: 6px 10px; gap: 6px; }
  .toc-open { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .st-num, .st-bar a, .tabs button, .brand-down i, .social a { transition: none; } .tabp-in { animation: none; } }
@media print { .st-bar, .st-prog { display: none !important; } .st-h { position: static; } .tabp[hidden] { display: flex; } }

/* Ergebnisbilder (docs/16 Nr. 162, 2. Oktober 2026): Doppelseite aus dem PDF und ausgefuelltes Kit-Blatt. Ein Bild, kein Foto;
   Breite der Spalte, Rundung und Schatten wie die Karten, Bildunterschrift in der kleinen Stufe. */
.innen { margin: var(--s-6) 0 0; }
.innen img { display: block; width: 100%; height: auto; border-radius: var(--r-feld); border: 1px solid var(--sc-hairline); background: #0a0c10; }
.innen figcaption { margin-top: var(--s-2); font-size: var(--sc-t-xs); line-height: 1.45; color: var(--sc-ink-soft); max-width: 68ch; }
.innen-kit img { max-width: 720px; margin: 0 auto; }
.st-c > .innen + .innen { margin-top: var(--s-5); }
.st-c > .innen + .regal-teile { margin-top: var(--s-6); }
.seite-spread .innen-wrap { display: none; margin-top: var(--s-5); }
.seite-spread #seite-0:checked ~ .innen-wrap[data-seite="0"], .seite-spread #seite-1:checked ~ .innen-wrap[data-seite="1"], .seite-spread #seite-2:checked ~ .innen-wrap[data-seite="2"],
.seite-spread #seite-3:checked ~ .innen-wrap[data-seite="3"], .seite-spread #seite-4:checked ~ .innen-wrap[data-seite="4"], .seite-spread #seite-5:checked ~ .innen-wrap[data-seite="5"] { display: block; }
.seite-spread > .innen { margin-top: var(--s-5); }
/* Problemseite je kostenlosem Tool (docs/16 Nr. 163, 2. Oktober 2026): Problem, was der Check tut, Grenzen, drei Fragen,
   passender Titel, dann der Knopf zum Formular. Steht zwischen Seitenkopf und Formular, Breite wie der Kopf. */
.ti { margin: 0 0 clamp(2rem, 4vw, 3.5rem); padding-bottom: clamp(1.5rem, 3vw, 2.5rem); border-bottom: 1px solid var(--sc-hairline); }
.ti-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.ti-grid > * { min-width: 0; }
.ti-problem p { margin: 0 0 var(--s-3); color: var(--sc-ink-soft); max-width: 60ch; }
.ti-problem h2 { margin: 0 0 var(--s-3); max-width: 24ch; }
.ti-problem .pg-actions { margin-top: var(--s-4); }
.ti-side { gap: var(--s-3); }
.ti-grenzen { margin: 0; padding: 0 0 0 18px; color: var(--sc-ink-soft); font-size: var(--t-klein); }
.ti-grenzen li { margin: 0 0 6px; }
.ti-titel { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.ti-titel a { font-weight: 700; white-space: normal; overflow-wrap: anywhere; }
.ti-titel span { font-size: var(--t-klein); color: var(--sc-ink-soft); }
.ti-faq { margin-top: var(--s-5); }
@media (max-width: 760px) { .ti-grid { grid-template-columns: minmax(0, 1fr); } }

/* Karten mit Umfang (docs/16 Nr. 164, 2. Oktober 2026): Lesezeit als Punkt, Inhaltsverzeichnis ausklappbar. */
.shop-toc, .regal-toc { margin: 10px 0 0; font-size: var(--t-klein); color: rgba(245,245,247,0.7); }
.shop-toc > summary, .regal-toc > summary { cursor: pointer; display: inline-block; padding: 4px 0; color: var(--sc-ink); font-weight: 600; }
.shop-toc > summary:focus-visible, .regal-toc > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.toc-liste { margin: 6px 0 0; padding: 0 0 0 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 4px 24px; }
.toc-liste > li { margin: 0 0 6px; }
.toc-liste > li > b { display: block; font-weight: 600; color: var(--sc-ink); }
.toc-liste ol { margin: 2px 0 0; padding: 0 0 0 18px; }
.toc-liste ol li { margin: 0 0 2px; }
.regal-umfang { margin: 4px 0 0; font-size: var(--t-klein); color: rgba(245,245,247,0.6); }
.regal-toc { grid-column: 1 / -1; text-align: left; max-width: 44rem; margin-left: auto; margin-right: auto; }
.regal-toc > summary { display: block; text-align: center; }

/* Über Scutoria (Nr. 152, Fassung B): Text links in Absätzen bis 68 Zeichen, rechts die Karte „Weiter“; am Handy die
   Karte unter dem Text. Abstände aus den Tokens, Überschriften in der Stufe --t-h. */
.ueber-text h2 { margin-top: var(--sc-5); }
.ueber-text h2:first-child { margin-top: 0; }
.ueber-text p { margin: var(--sc-3) 0 0; max-width: 68ch; line-height: 1.6; color: var(--sc-ink-soft); }
.ueber-text .pg-fine { margin-top: var(--sc-5); }
.ueber-weiter p { margin: 0; }
.ueber-weiter p + p { margin-top: var(--sc-3); }
.fuerwen-ueber { margin: var(--sc-3) 0 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
@media (max-width: 760px) { .ueber { grid-template-columns: minmax(0, 1fr); } }