/* ============================================================
   leimental.online – gemeinsame Gestaltung «Kirsche»
   Kopf, Fuss, Knöpfe, Seitenkopf und Grundtypografie für alle
   öffentlichen Seiten. Wird NACH dem seiteneigenen <style>
   geladen und hat darum bei gleichen Regeln das letzte Wort.
   ============================================================ */
:root{
  --kirsch:#B8102F;
  --kirsch-tief:#8E0B23;
  --bluete:#FBE4E3;
  --tinte:#16182B;
  --grau:#5E6172;
  --weiss:#FFFFFF;
  --rand:#E3DEE0;
  --flaeche:#F4F2F3;
  --display:'Big Shoulders Display','Big Shoulders','Arial Narrow',sans-serif;
  --text:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:var(--text);
}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--text)}
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:0;line-height:.95}
:focus-visible{outline:3px solid var(--tinte);outline-offset:3px}
.auf-farbe :focus-visible,.seitenkopf :focus-visible,.fuss-seite :focus-visible{outline-color:var(--weiss)}
::selection{background:var(--kirsch);color:var(--weiss)}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---------- Knöpfe ---------- */
.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--text);font-weight:700;font-size:16px;line-height:1;
  text-decoration:none;cursor:pointer;border:2px solid transparent;
  padding:16px 24px;border-radius:2px;transition:background .15s ease,color .15s ease;
}
.knopf-kirsch{background:var(--kirsch);color:var(--weiss)!important}
.knopf-kirsch:hover{background:var(--kirsch-tief)}
.knopf-weiss{background:var(--weiss);color:var(--kirsch)!important}
.knopf-weiss:hover{background:var(--bluete)}
.knopf-linie{border-color:currentColor;color:var(--weiss);background:transparent}
.knopf-linie:hover{background:rgba(255,255,255,.12)}
.knopf-tinte{background:var(--tinte);color:var(--weiss)!important}
.knopf-tinte:hover{background:#000}
.knopf-rahmen{border-color:var(--tinte);color:var(--tinte);background:transparent}
.knopf-rahmen:hover{background:var(--tinte);color:var(--weiss)}

/* Bestehende Knopf-Klassen der Unterseiten auf die neue Form bringen */
.btn,.wegweiser,.nav-cta{
  border-radius:2px!important;text-transform:none!important;letter-spacing:0!important;
  font-family:var(--text)!important;font-weight:700!important;
  box-shadow:none!important;clip-path:none!important;transform:none!important;filter:none!important;
}
.btn{font-size:15px}
.wegweiser{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  background:var(--kirsch)!important;color:var(--weiss)!important;border:2px solid var(--kirsch)!important;
  padding:15px 24px!important;font-size:16px!important;
}
.wegweiser:hover{background:var(--kirsch-tief)!important;border-color:var(--kirsch-tief)!important}
.wegweiser.dunkel{background:var(--tinte)!important;border-color:var(--tinte)!important}
.eyebrow{
  transform:none!important;border:0!important;padding:0!important;border-radius:0!important;
  text-transform:none!important;letter-spacing:0!important;
  font-family:var(--text)!important;font-size:16px!important;font-weight:700!important;
  color:var(--kirsch);background:none!important;margin-bottom:12px;
}

/* ---------- Kopf ---------- */
.kopf{position:sticky;top:0;z-index:50;background:var(--weiss);border-bottom:2px solid var(--tinte);padding:0;backdrop-filter:none}
.kopf-in{max-width:1240px;margin:0 auto;padding:0 32px;display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px}
.kopf .marke{font-family:var(--display);font-weight:800;font-size:30px;line-height:1;letter-spacing:.005em;text-decoration:none;color:var(--tinte)}
.kopf .marke span{color:var(--kirsch)}
.kopf .navi{display:flex;align-items:center;gap:30px}
.kopf .navi a{text-decoration:none;font-family:var(--text);font-weight:600;font-size:16px;color:var(--tinte);border:0;padding:0}
.kopf .navi a:not(.knopf):hover{color:var(--kirsch)}
.kopf .navi a[aria-current]{color:var(--kirsch);box-shadow:0 2px 0 var(--kirsch)}
.kopf .navi .knopf{padding:13px 20px;font-size:15px;color:var(--weiss)}
.kopf .kopf-rechts{display:flex;align-items:center;gap:14px}
.kopf .kopf-eintragen{display:none;padding:11px 16px;font-size:14px}
@media(max-width:820px){
  .kopf-in{height:auto;flex-wrap:wrap;padding:12px 16px 0;row-gap:6px}
  .kopf .navi{width:100%;order:3;gap:22px;overflow-x:auto;padding:6px 0 12px;scrollbar-width:none}
  .kopf .navi::-webkit-scrollbar{display:none}
  .kopf .navi .knopf{display:none}
  .kopf .kopf-eintragen{display:inline-flex}
  .kopf .marke{font-size:27px}
}

/* ---------- Seitenkopf (rote Bühne der Unterseiten) ---------- */
.seitenkopf{background:var(--kirsch);color:var(--weiss);padding:56px 0 60px}
.seitenkopf-in{max-width:1240px;margin:0 auto;padding:0 32px}
.seitenkopf .ueber{display:block;font-family:var(--text);font-weight:700;font-size:17px;margin-bottom:14px;color:var(--weiss);opacity:.9}
.seitenkopf h1{font-family:var(--display);font-weight:800;font-size:clamp(52px,7vw,104px);line-height:.88;letter-spacing:-.005em;max-width:20ch;color:var(--weiss);margin:0}
.seitenkopf p{font-size:20px;line-height:1.5;max-width:36em;margin:22px 0 0;color:var(--weiss)}
.seitenkopf a{color:var(--weiss)}
.seitenkopf .knoepfe{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.seitenkopf-schmal h1{font-size:clamp(46px,6vw,84px)}
@media(max-width:640px){
  .seitenkopf{padding:40px 0 44px}
  .seitenkopf-in{padding:0 16px}
  .seitenkopf p{font-size:18px}
}

/* ---------- Fuss ---------- */
.fuss-seite{background:var(--tinte);color:#C9CBDA;padding:64px 0 28px;font-family:var(--text);font-size:15px;margin-top:0}
.fuss-in{max-width:1240px;margin:0 auto;padding:0 32px}
.fuss-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}
.fuss-seite .marke{font-family:var(--display);font-weight:800;font-size:40px;line-height:1;color:var(--weiss);text-decoration:none}
.fuss-seite .marke span{color:#FF8FA0}
.fuss-seite p{margin:14px 0 0;max-width:24em;line-height:1.6}
.fuss-seite h3{font-family:var(--text);font-size:15px;font-weight:700;color:var(--weiss);margin:0 0 12px;letter-spacing:0;line-height:1.4;text-transform:none}
.fuss-seite nav{display:flex;flex-direction:column;gap:8px}
.fuss-seite a{color:#E6E7F0;text-decoration:none}
.fuss-seite a:hover{color:var(--weiss);text-decoration:underline}
.fuss-unten{display:flex;justify-content:space-between;gap:16px;margin-top:48px;padding-top:20px;border-top:1px solid rgba(255,255,255,.16);font-size:13.5px;color:#9C9FB4}
.fuss-unten a{color:#9C9FB4}
@media(max-width:700px){
  .fuss-in{padding:0 16px}
  .fuss-grid{grid-template-columns:1fr 1fr}
  .fuss-marke{grid-column:1 / -1}
  .fuss-unten{flex-direction:column}
}

/* Seitenkopf für schmale Seiten (Formulare, Rechtliches): bündig mit der Inhaltsspalte */
.seitenkopf-eng .seitenkopf-in{max-width:820px;padding:0 24px}
.seitenkopf-eng h1{max-width:none}
.seitenkopf-eng p{font-size:18px}
.seitenkopf .sub{color:var(--weiss)!important;margin:18px 0 0!important}
.seitenkopf .stand{color:var(--weiss)!important;opacity:.85;font-size:15px!important;margin-top:16px!important}
.seitenkopf + .wrap,.seitenkopf + main{margin-top:48px}
@media(max-width:640px){.seitenkopf-eng .seitenkopf-in{padding:0 16px}}
main:has(> .seitenkopf){padding-top:0!important}
.seitenkopf-schmal ~ .wrap h2{font-size:32px;line-height:1;margin-top:40px}
section.seitenkopf{border:0!important;border-radius:0!important;margin-left:0!important;margin-right:0!important;box-shadow:none!important}
.kopf .navi{margin-left:auto}
h1,h2,h3{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
@media(max-width:640px){
  .seitenkopf h1{font-size:clamp(40px,11vw,64px)}
  .seitenkopf-schmal h1{font-size:clamp(36px,10vw,56px)}
}
@media(max-width:820px){.kopf-in:has(.kmenu) .kopf-eintragen{display:none}}