body, html {
      margin: 0;
      padding: 0;
      height: 100%;
      background: #fff;
    }

    /* Remove top gray strip */
    #page-wrapper::before,
    #header::before {
      display: none !important;
      background: none !important;
      content: none !important;
    }
    #page-wrapper {
      padding-top: 0 !important;
      margin-top: 0 !important;
      background: none !important;
    }
    #header {
      background: none !important;
      box-shadow: none !important;
      border: none !important;
      margin: 0 !important;
      padding: 1.5em 2em !important;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      z-index: 10;
    }
    #header h1 { margin: 0; }
    #header h1 img {
      height: 100px;
      width: auto;
      background: white;
      padding: 24px 28px;
      border-radius: 0 0 10px 10px;
      display: block;
      margin-left: 25px;
    }
    #nav ul { list-style: none; margin: 0; padding: 0; }
    #nav a { color: white !important; text-decoration: none; }

    /* Hero */
    .fullscreen-image {
      position: relative;
      width: 100%;
      height: 100vh;
      background: url('../../images/referenzen.jpg') no-repeat center center/cover;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: white;
      text-align: center;
    }
    .fullscreen-image h2 {
      background: rgba(0, 0, 0, 0.5);
      padding: 1em 2em;
      border-radius: 10px;
      font-size: 2em;
      line-height: 1.4;
      max-width: 80%;
      z-index: 5;
    }
    @media (max-width: 600px){
      .fullscreen-image h2{ font-size:1.25rem; }
    }

    /* References grid */
    .references {
      max-width: 1200px;
      margin: clamp(2rem, 6vw, 5rem) auto;
      padding: 0 2rem;
    }
    .references h3 {
      margin: 0 0 1.25rem 0;
      text-transform: uppercase;
      letter-spacing: .05em;
      font-weight: 500;
      font-size: clamp(1.25rem, 2.4vw, 1.75rem);
      color: #222;
    }
    .ref-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(1rem, 2.5vw, 2rem);
    }
    .ref-card { display: flex; flex-direction: column; }
    @media (max-width: 900px) {
      .ref-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 640px) {
      .ref-grid { grid-template-columns: 1fr; }
    }
    .ref-card a {
      display: block;
      position: relative;
      border-radius: 18px;
      overflow: hidden;
      text-decoration: none;
      background: #111;
    }
    .ref-card img {
      width: 100%;
      height: 100%;
      display: block;
      aspect-ratio: 4/3;
      object-fit: cover;
    }
    .ref-card .overlay {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      opacity: 0;
      transition: opacity .25s ease;
      background: rgba(0,0,0,.35);
    }
    .ref-card a:hover .overlay,
    .ref-card a:focus .overlay { opacity: 1; }
    .ref-card .overlay .pill {
      background: rgba(255,255,255,.9);
      color: #111;
      font-size: .9rem;
      padding: .5rem .9rem;
      border-radius: 999px;
      font-weight: 600;
    }
    .ref-meta {
      margin-top: .6rem;
      color: #222;
    }
    .ref-title {
      font-weight: 800;
      font-size: 1.15rem;
      letter-spacing: .02em;
    }
    .ref-sub {
      opacity: .85;
      font-size: .95rem;
      line-height: 1.4;
    }

    /* Footer */
    .footer {
      background:#566879;
      color:#fff;
      padding:24px;
      position: relative;
    }
.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.1fr auto; /* third column for SVG */
  column-gap: clamp(24px, 4vw, 80px);
  row-gap: 4px;
  align-items: start;
}
    .footer-nav ul { list-style:none; margin:0; padding:0; }
    .footer-nav li + li { margin-top:10px; }
    .footer-nav a {
      display:block; text-decoration:none; color:#fff; font-weight:800; line-height:1.05;
      letter-spacing:.02em; text-transform:uppercase; font-size:clamp(16px, 3vw, 26px);
    }
    .footer-nav .accent > a { color:#F39C12; }

    .footer-contact { max-width:520px; }
    .footer-contact p { margin:6px 0 0; color:rgba(255,255,255,.92); font-size:12px; }
    .footer-contact p strong { color:#fff; font-size:14px; }
    .footer-contact a { color:inherit; text-decoration:none !important; }
    .footer-contact a:hover { text-decoration:none !important; }

    .footer-nav li, .footer-nav a { border:0 !important; box-shadow:none !important; background-image:none !important; }
    .footer-nav li { border-top:0 !important; border-bottom:0 !important; padding:0; }
    .footer-nav li::before, .footer-nav li::after, .footer-nav a::after { content:none !important; display:none !important; }

    .footer-legal {
      margin-top:4px;
      font-size:11px;
      color:rgba(255,255,255,0.8);
      grid-column:1;
      grid-row:2;
    }
    .footer-legal a { color:rgba(255,255,255,0.8); text-decoration:none !important; border-bottom:none !important; }
    .footer-legal a:hover { text-decoration:none !important; border-bottom:none !important; }
    .footer-figure {
      position: absolute;
      top: -24px;
      right: -10px;
      margin: 0;
      width: 260px;        /* larger logo; adjust as desired */
      height: auto;        /* preserve aspect ratio */
    }

@media (max-width: 800px){
  .footer-container { grid-template-columns:1fr; text-align:center; }
  .footer { padding:40px 20px; }
  .footer-figure {
    position: static;
    width: 120px;
    max-width: 60%;
    height: auto;
    margin: 20px auto 0;
    display: block;
  }
}