/* ============================================================
   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; }

/* Alpine: Elemente vor der Initialisierung ausblenden (verhindert Aufblitzen) */
[x-cloak] { display: none !important; }

/* Burger-Button (nur mobil sichtbar, siehe Media-Query) */
#dd-portal .dd-burger { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 11px; background: #fff; color: var(--ink); cursor: pointer; padding: 0; }
#dd-portal .dd-burger:active { background: var(--tint2); }

/* Mobiles Menü (Overlay + Panel von oben) */
#dd-portal .dd-mobilemenu { position: fixed; inset: 0; z-index: 60; background: rgba(16,36,40,.5); }
#dd-portal .dd-mobilemenu-inner { position: absolute; top: 0; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 24px 50px rgba(16,36,40,.18); padding: 14px 20px 20px; display: flex; flex-direction: column; gap: 4px; }
#dd-portal .dd-mobilemenu a { display: block; padding: 14px 12px; border-radius: 12px; font-size: 16.5px; font-weight: 600; color: var(--ink); }
#dd-portal .dd-mobilemenu a:active { background: var(--tint2); }

/* ============================================================
   Responsiv / Mobile-Optimierung
   ============================================================ */

/* >>> Tablet & Smartphone (<=880px) <<< */
@media (max-width: 880px) {
  /* Mehrspaltige Raster auf eine Spalte zusammenführen */
  #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, #dd-portal .dd-step,
  #dd-portal .pv-certgrid { grid-template-columns: 1fr !important; }

  /* Navigation: Desktop-Links aus, Burger an */
  #dd-portal .dd-nav-links { display: none !important; }
  #dd-portal .dd-burger { display: inline-flex !important; }

  #dd-portal .dd-hero-art { order: -1; }
  #dd-portal .dd-sec { padding-top: 56px !important; padding-bottom: 56px !important; }

  /* Klebende Demo-Sidebar lösen (sonst Überlappung im einspaltigen Layout) */
  #dd-portal .dd-step > div[style*="sticky"] { position: static !important; }
}

/* >>> Smartphone (<=600px) <<< */
@media (max-width: 600px) {
  /* Grundschrift etwas kleiner */
  #dd-portal { font-size: 16px; }

  /* Seitliche Innenabstände der Haupt-Container reduzieren */
  #dd-portal [style*="max-width:1180px"],
  #dd-portal [style*="max-width:1000px"] { padding-left: 18px !important; padding-right: 18px !important; }

  /* Große vertikale Abstände entschlacken */
  #dd-portal .dd-hero { padding-top: 44px !important; padding-bottom: 52px !important; }
  #dd-portal .dd-calc { gap: 26px !important; }
  #dd-portal .dd-calc-card { padding: 26px !important; }
  #dd-portal [style*="padding:54px 48px"] { padding: 32px 22px !important; }

  /* Formular-Raster (Demo-Modal / Kontakt) einspaltig */
  #dd-portal [data-form] { grid-template-columns: 1fr !important; }
  #demo-modal [style*="grid-template-columns:1fr 1fr"],
  #dd-form-slot [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }

  /* Zusammenfassung im Buchungs-Widget: Namensfelder untereinander */
  #ddw-s4 [style*="grid-template-columns:1fr 1fr 1fr"] { grid-template-columns: 1fr !important; }

  /* Kunden-Logos 2 statt 4 pro Reihe */
  #dd-portal [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: 1fr 1fr !important; }

  /* Leistungserbringer-Aktionen umbrechen statt überlaufen */
  #pv-actions { flex-wrap: wrap !important; }
  #pv-actions button { flex: 1 1 auto; }
}

/* ── News-/PWA-Demo (Umsetzung): Sperrbildschirm "klingelt" ──
   Abklingendes Links-rechts-Wippen um einen tiefen Drehpunkt, wie ein
   klingelndes Handy auf dem Tisch. */
@keyframes na-vibrate {
  0% { transform: rotate(0); }
  8% { transform: rotate(-2.6deg); }
  16% { transform: rotate(2.4deg); }
  24% { transform: rotate(-2.1deg); }
  32% { transform: rotate(1.8deg); }
  40% { transform: rotate(-1.4deg); }
  48% { transform: rotate(1.1deg); }
  56% { transform: rotate(-.7deg); }
  64% { transform: rotate(.4deg); }
  72% { transform: rotate(-.2deg); }
  80%, 100% { transform: rotate(0); }
}
#na-phone.na-vibrating { animation: na-vibrate 1.6s ease-in-out; transform-origin: 50% 88%; }

.na-wave { opacity: 0; pointer-events: none; }
#na-phone-wrap.na-ringing .na-wave { animation: na-wave 1s ease-out 2; }
#na-phone-wrap.na-ringing .na-wave2 { animation-delay: .18s; }
@keyframes na-wave {
  0% { opacity: 0; transform: scale(.75); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.2); }
}

/* Neue Benachrichtigung faellt von oben in den Stapel */
@keyframes na-drop {
  0% { opacity: 0; transform: translateY(-14px) scale(.97); }
  100% { opacity: 1; transform: none; }
}
#na-feed .na-note-new { animation: na-drop .4s ease-out; }