/* dynamic_tool/assets/site.css */

:root{
    --bg:#f6f7fb;
    --surface:#ffffff;
    --ink:#111827;
    --muted:#6b7280;
  
    --red:#7b1113;
    --red2:#9c1c1e;
    --gold:#a9761a;
    --gold2:#c18a24;
  
  --nav-bg:#0b74c8;
  --nav-bg2:#005fa3;
  --nav-text:#ffffff;
  --nav-sep:#ffffff;
  
    --radius:18px;
    --radius-lg:22px;
    --shadow:0 18px 40px rgba(2, 6, 23, .10);
    --shadow-soft:0 10px 22px rgba(2, 6, 23, .08);
  
    --hero-h:360px;
  }
  
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    color:var(--ink);
    background:var(--bg);
    line-height:1.45;
    padding-bottom: calc(var(--footer-pad, 0px) + 16px + env(safe-area-inset-bottom, 0px));
  }
  
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  
  .container{
    width:min(1180px, 92%);
    margin:0 auto;
  }
  
  .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;
  }
  
  /* Honeypot (Spamfeld) */
  .hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
  
  /* Pflichtstern */
  .req{
    color: color-mix(in srgb, var(--red) 85%, #fff);
    font-weight: 900;
    margin-left: 4px;
  }
  
  
  /* =========================
     AWZ Desktop Navbar (wie awz.at)
     - wird erst ab >= 981px angezeigt
     ========================= */
  .awzNav{
    display:none;
    position:fixed;
    top:0;left:0;right:0;
    z-index:80;
    background: linear-gradient(180deg, var(--nav-bg), var(--nav-bg2));
    box-shadow: 0 14px 28px rgba(0,0,0,.18);
    transform: translateY(0);
    transition: transform 240ms ease;
  }
  .awzNav.is-hidden{ transform: translateY(-110%); }
  
  .awzNav__inner{
    width:min(1400px, 100%);
    margin:0 auto;
    padding:0 14px;
  }
  
  .awzNav__menu{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    align-items:stretch;
    justify-content:space-between;
    min-height:64px;
  }
  
  .awzNav__item{
    position:relative;
    flex:1 1 0;
    display:flex;
    align-items:stretch;
  }
  
  /* Diagonale Trennlinie ? wie awz.at */
  /*.awzNav__item::after{
    content:"";
    position:absolute;
    top:14px;
    bottom:14px;
    right:0;
    width:2px;
    background: var(--nav-sep);
    transform: skewX(-20deg);
    opacity:.95;
    pointer-events:none;
  }
  .awzNav__item:last-child::after{ display:none; }*/
  
  .awzNav__link{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 14px;
    color: var(--nav-text);
    font-weight:900;
    font-size:15px;
    letter-spacing:.2px;
    text-align:center;
    line-height:1.1;
    user-select:none;
  }
  
  .awzNav__link:hover{ background: rgba(255,255,255,.08); }
  .awzNav__link:active{ background: rgba(0,0,0,.10); }
  .awzNav__link:focus-visible{ outline:3px solid rgba(255,255,255,.65); outline-offset:-3px; }
  
  .awzNav__item--brand{
    flex:0 0 220px;
    background:transparent;
  }  
  
  .awzNav__brand{
    width:100%;
    height:100%;
    margin:0;
    border-radius:0;
    background:#fff;
    /* "Diagonale" Kanten wie auf awz.at */
    clip-path: polygon(8% 0, 92% 0, 100% 50%, 92% 100%, 8% 100%, 0 50%);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    padding:0 16px;
    box-shadow:none;
  } 
  
  .awzNav__brandLogo{
    width:116px;
    height:74px;
    object-fit:contain;
  }
  
  
  .awzNav__brandText{
    color:#0b3a6e;
    font-weight:1000;
    letter-spacing:.2px;
    font-size:18px;
  }
  
  
  /* ---------------- Header / Nav ---------------- */
  .topbar{
    position:fixed;
    top:0;left:0;right:0;
    z-index:70;
    background: rgba(255, 255, 255, 0.78);
    border-bottom:1px solid rgba(0,0,0,.08);
    will-change: transform;
    transition: transform 220ms ease;
    transform: translateY(0);
  }
  .topbar.is-hidden{ transform: translateY(-110%); }
  
  .topbar__inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:1px 0;
  }
  
  .brand{
    display:flex;
    align-items:center;
    gap:12px;
    font-weight:900;
  }
  
  .brand__dot{
    width:22px;height:22px;
    border-radius:6px;
    background:linear-gradient(135deg,var(--red),var(--red2));
    box-shadow: var(--shadow-soft);
  }
  
  .brand__text{letter-spacing:.2px; white-space:nowrap}
  
  .brand__logo{
    width:106px;
    height:86px;
    object-fit:contain;
    display:block;
    padding:4px 0;
  }
  
  
  .nav__toggle{
    display:none;
    border:1px solid rgba(0,0,0,.12);
    background:#fff;
    border-radius:12px;
    padding:10px 12px;
    cursor:pointer;
  }
  .nav__burger{
    display:block;
    width:22px;
    height:14px;
    background:
      linear-gradient(#111 0 0) top / 100% 2px no-repeat,
      linear-gradient(#111 0 0) center / 100% 2px no-repeat,
      linear-gradient(#111 0 0) bottom / 100% 2px no-repeat;
  }
  
  .nav__burger::before,
  .nav__burger::after{
    content:none;
  }
  
  .nav__menu{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:12px;
    list-style:none;
    padding:0;margin:0;
    font-weight:600;
    color:#1f2937;
  }
  .nav__sep{opacity:.35}
  
  /* Nav: Desktop vs Mobile Items */
  .navItem--mobile{display:none;}
  
  
  /* ---------------- Buttons ---------------- */
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 14px;
    border-radius:12px;
    border:1px solid rgba(0,0,0,.10);
    font-weight:900;
    cursor:pointer;
    transition:transform .15s ease, filter .2s ease, box-shadow .2s ease;
    background:#fff;
  }
  
  .btn:hover{transform:translateY(-1px)}
  .btn:active{transform:translateY(0)}
  .btn:disabled{opacity:.65;cursor:not-allowed;transform:none}
  
  .btn--big{padding:12px 16px;border-radius:14px}
  
  .btn--red{
    color:#fff;
    border-color:transparent;
    background:linear-gradient(135deg,var(--red),var(--red2));
    box-shadow:var(--shadow-soft);
  }
  .btn--red:hover{filter:brightness(1.03)}
  
  .btn--gold{
    color:#111;
    border-color:transparent;
    background:linear-gradient(135deg,var(--gold),var(--gold2));
    box-shadow:var(--shadow-soft);
  }
  
  .btn--light{
    background:#fff;
    border-color:rgba(255,255,255,.65);
    box-shadow:0 10px 18px rgba(0,0,0,.10);
  }
  
  /* ---------------- Hero ---------------- */
  .hero{
    position:relative;
    height:var(--hero-h);
    min-height:160px;
    overflow:hidden;
    background:#eceff5;
  }
  
  .hero__bg{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    filter:saturate(110%);
  }
  
  .hero__overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
      90deg,
      rgba(255,255,255,.92) 0%,
      rgba(255,255,255,.70) 42%,
      rgba(255,255,255,.25) 100%
    );
  }
  
  .hero__inner{
    position:relative;
    height:100%;
    display:flex;
    align-items:flex-end;
    padding:28px 0;
  }
  
  .hero__content{max-width:720px}
  
  .hero__headline{
    margin:0 0 10px;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-weight:900;
    line-height:1.02;
    letter-spacing:.2px;
    color:var(--red);
    font-size: clamp(34px, 4vw, 60px);
  }
  .hero__headline span{display:block}
  
  .hero__lead{
    margin:0 0 16px;
    color:#374151;
    max-width:620px;
  }
  
  .hero__actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
  }
  
  /* ---------------- Sections ---------------- */
  .section{padding:26px 0}
  .section--benefits{background:rgba(255,255,255,.55)}
  .section--tagline{padding:14px 0 70px}
  .section--mid{padding:10px 0 6px}
  
  /* Mehr Abstand zwischen Hero und Promo-Cards */
  #jobs.section{ padding-top: 34px; }
  
  /* ---------------- Promo Cards ---------------- */
  .promoGrid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;
    margin-top:-28px;
  }
  
  .promo{
    border-radius:var(--radius-lg);
    overflow:hidden;
    box-shadow:var(--shadow);
    background:#fff;
    display:grid;
    grid-template-columns: 1.12fr .88fr;
    min-height:210px;
    align-items:stretch;
  }
  
  .promo__content{
    padding:22px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:12px;
  }
  
  .promo__content h3{
    margin:0;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size:28px;
    line-height:1.05;
    overflow-wrap:anywhere;
    word-break:normal;
  }
  
  .promo__text{
    margin:0;
    font-weight:500;
  }
  
  /* Media-Container: Bild f�llt komplett + rund durch overflow */
  .promo__media{
    position:relative;
    overflow:hidden;
    background:#eef2f7;
    min-height:210px;
  }
  
  .promo__media img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    filter:saturate(110%);
  }
  
  /* Label nur wenn kein Bild */
  .promo__media.is-empty::after{
    content:attr(data-label);
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    font-weight:900;
    letter-spacing:.18em;
    color:#111827;
    opacity:.45;
  }
  
  /* Theme variants */
  .promo--red .promo__content{
    color:#fff;
    background:linear-gradient(135deg,var(--red),var(--red2));
  }
  .promo--red .promo__content h3{color:#fff}
  .promo--red .promo__text{color:var(--promo-red-text, #ffffffeb)}
  
  .promo--red .promo__media::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
      linear-gradient(90deg, rgba(0,0,0,.12) 0%, transparent 70%),
      linear-gradient(0deg, rgba(0,0,0,.10), rgba(0,0,0,.10));
  }
  
  .promo--red .promo__content .btn,
  .promo--red .promo__content a.btn{
    background:#fff;
    color:#111;
    border:1px solid rgba(0,0,0,.10);
  }
  .promo--red .promo__content .btn:hover,
  .promo--red .promo__content a.btn:hover{
    background:rgba(255,255,255,0.92);
  }
  
  .promo--gold .promo__content{
    color:#111;
    background:linear-gradient(135deg,var(--gold),var(--gold2));
  }
  .promo--gold .promo__content h3{color:#fff}
  .promo--gold .promo__text{color:var(--promo-gold-text, #000000d9)}
  .promo--gold .btn--gold{background:#fff;border:0}
  
  /* ---------------- Benefits ---------------- */
  .benefitGrid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;
  }
  
  .benefitTitle{
    margin:0 0 14px;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size:32px;
    line-height:1.05;
  }
  .benefitTitle--red{color:var(--red)}
  .benefitTitle--gold{color:var(--gold)}
  
  .benefitPanel{
    background:#fff;
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-soft);
    border:1px solid rgba(0,0,0,.06);
    overflow:hidden;
  }
  
  .benefitBar{
    padding:10px 14px;
    font-weight:900;
    color:#fff;
  }
  .benefitBar--red{background:linear-gradient(135deg,var(--red),var(--red2))}
  .benefitBar--gold{background:linear-gradient(135deg,var(--gold),var(--gold2))}
  
  .benefitItems{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    padding:14px;
  }
  
  .benefitItem{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:12px;
    border-radius:14px;
    border:1px solid rgba(0,0,0,.06);
    background:#fafafa;
  }
  
  .benefitIcon{
    width:54px;
    height:54px;
    border-radius:16px;
    flex:0 0 54px;
    overflow:hidden;
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
  }
  
  .muted{color:var(--muted);font-size:13px;margin-top:2px}
  
  
  /* ---------------- Info-Textboxen (unter den Benefits) ---------------- */
  .infoCard{
    margin-top:14px;
    background:#fff;
    border:1px solid rgba(0,0,0,.06);
    box-shadow:var(--shadow-soft);
    border-radius:var(--radius-lg);
    padding:16px 18px;
  }
  .infoCard--red{border-left:4px solid var(--red);}
  .infoCard--gold{border-left:4px solid var(--gold);}
  .infoCard p{margin:0;color:#374151;font-weight:600;}
  
  /* ICON-Mapping: stabil �ber Klassen (unabh�ngig von Spalten-Reihenfolge)
     Pfad relativ zu assets/site.css -> assets/img/... */
  .benefitCol--job .benefitItem:nth-child(1) .benefitIcon{
    background-image: url("img/bulb_icon_colorful.jpg");
  }
  .benefitCol--job .benefitItem:nth-child(2) .benefitIcon{
    background-image: url("img/handshake_icon_colorful.jpg");
  }
  .benefitCol--immo .benefitItem:nth-child(1) .benefitIcon{
    background-image: url("img/shield_icon_colorful.jpg");
  }
  .benefitCol--immo .benefitItem:nth-child(2) .benefitIcon{
    background-image: url("img/bulb_icon_colorful.jpg");
  }

  .infoCard__headline{margin:0 0 .75rem;font-size:1.15rem;font-weight:800;line-height:1.3}
  .infoCard__headline--gold{color:var(--gold)}
  .infoCard__headline--red{color:var(--red)}
  .infoCard__list{margin:0;padding-left:1.2rem;list-style:disc}
  .infoCard__list li{margin:.28rem 0;line-height:1.45}
  .infoCard__phone{color: #0000EE;font-weight:700;text-decoration:none}
  .infoCard__phone:hover,.infoCard__phone:focus{text-decoration:underline}
  
  /* ---------------- Mid Textbox ---------------- */
  .midCard{
    position:relative;
    background:#fff;
    border:1px solid rgba(0,0,0,.06);
    box-shadow:var(--shadow-soft);
    border-radius:var(--radius-lg);
    padding:16px 18px;
    overflow:hidden;
  }
  
  .midCard::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
      radial-gradient(900px 240px at 12% 12%, rgba(169,118,26,.14), transparent 60%),
      radial-gradient(900px 240px at 88% 88%, rgba(123,17,19,.12), transparent 60%);
  }
  
  .midCard p{
    position:relative;
    margin:0;
    font-weight:700;
    color:#374151;
  }
  
  /* ---------------- Contact ---------------- */
  .contactCard{
    background:#fff;
    border:1px solid rgba(0,0,0,.06);
    box-shadow:var(--shadow);
    border-radius:var(--radius-lg);
    padding:22px;
  }
  
  .contactTitle{
    margin:0 0 6px;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size:34px;
    color:var(--red);
  }
  
  .contactCopy{margin:0 0 16px;color:#4b5563}
  
  .contactForm{display:grid;gap:14px}
  
  .contactGrid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
  }
  .field{display:grid;gap:6px}
  .field span{font-weight:800;font-size:13px}
  .field--full{grid-column:1 / -1}
  
  input, textarea{
    width:100%;
    border-radius:12px;
    border:1px solid rgba(0,0,0,.12);
    padding:11px 12px;
    font:inherit;
    outline:none;
  }
  textarea{resize:vertical}
  
  input:focus, textarea:focus{
    border-color: rgba(123,17,19,.55);
    box-shadow:0 0 0 3px rgba(123,17,19,.18);
  }
  
  .legal{margin:8px 0 0;color:#6b7280;font-size:12px}
  
  .legal a{color:#2563eb;text-decoration:underline;font-weight:800}
  .legal a:hover{text-decoration:underline}
  
  
  .contactActions{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
  }
  .formStatus{font-weight:800;color:#0f766e}
  .formStatus.is-error{color:#b91c1c}
  
  /* ---------------- Tagline ---------------- */
  .tagline{
    margin:0;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size:26px;
    color:var(--red);
  }
  
  /* ---------------- Bottom bar (AWZ Footer ? dynamisch) ---------------- */
  .bottombar{
    position:static;
    background:#f3f4f6;
    color:#111827;
    border-top:1px solid rgba(0,0,0,.10);
  }
  .bottombar.is-hidden{ transform: translateY(110%); }
  
  .bottombar__inner{
    padding:16px 0;
  }
  
  .bottombar__grid{
    display:grid;
    grid-template-columns: 1fr 1fr 1.2fr;
    gap:22px;
    align-items:start;
  }
  
  .bottombar__col{ display:grid; gap:6px; }
  
  .bottombar__link{
    display:block;
    font-weight:800;
    font-size:14px;
    color:#111827;
  }
  .bottombar__link:hover{ text-decoration: underline; }
  
  .bottombar__company{
    font-weight:900;
    font-size:14px;
    margin-bottom:6px;
  }
  
  .bottombar__meta{
    display:block;
    font-weight:800;
    font-size:14px;
    color:#111827;
    opacity:.92;
  }
  .bottombar__meta:hover{ text-decoration: underline; }
  
  @media (max-width: 880px){
    .bottombar__grid{
      grid-template-columns: 1fr;
      gap:14px;
    }
    .bottombar__inner{ padding:14px 0; }
  }
  /* =========================
     MODAL (Popup) ? Gesendet
     ========================= */
  .dtModal{
    position:fixed;
    inset:0;
    z-index:10000;
    display:none;
    align-items:flex-start;
    justify-content:center;
    padding:18px;
    background: rgba(15, 23, 42, .40);
  }
  .dtModal.is-open{display:flex}
  
  .dtModal__card{
    width:min(560px, 100%);
    margin-top: 10vh;
    background:#fff;
    border-radius:16px;
    overflow:hidden;
    border:1px solid rgba(0,0,0,.10);
    box-shadow: var(--shadow);
  }
  
  .dtModal__bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px 14px;
    color:#fff;
    font-weight:900;
    background: linear-gradient(135deg, var(--red), var(--red2));
    border-bottom: 3px solid color-mix(in srgb, var(--gold) 70%, #ffffff);
  }
  
  .dtModal__close{
    width:38px;
    height:34px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,.28);
    background: rgba(255,255,255,.14);
    color:#fff;
    font-weight:900;
    cursor:pointer;
    display:grid;
    place-items:center;
    line-height:1;
  }
  
  .dtModal__body{
    padding:18px 18px 22px;
    text-align:center;
  }
  
  .dtModal__text{
    margin: 0;
    font-weight:800;
    color:#111827;
  }
  
  /* =========================
     MOBILE MENU (Footer)
     ========================= */
  .dtNavModal{
    position:fixed;
    inset:0;
    z-index:10001;
    display:none;
    align-items:flex-end;
    justify-content:center;
    padding:14px;
    background: rgba(15, 23, 42, .35);
  }
  .dtNavModal.is-open{display:flex}
  
  .dtNavModal__card{
    width:min(520px, 100%);
    background:#fff;
    border-radius:16px;
    overflow:hidden;
    border:1px solid rgba(0,0,0,.10);
    box-shadow: var(--shadow);
  }
  
  .dtNavModal__bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px 14px;
    color:#fff;
    font-weight:900;
    background: linear-gradient(135deg, var(--red), var(--red2));
    border-bottom: 3px solid color-mix(in srgb, var(--gold) 70%, #ffffff);
  }
  
  .dtNavModal__left{
    display:grid;
    gap:2px;
    font-size:14px;
    font-weight:800;
  }
  
  .dtNavModal__contact{
    color:#fff;
    opacity:.95;
  }
  
  .dtNavModal__close{
    width:38px;
    height:34px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,.28);
    background: rgba(255,255,255,.14);
    color:#fff;
    font-weight:900;
    cursor:pointer;
    display:grid;
    place-items:center;
    line-height:1;
  }
  
  .dtNavModal__body{
    padding:14px;
  }
  
  .dtNavModal__title{
    font-weight:900;
    margin:0 0 10px;
  }
  
  .dtNavModal__links{
    display:grid;
    gap:10px;
  }
  
  .dtNavLink{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:12px 14px;
    border-radius:12px;
    border:1px solid rgba(0,0,0,.12);
    background:#fff;
    font-weight:900;
  }
  .dtNavLink:hover{
    background: rgba(0,0,0,.03);
  }
  
  /* ---------------- Responsive ---------------- */
  
    /* ---------------- Desktop: Footer nur am Seitenende (nicht fixed) ---------------- */
    @media (min-width: 981px){
      .section--tagline{ padding: 14px 0 40px; }
  
      .bottombar{
        position: static;
        left:auto; right:auto; bottom:auto;
        z-index:auto;
        max-height:none;
        overflow:visible;
        transform:none;
        box-shadow:none;
        border-radius:0;
        margin-top: 26px;
      }
      .bottombar.is-hidden{ transform:none; }
    }
  
  
  /* Desktop: AWZ-Navigation anzeigen, Mobile-Topbar ausblenden */
  @media (min-width: 981px){
    .awzNav{display:block}
    .topbar{display:none}
  }
  
  @media (max-width: 980px){
    .promoGrid{
      grid-template-columns:1fr;
      margin-top:0;
    }
    .benefitGrid{grid-template-columns:1fr}
    .promo__media{min-height:240px}
  }
  
  @media (max-width: 720px){
    .hero{
      height:auto;
      min-height: var(--hero-h);
    }
    .hero__inner{
      height:auto;
      align-items:center;
      padding:92px 0 26px;
    }
    .hero__overlay{
      background:linear-gradient(180deg, rgba(255,255,255,.90) 0%, rgba(255,255,255,.70) 100%);
    }
    .hero__content{ text-align:center; margin:0 auto; }
    .hero__actions{ justify-content:center; }
    .hero__lead{ margin-left:auto; margin-right:auto; max-width: 38ch; }
  
    .nav__toggle{display:inline-flex}
    .nav__menu{
      position:absolute;
      right:4%;
      top:66px;
      background:#fff;
      border:1px solid rgba(0,0,0,.10);
      box-shadow:var(--shadow);
      border-radius:16px;
      padding:12px;
      display:none;
      flex-direction:column;
      align-items:stretch;
      gap:10px;
      min-width:240px;
    }
    .nav__menu.is-open{display:flex}
    .nav__sep{display:none}
  
    .promo{grid-template-columns:1fr}
    .promo__media{
      min-height:0;
      height:220px;
    }
  
    .contactGrid{grid-template-columns:1fr}
    .bottombar__inner{flex-wrap:wrap;justify-content:center}
  
    /* Mobile: eigenes Men� + Footer-Button */
    .navItem--desktop{display:none;}
    .navItem--mobile{display:block;}
  
    .bottombar__cta--desktop{display:none;}
    .bottombar__cta--mobile{display:inline-flex;}
  
  }
  
  @media (max-width: 520px){
    .promo__content{ padding:18px; }
    .promo__content h3{ font-size: clamp(24px, 6.2vw, 28px); }
    .promo__media{ height:200px; }
  
    .benefitItems{grid-template-columns:1fr}
    .benefitItem{align-items:center}
  
    .dtModal__card{ margin-top: 8vh; }
  }
  
  @media (prefers-reduced-motion: reduce) {
    .topbar, .bottombar { transition:none; }
  }
  /* ---------------- AWZ Footer (ohne Shortcuts) ---------------- */
  .awzFooter{
    background: rgba(255,255,255,.88);
    border-top: 1px solid rgba(0,0,0,.08);
    padding: 34px 0 26px;
    margin-top: 28px;
  }
  .awzFooter__grid{
    display: grid;
    grid-template-columns: 1fr 1fr 1.2fr;
    gap: 24px;
    align-items: start;
  }
  .awzFooter__heading{
    font-weight: 900;
    font-size: 14px;
    letter-spacing: .2px;
    margin: 0 0 10px;
    color: #111827;
  }
  .awzFooter__list a{
    display: block;
    padding: 6px 0;
    color: #111827;
    font-weight: 700;
    text-decoration: none;
  }
  .awzFooter__list a:hover{
    text-decoration: underline;
  }
  .awzFooter__brandName{
    font-weight: 900;
    margin-bottom: 10px;
    color: #111827;
  }
  .awzFooter__meta{
    display: block;
    padding: 4px 0;
    color: #111827;
    font-weight: 700;
    text-decoration: none;
  }
  .awzFooter__meta:hover{
    text-decoration: underline;
  }
  
  @media (max-width: 820px){
    .awzFooter__grid{
      grid-template-columns: 1fr;
      gap: 18px;
    }
    .awzFooter__heading{
      margin-bottom: 6px;
    }
  }