:root {
    /* Distances (in px) */
    --distance-tiny: 5px;
    --distance-small: 10px;
    --distance-normal: 20px;
    --distance-big: 40px;
    --distance-huge: 100px;
  
    /* Amplifier für Farb-Mix (20%) */
    --amplifier: 20%;
  
    /* Main Colors (normal als Hex) */
    --color-main-normal: #3498db;
    --color-main-light: color-mix(in srgb, var(--color-main-normal) 80%, #ffffff 20%);
    --color-main-lighter: color-mix(in srgb, var(--color-main-normal) 60%, #ffffff 40%);
    --color-main-dark: color-mix(in srgb, var(--color-main-normal) 80%, #000000 20%);
    --color-main-darker: color-mix(in srgb, var(--color-main-normal) 60%, #000000 40%);
  
    /* Secondary Colors (normal als Hex) */
    --color-secondary-normal: #e74c3c;
    --color-secondary-light: color-mix(in srgb, var(--color-secondary-normal) 80%, #ffffff 20%);
    --color-secondary-lighter: color-mix(in srgb, var(--color-secondary-normal) 60%, #ffffff 40%);
    --color-secondary-dark: color-mix(in srgb, var(--color-secondary-normal) 80%, #000000 20%);
    --color-secondary-darker: color-mix(in srgb, var(--color-secondary-normal) 60%, #000000 40%);
  
    /* Grey Scale (normal als Hex) */
    --color-grey-normal: #888;
    --color-grey-light: color-mix(in srgb, var(--color-grey-normal) 80%, #ffffff 20%);
    --color-grey-lighter: color-mix(in srgb, var(--color-grey-normal) 60%, #ffffff 40%);
    --color-grey-dark: color-mix(in srgb, var(--color-grey-normal) 80%, #000000 20%);
    --color-grey-darker: color-mix(in srgb, var(--color-grey-normal) 60%, #000000 40%);
  
    /* Black & White */
    --color-white: #ffffff;
    --color-black: #000000;
  
    /* Text Colors (normal als Hex) */
    --color-text-normal: #2c3e50;
    --color-text-light: color-mix(in srgb, var(--color-text-normal) 80%, #ffffff 20%);
    --color-text-lighter: color-mix(in srgb, var(--color-text-normal) 60%, #ffffff 40%);
    --color-text-dark: color-mix(in srgb, var(--color-text-normal) 80%, #000000 20%);
    --color-text-darker: color-mix(in srgb, var(--color-text-normal) 60%, #000000 40%);
  
    /* Font Sizes */
    --font-size-tiny: 10px;
    --font-size-small: 14px;
    --font-size-normal: 16px;
    --font-size-big: 20px;
    --font-size-huge: 28px;
  
    /* Layout */
    --page-width: 1200px;
    --header-height: 50px;
    --footer-height: 100px;
  
    /* Breakpoints as media-query strings */
    --mobile: "(max-width: 767px)";                           /* Bis 767px */
    --small: "(min-width: 768px) and (max-width: 991px)";     /* 768px bis 991px */
    --medium: "(min-width: 992px) and (max-width: 1199px)";   /* 992px bis 1199px */
    --big: "(min-width: 1200px)";                             /* Ab 1200px */
  }
  /* app/css/basics.css */

/* Base reset and typography */
html, body {
    padding: 0;
    margin: 0;
    background-color: #EEE;

    /* Use system font stack for GDPR-compliant performance */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: var(--font-size-normal);
    line-height: 1.6;
    color: var(--color-text-normal);
    max-width: 100vw;
    overflow-x: hidden;
}

/* Link styles: modern, clean look */
a {
    color: var(--color-main-normal);
    text-decoration: none;
    transition: color 0.2s ease, text-decoration 0.2s ease;
}
a:hover,
a:focus {
    color: var(--color-main-dark);
    text-decoration: underline;
}

/* Form elements inherit body font */
html, select, textarea, input {
    color: var(--color-text-normal);
    font-family: inherit;
    font-size: inherit;
}

/* Headings use an elegant serif from system fonts */
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--distance-small) 0;
    color: var(--color-text-normal);
}

/* Main content area spacing */
main {
    margin-top: var(--header-height);
    min-height: calc(100vh - var(--header-height) - var(--distance-normal));
}
.container {
    max-width: var(--page-width);
    margin: 0 auto;
    display: block;
}
@media screen and (max-width: 1240px) {
    .container {
        padding: 0 var(--distance-normal);
    }
}

/* Footer styling */
#footer {
    min-height: var(--footer-height);
    background-color: var(--color-grey-darker);
    color: var(--color-white);
    font-size: var(--font-size-small);
    padding: var(--distance-normal);
    h1, h2, h3, h4, h5, h6 {
        color: var(--color-white);
    }
}

/* app/css/header.css */

/* Header base */
#header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background-color: var(--color-white);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 1000;
}

/* Container to center content and space items */
#header .container {
    max-width: var(--page-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--distance-normal);
    height: 100%;
}

/* Logo styling: fixed width */
#header .logo {
    flex: 0 0 270px;
    width: 270px;
    font-size: var(--font-size-huge);
    font-weight: bold;
    color: var(--color-text-normal);
    text-decoration: none;
}

/* Navigation wrapper flex */
#header .nav_menu {
    flex: 1;
    display: flex;
    align-items: center;
    height: 100%;
}

/* Navigation list: fill available space */
#header .nav_menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex: 1;
    justify-content: flex-end;
    gap: var(--distance-big);
}

/* Navigation links: full-height clickable area */
#header .nav_menu a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0;
    font-size: var(--font-size-normal);
    color: var(--color-text-normal);
    text-decoration: none;
    transition: color 0.2s;
}

#header .nav_menu a:hover,
#header .nav_menu a:focus {
    color: var(--color-main-normal);
}

/* Mobile: hide nav, show toggle */
#header .menu_toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;
    background: none;
    border: none;
    cursor: pointer;
    margin-left: auto;
}

#header .menu_toggle .bar {
    display: block;
    height: 2px;
    background-color: var(--color-text-normal);
    border-radius: 1px;
}

/* Responsive breakpoint */
@media screen and (max-width: 860px) {
    /* Show toggle */
    #header .menu_toggle {
        display: flex;
    }
    /* Hide nav by default */
    #header .nav_menu {
        position: absolute;
        top: var(--header-height);
        left: 0;
        right: 0;
        background-color: var(--color-grey-darker);
        max-height: 0;
        overflow: hidden;
        flex-direction: column;
        transition: max-height 0.3s ease-in-out;
        height: auto;
    }
    /* Full-width vertical list without gaps */
    #header .nav_menu ul {
        width: 100%;
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    #header .nav_menu li {
        width: 100%;
    }
    #header .nav_menu li + li {
        border-top: 1px solid #CCC;
    }
    /* Links span full width with comfortable padding and white text */
    #header .nav_menu a {
        display: flex;
        align-items: center;
        padding: var(--distance-normal) var(--distance-normal);
        width: auto;
        height: auto;
        font-size: var(--font-size-normal);
        color: var(--color-white);
    }
    #header .nav_menu a:hover,
    #header .nav_menu a:focus {
        color: var(--color-white);
        opacity: 0.8;
    }
    /* Expand nav when toggled */
    #header .menu_toggle[aria-expanded="true"] + .nav_menu {
        max-height: calc(100vh - var(--header-height));
    }
}
/* ================================
   HERO
   ================================ */

.hero .hero-cta,
.hero .hero-meta {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: var(--distance-normal);
  margin-top: var(--distance-small);
  flex-wrap: nowrap;
}

.hero .hero-cta a,
.hero .hero-meta a {
  flex: 1 1 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(var(--distance-small) + 2px) var(--distance-normal);
  border-radius: 12px;
  text-decoration: none;
  position: relative;
  border: 1px solid transparent;
  transition: background-color .25s ease, border-color .25s ease, transform .15s ease, box-shadow .25s ease;
  background-color: color-mix(in srgb, var(--color-main-normal) 6%, white 94%);
  color: var(--color-text-normal);
  letter-spacing: .2px;
}
/* remove global underline animation inside hero buttons */
.hero .hero-cta a::after,
.hero .hero-meta a::after { display: none !important; }

.hero .hero-cta a:hover,
.hero .hero-meta a:hover,
.hero .hero-cta a:focus,
.hero .hero-meta a:focus {
  background-color: color-mix(in srgb, var(--color-main-normal) 12%, white 88%);
  border-color: color-mix(in srgb, var(--color-main-normal) 25%, white 75%);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,.06);
  outline: none;
}

/* secondary CTA */
.hero .hero-cta .btn.btn-secondary {
  background-color: color-mix(in srgb, var(--color-secondary-normal) 6%, white 94%);
}
.hero .hero-cta .btn.btn-secondary:hover,
.hero .hero-cta .btn.btn-secondary:focus {
  background-color: color-mix(in srgb, var(--color-secondary-normal) 12%, white 88%);
  border-color: color-mix(in srgb, var(--color-secondary-normal) 25%, white 75%);
}

/* phone/mail slightly more "buttony" */
.hero .hero-meta a[href^="tel:"] {
  background-color: color-mix(in srgb, var(--color-main-normal) 10%, white 90%);
  border-color: color-mix(in srgb, var(--color-main-normal) 25%, white 75%);
  font-weight: 700;
}
.hero .hero-meta a[href^="mailto:"] {
  background-color: color-mix(in srgb, var(--color-secondary-normal) 8%, white 92%);
  border-color: color-mix(in srgb, var(--color-secondary-normal) 22%, white 78%);
  font-weight: 700;
}

@media (max-width: 420px) {
  .hero .hero-cta,
  .hero .hero-meta { gap: var(--distance-small); }
  .hero .hero-cta a,
  .hero .hero-meta a {
    padding: var(--distance-small) var(--distance-small);
    border-radius: 10px;
  }
}

/* visually hidden SEO h1 */
.hero .hero-content h1 {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* hero layout */
.hero { position: relative; overflow: visible; }
.hero .hero-inner { position: relative; background-color: #c2eaf3; padding: 50px 0 0; }
.hero .hero-content { position: relative; z-index: 2; text-align: center; padding: 0 20px; }
.hero .hero-media { position: relative; z-index: 1; margin-top: -20px; }
.hero .hero-media img { display: block; width: 100%; height: auto; opacity: .9; filter: saturate(1.02) contrast(1.02); }
@media (min-width: 860px) { .hero .hero-media { margin-top: -220px; } }


/* ================================
   LEISTUNGEN – CARDS
   ================================ */

#leistungen-section .card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--distance-normal);
}
@media (min-width: 500px) {
  #leistungen-section .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

#leistungen-section .card {
  position: relative;
  display: block;
  border-radius: 14px;
  overflow: hidden;
  background: var(--color-grey-lighter);
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  transition: box-shadow .25s ease, transform .15s ease;
}
#leistungen-section .card:hover,
#leistungen-section .card:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.10);
}

/* media + white/blue wash on hover */
#leistungen-section .card > img {
  display: block; width: 100%; height: auto;
  transition: opacity .4s ease, transform .4s ease, filter .4s ease;
  opacity: 1; filter: none;
}
#leistungen-section .card:hover > img,
#leistungen-section .card:focus-within > img {
  opacity: .08; transform: scale(1.02);
  filter: saturate(.6) contrast(.9) blur(1px);
}
#leistungen-section .card::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: color-mix(in srgb, var(--color-main-normal) 12%, white 88%);
  opacity: 0; transition: opacity .35s ease;
}
#leistungen-section .card:hover::before,
#leistungen-section .card:focus-within::before { opacity: .92; }

/* overlay body */
#leistungen-section .card .card-body {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: var(--distance-small); padding: var(--distance-normal);
  color: var(--color-white);
  background: linear-gradient(to top, rgba(0,0,0,.65) 0%, rgba(0,0,0,.32) 55%, rgba(0,0,0,0) 85%);
  opacity: 0; transform: translateY(6px);
  transition: opacity .35s ease, transform .35s ease, color .2s ease, background .2s ease;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
#leistungen-section .card:hover .card-body,
#leistungen-section .card:focus-visible .card-body,
#leistungen-section .card:focus-within .card-body {
  opacity: 1; transform: translateY(0);
  background: none; color: var(--color-text-darker); text-shadow: none;
}
#leistungen-section .card h3 { margin: 0; font-size: var(--font-size-big); line-height: 1.25; }
#leistungen-section .card p { margin: 0; color: var(--color-grey-dark); }

/* "Mehr erfahren" chip */
#leistungen-section .card .more {
  margin-top: var(--distance-small);
  align-self: flex-start;
  padding: 6px 10px; border-radius: 10px;
  background-color: color-mix(in srgb, var(--color-main-normal) 12%, white 88%);
  border: 1px solid color-mix(in srgb, var(--color-main-normal) 28%, white 72%);
  color: var(--color-text-darker);
  transition: background-color .2s ease, border-color .2s ease, transform .15s ease;
}
#leistungen-section .card .more:hover,
#leistungen-section .card .more:focus {
  background-color: color-mix(in srgb, var(--color-main-normal) 18%, white 82%);
  border-color: color-mix(in srgb, var(--color-main-normal) 36%, white 64%);
  transform: translateY(-1px);
}

#leistungen-section .card:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-main-normal) 60%, white 40%);
  outline-offset: 3px;
}
@media (hover: none) {
  #leistungen-section .card::before { opacity: 0; }
  #leistungen-section .card .card-body { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  #leistungen-section .card > img,
  #leistungen-section .card::before,
  #leistungen-section .card .card-body,
  #leistungen-section .card .more { transition: none; }
}


/* ================================
   GENERIC SECTIONS & ANCHORS
   ================================ */

a[name] {
  display: block;
  position: relative;
  top: calc(-1 * var(--header-height));
  visibility: hidden;
  height: 0;
  margin: 0;
  padding: 0;
}
section { margin-top: var(--distance-big); scroll-margin-top: var(--header-height); }
section:first-of-type { margin-top: 0; }


/* ================================
   DETAIL-SECTIONS (Vitalwellen / Kombitherapie)
   ================================ */

#vitalwellen-section,
#kombitherapie-section { margin-top: var(--distance-big); }
#vitalwellen-section { --accent: var(--color-main-normal); }
#kombitherapie-section { --accent: var(--color-secondary-normal); }

#vitalwellen-section .info,
#kombitherapie-section .info {
  background: color-mix(in srgb, var(--accent) 4%, white 96%);
  border: 1px solid color-mix(in srgb, var(--accent) 14%, white 86%);
  border-left: 6px solid color-mix(in srgb, var(--accent) 36%, white 64%);
  border-radius: 14px;
  padding: var(--distance-big) var(--distance-normal);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

#vitalwellen-section h2,
#kombitherapie-section h2 {
  margin: 0 0 var(--distance-small);
  font-size: clamp(22px, 3.5vw, 30px);
  line-height: 1.2;
  color: var(--color-text-darker);
}

#vitalwellen-section .col-content > p,
#kombitherapie-section .col-content > p {
  margin: 0 0 var(--distance-normal);
  color: var(--color-text-dark);
}

/* facts */
#vitalwellen-section .facts,
#kombitherapie-section .facts {
  list-style: none; margin: 0 0 var(--distance-normal); padding: 0;
  display: grid; grid-template-columns: 1fr; row-gap: var(--distance-small); column-gap: var(--distance-normal);
}
#vitalwellen-section .facts li,
#kombitherapie-section .facts li {
  position: relative; padding-left: 1.4rem; color: var(--color-text-normal);
}
#vitalwellen-section .facts li::before,
#kombitherapie-section .facts li::before {
  content: ""; position: absolute; left: 0; top: .6em;
  width: 8px; height: 8px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 70%, white 30%);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, white 75%);
}
@media (min-width: 800px) {
  #vitalwellen-section .facts,
  #kombitherapie-section .facts { grid-template-columns: 1fr 1fr; }
}

/* CTA */
#vitalwellen-section .btn,
#kombitherapie-section .btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 14px; border-radius: 12px; text-decoration: none;
  background: color-mix(in srgb, var(--accent) 10%, white 90%);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, white 74%);
  color: var(--color-text-darker);
  transition: transform .15s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
#vitalwellen-section .btn:hover, #vitalwellen-section .btn:focus,
#kombitherapie-section .btn:hover, #kombitherapie-section .btn:focus {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--accent) 16%, white 84%);
  border-color: color-mix(in srgb, var(--accent) 36%, white 64%);
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
  outline: none;
}

/* gallery */
#vitalwellen-section .gallery-grid,
#kombitherapie-section .gallery-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--distance-normal);
  margin-top: var(--distance-normal);
}
@media (min-width: 500px) {
  #vitalwellen-section .gallery-grid,
  #kombitherapie-section .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
#vitalwellen-section .gallery-grid .media,
#kombitherapie-section .gallery-grid .media {
  margin: 0; border-radius: 14px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 12%, white 88%);
  box-shadow: 0 6px 16px rgba(0,0,0,.06); background: #fff;
}
#vitalwellen-section .gallery-grid img,
#kombitherapie-section .gallery-grid img {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
  transition: transform .35s ease, filter .35s ease;
}
#vitalwellen-section .gallery-grid .media:hover img,
#kombitherapie-section .gallery-grid .media:hover img {
  transform: scale(1.03); filter: saturate(1.05) contrast(1.02);
}
@media (prefers-reduced-motion: reduce) {
  #vitalwellen-section .btn, #kombitherapie-section .btn,
  #vitalwellen-section .gallery-grid img, #kombitherapie-section .gallery-grid img { transition: none; }
}


/* ================================
   SCHWERPUNKTE / FACHBEGRIFFE / PREISE
   ================================ */

#schwerpunkte-section h2,
#fachbegriffe-section h2,
#preise-section h2 {
  position: relative;
  margin-bottom: var(--distance-normal);
  font-size: clamp(22px, 3.2vw, 30px);
  line-height: 1.2;
  color: var(--color-text-darker);
}
#schwerpunkte-section h2::after,
#fachbegriffe-section h2::after,
#preise-section h2::after {
  content: ""; display: block; width: 64px; height: 4px; margin-top: 8px; border-radius: 2px;
}
#schwerpunkte-section h2::after { background: color-mix(in srgb, var(--color-main-normal) 60%, white 40%); }
#fachbegriffe-section h2::after { background: color-mix(in srgb, var(--color-secondary-normal) 60%, white 40%); }
#preise-section h2::after      { background: color-mix(in srgb, var(--color-text-normal) 60%, white 40%); }

/* Schwerpunkte Pills */
#schwerpunkte-section .pill-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--distance-normal);
}
@media (min-width: 720px) {
  #schwerpunkte-section .pill-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
#schwerpunkte-section .pill-grid ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: var(--distance-small);
}
#schwerpunkte-section .pill-grid li {
  position: relative; padding: 10px 14px 10px 42px; border-radius: 999px;
  background: color-mix(in srgb, var(--color-main-normal) 6%, white 94%);
  border: 1px solid color-mix(in srgb, var(--color-main-normal) 18%, white 82%);
  color: var(--color-text-normal);
  transition: background-color .2s ease, border-color .2s ease, transform .12s ease;
}
#schwerpunkte-section .pill-grid li::before {
  content: ""; position: absolute; left: 12px; top: 50%;
  width: 12px; height: 12px; transform: translateY(-50%); border-radius: 50%;
  background: color-mix(in srgb, var(--color-main-normal) 60%, white 40%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-main-normal) 18%, white 82%);
}
#schwerpunkte-section .pill-grid li:hover {
  background: color-mix(in srgb, var(--color-main-normal) 12%, white 88%);
  border-color: color-mix(in srgb, var(--color-main-normal) 28%, white 72%);
  transform: translateY(-1px);
}

/* Fachbegriffe Cards */
#fachbegriffe-section.feature-cards .feature-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--distance-normal);
}
@media (min-width: 640px) {
  #fachbegriffe-section.feature-cards .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
  #fachbegriffe-section.feature-cards .feature-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
#fachbegriffe-section.feature-cards .feature {
  background: var(--color-white);
  border: 1px solid var(--color-grey-light);
  border-radius: 14px;
  padding: var(--distance-normal);
  box-shadow: 0 6px 16px rgba(0,0,0,.05);
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
#fachbegriffe-section.feature-cards .feature:hover,
#fachbegriffe-section.feature-cards .feature:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0,0,0,.08);
  border-color: color-mix(in srgb, var(--color-secondary-normal) 28%, white 72%);
}
#fachbegriffe-section.feature-cards .feature h3 {
  margin: 0 0 6px; font-size: var(--font-size-big); color: var(--color-text-darker);
}
#fachbegriffe-section.feature-cards .feature p {
  margin: 0; color: var(--color-text-normal);
}

/* Preise */
#preise-section .price-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--distance-normal);
  margin-top: var(--distance-normal);
}
@media (min-width: 640px) {
  #preise-section .price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
#preise-section .price-card {
  background: var(--color-white);
  border: 1px solid var(--color-grey-light);
  border-radius: 14px;
  padding: var(--distance-normal);
  box-shadow: 0 6px 16px rgba(0,0,0,.05);
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
#preise-section .price-card:hover,
#preise-section .price-card:focus-within {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.07);
  border-color: color-mix(in srgb, var(--color-text-normal) 20%, white 80%);
}
#preise-section .price-card h3 {
  margin: 0 0 8px; font-size: var(--font-size-big); color: var(--color-text-darker);
}
#preise-section .price-card ul {
  list-style: none; padding: 0; margin: 0; display: grid; gap: 8px;
}
#preise-section .price-card li {
  padding: 8px 10px; border-radius: 10px;
  background: color-mix(in srgb, var(--color-grey-light) 12%, white 88%);
  color: var(--color-text-normal);
}
#preise-section .hint {
  margin-top: var(--distance-normal);
  font-size: var(--font-size-small);
  color: var(--color-text-normal);
  background: color-mix(in srgb, var(--color-secondary-normal) 4%, white 96%);
  border: 1px solid color-mix(in srgb, var(--color-secondary-normal) 12%, white 88%);
  border-left: 4px solid color-mix(in srgb, var(--color-secondary-normal) 36%, white 64%);
  border-radius: 10px;
  padding: 12px 14px;
}
@media (prefers-reduced-motion: reduce) {
  #schwerpunkte-section .pill-grid li,
  #fachbegriffe-section.feature-cards .feature,
  #preise-section .price-card { transition: none; }
}


/* ================================
   ÜBER MICH
   ================================ */

#uebermich-section .row {
  display: grid; grid-template-columns: 1fr;
  align-items: center; gap: var(--distance-big);
}
@media (min-width: 600px) {
  #uebermich-section .row {
    grid-template-columns: 0.9fr 1.1fr;
    grid-template-areas: "media content";
  }
  #uebermich-section .col-media   { grid-area: media; }
  #uebermich-section .col-content { grid-area: content; }
}
#uebermich-section.alt-row {
  background: color-mix(in srgb, var(--color-main-normal) 2.5%, white 97.5%);
}
#uebermich-section .col-content {
  background: color-mix(in srgb, var(--color-main-normal) 4%, white 96%);
  border: 1px solid color-mix(in srgb, var(--color-main-normal) 14%, white 86%);
  border-left: 6px solid color-mix(in srgb, var(--color-main-normal) 36%, white 64%);
  border-radius: 16px;
  padding: var(--distance-big) var(--distance-normal);
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
}
#uebermich-section h2 {
  margin: 0 0 var(--distance-small);
  font-size: clamp(22px, 3.2vw, 30px);
  line-height: 1.2; color: var(--color-text-darker);
}
#uebermich-section .col-content > p { margin: 0 0 var(--distance-normal); color: var(--color-text-dark); }
#uebermich-section .facts {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: 1fr; row-gap: var(--distance-small);
}
@media (min-width: 720px) {
  #uebermich-section .facts { grid-template-columns: 1fr 1fr; column-gap: var(--distance-normal); }
}
#uebermich-section .facts li {
  position: relative; padding-left: 1.4rem; color: var(--color-text-normal);
}
#uebermich-section .facts li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 9px; height: 9px; border-radius: 50%;
  background: color-mix(in srgb, var(--color-main-normal) 65%, white 35%);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-main-normal) 22%, white 78%);
}
#uebermich-section .col-media img {
  display: block; width: 100%; height: auto; object-fit: cover;
  border-radius: 18px; border: 1px solid var(--color-grey-light);
  box-shadow: 0 10px 24px rgba(0,0,0,.08); background: #fff;
}
@media (prefers-reduced-motion: reduce) {
  #uebermich-section .col-content { box-shadow: none; }
}

/* ================================
   KONTAKT (full container width)
   ================================ */

/* Let the global .container rules handle the width; no custom grid here */
#kontakt-section .container { display: block; }

/* Stretch inner blocks to full container width */
#kontakt-section .contact-intro,
#kontakt-section .contact-form,
#kontakt-section .privacy-note {
  max-width: none;      /* remove inner max width */
  margin-inline: 0;     /* no centering margin */
}

#kontakt-section h2 {
  margin-bottom: var(--distance-normal);
  /* keep left-aligned; remove text-align if you had set it elsewhere */
}

/* Intro box (full width, comfy padding) */
#kontakt-section .contact-intro {
  margin-bottom: var(--distance-normal);
  background: color-mix(in srgb, var(--color-main-normal) 6%, white 94%);
  border: 1px solid color-mix(in srgb, var(--color-main-normal) 18%, white 82%);
  border-left: 6px solid color-mix(in srgb, var(--color-main-normal) 36%, white 64%);
  border-radius: 12px;
  padding: var(--distance-normal);
}

/* Messages (full width) */
#kontakt-section .form-success,
#kontakt-section .form-error-summary {
  border-radius: 12px;
  padding: var(--distance-normal);
  margin-bottom: var(--distance-normal);
  font-weight: 600;
}
#kontakt-section .form-success {
  background: color-mix(in srgb, #2ecc71 10%, white 90%);
  border: 1px solid color-mix(in srgb, #2ecc71 22%, white 78%);
  color: var(--color-text-darker);
}
#kontakt-section .form-error-summary {
  background: color-mix(in srgb, #e74c3c 10%, white 90%);
  border: 1px solid color-mix(in srgb, #e74c3c 22%, white 78%);
  color: var(--color-text-darker);
}
#kontakt-section .form-error-summary ul { margin: var(--distance-small) 0 0; }

/* Form (card-like, but full width) */
#kontakt-section .contact-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--distance-small);
  padding: var(--distance-normal);
  background: #fff;
  border: 1px solid var(--color-grey-light);
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(0,0,0,.05);
}

#kontakt-section .contact-form label {
  font-weight: 600;
  margin-top: var(--distance-small);
}

#kontakt-section .contact-form input,
#kontakt-section .contact-form textarea {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--color-grey-light);
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.03) inset;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

#kontakt-section .contact-form input:focus,
#kontakt-section .contact-form textarea:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--color-main-normal) 36%, white 64%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-main-normal) 20%, white 80%);
}

/* Invalid state (client-side) */
#kontakt-section .contact-form .invalid {
  border-color: color-mix(in srgb, #e74c3c 50%, white 50%);
  background: color-mix(in srgb, #e74c3c 6%, white 94%);
}

/* Submit */
#kontakt-section .contact-form .btn {
  margin-top: var(--distance-normal);
  align-self: start;
}

/* Privacy note (full width) */
#kontakt-section .privacy-note {
  margin-top: var(--distance-normal);
  font-size: var(--font-size-small);
  color: var(--color-text-normal);
}