/* Leuchtwand (25.10.2026): dunkler Look der Startseite in der Türkis-Welt des Logos.
   Liegt NACH style.css/runde2.css/runde3.css und überschreibt nur Optik; Markup, Kennungen und
   Skripte (app.js, runde3.js) bleiben unverändert. Schriften: leuchtwand-fonts.css (selbst gehostet). */

:root {
  --lw-grund: #04090A;
  --lw-grund-2: #091315;
  --lw-grund-3: #0F1D20;
  --lw-linie: rgba(138, 239, 230, 0.13);
  --lw-linie-stark: rgba(138, 239, 230, 0.28);
  --lw-tuerkis: #36D6CE;
  --lw-mint: #8AEFE6;
  --lw-petrol: #1F8E9E;
  --lw-eis: #DDF8F4;
  --lw-text: #E6F2F0;
  --lw-text-2: #B9CBC8;
  --lw-leise: #94ABA8;
  --lw-display: "Funnel Display", system-ui, sans-serif;
  --lw-sans: "Funnel Sans", system-ui, sans-serif;
  /* bestehende Variablen auf die dunkle Welt umlegen */
  --navy-0: #04090A; --navy-1: #091315; --navy-2: #0F1D20; --strand: #1C3236; --strand-lit: #4E7E7C;
  --ochre: #8AEFE6; --ochre-deep: #36D6CE; --petrol: #36D6CE; --petrol-light: #8AEFE6;
  --paper: #04090A; --paper-2: #091315; --ink: #E6F2F0; --ink-2: #B9CBC8;
  --mist: #B9CBC8; --mist-2: #94ABA8;
  --sans: "Funnel Sans", system-ui, sans-serif;
  color-scheme: dark;
}

html, body { background: var(--lw-grund) !important; }
body { color: var(--lw-text); font-family: var(--lw-sans); -webkit-font-smoothing: antialiased; }
::selection { background: var(--lw-tuerkis); color: var(--lw-grund); }
:focus-visible { outline: 2px solid var(--lw-mint); outline-offset: 3px; }

/* ── Abschnitte: alle dunkel, getrennt durch eine Haarlinie ─────────────────── */
main > section, main > .paper, section.paper, .paper { background: transparent !important; color: var(--lw-text); }
main > section + section { border-top: 1px solid var(--lw-linie); }
.sec-h h2, section h2 { font-family: var(--lw-display) !important; font-weight: 600; letter-spacing: -0.035em; color: var(--lw-text) !important; }
section h3, section h4 { font-family: var(--lw-display); color: var(--lw-text); }
section p, section li, section dd, section td, section th, section label, section summary { color: var(--lw-text-2); }
section b, section strong, section dt { color: var(--lw-text); }
.intro, .sec-h p, .sec-h .s { color: var(--lw-text-2) !important; }
a.link, section a.link { color: var(--lw-mint); text-decoration-color: rgba(138, 239, 230, 0.35); }

/* ── Kopfzeile ───────────────────────────────────────────────────────────── */
.site-nav { background: rgba(4, 9, 10, 0.82) !important; border-bottom: 1px solid var(--lw-linie) !important; backdrop-filter: blur(10px); }
.site-nav .brand span { font-family: var(--lw-display); font-weight: 600; color: var(--lw-text); }
.site-nav nav a { color: var(--lw-leise) !important; }
.site-nav nav a:hover, .site-nav nav a[aria-current] { color: var(--lw-text) !important; }
.sprache a { color: var(--lw-leise) !important; }
.sprache a[aria-current] { background: var(--lw-grund-3) !important; color: var(--lw-text) !important; }

/* Knöpfe */
.btn-primary, .nav-cta, .r2-btn-hell, .btn { background: var(--lw-tuerkis) !important; color: #032321 !important; border-color: transparent !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 8px 28px -6px rgba(54, 214, 206, 0.55); font-family: var(--lw-sans); font-weight: 600; }
.btn-primary:hover, .nav-cta:hover, .r2-btn-hell:hover, .btn:hover { background: var(--lw-mint) !important; }
.r2-btn-hell small, .btn small { color: #0A3B38 !important; }

/* ── Leuchtwand (erster Bildschirm) ─────────────────────────────────────────── */
.lw-hero { position: relative; overflow: hidden; min-height: 790px; padding: 0 !important; background: var(--lw-grund) !important; }
.lw-boden { position: absolute; left: 30%; top: 40px; width: 1500px; perspective: 2200px; z-index: 1; }
.lw-wand { display: grid; grid-template-columns: repeat(3, 480px); gap: 26px; transform: rotateX(48deg) rotateZ(-24deg); transform-origin: 30% 30%; }
.lw-kachel { border-radius: 12px; overflow: hidden; border: 1px solid var(--lw-linie-stark); background: var(--lw-grund-2);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.9), 0 0 60px -12px rgba(54, 214, 206, 0.35); }
.lw-kachel img { display: block; width: 100%; height: 300px; object-fit: cover; object-position: top left; }
.lw-kachel.lw-dim img { filter: saturate(0.7) brightness(0.78); }
.lw-licht { position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(105deg, transparent 42%, rgba(138, 239, 230, 0.22) 50%, transparent 58%); }
.lw-schleier { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, var(--lw-grund) 30%, rgba(4, 9, 10, 0.86) 44%, rgba(4, 9, 10, 0.1) 66%, transparent),
              linear-gradient(0deg, var(--lw-grund) 0%, transparent 26%), linear-gradient(180deg, var(--lw-grund) 0%, transparent 14%); }
.lw-text { position: relative; z-index: 3; padding-top: 150px !important; padding-bottom: 96px; }
.lw-text > * { max-width: 640px; }
.lw-hero h1 { font-family: var(--lw-display); font-weight: 600; font-size: clamp(44px, 5.2vw, 74px); line-height: 0.98; letter-spacing: -0.04em; color: var(--lw-text); margin: 0; text-wrap: balance; }
.lw-hero h1 em { font-style: normal; color: var(--lw-mint); }
.lw-lede { margin: 26px 0 0; font-size: 19px; line-height: 1.55; color: var(--lw-text-2); max-width: 560px; }
.lw-lede2 { margin: 14px 0 0; font-size: 16.5px; line-height: 1.55; color: var(--lw-leise); max-width: 560px; }
.lw-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.lw-btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 26px; border-radius: 12px; font-weight: 600; font-size: 16px; text-decoration: none; transition: transform .2s cubic-bezier(.2,.8,.2,1), background .2s; }
.lw-btn small { font-weight: 500; font-size: 13px; opacity: .72; }
.lw-btn-voll { background: var(--lw-tuerkis); color: #032321; box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 8px 28px -6px rgba(54,214,206,.55); }
.lw-btn-voll:hover { background: var(--lw-mint); transform: translateY(-1px); }
.lw-btn-rand { border: 1px solid var(--lw-linie-stark); color: var(--lw-text); }
.lw-btn-rand:hover { background: rgba(138, 239, 230, 0.06); }
.lw-vertrauen { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 9px; font-size: 14px; color: var(--lw-leise); }
.lw-vertrauen li { display: flex; align-items: center; gap: 8px; }
.lw-vertrauen svg { width: 16px; height: 16px; color: var(--lw-tuerkis); flex: none; }
.lw-synth { position: absolute; right: 32px; bottom: 18px; z-index: 4; font-size: 11px; color: var(--lw-leise); }

/* Regelwerke-Leiste */
.lw-regs { border-top: 1px solid var(--lw-linie); border-bottom: 1px solid var(--lw-linie); background: var(--lw-grund) !important; }
.lw-regs-in { display: flex; align-items: center; gap: 36px; padding-top: 26px !important; padding-bottom: 26px !important; }
.lw-regs-label { font-size: 14px; color: var(--lw-leise) !important; max-width: 230px; line-height: 1.4; flex: none; margin: 0; }
.lw-regs-row { list-style: none; margin: 0; padding: 0; display: flex; flex: 1; justify-content: space-between; gap: 20px; }
.lw-regs-row li { display: flex; flex-direction: column; color: inherit; }
.lw-regs-row b { font-family: var(--lw-display); font-weight: 600; font-size: 20px; letter-spacing: -0.01em; color: var(--lw-text); }
.lw-regs-row span { font-size: 13px; color: var(--lw-leise); font-variant-numeric: tabular-nums; }

/* Skyline über dem Fuß */
.lw-skyline { height: 250px; margin-top: 40px; background: center bottom / 2000px 250px no-repeat; mix-blend-mode: screen; opacity: .9;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); }
footer.site { background: var(--lw-grund) !important; border-top: 0 !important; color: var(--lw-leise); }
footer.site a { color: var(--lw-leise) !important; }

/* ── Schmale Bildschirme ─────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .lw-regs-in { flex-direction: column; align-items: flex-start; gap: 16px; }
  .lw-regs-row { flex-wrap: wrap; gap: 14px 22px; }
}
@media (max-width: 700px) {
  .lw-hero { min-height: 0; padding-bottom: 330px !important; }
  .lw-text { padding-top: 110px !important; padding-bottom: 0; }
  .lw-boden { left: -10%; top: auto; bottom: -40px; transform: scale(.55); transform-origin: 0 100%; }
  .lw-schleier { background: linear-gradient(180deg, var(--lw-grund) 55%, rgba(4,9,10,.3) 78%, var(--lw-grund)) !important; }
  .lw-lede { font-size: 17px; }
  .lw-synth { right: 16px; }
}

/* ── Text: die alte Seite setzt Navy/Grau fest; auf dem dunklen Grund alles hell ── */
main section :is(h3, h4, b, strong, dt, th, summary, label, legend) { color: var(--lw-text) !important; }
main section :is(p, li, dd, td, span, small, i, em, figcaption, div) { color: var(--lw-text-2); }
main section :is(p, li, dd, td) { color: var(--lw-text-2) !important; }

/* ── Flächen: weiße Karten und Kästen werden dunkle Paneele ─────────────────── */
.t-person, .area-panels, .r6-kosten, .tier, .r4-info, .r4-kal, form.ask, .frame, .app-sb, .r2-regel, .incl-side, .demo-form-col .ask {
  background: linear-gradient(180deg, rgba(15, 29, 32, 0.72), rgba(9, 19, 21, 0.72)) !important;
  border: 1px solid var(--lw-linie) !important; box-shadow: none !important; color: var(--lw-text-2);
}
.frame { box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.9), 0 0 100px -30px rgba(54, 214, 206, 0.35) !important; border-color: var(--lw-linie-stark) !important; }
.frame-bar { background: #0C1719 !important; border-bottom: 1px solid var(--lw-linie) !important; color: var(--lw-leise) !important; }
.frame video { background: #F5F4F0 !important; }
.tag, span.tag, .r7-spur, .fx-balken.zu, td.us, th.us { background: rgba(138, 239, 230, 0.08) !important; color: var(--lw-text) !important; border-color: var(--lw-linie) !important; }
td.us, th.us { background: rgba(54, 214, 206, 0.10) !important; }
.t-zert { background: rgba(54, 214, 206, 0.14) !important; color: var(--lw-mint) !important; }

/* Reiter der Bereiche */
.area-tab { background: rgba(9, 19, 21, 0.6) !important; border: 1px solid var(--lw-linie) !important; color: var(--lw-text-2) !important; }
.area-tab[aria-selected="true"], .area-tab.on, .area-tab[aria-pressed="true"] { background: var(--lw-eis) !important; color: var(--lw-grund) !important; border-color: var(--lw-eis) !important; }
.area-tab[aria-selected="true"] *, .area-tab.on * { color: var(--lw-grund) !important; }

/* Formulare */
input, textarea, select { background: rgba(4, 9, 10, 0.7) !important; border: 1px solid var(--lw-linie-stark) !important; color: var(--lw-text) !important; caret-color: var(--lw-mint); }
input::placeholder, textarea::placeholder { color: #6F8784 !important; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--lw-tuerkis) !important; box-shadow: 0 0 0 4px rgba(54, 214, 206, 0.16) !important; }
input[type="checkbox"] { accent-color: var(--lw-tuerkis); }

/* Textfarben im ganzen Inhalt (auch Blöcke ohne eigenen Abschnitt), Kopfbereich ausgenommen */
main > :not(.lw-hero) :is(h3, h4, b, strong, dt, th, summary, label, legend, .r7-name) { color: var(--lw-text) !important; }
main > :not(.lw-hero) :is(p, li, dd, td, s, .t-lead) { color: var(--lw-text-2) !important; }
main > :not(.lw-hero) :is(span, small, .gh, .t-ort) { color: var(--lw-leise) !important; }
main > :not(.lw-hero) a:not([class*="btn"]):not(.lw-btn):not(.area-tab) { color: var(--lw-mint) !important; }
/* Akzente wieder einsetzen */
main > :not(.lw-hero) :is(.t-zert, .t-zert *) { color: var(--lw-mint) !important; }
main > :not(.lw-hero) :is(.btn, .btn-primary, .r2-btn-hell, .btn *, .btn-primary *, .r2-btn-hell *) { color: #032321 !important; }
main > :not(.lw-hero) .area-tab[aria-selected="true"] :is(span, b, small) { color: var(--lw-grund) !important; }
/* Größenwahl der Kostenrechnung */
.r6-kosten button, #vergleich button:not(.btn) { background: rgba(9, 19, 21, 0.8) !important; border: 1px solid var(--lw-linie-stark) !important; color: var(--lw-text-2) !important; }
.r6-kosten button[aria-pressed="true"], #vergleich button[aria-pressed="true"], #vergleich button[aria-selected="true"] { background: var(--lw-grund-3) !important; color: var(--lw-text) !important; box-shadow: inset 0 0 0 1px var(--lw-tuerkis) !important; }

/* ── Altes Navy aus Symbolen und Flächen nehmen ───────────────────────────── */
main > section:not(.lw-hero) { color: var(--lw-mint) !important; }
.k10.dunkel { --bg: linear-gradient(135deg, #071416, #0E2C2E) !important; --sub: #9FBDB9; --line: rgba(138,239,230,.18); --acc: #36D6CE; --ring: rgba(138,239,230,.3); --dot: #0F2A2C; --ziel: #36D6CE; --zieltxt: #04090A; border: 1px solid var(--lw-linie); }
.k10.dunkel .k10-lauf path { stroke: rgba(54, 214, 206, .5) !important; }
.r5-sicher-ic, #cyber li > i { background: rgba(54, 214, 206, .12) !important; color: var(--lw-mint) !important; }
.area-lead svg, .rowh svg, .r4-kal-platz svg, .demo-done svg, #demo li svg { color: var(--lw-mint) !important; stroke: var(--lw-mint) !important; }
#rundgang .it.live { background: rgba(54, 214, 206, .14) !important; color: var(--lw-mint) !important; }
#rundgang .it, #rundgang .it svg, #rundgang .r2-rollen i { color: var(--lw-text-2) !important; fill: currentColor; }
#rundgang .r2-rollen i { background: rgba(9,19,21,.8) !important; border: 1px solid var(--lw-linie-stark) !important; }
#rundgang li.in { border-color: var(--lw-linie-stark) !important; }
td.us i.d.f, .legend i.d.f, i.d.f { background: var(--lw-tuerkis) !important; border-color: var(--lw-tuerkis) !important; }
i.d { border-color: #5E7A77 !important; }
.r7-b-iw { background: var(--lw-tuerkis) !important; box-shadow: 0 0 24px rgba(54,214,206,.5); }
.r7-b-sp { background: repeating-linear-gradient(135deg, #2A3D40 0 8px, #22343A 8px 16px) !important; }
.r6-k-summe { border-color: var(--lw-linie-stark) !important; }
.deal { background: linear-gradient(135deg, #0B3F46, #0F7C86) !important; border-color: transparent !important; }
.tier-badge { background: rgba(54, 214, 206, .16) !important; color: var(--lw-mint) !important; }
.incl-mods li::before, .incl-mods svg { color: var(--lw-tuerkis) !important; }
.fx-balken i:nth-child(1), .fx-legende li:nth-child(1) i { background: #36D6CE !important; }
.fx-balken i:nth-child(2), .fx-legende li:nth-child(2) i { background: #2BB3AE !important; }
.fx-balken i:nth-child(3), .fx-legende li:nth-child(3) i { background: #22918F !important; }
.fx-balken i:nth-child(4), .fx-legende li:nth-child(4) i { background: #1A7372 !important; }
.fx-balken i:nth-child(5), .fx-legende li:nth-child(5) i { background: #8AEFE6 !important; }
.fx-balken i:nth-child(6), .fx-legende li:nth-child(6) i { background: #5FC9C0 !important; }
.fx-balken i:nth-child(7), .fx-legende li:nth-child(7) i { background: #3E9F98 !important; }
.fx-balken i:nth-child(8), .fx-legende li:nth-child(8) i { background: #B9F5EF !important; }
.lw-regs-label { flex: 0 0 230px !important; max-width: 230px !important; }
.lw-hero h1 { max-width: 760px; }

/* ── Vom Cyber-Fund zur Maßnahme: Schritte links, ein App-Fenster rechts ─────── */
.lw-fall { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 72px; align-items: start; margin-bottom: 72px; }
.lw-fall .sec-h { font-size: clamp(36px, 4vw, 54px) !important; line-height: 1 !important; margin: 0 !important; }
.lw-fall .sec-h em { font-style: normal; color: var(--lw-mint) !important; }
.lw-fall .intro { margin-top: 20px !important; max-width: none !important; }
.lw-schritte { list-style: none; padding: 0; margin: 40px 0 0; position: relative; }
.lw-schritte::before { content: ""; position: absolute; left: 19px; top: 20px; bottom: 20px; width: 2px; background: linear-gradient(var(--lw-petrol), var(--lw-tuerkis), var(--lw-mint)); box-shadow: 0 0 12px rgba(54, 214, 206, .5); }
.lw-schritte li { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 18px; padding: 12px 0; }
.lw-nr { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--lw-grund); border: 2px solid var(--lw-mint);
  font-family: var(--lw-display); font-weight: 600; color: var(--lw-mint) !important; box-shadow: 0 0 0 6px var(--lw-grund); position: relative; z-index: 1; }
.lw-schritte li:first-child .lw-nr { background: var(--lw-mint); color: var(--lw-grund) !important; }
.lw-schritte h3 { font-family: var(--lw-display); font-weight: 600; font-size: 19px; letter-spacing: -0.01em; padding-top: 8px; margin: 0; }
.lw-schritte p { font-size: 14.5px; margin: 4px 0 0; }
main > :not(.lw-hero) p.lw-quellen { margin-top: 6px; font-size: 12.5px; color: var(--lw-mint) !important; }

.lw-buehne { position: relative; border-radius: 16px; border: 1px solid var(--lw-linie-stark); background: linear-gradient(180deg, #0A1517, #071012); padding: 22px;
  box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .9), 0 0 120px -30px rgba(54, 214, 206, .35); }
.lw-buehne-leiste { display: flex; align-items: center; gap: 7px; margin: -6px 0 16px; font-size: 12px; }
.lw-buehne-leiste i { width: 9px; height: 9px; border-radius: 50%; background: #23383B; }
.lw-buehne-leiste span { margin-left: 10px; }
.lw-stufe { position: relative; padding-left: 34px; }
.lw-stufe + .lw-stufe { margin-top: 18px; }
.lw-stufe::before { content: attr(data-nr); position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: rgba(54, 214, 206, .16); color: var(--lw-mint);
  font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.lw-bild { border-radius: 10px; overflow: hidden; border: 1px solid var(--lw-linie); }
.lw-bild img { display: block; width: 100%; height: auto; }
.lw-zeile { display: grid; grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr); align-items: center; gap: 10px; }
.lw-k { border-radius: 10px; border: 1px solid var(--lw-linie); background: rgba(15, 29, 32, .8); padding: 12px 14px; }
.lw-k small { display: block; font-size: 11.5px; }
main > :not(.lw-hero) .lw-k strong { display: block; font-family: var(--lw-display); font-weight: 600; font-size: 16px; margin-top: 2px; }
main > :not(.lw-hero) .lw-tag { display: inline-block; margin-top: 8px; font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: rgba(54, 214, 206, .14); color: var(--lw-mint) !important; }
main > :not(.lw-hero) .lw-pfeil { color: var(--lw-tuerkis) !important; text-align: center; font-size: 18px; }

.lw-gebirge { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--lw-linie); background: #070F11; aspect-ratio: 1200 / 920; }
.lw-gebirge img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Brutto 3 s stehen, 0,6 s hinüber, Netto 3 s stehen, 0,6 s zurück; beide Abläufe genau gegenläufig */
.lw-g-b, .lw-g-sb { animation: lw-brutto 7.2s ease-in-out infinite; }
.lw-g-n, .lw-g-sn { animation: lw-netto 7.2s ease-in-out infinite; }
@keyframes lw-brutto { 0%, 42% { opacity: 1 } 50%, 92% { opacity: 0 } 100% { opacity: 1 } }
@keyframes lw-netto { 0%, 42% { opacity: 0 } 50%, 92% { opacity: 1 } 100% { opacity: 0 } }
.lw-g-sb, .lw-g-sn { animation-timing-function: step-end; }
@media (prefers-reduced-motion: reduce) {
  .lw-g-n, .lw-g-sn, .lw-g-b, .lw-g-sb { animation: none; }
  .lw-g-b, .lw-g-sb { opacity: 0; }
}
.lw-g-schild { position: absolute; left: 14px; top: 12px; display: grid; font-size: 12.5px; font-weight: 600; background: rgba(4, 9, 10, .78); border: 1px solid var(--lw-linie-stark); padding: 5px 10px; border-radius: 8px; }
main > :not(.lw-hero) .lw-g-schild span { color: var(--lw-mint) !important; grid-area: 1 / 1; }
.lw-g-zahl { position: absolute; left: 14px; bottom: 14px; display: grid; justify-items: start; background: rgba(4, 9, 10, .78); border: 1px solid var(--lw-linie-stark); padding: 6px 12px; border-radius: 8px; }
.lw-g-zahl b { grid-area: 1 / 1; font-size: 11.5px; font-weight: 500; color: var(--lw-leise) !important; }
main > :not(.lw-hero) .lw-g-zahl span { grid-area: 2 / 1; font-family: var(--lw-display); font-weight: 600; font-size: 26px; color: var(--lw-text) !important; }
.lw-fazit { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0 0; font-size: 13.5px; }
main > :not(.lw-hero) .lw-pill { font-weight: 700; font-size: 12.5px; padding: 3px 9px; border-radius: 6px; }
main > :not(.lw-hero) .lw-p-hoch { background: #FF9C00; color: #3A2400 !important; }
main > :not(.lw-hero) .lw-p-mittel { background: #FFE000; color: #4A4100 !important; }
.lw-fall-quelle { margin-top: 14px !important; text-align: right; font-size: 12px; }

@media (max-width: 1000px) {
  .lw-fall { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 560px) {
  .lw-buehne { padding: 14px; }
  .lw-stufe { padding-left: 0; } .lw-stufe::before { display: none; }
  .lw-zeile { grid-template-columns: 1fr; } .lw-pfeil { transform: rotate(90deg); }
  .lw-g-zahl span { font-size: 20px !important; }
}

/* Handy: klebende Tabellenköpfe und Stationsleiste des Rundgangs bringen eigene helle Flächen mit */
#vergleich th, #vergleich td:first-child, .cmp th, .r6-k-tab th, .r6-k-tab td:first-child { background: #0A1517 !important; }
main > :not(.lw-hero) #vergleich span.rowh { color: var(--lw-text-2) !important; }
#rundgang button:not(.clip-voll):not(.clip-toggle) { background: rgba(9, 19, 21, .85) !important; border-color: var(--lw-linie-stark) !important; color: var(--lw-text-2) !important; }
#rundgang button[aria-selected="true"] { background: rgba(54, 214, 206, .16) !important; color: var(--lw-mint) !important; }
@media (max-width: 700px) {
  .lw-text { padding-bottom: 36px; }
  .lw-hero { padding-bottom: 300px !important; }
  .lw-boden { bottom: -150px; }
  .lw-g-zahl { padding: 4px 9px; } .lw-g-zahl b { font-size: 10.5px; }
}

/* Regelwerke-Leiste (Fix 25.10.): Beschriftung über der Leiste, Namen brechen nie um.
   Neben der Beschriftung blieben 926 px für rund 950 px Namen; der Browser brach „NIS-2“ und „EBA-Leitlinien“ mitten im Wort. */
.lw-regs-in { display: block !important; }
.lw-regs-label { max-width: none !important; flex: none !important; margin: 0 0 12px !important; font-size: 13px !important; }
.lw-regs-row { flex-wrap: wrap; justify-content: space-between; gap: 14px 28px !important; }
.lw-regs-row li { flex: 0 0 auto !important; }
.lw-regs-row b, .lw-regs-row span { white-space: nowrap; }
@media (max-width: 1000px) { .lw-regs-row { justify-content: flex-start; gap: 14px 30px !important; } }

/* ── Vergleich im Markt: ein Kreissymbol je Zelle statt drei Punkte (wie im Mockup) ──
   app.js schreibt je Zelle drei <i class="d">, gefüllte tragen .f. Gezeichnet wird aus deren Anzahl:
   3 = voll, 2 = drei Viertel, 1 = halb, 0 = leerer Ring. Gilt auch für die Legende. */
#vergleich td:has(> i.d), .legend span:has(> i.d) { position: relative; }
#vergleich td > i.d, .legend span > i.d { display: none !important; }
#vergleich td:has(> i.d)::before, .legend span:has(> i.d)::before {
  content: ""; display: inline-block; width: 22px; height: 22px; border-radius: 50%; vertical-align: middle;
  box-shadow: inset 0 0 0 1.6px #5E7A77; background: transparent;
}
.legend span:has(> i.d)::before { width: 16px; height: 16px; margin-right: 8px; }
#vergleich td:has(> i.d.f:nth-of-type(1))::before, .legend span:has(> i.d.f:nth-of-type(1))::before {
  box-shadow: inset 0 0 0 1.6px var(--lw-tuerkis); background: conic-gradient(var(--lw-tuerkis) 0 50%, transparent 0); }
#vergleich td:has(> i.d.f:nth-of-type(2))::before, .legend span:has(> i.d.f:nth-of-type(2))::before {
  background: conic-gradient(var(--lw-tuerkis) 0 75%, transparent 0); }
#vergleich td:has(> i.d.f:nth-of-type(3))::before, .legend span:has(> i.d.f:nth-of-type(3))::before {
  background: var(--lw-tuerkis); }
#vergleich td.us:has(> i.d.f:nth-of-type(3))::before { background: var(--lw-mint); box-shadow: 0 0 16px rgba(138, 239, 230, .55); }
#vergleich thead th.us, #vergleich th.us { font-family: var(--lw-display); font-size: 20px; color: var(--lw-mint) !important;
  background: linear-gradient(180deg, rgba(54, 214, 206, .24), rgba(54, 214, 206, .08)) !important; border-radius: 14px 14px 0 0; }
#vergleich tbody tr:last-child td.us { border-radius: 0 0 14px 14px; }

/* ── Eine Plattform statt zehn Spezialanbieter: breite Balken wie im Mockup ── */
.r7-zeile { align-items: center !important; }
.r7-spur { height: 54px !important; border-radius: 12px !important; background: rgba(4, 9, 10, .6) !important; border: 1px solid var(--lw-linie) !important; overflow: hidden; }
.r7-b { height: 100% !important; border-radius: 0 !important; transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.r7-b-sp { background: repeating-linear-gradient(135deg, #1A2A2D 0 10px, #152326 10px 20px) !important; box-shadow: inset -2px 0 0 #5E7A77; }
.r7-b-iw { background: var(--lw-tuerkis) !important; min-width: 14px; box-shadow: 0 0 40px rgba(54, 214, 206, .5) !important; }
main > :not(.lw-hero) .r7-wert, main > :not(.lw-hero) .r7-wert > b { font-family: var(--lw-display); font-weight: 600; font-size: 24px; letter-spacing: -0.02em; color: var(--lw-text) !important; }
main > :not(.lw-hero) .r7-iw .r7-wert > b { color: var(--lw-mint) !important; }
main > :not(.lw-hero) .r7-faktor { font-family: var(--lw-display); font-size: 22px; font-weight: 600; color: var(--lw-mint) !important; }
main > :not(.lw-hero) .r7-faktor b { color: var(--lw-mint) !important; font-size: 30px; }
.r6-kosten h3 { font-size: 30px !important; letter-spacing: -0.03em; }

/* ── Preise: gleich hohe Karten, M hervorgehoben (wie im Mockup) ── */
.tiers { align-items: stretch !important; }
.tier { margin-top: 0 !important; transform: none !important; display: flex !important; flex-direction: column; padding: 28px !important; border-radius: 14px !important; }
.tier.t2 { background: linear-gradient(180deg, rgba(54, 214, 206, .18), rgba(9, 19, 21, .85) 60%) !important; border-color: var(--lw-tuerkis) !important;
  box-shadow: 0 0 0 1px var(--lw-tuerkis), 0 30px 80px -30px rgba(54, 214, 206, .55) !important; }
main > :not(.lw-hero) .tier h3 { font-size: 15px !important; letter-spacing: .06em; text-transform: uppercase; color: var(--lw-mint) !important; }
main > :not(.lw-hero) .tier .akt, main > :not(.lw-hero) .tier .lst, main > :not(.lw-hero) .tier .ask-p { font-family: var(--lw-display); font-weight: 600; font-size: 44px; line-height: 1; letter-spacing: -0.035em; color: var(--lw-text) !important; }
main > :not(.lw-hero) .tier.t4 .ask-p { font-size: 30px; }
.tier-p { margin-top: auto !important; }
main > :not(.lw-hero) .tier-badge { font-weight: 700; background: rgba(54, 214, 206, .16) !important; color: var(--lw-mint) !important; border-radius: 999px; }

/* Termin buchen: der Kalenderplatz trug einen weißen Verlauf als Hintergrundbild (Fix 25.10.) */
.r4-kal-platz { background: rgba(4, 9, 10, .55) !important; background-image: none !important; border: 1px dashed var(--lw-linie-stark) !important; border-radius: 12px; color: var(--lw-text-2) !important; }
main > :not(.lw-hero) .r4-kal-platz b { color: var(--lw-text) !important; }
main > :not(.lw-hero) .r4-kal-platz p { color: var(--lw-text-2) !important; }

/* Helle Linien und Rahmen aus dem alten Look auf die Haarlinie der dunklen Welt */
main > :not(.lw-hero) :is(.si, .t-mehr, .r2-regel-gr, .incl, .r4-kal-alt, #cyber li, #sicherheit li, #vergleich th, #vergleich td, #vergleich tr, #vorteile div, #fragen details) { border-color: var(--lw-linie-stark) !important; }
#vorteile .fx-balken i { border-left-color: var(--lw-grund) !important; }

/* Preiskarten S/M/L/XL wählbar (leuchtwand.js), hervorgehoben ist die gewählte statt fest M */
/* Wählbare Preiskarten: nicht mehr M fest hervorgehoben, sondern die gewählte */
.tier { cursor: pointer; transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s, border-color .2s; }
.tier:hover { border-color: var(--lw-linie-stark) !important; transform: translateY(-2px) !important; }
.tier.t2:not(.lw-gewaehlt) { background: linear-gradient(180deg, rgba(15,29,32,.72), rgba(9,19,21,.72)) !important; border-color: var(--lw-linie) !important; box-shadow: none !important; }
.tier.lw-gewaehlt { background: linear-gradient(180deg, rgba(54,214,206,.18), rgba(9,19,21,.85) 60%) !important; border-color: var(--lw-tuerkis) !important;
  box-shadow: 0 0 0 1px var(--lw-tuerkis), 0 30px 80px -30px rgba(54,214,206,.55) !important; }
.tier:focus-visible { outline: 2px solid var(--lw-mint); outline-offset: 3px; }

/* Hover-Zustände des alten hellen Looks (Fix 25.10.): Vergleichstabelle ist nicht klickbar und färbt beim
   Überfahren nichts mehr hell; übrige helle Hover-Flächen auf die dunkle Welt umgelegt. */
#vergleich .cmp tbody tr:hover th, #vergleich .cmp tbody tr:hover td:not(.us) { background: transparent !important; }
#vergleich .cmp tbody tr { cursor: default; }
@media (min-width: 701px) { #vergleich .cmp th:first-child, #vergleich .cmp td:first-child { background: transparent !important; } }
.prices .btn-primary:hover, .btn:hover, form.ask .btn:hover, .r2-btn-hell:hover { background: var(--lw-mint) !important; color: #032321 !important; }
.app-sb .it.live:hover { background: rgba(54, 214, 206, .10) !important; }
.faq summary:hover::after { background-color: rgba(54, 214, 206, .14) !important; }
.site-nav .sprache a:hover { background: var(--lw-grund-3) !important; color: var(--lw-text) !important; }
.r2-spur button:hover { background: rgba(54, 214, 206, .08) !important; }
.area-tab:hover:not([aria-selected="true"]) { background: rgba(54, 214, 206, .08) !important; color: var(--lw-text) !important; }

/* ── Unterseiten: Impressum, Datenschutz (main.doc) und DORA-Register (.sub-hero) ── */
.legal-top { background: rgba(4, 9, 10, .9) !important; border-bottom: 1px solid var(--lw-linie) !important; }
.legal-top .brand { font-family: var(--lw-display); font-weight: 600; color: var(--lw-text) !important; }
.legal-top .back { color: var(--lw-leise) !important; } .legal-top .back:hover { color: var(--lw-text) !important; }
main.doc { background: var(--lw-grund) !important; color-scheme: dark !important; position: relative; }
main.doc::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(40% 30% at 85% 0%, rgba(54, 214, 206, .10), transparent 70%); }
main.doc .wrap { position: relative; }
main.doc :is(h1, h2, h3) { font-family: var(--lw-display) !important; color: var(--lw-text) !important; letter-spacing: -0.02em; }
main.doc h1 { font-size: clamp(40px, 5vw, 60px) !important; letter-spacing: -0.035em; }
main.doc h3 { color: var(--lw-mint) !important; font-size: 15px !important; letter-spacing: .01em; }
main.doc :is(p, li, td) { color: var(--lw-text-2) !important; }
main.doc b, main.doc strong, main.doc th { color: var(--lw-text) !important; }
main.doc a { color: var(--lw-mint) !important; text-decoration-color: rgba(138, 239, 230, .4); }
main.doc table, main.doc :is(th, td) { border-color: var(--lw-linie-stark) !important; background: transparent !important; }
.sub-hero { background: radial-gradient(60% 90% at 85% 0%, rgba(54, 214, 206, .16), transparent 70%), var(--lw-grund) !important; border-bottom: 1px solid var(--lw-linie); }
.sub-hero h1 { font-family: var(--lw-display) !important; color: var(--lw-text) !important; letter-spacing: -0.035em; }
.sub-hero .btn-primary, .sub-hero .btn-primary:hover { background: var(--lw-tuerkis) !important; color: #032321 !important; border-color: transparent !important; }
.dark, section.dark { background: var(--lw-grund) !important; }
.scope div { background: linear-gradient(180deg, rgba(15, 29, 32, .72), rgba(9, 19, 21, .72)) !important; border: 1px solid var(--lw-linie) !important; }

/* XL im Kostenvergleich (leuchtwand.js setzt .lw-xl): offene Flächen und „Preis auf Anfrage“ statt Zahlen */
.r6-kosten:not(.lw-xl) :is(.lw-xl-in, .lw-xl-wert, .lw-xl-satz) { display: none !important; }
.r6-kosten.lw-xl .r7-wert:not(.lw-xl-wert), .r6-kosten.lw-xl .r7-faktor { display: none !important; }
.r6-kosten.lw-xl .r7-spur { position: relative; }
.r6-kosten.lw-xl .r7-b-sp { width: 100% !important; background: repeating-linear-gradient(135deg, #3A4245 0 10px, #2E3538 10px 20px) !important; box-shadow: none !important; }
.r6-kosten.lw-xl .r7-b-iw { width: 100% !important; background: transparent !important; box-shadow: none !important; border: 1.5px dashed var(--lw-tuerkis); border-radius: 11px !important; }
.lw-xl-in { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 18px; font-weight: 600; font-size: 14px; }
main > :not(.lw-hero) .lw-xl-in.lw-xl-sp { color: #C3CACC !important; }
main > :not(.lw-hero) .lw-xl-in.lw-xl-iw { color: var(--lw-mint) !important; }
main > :not(.lw-hero) .lw-xl-wert.lw-xl-iw { color: var(--lw-mint) !important; }
main > :not(.lw-hero) p.lw-xl-satz { font-family: var(--lw-display); font-size: 18px; font-weight: 600; color: var(--lw-mint) !important; margin-top: 14px; }
main > :not(.lw-hero) .r7-wert.lw-xl-wert { font-family: var(--lw-display); font-weight: 600; font-size: 24px; letter-spacing: -0.02em; }

/* ── Bereiche der Plattform: Stichpunkte schneller erfassbar (25.10.) ── */
.area-lead h3 { font-family: var(--lw-display) !important; font-size: 30px !important; letter-spacing: -0.02em; margin-bottom: 12px !important; }
.area-views { gap: 0 !important; }
.area-views li { padding: 16px 0 16px 18px !important; border-left: 2px solid var(--lw-tuerkis) !important; }
.area-views li + li { margin-top: 10px; }
main > :not(.lw-hero) .area-views b { font-family: var(--lw-display); font-size: 18px !important; font-weight: 600; letter-spacing: -0.005em; margin-bottom: 6px !important; color: var(--lw-text) !important; }
main > :not(.lw-hero) .area-views li { color: var(--lw-text-2) !important; font-size: 15px; line-height: 1.55; }

/* ── Woher die Findings kommen: drei klar getrennte Gruppen (25.10.) ── */
.r5-cyber { gap: 40px !important; }
.r5-cyber > div { position: relative; padding-top: 22px; }
.r5-cyber > div::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--lw-tuerkis), rgba(54, 214, 206, .15)); box-shadow: 0 0 14px rgba(54, 214, 206, .45); }
main > :not(.lw-hero) .r5-cyber-gruppe { font-family: var(--lw-display) !important; font-size: 22px !important; font-weight: 600 !important; letter-spacing: -0.015em !important;
  text-transform: none !important; color: var(--lw-mint) !important; margin: 0 0 6px !important; }
main > :not(.lw-hero) .r5-cyber-frage { font-size: 15px !important; color: var(--lw-leise) !important; margin-bottom: 10px !important; }
main > :not(.lw-hero) .r5-cyber h3 { font-size: 16px !important; }
main > :not(.lw-hero) .r5-cyber-kopf h3 { font-family: var(--lw-display) !important; font-size: clamp(28px, 2.8vw, 36px) !important; letter-spacing: -0.03em !important; }

/* Regelwerke-Leiste zweigeteilt (25.10.): links Gesetze und Leitlinien, rechts Standards, leuchtende Trennlinie */
.lw-regs-in.lw-regs-split { display: grid !important; grid-template-columns: auto 1px auto; justify-content: space-between; align-items: start; gap: 40px; }
.lw-regs-kopf { margin: 0 0 10px !important; font-size: 13px !important; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lw-mint) !important; }
.lw-regs-split .lw-regs-row { justify-content: flex-start; gap: 12px 30px !important; }
.lw-regs-trenn { align-self: stretch; background: linear-gradient(var(--lw-tuerkis), rgba(54, 214, 206, 0.1)); box-shadow: 0 0 12px rgba(54, 214, 206, 0.5); }
@media (max-width: 1100px) {
  .lw-regs-in.lw-regs-split { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .lw-regs-trenn { height: 1px; background: linear-gradient(90deg, var(--lw-tuerkis), rgba(54, 214, 206, 0.1)); }
}

/* Kein Marineblau mehr (25.10.): Reste aus dem alten Look auf die Türkis-Welt umgestellt */
main > :not(.lw-hero) .r7-sg-t { position: relative; border-bottom: 0 !important; padding: 22px 0 0 !important; margin-bottom: 14px !important;
  font-family: var(--lw-display) !important; font-size: 22px !important; font-weight: 600 !important; letter-spacing: -0.015em !important; text-transform: none !important; color: var(--lw-mint) !important; }
main > :not(.lw-hero) .r7-sg-t::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--lw-tuerkis), rgba(54, 214, 206, .15)); box-shadow: 0 0 14px rgba(54, 214, 206, .45); }
html[data-theme="ccurity"] .t-weg::before { background: linear-gradient(90deg, var(--lw-petrol), var(--lw-petrol) 66%, var(--lw-tuerkis)) !important; }
html[data-theme="ccurity"] .t-weg li::before { background: var(--lw-grund) !important; border-color: var(--lw-petrol) !important; box-shadow: none !important; }
html[data-theme="ccurity"] .t-weg li.t-jetzt::before { background: var(--lw-tuerkis) !important; border-color: var(--lw-tuerkis) !important; box-shadow: 0 0 0 5px rgba(54, 214, 206, .18), 0 0 16px rgba(54, 214, 206, .5) !important; }
@media (max-width: 760px) { html[data-theme="ccurity"] .t-weg::before { background: linear-gradient(180deg, var(--lw-petrol), var(--lw-petrol) 66%, var(--lw-tuerkis)) !important; } }
html[data-theme="ccurity"] .r4-punkte li::before { background-color: var(--lw-petrol) !important; }
#rundgang li.in::before { background: var(--lw-tuerkis) !important; }
[data-theme="ccurity"] .clip-toggle { background: var(--lw-petrol) !important; color: #fff !important; box-shadow: 0 0 14px rgba(54, 214, 206, .45); }

/* Weitere Marineblau-Reste: Logo-Feld, Navigation, Rundgang-Reiter, Team-Stationen, Clip-Knöpfe, Handy-Leiste */
[data-theme="ccurity"] .brand svg { background: #0B2427 !important; box-shadow: inset 0 0 0 1px rgba(54, 214, 206, .28); }
[data-theme="ccurity"] .site-nav nav a::after { background: var(--lw-tuerkis) !important; }
.site-nav .sprache a:focus-visible { outline-color: var(--lw-tuerkis) !important; }
[data-theme="ccurity"] .si button[aria-selected="true"]::before { background: var(--lw-tuerkis) !important; border-color: var(--lw-tuerkis) !important; box-shadow: 0 0 10px rgba(54, 214, 206, .6); }
@media (max-width: 920px) { [data-theme="ccurity"] #rundgang .si button[aria-selected="true"] { background: var(--lw-tuerkis) !important; border-color: var(--lw-tuerkis) !important; color: var(--lw-grund) !important; } }
[data-theme="ccurity"] .st-wechsel { background: var(--lw-grund) !important; color: var(--lw-text) !important; }
html[data-theme="ccurity"] .clip-voll { background: var(--lw-petrol) !important; color: #fff !important; }
html[data-theme="ccurity"] .t-stationen li::before { background: var(--lw-grund) !important; border-color: var(--lw-petrol) !important; }
html[data-theme="ccurity"] .t-stationen li:first-child::before { background: var(--lw-tuerkis) !important; border-color: var(--lw-tuerkis) !important; }
html[data-theme="ccurity"] .r2-leiste a:first-child { background: var(--lw-tuerkis) !important; color: var(--lw-grund) !important; }

/* Vergleichstabelle am Handy: Die erste Spalte steht fest und muss deckend bleiben, auch wenn ein Finger
   die Zeile hält (Antippen gilt als Überfahren); sonst scheinen die Kreise beim seitlichen Wischen durch */
@media (max-width: 700px) { #vergleich .cmp tbody tr:hover th, #vergleich .cmp tbody tr:hover td:first-child { background: #0A1517 !important; } }

/* Skyline am Handy und Tablet ganz zeigen statt eines unscharfen Ausschnitts in Originalgröße (2000 x 250) */
@media (max-width: 900px) { .lw-skyline { height: calc(100vw / 8) !important; margin-top: 28px !important; background-size: 100% auto !important; -webkit-mask-image: none !important; mask-image: none !important; } }
/* Untere Regelwerks-Leiste: seit EBA links steht, ist die linke Gruppe breiter; auf Tablet-Breite beide Hälften gleich breit, damit rechts nichts übersteht */
@media (min-width: 701px) and (max-width: 1100px) { html[data-theme="ccurity"] .r2-regel-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; } }

/* Rollen-Zeile im Rundgang (25.10.): statt Kapseln eine Leiste mit Leuchtpunkten; am Handy ein Laufband,
   das man mit dem Finger anhalten und schieben kann (leuchtwand.js). Die Kopien fürs Endlosband sind aria-hidden. */
#rundgang .r2-rollen { display: flex !important; flex-wrap: wrap; align-items: center; row-gap: 10px; margin: 0 0 32px !important; font-size: 16px !important; line-height: 1.4 !important; }
#rundgang .r2-rollen-k { margin-right: 18px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--lw-mint) !important; }
#rundgang .lw-band, #rundgang .lw-band-in { display: contents; }
#rundgang .r2-rollen i { display: inline-block !important; font-style: normal; font-size: 16px; font-weight: 500; line-height: 1.4; white-space: nowrap; color: var(--lw-text) !important; background: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; }
#rundgang .r2-rollen i::after { content: "" !important; display: inline-block; width: 4px; height: 4px; margin: 0 14px; border-radius: 50%; vertical-align: middle; background: var(--lw-tuerkis); box-shadow: 0 0 8px rgba(54, 214, 206, .8); }
#rundgang .r2-rollen i:last-child::after, #rundgang .r2-rollen i.lw-letzte::after { display: none; }
#rundgang .r2-rollen i.lw-kopie { display: none !important; }
@media (max-width: 700px) {
  #rundgang .r2-rollen { display: block !important; }
  #rundgang .r2-rollen-k { display: block; margin: 0 0 10px; }
  #rundgang .lw-band { display: block; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; touch-action: pan-x pan-y; cursor: grab;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
  #rundgang .lw-band::-webkit-scrollbar { display: none; }
  #rundgang .lw-band-in { display: flex; width: max-content; }
  #rundgang .r2-rollen i.lw-kopie { display: inline-block !important; }
  #rundgang .r2-rollen i.lw-letzte::after { display: inline-block; }
}

/* Fall-Karte (Fix 25.10. abends): Aufnahme 1 stößt nicht mehr an den Rahmen; Brutto/Netto-Schild und
   Kennzahl stehen in einer Kopfzeile über dem Risikogebirge statt auf den Achsenbeschriftungen. */
.lw-bild { padding: 12px 14px; background: #0A1517; }
.lw-g-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 10px; }
.lw-g-kopf .lw-g-schild, .lw-g-kopf .lw-g-zahl { position: static; }
.lw-g-kopf .lw-g-zahl { grid-auto-flow: column; align-items: baseline; column-gap: 10px; padding: 4px 12px; }
main > :not(.lw-hero) .lw-g-kopf .lw-g-zahl span { grid-area: 1 / 2; font-size: 20px !important; }
@media (max-width: 700px) {
  .lw-bild { padding: 8px 10px; }
  .lw-g-kopf .lw-g-zahl { padding: 3px 10px; }
  .lw-g-kopf .lw-g-zahl b { font-size: 11px; }
  main > :not(.lw-hero) .lw-g-kopf .lw-g-zahl span { font-size: 17px !important; }
}