/*
 * Gemeinsame mobile Basis für die statischen TalkTrain-Webseiten.
 * Seitenspezifische Tailwind-Klassen bleiben erhalten; diese Regeln sichern
 * Lesbarkeit und Bedienbarkeit auch auf sehr schmalen Bildschirmen ab.
 */

:root {
    color-scheme: light;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

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

html {
    max-width: 100%;
    overflow-x: clip;
}

body {
    min-width: 0;
    max-width: 100%;
    margin-inline: 0;
    overflow-wrap: break-word;
}

main,
header,
footer,
nav,
section,
article,
aside,
form,
fieldset,
figure,
div {
    min-width: 0;
}

img,
picture,
video,
canvas,
iframe {
    max-width: 100%;
}

img,
video {
    height: auto;
}

pre,
code,
kbd,
samp {
    overflow-wrap: normal;
}

pre {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table {
    max-width: 100%;
}

input,
select,
textarea,
button {
    max-width: 100%;
    font: inherit;
}

input,
select,
textarea {
    font-size: 1rem;
}

textarea {
    resize: vertical;
}

[id] {
    scroll-margin-top: 5rem;
}

#mobile-navigation {
    max-height: calc(100dvh - 4rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}

@media (max-width: 767px) {
    .text-xs {
        font-size: .875rem !important;
        line-height: 1.25rem !important;
    }

    input,
    select,
    textarea {
        font-size: 1rem !important;
    }

    button,
    summary,
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    select {
        min-height: 2.75rem;
    }

    button,
    summary {
        min-width: 2.75rem;
    }

    #mobile-navigation a {
        display: flex;
        min-height: 2.75rem;
        align-items: center;
    }

    body > header details > div,
    body > nav details > div {
        width: min(18rem, calc(100vw - 3rem)) !important;
    }

    .tt-simple-nav > div {
        padding-inline: 1rem;
    }

    .tt-simple-nav > div > a:first-child {
        display: none;
    }

    .tt-simple-nav > div > div:last-child a {
        display: inline-flex;
        min-height: 2.75rem;
        align-items: center;
    }

    .tt-legal-nav {
        padding: .5rem 1rem;
    }

    .tt-legal-nav > div > a:first-child {
        display: none;
    }

    .tt-legal-nav > div > a:last-child {
        min-height: 2.75rem;
        display: inline-flex;
        align-items: center;
        text-align: right;
    }

    .tt-legal-nav + main h1 {
        hyphens: auto;
        overflow-wrap: normal;
    }

    .tt-checkout-header {
        padding-block: .75rem;
    }

    .tt-checkout-header > div {
        gap: .75rem;
        padding-inline: 1rem;
    }

    .tt-checkout-header .tt-checkout-label,
    .tt-checkout-header .tt-security-label {
        display: none;
    }

    .prose {
        overflow-wrap: anywhere;
    }
}

@media (max-width: 374px) {
    body > nav a[aria-label="TalkTrain Startseite"] > span,
    body > header a[aria-label="TalkTrain Startseite"] > span,
    .tt-simple-nav a.group > span,
    .tt-legal-nav a.flex > span,
    .tt-checkout-header a.flex > span {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto !important;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}