@media (min-width:768px){
      :root{ --logo-start:300px; --logo-end:520px; --bar-start:260px; --bar-end:600px; }
    }
    @media (min-width:1280px){
      :root{ --logo-start:360px; --logo-end:640px; --bar-start:320px; --bar-end:720px; }
    }

    /* ——— Seite-spezifische Helfer ——— */
    body.subpage{ background: var(--farbe5); color: var(--farbe2); }
    .page-spacerAUSZ{ height: calc(var(--header-h, 100px) + 0px); } /*12px*/

    /* Hero mit Hintergrundbild + Logo im Vordergrund (nutzt deine Klassen) */
    .ausz-hero{ 
      position: relative; 
      height: 90vh; 
      min-height: 440px; 
      overflow:hidden; 
    }

    .ausz-hero .responsive-img{ 
      filter: brightness(.55);
       
    }

    

    .ausz-hero .Logo1{
      position:absolute; 
      left:50%; 
      top:30%;
      transform: translate(-50%,-50%) scale(var(--logo-scale,1));
      width: clamp(300px, 28vw, 360px);
      height: auto;

      /* SVG-FARBE */
      color: var(--farbe1); /* z.B. Honig-Gelb */
      z-index:2; 
      will-change: transform, opacity;
    }

    

    .ausz-claim{
      position:absolute; left:50%; top:50%;
      transform: translateX(-50%) translate(var(--slogan-dx,0), var(--slogan-dy,0))
                 scale(var(--slogan-scale,1)) scaleX(var(--slogan-scaleX,1));
      bottom: clamp(8vh, 14vh, 18vh);
      text-align:center; z-index:3; max-width:min(1000px, 92vw);
      color: var(--farbe8);
      text-shadow: 0 2px 12px rgba(0,0,0,.45);
      padding: 0 .75rem;
	  min-width:95%;
    }
    .ausz-claim h1{
      /*font-family: var(--font-serif, 'Cinzel', serif);*/
      font-weight: 700;
      font-size: clamp(1.4rem, 3.6vw, 2.4rem);
      letter-spacing: .02em;
      margin: 0 0 .25rem;
      color: var(--farbe1);
	  font-size: 6rem;
	  font-weight: normal;
    }
    .ausz-claim p{
      font-family: var(--font-sans, 'Roboto', sans-serif);
      font-size: clamp(1rem, 2.2vw, 1.25rem);
      opacity:.95;
    }
    .o  {
  color: var(--farbe1);
}

    /* Intro-Textblock */
    .ausz-intro{
      width: min(1100px, 92vw);
      margin: clamp(24px, 5vw, 48px) auto;
      background: rgba(255,255,255,.03);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 16px;
      box-shadow: 0 10px 26px rgba(0,0,0,.10);
      padding: clamp(16px, 3.5vw, 28px);
      line-height: 1.65;
    }
    .ausz-intro p{ margin: 0; }

    /* Auszeichnungen Grid */
    .awards-grid{
      width: min(1200px, 92vw);
      margin: 0 auto clamp(48px, 8vw, 96px);
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: clamp(16px, 2.6vw, 28px);
    }
    .award-card{
      background: rgba(255,255,255,.02);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 16px; overflow:hidden;
      box-shadow: 0 10px 26px rgba(0,0,0,.12);
      transition: transform .2s ease, box-shadow .2s ease;
    }
    .award-card:hover{ transform: translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.18); }
    .award-card figure{ margin:0; }
    .award-card img{
      display:block; width:100%; height:auto; aspect-ratio: 4/3; object-fit: cover;
      background: var(--farbe8,#fff); cursor: zoom-in;
    }
    .award-caption{ padding: 1rem 1rem 1.2rem; display:grid; gap:.4rem; }
    .award-caption h3{
      font-family: var(--font-serif,'Cinzel',serif);
      color: var(--farbe1); font-size: 1.15rem; margin:0;
    }
    .award-meta{ display:flex; gap:.5rem; flex-wrap:wrap; font-size:.92rem; opacity:.85; }
    .badge{ padding:.2rem .55rem; border-radius:999px; background: var(--farbe10,rgba(255,255,255,.06));
            color: var(--farbe2); border:1px solid rgba(255,255,255,.12); font-size:.8rem; }

    /* Bild-Modal (leicht, kompatibel zu deinem Modal-Stil) */
    .modal{ display:none; position:fixed; inset:0; z-index:2000; background:rgba(0,0,0,.7);
            justify-content:center; align-items:center; flex-direction:column; padding:clamp(12px,3vw,24px); }
    .modal.open{ display:flex; }
    .modal-content{ max-width:min(1100px,92vw); max-height:82vh; border-radius:12px; object-fit:contain; background:#000; }
    .modal .caption{ margin-top:.75rem; color:var(--farbe8); opacity:.9; text-align:center; }

  
    .modal .close{ position:absolute; top:14px; right:18px; color:var(--farbe8); font-size:2rem; font-weight:700; cursor:pointer; }

    .thin-divider{
      height: 2px; width: min(92vw, 1200px); margin: clamp(16px,3.5vw,32px) auto;
      background: linear-gradient(90deg,transparent 0, rgba(0,0,0,.12) 20%, rgba(0,0,0,.12) 80%, transparent 100%);
    }
	
	/* === Laborgeprüft-Badges ===================================== */
.lab-badge{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font-sans, 'Roboto', sans-serif);
  font-weight: 800;
  letter-spacing: .02em;
  margin-top: .8rem;
  user-select: none;
  will-change: transform, opacity, filter;
}
.lab-badge .icon{ display:inline-block; flex:0 0 auto; }

/* Pill (Clean) */
.lab-badge.pill{
  padding: .45rem .85rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--farbe1,#b5905b), var(--farbe2,#caa770));
  color: var(--farbe8, #fff);
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
  font-size: clamp(.9rem, 2.2vw, 1rem);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.lab-badge.pill:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.32);
  filter: brightness(1.03);
}

/* Ribbon (Award-Look) */
.lab-badge.ribbon{
  position: relative;
  padding: .5rem 1rem .5rem 1rem;
  background: var(--farbe8, #fff);
  color: var(--farbe3, #222);
  border: 2px solid var(--farbe1, #b5905b);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  font-size: clamp(.9rem, 2.2vw, 1rem);
}
.lab-badge.ribbon::before,
.lab-badge.ribbon::after{
  content:"";
  position:absolute;
  bottom:-10px; width: 12px; height: 14px;
  background: var(--farbe1, #b5905b);
  clip-path: polygon(0 0, 100% 0, 100% 66%, 50% 100%, 0 66%);
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.18));
}
.lab-badge.ribbon::before{ left: 8px; }
.lab-badge.ribbon::after{ right: 8px; }

/* leichte Eingangsanmiation für Badge (greift deine Fade-Klasse auf) */
.fade-in-on-scroll .lab-badge,
.ausz-claim .lab-badge{
  animation: badge-pop .6s ease .25s both;
}
@keyframes badge-pop{
  0%{ opacity:0; transform: translateY(8px) scale(.98); }
  100%{ opacity:1; transform: translateY(0) scale(1); }
}


.ausz-claim h1{
  margin-bottom: .2rem;      /* dichter */
}
.ausz-claim p{
  margin: 0;                  /* kein extra Abstand */
  opacity: .95;
  
}

.award-caption p {
  color: var(--farbe8);
}