/* ICEN frontend styles — glass look */
:root {
  --icen-bg: #0f1024;
  --icen-fg: #ffffff;
  --icen-muted: rgba(255,255,255,.65);
  --icen-border: rgba(255,255,255,.18);
  --icen-radius: 20px;
  --icen-green: #34d399;
}
.icen-wrap {
  color: var(--icen-fg);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(120,80,220,.55), transparent 60%),
    radial-gradient(1000px 700px at 100% 10%, rgba(80,180,220,.45), transparent 60%),
    radial-gradient(900px 700px at 50% 110%, rgba(220,90,180,.4), transparent 60%),
    linear-gradient(180deg, #131532, #0a0b1c);
  padding: 48px 20px;
  border-radius: var(--icen-radius);
}
.icen-wrap a { text-decoration: none; }
.icen-glass {
  background: rgba(255,255,255,.08);
  border: 1px solid var(--icen-border);
  border-radius: var(--icen-radius);
  backdrop-filter: blur(24px) saturate(180%);
  padding: 24px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 10px 40px -10px rgba(0,0,0,.5);
}
.icen-glass-strong { background: rgba(255,255,255,.14); }
.icen-hero-head { text-align:center; max-width: 1100px; margin: 0 auto 32px; }
.icen-hero-head h1 { font-size: clamp(2rem, 5vw, 3.75rem); font-weight: 600; margin: 12px 0 0; letter-spacing: -0.02em; }
.icen-badge { display:inline-flex; align-items:center; gap:8px; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid var(--icen-border); font-size: .78rem; color: rgba(255,255,255,.8); }
.icen-dot { width: 6px; height: 6px; border-radius: 999px; background: #34d399; display:inline-block; }
.icen-hero { display:grid; gap:16px; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); max-width: 1100px; margin: 0 auto; }
.icen-hero-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 780px) { .icen-hero-3 { grid-template-columns: 1fr; } }
.icen-cta { display:inline-block; margin-top: 20px; color: rgba(255,255,255,.9); font-size: .9rem; }
.icen-hero-rez { text-align:center; margin-top: 24px; }
.icen-pill { display:inline-flex; align-items:center; gap:8px; padding: 12px 22px; border-radius: 999px; text-decoration:none; color:inherit; font-size:.9rem; }
.icen-pill:hover { background: rgba(255,255,255,.14); }
.icen-card { display:block; padding: 28px; text-decoration: none; color: inherit; transition: transform .2s ease, box-shadow .2s ease; }
.icen-card:hover { transform: translateY(-2px); }
.icen-card h3 { margin: 0 0 6px; font-size: 1.35rem; font-weight: 600; }
.icen-card p { margin: 0; color: var(--icen-muted); font-size: .95rem; }

/* Farbverläufe pro Hero-Karte */
.icen-card[data-icen-card="verkauf"]   { background: linear-gradient(135deg, rgba(59,130,246,.35), rgba(147,51,234,.25)); border-color: rgba(147,197,253,.35); }
.icen-card[data-icen-card="reparatur"] { background: linear-gradient(135deg, rgba(16,185,129,.32), rgba(45,212,191,.25)); border-color: rgba(110,231,183,.35); }
.icen-card[data-icen-card="kaufen"]    { background: linear-gradient(135deg, rgba(236,72,153,.32), rgba(249,115,22,.28)); border-color: rgba(251,191,36,.35); }
.icen-card:hover { box-shadow: 0 20px 40px -10px rgba(0,0,0,.6); }

.icen-btn { display: inline-block; padding: 10px 22px; border-radius: 999px; background: linear-gradient(135deg,#fff,#e0e7ff); color: #000; font-weight: 500; text-decoration: none; border: 0; cursor: pointer; font-size: .95rem; }
.icen-btn:hover { filter: brightness(1.05); }
.icen-btn:disabled { opacity: .4; cursor: not-allowed; }
.icen-btn-ghost { background: transparent; color: var(--icen-fg); border: 1px solid var(--icen-border); }
.icen-input, .icen-textarea, .icen-select {
  width: 100%; box-sizing: border-box;
  background: rgba(255,255,255,.08);
  border: 1px solid var(--icen-border);
  border-radius: 999px;
  padding: 10px 16px; color: var(--icen-fg); font: inherit; outline: none;
}
.icen-textarea { border-radius: 16px; padding: 12px 16px; resize: vertical; min-height: 100px; }
.icen-input::placeholder, .icen-textarea::placeholder { color: rgba(255,255,255,.35); }
.icen-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

/* Chips: normal + grüne Umrandung im aktiven Zustand (statt weißer Füllung) */
.icen-chip { display:inline-flex; align-items:center; gap:8px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--icen-border); background: rgba(255,255,255,.06); cursor: pointer; color: var(--icen-fg); font-size: .9rem; transition: border-color .15s, box-shadow .15s; }
.icen-chip:hover { border-color: rgba(255,255,255,.35); }
.icen-chip.active { background: rgba(52,211,153,.12); border-color: var(--icen-green); box-shadow: 0 0 0 2px rgba(52,211,153,.35) inset; color:#fff; }
.icen-chip-price { color: rgba(255,255,255,.75); font-size: .82rem; font-variant-numeric: tabular-nums; }
.icen-chip.active .icen-chip-price { color: #a7f3d0; }
.icen-total { margin-top: 18px; padding: 14px 18px; border-radius: 16px; background: linear-gradient(135deg, rgba(52,211,153,.18), rgba(59,130,246,.15)); border: 1px solid rgba(52,211,153,.4); display:flex; justify-content:space-between; align-items:center; font-size: 1.05rem; }
.icen-total b { font-size: 1.3rem; }

.icen-step { max-width: 640px; margin: 0 auto; }
.icen-stars { font-size: 2rem; display:flex; gap:2px; }
.icen-star { cursor: pointer; color: rgba(255,255,255,.2); background: none; border: 0; padding: 0; font-size: inherit; }
.icen-star.on { color: #fbbf24; }

/* Listings: blauer Farbverlauf, Bild-Vorschau, kein Underline */
.icen-listings { display:grid; gap:16px; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); }
.icen-listing { display:block; padding: 18px; color: inherit; text-decoration: none; background: linear-gradient(135deg, rgba(59,130,246,.35), rgba(29,78,216,.25)); border: 1px solid rgba(147,197,253,.4); border-radius: 20px; transition: transform .2s, box-shadow .2s; }
.icen-listing:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -10px rgba(59,130,246,.4); }
.icen-listing img { width: 100%; height: 200px; object-fit: cover; border-radius: 14px; margin-bottom: 12px; background: rgba(255,255,255,.05); display:block; }
.icen-listing h4 { margin: 0 0 4px; font-size: 1.1rem; }
.icen-listing .price { color: #fff; font-size: 1rem; font-weight: 600; margin-top: 6px; }
.icen-reviews-list { display:grid; gap:12px; margin-top: 24px; }
.icen-review .stars { color:#fbbf24; }
.icen-review time { color: var(--icen-muted); font-size: .8rem; }
.icen-error { color: #fca5a5; margin-top: 10px; font-size: .9rem; }
.icen-success { color: #86efac; margin-top: 10px; }
.icen-nav { display:flex; justify-content: space-between; margin-top: 20px; }
.icen-progress { display:flex; gap:6px; margin-bottom: 20px; }
.icen-progress span { flex:1; height: 4px; border-radius:2px; background: rgba(255,255,255,.15); }
.icen-progress span.on { background: var(--icen-green); }

/* ============ Footer + Admin-Konsole (Frontend) ============ */
.icen-footer-wrap { max-width: 1024px; margin: 64px auto 40px; padding: 0 20px; }
.icen-footer { padding: 28px; font-size: .9rem; color: rgba(255,255,255,.75); }
.icen-footer-grid { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .icen-footer-grid { grid-template-columns: 1fr 1fr 1fr; } }
.icen-footer-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .18em; color: rgba(255,255,255,.4); }
.icen-footer-mail { display:block; margin-top: 8px; font-weight: 600; color:#fff; text-decoration: none; }
.icen-footer-mail:hover { text-decoration: underline; }
.icen-footer-sub { margin-top: 4px; font-size: .78rem; color: rgba(255,255,255,.6); }
.icen-footer-center { text-align: center; }
.icen-footer-link { text-decoration: none; }
.icen-footer-link:hover { color:#fff; }
.icen-footer-name { color: rgba(255,255,255,.9); }
.icen-footer-divider { margin-top: 24px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1); text-align: center; }
.icen-admin-open { background: none; border: 0; cursor: pointer; font-size: .78rem; font-weight: 400; color: rgba(255,255,255,.55); text-transform: none; letter-spacing: 0; padding: 0; }
.icen-admin-open:hover { color: rgba(255,255,255,.9); text-decoration: underline; }

.icen-admin-modal { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.75); backdrop-filter: blur(20px); overflow-y: auto; padding: 20px; }
.icen-admin-modal[hidden] { display: none; }
.icen-admin-card { max-width: 1100px; margin: 40px auto; padding: 28px; border-radius: 28px; background: rgba(20,20,30,.85); border: 1px solid rgba(255,255,255,.12); }
.icen-glass-strong { backdrop-filter: blur(30px); }
.icen-admin-head { display:flex; align-items:center; justify-content:space-between; margin-bottom: 20px; }
.icen-admin-head h2 { margin: 4px 0 0; font-size: 1.7rem; }
.icen-btn-ghost { padding: 6px 16px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); color:#fff; cursor:pointer; font-size: .85rem; }
.icen-btn-danger { background: rgba(239,68,68,.15); border: 1px solid rgba(239,68,68,.4); color: #fca5a5; padding: 4px 12px; border-radius: 999px; cursor:pointer; font-size:.8rem; }
.icen-btn-danger:hover { background: rgba(239,68,68,.3); }

.icen-admin-login { max-width: 340px; margin: 40px auto; display:flex; flex-direction:column; gap: 12px; }
.icen-admin-login input { padding: 12px 20px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color:#fff; font-size:.9rem; }
.icen-admin-login button { padding: 12px; border-radius: 999px; background:#fff; color:#000; border:0; font-weight:500; cursor:pointer; }
.icen-err { color:#fca5a5; text-align:center; font-size:.85rem; margin:0; }
.icen-hint { font-size:.75rem; color: rgba(255,255,255,.5); text-align:center; }

.icen-admin-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom: 20px; }
.icen-admin-tabs button { padding: 8px 18px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.8); cursor:pointer; font-size:.85rem; }
.icen-admin-tabs button.active { background:#fff; color:#000; border-color:#fff; }
.icen-tab-logout { margin-left: auto; }

.icen-admin-content { display:flex; flex-direction: column; gap: 14px; }
.icen-admin-content .icen-row { display:block; background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius: 18px; padding: 18px; margin: 0; }
.icen-row-head { display:flex; justify-content:space-between; gap: 10px; align-items:flex-start; }
.icen-row-title { font-weight: 600; font-size: 1.05rem; }
.icen-row-sub { font-size:.75rem; color: rgba(255,255,255,.5); margin-top: 2px; }
.icen-row-price { font-size:1.15rem; font-weight:600; }
.icen-row-meta { margin-top: 10px; display:grid; gap:4px; font-size:.85rem; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); }
.icen-row-meta b { color: rgba(255,255,255,.5); font-weight:400; }
.icen-row-note { grid-column: 1/-1; background: rgba(255,255,255,.05); padding: 8px 12px; border-radius: 10px; margin-top: 6px; }
.icen-row-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top: 14px; align-items:center; }
.icen-row-actions button { padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); color:#fff; cursor:pointer; font-size:.8rem; }
.icen-row-actions button:hover { background: rgba(255,255,255,.14); }
.icen-row-actions input { padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:#fff; width:100px; }
.icen-row-actions label { font-size:.8rem; color: rgba(255,255,255,.6); display:flex; gap:6px; align-items:center; }
.icen-row textarea { width:100%; margin-top:10px; padding:10px; border-radius: 12px; background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); color:#fff; font-family: inherit; resize: vertical; }

.icen-pill-s { display:inline-block; padding: 2px 8px; margin-left: 6px; border-radius: 999px; background: rgba(255,255,255,.1); font-size:.65rem; text-transform: uppercase; letter-spacing:.1em; }
.icen-empty { padding: 40px; text-align:center; color: rgba(255,255,255,.5); background: rgba(255,255,255,.03); border-radius: 18px; }

.icen-form-grid { display:grid; gap:8px; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius: 18px; padding: 16px; margin-bottom: 16px; }
.icen-form-grid input, .icen-form-grid textarea, .icen-form-grid select { padding: 8px 14px; border-radius: 10px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:#fff; font-size:.85rem; }
.icen-form-grid textarea { grid-column: 1/-1; min-height: 60px; }
.icen-form-grid button { padding: 8px 16px; border-radius: 999px; background:#fff; color:#000; border:0; cursor:pointer; font-weight: 500; }
.icen-form-grid label { grid-column: 1/-1; font-size: .8rem; color: rgba(255,255,255,.6); }

.icen-table-wrap { overflow-x:auto; }
.icen-table { width:100%; border-collapse: collapse; font-size:.85rem; }
.icen-table th, .icen-table td { padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,.08); text-align:left; }
.icen-table th { color: rgba(255,255,255,.5); font-weight: 500; font-size:.7rem; text-transform: uppercase; letter-spacing:.1em; }
.icen-table input { padding: 4px 8px; border-radius: 8px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:#fff; width: 90px; font-size:.85rem; }
.icen-table-title { margin: 16px 0 6px; font-size: .95rem; color: rgba(255,255,255,.8); }

.icen-cards { display:grid; gap:14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.icen-card-adm { background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 14px; display:flex; flex-direction:column; gap: 6px; font-size:.85rem; }
.icen-card-adm img { width:100%; height: 140px; object-fit: cover; border-radius: 10px; }
.icen-card-adm a { color: rgba(147,197,253,.9); text-decoration: none; }

.icen-coupon { display:flex; gap:10px; margin-top:14px; align-items:center; flex-wrap:wrap; }
.icen-coupon .icen-input { flex:1 1 200px; margin-top:0; text-transform:uppercase; }