/* Habba e.V. – einfache Webpräsenz (One-Pager + Impressum + Datenschutz)
   Alle Farben, Abstände und Schriftgrößen kommen aus tokens.css.
   Hier steht bewusst kein einziger Hex-Wert. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); }
img, svg { display: block; max-width: 100%; }
a { color: var(--primary); text-decoration-thickness: 1.5px; text-underline-offset: .2em; }
a:hover { color: var(--primary-strong); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-s); }
h1, h2, h3, p { margin: 0; }
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 0; background: var(--surface); padding: var(--space-3) var(--space-4); z-index: 10; }
.skip:focus { left: var(--space-4); top: var(--space-4); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Kopfzeile ---------- */
.site-head { background: var(--surface); border-bottom: 1px solid var(--border); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); min-height: 72px; flex-wrap: wrap; padding-block: var(--space-3); }
.brand img { height: 40px; width: auto; }
.nav { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.nav a { color: var(--text); text-decoration: none; font-weight: 500; }
.nav a:hover { color: var(--primary); text-decoration: underline; text-underline-offset: .3em; }

/* ---------- Abschnitte ---------- */
section { padding-block: var(--space-8); }
.sec-head { max-width: 40rem; margin-bottom: var(--space-6); }
.sec-head h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); color: var(--primary-strong); }
.sec-head p { margin-top: var(--space-4); color: var(--text-muted); font-size: var(--fs-lead); line-height: var(--lh-lead); }

/* ---------- Hero ---------- */
.hero { padding-block: var(--space-9) var(--space-7); }
.hero h1 { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--tr-display); font-weight: var(--fw-display); color: var(--primary-strong); max-width: 11ch; }
.hero .lead { margin-top: var(--space-5); font-size: var(--fs-lead); line-height: var(--lh-lead); max-width: var(--measure); }

/* ---------- Projektkarten ---------- */
.projects { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.project { background: var(--surface); border-radius: var(--radius-l); overflow: hidden; display: flex; flex-direction: column; }
.project figure { margin: 0; }
.project picture { display: block; }
.project figcaption { padding: var(--space-3) var(--space-6) 0; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-muted); }
.project img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; height: auto; }
.project .txt { padding: var(--space-5) var(--space-6) var(--space-6); display: flex; flex-direction: column; flex: 1; }
.project .meta { color: var(--text-muted); font-size: var(--fs-small); }
.project h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); margin-top: var(--space-2); }
.project p { margin-top: var(--space-3); color: var(--text-muted); }
.facts { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-top: auto; padding-top: var(--space-5); }
.facts b { display: block; font-size: 1.75rem; font-weight: 800; color: var(--primary-strong); font-variant-numeric: tabular-nums; line-height: 1.1; }
.facts span { font-size: var(--fs-small); color: var(--text-muted); }
@media (max-width: 760px) { .projects { grid-template-columns: 1fr; } }

/* ---------- Über uns ---------- */
.about { display: grid; grid-template-columns: 7fr 5fr; gap: var(--space-8); align-items: start; }
@media (max-width: 900px) { .about { grid-template-columns: 1fr; } }
/* Nur der Schnitt 400 ist geladen – nie fett setzen, sonst rechnet der Browser ihn falsch nach. */
.ar { font-family: var(--font-arabic); font-size: 1.5rem; line-height: 1.9; font-weight: 400; }
.card { background: var(--surface); border-radius: var(--radius-l); padding: var(--space-6); }
.card-tint { background: var(--primary-tint); }
.card h2, .card h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--primary-strong); }

/* Keim als Aufzählungszeichen – einmal pro Ansicht */
.keim-list { list-style: none; padding-left: 0; margin: var(--space-4) 0 0; display: grid; gap: var(--space-3); }
.keim-list li { position: relative; padding-left: var(--space-6); }
.keim-list li::before { content: ""; position: absolute; left: 0; top: 4px; width: 20px; height: 20px; background: url("../logo/habba-favicon.svg") center / contain no-repeat; }

/* ---------- Spenden-Band (Kontrastfläche, ganz unten) ---------- */
.give { background: var(--contrast); color: var(--on-contrast); }
.give .wrap { display: grid; grid-template-columns: 1fr auto; gap: var(--space-8); align-items: center; }
.give h2 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--tr-h1); color: var(--on-contrast); }
.give p { margin-top: var(--space-4); max-width: 46ch; }
.give a { color: var(--c-weiss); }
.give :focus-visible { box-shadow: 0 0 0 3px var(--contrast), 0 0 0 6px var(--c-weiss); }
.konto { margin-top: var(--space-6); display: grid; gap: var(--space-3); }
.konto div { display: grid; grid-template-columns: 10rem 1fr; gap: var(--space-4); }
.konto dt { color: var(--contrast-tint); font-size: var(--fs-small); }
.konto dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.qr { background: var(--c-weiss); border-radius: var(--radius-m); padding: var(--space-3); width: 200px; }
.qr img { width: 100%; height: auto; }
.qr-note { margin-top: var(--space-3); font-size: var(--fs-caption); color: var(--contrast-tint); text-align: center; max-width: 200px; }
@media (max-width: 760px) {
  .give .wrap { grid-template-columns: 1fr; }
  .konto div { grid-template-columns: 1fr; gap: 0; }
}

/* ---------- Textseiten ---------- */
.page-head { padding-block: var(--space-8) var(--space-4); }
.page-head h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--tr-h1); color: var(--primary-strong); }
.prose { max-width: var(--measure); }
.prose h2, .prose h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--primary-strong); margin-top: var(--space-7); }
.prose p, .prose ul, .prose dl { margin-top: var(--space-4); }
.prose ul { padding-left: var(--space-5); }
.prose li + li { margin-top: var(--space-2); }
.prose > :first-child { margin-top: 0; }
.prose dt { font-weight: 700; margin-top: var(--space-3); }
.prose dd { margin: 0; }
.prose address { font-style: normal; }

.hinweis { background: var(--c-hinweis-hauch); border-left: 4px solid var(--c-hinweis); padding: var(--space-4) var(--space-5); border-radius: var(--radius-s); }

/* ---------- Fußzeile ---------- */
.site-foot { background: var(--primary-strong); color: var(--c-weiss); padding-block: var(--space-7) var(--space-5); }
.site-foot .top { display: flex; flex-wrap: wrap; gap: var(--space-7); justify-content: space-between; align-items: start; }
.site-foot img { height: 64px; width: auto; }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.site-foot a { color: var(--c-weiss); }
.site-foot :focus-visible { box-shadow: 0 0 0 3px var(--primary-strong), 0 0 0 6px var(--c-weiss); }
.site-foot .legal { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid rgba(255,255,255,.18); font-size: var(--fs-caption); color: rgba(255,255,255,.75); display: flex; flex-wrap: wrap; gap: var(--space-5); justify-content: space-between; }

/* ---------- Platzhalter, bis alle Angaben da sind ---------- */
.todo { background: var(--c-hinweis-hauch); color: var(--c-hinweis); font-weight: 700; padding: 0 4px; border-radius: 3px; }