/* sylviafreygner.com V23 – 28.10.2026: Dunkelgrün × Electric Pink, Magazin-Cover.
   Wird nach sf11.css geladen. Nachtblau ist im Build schon durch Dunkelgrün ersetzt. */

:root { --green12: #3D1F16; --green12d: #2A140D; --pink12: #E6007E; }

/* ---------- Grundfarben ---------- */
body.v7 .ftr--sf2 { background: var(--green12d); }
body.v7 .mnav { background: var(--green12); }
/* schwarze Buttons werden dunkelgrün, Hover Electric Pink */
body.v7 .btn7:not(.btn7--pink):not(.btn7--white):not(.btn7--onc):not(.btn7--line) { background: var(--green12); border-color: var(--green12); }
body.v7 .btn7:not(.btn7--pink):not(.btn7--white):not(.btn7--onc):not(.btn7--line):hover { background: var(--pink12); border-color: var(--pink12); color: #fff !important; }

/* ---------- Startseite: Magazin-Cover ---------- */
.cv12 { position: relative; overflow: hidden; background: var(--green12); color: #fff;
  height: clamp(640px, calc(100svh - 96px), 1000px); }
body.v7 .cv12__mast { position: absolute; z-index: 1; left: 0; right: 0; top: clamp(10px, 1.6vw, 30px); margin: 0;
  font-family: 'Bodoni Moda', 'Playfair Display', Georgia, serif !important; font-weight: 400 !important;
  font-size: 17.2vw; line-height: .78; letter-spacing: -.012em; text-align: center; color: var(--pink12);
  font-variation-settings: "opsz" 96; user-select: none; }
.cv12__issue { position: absolute; z-index: 3; right: var(--pad7); top: calc(clamp(10px, 1.6vw, 30px) + 13.6vw);
  margin: 0; font-size: 12px; letter-spacing: .32em; text-transform: uppercase; color: #fff; }
.cv12__fig { position: absolute; z-index: 2; left: 50%; bottom: -4%; height: 100%; margin: 0; transform: translateX(-50%); }
.cv12__fig img { display: block; height: 100%; width: auto; }
.cv12__l, .cv12__r { position: absolute; z-index: 3; bottom: clamp(36px, 7vh, 80px); }
.cv12__l { left: var(--pad7); width: min(25vw, 460px); }
.cv12__r { right: var(--pad7); width: min(24vw, 420px); }
.cv12__k { margin: 0 0 16px; font-size: 12px; letter-spacing: .26em; text-transform: uppercase; color: rgba(255, 255, 255, .8); line-height: 1.7; }
body.v7 .cv12__h { margin: 0 0 14px; font-size: clamp(38px, 3.4vw, 62px); line-height: 1; font-weight: 800 !important; color: #fff; letter-spacing: -.01em; }
body.v7 .cv12__claim { margin: 0; font-style: italic; font-weight: 400 !important; font-size: clamp(22px, 1.75vw, 32px); line-height: 1.2; color: var(--pink12); }
.cv12__p { margin: 0 0 24px; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .88); }
.cv12 .btns7 { flex-direction: column; align-items: flex-start; }

@media (prefers-reduced-motion: no-preference) {
  body.v7 .cv12__mast { animation: sf12-mast 1.5s var(--e11, cubic-bezier(.19, 1, .22, 1)) both; }
  .cv12__fig { animation: sf12-fig 1.6s .25s var(--e11, cubic-bezier(.19, 1, .22, 1)) both; }
  .cv12__issue, .cv12__l, .cv12__r { animation: sf11-up 1.1s .7s var(--e11, cubic-bezier(.19, 1, .22, 1)) both; }
}
@keyframes sf12-mast { from { clip-path: inset(100% 0 0 0); transform: translateY(6%); } to { clip-path: inset(-10% 0 -10% 0); transform: none; } }
@keyframes sf12-fig { from { opacity: 0; transform: translate(-50%, 4%); } to { opacity: 1; transform: translate(-50%, 0); } }

/* Tablet und Handy: Cover untereinander */
@media (max-width: 1000px) {
  .cv12 { height: auto; padding: 18px 0 44px; }
  body.v7 .cv12__mast { position: relative; top: 0; font-size: 19vw; }
  .cv12__issue { position: relative; top: 0; right: auto; text-align: center; margin: 3vw 0 0; font-size: 11px; }
  .cv12__fig { position: relative; left: auto; bottom: auto; transform: none; height: auto; width: min(78vw, 520px);
    margin: -2vw auto 0; aspect-ratio: 628 / 900; overflow: hidden; }
  .cv12__fig img { width: 100%; height: auto; }
  .cv12__l, .cv12__r { position: relative; bottom: auto; left: auto; right: auto; width: auto; padding: 0 var(--pad7); }
  .cv12__l { margin-top: 30px; }
  .cv12__r { margin-top: 22px; }
  .cv12 .btns7 { flex-direction: row; }
  @media (prefers-reduced-motion: no-preference) {
    .cv12__fig { animation-name: sf12-figm; }
  }
}
@keyframes sf12-figm { from { opacity: 0; transform: translateY(4%); } to { opacity: 1; transform: none; } }

/* About-Abschluss „Your next chapter“: war weiße Schrift auf Weiß (V9) -> Dunkelgrün */
body.v7 .final4 { background: var(--green12) !important; }