/* ═══════════ Schriften, lokal gehostet ═══════════
   Aus den TTF unter Quellen/Fonts erzeugt und auf das Nötige reduziert:
   nur lateinische Zeichen samt deutscher Typografie. Newsreader nur in 600
   (einziges benutztes Gewicht) mit optischer Größe 16–72; IBM Plex Sans mit
   Gewicht 400–700, Breitenachse fest auf 100. Zusammen 112 statt 432 KB. */
@font-face{
  font-family:'Newsreader';
  src:url('fonts/Newsreader-600-latin.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap;
  unicode-range:U+0020-007E,U+00A0-00AC,U+00AE-017F,U+2010-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+2039-203A,U+20AC,U+2122,U+2190,U+2192,U+2212,U+2009,U+202F;
}
@font-face{
  font-family:'IBM Plex Sans';
  src:url('fonts/IBMPlexSans-latin.woff2') format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap;
  unicode-range:U+0020-007E,U+00A0-00AC,U+00AE-017F,U+2010-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+2039-203A,U+20AC,U+2122,U+2190,U+2192,U+2212,U+2009,U+202F;
}

:root{
  /* Grundfläche kühl, damit das warme Holz der Dioramen dagegen steht */
  --mist:#efedf3;
  --band:#e3dfef;
  --white:#fff;
  --plum:#221b33;
  --muted:#6a6479;
  --peri:#7b74ff;
  --peri-ink:#4a41c7;
  --line:#d7d2e4;
  /* Neu: für Formular-Fehlerzustände. In :root gab es bisher keinen Signalton. */
  --err:#a3243c;
  --err-bg:#fbf2f4;

  --wrap:1240px;
  --gut:40px;
  /* War bisher nirgends definiert und fiel damit auf 0 zurück. Wert bleibt 0,
     damit sich am Bild nichts ändert; steuert jetzt alle Flächenkarten zentral. */
  --radius-feature:0px;

  --f-disp:'Newsreader',Georgia,serif;
  --f-text:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--mist);color:var(--plum);
  font-family:var(--f-text);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2.5px solid var(--peri-ink);outline-offset:3px;border-radius:2px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}

/* ---------- Display-Typografie ---------- */
.d1,.d2,.d3{
  font-family:var(--f-disp);font-weight:600;
  font-optical-sizing:auto;
  letter-spacing:-.01em;margin:0;
}
/* Gemessen: Newsreader setzt bei gleicher Versalhöhe rund 15 % BREITER als
   Fraunces ("Wenige Artikel," bei 100px: 707px gegen 617px). Eine Vergrößerung
   um 5 % hätte die Hero-Spalte gesprengt. Die geringere Präsenz kommt nicht von
   der Größe, sondern vom leichteren Duktus — deshalb Gewicht 500 → 600 und die
   Größe nur minimal über den alten Werten. */
.d1{font-size:clamp(46px,7.2vw,93px);line-height:1.02}
.d2{font-size:clamp(35px,4.7vw,59px);line-height:1.04}
.d3{
  font-size:24px;line-height:1.24;font-weight:600;
  letter-spacing:-.006em;
}
.lede{font-size:20px;line-height:1.5;max-width:34ch;color:#3d3450;margin:26px 0 0}
.body{max-width:52ch;margin:20px 0 0}
.small{font-size:15px;color:var(--muted);line-height:1.55}

/* ---------- Kopfzeile ---------- */
.top{
  position:sticky;top:0;z-index:40;
  background:rgba(239,237,243,.9);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.top .wrap{display:flex;align-items:center;gap:30px;height:86px}
.brand{display:flex;align-items:center;text-decoration:none;margin-right:auto}
.brand .wordmark{height:42px;width:auto;color:var(--plum);display:block}
.nav{display:flex;gap:28px}
.nav a{text-decoration:none;font-size:15.5px;color:#4a4360;padding:5px 0}
.nav a:hover{color:var(--plum);box-shadow:inset 0 -1.5px 0 var(--peri)}

.btn{
  display:inline-block;background:var(--peri-ink);color:#fff;text-decoration:none;
  font-size:16px;font-weight:500;padding:13px 24px;border-radius:2px;
  border:none;cursor:pointer;font-family:inherit;
}
.btn:hover{background:#3a32a8}
.btn-sm{padding:10px 18px;font-size:15px}
.btn-line{
  display:inline-block;text-decoration:none;font-size:16px;font-weight:500;
  padding:13px 24px;border-radius:2px;border:1.5px solid var(--peri-ink);
  color:var(--peri-ink);background:transparent;
}
.btn-line:hover{background:var(--peri-ink);color:#fff}
.btn-ghost{
  display:inline-block;text-decoration:none;font-size:16px;font-weight:500;
  padding:13px 0;box-shadow:inset 0 -2px 0 var(--peri);
}
.btn-ghost:hover{box-shadow:inset 0 -2px 0 var(--plum)}

/* ---------- Held ---------- */
.hero{padding:76px 0 84px;overflow:hidden}
.hero .wrap{
  display:grid;grid-template-columns:minmax(0,1.24fr) minmax(0,1fr);
  gap:24px;align-items:center;
}
/* Die Hero-Zeile ist deutlich länger als die Spalte breit. Eigene Staffelung,
   damit „Ansprechpartner" hineinpasst; die Überschriften der Unterseiten
   (.page-hero .d1) bleiben davon unberührt. Untergrenze 32px, weil das
   längste Wort ohne Silbentrennung sonst ab 320px Fensterbreite überläuft. */
.hero .d1{font-size:clamp(32px,5.0vw,64px)}
.d1{
  hyphens:manual;
  overflow-wrap:normal;
  text-wrap:balance;
}
.hero-art{margin:0 calc(var(--gut) * -1.6) 0 0}
.hero-art img{width:100%}
.hero-cta{display:flex;align-items:center;gap:30px;margin-top:38px;flex-wrap:wrap}

/* eine einzige orchestrierte Bewegung beim Laden */
@keyframes settle{from{opacity:0;transform:translateY(22px) scale(.985)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero-art img{animation:settle .9s cubic-bezier(.2,.7,.3,1) both .12s}
.hero-copy > *{animation:rise .7s cubic-bezier(.2,.7,.3,1) both}
.hero-copy > *:nth-child(2){animation-delay:.08s}
.hero-copy > *:nth-child(3){animation-delay:.16s}
@media(prefers-reduced-motion:reduce){
  .hero-art img,.hero-copy > *{animation:none}
  html{scroll-behavior:auto}
}

/* ---------- Abschnitte ---------- */
section{padding:104px 0}
.head{max-width:46ch;margin-bottom:52px}
.head .body{margin-top:18px}

/* Trennlinie, wo zwei Abschnitte auf demselben Grund aneinanderstoßen.
   Sonst übernehmen das die Hintergrundwechsel (.brands, .offer). */
.sep-top{border-top:1px solid var(--line)}

/* Regal: Bild links, kleiner, überlappt nichts */
.duo{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1fr);gap:76px;align-items:center}
#sortiment .duo{grid-template-columns:minmax(0,.68fr) minmax(0,1fr);gap:68px}
#sortiment .duo-art img{max-width:420px;margin:0 auto}
.duo-art img{width:100%}
.duo.flip{grid-template-columns:minmax(0,1fr) minmax(0,.9fr)}
.duo.flip .duo-art{order:2}

.cats{list-style:none;padding:0;margin:0}
.cats li{padding:19px 0;border-top:1px solid var(--line)}
.cats li:last-child{border-bottom:1px solid var(--line)}
.cats b{font-family:var(--f-disp);font-weight:600;font-optical-sizing:auto;font-size:20px;display:block}
.cats span{color:var(--muted);font-size:15.5px;hyphens:auto}
/* ---------- Marken ---------- */
.brands{background:var(--band)}
.brands .head{max-width:54ch;margin-bottom:40px}

.tabs{display:flex;gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tab{
  flex:1;min-width:0;background:none;border:none;border-left:1px solid var(--line);
  font:inherit;cursor:pointer;padding:22px 20px;text-align:left;
  display:flex;align-items:center;min-height:86px;
  box-shadow:inset 0 0 0 0 var(--peri-ink);
}
.tab:first-child{border-left:none}
.tab .mark{width:auto;height:auto;opacity:.42}
/* auf vergleichbare Schrifthöhe normiert, nicht auf die Bildkante */
.tab .mark-parahealth{max-height:42px;max-width:172px}
.tab .mark-hasemed{max-height:21px;max-width:110px}
.tab .name{
  font-family:var(--f-disp);font-weight:600;font-size:20px;color:var(--muted);
  font-optical-sizing:auto;letter-spacing:-.006em;
}
.tab[aria-selected="true"]{box-shadow:inset 0 -3px 0 var(--peri-ink);background:rgba(255,255,255,.4)}
.tab[aria-selected="true"] img{opacity:1}
.tab[aria-selected="true"] .name{color:var(--plum)}
.tab:hover img{opacity:.75}
.tab:hover .name{color:var(--plum)}

.panel[hidden]{display:none}
.panel{
  display:grid;grid-template-columns:250px minmax(0,1fr);gap:56px;
  padding:40px 0 4px;align-items:start;
}
.panel-sub{margin:0;font-size:16px;color:var(--muted);max-width:26ch}
/* kennzeichnet parahealth und HaseMed als Eigenmarken direkt im Reiter */
.panel-tag{margin:0 0 8px;font-size:13px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--peri-ink)}
.panel-items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;list-style:none;padding:0;margin:0}
.panel-item{min-width:0}
.panel-item .shot{
  aspect-ratio:4/3;border-radius:12px;overflow:hidden;
  background:var(--shot-bg,var(--white));
  display:flex;align-items:center;justify-content:center;margin-bottom:14px;
}
.panel-item .shot img{width:100%;height:100%;object-fit:contain}
.panel-item h4{margin:0;font-size:16.5px;font-weight:600;line-height:1.3;overflow-wrap:break-word}
.panel-item p{margin:4px 0 0;font-size:14.5px;color:var(--muted);line-height:1.4}
/* dritter Reiter: keine Produkte, nur Hinweis und Anfrage */
.panel-note{max-width:54ch}
.panel-note p{margin:0;font-size:16.5px;line-height:1.6}
.panel-note p+p{margin-top:18px}
.panel-note .panel-note-cta{margin-top:26px}
.more{margin:36px 0 0}

/* ---------- Sorgfalt ---------- */
.checks{list-style:none;padding:0;margin:26px 0 0;max-width:56ch}
.checks li{position:relative;padding:15px 0 15px 34px;border-top:1px solid var(--line);font-size:16.5px}
.checks li::before{
  content:"";position:absolute;left:2px;top:24px;
  width:13px;height:7px;border-left:2px solid var(--peri);border-bottom:2px solid var(--peri);
  transform:rotate(-45deg);
}
.legal{margin-top:30px;font-size:14.5px;color:var(--muted);max-width:56ch}

/* ---------- Der eine dunkle Moment ---------- */
/* Lichtstimmung des Dioramas aufnehmen, statt flachem Plum */
.offer{
  background:
    radial-gradient(78% 62% at 50% 104%, #362b53 0%, rgba(54,43,83,0) 68%),
    var(--plum);
  color:#efedf3;padding:60px 0 42px;
}
.offer .d2{color:#fff;font-size:clamp(30px,3.6vw,44px);text-wrap:balance}
.offer .body{color:#c6bfd8;margin-top:14px;font-size:16px}
.offer-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:56px;align-items:start}
/* Unten bündig mit der linken Spalte, sonst hängt die Liste neben der
   großen Überschrift in der Luft. Passt sich jeder Textlänge an. */
.offer-list{list-style:none;padding:0;margin:0;align-self:end}
.offer-list li{padding:9px 0;border-top:1px solid rgba(255,255,255,.16);font-size:15.5px;line-height:1.45;color:#d9d3e8}
.offer-list li:first-child{border-top:none;padding-top:0}
.offer .btn{background:#fff;color:var(--plum)}
.offer .btn:hover{background:#ded9f4}
.offer-note{margin-top:16px;font-size:13.5px;color:#a49cbd;max-width:44ch}
.offer-cta{margin-top:24px}
/* Das Bild bringt einen eigenen Radialverlauf mit. Kanten nach allen vier
   Seiten austasten, damit keine Bildkante auf der Fläche stehen bleibt.
   Kein negativer margin-bottom mehr: das Visual bleibt in der dunklen Fläche. */
.offer-strip{
  margin:34px auto 0;display:block;
  width:min(100%,860px);height:auto;
  --fade-x:14%;--fade-y:18%;
  -webkit-mask-image:
    linear-gradient(to right,transparent 0,#000 var(--fade-x),#000 calc(100% - var(--fade-x)),transparent 100%),
    linear-gradient(to bottom,transparent 0,#000 var(--fade-y),#000 calc(100% - var(--fade-y)),transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right,transparent 0,#000 var(--fade-x),#000 calc(100% - var(--fade-x)),transparent 100%),
    linear-gradient(to bottom,transparent 0,#000 var(--fade-y),#000 calc(100% - var(--fade-y)),transparent 100%);
  mask-composite:intersect;
}

/* ---------- Über ---------- */
.about .duo{align-items:center}
.brandhead{line-height:0}
.brandhead .wordmark-head{
  height:clamp(31px,4.2vw,53px);width:auto;color:var(--plum);display:block;
}
.people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:44px}
.person{display:flex;align-items:center;gap:18px}
.person img{width:112px;height:112px;border-radius:var(--radius-feature);object-fit:cover;flex:none}
.person b{display:block;font-weight:600;font-size:16.5px}
.about-more{margin:34px 0 0}
.person a{color:var(--peri-ink)}

/* ---------- Kontakt ---------- */
.contact{border-top:1px solid var(--line);padding:96px 0}
.doors{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.door{
  background:var(--white);border-radius:var(--radius-feature);
  padding:38px 38px 34px;display:flex;flex-direction:column;
}
.door-kicker{
  margin:0 0 14px;font-size:14px;color:var(--peri-ink);font-weight:500;
}
.door .d3{margin:0 0 14px;max-width:20ch}
.door-body{margin:0;font-size:16px;color:#463e59;max-width:38ch}
.door-list{list-style:none;padding:0;margin:22px 0 30px}
.door-list li{
  position:relative;padding:9px 0 9px 26px;
  border-top:1px solid var(--line);font-size:15.5px;color:var(--muted);
}
.door-list li::before{
  content:"";position:absolute;left:1px;top:18px;width:11px;height:6px;
  border-left:2px solid var(--peri);border-bottom:2px solid var(--peri);transform:rotate(-45deg);
}
.door .btn,.door .btn-line{align-self:flex-start;margin-top:auto}

/* ---------- Fuß ---------- */
footer{border-top:1px solid var(--line);padding:56px 0 0;font-size:14.5px;color:var(--muted)}
.foot{
  display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));
  gap:40px;align-items:start;
}
.foot-brand{max-width:30ch}
.foot .wordmark{height:26px;width:auto;color:var(--plum);display:block}
.foot-claim{margin:16px 0 0;font-size:14.5px;line-height:1.5}
.foot-col h2{
  margin:0 0 14px;font-family:var(--f-text);font-size:13px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--plum);
}
.foot-col ul{list-style:none;padding:0;margin:0}
.foot-col li{margin:0 0 9px}
.foot-col a{text-decoration:none}
.foot-col a:hover{color:var(--plum);box-shadow:inset 0 -1px 0 var(--peri)}
.foot-base{
  margin-top:48px;padding:22px 0 34px;border-top:1px solid var(--line);
  display:flex;gap:10px 28px;flex-wrap:wrap;font-size:13.5px;
}
.foot-base p{margin:0}
.foot-base .sep{margin-left:auto}

/* ---------- Schmale Fenster ---------- */
@media(max-width:1000px){
  :root{--gut:26px}
  .hero .wrap{grid-template-columns:1fr;gap:8px;padding-top:0}
  .hero-art{margin:0 calc(var(--gut) * -1) 0 calc(var(--gut) * -1)}
  .hero{padding-top:52px}
  /* #sortiment .duo ist ID-basiert und schlägt sonst diese Regel —
     der Abschnitt bliebe auf dem Handy zweispaltig. */
  .duo,.duo.flip,#sortiment .duo{grid-template-columns:1fr;gap:40px}
  .duo.flip .duo-art{order:0}
  .duo-art{max-width:440px}
  .offer-grid{grid-template-columns:1fr;gap:36px}
  .doors{grid-template-columns:1fr}
  .tabs{flex-wrap:wrap}
  .tab{flex:1 1 50%;min-height:70px;padding:16px}
  .tab:nth-child(3){border-left:none;border-top:1px solid var(--line);flex-basis:100%}
  .tab .mark-parahealth{max-height:34px;max-width:132px}
  .tab .mark-hasemed{max-height:17px;max-width:92px}
  .panel{grid-template-columns:1fr;gap:24px;padding-top:30px}
  .panel-items{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  section{padding:76px 0}
  .offer{padding:52px 0}
  .top .wrap{height:auto;padding-top:16px;padding-bottom:16px;flex-wrap:wrap;gap:14px 22px}
  .nav{order:3;width:100%;gap:20px;flex-wrap:wrap}
  .nav a{font-size:15px}
  .people{grid-template-columns:1fr;gap:28px}
  .brand .wordmark{height:36px}
}
@media(max-width:560px){
      .lede{font-size:18px}
}

/* ═══════════ Unterseiten ═══════════ */
.page-hero{padding:72px 0 0}
.page-hero .d1{max-width:16ch}
.page-hero .lede{max-width:46ch}
.crumb{margin:0 0 26px;font-size:15px;color:var(--muted)}
.crumb a{color:var(--peri-ink);text-decoration:none}
.crumb a:hover{box-shadow:inset 0 -1.5px 0 var(--peri)}

/* ---------- Über uns: die beiden Personen sind der Mittelpunkt ---------- */
/* Kein großer Seitenkopf, nur eine knappe Zeile — dann direkt die Porträts. */
.about-top{padding:54px 0 0}
.page-title{
  font-family:var(--f-disp);font-weight:600;font-optical-sizing:auto;
  font-size:clamp(27px,3.3vw,40px);line-height:1.12;letter-spacing:-.01em;
  margin:0;max-width:24ch;text-wrap:balance;
}

.folk{
  /* dieselbe Lichtstimmung wie im Fachkunden-Block, nur von oben */
  background:
    radial-gradient(76% 58% at 50% -6%, #362b53 0%, rgba(54,43,83,0) 66%),
    var(--plum);
  color:#efedf3;margin-top:44px;padding:76px 0 104px;
}
.folk-grid{display:grid;grid-template-columns:repeat(2,minmax(0,380px));justify-content:center;gap:84px}
.folk-card img{
  width:100%;aspect-ratio:4/5;object-fit:cover;
  border-radius:var(--radius-feature);margin-bottom:30px;
}
.folk-name{
  font-family:var(--f-disp);font-weight:600;font-optical-sizing:auto;
  font-size:clamp(25px,2.5vw,33px);line-height:1.14;letter-spacing:-.01em;
  margin:0;color:#fff;
}
.folk-role{margin:7px 0 0;font-size:15px;color:#a49cbd}
.folk-card p{margin:18px 0 0;font-size:16.5px;line-height:1.6;color:#d9d3e8;max-width:42ch}
.folk-card p:first-of-type{margin-top:22px}

/* Zwei Wege, die zusammenlaufen */
/* Eine Linie, kein Pfeil: sie beginnt im dunklen Block, läuft dort hell aus
   und wird nach unten zum Periwinkle, damit sie auf beiden Gründen trägt.
   Die Box belegt nur die Höhe, die im Fluss gebraucht wird; das SVG hängt
   absolut darüber und darf nach unten über den Abschnitt hinausragen, damit
   der Faden bis zum Baum läuft. */
.merge{
  position:relative;z-index:2;pointer-events:none;
  height:194px;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);
}
.merge svg{
  position:absolute;top:-96px;left:var(--gut);
  width:calc(100% - 2 * var(--gut));height:700px;display:block;overflow:visible;
}
.thread-short{display:none}

.story{padding-top:24px}
.story .lede{max-width:38ch;margin-top:22px}
.story-art img{max-width:460px;margin:0 auto}

/* ═══════════ Formular ═══════════ */
.form-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:64px;align-items:start}
.form-card{background:var(--white);border-radius:var(--radius-feature);padding:40px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 24px}
.field{display:flex;flex-direction:column;min-width:0}
.field.wide{grid-column:1 / -1}
.field label{font-size:15px;font-weight:600;margin-bottom:7px}
.field .opt{font-weight:400;color:var(--muted)}
.field input,.field select,.field textarea{
  font:inherit;font-size:16px;color:var(--plum);background:var(--mist);
  border:1.5px solid var(--line);border-radius:2px;padding:12px 13px;
  width:100%;min-width:0;
}
.field textarea{min-height:150px;resize:vertical;line-height:1.5}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px;background-repeat:no-repeat;padding-right:42px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--peri-ink);background:var(--white)}
.field .hint{font-size:13.5px;color:var(--muted);margin:6px 0 0}
.field .err{font-size:13.5px;color:var(--err);margin:6px 0 0;display:none}
/* Fehler erst zeigen, wenn wirklich etwas eingegeben oder abgeschickt wurde */
.field :user-invalid{border-color:var(--err);background:var(--err-bg)}
.field:has(:user-invalid) .err{display:block}
.field:has(:user-invalid) .hint{display:none}
.form-actions{grid-column:1 / -1;margin-top:6px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.form-actions .small{margin:0}
.aside-card .d3{margin:0 0 18px}
.aside-note{margin:26px 0 0;font-size:14.5px;color:var(--muted);max-width:38ch}

@media(max-width:1000px){
  .foot{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px}
  .foot-brand{grid-column:1 / -1;max-width:40ch}
  .foot-base .sep{margin-left:0}
  .folk-grid{grid-template-columns:1fr;gap:52px}
  .folk{padding:56px 0 78px;margin-top:34px}
  .folk-card img{max-width:420px}
  /* einspaltig liefe der lange Faden mitten durch den Text */
  .merge{height:96px}
  .merge svg{top:-74px;height:auto}
  .thread-long{display:none}
  .thread-short{display:inline}
  .story{padding-top:16px}
  .about-top{padding-top:40px}
  .form-layout{grid-template-columns:1fr;gap:40px}
  .form-card{padding:28px}
  .page-hero{padding-top:52px}
}
@media(max-width:560px){
  .foot{grid-template-columns:1fr;gap:28px}
  .form-grid{grid-template-columns:1fr}
}

/* Datenschutzhinweis statt Pflicht-Checkbox: eine Anfrage zu beantworten braucht
   keine Einwilligung (Art. 6 Abs. 1 lit. b DSGVO), nur die Information darüber. */
.form-privacy{grid-column:1 / -1;margin:0;font-size:14.5px;line-height:1.5;color:var(--muted)}
.form-privacy a{color:var(--peri-ink)}

/* Rückmeldung nach dem Absenden: das Formular öffnet das E-Mail-Programm */
.form-status{margin:22px 0 0;padding:14px 16px;background:var(--mist);border-left:2px solid var(--peri-ink);font-size:15px;line-height:1.5}
.form-status a{color:var(--peri-ink)}

/* ═══════════ Impressum, Datenschutz ═══════════ */
.legal{padding:54px 0 96px}
.legal-body{max-width:70ch;margin-top:30px;font-size:16px;line-height:1.65}
.legal-body h2{font-family:var(--f-disp);font-weight:600;font-size:26px;line-height:1.2;margin:48px 0 14px}
.legal-body h3{font-size:18px;font-weight:600;line-height:1.3;margin:32px 0 8px}
.legal-body h4{font-size:16px;font-weight:600;margin:22px 0 6px}
.legal-body p,.legal-body li{margin:0 0 14px;hyphens:auto}
.legal-body ul{margin:0 0 14px;padding-left:22px}
.legal-body a{color:var(--peri-ink);overflow-wrap:anywhere}
.legal-source{margin-top:40px!important;font-size:14px;color:var(--muted)}
.legal-body h2,.legal-body h3{hyphens:auto;overflow-wrap:break-word}
@media(max-width:560px){.legal-body h2{font-size:22px}}