/* Grundfarbe für alle Links */
body {
	margin: 0;
	font-family:'IBM Plex Sans',sans-serif;
	background: #F7F6F2;
}

.LF {
    position: absolute;
	right: 32px;
    top: 50%;
    transform: translateY(-50%);
}

.card {
	position: relative;
	background: #FFFFFF;
	border: 1px solid #E4E2DC;
	border-radius: 10px;
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}


/* Bisherige Header-Einstellungen – zur Referenz auskommentiert:
header {
	height:160px;
	flex-shrink:0;
	border-bottom:1px solid #E4E2DC;
	display:flex;
	justify-content:center;
	background-color: #FFF;
	background-image: url(https://bartsch.re/img/header/Header_Bartsch_Cotinga_Halloween.png);
	background-repeat: no-repeat;
	background-position: top center;
	background-attachment: fixed;
}
*/

/* Header mit endlos laufendem Hintergrundvideo */
header {
	position: relative;
	height: 160px;
	min-height: 160px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	isolation: isolate;
}

.header-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 0;
	pointer-events: none;
}

/* PNG-Overlay über dem Video: Datei in img/header/Video_Overlay.png ablegen */
.header-overlay {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	z-index: 1;
	pointer-events: none;
}

/* Logo, Navigation und weitere Header-Inhalte liegen über Video und PNG */
.header-content {
	position: relative;
	z-index: 2;
}

.nav-accent {
	display: flex;
	gap: 20px;
	font-size: 15px;
	font-weight: 500;
	margin-right: 240px;
}

.nav-accent a {
    color: #111827;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, text-decoration-color 0.2s ease;
    padding: 10px;
	border: 1px solid #FFFFFF00;
	border-radius: 6px;
	text-decoration: none;
}

/* Standard-Links: Akzentfarbe beim Hover */
.nav-accent a:hover,
.nav-accent a:focus-visible {
	background-color: #FFFFFF;
	border: 1px solid #E4E2DC;
	color: #3AA699;
}

.button1 {
	height: 44px;
	padding: 0 22px;
	display: flex;
	align-items: center;
	background: #17325C70;
	color: #FFFFFF;
	border-radius: 6px;
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	display: none;
}

.button1:hover{
	background: #3AA69970;
	color: #FFFFFF;
	display: none;
}

.button2 {
	height: 52px;
	padding: 0 28px;
	display: flex;
	align-items: center;
	background: #17325C;
	color: #FFFFFF;
	border-radius: 6px;
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
}

.button2:hover{
	background: #3AA699;
	color: #FFFFFF;
}

.button3 {
	height: 52px;
	padding: 0 28px;
	display: flex;
	align-items: center;
	border: 1.5px solid #17325C;
	color: #17325C;
	border-radius: 6px;
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
	box-sizing: border-box;
}

.button3:hover{
	border: 1.5px solid #3AA699;
	color: #3AA699;
}

.button4 {
	height: 52px;
	padding: 0 28px;
	display: flex;
	align-items: center;
	background: #FFFFFF;
	color: #17325C;
	border-radius: 6px;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
}

.button4:hover{
	background: #3AA699;
}

.button5 {
	height: 52px;
	padding: 0 28px;
	display: flex;
	align-items: center;
	border: 1.5px solid #FFFFFF;
	color: #FFFFFF;
	border-radius: 6px;
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
	box-sizing: border-box;
}

.button5:hover {
	border: 1.5px solid #FFFFFF;
	color: #17325C;
	background-color: #FFFFFF;
}

.button6 {
	height:52px;
	padding:0 28px;
	display:flex;
	align-items:center;
	justify-content:center;
	border:1.5px solid #FFFFFF;
	color:#FFFFFF;
	border-radius:6px;
	font-size:16px;
	font-weight:500;
	text-decoration:none;
	box-sizing:border-box;
}

.button6:hover {
	border: 1.5px solid #3AA699;
	color: #3AA699;
}

.footer-link {
	color: #C5CEDC;
	text-decoration: underline;
}

.footer-link:hover,
.footer-link:focus-visible {
    text-decoration: none !important;
}

.link2 {
	color: #17325C;
}

.link2:hover,
.link2:focus-visible {
	color: #3AA699;
}

.link3 {
	font-size: 15px;
	font-weight: 500;
	color: #17325C;
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 6px;
}

.link3:hover,
.link3:focus-visible {
	color: #3AA699;
}

/* Bartsch Logo Animation */

.bartsch-brand {
  width: 221px;
  max-width: 100%;
}

.bartsch-brand__logo {
  display: block;
  width: 100%;
  height: auto;
}

.bartsch-brand__subtitle {
  position: relative;
  height: 18px;
  overflow: hidden;
  margin-left: 53px;
  margin-top: 2px;
  font: 8.6px/18px Arial, Helvetica, sans-serif;
  letter-spacing: 0px;
}

.bartsch-brand__subtitle .subtitle {
  position: absolute;
  inset: 0;
  white-space: nowrap;
  opacity: 0;
  animation: bartsch-fade 8s infinite;
}

.bartsch-brand__subtitle .subtitle--estate {
  animation-delay: 0s;
  color: #32afa6;
}

.bartsch-brand__subtitle .subtitle--cotinga {
  animation-delay: 4s;
  color: #32afa6;
}

@keyframes bartsch-fade {
  0%, 5%  { opacity: 0; }
  10%, 40% { opacity: 1; }
  45%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .bartsch-brand__subtitle .subtitle {
    animation: none;
  }

  .bartsch-brand__subtitle .subtitle--estate {
    opacity: 1;
	color: #32afa6;
  }

  .bartsch-brand__subtitle .subtitle--cotinga {
    display: none;
	color: #32afa6;
  }
}

/* Logo-Animation */

.bartsch-logo {
  position: relative;
  width: 221px; /* An eure tatsächliche Logobreite anpassen */
  aspect-ratio: 467 / 182;
}

.bartsch-wordmark {
  display: block;
  width: 100%;
  height: auto;
}

/* Der Vogel liegt exakt auf seiner finalen Logo-Position. */
.bartsch-bird {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%; /* An den Vogel-Ausschnitt anpassen */
  height: auto;

  transform-origin: 50% 70%;
  will-change: transform, opacity;
}

/* Wird beim Laden einmal gestartet. */
.bartsch-bird.is-flying {
  animation: bird-arrival 1.8s
    cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

@keyframes bird-arrival {
  0% {
    transform: translate(-100vw, -75vh)
      rotate(-24deg) scale(0.72);
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  48% {
    transform: translate(-45vw, -32vh)
      rotate(12deg) scale(0.92);
  }

  72% {
    transform: translate(-12vw, -8vh)
      rotate(-7deg) scale(1.04);
  }

  88% {
    transform: translate(3px, -2px)
      rotate(2deg) scale(0.99);
  }

  100% {
    transform: translate(0, 0)
      rotate(0deg) scale(1);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bartsch-bird.is-flying {
    animation: none;
    transform: none;
    opacity: 1;
  }
}