@font-face { font-family: "AN Archivo"; src: url("/appianova-archivo.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "AN Plex"; src: url("/appianova-plex-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "AN Plex"; src: url("/appianova-plex-600.woff2") format("woff2"); font-weight: 600 700; font-display: swap; }

:root {
  --an-basalt:   #2E3238;
  --an-aqua:     #14B3C9;
  --an-handlung: #2E3238;
  --an-rot:      #D62839;
  --an-hell:     #E3F6F9;

  --akzent:    var(--an-handlung);
  --navy:      var(--an-handlung);
  --navy-tief: var(--an-basalt);
  --karmesin:  var(--an-rot);

  --flaeche:   #F7F8FA;
  --sand:      #F0F4F6;
  --sand-tief: #E3EBEF;
  --linie:     #E1E4EA;
  --text:      #3B4048;
  --leise:     #5A616C;
  --leise-2:   #6B717C;

  --schrift:       "AN Plex", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --schrift-titel: "AN Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.blatt h1, .blatt h2, .blatt h3,
.kachel .titel, .modulkopf h1 { font-family: var(--schrift-titel); font-stretch: 125%; color: var(--an-basalt); font-weight: 600; }

.appkopf .hubmarke img { height: 38px; }
.anmeldemarke .kundenzeichen { height: 56px; }
@media (max-width: 560px) { .appkopf .hubmarke img { height: 30px; } }
@media (max-width: 380px) { .appkopf .hubmarke img { height: 25px; } }

.appkopf { border-bottom: 3px solid var(--an-aqua); }
.anmeldung button:hover,
.quizknopf:hover,
.uknopf:hover, .rumpf .uknopf:hover { background: #454B54; border-color: #454B54; }
.uknopf.zweitrangig:hover, .rumpf .uknopf.zweitrangig:hover { border-color: #A9DCE4; background: var(--an-hell); }
a { text-decoration-color: var(--an-aqua); }
.avatar { background: linear-gradient(140deg, var(--an-aqua), var(--an-basalt)); }
.ws-kopf { border-bottom-color: var(--an-aqua); }
.webseite { --ws-signal: var(--an-handlung); --ws-signal-bg: var(--an-hell); }

@media (prefers-color-scheme: light), (prefers-color-scheme: no-preference) {
  .anmeldung button:not(.zweitrangig), .quizknopf:not(.zweitrangig), .uknopf:not(.zweitrangig), .rumpf .uknopf:not(.zweitrangig) {
    background: linear-gradient(180deg, #3B4048, #2A2E33); color: #fff; border-color: transparent; border-radius: 8px;
    box-shadow: 0 2px 0 var(--an-aqua), 0 6px 14px rgba(20, 30, 45, .18); }
  .anmeldung button:not(.zweitrangig):hover, .quizknopf:not(.zweitrangig):hover, .uknopf:not(.zweitrangig):hover, .rumpf .uknopf:not(.zweitrangig):hover {
    background: linear-gradient(180deg, #454B54, #2E3238); border-color: transparent; transform: translateY(-1px);
    box-shadow: 0 3px 0 var(--an-aqua), 0 10px 20px rgba(20, 30, 45, .22); }
  .anmeldung button.zweitrangig, .quizknopf.zweitrangig, .uknopf.zweitrangig, .rumpf .uknopf.zweitrangig {
    background: #fff; color: var(--an-basalt); border: 1px solid #D7DCE3; border-radius: 8px; box-shadow: 0 2px 0 #E1E5EB; }
}

.kachel .deckel { background: linear-gradient(140deg, #14B3C9, #2E3238); }
.kachel:nth-child(2n) .deckel { background: linear-gradient(140deg, #3B4048, #14B3C9); }
.kachel:nth-child(3n) .deckel { background: linear-gradient(140deg, #2E3238, #D62839); }

@media (prefers-color-scheme: dark) {
  :root {
    --grund:     #15181D;
    --papier:    #1C2026;
    --flaeche:   #111418;
    --sand:      #22272E;
    --sand-tief: #2A3038;
    --linie:     #2F353E;
    --text:      #E8EAF0;
    --leise:     #AEB4C2;
    --leise-2:   #8E95A4;

    --navy:      #14B3C9;
    --akzent:    #14B3C9;
    --navy-tief: #22262C;
    --karmesin:  #FF6B78;
    --auf-navy:     #15181D;
    --auf-akzent:   #15181D;
    --auf-karmesin: #15181D;
  }
  .kurskopf .kweiter { color: #15181D; }
  .webseite { --ws-signal: #5FD0E0; --ws-signal-bg: #12343A; }
  .anmeldung button:hover,
  .quizknopf:hover,
  .uknopf:hover, .rumpf .uknopf:hover { background: #5FD0E0; border-color: #5FD0E0; }
  .uknopf.zweitrangig:hover, .rumpf .uknopf.zweitrangig:hover { background: #12343A; border-color: #2A5A62; }
  .blatt h1, .blatt h2, .blatt h3,
  .kachel .titel, .modulkopf h1 { color: #E3E8F2; }
  .ws-kicker { color: #5FD0E0; }
}