:root{
      /* Farben passen wir später an */
      --bg: #ffffff;
      --text: #000000;
      --muted: #5a5a5a;

      --primary: rgb(49, 175, 222);
      --primary-800: #91D5ED;
      --primary-contrast: #ffffff;
      --accent: rgb(209, 79, 24);
      --accent-200: #F7CCBA;

      --footer: rgb(220, 217, 217);
      --secondary: #333333;
      --light: #f3f4f6;
      --border: #e6e6e6;

      --container: 1100px;
      --radius: 14px;
      --shadow: 0 10px 30px rgba(0,0,0,.08);
    }

    *{ box-sizing: border-box; }
    html,body{ height:100%; }
    body{
      margin:0;
      font-family: 'Open Sans';
      color: var(--text);
      background: var(--bg);
      line-height: 1.55;
    }

    h1, h2, h3, h4, h5, h5 {
        margin-bottom: 0.5rem !important;
    }

    .h1 {
      font-size: clamp(22px, 3vw, 34px);
    }
    p {
      margin-top: 0.4rem !important;
    }

    a {
      color: inherit; 
      text-underline-offset: 4px;
    }
    .container{ width: min(var(--container), calc(100% - 32px)); margin: 0 auto; }
    .section{ padding: clamp(32px, 5vw, 64px) 0; }
    .section.light{ background: var(--light); }
    .section.primary{ background: var(--primary); color: var(--primary-contrast); }
    .grid{ display:grid; gap: 24px; }
    .grid.cols-2{ grid-template-columns: 1.6fr 1fr; }
    .grid-left.cols-2 {
        grid-template-columns: 1fr 1.6fr; 
    }
    a:hover {
        color: var(--muted);
    }
    @media (max-width: 900px){ .grid.cols-2, .grid-left.cols-2 { grid-template-columns: 1fr; } }



    .section.section-accent {
        background-color: var(--accent-200);
        color: #000;
    }

    .section.section-primary {
        background-color: var(--primary-800);
        color: #000;
    }
    .section.light { 
        background: var(--light); 
    }
    .section.light .card {
        background-color: var(--accent-200) !important;
    }

    .headline{
      font-family: 'Open Sans';
      letter-spacing: .2px;
      margin: 0 0 10px 0;
      line-height: 1.15;
    }
    h1.headline{ font-size: clamp(28px, 4vw, 44px); }
    h2.headline{ font-size: clamp(22px, 3vw, 34px); }
    h4.headline{ font-size: clamp(18px, 2.2vw, 22px); }

    .lead{ font-size: 1.05rem; color: var(--text); }
    .small{ font-size: .92rem; color: var(--muted); }

    .card{
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    .card.pad{ padding: 18px; }
    .pill{
      display:inline-flex; align-items:center; gap:8px;
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,.6);
      backdrop-filter: blur(8px);
      font-size: .92rem;
    }

    /* Hero Slider */
    .hero{
      padding: 0;
      position: relative;
    }
    .hero-video{
      aspect-ratio: 1500 / 844;
      background: #000;
      overflow: hidden;
    }
    .hero-media{
      position: absolute;
      inset: 0;
    }
    header .header-logo {
        margin: 1rem;
        margin-left: 0 !important;
        width: 150px;
    }
    h3 {
        font-size: 1.5rem;
    }
    .hero-media video{
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
      background: var(--accent-200);
    }
    .hero-content{
      position: relative;
      z-index: 2;
      min-height: 100%;
      display: flex;
      align-items: flex-end;
      padding: 26px 0;
    }
    .hero-content .container{
      width: min(var(--container), calc(100% - 32px));
      margin: 0 auto;
    }
    .slider{
      position: relative;
      height: min(75vh, 720px);
      min-height: 420px;
      overflow: hidden;
    }
    .slide{
      position:absolute; inset:0;
      opacity: 0;
      transform: scale(1.02);
      transition: opacity 600ms ease, transform 900ms ease;
      pointer-events: none;
    }
    .slide.is-active{
      opacity: 1;
      transform: scale(1);
      pointer-events: auto;
    }
    .slide img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      display:block;
    }
    .slide::after{
      content:"";
      position:absolute; inset:0;
      background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.12) 55%, rgba(0,0,0,0));
    }
    .slide-content{
      position:absolute;
      left: 24px; right: 24px;
      bottom: 26px;
      z-index: 2;
    }
    .slide-content .container{ display:flex; align-items:flex-end; justify-content: space-between; gap:16px; }
    .hero-title{
      color: #fff;
      max-width: 720px;
      text-shadow: 0 10px 30px rgba(0,0,0,.4);
    }
    .hero-title .headline{ margin:0; color:#fff; }
    @media (max-width: 768px){
      .hero-video,
      .hero-content{
        min-height: 100%;
      }
    }
    .grid-img-min {
        width: 470px !important;
        object-fit: cover;
        height: 330px !important;
    }
    @media (max-width: 768px){
       .grid-img-min {
            width: 100% !important;
       }
    }
    .slider-controls{
      display:flex; gap: 10px;
      align-items:center;
    }
    .btn{
      appearance:none;
      border: 0;
      border-radius: 12px;
      padding: 10px 12px;
      cursor:pointer;
      font-weight: 700;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      transition: 0.2s;
      user-select:none;
    }
    .btn:active{ transform: translateY(1px); }
    .btn.primary{ background: var(--primary); color: var(--primary-contrast); }
    .btn.secondary{ background: var(--secondary); color: #fff; }
    .btn.ghost{
      background: rgba(255,255,255,.18);
      color:#fff;
      border: 1px solid rgba(255,255,255,.25);
      backdrop-filter: blur(10px);
    }
    .btn.small{ padding: 8px 10px; border-radius: 10px; font-size: .92rem; }
    .dots{
      display:flex; gap:8px; align-items:center; justify-content:center;
      padding: 14px 0 0;
    }
    .btn:hover {
        background-color: var(--primary-800);
    }
    .dot{
      width: 10px; height: 10px; border-radius: 999px;
      background: rgba(255,255,255,.35);
      border: 1px solid rgba(255,255,255,.25);
      cursor:pointer;
    }
    .dot.is-active{ background: rgba(255,255,255,.9); }

    /* Images in content */
    figure{ margin: 0; }
    .img-fluid{ width:100%; height:auto; display:block; border-radius: 14px; }
    figcaption{ font-size: .86rem; color: var(--text); margin-top: 8px; }

    /* Downloads */
    .downloads{ display:grid; gap: 14px; }
    .download-item{
      display:flex; gap: 14px; align-items:flex-start;
      padding: 14px;
      border: 1px solid var(--border);
      border-radius: 14px;
      background: var(--bg);
    }
    .download-thumb{
      width: 86px; flex: 0 0 86px;
      border-radius: 12px;
      overflow:hidden;
      border: 1px solid var(--border);
      background: #fff;
    }
    .download-thumb img{ width:100%; height:auto; display:block; }
    .download-meta{ flex: 1; }
    .download-meta a.title{ font-weight: 800; text-decoration: none; }
    .download-meta .meta{ font-size:.9rem; color: var(--muted); margin-top: 4px; }
    .download-meta .actions{ margin-top: 10px; }
    .download-meta .actions a{ text-decoration:none; }

    /* Video block */
    .video-wrap{
      border-radius: var(--radius);
      overflow:hidden;
      border: 1px solid var(--border);
      background: #000;
      box-shadow: var(--shadow);
    }
    video{ width:100%; height:auto; display:block; background:#000; }
    .video-controls{
      padding: 12px;
      background: rgba(0,0,0,.72);
      color: #fff;
      display:flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items:center;
      justify-content: space-between;
    }
    .video-left, .video-right{
      display:flex; gap: 10px; align-items:center;
      flex-wrap: wrap;
    }
    .progress{
      width: 100%;
      height: 10px;
      background: rgba(255,255,255,.18);
      border-radius: 999px;
      overflow:hidden;
      border: 1px solid rgba(255,255,255,.15);
    }
    .progress > div{
      height:100%;
      width: 0%;
      background: rgba(255,255,255,.9);
    }
    .time{ font-variant-numeric: tabular-nums; font-size: .92rem; opacity: .9; }

    /* Footer */
    footer{ background: var(--footer); color: #000; }
    footer a{ color: #000; }
    .footer-grid{ display:grid; gap: 28px; grid-template-columns: .8fr 1.2fr .9fr; align-items: start; }
    @media (max-width: 900px){ .footer-grid{ grid-template-columns: 1fr; } }
    .footer-card{
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 16px;
      padding: 18px;
      background: #ffffffb0;
    }
    .footer-logo-card{
      display:flex;
      align-items:center;
      justify-content:center;
      min-height: 100%;
    }
    .footer-logo{
      width: min(100%, 220px);
      height: auto;
      display:block;
    }
    .footer-links{ list-style:none; padding:0; margin: 10px 0 0; display:grid; gap: 8px; }
    .footer-links a{ text-decoration:none; opacity:.95; }
    .footer-links a:hover{ text-decoration: underline; }
    .footer-link-button{
      appearance:none;
      border:0;
      padding:0;
      background:none;
      color: inherit;
      font: inherit;
      text-decoration:none;
      opacity:.95;
      cursor:pointer;
    }
    .footer-link-button:hover{ text-decoration: underline; }

    /* Legal modal */
    body.modal-open{ overflow:hidden; }
    .legal-modal{
      position: fixed;
      inset: 0;
      z-index: 1100;
      display: grid;
      place-items: center;
      padding: 20px;
    }
    .legal-modal[hidden]{ display:none; }
    .legal-modal-backdrop{
      position:absolute;
      inset:0;
      background: rgba(0,0,0,.62);
      backdrop-filter: blur(6px);
    }
    .legal-modal-dialog{
      position: relative;
      z-index: 1;
      width: min(1080px, 100%);
      max-height: min(88vh, 980px);
      display: grid;
      grid-template-rows: auto auto minmax(0, 1fr) auto;
      gap: 14px;
      padding: 20px;
      border-radius: 18px;
      border: 1px solid var(--border);
      background: var(--bg);
      box-shadow: 0 24px 80px rgba(0,0,0,.28);
    }
    .legal-modal-header{
      display:flex;
      align-items:center;
      justify-content: space-between;
      gap: 14px;
    }
    .legal-modal-header .headline{ margin:0; }
    .legal-modal-actions{
      display:flex;
      justify-content:flex-end;
    }
    .legal-modal-content{
      min-height: 0;
      max-height: min(68vh, 760px);
      overflow:auto;
      padding: 18px;
      border-radius: 14px;
      border: 1px solid var(--border);
      background: #fff;
    }
    .legal-modal-content h3{
      margin-top: 0;
    }
    .legal-modal-content > * + *{
      margin-top: 14px;
    }
    .legal-modal-note{
      margin:0;
      color: var(--muted);
    }
    @media (max-width: 768px){
      .legal-modal{
        place-items: start center;
        padding: 12px;
      }
      .legal-modal-dialog{
        max-height: 92vh;
        padding: 16px;
      }
      .legal-modal-content{
        max-height: 62vh;
        padding: 14px;
      }
    }

    /* Scroll-to-top */
    .scroll-top{
      position: fixed;
      right: 18px;
      bottom: 18px;
      z-index: 999;
      opacity: 0;
      transform: translateY(10px);
      pointer-events: none;
      transition: opacity .2s ease, transform .2s ease;
    }
    .scroll-top.is-visible{
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    /* A11y helpers */
    .sr-only{
      position:absolute !important;
      width:1px; height:1px;
      padding:0; margin:-1px;
      overflow:hidden; clip:rect(0,0,0,0);
      white-space:nowrap; border:0;
    }