/* 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, 4vw);   /* 28.10.2026: volle Breite statt 1200px-Mitte (Wunsch Andreas) */
    --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:674px!important;min-height:674px!important}
  .hero-copy{padding-left:0!important;transform:translateY(60px)!important}
  /* Titelbild wie ganz am Anfang (Wunsch Andreas 22.09.2026): gross, volle Höhe bis in die Welle,
     links, unten links und oben (keine harte Kante unter dem Menü, 22.09.) weich ausgeblendet und weit hinter den Text gezogen (hinter dem Text nur schwach sichtbar, voll ab ca. 460 px), rechts ohne Ausblenden bis an den Bildschirmrand
     (22.09.: das Ausblenden rechts wirkte grau und unschön). Die Verläufe entsprechen den früheren Weiss-Schleiern
     (declutter.css ::before), laufen aber als Maske auf dem Bild selbst: keine feinen Kanten am Bildrand. */
  .hero-copy{position:relative!important;z-index:3!important}
  .hero-image{
    width:auto!important;height:auto!important;align-self:stretch!important;
    margin:0 calc(-1 * var(--rand)) 0 -50%!important;   /* rechts bis an den Rand (Bildschirm bzw. Blatt) */
    border-radius:0!important;overflow:hidden!important;box-shadow:none!important;
    position:relative!important;z-index:1!important;
  }
  .hero-image::before,.hero-image::after{display:none!important}
  .hero-image>img:first-child{
    object-position:100% 45%!important;   /* Sonne rechts im Bild halten */
    -webkit-mask-image:
      linear-gradient(90deg,transparent 0,rgba(0,0,0,.1) 110px,rgba(0,0,0,.28) 220px,rgba(0,0,0,.62) 320px,rgba(0,0,0,.9) 400px,#000 460px,#000 100%),
      radial-gradient(ellipse 68% 70% at 0% 100%,transparent 0%,transparent 20%,rgba(0,0,0,.04) 28%,rgba(0,0,0,.24) 38%,rgba(0,0,0,.56) 48%,rgba(0,0,0,.84) 58%,#000 66%),
      linear-gradient(180deg,transparent 0,rgba(0,0,0,.35) 36px,rgba(0,0,0,.8) 80px,#000 120px)!important;
    -webkit-mask-composite:source-in!important;
    mask-image:
      linear-gradient(90deg,transparent 0,rgba(0,0,0,.1) 110px,rgba(0,0,0,.28) 220px,rgba(0,0,0,.62) 320px,rgba(0,0,0,.9) 400px,#000 460px,#000 100%),
      radial-gradient(ellipse 68% 70% at 0% 100%,transparent 0%,transparent 20%,rgba(0,0,0,.04) 28%,rgba(0,0,0,.24) 38%,rgba(0,0,0,.56) 48%,rgba(0,0,0,.84) 58%,#000 66%),
      linear-gradient(180deg,transparent 0,rgba(0,0,0,.35) 36px,rgba(0,0,0,.8) 80px,#000 120px)!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}}

/* 28.10.2026: Das "Blatt" (ab 1321px die ganze Seite auf einer 1320px breiten weissen
   Flaeche mittig, Wunsch vom 22.09.) ist auf Wunsch von Andreas wieder weg:
   "ich will nicht mittig sondern ganz". Die Seite nutzt jetzt die volle Breite. */

/* Mehr Abstand zwischen Titel und Text im Titelbereich */
@media (min-width:701px){.hero h1{margin-bottom:44px!important}}

/* 28.10.2026 (Andy): Die Links sind weg, nur "Kontakt aufnehmen" bleibt.
   Bleibt im Menue nur der orange Knopf, braucht es auf dem Handy kein
   Burger-Menue mehr - der Knopf steht direkt in der Kopfzeile. */
@media (max-width:1050px){
  header:has(.navlinks>a.orange:only-child) .menu{display:none!important}
  .navlinks:has(>a.orange:only-child){
    display:flex!important;position:static!important;inset:auto!important;
    width:auto!important;margin-left:auto!important;padding:0!important;
    flex-direction:row!important;background:transparent!important;box-shadow:none!important;
  }
  .navlinks:has(>a.orange:only-child)>a.orange{padding:12px 18px!important;font-size:13px!important}
}

/* 28.10.2026 (Andy): Abstand zwischen den vier Kacheln und "Meine Leistungen"
   war mit 155px zu gross, jetzt rund 60px. */
@media (min-width:701px){
  .benefits{padding-bottom:clamp(14px,1.6vw,24px)!important}
  #leistungen{padding-top:clamp(20px,2vw,32px)!important}
}

/* 28.10.2026 (Andy): "Kontakt aufnehmen ist sehr nah bei der Linie."
   Der Textblock stand 60px tiefer als noetig, dadurch reichten die Knoepfe
   bis in die Welle. Jetzt sitzt er hoeher, die Welle bleibt frei. */
@media (min-width:1051px){
  /* Nicht den Text hochziehen - sonst stoesst der Kicker ins Logo.
     Stattdessen den Kopfbereich etwas hoeher, dann rutscht die Welle nach unten. */
  .hero{height:726px!important;min-height:726px!important}
  .hero-copy{transform:translateY(22px)!important}
}

/* 28.10.2026 (Andy): "Die ganze Seite nach Abstaenden untersuchen, so dass es
   harmonisch ist - auch auf dem Handy keine grossen Abstaende."
   Gemessen waren die Luecken zwischen den Abschnitten sehr ungleich
   (Desktop 61/88/306/245/144/246/192). Jetzt ein gleichmaessiger Rhythmus. */
@media (min-width:701px){
  #leistungen{padding-bottom:40px!important}
  #ablauf{padding-top:44px!important;padding-bottom:44px!important}
  #werte{padding-top:44px!important;padding-bottom:78px!important}
  #ueber-uns-kurz{margin-bottom:28px!important}
  #ueber-uns{padding-top:44px!important;padding-bottom:44px!important}
  #kontakt{padding-top:60px!important}
}
@media (max-width:700px){
  #leistungen{padding-bottom:22px!important}
  #ablauf{padding-top:26px!important;padding-bottom:26px!important}
  #werte{padding-top:26px!important;padding-bottom:42px!important}
  #ueber-uns-kurz{margin-bottom:14px!important}
  #ueber-uns{padding-top:26px!important;padding-bottom:24px!important}
  #kontakt{padding-top:32px!important}
}

/* 29.10.2026 (Andy): Auf dem Handy sass der orange Knopf zu tief und der
   Abstand rechts war kleiner als links (12 statt 16). Jetzt mittig und
   beidseitig gleich. Greift nur, wenn im Menue bloss der Knopf steht. */
@media (max-width:1050px){
  header:has(.navlinks>a.orange:only-child){padding-right:16px!important}
  .navlinks:has(>a.orange:only-child){align-items:center!important}
  .navlinks:has(>a.orange:only-child)>a.orange{margin:0!important}
}