/* ============================================================
   corvint.de - Retro-Schicht (90er Rechneroberflaeche)
   Liegt UEBER assets/style.css und aendert nur das Aussehen.
   Inhalte, Struktur und Originaldateien bleiben unberuehrt.
   ============================================================ */

:root{
  --r-tinte:#0B1230;
  --r-blau:#0C3EFF;
  --r-blau-dunkel:#0033CC;
  --r-hell:#A9C8FF;
  --r-flaeche:#EDF3FF;
  --r-papier:#DCE6FF;
  --r-orange:#E4886A;
  --r-mono:"Chicago","Lucida Console","Courier New",ui-monospace,monospace;
}

/* ---------- Grundton ---------- */
html.retro *{border-radius:0 !important}
/* Das Original setzt auf Ueberschriften text-wrap:balance. In der Monoschrift
   sieht der ausgeglichene Umbruch schief aus, deshalb hier gerader Umbruch.
   Nur auf Ueberschriften: als `*`-Regel hat das jedes white-space:nowrap
   ausgehebelt, weil text-wrap Teil dieser Kurzschreibweise ist. Die Sprungleiste
   und die Knoepfe sind dann mitten im Text umgebrochen. */
html.retro h1,html.retro h2,html.retro h3,html.retro h4{text-wrap:wrap !important}
html.retro{background:var(--r-papier)}
html.retro body{
  font-family:var(--r-mono) !important;
  color:var(--r-tinte) !important;
  font-size:15px !important;
  line-height:1.65 !important;
  letter-spacing:.01em;
  background:
    repeating-linear-gradient(0deg,rgba(12,62,255,.10) 0 2px,transparent 2px 4px),
    repeating-linear-gradient(90deg,rgba(12,62,255,.10) 0 2px,transparent 2px 4px),
    var(--r-papier) !important;
}
html.retro h1,html.retro h2,html.retro h3,html.retro h4{
  font-family:var(--r-mono) !important;
  color:var(--r-tinte) !important;
  letter-spacing:.02em !important;
  text-transform:uppercase;
  line-height:1.2 !important;
  text-shadow:2px 2px 0 var(--r-hell);
}
html.retro h1{font-size:clamp(24px,3.4vw,38px) !important}
html.retro h2{font-size:clamp(19px,2.4vw,27px) !important}
html.retro h3{font-size:17px !important}
html.retro p,html.retro li,html.retro span,html.retro a,html.retro div{font-family:var(--r-mono) !important}
html.retro b,html.retro strong{font-weight:700}
html.retro img{image-rendering:pixelated;filter:grayscale(1) contrast(1.05) brightness(.99) sepia(.45) hue-rotate(178deg) saturate(.75)}

/* Bildschirmzeilen ueber allem */
html.retro::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(11,18,48,.055) 0 1px,transparent 1px 3px);
}

html.retro .reveal{transition:opacity .18s steps(4),transform .18s steps(4) !important}

/* ---------- Fensterrahmen fuer Kaesten ---------- */
html.retro .tor,html.retro .grund,html.retro .schritt,html.retro .c-sp,html.retro .c-dunkel,html.retro .c-hell,html.retro .minibox,html.retro .formkasten,html.retro .termin,html.retro .preisblock,html.retro .jetzt-bild,html.retro .profil-bild,html.retro .jetzt-satz,html.retro .liste .e{
  position:relative;
  background:#fff !important;
  color:var(--r-tinte) !important;
  border:2px solid var(--r-tinte) !important;
  box-shadow:5px 5px 0 var(--r-blau-dunkel) !important;
  padding-top:40px !important;
  margin-top:14px;
}
html.retro .tor::before,html.retro .grund::before,html.retro .schritt::before,html.retro .c-sp::before,html.retro .c-dunkel::before,html.retro .c-hell::before,html.retro .minibox::before,html.retro .formkasten::before,html.retro .termin::before,html.retro .preisblock::before,html.retro .jetzt-bild::before,html.retro .profil-bild::before,html.retro .jetzt-satz::before,html.retro .liste .e::before{
  content:"corvint.exe";
  position:absolute;top:0;left:0;right:0;height:26px;
  display:flex;align-items:center;gap:8px;
  padding:0 8px;
  background:repeating-linear-gradient(180deg,var(--r-blau) 0 2px,var(--r-blau-dunkel) 2px 4px);
  color:#fff;font-family:var(--r-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;border-bottom:2px solid var(--r-tinte);
  transform:none !important;opacity:1 !important;
}
html.retro .tor::after,html.retro .grund::after,html.retro .schritt::after,html.retro .c-sp::after,html.retro .c-dunkel::after,html.retro .c-hell::after,html.retro .minibox::after,html.retro .formkasten::after,html.retro .termin::after,html.retro .preisblock::after,html.retro .jetzt-bild::after,html.retro .profil-bild::after,html.retro .jetzt-satz::after,html.retro .liste .e::after{
  content:"_ [] X";
  position:absolute;top:0;right:8px;height:26px;
  display:flex;align-items:center;
  color:#fff;font-family:var(--r-mono);font-size:11px;letter-spacing:.2em;
  background:none !important;border:0 !important;transform:none !important;opacity:1 !important;
}
html.retro .c-dunkel::before{content:"was_du_bekommst.exe"}
html.retro .c-hell::before{content:"wie_wir_arbeiten.exe"}
html.retro .preisblock::before{content:"preisrechner.exe"}
html.retro .formkasten::before{content:"anfrage.exe"}
html.retro .termin::before{content:"termin.exe"}
html.retro .tor-a::before{content:"fuer_dich.exe"}
html.retro .tor-b::before{content:"fuer_euren_betrieb.exe"}
html.retro .grund::before{content:"warum.txt"}
html.retro .schritt::before{content:"schritt.exe"}
html.retro .minibox::before{content:"hinweis.txt"}
html.retro .jetzt-bild::before,html.retro .profil-bild::before{content:"portrait.bmp"}
html.retro .jetzt-satz::before{content:"liesmich.txt"}

html.retro .c-dunkel,html.retro .c-dunkel h2,html.retro .c-dunkel h3,html.retro .c-dunkel p,html.retro .c-dunkel li,html.retro .c-dunkel span{color:var(--r-tinte) !important}
html.retro .c-dunkel{background:var(--r-flaeche) !important}
html.retro .tor:hover,html.retro .schritt:hover,html.retro .c-sp:hover{transform:translate(-2px,-2px) !important;box-shadow:7px 7px 0 var(--r-blau-dunkel) !important}

/* ---------- Kopfzeile als Menueleiste ---------- */
html.retro header.top{
  background:var(--r-flaeche) !important;
  border-bottom:2px solid var(--r-tinte) !important;
  box-shadow:0 4px 0 rgba(11,18,48,.25);
}
html.retro .top-in{min-height:64px !important}
html.retro .marke{text-transform:uppercase;letter-spacing:.08em}
html.retro .marke i{color:var(--r-blau) !important}
html.retro header.top::after{
  content:"Datei   Bearbeiten   Ansicht   Hilfe";
  display:block;padding:4px 16px;font-family:var(--r-mono);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;
  background:var(--r-hell);color:var(--r-tinte);border-top:2px solid var(--r-tinte);
}
html.retro .nav a{text-transform:uppercase;font-size:12px !important;letter-spacing:.1em}
html.retro .nav a:hover{background:var(--r-blau);color:#fff !important}

/* ---------- Knoepfe mit Kante ---------- */
html.retro .cta,html.retro .btn,html.retro .termin a,html.retro .knoepfe a,html.retro .w-knoepfe a,html.retro .fnav button,html.retro .fnav a,html.retro button.cta,html.retro .top-in>.cta,html.retro .schalter button,html.retro .schalter a{
  background:var(--r-hell) !important;
  color:var(--r-tinte) !important;
  border:2px solid var(--r-tinte) !important;
  box-shadow:3px 3px 0 var(--r-blau-dunkel) !important;
  text-transform:uppercase;font-size:12.5px !important;letter-spacing:.1em;
  padding:10px 18px !important;font-weight:700 !important;
}
html.retro .cta:hover,html.retro .btn:hover,html.retro .termin a:hover,html.retro .knoepfe a:hover,html.retro .w-knoepfe a:hover,html.retro .top-in>.cta:hover,html.retro .fnav button:hover{
  background:var(--r-blau) !important;color:#fff !important;
}
html.retro .cta:active,html.retro .btn:active,html.retro .termin a:active,html.retro .knoepfe a:active,html.retro .top-in>.cta:active{
  transform:translate(3px,3px);box-shadow:0 0 0 var(--r-blau-dunkel) !important;
}

/* ---------- Aufmacher als Startfenster ---------- */
html.retro .aufmacher,html.retro .kopf,html.retro .hero{
  background:var(--r-flaeche) !important;
  border-bottom:2px solid var(--r-tinte) !important;
}
html.retro .auf-frage::after{
  content:"_";color:var(--r-blau);animation:r-blink 1s steps(1) infinite;
}
@keyframes r-blink{0%,50%{opacity:1}51%,100%{opacity:0}}
html.retro .auf-antwort{font-size:16px !important;color:var(--r-blau-dunkel) !important;text-transform:uppercase;letter-spacing:.08em}
html.retro .rolle,html.retro .eyebrow{
  display:inline-block;background:var(--r-blau) !important;color:#fff !important;
  padding:3px 9px;font-size:11px !important;letter-spacing:.16em;border:2px solid var(--r-tinte);
}
html.retro .fakten span{
  border:2px solid var(--r-tinte) !important;background:var(--r-flaeche) !important;
  color:var(--r-tinte) !important;padding:4px 9px;font-size:11.5px !important;letter-spacing:.06em;
}
html.retro .weiter{text-transform:uppercase;letter-spacing:.08em;color:var(--r-blau-dunkel) !important;font-weight:700}

/* ---------- Flaechen und Bereiche ---------- */
/* .abschluss gehoert hier NICHT hinein: der Abschnitt ist im Original dunkel mit
   heller Schrift und wird weiter unten als dunkle Flaeche behandelt. Als
   `section.abschluss` war diese Regel spezifischer und hat ihn aufgehellt,
   die weisse Schrift blieb stehen und war nicht mehr zu lesen. */
html.retro section.flaeche,html.retro section.jetzt,html.retro section.sprech,html.retro section.wechsel{
  background:var(--r-papier) !important;
  border-top:2px solid var(--r-tinte);
}
html.retro nav.sprung{background:var(--r-hell) !important;border-bottom:2px solid var(--r-tinte) !important}
html.retro nav.sprung a{text-transform:uppercase;font-size:11.5px !important;letter-spacing:.1em}

html.retro ul.haken li::before,html.retro .haken li::marker{color:var(--r-blau) !important}
html.retro ul.haken li{list-style:none}
html.retro ul.haken li::before{
  content:"[x]" !important;position:absolute !important;left:0 !important;top:0 !important;
  width:auto !important;height:auto !important;border:0 !important;transform:none !important;
  color:var(--r-blau) !important;font-family:var(--r-mono);font-size:14px;letter-spacing:-.04em;
}
html.retro .haken-hell li::before{color:var(--r-blau) !important}

/* ---------- Formular wie ein Dialogfeld ---------- */
html.retro input,html.retro select,html.retro textarea{
  font-family:var(--r-mono) !important;
  border:2px solid var(--r-tinte) !important;
  background:#fff !important;box-shadow:inset 2px 2px 0 rgba(11,18,48,.18) !important;
  padding:9px 10px !important;
}
html.retro label{font-size:12px !important;text-transform:uppercase;letter-spacing:.08em}

/* ---------- Fusszeile als Statusleiste ---------- */
html.retro footer{
  background:var(--r-flaeche) !important;
  border-top:2px solid var(--r-tinte) !important;
}
html.retro .fuss{font-size:11.5px !important;letter-spacing:.06em}
html.retro .fuss a{text-transform:uppercase}
html.retro .fuss a:hover{background:var(--r-blau);color:#fff !important}

/* ---------- kleine Bildschirme ---------- */
@media (max-width:1040px){
  /* Das Klappmenue ist hier eine Spalte. Die Regeln fuer die Kopfzeile am Rechner
     (enger Abstand, kleine Schrift) machen daraus sonst lose Zeilen mit Luecken
     zwischen den Trennlinien. Hier also: keine Luecke, volle Breite, Linien wie
     im Rest der Retro-Schicht. */
  html.retro .nav{
    gap:0 !important;padding:0 !important;
    background:var(--r-flaeche) !important;
    border:2px solid var(--r-tinte) !important;border-top:0 !important;
    box-shadow:0 5px 0 rgba(11,18,48,.25) !important;
  }
  html.retro .nav a{
    width:100%;padding:14px var(--rand,28px) !important;
    font-size:13.5px !important;letter-spacing:.08em !important;
    border-bottom:2px solid var(--r-tinte) !important;
  }
  html.retro .nav a:last-of-type{border-bottom:0 !important}
  html.retro .nav a.hier{background:var(--r-hell) !important}
}
@media (max-width:820px){
  html.retro .tor,html.retro .grund,html.retro .schritt,html.retro .c-sp,html.retro .c-dunkel,html.retro .c-hell{box-shadow:4px 4px 0 var(--r-blau-dunkel) !important}
}

/* ---------- Nachschaerfen ---------- */
/* Fotos bekommen den Retro-Ton, bleiben aber ruhig: kraeftigere Saettigung
   liess Gesichter neonblau leuchten. */
html.retro img{filter:grayscale(1) contrast(1.05) brightness(.99) sepia(.45) hue-rotate(178deg) saturate(.75) !important}
html.retro .rolle,html.retro .eyebrow{width:fit-content !important;max-width:100%}
html.retro p,html.retro li,html.retro td,html.retro figcaption,html.retro .satz,html.retro .dazu,html.retro .wer,html.retro .fuss,html.retro .fuss a,html.retro .hinweis,html.retro small{color:var(--r-tinte) !important}
html.retro .tor p,html.retro .tor h2,html.retro .tor span,html.retro .tor .satz{color:var(--r-tinte) !important}
html.retro a{color:var(--r-blau-dunkel)}

/* ---------- Formular: Beschriftungen sichtbar halten ---------- */
html.retro .formkasten label,
html.retro .formkasten .fgroup,
html.retro .formkasten p,
html.retro .formkasten span,
html.retro .formkasten .check,
html.retro .formkasten li{color:var(--r-tinte) !important}
html.retro .formkasten ::placeholder{color:#6B7BA8 !important;opacity:1}
html.retro .formkasten select,html.retro .formkasten option{color:var(--r-tinte) !important}
html.retro .liste .e::before{content:"profil.txt"}

/* ---------- dunkle Bloecke werden zu Terminalfenstern ----------
   Im Original sind diese Flaechen schwarz mit heller Schrift.
   In der Retro-Schicht bleiben sie dunkel, damit der Text lesbar bleibt. */
html.retro .dunkel,
html.retro .tun-dunkel,
html.retro .abschluss,
html.retro .rabe,
html.retro .kk-dunkel,
html.retro .art.dunkel,
html.retro .tor-b,
html.retro .c-dunkel,
html.retro .formkasten{
  background:var(--r-tinte) !important;
  color:#DCE6FF !important;
  border-color:var(--r-tinte) !important;
}
html.retro .dunkel *,
html.retro .tun-dunkel *,
html.retro .abschluss *,
html.retro .rabe *,
html.retro .kk-dunkel *,
html.retro .art.dunkel *,
html.retro .tor-b *,
html.retro .c-dunkel *,
html.retro .formkasten label,
html.retro .formkasten .fgroup,
html.retro .formkasten p,
html.retro .formkasten .check,
html.retro .formkasten .check *{color:#DCE6FF !important}
html.retro .dunkel h1,html.retro .dunkel h2,html.retro .dunkel h3,
html.retro .tun-dunkel h2,html.retro .tun-dunkel h3,
html.retro .abschluss h1,html.retro .abschluss h2,html.retro .abschluss h3,
html.retro .rabe h2,html.retro .rabe h3,
html.retro .kk-dunkel h3,html.retro .art.dunkel h3,
html.retro .tor-b h2,html.retro .c-dunkel h2,html.retro .c-dunkel h3{
  color:#fff !important;text-shadow:2px 2px 0 var(--r-blau) !important;
}
html.retro .dunkel .eyebrow,html.retro .dunkel .rolle,
html.retro .tor-b .rolle,html.retro .c-dunkel .eyebrow,
html.retro .abschluss .eyebrow,html.retro .rabe .eyebrow{
  background:var(--r-blau) !important;color:#fff !important;border-color:var(--r-hell) !important;
}
html.retro .dunkel a,html.retro .abschluss a,html.retro .rabe a,
html.retro .tor-b a,html.retro .c-dunkel a{color:var(--r-hell) !important}
html.retro .dunkel .fakten span,html.retro .tor-b .fakten span{
  background:none !important;border-color:var(--r-hell) !important;color:#DCE6FF !important;
}
html.retro .tor-b .weiter,html.retro .dunkel .weiter{color:var(--r-hell) !important}
html.retro .c-dunkel .haken li::before,
html.retro .dunkel .haken li::before{color:var(--r-hell) !important}
/* Knoepfe auf dunklem Grund behalten ihre helle Flaeche */
html.retro .dunkel .btn,html.retro .abschluss .btn,html.retro .rabe .btn,
html.retro .dunkel .cta,html.retro .abschluss .cta,
html.retro .formkasten .fnav button,html.retro .formkasten .fnav a{
  background:var(--r-hell) !important;color:var(--r-tinte) !important;
  border:2px solid var(--r-hell) !important;box-shadow:3px 3px 0 var(--r-blau) !important;
}
/* Eingabefelder bleiben hell mit dunkler Schrift */
html.retro .formkasten input,html.retro .formkasten select,
html.retro .formkasten textarea,html.retro .formkasten option{
  background:#fff !important;color:var(--r-tinte) !important;border:2px solid var(--r-hell) !important;
}
html.retro .formkasten ::placeholder{color:#6B7BA8 !important;opacity:1}

/* ---------- die Farbwerte des Originals im Retro-Zustand umbiegen ----------
   So bekommen auch Flaechen und Linien den Retro-Ton, ohne jede Regel einzeln zu fassen. */
html.retro{
  --flaeche:#DCE6FF;
  --blauflaeche:#EDF3FF;
  --linie:#8FA9E8;
  --grau:#33477F;
  --schwarz:#0B1230;
  --text:#0B1230;
  --orange:#0C3EFF;
}

/* Textfarbe auf dunklen Bloecken mit genug Gewicht, damit sie fruehere Regeln schlaegt */
html.retro .dunkel p,html.retro .dunkel span,html.retro .dunkel li,html.retro .dunkel b,html.retro .dunkel strong,
html.retro .tun-dunkel p,html.retro .tun-dunkel span,html.retro .tun-dunkel li,html.retro .tun-dunkel b,
html.retro .abschluss p,html.retro .abschluss span,html.retro .abschluss li,html.retro .abschluss b,
html.retro .rabe p,html.retro .rabe span,html.retro .rabe li,html.retro .rabe b,
html.retro .kk-dunkel p,html.retro .kk-dunkel span,html.retro .kk-dunkel li,
html.retro .art.dunkel p,html.retro .art.dunkel span,html.retro .art.dunkel li,
html.retro .tor-b p,html.retro .tor-b span,html.retro .tor-b li,html.retro .tor-b b,
html.retro .c-dunkel p,html.retro .c-dunkel span,html.retro .c-dunkel li,html.retro .c-dunkel b,
html.retro .formkasten label,html.retro .formkasten p,html.retro .formkasten span,html.retro .formkasten li{
  color:#DCE6FF !important;
}
html.retro .tor-b .rolle,html.retro .dunkel .rolle,html.retro .dunkel .eyebrow,
html.retro .c-dunkel .eyebrow,html.retro .abschluss .eyebrow{color:#fff !important}
html.retro .tor-b .fakten span,html.retro .dunkel .fakten span{color:#DCE6FF !important}
html.retro .dunkel h1,html.retro .dunkel h2,html.retro .dunkel h3,
html.retro .abschluss h1,html.retro .abschluss h2,html.retro .rabe h2,
html.retro .tor-b h2,html.retro .c-dunkel h2,html.retro .c-dunkel h3,
html.retro .tun-dunkel h2,html.retro .tun-dunkel h3{text-shadow:1px 1px 0 var(--r-blau) !important}

/* letzte Feinheit: auch benannte Textbausteine auf dunklem Grund hell setzen */
html.retro :is(.dunkel,.tun-dunkel,.abschluss,.rabe,.kk-dunkel,.art.dunkel,.tor-b,.c-dunkel,.formkasten)
  :is(p,span,li,b,strong,label,.satz,.lead,.sub,.ordnung,.wer,.dazu,.werkzeuge,.preis,.preis-zeile,.weiter,.fgroup){
  color:#DCE6FF !important;
}
html.retro :is(.dunkel,.abschluss,.rabe,.tor-b,.c-dunkel) :is(h1,h2,h3,h4){color:#fff !important}
html.retro :is(.dunkel,.abschluss,.rabe,.tor-b,.c-dunkel) :is(.rolle,.eyebrow){color:#fff !important}

/* Handy: Formularfelder in der Retro-Schicht nicht breiter werden lassen als die Seite */
@media (max-width:820px){
  html.retro .formkasten,html.retro .form,html.retro .frow,html.retro .f,html.retro .fteil{
    max-width:100% !important;min-width:0 !important;
  }
  html.retro .frow{grid-template-columns:1fr !important;display:grid !important}
  html.retro input,html.retro select,html.retro textarea{
    width:100% !important;max-width:100% !important;min-width:0 !important;box-sizing:border-box;
  }
}

/* ---------- Fusszeile und Terminband bleiben dunkel ---------- */
html.retro footer,
html.retro .termin-band{
  background:var(--r-tinte) !important;
  color:#DCE6FF !important;
  border-top:2px solid var(--r-blau) !important;
}
html.retro footer :is(p,span,div,li,small,b,strong),
html.retro .termin-band :is(p,span,div,li,b,strong,.lead,.sub,.dazu){color:#DCE6FF !important}
html.retro footer a,html.retro .termin-band a{color:var(--r-hell) !important}
html.retro footer a:hover{background:var(--r-blau);color:#fff !important}
html.retro .termin-band :is(h1,h2,h3){color:#fff !important;text-shadow:1px 1px 0 var(--r-blau) !important}
html.retro .termin-band .btn,html.retro .termin-band .cta,html.retro .termin-band a.btn{
  background:var(--r-hell) !important;color:var(--r-tinte) !important;
  border:2px solid var(--r-hell) !important;box-shadow:3px 3px 0 var(--r-blau) !important;
}
/* der Schalter in der dunklen Fusszeile */
html.retro footer .retro-knopf{
  background:var(--r-hell) !important;color:var(--r-tinte) !important;
  border:2px solid var(--r-hell) !important;box-shadow:2px 2px 0 var(--r-blau) !important;
  padding:6px 10px !important;text-decoration:none !important;
}
html.retro footer .retro-knopf .text{color:var(--r-tinte) !important}

/* Fusszeile: Links hell genug, Logo unverfaelscht */
html.retro footer .fuss a,
html.retro footer .fuss-credit a,
html.retro footer .fuss-bvmw a,
html.retro footer nav a{color:var(--r-hell) !important}
html.retro footer .fuss,
html.retro footer .fuss-credit,
html.retro footer .fuss-bvmw span{color:#DCE6FF !important}
html.retro footer img{filter:none !important;image-rendering:auto}

/* Ankreuzfelder sind keine Eingabefelder: die Regeln oben (Polster, Schatten und
   auf schmalen Bildschirmen Breite 100 Prozent) machen aus einem Haken sonst
   einen Kasten ueber die volle Zeile und schieben die Beschriftung aus dem Bild. */
html.retro input[type=checkbox],
html.retro input[type=radio]{
  width:17px !important;max-width:17px !important;height:17px !important;
  flex:none !important;padding:0 !important;box-shadow:none !important;
  box-sizing:border-box;
}

/* ---------- Abstand zum Rahmen ---------- */
/* Diese Kaesten haben im Original keinen seitlichen Innenabstand, weil sie dort
   ohne Rahmen auskommen. In der Retro-Schicht bekommen sie eine Linie ringsum,
   und ohne Abstand klebt der Text auf dieser Linie. */
html.retro .grund,
html.retro .c-sp,
html.retro .schritt,
html.retro .preisblock,
html.retro .termin,
html.retro .jetzt-satz,
html.retro .liste .e{
  padding-left:clamp(14px,1.4vw,20px) !important;
  padding-right:clamp(14px,1.4vw,20px) !important;
  padding-bottom:clamp(16px,1.6vw,22px) !important;
}

/* ---------- Grafiken in der Retro-Ansicht ----------
   Zwei Farben, Tinte und Papier. Der Rabe bleibt unveraendert (viewBox 1240),
   die Portraitfotos im Netz bleiben ebenfalls unangetastet. */
html.retro.retro-grafik svg[role="img"]{filter:url(#corvint-retro-zwei)}
html.retro svg[viewBox="0 0 1240 1240"]{filter:none !important}
/* Grafiken mit eingebetteten Fotos: nicht als Ganzes filtern,
   sondern nur die gezeichneten Teile, damit die Portraits normal bleiben. */
html.retro.retro-grafik svg[role="img"]:has(image){filter:none}
html.retro.retro-grafik svg[role="img"]:has(image) > g > :not(image):not([viewBox="0 0 1240 1240"]){
  filter:url(#corvint-retro-zwei);
}

/* Regelwerk-Szene: nur die Zeichnung wird zweifarbig.
   Die anklickbaren Punkte, die Sprechblase und der Rabe bleiben, wie sie sind,
   denn der Hinweistext spricht von blauen Punkten. */
html.retro.retro-grafik #szene{filter:none !important}
html.retro.retro-grafik #szene > g:not(.rw-spot):not(.rw-blase):not(.rw-rabe){filter:url(#corvint-retro-zwei)}

/* Netzwerk- und Backoffice-Skizze: der Zweiton-Filter kippt jeden mittleren
   Blauton auf die dunkle Seite. Die Verbindungslinien und die blauen Knoten
   verschwanden dadurch im dunklen Grund. Beide Bilder werden deshalb nicht
   gefiltert, sondern direkt in den Retro-Toenen gezeichnet:
   #0B1230 ist der Grund, den der Filter erzeugt, #DBE6FF sein Hell,
   #7FA3E8 liegt dazwischen und bleibt auf dem Grund noch gut lesbar. */
html.retro.retro-grafik .netzbild > svg,
html.retro.retro-grafik .werkzeugbild > svg{filter:none}

html.retro .netzbild > svg > rect,
html.retro .werkzeugbild > svg > rect{fill:#0B1230}

/* Netzwerk: Linien und Knoten */
html.retro .netzbild > svg > g[stroke]{stroke:#7FA3E8}
html.retro .netzbild > svg > circle[fill="#26241F"]{fill:#0B1230;stroke:#DBE6FF}
html.retro .netzbild > svg > circle[fill="#0C3EFF"]{fill:#7FA3E8}
html.retro .netzbild > svg > circle[fill="#A9C8FF"]{fill:#DBE6FF}
html.retro .netzbild > svg > circle[fill="#FAF9F5"]{fill:#DBE6FF;stroke:#7FA3E8}

/* Backoffice: Rechner, Bildschirm und die drei Funken */
html.retro .werkzeugbild > svg > path[fill="#15130F"]{fill:#131C40}
html.retro .werkzeugbild > svg > path[fill="#0C3EFF"]{fill:#7FA3E8}
html.retro .werkzeugbild > svg > g[stroke="#EDEBE6"]{stroke:#DBE6FF}
html.retro .werkzeugbild > svg > g[stroke="#A9C8FF"]{stroke:#7FA3E8}

/* ---------- Lesbarkeit ---------- */
/* Der Positionierungssatz auf der Startseite stand direkt auf dem Karopapier,
   die Linien liefen durch die Schrift. Er bekommt eine ruhige Flaeche und
   etwas mehr Groesse; als wichtigster Satz der Seite darf er auch auffallen. */
html.retro .ordnung{
  background:#fff !important;
  border:2px solid var(--r-tinte) !important;
  box-shadow:4px 4px 0 var(--r-blau-dunkel) !important;
  padding:clamp(16px,1.8vw,22px) !important;
  font-size:16px !important;
  line-height:1.75 !important;
  max-width:52ch !important;
}

/* Die Merkzettel auf blauer Flaeche: die allgemeine Regel fuer Text in .tor
   hat ihnen die dunkle Tinte gegeben, damit standen sie blau auf blau. */
html.retro .rolle,html.retro .eyebrow,
html.retro .tor .rolle,html.retro .tor .eyebrow{color:#fff !important}

/* Sprunglink: wird erst beim Tabben sichtbar und lag dann blau auf blau. */
html.retro .skip{
  background:var(--r-tinte) !important;color:#fff !important;
  border:2px solid #fff !important;
}

/* Die kleinen Merkmal-Kaesten in den dunklen Teamkarten: die Regel fuer dunkle
   Flaechen faerbt allen Text darin hell, auch den in diesen hellen Kaesten.
   Sie standen dadurch hell auf hell und waren leer. */
html.retro :is(.dunkel,.tun-dunkel,.abschluss,.rabe,.kk-dunkel,.art.dunkel,.tor-b,.c-dunkel) .fakten span,
html.retro .fakten span{
  background:var(--r-flaeche) !important;
  color:var(--r-tinte) !important;
  border:2px solid var(--r-tinte) !important;
}

/* Der Knopf im Abschluss von "Ueber corvint" ist im Original weiss auf Schwarz.
   In der Retro-Schicht bekam er die Linkfarbe der dunklen Flaeche und stand
   damit hellblau auf Weiss. Er wird jetzt wie die uebrigen Knoepfe behandelt. */
html.retro .abschluss .knopf,
html.retro .rabe .knopf,
html.retro .knopf{
  background:var(--r-hell) !important;
  color:var(--r-tinte) !important;
  border:2px solid var(--r-tinte) !important;
  box-shadow:3px 3px 0 var(--r-blau-dunkel) !important;
  text-transform:uppercase;letter-spacing:.08em;font-weight:700;
}
html.retro .abschluss .knopf:active,html.retro .knopf:active{transform:translate(3px,3px);box-shadow:none !important}