:root{--pink:#d62872;--pink-soft:#fdeaf2;--pink-line:#f3c8d9;--green:#073f38;--text:#20332f;--muted:#66706d;--white:#fff;--shadow:0 24px 70px rgba(214,40,114,.16)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Arial,sans-serif;color:var(--text);background:linear-gradient(180deg,#fff 0%,#fff8fb 65%,#fff 100%)}a{color:inherit}.site-header{height:110px;display:flex;justify-content:space-between;align-items:center;max-width:1220px;margin:0 auto;padding:0 28px;border-bottom:1px solid rgba(214,40,114,.18)}.brand img{width:220px;height:auto;display:block;mix-blend-mode:multiply}.nav{display:flex;gap:34px;font-weight:700}.nav a{text-decoration:none;color:#193631}.nav a:hover{color:var(--pink)}main{max-width:1220px;margin:0 auto;padding:0 28px}.hero{position:relative;display:grid;grid-template-columns:1fr 1.05fr;gap:70px;align-items:center;padding:70px 0 45px;overflow:hidden}.eyebrow{display:inline-flex;align-items:center;gap:10px;background:var(--pink-soft);border:1px solid var(--pink-line);color:var(--pink);border-radius:999px;padding:10px 18px;text-transform:uppercase;font-size:14px;font-weight:800;letter-spacing:.08em}.eyebrow span{width:10px;height:10px;background:var(--pink);border-radius:50%}.hero h1{margin:26px 0 20px;font-family:Georgia,serif;color:var(--green);font-size:clamp(48px,6vw,82px);line-height:.94;letter-spacing:-.04em}.lead{font-size:23px;line-height:1.45;max-width:620px;color:#3f4846}.actions{display:flex;gap:18px;margin-top:32px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;padding:17px 26px;border-radius:999px;font-weight:800;text-decoration:none}.primary{background:var(--pink);color:white;box-shadow:0 18px 34px rgba(214,40,114,.28)}.secondary{background:white;color:var(--green);border:1px solid var(--pink-line)}.hero-image{position:relative;border-radius:28px;overflow:hidden;box-shadow:var(--shadow);background:#082f2c;min-height:440px}.hero-image:before{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(0deg,rgba(7,63,56,.35),transparent);z-index:1}.hero-image img{width:100%;height:100%;min-height:440px;object-fit:cover;object-position:center;display:block}.hero-image:after{content:"";position:absolute;right:-80px;bottom:-65px;width:240px;height:240px;background:radial-gradient(circle,var(--pink-soft),transparent 70%);opacity:.8}.leaf{position:absolute;z-index:-1;opacity:.35}.leaf:before,.leaf:after{content:"";display:block;width:88px;height:30px;border-radius:100% 0 100% 0;border:1px solid var(--pink);transform:rotate(-35deg);margin:16px}.leaf-left{left:-55px;top:210px}.leaf-right{right:-45px;top:220px;transform:scaleX(-1)}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:25px 0 64px}.cards article{background:rgba(255,255,255,.86);border:1px solid var(--pink-line);border-radius:24px;padding:30px;box-shadow:0 18px 55px rgba(7,63,56,.05)}.icon{width:64px;height:64px;border-radius:50%;background:var(--pink-soft);color:var(--pink);display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:800;margin-bottom:16px}.cards h2,.content-grid h2{font-family:Georgia,serif;color:var(--green);font-size:30px;margin:0 0 12px}.cards p,.welcome-box p{line-height:1.65;color:#596460;font-size:17px}.content-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:28px;margin-bottom:70px}.contact-box{background:linear-gradient(135deg,#073f38,#0b5d51);color:white;border-radius:28px;padding:38px;box-shadow:var(--shadow)}.contact-box h2{color:white;font-size:42px}.contact-box p{font-size:18px;line-height:1.7}.contact-box a{color:white;font-weight:800}.welcome-box{position:relative;background:white;border:1px solid var(--pink-line);border-radius:28px;padding:38px;overflow:hidden}.welcome-box:after{content:"";position:absolute;right:-45px;bottom:-55px;width:210px;height:210px;background:radial-gradient(circle,var(--pink-soft),transparent 70%)}footer{text-align:center;padding:26px;color:#6f7774;border-top:1px solid rgba(214,40,114,.15);background:#fff6fa}.legal{max-width:900px;padding:55px 28px 80px}.legal h1{font-family:Georgia,serif;color:var(--green);font-size:56px}.legal p{font-size:18px;line-height:1.75}.legal strong{color:var(--green)}@media(max-width:900px){.site-header{height:auto;gap:18px;align-items:flex-start;flex-direction:column;padding:20px}.brand img{width:185px}.nav{gap:16px;flex-wrap:wrap}.hero{grid-template-columns:1fr;gap:34px;padding:38px 0}.hero-image,.hero-image img{min-height:360px}.cards,.content-grid{grid-template-columns:1fr}.hero h1{font-size:52px}.lead{font-size:20px}}@media(max-width:520px){main{padding:0 18px}.site-header{padding:18px}.brand img{width:168px}.nav{font-size:14px}.hero h1{font-size:43px}.hero-image,.hero-image img{min-height:310px}.cards article,.contact-box,.welcome-box{padding:26px}.btn{width:100%}}



/* === Mobile Premium Update v3 === */
@media (max-width: 768px) {
  body { padding-bottom: 92px; }

  header, .site-header, .topbar {
    padding: 18px 22px 12px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    border-bottom: 1px solid rgba(214, 37, 123, .16);
  }

  header img, .logo img, .brand img {
    max-width: 185px !important;
    width: 185px !important;
    height: auto !important;
  }

  header .brand span, .brand-name, .logo-text { display: none !important; }

  nav:not(.mobile-bottom-nav),
  header nav,
  .site-nav,
  .desktop-nav {
    display: none !important;
  }

  .hero, .hero-inner, .intro, .hero-grid {
    display: flex !important;
    flex-direction: column !important;
    padding-top: 32px !important;
    gap: 24px !important;
  }

  .hero-content, .hero-text, .left { order: 1 !important; }
  .hero-image, .portrait-card, .right, .image-wrap {
    order: 2 !important;
    margin-top: 6px !important;
    width: 100% !important;
    min-height: 360px !important;
    border-radius: 28px !important;
    overflow: hidden !important;
  }

  h1, .hero h1 {
    font-size: clamp(3.1rem, 12vw, 4.7rem) !important;
    line-height: .92 !important;
    letter-spacing: -1.8px !important;
    margin-bottom: 20px !important;
  }

  .hero p, .subtitle, .lead {
    font-size: 1.35rem !important;
    line-height: 1.35 !important;
  }

  .eyebrow, .badge, .pill {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: .92rem !important;
    letter-spacing: 1.2px !important;
    padding: 14px 18px !important;
  }

  .actions, .hero-actions, .button-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    width: 100% !important;
  }

  .btn, .button, .cta, .hero a[href^="mailto"] {
    width: 100% !important;
    min-height: 64px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.15rem !important;
    border-radius: 999px !important;
  }

  .hero img, .portrait-card img, .hero-image img, .image-wrap img, .right img {
    width: 100% !important;
    height: auto !important;
    max-height: 430px !important;
    object-fit: cover !important;
    object-position: center 20% !important;
    border-radius: 28px !important;
    display: block !important;
  }

  .services, .cards, .service-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .contact-welcome, .contact-grid, .info-grid {
    grid-template-columns: 1fr !important;
  }

  .mobile-bottom-nav {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 9999;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 18px 55px rgba(16, 62, 56, .18);
    border: 1px solid rgba(214, 37, 123, .18);
  }

  .mobile-bottom-nav a {
    text-decoration: none;
    color: #063f39;
    font-weight: 800;
    font-size: .94rem;
    text-align: center;
    padding: 13px 10px;
    border-radius: 999px;
  }

  .mobile-bottom-nav a.mail {
    background: #d7267d;
    color: #fff;
  }
}

@media (min-width: 769px) {
  .mobile-bottom-nav { display: none !important; }
}



/* === Mobile Premium Update v4: Portrait vor Buttons === */
@media (max-width: 768px) {
  .hero,
  .hero-inner,
  .intro,
  .hero-grid {
    display: flex !important;
    flex-direction: column !important;
  }

  .hero-content,
  .hero-text,
  .left {
    display: flex !important;
    flex-direction: column !important;
  }

  .hero-image,
  .portrait-card,
  .right,
  .image-wrap {
    order: 2 !important;
    margin: 22px 0 18px !important;
    width: 100% !important;
    min-height: auto !important;
  }

  .actions,
  .hero-actions,
  .button-row {
    order: 3 !important;
    margin-top: 18px !important;
  }

  .hero img,
  .portrait-card img,
  .hero-image img,
  .image-wrap img,
  .right img {
    width: 100% !important;
    max-height: 420px !important;
    object-fit: cover !important;
    object-position: center 18% !important;
    border-radius: 28px !important;
  }

  /* Falls Bild und Text in zwei Spalten getrennt liegen: Bild direkt nach Text hochziehen */
  .hero-content + .hero-image,
  .left + .right,
  .hero-text + .portrait-card {
    margin-top: 18px !important;
  }

  /* CTA-Buttons bewusst unterhalb des Portraits platzieren */
  .hero .btn,
  .hero .button,
  .hero .cta,
  .hero a[href^="mailto"] {
    min-height: 62px !important;
  }
}



/* === Mobile Premium Update v5: CTA wirklich unter Portrait === */
.mobile-hero-actions {
  display: none;
}

@media (max-width: 768px) {
  .hero-copy .actions {
    display: none !important;
  }

  .mobile-hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    width: 100% !important;
    order: 3 !important;
    margin-top: 6px !important;
  }

  .mobile-hero-actions .btn {
    width: 100% !important;
    min-height: 62px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.15rem !important;
    border-radius: 999px !important;
    text-decoration: none !important;
  }

  .hero-image {
    order: 2 !important;
    margin-top: 24px !important;
    margin-bottom: 12px !important;
  }

  .hero-image img {
    max-height: 420px !important;
    object-position: center 16% !important;
  }

  .mobile-bottom-nav {
    bottom: 12px !important;
  }
}