/* =====================================================================
   Bestellportal — Zustaende
   =====================================================================
   Der Entwurf schreibt Hover, Fokus und Tastendruck als eigene
   Angaben (style-hover, style-focus, style-active). Im Browser gibt es
   das nicht -- hier stehen sie als richtige Regeln. Alles andere
   (Farben, Abstaende, Schrift) kommt aus tokens.css und aus den
   Inline-Angaben, die aus dem Entwurf uebernommen sind.
   ===================================================================== */

html, body { margin: 0; padding: 0; }
* { -webkit-tap-highlight-color: transparent; }

a { color: var(--yago-indigo-700); text-decoration: none; font-weight: 600; }
a:hover { text-decoration: underline; }
input::placeholder { color: var(--yago-gray-300); }

/* Sichtbarer Fokus fuer die Tastatur -- ohne ihn ist die Seite mit der
   Tabulatortaste nicht bedienbar. */
:focus-visible {
  outline: 2px solid var(--yago-indigo-700);
  outline-offset: 2px;
}

/* --- Knoepfe ------------------------------------------------------- */
.knopf-prim { transition: background var(--dur-fast, 120ms) var(--ease-standard, ease); }
.knopf-prim:hover { background: var(--yago-indigo-800) !important; text-decoration: none; }
.knopf-prim:active { transform: scale(.97); }

.knopf-sek { transition: background var(--dur-fast, 120ms) var(--ease-standard, ease); }
.knopf-sek:hover { background: var(--yago-indigo-tint-10) !important; text-decoration: none; }
.knopf-sek:active { transform: scale(.97); }

.knopf-warn:hover { background: rgba(231, 44, 110, .08) !important; text-decoration: none; }
.knopf-warn:active { transform: scale(.97); }

/* --- Navigation ---------------------------------------------------- */
.nav { font-weight: 600; color: var(--yago-gray-600); text-decoration: none; }
.nav:hover { color: var(--yago-indigo-700); text-decoration: none; }

.nav-haupt:hover { background: var(--yago-gray-50); text-decoration: none; }
.nav-unter:hover { background: var(--yago-indigo-tint-10); text-decoration: none; }

/* --- Listen -------------------------------------------------------- */
.kundenzeile { transition: background var(--dur-fast, 120ms) var(--ease-standard, ease); }
.kundenzeile:hover { background: var(--yago-indigo-tint-10); text-decoration: none; }

.artikelzeile:hover { background: var(--yago-paper); }

/* --- Kacheln auf der Startseite ------------------------------------ */
.kachel { transition: box-shadow var(--dur-fast, 120ms) var(--ease-standard, ease); }
.kachel:hover { box-shadow: var(--shadow-md); text-decoration: none; }

/* --- Kalender ------------------------------------------------------ */
.tag { transition: border-color var(--dur-fast, 120ms) var(--ease-standard, ease); }
.tag:hover { border-color: var(--yago-indigo-700) !important; text-decoration: none; }

/* --- Eingabefelder ------------------------------------------------- */
input:focus, select:focus, textarea:focus {
  border-color: var(--yago-indigo-700) !important;
  box-shadow: 0 0 0 2px var(--yago-indigo-tint-15, rgba(50, 45, 145, .15));
}
input:disabled {
  background: var(--yago-gray-50);
  color: var(--yago-gray-400);
  cursor: not-allowed;
}

/* Die Pfeilchen am Zahlenfeld nehmen Platz weg und werden mit der Maus
   leicht versehentlich gedreht. Die Tastatur kann weiter zaehlen. */
input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* --- Drucken ------------------------------------------------------- */
/* Eine Station druckt sich die Bestellung aus und legt sie auf den
   Wagen. Dann stoeren Navigation und Knoepfe. */
@media print {
  header, aside, footer, .knopf-prim, .knopf-sek, .knopf-warn, .tag { display: none !important; }
  main { padding: 0 !important; }
  body { background: #fff !important; }
  input, select { border: none !important; box-shadow: none !important; padding: 2px 0 !important; }
}

/* --- Schmale Bildschirme ------------------------------------------- */
/* Zielgeraet ist der PC (so der Entwurf). Damit die Seite auf einem
   Tablet am Stationsstuetzpunkt trotzdem benutzbar bleibt, rutscht die
   Seitenspalte bei wenig Platz nach oben. */
@media (max-width: 900px) {
  aside { width: 100% !important; flex-direction: row !important; flex-wrap: wrap; }
  aside > div, aside > a { flex: 0 0 auto; }
  body > div > div { flex-direction: column !important; }
}