/* =============================================================
   blog.css — Layout für die Blog-Übersicht und die Blog-Einträge
   Gemeinsame Datei für alle Blogseiten: ein Ort für Änderungen.

   Farben, Schriften und Kartenoptik sind aus index.html (Stand der
   Umstellung vom 30.08.2026) übernommen, NICHT aus legal.css: die
   Rechtstexte tragen noch die alte Manrope-Optik, die Startseite die
   editoriale Serife Newsreader. Der Blog folgt der Startseite, weil er
   das erste ist, was ein Besucher nach der Startseite anschaut.

   Zwei Farbwerte kommen hinzu, die es in index.html nicht gibt:
   --kritik  (gedecktes Ziegelrot) markiert im Diagramm den kritischen
             Kommentar. Kein reines Rot — das würde die Beige-Gold-Palette
             zerreißen. Kontrast auf --bg: 5,66:1, also über 4,5:1.
   --mono    für Mikro-Beschriftungen (Datum, Achsen, Kennzahlen).
   ============================================================= */

:root {
  --bg: #f5efe4;
  --bg-tief: #efe7d7;
  --card: #fdfbf6;
  --ink: #1a1814;
  --kopf: #241e16;
  --muted: #5c544a;
  --gold: #b8935a;
  --gold-ink: #7e5f2b;
  --dunkel: #241e16;
  --line: #ddd0b9;
  --line-zart: #e7dcc8;
  --accent-bg: rgba(184, 147, 90, .10);
  --accent-border: rgba(184, 147, 90, .46);
  --kritik: #9d4228;
  --shadow: 0 20px 46px rgba(74, 55, 26, .10);
  --radius: 22px;
  --max: 1180px;
  --spalte: 700px;
  --serif: 'Newsreader', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.58;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

a { color: inherit; text-decoration: none; }

h1, h2, h3 { font-family: var(--serif); margin: 0; color: var(--kopf); font-weight: 500; }

.container { width: min(calc(100% - 40px), var(--max)); margin: 0 auto; }
.spalte { max-width: var(--spalte); }

/* Feine Papierkoernung wie auf der Startseite, damit die grosse
   Beigeflaeche nicht flach wirkt. */
.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .030;
  z-index: 99;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
}

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

.nav {
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: blur(18px);
  background: rgba(245, 239, 228, .86);
  border-bottom: 1px solid var(--line-zart);
}
.nav-inner { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.brand { display: inline-flex; align-items: center; gap: 12px; font-family: var(--serif); font-weight: 500; font-size: 23px; color: var(--kopf); }
.brand-mark {
  width: 40px; height: 40px; border-radius: 14px;
  border: 1px solid var(--accent-border);
  background: linear-gradient(145deg, rgba(184,147,90,.20), rgba(255,255,255,.55));
  position: relative;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.brand-mark:before {
  content: ""; position: absolute; width: 17px; height: 14px;
  border: 2px solid var(--kopf); border-right-color: rgba(36,30,22,.28);
  border-radius: 9px 6px 9px 9px; left: 8px; top: 9px; transform: rotate(-4deg);
}
.brand-mark:after {
  content: ""; position: absolute; width: 9px; height: 2px; background: var(--gold-ink);
  transform: rotate(43deg); right: 5px; bottom: 8px; border-radius: 10px;
  box-shadow: -13px -1px 0 -0.5px rgba(36,30,22,.72);
}
.nav-links { display: flex; align-items: center; gap: 25px; color: var(--muted); font-size: 14px; font-weight: 500; }
.nav-links a:hover, .nav-links a:focus { color: var(--gold-ink); }
.nav-links a.aktiv { color: var(--gold-ink); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 20px; border-radius: 14px;
  border: 1px solid transparent; font-weight: 600; letter-spacing: -.01em;
  transition: .25s ease; cursor: pointer; gap: 9px; font-size: 15px;
  font-family: var(--sans);
}
.btn-primary {
  color: #f7f2e8; background: var(--dunkel);
  border-color: var(--dunkel);
  box-shadow: 0 12px 28px rgba(74, 55, 26, .18);
}
.btn-primary:hover { transform: translateY(-2px); background: #3a3025; border-color: #3a3025; }
.btn-secondary { border-color: var(--line); background: rgba(255,255,255,.5); color: var(--kopf); }
.btn-secondary:hover { background: var(--accent-bg); border-color: var(--accent-border); transform: translateY(-2px); }

.kicker { display: block; color: var(--gold-ink); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .11em; }

/* ------------------------------------------------------ Blog-Übersicht */

.blog-kopf { padding: 92px 0 44px; }
.blog-kopf h1 { font-size: clamp(42px, 5.4vw, 68px); line-height: 1.05; letter-spacing: -.02em; margin-top: 14px; max-width: 820px; font-weight: 400; }
.blog-kopf p { color: var(--muted); font-size: 18px; margin: 26px 0 0; max-width: 660px; }
/* Die Brotkrume ist auch ein <p> und wuerde sonst die 18px und den
   fehlenden Unterabstand der Regel darueber erben. */
.blog-kopf .pfad { font-size: 12px; margin: 0 0 22px; }

.blog-liste { padding: 20px 0 120px; display: grid; gap: 22px; }

.blog-karte {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 34px;
  align-items: center;
  background: linear-gradient(180deg, #fffefb, #fbf6ec);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
  transition: .25s ease;
}
.blog-karte:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--accent-border); }
.blog-karte .bild {
  border: 1px solid var(--line-zart);
  border-radius: 14px;
  background: #fffdf8;
  padding: 12px;
}
.blog-karte .bild svg { display: block; width: 100%; height: auto; }
.blog-karte h2 { font-size: 30px; line-height: 1.16; letter-spacing: -.015em; margin: 12px 0 0; }
.blog-karte p { color: var(--muted); font-size: 16px; margin: 14px 0 0; }
.blog-karte .weiter { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; color: var(--gold-ink); font-weight: 600; font-size: 15px; }
.blog-karte:hover .weiter { gap: 12px; }

.meta {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--muted);
  display: flex; flex-wrap: wrap; gap: 14px;
}
.meta span:not(:first-child):before { content: "\2014"; margin-right: 12px; color: var(--gold); }

/* ------------------------------------------------- Kostenlose Ressourcen */
/* Die Seite /ressourcen/ ist der Einstieg, der auf der Startseite vorher
   gefehlt hat: Auf Bildschirmen unter 1000px blendet index.html die
   Navigationsleiste komplett aus, unter 720px auch den Knopf -- auf dem
   Handy gab es damit keinen Weg vom Angebot zum Blog. Diese Seite wird
   deshalb aus dem Fussbereich UND aus einem eigenen Abschnitt der
   Startseite verlinkt, nicht nur aus der Navigation. */

.res-liste { padding: 12px 0 30px; display: grid; gap: 18px; }

.res-karte {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 24px;
  align-items: start;
  background: linear-gradient(180deg, #fffefb, #fbf6ec);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
  transition: .25s ease;
}
.res-karte:hover { border-color: var(--accent-border); box-shadow: var(--shadow); }
.res-icon {
  width: 58px; height: 58px; border-radius: 16px;
  border: 1px solid var(--accent-border);
  background: linear-gradient(145deg, rgba(184,147,90,.20), rgba(255,255,255,.55));
  display: grid; place-items: center;
}
.res-icon svg { width: 26px; height: 26px; fill: var(--gold-ink); display: block; }
.res-marke {
  display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold-ink);
  background: var(--accent-bg); border: 1px solid var(--accent-border);
  padding: 5px 10px; border-radius: 999px;
}
.res-karte h2 { font-size: 27px; letter-spacing: -.015em; margin: 14px 0 0; }
.res-karte p { color: var(--muted); font-size: 16.5px; margin: 12px 0 0; max-width: 72ch; }
.res-weiter {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px; margin-top: 12px;
  color: var(--gold-ink); font-weight: 600; font-size: 15px;
}
.res-weiter:hover { gap: 13px; color: #5f4620; }

.res-beitraege { padding: 34px 0 120px; }
.section-kopf { margin-bottom: 24px; }
.section-kopf h2 { font-size: clamp(28px, 3vw, 38px); letter-spacing: -.02em; margin-top: 12px; }
.res-beitraege .blog-karte h3 { font-family: var(--serif); font-size: 27px; font-weight: 500; line-height: 1.18; letter-spacing: -.015em; margin: 12px 0 0; color: var(--kopf); }

/* --------------------------------------------------------- Blog-Eintrag */

.post { padding: 76px 0 40px; }
.pfad { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--muted); margin-bottom: 26px; }
.pfad a:hover { color: var(--gold-ink); }
.pfad i { font-style: normal; color: var(--gold); margin: 0 8px; }

.post h1 {
  font-size: clamp(34px, 4.2vw, 53px);
  line-height: 1.06;
  letter-spacing: -.022em;
  font-weight: 400;
  max-width: 20ch;
  margin-top: 14px;
}
.post .anriss {
  font-family: var(--serif);
  font-size: clamp(20px, 2.1vw, 25px);
  line-height: 1.46;
  color: var(--gold-ink);
  margin: 28px 0 0;
  max-width: 44ch;
}
.post .kopf-meta { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line-zart); max-width: var(--spalte); }

.inhalt { padding: 0 0 40px; }
.inhalt p { color: var(--ink); font-size: 18px; line-height: 1.68; margin: 0 0 22px; }
.inhalt h2 { font-size: clamp(28px, 3.1vw, 37px); line-height: 1.14; letter-spacing: -.015em; margin: 58px 0 20px; }
.inhalt h3 { font-size: 22px; letter-spacing: -.01em; margin: 34px 0 12px; }
.inhalt a { color: var(--gold-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.inhalt a:hover { color: #5f4620; }
.inhalt strong { font-weight: 600; color: var(--kopf); }
.inhalt em { font-style: italic; }

/* Aufzaehlung im Fliesstext: Gedankenstrich in Gold statt Punkt, gleiche
   Optik wie in den Rechtstexten, aber mit der Serife der Startseite. */
.inhalt ul { margin: 0 0 22px; padding: 0; list-style: none; display: grid; gap: 14px; }
.inhalt ul li { position: relative; padding-left: 30px; font-size: 18px; line-height: 1.62; }
.inhalt ul li:before { content: "\2014"; position: absolute; left: 0; top: 0; color: var(--gold-ink); }

/* ------------------------------------------- Signal-Massnahme-Tabelle */
/* Breite Inhalte scrollen in ihrem eigenen Kasten, nie die Seite. */
.tabelle-huelle { margin: 34px 0 40px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.signal-tabelle {
  width: 100%; min-width: 520px;
  border-collapse: separate; border-spacing: 0;
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  background: linear-gradient(180deg, #fffefb, #fbf6ec);
  font-size: 16px;
}
.signal-tabelle th {
  text-align: left; padding: 14px 18px;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink);
  background: var(--accent-bg);
  border-bottom: 1px solid var(--line);
}
.signal-tabelle td { padding: 16px 18px; vertical-align: top; border-bottom: 1px solid var(--line-zart); }
.signal-tabelle tr:last-child td { border-bottom: 0; }
.signal-tabelle td.aussage { font-family: var(--serif); font-size: 18px; color: var(--kopf); }
.signal-tabelle td.signal { color: var(--muted); }
.signal-tabelle td.massnahme { color: var(--gold-ink); font-weight: 600; }

/* ------------------------------------ KI gegen Mensch, zwei Bloecke */
/* Zwei Farbtoene, damit die Trennung ohne Lesen erkennbar ist. Das Blaugruen
   ist der einzige kalte Ton der Seite und bleibt deshalb gedeckt -- es soll
   sich von der Messing-Palette abheben, nicht mit ihr streiten.
   Kontraste gemessen, nicht geschaetzt: #2f4f4a auf dem Blaugruen-Grund
   7,7:1, Titel 8,8:1; #7e5f2b auf dem Messing-Grund 5,2:1, Titel 9,6:1. */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 34px 0 40px; }
.duo-block { border-radius: var(--radius); padding: 26px 28px; border: 1px solid; }
.duo-block.ki {
  background: linear-gradient(180deg, rgba(47,79,74,.11), rgba(47,79,74,.035));
  border-color: rgba(47,79,74,.34);
}
.duo-block.mensch {
  background: linear-gradient(180deg, rgba(184,147,90,.13), rgba(184,147,90,.04));
  border-color: var(--accent-border);
}
.duo-marke {
  display: inline-block; font-family: var(--mono); font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase;
}
.duo-block.ki .duo-marke { color: #2f4f4a; }
.duo-block.mensch .duo-marke { color: var(--gold-ink); }
.duo-block h3 { font-size: 23px; letter-spacing: -.01em; margin: 12px 0 0; }
.duo-block.ki h3 { color: #2a4642; }
.duo-block.mensch h3 { color: #4a3a1c; }
.duo-block ul { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.duo-block ul li { position: relative; padding-left: 26px; font-size: 16.5px; line-height: 1.55; }
.duo-block ul li:before { content: "\2014"; position: absolute; left: 0; top: 0; }
.duo-block.ki ul li:before { color: #2f4f4a; }
.duo-block.mensch ul li:before { color: var(--gold-ink); }
.duo-block p { font-size: 15.5px; color: var(--muted); margin: 16px 0 0; }

/* Zwischenruf: die eine Zeile, die haengen bleiben soll. */
.zwischenruf {
  margin: 44px 0;
  padding: 4px 0 4px 26px;
  border-left: 2px solid var(--gold);
  font-family: var(--serif);
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.4;
  letter-spacing: -.01em;
  color: var(--kopf);
}

/* Selbstcheck-Kasten: gleiche Optik wie die Garantie-Karte auf der
   Startseite, damit der Kasten nicht wie ein Fremdkoerper wirkt. */
.kasten {
  margin: 46px 0;
  background: linear-gradient(180deg, rgba(184,147,90,.10), rgba(184,147,90,.04));
  border: 1px solid var(--accent-border);
  border-radius: var(--radius);
  padding: 30px 32px;
}
.kasten h2 { margin: 0 0 6px; font-size: 25px; color: var(--gold-ink); }
.kasten ol { margin: 18px 0 0; padding: 0 0 0 4px; list-style: none; counter-reset: schritt; display: grid; gap: 13px; }
.kasten ol li { counter-increment: schritt; position: relative; padding-left: 42px; font-size: 17px; }
.kasten ol li:before {
  content: counter(schritt, decimal-leading-zero);
  position: absolute; left: 0; top: 5px;
  font-family: var(--mono); font-size: 12px; color: var(--gold-ink);
  letter-spacing: .04em;
}
.kasten ol + p { margin-top: 22px; }
.kasten p { font-size: 17px; }
.kasten p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------- Diagramm */

.figur {
  margin: 40px 0 46px;
  position: relative;
  background: linear-gradient(150deg, #fffdf8, #f8f1e3);
  border: 1px solid var(--accent-border);
  border-radius: 28px;
  box-shadow: var(--shadow);
  padding: 30px 32px 26px;
}
/* Eckwinkel wie am Content-AI-Teaser der Startseite: Andeutung eines
   Ausschnitts aus etwas Groesserem. */
.figur .ecke { position: absolute; width: 18px; height: 18px; border: 1px solid var(--gold); opacity: .55; }
.figur .ecke.lo { left: 14px;  top: 14px;    border-right: 0; border-bottom: 0; }
.figur .ecke.ro { right: 14px; top: 14px;    border-left: 0;  border-bottom: 0; }
.figur .ecke.lu { left: 14px;  bottom: 14px; border-right: 0; border-top: 0; }
.figur .ecke.ru { right: 14px; bottom: 14px; border-left: 0;  border-top: 0; }

.figur-kopf {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  font-size: 11px; font-weight: 600; letter-spacing: .19em;
  text-transform: uppercase; color: var(--gold-ink);
  margin-bottom: 18px;
}
.figur svg { display: block; width: 100%; height: auto; }

.legende { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 16px; font-size: 12.5px; color: var(--muted); }
.legende span { display: inline-flex; align-items: center; gap: 8px; }
.legende b { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.legende b.balken { background: var(--gold); opacity: .55; }
.legende b.spitze  { background: var(--gold-ink); }
.legende b.punkt  { background: var(--kritik); border-radius: 50%; }
.legende b.punkt-eckig { background: var(--kritik); border-radius: 2px; width: 6px; height: 12px; }

figcaption {
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--line-zart);
  font-size: 14.5px; color: var(--muted);
}

/* Diagramm-Beschriftungen im SVG */
.d-achse   { stroke: var(--line); stroke-width: 1; }
.d-raster  { stroke: var(--line-zart); stroke-width: 1; }
.d-balken  { fill: var(--gold); fill-opacity: .48; }
.d-spitze  { fill: var(--gold-ink); }
.d-label   { font-family: var(--mono); font-size: 13px; fill: #5c544a; }
/* Zwei Skalen, zwei Beschriftungsfarben: links Aufrufe in Grau, rechts die
   Like-Zahl in Ziegelrot. Der Leser soll die rechte Achse dem roten Balken
   zuordnen koennen, ohne die Legende zu lesen. */
.d-achstitel   { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; fill: #5c544a; }
.d-achstitel-r { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; fill: #9d4228; }
.d-skala   { font-family: var(--mono); font-size: 11.5px; fill: #5c544a; }
.d-skala-r { font-family: var(--mono); font-size: 11.5px; fill: #9d4228; }
.d-wertchen { font-family: var(--mono); font-size: 11px; fill: #5c544a; }
.d-likezahl { font-family: var(--mono); font-size: 12.5px; font-weight: 500; fill: #9d4228; }
.d-wert    { font-family: var(--mono); font-size: 13px; fill: #5c544a; }
.d-kritik  { fill: var(--kritik); }
.d-kritik-text { font-family: var(--mono); font-size: 14px; font-weight: 500; fill: #9d4228; }
.d-ruf     { font-family: 'Inter', sans-serif; font-size: 13px; fill: #9d4228; }
.d-hinweis { font-family: 'Inter', sans-serif; font-size: 13px; fill: #5c544a; }

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

.cta {
  margin: 20px 0 0;
  background: linear-gradient(180deg, #fffefb, #fbf6ec);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.cta h2 { font-size: 28px; letter-spacing: -.015em; margin: 10px 0 0; }
.cta p { color: var(--muted); font-size: 17px; margin: 14px 0 0; max-width: 62ch; }
.cta .aktionen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* Teilen-Zeile. Der LinkedIn-Knopf zeigt auf die Teilen-Adresse von LinkedIn
   und funktioniert damit auch ohne eigenes Profil: LinkedIn nimmt die Adresse
   dieses Beitrags entgegen und legt sie dem Nutzer als Entwurf vor. Sobald es
   eine Sistenta-Unternehmensseite gibt, wird im Fussbereich der vorbereitete
   Profil-Verweis eingesetzt (Kommentar dort). Der Satz nannte bis zum
   14.09.2026 Commentory -- die Datei ist beim Blog-Umzug mitgekommen.
   Datenschutz: es wird nichts
   nachgeladen, die Verbindung zu LinkedIn entsteht erst beim Klick. */
.teilen {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 44px; padding-top: 22px;
  border-top: 1px solid var(--line-zart);
}
.teilen .titel { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-ink); }
.teilen-knopf {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 0 16px; border-radius: 12px;
  border: 1px solid var(--line); background: rgba(255,255,255,.5);
  color: var(--kopf); font-size: 14.5px; font-weight: 600;
  text-decoration: none;
  transition: .25s ease;
}
.teilen-knopf:hover { background: var(--accent-bg); border-color: var(--accent-border); transform: translateY(-2px); }
.teilen-knopf svg { width: 18px; height: 18px; fill: currentColor; display: block; }

.post-schluss { padding: 0 0 110px; }
.autor { display: flex; align-items: center; gap: 14px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line-zart); color: var(--muted); font-size: 14.5px; }
.autor .kuerzel {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  border: 1px solid var(--accent-border);
  background: linear-gradient(145deg, rgba(184,147,90,.22), rgba(255,255,255,.6));
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 18px; color: var(--kopf);
}
.autor strong { color: var(--kopf); font-weight: 600; }

/* ----------------------------------------------------------- Fußbereich */

.footer-gross { border-top: 1px solid var(--line); padding-top: 54px; overflow: hidden; background: var(--bg-tief); }
.wortmarke { display: block; width: 100%; height: auto; margin-bottom: 8px; user-select: none; }
.wortmarke text {
  font-family: var(--serif); font-weight: 500; font-size: 150px;
  fill: none; stroke: rgba(36, 30, 22, .20); stroke-width: 1;
}
.footer-spalten { display: grid; grid-template-columns: 1fr auto auto; gap: 40px 54px; align-items: start; padding: 46px 0 40px; }
.footer-text { color: var(--muted); font-size: 14px; max-width: 380px; margin: 16px 0 0; }
/* Profil-Verweis im Fussbereich. Kein Widget, kein Skript, kein Nachladen:
   ein Verweis, der erst beim Klick eine Verbindung zu LinkedIn aufbaut.
   Deshalb auch kein Fall fuer die Datenschutzerklaerung. */
.footer-sozial { margin-top: 18px; }
.sozial-knopf {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 15px; border-radius: 12px;
  border: 1px solid var(--line); background: rgba(255,255,255,.45);
  color: var(--kopf); font-size: 14px; font-weight: 500;
  transition: .25s ease;
}
.sozial-knopf:hover { background: var(--accent-bg); border-color: var(--accent-border); transform: translateY(-2px); }
.sozial-knopf svg { width: 17px; height: 17px; fill: currentColor; display: block; flex: none; }
.footer-rechts { display: grid; gap: 2px; justify-items: end; text-align: right; }
.footer-titel { color: var(--gold-ink); font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; margin-bottom: 3px; }
.footer-rechts a { color: var(--muted); font-size: 14px; min-height: 44px; display: inline-flex; align-items: center; }
.footer-rechts a:hover { color: var(--kopf); }
.footer-schluss {
  border-top: 1px solid var(--line); padding: 20px 0 34px;
  color: var(--muted); font-size: 12.5px;
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
}

/* Kein .reveal im Blog. Die Startseite blendet Bloecke per
   IntersectionObserver ein (opacity:0 bis JavaScript sie freigibt); im Blog
   ist genau das am 01.09.2026 aufgefallen: Auf dem Server war das Diagramm
   beim ersten Abruf unsichtbar, lokal nicht. Lesbarer Inhalt haengt hier
   nicht an einem Beobachter. */

/* ------------------------------------------------------------- Schmalbild */

@media (max-width: 1000px) {
  .nav-links { display: none; }
  .blog-karte { grid-template-columns: 1fr; gap: 22px; }
  .footer-spalten { grid-template-columns: 1fr auto; }
}
@media (max-width: 720px) {
  .container { width: min(calc(100% - 24px), var(--max)); }
  .blog-kopf { padding: 56px 0 30px; }
  .post { padding: 46px 0 30px; }
  .post h1 { max-width: none; }
  .inhalt p, .inhalt ul li { font-size: 17px; }
  .inhalt h2 { margin-top: 44px; }
  .figur { padding: 22px 18px 20px; border-radius: 20px; }
  .kasten { padding: 24px 22px; }
  .duo { grid-template-columns: 1fr; }
  .duo-block { padding: 22px 20px; }
  .cta { padding: 26px 22px; }
  .footer-spalten { grid-template-columns: 1fr; gap: 30px; padding: 34px 0 34px; }
  .res-karte { grid-template-columns: 1fr; gap: 18px; padding: 24px 22px; }
  .footer-rechts { justify-items: start; text-align: left; }
  .nav .btn { display: none; }
}