/* sylviafreygner.com V22 – 28.10.2026: Mentoring & Expertise, Feinschliff.
   Wird nach sf9.css geladen. Farben wie V9: Pink #E6007E, Nachtblau #3D1F16, Schwarz #111, fünf Code-Farben. */

:root { --pink11: #E6007E; --navy11: #3D1F16; --ink11: #111; --e11: cubic-bezier(.19, 1, .22, 1); }

/* ---------- Browser-Details aus der Marke ---------- */
::selection { background: var(--pink11); color: #fff; }
html { scrollbar-color: #c9c9c9 transparent; accent-color: var(--pink11); }
body.v7 a:focus-visible, body.v7 button:focus-visible { outline: 2px solid var(--pink11); outline-offset: 3px; }
body.v7 .p7 a, body.v7 .ct9 a:not(.btn7) { text-underline-offset: .2em; text-decoration-thickness: 1px; }

/* ---------- Menü: Mentoring & Expertise als gegliedertes Aufklapp-Menü ---------- */
body.v7 .nav .drop11 { display: grid; grid-template-columns: repeat(3, auto); gap: 0; min-width: 0; width: max-content;
  padding: 26px 8px 22px; border-top: 2px solid var(--pink11); box-shadow: 0 24px 48px rgba(61, 31, 22, .12); }
.drop11__c { display: flex; flex-direction: column; padding: 0 20px; }
.drop11__c + .drop11__c { border-left: 1px solid var(--line9); }
.drop11__h { display: block; padding: 0 0 10px; margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--pink11); white-space: nowrap; }
body.v7 .drop11 .drop__s { padding: 7px 0 !important; font-size: 15px; white-space: nowrap; color: var(--ink11);
  background: none !important; transition: color .2s, transform .35s var(--e11); }
body.v7 .drop11 .drop__s:hover { color: var(--pink11); transform: translateX(4px); }
@media (max-width: 1320px) { body.v7 .hdr--sf2 .nav__a { font-size: 14px !important; } }

/* Themen-Leiste: Gruppen durch feine Trennstriche */
.mn11__sep { display: inline-block; width: 1px; height: 16px; background: var(--line9); margin: 0 4px; }

/* ---------- Startseite: Einstieg ohne Farbverlauf ---------- */
@media (min-width: 1001px) {
  .hero9 { display: grid; grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
    min-height: clamp(560px, calc(100svh - 96px), 980px); background: var(--navy11); overflow: hidden; }
  .hero9::after { display: none; }
  .hero9__img { grid-column: 2; grid-row: 1; position: relative; }
  .hero9__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; }
  .hero9__txt { grid-column: 1; grid-row: 1; position: relative; inset: auto; width: auto; align-self: center;
    padding: 64px clamp(32px, 4vw, 72px) 64px var(--pad7); }
  .hero9__k { color: rgba(255, 255, 255, .78); font-size: 12px; }
  .hero9__h { font-size: clamp(44px, 4.2vw, 76px); }
  .hero9__p { color: rgba(255, 255, 255, .86); max-width: 34em; }
  .hero9__txt::before { content: ""; display: block; width: 56px; height: 3px; background: var(--pink11); margin: 0 0 30px; }
}

/* ein Moment Bewegung: Foto öffnet sich, Text kommt nach */
@media (prefers-reduced-motion: no-preference) {
  .hero9__img img { animation: sf11-open 1.6s var(--e11) both; }
  .hero9__txt > * , .hero9__txt::before { animation: sf11-up 1.1s var(--e11) both; }
  .hero9__txt::before { animation-delay: .25s; }
  .hero9__k { animation-delay: .35s !important; }
  .hero9__h { animation-delay: .45s !important; }
  .hero9__p { animation-delay: .6s !important; }
  .hero9 .btns7 { animation-delay: .75s !important; }
}
@keyframes sf11-open { from { clip-path: inset(0 0 0 100%); transform: scale(1.06); } to { clip-path: inset(0 0 0 0); transform: none; } }
@keyframes sf11-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ---------- Mentoring-Seite: Expertise + Krisenexpertise im Detail ---------- */
body.v7 h3.gh11.pf8 { font-weight: 600 !important; }
body.v7 .gh11 { font-size: clamp(22px, 1.9vw, 28px);
  line-height: 1.2; margin: clamp(48px, 5vw, 72px) 0 22px; padding-top: 18px; border-top: 1px solid var(--line9); color: var(--ink11); }
body.v7 .cx8 + .gh11 { margin-top: clamp(28px, 3vw, 44px); }

.mt11s { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); }
.mt11 { border: 0 !important; color: #fff !important; }
.mt11--navy { background: var(--navy11); }
.mt11--pink { background: var(--pink11); }
.mt11--ink { background: var(--ink11); }
.mt11 .mt9__img img { aspect-ratio: 4 / 3; object-fit: cover; }
.mt11 .mt9__t { padding: clamp(24px, 2.2vw, 34px) clamp(22px, 2.2vw, 32px) clamp(26px, 2.4vw, 36px); gap: 12px; }
.mt11 .mt9__h { font-size: clamp(26px, 2.2vw, 34px); color: #fff; }
.mt11 .mt9__p { color: rgba(255, 255, 255, .88); font-size: 16px; }
.mt11 .cc8__more { color: #fff !important; }
.mt11:hover { transform: none !important; }

.mt9s--5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.mt9s--5 .mt9__h { font-size: 20px; }
@media (max-width: 1240px) { .mt9s--5 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 860px) {
  .mt11s { grid-template-columns: minmax(0, 1fr); }
  .mt9s--5 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 560px) { .mt9s--5 { grid-template-columns: minmax(0, 1fr) !important; } }

/* Bilder in Karten: ruhiger Zoom statt Hochspringen */
.mt9 .mt9__img, .cc8 figure, .t7 figure { overflow: hidden; }
.mt9 .mt9__img img { transition: transform 1.1s var(--e11); }
.mt9:hover .mt9__img img { transform: scale(1.045); }
.mt9:hover { transform: none !important; }
.mt9 .cc8__more { transition: letter-spacing .4s var(--e11); }
.mt9:hover .cc8__more { letter-spacing: .18em; }

/* Pfeile in Buttons laufen mit */
.btn7 .arr { transition: transform .45s var(--e11); }
.btn7:hover .arr { transform: translateX(5px); }

/* Krisennavigator: zweiter Button als Linie */
.b4--line11 { background: transparent !important; color: var(--ink11) !important; border: 1px solid currentColor !important; margin-left: 10px; }

/* Handy-Menü: in V9 weiße Schrift auf weißem Grund (unsichtbar) -> Nachtblau, Gruppen-Titel Pink */
body.v7 .mnav { background: var(--navy11); color: #fff; }
body.v7 .mnav__col h3 { color: var(--pink11); font-weight: 700; }
body.v7 .mnav__main a, body.v7 .mnav__col a { color: #fff; }
body.v7 .mnav__main a { font-size: clamp(30px, 8vw, 56px); }

/* Handy: nichts läuft seitlich über (lange Wörter in Rechtstexten, Krisennavigator, Bildversatz) */
body.v7 main { overflow-x: clip; }
body.v7 .legal__in, body.v7 .legal__body, body.v7 .oth, body.v7 .otb { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
body.v7 .legal__in h1 { overflow-wrap: anywhere; }