/* ==================== */
/* GLOBALE SETTINGS */
/* ==================== */

html {
      font-size: 19px;
}

body {
    font-family: 'LatoLatinWeb', Arial, sans-serif !important;
    background: #fefefe;
    color: #50596c;
}

.member-inner {
    text-align: center;
}

.member-inner p {
    text-align: left;
}

.bg-gray {
    background: #fefefe !important;
}

.bg-gray .container {
    background: #fefefe !important;
}

.bg-gray .container {
    text-align: center;
}

.bg-gray .container p {
    text-align: left;
}

/* Alle container innerhalb common-padding gleich breit */

.konzert-page .common-padding .container,
.konzert-page .container,
.konzert-page .konzert-content-container,
.person-page .common-padding .container,
.person-page .container,
.person-page .person-content-container,
.ticket-page .common-padding .container,
.ticket-page .container,
.ticket-page .ticket-content-container,
article .common-padding,
article .container,
.common-padding .container,
.common-padding section.container,
.common-padding div.container {
    /*    max-width: 1140px !important;  breite individuell */
    padding-left: 0rem !important;
    padding-right: 0rem !important;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0rem !important;
    padding-top: 0rem !important;
    width: 100% !important;
}

/* ---- nicht modulare Seiten ----- */


/* 1. Basis-Abstand oben für ALLE Seiten (Desktop) */
#body-wrapper.section {
    padding-top: 0rem !important;
    /* globaler fixer oberer Seitenrand */
}

/* 2. Absicherung: kein zusätzliches padding in .common-padding oben */
.common-padding {
    padding-top: 0 !important;
}

.page-header-h1 {
    margin-top: 4.5rem !important;
}

.module-member h1 {
    margin-top: 6.5rem !important;
}

.konzert-page .page-header-h1,
.ticket-page .page-header-h1,
.person-page .page-header-h1 {
    margin-top: 6.5rem !important;
}


h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'LatoLatinWeb', Arial, sans-serif !important;
}

h1 {
    font-weight: 400 !important;
    font-size: 2.2rem !important;
    display: inline-block;
    /* H1 nur so breit wie der Text */
    position: relative;
    /* für das Pseudo-Element */
}

/* Linie unter H1 */
h1::after {
    content: "";
    /* Pseudo-Element benötigt content */
    display: block;
    /* Zeilenumbruch unter der H1 */
    width: 60%;
    /* 60% der H1-Breite */
    height: 1px;
    /* Höhe der Linie */
    background-color: #d91480;
    /* Linie Farbe */
    margin: 0 auto;
    /* zentriert */
    margin-top: 0.5rem;
    /* Abstand zur H1, anpassen nach Geschmack */
    margin-bottom: 1.5rem;
    border-radius: 2px;
}

h2 {
    font-weight: 400 !important;
    font-size: 1.8rem !important;
}

h3 {
    font-weight: 300 !important;
    font-size: 1.6rem !important;
}

h4 {
    font-weight: 400 !important;
    font-size: 1.4rem !important;
}

h5 {
    font-weight: 400 !important;
    font-size: 1.15rem !important;
}

h6 {
    font-weight: 300 !important;
    font-size: 1.0rem !important;
}

a,
button {
    font-family: 'LatoLatinWeb', Arial, sans-serif !important;
    font-weight: 400 !important;
    /* leicht betont */
    text-decoration: none !important;
    color: #2a82c4 !important;
    /* Akzentfarbe */
    transition: color 0.3s ease;
}

a:hover {
    text-decoration: underline !important;
}

a.btn:hover,
a.btn-primary:hover,
a.btn-secondary:hover,
a.ticket-btn-small:hover,
a.ticket-button:hover {
    text-decoration: none !important;
}


a:hover,
button:hover {
    color: #004a79 !important;
    /* dunkler beim Hover */
}

p {
    font-size: 1rem !important;
    line-height: 1.5 !important;
}

ul,
ol {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
    line-height: 1.6;
}

li {
    margin-bottom: 0.5rem;
}

strong,
b {
    font-weight: 600 !important;
}

em,
i {
    font-style: italic !important;
    font-family: 'LatoLatinWeb', Arial, sans-serif !important;
}

/* --------------------------------------
           Font Awesome Icons
------------------------------------------- */

.fa-envelope:before {
    content: "\f0e0";
    font-family: 'FontAwesomeSolid';
    font-weight: 900;
    font-style: normal;
    display: inline-block;
}

.fa-fax:before {
    content: "\f1ac";
    font-family: 'FontAwesomeSolid';
    font-weight: 900;
    font-style: normal;
    display: inline-block;
}

.fa-truck:before {
    content: "\f0d1";
    font-family: 'FontAwesomeSolid';
    font-style: normal;
    font-weight: 900;
    display: inline-block;
}

.fa-circle-check:before {
    content: "\f058";
    font-family: 'FontAwesomeSolid';
    font-style: normal;
    font-weight: 900;
    display: inline-block;
}

.fa-at:before {
    content: "\40";
    font-family: 'FontAwesomeSolid';
    font-style: normal;
    font-weight: 900;
    display: inline-block;
}

.fa-phone:before {
    content: "\f095";
    font-family: 'FontAwesomeSolid';
    font-style: normal;
    font-weight: 900;
    display: inline-block;
}

.fa-phone-volume:before {
    content: "\f2a0";
    font-family: 'FontAwesomeSolid';
    font-style: normal;
    font-weight: 900;
    display: inline-block;
}

.fa-ticket:before {
    content: "\ff145";
    font-family: 'FontAwesomeSolid';
    font-style: normal;
    font-weight: 900;
    display: inline-block;
}

.fa-handshake:before {
    content: "\f2b5";
    font-family: 'FontAwesomeSolid';
    font-style: normal;
    font-weight: 900;
    display: inline-block;
}

.fa-heart:before {
    content: "\f004";
    font-family: 'FontAwesomeSolid';
    font-style: normal;
    font-weight: 900;
    display: inline-block;
}

.fa-adress-card:before {
    content: "\f2bb";
    font-family: 'FontAwesomeSolid';
    font-style: normal;
    font-weight: 900;
    display: inline-block;
}

.fa-triangle-exclamaion:before {
    content: "\f071";
    font-family: 'FontAwesomeSolid';
    font-style: normal;
    font-weight: 900;
    display: inline-block;
}

.fa-square-parking:before {
    content: "\f540";
    font-family: 'FontAwesomeSolid';
    font-style: normal;
    font-weight: 900;
    display: inline-block;
}

.fa-copyright:before {
    content: "\f1f9";
    font-family: 'FontAwesomeSolid';
    font-style: normal;
    font-weight: 900;
    display: inline-block;
}

.fa-instagram:before {
    content: "\f16d";
    font-family: 'FontAwesomeBrands';
    font-style: normal;
    font-weight: 400;
    display: inline-block;
}

.fa-facebook:before {
    content: "\f09a";
    font-family: 'FontAwesomeBrands';
    font-style: normal;
    font-weight: 400;
    display: inline-block;
}


/*--------------------------------
        Header
-----------------------------------*/
/* #header .desktop-menu .dropmenu a {
    color: #fff !important;
    font-size: clamp(0.85rem, 1.8vw, 1.1rem);
    font-weight: 400 !important;
    line-height: 1.5;
    padding: 0.5rem 0.75rem;
    transition: color 0.3s ease;
    transform: translateY(30%);

}



#header .logo img {
    max-height: 75px !important;
    height: auto !important;
    transform: none !important;
    transition: max-height 0.3s ease;
    margin-top: 1rem !important;
}


---------------------------------*/
#header .desktop-menu .dropmenu a {
    color: #fff !important;
    font-size: clamp(0.8rem, 1.5vw, 0.9rem);
    font-weight: 400 !important;
    line-height: 1.5;
    padding: 0.5rem 0.75rem;
    transition: font-size 0.9s ease, color 0.3s ease;
    transform: translateY(-0%);
    top: 50%;
}

/* Header Grund */
#header {
    height: 90px;
    /* Standardhöhe */
    padding: 0 2rem;
    /* Innenabstand links/rechts */
    display: flex;
    align-items: center;
    /* vertikale Zentrierung */
    justify-content: space-between;
    background: #004a79;
}

/* Logo */
#header .logo img {
    max-height: 70px;
    /* Standard-Logo */
    height: auto;
    transition: max-height 0.3s ease;
}

#header.scrolled {
    height: 70px !important;
    /* kleiner beim Scrollen */
    transition: height 0.3s ease, padding 0.3s ease;
}

#header.scrolled .logo img {
    max-height: 55px;
    /* kleineres Logo beim Shrink */
    height: auto !important;
    transform: none !important;
}

#header.scrolled .desktop-menu .dropmenu a {
    font-size: 0.8rem;
    /* kleinere Schrift beim Shrink */
}


/* ------------------------------------------------- */

#header:not(.scrolled) {
    background: #004a79 !important;
}

#header.scrolled {
    background: #004a79 !important;
}

#header:not(.scrolled) .desktop-menu .dropmenu a,
.desktop-menu .dropmenu a.active {
    color: #fff !important;
    /* normale Textfarbe */
}

#header.scrolled .desktop-menu .dropmenu a,
.desktop-menu .dropmenu a.active {
    color: #fff !important;
    /* normale Textfarbe */
}

#header .desktop-menu .dropmenu a:hover,
#header .desktop-menu .dropmenu a:focus {
    color: #d91480 !important;
    /* Hover / aktive Farbe */
}


/* ======== Hamburger ==========*/

.button_container span {
    background-color: #fefefe !important;
}

/* Hover & aktiv pink */
.mobile-menu .button_container.active span {
    background-color: #fefefe !important;
}

.mobile-menu .button_container:hover span {
    background-color: #d91480 !important;
}

/* =========== Mobile Navi ======== */

#overlay,
.overlay,
.mobile-nav {
    background-color: #004a79 !important;
    position: fixed;
    z-index: 999;
}

.treemenu li a,
.treemenu li a.active {
    text-decoration: none;
    color: #fff !important;
    background-color: #004a79 !important;
}

#overlay nav a:hover,
.overlay nav a:hover,
.mobile-nav a:hover {
    color: #d91480 !important;
}

.mobile-container .overlay-menu ul.treemenu li {
    line-height: 1.6 !important;
}

/* ========
Global oberen Rand einstellen
=============== */


/* ==== Paddings für übliche viewports ==== */

/* ---- UNIVERSAL HORIZONTAL PADDING ---- */
.pad-xs {
    padding-left: .5rem;
    padding-right: .5rem;
}

.pad-sm {
    padding-left: 1rem;
    padding-right: 1rem;
}

.pad-md {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.pad-lg {
    padding-left: 2rem;
    padding-right: 2rem;
}

.pad-xl {
    padding-left: 4rem;
    padding-right: 4rem;
}

/* ---- UNIVERSAL VERTICAL PADDING ---- */
.vpad-sm {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.vpad-md {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.vpad-lg {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

/* ---- WIDTH HELPERS ---- */
.narrow {
    max-width: 800px;
    margin: 0 auto;
}

.wide {
    max-width: 1400px;
    margin: 0 auto;
}

.max-w-1140 {
    max-width: 1140px;
    margin: 0 auto;
}

.max-w-800 {
    max-width: 800px;
    margin: 0 auto;
}

/* ===========================
==== Cookie Banner ===========
============================= */

/* Haupt-Container */
body #cc-main {
  font-family: font-family: 'LatoLatinWeb', Arial, sans-serif;
}

/* Consent Modal (das Banner selbst) */
body #cc-main .cm {
  background: #fefefe !important;
  border-radius: 0.3rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

/* Titel */
body #cc-main .cm__title {
  color: #50596c;
  font-size: 1.25rem !important;
  text-align: center;
  display: inline-block !important;
}

body #cc-main .cm__title::after {
    content: "";                       /* Pseudo-Element benötigt content */
    display: block;                     /* Zeilenumbruch unter der H */
    width: 40%;                         /* 60% der H-Breite */
    height: 1px;                        /* Höhe der Linie */
    background-color: #d91480;          /* Linie Farbe */
    margin: 0 auto;                     /* zentriert */
    margin-top: 0.5rem;                 /* Abstand zur H1, anpassen nach Geschmack */
    margin-bottom: 0rem;
    border-radius: 0.15rem;
}


/* Beschreibungstext */
body #cc-main .cm__desc {
  color: #50596c;
  line-height: 1.5;
  font-size: 0.9rem !important;
  text-align: left;
}

/* Links im Banner */
body #cc-main .cm__links a {
  color: #2a82c4;
  text-decoration: none;
  font-size: 0.7rem !important;
}

body #cc-main .cm__links a:hover {
  color: #004a79 !important;
  text-decoration: none !important;
}

body #cc-main .cm__link-group {
  justify-content: center;
}


/* Buttons */
body #cc-main .cm__btns {
  border-radius: 0.3rem;

  font-weight: bold;
  font-size: 0.95rem;
}

/* "Alle akzeptieren" Button */
body #cc-main .cm__btn {
  background: linear-gradient(135deg, #8a0a54 15%, #d91480 55%) !important;
  border: none;
  margin: 0 auto;
  padding: 0.15rem 0.75rem;
}

body #cc-main .cm__btn:hover {
  background: linear-gradient(225deg, #d91480 15%, #8a0a54 55%) !important;
  filter: brightness(1.15);
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(0,0,0,0.15);
  transition: all 0.4s ease;
  }

/* "Einstellungen" Button */
#cc-main .cm__btn--secondary {
  background: transparent;
  border: 2px solid #d91480;
  color: #d91480;
}

/* Footer im Banner */
body #cc-main .cm__footer {
  border-top: 1px solid #004a79;
  padding-top: 10px;
}