:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --bg: #ffffff;
  --bg-alt: #f4f6f8;
  --surface: #ffffff;
  --surface-2: #eef1f4;
  --text: #14181c;
  --text-muted: #4f5a64;
  --border: #d8dee4;
  --border-strong: #b9c3cc;
  --accent: #1546c8;
  --accent-hover: #10389f;
  --accent-contrast: #ffffff;
  --accent-soft: #e6ecfb;
  --shadow-1: 0 1px 2px rgba(16, 24, 32, 0.06), 0 4px 12px rgba(16, 24, 32, 0.06);
  --shadow-2: 0 2px 6px rgba(16, 24, 32, 0.08), 0 14px 32px rgba(16, 24, 32, 0.12);
  --radius: 14px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wrap: 1180px;
}

:root[data-theme="dark"] {
  --bg: #0d1115;
  --bg-alt: #12171d;
  --surface: #161c23;
  --surface-2: #1d242c;
  --text: #e9edf1;
  --text-muted: #a8b4c0;
  --border: #2a333d;
  --border-strong: #3b4650;
  --accent: #7fa9ff;
  --accent-hover: #a2c1ff;
  --accent-contrast: #0b0f13;
  --accent-soft: #1a2434;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5), 0 4px 14px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.55), 0 18px 40px rgba(0, 0, 0, 0.5);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: clamp(1rem, 0.97rem + 0.16vw, 1.075rem);
  line-height: 1.65;
  color: var(--text);
  background-color: var(--bg);
  overflow-x: hidden;
}

h1, h2, h3 { line-height: 1.18; margin: 0 0 0.5em; letter-spacing: -0.02em; font-weight: 650; }
h1 { font-size: clamp(2rem, 1.35rem + 2.9vw, 3.4rem); }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.5vw, 2.25rem); }
h3 { font-size: clamp(1.08rem, 1rem + 0.4vw, 1.25rem); }
p { margin: 0 0 1em; }
img, svg, iframe { max-width: 100%; }

a { color: var(--accent); }
a:hover { color: var(--accent-hover); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem); }
.small { font-size: 0.85rem; color: var(--text-muted); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 60;
  background-color: var(--accent);
  color: var(--accent-contrast);
  padding: 0.6rem 1rem;
  border-radius: 8px;
  text-decoration: none;
  transition: transform 160ms var(--ease-out);
}
.skip-link:focus-visible { top: 3rem; color: var(--accent-contrast); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background-color: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 62px;
}
.wordmark {
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--text);
  margin-right: auto;
  font-size: 1.02rem;
}
.wordmark span { color: var(--text-muted); font-weight: 500; }

.site-nav ul { display: flex; gap: 0.15rem; list-style: none; margin: 0; padding: 0; }
.site-nav a {
  display: block;
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.94rem;
  transition: color 150ms var(--ease-out), background-color 150ms var(--ease-out);
}
.site-nav a:hover { color: var(--text); background-color: var(--surface-2); }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font: inherit;
  font-size: 0.85rem;
  color: var(--text);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 150ms var(--ease-out), color 150ms var(--ease-out), border-color 150ms var(--ease-out);
}
.theme-toggle:active { transform: scale(0.97); }
.theme-icon { display: inline-flex; }
.theme-label { min-width: 3.6em; text-align: left; }
.theme-switching .theme-toggle { transition: none; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font: inherit;
  font-weight: 560;
  font-size: 0.98rem;
  text-decoration: none;
  padding: 0.72rem 1.3rem;
  border-radius: 11px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 160ms var(--ease-out), border-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn-primary { background-color: var(--accent); color: var(--accent-contrast); }
.btn-primary:hover { color: var(--accent-contrast); background-color: var(--accent-hover); }
.btn-ghost { background-color: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn-ghost:hover { color: var(--text); background-color: var(--surface-2); }
.btn-block { width: 100%; }

.hero { padding: clamp(3rem, 7vw, 6rem) 0 clamp(2rem, 5vw, 3.5rem); }
.hero-inner { max-width: 800px; }
.eyebrow {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 0.9rem;
}
.lede { font-size: clamp(1.05rem, 1rem + 0.35vw, 1.2rem); color: var(--text-muted); max-width: 62ch; }
/* Der Nebensatz unter der Hauptzeile soll kleiner und ruhiger sitzen. */
.lede-small { font-size: clamp(0.95rem, 0.92rem + 0.15vw, 1.02rem); max-width: 54ch; line-height: 1.6; }

.hero-contact {
  margin: 1.8rem 0 0;
  padding: 1.1rem 1.25rem;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}
.hero-contact-label {
  margin: 0 0 0.2rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.mail-link {
  font-size: clamp(1.05rem, 0.95rem + 0.7vw, 1.4rem);
  font-weight: 650;
  letter-spacing: -0.01em;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.mail-link:hover { text-decoration: underline; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 1.6rem 0 0; }

.section { padding: clamp(3rem, 6vw, 5rem) 0; }
.section-alt { background-color: var(--bg-alt); border-block: 1px solid var(--border); }
.section-head { max-width: 62ch; margin-bottom: 2rem; }
.section-head p { color: var(--text-muted); margin-bottom: 0; }

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2.5vw, 1.6rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out), opacity 200ms var(--ease-out);
}

.thumb {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: var(--surface-2);
  background-image: linear-gradient(135deg, var(--surface-2), var(--accent-soft));
  border-bottom: 1px solid var(--border);
}

/* The frame renders at a desktop width, then scales down to exactly fill the
   card. max-width has to be cleared or the global rule pins it to the card
   width and the preview shows the mobile layout instead. */
.thumb iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 1280px;
  height: 800px;
  max-width: none;
  border: 0;
  transform: scale(0.29);
  transform-origin: top left;
  pointer-events: none;
  background-color: #ffffff;
}

/* scale() needs a plain number, so the container width has to be divided by a
   length (1280px), not by the bare number 1280. Dividing by the number makes
   the whole declaration invalid and the fixed fallback scale above stays in
   place, which only fits the three-column grid. */
@supports (transform: scale(calc(100cqw / 1280px))) {
  .thumb iframe { transform: scale(calc(100cqw / 1280px)); }
}

.card-body { display: flex; flex-direction: column; gap: 0.15rem; padding: 1.1rem 1.15rem 1.25rem; }
.card-body h3 { margin: 0; }
.card-link { color: var(--text); text-decoration: none; }
.card-link:hover { color: var(--text); }
/* Stretched hit area: the whole card is clickable, the iframe below it is not. */
.card-link::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.card-style { color: var(--text-muted); font-size: 0.95rem; margin: 0; }
.card-cta {
  position: relative;
  z-index: 3;
  align-self: flex-start;
  margin-top: 0.7rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent);
}
.card-cta::after { content: "\00a0\2192"; display: inline-block; transition: transform 200ms var(--ease-out); }

.change-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.change {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
}
.change h3 { margin: 0 0 0.4rem; }
.change p { margin: 0; color: var(--text-muted); font-size: 0.95rem; }

.change-close {
  margin: clamp(1.5rem, 3vw, 2.2rem) 0 0;
  max-width: 68ch;
  font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.15rem);
  font-weight: 560;
}

/* stretch statt start: sonst sind die beiden Karten unterschiedlich hoch und
   die Knoepfe stehen auf verschiedenen Hoehen nebeneinander. */
.price-grid { display: grid; gap: clamp(1rem, 2.5vw, 1.5rem); grid-template-columns: 1fr; align-items: stretch; }
.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 3vw, 2rem);
  box-shadow: var(--shadow-1);
}
/* Der Knopf sitzt immer unten, damit beide Karten unten buendig abschliessen. */
.price-card .btn { margin-top: auto; }
.price-card .ticks { margin-bottom: 1.4rem; }
.price-card.featured { border-color: var(--accent); box-shadow: var(--shadow-2); }
.badge {
  display: inline-block;
  /* Die Karte ist eine Flex-Spalte, sonst zoege sich das Etikett auf volle Breite. */
  align-self: flex-start;
  font-size: 0.76rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  background-color: var(--accent-soft);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  margin: 0 0 0.9rem;
}
.price { margin: 0.2rem 0 0.1rem; }
.amount { font-size: clamp(1.9rem, 1.5rem + 1.7vw, 2.7rem); font-weight: 700; letter-spacing: -0.03em; }
.price-note { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1.2rem; }
.ticks { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 0.55rem; }
.ticks li { position: relative; padding-left: 1.6rem; font-size: 0.95rem; }
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.7rem;
  height: 0.38rem;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

.notice {
  margin-top: clamp(1.5rem, 3vw, 2.2rem);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: clamp(1.2rem, 3vw, 1.8rem);
}
.notice h3 { margin-top: 0; }
.notice p:last-child { margin-bottom: 0; }

.site-footer { border-top: 1px solid var(--border); padding: 2.2rem 0 2.6rem; background-color: var(--bg-alt); }
.footer-inner { display: grid; gap: 1.4rem; }
.footer-brand { font-weight: 700; margin: 0 0 0.15rem; }
.footer-inner a { overflow-wrap: anywhere; }
.footer-note p { margin: 0; max-width: 60ch; }

/* Hidden only when JS can bring it back. */
.js .reveal { opacity: 0; transform: translateY(10px) scale(0.98); }
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.js .reveal.is-static { opacity: 1; transform: none; }

@media (min-width: 620px) {
  .price-grid { grid-template-columns: repeat(2, 1fr); }
  .change-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr auto; align-items: start; }
}

@media (min-width: 768px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1060px) {
  .change-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1200px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 460px) {
  .theme-label { display: none; }
  .theme-toggle { padding: 0.45rem; }
  .site-nav a { padding: 0.45rem 0.4rem; font-size: 0.9rem; }
}

@media (hover: hover) and (pointer: fine) {
  .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
  .card:hover .card-cta::after { transform: translateX(3px); }
  .theme-toggle:hover { background-color: var(--surface-2); border-color: var(--border-strong); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 150ms !important;
    transition-property: opacity, color, background-color, border-color !important;
    animation-duration: 1ms !important;
  }
  .js .reveal { transform: none; }
  .card:hover { transform: none; }
  .btn:active, .theme-toggle:active { transform: none; }
}

.viewer[hidden] { display: none; }

.viewer {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(0px, 2vw, 28px);
}

.viewer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 12, 16, 0.62);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 200ms var(--ease-out);
}

.viewer-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1280px, 100%);
  height: min(880px, 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: clamp(0px, 1.4vw, var(--radius));
  box-shadow: var(--shadow-2);
  overflow: hidden;
  opacity: 0;
  transform: scale(0.97) translateY(6px);
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}

.viewer.is-open .viewer-backdrop { opacity: 1; }
.viewer.is-open .viewer-panel { opacity: 1; transform: none; }

.viewer-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-wrap: wrap;
}

.viewer-meta { min-width: 0; margin-right: auto; }
.viewer-count { margin: 0; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.viewer-meta h2 { margin: 1px 0 0; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viewer-tag { margin: 0; font-size: 0.82rem; color: var(--text-muted); }

.viewer-sizes { display: flex; gap: 2px; padding: 3px; background: var(--surface-2); border-radius: 999px; }

.viewer-sizes button {
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.82rem;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 150ms var(--ease-out), color 150ms var(--ease-out), transform 160ms var(--ease-out);
}

.viewer-sizes button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }
.viewer-sizes button:active { transform: scale(0.97); }

.viewer-tools { display: flex; align-items: center; gap: 8px; }

.viewer-newtab {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  transition: color 150ms var(--ease-out), border-color 150ms var(--ease-out), transform 160ms var(--ease-out);
}
.viewer-newtab:active { transform: scale(0.97); }

.viewer-close {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: background-color 150ms var(--ease-out), transform 160ms var(--ease-out);
}
.viewer-close:active { transform: scale(0.95); }

.viewer-stage {
  position: relative;
  flex: 1;
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 14px;
  background: var(--bg-alt);
}

.viewer-screen {
  position: relative;
  height: 100%;
  width: 100%;
  max-width: 100%;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.viewer-screen[data-size="tablet"] { width: 834px; }
.viewer-screen[data-size="handy"] { width: 414px; }

.viewer-screen iframe { display: block; width: 100%; height: 100%; border: 0; }

.viewer-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: transform 160ms var(--ease-out), background-color 150ms var(--ease-out);
}

.viewer-arrow.prev { left: 10px; }
.viewer-arrow.next { right: 10px; }
.viewer-arrow:active { transform: scale(0.94); }

.viewer-foot {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.viewer-desc { margin: 0; flex: 1 1 260px; min-width: 0; color: var(--text-muted); font-size: 0.9rem; }
.viewer-foot-actions { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.viewer-hint { margin: 0; font-size: 0.78rem; color: var(--text-muted); }
.viewer-foot .btn { white-space: nowrap; }

body.viewer-open { overflow: hidden; }

@media (hover: hover) and (pointer: fine) {
  .viewer-arrow:hover { background: var(--accent-soft); }
  .viewer-close:hover { background: var(--surface-2); }
  .viewer-newtab:hover { color: var(--text); border-color: var(--border-strong); }
  .viewer-sizes button:hover { color: var(--text); }
}

@media (max-width: 860px) {
  .viewer { padding: 0; }
  .viewer-panel { height: 100%; border-radius: 0; border: 0; }
  .viewer-sizes { order: 3; width: 100%; justify-content: center; }
  .viewer-screen[data-size="tablet"], .viewer-screen[data-size="handy"] { width: 100%; }
  .viewer-arrow { width: 40px; height: 40px; }
  .viewer-arrow.prev { left: 4px; }
  .viewer-arrow.next { right: 4px; }
  .viewer-hint { display: none; }
  .viewer-desc { display: none; }
  .viewer-foot-actions { width: 100%; }
  .viewer-foot .btn { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .viewer-backdrop, .viewer-panel, .viewer-arrow,
  .viewer-close, .viewer-sizes button, .viewer-newtab {
    transition-duration: 150ms;
    transition-property: opacity;
  }
  .viewer-panel { transform: none; }
  .viewer-arrow:active, .viewer-close:active,
  .viewer-sizes button:active, .viewer-newtab:active { transform: none; }
}

.order[hidden] { display: none; }

.order {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: clamp(0px, 2vw, 24px);
}

.order-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 12, 16, 0.66);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 200ms var(--ease-out);
}

.order-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(720px, 100%);
  max-height: min(880px, 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: clamp(0px, 1.4vw, var(--radius));
  box-shadow: var(--shadow-2);
  overflow: hidden;
  opacity: 0;
  transform: scale(0.985) translateY(8px);
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
}

.order.is-open .order-backdrop { opacity: 1; }
.order.is-open .order-panel { opacity: 1; transform: none; }

.order-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 20px 12px;
}
.order-kind { margin: 0; font-size: 0.72rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-muted); }
.order-head h2 { margin: 2px 0 0; font-size: 1.3rem; }

.order-close {
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  flex: none;
  transition: background-color 150ms ease, transform 160ms var(--ease-out);
}
.order-close:active { transform: scale(0.95); }

.order-progress { height: 3px; margin: 0 20px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.order-progress span {
  display: block;
  height: 100%;
  width: 20%;
  background: var(--accent);
  border-radius: 3px;
  transform-origin: left center;
  transition: width 260ms var(--ease-in-out);
}
.order-step-count { margin: 8px 20px 0; font-size: 0.76rem; color: var(--text-muted); }

.order-body { padding: 6px 20px 4px; overflow-y: auto; flex: 1; min-height: 0; }

.order-step { display: none; }
.order-step.is-active { display: block; }
/* Entering steps come in from the side they were reached from. */
.order-step.is-active { animation: of-in 260ms var(--ease-out) both; }
.order-step.is-active.from-back { animation-name: of-in-back; }

@keyframes of-in {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes of-in-back {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: none; }
}

.order-step h3 { margin: 14px 0 0.35rem; font-size: 1.05rem; }
.of-sub { margin-top: 1.6rem; }
.of-hint { margin: 0 0 0.9rem; font-size: 0.88rem; color: var(--text-muted); }
.of-opt { font-weight: 400; color: var(--text-muted); font-size: 0.85em; }

.of-field { margin-bottom: 0.85rem; }
.of-field label { display: block; font-size: 0.88rem; font-weight: 560; margin-bottom: 0.3rem; }
.of-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 0.8rem; }

.of-field input[type="text"],
.of-field input[type="email"],
.of-field input[type="tel"],
.of-field select,
.of-field textarea {
  width: 100%;
  font: inherit;
  font-size: 0.95rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  padding: 0.6rem 0.7rem;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.of-field textarea { resize: vertical; }
.of-field input:focus-visible,
.of-field select:focus-visible,
.of-field textarea:focus-visible { border-color: var(--accent); }
.of-field input[aria-invalid="true"],
.of-field textarea[aria-invalid="true"] { border-color: #d3453c; }

.of-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.6rem; }
.of-tile { position: relative; cursor: pointer; }
.of-tile input { position: absolute; opacity: 0; pointer-events: none; }
.of-tile-inner {
  display: block;
  border: 2px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-2);
  transition: border-color 160ms ease, transform 160ms var(--ease-out);
}
.of-tile:active .of-tile-inner { transform: scale(0.98); }
.of-tile input:checked + .of-tile-inner { border-color: var(--accent); }
.of-tile input:focus-visible + .of-tile-inner { outline: 2px solid var(--accent); outline-offset: 2px; }
.of-tile-shot { position: relative; container-type: inline-size; aspect-ratio: 16 / 11; overflow: hidden; background: #fff; }
.of-tile-shot iframe {
  position: absolute; top: 0; left: 0;
  width: 1280px; height: 880px; max-width: none; border: 0;
  transform: scale(0.14); transform-origin: top left;
  pointer-events: none;
}
@supports (width: 100cqw) {
  .of-tile-shot iframe { transform: scale(calc(100cqw / 1280)); }
}
.of-tile-name { display: block; padding: 0.45rem 0.55rem; font-size: 0.83rem; }
.of-tile-name b { display: block; font-weight: 600; }
.of-tile-name span { color: var(--text-muted); font-size: 0.92em; }

.of-choices { display: grid; gap: 0.5rem; }
.of-choice { position: relative; display: block; cursor: pointer; }
.of-choice input { position: absolute; opacity: 0; pointer-events: none; }
.of-choice-body {
  display: block;
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 0.65rem 0.8rem;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms var(--ease-out);
}
.of-choice:active .of-choice-body { transform: scale(0.99); }
.of-choice input:checked + .of-choice-body { border-color: var(--accent); background: var(--accent-soft); }
.of-choice input:focus-visible + .of-choice-body { outline: 2px solid var(--accent); outline-offset: 2px; }
.of-choice-body strong { display: block; font-size: 0.94rem; }
.of-choice-body span { font-size: 0.86rem; color: var(--text-muted); }

.of-files { margin: 0.4rem 0 0; font-size: 0.83rem; color: var(--text-muted); }
.of-files.is-bad { color: #d3453c; }

.of-summary { margin: 0 0 1rem; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.3rem 0.9rem; font-size: 0.9rem; }
.of-summary dt { color: var(--text-muted); }
.of-summary dd { margin: 0; overflow-wrap: anywhere; }

.of-consent { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.85rem; color: var(--text-muted); }
.of-consent input { margin-top: 0.2rem; flex: none; }

.order-hp { position: absolute; left: -9999px; opacity: 0; }

.order-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.order-status { margin: 0; flex: 1; font-size: 0.84rem; color: var(--text-muted); min-width: 0; }
.order-status.is-bad { color: #d3453c; }
.order-foot .btn { flex: none; }

.order-done { padding: 40px 24px 32px; text-align: center; }
.order-done-mark { color: var(--accent); display: grid; place-items: center; margin-bottom: 0.6rem; }
.order-done h3 { margin: 0 0 0.3rem; }
.order-done p { color: var(--text-muted); margin-bottom: 1.2rem; }
.odm-ring { stroke-dasharray: 145; stroke-dashoffset: 145; animation: odm-ring 460ms var(--ease-out) forwards; }
.odm-tick { stroke-dasharray: 36; stroke-dashoffset: 36; animation: odm-tick 260ms var(--ease-out) 340ms forwards; }
@keyframes odm-ring { to { stroke-dashoffset: 0; } }
@keyframes odm-tick { to { stroke-dashoffset: 0; } }

body.order-open { overflow: hidden; }

@media (hover: hover) and (pointer: fine) {
  .order-close:hover { background: var(--surface-2); }
  .of-tile:hover .of-tile-inner { border-color: var(--border-strong); }
  .of-choice:hover .of-choice-body { border-color: var(--border-strong); }
}

@media (max-width: 700px) {
  .order { padding: 0; }
  .order-panel { max-height: 100%; height: 100%; border-radius: 0; border: 0; }
  .of-row { grid-template-columns: minmax(0, 1fr); }
  .of-picker { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
  .order-foot { flex-wrap: wrap; }
  .order-status { order: 3; width: 100%; flex: 1 0 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .order-backdrop, .order-panel { transition-duration: 120ms; transition-property: opacity; }
  .order-panel { transform: none; }
  .order-step.is-active, .order-step.is-active.from-back { animation: none; }
  .order-progress span { transition: none; }
  .odm-ring, .odm-tick { animation: none; stroke-dashoffset: 0; }
}

/* .btn setzt display, das schlaegt die Standardregel fuer [hidden]. Ohne das
   stand der Senden-Knopf in jedem Schritt sichtbar neben "Weiter". */
[hidden] { display: none !important; }