/* ============================================================
   BOBEJ - MATRIX / IT THEME
   Wird NACH nicepage.css + index.css geladen und ueberschreibt
   die Optik. Nicepage-Markup bleibt unveraendert.
   ============================================================ */

:root {
  --mx-bg:        #03070a;
  --mx-bg-2:      #061013;
  --mx-panel:     rgba(6, 20, 16, .72);
  --mx-panel-2:   rgba(4, 12, 10, .90);
  --mx-green:     #00ff9c;
  --mx-green-dim: #12b877;
  --mx-green-dark:#053d2b;
  --mx-cyan:      #00e5ff;
  --mx-text:      #c9ffe9;
  --mx-muted:     #7fbfa5;
  --mx-line:      rgba(0, 255, 156, .22);
  --mx-line-hot:  rgba(0, 255, 156, .65);
  --mx-glow:      0 0 12px rgba(0, 255, 156, .45);
  --mx-glow-hot:  0 0 28px rgba(0, 255, 156, .75);
  --mx-mono:      "Share Tech Mono", "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
}

/* ---------- 1. Grundflaeche ---------- */

html { background: var(--mx-bg) !important; }

body,
body.u-body,
.u-body {
  background-color: var(--mx-bg) !important;
  background-image:
    radial-gradient(1200px 700px at 50% -10%, rgba(0,255,156,.10), transparent 60%),
    linear-gradient(rgba(0,255,156,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,156,.045) 1px, transparent 1px) !important;
  background-size: auto, 44px 44px, 44px 44px !important;
  background-attachment: fixed !important;
  color: var(--mx-text) !important;
}

::selection      { background: var(--mx-green); color: #001a10; }
::-moz-selection { background: var(--mx-green); color: #001a10; }

* { scrollbar-color: var(--mx-green-dim) var(--mx-bg-2); scrollbar-width: thin; }
::-webkit-scrollbar        { width: 11px; height: 11px; }
::-webkit-scrollbar-track  { background: var(--mx-bg-2); }
::-webkit-scrollbar-thumb  {
  background: linear-gradient(180deg, var(--mx-green), var(--mx-green-dark));
  border-radius: 8px;
  border: 2px solid var(--mx-bg-2);
}
::-webkit-scrollbar-thumb:hover { background: var(--mx-green); box-shadow: var(--mx-glow); }

/* ---------- 2. Hintergrund-Layer (Regen, Scanlines, Spotlight) ---------- */

#mx-rain {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; opacity: .34;
}

#mx-scan {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden;
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,.26) 0 1px, transparent 1px 3px),
    radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(0,0,0,.70) 100%);
}
#mx-scan::after {
  content: ""; position: absolute; left: 0; right: 0; height: 26vh;
  background: linear-gradient(180deg, transparent, rgba(0,255,156,.06), transparent);
  animation: mx-sweep 7.5s linear infinite;
}
@keyframes mx-sweep { from { top: -30vh; } to { top: 110vh; } }

/* Maus-Spotlight - folgt dem Cursor ueber die ganze Seite */
#mx-spot {
  position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background: radial-gradient(320px circle at var(--mx-x, -500px) var(--mx-y, -500px),
              rgba(0,255,156,.13), rgba(0,229,255,.06) 45%, transparent 70%);
  transition: opacity .35s ease;
}
body.mx-pointer #mx-spot { opacity: 1; }

.u-body > header,
.u-body > section,
.u-body > footer,
.u-body > div,
.u-body > nav { position: relative; z-index: 3; }

/* ---------- 3. Typografie ---------- */

h1, h2, h3, h4, h5, h6,
.u-text h1, .u-text h2, .u-text h3, .u-text h4, .u-text h5, .u-text h6 {
  font-family: var(--mx-mono) !important;
  letter-spacing: .03em !important;
  color: var(--mx-green) !important;
  text-shadow: 0 0 10px rgba(0,255,156,.35), 0 0 30px rgba(0,255,156,.12);
}

h1::before, h2::before {
  content: "// ";
  color: var(--mx-green-dim);
  font-weight: 400;
  opacity: .8;
}
.u-header h1::before, .u-header h2::before,
.u-footer h1::before, .u-footer h2::before,
.u-cookies-consent h1::before, .u-cookies-consent h2::before { content: none; }

p, li, span, label,
.u-text, .u-text p, .u-text li,
.u-text-body-alt-color, .u-grey-5, .u-white, .u-text-white {
  color: var(--mx-text) !important;
}

a, a.u-link { color: var(--mx-green) !important; transition: color .2s, text-shadow .2s; }
a:hover, a.u-link:hover { color: var(--mx-cyan) !important; text-shadow: var(--mx-glow); }

/* ---------- 4. Sektionen ---------- */

section.u-palette-1-base:before,
section.u-palette-2-dark-2:before,
section.u-palette-2-dark-3:before,
section.u-palette-4-dark-3:before,
section.u-grey-10:before,
section.u-grey-80:before {
  background-color: transparent !important;
}

.u-palette-2-dark-2, .u-palette-2-dark-3, .u-palette-4-dark-3,
.u-grey-10, .u-grey-80, .u-grey-90 { background-color: transparent !important; }

/* Halbtransparent, damit der Matrix-Regen dahinter sichtbar bleibt */
.u-section-2, .u-section-3, .u-section-4,
.u-section-6, .u-section-7, .u-section-8 {
  background-color: transparent !important;
  background-image: linear-gradient(180deg, rgba(3,10,8,.86), rgba(3,10,8,.58)) !important;
  border-top: 1px solid var(--mx-line);
  border-bottom: 1px solid var(--mx-line);
}

/* Foto-Sektionen: Gruen-Grading statt Blaustich, Fotos bleiben erhalten */
.u-section-1, .u-section-5 {
  background-blend-mode: luminosity, normal;
  background-color: #02100b !important;
  box-shadow: inset 0 0 240px 60px rgba(0,0,0,.9);
}
.u-section-1::after, .u-section-5::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(180deg, rgba(0,255,156,.10), rgba(0,20,14,.55));
  mix-blend-mode: screen;
}
.u-section-1 > *, .u-section-5 > * { position: relative; z-index: 1; }

/* ---------- 5. Header / Navigation ---------- */

.u-header {
  background: rgba(3,10,8,.82) !important;
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  border-bottom: 1px solid var(--mx-line);
  box-shadow: 0 1px 0 rgba(0,255,156,.10), 0 14px 40px rgba(0,0,0,.6);
  transition: box-shadow .3s, background-color .3s;
}
.u-header.mx-stuck {
  background: rgba(2,7,6,.94) !important;
  box-shadow: 0 1px 0 var(--mx-line-hot), 0 18px 50px rgba(0,0,0,.8);
}

.u-nav-link, .u-menu a {
  font-family: var(--mx-mono) !important;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--mx-text) !important;
  position: relative;
  padding-left: 1.15em !important;
  transition: color .18s ease, text-shadow .18s ease;
}
.u-nav-link::before {
  content: ">";
  position: absolute; left: 0; top: 50%;
  transform: translateY(-50%) translateX(-4px);
  color: var(--mx-green); opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
}
.u-nav-link::after {
  content: ""; position: absolute; left: 1.15em; right: 0; bottom: .1em; height: 1px;
  background: var(--mx-green); box-shadow: var(--mx-glow);
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
.u-nav-link:hover, .u-nav-link:focus { color: var(--mx-green) !important; text-shadow: var(--mx-glow); }
.u-nav-link:hover::before { opacity: 1; transform: translateY(-50%) translateX(0); }
.u-nav-link:hover::after  { transform: scaleX(1); }

.u-menu-hamburger .u-icon { color: var(--mx-green) !important; }
.u-sidenav { background: var(--mx-panel-2) !important; border-right: 1px solid var(--mx-line); }

/* ---------- 6. Buttons ---------- */

.u-btn, .u-button-style, a.u-btn, button.u-btn, input[type="submit"] {
  font-family: var(--mx-mono) !important;
  text-transform: uppercase !important;
  letter-spacing: .14em !important;
  color: var(--mx-green) !important;
  background-color: rgba(0,255,156,.06) !important;
  background-image: none !important;
  border: 1px solid var(--mx-green) !important;
  border-radius: 2px !important;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color .22s, background-color .22s, box-shadow .22s, transform .18s;
}
/* Nicepage faerbt Buttons ueber .u-button-style.u-palette-x-y ein -
   diese Regel ist spezifischer und holt sie ins Matrix-Gruen zurueck. */
.u-btn.u-button-style[class*="u-palette"],
.u-btn.u-button-style[class*="u-grey"],
.u-btn.u-button-style[class*="u-white"],
.u-btn.u-button-style[class*="u-border-"] {
  color: var(--mx-green) !important;
  background-color: rgba(0,255,156,.06) !important;
  border: 1px solid var(--mx-green) !important;
}
.u-btn.u-button-style[class*="u-palette"]:hover,
.u-btn.u-button-style[class*="u-grey"]:hover,
.u-btn.u-button-style[class*="u-white"]:hover,
.u-btn.u-button-style[class*="u-border-"]:hover,
.u-btn.u-button-style[class*="u-palette"]:focus,
.u-btn.u-button-style[class*="u-grey"]:focus,
.u-btn.u-button-style[class*="u-white"]:focus,
.u-btn.u-button-style[class*="u-border-"]:focus {
  color: #001a10 !important;
  background-color: var(--mx-green) !important;
}
/* Textlinks im Button-Gewand nicht mit einem Rahmen versehen */
.u-btn.u-button-link.u-none,
.u-btn.u-button-link.u-none:hover {
  background-color: transparent !important;
  border: 0 !important;
  color: var(--mx-green) !important;
  box-shadow: none !important;
}

.u-btn::before, .u-button-style::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(120deg, transparent, rgba(0,255,156,.85), transparent);
  transform: translateX(-110%);
  transition: transform .55s cubic-bezier(.2,.8,.2,1);
}
.u-btn:hover, .u-button-style:hover,
.u-btn:focus, .u-button-style:focus {
  color: #001a10 !important;
  background-color: var(--mx-green) !important;
  box-shadow: var(--mx-glow-hot), inset 0 0 12px rgba(255,255,255,.25) !important;
  transform: translateY(-2px);
}
.u-btn:hover::before, .u-button-style:hover::before { transform: translateX(110%); }
.u-btn:active, .u-button-style:active { transform: translateY(0) scale(.98); }

/* ---------- 7. Karten / Container ---------- */

.u-container-style,
.u-repeater-item,
.u-list-item {
  background-color: var(--mx-panel) !important;
  background-image: none !important;
  border: 1px solid var(--mx-line) !important;
  border-radius: 3px !important;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: transform .3s cubic-bezier(.2,.8,.2,1),
              border-color .3s, box-shadow .3s, background-color .3s;
}
.u-header .u-container-style,
.u-footer .u-container-style,
.u-cookies-consent .u-container-style {
  background-color: transparent !important;
  border: 0 !important;
  backdrop-filter: none;
}

/* Terminal-Eckklammern */
.u-repeater-item::before, .u-list-item::before,
.u-repeater-item::after,  .u-list-item::after {
  content: ""; position: absolute; width: 16px; height: 16px;
  border: 2px solid var(--mx-green); opacity: 0; pointer-events: none;
  transition: opacity .3s, transform .3s;
}
.u-repeater-item::before, .u-list-item::before {
  top: 7px; left: 7px; border-right: 0; border-bottom: 0; transform: translate(6px, 6px);
}
.u-repeater-item::after, .u-list-item::after {
  bottom: 7px; right: 7px; border-left: 0; border-top: 0; transform: translate(-6px, -6px);
}
.u-repeater-item:hover::before, .u-list-item:hover::before,
.u-repeater-item:hover::after,  .u-list-item:hover::after { opacity: 1; transform: translate(0,0); }

.u-container-style:hover,
.u-repeater-item:hover,
.u-list-item:hover {
  border-color: var(--mx-line-hot) !important;
  background-color: rgba(6,26,20,.85) !important;
  box-shadow: 0 0 0 1px rgba(0,255,156,.18),
              0 18px 45px rgba(0,0,0,.6),
              0 0 34px rgba(0,255,156,.18) !important;
}

/* Leere Nicepage-Layoutzellen bleiben unsichtbar */
.u-container-style.mx-plain,
.u-container-style.mx-plain:hover {
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.mx-tilt {
  transform: perspective(900px) rotateX(var(--mx-rx, 0deg)) rotateY(var(--mx-ry, 0deg)) translateY(-4px);
  will-change: transform;
}

/* Lichtspur, die dem Cursor innerhalb der Karte folgt */
.mx-shine::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(180px circle at var(--mx-cx, 50%) var(--mx-cy, 50%),
              rgba(0,255,156,.16), transparent 65%);
}

/* ---------- 8. Bilder ---------- */

.u-image, .u-image img, img.u-image {
  transition: filter .45s ease, transform .45s cubic-bezier(.2,.8,.2,1),
              box-shadow .45s ease, border-color .3s;
}
.u-section-2 .u-image, .u-section-3 .u-image, .u-section-4 .u-image,
.u-section-6 .u-image, .u-section-7 .u-image,
.u-repeater-item .u-image, .u-list-item .u-image {
  filter: grayscale(.75) contrast(1.08) brightness(.85) sepia(.35) hue-rotate(78deg) saturate(1.9);
  border: 1px solid var(--mx-line);
}
.u-section-2 .u-image:hover, .u-section-3 .u-image:hover, .u-section-4 .u-image:hover,
.u-section-6 .u-image:hover, .u-section-7 .u-image:hover,
.u-repeater-item:hover .u-image, .u-list-item:hover .u-image {
  filter: none;
  transform: scale(1.03);
  border-color: var(--mx-line-hot);
  box-shadow: 0 0 28px rgba(0,255,156,.35);
}
.u-image-circle { box-shadow: 0 0 0 1px var(--mx-line), 0 0 26px rgba(0,255,156,.18); }

/* Logo bleibt farbig, bekommt nur Glow */
.u-header .u-image,
img[src*="Bobejlogo"], img[src*="logo"] {
  filter: drop-shadow(0 0 6px rgba(0,255,156,.35)) !important;
  border: 0 !important;
  transition: filter .3s, transform .3s;
}
.u-header .u-image:hover,
img[src*="Bobejlogo"]:hover, img[src*="logo"]:hover {
  filter: drop-shadow(0 0 18px rgba(0,255,156,.85)) !important;
  transform: translateY(-2px) scale(1.02);
}

/* ---------- 9. SVG / Shapes ---------- */

.u-svg-content, .u-icon svg, .u-shape-svg svg {
  fill: var(--mx-green) !important;
  transition: filter .3s;
}
.u-svg-link:hover .u-svg-content { filter: drop-shadow(0 0 10px rgba(0,255,156,.8)); }
.u-shape, .u-shape-rectangle {
  background-color: rgba(0,255,156,.08) !important;
  border: 1px solid var(--mx-line) !important;
}
/* Deko-Kreise werden zu leuchtenden Ringen */
.u-shape-circle {
  background-color: transparent !important;
  background-image: radial-gradient(circle, rgba(0,255,156,.14) 0%, transparent 68%) !important;
  border: 1px solid var(--mx-line-hot) !important;
  box-shadow: 0 0 26px rgba(0,255,156,.20), inset 0 0 40px rgba(0,255,156,.10) !important;
  animation: mx-pulse 4.5s ease-in-out infinite;
}
@keyframes mx-pulse {
  0%, 100% { box-shadow: 0 0 22px rgba(0,255,156,.16), inset 0 0 34px rgba(0,255,156,.08); }
  50%      { box-shadow: 0 0 40px rgba(0,255,156,.34), inset 0 0 52px rgba(0,255,156,.16); }
}

/* ---------- 10. Formular ---------- */

.u-input, .u-field-input,
input.u-input, textarea.u-input, select.u-input {
  font-family: var(--mx-mono) !important;
  background-color: rgba(0,20,14,.75) !important;
  color: var(--mx-text) !important;
  border: 1px solid var(--mx-line) !important;
  border-radius: 2px !important;
  transition: border-color .25s, box-shadow .25s, background-color .25s;
}
.u-input::placeholder { color: rgba(127,191,165,.55); }
.u-input:hover { border-color: rgba(0,255,156,.45) !important; }
.u-input:focus {
  outline: none !important;
  border-color: var(--mx-green) !important;
  background-color: rgba(0,32,22,.9) !important;
  box-shadow: 0 0 0 1px var(--mx-green), 0 0 22px rgba(0,255,156,.28) !important;
}
.u-label, label {
  font-family: var(--mx-mono) !important;
  color: var(--mx-muted) !important;
  letter-spacing: .08em;
}
.u-form-send-success { color: var(--mx-green) !important; }
.u-form-send-error   { color: #ff5d6c !important; }

/* ---------- 11. Footer + Cookie-Banner ---------- */

.u-footer {
  background: linear-gradient(180deg, rgba(3,10,8,.85), rgba(1,5,4,.98)) !important;
  border-top: 1px solid var(--mx-line);
  font-family: var(--mx-mono);
}
.u-footer .u-text { color: var(--mx-muted) !important; }

.u-cookies-consent, #cookie-popup {
  background: var(--mx-panel-2) !important;
  border-top: 1px solid var(--mx-line-hot) !important;
  box-shadow: 0 -10px 40px rgba(0,0,0,.75);
  font-family: var(--mx-mono);
}

/* ---------- 12. Effekte ---------- */

.mx-reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1);
}
.mx-reveal.mx-in { opacity: 1; transform: none; }

.mx-glitch { position: relative; }
.mx-glitch:hover { animation: mx-shake .28s steps(2) 2; }
.mx-glitch:hover::after {
  content: attr(data-mx-text);
  position: absolute; left: 0; top: 0; width: 100%;
  color: var(--mx-cyan); mix-blend-mode: screen; pointer-events: none;
  clip-path: inset(0 0 55% 0); transform: translate(2px, -1px);
}
@keyframes mx-shake {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-1.5px, 1px); }
  50%  { transform: translate(1.5px, -1px); }
  75%  { transform: translate(-1px, -1px); }
  100% { transform: translate(0, 0); }
}

.mx-caret::after {
  content: "_"; color: var(--mx-green); margin-left: .12em;
  animation: mx-blink 1.05s step-end infinite;
}
@keyframes mx-blink { 50% { opacity: 0; } }

/* Zeichen-Spur hinter dem Mauszeiger */
.mx-trail {
  position: fixed; z-index: 9998; pointer-events: none;
  font-family: var(--mx-mono); font-size: 15px; line-height: 1;
  color: var(--mx-green); text-shadow: var(--mx-glow);
  animation: mx-fall 1.15s linear forwards;
}
@keyframes mx-fall {
  from { opacity: .95; transform: translateY(0) scale(1); }
  to   { opacity: 0;   transform: translateY(46px) scale(.7); }
}

#mx-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--mx-green-dark), var(--mx-green), var(--mx-cyan));
  box-shadow: var(--mx-glow);
  z-index: 9999; pointer-events: none;
  transition: width .1s linear;
}

.mx-status {
  position: relative; z-index: 3;
  font-family: var(--mx-mono); font-size: 12px; letter-spacing: .1em;
  color: var(--mx-green-dim); text-align: center; padding: 10px 12px;
  border-top: 1px dashed var(--mx-line);
  background: rgba(1,5,4,.9);
}
.mx-status b { color: var(--mx-green); font-weight: 400; }
.mx-status span { opacity: .75; }

/* ---------- 13. Barrierefreiheit / Mobile ---------- */

@media (prefers-reduced-motion: reduce) {
  #mx-rain, #mx-scan::after { display: none !important; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .mx-reveal { opacity: 1 !important; transform: none !important; }
}

@media (max-width: 767px) {
  #mx-rain { opacity: .22; }
  #mx-spot { display: none; }
}

/* ============================================================
   14. Letzte Instanz
   Nicepage vergibt Farben ueber Kombinationen wie
   .u-input.u-grey-5 oder .u-btn.u-text-body-alt-color. Diese
   Regeln stehen bewusst am Ende und sind spezifischer.
   ============================================================ */

.u-body h1, .u-body h2, .u-body h3, .u-body h4, .u-body h5, .u-body h6,
.u-body h1.u-text, .u-body h2.u-text, .u-body h3.u-text,
.u-body h4.u-text, .u-body h5.u-text, .u-body h6.u-text {
  color: var(--mx-green) !important;
  font-family: var(--mx-mono) !important;
}

.u-body .u-btn,
.u-body .u-button-style,
.u-body a.u-btn.u-button-style,
.u-body .u-btn.u-button-style[class*="u-text-"] {
  color: var(--mx-green) !important;
}
.u-body .u-btn:hover,
.u-body .u-button-style:hover,
.u-body a.u-btn.u-button-style:hover,
.u-body .u-btn.u-button-style[class*="u-text-"]:hover {
  color: #001a10 !important;
}

.u-body .u-input,
.u-body input.u-input[class*="u-grey"],
.u-body input.u-input[class*="u-white"],
.u-body textarea.u-input[class*="u-grey"],
.u-body textarea.u-input[class*="u-white"],
.u-body select.u-input[class*="u-grey"],
.u-body .u-field-input[class*="u-grey"] {
  background-color: rgba(0, 20, 14, .78) !important;
  color: var(--mx-text) !important;
  border: 1px solid var(--mx-line) !important;
}
.u-body .u-input:focus,
.u-body input.u-input[class*="u-grey"]:focus,
.u-body textarea.u-input[class*="u-grey"]:focus {
  background-color: rgba(0, 32, 22, .92) !important;
  border-color: var(--mx-green) !important;
  box-shadow: 0 0 0 1px var(--mx-green), 0 0 22px rgba(0, 255, 156, .28) !important;
}