/* Neues Design für die übrigen öffentlichen Seiten (23.10.2026). Gilt nur mit body.ew-oeffentlich
   (Layout setzt die Klasse für den Controller Home). Hebt die vorhandenen Kopfbereiche (…-hero) in den
   dunklen Stil der Startseite, ohne Texte oder Aufbau zu ändern. Bausteine/Variablen aus neu.css. */
.ew-oeffentlich { --ew-tief:#0f1c24; --ew-hell:#8fb8d0; --ew-gruen:#3fb37a; }

/* ---- Kopfbereiche */
.ew-oeffentlich :is(.an-hero,.ax-hero,.bt-hero,.fa-hero,.fb-hero,.fs-hero,.lx-hero,.hbl-held,.dv-hero,.fx-hero,.se-hero,.vg-hero,.wu-hero,.zp-hero,.ew-kopf) {
  position:relative; overflow:hidden; color:#c9d6de; border-bottom:0 !important;
  background: radial-gradient(900px 420px at 80% 20%, rgba(75,111,133,.42), transparent 70%),
              radial-gradient(600px 360px at 8% 100%, rgba(63,179,122,.09), transparent 70%), var(--ew-tief) !important;
  padding-top:4.5rem !important; padding-bottom:4.25rem !important; }
.ew-oeffentlich :is(.an-hero,.ax-hero,.bt-hero,.fa-hero,.fb-hero,.fs-hero,.lx-hero,.hbl-held,.dv-hero,.fx-hero,.se-hero,.vg-hero,.wu-hero,.zp-hero,.ew-kopf)::before {
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.35;
  background-image:linear-gradient(rgba(143,184,208,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(143,184,208,.08) 1px, transparent 1px);
  background-size:44px 44px; -webkit-mask-image:radial-gradient(ellipse at 65% 35%, #000 25%, transparent 75%); mask-image:radial-gradient(ellipse at 65% 35%, #000 25%, transparent 75%); }
.ew-oeffentlich :is(.an-hero,.ax-hero,.bt-hero,.fa-hero,.fb-hero,.fs-hero,.lx-hero,.hbl-held,.dv-hero,.fx-hero,.se-hero,.vg-hero,.wu-hero,.zp-hero,.ew-kopf) > .container { position:relative; }
.ew-oeffentlich :is(.an-hero,.ax-hero,.bt-hero,.fa-hero,.fb-hero,.fs-hero,.lx-hero,.hbl-held,.dv-hero,.fx-hero,.se-hero,.vg-hero,.wu-hero,.zp-hero,.ew-kopf) h1 {
  color:#fff !important; font-weight:700 !important; letter-spacing:-.025em; line-height:1.1; font-size:clamp(2rem, 3.6vw, 3rem) !important; text-wrap:balance;
  animation:ew-rein .9s cubic-bezier(.2,.8,.2,1) .1s both; }
.ew-oeffentlich :is(.an-hero,.ax-hero,.bt-hero,.fa-hero,.fb-hero,.fs-hero,.lx-hero,.hbl-held,.dv-hero,.fx-hero,.se-hero,.vg-hero,.wu-hero,.zp-hero,.ew-kopf) h1 ~ * { animation:ew-rein .9s cubic-bezier(.2,.8,.2,1) .3s both; }
.ew-oeffentlich :is(.an-hero,.ax-hero,.bt-hero,.fa-hero,.fb-hero,.fs-hero,.lx-hero,.hbl-held,.dv-hero,.fx-hero,.se-hero,.vg-hero,.wu-hero,.zp-hero,.ew-kopf) :is(p, li, .text-muted, small, span:not([class*="badge"])) { color:#b9c9d3; }
.ew-oeffentlich :is(.an-hero,.ax-hero,.bt-hero,.fa-hero,.fb-hero,.fs-hero,.lx-hero,.hbl-held,.dv-hero,.fx-hero,.se-hero,.vg-hero,.wu-hero,.zp-hero,.ew-kopf) :is(b, strong, h2, h3) { color:#fff; }
.ew-oeffentlich :is(.an-hero,.ax-hero,.bt-hero,.fa-hero,.fb-hero,.fs-hero,.lx-hero,.hbl-held,.dv-hero,.fx-hero,.se-hero,.vg-hero,.wu-hero,.zp-hero,.ew-kopf) a:not(.btn) { color:#fff !important; text-decoration:underline; text-decoration-color:rgba(255,255,255,.35); text-underline-offset:.2em; }
.ew-oeffentlich :is(.an-hero,.ax-hero,.bt-hero,.fa-hero,.fb-hero,.fs-hero,.lx-hero,.hbl-held,.dv-hero,.fx-hero,.se-hero,.vg-hero,.wu-hero,.zp-hero,.ew-kopf) a:not(.btn):hover { text-decoration-color:#fff; }
.ew-oeffentlich :is(.an-hero,.ax-hero,.bt-hero,.fa-hero,.fb-hero,.fs-hero,.lx-hero,.hbl-held,.dv-hero,.fx-hero,.se-hero,.vg-hero,.wu-hero,.zp-hero,.ew-kopf) .btn-primary {
  background:#fff !important; color:var(--ew-tief) !important; border-color:#fff !important; box-shadow:0 8px 24px -10px rgba(143,184,208,.6); }
.ew-oeffentlich :is(.an-hero,.ax-hero,.bt-hero,.fa-hero,.fb-hero,.fs-hero,.lx-hero,.hbl-held,.dv-hero,.fx-hero,.se-hero,.vg-hero,.wu-hero,.zp-hero,.ew-kopf) :is(.btn-outline-secondary,.btn-outline-primary,.btn-light) {
  background:transparent !important; color:#e6eef3 !important; border-color:rgba(230,238,243,.3) !important; }
/* Kästen, Tabellen, Code und Formulare im Kopf bleiben helle Karten auf dunklem Grund */
.ew-oeffentlich :is(.an-hero,.ax-hero,.bt-hero,.fa-hero,.fb-hero,.fs-hero,.lx-hero,.hbl-held,.dv-hero,.fx-hero,.se-hero,.vg-hero,.wu-hero,.zp-hero,.ew-kopf) :is(table, pre, .card, form, input, select, textarea, [class$="-scroll"], [class$="-felder"], [class$="-box"], [class$="-karte"]) { color:var(--cj-text); }
.ew-oeffentlich :is(.an-hero,.ax-hero,.bt-hero,.fa-hero,.fb-hero,.fs-hero,.lx-hero,.hbl-held,.dv-hero,.fx-hero,.se-hero,.vg-hero,.wu-hero,.zp-hero,.ew-kopf) :is(table, pre, .card, [class$="-scroll"], [class$="-felder"], [class$="-box"], [class$="-karte"]) :is(p, li, span, td, th, b, strong, small, a:not(.btn)) { color:inherit; text-decoration-color:currentColor; }
.ew-oeffentlich :is(.an-hero,.ax-hero,.bt-hero,.fa-hero,.fb-hero,.fs-hero,.lx-hero,.hbl-held,.dv-hero,.fx-hero,.se-hero,.vg-hero,.wu-hero,.zp-hero,.ew-kopf) code { background:rgba(143,184,208,.14); color:#e6eef3; border-radius:4px; padding:.05rem .35rem; }

/* ---- Inhalt: kräftigere Überschriften, mehr Luft, lebendige Knöpfe */
.ew-oeffentlich main h2 { font-weight:700; letter-spacing:-.02em; text-wrap:balance; }
.ew-oeffentlich main h3 { letter-spacing:-.01em; }
.ew-oeffentlich main p { text-wrap:pretty; }
.ew-oeffentlich main .btn { transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease; }
.ew-oeffentlich main .btn:hover { transform:translateY(-1px); }
.ew-oeffentlich main .btn:active { transform:translateY(1px) scale(.99); }
.ew-oeffentlich main .btn-primary:not(:disabled) { box-shadow:0 10px 24px -14px rgba(51,80,95,.8); }

/* ---- Einblenden beim Scrollen (Klasse setzt das Layout-Skript, ohne Skript bleibt alles sichtbar) */
html.ew-js .ew-oeffentlich .ew-auf { opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
html.ew-js .ew-oeffentlich .ew-auf.da { opacity:1; transform:none; }
@keyframes ew-rein { from { opacity:0; transform:translateY(22px); filter:blur(4px); } to { opacity:1; transform:none; filter:none; } }
@media (prefers-reduced-motion: reduce) {
  .ew-oeffentlich [class] { animation:none !important; }
  .ew-oeffentlich .ew-auf { opacity:1 !important; transform:none !important; transition:none !important; }
}

/* Helle Kästen im Kopf, die nicht auf -box/-karte enden (23.10.2026) */
.ew-oeffentlich .fx-hero .fx-neu, .ew-oeffentlich .fx-hero .fx-neu * { color:var(--cj-text) !important; }
.ew-oeffentlich .fx-hero .fx-neu .fx-neu-text { color:var(--cj-text-2) !important; }
.ew-oeffentlich .fx-hero .fx-neu .fx-neu-marke { color:#fff !important; }
.ew-oeffentlich .fx-hero .fx-neu .fx-neu-los { color:var(--cj-akzent) !important; }
.ew-oeffentlich .fx-hero .fx-fact strong { color:#fff; }

/* Code im Inhalt ruhig statt Bootstrap-Pink */
.ew-oeffentlich main code { color:var(--cj-text); background:var(--cj-flaeche-2); border:1px solid var(--cj-rand-2); border-radius:4px; padding:.05rem .35rem; font-size:.86em; }
.ew-oeffentlich main pre code { border:0; background:none; padding:0; }

/* Seiten ohne eigenen Kopfbereich (FAQ, Preise, Generator, KI verbinden, Glossar, Unternehmen, 23.10.2026):
   der Kopf liegt im Inhaltscontainer und wird hier auf volle Breite gezogen. */
.ew-oeffentlich main { overflow-x:clip; }
.ew-oeffentlich .ew-voll { margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important;
  padding-left:max(15px, calc(50vw - 50%)) !important; padding-right:max(15px, calc(50vw - 50%)) !important; margin-bottom:2.5rem !important; }
.ew-oeffentlich main > .container > .ew-voll:first-child, .ew-oeffentlich main > .container > .ew-kopf.ew-voll:first-child { margin-top:-60px !important; }
.ew-oeffentlich .pricing.py-5 { padding-top:0 !important; }
.ew-oeffentlich .ew-kopf .pr-test { background:rgba(143,184,208,.12) !important; border-color:rgba(143,184,208,.3) !important; color:#cfdce4 !important; }
.ew-oeffentlich .ew-kopf .pr-test b, .ew-oeffentlich .ew-kopf .pr-test .fa { color:#fff !important; }
.ew-oeffentlich .ew-kopf :is(.mcp-marke,.un-marke) { background:rgba(143,184,208,.16) !important; color:var(--ew-hell) !important; border-color:transparent !important; }
.ew-oeffentlich .wu-hero.ew-voll { margin-bottom:2.5rem !important; }
.ew-oeffentlich .ew-kopf .sw6-marke { color:var(--ew-hell) !important; }
.ew-oeffentlich :is(.an-hero,.ax-hero,.bt-hero,.fa-hero,.fb-hero,.fs-hero,.lx-hero,.hbl-held,.dv-hero,.fx-hero,.se-hero,.vg-hero,.wu-hero,.zp-hero,.ew-kopf) .text-muted { color:#b9c9d3 !important; }

/* Polish 23.10.2026: Sprungmarken (Pillen) im dunklen Kopf, "Neu"-Etikett in der Hausfarbe statt Bootstrap-Türkis */
.ew-oeffentlich [class$="-sprung"] a { background:rgba(143,184,208,.14) !important; color:#e6eef3 !important; border:1px solid rgba(143,184,208,.3); text-decoration:none !important; }
.ew-oeffentlich [class$="-sprung"] a:hover { background:rgba(143,184,208,.28) !important; color:#fff !important; }
.ew-oeffentlich main .badge.badge-info { background:var(--cj-akzent-hell) !important; color:var(--cj-akzent-stark) !important; font-weight:600; }
.ew-oeffentlich :is(.an-hero,.ax-hero,.bt-hero,.fa-hero,.fb-hero,.fs-hero,.lx-hero,.hbl-held,.dv-hero,.fx-hero,.se-hero,.vg-hero,.wu-hero,.zp-hero,.ew-kopf) .badge.badge-info { background:rgba(143,184,208,.2) !important; color:#e6eef3 !important; }
.ew-oeffentlich main .badge.badge-success { background:var(--cj-akzent-hell) !important; color:var(--cj-akzent-stark) !important; font-weight:600; }
/* Codeblöcke und Link-Knöpfe kannten den dunklen Modus nicht (Bootstrap #212529 bzw. MDB schwarz) */
:where(.ew-oeffentlich main) pre { color:var(--cj-text); }   /* :where = schwach, damit Seitenregeln wie .an-code gewinnen */
:where(.ew-oeffentlich main) pre code { color:inherit; background:none; border:0; padding:0; font-size:inherit; }
.ew-oeffentlich main .btn-link { color:var(--cj-akzent-stark) !important; }   /* MDB setzt #000 !important */
.ew-oeffentlich main .btn-link:hover, .ew-oeffentlich main .btn-link:focus { color:var(--cj-akzent) !important; }

/* Runde 2 (Design-Kritik 23.10.2026) */
/* kein weißer Streifen zwischen dunkler Abschlussbox und Fußzeile */
.ew-oeffentlich:has(main .ew-ende:last-child) .cj-fuss { margin-top:0 !important; }
/* Knopfpaar der Startseite auch in den Köpfen der Unterseiten (die Kopfregel färbt sonst jeden Link weiß) */
.ew-oeffentlich :is(.an-hero,.ax-hero,.bt-hero,.fa-hero,.fb-hero,.fs-hero,.lx-hero,.hbl-held,.dv-hero,.fx-hero,.se-hero,.vg-hero,.wu-hero,.zp-hero,.ew-kopf) a.ew-knopf.voll { color:#0f1c24 !important; text-decoration:none !important; }
.ew-oeffentlich :is(.an-hero,.ax-hero,.bt-hero,.fa-hero,.fb-hero,.fs-hero,.lx-hero,.hbl-held,.dv-hero,.fx-hero,.se-hero,.vg-hero,.wu-hero,.zp-hero,.ew-kopf) a.ew-knopf.leise { color:#e6eef3 !important; text-decoration:none !important; }
/* Einleitung unter der h1 überall gleich: 1,15rem, 400 (auf Dunkel liest sich 300 zu dünn) */
.ew-oeffentlich :is(.an-hero,.ax-hero,.bt-hero,.fa-hero,.fb-hero,.fs-hero,.lx-hero,.hbl-held,.dv-hero,.fx-hero,.se-hero,.vg-hero,.wu-hero,.zp-hero,.ew-kopf) :is(h1 + p, h1 + .lead, .fx-lead, .pr-lead) { font-size:1.15rem !important; font-weight:400 !important; line-height:1.6; }
/* Abschlusskasten der Anleitungen im Stil der dunklen Abschlussbox (.ew-ende) */
.ew-oeffentlich .an-cta { background:radial-gradient(500px 220px at 30% 0%, rgba(75,111,133,.5), transparent 70%), #0f1c24 !important; border:0 !important; border-radius:10px; padding:2rem 1.8rem !important; color:#e6eef3; }
.ew-oeffentlich .an-cta h2 { color:#fff !important; }
.ew-oeffentlich .an-cta .text-muted { color:#b9c9d3 !important; }
.ew-oeffentlich .an-cta .btn-primary { background:#fff !important; color:#0f1c24 !important; border:1px solid #fff !important; box-shadow:none !important; }
.ew-oeffentlich .an-cta .btn-outline-secondary { background:transparent !important; color:#e6eef3 !important; border:1px solid rgba(230,238,243,.3) !important; box-shadow:none !important; }
.ew-oeffentlich .an-cta .btn-outline-secondary:hover { background:rgba(230,238,243,.08) !important; }