:root{
    /* Passe diese Werte exakt an euer Logo an */
    --brand-red: #e10600;     /* Häsler Rot */
    --brand-black: #111111;   /* Tiefschwarz */
    --brand-white: #ffffff;   /* Weiß */
    --bg: #ffffff;
    --text: #111111;
    --muted: #6b7280;
    --surface: #f6f7f9;
    --radius: 16px;
    --container: 1160px;
    --shadow-sm: 0 4px 12px rgba(0,0,0,.06);
    --shadow-md: 0 10px 24px rgba(0,0,0,.10);
  }
  
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color:var(--text);
    background:var(--bg);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
  
  img{max-width:100%;height:auto;display:block}
  a{color:inherit;text-decoration:none}
  .container{max-width:var(--container);margin-inline:auto;padding:0 20px}
  
  /* Buttons */
  .btn{
    display:inline-block;
    padding:12px 20px;
    border-radius:999px;
    border:2px solid transparent;
    font-weight:600;
    transition:.2s ease;
    box-shadow:var(--shadow-sm);
  }
  .btn-primary{background:var(--brand-red);color:var(--brand-white)}
  .btn-primary:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}
  .btn-outline{border-color:var(--brand-black);color:var(--brand-black);background:transparent}
  .btn-outline:hover{background:var(--brand-black);color:var(--brand-white)}
  .btn-light{background:var(--brand-white);color:var(--brand-black);border-color:var(--brand-white)}
  .btn-light:hover{filter:brightness(.96)}
  
  /* Cards / Utility */
  .card{
    background:var(--surface);
    border-radius:var(--radius);
    padding:24px;
    box-shadow:var(--shadow-sm);
  }
  .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .link-arrow{font-weight:600}
  .link-arrow::after{content:" →";transition:.2s}
  .link-arrow:hover::after{transform:translateX(3px)}