/* Der Workspace-Look, seit 16.10.2026: Retro-Sci-Fi-Comic der Siebziger nach Dominics
   drei Vorlagen. Hell ist cremiges Papier mit Tusche, Dunkel der Petrol-Nachthimmel aus
   dem Austausch-Bild; die Farben sind aus den Bildern abgenommen (Himmel #fdefd6, Planet
   #f97c64 und #cd4c1e, All #064a54).

   Eine Datei fuer alle: die Workspace-Seite, die Listen des Blatts, der Austausch (gleiche
   Adresse) und die Flaeche (holt sie von hier, darum schickt der Dienst die Schriften mit
   Access-Control-Allow-Origin fuer die Flaeche, app.py statisch()). Eine Seite macht mit,
   indem sie <html class="ws"> traegt; ohne die Klasse aendert diese Datei nichts.
   Die Wahl Hell oder Dunkel kommt vom Frueh-Skript (_farben_frueh.html) und farben.js,
   Dunkel ist hier eine eigene Palette, keine Umkehr.

   ⚠ Die Blaetter selbst machen nicht mit. Sie sind fest hell und werden fuer Dunkel
   umgekehrt (blatt.css), daran haengt diese Datei nichts. Nur die Listen schalten die
   Umkehr ab, unten im Abschnitt Blatt. */

@font-face{font-family:"Montserrat Seite";font-weight:400;font-style:normal;
           font-display:swap;src:url(montserrat-400.woff2) format("woff2");}
@font-face{font-family:"Montserrat Seite";font-weight:500;font-style:normal;
           font-display:swap;src:url(montserrat-500.woff2) format("woff2");}

/* Papier */
html.ws{--ws-grund:#f3e8d2;--ws-karte:#fbf3e3;--ws-feld:#ebdfc6;--ws-rand:#1f1b16;
        --ws-linie:rgba(31,27,22,.2);--ws-text:#1f1b16;--ws-leise:#6f6354;
        --ws-akzent:#c4481b;--ws-fehler:#a3341f;
        --ws-schrift:"Montserrat Seite",system-ui,sans-serif;
        --ws-korn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .1 0 0 0 0 .08 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)' opacity='.13'/%3E%3C/svg%3E");
        --ws-staub:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27340%27 height=%27340%27%3E%3Cg fill=%27%231f1b16%27 fill-opacity=%270.32%27%3E%3Ccircle cx=%27314.0%27 cy=%27267.3%27 r=%271.1%27/%3E%3Ccircle cx=%27130.9%27 cy=%27102.8%27 r=%270.6%27/%3E%3Ccircle cx=%2761.7%27 cy=%27122.1%27 r=%270.6%27/%3E%3Ccircle cx=%2730.4%27 cy=%27309.0%27 r=%271.1%27/%3E%3Ccircle cx=%27273.9%27 cy=%27155.7%27 r=%270.9%27/%3E%3Ccircle cx=%27300.0%27 cy=%27226.0%27 r=%270.8%27/%3E%3Ccircle cx=%2753.7%27 cy=%2788.9%27 r=%271.1%27/%3E%3Ccircle cx=%2751.5%27 cy=%2757.6%27 r=%270.9%27/%3E%3Ccircle cx=%2743.5%27 cy=%2799.1%27 r=%270.8%27/%3E%3Ccircle cx=%27297.0%27 cy=%27190.6%27 r=%270.6%27/%3E%3Ccircle cx=%27111.0%27 cy=%27207.1%27 r=%270.9%27/%3E%3Ccircle cx=%27147.3%27 cy=%27335.6%27 r=%271.1%27/%3E%3Ccircle cx=%27224.5%27 cy=%2768.9%27 r=%270.9%27/%3E%3Ccircle cx=%27149.8%27 cy=%2744.4%27 r=%271.4%27/%3E%3Ccircle cx=%2737.4%27 cy=%27331.9%27 r=%270.7%27/%3E%3Ccircle cx=%27182.7%27 cy=%27292.5%27 r=%270.7%27/%3E%3Ccircle cx=%2773.7%27 cy=%2711.1%27 r=%270.8%27/%3E%3Ccircle cx=%27181.8%27 cy=%2756.6%27 r=%270.6%27/%3E%3Ccircle cx=%27154.7%27 cy=%2766.3%27 r=%270.9%27/%3E%3Ccircle cx=%27123.9%27 cy=%27119.6%27 r=%271.1%27/%3E%3Ccircle cx=%27321.6%27 cy=%27334.7%27 r=%270.9%27/%3E%3Ccircle cx=%27118.3%27 cy=%27199.0%27 r=%271.1%27/%3E%3Ccircle cx=%27151.8%27 cy=%2745.3%27 r=%271.1%27/%3E%3Ccircle cx=%2715.5%27 cy=%2756.2%27 r=%270.6%27/%3E%3Ccircle cx=%2772.5%27 cy=%27109.5%27 r=%270.9%27/%3E%3Ccircle cx=%27307.9%27 cy=%27170.9%27 r=%270.9%27/%3E%3Ccircle cx=%27313.1%27 cy=%2751.4%27 r=%270.9%27/%3E%3Ccircle cx=%27337.4%27 cy=%27150.7%27 r=%270.9%27/%3E%3Ccircle cx=%27180.4%27 cy=%27128.8%27 r=%270.7%27/%3E%3Ccircle cx=%27135.8%27 cy=%27332.0%27 r=%270.6%27/%3E%3Ccircle cx=%2735.9%27 cy=%273.9%27 r=%270.7%27/%3E%3Ccircle cx=%27171.4%27 cy=%27225.3%27 r=%270.8%27/%3E%3Ccircle cx=%27174.7%27 cy=%2773.7%27 r=%270.6%27/%3E%3Ccircle cx=%27253.9%27 cy=%27172.7%27 r=%271.4%27/%3E%3C/g%3E%3Cg fill=%27none%27 stroke=%27%231f1b16%27 stroke-opacity=%270.32%27 stroke-width=%27.9%27%3E%3Ccircle cx=%27276.5%27 cy=%2744.8%27 r=%272.7%27/%3E%3Ccircle cx=%2716.9%27 cy=%27316.1%27 r=%272.6%27/%3E%3Ccircle cx=%27310.7%27 cy=%2783.7%27 r=%273.0%27/%3E%3Ccircle cx=%27117.0%27 cy=%2775.4%27 r=%272.4%27/%3E%3C/g%3E%3C/svg%3E");
        color-scheme:light;}
/* Nacht */
html.ws[data-blatt-farben="dunkel"]{--ws-grund:#06262d;--ws-karte:#0a3640;--ws-feld:#0d3f49;
        --ws-rand:rgba(253,239,214,.6);--ws-linie:rgba(253,239,214,.22);--ws-text:#fdefd6;
        --ws-leise:#a3c2c0;--ws-akzent:#f97c64;--ws-fehler:#ff9b8f;
        --ws-staub:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27340%27 height=%27340%27%3E%3Cg fill=%27%23fdefd6%27 fill-opacity=%270.55%27%3E%3Ccircle cx=%27314.0%27 cy=%27267.3%27 r=%271.1%27/%3E%3Ccircle cx=%27130.9%27 cy=%27102.8%27 r=%270.6%27/%3E%3Ccircle cx=%2761.7%27 cy=%27122.1%27 r=%270.6%27/%3E%3Ccircle cx=%2730.4%27 cy=%27309.0%27 r=%271.1%27/%3E%3Ccircle cx=%27273.9%27 cy=%27155.7%27 r=%270.9%27/%3E%3Ccircle cx=%27300.0%27 cy=%27226.0%27 r=%270.8%27/%3E%3Ccircle cx=%2753.7%27 cy=%2788.9%27 r=%271.1%27/%3E%3Ccircle cx=%2751.5%27 cy=%2757.6%27 r=%270.9%27/%3E%3Ccircle cx=%2743.5%27 cy=%2799.1%27 r=%270.8%27/%3E%3Ccircle cx=%27297.0%27 cy=%27190.6%27 r=%270.6%27/%3E%3Ccircle cx=%27111.0%27 cy=%27207.1%27 r=%270.9%27/%3E%3Ccircle cx=%27147.3%27 cy=%27335.6%27 r=%271.1%27/%3E%3Ccircle cx=%27224.5%27 cy=%2768.9%27 r=%270.9%27/%3E%3Ccircle cx=%27149.8%27 cy=%2744.4%27 r=%271.4%27/%3E%3Ccircle cx=%2737.4%27 cy=%27331.9%27 r=%270.7%27/%3E%3Ccircle cx=%27182.7%27 cy=%27292.5%27 r=%270.7%27/%3E%3Ccircle cx=%2773.7%27 cy=%2711.1%27 r=%270.8%27/%3E%3Ccircle cx=%27181.8%27 cy=%2756.6%27 r=%270.6%27/%3E%3Ccircle cx=%27154.7%27 cy=%2766.3%27 r=%270.9%27/%3E%3Ccircle cx=%27123.9%27 cy=%27119.6%27 r=%271.1%27/%3E%3Ccircle cx=%27321.6%27 cy=%27334.7%27 r=%270.9%27/%3E%3Ccircle cx=%27118.3%27 cy=%27199.0%27 r=%271.1%27/%3E%3Ccircle cx=%27151.8%27 cy=%2745.3%27 r=%271.1%27/%3E%3Ccircle cx=%2715.5%27 cy=%2756.2%27 r=%270.6%27/%3E%3Ccircle cx=%2772.5%27 cy=%27109.5%27 r=%270.9%27/%3E%3Ccircle cx=%27307.9%27 cy=%27170.9%27 r=%270.9%27/%3E%3Ccircle cx=%27313.1%27 cy=%2751.4%27 r=%270.9%27/%3E%3Ccircle cx=%27337.4%27 cy=%27150.7%27 r=%270.9%27/%3E%3Ccircle cx=%27180.4%27 cy=%27128.8%27 r=%270.7%27/%3E%3Ccircle cx=%27135.8%27 cy=%27332.0%27 r=%270.6%27/%3E%3Ccircle cx=%2735.9%27 cy=%273.9%27 r=%270.7%27/%3E%3Ccircle cx=%27171.4%27 cy=%27225.3%27 r=%270.8%27/%3E%3Ccircle cx=%27174.7%27 cy=%2773.7%27 r=%270.6%27/%3E%3Ccircle cx=%27253.9%27 cy=%27172.7%27 r=%271.4%27/%3E%3C/g%3E%3Cg fill=%27none%27 stroke=%27%23fdefd6%27 stroke-opacity=%270.55%27 stroke-width=%27.9%27%3E%3Ccircle cx=%27276.5%27 cy=%2744.8%27 r=%272.7%27/%3E%3Ccircle cx=%2716.9%27 cy=%27316.1%27 r=%272.6%27/%3E%3Ccircle cx=%27310.7%27 cy=%2783.7%27 r=%273.0%27/%3E%3Ccircle cx=%27117.0%27 cy=%2775.4%27 r=%272.4%27/%3E%3C/g%3E%3C/svg%3E");
        color-scheme:dark;}

/* Ein feines Papierkorn, auf der Startseite dazu Sternenstaub (zufaellig gestreut, fester
   Zufall, in zwei Groessen versetzt). Am <html> und nicht am <body>: die Listen des Blatts haben einen
   schmalen body, dort laege der Grund sonst nur als Streifen. */
html.ws{background-color:var(--ws-grund);color:var(--ws-text);
        background-image:var(--ws-korn);background-size:220px 220px;}
/* Sterne nur auf der Workspace-Startseite (<html class="ws ws-sterne">). In den Bereichen
   waren sie Dominic zu viel (16.10.2026), dort bleibt nur das Papierkorn. */
html.ws.ws-sterne{background-image:var(--ws-staub),var(--ws-staub),var(--ws-korn);
        background-size:340px 340px,227px 227px,220px 220px;
        background-position:0 0,113px 71px,0 0;}
html.ws body{background:transparent;color:var(--ws-text);font-family:var(--ws-schrift);
        -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}

/* Panel mit Tuscherand und Bild aus workspace-bilder.css (wsb-...). Kopfbild der Bereiche
   flach, damit die Arbeit darunter nicht nach unten rutscht. */
.ws .ws-panel{border:1.5px solid var(--ws-rand);border-radius:10px;background-color:var(--ws-feld);
        background-size:cover;background-position:center;}
.ws .ws-kopfbild{aspect-ratio:4/1;margin:0 0 22px;}
@media (max-width:620px){.ws .ws-kopfbild{aspect-ratio:3/1;margin-bottom:16px;}}

/* Runder Knopf, etwa Hell und Dunkel. Das Zeichen setzt farben.js. */
.ws .ws-knopf{flex:none;display:inline-flex;align-items:center;justify-content:center;
        width:42px;height:42px;padding:0;border-radius:50%;border:1.5px solid var(--ws-rand);
        background:var(--ws-karte);color:var(--ws-text);cursor:pointer;
        font:18px/1 system-ui,sans-serif;transition:border-color .2s ease,color .2s ease;}
.ws .ws-knopf:hover{border-color:var(--ws-akzent);color:var(--ws-akzent);}
.ws .ws-knopf:focus-visible{outline:2px solid var(--ws-akzent);outline-offset:3px;}

/* Ueberschrift mit Knopf rechts */
.ws .ws-titel{display:flex;align-items:center;justify-content:space-between;gap:14px;}
.ws h1{font-family:var(--ws-schrift);font-weight:500;letter-spacing:-.01em;}

/* Reiter: Blatt (.anm-bereiche), Austausch und Flaeche (.bereiche). Die Schrift bleibt
   die gesperrte Maschinenschrift, wie Beschriftungen an der Station; der Strich unter
   dem aktuellen Bereich ist Rot-Orange statt Tuerkis. */
.ws .anm-bereiche,.ws .bereiche{border-bottom-color:var(--ws-linie);}
.ws .anm-bereiche a,.ws .bereiche a{color:var(--ws-text);}
.ws .anm-bereiche a[aria-current],.ws .bereiche a[aria-current]{border-bottom-color:var(--ws-akzent);}

@media (prefers-reduced-motion:reduce){.ws .ws-knopf{transition:none;}}

/* --- Blatt: Listen und Anmeldung -------------------------------------------------- */
/* Die Umkehr aus blatt.css gilt nur fuer Blaetter. Auf den Listen ist Dunkel die
   Nachtpalette oben, also beide Schichten weg. */
html.ws[data-blatt-farben="dunkel"]::before,
html.ws[data-blatt-farben="dunkel"]::after{content:none;}
html.ws[data-blatt-farben="dunkel"] img{filter:none;}
.ws body.anm-schlicht{max-width:46rem;font-size:16px;}
.ws body.anm-schlicht h1{font-size:2.1rem;line-height:1.1;margin:0 0 .4rem;}
.ws .anm-schalter,.ws .anm-griff,.ws .anm-neu button{font-family:var(--ws-schrift);
        background:var(--ws-karte);color:var(--ws-text);border:1.5px solid var(--ws-rand);
        border-radius:999px;}
.ws .anm-schalter{padding:.3em .9em;}
.ws .anm-neu button{font-size:.9rem;padding:.45rem 1rem;cursor:pointer;}
.ws .anm-schalter:hover,.ws .anm-griff:hover,.ws .anm-neu button:hover{border-color:var(--ws-akzent);
        color:var(--ws-akzent);}
.ws .anm-blattliste li{border-bottom-color:var(--ws-linie);}
.ws .anm-blattliste a:hover .anm-titel{color:var(--ws-akzent);}
.ws .anm-neben{color:var(--ws-leise);opacity:1;}
.ws .anm-neben a{color:inherit;}
.ws .anm-neben b{color:var(--ws-akzent);font-weight:500;}
.ws .anm-leer{color:var(--ws-leise);}
.ws .anm-anmeldung input{background:var(--ws-karte);color:var(--ws-text);
        border:1.5px solid var(--ws-rand);border-radius:8px;}
.ws .anm-anmeldung button{background:var(--ws-text);color:var(--ws-grund);border-radius:8px;
        font-weight:500;}
.ws .anm-fehler{color:var(--ws-fehler);}