:root {
    --bg: #ddd7cd;
    --surface: rgba(221, 215, 205, 0.6);
    --surface-dark: rgba(208, 202, 192, 0.8);
    --ink: #101010;
    --muted: rgba(16, 16, 16, 0.58);
    --line: rgba(16, 16, 16, 0.16);
    --line-strong: rgba(16, 16, 16, 0.32);
    --shadow: 0 24px 60px rgba(0, 0, 0, 0.08);
    --spacing: clamp(1.25rem, 1.15rem + 1.35vw, 2.6rem);
    --content-width: min(1120px, calc(100vw - 3rem));
    /* Diese Stacks können direkt gegen Adobe Fonts ersetzt werden. */
    --font-display: "ivypresto-display", "Baskerville Display PT", "Iowan Old Style", "Times New Roman", serif;
    --font-body: "aktiv-grotesk", "Neue Haas Unica", "Aptos", "Segoe UI", sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    height: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body.home-mode {
    height: 100svh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

body.rule-mode {
    height: 100svh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.grain {
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.06;
    background-image: radial-gradient(circle at 1px 1px, rgba(0, 0, 0, 0.55) 1px, transparent 0);
    background-size: 24px 24px;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

.site-header,
.site-footer,
.page-shell {
    position: relative;
    z-index: 1;
}

.site-header,
.site-footer {
    width: var(--content-width);
    margin: 0 auto;
}

.site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.1rem 0;
    position: sticky;
    top: 0;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    z-index: 4;
}

.wordmark,
.login-trigger,
.eyebrow,
.featured-number,
.rule-number,
.search-number,
.stat-value {
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.wordmark,
.login-trigger,
.overlay-close,
.text-link,
.secondary-button,
button[type="submit"] {
    transition: opacity 280ms ease, transform 280ms ease, border-color 280ms ease, background-color 280ms ease;
}

.wordmark {
    font-size: 0.88rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    text-decoration: none;
    color: inherit;
}

.wordmark-logo-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.wordmark-logo {
    width: 56px;
    height: auto;
    flex-shrink: 0;
}

.wordmark-text {
    font-size: 0.96rem;
}

.wordmark-stein {
    display: inline-block;
    transform-origin: 92% 20%;
    transition: transform 540ms cubic-bezier(0.4, 0, 0.2, 1) 1.15s;
}

.wordmark-stein:hover {
    transform: rotate(-62deg) translate(0.22em, 0.34em);
}

.wordmark:hover .wordmark-logo {
    animation: logoWiggle 650ms ease-in-out;
}

/* Wordmark auf Startseite immer sichtbar */

.login-trigger,
.overlay-close,
.secondary-button,
button[type="submit"] {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink);
    padding: 0.9rem 1.2rem;
}

.login-trigger {
    border: none;
    background: transparent;
    color: var(--muted);
    padding: 0.35rem 0;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.82rem;
}

.login-trigger:hover,
.overlay-close:hover,
.secondary-button:hover,
button[type="submit"]:hover,
.text-link:hover {
    opacity: 0.72;
}

.page-shell {
    width: var(--content-width);
    margin: 0 auto;
    padding: 0 0 6.5rem;
}

body.home-mode .page-shell {
    flex: 1;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    padding: 0;
    overflow: hidden;
    position: relative;
}

body.rule-mode .page-shell {
    flex: 1;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    padding: 0;
    overflow: hidden;
    position: relative;
}

.onepage {
    display: grid;
    gap: clamp(2.4rem, 4.8vw, 5rem);
}

.full-screen {
    min-height: calc(100vh - 5.4rem);
}

.hero,
.featured-rule,
.rule-layout,
.search-page,
.auth-shell,
.dashboard,
.form-layout {
    animation: rise 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero {
    min-height: calc(100vh - 12rem);
    display: grid;
    align-content: center;
    gap: 1.55rem;
    padding: 3.4rem 0 2.6rem;
}

.intro-hero {
    grid-template-rows: auto auto minmax(0, 1fr);
    justify-items: center;
    align-content: start;
    gap: 1.2rem;
}

.hero-title {
    text-align: center;
    margin-top: clamp(2rem, 7vh, 5rem);
    font-size: clamp(3.3rem, 11vw, 8.7rem);
    line-height: 0.9;
    max-width: 13ch;
    animation: titleIn 1100ms cubic-bezier(0.16, 1, 0.3, 1) both;
}



.hero h1,
.search-page h1,
.auth-copy h1,
.dashboard h1,
.form-layout h1,
.rule-layout h1,
.featured-rule h2 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 0.94;
}

.hero h1 {
    max-width: 11ch;
    font-size: clamp(3.8rem, 10vw, 8rem);
}

.hero-copy,
.featured-body p,
.prose p,
.annotation-block p,
.auth-copy p,
.search-result p,
.recent-row,
.flash,
.muted {
    color: var(--muted);
}

.hero-copy {
    max-width: 40rem;
    font-size: 1.07rem;
    line-height: 1.75;
}

.search-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.8rem;
    max-width: 56rem;
    margin-top: 0.6rem;
}

.search-hero.modern {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    border: 1px solid var(--line);
    background: rgba(221, 215, 205, 0.35);
    padding: 0.4rem;
}

.search-hero input,
.auth-form input,
.auth-form textarea,
.rule-form input,
.rule-form textarea,
.rule-form select {
    width: 100%;
    border: 1px solid transparent;
    border-bottom-color: var(--line-strong);
    background: rgba(221, 215, 205, 0.25);
    padding: 1rem 0;
    color: var(--ink);
    outline: none;
    transition: border-color 280ms ease, background-color 280ms ease, transform 280ms ease;
}

.search-hero input:focus,
.auth-form input:focus,
.auth-form textarea:focus,
.rule-form input:focus,
.rule-form textarea:focus,
.rule-form select:focus {
    border-bottom-color: var(--ink);
    background: rgba(208, 202, 192, 0.4);
}

.search-hero.modern input {
    border: none;
    padding: 1rem 1.2rem;
    background: transparent;
}

.search-hero.modern input:focus {
    border: none;
}

.search-hero.modern button {
    padding-inline: 1.6rem;
}

.hero-actions,
.featured-meta,
.rule-meta,
.result-meta,
.dashboard-actions,
.section-headline,
.search-summary {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.text-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding-bottom: 0.18rem;
    border-bottom: 1px solid var(--line);
}

.text-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -1px;
    border-bottom: 1px solid var(--ink);
    transition: right 320ms ease;
}

.text-link:hover::after {
    right: 0;
}

.search-stage,
.featured-shell {
    padding: 1.6rem 0;
    border-top: 1px solid var(--line);
}

.featured-shell {
    width: min(100%, 64rem);
    border-top: none;
    padding-top: 0;
}

.top-centered-rule {
    text-align: center;
    width: min(100%, 54rem);
    margin: 0 auto;
}

.search-stage h2,
.featured-card h2 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2rem, 6vw, 4rem);
    line-height: 0.95;
}

.search-stage {
    width: min(100%, 70rem);
    border-top: none;
    padding-top: 1.1rem;
}

.search-hint {
    margin: 1.25rem 0;
    color: var(--muted);
    font-size: 0.95rem;
    text-align: center;
}

.featured-rule {
    display: grid;
    grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr);
    gap: 2rem;
    padding: 3rem 0 0;
    border-top: 1px solid var(--line);
}

.featured-number,
.rule-number,
.search-number,
.stat-value {
    font-size: clamp(1rem, 2vw, 1.25rem);
}

.featured-body h2 {
    font-size: clamp(2.6rem, 7vw, 5rem);
    margin-bottom: 1rem;
}

.featured-body p,
.prose p,
.annotation-block p,
.search-result p,
.auth-copy p,
.auth-form,
.rule-form,
.recent-row {
    line-height: 1.75;
}

.rule-layout {
    display: grid;
    gap: 2rem;
    padding-top: 3rem;
}

.rule-header {
    display: grid;
    gap: 1rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--line);
}

.rule-number {
    font-size: clamp(4rem, 12vw, 9rem);
}

.rule-layout h1 {
    font-size: clamp(2.8rem, 8vw, 5.6rem);
    max-width: 12ch;
}

.prose,
.annotation-block,
.search-results,
.stats-grid,
.recent-list {
    width: min(100%, 54rem);
}

.prose p {
    margin: 0;
    color: var(--ink);
    font-size: clamp(1.1rem, 1.2rem + 0.2vw, 1.35rem);
}

.annotation-block {
    padding-top: 1.2rem;
    border-top: 1px solid var(--line);
}

.admin-danger-zone {
    border-top-color: rgba(120, 24, 24, 0.35);
}

.admin-danger-zone .rule-form {
    width: min(100%, 32rem);
}

.admin-danger-zone .muted {
    margin: 0;
}

.history-list,
.recent-list {
    display: grid;
    gap: 0.9rem;
}

.history-entry,
.recent-row,
.search-result,
.stat-panel {
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--line);
}

.history-entry div,
.recent-row,
.search-link {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(4, minmax(auto, 1fr));
    align-items: start;
}

.search-link {
    grid-template-columns: minmax(5rem, 6rem) minmax(150px, 1fr);
}

.search-result h2 {
    margin: 0 0 0.5rem;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.8rem, 4vw, 3rem);
}

.search-result h3 {
    margin: 0 0 0.55rem;
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    font-weight: 400;
}

.search-results.rich {
    width: min(100%, 64rem);
    max-height: none;
    overflow: visible;
    margin: 0 auto;
    display: grid;
    gap: 0.5rem;
}

.panel-hover {
    transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1), background-color 320ms ease, border-color 320ms ease;
}

.panel-hover:hover {
    transform: translateY(-4px);
    border-color: var(--line-strong);
    background-color: rgba(208, 202, 192, 0.4);
}

.featured-card {
    width: min(100%, 64rem);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 1.2rem 0;
}

.featured-card p {
    color: var(--muted);
    line-height: 1.7;
}

.search-page,
.dashboard,
.form-layout,
.auth-shell {
    display: grid;
    gap: 2rem;
    padding-top: 2rem;
}

.spaced {
    justify-content: space-between;
    align-items: end;
}

.empty-state {
    padding: 2rem 0;
    border-top: 1px solid var(--line);
}

.auth-shell {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3rem;
    align-items: start;
}

.auth-form,
.rule-form {
    display: grid;
    gap: 1.35rem;
}

.auth-form label,
.rule-form label {
    display: grid;
    gap: 0.35rem;
}

.rule-form small {
    display: block;
    font-size: 0.82rem;
    line-height: 1.45;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
}

.stat-panel {
    display: grid;
    gap: 0.3rem;
}

.login-popup {
    border: 1px solid var(--line);
    background: #d7d1c6;
    color: var(--ink);
    width: min(30rem, calc(100vw - 2rem));
    box-shadow: var(--shadow);
    padding: 1rem;
}

.login-popup::backdrop {
    background: rgba(0, 0, 0, 0.28);
}

.login-popup-close-row {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.8rem;
}

.login-popup-head h2 {
    margin: 0 0 0.6rem;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
}

.login-popup-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
}

.login-popup-actions form {
    margin: 0;
}

.login-popup-actions .secondary-button,
.auth-form.compact button[type="submit"] {
    width: 100%;
    display: inline-flex;
    justify-content: center;
}

.auth-form.compact {
    gap: 0.9rem;
}

.flash-stack {
    position: fixed;
    top: 5.5rem;
    right: 1.5rem;
    z-index: 4;
    display: grid;
    gap: 0.6rem;
}

.flash {
    border: 1px solid var(--line);
    background: rgba(208, 202, 192, 0.7);
    padding: 0.9rem 1rem;
    min-width: 18rem;
    box-shadow: var(--shadow);
}

.flash-warning {
    border-color: rgba(153, 102, 0, 0.45);
    background: rgba(245, 226, 181, 0.65);
    color: #4d3400;
}

.site-footer {
    padding: 0.9rem 0 1.2rem;
    color: var(--muted);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.72;
}

body.home-mode .site-footer {
    align-self: end;
}

.history-block {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.source-list {
    display: grid;
    gap: 0.45rem;
}

.source-list .text-link {
    white-space: normal;
    word-break: break-word;
}

.recent-row {
    display: grid;
    gap: 0.7rem;
    grid-template-columns: 1fr;
}

.recent-main {
    display: grid;
    grid-template-columns: minmax(7.5rem, auto) minmax(200px, 1fr) auto auto;
    align-items: start;
    gap: 0.75rem;
    min-width: 0;
}

.recent-title {
    word-break: break-word;
}

.recent-history-link {
    justify-self: start;
}

.search-link {
    min-width: 0;
}

.search-link > div {
    min-width: 0;
}

.search-link h2 {
    word-break: break-word;
}

.rule-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.8rem;
}

.rule-counter {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.9rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--ink);
    padding: 0.5rem 0.75rem;
    background: rgba(0,0,0,0.04);
    border-left: 3px solid rgba(26, 26, 26, 0.3);
    margin-left: 0;
}

.user-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 1.5rem;
    align-items: center;
    padding: 1rem !important;
    background: var(--surface-dark);
    border: 1px solid var(--line);
    border-radius: 4px;
}

.user-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    overflow-wrap: normal;
}

.user-info strong {
    font-size: 1rem;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.user-info .muted {
    font-size: 0.85rem;
}

.user-meta {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.user-role {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    background: rgba(0,0,0,0.08);
    border-radius: 3px;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
}

.user-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.role-form {
    display: flex;
    align-items: center;
    gap: 0;
}

.role-form select {
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
    border: 1px solid var(--line-strong);
    background: var(--surface);
    border-radius: 3px;
    cursor: pointer;
}

.secondary-button.danger {
    border-color: #d32f2f;
    color: #d32f2f;
}

.secondary-button.danger:hover {
    background: rgba(211, 47, 47, 0.08);
}

.inline-form {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.delete-form {
    display: inline-flex;
}

.reset-dialog {
    border: 1px solid var(--line);
    background: #dad3c7;
    color: var(--ink);
    width: min(42rem, calc(100vw - 2rem));
    box-shadow: var(--shadow);
}

.reset-dialog::backdrop {
    background: rgba(0, 0, 0, 0.28);
}

.dialog-actions {
    display: flex;
    gap: 0.6rem;
}

.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;
}

/* ─── Onepage World ──────────────────────────────────────────── */

/* body.home-mode: kein Scroll, volle Fensterhöhe */
body.home-mode .site-header {
    flex-shrink: 0;
    border-bottom: 1px solid var(--line);
}

body.rule-mode .site-header {
    flex-shrink: 0;
    border-bottom: 1px solid var(--line);
}

body.home-mode .site-footer {
    display: block;
}

body.rule-mode .site-footer {
    display: none;
}

.rule-unified {
    display: grid;
    grid-template-columns: 34fr 66fr;
    grid-template-rows: 1fr;
    gap: 0;
    padding: 0;
    animation: none;
}

.rule-unified .rule-header {
    border-bottom: none;
    border-right: 1px solid var(--line);
    padding: clamp(2rem, 5vw, 5rem) clamp(1.5rem, 3.7vw, 3.7rem);
    display: grid;
    align-content: start;
    gap: 1.1rem;
}

.rule-unified .rule-number {
    font-size: clamp(4.8rem, 11vw, 10rem);
    letter-spacing: 0.04em;
    opacity: 0.86;
    line-height: 0.88;
}

.rule-unified h1 {
    font-size: clamp(2.1rem, 4.2vw, 4.6rem);
    line-height: 0.92;
    max-width: 100%;
    overflow-wrap: break-word;
    hyphens: auto;
    margin: 0;
}

.rule-unified .rule-one-main {
    padding: clamp(1.6rem, 3.3vw, 3rem) clamp(1.3rem, 4.6vw, 5rem);
    display: grid;
    align-content: start;
    gap: 1.2rem;
}

.rule-unified .prose,
.rule-unified .annotation-block,
.rule-unified .rule-nav,
.rule-unified .history-block {
    width: 100%;
    max-width: 62rem;
}

.rule-unified .prose p {
    font-size: clamp(1.08rem, 1.15vw, 1.28rem);
    line-height: 1.9;
    color: #151515;
}

.rule-unified .annotation-block {
    border-top: 1px solid rgba(16, 16, 16, 0.2);
    padding-top: 1.05rem;
}

.rule-unified .annotation-block .eyebrow {
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    opacity: 0.82;
    margin-bottom: 0.35rem;
}

.rule-unified .subdued-tags p {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.12);
    padding: 0.55rem 0.8rem;
    line-height: 1.45;
}

.rule-unified .rule-nav {
    grid-template-columns: 1fr auto 1fr;
    gap: 0.9rem;
}

.rule-unified .rule-content-area {
    display: grid;
    align-content: start;
    gap: 1.2rem;
}

.rule-unified .history-block {
    gap: 0.8rem;
}

body.rule-mode .page-shell {
    display: flex;
    flex-direction: column;
}

body.rule-mode .page-shell > .rule-unified {
    flex: 1;
    min-height: 0;
    height: 0;
    container-type: size;
    container-name: rule-layout;
}

/* Kein Scrollen: linke Spalte clippt still wenn nötig */
body.rule-mode .page-shell > .rule-unified .rule-header {
    overflow: hidden;
    min-height: 0;
}

/* Kein Scrollen: rechte Spalte – Nav/Share immer unten sichtbar */
body.rule-mode .page-shell > .rule-unified .rule-one-main {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: clamp(1rem, 2.2cqh, 3rem) clamp(1rem, 3.5cqw, 5rem);
    gap: clamp(0.4rem, 1cqh, 1.2rem);
}

body.rule-mode .page-shell > .rule-unified .rule-content-area {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: grid;
    align-content: start;
    gap: clamp(0.3rem, 0.85cqh, 1.2rem);
}

/* Typografie skaliert mit verfügbarer Höhe — kein Scrollen nötig */
@container rule-layout (min-height: 1px) {
    .rule-unified .rule-header {
        padding: clamp(1rem, 3cqh, 5rem) clamp(1rem, 2.2cqw, 3.7rem);
        gap: clamp(0.4rem, 0.8cqh, 1.1rem);
    }

    .rule-unified .rule-number {
        font-size: clamp(3rem, 10cqh, 9rem);
    }

    .rule-unified h1 {
        font-size: clamp(1.5rem, 4.8cqh, 4.6rem);
        line-height: 1.0;
    }

    .rule-unified .prose p {
        font-size: clamp(0.84rem, 1.9cqh, 1.18rem);
        line-height: 1.7;
    }

    .rule-unified .annotation-block {
        padding-top: clamp(0.3rem, 0.7cqh, 1.05rem);
    }

    .rule-unified .annotation-block p,
    .rule-unified .annotation-block a,
    .rule-unified .annotation-block span {
        font-size: clamp(0.78rem, 1.6cqh, 0.96rem);
        line-height: 1.5;
    }

    .rule-unified .annotation-block .eyebrow {
        font-size: clamp(0.54rem, 0.72cqh, 0.68rem);
        margin-bottom: clamp(0.15rem, 0.32cqh, 0.35rem);
    }

    .rule-unified .secondary-button,
    .rule-unified .text-link {
        font-size: clamp(0.7rem, 1.35cqh, 0.9rem);
        padding: clamp(0.35rem, 0.75cqh, 0.9rem) clamp(0.6rem, 1.2cqh, 1.2rem);
    }
}

@media (max-width: 960px) {
    body.rule-mode {
        height: auto;
        min-height: 100svh;
        overflow-y: auto;
    }

    body.rule-mode .site-header {
        position: sticky;
        top: 0;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding-left: clamp(0.75rem, 3vw, 1.5rem);
        padding-right: clamp(0.75rem, 3vw, 1.5rem);
        box-sizing: border-box;
    }

    body.rule-mode .page-shell {
        overflow: visible;
        flex: none;
        height: auto;
    }

    body.rule-mode .page-shell > .rule-unified {
        height: auto;
        container-type: normal;
    }

    body.rule-mode .page-shell > .rule-unified .rule-header {
        overflow: visible;
        padding: clamp(1.4rem, 5vw, 2.5rem) clamp(1rem, 4vw, 2rem);
        gap: 0.75rem;
    }

    body.rule-mode .page-shell > .rule-unified .rule-one-main {
        display: grid;
        align-content: start;
        flex-direction: unset;
        overflow: visible;
        padding: clamp(1.2rem, 4vw, 2.5rem) clamp(1rem, 4vw, 2.5rem);
        gap: 1rem;
    }

    body.rule-mode .page-shell > .rule-unified .rule-content-area {
        overflow: visible;
        display: grid;
        align-content: start;
        gap: 1rem;
    }

    .rule-unified {
        position: static;
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .rule-unified .rule-header {
        border-right: none;
        border-bottom: 1px solid var(--line);
    }

    .rule-unified .rule-number {
        font-size: clamp(4rem, 16vw, 7rem);
    }

    .rule-unified h1 {
        font-size: clamp(2rem, 7vw, 3.5rem);
        line-height: 1.0;
    }

    .rule-unified .rule-one-main {
        overflow: visible;
    }
}

/* Die page-shell füllt den Rest der Fensterhöhe */
/* (schon oben gesetzt) */

/* World-Container: füllt die page-shell vollständig */
.world {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 38fr 62fr;
}

/* ─── Linke Spalte ─── */
.world-left {
    border-right: 1px solid var(--line);
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: clamp(2rem, 5vw, 5rem) clamp(1.5rem, 4vw, 4rem);
}

.world-left-inner {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    width: 100%;
}

.world-title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2rem, 4.5vw, 5.2rem);
    line-height: 0.94;
    animation: titleIn 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.world-sub {
    margin: 0;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    animation: rise 700ms 80ms both;
}

.world-random {
    display: inline-flex;
    align-items: center;
    background: var(--ink);
    color: var(--bg);
    border: none;
    padding: 0.9rem 1.8rem;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    width: fit-content;
    transition: opacity 220ms, transform 220ms;
    animation: rise 700ms 160ms both;
}

.world-random:hover {
    opacity: 0.8;
    transform: translateY(-2px);
}

.world-teaser {
    background: none;
    border: none;
    border-top: 1px solid var(--line);
    padding: 1.2rem 0 0;
    text-align: left;
    cursor: pointer;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    transition: opacity 220ms;
    animation: rise 700ms 240ms both;
}

.world-teaser:hover {
    opacity: 0.65;
}

.world-teaser-title {
    font-family: var(--font-display);
    font-size: clamp(0.95rem, 1.8vw, 1.55rem);
    font-weight: 400;
    line-height: 1.15;
}

/* ─── Rechte Spalte ─── */
.world-right {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.world-search-bar {
    flex-shrink: 0;
    padding: 1.1rem clamp(1.2rem, 3vw, 3rem);
    border-bottom: 1px solid var(--line);
}

.world-search-bar input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(16,16,16,0.2);
    padding: 0.6rem 0;
    font-size: clamp(0.95rem, 1.4vw, 1.2rem);
    color: var(--ink);
    outline: none;
    transition: border-color 220ms;
}

.world-search-bar input:focus {
    border-bottom-color: var(--ink);
}

.world-search-bar input::placeholder {
    color: var(--muted);
}

.world-results-wrap {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
}

[data-search-results] {
    display: flex;
    flex-direction: column;
}

.world-result {
    display: grid;
    grid-template-columns: minmax(3.5rem, 4.5rem) minmax(0, 1fr);
    gap: 0.9rem;
    align-items: baseline;
    background: none;
    border: none;
    border-bottom: 1px solid var(--line);
    padding: 0.95rem clamp(1.2rem, 3vw, 3rem);
    text-align: left;
    cursor: pointer;
    color: inherit;
    transition: background 200ms;
    width: 100%;
}

.world-result:hover {
    background: rgba(0,0,0,0.035);
}

.wr-num {
    font-size: 0.76rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 500;
    padding-top: 0.2em;
}

.wr-title {
    font-family: var(--font-display);
    font-size: clamp(0.95rem, 1.5vw, 1.35rem);
    font-weight: 400;
    line-height: 1.2;
}

/* ─── Detail-Drawer ─── */
.world-detail {
    position: absolute;
    inset: 0;
    background: var(--bg);
    transform: translateX(105%);
    transition: transform 480ms cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 10;
    pointer-events: none;
    box-shadow: -4px 0 40px rgba(0,0,0,0.07);
}

.world-detail[data-visible] {
    transform: translateX(0);
    pointer-events: auto;
}

.detail-back {
    flex-shrink: 0;
    background: none;
    border: none;
    border-bottom: 1px solid var(--line);
    padding: 0.95rem clamp(1.2rem, 3vw, 3rem);
    text-align: left;
    cursor: pointer;
    color: var(--muted);
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: color 200ms, background 200ms;
}

.detail-back:hover {
    color: var(--ink);
    background: rgba(0,0,0,0.02);
}

.detail-scroll {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    padding: clamp(2rem, 4vw, 4rem) clamp(1.5rem, 7vw, 10rem);
}

.context-joke-bubble {
    position: fixed;
    left: 50%;
    bottom: 1.25rem;
    transform: translateX(-50%) translateY(8px);
    background: rgba(16, 16, 16, 0.94);
    color: #f3f1ed;
    border: 1px solid rgba(243, 241, 237, 0.24);
    border-radius: 999px;
    padding: 0.55rem 0.9rem;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    z-index: 120;
    pointer-events: none;
    opacity: 0;
    transition: opacity 180ms ease, transform 180ms ease;
}

.context-joke-bubble[data-visible] {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.detail-rule-num {
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 1rem;
}

.detail-rule-title {
    margin: 0 0 2rem;
    font-family: var(--font-display);
    font-size: clamp(2rem, 5.5vw, 4.8rem);
    font-weight: 400;
    line-height: 0.96;
    max-width: 18ch;
}

.detail-rule-body {
    font-size: clamp(1rem, 1.2vw, 1.22rem);
    line-height: 1.8;
    max-width: 50rem;
    margin: 0 0 2.5rem;
    color: var(--ink);
}

.detail-rule-interpretation {
    border-top: 1px solid var(--line);
    padding-top: 1.4rem;
    color: var(--muted);
    font-size: 0.97rem;
    line-height: 1.75;
    max-width: 50rem;
    margin-bottom: 2.5rem;
}

.detail-rule-interpretation .eyebrow {
    display: block;
    margin-bottom: 0.6rem;
}

.detail-rule-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
    padding-top: 1.6rem;
    border-top: 1px solid var(--line);
}

.detail-open-full {
    margin-left: auto;
    border: 1px solid var(--line-strong);
    padding: 0.75rem 1.4rem;
    font-size: 0.83rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    transition: opacity 200ms, background 200ms;
    display: inline-block;
}

.detail-open-full:hover {
    opacity: 0.7;
}

.detail-loading {
    padding: 4rem 0;
    color: var(--muted);
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.detail-loading::before {
    content: "";
    width: 1rem;
    height: 1rem;
    border: 1.5px solid rgba(16,16,16,0.2);
    border-top-color: var(--ink);
    border-radius: 50%;
    animation: worldSpin 700ms linear infinite;
    flex-shrink: 0;
}

@keyframes worldSpin { to { transform: rotate(360deg); } }

/* ─── Onepage World: Mobile ─── */
@media (max-width: 780px) {
    /* Auf Mobile: natürlicher Scroll statt gesperrter Viewport */
    body.home-mode {
        height: auto;
        min-height: 100svh;
        overflow-x: hidden;
        overflow-y: auto;
    }

    body.home-mode .page-shell {
        overflow: visible;
        flex: none;
        height: auto;
    }

    .world {
        position: static;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        height: auto;
        min-height: 0;
    }

    .world-left {
        border-right: none;
        border-bottom: 1px solid var(--line);
        padding: 1.4rem clamp(1rem, 4vw, 1.8rem);
        align-items: flex-start;
    }

    .world-left-inner {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.8rem;
        align-items: center;
    }

    .world-title {
        font-size: clamp(1.4rem, 7vw, 2.2rem);
        width: 100%;
        white-space: nowrap;
        animation: none;
    }

    .world-sub { display: none; }
    .world-teaser { display: none; }

    .world-random {
        animation: none;
        padding: 0.7rem 1.2rem;
        font-size: 0.78rem;
    }

    .world-right {
        overflow: visible;
        height: auto;
    }

    .world-results-wrap {
        overflow: visible;
        flex: none;
        height: auto;
    }

    /* Drawer auf Mobile: fixed, volle Seite */
    .world-detail {
        position: fixed;
        inset: 0;
    }

    .detail-scroll {
        padding: 1.5rem;
    }

    .detail-open-full {
        margin-left: 0;
    }
}

/* ─── End Onepage World ───────────────────────────────────────── */



.stagger-delay-2 {
    animation-delay: 240ms;
}




@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(22px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes titleIn {
    from {
        opacity: 0;
        transform: translateY(24px);
        letter-spacing: 0.03em;
    }
    to {
        opacity: 1;
        transform: translateY(0);
        letter-spacing: 0;
    }
}

@keyframes logoWiggle {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(-9deg); }
    50% { transform: rotate(7deg); }
    75% { transform: rotate(-4deg); }
    100% { transform: rotate(0deg); }
}

.history-table {display: grid; gap: 0.5rem;}
.history-header {display: grid; grid-template-columns: minmax(120px, 1fr) minmax(150px, 1fr) minmax(150px, 2fr); gap: 1rem; padding: 0.75rem 1rem; background: rgba(0,0,0,0.05); font-weight: 500; border-radius: 3px;}
.history-row {display: grid; grid-template-columns: minmax(120px, 1fr) minmax(150px, 1fr) minmax(150px, 2fr); gap: 1rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); align-items: start;}
.hist-editor {overflow-wrap: break-word; word-break: break-word; min-width: 0;}
.hist-timestamp {white-space: nowrap; font-size: 0.85rem;}
.hist-note {overflow-wrap: break-word; word-break: break-word; min-width: 0;}
@media (max-width: 768px) {.history-header {display: none;}
.history-row {grid-template-columns: 1fr; gap: 0.5rem;}
.hist-editor::before {content:  Editor: ; font-weight: 500;}
.hist-timestamp::before {content: Datum: ; font-weight: 500;}
.hist-note::before {content: Änderung: ; font-weight: 500;}}

@media (max-width: 900px) {
    .featured-rule,
    .auth-shell,
    .stats-grid,
    .history-entry div,
    .recent-row,
    .user-row {
        grid-template-columns: 1fr;
    }

    .search-hero {
        grid-template-columns: 1fr;
    }

    .recent-main {
        grid-template-columns: 1fr;
    }

    .rule-nav {
        grid-template-columns: 1fr;
        justify-items: start;
    }

    .user-actions {
        justify-content: flex-start;
    }

    .search-hero.modern {
        padding: 0.25rem;
    }

    .page-shell {
        padding-bottom: 5rem;
    }

    .onepage {
        gap: 2.2rem;
    }
}

@media (max-width: 640px) {
    .site-header,
    .site-footer,
    .page-shell {
        width: calc(100vw - 1.5rem);
    }

    .hero {
        min-height: 0;
        padding-top: 2.2rem;
        padding-bottom: 2rem;
    }

    .hero-title {
        margin-top: 1rem;
        font-size: clamp(2.2rem, 12vw, 3.1rem);
    }

    .site-header {
        gap: 0.6rem;
        padding-top: 0.8rem;
        padding-bottom: 0.8rem;
    }

    .wordmark {
        font-size: 0.78rem;
        gap: 0.45rem;
        min-width: 0;
    }

    .wordmark-logo {
        width: 44px;
    }

    .login-trigger {
        padding: 0.6rem 0.75rem;
        white-space: nowrap;
    }

    .center-actions {
        justify-content: center;
        width: 100%;
        gap: 0.55rem;
    }

    .center-actions .secondary-button,
    .center-actions .text-link {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .search-stage {
        padding-top: 0.5rem;
    }

    .search-hero.modern {
        border-width: 1px;
        padding: 0.35rem;
    }

    .search-hero.modern input {
        padding: 0.85rem 0.9rem;
    }

    .search-hero.modern button {
        width: 100%;
        padding: 0.8rem 0.9rem;
    }

    .search-link {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }

    .search-number {
        font-size: 0.86rem;
    }

    .search-result h3 {
        font-size: clamp(1.25rem, 6.5vw, 1.75rem);
    }

    .rule-counter {
        font-size: 0.82rem;
        padding: 0.45rem 0.6rem;
    }

    .user-row {
        gap: 0.8rem;
        padding: 0.8rem !important;
    }

    .user-actions,
    .role-form,
    .delete-form,
    .dialog-actions {
        width: 100%;
    }

    .user-actions button,
    .role-form select,
    .role-form button,
    .delete-form button,
    .dialog-actions button {
        width: 100%;
    }

    .role-form {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.45rem;
    }

    .search-results.rich {
        max-height: none;
        overflow: visible;
    }

    .flash-stack {
        left: 0.75rem;
        right: 0.75rem;
        top: auto;
        bottom: 0.75rem;
    }

    .site-footer {
        padding-bottom: 1rem;
        font-size: 0.64rem;
    }
}

@media (max-width: 390px) {
    .wordmark span {
        display: none;
    }

    .wordmark-logo {
        width: 38px;
    }

    .site-header,
    .site-footer,
    .page-shell {
        width: calc(100vw - 1rem);
    }

    .hero-title {
        font-size: clamp(1.9rem, 11vw, 2.4rem);
    }

    .search-results.rich {
        max-height: none;
        overflow: visible;
    }
}