/*
 * SOFORTKEY Public Luxury System v5.2.0
 * One public-site color system for homepage, service pages, legal pages,
 * knowledge pages, booking UI, 404 and customer appointment response.
 * Portal / Trattner Suite is intentionally excluded by not loading this file there.
 */
:root {
  color-scheme: dark;
  --sk-lx-bg: #05080d;
  --sk-lx-bg-soft: #08111a;
  --sk-lx-surface: #0d1721;
  --sk-lx-surface-raised: #111d28;
  --sk-lx-surface-hover: #152330;
  --sk-lx-border: rgba(219, 232, 243, 0.14);
  --sk-lx-border-strong: rgba(41, 195, 239, 0.52);
  --sk-lx-text: #f7f9fb;
  --sk-lx-muted: #aab5c0;
  --sk-lx-subtle: #7f8b97;
  --sk-lx-accent: #29c3ef;
  --sk-lx-accent-hover: #69d9f6;
  --sk-lx-accent-pressed: #1695bd;
  --sk-lx-accent-ink: #041016;
  --sk-lx-whatsapp: #25d366;
  --sk-lx-success: #4bc78c;
  --sk-lx-warning: #d8a94d;
  --sk-lx-danger: #e66773;
  --sk-lx-radius-sm: 10px;
  --sk-lx-radius-md: 14px;
  --sk-lx-radius-lg: 18px;
  --sk-lx-shadow: 0 20px 56px rgba(0, 0, 0, 0.34);
  --sk-lx-shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.22);

  /* Existing public-site token aliases */
  --sk-bg: var(--sk-lx-bg);
  --sk-bg-soft: var(--sk-lx-bg-soft);
  --sk-panel: var(--sk-lx-surface);
  --sk-panel-strong: var(--sk-lx-surface-raised);
  --sk-card: var(--sk-lx-surface);
  --sk-card-soft: var(--sk-lx-bg-soft);
  --sk-surface: var(--sk-lx-surface);
  --sk-surface-2: var(--sk-lx-surface-raised);
  --sk-text: var(--sk-lx-text);
  --sk-muted: var(--sk-lx-muted);
  --sk-muted-2: var(--sk-lx-subtle);
  --sk-accent: var(--sk-lx-accent);
  --sk-accent-dark: var(--sk-lx-accent-ink);
  --sk-line: var(--sk-lx-border);
  --sk-shadow: var(--sk-lx-shadow);

  /* Booking UI HSL tokens */
  --background: 216 44% 4%;
  --foreground: 210 25% 98%;
  --card: 214 43% 9%;
  --card-foreground: 210 25% 98%;
  --popover: 214 43% 9%;
  --popover-foreground: 210 25% 98%;
  --primary: 193 85% 55%;
  --primary-foreground: 216 60% 4%;
  --secondary: 214 34% 14%;
  --secondary-foreground: 210 20% 94%;
  --muted: 214 30% 12%;
  --muted-foreground: 212 12% 67%;
  --accent: 193 85% 55%;
  --accent-foreground: 216 60% 4%;
  --border: 211 22% 22%;
  --input: 214 28% 15%;
  --ring: 193 85% 55%;
}

html,
body {
  background: var(--sk-lx-bg) !important;
  color: var(--sk-lx-text) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body,
body p,
body li,
body dd,
body td {
  color: var(--sk-lx-muted);
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body strong,
body b {
  color: var(--sk-lx-text);
}

body a:not(.sk-top-cta):not(.button):not(.btn):not(.offer-btn):not(.sk-btn):not(.sk-home-mobile-panel__btn) {
  text-decoration-color: rgba(41, 195, 239, 0.5);
}

:where(a, button, input, select, textarea, summary):focus-visible {
  outline-color: var(--sk-lx-accent) !important;
  box-shadow: 0 0 0 3px rgba(41, 195, 239, 0.22) !important;
}

/* Header and navigation */
.sk-header,
body.sk-home-page .sk-header {
  background: rgba(5, 8, 13, 0.97) !important;
  border-color: var(--sk-lx-border) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
}

.sk-header .sk-nav a,
.sk-header .sk-phone {
  color: var(--sk-lx-muted) !important;
}

.sk-header .sk-nav a:hover,
.sk-header .sk-nav a:focus-visible,
.sk-header .sk-nav a.active,
.sk-header .sk-phone:hover {
  color: var(--sk-lx-text) !important;
}

.sk-menu-toggle,
body.sk-home-page .sk-menu-toggle,
body.sk-home-page .sk-header .sk-menu-toggle {
  background: var(--sk-lx-surface) !important;
  color: var(--sk-lx-text) !important;
  border-color: var(--sk-lx-border) !important;
  box-shadow: none !important;
}

.sk-menu-toggle:hover,
.sk-menu-toggle:focus-visible {
  background: var(--sk-lx-surface-hover) !important;
  border-color: var(--sk-lx-border-strong) !important;
}

.sk-top-cta,
body.sk-home-page .sk-header .sk-top-cta {
  background: var(--sk-lx-accent) !important;
  color: var(--sk-lx-accent-ink) !important;
  border-color: transparent !important;
  box-shadow: 0 8px 24px rgba(41, 195, 239, 0.18) !important;
}

.sk-top-cta:hover,
.sk-top-cta:focus-visible {
  background: var(--sk-lx-accent-hover) !important;
  color: var(--sk-lx-accent-ink) !important;
}

/* Brand strip / text strip */
.sk-brand-strip,
.sk-brand-marquee,
body.sk-home-page .sk-brand-strip,
body.sk-home-page .sk-brand-strip[data-sk-mobile-textbar="true"] {
  background: var(--sk-lx-bg-soft) !important;
  border-color: rgba(41, 195, 239, 0.26) !important;
}

.sk-brand-track span,
body.sk-home-page .sk-brand-track span {
  color: var(--sk-lx-muted) !important;
}

.sk-brand-track span::after,
body.sk-home-page .sk-brand-track span::after {
  color: var(--sk-lx-accent) !important;
}

html.sk-nav-enhanced .sk-nav,
html.sk-nav-enhanced .sk-header .sk-nav,
body.sk-home-page .sk-header .sk-nav,
body.sk-home-page .sk-nav {
  background: rgba(8, 17, 26, 0.99) !important;
  border-color: var(--sk-lx-border) !important;
  box-shadow: var(--sk-lx-shadow) !important;
}

html.sk-nav-enhanced .sk-nav a,
html.sk-nav-enhanced .sk-header .sk-nav a,
body.sk-home-page .sk-header .sk-nav a,
body.sk-home-page .sk-nav a {
  background: var(--sk-lx-surface) !important;
  color: var(--sk-lx-text) !important;
  border-color: var(--sk-lx-border) !important;
}

html.sk-nav-enhanced .sk-nav a:hover,
html.sk-nav-enhanced .sk-nav a:focus-visible,
body.sk-home-page .sk-nav a:hover,
body.sk-home-page .sk-nav a:focus-visible {
  background: var(--sk-lx-surface-hover) !important;
  border-color: var(--sk-lx-border-strong) !important;
}

/* Homepage content system */
body.sk-home-page,
body.sk-home-page main,
body.sk-home-page .sk-home-content-surface {
  background: var(--sk-lx-bg) !important;
}

body.sk-home-page .sk-home-content-surface > section:nth-child(even) {
  background: var(--sk-lx-bg-soft) !important;
}

body.sk-home-page .sk-home-mobile-panel__surface,
body.sk-home-page .sk-home-mobile-panel__surface * {
  color: var(--sk-lx-text) !important;
}

body.sk-home-page .sk-home-mobile-panel__desc,
body.sk-home-page .sk-home-mobile-panel__desc p,
body.sk-home-page .sk-home-mobile-panel__surface .sk-lead {
  color: var(--sk-lx-text) !important;
}

body.sk-home-page .sk-home-mobile-panel__eyebrow,
body.sk-home-page .sk-eyebrow {
  color: var(--sk-lx-text) !important;
}

body.sk-home-page .sk-home-mobile-panel__divider,
body.sk-home-page .sk-home-mobile-panel hr {
  background: linear-gradient(90deg, rgba(41, 195, 239, 0.68), rgba(41, 195, 239, 0)) !important;
}

body.sk-home-page .sk-home-mobile-panel__btn--booking {
  background: rgba(5, 8, 13, 0.48) !important;
  color: var(--sk-lx-text) !important;
  border-color: var(--sk-lx-accent) !important;
  box-shadow: 0 0 0 1px rgba(41, 195, 239, 0.16) inset, 0 8px 24px rgba(0, 0, 0, 0.22) !important;
}

body.sk-home-page .sk-home-mobile-panel__btn--booking:hover,
body.sk-home-page .sk-home-mobile-panel__btn--booking:focus-visible {
  background: rgba(41, 195, 239, 0.16) !important;
  border-color: var(--sk-lx-accent-hover) !important;
}

body.sk-home-page .sk-home-mobile-panel__btn--wa {
  background: rgba(5, 8, 13, 0.48) !important;
  color: var(--sk-lx-text) !important;
  border-color: rgba(37, 211, 102, 0.78) !important;
  box-shadow: 0 0 0 1px rgba(37, 211, 102, 0.10) inset, 0 8px 24px rgba(0, 0, 0, 0.22) !important;
}

body.sk-home-page .sk-home-mobile-panel__btn--wa:hover,
body.sk-home-page .sk-home-mobile-panel__btn--wa:focus-visible {
  background: rgba(37, 211, 102, 0.10) !important;
  border-color: var(--sk-lx-whatsapp) !important;
}

body.sk-home-page .sk-home-mobile-panel__btn--wa svg,
body.sk-home-page .sk-btn-whatsapp svg,
.sk-wa-link svg {
  color: var(--sk-lx-whatsapp) !important;
  fill: currentColor;
}

.sk-card,
.sk-trust-item,
.sk-step,
.sk-info,
.sk-technical-details,
.sk-booking-cta,
.sk-seo-content,
.sk-lkw-special,
.sk-price-card,
.sk-process-card {
  background: var(--sk-lx-surface) !important;
  border-color: var(--sk-lx-border) !important;
  box-shadow: var(--sk-lx-shadow-soft) !important;
}

.sk-card:hover,
.sk-trust-item:hover,
.sk-step:hover {
  background: var(--sk-lx-surface-raised) !important;
  border-color: rgba(41, 195, 239, 0.28) !important;
}

.sk-card p,
.sk-trust-item p,
.sk-trust-item span,
.sk-step p,
.sk-info p,
.sk-lkw-content p,
.sk-lkw-content li,
.sk-seo-content p {
  color: var(--sk-lx-muted) !important;
}

.sk-section-title p,
.sk-booking-cta p {
  color: var(--sk-lx-muted) !important;
}

/* Shared service, legal, knowledge and offer pages */
.hero,
.offer-hero,
.knowledge-hero {
  background-color: var(--sk-lx-bg-soft) !important;
}

.hero::after,
.offer-hero::after,
.knowledge-hero::after {
  background: linear-gradient(90deg, rgba(5, 8, 13, 0.96) 0%, rgba(5, 8, 13, 0.82) 52%, rgba(5, 8, 13, 0.36) 100%) !important;
}

.breadcrumbs,
.breadcrumbs a,
.eyebrow,
.kicker,
.knowledge-hero .eyebrow {
  color: var(--sk-lx-accent) !important;
}

.hero p,
.offer-hero p,
.knowledge-hero p,
.content p,
.content li,
.box li,
.legal-static-page p,
.legal-static-page li,
.knowledge-content p,
.knowledge-content li {
  color: var(--sk-lx-muted) !important;
}

.box,
.card,
.offer-wrap,
.offer-grid > *,
.notice,
.knowledge-tools,
.equipment,
.knowledge-intro,
.knowledge-content,
.knowledge-cta,
.seo-related-links,
.faq details,
.faq-item,
.faq-group,
.privacy-status {
  background: var(--sk-lx-surface) !important;
  border-color: var(--sk-lx-border) !important;
  box-shadow: var(--sk-lx-shadow-soft) !important;
}

.box,
.offer-wrap,
.knowledge-tools,
.equipment,
.knowledge-content,
.knowledge-cta,
.seo-related-links {
  background-image: none !important;
}

.notice {
  border-left-color: var(--sk-lx-accent) !important;
  color: var(--sk-lx-muted) !important;
}

.faq summary,
.faq-item > summary,
.faq-item button,
.faq-question {
  color: var(--sk-lx-text) !important;
}

.faq details:hover,
.faq-item:hover {
  background: var(--sk-lx-surface-raised) !important;
  border-color: rgba(41, 195, 239, 0.25) !important;
}

.search-row input,
.search-row select,
.content input,
.content select,
.content textarea,
.offer-wrap input,
.offer-wrap select,
.offer-wrap textarea,
.knowledge-content input,
.knowledge-content select,
.knowledge-content textarea {
  background: var(--sk-lx-bg-soft) !important;
  color: var(--sk-lx-text) !important;
  border-color: var(--sk-lx-border) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--sk-lx-subtle) !important;
}

/* Unified public buttons: one brand cyan, neutral secondary, semantic WhatsApp only */
.button,
.btn,
.offer-btn.primary,
.cta.primary,
.hero-actions .primary,
.sk-btn-primary,
.sk-hero-actions .sk-btn:not(.sk-btn-whatsapp) {
  background: var(--sk-lx-accent) !important;
  color: var(--sk-lx-accent-ink) !important;
  border-color: transparent !important;
  box-shadow: 0 8px 24px rgba(41, 195, 239, 0.18) !important;
}

.button:hover,
.btn:hover,
.offer-btn.primary:hover,
.cta.primary:hover,
.hero-actions .primary:hover,
.sk-btn-primary:hover,
.sk-hero-actions .sk-btn:not(.sk-btn-whatsapp):hover {
  background: var(--sk-lx-accent-hover) !important;
  color: var(--sk-lx-accent-ink) !important;
}

.offer-btn.secondary,
.cta.secondary,
.hero-actions .secondary,
.btn-secondary,
.btn-outline,
.sk-btn-secondary {
  background: transparent !important;
  color: var(--sk-lx-text) !important;
  border-color: var(--sk-lx-border-strong) !important;
  box-shadow: none !important;
}

.offer-btn.secondary:hover,
.cta.secondary:hover,
.hero-actions .secondary:hover,
.btn-secondary:hover,
.btn-outline:hover,
.sk-btn-secondary:hover {
  background: rgba(41, 195, 239, 0.10) !important;
  border-color: var(--sk-lx-accent) !important;
}

.sk-btn-whatsapp,
a.sk-btn-whatsapp,
.sk-wa-link {
  color: var(--sk-lx-text) !important;
}

.sk-btn-whatsapp {
  background: transparent !important;
  border-color: rgba(37, 211, 102, 0.72) !important;
}

/* Footer */
.sk-footer,
footer.sk-footer,
.site-footer {
  background: #030609 !important;
  border-color: var(--sk-lx-border) !important;
}

.sk-footer h3,
.sk-footer strong {
  color: var(--sk-lx-text) !important;
}

.sk-footer p,
.sk-footer .sk-copy,
.sk-footer .sk-legal-note,
.sk-footer .sk-footer-verse {
  color: var(--sk-lx-subtle) !important;
}

.sk-footer-links a {
  color: var(--sk-lx-muted) !important;
}

.sk-footer-links a:hover,
.sk-footer-links a:focus-visible {
  color: var(--sk-lx-text) !important;
}

/* Booking modal */
html.sk-booking-ui-active .sk-modal-overlay,
.sk-modal-overlay {
  background: rgba(0, 0, 0, 0.76) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
}

html.sk-booking-ui-active .sk-modal-panel,
.sk-modal-panel,
.wiz-shell {
  background: var(--sk-lx-bg-soft) !important;
  color: var(--sk-lx-text) !important;
  border-color: var(--sk-lx-border) !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.58) !important;
}

.sk-modal-close {
  background: var(--sk-lx-surface) !important;
  color: var(--sk-lx-text) !important;
  border: 1px solid var(--sk-lx-border) !important;
}

.wiz-card-pop,
.wiz-select-card,
.wiz-step-bar,
.wiz-dropdown-panel,
.wiz-dropdown-item,
.wiz-dropdown-freetext,
.wiz-footer-nav {
  background: var(--sk-lx-surface) !important;
  color: var(--sk-lx-text) !important;
  border-color: var(--sk-lx-border) !important;
}

.wiz-dropdown-item:hover,
.wiz-dropdown-item:focus,
.wiz-select-card:hover {
  background: var(--sk-lx-surface-hover) !important;
}

.wiz-field input,
.wiz-field select,
.wiz-field textarea,
.wiz-dropdown-search input,
.sk-modal-panel input,
.sk-modal-panel select,
.sk-modal-panel textarea {
  background: var(--sk-lx-bg) !important;
  color: var(--sk-lx-text) !important;
  border-color: var(--sk-lx-border) !important;
}

.wiz-field input:focus,
.wiz-field select:focus,
.wiz-field textarea:focus,
.sk-modal-panel input:focus,
.sk-modal-panel select:focus,
.sk-modal-panel textarea:focus {
  border-color: var(--sk-lx-accent) !important;
  box-shadow: 0 0 0 3px rgba(41, 195, 239, 0.18) !important;
}

.wiz-btn,
.wiz-btn[data-variant="primary"] {
  background: var(--sk-lx-accent) !important;
  color: var(--sk-lx-accent-ink) !important;
  border-color: transparent !important;
}

.wiz-btn[data-variant="secondary"],
.wiz-btn.secondary {
  background: var(--sk-lx-surface-raised) !important;
  color: var(--sk-lx-text) !important;
  border-color: var(--sk-lx-border) !important;
}

.wiz-step-dot {
  background: var(--sk-lx-surface-raised) !important;
  border-color: var(--sk-lx-border) !important;
}

.wiz-step-dot.active,
.wiz-step-dot[aria-current="step"] {
  background: var(--sk-lx-accent) !important;
  border-color: var(--sk-lx-accent) !important;
}

.wiz-error,
.message.error {
  color: #ffd9dc !important;
  border-color: rgba(230, 103, 115, 0.55) !important;
  background: rgba(230, 103, 115, 0.10) !important;
}

.message.success {
  color: #d8f8e8 !important;
  border-color: rgba(75, 199, 140, 0.55) !important;
  background: rgba(75, 199, 140, 0.10) !important;
}

/* Customer appointment response and 404 */
body > main.card {
  background: var(--sk-lx-surface) !important;
  border-color: var(--sk-lx-border) !important;
  box-shadow: var(--sk-lx-shadow) !important;
}

body > main.card .head {
  background: var(--sk-lx-bg-soft) !important;
  border-color: var(--sk-lx-accent) !important;
}

body > main.card .badge,
body > main.card .label,
body > main.card .message,
body > main.card .facts {
  background: var(--sk-lx-surface-raised) !important;
  color: var(--sk-lx-muted) !important;
  border-color: var(--sk-lx-border) !important;
}

body > main.card textarea {
  background: var(--sk-lx-bg) !important;
  color: var(--sk-lx-text) !important;
  border-color: var(--sk-lx-border) !important;
}

.links a {
  background: var(--sk-lx-accent) !important;
  color: var(--sk-lx-accent-ink) !important;
  border-radius: var(--sk-lx-radius-sm) !important;
}

/* Motion: subtle and functional */
:where(.button, .btn, .offer-btn, .sk-btn, .sk-top-cta, .sk-menu-toggle, .wiz-btn, .faq-item, .sk-card) {
  transition-duration: 220ms !important;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

/*
 * SOFORTKEY v5.3.3 – wirksame Hero-Randkorrektur in ALLEN Ansichtsbreiten.
 * Ursache des sichtbaren Fehlers: Der dynamische Hero-Textblock lag exakt an
 * einer abgerundeten clip-path-Maske. Dadurch wurde bei bestimmten
 * Fensterbreiten/Zoomstufen das erste „M“ oben links und die untere
 * WhatsApp-Kontur abgeschnitten.
 */
html body.sk-home-page #sk-home-mobile-hero-panel,
html body.sk-home-page.sk-home-mobile-panel-ready #sk-home-mobile-hero-panel,
html body.sk-home-page #sk-home-mobile-hero-panel .sk-home-mobile-panel__surface,
html body.sk-home-page.sk-home-mobile-panel-ready #sk-home-mobile-hero-panel .sk-home-mobile-panel__surface {
  overflow: visible !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
}

html body.sk-home-page .sk-home-mobile-panel__eyebrow {
  margin-left: 0 !important;
  padding-left: 4px !important;
  text-indent: 0 !important;
  transform: none !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

html body.sk-home-page .sk-home-mobile-panel__actions {
  overflow: visible !important;
  padding-bottom: 4px !important;
  box-sizing: border-box !important;
}

html body.sk-home-page .sk-home-mobile-panel__btn--wa {
  position: relative !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  border: 2px solid rgba(20, 230, 136, 0.98) !important;
  border-bottom: 2px solid rgba(20, 230, 136, 0.98) !important;
  background-clip: padding-box !important;
}