/* GLIEDERUNG
    (6)  Hintergründe und Seitenbreite       
    (7)  Einblendung von Seitenabschnitten und Leseumfang
    (8)  Überschriften, Textausrichtung, Porträtbild
    (9)  Slideshow mehrerer Bilder
    (10) Blaue Buttons
    (13) Kleine Icons mit Erläuterung
    (14) Fokus Bilder, Videos und Karten
    (18) Magazin CLOSE, Lesematerialien und Prospekte
    (20) Galerien
    (21) Meinung und Kommentare
    (23) Info-Karten und Verkaufs-Details
    (25) Formulare
    (27) Updates
    (30) Footer
    (31) Seitenende - End
    (32) Back to Top */


@media(max-width: 750px) {

/* (3) NEU AUF HAPAGUIDE VERLINKUNG */

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

/* Werbebanner Bücher und Hefte Bildtausch und Minimum-Height */

.banner_hefte {
    background-image: url(../pics/buecher_und_hefte/banner_750_ostern.png);
    min-height: 300px;
    padding: 1rem 15%;
}

.banner_hefte h2,
.banner_hefte p {
    max-width: 90%;
}


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

/* Bild in Countdown Leiste */
.width_hellblau_cd {
    background-image: none;
}


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

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


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


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

.listing li {
    min-width: 47%;
}


/* (9) SLIDESHOW MEHRERER BILDER */

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


/* (10) BLAUE BUTTONS */

/* Zusammenhänge Buttons dürfen sich trennen */
.link_blue_list_pair {
    flex-flow: wrap;
    justify-content: center;
}


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

/* Abstand nach unten entfällt wegen Swipe-Icon */
.link_box {
    margin: 0 1rem 0 1rem;
}


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

/* Größe des Erläuterungsbereichs */
.iconexplained p {
    margin: 0.5rem 0 0.5rem 0;
    min-width: 325px;
    max-width: 325px;
}


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

/* maximale Breite von 80% der Seite und Anordnung untereinander */
.picture_focus_area {
    flex-direction: column;
    width: 80%;
}

/* 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 100% der Seitenbreite ein */
.vid_focus {
    width: 100%;
    margin: 0;
}

.pic_text p {
    display: none;
}

.pic_text .link_blue_list {
    margin-bottom: 0;
}

.vid_text .link_blue_list {
    margin-bottom: 1rem;
}

/* Höhe der Fokus Bilder erweitert sich leicht */
.picture_focus {
    width: 100%;
    height: 240px;
    margin: 0 0 10px 0;
}

.picture_focus_single {
    width: 80%;
    height: 220px;
    margin-bottom: -20px;
}

/* Obere Überschrift - klein */
.picture_text h3 {
    margin: 1rem 0 -0.5rem 0;
}

/* Text auf dem Bild bei Standard 80% Breite */
.picture_text {
    width: 80%;
}

.picture_focus_single .picture_text {
    padding: 0.5rem 1rem 1rem 2rem;
}

/* Text auf dem Bild wird auf zwei Zeilen beschränkt */
.picture_text p,
.picture_focus_single .picture_text p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

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


/* (15) COUNTDOWN */

.countdown_rectangle span {
    margin: 0 0.75rem 0.5rem 0.75rem;
    border: 2px solid var(--dunkelblau);
    width: 60px;
    height: 40px;
    font-size: 1.25rem;
}

.countdown_rectangle p {
    margin: 0 0 3rem 0;
    font-size: 0.9rem;
}


/* (18) MAGAZIN CLOSE */

.magazine_future_box {
    padding: 1rem;
}

.magazine_prev_pic img {
    width: 180px;
}

.magazine_future_pic {
    width: 0;
    display: none;
}

.magazine_future img {
    display: none;
}

.magazine_future_content {
    max-width: 100;
    padding-left: 0;
}

.magazine_year_cover {
    width: 170px;
}

.magazine_year img {
    width: 170px;
}

#prev_banner {
    background-image: url(../pics/buecher_und_hefte/banner_chronik_750.jpg);
    width: 400px;
    height: 165px;
}


/* (20) GALERIEN */

/* Oberer Teil der Galerie mit zwei Bildern bzw. einem Video ordnet sich untereinander */
.gallery_main,
.gallery_small,
.gallery_scroll {
    width: 90%;
}

.gallery_main {
    flex-flow: column;
}

/* Einzelnes Element im oberen Teil der Galerie nutzt volle Breite */
.gallery_main_single,
.gallery_video {
    width: 100%;
    padding: 0 0 5px 0;
}

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

/* Drittes Galerie-Bild des unteren Teils wird ausgeblendet */
.gallery_desktop {
    display: none;
}

.gallery_stable {
    width: 49%;
    padding: 0;
}

.gallery_scroll_unit {
    min-width: 40%;
    padding: 0 5px 0 0;
}

/* Geöffnete Bildergalerie - Hintergrund */
.galleryback {
    padding: 2rem 0 2rem 0;
}

/* Geöffnete Bildergalerie - Fotorahmen */
.gallerypic {
    box-shadow: 1px 1px 0 var(--schwarz);
    margin: auto;
    padding: 0.5rem 0.5rem 3rem 0.5rem;
    max-width: 750px;
}

/* Geöffnete Bildergalerie - Text unter Bild */
.gallerytext {
    font-size: 0.8rem;
    margin-top: 0.5rem;
}

/* Geöffnete Bildergalerie - Schließen X */
.galleryclose {
    font-size: 2rem;
    margin-top: -0.4rem;
    margin-right: 0.25rem;
}

/* Geöffnete Bildergalerie - Pfeile */
.previngallery,
.nextingallery {
    top: 38%;
}

.nextingallery {
    right: 0.5rem;
    padding: 0.2rem 1rem 0.2rem 0.5rem;
}

.previngallery {
    left: 0.5rem;
    padding: 0.2rem 0.5rem 0.2rem 1rem;
}


/* (21) MEINUNG */

/* Anführungszeichen werden erneut kleiner */
blockquote {
    background-size: 50px;
    padding: 0 1rem 20px 1rem;
}


/* (21) ATTRAKTIONSDATEN UND SOUNDTRACKS */

.data_icons_small img,
.data_icons_category {
    height: 20px;
}

/* CD Titel erhalten eine gesetzte Breite */
.title li {
    width: 250px;
}

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


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

/* Karten ordnen sich untereinander an */
.info_cards {
    flex-flow: column;
    flex-wrap: nowrap;
    align-items: flex-start;
}

/* Gestaltung Überschriften einzelner Karten */
.info_cards label {
    padding: 0.5rem 1rem 0.5rem 1rem;
    width: 85%;
    margin-right: 0;
    border-radius: 0;
    text-align: left;
}

/* Breite der offenen Karten passt sich an */
.info_cards .card {
    min-width: 70%;
}

/* Einblendung zusätzlicher Registerkarten */
.hiding {
    display: block;
    width: 100%;
}

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


/* (25) FORMULARE */

/* Eingabefelder werden kleiner */
form .field input {
    min-width: 200px;
}

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


/* (27) UPDATES */

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

/* Galerie-Bilder ordnen sich untereinander an */
.upd_gallery {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* Breite der Galerie-Bilder auf 70% beschränkt */
.upd_pic {
    width: 70%;
    margin: 0 0 10px 0;
}

/* Button auf Galerie-Bildern wird mittig zentriert ausgerichtet */
.upd_pic button {
    justify-content: center;
}


/* (30) FOOTER */

/* Links und Logo im Footer ordnen sich untereinander an */
.footer_main {
    flex-direction: column;
    flex-flow: column-reverse;
    justify-content: flex-start;
    align-items: center;
}

.footer_text p,
.footer_green_disclaimer p {
    padding: 0 20px 0 20px;
    text-align: center;
    font-size: 0.9em;
}

.footer_text h3 {
    color: var(--dunkelgruen);
    text-align: center;
    font-size: 1.1em;
}

/* Größe des HaPaGuide Logos verringert sich */
.footer_logo img {
    height: 100px;
    padding: 20px 10px 0 10px;
}

/* Erläuterung und Icon ordnen sich untereinander an */
.footer_green {
    flex-flow: column-reverse;
    justify-content: center;
    margin-top: 0;
}

/* Abstände zwischen Icon und Text werden angepasst */
.footer_green_sign img {
    margin: 5px 0 -10px 0;
}

/* Links im Footer ordnen sich untereinander */
.footer_links {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 20px 40px 20px;
}

/* Ausklappbare Überschriften im Footer werden anklickbar */
.footer_links label {
    margin: 0;
    cursor: pointer;
}

.footer_links label:hover,
.footer_links label:active,
.footer_links label:focus {
    color: var(--dunkelgruen);
    transition: 0.2s ease;
}

/* Ein "+" zeigt an, dass Links ausklappbar sind */
.footer_links label::after {
    content: '+';
    font-weight: bold;
    margin-left: 1em;
}

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

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

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

.footer_links .content li {
    margin-bottom: 10px;
}

/* Abstand zwischen den Link-Kategorien wird erhöht */
.footer_links_hansa-park {
    margin-top: 20px;
}


/* (31) SEITENENDE - END */

/* Anordnung untereinander */
.end {
    display: flex;
    flex-flow: column;
    align-items: center;
    font-size: 0.9em;
    padding: 10px;
}

.end p {
    margin-top: 5px;
}

/* Abstände zum kleinen Herz werden angepasst */
.end img {
    margin: -1px 5px 0 0;
}


/* (32) BACK TO TOP */

/* Button verkleinert sich */
#backtotop {
    width: 30px;
    height: 30px;
    bottom: 20px;
    right: 20px;
}

#backtotop img {
    width: 15px;
    height: auto;
    padding: 0.5em;
}

}