/* sylviafreygner.com V38 – 29.10.2026: neue Menüführung (Manuela: „die Menüführung schon das beste …?“,
   „warum sind die Punkte links so groß, das will ich nicht“).
   Desktop: sechs Punkte wie im Wegweiser der Startseite + Kontakt-Button, Mega-Menüs für Mentoring, Codes, Insights, kein Burger.
   Handy/Tablet: Burger, Menü zum Aufklappen in normaler Schriftgröße. Wird als letztes Stylesheet geladen. */
.hdr--38 { --n38-ink: #24140E; --n38-line: rgba(61, 31, 22, .12); --n38-e: cubic-bezier(.2, .7, .2, 1); }
html body .hdr.hdr--38 { grid-template-columns: auto 1fr auto; gap: clamp(20px, 2.4vw, 40px); }
.hdr--38 .menu-btn { display: none; }

/* ---------- Kopfzeile ---------- */
.n38 { justify-self: end; align-self: stretch; }
.n38__l { list-style: none; margin: 0; padding: 0; display: flex; height: 100%; gap: clamp(18px, 1.9vw, 34px); }
.n38__i { display: flex; align-items: center; }
.n38__a { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 44px; font-size: 15px; font-weight: 400;
  letter-spacing: .005em; color: var(--n38-ink); text-decoration: none; white-space: nowrap; }
.n38__a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; background: var(--sch, #3D1F16);
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--n38-e); }
.n38__a i { width: 6px; height: 6px; margin-top: -3px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg); transition: transform .25s var(--n38-e); }
.n38__i:hover > .n38__a::after, .n38__i:focus-within > .n38__a::after, .n38__i.is-on > .n38__a::after { transform: scaleX(1); }
.n38__i:hover > .n38__a i, .n38__i:focus-within > .n38__a i { transform: translateY(2px) rotate(225deg); }
.n38__a:focus-visible, .n38__p a:focus-visible, .n38__cta:focus-visible { outline: 2px solid var(--sch, #3D1F16); outline-offset: 3px; }

.n38__cta { display: inline-flex; align-items: center; height: 42px; padding: 0 20px; background: var(--sch, #3D1F16); color: #fff;
  font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  transition: background .2s, color .2s, box-shadow .2s; }
.n38__cta:hover { background: var(--sch2, #5A3324); color: #fff; }
.n38__cta.is-on { background: transparent; color: var(--sch, #3D1F16); box-shadow: inset 0 0 0 1px var(--sch, #3D1F16); }

/* ---------- Mega-Menüs ---------- */
.n38__p { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 1px solid var(--n38-line);
  box-shadow: 0 28px 50px rgba(61, 31, 22, .12); opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s var(--n38-e), transform .25s var(--n38-e), visibility 0s linear .2s; }
.n38__i--mega:hover > .n38__p, .n38__i--mega:focus-within > .n38__p {
  opacity: 1; visibility: visible; transform: none; transition: opacity .2s var(--n38-e) .06s, transform .25s var(--n38-e) .06s, visibility 0s; }
.n38.is-closed .n38__p { opacity: 0 !important; visibility: hidden !important; }
.n38__in { display: grid; gap: clamp(24px, 3vw, 56px); padding: clamp(34px, 3vw, 48px) var(--pad7, 80px) clamp(38px, 3.4vw, 54px); }
.n38__in--m { grid-template-columns: 1.25fr 1fr 1fr 1.2fr; }
.n38__in--ins { grid-template-columns: 1.25fr 1fr 1fr; max-width: 1180px; }
.n38__intro { padding-right: clamp(10px, 2vw, 40px); border-right: 1px solid var(--n38-line); }
.n38__k { margin: 0 0 14px; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--sch, #3D1F16); }
html body .n38__t { margin: 0 0 8px; font-size: 26px; line-height: 1.15; font-weight: 700; color: var(--n38-ink); }
html body .n38__s { margin: 0 0 22px; font-style: italic; font-weight: 400; font-size: 17px; color: #5A4A43; }
.n38__all, .n38__more a { display: inline-flex; align-items: center; gap: 12px; font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--sch, #3D1F16); text-decoration: none; }
.n38__all .arr, .n38__more .arr { width: 22px; transition: transform .25s var(--n38-e); }
.n38__all:hover .arr, .n38__more a:hover .arr { transform: translateX(4px); }
.n38__h { margin: 4px 0 14px; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: #8A7A72; }
.n38__c { display: flex; flex-direction: column; align-items: flex-start; }
.n38__c a { padding: 6px 0; font-size: 15px; line-height: 1.35; color: var(--n38-ink); text-decoration: none; transition: color .2s, transform .25s var(--n38-e); }
.n38__c a:hover { color: var(--sch, #3D1F16); transform: translateX(3px); }
.n38__c a[aria-current] { font-weight: 700; }
.n38__c--dots a { display: inline-flex; align-items: center; gap: 10px; }
.n38__c--dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }

/* Codes: fünf Kacheln, füllen sich beim Darüberfahren mit der Code-Farbe */
.n38__in--codes { grid-template-columns: 1fr; gap: 26px; }
.n38__codes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.n38__code { display: flex; flex-direction: column; gap: 6px; padding: 20px 20px 22px; border-top: 4px solid var(--c); background: #F6F3F1;
  color: var(--n38-ink); text-decoration: none; transition: background .25s var(--n38-e), color .25s var(--n38-e); }
.n38__code b { font-size: 21px; font-weight: 700; line-height: 1.1; }
.n38__cn { font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; opacity: .7; }
.n38__cl { font-size: 13.5px; line-height: 1.4; opacity: .85; }
.n38__code:hover, .n38__code:focus-visible, .n38__code[aria-current] { background: var(--c); color: var(--fg); }
.n38__more { display: flex; gap: clamp(24px, 3vw, 48px); padding-top: 20px; border-top: 1px solid var(--n38-line); }

@media (max-width: 1360px) { .n38__in--m { grid-template-columns: 1.1fr 1fr 1fr 1.25fr; } .n38__code { padding: 18px 16px 20px; } }

/* ---------- Handy und Tablet: Burger + Menü zum Aufklappen ---------- */
.mnav--38 { display: none; }
@media (max-width: 1240px) {
  html body .hdr.hdr--38 { grid-template-columns: 1fr auto auto; gap: 14px; }
  .hdr--38 .n38 { display: none; }
  .hdr--38 .menu-btn { display: grid; }
  .mnav--38 { display: block; }
}
@media (max-width: 560px) { .hdr--38 .n38__cta { display: none; } }

html body .mnav.mnav--38 { padding: calc(var(--hdr, 96px) + 8px) var(--pad7, 24px) 48px; background: var(--sch, #3D1F16); color: #fff; }
.m38 { max-width: 640px; }
.m38__l { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, .16); }
.m38__l > li { border-bottom: 1px solid rgba(255, 255, 255, .16); }
html body .m38__a, html body .m38__g summary { display: flex; align-items: center; justify-content: space-between; padding: 17px 0;
  font-size: 19px; line-height: 1.25; font-weight: 700; color: #fff; text-decoration: none; cursor: pointer; list-style: none; }
.m38__g summary::-webkit-details-marker { display: none; }
.m38__g summary i { position: relative; width: 12px; height: 12px; flex: none; }
.m38__g summary i::before, .m38__g summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor;
  transition: transform .25s var(--n38-e, ease); }
.m38__g summary i::after { transform: rotate(90deg); }
.m38__g[open] summary i::after { transform: rotate(0deg); }
.m38__a[aria-current], .m38__sub a[aria-current] { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.m38__sub { display: flex; flex-direction: column; align-items: flex-start; padding: 0 0 18px; }
.m38__sub a { display: inline-flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 15.5px; color: rgba(255, 255, 255, .86); text-decoration: none; }
.m38__sub a:hover { color: #fff; }
.m38__sub i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); }
.m38__h { margin: 14px 0 4px; font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.m38__h:first-child { margin-top: 2px; }
.m38__foot { margin-top: 34px; display: grid; gap: 18px; justify-items: start; }
.m38__cta { display: inline-flex; align-items: center; gap: 14px; padding: 14px 22px; background: #fff; color: var(--sch, #3D1F16);
  font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; text-decoration: none; }
.m38__cta .arr { width: 22px; }
.m38__ct, .m38__legal { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.m38__ct a { font-size: 14.5px; color: rgba(255, 255, 255, .86); text-decoration: none; }
.m38__legal a { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .6); text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  .n38__p, .n38__a::after, .n38__a i, .n38__code, .n38__c a, .m38__g summary i::before, .m38__g summary i::after { transition: none !important; }
}

/* ---------- V39 · 03.11.2026: Kopf-Logo wie auf sylviafreygner.com (Manuela: „das Logo so machen wie bei Sylvia Freygner“) ----------
   Live steht oben nur der Schriftzug SYLVIAFREYGNER, ohne „The Art of Decision Making“, etwa 260 px breit
   (Tablet 190 px, Handy 150 px wie dort). Fuß bleibt mit Unterzeile. */
html body .hdr .logo--sf2 { width: clamp(200px, 18vw, 260px); gap: 0; }
html body .hdr .logo--sf2 small { display: none; }
@media (max-width: 991px) { html body .hdr .logo--sf2 { width: 190px; } }
@media (max-width: 600px) { html body .hdr .logo--sf2 { width: 150px; } }