/* GLIEDERUNG
    (1)  Grundeinstellungen
    (2)  Header
    (3)  Links mit Icon
    (4)  Navigation
    (5)  Breadcrumbs
    (6)  Hintergründe und Seitenbreite
    (7)  Einblendung von Seitenabschnitten und Leseumfang
    (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
    (16) Modal
    (17) Weiterlesen
    (18) Magazin CLOSE, Lesematerialien und Prospekte
    (19) Links und Akkordeone
    (20) Galerien
    (21) Meinung und Kommentare
    (22) Attraktionsdaten und Soundtracks
    (23) Info-Karten und Verkaufs-Details
    (24) Kalender
    (25) Formulare
    (26) Ticket
    (27) Updates
    (28) Jahrbuch
    (29) Sitemap
    (30) Footer
    (31) Seitenende - End
    (32) Back to Top */


/* (1) GRUNDEINSTELLUNGEN */

/* Farbverzeichnis */
:root {
    --dunkelblau: #2c4058;
    --hellblau: #ccd8e6;
    --dunkelgruen: #97caac;
    --hellgruen: #d7eae0;
    --rot: #e4512c;
    --papier: #f8f2ed;
    --dunkelgrau: #b6b6b6;
    --hellgrau: #e6e6e6;
    --weiss: #ffffff;
    --schwarz: #000000;
    --rosa: #fee1e7;
    interpolate-size: allow-keywords;
}

/* Grundeinstellungen HaPaGuide body */
body {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    margin-top: 0;
    margin: 0 auto;
    background-color: var(--hellblau);
    font-size: 0.9rem;
    line-height: 1.4;

}

/* Historische Schriftart f�r Navigation und �berschriften */
nav,
h1, h2, h3, h4, h5,
.headline_h3,
ul.breadcrumb {
    font-family: Bitter;
    letter-spacing: 1px;
}

body a {
    text-decoration: none;
}

/* Scrollbar am rechten Seitenrand */
body::-webkit-scrollbar {
    width: 1.2em;
}

body::-webkit-scrollbar-track {
    background: var(--hellblau);
    border-radius: 100vw;
}

body::-webkit-scrollbar-thumb {
    background: var(--dunkelblau);
    border-radius: 100vw;
    border: 0.25em solid var(--hellblau);
}

/* Langsamens Scrollen auf der gesamten Seite */
html {
    scroll-behavior: smooth;
}

/* Sprungmarken leicht zur�ck versetzen */
.anker,
.form-answer {
    visibility: hidden;
    heigth: 0px !important;
    position: absolute;
    margin: -2rem;
}


/* (2) HEADER */

header {
    position: relative; 
    height: 300px;
    background-color: var(--dunkelblau);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 50px;
    position: relative;
}

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

.videoheader {
    text-align: center;
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 400px;
    margin-left: -5px;
    background-image: linear-gradient(0deg,rgba(44, 64, 88, 1) 0%, rgba(44, 64, 88, 0) 30%);
}

.logo {
    position: absolute;
    text-align: center;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.logo img {
    height: 200px;
    width: auto;
    padding-left: 50px;
    padding-bottom: 100px;
    z-index: 2;
}

.video {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-position-x: center;
    margin-right: 0;
    margin-left: 0;
    width: 100%;
}

.video video {
    object-fit: cover;
    width: 100%;
    height: 400px;
    position: relative;
    z-index: -1;
}


/* (3) LINKS MIT ICON */

/* Desktop Anzeige */
a .updates_box,
a .map_box,
a .top_rides_box {
    background-color: var(--dunkelblau);
    background-repeat: no-repeat;
    background-position: left 10px center;
    background-size: 20px;
    color: var(--weiss);
    position: absolute;
    corner-shape: scoop;
    border-radius: 0.25rem;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 10px;
    right: 5%;
    min-width: 180px;
}

a .updates_box {
    background-image: url(../icons/neu.png);
    bottom: 40px;
}

.updates_box:hover {
    background-image: url(../icons/neu_hover.png);
}

a .top_rides_box {
    background-image: url(../icons/icon_top_white.png);
    bottom: 40px;
}

.top_rides_box:hover {
    background-image: url(../icons/icon_top.png);
}

a .map_box {
    background-image: url(../icons/parkplan_w.png);
    bottom: 90px;
}

.map_box:hover {
    background-image: url(../icons/parkplan.png);
}

a #top10,
a #rides,
a #coaster,
a #water {
    background-color: rgba(44, 65, 88, 0.95);
    background-repeat: no-repeat;
    background-position: left 10px center;
    background-size: 20px;
    color: var(--weiss);
    corner-shape: scoop;
    border-radius: 0.25rem;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 0.6rem 1.2rem 0.5rem 40px;
    margin: 0 0.25rem 0.5rem 0.25rem;
    min-width: 180px;
}

a #top10 {
    background-image: url(../icons/icon_top_white.png);
}

a #top10:hover {
    background-image: url(../icons/icon_top.png);
}

a #rides {
    background-image: url(../icons/karussell_w.png);
}

a #rides:hover {
    background-image: url(../icons/karussell.png);
}

a #coaster {
    background-image: url(../icons/discover_coaster_white.png);
}

a #coaster:hover {
    background-image: url(../icons/discover_coaster.png);
}

a #water {
    background-image: url(../icons/icon_nass_white.png);
}

a #water:hover {
    background-image: url(../icons/icon_nass.png);
}

.updates_box:hover,
.map_box:hover,
.top_rides_box:hover,
a #top10:hover,
a #rides:hover,
a #coaster:hover,
a #water:hover {
    background-color: var(--dunkelgruen);
    color: var(--dunkelblau);
    transition: 0.2s ease;
}

a .updates_box p,
a .map_box p,
a .top_rides_box p {
    margin: 0;
    padding-left: 30px;
}


/* (4) NAVIGATION */

.nav_width {
    width: 100%;
    background-color: var(--dunkelblau);
    border-bottom: 2px solid;
    border-color: var(--weiss);
    display: flex;
    justify-content: center;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 98;
}

nav {
    max-width: 1200px;
}

nav ul {
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    justify-content: center;
}

nav .li_expandable {
    height: 100%;
    text-align: center;
    position: relative;
    color: var(--weiss);
}

nav .li_expandable a {
    color: var(--weiss);
    text-transform: uppercase;
    padding: 0.7rem 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.1rem;
}

nav .li_expandable a:hover {
    background-color: var(--dunkelgruen);
    color: var(--dunkelblau);
    transition: 0.2s ease;
}


/* (5) BREADCRUMBS */

ul.breadcrumb {
    list-style: none;
    margin: 0;
    padding: 0.5rem 1rem 0.5rem 1rem;
    background-color: var(--hellblau);
    text-align: center;
}

ul.breadcrumb li {
    display: inline;
    font-size: 0.9rem;
}

ul.breadcrumb li a {
    color: var(--dunkelblau);
}

ul.breadcrumb li+li:before {
    font-weight: normal;
    content: '|';
    padding: 0.5rem;
}

.breadbold {
    font-weight: bold;
    color: var(--dunkelblau);
}


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

/* Maximale Breite des angezeigten Inhaltes */
.width_1200_wb {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    background-image: url(../icons/holstentor.png);
    background-repeat: no-repeat;
    background-position: center bottom -1px;
    background-size: 50px auto;
}

.width_1200_wb section {
    padding-bottom: 1rem;
}

.width_1200_wb .link_blue_list {
    padding-bottom: 2rem;
}

.width_1200 {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.width_1400 {
    max-width: 1400px;
    margin: 0 auto;
    text-align: center;
}

/* Artikel richten sich zentral aus */
article,
section {
    margin: 0 auto;
    padding: 0 1rem;
    text-align: center;
}

/* Zentraler Artikel bei Nutzung von 80% Seitenbreite */
.width_1200 article,
.width_1200_wb article {
    max-width: 80%;
    margin: 0 auto;
    text-align: center;
}

/* Hintergrundfarben */
.width_weiss {
    background-color: var(--weiss);
}

.width_papier {
    background-image: url(../icons/old_paper.jpg);
    background-repeat: repeat;
    background-color: var(--papier);
}

.width_hellblau,
.width_hellblau_cd {
    background-color: var(--hellblau);
}

.width_hellblau_cd {
    background-image: url(../pics/index/hansa-park_express.png);
    background-repeat: no-repeat;
    background-position: right 2rem bottom 1rem;
    background-size: 130px 110px;
}

.width_rosa {
    background-color: var(--rosa);
}

/* Blau ohne Rand - Video mit Verlauf */
.width_dunkelblau_vd {
    background-color: var(--dunkelblau);
}

/* Blau mit Rand - Footer */
.width_dunkelblau {
    background-color: var(--dunkelblau);
    border-top: 4px solid var(--dunkelgruen);
}

/* Seitenende - End */
.width_dunkelgruen {
    background-color: var(--dunkelgruen);
}

/* Gestaltung Werbebanner BÜcher und Hefte */
.banner_hefte {
    background-image: url(../pics/buecher_und_hefte/banner_1200_ostern.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom;
    min-height: 150px;
    padding: 1rem 15%;
    display: flex;
    flex-flow: column;
    align-items: center;
    color: var(--weiss);
}

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

.banner_hefte h2 {
    text-wrap: balance;
    margin: 1rem 0 0 0;
}

.banner_hefte p {
    padding: 0 0 1rem 0;
}


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

.fade-in {
    opacity: 0;
    transition: opacity 1000ms ease-in;
}

.fade-in.appear {
    opacity: 1;
}

/* Linie zur Anzeige des verbleibenden Leseumfangs */
.line {
    height: 5px;
    position: fixed;
    bottom: 0;
    z-index: 99;
    background-color: var(--dunkelgruen);
    width: 100%;
    scale: 0 1;
    transform-origin: left;
    animation: progress linear;
    animation-timeline: scroll();
}

.kogge img {
    max-width: 60%;
    height: auto;
}


.in_and_out {

}

@keyframes progress {
    to { scale: 1 1; }

}


/* (8) �BERSCHRIFTEN, TEXTAUSRICHTUNG, PORTR�TBILD */

h1,
h2,
h3,
h4,
h5,
.headline_h3 {
    line-height: 1.3;
    text-wrap: balance;
}

h1 {
    font-size: 1.5rem;
}

h2,
.countdown_header h2 {
    font-size: 1.3rem;
    text-wrap: balance;
}

.countdown_header h2 {
    padding: 0 1rem 0 1rem;
}

h1 a {
    color: var(--schwarz);
}

h3,
.headline_h3,
.ticket_txt h2 {
    font-size: 1.1rem;
}

h4 {
    font-size: 0.95rem;
}

ul h4 {
    margin: 0;
}

h5 {
    font-size: 1.1rem;
    margin: 1.5rem 0 0.5rem 0;
}

h6 {
    font-size: 0.95rem;
    margin-bottom: 5px;
}

.ticket_txt h3 {
    font-size: 0.85rem;
}

/* Text mittig zentrieren */
.center {
    text-align: center;
}

.bold,
.headline_h3 {
    font-weight: bold;
}

a .bold {
    color: var(--weiss);
}

.intro {
    font-size: 1.1rem;
    font-style: italic;
    color: #e4512c;
}

.img_circle img {
    width: 300px;
    height: auto;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
}

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

.listing ul {
    display: flex;
    flex-flow: wrap;
    justify-content: center;
    padding: 0;
}

.listing li {
    list-style: none;
    padding-left: 0;
    margin: 0 0.5rem 0 0.5rem;
    width: 200px;
}

.under_listing {
    padding: 0 1rem 0 1rem;
}


/* (9) SLIDESHOW MEHRERER BILDER */

/* Maximal 70% der Seitenbreite werden genutzt */
.slideshow_focus,
.picture_focus_single {
    position: relative;
    width: 70%;
    padding: 1.5rem 0 1rem 0;
    margin: 0 auto;
}

.picture_focus_single img {
    width: 100%;
    height: auto;
}

/* Bild mit grünem Streifen oben */
.mySlides img {
    width: 100%;
    height: auto;
    border-top: 4px solid var(--dunkelgruen);
}

/* Nicht aktive Bilder werden versteckt */
.mySlides {
    display: none;
}

/* Vor- und Zurück-Pfeile */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 48%;
    transform: translate(50%, -50%);
    width: auto;
    padding: 10px;
    color: var(--weiss);
    font-weight: bold;
    font-size: 4rem;
    text-shadow: 0.05em 0.05em 0.1em rgba(0, 0, 0, 0.8);
    transition: 0.2s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

/* Positionierung des rechten Zurück-Pfeils */
.next {
    right: 0;
    transform: translate(-50%, -50%);
}

.prev {
    left: 0;
}

.prev:hover,
.next:hover {
    color: var(--dunkelgruen);
}

/* Punkt-Idikatoren unter den Bildern */
.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 1rem 2px 0 2px;
    background-color: var(--dunkelblau);
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.2s ease;
}

.dot_center {
    text-align: center;
    margin: -5px 0 25px 0;
}

.active {
    width: 25px;
    border-radius: 50px;
}

.active,
.dot:hover {
    background-color: var(--dunkelgruen);
}

/* Überblendende Animation */
.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1s;
    animation-name: fade;
    animation-duration: 1s;
}

/* Stärke der Überblendung */
@keyframes fade {
    from {opacity: .2}
    to {opacity: 1}
}


/* (10) BLAUE BUTTONS */

.link_blue,
.link_blue_list,
.link_blue_letter {
    display: flex;
    flex-flow: wrap;
    align-items: center;
    justify-content: center;
}

/* Button ordnet sich mittig an */
.link_blue_left {
    display: flex;
    flex-flow: wrap;
    justify-content: center;
}

.link_blue_reading {
    display: flex;
    flex-flow: wrap;
    justify-content: flex-start;
}

/* Abstand der Buttons zu den Seitenr�ndern */
.link_blue_list,
.link_blue_letter {
    padding: 0 20px 0 20px;
}

/* Zwei Buttons bleiben als Paar zusammen */
.link_blue_list_pair {
    display: flex;
    flex-flow: nowrap;
}

/* Gestaltung der blauen Buttons */
.link_blue button,
.link_blue_list button,
.link_blue_left button,
.link_blue_reading button,
.link_blue_letter button,
.btn,
.modalcontent button,
input[type="submit"] {
    background-color: var(--dunkelblau);
    border: 2px solid var(--dunkelblau);
    color: var(--weiss);
    font-size: 1em;
    cursor: pointer;
    corner-shape: scoop;
    border-radius: 0.25rem;
    text-align: center;
    white-space: nowrap;
    min-width: 2.5rem;
    transition: 0;
}

.link_blue button,
.link_blue_list button,
.link_blue_left button,
.link_blue_reading button,
.btn,
.modalcontent button {
    padding: 0.5em 1.2em;
}

.link_blue_letter button {
    padding: 0.5rem 0.75rem;
}

.link_blue button,
.link_blue_list button,
.link_blue_letter button,
.btn {
    margin: 0 0.25em 0.5em 0.25em;
}

.link_blue_left button {
    margin: 1rem 0 0 0;
}

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

.video_text .link_blue_list {
    margin-bottom: 2rem;
}

.pic_text .link_blue_list,
.banner_hefte .link_blue_list {
    margin-bottom: 1rem;
}

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

.video_text .link_blue_list button,
.pic_text .link_blue_list button,
.vid_text .link_blue_list button,
.banner_hefte .link_blue_list button {
    background-color: rgba(44, 65, 88, 0.95);
    border: 2px solid var(--weiss);
}

/* Maus-Effekte */
.link_blue a button:hover,
.link_blue a button:focus,
.link_blue a button:active,
.link_blue_list a button:hover,
.link_blue_list a button:focus,
.link_blue_list a button:active,
.plan_icon a:hover,
.plan_icon a:focus,
.plan_icon a:active,
.discover_icon a:hover,
.discover_icon a:focus,
.discover_icon a:active,
.link_blue_left a button:hover,
.link_blue_left a button:focus,
.link_blue_left a button:active,
.link_blue_reading a button:hover,
.link_blue_reading a button:focus,
.link_blue_reading a button:active,
.link_blue_letter a button:hover,
.link_blue_letter a button:focus,
.link_blue_letter a button:active,
.modalcontent a button:hover,
.modalcontent a button:focus,
.modalcontent a button:active {
    color: var(--dunkelblau);
}

.link_blue button:hover,
.link_blue button:focus,
.link_blue button:active,
.link_blue_list button:hover,
.link_blue_list button:focus,
.link_blue_list button:active,
.plan_icon:hover,
.plan_icon:focus,
.plan_icon:active,
.discover_icon:hover,
.discover_icon:focus,
.discover_icon:active,
.link_blue_left button:hover,
.link_blue_left button:focus,
.link_blue_left button:active,
.link_blue_reading button:hover,
.link_blue_reading button:focus,
.link_blue_reading button:active,
.link_blue_letter a button:hover,
.link_blue_letter a button:focus,
.link_blue_letter a button:active,
form button:hover,
form button:focus,
form button:active,
.modalcontent a button:hover,
.modalcontent a button:focus,
.modalcontent a button:active {
    border: 2px solid var(--dunkelgruen);
    background-color: var(--dunkelgruen);
    color: var(--dunkelblau);
    transition: 0.2s ease;
}

a .top10_box,
a .coaster_box {
    background-color: rgba(44, 65, 88, 0.95);
    background-repeat: no-repeat;
    background-position: left 10px center;
    background-size: 20px;
    color: var(--weiss);
    border-radius: 0.25rem;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 10px;
    width: 200px;
}

.iconbuttons {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
}


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

/* Scrollbare, horizontale Leiste */
.link_box::-webkit-scrollbar,
.gallery_scroll::-webkit-scrollbar {
    height: 0.75rem;
    width: 100%;
}

.link_box::-webkit-scrollbar-track,
.gallery_scroll::-webkit-scrollbar-track {
    background: var(--hellblau);
    border-radius: 100vw;
}

.link_box::-webkit-scrollbar-thumb,
.gallery_scroll::-webkit-scrollbar-thumb {
    background: var(--dunkelblau);
    border-radius: 100vw;
}

.link_box::-webkit-scrollbar-thumb:hover,
.gallery_scroll::-webkit-scrollbar-thumb:hover {
    background: var(--dunkelgruen);
}

.link_box {
    display: flex;
    flex-flow: nowrap;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scroll-snap-align: center;
    max-width: 1200px;
    margin: 0 1rem 0 1rem;
}

/* Einstellung wenn alle Links ohne seitliches Scrollen angezeigt werden */
.link_all {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin: 0 auto;
    max-width: 1200px;
}

.link_all .link {
    margin: 0 0.5rem 1rem 0.5rem;
}

.link {
    width: 300px;
    margin: 0 1rem 1rem 0;
}

.link_image,
.link_image_history {
    border-bottom: 5px solid var(--dunkelblau);
    width: 300px;
}

.link_image img,
.link_image_history img {
    width: 100%;
    height: auto;
    border-top-right-radius: 7rem 20rem;
    vertical-align: bottom;
}

/* Bereich lässt Icon auf Bild zu */
.link_details_index {
    position: relative;
}

/* Kreis f�r Icon bei Links */
.icon_round {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius:50px;
    background: var(--weiss);
    position: absolute;
    top: -25px;
    left: 125px;
}

/* Gr��e Icon bei Links */
.icon_round img {
    width: 30px;
    height: auto;
}

/* Abstand unter Link Button hinzugef�gt */
.link_details_index button {
    margin-bottom: 1rem;
}

/* Textbereich */
.link_details,
.link_details_history,
.link_details_area,
.link_details_event,
.link_details_transform,
.link_details_former_area,
.link_details_gastro,
.link_details_gastro_all,
.link_details_shows,
.link_details_attractions,
.link_details_index {
    background-color: var(--weiss);
    padding: 10px 15px 20px 15px;
    text-align: center;
}

.link_details,
.link_details_attractions,
.link_details_event {
    height: 260px;
}

.link_details_history {
    height: 160px;
}

.link_details_area {
    height: 210px;
}

.link_details_transform,
.link_details_gastro,
.link_details_gastro_all {
    height: 240px;
}

.link_details_former_area {
    height: 220px;
}

.link_details_shows {
    height: 310px;
}

.link_details h3,
.link_details_history h3,
.link_details_event .date,
.link_details_transform h3,
.link h3 {
    height: 40px;
}

.link_details_former_area h3 {
    height: 35px;
}

.link_details_shows h3 {
    height: 55px;
}

/* Kategorie trennt sich von Icons */
.link_icons {
    display: flex;
    justify-content: space-between;
    background-color: var(--weiss);
    margin-top: 10px;
}

.link_icons img,
.data_icons_small img {
    width: auto;
    border: 1.5px solid var(--dunkelblau);
    border-radius: 5px;
    padding: 2px;
    margin: -1px;   
}

.data_icons_small img {
    height: 25px;
}

.link_icons img {
    height: 20px;
}

/* Dunkelblaue Schrift Verlinkung Themenwelt */
.link h3 {
    line-height: 1.4rem;
    margin-bottom: 10px;
}

.link_details_event .date {
    line-height: 1.1rem;
    margin-bottom: 10px;
}

.link a,
.link .date,
.products,
.links a,
.schedule,
.upd_new a {
    color: var(--dunkelblau);
    font-weight: bold;
}

.schedule {
    margin-top: 0;
}

/* Platzhalter in der H�he, wenn keine Icons vorhanden sind */
.noarea {
    height: 17px;
}

/* Text f�r Link mit Anzeige von 5 Zeilen */
.link p {
    font-size: 0.8rem;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Button in Link transparent mit blauem Rahmen */
.link button {
    border: 2px solid var(--dunkelblau);
    background-color: transparent;
    color: var(--dunkelblau);
    font-size: 0.8rem;
    padding: 0.4rem 1.2rem;
    cursor: pointer;
    corner-shape: scoop;
    border-radius: 0.25rem;
    text-align: center;
    min-width: 2rem;
    transition: 0;
}

.read_more_button,
.read_more_button:hover,
.read_more_button:focus,
.read_more_button:focus-visible,
.read_more_button:active {
    color: var(--schwarz)
    font-size: 1.05rem;
    cursor: pointer;
    border: 1px solid var(--schwarz);
    border-radius: 0.25rem;
    padding: 0.3rem 1.1rem;
    outline: none;
    background-color: transparent;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.6s ease;
}

.read_more_button::before {
    content: 'Weiterlesen';
    padding: 0.5rem;
}

.read_more_button::after {
    content: 'weniger anzeigen';
    padding: 0.5rem;
}

.link button a,
.link button a:hover,
.link button a:focus,
.link button a:active {
    color: var(--dunkelblau);
}

.link button:hover {
    border: 2px solid var(--dunkelgruen);
    background-color: var(--dunkelgruen);
    transition: 0.2s ease;
}


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

.plan_icons_box {
    display: flex;
    text-align: center;
    flex-flow: wrap;
    flex-direction: row;
    justify-content: center;
    margin: 0 1rem 2rem 1rem;
}

/* Einzelnes Icon */
.plan_icon {
    border: 2px solid var(--dunkelblau);
    background-color: transparent;
    color: var(--dunkelblau);
    padding: 0.4em 1.2em;
    margin: 0 0.5em 1em 0.5em;
    cursor: pointer;
    corner-shape: scoop;
    border-radius: 0.25rem;
    text-align: center;
    width: 125px;
    transition: 0;
}

.discover_icon {
    border: 2px solid var(--dunkelblau);
    background-color: transparent;
    color: var(--dunkelblau);
    padding: 0.4em 1.2em;
    margin: 0 0.5em 1em 0.5em;
    cursor: pointer;
    corner-shape: scoop;
    border-radius: 0.25rem;
    text-align: center;
    width: 140px;
    transition: 0;
}

/* Zwei Icons bleiben stets als Paar zusammen */
.plan_icon_pair {
    display: flex;
    flex-flow: nowrap;
    flex-direction: row;
}

.plan_icon a,
.discover_icon a {
    text-decoration: none;
    color: var(--schwarz);
}

/* Gr��e des Img Icons */
.plan_icon img,
.discover_icon img {
    width: 70px;
    height: auto;
}

/* Gr��e Beschrifung */
.plan_icon h3,
.discover_icon h3 {
    font-weight: bold;
    font-size: 0.9em;
    margin: 0;
}


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

.iconbox {
    display: flex;
    flex-flow: wrap;
    justify-content: center;
}

/* Anordnung einzelner Icons mit Erl�uterung */
.iconexplained,
.icondescription {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
}

.iconexplained img,
.icondescription img {
    padding: 0.5rem;
    height: 25px;
    width: auto;
}

/* Größe des Erläuterungsbereichs */
.iconexplained p,
.icondescription p {
    text-align: left;
    vertical-align: top;
}

.iconexplained p {
    font-size: 0.8rem;
    min-width: 175px;
    max-width: 175px;
    margin: 0.5rem 1.5rem 0.5rem 0;
}

.icondescription p {
    min-width: 200px;
    max-width: 400px;
    margin: 0.5rem 1.5rem 1rem 0;
}

.icondescription a {
    color: var(--dunkelblau);
    font-weight: bold;
}

.icon_swipe_locate {
    display: flex;
    justify-content: center;
}

/* Größe Swipe-Wisch Icon */
.icon_swipe img {
    width: 40px;
    height: auto;
    margin-top: 1rem;
}


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

/* maximale Breite von 90% der Seite */
.picture_focus_area {
    width: 90%;
    margin: 0 auto;
    padding: 2rem 0;
    display: flex;
}

/* Generelle Anordnung der Fokus-Links */
.visual_focus_area {
    width: 90%;
    margin: 0 auto;
    padding: 2rem 0;
    display: flex;
    flex-flow: row nowrap;
}

.vid_focus video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
}

/* Picture-Fokus nimmt 1/3 der Seitenbreite ein */
.pic_focus {
    position: relative;
    background-size: cover;
    background-position-x: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 33%;
    height: 350px;
    margin: 0 5px 0 5px;
    border-top: 4px solid var(--dunkelgruen);
}

.pic_text {
    position: absolute;
    display: flex;
    align-items: center; 
    flex-flow: column nowrap;
    width: 80%;
    padding: 1rem;
    text-shadow: 1px 1px 2px var(--schwarz);
}

.vid_text {
    position: absolute;
    display: flex;
    flex-flow: column nowrap;
    width: 100%;
    padding: 1rem;
    text-shadow: 1px 1px 2px var(--schwarz);
    background: linear-gradient(0deg, rgba(44,64,88,0.8) 12%, rgba(44,64,88,0) 75%);
    padding: 0;
}

.pic_text h2,
.vid_text h2 {
    text-wrap: balance;
    font-size: 1.2rem;
    font-weight: bold;
    line-height: 1.4rem;
    color: var(--weiss);
    min-height: 2.8rem;
}

.pic_text h3,
.vid_text h3 {
    text-wrap: balance;
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.2rem;
    color: var(--hellblau);
    margin-bottom: -0.5rem;
}

.pic_text p,
.vid_text p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.9rem;
    line-height: 1.3rem;
    color: var(--weiss);
}

.vid_text h2,
.vid_text h3,
.vid_text p {
    padding: 0 1rem 0 1rem;
}

.picture_large {
    width: 90%;
    margin: 0 auto;
    padding-bottom: 1rem;
}

/* Gestaltung einzelnes Bild bei einem Paar */
.picture_focus {
    display: flex;
    position: relative;
    align-items: center;
    width: 50%;
    height: 250px;
    margin: 0 5px 0 5px;
}

.picture_focus,
.picture_focus_single {
    background-repeat: no-repeat;
    background-size: cover;
    border-top: 4px solid var(--dunkelgruen);
}

.picture_focus_single {
    margin-top: 1rem;
    height: 375px;
}

.video_focus {
    display: flex;
    position: relative;
    align-items: center;
    width: 70%;
    height: auto;
    padding: 0;
}

/* Video-Fokus nimmt 1/3 der Seitenbreite ein */
.vid_focus {
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position-x: center;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 33%;
    height: 350px;
    margin: 0 5px 0 5px;
    border-top: 4px solid var(--dunkelgruen);
}

.video_focus video {
    width: 100%;
    object-fit: cover;
    position: relative;
}

/* Bild wird �ber Video am Rand eingeblendet */
.video_focus .image img {
    position: absolute;
    top: -0.5rem;
    right: -2rem;
    height: 150px;
    width: auto;
}

.picture_focus img,
.picture_focus_single img,
.picture_large img {
    width: 100%;
    height: auto;
}

/* Textgestaltung auf dem Bild */
.picture_text {
    position: absolute;
    top: 0;
    left: 0;
    width: 80%;
    padding: 0.5rem 1rem 1rem 2rem;
    text-align: left;
    text-shadow: 1px 1px 2px var(--schwarz);
}

/* Textgestaltung auf Video */
.video_text {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
    color: var(--weiss);
    text-shadow: 1px 1px 2px var(--schwarz);
    background: linear-gradient(0deg,rgba(44, 64, 88, 1) 0%, rgba(44, 64, 88, 0.7) 35%, rgba(44, 64, 88, 0) 75%), linear-gradient(180deg,rgba(44, 64, 88, 1) 0%, rgba(44, 64, 88, 0.4) 35%, rgba(44, 64, 88, 0) 50%);
}

.video_text img {
    width: 25px;
    height: auto;
}

.video_text h2 {
    margin: 0;
    padding: 0 2rem 2rem 2rem;
    font-size: 1.3rem;
}

.video_text h3 {
    margin: 0;
    padding: 0 2rem 0 2rem;
    font-size: 1rem;
    font-weight: normal;
    color: var(--hellblau);
}

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

.picture_focus_single .picture_text {
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    padding: 0 1rem 1rem 3rem;
    text-align: left;
    text-shadow: 1px 1px 2px var(--schwarz);
}

/* Hauptüberschrift - groß */
.picture_text h2 {
    font-size: 1.2rem;
    font-weight: bold;
    line-height: 1.4rem;
    color: var(--weiss);
}

/* Obere Überschrift - klein */
.picture_text h3 {
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.2rem;
    color: var(--hellblau);
    margin: 2rem 0 -0.5rem 0;
}

/* Text mit maximal 2 Zeilen */
.picture_text p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 1rem;
    line-height: 1.3rem;
    color: var(--weiss);
}

.picture_focus_single .picture_text p {
    display: -webkit-box;
    -webkit-line-clamp: 10;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Verlinkung auf dem Bild */
.picture_link,
.picture_link_soon {
    font-size: 0.9rem;
    font-weight: bold;
    margin-top: -0.5rem;
}

.picture_link {
    color: var(--hellgruen);
}

.picture_link_soon {
    color: var(--hellgrau);
}

.picture_link a {
    color: var(--hellblau);
    transition: 0;
}

.picture_link a:hover {
    color: var(--weiss);
    transition: 0.2s ease;
}

.map {
    width: 90%;
    height: 600px;
}


/* (15) COUNTDOWN */

/* Mittige Ausrichtung auf der Seite */
.countdown,
.countdown_hz {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 1rem 0 1rem;
}

.countdown {
    margin: 1.5rem 0 0.5rem 0;
}

.countdown_header {
    color: var(--dunkelblau);
}

.countdown_rectangle {
    display: flex;
    flex-flow: column;
}

.countdown_rectangle span {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 1rem 0.5rem 1rem;
    background-color: var(--weiss);
    corner-shape: scoop;
    border-radius: 0.25rem;
    border: 2px solid var(--dunkelblau);
    color: var(--dunkelblau);
    width: 80px;
    height: 50px;
    font-size: 1.5rem;
    font-weight: bold;
}

.countdown_rectangle p {
    margin: 0;
    margin: 0 0 1rem 0;
    font-weight: bold;
    font-size: 1rem;
    color: var(--dunkelblau);
}

/* Text darf umbrechen */
.countdown p,
.countdown_hz {
    flex-flow: wrap;
    text-wrap: balance;
}

/* Angzeigte Tage in fett-Schrift */
.countdown_hz #days {
    font-weight: bold;
    margin: 0 0.5em 0 0.5em;
}


/* (16) MODAL */

#modalbox {
    background: var(--papier);
    background-image: url(../icons/old_paper.jpg);
    box-shadow: 0px 0px 10px rgba(44, 64, 88, 0.98);
    width: 700px;
    padding: 1rem 1rem 0 1rem;
    position: fixed;
    z-index: 99;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    corner-shape: scoop;
    border-radius: 1rem;
}

.modalcontent {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
}

.modalbox_pic {
    width: 25%;
    text-align: center;
    margin-right: 1rem;
}

.modalbox_pic img {
    width: 100%;
    height: auto;
}

.modalbox_text {
    width: 75%;
    text-align: center;
}

#banner_top {
    background: linear-gradient(119deg,rgba(155, 16, 23, 1) 0%, rgba(114, 10, 12, 1) 65%, rgba(155, 16, 23, 1) 100%);
    padding: 5px 1rem 5px 1rem;
    box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.95);
}

.banner_top_content {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
}

.banner_top_content_icon img {
    height: 20px;
    width: auto;
    margin: 4px 10px 0 0;
}

.banner_top_content_text p {
    margin: 0;
    padding: 0;
    text-align: center;
    text-wrap: balance;
    font-size: 0.8rem;
    color: var(--weiss);
}

.banner_top_close {
    color: var(--weiss);
    float: right;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    margin: 0 0 0 30px;
    transition: 0.2s ease;
}

/* Geöffnetes Modal schließen X */
.modalclose {
    color: var(--schwarz);
    float: right;
    font-size: 2.5rem;
    font-weight: bold;
    z-index: 97;
    transition: 0.2s ease;
}


/* (17) WEITERLESEN */

/* Bis zum Klick ausgeblendeter Text */
#read_more {display: none;}


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

/* Breite und Gestaltung der aktuellen Ausgabe */
.magazine_box {
    margin: 0 auto;
    width: 70%;
    background-image: url(../icons/old_paper.jpg);
    background-repeat: repeat;
    background-color: var(--papier);
    border-radius: 0.5rem;
    padding: 1rem;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
}

.magazine_future_box {
    display: flex;
    flex-flow: row;
    justify-content: center;
    align-items: center;
    padding: 0 2rem 0 2rem;
}

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

.magazine_prev_pic img {
    padding: 5px;
    width: 200px;
    height: auto;
}

.magazine_future_pic {
    min-width: 20%;
}

.magazine_future img {
    height: auto;
    width: 100%;
}

.magazine_prev_content {
    width: 95%;
    text-align: center;
}

.magazine_future_content {
    max-width: 80%;
    padding-left: 2rem;
    text-align: center;
}

.prev_banner {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

#prev_banner {
    background-image: url(../pics/buecher_und_hefte/banner_chronik_1000.jpg);
    width: 800px;
    height: 330px;
}

.reading_box {
    margin: 0 auto;
    padding: 2rem;
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-start;
    justify-content: center;
}

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

.reading_prev_pic img {
    margin-right: 20px;
    width: 220px;
    height: auto;
}

.reading_prev_content {
    width: 75%;
    text-align: left;
}

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

.reading_prev_content p {
    margin-top: 1.5rem;
}

.magazine_year,
.brochures,
.tix {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;
    justify-content: center;
}

.magazine_year_cover,
.brochures figure,
.tix figure {
    margin: 0 10px 0 10px;
    text-align: center;
/* Silbentrennung erst ab 5 Zeichen und max. 1 Mal pro Magazintitel */
    -webkit-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: auto 5;
    hyphenate-limit-lines: 1;
}

.magazine_year_cover {
    width: 140px;
}

.brochures figure {
    width: 80px;
}

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

.magazine_year_cover p {
    font-weight: bold;
    font-size: 0.8rem;
    margin-top: 5px;
}

/* Abstand nach unten bei Button zur Heftbestellung Sonderausgabe */
.magazine_year_cover .link_blue {
    margin-bottom: 1rem;
}

.brochures figcaption,
.tix figcaption {
    font-weight: bold;
    font-size: 0.9rem;
}

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

.brochures figcaption {
    margin-bottom: 20px;
}

.magazine_year img {
    width: 140px;
    height: auto;
    border: 1px solid var(--dunkelblau);
}

.brochures figure img {
    width: 80px;
    height: auto;
}

.tix figure img {
    width: auto;
    height: 90px;
    margin: 5px 0 -15px 0;
}

.no_tix {
    height: 90px;
    max-width: 100px;
    background-color: var(--hellgrau);
    margin: 5px 0 -10px 0;
}

.disclaimer {
    font-size: 0.8rem;
    padding: 50px 100px 0 100px;
}


/* (19) LINKS UND AKKORDEONE */

.links,
.data {
    text-align: center;
}

/* �berschriften der Links */
.links label h2,
.expandable label h2 {
    display: block;
    color: var(--schwarz);
    font-weight: bold;
    font-size: 1.3rem;
    line-height: 1.5rem;
    margin-bottom: 1.5rem;
}

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

/* Links werden bis zum Ausklappen versteckt */
.expandable input + label + .content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease;
}

/* Links werden bei Klick angezeigt */
.expandable input:checked + label + .content {
    max-height: 1000px;
}

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

.expandable p {
    margin: 0 20px 0 20px;
}

.links ul,
.links_data ul {
    display: flex;
    justify-content: center;
}

/* Links werden in zwei Spalten angezeigt */
.links_column {
    max-width: 45%;
    padding: 0 1rem 0 1rem;
}

/* Links erhalten den Stern als Icon */
.links li,
.links_data li {
    text-align: left;
    list-style-image: url(../icons/star_list.png);
    padding-left: 5px;
    margin: 0 1rem 1rem 1rem;
/* 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;
}

.chronicle ul {
    display: flex;
    justify-content: space-between;
    flex-flow: wrap;
    text-align: left;
}

.chronicle li {
    list-style: none;
    padding-left: 0;
    margin: 0;
    width: 45%;
}

/* Textlinks fett und Dunkelblau */
article p a,
section p a,
section li a,
.upd_new a {
    color: var(--dunkelblau);
    font-weight: bold;
    font-size: 0.9rem;
}


/* (20) GALERIEN */

.gallery_box {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2rem 0;
    width: 100%;
}

/* Oberer Teil der Galerie mit zwei Bildern bzw. einem Video */
.gallery_main {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    margin: 0 auto;
    width: 100%;
}

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

.gallery_main img,
.gallery_small img,
.gallery_scroll img {
    width: 100%;
    height: auto;
    cursor: pointer;
}

.gallery_video iframe {
    width: 100%;
    height: 99%;
}

.picture_focus iframe {
    width: 100%;
    height: 100%;
}

/* Unterer Teil der Galerie mit drei Bildern in Desktop-Ansicht bzw. zwei in Mobil-Ansicht */
.gallery_small {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    width: 100%;
    margin: 0 auto;
}

.gallery_scroll {
    display: flex;
    flex-flow: row nowrap;
    overflow-x: scroll;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scroll-snap-align: center;
    width: 100%;
    margin: 0 auto;
}

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

.gallery_stable,
.gallery_stable_icon,
.gallery_desktop {
    width: 33%;
    padding: 0 5px 0 5px;
}

/* Geöffnete Bildergalerie - Hintergrund */
.galleryback {
    display: none;
    position: fixed;
    z-index: 98;
    padding: 2rem 2rem 2rem 2rem;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    max-width: 100%;
    height: auto;
    overflow: auto;
    background-color: rgba(44, 64, 88, 0.98);
}

/* Geöffnete Bildergalerie - Fotorahmen */
.gallerypic {
    position: relative;
    background-color: var(--weiss);
    box-shadow: 1px 1px 2px var(--schwarz);
    margin: auto;
    padding: 1.5rem 1.5rem 3.2rem 1.5rem;
    max-width: 750px;
}

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

/* Ge�ffnete Bildergalerie - Text unter Bild */
.gallerytext {
    width: 80%;
    float: left;
    text-align: left;
    margin: 0;
    font-size: 0.9rem;
    line-height: 1rem;
}

/* Geöffnete Bildergalerie - Schließen X */
.galleryclose {
    color: var(--schwarz);
    float: right;
    font-size: 2.5rem;
    font-weight: bold;
    z-index: 99;
    text-align: right;
    margin-top: -0.5rem;
    margin-right: 0.25rem;
    transition: 0.2s ease;
}

.galleryclose:hover, .galleryclose:focus,
.modalclose:hover, .modalclose:focus {
    color: var(--dunkelgruen);
    text-decoration: none;
    cursor: pointer;
}

/* Geöffnete Bildergalerie - Pfeile */
.previngallery,
.nextingallery {
    cursor: pointer;
    position: absolute;
    top: 42%;
    width: auto;
    color: var(--weiss);
    font-weight: bold;
    font-size: 3rem;
    transition: 0.2s ease;
    border-radius: 0 3px 3px 0;
    text-shadow: 1px 1px 2px var(--schwarz);
}

.nextingallery {
    right: 1.5rem;
    border-radius: 3px 0 0 3px;
    padding: 0.3rem 1rem 0.3rem 0.5rem;
}

.previngallery {
    left: 1.5rem;
    padding: 0.3rem 0.5rem 0.3rem 1rem;
}

.previngallery:hover, .previngallery:focus, .nextingallery:hover, .nextingallery:focus {
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--dunkelgruen);
    text-shadow: 0 0 0;
}

.myGallery {
    display: none;
}

/* Dahinterliegende Slides bleiben verdeckt */
.slideclose {
    display: none;
}


/* (21) MEINUNG */

/* Hintergrund und Anf�hrungszeichen */
blockquote {
    background-image: url("../icons/quote.png");
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 80px;
    color: var(--dunkelblau);
    text-align: center;
    padding: 0 80px;
    margin: 2rem;
}

blockquote p,
blockquote li {
    font-style: italic;
}

/* Auflistung Kommentare */
blockquote ul {
    margin-bottom: -1rem;
    padding: 0;
}

blockquote li {
    list-style: none;
    padding: 0 0 1rem 0;
}


/* (21) ATTRAKTIONSDATEN UND SOUNDTRACKS */

/* Icons mittig nebeneinander */
.data_icons {
    display: flex;
    justify-content: center;
    margin-bottom: 3rem;
}

.data_icons_category,
.link_icons_left {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--dunkelblau);
    border-radius: 5px;
    padding: 2px;
    cursor: default;
}

.data_icons_category {
    height: 25px;
    margin: 0 15px 0 0;
}

.link_icons_right {
    z-index: 1;
}

.link_icons_left {
    height: 20px;
    z-index: 1;
}

.data_icons_category p,
.link_icons_left p {
    padding: 0 5px 0 5px;
    margin: 0;
    color: var(--dunkelblau);
    font-weight: bold;
}

.data {
    padding-bottom: 2rem;
}

.data img {
    height: 40px;
    width: auto;
}

.data p {
    margin: 0 20px;
}

.data ul p {
    margin: 15px 0;
}

.data_projekt {
    margin-top: -1rem;
    margin-bottom: 2rem;
}

/* Anordnung als horizontale Liste mit Umbruch */
.data ul,
.data_projekt ul,
.title ul {
    display: flex;
    justify-content: center;
    flex-flow: row wrap;
    padding: 0;
}

/* Breite einzelner Eintr�ge */
.data li,
.data_projekt li {
    list-style: none;
    width: 200px;
    margin: 0 15px 15px 15px;
}

/* Liste der CD Titel */
.title li {
    list-style: none;
    margin: 0 20px 20px 20px;
    text-align: left;
}

.data li h4,
.data_projekt li h4 {
    margin-bottom: -10px;
}

/* Verringerung des Abstands zwischen CD Titel und Jahreszahl */
.cd_cover h2 {
    margin-bottom: -10px;
}

/* Gr��e CD Cover */
.cd_cover img {
    width: 250px;
    height: auto;
}


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

.info_cards {
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
}

.sales {
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
}

/* Gestaltung �berschriften einzelner Karten */
.info_cards label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: bold;
    background-color: var(--weiss);
    padding: 0.75rem;
    min-width: 50px;
    max-width: 300px;
    margin-right: 10px;
    border-radius: 0.25rem 0 0 0;
    border-right: 5px solid var(--dunkelblau);
}

/* Icon hinter �berschrift Karteikarte */
.info_cards label img {
    height: 25px;
    width: auto;
    margin: 0 0 0 5px;
}

/* Gestaltung �berschriften mit blauem Balken */
.sales label {
    font-weight: bold;
    padding: 0;
    min-width: 100px;
    max-width: 300px;
    border-bottom: 5px solid var(--dunkelblau);
    margin-right: 10px;
}

/* Geschlossene Punkte erhalten ein + */
.sales label::after {
    content: '+';
    font-weight: bold;
    margin-left: 0.5rem;
}

/* Ge�ffnete Punkte erhalten ein - */
.sales input:checked + label::after {
    content: '-';
    font-weight: bold;
}

/* Karten sind verdeckt */
.info_cards input[type="radio"],
.sales input[type="checkbox"] {
    display: none;
}

/* Gestaltung der offenen Karten */
.info_cards .card {
    order: 1;
    display: none;
    background-color: var(--weiss);
    padding: 1.5rem;
    border-radius: 0 0 0.25rem 0.25rem;
    text-align: left;
    min-width: 90%;
}

.sales input[type="checkbox"] + label + .sales_details {
    display: none;
    height: 0;
    visibility: hidden;
    interpolate-size: allow-keywords;
    transition: height 2s ease, visibility 2s;
}

/* Aktivierte �berschriften erhalten einen gr�nen Balken */
.sales input[type="checkbox"]:checked + label {
    border-bottom: 5px solid var(--dunkelgruen);
}

.sales .sales_details {
    order: 1;
    display: none;
    text-align: left;
    min-width: 90%;
    transition: height 1s ease;
}

.sales_details p {
    margin: 0.5rem 0 0 0;
}

/* Ausgew�hlte Karte wird angezeigt */
.info_cards input[type="radio"]:checked + label + .card,
.sales input[type="checkbox"]:checked + label + .sales_details {
    display: block;
    height: auto;
    visibility: visible;
}

/* Ausgew�hlte Karte wird angezeigt erh�lt gr�nen Streifen neben der �berschrift */
.info_cards input[type="radio"]:checked + label {
    border-right: 5px solid var(--dunkelgruen);
}

.card ul,
.sales ul {
    padding: 0;
    margin: 0;
}

.sales li {
    list-style: none;
    margin: 0;
}

.card .list li,
.card .dot_red li,
.card .dot_yellow li,
.card .dot_green li {
    list-style: none;
    padding-left: 5px;
    margin: 0 0 1rem 1rem;
}

.card .list_no li {
    list-style: none;
    margin: 0 0 0.75rem 0;
}

.card .list li {
    list-style-image: url(../icons/star_list.png);
}

.card .dot_red li {
    list-style-image: url(../icons/rest_red.png);
}

.card .dot_yellow li {
    list-style-image: url(../icons/rest_yw.png);
}

.card .dot_green li {
    list-style-image: url(../icons/rest_green.png);
}

.card p {
    margin: 0 -1rem 0 -1rem;
}

.list_no img {
    max-width: 150px;
    height: auto;
}

/* Ausblendung letzter Registerkarte */
.hiding {
    display: none;
}

.slide_comment {
    background-color: var(--weiss);
    padding: 1.5rem;
    border-radius: 0 0 0.25rem 0.25rem;
    border-top: 5px solid var(--dunkelblau);
    min-height: 200px;
}

.slide_comment ul,
.slide_comment li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.slide_comment li {
    margin-bottom: 1rem;
}


/* (24) KALENDER */

.calendar {
    display: flex;
    list-style: none;
    justify-content: center;
    align-items: flex-start;
    flex-flow: wrap;
}

.calendar_month {
    display: flex;
    list-style: none;
    justify-content: flex-start;
    flex-flow: column nowrap;
    width: 300px;
    margin: 0 0 1em 0;
}

.calendar ul {
    display: flex;
    list-style: none;
    justify-content: flex-start;
    flex-flow: wrap;
    margin: 0 0 0 -1.5rem;
}

/* Generelle Gestaltung der Kalendarkacheln */
.calendar button,
.calendar_legend button {
    font-size: 0.9rem;
    font-weight: bold;
    padding: 0.2rem 0.4rem;
    margin: 0.15rem;
    border: none;
    border-radius: 0.25rem;
    text-align: center;
    width: 2rem;
    height: 2rem;
    color: var(--schwarz);
    background-size: contain;
}

/* Abstand zwischen Kachel und Text in der Legende */
.calendar_legend button {
    margin: 0.5rem 0 0 0;
}

/* Wei�er Rahmen um Kalendarkacheln */
.calendar .cln_open,
.calendar .cln_school,
.calendar .cln_special,
.calendar .cln_hz,
.calendar .cln_karfreitag {
    border: 2px solid var(--weiss);
}

.cln_nodate {
    background-color: transparent;
}

.cln_open {
    background-color: var(--hellgruen);
}

.cln_karfreitag {
    background-color: var(--hellgruen);
    background-image: url("../icons/back_karfreitag.png");
}

.cln_school {
    background-color: var(--hellgruen);
    background-image: url("../icons/back_school.png");
}

.cln_special {
    background-color: var(--dunkelgruen);
    background-image: url("../icons/back_5.png");
}

.cln_fire {
    background-color: var(--rot);
    background-image: url("../icons/back_fire.png");
}

.cln_hz {
    background-color: var(--hellblau);
    background-image: url("../icons/back_firework.png");
}

/* Breite und Abst�nde der Texte in der Legende */
.calendar_legend p {
    width: 400px;
    font-size: 0.9rem;
    margin: 0.5rem 1.5rem 1.5rem 1.5rem;
    vertical-align: top;
}


/* (25) FORMULARE */

section form {
    text-align: center;
}

form h4 {
    margin: 0 0 0.5rem 0;
}

/* Größe und Optik der Formularfelder */
form .options,
form .options_nbr,
form .field input,
form textarea {
    background-color: var(--weiss);
    border: 1px solid var(--schwarz);
    border-radius: 0.25rem;
    padding: 0.1rem 0.5rem;
    font-size: 0.9rem;
}

/* Dropdown-Felder */
form .options {
    min-width: 50%;
    max-width: 90%;
    height: 3rem;
}

form .options_nbr {
    width: 150px;
    height: 3rem;
    margin-bottom: 1.5rem;
}

form select {
    color: var(--schwarz);
    accent-color: var(--schwarz);
}

/* Eingabefelder */
form .field input {
    height: 2.5rem;
    margin-bottom: 0.5rem;
    width: 300px;
    max-width: 90%;
}

/* Nachrichten-Feld */
form textarea {
    width: 700px;
    height: 100px;
    margin: 1rem 0 1.5rem 0;
    padding: 1rem;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 0.9rem;
}

.sammelkarten,
.auswahl,
.auswahl_box {
    display: flex;
    justify-content: center;
    align-items: center;
}

.auswahl_box {
    flex-direction: row;
    flex-flow: wrap;
}

.auswahl {
    flex-direction: column;
    margin: 0 0.5rem 0 0.5rem;
}

.sammelkarten img {
    height: 100px;
    width: auto;
    margin: 0.25rem 0.5rem 1rem 0.5rem;
}

.auswahl img {
    height: 100px;
    width: auto;
    margin: 0.25rem 0 0.5rem 0;
}

.auswahl figcaption {
    font-size: 0.8rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.form_data {
    display: flex;
    flex-flow: row;
    align-items: flex-start;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.form_data p {
    margin: 0;
    margin-left: 10px;
}

.form_data input {
    accent-color: var(--dunkelgruen);
}

.data_continue {
    margin: -1.5rem 0 2rem 0;
}

.form-answer,
.antwort {
    color: var(--dunkelgruen);
    font-weight: bold;
}


/* (26) TICKET */

/* Aufreihung der Tickets mit Umbruch */
.tickets {
    display: flex;
    flex-direction: row;
    flex-flow: wrap;
    align-items: center;
    justify-content: center;
}

/* Gr��e und Verhalten einzelner Tickets */
.ticket {
    display: flex;
    flex-direction: row nowrap;
    width: 440px;
    height: 260px;
    margin: 0 10px 20px 10px;
}

/* Bild als Hintergrund */
.ticket_img {
    width: 40%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* Gr��e und gestrichelte Linie */
.ticket_txt {
    width: 60%;
    background-color: var(--hellblau);
    border-left: 3px dashed var(--weiss);
}

.ticket_txt .age {
    font-size: 0.85rem;
    margin: 0;
}

.ticket_txt .prize {
    font-size: 0.95rem;
    font-weight: bold;
    margin: 0 0 5px 0;
}


/* (27) UPDATES */

.updates {
    display: flex;
    flex-direction: row;
    flex-flow: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
}

.upd_new {
    display: flex;
    flex-direction: column;
    flex-flow: wrap;
    justify-content: flex-start;
    width: 43%;
    padding: 0 1.5rem 0 1.5rem;
}

.upd_new h3 {
    margin: 0;
}

.upd_new p {
    margin: 0 0 2rem 0;
}

/* Datum der eizelnen News */
.date_stamp {
    font-size: 0.8rem;
    color: var(--schwarz);
    font-weight: bold;
    padding: 0;
    margin: 0;
    width: 100%;
}

/* Galerie mit Bildern nebeneinander */
.upd_gallery {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    width: 100%;
}

/* Gr��e einzelner Bilder */
.upd_pic {
    display: flex;
    position: relative;
    width: 25%;
    margin: 0 5px 0 5px;
}

.upd_pic img {
    width: 100%;
    height: auto;
}

/* Button auf Galerie-Bildern */
.upd_pic button {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: flex-start;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    min-height: 50%;
    padding: 0.5rem 0.2rem 0.5rem 0.2rem;
    color: var(--weiss);
    font-size: 1rem;
    font-weight: bold;
    background-color: transparent;
    cursor: pointer;
    text-shadow: 1px 1px 2px var(--schwarz);
    border: 3px solid var(--weiss);
    corner-shape: scoop;
    border-radius: 0.25rem;
}

.upd_pic button:hover {
    color: var(--dunkelgruen);
    border: 3px solid var(--dunkelgruen);
    transition: 0.2s ease;
}

.upd_pic_date {
    font-size: 0.8rem;
    margin-bottom: -10px;
}


/* (28) JAHRBUCH */

/* Jahre teilen sich auf zwei Spalten auf */
.yearbook {
    display: flex;
    flex-direction: row;
    flex-flow: wrap;
    justify-content: space-between;
}

.yearbook_year input {
    display: none;
}

.yearbook_year label {
    display: block;
    font-weight: bold;
    margin: 0;
    cursor: pointer;
}

.yearbook_year label h2::before {
    content: '+';
    font-weight: bold;
    margin-right: 0.5rem;
}

.yearbook_year input + label + .content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease;
}

.yearbook_year input:checked + label + .content {
    max-height: 1000px;
}

.yearbook_year input:unchecked + label + .content {
    max-height: 0;
}

.yearbook_year input:checked + label h2::before {
    content: '-';
    font-weight: bold;
}

/* Darstellung einzelner Jahre */
.yearbook_year {
    display: flex;
    flex-direction: column;
    width: 47%;
    padding: 0 10px 0 10px;
}

.yearbook ul {
    padding: 0;
    margin-top: -10px;
    text-align: center;
}

.yearbook li {
    list-style: inside;
    list-style-image: url(../icons/star_list.png);
    padding: 1px 0 0 5px;
    margin-left: 25px;
}


/* (28) SITEMAP */

/* Anordnung und Design der Sitemap */
.sitemapbox {
    display: flex;
    justify-content: center;
    flex-flow: row wrap;
}

.sitemapbox a {
    color: var(--schwarz);
}

.sitemap_category {
    display: flex;
    justify-content: center;
    flex-flow: row wrap;
    margin-top: -1rem;
}

.sitemap_category ul {
    list-style: none;
    list-style-position: none;
    padding: 0;
    margin: 0 1rem 3rem 1rem;
    width: 300px;
}

.sitemapbox li {
    line-height: 1.2;
    padding: 0.25rem;
}

.grey {
    color: var(--dunkelgrau);
}


/* (30) FOOTER */

.footer {
    text-align: left;
}

/* Trennung von Logo und Text bei Desktop-Ansicht */
.footer_main {
    display: flex;
    justify-content: space-between;
    padding: 20px 20px 0 20px;
}

/* Wei�er Text auf Footer */
.footer_text,
.footer_green_disclaimer {
    color: var(--weiss);
}

/* Gr�ne �berschriften auf Footer */
.footer_text h3 {
    color: var(--dunkelgruen);
    text-wrap: balance;
}

/* Gr��e des HaPaGuide Logos */
.footer_logo img {
    height: 125px;
    width: auto;
    padding: 10px 0 10px 60px;
}

/* Umwelthinweis */
.footer_green {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 20px 30px 20px;
    margin-top: -10px;
}

/* Umwelthinweis Icon Blatt */
.footer_green_sign img {
    height: auto;
    width: 35px;
    margin: 0 0 0 10px;
}

/* Linkbereich im Footer */
.footer_links {
    display: flex;
    justify-content: flex-start;
    padding: 0 20px 30px 20px;
}

/* Ausblendung der Checkbox */
.footer_links input,
.links input,
.expandable input {
    display: none;
}

/* �berschriften der Links im Footer */
.footer_links label {
    display: block;
    color: var(--weiss);
    font-weight: bold;
    margin: 0 80px 0 0;
}

/* Keine Dekoration der Liste */
.footer_links li {
    list-style: none;
    color: var(--weiss);
}

.footer_links li a {
    color: var(--weiss);
}

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

/* Abstand der Links zur �berschrift im Footer */
.footer_links ul {
    margin: 10px 0 0 0;
    padding: 0;
}


/* (31) SEITENENDE - END */

/* Zentrierte Anordnung */
.end {
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 10px;
    color: var(--schwarz);
    text-align: center;
    font-weight: bold;
}

.end p {
    display: flex;
    align-items: center;
    margin: 0;
}

.end img {
    height: 20px;
    width: auto;
    margin: -1px 5px 0 50px;
}


/* (32) BACK TO TOP */

/* Gestaltung des Buttons */
#backtotop {
    display: none;
    text-align: center;
    background-color: var(--dunkelblau);
    opacity: .95;
    position: fixed;
    border-radius: 0.25em;
    width: 40px;
    height: 40px;
    bottom: 40px;
    right: 40px;
}

/* Pfeil Icon auf Button */
#backtotop img {
    width: 20px;
    height: auto;
    padding: 0.6em;
}