/**
 * @file
 * WDSB Header Image Styles.
 *
 * Version: 2026.02.02.203000
 * Autor: Willi da Silva Borges - WDSB Webdesign
 *
 * CSS-Variablen für flexible Positionierung:
 * --logo-top, --logo-left, --logo-right, --logo-bottom
 * --logo-max-height
 * --title-bottom, --title-left, --title-right
 * --copyright-bottom, --copyright-right
 */

/* CSS Custom Properties (anpassbar) */
.view-wdsb-header-image {
  --logo-top: 20px;
  --logo-left: 20px;
  --logo-right: auto;
  --logo-bottom: auto;
  --logo-max-height: clamp(80px, calc(29.179px + 13.374vw), 300px);

  --title-bottom: 60px;
  --title-left: 0;
  --title-right: 0;

  --copyright-bottom: 20px;
  --copyright-right: 20px;
}

/* Parent Container overflow hidden */
.view-wdsb-header-image,
.block-views-blockwdsb-header-image-block-1 {
  overflow-x: clip;
}

/* Container - volle Viewport-Breite */
.wdsb-header-image,
.view-wdsb-header-image .views-row {
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  box-sizing: border-box;
}

/* Bild-Wrapper */
.wdsb-header-image__image-wrapper {
  width: 100%;
  position: relative;
}

.wdsb-header-image__image-wrapper .field {
  margin: 0;
}

.wdsb-header-image__image-wrapper .field__label {
  display: none;
}

.wdsb-header-image__image-wrapper img {
  width: 100%;
  height: auto;
  max-height: 60vh;
  display: block;
  object-fit: cover;
}

/* Logo - flexibel positionierbar via CSS-Variablen */
.wdsb-header-image__logo-container {
  position: absolute;
  top: var(--logo-top);
  left: var(--logo-left);
  right: var(--logo-right);
  bottom: var(--logo-bottom);
  z-index: 3;
}

.wdsb-header-image__logo {
  max-height: var(--logo-max-height);
  width: auto;
  display: block;
}

/* Titel - über dem Bild positioniert */
.wdsb-header-image__title-wrapper {
  position: absolute;
  bottom: var(--title-bottom);
  left: var(--title-left);
  right: var(--title-right);
  padding: 0 5%;
  z-index: 2;
}

.wdsb-header-image__title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  margin: 0;
}

/* Copyright - unten rechts auf dem Bild */
.wdsb-header-image__copyright {
  position: absolute;
  bottom: var(--copyright-bottom);
  right: var(--copyright-right);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  z-index: 2;
}

/* Gradient overlay für bessere Lesbarkeit */
.view-wdsb-header-image .views-row::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
  pointer-events: none;
  z-index: 1;
}

/* Responsive */
@media (max-width: 768px) {
  .view-wdsb-header-image {
    --logo-top: 10px;
    --logo-left: 10px;
    --logo-max-height: 60px;
    --title-bottom: 50px;
    --copyright-bottom: 15px;
    --copyright-right: 15px;
  }

  .wdsb-header-image__title {
    font-size: 1.5rem;
  }

  .wdsb-header-image__image-wrapper img {
    max-height: 40vh;
  }

  .wdsb-header-image__copyright {
    font-size: 0.65rem;
  }
}
.header-image {
	position: relative;
}
.header-logo {
  width: clamp(80px, calc(29.179px + 13.374vw), 300px);
  height: auto;
  display: block;
	position: absolute;
	top: 10px;
	left: 10px;
}
.header-copyright {
  font-size: clamp(1rem, 0.8845rem + 0.4863vw, 1.5rem);
	position: absolute;
	bottom: 10px;
	right: 10px;
	color: #fff;
}
.header-bottom {
	margin-top: -20px;
}
.topbar a{
  font-size: clamp(1rem, 0.8845rem + 0.4863vw, 1.5rem);
}