/*
 * phi-fit Timer — Ergaenzendes Stylesheet zur Unterseite /timer/
 * (c) 2026 by Ing. F. Weijers, weijers@cyberprofis.de
 * Lizenz: MIT · Spenden: https://paypal.me/IngWeijers
 *
 * Baut auf ../main.css auf und verwendet ausschliesslich deren Variablen.
 */

/* ====================================================
   1. GRUNDGERUEST DER SEITE
   ==================================================== */
.timer-seite {
  padding-top: 90px;
  padding-bottom: var(--spacing-xl);
}

.timer-karte {
  background: var(--white);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.timer-karte h2 {
  color: var(--primary-dark);
  border-bottom: 2px solid var(--light-gray);
  padding-bottom: var(--spacing-sm);
}

.timer-intro {
  max-width: 46rem;
}

/* Sprungziele bleiben unter der fixierten Navigation sichtbar. */
#ergebnis,
#fehler {
  scroll-margin-top: 100px;
}

/* ====================================================
   2. FORMULAR
   ==================================================== */
.feldgruppe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.feld label {
  display: block;
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--dark-gray);
  margin-bottom: var(--spacing-xs);
}

.feld input,
.feld select {
  width: 100%;
  padding: 0.55rem 0.7rem;
  font-family: var(--font-secondary);
  font-size: var(--font-size-md);
  color: var(--dark-gray);
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-radius: var(--border-radius-sm);
}

.feld input:focus,
.feld select:focus {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
  border-color: var(--primary);
}

.feld .feld-hilfe {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--medium-gray);
  margin-top: var(--spacing-xs);
}

.optional-schalter {
  font-family: var(--font-primary);
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  padding: var(--spacing-sm) 0;
}

.optional-schalter::marker {
  color: var(--primary);
}

.knopfleiste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  align-items: center;
  margin-top: var(--spacing-md);
}

.ton-schalter {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--medium-gray);
}

/* ====================================================
   3. LIVE-KARTE
   ==================================================== */
.live-karte {
  border-left: 6px solid var(--primary);
  background: var(--white);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.live-karte[data-zustand="pause"] { border-left-color: var(--success); }
.live-karte[data-zustand="ende"]  { border-left-color: var(--medium-gray); }

.live-status {
  font-family: var(--font-primary);
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--primary-dark);
  margin-bottom: var(--spacing-xs);
}

.live-rest {
  font-family: var(--font-primary);
  font-size: var(--font-size-xxl);
  font-weight: 700;
  color: var(--primary);
  line-height: 1.1;
}

.live-karte[data-zustand="pause"] .live-rest { color: var(--success); }

/* ====================================================
   4. ZEITLEISTE
   ==================================================== */
.zeitleiste-rahmen {
  margin: var(--spacing-lg) 0 var(--spacing-xl);
}

.zeitleiste {
  position: relative;
  height: 46px;
  background: var(--light);
  border-radius: var(--border-radius-sm);
  overflow: hidden;
}

.zl-block {
  position: absolute;
  top: 0;
  height: 100%;
}

.zl-arbeit      { background: rgba(44, 138, 197, 0.18); }
.zl-mittag      { background: #f0a03c; }
.zl-gehen       { background: var(--success); }
.zl-tief        { background: #2f6f3f; }
.zl-antisitz,
.zl-mobilisation { background: var(--primary); }
.zl-aktivierung { background: #6fb3dd; }
.zl-entlastung  { background: #8e7cc3; }
.zl-training    { background: #c0504d; }

.zeitskala {
  position: relative;
  height: 1.6rem;
  margin-top: var(--spacing-xs);
}

.zl-marke {
  position: absolute;
  transform: translateX(-50%);
  font-size: var(--font-size-xs);
  color: var(--medium-gray);
  white-space: nowrap;
}

.legende {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
  font-size: var(--font-size-xs);
  color: var(--medium-gray);
}

.legende span::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  margin-right: var(--spacing-xs);
  vertical-align: -1px;
}

.legende .leg-arbeit::before      { background: rgba(44, 138, 197, 0.35); }
.legende .leg-bewegung::before    { background: var(--primary); }
.legende .leg-gehen::before       { background: var(--success); }
.legende .leg-mittag::before      { background: #f0a03c; }
.legende .leg-entlastung::before  { background: #8e7cc3; }

/* ====================================================
   5. KENNZAHLEN, PLANTABELLE, HINWEISE
   ==================================================== */
.kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.kennzahl {
  background: var(--light);
  border-radius: var(--border-radius-sm);
  padding: var(--spacing-md);
  text-align: center;
}

.kennzahl-wert {
  display: block;
  font-family: var(--font-primary);
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--primary-dark);
}

.kennzahl-text {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--medium-gray);
}

.plan-tabelle {
  width: 100%;
  border-collapse: collapse;
}

.plan-tabelle th {
  text-align: left;
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  color: var(--medium-gray);
  border-bottom: 2px solid var(--light-gray);
  padding: var(--spacing-sm);
}

.plan-tabelle td {
  border-bottom: 1px solid var(--light-gray);
  padding: var(--spacing-sm);
  vertical-align: top;
}

.plan-tabelle .spalte-zeit {
  white-space: nowrap;
  font-family: var(--font-primary);
}

.plan-tabelle .begruendung {
  font-size: var(--font-size-xs);
  color: var(--medium-gray);
  margin-top: var(--spacing-xs);
}

.zeile-mittag  { background: rgba(240, 160, 60, 0.08); }
.zeile-tief    { background: rgba(47, 111, 63, 0.08); }
.zeile-training { background: rgba(192, 80, 77, 0.07); }

.marke {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: var(--border-radius-lg);
  font-size: var(--font-size-xs);
  font-family: var(--font-primary);
  font-weight: 600;
  color: var(--white);
  white-space: nowrap;
}

.marke-aktivierung  { background: #6fb3dd; }
.marke-mobilisation,
.marke-antisitz     { background: var(--primary); }
.marke-gehen        { background: var(--success); }
.marke-tief         { background: #2f6f3f; }
.marke-entlastung   { background: #8e7cc3; }
.marke-mittag       { background: #f0a03c; }
.marke-training     { background: #c0504d; }

.hinweis {
  border-radius: var(--border-radius-sm);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
  font-size: var(--font-size-sm);
}

.hinweis-info    { background: rgba(44, 138, 197, 0.10); border-left: 4px solid var(--primary); }
.hinweis-warnung { background: rgba(240, 160, 60, 0.14); border-left: 4px solid #f0a03c; }

.rechtshinweis {
  font-size: var(--font-size-xs);
  color: var(--medium-gray);
  border-top: 1px solid var(--light-gray);
  padding-top: var(--spacing-md);
  margin-top: var(--spacing-lg);
}

.angebot-hinweis {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: var(--white);
  border-radius: var(--border-radius-md);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.angebot-hinweis h3,
.angebot-hinweis p { color: var(--white); }

/* ====================================================
   6. KLEINE BILDSCHIRME
   ==================================================== */
@media (max-width: 575px) {
  .timer-seite { padding-top: 78px; }
  .timer-karte { padding: var(--spacing-md); }
  .plan-tabelle th:nth-child(2),
  .plan-tabelle td:nth-child(2) { display: none; }
  .live-rest { font-size: var(--font-size-xl); }
}

/* ====================================================
   7. DRUCKANSICHT
   ==================================================== */
@media print {
  body { background: var(--white) !important; }
  .navbar,
  .footer,
  .timer-karte--eingabe,
  .live-karte,
  .angebot-hinweis,
  .knopfleiste,
  .no-print { display: none !important; }

  .timer-seite { padding-top: 0; }
  .timer-karte { box-shadow: none; padding: 0; }
  .plan-tabelle { font-size: 10pt; }
  .plan-tabelle tr { page-break-inside: avoid; }
  .zeile-mittag, .zeile-tief, .zeile-training { background: none; }
  .marke { color: var(--dark-gray); background: none !important; border: 1px solid var(--medium-gray); }
}