/* Grundgestaltung nach dem AUC-Styleguide. Werte aus der Wissensbasis, Ordner gestaltung.
   Farben immer über die Variablen, nie als feste Hexwerte in Komponenten. */

@font-face { font-family: "Jost"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/Jost-Regular.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/Jost-Medium.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/Jost-Bold.woff2") format("woff2"); }
@font-face { font-family: "Material Icons"; font-weight: 400; font-style: normal; font-display: block; src: url("fonts/material-icons.woff2") format("woff2"); }

:root {
  --auc-dunkelblau: #0a283c;
  --auc-blau: #0f427a;
  --auc-hellblau: #14beed;
  --auc-graublau: #9aa8b9;
  --auc-gruen: #6ed7a0;
  --auc-warning: #f7d66d;
  --auc-rot: #e63c4b;
  --auc-bg: #ffffff;
  --auc-surface: #f4f6f8;
  --auc-border: #e2e6ea;
  --auc-text: #0a283c;
  --auc-text-muted: #9aa8b9;
  --auc-primary: var(--auc-blau);
  --auc-accent: var(--auc-hellblau);
  --auc-bar: var(--auc-dunkelblau);
  --auc-radius: 0px;
  --auc-font: "Jost", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--auc-font); font-size: 16px; line-height: 1.5; color: var(--auc-text); background: var(--auc-surface); display: flex; flex-direction: column; min-height: 100vh; }
h1, h2, h3 { color: var(--auc-primary); margin: 0 0 12px; }
h1 { font-size: 32px; font-weight: 700; line-height: 1.2; }
h2 { font-size: 22px; font-weight: 700; line-height: 1.2; }
h3 { font-size: 17px; font-weight: 500; }
a { color: var(--auc-primary); }
a:hover { color: var(--auc-accent); }
:focus-visible { outline: 3px solid var(--auc-hellblau); outline-offset: 2px; }
.klein { font-size: 14px; color: var(--auc-text-muted); }
[hidden] { display: none !important; }

.material-icons { font-family: "Material Icons"; font-weight: normal; font-style: normal; font-size: 20px; line-height: 1; display: inline-block; text-transform: none; letter-spacing: normal; white-space: nowrap; direction: ltr; -webkit-font-feature-settings: "liga"; font-feature-settings: "liga"; vertical-align: middle; color: var(--auc-accent); }

/* Kopfleiste */
.kopf { background: var(--auc-bar); color: #fff; padding: 22px 32px; }
.kopf-innen { max-width: 980px; margin: 0 auto; display: flex; align-items: center; gap: 16px; }
.kopf img { height: 36px; width: auto; }
.kopf .titel { font-size: 22px; font-weight: 700; color: #fff; }

/* Inhalt */
main { flex: 1; width: 100%; max-width: 980px; margin: 0 auto; padding: 32px; }
.karte { background: var(--auc-bg); border: 1px solid var(--auc-border); border-radius: var(--auc-radius); padding: 24px; margin-bottom: 24px; }

/* Formulare */
label { display: block; font-weight: 500; margin: 12px 0 4px; }
input, textarea { width: 100%; font: inherit; color: var(--auc-text); padding: 10px 12px; border: 1px solid var(--auc-border); border-radius: var(--auc-radius); background: var(--auc-bg); }
input:focus, textarea:focus { border-color: var(--auc-primary); }
.feld-hinweis { font-size: 14px; color: var(--auc-text-muted); margin: 4px 0 0; }

/* Buttons */
.btn { font-family: var(--auc-font); font-size: 15px; font-weight: 500; padding: 11px 20px; border: 1px solid transparent; border-radius: var(--auc-radius); cursor: pointer; transition: all .15s; margin-top: 16px; }
.btn-primary { background: var(--auc-hellblau); color: #fff; border-color: var(--auc-hellblau); }
.btn-primary:hover { background: #fff; color: var(--auc-hellblau); }
.btn-secondary { background: transparent; color: var(--auc-blau); border-color: var(--auc-blau); }
.btn-secondary:hover { background: var(--auc-blau); color: #fff; }
.btn:disabled { background: var(--auc-graublau); border-color: var(--auc-graublau); color: #fff; cursor: not-allowed; }

/* Hinweisfelder und Status */
.hinweis { padding: 14px 18px; border-left: 4px solid; margin: 12px 0; }
.hinweis-info { background: rgba(20,190,237,.16); color: #0b6f8c; border-color: var(--auc-hellblau); }
.hinweis-fehler { background: rgba(230,60,75,.12); color: #b32230; border-color: var(--auc-rot); }
.hinweis-ok { background: rgba(110,215,160,.18); color: #1f7a4d; border-color: var(--auc-gruen); }
.hinweis-warnung { background: rgba(247,214,109,.32); color: #7a5b00; border-color: var(--auc-warning); }

/* Fußzeile mit Datenschutz, Impressum und AUC-Seite (Pflicht in jedem Projekt) */
.fuss { background: var(--auc-bar); color: #fff; padding: 18px 32px; font-size: 14px; }
.fuss-innen { max-width: 980px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.fuss a { color: #fff; }
.fuss a:hover { color: var(--auc-hellblau); }

@media (max-width: 560px) {
  .kopf { padding: 18px 20px; }
  .kopf .titel { font-size: 18px; }
  main { padding: 20px; }
  .karte { padding: 18px; }
  .fuss { padding: 18px 20px; }
  .btn { width: 100%; }
}