/* Aperçu – Urban Equipe Brand Schrift */
@font-face {
  font-family: 'Aperçu';
  src: url('fonts/apercu-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Aperçu';
  src: url('fonts/apercu-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Aperçu';
  src: url('fonts/apercu-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --ue-black: #000000;
  --ue-white: #ffffff;
  --ue-bg: #ffffff;
  --ue-text: #000000;
  --ue-text-muted: #555555;
  --ue-pink: rgb(255, 118, 212);
  --ue-violet: rgb(205, 120, 249);
  --ue-cyan: rgb(2, 254, 255);
  --ue-mint: rgb(58, 242, 162);
  --ue-yellow: rgb(250, 237, 0);
  --ue-orange: rgb(248, 176, 76);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Aperçu', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--ue-bg);
  color: var(--ue-text);
  line-height: 1.5;
  font-size: 15px;
  padding-bottom: 100px;
}

body.page-wizard,
body.page-kontakt {
  padding-bottom: 100px;
}

body.page-kontakt {
  padding-bottom: 100px;
}

.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--ue-white);
  padding: 1rem 0;
}

.site-header .container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1.5rem;
}

.header-text {
  flex: 0 1 auto;
}

.header-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.25rem 0;
}

.header-subtitle {
  font-size: 0.95rem;
  color: var(--ue-text-muted);
  margin: 0;
}

.logo {
  display: block;
  line-height: 0;
}

.logo img {
  height: 144px;
  width: auto;
  display: block;
}

/* Sections */
.products {
  padding: 2.5rem 0;
}

h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.section-desc {
  color: var(--ue-text-muted);
  margin-bottom: 1.5rem;
}

/* Text links – Urban Equipe style */
.section-desc a,
.hosting-infobox-content a {
  color: var(--ue-pink);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: color 0.2s ease;
}

.section-desc a:hover,
.hosting-infobox-content a:hover {
  color: var(--ue-violet);
}

.section-desc a:focus-visible,
.hosting-infobox-content a:focus-visible {
  outline: 2px solid var(--ue-pink);
  outline-offset: 2px;
}

/* Hosting infobox */
.hosting-infobox {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background: #e8f5e9;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}

.hosting-infobox-content {
  flex: 1;
  min-width: 0;
}

.hosting-infobox-scribble {
  flex-shrink: 0;
  width: 80px;
  height: 105px;
  display: block;
  background-color: var(--ue-pink);
  -webkit-mask-image: url('grafics/idea.svg');
  mask-image: url('grafics/idea.svg');
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.hosting-infobox-title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
}

.hosting-infobox-list {
  list-style: disc;
  margin: 0 0 0.5rem 0;
  padding-left: 1.25rem;
  font-size: 0.9rem;
  line-height: 1.6;
}

.hosting-infobox-list li {
  margin-bottom: 0.25rem;
}

.hosting-infobox-included {
  margin: 0;
  font-size: 0.85rem;
  color: var(--ue-text-muted);
}

.hosting-options-title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 1rem 0;
}

/* Product Grid – Urban Equipe style: organic shapes, flat color blocks */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.25rem;
}

/* Hosting: full-width top card, "oder", then 3 in a row */
.product-grid-hosting {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.hosting-fullwidth {
  width: 100%;
}

.hosting-divider {
  text-align: center;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ue-text-muted);
  margin: 0;
}

.hosting-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

@media (max-width: 700px) {
  .hosting-row {
    grid-template-columns: 1fr;
  }
}

.product-card {
  position: relative;
  border-radius: 0;
  padding: 1.5rem;
  transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
  overflow: hidden;
}

/* Dim unselected cards when a selection exists in the same group */
.product-grid-hosting:has(.in-cart) .product-card:not(.in-cart),
.product-grid-support .support-row:has(.in-cart) .product-card:not(.in-cart),
.product-grid[data-category="options"]:has(.in-cart) .product-card:not(.in-cart) {
  opacity: 0.5;
}

.product-grid-hosting:has(.in-cart) .product-card:not(.in-cart):hover,
.product-grid-support .support-row:has(.in-cart) .product-card:not(.in-cart):hover,
.product-grid[data-category="options"]:has(.in-cart) .product-card:not(.in-cart):hover {
  opacity: 1;
}

/* Restore full visibility of icons and dark area when hovering dimmed hosting cards */
.product-grid-hosting:has(.in-cart) .product-card:not(.in-cart):hover .option-icon img {
  opacity: 1;
}


.clickable-card {
  cursor: pointer;
  user-select: none;
}

.product-card::before {
  content: '';
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  opacity: 0.2;
}

/* Card colors – Urban Equipe palette (equipment/wohnradar style) */
.card-hosting {
  background: #02feff;
  border: none;
}

.card-hosting::before {
  background: #000;
  top: -35px;
  right: -35px;
  width: 130px;
  height: 130px;
  opacity: 0.3;
}

/* Ganze Plattform: larger dark area for triple icons (matches wizard platform card) */
.card-hosting.hosting-fullwidth::before {
  top: -50px;
  right: -50px;
  width: 180px;
  height: 180px;
}

.card-hosting:hover {
  box-shadow: 0 8px 24px rgba(2, 254, 255, 0.35);
  transform: translateY(-2px);
}

.card-hosting.in-cart {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  outline: 3px solid #000;
  outline-offset: 2px;
}

.card-support {
  background: #ff76d4;
  border: none;
}

.card-support::before {
  background: #000;
  top: -35px;
  right: -35px;
  width: 130px;
  height: 130px;
  opacity: 0.3;
}

/* Support cards: dotted service-level visualization (matches question 2) */
.product-card.card-support.wizard-option-dots-few::before,
.product-card.card-support.wizard-option-dots-medium::before,
.product-card.card-support.wizard-option-dots-dense::before {
  opacity: 1;
}

.card-support:hover {
  box-shadow: 0 8px 24px rgba(255, 118, 212, 0.35);
  transform: translateY(-2px);
}

.card-support.in-cart {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  outline: 3px solid #000;
  outline-offset: 2px;
}

.card-options {
  background: #faed00;
  border: none;
}

.card-options::before {
  background: #000;
  top: -35px;
  right: -35px;
  width: 130px;
  height: 130px;
  opacity: 0.3;
}

.card-options:hover {
  box-shadow: 0 8px 24px rgba(250, 237, 0, 0.4);
  transform: translateY(-2px);
}

.card-options.in-cart {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  outline: 3px solid #000;
  outline-offset: 2px;
}

/* Support section: full-width setup, "kombinierbar mit", then 3 in a row */
.product-grid-support {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.support-top-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.25rem;
}

@media (max-width: 700px) {
  .support-top-row {
    grid-template-columns: 1fr;
  }
}

/* Dim Minimaler Support when a higher tier (Tech/Coaching) is selected */
.product-grid-support:has(.support-row .in-cart) .support-top-row .card-support-minimal {
  opacity: 0.5;
}

.product-grid-support:has(.support-row .in-cart) .support-top-row .card-support-minimal:hover {
  opacity: 1;
}

.support-divider {
  text-align: center;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ue-text-muted);
  margin: 0;
}

.product-grid-support .support-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

@media (max-width: 700px) {
  .product-grid-support .support-row {
    grid-template-columns: 1fr;
  }
}

.card-support-setup .btn-add,
.card-support-setup .btn-remove {
  display: none !important;
}

.product-card .badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #000;
  opacity: 0.7;
}

/* Pflicht/Basis: rectangular chips in bottom-right corner */
.product-card .badge-chip {
  top: auto;
  bottom: 0.75rem;
  right: 0.75rem;
  padding: 0.35rem 0.6rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  opacity: 1;
}

.product-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  padding-right: 3rem;
}

.product-card .price {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.product-card .price span {
  font-size: 0.9rem;
  font-weight: 400;
  opacity: 0.85;
}

.product-card .desc {
  font-size: 0.9rem;
  opacity: 0.9;
  margin-bottom: 1rem;
}

.product-card .card-desc-list {
  list-style: disc;
  margin: 0 0 1rem 0;
  padding-left: 1.25rem;
  font-size: 0.9rem;
  opacity: 0.9;
  line-height: 1.5;
}

.product-card .card-desc-list li {
  margin-bottom: 0.25rem;
}

.product-card .card-desc-list li:last-child {
  margin-bottom: 0;
}

/* Dark text on colored cards */
.card-hosting .price span,
.card-hosting .desc,
.card-support .price span,
.card-support .desc,
.card-support .card-desc-list,
.card-options .price span,
.card-options .desc {
  color: #000;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  border: 2px solid var(--ue-black);
  background: var(--ue-white);
  color: var(--ue-black);
  border-radius: 8px;
  transition: background 0.2s, color 0.2s;
}

.btn:hover {
  background: var(--ue-black);
  color: var(--ue-white);
}

.btn-remove {
  background: var(--ue-black);
  color: var(--ue-white);
}

.btn-remove:hover {
  background: var(--ue-text-muted);
  border-color: var(--ue-text-muted);
}

.hidden {
  display: none !important;
}

/* Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}

.modal-overlay.modal-visible {
  opacity: 1;
  visibility: visible;
}

.modal {
  background: var(--ue-white);
  padding: 2rem;
  max-width: 90%;
  width: 420px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.modal h2 {
  margin-bottom: 1rem;
}

.modal-text {
  margin-bottom: 1.5rem;
  color: var(--ue-text);
}

.modal-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.modal-actions .btn-primary {
  background: var(--ue-mint);
  color: var(--ue-black);
  border-color: var(--ue-black);
}

.modal-actions .btn-primary:hover {
  background: #2dd495;
}

.modal-actions .btn-secondary {
  background: #f5f5f5;
}

.modal-actions .btn-secondary:hover {
  background: var(--ue-black);
  color: var(--ue-white);
}

/* Wizard (Page 1) */
.wizard-section {
  padding: 3rem 0;
}

.wizard-intro {
  margin-bottom: 2rem;
  font-size: 1.1rem;
}

.wizard-question {
  margin-bottom: 2.5rem;
}

.wizard-question h2 {
  margin-bottom: 0.5rem;
}

.wizard-question-desc {
  color: var(--ue-text-muted);
  font-size: 0.95rem;
  margin-bottom: 1rem;
}

.wizard-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}

.wizard-option {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem;
  padding-right: 5rem;
  border-radius: 0;
  cursor: pointer;
  border: none;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
}

/* Dim unselected wizard options when one is selected in the same question */
.wizard-question:has(input:checked) .wizard-option:not(:has(input:checked)) {
  opacity: 0.5;
}

.wizard-question:has(input:checked) .wizard-option:not(:has(input:checked)):hover {
  opacity: 1;
}


.wizard-option::before {
  content: '';
  position: absolute;
  top: -30px;
  right: -30px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: #000;
  opacity: 0.3;
}

.wizard-option.card-options::before,
.wizard-option-sonstiges::before {
  display: none;
}

/* Question 2: varying dark areas for service level */
.wizard-option-dots-few::before {
  background: radial-gradient(circle at center, rgba(0,0,0,0.4) 2px, transparent 2px);
  background-size: 28px 28px;
  background-position: top right;
  opacity: 1;
  overflow: hidden;
  border-radius: 50%;
  transition: background 0.2s ease;
}

.wizard-option-dots-few:hover::before {
  background: radial-gradient(circle at center, rgba(0,0,0,0.6) 2px, transparent 2px);
  background-size: 28px 28px;
  background-position: top right;
}

.wizard-option-dots-medium::before {
  background: radial-gradient(circle at center, rgba(0,0,0,0.35) 2px, transparent 2px);
  background-size: 14px 14px;
  background-position: top right;
  opacity: 1;
  overflow: hidden;
  border-radius: 50%;
  transition: background 0.2s ease;
}

.wizard-option-dots-medium:hover::before {
  background: radial-gradient(circle at center, rgba(0,0,0,0.55) 2px, transparent 2px);
  background-size: 14px 14px;
  background-position: top right;
}

.wizard-option-dots-dense::before {
  background: radial-gradient(circle at center, rgba(0,0,0,0.35) 2px, transparent 2px);
  background-size: 8px 8px;
  background-position: top right;
  opacity: 1;
  overflow: hidden;
  border-radius: 50%;
  transition: background 0.2s ease;
}

.wizard-option-dots-dense:hover::before {
  background: radial-gradient(circle at center, rgba(0,0,0,0.55) 2px, transparent 2px);
  background-size: 8px 8px;
  background-position: top right;
}

.wizard-option-dots-full::before {
  /* Full solid circle – uses default .wizard-option::before */
  transition: opacity 0.2s ease;
}

.wizard-option-dots-full:hover::before {
  opacity: 0.5;
}

/* Option icons – top right, in the darker circle */
.option-icon {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 64px;
  height: 64px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.option-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.9;
  transition: transform 0.2s ease;
}

/* Wiggle effect on card hover */
@keyframes icon-wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-6deg); }
  75% { transform: rotate(6deg); }
}

@keyframes icon-wiggle-centered {
  0%, 100% { transform: translateY(-50%) rotate(0deg); }
  25% { transform: translateY(-50%) rotate(-6deg); }
  75% { transform: translateY(-50%) rotate(6deg); }
}

.wizard-option:hover .option-icon img,
.product-card:hover .option-icon img {
  animation: icon-wiggle 0.4s ease-in-out;
}

.wizard-option:hover .option-icon-triple img:nth-child(2),
.product-card:hover .option-icon-triple img:nth-child(2) {
  animation: icon-wiggle-centered 0.4s ease-in-out;
}

/* Product cards: scale down triple icon for smaller card */
.product-card .option-icon-triple {
  width: 90px;
  height: 90px;
}

.product-card .option-icon-triple img {
  width: 40px;
  height: 40px;
}

/* Als Plattform: spans 2 columns, three icons, larger darker area */
.wizard-option-plattform {
  grid-column: span 2;
  padding-right: 10rem;
}

.wizard-option-plattform::before {
  top: -40px;
  right: -40px;
  width: 200px;
  height: 200px;
}

/* Platform card: three icons in triangular layout, clustered together */
.option-icon-triple {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 130px;
  height: 130px;
  display: block;
}

.option-icon-triple img {
  position: absolute;
  width: 58px;
  height: 58px;
  object-fit: contain;
}

.option-icon-triple img:nth-child(1) {
  top: 0;
  right: 0;
}

.option-icon-triple img:nth-child(2) {
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.option-icon-triple img:nth-child(3) {
  bottom: 0;
  right: 15%;
}

@media (max-width: 480px) {
  .wizard-option-plattform {
    grid-column: span 1;
  }
}

.wizard-option:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.wizard-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.wizard-option input:checked ~ .option-title {
  font-weight: 700;
}

.wizard-option:has(input:checked) {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  outline: 3px solid #000;
  outline-offset: 2px;
}

.option-title {
  font-size: 1.1rem;
  position: relative;
  z-index: 1;
}

.option-desc {
  font-size: 0.9rem;
  opacity: 0.9;
  position: relative;
  z-index: 1;
}

.wizard-option .option-desc {
  color: #000;
}

.btn-next {
  margin-top: 2rem;
  padding: 1rem 2rem;
  font-size: 1rem;
}

.header-links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.back-link {
  display: inline-block;
  margin-bottom: 0;
  color: #333;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
}

.back-link:hover {
  color: var(--ue-black);
}

.back-link-button {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  color: #333;
  font-weight: 500;
}

.back-link-button:hover {
  color: var(--ue-black);
}

.preselect-note {
  margin-bottom: 0.5rem;
  color: var(--ue-text-muted);
}

/* Contact Form (Page 3) */
.form-section {
  padding: 3rem 0;
}

/* Thank-you page heart (hand-drawn effect) */
@property --heart-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.heart-drawn {
  text-align: center;
  margin-bottom: 1.5rem;
}

.heart-drawn img {
  display: block;
  margin: 0 auto;
  max-width: 220px;
  height: auto;
  height: auto;
  filter: url(#handdrawn);
  --heart-angle: 0deg;
  mask-image: conic-gradient(from 180deg at 50% 50%, black 0deg, black var(--heart-angle), transparent var(--heart-angle));
  -webkit-mask-image: conic-gradient(from 180deg at 50% 50%, black 0deg, black var(--heart-angle), transparent var(--heart-angle));
  animation: heart-reveal 1.5s ease-out both;
}

@keyframes heart-reveal {
  to {
    --heart-angle: 360deg;
  }
}

.contact-form {
  width: 100%;
}

.form-group {
  margin-bottom: 1.25rem;
}

.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.75rem;
  font-family: inherit;
  font-size: 1rem;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--ue-black);
}

.form-summary {
  margin: 2.5rem 0;
  padding: 2rem;
  background: #f5f5f5;
  border-radius: 8px;
}

.form-summary h3 {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.form-summary #summaryItems {
  margin-bottom: 1.5rem;
}

.summary-section {
  margin-bottom: 1.25rem;
}

.summary-section:last-child {
  margin-bottom: 0;
}

.summary-section-title {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  color: var(--ue-text-muted);
}

.summary-section-list {
  list-style: disc;
  margin: 0;
  padding-left: 1.25rem;
  font-size: 0.95rem;
  line-height: 1.6;
}

.summary-section-list li {
  margin-bottom: 0.2rem;
}

.form-totals {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.form-totals .form-total,
.form-totals .form-mwst {
  margin: 0.4rem 0;
}

.form-mwst {
  font-size: 0.9rem;
  color: var(--ue-text-muted);
}

.btn-submit {
  margin-top: 1rem;
  padding: 1rem 2rem;
  font-size: 1rem;
}

/* Sticky Bottom Bar */
.sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--ue-black);
  color: var(--ue-white);
  padding: 1rem 0;
  z-index: 100;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
}

.sticky-bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.sticky-summary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  flex: 1;
  min-width: 0;
}

.sticky-items {
  font-size: 0.9rem;
  color: #cccccc;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
}

.sticky-totals {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 1.5rem;
}

.sticky-total,
.sticky-follow {
  font-size: 0.9rem;
}

.sticky-follow.hidden {
  display: none !important;
}

.sticky-hint {
  font-size: 0.9rem;
  color: #cccccc;
}

.sticky-bar-wizard .btn-order {
  min-width: 200px;
}

.sticky-bar-contact .sticky-bar-inner {
  justify-content: flex-end;
}

.btn-order {
  padding: 0.75rem 1.5rem;
  background: var(--ue-white);
  color: var(--ue-black);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 8px;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}

.btn-order:hover {
  background: var(--ue-cyan);
  color: var(--ue-black);
}

.btn-order.disabled,
.btn-order:disabled {
  background: #888;
  color: #fff;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-order.ready,
.btn-order.btn-order-ready {
  background: var(--ue-mint);
  color: var(--ue-black);
}

.btn-order.ready:hover,
.btn-order.btn-order-ready:hover {
  background: #2dd495;
}

/* Footer – matches urban-equipe.ch dark footer */
.site-footer {
  padding: 2rem 0;
  background: var(--ue-black);
  color: var(--ue-white);
  font-size: 0.9rem;
}

.site-footer .container p {
  color: #ffffff;
  margin-bottom: 0.35rem;
}

.site-footer strong {
  color: var(--ue-white);
}

.site-footer small {
  color: #cccccc;
}

/* Responsive */
@media (max-width: 600px) {
  .sticky-bar-inner {
    flex-direction: column;
  }

  .sticky-summary {
    flex-direction: column;
    align-items: flex-start;
  }

  .btn-order {
    width: 100%;
    text-align: center;
  }
}