/* Custom Theme Styles */

/* ─────────────────────────────────────────────────────────────
   0. SCHRIFTEN (Google Fonts – bereits geladen: Montserrat, Roboto)
      Wir verbessern die Typographie-Nuancen
   ───────────────────────────────────────────────────────────── */

.row {
  margin: 0 !important;
}

.me-3 {
  margin-right: 1rem !important;
}

body {
  font-family:
    "Roboto",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Helvetica Neue",
    Arial,
    sans-serif !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
  letter-spacing: 0.01em !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.ce_headline {
  font-family:
    "Montserrat",
    -apple-system,
    BlinkMacSystemFont,
    sans-serif !important;
  letter-spacing: -0.02em !important;
  color: #3d3530 !important;
}

h2.ce_headline,
h2 {
  font-weight: 700 !important;
  font-size: 2rem !important;
  position: relative !important;
}

h4 {
  font-weight: 600 !important;
  font-size: 1.3rem !important;
  color: #8b4a2b !important;
  margin-top: 2rem !important;
  margin-bottom: 1rem !important;
}

p {
  color: #3d3530 !important;
  line-height: 1.65 !important;
}

#footer p {
  text-align: center !important;
}
@media (min-width: 992px) {
  #footer p {
    text-align: left !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   1. HINTERGRÜNDE & GESAMTLAYOUT
   ───────────────────────────────────────────────────────────── */

body,
#wrapper,
main,
#container {
  background-color: #fdfbf5 !important;
  color: #3d3530 !important;
}

/* Alternate Sections */
.bg-light,
.bg-white,
section.bg-light {
  background-color: #f5f0e3 !important;
}

section:not(.bg-light):not(.first) {
  background-color: transparent !important;
}

/* Section Spacing */
section.mod_article {
  padding-top: 70px !important;
  padding-bottom: 70px !important;
}

/* Add navbar offset to the first section of any page so titles don't disappear */
#main .inside > .mod_article:first-child,
#main .inside > *:first-child > .mod_article {
  padding-top: 180px !important;
}

@media (min-width: 768px) {
  section.mod_article {
    padding-top: 100px !important;
    padding-bottom: 100px !important;
  }
  
  #main .inside > .mod_article:first-child,
  #main .inside > *:first-child > .mod_article {
    padding-top: 230px !important;
  }
}

/* Section Dividers */
section.mod_article + section.mod_article {
  border-top: 1px solid #e5ddd0 !important;
}

/* Headline Ornaments */
section h2.ce_headline::after {
  content: "" !important;
  display: block !important;
  width: 60px !important;
  height: 3px !important;
  background: linear-gradient(90deg, #8b4a2b, #c4916e) !important;
  border-radius: 2px !important;
  margin: 16px auto 0 auto !important;
}

/* ─────────────────────────────────────────────────────────────
   2. NAVBAR – Glasmorphismus-Look auf Elfenbein
   ───────────────────────────────────────────────────────────── */

#mainNav {
  background-color: rgba(253, 251, 245, 0.92) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  box-shadow: 0 1px 24px rgba(61, 53, 48, 0.06) !important;
  border: none !important;
  border-bottom: 1px solid rgba(229, 221, 208, 0.6) !important;
  transition:
    background-color 0.4s ease,
    box-shadow 0.4s ease !important;
}

/* Navbar Scrolled State */
#mainNav.navbar-shrink {
  background-color: rgba(253, 251, 245, 0.97) !important;
  box-shadow: 0 2px 32px rgba(61, 53, 48, 0.1) !important;
}

#mainNav .navbar-brand {
  color: #8b4a2b !important;
  font-weight: 700 !important;
}

#mainNav .navbar-brand small,
#mainNav .navbar-brand small span {
  color: #6b635b !important;
  font-weight: 500 !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

#mainNav .navbar-brand img.img-fluid-logo {
  transition: transform 0.3s ease !important;
}

#mainNav .navbar-brand:hover img.img-fluid-logo {
  transform: scale(1.04) !important;
}

#mainNav .navbar-nav .nav-item .nav-link {
  color: #3d3530 !important;
  font-weight: 500 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  transition: color 0.3s ease !important;
  position: relative !important;
}

/* Nav Link Hover */
#mainNav .navbar-nav .nav-item .nav-link::after {
  content: "" !important;
  position: absolute !important;
  bottom: 6px !important;
  left: 50% !important;
  width: 0 !important;
  height: 2px !important;
  background-color: #8b4a2b !important;
  border-radius: 1px !important;
  transition:
    width 0.3s ease,
    left 0.3s ease !important;
}

#mainNav .navbar-nav .nav-item .nav-link:hover::after,
#mainNav .navbar-nav .nav-item .nav-link.active::after {
  width: 60% !important;
  left: 20% !important;
}

#mainNav .navbar-nav .nav-item .nav-link:hover,
#mainNav .navbar-nav .nav-item .nav-link.active {
  color: #8b4a2b !important;
}

/* Mobile Toggler */
#mainNav .navbar-toggler {
  background-color: #8b4a2b !important;
  color: #fdfbf5 !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 10px 18px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  box-shadow: 0 4px 14px rgba(139, 74, 43, 0.25) !important;
  transition: all 0.3s ease !important;
}

#mainNav .navbar-toggler:hover {
  background-color: #6b3520 !important;
  box-shadow: 0 6px 20px rgba(139, 74, 43, 0.35) !important;
}

/* Mobile Dropdown */
@media (max-width: 991px) {
  #mainNav .navbar-collapse {
    background-color: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border-top: 1px solid rgba(229, 221, 208, 0.6) !important;
    margin-top: 4px !important;
  }

  #mainNav .navbar-nav {
    padding: 6px 0 8px 0 !important;
  }

  #mainNav .navbar-nav .nav-item {
    border: none !important;
    background: none !important;
  }

  #mainNav .navbar-nav .nav-item .nav-link::after {
    display: none !important;
  }

  #mainNav .navbar-nav .nav-item .nav-link {
    padding: 7px 20px !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    font-size: 0.82rem !important;
    letter-spacing: 0.08em !important;
    line-height: 1.3 !important;
    transition:
      background-color 0.2s ease,
      color 0.2s ease !important;
  }

  #mainNav .navbar-nav .nav-item .nav-link:hover,
  #mainNav .navbar-nav .nav-item .nav-link.active {
    background-color: rgba(229, 221, 208, 0.35) !important;
    color: #8b4a2b !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   3. HERO – v7: "Text-First Hero"
      Der Header enthält nur noch die Navbar.
      .theme-hero-section IST der Hero: warmer Gradient-Hintergrund, großes
      Spacing, Portrait + Text als Hauptelement.
      Das Couch-Bild liegt als .hero-accent-image dezent darunter.
      ──────────────────────────────────────────────────────────
      In Contao nachmachen:
      1. Bild-Element aus dem Header-Artikel löschen
      2. Im Home-Artikel: neues Bild-Element am Ende hinzufügen
      3. Bild-Element CSS-Klasse: hero-accent-image
   ───────────────────────────────────────────────────────────── */

/* Header */
header#header {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  position: relative !important;
}

header#header .inside {
  padding: 0 !important;
}

/* Remove Header Ornament */
header#header::after {
  display: none !important;
}

/* ── .theme-hero-section = Der Hero ── */
section:has(.intro-layout),
.theme-hero-section {
  /* Navbar Offset */
  padding-top: 230px !important;
  padding-bottom: 48px !important;
  /* Mobile Padding */
  padding-left: 15px !important;
  padding-right: 15px !important;
  /* Gradient Background */
  background: linear-gradient(
    135deg,
    #eadbb8 0%,
    #f5f0e3 35%,
    #fdfbf5 70%,
    #fdfbf5 100%
  ) !important;
  position: relative !important;
  /* Remove Top Border */
  border-top: none !important;
}

/* Bottom Shadow */
section:has(.intro-layout)::after,
.theme-hero-section::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: linear-gradient(
    90deg,
    rgba(229, 221, 208, 0) 0%,
    rgba(229, 221, 208, 0.7) 30%,
    rgba(196, 145, 110, 0.4) 50%,
    rgba(229, 221, 208, 0.7) 70%,
    rgba(229, 221, 208, 0) 100%
  ) !important;
}

/* Accent Image */
.hero-accent-image {
  max-width: 720px !important;
  margin: 44px auto 0 auto !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  position: relative !important;
  box-shadow:
    0 4px 20px rgba(61, 53, 48, 0.08),
    0 1px 4px rgba(61, 53, 48, 0.05) !important;
  /* Animations */
  animation:
    fadeSlideUp 1s cubic-bezier(0.25, 0.8, 0.25, 1) 0.3s both,
    heroFloat 6s ease-in-out 1.3s infinite alternate !important;
  transition:
    box-shadow 0.4s ease,
    transform 0.4s ease !important;
}

.hero-accent-image figure {
  margin-bottom: 0;
}

@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroFloat {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-8px);
  }
}

.hero-accent-image img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  /* Image Filter */
}

/* Responsive */
@media (max-width: 991px) {
  section:has(.intro-layout),
  .theme-hero-section {
    padding-top: 180px !important;
    padding-bottom: 40px !important;
  }

  .hero-accent-image {
    max-width: 88vw !important;
    margin-top: 36px !important;
    border-radius: 14px !important;
  }

  .hero-accent-image::after {
    border-radius: 0 0 14px 14px !important;
  }

  .hero-accent-image::before {
    border-radius: 14px !important;
  }
}

@media (max-width: 575px) {
  section:has(.intro-layout),
  .theme-hero-section {
    padding-top: 140px !important;
    padding-bottom: 32px !important;
  }

  .hero-accent-image {
    max-width: 100% !important;
    margin-top: 28px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .hero-accent-image::after,
  .hero-accent-image::before {
    border-radius: 0 !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   4. HOME / INTRO SECTION – Hero-Typografie
   ───────────────────────────────────────────────────────────── */

/* Subtitle */
section:has(.intro-layout) .ce_text.text-center p,
.theme-hero-section .ce_text.text-center p {
  font-size: 0.88rem !important;
  color: #8b4a2b !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  margin-bottom: 4px !important;
}

/* Main Title */
section:has(.intro-layout) .ce_text.text-center p strong,
.theme-hero-section .ce_text.text-center p strong {
  color: #3d3530 !important;
  font-family: "Montserrat", sans-serif !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  display: block !important;
  margin-top: 8px !important;
  line-height: 1.3 !important;
}

/* Intro Layout */
.intro-layout {
  display: flex !important;
  align-items: flex-start !important;
  gap: 48px !important;
  max-width: 960px !important;
  margin: 20px auto 0 auto !important;
}

/* Photo Column */
.intro-photo {
  flex: 0 0 280px !important;
  margin: 0 !important;
}

.intro-photo img {
  width: 100% !important;
  height: auto !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 32px rgba(61, 53, 48, 0.13) !important;
  display: block !important;
  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease !important;
}

.intro-photo img:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 44px rgba(61, 53, 48, 0.18) !important;
}

/* Text Column */
.intro-text {
  flex: 1 !important;
  min-width: 0 !important;
}

.intro-text p {
  font-size: 1.02rem !important;
  line-height: 1.65 !important;
  color: #3d3530 !important;
  text-align: left !important;
  margin-bottom: 0.85rem !important;
}

.intro-text p:last-child {
  margin-bottom: 0 !important;
}

/* Tablet */
@media (max-width: 991px) {
  .intro-layout {
    gap: 32px !important;
  }

  .intro-photo {
    flex: 0 0 220px !important;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .intro-layout {
    flex-direction: column !important;
    align-items: center !important;
    gap: 24px !important;
  }

  .intro-photo {
    flex: 0 0 auto !important;
    width: 70% !important;
    max-width: 280px !important;
  }

  .intro-text p {
    text-align: left !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   5. BILDER – Allgemein
   ───────────────────────────────────────────────────────────── */

figure.image_container img {
  border-radius: 16px !important;
  border: none !important;
  box-shadow: 0 8px 28px rgba(61, 53, 48, 0.1) !important;
  transition:
    transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
    box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

figure.image_container:hover img {
  transform: translateY(-4px) scale(1.01) !important;
  box-shadow: 0 16px 44px rgba(61, 53, 48, 0.15) !important;
}

/* Portrait Margin */
figure.image_container.float-right {
  margin-left: 32px !important;
  margin-bottom: 24px !important;
}

/* Mobile Image Alignment */
@media (max-width: 767px) {
  .ce_text.container.w-75,
  .ce_text.container.w-75.p-3 {
    width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  figure.image_container.float-right {
    float: none !important;
    display: block !important;
    margin: 0 auto 28px auto !important;
    max-width: 80% !important;
    text-align: center !important;
  }

  figure.image_container.float-right img {
    margin: 0 auto !important;
    display: block !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   6. BLOG-SEKTION
   ───────────────────────────────────────────────────────────── */

.mod_newslist .layout_full {
  background-color: #fdfbf5 !important;
  border: 1px solid #e5ddd0 !important;
  border-radius: 16px !important;
  padding: 32px 36px !important;
  margin-bottom: 28px !important;
  box-shadow: 0 4px 20px rgba(61, 53, 48, 0.05) !important;
  transition:
    box-shadow 0.3s ease,
    transform 0.3s ease !important;
}

.mod_newslist .layout_full:hover {
  box-shadow: 0 8px 32px rgba(61, 53, 48, 0.1) !important;
  transform: translateY(-2px) !important;
}

.mod_newslist .layout_full h1 {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: #3d3530 !important;
  margin-bottom: 6px !important;
}

.mod_newslist .layout_full h2 {
  font-size: 1.1rem !important;
  font-weight: 500 !important;
  color: #8b4a2b !important;
  margin-bottom: 16px !important;
}

.mod_newslist .layout_full h2::after {
  display: none !important;
}

.mod_newslist .layout_full .info {
  font-size: 0.82rem !important;
  color: #9b9389 !important;
  letter-spacing: 0.04em !important;
  margin-bottom: 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid #e5ddd0 !important;
}

/* ─────────────────────────────────────────────────────────────
   7. QUALIFIKATION, LEISTUNGEN, ABLAUF – Content-Sektionen
   ───────────────────────────────────────────────────────────── */

/* List Styles */
.ce_text ul {
  padding-left: 0 !important;
  list-style: none !important;
}

.ce_text ul li {
  position: relative !important;
  padding-left: 24px !important;
  margin-bottom: 10px !important;
  line-height: 1.65 !important;
}

.ce_text ul li::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 10px !important;
  width: 8px !important;
  height: 8px !important;
  background-color: #c4916e !important;
  border-radius: 50% !important;
  opacity: 0.7 !important;
}

/* Service Blocks */
.theme-service-item,
.service-block {
  padding-top: 28px !important;
  padding-bottom: 28px !important;
  margin-bottom: 12px !important;
  border-bottom: 1px solid #e5ddd0 !important;
}

/* First Service Block Reset */
.theme-service-item:first-of-type {
  padding-top: 0 !important;
}

.theme-service-item:last-of-type,
.service-block:last-of-type {
  border-bottom: none !important;
}

/* ─────────────────────────────────────────────────────────────
   8. KONTAKT-SEKTION
   ───────────────────────────────────────────────────────────── */

.ce_text p strong {
  color: #3d3530 !important;
}

/* Email Highlight */
.ce_text mark,
mark {
  background-color: transparent !important;
  color: #8b4a2b !important;
  padding: 0 !important;
  font-weight: 600 !important;
}

/* ─────────────────────────────────────────────────────────────
   9. GOOGLE MAPS
   ───────────────────────────────────────────────────────────── */

.googlemap {
  padding: 0 15px !important;
}

.googlemap iframe {
  border-radius: 20px !important;
  box-shadow: 0 8px 32px rgba(61, 53, 48, 0.1) !important;
  border: none !important;
  filter: sepia(15%) hue-rotate(5deg) contrast(96%) brightness(102%) !important;
  transition: box-shadow 0.3s ease !important;
}

.googlemap iframe:hover {
  box-shadow: 0 12px 44px rgba(61, 53, 48, 0.15) !important;
}

/* ─────────────────────────────────────────────────────────────
   10. FORMULARE & INPUTS
   ───────────────────────────────────────────────────────────── */

.ce_form .formbody {
  max-width: 600px !important;
  margin: 0 auto !important;
}

.widget.form-group {
  margin-bottom: 20px !important;
}

.widget.form-group label {
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #6b635b !important;
  margin-bottom: 8px !important;
}

input.form-control,
textarea.form-control,
select.form-control {
  border-radius: 12px !important;
  background-color: #ffffff !important;
  border: 1.5px solid #e5ddd0 !important;
  box-shadow: none !important;
  color: #3d3530 !important;
  padding: 14px 18px !important;
  font-size: 0.95rem !important;
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.2s ease !important;
}

input.form-control:focus,
textarea.form-control:focus {
  border-color: #8b4a2b !important;
  background-color: #ffffff !important;
  box-shadow:
    0 0 0 4px rgba(139, 74, 43, 0.1),
    0 2px 12px rgba(139, 74, 43, 0.06) !important;
  outline: none !important;
  transform: translateY(-1px) !important;
}

textarea.form-control {
  min-height: 140px !important;
  resize: vertical !important;
}

/* ─────────────────────────────────────────────────────────────
   11. BUTTONS
   ───────────────────────────────────────────────────────────── */

.btn-primary,
.button,
button.submit,
input.submit {
  background: linear-gradient(135deg, #8b4a2b 0%, #a0603e 100%) !important;
  border: none !important;
  color: #fdfbf5 !important;
  border-radius: 12px !important;
  padding: 15px 32px !important;
  font-family: "Montserrat", sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.88rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  box-shadow: 0 4px 16px rgba(139, 74, 43, 0.25) !important;
  transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  cursor: pointer !important;
}

.btn-primary:hover,
.button:hover,
button.submit:hover,
input.submit:hover {
  background: linear-gradient(135deg, #6b3520 0%, #8b4a2b 100%) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 28px rgba(139, 74, 43, 0.35) !important;
  color: #fdfbf5 !important;
}

.btn-primary:active,
.button:active,
button.submit:active {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(139, 74, 43, 0.3) !important;
}

.btn-primary:focus,
.button:focus,
button.submit:focus {
  box-shadow:
    0 0 0 4px rgba(139, 74, 43, 0.2),
    0 4px 16px rgba(139, 74, 43, 0.25) !important;
  outline: none !important;
}

/* ─────────────────────────────────────────────────────────────
   12. LINKS
   ───────────────────────────────────────────────────────────── */

main a:not(.btn):not(.nav-link):not(.navbar-brand),
.ce_text a {
  color: #8b4a2b !important;
  text-decoration: none !important;
  background-image: linear-gradient(#c4916e, #c4916e) !important;
  background-position: 0 100% !important;
  background-repeat: no-repeat !important;
  background-size: 100% 1px !important;
  transition:
    background-size 0.3s ease,
    color 0.3s ease !important;
}

main a:not(.btn):not(.nav-link):not(.navbar-brand):hover,
.ce_text a:hover {
  color: #6b3520 !important;
  background-size: 100% 2px !important;
}

/* ─────────────────────────────────────────────────────────────
   13. FOOTER
   ───────────────────────────────────────────────────────────── */

#footer,
#footer .bg-secondary {
  background-color: #2e2824 !important;
  color: #e5ddd0 !important;
  border-top: none !important;
}

#footer .copyright {
  background-color: #2e2824 !important;
}

#footer p,
#footer .text-white {
  color: #c4b9a8 !important;
  font-size: 0.88rem !important;
}

#footer a,
#footer .nav-link {
  color: #e5ddd0 !important;
  text-decoration: none !important;
  transition: color 0.3s ease !important;
  background-image: none !important;
}

#footer a:hover,
#footer .nav-link:hover {
  color: #c4916e !important;
  background-image: none !important;
}

/* ─────────────────────────────────────────────────────────────
   14. COOKIEBAR – passend zum Gesamt-Design
   ───────────────────────────────────────────────────────────── */

.cookiebar {
  background-color: #2e2824 !important;
  border-top: 1px solid #4a3f38 !important;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15) !important;
}

.cookiebar__button {
  background-color: #8b4a2b !important;
  color: #fdfbf5 !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  padding: 0 16px !important;
  transition: background-color 0.3s ease !important;
}

.cookiebar__button:hover {
  background-color: #a0603e !important;
}

/* ─────────────────────────────────────────────────────────────
   15. SCROLL-TO-TOP BUTTON
   ───────────────────────────────────────────────────────────── */

#toTop {
  background-color: #8b4a2b !important;
  color: #fdfbf5 !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(139, 74, 43, 0.3) !important;
  padding: 10px 14px !important;
  font-size: 0.8rem !important;
  transition: all 0.3s ease !important;
}

#toTop:hover {
  background-color: #6b3520 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(139, 74, 43, 0.4) !important;
}

/* ─────────────────────────────────────────────────────────────
   16. TEXT-SELECTION
   ───────────────────────────────────────────────────────────── */

::selection {
  background-color: rgba(196, 145, 110, 0.3) !important;
  color: #3d3530 !important;
}

::-moz-selection {
  background-color: rgba(196, 145, 110, 0.3) !important;
  color: #3d3530 !important;
}

/* ─────────────────────────────────────────────────────────────
   17. SMOOTH SCROLL & GLOBALE TRANSITIONS
   ───────────────────────────────────────────────────────────── */

html {
  scroll-behavior: smooth !important;
}

/* Sanftes Einblenden beim Seitenaufbau */
body {
  animation: v7FadeIn 0.6s ease-out !important;
}

@keyframes v7FadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─────────────────────────────────────────────────────────────
   18. RESPONSIVE FEINSCHLIFF
   ───────────────────────────────────────────────────────────── */

/* Tablets */
@media (max-width: 991px) {
  h2.ce_headline,
  h2 {
    font-size: 1.7rem !important;
  }

  section.mod_article {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }

  #main .inside > .mod_article:first-child,
  #main .inside > *:first-child > .mod_article {
    padding-top: 180px !important;
  }

  #mainNav .navbar-brand img.img-fluid-logo {
    max-height: 52px !important;
    width: auto !important;
  }
}

/* Mobiltelefone */
@media (max-width: 575px) {
  h2.ce_headline,
  h2 {
    font-size: 1.45rem !important;
  }

  h4 {
    font-size: 1.15rem !important;
  }

  section.mod_article {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }

  #main .inside > .mod_article:first-child,
  #main .inside > *:first-child > .mod_article {
    padding-top: 140px !important;
  }

  #mainNav .navbar-brand img.img-fluid-logo {
    max-height: 44px !important;
    width: auto !important;
  }
  #mainNav .navbar-brand small {
    font-size: 0.62rem !important;
    letter-spacing: 0.04em !important;
  }

  /* Blog-Karten: weniger Padding auf Handy */
  .mod_newslist .layout_full {
    padding: 22px 20px !important;
    border-radius: 12px !important;
  }

  /* Kontaktformular: volle Breite */
  .ce_form .formbody {
    padding: 0 !important;
  }

  /* Google Map: weniger Border-Radius auf sehr kleinen Screens */
  .googlemap iframe {
    border-radius: 14px !important;
  }

  /* Buttons: etwas weniger Padding */
  .btn-primary,
  .button,
  button.submit {
    padding: 13px 24px !important;
    font-size: 0.82rem !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   19. DRUCKANSICHT – sauber & ohne Spielereien
   ───────────────────────────────────────────────────────────── */

@media print {
  body {
    animation: none !important;
    background-color: #fff !important;
    color: #000 !important;
  }

  #mainNav,
  #toTop,
  .cookiebar,
  .googlemap {
    display: none !important;
  }

  section.mod_article {
    padding: 20px 0 !important;
    border: none !important;
  }

  a {
    color: #000 !important;
    text-decoration: underline !important;
  }
}