:root {
  --c:       #f07d00;
  --c-acc:   #e63946;
  --border:  rgba(26,26,46,.22);
  --border-h:rgba(26,26,46,.45);
  --bg-act:  rgba(26,26,46,.06);
  --radius:  16px;
}

/* ══════════════════════════════════════════
   Wrapper & Form
═══════════════════════════════════════════ */
.fol-wrap  { }
.fol-form  { max-width: 900px; margin: 0 auto; }

.fol-h3 {
  font: 700 26px/1.2;
  margin: 30px 0 24px !important;
}
.fol-sub {
  font: 500 16px/1.4 ;
  color: rgba(26,26,46,.75);
  margin: -12px 0 24px !important;
}

/* ══════════════════════════════════════════
   Progress
═══════════════════════════════════════════ */
.fol-progress            { margin: 0 0 20px; }
.fol-progress-top        { display:flex; justify-content:space-between; margin-bottom:8px; }
.fol-progress-label,
.fol-progress-percent    { font: 700 13px/1 ; color: rgba(26,26,46,.8); }
.fol-progress-bar        { height:8px; border-radius:999px; background: rgba(26,26,46,.12); overflow:hidden; }
.fol-progress-fill       { height:100%; border-radius:999px; background: var(--c-acc); transition: width .3s ease; }

/* ══════════════════════════════════════════
   Panels
═══════════════════════════════════════════ */
.fol-panel           { display:none; }
.fol-panel.is-active { display:block; }

/* ══════════════════════════════════════════
   Icon Grid / Tiles
═══════════════════════════════════════════ */
.icon-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.icon-grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.icon-grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }

@media (max-width: 768px) {
  .icon-grid,
  .icon-grid--3,
  .icon-grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

.icon-tile          { position:relative; }
.icon-tile input    { position:absolute; opacity:0; pointer-events:none; }
.icon-tile label {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; min-height:150px; padding:16px 12px;
  border: 2px solid var(--border); border-radius: var(--radius); background:#fff;
  cursor:pointer; user-select:none; text-align:center;
  transition: border-color .15s, background .15s, transform .05s;
}
.icon-tile label:hover            { border-color: var(--border-h); }
.icon-tile label:active           { transform: scale(.99); }
.icon-tile input:checked + label  { border-color: var(--c-acc); background: rgba(230,57,70,.05); }
.icon-tile.is-error label         { border-color: #d63638 !important; }

.icon-img   { width:100%; max-width:120px; height:72px; object-fit:contain; display:block; }
.icon-title { font: 600 14px/1.3 ; color:var(--c); }
.icon-sub   { font: 500 12px/1.2 ; color:rgba(26,26,46,.6); display:block; margin-top:2px; }
.icon-qmark {
  width:50px; height:50px; display:grid; place-items:center;
  border-radius:12px; border: 2px solid var(--border);
  color:var(--c); font: 800 26px/1 ;
}
.icon-emoji { font-size:36px; line-height:1; }

/* ══════════════════════════════════════════
   Checkbox-Grid (Teile / Fenster)
═══════════════════════════════════════════ */
.check-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  margin-bottom: 20px;
}
@media (max-width: 600px) {
  .check-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

.check-tile {
  display:flex; align-items:center; gap:10px;
  padding:12px 14px;
  border: 2px solid var(--border); border-radius:12px;
  cursor:pointer; user-select:none;
  transition: border-color .15s, background .15s;
  font: 500 14px/1.2 ; color: var(--c);
}
.check-tile:hover                          { border-color: var(--border-h); }
.check-tile input:checked ~ .check-label  { color: var(--c-acc); }
.check-tile:has(input:checked)            { border-color: var(--c-acc); background: rgba(230,57,70,.05); }
.check-tile input { accent-color: var(--c-acc); flex-shrink:0; }
.check-label      { flex:1; }

/* ══════════════════════════════════════════
   KIT-Grid
═══════════════════════════════════════════ */
.kit-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
  margin: 8px 0 20px;
}
@media (max-width: 720px) {
  .kit-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

.kit-tile {
  display:flex; flex-direction:column; gap:6px;
  padding:16px 14px;
  border: 2px solid var(--border); border-radius:14px;
  cursor:pointer; user-select:none;
  transition: border-color .15s, background .15s;
}
.kit-tile:hover                      { border-color: var(--border-h); }
.kit-tile:has(input:checked)         { border-color: var(--c-acc); background: rgba(230,57,70,.05); }
.kit-tile input                      { display:none; }
.kit-name  { font: 800 18px/1 ; color: var(--c); }
.kit-desc  { font: 500 13px/1.3 ; color:rgba(26,26,46,.7); flex:1; }
.kit-price { font: 700 15px/1 ; color: var(--c-acc); margin-top:auto; padding-top:8px; }

/* ══════════════════════════════════════════
   Zusammenfassung
═══════════════════════════════════════════ */
.fol-summary {
  background: rgba(26,26,46,.04);
  border: 2px solid var(--border);
  border-radius: 14px;
  padding: 20px 24px;
  margin: 0 0 20px;
}
.fol-summary-table { width:100%; border-collapse:collapse; }
.fol-summary-table tr + tr td { border-top:1px solid rgba(26,26,46,.1); }
.fol-summary-table td { padding: 10px 4px; font: 500 15px/1.3 ; }
.sum-key { color:rgba(26,26,46,.6); width:44%; }
.sum-val { color:var(--c); font-weight:700; }
.sum-val:last-child { color: var(--c-acc); }

/* Preiszeile hervorheben */
.fol-summary-table tr:last-child .sum-val { font-size:18px; color: var(--c-acc); }

/* ══════════════════════════════════════════
   Felder / Grid
═══════════════════════════════════════════ */
.fol-grid {
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}
@media (max-width:600px) { .fol-grid { grid-template-columns:1fr; } }

.fol-field label {
  display:block;
  font: 600 14px/1.2 ; color:var(--c);
  margin:0 0 6px;
}
.fol-field input,
.fol-field textarea,
.fol-field select {
  width:100%; padding:12px 14px;
  border: 2px solid rgba(26,26,46,.18); border-radius:10px;
  font: 500 15px/1.2 ; color:var(--c);
  background:#fff; outline:none;
  transition: border-color .15s;
}
.fol-field input:focus,
.fol-field textarea:focus   { border-color: var(--border-h); }
.fol-field textarea         { min-height:110px; resize:vertical; }

.fol-field--marke { margin-top:16px; }

.fol-field-error input,
.fol-field-error textarea   { border-color: #d63638 !important; background: rgba(214,54,56,.04); }

/* Pill-Checkboxen */
.fol-radios { display:flex; flex-wrap:wrap; gap:10px; }
.fol-pill {
  display:inline-flex; align-items:center; gap:8px;
  border: 2px solid rgba(26,26,46,.18); border-radius:999px;
  padding:10px 14px; cursor:pointer; user-select:none;
  font: 600 14px/1 ; color:var(--c);
  transition: border-color .15s;
}
.fol-pill:has(input:checked) { border-color: var(--c-acc); }
.fol-pill input { accent-color: var(--c-acc); }

/* DSGVO */
.fol-dsgvo {
  display:flex; align-items:flex-start; gap:10px;
  font: 500 14px/1.4 ; color:var(--c); cursor:pointer;
}
.fol-dsgvo input      { accent-color: var(--c-acc); margin-top:3px; flex-shrink:0; }
.fol-dsgvo.is-error   { outline:2px solid #d63638; padding:6px 8px; border-radius:8px; }
.fol-dsgvo a          { color: var(--c-acc); }

/* ══════════════════════════════════════════
   Upload
═══════════════════════════════════════════ */
.fol-upload-area {
  position:relative;
  border: 2px dashed var(--border); border-radius:14px;
  padding:28px 20px; text-align:center;
  cursor:pointer; transition: border-color .15s, background .15s;
  background:#fff;
}
.fol-upload-area:hover,
.fol-upload-area.is-drag  { border-color: var(--c-acc); background:rgba(230,57,70,.04); }
.fol-upload-icon          { font-size:28px; margin-bottom:8px; }
.fol-upload-text          { font: 600 15px/1.3 ; color:var(--c); }
.fol-upload-link          { color: var(--c-acc); text-decoration:underline; }
.fol-upload-hint          { font: 500 12px/1.3 ; color:rgba(26,26,46,.55); margin-top:4px; }
.fol-file-input           { position:absolute; inset:0; opacity:0; cursor:pointer; }

.fol-upload-list  { margin-top:10px; display:flex; flex-direction:column; gap:6px; }
.fol-upload-item  {
  display:flex; justify-content:space-between;
  padding:8px 12px; border-radius:8px; background:rgba(26,26,46,.05);
  font: 500 13px/1.2 ; color:var(--c);
}
.fol-upload-size  { color:rgba(26,26,46,.5); }

/* ══════════════════════════════════════════
   Buttons / Actions
═══════════════════════════════════════════ */
.fol-actions {
  display:flex; justify-content:space-between; gap:12px; margin-top:20px;
}
.fol-btn {
  appearance:none; border:none; background: var(--c); color:#fff;
  border-radius:8px; padding:15px 28px; cursor:pointer;
  font: 700 15px/1 ;
  transition: opacity .15s;
}
.fol-btn:hover        { opacity:.88; }
.fol-btn.secondary    { background:transparent; color:var(--c); border:2px solid var(--border); padding:13px 26px; }
.fol-btn:disabled     { opacity:.5; cursor:not-allowed; }

/* Submit Spinner */
.fol-submit           { position:relative; overflow:hidden; }
.fol-btn-spinner {
  width:18px; height:18px; border-radius:50%;
  border: 2px solid rgba(255,255,255,.35); border-top-color:#fff;
  animation: fol-spin .7s linear infinite;
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  opacity:0;
}
.fol-submit.is-loading .fol-btn-label   { opacity:0; }
.fol-submit.is-loading .fol-btn-spinner { opacity:1; }
@keyframes fol-spin { to { transform:translate(-50%,-50%) rotate(360deg); } }

/* ══════════════════════════════════════════
   Fehlerbox
═══════════════════════════════════════════ */
.fol-error {
  margin-top:12px; padding:12px 14px;
  border: 2px solid rgba(200,0,0,.22); background:rgba(200,0,0,.05);
  color:#7a0010; border-radius:12px; display:none;
  font: 600 14px/1.3 ;
}

/* ══════════════════════════════════════════
   Honeypot
═══════════════════════════════════════════ */
.fol-hp {
  position:absolute !important; left:-9999px !important;
  width:1px !important; height:1px !important; opacity:0 !important;
}

/* ══════════════════════════════════════════
   Skeleton / Success Overlay
═══════════════════════════════════════════ */
.fol-skeleton {
  position:fixed; inset:0;
  background:rgba(255,255,255,.92); backdrop-filter:blur(3px);
  z-index:9999; display:none; align-items:center; justify-content:center; padding:20px;
}
.fol-skeleton.is-active { display:flex; }

.fol-skeleton-card {
  width:min(720px,100%); border-radius:18px; padding:24px;
  border: 2px solid rgba(26,26,46,.12); background:#fff;
  box-shadow:0 12px 30px rgba(0,0,0,.07);
}

.fol-skeleton-status {
  text-align:center; margin-bottom:18px;
  font: 700 15px/1.3 ; color:rgba(26,26,46,.8);
}
.fol-skeleton.is-success .fol-skeleton-status { display:none; }

.sk-line {
  height:18px; border-radius:12px; margin-bottom:14px;
  background: linear-gradient(90deg, rgba(26,26,46,.10) 25%, rgba(26,26,46,.05) 37%, rgba(26,26,46,.10) 63%);
  background-size:400% 100%; animation:sk-shimmer 1.2s ease infinite;
}
.sk-title { height:26px; width:55%; }
.sk-wide  { width:88%; }
@keyframes sk-shimmer { 0%{background-position:100% 0} 100%{background-position:0 0} }

.fol-success           { display:none; text-align:center; padding:12px 6px 4px; }
.fol-skeleton.is-success .sk-line    { display:none; }
.fol-skeleton.is-success .fol-success{ display:block; }

.fol-check {
  width:64px; height:64px; margin:6px auto 12px;
  border-radius:999px; display:grid; place-items:center;
  border: 2px solid rgba(26,26,46,.2);
  color:var(--c-acc); font:900 28px/1 ;
  animation:fol-pop .22s ease-out;
}
@keyframes fol-pop { from{transform:scale(.88);opacity:.2} to{transform:scale(1);opacity:1} }

.fol-success-title { font:800 18px/1.2 ; color:var(--c); }
.fol-success-sub   { margin-top:6px; font:600 14px/1.3 ; color:rgba(26,26,46,.65); }