/* ============================================================
   JG Training · Julia Grebe – Stylesheet (neues Design)
   Basis: Claude-Design-Entwurf "Website JG Training.dc.html"
   Schriften: Bricolage Grotesque (Überschriften), Karla (Fließtext),
   lokal gehostet (keine Verbindung zu Google).

   VERSION: 2026-08-23c
   WICHTIG: Wer diese Datei aendert, muss die Versionsnummer hier UND in
   ALLEN HTML-Seiten hochsetzen, derzeit 25 Stueck ohne die stillgelegte
   aktuelles.html (dort steht sie als href="css/stil.css?v=2026-08-21",
   in 404.html mit fuehrendem Schraegstrich).
   Ohne das Hochsetzen sehen Besucher nach Aenderungen die alte Fassung aus
   dem Zwischenspeicher des Browsers.
   ============================================================ */

/* ---------- Schriften (lokal, variable Fonts) ---------- */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/bricolage-grotesque-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/bricolage-grotesque-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Karla';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('../assets/fonts/karla-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Karla';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('../assets/fonts/karla-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../assets/fonts/karla-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../assets/fonts/karla-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Farb- und Schrift-Token ---------- */
:root {
  --gruen: #4f7344;
  --gruen-dunkel: #2f4529;
  --text: #414a3d;
  --text-dunkel: #2e352a;
  --text-leise: #69735f;
  --papier: #fdfcfa;
  --creme: #f6f2e8;
  --creme-tief: #efe9d9;
  --linie: #e7e1d3;
  --linie-creme: #ddd5c2;
  --akzent: #c9bf9f;
  --sterne: #a87521;
  --btn-hell: #f4f0e6;
  --unterstrich: #bfd2b7;
  --font-head: 'Bricolage Grotesque', 'Segoe UI', Arial, sans-serif;
  --font-body: 'Karla', 'Segoe UI', Arial, sans-serif;
}

/* ---------- Grundlagen ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--text);
  font: 400 18px/1.8 var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; }
a { color: var(--gruen); text-decoration: none; }
a:hover { color: var(--gruen-dunkel); }
p { margin: 0; }

h1, h2, h3 { font-family: var(--font-head); color: var(--gruen-dunkel); margin: 0; text-wrap: pretty; }
h1 { font-size: 52px; line-height: 1.08; font-weight: 600; letter-spacing: -.025em; color: var(--gruen); }
h2 { font-size: 34px; line-height: 1.14; font-weight: 600; letter-spacing: -.024em; }
h3 { font-size: 23px; line-height: 1.25; font-weight: 600; letter-spacing: -.018em; }

.container { max-width: 1180px; margin: 0 auto; padding: 0 56px; }

/* Fließtext-Blöcke */
.prosa { display: flex; flex-direction: column; gap: 20px; }
.prosa p { text-wrap: pretty; }
/* Blocksatz mit Silbentrennung: ruhige rechte Kante ohne gezerrte Wortabstände */
.prosa p, .blocksatz {
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 7 4 3;
}
.gross { font: 500 22px/1.6 var(--font-body); color: var(--gruen-dunkel); }
.leitsatz { font: 500 28px/1.45 var(--font-head); letter-spacing: -.018em; color: var(--gruen-dunkel); }
.untertitel { font: 400 25px/1.35 var(--font-head); letter-spacing: -.012em; color: #3b4a35; }

/* Kicker-Label (z. B. "In der Gruppe") */
.kicker {
  font: 600 12px/1 var(--font-body);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gruen);
}

/* Akzentlinie unter dem Hero-Untertitel */
.akzentlinie { width: 56px; height: 2px; background: var(--akzent); border: 0; margin: 0; }

/* ---------- Kopfbereich / Navigation ---------- */
.topbar { background: var(--gruen); }
.topbar__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding-top: 16px;
  padding-bottom: 16px;
  position: relative;
}
.topbar__logo { display: block; flex: none; }
.topbar__logo img { width: auto; height: 64px; display: block; object-fit: contain; object-position: left; }

.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 26px; }
.nav a {
  display: inline-block;
  font: 400 15px/1 var(--font-body);
  color: #e9f1e4;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: #ffffff; }
.nav a[aria-current="page"] { color: #ffffff; border-bottom-color: #ffffff; }

.nav-toggle { display: none; background: none; border: 0; padding: 10px; cursor: pointer; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: #fff; margin: 5px 0; }

/* ---------- Abschnitte ---------- */
.sek { padding: 64px 0; }
.sek--linie { border-top: 1px solid var(--linie); }
.sek--creme { background: var(--creme); }

/* Grids */
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.g2--mitte { align-items: center; }
.g2--breit { grid-template-columns: 1.18fr 1fr; gap: 70px; }
.g2--text { grid-template-columns: 1.05fr 1fr; }
/* Foto-Hero mit überlagerter Überschrift (Angebotsseiten) */
.held { position: relative; border-radius: 4px; overflow: hidden; }
.held img { display: block; width: 100%; height: 460px; object-fit: cover; }
.held::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(31, 42, 28, .74) 0%, rgba(31, 42, 28, .42) 46%, rgba(31, 42, 28, 0) 74%); }
.held__text { position: absolute; left: 48px; bottom: 42px; right: 48px; }
.held__text .kicker { color: #dfeada; }
.held__text h1 { margin-top: 12px; color: #f7f4ec; max-width: 16ch; }
@media (max-width: 720px) {
  .held img { height: 340px; }
  .held__text { left: 22px; bottom: 22px; right: 22px; }
}
/* Geteilter Hero: Farbfläche mit Überschrift links, Foto rechts */
.held--geteilt { display: grid; grid-template-columns: 1.2fr 1fr; background: var(--gruen-dunkel); }
.held--geteilt::before { content: none; }
.held--geteilt .held__panel { align-self: center; padding: 52px 48px; }
.held--geteilt .held__panel .kicker { color: #dfeada; }
.held--geteilt .held__panel h1 { margin-top: 12px; color: #f7f4ec; }
@media (max-width: 720px) {
  .held--geteilt { grid-template-columns: 1fr; }
  .held--geteilt img { height: 300px; }
  .held--geteilt .held__panel { padding: 32px 24px; }
}

/* Über-mich-Erzählung: Foto rechts oben, Text umfließt es und läuft darunter auf voller Breite weiter */
.story__foto { float: right; width: 460px; margin: 0 0 28px 48px; }
.story__foto--klein { width: 400px; }
.story p { margin: 0 0 18px; text-align: justify; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 7 4 3; text-wrap: pretty; }
/* Leitsatz einzeilig, Schrift skaliert bei schmalen Fenstern mit */
.story .leitsatz--einzeilig { white-space: nowrap; font-size: min(23px, calc((100vw - 110px) / 43)); }
.story p:last-of-type { margin-bottom: 0; }
.g3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 44px; }
.seitentitel-grid { display: grid; grid-template-columns: 300px 1fr; gap: 56px; align-items: start; }
.themen-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px 64px; margin-top: 44px; }
.themen-grid h3 + p { margin-top: 12px; font-size: 17px; line-height: 1.75; }
/* Abschlusszeile einer Themenkarte (Zielgruppe), steht bewusst allein */
.themen-grid .thema-abschluss { margin-top: 8px; font-size: 17px; line-height: 1.75; color: var(--text-leise); }

.schmal { max-width: 74ch; }
.schmal-66 { max-width: 66ch; }
.schmal-70 { max-width: 70ch; }

/* ---------- Fotos mit Creme-Rahmen (versetzter Hintergrund) ---------- */
.rahmen { position: relative; }
.rahmen::before { content: ""; position: absolute; background: var(--creme-tief); }
.rahmen img { position: relative; display: block; width: 100%; object-fit: cover; }
.rahmen--tl { padding: 18px 0 0 18px; }
.rahmen--tl::before { left: 0; top: 0; right: 34px; bottom: 34px; }
.rahmen--tr { padding: 18px 18px 0 0; }
.rahmen--tr::before { right: 0; top: 0; left: 34px; bottom: 34px; }
.rahmen--bl { padding: 0 0 18px 18px; }
.rahmen--bl::before { left: 0; bottom: 0; right: 34px; top: 34px; }

/* Bildhöhen */
.bild-430 { height: 430px; }
/* Hero-Bild schließt auf Desktop bündig mit der Unterkante des Textblocks ab */
.g2--fuell { align-items: stretch; }
@media (min-width: 1001px) {
  img.bild-fuell { height: 100%; }
}
.bild-420 { height: 420px; }
.bild-360 { height: 360px; }
.bild-340 { height: 340px; }
.bild-320 { height: 320px; }
.bild-300 { height: 300px; }

/* Bild über volle Breite */
.banner { overflow: hidden; background: var(--creme-tief); }
.banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.banner--420 { height: 420px; }
.banner--400 { height: 400px; }
.banner--560 { height: 560px; }

/* Unterschrift */
.unterschrift { display: block; width: 200px; margin: 18px 0 0 6px; opacity: .82; transform: rotate(-2deg); }
.sig-anim { display: inline-block; }
.sig-anim.writing .signatur { animation: sigwrite 2s cubic-bezier(.22, .61, .36, 1) both; }
@keyframes sigwrite { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .sig-anim.writing .signatur { animation: none; } }

/* ---------- Buttons und Links ---------- */
.btn {
  display: inline-block;
  background: var(--gruen);
  color: #f6f3ea;
  font: 600 16px/1 var(--font-body);
  letter-spacing: .02em;
  padding: 18px 30px;
  border-radius: 3px;
  border: 0;
  cursor: pointer;
}
.btn:hover { background: var(--gruen-dunkel); color: #ffffff; }
.btn--hell { background: var(--btn-hell); color: var(--gruen-dunkel); font-size: 17px; padding: 21px 36px; }
.btn--hell:hover { background: #ffffff; color: var(--gruen-dunkel); }

.pfeillink {
  display: inline-block;
  font: 600 16px/1.4 var(--font-body);
  color: var(--gruen);
  box-shadow: 0 1px 0 var(--unterstrich);
}
.pfeillink:hover { color: var(--gruen-dunkel); box-shadow: 0 1px 0 var(--gruen); }
.pfeillink--gross { font-size: 22px; }

/* Fester Zeilenumbruch in Überschriften nur auf breiten Bildschirmen;
   unterhalb 720px übernimmt der natürliche Umbruch, sonst droht eine dritte Zeile */
@media (max-width: 720px) { .umbruch-breit { display: none; } }
/* Kleinere H1 fuer die Coaching-Seite: die Textspalte im Grid ist 540px breit,
   "Manchmal braucht man jemanden," passt gemessen erst ab 34px in eine Zeile
   (bei 36px braucht sie 556px). Unter 720px gilt weiter die normale Mobilgroesse. */
@media (min-width: 721px) { .h1--klein { font-size: 34px; } }

.textlink { color: var(--gruen); box-shadow: 0 1px 0 var(--unterstrich); }
.textlink:hover { color: var(--gruen-dunkel); box-shadow: 0 1px 0 var(--gruen); }

/* ---------- Grüner CTA-Streifen ---------- */
/* Dunkler als der Footer, damit sich beide klar voneinander abgrenzen */
.ctaband { background: var(--gruen-dunkel); }
.ctaband__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 56px;
  padding-top: 78px;
  padding-bottom: 78px;
}
.ctaband h2 { color: #f7f4ec; font-size: 42px; letter-spacing: -.028em; max-width: 17ch; }
/* Einzeiliger CTA-Satz: Schrift skaliert mit der Bildschirmbreite, bricht nie um */
.ctaband h2.ctaband--einzeilig { max-width: none; white-space: nowrap; font-size: min(42px, calc((100vw - 90px) / 16.6)); }
/* Langer Banner-Satz neben Button (Vortrag): einzeilig, skaliert mit */
.ctaband h2.band-satz-lang { max-width: none; white-space: nowrap; font-size: min(34px, calc((100vw - 100px) / 23.5)); }
@media (min-width: 1001px) { .ctaband h2.band-satz-lang { font-size: min(34px, calc((100vw - 330px) / 23.5)); } }
/* Flattersatz mit Silbentrennung fuer schmale Spalten */
.silben { -webkit-hyphens: auto; hyphens: auto; }
.ctaband p { margin-top: 16px; font: 400 18px/1.7 var(--font-body); color: #dfeada; max-width: 54ch; }
.ctaband .btn--hell { flex: none; }

/* ---------- Stimmen (Rezensionen) ---------- */
.stimmen-intro { margin-top: 10px; font: 400 17px/1.6 var(--font-body); color: var(--text-leise); }
.stimmen-grid { margin-top: 44px; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.stimmen-grid--3 { grid-template-columns: 1fr 1fr 1fr; gap: 44px; }
.stimme__kopf { display: flex; align-items: center; gap: 14px; }
.stimme__avatar {
  width: 44px; height: 44px; flex: none;
  border-radius: 50%;
  background: var(--gruen);
  color: #f6f3ea;
  display: flex; align-items: center; justify-content: center;
  font: 600 18px/1 var(--font-head);
}
.stimme__name { font: 600 16px/1.2 var(--font-body); color: var(--gruen-dunkel); }
.stimme__sterne { font: 400 14px/1.2 var(--font-body); color: var(--sterne); letter-spacing: .09em; margin-top: 5px; }
.stimme p { margin-top: 20px; font: 400 17.5px/1.75 var(--font-body); text-wrap: pretty; }
.stimmen-grid--3 .stimme p { font-size: 16.5px; }
.stimmen-mehr { margin-top: 38px; }

/* ---------- Partnerlogos ---------- */
.partner { display: flex; align-items: center; justify-content: space-between; gap: 36px; flex-wrap: wrap; padding-top: 44px; padding-bottom: 44px; }
.partner img { width: auto; height: 66px; object-fit: contain; }
.partner img.siegel { height: 72px; }
.partner img.logo-gross { height: 86px; }
.partner img.logo-flach { height: 48px; }

/* ---------- Selbstcheck: fünf Bereiche ---------- */
.bereiche { margin-top: 40px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 36px; }
.bereich { border-top: 2px solid var(--gruen); padding-top: 18px; }
.bereich__nr { font: 600 13px/1 var(--font-body); letter-spacing: .14em; color: #a89c78; }
.bereich__titel { margin-top: 14px; font: 600 21px/1.3 var(--font-head); letter-spacing: -.018em; color: var(--gruen-dunkel); text-wrap: pretty; }

/* ---------- Einbettungen (Brevo, Selbstcheck-Tool) ---------- */
/* Zwei-Klick-Lösung: Ersatzkarte, solange eine fremde Einbettung nicht geladen ist.
   Zweck: Vor dem Klick geht nichts an Brevo. Die Karte steht an der Stelle,
   an der sonst der Kalender steht, und verschwindet beim Laden. */
.zweiklick {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 18px;
  min-height: 340px;
  padding: 36px 34px;
  background: var(--creme);
  border: 1px solid var(--linie-creme);
  border-radius: 4px;
}
.zweiklick__inhalt { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.zweiklick p { max-width: 56ch; font-size: 17px; }
.zweiklick__klein { font-size: 14.5px; color: var(--text-leise); }

/* Unscharfe Andeutung im Hintergrund, damit die Karte nicht leer wirkt.
   WICHTIG: Das ist eine rein oertlich gezeichnete Attrappe, KEIN geladener
   Kalender. Ein echtes, nur unscharf gestelltes iframe wuerde die Daten
   uebertragen und damit den ganzen Zweck aufheben. */
.zweiklick__vorschau {
  position: absolute;
  inset: 0;
  padding: 26px 30px;
  filter: blur(5px);
  opacity: .5;
  pointer-events: none;
  user-select: none;
}
.zweiklick__vorschau::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(246,242,232,.55) 0%, rgba(246,242,232,.85) 100%);
}
.vk-kopf { height: 30px; width: 46%; border-radius: 4px; background: var(--gruen); opacity: .55; }
.vk-zeile { height: 11px; width: 62%; border-radius: 3px; background: rgba(59,74,53,.3); margin-top: 14px; }
.vk-gitter { display: grid; grid-template-columns: repeat(7, 1fr); gap: 9px; margin-top: 20px; max-width: 430px; }
.vk-tag { height: 30px; border-radius: 4px; background: rgba(59,74,53,.16); }
.vk-tag--frei { background: rgba(79,115,68,.42); }
.vk-slots { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.vk-slot { height: 30px; width: 84px; border-radius: 15px; background: rgba(79,115,68,.3); }

@media (max-width: 720px) {
  .zweiklick { padding: 26px 22px; min-height: 300px; }
  .zweiklick__vorschau { padding: 18px 20px; }
  .vk-gitter { gap: 6px; margin-top: 14px; }
  .vk-tag { height: 22px; }
}

/* Hinweiszeile am Newsletter-Formular im Fußbereich.
   Sie ist eine Zustandsanzeige: vor dem Laden kündigt sie an, danach meldet
   sie, was passiert ist. Der geladene Zustand wird deutlich markiert, damit
   die Änderung nicht unbemerkt bleibt. */
.nl-zweiklick { margin-top: 10px; font-size: 13.5px; line-height: 1.6; opacity: .85; }
.nl-zweiklick--geladen {
  opacity: 1;
  padding: 8px 12px;
  border-left: 3px solid var(--unterstrich);
  background: rgba(255, 255, 255, .08);
}

.embedbox { margin-top: 32px; }
.embedbox iframe { display: block; width: 100%; border: 0; }
.embedbox--nl { max-width: 560px; }
.embedbox--nl iframe { margin: 0 auto; max-width: 100%; }
.embed-hinweis { margin-top: 26px; font: 400 17.5px/1.8 var(--font-body); }

/* ---------- Blog: Aktuelles-Übersicht ---------- */
.welle-titel::after { content: ''; display: block; width: 72px; height: 8px; margin-top: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='8' viewBox='0 0 72 8'%3E%3Cpath d='M1 5Q5 1 9 5T17 5T25 5T33 5T41 5T49 5T57 5T65 5T71 5' fill='none' stroke='%234f7344' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat; }
.blogliste { margin-top: 30px; display: flex; flex-direction: column; }
.blogrow {
  border-top: 1px solid var(--linie);
  padding: 30px 0;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 36px;
  align-items: center;
  color: var(--text);
}
.blogrow:last-child { border-bottom: 1px solid var(--linie); }
.blogrow:hover { background: #faf8f2; color: var(--text); }
.blogrow img { width: 220px; height: 140px; object-fit: cover; display: block; }
.blogrow h2, .blogrow h3 { font-size: 27px; line-height: 1.22; letter-spacing: -.02em; }
.blogrow p { margin-top: 12px; font: 400 17px/1.75 var(--font-body); max-width: 70ch; text-wrap: pretty; }
.blogrow .weiter { color: var(--gruen); font-weight: 600; }
.blogrow__meta { margin-top: 14px; font: 600 12.5px/1.5 var(--font-body); letter-spacing: .13em; text-transform: uppercase; color: var(--gruen); display: flex; flex-wrap: wrap; gap: 8px 26px; align-items: baseline; max-width: 70ch; }

/* Drei Spalten seit 18.08.2026. Der Block bekommt damit einen Deckel: hoechstens
   neun Kacheln auf aktuelles.html, alles Weitere gehoert spaeter auf die Archivseite.
   Gemessen bei 1440: neun Kacheln in drei Spalten brauchen weniger Hoehe als vorher
   sechs Kacheln in zwei Spalten. */
.blogmini-grid { margin-top: 32px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 40px; }
.blogmini {
  border-top: 1px solid var(--linie-creme);
  padding: 14px 0;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--text);
  font: 500 16px/1.4 var(--font-body);
}
.blogmini:hover { color: var(--gruen-dunkel); }
.blogmini img { width: 60px; height: 44px; object-fit: cover; display: block; flex: none; }
.blogmini--unten { border-bottom: 1px solid var(--linie-creme); }

/* ---------- Blogartikel ---------- */
.artikel-kopf { padding: 72px 0 0; }
.artikel-kopf .zurueck { font: 600 13px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--gruen); }
/* Ueberschrift und Unterzeile im Blogkopf laufen auf die volle Textbreite.
   Geaendert am 18.08.2026. Vorher stand hier `text-wrap: balance`, das verteilt
   den Text gleichmaessig auf die Zeilen, statt die Zeile zu fuellen. Dadurch brach
   die Ueberschrift frueh um, gemessen 752 von 1068 verfuegbaren Pixeln. `pretty`
   fuellt die Zeile und verhindert trotzdem ein einzelnes Wort in der letzten Zeile.
   Das `max-width: 22ch` ist ebenfalls raus, alle zwoelf Blogseiten haben es
   ohnehin per style-Attribut ausgehebelt. */
.artikel-kopf h1 { margin-top: 18px; font-size: 44px; line-height: 1.12; max-width: none; text-wrap: pretty; }
.artikel-cover { margin: 40px 0 0; overflow: hidden; }
.artikel-cover img { display: block; width: 100%; max-height: 460px; object-fit: cover; }
.artikel { padding: 48px 0 76px; }
.artikel .prosa { max-width: 74ch; gap: 24px; }
.artikel .prosa h2 { font-size: 28px; margin-top: 26px; }
.artikel .prosa .einstieg { font-size: 20px; color: var(--gruen-dunkel); }
.artikel .prosa blockquote { margin: 8px 0; padding: 2px 0 2px 26px; border-left: 3px solid var(--gruen); font: 500 22px/1.55 var(--font-head); letter-spacing: -.014em; color: var(--gruen-dunkel); text-align: left; }
.artikel .prosa ul { margin: 0; padding-left: 24px; display: grid; gap: 14px; }
.artikel .prosa li { text-wrap: pretty; }

/* Zeitungs-Variante für Blogartikel */
/* Gleiche Aenderung wie bei der Ueberschrift, 18.08.2026. Hier wirkten zwei Bremsen
   zusammen: die Deckelung auf 52 Zeichen und `balance`. Ergebnis waren drei kurze
   Zeilen auf acht der zwoelf Blogseiten. Beides ist raus. */
.artikel-kopf .unterzeile { margin-top: 18px; font: 400 23px/1.4 var(--font-head); letter-spacing: -.012em; color: #3b4a35; text-wrap: pretty; }
.artikel-kopf .artikel-meta { margin-top: 20px; font: 600 13px/1 var(--font-body); letter-spacing: .13em; text-transform: uppercase; color: var(--gruen); }
/* 23.08.2026: Der Name in der Metazeile verlinkt auf ueber-mich.html. Ohne eigene
   Regel waere der Link unsichtbar, weil Links denselben Gruenton haben wie die Zeile.
   Deshalb color:inherit plus ein dezenter Unterstrich, wie bei den Rechtstexten. */
.artikel-meta a { color: inherit; box-shadow: 0 1px 0 var(--unterstrich); }
.artikel-meta a:hover { color: var(--gruen-dunkel); box-shadow: 0 1px 0 var(--gruen); }
/* 23.08.2026: volle Inhaltsbreite statt 68ch, Julias Entscheidung.
   Gehoert zur Kopfreihe weiter unten. */
.artikel--zeitung .prosa { max-width: none; }
.artikel--zeitung .prosa p, .artikel--zeitung .prosa li { font-family: Georgia, 'Times New Roman', serif; font-size: 18.5px; line-height: 1.8; }
.artikel--zeitung .prosa .einstieg { font-size: 20.5px; }
.artikel--zeitung .prosa .einstieg::first-letter { float: left; font: 600 66px/.9 var(--font-head); color: var(--gruen); padding: 7px 14px 0 0; }
.artikel--zeitung .prosa h2 { font-size: 24px; margin-top: 30px; }
.artikel--zeitung .prosa blockquote { margin: 14px auto; max-width: none; border-left: 0; border-top: 1px solid rgba(59,74,53,.25); border-bottom: 1px solid rgba(59,74,53,.25); padding: 20px 10px; text-align: center; }

/* Magazin-Variante für Blogartikel */
.leseleiste { position: fixed; top: 0; left: 0; height: 4px; width: 0; background: var(--gruen); z-index: 1000; }
.artikel-kopf--magazin { background: var(--gruen-dunkel); padding: 60px 0 96px; }
.artikel-kopf--magazin .zurueck { color: #cfe3bf; }
.artikel-kopf--magazin h1 { color: #f7f4ec; }
.artikel-kopf--magazin .unterzeile { color: rgba(247,244,236,.88); }
.artikel-kopf--magazin .artikel-meta { color: #cfe3bf; }
.artikel--magazin .artikel-cover { margin: 36px 0 0; border-radius: 18px; box-shadow: 0 10px 26px rgba(31,46,26,.10); }
.artikel--magazin .prosa h2 { font-size: 26px; }
.artikel--magazin .prosa h2::after { content: ''; display: block; width: 72px; height: 8px; margin-top: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='8' viewBox='0 0 72 8'%3E%3Cpath d='M1 5Q5 1 9 5T17 5T25 5T33 5T41 5T49 5T57 5T65 5T71 5' fill='none' stroke='%234f7344' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat; }
.artikel--magazin .prosa blockquote { position: relative; margin: 18px 0 26px; max-width: none; border: 0; border-radius: 18px; background: #eaf1e2; padding: 24px 28px; text-align: left; }
.artikel--magazin .prosa blockquote::after { content: ''; position: absolute; left: 38px; bottom: -14px; border: 14px solid transparent; border-top: 14px solid #eaf1e2; border-bottom: 0; border-left: 0; }
.artikel--magazin .prosa ul { list-style: none; padding: 26px 30px; border-radius: 18px; background: rgba(79,115,68,.09); }
.artikel--magazin .prosa li { position: relative; padding-left: 30px; }
.artikel--magazin .prosa li::before { content: '→'; position: absolute; left: 0; top: 0; color: var(--gruen); font-family: var(--font-body); font-weight: 700; }

/* Seminar-Variante für Blogartikel */
.artikel--seminar .agenda { margin: 34px 0 0; max-width: 68ch; background: #fff; border: 1px solid rgba(79,115,68,.25); border-radius: 18px; padding: 26px 30px; }

/* ---------- Kopfreihe im Beitrag: Foto und "Darum geht's" nebeneinander ----------
   Eingefuehrt am 23.08.2026 nach Julias Entscheidung, gemeinsam am Bildschirm
   ausgesucht. Vorher standen Foto und Kasten untereinander, beide 726 Pixel breit,
   und das Foto war durch eine feste Hoehenbremse von 280 Pixeln auf 69 Prozent
   beschnitten (beim Elefanten fehlte der Kopf).

   Beide Kacheln sind jetzt exakt gleich breit UND immer exakt gleich hoch: Das Foto
   sitzt mittig in einer Cremeflaeche, die den Hoehenunterschied auffaengt. Dadurch
   ist das Foto immer vollstaendig sichtbar, egal wie lang der Text im Kasten ist.
   Eine feste Aufteilung kann das nicht: gemessen ueber alle 13 Beitraege ist der
   Kasten je nach Textlaenge zwischen 19 und 177 Pixel hoeher als das Foto.

   ⚠️ Die Hoehenbremse steckte als style="max-height:280px" direkt am Bild in allen
   13 Beitragsseiten und ist dort entfernt worden. Wer ein neues Bild einbaut, setzt
   sie NICHT wieder. */
.kopfreihe { display: flex; gap: 28px; align-items: stretch; margin: 40px 0 34px; }
.artikel .kopfreihe > .artikel-cover,
.artikel .kopfreihe > .agenda { flex: 0 0 calc(50% - 14px); width: calc(50% - 14px); max-width: none; margin: 0; }
.kopfreihe .artikel-cover { background: var(--creme-tief); border-radius: 18px; padding: 18px;
  display: flex; align-items: center; justify-content: center; overflow: hidden; }
.kopfreihe .artikel-cover img { width: 100%; height: auto; max-height: none; border-radius: 10px; }

/* Auf schmalen Bildschirmen untereinander, sonst werden beide Kacheln zu schmal */
@media (max-width: 940px) {
  .kopfreihe { display: block; }
  .artikel .kopfreihe > .artikel-cover,
  .artikel .kopfreihe > .agenda { width: auto; }
  .kopfreihe .artikel-cover { margin-bottom: 26px; }
}
.agenda__titel { font: 600 13px/1 var(--font-body); letter-spacing: .13em; text-transform: uppercase; color: var(--gruen); }
.agenda ol { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; counter-reset: agenda; }
.agenda li { counter-increment: agenda; }
.agenda a { display: flex; gap: 12px; align-items: baseline; color: var(--gruen-dunkel); text-decoration: none; font: 500 15px/1.5 var(--font-body); }
.agenda a::before { content: counter(agenda, decimal-leading-zero); font: 700 12px/1 var(--font-body); color: var(--gruen); }
.agenda a:hover { color: var(--gruen); }
/* Antworttext in der Agenda-Karte: beantwortet die Kernfrage kompakt, bewusst zurückhaltend gesetzt */
.agenda__antwort { margin: 12px 0 0; padding-bottom: 16px; border-bottom: 1px solid rgba(79,115,68,.22); font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: var(--text-leise); text-wrap: pretty; }
.artikel--seminar .prosa ul { background: none; padding: 6px 0 0; border-radius: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.artikel--seminar .prosa li { padding: 22px 22px 26px; border-radius: 4px; box-shadow: 0 10px 22px rgba(31,46,26,.13); font-size: 17px; line-height: 1.6; transition: transform .25s ease; }
.artikel--seminar .prosa li::before { content: none; }
.artikel .prosa .liste-vorsatz { font-weight: 600; color: var(--gruen-dunkel); }
.artikel--seminar .prosa ul.liste-schlicht { display: grid; grid-template-columns: 1fr; gap: 16px; background: none; border-left: 3px solid rgba(79,115,68,.3); border-radius: 0; padding: 4px 0 4px 26px; margin-left: 6px; }
.artikel--seminar .prosa ul.liste-schlicht li { background: none; box-shadow: none; transform: none; padding: 0 0 0 30px; border-radius: 0; font-size: 18.5px; line-height: 1.8; position: relative; }
.artikel--seminar .prosa ul.liste-schlicht li::before { content: '→'; position: absolute; left: 0; top: 0; color: var(--gruen); font-family: var(--font-body); font-weight: 700; }
.artikel--seminar .prosa li:nth-child(4n+1) { background: #fdf6c9; transform: rotate(-1.4deg); }
.artikel--seminar .prosa li:nth-child(4n+2) { background: #eaf1e2; transform: rotate(1deg); }
.artikel--seminar .prosa li:nth-child(4n+3) { background: #f7ead9; transform: rotate(.9deg); }
.artikel--seminar .prosa li:nth-child(4n+4) { background: #eef3e6; transform: rotate(-.8deg); }
.artikel--seminar .prosa li:hover { transform: rotate(0); }
.artikel--seminar mark { background: linear-gradient(104deg, rgba(255,224,102,0) 1%, rgba(255,224,102,.85) 3%, rgba(255,224,102,.7) 96%, rgba(255,224,102,0) 98%); padding: 1px 6px; margin: 0 -2px; border-radius: 6px; color: inherit; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.artikel--seminar .prosa p { position: relative; }
/* Die Randnotizen sind am 23.08.2026 ersatzlos entfallen, Julias finale
   Entscheidung. Texte und das CSS des favorisierten gruenen Post-its liegen in
   02_Nur_Eigenbau/_Archiv_Randnotizen_23-08-2026.md. Neue Beitraege bekommen
   keine Randnotizen mehr. */
/* Quellenabsatz am Textende: kleiner, gedämpft und als Kasten klar vom Beitrag abgesetzt */
.artikel .prosa .quellen { margin-top: 30px; background: var(--creme); border-radius: 12px; padding: 20px 24px 22px; }
.artikel .prosa .quellen .quellen__titel { margin: 0; font: 600 12px/1 var(--font-body); letter-spacing: .13em; text-transform: uppercase; color: var(--gruen); }
.artikel .prosa .quellen p { margin: 10px 0 0; font-family: var(--font-body); font-size: 14px; line-height: 1.65; color: var(--text-leise); text-align: left; }
.quellen a { color: var(--gruen); box-shadow: 0 1px 0 var(--unterstrich); }
.quellen a:hover { color: var(--gruen-dunkel); box-shadow: 0 1px 0 var(--gruen); }
.artikel .prosa .quellen .quellen__stand { margin-top: 8px; font-size: 12.5px; letter-spacing: .02em; }
/* Textlinks im Artikel: mit Strich darunter, damit sie als Links erkennbar sind */
.artikel .prosa p a:not(.pfeillink), .artikel .prosa li a { box-shadow: 0 1px 0 var(--gruen); }
.artikel .prosa p a:not(.pfeillink):hover, .artikel .prosa li a:hover { color: var(--gruen-dunkel); box-shadow: 0 1px 0 var(--gruen-dunkel); }
.js .artikel--seminar .prosa > * { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.js .artikel--seminar .prosa > *.sichtbar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .artikel--seminar .prosa > * { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 1120px) {
}

/* ---------- Kontakt ---------- */
.kontakt-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 72px; align-items: start; }
.formular { display: flex; flex-direction: column; gap: 22px; }
.feld { display: flex; flex-direction: column; gap: 8px; }
.feld label { font: 600 12px/1 var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--gruen); }
.feld input, .feld textarea {
  border: 1px solid #d7d0be;
  background: #ffffff;
  padding: 14px 16px;
  font: 400 17px/1.5 var(--font-body);
  color: var(--text-dunkel);
  outline: none;
  border-radius: 0;
  width: 100%;
}
.feld textarea { min-height: 160px; resize: vertical; }
.feld input:focus, .feld textarea:focus { border-color: var(--gruen); }
.checkzeile { display: flex; gap: 12px; align-items: flex-start; font: 400 16px/1.65 var(--font-body); max-width: 62ch; }
.checkzeile input { margin-top: 5px; width: 17px; height: 17px; accent-color: var(--gruen); flex: none; }
.kformmsg { display: none; font: 400 16px/1.6 var(--font-body); padding: 14px 16px; }
.kformmsg--ok { display: block; background: #eef3e9; color: var(--gruen-dunkel); border-left: 3px solid var(--gruen); }
.kformmsg--fehler { display: block; background: #f7ece7; color: #7a4a2f; border-left: 3px solid #b0714f; }

.kinfo { background: var(--creme); padding: 40px 36px; }
.kinfo h2 { font-size: 24px; letter-spacing: -.02em; }
.kinfo__block { margin-top: 22px; }
.kinfo__block:first-of-type { margin-top: 26px; }
.kinfo__label { font: 600 12px/1 var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--gruen); }
.kinfo__block a, .kinfo__block p { display: inline-block; margin: 8px 0 0; font: 400 18px/1.7 var(--font-body); color: var(--gruen-dunkel); }
.kinfo__block a { box-shadow: 0 1px 0 #cbc0a3; }
.kinfo .btn { margin-top: 30px; }

/* ---------- Rechtstexte ---------- */
.recht { max-width: 82ch; padding-bottom: 84px; }
.recht h1 { font-size: 46px; }
.recht h2 { margin: 52px 0 0; font-size: 27px; line-height: 1.2; letter-spacing: -.022em; }
.recht h3 { margin: 34px 0 0; font-size: 20px; line-height: 1.3; letter-spacing: -.016em; }
/* Silbentrennung fuer die Rechtstexte, ergaenzt am 17.08.2026,
   Blocksatz ergaenzt am 23.08.2026 auf Julias Entscheidung.
   Grund: Impressum und Datenschutz haben mit gemessen 93 Zeichen die breitesten
   Zeilen der Website und zugleich die laengsten Absaetze. Ohne Silbentrennung
   springen lange Woerter komplett in die naechste Zeile und der rechte Rand
   franst aus.
   ENTSCHIEDEN AM 23.08.2026 (Karte dsl1, beide Punkte):
   - Die Zeilenbreite BLEIBT bei 82ch. Julia ausdruecklich: "Impressum und
     Datenschutz liest kein Mensch", die Lesbarkeit ist ihr dort gleichgueltig.
   - Blocksatz JA, damit die beiden letzten Seiten ohne glatte rechte Kante
     aussehen wie die uebrigen 23. Das war eine Ansichtsfrage, keine
     Lesbarkeitsfrage. Gezerrte Wortabstaende drohen nicht, weil die
     Silbentrennung bereits laeuft.
   Auf schmalen Bildschirmen schaltet die Regel weiter unten wieder auf
   linksbuendig. Am Text ist nichts geaendert. */
.recht p { margin: 16px 0 0; font: 400 17px/1.8 var(--font-body); text-align: justify; text-wrap: pretty; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 7 4 3; }
.recht ul { margin: 16px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 12px; }
.recht li { font: 400 17px/1.8 var(--font-body); text-align: justify; text-wrap: pretty; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 7 4 3; }
/* Absaetze mit einer Webadresse bleiben linksbuendig, entschieden am 23.08.2026.
   Grund: Eine Webadresse laesst sich nicht trennen. Passt sie nicht mehr in die
   Zeile, rutscht sie komplett nach unten und der Blocksatz zieht den Satz davor
   ueber die volle Breite auseinander. Gemessen waren das Wortabstaende von 61
   und 48 Pixeln gegen sonst knapp 6, also sichtbare Loecher. Ohne diese Regel
   liegt der groesste Abstand bei 61 Pixeln, mit ihr bei 21 und damit auf dem
   Niveau von workshop.html und coaching.html.
   Betrifft 7 von 84 Absaetzen (6 im Datenschutz, 1 im Impressum). Die Regel
   greift von selbst, sobald irgendwo eine neue Webadresse dazukommt.
   Verworfen wurde der Gegenvorschlag, die Adressen umbrechen zu lassen: Das
   haette die glatte Kante ueberall gebracht, aber eine mitten durchgeschnittene
   Adresse sieht man, einen linksbuendigen Absatz nicht.
   Wo :has() nicht unterstuetzt wird, faellt die Regel einfach weg und die Seite
   sieht aus wie vorher. Nichts geht kaputt. */
.recht p:has(> a[href^="http"]) { text-align: left; }
.recht a { color: var(--gruen); box-shadow: 0 1px 0 var(--unterstrich); }
.recht a:hover { color: var(--gruen-dunkel); box-shadow: 0 1px 0 var(--gruen); }
.recht address { font: 400 17px/1.8 var(--font-body); font-style: normal; margin: 16px 0 0; }
.recht .stand { color: var(--text-leise); }
.recht strong { color: var(--gruen-dunkel); }

/* ---------- Fußzeile ---------- */
.footer { background: var(--gruen); color: #e2ecdc; }
.footer__grid {
  display: grid;
  grid-template-columns: 1fr .45fr 2.05fr;
  gap: 44px;
  align-items: start;
  padding: 58px 0 44px;
}
.footer__brand img { width: auto; height: 66px; display: block; object-fit: contain; object-position: left; }
/* Fusszeilen-Logo: Kreise als Bild, Schriftzug als echter Text (scharf und lesbar) */
.footer__logo { display: flex; align-items: center; gap: 18px; }
.footer__logo img { width: auto; height: 74px; }
.footer__marke { display: block; font: 600 27px/1.15 var(--font-head); letter-spacing: -.015em; color: #f7f4ec; }
.footer__slogan { display: block; margin-top: 3px; font: 400 15.5px/1.4 var(--font-body); letter-spacing: .04em; color: #c6d5be; }
.footer__adresse { margin-top: 22px; font: 400 16px/1.85 var(--font-body); color: #dce7d5; }
.footer__kontakt { margin-top: 14px; font: 400 16px/1.85 var(--font-body); }
.footer__kontakt a { color: #ffffff; box-shadow: 0 1px 0 rgba(255, 255, 255, .4); }
.footer__kontakt .kontakt-icon { width: 15px; height: 15px; margin-right: 9px; vertical-align: -2px; }
.footer__links { display: flex; flex-direction: column; gap: 11px; font: 400 16px/1.4 var(--font-body); padding-top: 6px; }
.footer__links a { color: #e2ecdc; }
.footer__links a:hover { color: #ffffff; }
.footer__nl .footer__titel { font: 700 13px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: #c6d5be; }
.footer__claim { font: 500 22px/1.3 var(--font-head); letter-spacing: -.015em; color: #ffffff; }
.footer__nl { background: var(--gruen-dunkel); border-radius: 18px; padding: 20px 28px 14px; }
/* Newsletter-Formular als HTML-Baustein direkt in der Seite (Brevo-Endpunkt, kein iframe) */
.footer__nl .nlform { margin-top: 12px; }
.footer__nl .sib-form-message-panel { display: none; margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; font: 400 15px/1.5 var(--font-body); }
.footer__nl .sib-form-message-panel--active { display: block; }
.footer__nl #error-message { background: #ffeded; color: #661d1d; }
.footer__nl #success-message { background: #e7faf0; color: #085229; }
.nlfelder { display: flex; gap: 14px; flex-wrap: wrap; }
.nlfelder .sib-input { flex: 1 1 180px; }
.footer__nl .sib-form-block__button svg { width: 15px; height: 15px; margin-right: 8px; vertical-align: -2px; fill: currentColor; }
.footer__nl .sib-form-block__button .sib-hide-loader-icon { display: none; }
.footer__nl .entry__label { display: block; font: 600 13.5px/1.3 var(--font-body); color: #ffffff; margin-bottom: 7px; }
.footer__nl .input { width: 100%; padding: 12px 14px; border: 0; border-radius: 10px; background: #ffffff; color: var(--text); font: 400 16px/1.3 var(--font-body); }
.footer__nl .input::placeholder { color: #9aa79a; }
.footer__nl .entry__error { display: block; margin-top: 5px; font: 400 13px/1.4 var(--font-body); color: #ffd9d0; }
.footer__nl .entry__error:empty { display: none; }
.footer__nl .sib-form-block__button { display: block; margin: 10px auto 0; border: 0; cursor: pointer; background: var(--btn-hell); color: var(--gruen-dunkel); font: 700 15.5px/1 var(--font-body); padding: 14px 28px; border-radius: 10px; }
.footer__nl .sib-form-block__button:hover { background: #ffffff; }
.footer__nl .input--hidden { display: none; }
/* Einwilligung: Pflicht-Haekchen, Brevo verlangt es beim Absenden */
.footer__nl .nl-optin { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; }
.footer__nl .nl-optin input { flex: 0 0 auto; width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--btn-hell); cursor: pointer; }
.footer__nl .nl-optin input:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; }
.footer__nl .nl-optin__text { margin: 0; font: 400 15px/1.5 var(--font-body); color: #dce7d5; }
.footer__nl .nl-optin__text label { display: inline; margin: 0; font: inherit; color: inherit; cursor: pointer; }
.footer__nl .nl-hinweis { margin-top: 12px; font: 400 13.5px/1.55 var(--font-body); color: #b3c4ab; }
.footer__nl p { margin-top: 10px; font: 400 16px/1.7 var(--font-body); color: #dce7d5; }
.footer__nl a { color: #ffffff; box-shadow: 0 1px 0 rgba(255, 255, 255, .4); }
.footer__bottom {
  border-top: 1px solid rgba(226, 236, 220, .24);
  padding: 20px 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  font: 400 14px/1.5 var(--font-body);
  color: #c6d5be;
}
.footer__bottom a { color: #c6d5be; }
.footer__bottom a:hover { color: #ffffff; }
.footer__bottom .rechtslinks { display: flex; gap: 20px; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1000px) {
  .container { padding: 0 36px; }
  h1 { font-size: 42px; }
  .g2, .g2--breit, .g2--text { grid-template-columns: 1fr; gap: 44px; }
  .g3, .stimmen-grid--3 { grid-template-columns: 1fr; gap: 40px; }
  .story__foto { float: none; width: auto; margin: 0 0 32px; }
  .stimmen-grid { grid-template-columns: 1fr; gap: 44px; }
  .seitentitel-grid { grid-template-columns: 1fr; gap: 22px; }
  .themen-grid { grid-template-columns: 1fr; gap: 36px; }
  .bereiche { grid-template-columns: 1fr 1fr; gap: 28px; }
  .kontakt-grid { grid-template-columns: 1fr; gap: 48px; }
  .blogmini-grid { grid-template-columns: 1fr; gap: 0; }
  .blogmini { border-bottom: 0 !important; }
  .blogmini-grid .blogmini:last-child { border-bottom: 1px solid var(--linie-creme) !important; }
  .footer__grid { grid-template-columns: 1fr; gap: 40px; }
  .ctaband__in { flex-direction: column; align-items: flex-start; gap: 32px; padding-top: 64px; padding-bottom: 64px; }
  .banner--560 { height: 440px; }
}

/* Navigation: Hamburger schon ab Tablet-Breite, damit das Menü nie umbricht */
@media (max-width: 940px) {
  .nav-toggle { display: block; }
  .nav {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: var(--gruen);
    z-index: 20;
    padding: 6px 36px 18px;
    border-top: 1px solid rgba(255, 255, 255, .18);
    box-shadow: 0 18px 30px rgba(31, 42, 28, .25);
  }
  .nav.open { display: block; }
  .nav ul { flex-direction: column; gap: 2px; }
  .nav a { display: block; font-size: 17px; padding: 12px 0; border-bottom: 0; }
  .nav a[aria-current="page"] { border-bottom: 0; font-weight: 700; }
}

/* ============================================================
   Selbstcheck (selbstcheck.html)
   ============================================================ */

/* Engere Zeilenabstaende nur auf dieser Seite (Seitenstandard ist 1.8) */
.sc-seite .prosa p, .sc-auswertung p { line-height: 1.62; }
.sc-seite .prosa { gap: 14px; }

/* Absatz-Zwischentitel im Einleitungstext */
.sc-absatztitel { font-size: 20px; margin-top: 6px; line-height: 1.25; letter-spacing: -.018em; }

/* Die Buehne: eine Karte, in der immer genau eine Frage steht */
.sc-buehne { margin-top: 30px; background: var(--creme); border: 1px solid var(--linie-creme); border-radius: 20px; padding: 22px 28px 18px; scroll-margin-top: 24px; box-shadow: 0 10px 30px rgba(47, 69, 41, .07); }
.sc-buehne__kopf { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; }
.sc-fortschritt { margin: 0; font: 600 13px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--gruen); }
/* Fortschrittsbalken: sechs Segmente */
.sc-balken { display: flex; gap: 6px; }
.sc-balken span { width: 30px; height: 6px; border-radius: 3px; background: #e2dcc8; transition: background .25s; }
.sc-balken span.ist-beantwortet { background: var(--gruen); }
.sc-balken span.ist-aktiv { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--akzent); }
/* Blaettern-Navigation */
.sc-buehne__nav { display: flex; justify-content: space-between; gap: 16px; margin-top: 14px; min-height: 26px; }
.sc-navknopf { background: none; border: 0; padding: 4px 0; cursor: pointer; font: 600 13px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--gruen); }
.sc-navknopf:hover { color: var(--gruen-dunkel); }
.sc-navknopf:focus-visible { outline: 3px solid var(--gruen); outline-offset: 2px; }
.sc-navknopf--zurueck { margin-right: auto; }
.sc-navknopf--zurueck::before { content: "\2190\00a0"; }
.sc-navknopf--weiter { margin-left: auto; }
.sc-navknopf--weiter::after { content: "\00a0\2192"; }

/* Die Frage in der Buehne, sanft eingeblendet */
#sc-form { margin: 0; }
.sc-frage { margin: 18px 0 0; padding: 0; border: 0; }
.sc-frage:not([hidden]) { animation: sc-ein .35s ease; }
@keyframes sc-ein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.sc-frage:focus { outline: none; }
.sc-frage legend { float: left; width: 100%; padding: 0; }
.sc-frage__text { display: block; font: 600 22px/1.3 var(--font-head); letter-spacing: -.014em; color: var(--gruen-dunkel); text-wrap: pretty; }
.sc-antworten { display: grid; gap: 9px; margin-top: 16px; clear: both; }

/* Antwortkarten: echte Optionsfelder, die Karte ist das Label */
.sc-antwort { position: relative; }
.sc-antwort input { position: absolute; left: 14px; top: 14px; width: 18px; height: 18px; margin: 0; opacity: 0; }
.sc-antwort label {
  position: relative; display: block; cursor: pointer;
  padding: 10px 16px 10px 44px;
  background: #ffffff; border: 1.5px solid var(--linie-creme); border-radius: 11px;
  font: 400 16px/1.45 var(--font-body); color: var(--text);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.sc-antwort label:hover { border-color: var(--akzent); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(47, 69, 41, .1); }
/* Der nachgebaute Optionskreis */
.sc-antwort label::before {
  content: ""; position: absolute; left: 14px; top: 12px;
  width: 16px; height: 16px; border: 2px solid var(--akzent); border-radius: 50%; background: #ffffff;
}
/* Auswahl: gruener Rand, heller Grund und ein Haken, nicht nur Farbe */
.sc-antwort input:checked + label { border-color: var(--gruen); background: #eef3e9; color: var(--text-dunkel); }
.sc-antwort input:checked + label::before { border-color: var(--gruen); background: var(--gruen); }
.sc-antwort input:checked + label::after {
  content: ""; position: absolute; left: 19px; top: 16px;
  width: 8px; height: 4px; border-left: 2px solid #ffffff; border-bottom: 2px solid #ffffff;
  transform: rotate(-45deg);
}
/* Sichtbarer Fokusrahmen fuer die Tastatur */
.sc-antwort input:focus-visible + label { outline: 3px solid var(--gruen); outline-offset: 2px; }

/* Die Ausweichzeile: schlichte Zeile ohne Kartenoptik */
.sc-antwort--ausweich label { background: none; border-color: transparent; font-size: 15px; color: var(--text-leise); padding-top: 7px; padding-bottom: 7px; }
.sc-antwort--ausweich label:hover { border-color: var(--linie-creme); transform: none; box-shadow: none; }
.sc-antwort--ausweich label::before { top: 9px; }
.sc-antwort--ausweich input { top: 11px; }
.sc-antwort--ausweich input:checked + label { background: #eef3e9; border-color: var(--gruen); color: var(--text-dunkel); }
.sc-antwort--ausweich input:checked + label::after { top: 13px; }

/* Ergebnis: Lesetext in Serife wie im Blog, Wellen-Ueberschriften als Anker */
.sc-seite main .btn { border-radius: 10px; }
.sc-ergebnisbereich { scroll-margin-top: 24px; }
.sc-auswertung { margin-top: 8px; }
.sc-auswertung h2.sc-erg-titel { margin-top: 22px; font-size: 30px; }
.sc-auswertung h3 { margin-top: 40px; }
.sc-auswertung h3.welle-titel::after { margin-top: 8px; }
.sc-auswertung p { margin-top: 13px; font-family: Georgia, 'Times New Roman', serif; font-size: 18.5px; line-height: 1.65; text-wrap: pretty; text-align: justify; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 7 4 3; }
/* Eingangsszene mit markiertem Kernsatz */
.sc-auswertung .sc-problem { text-align: left; }
.sc-auswertung mark { background: linear-gradient(104deg, rgba(255,224,102,0) 1%, rgba(255,224,102,.85) 3%, rgba(255,224,102,.7) 96%, rgba(255,224,102,0) 98%); padding: 1px 6px; margin: 0 -2px; border-radius: 6px; color: inherit; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* Die hervorgehobene Loesung (Schreibregel 8: der Nutzen bekommt eine eigene Zeile) */
.sc-auswertung .sc-hebel { margin-top: 22px; padding: 16px 20px; background: var(--creme); border-left: 3px solid var(--gruen); border-radius: 0 12px 12px 0; font: 500 20px/1.45 var(--font-head); letter-spacing: -.012em; color: var(--gruen-dunkel); text-align: left; }
/* Die Uebung als eigene Karte */
.sc-uebungsbox { margin-top: 40px; background: var(--creme); border-radius: 16px; padding: 24px 28px 26px; }
.sc-uebungsbox h3 { margin: 0; }
.sc-uebungsbox p:first-of-type { font-style: italic; }
.sc-auswertung .sc-zuversicht { font: 600 20px/1.5 var(--font-head); letter-spacing: -.012em; color: var(--gruen-dunkel); text-align: left; }
.sc-auswertung .sc-einordnung { margin-top: 26px; font-size: 15px; line-height: 1.6; color: var(--text-leise); font-style: italic; text-align: left; }
.sc-u-frage { display: block; font: 600 15.5px/1.45 var(--font-body); color: var(--gruen-dunkel); }
.sc-u-antwort { display: block; font: 400 15.5px/1.5 var(--font-body); color: var(--text); }
.sc-ausnahme { margin: 14px 0 0; padding: 14px 20px; border-left: 3px solid var(--gruen); background: var(--creme); border-radius: 0 12px 12px 0; }
.sc-ausnahme p { margin: 0; text-align: left; font-family: var(--font-body); font-size: 16px; }
.sc-ausnahme p + p { margin-top: 12px; }

/* Die beiden Knoepfe mittig nebeneinander unter dem Ergebnistext */
.sc-pdfzeile { margin: 40px 0 0; display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; }
.sc-pdfzeile .btn { cursor: pointer; border: 0; font-family: var(--font-body); }

/* Druckkopf und Druckkontakt: auf dem Bildschirm unsichtbar */
.sc-druckkopf, .sc-druckkontakt { display: none; }

@media (max-width: 720px) {
  .sc-buehne { padding: 16px 14px 12px; }
  .sc-balken span { width: 22px; }
  .sc-frage { margin-top: 14px; }
  .sc-frage__text { font-size: 19px; }
  .sc-antwort label { padding: 9px 12px 9px 40px; font-size: 16px; line-height: 1.4; }
  .sc-antwort input { left: 12px; top: 13px; }
  .sc-antwort label::before { left: 12px; top: 11px; }
  .sc-antwort input:checked + label::after { left: 17px; top: 15px; }
  .sc-antwort--ausweich label::before { top: 8px; }
  .sc-antwort--ausweich input { top: 10px; }
  .sc-antwort--ausweich input:checked + label::after { top: 12px; }
  .sc-antworten { gap: 8px; }
  .sc-auswertung p { text-align: left; font-size: 17.5px; }
  .sc-auswertung h2.sc-erg-titel { font-size: 26px; }
  .sc-auswertung .sc-hebel { font-size: 18px; padding: 12px 14px; }
  .sc-uebungsbox { padding: 18px 18px 20px; }
  .sc-pdfzeile { flex-direction: column; align-items: center; gap: 12px; }
}

/* Druck: uebrig bleiben Logo, Datum, Auswertung und Kontaktdaten */
@media print {
  body.sc-seite { background: #ffffff; font-size: 12pt; }
  body.sc-seite .topbar,
  body.sc-seite .sc-kopf,
  body.sc-seite .sc-fragenbereich,
  body.sc-seite .sc-danach,
  body.sc-seite .footer { display: none !important; }
  body.sc-seite .sc-druckkopf { display: flex; align-items: center; gap: 14px; padding: 0 0 14px; border-bottom: 2px solid #4f7344; margin-bottom: 10px; }
  body.sc-seite .sc-druckkopf p { margin: 0; }
  body.sc-seite .sc-druckkopf__marke { font: 600 14pt/1.3 var(--font-head); color: #2f4529; }
  body.sc-seite .sc-druckkopf__zeile { font: 400 10pt/1.4 var(--font-body); color: #414a3d; }
  body.sc-seite .sc-ergebnisbereich { border: 0; padding: 0; }
  body.sc-seite .sc-ergebnisbereich .container { padding: 0; max-width: none; }
  body.sc-seite .sc-ergebnis-inhalt { max-width: none; }
  body.sc-seite .sc-auswertung p { text-align: left; }
  body.sc-seite .sc-auswertung h3 { break-after: avoid; }
  body.sc-seite .sc-hebel, body.sc-seite .sc-ausnahme, body.sc-seite .sc-uebungsbox { break-inside: avoid; background: #f6f2e8 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.sc-seite .sc-auswertung mark { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.sc-seite .sc-pdfzeile { display: none !important; }
  body.sc-seite .sc-druckkontakt { display: block; margin-top: 28px; padding-top: 14px; border-top: 2px solid #4f7344; break-inside: avoid; }
  /* Die drei Links als eigene Karte, damit sie im Ausdruck nicht untergehen */
  body.sc-seite .sc-drucklinks {
    background: #f6f2e8 !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
    border-left: 4pt solid #4f7344;
    border-radius: 0 10pt 10pt 0;
    padding: 12pt 16pt 13pt;
    break-inside: avoid;
  }
  body.sc-seite .sc-drucklink { margin: 0; }
  body.sc-seite .sc-drucklink + .sc-drucklink { margin-top: 10pt; }
  body.sc-seite .sc-drucklink__was {
    display: block;
    font: 600 12pt/1.25 var(--font-head);
    letter-spacing: -.012em;
    color: #2f4529;
  }
  body.sc-seite .sc-drucklink__was::before { content: "\2192\00a0"; color: #4f7344; }
  body.sc-seite .sc-drucklink a {
    display: block;
    margin-top: 1pt;
    padding-left: 15pt;
    font: 400 11pt/1.35 var(--font-body);
    color: #4f7344;
    text-decoration: underline;
    text-underline-offset: 2pt;
    word-break: break-word;
  }
  body.sc-seite .sc-druckadresse { margin-top: 14pt; font: 400 10pt/1.6 var(--font-body); color: #414a3d; }
}

@media (max-width: 720px) {
  .container { padding: 0 22px; }
  body { font-size: 17px; }
  h1 { font-size: 34px; }
  h2 { font-size: 27px; }
  h3 { font-size: 21px; }
  .untertitel { font-size: 21px; }
  .gross { font-size: 20px; }
  .leitsatz { font-size: 23px; }
  .ctaband h2 { font-size: 30px; }
  .sek { padding: 48px 0; }
  .artikel-kopf { padding-top: 48px; }
  .artikel-kopf h1 { font-size: 32px; }
  .recht h1 { font-size: 32px; }
  .topbar__logo img { height: 52px; }
  .nav { padding: 6px 22px 18px; }

  /* Auf schmalen Bildschirmen linksbündig, Blocksatz reißt dort zu große Lücken */
  .prosa p, .blocksatz, .story p, .recht p, .recht li { text-align: left; }

  /* Größere Tippflächen im Fußbereich (Mail, Telefon, LinkedIn).
     Die Zeilen sind nur 18 Pixel hoch, für einen Daumen zu wenig. Die
     unsichtbare Fläche steht 5 Pixel nach oben und unten über und macht
     daraus 28 Pixel. Optisch ändert sich NICHTS: Der Zeilenabstand
     (16px/1.85 = 29,6px) reserviert diesen Platz ohnehin, zwischen den
     Zeilen lagen 11 Pixel ungenutzt. Die Unterstreichung bleibt am Text,
     weil hier mit einer überstehenden Fläche gearbeitet wird und nicht
     mit Innenabstand. */
  .footer__kontakt a { position: relative; }
  .footer__kontakt a::after { content: ''; position: absolute; left: 0; right: 0; top: -5px; bottom: -5px; }

  .bild-430, .bild-420 { height: 320px; }
  .bild-360, .bild-340, .bild-320 { height: 280px; }
  .bild-300 { height: 240px; }
  .banner--420, .banner--400 { height: 260px; }
  .banner--560 { height: 320px; }
  .artikel-cover img { max-height: 220px; }
  .artikel .prosa .einstieg { font-size: 18.5px; }
  .artikel .prosa blockquote { font-size: 19px; padding-left: 20px; }
  .artikel--zeitung .prosa blockquote { padding: 16px 10px; }
  .artikel-kopf--magazin { padding: 44px 0 76px; }
  .artikel--magazin .prosa blockquote { padding: 20px 22px; text-align: left; }
  .artikel--seminar .prosa ul { grid-template-columns: 1fr; }
  .artikel--seminar .agenda { padding: 22px 22px; }

  .bereiche { grid-template-columns: 1fr; gap: 24px; }
  .partner { justify-content: center; gap: 28px 32px; }
  .partner img { height: 52px; }
  .partner img.siegel { height: 58px; }
  .partner img.logo-gross { height: 66px; }
  .partner img.logo-flach { height: 40px; }

  .blogrow { grid-template-columns: 1fr; gap: 18px; align-items: start; padding: 24px 0; }
  .blogrow img { width: 100%; height: 180px; }
  .blogrow h2, .blogrow h3 { font-size: 23px; }

  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
  .kinfo { padding: 32px 24px; }
}


/* ---------- Sprunglink zum Inhalt, gesetzt am 22.08.2026 ----------
   Grundlage: Technikcheck_22-08-2026.md, Empfehlung E7.

   Wer mit der Tastatur bedient, muss sonst auf jeder Seite erst durch alle
   acht Menuepunkte. Dieser Link steht als erstes Element im body, ist
   unsichtbar und kommt erst hervor, wenn er den Fokus bekommt.

   Er wird mit einem negativen left aus dem Bild geschoben, nicht mit
   display:none. Was auf display:none steht, bekommt gar keinen Fokus und
   waere damit wirkungslos. Nach links hinaus erzeugt keinen Rollbalken,
   nach rechts hinaus wuerde einen erzeugen.
   -------------------------------------------------------------- */
.sprunglink {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 12px 18px;
  background: var(--gruen);
  color: #f7f4ec;
  font: 600 15px/1 var(--font-body);
  border-radius: 0 0 4px 0;
  text-decoration: none;
}
.sprunglink:focus {
  left: 0;
}
.sprunglink:focus,
.sprunglink:hover:focus {
  color: #f7f4ec;
}

/* Ziel des Sprunglinks. tabindex="-1" am <main> sorgt dafuer, dass der Fokus
   nach dem Sprung wirklich im Inhalt liegt und der naechste Tab-Druck dort
   weitergeht, statt zurueck in die Navigation zu springen. Der Rahmen, den
   der Browser dabei um den ganzen Inhaltsbereich zeichnen wuerde, ist hier
   abgeschaltet. Das ist unbedenklich, weil das Ziel kein Bedienelement ist:
   Es gibt nichts, was man dort uebersehen koennte. */
#inhalt:focus { outline: none; }