/* ============================================================================
   ALPENKÖNIGIN — DESIGN SYSTEM  (override-layer, als LETZTES geladen)
   Primary = das Marken-GOLD. Secondary (Sublines) dezent. Content-scoped (#main).
   Sektionen gruppiert via ak-design-system.js (data-ak-bg/-first/-last).
   ============================================================================ */
:root{
  --ak-gold:#c4a24a;          /* Marken-Gold (Primary, Akzente/Buttons/Kicker) */
  --ak-gold-deep:#9c7a28;     /* tiefes, LESBARES Gold für Überschriften */
  --ak-cream:#faf6ee; --ak-teal:#2f5560; --ak-ink:#2b2b2b; --ak-muted:#7a756c;
  --ak-serif:'Cormorant Garamond','Playfair Display',Georgia,serif;
  --ak-sans:'Inter','Montserrat','Helvetica Neue',Arial,sans-serif;
}

body{ font-family:var(--ak-sans); color:var(--ak-ink); -webkit-font-smoothing:antialiased; }

/* ---------- Überschriften → Serif in GOLD (Primary) ---------- */
#main h1, #main h2, #main h3, #main h4,
#main .ce_headline, #main .ce_text h1, #main .ce_text h2, #main .ce_text h3{
  font-family:var(--ak-serif) !important;
  color:var(--ak-gold-deep) !important;
  font-weight:600 !important; letter-spacing:.004em; line-height:1.12;
}
#main h1, #main .ce_headline.h1{ font-size:clamp(2rem, 6.2vw, 3.3rem) !important; }
#main h2{ font-size:clamp(1.6rem, 5vw, 2.45rem) !important; margin-bottom:.35em; }
#main h3{ font-size:clamp(1.2rem, 3.2vw, 1.6rem) !important; }
#main h1 em, #main h2 em{ font-style:italic; color:var(--ak-teal) !important; }

/* ---------- Secondary / Subline → DEZENT (leicht, gedämpft, gesperrt) ---------- */
#main .ce_text h2 + h3, #main .ce_text h3.subline, #main .subheadline, #main .subline,
#main h2 + .ce_text h3{
  color:var(--ak-muted) !important; font-weight:400 !important;
  font-size:clamp(1rem, 2.6vw, 1.25rem) !important; letter-spacing:.02em;
}

/* ---------- Fließtext → Inter, ruhig ---------- */
#main p, #main li, #main .ce_text p{ font-family:var(--ak-sans); color:#54504a; line-height:1.72; }

/* ---------- Gold-Kicker (kleine Label-Zeile) ---------- */
#main .kicker, #main .eyebrow, #main .headline-kicker{
  color:var(--ak-gold) !important; text-transform:uppercase !important;
  letter-spacing:.28em !important; font-size:.78rem !important; font-weight:600 !important;
  font-family:var(--ak-sans) !important; display:block; margin-bottom:.6em;
}

/* ---------- SECTION-RHYTHMUS — kein 56px-Gap mehr (höhere Spezifität als Contao-Margin) ---------- */
#main .inside > .mod_article, #main .mod_article[data-ak-section]{
  position:relative; margin-top:0 !important; margin-bottom:0 !important;
  padding-top:1.6rem !important; padding-bottom:1.6rem !important; }
#main .mod_article[data-ak-first]{ padding-top:4.25rem !important; }
#main .mod_article[data-ak-last]{ padding-bottom:4.25rem !important; }
/* Cream-Sektionen (Titel+Liste zusammen) full-bleed über die ganze Breite */
#main .mod_article[data-ak-bg="cream"]{
  background:var(--ak-cream) !important; box-sizing:border-box !important;
  width:100vw !important; margin-left:calc(50% - 50vw) !important;
  padding-left:calc(50vw - 50%) !important; padding-right:calc(50vw - 50%) !important;
}
#wrapper{ overflow-x:clip !important; }

/* ---------- ÜBER Bildern: Karten- & Slider-Titel weiß + starker Schatten ---------- */
#main .room-title, #main .room-title + span, #main .room-meta, #main .room-content *,
#main .split-content, #main .split-content *{
  color:#fff !important;
  text-shadow:0 1px 3px rgba(0,0,0,.85), 0 4px 18px rgba(0,0,0,.6) !important;
}
/* Hero-Slide-Content (Titel + Beschreibung über Bild) → WEISS (war grau rgb(84,80,74)/rgb(43,43,43)) */
#main .hero-slide-content, #main .hero-slide-content *, #main .hero-slide-title, #main .hero-slide-description,
#main .hero-slide h1, #main .hero-slide h2, #main .hero-slide h3, #main .hero-slide-content h1, #main .hero-slide-content h2, #main .hero-slide-content h3{
  color:#fff !important; text-shadow:0 2px 14px rgba(0,0,0,.55), 0 1px 4px rgba(0,0,0,.75) !important;
}
/* Pauschalen-Karten-Titel sitzen UNTER dem Bild auf WEISS → NICHT weiß (war weiss-auf-weiss), sondern Gold lesbar.
   Höhere Spezifität als `#main .swiper-slide h3` (das die Karte sonst weiß färbt, weil sie in einem .swiper-slide liegt). */
#main .pauschalen-title, #main .pauschale-title, #main .package-title,
#main .swiper-slide h3.pauschalen-title, #main .swiper-slide .pauschalen-title, #main .pauschalen-content .pauschalen-title{
  color:var(--ak-gold-deep) !important; text-shadow:none !important; font-family:var(--ak-serif) !important; font-weight:600 !important; }
#main .room-title, #main .split-title, #main .split-content .split-title{
  font-family:var(--ak-serif) !important; font-weight:500 !important;
}

/* ---------- Slider/Hero-Headings hell halten (über dunklen Bildern) ---------- */
#main .split-title, #main .sliderhome h1, #main .sliderhome h2, #main .sliderhome h3,
#main .split-background-slider h2, #main .swiper-slide h2, #main .swiper-slide h3{
  color:#fff !important; font-family:var(--ak-serif) !important; font-weight:500 !important;
  text-shadow:0 2px 18px rgba(0,0,0,.5) !important;
}

/* ---------- Gold-Akzente: Links + Trenner ---------- */
#main .ce_text a:not(.button):not(.btn){ color:var(--ak-gold-deep); }
#main hr{ border:0; height:1px; background:linear-gradient(90deg,transparent,var(--ak-gold),transparent); opacity:.55; }

/* ===== MOBILE: weniger Section-Padding (Brudi: zu viel Abstand nach Titel/Untertitel) ===== */
@media (max-width:767px){
  #main .mod_article[data-ak-section]{ padding-top:.9rem !important; padding-bottom:.9rem !important; }
  #main .mod_article[data-ak-first]{ padding-top:2.2rem !important; }
  #main .mod_article[data-ak-last]{ padding-bottom:2.2rem !important; }
  #main h2{ margin-bottom:.12em !important; }
}

/* ===== MOBILE-HEADER: transparent über Hero (negatives Logo) → beim Scrollen frosted-cream + kompakt ===== */
@media (max-width:900px){
  .mobile-header-bar{ transition:background .45s ease, box-shadow .45s ease, height .35s ease !important; }
  .mobile-header-bar img{ transition:height .35s ease, filter .45s ease !important; }
  /* Hero hinter den Header ziehen → kein weißer Spacer mehr */
  body.ak-has-hero{ padding-top:0 !important; }
  /* #header + weißer Innen-Balken #header_main transparent — sonst weiße 40px-Leiste über dem Hero.
     WICHTIG: #header hat backdrop-filter:blur(10px) → blurte den Hero dahinter = der „Blur-Effekt". Hier abschalten. */
  body.ak-has-hero #header, body.ak-has-hero #header_main{ background:transparent !important; background-color:transparent !important; box-shadow:none !important; border:0 !important;
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
  body.ak-has-hero:not(.ak-scrolled) .mobile-header-bar, body.ak-has-hero:not(.ak-scrolled) .mobile-header-bar-inner{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }

  /* --- Zustand ganz oben: ÜBER dem Hero, alles negativ/weiß, KEIN Strich --- */
  body.ak-has-hero:not(.ak-scrolled) .mobile-header-bar{ background:transparent !important; box-shadow:none !important;
    border:0 !important; border-bottom:0 !important; overflow:visible !important; }
  body.ak-has-hero:not(.ak-scrolled) .mobile-header-bar-inner{ overflow:visible !important; }
  /* Nonsticky: dunkles Gradient nach oben hin (Brudi-Wunsch) — kein Blur, nur Verlauf für Tiefe + Lesbarkeit */
  body.ak-has-hero:not(.ak-scrolled) .mobile-header-bar::before{ content:'' !important; display:block !important; position:absolute; left:0; right:0; top:0; height:150px; z-index:-1; pointer-events:none;
    background:linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,.20) 50%, rgba(0,0,0,0) 100%) !important; }
  /* Site-eigene .slide-overlay oben deutlich aufhellen (war 30% schwarz = graue Leiste); unten dunkel lassen (Eyecatcher/Dots) */
  body.ak-has-hero .slide-overlay{ background-image:linear-gradient(to bottom, rgba(0,0,0,.08) 0%, rgba(0,0,0,.05) 45%, rgba(0,0,0,.55) 100%) !important; }
  /* Logo im Nonsticky-Zustand GRÖSSER + negativ (weiß). width:auto = Seitenverhältnis erhalten (Site forciert width:120 → sonst gezerrt) */
  body.ak-has-hero:not(.ak-scrolled) .mobile-header-center img{ filter:brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0,0,0,.5)) !important;
    height:80px !important; max-height:80px !important; width:auto !important; max-width:none !important; object-fit:contain !important; }
  /* adLACA hat KEIN Vektor-/Transparenz-Logo (opak, weißer Grund) → nicht invertieren, als helle Logo-Karte zeigen */
  body.adlaca.ak-has-hero:not(.ak-scrolled) .mobile-header-center img{ filter:none !important; height:58px !important; max-height:58px !important;
    width:auto !important; max-width:none !important; object-fit:contain !important; border-radius:7px !important; box-shadow:0 6px 18px rgba(0,0,0,.32) !important; }
  /* Hamburger weiß + MENÜ-Label weiß OHNE die dunkle Pille (Site stylt Label als #333-Pille → kein invert) */
  body.ak-has-hero:not(.ak-scrolled) .mobile-menu-toggle{ overflow:visible !important; }
  body.ak-has-hero:not(.ak-scrolled) .mobile-menu-toggle .hamburger span{ background:#fff !important; box-shadow:0 1px 3px rgba(0,0,0,.4) !important; }
  body.ak-has-hero:not(.ak-scrolled) .mobile-menu-label{ background:transparent !important; color:#fff !important; border:0 !important; text-shadow:0 1px 3px rgba(0,0,0,.55) !important; }

  /* --- Zustand gescrollt: frosted-cream, kompakt, Logo normal+klein --- */
  body.ak-scrolled .mobile-header-bar{ background:rgba(250,246,238,.94) !important;
    -webkit-backdrop-filter:blur(16px) saturate(1.1) !important; backdrop-filter:blur(16px) saturate(1.1) !important;
    box-shadow:0 6px 22px rgba(40,30,10,.12) !important; height:58px !important; }
  body.ak-scrolled .mobile-header-bar-inner{ height:58px !important; min-height:0 !important; }
  body.ak-scrolled .mobile-header-center img{ height:42px !important; width:auto !important; max-width:none !important; object-fit:contain !important; }
  /* Sticky: MENÜ-Label OHNE dunkle Site-Pille (transparent + dunkler Text auf frosted-cream) */
  body.ak-scrolled .mobile-menu-label{ background:transparent !important; background-color:transparent !important; color:var(--ak-ink) !important; box-shadow:none !important; border:0 !important; }
  body.ak-scrolled .mobile-menu-toggle .hamburger span{ background:var(--ak-ink) !important; }
}
/* MENÜ-Label: einzeilig (uppercase „MENÜ" wrappte zu „MEN"/„Ü" → nur „Ü" sichtbar) */
.mobile-menu-label{ text-indent:0 !important; overflow:visible !important; white-space:nowrap !important; letter-spacing:.02em !important; }
.mobile-menu-toggle{ overflow:visible !important; }

/* ===== HOME: blaues NHS-Gruppenlogo komplett RAUS (Brudi) — kein Block, kein Abstand mehr ===== */
#main .mod_article.nhslogo{ display:none !important; margin:0 !important; padding:0 !important; height:0 !important; }
/* Hero rückt damit bündig nach oben; Seiten full-bleed (keine weißen Ränder) */
@media (max-width:900px){
  #main .mod_article.ce_startseite, #main .mod_article.ce_startseite .inside,
  #main [class*="alpine-luxury-slider"]{ width:100vw !important; margin-left:calc(50% - 50vw) !important;
    padding-left:0 !important; padding-right:0 !important; max-width:100vw !important; }
}

/* ===== EYECATCHER mobil: kompakter Kreis, GRÖSSERE Schrift + vertikal zentriert ===== */
@media (max-width:767px){
  #eyecatcher, .eyecatcherx, #article-1055, #article-1109{ width:128px !important; height:128px !important;
    display:flex !important; align-items:center !important; justify-content:center !important; }
  #eyecatcher .mod_article, .eyecatcherx .mod_article{ display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; height:100% !important; }
  /* Site setzt padding:1.8rem (=28.8px) → Inhalt zu hoch, kann nicht zentrieren. Mit hoher Spezifität runter. */
  #eyecatcher .ce_text.wellness-eyecatcher, #eyecatcher .ce_text.enhanced, #eyecatcher .ce_text,
  .eyecatcherx .ce_text.wellness-eyecatcher, .eyecatcherx .ce_text.enhanced, .eyecatcherx .ce_text{
    display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important;
    overflow:hidden !important; padding:6px 8px !important; text-align:center !important; height:100% !important; box-sizing:border-box !important; }
  /* Inhalt (Titel+Untertitel) auch INNEN flex-zentrieren → war oben-lastig (Box höher als Text) */
  #eyecatcher .eyecatcher-title, .eyecatcherx .eyecatcher-title,
  #eyecatcher .eyecatcher-title > p, #eyecatcher .eyecatcher-title p, .eyecatcherx .eyecatcher-title p{
    display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; width:100% !important; margin:0 !important; }
  /* Titel-Text liegt im verschachtelten <a>/<p> → die müssen vergrößert werden */
  #eyecatcher .eyecatcher-title, #eyecatcher .eyecatcher-title p, #eyecatcher .eyecatcher-title a,
  .eyecatcherx .eyecatcher-title, .eyecatcherx .eyecatcher-title p, .eyecatcherx .eyecatcher-title a{
    font-size:11px !important; line-height:1.2 !important; margin:0 !important; font-weight:600 !important;
    text-wrap:balance !important; text-align:center !important; min-height:0 !important; }
  /* klarere Hierarchie: Untertitel deutlich kleiner + gesperrt */
  #eyecatcher .eyecatcher-subtitle, #eyecatcher .eyecatcher-subtitle a,
  .eyecatcherx .eyecatcher-subtitle, .eyecatcherx .eyecatcher-subtitle a{
    font-size:8px !important; margin-top:.3rem !important; padding-top:.25rem !important; letter-spacing:.1em !important; font-weight:600 !important; }
  /* Slider-Pfeile auf Mobile aus (Eyecatcher überdeckte den rechten Pfeil; Wischen + Dots reichen) */
  .alpine-luxury-slider .swiper-button-next, .alpine-luxury-slider .swiper-button-prev,
  .alpine-luxury-slider [class*="alpine-nav"]{ display:none !important; }
}

/* ===== ZIMMER-SLIDER: enterprise (Schatten, Serif-Titel, sauberer Gradient) + auf Mobile kompakter ===== */
/* FIX Scroll-Bug: Container hatte overflow-x:auto → natives Horizontal-Scrollen ins Leere/Off-Screen.
   Pauschalen-Slider hat hidden (funktioniert). Swiper steuert Slides per transform → hidden ist korrekt. */
.luxury-room-slider-container{ overflow-x:hidden !important; }
.luxury-room-card{ box-shadow:0 14px 34px rgba(40,30,10,.20) !important; overflow:hidden !important; }
.luxury-room-card .room-title, .luxury-room-card [class*="room-title"],
.luxury-room-card .room-content h2, .luxury-room-card .room-content h3{
  font-family:var(--ak-serif) !important; font-weight:600 !important; letter-spacing:.01em !important; }
.luxury-room-card .room-overlay{
  background:linear-gradient(to top, rgba(15,12,8,.74) 0%, rgba(15,12,8,.20) 44%, rgba(15,12,8,0) 70%) !important; }
/* Höhe kleiner, Breite gleich (Desktop war 450px) */
@media (min-width:768px){
  .luxury-room-card, .luxury-room-card .room-image-container,
  .luxury-room-card .room-image-container img, .luxury-room-card > img{ height:385px !important; }
}
@media (max-width:767px){
  /* war 422px = halber Screen → kompakter */
  .luxury-room-card, .luxury-room-card .room-image-container,
  .luxury-room-card .room-image-container img, .luxury-room-card > img{ height:336px !important; }
  .luxury-room-slider-container{ height:auto !important; }
  .luxury-room-card .room-title, .luxury-room-card [class*="room-title"]{ font-size:1.05rem !important; }
}

/* ===== NEWS-BOX: Bild kleiner, Titel Tick kleiner, max 4 Einträge, kompakter + "Alle News"-Link ===== */
.nhs-news-title{ font-size:20px !important; margin-bottom:.6rem !important; }
.nhs-news-image-container, .nhs-news-image-container img{ height:200px !important; }
/* nur die letzten/obersten 4 News */
.nhs-news-list > .nhs-news-item:nth-child(n+5){ display:none !important; }
/* Abstände kompakter */
.nhs-news-layout{ gap:20px !important; }
/* Grid: linke Spalte (Bild) etwas kleiner als rechts (Liste) — nur Desktop (mobil bleibt gestapelt) */
@media (min-width:768px){ .nhs-news-layout{ grid-template-columns:0.6fr 1.4fr !important; } }
.nhs-news-list .nhs-news-item{ margin-bottom:0 !important; padding-top:.45rem !important; padding-bottom:.45rem !important; }
/* injizierter "Alle News ansehen"-Link (via JS) */
.ak-news-all{ display:block !important; text-align:center !important; margin:14px auto 2px !important; font-family:var(--ak-sans) !important; font-weight:600 !important;
  color:var(--ak-gold-deep) !important; text-decoration:none !important; letter-spacing:.04em !important; font-size:.92rem !important; }
.ak-news-all:hover{ color:var(--ak-gold) !important; }
@media (max-width:767px){
  .nhs-news-image-container, .nhs-news-image-container img{ height:188px !important; }
  .nhs-news-title{ font-size:19px !important; }
  .nhs-news-layout{ gap:14px !important; }
}

/* ===== GUTSCHEINE: Titel+Untertitel zentriert UNTEREINANDER (Artikel war flex-row → standen nebeneinander) ===== */
body.gutscheine #main .mod_article.block{ flex-direction:column !important; align-items:center !important; text-align:center !important; }
body.gutscheine #main .mod_article.block > *{ width:100% !important; max-width:100% !important; }

/* ===== SOCIAL-ICONS (Sidebar + Mobile): Marken-Farben + Insta-Icon als sauberes Outline (war gefüllter Block) ===== */
/* Facebook → Marken-Blau */
.shortcuts-wrapper a[href*="facebook"] svg, .shortcuts-wrapper a[href*="facebook"] svg *{ stroke:#1877F2 !important; fill:none !important; }
/* Instagram → fill:none (Outline statt gefülltem Quadrat) + Marken-Gradient als Stroke (#ak-ig-grad via JS injiziert) */
.shortcuts-wrapper a[href*="instagram"] svg{ fill:none !important; stroke:url(#ak-ig-grad) !important; stroke-width:1.7 !important; }
.shortcuts-wrapper a[href*="instagram"] svg *{ fill:none !important; stroke:url(#ak-ig-grad) !important; }
/* Mobile Social-Grid (FontAwesome <i> oder svg) gleich einfärben */
.mobile-shortcuts-grid a[href*="facebook"] i, .mobile-shortcuts-grid a[href*="facebook"] svg, .mobile-shortcuts-grid a[href*="facebook"] svg *{ color:#1877F2 !important; stroke:#1877F2 !important; }
.mobile-shortcuts-grid a[href*="instagram"] i{ color:#cc2366 !important; }
.mobile-shortcuts-grid a[href*="instagram"] svg{ fill:none !important; stroke:url(#ak-ig-grad) !important; }
.mobile-shortcuts-grid a[href*="instagram"] svg *{ fill:none !important; stroke:url(#ak-ig-grad) !important; }

/* ===== FOOTER-QUICK-BAR (#mobile-shortcuts-top): dezent-premium + volle Mini-Labels ===== */
@media (max-width:900px){
  #mobile-shortcuts-top{ background:rgba(250,246,238,.95) !important; -webkit-backdrop-filter:blur(12px) !important; backdrop-filter:blur(12px) !important;
    box-shadow:0 -2px 18px rgba(40,30,10,.10) !important; padding:6px 62px 6px 4px !important; border-top:1px solid rgba(196,162,74,.20) !important;
    display:flex !important; justify-content:space-between !important; align-items:center !important; }
  /* der innere <p> = flex-Container voller Breite, KEINE Gaps (sonst bleiben Buttons schmal → Label-Clip) */
  #mobile-shortcuts-top > p, #mobile-shortcuts-top p{ display:flex !important; width:100% !important; flex:1 1 100% !important;
    justify-content:space-between !important; align-items:center !important; margin:0 !important; padding:0 !important; gap:0 !important; }
  /* jeder Button füllt gleichmäßig (margin/maxWidth raus → wachsen auf volle Zellbreite) */
  #mobile-shortcuts-top a, #mobile-shortcuts-top .mobile-shortcut-btn{
    position:relative !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:flex-start !important; gap:3px !important;
    flex:1 1 0 !important; min-width:0 !important; width:auto !important; max-width:none !important; margin:0 !important; padding:8px 1px 0 !important;
    border:0 !important; border-radius:0 !important; background:none !important; box-shadow:none !important; overflow:visible !important; text-indent:0 !important;
    color:var(--ak-gold-deep) !important; font-family:var(--ak-sans) !important; text-decoration:none !important; transition:none !important; }
  /* Alt-System: Kreis (border-radius:50%) + Hover-Hintergrund RAUS */
  #mobile-shortcuts-top a:hover, #mobile-shortcuts-top a:focus, #mobile-shortcuts-top a:active,
  #mobile-shortcuts-top a:hover svg, #mobile-shortcuts-top a:hover i{
    background:none !important; background-color:transparent !important; box-shadow:none !important; border-radius:0 !important; transform:none !important; color:var(--ak-gold-deep) !important; }
  #mobile-shortcuts-top a:hover svg{ stroke:var(--ak-gold-deep) !important; }
  /* vorhandene Icons recolor (tel/mail = line-SVG, buchen/anfragen = FontAwesome <i>) — KEINE Doppel-Icons */
  #mobile-shortcuts-top a svg{ width:21px !important; height:21px !important; stroke:var(--ak-gold-deep) !important; fill:none !important; margin:0 !important; }
  #mobile-shortcuts-top a svg *{ stroke:var(--ak-gold-deep) !important; }
  #mobile-shortcuts-top a i, #mobile-shortcuts-top a i.fa{ font-size:20px !important; line-height:1 !important; color:var(--ak-gold-deep) !important; width:auto !important; margin:0 !important; }
  /* Mini-Label unter dem Icon — Site setzt ::after absolute (→ 0px Breite), zurück in den Fluss */
  #mobile-shortcuts-top a::after{ position:absolute !important; left:50% !important; top:35px !important; transform:translateX(-50%) !important; display:inline-block !important; width:auto !important; height:auto !important; max-width:none !important;
    font-size:8.5px !important; line-height:1 !important; letter-spacing:0 !important; text-transform:uppercase !important; text-align:center !important;
    color:#8a8378 !important; font-weight:600 !important; white-space:nowrap !important; overflow:visible !important; margin-top:0 !important; }
  #mobile-shortcuts-top a[href^="tel:"]::after{ content:"Anrufen" !important; }
  #mobile-shortcuts-top a[href*="verfuegbarkeit"]::after, #mobile-shortcuts-top a[href*="buchen"]::after{ content:"Buchen" !important; }
  #mobile-shortcuts-top a[href*="kontakt"]::after{ content:"Anfragen" !important; }
  #mobile-shortcuts-top a[href^="mailto:"]::after{ content:"E-Mail" !important; }
}

/* ===== FLOATING #quick-contact (tel+mail) vs CleverDent-Chat-Bubble — Kollision auflösen ===== */
/* Desktop: tel/mail-Icons ÜBER die Chat-Bubble heben (Chat sitzt bottom-right) */
#quick-contact{ bottom:96px !important; z-index:9997 !important; }
/* Mobile: redundant zur Footer-Quickbar (ANRUFEN/E-MAIL) → ausblenden, Ecke gehört der Chat-Bubble */
@media (max-width:900px){
  #quick-contact{ display:none !important; }
}

/* ============================================================================
   FOOTER — Alpine-Atmosphäre: warmer→kühler Himmel, Berge + driftende Wolken/Nebel
   (Wolken = SVG-fractalNoise-Turbulenz, 2 Parallax-Layer; #ak-clouds via JS injiziert)
   ============================================================================ */
#footer{ background:linear-gradient(180deg,#fffdf9 0%,#f5f0e6 38%,#eaecef 76%,#dfe4ea 100%) !important; position:relative !important; overflow:hidden !important; }

/* ===== FOOTER PROFESSIONELL: kleinere Typo, klare Hierarchie, engere Abstände (war 19px Links / 18px Text) ===== */
#footer .content-footer{ padding:44px 51px 24px !important; }
/* Spalten-Überschriften: klein, uppercase, gold + kurzer Akzent-Strich */
#footer .content-footer h5{ position:relative !important; font-size:12px !important; line-height:1.3 !important; letter-spacing:.16em !important; text-transform:uppercase !important;
  color:var(--ak-gold-deep) !important; font-family:var(--ak-sans) !important; font-weight:700 !important; margin:0 0 18px !important; padding-bottom:11px !important; }
#footer .content-footer h5::after{ content:'' !important; position:absolute !important; left:0; bottom:0; width:26px; height:2px; background:var(--ak-gold); border-radius:2px; }
/* Fließtext / Adresse / Links → 14px, ruhig */
#footer .content-footer, #footer .content-footer p, #footer .content-footer li, #footer .content-footer a, #footer .content-footer span{ font-size:14px !important; line-height:1.72 !important; }
#footer .content-footer a:not(.button):not([class*=btn]){ color:#6a6258 !important; text-decoration:none !important; transition:color .2s ease !important; }
#footer .content-footer a:not(.button):not([class*=btn]):hover{ color:var(--ak-gold-deep) !important; }
#footer .content-footer ul{ margin:0 !important; padding:0 !important; list-style:none !important; }
#footer .content-footer li{ margin:0 0 2px !important; }
#footer .content-footer strong, #footer .content-footer b{ color:var(--ak-ink) !important; font-weight:600 !important; }
/* Newsletter-Input + Buttons konsistent + kompakter */
#footer .content-footer input[type="email"], #footer .content-footer input[type="text"], #footer .content-footer input.text{ font-size:14px !important; padding:11px 14px !important; }
#footer .content-footer .button, #footer .content-footer button, #footer .content-footer a.button{
  font-size:11.5px !important; letter-spacing:.13em !important; text-transform:uppercase !important; font-weight:600 !important; padding:12px 22px !important; }
/* Copyright-Leiste klein + dezent */
#footer .footer-copyright, #footer [class*="copyright"], #footer .footer-bottom, #footer .footer-bottom *{ font-size:12px !important; }
@media (max-width:767px){
  #footer .content-footer{ padding:34px 22px 20px !important; }
  #footer .content-footer h5{ font-size:11.5px !important; margin-bottom:12px !important; }
  #footer .content-footer, #footer .content-footer p, #footer .content-footer li, #footer .content-footer a, #footer .content-footer span{ font-size:13.5px !important; line-height:1.65 !important; }
}
#footer::before{ opacity:.34 !important; }                 /* Berge präsenter (war .18) */
#footer .inside{ position:relative !important; z-index:2 !important; }  /* Texte über Bergen+Wolken */
#ak-clouds{ position:absolute !important; left:0; right:0; bottom:0; height:min(62%,340px); z-index:1; pointer-events:none; overflow:hidden;
  -webkit-mask:linear-gradient(to top,#000 0%,#000 74%,transparent 100%);
          mask:linear-gradient(to top,#000 0%,#000 74%,transparent 100%); }
#ak-clouds .ak-cl{ position:absolute; inset:0; background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc2NDAnIGhlaWdodD0nMjYwJz48ZGVmcz48ZmlsdGVyIGlkPSdmJyB4PScwJyB5PScwJyB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC4wMTAgMC4wMjInIG51bU9jdGF2ZXM9JzQnIHNlZWQ9JzE0JyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PGZlQ29sb3JNYXRyaXggdHlwZT0nbWF0cml4JyB2YWx1ZXM9JzAgMCAwIDAgMSAgMCAwIDAgMCAxICAwIDAgMCAwIDEgIDAgMCAwIDEuMTUgLTAuNDInLz48L2ZpbHRlcj48L2RlZnM+PHJlY3Qgd2lkdGg9JzY0MCcgaGVpZ2h0PScyNjAnIGZpbHRlcj0ndXJsKCNmKScvPjwvc3ZnPgo="); background-repeat:repeat-x; will-change:transform; }
#ak-clouds .ak-cl-back{ background-size:820px 320px; opacity:.46; animation:ak-drift 70s linear infinite; }
#ak-clouds .ak-cl-front{ background-size:560px 230px; opacity:.66; background-position-y:34px; animation:ak-drift 42s linear infinite reverse; }
@keyframes ak-drift{ from{ background-position-x:0 } to{ background-position-x:-820px } }
@media (prefers-reduced-motion:reduce){ #ak-clouds .ak-cl{ animation:none !important; } }
/* Mobile: Wolken sichtbarer + größer (Brudi) */
@media (max-width:767px){
  #ak-clouds{ height:min(72%,400px) !important; }
  #ak-clouds .ak-cl-back{ opacity:.62 !important; background-size:820px 360px !important; }
  #ak-clouds .ak-cl-front{ opacity:.92 !important; background-size:600px 300px !important; }
  #footer::before{ opacity:.42 !important; }   /* Berge etwas präsenter dazu */
}

/* Footer-Politur: Buttons/Input/Links konsistent gold, etwas Luft */
#footer .ce_form input[type="text"], #footer .ce_form input[type="email"], #footer input.text{
  border:1px solid rgba(156,122,40,.35) !important; border-radius:8px !important; padding:11px 13px !important; background:#fff !important; }
#footer .ce_form input:focus, #footer input.text:focus{ outline:0 !important; border-color:var(--ak-gold) !important; box-shadow:0 0 0 3px rgba(196,162,74,.18) !important; }
#footer a:not(.button):not(.btn){ transition:color .2s ease; }
#footer a:not(.button):not(.btn):hover{ color:var(--ak-gold-deep) !important; }
#footer .content-footer li, #footer .content-footer p{ line-height:1.85 !important; }