/* orchestrUP — Gestaltung (issue #16).
 *
 * Drei Farben, aus dem grossen Logo. Jede in zwei Abstufungen, weil eine
 * leuchtende Farbe auf hellem Grund keinen Text traegt: #00d2ff kommt
 * dort auf Kontrast 1,73, lesbar wird es ab 4,5. Die Logofarbe fuehrt
 * also Flaechen, Linien und Raender; fuer Beschriftung gibt es je Modus
 * eine eigene Stufe.
 *
 * Hell ist der Normalfall, dunkel gleichwertig. Alle Werte stehen
 * einmal hier und nirgends sonst - eine Farbe, die irgendwo im
 * Stylesheet noch einmal als Zahl auftaucht, ist die naechste, die
 * nicht mitwandert.
 */

@font-face {
    font-family: 'Inter';
    /* Eine Datei fuer alle Schnitte (variable font), selbst
       ausgeliefert. Von einem fremden Dienst geladen widerspraeche es
       dem, was diese Seite ueber sich sagt - "kein Dienst in fremder
       Hand" - und waere ausserdem ein Datenschutzthema. SIL OFL 1.1,
       die Lizenz liegt daneben. */
    src: url('/font/InterVariable.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap;
    font-style: normal;
}

:root {
    color-scheme: light dark;

    /* Die drei aus dem Logo. Unveraendert, damit Seite und Marke
       dieselbe Farbe meinen. */
    --logo-cyan: #00d2ff;
    --logo-gruen: #116b41;
    --logo-gold: #e8b742;

    /* Heller Modus */
    --grund: #F6FBFC;
    --flaeche: #FFFFFF;
    --tinte: #0F1A1E;
    --tinte-leise: #4A5B61;
    --rand: #D9E7EA;
    --leit: #00687F;      /* Cyan als Text: Kontrast 6,12 */
    --betont: #116b41;    /* Gruen traegt auf hell unveraendert: 6,28 */
    --akzent: #8A6410;    /* Gold als Text: 5,15 */
    --auf-betont: #FFFFFF;

    /* Abstaende als Leiter, nicht je Stelle neu erfunden. */
    --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem;
    --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4rem;
    --rund: 10px;
    --zeile: 62ch;
}

@media (prefers-color-scheme: dark) {
    :root {
        --grund: #0B1418;
        --flaeche: #132026;
        --tinte: #E6F1F4;
        --tinte-leise: #9BB0B7;
        --rand: #1F333A;
        --leit: #4FE0FF;      /* 11,92 */
        --betont: #54C98A;    /* Gruen aufgehellt: 8,96 */
        --akzent: #F2CE74;    /* 12,29 */
        --auf-betont: #0B1418;
    }
}

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

body {
    margin: 0 auto;
    padding: var(--s6) var(--s4) var(--s8);
    max-width: 56rem;
    background: var(--grund);
    color: var(--tinte);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    /* Inter bringt echte Ziffern mit gleicher Breite und ein paar
       Feinheiten mit, die ohne diese Zeile ungenutzt blieben. */
    font-feature-settings: 'cv05' 1, 'ss03' 1;
}

h1, h2, h3 { line-height: 1.2; font-weight: 700; letter-spacing: -0.015em; }
h1 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.4rem); margin: 0 0 var(--s4); }
h2 { font-size: 1.25rem; margin: var(--s7) 0 var(--s3); }
h3 { font-size: 1.05rem; margin: var(--s5) 0 var(--s2); }
p { margin: 0 0 var(--s4); max-width: var(--zeile); }
.lead { font-size: 1.15rem; color: var(--tinte-leise); max-width: var(--zeile); }

a { color: var(--leit); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
code {
    font-size: 0.92em;
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: 5px;
    padding: 0.08em 0.38em;
}

header {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: var(--s3);
    margin-bottom: var(--s6);
    padding-bottom: var(--s4);
    border-bottom: 1px solid var(--rand);
}
.wordmark {
    display: flex; align-items: center; gap: var(--s2);
    margin: 0; font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em;
}
.emblem { height: 1.7em; width: auto; }
.language { margin: 0; font-size: 0.9rem; color: var(--tinte-leise); }

footer {
    margin-top: var(--s8); padding-top: var(--s4);
    border-top: 1px solid var(--rand);
    font-size: 0.88rem; color: var(--tinte-leise);
}

/* --- Startseite --- */

/* Das Produktlogo braucht weiter eine dunkle Flaeche: sein Schriftzug
   ist #FFFFFF. Im dunklen Modus faellt der Unterschied weg, hell bleibt
   es eine bewusst gesetzte Flaeche. */
.mark {
    background: #090D16;
    border-radius: 16px;
    padding: var(--s5);
    margin: 0 0 var(--s6);
    text-align: center;
}
.mark img { width: min(340px, 100%); height: auto; }

.benefits {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--s5);
    margin-top: var(--s6);
}
.benefits > div {
    border-top: 3px solid var(--logo-cyan);
    padding-top: var(--s3);
}
.benefits > div:nth-child(2) { border-top-color: var(--logo-gruen); }
.benefits > div:nth-child(3) { border-top-color: var(--logo-gold); }
.benefits h2 { margin: 0 0 var(--s2); font-size: 1.05rem; }
.benefits p { margin: 0; }

.kinds dl { display: grid; gap: var(--s4); margin: var(--s4) 0 0; }
.kinds dt {
    display: flex; align-items: center; gap: var(--s2);
    font-weight: 600; margin-bottom: var(--s1);
}
.kinds dt img { width: 1.9rem; height: 1.9rem; flex: none; }
.kinds dd { margin: 0; max-width: var(--zeile); }

.diagram { margin: var(--s5) 0; }
.diagram svg { width: 100%; height: auto; }
.diagram figcaption {
    font-size: 0.9rem; color: var(--tinte-leise); margin-top: var(--s2);
    max-width: var(--zeile);
}
.diagram .node-label { fill: currentColor; font-family: 'Inter', system-ui, sans-serif;
                       font-size: 15px; font-weight: 600; text-anchor: middle; }
.diagram .node-note { fill: var(--tinte-leise); font-family: 'Inter', system-ui, sans-serif;
                      font-size: 12px; text-anchor: middle; }

.next ul { list-style: none; padding: 0; margin: var(--s4) 0 0; }
.next li { margin-bottom: var(--s3); }
.next a { font-weight: 600; }
.next span { display: block; font-size: 0.9rem; color: var(--tinte-leise); }

/* --- Editionen --- */

table { border-collapse: collapse; width: 100%; margin: var(--s4) 0; font-size: 0.95rem; }
th, td { text-align: left; padding: var(--s2) var(--s3); border-bottom: 1px solid var(--rand); }
thead th { border-bottom: 2px solid var(--logo-cyan); font-weight: 700; }
tbody tr:hover { background: var(--flaeche); }

.note { color: var(--tinte-leise); font-size: 0.92rem; }

/* --- Seite "Arten von Jobs" --- */

.kind { margin-top: var(--s7); }
.kind h2 { display: flex; align-items: center; gap: var(--s3); margin-top: 0; }
.kind h2 img { width: 2.1rem; height: 2.1rem; flex: none; }
.kind h3 {
    font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.07em;
    color: var(--tinte-leise); margin: var(--s5) 0 var(--s2);
}
/* Jede Art bekommt eine Kante in einer der drei Farben - dieselbe
   Reihenfolge wie bei den Nutzenversprechen auf der Startseite. */
.kind { border-left: 3px solid var(--logo-cyan); padding-left: var(--s4); }
#plugin { border-left-color: var(--logo-gruen); }
#wasm { border-left-color: var(--logo-gold); }
#ai { border-left-color: var(--logo-cyan); }

pre {
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--rund);
    padding: var(--s3) var(--s4);
    overflow-x: auto;
    font-size: 0.86rem;
    line-height: 1.5;
}
/* Im Block keine zweite Umrandung - die hat schon das <pre>. */
pre code { background: none; border: none; padding: 0; font-size: inherit; }

/* --- Entwurfsabsätze --- */

/* Ein Absatz, der noch zu schreiben ist (issue #15, Teil 4). Sichtbar
   markiert, damit niemand ihn für fertigen Text hält - weder beim
   Durchsehen noch, falls die Seite doch einmal früher erreichbar ist
   als geplant. Der Hinweis kommt aus dem Textkatalog, steht also auch
   in der Sprache der Seite. */
[data-entwurf] {
    border-left: 3px solid var(--logo-gold);
    padding: var(--s2) var(--s4);
    background: var(--flaeche);
    border-radius: 0 var(--rund) var(--rund) 0;
    color: var(--tinte-leise);
}
[data-entwurf]::before {
    content: attr(data-entwurf);
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--akzent);
    margin-bottom: var(--s1);
}