/* Testanwendung im Look von vdk.de.
   Farben, Größen und Abstände aus keycloak-themes/vdk/styleguide.md (Abschnitte 2 bis 4 und 6).
   Schrift: Source Sans 3 (SIL Open Font License 1.1, Lizenz in assets/fonts/). */

@font-face {
  font-family: 'Source Sans 3';
  src:
    url('assets/fonts/SourceSans3VF-Upright.woff2') format('woff2-variations'),
    url('assets/fonts/SourceSans3VF-Upright.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --vdk-blau: #005b9e;
  --vdk-blau-dunkel: #014f8a;
  --vdk-blau-mittel: #b2cde2; /* nur Trennlinien */
  --vdk-blau-hell: #e6f0f8;
  --vdk-gelb: #ffcb04;
  --vdk-gelb-hell: #ffea9b;
  --vdk-schwarz: #000000;
  --vdk-weiss: #ffffff;
  --vdk-grau-dunkel: #575757;
  --vdk-fehler: #a30000;

  --font-text:
    'Source Sans 3', 'Source Sans Pro', SourceSansPro, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* fließend zwischen 320 px und 1200 px Breite */
  --text-h2: clamp(1.625rem, 1.19318rem + 2.15909vw, 2.8125rem); /* 45 px */
  --text-h4: clamp(1.25rem, 1.04545rem + 1.02273vw, 1.8125rem); /* 29 px */
  --text-gross: clamp(1.3125rem, 1.15341rem + 0.79545vw, 1.75rem); /* 28 px */
  --text-basis: clamp(1.125rem, 0.98864rem + 0.68182vw, 1.5rem); /* 24 px */
  --text-klein: clamp(1.0625rem, 0.99432rem + 0.34091vw, 1.25rem); /* 20 px */
  --text-code: 1.125rem; /* 18 px */
  --lh-basis: 1.3889;
  --ls: -0.0044em;

  --abstand-s: clamp(0.3125rem, 0.19886rem + 0.56818vw, 0.625rem); /* 10 px */
  --abstand-m: clamp(0.625rem, 0.39773rem + 1.13636vw, 1.25rem); /* 20 px */
  --abstand-l: clamp(0.9375rem, 0.59659rem + 1.70455vw, 1.875rem); /* 30 px */
  --abstand-xl: clamp(1.25rem, 0.79545rem + 2.27273vw, 2.5rem); /* 40 px */
  --abstand-xxl: clamp(1.875rem, 1.19318rem + 3.40909vw, 3.75rem); /* 60 px */
  --rand: clamp(0.9375rem, -0.08523rem + 5.11364vw, 3.75rem); /* 60 px */

  --breite-seite: 80rem;
  --breite-text: 47.5rem;
  --linie: 0.125rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  font: 400 var(--text-basis) / var(--lh-basis) var(--font-text);
  letter-spacing: var(--ls);
  color: var(--vdk-schwarz);
  background: var(--vdk-weiss);
}

[hidden] {
  display: none !important;
}

h1,
h2,
h3,
p,
dl,
dd,
pre {
  margin: 0;
}

/* ---------------------------------------------------------------- Kopfzeile */

.kopf__innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-m);
  max-width: calc(var(--breite-seite) + 2 * var(--rand));
  margin: 0 auto;
  padding: 0.9375rem var(--rand) var(--abstand-l);
}

.kopf__logo {
  display: block;
  /* 60 px auf dem Handy, 100 px ab 1200 px */
  height: clamp(3.75rem, 2.84091rem + 4.54545vw, 6.25rem);
  width: auto;
}

/* ---------------------------------------------------------------- Inhalt */

.inhalt {
  max-width: calc(var(--breite-seite) + 2 * var(--rand));
  margin: 0 auto;
  padding: 0 var(--rand) var(--abstand-xxl);
}

.titel {
  font-size: var(--text-h2);
  font-weight: 700;
  line-height: 1.1154;
  letter-spacing: -0.0054em;
  color: var(--vdk-blau);
  hyphens: auto;
}

.unterzeile {
  margin-top: var(--abstand-s);
  font-size: var(--text-gross);
  line-height: 1.3333;
}

.zwischenstand {
  margin-top: var(--abstand-xl);
  color: var(--vdk-grau-dunkel);
  /* erst nach einer kurzen Pause sichtbar, damit bei schneller Weiterleitung nichts aufblitzt */
  animation: spaet-zeigen 0s linear 0.6s both;
}

.zwischenstand--sofort {
  animation: none;
}

@keyframes spaet-zeigen {
  from {
    visibility: hidden;
  }
  to {
    visibility: visible;
  }
}

#ergebnis {
  margin-top: var(--abstand-xl);
}

#ergebnis:empty {
  display: none;
}

.gruss {
  font-size: var(--text-h4);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.0085em;
}

.einleitung {
  margin-top: var(--abstand-s);
}

/* ---------------------------------------------------------------- Gruppen */

.gruppen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--abstand-l);
  margin-top: var(--abstand-l);
}

@media (min-width: 75em) {
  .gruppen {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Bei ungerader Zahl läuft die letzte Gruppe über die ganze Breite. */
  .gruppe:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

.gruppe {
  padding: var(--abstand-l) var(--abstand-l) var(--abstand-m);
  background: var(--vdk-blau-hell);
}

.gruppe__titel {
  margin-bottom: var(--abstand-s);
  font-size: var(--text-h4);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.0085em;
  color: var(--vdk-blau-dunkel);
}

.gruppe__leer {
  padding: var(--abstand-s) 0 var(--abstand-m);
  color: var(--vdk-grau-dunkel);
}

/* Liste aus Beschriftung und Wert: Beschriftungen in einer gemeinsamen Spalte, Zeilen durch Linien getrennt. */
.angaben {
  display: grid;
  grid-template-columns: fit-content(50%) minmax(0, 1fr);
  column-gap: var(--abstand-l);
}

.angaben__zeile {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: baseline;
  padding: 0.75rem 0;
  border-top: var(--linie) solid var(--vdk-blau-mittel);
}

.angaben dt {
  /* gleiche Spalte in allen Gruppen, solange die Beschriftungen kurz sind */
  min-width: 10rem;
  overflow-wrap: anywhere;
  font-size: var(--text-klein);
  font-weight: 700;
  line-height: 1.2353;
}

.angaben dd {
  overflow-wrap: anywhere;
}

.angaben--verschachtelt {
  grid-template-columns: fit-content(60%) minmax(0, 1fr);
}

.angaben--verschachtelt dt {
  min-width: 0;
}

.angaben--verschachtelt .angaben__zeile {
  padding: 0.25rem 0;
  border-top: 0;
}

.werte {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hinweis {
  max-width: var(--breite-text);
  margin-top: var(--abstand-xl);
  color: var(--vdk-grau-dunkel);
  text-wrap: balance;
}

/* ---------------------------------------------------------------- Technische Ansicht */

.technik {
  margin-top: var(--abstand-xl);
  border-top: var(--linie) solid var(--vdk-blau-mittel);
  padding-top: var(--abstand-m);
}

.technik__schalter {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 2.75rem;
  padding: 0 0.25em 0 0;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.technik__schalter::-webkit-details-marker {
  display: none;
}

/* Winkel nach rechts, aufgeklappt nach unten */
.technik__schalter::before {
  content: '';
  flex: none;
  width: 0.5em;
  height: 0.5em;
  margin: 0 0.25em 0 0.15em;
  border-right: 0.15em solid currentColor;
  border-bottom: 0.15em solid currentColor;
  transform: rotate(-45deg);
}

.technik[open] > .technik__schalter::before {
  transform: translateY(-0.15em) rotate(45deg);
}

.technik__schalter:hover {
  color: var(--vdk-blau);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.1667em;
}

.technik__schalter:focus-visible {
  outline: 0.2em solid var(--vdk-schwarz);
  color: var(--vdk-weiss);
  background: var(--vdk-schwarz);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.1667em;
}

.technik__inhalt {
  display: grid;
  gap: var(--abstand-xl);
  padding-top: var(--abstand-m);
}

.technik__token h3 {
  font-size: var(--text-basis);
  font-weight: 700;
  line-height: var(--lh-basis);
  color: var(--vdk-blau-dunkel);
}

.technik__erklaerung {
  margin-top: 0.25rem;
  font-size: var(--text-klein);
  line-height: 1.2353;
  color: var(--vdk-grau-dunkel);
}

.technik__token pre {
  margin-top: var(--abstand-s);
  padding: var(--abstand-m) var(--abstand-l);
  font: 400 var(--text-code) / 1.5 var(--font-mono);
  letter-spacing: normal;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--vdk-blau-hell);
}

/* ---------------------------------------------------------------- Fehlermeldung */

.meldung {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  max-width: var(--breite-text);
  padding: var(--abstand-m) var(--abstand-l);
  border: var(--linie) solid var(--vdk-fehler);
  background: var(--vdk-weiss);
}

.meldung__zeichen {
  flex: none;
  width: 1.25em;
  height: 1.25em;
  margin-top: 0.05em;
  color: var(--vdk-fehler);
}

.meldung__titel {
  font-size: var(--text-basis);
  font-weight: 700;
  line-height: var(--lh-basis);
  color: var(--vdk-fehler);
}

.meldung__text p {
  margin-top: var(--abstand-s);
}

.meldung__detail {
  font-size: var(--text-klein);
  line-height: 1.2353;
  color: var(--vdk-grau-dunkel);
  overflow-wrap: anywhere;
}

.meldung + .knopf {
  margin-top: var(--abstand-xl);
}

/* ---------------------------------------------------------------- Knöpfe */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: clamp(0.875rem, 0.73864rem + 0.68182vw, 1.25rem) clamp(1.875rem, 1.53409rem + 1.70455vw, 2.8125rem);
  font: 700 var(--text-basis) / 1.2222 var(--font-text);
  letter-spacing: var(--ls);
  text-transform: uppercase;
  color: var(--vdk-schwarz);
  background: var(--vdk-gelb);
  border: var(--linie) solid var(--vdk-schwarz);
  border-radius: 0;
  cursor: pointer;
}

.knopf--sekundaer {
  background: var(--vdk-gelb-hell);
}

.knopf:hover,
.knopf:active {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.1667em;
}

.knopf:focus-visible {
  color: var(--vdk-weiss);
  background: var(--vdk-schwarz);
  border-color: var(--vdk-weiss);
  outline: var(--linie) solid var(--vdk-schwarz);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.1667em;
}

/* ---------------------------------------------------------------- schmale Bildschirme */

@media (max-width: 35em) {
  .angaben,
  .angaben--verschachtelt {
    grid-template-columns: minmax(0, 1fr);
  }

  .angaben__zeile {
    row-gap: 0.125rem;
  }

  .angaben dt {
    min-width: 0;
  }

  .kopf__innen .knopf {
    padding-inline: 1rem;
  }
}

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

/* Kacheln zu weiteren Anwendungen */
.anwendungen {
  margin-top: var(--abstand-l);
}

.anwendungen__titel {
  margin: 0 0 var(--abstand-s);
  font-size: var(--text-h4);
  font-weight: 700;
  line-height: 1.25;
  color: var(--vdk-blau-dunkel);
}

.kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--abstand-m);
  margin: 0;
  padding: 0;
  list-style: none;
}

.kachel {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-xs, 0.25rem);
  height: 100%;
  padding: var(--abstand-m) var(--abstand-l);
  border: var(--linie) solid var(--vdk-blau);
  background: var(--vdk-weiss);
  color: var(--vdk-blau-dunkel);
  text-decoration: none;
}

.kachel:hover {
  background: var(--vdk-blau-hell);
}

.kachel:focus-visible {
  outline: var(--linie) solid var(--vdk-schwarz);
  outline-offset: 2px;
}

.kachel__titel {
  font-weight: 700;
  font-size: var(--text-gross);
  line-height: 1.25;
}

.kachel__titel::after {
  content: ' →';
}

.kachel__text {
  font-size: var(--text-klein);
  color: var(--vdk-grau-dunkel);
}