/* Gemeinsame Teile aller Beispielseiten von tim-kofler.at:
   Hinweisleiste oben, Einblenden beim Scrollen, Videos. Jede Seite bringt ihr eigenes Design mit. */
.tk-demo-bar { position: sticky; top: 0; z-index: 1000; display: flex; align-items: center; gap: 12px; justify-content: space-between;
  padding: 8px max(14px, env(safe-area-inset-left)) 8px max(14px, env(safe-area-inset-right));
  background: #0b0b0b; color: #e8e8e4; font: 500 13px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif; border-bottom: 1px solid #262626; }
.tk-demo-bar a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.tk-demo-bar img { width: 34px; height: auto; display: block; }
.tk-demo-bar__note { color: #a1a1a1; text-align: center; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-demo-bar__cta { background: #e6e6e6; color: #0b0b0b !important; border-radius: 999px; padding: 6px 12px; font-weight: 700; white-space: nowrap; }
.tk-demo-bar__cta:hover { background: #fff; }
@media (max-width: 560px) { .tk-demo-bar__note { display: none; } }

/* Einblenden beim Scrollen: Inhalte sind ohne JavaScript sichtbar, erst demo.js setzt .tk-js. */
.tk-js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s); }
.tk-js [data-reveal].is-in { opacity: 1; transform: none; }
.tk-video { display: block; width: 100%; height: 100%; object-fit: cover; background: #111; }
@media (prefers-reduced-motion: reduce) {
  .tk-js [data-reveal] { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* Formularfelder: Datums- und Zeitfelder haben am Handy eine feste Mindestbreite und ragen sonst über den Rand. */
input, select, textarea { box-sizing: border-box; max-width: 100%; min-width: 0; }
input[type="date"], input[type="time"], input[type="datetime-local"] { -webkit-appearance: none; appearance: none; display: block; width: 100%; min-width: 0; }
input[type="date"]::-webkit-date-and-time-value { text-align: left; }
form label, form .row2 > *, form [class*="row"] > * { min-width: 0; }