/* ==========================================================================
   humandesign-report.de – zentrales Stylesheet
   Eine Datei für die ganze Website. Werte in :root anpassen, nicht in den Seiten.

   Inhalt
    1. Design-Tokens (Farben, Schriften, Abstände)
    2. Basis & Typografie
    3. Layout (Container, Sektionen, Raster)
    4. Kopfzeile & Navigation
    5. Buttons, Badges, Links
    6. Karten & Listen
    7. Startseite (Hero)
    8. Reports & Preise
    9. FAQ (details/summary – Inhalte stehen im HTML)
   10. Blog-Übersicht & Artikel
   11. Profilseiten
   12. Chart-Rechner, Checkout, Formulare (BodyGraph, Zoho)
   13. Modal (Bestellformular)
   14. Aktionen & Banner
   15. Cookie-Banner
   16. Fußzeile
   17. Hilfsklassen
   18. Responsiv
   19. Bewegung reduzieren, Druck
   20. Blog-Bausteine (Artikel, Profile, Übersichten – Aufbau wie Live-Seite)
   ========================================================================== */

/* 1. Design-Tokens ------------------------------------------------------- */
:root {
  /* Farben (warme Erdtöne, Live-Seite) */
  --braun: #5D4037;
  --braun-dunkel: #4E342E;
  --sienna: #A0522D;
  --sienna-dunkel: #8B4513;
  --warmweiss: #FDFBF7;
  --sand: #F5EFE6;
  --linie: #E6DCC8;
  --weiss: #FFFFFF;

  /* Text – als feste Farben statt Transparenz, Kontrast mind. WCAG AA */
  --text: var(--braun);
  --text-gedaempft: #6F5A51;   /* 6,2 : 1 auf Warmweiß (live: 70 % Braun = 4,0 : 1) */
  --text-leise: #7E685E;       /* 5,0 : 1 auf Warmweiß (live: 50 % Braun = 2,5 : 1) */
  --text-hell: #FDFBF7;
  --text-hell-gedaempft: rgba(253, 251, 247, 0.82);

  /* Schriften – keine Web-Fonts, keine externen Downloads */
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-ueberschrift: var(--font-serif);
  /* Live nutzen Blogartikel die Systemschrift für Überschriften.
     Für einheitliche Georgia-Überschriften hier auf var(--font-serif) setzen. */
  --font-artikel-ueberschrift: var(--font-sans);

  /* Maße */
  --container: 1280px;
  --container-schmal: 896px;
  --container-text: 768px;
  --rand: 32px;
  --sektion: 96px;
  --radius: 12px;
  --radius-klein: 8px;
  --radius-pille: 999px;
  --schatten: 0 1px 3px rgba(93, 64, 55, 0.08), 0 4px 16px rgba(93, 64, 55, 0.06);
  --schatten-gross: 0 10px 30px rgba(93, 64, 55, 0.12);
  --kopfzeile-hoehe: 64px;
  --uebergang: 0.2s ease;
}

/* 2. Basis & Typografie --------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--kopfzeile-hoehe) + 16px); }
body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text);
  background: var(--warmweiss);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }
img, video, iframe { display: block; max-width: 100%; }
svg { display: inline-block; vertical-align: -0.2em; flex-shrink: 0; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-ueberschrift);
  font-weight: 700;
  color: var(--braun);
  line-height: 1.15;
  text-wrap: balance;
}
h1 { font-size: clamp(3rem, 5.2vw, 4.5rem); line-height: 1.1; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.875rem, 3vw, 2.25rem); line-height: 1.25; }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.33; }
h4 { font-size: 1.125rem; }
h1 em, h2 em { font-style: italic; color: var(--sienna); }
p { text-wrap: pretty; }
strong { font-weight: 600; }

:focus-visible { outline: 2px solid var(--sienna); outline-offset: 3px; border-radius: 4px; }
::selection { background: rgba(160, 82, 45, 0.18); }

.lead { font-size: clamp(1.125rem, 1.6vw, 1.25rem); line-height: 1.6; color: var(--text-gedaempft); }
.eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sienna);
  margin-bottom: 0.75rem;
}

/* 3. Layout ---------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--rand); }
.container--schmal { max-width: var(--container-schmal); }
.container--text { max-width: var(--container-text); }

.sektion { padding-block: var(--sektion); }
.sektion--klein { padding-block: 64px; }
.sektion--anschluss { padding-top: 0; }
.sektion--warm { background: var(--warmweiss); }
.sektion--weiss { background: var(--weiss); }
.sektion--sand { background: var(--sand); }
.sektion--linien { border-block: 1px solid var(--linie); }
.sektion--dunkel { background: var(--braun); color: var(--text-hell); }
.sektion--dunkel h2, .sektion--dunkel h3 { color: var(--text-hell); }
.sektion--dunkel p { color: var(--text-hell-gedaempft); }

.sektion-kopf { max-width: 680px; margin: 0 auto 3rem; text-align: center; }
.sektion-kopf h2 { margin-bottom: 1rem; }
.sektion-kopf p { color: var(--text-gedaempft); font-size: 1.0625rem; line-height: 1.7; }

.raster-2, .raster-3, .raster-4 { display: grid; gap: 2rem; }
.raster-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.raster-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.raster-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.zweispaltig { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }

/* 4. Kopfzeile & Navigation ----------------------------------------------- */
.kopfzeile {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--warmweiss);          /* blickdicht – kein Durchscheinen */
  border-bottom: 1px solid var(--linie);
}
.kopfzeile__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: var(--kopfzeile-hoehe); }
.logo { display: inline-flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.logo img { width: 32px; height: 32px; border-radius: 50%; }
.logo__text { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; color: var(--braun); white-space: nowrap; }
.logo__text span { font-weight: 400; }

.hauptnav { display: flex; align-items: center; gap: 2rem; }
.hauptnav ul { display: flex; align-items: center; gap: 1.75rem; }
.hauptnav a:not(.btn) {
  position: relative;
  font-size: 0.875rem;
  font-weight: 500;
  color: #75604F;                         /* 5,7 : 1 (live #8D7B68 = 3,9 : 1) */
  white-space: nowrap;
  padding-block: 0.25rem;
  transition: color var(--uebergang);
}
.hauptnav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--braun);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--uebergang);
}
.hauptnav a:not(.btn):hover, .hauptnav a[aria-current="page"] { color: var(--braun); }
.hauptnav a:not(.btn):hover::after, .hauptnav a[aria-current="page"]::after { transform: scaleX(1); }
.hauptnav a[aria-current="page"] { font-weight: 600; }

.menue-knopf { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: var(--radius-klein); }
.menue-knopf span, .menue-knopf span::before, .menue-knopf span::after {
  display: block; width: 22px; height: 2px; background: var(--braun); border-radius: 2px; position: relative; transition: transform var(--uebergang), background var(--uebergang);
}
.menue-knopf span::before, .menue-knopf span::after { content: ""; position: absolute; left: 0; }
.menue-knopf span::before { top: -7px; }
.menue-knopf span::after { top: 7px; }
.menue-knopf[aria-expanded="true"] span { background: transparent; }
.menue-knopf[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.menue-knopf[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); }

.mobilnav { display: none; border-top: 1px solid var(--linie); background: var(--warmweiss); }
.mobilnav.ist-offen { display: block; }
.mobilnav ul { padding-block: 0.5rem 1.25rem; }
.mobilnav a:not(.btn) { display: block; padding: 0.8rem 0; font-size: 1rem; font-weight: 500; border-bottom: 1px solid var(--linie); }
.mobilnav a[aria-current="page"] { color: var(--sienna); }
.mobilnav .btn { margin-top: 1rem; }

/* 5. Buttons, Badges, Links -------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.5rem 1.5rem;
  border-radius: var(--radius-pille);
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
  transition: background var(--uebergang), color var(--uebergang), border-color var(--uebergang), box-shadow var(--uebergang);
}
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn--gross { min-height: 56px; padding-inline: 2rem; font-size: 1.125rem; }
.btn--voll { width: 100%; white-space: normal; }
.btn--primaer { background: var(--braun); color: var(--weiss); }
.btn--primaer:hover { background: var(--braun-dunkel); box-shadow: var(--schatten); }
.btn--sienna { background: var(--sienna); color: var(--weiss); }
.btn--sienna:hover { background: var(--sienna-dunkel); }
.btn--rahmen { border-color: rgba(93, 64, 55, 0.25); color: var(--braun); background: transparent; }
.btn--rahmen:hover { background: rgba(93, 64, 55, 0.05); border-color: rgba(93, 64, 55, 0.45); }
.btn--hell { background: var(--warmweiss); color: var(--braun); }
.btn--hell:hover { background: var(--weiss); }
.btn--rahmen-hell { border-color: rgba(253, 251, 247, 0.45); color: var(--text-hell); }
.btn--rahmen-hell:hover { background: rgba(253, 251, 247, 0.1); border-color: var(--text-hell); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius-pille);
  background: var(--weiss);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-gedaempft);
}
.badge svg { width: 14px; height: 14px; color: var(--sienna); }

.textlink { color: var(--sienna); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.textlink:hover { color: var(--sienna-dunkel); }
.pfeil-link { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--sienna); font-weight: 500; font-size: 0.9375rem; }
.pfeil-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* 6. Karten & Listen -------------------------------------------------------- */
.karte {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 2rem;
}
.karte--warm { background: var(--warmweiss); }
.karte--dunkel { background: var(--braun); border-color: var(--braun); color: var(--text-hell); }
.karte--dunkel h3 { color: var(--text-hell); }
.karte--dunkel p { color: var(--text-hell-gedaempft); }
.karte h3 { margin-bottom: 0.75rem; }
.karte p { color: var(--text-gedaempft); line-height: 1.65; }
a.karte { display: block; transition: border-color var(--uebergang), box-shadow var(--uebergang); }
a.karte:hover { border-color: rgba(160, 82, 45, 0.45); box-shadow: var(--schatten); }

.icon-kreis {
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--sand);
  color: var(--sienna);
  margin-bottom: 1.25rem;
}
.icon-kreis svg { width: 22px; height: 22px; }

.haken-liste li { position: relative; padding-left: 1.75rem; margin-bottom: 0.625rem; line-height: 1.5; }
.haken-liste li::before {
  content: "";
  position: absolute; left: 0; top: 0.35em;
  width: 1rem; height: 1rem;
  background: currentColor;
  color: var(--sienna);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
}
.karte--dunkel .haken-liste li::before, .sektion--dunkel .haken-liste li::before { color: #D9A27F; }

.schritte { display: grid; gap: 1.5rem; }
.schritte li { display: grid; grid-template-columns: 2rem 1fr; gap: 1rem; align-items: start; }
.schritte__nr {
  width: 2rem; height: 2rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--sand);
  color: var(--sienna);
  font-weight: 600;
  font-size: 0.875rem;
}
.schritte strong { display: block; color: var(--braun); margin-bottom: 0.25rem; }
.schritte span { font-size: 0.9375rem; color: var(--text-gedaempft); line-height: 1.55; }

/* 7. Startseite (Hero) --------------------------------------------------- */
.hero { padding-block: 40px 80px; }
.hero__raster { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items: center; min-height: min(720px, calc(100vh - var(--kopfzeile-hoehe) - 120px)); }
.hero .badge { margin-bottom: 1.5rem; }
.hero h1 { margin-bottom: 1.5rem; }
.hero__unterzeile { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 500; line-height: 1.33; color: var(--sienna); margin-bottom: 1rem; }
.hero__text { font-size: 1.125rem; line-height: 1.7; color: var(--text-gedaempft); max-width: 36rem; margin-bottom: 2rem; }
.hero__aktionen { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; }
.hero__hinweis { font-size: 0.875rem; color: var(--text-leise); }
.hero__karte { max-width: 380px; width: 100%; margin-inline: auto; text-align: center; box-shadow: var(--schatten-gross); border-top: 3px solid var(--braun); padding: 2.5rem; }
.hero__bild { width: 100px; height: 100px; border-radius: 50%; overflow: hidden; margin: 0 auto 1.5rem; background: var(--linie); }
.hero__bild img { width: 100%; height: 100%; object-fit: cover; }

/* 8. Reports & Preise --------------------------------------------------- */
.report-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; align-items: stretch; }
.report-karte {
  display: flex; flex-direction: column;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 2rem;
  position: relative;
}
.report-karte--hervorgehoben { background: var(--braun); border: 2px solid var(--sienna); color: var(--text-hell); box-shadow: var(--schatten-gross); }
.report-karte--hervorgehoben h3, .report-karte--hervorgehoben .preis { color: var(--text-hell); }
.report-karte--hervorgehoben p, .report-karte--hervorgehoben li { color: var(--text-hell-gedaempft); }
.report-karte--auf-dunkel { background: rgba(253, 251, 247, 0.06); border-color: rgba(253, 251, 247, 0.16); color: var(--text-hell); }
.report-karte--auf-dunkel h3 { color: var(--text-hell); }
.report-karte--auf-dunkel p, .report-karte--auf-dunkel li { color: var(--text-hell-gedaempft); }
.report-karte__markierung {
  position: absolute; top: -12px; right: 1.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-pille);
  background: var(--sienna); color: var(--weiss);
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.report-karte h3 { margin-bottom: 0.25rem; }
/* Helle Karte innerhalb einer dunklen Sektion: dunkle Schrift erzwingen */
.sektion--dunkel .report-karte:not(.report-karte--auf-dunkel):not(.report-karte--hervorgehoben) { color: var(--text); }
.sektion--dunkel .report-karte:not(.report-karte--auf-dunkel):not(.report-karte--hervorgehoben) h3 { color: var(--braun); }
.sektion--dunkel .report-karte:not(.report-karte--auf-dunkel):not(.report-karte--hervorgehoben) p { color: var(--text-leise); }
.report-karte__unterzeile { font-size: 0.875rem; color: var(--text-leise); margin-bottom: 1.25rem; }
.report-karte .haken-liste { margin-block: 1rem 1.75rem; flex: 1; }
.report-karte .btn { margin-top: auto; }
.preis { font-family: var(--font-serif); font-size: 2.25rem; font-weight: 700; color: var(--braun); line-height: 1; margin-block: 0.75rem 0.25rem; }
.preis small { font-family: var(--font-sans); font-size: 0.875rem; font-weight: 400; color: var(--text-leise); }

.vorschau-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.vorschau-raster figure { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius-klein); overflow: hidden; }
.vorschau-raster figcaption { padding: 0.75rem; font-size: 0.8125rem; color: var(--text-gedaempft); line-height: 1.4; }
.vorschau-raster figcaption strong { display: block; color: var(--braun); }

/* 9. FAQ – Fragen und Antworten stehen vollständig im HTML ---------------- */
.faq { max-width: var(--container-text); margin-inline: auto; display: grid; gap: 0.75rem; }
.faq details { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius-klein); }
.faq summary {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.25rem 1.5rem;
  font-weight: 600;
  color: var(--braun);
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex-shrink: 0;
  width: 10px; height: 10px;
  border-right: 2px solid var(--sienna); border-bottom: 2px solid var(--sienna);
  transform: rotate(45deg) translateY(-3px);
  transition: transform var(--uebergang);
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.faq__antwort { padding: 0 1.5rem 1.5rem; color: var(--text-gedaempft); line-height: 1.7; }
.faq__antwort p + p { margin-top: 0.75rem; }
.faq__antwort .pfeil-link { margin-top: 1rem; }

/* 10. Blog-Übersicht & Artikel ------------------------------------------ */
.blog-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.blog-karte { display: flex; flex-direction: column; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; transition: box-shadow var(--uebergang), border-color var(--uebergang); }
.blog-karte:hover { box-shadow: var(--schatten); border-color: rgba(160, 82, 45, 0.4); }
.blog-karte__bild { aspect-ratio: 16 / 9; overflow: hidden; background: var(--sand); }
.blog-karte__bild img { width: 100%; height: 100%; object-fit: cover; }
.blog-karte__inhalt { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.blog-karte__kategorie { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sienna); margin-bottom: 0.5rem; }
.blog-karte h3 { font-size: 1.25rem; margin-bottom: 0.625rem; }
.blog-karte p { font-size: 0.9375rem; color: var(--text-gedaempft); line-height: 1.6; flex: 1; }
.blog-karte__meta { margin-top: 1rem; font-size: 0.8125rem; color: var(--text-leise); }

/* Artikel-Kopf mit Bild */
.artikel-kopf { position: relative; min-height: 420px; display: flex; align-items: flex-end; overflow: hidden; background: var(--braun); color: var(--text-hell); }
.artikel-kopf__bild { position: absolute; inset: 0; }
.artikel-kopf__bild img { width: 100%; height: 100%; object-fit: cover; }
.artikel-kopf::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(46, 30, 24, 0.85) 0%, rgba(46, 30, 24, 0.35) 55%, rgba(46, 30, 24, 0.15) 100%); }
.artikel-kopf__inhalt { position: relative; z-index: 1; padding-block: 4rem 3rem; }
.artikel-kopf h1 { font-family: var(--font-artikel-ueberschrift); color: var(--text-hell); font-size: clamp(2rem, 4.2vw, 3rem); line-height: 1.1; max-width: 22ch; }
.artikel-kopf__unterzeile { margin-top: 1rem; font-size: 1.25rem; color: var(--text-hell-gedaempft); max-width: 48rem; }
.artikel-kopf--ohne-bild { min-height: 0; background: var(--sand); color: var(--text); }
.artikel-kopf--ohne-bild::after { display: none; }
.artikel-kopf--ohne-bild h1 { color: var(--braun); }
.artikel-kopf--ohne-bild .artikel-kopf__unterzeile { color: var(--text-gedaempft); }

.brotkrumen { font-size: 0.8125rem; color: var(--text-leise); padding-block: 1rem; }
.brotkrumen ol { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; }
.brotkrumen li + li::before { content: "›"; margin-right: 0.5rem; color: var(--linie); }
.brotkrumen a:hover { color: var(--sienna); }
.artikel-kopf .brotkrumen, .artikel-kopf .brotkrumen a { color: var(--text-hell-gedaempft); }

.artikel-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: 0.875rem; color: var(--text-leise); margin-top: 1.25rem; }
.artikel-kopf .artikel-meta { color: var(--text-hell-gedaempft); }

/* Inhaltsverzeichnis */
.inhaltsverzeichnis { background: rgba(160, 82, 45, 0.08); border-left: 4px solid var(--sienna); border-radius: 0 var(--radius-klein) var(--radius-klein) 0; padding: 1.5rem; margin-block: 2.5rem; }
.inhaltsverzeichnis h2 { font-family: var(--font-artikel-ueberschrift); font-size: 1.25rem; margin-bottom: 0.75rem; }
.inhaltsverzeichnis ol { columns: 2; column-gap: 2rem; }
.inhaltsverzeichnis li { break-inside: avoid; padding-block: 0.25rem; font-size: 0.9375rem; }
.inhaltsverzeichnis a { color: var(--braun); }
.inhaltsverzeichnis a:hover { color: var(--sienna); text-decoration: underline; text-underline-offset: 3px; }

/* Fließtext eines Artikels */
.artikel { padding-block: 3rem var(--sektion); }
.prosa { max-width: var(--container-schmal); margin-inline: auto; font-size: 1.125rem; line-height: 1.75; color: #4F3A33; }
.prosa > * + * { margin-top: 1.25em; }
.prosa h2 { font-family: var(--font-artikel-ueberschrift); font-size: clamp(1.5rem, 2.6vw, 1.875rem); line-height: 1.2; margin-top: 2.5em; }
.prosa h3 { font-family: var(--font-artikel-ueberschrift); font-size: clamp(1.125rem, 2vw, 1.25rem); margin-top: 1.75em; }
.prosa h2 + *, .prosa h3 + * { margin-top: 0.75em; }
.prosa a { color: var(--sienna); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prosa a:hover { color: var(--sienna-dunkel); }
.prosa ul, .prosa ol { padding-left: 1.4em; }
.prosa ul { list-style: disc; }
.prosa ol { list-style: decimal; }
.prosa li + li { margin-top: 0.5em; }
.prosa li::marker { color: var(--sienna); }
.prosa blockquote { border-left: 3px solid var(--sienna); padding: 0.25em 0 0.25em 1.25em; font-family: var(--font-serif); font-size: 1.25em; font-style: italic; color: var(--braun); }
.prosa figure img { border-radius: var(--radius-klein); }
.prosa figcaption { font-size: 0.875rem; color: var(--text-leise); margin-top: 0.5rem; }
.prosa table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.prosa th, .prosa td { text-align: left; padding: 0.625rem 0.75rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
.prosa th { color: var(--braun); background: var(--sand); }

.hinweisbox { background: var(--sand); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.5rem; }
.hinweisbox--akzent { background: rgba(160, 82, 45, 0.08); border-color: rgba(160, 82, 45, 0.25); }
.hinweisbox > * + * { margin-top: 0.75em; }
.hinweisbox h3, .hinweisbox h4 { font-family: var(--font-artikel-ueberschrift); }

.artikel-cta { max-width: var(--container-schmal); margin: 3rem auto 0; background: var(--braun); color: var(--text-hell); border-radius: var(--radius); padding: 2.5rem; text-align: center; }
.artikel-cta h2, .artikel-cta h3 { color: var(--text-hell); font-family: var(--font-serif); margin-bottom: 0.75rem; }
.artikel-cta p { color: var(--text-hell-gedaempft); margin-bottom: 1.5rem; }

.verwandt { border-top: 1px solid var(--linie); }
.verwandt .blog-raster { margin-top: 2rem; }

.typ-uebersicht { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.typ-kachel { display: block; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius-klein); overflow: hidden; }
.typ-kachel img { aspect-ratio: 3 / 2; width: 100%; object-fit: cover; }
.typ-kachel span { display: block; padding: 0.75rem 1rem; font-weight: 600; font-size: 0.9375rem; }
.typ-kachel:hover { border-color: rgba(160, 82, 45, 0.45); }

/* 11. Profilseiten ------------------------------------------------------- */
.profil-bild { max-width: var(--container-schmal); margin: 2rem auto 0; border-radius: var(--radius); overflow: hidden; }
.profil-navigation { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.profil-navigation a { padding: 0.375rem 0.875rem; border: 1px solid var(--linie); border-radius: var(--radius-pille); font-size: 0.875rem; background: var(--weiss); }
.profil-navigation a:hover, .profil-navigation a[aria-current="page"] { border-color: var(--sienna); color: var(--sienna); }

/* 12. Chart-Rechner, Checkout, Formulare ---------------------------------- */
.einbettung {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten-gross);
  padding: clamp(1.25rem, 3vw, 2.5rem);
  min-height: 480px;                     /* verhindert Layout-Sprünge beim Laden */
}
.einbettung__platzhalter { display: grid; place-items: center; text-align: center; min-height: 400px; gap: 1rem; color: var(--text-gedaempft); }
.einbettung__platzhalter p { max-width: 32rem; }
.einbettung iframe { width: 100%; border: 0; }
.einbettung-hinweis { font-size: 0.8125rem; color: var(--text-leise); margin-top: 1rem; text-align: center; }
.einbettung-hinweis a { text-decoration: underline; text-underline-offset: 2px; }
.zoho-formular iframe { width: 100%; min-height: 850px; border: 0; }

.seitenkopf { padding-block: 5rem 3rem; text-align: center; }
.seitenkopf h1 { margin-bottom: 1rem; }
.seitenkopf p { color: var(--text-gedaempft); font-size: 1.125rem; max-width: 42rem; margin-inline: auto; line-height: 1.7; }
.seitenkopf--dunkel { background: var(--braun); color: var(--text-hell); }
.seitenkopf--dunkel h1 { color: var(--text-hell); }
.seitenkopf--dunkel p { color: var(--text-hell-gedaempft); }

.kontakt-info dt { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-leise); }
.kontakt-info dd { margin: 0.25rem 0 1.25rem; font-size: 1.0625rem; }
.kontakt-info a { color: var(--sienna); }

/* Rechtstexte */
.rechtstext h2 { font-size: 1.5rem; margin-top: 2.5rem; margin-bottom: 0.75rem; }
.rechtstext h3 { font-size: 1.125rem; margin-top: 1.5rem; margin-bottom: 0.5rem; }
.rechtstext p, .rechtstext li { color: var(--text-gedaempft); line-height: 1.7; }
.rechtstext p + p { margin-top: 0.75rem; }
.rechtstext a { color: var(--sienna); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.zu-pruefen { background: #FFF4D6; border: 1px dashed #C98A00; border-radius: var(--radius-klein); padding: 0.75rem 1rem; color: #6B4A00; font-size: 0.9375rem; }

/* 13. Modal (Bestellformular) -------------------------------------------- */
.modal { margin: auto; border: 0; padding: 0; max-width: min(720px, calc(100vw - 2rem)); width: 100%; border-radius: var(--radius); background: var(--weiss); color: var(--text); box-shadow: var(--schatten-gross); }
.modal::backdrop { background: rgba(46, 30, 24, 0.55); }
.modal__kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--linie); }
.modal__kopf h2 { font-size: 1.375rem; }
.modal__schliessen { width: 40px; height: 40px; border-radius: 50%; font-size: 1.5rem; line-height: 1; color: var(--braun); }
.modal__schliessen:hover { background: var(--sand); }
.modal__inhalt { padding: 1rem 1.5rem 1.5rem; }
.modal__inhalt iframe { width: 100%; height: 640px; border: 0; }

/* 14. Aktionen & Banner -------------------------------------------------- */
.aktionsbanner { display: none; background: var(--sienna); color: var(--weiss); font-size: 0.9375rem; }
.aktionsbanner.ist-aktiv { display: block; }
.aktionsbanner__inner { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; padding-block: 0.625rem; text-align: center; }
.aktionsbanner a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.aktion-hero { padding-block: 4rem; }
.aktion-hero img { border-radius: var(--radius); }

/* 15. Cookie-Banner ---------------------------------------------------- */
.cookie-banner { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 200; display: none; }
.cookie-banner.ist-sichtbar { display: block; }
.cookie-banner__box { max-width: 880px; margin-inline: auto; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: var(--schatten-gross); padding: 1.5rem; display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: center; }
.cookie-banner h2 { font-size: 1.125rem; margin-bottom: 0.5rem; }
.cookie-banner p { font-size: 0.875rem; line-height: 1.6; color: var(--text-gedaempft); }
.cookie-banner a { color: var(--sienna); text-decoration: underline; text-underline-offset: 2px; }
.cookie-banner__knoepfe { display: flex; flex-direction: column; gap: 0.5rem; }
.cookie-banner__knoepfe .btn { min-width: 11rem; }
.cookie-banner__optionen { grid-column: 1 / -1; display: none; border-top: 1px solid var(--linie); padding-top: 1rem; }
.cookie-banner__optionen.ist-offen { display: grid; gap: 0.75rem; }
.cookie-option { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.875rem; }
.cookie-option input { margin-top: 0.2rem; accent-color: var(--braun); width: 1.1rem; height: 1.1rem; }
.cookie-option strong { display: block; color: var(--braun); }
.cookie-option span { color: var(--text-gedaempft); }

/* 16. Fußzeile ------------------------------------------------------------ */
.fusszeile { background: var(--braun); color: var(--text-hell); padding-block: 4rem 2rem; margin-top: auto; }
.fusszeile__raster { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; }
.fusszeile .logo__text { color: var(--text-hell); }
.fusszeile__marke p { margin-top: 1rem; font-size: 0.9375rem; line-height: 1.65; color: var(--text-hell-gedaempft); max-width: 22rem; }
.fusszeile h2 { font-family: var(--font-serif); font-size: 1.125rem; font-weight: 600; color: var(--text-hell); margin-bottom: 1rem; }
.fusszeile li + li { margin-top: 0.5rem; }
.fusszeile a, .fusszeile button { font-size: 0.875rem; color: var(--text-hell-gedaempft); transition: color var(--uebergang); text-align: left; padding: 0; }
.fusszeile a:hover, .fusszeile button:hover { color: var(--text-hell); text-decoration: underline; text-underline-offset: 3px; }
.fusszeile__unten { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(253, 251, 247, 0.15); display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; justify-content: space-between; font-size: 0.8125rem; color: var(--text-hell-gedaempft); }

/* 17. Hilfsklassen ------------------------------------------------------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.springmarke { position: absolute; left: 1rem; top: -100px; z-index: 300; background: var(--braun); color: var(--weiss); padding: 0.75rem 1rem; border-radius: var(--radius-klein); }
.springmarke:focus { top: 1rem; }
.text-mitte { text-align: center; }
.mt-1 { margin-top: 0.5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2rem; } .mt-6 { margin-top: 3rem; }
.mb-1 { margin-bottom: 0.5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; } .mb-4 { margin-bottom: 2rem; }
.aktionen-zeile { display: flex; flex-wrap: wrap; gap: 1rem; }
.aktionen-zeile.text-mitte { justify-content: center; }
.bild-rund { border-radius: var(--radius); overflow: hidden; }

/* 17b. Seitenbausteine (Kernseiten) ------------------------------------- */
.karte-titel { font-size: 1.5rem; margin-bottom: 0.75rem; }
.textblock > * + * { margin-top: 1rem; }
.textblock p { font-size: 1.0625rem; line-height: 1.7; color: var(--text-gedaempft); }
.textblock .akzent, .akzent { font-size: 1.125rem; font-weight: 600; color: var(--sienna); }
.schritte__titel { font-family: var(--font-sans); font-size: 1rem; font-weight: 600; color: var(--braun); margin-bottom: 0.25rem; }
.kopf-mit-aktion { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 3rem; }
.kopf-mit-aktion > div { max-width: 40rem; }
.kopf-mit-aktion h2 { margin-bottom: 0.75rem; }
.eyebrow--hell { color: rgba(253, 251, 247, 0.75); }
.icon-kreis--dunkel { background: rgba(253, 251, 247, 0.1); color: #E7B99A; }
.report-karte .icon-kreis { margin-bottom: 1rem; }
.report-karte > p:not([class]) { font-size: 0.9375rem; line-height: 1.6; color: var(--text-gedaempft); }
.report-karte--hervorgehoben > p:not([class]) { color: var(--text-hell-gedaempft); }
.report-steckbrief { max-width: 360px; justify-self: center; width: 100%; text-align: center; box-shadow: var(--schatten-gross); }
.report-steckbrief__titel { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 700; color: var(--braun); }
.report-steckbrief__untertitel { color: var(--text-leise); margin-bottom: 1.5rem; }
.design-daten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; text-align: left; }
.design-daten dt { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-leise); }
.design-daten dd { margin: 0.125rem 0 0; font-weight: 600; color: var(--braun); }
.ueber-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; align-items: center; }
.ueber-seitenleiste img { width: 100%; box-shadow: var(--schatten-gross); }
.prosa--seite { margin-inline: 0; }
.prosa--seite h2 { margin-top: 0; font-family: var(--font-serif); font-size: clamp(1.875rem, 3vw, 2.25rem); line-height: 1.25; }
.prosa--seite h3 { font-family: var(--font-serif); }
.prosa--seite .eyebrow { margin-bottom: 0.5rem; }
.kontakt-raster { display: grid; grid-template-columns: 1fr 2fr; gap: 2rem; align-items: start; }
.kontakt-raster--ueberlappend { margin-top: -4rem; position: relative; }
.seitenkopf--kompakt { padding-block: 2.5rem 6.5rem; }
.seitenkopf--kompakt h1 { font-size: clamp(1.875rem, 3vw, 2.25rem); margin-bottom: 0.5rem; }
.info-liste { display: grid; gap: 1.25rem; }
.info-liste li { display: grid; grid-template-columns: 40px 1fr; gap: 0.875rem; align-items: center; }
.info-liste .icon-kreis { width: 40px; height: 40px; margin: 0; }
.info-liste .icon-kreis svg { width: 18px; height: 18px; }
.info-liste span { display: block; font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-hell-gedaempft); }
.info-liste a, .info-liste strong { color: var(--text-hell); font-weight: 600; font-size: 0.9375rem; }
.fragenliste { display: grid; gap: 1.5rem; }
.fragenliste > div { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius-klein); padding: 1.5rem; }
.fragenliste h3 { font-family: var(--font-sans); font-size: 1.0625rem; margin-bottom: 0.5rem; }
.fragenliste p { color: var(--text-gedaempft); line-height: 1.65; }
.sektion--anschluss-ueberlappend { padding-top: 3rem; }
.einbettung__intro { text-align: center; color: var(--text-gedaempft); line-height: 1.7; max-width: 44rem; margin: 0 auto 2rem; }
.bodygraph-feld { min-height: 420px; }
.seitenkopf .badge { margin-inline: auto; }
.dunkle-box { background: var(--braun); color: var(--text-hell); border-radius: calc(var(--radius) * 2); padding: clamp(2rem, 5vw, 4rem); max-width: 1024px; margin-inline: auto; }
.dunkle-box h2 { color: var(--text-hell); }
.dunkle-box p { color: var(--text-hell-gedaempft); max-width: 40rem; }
.dunkle-box .haken-liste li::before { color: #D9A27F; }
.hinweis-hell { font-size: 0.875rem; color: var(--text-hell-gedaempft); display: inline-flex; align-items: center; gap: 0.5rem; }
.sektion--dunkel h2 em { color: #D9A27F; }
.report-steckbrief .report-steckbrief__titel { color: var(--text-hell); }
.report-steckbrief .report-steckbrief__untertitel { color: var(--text-hell-gedaempft); }
.report-steckbrief .design-daten dt { color: var(--text-hell-gedaempft); }
.report-steckbrief .design-daten dd { color: var(--text-hell); }
.prosa .btn { text-decoration: none; }
.prosa .btn--primaer { color: var(--weiss); }
.dank-box { display: grid; grid-template-columns: 44px 1fr; gap: 1rem; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.5rem; }
.dank-box .icon-kreis { margin: 0; width: 44px; height: 44px; }
.dank-box h3 { margin-top: 0 !important; font-size: 1.125rem; }
.dank-box p { font-size: 0.9375rem; line-height: 1.65; color: var(--text-gedaempft); margin-top: 0.5rem; }
.seitenkopf--dunkel { padding-block: 4rem; }

/* 18. Responsiv ---------------------------------------------------------- */
/* Navigation: waagerecht, solange sie einzeilig passt (gemessen: 1028 px Bedarf bei vollen Abständen,
   972 px mit den engeren Abständen unten). Darunter Hamburger-Menü. Nie zweizeilig (nowrap). */
.hauptnav, .hauptnav ul { flex-wrap: nowrap; }
@media (max-width: 1199px) {
  .hauptnav { gap: 1.5rem; }
  .hauptnav ul { gap: 1.25rem; }
}
@media (max-width: 999px) {
  .hauptnav { display: none; }
  .menue-knopf { display: inline-flex; }
}
@media (min-width: 1000px) {
  .mobilnav, .mobilnav.ist-offen { display: none; }
}
@media (max-width: 1024px) {
  .raster-4, .vorschau-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* Report- und 3er-Raster bleiben wie live bis 768 px dreispaltig */
  .fusszeile__raster { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  :root { --sektion: 72px; }
  .hero__raster, .zweispaltig, .ueber-raster, .kontakt-raster { grid-template-columns: 1fr; min-height: 0; }
  .ueber-seitenleiste { position: static; max-width: 420px; }
  .hero { padding-block: 32px 64px; }
}
@media (max-width: 720px) {
  :root { --rand: 16px; --sektion: 64px; }
  .raster-2, .raster-3, .raster-4, .report-raster, .blog-raster { grid-template-columns: 1fr; }
  .inhaltsverzeichnis ol { columns: 1; }
  .artikel-kopf { min-height: 340px; }
  .artikel-kopf__inhalt { padding-block: 3rem 2rem; }
  .karte, .report-karte { padding: 1.5rem; }
  .hero__karte { padding: 2rem 1.5rem; }
  .cookie-banner__box { grid-template-columns: 1fr; }
  .cookie-banner__knoepfe { flex-direction: column-reverse; }
  .cookie-banner__knoepfe .btn { width: 100%; }
  .fusszeile__raster { grid-template-columns: 1fr; gap: 2rem; }
  .prosa { font-size: 1.0625rem; }
  .modal__inhalt iframe { height: 70vh; }
}
@media (max-width: 420px) {
  .logo__text { font-size: 1.125rem; }
  .vorschau-raster { grid-template-columns: 1fr 1fr; }
}

/* 19. Bewegung reduzieren, Druck ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media print {
  .kopfzeile, .mobilnav, .fusszeile, .cookie-banner, .aktionsbanner, .einbettung, .modal { display: none !important; }
  body { background: #fff; color: #000; }
  .prosa { max-width: none; font-size: 11pt; }
  .prosa a::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}

/* Nachträge Schritt 6 (Live-Abgleich) */
.sektion--dunkel .textblock p { color: var(--text-hell-gedaempft); }
.karte.karte--dunkel h2, .karte.karte--dunkel h3 { color: var(--text-hell); }
.karte.karte--dunkel p { color: var(--text-hell-gedaempft); }
.prosa .karte-titel { margin-top: 0; }
@media (max-width: 900px) { .kontakt-raster--ueberlappend { margin-top: -3rem; } }
@media (max-width: 420px) {
  .badge { font-size: 0.625rem; letter-spacing: 0.06em; padding-inline: 0.75rem; white-space: nowrap; }
}

/* 20. Blog-Bausteine ------------------------------------------------------
   Gilt für alle Seiten unter /blog (Wrapper <div class="blog">).
   Die Artikel übernehmen Aufbau und Maße der bisherigen Live-Seite.
   Überschriften sind hier Systemschrift, außer mit Klasse „serif“ (wie live).

   Kleine Hilfsklassen (Schritt = 4 px):
     gr-xs … gr-7xl   Schriftgröße (md-gr-*, lg-gr-* ab 768 / 1024 px)
     a-o-N / a-u-N / a-y-N / a-l-N   Außenabstand oben / unten / beides / links
     i-N / i-o-N / i-u-N / i-y-N / i-l-N  Innenabstand
     stapel-N         Abstand zwischen untereinander stehenden Elementen
     luecke-N         Abstand in Rastern und Zeilen
   -------------------------------------------------------------------------- */
.blog { color: var(--braun); }
.blog :where(h1, h2, h3, h4) { font-family: var(--font-artikel-ueberschrift); font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; letter-spacing: normal; text-wrap: wrap; }
.blog .serif { font-family: var(--font-serif); }
.blog img { max-width: 100%; }
.blog svg { display: inline-block; vertical-align: middle; }

/* Schriftgrößen (Tailwind-Skala der Live-Seite) */
.gr-xs { font-size: 0.75rem; line-height: 1.333; }
.gr-s { font-size: 0.875rem; line-height: 1.429; }
.gr-m { font-size: 1rem; line-height: 1.5; }
.gr-l { font-size: 1.125rem; line-height: 1.556; }
.gr-xl { font-size: 1.25rem; line-height: 1.4; }
.gr-2xl { font-size: 1.5rem; line-height: 1.333; }
.gr-3xl { font-size: 1.875rem; line-height: 1.2; }
.gr-4xl { font-size: 2.25rem; line-height: 1.111; }
.gr-5xl { font-size: 3rem; line-height: 1; }
.gr-6xl { font-size: 3.75rem; line-height: 1; }
.gr-7xl { font-size: 4.5rem; line-height: 1; }
@media (min-width: 768px) {
  .md-gr-2xl { font-size: 1.5rem; line-height: 1.333; }
  .md-gr-3xl { font-size: 1.875rem; line-height: 1.2; }
  .md-gr-4xl { font-size: 2.25rem; line-height: 1.111; }
  .md-gr-5xl { font-size: 3rem; line-height: 1; }
  .md-gr-6xl { font-size: 3.75rem; line-height: 1; }
}
@media (min-width: 1024px) {
  .lg-gr-6xl { font-size: 3.75rem; line-height: 1; }
  .lg-gr-7xl { font-size: 4.5rem; line-height: 1; }
}
.fett { font-weight: 700; }
.halbfett { font-weight: 600; }
.mittel { font-weight: 500; }
.kursiv { font-style: italic; }
.mitte { text-align: center; }
.versal { text-transform: uppercase; letter-spacing: 0.05em; }
.versal-weit { text-transform: uppercase; letter-spacing: 0.1em; }
.blog .zeilen-weit { line-height: 1.625; }
.blog .zeilen-eng { line-height: 1.15; }
.kuerzen-2, .kuerzen-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.kuerzen-2 { -webkit-line-clamp: 2; }
.kuerzen-3 { -webkit-line-clamp: 3; }
.mit-icon { display: flex; align-items: center; gap: 0.5rem; }
a.mit-icon { display: inline-flex; }

/* Textfarben – feste Töne statt Transparenz (Kontrast WCAG AA) */
.blog .gedaempft { color: var(--text-gedaempft); }
.blog .leise { color: var(--text-leise); }
.blog .hell { color: #FFFFFF; }
.blog .hell-leise { color: rgba(255, 255, 255, 0.85); }
.blog .sienna { color: var(--sienna); }
.blog .akzent { color: var(--sienna-dunkel); font-size: inherit; font-weight: inherit; }
.blog .gold { color: #8A5E2C; }                 /* live #D4A574 – auf hellem Grund zu kontrastarm; #8A5E2C = 5,5 : 1 */
.blog .flaeche--dunkel .gold, .blog .kasten--dunkel .gold, .blog svg.gold { color: #D4A574; }
.blog .bernstein { color: #B45309; }

/* Abstände */
.a-0 { margin: 0 !important; }
.a-o-1 { margin-top: 0.25rem; } .a-o-2 { margin-top: 0.5rem; } .a-o-4 { margin-top: 1rem; } .a-o-6 { margin-top: 1.5rem; } .a-o-8 { margin-top: 2rem; }
.a-o-12 { margin-top: 3rem; } .a-o-16 { margin-top: 4rem; } .a-o-20 { margin-top: 5rem; }
.a-u-0 { margin-bottom: 0; } .a-u-1 { margin-bottom: 0.25rem; } .a-u-2 { margin-bottom: 0.5rem; } .a-u-3 { margin-bottom: 0.75rem; } .a-u-4 { margin-bottom: 1rem; }
.a-u-6 { margin-bottom: 1.5rem; } .a-u-8 { margin-bottom: 2rem; } .a-u-10 { margin-bottom: 2.5rem; } .a-u-12 { margin-bottom: 3rem; } .a-u-16 { margin-bottom: 4rem; }
.a-y-6 { margin-block: 1.5rem; } .a-y-8 { margin-block: 2rem; } .a-y-12 { margin-block: 3rem; } .a-y-16 { margin-block: 4rem; }
.a-l-8 { margin-left: 2rem; }
.i-4 { padding: 1rem; } .i-6 { padding: 1.5rem; } .i-8 { padding: 2rem; } .i-12 { padding: 3rem; }
.i-o-0 { padding-top: 0; } .i-o-8 { padding-top: 2rem; } .i-o-12 { padding-top: 3rem; } .i-o-32 { padding-top: 8rem; }
.i-u-12 { padding-bottom: 3rem; } .i-u-20 { padding-bottom: 5rem; } .i-u-24 { padding-bottom: 6rem; }
.i-y-1 { padding-block: 0.25rem; } .i-y-2 { padding-block: 0.5rem; } .i-y-3 { padding-block: 0.75rem; } .i-y-4 { padding-block: 1rem; } .i-y-6 { padding-block: 1.5rem; }
.i-y-12 { padding-block: 3rem; } .i-y-16 { padding-block: 4rem; } .i-y-20 { padding-block: 5rem; } .i-y-24 { padding-block: 6rem; }
.i-l-6 { padding-left: 1.5rem; }
.i-o-32.i-y-16 { padding-top: 8rem; }
.stapel-2 > * + * { margin-top: 0.5rem; } .stapel-3 > * + * { margin-top: 0.75rem; } .stapel-4 > * + * { margin-top: 1rem; }
.stapel-6 > * + * { margin-top: 1.5rem; } .stapel-8 > * + * { margin-top: 2rem; } .stapel-12 > * + * { margin-top: 3rem; } .stapel-16 > * + * { margin-top: 4rem; }

/* Breiten */
.breite-2xl { max-width: 42rem; } .breite-3xl { max-width: 48rem; } .breite-4xl { max-width: 56rem; } .breite-5xl { max-width: 64rem; } .breite-6xl { max-width: 72rem; }
.zentriert, .breite-2xl.mitte, p.breite-2xl { margin-inline: auto; }
.blog .breite-3xl:not(.container), .blog .breite-4xl:not(.container) { padding-inline: 1rem; }
.blog .container { padding-inline: 1rem; }
@media (min-width: 640px) { .blog .container { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .blog .container { padding-inline: 2rem; } }
.blog .container.breite-3xl, .blog .container.breite-4xl, .blog .container.breite-6xl { padding-inline: 1rem; }
.relativ { position: relative; overflow: hidden; }
.relativ > :not(.muster):not(.verlauf):not(.verlauf-hell):not(.toenung):not(.hintergrund) { position: relative; z-index: 1; }

/* Raster und Zeilen */
.raster { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) {
  .raster--md-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .raster--md-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .raster--lg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .raster--lg-seite { grid-template-columns: 2fr 1fr; }
}
.raster--mitte { align-items: center; }
.zeile { display: flex; }
.zeile--mitte { align-items: center; }
.zeile--oben { align-items: flex-start; }
.zeile--zwischen { justify-content: space-between; }
.zeile--zentriert { justify-content: center; }
.zeile--umbruch { flex-wrap: wrap; }
.zeile--mobil-stapel { flex-direction: column; }
@media (min-width: 640px) { .zeile--mobil-stapel { flex-direction: row; } }
.luecke-1 { gap: 0.25rem; } .luecke-2 { gap: 0.5rem; } .luecke-3 { gap: 0.75rem; } .luecke-4 { gap: 1rem; } .luecke-6 { gap: 1.5rem; }
.luecke-8 { gap: 2rem; } .luecke-12 { gap: 3rem; } .luecke-16 { gap: 4rem; }
.zeile > div:not([class]) { min-width: 0; }
.fest { flex-shrink: 0; }
.wachsen { flex-grow: 1; }
.reihe-1 { order: 1; } .reihe-2 { order: 2; }
@media (min-width: 768px) { .reihe-1 { order: 2; } .reihe-2 { order: 1; } }
@media (min-width: 1024px) { .klebend { position: sticky; top: 8rem; align-self: start; } }
.linie-oben { border-top: 1px solid var(--linie); }
.linie-unten { border-bottom: 1px solid var(--linie); }
.nur-desktop { display: none; }
@media (min-width: 768px) { .nur-desktop { display: inline-block; } span.nur-desktop { display: inline; } }

/* Flächen (ganze Abschnitte) */
.flaeche--warm { background: var(--warmweiss); }
.flaeche--weiss { background: var(--weiss); }
.flaeche--dunkel { background: var(--braun); color: var(--warmweiss); }
.seitenverlauf { background: linear-gradient(to bottom, var(--warmweiss), var(--sand)); }
.kopfverlauf { position: relative; overflow: hidden; background: linear-gradient(to bottom, rgba(93, 64, 55, 0.05), transparent); }
.muster { position: absolute; inset: 0; opacity: 0.1; pointer-events: none; }
.muster svg { width: 100%; height: 100%; }
.toenung { position: absolute; inset: 0; background: rgba(93, 64, 55, 0.8); mix-blend-mode: multiply; }

/* Kästen */
.kasten { background: var(--weiss); border: 1px solid var(--linie); border-radius: 12px; padding: 1.5rem; }
.kasten--warm { background: var(--warmweiss); }
.kasten--sand { background: #F5F0E6; }
.kasten--zart { background: rgba(93, 64, 55, 0.07); border-color: rgba(93, 64, 55, 0.2); }
.kasten--sienna { background: rgba(160, 82, 45, 0.1); border-color: rgba(160, 82, 45, 0.3); }
.kasten--gelb { background: #FFFBEB; border-color: #FCD34D; }
.kasten--dunkel { background: var(--braun); border-color: var(--braun); color: #FFFFFF; }
.kasten--verlauf { background: linear-gradient(to right, var(--braun), #8B7355); border: 0; color: #FFFFFF; }
.kasten--p0 { padding: 1.5rem 0; }
.kasten--p4 { padding: 1rem; }
.kasten--p8 { padding: 2rem; }
.kasten--p12 { padding: 2rem; }
@media (min-width: 768px) { .kasten--p12 { padding: 3rem; } }
.kasten--r0 { border-radius: 0; }
.kasten--r8 { border-radius: 8px; }
.kasten--r16 { border-radius: 16px; }
.kasten--ohne-rahmen { border-color: transparent; }
.kasten--schatten-s { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); }
.kasten--schatten { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); }
.kasten--hover { transition: box-shadow var(--uebergang), transform var(--uebergang); }
.kasten--hover:hover { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); }
.kasten.i-6 { padding: 1.5rem; } .kasten.i-8 { padding: 2rem; }
.kasten > .i-8, .kasten > .i-6 { padding: 0; }
.kasten.kasten--p0 > .i-8 { padding: 2rem; }
.kasten.kasten--p0 > .i-6 { padding: 1.5rem; }
.kasten.kasten--p0 { overflow: hidden; }
.kasten > .hintergrundbild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.1; transition: opacity var(--uebergang); }
.kasten:has(> .hintergrundbild) { position: relative; overflow: hidden; }
.kasten:has(> .hintergrundbild):hover > .hintergrundbild { opacity: 0.2; }
.kasten:has(> .hintergrundbild) > :not(.hintergrundbild) { position: relative; }

/* Hinweis-Kästen mit farbiger Linie links */
.hinweis { border-left: 4px solid var(--sienna-dunkel); background: rgba(139, 69, 19, 0.1); padding: 1.5rem; border-radius: 0 8px 8px 0; }
.hinweis--gold { border-left-color: #D4A574; background: #F5F0E6; }
.hinweis--sienna { border-left-color: var(--sienna); background: rgba(160, 82, 45, 0.05); border-radius: 0; }
.hinweis--braun { border-left-color: var(--braun); background: #F5F1ED; border-radius: 0; }
.hinweis--sekundaer { border-left-color: var(--braun); background: rgba(245, 239, 230, 0.2); border-radius: 8px; }
.hinweis--profil { border-left-color: var(--sienna); background: var(--warmweiss); border-radius: 12px; padding: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); }
.hinweis--profil { padding-block: 1.5rem; }
.hinweis--profil > div { padding: 2rem; }

/* Knöpfe im Blog (Maße wie live) */
.blog .btn { font-size: 1rem; padding: 0.75rem 1.5rem; min-height: 0; }
.blog .btn--eckig { border-radius: 8px; }
.blog .btn--blog-klein { font-size: 0.875rem; padding: 0.5rem 1rem; }
.blog .btn--blog-gross { padding: 0.75rem 2rem; font-weight: 600; }
.blog a.btn.btn--blog-gross[class*="gold"] { padding-block: 1rem; }
.btn--akzent { background: var(--sienna-dunkel); color: #FFFFFF; }
.btn--akzent:hover { background: #74390F; }
.btn--gold { background: #D4A574; color: #3E2A24; }   /* live weiße Schrift – zu kontrastarm */
.btn--gold:hover { background: #C39463; }
.btn--weiss { background: #FFFFFF; color: var(--braun); }
.btn--weiss:hover { background: var(--warmweiss); }
.zurueck-link { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 500; color: var(--text-leise); padding: 0.5rem 0; margin-bottom: 2rem; transition: padding var(--uebergang), color var(--uebergang); }
.zurueck-link:hover { color: var(--braun); padding-left: 0.5rem; }
.flaeche--dunkel .zurueck-link, .zurueck-link.hell-leise { color: rgba(255, 255, 255, 0.8); }
.blog .textlink { font-weight: inherit; }
.ivz-link { display: block; margin-bottom: 0.5rem; color: var(--sienna-dunkel); }
.ivz-link:hover { text-decoration: underline; }

/* Etiketten (Pillen) */
.etikett { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.75rem; font-weight: 500; }
.etikett--gross { font-size: 0.875rem; }
.etikett--eckig { border-radius: 4px; }
.etikett--weiss { background: #FFFFFF; border: 1px solid var(--linie); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); color: var(--braun); padding: 0.5rem 1rem; }
.etikett--glas { background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.12); color: #FFFFFF; }
.flaeche--dunkel .etikett--glas { padding: 0.5rem 1rem; font-size: 0.875rem; }
.etikett--sienna { background: rgba(160, 82, 45, 0.1); color: var(--sienna); }
.etikett--rahmen { border: 1px solid rgba(160, 82, 45, 0.3); color: var(--sienna); }
.etikett--zart { background: rgba(93, 64, 55, 0.05); color: var(--braun); }
.etikett svg { width: 16px; height: 16px; }

/* Nummern-Kreise */
.nummer { display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; flex-shrink: 0; border-radius: 50%; background: var(--braun); color: #FFFFFF; font-weight: 700; font-size: 1.125rem; }
.nummer--klein { width: 2rem; height: 2rem; font-size: 1rem; }
.nummer--rahmen { background: var(--warmweiss); border: 2px solid #D4A574; color: #8A5E2C; font-family: var(--font-serif); }
.nummer--sienna { background: var(--sienna); }
.nummer--gold { background: #D4A574; color: #3E2A24; }
.nummer--zart { background: rgba(93, 64, 55, 0.1); color: var(--braun); }
.nummer--zart-sienna { background: rgba(160, 82, 45, 0.1); color: var(--sienna); }
.nummer--zart-hell { background: rgba(255, 255, 255, 0.1); color: #FFFFFF; }

/* Listen, Tabelle, Zitat */
.blog .punkte { list-style: disc; padding-left: 1.5rem; }
.blog .nummern { list-style: decimal; padding-left: 1.5rem; }
.blog .punkte--innen { list-style-position: inside; padding-left: 0; }
.tabelle-rahmen { overflow-x: auto; }
.tabelle { width: 100%; border-collapse: collapse; }
.tabelle th, .tabelle td { border: 1px solid var(--linie); padding: 1rem; text-align: left; vertical-align: top; }
.tabelle thead tr { background: var(--braun); color: var(--warmweiss); }
.tabelle th { font-weight: 700; }
.tabelle tbody tr:hover { background: rgba(245, 239, 230, 0.5); }
.zitat { border-left: 4px solid var(--sienna); padding: 1rem 0 1rem 1.5rem; }

/* Titelbild mit Überlagerung (Typ- und Beziehungsartikel) */
.bildkopf { position: relative; height: 24rem; overflow: hidden; }
@media (min-width: 768px) { .bildkopf--hoch { height: 600px; } }
.bildkopf > img { width: 100%; height: 100%; object-fit: cover; }
.bildkopf > img.oben { object-position: top; }
.bildkopf__text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding-inline: 1rem; background: rgba(0, 0, 0, 0.3); }
.bildkopf__text--dunkel { background: rgba(0, 0, 0, 0.5); }

/* Bild-Kacheln (andere Typen) */
.bildkachel { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--linie); border-radius: 8px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); transition: box-shadow var(--uebergang); }
.bildkachel:hover { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); }
.bildkachel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.bildkachel:hover img { transform: scale(1.1); }
.bildkachel__text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.5rem; text-align: center; background: rgba(0, 0, 0, 0.6); color: #FFFFFF; transition: background 0.3s ease; }
.bildkachel:hover .bildkachel__text { background: rgba(0, 0, 0, 0.5); }
.bildkachel__knopf { display: inline-block; border-radius: 999px; background: rgba(255, 255, 255, 0.2); padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 600; }
.bildkachel:hover .bildkachel__knopf { background: rgba(255, 255, 255, 0.3); }

/* Titelbild mit Bildunterschrift (Profilseiten, 12 Profile) */
.titelbild { position: relative; max-width: 64rem; margin-inline: auto; overflow: hidden; border-radius: 16px; background: var(--linie); box-shadow: 0 25px 50px -12px rgba(93, 64, 55, 0.1); }
.titelbild--2-1 { aspect-ratio: 2 / 1; }
.titelbild--16-9 { aspect-ratio: 16 / 9; }
.titelbild--21-9 { aspect-ratio: 21 / 9; max-width: none; }
.titelbild > img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.titelbild:hover > img { transform: scale(1.05); }
.verlauf { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent 50%); opacity: 0.6; }
.verlauf--braun { background: linear-gradient(to top, rgba(93, 64, 55, 0.5), transparent); opacity: 1; }
.titelbild__text { position: absolute; left: 0; right: 0; bottom: 0; padding: 2rem; color: #FFFFFF; }
.titelbild__text--zeile { left: 1.5rem; right: 1.5rem; bottom: 1.5rem; padding: 0 1rem; display: flex; justify-content: space-between; font-size: 0.875rem; font-weight: 500; color: rgba(255, 255, 255, 0.9); }

/* Artikelkarten (Übersichten, verwandte Artikel) */
.artikelkarte { position: relative; display: flex; flex-direction: column; gap: 1.5rem; padding-block: 1.5rem; background: var(--weiss); border: 1px solid var(--linie); border-radius: 12px; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); transition: box-shadow 0.3s ease; }
.artikelkarte:hover { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); }
.artikelkarte__bild { position: relative; height: 12rem; overflow: hidden; }
.artikelkarte__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.artikelkarte:hover .artikelkarte__bild img { transform: scale(1.05); }
.artikelkarte__kategorie, .artikelkarte__pillar { position: absolute; top: 1rem; z-index: 1; padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.artikelkarte__kategorie { left: 1rem; background: rgba(255, 255, 255, 0.92); color: var(--braun); }
.artikelkarte__pillar { right: 1rem; background: rgba(160, 82, 45, 0.92); color: #FFFFFF; }
.artikelkarte__kopf { padding: 0 1.5rem 0.5rem; }
.artikelkarte__meta { display: flex; gap: 1rem; margin-bottom: 0.75rem; font-size: 0.75rem; color: var(--text-leise); }
.artikelkarte__meta span { display: inline-flex; align-items: center; gap: 0.25rem; }
.artikelkarte h3 { font-family: var(--font-serif); font-size: 1.25rem; line-height: 1.4; font-weight: 700; color: var(--braun); }
.artikelkarte h3 a { transition: color var(--uebergang); }
.artikelkarte h3 a::after { content: ""; position: absolute; inset: 0; z-index: 2; }   /* ganze Karte klickbar */
.artikelkarte:hover h3 a { color: var(--sienna); }
.artikelkarte__text { flex-grow: 1; padding: 0 1.5rem; font-size: 0.875rem; line-height: 1.625; color: var(--text-leise); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.artikelkarte__fuss { padding: 0 1.5rem; }
.artikelkarte__weiter { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.875rem; font-weight: 700; color: var(--sienna); }
.artikelkarte:hover .artikelkarte__weiter svg { transform: translateX(4px); }
.artikelkarte__weiter svg { transition: transform var(--uebergang); }
.artikelkarte[hidden] { display: none; }

/* Blog-Übersicht: Kategorie-Filter */
.kategorien { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.kategorien button { padding: 0.5rem 1.5rem; border-radius: 999px; font-size: 0.875rem; font-weight: 500; background: #FFFFFF; color: var(--text-gedaempft); border: 1px solid var(--linie); transition: background var(--uebergang), color var(--uebergang); }
.kategorien button:hover { background: rgba(93, 64, 55, 0.05); }
.kategorien button[aria-pressed="true"] { background: var(--braun); color: #FFFFFF; border-color: var(--braun); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
.keine-artikel { text-align: center; padding-block: 4rem; font-size: 1.125rem; color: var(--text-leise); }

/* Blog-Navigation (Zurück / Artikel lesen / Chart) */
.blognavigation { background: rgba(245, 239, 230, 0.5); border-block: 1px solid var(--linie); padding-block: 1.5rem; margin-bottom: 2rem; }
.blognavigation__raster { max-width: 56rem; margin-inline: auto; padding-inline: 1rem; display: grid; gap: 1rem; }
@media (min-width: 768px) { .blognavigation__raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.blognavigation__eintrag { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1rem; border: 1px solid var(--linie); border-radius: 8px; background: var(--warmweiss); font-size: 0.875rem; font-weight: 600; transition: background var(--uebergang), border-color var(--uebergang); }
a.blognavigation__eintrag:hover { background: var(--sand); border-color: var(--sienna-dunkel); }
.blognavigation__eintrag--aktiv { opacity: 0.5; padding-inline: 1.5rem; }
.blognavigation__eintrag--primaer { background: var(--braun); color: var(--warmweiss); border-color: var(--braun); padding-inline: 1.5rem; }
a.blognavigation__eintrag--primaer:hover { background: var(--braun-dunkel); }
.bei-hover { opacity: 0; transition: opacity var(--uebergang); }
a:hover .bei-hover, a:focus-visible .bei-hover, .kasten--hover:hover .bei-hover { opacity: 1; }
@media (hover: none) { .bei-hover { opacity: 1; } }
@media (min-width: 768px) { .md-anheben { transform: translateY(-1rem); } }
.blog img.bildband { width: 100%; height: 400px; object-fit: cover; }
.verlauf-hell { position: absolute; top: 0; left: 0; right: 0; height: 6rem; background: linear-gradient(to top, var(--warmweiss), transparent); }   /* live: inset-0 + h-24 → oben */
.hintergrund { position: absolute; inset: 0; pointer-events: none; }
.hintergrund img { width: 100%; height: 100%; object-fit: cover; }
.hintergrund--10 { opacity: 0.1; } .hintergrund--20 { opacity: 0.2; }
.trennlinie { border: 0; border-top: 1px solid var(--linie); margin-block: 3rem; }

/* 21. Checkout (BodyGraph) – wie live ohne Kopf- und Fußzeile ------------ */
.checkout { min-height: 100vh; background: var(--warmweiss); padding: 5rem 1rem; }
.checkout__kopf { max-width: 56rem; margin: 0 auto 3rem; text-align: center; }
.checkout__kopf h1 { font-family: var(--font-serif); font-weight: 400; font-size: 2.25rem; line-height: 1.111; margin-bottom: 1rem; }
@media (min-width: 768px) { .checkout__kopf h1 { font-size: 3rem; line-height: 1; } }
.checkout__kopf p { font-size: 1.125rem; line-height: 1.556; color: var(--text-leise); }   /* live #8D6E63 – zu kontrastarm */
.checkout__karte { max-width: 54rem; margin-inline: auto; background: var(--weiss); border: 1px solid var(--linie); border-radius: 16px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); padding: 1.5rem; }
@media (min-width: 768px) { .checkout__karte { padding: 2.5rem; } }
.checkout__formular { min-height: 400px; display: flex; align-items: center; justify-content: center; width: 100%; }
.checkout__formular > * { width: 100%; }

/* Nachträge Schritt 6 – Reports/Über mich an Live angeglichen (30.09.2026) */
.container--5xl { max-width: 64rem; }
.container--6xl { max-width: 72rem; }
.sektion-kopf--breit { max-width: none; }
.sektion-kopf--breit p { max-width: 42rem; margin-inline: auto; }
.h2--gross { font-size: clamp(2.25rem, 4vw, 3rem); line-height: 1.2; }
.lead--gross { font-size: 1.25rem; }
.etikett-rahmen { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.75rem; border: 1px solid rgba(160, 82, 45, 0.5); border-radius: 4px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #E7B99A; }   /* live #A0522D – auf Braun zu kontrastarm; #E7B99A = 5,1 : 1 */
.etikett-rahmen svg { width: 16px; height: 16px; }
.akzent-hell { color: #D9A27F; }            /* live #A0522D auf Braun (1,6 : 1) */
.dunkle-box--breit { max-width: none; }
.dunkle-box__text { max-width: 34rem; }
.dunkle-box__text p { max-width: none; }
.ueber-raster--haelften { grid-template-columns: 1fr 1fr; }
.ueber-foto { aspect-ratio: 3 / 4; border-radius: 16px; background: var(--linie); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
.ueber-foto img { width: 100%; height: 100%; object-fit: cover; }
.prosa .hervorhebung { font-weight: 500; color: var(--braun); }
.dank-box--warm { background: var(--warmweiss); border-color: rgba(160, 82, 45, 0.3); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }
.dank-box--warm .icon-kreis { background: rgba(160, 82, 45, 0.1); color: var(--sienna); }
.karte--kompakt { padding: 1.5rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }
.btn--breit { padding-inline: 2rem; min-height: 40px; }
@media (max-width: 900px) { .ueber-raster--haelften { grid-template-columns: 1fr; } }
/* Markierungen „RECHTLICH ZU PRÜFEN“ (nur Arbeitsversion, vor Livegang entfernen) */
.zu-pruefen { margin-block: 1rem 1.25rem; line-height: 1.55; border-left-width: 4px; border-left-style: solid; }
.zu-pruefen strong { display: block; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.25rem; }
.rechtstext > .zu-pruefen:first-child { margin-top: 0; margin-bottom: 2rem; }

/* Schlanke Fußzeile der Checkout-Seiten (DE6) */
.fusszeile-mini { background: var(--warmweiss); border-top: 1px solid var(--linie); padding: 1.25rem 1rem; }
.fusszeile-mini nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.5rem; }
.fusszeile-mini a, .fusszeile-mini button { font-size: 0.8125rem; color: var(--text-leise); padding: 0.25rem 0; }
.fusszeile-mini a:hover, .fusszeile-mini button:hover { color: var(--braun); text-decoration: underline; text-underline-offset: 3px; }
.checkout { min-height: calc(100vh - 60px); }

@media (max-width: 767px) { .report-raster, .raster-3 { grid-template-columns: 1fr; } }
@media (min-width: 768px) and (max-width: 1024px) { .report-karte { padding: 1.5rem; } .report-raster { gap: 1rem; } }

/* 22. Blog-Übersicht nach Themen (V1) und „Weiterlesen“ ------------------ */
.themen { display: grid; gap: 4.5rem; }
.thema[hidden] { display: none; }
.thema__titel { font-size: 1.875rem; line-height: 1.2; color: var(--braun); margin-bottom: 1.5rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--linie); }
.thema__vertiefung { margin-top: 1.5rem; }
.thema__mehr { margin-top: 1.25rem; }
.artikelkarte__koerper { display: flex; flex-direction: column; flex: 1; gap: 1.5rem; }
@media (min-width: 768px) {
  .artikelkarte--einstieg { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); padding: 0; gap: 0; }
  .artikelkarte--einstieg .artikelkarte__bild { height: 100%; min-height: 18rem; }
  .artikelkarte--einstieg .artikelkarte__koerper { padding-block: 2rem; justify-content: center; }
  .artikelkarte--einstieg h3 { font-size: 1.625rem; line-height: 1.25; }
  .artikelkarte--einstieg .artikelkarte__text { font-size: 1rem; -webkit-line-clamp: 4; }
}
.artikelkarte--kompakt .artikelkarte__bild { height: 9rem; }
.artikelkarte--kompakt h3 { font-size: 1.0625rem; line-height: 1.35; }
.artikelkarte--kompakt .artikelkarte__text { -webkit-line-clamp: 2; }
.profil-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.75rem; margin-top: 1.5rem; }
.profil-liste a { display: flex; gap: 0.75rem; align-items: baseline; padding: 0.875rem 1rem; background: var(--weiss); border: 1px solid var(--linie); border-radius: 8px; font-size: 0.9375rem; color: var(--braun); transition: border-color var(--uebergang), box-shadow var(--uebergang); }
.profil-liste a:hover { border-color: rgba(160, 82, 45, 0.45); box-shadow: var(--schatten); }
.profil-liste strong { font-family: var(--font-serif); font-size: 1.125rem; color: var(--sienna); min-width: 2.25rem; }

.weiterlesen { border-top: 1px solid var(--linie); background: var(--warmweiss); padding-block: 3rem 3.5rem; }
.weiterlesen__ueberschrift { font-size: 1.5rem; color: var(--braun); margin-bottom: 1.25rem; }
.weiterlesen__liste { display: grid; gap: 1rem; }
@media (min-width: 768px) { .weiterlesen__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.weiterlesen__link { position: relative; display: flex; flex-direction: column; gap: 0.375rem; height: 100%; padding: 1.25rem 2.75rem 1.25rem 1.25rem; background: var(--weiss); border: 1px solid var(--linie); border-radius: 12px; transition: border-color var(--uebergang), box-shadow var(--uebergang); }
.weiterlesen__link:hover { border-color: rgba(160, 82, 45, 0.45); box-shadow: var(--schatten); }
.weiterlesen__thema { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sienna); }
.weiterlesen__titel { font-family: var(--font-serif); font-size: 1.0625rem; font-weight: 700; line-height: 1.35; color: var(--braun); }
.weiterlesen__pfeil { position: absolute; right: 1.125rem; top: 50%; transform: translateY(-50%); color: var(--sienna); }
@media (min-width: 768px) {
  .artikelkarte--einstieg .artikelkarte__bild { position: relative; height: auto; min-height: 20rem; }
  .artikelkarte--einstieg .artikelkarte__bild img { position: absolute; inset: 0; width: 100%; height: 100%; }
}
.artikelkarte__koerper .artikelkarte__text { flex-grow: 0; }
.artikelkarte__koerper .artikelkarte__fuss { margin-top: auto; }