/* Trias – Website-Entwurf (14.10.2026)
 *
 * Gestaltung: Naturtöne aus dem Logo, dazu Salbei aus der Farbwelt „Salbei und Leinen“.
 * Formen: Kiesel (weich, organisch), Bogen (wie die Rundbögen der Praxis), Dreiklang (drei Töne).
 * Bewegung: ruhig und langsam. Nur transform und opacity, damit nichts im Layout springt.
 * Der Atem-Rhythmus der Formen ist 10 s: 4 s ein, 6 s aus (sechs ruhige Atemzüge pro Minute).
 */

/* ---------- Schriften (selbst gehostet, lateinischer Zeichensatz, SIL OFL) ---------- */
@font-face { font-family: "Figtree"; src: url("../fonts/Figtree-variabel.woff2") format("woff2"); font-weight: 300 900; font-display: block; }
/* Überschriften in Petrona, gewählt am 14.10.2026 aus fünf Serifen (Fraunces, Petrona, Hahmlet, Newsreader, Alegreya) */
@font-face { font-family: "Petrona"; src: url("../fonts/Petrona-variabel.woff2") format("woff2"); font-weight: 100 900; font-display: block; }

/* ---------- Farben und Maße ---------- */
:root {
  /* Flächen */
  --kalk: #FBF7F1;          /* Seitengrund */
  --leinen: #F3EDE4;        /* zweiter Grund */
  --hellsand: #F9E8D8;      /* Logo */
  --sand: #EFCAA6;          /* Logo */
  --karamell: #D4A87F;      /* Logo, Linie */
  --salbei-hell: #DFE3D7;   /* aus „Salbei und Leinen“, aufgehellt */
  --salbei: #8A9A84;
  --moos: #3E4A3D;
  /* Claim-Töne aus dem Logo: Denken hell, Fühlen mittel, Handeln dunkel */
  --denken: #C49C78;
  --fuehlen: #B08257;
  --handeln: #8E6646;
  /* Text */
  --mokka: #4B433D;         /* Fließtext, 9:1 auf Kalk */
  --leise: #6B5F57;         /* Nebentext, 5,7:1 auf Kalk, 5,1:1 auf Hellsand */
  --akzent: #8E6646;        /* Links und Auszeichnung, 4,7:1 auf Kalk */
  --linie: #E4D8C9;

  --serif: "Petrona", Georgia, serif;
  --serif-wght: 330;        /* leicht, wie im Vergleich abgestimmt; kleine Überschriften kräftiger (--serif-wght-klein) */
  --serif-wght-klein: 500;
  --serif-var: normal;
  --serif-mass: 1.04;
  --sans: "Figtree", "Segoe UI", system-ui, sans-serif;

  --rand: clamp(20px, 5vw, 56px);
  --breite: 1240px;
  --kopf: 84px;

  --sanft: cubic-bezier(.22, .61, .36, 1);
  --fliessend: cubic-bezier(.45, .05, .25, 1);
  --atem: 10s;
  --form: 28s;
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scrollbar-gutter: stable; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--kalk); color: var(--mokka);
  font-family: var(--sans); font-size: 1.0625rem; line-height: 1.65; font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
@media (min-width: 760px) { body { font-size: 1.125rem; } }
/* Formen dürfen über ihre Bilder hinausragen, aber nie über den Bildschirmrand (sonst wird die Seite am Handy breiter).
   clip statt hidden: kein eigener Scrollbereich, „sticky“ funktioniert weiter. */
main, .fuss { overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: var(--serif-wght); font-variation-settings: var(--serif-var); color: var(--mokka); text-wrap: balance; letter-spacing: -.012em; }
h1 { font-size: calc(var(--serif-mass) * clamp(2.75rem, 1.5rem + 4.4vw, 5.4rem)); line-height: 1.04; }
h2 { font-size: calc(var(--serif-mass) * clamp(2.05rem, 1.45rem + 2.3vw, 3.35rem)); line-height: 1.1; }
h3 { font-size: calc(var(--serif-mass) * clamp(1.35rem, 1.2rem + .6vw, 1.7rem)); line-height: 1.22; }
:focus-visible { outline: 2px solid var(--mokka); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--sand); color: var(--mokka); }

.huelle { width: min(100% - 2 * var(--rand), var(--breite)); margin-inline: auto; }
.marke { font: 600 .78rem/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--akzent); margin: 0 0 1.4rem; }
.einleitung { font-size: clamp(1.125rem, 1.05rem + .35vw, 1.3rem); line-height: 1.6; color: var(--mokka); max-width: 36ch; }
.leise { color: var(--leise); }
.nur-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprung { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--mokka); color: var(--kalk); padding: 10px 16px; border-radius: 999px; text-decoration: none; transition: top .3s var(--sanft); }
.sprung:focus { top: 12px; }

.abschnitt { position: relative; padding-block: clamp(88px, 10vw, 152px); }
.abschnitt--leinen { background: var(--leinen); }
.abschnitt--hellsand { background: var(--hellsand); }

/* Wellenkante: weicher Übergang zwischen zwei Flächen, Farbe = Fläche darüber */
.welle { position: absolute; left: 0; right: 0; top: -1px; height: clamp(28px, 4.2vw, 64px); color: var(--kalk); pointer-events: none; }
.welle svg { width: 100%; height: 100%; }
.welle--leinen { color: var(--leinen); }
.welle--hellsand { color: var(--hellsand); }

/* ---------- Knöpfe und Links ---------- */
.knopf {
  display: inline-flex; align-items: center; gap: .7em; min-height: 52px; padding: 0 1.6em;
  border-radius: 999px; border: 1px solid var(--mokka); background: var(--mokka); color: var(--kalk);
  font: 600 1rem/1 var(--sans); letter-spacing: .01em; text-decoration: none; cursor: pointer;
  transition: background-color .5s var(--sanft), border-color .5s var(--sanft), color .5s var(--sanft);
}
.knopf:hover { background: var(--handeln); border-color: var(--handeln); }
.knopf svg { width: 18px; height: 18px; transition: transform .6s var(--sanft); }
.knopf:hover svg { transform: translateX(4px); }
.knopf--hell { background: transparent; color: var(--mokka); border-color: var(--karamell); }
.knopf--hell:hover { background: var(--hellsand); border-color: var(--handeln); }
.textlink {
  color: var(--mokka); text-decoration: none; font-weight: 600;
  background: linear-gradient(var(--karamell), var(--karamell)) left bottom / 100% 1.5px no-repeat;
  padding-bottom: 3px; transition: background-size .6s var(--sanft), color .4s;
}
.textlink:hover { color: var(--handeln); background-size: 0% 1.5px; background-position: right bottom; }

/* ---------- Kopf ---------- */
.kopf { position: fixed; inset: 0 0 auto 0; z-index: 50; transition: transform .7s var(--sanft), background-color .6s var(--sanft), box-shadow .6s var(--sanft); }
.kopf.ist-gerollt { background: rgb(251 247 241 / .96); box-shadow: 0 1px 0 var(--linie); }
.kopf.ist-weg { transform: translateY(-101%); }
.kopf__innen { height: var(--kopf); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.kopf__marke { display: block; width: 128px; text-decoration: none; position: relative; z-index: 61; }
.kopf__marke svg { width: 100%; height: auto; }
.navi { display: none; }
/* Sechs Einträge seit „Haltung“ (01.11.2026): engerer Abstand, kein Umbruch, damit bei 980 px alles in eine Zeile passt */
.navi ul { display: flex; gap: clamp(14px, 1.5vw, 34px); list-style: none; margin: 0; padding: 0; }
.navi a { white-space: nowrap; text-decoration: none; font-weight: 500; font-size: .98rem; color: var(--mokka); padding: 8px 0;
  background: linear-gradient(var(--karamell), var(--karamell)) left calc(100% - 2px) / 0% 1.5px no-repeat; transition: background-size .6s var(--sanft); }
.navi a:hover, .navi a[aria-current="true"] { background-size: 100% 1.5px; }
.kopf__aktion { display: none; }
.menue-knopf { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--linie); background: var(--kalk); color: var(--mokka); display: grid; place-items: center; cursor: pointer; position: relative; z-index: 61; transition: border-color .4s; }
.menue-knopf span { position: absolute; width: 18px; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform .6s var(--sanft); }
.menue-knopf span:first-child { transform: translateY(-4px); }
.menue-knopf span:last-child { transform: translateY(4px); }
.menue-offen .menue-knopf span:first-child { transform: rotate(45deg); }
.menue-offen .menue-knopf span:last-child { transform: rotate(-45deg); }
@media (min-width: 980px) {
  .navi { display: block; }
  .kopf__aktion { display: inline-flex; min-height: 46px; font-size: .95rem; }
  .menue-knopf { display: none; }
  .kopf__marke { width: 142px; }
}
@media (max-width: 759px) { :root { --kopf: 68px; } .kopf__marke { width: 112px; } }

/* Menü auf kleinen Bildschirmen: blendet weich ein, die Form dahinter geht auf, die Einträge steigen nacheinander.
   Nur opacity und transform (14.10.2026). Vorher öffnete es als Kreis per clip-path mit calc()-Position, das blitzte im
   Samsung-Browser: ältere Chromium-Fassungen überblenden so eine Form nicht stufenlos, sie springen. */
.menue { position: fixed; inset: 0; z-index: 60; background: var(--leinen); display: flex; flex-direction: column; justify-content: center; padding: calc(var(--kopf) + 24px) var(--rand) 48px; overflow: hidden auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden; transition: opacity .6s var(--sanft), visibility 0s .6s; }
.menue-offen .menue { opacity: 1; visibility: visible; transition: opacity .6s var(--sanft), visibility 0s; }
.menue ul { list-style: none; margin: 0 0 40px; padding: 0; }
.menue li { overflow: hidden; }
.menue a.menue__link { display: block; text-decoration: none; font-family: var(--serif); font-weight: var(--serif-wght); font-variation-settings: var(--serif-var); font-size: calc(var(--serif-mass) * 2.3rem); line-height: 1.35; color: var(--mokka);
  transform: translateY(100%); transition: transform .8s var(--sanft); }
.menue-offen .menue a.menue__link { transform: none; }
.menue li:nth-child(2) a { transition-delay: .05s; } .menue li:nth-child(3) a { transition-delay: .1s; }
.menue li:nth-child(4) a { transition-delay: .15s; } .menue li:nth-child(5) a { transition-delay: .2s; }
.menue li:nth-child(6) a { transition-delay: .25s; }
.menue__form { position: absolute; width: 70vmax; aspect-ratio: 1; right: -30vmax; bottom: -32vmax; color: var(--hellsand); pointer-events: none;
  transform: scale(.8); transform-origin: 70% 70%; transition: transform 1.1s var(--sanft); }
.menue-offen .menue__form { transform: none; }
.menue > *:not(.menue__form) { position: relative; }
.kopf.menue-offen { transform: none; background: transparent; box-shadow: none; }
html.menue-sperre { overflow: hidden; }

/* ---------- Bilder: Rahmen, Formen, KI-Hinweis ---------- */
.bild { position: relative; margin: 0; }
.rahmen { position: relative; overflow: hidden; background: var(--grund, var(--leinen)); isolation: isolate; }
.rahmen picture, .rahmen img { display: block; width: 100%; height: 100%; }
.rahmen img { object-fit: cover; }
/* Tiefe: Bild bewegt sich beim Scrollen langsamer als der Rahmen (siehe site.js) */
.rahmen [data-tiefe] { transform: translate3d(0, var(--versatz, 0px), 0) scale(1.12); will-change: transform; }

.form-kiesel { border-radius: 46% 30% 42% 54% / 40% 30% 58% 50%; }
.form-kiesel-2 { border-radius: 58% 30% 46% 40% / 52% 28% 54% 46%; }
.form-bogen { border-radius: 999px 999px 28px 28px / 50% 50% 28px 28px; }
.form-weich { border-radius: 36px 120px 36px 36px; }
.form-weich-2 { border-radius: 120px 36px 36px 36px; }
@supports (border-radius: 1px 1px 1px 1px / 1px 1px 1px 1px) {
  .form-bogen { border-radius: 50% 50% 28px 28px / 34% 34% 28px 28px; }
}
@media (prefers-reduced-motion: no-preference) {
  .form-kiesel.atmet { animation: kiesel var(--form) var(--fliessend) infinite alternate; }
  .form-kiesel-2.atmet { animation: kiesel-2 calc(var(--form) * 1.2) var(--fliessend) infinite alternate; }
}
/* Die rechte obere Ecke bleibt ruhig (unter 32 %): dort sitzt der KI-Hinweis */
@keyframes kiesel {
  0%   { border-radius: 46% 30% 42% 54% / 40% 30% 58% 50%; }
  50%  { border-radius: 54% 28% 50% 44% / 50% 27% 48% 58%; }
  100% { border-radius: 40% 31% 56% 48% / 46% 29% 54% 44%; }
}
@keyframes kiesel-2 {
  0%   { border-radius: 58% 30% 46% 40% / 52% 28% 54% 46%; }
  50%  { border-radius: 48% 27% 54% 50% / 44% 30% 46% 56%; }
  100% { border-radius: 54% 31% 40% 52% / 56% 26% 52% 42%; }
}

/* EU-Symbol für KI-Inhalte (Art. 50 Abs. 4 KI-Verordnung): oben rechts, 24 px, mit zweiter Ebene */
.ki { position: absolute; z-index: 3; top: var(--ki-oben, 14px); right: var(--ki-rechts, 14px); }
.ki summary { list-style: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--mokka); }
.ki summary::-webkit-details-marker { display: none; }
.ki summary svg { width: 26px; height: 26px; }
.ki .ki__scheibe { fill: var(--kalk); opacity: .9; }
.ki .ki__text { position: absolute; right: 0; top: 34px; width: min(250px, 70vw); margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--kalk); color: var(--mokka); font-size: .86rem; line-height: 1.5; box-shadow: 0 10px 30px rgb(75 67 61 / .16); }
.bild figcaption { margin-top: 14px; font-size: .92rem; color: var(--leise); }

/* Weiche Formen (SVG, in site.js erzeugt) */
.formen { position: absolute; pointer-events: none; overflow: visible; }
.formen path { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .formen .atem { animation: atem var(--atem) infinite; transform-box: fill-box; transform-origin: center; }
}
@keyframes atem {
  0%   { transform: scale(.955); animation-timing-function: cubic-bezier(.37, 0, .63, 1); }
  40%  { transform: scale(1.04);  animation-timing-function: cubic-bezier(.37, 0, .63, 1); }
  100% { transform: scale(.955); }
}

/* ---------- Erscheinen beim Scrollen ---------- */
.js [data-zeige] { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 1.2s var(--sanft), transform 1.4s var(--sanft); transition-delay: var(--verz, 0ms); }
.js [data-zeige].ist-da { opacity: 1; transform: none; }
.js [data-zeige="bild"] { transform: translate3d(0, 40px, 0) scale(.97); }
.js [data-zeige="bild"].ist-da { transform: none; }

/* ---------- Hero ---------- */
.hero { padding-top: calc(var(--kopf) + clamp(36px, 6vw, 84px)); padding-bottom: clamp(72px, 8vw, 120px); position: relative; }
.hero__raster { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "bild" "fakten"; gap: clamp(40px, 7vw, 72px); align-items: center; }
.hero__text { grid-area: text; }
.hero__bild { grid-area: bild; }
.hero__fakten { grid-area: fakten; }
.hero h1 { margin-bottom: clamp(22px, 2.4vw, 32px); }
.zeile { display: block; overflow: hidden; padding-top: .12em; margin-top: -.12em; padding-bottom: .1em; margin-bottom: -.1em; }
.zeile > span { display: block; }
.js .zeile > span { transform: translate3d(0, 110%, 0); transition: transform 1.5s var(--sanft); }
.js .ist-geladen .zeile > span { transform: none; }
.js .ist-geladen .zeile:nth-child(2) > span { transition-delay: .14s; }
.js .hero__nach { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity 1.2s var(--sanft) .45s, transform 1.3s var(--sanft) .45s; }
.js .ist-geladen .hero__nach { opacity: 1; transform: none; }
.js .ist-geladen .hero__nach--2 { transition-delay: .65s; }
.hero__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: clamp(28px, 3vw, 40px); }
.hero__fakten { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.hero__fakten li { font-size: .9rem; color: var(--leise); padding: 7px 14px; border: 1px solid var(--linie); border-radius: 999px; background: rgb(251 247 241 / .7); }

.hero__bild { position: relative; width: min(100%, 560px); justify-self: center; }
.hero__bild .rahmen { aspect-ratio: 5 / 4; }
.hero__bild .formen { inset: -12% -14% -16% -12%; z-index: -1; }
.hero__bild { --ki-oben: 9%; --ki-rechts: 9%; }
.formen > svg { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: auto; aspect-ratio: 1; overflow: visible; }
@media (min-width: 900px) {
  .hero__raster { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); grid-template-areas: "text bild" "fakten bild"; grid-template-rows: auto auto; column-gap: clamp(40px, 6vw, 96px); row-gap: clamp(40px, 5vw, 64px); }
  .hero__text { align-self: end; }
  .hero__fakten { align-self: start; }
  .hero__bild { justify-self: end; }
  .hero__bild .rahmen { aspect-ratio: 4 / 5; }
}

/* ---------- Fragen ---------- */
.fragen__raster { display: grid; gap: clamp(40px, 6vw, 96px); grid-template-columns: minmax(0, 1fr); }
.fragen__kopf p { max-width: 34ch; margin-top: 22px; }
.fragen__kopf .bild { margin-top: clamp(32px, 4vw, 56px); width: min(100%, 360px); --ki-oben: 15%; --ki-rechts: 16%; }
.fragen__kopf .rahmen { aspect-ratio: 3 / 4; }
@media (min-width: 960px) {
  .fragen__raster { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .fragen__kopf { position: sticky; top: calc(var(--kopf) + 40px); align-self: start; }
}
@media (max-width: 959px) { .fragen__kopf .bild { display: none; } }
.fragen__liste { border-bottom: 1px solid var(--linie); }
.frage { border-top: 1px solid var(--linie); }
.frage h3 { font-size: calc(var(--serif-mass) * clamp(1.25rem, 1.1rem + .55vw, 1.55rem)); }
.frage__knopf { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(20px, 2.2vw, 28px) 0; background: none; border: 0; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.frage__knopf:hover .plus { background: var(--hellsand); border-color: var(--karamell); }
.plus { position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--linie); transition: background-color .5s var(--sanft), border-color .5s var(--sanft); }
.plus::before, .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; margin: -.75px 0 0 -7px; background: var(--mokka); border-radius: 2px; transition: transform .7s var(--sanft); }
.plus::after { transform: rotate(90deg); }
.frage.ist-offen .plus::after { transform: rotate(0deg); }
.frage__inhalt { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .8s var(--sanft); }
.frage.ist-offen .frage__inhalt { grid-template-rows: 1fr; }
.frage__inhalt > div { overflow: hidden; }
.frage__inhalt p { max-width: 58ch; color: var(--mokka); opacity: 0; transform: translate3d(0, -8px, 0); transition: opacity .6s var(--sanft), transform .8s var(--sanft); }
.frage__inhalt p:last-child { padding-bottom: clamp(22px, 2.4vw, 30px); }
.frage.ist-offen .frage__inhalt p { opacity: 1; transform: none; transition-delay: .12s; }

/* ---------- Ansatz: Denken, Fühlen, Handeln ---------- */
.ansatz__raster { display: grid; column-gap: clamp(40px, 6vw, 88px); row-gap: clamp(36px, 5vw, 56px); grid-template-columns: minmax(0, 1fr); grid-template-areas: "kopf" "bild" "liste"; }
.ansatz__kopf { grid-area: kopf; max-width: 640px; }
.ansatz__kopf p.einleitung { margin-top: 22px; }
.dreiklang { grid-area: bild; position: relative; width: min(100%, 540px); aspect-ratio: 600 / 560; justify-self: center; }
.klaenge { grid-area: liste; }
.dreiklang svg { width: 100%; height: 100%; overflow: visible; }
/* Multiplizieren, aber gedämpft: Überlagerungen werden dunkler, die Mitte nicht schwer.
   Die Mischung sitzt auf der Gruppe, nicht auf dem Pfad: Firefox gibt der per translate3d verschobenen Gruppe eine
   eigene Ebene, ein mischender Pfad darin sähe nur seine eigene Gruppe, die Überlappungen blieben hell (14.10.2026). */
.dreiklang .klang { opacity: .62; transition: opacity .8s var(--sanft); }
.dreiklang .klang-gruppe { mix-blend-mode: multiply; transition: transform 1.2s var(--sanft); }
.dreiklang text { font: 700 18px/1 var(--sans); letter-spacing: .14em; fill: var(--mokka); transition: opacity .8s var(--sanft); }
.dreiklang .mitte { opacity: calc(var(--n, 1) * var(--n, 1) * var(--n, 1)); transition: opacity .8s var(--sanft); }
.dreiklang[data-fokus] .klang { opacity: .22; }
.dreiklang[data-fokus] .mitte { opacity: .25; }
.dreiklang[data-fokus="denken"] .klang--denken, .dreiklang[data-fokus="fuehlen"] .klang--fuehlen, .dreiklang[data-fokus="handeln"] .klang--handeln { opacity: .9; }
.dreiklang[data-fokus] text { opacity: .4; }
.dreiklang[data-fokus="denken"] .wort--denken, .dreiklang[data-fokus="fuehlen"] .wort--fuehlen, .dreiklang[data-fokus="handeln"] .wort--handeln { opacity: 1; }
.dreiklang .klang-gruppe--denken { transform: translate3d(0, calc(-46px * (1 - var(--n, 1))), 0); }
.dreiklang .klang-gruppe--fuehlen { transform: translate3d(calc(-52px * (1 - var(--n, 1))), calc(30px * (1 - var(--n, 1))), 0); }
.dreiklang .klang-gruppe--handeln { transform: translate3d(calc(52px * (1 - var(--n, 1))), calc(30px * (1 - var(--n, 1))), 0); }
.klaenge { display: grid; gap: 0; align-content: start; border-top: 1px solid var(--linie); }
.klaenge > div { padding: 22px 0 22px 30px; border-bottom: 1px solid var(--linie); position: relative; }
.klaenge > div::before { content: ""; position: absolute; left: 0; top: 30px; width: 14px; height: 14px; border-radius: 52% 48% 46% 54% / 50% 54% 46% 50%; background: var(--ton); }
/* Leon, 14.10.2026: hier war Petrona im leichten Schnitt zu dünn, deshalb ein kräftigerer */
.klaenge h3 { font-size: calc(var(--serif-mass) * 1.45rem); font-weight: var(--serif-wght-klein); margin-bottom: 6px; }
.klaenge p { color: var(--mokka); max-width: 52ch; }
@media (min-width: 960px) {
  .ansatz__raster { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); grid-template-areas: "kopf bild" "liste bild"; grid-template-rows: auto 1fr; }
  .dreiklang { align-self: start; position: sticky; top: calc(var(--kopf) + 48px); }
}

/* ---------- Haltung: vier Grundsätze ---------- */
/* Die Punkte werden zum Handeln hin dunkler, wie der Claim im Logo */
.haltung__kopf { max-width: 640px; }
.haltung__kopf p.einleitung { margin-top: 22px; }
.grundsaetze { list-style: none; margin: clamp(48px, 6vw, 80px) 0 0; padding: 0; display: grid; gap: 0 clamp(28px, 3vw, 48px); grid-template-columns: minmax(0, 1fr); }
.grundsaetze li { position: relative; padding: 26px 0 26px 34px; border-top: 1px solid var(--linie); }
.grundsaetze li::before { content: ""; position: absolute; left: 0; top: 34px; width: 16px; height: 16px; border-radius: 52% 48% 46% 54% / 50% 54% 46% 50%; background: var(--ton); }
.grundsaetze h3 { font-size: calc(var(--serif-mass) * 1.45rem); font-weight: var(--serif-wght-klein); margin-bottom: 8px; }
.grundsaetze p { color: var(--mokka); max-width: 44ch; }
@media (min-width: 760px) { .grundsaetze { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) {
  .grundsaetze li { padding: 76px 0 0; }
  .grundsaetze li::before { top: 30px; width: 22px; height: 22px; }
  .grundsaetze { grid-template-columns: repeat(var(--spalten, 4), minmax(0, 1fr)); }
}

/* ---------- Atempause: Landschaft ---------- */
/* Die Wellenkanten des Bildes sind die Übergänge: oben in die Haltung, unten direkt in das Angebot, beide Leinen.
   Bis 01.11.2026 kam oben der Ansatz (Kalk), die Fläche war deshalb geteilt. */
.pause { position: relative; background: var(--leinen); }
/* Hier blendet nur das Bild ein, nicht der Rahmen: Sonst zeigte die Verkleinerung kurz die Farbteilung dahinter */
.js .pause [data-zeige] { opacity: 1; transform: none; }
.js .pause .rahmen picture { opacity: 0; transition: opacity 1.4s var(--sanft); }
.js .pause .ist-da .rahmen picture { opacity: 1; }
.pause .rahmen { aspect-ratio: 4 / 3; border-radius: 0;
  -webkit-mask: url("../form/welle-maske.svg") center / 100% 100% no-repeat; mask: url("../form/welle-maske.svg") center / 100% 100% no-repeat; }
.pause { --ki-oben: clamp(36px, 5vw, 72px); --ki-rechts: var(--rand); }
@media (min-width: 760px) { .pause .rahmen { aspect-ratio: 21 / 8; } }
.pause .pause__zeile { position: absolute; left: 0; right: 0; bottom: clamp(48px, 7vw, 110px); }
.pause .pause__zeile p { display: inline-block; margin: 0; padding: 14px 22px; border-radius: 999px; background: rgb(251 247 241 / .9); font-size: .95rem; color: var(--mokka); }

/* ---------- Angebot ---------- */
.angebot__raster { display: grid; gap: clamp(40px, 6vw, 96px); grid-template-columns: minmax(0, 1fr); }
.angebot__kopf p { max-width: 40ch; margin-top: 22px; }
.angebot__kopf .bild { margin-top: clamp(32px, 4vw, 56px); width: min(100%, 420px); --ki-oben: 16%; --ki-rechts: 14%; }
.angebot__kopf .rahmen { aspect-ratio: 1; }
.leistungen { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.leistungen li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 32px; padding: clamp(22px, 2.6vw, 32px) 0; border-bottom: 1px solid var(--linie); }
.leistungen h3 { font-size: calc(var(--serif-mass) * clamp(1.4rem, 1.2rem + .7vw, 1.85rem)); }
.leistungen p { color: var(--mokka); max-width: 52ch; }
/* Große organische Ecken = 3 × Innenabstand (14.10.2026). So bleibt jede Zeile und jeder Knopf in der Rundung,
   auch wenn der Abstand am Handy kleiner wird; nötig wären 0,29 × (Kreis: 1 − 1/√2). Geprüft mit _werkzeug/formen-pruefung.py. */
.traeger { --pad: clamp(26px, 3vw, 38px); margin-top: clamp(36px, 4vw, 52px); padding: var(--pad); background: var(--salbei-hell); color: var(--moos); border-radius: 28px calc(var(--pad) * 3) 28px 28px; }
.traeger h3 { color: var(--moos); font-size: calc(var(--serif-mass) * 1.4rem); margin-bottom: 14px; }
.traeger ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.traeger li { padding-left: 26px; position: relative; }
.traeger li::before { content: ""; position: absolute; left: 0; top: .62em; width: 10px; height: 10px; border-radius: 50%; background: var(--salbei); }
@media (min-width: 760px) { .leistungen li { grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); align-items: baseline; } }
@media (min-width: 960px) {
  .angebot__raster { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
  .angebot__kopf { position: sticky; top: calc(var(--kopf) + 40px); align-self: start; }
}

/* ---------- Ablauf und Kosten ---------- */
.ablauf__kopf { max-width: 640px; }
.schritte-rahmen { position: relative; margin-top: clamp(48px, 6vw, 80px); }
.schritte { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr); counter-reset: schritt; }
.schritte li { position: relative; padding-left: 76px; counter-increment: schritt; }
.schritte li::before { content: counter(schritt); position: absolute; left: 0; top: -6px; width: 52px; height: 52px; display: grid; place-items: center; background: var(--hellsand); color: var(--mokka);
  font: var(--serif-wght) calc(var(--serif-mass) * 1.35rem)/1 var(--serif); font-variation-settings: var(--serif-var); border-radius: 54% 46% 48% 52% / 50% 54% 46% 50%; z-index: 1; }
.schritte li:nth-child(2)::before { background: var(--sand); border-radius: 46% 54% 52% 48% / 54% 46% 50% 50%; }
.schritte li:nth-child(3)::before { background: var(--karamell); }
.schritte li:nth-child(4)::before { background: var(--handeln); color: var(--kalk); border-radius: 50% 50% 46% 54% / 46% 54% 50% 50%; }
.schritte h3 { font-size: calc(var(--serif-mass) * 1.4rem); margin-bottom: 8px; }
.schritte p { color: var(--mokka); max-width: 34ch; }
.schritte__linie { position: absolute; pointer-events: none; color: var(--karamell); }
.schritte__linie path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: var(--rest, 0); }
.schritte__linie--quer { display: none; }
.schritte__linie--hoch { left: 26px; top: 20px; bottom: 30px; width: 24px; height: calc(100% - 50px); }
@media (min-width: 900px) {
  .schritte { grid-template-columns: repeat(var(--spalten, 4), minmax(0, 1fr)); gap: 32px; }
  .schritte li { padding-left: 0; padding-top: 84px; }
  .schritte li::before { top: 0; width: 60px; height: 60px; }
  .schritte__linie--quer { display: block; left: 30px; right: 0; top: 0; width: calc(100% - 30px); height: 60px; }
  .schritte__linie--hoch { display: none; }
}

.kosten { margin-top: clamp(80px, 9vw, 128px); }
.kosten__kopf { display: grid; gap: 14px; max-width: 640px; }
.kosten__kopf h3 { font-size: calc(var(--serif-mass) * clamp(1.7rem, 1.4rem + 1.2vw, 2.4rem)); }
.kosten__raster { display: grid; gap: 16px; margin-top: clamp(32px, 4vw, 48px); grid-template-columns: minmax(0, 1fr); }
.karte { --pad: clamp(24px, 2.6vw, 34px); padding: var(--pad); border-radius: 28px; background: var(--leinen); }
.karte h4 { margin: 0 0 10px; font: 600 1.05rem/1.35 var(--sans); color: var(--mokka); }
.karte p { color: var(--mokka); font-size: 1rem; }
.karte--1 { background: var(--hellsand); border-radius: 28px 28px 28px calc(var(--pad) * 3); }
.karte--2 { background: var(--leinen); }
.karte--3 { background: var(--leinen); }
.karte--4 { background: var(--salbei-hell); color: var(--moos); border-radius: calc(var(--pad) * 3) 28px 28px 28px; }
.karte--4 h4, .karte--4 p { color: var(--moos); }
@media (min-width: 760px) { .kosten__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .kosten__raster { grid-template-columns: 1.15fr .95fr .95fr 1.15fr; } }

/* ---------- Praxis ---------- */
.praxis__kopf { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); align-items: end; }
.praxis__kopf p { max-width: 46ch; }
@media (min-width: 960px) { .praxis__kopf { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.galerie { display: grid; gap: clamp(28px, 3vw, 40px); margin-top: clamp(40px, 5vw, 72px); grid-template-columns: minmax(0, 1fr); }
.galerie__spalte { display: grid; gap: clamp(28px, 3vw, 40px); align-content: start; }
.galerie__a .rahmen { aspect-ratio: 4 / 3; }
.galerie__b .rahmen { aspect-ratio: 3 / 4; }
.galerie__c .rahmen { aspect-ratio: 3 / 2; }
.galerie__d .rahmen { aspect-ratio: 4 / 3; }
.galerie__a { --ki-oben: 16px; --ki-rechts: 60px; }
.galerie__b { --ki-oben: 15%; --ki-rechts: 16%; }
.galerie__c { --ki-oben: 16px; --ki-rechts: 16px; }
.galerie__d { --ki-oben: 11%; --ki-rechts: 11%; } /* Kiesel: Ecke oben rechts 30 % × 28 %, Abstand mindestens 0,3 davon */
@media (min-width: 760px) {
  .galerie { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
  .galerie__spalte--rechts { margin-top: clamp(48px, 9vw, 140px); }
  .galerie__c { width: 86%; }
  .galerie__d { width: 92%; }
}

/* ---------- Über mich ---------- */
.ich__raster { display: grid; gap: clamp(40px, 6vw, 96px); grid-template-columns: minmax(0, 1fr); align-items: center; }
.portraet { position: relative; width: min(100%, 440px); justify-self: center; }
.portraet__platz { aspect-ratio: 4 / 5; display: grid; place-items: center; text-align: center; background: var(--hellsand); color: var(--leise); padding: 24px; }
.portraet__platz svg { width: 96px; margin: 0 auto 18px; opacity: .9; }
.portraet__platz p { font-size: .95rem; margin: 0; }
.portraet .formen { inset: -10% -12% -12% -10%; z-index: -1; }
.platzhalter { background: rgb(212 168 127 / .22); border-radius: 6px; padding: 0 .3em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.ich__text h2 { margin-bottom: 10px; }
.ich__titel { color: var(--leise); margin-bottom: clamp(24px, 3vw, 36px); }
.ich__zitat { margin: 0 0 clamp(24px, 3vw, 32px); font-family: var(--serif); font-weight: var(--serif-wght); font-variation-settings: var(--serif-var); font-size: calc(var(--serif-mass) * clamp(1.4rem, 1.2rem + .9vw, 1.9rem)); line-height: 1.35; color: var(--mokka); max-width: 30ch; }
.quali { display: grid; gap: 0; margin: clamp(28px, 3vw, 40px) 0 0; border-top: 1px solid var(--linie); }
.quali > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 24px; padding: 16px 0; border-bottom: 1px solid var(--linie); }
.quali dt { font-weight: 600; }
.quali dd { margin: 0; color: var(--mokka); }
@media (min-width: 760px) { .quali > div { grid-template-columns: 190px minmax(0, 1fr); } }
@media (min-width: 960px) { .ich__raster { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } }

/* ---------- Für andere ---------- */
.andere { padding-block: clamp(72px, 8vw, 120px); }
.andere__raster { display: grid; gap: clamp(28px, 5vw, 96px); grid-template-columns: minmax(0, 1fr); }
.andere__liste { margin: 0; border-top: 1px solid var(--linie); }
.andere__liste > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 32px; padding: 20px 0; border-bottom: 1px solid var(--linie); }
.andere__liste dt { font-weight: 600; }
.andere__liste dd { margin: 0; color: var(--mokka); max-width: 52ch; }
@media (min-width: 760px) { .andere__liste > div { grid-template-columns: 220px minmax(0, 1fr); } }
@media (min-width: 960px) { .andere__raster { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } }

/* ---------- Kontakt ---------- */
.kontakt__raster { display: grid; gap: clamp(40px, 6vw, 88px); grid-template-columns: minmax(0, 1fr); }
.kontakt__text p { max-width: 40ch; }
.kontakt__text h2 { margin-bottom: 22px; }
.erreichbar { margin: clamp(28px, 3vw, 40px) 0 0; display: grid; gap: 14px; }
.erreichbar div { display: grid; gap: 2px; }
.erreichbar dt { font: 600 .78rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--akzent); }
.erreichbar dd { margin: 0; font-size: 1.1rem; }
.krise { --pad: 24px; margin-top: clamp(32px, 4vw, 48px); padding: var(--pad) 26px; border-radius: 24px 24px 24px calc(var(--pad) * 3); background: var(--salbei-hell); color: var(--moos); font-size: .98rem; }
.krise strong { display: block; margin-bottom: 8px; font-size: 1.02rem; }
.krise ul { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.krise a { color: var(--moos); font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: 3px; white-space: nowrap; }
@media (min-width: 960px) { .kontakt__raster { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } }

/* Abstände nach den Gestalt-Prinzipien (14.10.2026, gemessen mit _werkzeug/formular-abstaende.py):
   innen eng  – Beschriftung → Feld ≈ 11 px, Feld → Hinweis ≈ 7 px
   außen weit – Gruppe → Gruppe ≈ 32 px sichtbar, überall gleich, auch zwischen den Zeilen einer Zweierreihe.
   Vorher setzte „.formular fieldset { margin: 0 }“ (spezifischer) den Gruppenabstand außer Kraft: 3 px zwischen
   E-Mail und „Wann erreiche ich Sie gut?“. Jetzt trägt allein das gap des Formulars den Abstand. */
.formular { --pad: clamp(24px, 3.4vw, 48px); --gruppe: 28px; position: relative; display: flex; flex-direction: column; gap: var(--gruppe); padding: var(--pad); background: var(--kalk); border-radius: 40px 40px 40px calc(var(--pad) * 3); box-shadow: 0 30px 80px -40px rgb(75 67 61 / .28); }
.formular fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.formular legend, .feld > label { display: block; font-weight: 600; font-size: .98rem; line-height: 1.35; margin-bottom: 8px; padding: 0; }
.formular legend span, .feld > label span { font-weight: 400; color: var(--leise); }
.formular .reihe { display: grid; gap: var(--gruppe) 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .formular .reihe--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.formular .reihe > fieldset { min-width: 0; }
.feld input, .feld textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--mokka); background: var(--leinen);
  border: 1px solid var(--linie); border-radius: 16px; padding: 14px 16px; min-height: 52px;
  transition: border-color .4s var(--sanft), background-color .4s var(--sanft), box-shadow .4s var(--sanft);
}
.feld input, .feld textarea { display: block; } /* sonst bringt das Inline-Feld die Unterlänge der Zeile als Extra-Abstand mit */
.feld textarea { min-height: 112px; resize: vertical; line-height: 1.5; }
.feld input:hover, .feld textarea:hover { border-color: var(--karamell); }
.feld input:focus, .feld textarea:focus { outline: none; border-color: var(--handeln); background: #fff; box-shadow: 0 0 0 3px rgb(212 168 127 / .35); }
.feld.hat-fehler input { border-color: #A2533F; }
/* Hinweis und Fehler teilen sich denselben Platz: nichts verschiebt sich */
.hinweis { display: grid; margin-top: 6px; font-size: .88rem; line-height: 1.4; }
.hinweis > span { grid-area: 1 / 1; color: var(--leise); }
.hinweis > .fehler { color: #8F4535; visibility: hidden; }
.hat-fehler .hinweis > span:not(.fehler) { visibility: hidden; }
.hat-fehler .hinweis > .fehler { visibility: visible; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--linie); background: var(--leinen); font-size: .95rem; color: var(--mokka);
  transition: background-color .45s var(--sanft), border-color .45s var(--sanft), color .45s var(--sanft); }
.chip:hover span { border-color: var(--karamell); }
.chip input:checked + span { background: var(--mokka); border-color: var(--mokka); color: var(--kalk); }
.chip input:focus-visible + span { outline: 2px solid var(--mokka); outline-offset: 3px; }
.feld > label.zustimmung { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; margin: 0; font-weight: 400; font-size: .94rem; line-height: 1.5; color: var(--mokka); cursor: pointer; }
.zustimmung input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--mokka); }
/* Aufklappbar statt lang (14.10.2026, Leon: das Formular soll niemanden abschrecken, alle Angaben bleiben erreichbar).
   Sichtbar sind nur Name, Telefon, Erreichbarkeit, Einwilligung. Öffnen wächst weich, wo der Browser es kann
   (::details-content, interpolate-size), sonst öffnet es einfach. Vom Nutzer ausgelöst, darf also verschieben. */
:root { interpolate-size: allow-keywords; }
.formular details::details-content { block-size: 0; overflow: clip; }
.formular details[open]::details-content { block-size: auto; }
/* Nur wo „auto“ interpolierbar ist (Chromium). Firefox und Safari würden content-visibility diskret bei 50 % umschalten,
   der Inhalt bliebe eine halbe Dauer verborgen; dort übernimmt site.js die Bewegung (Web Animations API). */
@supports (interpolate-size: allow-keywords) {
  .formular details::details-content { transition: block-size .6s var(--sanft), content-visibility .6s allow-discrete; }
}
.formular summary { list-style: none; cursor: pointer; }
.formular summary::-webkit-details-marker { display: none; }

/* Weitere Angaben: dieselbe Plus-Form wie bei den Fragen (gleiche Rolle, gleiches Zeichen) */
.mehr { border: 1px solid var(--linie); border-radius: 18px; transition: border-color .4s var(--sanft); }
.mehr:hover, .mehr[open] { border-color: var(--karamell); }
/* Plus umflossen statt als Spalte: auf dem Handy läuft die Unterzeile unter dem Plus in voller Breite weiter */
.mehr > summary { display: flow-root; padding: 14px 14px 14px 18px; border-radius: 18px; }
.mehr > summary .plus { float: right; margin-left: 16px; }
.mehr > summary:hover .plus { background: var(--hellsand); border-color: var(--karamell); }
.mehr__text { display: block; }
.mehr__titel { display: block; margin-bottom: 2px; font-weight: 600; font-size: .98rem; line-height: 1.35; }
.mehr__titel span { font-weight: 400; color: var(--leise); }
.mehr__unter { display: block; font-size: .88rem; line-height: 1.4; color: var(--leise); }
.zusammen { white-space: nowrap; } /* z. B. „E-Mail“ nicht am Bindestrich trennen */
.mehr[open] .plus::after { transform: rotate(0deg); }
.mehr__inhalt { display: flex; flex-direction: column; gap: var(--gruppe); padding: 10px 18px 24px; }

/* Datenschutz in einer Zeile, die drei Punkte bei Bedarf (Art. 9 DSGVO: Gesundheitsdaten nur ausdrücklich) */
.schutz { border-radius: 16px; background: var(--salbei-hell); color: var(--moos); font-size: .92rem; line-height: 1.5; }
.schutz > summary { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 16px; }
.schutz__schloss { width: 18px; height: 18px; flex: none; }
.schutz__titel { flex: 1; min-width: 0; font-weight: 600; }
.schutz__mehr { display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; white-space: nowrap; }
.schutz__mehr::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .5s var(--sanft); }
.schutz[open] .schutz__mehr::after { transform: translateY(1px) rotate(-135deg); }
/* schmal: nur der Winkel, damit der Titel zwei statt drei Zeilen braucht (Text bleibt für Vorleseprogramme) */
@media (max-width: 479px) { .schutz__mehr { font-size: 0; gap: 0; } }
.schutz ul { margin: 0; padding: 0 16px 14px 44px; list-style: none; display: grid; gap: 6px; }
.schutz strong { font-weight: 600; }
/* Falle gegen Spam: für Menschen unsichtbar, außerhalb des Flusses (kein Abstand im Formular) */
.falle { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* Knopf-Beschriftung im Wechsel: beide liegen übereinander, der Knopf ist so breit wie die längere (Layout-Stabilität) */
.knopf__stapel { display: grid; }
.knopf__stapel > span { grid-area: 1 / 1; }
.knopf__arbeit { visibility: hidden; }
.ist-am-senden .knopf__ruhe { visibility: hidden; }
.ist-am-senden .knopf__arbeit { visibility: visible; }
.ist-am-senden .knopf { cursor: progress; opacity: .85; }
.formular__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.formular__fuss p { font-size: .88rem; color: var(--leise); margin: 0; max-width: 34ch; }

/* ---------- Fuß ---------- */
.fuss { background: var(--leinen); padding-block: clamp(72px, 8vw, 112px) 40px; position: relative; }
.fuss__raster { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr); }
.fuss__logo { width: min(100%, 300px); }
.fuss h2 { font: 600 .78rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--akzent); margin-bottom: 12px; }
.fuss address { font-style: normal; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fuss a { text-decoration: none; }
.fuss a:hover { text-decoration: underline; text-underline-offset: 3px; }
.fuss__unten { margin-top: clamp(48px, 6vw, 80px); padding-top: 24px; border-top: 1px solid var(--linie); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: .9rem; color: var(--leise); }
.bildnachweis summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px; }
.bildnachweis summary::-webkit-details-marker { display: none; }
.bildnachweis summary::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .5s var(--sanft); }
.bildnachweis[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.bildnachweis ul { margin-top: 10px; font-size: .9rem; color: var(--leise); max-width: 34ch; }
@media (min-width: 900px) { .fuss__raster { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }

/* ---------- Entwurfsleiste ---------- */
.entwurf { position: fixed; z-index: 70; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 999px; background: rgb(75 67 61 / .96); color: var(--kalk); box-shadow: 0 14px 40px -12px rgb(40 34 30 / .5); font-size: .88rem; max-width: calc(100vw - 24px); }
.entwurf__marke { padding: 0 10px 0 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: .72rem; color: var(--sand); white-space: nowrap; }
.entwurf button { font: inherit; color: inherit; background: transparent; border: 1px solid transparent; border-radius: 999px; min-height: 38px; padding: 0 14px; cursor: pointer; white-space: nowrap; transition: background-color .4s var(--sanft), border-color .4s var(--sanft), color .4s; }
.entwurf button:hover { border-color: rgb(239 202 166 / .5); }
/* Platz für die Leiste am Seitenende, damit sie nichts verdeckt */
.fuss { padding-bottom: calc(40px + 76px); }

/* Notizen zum Entwurf */
.notizen { position: fixed; inset: 0 0 0 auto; margin: 0; height: 100%; max-height: none; width: min(560px, 100%); padding: 0; border: 0; background: var(--kalk); color: var(--mokka); box-shadow: -30px 0 80px -30px rgb(40 34 30 / .35);
  transform: translateX(104%); transition: transform .8s var(--sanft), overlay .8s allow-discrete, display .8s allow-discrete; }
.notizen[open] { transform: none; }
@starting-style { .notizen[open] { transform: translateX(104%); } }
.notizen::backdrop { background: rgb(75 67 61 / 0); transition: background-color .8s var(--sanft), overlay .8s allow-discrete, display .8s allow-discrete; }
.notizen[open]::backdrop { background: rgb(75 67 61 / .28); }
@starting-style { .notizen[open]::backdrop { background: rgb(75 67 61 / 0); } }
/* Firefox und Safari kennen `overlay` nicht: Der Dialog verließe beim Schließen sofort die oberste Ebene. site.js setzt
   dort vorher .geht-zu, das Panel gleitet hinaus, erst danach schließt es (14.10.2026, browser-pruefung.py) */
.notizen[open].geht-zu { transform: translateX(104%); }
.notizen[open].geht-zu::backdrop { background: rgb(75 67 61 / 0); }
.notizen__innen { height: 100%; overflow-y: auto; padding: 28px clamp(22px, 4vw, 40px) 48px; }
.notizen__kopf { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; }
.notizen__kopf h2 { font-size: calc(var(--serif-mass) * 2rem); }
.notizen h3 { font-family: var(--sans); font-weight: 600; font-variation-settings: normal; font-size: 1rem; letter-spacing: .02em; margin: 28px 0 8px; }
.notizen p, .notizen li { font-size: .98rem; }
.notizen ul { padding-left: 1.1em; margin: 0; display: grid; gap: 6px; }
.schliessen { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--linie); background: var(--kalk); cursor: pointer; position: relative; flex: none; }
.schliessen::before, .schliessen::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 1.5px; margin: -.75px 0 0 -8px; background: var(--mokka); transform: rotate(45deg); }
.schliessen::after { transform: rotate(-45deg); }

/* Meldung (über dem Inhalt, verschiebt nichts) */
.meldung { position: fixed; z-index: 80; left: 50%; bottom: 84px; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; max-width: min(460px, calc(100vw - 32px)); padding: 16px 20px; border-radius: 20px; background: var(--moos); color: #F4F6F0; font-size: .95rem; line-height: 1.45; box-shadow: 0 18px 50px -18px rgb(30 36 30 / .5); transition: opacity .6s var(--sanft), transform .8s var(--sanft); }
.meldung.ist-da { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Ruhe für alle, die weniger Bewegung wünschen ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0ms !important; }
  .js [data-zeige], .js .zeile > span, .js .hero__nach { opacity: 1 !important; transform: none !important; }
  .rahmen [data-tiefe] { transform: scale(1.04); }
}

/* ---------- Trias Studio: Kapitelvorlagen „Text“ und „Text mit Bild“ (01.11.2026) ---------- */
.textkapitel__raster { display: grid; gap: clamp(28px, 4vw, 64px); grid-template-columns: minmax(0, 1fr); }
.textkapitel__kopf { max-width: 640px; }
.textkapitel__text { max-width: 62ch; color: var(--mokka); }
.textkapitel__text a, .textbild__fliess a { color: var(--akzent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.textkapitel__text ul, .textbild__fliess ul { padding-left: 1.2em; }
@media (min-width: 960px) { .textkapitel__raster { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } }
.textbild__raster { display: grid; gap: clamp(40px, 6vw, 96px); grid-template-columns: minmax(0, 1fr); align-items: center; }
.textbild__fliess { margin-top: 22px; max-width: 52ch; color: var(--mokka); }
.textbild__bild { width: min(100%, 560px); justify-self: center; }
.textbild__bild .rahmen { aspect-ratio: 4 / 3; }
@media (min-width: 960px) {
  .textbild__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .textbild--links .textbild__bild { order: -1; }
}
/* Bild nicht gefunden (z. B. gelöscht): ruhige Fläche statt kaputtem Symbol */
.bild-fehlt { position: absolute; inset: 0; display: grid; place-items: center; color: var(--leise); font-size: .9rem; background: var(--leinen); }
.portraet .rahmen:not(.portraet__platz) { aspect-ratio: 4 / 5; }
/* ---------- Trias Studio: Unterseiten (Impressum, Datenschutz) ---------- */
.unterseite { padding-top: calc(var(--kopf) + clamp(48px, 7vw, 104px)); }
.unterseite__huelle { width: min(100% - 2 * var(--rand), 760px); }
.unterseite h1 { font-size: calc(var(--serif-mass) * clamp(2.05rem, 1.45rem + 2.3vw, 3.35rem)); line-height: 1.1; margin-bottom: clamp(28px, 4vw, 48px); }
.unterseite__text { color: var(--mokka); }
.unterseite__text h2 { font-size: calc(var(--serif-mass) * clamp(1.3rem, 1.2rem + .5vw, 1.6rem)); font-weight: var(--serif-wght-klein); line-height: 1.25; margin: 2.2em 0 .6em; }
.unterseite__text h2:first-child { margin-top: 0; }
.unterseite__text h3 { font-family: var(--sans); font-size: 1rem; font-weight: 600; letter-spacing: 0; margin: 1.6em 0 .4em; }
.unterseite__text ul, .unterseite__text ol { padding-left: 1.2em; margin: 0 0 1em; }
.unterseite__text li { margin-bottom: .35em; }
.unterseite__text a { color: var(--akzent); text-underline-offset: 3px; text-decoration-thickness: 1px; overflow-wrap: anywhere; }
.unterseite__text a:hover { color: var(--mokka); }