/* GLIEDERUNG
    (3)  Neu auf HaPaGuide Verlinkung
    (4)  Navigation
    (5)  Breadcrumbs
    (6)  Hintergründe und Seitenbreite       
    (7)  Einblendung von Seitenabschnitten und Leseumfang
    (8)  Überschriften, Textausrichtung, Porträtbild
    (9)  Slideshow mehrerer Bilder
    (11) Scrollbare Link-Leiste
    (13) Kleine Icons mit Erläuterung
    (14) Fokus Bilder, Videos und Karten
    (16) Modal
    (18) Magazin CLOSE, Lesematerialien und Prospekte
    (19) Links und Akkordeone
    (20) Galerien
    (21) Meinung und Kommentare
    (23) Info-Karten und Verkaufsdetails
    (25) Formulare
    (27) Updates
    (28) Jahrbuch
    (29) Sitemap  */


@media(max-width: 850px) {

/* (4) NAVIGATION */

/* Schriftgröße und Abstand verringern sich */
nav .li_expandable a {
    padding: 0.9rem;
}

nav .li_expandable a {
    font-size: 0.95rem;
}


/* (5) BREADCRUMBS */

/* Schriftgröße verringert sich */
ul.breadcrumb li {
    font-size: 0.8rem;
}


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

/* Bild in Countdown Leiste */
.width_hellblau_cd {
    background-size: 100px 85px;
}


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

.kogge img {
    max-width: 70%;
}


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

/* Größe verringert sich */
h3 {
    font-size: 0.9rem;
}

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

.listing {
    display: flex;
    justify-content: space-between;
}


/* (9) SLIDESHOW MEHRERER BILDER */

/* Maximal 90% der Seitenbreite werden genutzt */
.slideshow_focus {
    width: 90%;
}

/* Position der Vor- und Zurück-Pfeile */
.prev, .next {
    font-size: 3.5rem;
}


/* (10) BLAUE BUTTONS */

.link_blue_reading {
    justify-content: center;
}

.link_blue_reading button {
    margin: 1rem 0.5rem 0 0;
}


/* (11) SKROLLBARE LINK-LEISTE */

/* Links rasten beim Scrollen mittig ein */
.link {
    scroll-snap-align: center;
}

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

/* Kreis für Icon bei Links verkleinert sich*/
.icon_round {
    width: 40px;
    height: 40px;
    top: -20px;
    left: 105px;
}

/* Größe Icon bei Links verkleinert sich*/
.icon_round img {
    width: 25px;
}

/* Höhe der Links reduziert sich */
.link_details,
.link_details_former_area {
    height: 220px;
}

/* Höhe der historischen Links reduziert sich */
.link_details_history {
    height: 160px;
}

/* Höhe der Themenwelten reduziert sich */
.link_details_area {
    height: 200px;
}

/* Höhe der Events und Umgestaltungen reduziert sich */
.link_details_event,
.link_details_transform,
.link_details_gastro,
.link_details_gastro_all {
    height: 230px;
}

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

.link_details_attractions {
    height: 260px;
}

/* Höhe der Überschriften reduziert sich */
.link_details h3,
.link_details_history h3,
.link_details_transform h3 {
    height: 35px;
    line-height: 1.2rem;
}

.link_details_event h3,
.link_details_former_area h3 {
    height: 30px;
    line-height: 1.2rem;
}

.link_details_event .date {
    line-height: 1.1rem;
    font-size: 0.8rem;
}

/* Platzhalter wenn keine Icons vorhanden sind entfällt */
.link .area,
.noarea {
    display: none;
}

.link_icons img,
.link_icons_left {
    height: 15px;
}


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

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


/* (14) FOKUS BILDER */

/* Generelle Anordnung der Fokus-Links */
.visual_focus_area {
    flex-flow: row wrap;
    justify-content: space-between;
}

/* Picture-Fokus nimmt halbe Seitenbreite ein */
.pic_focus {
    width: calc(50% - 0.5rem);
    margin: 1rem 0 0 0;
}

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

/* Höhe der Fokus Bilder reduziert sich */
.picture_focus {
    height: 180px;
}

.picture_large {
    width: 100%;
}

/* Text auf Fokus Bild verbreitert sich */
.picture_focus_single {
    width: 80%;
    height: 280px;
}

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

/* Text auf dem Bild wird in den angezeigten Zeilen begrenzt */
.picture_focus_single .picture_text p {
    -webkit-line-clamp: 4;
}

.picture_focus_single .picture_text {
    width: 80%;
}


/* (16) MODAL */

#modalbox {
    width: 85%;
}

.modalcontent {
    flex-flow: column;
}

.modalbox_pic {
    width: 100%;
    margin-right: 0;
}

.modalbox_pic img {
    width: 30%;
}

.modalbox_text {
    width: 100%;
}


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

/* Erhöhung der Breite der aktuellen Ausgabe */
.magazine_box {
    width: 85%;
}

.magazine_future_pic {
    min-width: 25%;
}

.magazine_prev_content {
    width: 90%;
}

.magazine_future_content {
    max-width: 75%;
}

#prev_banner {
    background-image: url(../pics/buecher_und_hefte/banner_chronik_850.jpg);
    width: 700px;
    height: 290px;
}

.reading_box {
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
}

.reading_prev_pic {
    text-align: center;
    margin-right: 0;
}

.reading_prev_pic img {
    margin: 5px;
    width: 200px;
    height: auto;
}

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

.reading_prev_content {
    width: 90%;
    text-align: center;
}

.magazine_year_cover {
    width: 120px;
}

.magazine_year img {
    width: 120px;
}

.disclaimer {
    padding: 50px 50px 0 50px;
}

}


/* (19) LINKS */

/* Links werden in einer Spalte angezeigt */
.links ul,
.links_data ul {
    flex-flow: column;
}

.links_column {
    max-width: 100%;
    padding: 0;
}

.links li {
    margin: 0 0 1rem 0;
/* Silbentrennung deaktiviert */
    hyphenate-limit-lines: 0;
    list-style-position: inside;
}

.links_data li {
    text-align: center;
    list-style: inside;
    list-style-image: url(../icons/star_list.png);
    margin-left: -25px;
    padding: 0;
}

.chronicle ul {
    justify-content: center;
    text-align: center;
    padding: 0;
}

.chronicle li {
    width: 100%;
}


/* (19) GALERIEN */

.gallery_video iframe {
    height: 98%;
}


/* (21) MEINUNG */

/* Anführungszeichen werden kleiner und wandern unter den Text */
blockquote {
    background-size: 60px;
    padding: 0 40px 30px 40px;
    margin: 1rem 1rem 0.5rem 1rem;
}


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

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

.sales label {
    font-weight: bold;
    margin: 0 10px 5px 0;
}

.sales .sales_details {
    text-align: center;
    width: 100%;
}


/* (25) FORMULARE */

/* Eingabefelder werden kleiner */
form .field input {
    width: 225px;
    max-width: 90%;
}

/* Nachrichten-Feld wird kleiner */
form textarea {
    width: 600px;
}

.form_data p {
    margin-left: 5px;
}


/* (27) UPDATES */

/* Updates ordnen sich untereinander und zentriert an */
.updates {
    flex-direction: column;
    align-items: center;
}

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

/* Abstand der News verringert sich leicht */
.upd_new p {
    margin: 0 0 1rem 0;
}

/* Galerie-Bilder dürfen umfließen */
.upd_gallery {
    flex-flow: row wrap;
    justify-content: space-between;
}

/* Größe für 2 Bilder nebeneinander */
.upd_pic {
    display: flex;
    position: relative;
    width: 48%;
    margin: 0 5px 10px 5px;
}

/* Höhe des Buttons verringert sich leicht */  
.upd_pic button {
    min-height: 40%;
}


/* (28) JAHRBUCH */

/* Jahre teilen sich auf zwei Spalten auf */
.yearbook {
    flex-direction: column;
    justify-content: center;
}


/* Darstellung einzelner Jahre */
.yearbook_year {
    width: 100%;
    padding: 0;
}

.yearbook li {
    margin-left: 0;
}


/* (29) SITEMAP */

.sitemap_category ul {
    margin: 0 1.5rem 3rem 1.5rem; 
    width: 200px;
}


/* BIS 850PX LANDSCHAFTSMODUS */

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

/* (2) HEADER */

/* Höhe des Headers verringert sich und das HaPaGuide Logo richtet sich zentral aus */
header {
    height: 250px;
    padding-left: 0;
    justify-content: center;
}

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

.videoheader {
    justify-content: center;
    height: 300px;
}

.video video {
    height: 300px;
}

.logo img {
    height: 170px;
    padding-left: 0;
    padding-bottom: 0;
}


/* (3) NEU AUF HAPAGUIDE VERLINKUNG */

a .updates_box {
    justify-content: center;   
    padding: 5px 10px 5px 10px;
    left: 35%;
    right: 35%;
    bottom: 30px;
    min-width: none;
}

a .map_box {
    display: none;
}


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

/* Bild über Video verkleinert sich leicht und reduziert den Einzug */
.video_focus .image img {
    left: -1.5rem;
    height: 125px;
}

/* Text auf dem Bild wird auf zwei Zeilen beschränkt */
.video_text p {
    display: none;
}

}


/* BIS 850PX PORTRÄTMODUS */

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

/* (2) HEADER */

/* Höhe des Headers stellt sich auf 40% des Displays ein */
header {
    height: 40svh;
    padding-left: 0;
    justify-content: center;
}

/* Größe des HaPaGuide Logos erhält Standardeinstellung - Link zur Startseite */
header img {
    height: 200px;
}

.videoheader {
    height: 60svh;
    justify-content: center;
    margin-bottom: -1px;
}

.logo {
    justify-content: center;
}

.logo img {
    height: 200px;
    padding-left: 0;
    padding-bottom: 0;
    margin-top: -100px;
}

.video video {
    height: 60svh;
}

/* (3) NEU AUF HAPAGUIDE VERLINKUNG */

a .updates_box,
a .map_box {
    justify-content: center;
    padding: 10px;
    left: 30%;
    right: 30%;
    min-width: none;
}

a .map_box {
    display: block;
}

a #top10,
a #rides,
a #coaster,
a #water {
    justify-content: center;
}


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

.video_focus {
    width: 90svw;
    height: 50svh;
}

.video_focus video {
    height: 50svh;
    object-fit: cover;
    position: relative;
}

/* Bild über Video wird ausgeblendet */
.video_focus .image img {
    display: none;
}

.video_text p {
    padding: 0 2rem 0 2rem;
}

}