/* ==========================================================================
   CURAPHIL Personalservice – Stylesheet
   Umsetzung nach Reinzeichnung (Desktop 1920px / Mobil 776px)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Schriften (lokal eingebunden – kein externer Font-CDN, DSGVO-konform)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/montserrat-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   2. Design-Tokens
   -------------------------------------------------------------------------- */
:root {
  --blau:      #153d8a;
  --blau-dark: #10306e;
  --gruen:     #78ab2b;
  --hellblau:  #d9e9f0;
  --hellgrau:  #eeeff0;
  --weiss:     #ffffff;

  /* Raster: Reinzeichnung 1920px breit, Inhalt 250px..1670px = 1420px */
  --content:   1420px;
  --gutter:    clamp(20px, 5.2vw, 40px);

  /* Sektionsabstand: 150px Desktop / 50px Mobil laut Reinzeichnung */
  --space:     clamp(50px, 7.8vw, 150px);

  /* Typo */
  /* Proportional zur Reinzeichnung (1920px). Die H1 ist dort ca. 38px groß –
     ausgemessen an der Satzbreite von „Fachkräfte und Pflegepersonal“,
     die in der Vorlage exakt eine Zeile füllt. */
  --fs-h1:     clamp(26px, 1.98vw, 38px);
  --fs-h2:     clamp(26px, 2.40vw, 46px);
  --fs-h3:     clamp(19px, 1.5vw, 22px);
  --fs-body:   clamp(16px, 1.25vw, 21px);
  --fs-small:  clamp(15px, 1.15vw, 19px);
  --fs-nav:    clamp(16px, 1.25vw, 21px);
  --fs-quote:  clamp(21px, 2.9vw, 42px);
}

/* --------------------------------------------------------------------------
   3. Reset / Basis
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--blau);
  background: var(--weiss);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; border: 0; }

a { color: inherit; }

h1, h2, h3, h4, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }

/* Sichtbarer Fokus für Tastaturbedienung */
:focus-visible {
  outline: 3px solid var(--gruen);
  outline-offset: 3px;
}

/* Sprungmarken nicht unter dem Sticky-Header verstecken.
   Der Header ist bei voller Breite rund 145px hoch – hier mit etwas Reserve. */
[id] { scroll-margin-top: 165px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--blau); color: #fff; padding: 14px 22px;
  font-weight: 700; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   4. Layout-Hilfen
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--content);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--space); }
.section--flush-top { padding-top: 0; }
.section--spaced { margin-top: var(--space); }

/* Abstand zwischen Überschrift und Textblock */
.mt-block { margin-top: clamp(20px, 2vw, 38px); }

/* --------------------------------------------------------------------------
   5. Typografie-Bausteine
   -------------------------------------------------------------------------- */
.h1, .h2 {
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1.16;
  color: var(--blau);
}
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h2--light { color: var(--weiss); }

.lead { max-width: 68em; }

.strong-line {
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--fs-body);
  letter-spacing: .02em;
}

.text-block > * + * { margin-top: 1.5em; }

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 13px 30px;
  background: var(--blau);
  color: var(--weiss);
  font-family: inherit;
  font-size: var(--fs-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-decoration: none;
  text-align: center;
  border: 2px solid var(--blau);
  border-radius: 0;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.btn:hover  { background: var(--blau-dark); border-color: var(--blau-dark); }
.btn--ghost { background: transparent; color: var(--blau); }
.btn--ghost:hover { background: var(--blau); color: var(--weiss); }

.btn-row { display: flex; flex-wrap: wrap; gap: 18px; }

/* --------------------------------------------------------------------------
   7. Kopfbereich
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--weiss);
  border-bottom: 1px solid rgba(21, 61, 138, .08);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: clamp(14px, 1.6vw, 26px);
}

.logo { display: block; flex: 0 0 auto; }
.logo img { width: clamp(180px, 24vw, 292px); }

/* Navigation – Desktop */
.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.3vw, 42px);
}
.nav__link {
  display: inline-block;
  font-size: var(--fs-nav);
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--blau);
  letter-spacing: .02em;
  padding-block: 6px;
  border-bottom: 2px solid transparent;
  transition: border-color .2s ease;
}
.nav__link:hover, .nav__link[aria-current="page"] { border-bottom-color: var(--gruen); }

/* Burger – nur Mobil */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 12px;
  background: none;
  border: 0;
  padding: 6px 2px;
  font-family: inherit;
  font-size: clamp(16px, 4.2vw, 20px);
  color: var(--blau);
  cursor: pointer;
}
.nav-toggle__bars { display: block; width: 34px; height: 17px; position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after,
.nav-toggle__bars span {
  content: '';
  position: absolute; left: 0;
  width: 100%; height: 2.5px;
  background: var(--blau);
  transition: transform .25s ease, opacity .2s ease;
}
.nav-toggle__bars::before { top: 0; }
.nav-toggle__bars span    { top: 7px; }
.nav-toggle__bars::after  { top: 14px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span    { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    background: var(--weiss);
    border-top: 1px solid rgba(21, 61, 138, .1);
    box-shadow: 0 18px 30px rgba(21, 61, 138, .12);
    display: none;
  }
  .nav.is-open { display: block; }
  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 22px;
  }
  .nav__link {
    padding: 15px 0;
    border-bottom: 1px solid rgba(21, 61, 138, .1);
  }
  .nav__link:hover, .nav__link[aria-current="page"] { border-bottom-color: var(--gruen); }
}

/* --------------------------------------------------------------------------
   8. Schnellkontakt (fixiert am rechten Rand)
   -------------------------------------------------------------------------- */
.quick-contact {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 95;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.quick-contact__item {
  display: block;
  width: clamp(56px, 5.2vw, 100px);
  transition: transform .2s ease;
}
.quick-contact__item:hover { transform: translateX(-5px); }
.quick-contact__item img { width: 100%; }

@media (max-width: 640px) {
  .quick-contact { gap: 8px; }
}

/* --------------------------------------------------------------------------
   9. Hero
   -------------------------------------------------------------------------- */
.hero { position: relative; }

.hero__media img {
  width: 100%;
  height: clamp(300px, 47vw, 909px);
  object-fit: cover;
  object-position: center 28%;
}

/* Die Mobil-Reinzeichnung zeigt ein deutlich hochformatigeres Motiv (776 × 730 px) */
@media (max-width: 900px) {
  .hero__media img { height: min(94vw, 730px); }
}

.hero__panel {
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.hero__panel-inner {
  padding-block: clamp(24px, 2.6vw, 44px);
  padding-inline: var(--gutter);
  max-width: var(--content);
  margin-inline: auto;
}
.hero__sub  { margin-top: 1em; }
.hero__buttons { margin-top: clamp(20px, 2.2vw, 34px); }
.hero__buttons .btn { min-width: clamp(180px, 19vw, 355px); }

/* Panel über dem Bild – so zeigen es beide Reinzeichnungen.
   Auf dem Desktop rechtsbündig, darunter über die volle Breite. */
@media (min-width: 601px) {
  .hero__panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
  }
}

/* Desktop: Der Text endet bündig mit dem Inhaltsraster der übrigen Seite.
   Auf breiten Bildschirmen beginnt das Panel wie in der Reinzeichnung bei gut
   44% – auf schmaleren Desktops weiter links, damit die Überschrift ihre
   zwei Zeilen behält. */
@media (min-width: 1000px) {
  .hero__panel { left: 36%; }
  .hero__panel-inner {
    max-width: none;
    margin-inline: 0;
    padding-left: clamp(30px, 2.6vw, 50px);
    padding-right: max(var(--gutter), calc((100vw - var(--content)) / 2));
  }
}

@media (min-width: 1300px) {
  .hero__panel { left: 44%; }
}

@media (max-width: 999px) {
  .hero__panel-inner { padding-block: clamp(22px, 5vw, 34px); }
  .hero__buttons .btn { flex: 1 1 auto; }
}

/* Auf schmalen Handys würde der Kasten fast das ganze Motiv verdecken –
   dort steht er unter dem Bild. */
@media (max-width: 600px) {
  .hero__panel { background: var(--hellblau); }
}

/* --------------------------------------------------------------------------
   10. Sub-Header (Impressum / Datenschutz / AGB)
   -------------------------------------------------------------------------- */
.subhero img {
  width: 100%;
  height: clamp(140px, 23.7vw, 455px);
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   11. Teamfoto
   -------------------------------------------------------------------------- */
.figure-band img {
  width: 100%;
  height: clamp(180px, 27.5vw, 528px);
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   12. Leistungen (blauer Block)
   -------------------------------------------------------------------------- */
.services {
  background: var(--blau);
  color: var(--weiss);
  padding-block: var(--space);
}
.services .lead { color: var(--weiss); }

/* Die Blöcke stehen im Quelltext in der Reihenfolge der Mobil-Reinzeichnung
   (Fachkräfte → Wen suchen wir → Kliniken → Für wen). Auf dem Desktop füllt
   das Raster spaltenweise, damit daraus wieder die zweispaltige Anordnung der
   Desktop-Reinzeichnung wird. */
.services__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto auto;
  grid-auto-flow: column;
  gap: clamp(30px, 4.5vw, 74px) clamp(30px, 5vw, 96px);
  margin-top: clamp(34px, 4.5vw, 76px);
}
@media (max-width: 780px) {
  .services__grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-auto-flow: row;
  }
}

.services__title {
  font-size: var(--fs-h3);
  font-weight: 700;
  margin-bottom: 1.2em;
}

/* Aufzählung mit "+" laut Reinzeichnung */
.plus-list li {
  position: relative;
  padding-left: 1.5em;
  margin-bottom: 1.15em;
}
.plus-list li:last-child { margin-bottom: 0; }
.plus-list li::before {
  content: '+';
  position: absolute;
  left: 0;
  top: -.04em;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   13. Kontaktformular
   -------------------------------------------------------------------------- */
.contact__intro { margin-top: 1.1em; }

.form-card {
  background: var(--hellblau);
  padding: clamp(24px, 3.1vw, 60px);
  margin-top: clamp(28px, 3.3vw, 64px);
}

.form-grid { display: grid; gap: clamp(16px, 1.5vw, 26px); }

/* Feldbeschriftungen in Versalien – die Datenschutz-Zustimmung ist ausgenommen,
   sie steht laut Reinzeichnung in normaler Schreibweise. */
.field label:not(.consent) {
  display: block;
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: .02em;
  margin-bottom: .55em;
}
.field .req { color: var(--blau); }

.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field textarea {
  width: 100%;
  font-family: inherit;
  font-size: var(--fs-body);
  color: var(--blau);
  background: var(--weiss);
  border: 2px solid transparent;
  border-radius: 0;
  padding: 13px 16px;
  min-height: 54px;
}
.field textarea { min-height: clamp(150px, 15vw, 235px); resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--gruen); outline: none; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #b3261e; }

.field__error {
  display: none;
  color: #8c1d18;
  font-size: var(--fs-small);
  font-weight: 600;
  margin-top: .45em;
}
.field.has-error .field__error { display: block; }

/* Auswahl Fachkraft / Einrichtung – Optik der Reinzeichnung (Quadrate) */
.choice-group { border: 0; padding: 0; margin: 0 0 clamp(10px, 1.2vw, 22px); }
.choice-group__options { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 72px); }

.choice {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  font-size: var(--fs-body);
}
.choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice__box {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border: 2px solid var(--blau);
  background: var(--weiss);
  position: relative;
}
/* Gilt für beide Auswahlfelder UND die Datenschutz-Zustimmung – deren Label trägt
   die Klasse .consent, nicht .choice. */
input:checked + .choice__box::after {
  content: '';
  position: absolute;
  inset: 5px;
  background: var(--blau);
}
input:focus-visible + .choice__box { outline: 3px solid var(--gruen); outline-offset: 3px; }

/* Datenschutz-Zustimmung */
/* Die Zustimmung steht laut Reinzeichnung in normaler Schreibweise,
   nicht in Versalien wie die Feldbeschriftungen darüber. */
.consent {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  cursor: pointer;
  font-size: var(--fs-body);
  text-transform: none;
  letter-spacing: normal;
  margin-top: .4em;
  margin-bottom: 0;
}
.consent input { position: absolute; opacity: 0; width: 0; height: 0; }
.consent .choice__box { margin-top: .15em; }
.consent a { font-weight: 700; }

.form-note { font-size: var(--fs-body); margin-top: .2em; }

/* Datei-Upload: Das Eingabefeld steckt im Button-Label. Damit bei Tastatur-
   bedienung sichtbar bleibt, wo der Fokus steht, wird das Label mit markiert. */
.upload__input { position: absolute; opacity: 0; width: 0; height: 0; }
.btn:has(.upload__input:focus-visible) {
  outline: 3px solid var(--gruen);
  outline-offset: 3px;
}
.upload__name {
  display: block;
  font-size: var(--fs-small);
  margin-top: .7em;
}
.upload__name:empty { display: none; }

.form-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 18px;
  margin-top: clamp(22px, 2.4vw, 40px);
}
.form-actions .btn { min-width: clamp(200px, 27vw, 526px); }
@media (max-width: 700px) {
  .form-actions .btn { flex: 1 1 100%; min-width: 0; }
}

/* Meldung nach Absenden / bei Fehlern */
.form-message {
  padding: 18px 22px;
  margin-bottom: 24px;
  border-left: 5px solid var(--gruen);
  background: var(--weiss);
  font-weight: 600;
}
.form-message--error { border-left-color: #b3261e; }

/* --------------------------------------------------------------------------
   14. Kontaktkacheln
   -------------------------------------------------------------------------- */
.contact-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 40px);
  margin-top: var(--space);
}
/* Die Mobil-Reinzeichnung (776px) zeigt die drei Kacheln noch nebeneinander –
   erst auf schmalen Handys werden sie gestapelt. */
@media (max-width: 620px) {
  .contact-tiles { grid-template-columns: 1fr; }
}

.tile {
  background: var(--hellgrau);
  text-align: center;
  padding: clamp(28px, 3.2vw, 58px) clamp(18px, 2vw, 32px);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tile__icon { width: clamp(74px, 6vw, 116px); margin-bottom: clamp(16px, 1.8vw, 30px); }
.tile__title {
  font-size: var(--fs-h2);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: .35em;
}
.tile__value { font-size: var(--fs-body); }
.tile__link {
  margin-top: auto;
  padding-top: clamp(18px, 2vw, 34px);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color .2s ease;
}
.tile__link:hover { border-bottom-color: var(--gruen); }

/* --------------------------------------------------------------------------
   15. Zitat
   -------------------------------------------------------------------------- */
.quote {
  position: relative;
  background: var(--hellblau);
  overflow: hidden;
  padding-block: clamp(44px, 6.5vw, 120px);
}
.quote__mark {
  position: absolute;
  left: 0;
  bottom: 0;
  width: clamp(150px, 26vw, 500px);
  opacity: .55;
  pointer-events: none;
  user-select: none;
}
.quote__text {
  position: relative;
  font-size: var(--fs-quote);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.32;
  letter-spacing: .005em;
  margin-left: auto;
  width: 100%;
  max-width: 25em;
}
@media (min-width: 901px) {
  .quote__text { margin-left: clamp(120px, 15vw, 275px); }
}

/* --------------------------------------------------------------------------
   16. Fußbereich
   -------------------------------------------------------------------------- */
.site-footer { padding-block: var(--space) 0; }

.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: clamp(30px, 4vw, 60px);
}
@media (max-width: 780px) {
  .site-footer__grid { grid-template-columns: 1fr; }
}

.site-footer address { font-style: normal; line-height: 1.5; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

.legal-links { margin-top: 1.9em; }
.legal-links a { text-decoration: none; }
.legal-links a:hover { text-decoration: underline; }

.site-footer__logo { width: clamp(220px, 28vw, 545px); justify-self: end; }

/* Einspaltig steht das Logo laut Mobil-Reinzeichnung über dem Adressblock. */
@media (max-width: 780px) {
  .site-footer__logo { justify-self: start; order: -1; margin-bottom: clamp(10px, 3vw, 24px); }
}

/* Grüner Abschlussbalken */
.footer-bar {
  background: var(--gruen);
  color: var(--weiss);
  margin-top: var(--space);
  padding-block: clamp(18px, 1.7vw, 26px);
}
.footer-bar__grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: clamp(20px, 3vw, 40px);
}
.footer-bar__text { font-size: var(--fs-small); line-height: 1.5; }
.footer-bar__seals {
  display: flex;
  align-items: flex-end;
  gap: clamp(10px, 1.3vw, 22px);
}
.footer-bar__seals img { height: clamp(64px, 7.7vw, 147px); width: auto; }

@media (max-width: 620px) {
  .footer-bar__grid { flex-direction: column; align-items: flex-start; }
  .footer-bar__seals { flex-wrap: wrap; }
}

/* --------------------------------------------------------------------------
   17. Inhaltsseiten (Impressum / Datenschutz / AGB / Danke)
   -------------------------------------------------------------------------- */
.legal { max-width: 62em; }
.legal h2 { margin-bottom: .8em; }
.legal h3 {
  font-size: var(--fs-h3);
  font-weight: 700;
  margin-top: 2.1em;
  margin-bottom: .55em;
}
.legal h4 {
  font-size: var(--fs-body);
  font-weight: 700;
  margin-top: 1.6em;
  margin-bottom: .4em;
}
.legal p, .legal ul, .legal ol { margin-bottom: 1.1em; }
.legal ul { list-style: none; }
.legal ul li { position: relative; padding-left: 1.4em; margin-bottom: .5em; }
.legal ul li::before { content: '+'; position: absolute; left: 0; font-weight: 700; }
.legal ol { padding-left: 1.4em; list-style: decimal; }
.legal ol li { margin-bottom: .5em; }
.legal a { word-break: break-word; }
.legal .meta { font-weight: 700; margin-top: 2.5em; }

/* Nummerierte AGB-Struktur */
.clause { margin-bottom: 2.4em; }
.clause__title {
  font-size: var(--fs-h3);
  font-weight: 700;
  margin-bottom: .7em;
}
.clause p { margin-bottom: .9em; }
.clause .sub { padding-left: clamp(0px, 2vw, 34px); }