/* ============================================================================
   PSC — Komponenten (Bausteinschicht 1:1 aus okava-website-v2/css/components.css
   übernommen, siehe Auftrag: „nimm daraus die BAUSTEINSCHICHT")
   ============================================================================
   Bis auf zwei Ausnahmen UNVERÄNDERT belassen — alle Klassennamen
   (--terra, --olive, --espresso, .eyebrow, .h-xl, .grid.cols-N, .section-head,
   .feature-row, .info-card, .tile, .person, .contact-item, .panel-dark, .wrap …)
   entsprechen exakt der Vorlage. Die FARBWERTE der Variablen sind in
   css/tokens.css auf die PSC-Markenfarben (Logo-Blau/-Grün) umgestellt; diese
   Datei selbst bezieht ihre Werte ausschließlich über `var(--…)`. Gescopet wird
   über die Body-Klasse `.site`, die templates/layout.php setzt.

   ZWEITE ABWEICHUNG: PSC erlaubt nur drei Schriftgrößen auf der ganzen Seite
   (Überschrift/Fließtext/Hinweis, siehe css/tokens.css: --fs-heading/--fs-body/
   --fs-hint). Bei den Selektoren, die auf den tatsächlich gerenderten pscxx-
   Seiten vorkommen, wurden feste px-Werte auf diese drei Tokens umgestellt.
   Selektoren ohne passendes Markup (Preiskarten, Zimmerkarten, Spendenformular,
   Orgchart, Förder-Kacheln, .idx/.idx-big/.h-lg/.h-md/.tile …) blieben
   unangetastet — totes CSS hat keine sichtbare Schriftgröße.

   Ungenutzte Komponenten (Förder-Kacheln, Spendenformular, Orgchart,
   Preiskarten, Zimmerkarten …) bleiben bewusst im File — totes CSS ohne
   passendes Markup ist harmlos, ein zweites, gepflegtes File wäre es nicht.
   ========================================================================= */


/* ---------- Basis (überschreibt style.css im Stiftungsbereich) ---------- */
body{
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--fs-body);
  line-height:1.72;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.site{ overflow-x:hidden; }
.site img{ display:block; max-width:100%; }
.site ::selection{ background:var(--terra); color:#fff; }

/* ---------- Typografie ---------- */
.site h1,
.site h2,
.site h3,
.site h4{
  font-family:var(--serif); font-weight:500; margin:0; color:var(--ink);
  line-height:1.04; letter-spacing:.002em;
}
.display{ font-weight:400; font-size:clamp(46px, 8.2vw, 132px); line-height:.98; letter-spacing:-.01em; }
.h-xl{ font-size:var(--fs-heading); line-height:1.02; font-weight:400; }
.h-lg{ font-size:clamp(30px, 4vw, 52px); font-weight:500; }
.h-md{ font-size:clamp(23px, 2.4vw, 32px); font-weight:500; }
.serif-lead{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(22px, 2.7vw, 34px); line-height:1.38; color:var(--ink); letter-spacing:.005em;
}
.site em, .it{ font-style:italic; }

.site p{ margin:0 0 1.1em; color:var(--ink-soft); text-wrap:pretty; max-width:64ch; }
.site p.lead{ font-size:clamp(18px,1.5vw,20px); color:var(--ink-soft); }
.center p, p.mx-auto{ margin-left:auto; margin-right:auto; }

.eyebrow{
  font-family:var(--sans); font-weight:700; font-size:13px;
  text-transform:uppercase; letter-spacing:.26em; color:var(--terra);
  display:inline-flex; align-items:center; gap:.7em;
}
.eyebrow.olive{ color:var(--olive); }
.eyebrow.cream{ color:var(--sand); }
.eyebrow::before{ content:""; width:26px; height:1px; background:currentColor; opacity:.6; }
.eyebrow.no-tick::before{ display:none; }

.idx{
  font-family:var(--serif); font-weight:400; font-size:13px;
  letter-spacing:.32em; color:var(--ink-faint); font-variant-numeric:tabular-nums;
}
.idx-big{ font-family:var(--serif); font-size:13px; letter-spacing:.3em; color:var(--terra); }

/* ---------- Layout ---------- */
.wrap{ max-width:var(--st-maxw); margin:0 auto; padding-inline:var(--gutter); }
.wrap-wide{ max-width:var(--st-wide); margin:0 auto; padding-inline:var(--gutter); }
.site .section{ padding-block:clamp(72px, 11vw, 168px); }
.site .section.tight{ padding-block:clamp(54px,7vw,104px); }
.panel-cream{ background:var(--cream); }
.panel-warm{ background:var(--cream-2); }
.panel-paper{ background:var(--paper); }
.panel-dark{ background:var(--espresso); color:var(--sand); }
.panel-dark h1,.panel-dark h2,.panel-dark h3,.panel-dark h4{ color:#f4ede1; }
.panel-dark p{ color:#cabfae; }

.grid{ display:grid; gap:clamp(26px,3.4vw,64px); }
.cols-2{ grid-template-columns:repeat(2,1fr); }
/* Kontaktdaten + Formular (Kontakt/Buchen): Formularspalte breiter, damit die
   Eingabefelder mehr Platz bekommen als die kurzen Kontaktzeilen daneben. */
.grid.form-grid{ grid-template-columns:0.85fr 1.15fr; }
.cols-3{ grid-template-columns:repeat(3,1fr); }
.cols-4{ grid-template-columns:repeat(4,1fr); }
.center{ text-align:center; }
.mx-auto{ margin-inline:auto; }
.measure{ max-width:60ch; }
.measure-sm{ max-width:44ch; }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:20px; margin-bottom:48px; }
.section-head p{ margin-bottom:6px; }

.rule{ height:1px; background:var(--line); border:0; margin:0; }
.rule.cream{ background:var(--line-cream); }
.stat-n{ font-family:var(--serif); font-size:clamp(40px,4.6vw,64px); font-weight:400; color:var(--ink); line-height:1; }
.stat-l{ font-family:var(--mono); font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-top:10px; }

/* ---------- Buttons / Links ---------- */
.site .btn{
  display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--sans); font-weight:700; font-size:13px;
  letter-spacing:.16em; text-transform:uppercase;
  padding:15px 28px; border-radius:2px;
  background:var(--terra); color:#fdf6ec; border:1px solid var(--terra);
  transition:background .35s ease, transform .35s ease, color .35s ease;
}
.site .btn:hover{ background:var(--terra-deep); border-color:var(--terra-deep); color:#fdf6ec; filter:none; }
.site .btn.ghost,
.site .btn--outline{ background:transparent; color:var(--ink); border-color:var(--line); }
.site .btn.ghost:hover,
.site .btn--outline:hover{ border-color:var(--ink); background:transparent; color:var(--ink); }
.site .btn.ghost.cream{ color:var(--cream); border-color:var(--line-cream); }
.site .btn.ghost.cream:hover{ border-color:var(--sand); color:var(--cream); }
/* Kompatibilität mit Alt-Modifiern */
.site .btn--primary,
.site .btn--accent{ background:var(--terra); border-color:var(--terra); color:#fdf6ec; }
.site .btn--large{ padding:16px 32px; }

.tlink{
  display:inline-flex; align-items:center; gap:.6em; font-family:var(--sans);
  font-weight:700; font-size:13px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink); padding-bottom:3px; position:relative; width:fit-content;
}
.tlink::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; transform:scaleX(.34); transform-origin:left;
  transition:transform .42s cubic-bezier(.2,.7,.2,1); opacity:.5;
}
.tlink:hover::after{ transform:scaleX(1); opacity:1; }
.tlink .arr{ transition:transform .42s cubic-bezier(.2,.7,.2,1); }
.tlink:hover .arr{ transform:translateX(5px); }
.tlink.terra{ color:var(--terra); }

/* ---------- Foto-Rahmen ---------- */
.photo{ position:relative; overflow:hidden; background:var(--sand); }
.photo img{ width:100%; height:100%; object-fit:cover; }
.r-sm{ border-radius:3px; }

/* =========================================================
   HERO (Vollbild, Startseite)
   ========================================================= */
.site .hero{
  position:relative; height:100svh; min-height:620px; overflow:hidden;
  background:var(--espresso); display:block; padding:0; margin:0;
}
.hero-media{ position:absolute; inset:0; }
.hero-media img{ width:100%; height:100%; object-fit:cover; transform:scale(1.06); animation:kenburns 22s ease-out forwards; }
@keyframes kenburns{ to{ transform:scale(1.0) translateY(-1%); } }
.hero-scrim{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(20,16,12,.78) 0%, rgba(20,16,12,.12) 42%, rgba(20,16,12,.30) 100%);
}
.hero-flow{ position:absolute; inset:0; display:flex; flex-direction:column; }
.hero-top{ width:100%; display:flex; justify-content:space-between; align-items:center; padding-top:112px; }
.hero-bottom{ width:100%; margin-top:auto; padding-bottom:clamp(48px,8vh,96px); }
.site .hero-claim{
  color:#fff; max-width:15ch; font-weight:400;
  font-size:clamp(40px,6.2vw,94px); line-height:1.0; letter-spacing:-.01em;
}
.site .hero-sub{ color:rgba(247,241,230,.92); max-width:44ch; font-size:clamp(19px,2vw,26px); margin-top:22px; }
.scroll-cue{ display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:rgba(247,241,230,.7); }
.scroll-cue .ln{ width:46px; height:1px; background:rgba(247,241,230,.5); position:relative; overflow:hidden; }
.scroll-cue .ln::after{ content:""; position:absolute; inset:0; background:var(--terra); animation:cue 2.6s ease-in-out infinite; }
@keyframes cue{ 0%{transform:translateX(-100%)} 55%{transform:translateX(0)} 100%{transform:translateX(100%)} }
@media (max-width:640px){ .hero-top{ padding-top:90px; } .hero-sub{ font-size:18px; } }

/* Kompakter Bild-Hero (Unterseiten) */
.site .hero--compact{ height:clamp(440px,66vh,660px); min-height:440px; }

/* Page-Hero (Unterseiten ohne Bild) */
.page-hero{ position:relative; padding-top:148px; padding-bottom:clamp(40px,6vw,72px); }

/* Solider Header auf Seiten ohne Hero (Kontakt / Legal) */
.site.no-hero{ padding-top:0; }
.site.no-hero .header,
.site.no-hero .header--transparent,
.site.no-hero .header--scrolled{
  background:var(--cream); border-bottom-color:var(--line); color:var(--ink);
}
.site.no-hero .header--transparent .logo__img{ filter:none; }

/* =========================================================
   Feature-Row (alternierend Bild/Text)
   ========================================================= */
.feature-row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,90px); align-items:center; }
.feature-row.rev .ftext{ order:2; }
.feature-row .pic-tall{ aspect-ratio:4/5; }
.feature-row .pic-wide{ aspect-ratio:3/2; }
.feature-stack{ display:flex; flex-direction:column; gap:clamp(70px,10vw,150px); }
.tile-meta{ font-family:var(--mono); font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); margin-top:14px; }
@media (max-width:900px){ .feature-row{ grid-template-columns:1fr; } .feature-row.rev .ftext{ order:0; } }

/* =========================================================
   Förder-Kacheln (Anträge / Projekte)
   ========================================================= */
.foerder-grid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:clamp(26px,3vw,44px);
}
@media (max-width:900px){ .foerder-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:640px){ .foerder-grid{ grid-template-columns:1fr; } }
.foerder-card{
  display:flex; flex-direction:column; background:var(--paper);
  border:1px solid var(--line); border-radius:3px; overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:transform .55s cubic-bezier(.2,.7,.2,1), box-shadow .55s, border-color .55s;
}
.foerder-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:rgba(43,38,32,.22); }
.foerder-card__image{ position:relative; aspect-ratio:3/2; overflow:hidden; background:var(--sand); }
.foerder-card__image img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s cubic-bezier(.2,.7,.2,1); }
.foerder-card:hover .foerder-card__image img{ transform:scale(1.055); }
.foerder-card__badge{
  position:absolute; top:13px; left:14px;
  font-family:var(--mono); font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  color:#f4ede1; background:rgba(28,22,16,.5); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  border:1px solid rgba(244,237,225,.22); padding:5px 10px; border-radius:2px;
}
.foerder-card__badge--in_finanzierung{ background:rgba(158,74,44,.72); border-color:rgba(158,74,44,.8); }
.foerder-card__badge--in_umsetzung{ background:rgba(173,127,49,.78); border-color:rgba(173,127,49,.88); }
.foerder-card__badge--abgeschlossen{ background:rgba(74,110,74,.72); border-color:rgba(74,110,74,.8); }

/* Projekt-Filter (Status) */
.filter-bar{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:clamp(24px,3vw,40px); }
.filter-chip{
  font-family:var(--sans); font-weight:600; font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  padding:9px 18px; border:1px solid var(--line); border-radius:100px; background:transparent;
  color:var(--ink-soft); cursor:pointer; transition:background .25s ease, border-color .25s ease, color .25s ease;
}
.filter-chip:hover{ border-color:var(--terra); color:var(--ink); }
.filter-chip.is-active{ background:var(--terra); border-color:var(--terra); color:#fdf6ec; }
.foerder-card__body{ display:flex; flex-direction:column; gap:0; padding:22px 22px 26px; flex:1; }
/* Titel: einheitliche Höhe (reserviert 2 Zeilen) + Abstand zum Fließtext,
   damit Text und Fortschrittsbalken über alle Karten auf gleicher Höhe starten. */
.foerder-card__title{ font-size:24px; line-height:1.15; margin:0 0 12px; min-height:2.3em; }
.foerder-card__text{ color:var(--ink-soft); font-size:var(--fs-body); margin:0; flex:1; line-height:1.6; }

.progress{ width:100%; height:6px; background:var(--cream-2); overflow:hidden; margin-top:20px; border-radius:100px; }
.progress__bar{ height:100%; background:var(--terra); transition:width .6s ease; border-radius:100px; }
.progress__meta{ display:flex; justify-content:space-between; gap:var(--gutter); font-family:var(--mono); font-size:13px; letter-spacing:.04em; margin-top:11px; }
.progress__sum{ font-weight:500; color:var(--ink); }
.progress__goal{ color:var(--ink-faint); }
.foerder-card__cta{ margin-top:20px; align-self:flex-start; }

/* Karten-Grid für Struktur/Menschen (Kachel mit Index) */
.tile{ display:block; }
.tile .pic{ aspect-ratio:3/2; }
.tile h3{ margin-top:18px; font-size:var(--fs-heading); }
.tile p{ font-size:var(--fs-body); margin-top:9px; }
.tile .meta{ font-family:var(--mono); font-size:var(--fs-hint); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-top:11px; }

/* Menschen-Karten */
.person .pic{ aspect-ratio:4/5; }
.person h3{ margin-top:20px; font-size:var(--fs-heading); }
.person .role{ font-family:var(--sans); font-weight:700; font-size:var(--fs-hint); letter-spacing:.2em; text-transform:uppercase; color:var(--terra); margin-top:7px; }
.person p{ margin-top:13px; font-size:var(--fs-body); }

/* =========================================================
   Struktur-Diagramm (gGmbH <-> Trust) — im neuen Look
   ========================================================= */
.orgchart{ display:flex; flex-direction:column; align-items:stretch; gap:clamp(20px,3vw,40px); max-width:920px; margin:0 auto; }
.orgchart__feeders{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,40px); }
.orgchart__node{ background:var(--paper); box-shadow:var(--shadow-sm); border-top:3px solid var(--terra); padding:clamp(22px,3vw,34px); text-align:center; border-radius:3px; }
.orgchart__node--trust{ background:var(--espresso); color:var(--cream); border-top-color:var(--gold); }
.orgchart__node--trust .orgchart__title{ color:#f4ede1; }
.orgchart__node--trust .orgchart__text{ color:#cabfae; }
.orgchart__node--trust .orgchart__place{ color:var(--sand); }
.orgchart__place{ display:block; font-family:var(--mono); font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--terra); margin-bottom:.5rem; }
.orgchart__title{ margin:0 0 .4rem; font-size:24px; }
.orgchart__text{ margin:0; font-size:var(--fs-body); color:var(--ink-soft); }
.orgchart__flows{ display:flex; flex-direction:column; gap:.5rem; align-items:center; padding:.5rem 0; }
.orgchart__flow{ position:relative; font-family:var(--mono); font-size:13px; letter-spacing:.04em; color:var(--ink-soft); padding-left:1.6rem; }
.orgchart__flow::before{ content:"\2193"; position:absolute; left:0; top:0; color:var(--terra); font-weight:700; }
.orgchart__outcome{ text-align:center; background:var(--cream-2); border-left:3px solid var(--terra); padding:clamp(20px,3vw,32px); font-family:var(--serif); font-size:20px; border-radius:3px; }
@media (max-width:640px){ .orgchart__feeders{ grid-template-columns:1fr; } }

/* =========================================================
   Formulare (Spenden / Kontakt / Buchung / Jagdanfrage) — EIN Feldstil,
   damit alle Formulare der Seite gleich aussehen. .field/.row-2 (Spende)
   und .form-group/.form-row (Kontakt & Co., Vertrag mit js/main.js) sind
   nur zwei Klassennamen für dieselbe Optik — deshalb hier zusammengefasst.
   ========================================================= */
.field, .site .form-group{ display:flex; flex-direction:column; gap:5px; margin-bottom:12px; }
.field label, .site .form-group label{ font-family:var(--sans); font-weight:700; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); }
.field input, .field select, .field textarea,
.site .form-group input, .site .form-group select, .site .form-group textarea{
  font-family:var(--sans); font-size:var(--fs-body); line-height:1.3; color:var(--ink); background:var(--paper);
  border:1px solid var(--line); border-radius:8px; padding:8px 11px; width:100%;
  transition:border-color .2s ease, box-shadow .2s ease;
}
/* select bekommt sonst trotz gleichem Padding eine eigene, browserabhängige
   Höhe (native Dropdown-Chrome) — appearance:none + eigener Pfeil sorgen
   dafür, dass es exakt wie ein input aussieht und dieselbe Höhe hat. */
.field select, .site .form-group select{
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2371869a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat; background-position:right 11px center; padding-right:32px;
}
.field input:focus, .field select:focus, .field textarea:focus,
.site .form-group input:focus, .site .form-group select:focus, .site .form-group textarea:focus{
  outline:none; border-color:var(--terra); box-shadow:0 0 0 3px rgba(158,74,44,.12);
}
.field textarea, .site .form-group textarea{ resize:vertical; min-height:60px; }
.site .form-group input.is-error, .site .form-group textarea.is-error{ border-color:var(--terra-deep); background:rgba(158,74,44,.05); }
.row-2, .site .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:620px){ .row-2, .site .form-row{ grid-template-columns:1fr; } }
.notice{ font-size:var(--fs-body); color:var(--ink-soft); border:1px solid var(--line); border-radius:3px; padding:16px 18px; }
.bank-box{ background:var(--paper); border:1px solid var(--line); border-radius:3px; padding:clamp(22px,3vw,32px); box-shadow:var(--shadow-sm); }
.bank-box dt{ font-family:var(--mono); font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); margin-top:14px; }
.bank-box dt:first-child{ margin-top:0; }
.bank-box dd{ margin:3px 0 0; font-size:var(--fs-body); color:var(--ink); }

/* Info-Karten (Geldfluss / einfache Textkarten) */
.info-card{ border-top:1px solid var(--line); padding-top:24px; }
.info-card h3{ font-size:var(--fs-heading); font-weight:500; }
.info-card .info-idx{ font-family:var(--serif); font-size:var(--fs-body); letter-spacing:.3em; color:var(--terra); }
.info-card p{ margin-top:10px; font-size:var(--fs-body); }

/* Personen-Karten: Platzhalter mit Initiale */
.person .ph-initial{
  aspect-ratio:4/5; background:var(--cream-2); border:1px solid var(--line); border-radius:3px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:var(--fs-heading); color:var(--stone);
}

/* Schritte (nummeriert) */
.step-num{
  display:inline-flex; align-items:center; justify-content:center; width:2.6rem; height:2.6rem;
  border-radius:50%; background:var(--terra); color:#fdf6ec; font-family:var(--serif); font-size:20px; margin-bottom:16px;
}

/* Spendenformular-Layout */
.spende-grid{ display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(30px,5vw,70px); align-items:start; }
@media (max-width:900px){ .spende-grid{ grid-template-columns:1fr; } }
.amount-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
.amount-chip{ font-family:var(--sans); font-weight:600; font-size:var(--fs-body); padding:10px 18px; border:1px solid var(--line); border-radius:100px; background:transparent; color:var(--ink); transition:background .3s,border-color .3s,color .3s; }
.amount-chip:hover{ border-color:var(--terra); }
.amount-chip.is-active{ background:var(--terra); border-color:var(--terra); color:#fdf6ec; }
.form-check{ display:flex; gap:11px; align-items:flex-start; font-size:var(--fs-body); line-height:1.5; color:var(--ink-soft); margin:2px 0 12px; }
.form-check a{ color:var(--terra); text-decoration:underline; }
/* Custom-Checkbox im Lodge-Look: Creme-Kästchen mit Stein-Rand, gefüllt Terrakotta + Haken */
.form-check input[type="checkbox"]{
  appearance:none; -webkit-appearance:none; flex:none; margin:1px 0 0;
  width:19px; height:19px; border:1.5px solid var(--stone); border-radius:4px;
  background:var(--paper); cursor:pointer; display:inline-grid; place-content:center;
  transition:background .2s ease, border-color .2s ease;
}
.form-check input[type="checkbox"]::after{
  content:""; width:5px; height:9px; margin-bottom:2px;
  border:solid #fdf6ec; border-width:0 2px 2px 0;
  transform:rotate(45deg) scale(0); transition:transform .15s ease;
}
.form-check input[type="checkbox"]:hover{ border-color:var(--terra); }
.form-check input[type="checkbox"]:checked{ background:var(--terra); border-color:var(--terra); }
.form-check input[type="checkbox"]:checked::after{ transform:rotate(45deg) scale(1); }
.form-check input[type="checkbox"]:focus-visible{ outline:2px solid var(--terra); outline-offset:2px; }
/* Checkbox-Gruppe: mehr Luft nach oben (Abstand zum Feld darüber), enger untereinander */
.form-checks{ margin:16px 0 6px; }
.form-checks .form-check{ margin:0 0 9px; }
.form-checks .form-check:last-child{ margin-bottom:0; }
/* Mehr Luft vor dem Absende-Button (Spenden- + Kontaktformular) */
.spende-form button[type="submit"], .contact-form button[type="submit"]{ margin-top:24px; }
.form-hint{ font-size:var(--fs-body); line-height:1.5; color:var(--ink-faint); }
.bank-box.is-highlight{ box-shadow:0 0 0 2px var(--terra), var(--shadow-sm); }

/* Download-Karten (Satzungen) */
.download-card{ display:flex; flex-direction:column; gap:14px; background:var(--paper); border:1px solid var(--line); border-radius:3px; padding:clamp(24px,3vw,34px); box-shadow:var(--shadow-sm); }
.download-card__icon{ color:var(--terra); }
.download-card__title{ font-size:24px; }
.download-card__desc{ font-size:var(--fs-body); margin:0; flex:1; }
.download-card__soon{ font-family:var(--mono); font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); }

/* Kontakt */
/* Einspaltig wie das Spendenformular (Kontaktinfos oben, Formular darunter). */
.contact-grid{ display:grid; grid-template-columns:1fr; gap:clamp(22px,4vw,34px); align-items:start; }
.contact-item{ display:flex; gap:16px; padding:20px 0; border-top:1px solid var(--line); }
.contact-item:first-child{ border-top:0; }
.contact-item__icon{ color:var(--terra); flex:none; }
.contact-item__title{ font-size:var(--fs-heading); }
.contact-item__text{ margin:6px 0 0; font-size:var(--fs-body); }
.contact-item__text a{ color:var(--terra); }

/* Legal-Fließtext (Impressum / Datenschutz) */
.legal-body{ max-width:72ch; }
.legal-body h2{ font-size:var(--fs-heading); margin:44px 0 14px; }
.legal-body h3{ font-size:var(--fs-heading); margin:28px 0 10px; }
.legal-body p, .legal-body li{ color:var(--ink-soft); }
.legal-body a{ color:var(--terra); }

/* =========================================================
   CHROME — Header / Nav (bestehendes Markup, restyled)
   ========================================================= */
.site .header{
  position:fixed; top:0; left:0; right:0; z-index:60; background:transparent;
  border-bottom:1px solid transparent; transition:background .5s ease, border-color .5s ease;
}
.site .header .container{ max-width:var(--st-wide); }
.site .header__inner{ height:84px; display:flex; align-items:center; justify-content:space-between; }
/* .nav enthält nur das (fixierte) Overlay und hat daher 0 Breite; margin-left:auto
   am Burger schiebt ihn zuverlässig ganz nach rechts (Logo links / Burger rechts). */
.site .nav-toggle{ margin-left:auto; }
.site .header--transparent{ background:transparent; border-bottom-color:transparent; color:var(--cream); }
/* Solider Creme-Header (KEIN backdrop-filter – der würde das fixierte Menü-Overlay
   auf die Header-Höhe einsperren). */
.site .header--scrolled{
  background:var(--cream); border-bottom-color:var(--line); color:var(--ink);
}
/* Logo in der Kopfzeile (links vom Burger). Bei geöffnetem Menü nicht sichtbar.
   Feste Breite + flex:none, da die SVG keine intrinsische Breite hat und im
   Flex-Header (min-width:0) sonst auf 0 kollabiert → unsichtbar. */
.site .logo{ flex:none; }
.site .logo__img{ width:190px; height:auto; filter:none; transition:filter .4s ease; }
.site .header--transparent .logo__img{ filter:brightness(0) invert(1); }

/* Burger */
.site .nav-toggle{ display:flex; flex-direction:column; gap:5px; background:none; border:0; padding:8px; z-index:70; color:inherit; }
.site .nav-toggle__bar{ width:26px; height:1.6px; background:currentColor; transition:.3s; }
.site .nav-toggle.is-active .nav-toggle__bar{ background:var(--cream); }
.site .nav-toggle.is-active .nav-toggle__bar:nth-child(1){ transform:translateY(6.6px) rotate(45deg); }
.site .nav-toggle.is-active .nav-toggle__bar:nth-child(2){ opacity:0; }
.site .nav-toggle.is-active .nav-toggle__bar:nth-child(3){ transform:translateY(-6.6px) rotate(-45deg); }

/* Vollbild-Overlay-Menü (alle Viewports) */
.site .nav__overlay{
  position:fixed; inset:0; z-index:55; background:var(--espresso); color:var(--cream);
  opacity:0; pointer-events:none; transition:opacity .4s ease;
}
.site .nav__overlay.is-active{ opacity:1; pointer-events:auto; }
.site .nav__top{ position:absolute; top:26px; right:var(--gutter); z-index:2; }
/* Der eigentliche Scroll-Container: eigenes Element statt das Overlay selbst,
   damit scrollbar-gutter den Balken zuverlässig NEBEN statt ÜBER die
   rechtsbündigen Links legt (sonst überdeckt die native Scrollbar den Text). */
.site .nav__scroll{
  height:100%; overflow-y:auto; overflow-x:hidden; scrollbar-gutter:stable;
  display:flex; flex-direction:column;
  padding:96px var(--gutter) 48px;
}
/* Zentrierung per margin:auto statt justify-content:safe center — Letzteres
   erzeugt in Chromium keinen korrekten Scroll-Overflow, wenn der Menüinhalt
   höher als das Fenster ist (Inhalt bleibt dann unerreichbar unter der Kante). */
.site .nav__scroll-inner{ margin:auto 0; display:flex; flex-direction:column; gap:clamp(20px,4vh,44px); }
.site .lang-switcher__link{ display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:13px; letter-spacing:.14em; color:var(--sand); }
.site .lang-switcher__flag{ width:26px; height:auto; border-radius:2px; }
.site .nav__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.site .nav__item{ border:0; }
/* Alles rechtsbündig auf eine gemeinsame Linie, keine Trennlinien. */
.site .nav__link,
.site .nav__item > .nav__link{
  display:flex; align-items:center; justify-content:flex-end; gap:14px;
  font-family:var(--serif); font-weight:400;
  font-size:var(--fs-heading); color:var(--cream); padding:9px 0; letter-spacing:.01em;
  transition:color .3s;
}
/* --terra (PSC-Blau) ist hier fast so dunkel wie der Menü-Hintergrund selbst
   (~2,3:1 Kontrast) — als Hover-/Aktiv-Farbe unbrauchbar. --gold ist die für
   dunkle Flächen vorgesehene Akzentfarbe (siehe hero__subtitle) und liest
   sich dort mit ~10:1 klar ab. */
/* .nav__link--active braucht die zusammengesetzte Form .nav__link.nav__link--active:
   die Grundregel oben (".site .nav__item > .nav__link") hat mit drei Klassen
   dieselbe Spezifität wie ein einfaches ".site .nav__link--active" und stand
   im Quelltext zuerst — ohne die zweite .nav__link-Klasse hier gewinnt sie und
   die aktive Seite bleibt fälschlich Creme statt Gold. */
.site .nav__link:hover,
.site .nav__link.nav__link--active{ color:var(--gold); }
/* Kein Aufklappen mehr – alle Ebenen dauerhaft sichtbar, rechtsbündig, ohne Linie. */
.site .nav__dropdown-icon{ display:none; }
.site .nav__dropdown{ display:block; padding:0 0 6px; text-align:right; }
/* Unterpunkte sind dauerhaft offen – „is-open" (JS-Toggle) darf NICHT auf flex
   umschalten (sonst springen die Einträge). Beide Zustände bleiben block. */
.site .nav__item--dropdown.is-open .nav__dropdown{ display:block; }
.site .nav__dropdown-link{ display:block; font-family:var(--sans); font-weight:600; font-size:var(--fs-body); letter-spacing:.14em; color:var(--sand); padding:6px 0; text-transform:uppercase; }
.site .nav__dropdown-link:hover,
.site .nav__dropdown-link--active{ color:var(--cream); }
.site .nav__bottom{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:22px; margin-top:12px; }
/* --ink-faint ist für helle Flächen kalibriert (siehe tokens.css) — auf dem
   dunklen Nav-Overlay stattdessen --sand, wie auch .nav__dropdown-link es tut. */
.site .nav__link--secondary{ font-family:var(--mono); font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--sand); }
.site .nav__link--secondary:hover,
.site .nav__link--secondary.nav__link--active{ color:var(--gold); }

/* =========================================================
   CHROME — Footer (bestehendes Markup, restyled)
   ========================================================= */
.site .footer{ background:var(--espresso); color:var(--sand); padding:clamp(64px,8vw,104px) 0 0; }
.site .footer .container{ max-width:var(--st-wide); }
.site .footer__grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:48px; }
.site .footer__logo{ font-family:var(--serif); font-size:var(--fs-heading); letter-spacing:.16em; color:#f4ede1; margin-bottom:20px; }
.site .footer__description{ color:#cabfae; font-size:var(--fs-body); max-width:38ch; }
.site .footer__social a{ color:#cabfae; transition:color .3s; display:inline-flex; margin-top:6px; }
.site .footer__social a:hover{ color:#f4ede1; }
.site .footer__title{ font-family:var(--sans); font-weight:700; font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:#b6a890; margin:0 0 18px; }
.site .footer__links{ list-style:none; margin:0; padding:0; }
.site .footer__links li{ color:#cabfae; font-size:var(--fs-body); line-height:1.7; }
.site .footer__links a{ color:#cabfae; display:inline-block; padding:5px 0; transition:color .3s; }
.site .footer__links a:hover{ color:#f4ede1; }
.site .footer__bottom{
  display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap;
  padding:28px 0; margin-top:clamp(48px,6vw,80px); border-top:1px solid rgba(244,237,225,.12);
  font-family:var(--mono); font-size:13px; letter-spacing:.06em; color:#9a8e7b;
}
.site .footer__legal{ display:flex; gap:22px; }
.site .footer__legal a{ color:#9a8e7b; transition:color .3s; }
.site .footer__legal a:hover{ color:var(--sand); }
@media (max-width:820px){ .site .footer__grid{ grid-template-columns:1fr 1fr; } .site .footer__bottom{ flex-direction:column; text-align:center; } }
@media (max-width:520px){ .site .footer__grid{ grid-template-columns:1fr; gap:34px; } }

/* ---------- Spendenformular im Modal (native, Betrags-Chips) ---------- */
.donate-fieldset{ border:0; padding:0; margin:0 0 1.15rem; }
.donate-fieldset legend{ font-family:var(--sans); font-weight:700; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); padding:0; margin-bottom:.6rem; }
.donate-amounts{ display:grid; grid-template-columns:1fr 1fr; gap:.55rem; }
.donate-chip{
  display:flex; align-items:center; gap:.7rem; margin:0; padding:.7rem .95rem;
  border:1px solid var(--line); border-radius:8px; cursor:pointer;
  font-weight:600; font-size:var(--fs-body); color:var(--ink);
  transition:border-color .25s ease, background .25s ease;
}
.donate-chip:hover{ border-color:var(--terra); }
.donate-chip:has(input:checked){ border-color:var(--terra); background:rgba(158,74,44,.07); }
/* Custom-Radiobutton (Kreis, passend zur Checkbox): Terrakotta-Punkt bei Auswahl. */
.donate-chip input[type="radio"]{
  appearance:none; -webkit-appearance:none; flex:none; margin:0;
  width:19px; height:19px; border:1.5px solid var(--stone); border-radius:50%;
  background:var(--paper); cursor:pointer; display:inline-grid; place-content:center;
  transition:border-color .2s ease;
}
.donate-chip input[type="radio"]::after{
  content:""; width:10px; height:10px; border-radius:50%; background:var(--terra);
  transform:scale(0); transition:transform .15s ease;
}
.donate-chip input[type="radio"]:hover{ border-color:var(--terra); }
.donate-chip input[type="radio"]:checked{ border-color:var(--terra); }
.donate-chip input[type="radio"]:checked::after{ transform:scale(1); }
.donate-chip input[type="radio"]:focus-visible{ outline:2px solid var(--terra); outline-offset:2px; }
.donate-chip--custom{ grid-column:1 / -1; }
.donate-chip--custom input[type="text"]{
  width:6rem; margin:0 .35rem; display:inline-block; border:0; border-bottom:1px solid var(--stone);
  background:transparent; font:inherit; color:inherit; padding:.2rem .1rem;
}
.donate-chip--custom input[type="text"]:focus{ outline:none; border-bottom-color:var(--terra); }
.form-alert{ margin:0 0 1.25rem; padding:.8rem 1rem; background:var(--danger-bg, #f6e3dc); color:var(--terra-deep); border-left:3px solid var(--terra); border-radius:3px; font-size:.92rem; }
/* Projekt-Kontext im Spendenformular (bei „Dafür spenden" an einer Projektkarte) */
.donate-context{ background:rgba(158,74,44,.08); border:1px solid rgba(158,74,44,.25); border-radius:8px; padding:12px 16px; margin-bottom:18px; }
.donate-context__label{ display:block; font-family:var(--sans); font-weight:700; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--terra); margin-bottom:4px; }
.donate-context__title{ font-family:var(--serif); font-weight:500; font-size:20px; color:var(--ink); line-height:1.2; }

/* Formulare im Modal kompakter (weniger Sektions-Luft als auf der Vollseite) */
/* Absicherung: style.css blendet .hero im Modal aus, wird aber von .site .hero
   (gleiche Spezifität, später geladen) wieder auf display:block gestellt.
   Seiten mit Formular-Modal blenden den Hero zusätzlich per PHP (?overlay=1)
   aus — diese Regel fängt jeden Fall ab, in dem das vergessen wurde. */
.site .modal__content .hero{ display:none; }
.site .modal__content .section{ padding-block: clamp(26px,4vw,48px); }
.site .modal__content .section-head{ margin-bottom: 20px; }
.site .modal__content .h-md{ margin-top:10px; margin-bottom:18px !important; }
/* Kontaktformular im Modal: die feste Modal-Breite (max. 720px, siehe
   .modal in style.css) unterschreitet den 900px-Umbruch von .grid.form-grid
   (Zeile ~579) deutlich — @media reagiert auf die Fensterbreite, nicht auf
   die tatsächliche Modal-Breite, bleibt hier also wirkungslos. Ohne diese
   Regel quetschen sich zwei Spalten (Kontaktinfo | Formular) UND darin noch
   zwei Felder pro Zeile auf ~160px. Kontaktinfo deshalb über das Formular
   gestapelt, das dadurch die volle Modal-Breite für seine Feldpaare bekommt. */
.site .modal__content .grid.form-grid{ grid-template-columns:1fr; gap:clamp(28px,4vw,40px); }

/* ---------- Iframe-Modal (externes Spendenformular) ---------- */
.site .modal-overlay:has(.modal--iframe){
  background:rgba(28,22,16,.6); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; padding:clamp(12px,3vw,40px);
}
.site .modal--iframe{
  width:min(600px,100%); height:min(90vh,960px);
  background:transparent; overflow:visible;
}
.site .modal__iframe{
  width:100%; height:100%; border:0; border-radius:5px;
  background:var(--paper); box-shadow:var(--shadow-lg); display:block;
}
.site .modal-overlay:has(.modal--iframe) .modal__close{
  background:var(--terra); color:#fdf6ec;
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .cols-2,.cols-3,.cols-4,.grid.form-grid{ grid-template-columns:1fr; }
  .cols-3.keep-2,.cols-4.keep-2{ grid-template-columns:repeat(2,1fr); }
  /* Gründer: bis 460px zweispaltig nebeneinander */
  .grid.keep-2-narrow{ grid-template-columns:repeat(2,1fr); gap:clamp(14px,3vw,26px); }
}
@media (max-width:600px){
  .cols-3.keep-2,.cols-4.keep-2{ grid-template-columns:1fr; }
}
@media (max-width:460px){
  .grid.keep-2-narrow{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
  .hero-media img{ animation:none; transform:none; }
  .scroll-cue .ln::after{ animation:none; }
}

/* ---------- Ergänzungen für die gemeinsamen Blöcke ---------------------- */
/* section-head zentriert (Bausteine: section-head.php, cta-band.php) */
.site .section-head--center{ display:block; text-align:center; }
.site .section-head--center .eyebrow{ justify-content:center; }
.site .section-head--center p{ margin-inline:auto; }

/* Faktenliste in feature-row.php — ersetzt die alten .about__feature-Icons */
.site .facts{ margin:30px 0 0; display:grid; gap:20px; }
.site .facts__item{ border-top:1px solid var(--line); padding-top:16px; }
.site .facts dt{ font-family:var(--serif); font-size:var(--fs-heading); color:var(--ink); }
.site .facts dd{ margin:6px 0 0; color:var(--ink-soft); font-size:var(--fs-body); }

/* Galerie und Slideshow erscheinen jetzt in beiden Bereichen im Lodge-Look.
   Markup und JS-Haken (.gallery-item, .slideshow__*) bleiben unverändert. */
.site .gallery-item{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); background:var(--sand); }
.site .gallery-item img{ transition:transform 1.2s cubic-bezier(.2,.7,.2,1); }
.site .gallery-item:hover img{ transform:scale(1.055); }
.site .slideshow{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); }
.site .lightbox{ background:rgba(33,29,24,.94); }

/* Formulare: Markup und JS-Haken (.form-group, .form-row, .contact-form,
   [data-datepicker]) bleiben wie sie sind — die Optik selbst steht jetzt
   zusammen mit dem Spendenformular weiter oben (.field / .site .form-group). */
.site .form-success{ font-family:var(--serif); font-size:var(--fs-body); color:var(--ink); text-align:center; padding:40px 0; }

/* Zimmerkarten (Baustein room-grid.php) — gleiche Bauweise wie .foerder-card */
.site .room-card{ display:flex; flex-direction:column; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden; }
.site .room-card__media{ position:relative; aspect-ratio:3/2; background:var(--sand); }
.site .room-card__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.site .room-card__body{ display:flex; flex-direction:column; padding:clamp(22px,2.6vw,32px); flex:1; }
.site .room-card__body h3{ font-size:24px; margin:0 0 10px; }
.site .room-card__body p{ font-size:var(--fs-body); margin:0 0 16px; }
.site .room-card__list{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.site .room-card__list li{ position:relative; padding-left:20px; font-size:var(--fs-body); color:var(--ink-soft); }
.site .room-card__list li::before{ content:""; position:absolute; left:0; top:.62em; width:9px; height:1px; background:var(--terra); }

/* Preiskarten (Baustein price-cards.php) */
.site .price-card{ display:flex; flex-direction:column; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:clamp(24px,3vw,36px); }
.site .price-card--lead{ background:var(--espresso); color:var(--sand); border-color:transparent; }
.site .price-card--lead h3{ color:#f4ede1; }
.site .price-card--lead .room-card__list li{ color:#cabfae; }
.site .price-card--lead .room-card__list li::before{ background:var(--sand); }
.site .price-card__label{ font-family:var(--mono); font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); }
.site .price-card--lead .price-card__label{ color:var(--stone); }
.site .price-card h3{ font-size:26px; margin:10px 0 18px; }
.site .price-card__amount{ font-family:var(--serif); font-size:clamp(34px,3.6vw,48px); color:#f4ede1; margin:0 0 22px; line-height:1; }
.site .price-card__amount span{ font-family:var(--mono); font-size:14px; letter-spacing:.08em; color:var(--stone); margin-left:8px; }
.site .price-card__note{ font-family:var(--mono); font-size:13px; letter-spacing:.04em; color:var(--ink-faint); margin:20px 0 0; }
.site .price-card--lead .price-card__note{ color:var(--stone); }
.site .price-rows{ margin:0; display:grid; gap:0; }
.site .price-rows > div{ display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-top:1px solid var(--line); }
.site .price-rows > div:first-child{ border-top:0; }
.site .price-rows dt{ color:var(--ink-soft); font-size:var(--fs-body-sm); }
.site .price-rows dd{ margin:0; font-family:var(--mono); font-size:var(--fs-body-xs); color:var(--ink); white-space:nowrap; }

/* Kleingedrucktes auf Download-Karten (z. B. Einordnung einer Fassung) */
.site .download-card__note{ font-size:var(--fs-body-xs); line-height:1.55; color:var(--ink-faint); margin:0; }