/* ===================================================================
   base-polizei.css  –  Grundgerüst im Stil „Online-Anzeige Polizei NRW“
   Fokus: Typo-Scale, Farben, Layout-Grid, Stepper, Cards, Buttons,
          Form Controls, Hinweise/Alerts, Responsive Verhalten.
   =================================================================== */

/* ------------------------- */
/* 1) Design-Token / Colors  */
/* ------------------------- */
:root{
    /* Farben (nähern sich dem Screenshot-Look) */
    --navy-900:#0b2343;   /* Header/Überschriften */
    --navy-800:#102b55;
    --navy-700:#163666;
    --navy-600:#1c4178;
  
    --text-900:#0b1a2d;   /* Standard Text */
    --text-700:#253247;   /* Sekundärtext */
    --muted-500:#6b778b;  /* Hilfetexte */
    --line-200:#e7ecf2;   /* zarte Linien */
    --bg:#ffffff;         /* Seitenhintergrund */
    --bg-soft:#f6f8fb;    /* Flächen/Boxen */
    --shadow: 0 8px 24px rgba(15, 30, 60, .08);
  
    --accent-yellow:#ffeb00; /* Button-Text, Akzent */
    --accent-red:#e11d2a;    /* Notruf/Fehler */
    --accent-green:#117a65;  /* Success */
  
    /* Typo & Rhythmus */
    --ff-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans",
               "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    --lh: 1.45;
    --radius: 12px;
    --radius-sm: 8px;
    --radius-full: 999px;
  
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
  
    --container: 1200px; /* max Breite */
  }
  
  /* --------------- */
  /* 2) Base / Reset */
  /* --------------- */
  *{ box-sizing: border-box; }
  html,body{ height:100%; }
  body{
    margin:0;
    font-family: var(--ff-sans);
    line-height: var(--lh);
    color: var(--text-900);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  img{ max-width:100%; height:auto; display:block; }
  a{ color: var(--navy-700); text-decoration: none; }
  a:hover{ text-decoration: underline; }
  
  /* Typo-Scale – nahe am Look der Screenshots */
  h1{ font-size: clamp(2rem, 2.6vw + 1rem, 3rem); line-height:1.2; color: var(--navy-900); margin: 0 0 var(--space-6); }
  h2{ font-size: clamp(1.5rem, 1.4vw + .8rem, 2rem); line-height:1.25; color: var(--navy-900); margin: var(--space-8) 0 var(--space-4); }
  h3{ font-size: 1.25rem; line-height:1.3; color: var(--navy-900); margin: var(--space-6) 0 var(--space-3); }
  p { margin: 0 0 var(--space-4); color: var(--text-900); }
  .small, small { font-size:.875rem; color: var(--muted-500); }
  
  /* ---------------- */
  /* 3) Page Layout   */
  /* ---------------- */
  .header{
    background: var(--navy-900);
    color:#fff;
  }
  .header .bar{
    max-width: var(--container);
    margin: 0 auto;
    padding: .9rem var(--space-4);
    display:flex; align-items:center; gap: var(--space-4);
  }
  .header .brand{ font-weight:800; letter-spacing:.2px; }
  .header .tools{ margin-left:auto; display:flex; gap: var(--space-3); }
  
  .container{
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--space-8) var(--space-4);
  }
  
  .layout{
    display:grid;
    grid-template-columns: 280px 1fr; /* Stepper links, Content rechts */
    gap: var(--space-8);
  }
  
  /* ---------------- */
  /* 4) Stepper links */
  /* ---------------- */
  .stepper{
    position: sticky; top: calc(var(--space-8)); /* bleibt im Blick */
    padding-top: var(--space-2);
  }
  .step{
    display:grid;
    grid-template-columns: 28px 1fr;
    gap: var(--space-3);
    align-items: start;
    padding: var(--space-3) 0;
    color: var(--text-700);
  }
  .step + .step{ border-top:1px solid var(--line-200); }
  
  .step .dot{
    width:28px; height:28px; border-radius:50%;
    display:grid; place-items:center;
    font-weight:700; font-size:.875rem;
    border:2px solid var(--navy-700);
    color: var(--navy-700);
    background:#fff;
  }
  .step.active .dot{
    background: var(--navy-700);
    color:#fff;
  }
  .step .label{
    font-weight:700; color: var(--navy-900);
  }
  .step .sub{
    font-size:.9rem; color: var(--muted-500); margin-top:2px;
  }
  
  /* --------------- */
  /* 5) Card / Panel */
  /* --------------- */
  .card{
    background:#fff;
    border:1px solid var(--line-200);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
  }
  .card-header{
    padding: var(--space-5) var(--space-6);
    border-bottom:1px solid var(--line-200);
  }
  .card-body{
    padding: var(--space-6);
  }
  .section-title{
    font-size: clamp(1.4rem, 1vw + .9rem, 1.8rem);
    font-weight: 800;
    color: var(--navy-900);
    margin-bottom: var(--space-4);
  }
  
  /* ----------------- */
  /* 6) Form Controls  */
  /* ----------------- */
  .form-grid{
    display:grid;
    gap: var(--space-5);
    grid-template-columns: 1fr 1fr;
  }
  .form-grid.full{ grid-template-columns: 1fr; }
  
  .form-group{ display:flex; flex-direction:column; gap:.4rem; }
  .label{
    font-weight:700; color: var(--text-900);
  }
  .helper{ font-size:.875rem; color: var(--muted-500); }
  
  .input, .select, .textarea{
    width:100%;
    border:1px solid var(--line-200);
    border-radius: var(--radius-sm);
    padding: .75rem .9rem;
    font: inherit; color: var(--text-900);
    background:#fff;
    outline:none;
    transition: box-shadow .2s, border-color .2s, background .2s;
  }
  .textarea{ min-height: 140px; resize: vertical; }
  .input:focus, .select:focus, .textarea:focus{
    border-color: var(--navy-600);
    box-shadow: 0 0 0 4px rgba(16,43,85,.12);
  }
  
  /* Radio/Checkbox im Stil der Seite */
  .control{
    display:flex; align-items:center; gap:.6rem;
    cursor:pointer; user-select:none;
  }
  .control input{
    appearance:none; margin:0;
    width:20px; height:20px; border-radius:50%;
    border:2px solid var(--navy-700);
    display:inline-grid; place-content:center;
  }
  .control input[type="checkbox"]{ border-radius:6px; }
  .control input:checked{
    background: var(--navy-700); border-color: var(--navy-700);
  }
  .control input:checked::after{
    content:""; width:10px; height:10px; border-radius:50%;
    background: #fff;
  }
  .control input[type="checkbox"]:checked::after{
    width:12px; height:12px; border-radius:3px;
  }
  
  /* ---------------- */
  /* 7) Buttons       */
  /* ---------------- */
  .btns{ display:flex; gap: var(--space-3); flex-wrap:wrap; }
  .btn{
    border-radius: 10px;
    padding: .85rem 1.25rem;
    font-weight:800;
    border:1px solid transparent;
    display:inline-flex; align-items:center; gap:.6rem;
    cursor:pointer; background:#fff; color: var(--navy-900);
    transition: transform .02s ease, box-shadow .2s, background .2s;
  }
  .btn:active{ transform: translateY(1px); }
  
  /* „Weiter“ – dunkles Navy mit gelber Schrift (wie im Screenshot) */
  .btn-primary{
    background: var(--navy-900);
    color: var(--accent-yellow);
  }
  .btn-primary:hover{ box-shadow: 0 6px 18px rgba(15,30,60,.18); }
  
  /* „Zurück“ – Outline dunkelblau */
  .btn-secondary{
    background:#fff; color: var(--navy-900);
    border-color: var(--navy-900);
  }
  .btn-secondary:hover{
    background: var(--bg-soft);
  }
  
  /* Link-Button (z. B. „+ weitere Person“) */
  .btn-ghost{
    background: transparent; color: var(--navy-700);
  }
  .btn-ghost:hover{ background: var(--bg-soft); }
  
  /* ---------------- */
  /* 8) Hinweise / UI */
  /* ---------------- */
  .notice{
    background: #fff; border:1px solid var(--line-200);
    border-left: 4px solid var(--navy-700);
    border-radius: var(--radius);
    padding: var(--space-5) var(--space-6);
  }
  .notice i{ color: var(--navy-700); margin-right:.5rem; }
  
  .alert{
    background: #fff; border:1px solid var(--line-200);
    border-left: 4px solid var(--accent-red);
    border-radius: var(--radius);
    padding: var(--space-5) var(--space-6);
    color: var(--text-900);
  }
  .badge-red{
    color: var(--accent-red);
    font-weight:900; letter-spacing:.5px;
  }
  
  /* „NOTRUF 110“ Darstellung */
  .callout-110{
    font-weight:900;
    color: var(--accent-red);
    font-size: clamp(1.6rem, 2vw + 1rem, 2.4rem);
  }
  
  /* Aufzählung/Definitionen */
  .list-muted{ color: var(--muted-500); }
  
  /* ---------------- */
  /* 9) Utilities     */
  /* ---------------- */
  .mt-0{ margin-top:0!important; }
  .mt-2{ margin-top:var(--space-2)!important; }
  .mt-4{ margin-top:var(--space-4)!important; }
  .mt-6{ margin-top:var(--space-6)!important; }
  .mb-0{ margin-bottom:0!important; }
  .mb-2{ margin-bottom:var(--space-2)!important; }
  .mb-4{ margin-bottom:var(--space-4)!important; }
  .mb-6{ margin-bottom:var(--space-6)!important; }
  .pt-0{ padding-top:0!important; }
  .pb-0{ padding-bottom:0!important; }
  .center{ text-align:center; }
  
  /* ---------------- */
  /* 10) Responsive   */
  /* ---------------- */
  @media (max-width: 992px){
    .layout{ grid-template-columns: 240px 1fr; gap: var(--space-6); }
  }
  @media (max-width: 768px){
    .container{ padding: var(--space-6) var(--space-4); }
    .layout{ grid-template-columns: 1fr; }
    .stepper{ position: static; display:flex; overflow:auto; gap: var(--space-4); padding-bottom: var(--space-2); }
    .step{ border:0; grid-template-columns: 28px auto; min-width: 220px; }
    .card-body{ padding: var(--space-5); }
    .form-grid{ grid-template-columns: 1fr; }
    .btn{ width:100%; justify-content:center; }
  }