/* ============================================================
   AVEMTEC – KALKULATOR + KONTAKT + 404
   /wp-content/themes/wp-theme/css/pages.css
============================================================ */

/* ============================================================
   KALKULATOR – HERO
============================================================ */
.kalc-hero-inner {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-3xl);
  align-items: center;
  padding-block: clamp(2rem, 8vh, 5rem);
}

.kalc-live-dot {
  display: inline-block;
  width: 8px; height: 8px;
  background: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 10px #22c55e;
  animation: kalc-blink 1.8s ease-in-out infinite;
}
@keyframes kalc-blink {
  0%,100% { opacity:1;transform:scale(1); }
  50%      { opacity:.4;transform:scale(.7); }
}

.kalc-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: var(--space-lg);
}
.kalc-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .8rem;
  font-weight: 600;
  padding: .35rem .9rem;
  background: rgba(255,127,38,.08);
  border: 1px solid rgba(255,127,38,.2);
  border-radius: var(--radius-full);
  color: var(--clr-primary);
}

/* Hero preview card */
.kalc-preview-card {
  padding: var(--space-xl);
  text-align: center;
  border-color: rgba(255,127,38,.25);
  background: linear-gradient(135deg,rgba(255,127,38,.06),rgba(255,78,0,.03));
}
.kalc-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md);
}
.kalc-preview-title {
  font-size: .85rem;
  font-weight: 700;
  color: var(--clr-text-2);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.kalc-preview-badge {
  font-size: .7rem;
  font-weight: 700;
  background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.3);
  color: #22c55e;
  padding: .2rem .6rem;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.kalc-preview-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .35rem;
  margin-bottom: var(--space-md);
}
.kalc-preview-from {
  font-size: .9rem;
  color: var(--clr-text-2);
}
.kalc-preview-amount {
  font-family: var(--font-heading);
  font-size: 3.5rem;
  font-weight: 900;
  color: var(--clr-primary);
  line-height: 1;
  letter-spacing: -.04em;
  transition: all .4s var(--ease-out);
}
.kalc-preview-currency {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--clr-primary);
}
.kalc-preview-line {
  height: 1px;
  background: var(--clr-border);
  margin-bottom: var(--space-sm);
}
.kalc-preview-note {
  font-size: .78rem;
  color: var(--clr-text-3);
}

/* ============================================================
   KALKULATOR – PROGRESS BAR
============================================================ */
.kalc-progress-bar {
  margin-bottom: var(--space-2xl);
}
.kalc-progress-track {
  height: 4px;
  background: var(--clr-border);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: var(--space-md);
}
.kalc-progress-fill {
  height: 100%;
  background: var(--grad-primary);
  border-radius: 2px;
  width: 20%;
  transition: width .5s var(--ease-out);
}
.kalc-progress-steps {
  display: flex;
  justify-content: space-between;
}
.kalc-progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  flex: 1;
}
.kalc-progress-step__dot {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--clr-surface);
  border: 2px solid var(--clr-border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .3s var(--ease-out);
  position: relative;
}
.kalc-progress-step__num {
  font-size: .78rem;
  font-weight: 700;
  color: var(--clr-text-3);
}
.kalc-progress-step__check {
  display: none;
  color: white;
}
.kalc-progress-step__label {
  font-size: .72rem;
  color: var(--clr-text-3);
  font-weight: 500;
  transition: color .3s;
}
.kalc-progress-step.is-done .kalc-progress-step__dot {
  background: var(--clr-primary);
  border-color: var(--clr-primary);
}
.kalc-progress-step.is-done .kalc-progress-step__num { display: none; }
.kalc-progress-step.is-done .kalc-progress-step__check { display: block; }
.kalc-progress-step.is-done .kalc-progress-step__label { color: var(--clr-primary); }
.kalc-progress-step.is-active .kalc-progress-step__dot {
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 4px rgba(255,127,38,.15);
}
.kalc-progress-step.is-active .kalc-progress-step__num { color: var(--clr-primary); }
.kalc-progress-step.is-active .kalc-progress-step__label { color: var(--clr-text); }

/* ============================================================
   KALKULATOR – LAYOUT
============================================================ */
.kalc-wrapper { max-width: 1100px; margin: 0 auto; }
.kalc-main {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--space-2xl);
  align-items: start;
}

/* ============================================================
   STEP
============================================================ */
.kalc-step__header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}
.kalc-step__num {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 900;
  color: rgba(255,127,38,.15);
  line-height: 1;
  flex-shrink: 0;
  letter-spacing: -.04em;
}
.kalc-step__title {
  font-size: clamp(1.3rem,2vw,1.7rem);
  font-weight: 800;
  margin-bottom: .3rem;
}
.kalc-step__desc {
  font-size: .95rem;
  color: var(--clr-text-2);
  margin: 0;
}

/* ============================================================
   RADIO OPTIONS
============================================================ */
.kalc-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
}
.kalc-options--sm {
  grid-template-columns: repeat(auto-fill, minmax(min(100%,200px),1fr));
}
.kalc-option { display: block; cursor: pointer; }
.kalc-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.kalc-option__card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-lg);
  background: var(--clr-surface);
  border: 2px solid var(--clr-border);
  border-radius: var(--radius-lg);
  transition: border-color .2s, background .2s, transform .2s var(--ease-out);
  position: relative;
}
.kalc-option__card:hover {
  border-color: rgba(255,127,38,.35);
  background: var(--clr-surface-2);
  transform: translateY(-2px);
}
.kalc-option input:checked + .kalc-option__card {
  border-color: var(--clr-primary);
  background: rgba(255,127,38,.06);
  box-shadow: 0 0 0 1px rgba(255,127,38,.2);
}
.kalc-option input:focus-visible + .kalc-option__card {
  outline: 2px solid var(--clr-primary);
  outline-offset: 2px;
}
.kalc-option__icon {
  font-size: 1.8rem;
  line-height: 1;
  flex-shrink: 0;
}
.kalc-option__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.kalc-option__body strong {
  font-size: .95rem;
  font-weight: 700;
  color: var(--clr-heading);
}
.kalc-option__body span {
  font-size: .8rem;
  color: var(--clr-text-2);
  line-height: 1.4;
}
.kalc-option__check {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid var(--clr-border);
  flex-shrink: 0;
  margin-top: 2px;
  transition: all .2s;
  background: var(--clr-bg-2);
  position: relative;
}
.kalc-option__check::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--clr-primary);
  opacity: 0;
  transition: opacity .2s;
}
.kalc-option input:checked + .kalc-option__card .kalc-option__check {
  border-color: var(--clr-primary);
}
.kalc-option input:checked + .kalc-option__card .kalc-option__check::after {
  opacity: 1;
}
.kalc-option__card--sm {
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-md);
  gap: .3rem;
}
.kalc-option__card--sm .kalc-option__check {
  position: absolute;
  top: .75rem;
  right: .75rem;
}
.kalc-deadline-icon { font-size: 1.5rem; margin-bottom: .35rem; }

/* ============================================================
   CHECKBOXES
============================================================ */
.kalc-checkboxes {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.kalc-checkbox { display: block; cursor: pointer; }
.kalc-checkbox input { position: absolute; opacity: 0; width: 0; height: 0; }
.kalc-checkbox__card {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  background: var(--clr-surface);
  border: 2px solid var(--clr-border);
  border-radius: var(--radius-md);
  transition: border-color .2s, background .2s;
}
.kalc-checkbox__card:hover { border-color: rgba(255,127,38,.3); background: var(--clr-surface-2); }
.kalc-checkbox input:checked + .kalc-checkbox__card {
  border-color: var(--clr-primary);
  background: rgba(255,127,38,.05);
}
.kalc-checkbox__card--included {
  border-color: rgba(34,197,94,.2);
  background: rgba(34,197,94,.04);
  cursor: default;
  opacity: .85;
}
.kalc-checkbox__icon { font-size: 1.4rem; flex-shrink: 0; }
.kalc-checkbox__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.kalc-checkbox__body strong { font-size: .9rem; font-weight: 700; color: var(--clr-heading); }
.kalc-checkbox__body span  { font-size: .78rem; color: var(--clr-text-2); }
.kalc-checkbox__price {
  font-size: .82rem;
  font-weight: 700;
  color: var(--clr-primary);
  white-space: nowrap;
  flex-shrink: 0;
}
.kalc-checkbox__check {
  width: 20px; height: 20px;
  border-radius: 4px;
  border: 2px solid var(--clr-border);
  flex-shrink: 0;
  transition: all .2s;
  background: var(--clr-bg-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.kalc-checkbox input:checked + .kalc-checkbox__card .kalc-checkbox__check {
  background: var(--clr-primary);
  border-color: var(--clr-primary);
}
.kalc-checkbox input:checked + .kalc-checkbox__card .kalc-checkbox__check::after {
  content: '✓';
  font-size: .75rem;
  font-weight: 900;
  color: white;
}

/* Color helpers */
.text-danger  { color: #ef4444; }
.text-warning { color: #f59e0b; }
.text-ok      { color: #3b82f6; }
.text-good    { color: #22c55e; }

/* ============================================================
   FIELD LABEL
============================================================ */
.kalc-field-label {
  display: block;
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--clr-text-2);
  margin-bottom: var(--space-sm);
}

/* ============================================================
   CONTACT FIELDS (step 5)
============================================================ */
.kalc-contact-fields { margin-bottom: var(--space-lg); }
.kalc-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}
.kalc-field-group {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.kalc-field-input {
  width: 100%;
  padding: .85rem 1rem;
  background: var(--clr-bg-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  color: var(--clr-text);
  font-family: var(--font-body);
  font-size: .95rem;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
  appearance: none;
}
.kalc-field-input:focus {
  outline: none;
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 3px var(--clr-primary-glow);
}
.kalc-field-input::placeholder { color: var(--clr-text-3); }
textarea.kalc-field-input { resize: vertical; min-height: 90px; }
.kalc-privacy {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin-bottom: var(--space-lg);
  cursor: pointer;
}
.kalc-privacy input { accent-color: var(--clr-primary); margin-top: 3px; flex-shrink: 0; }
.kalc-privacy span  { font-size: .8rem; color: var(--clr-text-2); line-height: 1.5; }
.kalc-privacy a     { color: var(--clr-primary); }

/* ============================================================
   NAV
============================================================ */
.kalc-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--clr-border);
  margin-top: var(--space-lg);
}

/* Spinner */
.kalc-spinner {
  animation: kalc-spin .8s linear infinite;
}
@keyframes kalc-spin { to { transform: rotate(360deg); } }

/* ============================================================
   SUMMARY SIDEBAR
============================================================ */
.kalc-summary__card {
  padding: var(--space-lg);
  border-color: rgba(255,127,38,.2);
  background: linear-gradient(135deg,rgba(255,127,38,.04),transparent);
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
}
.kalc-summary__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md);
}
.kalc-summary__title {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--clr-text-2);
}
.kalc-summary__live {
  font-size: .65rem;
  font-weight: 700;
  background: rgba(34,197,94,.1);
  border: 1px solid rgba(34,197,94,.3);
  color: #22c55e;
  padding: .15rem .5rem;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: .06em;
  animation: kalc-blink 2s ease-in-out infinite;
}
.kalc-summary__price-wrap {
  background: var(--clr-bg-2);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
  text-align: center;
}
.kalc-summary__price-label {
  font-size: .75rem;
  color: var(--clr-text-3);
  margin-bottom: .35rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.kalc-summary__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .3rem;
}
.kalc-summary__from     { font-size: .85rem; color: var(--clr-text-2); }
.kalc-summary__amount   {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--clr-primary);
  line-height: 1;
  letter-spacing: -.03em;
  transition: all .35s var(--ease-out);
}
.kalc-summary__currency { font-size: 1.2rem; font-weight: 700; color: var(--clr-primary); }
.kalc-summary__range    { font-size: .75rem; color: var(--clr-text-3); margin-top: .25rem; }
.kalc-summary__empty    { font-size: .85rem; color: var(--clr-text-3); text-align: center; padding: var(--space-sm) 0; }

.kalc-summary__items {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: var(--space-md);
}
.kalc-summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .85rem;
  color: var(--clr-text-2);
  padding: .4rem 0;
  border-bottom: 1px solid var(--clr-border);
}
.kalc-summary-item:last-child { border-bottom: none; }
.kalc-summary-item strong { color: var(--clr-text); font-weight: 600; }
.kalc-summary-item span   { color: var(--clr-primary); font-weight: 700; font-size: .8rem; }

.kalc-summary__features {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-bottom: var(--space-md);
}
.kalc-summary-feature {
  font-size: .72rem;
  padding: .2rem .6rem;
  background: rgba(255,127,38,.08);
  border: 1px solid rgba(255,127,38,.15);
  border-radius: var(--radius-full);
  color: var(--clr-primary);
}

.kalc-summary__divider { height: 1px; background: var(--clr-border); margin-bottom: var(--space-md); }
.kalc-summary__note {
  display: flex;
  align-items: flex-start;
  gap: .4rem;
  font-size: .75rem;
  color: var(--clr-text-3);
  line-height: 1.5;
}

.kalc-direct {
  padding: var(--space-lg);
  margin-top: var(--space-md);
  text-align: center;
}
.kalc-direct__title {
  font-size: .8rem;
  color: var(--clr-text-2);
  margin-bottom: var(--space-sm);
}
.kalc-direct__phone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--clr-primary);
  text-decoration: none;
  margin-bottom: .3rem;
  transition: color var(--duration-fast);
}
.kalc-direct__phone:hover { color: var(--clr-primary-light); }
.kalc-direct__hours {
  font-size: .75rem;
  color: var(--clr-text-3);
}

/* SUCCESS */
.kalc-success {
  text-align: center;
  padding: var(--space-2xl) 0;
}
.kalc-success__icon { font-size: 4rem; margin-bottom: var(--space-md); }
.kalc-success__title {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: var(--space-sm);
}
.kalc-success__desc {
  color: var(--clr-text-2);
  max-width: 40ch;
  margin: 0 auto var(--space-lg);
}
.kalc-success__list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: var(--space-xl);
}
.kalc-success__list li {
  font-size: .95rem;
  color: var(--clr-text-2);
}
.kalc-success__contact {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  font-size: .9rem;
  color: var(--clr-text-2);
}

/* ============================================================
   KONTAKT – HERO
============================================================ */
.kontakt-hero-inner {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-2xl);
  align-items: center;
  padding-block: clamp(2rem,8vh,5rem);
}
.kontakt-hero-trust {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}
.kontakt-trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.kontakt-trust-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
}
.kontakt-trust-item strong {
  display: block;
  font-size: .9rem;
  font-weight: 700;
  color: var(--clr-heading);
}
.kontakt-trust-item span {
  font-size: .8rem;
  color: var(--clr-text-2);
}

/* Quick card */
.kontakt-quick-card {
  padding: var(--space-xl);
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
}
.kontakt-quick-title {
  font-size: .85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--clr-text-2);
  margin-bottom: var(--space-lg);
}
.kontakt-quick-phone {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: rgba(255,127,38,.08);
  border: 1px solid rgba(255,127,38,.2);
  border-radius: var(--radius-md);
  text-decoration: none;
  margin-bottom: var(--space-md);
  transition: background var(--duration-fast), border-color var(--duration-fast);
}
.kontakt-quick-phone:hover {
  background: rgba(255,127,38,.14);
  border-color: var(--clr-primary);
}
.kontakt-quick-phone__icon {
  width: 44px; height: 44px;
  background: var(--clr-primary);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}
.kontakt-quick-phone__num {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--clr-heading);
}
.kontakt-quick-phone__label {
  font-size: .75rem;
  color: var(--clr-text-2);
}
.kontakt-quick-divider {
  text-align: center;
  position: relative;
  margin-block: var(--space-md);
}
.kontakt-quick-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  height: 1px;
  background: var(--clr-border);
}
.kontakt-quick-divider span {
  position: relative;
  background: var(--glass-bg);
  padding: 0 .75rem;
  font-size: .78rem;
  color: var(--clr-text-3);
}
.kontakt-quick-email {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .95rem;
  font-weight: 600;
  color: var(--clr-text-2);
  text-decoration: none;
  justify-content: center;
  margin-bottom: var(--space-lg);
  transition: color var(--duration-fast);
}
.kontakt-quick-email:hover { color: var(--clr-primary); }
.kontakt-quick-alts {
  display: flex;
  gap: .5rem;
}
.kontakt-quick-alt {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .6rem;
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  font-size: .8rem;
  color: var(--clr-text-2);
  text-decoration: none;
  transition: border-color var(--duration-fast), color var(--duration-fast);
}
.kontakt-quick-alt:hover {
  border-color: var(--clr-primary);
  color: var(--clr-primary);
}

/* ============================================================
   KONTAKT – MAIN GRID
============================================================ */
.kontakt-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: var(--space-2xl);
  align-items: start;
}
.kontakt-info { display: flex; flex-direction: column; gap: var(--space-md); }

.kontakt-info__block { padding: var(--space-xl); }
.kontakt-info__heading { font-size: 1.1rem; margin-bottom: var(--space-lg); }
.kontakt-info__items { display: flex; flex-direction: column; gap: var(--space-lg); }
.kontakt-info__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}
.kontakt-info__icon {
  width: 40px; height: 40px;
  background: rgba(255,127,38,.1);
  border: 1px solid rgba(255,127,38,.2);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-primary);
  flex-shrink: 0;
}
.kontakt-info__label { font-size: .75rem; color: var(--clr-text-3); margin-bottom: .2rem; text-transform: uppercase; letter-spacing: .06em; }
.kontakt-info__value {
  display: block;
  font-weight: 700;
  color: var(--clr-heading);
  text-decoration: none;
  font-size: .95rem;
  transition: color var(--duration-fast);
}
a.kontakt-info__value:hover { color: var(--clr-primary); }
.kontakt-info__sub { font-size: .8rem; color: var(--clr-text-2); }

.kontakt-promise {
  padding: var(--space-lg);
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  border-color: rgba(34,197,94,.2);
  background: rgba(34,197,94,.04);
}
.kontakt-promise__icon { font-size: 1.5rem; flex-shrink: 0; }
.kontakt-promise__body strong { display: block; font-size: .9rem; font-weight: 700; margin-bottom: .25rem; }
.kontakt-promise__body p { font-size: .82rem; color: var(--clr-text-2); margin: 0; }

.kontakt-social { padding: var(--space-lg); }
.kontakt-social__title { font-size: .8rem; color: var(--clr-text-2); margin-bottom: var(--space-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.kontakt-social__links { display: flex; flex-direction: column; gap: .5rem; }
.kontakt-social__link {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .65rem var(--space-sm);
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  color: var(--clr-text-2);
  text-decoration: none;
  font-size: .88rem;
  font-weight: 500;
  transition: all var(--duration-fast);
}
.kontakt-social__link:hover {
  border-color: var(--clr-primary);
  color: var(--clr-primary);
  background: rgba(255,127,38,.06);
}

.kontakt-form-col .contact-form {
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
}
.kontakt-form-header { margin-bottom: var(--space-xl); }
.kontakt-form-header h2 { font-size: 1.5rem; margin-bottom: .5rem; }
.kontakt-form-header p  { color: var(--clr-text-2); font-size: .95rem; }
.kontakt-spinner { animation: kalc-spin .8s linear infinite; }

/* Map */
.kontakt-map-section { overflow: hidden; }
.kontakt-map-header { background: var(--clr-bg-2); padding: var(--space-2xl) 0; border-top: 1px solid var(--clr-border); }
.kontakt-map-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--clr-primary);
  padding: .3rem .8rem;
  background: rgba(255,127,38,.08);
  border: 1px solid rgba(255,127,38,.2);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-md);
}
.kontakt-map-info h2 { font-size: clamp(1.4rem,3vw,2rem); margin-bottom: var(--space-sm); }
.kontakt-map-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: var(--space-md);
}
.kontakt-map-chips span {
  font-size: .8rem;
  padding: .3rem .75rem;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-full);
  color: var(--clr-text-2);
}
.kontakt-map-embed { filter: grayscale(.4) brightness(.75) contrast(1.1); }
.kontakt-map-embed:hover { filter: grayscale(0) brightness(.85) contrast(1.1); transition: filter .4s; }

/* ============================================================
   404 PAGE
============================================================ */
.e404-page {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: var(--header-h);
  position: relative;
  overflow: hidden;
  text-align: center;
  padding-inline: clamp(1rem,5vw,2.5rem);
}

/* Background */
.e404-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.e404-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .3;
  animation: float 8s ease-in-out infinite;
}
.e404-orb--1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle,rgba(255,127,38,.2) 0%,transparent 70%);
  top: -150px; right: -100px;
}
.e404-orb--2 {
  width: 350px; height: 350px;
  background: radial-gradient(circle,rgba(255,60,0,.12) 0%,transparent 70%);
  bottom: 0; left: -80px;
  animation-delay: -4s;
}
.e404-orb--3 {
  width: 250px; height: 250px;
  background: radial-gradient(circle,rgba(255,127,38,.1) 0%,transparent 70%);
  top: 40%; left: 40%;
  animation-delay: -2s;
  animation-duration: 10s;
}

/* Floating code */
.e404-code { position: absolute; inset: 0; }
.e404-code__frag {
  position: absolute;
  left: var(--x);
  top: var(--y);
  font-family: var(--font-mono);
  font-size: clamp(.65rem,.9vw,.85rem);
  color: rgba(255,127,38,.15);
  animation: e404-float calc(6s + var(--d) * 2) ease-in-out infinite;
  animation-delay: var(--d);
  white-space: nowrap;
}
@keyframes e404-float {
  0%,100% { transform: translateY(0) rotate(-3deg); opacity: .15; }
  50%      { transform: translateY(-20px) rotate(3deg); opacity: .3; }
}

/* Inner */
.e404-inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  padding-block: var(--space-3xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
}

/* Big 404 */
.e404-number {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .1em;
  user-select: none;
  line-height: 1;
}
.e404-digit {
  font-family: var(--font-heading);
  font-size: clamp(6rem,18vw,13rem);
  font-weight: 900;
  letter-spacing: -.05em;
  color: transparent;
  -webkit-text-stroke: 3px rgba(255,127,38,.4);
  background: linear-gradient(135deg,rgba(255,127,38,.15),rgba(255,78,0,.08));
  -webkit-background-clip: text;
  background-clip: text;
  animation: e404-glitch 8s ease-in-out infinite;
  position: relative;
}
.e404-digit::before,
.e404-digit::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  -webkit-text-stroke: 0;
  background: var(--grad-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 0;
}
.e404-digit::before { animation: e404-glitch-1 8s ease-in-out infinite; }
.e404-digit::after  { animation: e404-glitch-2 8s ease-in-out infinite; }

@keyframes e404-glitch {
  0%,90%,100% { transform: none; }
  92%          { transform: skewX(-5deg) translateX(-3px); }
  94%          { transform: skewX(3deg) translateX(3px); }
  96%          { transform: skewX(-2deg); }
}
@keyframes e404-glitch-1 {
  0%,89%,100%  { opacity:0; transform:none; }
  90%          { opacity:.7; transform:translateX(-4px); clip-path:polygon(0 20%,100% 20%,100% 40%,0 40%); }
  92%          { opacity:0; }
}
@keyframes e404-glitch-2 {
  0%,92%,100%  { opacity:0; transform:none; }
  93%          { opacity:.5; transform:translateX(4px); clip-path:polygon(0 60%,100% 60%,100% 80%,0 80%); }
  95%          { opacity:0; }
}

/* Zero with face */
.e404-zero-wrap { position: relative; }
.e404-digit--zero { -webkit-text-stroke: 3px rgba(255,127,38,.4); }
.e404-face {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(.3rem,.6vw,.6rem);
  pointer-events: none;
}
.e404-face__eyes {
  display: flex;
  gap: clamp(.5rem,1.5vw,1.5rem);
}
.e404-eye {
  width: clamp(12px,2vw,20px);
  height: clamp(12px,2vw,20px);
  background: rgba(255,127,38,.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.e404-pupil {
  width: 40%; height: 40%;
  background: var(--clr-bg);
  border-radius: 50%;
  transition: transform .1s;
}
.e404-face__mouth {
  width: clamp(16px,2.5vw,28px);
  height: clamp(8px,1.2vw,14px);
  border: 2px solid rgba(255,127,38,.8);
  border-top: none;
  border-radius: 0 0 50px 50px;
  animation: e404-mouth 3s ease-in-out infinite;
}
@keyframes e404-mouth {
  0%,100% { border-radius: 0 0 50px 50px; height: clamp(8px,1.2vw,14px); }
  50%      { border-radius: 50px 50px 0 0; height: clamp(4px,.8vw,8px); border-top: 2px solid rgba(255,127,38,.8); border-bottom: none; }
}

/* Badge */
.e404-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--clr-primary);
  padding: .4rem 1rem;
  border: 1px solid rgba(255,127,38,.3);
  border-radius: var(--radius-full);
  background: rgba(255,127,38,.07);
}
.e404-badge__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--clr-primary);
  box-shadow: 0 0 8px var(--clr-primary);
  animation: pulse 2s ease-in-out infinite;
}

/* Content */
.e404-content { max-width: 580px; }
.e404-title {
  font-size: clamp(1.8rem,4vw,3rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -.03em;
  margin-block: var(--space-md);
}
.e404-subtitle {
  font-size: clamp(.9rem,1.5vw,1.1rem);
  color: var(--clr-text-2);
  line-height: 1.7;
  margin-bottom: var(--space-lg);
}

/* Humor box */
.e404-humor-box {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-xl);
  text-align: left;
}
.e404-humor-icon { font-size: 1.4rem; flex-shrink: 0; }
.e404-humor-text { font-size: .9rem; color: var(--clr-text-2); line-height: 1.6; margin: 0; }

/* Actions */
.e404-actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-xl);
}

/* Links */
.e404-links__title {
  font-size: .82rem;
  color: var(--clr-text-3);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: var(--space-sm);
}
.e404-links__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%,160px),1fr));
  gap: .5rem;
}
.e404-link {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .6rem .85rem;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  color: var(--clr-text-2);
  text-decoration: none;
  font-size: .82rem;
  font-weight: 500;
  transition: all var(--duration-fast);
}
.e404-link:hover {
  border-color: var(--clr-primary);
  color: var(--clr-primary);
  background: rgba(255,127,38,.05);
}

/* Mini CTA */
.e404-mini-cta { width: 100%; max-width: 600px; }
.e404-mini-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: var(--space-lg) var(--space-xl);
  flex-wrap: wrap;
  border-color: rgba(255,127,38,.2);
}
.e404-mini-cta__text {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  text-align: left;
}
.e404-mini-cta__emoji { font-size: 1.5rem; flex-shrink: 0; }
.e404-mini-cta__text strong { display: block; font-size: .95rem; font-weight: 700; color: var(--clr-heading); margin-bottom: .15rem; }
.e404-mini-cta__text span  { font-size: .82rem; color: var(--clr-text-2); }

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 1024px) {
  .kalc-hero-inner,
  .kontakt-hero-inner { grid-template-columns: 1fr; gap: var(--space-xl); }
  .kalc-hero-visual,
  .kontakt-hero-quick { display: none; }

  .kalc-main { grid-template-columns: 1fr; }
  .kalc-summary { display: none; }

  .kontakt-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .kalc-options { grid-template-columns: 1fr; }
  .kalc-field-row { grid-template-columns: 1fr; }
  .e404-actions { flex-direction: column; align-items: center; }
  .e404-mini-cta__inner { flex-direction: column; text-align: center; }
  .e404-mini-cta__text { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .e404-digit,
  .e404-digit::before,
  .e404-digit::after,
  .e404-code__frag,
  .e404-face__mouth,
  .e404-orb { animation: none; }
  .kalc-summary__amount,
  .kalc-preview-amount { transition: none; }
}