:root{
    --darkblue:#0f05a0;
    --lightblue: #C5DBFF;
    --black:#000000;
    --muted:#5b6678;
    --card:#f3f6ff;
    --border:#dbe3ff;
    --panel:#e8f0ff;
    --radius:14px;
    --shadow:0 6px 20px rgba(19,46,235,0.08);
    --space:clamp(12px, 1.2vw, 18px);
  }
  
  *{ box-sizing:border-box; }
  html,body{ min-height:100%; }
  
  body{
    margin:0;
    color:var(--black);
    font-family: 'Roboto', sans-serif; 
    background:#fff;
  }
  
  canvas{
    width: 100% !important;
    height: auto !important;
  }

  p{
    line-height: 1.5;
  }

  .container{
    width:min(1120px, 100%);
    margin-inline:auto;
    padding-inline:clamp(16px, 3vw, 28px);
  }
  
  /* ================
     Header
     ================ */

  .site-header{
    border-top: 10px solid var(--lightblue);
    position: sticky;
    top: 0;
    background:#fff;
    z-index:100;
    box-shadow:0 2px 6px rgba(0,0,0,0.1);
  }
  
  .header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    line-height: 0;
  }
  
  .brand{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
  }

  .brand-badge img{
    height:75px;
    width:auto;
  }
  
  .brand-text{
    display:flex;
    flex-direction:column;
  }
  
  .brand-title{
    font-weight:800;
    color :var(--darkblue);
    font-size:clamp(1.4rem, 3.2vw, 1.8rem);
    line-height: 1.3;
  }
  
  .brand-sub{
    font-size:.9rem;
    color:var(--muted);
    color :var(--darkblue);
    font-size:clamp(1rem, 2vw, 1.3rem);
    line-height: 1;
  }
  
  .header-accent{
    height: 80px;
    width: clamp(6px, 40vw, 500px);
    background:var(--darkblue);

    margin-right: calc(clamp(16px, 3vw, 28px) * -1);
  }
  
  /* ================
     Content
     ================ */
  .content{
    padding-block:32px 56px;
  }
  
  .page-title{
    font-size:clamp(1.6rem, 3.6vw, 2.2rem);
    margin:0 0 10px 0;
    color: var(--darkblue);
    font-weight: 1000;
  }
  
  .lead p{ 
    margin:0 0 14px 0; 
    
  }

  .icon-strip, .weekday-strip{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:12px;
    list-style:none;
    margin:0;
    padding:0;
    color:var(--muted);
    font-weight:600;
  }
  
  .weekday-strip li, .icon-strip li{
    background:#fff;
    border:1px dashed var(--border);
    padding:6px 10px;
    border-radius:999px;
    line-height:1;
  }
  
  .card-caption{
    margin-top:10px;
    color:var(--muted);
    font-size:.95rem;
  }
  
  .vergleichChart{
    margin-top: 50px;
  }
  
  /* Fliesstexte */
  .text-block{ margin-block:16px 10px; }
  .section-title{ margin:0 0 6px 0; font-size:1.1rem; }
  .footnote{ color:var(--muted); margin-top:10px; font-size:.95rem; }
  
  /* ================
     Footer
     ================ */
  .site-footer{
    background:var(--panel);
    border-top:1px solid var(--border);
    padding-block:28px 40px;
  }
  
  .footer-inner{
    display:flex;
    flex-direction:column;
    gap:22px;
  }
  
  .footer-col{
    background:#fff;
    border:1px solid var(--border);
    border-radius:12px;
    padding:16px;
    box-shadow:var(--shadow);
  }
  
  .footer-title{ margin:0 0 6px 0; }
  .footer-subtitle{ margin:0 0 8px 0; font-size:1.05rem; }
  .lblack-list{ margin:0; padding-left:18px; }
  .lblack-list a{ color:var(--darkblue); text-decoration:underline; }
  
  /* ================
     Responsive (Desktop)
     ================ */
  @media (min-width: 960px){
    .content{
      padding-block:42px 80px;
    }
  
    /* Desktop-Flex: Footer in zwei Spalten */
    .footer-inner{
      flex-direction:row;
      align-items:flex-start;
    }
    .footer-col{
      flex:1 1 0;
    }
  }
  
  /* Barrierearmut: reduzierte Motion */
  @media (prefers-reduced-motion: reduce){
    *{ animation:none!important; transition:none!important; }
  }