/* ==========================================================================
   Spitex Benevita – Premium UI
   – Elegante Lavendel-Farbwelt, Glas-/Layer-Effekte, Verläufe, Micro-Animationen
   ========================================================================== */

/* ---------- Design Tokens ---------- */
:root{
  --bg:#fafbff;
  --surface:#ffffff;
  --ink:#0c1220;
  --muted:#5e6779;
  --line:#e8ebf3;
  --accent:#AFA7CF;      /* soft lavender */
  --accent-2:#EAE7F7;    /* pale lavender */
  --accent-3:#8F86BA;    /* darker lavender */
  --radius:16px;
  --shadow-sm: 0 4px 12px rgba(12,18,32,.08);
  --shadow:    0 6px 20px rgba(12,18,32,.10), 0 2px 8px rgba(12,18,32,.06);
  --shadow-lg: 0 16px 32px rgba(12,18,32,.16), 0 6px 16px rgba(12,18,32,.10);
}

/* ---------- Global Reset ---------- */
*,
*::before,
*::after{ box-sizing: border-box }
html{ scroll-behavior: smooth }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.65;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4{ font-family:"Playfair Display",serif; color:var(--ink); }
img{ max-width:100%; display:block; height:auto }
a{ color:inherit; text-decoration:none }

/* ---------- Layout ---------- */
.container{ max-width:1200px; margin:0 auto; padding:0 32px }
.section{ padding: clamp(40px, 6.5vw, 90px) 0 }
.section.narrow{ max-width:860px; margin:0 auto }
.section-head{ text-align:center; margin-bottom:26px }
.section-head h2{
  margin:0 0 10px; font-size: clamp(24px, 3vw, 38px);
  position:relative;
}
.section-head h2::after{
  content:""; display:block; width:72px; height:3px; margin:10px auto 0;
  border-radius:3px; background:linear-gradient(90deg, var(--accent-3), var(--accent));
  box-shadow: 0 2px 8px rgba(143,134,186,.35);
}
.muted{ color:var(--muted) }
.small{ font-size:.9rem }

/* ---------- Header / Nav ---------- */
.header{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.7);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom:1px solid rgba(175,167,207,.35);
  box-shadow:0 4px 16px rgba(175,167,207,.25);
}
.header-row{ display:flex; align-items:center; justify-content:space-between; min-height:70px }
.brand{ display:inline-flex; align-items:center }
.brand img{ height:26px }
.nav{ display:flex; gap:28px; align-items:center }
.nav a{
  position:relative; text-decoration:none; font-weight:600; padding:.2rem 0;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:-4px; width:0; height:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent-3));
  transition:width .3s ease;
}
.nav a:hover::after{ width:100% }
.burger{
  display:none; border:0; background:none; width:44px; height:44px; border-radius:10px;
}
.burger span{ display:block; height:2px; background:var(--ink); margin:7px 9px; transition:.25s }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(9px) rotate(45deg) }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-9px) rotate(-45deg) }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 0.9rem 1.6rem;   /* mehr Platz für Text */
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
  color: #fff;
  border: none;
  box-shadow: var(--shadow);
}

.btn-primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(120deg, rgba(255,255,255,.6), rgba(255,255,255,0));
  transform: skewX(-25deg);
  animation: shine 6s infinite;
}

@keyframes shine {
  0% { left: -60% }
  50% { left: 120% }
  100% { left: 120% }
}

.btn-ghost {
  background: #fff;
  color: var(--ink);
}

/* Speziell für den Kontakt-Button in der Header-Navigation */
.header .btn-primary {
  padding: 0.55rem 1.2rem;   /* etwas kleiner, aber mehr Luft */
  font-size: 0.95rem;        /* Schrift komprimiert */
  line-height: 1.2;          /* verhindert Abschneiden */
}



/* ---------- Hero ---------- */
.hero{ position:relative; overflow:hidden; padding: clamp(42px, 8vw, 120px) 0 }
.hero-grid{ display:grid; grid-template-columns: 1.15fr .85fr; gap:48px; align-items:center }
.kicker{
  letter-spacing:.08em; text-transform:uppercase; color:var(--accent-3);
  font-weight:700; font-size:.85rem
}
.hero h1{ font-size: clamp(34px,3.8vw,56px); line-height:1.08; margin:.2rem 0 1rem }
.hero h1 span{ display:block }
.lead{ font-size:1.15rem; color:var(--muted); max-width:56ch }
.cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:12px }
.trust{ display:flex; gap:10px; flex-wrap:wrap; margin-top:16px }
.chip{
  background:var(--surface); border:1px solid var(--line);
  padding:6px 12px; border-radius:999px; box-shadow:var(--shadow-sm); font-size:.9rem
}

/* Animated background */
.bg-ornament{
  position:absolute; inset:0; z-index:-1;
  background: linear-gradient(-45deg, #fafbff, #eae7f7, #fafbff, #e2dff4);
  background-size: 400% 400%;
  animation: gradientShift 14s ease infinite;
}
@keyframes gradientShift{
  0%{ background-position:0% 50% }
  50%{ background-position:100% 50% }
  100%{ background-position:0% 50% }
}

/* Hero media card */
.layer-card{
  background:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.45);
  border-radius:20px; overflow:hidden; box-shadow:var(--shadow);
  backdrop-filter: blur(6px);
  transition: transform .4s ease, box-shadow .4s ease;
}
.layer-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg) }
.layer-card figcaption{
  padding:10px 14px; color:var(--muted);
  border-top:1px solid var(--line); background:rgba(255,255,255,.7)
}

/* ---------- Service Grid ---------- */
.cards-3{ display:grid; gap:32px; grid-template-columns:repeat(3,1fr) }
.service-card{
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:28px; box-shadow:var(--shadow); transition: transform .3s ease, box-shadow .3s ease;
}
.service-card:hover{ transform: translateY(-10px); box-shadow: var(--shadow-lg) }

/* Icon chips – jetzt mit größeren Bildern */
/* Service Bilder im Quadrat – voll ausfüllen */
.svc-icon {
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 180px;
  height: 180px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(175,167,207,.35);
  box-shadow: 0 6px 18px rgba(12,18,32,.1);
  overflow: hidden;
}

.svc-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* füllt das Quadrat komplett aus */
  border-radius: 12px;
}


/* Links in Karten */
.arrow{ display:inline-block; margin-top:10px; font-weight:700; text-decoration:none }
.arrow::after{ content:"→"; margin-left:8px }

/* ---------- Prozess-Strip mit Parallax ---------- */
.strip{
  background: linear-gradient(180deg, var(--accent-2), transparent);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  position:relative; overflow:hidden;
}
.strip::before{
  content:""; position:absolute; inset:-10% -10% auto -10%; height:200%;
  background: radial-gradient(800px 400px at 50% 0%, rgba(175,167,207,.22), transparent 60%);
  animation: float 10s ease-in-out infinite;
}
@keyframes float{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-20px) } }

.strip-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:24px; padding:26px 0 }
.steps{ counter-reset:s; list-style:none; padding-left:0; margin:0 }
.steps li{ position:relative; padding-left:32px; margin:10px 0 }
.steps li::before{
  counter-increment:s; content: counter(s) ".";
  position:absolute; left:0; top:0; font-weight:800; color:var(--accent-3)
}

.kpis{ display:flex; gap:18px; flex-wrap:wrap; align-items:stretch; justify-content:flex-end }
.kpis div{
  flex:1 1 120px; min-width:140px;
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow); padding:14px; text-align:center; transition: transform .3s ease, box-shadow .3s ease;
}
.kpis div:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg) }
.kpis span{ display:block; font-weight:800; font-size:1.3rem; color:var(--accent-3) }
.kpis em{ color:var(--muted); font-style:normal }
.kpis .icon{ width:16px; height:16px; margin-bottom:6px; stroke:var(--accent-3); fill:none }

/* ---------- About / Content Cards ---------- */
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px }
.content-card{
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:22px; box-shadow:var(--shadow); margin-bottom:18px;
  transition:transform .3s ease, box-shadow .3s ease;
}
.content-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg) }

/* ---------- Page Head (für Unterseiten) ---------- */
.pagehead{
  padding: clamp(36px, 7vw, 80px) 0 20px;
  border-bottom:1px solid var(--line);
  background: linear-gradient(180deg, rgba(175,167,207,.12), transparent 65%);
}
.pagehead h1{ margin:0 0 8px; font-size: clamp(28px, 3.2vw, 44px) }
.pagehead .lead{ color:var(--muted) }

/* ---------- Kontakt / Form ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px }
.panel{
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:22px; box-shadow:var(--shadow); transition: transform .3s ease, box-shadow .3s ease;
}
.panel:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg) }
.list{ padding-left:18px; margin:0 }
.form label{ display:block; font-weight:600; margin:12px 0 6px }
.form input, .form textarea{
  width:100%; border:1px solid var(--line); border-radius:12px; padding:12px 14px; outline:none; background:#fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.form input:focus, .form textarea:focus{
  border-color: var(--accent-3);
  box-shadow: 0 0 0 6px rgba(175,167,207,.18)
}

/* ---------- Map ---------- */
.map{
  border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--shadow)
}
.map iframe{ width:100%; height:min(60vh,480px); border:0 }

/* ---------- Footer ---------- */
.footer{ border-top:1px solid var(--line); background:#fff; margin-top:36px }
.foot-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:22px; padding:26px 0 }
.foot-logo{ height:64px; border:1px solid var(--line); border-radius:10px }
.fine{ border-top:1px solid var(--line); padding:12px 0 22px; color:var(--muted); font-size:.9rem }

/* ---------- Warum Spitex Section ---------- */
.why {
  background: linear-gradient(180deg, var(--accent-2), #fff);
  padding: 70px 0;
  text-align: center;
}
.benefits {
  list-style: none;
  padding: 0;
  margin: 30px auto;
  max-width: 760px;
  text-align: left;
}
.benefits li {
  font-size: 1.1rem;
  margin: 14px 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.benefits .check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  box-shadow: 0 4px 12px rgba(143,134,186,.4);
}
.claim {
  margin-top: 36px;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--accent-3);
}

/* ---------- Transitions / Reveal ---------- */
.transition{
  position:fixed; inset:0; background:linear-gradient(135deg,var(--accent-2),#fff);
  transform:translateY(100%); transition:transform .6s cubic-bezier(.22,.61,.36,1); z-index:100
}
.enter .transition{ transform:translateY(-100%) }
.reveal{ opacity:0; transform:translateY(10px); transition:opacity .6s ease, transform .6s ease; transition-delay:var(--delay,0s) }
.reveal.visible{ opacity:1; transform:none }

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .hero-grid{ grid-template-columns:1fr; gap:24px }
  .about-grid{ grid-template-columns:1fr }
  .cards-3{ grid-template-columns:1fr 1fr }
  .foot-grid{ grid-template-columns:1fr 1fr }
}
@media (max-width:760px){
  .nav{
    display:none; position:absolute; right:24px; top:70px; background:#fff;
    border:1px solid var(--line); border-radius:14px; padding:10px; flex-direction:column; gap:10px; min-width:220px;
    box-shadow:var(--shadow);
  }
  .nav.open{ display:flex }
  .burger{ display:block }
  .contact-grid, .cards-3{ grid-template-columns:1fr }
}
/* ---------- Werte Cards ---------- */
.value-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px;
  box-shadow: var(--shadow-sm);
  transition: transform .3s ease, box-shadow .3s ease;
}
.value-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
.value-card h3 {
  margin-top: 0;
  font-size: 1.2rem;
  color: var(--accent-3);
}

/* ---------- Team Grid ---------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px;
}
.team-card {
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px;
  box-shadow: var(--shadow-sm);
}
.team-card img {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 16px;
}
.team-card h3 {
  margin: 0 0 6px;
  font-size: 1.1rem;
}
.team-card p {
  font-size: .95rem;
  color: var(--muted);
}
.brand-title {
  font-family: "Playfair Display", serif; /* elegante Schrift, passt zum Rest */
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--accent-3); /* das dunklere Lavender */
  letter-spacing: 0.5px;
  transition: color .3s ease;
}

.brand-title:hover {
  color: var(--accent); /* helleres Lavender beim Hover */
}
/* ---------- Preislisten Tabellen ---------- */
.price-table {
  width: 100%;
  border-collapse: collapse;
  margin: 28px 0;
  font-size: 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.price-table thead {
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  color: #fff;
  text-align: left;
}

.price-table th, 
.price-table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}

.price-table th {
  font-weight: 700;
  font-size: 1.05rem;
}

.price-table tr:last-child td {
  border-bottom: none;
}

.price-table tbody tr:nth-child(even) {
  background: #fafbff;
}

.price-table tbody tr:hover {
  background: rgba(175,167,207,0.08);
  transition: background .2s ease;
}

.price-table td:last-child {
  text-align: right;
  font-weight: 600;
  color: var(--accent-3);
}

/* Mobile Anpassungen */
@media (max-width: 760px) {
  .price-table thead {
    display: none;
  }

  .price-table, 
  .price-table tbody, 
  .price-table tr, 
  .price-table td {
    display: block;
    width: 100%;
  }

  .price-table tr {
    margin-bottom: 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
  }

  .price-table td {
    text-align: left;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    position: relative;
  }

  .price-table td:last-child {
    border-bottom: none;
    font-size: 1.1rem;
  }

  .price-table td::before {
    content: attr(data-label);
.contact-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  padding: 10px 0;
}

.contact-info p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
}

.contact-info a {
  color: var(--accent-3);
  font-weight: 600;
  text-decoration: none;
}

.contact-info a:hover {
  text-decoration: underline;
}

/* End of file */