/* ================================
     1. VETTEN Farb-Variablen
     (bei Bedarf an eure echten CI-Werte anpassen)
  =================================== */
  :root{
    --vetten-anthrazit:#111827;
    --vetten-weiss:#ffffff;
    --vetten-gelb:#ffdd00;      /* VETTEN Gelb */
    --vetten-gelb-soft:#fff6bf; /* sanftes Gelb */
    --vetten-grau:#e5e7eb;
    --vetten-grau2:#f7f7f7;
    --vetten-shadow: rgba(0,0,0,.18);
  }

  /* ================================
     2. Grundschriftarten
  =================================== */
  #cookie-banner,
  #cookie-settings{
    font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  }

  /* ================================
     3. Cookie-Banner (schwebend)
  =================================== */
  #cookie-banner{
    position:fixed;
    left:0; right:0; bottom:0;
    z-index:2147483646; /* unter Modal, über allem anderen */
    background: linear-gradient(135deg, #0b0f14, #1f2937);
    color:#fff;
    display:none;
    padding:1rem;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    box-shadow:0 -10px 26px var(--vetten-shadow);
    border-top: 3px solid var(--vetten-gelb);
  }

  #cookie-banner .wrap{
    max-width:980px;
    margin:0 auto;
    display:flex;
    gap:.75rem;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
  }

  #cookie-banner p{ margin:0; }
  #cookie-banner a{
    color: var(--vetten-gelb);
    text-decoration: underline;
  }

  /* ================================
     4. Buttons
  =================================== */
  .cb-btn{
    border:none;
    padding:.6rem 1rem;
    cursor:pointer;
    border-radius:999px;
    transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
    font-weight:600;
  }
  .cb-btn:focus-visible{
    outline:2px solid var(--vetten-gelb);
    outline-offset:2px;
  }
  .cb-btn:hover{
    transform: translateY(-1px);
    filter: brightness(1.02);
  }

  .cb-accept{
    background: var(--vetten-gelb);
    color:#111;
    box-shadow: 0 8px 18px rgba(255,221,0,.18);
  }

  .cb-reject{
    background: var(--vetten-grau);
    color:#111;
  }

  .cb-settings{
    background: transparent;
    color:#fff;
    text-decoration: underline;
    font-weight:700;
    padding:.6rem .6rem;
    border-radius: .6rem;
  }
  .cb-settings:hover{
    transform:none;
    filter:none;
    text-decoration-thickness: 2px;
  }

  /* ================================
     5. Settings-Modal
  =================================== */
  #cookie-settings{
    position:fixed;
    inset:0;
    z-index:2147483647;
    display:none;
    background: rgba(0,0,0,.55);
    padding: 1rem;
  }

  #cookie-settings .box{
    background:#fff;
    color:#111;
    max-width:780px;
    margin: 6vh auto;
    border-radius: 1.1rem;
    overflow:hidden;
    box-shadow: 0 24px 50px rgba(0,0,0,.28);
  }

  #cookie-settings header{
    background: linear-gradient(135deg, #0b0f14, #1f2937);
    color:#fff;
    padding: 1rem 1.25rem;
    font-weight:800;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom: 3px solid var(--vetten-gelb);
  }

  #cookie-settings .content{
    padding: 1rem 1.25rem 1.25rem;
  }

  #cookie-settings .content p{
    margin:0 0 .75rem 0;
    color:#1f2937;
  }

  /* ================================
     6. Kategorien
  =================================== */
  .cat{
    border:1px solid #e5e7eb;
    border-radius: .9rem;
    padding: .9rem 1rem;
    margin: .6rem 0;
    display:flex;
    gap:.85rem;
    align-items:flex-start;
    background: #fff;
  }

  .cat input[type="checkbox"]{
    margin-top:.2rem;
    width: 18px;
    height: 18px;
    accent-color: var(--vetten-gelb);
  }

  .cat label{
    font-weight:800;
    color:#111;
  }

  .cat small{
    display:block;
    color:#4b5563;
    margin-top:.25rem;
    line-height:1.45;
  }

  .lock{
    font-size:.9em;
    color:#6b7280;
    font-weight:700;
  }

  /* ================================
     7. Modal Footer
  =================================== */
  #cookie-settings footer{
    display:flex;
    gap:.5rem;
    padding: 1rem 1.25rem;
    background: var(--vetten-grau2);
    justify-content:flex-end;
    flex-wrap:wrap;
    border-top: 1px solid #e5e7eb;
  }

  .cs-save{
    background: var(--vetten-gelb);
    color:#111;
  }

  .cs-cancel{
    background: var(--vetten-grau);
    color:#111;
  }

  /* ================================
     8. Fallback ohne env()
  =================================== */
  @supports not (padding: max(0px)){
    #cookie-banner{ padding-bottom:1rem; }
  }