/* acko Kalkulator — Stylesheet (Tokens + Komponenten)
   Vorkompiliert aus tokens.css + Kalkulator.html <style>.
   In WordPress laden VOR dem JS-Bundle (siehe README). */

/* ====================== DESIGN TOKENS ====================== */
/*
 * acko eGbR — Design System
 * colors_and_type.css
 * CSS custom properties for colors, typography, spacing, radii, shadows
 */

/* ─── Google Fonts Import ────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700&family=Barlow+Condensed:wght@700;800;900&display=swap');

/* ─── BASE COLOR PALETTE ─────────────────────────────────────────────────── */
:root {
  /* Brand */
  --color-amber:          #F5A623;
  --color-amber-light:    #FBBE56;
  --color-amber-dark:     #E09010;
  --color-amber-deeper:   #C57A08;

  /* Neutrals */
  --color-black:          #0D0D0D;
  --color-near-black:     #1A1A1A;
  --color-gray-900:       #2A2A2A;
  --color-gray-800:       #3D3D3D;
  --color-gray-700:       #555555;
  --color-gray-600:       #6E6E6E;
  --color-gray-500:       #8A8A8A;
  --color-gray-400:       #ABABAB;
  --color-gray-300:       #C8C8C8;
  --color-gray-200:       #E0E0E0;
  --color-gray-100:       #F4F4F4;
  --color-white:          #FFFFFF;

  /* Semantic */
  --color-success:        #3AB77E;
  --color-warning:        #F5A623;  /* same as amber */
  --color-error:          #E04B4B;
  --color-info:           #4B8FE0;

  /* ─── SEMANTIC ALIASES ─────────────────────────────────────────────────── */

  /* Foreground */
  --fg-primary:           var(--color-near-black);
  --fg-secondary:         var(--color-gray-700);
  --fg-tertiary:          var(--color-gray-500);
  --fg-disabled:          var(--color-gray-400);
  --fg-inverse:           var(--color-white);
  --fg-accent:            var(--color-amber-dark);

  /* Background */
  --bg-base:              var(--color-white);
  --bg-subtle:            var(--color-gray-100);
  --bg-muted:             var(--color-gray-200);
  --bg-inverse:           var(--color-near-black);
  --bg-dark:              var(--color-gray-900);
  --bg-accent:            var(--color-amber);

  /* Border */
  --border-subtle:        var(--color-gray-200);
  --border-default:       var(--color-gray-300);
  --border-strong:        var(--color-gray-500);
  --border-accent:        var(--color-amber);

  /* Interactive */
  --interactive-primary:        var(--color-amber);
  --interactive-primary-hover:  var(--color-amber-dark);
  --interactive-primary-active: var(--color-amber-deeper);
  --interactive-secondary:      var(--color-near-black);
  --interactive-secondary-hover: var(--color-gray-900);
}

/* ─── TYPOGRAPHY ─────────────────────────────────────────────────────────── */
:root {
  /* Font families */
  --font-display:   'Barlow Condensed', 'Barlow', sans-serif;
  --font-sans:      'Barlow', sans-serif;
  --font-mono:      'JetBrains Mono', 'Fira Code', monospace;

  /* NOTE: Barlow is a Google Fonts substitution.
     acko uses a custom geometric sans in the wordmark.
     Replace with licensed font files if available. */

  /* Font sizes — modular scale (1.25 ratio) */
  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px */
  --text-md:    1.125rem;   /* 18px */
  --text-lg:    1.25rem;    /* 20px */
  --text-xl:    1.5rem;     /* 24px */
  --text-2xl:   2rem;       /* 32px */
  --text-3xl:   2.5rem;     /* 40px */
  --text-4xl:   3rem;       /* 48px */
  --text-5xl:   3.75rem;    /* 60px */
  --text-6xl:   4.5rem;     /* 72px */

  /* Font weights */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;
  --weight-extrabold: 800;
  --weight-black:   900;

  /* Line heights */
  --leading-tight:    1.1;
  --leading-snug:     1.3;
  --leading-normal:   1.5;
  --leading-relaxed:  1.65;
  --leading-loose:    1.8;

  /* Letter spacing */
  --tracking-tight:   -0.03em;
  --tracking-normal:   0em;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.08em;
  --tracking-widest:   0.14em;
}

/* ─── SEMANTIC TYPE ROLES ────────────────────────────────────────────────── */

/* Display — hero headlines, section titles */
.display-xl {
  font-family: var(--font-display);
  font-size: var(--text-6xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
  text-wrap: pretty;
}

.display-lg {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
  text-wrap: pretty;
}

/* Headings */
h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
  text-wrap: pretty;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
  text-wrap: pretty;
}

h3, .h3 {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--fg-primary);
  text-wrap: pretty;
}

h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  color: var(--fg-primary);
}

h5, .h5 {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  color: var(--fg-primary);
}

h6, .h6 {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  color: var(--fg-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
}

/* Body copy */
p, .body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--fg-secondary);
  text-wrap: pretty;
}

.body-lg {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--fg-secondary);
  text-wrap: pretty;
}

.body-sm {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--fg-tertiary);
}

/* Labels & UI */
.label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-wide);
  color: var(--fg-primary);
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-amber-dark);
}

/* Code */
code, .code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background: var(--bg-subtle);
  padding: 0.15em 0.4em;
  border-radius: 3px;
}

/* ─── SPACING SCALE ──────────────────────────────────────────────────────── */
:root {
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* Section vertical rhythm */
  --section-padding-y: var(--space-20);
  --container-max:     1200px;
  --container-padding: var(--space-6);
}

/* ─── BORDER RADII ───────────────────────────────────────────────────────── */
:root {
  --radius-none:   0px;
  --radius-sm:     4px;
  --radius-md:     6px;
  --radius-lg:     8px;
  --radius-xl:     12px;
  --radius-2xl:    16px;
  --radius-full:   9999px;

  /* Component defaults */
  --radius-button: var(--radius-sm);
  --radius-card:   var(--radius-lg);
  --radius-input:  var(--radius-sm);
  --radius-badge:  var(--radius-full);
  --radius-image:  var(--radius-md);
}

/* ─── SHADOWS ────────────────────────────────────────────────────────────── */
:root {
  --shadow-xs:  0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md:  0 4px 16px rgba(0, 0, 0, 0.10);
  --shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.12);
  --shadow-xl:  0 16px 48px rgba(0, 0, 0, 0.14);

  /* Colored accent shadow */
  --shadow-amber: 0 4px 20px rgba(245, 166, 35, 0.35);

  /* Component defaults */
  --shadow-card:   var(--shadow-sm);
  --shadow-button: var(--shadow-xs);
  --shadow-modal:  var(--shadow-xl);
  --shadow-nav:    0 2px 12px rgba(0, 0, 0, 0.08);
}

/* ─── TRANSITIONS ────────────────────────────────────────────────────────── */
:root {
  --transition-fast:   150ms ease;
  --transition-base:   200ms ease;
  --transition-slow:   300ms ease;
  --transition-slower: 500ms ease;
}

/* ─── ELEVATION / Z-INDEX ────────────────────────────────────────────────── */
:root {
  --z-base:    0;
  --z-raised:  10;
  --z-dropdown: 100;
  --z-sticky:  200;
  --z-overlay: 300;
  --z-modal:   400;
  --z-toast:   500;
}

/* ─── UTILITY: Container ─────────────────────────────────────────────────── */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* ================== KOMPONENTEN-STYLES ==================== */
*, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    font-family: var(--font-sans);
    color: var(--fg-primary);
    background: var(--bg-base);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
  }
  button { font-family: inherit; }
  input, select, textarea { font-family: inherit; }

  /* ─── Page shell ────────────────────────────────────────────── */
  .page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--bg-base);
    border-bottom: 1px solid var(--border-subtle);
    padding: 14px var(--space-8);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
  }
  .topbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--fg-primary);
  }
  .topbar-brand img { height: 28px; width: auto; display: block; }
  .topbar-brand-meta {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-tertiary);
    border-left: 1px solid var(--border-subtle);
    padding-left: 12px;
  }
  .topbar-actions {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    font-size: 13px;
    color: var(--fg-secondary);
  }
  .topbar-phone {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--radius-full);
    background: var(--color-near-black);
    color: var(--fg-inverse);
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    letter-spacing: 0.01em;
  }
  .topbar-phone:hover { background: var(--color-gray-900); }

  /* ─── Main grid ────────────────────────────────────────────── */
  .main {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr minmax(340px, 400px);
    gap: 0;
    max-width: 1320px;
    width: 100%;
    margin: 0 auto;
    padding: var(--space-10) var(--space-8) var(--space-16);
    align-items: start;
  }
  .main.no-panel { grid-template-columns: 1fr; max-width: 880px; }

  /* ─── Wizard column ────────────────────────────────────────── */
  .wizard {
    padding-right: var(--space-12);
    min-width: 0;
  }
  .main.no-panel .wizard { padding-right: 0; }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-accent);
    margin-bottom: 12px;
  }
  .eyebrow::before {
    content: '';
    width: 20px;
    height: 2px;
    background: var(--color-amber);
  }
  .wizard-title {
    font-family: var(--font-display);
    font-size: 44px;
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.015em;
    color: var(--fg-primary);
    margin: 0 0 10px;
    text-wrap: pretty;
  }
  .wizard-lede {
    font-size: 16px;
    color: var(--fg-secondary);
    line-height: 1.6;
    max-width: 60ch;
    margin: 0 0 32px;
  }

  /* ─── Progress ──────────────────────────────────────────────── */
  .progress {
    margin: 24px 0 36px;
  }
  .progress-track {
    height: 3px;
    background: var(--color-gray-200);
    border-radius: 9999px;
    overflow: hidden;
    margin-bottom: 14px;
  }
  .progress-fill {
    height: 100%;
    background: var(--color-amber);
    transition: width 400ms cubic-bezier(.2,.7,.2,1);
    border-radius: 9999px;
  }
  .progress-steps {
    display: flex;
    gap: var(--space-6);
    flex-wrap: wrap;
  }
  .progress-step {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--fg-tertiary);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: color 200ms;
  }
  .progress-step .step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 9999px;
    background: var(--color-gray-100);
    color: var(--fg-tertiary);
    font-size: 11px;
    font-weight: 800;
    font-family: var(--font-display);
    transition: all 200ms;
  }
  .progress-step.active { color: var(--fg-primary); }
  .progress-step.active .step-num { background: var(--color-near-black); color: #fff; }
  .progress-step.done .step-num {
    background: var(--color-amber);
    color: var(--color-near-black);
  }
  .progress-step.done { color: var(--fg-primary); }
  .progress-step.upcoming { cursor: default; }
  .progress-step:hover:not(.upcoming) .step-num { transform: scale(1.06); }

  /* ─── Service cards (Step 1) ───────────────────────────────── */
  .service-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .service-card {
    position: relative;
    text-align: left;
    background: var(--bg-base);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 22px 22px 20px;
    cursor: pointer;
    transition: all 200ms;
    overflow: hidden;
    font-family: inherit;
  }
  .service-card:hover {
    border-color: var(--color-near-black);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
  }
  .service-card.selected {
    border-color: var(--color-near-black);
    background: var(--color-near-black);
    color: #fff;
  }
  .service-card.selected .sc-desc { color: rgba(255,255,255,0.7); }
  .service-card.selected .sc-icon { background: var(--color-amber); color: var(--color-near-black); }
  .service-card.selected::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--color-amber);
  }
  .sc-icon {
    width: 44px; height: 44px;
    border-radius: var(--radius-md);
    background: #FFF3DC;
    color: var(--color-amber-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    transition: all 200ms;
  }
  .sc-icon svg { width: 22px; height: 22px; }
  .sc-title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.005em;
    margin: 0 0 6px;
    color: var(--fg-primary);
    transition: color 200ms;
  }
  .service-card:hover .sc-title { color: var(--color-amber-dark); }
  .service-card.selected .sc-title,
  .service-card.selected:hover .sc-title { color: #fff; }
  .sc-desc {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--fg-secondary);
    margin: 0;
  }
  .sc-check {
    position: absolute;
    top: 18px; right: 18px;
    width: 22px; height: 22px;
    border-radius: 9999px;
    background: var(--color-amber);
    color: var(--color-near-black);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 900;
    opacity: 0;
    transform: scale(0.6);
    transition: all 180ms;
  }
  .service-card.selected .sc-check {
    opacity: 1;
    transform: scale(1);
  }

  /* ─── Form (Step 2) ────────────────────────────────────────── */
  .field-group {
    display: grid;
    gap: 28px;
  }
  .field {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .field-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fg-tertiary);
  }
  .field-label .required { color: var(--color-amber-dark); margin-left: 3px; }
  .field-hint {
    font-size: 12.5px;
    color: var(--fg-tertiary);
    margin-top: -2px;
  }
  .input-line, .input-select {
    width: 100%;
    padding: 12px 0;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    color: var(--fg-primary);
    background: transparent;
    border: none;
    border-bottom: 1.5px solid var(--border-subtle);
    outline: none;
    transition: border-color 200ms;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 0;
  }
  .input-line::placeholder { color: var(--color-gray-300); }
  .input-line:focus, .input-select:focus { border-bottom-color: var(--color-amber); }

  .select-wrap { position: relative; }
  .select-wrap::after {
    content: '';
    position: absolute;
    right: 4px; top: 50%;
    transform: translateY(-30%) rotate(45deg);
    width: 8px; height: 8px;
    border-right: 2px solid var(--fg-tertiary);
    border-bottom: 2px solid var(--fg-tertiary);
    pointer-events: none;
  }

  /* Range slider for m² */
  .range-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 6px;
  }
  .range-value {
    font-family: var(--font-display);
    font-size: 38px;
    font-weight: 800;
    color: var(--fg-primary);
    line-height: 1;
    letter-spacing: -0.01em;
  }
  .range-unit {
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 600;
    color: var(--fg-tertiary);
  }
  .range-input {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    background: var(--color-gray-200);
    border-radius: 9999px;
    outline: none;
    margin: 8px 0 4px;
  }
  .range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px; height: 22px;
    border-radius: 9999px;
    background: var(--color-amber);
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(245,166,35,0.5);
    cursor: pointer;
    transition: transform 150ms;
  }
  .range-input::-webkit-slider-thumb:hover { transform: scale(1.15); }
  .range-input::-moz-range-thumb {
    width: 22px; height: 22px;
    border-radius: 9999px;
    background: var(--color-amber);
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(245,166,35,0.5);
    cursor: pointer;
  }
  .range-ticks {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--fg-tertiary);
    margin-top: 4px;
  }

  /* Chip toggles */
  .chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 9999px;
    border: 1.5px solid var(--border-subtle);
    background: var(--bg-base);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--fg-secondary);
    cursor: pointer;
    transition: all 180ms;
    user-select: none;
  }
  .chip:hover { border-color: var(--color-near-black); color: var(--fg-primary); }
  .chip.selected {
    background: var(--color-near-black);
    border-color: var(--color-near-black);
    color: #fff;
  }
  .chip.selected .chip-dot {
    background: var(--color-amber);
  }
  .chip-dot {
    width: 8px; height: 8px;
    border-radius: 9999px;
    background: var(--color-gray-300);
    transition: background 180ms;
  }

  /* Two-col layout */
  .two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
  @media (max-width: 640px) {
    .two-col { grid-template-columns: 1fr; gap: 24px; }
  }

  /* Soiling levels (visual) */
  .level-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .level-card {
    background: var(--bg-base);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 16px 14px;
    cursor: pointer;
    transition: all 180ms;
    text-align: left;
    font-family: inherit;
  }
  .level-card:hover { border-color: var(--color-near-black); }
  .level-card.selected {
    border-color: var(--color-near-black);
    background: var(--color-near-black);
    color: #fff;
  }
  .level-card.selected .level-meta { color: rgba(255,255,255,0.55); }
  .level-bars {
    display: flex;
    gap: 3px;
    margin-bottom: 10px;
    align-items: flex-end;
    height: 16px;
  }
  .level-bar {
    width: 6px;
    background: var(--color-gray-300);
    border-radius: 2px;
    transition: all 180ms;
  }
  .level-card[data-l="1"] .level-bar:nth-child(1) { height: 6px; background: var(--color-amber); }
  .level-card[data-l="1"] .level-bar:nth-child(2) { height: 11px; }
  .level-card[data-l="1"] .level-bar:nth-child(3) { height: 16px; }
  .level-card[data-l="2"] .level-bar:nth-child(1) { height: 6px; background: var(--color-amber); }
  .level-card[data-l="2"] .level-bar:nth-child(2) { height: 11px; background: var(--color-amber); }
  .level-card[data-l="2"] .level-bar:nth-child(3) { height: 16px; }
  .level-card[data-l="3"] .level-bar:nth-child(1) { height: 6px; background: var(--color-amber); }
  .level-card[data-l="3"] .level-bar:nth-child(2) { height: 11px; background: var(--color-amber); }
  .level-card[data-l="3"] .level-bar:nth-child(3) { height: 16px; background: var(--color-amber); }
  .level-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 2px;
  }
  .level-meta {
    font-size: 12px;
    color: var(--fg-tertiary);
    line-height: 1.4;
  }

  /* Textarea */
  .textarea-line {
    width: 100%;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 15px;
    color: var(--fg-primary);
    background: var(--bg-subtle);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    outline: none;
    resize: vertical;
    min-height: 90px;
    transition: border-color 200ms;
  }
  .textarea-line:focus { border-color: var(--color-amber); background: #fff; }

  /* Checkbox */
  .checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
  }
  .checkbox-row input {
    appearance: none;
    -webkit-appearance: none;
    width: 18px; height: 18px;
    border: 1.5px solid var(--border-default);
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    margin: 2px 0 0;
    flex-shrink: 0;
    position: relative;
    transition: all 180ms;
  }
  .checkbox-row input:checked {
    background: var(--color-amber);
    border-color: var(--color-amber);
  }
  .checkbox-row input:checked::after {
    content: '';
    position: absolute;
    left: 5px; top: 1px;
    width: 5px; height: 10px;
    border-right: 2px solid var(--color-near-black);
    border-bottom: 2px solid var(--color-near-black);
    transform: rotate(45deg);
  }
  .checkbox-text {
    font-size: 13px;
    color: var(--fg-secondary);
    line-height: 1.5;
  }
  .checkbox-text a { color: var(--fg-primary); text-decoration: underline; }

  /* ─── Footer / Nav ─────────────────────────────────────────── */
  .wizard-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 40px;
    padding-top: 28px;
    border-top: 1px solid var(--border-subtle);
  }
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 28px;
    border-radius: 9999px;
    border: none;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.01em;
    transition: all 200ms;
  }
  .btn-primary {
    background: var(--color-amber);
    color: var(--color-near-black);
  }
  .btn-primary:hover {
    background: var(--color-amber-dark);
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(245,166,35,0.35);
  }
  .btn-primary:disabled {
    background: var(--color-gray-200);
    color: var(--color-gray-500);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
  }
  .btn-ghost {
    background: transparent;
    color: var(--fg-secondary);
    padding: 13px 18px;
  }
  .btn-ghost:hover { color: var(--fg-primary); }
  .btn-chev {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 17px;
    line-height: 0.8;
    letter-spacing: -0.05em;
  }

  /* ─── Live Price Panel ─────────────────────────────────────── */
  .panel {
    position: sticky;
    top: 90px;
    background: var(--color-near-black);
    color: #fff;
    border-radius: var(--radius-xl);
    padding: 28px 26px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
  }
  .panel::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--color-amber);
  }
  .panel-eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-amber);
    margin-bottom: 10px;
  }
  .panel-title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 22px;
    line-height: 1.15;
  }
  .panel-price-wrap {
    background: rgba(255,255,255,0.04);
    border-radius: var(--radius-md);
    padding: 18px 18px 16px;
    margin-bottom: 22px;
    border: 1px solid rgba(255,255,255,0.06);
  }
  .panel-price-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    margin-bottom: 8px;
  }
  .panel-price {
    font-family: var(--font-display);
    font-size: 38px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.015em;
    color: #fff;
    display: flex;
    align-items: baseline;
    gap: 8px;
  }
  .panel-price .currency { font-size: 24px; color: var(--color-amber); font-weight: 700; }
  .panel-price .unit { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.55); letter-spacing: 0; margin-left: 4px; }
  .panel-price-range {
    font-size: 12.5px;
    color: rgba(255,255,255,0.55);
    margin-top: 6px;
    letter-spacing: 0.01em;
  }
  .panel-price-placeholder {
    font-size: 14px;
    color: rgba(255,255,255,0.5);
    line-height: 1.5;
  }

  .panel-list {
    display: grid;
    gap: 11px;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
  }
  .panel-list li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13.5px;
    color: rgba(255,255,255,0.82);
  }
  .panel-list li span:first-child {
    color: rgba(255,255,255,0.5);
    font-weight: 500;
  }
  .panel-list li span:last-child {
    font-weight: 700;
    color: #fff;
    text-align: right;
  }
  .panel-list li.empty span:last-child { color: rgba(255,255,255,0.3); font-weight: 400; }

  .panel-trust {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 18px;
    display: grid;
    gap: 11px;
  }
  .trust-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12.5px;
    color: rgba(255,255,255,0.7);
    line-height: 1.45;
  }
  .trust-chev {
    color: var(--color-amber);
    font-weight: 900;
    font-size: 13px;
    line-height: 1.4;
    letter-spacing: -0.1em;
    flex-shrink: 0;
  }

  /* ─── Success state ────────────────────────────────────────── */
  .success {
    display: grid;
    gap: 22px;
    max-width: 640px;
  }
  .success-icon {
    width: 64px; height: 64px;
    border-radius: 9999px;
    background: var(--color-amber);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-near-black);
  }
  .success-icon svg { width: 30px; height: 30px; }
  .success h2 {
    font-family: var(--font-display);
    font-size: 38px;
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.015em;
    margin: 0;
  }
  .success-lede { font-size: 16px; color: var(--fg-secondary); line-height: 1.6; margin: 0; }
  .success-card {
    background: var(--bg-subtle);
    border-radius: var(--radius-lg);
    padding: 24px 26px;
    border-left: 3px solid var(--color-amber);
  }
  .success-card h3 {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-tertiary);
    margin: 0 0 14px;
  }
  .success-price {
    font-family: var(--font-display);
    font-size: 44px;
    font-weight: 800;
    line-height: 1;
    color: var(--fg-primary);
    letter-spacing: -0.015em;
    display: flex;
    align-items: baseline;
    gap: 10px;
  }
  .success-price .unit { font-size: 14px; color: var(--fg-tertiary); font-weight: 600; }
  .success-note { font-size: 13px; color: var(--fg-tertiary); margin-top: 10px; line-height: 1.5; }
  .success-next {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 8px;
  }
  .next-card {
    background: #fff;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 16px 14px;
  }
  .next-step {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 800;
    color: var(--color-amber-dark);
    line-height: 1;
  }
  .next-title { font-weight: 700; margin: 6px 0 4px; font-size: 14px; }
  .next-body { font-size: 12.5px; color: var(--fg-tertiary); line-height: 1.45; }

  /* ─── Slide animation ──────────────────────────────────────── */
  .slide-in {
    animation: slideIn 380ms cubic-bezier(.2,.7,.2,1) both;
  }
  @keyframes slideIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* ─── Responsive ───────────────────────────────────────────── */
  @media (max-width: 1080px) {
    .main { grid-template-columns: 1fr; }
    .wizard { padding-right: 0; }
    .panel { position: relative; top: 0; }
  }
  @media (max-width: 640px) {
    .topbar { padding: 12px 16px; }
    .main { padding: 24px 16px 48px; }
    .wizard-title { font-size: 32px; }
    .service-grid { grid-template-columns: 1fr; }
    .progress-steps { gap: 12px; }
    .progress-step .step-num { width: 22px; height: 22px; font-size: 10px; }
    .success-next { grid-template-columns: 1fr; }
  }

  /* density override */
  .density-compact .field-group { gap: 22px; }
  .density-compact .wizard-title { font-size: 38px; }
  .density-compact .service-card { padding: 18px 18px 16px; }
  .density-compact .sc-icon { width: 36px; height: 36px; margin-bottom: 10px; }
  .density-compact .sc-title { font-size: 19px; }

  /* dark accent variant */
  .accent-dark .progress-fill { background: var(--color-near-black); }
  .accent-dark .panel-eyebrow,
  .accent-dark .panel-price .currency,
  .accent-dark .trust-chev,
  .accent-dark .next-step,
  .accent-dark .sc-icon { color: var(--color-near-black); }
  .accent-dark .sc-icon { background: var(--color-amber-light); }

  /* ─── Admin trigger (topbar) ───────────────────────────────── */
  .adm-trigger {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: var(--radius-full);
    background: var(--bg-base);
    border: 1.5px solid var(--border-subtle);
    color: var(--fg-secondary);
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: all 180ms;
  }
  .adm-trigger:hover {
    border-color: var(--color-near-black);
    color: var(--fg-primary);
  }
  .adm-trigger svg { display: block; }

  /* ─── Admin drawer ─────────────────────────────────────────── */
  .adm-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(26,26,26,0.42);
    backdrop-filter: blur(2px);
    display: flex;
    justify-content: flex-end;
    animation: admFade 200ms ease both;
  }
  @keyframes admFade { from { opacity: 0; } to { opacity: 1; } }
  .adm-drawer {
    width: 520px;
    max-width: 94vw;
    height: 100%;
    background: var(--bg-base);
    display: flex;
    flex-direction: column;
    box-shadow: -20px 0 60px rgba(0,0,0,0.22);
    animation: admSlide 280ms cubic-bezier(.2,.7,.2,1) both;
  }
  @keyframes admSlide { from { transform: translateX(40px); opacity: .6; } to { transform: translateX(0); opacity: 1; } }

  .adm-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px 18px;
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
  }
  .adm-eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-accent);
    margin-bottom: 6px;
  }
  .adm-title {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--fg-primary);
  }
  .adm-close {
    width: 34px; height: 34px;
    border-radius: 9999px;
    border: 1.5px solid var(--border-subtle);
    background: var(--bg-base);
    color: var(--fg-secondary);
    font-size: 14px;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 160ms;
  }
  .adm-close:hover { background: var(--color-near-black); color: #fff; border-color: var(--color-near-black); }

  .adm-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px 28px;
  }
  .adm-intro {
    font-size: 13px;
    line-height: 1.55;
    color: var(--fg-secondary);
    background: var(--bg-subtle);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    margin: 0 0 24px;
  }

  .adm-sec { margin-bottom: 30px; }
  .adm-sec-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-subtle);
  }
  .adm-sec-title {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fg-primary);
    margin: 0;
  }
  .adm-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--fg-tertiary);
    letter-spacing: 0.04em;
  }

  /* Service card */
  .adm-card {
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 14px 14px 12px;
    margin-bottom: 12px;
    background: var(--bg-base);
  }
  .adm-card-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
  }
  .adm-card-foot {
    font-size: 11.5px;
    color: var(--fg-tertiary);
    line-height: 1.4;
    margin-top: 10px;
    padding-left: 2px;
  }

  /* inputs */
  .adm-text {
    width: 100%;
    border: none;
    border-bottom: 1.5px solid transparent;
    background: var(--bg-subtle);
    border-radius: var(--radius-sm);
    padding: 9px 11px;
    font-family: inherit;
    font-size: 14px;
    color: var(--fg-primary);
    outline: none;
    transition: all 160ms;
  }
  .adm-text:focus { background: #fff; border-bottom-color: var(--color-amber); box-shadow: inset 0 0 0 1.5px var(--border-default); }
  .adm-text::placeholder { color: var(--color-gray-400); }
  .adm-strong { font-weight: 700; }
  .adm-sub { font-size: 12.5px; color: var(--fg-secondary); margin-top: 8px; }

  .adm-grid3 {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 10px;
    margin-top: 12px;
    align-items: end;
  }
  .adm-field { display: flex; flex-direction: column; gap: 6px; }
  .adm-field-toggle { align-items: flex-start; }
  .adm-flabel {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-tertiary);
  }

  /* number field */
  .adm-numwrap {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--bg-subtle);
    border-radius: var(--radius-sm);
    padding: 0 11px 0 0;
    box-shadow: inset 0 0 0 1.5px transparent;
    transition: box-shadow 160ms, background 160ms;
  }
  .adm-numwrap:focus-within { background: #fff; box-shadow: inset 0 0 0 1.5px var(--color-amber); }
  .adm-num {
    width: 100%;
    min-width: 0;
    border: none;
    background: transparent;
    padding: 9px 0 9px 11px;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--fg-primary);
    outline: none;
  }
  .adm-num-suffix {
    font-size: 11px;
    font-weight: 600;
    color: var(--fg-tertiary);
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* switch */
  .adm-switch {
    width: 44px; height: 26px;
    border-radius: 9999px;
    border: none;
    background: var(--color-gray-300);
    position: relative;
    cursor: pointer;
    padding: 0;
    transition: background 180ms;
  }
  .adm-switch.on { background: var(--color-amber); }
  .adm-switch-knob {
    position: absolute;
    top: 3px; left: 3px;
    width: 20px; height: 20px;
    border-radius: 9999px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    transition: transform 180ms cubic-bezier(.2,.7,.2,1);
  }
  .adm-switch.on .adm-switch-knob { transform: translateX(18px); }

  /* generic row (turnus / range) */
  .adm-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
  }
  .adm-row > .adm-text { flex: 1; }
  .adm-row-label, .adm-row .adm-row-label {
    flex: 1;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--fg-secondary);
  }
  .adm-row-soil { align-items: flex-start; }
  .adm-soil-text { flex: 1; display: flex; flex-direction: column; gap: 6px; }

  .adm-del {
    width: 30px; height: 30px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border-subtle);
    background: var(--bg-base);
    color: var(--fg-tertiary);
    font-size: 12px;
    cursor: pointer;
    transition: all 160ms;
  }
  .adm-del:hover:not(:disabled) { border-color: #D64545; color: #D64545; background: #FDECEC; }
  .adm-del:disabled { opacity: 0.3; cursor: not-allowed; }

  .adm-add {
    width: 100%;
    margin-top: 6px;
    padding: 11px;
    border-radius: var(--radius-md);
    border: 1.5px dashed var(--border-default);
    background: var(--bg-base);
    color: var(--fg-secondary);
    font-family: inherit;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: all 160ms;
  }
  .adm-add:hover { border-color: var(--color-amber); color: var(--color-amber-dark); background: #FFFaf0; }

  .adm-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-subtle);
    flex-shrink: 0;
    background: var(--bg-base);
  }
  .adm-reset {
    background: transparent;
    border: none;
    color: var(--fg-tertiary);
    font-family: inherit;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    padding: 10px 4px;
  }
  .adm-reset:hover { color: #D64545; }
  .adm-done {
    padding: 12px 30px;
    border-radius: 9999px;
    border: none;
    background: var(--color-near-black);
    color: #fff;
    font-family: inherit;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: all 180ms;
  }
  .adm-done:hover { background: var(--color-amber); color: var(--color-near-black); }

  @media (max-width: 560px) {
    .adm-grid3 { grid-template-columns: 1fr 1fr; }
    .adm-field-toggle { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
  }

  /* Loader hidden by default */
  .submitting { opacity: 0.6; pointer-events: none; }

/* ─── acko Kalkulator · Fehler-Banner (Produktion) ──────────────── */
.calc-error{
  background:#FDECEC;border:1.5px solid #E04B4B;border-radius:var(--radius-md);
  padding:14px 16px;margin:0 0 18px;font-size:14px;line-height:1.5;color:#7A1F1F;
}
.calc-error a{color:#B11; font-weight:700; text-decoration:underline;}
.calc-error-detail{display:block;margin-top:6px;font-size:12px;color:#9A4A4A;opacity:.8;}

/* ============================================================
   acko Kalkulator · Theme-Overrides + Breite  (am Dateiende)
   Höhere Spezifität (#acko-calc) + !important, damit Theme/Elementor
   die acko-Farben/Hover nicht überschreibt (das war das Pink).
   ============================================================ */

/* — Breite: 85% der Bildschirmbreite, zentriert (Wert hier anpassen) — */
#acko-calc .main          { max-width: 85% !important; }
#acko-calc .main.no-panel { max-width: 880px  !important; }  /* Danke-Screen schmaler */

/* — Basiszustand der Karten/Chips/Level — */
#acko-calc .service-card,
#acko-calc .chip,
#acko-calc .level-card {
  background: var(--bg-base) !important;
  color: var(--fg-primary) !important;
  border-color: var(--border-subtle) !important;
}

/* — HOVER: weißer Grund, schwarzer Rahmen, Titel amber (Original) — */
#acko-calc .service-card:hover,
#acko-calc .chip:hover,
#acko-calc .level-card:hover {
  background: var(--bg-base) !important;
  border-color: var(--color-near-black) !important;
}
#acko-calc .chip:hover { color: var(--fg-primary) !important; }
#acko-calc .service-card:hover .sc-title { color: var(--color-amber-dark) !important; }

/* — AUSGEWÄHLT: acko-Schwarz mit Amber-Akzent — */
#acko-calc .service-card.selected,
#acko-calc .chip.selected,
#acko-calc .level-card.selected {
  background: var(--color-near-black) !important;
  border-color: var(--color-near-black) !important;
  color: #fff !important;
}
#acko-calc .service-card.selected .sc-title { color: #fff !important; }
#acko-calc .service-card.selected .sc-desc  { color: rgba(255,255,255,0.7) !important; }
#acko-calc .service-card.selected .sc-icon  { background: var(--color-amber) !important; color: var(--color-near-black) !important; }
#acko-calc .chip.selected .chip-dot         { background: var(--color-amber) !important; }

/* — Primär-Button (Weiter / Angebot anfordern) — */
#acko-calc .btn-primary:not(:disabled)       { background: var(--color-amber) !important; color: var(--color-near-black) !important; }
#acko-calc .btn-primary:not(:disabled):hover { background: var(--color-amber-dark) !important; }

/* ============================================================
   acko Kalkulator · Schönheits-Durchgang (Theme-Overrides II)
   ============================================================ */

/* — Fortschritts-Schritte: Theme-Button-Pink raus, acko wiederherstellen — */
#acko-calc .progress-step {
  background: none !important;
  border: 0 !important;
  color: var(--fg-tertiary) !important;
  box-shadow: none !important;
}
#acko-calc .progress-step.active,
#acko-calc .progress-step.done { color: var(--fg-primary) !important; }
#acko-calc .progress-step .step-num {
  background: var(--color-gray-100) !important;
  color: var(--fg-tertiary) !important;
}
#acko-calc .progress-step.active .step-num {
  background: var(--color-near-black) !important;
  color: #fff !important;
}
#acko-calc .progress-step.done .step-num {
  background: var(--color-amber) !important;
  color: var(--color-near-black) !important;
}

/* — Logo in Topbar: Theme-Animation/Transform unterbinden (Chevron-Verrutschen) — */
#acko-calc .topbar-brand img {
  height: 28px !important;
  width: auto !important;
  max-width: none !important;
  transform: none !important;
  animation: none !important;
  filter: none !important;
  transition: none !important;
}

/* — Ghost-Button (Zurück) — */
#acko-calc .btn-ghost,
#acko-calc .btn-ghost:hover {
  background: transparent !important;
}
#acko-calc .btn-ghost       { color: var(--fg-secondary) !important; }
#acko-calc .btn-ghost:hover { color: var(--fg-primary) !important; }

/* — Admin-Button „Preise" (nur eingeloggt sichtbar) — */
#acko-calc .adm-trigger {
  background: var(--bg-base) !important;
  border: 1.5px solid var(--border-subtle) !important;
  color: var(--fg-secondary) !important;
}
#acko-calc .adm-trigger:hover {
  background: var(--color-near-black) !important;
  color: #fff !important;
  border-color: var(--color-near-black) !important;
}

/* — Topbar/Header ebenfalls auf 85% und bündig mit dem Inhalt darunter —
   (gleiche 85%-Box + gleiches 32px-Padding wie .main → Logo fluchtet mit
   dem Formular links, Telefon mit dem Live-Panel rechts) */
#acko-calc .topbar {
  width: 85% !important;
  max-width: 85% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}