/* ═══════════════════════════════════════════════
   Clinic Nepal – Design Tokens
   Single source of truth for non-Tailwind values.
════════════════════════════════════════════════ */

:root {
  /* ── Section spacing ── */
  --py-hero:       6rem;    /* 96px  ≈ py-24  — hero sections         */
  --py-section:    5rem;    /* 80px  ≈ py-20  — standard sections     */
  --py-section-lg: 6rem;    /* 96px  ≈ py-24  — large content blocks  */
  --py-section-sm: 3rem;    /* 48px  ≈ py-12  — compact sections      */

  /* ── Animation ── */
  --transition-std:  0.3s ease;
  --transition-slow: 0.5s ease;
  --reveal-duration: 0.7s;
  --reveal-easing:   ease;

  /* ── Mobile menu ── */
  --mobile-menu-max-h: 720px;
  --mobile-menu-transition: max-height 0.4s ease;

  /* ── Scroll ── */
  --scroll-top-trigger: 400; /* px */
}

/* ── Mobile nav (standardised, overrides any per-page values) ── */
#mobile-nav {
  max-height: 0;
  overflow: hidden;
  transition: var(--mobile-menu-transition);
}
#mobile-nav.open {
  max-height: var(--mobile-menu-max-h);
}

/* ── Reveal animation utility ── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity  var(--reveal-duration) var(--reveal-easing),
    transform var(--reveal-duration) var(--reveal-easing);
}
.reveal.visible {
  opacity: 1;
  transform: none;
}

/* ── Kanonische Hero (Standardseiten) ── */
/* min-h-screen kommt via Tailwind-Klasse; diese Util garantiert
   konsistente vertikale Zentrierung und Fold-Abschluss. */
.hero-canonical {
  --nav-h: 8rem; /* sticky Navbar (Logo 7rem + py-2) – wird vom Viewport abgezogen */
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100svh - var(--nav-h)); /* mobile: ohne Browser-UI-Sprung */
  display: flex;
  align-items: center;
}
@media (max-width: 639px) {
  .hero-canonical { --nav-h: 5.25rem; } /* Logo 4.25rem + py-2, siehe Navbar-Mobile unten */
}

/* ── Aktuelles: Tag-Farben (Token-basiert, ein Stil pro Typ) ── */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.tag--jahresbericht   { background: #e6f0f0; color: #006767; } /* Teal */
.tag--erfahrung       { background: #fdf3d6; color: #8a6500; } /* Gold-getönt */
.tag--restcent        { background: #e9f5ee; color: #2f7a4d; } /* Grün */
.tag--presse          { background: #eceef2; color: #41506a; } /* Slate */
.tag--reise           { background: #fdeede; color: #c05400; } /* Orange */
.tag--news            { background: #dff3f3; color: #00504f; } /* Teal hell – News aus Meghauli */

/* ── Spenden-Button in der Navbar ──
   Gold statt Teal: hebt sich klar von Nav-Links + Logo ab.
   Eigene Klasse statt Tailwind, damit auch blog/ + projekte/ (ohne tailwind.css) ihn bekommen. */
:root {
  --donate-bg:        #fdc425; /* secondary-container */
  --donate-bg-hover:  #ffd24d;
  --donate-ink:       #0d1c2f; /* on-surface */
  --donate-heart:     #c05400; /* tertiary-container */
  --donate-ring:      #006767; /* primary */
  --donate-ease:      cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-donate {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.35rem 0.7rem 1.1rem;
  border-radius: 9999px;
  background: var(--donate-bg);
  color: var(--donate-ink);
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 1px 0 rgb(0 0 0 / 0.06), 0 6px 18px -6px rgb(253 196 37 / 0.9);
  transition: transform 0.25s var(--donate-ease), box-shadow 0.25s var(--donate-ease), background-color 0.2s ease;
}
.nav-donate:hover {
  background: var(--donate-bg-hover);
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgb(0 0 0 / 0.06), 0 10px 24px -6px rgb(253 196 37 / 1);
}
.nav-donate:active { transform: translateY(0) scale(0.97); }
.nav-donate:focus-visible { outline: 3px solid var(--donate-ring); outline-offset: 3px; }
.nav-donate[aria-current="page"] { box-shadow: inset 0 0 0 2px var(--donate-ink); }
.nav-donate__heart {
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
  fill: var(--donate-heart);
  transition: transform 0.35s var(--donate-ease);
}
.nav-donate:hover .nav-donate__heart { transform: scale(1.18); }

/* Kompakt in der mobilen Kopfzeile */
.nav-donate--compact { padding: 0.6rem 0.95rem 0.6rem 0.8rem; font-size: 0.875rem; gap: 0.4rem; }
.nav-donate--compact .nav-donate__heart { width: 1rem; height: 1rem; }
/* Sehr schmale Geräte: Label bleibt sichtbar, nur etwas kompakter */
@media (max-width: 359px) {
  .nav-donate--compact { padding: 0.5rem 0.7rem 0.5rem 0.6rem; font-size: 0.8125rem; gap: 0.3rem; }
}
/* Sichtbarkeit selbst steuern (blog/ + projekte/ haben kein Tailwind): kompakt < 1024px, voll ab 1024px (= lg) */
.nav-donate--full { display: none; }
@media (min-width: 1024px) {
  .nav-donate--full { display: inline-flex; }
  .nav-donate--compact { display: none; }
}

/* Sprachumschalter in der Kopfzeile: auf allen Breiten sichtbar (mobil direkt neben dem Hamburger-Menü) */
.nav-lang-toggle--desktop { display: flex; }
/* Mobil: Flagge und Hamburger sind gleich große 40x40-Boxen, Inhalt exakt mittig -> perfekt auf einer Linie */
@media (max-width: 1023px) {
  .nav-lang-toggle--desktop { min-width: 2.5rem; height: 2.5rem; padding: 0 0.45rem; align-items: center; justify-content: center; }
  .nav-lang-toggle--desktop > span:first-child { flex: none; }
  #hamburger { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; line-height: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-donate, .nav-donate__heart { transition: none; }
  .nav-donate:hover, .nav-donate:hover .nav-donate__heart { transform: none; }
}

/* Navbar auf Handys: Platz für den Spenden-Button schaffen */
/* ── 30-Jahre-Logo: Ebene "30" (gold) hinter dem Logo (base) ── */
.nav-logo-link { flex-shrink: 0; }
.logo30 { display: block; }
.logo30__stage { position: relative; display: block; height: 7rem; aspect-ratio: 404 / 290; }
.logo30__stage img, .logo30__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.logo30__gold { z-index: 0; }
.logo30__base { z-index: 1; }

@keyframes logo30-base-in { from { opacity: 0; } to { opacity: 1; } }
.logo30--animate .logo30__base { animation: logo30-base-in 0.8s ease-out 0.1s both; }
/* während des Zeichnens zeigt das Canvas die goldene Ebene, danach wieder das <img> */
.logo30__canvas { display: none; z-index: 0; }
.logo30--animate .logo30__gold { visibility: hidden; }
.logo30--animate .logo30__canvas { display: block; }
@media (prefers-reduced-motion: reduce) {
  .logo30--animate .logo30__base { animation: none; }
}
@media (max-width: 639px) {
  #navbar > div { padding-left: 1rem; padding-right: 1rem; }
  #navbar .nav-logo { height: 4.25rem; }
  #navbar #lang-label { display: none; } /* Flagge reicht, aria-label bleibt */
  #navbar #lang-toggle, #navbar #hamburger { padding: 0.5rem; }
  #navbar > div > .flex { gap: 0.5rem; }
}

/* ── Fließtext-Skala (einheitlich auf allen Seiten) ──
   .text-body  = alle Absätze: Seiten-Intros, Abschnittstexte, Artikeltext
   .text-small = Karten-Teaser, Hinweise, Listen in Karten
   Keine text-sm/-lg/-xl/leading-* Klassen zusätzlich an diese Absätze hängen. */
:root {
  --text-body-size:  1rem;       /* 16px Handy */
  --text-body-lh:    1.7;
  --text-small-size: 0.875rem;   /* 14px */
  --text-small-lh:   1.6;
}
@media (min-width: 768px) {
  :root { --text-body-size: 1.0625rem; } /* 17px ab Tablet */
}
.text-body  { font-size: var(--text-body-size);  line-height: var(--text-body-lh); }
.text-small { font-size: var(--text-small-size); line-height: var(--text-small-lh); }

/* ── Hero-Hauptüberschrift (alle Seiten außer Startseite) ──
   Blanch hat nur einen Schnitt → font-weight 400 + font-synthesis: none, sonst fettet der Browser künstlich.
   Farbe bleibt als Klasse am h1 (text-on-background / text-white), weil diese Datei nach Tailwind lädt.
   Akzentwort: <span class="text-primary"> (grün, nicht kursiv). Kein Punkt am Ende. */
.hero-title {
  font-family: 'Blanch', sans-serif;
  font-weight: 400;
  font-synthesis-weight: none;
  font-size: 3rem;          /* 48px */
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin-bottom: 2rem;
  text-wrap: balance;
  hyphens: auto;             /* lange Wörter (z. B. Jahreshauptversammlung) auf Handys trennen */
  overflow-wrap: break-word;
}
@media (min-width: 768px) {
  .hero-title { font-size: 4.5rem; } /* 72px */
}
/* Standardfarbe mit Spezifität 0 – jede Farbklasse am h1 (z. B. text-white) gewinnt */
:where(.hero-title) { color: #0d1c2f; } /* on-surface */

/* ── Skeleton-Loader ──
   img.is-loading: gesetzt von js/skeleton.js, solange ein Bild lädt.
   .skeleton: Platzhalter-Element (z. B. Galerie-Karten vor dem Laden der Bildliste).
   Erscheint erst nach 300 ms – bei schneller Verbindung blitzt nichts auf. */
:root {
  --skeleton-base:  #e8eef2;
  --skeleton-shine: #f6f9fb;
  --skeleton-delay: 300ms;
}
.skeleton,
img.is-loading {
  background-color: var(--skeleton-base);
  background-image: linear-gradient(100deg, transparent 20%, var(--skeleton-shine) 50%, transparent 80%);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation:
    skeleton-in 0.25s ease var(--skeleton-delay) both,
    skeleton-shimmer 1.4s ease-in-out var(--skeleton-delay) infinite;
}
img.is-loaded { animation: skeleton-img-in 0.4s ease both; }

@keyframes skeleton-in      { from { opacity: 0; } to { opacity: 1; } }
@keyframes skeleton-shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }
@keyframes skeleton-img-in  { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .skeleton, img.is-loading { background-image: none; animation: skeleton-in 0.01s linear var(--skeleton-delay) both; }
  img.is-loaded { animation: none; }
}

/* ── Footer: Logo + Adresse zentriert, solange sie untereinander stehen ──
   Breakpoint = Tailwind @lg (32rem) des Container-Elternelements, wie @lg:flex-row. */
.footer-brand { align-items: center; text-align: center; }
@container (min-width: 32rem) {
  .footer-brand { text-align: left; }
}


/* ── Sprachhinweis (nur deutsche Seiten, nicht-deutsche Browsersprache): schlanke Leiste direkt unter der Navbar ── */
.lang-hint {
  position: sticky; top: var(--lang-hint-top, 5.3rem); z-index: 49; background: #e6f0f0; color: #0d1c2f; border-bottom: 1px solid #cfe2e2;
  display: grid; grid-template-rows: 1fr; animation: lang-hint-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.lang-hint--out { animation: lang-hint-out 0.25s ease-in forwards; }
.lang-hint, .lang-hint * { box-sizing: border-box; } /* statische Seiten haben keinen Tailwind-Reset */
.lang-hint__inner {
  min-height: 0; overflow: hidden; max-width: 80rem; margin: 0 auto; width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 0.5rem 0.9rem; flex-wrap: wrap;
  padding: 0.55rem 3.25rem 0.55rem 1rem; position: relative;
}
.lang-hint__flag { flex: none; width: 1.5rem; height: 1rem; border-radius: 2px; overflow: hidden; box-shadow: 0 0 0 1px rgba(15, 40, 40, 0.18); }
.lang-hint__text { margin: 0; font-size: 0.875rem; line-height: 1.35; }
.lang-hint__link {
  flex: none; display: inline-flex; align-items: center; gap: 0.35rem; color: #006767;
  font-weight: 700; font-size: 0.875rem; text-decoration: none; border-radius: 0.25rem;
}
.lang-hint__link svg { transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
.lang-hint__link:hover { text-decoration: underline; text-underline-offset: 3px; color: #004f4f; }
.lang-hint__link:hover svg { transform: translateX(4px); }
.lang-hint__link:focus-visible, .lang-hint__close:focus-visible { outline: 3px solid #fdc425; outline-offset: 2px; }
.lang-hint__close {
  position: absolute; top: 50%; right: 0.6rem; transform: translateY(-50%);
  display: grid; place-items: center; width: 2rem; height: 2rem;
  border: 0; border-radius: 9999px; background: transparent; color: #36494a; cursor: pointer;
}
.lang-hint__close:hover { background: rgba(0, 103, 103, 0.12); color: #0d1c2f; }
/* Seiten ohne Navbar: ganz oben ankleben; niedrige Bildschirme (Handy quer): nicht kleben; Druck: ausblenden */
.lang-hint--top { top: 0; }
@media (max-height: 500px) { .lang-hint { position: static; } }
@media print { .lang-hint { display: none; } }
@keyframes lang-hint-in { from { grid-template-rows: 0fr; opacity: 0; } to { grid-template-rows: 1fr; opacity: 1; } }
@keyframes lang-hint-out { to { grid-template-rows: 0fr; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lang-hint, .lang-hint--out { animation-duration: 0.01s; } }

/* Inline-Link mit Weiterleitungs-Pfeil: neutral im Ruhezustand, grün bei Hover */
.link-out { color: inherit; text-decoration: none; transition: color var(--duration-fast, 150ms) ease; }
.link-out__end { white-space: nowrap; }
.link-out__icon { display: inline-block; width: 0.9em; height: 0.9em; vertical-align: -0.1em; margin-left: 0.25em; transition: transform 0.2s ease; }
.link-out:hover, .link-out:focus-visible { color: #006767; }
.link-out:hover .link-out__icon, .link-out:focus-visible .link-out__icon { transform: translate(2px, -2px); }
@media (prefers-reduced-motion: reduce) { .link-out__icon { transition: none; } }

/* ── Navbar: beim Scrollen kompakter (nur Transform → kein Layout-Sprung, Seitenhöhe bleibt gleich) ──
   Die Leiste behält ihre Box-Höhe (8rem), nur Hintergrund, Inhalt und Logo werden optisch verkleinert (128 → ~84 px). */
@media (min-width: 640px) {
  #navbar { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; border-bottom: 0; pointer-events: none; }
  #navbar::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: auto;
    background: rgb(255 255 255 / 0.8); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
    border-bottom: 1px solid #f1f5f9; box-shadow: 0 8px 30px rgb(0 0 0 / 0.04);
    transform-origin: 50% 0; transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  }
  #navbar > div { pointer-events: auto; transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1); }
  #navbar .nav-logo-link { transform-origin: 0 50%; transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1); }
  html.nav-compact #navbar::before { transform: scaleY(0.656); box-shadow: 0 4px 20px rgb(0 0 0 / 0.08); }
  html.nav-compact #navbar > div:first-child { transform: translateY(-22px); }
  /* aufgeklapptes Handy-/Tablet-Menü klebt an der verkleinerten Leiste (128 → 84 px = 44 px) */
  html.nav-compact #navbar > #mobile-nav { transform: translateY(-44px); }
  html.nav-compact #navbar .nav-logo-link { transform: scale(0.643); }
  /* klebende Leisten unter der Navbar rücken mit nach oben */
  html.nav-compact .lang-hint { top: calc(var(--lang-hint-top, 5.3rem) - 44px); }
  .lang-hint { transition: top 0.35s cubic-bezier(0.32, 0.72, 0, 1); }
}
@media (prefers-reduced-motion: reduce) {
  #navbar::before, #navbar > div, #navbar .nav-logo-link, .lang-hint { transition: none; }
}

/* iPadOS/iOS Safari 26: Die Browser-Leiste übernimmt die Farbe fixierter Kopfzeilen – nur eine deckende Fläche
   (ohne Transparenz/Unschärfe) verhindert, dass darunter durchscrollender Seiteninhalt verschwommen sichtbar wird. */
@supports (-webkit-touch-callout: none) {
  @media (min-width: 640px) {
    #navbar::before { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
  }
}

/* ── Spenden: Bankverbindung – mobil: Label + Kopier-Button in einer Zeile, Wert darunter in voller Breite ── */
.bank-row {
  display: grid; align-items: center; gap: 0.125rem 1rem;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label btn" "value value";
}
.bank-row__label { grid-area: label; }
.bank-row__value { grid-area: value; min-width: 0; }
.bank-row__value p { overflow-wrap: anywhere; }
.bank-row__value .font-mono { font-size: clamp(0.8125rem, 4.1vw, 1.125rem); }
.bank-row > button { grid-area: btn; justify-self: end; }
@media (min-width: 640px) {
  .bank-row { grid-template-columns: 8rem minmax(0, 1fr) auto; grid-template-areas: "label value btn"; gap: 1rem; }
  .bank-row__value .font-mono { font-size: 1.125rem; }
}

/* ── Mitgliedschaft: Bankdaten – schlichte Umrandung ── */
.bankbox {
  display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 0; align-items: baseline;
  margin: 0.9rem 0 0.25rem -1.5rem; padding: 1rem 1.4rem 1rem calc(1.5rem - 1px);
  border: 1px solid #bcc9c8; border-radius: 0.5rem;
}
.bankbox dt, .bankbox dd { padding: 0.35rem 0; }
.bankbox dt { font-size: 0.8125rem; font-weight: 600; color: #3d4949; padding-right: 2rem; }
.bankbox dd { margin: 0; font-weight: 600; color: #0d1c2f; overflow-wrap: anywhere; }
.bankbox__mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.bankbox__iban { color: #006767; font-weight: 700; font-size: 1.0625rem; }
@media (max-width: 600px) {
  .bankbox { grid-template-columns: minmax(0, 1fr); padding: 0.9rem 1.1rem 0.9rem calc(1.5rem - 1px); }
  .bankbox dt { padding: 0.5rem 0 0; }
  .bankbox dt:first-child { padding-top: 0; }
  .bankbox dd { padding: 0.05rem 0 0; }
  .bankbox__iban { font-size: clamp(0.8125rem, 4.2vw, 1rem); overflow-wrap: normal; }
}

/* ── Hero-Texte: einheitliche Zeilenlänge (~60 Zeichen), ruhige Umbrüche ── */
.hero-lead { max-width: 36rem; }
.text-body, .hero-lead { text-wrap: pretty; }
.hero-title { text-wrap: balance; }