/* Styles der TravelReport-Seiten auf sacasoft.com nach Development_Anleitung_Web_fuer_App.md Abschnitt 3.4
   ("Gestaltung"): Schrift, Groessen, Karten, Buttons, Abstaende und Hintergrund kommen von der Hauptseite bzw. aus
   Bootstrap (content-card, feature-card, btn-brand, h4/h5, p-4, py-5). Hier nur die Akzentfarbe der App (dunkles
   Orange "Primary" aus App/Resources/Styles/Colors.xaml seit 10.10.2026, passend zum Logo-Orange #E0623A; Kontrast zu
   #fff 5,2 : 1, auf der 10-%-Flaeche 4,6 : 1) und Klassen mit Praefix "app-travelreport-". */

.app-travelreport {
  --app-travelreport-accent: #B84A25;
  --app-travelreport-accent-rgb: 184, 74, 37;
  --app-travelreport-accent-dark: #8F3618;
}

.app-travelreport a:not(.btn):not(.nav-link) {
  color: var(--app-travelreport-accent);
}

.app-travelreport a:not(.btn):not(.nav-link):hover {
  color: var(--app-travelreport-accent-dark);
}

/* ---- Unternavigation (Views/Shared/_AppHeader.cshtml) ---- */
.app-travelreport-subnav > a {
  color: var(--bs-body-color) !important;
}

.app-travelreport-subnav .nav-link {
  color: var(--app-travelreport-accent);
}

.app-travelreport-subnav .nav-link:hover,
.app-travelreport-subnav .nav-link:focus {
  color: var(--app-travelreport-accent-dark);
  background-color: rgba(var(--app-travelreport-accent-rgb), 0.1);
}

.app-travelreport-subnav .nav-link.active {
  color: #fff;
  background-color: var(--app-travelreport-accent);
}

/* ---- Akzentfarbe: Icon-Flaechen, Kennzeichen, kurze Labels ---- */
.app-travelreport-icon {
  flex: none;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(var(--app-travelreport-accent-rgb), 0.1);
  color: var(--app-travelreport-accent);
}

.app-travelreport-accent {
  color: var(--app-travelreport-accent);
}

/* Kennzeichen "Vollversion" bzw. "Nur auf dem Geraet" (Bootstrap badge, Schrift 0,75 rem) */
.app-travelreport-badge {
  background-color: rgba(var(--app-travelreport-accent-rgb), 0.1);
  color: var(--app-travelreport-accent);
  font-weight: 600;
}

/* Dezente Flaeche in der Akzentfarbe fuer einzelne Abschnitte (Datenschutzversprechen) */
.app-travelreport-tint {
  background-color: rgba(var(--app-travelreport-accent-rgb), 0.06);
}

/* Zeilenlaenge von Fliesstext auf der Startseite begrenzen */
.app-travelreport-measure {
  max-width: 40rem;
}

/* Beispielkarte "ein Reisetag": Beschriftung links, Wert rechts; auf schmalen Bildschirmen untereinander */
.app-travelreport-showcase {
  max-width: 44rem;
}

.app-travelreport-showcase-row {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 0.75rem;
  align-items: baseline;
}

@media (max-width: 480px) {
  .app-travelreport-showcase-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* Screenshots der App (Bilder 540 x 897 px) */
.app-travelreport-shot img {
  max-width: 20rem;
}

/* Dezentes Einblenden beim Scrollen (TravelReport.js setzt "app-travelreport-js" am html-Element; ohne JavaScript
   sofort sichtbar, bei "reduzierter Bewegung" abgeschaltet) */
.app-travelreport-js .app-travelreport-reveal {
  opacity: 0;
  transition: opacity 0.6s ease;
}

.app-travelreport-js .app-travelreport-reveal.app-travelreport-in {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .app-travelreport-js .app-travelreport-reveal {
    opacity: 1;
    transition: none;
  }
}