/*
 * Gestaltungsgrundlage von Mangold IT.
 *
 * Eine einzige Quelle fuer Farben, Schriften, Radien und die wenigen
 * wiederkehrenden Bauteile (Schaltflaeche, Flaeche, Kleinlabel). Startseite
 * und Rechtsseiten binden diese Datei ein und benutzen ausschliesslich die
 * hier definierten Werte - sonst driften die Oberflaechen mit jeder Aenderung
 * weiter auseinander.
 *
 * Die Werte sind mit ReadyNIS abgestimmt: dieselbe Palette, dieselben
 * Schriften, dieselben Bauteile. Wer hier etwas aendert, aendert die
 * Familienaehnlichkeit zwischen Dachseite und Produkten.
 *
 * Schriften werden SELBST ausgeliefert, nicht von einem fremden Dienst
 * nachgeladen. Zwei Gruende: die Inhaltssicherheitsrichtlinie erlaubt unter
 * font-src ausschliesslich die eigene Herkunft, und ein Nachladen von Google
 * wuerde bei jedem Seitenaufruf die IP-Adresse des Besuchers dorthin
 * uebertragen - bei einem Anbieter, der mit Datenschutz wirbt, ein Widerspruch.
 */

/* --------------------------------------------------------------- Schriften */

@font-face{font-family:'Sora';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/mi-sora-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Sora';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/mi-sora-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/mi-sora-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/mi-sora-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Sora';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/mi-sora-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Sora';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/mi-sora-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Sora';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/mi-sora-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Sora';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/mi-sora-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/mi-dmsans-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/mi-dmsans-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/mi-dmsans-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/mi-dmsans-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/mi-dmsans-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/mi-dmsans-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/mi-plexmono-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/mi-plexmono-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/mi-plexmono-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/mi-plexmono-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ------------------------------------------------------------------ Werte */

:root{
  /* --- Flaechen, von dunkel nach hell --- */
  --grund:#04141c;          /* Seitenhintergrund */
  --flaeche:#072430;        /* Karten, Panele */
  --flaeche-hoch:#0a2f3d;   /* angehobene Flaeche, Zeile unter dem Zeiger */
  --linie:rgba(234,243,245,.14);
  --linie-stark:rgba(234,243,245,.26);

  /* --- Schrift --- */
  --ton:#eaf3f5;            /* Haupttext */
  --ton-2:#a7bec7;          /* Fliesstext, ruhiger */
  --ton-3:#7d99a4;          /* Beschriftungen */
  --ton-4:#5f7c88;          /* Zurueckgenommen */

  /* --- Akzente --- */
  --akzent:#ff6a3d;         /* Handlung, Marke */
  --akzent-dunkel:#e8552a;
  --akzent-schrift:#04141c; /* Schrift auf Orange: dunkel, nicht weiss */
  --mint:#7fd4c1;           /* zweiter Akzent, Fortschritt und Erfolg */
  --warn:#ffb35c;
  --gefahr:#ff7a6b;

  /* --- Produktfarben. Jedes Produkt behaelt seinen eigenen Ton; die
         Dachseite zitiert ihn nur als schmale Kante an der Karte. --- */
  --p-readynis:#ff6a3d;
  --p-mango:#ff9e1a;
  --p-verein:#7fd4c1;
  --p-custom:#8fb4ff;

  /* --- Schriftfamilien --- */
  --schrift-titel:'Sora',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --schrift-text:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --schrift-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* --- Radien und Schatten --- */
  --radius:14px;
  --radius-gross:20px;
  --radius-pille:999px;
  --schatten:0 18px 44px rgba(0,0,0,.36);
}

/* --------------------------------------------------------------- Bauteile */

/*
 * Ueberschriften tragen die Marke: Sora, schwer, sehr eng gesetzt. Der enge
 * Zeichenabstand ist der auffaelligste Zug des Entwurfs und faellt sofort auf,
 * wenn er fehlt.
 */
.mi-titel{font-family:var(--schrift-titel);font-weight:800;letter-spacing:-.038em;line-height:1.02;color:var(--ton)}

/*
 * Kleinlabel ueber einer Ueberschrift: einzige Stelle mit Grossbuchstaben und
 * gesperrtem Satz. Bewusst sparsam einsetzen, sonst verliert es die Wirkung.
 */
.mi-label{font-family:var(--schrift-mono);font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--akzent)}

/* Schaltflaechen: durchgehend Pillenform. */
.mi-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--schrift-text);font-weight:700;font-size:15px;line-height:1;
  padding:15px 26px;border-radius:var(--radius-pille);border:1px solid transparent;
  cursor:pointer;text-decoration:none;transition:background .15s,border-color .15s,transform .06s,color .15s}
.mi-btn:active{transform:translateY(1px)}
.mi-btn-primaer{background:var(--akzent);color:var(--akzent-schrift)}
.mi-btn-primaer:hover{background:var(--akzent-dunkel);color:var(--akzent-schrift)}
.mi-btn-zweit{background:transparent;color:var(--ton);border-color:var(--linie-stark)}
.mi-btn-zweit:hover{border-color:var(--ton-3);background:rgba(234,243,245,.05);color:var(--ton)}
.mi-btn[aria-disabled="true"]{opacity:.5;pointer-events:none}

/* Sichtbarer Fokus ist Pflicht, nicht Geschmack: ohne ihn ist die Seite per
   Tastatur nicht bedienbar. */
.mi-btn:focus-visible,a:focus-visible,button:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,
summary:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}

.mi-flaeche{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius-gross)}

/*
 * Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt keine.
 * Das ist eine Barrierefreiheitsanforderung, keine Feinheit: Bewegung kann
 * Schwindel und Uebelkeit ausloesen.
 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
}