/* ============================================================
   RIFAD GmbH, gemeinsames Stylesheet aller Seiten.

   Farben aus dem Logo: Tuerkis und Violett. Der Verlauf bleibt im
   Zeichen, Flaechen tragen immer nur eine der beiden Farben.
   Bewusst nur hell, auf Wunsch des Kunden. Keine dunkle Fassung.

   Kontraste (gegen #FFFFFF / #F1F5F7), geprueft 18.09.2026:
     --tinte   16,6:1      --leise  7,2 / 6,6:1
     --akzent  5,4 / 4,9:1 --violett 10,8 / 9,8:1
   --tuerkis (2,1:1) traegt deshalb nie Text und nie eine Markierung,
   die man zum Verstehen braucht, sondern nur Schmuck.
   ============================================================ */

/* Schriften liegen in schriften/, nichts wird von fremden Servern
   geladen. Quelle: Fontsource 5.3.0, nur der lateinische Zeichensatz.
   Lizenz: SIL Open Font License 1.1, Texte in schriften/LIZENZ-*.txt. */
@font-face {
  font-family: "Saira";
  src: url("schriften/saira-latin-wdth-normal.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 50% 125%; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("schriften/atkinson-hyperlegible-next-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("schriften/atkinson-hyperlegible-next-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("schriften/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  color-scheme: light;
  --grund: #F1F5F7;
  --flaeche: #FFFFFF;
  --tinte: #15122C;
  --leise: #4D586A;
  --linie: #D3DCE2;
  --tuerkis: #56C2D6;
  --akzent: #0C7489;
  --violett: #4A2C7E;
  --fehler: #A4161A;

  --display: "Saira", "Arial Narrow", system-ui, sans-serif;
  --text: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --spalte: 72rem;
  --radius: 6px;
}

/* Ohne diese Zeile gewinnt jedes display: grid gegen das hidden-Attribut.
   Genau daran ist im Entwurf v3/v4 die Seitenumschaltung gescheitert. */
[hidden] { display: none !important; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--grund); color: var(--tinte);
  font: 18px/1.6 var(--text);
  /* Lange Woerter wie "Notfallsanitaetergesetz" duerfen im Notfall brechen,
     statt die Spalte zu sprengen (WCAG 1.4.10 und 1.4.12 bei 320 px). */
  overflow-wrap: break-word;
}
.spalte { max-width: var(--spalte); margin-inline: auto; padding-inline: max(1rem, 4vw); }
a { color: var(--akzent); text-underline-offset: .18em; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--akzent); outline-offset: 3px; border-radius: 3px;
}
h1, h2, h3 { font-family: var(--display); font-stretch: 118%; line-height: 1.08; text-wrap: balance; margin: 0; overflow-wrap: break-word; hyphens: auto; }
h1 { font-weight: 800; font-size: clamp(2.2rem, 5.6vw, 4.4rem); letter-spacing: -.01em; }
h2 { font-weight: 700; font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
h3 { font-weight: 700; font-size: 1.25rem; }
p { margin: 0; max-width: 62ch; }
.leise { color: var(--leise); }
.marke-klein {
  font-family: var(--mono); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--akzent); overflow-wrap: anywhere;
}
.unsichtbar {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Sprunglink: erst bei Tastaturfokus sichtbar */
.sprung-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 10;
  background: var(--tinte); color: var(--flaeche); padding: .7rem 1.1rem;
  border-radius: var(--radius); font-weight: 700; text-decoration: none;
}
.sprung-link:focus { top: 1rem; }

/* Kopf */
.kopf { background: var(--flaeche); border-bottom: 1px solid var(--linie); }
.kopf .spalte { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 2rem; padding-block: .9rem; }
.logo { display: flex; align-items: center; gap: .7rem; color: var(--tinte); text-decoration: none; min-height: 48px; }
.logo img { width: 46px; height: 46px; flex: none; }
.logo span { font-family: var(--display); font-weight: 800; font-stretch: 125%; font-size: 1.35rem; letter-spacing: .14em; text-transform: uppercase; }
nav ul { display: flex; flex-wrap: wrap; gap: .25rem 1.4rem; list-style: none; margin: 0; padding: 0; }
nav a { color: var(--leise); text-decoration: none; font-weight: 700; font-size: .95rem; padding-block: .35rem; display: inline-block; border-bottom: 3px solid transparent; }
nav a:hover { color: var(--tinte); }
/* Aktuelle Seite: Unterstrich in --akzent (5,4:1), nicht in Tuerkis (2,1:1). */
nav a[aria-current="page"] { color: var(--tinte); border-bottom-color: var(--akzent); }

main { padding-block: clamp(2rem, 5vw, 4rem) 4rem; display: grid; gap: clamp(3rem, 7vw, 5.5rem); }
main:focus { outline: none; }
main > *, .stellen > *, .zwei > *, .berufe > * { min-width: 0; }

/* Seitenkopf der Unterseiten */
.seitenkopf { display: grid; gap: .8rem; }
.seitenkopf p { font-size: 1.15rem; }

/* Auftakt der Startseite */
.auftakt { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.auftakt .text { display: grid; gap: 1.4rem; }
.auftakt p.gross { font-size: 1.2rem; }
.auftakt-zeichen { justify-self: center; width: min(100%, 22rem); }
.auftakt-zeichen img { display: block; width: 100%; height: auto; }
@media (max-width: 820px) {
  .auftakt { grid-template-columns: 1fr; }
  /* Auf dem Telefon nimmt das grosse Zeichen nur Platz vor dem Text weg. */
  .auftakt-zeichen { display: none; }
}

.knoepfe { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .4rem; }
.knopf {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; padding: .75rem 1.3rem;
  border-radius: var(--radius); font: inherit; font-weight: 700; text-decoration: none; border: 2px solid var(--tinte);
  color: var(--tinte); background: transparent; cursor: pointer;
}
.knopf.voll { background: var(--tinte); color: var(--grund); }
.knopf:hover { background: var(--violett); border-color: var(--violett); color: #FFFFFF; }

.abschnitt { display: grid; gap: 1.6rem; }
.abschnitt > header { display: grid; gap: .6rem; }

/* Zwei Berufe nebeneinander */
.berufe { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1.25rem; }
.beruf { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.6rem 1.5rem; display: grid; gap: .8rem; align-content: start; }
.kurz { font-family: var(--mono); font-size: .85rem; color: var(--akzent); letter-spacing: .06em; }
.beruf .lohn { font-family: var(--display); font-stretch: 118%; font-weight: 700; font-size: 1.3rem; }

/* Ablauf: echte Reihenfolge, deshalb nummeriert */
.ablauf { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1.25rem; counter-reset: schritt; }
.ablauf li { counter-increment: schritt; border-top: 3px solid var(--tinte); padding-top: 1rem; display: grid; gap: .5rem; align-content: start; }
.ablauf li::before { content: counter(schritt); font-family: var(--display); font-stretch: 125%; font-weight: 800; font-size: 2.2rem; line-height: 1; color: var(--akzent); }

/* Stellen: jede Ausschreibung ein Blatt, gleicher Aufbau */
.stellen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 1.25rem; align-items: start; }
.stelle { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.6rem 1.5rem; display: grid; gap: 1.1rem; }
.stelle-kopf { display: grid; gap: .3rem; border-bottom: 3px solid var(--tuerkis); padding-bottom: .9rem; }
.stelle-kopf h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); }
.stelle-teil { display: grid; gap: .35rem; }
.stelle-teil h3 { font-size: 1rem; }
.stelle-teil ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .3rem; }
.stelle .knopf { justify-self: start; }

/* Paare aus Begriff und Wert: echte Beschreibungslisten */
.eckdaten { margin: 0; display: grid; gap: .5rem; }
.eckdaten div { display: flex; justify-content: space-between; align-items: baseline; gap: .25rem .75rem; flex-wrap: wrap; }
.eckdaten dt { color: var(--leise); font-size: .92rem; }
.eckdaten dd { margin: 0; }
.liste { margin: 0; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); }
.liste div { display: flex; justify-content: space-between; align-items: baseline; gap: .25rem 1rem; flex-wrap: wrap; padding: .95rem 1.2rem; border-bottom: 1px solid var(--linie); }
.liste div:last-child { border-bottom: 0; }
.liste dd { margin: 0; color: var(--leise); }

.zwei { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1.5rem; align-items: start; }
.kasten { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.5rem; display: grid; gap: .6rem; align-content: start; }
address { font-style: normal; }
.tel { font-family: var(--display); font-stretch: 118%; font-weight: 800; font-size: 1.8rem; text-decoration: none; }
.tel:hover { text-decoration: underline; }

.rechtstext { display: grid; gap: 1.4rem; max-width: 46rem; }
.rechtstext section { display: grid; gap: .4rem; }
.rechtstext h2 { font-size: 1.3rem; }

/* Platzhalter: sichtbar anders, damit klar ist, was RIFAD noch liefern
   oder bestaetigen muss. "fehlt" = Angabe gibt es noch nicht,
   "pruefen" = Angabe steht im Auftrag, ist aber noch nicht bestaetigt. */
.platzhalter {
  display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .5rem; padding: .15rem .6rem;
  border: 1.5px dashed var(--violett); border-radius: 4px; color: var(--violett); font-size: .92rem;
}
.platzhalter::before { content: "fehlt"; font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.platzhalter.pruefen { border-color: var(--akzent); color: var(--akzent); }
.platzhalter.pruefen::before { content: "prüfen"; }

/* Bewerbungsformular */
.formular { display: grid; gap: 1.6rem; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: clamp(1.2rem, 4vw, 2rem); }
.formular fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: .6rem; min-width: 0; }
.formular legend { font-family: var(--display); font-stretch: 118%; font-weight: 700; font-size: 1.15rem; padding: 0; margin-bottom: .4rem; }
.feld { display: grid; gap: .35rem; }
.feld label, .wahl label { font-weight: 700; }
.hinweis { color: var(--leise); font-size: .92rem; }
.formular input[type="text"], .formular input[type="tel"], .formular textarea {
  font: inherit; color: var(--tinte); background: var(--flaeche);
  border: 2px solid var(--leise); border-radius: 4px; padding: .6rem .75rem; min-height: 48px; width: 100%; max-width: 32rem;
}
.formular textarea { min-height: 7rem; max-width: 46rem; resize: vertical; }
.formular input[aria-invalid="true"] { border-color: var(--fehler); }
.wahl { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.wahl label { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; font-weight: 400; cursor: pointer; }
.wahl input { width: 24px; height: 24px; margin: 0; accent-color: var(--akzent); }
.fehlertext { color: var(--fehler); font-weight: 700; }
.anhaenge { margin: 0; padding-left: 1.2rem; display: grid; gap: .3rem; }
.meldung { border-left: 4px solid var(--akzent); background: var(--flaeche); padding: 1rem 1.2rem; display: grid; gap: .5rem; }

/* Fuss */
footer { border-top: 1px solid var(--linie); background: var(--flaeche); }
footer .spalte { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 2rem; padding-block: 1.6rem; font-size: .9rem; color: var(--leise); }
footer ul { display: flex; flex-wrap: wrap; gap: .25rem 1.2rem; list-style: none; margin: 0; padding: 0; }
/* Klickflaeche mindestens 24 px hoch, Hausregel ueber WCAG 2.5.8 hinaus */
footer a { color: inherit; display: inline-block; min-height: 24px; padding-block: .15rem; }