/* FONCOD. von NIVAOX
 *
 * Umsetzung des NIVAOX Corporate Design v3.0, Abschnitt Web.
 * Alle Farben, Groessen und Abstaende stammen aus dem Regelwerk. Keine
 * Zwischenwerte, keine erfundenen Toene.
 */

@font-face { font-family: 'Public Sans'; src: url('assets/fonts/PublicSans-Regular.woff2') format('woff2');
             font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Public Sans'; src: url('assets/fonts/PublicSans-Medium.woff2') format('woff2');
             font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Public Sans'; src: url('assets/fonts/PublicSans-SemiBold.woff2') format('woff2');
             font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Public Sans'; src: url('assets/fonts/PublicSans-Bold.woff2') format('woff2');
             font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --orange: #D97706;
  --orange-dunkel: #B45309;
  --orange-hell: #E8963B;
  --orange-hover: #C26905;
  --olive: #2D362E;
  --warm-base: #FAF9F6;
  --weiss: #FFFFFF;
  --dark-surface: #151916;
  --warm-olive: #3D4A3E;
  --rahmen: #E7E5E0;
  --graphite: #4B5563;
  --slate: #6B7280;
  --warm-white: #F5F4F0;
  --sage: #A8AFA9;
  --grau: #9CA3AF;

  color-scheme: light;
}

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

body {
  font-family: 'Public Sans', Arial, 'Liberation Sans', sans-serif;
  background: var(--warm-base);
  color: var(--graphite);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1 { font-size: 40px; font-weight: 700; line-height: 1.15; color: var(--olive); }
h2 { font-size: 28px; font-weight: 700; line-height: 1.2;  color: var(--olive); }
h3 { font-size: 20px; font-weight: 600; line-height: 1.3;  color: var(--olive); }
h4 { font-size: 16px; font-weight: 600; line-height: 1.4;  color: var(--olive); }

p { max-width: 60ch; }
.klein   { font-size: 14px; }
.caption { font-size: 13px; color: var(--slate); }

.eyebrow {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--orange-dunkel);
}

a { color: var(--orange-dunkel); font-weight: 600; text-decoration: underline; }
a:hover { color: var(--orange); text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

/* --- Aufbau ------------------------------------------------------------ */

.bahn { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

section { padding: 64px 0; }
@media (min-width: 1024px) { section { padding: 96px 0; } }

/* Sandwich-Prinzip: dunkel, hell, dunkel */
.dunkel { background: var(--dark-surface); color: var(--sage); }
.dunkel h1, .dunkel h2, .dunkel h3 { color: var(--warm-white); }
.dunkel a { color: var(--orange-hell); }
.dunkel .eyebrow { color: var(--orange-hell); }

/* --- Kopf -------------------------------------------------------------- */

.kopf { padding: 48px 0 64px; }
.kopf .marke { display: block; width: 100%; max-width: 320px; height: auto; margin-bottom: 32px; }
.kopf p { font-size: 18px; color: var(--sage); }

/* Die Wortmarke ist die Ueberschrift der Seite. Die Aufforderung darunter
   ordnet sich ihr unter, damit die Marke im Kopf bleibt und nicht der Satz. */
.kopf h1 { font-size: 24px; font-weight: 600; margin-bottom: 4px; }
@media (min-width: 640px) { .kopf h1 { font-size: 28px; } }

/* --- Karten ------------------------------------------------------------ */

.karten { display: grid; gap: 16px; margin-top: 32px; }
@media (min-width: 640px)  { .karten { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .karten { grid-template-columns: repeat(4, 1fr); } }

.karte {
  background: var(--weiss); border: 1px solid var(--rahmen); border-radius: 10px;
  padding: 20px; transition: box-shadow 150ms ease-out;
}
.karte:hover { box-shadow: 0 4px 14px rgba(45, 54, 46, 0.08); }
.karte h4 { margin-bottom: 4px; }
.karte p  { font-size: 14px; margin: 0; }

.karte-akzent { border-top: 3px solid var(--orange); }

.dunkel .karte { background: var(--warm-olive); border: none; color: var(--sage); }
.dunkel .karte h4 { color: var(--warm-white); }

/* --- Rufnummer --------------------------------------------------------- */

/* Steht im dunklen Kopf. Die Nummer ist kein Knopf, sondern das groesste
   Element der Seite: Wer hier landet, soll anrufen, ohne zu suchen.
   Bright Orange ist auf Dark Surface die vorgeschriebene Akzent- und
   Linkfarbe, also traegt sie hier die Hauptaufgabe der Seite. */
.dunkel a.nummer {
  display: inline-block; margin: 4px 0 16px;
  font-size: 30px; font-weight: 700; line-height: 1.15;
  color: var(--orange-hell); text-decoration: none; letter-spacing: 0.01em;
}
.dunkel a.nummer:hover { color: var(--warm-white); }
@media (min-width: 640px) { .dunkel a.nummer { font-size: 36px; } }

/* --- Schritte ---------------------------------------------------------- */

.schritte { display: grid; gap: 16px; counter-reset: schritt; }
@media (min-width: 640px) { .schritte { grid-template-columns: repeat(3, 1fr); } }

.schritt {
  background: var(--weiss); border: 1px solid var(--rahmen); border-radius: 10px; padding: 20px;
}
.schritt::before {
  counter-increment: schritt; content: counter(schritt);
  display: block; font-size: 28px; font-weight: 700; color: var(--orange); line-height: 1;
  margin-bottom: 12px;
}
.schritt h3 { margin-bottom: 4px; }
.schritt p  { font-size: 14px; margin: 0; }

/* Der dritte Schritt ist die Rueckmeldung und traegt deshalb den Akzent. */
.schritt-letzter { border-top: 3px solid var(--orange); }

/* --- Rueckmeldung, der zweite Weg von der Startseite ------------------- */

.rueckmeldung {
  background: var(--weiss); border: 1px solid var(--rahmen); border-top: 3px solid var(--orange);
  border-radius: 10px; padding: 24px; margin-top: 32px;
  display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; justify-content: space-between;
}
.rueckmeldung > div { flex: 1 1 320px; }
.rueckmeldung h3 { margin-bottom: 4px; }
.rueckmeldung p  { font-size: 14px; margin: 0; }

/* --- Schaltflaechen ---------------------------------------------------- */

.knopf {
  display: inline-block; border-radius: 6px; font-weight: 600; font-size: 15px;
  padding: 11px 22px; text-decoration: none; border: none; cursor: pointer;
  transition: background 150ms ease-out, color 150ms ease-out;
}
.knopf-primaer { background: var(--orange); color: var(--weiss); }
.knopf-primaer:hover { background: var(--orange-hover); color: var(--weiss); }
.knopf-sekundaer {
  background: transparent; color: var(--olive); border: 1.5px solid var(--olive); padding: 9.5px 20.5px;
}
.knopf-sekundaer:hover { background: var(--olive); color: var(--weiss); }
.knopf:disabled { background: var(--rahmen); color: var(--grau); cursor: default; }

/* --- Formular ---------------------------------------------------------- */

.feld { margin-bottom: 24px; }
.feld > label, .feldgruppe > legend {
  display: block; font-size: 13.5px; font-weight: 600; color: var(--olive); margin-bottom: 5px;
}
.feld .hinweis { font-size: 13px; color: var(--slate); margin: 0 0 5px; }

input[type=text], input[type=datetime-local], select, textarea {
  width: 100%; background: var(--weiss); border: 1.5px solid var(--rahmen); border-radius: 6px;
  padding: 10px 14px; font-family: inherit; font-size: 15px; color: var(--graphite);
}
textarea { min-height: 110px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--slate); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.15);
}

.feldgruppe { border: none; margin-bottom: 32px; }
.feldgruppe > legend {
  display: block; font-size: 16px; font-weight: 600; color: var(--olive); margin-bottom: 8px;
}
.feldgruppe > .hinweis { font-size: 13px; color: var(--slate); margin: -4px 0 8px; }

.ankreuz { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; font-size: 15px; }
.ankreuz input { margin-top: 4px; accent-color: var(--orange); flex: none; width: 18px; height: 18px; }
.ankreuz label { font-weight: 400; color: var(--graphite); }

/* --- Antwortknoepfe ---------------------------------------------------- */

/* Eine Auswahlliste kostet drei Tipper: aufklappen, suchen, tippen. Diese
   Knoepfe kosten einen. Bei einem Protokoll, das nach jedem Anruf ausgefuellt
   werden soll, entscheidet genau das darueber, ob es ausgefuellt wird.
   Gewaehlt wird mit der Flaeche des Sekundaerknopfes im Hover-Zustand, also
   ohne eine einzige erfundene Farbe. */
.wahl { display: flex; flex-wrap: wrap; gap: 8px; }

.pille { display: inline-flex; }
.pille input { position: absolute; opacity: 0; width: 0; height: 0; }
.pille span {
  display: block; background: var(--weiss); color: var(--graphite);
  border: 1.5px solid var(--rahmen); border-radius: 6px;
  padding: 10px 16px; font-size: 15px; cursor: pointer;
  transition: border-color 150ms ease-out, background 150ms ease-out, color 150ms ease-out;
}
.pille span:hover { border-color: var(--slate); }
.pille input:checked + span {
  background: var(--olive); border-color: var(--olive); color: var(--weiss); font-weight: 600;
}
.pille input:focus-visible + span { outline: 2px solid var(--orange); outline-offset: 3px; }

.wahl.ungueltig .pille span { border-color: var(--orange-dunkel); }

/* Fehler sind Hinweise, keine Alarme: Dark Orange statt Rot. */
.fehler { color: var(--orange-dunkel); font-size: 13.5px; font-weight: 600; margin-top: 6px; }
input.ungueltig, select.ungueltig { border-color: var(--orange-dunkel); }

.formularkarte {
  background: var(--weiss); border: 1px solid var(--rahmen); border-radius: 10px;
  padding: 24px; margin-bottom: 24px;
}
.formularkarte > h3 { margin-bottom: 4px; }
.formularkarte > .caption { margin-bottom: 20px; }

/* Honigtopf gegen Formularroboter: fuer Menschen unsichtbar, fuer
   Bildschirmleser ausgeblendet, aber im HTML vorhanden. Wer ihn ausfuellt,
   ist keiner. */
.honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.meldung { border-radius: 10px; padding: 20px; margin-bottom: 24px; }
.meldung-gut     { background: var(--weiss); border: 1px solid var(--rahmen); border-top: 3px solid var(--orange); }
.meldung-schlecht{ background: var(--weiss); border: 1px solid var(--orange-dunkel); }

/* --- Fuss -------------------------------------------------------------- */

.fuss { background: var(--dark-surface); color: var(--sage); padding: 48px 0; font-size: 14px; }
.fuss img { height: 22px; width: auto; opacity: 0.85; margin-bottom: 12px; }
.fuss a { color: var(--orange-hell); }
.fuss .zeile { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}