/* OpenClose visual system: one component grammar layered over legacy page styles. */
:root {
  --ui-ink: var(--color-ink);
  --ui-blue: var(--color-blue);
  --ui-blue-dark: var(--color-blue-dark);
  --ui-paper: var(--color-paper);
  --ui-soft: var(--color-surface);
  --ui-line: var(--color-line);
  --ui-radius: 14px 10px 15px 11px / 11px 15px 10px 14px;
  --ui-radius-small: 10px 8px 11px 9px / 8px 11px 9px 10px;
  --shadow-flat: 5px 6px 0 var(--color-blue-soft);
  --shadow-float: 0 20px 54px color-mix(in srgb,var(--color-ink) 11%,transparent);
  --section-space: clamp(82px, 8vw, 128px);
  --content-measure: 62ch;
  --title-measure: 15ch;
}

/* One reusable SVG vocabulary. Color follows currentColor. */
.doodle-mark {
  display: inline-block;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.doodle-rays {
  width: 64px;
  height: 52px;
  -webkit-mask-image: url('/play/openclose/images/doodle/rays.svg');
  mask-image: url('/play/openclose/images/doodle/rays.svg');
}

.doodle-arrow-right {
  width: 42px;
  height: 22px;
  -webkit-mask-image: url('/play/openclose/images/doodle/arrow-right.svg');
  mask-image: url('/play/openclose/images/doodle/arrow-right.svg');
}

.doodle-arrow-up {
  width: 1.05em;
  height: 1.05em;
  -webkit-mask-image: url('/play/openclose/images/doodle/arrow-up-right.svg');
  mask-image: url('/play/openclose/images/doodle/arrow-up-right.svg');
}

.doodle-arrow-curve {
  width: 180px;
  height: 70px;
  -webkit-mask-image: url('/play/openclose/images/doodle/arrow-curve.svg');
  mask-image: url('/play/openclose/images/doodle/arrow-curve.svg');
}

/* Shared underline replaces the former collection of unrelated polygons. */
.site-header .nav-links a::after,
.feature-title-underlined::after,
.order-story h1::after,
.footer-brandbook-link::after,
.footer-lower .footer-links strong::after,
.footer-lower .footer-links a::after,
.login-register a::after {
  border-radius: 0;
  background: var(--ui-blue);
  clip-path: none;
  -webkit-mask: url('/play/openclose/images/doodle/underline.svg') center / 100% 100% no-repeat;
  mask: url('/play/openclose/images/doodle/underline.svg') center / 100% 100% no-repeat;
}

.feature-card .card-copy h3::after { display: none; }

.feature-title-underlined {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.feature-title-underlined::after {
  position: absolute;
  right: 0;
  bottom: -14px;
  left: 0;
  width: 100%;
  height: 8px;
  content: '';
  transform: rotate(-1deg);
}

.feature-dark .feature-title-underlined::after {
  background: var(--color-orange);
}

/* Buttons: the same drawn shape, border weight, typography and interaction. */
.button,
.site-header .nav-actions > .button,
.login-submit,
.order-submit,
.contact-form-submit button {
  min-height: 58px;
  padding: 0 28px;
  border: 2px solid var(--ui-ink);
  border-radius: var(--ui-radius);
  background: var(--ui-paper);
  color: var(--ui-ink);
  box-shadow: var(--shadow-flat);
  font: 700 21px/1 var(--font-hand);
  letter-spacing: .005em;
  filter: none;
  transform: rotate(-.35deg);
  transition: background-color .18s ease, box-shadow .18s ease, color .18s ease, transform .18s ease;
}

.button-primary,
.button-buy,
.site-header .nav-actions > .button-buy,
.login-submit,
.order-submit,
.contact-form-submit button {
  border-color: var(--ui-ink);
  background: var(--ui-blue);
  color: var(--color-white);
}

.button-login,
.site-header .nav-actions > .button-login {
  border-color: var(--ui-ink);
  background: var(--ui-paper);
  color: var(--ui-ink);
}

.button:hover,
.site-header .nav-actions > .button:hover,
.login-submit:hover,
.order-submit:hover,
.contact-form-submit button:hover {
  box-shadow: var(--shadow-flat);
  filter: none;
  transform: translateY(2px) rotate(0);
}

.button-primary:hover,
.button-buy:hover,
.site-header .nav-actions > .button-buy:hover,
.login-submit:hover,
.order-submit:hover,
.contact-form-submit button:hover {
  background: var(--ui-blue-dark);
}

.site-header .nav-actions > .button {
  min-width: 124px;
  min-height: 52px;
  padding-inline: 26px;
  font-size: 22px;
}

.contact-submit-brush,
.login-submit::before,
.login-submit::after,
.order-submit::before {
  display: none;
}

.contact-form-submit button b { color: var(--color-white); }
.contact-form-submit button {
  justify-content: center;
  font-size: clamp(23px, 1.7vw, 28px);
  text-align: center;
}

.contact-form-submit button > span {
  width: 100%;
  text-align: center;
}

.contact-form-submit button > b {
  position: absolute;
  right: 24px;
}
.login-submit b::before,
.login-submit b::after { display: none; }

/* Inputs and selection controls share the same surface and focus language. */
.login-input-wrap,
.contact-form-field {
  min-height: 60px;
  border: 2px solid var(--ui-line);
  border-radius: var(--ui-radius-small);
  background: var(--ui-paper);
  box-shadow: none;
}

.login-input-wrap:focus-within,
.contact-form-field:focus-within {
  border-color: var(--ui-blue);
  box-shadow: var(--shadow-flat);
  outline: 0;
}

.contact-form {
  display: grid;
  gap: 14px;
  border: 2px solid var(--ui-ink);
  border-radius: var(--ui-radius);
  background: var(--ui-paper);
  box-shadow: var(--shadow-float);
}

.contact-form-field {
  grid-template-columns: minmax(150px, .38fr) minmax(0, 1fr);
  padding: 0 20px;
}

.contact-form-field-message {
  min-height: 132px;
  padding-top: 0;
}

.contact-form-field input,
.contact-form-field textarea {
  padding-inline: 14px;
}

.size-tabs,
.font-picker,
.radius-picker,
.order-billing {
  padding: 4px;
  border: 2px solid var(--ui-line);
  border-radius: var(--ui-radius-small);
  background: var(--ui-soft);
  box-shadow: none;
}

.size-tabs button,
.font-picker button,
.radius-picker button,
.order-billing button,
.theme-choice {
  border: 2px solid transparent;
  border-radius: var(--ui-radius-small);
  background: transparent;
  box-shadow: none;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease, transform .18s ease;
}

.size-tabs button:hover,
.font-picker button:hover,
.radius-picker button:hover,
.order-billing button:hover,
.theme-choice:hover {
  background: color-mix(in srgb,var(--color-white) 72%,transparent);
}

.size-tabs button.active,
.font-picker button.active,
.radius-picker button.active,
.order-billing button.is-active,
.theme-choice.active {
  border-color: var(--ui-blue);
  background: var(--color-white);
  color: var(--ui-blue);
  box-shadow: var(--shadow-flat);
  transform: translate(-2px, -2px);
}

.theme-choice.active i { box-shadow: none; outline: 0; }

.order-plan {
  border: 2px solid var(--ui-line);
  border-radius: var(--ui-radius);
  background: var(--ui-paper);
  box-shadow: none;
}

.order-plan.is-selected {
  border-color: var(--ui-blue);
  box-shadow: var(--shadow-flat);
}

.login-remember span { box-shadow: none; }

/* Only two shadows are used on editorial surfaces: flat and floating. */
.browser-mockup,
.order-pricing,
.order-widget,
.login-character {
  box-shadow: var(--shadow-float);
}

.order-site-sketch,
.order-status-sketch {
  box-shadow: var(--shadow-flat);
}

.hero-message-avatar {
  filter: none;
}

/* The large contact CTA intentionally keeps its original custom-drawn silhouette. */
#kontakt-cta .contact-card-button,
#kontakt-cta .contact-card-button:hover,
#kontakt-cta .contact-card-button:focus-visible {
  box-shadow: none;
  filter: none;
  transform: none;
}

#kontakt-cta .contact-card-button {
  font-size: clamp(24px, 2vw, 32px);
}

/* Reduce decoration: retain one accent per composition, not one per component. */
.hero-message-update .hero-doodle-rays,
.hero-message-link .hero-doodle-rays,
.feature-blue .card-number::after,
.order-clock-doodle::before,
.order-status-rays,
.order-pricing::after,
.contact-card-button-rays,
.login-character::before,
.login-character::after {
  display: none;
}

.hero-doodle-rays,
.login-heading-rays,
.contact-form-rays,
.order-clock-rays {
  color: var(--ui-blue);
}

.hero-cta-arrow,
.contact-form-arrow,
.order-preview-arrow {
  color: var(--ui-blue);
}

.hero-message .hero-cta-arrow {
  width: 1em;
  height: 1em;
  margin-left: .18em;
}

.hero-message-update .hero-cta-arrow,
.hero-message-link .hero-cta-arrow { color: var(--color-white); }

.contact-form-arrow {
  top: calc(50% - 20px);
  height: 70px;
}

.order-preview-arrow {
  width: 66px;
  height: 62px;
  margin: 4px auto 12px;
  transform: rotate(70deg);
}

/* Consistent section rhythm and readable text measures. */
.section,
#produkt.section,
.preview-section,
.faq-section,
.contact-form-section {
  padding-block: var(--section-space);
}

.preview-section,
.faq-section,
.contact-form-section {
  row-gap: clamp(48px, 6vw, 88px);
}

.preview-copy,
.faq-title,
.contact-form-intro,
.contact-card-copy {
  min-width: 0;
}

.preview-copy > p:not(.eyebrow),
.faq-title > p:not(.eyebrow),
.card-copy p,
.contact-form-copy,
.contact-card-copy > p:not(.eyebrow),
.order-lead {
  max-width: var(--content-measure);
}

.preview-copy h2,
.faq-title h2,
.contact-form-intro h2,
.contact-card-copy h2,
.order-story h1 {
  max-width: var(--title-measure);
}

.preview-controls { gap: 28px; }
.preview-control-block,
.preview-control-footer > div { gap: 12px; }
.contact-form-copy { margin-top: 28px; }
.faq-title > p:not(.eyebrow) { margin-top: 22px; }

@media (max-width: 840px) {
  :root { --section-space: 72px; }

  .site-header .nav-actions > .button {
    width: 100%;
    min-height: 54px;
  }

  .contact-form-field {
    grid-template-columns: 1fr;
    gap: 4px;
    padding-block: 14px;
  }

  .contact-form-field input,
  .contact-form-field textarea { padding-inline: 0; }
  .contact-form-arrow { display: none; }

  .order-page { width: calc(100% - var(--gutter) * 2); }

  .order-story,
  .order-pricing {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .order-story { margin-inline: 0; }
  .order-story h1 { width: auto; max-width: 100%; }
  .order-lead { width: 100%; }
  .order-lead br { display: none; }
  .order-setup-demo { width: 100%; overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .button,
  .login-submit,
  .order-submit,
  .contact-form-submit button { transition: none; }
}