/* ============================================================
   MTMS – Mentaltraining Maximilian Seibel
   HOME.CSS

   Seitenspezifisches CSS, nur fuer diese eine Seite (DE + EN nutzen
   dieselbe Datei, da sich nur der Text unterscheidet, nicht das
   Design). Gemeinsame Bausteine (Header, Footer, Buttons, Toggles)
   stehen in content/css/shared.css und werden zusaetzlich geladen.

   Inhalt: Startseite: Hero mit Atem-Ringen, Marquee-Leiste, "Kann ich helfen"-Bereich, Schwerpunkte-Karten, kompakte Schritte-Reihe, "Warum MTMS", Story-Teaser, Schluss-CTA.
   ============================================================ */


/* ---------- hero ---------- */
.hero{ position:relative; padding: 100px 0 90px; overflow:hidden; }
  .hero-grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items:center; }
  .eyebrow{
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sage);
  }
  .hero h1{
    font-family: var(--display);
    font-size: clamp(40px, 6vw, 66px);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.01em;
    margin: 18px 0 22px;
  }
  .hero .lede{
    font-family: var(--display);
    font-style: italic;
    font-size: clamp(19px, 2.2vw, 23px);
    color: var(--sage);
    margin-bottom: 18px;
  }
  .hero p{ font-size: 16.5px; max-width: 520px; color: rgba(32,36,31,0.75); margin-bottom: 12px; }
  .hero p + p{ margin-bottom: 30px; }
  .hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }

  .breathing-rings{ position:relative; aspect-ratio: 1/1; display:flex; align-items:center; justify-content:center; margin-bottom: 32px; }
  .breathing-rings svg{ width:100%; height:100%; }

  /* Box-Atmung (4-4-4-4 Sekunden = 16s Zyklus): einatmen, halten, ausatmen, halten.
     Wichtig: Wir animieren hier den SVG-Radius (r) direkt statt CSS transform:scale().
     cx/cy bleiben dabei fest bei 150/150 (Zentrum des viewBox) - ein Versatz zur
     Seite ist so technisch ausgeschlossen, unabhaengig vom Browser. Bei transform:scale()
     haengt der Skalierungspunkt vom SVG-Koordinatenraum (transform-box) ab, der sich
     browserabhaengig unterschiedlich verhalten kann - das hatte vorher den Bug verursacht. */
  .breath-ring, .breath-dot{ animation: 16s ease-in-out infinite; }
  .breath-ring-1{ r: 60px; animation-name: box-breathe-r1; }
  .breath-ring-2{ r: 95px; animation-name: box-breathe-r2; }
  .breath-ring-3{ r: 130px; animation-name: box-breathe-r3; }
  .breath-dot{ r: 30px; animation-name: box-breathe-dot; }

  @keyframes box-breathe-r1{
    0%, 100%{ r: 60px; }    /* Ruhezustand: 0-0s und 12-16s (halten-leer) */
    25%, 50%{ r: 73px; }    /* Maximalgroesse: 4-8s (einatmen fertig, halten-voll) */
  }
  @keyframes box-breathe-r2{
    0%, 100%{ r: 95px; }
    25%, 50%{ r: 108px; }
  }
  @keyframes box-breathe-r3{
    0%, 100%{ r: 130px; }
    25%, 50%{ r: 141px; }
  }
  @keyframes box-breathe-dot{
    0%, 100%{ r: 30px; }
    25%, 50%{ r: 35px; }
  }

  /* Phasen-Anzeige unter den Ringen, synchron zur Animation.
     Jede Phase blendet fuer genau ein Viertel des 16s-Zyklus ein. */
  .breathing-label{
    position:absolute; bottom: -8%; left:0; right:0; height: 1.4em;
  }
  .breathing-label span{
    position:absolute; left:0; right:0; text-align:center;
    font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--sage);
    opacity: 0;
    animation: breath-label-cycle 16s ease-in-out infinite;
  }
  .breathing-label span:nth-child(1){ animation-delay: 0s; }
  .breathing-label span:nth-child(2){ animation-delay: 4s; }
  .breathing-label span:nth-child(3){ animation-delay: 8s; }
  .breathing-label span:nth-child(4){ animation-delay: 12s; }

  @keyframes breath-label-cycle{
    0%{ opacity: 0; }
    3%{ opacity: 1; }
    22%{ opacity: 1; }
    25%{ opacity: 0; }
    100%{ opacity: 0; }
  }

  /* Sichtbare, nicht animierte Erklaerung fuer Screenreader und als
     permanente Orientierung (die einzelnen Phasen-Woerter sind
     dekorativ und per aria-hidden ausgeblendet). */
  .breathing-caption{
    margin-top: 40px;
    text-align:center;
    font-size: 12px;
    color: rgba(32,36,31,0.45);
  }

  @media (prefers-reduced-motion: reduce){
    .breath-ring, .breath-dot, .breathing-label span{ animation: none; }
    .breathing-label span:nth-child(1){ opacity: 1; }
  }

/* ---------- marquee ---------- */
.marquee-band{ background: var(--paper-dim); padding: 20px 0; overflow:hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .marquee-track{ display:flex; gap: 44px; white-space:nowrap; animation: scroll 30s linear infinite; width: max-content; }
  .marquee-track span{ font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sage); }
  @keyframes scroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* ---------- section shared ---------- */
section{ padding: 96px 0; }
  .section-head{ max-width: 620px; margin-bottom: 50px; }
  .section-head h2{
    font-family: var(--display);
    font-size: clamp(28px, 4vw, 40px);
    font-weight:500;
    letter-spacing:-0.01em;
    margin-top:12px;
  }

/* ---------- leitsatz ---------- */
.leitsatz blockquote{
    font-family: var(--display);
    font-style: italic;
    font-size: clamp(23px, 3.2vw, 34px);
    font-weight: 500;
    line-height: 1.35;
    color: var(--ink);
  }
  .leitsatz blockquote::before{
    content:""; display:block; width: 46px; height:46px; border-radius:50%;
    background: var(--amber); opacity:0.25; margin-bottom: 22px;
  }

/* ---------- kann ich helfen ---------- */
.doubts{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 20px; }
  .doubt-card{
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 24px 26px;
    font-family: var(--display);
    font-size: 17px;
    font-style: italic;
    line-height: 1.4;
    color: rgba(32,36,31,0.82);
  }
  .doubts-lede{ font-size: 16.5px; color: rgba(32,36,31,0.7); max-width: 560px; margin-bottom: 30px; }
  .doubts-close{ margin-top: 34px; font-size: 16.5px; max-width: 620px; color: rgba(32,36,31,0.75); }
  .doubts-close strong{ color: var(--ink); }

/* ---------- schwerpunkte ---------- */
.focus-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
  .focus-grid.cols-2{ grid-template-columns: repeat(2, 1fr); max-width: 860px; margin: 0 auto; }
  .focus-item{ background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 36px 30px; display:flex; flex-direction:column; }
  .focus-num{
    width: 34px; height:34px; border-radius:50%;
    background: var(--sage-dim); color: #fff;
    display:flex; align-items:center; justify-content:center;
    font-family: var(--mono); font-size: 12px; margin-bottom: 20px;
  }
  .focus-item h3{ font-family: var(--display); font-size: 21px; font-weight: 500; margin-bottom: 12px; }
  .focus-item p{ font-size: 14.5px; color: rgba(32,36,31,0.65); }
  .focus-link{
    display:inline-flex; align-items:center; gap:8px;
    margin-top: auto;
    padding-top: 20px;
    font-size: 14px; font-weight: 600;
    color: var(--amber);
  }
  .focus-link svg{ width:14px; height:14px; transition: transform .15s ease; }
  .focus-item:hover .focus-link svg{ transform: translateX(3px); }

/* ---------- compact steps row ---------- */
.steps-row{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .step-item{ text-align:left; }
  .step-num{
    width: 36px; height:36px;
    border-radius:50%;
    background: var(--amber);
    color: #fff;
    display:flex; align-items:center; justify-content:center;
    font-family: var(--display);
    font-weight:600;
    font-size: 15px;
    margin-bottom: 16px;
  }
  .step-item h3{ font-family: var(--display); font-size: 18px; font-weight: 500; margin-bottom: 6px; }
  .step-item p{ font-size: 14px; color: rgba(32,36,31,0.62); }
  @media (max-width: 860px){
    .steps-row{ grid-template-columns: 1fr; gap: 24px; }
  }

/* ---------- warum mtms ---------- */
.why{ background: var(--paper-dim); }
  .tint{ background: var(--paper-dim); }
  .why-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items:center; }
  .word-stack{ display:flex; flex-direction:column; gap: 4px; }
  .word-stack .fade{ font-family: var(--display); font-size: clamp(22px, 3.4vw, 34px); font-weight: 400; color: rgba(32,36,31,0.32); }
  .word-stack .kopf{
    font-family: var(--display); font-style: italic;
    font-size: clamp(44px, 6.5vw, 70px); font-weight: 600; color: var(--ink);
    margin-top: 10px; position:relative; display:inline-block;
  }
  .word-stack .kopf::after{
    content:""; position:absolute; left:0; bottom:-6px; width: 70px; height: 8px;
    border-radius: 8px; background: var(--amber); opacity:0.55;
  }
  .why-text p{ font-size: 16.5px; color: rgba(32,36,31,0.75); margin-bottom: 16px; }
  .why-text p strong{ color: var(--ink); }

/* ---------- story ---------- */
.story-beats{ display:flex; flex-direction: column; margin-top: 40px; }
  .story-beat{ display:grid; grid-template-columns: 44px 1fr; gap: 20px; padding-bottom: 30px; position:relative; }
  .story-beat:not(:last-child)::before{
    content:""; position:absolute; left: 15px; top: 34px; bottom: -4px; width: 1px; background: var(--line);
  }
  .story-beat .b-num{
    width: 32px; height:32px; border-radius:50%;
    background: var(--card); border: 1px solid var(--line);
    display:flex; align-items:center; justify-content:center;
    font-family: var(--mono); font-size: 12px; color: var(--sage);
  }
  .story-beat p{ font-size: 16px; color: rgba(32,36,31,0.78); padding-top: 4px; }
  .story-close{
    margin-top: 30px; font-family: var(--display); font-style: italic;
    font-size: clamp(20px, 2.6vw, 26px); font-weight: 500; line-height: 1.35; color: var(--ink);
  }
  .story-close em{ font-style: normal; color: var(--sage); }

/* ---------- final cta ---------- */
.cta{ text-align:center; }
  .cta-card{ background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 70px 40px; }
  .cta h2{
    font-family: var(--display); font-size: clamp(30px, 5vw, 48px); font-weight:500;
    max-width: 680px; margin: 16px auto 30px; line-height: 1.2;
  }

  .btn-outline{ border-color: var(--ink); color: var(--ink); }
  .btn-outline:hover{ background: var(--ink); color: var(--paper); }

/* ---------- footer (seitenspezifische Responsive-Regeln) ---------- */
@media (max-width: 860px){
    .hero-grid{ grid-template-columns: 1fr; }
    .breathing-column{ order:-1; max-width: 260px; margin: 0 auto; }
    .doubts{ grid-template-columns: 1fr; }
    .focus-grid.cols-2{ grid-template-columns: 1fr; }
    .focus-grid{ grid-template-columns: 1fr; }
    .why-grid{ grid-template-columns: 1fr; }
    section{ padding: 66px 0; }
    .footer-grid{ flex-direction:column; align-items:flex-start; }
    .cta-card{ padding: 50px 26px; }
  }