/* Menü · schwebende Leiste mit Aufklappfeld. Gehört zu assets/menue.js.
   Farben stehen oben in :root, der Rest ist für alle Buddy-Seiten gleich. */
:root{
  --m:#8F5430; --m-dk:#744427; --m-lt:#F4E8DC; --m-ink:#1C211D; --m-ink2:#59605A; --m-ink3:#7C837D;
  --m-line:#E8DFD6; --m-soft:#FAF6F1; --m-fill:#8F5430;
  --m-fd:'Bricolage Grotesque','Segoe UI',system-ui,sans-serif;
  --m-fb:'Instrument Sans','Segoe UI',system-ui,sans-serif;
  --m-pw:1000px;
}
.fh, .fh-sheet{ font-family:var(--m-fb); color:var(--m-ink); font-size:16px; line-height:1.4; -webkit-font-smoothing:antialiased; }
.fh *, .fh-sheet *{ box-sizing:border-box; }
:where(.fh a, .fh-sheet a){ text-decoration:none; color:inherit; }
.fh p, .fh-sheet p{ margin:0; }
.fh button, .fh-sheet summary{ font-family:inherit; }
.fh .ic, .fh-sheet .ic{ width:20px; height:20px; flex:none; }

/* Platz für die Leiste: sie schwebt, der Inhalt beginnt darunter. */
.fh-gap{ height:92px; }
section[id], .fgroup, .legal-page .prose h2{ scroll-margin-top:100px; }

/* schwebende Leiste */
.fh{ position:fixed; z-index:80; top:16px; left:0; right:0; margin-inline:auto; width:min(1120px, calc(100% - 48px)); height:66px;
  display:flex; align-items:center; gap:14px; padding:0 10px 0 22px; border-radius:999px;
  background:rgba(255,255,255,.76); -webkit-backdrop-filter:saturate(180%) blur(18px); backdrop-filter:saturate(180%) blur(18px);
  border:1px solid rgba(255,255,255,.7); box-shadow:0 10px 34px -8px rgba(28,33,29,.16), 0 2px 6px rgba(28,33,29,.05);
  transition:background-color .2s, box-shadow .2s; }
.fh.is-scrolled{ background:rgba(255,255,255,.88); }
.fh-logo{ display:inline-flex; align-items:center; gap:10px; flex:none; font:700 22px/1 var(--m-fd); letter-spacing:-.02em; color:var(--m-ink); border-radius:12px; }
.fh-logo img, .fh-logo svg{ display:block; flex:none; }
.fh-logo .fh-mark{ width:36px; height:36px; border-radius:10px; overflow:hidden; background:var(--m-fill); display:block; }
.fh-logo .fh-mark svg{ width:100%; height:100%; }
.fh-nav{ position:static; display:flex; align-items:center; gap:4px; margin-inline:auto; font-weight:500; font-size:16px; }
.fh-nav > a, .fh-prod{ display:inline-flex; align-items:center; gap:6px; padding:10px 15px; border-radius:999px; color:var(--m-ink2); white-space:nowrap; transition:background-color .15s, color .15s; }
.fh-nav > a:hover{ background:var(--m-soft); color:var(--m-ink); }
.fh-nav > a[aria-current="page"]{ color:var(--m-ink); font-weight:600; }
.fh-prod{ color:var(--m-ink); font-weight:600; }
.fh-prod:hover{ background:var(--m-soft); }
.fh-prod .ic{ width:16px; height:16px; transition:transform .2s; }
.fh.is-open .fh-prod{ background:var(--m-lt); color:var(--m-dk); }
.fh.is-open .fh-prod .ic{ transform:rotate(180deg); }
.fh-act{ display:flex; align-items:center; gap:10px; flex:none; }
.fh-login{ display:inline-flex; align-items:center; padding:11px 22px; border-radius:999px; border:1.5px solid var(--m-line); background:rgba(255,255,255,.6); font-weight:600; font-size:15.5px; color:var(--m-ink); white-space:nowrap; transition:background-color .15s; }
.fh-login:hover{ background:#fff; }
.fh-cta{ display:inline-flex; align-items:center; padding:12px 24px; border-radius:999px; background:var(--m-fill); color:#fff !important; font-weight:600; font-size:15.5px; white-space:nowrap; transition:filter .15s; }
.fh-cta:hover{ filter:brightness(.92); }
.fh-menubtn{ display:none; }

.fh a:focus-visible, .fh button:focus-visible, .fh-sheet a:focus-visible, .fh-sheet summary:focus-visible{ outline:3px solid var(--m); outline-offset:2px; }

/* aufgeklapptes Feld */
.fh-panel{ position:absolute; z-index:79; top:calc(100% + 10px); left:50%; width:var(--m-pw); max-width:calc(100vw - 48px);
  background:#fff; border-radius:30px; box-shadow:0 30px 70px -18px rgba(28,33,29,.28), 0 4px 14px rgba(28,33,29,.06); border:1px solid rgba(28,33,29,.05); overflow:hidden;
  visibility:hidden; opacity:0; transform:translate(-50%, -6px); transition:opacity .16s ease, transform .16s ease, visibility 0s linear .16s; }
.fh.is-open .fh-panel{ visibility:visible; opacity:1; transform:translate(-50%, 0); transition-delay:0s; }
.pn-grid{ display:grid; grid-template-columns:256px 1fr 232px; }
.pn-col{ padding:24px 22px 22px; min-width:0; }
.pn-col + .pn-col{ border-left:1px solid var(--m-line); }
.pn-h{ font-size:12px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--m-ink3); margin:0 0 16px !important; }
.pn-note{ font-size:13.5px; color:var(--m-ink2); margin:-6px 0 14px !important; line-height:1.4; }
.big{ display:flex; flex-direction:column; gap:8px; padding:16px 18px 15px; border-radius:20px; background:var(--m-lt); transition:filter .15s; }
.big:hover{ filter:brightness(.97); }
.big + .big{ margin-top:12px; }
.big .bi{ width:42px; height:42px; border-radius:13px; background:var(--m-fill); color:#fff; display:grid; place-items:center; }
.big .bi .ic{ width:22px; height:22px; }
.big b{ font:700 18px/1.2 var(--m-fd); letter-spacing:-.01em; }
.big span.t{ font-size:14px; line-height:1.4; color:var(--m-ink2); }
.pn-col.mid{ display:flex; flex-direction:column; }
.fgrid{ display:grid; grid-template-columns:1fr 1fr; gap:2px 6px; flex:1; align-content:start; }
.fi{ display:flex; gap:12px; padding:10px 10px; border-radius:14px; align-items:flex-start; }
.fi:hover{ background:var(--m-soft); }
.fi .ic{ width:22px; height:22px; margin-top:1px; color:var(--m); }
.fi img{ width:34px; height:34px; border-radius:10px; flex:none; display:block; }
.fi b{ display:block; font-size:15.5px; font-weight:600; line-height:1.25; }
.fi span.t{ display:block; font-size:13.5px; line-height:1.38; color:var(--m-ink2); margin-top:2px; }
.rl{ display:flex; flex-direction:column; gap:2px; }
.rl a{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 10px; border-radius:12px; font-size:15px; font-weight:500; line-height:1.3; }
.rl a:hover{ background:var(--m-soft); }
.rl a .ic{ width:16px; height:16px; color:var(--m-ink3); }
.rl a.sp{ justify-content:flex-start; text-align:left; gap:12px; padding:9px 10px; border-radius:14px; }
.sp img{ width:32px; height:32px; border-radius:9px; flex:none; display:block; }
.sp b{ display:block; font-size:15.5px; font-weight:600; line-height:1.2; }
.sp span.t{ display:block; font-size:13px; color:var(--m-ink2); margin-top:2px; line-height:1.3; }
.pn-foot{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px 28px; background:var(--m-soft); border-top:1px solid var(--m-line); font-size:15px; font-weight:600; }
.pn-foot a{ display:inline-flex; align-items:center; gap:8px; border-radius:8px; }
.pn-foot a .ic{ width:17px; height:17px; }
.pn-foot .l{ color:var(--m-ink); }
.pn-foot .r{ color:var(--m-dk); }

/* Handy-Menü */
.fh-sheet{ display:none; }

@media (max-width:1060px){
  .fh-gap{ height:78px; }
  .fh{ top:10px; width:calc(100% - 20px); height:58px; padding:0 8px 0 16px; gap:10px; }
  .fh-logo{ font-size:20px; }
  .fh-logo .fh-mark, .fh-logo img.fh-m{ width:32px; height:32px; }
  .fh-js .fh-nav, .fh-js .fh-act, .fh-js .fh-panel{ display:none; }
  .fh-js .fh-menubtn{ display:inline-flex; align-items:center; gap:8px; margin-left:auto; padding:10px 16px; border-radius:999px; background:var(--m-lt); color:var(--m-dk); font:600 15px/1 var(--m-fb); border:0; cursor:pointer; }
  .fh-menubtn .ic{ width:18px; height:18px; }
  .fh.is-sheet{ background:rgba(255,255,255,.92); box-shadow:0 8px 26px -10px rgba(28,33,29,.22), 0 1px 4px rgba(28,33,29,.06); border-color:var(--m-line); }
  .fh-sheet.is-open{ display:flex; position:fixed; inset:0; z-index:70; background:#fff; flex-direction:column; padding:86px 20px 22px; overflow-y:auto; overscroll-behavior:contain; }
  .m-list{ display:flex; flex-direction:column; flex:1; min-height:0; }
  .fh-sheet details{ border-bottom:1px solid var(--m-line); }
  .fh-sheet summary{ list-style:none; display:flex; align-items:center; justify-content:space-between; padding:16px 4px; font:600 19px/1.2 var(--m-fd); cursor:pointer; border-radius:8px; }
  .fh-sheet summary::-webkit-details-marker{ display:none; }
  .fh-sheet summary .ic{ width:20px; height:20px; transition:transform .2s; color:var(--m-ink3); }
  .fh-sheet details[open] summary .ic{ transform:rotate(180deg); }
  .m-sub{ display:flex; flex-direction:column; padding:0 0 12px; }
  .m-sub a{ display:flex; align-items:center; gap:14px; padding:9px 4px; font-size:16px; font-weight:500; }
  .m-sub a .ic{ color:var(--m); width:21px; height:21px; }
  .m-sub a img{ width:26px; height:26px; border-radius:8px; flex:none; }
  .m-sub a.all{ color:var(--m-dk); font-weight:600; }
  .m-row{ display:flex; align-items:center; justify-content:space-between; padding:16px 4px; border-bottom:1px solid var(--m-line); font:600 19px/1.2 var(--m-fd); }
  .m-row .ic{ width:18px; height:18px; color:var(--m-ink3); }
  .m-foot{ display:flex; flex-direction:column; gap:10px; padding-top:16px; }
  .m-foot .fh-login, .m-foot .fh-cta{ justify-content:center; padding:15px 22px; font-size:16.5px; }
  html.fh-lock{ overflow:hidden; }

  /* ohne JavaScript: die Hauptlinks stehen als zweite Zeile unter dem Logo */
  html:not(.fh-js) .fh{ height:auto; flex-wrap:wrap; border-radius:28px; padding:10px 14px; row-gap:4px; }
  html:not(.fh-js) .fh-nav{ order:3; width:100%; margin:0; flex-wrap:wrap; font-size:15px; }
  html:not(.fh-js) .fh-nav > a, html:not(.fh-js) .fh-prod{ padding:6px 10px; }
  html:not(.fh-js) .fh-prod .ic{ display:none; }
  html:not(.fh-js) .fh-act{ margin-left:auto; }
  html:not(.fh-js) .fh-login{ display:none; }
  html:not(.fh-js) .fh-cta{ padding:9px 16px; font-size:14.5px; }
  html:not(.fh-js) .fh-gap{ height:128px; }
}

@media (max-width:360px){
  .fh-logo{ font-size:18px; gap:8px; }
}

@media (prefers-reduced-motion:reduce){
  .fh, .fh *, .fh-sheet, .fh-sheet *{ transition:none !important; animation:none !important; }
  html{ scroll-behavior:auto !important; }
}