@charset "utf-8";
/* CSS Document */

/* --------------------------------------------------------------
   Header mit cenmax Logo - Weisser/Schwarzer Hintergrund
-------------------------------------------------------------- */

/* Logo Header */
.site-logo {
  display: block;
  max-width: 100%;
  height: auto;
  max-height: 36px;
  margin-right: 8px;
}

#header {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

#header.header--hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

#header.header.header-light {
  background-color: #fff;
}

/* --------------------------------------------------------------
   HERO: Dunkeler Farbverlauf
-------------------------------------------------------------- */

.hero.section.dark-background {
  background-color: #303030;
  background-image: radial-gradient( ellipse farthest-corner , #6b6b6b 0%, rgba(48, 48, 48, 0) 50%);
  color: #fff;
  min-height: 400px;
}

/* --------------------------------------------------------------
   HERO: Layering (Background vs. Content)
-------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
}

/* NUR das Background-Image */
.hero .hero-bg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* Content über dem Background */
.hero .container {
  position: relative;
  z-index: 2;
}
	
	
@media (max-width: 991.98px) {
	.hero {
  		padding-top: 100px;
  		padding-bottom: 60px; 
	  	min-height: 40vh;
  		min-height: 40svh;}
}

/* --------------------------------------------------------------
   Typo Header
-------------------------------------------------------------- */
.hero-title {
  font-weight: 400;
  color: #000;
  line-height: 1.15;
  margin: 0; /* verhindert Browser-Default-Abstände */
}
	
/* XL-Block */
.hero-title--xl {
  display: block;
  font-weight: 900; /* Roboto Black */
  text-transform: uppercase;
  font-size: clamp(3.75rem, 7.8125vw, 5.625rem);
  letter-spacing: 0.02em;
  line-height: 1.0;
}

/* Jede Zeile im XL-Block (ersetzt <br>) */
.hero-title--line {
  display: block;
  margin: 0;
  padding: 0;
  margin-bottom: 0.14em;
}

/* Halb so groß wie XL */
.hero-title--md {
  font-size: 0.75em;
  letter-spacing: 0.02em;
  font-weight: 700;
}

.hero-title--sm {
  font-size: 0.5em;
  letter-spacing: 0.02em;
  font-weight: 700;
}

/* Akzent */
.hero-title--accent {
  color: #EC6707;
  font-weight: 900;
  text-shadow: 0 0 0.5px currentColor;
  margin-bottom: 0.22em;
}

/* Brand-Zeile */
.hero-title--brands {
  display: block;
  margin-top: 0.55em;
  font-size: 0.45em;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #000;
  opacity: 0.85;
}

.hero-title--white {
  color: #fff;
}

.hero-title--black {
  color: #000;
}
.hero-title--orange {
  color: #EC6707;
}
	
@media (max-width: 991.98px) {
  .hero-title--xl {
    font-size: clamp(2.6rem, 5.5vw, 3.9rem); /* ≈ -30% */
    letter-spacing: 0.015em;
  }

  .hero-title--line {
    margin-bottom: 0.12em;
  }

  .hero-title--md {
    font-size: 0.55em; /* leicht größer relativ, damit lesbar */
  }
}


/* --------------------------------------------------------------
   Claim unter der Hero-Headline
-------------------------------------------------------------- */
.hero-claim {
  margin-top: 1.5rem;
  padding-top: 0.6rem;
  line-height: 1.4;
  color: #EC6707;
  margin-bottom: 0; /* verhindert extra Abstand */
}

.hero.section.dark-background .hero-claim {
  color: #fff;
}


/* WICHTIG: Brand gezielt stylen + Underline/Border-Regel überschreiben */
.hero .hero-claim__brand,
.hero .hero-claim__brand:hover,
.hero .hero-claim__brand:focus {
  display: inline-block;
  margin-right: 0.4em;
  font-weight: 700;
  font-size: 1.35rem;
  color: #EC6707;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 0; /* überschreibt .hero p span { border-bottom: ... } */
}

.hero.section.dark-background .hero-claim__brand,
.hero.section.dark-background .hero-claim__brand:hover,
.hero.section.dark-background .hero-claim__brand:focus {
  color: #EC6707;
}

/* Typed Text */
.hero-claim .typed {
  font-size: 1.35rem;
  font-weight: 500;
  color: #000;
}

/* Typed Text */
.hero.section.dark-background .hero-claim .typed {
  color: #fff;
}

/* Cursor etwas dezenter */
.hero-claim .typed-cursor {
  opacity: 0.6;
}

/* --------------------------------------------------------------
   Rechtes Visual im Hero
-------------------------------------------------------------- */

/* Wrapper nur so groß wie das Bild */
.hero-image-wrap {
  position: relative;
  display: inline-block;
  transform: translate(0px, 0px); /* Offset hier */
}

@media (min-width: 992px) {	
	.hero-image-wrap {
  	transform: translate(-40px, 0px); /* Offset hier */
	}	
}
@media (min-width: 1400px) {
	.hero-image-wrap {
  	transform: translate(-100px, 0px); /* Offset hier */	
	}
}


/* Rechtes Visual im Hero – nur Bild-Regeln */
.hero .hero-visual__img {
  width: clamp(220px, 28vw, 380px);
  height: auto;
  max-width: 100%;
  display: block;
  object-fit: contain;
  z-index: 2;

}

/* Optional: falls du hero-visual auch mal ohne Bootstrap nutzt */
.hero-visual { /* leer lassen oder nur Zusätze */ }

/* Mobile: falls du das Bild irgendwo auch mobil einblendest */
@media (max-width: 991.98px){
  .hero-visual{
    justify-content: center;  /* wirkt nur, wenn hero-visual flex ist */
    margin-top: 1.5rem;
  }
  .hero .hero-visual__img{
    width: clamp(140px, 50vw, 220px);
  }
}


/* --------------------------------------------------------------
   Rechtes Siegel über Hero
-------------------------------------------------------------- */

/* Siegel jetzt relativ zum Bild-Wrap */
.hero .hero-seal {
  position: absolute;
	
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-8deg);

  width: clamp(240px, 22vw, 400px);
  height: auto;
  object-fit: contain;

  z-index: 5;
  opacity: 0;
  will-change: transform, opacity;
}

@media (min-width: 992px) {
  .hero .hero-visual img.hero-seal { width: 340px; }
}
@media (min-width: 1400px) {
  .hero .hero-visual img.hero-seal { width: 400px; }
}

/* AOS-Trigger-Klasse */
.hero-seal--scale.aos-animate{
  animation: sealIn 900ms cubic-bezier(.2,.8,.2,1) forwards;
}

/* Keyframes: translate + rotate + scale immer zusammen! */
@keyframes sealIn{
  0%   { opacity:0; transform: translate(-50%, -50%) rotate(-8deg) scale(4); }
  70%  { opacity:1; transform: translate(-50%, -50%) rotate(-8deg) scale(0.95); }
  100% { opacity:1; transform: translate(-50%, -50%) rotate(-8deg) scale(1); }
}