/* Gemeinsames Design von polarhub.de und polarcraft.de (hell/dunkel automatisch).
   Wird ein Jahr lang gecacht: nach Änderungen ?v=N im <link> der Seiten erhöhen. */

:root {
    color-scheme: light dark;
    --bg: #f6f7f9;
    --surface: #ffffff;
    --text: #14171c;
    --muted: #5b6472;
    --line: #e1e5ea;
    --accent: #0b5fd0;
    --accent-soft: #e8f0fc;
    --ok: #1a7f37;
    --err: #b3261e;
    --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 24px rgba(16, 24, 40, .06);
    --radius: 14px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0f1216;
        --surface: #171b21;
        --text: #e8ebf0;
        --muted: #9aa4b2;
        --line: #272d36;
        --accent: #6aa8ff;
        --accent-soft: #172437;
        --ok: #56d364;
        --err: #ff7b72;
        --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
    }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--text);
    font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, sans-serif;
}

h1, h2, h3, p { margin: 0; }
h1 { font-size: clamp(2rem, 6vw, 3.2rem); line-height: 1.1; letter-spacing: -.02em; }
h2 { font-size: 1.2rem; line-height: 1.3; }
a { color: var(--accent); }
code { font: .9em ui-monospace, "SF Mono", Menlo, Consolas, monospace; overflow-wrap: anywhere; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* Navigation */
.nav { border-bottom: 1px solid var(--line); background: var(--surface); }
.nav-inner {
    max-width: 1040px; margin: 0 auto; padding: 12px 20px;
    display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--text); text-decoration: none; }
.brand img { width: 28px; height: 28px; }
.nav ul { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; flex-wrap: wrap; }
.nav li a {
    display: block; padding: 6px 12px; border-radius: 8px;
    color: var(--muted); text-decoration: none; font-size: .95rem; font-weight: 500;
}
.nav li a:hover { color: var(--text); background: var(--bg); }
.nav li a[aria-current="page"] { color: var(--accent); background: var(--accent-soft); }

/* Layout */
.wrap { width: 100%; max-width: 1040px; margin: 0 auto; padding: 0 20px 64px; flex: 1; }
.center { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-top: 64px; }
.center > * + * { margin-top: 16px; }
.hero { padding: clamp(40px, 9vw, 88px) 0 clamp(28px, 5vw, 48px); max-width: 720px; }
.lead { margin-top: 16px; font-size: 1.2rem; color: var(--muted); max-width: 60ch; }
.section { margin-top: 40px; }
.section > h2 { margin-bottom: 16px; }
.muted { color: var(--muted); }

/* Karten */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.card {
    display: block; padding: 24px; background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
    color: inherit; text-decoration: none;
}
.card p { margin-top: 8px; color: var(--muted); font-size: .98rem; }
.card .icon { display: block; font-size: 1.8rem; line-height: 1; margin-bottom: 14px; }
a.card { transition: transform .15s ease, border-color .15s ease; }
a.card:hover { transform: translateY(-2px); border-color: var(--accent); }
a.card h2::after { content: " →"; color: var(--accent); }

/* Kennzahlen */
.tile { padding: 20px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.tile .label { font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tile .value { margin-top: 6px; font-size: 1.5rem; font-weight: 700; }
.online { color: var(--ok); }
.offline { color: var(--err); }

/* Server-Adresse mit Kopier-Knopf */
.addr {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 16px 20px; margin-bottom: 16px; background: var(--accent-soft);
    border: 1px solid var(--accent); border-radius: var(--radius);
}
.addr code { font-size: 1.25rem; font-weight: 700; color: var(--accent); }

.btn {
    display: inline-block; padding: 10px 18px; border: 1px solid var(--accent); border-radius: 10px;
    background: var(--accent); color: var(--surface); font: inherit; font-weight: 600;
    text-decoration: none; cursor: pointer;
}
.btn:hover { filter: brightness(1.1); }
.btn.ghost { background: transparent; color: var(--accent); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chips li { padding: 6px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; font-size: .95rem; }

.steps { margin: 0; padding-left: 1.3em; }
.steps li + li { margin-top: 6px; }

.note { padding: 14px 18px; border-left: 4px solid var(--accent); border-radius: 8px; background: var(--accent-soft); text-align: left; }

/* Listen (Mod-Downloads) */
.search {
    width: 100%; padding: 12px 16px; margin-bottom: 16px; font: inherit; color: inherit;
    background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
}
.list { margin: 0; padding: 0; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.list li + li { border-top: 1px solid var(--line); }
.list a { display: block; padding: 12px 18px; color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.list a:hover { background: var(--accent-soft); color: var(--accent); }

.big { font-size: clamp(5rem, 22vw, 9rem); font-weight: 800; line-height: 1; letter-spacing: -.04em; color: var(--accent); }

footer { padding: 24px 20px; border-top: 1px solid var(--line); text-align: center; color: var(--muted); font-size: .9rem; }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}

/* Hintergrundbild im Stil von Nextcloud: Bild fest hinter allem, Kopfzeile darauf, Inhalt in einer abgerundeten Fläche.
   Bild: "Underwater ocean" von Stefanus Martanto Setyo Husodo, CC0 (gemeinfrei, keine Namensnennung nötig). */
body { background: #003351 url(hintergrund.jpg) center / cover fixed no-repeat; }
.nav { background: transparent; border-bottom: 0; }
.nav .brand, .nav li a { color: #fff; }
.nav li a:hover { color: #fff; background: rgba(255, 255, 255, .16); }
.nav li a[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, .24); }
.wrap {
    width: calc(100% - 16px); margin-top: 4px; padding: 0 clamp(16px, 4vw, 36px) 48px; flex: 0 1 auto;
    background: color-mix(in srgb, var(--bg) 93%, transparent); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border-radius: 22px; box-shadow: 0 12px 40px rgba(0, 0, 0, .28);
}
body > .wrap:first-child { margin-top: 8px; }
footer { margin-top: auto; border-top: 0; color: rgba(255, 255, 255, .88); text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
footer a { color: #fff; }
body > .wrap.center { margin-block: auto; padding-top: 48px; }

/* Konto-Symbol oben rechts im Menü (Inhalt füllt /shared/konto.js) */
.nav-inner ul { margin-left: auto; }
.konto { position: relative; }
.konto summary { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; list-style: none; color: #fff; background: rgba(255, 255, 255, .16); font-weight: 700; }
.konto summary::-webkit-details-marker { display: none; }
.konto summary:hover, .konto[open] summary { background: rgba(255, 255, 255, .28); }
.konto summary.an { background: var(--accent); border: 2px solid rgba(255, 255, 255, .85); }
.konto summary svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.konto-menue { position: absolute; right: 0; top: 46px; z-index: 20; min-width: 210px; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 32px rgba(0, 0, 0, .25); display: grid; gap: 2px; }
.konto-menue a { display: block; padding: 9px 12px; border-radius: 9px; color: var(--text); text-decoration: none; font-weight: 500; }
.konto-menue a:hover { background: var(--accent-soft); color: var(--accent); }
.konto-name { padding: 6px 12px 0; font-weight: 700; overflow-wrap: anywhere; }
.konto-name.klein { padding-top: 0; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--line); font-weight: 400; font-size: .85rem; color: var(--muted); }
@media (max-width: 640px) {   /* Handy: Konto-Symbol bleibt oben rechts, das Menü rutscht in die zweite Zeile */
    .nav-inner .konto { order: 2; margin-left: auto; }
    .nav-inner ul { order: 3; width: 100%; margin-left: 0; }
}
/* Burger-Menü am Handy: Knopf neben dem Konto-Symbol, das Menü klappt als Karte auf wie das Konto-Menü.
   Gilt nur mit JavaScript (html.js setzt /shared/hg.js, den Knopf bedient /shared/konto.js) und nur auf Seiten mit Burger-Knopf; sonst bleibt die zweite Zeile. */
.burger { display: none; }
.burger svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.burger .auf, .burger[aria-expanded="true"] .zu { display: none; }
.burger[aria-expanded="true"] .auf { display: inline; }
@media (max-width: 880px) {   /* sieben Einträge plus Konto-Symbol passen erst darüber in eine Zeile */
    html.js .nav-inner { position: relative; }
    html.js .burger ~ .konto { order: 2; margin-left: auto; }
    html.js .burger { display: grid; place-items: center; order: 3; width: 38px; height: 38px; margin-left: -12px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: #fff; background: rgba(255, 255, 255, .16); }
    html.js .burger:hover, html.js .burger[aria-expanded="true"] { background: rgba(255, 255, 255, .28); }
    html.js .burger ~ ul { display: none; position: absolute; right: 20px; top: 58px; z-index: 20; width: auto; min-width: 210px; padding: 8px; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 32px rgba(0, 0, 0, .25); }
    html.js .burger[aria-expanded="true"] ~ ul { display: grid; }
    html.js .burger ~ ul li a { padding: 9px 12px; border-radius: 9px; color: var(--text); font-size: 1rem; }
    html.js .burger ~ ul li a:hover, html.js .burger ~ ul li a[aria-current="page"] { color: var(--accent); background: var(--accent-soft); }
}
/* Zähler am Konto-Symbol (offene Anfragen für Admins) */
.konto summary[data-offen] { position: relative; }
.konto summary[data-offen]::after { content: attr(data-offen); position: absolute; top: -4px; right: -6px; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--err); color: #fff; font-size: .72rem; line-height: 18px; text-align: center; }
/* Hinweis des Admins unter dem Menüband (setzt die Verwaltung, zeigt /shared/konto.js) */
.hinweis { width: calc(100% - 16px); max-width: 1040px; margin: 4px auto 8px; padding: 12px 18px; border-radius: 14px; background: #fff4d6; color: #5b4300; font-weight: 600; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); }
/* Wählbare Hintergrundbilder (Konto > Aussehen). Alle gemeinfrei bzw. CC0 aus der Nextcloud-Sammlung, keine Namensnennung nötig:
   Morning fog (Ted Moravec), New Zealand fern (Bernard Spragg), Waxing crescent moon (NASA), Soft floral (Hannah MacLean), Cetonia aurata (Bernie).
   Die Tönung hält die weiße Schrift von Menü und Fußzeile lesbar; helle Bilder bekommen mehr davon. */
html[data-hg=nebel] body   { background-color: #2b3a36; background-image: linear-gradient(rgba(0, 20, 30, .60), rgba(0, 20, 30, .28) 260px, rgba(0, 20, 30, .28)), url(hintergrund-nebel.jpg); }
html[data-hg=farn] body    { background-color: #12301c; background-image: linear-gradient(rgba(0, 20, 10, .35), rgba(0, 20, 10, .35)), url(hintergrund-farn.jpg); }
html[data-hg=mond] body    { background-color: #05080f; background-image: linear-gradient(rgba(0, 0, 0, .10), rgba(0, 0, 0, .10)), url(hintergrund-mond.jpg); }
html[data-hg=blueten] body { background-color: #6b5a4a; background-image: linear-gradient(rgba(45, 30, 20, .55), rgba(45, 30, 20, .55)), url(hintergrund-blueten.jpg); }
html[data-hg=kaefer] body  { background-color: #4a4f48; background-image: linear-gradient(rgba(25, 30, 25, .55), rgba(25, 30, 25, .55)), url(hintergrund-kaefer.jpg); }