/* ===========================================================================
   NEON-LOOK (Entwurf) – Blaupause trifft Tron.
   Greift nur, wenn <html class="neon"> gesetzt ist (Standard in den Entwurfsseiten).
   Zum Vergleich mit dem klassischen Look: ?look=klassisch an die Adresse hängen.
   Farben: Marineblau-Nacht, Neon-Cyan (Hauptakzent), Orange sparsam (Tron-Legacy-Gegenpol).
   =========================================================================== */
html.neon {
  --nc: #19e3ff;            /* Hauptakzent */
  --g: 25, 227, 255;        /* Hauptakzent als RGB (für Glow) */
  --o: 255, 138, 31;        /* Zweitakzent als RGB */
  --bgbase: #020a1c;
  --ontext: #021028;        /* Schrift auf gefülltem Akzent */
  --nc-soft: rgba(var(--g), .35);
  --no: #ff8a1f;            /* Zweitakzent (sparsam) */
  --bg: var(--bgbase);
  --ink: #e9f7ff;
  --muted: #9fb7d6;
  --line: rgba(var(--g), .38);
  --line-soft: rgba(var(--g), .14);
  --blue: var(--nc);
  --panel: rgba(5, 22, 56, .72);
  --chip-bg: rgba(var(--g), .07);
  --header-bg: rgba(2, 10, 28, .86);
  --btn-bg: transparent;
  --btn-ink: var(--nc);
  --btn-bg-hover: var(--nc);
  --grid-minor: rgba(var(--g), .05);
  --grid-major: rgba(var(--g), .12);
}
html.neon body {
  background:
    radial-gradient(900px 420px at 12% -6%, rgba(var(--g), .16), transparent 70%),
    radial-gradient(800px 500px at 100% 18%, rgba(30, 90, 255, .14), transparent 70%),
    linear-gradient(var(--grid-minor) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(var(--grid-major) 1px, transparent 1px) 0 0 / 140px 140px,
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px) 0 0 / 140px 140px,
    var(--bgbase);
  color: var(--ink);
}
html.neon a { color: var(--nc); }
html.neon .note, html.neon .note a { color: var(--muted); }

/* Kopf und Fuß ----------------------------------------------------------- */
html.neon .site-header { background: var(--header-bg); border-bottom: 1px solid var(--nc-soft); box-shadow: 0 1px 22px rgba(var(--g), .18); backdrop-filter: blur(6px); }
html.neon .brand { color: #fff; text-shadow: 0 0 10px rgba(var(--g), .55); }
html.neon .brand small { color: var(--nc); }
html.neon .nav a { color: #cfe7ff; }
html.neon .nav a:hover { color: var(--nc); text-shadow: 0 0 8px var(--nc); }
html.neon .btn-mini { background: transparent; color: var(--nc) !important; border: 1px solid var(--nc); box-shadow: 0 0 12px rgba(var(--g), .45), inset 0 0 8px rgba(var(--g), .2); text-shadow: 0 0 6px var(--nc); }
html.neon .btn-mini:hover { background: var(--nc); color: var(--ontext) !important; text-shadow: none; }
html.neon .site-footer { background: #01060f; border-top: 1px solid var(--nc-soft); box-shadow: 0 -1px 22px rgba(var(--g), .12); color: var(--muted); }
html.neon .site-footer a { color: var(--nc); }

/* Überschriften mit Leuchten ---------------------------------------------- */
html.neon h1 { color: #fff; text-shadow: 0 0 14px rgba(var(--g), .55), 0 0 42px rgba(var(--g), .28); }
html.neon h2 { color: #fff; text-shadow: 0 0 10px rgba(var(--g), .35); }
html.neon h3 { color: var(--nc); text-shadow: 0 0 8px rgba(var(--g), .4); }
html.neon .kicker { color: var(--nc); text-shadow: 0 0 8px var(--nc); display: flex; align-items: center; gap: 12px; }
html.neon .kicker::before { content: ""; width: 38px; height: 2px; background: linear-gradient(90deg, transparent, var(--nc)); box-shadow: 0 0 10px var(--nc); }
html.neon .lead { color: #c8dcf5; }
html.neon p, html.neon li { color: #d4e6fb; }

/* Hero: Lichtlinie wie eine Tron-Spur --------------------------------------- */
html.neon .hero.page-head { position: relative; overflow: hidden; }
html.neon .hero.page-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--nc) 20%, var(--nc) 80%, transparent);
  box-shadow: 0 0 14px var(--nc), 0 0 32px rgba(var(--g), .6);
}
html.neon .hero.page-head::before {
  content: ""; position: absolute; bottom: -1px; left: -20%; width: 18%; height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, transparent, #fff, var(--nc));
  box-shadow: 0 0 18px #fff, 0 0 36px var(--nc);
  animation: lightcycle 5.5s linear infinite;
}
@keyframes lightcycle { from { left: -20%; } to { left: 105%; } }
@media (prefers-reduced-motion: reduce) { html.neon .hero.page-head::before { animation: none; display: none; } }

/* Buttons -------------------------------------------------------------------- */
html.neon .btn { border-radius: 4px; letter-spacing: .14em; transition: box-shadow .2s, background .2s, color .2s; }
html.neon .btn.primary { background: transparent; color: var(--nc); border: 1.5px solid var(--nc); text-shadow: 0 0 8px var(--nc);
  box-shadow: 0 0 14px rgba(var(--g), .5), inset 0 0 14px rgba(var(--g), .22); }
html.neon .btn.primary:hover { background: var(--nc); color: var(--ontext); text-shadow: none; box-shadow: 0 0 26px var(--nc), 0 0 60px rgba(var(--g), .55); }
html.neon .btn.ghost { background: transparent; color: #cfe7ff; border: 1.5px solid rgba(var(--o), .75); box-shadow: 0 0 10px rgba(var(--o), .35), inset 0 0 10px rgba(var(--o), .12); }
html.neon .btn.ghost:hover { background: var(--no); color: #1a0b00; box-shadow: 0 0 24px var(--no); }

/* Flächen: Karten, Kacheln, Kästen ------------------------------------------ */
html.neon .band-blue { background: linear-gradient(180deg, rgba(8, 36, 92, .55), rgba(3, 14, 40, .75)); border-top: 1px solid var(--nc-soft); border-bottom: 1px solid var(--nc-soft); box-shadow: inset 0 0 60px rgba(var(--g), .06); }
html.neon .card, html.neon .mat, html.neon .mcard, html.neon .stat, html.neon .titem, html.neon .res, html.neon .special, html.neon .drop, html.neon details.faq, html.neon .vorort, html.neon .panel {
  background: var(--panel); color: var(--ink); border: 1px solid var(--line);
  box-shadow: 0 0 18px rgba(var(--g), .10), inset 0 0 22px rgba(var(--g), .04);
}
html.neon .card:hover, html.neon .mat:hover, html.neon .mcard:hover, html.neon .stat:hover, html.neon .titem:hover, html.neon a.card:hover {
  border-color: var(--nc); box-shadow: 0 0 26px rgba(var(--g), .38), inset 0 0 26px rgba(var(--g), .08);
}
html.neon .card h3, html.neon .mat h3 { color: var(--nc); }
html.neon .mcard { border-top: 1px solid var(--line); }
html.neon .mcard h3 { color: #fff; text-shadow: 0 0 10px var(--acc); }
html.neon .mcard h3 small { color: var(--acc); border-color: var(--acc); text-shadow: 0 0 6px var(--acc); }
html.neon .mtags li, html.neon .chips li { background: var(--chip-bg); border-color: rgba(var(--g), .3); color: #cfe7ff; }
html.neon .sk i { background: rgba(255, 255, 255, .08); }
html.neon .sk i b { box-shadow: 0 0 10px var(--acc), 0 0 2px var(--acc); }
html.neon .sk { color: #9fb7d6; }
html.neon .mcard.a1 { --acc: #3d8bff; } html.neon .mcard.a2 { --acc: #19e3ff; } html.neon .mcard.a3 { --acc: #ffc933; } html.neon .mcard.a4 { --acc: #ff6a3d; } html.neon .mcard.a5 { --acc: #39ffa0; }
html.neon .stat b { color: var(--nc); text-shadow: 0 0 14px var(--nc); }
html.neon .stat span { color: var(--muted); }
html.neon .tgroup h3 { color: var(--nc); border-bottom-color: var(--nc-soft); }
html.neon .titem strong { color: #fff; }
html.neon .titem span { color: var(--muted); }
html.neon details.faq summary { color: #fff; }
html.neon details.faq summary::after { color: var(--nc); text-shadow: 0 0 8px var(--nc); }
html.neon details.faq p { color: #c3d8f0; }
html.neon .steps li h3 { color: var(--nc); }
html.neon .steps li { border-top-color: var(--nc); box-shadow: 0 -6px 14px -8px var(--nc); }
html.neon .tips li { color: #d4e6fb; }

/* Ticker leuchtet ---------------------------------------------------------- */
html.neon .ticker { background: #01060f; border-color: var(--nc-soft); box-shadow: 0 0 22px rgba(var(--g), .22), inset 0 0 22px rgba(var(--g), .06); }
html.neon .ticker .track { color: #bff5ff; text-shadow: 0 0 8px rgba(var(--g), .8); }
html.neon .ticker span::before { color: var(--nc); text-shadow: 0 0 8px var(--nc); }

/* Vor-Ort-Block ohne Auto: Leuchtschild ------------------------------------ */
html.neon .vorort { border: 1.5px solid var(--nc); box-shadow: 0 0 28px rgba(var(--g), .3), inset 0 0 40px rgba(var(--g), .08); }
html.neon .voticon { border-color: var(--no); color: var(--no); text-shadow: 0 0 14px var(--no), 0 0 30px rgba(var(--o), .6); box-shadow: 0 0 22px rgba(var(--o), .45), inset 0 0 22px rgba(var(--o), .15); }
html.neon .vorort .small { color: var(--muted); }

/* Preisrechner ------------------------------------------------------------- */
html.neon .pills label { background: var(--chip-bg); border-color: rgba(var(--g), .3); color: #cfe7ff; }
html.neon .pills label:has(input:checked) { border-color: var(--nc); background: rgba(var(--g), .14); color: #fff; box-shadow: 0 0 14px rgba(var(--g), .5), inset 0 0 10px rgba(var(--g), .2); }
html.neon .res .price { color: var(--nc); text-shadow: 0 0 18px var(--nc), 0 0 46px rgba(var(--g), .5); }
html.neon .res dt { color: var(--muted); }
html.neon .res dd { color: #fff; }
html.neon .drop { border: 2px dashed var(--nc); }
html.neon .drop.on { box-shadow: 0 0 30px rgba(var(--g), .55); }
html.neon .opt h3 { color: var(--nc); }
html.neon input[type=number], html.neon select { background: rgba(2, 10, 28, .9); color: #fff; border: 1px solid var(--nc-soft); }
html.neon .warn { background: rgba(var(--o), .12); border-left-color: var(--no); color: #ffd9b3; }
html.neon .draft { background: rgba(var(--o), .10); border-color: var(--no); color: #ffd9b3; }
html.neon .hl { outline: 2px solid var(--nc); box-shadow: 0 0 22px var(--nc); }

/* Scrollleiste & Auswahl ---------------------------------------------------- */
html.neon ::selection { background: var(--nc); color: #021028; }

/* ===== Paletten (Umschalter unten links, Auswahl bleibt gespeichert) ===== */
html.neon[data-pal="a"] { /* Tron-Cyan + Orange (erste Fassung) */ }
html.neon[data-pal="b"] { /* Blueprint-Eis: Markenfarben, ruhiger */
  --nc: #78a2f5; --g: 120, 162, 245; --no: #f1ecde; --o: 241, 236, 222; --bgbase: #031438; --ontext: #031438;
  --ink: #f1ecde; --muted: #aab6d0; --panel: rgba(6, 32, 79, .72);
}
html.neon[data-pal="c"] { /* Petrol-Mint: technisch, kühl */
  --nc: #35f0c8; --g: 53, 240, 200; --no: #ffd166; --o: 255, 209, 102; --bgbase: #02121a; --ontext: #02121a;
  --panel: rgba(4, 30, 40, .74);
}
html.neon[data-pal="d"] { /* Himmelblau gedämpft, Akzent warm */
  --nc: #7fd8ff; --g: 127, 216, 255; --no: #ff9f6b; --o: 255, 159, 107; --bgbase: #04112a; --ontext: #04112a;
  --panel: rgba(8, 28, 66, .70);
}
html.neon[data-pal="b"] h1, html.neon[data-pal="d"] h1 { text-shadow: 0 0 10px rgba(var(--g), .4), 0 0 28px rgba(var(--g), .18); }
html.neon[data-pal="b"] .btn.ghost { border-color: rgba(var(--o), .7); }

/* Umschalter */
.palbar { position: fixed; left: 12px; bottom: 12px; z-index: 50; display: flex; gap: 6px; align-items: center; padding: 6px 8px; border-radius: 8px;
  background: rgba(2, 8, 20, .88); border: 1px solid rgba(255, 255, 255, .25); font: 12px/1 system-ui, sans-serif; color: #cfe0f5; letter-spacing: .08em; text-transform: uppercase; }
.palbar b { margin-right: 4px; font-weight: 600; }
.palbar button { font: inherit; color: #fff; background: transparent; border: 1px solid rgba(255, 255, 255, .35); border-radius: 5px; padding: 6px 9px; cursor: pointer; }
.palbar button[aria-pressed="true"] { background: #fff; color: #000; }

/* ===== Zweifarbige Überschriften im Wechsel, nummerierte Kicker ===== */
html.neon h1 .ac, html.neon h2 .ac { color: var(--nc); text-shadow: 0 0 12px rgba(var(--g), .65), 0 0 34px rgba(var(--g), .35); }
html.neon .kicker .kn { color: var(--muted); text-shadow: none; opacity: .8; margin-right: -4px; }

/* ===== Blaupause als Hintergrund im Seitenkopf (Maske, in Palettenfarbe) ===== */
html.neon .hero.page-head .bp {
  position: absolute; inset: 0; pointer-events: none; opacity: .30;
  background: var(--nc);
  -webkit-mask: url(bild/blaupause.png) right center / auto 135% no-repeat; mask: url(bild/blaupause.png) right center / auto 135% no-repeat;
  filter: drop-shadow(0 0 6px rgba(var(--g), .5));
}
html.neon .hero.page-head .wrap { position: relative; z-index: 1; }

/* ===== Eigene Symbole auf den Leistungs-Karten ===== */
html.neon .ico {
  display: block; height: 92px; width: 100%; margin: 0 0 14px; background: var(--nc);
  -webkit-mask: var(--i) left center / contain no-repeat; mask: var(--i) left center / contain no-repeat; max-width: 190px;
  filter: drop-shadow(0 0 7px rgba(var(--g), .75));
}

/* ===== Glow-Rahmen (weißer Kern, mehrfarbiger Verlauf, weiches Leuchten) ===== */
html.neon .vorort, html.neon .res { position: relative; border: 0; border-radius: 20px; }
html.neon .vorort::before, html.neon .vorort::after, html.neon .res::before, html.neon .res::after {
  content: ""; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none; padding: 3px;
  background: conic-gradient(from 210deg, var(--nc), #4d7bff, #d44bff, var(--no), var(--nc));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
html.neon .vorort::after, html.neon .res::after { inset: -10px; padding: 12px; filter: blur(22px); opacity: .75; }
html.neon .vorort, html.neon .res { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55), inset 0 0 26px rgba(var(--g), .12); }

/* ===== Echte Beispielteile als leuchtende Objekte im Seitenkopf ===== */
html.neon .hud { position: absolute; right: 2%; top: 46%; width: min(38%, 480px); aspect-ratio: 1 / .98; transform: translateY(-50%); pointer-events: none; z-index: 0; }
html.neon .hud .ht { position: absolute; height: auto; filter: drop-shadow(0 0 2px rgba(var(--g), 1)) drop-shadow(0 0 10px rgba(var(--g), .85)) drop-shadow(0 0 28px rgba(var(--g), .5)); animation: hudf 7s ease-in-out infinite; }
html.neon .hud .ht1 { animation-duration: 9s; animation-delay: -3s; }
html.neon .hud .ht2 { animation-duration: 8s; animation-delay: -1s; }
html.neon .hud .ht3 { animation-duration: 6.5s; animation-delay: -2s; }
html.neon .hud .ht4 { animation-duration: 10s; animation-delay: -5s; }
@keyframes hudf { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (prefers-reduced-motion: reduce) { html.neon .hud .ht { animation: none; } }
@media (max-width: 1100px) { html.neon .hud { display: none; } }
html.neon .hero.page-head .bp { -webkit-mask-position: left center; mask-position: left center; opacity: .34; }

/* ===== Beschriftungen mit Hilfslinien + Schriftfeld (Zeichnungs-Look) ===== */
html.neon .teileband .tb-fig { position: relative; }
html.neon .teileband .callouts { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--nc); pointer-events: none; overflow: visible; }
html.neon .callouts path { stroke-width: 1.6; opacity: .9; filter: drop-shadow(0 0 3px rgba(var(--g), .8)); }
html.neon .callouts .dot { fill: var(--nc); stroke: none; filter: drop-shadow(0 0 5px var(--nc)); }
html.neon .callouts text { fill: #dff7ff; stroke: none; font: 600 22px/1 ui-monospace, Consolas, monospace; letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 760px) { html.neon .callouts text { display: none; } }
html.neon .schriftfeld { display: grid; grid-template-columns: 2fr 1.2fr 1.4fr 1.2fr; max-width: 760px; margin: 14px 0 0 auto; border: 1px solid var(--nc); box-shadow: 0 0 14px rgba(var(--g), .35); font-family: ui-monospace, Consolas, monospace; }
html.neon .schriftfeld > div { padding: 8px 12px; border-left: 1px solid var(--nc-soft); }
html.neon .schriftfeld > div:first-child { border-left: 0; }
html.neon .schriftfeld small { display: block; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
html.neon .schriftfeld b { display: block; font-size: 13px; color: #fff; font-weight: 600; margin-top: 2px; }
@media (max-width: 640px) { html.neon .schriftfeld { grid-template-columns: 1fr 1fr; } }

/* ===== Perspektivischer Blaupausen-Boden im Seitenkopf (Vorbild: leuchtendes Wireframe auf Bauplan) ===== */
html.neon .hero.page-head .floor { position: absolute; left: -10%; right: -10%; bottom: 0; height: 62%; overflow: hidden; pointer-events: none; perspective: 520px; perspective-origin: 50% 0; }
html.neon .hero.page-head .floor::before {
  content: ""; position: absolute; left: -20%; right: -20%; top: 0; bottom: -60%; transform: rotateX(62deg); transform-origin: 50% 0;
  background:
    linear-gradient(rgba(var(--g), .55) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(90deg, rgba(var(--g), .55) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(rgba(var(--g), .22) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(90deg, rgba(var(--g), .22) 1px, transparent 1px) 0 0 / 16px 16px;
  -webkit-mask: linear-gradient(transparent, #000 40%, #000 70%, transparent); mask: linear-gradient(transparent, #000 40%, #000 70%, transparent);
  animation: floorrun 6s linear infinite;
}
@keyframes floorrun { to { background-position: 0 64px, 64px 0, 0 16px, 16px 0; } }
@media (prefers-reduced-motion: reduce) { html.neon .hero.page-head .floor::before { animation: none; } }
html.neon .hero.page-head .floor { opacity: .38; }
html.neon .hud .htl { position: absolute; left: 0; right: 0; bottom: -6px; text-align: center; font: 600 13px/1 ui-monospace, Consolas, monospace; letter-spacing: .32em; text-transform: uppercase; color: var(--nc); text-shadow: 0 0 10px var(--nc), 0 0 26px rgba(var(--g), .7); }

/* ===== Aurora-Glow hinter dem Seitenkopf (Anregung: Layerloop-Seite, bunte Lichtflächen auf Schwarz) ===== */
html.neon .hero.page-head {
  background:
    radial-gradient(560px 340px at 80% 28%, rgba(176, 64, 255, .30), transparent 70%),
    radial-gradient(520px 320px at 62% 72%, rgba(var(--g), .30), transparent 70%),
    radial-gradient(440px 280px at 94% 82%, rgba(255, 90, 140, .22), transparent 70%);
}

/* ===== Fester Anfrage-Knopf unten mittig ===== */
html.neon .stickycta { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 40; padding: 12px 26px; border-radius: 4px;
  background: rgba(2, 10, 28, .88); color: var(--nc); border: 1.5px solid var(--nc); text-decoration: none; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: 13px;
  box-shadow: 0 0 16px rgba(var(--g), .5), inset 0 0 14px rgba(var(--g), .22); }
html.neon .stickycta:hover { background: var(--nc); color: var(--ontext); }
html:not(.neon) .stickycta { display: none; }
@media (max-width: 640px) { html.neon .stickycta { left: auto; right: 12px; transform: none; } }

/* ===== Eigene Strichzeichnungen (Vor-Ort-Transporter, Szene, Ablauf) in Palettenfarbe mit Glow ===== */
html.neon .vopic { display: block; width: 100%; background: var(--nc); -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat;
  filter: drop-shadow(0 0 6px rgba(var(--g), .7)) drop-shadow(0 0 20px rgba(var(--g), .35)); }
html.neon .vorort { grid-template-columns: 320px 1fr; }
html.neon .vorort > div:first-child .vopic { height: 240px; }
html.neon .vscene-wrap { grid-column: 1 / -1; text-align: center; }
html.neon .vscene { height: 340px; max-width: 820px; margin: 6px auto 0; }
html.neon .vscene-wrap .small { margin-top: 10px; }
html.neon .flowstrip { height: 230px; margin: 34px auto 0; max-width: 980px; }
@media (max-width: 760px) { html.neon .vorort { grid-template-columns: 1fr; } html.neon .vorort > div:first-child .vopic { height: 180px; } html.neon .vscene { height: 220px; } html.neon .flowstrip { height: 150px; } }

/* ===== Mosaik der Anwendungsbereiche: große Bilder, zwei große Kacheln, Rest kleiner ===== */
html.neon .bereiche { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
html.neon .bt { grid-column: span 2; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px 22px;
  box-shadow: 0 0 18px rgba(var(--g), .10), inset 0 0 22px rgba(var(--g), .04); transition: box-shadow .2s, border-color .2s, transform .2s; }
html.neon .bt:hover { border-color: var(--nc); box-shadow: 0 0 26px rgba(var(--g), .38), inset 0 0 26px rgba(var(--g), .08); transform: translateY(-3px); }
html.neon .bt.big { grid-column: span 3; padding: 22px 26px 26px; }
html.neon .bt .kimg { height: 190px; width: 100%; margin-bottom: 14px; background: var(--nc); -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat;
  filter: drop-shadow(0 0 6px rgba(var(--g), .7)) drop-shadow(0 0 18px rgba(var(--g), .3)); }
html.neon .bt.big .kimg { height: 270px; }
html.neon .bt h3 { margin: 0 0 6px; font-size: 20px; }
html.neon .bt p { margin: 0; font-size: 15px; }
@media (max-width: 980px) { html.neon .bt, html.neon .bt.big { grid-column: span 3; } }
@media (max-width: 620px) { html.neon .bereiche { grid-template-columns: 1fr; } html.neon .bt, html.neon .bt.big { grid-column: auto; } html.neon .bt .kimg, html.neon .bt.big .kimg { height: 180px; } }

/* ===== Hausmodell-Seite ===== */
html.neon .hbild { height: 380px; max-width: 980px; margin: 26px auto 0; }
html.neon .hud .hhero { position: absolute; inset: 0; width: 100%; height: 100%; animation: hudf 8s ease-in-out infinite; }
html.neon .bt .more { color: var(--nc); font-weight: 600; text-decoration: none; letter-spacing: .06em; }
html.neon .bt .more:hover { text-shadow: 0 0 10px var(--nc); }
@media (max-width: 760px) { html.neon .hbild { height: 240px; } }

/* ===== Startseite und Altseiten im Neon-Look ===== */
html.neon .cicon { height: 170px; width: 100%; margin: 0 0 14px; }
html.neon .cards .card { text-align: left; }
html.neon .specs span b, html.neon .owner { color: var(--nc); }
html.neon .chips li { background: var(--chip-bg); border: 1px solid rgba(var(--g), .3); color: #cfe7ff; }
/* ===== Neon-Reklame-Pfeil ("Mehr Beispiele ansehen"): Leuchtröhre mit weißem Kern, farbigem Glow und flackernder Schrift ===== */
html.neon .more-wrap { filter: none; }
html.neon .more-cta { position: relative; clip-path: none; background: transparent; color: var(--nc); border: 0; padding: 26px 110px 26px 38px; }
html.neon .more-cta .neon-arrow { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0;
  filter: drop-shadow(0 0 3px rgba(var(--o), 1)) drop-shadow(0 0 12px rgba(var(--o), .9)) drop-shadow(0 0 30px rgba(var(--o), .6)) drop-shadow(0 0 60px rgba(var(--o), .35)); animation: neonflicker 6s infinite; }
html.neon .more-cta .neon-arrow polygon { vector-effect: non-scaling-stroke; fill: rgba(var(--o), .05); }
html.neon .more-cta .neon-arrow .tube { stroke: var(--no); stroke-width: 6; }
html.neon .more-cta .neon-arrow .core { stroke: #fff6e0; stroke-width: 2; fill: none; }
html.neon .more-cta .more-text { position: relative; z-index: 1; }
html.neon .more-cta .more-text strong { color: #eafffa; text-shadow: 0 0 6px var(--nc), 0 0 16px var(--nc), 0 0 34px rgba(var(--g), .8), 0 0 60px rgba(var(--g), .5); }
html.neon .more-cta .more-text small { color: #bff7e8; opacity: 1; text-shadow: 0 0 8px rgba(var(--g), .8); }
html.neon .more-cta:hover .neon-arrow { filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 18px rgba(var(--o), 1)) drop-shadow(0 0 44px rgba(var(--o), .8)) drop-shadow(0 0 80px rgba(var(--o), .5)); animation: none; }
html.neon .more-cta:hover .more-text strong { text-shadow: 0 0 8px #fff, 0 0 22px var(--nc), 0 0 48px var(--nc); }
@keyframes neonflicker { 0%, 18%, 22%, 62%, 66%, 100% { opacity: 1; } 20%, 64% { opacity: .72; } 21%, 65% { opacity: .95; } }
@media (prefers-reduced-motion: reduce) { html.neon .more-cta .neon-arrow { animation: none; } }
@media (max-width: 700px) { html.neon .more-cta { padding: 20px 76px 20px 24px; } }

/* ===== Dezentes Wasserzeichen im Hintergrund: Adresse diagonal gekachelt, kaum sichtbar, erscheint aber in jedem Screenshot ===== */
html.neon body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 2; opacity: .05;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='260'%3E%3Ctext x='20' y='150' transform='rotate(-24 240 130)' font-family='monospace' font-size='15' letter-spacing='2' fill='white'%3E3d-druck-service-von-a-bis-z.de%3C/text%3E%3C/svg%3E");
}
@media print { html.neon body::after { display: none; } }

/* ===== PROTOTYP: Übersicht mit Mittelpunkt und Neon-Pfeilen ===== */
html.neon .uebersicht { padding: 40px 0 70px; }
html.neon .orad { position: relative; width: min(100%, 980px); aspect-ratio: 1 / 1; margin: 10px auto 0; }
html.neon .olines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
html.neon .oring { fill: none; stroke: rgba(var(--g), .18); stroke-width: 1.5; stroke-dasharray: 3 9; }
html.neon .spoke { stroke: var(--nc); stroke-width: 3; stroke-dasharray: 14 10; filter: drop-shadow(0 0 5px rgba(var(--g), .9)) drop-shadow(0 0 14px rgba(var(--g), .5)); animation: oflow 1.6s linear infinite; }
html.neon .pfh { fill: var(--no); filter: drop-shadow(0 0 6px var(--no)); }
@keyframes oflow { to { stroke-dashoffset: -24; } }
html.neon .ocenter { position: absolute; left: 50%; top: 50%; width: 32%; aspect-ratio: 1 / 1; transform: translate(-50%, -50%); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; text-decoration: none; padding: 6%;
  background: radial-gradient(circle at 50% 40%, rgba(var(--g), .20), rgba(2, 18, 26, .92) 70%); border: 2px solid var(--nc); color: #fff;
  box-shadow: 0 0 22px rgba(var(--g), .7), 0 0 60px rgba(var(--g), .35), inset 0 0 40px rgba(var(--g), .25); }
html.neon .ocenter .octitle { font-family: var(--display); text-transform: uppercase; letter-spacing: .08em; font-size: clamp(14px, 2.6vw, 28px); line-height: 1.15; text-shadow: 0 0 10px rgba(var(--g), .6); }
html.neon .ocenter .octitle.ac { color: var(--nc); }
html.neon .ocenter small { margin-top: 8px; font-size: clamp(9px, 1.2vw, 13px); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
html.neon .ocenter:hover { box-shadow: 0 0 30px var(--nc), 0 0 90px rgba(var(--g), .55), inset 0 0 50px rgba(var(--g), .35); }
html.neon .onode { position: absolute; width: 22%; transform: translate(-50%, -50%); text-align: center; text-decoration: none; color: #fff; padding: 10px 8px 12px; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--line); box-shadow: 0 0 16px rgba(var(--g), .15), inset 0 0 18px rgba(var(--g), .05); transition: box-shadow .2s, border-color .2s, transform .2s; }
html.neon .onode:hover { border-color: var(--nc); box-shadow: 0 0 28px rgba(var(--g), .5), inset 0 0 24px rgba(var(--g), .12); transform: translate(-50%, -52%); }
html.neon .onode .oimg { display: block; height: clamp(46px, 8vw, 92px); background: var(--nc); -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; filter: drop-shadow(0 0 6px rgba(var(--g), .7)); margin-bottom: 6px; }
html.neon .onode strong { display: block; font-family: var(--display); text-transform: uppercase; letter-spacing: .06em; font-size: clamp(11px, 1.7vw, 18px); line-height: 1.15; color: var(--nc); text-shadow: 0 0 8px rgba(var(--g), .5); }
html.neon .onode small { display: block; font-size: clamp(9px, 1.15vw, 13px); color: var(--muted); margin-top: 3px; line-height: 1.3; }
@media (max-width: 760px) {
  html.neon .orad { aspect-ratio: auto; display: grid; gap: 12px; }
  html.neon .olines { display: none; }
  html.neon .ocenter, html.neon .onode { position: static; transform: none; width: auto; }
  html.neon .ocenter { aspect-ratio: auto; border-radius: 14px; padding: 18px; }
  html.neon .onode:hover { transform: none; }
  html.neon .onode .oimg { height: 70px; }
  html.neon .onode strong { font-size: 16px; } html.neon .onode small { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { html.neon .spoke { animation: none; } }

/* Überblick: kleine Fassung als Teaser auf der Startseite */
html.neon .orad.orad-klein { width: min(100%, 700px); }
html.neon .teaser .onode small { display: none; }
html.neon .teaser .onode { width: 24%; padding: 6px 4px 8px; }
html.neon .oteaser-btn { text-align: center; margin: 14px 0 0; }
html.neon .uebersicht.teaser { padding: 30px 0 20px; }
@media (max-width: 760px) { html.neon .teaser .orad { display: none; } }
html.neon .orad.orad-klein { width: min(100%, 820px); }
html.neon .teaser .ocenter { width: 34%; padding: 3%; }
html.neon .teaser .ocenter .octitle { font-size: clamp(12px, 2.1vw, 22px); letter-spacing: .04em; white-space: nowrap; }
html.neon .teaser .ocenter small { font-size: clamp(8px, 1vw, 11px); letter-spacing: .12em; margin-top: 4px; }
html.neon .teaser .onode { width: 21%; }
html.neon .teaser .onode strong { font-size: clamp(10px, 1.5vw, 15px); }
html.neon .teaser .onode .oimg { height: clamp(36px, 6.5vw, 70px); }