/* ============================================================
   MTMS – Mentaltraining Maximilian Seibel
   UEBER-MICH.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: Seite "Ueber mich": abwechselnd eingefaerbte Abschnitte, Werte-Grid, Zitat-Abschnitt.
   ============================================================ */


/* ---------- page hero ---------- */
.page-hero{ padding: 96px 0 76px; }
  .page-hero h1{
    font-family: var(--display);
    font-size: clamp(32px, 4.8vw, 50px);
    font-weight: 500;
    line-height: 1.16;
    letter-spacing: -0.01em;
    margin: 16px 0 22px;
  }
  .page-hero p{ font-size: 16.5px; color: rgba(32,36,31,0.75); max-width: 640px; margin-top: 14px; }
  .page-hero p strong{ color: var(--ink); }

/* ---------- hero with portrait photo ---------- */
/* Gleicher Schwarz-Weiss-zu-Farbe-Effekt wie auf der Golf-Seite. */
.hero-photo-grid{
    display:grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 56px;
    align-items:center;
  }
  .hero-photo{
    border-radius: 48px 8px 48px 8px;
    overflow:hidden;
    aspect-ratio: 3/4;
    box-shadow: 0 24px 60px rgba(32,36,31,0.14);
  }
  .hero-photo img{
    width:100%; height:100%;
    object-fit:cover;
    object-position: center 20%;
    display:block;
  }
  /* Schwarz-Weiss-zu-Farbe-Effekt NUR auf Geraeten mit echtem Hover
     (Maus/Trackpad). Auf Touch-Geraeten (Handy, Tablet) gibt es kein
     echtes ":hover" - das Bild wuerde sonst dauerhaft in Schwarz-Weiss
     haengen bleiben, ohne Moeglichkeit, die Farbe zu sehen. Deshalb
     zeigt Touch das Foto direkt in voller Farbe. */
  @media (hover: hover) and (pointer: fine){
    .hero-photo img{
      filter: grayscale(100%) contrast(1.05);
      transition: filter .5s ease;
    }
    .hero-photo:hover img{ filter: grayscale(0%) contrast(1); }
  }
  @media (max-width: 900px){
    .hero-photo-grid{ grid-template-columns: 1fr; }
    .hero-photo{ order:-1; max-width: 340px; margin: 0 auto; }
  }

/* ---------- section shared ---------- */
section{ padding: 88px 0; }
  .section-head{ max-width: 660px; margin-bottom: 40px; }
  .section-head h2{
    font-family: var(--display);
    font-size: clamp(26px, 3.4vw, 36px);
    font-weight:500;
    margin-top:10px;
    line-height:1.2;
  }
  .lead-text{ font-size: 16.5px; color: rgba(32,36,31,0.72); max-width: 680px; }
  .lead-text + .lead-text{ margin-top: 14px; }
  .emphasis-line{
    margin-top: 22px;
    font-family: var(--display);
    font-style: italic;
    font-size: 19px;
    color: var(--ink);
    max-width: 640px;
  }

/* ---------- alternating tint ---------- */
.tint{ background: var(--paper-dim); }

/* ---------- values grid ---------- */
.values-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .value-item{ background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 30px 24px; }
  .value-num{
    width: 30px; height:30px; border-radius:50%;
    background: var(--sage-dim); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-family: var(--mono); font-size: 11px; margin-bottom: 16px;
  }
  .value-item h3{ font-family: var(--display); font-size: 19px; font-weight: 500; margin-bottom: 10px; }
  .value-item p{ font-size: 13.5px; color: rgba(32,36,31,0.62); }

/* ---------- promise quote ---------- */
.verstaendnis blockquote{
    font-family: var(--display); font-style: italic;
    font-size: clamp(21px, 2.8vw, 30px); font-weight: 500; line-height: 1.4;
  }
  .verstaendnis blockquote::before{
    content:""; display:block; width:44px; height:44px; border-radius:50%;
    background: var(--amber); opacity:0.25; margin-bottom: 20px;
  }

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

/* ---------- responsive ---------- */
@media (max-width: 960px){
    .values-grid{ grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 860px){
    section{ padding: 58px 0; }
    .footer-grid{ flex-direction:column; align-items:flex-start; }
    .cta-card{ padding: 46px 24px; }
  }
  @media (max-width: 520px){
    .values-grid{ grid-template-columns: 1fr; }
  }