/*
 * Lufox -- Gestaltung des Forum-Themes (liegt nach tokens.css und custom.css, überschreibt beide).
 *
 * Prinzip: keine Farben, Radien oder Schatten als Literale -- alles kommt aus css/tokens.css. Hell/Dunkel
 * entscheidet der Kern (body.dark), diese Datei kennt beide Schemata nur über die Variablen.
 * Fomantic UI liefert Layout und Verhalten; hier werden nur Flächen, Linien, Text, Knöpfe und Eingaben
 * auf die Marke gezogen. Wer etwas ändert: ?v= in template.php hochzählen.
 */

@font-face {
    font-family: "Geist Sans";
    src: url("../fonts/geist-sans.woff2") format("woff2");
    font-weight: 100 900;
    font-display: swap;
}
@font-face {
    font-family: "Geist Mono";
    src: url("../fonts/geist-mono.woff2") format("woff2");
    font-weight: 100 900;
    font-display: swap;
}

/* ---- Grund ------------------------------------------------------------------------------------- */
html { background: var(--bg); }
body, body.pushable > .pusher, body.dark, body.dark > .pusher {
    background: var(--bg);
    color: var(--text);
    font-family: var(--schrift);
    -webkit-font-smoothing: antialiased;
}
body::before {
    /* Körnung wie blackzack.dev: feines Rauschen über dem Grund, ohne Bilddatei */
    content: "";
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    opacity: var(--grain-opacity);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
#wrapper { position: relative; z-index: 1; }
body, .ui, .ui.header, .ui.menu, .ui.button, .ui.input input, .ui.form input, .ui.form textarea, .ui.form select,
.ui.dropdown, .ui.table, .ui.message, .ui.card, .ui.modal, .ui.popup, .ui.label, .ui.breadcrumb, .ui.list {
    font-family: var(--schrift);
}
code, pre, .ui.code, kbd, .lufox-mono { font-family: var(--schrift-mono); }
h1, h2, h3, h4, h5, .ui.header { color: var(--text); letter-spacing: var(--titel-spationierung); }
a { color: var(--accent); transition: color var(--dauer) var(--kurve); }
a:hover { color: var(--accent-2); }
p, .ui.segment, .ui.card > .content, .ui.list .item { color: var(--text); }
.ui.header .sub.header, .ui.list .item .description, .ui.card .meta, .ui.card .extra, small, .text-muted { color: var(--text-muted) !important; }
::selection { background: var(--accent-soft); }

.lufox-kicker {
    font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: var(--kicker-spationierung); color: var(--text-muted); margin-bottom: 0.5rem;
}

/* ---- Marke ------------------------------------------------------------------------------------- */
.lufox-marke { display: inline-block; height: 2rem; width: auto; color: var(--text); vertical-align: middle; }
.lufox-marke.marke-navbar { height: 2rem; }
.lufox-marke.marke-fuss { height: 1.75rem; opacity: 0.85; }
.lufox-marke.marke-seitenleiste { height: 2.25rem; }
.lufox-logo { max-height: 2.25rem; width: auto; display: block; }
.lufox-marke-item { padding-top: 0.4em !important; padding-bottom: 0.4em !important; }

/* ---- Navbar ------------------------------------------------------------------------------------ */
#navbar.ui.secondary.menu, body.dark #navbar.ui.secondary.menu:not(.inverted) {
    background: color-mix(in srgb, var(--bg-elevated) 82%, transparent);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
    margin: 0; border-radius: 0; box-shadow: none;
    position: sticky; top: 0; z-index: 100;
}
#navbar .item, #navbar .ui.dropdown.item, body.dark #navbar .item { color: var(--text-muted) !important; border-radius: var(--radius); }
#navbar .item:hover, #navbar .ui.dropdown.item:hover { color: var(--text) !important; background: var(--accent-soft) !important; }
#navbar .item.active, body.dark #navbar .item.active { color: var(--text) !important; background: var(--accent-soft) !important; font-weight: 600; }
#navbar .item i { color: inherit; }

/* ---- Kopfbereich / Hero ------------------------------------------------------------------------ */
.ui.masthead {
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--line);
    color: var(--text);
    padding: 1.25rem 0;
}
.ui.masthead h1 { color: var(--text); font-size: 1.5rem; margin: 0; }
.ui.masthead.lufox-hero {
    padding: 3.5rem 0 3rem;
    background:
        radial-gradient(60% 80% at 15% 0%, var(--accent-soft), transparent 70%),
        radial-gradient(40% 60% at 90% 20%, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent 70%),
        var(--bg-elevated);
}
.ui.masthead.lufox-hero h1 { font-size: 2.75rem; font-weight: 700; }
.ui.masthead .connect-server .ui.header, .ui.masthead .ui.header { color: var(--text); }
.ui.masthead .lufox-adresse span {
    font-family: var(--schrift-mono); font-weight: 500; cursor: pointer;
    padding: 0.35rem 0.75rem; border: 1px solid var(--line-strong); border-radius: var(--radius);
    background: var(--bg-elevated-2);
}
.lufox-punkt { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: var(--radius-voll); margin-right: 0.5rem; }
.lufox-punkt.an { background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 25%, transparent); }
.lufox-punkt.aus { background: var(--fehler); }

/* ---- Flächen: Segmente, Karten, Tabellen -------------------------------------------------------- */
.ui.segment, .ui.segments, .ui.card, .ui.cards > .card, .ui.fluid.card, .ui.modal, .ui.popup, .ui.message:not(.error):not(.success):not(.warning):not(.info),
body.dark .ui.segment, body.dark .ui.card, body.dark .ui.modal, body.dark .ui.popup {
    background: var(--bg-elevated);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--schatten-sm);
}
.ui.segments > .segment { border-radius: 0 !important; border-left: 0; border-right: 0; border-top: 0; }
.ui.segments > .segment:last-child { border-bottom: 0; }
.ui.attached.segment, .ui.top.attached.segment, .ui.bottom.attached.segment { border-radius: 0 !important; }
.ui.top.attached.segment { border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important; }
.ui.bottom.attached.segment { border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important; }
.ui.card > .content, .ui.card > .extra.content, .ui.modal > .header, .ui.modal > .content, .ui.modal > .actions { background: transparent; color: var(--text); border-color: var(--line) !important; }
.ui.modal > .header { color: var(--text); font-weight: 600; }
.ui.attached.menu, .ui.top.attached.menu, body.dark .ui.top.attached.menu:not(.inverted) {
    background: var(--bg-elevated-2); border: 1px solid var(--line); box-shadow: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.ui.attached.menu .item, .ui.attached.menu .header.item, body.dark .ui.attached.menu .item { color: var(--text) !important; }
.ui.table, body.dark .ui.table {
    background: var(--bg-elevated); color: var(--text); border: 1px solid var(--line);
    border-radius: var(--radius-lg); overflow: hidden;
}
.ui.table thead th, body.dark .ui.table thead th { background: var(--bg-elevated-2); color: var(--text-muted); border-color: var(--line); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; }
.ui.table tr td, body.dark .ui.table tr td { border-color: var(--line); }
.ui.table tbody tr:hover, body.dark .ui.table tbody tr:hover { background: var(--bg-elevated-2); }
.ui.striped.table tbody tr:nth-child(2n), body.dark .ui.striped.table tbody tr:nth-child(2n) { background: color-mix(in srgb, var(--bg-elevated-2) 60%, transparent); }
.ui.divider, .ui.list > .item, .ui.divided.list > .item { border-color: var(--line) !important; }
.ui.header.attached, .ui.attached.header { background: var(--bg-elevated-2); border-color: var(--line); color: var(--text); }

/* Forum-Tabellen: Themenliste und Beiträge */
#sticky-threads, #normal-threads, .ui.table.res { font-size: 0.95rem; }
.ui.table .ui.image.header .content, .ui.table .ui.header { color: var(--text); }
.ui.table .ui.image.header .sub.header { color: var(--text-muted); }
.forum-post, .ui.segment.post { border-radius: var(--radius-lg); }
.ui.avatar.image, .ui.avatar.images .image, .ui.avatar.images img { border-radius: var(--radius-voll); }

/* ---- Knöpfe ------------------------------------------------------------------------------------ */
.ui.button {
    border-radius: var(--radius); font-weight: 600; letter-spacing: 0;
    background: var(--bg-elevated-2); color: var(--text); border: 1px solid var(--line-strong);
    box-shadow: none; transition: background var(--dauer) var(--kurve), box-shadow var(--dauer) var(--kurve), transform var(--dauer) var(--kurve);
}
.ui.button:hover, .ui.button:focus { background: var(--accent-soft); color: var(--text); border-color: var(--accent); }
.ui.primary.button, .ui.primary.buttons .button, .ui.blue.button, .ui.positive.button, .ui.green.button,
.ui.primary.button:hover, .ui.blue.button:hover, .ui.positive.button:hover, .ui.green.button:hover {
    background: var(--iris); color: #fff; border: 0; box-shadow: var(--schatten-akzent);
}
.ui.primary.button:hover, .ui.blue.button:hover, .ui.positive.button:hover, .ui.green.button:hover { transform: translateY(-1px); filter: brightness(1.06); }
.ui.negative.button, .ui.red.button { background: var(--fehler); color: #fff; border: 0; }
.ui.negative.button:hover, .ui.red.button:hover { background: var(--fehler); filter: brightness(1.08); color: #fff; }
.ui.basic.button, body.dark .ui.basic.button { background: transparent !important; color: var(--text) !important; box-shadow: inset 0 0 0 1px var(--line-strong) !important; }
.ui.basic.button:hover { background: var(--accent-soft) !important; }
.ui.default.button { background: var(--bg-elevated-2); color: var(--text); }
.ui.label, body.dark .ui.label { background: var(--accent-soft); color: var(--text); border-radius: var(--radius-sm); font-weight: 500; }
.ui.image.label { background: var(--bg-elevated-2); border: 1px solid var(--line); }
.ui.image.label img { border-radius: var(--radius-voll); }

/* ---- Eingaben ---------------------------------------------------------------------------------- */
.ui.form input:not([type]), .ui.form input[type="text"], .ui.form input[type="email"], .ui.form input[type="password"],
.ui.form input[type="number"], .ui.form input[type="search"], .ui.form input[type="url"], .ui.form input[type="date"],
.ui.form textarea, .ui.form select, .ui.input > input, .ui.selection.dropdown,
body.dark .ui.form input, body.dark .ui.form textarea, body.dark .ui.input > input, body.dark .ui.selection.dropdown {
    background: var(--bg-elevated-2); color: var(--text); border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm); font-family: var(--schrift);
    transition: border-color var(--dauer) var(--kurve), box-shadow var(--dauer) var(--kurve);
}
.ui.form input:focus, .ui.form textarea:focus, .ui.input > input:focus, .ui.selection.dropdown:focus, .ui.selection.active.dropdown,
body.dark .ui.form input:focus, body.dark .ui.form textarea:focus {
    background: var(--bg-elevated); color: var(--text); border-color: var(--accent-2);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-2) 25%, transparent);
}
.ui.form input::placeholder, .ui.input > input::placeholder, .ui.form textarea::placeholder { color: var(--text-faint); }
.ui.form .field > label, body.dark .ui.form .field > label { color: var(--text); font-weight: 600; }
.ui.checkbox label, .ui.checkbox + label, body.dark .ui.checkbox label { color: var(--text) !important; }
.ui.checkbox label:before, body.dark .ui.checkbox label:before { background: var(--bg-elevated-2); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); }
.ui.checkbox input:checked ~ label:before { background: var(--accent); border-color: var(--accent); }
.ui.checkbox input:checked ~ label:after { color: #fff; }
.ui.toggle.checkbox input:checked ~ label:before { background: var(--accent) !important; }

/* Dropdown-Menüs (Navbar, Auswahlfelder) */
.ui.dropdown .menu, .ui.selection.dropdown .menu, body.dark .ui.dropdown .menu {
    background: var(--bg-elevated); border: 1px solid var(--line); border-radius: var(--radius) !important; box-shadow: var(--schatten-lg);
}
.ui.dropdown .menu > .item, .ui.dropdown .menu > .header, body.dark .ui.dropdown .menu > .item { color: var(--text) !important; border-color: var(--line) !important; }
.ui.dropdown .menu > .item:hover, .ui.dropdown .menu > .active.item, .ui.dropdown .menu > .selected.item { background: var(--accent-soft) !important; color: var(--text) !important; }
.ui.dropdown > .text, .ui.selection.dropdown > .text, body.dark .ui.dropdown > .text { color: var(--text); }
.ui.pointing.dropdown > .menu:after, body.dark .ui.pointing.dropdown > .menu:after { background: var(--bg-elevated); box-shadow: -1px -1px 0 0 var(--line); }

/* ---- Meldungen --------------------------------------------------------------------------------- */
.ui.message { border-radius: var(--radius-lg); box-shadow: none; border: 1px solid var(--line); }
.ui.success.message { background: color-mix(in srgb, var(--ok) 14%, var(--bg-elevated)); color: var(--text); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.ui.error.message, .ui.negative.message { background: color-mix(in srgb, var(--fehler) 14%, var(--bg-elevated)); color: var(--text); border-color: color-mix(in srgb, var(--fehler) 45%, transparent); }
.ui.warning.message { background: color-mix(in srgb, var(--warn) 16%, var(--bg-elevated)); color: var(--text); border-color: color-mix(in srgb, var(--warn) 50%, transparent); }
.ui.info.message { background: color-mix(in srgb, var(--accent-2) 12%, var(--bg-elevated)); color: var(--text); border-color: color-mix(in srgb, var(--accent-2) 45%, transparent); }
.ui.message .header { color: inherit; }
.ui.form .error.message, .ui.form .success.message { display: block; }

/* ---- Breadcrumb, Seitenzahlen, Reiter ---------------------------------------------------------- */
.ui.breadcrumb, .ui.breadcrumb .section, body.dark .ui.breadcrumb .section { color: var(--text-muted); }
.ui.breadcrumb .active.section { color: var(--text); font-weight: 600; }
.ui.breadcrumb .divider { color: var(--text-faint); }
.ui.pagination.menu, body.dark .ui.pagination.menu { background: var(--bg-elevated); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; }
.ui.pagination.menu .item, body.dark .ui.pagination.menu .item { color: var(--text-muted) !important; border-color: var(--line); }
.ui.pagination.menu .active.item { background: var(--accent-soft) !important; color: var(--text) !important; }
.ui.tabular.menu .item, body.dark .ui.tabular.menu .item { color: var(--text-muted); border-color: var(--line); }
.ui.tabular.menu .active.item, body.dark .ui.tabular.menu .active.item { background: var(--bg-elevated); color: var(--text); border-color: var(--line); border-radius: var(--radius) var(--radius) 0 0 !important; }
.ui.secondary.pointing.menu .item, .ui.secondary.menu .item { color: var(--text-muted); }
.ui.secondary.pointing.menu .active.item { border-color: var(--accent); color: var(--text); }
.ui.vertical.menu, body.dark .ui.vertical.menu { background: var(--bg-elevated); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: none; }
.ui.vertical.menu .item, body.dark .ui.vertical.menu .item { color: var(--text); border-color: var(--line); }
.ui.vertical.menu .active.item { background: var(--accent-soft); color: var(--text); }

/* ---- Seitenleiste (mobil) ---------------------------------------------------------------------- */
.ui.sidebar.menu#toc, body.dark .ui.sidebar.menu#toc { background: var(--bg-elevated); border-right: 1px solid var(--line); }
.ui.sidebar.menu#toc .item, body.dark .ui.sidebar.menu#toc .item { color: var(--text) !important; }
.ui.sidebar.menu#toc .item.active { background: var(--accent-soft); }
.lufox-seitenleiste-marke { padding: 1rem 1.15rem !important; border-bottom: 1px solid var(--line); }

/* ---- Fußzeile ---------------------------------------------------------------------------------- */
#footer.ui.footer.segment, body.dark #footer.ui.footer.segment {
    background: var(--bg-elevated); color: var(--text-muted);
    border: 0; border-top: 1px solid var(--line); border-radius: 0 !important; box-shadow: none;
    margin-top: 3rem; padding: 2.5rem 0;
}
#footer .ui.header, body.dark #footer .ui.header { color: var(--text); font-size: 0.8rem; text-transform: uppercase; letter-spacing: var(--kicker-spationierung); }
#footer .ui.link.list .item, #footer .ui.link.list a.item, body.dark #footer .ui.link.list .item { color: var(--text-muted) !important; }
#footer .ui.link.list a.item:hover { color: var(--text) !important; }
#footer .ui.divided.grid > .column, body.dark #footer .ui.divided.grid > .column { box-shadow: -1px 0 0 0 var(--line); }
.lufox-fuss-marke { margin-bottom: 1rem; }
#footer .ui.dropdown.item { color: var(--text-muted) !important; }
#darkmode { cursor: pointer; }

/* ---- Widgets, Statistik, Profil ---------------------------------------------------------------- */
.ui.card.widget > .content:first-child, .ui.segment.widget-header { background: var(--bg-elevated-2); }
.ui.statistic .value, .ui.statistics .statistic .value, body.dark .ui.statistic .value { color: var(--text); }
.ui.statistic .label, body.dark .ui.statistic .label { color: var(--text-muted); }
.ui.progress .bar { background: var(--iris); border-radius: var(--radius-voll); }
.ui.progress, body.dark .ui.progress { background: var(--bg-elevated-2); border-radius: var(--radius-voll); }
.ui.feed .event .content .summary, .ui.feed .event .content .summary a, body.dark .ui.feed .summary { color: var(--text); }
.ui.feed .event .content .date, .ui.feed .meta { color: var(--text-muted) !important; }
.ui.comments .comment .author, body.dark .ui.comments .comment .author { color: var(--text); }
.ui.comments .comment .text, body.dark .ui.comments .comment .text { color: var(--text); }
.ui.comments .comment .metadata { color: var(--text-muted); }
blockquote { border-left: 3px solid var(--accent); background: var(--bg-elevated-2); padding: 0.5rem 1rem; border-radius: 0 var(--radius) var(--radius) 0; }
pre, code { background: var(--bg-elevated-2); border: 1px solid var(--line); border-radius: var(--radius-sm); }
pre { padding: 0.75rem 1rem; overflow-x: auto; }
code { padding: 0.1em 0.35em; }
pre code { border: 0; padding: 0; background: transparent; }
hr { border: 0; border-top: 1px solid var(--line); }

/* ---- Editor (TinyMCE) und Toastr ---------------------------------------------------------------- */
.tox .tox-toolbar, .tox .tox-toolbar__primary, .tox .tox-edit-area__iframe, .tox-tinymce { border-color: var(--line) !important; border-radius: var(--radius) !important; }
#toast-container > div { border-radius: var(--radius-lg); box-shadow: var(--schatten-lg); opacity: 1; font-family: var(--schrift); }

/* ---- Bewegung, Zugänglichkeit ------------------------------------------------------------------ */
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; border-radius: var(--radius-sm); }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
@media (max-width: 767px) {
    .ui.masthead.lufox-hero { padding: 2.25rem 0 2rem; }
    .ui.masthead.lufox-hero h1 { font-size: 2rem; }
    #navbar.ui.secondary.menu { position: static; }
}

/* Leerzustände (Startseite ohne News, leere Listen) */
.ui.segment.lufox-leer { color: var(--text-muted); border-style: dashed; border-color: var(--line-strong); text-align: center; padding: 2rem 1rem; }

/* BlackZack family: floating navigation, restrained violet/cyan light and spacious typography. */
#navbar.ui.secondary.menu,body.dark #navbar.ui.secondary.menu:not(.inverted){width:calc(100% - 40px);max-width:1248px;margin:12px auto 0;border:1px solid var(--line);border-radius:18px;min-height:64px;background:color-mix(in srgb,var(--bg) 82%,transparent)}
#navbar>.ui.container{width:100%!important;padding:0 12px;align-items:center}
#navbar .item{font-size:13px}#navbar .right.menu{align-items:center;gap:4px}#navbar .item.active{border-radius:999px}
body,.pusher,#wrapper{background:var(--bg)!important}body{font-family:var(--schrift)!important}
.lf-iris{background:var(--iris);-webkit-background-clip:text;background-clip:text;color:transparent}.lf-green{color:#51cf99}
.lf-hero{position:relative;overflow:hidden;padding:128px 0 118px;background:radial-gradient(ellipse at 95% 10%,color-mix(in srgb,var(--accent-2) 13%,transparent),transparent 48%),radial-gradient(ellipse at 18% 95%,var(--accent-soft),transparent 55%)}
.lf-hero:after{content:"";position:absolute;inset:auto -5% -160px;height:270px;border-radius:50%;background:linear-gradient(115deg,transparent,var(--accent-soft),transparent);transform:rotate(-7deg);pointer-events:none}
.lf-hero-grid{display:grid!important;grid-template-columns:1.3fr 1fr;gap:60px;align-items:center;position:relative;z-index:1}
.lf-hero h1{font-size:clamp(40px,4.6vw,68px);line-height:1.07;letter-spacing:-.055em;margin:24px 0;font-weight:800;color:var(--text)}
.lf-hero-copy>p{font-size:17px;line-height:1.85;max-width:560px;color:var(--text-muted)}
.lufox-kicker{font-size:10px;letter-spacing:.2em;font-family:var(--schrift-mono);color:var(--text-faint)}
.lf-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}.ui.primary.button{background:#7956ff!important;color:#fff!important;box-shadow:0 6px 25px #7956ff20}.ui.primary.button:hover{background:#896aff!important}.ui.button{border-radius:12px!important;padding:13px 18px!important}
.lf-hero-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px;font-size:11px;color:var(--text-muted)}.lf-hero-meta>*{border:1px solid var(--line);border-radius:99px;padding:5px 10px}.lf-hero-meta a{color:var(--text-muted)}
.lf-console{background:var(--bg-elevated);border:1px solid var(--line-strong);border-radius:14px;overflow:hidden;box-shadow:0 25px 100px #00000012;font-family:var(--schrift-mono);font-size:12px;transform:translateY(24px)}
.lf-console-bar{padding:10px 14px;display:flex;justify-content:space-between;border-bottom:1px solid var(--line);color:var(--text-faint)}.lf-dots{color:#ad94ff;letter-spacing:3px}.lf-console-body{padding:24px}.lf-console-body p{line-height:1.8;margin:0 0 13px}.lf-console-muted{color:var(--text-muted)}.lf-console-divider{height:1px;background:var(--line);margin:20px 0}.lf-address{font-size:28px;font-weight:700;letter-spacing:-1px;display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}.lf-address button{cursor:pointer;color:var(--text-muted);background:var(--bg-elevated-2);border:1px solid var(--line);border-radius:8px;padding:7px;font:11px var(--schrift-mono)}.lf-cursor{color:var(--accent)}
.lf-section{padding:60px 0}.lf-section h2{font-size:clamp(25px,3vw,38px);letter-spacing:-.045em;line-height:1.2;margin:12px 0 25px}.lf-section h3{letter-spacing:-.025em;font-size:22px}.lf-section>h3{margin-top:42px;scroll-margin-top:100px}.lf-section p{color:var(--text-muted);line-height:1.8}.lf-section-heading{display:flex;justify-content:space-between;align-items:center;gap:20px}.lf-section-heading>a{font-size:13px}.lf-server-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.lf-card{padding:27px;background:var(--bg-elevated);border:1px solid var(--line);border-radius:18px}.lf-card h3{margin:20px 0 10px}.lf-card p{font-size:14px}.lf-server-top,.lf-card-bottom{display:flex;justify-content:space-between;align-items:center;gap:8px}.lf-mono{font:10px var(--schrift-mono);letter-spacing:.07em;color:var(--text-faint)}.lf-status{font-size:10px;color:var(--text-muted);white-space:nowrap}.lf-status:before{content:'●';font-size:9px;margin-right:5px;color:var(--text-faint)}.lf-status.is-online:before{color:#37bb83}.lf-card-bottom{border-top:1px solid var(--line);padding-top:17px;margin-top:22px;font-size:12px;color:var(--text-muted)}
.lf-community{display:grid;grid-template-columns:1.1fr 1fr;gap:65px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.lf-feature-list{display:flex;flex-direction:column;justify-content:center}.lf-feature-list a{padding:23px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:8px;color:var(--text)}.lf-feature-list a:last-child{border:0}.lf-feature-list span{color:var(--text-muted);font-size:13px}.lf-page-spacer{height:24px}.lf-lead{max-width:650px}.lf-join-panel{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:28px;border:1px solid var(--line);border-radius:18px;background:var(--accent-soft);margin:25px 0}.lf-join-panel h3{margin:0 0 8px}.lf-join-panel p{margin:0}.lf-stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.lf-stat-grid .lf-card{display:flex;flex-direction:column;gap:10px}.lf-stat-number{font-size:28px;letter-spacing:-.04em}.lf-stat-grid .lf-card>span{font-size:13px;color:var(--text-muted)}.lf-tabs{display:flex;gap:20px;flex-wrap:wrap;padding:18px 0;border-bottom:1px solid var(--line)}.lf-message{margin:12px 0}.lf-message summary{cursor:pointer;line-height:1.8;font-weight:600}.lf-message summary>span{display:block;font-size:12px;font-weight:400;color:var(--text-muted)}.lf-message-text{margin-top:20px;overflow-wrap:anywhere}.lf-reply{padding:16px 0;border-top:1px solid var(--line)}.lf-reply small{color:var(--text-muted)}.lf-link-card{max-width:780px}.lf-link-code{display:block;padding:18px;background:var(--bg);border:1px solid var(--line);border-radius:10px;overflow-wrap:anywhere;margin:20px 0;font-family:var(--schrift-mono);user-select:all}
.ui.footer.segment{margin-top:40px!important}.ui.header,.ui.card .header{font-family:var(--schrift)!important}
@media(min-width:1200px){.ui.container{width:1232px}.lf-hero-grid{width:1232px!important}}
@media(max-width:900px){.lf-hero{padding:75px 0}.lf-hero-grid{grid-template-columns:1fr;gap:20px}.lf-console{transform:none;max-width:600px}.lf-community{grid-template-columns:1fr;gap:25px}.lf-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.lf-hero h1{font-size:54px}}
@media(max-width:600px){#navbar.ui.secondary.menu{width:calc(100% - 20px);margin-top:10px}#navbar>.ui.container{margin:0!important;padding:0 5px}#navbar .right.menu .button{padding:10px!important;font-size:11px}.lf-hero{padding:55px 0}.lf-hero h1{font-size:43px}.lf-hero-copy>p{font-size:15px}.lf-server-grid{grid-template-columns:1fr}.lf-section{padding:36px 0}.lf-section-heading{align-items:flex-start;flex-direction:column;gap:0;margin-bottom:20px}.lf-card{padding:22px}.lf-join-panel{align-items:flex-start;flex-direction:column}.lf-stat-grid{grid-template-columns:1fr 1fr}.lf-stat-number{font-size:23px}}
/* Motion shares the two seamless wave paths with blackzack.dev. */
.lf-hero:after{display:none}.lf-ambient{position:absolute;inset:0;overflow:hidden;pointer-events:none;color:var(--text)}.lf-waves{position:absolute;bottom:0;left:0;width:100%;height:52%;overflow:visible}.lf-wave-slow{opacity:.035;animation:lf-wave 56s linear infinite}.lf-wave-fast{opacity:.045;animation:lf-wave 38s linear infinite reverse}.lf-glow{position:absolute;width:65vw;height:65vw;right:-24vw;top:-38vw;border-radius:50%;background:radial-gradient(circle,#7c5cff15,#22d3ee14 45%,transparent 70%);animation:lf-glow 21s ease-in-out infinite alternate}.lf-hero{background:radial-gradient(ellipse at 20% 100%,var(--accent-soft),transparent 60%)}
@keyframes lf-wave{from{transform:translateX(0)}to{transform:translateX(-1440px)}}@keyframes lf-glow{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-8%,8%,0) scale(1.15)}}
.ui.button,.lf-address button{transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease,border-color .2s ease!important}.ui.button:hover{transform:translateY(-2px);box-shadow:0 7px 25px #7956ff25}.ui.button:active{transform:translateY(0) scale(.98)}.ui.button:focus-visible,.lf-address button:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.lf-address button:hover{border-color:var(--accent);color:var(--text);transform:translateY(-1px)}
.lf-server-grid .lf-card{transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}.lf-server-grid .lf-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 35%,var(--line));box-shadow:0 12px 40px #00000012}.lf-feature-list a{transition:padding-left .25s ease,color .25s ease}.lf-feature-list a:hover{padding-left:10px;color:var(--accent)}#navbar .item{transition:background-color .2s ease,color .2s ease!important}.lf-status.is-online:before{animation:lf-pulse 3.5s ease-in-out infinite}@keyframes lf-pulse{50%{opacity:.45}}.lf-cursor{animation:lf-caret 1.2s step-end infinite}@keyframes lf-caret{50%{opacity:0}}
.lf-reveal-ready{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s cubic-bezier(.16,1,.3,1)}.lf-reveal-ready.lf-visible{opacity:1;transform:none}.lf-message[open]>.lf-message-text,.lf-message[open]>.lf-reply{animation:lf-appear .25s ease}@keyframes lf-appear{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.lf-wave-slow,.lf-wave-fast,.lf-glow,.lf-status.is-online:before,.lf-cursor{animation:none!important}.lf-reveal-ready{opacity:1;transform:none;transition:none}.ui.button,.lf-address button,.lf-card,.lf-feature-list a{transition:none!important}.ui.button:hover,.lf-card:hover{transform:none!important}}
@media(max-width:767px){#navbar .lufox-marke-item{display:flex!important;padding:8px!important;margin-right:auto}#navbar .lufox-marke-item .lufox-marke{height:1.5rem}#navbar .toc.item{margin:0!important;padding:10px!important}#navbar>.ui.container{display:flex!important}#navbar .right.menu{margin-left:0!important}}
/* Community modules use the same rhythm and surfaces as the portal. */
#content,.ui.stackable.grid{scroll-margin-top:95px}.lf-quick-links{display:flex;gap:12px;flex-wrap:wrap;margin:25px 0}.lf-quick-links a{border:1px solid var(--line);border-radius:12px;padding:14px 18px;background:var(--bg-elevated);color:var(--text);transition:border-color .2s,transform .2s}.lf-quick-links a:hover{border-color:var(--accent);transform:translateY(-2px)}