/*
 * agile-office-doxis.css
 * ----------------------------------------------------------------------------
 * Page-spezifische Overrides für die Doxis-Summit-2026-Landing-Page
 * (agile-office-doxis.html). Lädt nach shared.css und agile-office.css.
 *
 * Komponenten:
 *   - Newsticker (sticky top, marquee animation)
 *   - Nav / Breadcrumb Top-Overrides wegen Newsticker
 *   - Demo-Typ-Radio (Stand / Videocall Auswahl im Formular)
 *   - Disabled Slot-Options Styling (für manuelle Pflege bei Buchungen)
 *
 * Nach dem Summit: diese Datei entfernen, im HTML den Stylesheet-Link
 * raus.
 * ----------------------------------------------------------------------------
 */

/* ============================================================
 * Newsticker
 * ============================================================ */
.newsticker {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 40px;
  line-height: 40px;
  background: var(--grad-h, linear-gradient(90deg, #5B8CF7 0%, #9B5CE5 50%, #FF1481 100%));
  color: #fff;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.2px;
  overflow: hidden;
  white-space: nowrap;
  z-index: 200;
}

.newsticker-track {
  display: inline-block;
  padding-left: 100%;
  animation: newsticker-scroll 38s linear infinite;
}

.newsticker:hover .newsticker-track {
  animation-play-state: paused;
}

.newsticker-item {
  display: inline-block;
  padding: 0 18px;
}

.newsticker-sep {
  display: inline-block;
  padding: 0 4px;
  font-weight: 700;
  opacity: 0.65;
}

@keyframes newsticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
 * Nav / Breadcrumb Top-Overrides
 * Wegen Newsticker oben (32px) rutschen Nav und Breadcrumb runter.
 * ============================================================ */
nav#topnav {
  top: 40px;
}

.breadcrumb {
  top: 112px; /* 40 (newsticker) + 72 (nav default) */
}

nav#topnav.scrolled ~ .breadcrumb,
.breadcrumb.scrolled {
  top: 100px;  /* 40 (newsticker) + 60 (nav scrolled) */
}

/*
 * Hinweis: Falls der Hero im Browser-Test mit der Nav überlappt
 * (Nav 32px tiefer als Original), Hero padding-top um 32px erhöhen.
 * Aktuell unverändert, weil Original-Wert nicht bekannt.
 */

/* ============================================================
 * Demo-Typ Radio (Stand / Videocall Auswahl)
 * ============================================================ */
.demo-typ-radio {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

.demo-typ-radio label {
  flex: 1 1 calc(50% - 5px);
  min-width: 140px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
  border-radius: 10px;
  font-size: 14px;
  color: var(--text, #e2e8f0);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  user-select: none;
}

.demo-typ-radio label:hover {
  background: rgba(67, 130, 247, 0.07);
  border-color: var(--marine, #4382f7);
}

.demo-typ-radio input[type="radio"] {
  accent-color: var(--marine, #4382f7);
  cursor: pointer;
  margin: 0;
}

/* Hervorhebung bei aktiver Auswahl (moderne Browser, Safari 15.4+) */
.demo-typ-radio label:has(input[type="radio"]:checked) {
  background: rgba(67, 130, 247, 0.12);
  border-color: var(--marine, #4382f7);
}

/* ============================================================
 * Disabled Slot-Options (für manuelle Pflege)
 * Wenn ein Slot vergeben ist: <option disabled>...</option>
 * ============================================================ */
#wunschtermin option:disabled {
  color: var(--muted, #94a3b8);
  font-style: italic;
}

/* ============================================================
 * Eyebrow / Section-Tag etwas größer (Gregor-Review)
 * Default in shared.css ist ~11–12px. Wir gehen auf 13px.
 * ============================================================ */
.hero-eyebrow,
.section-tag {
  font-size: 13px;
}

/* ============================================================
 * Mobile
 * ============================================================ */
@media (max-width: 768px) {
  .newsticker {
    font-size: 13px;
    height: 36px;
    line-height: 36px;
  }
  nav#topnav {
    top: 36px;
  }
  .breadcrumb {
    top: 108px; /* 36 + 72 */
  }
  nav#topnav.scrolled ~ .breadcrumb,
  .breadcrumb.scrolled {
    top: 96px;  /* 36 + 60 */
  }
  .demo-typ-radio label {
    flex: 1 1 100%;
  }
  .newsticker-item {
    padding: 0 10px;
  }
}