/* watermarked.glowfish.de - dunkle Fassung der Glowfish-Merkmale.
 *
 * Dieselben Merkmalsnamen wie in gf.css der Hauptsite, aber dunkle
 * Werte. Die Ampelfarben der Hauptsite (--gruen #1f7a4d, --rot #b3261e)
 * sind auf dunklem Grund zu dunkel und daher aufgehellt; Zielwert ist
 * ein Kontrast von mindestens 4,5:1 gegen die Flaeche.
 */

@font-face {
    font-family: 'Manrope';
    src: url('/schrift/manrope-latin.woff2') format('woff2');
    font-weight: 200 800;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

@font-face {
    font-family: 'Manrope';
    src: url('/schrift/manrope-latin-ext.woff2') format('woff2');
    font-weight: 200 800;
    font-display: swap;
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF;
}

:root {
    --grund: #0a1526;
    --flaeche: #111f36;
    --flaeche-hoch: #16283f;
    --linie: #24384f;
    --linie-leise: #1b2c43;

    --text: #e8eef6;
    --text-leise: #9bacc2;
    --text-still: #7f92a9;

    --blau: #4d9bee;
    --blau-tief: #1a63c8;
    --blau-schleier: rgba(77, 155, 238, 0.12);

    --gruen: #35c07a;
    --gruen-grund: rgba(53, 192, 122, 0.12);
    --rot: #ff6b5e;
    --rot-grund: rgba(255, 107, 94, 0.12);
    --grau: #8496ab;
    --grau-grund: rgba(132, 150, 171, 0.10);

    --radius: 8px;
    --radius-gross: 14px;
    --breite: 1100px;
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    background: var(--grund);
    color: var(--text);
    font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
}

.nur-lesbar {
    position: absolute;
    left: -9999px;
}

.nur-lesbar:focus {
    left: 1rem;
    top: 1rem;
    z-index: 10;
    background: var(--flaeche-hoch);
    padding: .6rem 1rem;
    border-radius: var(--radius);
}

a { color: var(--blau); }
a:hover { color: #7ab6f4; }

h1, h2, h3 { line-height: 1.25; font-weight: 700; margin: 0 0 .6em; }
h1 { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem); margin-top: 2rem; }
h3 { font-size: 1.05rem; margin-top: 1.6rem; }

p { margin: 0 0 1rem; }

code, pre, .zahl {
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}

.huelle {
    max-width: var(--breite);
    margin: 0 auto;
    padding: 0 1.25rem;
}

/* --- Kopf ----------------------------------------------------------- */

.kopf {
    border-bottom: 1px solid var(--linie-leise);
    background: linear-gradient(180deg, #0d1b30 0%, var(--grund) 100%);
}

.kopf-zeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 0;
    flex-wrap: wrap;
}

.marke {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    color: var(--text);
    text-decoration: none;
    font-weight: 800;
    letter-spacing: -.01em;
}

.marke img { width: 30px; height: 30px; display: block; }
.marke span { font-size: 1.05rem; }
.marke em { font-style: normal; color: var(--text-still); font-weight: 500; }

.sprachwahl { display: flex; gap: .3rem; }

.sprachwahl a {
    padding: .3rem .7rem;
    border-radius: 999px;
    border: 1px solid var(--linie);
    color: var(--text-leise);
    text-decoration: none;
    font-size: .85rem;
    font-weight: 600;
}

.sprachwahl a[aria-current='true'] {
    background: var(--blau-schleier);
    border-color: var(--blau-tief);
    color: var(--text);
}

/* --- Inhalt --------------------------------------------------------- */

main { padding: 2.5rem 0 3.5rem; }

.vorspann { max-width: 62ch; }
.vorspann p { color: var(--text-leise); font-size: 1.05rem; }

.karte {
    background: var(--flaeche);
    border: 1px solid var(--linie-leise);
    border-radius: var(--radius-gross);
    padding: 1.4rem;
    margin: 1.5rem 0;
}

/* --- Eingabe -------------------------------------------------------- */

.reiter {
    display: flex;
    gap: .4rem;
    border-bottom: 1px solid var(--linie);
    margin-bottom: 1.2rem;
    flex-wrap: wrap;
}

.reiter button {
    appearance: none;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--text-leise);
    font: inherit;
    font-weight: 600;
    padding: .6rem .9rem;
    cursor: pointer;
    margin-bottom: -1px;
}

.reiter button[aria-selected='true'] {
    color: var(--text);
    border-bottom-color: var(--blau);
}

.feld { display: block; margin-bottom: 1rem; }

.feld > span {
    display: block;
    font-size: .85rem;
    font-weight: 600;
    color: var(--text-leise);
    margin-bottom: .35rem;
}

input[type='text'], input[type='url'], input[type='file'], textarea {
    width: 100%;
    background: var(--grund);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    color: var(--text);
    font: inherit;
    padding: .7rem .8rem;
}

textarea { min-height: 13rem; resize: vertical; line-height: 1.55; }

input:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
    outline: 2px solid var(--blau);
    outline-offset: 2px;
}

.knopf {
    appearance: none;
    border: 0;
    border-radius: var(--radius);
    background: var(--blau-tief);
    color: #fff;
    font: inherit;
    font-weight: 700;
    padding: .75rem 1.5rem;
    cursor: pointer;
}

.knopf:hover { background: #2273d9; }
.knopf[disabled] { opacity: .6; cursor: progress; }

.knopf-leise {
    background: none;
    border: 1px solid var(--linie);
    color: var(--text-leise);
    font-weight: 600;
    padding: .5rem 1rem;
}

.knopf-leise:hover { color: var(--text); border-color: var(--blau-tief); }

.hinweis-klein { font-size: .85rem; color: var(--text-still); margin: .4rem 0 0; }

/* --- Ampel ---------------------------------------------------------- */

.ampel {
    border-radius: var(--radius-gross);
    border: 1px solid;
    padding: 1.5rem;
    display: flex;
    gap: 1.1rem;
    align-items: flex-start;
}

.ampel .punkt {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    flex: 0 0 auto;
    margin-top: .45rem;
}

.ampel h2 { margin: 0 0 .35rem; font-size: 1.35rem; }
.ampel p { margin: 0; color: var(--text-leise); }

.ampel-rot { border-color: rgba(255, 107, 94, .45); background: var(--rot-grund); }
.ampel-rot .punkt { background: var(--rot); }
.ampel-rot h2 { color: var(--rot); }

.ampel-gruen { border-color: rgba(53, 192, 122, .45); background: var(--gruen-grund); }
.ampel-gruen .punkt { background: var(--gruen); }
.ampel-gruen h2 { color: var(--gruen); }

.ampel-grau { border-color: var(--linie); background: var(--grau-grund); }
.ampel-grau .punkt { background: none; border: 2px solid var(--grau); }
.ampel-grau h2 { color: var(--text); }

.warnkasten {
    border-left: 3px solid var(--blau-tief);
    background: var(--blau-schleier);
    padding: .9rem 1.1rem;
    border-radius: 0 var(--radius) var(--radius) 0;
    margin: 1.25rem 0;
    font-size: .92rem;
    color: var(--text-leise);
}

/* --- Befunde -------------------------------------------------------- */

.befunde { margin-top: 1.5rem; }

.befund {
    border: 1px solid var(--linie-leise);
    border-radius: var(--radius);
    margin-bottom: .7rem;
    background: var(--flaeche);
    overflow: hidden;
}

.befund > summary {
    cursor: pointer;
    padding: .85rem 1rem;
    display: flex;
    gap: .75rem;
    align-items: baseline;
    list-style: none;
}

.befund > summary::-webkit-details-marker { display: none; }

.befund > summary::after {
    content: '+';
    margin-left: auto;
    color: var(--text-still);
    font-weight: 700;
}

.befund[open] > summary::after { content: '–'; }

.befund-name { font-weight: 700; }

.marke-status {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .15rem .5rem;
    border-radius: 999px;
    border: 1px solid var(--linie);
    color: var(--text-still);
    white-space: nowrap;
}

.marke-treffer { color: var(--rot); border-color: rgba(255, 107, 94, .5); }
.marke-beleg { color: var(--gruen); border-color: rgba(53, 192, 122, .5); }
.marke-fehler { color: #ffb648; border-color: rgba(255, 182, 72, .5); }

.befund-inhalt { padding: 0 1rem 1rem; border-top: 1px solid var(--linie-leise); }
.befund-inhalt > p:first-child { margin-top: 1rem; }

.bedeutet {
    font-size: .9rem;
    color: var(--text-leise);
    border-left: 2px solid var(--linie);
    padding-left: .9rem;
    margin: .8rem 0;
}

table.werte {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
    margin: .8rem 0;
}

table.werte th, table.werte td {
    text-align: left;
    padding: .4rem .6rem .4rem 0;
    border-bottom: 1px solid var(--linie-leise);
    vertical-align: top;
}

table.werte th {
    color: var(--text-leise);
    font-weight: 600;
    width: 34%;
    white-space: nowrap;
}

table.werte td { word-break: break-word; }

.tabellenrahmen { overflow-x: auto; }

pre.roh {
    background: var(--grund);
    border: 1px solid var(--linie-leise);
    border-radius: var(--radius);
    padding: .8rem;
    overflow-x: auto;
    font-size: .8rem;
    line-height: 1.5;
    color: var(--text-leise);
    max-height: 26rem;
}

/* --- Fuss ----------------------------------------------------------- */

.fuss {
    border-top: 1px solid var(--linie-leise);
    padding: 1.6rem 0 2.5rem;
    color: var(--text-still);
    font-size: .88rem;
}

.fuss nav { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-bottom: .6rem; }
.fuss a { color: var(--text-leise); text-decoration: none; }
.fuss a:hover { color: var(--blau); text-decoration: underline; }

.rechtstext { max-width: 72ch; }
.rechtstext dt { font-weight: 700; margin-top: .8rem; }
.rechtstext dd { margin: 0 0 .2rem; color: var(--text-leise); }

@media (max-width: 560px) {
    .ampel { flex-direction: column; gap: .6rem; padding: 1.15rem; }
    .ampel .punkt { margin-top: 0; }
    .karte { padding: 1.1rem; }
    table.werte th { width: auto; white-space: normal; }
}

@media (prefers-reduced-motion: no-preference) {
    .knopf, .reiter button, .sprachwahl a { transition: background .15s, color .15s, border-color .15s; }
}