/* Schriften (lokal, ohne Google): Fraunces für Überschriften, Nunito Sans für Text */
@font-face { font-family: "Fraunces"; src: url("fonts/fraunces.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Nunito Sans"; src: url("fonts/nunitosans.woff2") format("woff2"); font-weight: 200 1000; font-display: swap; }

/* Design „Erde“: Sand, Petrol, Oliv – warm, organisch, geerdet */
:root {
  --sand: #EFE6D8;
  --sand-hell: #F8F3EA;
  --sand-tief: #C9B48F;
  --linie: #DDD0BA;
  --petrol: #2F5D62;
  --petrol-tief: #234649;
  --oliv: #7A8B4E;
  --moos: #2F3B24;
  --ocker: #B98A3A;
  --ocker-tief: #8C6118;
  --ocker-dunkel: #5C3F10;
  --honig: #E0AF55;
  --honig-hell: #F3DFAE;
  --braun: #33250A;
  --text: #3B3221;
  --leise: #6A5D45;

  --sans: "Nunito Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --mass: 100%;
  --breit: 76rem;
  --blob-a: 63% 37% 54% 46% / 55% 42% 58% 45%;
  --blob-b: 40% 60% 42% 58% / 58% 45% 55% 42%;
  --blob-c: 52% 48% 38% 62% / 45% 58% 42% 55%;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body { margin: 0; background: var(--sand); color: var(--text); font-family: var(--sans); font-size: 1.2rem; line-height: 1.75; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--petrol); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--oliv); outline-offset: 3px; border-radius: 6px; }
strong { font-weight: 800; color: var(--moos); }

.skip { position: absolute; left: -999px; top: 0; background: var(--petrol); color: #fff; padding: .6rem 1rem; z-index: 100; }
.skip:focus { left: 1rem; top: 1rem; }
.wrap { max-width: var(--breit); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem); }

h1, h2, h3 { font-family: var(--serif); color: var(--moos); font-weight: 500; letter-spacing: -.015em; }
h2 { font-size: clamp(2.1rem, 4.3vw, 3.1rem); line-height: 1.1; margin: 0 0 1.25rem; }
h3 { font-size: 1.45rem; line-height: 1.3; margin: 0 0 .5rem; letter-spacing: -.005em; font-weight: 600; }

.ringe { position: absolute; pointer-events: none; }
.zweig { position: absolute; color: var(--petrol); opacity: .28; pointer-events: none; }

/* ---------- Kopfzeile ---------- */
.kopf { position: sticky; top: 0; z-index: 50; background: rgba(239,230,216,.93); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 1.04rem; }
.kopf .wrap { max-width: 92rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 5rem; }
.marke { flex-shrink: 0; display: flex; align-items: center; gap: .8rem; text-decoration: none; color: var(--petrol); }
.marke img { width: 3.1rem; }
.marke span { display: flex; flex-direction: column; line-height: 1.2; }
.marke strong { font-family: var(--serif); font-weight: 600; font-size: 1.12rem; color: var(--petrol); white-space: nowrap; }
.marke small { font-size: .88rem; color: var(--leise); }
.hauptnav ul { display: flex; gap: .2rem; list-style: none; margin: 0; padding: 0; }
.hauptnav a { display: block; padding: .5rem .7rem; color: var(--text); text-decoration: none; white-space: nowrap; border-radius: 12px; }
.hauptnav a:hover { background: var(--sand-hell); }
.hauptnav a[aria-current="page"] { color: var(--petrol); box-shadow: inset 0 -2px 0 var(--oliv); border-radius: 0; }
.kopf .tel { text-decoration: none; background: var(--petrol); color: #fff; padding: .65rem 1.15rem; border-radius: 14px; font-weight: 600; white-space: nowrap; }
.kopf .tel:hover { background: var(--petrol-tief); }

.menue { display: none; position: relative; }
.menue summary { list-style: none; cursor: pointer; padding: .6rem 1.1rem; background: var(--sand-hell); border-radius: 14px; font-weight: 600; color: var(--petrol); }
.menue summary::-webkit-details-marker { display: none; }
.menue[open] summary { background: var(--petrol); color: #fff; }
.menue ul { position: absolute; right: 0; top: calc(100% + .6rem); background: var(--sand-hell); list-style: none; margin: 0; padding: .5rem; min-width: 15rem; border-radius: 20px; box-shadow: 0 20px 40px rgba(59,50,33,.18); }
.menue li a { display: block; padding: .65rem 1rem; color: var(--text); text-decoration: none; border-radius: 12px; }
.menue li a:hover { background: var(--sand); }
.menue li a[aria-current="page"] { color: var(--petrol); font-weight: 600; }
@media (max-width: 1260px) { .hauptnav { display: none; } .menue { display: block; } }
@media (max-width: 520px) { .marke { flex-shrink: 1; } .marke img { width: 2.6rem; } .marke strong { white-space: normal; font-size: .95rem; } .marke small { display: none; } .kopf .tel { display: none; } }

/* ---------- Knöpfe ---------- */
.knoepfe { display: flex; flex-wrap: wrap; gap: .75rem; }
.knopf { display: inline-block; text-decoration: none; font-weight: 600; padding: 1rem 1.6rem; border-radius: 14px; font-size: 1.08rem; line-height: 1.2; }
.knopf.voll { background: var(--petrol); color: #fff; }
.knopf.voll:hover { background: var(--petrol-tief); }
.knopf.rand { color: var(--petrol); box-shadow: inset 0 0 0 1.5px var(--petrol); }
.knopf.rand:hover { background: var(--sand-hell); }
.weiter { font-weight: 600; text-decoration: none; }
.weiter::after { content: " →"; }
.weiter:hover { text-decoration: underline; }

/* ---------- Hero ---------- */
.hero { position: relative; z-index: 2; isolation: isolate; overflow-x: clip; overflow-y: visible; padding: clamp(2rem, 5vw, 4rem) 0 clamp(3.5rem, 7vw, 6rem); }
.hero .zweig { left: -60px; bottom: -40px; width: 240px; z-index: -1; }
.hero-raster { z-index: 0; }
.spiralbruecke { position: absolute; z-index: -1; right: -7vw; bottom: 0; width: clamp(440px, 54vw, 820px); aspect-ratio: 1; transform: translateY(18%) rotate(15deg); color: var(--ocker); pointer-events: none; }
.spiralbruecke .ringe { position: static; width: 100%; height: 100%; display: block; }
.spiralbruecke path { stroke-width: 1.3; }
@media (max-width: 860px) { .hero .zweig { display: none; } .spiralbruecke { width: 88vw; right: -38vw; bottom: auto; top: 2rem; transform: rotate(15deg); opacity: .6; } }
.hero-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; position: relative; }
.hero h1 { font-size: clamp(3rem, 6vw, 5.4rem); line-height: 1; letter-spacing: -.02em; margin: 0 0 1.5rem; }
.hero .einleitung { font-size: clamp(1.2rem, 1.9vw, 1.42rem); line-height: 1.65; color: var(--leise); margin: 0 0 2.2rem; max-width: 31rem; }
.stempel { display: flex; align-items: center; gap: .6rem; margin: 2rem 0 0; color: var(--leise); }
.stempel i { width: 10px; height: 10px; border-radius: 50%; background: var(--oliv); flex-shrink: 0; }
.blobrand { position: relative; width: min(100%, 34rem); aspect-ratio: 1; justify-self: center; }
.blobrand::before { content: ""; position: absolute; inset: -4%; border-radius: var(--blob-b); background: var(--sand-tief); transform: rotate(-12deg) translate(-2.5%, 2%); animation: atmen 14s ease-in-out infinite alternate; }
.blob { position: relative; width: 100%; height: 100%; border-radius: var(--blob-a); overflow: hidden; }
.blob img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
@keyframes atmen { to { transform: rotate(-4deg) translate(-1%, 1%); border-radius: var(--blob-c); } }
@media (prefers-reduced-motion: reduce) { .blobrand::before { animation: none; } }
@media (max-width: 860px) {
  .hero-raster { grid-template-columns: 1fr; }
  .blobrand { width: min(78%, 22rem); order: -1; margin: 1rem auto 1.5rem; }
}

/* ---------- Seitenkopf Unterseiten ---------- */
.seitenkopf { position: relative; isolation: isolate; overflow: hidden; padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(3rem, 6vw, 4.5rem); }
.seitenkopf .zweig { left: -60px; bottom: -70px; width: 200px; }
.zweispaltig.links:has(.artikel) { align-items: start; }
.seitenkopf .wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 17.5rem; gap: 3rem; align-items: end; }
.brotkrumen { font-size: 1rem; color: var(--leise); margin: 0 0 1rem; }
.brotkrumen a { color: var(--leise); }
.seitenkopf h1 { font-size: clamp(2.5rem, 5.8vw, 4.5rem); line-height: 1.05; letter-spacing: -.02em; margin: 0 0 1rem; max-width: 16ch; }
.seitenkopf .einleitung { font-size: clamp(1.15rem, 1.8vw, 1.35rem); color: var(--leise); max-width: 38rem; margin: 0; }
.terminkarte .ringe { z-index: -1; width: 24rem; height: 24rem; right: -8rem; top: -8rem; color: var(--ocker); opacity: .9; transform: rotate(15deg); }
.terminkarte { position: relative; background: var(--sand-hell); border-radius: 28px 28px 28px 6px; padding: 1.3rem 1.4rem; display: grid; grid-template-columns: 3.6rem 1fr; gap: .2rem 1rem; align-items: center; }
.terminkarte img { width: 3.6rem; height: 3.6rem; border-radius: var(--blob-a); object-fit: cover; grid-row: span 2; }
.terminkarte p { margin: 0; font-size: .98rem; color: var(--leise); line-height: 1.35; }
.terminkarte p strong { display: block; font-size: 1.05rem; }
.terminkarte a { grid-column: 1 / -1; margin-top: .9rem; text-align: center; text-decoration: none; background: var(--petrol); color: #fff; font-weight: 600; padding: .75rem 1rem; border-radius: 12px; }
.terminkarte a:hover { background: var(--petrol-tief); }
@media (max-width: 800px) { .seitenkopf .wrap { grid-template-columns: 1fr; gap: 2rem; } .terminkarte { max-width: 20rem; } }

/* ---------- Abschnitte ---------- */
section.block { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
section.block.hell { background: var(--sand-hell); border-radius: clamp(28px, 5vw, 64px) clamp(28px, 5vw, 64px) 0 0; }
.text { max-width: var(--mass); }
.text p { margin: 0 0 1.1rem; }
.leise { color: var(--leise); }

.zweispaltig { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 26rem); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.zweispaltig.links { grid-template-columns: minmax(15rem, 24rem) minmax(0, 1fr); align-items: center; }
.foto { overflow: hidden; border-radius: 36px 36px 36px 8px; background: var(--sand-tief); }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.foto.rund { border-radius: var(--blob-a); aspect-ratio: 1; }
.foto.hoch { aspect-ratio: 4 / 5; border-radius: 180px 180px 28px 28px; }
@media (max-width: 800px) {
  .zweispaltig, .zweispaltig.links { grid-template-columns: 1fr; }
  .foto.rund, .foto.hoch { max-width: 20rem; }
}

/* Ablauf */
.ablauf { list-style: none; margin: 3rem 0 0; padding: 0; counter-reset: schritt; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
.ablauf li { counter-increment: schritt; }
.ablauf li::before { content: counter(schritt); display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: var(--blob-a); background: var(--petrol); color: #fff; font-weight: 600; font-size: 1.15rem; margin-bottom: 1rem; }
.ablauf li:nth-child(2)::before { border-radius: var(--blob-b); background: var(--oliv); }
.ablauf li:nth-child(3)::before { border-radius: var(--blob-c); background: var(--sand-tief); color: var(--moos); }
.ablauf p { margin: 0; color: var(--leise); }
@media (max-width: 760px) { .ablauf { grid-template-columns: 1fr; gap: 1.75rem; } }

/* Themen */
#themen .wrap > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.5rem; }
.thema { background: var(--sand-hell); border-radius: 32px 32px 32px 8px; padding: 2rem 1.8rem; display: flex; flex-direction: column; }
.thema:nth-child(2) { border-radius: 32px 8px 32px 32px; }
.thema:nth-child(3) { border-radius: 8px 32px 32px 32px; }
.thema h3 { font-size: 1.6rem; margin-bottom: .9rem; }
.thema h3 a { color: var(--moos); text-decoration: none; }
.thema h3 a:hover { color: var(--petrol); }
.thema > div { display: flex; flex-direction: column; flex: 1; }
.thema p { margin: 0 0 1.25rem; }
.thema .weiter { margin-top: auto; }
@media (max-width: 900px) { #themen .wrap > div { grid-template-columns: 1fr; } }

/* Fließtext */
.artikel { max-width: var(--mass); }
.artikel h2 { font-size: clamp(1.75rem, 3.2vw, 2.3rem); margin: 3rem 0 1rem; }
.artikel h2:first-child { margin-top: 0; }
.artikel p { margin: 0 0 1.15rem; }
.artikel ul { margin: 0 0 1.5rem; padding: 0; list-style: none; }
.artikel li { position: relative; padding-left: 1.5rem; margin-bottom: .45rem; break-inside: avoid; }
.artikel li::before { content: ""; position: absolute; left: 0; top: .6em; width: .6rem; height: .6rem; border-radius: var(--blob-a); background: var(--oliv); }
.zweispaltig-liste { columns: 2 15rem; column-gap: 2.5rem; }
.zitat { position: relative; margin: 3rem 0; padding: 2rem 2.2rem; background: var(--sand); border-radius: 40px 40px 40px 8px; font-family: var(--serif); font-size: 1.6rem; line-height: 1.45; color: var(--moos); }
.zitat footer { font-family: var(--sans); font-size: 1rem; color: var(--leise); margin-top: .8rem; }
.hinweisbox { background: var(--sand); padding: 1.4rem 1.6rem; border-radius: 24px; margin: 2rem 0; border-left: 5px solid var(--oliv); }
.hinweisbox p:last-child { margin-bottom: 0; }
.hinweisbox.krise { background: #F6E1D6; border-left-color: #A2462B; }

.preise { width: 100%; border-collapse: collapse; margin: .5rem 0 1rem; }
.preise th, .preise td { text-align: left; padding: .85rem 0; border-bottom: 1px solid var(--linie); vertical-align: top; }
.preise th { font-weight: 600; color: var(--moos); }
.preise td:last-child { text-align: right; white-space: nowrap; font-weight: 600; color: var(--petrol); padding-left: 1rem; }
.preise small { display: block; font-weight: 400; color: var(--leise); font-size: 1rem; }

/* FAQ */
.faq { max-width: none; }
.faq details { background: var(--sand); border-radius: 20px; margin-bottom: .6rem; padding: 0 1.4rem; }
section.block:not(.hell) .faq details { background: var(--sand-hell); }
.faq summary { cursor: pointer; list-style: none; padding: 1.1rem 2.6rem 1.1rem 0; position: relative; font-weight: 600; color: var(--moos); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: -.3rem; top: 50%; transform: translateY(-50%); width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: var(--blob-a); background: var(--petrol); color: #fff; font-size: 1.25rem; transition: transform .3s ease; }
.faq details[open] summary::after { content: "–"; transform: translateY(-50%) rotate(180deg); background: var(--oliv); }
.faq .antwort { padding-bottom: 1.3rem; max-width: var(--mass); }
.faq .antwort p { margin: 0 0 .9rem; }
.faq .antwort ul { margin: 0 0 .9rem; padding-left: 1.2rem; }
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } }

/* Kontaktband */
.kontakt { position: relative; z-index: 1; margin-top: calc(-1 * clamp(28px, 5vw, 64px)); overflow: hidden; background: var(--honig-hell); color: var(--braun); border-radius: clamp(28px, 5vw, 64px) clamp(28px, 5vw, 64px) 0 0; }
.kontakt h2 { color: var(--braun); }
.kontakt .ringe { color: var(--ocker); opacity: .6; width: 34rem; height: 34rem; right: -8rem; bottom: -12rem; transform: rotate(15deg); }
.kontakt .spalten { position: relative; display: grid; gap: 3rem; grid-template-columns: 1.3fr 1fr; align-items: start; }
.kontakt p { color: #4A3712; }
.kontakt address { font-style: normal; line-height: 1.8; background: rgba(255,251,242,.6); padding: 1.7rem 1.9rem; border-radius: 36px 36px 36px 8px; }
.kontakt address a { color: var(--braun); }
.kontakt .knoepfe { margin-top: 2rem; }
.kontakt .knopf.voll { background: var(--braun); color: var(--sand-hell); }
.kontakt .knopf.voll:hover { background: #000; }
.kontakt .knopf.rand { color: var(--braun); box-shadow: inset 0 0 0 1.5px var(--braun); }
.kontakt .knopf.rand:hover { background: rgba(255,248,232,.5); }
@media (max-width: 800px) { .kontakt .spalten { grid-template-columns: 1fr; } }

/* Kontaktseite */
.kontaktwege { margin: 0; padding: 0; list-style: none; max-width: 36rem; }
.kontaktwege li { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--linie); }
.kontaktwege li:first-child { border-top: 1px solid var(--linie); }
.kontaktwege span { font-size: 1rem; color: var(--leise); padding-top: .15rem; }
.kontaktwege a { font-size: 1.25rem; font-weight: 600; }

/* Rechtstexte */
.recht { max-width: none; }
.recht h2 { font-size: 1.5rem; margin: 2.5rem 0 .7rem; }
.recht p { margin: 0 0 1rem; }
.platzhalter { background: #F3DFA2; padding: 0 .3rem; border-radius: 4px; }

/* ---------- Fußzeile ---------- */
.fuss { background: var(--honig); color: #45330F; font-size: 1.02rem; line-height: 1.75; padding: 4rem 0 2.5rem; }
.fuss a { color: var(--braun); text-decoration: none; }
.fuss a:hover { text-decoration: underline; }
.fuss .spalten { display: grid; gap: 2.5rem 3rem; grid-template-columns: 1fr auto auto; }
.fuss .spalten li { white-space: nowrap; }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss .logo-voll { display: flex; gap: .9rem; align-items: center; color: #45330F; margin-bottom: 1.2rem; line-height: 1.35; }
.fuss .logo-voll img { width: 3.4rem; }
.fuss .logo-voll strong { display: block; font-family: var(--serif); font-weight: 600; font-size: 1.15rem; color: var(--braun); }
.fuss h2 { font-family: var(--sans); font-size: 1.05rem; font-weight: 700; color: var(--braun); margin: 0 0 .7rem; letter-spacing: 0; }
.fuss .hinweis { border-top: 1px solid rgba(51,37,10,.2); margin-top: 3rem; padding-top: 1.5rem; font-size: .92rem; max-width: 54rem; }
@media (max-width: 760px) { .fuss .spalten { grid-template-columns: 1fr; } }

/* Portrait Über mich: Bogenform, Originalformat */
.foto.portrait { aspect-ratio: 768 / 694; border-radius: 200px 200px 28px 28px; }
@media (max-width: 800px) { .foto.portrait { max-width: 26rem; } }

/* Bilderreihe (z. B. Zeichnungen Vulnerabilitäts-Stress-Modell) */
.bilderreihe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin: 2.5rem 0 3rem; }
.bilderreihe figure { margin: 0; }
.bilderreihe img { width: 100%; }
.bilderreihe figcaption { font-size: 1rem; color: var(--leise); margin-top: .7rem; line-height: 1.4; text-align: center; }
@media (max-width: 760px) { .bilderreihe { grid-template-columns: 1fr; max-width: 26rem; } }

/* Text im ersten Abschnitt liegt über der Spirale */
.hero + section.block > .wrap { position: relative; z-index: 3; }

/* Fragezeichen statt Foto bei den häufigen Fragen */
.fragezeichen { position: relative; width: min(100%, 20rem); aspect-ratio: 1; justify-self: center; display: grid; place-items: center; }
.fragezeichen::before { content: ""; position: absolute; inset: 0; border-radius: var(--blob-a); background: var(--honig-hell); }
.fragezeichen::after { content: ""; position: absolute; inset: 7%; border-radius: var(--blob-b); border: 2px solid var(--honig); opacity: .7; transform: rotate(-10deg); }
.fragezeichen span { position: relative; z-index: 1; font-family: var(--serif); font-weight: 600; font-size: clamp(9rem, 16vw, 13rem); line-height: 1; color: var(--honig); text-shadow: 6px 6px 0 rgba(185,138,58,.25); transform: translateY(4%) rotate(6deg); }
@media (max-width: 800px) { .fragezeichen { width: 13rem; justify-self: start; } .fragezeichen span { font-size: 8rem; } }

/* Dezenter Besucherzähler in der Fußzeile */
.fuss .zaehler { margin: 1rem 0 0; font-size: .82rem; opacity: .65; letter-spacing: .02em; }

/* Kontaktformular */
.formular { display: grid; gap: 1.1rem; margin-top: 1.5rem; }
.formular .felder { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.formular label { display: grid; gap: .4rem; font-weight: 600; color: var(--moos); font-size: 1rem; }
.formular input, .formular textarea { width: 100%; font: inherit; font-weight: 400; color: var(--text); background: var(--sand); border: 1.5px solid transparent; border-radius: 14px; padding: .85rem 1rem; line-height: 1.5; }
.formular textarea { resize: vertical; min-height: 10rem; }
.formular input:focus, .formular textarea:focus { outline: none; border-color: var(--oliv); background: #fff; }
.formular .honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formular-hinweis { font-size: .95rem; color: var(--leise); margin: 0; line-height: 1.55; }
.formular .knopf { justify-self: start; border: 0; cursor: pointer; font-family: inherit; }
.formular-status { padding: 1.1rem 1.4rem; border-radius: 18px; margin: 1.25rem 0 0; }
.formular-status.ok { background: #E3EBD3; border-left: 5px solid var(--oliv); }
.formular-status.fehler { background: #F6E1D6; border-left: 5px solid #A2462B; }
@media (max-width: 640px) { .formular .felder { grid-template-columns: 1fr; } }

/* Zitat mit Bild (z. B. Tunnel ins Licht) */
.zitatbild { display: grid; grid-template-columns: minmax(10rem, 17rem) 1fr; gap: 2rem; align-items: center; margin: 3rem 0; }
.zitatbild img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--blob-b); box-shadow: 0 18px 40px rgba(47,59,36,.25); }
.zitatbild .zitat { margin: 0; }
@media (max-width: 640px) { .zitatbild { grid-template-columns: 1fr; } .zitatbild img { max-width: 14rem; } }

/* Bild rechts im Fließtext, Text läuft daneben */
.bild-rechts { float: right; width: min(40%, 22rem); aspect-ratio: 1; object-fit: cover; margin: .4rem 0 1.5rem 2.5rem; border-radius: var(--blob-a); shape-outside: circle(50%); box-shadow: 0 18px 40px rgba(59,50,33,.18); }
.artikel h2 { clear: both; }
@media (max-width: 640px) { .bild-rechts { float: none; width: 16rem; margin: 0 0 1.5rem; } }

/* Zertifikate: unten rechts neben dem Hinweistext */
.fuss .zertifikate { display: flex; gap: 1.25rem; align-items: center; flex-shrink: 0; margin: 0; padding: 0; }
.fuss .zertifikate img { height: 110px; width: auto; display: block; }
.fuss-unten { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; border-top: 1px solid rgba(51,37,10,.2); margin-top: 2.5rem; padding-top: 1.25rem; }
.fuss-unten .hinweis { border: 0; margin: 0; padding: 0; }
@media (max-width: 1100px) { .fuss .spalten { grid-template-columns: 1fr auto auto; } }
@media (max-width: 760px) {
  .fuss .spalten { grid-template-columns: 1fr; }
  .fuss .spalten li { white-space: normal; }
  .fuss .zertifikate { gap: .7rem; }
  .fuss .zertifikate img { height: 76px; }
}

/* Siegel vergrößern */
.siegel-link { display: block; border-radius: 12px; cursor: zoom-in; transition: transform .2s ease; }
.siegel-link:hover { transform: scale(1.05); }
.siegel-gross { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 2rem; background: rgba(35,28,12,.78); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); cursor: zoom-out; }
.siegel-gross[hidden] { display: none; }
.siegel-gross img { max-width: min(90vw, 460px); max-height: 82vh; width: auto; height: auto; background: var(--sand-hell); border-radius: 28px; padding: 1.5rem; box-shadow: 0 30px 80px rgba(0,0,0,.4); cursor: default; }
.siegel-zu { position: absolute; top: 1rem; right: 1rem; width: 3rem; height: 3rem; border: 0; border-radius: 50%; background: var(--sand-hell); color: var(--moos); font-size: 2rem; line-height: 1; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .siegel-link { transition: none; } .siegel-link:hover { transform: none; } }

/* Abschnitt mit weniger Abstand oben (z. B. Depression mit Krisenhinweis) */
section.block.kompakt { padding-top: clamp(1.75rem, 3.5vw, 2.5rem); }