/* Forest Air — Journal
   ==========================================================================
   Zwei Ansichten in einer Datei: die Übersicht (.fa-bl-*) und die
   Beitragsseite (.fa-bt-*).

   Die Leitidee: ein Beitrag ist zum LESEN da, nicht zum Anschauen. Deshalb
   ist die Textspalte schmal, die Zeilen sind lang genug für einen Atemzug
   und kurz genug, dass das Auge die nächste Zeile findet, und zwischen den
   Kapiteln steht mehr Luft als zwischen den Absätzen. Alles andere tritt
   zurück.

   Die 68 Zeichen Zeilenlänge sind kein Geschmack, sondern das Maß, bei dem
   Lesende die Zeile am zuverlässigsten wiederfinden. Darüber springt der
   Blick beim Zeilenwechsel gern eine Zeile zu weit.

   Diese Datei wird NICHT vom Generator erzeugt.
   ========================================================================== */

/* ======================================================== Übersicht */
.fa-blogliste{ background:var(--nachthimmel); }
.fa-bl-innen{ max-width:var(--breite); margin:0 auto; padding:clamp(40px,6vw,76px) 24px clamp(56px,8vw,104px); }

/* --- Der neueste Beitrag, groß ------------------------------------------
   Sieben gleich große Kacheln sehen aus wie ein Archiv, in dem nichts
   wichtiger ist als etwas anderes. Einer steht deshalb vorn. */
.fa-bl-kopf{
  display:block; text-decoration:none; color:inherit;
  border:1px solid rgba(231,228,214,.15); border-radius:14px;
  padding:clamp(28px,4vw,52px);
  background:
    radial-gradient(90% 150% at 100% 0%, rgba(86,94,76,.30) 0%, transparent 62%),
    rgba(245,242,235,.03);
  transition:border-color .3s ease, transform .3s var(--e-satt,cubic-bezier(.2,.7,.3,1));
  margin-bottom:34px;
}
.fa-bl-kopf:hover{ border-color:rgba(231,220,201,.42); transform:translateY(-2px); }
.fa-bl-marke{
  font-family:"Space Grotesk",sans-serif; font-size:11px; letter-spacing:.30em;
  text-transform:uppercase; color:var(--salbeinebel); margin:0 0 16px;
}
.fa-bl-kopf h2{
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif; font-weight:300;
  font-size:clamp(26px,3.6vw,42px); line-height:1.12; margin:0 0 16px; max-width:20ch;
  color:var(--creme);
}
.fa-bl-anriss{ margin:0 0 20px; font-size:16px; line-height:1.75; color:var(--salbeinebel); max-width:62ch; }

.fa-bl-zeile{
  display:flex; align-items:center; gap:11px; margin:0 0 18px;
  font-size:12.5px; letter-spacing:.06em; color:rgba(161,165,140,.85);
}
.fa-bl-punkt{ width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.6; }
.fa-bl-mehr{
  display:inline-block; font-size:13.5px; letter-spacing:.05em; color:var(--mondlicht);
  border-bottom:1px solid rgba(231,220,201,.4); padding-bottom:3px;
}

/* --- Die übrigen als Karten --------------------------------------------- */
.fa-bl-karten{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(272px,1fr)); gap:18px;
}
.fa-bl-karten a{
  display:flex; flex-direction:column; height:100%; text-decoration:none; color:inherit;
  border:1px solid rgba(231,228,214,.13); border-radius:11px; padding:24px 22px;
  background:rgba(245,242,235,.025);
  transition:border-color .28s ease, background .28s ease, transform .28s ease;
}
.fa-bl-karten a:hover{ border-color:rgba(231,220,201,.34); background:rgba(245,242,235,.05); transform:translateY(-2px); }
.fa-bl-karten h3{
  font-family:"Space Grotesk",sans-serif; font-weight:400; font-size:17.5px;
  line-height:1.3; margin:0 0 11px; color:var(--mondlicht);
}
.fa-bl-karten p{ margin:0 0 16px; font-size:14.5px; line-height:1.7; color:var(--salbeinebel); }
/* Die Datumszeile unten bündig — sonst tanzen bei unterschiedlich langen
   Anrissen die Zeilen auf verschiedenen Höhen. */
.fa-bl-karten .fa-bl-zeile{ margin:auto 0 0; }

/* ==================================================== Beitragsseite */
.fa-bt-innen{ max-width:760px; margin:0 auto; padding:0 var(--rand); }

.fa-bt-kopf{
  background:
    radial-gradient(110% 140% at 15% 0%, #2b2b2b 0%, var(--nachthimmel) 60%);
  padding:clamp(40px,6vw,80px) 0 clamp(28px,4vw,44px);
}
.fa-bt-weg{
  font-size:12px; letter-spacing:.10em; text-transform:uppercase;
  color:var(--salbeinebel); margin:0 0 20px;
}
.fa-bt-weg a{ color:var(--salbeinebel); text-decoration:none; border-bottom:1px solid rgba(161,165,140,.4); }
.fa-bt-weg a:hover{ color:var(--mondlicht); }
.fa-bt-weg span{ margin:0 8px; opacity:.5; }
.fa-bt-kopf h1{
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif; font-weight:300;
  font-size:clamp(28px,4.2vw,46px); line-height:1.1; margin:0 0 18px; color:var(--creme);
}
.fa-bt-zeile{
  display:flex; align-items:center; gap:11px; margin:0;
  font-size:13px; letter-spacing:.05em; color:var(--salbeinebel);
}

.fa-bt-bild{ margin:0; }
.fa-bt-bild img{ width:100%; height:auto; display:block; }

/* --- Der Text ------------------------------------------------------------ */
.fa-bt-text{ background:var(--nachthimmel); padding:clamp(38px,5vw,64px) 0 clamp(48px,7vw,88px); }

.fa-bt-vor{
  font-size:clamp(17px,2vw,19.5px); line-height:1.72; color:var(--creme);
  margin:0 0 34px; max-width:64ch;
}
.fa-bt-text p{
  font-size:16.5px; line-height:1.85; color:rgba(245,242,235,.86);
  margin:0 0 20px; max-width:68ch;
}
.fa-bt-text h2{
  font-family:"Space Grotesk",sans-serif; font-weight:300;
  font-size:clamp(21px,2.6vw,28px); line-height:1.25;
  margin:46px 0 16px; color:var(--mondlicht); max-width:26ch;
}
/* Erste Überschrift nicht doppelt absetzen — darüber steht schon der
   Vorspann mit eigenem Abstand. */
.fa-bt-text h2:first-of-type{ margin-top:8px; }
.fa-bt-text h3{
  font-family:"Space Grotesk",sans-serif; font-weight:400; font-size:17.5px;
  margin:32px 0 12px; color:var(--creme);
}
.fa-bt-text ul,
.fa-bt-text ol{ margin:0 0 22px; padding:0 0 0 4px; list-style:none; counter-reset:s; max-width:66ch; }
.fa-bt-text li{
  position:relative; padding-left:28px; margin-bottom:11px;
  font-size:16px; line-height:1.8; color:rgba(245,242,235,.86);
}
.fa-bt-text ul li::before{
  content:""; position:absolute; left:0; top:.82em; width:12px; height:1px;
  background:var(--salbeinebel);
}
.fa-bt-text ol li{ counter-increment:s; }
.fa-bt-text ol li::before{
  content:counter(s); position:absolute; left:0; top:0;
  font-family:"Space Grotesk",sans-serif; font-size:12.5px; line-height:1.9;
  color:var(--salbeinebel); letter-spacing:.06em;
}
.fa-bt-text a{ color:var(--mondlicht); text-decoration:none; border-bottom:1px solid rgba(231,220,201,.35); }
.fa-bt-text a:hover{ border-color:var(--mondlicht); }
.fa-bt-text b,
.fa-bt-text strong{ font-weight:600; color:var(--creme); }

.fa-bt-text blockquote{
  margin:32px 0; padding:22px 26px;
  border-left:2px solid var(--forest); background:rgba(245,242,235,.035);
  border-radius:0 8px 8px 0;
  font-size:17px; line-height:1.75; color:var(--creme);
}
.fa-bt-text blockquote p{ margin:0; }

.fa-bt-fuss{
  margin:42px 0 0 !important; padding-top:20px;
  border-top:1px solid rgba(231,228,214,.14);
  font-size:13px !important; line-height:1.7 !important; color:rgba(161,165,140,.8) !important;
}

/* --- Weiterlesen --------------------------------------------------------- */
.fa-bt-weiter{
  background:linear-gradient(180deg,#1e201c 0%,var(--nachthimmel) 100%);
  border-top:1px solid rgba(231,228,214,.10);
  padding:clamp(40px,6vw,72px) 0;
}
.fa-bt-weiter .fa-bt-innen{ max-width:var(--breite); }
.fa-bt-weiter h2{
  font-family:"Space Grotesk",sans-serif; font-weight:300; font-size:clamp(20px,2.4vw,26px);
  margin:0 0 26px; color:var(--creme);
}
.fa-bt-weiter ul{
  list-style:none; margin:0 0 26px; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(272px,1fr)); gap:18px;
}
.fa-bt-weiter a{ display:block; text-decoration:none; color:inherit;
  border:1px solid rgba(231,228,214,.13); border-radius:11px; padding:22px 20px;
  background:rgba(245,242,235,.025); transition:border-color .28s ease, transform .28s ease; }
.fa-bt-weiter a:hover{ border-color:rgba(231,220,201,.34); transform:translateY(-2px); }
.fa-bt-weiter h3{ font-family:"Space Grotesk",sans-serif; font-weight:400; font-size:16.5px;
  margin:0 0 9px; color:var(--mondlicht); line-height:1.3; }
.fa-bt-weiter p{ margin:0; font-size:14px; line-height:1.68; color:var(--salbeinebel); }
.fa-bt-zurueck{ margin:0; }
.fa-bt-zurueck a{
  border:0; background:none; padding:0; display:inline-block;
  font-size:13.5px; letter-spacing:.05em; color:var(--mondlicht);
  border-bottom:1px solid rgba(231,220,201,.4); padding-bottom:3px;
}
.fa-bt-zurueck a:hover{ transform:none; }

/* ------------------------------------------------------------------ Schmal */
@media (max-width:700px){
  .fa-bl-innen,
  .fa-bt-innen{ padding-left:20px; padding-right:20px; }
  .fa-bl-kopf{ padding:26px 22px; }
  /* Kein Text unter 11,5 px — dieselbe Regel wie im Mobil-Block von
     rahmen.css, hier für die Klassen dieser Datei nachgezogen. */
  .fa-bl-marke{ font-size:11.5px; letter-spacing:.24em; }
  .fa-bl-zeile,
  .fa-bt-zeile,
  .fa-bt-weg{ font-size:12.5px; }
  .fa-bt-fuss{ font-size:12.5px !important; }
  /* Lesegrößen auf dem Handy leicht anheben: bei 390 px Breite passen
     ohnehin nur rund 40 Zeichen in die Zeile, da darf die Schrift größer
     sein als am Rechner. */
  .fa-bt-text p{ font-size:17px; line-height:1.8; }
  .fa-bt-vor{ font-size:18px; }
  .fa-bt-text h2{ margin-top:38px; }
  /* Tippfläche: die Brotkrume und der Zurück-Link waren 16 px hoch. */
  .fa-bt-weg a,
  .fa-bt-zurueck a{ position:relative; display:inline-block; padding:8px 0; }
  .fa-bt-weg a::after,
  .fa-bt-zurueck a::after{
    content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:max(100%,44px); height:max(100%,44px); border-radius:8px;
  }
}

@media (prefers-reduced-motion:reduce){
  .fa-bl-kopf,.fa-bl-karten a,.fa-bt-weiter a{ transition:none; }
  .fa-bl-kopf:hover,.fa-bl-karten a:hover,.fa-bt-weiter a:hover{ transform:none; }
}