/* mobilsale24.de — Inserieren (Assistent + Einzelseiten-Formular) */

/* ============ Start-Seite (Einstieg) — KORUNDU ============ */
.ins-start{padding-top:var(--sp-4);padding-bottom:var(--sp-8)}

.ins-hero{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);position:relative;
  background:linear-gradient(135deg,var(--color-brand-500) 0%,var(--color-brand-700) 100%);color:#fff;
  border-radius:var(--radius-xl);padding:var(--sp-7) var(--sp-6);margin-bottom:var(--sp-7);overflow:hidden;
  box-shadow:0 10px 30px -8px rgba(var(--color-primary-rgb),.4)}
.ins-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(460px 240px at 90% -40%,rgba(255,255,255,.18),transparent 70%)}
.ins-hero>*{position:relative;z-index:1}
.ins-hero__badge{display:inline-block;background:rgba(255,255,255,.2);color:#fff;font-size:var(--fs-xs);
  font-weight:var(--fw-semibold);padding:4px 12px;border-radius:var(--radius-pill);margin-bottom:var(--sp-3)}
.ins-hero__title{font-size:var(--fs-2xl,28px);margin:0 0 8px;color:#fff;line-height:1.15}
.ins-hero__sub{margin:0 0 var(--sp-4);opacity:.92;max-width:46ch;line-height:1.5}
.ins-hero__points{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.ins-hero__points li{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);font-weight:var(--fw-medium)}
.ins-hero__points svg{color:#86efac}
.ins-hero__visual{flex-shrink:0;opacity:.35}

.ins-section-title{font-size:var(--fs-lg);margin:0 0 4px}
.ins-section-hint{color:var(--color-text-muted);margin:0 0 var(--sp-4)}

/* Kategori grid (start.php) */
.ins-cat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-3);margin-bottom:var(--sp-7)}
.ins-cat{display:flex;align-items:center;gap:var(--sp-3);text-align:left;width:100%;cursor:pointer;
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);
  padding:var(--sp-4);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.ins-cat:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--color-primary)}
.ins-cat:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
.ins-cat__icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;
  border-radius:var(--radius-md);background:var(--color-primary-soft);color:var(--color-primary)}
.ins-cat__body{flex:1;display:flex;flex-direction:column;gap:2px}
.ins-cat__label{font-weight:var(--fw-semibold);font-size:var(--fs-md)}
.ins-cat__desc{font-size:var(--fs-xs);color:var(--color-text-muted)}
.ins-cat__arrow{color:var(--color-text-disabled);transition:transform var(--dur) var(--ease),color var(--dur) var(--ease)}
.ins-cat:hover .ins-cat__arrow{color:var(--color-primary);transform:translateX(3px)}

/* Nasıl çalışır */
.ins-how{margin-bottom:var(--sp-7)}
.ins-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4);margin-top:var(--sp-4)}
.ins-step{position:relative;background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);padding:var(--sp-5) var(--sp-4);text-align:center}
.ins-step__num{position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  width:26px;height:26px;border-radius:50%;background:var(--color-primary);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:var(--fs-xs);font-weight:var(--fw-bold)}
.ins-step__icon{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;
  border-radius:var(--radius-md);background:var(--color-primary-soft);color:var(--color-primary);margin:var(--sp-2) 0}
.ins-step strong{display:block;margin-bottom:4px}
.ins-step p{margin:0;font-size:var(--fs-sm);color:var(--color-text-muted)}

/* Güven sinyalleri */
.ins-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4);
  background:var(--color-surface-2);border-radius:var(--radius-lg);padding:var(--sp-5);margin-bottom:var(--sp-5)}
.ins-trust__item{display:flex;align-items:flex-start;gap:var(--sp-3)}
.ins-trust__icon{flex-shrink:0;color:var(--color-primary)}
.ins-trust__item strong{display:block;font-size:var(--fs-sm)}
.ins-trust__item span{font-size:var(--fs-xs);color:var(--color-text-muted)}

/* Händler ipucu */
.ins-dealer-hint{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);
  background:var(--color-info-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:var(--fs-sm)}
.ins-dealer-hint svg{color:var(--color-primary);flex-shrink:0}
.ins-dealer-hint .btn{margin-left:auto}

@media (max-width:780px){
  .ins-hero{padding:var(--sp-5) var(--sp-4)}
  .ins-hero__visual{display:none}
  .ins-cat-grid{grid-template-columns:1fr}
  .ins-steps{grid-template-columns:1fr}
  .ins-trust{grid-template-columns:1fr;gap:var(--sp-3)}
  .ins-dealer-hint{flex-wrap:wrap}
  .ins-dealer-hint .btn{margin-left:0;width:100%}
}

/* ============ Schritt-Seite (wizard / step.php) — KORUNDU ============ */
.inserat.section.container{background:transparent;border:none;box-shadow:none;padding:0}
.wizard-body{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);padding:var(--sp-6)}
.inserat-start .category-card--btn{width:100%;cursor:pointer;text-align:center}

.wizard-steps{display:flex;gap:var(--sp-2);margin-bottom:var(--sp-6);flex-wrap:wrap;counter-reset:step}
.wizard-steps__item{display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:var(--radius-pill);background:var(--color-surface-2);color:var(--color-text-muted);font-size:var(--fs-sm)}
.wizard-steps__item.is-active{background:var(--color-primary-soft);color:var(--color-primary);font-weight:var(--fw-semibold)}
.wizard-steps__item.is-done{color:var(--color-success)}
.wizard-steps__num{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:var(--radius-pill);background:var(--color-surface);font-size:var(--fs-xs);font-weight:var(--fw-bold)}
.wizard-steps__item.is-active .wizard-steps__num{background:var(--color-primary);color:#fff}

.wizard-body{padding:var(--sp-6)}
.wizard-title{font-size:var(--fs-xl);margin-bottom:var(--sp-5)}
.wizard-form{display:flex;flex-direction:column;gap:var(--sp-5)}
.wizard-actions{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);margin-top:var(--sp-4)}
.wizard-actions--preview{justify-content:flex-end}

/* Quality Score Widget (step.php) */
.quality-widget{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-5)}
.quality-widget__header{display:flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-sm)}
.quality-widget__title{font-weight:var(--fw-semibold);color:var(--color-text-secondary)}
.quality-widget__bar-wrap{height:6px;background:var(--color-border);border-radius:3px;margin-top:var(--sp-2);overflow:hidden}
.quality-widget__bar{height:100%;border-radius:3px;transition:width .3s ease,background-color .3s ease;width:0}
.price-suggestion{font-size:var(--fs-xs);margin-top:4px;font-weight:var(--fw-medium)}

/* Shared Grids (step.php + compat) */
.form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}
.form-checks{display:flex;flex-wrap:wrap;gap:var(--sp-4)}
.form-fieldset{border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--sp-4)}
.form-fieldset legend{padding:0 var(--sp-2);font-weight:var(--fw-semibold);font-size:var(--fs-sm)}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2)}
.field__row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2)}

/* Dropzone (shared) */
.dropzone{border:2px dashed var(--color-border-strong);border-radius:var(--radius-lg);padding:var(--sp-10);text-align:center;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);cursor:pointer}
.dropzone.is-drag{border-color:var(--color-primary);background:var(--color-primary-soft)}
.dropzone.is-uploading{opacity:.7;pointer-events:none}
.dropzone__error{margin:var(--sp-3) 0 0;padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-sm);background:var(--color-danger-soft,#fdecea);color:var(--color-danger,#dc3545);font-size:var(--fs-sm);text-align:center}
.dropzone__icon{display:inline-flex;color:var(--color-text-muted)}
.dropzone__text{margin:var(--sp-3) 0;color:var(--color-text-secondary)}

.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:var(--sp-3);margin-top:var(--sp-5)}
.photo-item{position:relative;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--color-border);aspect-ratio:4/3;transition:box-shadow var(--dur) var(--ease)}
.photo-item:hover{box-shadow:var(--shadow-md)}
.photo-item img{width:100%;height:100%;object-fit:cover}
.photo-item__badge{position:absolute;left:8px;top:8px;background:var(--color-primary);color:#fff;font-size:var(--fs-2xs);padding:2px 8px;border-radius:var(--radius-pill)}
.photo-item__del{position:absolute;right:6px;top:6px;width:26px;height:26px;border-radius:var(--radius-pill);background:rgba(0,0,0,.6);color:#fff;font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center}
.photo-item__cover{position:absolute;left:6px;top:6px;width:26px;height:26px;border-radius:var(--radius-pill);background:rgba(0,0,0,.5);color:#fff;font-size:14px;line-height:1;opacity:0;transition:opacity var(--dur) var(--ease);display:flex;align-items:center;justify-content:center}
.photo-item:hover .photo-item__cover{opacity:1}
.photo-item__cover:hover{background:var(--color-primary)}
.photo-item[draggable=true]{cursor:grab}

/* Vorschau (step.php) */
.vorschau{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6)}
.vorschau__media img{width:100%;border-radius:var(--radius-md)}
.vorschau__noimg{aspect-ratio:4/3;background:var(--color-surface-2);display:flex;align-items:center;justify-content:center;color:var(--color-text-muted);border-radius:var(--radius-md)}
.vorschau__price{font-size:var(--fs-2xl);font-weight:var(--fw-bold);color:var(--color-primary);margin:var(--sp-2) 0}
.vorschau__specs{display:flex;flex-wrap:wrap;gap:var(--sp-3);color:var(--color-text-secondary);font-size:var(--fs-sm);margin:var(--sp-3) 0}
.vorschau__desc{margin-top:var(--sp-4);color:var(--color-text-secondary);line-height:var(--lh-relaxed)}

@media (max-width:1024px){.form-grid,.feature-grid{grid-template-columns:repeat(2,1fr)}.vorschau{grid-template-columns:1fr}}
@media (max-width:480px){.form-grid,.feature-grid{grid-template-columns:1fr}}

/* Foto-Leitfaden (shared) */
.photo-guide{margin-bottom:var(--sp-4);background:var(--color-primary-soft);border-radius:var(--radius-md);padding:var(--sp-3) var(--sp-4)}
.photo-guide__summary{cursor:pointer;font-weight:var(--fw-semibold);font-size:var(--fs-sm);color:var(--color-primary);display:flex;align-items:center;gap:var(--sp-2)}
.photo-guide__intro{color:var(--color-text-secondary);font-size:var(--fs-sm);margin:var(--sp-3) 0}
.photo-guide__grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--sp-2)}
.photo-guide__item{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm);color:var(--color-text)}
.photo-guide__ico{color:var(--color-primary);flex-shrink:0}
.photo-guide__tip{margin-top:var(--sp-3);font-size:var(--fs-xs);color:var(--color-text-muted)}


/* ═══════════════════════════════════════════════════════════════════════════════
   INSERAT CREATE — Yeni Kurumsal Tasarım Sistemi (.ic-*)
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ---------- Sayfa Kapsayıcı ---------- */
.ic{
  max-width:var(--container-max);
  margin:0 auto;
  padding:var(--sp-4) var(--container-pad) calc(100px + var(--sp-6));
}

/* ---------- HERO ---------- */
.ic-hero{
  position:relative;
  background:linear-gradient(135deg, var(--color-hero-1) 0%, var(--color-hero-2) 55%, var(--color-hero-3) 100%);
  color:#fff;
  border-radius:var(--radius-xl);
  padding:var(--sp-6) var(--sp-8);
  margin-bottom:var(--sp-6);
  overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.ic-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(600px 300px at 85% -20%, rgba(255,255,255,.1), transparent 70%);
}
.ic-hero>*{position:relative;z-index:1}
/* Breadcrumb auf dunklem Hero: vip.css setzt graue Farbe → explizit überschreiben */
.ic-hero .breadcrumb{margin-bottom:var(--sp-4);font-size:var(--fs-xs);color:rgba(255,255,255,.6)}
.ic-hero .breadcrumb a{color:rgba(255,255,255,.82)}
.ic-hero .breadcrumb a:hover{color:#fff;text-decoration:underline;text-underline-offset:2px}
.ic-hero .breadcrumb [aria-current]{color:#fff;font-weight:var(--fw-medium)}

.ic-hero__body{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-6)}
.ic-hero__text{flex:1;min-width:0}
.ic-hero__eyebrow{
  display:inline-block;
  background:rgba(255,255,255,.12);
  color:#fff;
  font-size:var(--fs-2xs);
  font-weight:var(--fw-semibold);
  text-transform:uppercase;
  letter-spacing:var(--ls-wider);
  padding:4px 14px;
  border-radius:var(--radius-pill);
  margin-bottom:var(--sp-3);
}
.ic-hero__title{font-size:var(--fs-2xl);font-weight:var(--fw-bold);letter-spacing:var(--ls-tighter);margin:0 0 var(--sp-2);color:#fff;line-height:var(--lh-tight)}
.ic-hero__lead{margin:0;opacity:.88;max-width:54ch;line-height:var(--lh-normal);font-size:var(--fs-sm)}
.ic-hero__meta{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-4);flex-wrap:wrap}
.ic-hero__meta .chip{background:rgba(255,255,255,.15);color:#fff;border-color:rgba(255,255,255,.2)}
.ic-hero__saved{font-size:var(--fs-xs);opacity:.7;display:inline-flex;align-items:center;gap:4px}
.ic-hero__actions{margin-top:var(--sp-4)}
.ic-hero__actions .btn--secondary{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.25)}
.ic-hero__actions .btn--secondary:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.4)}

/* Ring (SVG canlı yüzde) */
.ic-hero__ring-wrap{
  position:relative;
  flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  width:110px;height:110px;
}
.ic-hero__ring{display:block}
.ic-hero__pct{
  position:absolute;
  font-size:var(--fs-xl);
  font-weight:var(--fw-bold);
  color:#fff;
}

/* ---------- GRID (Main + Sidebar) ---------- */
.ic-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:var(--sp-6);
  align-items:start;
}
.ic-main{min-width:0}

/* ---------- SIDEBAR ---------- */
.ic-side{
  position:sticky;
  top:calc(var(--header-h) + var(--sp-4));
  display:flex;flex-direction:column;gap:var(--sp-4);
}

/* Nav */
.ic-nav__list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:2px}
.ic-nav__link{
  display:flex;align-items:center;gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-3);
  border-radius:var(--radius-sm);
  font-size:var(--fs-sm);
  color:var(--color-text-secondary);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.ic-nav__link:hover{background:var(--color-surface-2);color:var(--color-text)}
.ic-nav__link.is-active{background:var(--color-primary-soft);color:var(--color-primary);font-weight:var(--fw-semibold)}
.ic-nav__dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--color-border-strong);
  flex-shrink:0;
  transition:background var(--dur) var(--ease);
}
.ic-nav__link.is-active .ic-nav__dot{background:var(--color-primary)}
.ic-nav__link.is-done .ic-nav__dot{background:var(--color-success)}

/* Requirements Box */
.ic-req-box{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:var(--sp-4);
}
.ic-req-box__title{
  font-size:var(--fs-sm);font-weight:var(--fw-semibold);
  display:flex;align-items:center;gap:var(--sp-2);
  margin:0 0 var(--sp-3);
  color:var(--color-text);
}
.ic-check-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--sp-2)}
.ic-check-list li{
  display:flex;align-items:center;gap:var(--sp-2);
  font-size:var(--fs-sm);
  color:var(--color-text-muted);
  transition:color var(--dur) var(--ease);
}
.ic-check-list li.is-ok{color:var(--color-success)}
.ic-check-list__ico{
  width:16px;height:16px;border-radius:50%;
  border:2px solid var(--color-border-strong);
  flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.ic-check-list li.is-ok .ic-check-list__ico{
  border-color:var(--color-success);
  background:var(--color-success);
}
.ic-check-list li.is-ok .ic-check-list__ico::after{
  content:"";
  width:6px;height:6px;
  background:#fff;
  border-radius:50%;
}

/* Mini Preview */
.ic-preview{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.ic-preview__img{
  aspect-ratio:16/9;
  background:var(--color-surface-2);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.ic-preview__img img{width:100%;height:100%;object-fit:cover}
.ic-preview__placeholder{color:var(--color-text-disabled)}
.ic-preview__body{padding:var(--sp-3) var(--sp-4)}
.ic-preview__title{display:block;font-size:var(--fs-sm);font-weight:var(--fw-semibold);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ic-preview__price{display:block;font-size:var(--fs-md);font-weight:var(--fw-bold);color:var(--color-primary);margin-bottom:2px}
.ic-preview__specs{font-size:var(--fs-xs);color:var(--color-text-muted)}

/* Hilfe Link */
.ic-help-link{
  display:flex;align-items:center;gap:var(--sp-2);
  font-size:var(--fs-sm);
  color:var(--color-link);
  padding:var(--sp-2) var(--sp-3);
  border-radius:var(--radius-sm);
  transition:background var(--dur) var(--ease);
}
.ic-help-link:hover{background:var(--color-primary-soft)}

/* ---------- CARDS ---------- */
.ic-form{display:flex;flex-direction:column;gap:0}
.ic-card{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-sm);
  padding:var(--sp-6);
  margin-bottom:var(--sp-4);
}
.ic-card__head{
  display:flex;align-items:flex-start;gap:var(--sp-3);
  margin-bottom:var(--sp-5);
  padding-bottom:var(--sp-4);
  border-bottom:1px solid var(--color-divider);
}
.ic-card__num{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:36px;height:36px;
  border-radius:var(--radius-md);
  background:var(--color-primary-soft);
  color:var(--color-primary);
  font-size:var(--fs-sm);
  font-weight:var(--fw-bold);
  font-variant-numeric:tabular-nums;
  flex-shrink:0;
}
.ic-card__title{font-size:var(--fs-lg);font-weight:var(--fw-semibold);margin:0;line-height:var(--lh-tight)}
.ic-card__hint{font-size:var(--fs-sm);color:var(--color-text-muted);margin:2px 0 0}
.ic-card__state{
  margin-left:auto;
  font-size:var(--fs-xs);
  font-weight:var(--fw-medium);
  padding:3px 10px;
  border-radius:var(--radius-pill);
  background:var(--color-surface-2);
  color:var(--color-text-muted);
  white-space:nowrap;
}
.ic-card__state.is-ok{background:var(--color-success-bg);color:var(--color-success)}

/* Meta-Gruppe rechts im Kartenkopf (Status + Zähler nebeneinander) */
.ic-card__meta{margin-left:auto;display:flex;align-items:center;gap:var(--sp-2);flex-shrink:0}
.ic-card__meta .ic-card__state{margin-left:0}
.ic-photos-count{
  font-size:var(--fs-sm);
  font-weight:var(--fw-semibold);
  color:var(--color-primary);
  white-space:nowrap;
}

/* ---------- CATEGORY GRID (radio cards) ---------- */
.ic-cat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:var(--sp-3);
  margin-bottom:var(--sp-5);
}
.ic-cat{
  position:relative;
  display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-4);
  background:var(--color-surface);
  border:2px solid var(--color-border);
  border-radius:var(--radius-lg);
  cursor:pointer;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur) var(--ease);
}
.ic-cat:hover{border-color:var(--color-primary);box-shadow:var(--shadow-sm)}
.ic-cat__input{position:absolute;opacity:0;pointer-events:none}
.ic-cat__input:checked ~ .ic-cat__body{color:var(--color-primary)}
.ic-cat__input:checked ~ .ic-cat__check{opacity:1;transform:scale(1)}
.ic-cat__input:focus-visible ~ .ic-cat__body{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:var(--radius-sm)}
.ic-cat:has(.ic-cat__input:checked){border-color:var(--color-primary);background:var(--color-primary-soft)}
/* Fallback for browsers without :has */
.ic-cat.is-checked{border-color:var(--color-primary);background:var(--color-primary-soft)}
.ic-cat__icon{
  display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;
  border-radius:var(--radius-md);
  background:var(--color-primary-soft);
  color:var(--color-primary);
  flex-shrink:0;
}
.ic-cat__body{display:flex;flex-direction:column;gap:1px;flex:1}
.ic-cat__label{font-weight:var(--fw-semibold);font-size:var(--fs-sm)}
.ic-cat__desc{font-size:var(--fs-xs);color:var(--color-text-muted)}
.ic-cat__check{
  position:absolute;right:12px;top:12px;
  width:22px;height:22px;
  border-radius:50%;
  background:var(--color-primary);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  opacity:0;
  transform:scale(.7);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
}

/* ---------- FIELD GRID ---------- */
.ic-grid-fields{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:var(--sp-4);
}
.ic-field{display:flex;flex-direction:column;gap:var(--sp-1)}
.ic-field__label{font-size:var(--fs-sm);color:var(--color-text-secondary);font-weight:var(--fw-medium)}
.ic-field__row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2)}
.ic-req{color:var(--color-primary);font-weight:var(--fw-bold)}
.ic-field__wrap{position:relative;display:flex;align-items:center}
.ic-field__wrap .input{width:100%}
/* Einheiten-Suffix: Padding nach Textlänge staffeln, damit nichts überlappt */
.ic-field--unit{padding-right:48px !important}
.ic-field--unit-md{padding-right:74px !important}
.ic-field--unit-lg{padding-right:108px !important}
.ic-field__unit{
  position:absolute;right:var(--sp-3);
  font-size:var(--fs-xs);
  color:var(--color-text-muted);
  pointer-events:none;
  white-space:nowrap;
  display:inline-flex;align-items:center;
  max-width:100px;
}
.ic-field__hint{font-size:var(--fs-xs);color:var(--color-text-muted);margin-top:var(--sp-1)}

/* ---------- CHECKBOX TILES ---------- */
.ic-checks{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-4)}
.ic-check-tile{
  position:relative;
  cursor:pointer;
}
.ic-check-tile input[type="checkbox"]{position:absolute;opacity:0;pointer-events:none}
.ic-check-tile__body{
  display:inline-flex;align-items:center;gap:6px;
  padding:var(--sp-2) var(--sp-3);
  border:1px solid var(--color-border);
  border-radius:var(--radius-pill);
  font-size:var(--fs-sm);
  background:var(--color-surface);
  transition:all var(--dur) var(--ease);
}
.ic-check-tile input:checked + .ic-check-tile__body{
  background:var(--color-primary-soft);
  border-color:var(--color-primary);
  color:var(--color-primary);
  font-weight:var(--fw-medium);
}
.ic-check-tile input:focus-visible + .ic-check-tile__body{outline:2px solid var(--color-primary);outline-offset:2px}
/* :has fallback */
.ic-check-tile:has(input:checked) .ic-check-tile__body{
  background:var(--color-primary-soft);border-color:var(--color-primary);color:var(--color-primary);font-weight:var(--fw-medium);
}
.ic-check-tile.is-checked .ic-check-tile__body{
  background:var(--color-primary-soft);border-color:var(--color-primary);color:var(--color-primary);font-weight:var(--fw-medium);
}

/* Smaller tile variant for features */
.ic-check-tile--sm .ic-check-tile__body{padding:6px 10px;font-size:var(--fs-xs)}

/* ---------- SUB-SECTIONS ---------- */
.ic-sub-section{margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--color-divider)}
.ic-sub-section__title{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--color-text-secondary);margin:0 0 var(--sp-3)}

/* ---------- FEATURES (Ausstattung) ---------- */
.ic-feat__toolbar{
  display:flex;align-items:center;gap:var(--sp-4);margin-bottom:var(--sp-4);flex-wrap:wrap;
}
.ic-feat__search-field{flex:1;min-width:200px;max-width:320px}
.ic-feat__count{font-size:var(--fs-sm);color:var(--color-text-muted);font-weight:var(--fw-medium)}
.ic-feat-group{margin-bottom:var(--sp-5)}
.ic-feat-group__head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-2)}
.ic-feat-group__title{font-size:var(--fs-sm);font-weight:var(--fw-semibold);margin:0;color:var(--color-text)}
/* Ausstattung als sauber ausgerichtetes Raster (nicht ragged flex-wrap) */
.ic-feat-group__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:var(--sp-2)}
.ic-feat-group__grid .ic-check-tile__body{width:100%;justify-content:flex-start}
.ic-feat-group__grid .ic-check-tile[hidden]{display:none}
.ic-feat-group[hidden]{display:none}
.ic-muted{color:var(--color-text-muted);font-size:var(--fs-sm)}

/* ---------- DESCRIPTION FOOTER ---------- */
.ic-desc-footer{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-top:var(--sp-2);flex-wrap:wrap}
.ic-desc-footer__chars{font-size:var(--fs-xs);color:var(--color-text-muted);font-variant-numeric:tabular-nums}
.ic-desc-footer__chars.is-low{color:var(--color-warning)}
.ic-desc-footer__chars.is-ok{color:var(--color-success)}
.ic-desc-footer__hint{font-size:var(--fs-xs);color:var(--color-text-muted)}

/* ---------- BOTTOM ACTION BAR ---------- */
.ic-bar{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:var(--z-sticky);
  background:var(--color-surface);
  border-top:1px solid var(--color-border);
  box-shadow:0 -4px 20px rgba(0,0,0,.06);
  padding:var(--sp-3) 0;
  padding-bottom:calc(var(--sp-3) + env(safe-area-inset-bottom));
}
/* Echte Glas-Optik nur, wenn der Browser sie unterstützt */
@supports ((backdrop-filter:blur(12px)) or (-webkit-backdrop-filter:blur(12px))){
  .ic-bar{
    background:color-mix(in srgb, var(--color-surface) 82%, transparent);
    backdrop-filter:blur(14px) saturate(140%);
    -webkit-backdrop-filter:blur(14px) saturate(140%);
  }
}
.ic-bar.is-stuck{box-shadow:0 -6px 28px rgba(0,0,0,.1)}
.ic-bar__inner{
  max-width:var(--container-max);
  margin:0 auto;
  padding:0 var(--container-pad);
  display:flex;
  align-items:center;
  gap:var(--sp-4);
}
.ic-bar__progress{display:flex;align-items:center;gap:var(--sp-3);flex:1;min-width:0}
.ic-bar__track{flex:1;max-width:200px;height:6px;background:var(--color-border);border-radius:3px;overflow:hidden}
.ic-bar__fill{height:100%;border-radius:3px;background:var(--color-primary);transition:width .3s ease}
.ic-bar__pct{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--color-text);font-variant-numeric:tabular-nums;min-width:36px}
.ic-bar__missing{font-size:var(--fs-xs);color:var(--color-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ic-bar__actions{display:flex;gap:var(--sp-3);flex-shrink:0}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1200px){
  .ic-grid{grid-template-columns:minmax(0,1fr) 280px}
}
@media (max-width:1080px){
  .ic-grid{grid-template-columns:1fr;gap:var(--sp-4)}
  /* Sidebar über das Formular ziehen: Navigation + Checkliste zuerst */
  .ic-side{
    position:static;
    order:-1;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:var(--sp-3);
    align-items:start;
  }
  .ic-nav{grid-column:1/-1}
  .ic-nav__list{flex-direction:row;flex-wrap:wrap;gap:var(--sp-1)}
  .ic-nav__link{padding:6px var(--sp-3);border-radius:var(--radius-pill);background:var(--color-surface-2);font-size:var(--fs-xs)}
  .ic-preview{display:none}
  .ic-help-link{align-self:center}
}
@media (max-width:780px){
  .ic-hero{padding:var(--sp-5) var(--sp-4)}
  .ic-hero__body{flex-direction:column;align-items:flex-start}
  .ic-hero__ring-wrap{align-self:flex-end;margin-top:calc(-1 * var(--sp-6));width:80px;height:80px}
  .ic-hero__ring{width:80px;height:80px}
  .ic-hero__pct{font-size:var(--fs-md)}
  .ic-side{grid-template-columns:1fr}
  .ic-cat-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .ic{padding-left:var(--sp-3);padding-right:var(--sp-3)}
  .ic-card{padding:var(--sp-4)}
  .ic-grid-fields{grid-template-columns:1fr}
  .ic-cat-grid{grid-template-columns:1fr}
  .ic-bar__inner{flex-direction:column;align-items:stretch;gap:var(--sp-2)}
  .ic-bar__progress{order:2}
  .ic-bar__actions{order:1;flex-direction:column-reverse}
  .ic-bar__actions .btn{width:100%}
}

/* Mobile: Aktionsleiste über der App-Tabbar, genügend Freiraum darunter */
@media (max-width:1024px){
  .ic{padding-bottom:calc(150px + env(safe-area-inset-bottom))}
  /* Über der Tabbar: Safe-Area steckt bereits im bottom-Offset */
  .ic-bar{bottom:calc(56px + env(safe-area-inset-bottom));padding-bottom:var(--sp-3)}
}
/* Gestapelte Leiste (zwei Buttons übereinander) braucht mehr Freiraum */
@media (max-width:560px){
  .ic{padding-bottom:calc(230px + env(safe-area-inset-bottom))}
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion:reduce){
  .ic-cat,.ic-check-tile__body,.ic-nav__link,.ic-card__state,.photo-item,.photo-item__cover,
  .ic-bar__fill,.ic-hero__ring circle{
    transition:none !important;
  }
}