/* Produkt-Onepager pendelzeit.de (WP34). Gestaltung nach dem Design-Canvas; Abstände und Farben stehen überwiegend
   als style-Attribute im HTML, hier liegen Schriften, Zustände, Animationen und Anpassungen für schmale Bildschirme. */
@font-face { font-family: 'Barlow Semi Condensed'; font-weight: 700; font-display: swap; src: url(fonts/BarlowSemiCondensed-Bold.woff2) format('woff2'); }
@font-face { font-family: 'Source Sans Pro'; font-weight: 400; font-display: swap; src: url(fonts/SourceSansPro-Regular.woff2) format('woff2'); }
@font-face { font-family: 'Source Sans Pro'; font-weight: 700; font-display: swap; src: url(fonts/SourceSansPro-Bold.woff2) format('woff2'); }

:root { --font-head: 'Barlow Semi Condensed', 'Arial Narrow', Arial, sans-serif; --red: #C42008; --ink: #1a1a1a; --dark: #33363b; --soft: #F4F5F7; --line: #e2e2e2; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #fff; color: var(--ink); font-family: 'Source Sans Pro', Arial, sans-serif; font-size: 18px; line-height: 1.5; -webkit-text-size-adjust: 100%; }
img, video { max-width: 100%; }
a { color: var(--red); }
a:hover { color: #9e1a06; }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
details[open] .faq-plus { transform: rotate(45deg); }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible, pre:focus-visible, video:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
main section[id] { scroll-margin-top: 16px; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sprung { position: absolute; left: 16px; top: -60px; z-index: 10; padding: 10px 16px; background: var(--ink); color: #fff; border-radius: 8px; font-weight: 700; }
.sprung:focus { top: 16px; color: #fff; }

/* Videos mit Reitern */
.video-reiter { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 18px; background: #fff; border: 1px solid var(--line); border-radius: 999px; }
.video-reiter button { min-height: 44px; padding: 8px 22px; border: 0; border-radius: 999px; font: 700 18px/1.2 var(--font-head); letter-spacing: .02em; cursor: pointer; background: transparent; color: var(--ink); }
.video-reiter button[aria-selected="true"] { background: var(--red); color: #fff; }
.video { position: relative; background: #000; }
.video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.video-start { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border: 0; border-radius: 999px; background: var(--red); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.28); }
.video-start[hidden] { display: none; }

/* Live-Demo */
.feld { display: flex; flex-direction: column; gap: 6px; }
.feld label { font-weight: 700; font-size: 16px; }
.combobox { position: relative; }
.combobox input { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid #8a8d93; border-radius: 8px; font: inherit; font-size: 17px; color: var(--ink); box-sizing: border-box; }
.combobox [role="listbox"] { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px 0; list-style: none; background: #fff; border: 1px solid #8a8d93; border-radius: 8px; box-shadow: 0 10px 24px rgba(0,0,0,.15); max-height: 18rem; overflow-y: auto; text-align: left; font-size: 16px; }
[role="option"] { padding: 8px 12px; cursor: pointer; }
[role="option"]:hover { background: var(--soft); }
[role="option"][aria-selected="true"] { background: var(--red); color: #fff; }
.zeit { border: 1px solid var(--line); border-radius: 8px; padding: 12px 10px; text-align: center; background: var(--soft); }
.zeit svg { display: block; margin: 0 auto 6px; }
.zeit-name { display: block; font-size: 15px; color: var(--dark); }
.zeit-wert { font-family: var(--font-head); font-size: 28px; line-height: 1.2; white-space: nowrap; }
.zeit-wert small { display: block; font-family: 'Source Sans Pro', Arial, sans-serif; font-size: 14px; font-weight: 400; color: var(--dark); }
.zeit.ok { background: #fff; border-color: var(--red); }
#zeiten[aria-busy="true"] .zeit-wert { opacity: .4; }
#demo-status.fehler { color: #a51b06; }
#demo-quellen a { color: var(--dark); }

/* Microanimationen, abgeschaltet bei „Bewegung reduzieren“ */
@keyframes pz-in { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
@keyframes pz-fade { from { opacity: 0; translate: 0 -6px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: no-preference) {
  a, button, summary, details, main li, form, .zeit { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease, color .2s ease, filter .2s ease; }
  a[style*="border-radius: 8px"]:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.14); }
  a[style*="border-radius: 8px"]:active, button:active { transform: translateY(0) scale(.98); }
  button:hover { filter: brightness(1.1); }
  .video-start:hover { transform: scale(1.06); }
  nav a:not([style*="background"]) { background: linear-gradient(currentColor, currentColor) left bottom / 0 2px no-repeat; transition: background-size .25s ease, color .2s ease; }
  nav a:not([style*="background"]):hover { background-size: 100% 2px; }
  main li.pz-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0,0,0,.08); }
  section[aria-label="Ihre Rolle"] a:hover { border-color: var(--red) !important; box-shadow: 0 14px 30px rgba(0,0,0,.08); }
  details:hover { border-color: #c4c4c4 !important; }
  .faq-plus { transition: transform .25s ease; }
  details[open] > p { animation: pz-fade .3s ease-out; }
  .zeit.ok .zeit-wert { animation: pz-fade .35s ease-out; }
  main > section:first-child > div > * { animation: pz-in .6s ease-out both; }
  main > section:first-child > div > :nth-child(2) { animation-delay: .08s; }
  main > section:first-child > div > :nth-child(3) { animation-delay: .16s; }
  main > section:first-child > div > :nth-child(4) { animation-delay: .24s; }
  main > section:first-child > div > :nth-child(n+5) { animation-delay: .32s; }
  @supports (animation-timeline: view()) {
    main > section:not(:first-child) > div > * { animation: pz-in linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
  }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Schmale Bildschirme */
@media (max-width: 640px) {
  body { font-size: 17px; }
  .kopf > div { padding: 12px 16px !important; }
  .kopf img { height: 32px !important; }
  .kopf nav { gap: 6px 18px !important; font-size: 16px; }
  main > section > div, footer > div { padding-left: 16px !important; padding-right: 16px !important; }
  main > section[style*="88px"], main > section[style*="96px"], main > section[style*="80px"] { padding-top: 56px !important; padding-bottom: 56px !important; }
  main > section:first-child { padding-top: 48px !important; }
  main > section:first-child p[style*="font-size: 22px"] { font-size: 19px !important; }
  #demo-form { padding: 20px !important; }
  .kontakt-karte { padding: 24px !important; }
  .video-reiter button { padding: 8px 16px; font-size: 17px; }
  .video-start { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
  pre { font-size: 13px !important; padding: 16px !important; }
  .zeit-wert { font-size: 24px; }
  section[aria-label="Ihre Rolle"] a { padding: 20px !important; }
  section[aria-label="Ihre Rolle"] a span[style*="font-size: 28px"] { font-size: 22px !important; }
  #it dl { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  #it dl > div { padding: 16px !important; }
  #it dd { font-size: 30px !important; }
}