/* The "Theater 2026" design of daspodium.at and grazerpuppentheater.eu (the old one: theater.css) - no framework. The handwritten Riegler
   font (declared in _Host.cshtml) for the name, headings and menu; the pictures bring the colour, the page stays calm.
   The booking pages are shared with the RieglerProduction layout (Bootstrap 5) and keep Bootstrap's class names
   (btn, form-control, alert-…) - they are styled here. */

:root {
    --t-bg: #fdfcf9;
    --t-paper: #fff;
    --t-ink: #26231f;
    --t-muted: #6f6a62;
    --t-line: #e9e4da;
    --t-soft: #f5f1e8;
    --t-accent: #2766a8;
    --t-accent-dark: #1d4f84;
    --t-accent-soft: #e8f0f9;
    --t-warm: #f3b33d;
    --t-danger: #b3382c;
    --t-radius: 14px;
    --t-shadow: 0 1px 2px rgba(38, 35, 31, .06), 0 8px 24px rgba(38, 35, 31, .07);
    --t-width: 1140px;
    --t-hand: Riegler, "Segoe Print", "Bradley Hand", cursive;
    --t-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

body {
    margin: 0;
    background: var(--t-bg);
    color: var(--t-ink);
    font: 17px/1.65 var(--t-sans);
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--t-accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

a:hover {
    color: var(--t-accent-dark);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--t-hand);
    font-weight: normal;
    line-height: 1.2;
    margin: 1.4em 0 .5em;
}

img {
    max-width: 100%;
}

hr {
    border: 0;
    border-top: 1px solid var(--t-line);
    margin: 2rem 0;
}

:focus-visible {
    outline: 3px solid var(--t-warm);
    outline-offset: 2px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

/* the footer at the bottom of the window on short pages */
.t-site {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ---- header: the name, the menu sticking to the top ---- */

.t-header {
    text-align: center;
    padding: 34px 20px 6px;
}

.t-brand {
    font-family: var(--t-hand);
    font-size: clamp(42px, 7vw, 76px);
    line-height: 1.1;
    color: var(--t-ink);
    text-decoration: none;
    display: inline-block;
    transform: rotate(-1.5deg);
}

.t-brand:hover {
    color: var(--t-ink);
}

.t-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(253, 252, 249, .92);
    backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--t-line);
}

/* wider than the page, so long menus (nine entries and the shop) stay on one line */
.t-nav-bar {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
}

/* the name in the bar only on a phone - on a laptop it's big above */
.t-nav-brand {
    display: none;
    font-family: var(--t-hand);
    font-size: 26px;
    color: var(--t-ink);
    text-decoration: none;
}

.t-nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px 6px;
    width: 100%;
}

.t-nav-item {
    position: relative;
}

/* the right menu (the shop) follows the main one, a little apart - pushed to the far right it would sit alone in a
   second row when a long menu wraps */
.t-nav-right {
    margin-left: 16px;
}

.t-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 14px 10px 12px;
    font: 21px/1 var(--t-hand);
    color: var(--t-ink);
    text-decoration: none;
    background: none;
    border: 0;
    cursor: pointer;
    position: relative;
}

.t-nav-link:hover {
    color: var(--t-accent);
}

/* the current page: a hand-drawn line below */
.t-nav-item.active > .t-nav-link::after,
.t-nav-link:hover::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 3px;
    height: 8px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M1 5.5C18 2 34 6.5 50 4S82 1.5 99 4.5' fill='none' stroke='%23f3b33d' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.t-nav-link:hover::after {
    opacity: .5;
}

.t-nav-item.active > .t-nav-link::after {
    opacity: 1;
}

.t-caret {
    width: 7px;
    height: 7px;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: rotate(45deg) translateY(-3px);
    transition: transform .15s;
}

.t-nav-item.expanded .t-caret {
    transform: rotate(-135deg) translateY(-1px);
}

.t-nav-sub {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 220px;
    list-style: none;
    margin: 0;
    padding: 8px;
    background: var(--t-paper);
    border: 1px solid var(--t-line);
    border-radius: 12px;
    box-shadow: var(--t-shadow);
}

.t-nav-item.expanded .t-nav-sub {
    display: block;
}

.t-nav-sub a {
    display: block;
    padding: 8px 12px;
    border-radius: 8px;
    color: var(--t-ink);
    text-decoration: none;
}

.t-nav-sub a:hover,
.t-nav-sub .active a {
    background: var(--t-soft);
}

.t-icon {
    width: 20px;
    height: 20px;
}

.t-nav-toggle {
    display: none;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    padding: 8px 12px;
    border: 1px solid var(--t-line);
    border-radius: 999px;
    background: var(--t-paper);
    font: 15px var(--t-sans);
    color: var(--t-ink);
    cursor: pointer;
}

.t-nav-toggle-lines,
.t-nav-toggle-lines::before,
.t-nav-toggle-lines::after {
    display: block;
    width: 16px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .2s, background .2s;
}

.t-nav-toggle-lines {
    position: relative;
}

.t-nav-toggle-lines::before,
.t-nav-toggle-lines::after {
    content: "";
    position: absolute;
    left: 0;
}

.t-nav-toggle-lines::before {
    top: -5px;
}

.t-nav-toggle-lines::after {
    top: 5px;
}

.t-nav.open .t-nav-toggle-lines {
    background: transparent;
}

.t-nav.open .t-nav-toggle-lines::before {
    transform: translateY(5px) rotate(45deg);
}

.t-nav.open .t-nav-toggle-lines::after {
    transform: translateY(-5px) rotate(-45deg);
}

@media (max-width: 860px) {
    .t-header {
        display: none;
    }

    .t-nav-bar {
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .t-nav-brand,
    .t-nav-toggle {
        display: inline-flex;
    }

    .t-nav-menu {
        display: none;
        flex-direction: column;
        align-items: stretch;
        padding: 6px 0 14px;
    }

    .t-nav.open .t-nav-menu {
        display: flex;
    }

    .t-nav-right {
        margin-left: 0;
    }

    .t-nav-link {
        width: 100%;
        padding: 12px 4px;
        font-size: 24px;
        border-bottom: 1px dashed var(--t-line);
    }

    .t-nav-item.active > .t-nav-link::after {
        left: 4px;
        right: auto;
        width: 120px;
    }

    .t-nav-sub {
        position: static;
        box-shadow: none;
        border: 0;
        padding: 0 0 6px 16px;
        background: none;
    }
}

/* ---- page ---- */

.t-main {
    flex: 1;
    width: 100%;
    max-width: var(--t-width);
    margin: 0 auto;
    padding: 24px 20px 60px;
}

.t-title {
    font-size: clamp(36px, 5vw, 52px);
    color: var(--t-accent);
    margin: 18px 0 18px;
}

.play-subtitle {
    margin: -10px 0 24px;
    font-size: 19px;
    color: var(--t-muted);
}

.post-text::after {
    content: "";
    display: table;
    clear: both;
}

.post-text p {
    margin: 0 0 1em;
}

.post-text h3, .post-text h4, .post-text h5 {
    font-size: 26px;
    margin-top: 1.2em;
}

.post-text img {
    height: auto;
    border-radius: 10px;
}

.post-text iframe {
    max-width: 100%;
    border-radius: 10px;
    border: 0;
}

.post-text audio {
    width: 100%;
    max-width: 460px;
}

/* WordPress' own classes in the migrated content */
.alignleft {
    float: left;
    margin: 4px 22px 12px 0;
}

.alignright {
    float: right;
    margin: 4px 0 12px 22px;
}

img.aligncenter, .wp-caption.aligncenter {
    display: block;
    margin: 0 auto 1em;
}

.wp-caption {
    max-width: 100%;
}

/* on a phone the pictures of a text fill its width (WordPress set them to 300 px or so, and side by side) */
@media (max-width: 600px) {
    .alignleft, .alignright {
        float: none;
        display: block;
        margin: 0 0 1em;
    }

    .post-text img[class*="align"],
    .post-text img[class*="size-"],
    .post-text .wp-caption,
    .post-text .wp-caption img {
        width: 100% !important;
        max-width: 100%;
        height: auto;
    }
}

/* ---- start pages ---- */

/* "Bilder-Raster" (Das Podium): tall - two by two - tall */
.t-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1fr;
    gap: 22px;
    margin-top: 10px;
}

.t-grid-item.tall.left {
    grid-column: 1;
    grid-row: 1 / span 2;
}

.t-grid-item.tall.right {
    grid-column: 4;
    grid-row: 1 / span 2;
}

.t-grid-item:not(.tall) {
    aspect-ratio: 1;
}

/* "Bilder-Kacheln" (Grazer Puppentheater) */
.t-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 10px;
}

.t-tile {
    aspect-ratio: 1;
}

.t-grid-item,
.t-tile {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--t-radius);
    background: var(--t-soft);
    box-shadow: var(--t-shadow);
    transition: transform .25s ease, box-shadow .25s ease;
}

.t-grid-item img,
.t-tile img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.t-grid-item:hover,
.t-tile:hover {
    transform: translateY(-4px) rotate(-.4deg);
    box-shadow: 0 2px 4px rgba(38, 35, 31, .08), 0 18px 40px rgba(38, 35, 31, .16);
}

.t-grid-item:hover img,
.t-tile:hover img {
    transform: scale(1.04);
}

@media (max-width: 860px) {
    .t-grid,
    .t-tiles {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .t-grid-item.tall.left,
    .t-grid-item.tall.right {
        grid-column: auto;
        grid-row: auto;
        aspect-ratio: 1;
    }

}

/* ---- plays: picture and key facts beside the text ---- */

.play-page {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

.play-page.no-aside {
    grid-template-columns: minmax(0, 1fr);
}

.play-aside {
    position: sticky;
    top: 80px;
    background: var(--t-paper);
    border: 1px solid var(--t-line);
    border-radius: var(--t-radius);
    padding: 14px;
    box-shadow: var(--t-shadow);
    transform: rotate(-.6deg);
}

.play-picture {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.play-facts {
    margin: 16px 6px 4px;
    display: grid;
    gap: 12px;
}

.play-facts dt {
    font: 19px/1.2 var(--t-hand);
    color: var(--t-accent);
}

.play-facts dd {
    margin: 0;
    font-size: 15px;
    line-height: 1.45;
}

@media (max-width: 760px) {
    .play-page {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }

    .play-aside {
        position: static;
        transform: none;
        max-width: 420px;
    }
}

/* "Stücke": every play its own section, an index of them at the top */
.t-index {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 24px 0 8px;
}

.t-index a {
    padding: 6px 14px;
    border: 1px solid var(--t-line);
    border-radius: 999px;
    background: var(--t-paper);
    color: var(--t-ink);
    font-size: 15px;
    text-decoration: none;
    transition: background .15s, border-color .15s;
}

.t-index a:hover {
    background: var(--t-accent-soft);
    border-color: var(--t-accent);
}

/* on screens with room left of the page the index is a line of the plays' pictures there, following the page while
   scrolling - the play one is at is marked (js/theater-2026.js) */
.t-timeline {
    display: none;
}

@media (min-width: 1340px) {
    .t-page:has(> .t-timeline) {
        position: relative;
    }

    .t-index {
        display: none;
    }

    .t-timeline {
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        right: calc(100% + 28px);
        width: 76px;
    }

    .t-timeline ol {
        position: sticky;
        top: 96px;
        max-height: calc(100vh - 120px);
        overflow-y: auto;
        scrollbar-width: none;
        list-style: none;
        margin: 0;
        padding: 10px 0;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .t-timeline ol::-webkit-scrollbar {
        display: none;
    }

    /* the line the pictures sit on */
    .t-timeline li {
        position: relative;
        display: flex;
        justify-content: center;
    }

    .t-timeline li:not(:last-child)::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 100%;
        height: 14px;
        border-left: 2px solid var(--t-line);
    }

    /* little pictures with rounded corners, each a bit askew like stuck on by hand */
    .t-timeline a {
        --tilt: -4deg;
        display: block;
        width: 52px;
        height: 52px;
        border-radius: 9px;
        border: 3px solid var(--t-paper);
        background: var(--t-paper);
        box-shadow: 0 1px 4px rgba(38, 35, 31, .25);
        overflow: hidden;
        text-decoration: none;
        opacity: .7;
        filter: grayscale(.5);
        transform: rotate(var(--tilt));
        transition: opacity .2s, filter .2s, box-shadow .2s, transform .25s;
    }

    .t-timeline li:nth-child(5n+2) a { --tilt: 3deg; }
    .t-timeline li:nth-child(5n+3) a { --tilt: -2deg; }
    .t-timeline li:nth-child(5n+4) a { --tilt: 5deg; }
    .t-timeline li:nth-child(5n+5) a { --tilt: -6deg; }

    .t-timeline a:hover,
    .t-timeline a:focus-visible,
    .t-timeline a.active {
        opacity: 1;
        filter: none;
        box-shadow: 0 0 0 2px var(--t-accent), 0 3px 10px rgba(38, 35, 31, .3);
    }

    .t-timeline a:hover {
        transform: rotate(0deg) scale(1.08);
    }

    /* the play one is at: a bit bigger and turned the other way */
    .t-timeline a.active {
        transform: rotate(calc(var(--tilt) * -1)) scale(1.15);
    }

    .t-timeline img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* the title of the picture pointed at, next to it (placed by js/theater-2026.js) */
    .t-timeline-tip {
        position: fixed;
        z-index: 20;
        width: max-content;
        max-width: 300px;
        padding: 5px 12px 6px;
        border-radius: 8px;
        background: var(--t-ink);
        color: var(--t-paper);
        font: 18px/1.25 var(--t-hand);
        box-shadow: var(--t-shadow);
        pointer-events: none;
        opacity: 0;
        transform: translate(-6px, -50%) rotate(-1.5deg);
        transition: opacity .15s, transform .15s;
    }

    .t-timeline-tip.visible {
        opacity: 1;
        transform: translate(0, -50%) rotate(-1.5deg);
    }

    .t-timeline-initial {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        font: 24px/1 var(--t-hand);
        color: var(--t-accent);
    }
}

.t-play {
    padding: 44px 0 20px;
    border-top: 1px solid var(--t-line);
    margin-top: 36px;
}

.t-play-title {
    font-size: clamp(30px, 4vw, 40px);
    margin: 0 0 14px;
}

.t-play .play-subtitle {
    margin-top: -6px;
}

.child-text p {
    margin: 0 0 1em;
}

/* ---- dates of a play (PerformanceBlock) ---- */

.performances {
    clear: both;
    margin-top: 36px;
}

.performances-title {
    font-size: 30px;
    margin: 0 0 14px;
}

.performance-list {
    display: grid;
    gap: 10px;
}

.performance {
    display: grid;
    grid-template-columns: 64px 150px minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 12px 16px 12px 12px;
    background: var(--t-paper);
    border: 1px solid var(--t-line);
    border-radius: var(--t-radius);
    transition: border-color .15s, box-shadow .15s;
}

.performance:hover {
    border-color: #d8d0c1;
    box-shadow: var(--t-shadow);
}

/* a sheet of a tear-off calendar */
.performance-sheet {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 64px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--t-paper);
    border: 1px solid var(--t-line);
    line-height: 1;
    text-align: center;
}

.performance-sheet-weekday {
    width: 100%;
    padding: 4px 0;
    background: var(--t-accent);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.performance-sheet-day {
    padding: 6px 0 0;
    font: 30px/1 var(--t-hand);
}

.performance-sheet-month {
    padding: 2px 0 6px;
    color: var(--t-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.performance-date strong {
    display: block;
    font-weight: 600;
}

.performance-date span {
    display: block;
    color: var(--t-muted);
    font-size: 15px;
}

.performance-info {
    min-width: 0;
}

.performance-note {
    display: inline-block;
    margin: 2px 0 0 4px;
    padding: 1px 10px;
    border-radius: 999px;
    background: var(--t-soft);
    font-size: 13px;
    color: var(--t-muted);
    white-space: nowrap;
}

.performance-note.school {
    background: #fdf1d8;
    color: #7a5512;
}

.performance-prices {
    color: var(--t-muted);
    font-size: 14px;
    margin-top: 2px;
}

.performance-action {
    text-align: right;
}

.performance-remaining {
    display: block;
    color: var(--t-danger);
    font-size: 13px;
    margin-top: 4px;
}

.performance-state {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--t-soft);
    color: var(--t-muted);
    font-size: 14px;
}

.performance-state.cancelled {
    background: #fbe6e3;
    color: var(--t-danger);
}

.performance-cancelled .performance-date strong,
.performance-cancelled .performance-date span {
    text-decoration: line-through;
}

.performance-unavailable,
.performance-cancelled {
    background: var(--t-bg);
}

.performance-unavailable .performance-info,
.performance-unavailable .performance-date,
.performance-cancelled .performance-info,
.performance-unavailable .performance-sheet,
.performance-cancelled .performance-sheet {
    opacity: .6;
}

@media (max-width: 760px) {
    .performance {
        grid-template-columns: 56px minmax(0, 1fr);
        gap: 6px 14px;
        align-items: start;
    }

    .performance-sheet {
        width: 56px;
        grid-row: span 3;
    }

    .performance-date strong {
        display: inline;
    }

    .performance-date span {
        display: inline;
        margin-left: 6px;
    }

    .performance-note {
        margin-left: 0;
    }

    .performance-action {
        text-align: left;
        margin-top: 4px;
    }
}

/* ---- buttons, fields, notes (Bootstrap's names, used by the shared booking pages) ---- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 20px;
    border: 1px solid transparent;
    border-radius: 999px;
    font: 600 15px/1.2 var(--t-sans);
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, transform .1s, box-shadow .15s;
}

.btn:active {
    transform: translateY(1px);
}

.btn:disabled {
    opacity: .55;
    cursor: default;
}

.btn-primary {
    background: var(--t-accent);
    color: #fff;
    box-shadow: 0 2px 0 var(--t-accent-dark);
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--t-accent-dark);
    color: #fff;
}

.btn-default {
    background: var(--t-paper);
    border-color: var(--t-line);
    color: var(--t-ink);
}

.btn-default:hover {
    background: var(--t-soft);
}

.btn-sm {
    padding: 7px 16px;
    font-size: 14px;
}

.btn-lg {
    padding: 13px 28px;
    font-size: 17px;
}

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-size: 15px;
    font-weight: 600;
}

.form-control {
    display: block;
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #d9d2c5;
    border-radius: 10px;
    background: var(--t-paper);
    font: 16px/1.4 var(--t-sans);
    color: var(--t-ink);
    transition: border-color .15s, box-shadow .15s;
}

.form-control:focus {
    outline: none;
    border-color: var(--t-accent);
    box-shadow: 0 0 0 4px var(--t-accent-soft);
}

.form-control::placeholder {
    color: #aaa398;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
}

.help-block {
    display: block;
    margin: 6px 0 0;
    color: var(--t-muted);
    font-size: 14px;
}

.alert {
    padding: 14px 18px;
    border-radius: 12px;
    border: 1px solid transparent;
    margin: 0 0 20px;
}

.alert-success {
    background: #e9f5ec;
    border-color: #c6e5cd;
    color: #1f5b2c;
}

.alert-info {
    background: var(--t-accent-soft);
    border-color: #cbdcf0;
    color: #1d4f84;
}

.alert-warning {
    background: #fdf3dc;
    border-color: #f2dca6;
    color: #6f4f0c;
}

.alert-danger {
    background: #fbe6e3;
    border-color: #f1c4bd;
    color: #8a2a20;
}

.table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
}

.table th,
.table td {
    padding: 10px 8px;
    border-bottom: 1px solid var(--t-line);
    text-align: left;
    vertical-align: middle;
}

/* ---- booking: steps, plays to choose, the form ---- */

.booking {
    max-width: 680px;
    margin: 10px auto 40px;
}

.booking .post-title {
    font-size: clamp(30px, 4vw, 40px);
    color: var(--t-accent);
    margin: 10px 0 10px;
}

.booking-when {
    font-size: 18px;
    padding: 12px 16px;
    background: var(--t-paper);
    border: 1px solid var(--t-line);
    border-radius: 12px;
}

.booking-step {
    margin-top: 22px;
    padding: 20px 22px 8px;
    background: var(--t-paper);
    border: 1px solid var(--t-line);
    border-radius: var(--t-radius);
}

.booking-step h3 {
    font-size: 26px;
    margin: 0 0 14px;
}

.booking-prices td {
    vertical-align: middle;
}

.booking-prices tfoot th {
    border-bottom: 0;
    font-size: 18px;
}

.booking-price {
    text-align: right !important;
    white-space: nowrap;
}

.booking-quantity {
    white-space: nowrap;
    text-align: right !important;
    width: 1%;
}

.booking-quantity .btn {
    width: 36px;
    height: 36px;
    padding: 0;
    font-size: 18px;
}

.booking-quantity input {
    display: inline-block;
    width: 58px;
    margin: 0 4px;
    padding: 7px 4px;
    text-align: center;
    -moz-appearance: textfield;
}

.booking-quantity input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

/* the payment choice as two cards */
.booking-step .radio {
    margin-bottom: 10px;
}

.booking-step .radio label {
    display: flex;
    gap: 12px;
    align-items: baseline;
    padding: 14px 16px;
    border: 1px solid var(--t-line);
    border-radius: 12px;
    cursor: pointer;
    font-weight: normal;
    transition: border-color .15s, background .15s;
}

.booking-step .radio label:has(input:checked) {
    border-color: var(--t-accent);
    background: var(--t-accent-soft);
}

.booking-step .radio input {
    accent-color: var(--t-accent);
}

.booking > p:has(> .btn-lg) {
    margin-top: 26px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 20px;
}

.booking-back {
    color: var(--t-muted);
}

.booking-summary {
    background: var(--t-paper);
    border: 1px solid var(--t-line);
    border-radius: var(--t-radius);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}

.booking-summary th {
    width: 170px;
    font-weight: normal;
    color: var(--t-muted);
    padding-left: 18px;
}

.booking-summary tr:last-child th,
.booking-summary tr:last-child td {
    border-bottom: 0;
}

/* where the visitor is: play, date, tickets, done */
.booking-steps {
    display: flex;
    gap: 8px;
    margin: 6px 0 26px;
    padding: 0;
    list-style: none;
}

.booking-steps li {
    flex: 1;
    min-width: 0;
    padding-top: 10px;
    border-top: 4px solid var(--t-line);
    border-radius: 2px;
    color: var(--t-muted);
    font-size: 15px;
}

.booking-steps li.done,
.booking-steps li.current {
    border-top-color: var(--t-accent);
    color: var(--t-ink);
}

.booking-steps li.current {
    font-weight: 600;
}

.booking-steps a {
    color: inherit;
    text-decoration: none;
}

.booking-steps a:hover .booking-step-label {
    text-decoration: underline;
}

.booking-step-number {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--t-soft);
    color: var(--t-muted);
    font-size: 12px;
    line-height: 24px;
    text-align: center;
    font-weight: 700;
}

.booking-steps li.done .booking-step-number,
.booking-steps li.current .booking-step-number {
    background: var(--t-accent);
    color: #fff;
}

@media (max-width: 600px) {
    /* only the current step's name on a phone */
    .booking-steps li:not(.current) .booking-step-label {
        display: none;
    }

    .form-row {
        grid-template-columns: 1fr;
    }
}

.booking-wizard {
    margin-bottom: 40px;
}

.booking-wizard-title {
    font-size: 32px;
    margin: 0 0 16px;
}

.booking-wizard-play {
    font-size: 18px;
}

.booking-plays {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

.booking-play {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--t-paper);
    border: 1px solid var(--t-line);
    border-radius: var(--t-radius);
    color: inherit;
    text-decoration: none;
    box-shadow: var(--t-shadow);
    transition: transform .2s, box-shadow .2s;
}

.booking-play:hover,
.booking-play:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 2px 4px rgba(38, 35, 31, .08), 0 18px 40px rgba(38, 35, 31, .14);
    color: inherit;
}

.booking-play-image {
    display: block;
    aspect-ratio: 4 / 3;
    background: var(--t-soft) center / cover no-repeat;
}

.booking-play-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 16px 4px;
    color: var(--t-muted);
    font-size: 15px;
}

.booking-play-body strong {
    font: 24px/1.15 var(--t-hand);
    font-weight: normal;
    color: var(--t-ink);
    margin-bottom: 4px;
}

.booking-play-go {
    margin-top: auto;
    padding: 10px 16px 16px;
    font-weight: 600;
    color: var(--t-accent);
}

.booking-wizard-empty {
    font-size: 18px;
}

/* the page's own text below the wizard */
.booking-wizard + .post-text:not(:empty) {
    padding-top: 28px;
    border-top: 1px solid var(--t-line);
}

/* ---- footer ---- */

/* not on the picture start pages - the name is big above them anyway */
.t-site:has(.t-grid, .t-tiles) .t-footer {
    display: none;
}

.t-footer {
    border-top: 1px solid var(--t-line);
    background: var(--t-soft);
}

/* name and address - phone and mail - social media, footer text and menu */
.t-footer-inner {
    max-width: var(--t-width);
    margin: 0 auto;
    padding: 30px 20px 36px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 22px 40px;
    align-items: start;
    color: var(--t-muted);
    font-size: 15px;
}

.t-footer-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.t-footer-brand {
    font: 30px/1 var(--t-hand);
    color: var(--t-ink);
    text-decoration: none;
    margin-bottom: 4px;
}

.t-footer a {
    color: var(--t-ink);
}

.t-footer-address {
    text-decoration: none;
    line-height: 1.5;
}

.t-footer-address:hover,
.t-footer-contact a:hover {
    color: var(--t-accent);
}

.t-footer-contact {
    padding-top: 6px;
}

.t-footer-contact a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.t-footer-contact .t-icon,
.t-footer-social .t-icon {
    flex: none;
    width: 20px;
    height: 20px;
    color: var(--t-accent);
}

.t-footer-end {
    padding-top: 6px;
    align-items: flex-end;
    text-align: right;
}

.t-footer-social {
    display: flex;
    gap: 10px;
}

.t-footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--t-paper);
    border: 1px solid var(--t-line);
    transition: background .15s, border-color .15s, transform .15s;
}

.t-footer-social a:hover {
    background: var(--t-accent-soft);
    border-color: var(--t-accent);
    transform: translateY(-2px);
}

.t-footer .site-footer {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
}

@media (max-width: 700px) {
    .t-footer-end {
        align-items: flex-start;
        text-align: left;
    }
}

/* ---- Blazor error bar and reconnect dialog (same as site.css) ---- */

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

#components-reconnect-modal {
    display: none;
}

    #components-reconnect-modal.components-reconnect-show,
    #components-reconnect-modal.components-reconnect-failed,
    #components-reconnect-modal.components-reconnect-rejected {
        display: block;
    }

    /* On the website a small note at the top right instead of a dialog over the page. A tab coming back from the
       background usually reconnects within a moment, so the note only fades in when that takes longer. */
    #components-reconnect-modal .reconnect-overlay {
        position: fixed;
        top: 1rem;
        right: 1rem;
        z-index: 2000;
        animation: reconnect-note-in 0.3s ease 2s both;
    }

    #components-reconnect-modal .reconnect-dialog {
        background: rgba(34, 34, 34, 0.92);
        color: whitesmoke;
        padding: 0.5rem 0.9rem;
        border-radius: 0.4rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
        font-size: 0.85rem;
        max-width: 280px;
    }

@keyframes reconnect-note-in {
    from { opacity: 0; transform: translateY(-0.5rem); }
    to { opacity: 1; transform: none; }
}

    #components-reconnect-modal p {
        display: none;
        margin: 0;
    }

    #components-reconnect-modal .reconnect-reload-link {
        color: #8fd3ff;
    }

    #components-reconnect-modal.components-reconnect-show .reconnect-message-show,
    #components-reconnect-modal.components-reconnect-failed .reconnect-message-failed,
    #components-reconnect-modal.components-reconnect-rejected .reconnect-message-rejected {
        display: block;
    }