/* Handy-Ansicht Spitex Wiitblick: kompakter, lange Texte aufklappbar, Karten zum Wischen.
   Auf grösseren Bildschirmen sind die Zusatzelemente ausgeblendet; dort gilt das bisherige Layout. */

.logo .logo-marke,
.logo .logo-name,
.hero-logo,
.mehr-knopf{display:none}

@media (max-width:700px){
  main>section{scroll-margin-top:70px!important}

  /* Kopfzeile: schmal, bleibt beim Scrollen sichtbar */
  header{position:sticky!important;top:0;z-index:60;height:64px!important;padding:0 12px 0 16px!important;background:rgba(255,255,255,.97)!important;box-shadow:0 1px 0 #e2eeee,0 8px 20px rgba(6,70,111,.06)!important;backdrop-filter:saturate(1.4) blur(6px)}
  .logo{display:flex!important;align-items:center;gap:10px;width:auto!important;height:64px!important;flex:0 0 auto!important;margin:0!important;text-decoration:none}
  .logo>img:first-child{display:none!important}
  .logo .logo-marke{display:block!important;width:40px!important;height:40px!important;object-fit:contain;filter:none!important}
  .logo .logo-name{display:flex;flex-direction:column;line-height:1;color:#06466f}
  .logo .logo-name small{font:800 9.5px/1 Nunito,"Segoe UI",Arial,sans-serif;letter-spacing:.3em;margin-bottom:3px;color:#06466f}
  .logo .logo-name b{font:800 21px/1 Nunito,"Segoe UI",Arial,sans-serif;letter-spacing:-.01em}
  .menu{width:46px;height:46px;border-radius:12px!important;color:#06466f;font-size:24px!important;display:grid!important;place-items:center}
  .menu:active{background:#edf7f6}
  .navlinks{top:66px!important;left:10px!important;right:10px!important;border-radius:16px;padding:14px!important;gap:2px!important;box-shadow:0 18px 40px rgba(6,70,111,.18)!important}
  .navlinks a{padding:12px 10px!important;font-size:16px!important;text-align:center}
  .navlinks .orange{margin-top:8px;border-radius:12px!important}

  /* Einstieg: Bild, Logo auf weissem Schild, Kernaussage */
  .hero{display:flex!important;flex-direction:column;height:auto!important;min-height:0!important;padding:12px 0 6px;background:linear-gradient(180deg,#eaf5f4 0%,#f6fbfa 45%,#fff 100%)!important;overflow:visible!important}
  .hero-image{order:1;height:240px!important;width:auto!important;margin:0 12px!important;border-radius:22px!important;overflow:hidden!important;box-shadow:0 10px 26px rgba(6,70,111,.14)}
  .hero-image::before,.hero-image::after{display:none!important}
  .hero-image>img:first-child{object-position:74% 38%!important}
  .hero-logo{order:2;display:block;position:relative;z-index:3;width:150px;margin:-64px auto 0;padding:14px 16px;background:#fff;border-radius:24px;box-shadow:0 14px 34px rgba(6,70,111,.18)}
  .hero-logo img{display:block;width:100%;height:auto}
  .hero-copy{order:3;padding:16px 22px 20px!important;transform:none!important;text-align:center}
  .hero h1{font-size:33px!important;line-height:1.1!important;white-space:normal!important;margin:0 0 12px!important}
  .hero-copy p{font-size:16px!important;line-height:1.55!important;max-width:34ch!important;margin:0 auto 18px!important}
  .hero-copy .buttons{flex-direction:column;gap:10px}
  .hero-copy .buttons a{display:block;text-align:center;padding:14px 18px!important;font-size:15px!important;border-radius:12px!important}
  .wave-divider{display:none!important}

  /* Vier Stichworte als 2×2 */
  .benefits{grid-template-columns:1fr 1fr!important;gap:12px!important;padding:14px 14px 26px!important;background:#fff}
  .benefits article{flex-direction:column;gap:6px!important;padding:14px 14px 12px;border:1px solid #e2eeee;border-radius:14px;background:#fbfdfd}
  .benefits i{font-size:30px!important;line-height:1!important}
  .benefits b{font-size:16px!important}
  .benefits p{font-size:13.5px!important;line-height:1.45!important;margin:4px 0 0!important}

  /* Kurzvorstellung mit Zitat (ohne doppeltes Bild) */
  .about{width:auto!important;margin:0 14px 30px!important;padding:22px 20px!important;border-radius:18px!important;gap:14px!important}
  .about>img{display:none!important}
  .about h2{font-size:24px!important;margin-bottom:10px!important}
  .about p,.about blockquote p{font-size:15.5px!important;line-height:1.6!important}
  .about blockquote{min-height:0!important;padding:16px 18px!important}
  .about blockquote span{font-size:40px!important}

  /* Abschnitte allgemein enger */
  .about-details-section,.services,.care-employment{padding:40px 16px 38px!important}
  .values{padding:40px 0 38px!important}
  .contact{padding:40px 16px!important;gap:20px!important}
  .about-details-section h2,.services h2,.care-employment h2,.values h2{font-size:27px!important;line-height:1.18!important;margin-bottom:12px!important}
  .contact h2{font-size:30px!important}
  .about-details-lead,.services-intro,.care-employment-intro>p:not(.kicker),.values-heading>p:not(.kicker),.contact-copy>p:not(.kicker){font-size:15.5px!important;line-height:1.6!important}
  .kicker{margin-bottom:8px!important}

  /* Aufklappbare Blöcke */
  .js .klapp:not(.offen) .klapp-teil{display:none!important}
  .klapp-kopf{cursor:pointer;-webkit-tap-highlight-color:transparent}
  .klapp-kopf::after{content:"";flex:0 0 auto;width:9px;height:9px;margin-left:14px;border-right:2.5px solid #008b93;border-bottom:2.5px solid #008b93;transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s ease}
  .klapp.offen>.klapp-kopf::after{transform:rotate(-135deg) translate(-2px,-2px)}
  .mehr-knopf{display:inline-flex;align-items:center;gap:8px;margin:2px 0 0;padding:8px 0;border:0;background:none;color:#06466f;font:800 15px/1.2 Nunito,"Segoe UI",Arial,sans-serif;cursor:pointer}
  .mehr-knopf::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px)}
  .offen>.mehr-knopf::after{transform:rotate(-135deg) translateY(-1px)}

  /* Über uns: vier Themen als Akkordeon */
  .about-details-section{width:auto!important;margin:0!important;border:0!important;border-radius:0!important}
  .about-details-grid{margin-top:20px!important;gap:10px!important;border:0!important;display:grid!important}
  .about-details-grid article,.about-details-grid article:nth-child(n){padding:0!important;border:1px solid #dbe9e8!important;border-radius:14px!important;background:#fff!important}
  .about-details-grid article h3{display:flex;justify-content:space-between;align-items:center;margin:0!important;padding:16px 18px!important;font-size:18px!important}
  .about-details-grid article p{padding:0 18px}
  .about-details-grid article p:last-of-type{padding-bottom:16px}
  .about-details-grid p{font-size:15.5px!important;line-height:1.62!important}

  /* Team zum Wischen */
  .team-showcase{margin-top:30px!important;padding-top:26px!important}
  .team-heading{margin-bottom:14px!important}
  .about-details-section .team-heading h3{font-size:23px!important}
  .team-heading>p:not(.kicker){font-size:15px!important}
  .team-grid{display:flex!important;gap:12px!important;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:4px 16px 12px;scrollbar-width:none}
  .team-grid::-webkit-scrollbar{display:none}
  .team-card{flex:0 0 74%;scroll-snap-align:center;border-radius:16px!important}
  .team-card img{aspect-ratio:auto!important;height:210px!important;object-position:center 22%!important}
  .team-card>div{padding:14px 16px 16px!important}
  .team-card p{font-size:14.5px!important;line-height:1.5!important}
  .team-note{margin-top:8px!important;font-size:12px!important}
  .about-details-cta{display:block!important;text-align:center;margin-top:18px!important;border-radius:12px!important}

  /* Leistungen: Einleitung sichtbar, Details aufklappbar */
  .service-grid{margin-top:20px!important;gap:14px!important}
  .services .service-card{padding:22px 20px!important;border-radius:16px!important}
  .service-number{width:38px!important;height:38px!important;margin-bottom:12px!important;font-size:13px!important}
  .services .service-card h3{font-size:22px!important;margin-bottom:10px!important}
  .services .service-card .service-lead{font-size:16px!important;line-height:1.58!important;margin-bottom:8px!important}
  .services .service-card>ul{margin-top:12px!important;gap:10px!important}
  .services .service-card li{font-size:15px!important}
  .service-cta{align-self:stretch!important;text-align:center;margin-top:14px!important;border-radius:12px!important}

  /* Pflegende Angehörige */
  .care-employment-intro{margin-bottom:20px!important}
  .care-employment-intro .care-employment-lead{font-size:16.5px!important;line-height:1.55!important}
  .care-employment-intro .mehr-knopf{margin-top:0}
  .care-employment-columns{gap:10px!important;border:0!important;border-radius:0!important;background:transparent!important;overflow:visible!important}
  .care-employment-columns article,.care-employment-columns article:last-child,.care-employment-columns article+article{border:1px solid #d7e7e5!important;border-radius:14px!important;background:#fff!important}
  .care-employment-columns article{padding:14px 18px!important}
  .care-label{margin-bottom:2px!important}
  .care-employment-columns h3{display:flex;justify-content:space-between;align-items:center;font-size:19px!important;margin:0!important}
  .care-employment-columns ul{padding-top:12px!important}
  .care-employment-columns li{font-size:15px!important;line-height:1.5!important}
  .care-process{margin-top:14px!important;padding:22px 18px!important;border-radius:16px!important}
  .care-process h3{font-size:21px!important}
  .care-process ol{margin-top:16px!important;gap:14px!important}
  .care-process li b{font-size:15px!important;margin-bottom:3px!important}
  .care-process li p{font-size:14px!important;line-height:1.5!important}
  .care-employment-cta{margin-top:14px!important;padding:20px 18px!important;gap:14px!important;border-radius:16px!important}
  .care-employment-cta h3{font-size:20px!important}
  .care-employment-cta a{align-self:stretch;text-align:center;border-radius:12px!important}
  .care-note{font-size:12px!important}

  /* Werte zum Wischen */
  .values-heading{padding:0 18px;margin-bottom:16px!important}
  .values-heading .mehr-knopf{margin:0 auto}
  .values-grid{display:flex!important;gap:12px!important;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 18px 14px!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;scrollbar-width:none}
  .values-grid::-webkit-scrollbar{display:none}
  .values-grid article,.values-grid article:nth-child(n){flex:0 0 80%;scroll-snap-align:center;min-height:0!important;padding:20px 20px 22px!important;border:1px solid #d7e7e5!important;border-radius:16px!important;background:#fff!important}
  .values-grid span{width:34px!important;height:34px!important;margin-bottom:10px!important}
  .values-grid h3{font-size:19px!important}
  .values-grid p{font-size:15px!important;line-height:1.55!important}
  .wisch-hinweis{display:block;margin:2px 0 0;text-align:center;font:700 12px/1 Arial,sans-serif;letter-spacing:.08em;color:#5d7379}

  /* Kontakt: Karte ausgeblendet, Route bleibt */
  .contact-copy>p:not(.kicker){margin:12px 0 16px!important}
  .location-card{margin-top:18px!important}
  .location-map{display:none!important}
  #kontaktformular{padding:20px 16px!important;border-radius:16px!important}
  #kontaktformular button{border-radius:12px!important;padding:16px 20px!important;font-size:15px!important}

  footer{padding:24px 18px 84px!important;gap:8px!important}
  .footer-brand{width:110px!important;height:auto!important}
}

.wisch-hinweis{display:none}
@media (max-width:700px){.wisch-hinweis{display:block}}