/* =========================================================
   STYLE.CSS – CLEAN (GLOBAL)
   Datei: style.css
   Inhalt:
   1) FONT SCALE (nur Variablen-basierte Typo)
   2) RESET / BASE
   3) COLOR MODE – GRAY
   4) LAYOUT – IMMER ZENTRIERT
   5) CONTENT + FOOTER WRAPPER
   6) CONTENT (Container)
   7) GLOBALER CONTENT-FLOW (alle Seiten)
   8) TICKER – BASIS (News + Breadcrumb)
   9) TYPO (global) – Text / Links / Headlines
   10) EXTERNE LINKS – Icon für target="_blank" (global)
   11) DESKTOP SIDEBAR (Menü)
   12) FOOTER
   13) FOOTER ACTIONS (Buttons)
   14) TO TOP BUTTON (Desktop)
   15) SELECT – Dropdown-Optionen lesbar (global, nur .select-wrap)
   16) MOBILE DEFAULT (Desktop -> aus)
   17) MOBILE / RESPONSIVE (≤1100px)
   18) LANDSCAPE (Mobile Nav from bottom)
   19) iPhone Notch / Safe-Area Fix (additiv)
========================================================= */


/* =========================================================
   1) FONT SCALE (nur Variablen-basierte Typo)
========================================================= */

          body{
            --font-scale: 1;
          }

          body.font-normal{
            --font-scale: 1;
          }

          body.font-large{
            --font-scale: 1.08;
          }

          body.font-xl{
            --font-scale: 1.16;
          }


/* =========================================================
   2) RESET / BASE
========================================================= */

          *,
          *::before,
          *::after{
            box-sizing: border-box;
            margin: 0;
            padding: 0;
          }

          html{
            -webkit-text-size-adjust: 100%;
            text-size-adjust: 100%;
          }

          html,
          body{
            overflow-x: hidden;
            font-family: var(--font-style-text);
          }

          body{
            margin: 0;
            background-color: #0b2fd6;
            color: var(--color-font-primary);
          }

      /* Background image layer */
          body::before{
            content: "";
            position: fixed;
            inset: 0;
            background: url("../images/hg/hg_konzert_.webp") center / cover no-repeat;
            z-index: -1;
          }

      /* Hintergrundbild abdunkeln (Bild bleibt) */
          body.no-bg::before{
            filter: grayscale(55%) brightness(0.7);
          }


/* =========================================================
   3) COLOR MODE – GRAY
========================================================= */

          body.color-gray{

            --color-content-bg: var(--color-content-bg-gray);
            --color-primary: var(--color-primary-bg-gray);

            --color-secondary: rgba(55, 60, 70, 1);
            --color-accent-1: rgba(65, 70, 80, 1);
            --color-accent-2: rgba(75, 80, 90, 1);

            --color-footer-bg: rgba(40, 45, 55, 0.95);

            background-color: rgba(67, 80, 107, 0.97);

        /* Highlight Sektion Außenbox */
            --color-highlight-section-bg: rgb(40, 38, 43);
            --color-highlight-section-border: rgba(255,255,255,0.22);

            --color-highlight-section-bg-hover: rgba(80, 92, 120, 0.97);
            --color-highlight-section-border-hover: rgba(255,255,255,0.30);

        /* Boxen dunkler */
            --color-highlight-box-bg: rgb(65, 71, 86);
            --color-highlight-box-border: rgba(255,255,255,0.18);

            --color-highlight-box-bg-hover: rgba(62, 72, 98, 0.98);
            --color-highlight-box-border-hover: rgba(255,255,255,0.25);

          
        /* =====================================================
          3.2) TOUR – GRAY MODE
        ===================================================== */

            --color-tour-gallery-note: rgba(235,240,255,0.78);
            --color-tour-gallery-shot-bg: var(--color-highlight-box-bg);
            --color-tour-gallery-shot-border: var(--color-highlight-box-border);

            --color-tour-setlist-note: rgba(235,240,255,0.82);
            --color-tour-setlist-bg: var(--color-highlight-box-bg);
            --color-tour-setlist-border: var(--color-highlight-box-border);
            --color-tour-setlist-break: rgba(210,220,245,0.82);

            --color-tour-crew-divider: rgba(170, 190, 235, 0.75);
          }       


/* =========================================================
   4) LAYOUT – IMMER ZENTRIERT
========================================================= */

          .page{
            min-height: 100vh;
            display: flex;
            justify-content: center;
            gap: var(--menu-gap);
            padding: 0;
          }


/* =========================================================
   5) CONTENT + FOOTER WRAPPER
========================================================= */

          .content-wrapper{
            width: 100%;
            max-width: var(--content-width);
            min-height: 100dvh;
            display: flex;
            flex-direction: column;
          }


/* =========================================================
   6) CONTENT (Container)
========================================================= */

          .content{
            width: 100%;
            max-width: var(--content-width);
            min-height: 100vh;

            padding: var(--content-padding);
            padding-bottom: calc(var(--menu-gap) * 2.5);

            background: var(--color-content-bg);

            flex: 1;
            z-index: 1;

            box-shadow:
              0 14px 34px rgba(0, 0, 0, 0.32),
              18px 0 30px rgba(0, 0, 0, 0.24),
              -16px 18px 30px rgba(0, 0, 0, 0.22);
          }


/* =========================================================
   7) GLOBALER CONTENT-FLOW (alle Seiten)
========================================================= */

          .content > * + *{
            margin-top: 1.25rem;
          }

          .content ul,
          .content ol{
            padding-left: 1.25rem;
          }

          .content > img{
            max-width: 100%;
            height: auto;
            display: block;
            margin: 1.5rem 0;
          }


/* =========================================================
   8) TICKER – BASIS (News + Breadcrumb)
========================================================= */

          .news-ticker,
          .breadcrumb--ticker{
            display: grid;
            grid-template-columns: auto 1fr;
            align-items: stretch;

            background: rgba(0, 0, 0, 0.25);
            border: 1px solid rgba(255, 255, 255, 0.18);
            border-radius: var(--radius-sm);
            overflow: hidden;
            margin: 0 0 1.25rem 0;
          }

          .news-ticker .ticker-label,
          .breadcrumb--ticker .ticker-label{
            display: flex;
            align-items: center;           
            align-self: stretch;

            padding: calc(var(--menu-gap) / 2)
                     calc(var(--menu-gap) / 1.5);

            background: rgba(0, 0, 0, 0.45);
            border-right: 1px solid rgba(255, 255, 255, 0.12);

            font-family: var(--font-style-ui);
            font-size: var(--font-size-headline-minor);
            line-height: var(--line-height-ui);
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.95);

            white-space: nowrap;
          }

          .news-ticker .ticker-wrapper,
          .breadcrumb--ticker .ticker-wrapper{
            padding: calc(var(--menu-gap) / 2)
                     calc(var(--menu-gap) / 1.5);

            min-width: 0;
          }

          .breadcrumb--ticker .breadcrumb-list{
            list-style: none;
            margin: 0;
            padding: 0;

            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
            gap: 0;
          }

      /* wichtig: globale .content li-Regeln nicht reinfunken lassen */
          .breadcrumb--ticker .breadcrumb-list li{
            margin: 0;
            padding: 0;

            font-size: var(--font-size-content);
            line-height: var(--line-height-ui);
          }

          .breadcrumb--ticker .breadcrumb-list li + li::before{
            content: "›";
            margin: 0 0.55rem;
            color: rgba(255,255,255,0.55);
          }


/* =========================================================
   9) TYPO (global) – Text / Links / Headlines
========================================================= */

          .content p{
            color: var(--color-font-primary);
            font-size: var(--font-size-content);
            line-height: var(--line-height-text);
            max-width: none;
          }

          .content li{
            margin-bottom: 0.5rem;
            font-size: var(--font-size-content);
            line-height: var(--line-height-text);
          }

          .content blockquote{
            margin: 2rem 0;
            padding: 1rem 1.25rem;
            border-left: 4px solid rgba(255,255,255,0.40);
            background: rgba(255,255,255,0.08);
            font-style: italic;
          }

          .content a{
            color: var(--color-link);
            text-decoration: none;
            position: relative;
          }

          .content a:hover{
            color: var(--color-link-hover);
          }

          h1,
          h2,
          h3,
          h4,
          h5,
          h6{
            font-family: var(--font-style-headline);
            color: var(--color-font-primary);
          }

          h1{
            font-size: var(--font-size-headline-hero);
            line-height: var(--line-height-headline-xl);
            letter-spacing: -0.01em;
          }

          h2{
            font-size: var(--font-size-headline-main);
            line-height: var(--line-height-headline-lg);
            letter-spacing: -0.01em;
          }

          h3{
            font-size: var(--font-size-headline-section);
            line-height: var(--line-height-headline-md);
            letter-spacing: -0.01em;
          }

          h4{
            font-size: var(--font-size-headline-sub);
            line-height: var(--line-height-headline-sm);
          }

          h5,
          h6{
            font-size: var(--font-size-headline-minor);
            line-height: var(--line-height-headline-xs);
          }

      /* Utility */
          .headline_one{
            margin-bottom: 2rem;
          }


/* =========================================================
   10) EXTERNE LINKS – Icon für target="_blank" (global)
========================================================= */

          .content a[target="_blank"]{
            position: relative;
            padding-right: 1.35em;
          }

          .content a[target="_blank"]::before{
            content: "⧉";
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-55%);
            font-size: 0.85em;
            line-height: 1;
            opacity: 0.75;
            pointer-events: none;
            transition: opacity 0.2s ease, transform 0.2s ease;
          }

          .content a[target="_blank"]:hover::before{
            opacity: 1;
            transform: translateY(-55%) translate(2px, -2px);
          }

      /* im Breadcrumb/Ticker kein Icon */
          .breadcrumb--ticker a[target="_blank"]::before{
            content: none;
          }


/* =========================================================
   11) DESKTOP SIDEBAR (Menü)
========================================================= */

          .side-area{
            width: var(--menu-width);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            position: relative;
          }

          .side-header-nav,
          .side-footer-nav{
            font-family: var(--font-style-side-area);
            background: var(--menu-bg);
            padding: 16px;

            display: flex;
            flex-direction: column;
            gap: 18px;

            line-height: var(--line-height-menu);
          }

          .side-header-nav{
            border-left: 1px solid rgba(255, 255, 255, 0.25);
            border-right: 1px solid rgba(255, 255, 255, 0.25);
            border-bottom: 1px solid rgba(255, 255, 255, 0.25);
          }

          .side-footer-nav{
            margin-top: auto;
          }

          .side-header-nav a,
          .side-footer-nav a{
            display: inline-block;
            align-self: flex-start;

            color: var(--color-font-primary);
            text-decoration: none;
            text-transform: uppercase;

            font-weight: 800;
            letter-spacing: 0.08em;

            position: relative;
            padding-bottom: 6px;
          }

          .side-header-nav a{
            font-size: var(--font-size-menu-header);
          }

          .side-footer-nav a{
            font-size: var(--font-size-menu-footer);
          }

          .side-header-nav a::after,
          .side-footer-nav a::after{
            content: "";
            position: absolute;
            left: 0;
            bottom: -1px;

            width: var(--hover-line-width, 100%);
            height: 1px;
            background: #fff;

            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.3s ease;
          }

          .side-header-nav a:hover::after,
          .side-header-nav a.active::after,
          .side-footer-nav a:hover::after,
          .side-footer-nav a.active::after{
            transform: scaleX(1);
          }


/* =========================================================
   12) FOOTER
========================================================= */

          .footer{
            background: var(--color-footer-bg);
            padding: var(--footer-padding);
            margin-top: 10px;

            border-top: 1px solid rgba(255, 255, 255, 0.25);
            color: color-mix(in srgb, var(--color-font-primary) 85%, transparent);

            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
          }

          .footer-inner{
            display: flex;
            justify-content: flex-start;
            gap: 4.5rem;

            max-width: none;
            margin: 0;
            padding: 0;
          }

          .footer-block:nth-child(2){
            margin-left: 1.5rem;
            margin-right: auto;
          }

          .footer-block h3{
            margin-bottom: 0.85rem;
            font-size: 1.15rem;
            color: #fff;
          }

          .footer-block ul{
            list-style: none;
            margin: 0;
            padding: 0;
          }

          .footer-block li{
            margin-bottom: 0.55rem;
            line-height: var(--line-height-ui);
          }

          .footer-block li:last-child{
            margin-bottom: 0;
          }

          .footer-block a{
            position: relative;
            color: color-mix(in srgb, var(--color-font-primary) 88%, transparent);
            text-decoration: none;
          }

          .footer-block a::after{
            content: "";
            position: absolute;
            left: 0;
            bottom: -2px;

            width: var(--hover-line-width, 100%);
            height: 1px;
            background: #fff;
            opacity: 0.7;

            transform: scaleX(0);
            transform-origin: center;
            transition: transform 0.3s ease;
          }

          .footer-block a:hover::after,
          .footer-block a.active::after{
            transform: scaleX(1);
          }

          .footer .copyright{
            margin-top: 3rem;
            font-size: 0.95rem;
            color: var(--color-font-primary);
            font-family: var(--font-style-headline);
          }


/* =========================================================
   13) FOOTER ACTIONS (Buttons)
========================================================= */

          .footer-actions{
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            min-width: 220px;
          }

          .footer-action-button{
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;

            min-height: 44px;
            padding: 10px 12px;

            color: var(--color-font-primary);
            background: rgba(0, 0, 0, 0.35);
            border: 1px solid rgba(255, 255, 255, 0.25);

            cursor: pointer;
            user-select: none;
            text-decoration: none;
            position: relative;
          }

          .footer-action-button::after{
            content: "";
            position: absolute;
            left: 10px;
            right: 10px;
            bottom: -2px;

            height: 1px;
            background: color-mix(in srgb, var(--color-font-primary) 85%, transparent);

            transform: scaleX(0);
            transform-origin: center;
            transition: transform 0.3s ease;

            pointer-events: none;
          }

          .footer-action-button:hover::after,
          .footer-action-button:focus-visible::after{
            transform: scaleX(1);
          }

          .footer-action-button span{
            font-family: var(--font-style-side-area);
            font-size: var(--font-size-action-buttons-footer);
            font-weight: 700;
            letter-spacing: 0.02em;
            text-transform: none;
            line-height: var(--line-height-ui);
          }

          .footer-actions .footer-action-button:hover{
            border-color: rgba(100, 160, 255, 0.9);
            box-shadow:
              0 0 0 1px rgba(100, 160, 255, 0.5),
              0 0 14px rgba(100, 160, 255, 0.4);
          }

          .image-switch{
            display: flex;
            align-items: center;
            justify-content: center;
          }

          .image-switch img{
            width: 22px;
            height: 22px;
            object-fit: contain;
            opacity: 0.92;
            transition: opacity 0.2s ease;
          }

          .footer-action-button:hover .image-switch img{
            opacity: 1;
          }

      /* neutralisieren falls irgendwo .switch im Button steckt */
          .footer-action-button .switch{
            background: none;
            box-shadow: none;
            border-radius: 0;
            width: auto;
            height: auto;
            padding: 0;
          }

          .footer-action-button .switch::before,
          .footer-action-button .switch::after{
            display: none;
          }


/* =========================================================
   14) TO TOP BUTTON (Desktop)
========================================================= */

          #toTopBtn{
            position: fixed;
            bottom: 200px;

            right: max(16px, calc((100vw - var(--content-width)) / 2 - 60px));

            width: auto;
            min-width: 160px;
            padding: 12px 18px;
            border-radius: 6px;

            display: flex;
            align-items: center;
            justify-content: center;

            font-family: var(--font-style-side-area);
            font-size: var(--font-size-menu-footer);
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;

            background: var(--menu-bg);
            color: var(--color-font-primary);

            border: 1px solid rgba(255,255,255,0.25);
            white-space: nowrap;

            z-index: 100005;
            transition: opacity 0.2s ease;
          }

          #toTopBtn::after{
            content: "";
            position: absolute;
            left: 10px;
            right: 10px;
            bottom: -2px;

            height: 1px;
            background: rgba(255,255,255,0.85);

            transform: scaleX(0);
            transform-origin: center;
            transition: transform 0.3s ease;

            pointer-events: none;
          }

          #toTopBtn:hover::after,
          #toTopBtn:focus-visible::after{
            transform: scaleX(1);
          }

          #toTopBtn:hover,
          #toTopBtn:focus-visible{
            border-color: rgba(100,160,255,0.9);
            box-shadow:
              0 0 0 1px rgba(100,160,255,0.5),
              0 0 14px rgba(100,160,255,0.4);
          }

          .to-top-text{
            display: inline;
          }

          .to-top-icon{
            display: none;
          }


/* =========================================================
   15) SELECT – Dropdown-Optionen lesbar (global, nur .select-wrap)
========================================================= */

          .select-wrap select{
            color: #fff;
            background: rgba(0,0,0,0.35);
          }

          .select-wrap select option{
            color: #fff;
            background: #0e1f5a;
          }

          .select-wrap select option:checked{
            background: #16307a;
            color: #fff;
          }


/* =========================================================
   16) MOBILE DEFAULT (Desktop -> aus)
========================================================= */

          .mobile-header,
          .mobile-nav,
          .mobile-overlay{
            display: none;
          }
 
/* =========================================================
   17) MOBILE / RESPONSIVE (≤1100px)
========================================================= */

@media (max-width: 1100px){

          .page{
            justify-content: center;
            width: 100%;
            gap: 0;
          }

          .side-area{
            display: none;
          }

      /* WICHTIG: hier kommt der blaue Abstand unten her */
          .content{
            max-width: 100%;
            min-height: auto;

            padding-top: 1rem;
            padding-right: max(2rem, calc(2rem + env(safe-area-inset-right)));
            padding-bottom: calc(var(--menu-gap) * 2.5);
            padding-left: calc(1rem + env(safe-area-inset-left));
          }

          .content-wrapper{
            max-width: 100%;
            min-height: auto;
          }

      /* Mobile Header / Burger */
          .mobile-header{
            display: block;
            position: fixed;
            top: 16px;
            right: 16px;
            z-index: 1000;
          }

          .burger{
            background: rgba(0, 0, 0, 0.5);
            border: none;
            padding: 14px;

            display: flex;
            flex-direction: column;
            gap: 6px;

            cursor: pointer;
            border-radius: 6px;
          }

          .burger span{
            width: 28px;
            height: 3px;
            background: #fff;
          }

      /* Overlay */
          .mobile-overlay{
            display: block;
            position: fixed;
            inset: 0;
            background: transparent;
            z-index: 500;
            pointer-events: none;
          }

          body.menu-open .mobile-overlay{
            pointer-events: auto;
          }

      /* Mobile Nav (rechts) */
          .mobile-nav{
            display: flex;
            font-family: var(--font-style-side-area);
            position: fixed;
            top: 0;
            right: 0;

            width: min(80vw, 230px);
            height: 100dvh;

            background: rgba(0, 0, 0, 0.35);
            backdrop-filter: blur(6px);

            padding: 80px 30px 30px;

            flex-direction: column;
            justify-content: flex-start;

            overflow-y: auto;
            -webkit-overflow-scrolling: touch;

            box-shadow: -10px 0 25px rgba(0, 0, 0, 0.35);

            transform: translateX(100%);
            transition: transform 0.45s ease;

            z-index: 600;
          }

          body.menu-open .mobile-nav{
            transform: translateX(0);
          }

          body.menu-open{
            overflow: hidden;
          }

          .mobile-main,
          .mobile-footer{
            display: flex;
            flex-direction: column;
            gap: 20px;
          }

          .mobile-footer{
            margin-top: auto;
            padding-top: 40px;
            font-family: var(--font-style-side-area);
          }

          .mobile-nav a{
            color: var(--color-font-primary);
            text-decoration: none;
            text-transform: uppercase;

            font-weight: 800;
            font-size: var(--font-size-menu-header-mobile);
            letter-spacing: 0.08em;

            display: inline-block;
            width: fit-content;

            position: relative;
            padding-bottom: 6px;
          }

          .mobile-footer a{
            font-size: var(--font-size-menu-footer-mobile);
          }

          .mobile-nav a::after{
            content: "";
            position: absolute;
            left: 0;
            bottom: -2px;

            width: 100%;
            height: 1px;
            background: #fff;

            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.3s ease;
          }

          .mobile-nav a:hover::after,
          .mobile-nav a.active::after{
            transform: scaleX(1);
          }

          .mobile-nav a.active{
            color: color-mix(in srgb, var(--color-font-primary) 95%, transparent);
          }

      /* Footer (Mobile Grid) */
          .footer{
            width: 100%;
            padding: 2.5rem 1.5rem;
            text-align: left;

            padding-left: calc(1.5rem + env(safe-area-inset-left));
            padding-right: calc(1.5rem + env(safe-area-inset-right));
          }

          .footer-inner{
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-areas:
              "actions actions"
              "menu legal";

            row-gap: 2.5rem;
            column-gap: 1.25rem;
          }

          .footer-actions{
            grid-area: actions;
            gap: 0.75rem;
            min-width: 0;

            width: 40%;
            min-width: 260px;
            max-width: 340px;

            justify-self: start;
          }

      /* ToTop (Mobile) – nur hier */
          #toTopBtn{
            bottom: 88px;
            right: 16px;

            width: 44px;
            height: 44px;
            min-width: 0;
            padding: 0;

            border-radius: 6px;
            display: grid;
            place-items: center;

            background: rgba(0, 0, 0, 0.45);
            backdrop-filter: blur(6px);

            border: 1px solid rgba(255, 255, 255, 0.25);

            font-family: var(--font-style-side-area);
            font-weight: 800;
            color: #fff;
          }

          body.menu-open #toTopBtn{
            opacity: 0;
            pointer-events: none;
          }

          .to-top-text{
            display: none;
          }

          .to-top-icon{
            display: block;
          }

}


/* =========================================================
   18) LANDSCAPE (Mobile Nav from bottom)
========================================================= */

@media (orientation: landscape) and (max-width: 1024px){

          .mobile-nav{
            width: 70%;
            max-width: 800px;
            height: min(80dvh, 420px);

            left: 50%;
            right: auto;
            bottom: 0;
            top: auto;

            transform: translate(-50%, 100%);

            border-radius: 47px 47px 0 0;
            border-top: 1px solid rgba(255, 255, 255, 0.25);
            box-shadow: 0 -6px 12px rgba(0, 0, 0, 0.35);
          }

          body.menu-open .mobile-nav{
            transform: translate(-50%, 0);
          }

          .mobile-main,
          .mobile-footer{
            align-items: center;
          }

          .mobile-nav a{
            text-align: center;
          }

          .mobile-nav a::after{
            left: 50%;
            transform: translateX(-50%) scaleX(0);
            transform-origin: center;
          }

          .mobile-nav a:hover::after,
          .mobile-nav a.active::after{
            transform: translateX(-50%) scaleX(1);
          }

          .mobile-footer{
            margin-top: 70px;
          }

}


/* =========================================================
   19) iPhone Notch / Safe-Area Fix (additiv)
========================================================= */

@supports (padding: max(0px)){

@media (orientation: landscape) and (hover: none) and (pointer: coarse){

          .content{
            padding-left: max(2rem, calc(2rem + env(safe-area-inset-left)));
            padding-right: max(2rem, calc(2rem + env(safe-area-inset-right)));
          }

          .footer{
            padding-left: max(2rem, calc(2rem + env(safe-area-inset-left)));
            padding-right: max(2rem, calc(2rem + env(safe-area-inset-right)));
          }

}

}