/* Einheitliches Raster für Computer und Tablet (ab 701 px).
   Alle Abschnitte teilen dieselbe Inhaltsbreite, alle Kacheln denselben Stil,
   die Hintergründe wechseln ruhig zwischen Weiss und Hellblau.
   Die Handy-Ansicht (mobil.css, bis 700 px) bleibt unberührt. */

@media (min-width:701px){
  :root{
    --rand:max(40px, calc((100% - 1200px) / 2));
    --abstand:96px;
    --karte-rand:1px solid #d7e7e5;
    --karte-radius:16px;
    --karte-schatten:0 10px 28px rgba(6,70,111,.06);
    --band:#f2f8f7;
  }

  /* Kachel-Grundstil */
  .benefits article,
  .about-details-grid article,
  .about-details-grid article:nth-child(n),
  .services .service-card,
  .services .service-card-care,
  .care-employment-columns article,
  .care-employment-columns article:last-child,
  .care-employment-columns article+article,
  .care-employment-cta,
  .values-grid article,
  .values-grid article:nth-child(n){
    background:#fff!important;
    border:var(--karte-rand)!important;
    border-radius:var(--karte-radius)!important;
    box-shadow:var(--karte-schatten)!important;
  }

  /* Abschnitte: gleiche Seitenränder, gleiche Abstände */
  .benefits,
  .services,
  .care-employment,
  .values{
    padding-left:var(--rand)!important;
    padding-right:var(--rand)!important;
  }
  .services,
  .care-employment,
  .values{
    padding-top:var(--abstand)!important;
    padding-bottom:var(--abstand)!important;
  }

  /* Hintergründe im Wechsel */
  .services{background:#fff!important}
  .care-employment{background:var(--band)!important}
  .values{background:var(--band)!important}

  /* Einleitungen einheitlich zentriert und gleich breit */
  .about-details-heading,
  .care-employment-intro,
  .values-heading,
  .team-heading{max-width:820px!important;margin-left:auto!important;margin-right:auto!important}
  .services-intro{max-width:820px!important}
  .care-employment-intro>p:not(.kicker):not(.care-employment-lead){font-weight:400!important}

  /* Stichworte unter dem Titelbild */
  .benefits{gap:20px!important;padding-top:40px!important;padding-bottom:48px!important}
  .benefits article{padding:22px 22px 20px!important;gap:14px!important}

  /* Kurzvorstellung */
  .about{
    width:auto!important;max-width:none!important;
    margin:0 var(--rand) var(--abstand)!important;
    border:var(--karte-rand)!important;border-radius:var(--karte-radius)!important;
  }
  .about blockquote,.about>img{border-radius:12px!important}

  /* Über uns: ganze Breite als hellblaues Band, vier einzelne Kacheln */
  .about-details-section{
    width:auto!important;max-width:none!important;margin:0!important;
    padding:var(--abstand) var(--rand)!important;
    border:0!important;border-radius:0!important;background:var(--band)!important;
  }
  .about-details-grid{gap:24px!important;border:0!important;margin-top:40px!important}
  .about-details-grid article,
  .about-details-grid article:nth-child(n){padding:32px 34px!important}
  .team-showcase{margin-top:72px!important;padding-top:0!important;border-top:0!important}
  .about-details-cta{display:table!important;margin:32px auto 0!important}

  /* Leistungen */
  .service-grid{max-width:none!important;gap:24px!important}

  /* Pflegende Angehörige und Anmeldung */
  .care-employment-columns{
    max-width:none!important;gap:24px!important;
    border:0!important;border-radius:0!important;background:transparent!important;overflow:visible!important;
  }
  .care-employment-columns article{padding:34px 36px!important}
  .care-process,.care-employment-cta,.care-note{max-width:none!important}
  .care-process{border-radius:var(--karte-radius)!important;margin-top:24px!important}
  .care-employment-cta{margin-top:24px!important}

  /* Werte: sechs einzelne Kacheln */
  .values-grid{
    max-width:none!important;gap:24px!important;
    border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important;
  }
  .values-grid article,
  .values-grid article:nth-child(n){min-height:0!important;padding:30px 30px 28px!important}

  /* Kontakt: gleiche Ränder wie der Rest */
  .contact{
    grid-template-columns:minmax(0,1fr) minmax(460px,540px)!important;
    column-gap:64px!important;
    padding:var(--abstand) var(--rand)!important;
  }
  .contact-copy{grid-column:1!important;max-width:none!important;display:flex!important;flex-direction:column!important}
  #kontaktformular{grid-column:2!important;border-radius:var(--karte-radius)!important;margin-top:0!important;width:100%!important;justify-self:stretch!important}
  .contact .kicker{color:#a9d8df!important;margin-top:0!important}
  .contact-copy{padding-top:0!important}
  .contact h2{font-size:42px!important;line-height:1.15!important}
  .contact-copy>a[href^="mailto:"]{font:700 20px/1.3 "Nunito","Segoe UI",Arial,sans-serif!important;color:#fff!important;text-decoration:none!important;border-bottom:2px solid rgba(248,170,0,.8);align-self:flex-start}
  .contact-copy>a[href^="mailto:"]:hover{border-bottom-color:#fff}
  .location-card{border-radius:var(--karte-radius)!important;width:100%!important;margin-top:32px!important}
  /* Karte im Ton der Seite, mit eigener Markierung */
  .location-map{filter:grayscale(1) sepia(.35) hue-rotate(160deg) saturate(1.1) brightness(1.04) contrast(.92)!important}
  .karte-rahmen{position:relative;display:flex}
  .karte-rahmen .location-map{flex:1 1 auto}
  .karte-rahmen::after{
    content:"";position:absolute;left:50%;top:50%;width:34px;height:44px;transform:translate(-50%,-100%);
    background:url("karte-pin.svg") no-repeat center/contain;pointer-events:none;
    filter:drop-shadow(0 3px 4px rgba(0,0,0,.28));
  }

  /* Fusszeile */
  footer{padding-left:var(--rand)!important;padding-right:var(--rand)!important}
}

/* Grosse Bildschirme: Kopfzeile und Titelbild am selben Rand ausrichten */
@media (min-width:1051px){
  /* Kontakt: zwei gleich breite Spalten, oben und unten auf gleicher Höhe */
  .contact{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;column-gap:56px!important;align-items:stretch!important}
  .location-card{flex:1 1 auto!important;display:flex!important;flex-direction:column!important}
  .karte-rahmen{flex:1 1 auto!important;min-height:220px!important}
  .location-map{height:auto!important;min-height:220px!important}
  header{padding-right:var(--rand)!important}
  .logo{left:var(--rand)!important}
  .hero{padding-left:var(--rand)!important;padding-right:var(--rand)!important;height:650px!important;min-height:650px!important}
  .hero-copy{padding-left:0!important;transform:translateY(60px)!important}
  /* Titelbild: auf allen vier Seiten gleichmässig weich ins Weiss ausgeblendet */
  .hero-image{
    width:100%!important;margin:64px 0 0!important;align-self:start!important;
    height:420px!important;border-radius:0!important;overflow:visible!important;box-shadow:none!important;
  }
  .hero-image::before,.hero-image::after{display:none!important}
  .hero-image>img:first-child{
    object-position:70% 45%!important;
    -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 18%,#000 91%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 12%,#000 76%,transparent 100%)!important;
    -webkit-mask-composite:source-in!important;
    mask-image:linear-gradient(to right,transparent 0%,#000 18%,#000 91%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 12%,#000 76%,transparent 100%)!important;
    mask-composite:intersect!important;
  }
}

/* Tablet: eine Spalte bei Kontakt, Titeltext am Rand */
@media (min-width:701px) and (max-width:1050px){
  header{padding-left:var(--rand)!important;padding-right:var(--rand)!important}
  .logo{margin-left:0!important}
  .contact{grid-template-columns:1fr!important}
  .contact-copy,#kontaktformular{grid-column:auto!important}
  #kontaktformular{width:auto!important;justify-self:stretch!important}
  .hero-copy{padding-left:var(--rand)!important;padding-right:var(--rand)!important}
}

/* Fusszeile: Links zu Impressum, Datenschutz, Tarifordnung (alle Breiten) */
.footer-links{display:flex;flex-wrap:wrap;gap:6px 20px;justify-content:center}
.footer-links a{color:#06466f;font:700 14px/1.4 "Nunito","Segoe UI",Arial,sans-serif;text-decoration:none;border-bottom:1px solid transparent}
.footer-links a:hover,.footer-links a:focus-visible{border-bottom-color:#f8aa00}
#kontaktformular .consent a{font:inherit!important;color:#06466f!important;text-decoration:underline;text-decoration-color:#f8aa00;text-underline-offset:2px}

/* Unterseiten Impressum, Datenschutz, Tarifordnung */
.rechtsseite{background:#fff;padding:48px 18px 72px}
.rechtstext{max-width:820px;margin:0 auto;color:#173f52;font-size:16.5px;line-height:1.7}
.rechtstext h1{margin:6px 0 24px;color:#06466f;font:800 34px/1.15 "Nunito","Segoe UI",Arial,sans-serif;letter-spacing:-.02em}
.rechtstext h2{margin:34px 0 8px;color:#06466f;font:700 20px/1.3 "Nunito","Segoe UI",Arial,sans-serif}
.rechtstext p,.rechtstext li{color:#3f5f68}
.rechtstext p{margin:0 0 14px}
.rechtstext a{color:#06466f;text-decoration-color:#f8aa00;text-underline-offset:3px}
.rechtstext .stand{margin-bottom:22px;color:#5d7379;font-size:14px}
.rechtstext .hinweis{font-size:14px;color:#5d7379}
.rechtstext .tabelle{overflow-x:auto;margin:14px 0 12px;border:1px solid #d7e7e5;border-radius:12px}
.rechtstext table{width:100%;border-collapse:collapse;font-size:15.5px}
.rechtstext th,.rechtstext td{padding:12px 16px;text-align:left;vertical-align:top;border-bottom:1px solid #e3eeed}
.rechtstext tr:last-child td{border-bottom:0}
.rechtstext th{background:#f2f8f7;color:#06466f;font-weight:700}
.rechtstext td:last-child,.rechtstext th:last-child{white-space:nowrap}
@media (min-width:701px){
  .rechtsseite{padding:72px var(--rand) 96px}
  .rechtstext h1{font-size:42px}
}
@media (min-width:1051px){
  /* Platz für das grosse Logo, das unter die Kopfzeile ragt */
  .rechtsseite{padding-top:150px}
}

/* Anmeldung: nur noch das Einzugsgebiet, über die ganze Breite */
@media (min-width:701px){
  .einzugsgebiet{grid-template-columns:1fr!important}
  .einzugsgebiet ul{grid-template-columns:repeat(3,minmax(0,1fr))!important;column-gap:32px!important}
}
@media (min-width:1051px){
  .einzugsgebiet ul{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}

/* Kurzvorstellung: Bilder blenden langsam ineinander über, der Satz blendet ruhig */
.bild-wechsel{position:relative;height:210px;border-radius:12px;overflow:hidden;background:#eef5f4}
.bild-wechsel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.8s ease-in-out}
.bild-wechsel img.aktiv{opacity:1}
.about blockquote{transition:opacity .9s ease,transform .9s ease!important}
@media (max-width:700px){.bild-wechsel{display:none!important}}