/* =========================================================
   TERMINE – content-termine.css
   Datei: content-termine.css
========================================================= */


/* =========================================================
   1) KLEINE HINWEISE
========================================================= */

          .tour-note{
            display: inline-flex;
            align-items: center;
            justify-content: center;

            margin-top: 6px;
            padding: 4px 11px;

            border-radius: 7px;
            border: 1px solid rgba(255,255,255,0.16);
            background: rgba(0,0,0,0.28);

            font-family: var(--font-style-ui);
            font-size: 0.7rem;
            font-weight: 800;
            line-height: 1;
            letter-spacing: 0.04em;
            text-transform: uppercase;

            color: rgba(255,255,255,0.82);
            white-space: nowrap;
          }


          .tour-note.is-extra{
            background: rgba(20,160,80,0.50);
            border-color: rgba(90,210,130,0.34);
            color: rgba(225,255,235,0.94);
          }


          .tour-note.is-soldout{
            background: rgba(150,30,30,0.50);
            border-color: rgba(255,120,120,0.32);
            color: rgba(255,220,220,0.92);
          }


/* =========================================================
   ORT + HINWEIS UNTEREINANDER
========================================================= */

          .tourdaten td[data-label="Ort"]{
            white-space: normal;
          }


          .tourdaten td[data-label="Ort"] .cell-main{
            display: block;
            margin-bottom: 2px;
          }


          .tourdaten td[data-label="Ort"] .tour-note{
            display: inline-flex;
            margin-top: 6px;
          }


/* =========================================================
   2) ABSTAND NACH BREADCRUMB
========================================================= */

          .content .breadcrumb.news-ticker{
            margin: 0 0 calc(var(--menu-gap) * 1.4) 0;
          }


/* =========================================================
   3) SECTION-BOXEN
========================================================= */

          .termine-section{
            padding: calc(var(--menu-gap) * 1.1);

            border: 1px solid rgba(255, 255, 255, 0.34);
            border-radius: var(--radius-sm);
            background: rgba(0, 0, 0, 0.14);
          }


          .termine-section + .termine-section{
            margin-top: calc(var(--menu-gap) * 2);
          }

@media (max-width: 700px){

          .termine-section + .termine-section{
            margin-top: calc(var(--menu-gap) * 1.6);
          }

}


/* =========================================================
   4) SECTION HEADER (Titel + optional Tourname)
========================================================= */

          .termine-section__header{
            margin: 0 0 calc(var(--menu-gap) * 0.9) 0;
            padding: 0 0 calc(var(--menu-gap) * 0.55) 0;

            display: flex;
            align-items: baseline;
            gap: 0.8rem;
            flex-wrap: wrap;

            border-bottom: 1px solid rgba(255, 255, 255, 0.22);
          }


          .termine-section__header h2{
            margin: 0;

            font-family: var(--font-style-headline);
            font-size: var(--font-size-headline-section);
            line-height: var(--line-height-headline-md);
            color: #fff;
          }


          .tourdaten-subtitle{
            font-family: var(--font-style-ui);
            font-size: calc(var(--font-size-content) * 0.9);
            font-weight: 700;

            color: rgba(255, 255, 255, 0.75);
            white-space: nowrap;
          }


/* =========================================================
   5) PLATZHALTER
========================================================= */

          .termine-placeholder{
            margin: calc(var(--menu-gap) * 0.8) 0 0;

            font-family: var(--font-style-text);
            font-size: var(--font-size-content);
            line-height: var(--line-height-text);
            color: rgba(255, 255, 255, 0.85);
          }


/* =========================================================
   6) TABLE BASIS (Desktop / Widescreen)
========================================================= */

          .tourdaten{
            width: 100%;
            border-collapse: collapse;
          }


          .tourdaten th,
          .tourdaten td{
            text-align: left;
            vertical-align: top;
          }


          .tourdaten thead tr.header-row{
            background: rgba(255, 255, 255, 0.06);
            border-top: 1px solid rgba(255, 255, 255, 0.22);
            border-bottom: 1px solid rgba(255, 255, 255, 0.22);
          }


          .tourdaten thead th{
            padding: 12px 10px;

            font-family: var(--font-style-ui);
            font-size: var(--font-size-headline-minor);
            font-weight: 900;
            letter-spacing: 0.02em;

            color: rgba(255, 255, 255, 0.92);
          }


          .tourdaten td{
            padding: 18px 12px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.18);

            font-family: var(--font-style-text);
            font-size: var(--font-size-content);
            line-height: 1.6;

            color: rgba(255, 255, 255, 0.92);
            white-space: nowrap;
          }


          .tourdaten tbody tr:nth-child(even){
            background: rgba(255, 255, 255, 0.03);
          }


          .tourdaten tbody tr:hover{
            background: rgba(255, 255, 255, 0.06);
          }


/* =========================================================
   7) DESKTOP: SPALTENBREITEN FIXIEREN
========================================================= */

@media (hover: hover) and (pointer: fine){

          /* Ort (Spalte 3) */
          .tourdaten thead th:nth-child(3){
            width: 24%;
            max-width: 24%;
          }

          .tourdaten tbody td:nth-child(3){
            width: 24%;
            max-width: 24%;
          }

          /* Halle (Spalte 5) */
          .tourdaten thead th:nth-child(5),
          .tourdaten tbody td:nth-child(5){
            width: 28%;
          }

          /* Info (Spalte 6) */
          .tourdaten thead th:nth-child(6),
          .tourdaten tbody td:nth-child(6){
            width: 110px;
            white-space: nowrap;
          }

}


/* =========================================================
   8) HEUTE / VERGANGEN
========================================================= */

          .tourdaten tbody tr.vergangen td{
            color: rgba(255, 255, 255, 0.32);
          }


          .tourdaten tbody tr.heute-karte{
            background: rgba(9, 4, 116, 0.55);
          }


          .tourdaten tbody tr.heute-karte td{
            font-weight: 900;
            color: rgba(255, 255, 255, 0.98);
          }


/* =========================================================
   9) INFO-LINKS
========================================================= */

          .tour-link{
            display: inline-flex;
            align-items: center;
            justify-content: center;

            min-width: 100px;
            min-height: 32px;
            padding: 4px 15px;

            border-radius: 6px;
            box-sizing: border-box;

            font-size: 0.75rem;
            font-weight: 800;
            line-height: 1;

            background: rgba(255,255,255,0.08);
            border: 1px solid rgba(255,255,255,0.24);

            color: #fff;
            text-align: center;
            text-decoration: none;
            white-space: nowrap;

            transition: background 0.2s ease, border-color 0.2s ease;
          }


          .tour-link:hover{
            background: rgba(0,0,0,0.55);
            border-color: rgba(255,255,255,0.35);
          }


          .tour-link::before,
          .tour-link::after{
            content: none !important;
            display: none !important;
          }


/* =========================================================
   VARIANTEN (automatisch per JS)
========================================================= */

          .tour-link.is-tickets{
            background: rgba(5, 54, 143, 0.650);
            border-color: rgba(255,255,255,0.34);            
          }

          .tour-link.is-tickets:hover{
            background: rgba(5, 54, 143, 0.050);
            border-color: rgba(255,255,255,0.54);
          }


          .tour-link.is-info{
            background: rgba(5, 54, 143, 0.650);
            border-color: rgba(255,255,255,0.24);            
          }

          .tour-link.is-info:hover{
            background: rgba(5, 54, 143, 0.050);
            border-color: rgba(255,255,255,0.34);
          }


          .tour-link.is-shop{
            background: rgba(5, 54, 143, 0.650);
            border-color: rgba(255,255,255,0.24);
          }

          .tour-link.is-shop:hover{
            background: rgba(5, 54, 143, 0.050);
            border-color: rgba(255,255,255,0.34);
          }


          .tour-link.is-disabled{
            opacity: 0.45;
            pointer-events: none;
          }


/* =========================================================
   VERGANGENE TERMINE – LINKS UND HINWEISE AUSGRAUEN
========================================================= */

          .tourdaten tbody tr.vergangen .tour-link{
            background: rgba(0,0,0,0.25);
            border-color: rgba(255,255,255,0.12);
            color: rgba(255,255,255,0.45);
            opacity: 0.5;
          }


          .tourdaten tbody tr.vergangen .tour-link:hover{
            background: rgba(0,0,0,0.25);
            border-color: rgba(255,255,255,0.12);
          }


          .tourdaten tbody tr.vergangen .tour-note{
            background: rgba(0,0,0,0.25);
            border-color: rgba(255,255,255,0.12);
            color: rgba(255,255,255,0.45);
            opacity: 0.5;
          }


/* =========================================================
   10) TOUCH (Mobile): Card View
========================================================= */

@media (max-width: 700px){

          .tourdaten thead{
            display: none;
          }

          .tourdaten tbody{
            display: block;
            margin-top: calc(var(--menu-gap) * 0.35);
          }

          .tourdaten tbody tr{
            display: block;
            position: relative;

            margin: 0 0 calc(var(--menu-gap) * 0.55) 0;
            padding: calc(var(--menu-gap) * 0.65);
            padding-top: calc(var(--menu-gap) * 1.25);

            border: 2px solid rgba(255, 255, 255, 0.28);
            border-radius: var(--radius-sm);
            background: rgba(0, 0, 0, 0.14);
          }

          .tourdaten tbody tr.heute-karte{
            padding-top: calc(var(--menu-gap) * 1.85);
            background: rgba(9, 4, 116, 0.70);
            border-color: rgba(255, 255, 255, 0.42);
          }

          .tourdaten tbody tr.heute-karte::before{
            content: attr(data-hinweis);
            position: absolute;

            left: 14px;
            top: 10px;

            font-family: var(--font-style-ui);
            font-size: var(--font-size-headline-minor);
            font-weight: 900;
            letter-spacing: 0.08em;
            text-transform: uppercase;

            color: rgba(255, 255, 255, 0.95);
            pointer-events: none;
          }

          .tourdaten tbody td{
            display: grid;
            grid-template-columns: 40% 1fr;
            column-gap: calc(var(--menu-gap) * 0.8);

            padding: 0.35rem 0;
            border: none;
            border-bottom: 1px solid rgba(255, 255, 255, 0.14);

            font-family: var(--font-style-text);
            font-size: var(--font-size-content);
            line-height: 1.25;

            color: rgba(255, 255, 255, 0.92);

            text-align: right;
            white-space: normal;
          }

          .tourdaten tbody td:last-child{
            border-bottom: none;
          }

          .tourdaten tbody td::before{
            content: attr(data-label);
            text-align: left;

            font-family: var(--font-style-ui);
            font-size: calc(var(--font-size-content) * 1.05);
            font-weight: 900;
            letter-spacing: 0.02em;
            line-height: 1.2;

            color: rgba(255, 255, 255, 0.86);
          }

          .tourdaten tbody td[data-label="Ort"]{
            white-space: normal;
            text-align: right;
          }

          .tourdaten tbody td[data-label="Ort"] .cell-main{
            display: inline;
          }

          .tourdaten tbody td[data-label="Ort"] .tour-note{
            position: absolute;

            top: 10px;
            right: 14px;

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

            margin: 0;
            padding: 2px 7px;

            font-size: 0.62rem;
            letter-spacing: 0.03em;
            line-height: 1;

            z-index: 2;
          }

          .tourdaten tbody tr.heute-karte td[data-label="Ort"] .tour-note{
            top: 10px;
            right: 14px;
          }

          .tourdaten tbody td[data-label="Info"]{
            text-align: right;
          }

          .tourdaten tbody td[data-label="Info"] .tour-link{
            justify-self: end;
          }

          .tourdaten tbody tr.vergangen{
            opacity: 0.78;
          }

}


/* =========================================================
   11) TERMINE – SPRUNGNAVIGATION LABEL
========================================================= */

          .termine-sprunglabel{
            margin: 0 0 calc(var(--menu-gap) * 0.6) 0;
            text-align: center;

            font-family: var(--font-style-ui);
            font-size: calc(var(--font-size-content) * 0.9);
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;

            color: rgba(180, 190, 255, 0.75);
          }


/* =========================================================
   12) TERMINE – SCHNELLNAVIGATION
========================================================= */

          .termine-sprungnav{
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: calc(var(--menu-gap) * 0.8);
            margin: 0 0 calc(var(--menu-gap) * 1.6) 0;
          }


          .termine-sprunglink{
            display: inline-flex;
            align-items: center;
            justify-content: center;

            padding: 0.65rem 1.1rem;
            border-radius: var(--radius-sm);

            font-family: var(--font-style-ui);
            font-size: var(--font-size-headline-minor);
            font-weight: 800;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            text-decoration: none;

            color: var(--color-text);
            background: var(--color-box-bg);
            border: 1px solid var(--color-box-border);

            box-shadow: var(--shadow-soft);

            transition:
              background 0.2s ease,
              border-color 0.2s ease,
              transform 0.15s ease,
              box-shadow 0.15s ease;
          }


/* =========================================================
   13) SPRINGE-ZU – RAHMEN
========================================================= */

          .termine-sprungbox{
            max-width: 60%;
            margin: 0 auto calc(var(--menu-gap) * 0.9) auto;

            padding: calc(var(--menu-gap) * 0.45);
            padding-bottom: 0.1px;

            border: 1px solid rgba(255, 255, 255, 0.28);
            border-radius: var(--radius-sm);
            background: rgba(255, 255, 255, 0.025);

            box-shadow:
              inset 0 0 0 1px rgba(255,255,255,0.08),
              0 6px 18px rgba(0,0,0,0.25);
          }


          .termine-sprunglabel{
            margin: 0 0 calc(var(--menu-gap) * 0.25) 0;
            font-size: calc(var(--font-size-content) * 0.85);
          }


          .termine-sprungnav{
            margin-bottom: 10px;
            gap: calc(var(--menu-gap) * 0.95);
          }


          .termine-sprunglink{
            padding: 0.4rem 0.75rem;
            font-size: calc(var(--font-size-headline-minor) * 0.88);
          }


/* =========================================================
   14) SPRUNGLINK STATES
========================================================= */

          .termine-sprunglink:hover{
            background: var(--color-box-bg-strong);
            border-color: var(--color-box-border-strong);
            transform: translateY(-1px);
            box-shadow: var(--shadow-medium);
          }


          .termine-sprunglink:active{
            transform: translateY(0);
          }


          .termine-sprunglink.is-active{
            background: var(--color-box-bg-strong);
            border-color: var(--color-box-border-strong);
            box-shadow: var(--shadow-strong);
          }


/* =========================================================
   15) RESPONSIVE – Sprungnavigation
========================================================= */

@media (max-width: 600px){

          .termine-sprungnav{
            flex-direction: column;
            align-items: center;
          }

          .termine-sprunglink{
            width: 75%;
            padding: 0.55rem 0.9rem;
            font-size: calc(var(--font-size-headline-minor) * 1.15);
          }

}

@media (min-width: 601px) and (max-width: 1500px){

          .termine-sprunglink{
            padding: 0.55rem 1rem;
            font-size: calc(var(--font-size-headline-minor) * 1.1);
          }

}


/* =========================================================
   16) TAG: Standard kurz – NUR Handy lang
========================================================= */

          .tourdaten td[data-label="Tag"] .tag-long{
            display: none;
          }


          .tourdaten td[data-label="Tag"] .tag-short{
            display: inline;
          }

@media (max-width: 600px){

          .tourdaten td[data-label="Tag"] .tag-short{
            display: none !important;
          }

          .tourdaten td[data-label="Tag"] .tag-long{
            display: inline !important;
            font-weight: 900;
          }

          .tourdaten tbody td[data-label="Tag"]{
            white-space: normal !important;
            line-height: 1.3 !important;
            font-weight: 900 !important;
          }

}

          .tourdaten td[data-label="Tag"] .tag-long{
            margin-left: 0.35rem;
          }