/* ============================================================
   doc.doors - Website-Styles
   (zuvor inline im <style>-Block, dreifach dupliziert -> konsolidiert)
   Schriften werden über fonts.css lokal geladen (kein Google-CDN).
   ============================================================ */

#dd-portal *, #dd-portal *::before, #dd-portal *::after { box-sizing: border-box; }
#dd-portal a { text-decoration: none; }
#dd-portal h1, #dd-portal h2, #dd-portal h3 { font-family: 'Schibsted Grotesk', sans-serif; }

/* Call-to-action Buttons */
#dd-portal .dd-cta { transition: transform .15s ease, box-shadow .15s ease; }
#dd-portal .dd-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(14,108,95,.32); }

/* Karten */
#dd-portal .dd-card { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
#dd-portal .dd-card:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(16,36,40,.1); border-color: var(--brand); }

/* Navigationslinks mit Unterstreichungs-Animation */
#dd-portal .dd-navlink { position: relative; }
#dd-portal .dd-navlink::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -4px; height: 2px; background: var(--brand); transition: right .25s ease; }
#dd-portal .dd-navlink:hover::after { right: 0; }

/* Range-Slider (Sparrechner) */
#dd-portal .dd-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: rgba(255,255,255,.18); outline: none; margin: 0; }
#dd-portal .dd-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 5px solid var(--brand); box-shadow: 0 2px 8px rgba(0,0,0,.3); cursor: pointer; }
#dd-portal .dd-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 5px solid var(--brand); box-shadow: 0 2px 8px rgba(0,0,0,.3); cursor: pointer; }

/* Eingabefelder (Formulare) */
#dd-portal .dd-input { width: 100%; border: 1px solid var(--line); border-radius: 11px; padding: 13px 15px; font-size: 15px; font-family: inherit; color: var(--ink); background: #fff; outline: none; transition: border-color .15s ease; }
#dd-portal .dd-input:focus { border-color: var(--brand); }

/* Seitenwechsel-Animation + Demo-Animationen */
#dd-portal .dd-page { animation: ddfade .25s ease; }
@keyframes ddfade { from { opacity: .4 } to { opacity: 1 } }
@keyframes ddscan { from { transform: translateY(0) } to { transform: translateY(150px) } }
@keyframes ddpop { from { transform: scale(.6); opacity: 0 } to { transform: scale(1); opacity: 1 } }
#dd-portal #ddw-select:focus { outline: none; }
#dd-portal .ddw-slot:hover { border-color: var(--aa); }
#dd-portal [data-swatch]:hover { box-shadow: 0 4px 12px rgba(16,36,40,.1); }

/* Sprachumschalter (DE | EN) */
#dd-portal .dd-lang { display: inline-flex; align-items: center; gap: 2px; background: var(--tint2); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
#dd-portal .dd-lang button { border: none; background: transparent; cursor: pointer; font-family: inherit; font-weight: 600; font-size: 13px; color: var(--muted); padding: 5px 11px; border-radius: 999px; transition: background .15s ease, color .15s ease; }
#dd-portal .dd-lang button.is-active { background: var(--brand); color: #fff; }

/* Responsiv: Spalten zu 1 Spalte zusammenführen (Union aller Grid-Selektoren) */
@media (max-width: 880px) {
  #dd-portal .dd-2col, #dd-portal .dd-hero, #dd-portal .dd-stat, #dd-portal .dd-calc,
  #dd-portal .dd-3col, #dd-portal .dd-steps, #dd-portal .dd-white, #dd-portal .dd-grid3,
  #dd-portal .dd-grid2, #dd-portal .dd-price, #dd-portal .dd-contact { grid-template-columns: 1fr !important; }
  #dd-portal .dd-nav-links { display: none !important; }
  #dd-portal .dd-hero-art { order: -1; }
  #dd-portal .dd-sec { padding-top: 64px !important; padding-bottom: 64px !important; }
}