/*
Theme Name: Ambulante Alten- und Krankenpflege Gundula Falder – Swiss Modernism
Theme URI: https://ambulante-alten-und-krankenpflege-gu-3.lead.bummeltech.com/
Author: bummeltech
Description: Individuelles klassisches WordPress-Theme im Stil "Swiss Modernism 2.0" für die Ambulante Alten- und Krankenpflege Gundula Falder, Solingen. Striktes 12-Spalten-Grid, Inter/Helvetica, mathematisches Spacing, ein einziger Akzent. Vollständig im wp-admin pflegbar (Customizer, Slides, Services, Seiten, Menüs).
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: aakp
*/

/* ============================================================
   SWISS MODERNISM 2.0  —  Design Tokens
   Farben/Werte werden in header.php aus dem Customizer als
   Inline-:root überschrieben. Hier liegen die Defaults.
   ============================================================ */
:root{
  --c-black:#000000;
  --c-white:#FFFFFF;
  --c-paper:#F5F5F5;
  --c-fg:#000000;
  --c-bg:#FFFFFF;
  --c-muted:#5A5A5A;
  --c-line:#000000;
  --c-line-soft:#E3E3E3;
  --accent:#E5392E;          /* einziger vibranter Akzent (Swiss poster red) */
  --accent-ink:#FFFFFF;

  /* 8px Base-Unit – mathematisches Spacing */
  --u:8px;
  --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px; --s-5:48px;
  --s-6:64px; --s-7:96px; --s-8:128px; --s-9:160px;

  --gap:24px;                /* Grid-Gutter */
  --maxw:1320px;
  --pad:32px;

  --font:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;

  --fs-mono:0.75rem;
  --t:180ms cubic-bezier(.2,.6,.2,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--c-bg);color:var(--c-fg);
  font-family:var(--font);font-weight:400;line-height:1.55;
  font-size:17px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
h1,h2,h3,h4,p,figure,ul,ol{margin:0}
ul{list-style:none;padding:0}

/* ---------- Layout primitives ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.grid12{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}
.section{padding-block:var(--s-7)}
.section--tight{padding-block:var(--s-6)}
.rule{border:0;border-top:2px solid var(--c-line);margin:0}
.rule--soft{border-top:1px solid var(--c-line-soft)}

/* ---------- Typography scale (modular) ---------- */
.kicker{font-size:var(--fs-mono);font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--c-fg);display:inline-flex;gap:10px;align-items:baseline}
.kicker::before{content:attr(data-num);color:var(--accent);font-variant-numeric:tabular-nums}
.display{font-size:clamp(2.6rem,7vw,6rem);line-height:.96;letter-spacing:-.03em;
  font-weight:700;text-wrap:balance}
.h-sec{font-size:clamp(1.9rem,4vw,3.2rem);line-height:1.02;letter-spacing:-.02em;font-weight:700}
.h-card{font-size:1.3rem;line-height:1.15;letter-spacing:-.01em;font-weight:700}
.lead{font-size:clamp(1.05rem,1.6vw,1.35rem);line-height:1.5;color:var(--c-fg);max-width:46ch}
.muted{color:var(--c-muted)}
.tnum{font-variant-numeric:tabular-nums}

/* ============================================================
   HEADER / NAVBAR  (sticky, großzügig, Burger < 900px)
   ============================================================ */
.site-header{position:sticky;top:0;z-index:100;background:var(--c-bg);
  border-bottom:2px solid var(--c-line)}
.nav{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s-5);min-height:84px}
.brand{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.brand__mark{width:38px;height:38px;background:var(--c-black);position:relative;flex:0 0 auto}
.brand__mark::after{content:"";position:absolute;inset:9px;background:var(--accent)}
.brand__txt{display:flex;flex-direction:column;line-height:1}
.brand__name{font-weight:700;font-size:.98rem;letter-spacing:-.01em}
.brand__sub{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--c-muted);margin-top:3px}

.menu{display:flex;align-items:center;gap:var(--s-4);flex-wrap:nowrap}
.menu a{font-size:.93rem;font-weight:500;letter-spacing:.01em;padding:8px 2px;
  position:relative;white-space:nowrap;transition:color var(--t)}
.menu a::after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:2px;
  background:var(--accent);transition:right var(--t)}
.menu a:hover::after,.menu a:focus-visible::after,
.menu .current-menu-item>a::after{right:0}
.menu .current-menu-item>a{font-weight:700}

.nav-cta{flex:0 0 auto}
.btn{display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  font-weight:700;font-size:.92rem;letter-spacing:.01em;
  padding:13px 22px;border:2px solid var(--c-black);background:var(--c-black);
  color:var(--c-white);transition:background var(--t),color var(--t),transform var(--t)}
.btn:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn:active{transform:translateY(1px)}
.btn--ghost{background:transparent;color:var(--c-fg)}
.btn--ghost:hover{background:var(--c-black);border-color:var(--c-black);color:var(--c-white)}
.btn--accent{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn--accent:hover{background:var(--c-black);border-color:var(--c-black);color:var(--c-white)}
.btn svg{width:16px;height:16px}

/* Burger */
.burger{display:none;width:48px;height:48px;border:2px solid var(--c-black);
  background:var(--c-bg);cursor:pointer;align-items:center;justify-content:center;flex:0 0 auto}
.burger span{display:block;width:22px;height:2px;background:var(--c-black);position:relative;transition:transform var(--t),opacity var(--t)}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:22px;height:2px;background:var(--c-black);transition:transform var(--t)}
.burger span::before{top:-7px}.burger span::after{top:7px}
.nav-open .burger span{background:transparent}
.nav-open .burger span::before{transform:translateY(7px) rotate(45deg)}
.nav-open .burger span::after{transform:translateY(-7px) rotate(-45deg)}

/* ============================================================
   SLIDER (CPT slide)
   ============================================================ */
.slider{position:relative;border-bottom:2px solid var(--c-line)}
.slides{position:relative}
.slide{display:none;}
.slide.is-active{display:block;animation:fade .6s ease}
@keyframes fade{from{opacity:.25}to{opacity:1}}
.slide__grid{align-items:stretch}
.slide__media{grid-column:span 7;position:relative;min-height:clamp(340px,52vh,640px);
  background:var(--c-paper);overflow:hidden}
.slide__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slide__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 60%,rgba(0,0,0,.04))}
.slide__body{grid-column:span 5;display:flex;flex-direction:column;justify-content:center;
  padding:var(--s-5) 0 var(--s-5) var(--gap);gap:var(--s-3);border-left:2px solid var(--c-line)}
.slide__count{font-variant-numeric:tabular-nums;font-weight:700;font-size:.8rem;letter-spacing:.1em}
.slide__count b{color:var(--accent)}
.slide__title{font-size:clamp(1.8rem,3.2vw,2.9rem);line-height:1.02;letter-spacing:-.02em;font-weight:700}
.slide__text{color:var(--c-fg);max-width:42ch}
.slider__nav{display:flex;gap:0;border-top:2px solid var(--c-line)}
.slider__btn{flex:1;background:var(--c-bg);border:0;border-right:2px solid var(--c-line);
  padding:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;
  font-weight:700;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;transition:background var(--t),color var(--t)}
.slider__btn:last-child{border-right:0}
.slider__btn:hover{background:var(--c-black);color:var(--c-white)}
.slider__btn svg{width:18px;height:18px}
.slider__dots{display:flex;gap:8px;align-items:center;padding-inline:18px}
.dot{width:34px;height:6px;background:var(--c-line-soft);border:0;cursor:pointer;padding:0;transition:background var(--t)}
.dot.is-active{background:var(--accent)}

/* ============================================================
   HERO (statisch, Customizer)
   ============================================================ */
.hero{padding-block:var(--s-7) var(--s-6)}
.hero__head{grid-column:1 / 9}
.hero__display{margin-top:var(--s-3)}
.hero__display .accentword{color:var(--accent)}
.hero__aside{grid-column:9 / 13;display:flex;flex-direction:column;gap:var(--s-3);
  border-left:2px solid var(--c-line);padding-left:var(--gap);justify-content:flex-end}
.hero__lead{grid-column:1 / 8;margin-top:var(--s-4)}
.hero__actions{grid-column:1 / 13;display:flex;gap:var(--s-2);flex-wrap:wrap;margin-top:var(--s-4)}
.fact{display:flex;flex-direction:column;gap:4px}
.fact b{font-size:1.6rem;font-weight:700;letter-spacing:-.02em}
.fact span{font-size:.8rem;letter-spacing:.04em;color:var(--c-muted)}

/* ============================================================
   SERVICES (CPT service) – Bento-ish strict grid
   ============================================================ */
.sec-head{align-items:end;margin-bottom:var(--s-5)}
.sec-head__t{grid-column:1 / 9}
.sec-head__t h2{margin-top:var(--s-2)}
.sec-head__meta{grid-column:9 / 13;text-align:right;align-self:end}

.services{grid-auto-rows:1fr}
.card{grid-column:span 4;border:2px solid var(--c-line);background:var(--c-bg);
  display:flex;flex-direction:column;min-height:100%;transition:transform var(--t),box-shadow var(--t)}
.card:hover{transform:translateY(-4px);box-shadow:10px 10px 0 var(--c-black)}
.card__media{aspect-ratio:16/10;background:var(--c-paper);overflow:hidden;border-bottom:2px solid var(--c-line)}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--t)}
.card:hover .card__media img{transform:scale(1.04)}
.card__body{padding:var(--s-3);display:flex;flex-direction:column;gap:12px;flex:1}
.card__idx{font-variant-numeric:tabular-nums;font-weight:700;font-size:.78rem;color:var(--accent);letter-spacing:.1em}
.card__excerpt{color:var(--c-muted);font-size:.96rem;flex:1}
.card__link{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.88rem;
  border-top:2px solid var(--c-line);padding:14px var(--s-3);transition:gap var(--t),background var(--t),color var(--t)}
.card__link:hover{gap:14px;background:var(--accent);color:var(--accent-ink)}
.card__link svg{width:15px;height:15px}

/* ============================================================
   FEATURES / WERTE
   ============================================================ */
.values .val{grid-column:span 3;border-top:2px solid var(--c-line);padding-top:var(--s-2);
  display:flex;flex-direction:column;gap:10px}
.val__ic{width:32px;height:32px;color:var(--accent)}
.val h3{font-size:1.05rem;font-weight:700;letter-spacing:-.01em}
.val p{font-size:.92rem;color:var(--c-muted)}

/* ============================================================
   CTA-BAND
   ============================================================ */
.band{background:var(--c-black);color:var(--c-white)}
.band .grid12{align-items:center}
.band__t{grid-column:1 / 9}
.band__t h2{color:var(--c-white)}
.band__t p{color:#C9C9C9;margin-top:12px}
.band__act{grid-column:9 / 13;display:flex;flex-direction:column;gap:12px;align-items:flex-end}
.band .btn{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.band .btn:hover{background:var(--c-white);border-color:var(--c-white);color:var(--c-black)}
.band .phone{font-size:1.6rem;font-weight:700;letter-spacing:-.01em}

/* ============================================================
   KONTAKT
   ============================================================ */
.contact__info{grid-column:1 / 6;display:flex;flex-direction:column;gap:var(--s-3)}
.contact__map{grid-column:6 / 13;border:2px solid var(--c-line);min-height:340px;background:var(--c-paper)}
.contact__map iframe{width:100%;height:100%;min-height:340px;border:0;display:block;filter:grayscale(1) contrast(1.05)}
.infoline{border-top:2px solid var(--c-line);padding-top:14px;display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:baseline}
.infoline dt{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--c-muted)}
.infoline dd{margin:0;font-weight:500}
.infoline dd a:hover{color:var(--accent)}

/* ============================================================
   PAGE / CONTENT (Unterseiten)
   ============================================================ */
.page-hero{border-bottom:2px solid var(--c-line);padding-block:var(--s-6) var(--s-5)}
.page-hero__crumbs{font-size:.78rem;letter-spacing:.06em;color:var(--c-muted);margin-bottom:var(--s-3)}
.page-hero__crumbs a:hover{color:var(--accent)}
.page-hero h1{grid-column:1 / 10}
.page-body{padding-block:var(--s-6)}
.prose{grid-column:2 / 11;font-size:1.06rem;line-height:1.7}
.prose>*+*{margin-top:1.1em}
.prose h2{font-size:1.7rem;letter-spacing:-.01em;margin-top:1.6em;font-weight:700;line-height:1.1}
.prose h3{font-size:1.25rem;margin-top:1.4em;font-weight:700}
.prose ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.prose ul li{padding-left:28px;position:relative}
.prose ul li::before{content:"";position:absolute;left:0;top:.62em;width:14px;height:2px;background:var(--accent)}
.prose a{box-shadow:inset 0 -2px 0 var(--accent);transition:background var(--t)}
.prose a:hover{background:var(--accent);color:var(--accent-ink);box-shadow:none}
.prose strong{font-weight:700}
.prose blockquote{border-left:3px solid var(--accent);padding-left:var(--s-3);font-size:1.2rem;color:var(--c-fg)}

/* ============================================================
   KONTAKTFORMULAR
   ============================================================ */
.cf{display:flex;flex-direction:column;gap:var(--s-2);max-width:none;margin-top:var(--s-2)}
.cf__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2)}
.cf__field{display:flex;flex-direction:column;gap:7px}
.cf__field>span{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--c-muted);font-weight:700}
.cf input,.cf textarea{font-family:inherit;font-size:1rem;padding:13px 14px;
  border:2px solid var(--c-line);background:var(--c-bg);color:var(--c-fg);width:100%;border-radius:0;transition:border-color var(--t)}
.cf input:focus,.cf textarea:focus{outline:none;border-color:var(--accent)}
.cf textarea{resize:vertical}
.cf .btn{align-self:flex-start;margin-top:6px}
.cf__hint{font-size:.8rem;color:var(--c-muted)}
.cf__hint a{box-shadow:inset 0 -2px 0 var(--accent)}
.cf__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf-ok{border-left:3px solid var(--accent);background:var(--c-paper);padding:14px 18px;font-weight:600}
.cf-err{border-left:3px solid var(--accent);background:#fff0ef;padding:14px 18px;font-weight:600}
@media (max-width:640px){.cf__row{grid-template-columns:1fr}}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{border-top:2px solid var(--c-line);background:var(--c-bg);padding-block:var(--s-6) var(--s-4)}
.foot__brand{grid-column:1 / 5}
.foot__brand p{color:var(--c-muted);margin-top:14px;font-size:.92rem}
.foot__col{grid-column:span 2}
.foot__col h4{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--c-muted);margin-bottom:16px}
.foot__col ul{display:flex;flex-direction:column;gap:9px}
.foot__col a{font-size:.95rem;transition:color var(--t)}
.foot__col a:hover{color:var(--accent)}
.foot__bottom{margin-top:var(--s-5);padding-top:var(--s-3);border-top:1px solid var(--c-line-soft);
  display:flex;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap;font-size:.82rem;color:var(--c-muted)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1100px){
  .hero__head{grid-column:1 / 13}
  .hero__aside{grid-column:1 / 13;border-left:0;padding-left:0;border-top:2px solid var(--c-line);padding-top:var(--s-3);
    flex-direction:row;flex-wrap:wrap;gap:var(--s-4)}
  .hero__lead{grid-column:1 / 13}
  .card{grid-column:span 6}
  .values .val{grid-column:span 6}
  .contact__info{grid-column:1 / 7}.contact__map{grid-column:7 / 13}
  .prose{grid-column:1 / 13}
}
@media (max-width:900px){
  :root{--pad:20px;--gap:18px}
  .burger{display:flex}
  .nav-cta{display:none}
  .menu{position:fixed;inset:84px 0 0 0;background:var(--c-bg);flex-direction:column;
    align-items:stretch;justify-content:flex-start;gap:0;padding:0;
    transform:translateX(100%);transition:transform var(--t);overflow-y:auto;border-top:2px solid var(--c-line)}
  .nav-open .menu{transform:translateX(0)}
  .menu a{font-size:1.25rem;padding:22px var(--pad);border-bottom:2px solid var(--c-line-soft)}
  .menu a::after{display:none}
  .menu .current-menu-item>a{color:var(--accent)}
  .slide__media{grid-column:1 / 13;min-height:300px}
  .slide__body{grid-column:1 / 13;border-left:0;border-top:2px solid var(--c-line);padding:var(--s-4) 0}
  .band__t,.band__act{grid-column:1 / 13}
  .band__act{align-items:flex-start;margin-top:var(--s-3)}
  .sec-head__t,.sec-head__meta{grid-column:1 / 13;text-align:left}
  .sec-head__meta{margin-top:var(--s-2)}
  .hero__aside{flex-direction:column}
  .page-hero h1{grid-column:1 / 13}
}
@media (max-width:640px){
  body{font-size:16px}
  .card{grid-column:1 / 13}
  .values .val{grid-column:1 / 13}
  .contact__info,.contact__map{grid-column:1 / 13}
  .foot__brand,.foot__col{grid-column:1 / 13}
  .section{padding-block:var(--s-6)}
  .infoline{grid-template-columns:1fr}
}

/* ---------- A11y ---------- */
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--c-black);color:#fff;padding:12px 18px;z-index:200}
.skip-link:focus{left:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}