.bg--secondary-page h1,
.bg--secondary-page h2,
.bg--secondary-page h3,
.bg--secondary-page h4,
.bg--secondary-page p,
.bg--secondary-page a,
.bg--secondary-page dt.dl-title {
	color: #fff;
}

body.bg--secondary-page {
    background-color: var(--color-brand2);
}

.mod_navigation a.bg--secondary {
    background: transparent !important;
}

#header {
    border-bottom: none;
}

.topbar-nav--new {
    justify-content: center;
    display: flex;
}

.topbar-inner {
	display: block;
}

li.mainnav__list-item.searchbar__list-tem {
    display: none;
}

/*#main {
    margin-top: 5em;
}*/

/*.extra-margin #main {
	margin-top: 5em;
}*/

.animate-text.single {
    margin-bottom: 30em;
}

img.img-frame {
    border: solid 4px #fff;
}

.ce_text.songtitel-left p,
.ce_text.songtitel-right p {
    font-size: 1.25em;
}

.songtitel-left a:after,
.songtitel-right a:after {
    content: "\f0c1";
    font-family: 'Font Awesome 6 Free';
    font-weight: 600;
    padding-left: 5px;
}

.startpage-mt-5 {
	margin-top: 5em;
}

/* overlap image */
.grid-container {
  display: grid;
  align-items: start;
  grid-template: repeat(6, [row] 1fr) / repeat(12, [col] 1fr);
  grid-gap: 20px;
  max-width: 650px;
  margin: 0 auto;
  overflow: hidden;
  padding-right: 2em;
}
.grid-container .ce_rsce_imagebar {
    padding-top: 1rem;
}
.item-1,
.item-2,
item-3 {
  align-items: center;
  justify-items: center;
  line-height: 1;
  color: white;
  display: flex;
}
.item-1 {
  grid-column: col 2 / span 7;
  grid-row: row 2 / span 3;
  z-index: 2;
}

.item-2 {
  grid-column: col 5 / span 8;
  grid-row: row 1 / span 6;
  z-index: 1;
}

.item-3 {
  grid-column: col 3 / span 7;
  grid-row: row 4 / span 3;
  z-index: 2;
}

/*img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.95);
  max-height: calc(90vh - 40px);
}*/

.grid-container h3 {
    font-size: 4em;
    text-shadow: 2px 3px 0px rgba(0, 0, 0);
	  overflow: hidden;
	display: block;
	line-height: 1.1;
}

/* ---------- tab content ---------- */
.tab__button-bar {
    border-bottom: 2px solid var(--color-brand2);
}
.ce_rsce_tab_content .tab__inner {
    display: block;
}

/* ----- next to tab content ----- */
img.img--song {
    margin-top: 7em;
}



.ce_image.effect-ken-burns figure {
    width: 100%;
    height: 400px;
}


/* ---------- photo/text grid ---------- */

html {
	 box-sizing: border-box;
	 color: #333;
	 text-rendering: optimizeLegibility;
	 -webkit-font-smoothing: antialiased;
	 -moz-osx-font-smoothing: grayscale;
}
 html *, html *:before, html *:after {
	 box-sizing: inherit;
}
 .flex-grid {
	 width: 100%;
	 display: flex;
	 flex-direction: row;
	 flex-wrap: nowrap;
	 align-content: stretch;
}
 .flex-grid .size-1 {
	 flex: 1;
}
 .flex-grid .size-2 {
	 flex: 2;
}
 .item.size-1, .item.size-2, .tall-item {
	 display: flex;
	 flex-direction: column;
}
 .item.size-1 .image-wrapper:before {
	 display: block;
	 content: " ";
	 width: 100%;
	 padding-top: 100%;
}
 .item.size-1:first-of-type .image-wrapper {
	 transform: translateY(300px);
}
.andrae .item.size-1:first-of-type .grad-image {
	 background-image: url("https://andrae-bahlmann-harjes.de/files/content/bildmaterial/IMG_3429.jpg");
}
.levy .item.size-1:first-of-type .grad-image {
	 background-image: url("https://andrae-bahlmann-harjes.de/files/content/bildmaterial/fritz-levy.png");
}

/* .item.size-1:first-of-type .grad-overlay {
	 background: linear-gradient(to bottom, #006878 0%, #556aa5 100%);
}*/
 .item.size-1:last-of-type .image-wrapper {
	 transform: translateX(300px);
}
.andrae .item.size-1:last-of-type .grad-image {
	 background-image: url("https://andrae-bahlmann-harjes.de/files/content/bildmaterial/oswald-andrae.jpg");
}
.levy .item.size-1:last-of-type .grad-image {
	 background-image: url("https://andrae-bahlmann-harjes.de/files/content/bildmaterial/Fritz-Tour-Sommer-810021.jpg");
}
/* .item.size-1:last-of-type .grad-overlay {
	 background: linear-gradient(to bottom, #51c3c3 0%, #006878 100%);
}*/
 .item.size-2 .image-wrapper:before {
	 display: block;
	 content: " ";
	 width: 100%;
	 padding-top: 50%;
}
 .item.size-2:first-of-type .image-wrapper {
	 transform: translateY(-300px);
}
 .item.size-2:first-of-type .grad-image {
	 background: linear-gradient(to bottom, #3a8787 0%, #006878 100%);
}
 .item.size-2:last-of-type .image-wrapper {
	 transform: translateX(300px);
}
 .item.size-2:last-of-type .grad-image {
	 background: linear-gradient(to bottom, #006878 0%, #3a8787 100%);
}
 .tall-item .image-wrapper {
	 transform: translateX(-300px);
}
.andrae .tall-item .grad-image {
	 background-image: url("https://andrae-bahlmann-harjes.de/files/content/bildmaterial/IMG_5199.JPG");
}
.levy .tall-item .grad-image {
	 background-image: url("https://andrae-bahlmann-harjes.de/files/content/bildmaterial/fritz-levy-rad-juz-sw.jpg");
}
/* .tall-item .grad-overlay {
	 background: linear-gradient(to bottom, #51c3c3 0%, #006878 50%, #556aa5 100%);
}*/
 .image-wrapper {
	 flex: 1;
	 width: 100%;
	 height: 100%;
	 min-height: 350px;
	 position: relative;
	 border: 2px solid white;
	 opacity: 0;
	 animation: fadeSlideIn 0.5s 0.5s forwards;
}
 .grad-overlay, .grad-image {
	 width: 100%;
	 height: 100%;
	 position: absolute;
	 top: 0;
	 left: 0;
}
 .grad-overlay {
	 z-index: 2;
	 opacity: 0.4;
}
 .grad-image {
	 background-repeat: no-repeat;
	 background-size: cover;
}
 .text-overlay {
	 width: 80%;
	 display: inline-block;
	 position: absolute;
	 z-index: 2;
	 top: 50%;
	 left: 50%;
	 transform: translate(-50%, -50%);
	/* font-size: 1.6vw;
	 line-height: 2vw; */
	 color: white;
}
.text-overlay.zitat {
    font-size: 1.3em;
    font-weight: 500;
}
.text-overlay.zitat:before {
    display: block;
    font-family: 'Font Awesome 6 Free';
    content: "\f101";
    text-align: center;
    font-weight: 600;
    font-size: 2em;
}
 @keyframes fadeSlideIn {
	 to {
		 opacity: 1;
		 transform: translate(0, 0);
	}
}

@media screen and (max-width: 825px) {
.flex-grid {
    display: flex;
    flex-direction: column;
}
}

@media screen and (max-width: 556px) {
.text-overlay {
    font-size: 1em !important;
}
}

@media screen and (max-width: 380px) {
.image-wrapper {
    min-height: 455px !important;
}
}
 
/*---------------------- */
@media screen and (max-width: 1135px) {
.image-wrapper {
    min-height:390px;
}
/*.text-overlay {
    font-size: 1.2em;
}*/
}

@media screen and (max-width: 1035px) {
	.ce_text.songtitel-right.block {
    text-align: right;
}

.songtitel .wrapper-flex__inner {
    justify-content: center !important;
}

.songtitel .ce_text {
	margin: auto;
}
}

@media screen and (max-width: 925px) {
	#main {
		margin-top: 1em;
	}
	.grid-container h3 {
    font-size: 3em;
	}
}

@media screen and (max-width: 830px) {
	.grid-container h3 {
    font-size: 4em;
	}
	.startpage-mt-5 {
    margin-top: 0;
	}
}

@media screen and (min-width: 601px) and (max-width: 900px) {
.wrapper-grid__inner {
    grid-template-columns: 1fr !important;
}
}

@media screen and (max-width: 575px) {
button.btn.btn--light.btn-tab.tab__button.tablink {
    font-size: 0.9em;
}
}

@media screen and (max-width: 475px) {
.item-3 {
    grid-row: row 2 / span 3;
}
}

@media screen and (max-width:465px) {
	.grid-container {
    display: block;
	}
	.grid-container h3 {
    font-size: 3em;
	}
}

/* ==========================================================
   ABH-Trio – Menü, Dropdown, Überschrift, Kacheln
   ========================================================== */

:root {
  --abh-pink: #d63a8c;
  --abh-teal: #23a39d;   /* ggf. durch Footer-Farbe ersetzen */
  --abh-ink:  #2b2f45;
  --abh-line: #e2e3ea;
}

/* ---------- Menü (Desktop) ---------- */
@media (min-width: 768px) {

  /* Logo: mehr Luft nach unten */
  .topbar-logo { padding-bottom: 18px; }

  /* Menü als Leiste in Inhaltsbreite mit Haarlinien */
  .topbar-nav--new {
    width: min(1166px, calc(100% - 34px));
    margin: 0 auto 20px !important;
    border-top: 1px solid var(--abh-line);
    border-bottom: 1px solid var(--abh-line);
    padding: 4px 0;
  }
  .topbar-nav--new nav.mod_navigation { display: flex; justify-content: center; }
  .topbar-nav--new ul.level_1 { gap: 14px; justify-content: center; align-items: center; }
  .topbar-nav--new ul.level_1 > li { position: relative; }

  /* Menüpunkte */
  .topbar-nav--new ul.level_1 > li > a {
    font-family: "Righteous", "Open Sans", Arial, sans-serif !important;
    font-size: 18px !important;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--abh-ink) !important;
    padding: 12px 22px !important;
    border-radius: 999px;
    position: relative;
    text-decoration: none !important;
    transition: background .25s ease, color .25s ease;
  }

  /* Unterstrich (Pink → Türkis) */
  .topbar-nav--new ul.level_1 > li > a::before {
    content: "";
    position: absolute !important;
    left: 50% !important; right: auto !important;
    top: auto !important; bottom: 6px !important;
    width: 0; height: 3px !important;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--abh-pink), var(--abh-teal)) !important;
    transition: width .3s ease, left .3s ease;
  }

  /* Hover / Fokus / aktive Seite */
  .topbar-nav--new ul.level_1 > li:hover > a,
  .topbar-nav--new ul.level_1 > li:focus-within > a {
    background: #f3f4f8;
    color: #000 !important;
  }
  .topbar-nav--new ul.level_1 > li:hover > a::before,
  .topbar-nav--new ul.level_1 > li:focus-within > a::before,
  .topbar-nav--new ul.level_1 > li.active > a::before,
  .topbar-nav--new ul.level_1 > li.trail > a::before {
    width: calc(100% - 44px) !important;
    left: 22px !important;
  }

  /* ---------- Dropdown ---------- */
  .topbar-nav--new ul.level_2 {
    display: block !important;
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 50% !important;
    transform: translate(-50%, 8px);
    min-width: 300px;
    width: max-content !important;
    max-width: 360px;
    background: #fff !important;
    border: 1px solid var(--abh-line) !important;
    border-top: 3px solid var(--abh-pink) !important;
    border-radius: 12px !important;
    padding: 8px !important;
    margin: 0 !important;
    list-style: none;
    box-shadow: 0 22px 44px -14px rgba(30,35,70,.30), 0 2px 6px rgba(30,35,70,.06) !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
    z-index: 1000;
  }
  /* unsichtbare Brücke, damit das Menü beim Mausweg nicht zuklappt */
  .topbar-nav--new ul.level_2::after {
    content: "";
    position: absolute;
    top: -16px; left: 0; right: 0; height: 16px;
  }
  .topbar-nav--new li.submenu:hover > ul.level_2,
  .topbar-nav--new li.submenu:focus-within > ul.level_2 {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
  }

  .topbar-nav--new ul.level_2 li {
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
  }
  .topbar-nav--new ul.level_2 li + li { border-top: 1px solid #eef0f4; }

  .topbar-nav--new ul.level_2 a {
    display: block !important;
    padding: 13px 18px !important;
    border-radius: 8px;
    font-family: "Righteous", "Open Sans", Arial, sans-serif !important;
    font-size: 17px !important;
    letter-spacing: .03em;
    color: var(--abh-ink) !important;
    text-transform: none;
    text-decoration: none !important;
    transition: background .18s ease, color .18s ease, padding-left .18s ease;
  }
  .topbar-nav--new ul.level_2 a:hover,
  .topbar-nav--new ul.level_2 a:focus-visible {
    background: linear-gradient(90deg, rgba(214,58,140,.12), rgba(35,163,157,.12));
    color: #000 !important;
    padding-left: 24px !important;
  }

  /* Chevron dreht sich beim Öffnen */
  .topbar-nav--new li.submenu > a::after { transition: transform .25s ease; }
  .topbar-nav--new li.submenu:hover > a::after { transform: rotate(180deg); }
}

/* ---------- Überschrift ---------- */
#main h2.ce_headline {
  font-size: 30px;
  letter-spacing: .02em;
  color: #3a3a3a;
}
#main h2.ce_headline::after {
  content: "";
  display: block;
  width: 64px; height: 4px;
  margin-top: 12px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--abh-pink), var(--abh-teal));
}

/* ---------- Album-Kacheln ---------- */
.wrapper-grid__inner { gap: 36px 32px !important; }

.wrapper-grid__inner > .ce_hyperlink {
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}

.wrapper-grid__inner > .ce_hyperlink h3 {
  font-size: 22px !important;
  line-height: 1.25;
  margin: 0 0 14px 0 !important;
  color: #3a3a3a;
  width: fit-content;
  padding-bottom: 5px;
  background: linear-gradient(90deg, var(--abh-pink), var(--abh-teal)) no-repeat 0 100% / 0 3px;
  transition: background-size .4s ease, color .25s ease;
}

.wrapper-grid__inner > .ce_hyperlink figure.image_container {
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 8px 18px -10px rgba(0,0,0,.35);
  transition: box-shadow .35s ease;
}
.wrapper-grid__inner > .ce_hyperlink img {
  transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .35s ease;
}

/* Hover */
.wrapper-grid__inner > .ce_hyperlink:hover { transform: translateY(-6px); }
.wrapper-grid__inner > .ce_hyperlink:hover h3 {
  color: var(--abh-pink);
  background-size: 100% 3px;
}
.wrapper-grid__inner > .ce_hyperlink:hover figure.image_container {
  box-shadow: 0 26px 40px -18px rgba(30,35,70,.55);
}
.wrapper-grid__inner > .ce_hyperlink:hover img {
  transform: scale(1.05);
  filter: saturate(1.08) contrast(1.03);
}

/* Bewegungen reduzieren, wenn vom System gewünscht */
@media (prefers-reduced-motion: reduce) {
  .wrapper-grid__inner > .ce_hyperlink,
  .wrapper-grid__inner > .ce_hyperlink img,
  .topbar-nav--new ul.level_2 { transition: none; }
}

/* ==========================================================
   Bandfoto (breaker-bgimage, ohne Parallax)
   ========================================================== */

/* Feste Höhe (inline: height:400px) durch Seitenverhältnis ersetzen */
.breaker-bgimage {
  height: auto !important;
  aspect-ratio: 21 / 8;
  max-height: 640px;
  background-position: 50% 33% !important;  /* Fokus auf Gesichter */
  border-radius: 10px;
  overflow: hidden;
}

/* Tablet */
@media (max-width: 1100px) {
  .breaker-bgimage {
    aspect-ratio: 2 / 1;
    background-position: 50% 35% !important;
  }
}

/* Smartphone */
@media (max-width: 700px) {
  .breaker-bgimage {
    aspect-ratio: 3 / 2;
    background-position: 50% 40% !important;
    border-radius: 8px;
  }
}

/* ==========================================================
   Sessions-Seite: Scrollen, Laufschrift, CD-Cover
   ========================================================== */

/* Sanftes Scrollen zum Pfeil-Ziel */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
#down { scroll-margin-top: 24px; }
#container { overflow-x: clip; }

/* Hero */
.scrolling-text-body {
  height: 100vh;
  height: 100svh;
  min-height: 520px;
  will-change: transform;
  backface-visibility: hidden;
}
.scrolling-text-container h1 {
  font-size: clamp(40px, min(12.5vw, 11vh), 90px);
}
.scrolling-text-container.btn-down {
  padding-top: clamp(60px, 20vh, 200px);
}
.contact-button a { width: min(250px, 100%); box-sizing: border-box; }
@media (max-width: 600px) {
  .scrolling-text-container { padding: 20px; }
  .scrolling-text-container h2 { font-size: clamp(1.6rem, 7vw, 2.5rem); }
}

/* Laufschrift: Größe nach Breite UND Höhe, im oberen Hero-Bereich */
.animate-text span {
  font-size: clamp(70px, min(24vw, 28vh), 280px);
  line-height: 1;
  -webkit-text-stroke: clamp(2px, .3vw, 4px) #fff;
}
.animate-text.single { margin-bottom: 0 !important; }   /* ersetzt 30em-Abstand */
.bg-text-container {
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 50% !important;
  transform: none !important;
  display: flex;
  align-items: center;
}
.animate-text {
  width: max-content;
  animation: abhMarquee 45s linear infinite !important;
}
@keyframes abhMarquee {
  from { transform: translate3d(100vw, 0, 0); }
  to   { transform: translate3d(-100%, 0, 0); }
}
@media (max-width: 700px) {
  .animate-text { animation-duration: 30s !important; }
}
@media (prefers-reduced-motion: reduce) {
  .animate-text { animation: none !important; transform: none; }
}

/* CD-Cover hervorgehoben */
.songtitel > .ce_image figure.image_container {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 28px 0;
}
.songtitel > .ce_image figure.image_container::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: min(620px, 96%);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side,
              rgba(255,165,0,.32), rgba(255,255,255,.10) 58%, transparent 76%);
  filter: blur(10px);
  z-index: 0;
  pointer-events: none;
}
.songtitel > .ce_image picture { position: relative; z-index: 1; display: block; max-width: 100%; }
.songtitel > .ce_image img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  border: 4px solid #fff;
  box-shadow: 0 30px 55px -20px rgba(0,30,40,.75), 0 8px 18px rgba(0,0,0,.25);
  transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease;
}
.songtitel > .ce_image img:hover {
  transform: translateY(-6px) scale(1.02) rotate(-.6deg);
  box-shadow: 0 44px 70px -24px rgba(0,30,40,.85), 0 10px 22px rgba(0,0,0,.3);
}

/* Einblenden: weich von unten statt von rechts */
@keyframes abhCoverIn {
  from { opacity: 0; transform: translate3d(0, 28px, 0) scale(.96); }
  to   { opacity: 1; transform: none; }
}
.songtitel .ce_image.wow.animated {
  animation-name: abhCoverIn !important;
  animation-duration: .9s !important;
  animation-timing-function: cubic-bezier(.2,.7,.2,1) !important;
}
@media (prefers-reduced-motion: reduce) {
  .songtitel .ce_image.wow.animated { animation: none !important; }
  .songtitel > .ce_image img { transition: none; }
}

.customer-logo {
  filter:
    drop-shadow(1.5px 0 0 #fff)
    drop-shadow(-1.5px 0 0 #fff)
    drop-shadow(0 1.5px 0 #fff)
    drop-shadow(0 -1.5px 0 #fff)
    drop-shadow(0 0 8px rgba(255,255,255,.35));
}