/* =====================================================================
   Newsletter-Archiv, Stil "Label-Katalog", wie die anderen Seiten.

   Diese Seite hatte bis heute ein eigenes Dokument samt eigener
   Kopfzeile mit Logo und Heim-Knopf. Ueber index.php aufgerufen ergab
   das ein Dokument im Dokument und eine zweite klebende Kopfzeile, die
   sich ueber das Aufklappmenue legte. Beides ist raus. Wer den alten
   Weg direkt aufruft, wird auf index.php umgeleitet, damit die Links
   aus den verschickten Mails weiter funktionieren.

   Leser sind zwischen 45 und 85: Grundschrift 18 px, hoher Kontrast.
   Beim Lesen eines Newsletters gilt das doppelt, darum ist der
   Lesebereich auf gut 70 Zeichen Zeilenbreite begrenzt.
   ===================================================================== */

/* Die alte Regel "main{padding:0}" ist am 23.09.2026 entfallen.
   Der Seitenverlauf soll rundherum sichtbar bleiben. */
/* Aussen die volle Breite mit dunklem Grund, sonst blitzt der blaue
   Verlauf der globalen style.css links und rechts durch. Die Spalte
   fuer den Text sitzt darin. */
.archive-container{
  --grund:transparent;
  --text:var(--tf-text,#FFFFFF);
  --leise:var(--tf-leise,#B6C4D4);
  --linie:var(--tf-linie,rgba(255,255,255,.12));
  --kasse:var(--tf-kasse,#00FFFF);
  font-family:var(--tf-schrift,'Poppins',Arial,sans-serif);
  color:var(--text);background:var(--grund);
  font-size:18px;line-height:1.65;text-align:left;letter-spacing:normal;
  width:100%;max-width:100%;margin:0;
  padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(3rem,6vw,4.5rem);
  min-height:72vh;
}
.archive-inner{
  max-width:920px;margin:0 auto;
  padding:0 clamp(16px,4vw,32px);
}
.archive-container *{letter-spacing:normal;box-sizing:border-box;text-align:inherit}
.archive-container h1,.archive-container h2,.archive-container h3{
  font-family:inherit !important;text-transform:none !important;text-shadow:none !important;
  animation:none !important;background:none !important;
  -webkit-text-fill-color:currentColor !important;letter-spacing:-.01em !important;
}
.archive-container header,.archive-container footer,.archive-container nav{
  position:static !important;z-index:auto !important;top:auto !important;
}

/* ================== Kopf der Liste ================== */
.archive-header{
  padding-bottom:clamp(1.4rem,3vw,2rem);
  border-bottom:1px solid var(--linie);
  display:flex;flex-wrap:wrap;gap:1.2rem 2rem;
  align-items:flex-end;justify-content:space-between;
}
.archive-header h1{
  margin:0;font-size:clamp(2.2rem,5.5vw,3.6rem);font-weight:500;line-height:1;color:var(--text);
}

/* Sprachwahl */
.lang-switcher{display:flex;flex-wrap:wrap;gap:.9rem}
.lang-switcher a{
  font-size:.95rem;color:var(--leise);text-decoration:none;
  border-bottom:2px solid transparent;padding:.2rem 0;
  transition:color .2s,border-color .2s;
  display:inline-flex;align-items:center;gap:.35rem;
}
.lang-switcher a:hover{color:var(--text)}
.lang-switcher a.active{color:var(--text);border-bottom-color:var(--text)}
.lang-switcher .fi{display:inline-block;width:1.4em;height:1em;border-radius:0}

/* ================== Die Liste ================== */
.newsletter-list{display:grid;gap:0;margin-top:.4rem}
.newsletter-card{
  display:flex;flex-wrap:wrap;gap:.8rem 1.6rem;
  align-items:center;justify-content:space-between;
  padding:1.3rem 0;border-bottom:1px solid var(--linie);
  background:transparent;border-radius:0;box-shadow:none;
  transition:background .2s;
}
.newsletter-card:hover{background:rgba(255,255,255,.03)}
.newsletter-card .info{min-width:0;flex:1 1 320px}
.newsletter-card h3{
  margin:0;font-size:1.15rem;font-weight:500;line-height:1.35;color:var(--text);
}
.newsletter-card .date{
  margin-top:.3rem;font-size:.92rem;color:var(--leise);font-variant-numeric:tabular-nums;
}
.read-btn{
  font-size:1rem;font-weight:500;text-decoration:none;white-space:nowrap;
  background:transparent;color:var(--text);
  border:1px solid var(--linie);border-radius:0;padding:.55rem 1.4rem;
  transition:border-color .2s,color .2s;
}
.read-btn:hover{border-color:var(--kasse);color:var(--kasse)}

.empty-state{padding:4rem 0;color:var(--leise);max-width:60ch}
.empty-state i{font-size:2rem;color:#8195A9;display:block;margin-bottom:1rem}
.empty-state p{margin:0;font-size:1.05rem;line-height:1.7}

/* ================== Ein einzelner Newsletter ================== */
.back-link{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.98rem;color:var(--leise);text-decoration:none;
  border-bottom:1px solid var(--linie);padding:.3rem 0;
  transition:color .2s,border-color .2s;
}
.back-link:hover{color:var(--text);border-bottom-color:var(--text)}

.newsletter-single{margin-top:1.8rem}
.newsletter-single-header{
  padding-bottom:1.4rem;border-bottom:1px solid var(--linie);
}
.newsletter-single-header h1{
  margin:0;font-size:clamp(1.8rem,4.5vw,2.8rem);font-weight:500;line-height:1.15;color:var(--text);
}
.newsletter-single-header .date{
  margin-top:.6rem;font-size:.95rem;color:var(--leise);font-variant-numeric:tabular-nums;
}

/* Der Newsletter selbst bringt eigenes HTML mit. Hier wird nur dafuer
   gesorgt, dass er lesbar bleibt und nichts aus der Seite laeuft. */
.newsletter-single-content{
  margin-top:1.8rem;font-size:1.05rem;line-height:1.75;color:#DCE6F2;
  overflow-wrap:anywhere;
}
.newsletter-single-content > *{max-width:100%}
.newsletter-single-content p{margin:0 0 1.1rem;max-width:72ch}
.newsletter-single-content h1,
.newsletter-single-content h2,
.newsletter-single-content h3{
  margin:2rem 0 .8rem;color:var(--text);font-weight:500;line-height:1.25;
  text-shadow:none !important;text-transform:none !important;
}
.newsletter-single-content h1{font-size:1.8rem}
.newsletter-single-content h2{font-size:1.45rem}
.newsletter-single-content h3{font-size:1.2rem}
.newsletter-single-content a{color:var(--kasse);text-decoration:none;border-bottom:1px solid currentColor}
.newsletter-single-content a:hover{color:var(--text)}
.newsletter-single-content img{height:auto;display:block;margin:1.4rem 0;border-radius:8px}
.newsletter-single-content ul,
.newsletter-single-content ol{margin:0 0 1.1rem 1.3rem;max-width:72ch}
.newsletter-single-content li{margin-bottom:.45rem}
.newsletter-single-content table{width:100% !important;max-width:100% !important;border-collapse:collapse}
.newsletter-single-content td,
.newsletter-single-content th{padding:.4rem .5rem}
.newsletter-single-content hr{border:0;border-top:1px solid var(--linie);margin:2rem 0}
.newsletter-single-content blockquote{
  margin:1.4rem 0;padding-left:1.1rem;border-left:2px solid var(--linie);color:var(--leise);
}

.single-lang-switcher{
  margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid var(--linie);
  font-size:.92rem;color:var(--leise);
}

@media (max-width:640px){
  .archive-header{flex-direction:column;align-items:flex-start}
  .newsletter-card{flex-direction:column;align-items:flex-start}
  .read-btn{width:100%;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .archive-container *{transition:none !important;animation:none !important}
}

/* =====================================================================
   Am 23.09.2026 auf die Tafel umgestellt, Grundlage assets/css/tafel.css.
   Der blaue Seitenverlauf bleibt sichtbar, der Inhalt sitzt auf einer
   dunklen Tafel, Poppins als Schrift, Farbe ist erlaubt. Der Aufbau
   der Seite ist unveraendert geblieben.
   ===================================================================== */
main.arch-main{
  padding:clamp(10px,2vw,22px) clamp(10px,2vw,20px) clamp(28px,4vw,48px) !important;
  align-items:stretch !important;max-width:100% !important;text-align:left !important;
}
.archive-container{
  /* box-sizing ist hier noetig: ohne das rechnet der Browser das
     Polster auf die 100 Prozent Breite drauf und die Tafel laeuft
     rechts aus dem Fenster. Gefunden am 23.09.2026. */
  box-sizing:border-box;
  width:100%;max-width:1280px;margin:0 auto;
  padding:clamp(26px,4vw,48px) clamp(18px,3vw,44px) clamp(30px,5vw,52px);
  background:linear-gradient(180deg, var(--tf-tafel-1,rgba(10,16,28,.72)) 0%, var(--tf-tafel-2,rgba(6,10,18,.82)) 100%);
  border:1px solid var(--tf-rand,rgba(0,255,255,.16));
  border-radius:20px;
  box-shadow:0 30px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
  font-size:17px;line-height:1.7;
}
@media (max-width:600px){
  .archive-container{padding:22px 16px 28px;border-radius:16px}
}