
:root{
  --teal:#54B1A9;
  --teal-dark:#148e89;
  --ink:#173f4c;
  --ink2:#314e59;
  --pale:#eef8f7;
  --pale2:#f7fbfb;
  --line:#dce9e8;
  --white:#fff;
  --shadow:0 14px 40px rgba(23,63,76,.09);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink2);background:#fff;line-height:1.6}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:Georgia,"Times New Roman",serif;color:var(--ink);line-height:1.12;margin:0 0 .55em}
h1{font-size:clamp(2.5rem,5vw,5rem);letter-spacing:-.03em}
h2{font-size:clamp(2rem,3.8vw,3.7rem);letter-spacing:-.025em}
h3{font-size:1.35rem}
p{margin:.4rem 0 1.1rem}
.container{width:min(1180px,92vw);margin:0 auto}
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.95);backdrop-filter:blur(12px);border-bottom:1px solid rgba(220,233,232,.8)}
.nav-wrap{height:104px;display:flex;align-items:center;gap:28px}
.brand img{width:285px;max-height:84px;object-fit:contain}
.main-nav{display:flex;gap:26px;margin-left:auto;font-weight:650;font-size:.95rem}
.main-nav a{position:relative;padding:31px 0 27px}
.main-nav a:after{content:"";position:absolute;left:0;right:0;bottom:15px;height:2px;background:var(--teal);transform:scaleX(0);transition:.2s}
.main-nav a:hover:after{transform:scaleX(1)}
.phone-pill,.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;background:linear-gradient(135deg,var(--teal-dark),var(--teal));color:#fff;border-radius:999px;padding:.85rem 1.25rem;font-weight:800;border:0;box-shadow:0 8px 20px rgba(20,142,137,.18);cursor:pointer}
.phone-pill{white-space:nowrap}
.btn:hover,.phone-pill:hover{filter:brightness(.96);transform:translateY(-1px)}
.menu-btn{display:none;margin-left:auto;background:none;border:0;font-size:1.8rem;color:var(--ink)}
.hero{background:linear-gradient(90deg,#f8fcfc 0%,#f3fbfa 46%,#fff 46%);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1fr 1.06fr;min-height:650px;align-items:stretch}
.hero-copy{padding:110px 40px 90px 0;display:flex;flex-direction:column;justify-content:center}
.eyebrow{font-size:.8rem;font-weight:900;letter-spacing:.14em;color:var(--teal-dark);margin-bottom:1rem}
.hero-copy p{font-size:1.16rem;max-width:600px}
.hero-photo{background:url("assets/hero-care.jpg") center/cover no-repeat;min-height:620px;position:relative}
.hero-photo:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(248,252,252,.78),transparent 26%)}
.cta-row{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:15px}
.text-link{font-weight:800;color:var(--teal-dark)}
.quick-services{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.three,.four{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.quick-services article{text-align:center;padding:50px 34px;position:relative}
.quick-services article+article:before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;background:var(--line)}
.icon,.card-icon,.value-icon{font-size:2.6rem;color:var(--teal-dark);margin-bottom:10px}
.quick-services p{max-width:260px;margin:.2rem auto}
.local-intro{display:grid;grid-template-columns:1fr 1fr;background:linear-gradient(90deg,#fff 0,#fff 50%,#eff9f8 50%,#eff9f8 100%)}
.split-image img{width:100%;height:100%;min-height:430px;object-fit:cover}
.split-copy{padding:85px clamp(32px,6vw,100px);display:flex;flex-direction:column;justify-content:center}
.section{padding:95px 0}
.section-head{text-align:center;max-width:820px;margin:0 auto 50px}
.section-head p{font-size:1.08rem}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:linear-gradient(180deg,#fff,#f7fbfb);border:1px solid #e6f0ef;border-radius:20px;padding:34px;box-shadow:var(--shadow);min-height:230px}
.card p{margin-bottom:0}
.legal-note{font-size:.82rem;color:#6b7e85;margin-top:28px;text-align:center}
.location-section{background:linear-gradient(180deg,#f5fbfa,#fff)}
.location-grid{display:grid;grid-template-columns:.9fr 1.35fr;gap:55px;align-items:center}
.location-copy p{font-size:1.06rem}
.contact-mini{display:flex;flex-direction:column;gap:8px;margin:18px 0 26px;font-weight:750}
.location-gallery{display:grid;grid-template-columns:2fr .75fr;gap:14px}
.location-gallery img{width:100%;height:100%;object-fit:cover;border-radius:18px;box-shadow:var(--shadow)}
.location-main{min-height:510px}
.location-detail{min-height:510px}
.career{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;background:#fff}
.career-image img{width:100%;height:100%;min-height:390px;object-fit:cover}
.career-copy{padding:70px clamp(35px,7vw,120px);display:flex;flex-direction:column;justify-content:center}
.values{padding-top:80px;padding-bottom:80px}
.four{grid-template-columns:repeat(4,1fr);gap:0}
.values article{text-align:center;padding:25px 30px;position:relative}
.values article+article:before{content:"";position:absolute;left:0;top:15%;bottom:15%;width:1px;background:var(--line)}
.contact-section{padding:90px 0 120px;background:radial-gradient(circle at 92% 20%,#eff9f8 0,transparent 35%),#fff}
.contact-grid{display:grid;grid-template-columns:1fr .9fr;gap:60px;align-items:start}
.contact-items{display:grid;gap:15px;margin-top:30px}
.contact-items a,.contact-items span{display:flex;gap:12px;align-items:flex-start;font-size:1.02rem}
.contact-form{background:#fff;border:1px solid #e1eeee;border-radius:22px;padding:28px;box-shadow:var(--shadow)}
.contact-form label{display:block;font-weight:800;margin-bottom:15px}
.contact-form input,.contact-form textarea{width:100%;margin-top:6px;padding:12px 14px;border:1px solid #cfe2e0;border-radius:12px;font:inherit;outline:none}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--teal)}
.contact-form small{display:block;color:#73858b;margin-top:12px}
.footer{position:relative;background:linear-gradient(135deg,#0e8f8a,#19aaa3);color:#fff;padding:72px 0 30px;overflow:hidden}
.footer:before{content:"";position:absolute;left:-8%;right:-8%;top:-48px;height:90px;background:#fff;border-radius:0 0 50% 50%/0 0 100% 100%}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr .6fr;gap:40px;align-items:center}
.footer-brand img{width:210px;filter:brightness(0) invert(1)}
.footer-brand p{font-family:Georgia,serif;font-size:1.35rem;font-style:italic}
.footer-links,.footer-legal{display:flex;flex-wrap:wrap;gap:15px 22px;font-weight:700}
.copyright{font-size:.82rem;opacity:.86;margin-top:35px}
@media (max-width: 900px){
  .phone-pill{display:none}
  .menu-btn{display:block}
  .main-nav{position:absolute;top:104px;left:0;right:0;background:#fff;padding:18px 4vw;display:none;flex-direction:column;gap:4px;border-bottom:1px solid var(--line)}
  .main-nav.open{display:flex}
  .main-nav a{padding:12px 0}
  .hero-grid,.local-intro,.location-grid,.career,.contact-grid{grid-template-columns:1fr}
  .hero-copy{padding:65px 0 40px}
  .hero-photo{min-height:440px}
  .three,.cards{grid-template-columns:1fr}
  .quick-services article+article:before{top:0;left:18%;right:18%;width:auto;height:1px;bottom:auto}
  .four{grid-template-columns:1fr 1fr}
  .values article:nth-child(3):before{display:none}
  .location-gallery{grid-template-columns:1fr 1fr}
  .location-main{grid-column:1/-1;min-height:360px}
  .location-detail{min-height:260px}
  .split-copy{padding:55px 6vw}
  .career-copy{padding:55px 6vw}
  .footer-grid{grid-template-columns:1fr;gap:24px}
}
@media (max-width: 560px){
  .brand img{width:160px}
  .nav-wrap{height:74px}
  .main-nav{top:74px}
  h1{font-size:2.55rem}
  h2{font-size:2.2rem}
  .hero-photo{min-height:370px}
  .section{padding:70px 0}
  .four{grid-template-columns:1fr}
  .values article+article:before{top:0;left:18%;right:18%;width:auto;height:1px;bottom:auto}
  .location-gallery{grid-template-columns:1fr}
  .location-main,.location-detail{grid-column:auto;min-height:280px}
}

/* V2 refinements */
.hero h1{
  font-size:clamp(2.3rem,4.1vw,4.15rem);
  max-width:760px;
}
.hero-copy{
  padding-top:88px;
  padding-bottom:78px;
}
.hero-photo{
  background-position:center;
  min-height:570px;
}
.hero-photo:before{
  background:linear-gradient(90deg,rgba(248,252,252,.48),transparent 20%);
}

/* All decorative/service icons are SVG and use one CI color */
.icon svg,.card-icon svg,.value-icon svg{
  width:50px;
  height:50px;
  fill:none;
  stroke:var(--teal-dark);
  stroke-width:2.3;
  stroke-linecap:round;
  stroke-linejoin:round;
  display:block;
  margin:0 auto;
}
.card-icon svg{margin:0 0 12px 0}
.value-icon svg{margin:0 auto 10px}

/* Location: one strong image only */
.location-gallery.single{
  display:block;
}
.location-gallery.single .location-main{
  width:100%;
  min-height:0;
  max-height:620px;
  object-fit:cover;
  object-position:center;
}

/* Footer V2: logo + one clean horizontal navigation line */
.footer-grid{
  grid-template-columns:320px 1fr;
  gap:42px;
}
.footer-links-all{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:flex-end;
  gap:24px;
  white-space:nowrap;
  font-weight:700;
  font-size:.92rem;
}
.footer-legal{display:none}

@media (max-width: 1100px){
  .main-nav{gap:18px}
  .footer-links-all{gap:15px;font-size:.84rem}
}
@media (max-width: 900px){
  .footer-grid{grid-template-columns:1fr}
  .footer-links-all{justify-content:flex-start;flex-wrap:wrap;white-space:normal}
}
@media (max-width:560px){
  .brand img{width:205px;max-height:70px}
  .nav-wrap{height:86px}
  .main-nav{top:86px}
}

/* V3 – full-width calm Rhine hero */
.hero-v3{
  position:relative;
  min-height:620px;
  background:
    url("assets/hero-rhein.jpg") center 58% / cover no-repeat;
  overflow:hidden;
}
.hero-v3 .hero-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,
      rgba(248,252,252,.95) 0%,
      rgba(248,252,252,.88) 26%,
      rgba(248,252,252,.58) 47%,
      rgba(248,252,252,.16) 68%,
      rgba(248,252,252,0) 100%);
}
.hero-v3-inner{
  position:relative;
  z-index:2;
  min-height:620px;
  display:flex;
  align-items:center;
}
.hero-v3-copy{
  width:min(690px,58%);
  padding:76px 0 70px;
}
.hero-v3-copy h1{
  font-size:clamp(2.45rem,4.35vw,4.5rem);
  line-height:1.06;
  max-width:760px;
  margin-bottom:24px;
}
.hero-v3-copy p{
  max-width:610px;
  font-size:1.17rem;
  line-height:1.65;
  color:#294a55;
}
.hero-v3-copy .text-link{
  color:#176f6c;
}
@media (max-width:900px){
  .hero-v3{
    min-height:580px;
    background-position:61% center;
  }
  .hero-v3 .hero-overlay{
    background:linear-gradient(90deg,
      rgba(248,252,252,.96) 0%,
      rgba(248,252,252,.88) 55%,
      rgba(248,252,252,.42) 78%,
      rgba(248,252,252,.14) 100%);
  }
  .hero-v3-inner{min-height:580px}
  .hero-v3-copy{width:78%;padding:62px 0}
}
@media (max-width:560px){
  .hero-v3{
    min-height:610px;
    background-position:65% center;
  }
  .hero-v3 .hero-overlay{
    background:rgba(248,252,252,.80);
  }
  .hero-v3-copy{width:100%}
  .hero-v3-copy h1{font-size:2.55rem}
}

/* V4 – final compact landing-page composition */
body{
  background:#eef8f7;
}
.site-header{
  background:transparent;
  border:0;
  backdrop-filter:none;
}
.site-header .nav-wrap{
  background:#fff;
  margin-top:14px;
  padding:0 26px;
  border-radius:22px 22px 0 0;
  box-shadow:0 10px 32px rgba(23,63,76,.06);
}
main{
  width:min(1240px,94vw);
  margin:0 auto;
  background:#fff;
  box-shadow:0 18px 50px rgba(23,63,76,.07);
}
.hero-v3{
  width:calc(100% - 32px);
  margin:0 16px;
  border-radius:0 0 18px 18px;
  min-height:585px;
  background-position:center 58%;
}
.hero-v3-inner{
  min-height:585px;
}
.hero-v3-copy{
  padding-left:34px;
}
.quick-services{
  margin:0 16px;
  border-left:1px solid var(--line);
  border-right:1px solid var(--line);
  border-radius:0 0 18px 18px;
}
#leistungen.section{
  padding-top:72px;
  padding-bottom:64px;
  background:linear-gradient(180deg,#f4fbfa,#fff);
}
.cards{
  grid-template-columns:repeat(3,1fr);
}
.card{
  min-height:210px;
}
.location-section{
  padding-top:56px;
  padding-bottom:56px;
}
.location-grid{
  grid-template-columns:.88fr 1.25fr;
  gap:42px;
}
.location-gallery.single .location-main{
  max-height:520px;
  border-radius:18px;
}
.values{
  padding-top:58px;
  padding-bottom:58px;
  background:linear-gradient(180deg,#fff,#f7fbfb);
}
.contact-section{
  padding-top:64px;
  padding-bottom:88px;
}
.footer{
  width:min(1240px,94vw);
  margin:0 auto 18px;
  border-radius:0 0 22px 22px;
  box-shadow:0 18px 50px rgba(23,63,76,.10);
}
.footer:before{
  left:-2%;
  right:-2%;
}

/* make header logo and type proportions closer to approved mockup */
.brand img{
  width:300px;
  max-height:88px;
}
.main-nav{
  gap:22px;
  font-size:.92rem;
}
.hero-v3-copy h1{
  font-size:clamp(2.45rem,4.05vw,4.15rem);
}
.hero-v3-copy p{
  font-size:1.08rem;
  max-width:560px;
}

/* keep every micro-icon consistently turquoise */
.icon svg,.card-icon svg,.value-icon svg{
  stroke:#119a96;
}
.quick-services .icon,
.card-icon,
.value-icon{
  color:#119a96;
}

/* remove any leftover visual complexity */
.local-intro,.career{display:none!important}

@media (max-width:900px){
  .site-header .nav-wrap{
    margin-top:8px;
    border-radius:16px 16px 0 0;
  }
  main,.footer{width:min(100%,96vw)}
  .hero-v3{width:calc(100% - 20px);margin:0 10px}
  .quick-services{margin:0 10px}
  .cards{grid-template-columns:1fr}
  .location-grid{grid-template-columns:1fr}
  .hero-v3-copy{padding-left:0}
}

/* V5: Header exakt bündig mit der zentralen Seitenfläche */
.site-header {
  width: min(1240px, 94vw) !important;
  max-width: 1240px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}
.site-header .nav-wrap {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}
@media (max-width:900px) {
  .site-header {
    width: min(100%, 96vw) !important;
  }
}

/* V6 – consistent rounded-corner system + clean hero */
.hero-v3{
  background-image:url("assets/hero-rhein-clean.jpg") !important;
  background-position:center center !important;
  border-radius:18px !important;
  overflow:hidden !important;
}
.hero-v3 .hero-overlay{
  display:none !important;
}
.hero-v3:before,
.hero-v3:after{
  content:none !important;
}

/* Keep text readable without any duplicated/transparent text effect */
.hero-v3-copy{
  position:relative;
}
.hero-v3-copy:before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-28px -34px -28px -34px;
  background:linear-gradient(90deg,
    rgba(255,255,255,.90) 0%,
    rgba(255,255,255,.82) 56%,
    rgba(255,255,255,.28) 100%);
  border-radius:18px;
  filter:blur(0);
}

/* The three service teasers directly below the hero are a separate rounded module */
.quick-services{
  margin-top:16px !important;
  border:1px solid var(--line) !important;
  border-radius:18px !important;
  overflow:hidden !important;
}

/* Preserve existing rounded cards/modules consistently */
.card,
.location-gallery img,
.contact-form{
  border-radius:18px !important;
}

@media (max-width:900px){
  .hero-v3{
    border-radius:16px !important;
  }
  .quick-services{
    border-radius:16px !important;
    margin-top:12px !important;
  }
  .hero-v3-copy:before{
    inset:-18px -18px -18px -18px;
    background:rgba(255,255,255,.86);
  }
}

/* V9 – professionelles Kontaktformular */
.hp-field{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}
.privacy-check{
  display:flex !important;
  gap:10px;
  align-items:flex-start;
  font-weight:500 !important;
  font-size:.9rem;
  margin:4px 0 18px !important;
}
.privacy-check input{
  width:auto !important;
  margin-top:4px !important;
}
.privacy-check a{
  color:var(--teal-dark);
  text-decoration:underline;
}
.form-status{
  margin-top:14px;
  padding:0;
  font-weight:700;
  border-radius:12px;
}
.form-status.success{
  padding:12px 14px;
  color:#176b4d;
  background:#ecf8f1;
  border:1px solid #bfe4cf;
}
.form-status.error{
  padding:12px 14px;
  color:#9b2d30;
  background:#fff1f1;
  border:1px solid #efc7c7;
}
#contactSubmit:disabled{
  opacity:.65;
  cursor:wait;
}

.form-hint,.operator-note{font-size:.88rem;color:#60767d;line-height:1.6}
.operator-note{margin:28px auto;text-align:center}

/* Final V1.1 – restrained legal typography */
.legal-page-title{font-size:clamp(2rem,3.5vw,2.8rem)!important;line-height:1.15!important;margin-bottom:0!important}
.legal-subheading{font-family:inherit!important;font-size:1rem!important;font-weight:700!important;line-height:1.5!important;margin:22px 0 8px!important;color:inherit!important}
