/* ============================================== THEME VARIABLES ============================================== */ /* Default (Dark) Theme */
:root {
  --dm-bg: #000000;
  --dm-bg-soft: #050505;
  --dm-text: #ffffff;
  --dm-text-soft: #d1d1d1;
  --dm-accent-gold: #c9944c;
  --dm-accent-gold-text: #b07d38;
  --dm-accent-blue: #00687f;
  --dm-border: #1a1a1a;
  --dm-card-bg: rgba(10, 10, 10, 0.95);
  --dm-card-blur-bg: rgba(5, 5, 5, 0.85);
  --dm-wave-opacity: 0.12;
} /* ============================================== SOFT LIGHT MODE — (funktionierend & sauber) ============================================== */
.light {
  --dm-bg: #f6f6f6;
  --dm-bg-soft: #ededed;
  --dm-text: #0f0f0f;
  --dm-text-soft: #2d2d2d;
  --dm-accent-gold: #c9944c;
  --dm-accent-gold-text: #805f2e;
  --dm-accent-blue: #00687f;
  --dm-border: #d4d4d4;
  --dm-card-bg: rgba(255, 255, 255, 0.75);
  --dm-card-blur-bg: rgba(255, 255, 255, 0.5);
  --dm-wave-opacity: 0.08;
} /* ============================================== GLOBAL PAGE LAYOUT ============================================== */
body {
  background-color: var(--dm-bg);
  color: var(--dm-text);
  transition: background 0.4s ease, color 0.4s ease;
  max-width: 100%;
  overflow-x: hidden;
}
.dm-container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1.5rem;
} /* ============================================== HEADER ============================================== */
header {
  background-color: rgba(0, 0, 0, 0.6);
}
.light header {
  background-color: rgba(255, 255, 255, 0.8);
}
.logo-dark {
  display: block;
}
.logo-light {
  display: none;
}
.light .logo-dark {
  display: none;
}
.light .logo-light {
  display: block;
} /* ============================================== DM CARD ============================================== */
.dm-card {
  background: var(--dm-card-bg);
  border-radius: 1.5rem;
  border: 1px solid var(--dm-border);
  backdrop-filter: blur(14px);
  transition: background 0.4s ease, border-color 0.4s ease;
}
.glass {
  background-color: var(--dm-card-blur-bg);
  backdrop-filter: blur(14px);
} /* ============================================== TEXT / BORDER UTILS ============================================== */
.text-dmwhite {
  color: var(--dm-text);
}
.text-dmgold {
  color: var(--dm-accent-gold);
}
.text-dmgoldtext {
  color: var(--dm-accent-gold-text);
}
.border-dm {
  border-color: var(--dm-border);
} /* ============================================== BACKGROUNDS ============================================== */
.bg-dmblack {
  background: var(--dm-bg);
}
.bg-dmsoft {
  background: var(--dm-bg-soft);
}
.bg-dmgold {
  background: var(--dm-accent-gold);
}
.bg-dmblue {
  background: var(--dm-accent-blue);
} /* ============================================== OVERRIDES — DARK BACKGROUNDS (Tailwind Fix) ============================================== */
.bg-black,
.bg-[#050505],
.bg-neutral-900,
.bg-neutral-950 {
  background-color: var(--dm-bg) !important;
}
.text-neutral-300,
.text-neutral-400,
.text-neutral-500 {
  color: var(--dm-text-soft) !important;
} /* ============================================== SCROLLBAR (Dark + Light) ============================================== */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--dm-bg-soft);
}
::-webkit-scrollbar-thumb {
  background-color: var(--dm-accent-gold);
  border-radius: 20px;
  border: 2px solid var(--dm-bg-soft);
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--dm-accent-blue);
} /* Chrome/Edge/Safari minimal */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
} /* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--dm-accent-gold) var(--dm-bg-soft);
} /* Light Mode Scrollbar */
.light ::-webkit-scrollbar-track {
  background: #ffffff;
}
.light ::-webkit-scrollbar-thumb {
  background: var(--dm-accent-blue);
  border-color: #ffffff;
}
.light ::-webkit-scrollbar-thumb:hover {
  background: var(--dm-accent-gold);
} /* ============================ LEFT-HANDED MODE (FIXED) ============================ */ /* Dropdown bei Left-Handed links statt rechts */ /* ============================ DROPDOWN BACKGROUND FIX ============================ */ /* Kein Transparenz-Gefuckel */
#settings-dropdown {
  background: var(--dm-bg); /* Opak, wie Header */
  backdrop-filter: none; /* Kein blur */
  border: 1px solid var(--dm-border);
}
html.light #settings-dropdown {
  background: #ffffff; /* helles theme */
} /* ====================================================== DESERTMIND BUTTONS — CI-PERFECT (Gold <-> Blue) ====================================================== */
.dm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  padding: 0.75rem 1.7rem;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
  text-decoration: none;
} /* ========== PRIMARY (Gold) ========== */
.dm-btn-gold {
  background: var(--dm-accent-gold);
  color: #000;
  border: 1px solid var(--dm-accent-gold-text);
}
.dm-btn-gold:hover {
  background: var(--dm-accent-blue);
  color: var(--dm-text);
  border-color: var(--dm-accent-blue);
  transform: translateY(-2px);
} /* ========== SECONDARY (Blue) ========== */
.dm-btn-blue {
  background: var(--dm-accent-blue);
  color: #fff;
  border: 1px solid var(--dm-accent-blue);
}
.dm-btn-blue:hover {
  background: var(--dm-accent-gold);
  color: #000;
  border-color: var(--dm-accent-gold);
  transform: translateY(-2px);
} /* ========== OUTLINE BUTTON (neutral) ========== */
.dm-btn-outline {
  background: transparent;
  border: 1px solid var(--dm-border);
  color: var(--dm-text-soft);
}
.dm-btn-outline:hover {
  color: var(--dm-accent-blue);
  border-color: var(--dm-accent-blue);
  transform: translateY(-2px);
} /* ========== Shine Effect (clean, subtle) ========== */
.dm-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.35),
    transparent
  );
  transform: translateX(-120%);
  transition: transform 0.5s ease;
}
.dm-btn:hover::after {
  transform: translateX(120%);
} /* Focus Accessibility */
.dm-btn:focus {
  outline: 2px solid var(--dm-accent-blue);
  outline-offset: 3px;
} /* ========================================================== EXAKT DIE 3 CTA BUTTONS — INDIVIDUELLE CI-HOVER ========================================================== */ /* ------------------------------------------ 1) PROJEKT ANFRAGEN (alle Varianten) ------------------------------------------ */ /* Header + Hero + andere Stellen (Gold-Buttons mit Link #contact) */
a[href="#contact"].bg-dmgold,
a[href="#contact"].hover\:bg-dmblue {
  transition: all 0.25s ease;
}
a[href="#contact"].bg-dmgold:hover {
  background-color: var(--dm-accent-blue) !important;
  color: var(--dm-text) !important;
  transform: translateY(-2px);
}
a[href="#contact"].bg-dmgold:active {
  transform: translateY(0);
} /* ------------------------------------------ 2) LEISTUNGEN ANSEHEN (Outline-CTA) ------------------------------------------ */
a[href="#services"] {
  transition: all 0.25s ease;
}
a[href="#services"].border-\[var\(--dm-border\)\]:hover {
  border-color: var(--dm-accent-blue) !important;
  color: var(--dm-accent-blue) !important;
  background-color: rgba(0, 104, 127, 0.22) !important;
  transform: translateY(-2px);
}
a[href="#services"]:active {
  transform: translateY(0);
} /* ------------------------------------------ 3) NACHRICHT SENDEN (Formular-Button) ------------------------------------------ */
button[type="submit"].bg-dmgold {
  transition: all 0.25s ease;
}
button[type="submit"].bg-dmgold:hover {
  background-color: var(--dm-accent-blue) !important;
  color: var(--dm-text) !important;
  transform: translateY(-2px);
}
button[type="submit"].bg-dmgold:active {
  transform: translateY(0);
} /* ========================================================== LIGHT MODE CTA & BADGE FIXES (Farbkontrast Korrektur) ========================================================== */ /* "wird Struktur" Badge – weiß im Light Mode */
html.light .bg-dmblue .text-dmwhite,
html.light .bg-dmblue span {
  color: #ffffff !important;
} /* CTA: "Projekt anfragen" (Gold Buttons) */
html.light a[href="#contact"].bg-dmgold {
  color: #ffffff !important;
} /* CTA: "Nachricht senden" (Gold Buttons) */
html.light button[type="submit"].bg-dmgold {
  color: #ffffff !important;
} /* ========================================================== OUTLINE CTA – Sichtbarkeit & Lesbarkeit Fix (für "Leistungen ansehen") ========================================================== */ /* Basis-Outline sichtbar machen im Dark Mode */
html.dark a[href="#services"].border-\[var\(--dm-border\)\] {
  border-color: rgba(255, 255, 255, 0.14) !important; /* sanft, sichtbar */
  color: var(--dm-text-soft); /* leicht hellere Schrift */
} /* Light Mode Basis */
html.light a[href="#services"].border-\[var\(--dm-border\)\] {
  border-color: rgba(0, 0, 0, 0.16) !important; /* leicht stärker */
  color: var(--dm-text-soft);
} /* Hover – DARK MODE */
html.dark a[href="#services"].border-\[var\(--dm-border\)\]:hover {
  border-color: var(--dm-accent-blue) !important;
  background-color: rgba(0, 104, 127, 0.3) !important; /* 30% Deckkraft */
  color: #ffffff !important; /* WICHTIG: Lesbarkeit */
  transform: translateY(-2px);
} /* Hover – LIGHT MODE */
html.light a[href="#services"].border-\[var\(--dm-border\)\]:hover {
  border-color: var(--dm-accent-blue) !important;
  background-color: rgba(0, 104, 127, 0.12) !important; /* feiner */
  color: var(--dm-text) !important; /* dunkler Text, bessere Lesbarkeit */
  transform: translateY(-2px);
} /* Active State */
a[href="#services"].border-\[var\(--dm-border\)\]:active {
  transform: translateY(0);
} /* ========================================================== MODERNER FOOTER – VEREDLUNG ========================================================== */
footer {
  background: var(--dm-bg);
  transition: background 0.35s ease, color 0.35s ease;
} /* Logo Animation */
.footer-logo img {
  transition: transform 0.35s ease, opacity 0.35s ease;
}
.footer-logo:hover img {
  transform: translateY(-2px);
  opacity: 0.9;
} /* Navigation */
.footer-nav a {
  transition: color 0.25s ease, transform 0.25s ease;
}
.footer-nav a:hover {
  color: var(--dm-accent-gold);
  transform: translateX(4px);
} /* Social Icons */
.footer-social a svg {
  transition: transform 0.25s ease, stroke 0.25s ease;
}
.footer-social a:hover svg {
  transform: translateY(-2px) scale(1.08);
  stroke: var(--dm-accent-gold);
} /* Light Mode Footer */
html.light footer {
  background: #f2f2f2;
}
html.light .footer-nav a:hover {
  color: var(--dm-accent-blue);
}
html.light .footer-social a:hover svg {
  stroke: var(--dm-accent-blue);
} /* ========================================================== FOOTER C – Modern Brand Style ========================================================== */
footer {
  background: var(--dm-bg);
  transition: background 0.35s ease, color 0.35s ease;
} /* Logo Hover */
.footer-logo img {
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.footer-logo:hover img {
  transform: translateY(-2px);
  opacity: 0.9;
} /* Navigation */
.footer-nav a {
  color: var(--dm-text-soft);
  transition: color 0.25s ease, transform 0.25s ease;
}
.footer-nav a:hover {
  color: var(--dm-accent-gold);
  transform: translateX(4px);
} /* Kontaktbox */
.footer-contact svg {
  transition: stroke 0.25s ease, transform 0.25s ease;
}
.footer-contact a {
  transition: color 0.25s ease;
}
.footer-contact a:hover svg {
  stroke: var(--dm-accent-gold);
  transform: translateX(3px);
}
.footer-contact a:hover {
  color: var(--dm-accent-gold);
} /* Social Icons */
.footer-social a svg {
  transition: transform 0.25s ease, stroke 0.25s ease;
}
.footer-social a:hover svg {
  transform: translateY(-2px) scale(1.08);
  stroke: var(--dm-accent-gold);
} /* Light Mode */
html.light footer {
  background: #f2f2f2;
}
html.light .footer-nav a:hover {
  color: var(--dm-accent-blue);
}
html.light .footer-social a:hover svg,
html.light .footer-contact a:hover svg {
  stroke: var(--dm-accent-blue);
}
html.light .footer-contact a:hover {
  color: var(--dm-accent-blue);
} /* Einheitlicher Hover für Footer-Navigation */
footer .footer-nav a {
  color: var(--dm-text-soft);
  transition: color 0.25s ease;
}
footer .footer-nav a:hover {
  color: var(--dm-accent-gold) !important;
} /* Einheitlicher Hover für alle Footer-Links */
footer a {
  color: var(--dm-text-soft);
  transition: color 0.25s ease;
}
footer a:hover {
  color: var(--dm-accent-gold) !important;
} /* ============================================ SCROLL TO TOP BUTTON ============================================ */
#toTopBtn {
  transform: translateY(20px);
}
#toTopBtn.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
} /* Dark/Light Mode handle */
html.light #toTopBtn {
  background: var(--dm-accent-blue);
  color: #fff;
}
html.light #toTopBtn:hover {
  background: var(--dm-accent-gold);
  color: #000;
} /* Hover motion */
#toTopBtn:hover svg {
  transform: translateY(-2px);
  transition: transform 0.25s ease;
} /* Scroll To Top Button */
#toTopBtn {
  transform: translateY(20px);
}
#toTopBtn.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
} /* Light Mode Variante */
html.light #toTopBtn {
  background: var(--dm-accent-blue);
  color: #fff;
}
html.light #toTopBtn:hover {
  background: var(--dm-accent-gold);
  color: #000;
} /* SETTINGS SWITCH FIX */ /* Zentriert den weißen Kreis vertikal */
.settings-switch,
.settings-switch * {
  line-height: 0;
} /* Basis */
.settings-switch .switch-track {
  position: relative;
  width: 42px;
  height: 22px;
  background: var(--dm-border);
  border-radius: 9999px;
  transition: background 0.2s ease;
} /* Kreis */
.settings-switch .switch-thumb {
  position: absolute;
  top: 50%;
  left: 2px;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  background: white;
  border-radius: 50%;
  transition: all 0.25s ease;
} /* AKTIV → CI-blau + Kreis verschiebt */
.settings-switch input:checked + .switch-track {
  background: var(--dm-accent-blue);
}
.settings-switch input:checked + .switch-track .switch-thumb {
  left: calc(100% - 20px);
  background: var(--dm-accent-blue);
  border: 2px solid white;
} /* ================================================ */ /* LEFT HAND MODE (Aktiv durch class="lefty" am 
<body>) */ /* ================================================ */
body.lefty header .dm-header-inner {
  flex-direction: row-reverse;
} /* Logo & Title rechts statt links */
body.lefty header .dm-header-inner a {
  flex-direction: row-reverse;
  text-align: right;
} /* Settings-Wrapper wird an die linke Seite gespiegelt */
body.lefty #settings-wrapper {
  right: auto !important;
  left: 0 !important;
} /* Settings-Menü soll nach LINKS ausklappen */
body.lefty #settings-menu {
  right: auto !important;
  left: 0 !important;
} /* Innerer Text im Menü bleibt links (besser lesbar) */
body.lefty #settings-menu p,
body.lefty #settings-menu label {
  text-align: left;
} /* Für Mobile – Header weiterhin spiegeln */
@media (max-width: 768px) {
  body.lefty header .dm-header-inner {
    flex-direction: row-reverse;
  }
} /* ========================================= */ /* LEFT-HANDED MODE (GLOBAL) */ /* ========================================= */ /* Seitenrichtung spiegeln */ /* Header spiegeln */ /* Logo rechts */ /* Menü-Navigation rechts ausrichten */ /* SETTINGS-BUTTON links statt rechts */ /* SETTINGS-DROPDOWN nach links öffnen */ /* Aber INHALT trotzdem normal lesen (LTR) */ /* CTA im Header nach links spiegeln */ /* Mobile */
@media (max-width: 768px) {
} /* Scroll-To-Top Sichtbarkeit */
#toTopBtn {
  transform: translateY(8px);
}
#toTopBtn.show {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0);
} /* ========================================================== CTA BUTTONS – GLOBAL, KORRIGIERT & FUNKTIONIEREND ========================================================== */ /* Basis: Alle Gold-Buttons sauber animieren */
a.bg-dmgold {
  transition: all 0.25s ease;
} /* Hover für ALLE Gold-Buttons */
a.bg-dmgold:hover {
  background-color: var(--dm-accent-blue) !important;
  color: var(--dm-text) !important; /* Dark Mode Text */
  transform: translateY(-2px);
} /* Active State */
a.bg-dmgold:active {
  transform: translateY(0);
} /* ========================================== LIGHT MODE FIXES ========================================== */ /* Normaler Zustand im Light-Mode → Text weiß */
html.light a.bg-dmgold {
  color: #ffffff !important;
} /* Hover im Light-Mode → Text soll WEISS bleiben */
html.light a.bg-dmgold:hover {
  color: #ffffff !important;
} /* ============================================ HEADER NAV HOVER – Premium Desertmind Style ============================================ */
header nav a {
  transition: color 0.25s ease, transform 0.25s ease;
}
header nav a:hover {
  color: var(--dm-accent-gold) !important;
  transform: translateY(-1px);
} /* ============================================ HERO– Premium Desertmind Style ============================================ */ /* --- WRAPPER (isolation root) --- */
.dmx-hero-wrapper {
  position: relative;
  padding: 6rem 1.5rem 5rem;
  overflow: hidden;
  font-family: inherit; /* übernimmt deine globale Schrift */
} /* GRID */
.dmx-hero-wrapper .dmx-hero-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 3.5rem;
  align-items: center;
}
@media (max-width: 900px) {
  .dmx-hero-wrapper .dmx-hero-inner {
    grid-template-columns: 1fr;
  }
} /* TEXT */
.dmx-hero-wrapper .dmx-eyebrow {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.8;
  margin-bottom: 0.5rem;
}
.dmx-hero-wrapper h1 {
  font-size: clamp(2.4rem, 3vw + 1rem, 3.4rem);
  line-height: 1.08;
  margin-bottom: 1rem;
}
.dmx-hero-wrapper .dmx-hero-sub {
  max-width: 32rem;
  margin-bottom: 1.8rem;
  opacity: 0.9;
} /* CTA */
.dmx-hero-wrapper .dmx-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-bottom: 1.5rem;
}
.dmx-hero-wrapper .dmx-btn-primary,
.dmx-hero-wrapper .dmx-btn-ghost {
  padding: 0.8rem 1.4rem;
  border-radius: 999px;
  font-size: 0.95rem;
  text-decoration: none;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.dmx-hero-wrapper .dmx-btn-primary {
  background: linear-gradient(135deg, #4f46e5, #22c1c3);
  color: #fff;
}
.dmx-hero-wrapper .dmx-btn-primary:hover {
  transform: translateY(-1px);
}
.dmx-hero-wrapper .dmx-btn-ghost {
  background: rgba(15, 23, 42, 0.05);
  border-color: rgba(148, 163, 184, 0.4);
}
.dmx-hero-wrapper .dmx-btn-ghost:hover {
  background: rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
} /* VISUAL */
.dmx-hero-wrapper .dmx-hero-visual {
  position: relative;
  height: 340px;
  perspective: 1200px;
}
@media (max-width: 900px) {
  .dmx-hero-wrapper .dmx-hero-visual {
    order: -1;
  }
} /* ========================================= */ /* REFINED MODULAR WEBSITE BUILDER (no hover) */ /* ========================================= */
.dmx-buildrefine {
  position: relative;
  perspective: 1400px;
  transform-style: preserve-3d;
} /* ---------- MAIN CARD ---------- */
.dmx-ref-main {
  position: relative;
  width: 100%;
  padding: 20px;
  border-radius: 20px;
  background: var(--dm-card-blur-bg);
  border: 1px solid var(--dm-border);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.32);
  transform-style: preserve-3d;
  transform: rotateY(-10deg) rotateX(6deg) translateZ(55px);
  animation: dmx-ref-float 9s ease-in-out infinite;
}
@keyframes dmx-ref-float {
  0%,
  100% {
    transform: rotateY(-10deg) rotateX(6deg) translateZ(55px);
  }
  50% {
    transform: rotateY(-7deg) rotateX(8deg) translateZ(70px);
  }
} /* HEADER BAR */
.dmx-ref-header {
  height: 10px;
  border-radius: 6px;
  background: var(--dm-text-soft);
  opacity: 0.3;
  margin-bottom: 14px;
} /* TEXTLINES */
.dmx-ref-textline {
  height: 8px;
  border-radius: 4px;
  background: var(--dm-text-soft);
  opacity: 0.22;
  margin-bottom: 10px;
} /* CONTENT BLOCKS */
.dmx-ref-block {
  height: 48px;
  background: var(--dm-bg);
  border-radius: 14px;
  border: 1px solid var(--dm-border);
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}
.dmx-ref-block.medium {
  height: 36px;
}
.dmx-ref-block.small {
  height: 26px;
} /* Subtle shimmer (calm) */
.dmx-ref-block::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    var(--dm-text-soft),
    transparent
  );
  opacity: 0.1;
  animation: dmx-ref-slide 4.4s ease-in-out infinite;
}
@keyframes dmx-ref-slide {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
} /* CAPTION */
.dmx-ref-caption {
  font-size: 11px;
  margin-top: 10px;
  line-height: 1.4;
  opacity: 0.7;
  color: var(--dm-text-soft);
} /* ---------- FLOATING MODULES ---------- */
.dmx-ref-module {
  position: absolute;
  background: var(--dm-card-blur-bg);
  border: 1px solid var(--dm-border);
  border-radius: 14px;
  padding: 10px 14px;
  backdrop-filter: blur(12px);
  transform-style: preserve-3d;
  width: 130px;
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.32);
  animation: dmx-ref-float-small 10s ease-in-out infinite;
}
@keyframes dmx-ref-float-small {
  0%,
  100% {
    transform: translateZ(40px);
  }
  50% {
    transform: translateZ(62px);
  }
} /* positions */
.mod-a {
  top: 6%;
  right: -4%;
}
.mod-b {
  bottom: 8%;
  left: -4%;
} /* chips */
.dmx-ref-chip {
  display: block;
  width: 38px;
  height: 10px;
  margin-bottom: 6px;
  border-radius: 6px;
  background: var(--dm-text-soft);
  opacity: 0.35;
}
.dmx-ref-chip.gold {
  background: rgba(255, 198, 98, 0.35);
  border-color: var(--dm-accent-gold);
}
.dmx-ref-chip.blue {
  background: rgba(88, 139, 255, 0.35);
  border-color: var(--dm-accent-blue);
} /* label */
.dmx-ref-label {
  font-size: 11px;
  line-height: 1.2;
  color: var(--dm-text);
  opacity: 0.85;
} /* 3D-Hero Wrapper */
.dmx-hero3d {
  perspective: 1200px;
  transform-style: preserve-3d;
} /* Hauptkarte 3D-Basis */
.dmx-hero3d-main {
  transform-style: preserve-3d;
  transform: rotateY(-14deg) rotateX(7deg) translateZ(50px);
} /* Sekundärkarten 3D-Basis */
.dmx-hero3d-sub {
  transform-style: preserve-3d;
}
.dmx-hero3d-sub-1 {
  transform: rotateY(-10deg) rotateX(5deg) translateZ(30px);
}
.dmx-hero3d-sub-2 {
  transform: rotateY(-6deg) rotateX(4deg) translateZ(26px);
} /* Keyframes für sanftes 3D-Floating */
@keyframes dmx-hero-main3d {
  0%,
  100% {
    transform: rotateY(-14deg) rotateX(7deg) translateZ(50px) translateY(0px);
  }
  50% {
    transform: rotateY(-10deg) rotateX(9deg) translateZ(65px) translateY(-6px);
  }
}
@keyframes dmx-hero-sub3d-1 {
  0%,
  100% {
    transform: rotateY(-10deg) rotateX(5deg) translateZ(30px) translateY(0px);
  }
  50% {
    transform: rotateY(-8deg) rotateX(7deg) translateZ(40px) translateY(-4px);
  }
}
@keyframes dmx-hero-sub3d-2 {
  0%,
  100% {
    transform: rotateY(-6deg) rotateX(4deg) translateZ(26px) translateY(0px);
  }
  50% {
    transform: rotateY(-4deg) rotateX(6deg) translateZ(36px) translateY(-4px);
  }
} /* Utility-Klassen für die Animation aktivieren */
.animate-dmx-hero-main3d {
  animation: dmx-hero-main3d 10s ease-in-out infinite;
}
.animate-dmx-hero-sub3d-1 {
  animation: dmx-hero-sub3d-1 11s ease-in-out infinite;
}
.animate-dmx-hero-sub3d-2 {
  animation: dmx-hero-sub3d-2 12s ease-in-out infinite;
} /* 3D-Hero Wrapper */
.dmx-hero3d {
  perspective: 1200px;
  transform-style: preserve-3d;
} /* Hauptkarte 3D-Basis */
.dmx-hero3d-main {
  transform-style: preserve-3d;
  transform: rotateY(-14deg) rotateX(7deg) translateZ(50px);
} /* Sekundärkarten 3D-Basis */
.dmx-hero3d-sub {
  transform-style: preserve-3d;
}
.dmx-hero3d-sub-1 {
  transform: rotateY(-10deg) rotateX(5deg) translateZ(30px);
}
.dmx-hero3d-sub-2 {
  transform: rotateY(-6deg) rotateX(4deg) translateZ(26px);
} /* ====================================== */ /* GHOST-KACHEL HINTER DER HAUPTKARTE */ /* ====================================== */
.dmx-hero3d-ghost {
  position: absolute;
  transform-style: preserve-3d;
  pointer-events: none; /* Größe der Ghost-Karte */
  width: 62%;
  height: 72%; /* Optik */
  border-radius: 20px;
  background: var(--dm-card-blur-bg);
  border: 1px solid var(--dm-border);
  backdrop-filter: blur(12px); /* dezenter Schatten */
  box-shadow: 0 18px 32px rgba(0, 0, 0, 0.22);
} /* Positioniert rechts oberhalb der Hauptkarte */
.dmx-hero3d-ghost-1 {
  top: 28%;
  left: 68%;
  transform: translate(-50%, -50%) rotateY(-16deg) rotateX(6deg)
    translateZ(22px);
  animation: dmx-hero-ghost1 16s ease-in-out infinite;
} /* Sanfte Bewegung (Ghost-Kachel) */
@keyframes dmx-hero-ghost1 {
  0%,
  100% {
    transform: translate(-50%, -50%) rotateY(-16deg) rotateX(6deg)
      translateZ(22px);
  }
  50% {
    transform: translate(-50%, -53%) rotateY(-14deg) rotateX(7deg)
      translateZ(32px);
  }
} /* ====================================== */ /* 3D FLOATING – HAUPT- UND SUBKARTEN */ /* ====================================== */
@keyframes dmx-hero-main3d {
  0%,
  100% {
    transform: rotateY(-14deg) rotateX(7deg) translateZ(50px) translateY(0px);
  }
  50% {
    transform: rotateY(-10deg) rotateX(9deg) translateZ(65px) translateY(-6px);
  }
}
@keyframes dmx-hero-sub3d-1 {
  0%,
  100% {
    transform: rotateY(-10deg) rotateX(5deg) translateZ(30px) translateY(0px);
  }
  50% {
    transform: rotateY(-8deg) rotateX(7deg) translateZ(40px) translateY(-4px);
  }
}
@keyframes dmx-hero-sub3d-2 {
  0%,
  100% {
    transform: rotateY(-6deg) rotateX(4deg) translateZ(26px) translateY(0px);
  }
  50% {
    transform: rotateY(-4deg) rotateX(6deg) translateZ(36px) translateY(-4px);
  }
} /* Animation-Klassen */
.animate-dmx-hero-main3d {
  animation: dmx-hero-main3d 10s ease-in-out infinite;
}
.animate-dmx-hero-sub3d-1 {
  animation: dmx-hero-sub3d-1 11s ease-in-out infinite;
}
.animate-dmx-hero-sub3d-2 {
  animation: dmx-hero-sub3d-2 12s ease-in-out infinite;
} /* ============================================ ABOUT SECTION — VARIANTE B (ARCHITEKTUR) ============================================ */
.dm-about-frame {
  border: 1px solid var(--dm-border);
  border-radius: 1.25rem;
  overflow: hidden;
  background: var(--dm-bg-soft);
}
.dm-about-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.05);
} /* HERO SAFETY FIXES */
.dmx-hero3d,
.dmx-hero3d * {
  z-index: 1;
}
.site-header,
.site-header * {
  position: relative;
}
@media (max-width: 640px) {
  .dmx-hero3d {
    margin-top: 2rem;
  }
} /* ============================================ SERVICES — MODULAR / TECHNICAL ============================================ */
.dm-service-card {
  border: 1px solid var(--dm-border);
  background: var(--dm-bg);
  border-radius: 1.25rem;
  padding: 1.75rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.dm-service-head {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}
.dm-service-head span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--dm-text-soft);
}
.dm-service-head h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--dmwhite);
}
.dm-service-card p {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--dm-text-soft);
}
.dm-service-secondary {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.02),
    rgba(255, 255, 255, 0.01)
  );
} /* ============================================ CONTACT FORM STYLES ============================================ */
.dm-contact-shell {
  max-width: 900px;
  margin: 0 auto;
}
.dm-form label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dm-text-soft);
  margin-bottom: 0.45rem;
}
.dm-form input,
.dm-form textarea {
  width: 100%;
  border-radius: 0.9rem;
  border: 1px solid var(--dm-border);
  background: rgba(0, 0, 0, 0.18);
  color: var(--dmwhite);
  padding: 0.9rem 1rem;
  outline: none;
}
.dm-form textarea {
  resize: vertical;
  min-height: 140px;
}
.dm-form input:focus,
.dm-form textarea:focus {
  border-color: rgba(201, 148, 76, 0.55);
  box-shadow: 0 0 0 4px rgba(201, 148, 76, 0.12);
}
.dm-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 999px;
  padding: 0.95rem 1.25rem;
  border: 1px solid rgba(201, 148, 76, 0.45);
  background: rgba(201, 148, 76, 0.12);
  color: var(--dmwhite);
  font-weight: 600;
  transition: transform 0.15s ease, border-color 0.15s ease,
    background 0.15s ease;
}
.dm-btn-primary:hover {
  border-color: rgba(201, 148, 76, 0.75);
  background: rgba(201, 148, 76, 0.18);
  transform: translateY(-1px);
}
.dm-mail-hint {
  font-size: 13px;
  color: var(--dm-text-soft);
  text-decoration: none;
}
.dm-mail-hint span {
  color: var(--dmwhite);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.dm-success {
  text-align: left;
} /* ============================================ SECTION RHYTHM NORMALIZATION ============================================ */
.dm-section {
  padding-top: 4rem;
  padding-bottom: 4rem;
  border-top: 1px solid var(--dm-border);
}
@media (min-width: 768px) {
  .dm-section {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
} /* Divider consistency */
.dm-section {
  padding-top: 4rem;
  padding-bottom: 4rem;
  border-top: 1px solid var(--dm-border);
} /* ============================================ STICKY HEADER – REAL HEIGHT FIX ============================================ */
.dm-header.is-sticky .dm-header-inner {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.dm-header.is-sticky {
  min-height: unset;
} /* ============================================ HERO PILL SIZE RESTORE ============================================ */
.dm-hero .dm-pill,
.dm-hero .inline-flex.dm-pill {
  padding: 0.4rem 0.9rem;
  font-size: 0.75rem;
  line-height: 1;
} /* ============================================ GOLD BUTTON TEXT COLOR FIX ============================================ */
.dm-btn-gold,
.dm-btn-gold:hover,
.dm-btn-gold:focus {
  color: #ffffff !important;
} /* ============================================ MOBILE MENU (Hamburger) ============================================ */
.dm-mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 999;
  padding: 5rem 1.5rem 2rem;
}
.dm-mobile-menu.open {
  display: block;
}
.dm-mobile-menu a {
  display: block;
  font-size: 1.15rem;
  padding: 0.85rem 0;
  color: var(--dm-text);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.dm-mobile-menu a:hover {
  color: var(--dm-accent-gold);
}
.dm-mobile-menu-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.35);
  color: var(--dm-text);
  font-size: 28px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
} /* ============================================ HERO — MOBILE RESPONSIVE (CLEAN FINAL) ============================================ */
@media (max-width: 640px) {
  /* Make sticky header slimmer on mobile (Tailwind py override) */
  header.dm-header {
    padding-top: 0.65rem !important;
    padding-bottom: 0.65rem !important;
  } /* Hero spacing + remove oversized stage */
  .dm-hero {
    min-height: auto;
    padding-top: 5.25rem; /* header clearance */
    padding-bottom: 3rem;
    align-items: flex-start;
  } /* Keep content stacked and with breathing room */
  .dm-hero .dm-container {
    gap: 2.25rem !important;
  } /* Badge (pill) spacing */
  .dm-hero .glass {
    margin-top: 0.75rem;
  } /* Headline sizing */
  .dm-hero h1 {
    font-size: 2.15rem;
    line-height: 1.12;
  } /* CTA: already full width via Tailwind; ensure consistent */
  .dm-hero .dm-btn {
    width: 100%;
    justify-content: center;
  } /* Dunes: make them feel wider / less compressed */
  .dm-hero .dm-dunes svg {
    height: 520px;
  }
} /* ============================================ HAMBURGER ICON – LIGHT MODE CONTRAST FIX ============================================ */
html.light #dmMenuToggle svg {
  color: var(--dm-text);
} /* ============================================ HERO 3D BUILDER – MOBILE SPACING FIX ============================================ */
@media (max-width: 640px) {
  .dmx-hero3d {
    margin-top: 3.75rem;
  }
} /* ============================================ HERO DUNES – MOBILE DOWN SHIFT ============================================ */
@media (max-width: 640px) {
  .dm-hero .dm-dunes {
    transform: translateY(14%);
  }
} /* ============================================ HERO 3D OVERLAP FIX – DESKTOP & MOBILE ============================================ */ /* Desktop: prevent header overlap */
@media (min-width: 1024px) {
  .dmx-hero3d-main {
    margin-top: 4.5rem;
  }
} /* Mobile: prevent overlap with subline text */
@media (max-width: 640px) {
  .dmx-hero3d-main {
    margin-top: 4rem;
  }
} /* ============================================ HERO 3D OVERLAP FIX – MAIN + GHOST ============================================ */ /* Desktop */
@media (min-width: 1024px) {
  .dmx-hero3d-main,
  .dmx-hero3d-ghost {
    margin-top: 4.5rem;
  }
} /* Mobile */
@media (max-width: 640px) {
  .dmx-hero3d-main,
  .dmx-hero3d-ghost {
    margin-top: 4rem;
  }
} /* ============================================ HERO BADGE – MOBILE FINE SPACING ============================================ */
@media (max-width: 640px) {
  .dm-hero .glass {
    margin-top: -2.25rem;
  }
} /* ============================================ HERO 3D STACK – START BELOW DUNES (MOBILE) (wrapper-based, ghost-safe) ============================================ */
@media (max-width: 640px) {
  /* verschiebt den gesamten rechten Block */
  .dmx-hero3d {
    margin-top: 18rem;
  }
} /* ============================================ HERO 3D STACK – MOBILE POSITION ADJUST (ONLY RIGHT BLOCK, NO DUNES, GHOST SAFE) ============================================ */
@media (max-width: 640px) {
  /* Wrapper der rechten 3D-Kachel */
  .dmx-hero3d {
    margin-top: 10rem;
  }
} /* ============================================ HERO DUNES – MOBILE MICRO DOWN SHIFT ============================================ */
@media (max-width: 640px) {
  .dm-hero .dm-dunes {
    transform: translateY(10%);
  }
} /* ============================================ HERO DUNES – DESKTOP MICRO DOWN SHIFT ============================================ */
@media (min-width: 641px) {
  .dm-hero .dm-dunes {
    transform: translateY(3%);
  }
} /* ============================================ HERO DUNES – NOTEBOOK MICRO DOWN SHIFT ============================================ */
@media (min-width: 768px) and (max-width: 1200px) {
  .dm-hero .dm-dunes {
    transform: translateY(3.5%);
  }
} /* ============================================ DSGVO CONSENT – DESERTMIND STYLE ============================================ */
.dm-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
  user-select: none;
  margin-top: 1.25rem;
}
.dm-consent input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
} /* Button links */
.dm-consent-box {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1px solid var(--dm-border);
  background: var(--dm-bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
  margin-top: 2px;
} /* ============================================ DSGVO CONSENT – INLINE (NO LINE BREAK) ============================================ */
.dm-consent-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
  margin-top: 1rem;
}
.dm-consent-inline input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
} /* Checkbox-Button */
.dm-consent-box {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid var(--dm-border);
  background: var(--dm-bg-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
} /* Check */
.dm-consent-box::after {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--dm-accent-gold);
  border-radius: 2px;
  opacity: 0;
  transform: scale(0.6);
  transition: all 0.15s ease;
} /* Checked */
.dm-consent-inline input:checked + .dm-consent-box {
  border-color: var(--dm-accent-gold);
}
.dm-consent-inline input:checked + .dm-consent-box::after {
  opacity: 1;
  transform: scale(1);
} /* Text */
.dm-consent-text {
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--dm-text-soft);
}
.dm-consent-text a {
  color: var(--dm-text);
  text-decoration: underline;
} /* ============================================ HERO – PREVENT MOBILE OVERFLOW (3D / GHOST) ============================================ */
.dm-hero,
.dm-hero-inner {
  overflow-x: hidden;
} /* ============================================ FOOTER – REMOVE "FOLGE MIR" (GLOBAL) ============================================ */
.footer-social,
.footer-follow,
.dm-footer-follow {
  display: none !important;
} /* ============================================ HARD VIEWPORT LOCK (NO HORIZONTAL SCROLL) ============================================ */
html {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  position: relative;
} /* ============================================ NAVIGATION – REMOVE "PREISE" (GLOBAL) ============================================ */
a[href*="preise"] {
  display: none !important;
} /* ============================================ MOBILE NAV – THEME AWARE ============================================ */ /* Dark Mode (Default) */
.dm-mobile-menu {
  background: var(--dm-bg);
  color: var(--dm-text);
  border-left: 1px solid var(--dm-border);
} /* Light Mode */
html.light .dm-mobile-menu {
  background: #ffffff;
  color: #0b0b0c;
  border-left: 1px solid rgba(0, 0, 0, 0.08);
} /* ============================================ CONTACT FORM – DSGVO CHECKBOX UX FIX ============================================ */
.dm-consent-inline {
  display: flex;
  align-items: flex-start;
  gap: 14px; /* mehr Abstand Checkbox ↔ Text */
  margin-top: 20px;
  cursor: pointer;
} /* native Checkbox ausblenden */
.dm-consent-inline input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
} /* sichtbare Checkbox */
.dm-consent-box {
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 6px;
  border: 2px solid var(--dm-accent-gold);
  background: transparent;
  margin-top: 2px;
  transition: all 0.2s ease;
  position: relative;
} /* Checked State */
.dm-consent-inline input:checked + .dm-consent-box {
  background: var(--dm-accent-gold);
  border-color: var(--dm-accent-gold);
} /* Checkmark */
.dm-consent-inline input:checked + .dm-consent-box::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 7px;
  width: 5px;
  height: 9px;
  border: solid #000;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
} /* Text */
.dm-consent-text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--dm-text-soft);
} /* Datenschutz-Link bewusst absetzen */
.dm-consent-text a {
  color: var(--dm-accent-blue);
  text-decoration: underline;
  margin-left: 4px;
}
.dm-consent-text a:hover {
  color: var(--dm-accent-gold);
} /* Mobile: noch etwas mehr Luft */
@media (max-width: 640px) {
  .dm-consent-inline {
    gap: 16px;
  }
}

/* ================================
   COOKIEBOT – DESERTMIND CI
================================ */

/* Font */
#CybotCookiebotDialog,
#CybotCookiebotDialog * {
  font-family: 'Montserrat', sans-serif !important;
}

/* Grundcontainer */
#CybotCookiebotDialog {
  border-radius: 18px !important;
  box-shadow: 0 30px 60px rgba(0,0,0,0.35) !important;
  max-width: 460px !important;
}

/* ---------- DARK MODE ---------- */
html.dark #CybotCookiebotDialog {
  background: #0b0b0c !important;
  color: #ffffff !important;
  border: 1px solid #1a1a1a !important;
}

/* ---------- LIGHT MODE ---------- */
html.light #CybotCookiebotDialog {
  background: #ffffff !important;
  color: #0f0f0f !important;
  border: 1px solid #d4d4d4 !important;
}

/* Headline */
#CybotCookiebotDialog h2 {
  font-weight: 600 !important;
  font-size: 18px !important;
  letter-spacing: 0.04em !important;
}

/* Text */
#CybotCookiebotDialogBodyContentText {
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: inherit !important;
}

/* Links */
#CybotCookiebotDialog a {
  color: #00687f !important;
  text-decoration: underline !important;
}
#CybotCookiebotDialog a:hover {
  color: #c9944c !important;
}

/* Buttons allgemein */
#CybotCookiebotDialog .CybotCookiebotDialogBodyButton {
  border-radius: 999px !important;
  font-weight: 600 !important;
  padding: 10px 18px !important;
  transition: all .2s ease !important;
}

/* Akzeptieren */
#CybotCookiebotDialogBodyButtonAccept {
  background: #c9944c !important;
  color: #000000 !important;
  border: none !important;
}
#CybotCookiebotDialogBodyButtonAccept:hover {
  background: #00687f !important;
  color: #ffffff !important;
}

/* Ablehnen */
#CybotCookiebotDialogBodyButtonDecline {
  background: transparent !important;
  color: inherit !important;
  border: 1px solid currentColor !important;
}
#CybotCookiebotDialogBodyButtonDecline:hover {
  border-color: #00687f !important;
  color: #00687f !important;
}

/* Einstellungen */
#CybotCookiebotDialogBodyButtonDetails {
  font-size: 12px !important;
  opacity: 0.8 !important;
}