/* GLIEDERUNG
    (1)  Grundeinstellungen
    (2)  Header
    (3)  Neu auf HaPaGuide Verlinkung
    (4)  Navigation
    (6)  Hintergründe und Seitenbreite
    (8)  Überschriften, Textausrichtung, Porträtbild
    (9)  Slideshow mehrerer Bilder
    (10) Blaue Buttons
    (11) Scrollbare Link-Leiste und alle Links aufgelistet
    (12) Blau-weiße Icons groß
    (13) Kleine Icons mit Erläuterung
    (14) Fokus Bilder, Videos und Karten
    (15) Countdown
    (18) Magazin CLOSE, Lesematerialien und Prospekte
    (19) Links und Akkordeone
    (20) Galerien
    (22) Attraktionsdaten und Soundtracks
    (23) Info-Karten und Verkaufsdetails
    (25) Formulare
    (26) Ticket
    (27) Updates
    (29) Sitemap */


@media(max-width: 450px) {

/* (1) GRUNDEINSTELLUNGEN */

/* Sprungmarken aufgrund höherer Navigation weiter zurücksetzen */
.anker {
    margin: -3.5rem;
}


/* (2) HEADER */

/* HaPaGuide Logo wird leicht nach oben versetzt */
header img {
    margin-top: -50px;
}


/* (3) NEU AUF HAPAGUIDE VERLINKUNG */

a .map_box {
    display: block;
}


/* (4) NAVIGATION */

/* Navigations-Leiste wird leicht transparent */
.nav_width {
    opacity: .95;
}

/* Abstände zwischen den Menüpunkten verringern sich an den Seiten */
nav .li_expandable a {
    padding: 0.6rem 0.8rem;
}


/* (6) HINTERGRÜNDE UND SEITENBREITE */

/* Maximale Breite des angezeigten Inhaltes */
.width_1200_wb {
    background-size: 40px auto;
}

/* Werbebanner Bücher und Hefte Erhöhung Minimum-Height */  

.banner_hefte {
    min-height: 375px;
    padding: 1rem 5%;
}


/* (7) EINBLENDUNG VON SEITENABSCHNITTEN UND LESEUMFANG */

.kogge img {
    max-width: 90%;
    margin-top: 1rem;
}


/* (8) ÜBERSCHRIFTEN, TEXTAUSRICHTUNG, PORTRÄTBILD */

.countdown_header h2 {
    font-size: 1.2rem;
}

/* Überschrift wird verkleinert */
h3,
h5,
.ticket_txt h2 {
    font-size: 0.9rem;
}

h4,
h6 {
    font-size: 0.9rem;
}

h5 {
    margin: 0.5rem 0 0.25rem 0;
}

.link_details_transform h3,
.link_details_former_area {
    font-size: 0.85rem;
    height: 45px;
}

/* Rundes Bild wird weitere 50px kleiner */
.img_circle img {
    width: 200px;
}

.listing li {
    width: 100%;
}


/* (9) SLIDESHOW MEHRERER BILDER */

/* Bilder nehmen die volle Displaybreite ein */
.slideshow_focus,
.picture_focus,
.picture_focus_single {
    width: 100%;
    padding: 1rem 0 1rem 0;
}

.picture_focus_single {
    height: 180px;
}

.picture_focus_single .picture_text p,
.link_blue_list_pair_desktop {
    display: none;
}

/* Vor- und Zurück-Pfeile passen sich in der Position an und verkleinern sich */
.prev, .next {
    padding: 5px;
    font-size: 2.5rem;
}

blockquote ul .slideshow {
    min-height: 215px;
}


/* (10) BLAUE BUTTONS */

/* Blaue Links ordnen sich untereinander an */
.link_blue_list {
    flex-direction: column;
}

/* Feste Größe der blauen Links in ihrer Breite */
.link_blue_list button {
    width: 15rem;
}


/* (11) SKROLLBARE LINK-LEISTE UND ALLE LINKS AUFGELISTET */

/* Größe der Links reduziert sich in der Breite um weitere 30px */
.link,
.link_image,
.link_image_history {
    width: 290px;
}

/* Kreis für Icon bei Links vergrößert sich wieder*/
.icon_round {
    width: 50px;
    height: 50px;
    top: -25px;
    left: 120px;
}

/* Größe Icon bei Links vergrößert sich wieder*/
.icon_round img {
    width: 30px;
}

/* Bei allen angezeigten Links werden diese mobil verbreitert */
.link_all .link,
.link_all .link_image img {
    width: 290px;
}

/* Margin auf der rechten Seite entfällt mobil */
.link_all .link {
    margin: 0 0 1rem 0;
}

/* Icons ordnen sich mittig untereinander an */
.link_icons {
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.link_icons img {
    margin: 0;
}

.link_icons_left {
    margin: 0 0 2px 0;
    height: 20px;
}

/* Höhe festgesetzt falls z.B. kein Icon vorhanden ist */   
.link_icons_right {
    height: 20px;
}

/* Icons werden aufgrund von mehr Breite nebeneinander analog Desktop angezeigt */
.link_all .link_icons {
    flex-direction: row;
    justify-content: space-between;
}

/* Abstand der Links vergrößert sich nach oben */
.link_icons img {
    margin-top: 1px;
}

.link_all .link_icons img {
    margin-top: 0;
}

.link_icons_right,
.link_icons_left {
    margin-top: 2px;
}

/* Höhe der Links reduziert sich erneut */
.link_details_event,
.link_details_gastro {
    height: 200px;
}

.link_details {
    height: 220px;
}

/* Höhe der historischen Links und Themenwelten reduziert sich erneut */
.link_details_history,
.link_details_area,
.link_all .link_details {
    height: 140px;
}

.link_details_area {
    height: 160px;
}

.link_all .link_details {
    height: 170px;
}

/* Höhe der Umgestaltungen und ehemaligen Themenbereiche reduziert sich erneut */
.link_details_transform,
.link_details_former_area,
.link_details_gastro_all {
    height: 180px;
}

.link_details_transform {
    height: 190px;
}

/* Höhe der Shows reduziert sich erneut */
.link_details_shows {
    height: 230px;
}

.link_details_attractions {
    height: 200px;
}

/* Höhe der Überschriften reduziert sich erneut */
.link_details_history h3 {
    height: 50px;
    line-height: 1.1rem;
}

.link_details_history h3,
.link_details h3,
.link_details_gastro h3,
.link_details_area h3,
.link_details_event h3,
.link_details_transform h3 {
    height: 30px;
    line-height: 1.1rem;
}

.link_details_event h3 {
    height: 20px;
    line-height: 1.1rem;
}

/* Text für Link mit Anzeige von 3 Zeilen */
.link p {
    font-size: 0.8rem;
    -webkit-line-clamp: 3;
    margin-bottom: 1rem;
}

.link_icons_left p {
    margin: 0;
}

.link_all .link p {
    -webkit-line-clamp: 2;
}

/* Button in Link verkleinert sich */
.link button {
    font-size: 0.8rem;
}


/* (12) BLAU-WEISSE ICONS GROSS */

/* Größe der einzelnen Icons wird reduziert */
.plan_icon {
    padding: 0.3em 1em;
    margin: 0 0.4em 0.8em 0.4em;
    cursor: pointer;
    width: 100px;
}

.discover_icon {
    padding: 0.3em 0.6em;
    margin: 0 0.4em 0.8em 0.4em;
    cursor: pointer;
    width: 125px;
}

/* Icon im Link verkleinert sich */
.plan_icon img,
.discover_icon img {
    width: 50px;
}

/* Größe der Beschriftung verkleinert sich */
.plan_icon h3,
.discover_icon h3{
    font-size: 0.75em;
}


/* (13) KLEINE ICONS MIT ERLÄUTERUNG */

/* Größe des Erläuterungsbereichs */
.iconexplained p {
    min-width: 160px;
    max-width: 160px;
}

/* Größe Swipe-Wisch Icon wird verkleinert */
.icon_swipe img {
    width: 30px;
}


/* (14) FOKUS BILDER, VIDEOS UND KARTEN */

/* Gesamte Breite wird für das Bild genutzt */
.picture_focus_area {
    width: 100%;
    padding: 2em 0 1em 0;
}

/* Generelle Anordnung der Fokus-Links */
.visual_focus_area {
    flex-flow: column;
}

/* Picture-Fokus nimmt halbe Seitenbreite ein */
.pic_focus {
    width: 100%;
    height: 200px;
    margin: 1rem 0 0 0;
}

/* Video-Fokus nimmt 50% der Seitenbreite ein */
.vid_focus {
    width: 100%;
    margin: 0;
}

.pic_text p {
    display: none;
}

/* Bildhöhe wird leicht reduziert */
.picture_focus {
    padding: 0;
    height: 220px;
}

/* Text auf dem Bild erhält Abstände */
.picture_text {
    width: 80%;
    padding: 1.5em 1.5em 1.5em 2.5em;
}

/* Text auf dem Bild wird ausgeblendet */
.picture_text p {
    display: none;
}

.video_text p {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;

.map {
    height: 400px;
}


/* (15) COUNTDOWN */

/* Textumbruch bei Mobilversion */
.countdown_mobile {
    display: block;
    margin-top: -1.2em;
}

.countdown {
    align-items: center;
    justify-content:
}

.countdown_rectangle span {
    margin: 0 0.75rem 0.5rem 0.75rem;
    width: 50px;
    height: 35px;
    font-size: 1.1rem;
}

.countdown_rectangle p {
    margin: 0 0 4rem 0;
    font-size: 0.8rem;
}


/* (18) MAGAZIN CLOSE, LESEMATERIALIEN UND PROSPEKTE */

/* Volle Seitenbreite für die aktuelle Ausgabe */
.magazine_box {
    width: 100%;
    border-radius: 0;
    padding: 1rem 0 1rem 0;
}

.magazine_prev_pic img,
.reading_prev_pic img {
    width: 150px;
}

.magazine_prev_content,
.reading_prev_content {
    width: 80%;
}

#prev_banner {
    background-image: url(../pics/buecher_und_hefte/banner_chronik_450.jpg);
    width: 280px;
    height: 115px;
}

.reading_box {
    width: 100%;
    padding: 1rem 0 1rem 0;
}

.reading_prev_content h4 {
    margin: 0.5rem 0 1rem 0;
}

.magazine_year_cover {
    width: 120px;
}

.brochures figure {
    width: 60px;
    margin: 0 5px 0 5px;
}

.tix figure {
    width: 60px;
    margin-bottom: 20px;
}

.magazine_year_cover p,
.tix p {
    font-size: 0.75rem;
}

.brochures figcaption,
.tix figcaption {
    font-size: 0.8rem;
}

.magazine_year img {
    width: 120px;
}

.brochures figure img {
    width: 60px;
}

.tix figure img {
    height: 70px;
}

.no_tix {
    height: 70px;
}

.disclaimer {
    font-size: 0.75rem;
    padding: 50px 20px 0 20px;
}


/* (19) LINKS UND AKKORDEONE */

/* Überschrift reduziert sich in der Größe */
.links label h2,
.expandable label h2,
.yearbook_year label h2 {
    font-size: 1.1rem;
}

/* Ein "+" zeigt an, dass Links ausklappbar sind */
.links label h2::before {
    content: '+';
    font-weight: bold;
    margin-right: 0.5rem;
}

/* Links werden bis zum Ausklappen versteckt */
.links input + label + .content {
    display: none;
}

/* Links werden bei Klick angezeigt */
.links input:checked + label + .content {
    display: block;
}

/* Per "-" können Links wieder eingefahren werden */
.links input[type="checkbox"]:checked + label h2::before {
    content: '-';
    font-weight: bold;
}

.links li,
.links_column li {
/* Silbentrennung reaktiviert */
    hyphenate-limit-lines: 2;
/* Stern vor Auflistungen geht in den Text über */
    list-style-position: inside;
}

.chronicle li {
    margin-bottom: 15px;
}


/* (20) GALERIEN */

.gallery_main,
.gallery_small {
    width: 100%;
}

.gallery_main_single,
.gallery_video {
    padding: 0 0 2px 0;
}

.gallery_video iframe {
    min-height: 200px;
}

/* Geöffnete Bildergalerie - Fotorahmen */
.gallerypic {
    padding: 0.5rem 0.5rem 3rem 0.5rem;
}

/* Geöffnete Bildergalerie - Text unter Bild */
.gallerytext {
    margin-top: 0.25rem;
}

/* Geöffnete Bildergalerie - Schließen X */
.galleryclose {
    margin-top: -0.1rem;
}

/* Geöffnete Bildergalerie - Pfeile */
.previngallery,
.nextingallery {
    top: 35%;
    font-size: 2.5rem;
}


/* (22) ATTRAKTIONSDATEN UND SOUNDTRACKS */

/* Kategorie trennt sich von kleinen Icons untereinander */
.data_icons {
    flex-flow: column;
    align-items: center;
    margin-bottom: 1.5rem;
}

/* Lücke nach unten statt rechts */
.data_icons_category {
    margin: 0 0 10px 0;
}

.data img {
    height: 30px;
}

/* Breite einzelner Einträge */
.data li {
    width: 300px;
    margin: 0 0 0 0;
}

/* CD Titel zentrieren sich und Seitenabstände entfallen */
.title li {
    margin: 0 0 15px 0;
    text-align: center;
}

.data li h4 {
    margin-bottom: -15px;
}

/* Größe CD Cover verringert sich weiter */
.cd_cover img {
    width: 200px;
}


/* (23) INFO-KARTEN UND VERKAUFSDETAILS */

.sales {
    flex-flow: column;
    flex-wrap: wrap;
}

/* Gestaltung Überschriften einzelner Karten */
.info_cards label {
    padding: 0.7rem 1rem 0.7rem 1rem;
    width: 75%;
}

.sales label {
    width: 150px;
    margin: 0 0 10px 0;
}

/* Rand offener Karten reduziert sich */
.info_cards .card {
    padding: 0;
}

/* Einzug wird verhindert und Silbentrennung angestoßen */
.card .list li {
    padding-left: 0;
    margin: 0 0 1rem 0;
/* Silbentrennung erst ab 5 Zeichen und max. 2 Mal pro Magazintitel */
    -webkit-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: auto 5;
    hyphenate-limit-lines: 2;
}

/* Ausblendung des Sterns bei Listen */
.card .list li {
    list-style-position: inside;
}


/* (24) KALENDER */

/* Breite und Abstände der Texte in der Legende */
.calendar_legend p {
    width: 220px;
    font-size: 0.8rem;
}

.iconbox p {
    font-size: 0.8rem;
}


/* (25) FORMULARE */

/* Eingabefelder werden größer */
form .field input {
    width: 300px;
    max-width: 90%;
}

/* Nachrichten-Feld wird kleiner und höher */
form textarea {
    width: 225px;
    height: 150px;
}


/* (26) TICKET */

/* Ticket verkleinert sich */
.ticket {
    width: 325px;
    height: 200px;
    margin: 0 10px 15px 10px;
}

.ticket_txt .age {
    font-size: 0.8rem;
}

.ticket_txt .prize {
    font-size: 0.9rem;
}


/* (27) UPDATES */

/* Breite auf 85% beschränkt */
.upd_new {
    width: 85%;
}

/* Größere Galerie-Bilder */
.upd_pic {
    width: 90%;
}


/* (29) SITEMAP */

.sitemap_category ul {
    margin: 0 1rem 2rem 1rem;
    width: 300px;
}

}


/* BIS 450PX LANDSCHAFTSMODUS */

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

/* (2) HEADER */

/* Höhe des Headers wird auf 70% der Displayhöhe eingestellt */
header {
    height: 70svh;
}


/* (3) NEU AUF HAPAGUIDE VERLINKUNG */

a .updates_box,
a .map_box {
    left: 20%;
    right: 20%;
}

/* (14) FOKUS BILDER, VIDEOS UND KARTEN */

.video_focus {
    height: 80svh;
}

.video_focus video {
    height: 80svh;
}


/* (20) GALERIEN */

.gallerypic img {
    max-width: auto;
    height: 100%;
}

}


/* BIS 450PX PORTRÄTMODUS */

@media(max-width: 450px) and (orientation: portrait) {

/* (2) HEADER */

/* Höhe des Headers wird auf 50% der Displayhöhe eingestellt */
header {
    height: 50svh;
}

/* Größe des HaPaGuide Logos wird verkleinert - Link zur Startseite */
header img {
    height: 170px;
}

.logo img {
    height: 170px;
}


/* (3) NEU AUF HAPAGUIDE VERLINKUNG */

a .updates_box,
a .map_box {
    padding: 10px;
    left: 20%;
    right: 20%;
}

/* (14) FOKUS BILDER, VIDEOS UND KARTEN */

.video_focus {
    height: 60svh;
}

.video_focus video {
    height: 60svh;
}

/* Einstellung verhindert minimale Lücke des blauen Verlaufs zum linken Rand */
.video_text {
    width: 101%;
    margin-left: -1px;
}

/* Text auf dem Video wird in den angezeigten Zeilen begrenzt */
.video_text h2,
.video_text h3,
.video_text p {
    padding: 0 1rem 0 1rem;
}


/* (16) MODAL */

.banner_top_content_icon img {
    height: 25px;
}


/* (23) INFO-KARTEN UND VERKAUFS-DETAILS */

/* Box wird nochmals höher */
.slide_comment {
    min-height: 350px;
}

}