/* memoro-vorsorge.de · App-Rahmen
   Seitenleiste, Schublade auf schmalen Fenstern und Fußbereich. Wird von
   allen Seiten geladen, auch von der Nachfolge-Seite mit den Original-
   Stylesheets von memoro.de. Deshalb nur Klassen mit eigenem Präfix
   (app__, fuss) und keine Grundregeln für body, a oder .wrap. */
:root{
  --plum:#704861;--plum-lt:#9C6B87;--plum-soft:#C9A7B5;--plum-mist:#F3ECF0;--plum-deep:#472A3B;
  --ink:#150C13;--text:#1A0F17;--muted:#6E5B67;--line:rgba(112,72,97,.14);--line-dark:rgba(255,255,255,.13);
  --gruen:#7BC79A;--mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;--ease-out:cubic-bezier(.2,.8,.2,1);
  --seite-b:256px;--leiste-h:0px;--nav-h:0px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.app{display:grid;grid-template-columns:var(--seite-b) minmax(0,1fr);min-height:100vh}
.app__haupt{min-width:0;display:flex;flex-direction:column}
.app__inhalt{container:haupt / inline-size;display:flex;flex-direction:column;gap:18px;padding:clamp(14px,2vw,26px)}
.app__inhalt section[id]{scroll-margin-top:14px}
/* Nachfolge-Seite: memoro.de-Abschnitte laufen randlos */
.app__inhalt--frei{padding:0!important;gap:0}
.app__inhalt--frei section[id]{scroll-margin-top:0}

/* Seitenleiste */
.app__seite{position:sticky;top:0;height:100vh;height:100dvh;z-index:40;display:flex;flex-direction:column;
  padding:20px 14px 16px;background:#fff;border-right:1px solid var(--line);overflow-y:auto;scrollbar-width:thin}
.app__marke{display:flex;flex-direction:column;gap:7px;padding:4px 10px 18px;margin-bottom:10px;border-bottom:1px solid var(--line);text-decoration:none}
.app__marke img{width:132px;height:auto}
.app__marke span{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--plum)}
.app__zu{display:none}
.app__menue{display:flex;flex-direction:column;gap:2px}
.app__menue a{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:11px;text-decoration:none;font-size:14.5px;font-weight:500;color:var(--plum-deep);
  transition:background .25s,color .25s}
.app__menue a svg{width:22px;height:22px;flex:none;color:var(--plum-lt);transition:color .25s}
.app__menue a:hover,.app__menue a.hover{background:var(--plum-mist);color:var(--plum)}
.app__menue a:hover svg,.app__menue a.hover svg{color:var(--plum)}
.app__menue a.aktiv{background:var(--plum);color:#fff;box-shadow:0 8px 20px -10px rgba(71,42,59,.7)}
.app__menue a.aktiv svg{color:#fff}
.app__gruppe{margin:0;padding:16px 10px 6px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.app__seite-fuss{margin-top:auto;padding-top:16px;display:grid;gap:8px}
.app__person{display:grid;grid-template-columns:40px 1fr auto;gap:10px;align-items:center;padding:10px;border-radius:14px;background:var(--plum-mist);
  text-decoration:none;font-size:12.5px;line-height:1.3;color:var(--muted);transition:background .25s}
.app__person:hover{background:#EADDE4}
.app__person img{width:40px;height:40px;border-radius:50%;object-fit:cover}
.app__person b{display:block;font-size:14px;font-weight:500;color:var(--text)}
.app__person i,.app__status i{width:8px;height:8px;border-radius:50%;background:var(--gruen);animation:statusPuls 2.6s ease-out infinite}
@keyframes statusPuls{0%{box-shadow:0 0 0 0 rgba(123,199,154,.55)}70%{box-shadow:0 0 0 9px rgba(123,199,154,0)}100%{box-shadow:0 0 0 0 rgba(123,199,154,0)}}
.app__login{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:11px;border:1px solid var(--line);text-decoration:none;font-size:14px;font-weight:500;color:var(--plum)}
.app__login:hover{background:var(--plum-mist)}
.app__login svg{width:16px;height:16px}
.app__recht{margin:0;padding:2px 10px;font-size:12px;color:var(--muted)}
.app__recht a{color:inherit}

.app__haupt{min-width:0;display:flex;flex-direction:column}
.app__burger{display:none;flex:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--plum);cursor:pointer;align-items:center;justify-content:center}
.app__burger span{position:relative;display:block;width:18px;height:1.6px;background:currentColor}
.app__burger span::before,.app__burger span::after{content:"";position:absolute;left:0;width:18px;height:1.6px;background:currentColor}
.app__burger span::before{top:-6px}.app__burger span::after{top:6px}

/* Fußbereich als letztes Panel */
.app__haupt > .fuss{margin:0 clamp(14px,2vw,26px) clamp(14px,2vw,26px);border-radius:24px}

/* Schmale Fenster: Seitenleiste wird zur Schublade */
.app__schleier{display:none}
@media(max-width:1100px){
  .app{grid-template-columns:minmax(0,1fr)}
  .app__seite{position:fixed;left:0;top:0;bottom:0;width:min(300px,86vw);transform:translateX(-104%);transition:transform .45s var(--ease-out);box-shadow:20px 0 60px -20px rgba(21,12,19,.4)}
  .app__seite.offen{transform:none}
  .app__zu{display:grid;place-items:center;position:absolute;top:14px;right:12px;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--plum);font-size:22px;cursor:pointer}
  .app__schleier{display:block;position:fixed;inset:0;z-index:35;background:rgba(21,12,19,.45);opacity:0;pointer-events:none;transition:opacity .35s}
  .app__schleier.an{opacity:1;pointer-events:auto}
  .app__burger{display:inline-flex;position:fixed;top:12px;left:12px;z-index:34;box-shadow:0 10px 26px -12px rgba(21,12,19,.45)}
  .app__inhalt:not(.app__inhalt--frei){padding-top:68px}
}
html.sparsam .app__person i{animation:none}


/* ── Fußbereich ────────────────────────────────────────── */
.fuss{background-color:#0F080D;color:rgba(255,255,255,.72);padding:clamp(38px,3.8vw,56px) 0 28px;font-size:14.5px}
.fuss__raster{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
.fuss h4{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--plum-soft);font-weight:500;margin-bottom:12px}
.fuss ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.fuss a{text-decoration:none;color:rgba(255,255,255,.78)}
.fuss a:hover{color:#fff;text-decoration:underline}
.fuss__marke img{width:140px;height:auto;margin-bottom:14px}
.fuss__unten{margin-top:32px;padding-top:18px;border-top:1px solid var(--line-dark);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:13px;color:rgba(255,255,255,.5)}
@media(max-width:860px){.fuss__raster{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.fuss__raster{grid-template-columns:minmax(0,1fr)}}


/* Nachfolge-Seite: die memoro.de-Köpfe rechnen mit ihrer Navigation (--nav-h).
   Ohne sie reicht ein kleiner Abstand, auf schmalen Fenstern Platz für den Menüknopf. */
.seite-nachfolge{--nav-h:44px}
@media(max-width:1100px){.seite-nachfolge{--nav-h:64px}}