/* =============================================================================
   dsp-modern.css – "DSP 26 Modern" als kompiliertes CSS
   -----------------------------------------------------------------------------
   Fallback-Variante des Custom-Styles (less/theme.dsp-26-modern.less), die
   OHNE YOOtheme-Less-Kompilierung auskommt: wird wie custom.css und
   rd-weld-effects.css klassisch über functions.php geladen.

   Farblogik: Die Primärfarbe wird – wie beim rd-weld-System – zur Laufzeit
   von rd-weld-effects.js aus dem YOOtheme-Style injiziert
   (--rd-weld-accent-rgb). Fallback und Sekundär-/Gold-/Danger-Töne sind die
   hinterlegten Kundenfarben. Es werden keine neuen Farben eingeführt.

   Die 6 Typografie-Grundwerte (Body 16px/1.7, H1 56px/1.1, H2 42px/1.15,
   Button Versalien/15px) werden im YOOtheme-Backend im aktiven Style
   eingestellt – nicht hier.

   Hinweis: Sollte später der Datei-Style theme.dsp-26-modern.less in der
   Style-Bibliothek funktionieren, diese Datei löschen (sonst doppelt).
   ========================================================================== */

:root {
  /* Primär folgt der YOOtheme-Primärfarbe (Injektion via rd-weld-effects.js) */
  --dsp-primary-rgb:   var(--rd-weld-accent-rgb, 227, 9, 33);   /* #E30921 */
  --dsp-secondary-rgb: 17, 24, 39;                              /* #111827 */
  --dsp-danger-rgb:    237, 0, 26;                              /* #ED001A */
  --dsp-gold-rgb:      242, 186, 82;                            /* #F2BA52 */

  --dsp-primary:   rgb(var(--dsp-primary-rgb));
  --dsp-secondary: rgb(var(--dsp-secondary-rgb));
  --dsp-danger:    rgb(var(--dsp-danger-rgb));
  --dsp-gold:      rgb(var(--dsp-gold-rgb));

  --dsp-radius-s: 8px;    /* Buttons, Inputs, Akkordeon */
  --dsp-radius-m: 14px;   /* Cards, Dropdowns, Bilder */
  --dsp-radius-l: 20px;   /* Modals */
  --dsp-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}


/* ---------------------------------------------------------------------------
   1. Typografie-Feinschliff
--------------------------------------------------------------------------- */

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Sanftes Scrollen zu Ankern (Glossar A–Z, Sprungmarken) */
html {
  scroll-behavior: smooth;
}

/* Oswald in Versalien braucht Luft; balance verhindert Einzelwort-Zeilen */
h1, h2 {
  letter-spacing: 0.015em;
  text-wrap: balance;
}

.uk-text-lead {
  font-size: 1.25rem;
  line-height: 1.6;
  color: rgba(var(--dsp-secondary-rgb), 0.8);
}

/* Kicker über Überschriften – Klasse `dsp-eyebrow` */
.dsp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dsp-primary);
}
.dsp-eyebrow::before {
  content: "";
  flex: none;
  width: 36px;
  height: 2px;
  background: var(--dsp-primary);
}

/* Verlaufstext Primär → Gold ("Glut") – Klasse `dsp-text-gradient` */
.dsp-text-gradient {
  background: linear-gradient(100deg, var(--dsp-primary) 20%, var(--dsp-gold) 95%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--dsp-primary); /* Fallback */
}

/* Große Kennzahlen – Klasse `dsp-stat-number` */
.dsp-stat-number {
  font-family: 'Oswald', sans-serif;
  font-weight: 800;
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1;
  background: linear-gradient(100deg, var(--dsp-primary) 20%, var(--dsp-gold) 95%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--dsp-primary);
}

.uk-heading-bullet::before {
  border-left: 4px solid var(--dsp-primary);
  border-radius: 2px;
}


/* ---------------------------------------------------------------------------
   2. Buttons – kräftige, moderne CTAs
--------------------------------------------------------------------------- */

.uk-button {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  letter-spacing: 0.08em;
  border-radius: var(--dsp-radius-s);
  transition:
    transform 0.25s var(--dsp-ease),
    box-shadow 0.25s var(--dsp-ease),
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
}

.uk-button-primary {
  box-shadow: 0 6px 18px -8px rgba(var(--dsp-primary-rgb), 0.45);
}
.uk-button-primary:hover,
.uk-button-primary:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -10px rgba(var(--dsp-primary-rgb), 0.55);
}
.uk-button-primary:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px -6px rgba(var(--dsp-primary-rgb), 0.45);
}

.uk-button-secondary {
  box-shadow: 0 6px 18px -8px rgba(var(--dsp-secondary-rgb), 0.4);
}
.uk-button-secondary:hover,
.uk-button-secondary:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -10px rgba(var(--dsp-secondary-rgb), 0.5);
}
.uk-button-secondary:active {
  transform: translateY(0);
}

.uk-button-danger:hover,
.uk-button-danger:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -10px rgba(var(--dsp-danger-rgb), 0.55);
}

/* Glanz-Sweep beim Hover. Funken-Buttons (rd-weld-spark-button) sind
   ausgenommen: overflow:hidden würde deren Funken abschneiden. */
.uk-button-primary:not(.rd-weld-spark-button),
.uk-button-secondary:not(.rd-weld-spark-button) {
  position: relative;
  overflow: hidden;
}
.uk-button-primary:not(.rd-weld-spark-button)::before,
.uk-button-secondary:not(.rd-weld-spark-button)::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -80%;
  width: 50%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s var(--dsp-ease);
  pointer-events: none;
}
.uk-button-primary:not(.rd-weld-spark-button):hover::before,
.uk-button-primary:not(.rd-weld-spark-button):focus-visible::before,
.uk-button-secondary:not(.rd-weld-spark-button):hover::before,
.uk-button-secondary:not(.rd-weld-spark-button):focus-visible::before {
  left: 130%;
}

/* Default-Button als markanter "Ghost"-Button */
.uk-button-default {
  border: 2px solid rgba(var(--dsp-secondary-rgb), 0.18);
  border-radius: var(--dsp-radius-s);
}
.uk-button-default:hover,
.uk-button-default:focus-visible {
  border-color: var(--dsp-primary);
  color: var(--dsp-primary);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -12px rgba(var(--dsp-secondary-rgb), 0.3);
}


/* ---------------------------------------------------------------------------
   3. Cards – Tiefe, Lift und Akzentlinie
--------------------------------------------------------------------------- */

.uk-card-default {
  border-radius: var(--dsp-radius-m);
  border: 1px solid rgba(var(--dsp-secondary-rgb), 0.08);
  box-shadow:
    0 1px 2px rgba(var(--dsp-secondary-rgb), 0.06),
    0 8px 24px -12px rgba(var(--dsp-secondary-rgb), 0.14);
  transition:
    transform 0.3s var(--dsp-ease),
    box-shadow 0.3s var(--dsp-ease),
    border-color 0.3s ease;
}

/* Bild oben in der Karte an den Radius anpassen */
.uk-card-default > .uk-card-media-top:first-child img {
  border-radius: var(--dsp-radius-m) var(--dsp-radius-m) 0 0;
}

/* Hover-Karten: Lift + Akzentlinie, die sich von links aufbaut */
.uk-card-default.uk-card-hover {
  position: relative;
}
.uk-card-default.uk-card-hover::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: var(--dsp-radius-m) var(--dsp-radius-m) 0 0;
  background: linear-gradient(90deg, var(--dsp-primary), var(--dsp-danger));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s var(--dsp-ease);
  z-index: 1;
  pointer-events: none;
}
.uk-card-default.uk-card-hover:hover,
.uk-card-default.uk-card-hover:focus-within {
  transform: translateY(-6px);
  border-color: rgba(var(--dsp-primary-rgb), 0.3);
  box-shadow:
    0 2px 4px rgba(var(--dsp-secondary-rgb), 0.06),
    0 24px 48px -16px rgba(var(--dsp-secondary-rgb), 0.26);
}
.uk-card-default.uk-card-hover:hover::before,
.uk-card-default.uk-card-hover:focus-within::before {
  transform: scaleX(1);
}

/* Icon in Karten (Leistungs-Kacheln) reagiert mit */
.uk-card-hover:hover .uk-icon,
.uk-card-hover:focus-within .uk-icon {
  color: var(--dsp-primary);
  transition: color 0.3s ease;
}


/* ---------------------------------------------------------------------------
   4. Formulare – Finder (PLZ-Suche) und Kontaktstrecken
--------------------------------------------------------------------------- */

.uk-input,
.uk-select,
.uk-textarea {
  border-radius: var(--dsp-radius-s);
  border-width: 2px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.uk-input:focus,
.uk-select:focus,
.uk-textarea:focus {
  border-color: var(--dsp-primary);
  box-shadow: 0 0 0 4px rgba(var(--dsp-primary-rgb), 0.12);
}

.uk-form-label {
  font-weight: 600;
}


/* ---------------------------------------------------------------------------
   5. Akkordeon – FAQ auf den Leistungsseiten
--------------------------------------------------------------------------- */

.uk-accordion > li {
  margin-top: 12px;
  padding: 8px 20px;
  border: 1px solid rgba(var(--dsp-secondary-rgb), 0.1);
  border-radius: var(--dsp-radius-s);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.uk-accordion > li.uk-open {
  border-color: rgba(var(--dsp-primary-rgb), 0.45);
  box-shadow: 0 12px 30px -18px rgba(var(--dsp-secondary-rgb), 0.45);
}
.uk-open > .uk-accordion-title {
  color: var(--dsp-primary);
}


/* ---------------------------------------------------------------------------
   6. Overlays – Dropdowns & Modals
--------------------------------------------------------------------------- */

.uk-dropdown,
.uk-navbar-dropdown {
  border-radius: var(--dsp-radius-m);
  box-shadow: 0 24px 56px -20px rgba(var(--dsp-secondary-rgb), 0.4);
}

.uk-modal-dialog {
  border-radius: var(--dsp-radius-l);
}


/* ---------------------------------------------------------------------------
   7. Kleinigkeiten mit großer Wirkung
--------------------------------------------------------------------------- */

::selection {
  background: var(--dsp-primary);
  color: #ffffff;
}

:focus-visible {
  outline-color: rgba(var(--dsp-primary-rgb), 0.75);
}

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
::-webkit-scrollbar-track {
  background: rgba(var(--dsp-secondary-rgb), 0.05);
}
::-webkit-scrollbar-thumb {
  background-color: rgba(var(--dsp-secondary-rgb), 0.3);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--dsp-primary);
}

blockquote {
  border-left: 4px solid var(--dsp-primary);
  padding-left: 24px;
}

.uk-table-hover tbody tr:hover,
.uk-table-hover > tr:hover {
  background: rgba(var(--dsp-primary-rgb), 0.04);
}

.uk-label {
  border-radius: 999px;
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  letter-spacing: 0.05em;
  padding: 2px 14px;
}


/* ---------------------------------------------------------------------------
   8. Utilities für den Builder (Advanced-Tab → CSS-Klasse)
--------------------------------------------------------------------------- */

.dsp-img-zoom {
  overflow: hidden;
  border-radius: var(--dsp-radius-m);
}
.dsp-img-zoom img {
  transition: transform 0.7s var(--dsp-ease);
}
.dsp-img-zoom:hover img {
  transform: scale(1.06);
}

.dsp-cut-corner {
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%);
}

.dsp-angle-top {
  clip-path: polygon(0 clamp(16px, 3vw, 48px), 100% 0, 100% 100%, 0 100%);
}
.dsp-angle-bottom {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - clamp(16px, 3vw, 48px)), 0 100%);
}

.dsp-blob-host {
  position: relative;
  overflow: hidden;
}
.dsp-glow-blob {
  position: absolute;
  width: 540px;
  height: 540px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--dsp-primary-rgb), 0.18), transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}

.dsp-list-check {
  list-style: none;
  padding-left: 0;
}
.dsp-list-check > li {
  position: relative;
  padding-left: 34px;
  margin-bottom: 10px;
}
.dsp-list-check > li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 1px;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(var(--dsp-gold-rgb), 0.3);
  color: #95650B; /* = Kundengold #F2BA52, 32 % abgedunkelt (Kontrast) */
  font-weight: 700;
  font-size: 0.8rem;
  line-height: 22px;
  text-align: center;
}


/* ---------------------------------------------------------------------------
   9. Reduced Motion
--------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  .uk-button,
  .uk-card-default,
  .dsp-img-zoom img {
    transition-duration: 0.01ms;
  }

  .uk-button-primary:hover,
  .uk-button-primary:focus-visible,
  .uk-button-primary:active,
  .uk-button-secondary:hover,
  .uk-button-secondary:focus-visible,
  .uk-button-secondary:active,
  .uk-button-danger:hover,
  .uk-button-danger:focus-visible,
  .uk-button-default:hover,
  .uk-button-default:focus-visible {
    transform: none;
  }

  .uk-button-primary:not(.rd-weld-spark-button)::before,
  .uk-button-secondary:not(.rd-weld-spark-button)::before {
    display: none;
  }

  .uk-card-default.uk-card-hover:hover {
    transform: none;
  }

  .dsp-img-zoom:hover img {
    transform: none;
  }
}