/* ========================================================
   ContractService – Navy Business Portal
   Color scheme: COLORSCHEMA.md
   ======================================================== */

:root {
  /* Primärfarbe: Navy */
  --color-primary-900: #000080;
  --color-primary-700: #1A1A99;
  --color-primary-600: #3333B3;
  --color-primary-400: #6666CC;
  --color-primary-100: #CCCCEE;
  --color-primary-50:  #EEEEFF;

  /* Akzentfarbe: Steel Blue */
  --color-accent-600:  #4A7FC1;
  --color-accent-100:  #D9E8F7;

  /* Neutral: Slate */
  --color-neutral-700: #334155;
  --color-neutral-500: #475569;
  --color-neutral-300: #94A3B8;
  --color-neutral-100: #E2E8F0;
  --color-neutral-50:  #F1F5F9;

  /* Statusfarben */
  --color-status-active-bg:   #DCFCE7;
  --color-status-active-text: #15803D;
  --color-status-active-icon: #16A34A;
  --color-status-review-bg:   #FEF9C3;
  --color-status-review-text: #A16207;
  --color-status-review-icon: #D97706;
  --color-status-expired-bg:  #FEE2E2;
  --color-status-expired-text:#B91C1C;
  --color-status-expired-icon:#DC2626;

  /* Oberflächen */
  --color-surface-white:  #FFFFFF;
  --color-surface-page:   #F1F5F9;
  --color-surface-card:   #FFFFFF;
  --color-surface-border: #D0D9E8;

  /* Text auf farbigen Hintergründen */
  --color-on-primary: #FFFFFF;
  --color-on-accent:  #FFFFFF;
}

/* === Reset & Base === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;background:var(--color-surface-page);color:var(--color-neutral-500);line-height:1.6;min-height:100vh}
h2{font-size:1.35rem;margin-bottom:1rem;color:var(--color-neutral-700)}
h3{font-size:1.05rem;margin:1.5rem 0 .75rem;color:var(--color-neutral-700)}
a{color:var(--color-accent-600);transition:color .15s}
a:hover{color:var(--color-primary-900);text-decoration:underline}

/* === Layout === */
.cs-container{max-width:680px;margin:0 auto;padding:2rem 1.5rem}
.cs-welcome{display:flex;align-items:center;justify-content:center;min-height:80vh}
.cs-welcome__card{background:var(--color-surface-card);border:1px solid var(--color-surface-border);border-radius:16px;padding:2.5rem;width:100%;max-width:440px;box-shadow:0 4px 24px rgba(0,0,128,.06)}
.cs-welcome__card h1{font-size:1.5rem;margin-bottom:.5rem;color:var(--color-primary-900)}
.cs-welcome__card p{color:var(--color-neutral-500);margin-bottom:1.5rem}
.cs-welcome__form{display:flex;flex-direction:column;gap:1rem}

/* === Form elements === */
.cs-field{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.75rem}
.cs-field label{font-size:.85rem;font-weight:600;color:var(--color-neutral-700)}
.cs-input{padding:.65rem .9rem;border:1px solid var(--color-surface-border);border-radius:8px;font-size:.95rem;transition:border-color .15s,box-shadow .15s;outline:none;background:var(--color-surface-white)}
.cs-input:focus{border-color:var(--color-primary-600);box-shadow:0 0 0 3px rgba(51,51,179,.12)}
.cs-input--code{font-family:monospace;font-size:1.4rem;letter-spacing:4px;text-align:center;text-transform:uppercase}
.cs-form{display:flex;flex-direction:column;gap:.25rem}
.cs-inline-form{display:inline-flex;margin-top:.5rem}
.cs-row{display:flex;gap:1rem}
.cs-row .cs-field--sm{flex:0 0 120px}
.cs-row .cs-field{flex:1}
.cs-checkbox{display:flex;align-items:center;gap:.5rem;font-size:.9rem;margin:1rem 0}
.cs-checkbox input{width:1.1rem;height:1.1rem;accent-color:var(--color-primary-900)}

/* === Buttons === */
.cs-btn{display:inline-flex;align-items:center;justify-content:center;padding:.7rem 1.5rem;border:none;border-radius:8px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .15s;text-decoration:none}
.cs-btn--primary{background:var(--color-primary-900);color:var(--color-on-primary)}
.cs-btn--primary:hover{background:var(--color-primary-700)}
.cs-btn--primary:focus{outline:2px solid var(--color-primary-600);outline-offset:2px}
.cs-btn--ghost{background:transparent;color:var(--color-primary-900);border:1px solid var(--color-primary-900)}
.cs-btn--ghost:hover{background:var(--color-primary-50)}
.cs-btn--danger{background:var(--color-status-expired-icon);color:#fff}
.cs-btn--danger:hover{background:var(--color-status-expired-text)}
.cs-btn--sm{padding:.4rem .9rem;font-size:.82rem}
.cs-btn--lg{padding:.9rem 2rem;font-size:1rem}

/* === Flash messages === */
.cs-flash{padding:.75rem 1rem;border-radius:8px;margin-bottom:1rem;font-size:.9rem}
.cs-flash--error{background:var(--color-status-expired-bg);color:var(--color-status-expired-text);border:1px solid #fecaca}
.cs-flash--success{background:var(--color-status-active-bg);color:var(--color-status-active-text);border:1px solid #bbf7d0}
.cs-flash--warning{background:var(--color-status-review-bg);color:var(--color-status-review-text);border:1px solid #fde68a}
.cs-flash--info{background:var(--color-accent-100);color:var(--color-primary-900);border:1px solid var(--color-surface-border)}

/* === Stepper === */
.cs-stepper{display:flex;gap:.25rem;margin-bottom:2rem;overflow-x:auto;padding-bottom:.5rem}
.cs-stepper__step{display:flex;flex-direction:column;align-items:center;min-width:60px;opacity:.5}
.cs-stepper__step--active{opacity:1}
.cs-stepper__step--done{opacity:.8}
.cs-stepper__dot{width:28px;height:28px;border-radius:50%;background:var(--color-neutral-100);display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;color:var(--color-neutral-300);margin-bottom:.25rem}
.cs-stepper__step--active .cs-stepper__dot{background:var(--color-primary-900);color:var(--color-on-primary)}
.cs-stepper__step--done .cs-stepper__dot{background:var(--color-status-active-icon);color:#fff}
.cs-stepper__label{font-size:.7rem;color:var(--color-neutral-300);text-align:center;white-space:nowrap}

/* === Misc wizard elements === */
.cs-actions{margin-top:2rem;padding-top:1rem;border-top:1px solid var(--color-neutral-100)}
.cs-pdf-preview{margin:1rem 0}
.cs-sigpad-wrap{border:1px solid var(--color-surface-border);border-radius:8px;overflow:hidden;display:inline-block;position:relative}
.cs-sigpad-wrap canvas{display:block;cursor:crosshair}
.cs-sigpad-wrap button{position:absolute;top:6px;right:6px}
.cs-done{text-align:center;padding:3rem 0}
.cs-done h2{margin-bottom:.75rem;color:var(--color-status-active-text)}

/* === Status badges === */
.badge{display:inline-block;font-size:.7rem;font-weight:500;padding:2px 10px;border-radius:20px;white-space:nowrap}
.badge--blue,.badge-active{background:var(--color-status-active-bg);color:var(--color-status-active-text)}
.badge--yellow,.badge-review{background:var(--color-status-review-bg);color:var(--color-status-review-text)}
.badge--red,.badge-expired{background:var(--color-status-expired-bg);color:var(--color-status-expired-text)}
.badge--gray{background:var(--color-neutral-100);color:var(--color-neutral-500)}

/* === Tables (admin) === */
.cs-table{width:100%;border-collapse:collapse;background:var(--color-surface-card);border:1px solid var(--color-surface-border);border-radius:8px;overflow:hidden}
.cs-table th{background:var(--color-neutral-50);color:var(--color-neutral-500);font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.05em;padding:.6rem .8rem;text-align:left}
.cs-table td{padding:.6rem .8rem;border-top:1px solid var(--color-neutral-100);font-size:.88rem;color:var(--color-neutral-500)}
.cs-table tr:hover td{background:var(--color-primary-50)}
.cs-table tr.selected td{background:var(--color-primary-100)}

/* === Admin layout === */
.admin-header{background:var(--color-primary-900);color:var(--color-on-primary);padding:.75rem 1.5rem;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--color-primary-700)}
.admin-header h1{font-size:1.1rem;font-weight:600;color:var(--color-on-primary)}
.admin-nav{display:flex;gap:.5rem;align-items:center}
.admin-nav a{color:rgba(255,255,255,.75);text-decoration:none;font-size:.85rem;padding:.35rem .75rem;border-radius:20px;transition:all .15s}
.admin-nav a:hover{color:#fff;background:rgba(255,255,255,.1);text-decoration:none}
.admin-nav a.active{background:#fff;color:var(--color-primary-900)}
.admin-body{max-width:1100px;margin:0 auto;padding:2rem 1.5rem}

/* Stat cards (admin dashboard) */
.stat-card{background:var(--color-surface-card);border:1px solid var(--color-surface-border);border-radius:8px;padding:1.25rem;text-align:center}
.stat-card .num{font-size:1.75rem;font-weight:500;color:var(--color-primary-900)}
.stat-card .num.warning{color:var(--color-status-review-icon)}
.stat-card .lbl{font-size:.78rem;color:var(--color-neutral-300);margin-top:.25rem}

/* === Landing / offer page === */
.cs-landing{max-width:720px;margin:0 auto;padding:2rem 1.5rem}
.cs-landing__hero{text-align:center;padding:2.5rem 0 2rem}
.cs-landing__badge{display:inline-block;background:var(--color-accent-100);color:var(--color-primary-900);font-size:.8rem;font-weight:600;padding:.3rem .9rem;border-radius:20px;margin-bottom:1rem;border:1px solid var(--color-surface-border)}
.cs-landing__headline{font-size:2rem;font-weight:800;color:var(--color-primary-900);margin-bottom:.5rem;line-height:1.2}
.cs-landing__subtitle{font-size:1.15rem;color:var(--color-neutral-500);font-weight:400}
.cs-landing__description{background:var(--color-surface-card);border:1px solid var(--color-surface-border);border-radius:12px;padding:1.5rem 2rem;margin-bottom:2rem;font-size:1rem;color:var(--color-neutral-700);line-height:1.7}
.cs-landing__features{margin-bottom:2rem}
.cs-landing__features h2{font-size:1.15rem;margin-bottom:1rem;color:var(--color-neutral-700)}
.cs-feature-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
@media(max-width:640px){.cs-feature-list{grid-template-columns:1fr}}
.cs-feature-list__item{display:flex;gap:.6rem;align-items:flex-start;background:var(--color-surface-card);border:1px solid var(--color-surface-border);border-radius:10px;padding:.75rem 1rem;font-size:.9rem;transition:box-shadow .15s;color:var(--color-neutral-500)}
.cs-feature-list__item:hover{box-shadow:0 2px 12px rgba(0,0,128,.06);background:var(--color-primary-50)}
.cs-feature-list__icon{color:var(--color-status-active-icon);font-weight:700;flex-shrink:0;font-size:1rem;line-height:1.4}
.cs-landing__conditions{margin-bottom:2rem}
.cs-landing__conditions h2{font-size:1.15rem;margin-bottom:1rem;color:var(--color-neutral-700)}
.cs-conditions-table{width:100%;border-collapse:collapse;background:var(--color-surface-card);border:1px solid var(--color-surface-border);border-radius:12px;overflow:hidden}
.cs-conditions-table th,.cs-conditions-table td{padding:.7rem 1rem;text-align:left;font-size:.9rem;border-bottom:1px solid var(--color-neutral-50)}
.cs-conditions-table th{background:var(--color-neutral-50);color:var(--color-neutral-700);font-weight:600;width:40%}
.cs-conditions-table td{color:var(--color-neutral-500)}
.cs-conditions-table tr:last-child th,.cs-conditions-table tr:last-child td{border-bottom:none}
.cs-landing__cta{text-align:center;padding:2rem 0;border-top:1px solid var(--color-neutral-100);margin-top:1rem}
.cs-landing__cta .cs-btn--lg{padding:1rem 2.5rem;font-size:1.05rem;border-radius:10px;box-shadow:0 4px 14px rgba(0,0,128,.2);transition:all .2s}
.cs-landing__cta .cs-btn--lg:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,0,128,.3)}
.cs-landing__hint{margin-top:.75rem;font-size:.82rem;color:var(--color-neutral-300)}
.cs-landing__footer{text-align:center;padding-top:1.5rem;border-top:1px solid var(--color-neutral-100);margin-top:1rem}
.cs-landing__provider{font-size:.85rem;color:var(--color-neutral-300)}