/* ══════════════════════════════════════════════════════════════════ NEXETH — Überschriften-Dekor (Vorschau, 22.09.2026) ────────────────────────────────────────────────────────────────── Angelehnt an die Rechtecke auf ln-design.net, auf den dunklen Nexeth-Grund übersetzt: dort liegen graue Flächen und dünne Rahmen auf Hellgrau, hier müssen sie andersherum funktionieren. Aufteilung: Hero → Unterlinie (dicker kurzer Balken + dünne Linie) alle anderen → umrandete Rechtecke, unterschiedlich dick, abwechselnd grau und orange Die vier Varianten unterscheiden sich nur in der Strichstärke der Rechtecke — von hauchdünn bis kräftig. Der Hero bleibt in allen gleich. ES IST STANDARDMÄSSIG AUS. Sichtbar nur, wenn eine der Klassen deko-1 … deko-4 trägt; die setzt js/nx-heading-decor.js anhand von ?deko=N in der Adresse. KOMPLETT ENTFERNEN: die Zeilen für nx-heading-decor.css und js/nx-heading-decor.js aus den HTML-Dateien löschen. Es hängt sonst nichts davon ab, keine bestehende Regel wurde angefasst. ══════════════════════════════════════════════════════════════════ */ .nxdeko-wrap { position: relative; display: block; } .nxdeko-wrap::before, .nxdeko-wrap::after { pointer-events: none; } /* reine Zier */ @media (prefers-reduced-motion: no-preference) { body[class*="deko-"] .nxdeko-wrap::before, body[class*="deko-"] .nxdeko-wrap::after { animation: nxdekoRein .5s cubic-bezier(.22,1,.36,1) both; } } @keyframes nxdekoRein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* ─── HERO · Unterlinie ─────────────────────────────────────────── Dicker kurzer Balken, dann eine dünne Linie, die weiterläuft — das Muster unter der Hero-Zeile auf ln-design. In allen vier Varianten identisch. */ body[class*="deko-"] .nxdeko-hero { padding-bottom: 22px; } body[class*="deko-"] .nxdeko-hero::before { content: ''; position: absolute; left: 0; bottom: 0; width: 76px; height: 7px; background: var(--o, #ff6b00); } body[class*="deko-"] .nxdeko-hero::after { content: ''; position: absolute; left: 88px; right: 0; bottom: 3px; height: 1px; background: rgba(255, 107, 0, .3); } /* ─── ÜBRIGE ÜBERSCHRIFTEN · umrandete Rechtecke ────────────────── Die Strichstärke wechselt von Überschrift zu Überschrift, damit nicht alle gleich aussehen. Welche Überschrift welche Stärke bekommt, steuert js/nx-heading-decor.js über data-deko-i (1–4) — der Wechsel ist also fest und wiederholbar, nicht zufällig. Grau ist bewusst rgba(232,232,232,…) statt eines festen Grautons: so bleibt es auf jedem Hintergrund gleich hell wirkend. */ body[class*="deko-"] .nxdeko-box { padding: 22px 26px; border-style: solid; } /* Grundstärken je Position im Wechsel — Variante 1: fein */ body.deko-1 .nxdeko-box[data-deko-i="1"] { border-width: 1px; border-color: rgba(232,232,232,.28); } body.deko-1 .nxdeko-box[data-deko-i="2"] { border-width: 1px; border-color: rgba(255,107,0,.5); } body.deko-1 .nxdeko-box[data-deko-i="3"] { border-width: 2px; border-color: rgba(232,232,232,.22); } body.deko-1 .nxdeko-box[data-deko-i="4"] { border-width: 1px; border-color: rgba(255,107,0,.35); } /* Variante 2: mittel */ body.deko-2 .nxdeko-box[data-deko-i="1"] { border-width: 2px; border-color: rgba(232,232,232,.3); } body.deko-2 .nxdeko-box[data-deko-i="2"] { border-width: 2px; border-color: rgba(255,107,0,.6); } body.deko-2 .nxdeko-box[data-deko-i="3"] { border-width: 3px; border-color: rgba(232,232,232,.25); } body.deko-2 .nxdeko-box[data-deko-i="4"] { border-width: 2px; border-color: rgba(255,107,0,.4); } /* Variante 3: gemischt — der deutlichste Unterschied von Kasten zu Kasten */ body.deko-3 .nxdeko-box[data-deko-i="1"] { border-width: 1px; border-color: rgba(232,232,232,.3); } body.deko-3 .nxdeko-box[data-deko-i="2"] { border-width: 3px; border-color: var(--o, #ff6b00); } body.deko-3 .nxdeko-box[data-deko-i="3"] { border-width: 2px; border-color: rgba(232,232,232,.35); } body.deko-3 .nxdeko-box[data-deko-i="4"] { border-width: 4px; border-color: rgba(255,107,0,.55); } /* Variante 4: kräftig */ body.deko-4 .nxdeko-box[data-deko-i="1"] { border-width: 3px; border-color: rgba(232,232,232,.32); } body.deko-4 .nxdeko-box[data-deko-i="2"] { border-width: 4px; border-color: var(--o, #ff6b00); } body.deko-4 .nxdeko-box[data-deko-i="3"] { border-width: 3px; border-color: rgba(232,232,232,.4); } body.deko-4 .nxdeko-box[data-deko-i="4"] { border-width: 5px; border-color: rgba(255,107,0,.6); } /* ─── Schmale Geräte ────────────────────────────────────────────── Auf einem Telefon frisst ein Rahmen mit 26 px Innenabstand spürbar Platz, und die Rahmenstärke wird zurückgenommen, damit ein 5-px-Rand nicht die halbe Zeile auffrisst. */ @media (max-width: 700px) { body[class*="deko-"] .nxdeko-box { padding: 15px 17px; } body.deko-4 .nxdeko-box, body.deko-3 .nxdeko-box[data-deko-i="4"] { border-width: 2px; } body[class*="deko-"] .nxdeko-hero::before { width: 54px; height: 5px; } body[class*="deko-"] .nxdeko-hero::after { left: 64px; } } /* ─── Umschalter (nur bei ?deko= sichtbar) ──────────────────────── Damit Strichstärken verglichen werden können, ohne jedes Mal neu zu deployen. */ .nxdeko-schalter { position: fixed; z-index: 9800; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; background: #1a1a1a; border: 1px solid rgba(255, 255, 255, .16); border-radius: 3px; padding: 7px 9px; font: 500 .68rem/1 system-ui, sans-serif; color: #e8e8e8; } .nxdeko-schalter span { color: #808080; letter-spacing: .2em; text-transform: uppercase; font-size: .58rem; margin-right: 4px; } .nxdeko-schalter button { background: none; border: 1px solid rgba(255, 255, 255, .2); color: #e8e8e8; min-width: 34px; min-height: 30px; border-radius: 2px; cursor: pointer; font: inherit; } .nxdeko-schalter button:hover { border-color: var(--o, #ff6b00); color: var(--o, #ff6b00); } .nxdeko-schalter button[aria-pressed="true"] { background: var(--o, #ff6b00); border-color: var(--o, #ff6b00); color: #141414; }