/* Blog auf sessionario.com – Übersicht und Artikel.
 *
 * Eine Datei für alles, aus demselben Grund wie bei anleitung.css: Zwei
 * Kopien desselben Stils laufen nach dem zweiten Umbau auseinander, und
 * niemand merkt es, bis eine Seite anders aussieht als die andere.
 *
 * Die Farben sind die der Verkaufsseite. Der Blog soll nicht wie ein
 * angeklebter Fremdkörper wirken – wer von der Startseite kommt, soll
 * gar nicht bemerken, dass er den Bereich gewechselt hat.
 */

:root{
/* Cream und Teal - dieselbe Palette wie die Verkaufsseite (Variante C,
   entschieden am 08.09.2026). Begruendung und Kontrastwerte stehen in
   docs/optik-verkaufsseite.md.

   Die Regel, die man hier leicht bricht: --teal ist eine Farbe fuer FLAECHEN
   und grosse Knopfbeschriftungen. Kleiner Text in Teal - Links, Schrittzahlen,
   Beschriftungen - nimmt --teal-tief. Auf Cream bringt das helle Teal nur
   2,7:1, und ein Link damit ist im hellen Raum nicht zu lesen. */
  --teal:#0B8A7E; --teal-tief:#0A6E63; --teal-mist:#E4F2EE; --rand:#E2DACB;
  --text:#333F4E; --navy:#14233F; --grau:#5A6A78; --papier:#F7F2E8; --papier-weiss:#FFFCF6; --karte:#FFFCF6;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--papier); color:var(--text);
  font:17px/1.7 Inter,system-ui,-apple-system,"Segoe UI",Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:Literata,Georgia,"Times New Roman",serif;color:var(--navy);text-wrap:balance}
a{color:var(--teal-tief)}
img{max-width:100%}

/* Zwei Breiten, und der Unterschied ist Absicht:
   Die Übersicht darf breit sein, ein Fließtext nicht. Über etwa 75 Zeichen
   pro Zeile verliert das Auge beim Zeilenwechsel den Anschluss. */
.seite{max-width:1000px; margin:0 auto; padding:26px 20px 90px}
.artikel-seite{max-width:720px}

/* ------------------------------------------------------------- Kopfzeile */

.marke{display:flex; align-items:center; gap:14px; margin-bottom:30px; flex-wrap:wrap}
.marke img{height:32px}
.marke a{font-weight:bold; text-decoration:none; font-size:15px}

/* Hier stand bis zum 02.09.2026 eine zweite Sprachleiste: „DE EN ES" neben
 * dem Zurueck-Verweis, zusaetzlich zu „Deutsch English Español" oben im
 * Kopf.
 *
 * Marcel, mit Bild: „das ist doppelt, DE/EN/ES einmal oben reicht."
 *
 * Sie war nicht nur doppelt, sie war widerspruechlich: Die obere fuehrte
 * von einem Artikel zur BLOG-UEBERSICHT in der anderen Sprache, die untere
 * zum selben Artikel. Zwei Leisten, zwei Ziele, ein Nutzer.
 *
 * Jetzt gibt es nur noch die obere (.lang-btn in blog.css weiter unten bzw.
 * im gemeinsamen Kopf), und auf einem Artikel zeigt sie auf denselben
 * Artikel. _tests/blog.test.mjs schlaegt an, wenn die zweite zurueckkommt.
 */


/* ---------------------------------------------------------- Übersichtsseite */

.blog-kopf{margin-bottom:30px}
.blog-kopf h1{font-family:Georgia,'Times New Roman',serif; font-size:38px; line-height:1.15; margin:0 0 10px}
.blog-kopf p{color:var(--grau); margin:0; max-width:620px}

.liste{display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
/* ------------------------------------------------------- Kopfleiste

   Marcel am 01.09.2026: „wir wollten auch das menu oben lassen mit allen
   menu punkten."

   Er hat recht, und der Grund ist nicht Symmetrie. Der Blog war bis dahin
   eine Sackgasse: Wer von Google auf einen Artikel kam, sah einen Verweis
   auf die Startseite - und musste dort noch einmal suchen. Jetzt fuehrt
   jeder Menuepunkt direkt an die Stelle der Verkaufsseite, um die es geht.

   Die Werte sind bewusst dieselben wie in landing.css. Zwei Kopfleisten,
   die sich um ein paar Pixel unterscheiden, sieht man sofort - man weiss
   nur nicht, woran es liegt. */

.site-top{
  position:sticky; top:0; z-index:10; background:rgba(255,255,255,.94);
  backdrop-filter:blur(6px); border-bottom:1px solid var(--rand);
  display:flex; align-items:center; gap:26px; padding:12px max(20px,4vw);
}
.site-brand{display:flex; align-items:center}
.site-brand img{width:170px; max-height:46px; object-fit:contain; object-position:left center}
.site-nav{display:flex; gap:22px; margin:auto; flex-wrap:wrap}
.site-nav a{color:var(--grau); font-weight:700; text-decoration:none; padding:4px 0; font-size:15px}
.site-nav a:hover{color:var(--teal-tief)}
/* Wo man ist, soll man sehen - sonst wirkt „Blog" wie ein Verweis ins Nichts. */
.site-nav a.ist-hier{color:var(--teal-tief)}
.site-actions{display:flex; align-items:center; gap:14px}
.lang{display:inline-flex; align-items:center; gap:2px; border:1px solid var(--rand);
      border-radius:9px; padding:3px 5px; background:var(--papier-weiss)}
.lang-btn{border:0; background:none; padding:5px 7px; border-radius:6px; text-decoration:none;
          font-weight:700; font-size:13px; color:var(--grau)}
.lang-btn:hover{color:var(--teal-tief)}
.lang-btn.active{background:var(--teal-mist); color:var(--teal-tief)}
.site-actions .btn{padding:11px 18px; font-size:14px}

@media (max-width:900px){
  /* Auf dem Telefon zaehlt der Artikel, nicht das Menue. Die Punkte kaeme
     sonst dreizeilig ueber dem Text zu stehen - die Sprachwahl und die
     beiden Knoepfe bleiben. */
  .site-nav{display:none}
  .site-top{gap:14px; justify-content:space-between}
}

/* ------------------------------------------------- das Bild auf der Kachel

   „Lass uns hier auch die bilder die dazugehören reinnehmen. und so, dass
   die nicht abgeschnitten werden."

   Deshalb `contain` und nicht `cover`. cover fuellt die Flaeche und schneidet
   ab, was nicht hineinpasst - bei Sessi heisst das regelmaessig: der Kopf.
   contain zeigt immer das ganze Bild. Der Rahmen hat 16:9, unsere Bilder auch,
   also entsteht in der Praxis kein Rand - und wenn doch einmal ein Bild in
   einem anderen Format kommt, ist es eben vollstaendig und schmaler statt
   angeschnitten. */

.karte-bild{
  margin:-22px -24px 16px; border-radius:15px 15px 0 0; overflow:hidden;
  background:var(--teal-mist); aspect-ratio:16/9;
}
.karte-bild img{width:100%; height:100%; object-fit:contain; display:block}

.karte{
  display:flex; flex-direction:column; background:var(--papier-weiss);
  border:1px solid var(--rand); border-radius:16px; padding:22px 24px;
  text-decoration:none; color:inherit; transition:border-color .15s, transform .15s;
}
.karte:hover{border-color:var(--teal-tief); transform:translateY(-1px)}
.karte h2{font-family:Georgia,'Times New Roman',serif; font-size:21px; line-height:1.3; margin:0 0 8px}
.karte p{color:var(--grau); margin:0; font-size:15.5px}
.karte .zeile{margin-top:auto; padding-top:14px; color:var(--grau); font-size:13.5px}

.rubrik{
  display:inline-block; background:var(--teal-mist); color:var(--teal-tief);
  border-radius:999px; padding:3px 11px; font-size:12.5px; font-weight:bold;
  letter-spacing:.4px; margin-bottom:12px;
}

.leer{
  background:var(--papier-weiss); border:1px dashed var(--rand); border-radius:16px;
  padding:30px; color:var(--grau); text-align:center;
}

/* ------------------------------------------------------------------ Artikel */

.artikel-kopf{margin-bottom:26px}
.artikel-kopf h1{font-family:Georgia,'Times New Roman',serif; font-size:34px; line-height:1.2; margin:6px 0 12px}
.artikel-kopf .unter{color:var(--grau); font-size:18px; margin:0}
.artikel-kopf .zeile{color:var(--grau); font-size:14px; margin-top:14px}

.artikel{background:var(--papier-weiss); border:1px solid var(--rand); border-radius:18px; padding:30px 34px 34px}
.artikel h2{font-family:Georgia,'Times New Roman',serif; font-size:25px; line-height:1.25; margin:34px 0 10px}
.artikel h3{font-size:19px; margin:26px 0 8px}
.artikel h2:first-child, .artikel h3:first-child{margin-top:0}
.artikel p{margin:14px 0}
.artikel ul, .artikel ol{margin:14px 0; padding-left:22px}
.artikel li{margin:7px 0}
.artikel code{background:var(--teal-mist); border-radius:5px; padding:2px 6px; font-size:15px}

.artikel blockquote{
  margin:22px 0; padding:2px 0 2px 20px; border-left:3px solid var(--teal);
  color:var(--grau); font-style:italic;
}
.artikel figure{margin:24px 0}
/* height:auto ist hier kein Schoenheitsfehler, sondern der Unterschied
   zwischen richtig und verzerrt.
 *
 * Am 01.09.2026 bekamen die Bilder width= und height= als Attribute - richtig
 * so, denn daran erkennt der Browser das Seitenverhaeltnis, bevor das Bild
 * geladen ist, und haelt den Platz frei. Nur: width:100% skaliert die Breite
 * auf die Textspalte herunter, waehrend height="810" als feste Angabe stehen
 * blieb. Aus 1440x810 wurde 720x810 - das Bild wurde in die Laenge gezogen.
 *
 * Marcel sah es sofort: „du hast das Bild langgezogen, das ist ein 16:9 Bild."
 * Er hatte recht, und das Bild war nie das Problem. */
.artikel figure img{width:100%; height:auto; display:block; border:1px solid var(--rand); border-radius:12px; background:var(--karte)}
.artikel figcaption{color:var(--grau); font-size:14px; margin-top:8px}

.artikel table{border-collapse:collapse; width:100%; margin:20px 0; font-size:16px}
.artikel th, .artikel td{border-bottom:1px solid var(--rand); padding:9px 10px; text-align:left; vertical-align:top}
.artikel th{color:var(--grau); font-size:14px; font-weight:bold}

/* Der Kasten, der etwas festhält – dieselbe Rolle wie „merke" in den
   Anleitungen, damit ein Leser die Form wiedererkennt. */
.merke{
  background:var(--teal-mist); border:1px solid #b6d8c8; border-radius:14px;
  padding:18px 22px; margin:24px 0;
}
.merke b{display:block; margin-bottom:5px}

/* -------------------------------------------------------------- Abschluss */

.cta{
  background:var(--papier-weiss); border:1px solid var(--rand); border-radius:18px;
  padding:26px 30px; margin-top:18px; display:flex; gap:20px; align-items:center; flex-wrap:wrap;
}
.cta img{width:82px; flex:0 0 auto}
.cta h2{font-family:Georgia,'Times New Roman',serif; font-size:21px; margin:0 0 6px}
.cta p{margin:0 0 12px; color:var(--grau)}
.btn{
  display:inline-block; background:var(--teal); color:#fff; text-decoration:none;
  border-radius:11px; padding:12px 22px; font-weight:bold;
}
.btn:hover{filter:brightness(.94)}

.weiter{margin-top:34px}
.weiter h2{font-family:Georgia,'Times New Roman',serif; font-size:20px; margin:0 0 12px}

.fuss{margin-top:44px; color:var(--grau); font-size:14.5px; line-height:1.9}
.fuss a{color:var(--grau)}

@media (max-width:560px){
  .blog-kopf h1{font-size:30px}
  .artikel-kopf h1{font-size:27px}
  .artikel{padding:24px 20px 28px}
}