/*
Theme Name: BEGAP Child
Theme URI: https://www.begap.ch/
Description: Child-Theme für GeneratePress – Design der BEGAP (Berner Gesellschaft für Alterspsychiatrie und Alterspsychotherapie). Enthält Schriften, Farben, Navigation, Footer, gepunkteten Hero-Hintergrund und Hover-Effekte. Inhalte werden als native Gutenberg-Blöcke gepflegt.
Author: BEGAP
Template: generatepress
Version: 1.2.0
Text Domain: begap-child
*/

/* ============================================================
   BEGAP – Design-Tokens (global, damit auch Nav & Footer
   ausserhalb des Inhalts die Farben kennen)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400;0,500;0,600;0,700&display=swap');

:root{
  --ink:#1c3540; --paper:#f4f6f8; --paper-2:#ffffff;
  --petrol:#1a5a86; --petrol-dark:#143a52; --petrol-deep:#102a3d;
  --teal:#c2613e; --teal-soft:#db8a63; --accent:#c2613e; --head:#1a5a86;
  --line:#e7edf2; --line-dark:rgba(255,255,255,.16);
  --muted:#5b7280; --muted-2:#7c8a94;
  --wrap:1200px;
}

@keyframes begapFloat   {0%{transform:translateY(0)}50%{transform:translateY(-7px)}100%{transform:translateY(0)}}
@keyframes begapFade    {from{transform:translateY(16px)}to{transform:translateY(0)}}
@keyframes begapPulseDot{0%,100%{opacity:.35}50%{opacity:1}}

/* Seitenhintergrund = Papierton (damit volle Breite sauber wirkt) */
body{background:var(--paper)}

/* ---- Grundlagen / Tokens (Inhaltsbereich) --------------- */
.begap{
  font-family:'Instrument Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
.begap *{box-sizing:border-box}
.begap img{max-width:100%;display:block}
.begap a{color:inherit;text-decoration:none}
.begap h1,.begap h2,.begap h3,.begap p{margin:0}

/* kleine versale Labels (Swiss) */
.begap-label{font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.begap-label--light{color:var(--teal)}

/* Headlines */
.begap-h1{font-weight:600;font-size:clamp(42px,6.6vw,86px);line-height:1.0;letter-spacing:-.04em}
.begap-h2{font-weight:600;font-size:clamp(28px,4vw,48px);line-height:1.05;letter-spacing:-.03em}
.begap-h3{font-weight:600;font-size:21px;line-height:1.2;letter-spacing:-.01em}
.begap-h1,.begap-h2,.begap-h3{color:var(--head)}

/* ---- Navigation (vom Theme via Hook ausgegeben) --------- */
.begap-nav{position:sticky;top:0;z-index:50;background:rgba(16,42,61,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line-dark)}
.begap-nav__in{max-width:var(--wrap);margin:0 auto;padding:0 28px;height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.begap-nav__in>a{text-decoration:none}
.begap-logo{display:flex;align-items:center;gap:9px}
.begap-logo__psi{font-family:Georgia,'Times New Roman',serif;font-size:29px;line-height:1;color:#c2613e;padding-bottom:4px}
.begap-logo__wm{font-size:21px;font-weight:700;letter-spacing:-1px;color:#eef3f8}
.begap-nav__links{display:flex;align-items:center;gap:4px}
.begap-navlink{position:relative;text-decoration:none;color:#eef4f7;font-size:14.5px;font-weight:500;padding:9px 14px;border-radius:4px;white-space:nowrap;cursor:pointer;transition:background .2s ease,color .2s ease}
.begap-navlink::after{content:"";position:absolute;left:14px;right:14px;bottom:6px;height:2px;background:var(--teal);border-radius:2px;transform:scaleX(0);transform-origin:left center;transition:transform .28s cubic-bezier(.4,0,.2,1)}
.begap-navlink:hover{background:rgba(255,255,255,.12);color:#fff}
.begap-navlink:hover::after,.begap-navlink:focus-visible::after{transform:scaleX(1)}
.begap-navlink.is-active{color:var(--teal)}
.begap-navlink.is-active::after{transform:scaleX(1)}
.begap-lang{display:inline-flex;align-items:center;gap:2px;margin-left:14px;padding-left:14px;border-left:1px solid rgba(255,255,255,.2)}
.begap-lang a{text-decoration:none;color:#9fb8b5;font-size:12.5px;font-weight:600;letter-spacing:.05em;padding:5px 7px;border-radius:4px;cursor:pointer;transition:color .2s,background .2s}
.begap-lang a:hover{color:#fff;background:rgba(255,255,255,.12)}
.begap-lang a.is-active{color:var(--teal)}

/* Cluster (Links + Sprache + Burger) rechts in der Leiste */
.begap-nav__cluster{display:flex;align-items:center;gap:4px}
/* Mobile-Umschalter (Checkbox-Hack – funktioniert ohne JS, cache-sicher) */
.begap-navtoggle{display:none}
.begap-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;margin-left:8px;cursor:pointer;border-radius:6px;flex:0 0 auto}
.begap-burger:hover{background:rgba(255,255,255,.10)}
.begap-burger span{display:block;width:24px;height:2px;margin:0 auto;background:#eef4f7;border-radius:2px;transition:transform .25s ease,opacity .2s ease}
.begap-navtoggle:checked ~ .begap-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.begap-navtoggle:checked ~ .begap-burger span:nth-child(2){opacity:0}
.begap-navtoggle:checked ~ .begap-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---- Buttons -------------------------------------------- */
.begap-btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;cursor:pointer;font-size:14.5px;font-weight:600;padding:10px 18px;border-radius:4px;transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease}
.begap-btn:active{transform:translateY(1px)}
.begap-btn--primary{background:var(--teal);color:#ffffff}
.begap-btn--primary:hover{background:#d8845c}
.begap-btn--paper{background:#c2613e;color:#ffffff}
.begap-btn--paper:hover{transform:translateY(-2px)}
.begap-btn--ghost{background:transparent;color:#1a5a86;border:1px solid #1a5a86}
.begap-btn--ghost:hover{background:rgba(26,90,134,.08)}
/* Geister-Button auf dunklen Panels hell halten (Kontakt) */
.begap-panel--dark .begap-btn--ghost{color:#eef3f8;border-color:rgba(255,255,255,.5)}
.begap-panel--dark .begap-btn--ghost:hover{background:rgba(255,255,255,.12)}
.begap-btn a{color:inherit}

/* ---- Hero ----------------------------------------------- */
.begap-hero{position:relative;overflow:hidden;min-height:clamp(560px,82vh,780px);display:flex;align-items:center;
  padding:80px max(28px,calc((100% - var(--wrap))/2));
  background:linear-gradient(100deg,#f4f7fb 24%,rgba(244,247,251,.35) 55%,rgba(244,247,251,0) 80%),radial-gradient(rgba(26,90,134,.28) 1.4px,transparent 1.4px),radial-gradient(120% 120% at 84% 6%,#ffffff 0%,#eaf1f8 64%,#dfe9f3 100%);
  background-size:auto,24px 24px,auto;background-position:0 0,-6px -6px,0 0;background-repeat:no-repeat,repeat,no-repeat}
.begap-hero::after{content:"\03C8";position:absolute;right:40px;bottom:-100px;font-family:Georgia,'Times New Roman',serif;font-size:clamp(300px,40vw,470px);line-height:1;color:#1a5a86;opacity:.08;pointer-events:none;z-index:1}
.begap-hero__inner{position:relative;z-index:2;max-width:780px;animation:begapFade .9s ease both}
.begap-badge{display:inline-flex;align-items:center;gap:10px;padding:7px 14px;margin-bottom:28px;border:1px solid rgba(26,90,134,.22);border-radius:3px;background:rgba(26,90,134,.05)}
.begap-badge__dot{width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 12px var(--teal);animation:begapPulseDot 2.4s ease-in-out infinite}
.begap-badge__txt{font-size:12px;font-weight:600;letter-spacing:1px;color:#b15536;text-transform:uppercase;line-height:1.45}
.begap-hero__title{color:#c2613e;margin-bottom:26px}
.begap-hero__title .accent{color:#1a5a86;font-weight:600}
.begap-hero__lead{font-size:clamp(16px,1.7vw,20px);line-height:1.6;color:#45596a;max-width:620px;margin-bottom:38px}
.begap-hero__cta{display:flex;flex-wrap:wrap;gap:14px}

/* ---- Generische Sektionen ------------------------------- */
.begap-section{max-width:var(--wrap);margin:0 auto;padding:84px 28px}
.begap-section--auftrag{padding-top:104px;padding-bottom:72px;border-bottom:1px solid var(--line)}
.begap-section--cards{padding-top:40px}
.begap-section--partners{padding-top:0}
.begap-band{background:var(--petrol-dark)}
.begap-band .begap-h2{color:#eef3f8}
.begap-band p{color:rgba(231,238,236,.78)}

/* Auftrag-/Statement-Block (Layout nativ via Spalten-Block) */
.begap-statement__lead{font-weight:500;font-size:clamp(22px,3vw,33px);line-height:1.3;letter-spacing:-.02em;color:#1a5a86;max-width:780px}

/* Karten-Grid (Layout nativ via Grid-Block) */
.begap-card{display:flex;flex-direction:column;background:var(--paper-2);border:1px solid var(--line);border-radius:5px;padding:32px 30px 28px;transition:transform .2s,border-color .2s}
.begap-card:hover{transform:translateY(-2px);border-color:#bcd0de;box-shadow:0 12px 30px -18px rgba(0,0,0,.4)}
.begap-card__ico{width:48px;height:48px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:22px;background:rgba(26,90,134,.1);color:#1a5a86}
.begap-card__ico--2{background:rgba(194,97,62,.14)}
.begap-card__ico--3{background:rgba(26,90,134,.14)}
.begap-card p{font-size:14.5px;line-height:1.55;color:#5b7280;margin:10px 0 22px;flex:1}
.begap-more{font-size:14px;font-weight:600;color:var(--accent);display:inline-flex;align-items:center;gap:7px}
.begap-more a{color:var(--accent)}

/* Aufgaben (dunkles Band) */
.begap-tasks{display:flex;flex-direction:column}
.begap-task{padding:22px 4px;border-top:1px solid var(--line-dark)}
.begap-task__n{font-weight:600;font-size:18px;color:var(--teal)}
.begap-task p{font-size:16.5px;line-height:1.5;color:#e6eef5}

/* Mitgliedschaft / Panels */
.begap-panel{border:1px solid var(--line);border-radius:6px;background:var(--paper-2);padding:52px clamp(28px,5vw,64px)}
.begap-panel--dark{background:var(--petrol);border:0;color:#eef3f8}
.begap-panel--dark .begap-h2{color:#eef3f8}
.begap-prose{font-size:17px;line-height:1.7;color:#3c5350;margin-bottom:14px}
.begap-next{display:flex;align-items:flex-start;gap:14px;margin:18px 0 0;background:#eef5fb;border:1px solid #d3e3f0;border-left:3px solid #c2613e;border-radius:5px;padding:16px 20px}
.begap-next__label{font-size:11px;font-weight:700;letter-spacing:1.5px;color:#c2613e;text-transform:uppercase;white-space:nowrap;padding-top:2px}
.begap-next__txt{font-size:15px;line-height:1.6;color:#1a5a86;margin:0;font-weight:500}
.begap-linkcard{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--paper-2);border:1px solid var(--line);border-radius:5px;padding:24px 28px;color:#1a5a86;transition:transform .15s,border-color .15s}
.begap-linkcard:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 12px 30px -18px rgba(0,0,0,.4)}
.begap-linkcard .arr{font-size:20px;color:var(--accent)}

/* Partner-Spalten (Layout nativ via Grid-Block) */
.begap-partners__col{background:var(--paper-2);border:1px solid var(--line);border-radius:5px;padding:28px 28px 12px}
.begap-partners__col h3{font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.begap-plink{display:flex;flex-direction:column;gap:2px;padding:15px 0;border-top:1px solid #eee7d9;text-decoration:none;color:#1a5a86}
.begap-plink:hover{color:var(--accent)}
.begap-plink b{font-size:15px;font-weight:600}
.begap-plink span{font-size:13px;line-height:1.4;color:var(--muted-2)}

.begap-mt{margin-top:14px}
.begap-mb{margin-bottom:18px}

/* ---- Footer (vom Theme via Hook ausgegeben) ------------- */
.begap-footer{background:var(--petrol-deep);color:#bcd0de;padding:64px 28px 36px}
.begap-footer__in{max-width:var(--wrap);margin:0 auto}
.begap-footer__top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:40px;padding-bottom:44px;border-bottom:1px solid var(--line-dark)}
.begap-footer__brand{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.begap-footer__brand .begap-logo__psi{font-size:32px}
.begap-footer__brand .begap-logo__wm{font-size:23px}
.begap-footer p{max-width:340px;font-size:14px;line-height:1.6;color:#9fb3c2}
.begap-footer__cols{display:flex;gap:64px;flex-wrap:wrap}
.begap-footer__col{display:flex;flex-direction:column;gap:12px}
.begap-footer__col .h{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:#6f8a9c;margin-bottom:4px}
.begap-footer__col a{text-decoration:none;color:#bcd0de;font-size:14.5px}
.begap-footer__col a:hover{color:var(--teal)}
.begap-footer__col em{font-style:normal;color:#9fb3c2;font-size:14px}
.begap-footer__bottom{padding-top:24px;font-size:13px;color:#6f8a9c}

/* ============================================================
   LAYOUT – fest im Child-Theme verdrahtet
   ------------------------------------------------------------
   Auf manchen Installationen (GeneratePress + „CSS nur bei
   Bedarf laden" / Cache) wird das WordPress-eigene Layout-CSS
   für Spalten-/Raster-Blöcke NICHT geladen – dann stapeln
   sich Karten und Spalten untereinander. Deshalb erzeugen wir
   das Layout hier selbst, auf unseren stabilen BEGAP-Klassen,
   mit !important. So ist es unabhängig von Theme, Plugins und
   Cache immer korrekt – und die Inhalte bleiben native,
   editierbare Blöcke.
   ============================================================ */

/* Oberste Ebene: keine vom Theme erzwungenen Vertikalabstände */
.begap > *{margin-top:0 !important;margin-bottom:0 !important}

/* WordPress/GeneratePress: automatisches block-gap zwischen Blöcken
    abschalten – die BEGAP-Abstände kommen ausschliesslich aus den
   expliziten Klassen (begap-mt/-mb, Komponenten-Margins), exakt wie im
   Soll-Design. Lokale blockGap-Werte (Karten 22px, Buttons 14px) bleiben,
   weil sie die Variable im jeweiligen Block selbst überschreiben. */
.begap{--wp--style--block-gap:0px}
.begap .wp-block-columns{margin-top:0 !important;margin-bottom:0 !important}
.begap .wp-block-column{margin-top:0 !important}

/* --- Raster: Karten (4) & Partner (3) --------------------- */
.begap-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:22px !important;
}
.begap-partners{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:22px !important;
  align-items:start !important;
}
.begap-grid > *,
.begap-partners > *{margin:0 !important;width:auto !important;max-width:none !important}

/* --- Zweispalter (Columns-Blöcke) ------------------------- */
.begap-statement{
  display:grid !important;
  grid-template-columns:180px minmax(0,1fr) !important;
  gap:0 40px !important;align-items:start !important;
}
.begap-cols2{
  display:grid !important;
  grid-template-columns:40% minmax(0,1fr) !important;
  gap:0 56px !important;align-items:start !important;
}
.begap-task{
  display:grid !important;
  grid-template-columns:40px minmax(0,1fr) !important;
  gap:0 20px !important;align-items:start !important;
}
.begap-panel--split{
  display:grid !important;
  grid-template-columns:62% minmax(0,1fr) !important;
  gap:0 44px !important;align-items:center !important;
}
.begap-panel--kontakt{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  gap:0 32px !important;align-items:center !important;
}
/* Spalten-Kinder: feste flex-basis/Breite aufheben, Grid steuert die Breite */
.begap-statement > .wp-block-column,
.begap-cols2 > .wp-block-column,
.begap-task > .wp-block-column,
.begap-panel--split > .wp-block-column,
.begap-panel--kontakt > .wp-block-column{
  flex-basis:auto !important;width:auto !important;max-width:none !important;min-width:0 !important;margin:0 !important;
}

/* --- Flex-Gruppen (Buttons, „Nächste Sitzung") ------------ */
.begap-hero__cta{display:flex !important;flex-wrap:wrap !important;gap:14px !important;align-items:center !important}
.begap-next{display:flex !important;flex-wrap:nowrap !important;gap:14px !important;align-items:flex-start !important}

/* --- Feinschliff ------------------------------------------ */
.begap-hero__title{font-size:clamp(34px,4.4vw,58px);overflow-wrap:break-word}
.begap-hero{justify-content:flex-start}
.begap-hero__inner{margin:0 auto 0 0}
.begap-statement .begap-label{padding-top:6px}
.begap-task .begap-task__n{padding-top:2px}

/* ---- Responsive ----------------------------------------- */
@media (max-width:980px){
  .begap-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .begap-partners{grid-template-columns:1fr !important}
}
@media (max-width:880px){
  /* Burger einblenden, Links zu Dropdown-Panel unter der Leiste */
  .begap-burger{display:flex}
  .begap-nav__links{
    position:absolute;top:72px;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--petrol-deep);
    border-top:1px solid rgba(255,255,255,.12);
    box-shadow:0 18px 30px -16px rgba(0,0,0,.55);
    padding:6px 22px 14px;
    display:none;
  }
  .begap-navtoggle:checked ~ .begap-nav__links{display:flex}
  .begap-nav__links .begap-navlink{
    display:block;padding:15px 4px;font-size:16px;border-radius:0;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .begap-navlink::after{display:none}
}
@media (max-width:680px){
  .begap-grid{grid-template-columns:1fr !important}
  .begap-statement,
  .begap-cols2,
  .begap-panel--split,
  .begap-panel--kontakt{grid-template-columns:1fr !important;gap:22px 0 !important;align-items:start !important}
}