/* ============================================================
   MTMS – Mentaltraining Maximilian Seibel
   KONTAKT.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: Kontaktseite: Checkliste, Ablauf-Timeline, Kontaktdaten-Grid, Formular, FAQ-Akkordeon, Abschluss-Bereich.
   ============================================================ */


/* ---------- page hero ---------- */
.page-hero{ padding: 96px 0 76px; }
  .page-hero h1{
    font-family: var(--display);
    font-size: clamp(34px, 5vw, 52px);
    font-weight: 500;
    line-height: 1.14;
    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); }

/* ---------- section shared ---------- */
section{ padding: 88px 0; }
  .section-head{ max-width: 640px; margin-bottom: 40px; }
  .section-head h2{
    font-family: var(--display);
    font-size: clamp(28px, 3.6vw, 38px);
    font-weight:500;
    margin-top:12px;
    line-height:1.18;
  }
  .lead-text{ font-size: 16.5px; color: rgba(32,36,31,0.72); max-width: 660px; }
  .lead-text + .lead-text{ margin-top: 14px; }

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

/* ---------- checklist ---------- */
.checklist{ list-style:none; margin-top: 8px; max-width: 560px; }
  .checklist li{
    display:flex; gap:14px; align-items:flex-start;
    padding: 14px 0; border-bottom: 1px solid var(--line);
    font-size: 15.5px; color: rgba(32,36,31,0.8);
  }
  .checklist li:first-child{ border-top: 1px solid var(--line); }
  .checklist li::before{
    content:""; width:8px; height:8px; border-radius:50%;
    background: var(--amber); margin-top: 7px; flex-shrink:0;
  }

/* ---------- process timeline ---------- */
.timeline{ position:relative; margin-top: 16px; }
  .timeline::before{ content:""; position:absolute; left: 21px; top: 8px; bottom: 8px; width: 1px; background: var(--line); }
  .timeline-step{ position:relative; display:grid; grid-template-columns: 44px 1fr; gap: 22px; padding-bottom: 40px; }
  .timeline-step:last-child{ padding-bottom:0; }
  .t-num{
    position:relative; width: 44px; height: 44px; 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: 13px; color: var(--sage);
    z-index:1;
  }
  .timeline-step h3{ font-family: var(--display); font-size: 20px; font-weight: 500; margin-bottom: 8px; }
  .timeline-step p{ font-size: 15px; color: rgba(32,36,31,0.68); max-width: 580px; }

/* ---------- contact info grid ---------- */
.contact-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .contact-item{ background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 28px 24px; }
  .contact-icon{
    width: 38px; height:38px; border-radius:50%;
    background: var(--paper-dim);
    display:flex; align-items:center; justify-content:center;
    margin-bottom: 16px;
  }
  .contact-icon svg{ width:18px; height:18px; color: var(--amber); }
  .contact-item h3{ font-family: var(--display); font-size: 15px; font-weight: 600; margin-bottom: 8px; text-transform:uppercase; letter-spacing:0.03em; color: var(--sage); }
  .contact-item .value{ font-size: 15px; color: var(--ink); }
  .contact-item .placeholder{ font-style: italic; color: rgba(32,36,31,0.45); }
  .contact-item a.value{ color: var(--ink); }
  .contact-item a.value:hover{ color: var(--amber); }

/* ---------- form ---------- */
.form-card{
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 48px;
    max-width: 720px;
  }
  .form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 22px; }
  .field{ display:flex; flex-direction:column; gap:8px; }
  .field.full{ grid-column: 1 / -1; }
  .field label{ font-size: 13.5px; font-weight: 600; color: var(--ink); }
  .field .optional{ font-weight:400; color: rgba(32,36,31,0.5); }
  .field input,
  .field select,
  .field textarea{
    font-family: var(--body);
    font-size: 15px;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 13px 16px;
    outline: none;
    transition: border-color .15s ease, background .15s ease;
    width: 100%;
  }
  .field input:focus,
  .field select:focus,
  .field textarea:focus{ border-color: var(--amber); background: var(--card); }
  .field textarea{ resize: vertical; min-height: 130px; font-family: var(--body); }
  .field input:invalid:not(:placeholder-shown),
  .field textarea:invalid:not(:placeholder-shown){ border-color: #B3453D; }

  .consent{ display:flex; align-items:flex-start; gap:12px; margin-top: 8px; }
  .consent input{ margin-top:4px; width:18px; height:18px; accent-color: var(--amber); flex-shrink:0; }
  .consent label{ font-size: 14px; color: rgba(32,36,31,0.75); }
  .consent a{ text-decoration: underline; color: var(--ink); }

  .form-submit{ margin-top: 28px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
  .form-note{ font-size: 13px; color: rgba(32,36,31,0.55); }
  .form-status{
    margin-top: 18px;
    font-size: 14.5px;
    padding: 14px 18px;
    border-radius: 12px;
    background: var(--paper-dim);
    color: var(--ink);
    display:none;
  }
  .form-status.show{ display:block; }
  .form-status.error{ background: #FBE6E4; color: #7A2A22; }

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

/* ---------- closing emphasis ---------- */
.closing{ text-align:center; }
  .closing h2{
    font-family: var(--display); font-size: clamp(30px, 4.6vw, 46px); font-weight:500;
    margin-top: 12px; line-height: 1.2;
  }
  .closing p{ font-size: 16.5px; color: rgba(32,36,31,0.72); margin-top:18px; }
  .closing .word-line{
    margin-top: 22px; font-family: var(--display); font-style: italic; font-size: 20px; color: var(--ink);
  }

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

/* ---------- faq accordion ---------- */
.faq-list{ display:flex; flex-direction:column; gap: 10px; max-width: 780px; }
  .faq-item{
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
  }
  .faq-item summary{
    list-style: none;
    cursor: pointer;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 20px;
    padding: 20px 24px;
    font-family: var(--display);
    font-size: 16.5px;
    font-weight: 600;
    color: var(--ink);
  }
  .faq-item summary::-webkit-details-marker{ display:none; }
  .faq-item summary:focus-visible{ outline: 2px solid var(--sage); outline-offset: -2px; border-radius: 12px; }
  .faq-icon{
    flex-shrink:0;
    width: 26px; height:26px;
    border-radius:50%;
    background: var(--paper-dim);
    display:flex; align-items:center; justify-content:center;
    position:relative;
  }
  .faq-icon::before, .faq-icon::after{
    content:"";
    position:absolute;
    background: var(--amber);
    border-radius: 2px;
    transition: transform .2s ease;
  }
  .faq-icon::before{ width:12px; height:2px; }
  .faq-icon::after{ width:2px; height:12px; }
  .faq-item[open] .faq-icon::after{ transform: rotate(90deg) scaleX(0); }
  .faq-item[open] summary{ border-bottom: 1px solid var(--line); }
  .faq-answer{
    padding: 4px 24px 22px;
    font-size: 15px;
    color: rgba(32,36,31,0.7);
  }
  @keyframes faqReveal{
    from{ opacity:0; transform: translateY(-4px); }
    to{ opacity:1; transform: translateY(0); }
  }
  .faq-item[open] .faq-answer{ animation: faqReveal .18s ease; }