/* ============ Pflegedienst Rosenblüte — Shared Styles ============ */
:root{
  --rose:      #C98A99;
  --wine:      #7A4B57;
  --sage:      #4A5D53;
  --warmwhite: #F6EEE9;
  --anthracite:#3A3532;
  --rose-soft: #E4C7CE;
  --ink:       #4a433f;
  --muted:     #8a7f7a;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--warmwhite); color:var(--anthracite);
  font-family:'Work Sans', sans-serif; line-height:1.65; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{font-family:'Fraunces', serif; font-weight:500; color:var(--wine); letter-spacing:-0.01em;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:1080px; margin:0 auto; padding:0 24px;}

/* -------- Top bar -------- */
.top-bar{background:var(--wine); color:var(--warmwhite); text-align:center; padding:12px 16px; font-size:1rem;}
.top-bar a{display:inline-flex; align-items:center; gap:8px;}
.top-bar .tb-label{font-weight:400; opacity:0.85;}
.top-bar .tb-number{font-weight:700; font-size:1.25rem; letter-spacing:0.01em;}
.top-bar a{color:var(--warmwhite);}
.top-bar strong{font-weight:600;}

/* -------- Header / nav -------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(246,238,233,0.94); backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(122,75,87,0.12);
}
.nav{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 24px; max-width:1080px; margin:0 auto;}
.brand{display:flex; align-items:center; gap:12px; flex-shrink:0; white-space:nowrap;}
.brand img{height:44px; width:44px; border-radius:50%;}
.brand span{font-family:'Fraunces', serif; font-size:1.1rem; color:var(--wine); font-weight:600; letter-spacing:0.01em;}
nav.links{display:flex; gap:26px;}
nav.links a{font-size:0.94rem; color:var(--anthracite); position:relative; padding:4px 0;}
nav.links a.active{color:var(--wine); font-weight:600;}
nav.links a::after{content:''; position:absolute; left:0; bottom:0; width:0; height:1.5px; background:var(--rose); transition:width .25s ease;}
nav.links a:hover::after{width:100%;}
.nav-cta{background:var(--wine); color:var(--warmwhite); padding:10px 20px; border-radius:100px; font-size:0.9rem; font-weight:500; transition:background .2s ease; flex-shrink:0; white-space:nowrap;}
.nav-cta:hover{background:var(--rose);}
.burger{display:none; font-size:1.6rem; background:none; border:none; color:var(--wine); cursor:pointer;}
.mobile-links{display:none; flex-direction:column; background:var(--warmwhite); border-top:1px solid rgba(122,75,87,0.12);}
.mobile-links.open{display:flex;}
.mobile-links a{padding:14px 24px; font-size:0.98rem; color:var(--anthracite); border-bottom:1px solid rgba(122,75,87,0.08);}
.mobile-links a:last-child{color:var(--wine); font-weight:600;}

/* -------- Buttons -------- */
.btn{display:inline-block; padding:14px 30px; border-radius:100px; font-weight:500; font-size:0.98rem; transition:transform .18s ease, box-shadow .18s ease; border:none; cursor:pointer;}
.btn-primary{background:var(--wine); color:var(--warmwhite);}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(122,75,87,0.28);}
.btn-secondary{border:1.5px solid var(--wine); color:var(--wine); background:transparent;}
.btn-secondary:hover{transform:translateY(-2px); background:rgba(122,75,87,0.06);}
.btn-small{padding:10px 22px; font-size:0.88rem;}

/* -------- Home hero -------- */
.hero{padding:64px 24px 80px; text-align:center; position:relative; overflow:hidden;}
.hero::before{content:''; position:absolute; top:-180px; left:50%; transform:translateX(-50%); width:640px; height:640px; border-radius:50%; border:1px solid rgba(122,75,87,0.15);}
.hero::after{content:''; position:absolute; top:-260px; left:50%; transform:translateX(-50%); width:840px; height:840px; border-radius:50%; border:1px solid rgba(122,75,87,0.08);}
.hero-inner{position:relative; z-index:2;}
.eyebrow{display:inline-block; font-size:0.8rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--sage); font-weight:600; margin-bottom:18px;}
.hero h1{font-size:clamp(2.1rem, 5vw, 3.4rem); line-height:1.14; max-width:820px; margin:0 auto 18px;}
.hero p.lead{max-width:560px; margin:0 auto 8px; font-size:1.06rem; color:#5b5350;}

/* -------- Hero atmospheric photo (contact page) -------- */
.hero.has-photo{min-height:640px; display:flex; align-items:center; justify-content:center; padding-top:56px;}
.hero.has-photo .hero-inner{width:100%;}
.hero-photo{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-size:cover;
  background-position:center 40%;
  -webkit-mask-image:radial-gradient(ellipse 48% 86% at 50% 46%, transparent 0%, transparent 46%, rgba(0,0,0,0.32) 68%, #000 94%);
  mask-image:radial-gradient(ellipse 48% 86% at 50% 46%, transparent 0%, transparent 46%, rgba(0,0,0,0.32) 68%, #000 94%);
}
.hero-photo.hp-kontakt{background-image:url('kontakt-hero.jpg?v=2'); background-size:170% auto; background-position:35% 32%;}
.hero-photo::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, var(--warmwhite) 0%, rgba(246,238,233,0) 22%, rgba(246,238,233,0) 76%, var(--warmwhite) 100%);
}
.hero-photo-mobile{display:none;}
@media (max-width:760px){
  .hero.has-photo{min-height:0; display:block; padding-top:28px;}
  .hero-photo{display:none;}
  .hero-photo-mobile{
    display:block; width:100%; max-width:420px; margin:18px auto 6px;
    border-radius:18px; overflow:hidden; aspect-ratio:16/10;
    box-shadow:0 14px 32px rgba(58,53,50,0.16);
  }
  .hero-photo-mobile img{width:100%; height:100%; object-fit:cover; object-position:center 32%; display:block;}
}

/* -------- Hero atmospheric video (homepage) -------- */
.hero-video-wrap{
  position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}
.hero-video-wrap video,
.hero-video-wrap .rm-fallback{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 42%;}
.hero-video-wrap .rm-fallback{display:none;}
.hero-video-wrap::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, var(--warmwhite) 0%, rgba(246,238,233,0) 22%, rgba(246,238,233,0) 76%, var(--warmwhite) 100%);
}
@media (prefers-reduced-motion: reduce){
  .hero-video-wrap video{display:none;}
  .hero-video-wrap .rm-fallback{display:block;}
}

/* Desktop: two-column layout — text + form on the left, video reads fully on the right
   so the moment the hands meet, mid-frame, is never covered by the card. */
@media (min-width:761px){
  .hero.has-video{padding-top:0; padding-bottom:0;}
  .hero.has-video .hero-inner{display:flex; align-items:center; justify-content:flex-start; min-height:640px;}
  .hero.has-video .hero-content{width:100%; max-width:460px; text-align:left; margin-left:clamp(24px,5vw,64px);}
  .hero.has-video .eyebrow{margin-left:0;}
  .hero.has-video h1{text-align:left; max-width:none; margin:0 0 18px;}
  .hero.has-video p.lead{text-align:left; max-width:none; margin:0 0 8px;}
  .hero.has-video .callback-card{margin:32px 0 0;}
  .hero-video-wrap{
    -webkit-mask-image:radial-gradient(ellipse 34% 90% at 17% 48%, transparent 0%, transparent 40%, rgba(0,0,0,0.3) 62%, #000 90%);
    mask-image:radial-gradient(ellipse 34% 90% at 17% 48%, transparent 0%, transparent 40%, rgba(0,0,0,0.3) 62%, #000 90%);
  }
}

/* Mobile: video sits as a soft, translucent backdrop directly behind the headline and
   lead text, then fades to solid cream before the callback card so the form stays
   on a clean, fully legible background. */
@media (max-width:760px){
  .hero.has-video{min-height:0; position:relative; padding-top:0;}
  .hero.has-video .hero-inner{padding-top:28px;}
  .hero-video-wrap{display:block;}
  .hero-video-wrap video,
  .hero-video-wrap .rm-fallback{opacity:0.55; object-position:center 44%;}
  .hero-video-wrap::after{
    background:linear-gradient(180deg, rgba(246,238,233,0.22) 0%, rgba(246,238,233,0.05) 32%, rgba(246,238,233,0.5) 58%, var(--warmwhite) 78%);
  }
  .hero.has-video .callback-card{position:relative; z-index:2;}
}

/* -------- Page hero (subpages, image banner like Medicus) -------- */
.page-hero{position:relative; overflow:hidden; color:#fff; text-align:center;}
.page-hero .ph-bg{position:absolute; inset:0; z-index:0;}
.page-hero .ph-bg img{width:100%; height:100%; object-fit:cover;}
.page-hero .ph-bg::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(58,53,50,0.55), rgba(58,53,50,0.72));}
.page-hero-inner{position:relative; z-index:2; padding:72px 24px 64px; max-width:760px; margin:0 auto;}
.page-hero .eyebrow{color:var(--rose-soft);}
.page-hero h1{color:#fff; font-size:clamp(1.9rem,4.4vw,2.8rem); margin-bottom:14px;}
.page-hero p.lead{color:rgba(255,255,255,0.88); margin-bottom:26px;}

/* -------- Callback card -------- */
.callback-card{max-width:420px; margin:36px auto 0; background:#fff; border-radius:20px; padding:28px 26px; text-align:left; box-shadow:0 20px 50px rgba(58,53,50,0.1); border:1px solid rgba(122,75,87,0.1);}
.page-hero .callback-card{margin-top:8px;}
.callback-card h2{font-size:1.1rem; text-align:center; margin-bottom:16px; color:var(--wine);}
.callback-form label{display:block; font-size:0.85rem; color:var(--sage); font-weight:600; margin-bottom:5px; margin-top:12px;}
.callback-form label:first-of-type{margin-top:0;}
.callback-form input, .callback-form textarea{
  width:100%; padding:11px 13px; border-radius:10px; border:1px solid rgba(122,75,87,0.25);
  font-family:'Work Sans', sans-serif; font-size:0.95rem; background:#fff; color:var(--anthracite); resize:vertical;
}
.callback-form input:focus, .callback-form textarea:focus{outline:2px solid var(--rose); outline-offset:1px;}
.callback-form input.cb-optional, .callback-form textarea.cb-optional{
  margin-top:10px; border:1px solid rgba(122,75,87,0.12); background:rgba(122,75,87,0.03);
  font-size:0.88rem; padding:9px 12px; color:var(--ink);
}
.callback-form input.cb-optional::placeholder, .callback-form textarea.cb-optional::placeholder{color:#b3a7a2;}
.callback-form textarea.cb-optional{min-height:44px;}
.callback-form .cb-row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.callback-form button{width:100%; margin-top:18px; font-family:'Work Sans', sans-serif; font-size:1rem;}
.form-status{margin-top:14px; font-size:0.9rem;}
.form-status.ok{color:var(--sage);}
.form-status.err{color:#a4453b;}

/* -------- Photo band -------- */
.photo-band{padding:0 24px 88px;}
.photo-band figure{max-width:1080px; margin:0 auto; border-radius:24px; overflow:hidden; position:relative; aspect-ratio:16/7;}
.photo-band img{width:100%; height:100%; object-fit:cover; object-position:center 30%;}
.photo-band figcaption{position:absolute; left:0; right:0; bottom:0; padding:36px 40px 28px; background:linear-gradient(0deg, rgba(58,53,50,0.65), rgba(58,53,50,0)); color:var(--warmwhite); font-family:'Fraunces', serif; font-size:1.25rem; font-weight:500;}

/* -------- Section shell -------- */
section{padding:80px 24px;}
.section-head{text-align:center; max-width:640px; margin:0 auto 48px;}
.section-head .eyebrow{margin-bottom:14px;}
.section-head h2{font-size:clamp(1.6rem, 3.2vw, 2.2rem);}
.section-head p{color:#5b5350; margin-top:14px; font-size:1.02rem;}
.section-alt{background:#fff;}

/* -------- Leistungen / service cards -------- */
.service-group-title{font-family:'Fraunces', serif; color:var(--sage); font-size:0.92rem; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; max-width:900px; margin:0 auto 16px;}
.service-group-title:not(:first-of-type){margin-top:40px;}
.service-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; max-width:960px; margin:0 auto;}
.service-card{padding:28px 26px; border-radius:18px; background:var(--warmwhite); border:1px solid rgba(122,75,87,0.1); transition:transform .2s ease, box-shadow .2s ease;}
.section-alt .service-card{background:var(--warmwhite);}
.service-card:hover{transform:translateY(-4px); box-shadow:0 14px 30px rgba(58,53,50,0.08);}
.service-icon{width:42px; height:42px; border-radius:50%; background:var(--rose-soft); display:flex; align-items:center; justify-content:center; margin-bottom:16px; color:var(--wine); font-family:'Fraunces', serif; font-weight:600; font-size:1rem; letter-spacing:-0.02em;}
.service-card h3{font-size:1.12rem; margin-bottom:8px;}
.service-card p{color:#5b5350; font-size:0.94rem;}
.badge-soon{display:inline-block; font-size:0.6rem; font-family:'Work Sans', sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; color:var(--sage); background:rgba(74,93,83,0.12); padding:3px 8px; border-radius:100px; vertical-align:middle; margin-left:6px;}

/* -------- Values -------- */
.values-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; max-width:960px; margin:0 auto;}
.value-card{padding:28px 24px; border-radius:18px; background:#fff; border:1px solid rgba(122,75,87,0.1); text-align:center;}
.value-card h3{font-size:1.05rem; margin-bottom:8px; color:var(--wine);}
.value-card p{color:#5b5350; font-size:0.93rem;}

/* -------- About / Philosophie content -------- */
.about-grid{display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center; max-width:980px; margin:0 auto;}
.about-visual{aspect-ratio:1; border-radius:24px; overflow:hidden;}
.about-text h2{font-size:clamp(1.5rem,3vw,2.1rem); margin-bottom:18px;}
.about-text p{color:#5b5350; margin-bottom:14px;}
.value-row{display:flex; gap:12px; margin-top:24px; flex-wrap:wrap;}
.value-pill{font-size:0.83rem; padding:7px 15px; border-radius:100px; background:#fff; border:1px solid rgba(74,93,83,0.25); color:var(--sage); font-weight:500;}
.founder-quote{margin-top:26px; padding:20px 22px; border-left:3px solid var(--rose); font-family:'Fraunces', serif; font-style:italic; color:var(--wine); font-size:1rem; line-height:1.6;}
.founder-quote cite{display:block; margin-top:10px; font-family:'Work Sans', sans-serif; font-style:normal; font-size:0.84rem; color:var(--sage); font-weight:600;}

.prose{max-width:720px; margin:0 auto;}
.prose h2{font-size:1.35rem; margin:36px 0 12px;}
.prose h2:first-child{margin-top:0;}
.prose p{color:var(--ink); margin-bottom:14px;}
.prose ul{padding-left:20px; margin-bottom:16px;}
.prose li{margin-bottom:8px; color:var(--ink);}

/* -------- Service area -------- */
.area-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:48px; max-width:980px; margin:0 auto; align-items:start;}
.area-list{list-style:none;}
.area-list li{padding:11px 0; border-bottom:1px solid rgba(122,75,87,0.1); font-size:0.98rem; display:flex; justify-content:space-between; align-items:flex-start; gap:10px;}
.area-list li span.tag{font-size:0.72rem; color:var(--sage); background:rgba(74,93,83,0.1); padding:3px 9px; border-radius:100px; font-weight:600; flex-shrink:0; margin-top:2px;}
.area-name{display:block; font-weight:500;}
.area-sub{display:block; font-size:0.8rem; color:var(--muted); margin-top:2px;}
.area-note{color:#5b5350; font-size:0.94rem; margin-top:18px;}
.area-visual{border-radius:20px; overflow:hidden; aspect-ratio:4/5; background:#fff; border:1px solid rgba(122,75,87,0.1); display:flex; align-items:center; justify-content:center; padding:16px;}
.area-visual img{width:100%; height:100%; object-fit:cover;}
.area-visual svg{width:100%; height:100%;}
.area-map-note{text-align:center; font-size:0.75rem; color:var(--muted); margin-top:10px;}

/* -------- Jobs / Karriere -------- */
.jobs{background:var(--wine); color:var(--warmwhite); text-align:center;}
.jobs .section-head p{color:rgba(246,238,233,0.85);}
.jobs h2{color:var(--warmwhite);}
.jobs .eyebrow{color:var(--rose-soft);}
.jobs-note{max-width:600px; margin:0 auto 32px; font-size:0.95rem; color:rgba(246,238,233,0.8); padding:18px 22px; border:1px solid rgba(246,238,233,0.25); border-radius:14px;}
.jobs .btn-primary{background:var(--warmwhite); color:var(--wine);}
.jobs .btn-primary:hover{background:var(--rose-soft);}
.role-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; max-width:820px; margin:0 auto 36px;}
.role-card{background:rgba(255,255,255,0.08); border:1px solid rgba(246,238,233,0.22); border-radius:16px; padding:24px 22px; text-align:left;}
.role-card h3{color:#fff; font-size:1.05rem; margin-bottom:8px;}
.role-card p{color:rgba(246,238,233,0.8); font-size:0.92rem;}
.perk-row{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin:28px 0 8px;}
.perk-pill{font-size:0.82rem; padding:7px 15px; border-radius:100px; background:rgba(255,255,255,0.1); color:#fff; border:1px solid rgba(246,238,233,0.3);}

/* -------- Kontakt -------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:52px; max-width:980px; margin:0 auto;}
.contact-info h2{font-size:clamp(1.5rem,3vw,2.1rem); margin-bottom:16px;}
.contact-info p{color:#5b5350; margin-bottom:22px;}
.contact-list{list-style:none;}
.contact-list li{display:flex; gap:14px; padding:13px 0; border-bottom:1px solid rgba(122,75,87,0.1); font-size:0.97rem;}
.contact-list li:last-child{border-bottom:none;}
.contact-list .label{color:var(--sage); font-weight:600; min-width:100px;}
.contact-card{background:var(--warmwhite); border-radius:20px; padding:34px; border:1px solid rgba(122,75,87,0.1);}
.contact-card h3{font-size:1.08rem; margin-bottom:12px;}
.contact-card p{color:#5b5350; font-size:0.94rem; margin-bottom:20px;}
.contact-form label{display:block; font-size:0.87rem; color:var(--sage); font-weight:600; margin-bottom:6px; margin-top:15px;}
.contact-form label:first-child{margin-top:0;}
.contact-form input, .contact-form textarea{
  width:100%; padding:12px 14px; border-radius:10px; border:1px solid rgba(122,75,87,0.25);
  font-family:'Work Sans', sans-serif; font-size:0.95rem; background:#fff; color:var(--anthracite); resize:vertical;
}
.contact-form input:focus, .contact-form textarea:focus{outline:2px solid var(--rose); outline-offset:1px;}
.contact-form button{margin-top:18px; border:none; cursor:pointer; font-family:'Work Sans', sans-serif;}

/* -------- WhatsApp floating button -------- */
.whatsapp-fab{position:fixed; bottom:24px; right:24px; z-index:100; width:58px; height:58px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px rgba(0,0,0,0.25); transition:transform .2s ease;}
.whatsapp-fab:hover{transform:scale(1.08);}
.whatsapp-fab svg{width:30px; height:30px;}

/* -------- Footer -------- */
footer{padding:40px 24px 32px; text-align:center; background:var(--anthracite); color:rgba(246,238,233,0.7); font-size:0.85rem;}
footer .brand-foot{font-family:'Fraunces', serif; color:var(--warmwhite); font-size:1rem; margin-bottom:10px; display:block;}
footer .foot-links{margin-top:6px;}
footer a{text-decoration:underline;}

/* -------- Reveal animation -------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:translateY(0);}
.service-card, .value-card, .role-card{opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease;}
.reveal.in .service-card, .reveal.in .value-card, .reveal.in .role-card{opacity:1; transform:translateY(0);}
.service-grid .service-card:nth-child(1), .values-grid .value-card:nth-child(1), .role-grid .role-card:nth-child(1){transition-delay:.05s;}
.service-grid .service-card:nth-child(2), .values-grid .value-card:nth-child(2), .role-grid .role-card:nth-child(2){transition-delay:.15s;}
.service-grid .service-card:nth-child(3), .values-grid .value-card:nth-child(3){transition-delay:.25s;}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
  html{scroll-behavior:auto;}
}

/* -------- Nav breakpoint (separate from layout, so the full nav only shows where it truly fits) -------- */
@media (max-width:1080px){
  nav.links, .nav-cta{display:none;}
  .burger{display:block;}
}

/* -------- Mobile -------- */
@media (max-width:760px){
  .brand span{font-size:0.95rem;}
  .brand img{height:36px; width:36px;}
  .service-grid, .values-grid, .role-grid{grid-template-columns:1fr;}
  .about-grid, .contact-grid, .area-grid{grid-template-columns:1fr; gap:32px;}
  .about-visual, .area-visual-wrap{order:-1; max-width:100%;}
  section{padding:56px 20px;}
  .photo-band{padding:0 16px 56px;}
  .photo-band figure{aspect-ratio:4/5;}
  .photo-band figcaption{font-size:1.05rem; padding:24px 24px 20px;}
  .hero{padding:28px 16px 44px;}
  .hero .lead{margin-bottom:16px;}
  .page-hero-inner{padding:44px 18px 40px;}
  .callback-card{margin-top:20px; padding:22px 18px;}
  .callback-form .cb-row{grid-template-columns:1fr;}
  .top-bar{padding:10px 14px;}
  .top-bar .tb-label{font-size:0.85rem;}
  .top-bar .tb-number{font-size:1.05rem;}
}

@media (max-width:400px){
  .brand span{font-size:0.8rem;}
  .brand img{height:30px; width:30px;}
}