:root {
	--logo-scale: 0.5;
}
    @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 */
    body.subpage{ background: var(--farbe5); color: var(--farbe2); }
    .page-spacer{ height: calc(var(--header-h, 100px) + 0px); } /*12px*/

    /* HERO */
    .ue-hero{ position:relative; height: 68vh; min-height: 460px; overflow:hidden; }
    .ue-hero .responsive-img{ filter: brightness(.58); }

    /* Optional: Logo/Claim – wenn gewünscht aktiv lassen */
    .ue-hero .Logo1{
      position:absolute; 
	    left:50%; 
	    top:35%;
	    transform: translate(-50%,-50%) scale(var(--logo-scale,1));
      width: clamp(260px, 26vw, 340px);
      z-index:2; will-change: transform, opacity;
    }

    /* Zitat: goldene Farbe, keine Einrückung */
.hf-quote {
  border-left: 4px solid var(--farbe1); /* 4px breiter goldener Balken */
  padding-left: 1rem;                   /* Abstand zwischen Balken und Text */
  margin-left: 0;                        /* evtl. Standard-Einzug entfernen */
  color: #333;                           /* normale Textfarbe */
  font-style: normal;                     /* keine Kursivschrift */
}

.hf-quote p {
  line-height: 1.5;
}

.o  {
  color: var(--farbe1);
}



/* Zitat-Footer */
blockquote .quote-footer {
  color: var(--farbe1); /* goldene Farbe */
  font-style: normal;   /* optional */
  margin-top: 1rem;
  background-color: transparent;
}



/* ===== Markenbeschreibung ===== */
.brand-story{
  padding: clamp(2rem, 10vw, 8rem);   /* links & rechts → MEHR ABSTAND */
  padding-top: 0%;
  padding-bottom: 3%;
  background: var(--farbe5, #111);
  color: var(--farbe8, #fff);
  
}

/* Hauptüberschrift */
.brand-headline{
  text-align: center;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);

  font-family: 'Cinzel', serif;
  font-size: clamp(2.2rem, 4.5vw, 3.2rem);
  font-weight: 600;
  letter-spacing: 0.04em;

  color: var(--farbe1, #b08a2e);
  font-size: clamp(3.0rem, 3vw, 2.2rem);
}

.brand-grid{
  display: grid;
  grid-template-columns: 1.15fr 1.2fr 1.15fr; /* Bildspalte breiter */
  gap: clamp(1.5rem, 3vw, 3rem);
  max-width: 1400px;
  margin: 0 auto;
  align-items: center;
}



/* Text */
.brand-text{
  font-size: 1.05rem;
  line-height: 1.7;
}

.brand-text p{
  margin-bottom: 1.2rem;
}

.brand-text.left{
  text-align: right;
}

.brand-text.right{
  text-align: left;
}

.brand-highlight{
  margin-top: 1.5rem;
  font-size: 1.2rem;
  color: var(--farbe1);
}

/* Bild */
.brand-image img{
  width: 100%;              /* füllt Bildspalte */
  max-width: 420px;         /* optionales Limit */
  margin: 0 auto;
  position: relative;
}

/* Hover-Zoom für Markenbild */
.brand-image{
  overflow: visible; /* wichtig: Zoom bleibt im Rahmen */
}

.brand-image img{
  transition: transform 0.6s ease; /* weiche Animation */
  will-change: transform;
}

.brand-image:hover img{
  transform: scale(1.05); /* 5 % größer */
}


/* ===== Responsive ===== */
@media (max-width: 900px){
  .brand-grid{
    grid-template-columns: 1fr;
    text-align: center;
  }

  .brand-headline{
    font-size: clamp(1.8rem, 4.5vw, 3.2rem);
  }

  

  .brand-text.left,
  .brand-text.right{
    text-align: left;
  }

  .brand-image{
    order: -1; /* Bild zuerst auf Mobile */
  }

  .brand-image img{
    margin: 0 auto 1.5rem;
  }
}





/*Erstes Bild*/
 





.ue-claim{
  position:absolute; 
	left:50%; 
	top:65%;
	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(1100px,92vw); */
  color: var(--farbe8); 
	text-shadow: 0 2px 12px rgba(0,0,0,.45); 
	padding: 0 .75rem;
}

.ue-claim h1{ 
  margin:0 0 .2rem; 
  font-family: var(--font-serif,'Cinzel',serif); 
  font-size: clamp(1.4rem,3.6vw,2.4rem); 
  color: var(--farbe1); 
}

	.ue-claim h2{
    color: var(--farbe1);
    font-size: 2.3rem;
    font-family: serif;
	}
	
    .ue-claim p{ margin:0; font-family: var(--font-sans,'Roboto',sans-serif); font-size: clamp(1rem,2.2vw,1.2rem); opacity:.95; }

    /* Intro */
    .ue-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.7;
    }
    .ue-intro p{ 
	margin:0; 
	font-size: 1.3rem; /*Wunsch laut Christian 24.10.2025 */
    font-weight: bold;/*Wunsch laut Christian 24.10.2025 */
	text-align: justify;
}

    .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%);
    }

    /* Zweispaltige Story – inspiriert von deiner Bildergalerie (Split) */
    .ue-story{
      width:min(1200px,92vw); 
      margin: 0 auto clamp(32px,6vw,56px);
      display:grid; 
      grid-template-columns: 1fr 1fr; 
      align-items:center; 
      gap: clamp(20px,4vw,64px);
    }
    .ue-story .ue-img{
      justify-self:start; 
      width:100%; 
      display:block; 
      border-radius:24px;
      box-shadow: 0 14px 36px rgba(0,0,0,.18); 
      object-fit:cover; aspect-ratio: 4/3; 
      background: var(--farbe8, #fff);
    }

    .ue-story .ue-text{ 
      justify-self:end; 
      width: min(560px, 42vw);
      color: var(--farbe8); 
    }

    .ue-story h2{ 
      margin:0 0 .5rem; 
      font-family: var(--font-serif,'Cinzel',serif); 
      color: var(--farbe1); 
      font-size: clamp(1.4rem,3.2vw,2rem); 
    }

    .ue-story p{ 
      margin:0; 
      line-height:1.7; 
    }

    .o  {
  color: var(--farbe1);
}

    /* Team-Profile (Cards) */
    .team{
      width:min(1200px,92vw); margin: 0 auto clamp(48px,8vw,96px);
      display:grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
      gap: clamp(16px,2.6vw,28px);
    }
    .team-card{
      background: rgba(255,255,255,.02); color: var(--farbe8); 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;
    }
    .team-card:hover{ transform: translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.18); }
    .team-photo{ width:100%; aspect-ratio: 4/3; object-fit:cover; display:block; background: var(--farbe8,#fff); }
    .team-body{ padding: 1rem 1rem 1.2rem; display:grid; gap:.5rem; }
    .team-body h3{ font-family: var(--font-serif,'Cinzel',serif); color: var(--farbe1); margin:0; font-size:1.25rem; }
    .team-role{ font-size:.95rem; opacity:.85; }
    .tagline{ font-size:.95rem; opacity:.9; }

    /* Leistungsblöcke (Zuchtkompetenz & Bestäubung) */
    .feature{
      width:min(1200px,92vw); 
      margin: 0 auto clamp(40px,8vw,96px);
      display:grid; 
      grid-template-columns: 1fr 1fr; 
      gap: clamp(20px,4vw,64px); 
      align-items:center;
    }

    .feature .f-text .p{ 
      order:1;
     }
    .feature .f-media{ 
      order:2; 
    }
    .feature h2{ 
      margin:0 0 .5rem; 
      font-family: var(--font-serif,'Cinzel',serif); 
      color: var(--farbe1); 
      font-size: clamp(1.4rem,3.2vw,2rem); 
    }

    .feature p{ 
      margin:.25rem 0; 
      line-height:1.7; 
      color: var(--farbe8);
    }

    .feature .f-img{ 
      width:100%; 
      aspect-ratio: 4/3; 
      object-fit:cover; 
      border-radius:24px; 
      box-shadow: 0 14px 36px rgba(0,0,0,.18); 
      background: var(--farbe8,#fff); 
    }

    /* kleine Badge/Stat Optik */
    .chips{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.5rem; }
    .chip{
      padding:.25rem .6rem; border-radius:999px; font-size:.9rem;
      background: var(--farbe10, rgba(255,255,255,.06));
      color: var(--farbe2); border:1px solid rgba(255,255,255,.12);
    }

    .stats{
      display:grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr));
      gap: clamp(12px,2vw,16px); margin-top: .8rem;
    }
    .stat{
      background: rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.08);
      border-radius:12px; padding:.8rem 1rem; text-align:center;
    }
    .stat b{ display:block; font-size:1.25rem; color: var(--farbe1); }

    /* Reihenfolge drehen auf kleiner Breite */
    @media (max-width: 960px){
      .ue-story{ grid-template-columns:1fr; }
      .ue-story .ue-text{ width:100%; justify-self:center; }
      .feature{ grid-template-columns:1fr; }
      .feature .f-text, .feature .f-media{ order:unset; }
    }
	
	
	/* Grundlayout: 2 Spalten, Bild + Text */
.feature{
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(16px, 3vw, 48px);
  margin: clamp(20px, 4vw, 60px) auto;
  width: min(1200px, 92vw);
}

/* Standard-Reihenfolge: Text links, Bild rechts (wie dein Feature 1) */
.feature .f-text  { order: 1; }
.feature .f-media { order: 2; }

/* Für jeden GERADEN Block umdrehen: Bild links, Text rechts */
.feature:nth-of-type(even) .f-text  { order: 2; }
.feature:nth-of-type(even) .f-media { order: 1; }

/* Bildstil */
.f-img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 40%;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,.12);
}



/* Optional: hübsche Typo in f-text */
.f-text h2{
  font-family: var(--font-serif, serif);
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  color: var(--farbe1, #BE793E);
  margin-bottom: .6rem;
}
.f-text p{
  
  line-height: 1.55;
  margin: .4rem 0;
}
.stats{ display: flex; gap: 1rem; flex-wrap: wrap; margin-top: .6rem; }
.stat{ background: rgba(0,0,0,.06); padding: .4rem .7rem; border-radius: 8px; }
.chips{ display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .6rem; }
.chip{ background: rgba(190,121,62,.18); color: var(--farbe1,#BE793E); padding: .3rem .6rem; border-radius: 999px; }

/* Fade-in (falls du deine allgemeine Klasse nutzt) */
.fade-in-on-scroll{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s ease, transform .7s ease;
  will-change: opacity, transform;
}
.fade-in-on-scroll.visible{
  opacity: 1;
  transform: none;
}

/* Mobil: untereinander, zentriert → Reihenfolge wieder natürlich */
@media (max-width: 900px){
  .feature{
    grid-template-columns: 1fr;
    text-align: center;
  }
  .feature .f-text, .feature .f-media{ order: unset; }
}