/* Himmelfreund – Seite /nachhaltigkeit (views/page/nachhaltigkeit.tpl)
   Wird im Block head geladen, also VOR himmelfreund.css – deshalb Selektoren mit .hf-nh davor.
   Alles ist unter .hf-nh gekapselt, damit nichts mit dem Theme kollidiert.
   Schriften kommen vom Theme (keine externen Google Fonts – DSGVO).
   Die Variablen mit "Theme:" im Kommentar auf die Theme-Variablen mappen. */

.hf-nh{
  --hf-nh-himmel:var(--bs-primary,#015C91);     /* Theme: Primär-/Himmelblau */
  --hf-nh-tanne:#1E5A3E;      /* Seitenfarbe dieser Seite: Waldgrün */
  --hf-nh-tanne-tief:#143F2B; /* Hero und Abschluss */
  --hf-nh-blatt:#5FA84A;
  --hf-nh-moos:#E3F1E6;       /* grüne Bänder */
  --hf-nh-moos-linie:#C4DFCB;
  --hf-nh-boden:#7A5434;
  --hf-nh-waerme:#E8962E;
  --hf-nh-flaeche:var(--bs-body-bg,#FFFFFF);    /* Theme: Karten-/Seitenhintergrund */
  --hf-nh-text:var(--bs-body-color,#2B3D57);       /* Theme: Textfarbe */
  --hf-nh-leise:#4A5E52;
  --hf-nh-hell-text:#F1F8F3;
  --hf-nh-platzhalter:#FFF1C9;
  --hf-nh-platzhalter-text:#6B4E00;
  --hf-nh-radius:var(--hf-radius-card,18px);        /* Theme: Eckenradius (Karten) */
  color:var(--hf-nh-text);
  line-height:1.65;
}
/* Dark Mode des Themes: <html data-bs-theme="dark">. Blau, Fläche und Text folgen den Theme-Variablen. */
[data-bs-theme="dark"] .hf-nh{
  --hf-nh-tanne:#9FD3B4; --hf-nh-tanne-tief:#0E2A1D;
  --hf-nh-blatt:#86C96F; --hf-nh-moos:#15281E; --hf-nh-moos-linie:#24402F;
  --hf-nh-boden:#C79A72; --hf-nh-waerme:#F2B061;
  --hf-nh-leise:#A9BBB0;
  --hf-nh-platzhalter:#3D3214; --hf-nh-platzhalter-text:#F3D98A;
}

.hf-nh *,.hf-nh *::before,.hf-nh *::after{box-sizing:border-box}
.hf-nh svg{max-width:100%;height:auto}
.hf-nh a{color:var(--hf-nh-tanne)}
.hf-nh :focus-visible{outline:3px solid var(--hf-nh-blatt);outline-offset:3px;border-radius:4px}
/* Theme setzt bei Links/Buttons eine eigene Fokusfarbe – hier spezifischer, damit der Rahmen auf Grün sichtbar bleibt */
.hf-nh :is(a,summary,button):focus-visible{outline:3px solid var(--hf-nh-tanne);outline-offset:3px}
.hf-nh :is(.hf-nh-hero,.hf-nh-cta) :is(a,button):focus-visible{outline-color:#FFFFFF}
.hf-nh-wrap{width:min(1120px,100% - 2.5rem);margin-inline:auto}
.hf-nh h1,.hf-nh h2,.hf-nh h3{line-height:1.1;margin:0 0 .6em;color:inherit}
.hf-nh h1{font-size:clamp(2.3rem,5.4vw,4.2rem);font-weight:800;letter-spacing:-.02em}
.hf-nh h2{font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:700;letter-spacing:-.01em;color:var(--hf-nh-tanne)}
.hf-nh h3{font-size:1.25rem;font-weight:700}
.hf-nh p{margin:0 0 1em;max-width:62ch}
.hf-nh-lead{font-size:1.2rem;color:var(--hf-nh-leise)}
.hf-nh-ph{background:var(--hf-nh-platzhalter);color:var(--hf-nh-platzhalter-text);padding:0 .3em;border-radius:3px;font-weight:700}

.hf-nh section{padding:clamp(3rem,6vw,5rem) 0}
.hf-nh-band{background:var(--hf-nh-moos)}
.hf-nh-hell{background:var(--hf-nh-flaeche)}

/* Hero – tiefes Waldgrün */
.hf-nh .hf-nh-hero{background:var(--hf-nh-tanne-tief);color:var(--hf-nh-hell-text);padding:clamp(3.5rem,8vw,6.5rem) 0}
.hf-nh-hero p{font-size:1.2rem;color:var(--hf-nh-hell-text);opacity:.9}
.hf-nh-hero-grid{display:grid;gap:2.5rem;grid-template-columns:1fr}
@media (min-width:900px){.hf-nh-hero-grid{grid-template-columns:1.05fr 1fr;align-items:center}}

.hf-nh-btns{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}
/* Buttons: Form vom Theme (.hf-btn, Eckenradius wie die übrigen Buttons), Farbe grün */
.hf-nh .hf-nh-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.75rem 1.4rem;border-radius:var(--hf-radius-btn,var(--hf-radius-control,10px));font-weight:700;text-decoration:none;border:2px solid currentColor}
.hf-nh .hf-nh-btn-primary{background:var(--hf-nh-blatt);border-color:var(--hf-nh-blatt);color:#0F2A1C}
.hf-nh .hf-nh-btn-primary:hover{background:#7BBF66;border-color:#7BBF66;color:#0F2A1C}
.hf-nh .hf-nh-btn-ghost{background:transparent;color:var(--hf-nh-hell-text)}
.hf-nh .hf-nh-btn-ghost:hover{background:rgba(255,255,255,.1);color:var(--hf-nh-hell-text)}

/* Kreislauf-Grafik im Hero */
.hf-nh-kreis{margin:0;background:#F4FAF5;border-radius:28px;padding:1.2rem;color:#17271F}
.hf-nh-kreis text{font-size:15px;fill:#17271F}
.hf-nh-kreis .hf-nh-klein{font-size:12.5px;fill:#4A5E52}
.hf-nh-kreis figcaption{font-size:.9rem;color:#4A5E52;margin:.4rem .4rem 0}
@media (prefers-reduced-motion:no-preference){
  .hf-nh-fluss{stroke-dasharray:6 10;animation:hf-nh-fliessen 2.2s linear infinite}
  @keyframes hf-nh-fliessen{to{stroke-dashoffset:-32}}
}

/* Schritte */
.hf-nh-schritte{list-style:none;padding:0;margin:2rem 0 0;display:grid;gap:1.6rem;counter-reset:hfs}
@media (min-width:800px){.hf-nh-schritte{grid-template-columns:repeat(3,1fr)}}
.hf-nh-schritte li{counter-increment:hfs;border-top:4px solid var(--hf-nh-waerme);padding-top:1rem}
.hf-nh-schritte li::before{content:counter(hfs);font-weight:800;font-size:2.4rem;color:var(--hf-nh-waerme);display:block;line-height:1}

/* Wald */
.hf-nh-wald{display:grid;gap:2.5rem}
@media (min-width:900px){.hf-nh-wald{grid-template-columns:1fr 1fr;align-items:start}}
.hf-nh-fakten{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.7rem 1.4rem;background:var(--hf-nh-moos);border-left:6px solid var(--hf-nh-blatt);border-radius:0 var(--hf-nh-radius) var(--hf-nh-radius) 0;padding:1.4rem 1.5rem}
.hf-nh-fakten dt{color:var(--hf-nh-leise)}
.hf-nh-fakten dd{margin:0;font-weight:700;color:var(--hf-nh-tanne)}

/* Baumpatenschaft */
.hf-nh-baum{display:grid;gap:2rem;align-items:center}
@media (min-width:900px){.hf-nh-baum{grid-template-columns:auto 1fr}}
.hf-nh-jahresringe{width:220px;justify-self:center}
.hf-nh-preisbox{margin-top:1.4rem;display:inline-flex;gap:1rem;align-items:baseline;flex-wrap:wrap;background:var(--hf-nh-flaeche);border:2px solid var(--hf-nh-blatt);border-radius:var(--hf-nh-radius);padding:1rem 1.3rem}
.hf-nh-preisbox strong{font-size:1.9rem;color:var(--hf-nh-tanne)}
.hf-nh-tarife-baum{margin-top:2.5rem}
.hf-nh-tabelle{overflow-x:auto;border:1px solid var(--hf-nh-moos-linie);border-radius:var(--hf-nh-radius);background:var(--hf-nh-flaeche)}
.hf-nh-tabelle table{border-collapse:collapse;width:100%;min-width:560px}
.hf-nh-tabelle caption{text-align:left;padding:1rem 1.1rem .4rem;color:var(--hf-nh-leise);font-size:.95rem}
.hf-nh-tabelle th,.hf-nh-tabelle td{text-align:left;padding:.7rem 1.1rem;border-top:1px solid var(--hf-nh-moos-linie);vertical-align:top}
.hf-nh-tabelle thead th{background:var(--hf-nh-tanne);color:var(--hf-nh-hell-text)}
[data-bs-theme="dark"] .hf-nh .hf-nh-tabelle thead th{background:var(--hf-nh-tanne-tief);color:var(--hf-nh-tanne)}
.hf-nh-tabelle tbody tr:nth-child(even){background:var(--hf-nh-moos)}
.hf-nh-tabelle td:first-child{font-weight:700;color:var(--hf-nh-tanne);white-space:nowrap}
.hf-nh-tabelle td:last-child{white-space:nowrap}
.hf-nh-tabelle small{color:var(--hf-nh-leise)}

/* Transparenz */
.hf-nh-ehrlich{display:grid;gap:1.5rem}
@media (min-width:800px){.hf-nh-ehrlich{grid-template-columns:1fr 1fr}}
.hf-nh-ehrlich > div{padding:1.4rem 1.5rem;border-radius:var(--hf-nh-radius)}
.hf-nh-ehrlich > div:first-child{background:var(--hf-nh-moos);border:1px solid var(--hf-nh-moos-linie)}
.hf-nh-ehrlich > div:last-child{border:1px dashed var(--hf-nh-moos-linie)}
.hf-nh-ehrlich ul{margin:.4rem 0 0;padding-left:1.2rem}
.hf-nh-ehrlich li{margin:.35rem 0}

/* FAQ */
.hf-nh-faq details{border-bottom:1px solid var(--hf-nh-moos-linie);padding:1rem 0}
.hf-nh-faq summary{cursor:pointer;font-weight:700;font-size:1.1rem}
.hf-nh-faq details p{margin-top:.7rem;color:var(--hf-nh-leise)}

/* Abschluss */
.hf-nh-cta{background:var(--hf-nh-tanne-tief);color:var(--hf-nh-hell-text);border-radius:28px;padding:clamp(2rem,5vw,3.5rem)}
.hf-nh .hf-nh-cta h2,.hf-nh-cta p{color:var(--hf-nh-hell-text)}
.hf-nh-hinweis{font-size:.9rem;color:var(--hf-nh-leise);margin-top:2rem}