/* ==========================================================================
   NAZARETH PERSONAL · Landingpage „Mitarbeiter werben Mitarbeiter"
   mwm.nazareth-personal.de · mobil zuerst · eine Seite, ein Ziel

   Eigenes, schlankes Stylesheet – bewusst KEINE Kopie von
   ../../Prototyp/styles.css. Die Landingpage hat keine Navigation, keine
   Siegelleiste und keine Querverlinkung (Konzept Kapitel 6). Sie lädt
   deshalb nur das, was sie wirklich braucht. Tokens, Schriften und
   Kontrastregeln stammen unverändert aus dem CI-Manual.

   KONTRASTREGELN FÜR ROT – bitte beachten:
   · Rot #CC1517 auf Weiß  = 5,69:1  → WCAG AA ✓
   · Weiß auf Rot #CC1517  = 5,69:1  → WCAG AA ✓  (Standard für Buttons)
   · Dunkelblau auf Rot    = 1,89:1  → UNLESBAR ✗
   · Rot auf Dunkelblau    = 1,89:1  → UNLESBAR ✗
   Konsequenz: Rote Flächen tragen IMMER weiße Schrift. Auf dunkelblauen
   Flächen ist der Akzent Weiß, nicht Rot – Rot füllt dort nur Flächen.
   ========================================================================== */

/* --- 0. Schriften ------------------------------------------------------- */
@font-face { font-family:"Lato"; font-style:normal; font-weight:700; font-display:swap;
  src:url("fonts/lato-700.woff2") format("woff2"); }
@font-face { font-family:"Lato"; font-style:normal; font-weight:900; font-display:swap;
  src:url("fonts/lato-900.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:600; font-display:swap;
  src:url("fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:800; font-display:swap;
  src:url("fonts/inter-800.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:900; font-display:swap;
  src:url("fonts/inter-900.woff2") format("woff2"); }

/* --- 1. Tokens ---------------------------------------------------------- */
:root {
  --blau:        #353E4E;
  --blau-800:    #2B333F;
  --blau-600:    #4A5568;
  --rot:         #CC1517;
  --rot-dunkel:  #A81113;
  --weiss:       #FFFFFF;
  --grau-text:   #6D727C;   /* korrigierter Wert, erreicht WCAG AA auf Weiß */
  --grau-linie:  #E6E6E6;
  --grau-flaeche:#F6F7F8;

  --ff:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ff-head: 'Lato', 'Trebuchet MS', -apple-system, BlinkMacSystemFont, sans-serif;

  --max:   760px;   /* eine Spalte, auch am Desktop – Landingpage, keine Website */
  --r:  4px;
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 48px; --s6: 64px; --s7: 88px;
}

/* --- 2. Reset ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;   /* Header ist sticky, rund 64 px hoch */
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: var(--ff);
  font-size: 17px;
  line-height: 1.6;
  color: var(--grau-text);
  background: var(--weiss);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--blau); text-underline-offset: 3px; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

/* --- 3. Typografie ------------------------------------------------------ */
h1, h2, h3 {
  font-family: var(--ff-head); font-weight: 900; color: var(--blau);
  letter-spacing: -.02em; line-height: 1.12; margin: 0 0 var(--s3);
}
h1 { font-size: clamp(2.1rem, 8vw, 3.3rem); letter-spacing: -.03em; line-height: 1.05; }
h2 { font-size: clamp(1.6rem, 6vw, 2.2rem); }
h3 { font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; margin-bottom: var(--s1); }
p { margin: 0 0 var(--s3); }
.lead { font-size: clamp(1.08rem, 3.6vw, 1.25rem); line-height: 1.5; color: var(--blau-600); }
strong { color: var(--blau); font-weight: 700; }

.kicker {
  font-family: var(--ff); font-size: .78rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--rot); margin: 0 0 var(--s2);
}
.hinweis { font-size: .95rem; }
.mitte { text-align: center; }
.mitte p { margin-left: auto; margin-right: auto; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--rot); color: var(--weiss); padding: 12px 20px; font-weight: 800;
}
.skip:focus { left: 0; }

/* --- 4. Raster ---------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--s3); }
.wrap--schmal { max-width: 640px; }
.section { padding-block: var(--s6); }
.section--grau { background: var(--grau-flaeche); }
.section--dunkel { background: var(--blau); color: rgba(255,255,255,.82); }
.section--dunkel h2, .section--dunkel h3, .section--dunkel .lead,
.section--dunkel strong, .section--dunkel legend { color: var(--weiss); }
.section--rot { background: var(--rot); color: rgba(255,255,255,.92); }
.section--rot h2, .section--rot .lead, .section--rot strong { color: var(--weiss); }
/* Ohne diese Regel erben Links auf den farbigen Flächen --blau aus dem Reset:
   dunkelblau auf dunkelblau (1,17:1) bzw. auf rot (1,89:1) – beides unlesbar. */
.section--dunkel a:not(.btn), .section--rot a:not(.btn) {
  color: var(--weiss); text-decoration-color: rgba(255,255,255,.55);
}

/* --- 5. Buttons --------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 26px; border-radius: var(--r); border: 2px solid transparent;
  font-size: 1rem; font-weight: 800; letter-spacing: -.01em;
  text-decoration: none; cursor: pointer; text-align: center;
  min-height: 52px; transition: background .16s ease, color .16s ease, transform .12s ease;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid var(--blau); outline-offset: 3px; }
.btn--gross { padding: 18px 32px; font-size: 1.06rem; min-height: 60px; }

/* Rot + WEISS. Niemals dunkelblauer Text auf Rot. */
.btn--primary { background: var(--rot); color: var(--weiss); }
.btn--primary:hover { background: var(--rot-dunkel); color: var(--weiss); }
.section--dunkel .btn--primary:focus-visible { outline-color: var(--weiss); }
/* Auf roter Fläche kehrt sich der Primärbutton um – Rot auf Rot wäre unsichtbar. */
.section--rot .btn--primary { background: var(--weiss); color: var(--rot); }
.section--rot .btn--primary:hover { background: rgba(255,255,255,.88); color: var(--rot); }
.section--rot .btn:focus-visible { outline-color: var(--weiss); }

.btn--ghost { background: transparent; color: var(--blau); border-color: var(--blau); }
.btn--ghost:hover { background: var(--blau); color: var(--weiss); }
.hero .btn--ghost { color: var(--weiss); border-color: rgba(255,255,255,.55); }
.hero .btn--ghost:hover { background: var(--weiss); color: var(--blau); }
.section--rot .btn--ghost { color: var(--weiss); border-color: rgba(255,255,255,.65); }
.section--rot .btn--ghost:hover { background: var(--weiss); color: var(--rot); }
.section--dunkel .btn--ghost { color: var(--weiss); border-color: rgba(255,255,255,.55); }
.section--dunkel .btn--ghost:hover { background: var(--weiss); color: var(--blau); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s2); }
.btn-row--mitte { justify-content: center; }
/* Auf schmalen Displays soll der Hauptbutton die volle Breite haben –
   ein halbbreiter CTA neben einem Zweitbutton wirkt wie eine Option
   unter vielen, und genau das ist er hier nicht. */
@media (max-width: 460px) { .btn-row .btn { width: 100%; } }

.tel-link { font-weight: 800; color: var(--rot); text-decoration: none; white-space: nowrap; }
.tel-link:hover { text-decoration: underline; }
.section--dunkel .tel-link, .section--rot .tel-link { color: var(--weiss); }

/* --- 6. Header + Sprachumschalter -------------------------------------- */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.97); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--grau-linie);
}
.header__in { display: flex; align-items: center; gap: var(--s2); min-height: 64px; }
.logo {
  display: inline-flex; align-items: center; text-decoration: none;
  font-family: var(--ff-head); font-weight: 900; font-size: 1.2rem;
  letter-spacing: -.03em; color: var(--blau); white-space: nowrap;
}
.logo__bild { height: 34px; width: auto; }
.logo__bild + .logo__text { display: none; }   /* Grafik da → Textmarke aus */
.logo__text span {
  display: block; font-family: var(--ff); font-size: .55rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--grau-text); margin-top: -2px;
}

.sprache { display: flex; margin-left: auto; border: 2px solid var(--grau-linie); border-radius: var(--r); overflow: hidden; }
.sprache__btn {
  min-width: 48px; min-height: 40px; padding: 0 12px;
  border: 0; background: transparent; cursor: pointer;
  font-size: .86rem; font-weight: 800; letter-spacing: .06em; color: var(--grau-text);
}
.sprache__btn.is-aktiv { background: var(--blau); color: var(--weiss); }
.sprache__btn:focus-visible { outline: 3px solid var(--rot); outline-offset: -3px; }

/* --- 7. Hero ------------------------------------------------------------ */
/* Unten kein Innenabstand: Das Bildband schließt bündig mit der Sektion ab und
   geht ohne Naht in die Beweiszeile über. Der Abstand wandert deshalb an den
   .wrap, sonst klebt der Button am Bild. */
.hero {
  background: var(--blau); color: rgba(255,255,255,.86);
  padding-block: var(--s6) 0;
}
.hero .wrap { padding-bottom: var(--s6); }
.hero h1 { color: var(--weiss); }
.hero .lead { color: rgba(255,255,255,.9); }
.hero strong { color: var(--weiss); }
/* Rot auf Dunkelblau ist unlesbar – der Kicker läuft hier in Weiß. */
.hero .kicker { color: var(--weiss); opacity: .75; }

/* Bildband. Feste Höhe statt Seitenverhältnis: Das Motiv ist quer (3:2), auf
   375 px Breite wäre es sonst nur 250 px hoch und die scharfe Person darin
   fingernagelgroß. object-fit schneidet stattdessen zu, object-position hält
   dabei das Gesicht im Bild – es sitzt bei etwa 60 % Breite und 30 % Höhe. */
.hero__bild { margin: 0; }
.hero__bild img {
  width: 100%; height: clamp(210px, 54vw, 520px);
  object-fit: cover; object-position: 58% 47%;
}

/* --- 8. Beweiszeile ----------------------------------------------------- */
.beweis { background: var(--blau-800); padding-block: var(--s4); }
.beweis__grid { display: grid; gap: var(--s3); }
.beweis__item { display: flex; align-items: baseline; gap: var(--s2); }
.beweis__zahl {
  font-weight: 900; font-size: 1.5rem; color: var(--weiss);
  letter-spacing: -.02em; white-space: nowrap; flex: none; min-width: 5.5em;
}
.beweis__text { font-size: .95rem; color: rgba(255,255,255,.72); line-height: 1.35; }
@media (min-width: 620px) {
  .beweis__grid { grid-template-columns: repeat(3, 1fr); }
  .beweis__item { display: block; }
  .beweis__zahl { display: block; min-width: 0; margin-bottom: 4px; }
}

/* --- 9. Listen, Schritte, Karten, FAQ ---------------------------------- */
.liste li {
  position: relative; padding-left: 26px; margin-bottom: var(--s2);
}
.liste li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 10px; height: 2px; background: var(--rot);
}
.liste--haken li::before { top: .55em; width: 12px; height: 12px; background: none;
  border-left: 2px solid var(--rot); border-bottom: 2px solid var(--rot);
  transform: rotate(-45deg) translateY(-1px); }

.schritte { counter-reset: schritt; display: grid; gap: var(--s4); }
.schritt { display: flex; gap: var(--s3); align-items: flex-start; }
.schritt__nr {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  background: var(--rot); color: var(--weiss);
  display: grid; place-items: center; font-weight: 900; font-size: 1.15rem;
}
.schritt p { margin-bottom: 0; }

.karten { display: grid; gap: var(--s3); margin-bottom: var(--s3); }
.karte { background: var(--grau-flaeche); border-left: 3px solid var(--rot); padding: var(--s3); }
.karte p { margin-bottom: 0; }
@media (min-width: 620px) { .karten { grid-template-columns: 1fr 1fr; } }

.faq { border-bottom: 1px solid var(--grau-linie); }
.faq summary {
  cursor: pointer; list-style: none; padding: var(--s2) 30px var(--s2) 0;
  font-weight: 700; color: var(--blau); position: relative; min-height: 48px;
  display: flex; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%;
  width: 9px; height: 9px; margin-top: -6px;
  border-right: 2px solid var(--rot); border-bottom: 2px solid var(--rot);
  transform: rotate(45deg); transition: transform .18s ease;
}
.faq[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq p { padding-right: 30px; }

/* --- 10. Formular ------------------------------------------------------- */
.form { display: grid; gap: var(--s4); margin-bottom: var(--s3); }
.block { display: grid; gap: var(--s3); }
.block legend {
  font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--weiss); padding: 0; margin-bottom: var(--s2);
}
.feld { display: grid; gap: 6px; }
.feld label { font-weight: 600; font-size: .95rem; color: var(--weiss); }
.feld input, .feld select {
  font-family: inherit; font-size: 1rem; padding: 14px 16px; min-height: 52px;
  border: 2px solid rgba(255,255,255,.28); border-radius: var(--r);
  background: rgba(255,255,255,.07); color: var(--weiss); width: 100%;
}
.feld select { appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%);
  background-position: calc(100% - 20px) 24px, calc(100% - 14px) 24px;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
/* Optionen erben auf manchen Systemen den transparenten Feldhintergrund und
   werden dann weiß auf weiß. Deshalb hier explizit dunkelblau. */
.feld select option { background: var(--blau); color: var(--weiss); }
.feld input:focus, .feld select:focus { outline: none; border-color: var(--weiss); background: rgba(255,255,255,.12); }
.feld__hinweis { font-size: .84rem; color: rgba(255,255,255,.65); }
.feld--fehler input, .feld--fehler select { border-color: #FF8A8C; }
/* Rot #CC1517 auf Dunkelblau wäre unlesbar – die Fehlerfarbe ist deshalb
   eine aufgehellte Variante mit 6,3:1 auf #353E4E. */
.feld__fehler { font-size: .86rem; font-weight: 700; color: #FF8A8C; }

.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.check { display: flex; gap: 12px; align-items: flex-start; font-size: .95rem; cursor: pointer; line-height: 1.45; }
.check input {
  flex: none; width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--rot);
}
.feld--check.feld--fehler .check { color: #FF8A8C; }
.form__fuss { font-size: .84rem; color: rgba(255,255,255,.65); margin-bottom: 0; }
.alt { font-size: .95rem; margin-bottom: 0; }

.danke {
  border: 2px solid rgba(255,255,255,.3); border-radius: var(--r);
  padding: var(--s4); margin-bottom: var(--s3);
}
.danke h3 { color: var(--weiss); }
.danke:focus { outline: 3px solid var(--weiss); outline-offset: 3px; }

/* --- 11. Footer --------------------------------------------------------- */
.footer { background: var(--blau-800); color: rgba(255,255,255,.7); padding-block: var(--s5); font-size: .92rem; }
.footer a { color: rgba(255,255,255,.7); }
.footer a:hover { color: var(--weiss); }
.footer__logo img { height: 34px; width: auto; margin-bottom: var(--s3); }
.footer__adr { margin-bottom: var(--s2); }
.footer__links { display: flex; gap: var(--s3); margin: 0; }
.footer__links a { min-height: 44px; display: inline-flex; align-items: center; }

/* --- 12. Bewegung, Druck ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
@media print {
  .header, .btn { display: none; }
  body { color: #000; font-size: 11pt; }
}