/* ============================================================
   VitalCheck Teampartner-Plattform — Basis-Design
   Farbwelt bewusst identisch zu den bestehenden Checks:
   Petrol / Creme / Amber (Wiedererkennung für Ausfüllende)
   ============================================================ */

:root {
    --petrol:      #123F46;
    --petrol-dark: #0C2E34;
    --petrol-soft: #1A525B;
    --creme:       #F7F3EA;
    --creme-deep:  #F0EADC;
    --sand:        #D9C7A5;
    --sand-light:  #EDE3CE;
    --amber:       #D99A36;
    --amber-text:  #9C6A14;
    --anthrazit:   #252A2B;
    --ink-soft:    #4A5254;
    --weiss:       #FFFDF8;
}

@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/fraunces-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/fraunces-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/schibsted-grotesk-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/schibsted-grotesk-latin-500-normal.woff2') format('woff2')}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    background: var(--creme);
    color: var(--anthrazit);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.kopf .marke, .intro h1, .partner-name, .hinweis-karte h1 {
    font-family: 'Fraunces', Georgia, serif;
}

main {
    flex: 1;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: 32px 20px 48px;
}

/* --- Kopf --- */
.kopf {
    background: var(--petrol);
    color: var(--creme);
    padding: 18px 20px;
    text-align: center;
}
.kopf .marke {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* --- Dezente Wortmarke ohne Balken (Alternative C) --- */
.marke-dezent {
    text-align: center;
    padding: 18px 20px 0;
}
.marke-dezent span {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    color: var(--amber-text);
}
.marke-dezent span em {
    font-style: normal;
    color: var(--petrol);
}
.begegnung-satz {
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-weight: 500;
    font-size: 1.15rem;
    color: var(--petrol);
    text-align: center;
    max-width: 32ch;
    margin: 14px auto 0;
    line-height: 1.4;
    padding: 0 20px;
}

/* --- Ansprechpartner-Karte --- */
.partner-karte {
    background: var(--weiss);
    border-radius: 16px;
    padding: 28px 24px;
    text-align: center;
    box-shadow: 0 4px 18px rgba(18, 63, 70, 0.07);
    margin-bottom: 28px;
}
.partner-label {
    color: var(--petrol);
    font-size: 0.9rem;
    margin-bottom: 4px;
}
.partner-name {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--petrol-dark);
}
.partner-ort {
    color: #5a6363;
    font-size: 0.95rem;
    margin-top: 2px;
}
.meet{width:120px;height:28px;margin:0 auto 22px;display:block}
.meet path{stroke:var(--amber);stroke-width:2.5;fill:none;stroke-linecap:round}
.meet circle{fill:var(--amber)}
.start-foto-gross{width:100%;aspect-ratio:4/3;border-radius:18px;overflow:hidden;margin-bottom:18px;
  box-shadow:0 18px 38px rgba(18,63,70,.18)}
.start-foto-gross img{width:100%;height:100%;object-fit:cover;display:block}
.start-foto-gross.platzhalter{display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,var(--sand-light),var(--sand))}
.start-foto-gross.platzhalter span{font-family:'Fraunces',Georgia,serif;font-weight:700;
  font-size:2.6rem;color:var(--petrol)}
.claus-ton{font-family:'Fraunces',Georgia,serif;font-style:italic;color:var(--petrol);
  font-size:1.02rem;line-height:1.5;border-left:3px solid var(--amber);padding-left:14px;
  margin:16px auto 0;text-align:left;max-width:46ch}

/* --- Eyebrow (kleine Überzeile) --- */
.eyebrow{
  display:inline-flex;align-items:center;
  font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--amber-text);margin-bottom:14px;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--amber);border-radius:2px;margin-right:10px}

/* --- Drei Wege / Check-Auswahl als eigener, randloser dunkler Bereich --- */
.wege-start{
  background:var(--petrol);color:var(--creme);
  width:100vw;position:relative;left:50%;right:50%;margin:32px -50vw;
  padding:44px 20px;text-align:center;
}
.wege-inner{max-width:760px;margin:0 auto}
.wege-start .eyebrow{color:var(--sand);justify-content:center}
.wege-start h2{font-family:'Fraunces',Georgia,serif;color:var(--creme);font-size:1.5rem;
  line-height:1.3;margin-bottom:10px}
.wege-start .lead{color:rgba(247,243,234,.82);font-size:.95rem;max-width:38ch;margin:0 auto 30px}
.wege-grid{display:flex;flex-direction:column;text-align:left}
.weg-badge{display:inline-block;background:var(--amber);color:var(--petrol-dark);
  font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:3px 11px;border-radius:99px;margin-bottom:12px}
.weg-card{
  background:rgba(247,243,234,.06);border:1px solid rgba(247,243,234,.16);
  border-radius:16px;padding:24px 22px;display:flex;flex-direction:column;
  text-decoration:none;transition:background .2s,border-color .2s;
  margin-bottom:16px;box-sizing:border-box;
}
.weg-card:last-child{margin-bottom:0}
.weg-card:active,.weg-card:hover{background:rgba(247,243,234,.1);border-color:var(--amber)}
.weg-icon{width:38px;height:38px;margin-bottom:14px}
.weg-icon svg{width:100%;height:100%;stroke:var(--amber);fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.weg-card h3{font-family:'Fraunces',Georgia,serif;color:var(--creme);font-size:1.1rem;
  margin-bottom:8px;line-height:1.3}
.weg-card p{color:rgba(247,243,234,.78);font-size:.9rem;line-height:1.5;margin-bottom:16px}
.weg-link{color:var(--amber);font-weight:700;font-size:.9rem;display:inline-flex;
  align-items:center;gap:6px;margin-top:auto}
.wege-hilfe{margin-top:24px;font-size:.85rem;color:rgba(247,243,234,.75)}
.wege-hilfe a{color:var(--sand);text-decoration:underline}
.weg-card--info{cursor:default}
.weg-card--info:hover,.weg-card--info:active{background:rgba(247,243,234,.06);border-color:rgba(247,243,234,.16)}

/* --- Direkter Kontakt, ohne erst einen Check auszufüllen --- */
.kontakt-direkt{text-align:center;margin-top:8px;padding:26px 20px;background:var(--creme-deep);
  border-radius:16px}
.kontakt-direkt h2{font-family:'Fraunces',Georgia,serif;color:var(--petrol-dark);font-size:1.15rem;
  margin-bottom:8px}
.kontakt-direkt p{color:#47504f;font-size:.92rem;margin-bottom:16px}
.btn-whatsapp{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--petrol-dark);
  border:1.5px solid var(--sand);border-radius:99px;padding:12px 24px;font-weight:600;
  font-size:.92rem;text-decoration:none}
.btn-whatsapp:hover{border-color:var(--amber)}

/* --- Check-Auswahl --- */
.intro {
    text-align: center;
    margin-bottom: 22px;
}
.intro h1 {
    font-size: 1.45rem;
    color: var(--petrol-dark);
    margin-bottom: 8px;
    line-height: 1.3;
}
.intro p { color: #47504f; }

.check-buttons {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.check-btn {
    display: block;
    text-decoration: none;
    background: var(--petrol);
    color: var(--creme);
    border-radius: 14px;
    padding: 18px 20px;
    text-align: center;
    font-size: 1.05rem;
    font-weight: 600;
    transition: background 0.15s ease;
}
.check-btn:hover,
.check-btn:focus-visible { background: var(--petrol-dark); }
.check-btn.amber { background: var(--amber); color: var(--petrol-dark); }
.check-btn.amber:hover,
.check-btn.amber:focus-visible { background: #c48a2c; }
.check-btn small {
    display: block;
    font-weight: 400;
    font-size: 0.85rem;
    opacity: 0.85;
    margin-top: 2px;
}

/* --- Hinweisseite --- */
.hinweis-karte {
    background: var(--weiss);
    border-radius: 16px;
    padding: 32px 24px;
    text-align: center;
    box-shadow: 0 4px 18px rgba(18, 63, 70, 0.07);
    margin-top: 24px;
}
.hinweis-karte h1 {
    font-size: 1.35rem;
    color: var(--petrol-dark);
    margin-bottom: 12px;
    line-height: 1.35;
}
.hinweis-karte p { color: #47504f; margin-bottom: 10px; }

/* --- Fuß --- */
.fuss {
    text-align: center;
    padding: 18px 20px 26px;
    font-size: 0.85rem;
    color: #5a6363;
}
.fuss a { color: var(--petrol); }

@media (max-width: 400px) {
    main { padding: 24px 14px 40px; }
    .intro h1 { font-size: 1.3rem; }
}

@media (min-width: 700px) {
    main { max-width: 760px; }
    .wege-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .weg-card { width: auto; margin: 0; padding: 26px 22px 24px; height: 100%; }
}

/* ===== Kontrast (WCAG AA, mind. 4,5 : 1) und Tippflächen (mind. 44 px) - ans ENDE von assets/css/style.css ===== */
.marke-dezent span{color:#7A5410;color:color-mix(in srgb,var(--amber-text) 70%,#000)}
.weg-link{color:var(--weiss,#fff);text-decoration:underline;text-decoration-color:var(--amber);text-decoration-thickness:2px;text-underline-offset:4px}
.wege-start .eyebrow{color:color-mix(in srgb,var(--sand) 35%,#fff)}
.wege-start .lead{color:#fff}
.weg-card h3,.weg-card p{color:#fff}
.fuss a{display:inline-block;padding:12px 8px;min-height:44px;box-sizing:border-box;line-height:20px}
@media (max-width:820px),(pointer:coarse){#sprachAuswahl{min-height:44px !important;font-size:1rem !important;padding:8px 12px !important}}