:root,
:host {
    color-scheme: light dark;
    --td-past-page: #fff;
    --tl-past-page: #000;
    --td-future-page: #a0a0a0;
    --tl-future-page: #808080;
    --overview-border-thickness: 5px;
    --vert-nav-border-thickness: 2px;
    --horiz-nav-border-thickness: 2px;
    --edit-border-thickness: 2px;
    --max-height-bottom-overview: 20em;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    line-height: 1.5;
    box-sizing: border-box;
    color: light-dark(black, white);
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

#id_root.c_submission_success {
    height: 80vh;
    font-size: 4em;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    text-align: center;
}

#id_root:not(.c_submission_success) {
    display: grid;
    grid-template-areas: "hnav" "form";
    grid-template-columns: 1fr;
    justify-items: center;
    max-width: 80em;
    margin: 0 auto;
    gap: 1em;
    padding-bottom: 2em;
}

.c_next_prev_footer {
    display: flex;
    justify-content: center;
    gap: 1em;
    padding: 1em;
}

.c_icon {
    stroke: currentColor;
    fill: currentColor;
}

.c_banner {
    aspect-ratio: 2 / 1;
    object-fit: cover;
    width: calc(100% + 2px);
    margin-top: -1px;
    margin-left: -1px;
    border-top-left-radius: calc(var(--card-border-radius, 0) * 1rem);
    border-top-right-radius: calc(var(--card-border-radius, 0) * 1rem);
}

h1,
h2,
h3 {
    overflow: hidden;
    text-overflow: ellipsis ellipsis;
}

h1 {
    text-align: center;
    font-size: 3em;
    font-weight: 500;
    color: light-dark(var(--tl-page-title-text, black), var(--td-page-title-text, white));
    margin: 0.25em 0.25em 0.5em 0.25em;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

li {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
        "icon label value"
        ".    info  info";
    align-items: start;
    column-gap: 0.5em;
    margin: 0.3em 0 0.3em 0;
}

li .c_icon {
    grid-area: icon;
    align-self: anchor-center;
    width: 1.2em;
    height: 1.2em;
}

li .c_label {
    grid-area: label;
}

li .c_value {
    grid-area: value;
    font-weight: bold;
}

li .c_info {
    grid-area: info;
}

/* bei den Tarifen auf der 1. Seite sind die Werte linksbuendig */
.c_tarif li {
    grid-template-columns: auto auto 1fr;
}

/* bei den Tarifen auf der 1. Seite sind die Werte nicht fett */
.c_tarif li .c_value {
    font-weight: normal;
}

.c_icon:has(use[href$="_0"]) {
    display: none;
}

.c_card>.c_icon {
    width: 3em;
    height: 3em;
    margin: 1em 0 0 1em;
}

.c_card_container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
    grid-auto-rows: 1fr;
    grid-gap: 2em;
}

.c_sign_container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(25em, 1fr));
    grid-gap: 2em;
    margin-bottom: 3em;
}

.c_sign_container canvas {
    border: 1px solid gray;
    height: 12em;
    width: 100%;
    background-color: snow;
}

.c_sign_footer {
    display: flex;
}

.c_sign_footer label {
    flex: 1;
    text-align: center;
}

#page_1 .c_card_container {
    grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
}

.c_page {
    /* Nicht verwenden, sonst geht counter nicht (https://css-tip.com/counter-gotcha/) */
    /* container-type: inline-size; */
    container-name: page_container;
}

@container page_container (width > 50em) {
    #page_1 .c_card_container.c_four_cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

.c_card, /* weil anklickbar und sich dadurch Hintergrundfarbe ändert */
.c_input_container input, /* weil fokussierbar und sich dadurch die Hintergrundfarbe ändert */
button, /* wegen hover */
.c_radio_select label /* wegen hover */ {
    transition-property: all;
    transition-timing-function: cubic-bezier(.4, 0, .2,1);
    transition-duration: .2s;
}

.c_card {
    display: flex;
    flex-direction: column;
    border: 1px solid light-dark(var(--tl-card-border, black), var(--td-card-border, white));
    border-radius: calc(var(--card-border-radius, 0) * 1rem);
}

.c_card nav {
    display: flex;
    flex-direction: row;
}

.c_card nav * {
    flex: 1;
    padding-top: 0.25em;
    padding-bottom: 0.25em;
    padding-left: 0.5em;
    padding-right: 0.5em;
    font-size: 1.3em;
    overflow: hidden;
    text-align: center;
}

.c_card nav span {
    color: light-dark(var(--tl-card-title-text, black), var(--td-card-title-text, white));
    font-weight: bold;
}

.c_card nav label {
    background-color: light-dark(var(--tl-tab-inactive-bg, gray), var(--td-tab-inactive-bg, gray));
    color: light-dark(var(--tl-tab-inactive-text, white), var(--td-tab-inactive-text, white));
}

.c_card nav label+label {
    border-left: 1px solid white;
}

.c_card nav :first-child {
    border-top-left-radius: calc(var(--card-border-radius, 0) * 1rem);
    padding-left: calc(var(--card-border-radius, 0) * 0.5em + 0.5em);
}

.c_card nav :last-child {
    border-top-right-radius: calc(var(--card-border-radius, 0) * 1rem);
    padding-right: calc(var(--card-border-radius, 0) * 0.5em + 0.5em);
}

.c_card_data {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1em;
    overflow-x: clip;
    padding: 1em;
    justify-content: space-between;
}

.c_card_data footer {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.c_card_data h2 {
    font-weight: normal;
    margin: 0;
    font-size: 1.5em;
    color: light-dark(var(--tl-card-title-text, black), var(--td-card-title-text, white));
}

.c_tarif {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 2em;
}

.c_tarif .c_card {
    flex: 1;
    align-self: stretch;
}

.c_tarif:not(:has(input[name="selected_tarif"]:checked)) > button {
    visibility: hidden;
}

#id_root:not([data-suggest-tarif='true']) .c_tarif > button,
#id_root[data-suggest-tarif='true'] .c_tarif footer > button {
    display: none;
}

.c_tarif h2 {
    font-weight: bold;
    font-size: 2em;
}

.c_above_title {
    font-weight: bold;
}

.c_description {
    font-style: italic;
    margin: 0.5em 0 0 0;
}

.c_description:empty {
    display: none;
}

.c_payment {
    font-size: 2em;
    color: light-dark(var(--tl-payment-text, black), var(--td-payment-text, white));
    font-weight: bold;
}

.c_payment_info {
    font-size: 0.9em;
    text-align: center;
}

.c_payment_info:empty {
    display: none;
}

.c_payment_info:before {
    content: "*";
}

.c_payment_rhytm {
    word-break: keep-all;
}

.c_zubuchung {
    display: flex;
}

.c_zubuchung .c_card {
    flex: 1;
}

#id_root[data-suggest-tarif='true'] .c_tarif.c_selectable_card:has(input[name="selected_tarif"]:checked)>.c_card,
.c_zubuchung.c_selectable_card input:checked+.c_card {
     background-color: light-dark(var(--tl-card-checked-bg, #e0e0e0), var(--td-card-checked-bg, #505050));
     border-color: light-dark(var(--tl-card-checked-border, black), var(--td-card-checked-border, white));
}

.c_summary_container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3em;
}

.c_summary_container footer {
    text-align: center;
}

.c_summary_container footer button {
    display: block;
    margin: 1em auto 1em auto;
}

.c_button_bar {
    display: flex;
    gap: 1em;
    flex-flow: row wrap;
}

.c_button_bar a {
    text-decoration : none;
}

.c_button_bar a:hover,
button:hover {
    border: 1px solid light-dark(var(--tl-btn-primary-hover-border, black), var(--td-btn-primary-hover-border, white));
    background-color: light-dark(var(--tl-btn-primary-hover-bg, #e0e0e0), var(--td-btn-primary-hover-bg, #e0e0e0));
    color: light-dark(var(--tl-btn-primary-hover-text, black), var(--td-btn-primary-hover-text, black));
}

.c_button_bar a,
button {
    font-size: 100%;
    border: 1px solid light-dark(var(--tl-btn-primary-border, white), var(--td-btn-primary-border, black));
    background-color: light-dark(var(--tl-btn-primary-bg, black), var(--td-btn-primary-bg, white));
    color: light-dark(var(--tl-btn-primary-text, white), var(--td-btn-primary-text, black));
    border-radius: calc(var(--btn-border-radius, 0) * 1rem);
    padding: 1em 3em;
}

button.c_btn_small {
    padding: 0.5em 1em;
}

button[disabled=disabled],
button:disabled {
    opacity: 20%;
}

.c_button_bar a.c_btn_light,
button.c_btn_light {
    border: 1px solid light-dark(var(--tl-btn-light-border, black), var(--td-btn-light-border, white));
    background-color: light-dark(var(--tl-btn-light-bg, white), var(--td-btn-light-bg, black));
    color: light-dark(var(--tl-btn-light-text, black), var(--td-btn-light-text, white));
}

.c_button_bar a.c_btn_light:hover,
button.c_btn_light:hover {
    border: 1px solid light-dark(var(--tl-btn-light-hover-border, black), var(--td-btn-light-hover-border, white));
    background-color: light-dark(var(--tl-btn-light-hover-bg, #e0e0e0), var(--td-btn-light-hover-bg, #e0e0e0));
    color: light-dark(var(--tl-btn-light-hover-text, black), var(--td-btn-light-hover-text, black));
}

#navi {
    counter-reset: horizontal-page-num;
    grid-area: hnav;
    display: inline-flex;
    border-bottom: 1px solid light-dark(var(--tl-current-page, black), var(--td-current-page, white));
    gap: 1em;
}

input[name="selected_page_horizontal"]+label {
    padding: 0.5em;
    color: light-dark(var(--tl-past-page, black), var(--td-past-page, white));
}

input[name="selected_page_horizontal"]:checked+label {
    color: light-dark(var(--tl-current-page, black), var(--td-current-page, white));
    border-bottom: var(--horiz-nav-border-thickness) solid light-dark(var(--tl-current-page, black), var(--td-current-page, white));
}

input[name="selected_page_vertical"]:checked+label>.c_nav_vert_text {
    color: light-dark(var(--tl-current-page, black), var(--td-current-page, white));
}

.c_nav_vert_num {
    border-radius: 50%;
    background-color: light-dark(var(--tl-past-page, black), var(--td-past-page, white));
    color: light-dark(white, black);
    width: 2rem;
    height: 2rem;
    font-size: 1.3rem;
    display: inline-flex;
    align-items: center;  
    justify-content: center;
    margin-right: 1rem;
}

input[name="selected_page_vertical"]:checked+label>.c_nav_vert_num {
    background-color: light-dark(var(--tl-current-page, black), var(--td-current-page, white));
}

input[name="selected_page_horizontal"]:checked+label~label,
.c_page:has(input[name="selected_page_vertical"]:checked)~.c_page > input[name="selected_page_vertical"]+label {
    pointer-events: none;
    color: light-dark(var(--tl-future-page, gray), var(--td-future-page, gray));
}

.c_page:has(input[name="selected_page_vertical"]:checked)~.c_page > input[name="selected_page_vertical"]+label>.c_nav_vert_num {
    background-color: light-dark(var(--tl-future-page, gray), var(--td-future-page, gray));
}

@media (max-width: 600px) {
    #navi label {
        font-size: 0.7em;
    }
}

@media (max-width: 1000px) {
    input[name="selected_page_horizontal"]:not(:checked)+label span {
        display: none;
    }

    #navi label::before {
        counter-increment: horizontal-page-num;
    }

    input[name="selected_page_horizontal"]:not(:checked)+label::before {
        content: counter(horizontal-page-num)".";
    }

    input[name="selected_page_horizontal"]:checked+label::before {
        content: counter(horizontal-page-num)". ";
    }
}

.c_page_content {
    padding-bottom: 2em;
}

input {
    outline: none;
}

.c_selected_tarif_compact {
    overflow-x: hidden;
}

#ov_form {
    width: 100%;
    grid-area: form;
    padding: 0 2em 0 2em;
    counter-reset: vertical-page-num;
}

@media (orientation: landscape) {
    #id_root[data-vertical-navigation='true'] {

        #navi,
        .c_page > h1 {
            display: none;
        }

        #ov_form {
            padding-top: 3rem;
        }

        .c_page > label {
            position: relative;
            top: -1.5rem;
            left: -1rem;
            margin: 0;
            padding: 0;
            display: flex;
            align-items: center;
            color: light-dark(var(--tl-past-page, black), var(--td-past-page, white));
        }

        .c_page_content {
            position: relative;
            top: -1rem;
            left: 1rem;
        }

        .c_page {
            /* Alle bis auf die letzte Seite werden wegen border-left etwas nach rechts gerueckt.
               Der unsichtbare Rand sorgt dafuer, dass auch die letzte Seite ordentlich aussieht.
            */
            border-left: var(--vert-nav-border-thickness) solid transparent;
        }

        .c_page:has(~ .c_page):not(:has(input[name="selected_page_vertical"]:checked)) {
            border-left: var(--vert-nav-border-thickness) solid light-dark(var(--tl-past-page, black), var(--td-past-page, white));
        }

        .c_page:has(~ .c_page):has(input[name="selected_page_vertical"]:checked) {
            border-left: var(--vert-nav-border-thickness) solid light-dark(var(--tl-current-page, black), var(--td-current-page, white));
        }

        .c_page:has(input[name="selected_page_vertical"]:checked)~.c_page:has(~ .c_page) {
            border-left: var(--vert-nav-border-thickness) solid light-dark(var(--tl-future-page, black), var(--td-future-page, white));
        }

        .c_nav_vert_text {
            font-size: 2rem;
        }

        .c_nav_vert_num::before {
            counter-increment: vertical-page-num;
            content: counter(vertical-page-num);
        }

        &[data-show-selected-tarif='true']:not(:has(input[name^="selected_page_"][value="1"]:checked)):not(:has(input[name^="selected_page_"]:checked.c_hide_overview)),
        &[data-show-selected-tarif='true'][data-suggest-tarif='true']:has(input[name^="selected_page_"][value="1"]:checked) {
            grid-template-areas: "form overview";
            grid-template-columns: 1fr 1fr;
        }
    }

    #id_root:not([data-vertical-navigation='true']) {
        .c_page > label {
            display: none;
        }

        &[data-show-selected-tarif='true']:not(:has(input[name^="selected_page_"][value="1"]:checked)):not(:has(input[name^="selected_page_"]:checked.c_hide_overview)),
        &[data-show-selected-tarif='true'][data-suggest-tarif='true']:has(input[name^="selected_page_"][value="1"]:checked) {
            grid-template-areas: "hnav hnav" "form overview";
            grid-template-columns: 1fr 1fr;
        }
    }

    .c_overview {
        grid-area: overview;
        display: flex;
        flex-direction: column;
        border-left: var(--overview-border-thickness) solid light-dark(var(--tl-overview-border, black), var(--td-overview-border, white));
        padding: 0 2em 0 2em;
    }

    .c_overview_data {
        position: sticky;
        top: 0;
    }

    .c_overview_data .c_selected_tarif_compact {
        display: none;
    }
}

@media (orientation: portrait) {
    #ov_form {
        flex-direction: column;
    }

    #id_root:not(.c_submission_success) {
        padding-bottom: var(--max-height-bottom-overview);
    }

    .c_page > label {
        display: none;
    }

    .c_overview {
        max-height: var(--max-height-bottom-overview);
        overflow-y: scroll;
        border-left: none;
        position: fixed;
        width: 100%;
        left: 0;
        bottom: 0;
        background-color: light-dark(white, black);
        border-top: 1px solid black;
        display: flex;
        justify-content: center;
    }

    .c_overview_data {
        width: 100%;
    }

    .c_overview_data summary,
    .c_overview_data .c_payment {
        font-size: 2rem;
    }

    .c_overview_data article {
        padding: 0.5rem;
    }

    .c_overview_data .c_selected_tarif_spacious {
        display: none;
    }
}

/* Uebersicht ausblenden wenn:
   1. kein Tarif ausgewaehlt ist
     (kann nur fuer die 1. Seite zutreffen wenn es ueberhaupt keine Tarife gibt)
   2. wenn man auf der 1. Seite steht und Tarifvorschlag nicht angehakt ist
     (intern ist immer der 1. Tarif ausgewaehlt, deshalb trifft Regel 1 nicht zu)
   3. wenn eine Seite mit der Klasse .c_hide_overview ausgewaehlt ist

   Positiv formuliert: Uebersicht anzeigen WENN
     "Gewaehlten Tarif immer anzeigen" UND "Tarif ausgewaehlt" UND Seite != .c_hide_overview UND
     (Seite != 1 ODER "Tarif empfehlen") 
*/
#id_root:not([data-show-selected-tarif='true']) .c_overview,
#id_root:not([data-suggest-tarif='true']):has(input[name^="selected_page_"][value="1"]:checked) .c_overview,
#id_root:has(input[name^="selected_page_"]:checked.c_hide_overview) .c_overview {
    display: none;
}

fieldset {
    border: none;
}

.c_show_invalid_data fieldset:not(:valid)::after {
    display: block;
    color: red;
    content: attr(data-text);
}

.c_input_container {
    margin: 0 auto;
    max-width: 40em;
    width: 100%;
}

.c_input_container button[type="submit"] {
    display: block;
    margin: 0 auto;
}

.c_input_container input:not([type="checkbox"]) {
    width: 100%;
    font-size: 1em;
    color: light-dark(var(--tl-edit-notfocus-text, black), var(--td-edit-notfocus-text, white));
    border: var(--edit-border-thickness) solid light-dark(var(--tl-edit-notfocus-border, #a0a0a0), var(--td-edit-notfocus-border, #a0a0a0));
    border-radius: calc(var(--edit-border-radius, 0) * 1rem);
    padding: 1em 1em 1em 3em;
    background-repeat: no-repeat;
    background-size: contain;
    background-origin: content-box;
    background-position-x: -2em;
}

.c_input_container input:focus {
    color: light-dark(var(--tl-edit-focus-text, black), var(--td-edit-focus-text, white));
    border: var(--edit-border-thickness) solid light-dark(var(--tl-edit-focus-border, black), var(--td-edit-focus-border, white));
}

.c_input_container input.c_icon_person {
    background-image: url('person.svg');
}

.c_input_container input.c_icon_calendar {
    background-image: url('calendar.svg');
}

.c_input_container input.c_icon_mail {
    background-image: url('mail.svg');
}

.c_input_container input.c_icon_tel {
    background-image: url('tel.svg');
}

.c_input_container input.c_icon_location {
    background-image: url('location.svg');
}

.c_input_container input.c_icon_bank {
    background-image: url('bank.svg');
}

.c_input_container input.c_icon_card {
    background-image: url('card.svg');
}

.c_always_hidden,
.c_hidden,
#id_root[data-selected-tarif=''] [data-tarife] {
    display: none;
}

.c_radio_select {
    display: flex;
    gap: 1em;
}

@media (max-width: 500px) {
    .c_radio_select {
        flex-direction: column;
    }
}

.c_radio_select label {
    flex: 1;
    text-align: center;
    padding: 0.5em;
    border: 1px solid light-dark(var(--tl-radio-notsel-border, black), var(--td-radio-notsel-border, white));
    background-color: light-dark(var(--tl-radio-notsel-bg, white), var(--td-radio-notsel-bg, black));
    color: light-dark(var(--tl-radio-notsel-text, black), var(--td-radio-notsel-text, white));
    border-radius: calc(var(--radio-border-radius, 0) * 1rem);
}

.c_radio_select label:hover {
    border: 1px solid light-dark(var(--tl-radio-notsel-hover-border, black), var(--td-radio-notsel-hover-border, white));
    background-color: light-dark(var(--tl-radio-notsel-hover-bg, #e0e0e0), var(--td-radio-notsel-hover-bg, #e0e0e0));
    color: light-dark(var(--tl-radio-notsel-hover-text, black), var(--td-radio-notsel-hover-text, black));
}

.c_radio_select input:checked+label {
    border: 1px solid light-dark(var(--tl-radio-sel-border, black), var(--td-radio-sel-border, white));
    background-color: light-dark(var(--tl-radio-sel-bg, #b0b0b0), var(--td-radio-sel-bg, #b0b0b0));
    color: light-dark(var(--tl-radio-sel-text, black), var(--td-radio-sel-text, black));
}

.c_radio_select input:checked+label:hover {
    border: 1px solid light-dark(var(--tl-radio-sel-hover-border, black), var(--td-radio-sel-hover-border, white));
    background-color: light-dark(var(--tl-radio-sel-hover-bg, #e0e0e0), var(--td-radio-sel-hover-bg, #e0e0e0));
    color: light-dark(var(--tl-radio-sel-hover-text, black), var(--td-radio-sel-hover-text, black));
}
@media(orientation: portrait) {
#id_root:not(:has(input[name^='selected_page_'][value='1']:checked)) #page_1,
#id_root:not(:has(input[name^='selected_page_'][value='2']:checked)) #page_2,
#id_root:not(:has(input[name^='selected_page_'][value='3']:checked)) #page_3,
#id_root:not(:has(input[name^='selected_page_'][value='4']:checked)) #page_4,
#id_root:not(:has(input[name^='selected_page_'][value='5']:checked)) #page_5 {
        display: none;
    }
}
@media(orientation: landscape) {
#id_root:not(:has(input[name^='selected_page_'][value='1']:checked))[data-vertical-navigation='true'] #page_1 > .c_page_content,
#id_root:not(:has(input[name^='selected_page_'][value='1']:checked)):not([data-vertical-navigation='true']) #page_1,
#id_root:not(:has(input[name^='selected_page_'][value='2']:checked))[data-vertical-navigation='true'] #page_2 > .c_page_content,
#id_root:not(:has(input[name^='selected_page_'][value='2']:checked)):not([data-vertical-navigation='true']) #page_2,
#id_root:not(:has(input[name^='selected_page_'][value='3']:checked))[data-vertical-navigation='true'] #page_3 > .c_page_content,
#id_root:not(:has(input[name^='selected_page_'][value='3']:checked)):not([data-vertical-navigation='true']) #page_3,
#id_root:not(:has(input[name^='selected_page_'][value='4']:checked))[data-vertical-navigation='true'] #page_4 > .c_page_content,
#id_root:not(:has(input[name^='selected_page_'][value='4']:checked)):not([data-vertical-navigation='true']) #page_4,
#id_root:not(:has(input[name^='selected_page_'][value='5']:checked))[data-vertical-navigation='true'] #page_5 > .c_page_content,
#id_root:not(:has(input[name^='selected_page_'][value='5']:checked)):not([data-vertical-navigation='true']) #page_5 {
        display: none;
    }
}
[data-selected-tarif='0'] [data-tarife]:not([data-tarife~='0']) {
    display: none;
}