@font-face {
    font-family: 'CenturyGothicBold';
    src: url('../fonts/cg_b.ttf');
    font-stretch:normal;
    font-style:normal;
    font-weight: bold;
    /* Text sofort in der Ersatzschrift zeigen statt bis zu 3s unsichtbar
       zu bleiben - auf dem Handy sind die 127 KB Schrift sonst ein Blocker. */
    font-display: swap;
}

*, h1, h2, h3, h4, h5, h6 {
    font-family: CenturyGothicBold, 'Montserrat', sans-serif;
}

/* Der *-Selektor oben setzt die fette Hausschrift auch fuer Fliesstext.
   Auf kleinen Displays ist das schwer zu lesen - Ueberschriften, Navigation
   und Buttons behalten sie, laufender Text bekommt eine normale Schrift. */
@media only screen and (max-width: 767px) {
    p, td, li, .panel-body, .modal-body p {
        font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        font-weight: 400;
        line-height: 1.55;
    }
}

.nav .open>a, .nav .open>a:focus, .nav .open>a:hover {
    background-color:transparent;
}

a.clickable {
    color:#ce0400
}
a.clickable:focus, a.clickable:hover{
    color: rgba(206, 4, 0, 0.60)
}
.center-head {
    text-align: center;
}


.arrow {
    top: -10px;
    content: ' ';
    border-top-width: 0;
    border-bottom-width: 10px;
    border-left-width: 10px;
    border-right-width: 10px;
    border-bottom-color: #000;
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-top-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
    border-style: solid;
}

.arrow.left {
    margin-left: 15%;

}
.arrow.middle {
    margin-left: 48%;

}
.arrow.right {
    margin-left: 81%;
}

@media screen and (max-width: 750px) {
    .arrow.left {
        margin-left: 10%;

    }
    .arrow.middle {
        margin-left: 44%;

    }
    .arrow.right {
        margin-left: 77%;
    }
    #plan {
        height: 300px;
    }
}


/* Important part */
.modal-dialog{
    overflow-y: initial !important
}
.modal-body{
    max-height: calc(100vh - 190px);
    max-height: calc(100svh - 190px);
    overflow-y: auto;
}


/*------------------------------------*\
	Mobile
\*------------------------------------*/

/* Sprungziele nicht unter der fixierten Navigation verstecken */
[id] {
    scroll-margin-top: 60px;
}


/*------------------------------------*\
	<picture> aus tools/img-optimize
\*------------------------------------*/

/* Die Bilder stecken jetzt in einem <picture>. Das erzeugt selbst keine Box
   (display: contents), aber Kind-Selektoren wie .work>img oder .thumbnail>img
   aus style.css/bootstrap greifen dadurch nicht mehr - hier nachgezogen. */
picture {
    display: contents;
}

.work > picture > img,
.team-img > picture > img {
    width: 100%;
}

.thumbnail > picture > img,
.thumbnail a > picture > img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-right: auto;
    margin-left: auto;
}

/* Die optimierten Bilder tragen width/height (gegen Layout-Shift). Ohne
   Begrenzung wuerde das width-Attribut Bilder aus ihrem Container schieben,
   wo bisher die natuerliche Groesse galt.

   width/height muessen zusaetzlich auf auto stehen, sonst gelten die
   Attributwerte als feste Groesse: begrenzt das Markup nur eine Seite
   (max-width an den Footer-Logos, max-height im Sponsorenblock), bleibt die
   andere auf dem Attributwert stehen und das Logo wird verzerrt. Mit auto
   leitet der Browser sie aus dem Seitenverhaeltnis der Attribute ab. */
img[data-img-opt] {
    max-width: 100%;
    width: auto;
    height: auto;
}

.footer-logo > a > picture > img {
    max-height: 80px;
    width: auto;
}

/* .table-responsive ist nur ein Sicherheitsnetz fuer schmale Geraete; der
   Rahmen der Bootstrap-Klasse wuerde die farbigen Buehnen-Panels doppeln. */
.table-responsive {
    border: 0;
    margin-bottom: 0;
}

.map-hint {
    margin-top: 10px;
    font-size: 14px;
    opacity: 0.75;
}
@media only screen and (min-width: 768px) {
    .map-hint {
        display: none;
    }
}

@media only screen and (max-width: 767px) {

    /* --- Hero ---
       style.css schiebt .home-wrapper mobil um feste 400px nach unten; zusammen
       mit der vertikalen Zentrierung faellt die Headline aus dem 100vh-Hero
       heraus (auf 320x568 komplett). Offset neutralisieren und stattdessen
       leicht nach unten setzen, damit das Bildmotiv sichtbar bleibt. */
    .home-wrapper {
        margin-top: 0;
    }
    #home .home-wrapper {
        top: 62%;
    }
    #home {
        height: 100vh;
        height: 100svh;
        min-height: 520px;
    }
    .home-content h1 {
        font-size: clamp(26px, 7.5vw, 36px);
        line-height: 1.15;
        overflow-wrap: anywhere;
    }

    /* --- Infokarten einspaltig ---
       Parken/OEPNV stehen sonst in zwei col-xs-6-Spalten, in denen der Text
       nach drei bis vier Woertern umbricht. */
    /* float bleibt bestehen: ein nicht-gefloatetes Element neben einer
       vorangehenden Bootstrap-Spalte wuerde seine Zeilen um den Float
       herumlegen und dadurch aufblaehen. */
    #parken [class*="col-xs-"],
    #oepnv [class*="col-xs-"] {
        width: 100%;
        float: left;
    }
    #parken .panel,
    #oepnv .panel {
        margin-bottom: 16px;
    }

    /* --- Tages-Kacheln ---
       col-xs-4 ergibt 90px breite Bilder, und die Beschriftung wird im Theme
       nur per :hover eingeblendet - auf Touch also nie. */
    .work {
        width: 100%;
        float: left;
        padding: 10px 10px 0;
    }
    .work > picture > img {
        height: 110px;
        object-fit: cover;
    }
    /* Overlay nur ueber das Bild legen, nicht ueber die Ueberschrift */
    .work .overlay,
    .work-selected .overlay {
        top: auto;
        height: 110px;
        left: 10px;
        right: 10px;
        opacity: 0.3;
    }
    .work-selected .overlay {
        opacity: 0.55;
    }
    /* Label ohne :hover sichtbar, mittig ueber dem Bild */
    .work .work-content {
        top: auto;
        bottom: 55px;
        -webkit-transform: translateY(50%);
        -ms-transform: translateY(50%);
        transform: translateY(50%);
    }
    .work .work-content h3,
    .work .work-content span {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
    }

    /* --- Modal --- */
    .modal-dialog {
        margin: 8px;
    }
    .modal-body {
        max-height: calc(100vh - 150px);
        max-height: calc(100svh - 150px);
    }
    .modal-header .close {
        padding: 10px;
        margin: -10px -10px 0 0;
        font-size: 28px;
        line-height: 1;
    }
    .modal-body img {
        float: none;
        display: block;
        width: 100%;
        max-width: 240px;
        margin: 0 auto 12px;
    }

    /* --- Tap-Targets --- */
    #nav .main-nav a,
    .btn,
    .day-stage-select {
        min-height: 44px;
    }
    .btn,
    .day-stage-select {
        display: block;
        padding-top: 11px;
        padding-bottom: 11px;
    }
    .day-stage-select {
        margin-bottom: 4px;
    }

    /* --- Sponsoren ---
       Die Logos stehen zusaetzlich als Raster im Footer; mobil reicht einmal.
       In der Sektion selbst zwei Logos pro Zeile statt einem, der
       Hauptsponsor (col-md-12) bleibt in voller Breite. */
    #sponsoren .col-md-6,
    #sponsoren .col-md-4,
    #sponsoren .col-md-3 {
        width: 50%;
        float: left;
        text-align: center !important;
        margin-bottom: 15px !important;
    }
    #sponsoren .thumbnail {
        margin-bottom: 0;
    }
    #footer .sponsor-grid {
        display: none !important;
    }
}

/* Sehr schmale Geraete (iPhone SE u.ae.) */
@media only screen and (max-width: 360px) {
    #sponsoren .col-md-6,
    #sponsoren .col-md-4,
    #sponsoren .col-md-3 {
        width: 100%;
        float: left;
    }
}