/* sylviafreygner.com V25 – 28.10.2026: Unterüberschriften kleiner und gedämpft.
   Gedämpft = Slate 400 #AFC0B6 auf dunklen Flächen; auf Weiß Slate 500 #5F6B65 (Slate 400 wäre dort zu blass zum Lesen).
   Karten nach dem Vorbild der ILI-Seite (Index-Zeilen, Bild-Karten ohne Rahmen). Keine Abrundungen. */

:root { --muted14: #5F6B65; --muted14d: #AFC0B6; }

/* kleiner */
body.v7 .q8 { font-size: clamp(17px, 1.45vw, 22px) !important; }
body.v7 .sub7 { font-size: 19px !important; }
body.v7 .v4 .lead4, body.v7 .lead4 { font-size: clamp(18px, 1.6vw, 26px) !important; }
body.v7 .v4 .sub4, body.v7 .sub4 { font-size: clamp(14px, 1vw, 16px) !important; }
body.v7 .h5lead { font-size: 19px !important; }
body.v7 .hh8__s { font-size: 12px !important; }
body.v7 .cv12__claim { font-size: clamp(18px, 1.4vw, 26px) !important; }

/* gedämpft auf hellem Grund */
body.v7 .q8, body.v7 .sub7, body.v7 .lead4, body.v7 .sub4, body.v7 .h5lead, body.v7 .hh8__s { color: var(--muted14) !important; }
body.v7 .pz8 .q8 { color: var(--c) !important; }

/* gedämpft auf dunklem Grund (Dunkelgrün) */
body.v7 .cv12__claim, body.mt13 .mh9 .q8, body.v7 .em8 .q8, body.v7 .final4 .lead4, body.v7 .final4 .sub4,
body.v7 .sec4--navy .lead4, body.v7 .sec4--navy .sub4 { color: var(--muted14d) !important; opacity: 1; }

/* auf den farbigen Code-Flächen (Gelb, Rot, Blau …) bleibt Weiß, nur leicht zurückgenommen */
body.v7 .hero7:not(.hero7--dark) .sub7 { color: rgba(255, 255, 255, .8) !important; }

/* weitere dunkle/farbige Flächen */
body.v7 .ab8 .q8 { color: var(--muted14d) !important; }
body.v7 .em8 .q8, body.v7 .vt8 .q8 { color: #D5DED8 !important; }          /* Slate 300 auf Bordeaux/Blau */
body.v7 .series4 .h2-4, body.v7 .series4 .k4 { color: #fff !important; }
body.v7 .series4 .lead4 { color: rgba(255, 255, 255, .82) !important; }
body.v7.pg-sovereignty .hero7 .sub7 { color: rgba(17, 17, 17, .72) !important; }  /* Gelb: dunkle Schrift */

/* 4 Detail-Karten -> 4 in einer Reihe */
body.v7 .mt9s--5 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
@media (max-width: 1100px) { body.v7 .mt9s--5 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 560px) { body.v7 .mt9s--5 { grid-template-columns: minmax(0, 1fr) !important; } }

/* =========================================================================================
   GESAMTKONZEPT (28.10.): jede Inhaltsseite beginnt gleich – Dunkelgrün, Playfair weiß,
   Unterzeile gedämpft, Foto daneben. Ausnahmen mit eigener Bildsprache: die fünf Codes
   (Code-Farbe) und The Art of Decision Making (Signature-Einstieg).
   ========================================================================================= */
:root { --g15: #3D1F16; --bx15: #E6007E; }

/* Mentoring-Übersicht wie ihre Unterseiten */
body.v7 .mh9 { background: var(--g15); color: #fff; }
body.v7 .mh9 h1 { color: #fff !important; }
body.v7 .mh9 .q8 { color: var(--muted14d) !important; }
body.v7 .mh9 .hh8__k, body.v7 .mh9 .p7 p { color: rgba(255, 255, 255, .8) !important; }
body.v7 .mh9 .btn7--line { color: #fff !important; border-color: rgba(255, 255, 255, .7) !important; background: transparent !important; }
body.v7 .mh9 .btn7--line:hover { background: #fff !important; color: var(--g15) !important; }

/* About */
body.v7 .ab9 { background: var(--g15); color: #fff; }
body.v7 .ab9 h1 { color: #fff !important; }
body.v7 .ab9 .hh8__k, body.v7 .ab9 .caps7 { color: rgba(255, 255, 255, .72) !important; }
body.v7 .ab9__lead { color: rgba(255, 255, 255, .86) !important; }
body.v7 .ab9 .btn7--line { color: #fff !important; border-color: rgba(255, 255, 255, .7) !important; background: transparent !important; }
body.v7 .ab9 .btn7--line:hover { background: #fff !important; color: var(--g15) !important; }
body.v7 .fx9 { border-top: 1px solid rgba(255, 255, 255, .14); }

/* Insights, Keynote, Krisennavigator: gleicher Einstieg */
body.v7 .dp4 { background: var(--g15) !important; color: #fff; border-bottom: 0; }
body.v7 .dp4 .h1-4 { font-family: var(--pf8) !important; font-weight: 800 !important; text-transform: none; letter-spacing: -.02em;
  font-size: clamp(36px, 4.2vw, 72px); line-height: 1.02; color: #fff !important; }
body.v7 .dp4 .dp4__code { color: rgba(255, 255, 255, .72) !important; }
body.v7 .dp4 .crumb, body.v7 .dp4 .crumb a { color: rgba(255, 255, 255, .6) !important; }
body.v7 .dp4 .body4 p { color: rgba(255, 255, 255, .86) !important; }
body.v7 .dp4 .sub4 { color: var(--muted14d) !important; }
body.v7 .dp4 .b4:not(.b4--line):not(.b4--line11) { background: var(--bx15) !important; border-color: var(--bx15) !important; color: #fff !important; }
body.v7 .dp4 .b4--line, body.v7 .dp4 .b4--line11 { background: transparent !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, .7) !important; }
body.v7 .dp4 .b4--line:hover, body.v7 .dp4 .b4--line11:hover { background: #fff !important; color: var(--g15) !important; }

/* eine Überschriften-Stimme: Playfair statt dünner Versal-Avenir */
body.v7 .h2-4, body.v7 .oh2 { font-family: var(--pf8) !important; font-weight: 700 !important; letter-spacing: .005em; }
body.v7.pg-kontakt .h1-7 { font-family: var(--pf8) !important; font-weight: 800 !important; letter-spacing: -.015em; color: var(--g15); }

/* =========================================================================================
   KARTEN (28.10., nach dem Vorbild der ILI-Seite): keine Kästchen mehr.
   1. Text-Karten (Was sie macht, Leistungen, Kernbilder, Schritte) = Index-Zeilen
   2. Bild-Karten (Mentoring-Themen) = Bild oben, Text darunter, ohne Rahmen
   ========================================================================================= */

/* 1. Index-Zeilen */
body.v7 .rl9s, body.v7 .cd9, body.v7 .st9 { display: block !important; border-top: 1px solid rgba(61, 31, 22, .18); margin: 0; padding: 0; }
body.v7 .rl9s > .rl9, body.v7 .cd9 > li, body.v7 .st9 > li {
  display: grid !important; grid-template-columns: 96px minmax(0, 4fr) minmax(0, 6fr) 48px; column-gap: clamp(20px, 3vw, 48px);
  align-items: start; padding: clamp(32px, 3.4vw, 48px) 0 !important; margin: 0;
  background: transparent !important; border: 0 !important; border-bottom: 1px solid rgba(61, 31, 22, .18) !important;
  color: var(--g15); text-decoration: none; transition: background .45s var(--e11), padding .45s var(--e11), color .3s; }
body.v7 .rl9s > .rl9 > *, body.v7 .cd9 > li > *, body.v7 .st9 > li > * { grid-column: 3; margin: 0; }
body.v7 .rl9s > .rl9 > .cd9__n, body.v7 .cd9 > li > .cd9__n, body.v7 .st9 > li > .st9__n {
  grid-column: 1; grid-row: 1 / span 4; font-family: 'Bodoni Moda', Georgia, serif !important; font-weight: 400 !important;
  font-size: clamp(34px, 3vw, 48px) !important; line-height: .9; letter-spacing: 0 !important; color: var(--bx15) !important; margin: 0; }
body.v7 .rl9s > .rl9 > h3, body.v7 .cd9 > li > h3, body.v7 .st9 > li > h3 {
  grid-column: 2; grid-row: 1 / span 4; font-family: var(--pf8) !important; font-weight: 700 !important;
  font-size: clamp(22px, 2vw, 32px) !important; line-height: 1.15; color: var(--g15) !important; hyphens: manual; overflow-wrap: normal; }
body.v7 .rl9 p, body.v7 .cd9 p, body.v7 .st9 p { font-size: 17px !important; line-height: 1.7; color: #3d4744 !important; max-width: 62ch; }
body.v7 .cd9 blockquote { margin: 18px 0 0 !important; padding: 0 0 0 18px !important; border: 0 !important; border-left: 1px solid var(--bx15) !important; }
body.v7 .cd9 blockquote p { font-family: var(--pf8) !important; font-style: italic; color: var(--g15) !important; }
body.v7 .cd9 cite { color: var(--bx15); }
/* Zeilen, die verlinken: Pfeil rechts, beim Darüberfahren dunkelgrün */
body.v7 .rl9s > a.rl9::after { content: "→"; grid-column: 4; grid-row: 1; justify-self: end; font-size: 24px; color: var(--bx15); transition: transform .35s var(--e11), color .3s; }
body.v7 .rl9 .cc8__more { display: none; }
body.v7 .rl9s > a.rl9:hover { background: var(--g15) !important; padding-left: 28px !important; padding-right: 28px !important; }
body.v7 .rl9s > a.rl9:hover h3, body.v7 .rl9s > a.rl9:hover p, body.v7 .rl9s > a.rl9:hover .cd9__n, body.v7 .rl9s > a.rl9:hover::after { color: #fff !important; }
body.v7 .rl9s > a.rl9:hover::after { transform: translateX(6px); }
@media (max-width: 860px) {
  body.v7 .rl9s > .rl9, body.v7 .cd9 > li, body.v7 .st9 > li { grid-template-columns: 56px minmax(0, 1fr) 28px; row-gap: 10px; }
  body.v7 .rl9s > .rl9 > *, body.v7 .cd9 > li > *, body.v7 .st9 > li > * { grid-column: 2; }
  body.v7 .rl9s > .rl9 > h3, body.v7 .cd9 > li > h3, body.v7 .st9 > li > h3 { grid-column: 2; grid-row: 1; }
  body.v7 .rl9s > .rl9 > .cd9__n, body.v7 .cd9 > li > .cd9__n, body.v7 .st9 > li > .st9__n { grid-row: 1 / span 3; }
  body.v7 .rl9s > a.rl9::after { grid-column: 3; }
}

/* 2. Bild-Karten ohne Rahmen */
body.v7 .mt9:not(.mt11) { border: 0 !important; background: transparent !important; }
body.v7 .mt9:not(.mt11) .mt9__img img { aspect-ratio: 10 / 9; object-fit: cover; }
body.v7 .mt9:not(.mt11) .mt9__t { padding: 22px 0 0 !important; gap: 10px; }
body.v7 .mt9:not(.mt11) .mt9__h { font-size: clamp(21px, 1.6vw, 26px) !important; color: var(--g15); line-height: 1.15; }
body.v7 .mt9:not(.mt11) .mt9__p { font-size: 15.5px !important; color: #4b5552 !important; }
body.v7 .mt9:not(.mt11) .cc8__more { color: var(--bx15) !important; letter-spacing: .16em; }
body.v7 .mt11 .cc8__more { color: #fff !important; }
body.v7 .mt9s, body.v7 .mt11s { row-gap: clamp(40px, 4vw, 64px) !important; column-gap: clamp(20px, 2vw, 32px) !important; }

/* 3. Monogramm als Trenner */
.orn15 { display: flex; align-items: center; gap: 26px; max-width: 520px; margin: 0 auto; padding: clamp(36px, 5vw, 72px) var(--pad7); }
.orn15 span { flex: 1; height: 1px; background: var(--bx15); opacity: .35; }
.orn15 img { width: 40px; height: auto; flex: none; opacity: .75; }

/* 4. sanftes Einblenden beim Scrollen (sf15.js setzt die Klassen, ohne JS ist alles sofort sichtbar) */
.rv15 { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--e11), transform .9s var(--e11); }
.rv15.in { opacity: 1; transform: none; }