/* Aktuelles am Chalet.
   1 Baustein für alle Zielgruppenseiten, in 2 Stufen. Die Seite bringt nur die
   leeren Behälter mit, gefüllt werden sie aus /data/news.json.

     #aktuell-block   der Abschnitt "Aktuelles": oben die Bedingungen, darunter
                      die Karten. Das ist der Normalfall.
     #aktuell         Rückfallebene für ältere Seiten ohne diesen Abschnitt.

   Die Farben setzt jede Seite über 6 eigene Namen, damit sich beide Stufen in
   ihre Palette einfügen statt aufzufallen:

     --aktuell-grund   Fläche
     --aktuell-kante   die Linie links, üblicherweise die Akzentfarbe der Seite
     --aktuell-text    Überschriften und Satz
     --aktuell-klein   Stand, Quelle, Datumszeile
     --aktuell-karte   Fläche einer Karte in Stufe 2
     --aktuell-linie   die feinen Trennlinien

   Setzt eine Seite sie nicht, greifen die Rückfallwerte unten, und der
   Baustein sieht überall gleich aus. */

/* ------------------------------------------------- Stufe 1: der Satz --- */

#aktuell{
  margin:0 0 34px;
  padding:16px 20px;
  max-width:64ch;
  background:var(--aktuell-grund, #FAF8F4);
  border-left:3px solid var(--aktuell-kante, #B0824C);
}
#aktuell[hidden]{display:none}
#aktuell .satz{margin:0;font-size:16.5px;line-height:1.55;color:var(--aktuell-text, #16181B)}
#aktuell .rand{margin:6px 0 0;font-size:13px;line-height:1.5;color:var(--aktuell-klein, #5E6165)}

/* ----------------------------------------------- Stufe 2: die Karten --- */

#aktuell-block{
  background:var(--aktuell-grund, #FAF8F4);
  border-block:1px solid var(--aktuell-linie, rgba(22,24,27,.12));
  padding-block:clamp(46px,6vw,80px);
}
#aktuell-block[hidden]{display:none}

#aktuell-block .ak-dach{
  margin:0 0 10px;
  font-size:12.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--aktuell-klein, #5E6165);
}
#aktuell-block .ak-h{
  margin:0 0 30px;
  max-width:24ch;
  font-size:clamp(24px,3.2vw,34px);
  line-height:1.2;
  text-wrap:balance;
  color:var(--aktuell-text, #16181B);
}

/* Die Bedingungen, oben im Abschnitt. Gleiche Anmutung wie eine Karte, aber
   über die ganze Breite, damit der Satz nicht in eine Spalte gequetscht wird. */
#aktuell-block .ak-jetzt{
  background:var(--aktuell-karte, #FFFFFF);
  border-left:3px solid var(--aktuell-kante, #B0824C);
  padding:17px 20px 16px;
  margin:0 0 26px;
  /* genau 2 Kartenspalten plus 1 Abstand breit, damit die rechte Kante auf der
     Kante der Karten darunter liegt */
  max-width:calc((100% - 36px) * 2 / 3 + 18px);
}
#aktuell-block .ak-satz{
  margin:0;
  font-size:17px;
  line-height:1.55;
  color:var(--aktuell-text, #16181B);
}

#aktuell-block .ak-karten{
  display:grid;
  gap:18px;
  /* Immer 3 gleiche Spuren, auch wenn nur 2 Karten da sind. Dann ist eine
     Karte immer gleich breit und die Zeilen bleiben lesbar lang. */
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:stretch;
}
#aktuell-block .ak-karte{
  background:var(--aktuell-karte, #FFFFFF);
  border-left:3px solid var(--aktuell-kante, #B0824C);
  padding:18px 20px 18px;
  display:flex;
  flex-direction:column;
}
#aktuell-block .ak-wann{
  margin:0 0 7px;
  font-size:12.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--aktuell-klein, #5E6165);
}
#aktuell-block .ak-kt{
  margin:0 0 9px;
  font-size:clamp(17px,1.9vw,19.5px);
  line-height:1.32;
  text-wrap:balance;
  color:var(--aktuell-text, #16181B);
}
#aktuell-block .ak-teaser{
  margin:0;
  font-size:15.5px;
  line-height:1.6;
  color:var(--aktuell-text, #16181B);
}
/* Die Seiten bringen eigene Regeln fuer details und summary mit. Hier wird
   davon nur genommen, was zur Karte passt: 1 feine Linie oben, nichts unten,
   damit Karten mit und ohne Aufklapper gleich enden. */
#aktuell-block details{
  margin:13px 0 0;
  /* nach unten geschoben, damit die Aufklapper einer Reihe auf einer Linie
     liegen, auch wenn die Texte verschieden lang sind */
  margin-top:auto;
  padding-top:13px;
  border:0;
  padding:0;
  background:none;
}
#aktuell-block summary{
  cursor:pointer;
  font-size:14.5px;
  color:var(--aktuell-kante, #B0824C);
  text-underline-offset:3px;
  text-decoration:underline;
  border:0;
  border-top:1px solid var(--aktuell-linie, rgba(22,24,27,.12));
  padding:12px 0 0;
  margin:0;
}
#aktuell-block summary::-webkit-details-marker{display:none}
#aktuell-block summary::marker{content:""}
#aktuell-block details p{
  margin:10px 0 0;
  font-size:15px;
  line-height:1.62;
  color:var(--aktuell-text, #16181B);
}
#aktuell-block .ak-quelle{
  margin:9px 0 0;
  font-size:12.5px;
  line-height:1.5;
  color:var(--aktuell-klein, #5E6165);
}
#aktuell-block .ak-rand{
  margin:7px 0 0;
  font-size:13px;
  line-height:1.5;
  color:var(--aktuell-klein, #5E6165);
}

@media(max-width:1000px){
  /* Die Bedingungen, oben im Abschnitt. Gleiche Anmutung wie eine Karte, aber
   über die ganze Breite, damit der Satz nicht in eine Spalte gequetscht wird. */
#aktuell-block .ak-jetzt{
  background:var(--aktuell-karte, #FFFFFF);
  border-left:3px solid var(--aktuell-kante, #B0824C);
  padding:17px 20px 16px;
  margin:0 0 26px;
  /* genau 2 Kartenspalten plus 1 Abstand breit, damit die rechte Kante auf der
     Kante der Karten darunter liegt */
  max-width:none;
}
#aktuell-block .ak-satz{
  margin:0;
  font-size:17px;
  line-height:1.55;
  color:var(--aktuell-text, #16181B);
}

#aktuell-block .ak-karten{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  /* Die Bedingungen, oben im Abschnitt. Gleiche Anmutung wie eine Karte, aber
   über die ganze Breite, damit der Satz nicht in eine Spalte gequetscht wird. */
#aktuell-block .ak-jetzt{
  background:var(--aktuell-karte, #FFFFFF);
  border-left:3px solid var(--aktuell-kante, #B0824C);
  padding:17px 20px 16px;
  margin:0 0 26px;
  /* genau 2 Kartenspalten plus 1 Abstand breit, damit die rechte Kante auf der
     Kante der Karten darunter liegt */
  max-width:none;
}
#aktuell-block .ak-satz{
  margin:0;
  font-size:17px;
  line-height:1.55;
  color:var(--aktuell-text, #16181B);
}

#aktuell-block .ak-karten{grid-template-columns:1fr}
}