/* News.Neudenkerei.ch — Stil der Anmeldung.
 *
 * FARBEN aus Coworks Marke/marke.json, 28.08.2026. Nicht neu einfärben,
 * nicht aufhellen — sie stammen aus dem ursprünglichen RECH-Logo.
 *
 * ====================================================================
 *  DIE UMKEHRUNG GILT NUR IM RAHMEN. Das ist der Fund von 20:50.
 * ====================================================================
 *
 * Coworks Vorgabe lautet: die Anmelde-INSEL ist immer das Gegenteil der
 * Seite — im hellen Modus dunkel, im dunklen hell. Dadurch bleibt sie in
 * beiden Fällen der auffälligste Punkt.
 *
 * Ich hatte diese Umkehrung auf ALLE Seiten dieser Subdomain gelegt. Für
 * den eingebetteten Rahmen ist sie richtig; für die eigenständigen
 * Seiten war sie falsch:
 *
 *                              heller Modus   dunkler Modus
 *   Startseite                 hell           dunkel
 *     darin die Insel          DUNKEL         HELL          <- Umkehrung
 *   news. als eigene Seite     dunkel         HELL          <- war falsch
 *     richtig                  hell           dunkel
 *
 * Eine eigenständige Seite hat keine Seite, zu der sie das Gegenteil
 * sein könnte. Sie kehrte damit schlicht die Einstellung des Besuchers
 * um: Wer sein Gerät auf dunkel stellt, bekam eine weisse Seite ins
 * Gesicht — ausgerechnet auf der Bestätigungsseite, die man abends aus
 * einer Mail heraus öffnet.
 *
 * Darum jetzt zwei Sätze Farben:
 *   :root                 die normale Seite, wie die Startseite
 *   body.eingebettet      die Umkehrung, nur im Rahmen
 *
 * KEIN style="..." IRGENDWO IM HTML. Die Sicherheitsregel style-src
 * 'self' verwirft nicht nur <style>-Blöcke, sondern auch die Attribute.
 * Gemessen von PW-Newsletter_Online am 27.08.2026: der Entwurf sah in
 * der Vorschau richtig aus und kam ohne Layout an.
 *
 * FASSUNG SEIT 28.08.2026
 */

/* ---------------------------------------- die normale Seite, hell ---- */
:root{
  --grund:#F4F6F2; --panel:#FFFFFF; --linie:#DBE2D9;
  --ink:#111A14; --ink-2:#3A443C; --ink-3:#616B62;
  --akzent:#2F7D10;          /* auf Weiss 4,75:1 — #54FF00 wäre zu wenig */
  --feld:#F4F6F2; --feldrahmen:#C4CEC2;
  --knopf:#2F7D10; --auf-knopf:#FFFFFF;
  --tief:#034439;
}

/* ---------------------------------------- die normale Seite, dunkel -- */
@media (prefers-color-scheme: dark){
  :root{
    --grund:#101713;         /* gebrochenes Schwarz mit Grünstich */
    --panel:#16211B; --linie:#26332C;
    --ink:#F2F4F0; --ink-2:#C3CBBE; --ink-3:#8A9389;
    --akzent:#54FF00;        /* Neongrün, nur auf dunklem Grund */
    --feld:#0E1511; --feldrahmen:#3E4C43;
    --knopf:#54FF00; --auf-knopf:#034439;   /* Schrift auf dem Neon: 8,3:1 */
  }
}

/* ---------------------------------------- der Rahmen: umgekehrt ------ */
/* Heller Modus draussen -> dunkle Insel drinnen. */
body.eingebettet{
  --grund:transparent; --panel:#16211B; --linie:#2E3A31;
  --ink:#F2F4F0; --ink-2:#C3CBBE; --ink-3:#8A9389;
  --akzent:#54FF00;
  --feld:#1B2620; --feldrahmen:#3E4C43;
  --knopf:#54FF00; --auf-knopf:#034439;
}
/* Dunkler Modus draussen -> helle Insel drinnen. */
@media (prefers-color-scheme: dark){
  body.eingebettet{
    --grund:transparent; --panel:#FFFFFF; --linie:#CFD6CC;
    --ink:#12180F; --ink-2:#4A524A; --ink-3:#616B62;
    --akzent:#2F7D10;
    --feld:#FFFFFF; --feldrahmen:#C4CEC2;
    --knopf:#2F7D10; --auf-knopf:#FFFFFF;
  }
}

/* Die Schriften liegen NICHT bei — sie fehlen noch von Cowork. Fehlt der
   Ordner, greift still die Ersatzkette, und die Seite bleibt vollständig
   benutzbar; sie sieht nur nicht nach Archivo aus.
   Wurzelbezogen, damit sie auch unter /bestaetigen/<code> gefunden
   werden — dieselbe Falle wie beim Stilblatt selbst. */
@font-face{ font-family:"Archivo";font-style:normal;font-weight:400;font-display:swap;
  src:url("/schrift/Archivo-400.woff2") format("woff2"); }
@font-face{ font-family:"Archivo";font-style:normal;font-weight:800;font-display:swap;
  src:url("/schrift/Archivo-800.woff2") format("woff2"); }
@font-face{ font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("/schrift/IBMPlexMono-400.woff2") format("woff2"); }

/* ==================================================== Grundgerüst ==== */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--grund);color:var(--ink);
  font-family:Archivo,"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
/* Im Rahmen kein eigener Rand: die Elternseite bringt ihren mit, und
   zwei Ränder übereinander sehen aus wie ein Fremdkörper. */
body.eingebettet .wrap{padding:0;max-width:680px}

.wrap{max-width:680px;margin:0 auto;padding:44px 26px 56px}

h1{margin:0;font-size:clamp(26px,4.4vw,38px);font-weight:800;
   letter-spacing:-.03em;line-height:1.12;text-wrap:balance;color:var(--ink)}
h2{margin:0 0 10px;font-size:22px;font-weight:800;letter-spacing:-.025em;color:var(--ink)}
p{margin:16px 0 0;color:var(--ink-2)}
p.sub{font-size:17px;max-width:56ch}
p.klein{font-size:13px;line-height:1.5;color:var(--ink-3);margin-top:26px}
a{color:var(--akzent)}
:focus-visible{outline:2px solid var(--akzent);outline-offset:3px}

/* Die Wortmarke steht auf jeder eigenständigen Seite. Wer aus einer Mail
   hier landet, sieht sonst eine Seite ohne Absender — und eine Seite
   ohne Absender sieht nach Betrug aus. */
.marke{margin:0 0 34px}
.marke .wort{display:block;font-size:24px;font-weight:800;
             letter-spacing:-.035em;line-height:1;color:var(--ink)}
.marke .balken{display:block;width:56px;height:4px;background:var(--akzent);margin-top:10px}

/* ====================================================== Formular ===== */

form{margin-top:26px;display:flex;flex-direction:column;gap:16px}
.feldreihe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
label{display:block;font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
      font-size:12px;letter-spacing:.14em;text-transform:uppercase;
      color:var(--ink-3);margin-bottom:7px}
input[type=text],input[type=email]{
  width:100%;padding:13px 14px;font-family:inherit;font-size:16px;
  color:var(--ink);background:var(--feld);border:1px solid var(--feldrahmen)}
input[type=text]:focus,input[type=email]:focus{
  border-color:var(--akzent);outline:none;
  box-shadow:0 0 0 2px color-mix(in srgb, var(--akzent) 32%, transparent)}

.zustimmung{display:flex;gap:12px;align-items:flex-start;
            font-size:15px;line-height:1.45;color:var(--ink-2)}
.zustimmung input{margin-top:3px;width:18px;height:18px;
                  accent-color:var(--akzent);flex:none}
.zustimmung label{font-size:15px;letter-spacing:0;text-transform:none;
                  color:inherit;margin:0;font-family:inherit}

button,a.knopf{
  align-self:flex-start;display:inline-block;
  background:var(--knopf);color:var(--auf-knopf);border:0;
  font-family:inherit;font-size:16px;font-weight:600;letter-spacing:-.01em;
  padding:14px 26px;cursor:pointer;text-decoration:none}
button:hover,a.knopf:hover{background:var(--tief);color:#F2F4F0}

.hinweis{font-size:14px;line-height:1.5;color:var(--ink-3);max-width:56ch;margin:0}

/* Der Honigtopf. Nicht display:none — manche Automaten überspringen, was
   unsichtbar geschaltet ist. Aus dem Bild geschoben fällt er ihnen nicht
   auf, und ein Mensch sieht ihn trotzdem nie. */
.falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ====================================================== Meldungen ==== */

.fehler{margin-top:18px;padding:14px 16px;background:var(--panel);
        border-left:3px solid #B3261E;color:var(--ink);font-size:15px}
.danke{margin-top:8px;padding:22px 24px;background:var(--panel);
       border:1px solid var(--linie);border-left:3px solid var(--akzent)}
.danke h2{margin-bottom:0}
.danke p{margin-top:12px}

/* Antwortseiten: Bestätigung, Abmeldung, abgelaufener Link.
   Sie sind der LETZTE Schritt einer Kette, die schon bezahlt ist — der
   Mensch hat sich eingetragen, die Mail gesucht, gefunden und geklickt.
   Eine nackte Seite an dieser Stelle entwertet alles davor. */
.antwort{background:var(--panel);border:1px solid var(--linie);
         border-left:3px solid var(--akzent);padding:28px 30px}
/* Eigener Name, nicht "hinweis": den gibt es oben schon für den
   Erklärtext unter dem Formular. Zwei Bedeutungen an einem Namen halten
   genau so lange, bis jemand den einen sucht und den anderen findet. */
.antwort.warnung{border-left-color:#C9A227}
.antwort h1{margin:0 0 14px;font-size:clamp(24px,4vw,34px)}
.antwort p{margin:0 0 14px}
.antwort p:last-child{margin-bottom:0}
.antwort p.gross{font-size:19px;color:var(--ink)}
.antwort p.klein{font-size:14px;color:var(--ink-3);margin-top:0}

/* Der Weg zurück ist ein Knopf, kein Link im Fliesstext. Wer hier fertig
   ist, soll einen sichtbaren nächsten Schritt haben statt einer
   Sackgasse. */
.zurueck{margin-top:28px}

/* Das Testband. Auffällig, weil es auffallen MUSS: eine Testseite, die
   aussieht wie die echte, wird irgendwann für die echte gehalten.
   Im Rahmen NICHT klebend — dort steht schon eines der Elternseite
   darüber, und zwei klebende Bänder übereinander verdecken das
   Formular. */
.testband{
  position:sticky;top:0;z-index:60;background:#B3261E;color:#fff;
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13px;letter-spacing:.06em;text-align:center;padding:9px 14px;
}
body.eingebettet .testband{position:static;margin-bottom:18px}

@media (max-width:600px){
  body{font-size:16px}
  .feldreihe{grid-template-columns:1fr}
  .wrap{padding:30px 20px 40px}
  .antwort{padding:22px 20px}
}