/* Oryndu – öffentliche Seite. Ohne Schriften, Bilder oder Skripte von außen; Farben nur als Variablen
   (hell als Standard, dunkel nach dem System). Markenfarben wie in docs/marke/oryndu. */
:root {
    --grund:#fbfcfb;
    --flaeche:#ffffff;
    --tinte:#151c24;
    --text:#2a333d;
    --leise:#62707c;
    --linie:#e3e8e5;
    --minze:#2f7d63;
    --minze-hell:#e7f2ed;
    --knopf-text:#ffffff;
    --schatten:0 1px 2px rgba(21,28,36,.05),0 8px 24px rgba(21,28,36,.06);
    --breite:1080px;
    color-scheme:light dark;
}

@media (prefers-color-scheme:dark) {
    :root {
        --grund:#10161d;
        --flaeche:#161e27;
        --tinte:#e8ece9;
        --text:#cdd5d1;
        --leise:#8f9ba3;
        --linie:#26313c;
        --minze:#98c8b6;
        --minze-hell:#1c2b2a;
        --knopf-text:#10161d;
        --schatten: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(--grund);
    color:var(--text);
    font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
}

main { flex:1; }

h1,h2,h3 { color:var(--tinte); line-height:1.2; letter-spacing:-.02em; margin:0; }
h1 { font-size:clamp(34px,5.4vw,54px); font-weight:650; }
h2 { font-size:24px; font-weight:620; }
h3 { font-size:17px; font-weight:600; letter-spacing:-.01em; }
p { margin:0; }
a { color:var(--minze); text-underline-offset:3px; }
:focus-visible { outline:2px solid var(--minze); outline-offset:3px; border-radius:6px; }

.innen { width:100%; max-width:var(--breite); margin:0 auto; padding:0 24px; }

/* Kopf */
.kopf { position:sticky; top:0; z-index:5; background:color-mix(in srgb,var(--grund) 88%,transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--linie); }
.kopf .innen { display:flex; align-items:center; gap:28px; height:64px; }
.marke { display:flex; align-items:center; color:var(--tinte); }
.marke svg { height:26px; width:auto; display:block; }
.logo-strich { fill:none; stroke:var(--tinte); stroke-linecap:round; stroke-linejoin:round; }
.logo-kern { fill:var(--tinte); }
.logo-punkt { fill:var(--minze); }
.kopf nav { display:flex; gap:4px; margin-left:auto; }
.kopf nav a { padding:8px 12px; border-radius:8px; color:var(--leise); text-decoration:none; font-size:15px; font-weight:500; }
.kopf nav a:hover { color:var(--tinte); background:var(--minze-hell); }
.kopf nav a[aria-current=page] { color:var(--tinte); }

/* Knöpfe */
.knopf { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 20px; border-radius:10px; border:1px solid transparent; font:inherit; font-size:15px; font-weight:600; text-decoration:none; cursor:pointer; white-space:nowrap; transition:transform .12s ease,background-color .12s ease,border-color .12s ease; }
.knopf:active { transform:translateY(1px); }
.knopf.voll { background:var(--tinte); color:var(--grund); }
.knopf.voll:hover { background:color-mix(in srgb,var(--tinte) 86%,var(--minze)); }
.knopf.rand { border-color:var(--linie); color:var(--tinte); background:var(--flaeche); }
.knopf.rand:hover { border-color:var(--minze); }
.knopf.klein { padding:7px 14px; font-size:14px; border-radius:8px; }

/* Start */
.buehne { padding:104px 0 88px; text-align:center; }
.buehne .zeile { display:inline-flex; align-items:center; gap:8px; padding:5px 12px; border:1px solid var(--linie); border-radius:999px; background:var(--flaeche); color:var(--leise); font-size:13px; font-weight:500; margin-bottom:28px; }
.buehne .zeile::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--minze); }
.buehne h1 { max-width:15ch; margin:0 auto; }
.buehne .einleitung { max-width:56ch; margin:22px auto 0; font-size:19px; color:var(--leise); }
.buehne .aktionen { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:36px; }

.abschnitt { padding:0 0 88px; }
.abschnitt>.innen>h2 { margin-bottom:8px; }
.abschnitt>.innen>.unter { color:var(--leise); margin-bottom:28px; }

.karten { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; }
.karte { display:flex; flex-direction:column; gap:8px; padding:22px; background:var(--flaeche); border:1px solid var(--linie); border-radius:14px; }
.karte p { color:var(--leise); font-size:15px; }
a.karte { text-decoration:none; color:inherit; transition:border-color .12s ease,box-shadow .12s ease; }
a.karte:hover { border-color:var(--minze); box-shadow:var(--schatten); }
.karte .mehr { margin-top:auto; padding-top:10px; color:var(--minze); font-size:14px; font-weight:600; }
.karte .symbol { width:36px; height:36px; display:grid; place-items:center; border-radius:10px; background:var(--minze-hell); color:var(--minze); margin-bottom:6px; }
.karte .symbol svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* Unterseiten */
.seitenkopf { padding:64px 0 36px; }
.seitenkopf h1 { font-size:clamp(30px,4.4vw,42px); }
.seitenkopf p { max-width:62ch; margin-top:14px; font-size:18px; color:var(--leise); }

.hinweis { padding:16px 18px; border:1px solid var(--linie); border-left:3px solid var(--minze); border-radius:10px; background:var(--flaeche); color:var(--leise); font-size:15px; }

/* Downloads */
.karte .kopfzeile { display:flex; align-items:center; gap:12px; }
.karte .kopfzeile .symbol { margin:0; }
.dl-karte .stand { font-size:14px; color:var(--leise); }
.dl-karte .stand strong { color:var(--tinte); font-weight:600; }
.dl-karte .knopf { margin-top:auto; align-self:flex-start; }
.dl-karte .fuss { margin-top:10px; }
.dl-karte .leer { color:var(--leise); font-size:14px; margin-top:auto; }

#aktuell { grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }

.filter { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.filter button { padding:6px 14px; border-radius:999px; border:1px solid var(--linie); background:var(--flaeche); color:var(--leise); font:inherit; font-size:14px; font-weight:500; cursor:pointer; }
.filter button:hover { border-color:var(--minze); }
.filter button[aria-pressed=true] { background:var(--tinte); border-color:var(--tinte); color:var(--grund); }

.tabelle { border:1px solid var(--linie); border-radius:14px; background:var(--flaeche); overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:15px; }
th,td { padding:13px 18px; text-align:left; vertical-align:top; border-bottom:1px solid var(--linie); }
tr:last-child td { border-bottom:0; }
th { font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--leise); white-space:nowrap; }
td.version { font-weight:600; color:var(--tinte); white-space:nowrap; }
td.zahl,td.datum { white-space:nowrap; color:var(--leise); font-variant-numeric:tabular-nums; }
td.hinweise { color:var(--leise); min-width:220px; }
td.aktion { text-align:right; }
.pruefsumme { display:block; margin-top:4px; font:12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--leise); overflow-wrap:anywhere; }
.marke-neu { display:inline-block; margin-left:8px; padding:1px 8px; border-radius:999px; background:var(--minze-hell); color:var(--minze); font-size:12px; font-weight:600; vertical-align:1px; }
.leerzeile { padding:36px 18px; text-align:center; color:var(--leise); }

/* Doku */
.doku { display:grid; grid-template-columns:220px minmax(0,1fr); gap:48px; padding-bottom:88px; }
.doku aside { font-size:14px; color:var(--leise); border-right:1px solid var(--linie); padding-right:24px; }
.doku aside strong { display:block; margin-bottom:8px; font-size:12px; letter-spacing:.06em; text-transform:uppercase; }
.doku .leer { padding:56px 28px; border:1px dashed var(--linie); border-radius:14px; text-align:center; color:var(--leise); }
.doku .leer h2 { margin-bottom:8px; }

/* Fuß */
.fuss-seite { border-top:1px solid var(--linie); padding:28px 0; font-size:14px; color:var(--leise); }
.fuss-seite .innen { display:flex; flex-wrap:wrap; gap:8px 24px; align-items:center; }
.fuss-seite nav { display:flex; flex-wrap:wrap; gap:8px 20px; margin-left:auto; }
.fuss-seite a { color:var(--leise); text-decoration:none; }
.fuss-seite a:hover { color:var(--tinte); }

@media (max-width:720px) {
    .kopf .innen { gap:12px; height:58px; padding:0 16px; }
    .kopf nav a { padding:8px; font-size:14px; }
    .kopf .knopf { display:none; }
    .innen { padding:0 16px; }
    .buehne { padding:64px 0 56px; }
    .abschnitt { padding-bottom:56px; }
    .doku { grid-template-columns:1fr; gap:20px; }
    .doku aside { border-right:0; border-bottom:1px solid var(--linie); padding:0 0 16px; }
    th,td { padding:11px 14px; }
}

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