/* RCV-Bausteine für beide Oberflächen (Vuexy und Bootstrap): Kennzahlen, Badges, Zeitleiste, Kalender, Saalplan, Scanner,
   Anmeldung und Ticketseite. Farben aus den --rcv-Variablen in brand.css (Bootstrap) oder brand-vuexy.css (Vuexy). */
@font-face { font-family: 'Lato'; font-weight: 400; src: url('../fonts/lato-latin-400-normal.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Lato'; font-weight: 700; src: url('../fonts/lato-latin-700-normal.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Lato'; font-weight: 900; src: url('../fonts/lato-latin-900-normal.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Open Sans'; font-weight: 400; src: url('../fonts/open-sans-latin-400-normal.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Open Sans'; font-weight: 600; src: url('../fonts/open-sans-latin-600-normal.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Open Sans'; font-weight: 700; src: url('../fonts/open-sans-latin-700-normal.woff2') format('woff2'); font-display: swap; }
.rcv-gross { text-transform: uppercase; color: var(--rcv-rot); }
.btn-sandstein { background: var(--rcv-sandstein); color: var(--rcv-anthrazit); font-weight: 700; border: 0; }
.btn-sandstein:hover { background: #dccdb3; color: var(--rcv-anthrazit); }
/* Status-Badges wie in Vuexy (badge bg-label-*), aber mit dunkler Schrift für Kontrast nach WCAG AA (Vuexys Orange und Rot sind
   auf hellem Grund zu blass). Gilt für beide Oberflächen, in Vuexy über dessen Regeln mit !important. */
.bg-label-success { background-color: #e6f4ea !important; color: #14602c !important; }
.bg-label-warning { background-color: #fff4de !important; color: #7a4d00 !important; }
.bg-label-danger { background-color: var(--rcv-rot-tint, #fdecec) !important; color: #8c0f14 !important; }
.bg-label-primary { background-color: var(--rcv-rot-tint, #fdecec) !important; color: #a31219 !important; }
.bg-label-info { background-color: #e0f3f6 !important; color: #0b5e6b !important; }
.bg-label-secondary { background-color: #eceae5 !important; color: #3f4247 !important; }
.kachel { padding: 1.1rem 1.25rem; }
.kennzahl { font-family: 'Lato', sans-serif; font-weight: 900; font-size: 2rem; line-height: 1; color: var(--rcv-rot); }
.kennzahl-label { color: var(--rcv-text-leise); font-size: .85rem; }
.balken { height: 12px; border-radius: 6px; background: #ece7dd; overflow: hidden; }
.balken > span { display: block; height: 100%; background: var(--rcv-rot); border-radius: 6px; }
.balken.ok > span { background: var(--rcv-erfolg); }
.hero { background: linear-gradient(135deg, var(--rcv-rot) 0%, #8c0f14 100%); color: #fff; border-radius: var(--rcv-radius); padding: 1.6rem 1.75rem; }
.hero h1 { color: #fff; text-transform: uppercase; margin: 0; font-size: 2rem; }
.hero p { margin: .3rem 0 0; color: #fff; opacity: .95; }
.termin-datum { width: 56px; min-width: 56px; text-align: center; background: var(--rcv-sandstein-hell); border: 1px solid var(--rcv-sandstein); border-radius: 12px; padding: .3rem 0; line-height: 1.1; }
.termin-datum .tag { font-family: 'Lato', sans-serif; font-weight: 900; font-size: 1.35rem; }
.termin-datum .mon { font-size: .7rem; text-transform: uppercase; font-weight: 700; color: var(--rcv-backstein); }
.warnband { background: #fff4de; border: 2px solid #c98a00; color: #5c3b00; border-radius: 12px; padding: .8rem 1rem; font-weight: 700; }
.demo-leiste { background: var(--rcv-sandstein); color: #3c2a10; font-size: .8rem; font-weight: 700; text-align: center; padding: .25rem; }
.login-seite { min-height: 100vh; background: linear-gradient(160deg, #1f1f23 0%, #3a1215 55%, #8c0f14 100%); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.login-karte { width: 100%; max-width: 520px; background: #fff; border-radius: 22px; padding: 1.8rem; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.login-karte h1 { color: var(--rcv-rot); text-transform: uppercase; font-size: 2rem; margin-bottom: .2rem; }
.rollenknopf { display: flex; align-items: center; gap: .75rem; width: 100%; text-align: left; padding: .65rem .85rem; border: 1px solid var(--rcv-linie); background: #fff; border-radius: 12px; font-weight: 700; color: var(--rcv-text); min-height: 48px; }
.rollenknopf:hover { border-color: var(--rcv-rot); background: var(--rcv-rot-tint); }
.rollenknopf small { display: block; font-weight: 400; color: var(--rcv-text-leise); }
.kalender-gitter { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.kalender-kopf { text-align: center; font-size: .75rem; font-weight: 700; color: var(--rcv-text-leise); text-transform: uppercase; padding: .3rem 0; }
.kalender-tag { min-height: 96px; background: #fff; border: 1px solid var(--rcv-linie); border-radius: 10px; padding: 4px; font-size: .75rem; overflow: hidden; }
.kalender-tag.anderer-monat { background: #f4f1ea; opacity: .7; }
.kalender-tag.heute { border: 2px solid var(--rcv-rot); }
.kalender-tag .nr { font-weight: 700; display: block; margin-bottom: 2px; }
.kalender-ereignis { display: block; text-decoration: none; color: #fff; border-radius: 6px; padding: 1px 5px; margin-bottom: 2px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 575.98px) {
  .kalender-tag { min-height: 58px; font-size: .65rem; }
  .kalender-ereignis { font-size: 0; padding: 0; height: 6px; display: inline-block; width: 6px; border-radius: 50%; margin-right: 2px; }
}
.kontingent .balken { height: 10px; }
.scanner-video { width: 100%; max-height: 60vh; border-radius: 16px; background: #000; object-fit: cover; }
.scan-ergebnis { border-radius: 16px; padding: 1.4rem; text-align: center; font-family: 'Lato', sans-serif; font-weight: 900; font-size: 1.8rem; text-transform: uppercase; }
.scan-ergebnis.gueltig { background: #e6f4ea; color: #14602c; border: 3px solid #1e7a3c; }
.scan-ergebnis.benutzt { background: #fff4de; color: #7a4d00; border: 3px solid #c98a00; }
.scan-ergebnis.ungueltig { background: #fdecec; color: #8c0f14; border: 3px solid #c4161f; }
.scan-ergebnis.tisch { background: #e6eefa; color: #123f73; border: 3px solid #1d5fa8; }
.ticketseite { max-width: 880px; margin: 0 auto; }
.btn-wallet { background: #000; color: #fff; border-radius: 12px; font-weight: 600; }
.btn-wallet:hover, .btn-wallet:focus { background: #222; color: #fff; }
.hero-chip { background: rgba(255,255,255,.18); border-radius: 99px; padding: .2rem .75rem; font-size: .82rem; display: inline-flex; gap: .4rem; align-items: center; }
.hero-link { color: #fff; font-family: 'Lato', sans-serif; font-weight: 900; text-decoration: none; }
.hero-link:hover { color: #fff; text-decoration: underline; }
.zeitleiste { background: #fff; border: 1px solid var(--rcv-linie); border-radius: var(--rcv-radius); overflow: hidden; }
.zeitleiste-kopf { display: flex; justify-content: space-between; align-items: center; padding: .75rem 1rem; border-bottom: 1px solid var(--rcv-linie); }
.zeitleiste-spur { list-style: none; margin: 0; padding: 1.4rem 1rem 1rem; display: flex; gap: 0; overflow-x: auto; position: relative; scroll-snap-type: x proximity; }
.zeitleiste-spur > li { position: relative; flex: 0 0 auto; width: 176px; padding-top: 1.5rem; scroll-snap-align: start; }
.zeitleiste-spur > li::before { content: ""; position: absolute; top: 7px; left: 0; right: 0; height: 3px; background: var(--rcv-sandstein); }
.zeitleiste-spur > li:first-child::before { left: 7px; background: var(--rcv-rot); }
.zl-punkt { position: absolute; top: 2px; left: 0; width: 13px; height: 13px; border-radius: 50%; background: #fff; border: 3px solid var(--rcv-backstein); z-index: 1; }
.zl-gross .zl-punkt { width: 19px; height: 19px; top: -1px; background: var(--rcv-rot); border-color: #fff; box-shadow: 0 0 0 3px var(--rcv-rot); }
.zl-heute .zl-punkt { background: var(--rcv-rot); border-color: var(--rcv-rot); }
.zl-text { display: flex; flex-direction: column; gap: 1px; padding-right: .75rem; color: inherit; text-decoration: none; font-size: .85rem; line-height: 1.25; }
a.zl-text:hover strong { color: var(--rcv-rot); }
.zl-datum { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--rcv-backstein); font-weight: 700; }
.zl-text small { color: var(--rcv-text-leise); }
.zl-abstand { font-size: .76rem; font-weight: 700; color: var(--rcv-text-leise); margin-top: 2px; }
.zl-gross strong { font-family: 'Lato', sans-serif; font-weight: 900; font-size: .95rem; }
.zl-gross .zl-abstand { color: var(--rcv-rot); }
@media (max-width: 575.98px) {
  .zeitleiste-spur > li { width: 152px; }
}
.kpi { display: block; background: #fff; border: 1px solid var(--rcv-linie); border-radius: 14px; padding: .9rem 1rem; height: 100%; color: var(--rcv-text); }
.kpi:hover { border-color: var(--rcv-rot); color: var(--rcv-text); }
.kpi small { color: var(--rcv-text-leise); display: block; }
.kpi-zahl { font-family: 'Lato', sans-serif; font-weight: 900; font-size: 1.6rem; line-height: 1.15; margin: .1rem 0 .25rem; }
.kpi-balken { height: 8px; margin: .2rem 0 .3rem; }
.kpi .kpi-zusatz { font-weight: 700; }
.kpi .kpi-gut { color: var(--rcv-erfolg); }
.kpi .kpi-warn { color: var(--rcv-warnung); }
.kpi .kpi-gold { color: var(--rcv-backstein); }
.einst-menue .list-group-item { border: 0; border-radius: 10px !important; padding: .45rem .75rem; font-size: .92rem; color: var(--rcv-anthrazit); }
.einst-menue .list-group-item.active { background: var(--rcv-rot-tint); color: var(--rcv-rot); font-weight: 600; }
.einst-kachel { display: flex; gap: .8rem; align-items: flex-start; text-decoration: none; color: inherit; height: 100%; }
.einst-kachel .einst-ikon { flex: none;  width: 38px; height: 38px; border-radius: 12px; background: var(--rcv-rot-tint); color: var(--rcv-rot); display: grid; place-items: center; font-size: 1.1rem; flex: none; }
.einst-kachel:hover strong { color: var(--rcv-rot); }
@media (max-width: 575.98px) {
  .table-stapel thead { display: none; }
  .table-stapel, .table-stapel tbody, .table-stapel tr, .table-stapel td { display: block; width: 100%; }
  .table-stapel tr { padding: .6rem .9rem; border-bottom: 1px solid var(--rcv-linie); }
  .table-stapel tr:last-child { border-bottom: 0; }
  .table-stapel td { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border: 0; padding: .2rem 0; text-align: right; background: transparent; }
  .table-stapel td::before { content: attr(data-label); flex: 0 0 34%; text-align: left; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--rcv-text-leise); }
  .table-stapel td[data-label=""]::before { display: none; }
  .table-stapel td[data-label=""] { justify-content: flex-start; }
  .table-stapel td > * { max-width: 100%; }
  .table-stapel td form:not(.dropdown-menu) { display: inline-block; }
}
@media (max-width: 575.98px) {
  .table-stapel td, .table-stapel td > * { min-width: 0; overflow-wrap: anywhere; }
}
/* Zellen mit mehreren Inhalten (Titel mit Kennzeichen, Text mit Knopf, Leermeldung mit Symbol) liefen am Handy nebeneinander und
   wurden Zeichen für Zeichen umbrochen. Dort steht die Beschriftung oben und der Inhalt fließt darunter. Einzelne Werte bleiben in einer Zeile. */
@media (max-width: 575.98px) {
  .table-stapel td:has(> :nth-child(2)) { display: block; text-align: left; }
  .table-stapel td:not([data-label=""]):has(> :nth-child(2))::before { display: block; flex: none; margin-bottom: .2rem; }
}
.rcv-zaehler { margin-left: auto; background: #fff; color: var(--rcv-rot-dunkel); font-family: 'Lato', sans-serif; font-weight: 900; font-size: .7rem; border-radius: 99px; padding: .05rem .5rem; line-height: 1.4; }
.kpi { border-radius: 22px; padding: 1rem 1.15rem; }
.kpi:hover { box-shadow: 0 1px 2px rgba(20,20,30,.06), 0 12px 28px rgba(20,20,30,.09); }
.kpi-zahl { font-size: 1.75rem; }
.hero { border-radius: 26px; box-shadow: var(--rcv-schatten); }
.balken, .balken > span { border-radius: 99px; }
.balken > span { background: linear-gradient(90deg, #c4161f, #ec2727); }
.balken.ok > span { background: var(--rcv-erfolg); }
.termin-datum { border: 0; border-radius: 16px; background: #f6f5f2; }
.termin-datum .mon { color: var(--rcv-text-leise); }
.demo-leiste { background: #fff; border-bottom: 1px solid var(--rcv-linie); color: #6b5314; }
.rcv-zaehler { background: var(--rcv-rot); color: #fff; }
.shop-kopf { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--rcv-linie); }
.shop-kopf .innen { max-width: 1120px; margin: 0 auto; padding: .55rem 1rem; display: flex; align-items: center; gap: 1rem; }
.shop-kopf .marke { font-family: 'Lato', sans-serif; font-weight: 900; line-height: 1.05; color: var(--rcv-anthrazit); text-decoration: none; font-size: .95rem; }
.shop-kopf nav { margin-left: auto; display: flex; gap: .25rem; flex-wrap: wrap; }
.shop-kopf nav a { text-decoration: none; color: var(--rcv-anthrazit); font-weight: 600; font-size: .9rem; padding: .35rem .7rem; border-radius: 99px; }
.shop-kopf nav a:hover, .shop-kopf nav a.aktiv { background: var(--rcv-rot-tint); color: var(--rcv-rot); }
.shop-hero { background: linear-gradient(150deg, #c4161f 0%, #8c0f14 70%, #5a0a0e 100%); color: #fff; }
.shop-hero .innen { max-width: 1120px; margin: 0 auto; padding: 2.4rem 1rem 2.8rem; }
.shop-hero .eyebrow { font: 900 .75rem 'Lato', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #ffd9a0; }
.shop-hero h1 { font: 900 clamp(2rem, 5vw, 3.2rem)/1.05 'Lato', sans-serif; margin: .4rem 0 .6rem; letter-spacing: -.02em; color: #fff; } /* Bootstraps Überschriftenfarbe wäre dunkel auf Rot */
.shop-hero p { max-width: 640px; opacity: .95; font-size: 1.05rem; margin: 0; }

/* Logo im Kopf der Ticketseite deutlich größer (Wappen liegt nur als 127 px vor, mehr wird unscharf) */
.shop-kopf img { height: 76px; }
.shop-kopf .marke { font-size: 1.15rem; }
@media (max-width: 575.98px) { .shop-kopf img { height: 50px; } .shop-kopf .innen { gap: .5rem; padding-inline: .75rem; } .shop-kopf nav { flex-wrap: nowrap; gap: 0; } .shop-kopf nav a { padding: .3rem .45rem; font-size: .8rem; } }

/* Ticketseite: roter Kopf mit Text links und Ticket im Plakatstil rechts (am Handy ohne Ticket), unten die Schloss-Silhouette */
.shop-hero { overflow: hidden; position: relative;
  background: radial-gradient(900px 420px at 88% -10%, rgba(255, 150, 90, .38), transparent 62%), radial-gradient(600px 300px at 0% 110%, rgba(0, 0, 0, .35), transparent 70%), linear-gradient(155deg, #c4161f 0%, #9e1119 52%, #5a0a0e 100%); }
.shop-hero .innen { position: relative; z-index: 2; padding-bottom: 5.5rem; }
.shop-hero h1 span { display: block; font-weight: 700; font-size: .56em; line-height: 1.15; color: #ffe6c7; letter-spacing: -.01em; margin-top: .4rem; }
.shop-hero .shop-hero-raster { display: grid; gap: 2.2rem; align-items: center; grid-template-columns: minmax(0, 1fr); }
.shop-hero-text { min-width: 0; }
@media (min-width: 992px) { .shop-hero .shop-hero-raster { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); padding-block: 3.4rem 8rem; } }
.shop-schloss { position: absolute; z-index: 1; left: 0; bottom: -2px; width: max(620px, 100%); max-width: 1300px; opacity: .13; pointer-events: none; }
@media (min-width: 992px) { .shop-schloss { left: 50%; transform: translateX(-50%); } }
/* Am Handy und Tablet die Silhouette ganz zeigen und unten so viel Platz lassen, wie sie hoch ist (Bild 900 x 250), damit sie nie hinter Knöpfen und Chips liegt */
@media (max-width: 991.98px) {
  .shop-hero .shop-schloss { width: min(100%, 620px); left: 50%; transform: translateX(-50%); }
  .shop-hero .innen { padding-bottom: calc(min(100vw, 620px) * .278 + 1.25rem); }
}
.shop-status { margin-top: 1.2rem; display: grid; gap: .5rem; max-width: 560px; padding: .8rem .95rem; border-radius: 16px; background: rgba(0, 0, 0, .22); border: 1px solid rgba(255, 255, 255, .22); font-size: .9rem; }
.shop-status > div { display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: center; }
.shop-status > div:first-child { flex-wrap: nowrap; }
.shop-live { width: 10px; height: 10px; flex: none; border-radius: 50%; background: #5be38f; animation: shop-puls 2s infinite; }
@keyframes shop-puls { 0% { box-shadow: 0 0 0 0 rgba(91, 227, 143, .7); } 70%, 100% { box-shadow: 0 0 0 9px rgba(91, 227, 143, 0); } }
.shop-rest { display: inline-block; font: 900 .85rem 'Lato', sans-serif; letter-spacing: .03em; font-variant-numeric: tabular-nums; border-radius: 8px; padding: .1rem .5rem; background: #fff; color: #8c0f14; }
.shop-hero-aktion { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.3rem; }
.shop-hero-aktion .btn-light { color: #8c0f14; font-weight: 700; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .45); }
/* Ticket im Plakatstil: am Handy und Tablet unter dem Text, etwas kleiner und ohne Scan-Hinweis (Wunsch Jonas 07.11.2026) */
.shop-hero-ticket { position: relative; width: 100%; max-width: 280px; margin: 0 auto; }
.shop-hero-ticket a { display: block; text-decoration: none; transform: rotate(-3deg); }
/* Tickets zum Blättern (Jonas 07.11.2026): Spur mit Scroll-Snap, Platz oben und unten für die schräge Karte */
.shop-hero-spur { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 1.2rem .9rem 1.6rem; margin: -1.2rem -.9rem -1rem; outline-offset: 4px; }
.shop-hero-spur::-webkit-scrollbar { display: none; }
.shop-hero-seite { flex: 0 0 100%; scroll-snap-align: center; padding: 0 .9rem; box-sizing: border-box; }
.shop-hero-blaettern { display: flex; justify-content: center; align-items: center; gap: .8rem; margin-top: .6rem; }
.shop-hero-punkte { display: inline-flex; gap: .4rem; }
.shop-hero-punkte i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .4); }
.shop-hero-punkte i.aktiv { background: #fff; }
.shop-hero-ticket .shop-ticket { box-shadow: 0 16px 28px -16px rgba(0, 0, 0, .6); }
.shop-hero-ticket p { display: none; }
@media (min-width: 992px) {
  .shop-hero-ticket { max-width: 330px; }
  .shop-hero-ticket p { display: block; }
  .shop-hero-ticket a { transform: rotate(-5deg); transition: transform .4s ease; }
  .shop-hero-ticket a:hover { transform: rotate(-2deg) translateY(-6px); }
  .shop-hero-ticket .shop-ticket { box-shadow: 0 30px 60px -18px rgba(0, 0, 0, .6); }
  .shop-hero-ticket p { margin: 1.2rem 0 0; text-align: center; font-size: .82rem; color: rgba(255, 255, 255, .85); }
}
@media (prefers-reduced-motion: reduce) { .shop-live { animation: none; } .shop-hero-ticket a { transition: none; } }
.shop-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; }
@media (max-width: 575.98px) { .shop-chips { gap: .4rem; } .shop-chips span, .shop-chips a { padding: .25rem .65rem; font-size: .8rem; } } /* am Handy umbrechen statt seitlich abgeschnitten weiterlaufen */
.shop-chips a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.shop-chips span, .shop-chips a { background: rgba(255,255,255,.15); border-radius: 99px; padding: .3rem .8rem; font-size: .85rem; display: inline-flex; gap: .4rem; align-items: center; }
.shop-inhalt { max-width: 1120px; margin: 0 auto; padding: 1.6rem 1rem 2rem; }
.shop-karte { background: #fff; border-radius: 22px; box-shadow: 0 1px 2px rgba(20,20,30,.05), 0 10px 26px rgba(20,20,30,.06); overflow: hidden; display: flex; flex-direction: column; height: 100%; transition: transform .15s, box-shadow .15s; }
.shop-karte:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(20,20,30,.06), 0 16px 34px rgba(20,20,30,.1); }
.shop-karte .kopf { display: flex; gap: 1rem; padding: 1.1rem 1.2rem .4rem; align-items: flex-start; }
.shop-datum { flex: none; width: 64px; border-radius: 16px; background: var(--rcv-rot-tint); color: var(--rcv-rot); text-align: center; padding: .45rem 0; }
.shop-datum .tag { font: 900 1.6rem/1 'Lato', sans-serif; }
.shop-datum .mon { font: 700 .72rem 'Lato', sans-serif; text-transform: uppercase; letter-spacing: .08em; }
.shop-karte h2 { font: 900 1.2rem/1.2 'Lato', sans-serif; margin: 0 0 .2rem; }
.shop-karte .meta { font-size: .86rem; color: var(--rcv-text-leise); }
.shop-karte .text { padding: 0 1.2rem; font-size: .9rem; color: #3b3b42; }
.shop-karte .fuss { margin-top: auto; padding: .9rem 1.2rem 1.1rem; display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; }
.shop-preis { font-size: .85rem; color: var(--rcv-text-leise); }
.shop-preis strong { font: 900 1.25rem 'Lato', sans-serif; color: var(--rcv-anthrazit); }
.shop-balken { height: 6px; border-radius: 99px; background: #eee9df; overflow: hidden; margin: .6rem 1.2rem 0; }
.shop-balken div { height: 100%; background: var(--rcv-rot); }
.shop-hinweis { font-size: .78rem; color: var(--rcv-text-leise); margin: .3rem 1.2rem 0; }
.shop-naechste { background: #fff; border-radius: 26px; box-shadow: 0 10px 30px rgba(20,20,30,.08); padding: 1.4rem; margin-top: -2.2rem; position: relative; display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; }
.shop-naechste .gross { font: 900 1.5rem/1.15 'Lato', sans-serif; }
.shop-box { background: #fff; border-radius: 22px; padding: 1.3rem; box-shadow: 0 1px 2px rgba(20,20,30,.05), 0 8px 22px rgba(20,20,30,.05); height: 100%; }
.shop-box .ikon { width: 46px; height: 46px; border-radius: 14px; background: var(--rcv-rot-tint); color: var(--rcv-rot); display: grid; place-items: center; font-size: 1.3rem; margin-bottom: .7rem; }
.shop-box h3 { font: 900 1.1rem 'Lato', sans-serif; margin: 0 0 .35rem; }
.shop-sicher { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; align-items: center; justify-content: center; color: var(--rcv-text-leise); font-size: .88rem; padding: 1.4rem 1rem; }
.shop-sicher i { color: var(--rcv-erfolg); margin-right: .35rem; }
.shop-summe { position: sticky; top: 80px; }
.shop-tabs .nav-link { border-radius: 99px; font-weight: 700; color: var(--rcv-anthrazit); }
.shop-tabs .nav-link.active { background: var(--rcv-rot); color: #fff; }
.shop-kategorie { display: flex; justify-content: space-between; align-items: center; gap: .8rem; padding: .9rem 1rem; border-bottom: 1px solid var(--rcv-linie); }
.shop-kategorie:last-child { border-bottom: 0; }
@media (max-width: 575px) {
  .shop-kopf .marke span { display: none; }
  .shop-kopf nav a { padding: .3rem .5rem; font-size: .82rem; }
  .shop-naechste { margin-top: -1.6rem; }
}
/* Ticketshop im Plakatstil: Karten je Veranstaltung, Countdown, Ablauf, Fragen. Motivfarben kommen als --p-* aus Domain/Plakat.php (style-Attribut der Karte). */
/* Sprunglink der Verwaltungsseiten (Layout teile/vuexy.php und teile/bootstrap.php): sichtbar nur mit Tastaturfokus, über der festen Kopfleiste */
.rcv-sprunglink { position: fixed; z-index: 2000; left: .75rem; top: .75rem; background: #fff; color: var(--rcv-rot, #c4161f); padding: .5rem .9rem; border-radius: 10px; font-weight: 700; box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .2); }
#inhalt:focus { outline: none; }
.shop-skip { position: absolute; z-index: 60; left: .5rem; top: .5rem; background: #fff; color: var(--rcv-rot); padding: .5rem .9rem; border-radius: 10px; font-weight: 700; }
.shop-abschnitt { font: 900 1.5rem/1.15 'Lato', sans-serif; margin: 0 0 1rem; scroll-margin-top: 90px; }
.countdown { margin-top: 1.4rem; padding: 1rem 1.1rem 1.1rem; border-radius: 18px; background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.3); max-width: 560px; }
.countdown-titel { font: 700 1rem/1.3 'Lato', sans-serif; margin: 0 0 .7rem !important; color: #fff; }
.countdown-titel strong { color: #ffd9a0; }
.countdown-zahlen { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.countdown-zahlen > div { background: #fff; color: var(--rcv-anthrazit); border-radius: 12px; text-align: center; padding: .5rem .2rem .4rem; }
.countdown-zahlen b { display: block; font: 900 clamp(1.7rem, 9vw, 2.6rem)/1 'Lato', sans-serif; font-variant-numeric: tabular-nums; color: var(--rcv-rot); }
.countdown-zahlen small { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--rcv-text-leise); }
.countdown-fertig .countdown-zahlen { display: none; }
.countdown-fertig .countdown-titel { font-size: 1.5rem; margin-bottom: .8rem !important; }
.countdown-weiter:not([hidden]) { display: inline-block; }

/* Plakatkarten: Blasen oben, schräges Band, Datum, Hinweise, Schloss-Silhouette, weißer Fuß. Bilder kommen über /tickets/motiv/{id}/{teil}. */
.plakat-raster { display: grid; gap: 1.2rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .plakat-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Höchstens drei große Karten nebeneinander, fünf wirkten überladen (Jonas 10.11.2026) */
@media (min-width: 1100px) { .plakat-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem; } }
.shop-inhalt.shop-breit { max-width: 1400px; }
.plakat { --p-grund: #f7f2e9; --p-text: #1f1f23; --p-band: #c4161f; --p-band-text: #fff; --p-akzent: #c4161f; --p-datum-grund: #fff; --p-datum-text: #1f1f23; --p-rand: #e8dcc8;
  position: relative; isolation: isolate; display: flex; flex-direction: column; background: var(--p-grund); color: var(--p-text); border-radius: 22px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(40, 20, 10, .06), 0 12px 32px -14px rgba(60, 20, 10, .28); transition: transform .22s ease, box-shadow .22s ease; }
.plakat::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 230px; z-index: -1; background: var(--p-deko, none) top center / cover;
  -webkit-mask-image: linear-gradient(#000 35%, transparent); mask-image: linear-gradient(#000 35%, transparent); }
.plakat-offen:hover, .plakat-offen:focus-within { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(40, 20, 10, .06), 0 22px 44px -16px rgba(60, 20, 10, .38); }
.plakat-flaeche { flex: 1; padding: 0 0 .2rem; }
.plakat-band, .shop-ticket .plakat-band { background: var(--p-band); color: var(--p-band-text); transform: rotate(-3.5deg); margin: 1.75rem -.6rem 0; padding: .75rem 1.6rem .8rem; box-shadow: 0 10px 18px -12px rgba(0, 0, 0, .6); }
.plakat-band h3, .plakat-band > strong { display: block; font: 900 1.3rem/1.05 'Lato', sans-serif; text-transform: uppercase; letter-spacing: .01em; margin: 0; color: var(--p-band-text); -webkit-hyphens: manual; hyphens: manual; overflow-wrap: anywhere; }
@media (min-width: 1100px) { .plakat-band h3 { font-size: 1.1rem; } }
.plakat-band span { display: block; margin-top: .25rem; font: 700 .64rem 'Lato', sans-serif; letter-spacing: .32em; text-transform: uppercase; opacity: .9; }
.plakat-datum { margin: 1.5rem 1.25rem 0; }
.plakat-datum small { display: block; font: 900 .7rem 'Lato', sans-serif; letter-spacing: .24em; text-transform: uppercase; color: var(--p-akzent); }
.plakat-datum strong { display: block; font: 900 2.25rem/1 'Lato', sans-serif; letter-spacing: -.02em; margin-top: .1rem; }
.plakat-zeiten { display: flex; flex-wrap: wrap; gap: .25rem .75rem; margin: .6rem 1.25rem 0; padding: 0; list-style: none; font: 700 .72rem 'Lato', sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.plakat-zeiten li { display: inline-flex; gap: .3rem; align-items: center; }
.plakat-info { list-style: none; margin: .9rem 1.25rem 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.plakat-info li { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .65rem; border-radius: 99px; background: rgba(255, 255, 255, .8); border: 1px solid rgba(0, 0, 0, .06); color: var(--rcv-anthrazit); font-size: .75rem; font-weight: 600; }
.plakat-klein { margin: .6rem 1.25rem 0; font-size: .78rem; }
.plakat-schloss { margin-top: auto; padding-top: .9rem; }
.plakat-schloss::after { content: ""; display: block; aspect-ratio: 900 / 250; background: var(--p-schloss, none) left bottom / 100% auto no-repeat; }
.plakat-fuss { display: grid; gap: .75rem; padding: .9rem 1.1rem 1.1rem; background: #fff; color: var(--rcv-anthrazit); }
.plakat-preis { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .4rem; }
.plakat-preis small { font-weight: 600; color: var(--rcv-text-leise); }
.plakat-preis strong { font: 900 1.9rem/1 'Lato', sans-serif; letter-spacing: -.02em; }
.plakat-preis em { flex-basis: 100%; font-style: normal; font-size: .8rem; color: var(--rcv-text-leise); }
.plakat-bald { display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: center; font-size: .85rem; font-weight: 600; }
.plakat-bald span:first-child { display: inline-flex; gap: .35rem; align-items: center; }
.plakat-bald .shop-rest { background: var(--rcv-rot-tint); color: var(--rcv-rot); }
.plakat .btn.plakat-gesperrt:disabled { opacity: 1; background: #fbf9f5; border: 1.5px dashed #cfc6b6; color: var(--rcv-text-leise); font-weight: 700; cursor: not-allowed; }
/* L-1 Testbestellung vor dem Start: dunkles Warnbraun statt Vuexy-Orange, Kontrast nach WCAG AA (Knopf und Hinweis auf der Auswahlseite) */
.plakat .btn.plakat-testbestellung { background: var(--rcv-warnung); border-color: var(--rcv-warnung); color: #fff; font-weight: 700; }
.plakat .btn.plakat-testbestellung:hover { background: #6e4800; border-color: #6e4800; color: #fff; }
.alert.shop-testhinweis, .alert.shop-testhinweis strong { color: var(--rcv-warnung); }
.plakat .btn:focus-visible, .plakat a:focus-visible { outline: 3px solid var(--rcv-anthrazit); outline-offset: 3px; }

/* Ticket im Plakatstil (Bestellseite und Vorschau im Kopf der Startseite) */
.shop-ticket { --p-grund: #f7f2e9; --p-text: #1f1f23; --p-band: #c4161f; --p-band-text: #fff; --p-akzent: #c4161f;
  position: relative; isolation: isolate; border-radius: 20px; overflow: hidden; background: var(--p-grund); color: var(--p-text); box-shadow: 0 1px 2px rgba(40, 20, 10, .06), 0 12px 32px -14px rgba(60, 20, 10, .28); }
.shop-ticket::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 170px; z-index: -1; background: var(--p-deko, none) top center / cover; }
.shop-ticket-art { display: inline-block; margin: .9rem 1rem 0; padding: .1rem .5rem; font: 900 .62rem 'Lato', sans-serif; letter-spacing: .22em; text-transform: uppercase; border-inline: 3px solid var(--p-text); background: rgba(255, 255, 255, .6); }
.shop-ticket .plakat-band { margin-top: .9rem; }
.shop-ticket .plakat-band > strong { font-size: 1.1rem; }
.shop-ticket .plakat-datum { margin-top: 1rem; }
.shop-ticket .plakat-datum strong { font-size: 1.75rem; }
.shop-ticket-abriss { position: relative; margin-top: .9rem; border-top: 2px dashed rgba(0, 0, 0, .15); }
.shop-ticket-abriss::before, .shop-ticket-abriss::after { content: ""; position: absolute; top: -11px; width: 20px; height: 20px; border-radius: 50%; background: var(--rcv-sandstein-hell, #f7f2e9); }
.shop-ticket-abriss::before { left: -10px; } .shop-ticket-abriss::after { right: -10px; }
.shop-hero-ticket .shop-ticket-abriss::before, .shop-hero-ticket .shop-ticket-abriss::after { background: #9e1119; }
.shop-ticket-unten { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: .9rem; align-items: center; padding: 1rem; background: #fff; color: var(--rcv-anthrazit); }
.shop-ticket-qr { position: relative; border: 2px solid #111; border-radius: 10px; overflow: hidden; background: #fff; }
.shop-ticket-qr img { display: block; width: 100%; height: auto; }
.shop-ticket-qr small { display: block; background: #111; color: #fff; text-align: center; font: 900 .55rem 'Lato', sans-serif; letter-spacing: .14em; text-transform: uppercase; padding: .2rem 0; }
.shop-ticket-leer { display: grid; place-items: center; aspect-ratio: 1; font-size: 2.6rem; color: #c9c3b8; }
.shop-ticket-zu { position: absolute; inset: 0; display: grid; place-items: center; padding: .5rem; text-align: center; font-size: .75rem; font-weight: 700; background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.shop-ticket dl { margin: 0; display: grid; gap: .4rem; }
.shop-ticket dt { font: 700 .6rem 'Lato', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--rcv-text-leise); }
.shop-ticket dd { margin: 0; font-weight: 700; font-size: .88rem; line-height: 1.2; overflow-wrap: anywhere; }

/* Startseite: Code, Schritte, Fragen */
.shop-codeband { display: grid; gap: .9rem; align-items: center; padding: 1.25rem; border-radius: 22px; background: linear-gradient(120deg, #fff 40%, #fdf0ea); border: 1px solid var(--rcv-linie); box-shadow: 0 1px 2px rgba(40, 20, 10, .06), 0 12px 32px -14px rgba(60, 20, 10, .2); }
.shop-codeband .ikon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--rcv-rot-tint); color: var(--rcv-rot); font-size: 1.4rem; }
.shop-codeband p { color: var(--rcv-text-leise); font-size: .9rem; }
@media (min-width: 900px) { .shop-codeband { grid-template-columns: auto minmax(0, 1fr) 360px; } }
.shop-codeform { display: flex; gap: .5rem; }
.shop-codeform .form-control { flex: 1; min-width: 0; }
.shop-codefeld { height: 48px; font: 700 1rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; }
.shop-codeform .btn { white-space: nowrap; }
.shop-schritte { display: grid; gap: .9rem; grid-template-columns: minmax(0, 1fr); list-style: none; margin: 0; padding: 0; }
@media (min-width: 768px) { .shop-schritte { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.shop-schritte li { position: relative; background: #fff; border-radius: 18px; padding: 1rem 1.1rem 1rem 4.1rem; box-shadow: 0 1px 2px rgba(20,20,30,.05), 0 8px 22px rgba(20,20,30,.05); }
.shop-schritte li > i { position: absolute; left: 1rem; top: 1rem; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 12px; background: var(--rcv-rot); color: #fff; font-size: 1.2rem; }
.shop-schritte strong { display: block; font: 900 1.05rem 'Lato', sans-serif; }
.shop-schritte span { font-size: .9rem; color: var(--rcv-text-leise); }
.shop-faq details { background: #fff; border-radius: 14px; margin-bottom: .6rem; box-shadow: 0 1px 2px rgba(20,20,30,.05), 0 6px 16px rgba(20,20,30,.04); }
.shop-faq summary { cursor: pointer; padding: .9rem 1.1rem; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.shop-faq summary::-webkit-details-marker { display: none; }
.shop-faq summary::after { content: ""; flex: none; width: .55rem; height: .55rem; border-right: 2.5px solid var(--rcv-rot); border-bottom: 2.5px solid var(--rcv-rot); transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.shop-faq details[open] summary::after { transform: rotate(225deg); }
.shop-faq summary:focus-visible { outline: 3px solid #1a5fb4; outline-offset: 2px; border-radius: 14px; }
.shop-faq .antwort { padding: 0 1.1rem 1rem; color: #3b3b42; }

/* Kaufseite: Kopf in der Bandfarbe, Schrittleiste, Blöcke, Zähler, Kasse, Leiste unten am Handy */
.shop-kaufkopf { position: relative; overflow: hidden; color: #fff; background: linear-gradient(160deg, var(--p-band, #c4161f) 0%, color-mix(in srgb, var(--p-band, #c4161f) 70%, #000) 100%); }
.shop-kaufkopf::before { content: ""; position: absolute; inset: 0; background: var(--p-deko, none) center / cover; opacity: .14; mix-blend-mode: screen; }
.shop-kaufkopf .innen { position: relative; z-index: 2; max-width: 1120px; margin: 0 auto; padding: 1.1rem 1rem 1.8rem; }
.shop-kaufkopf h1 { font: 900 clamp(1.75rem, 5vw, 2.9rem)/1.05 'Lato', sans-serif; letter-spacing: -.02em; margin: .7rem 0 0; color: #fff; }
.shop-kaufkopf .shop-chips span, .shop-kaufkopf .shop-chips a { background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22); }
.shop-kaufkopf .shop-schloss { opacity: .14; left: auto; right: -60px; width: min(820px, 140%); transform: none; }
.shop-zurueck { display: inline-flex; gap: .3rem; align-items: center; color: #fff; opacity: .9; text-decoration: none; font-size: .9rem; font-weight: 600; }
.shop-zurueck:hover { color: #fff; opacity: 1; }
.shop-schrittleiste { position: sticky; top: 0; z-index: 15; background: rgba(255, 255, 255, .95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rcv-linie); }
.shop-schrittleiste ol { max-width: 1120px; margin: 0 auto; padding: 0 .6rem; list-style: none; display: flex; overflow-x: auto; scrollbar-width: none; }
.shop-schrittleiste a { display: flex; gap: .45rem; align-items: center; white-space: nowrap; text-decoration: none; font-size: .86rem; font-weight: 600; color: var(--rcv-text-leise); padding: .75rem .5rem; border-bottom: 3px solid transparent; }
.shop-schrittleiste b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #efe6d6; font-size: .75rem; color: var(--rcv-anthrazit); }
.shop-schrittleiste a.an { color: var(--rcv-anthrazit); border-bottom-color: var(--rcv-rot); }
.shop-schrittleiste a.an b { background: var(--rcv-rot); color: #fff; }
.shop-kauf { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 992px) { .shop-kauf { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; } .shop-kasse { position: sticky; top: 64px; } }
.shop-kauf-haupt { display: grid; gap: 1rem; min-width: 0; grid-template-columns: minmax(0, 1fr); }
.shop-block { background: #fff; border-radius: 20px; padding: 1.1rem; box-shadow: 0 1px 2px rgba(40, 20, 10, .06), 0 12px 32px -14px rgba(60, 20, 10, .28); scroll-margin-top: 64px; }
.shop-block h2, .shop-block-kopf h2 { font: 900 1.2rem 'Lato', sans-serif; display: flex; gap: .6rem; align-items: center; margin: 0 0 .7rem; }
.shop-block h2 b, .shop-nr { width: 28px; height: 28px; flex: none; border-radius: 9px; background: var(--rcv-rot); color: #fff; display: inline-grid; place-items: center; font-size: .9rem; }
.shop-block h2 small { font: 600 .8rem 'Open Sans', sans-serif; color: var(--rcv-text-leise); }
.shop-block-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; align-items: center; }
.shop-block .shop-kategorie { padding: .8rem 0; border-bottom: 0; border-top: 1px solid #f0ebe2; }
.shop-block .shop-kategorie:first-of-type { border-top: 0; }
.shop-kategorie-frei, .shop-kategorie-recht { margin-inline: -1.1rem; padding-inline: 1.1rem !important; }
.shop-kategorie-frei { background: #e6f4ea; } .shop-kategorie-recht { background: var(--rcv-rot-tint); }
.shop-kategorie-aus { opacity: .7; }
.shop-kat-preis { font: 900 1rem 'Lato', sans-serif; color: var(--rcv-anthrazit); }
.shop-zaehler { display: inline-flex; align-items: center; border: 1.5px solid var(--rcv-linie); border-radius: 99px; padding: 3px; background: #fff; }
.shop-zaehler button { width: 38px; height: 38px; border-radius: 50%; border: 0; background: #f7f2e9; display: grid; place-items: center; font-size: 1.05rem; color: var(--rcv-anthrazit); cursor: pointer; }
.shop-zaehler button.plus { background: var(--rcv-rot); color: #fff; }
.shop-zaehler button:disabled { opacity: .35; cursor: default; }
.shop-zaehler button:focus-visible { outline: 3px solid #1a5fb4; outline-offset: 2px; }
.shop-zaehler output { width: 34px; text-align: center; font: 900 1.05rem 'Lato', sans-serif; }
.shop-klapp { margin-top: .4rem; padding-top: .7rem; border-top: 1px solid #f0ebe2; font-size: .9rem; }
.shop-klapp summary { cursor: pointer; color: var(--rcv-rot); font-weight: 600; display: inline-flex; gap: .35rem; align-items: center; list-style: none; }
.shop-klapp summary::-webkit-details-marker { display: none; }
.shop-kasse { background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 1px 2px rgba(40, 20, 10, .06), 0 12px 32px -14px rgba(60, 20, 10, .28); scroll-margin-top: 64px; }
.shop-kasse-kopf { display: flex; gap: .75rem; align-items: center; padding: .9rem 1.1rem; background: #f7f2e9; border-bottom: 1px solid rgba(0, 0, 0, .06); }
.shop-kasse-kopf strong { display: block; font: 900 1rem 'Lato', sans-serif; }
.shop-kasse-kopf span { font-size: .8rem; color: var(--rcv-text-leise); }
.shop-kasse-datum { width: 46px; height: 46px; flex: none; border-radius: 12px; background: var(--rcv-rot); color: #fff !important; display: grid; place-items: center; align-content: center; font: 900 1rem/1 'Lato', sans-serif !important; }
.shop-kasse-datum small { display: block; font-size: .56rem; letter-spacing: .1em; }
.shop-kasse-innen { padding: 1rem 1.1rem 1.1rem; }
.shop-kasse-innen h2 { display: flex; gap: .6rem; align-items: center; }
.shop-posten { list-style: none; margin: 0 0 .7rem; padding: 0; font-size: .9rem; }
.shop-posten li { display: flex; justify-content: space-between; gap: .6rem; padding: .3rem 0; }
.shop-posten li.leer { color: var(--rcv-text-leise); }
.shop-spende { display: flex; flex-wrap: wrap; gap: .4rem; }
.shop-spende button { border: 1.5px solid var(--rcv-linie); background: #fff; border-radius: 12px; padding: .45rem .8rem; font-weight: 700; cursor: pointer; }
.shop-spende button[aria-pressed="true"] { border-color: var(--rcv-rot); background: var(--rcv-rot-tint); color: var(--rcv-rot); }
.shop-gesamt { display: flex; justify-content: space-between; align-items: baseline; border-top: 1.5px dashed var(--rcv-linie); padding-top: .75rem; }
.shop-gesamt strong { font: 900 2rem 'Lato', sans-serif; letter-spacing: -.02em; }
.shop-reserviert { display: flex; gap: .5rem; align-items: center; margin: .75rem 0 .4rem; padding: .5rem .65rem; border-radius: 10px; background: #e6f4ea; color: var(--rcv-erfolg); font-size: .8rem; font-weight: 600; }
.shop-zahlarten { display: grid; gap: .6rem; }
.shop-zahlart { position: relative; display: flex; gap: .75rem; align-items: flex-start; padding: .85rem; border: 1.5px solid var(--rcv-linie); border-radius: 16px; background: #fff; cursor: pointer; margin: 0; }
.shop-zahlart input { position: absolute; opacity: 0; }
.shop-zahlart .ikon { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; background: #f7f2e9; font-size: 1.2rem; }
.shop-zahlart strong { display: block; }
.shop-zahlart small { display: block; font-size: .8rem; color: var(--rcv-text-leise); }
.shop-zahlart .haken { margin-left: auto; width: 22px; height: 22px; flex: none; border-radius: 50%; border: 2px solid var(--rcv-linie); display: grid; place-items: center; color: #fff; font-size: .8rem; }
.shop-zahlart:has(input:checked) { border-color: var(--rcv-rot); background: #fffafa; box-shadow: 0 0 0 3px rgba(196, 22, 31, .08); }
.shop-zahlart:has(input:checked) .ikon, .shop-zahlart:has(input:checked) .haken { background: var(--rcv-rot); border-color: var(--rcv-rot); color: #fff; }
.shop-zahlart:has(input:focus-visible) { outline: 3px solid #1a5fb4; outline-offset: 2px; }
.shop-leiste { position: sticky; bottom: 0; z-index: 20; display: flex; gap: .75rem; align-items: center; padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--rcv-linie); box-shadow: 0 -10px 30px -18px rgba(0, 0, 0, .35); }
.shop-leiste small { display: block; font-size: .78rem; color: var(--rcv-text-leise); line-height: 1.2; }
.shop-leiste strong { display: block; font: 900 1.35rem 'Lato', sans-serif; line-height: 1.1; }
.shop-leiste .btn { margin-left: auto; }
@media (min-width: 992px) { .shop-leiste { display: none; } }
/* Die Kasse ist im Blick: die Leiste gleitet nach unten weg (Handy) */
.shop-leiste { transition: transform .2s ease, opacity .2s ease; }
.shop-leiste.weg { transform: translateY(110%); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .shop-leiste { transition: none; } }
/* Öffentliche Seiten am Handy: kein Zoom durch schnelles Tippen auf Plus und Minus (iOS), Zoomen mit zwei Fingern bleibt möglich.
   Eingabefelder mit 16 px, sonst zoomt iOS beim Antippen hinein. */
.oeffentlich a, .oeffentlich button, .oeffentlich input, .oeffentlich select, .oeffentlich label, .oeffentlich textarea { touch-action: manipulation; }
@media (max-width: 991.98px) { .oeffentlich input, .oeffentlich select, .oeffentlich textarea { font-size: max(16px, 1rem); } }

/* Bestellseite: Kopf je Stand, Überweisung mit Kopierknöpfen und GiroCode, Tickets zum Wischen, Aktionen, Infos */
.shop-bestkopf { background: linear-gradient(180deg, #fff, #f7f2e9); border-bottom: 1px solid var(--rcv-linie); }
.shop-bestkopf .innen { max-width: 1120px; margin: 0 auto; padding: 1.75rem 1rem 1.6rem; display: flex; gap: 1rem; align-items: flex-start; }
.shop-bestkopf h1 { font: 700 .8rem 'Lato', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--rcv-text-leise); margin: .2rem 0 .3rem; }
.shop-bestkopf-titel { font: 900 clamp(1.45rem, 4.5vw, 2.2rem)/1.15 'Lato', sans-serif; letter-spacing: -.02em; margin: 0 0 .35rem; color: var(--rcv-anthrazit); }
@media (max-width: 575.98px) { .shop-bestkopf .innen { flex-direction: column; gap: .9rem; } .shop-bestkopf-ikon { width: 48px; height: 48px; font-size: 1.4rem; } }
.shop-bestkopf-titel strong { font-weight: 900; }
.shop-bestkopf p { color: var(--rcv-text-leise); margin-bottom: 0; }
.shop-bestkopf-ikon { width: 56px; height: 56px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 1.7rem; color: #fff; background: var(--rcv-erfolg); box-shadow: 0 0 0 8px #e6f4ea; animation: shop-auf .5s cubic-bezier(.2, 1.6, .4, 1); }
.shop-bestkopf-warten .shop-bestkopf-ikon { background: #c98a00; box-shadow: 0 0 0 8px #fff1d6; }
.shop-bestkopf-aus .shop-bestkopf-ikon { background: #77777c; box-shadow: 0 0 0 8px #efefef; }
.shop-bestkopf-fehler .shop-bestkopf-ikon { background: var(--rcv-rot); box-shadow: 0 0 0 8px var(--rcv-rot-tint); }
@keyframes shop-auf { from { transform: scale(.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .shop-bestkopf-ikon { animation: none; } }
.shop-etiketten { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }
.shop-etiketten span { display: inline-flex; gap: .35rem; align-items: center; font-size: .78rem; font-weight: 700; border-radius: 99px; padding: .2rem .65rem; background: #fff; border: 1px solid var(--rcv-linie); }
.shop-etiketten span.test { background: #fff3c4; border-color: #e0b84a; color: #5a4200; }
.shop-best { display: grid; gap: 1.4rem; }
.shop-bank { display: grid; gap: 1rem; padding: 1.1rem; border-radius: 20px; background: #fff; border-left: 5px solid #c98a00; box-shadow: 0 1px 2px rgba(40, 20, 10, .06), 0 12px 32px -14px rgba(60, 20, 10, .28); }
@media (min-width: 768px) { .shop-bank { grid-template-columns: minmax(0, 1fr) 210px; align-items: center; } }
.shop-bank h2 { font: 900 1.2rem 'Lato', sans-serif; }
.shop-bank dl { margin: .6rem 0 0; display: grid; gap: .5rem; }
.shop-bank dl div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .1rem .6rem; align-items: center; padding: .5rem .65rem; border-radius: 12px; background: #f7f2e9; }
.shop-bank dt { grid-column: 1 / -1; font-size: .75rem; font-weight: 400; color: var(--rcv-text-leise); }
.shop-bank dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.shop-bank button { border: 0; background: #fff; border-radius: 8px; padding: .35rem .5rem; color: var(--rcv-rot); font-size: .75rem; font-weight: 700; display: inline-flex; gap: .3rem; align-items: center; cursor: pointer; }
.shop-bank figure { margin: 0; text-align: center; font-size: .78rem; color: var(--rcv-text-leise); }
.shop-bank figure img { display: block; width: 170px; height: 170px; margin: 0 auto .4rem; }
.shop-tickets-kopf { display: flex; flex-wrap: wrap; gap: .3rem .8rem; align-items: baseline; }
.shop-tickets-kopf h2 { font: 900 1.4rem 'Lato', sans-serif; margin: 0; }
.shop-tickets-kopf span { color: var(--rcv-text-leise); font-size: .88rem; }
.shop-karussell { display: grid; grid-auto-flow: column; grid-auto-columns: 84%; gap: .9rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .4rem .1rem 1rem; scrollbar-width: thin; }
@media (min-width: 700px) { .shop-karussell { grid-auto-columns: 300px; } }
.shop-karussell-teil { scroll-snap-align: start; min-width: 0; }
.shop-karussell:focus-visible { outline: 3px solid #1a5fb4; outline-offset: 2px; border-radius: 12px; }
/* E-Tickets gestapelt (Jonas 07.11.2026): ein Ticket vorn, bis zu zwei angedeutet dahinter; ohne Skript alle untereinander */
/* Die Seite darf nie seitlich wandern: Rasterkinder dürfen schmaler werden als ihr Inhalt (Jonas 07.11.2026) */
.shop-best { overflow-x: clip; }
.shop-best > * { min-width: 0; }
.shop-stapel.ist-stapel .shop-stapel-karte > :not(.shop-stapel-blatt) { margin-right: 16px; }
.shop-stapel { max-width: 360px; margin: .4rem auto 1rem; }
/* Wischspur (Jonas 07.11.2026): Tickets nebeneinander, rasten einzeln ein; gewischt wird nur die Spur, nie die Seite */
.shop-stapel-buehne { position: relative; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; touch-action: pan-x pan-y; scrollbar-width: none; padding: .25rem 0 1.4rem; }
.shop-stapel-buehne::-webkit-scrollbar { display: none; }
.shop-stapel-karte { flex: 0 0 100%; min-width: 0; scroll-snap-align: center; scroll-snap-stop: always; }
/* Stapel: hinter dem vorderen Ticket liegen die nächsten Karten leicht versetzt und gedreht, die letzte Karte steht allein */
.shop-stapel-blatt { position: relative; isolation: isolate; }
.shop-stapel.ist-stapel .shop-stapel-blatt { margin: 0 16px 16px 0; }
.shop-stapel.ist-stapel .shop-stapel-blatt::before, .shop-stapel.ist-stapel .shop-stapel-blatt::after { content: ""; position: absolute; inset: 0; border-radius: 20px; border: 1px solid rgba(60, 20, 10, .1); box-shadow: 0 8px 18px -10px rgba(60, 20, 10, .45); }
.shop-stapel.ist-stapel .shop-stapel-blatt::before { z-index: -1; background: #fbf7f0; transform: translate(8px, 8px) rotate(1.8deg); }
.shop-stapel.ist-stapel .shop-stapel-blatt::after { z-index: -2; background: #f1ebe1; transform: translate(16px, 15px) rotate(3.6deg); }
.shop-stapel.ist-stapel [data-rest="1"] .shop-stapel-blatt::after, .shop-stapel.ist-stapel [data-rest="0"] .shop-stapel-blatt::after, .shop-stapel.ist-stapel [data-rest="0"] .shop-stapel-blatt::before { display: none; }
.shop-stapel .shop-ticket-qr { cursor: zoom-in; }
/* Großansicht für den Einlass: weißer Vollbildschirm, großer QR-Code, Wischen zum nächsten Ticket */
dialog.shop-einlass { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #fff; color: #1f1f23; overscroll-behavior: contain; }
dialog.shop-einlass[open] { display: flex; flex-direction: column; animation: einlass-auf .32s cubic-bezier(.2, .9, .25, 1); }
dialog.shop-einlass::backdrop { background: rgba(20, 10, 5, .45); }
html:has(dialog.shop-einlass[open]) { overflow: hidden; }
@keyframes einlass-auf { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.shop-einlass-kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: max(.9rem, env(safe-area-inset-top)) 1rem .5rem; }
.shop-einlass-stand { font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.shop-einlass-spur { flex: 1; min-height: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior: contain; scrollbar-width: none; }
.shop-einlass-spur::-webkit-scrollbar { display: none; }
.shop-einlass-blatt { flex: 0 0 100%; min-width: 0; scroll-snap-align: center; scroll-snap-stop: always; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; margin: 0; padding: .5rem 1.25rem; text-align: center; }
.shop-einlass-art { font: 900 .7rem 'Lato', sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--rcv-text-leise); }
.shop-einlass-was { font: 900 1.35rem/1.15 'Lato', sans-serif; letter-spacing: -.01em; }
.shop-einlass-qr { position: relative; width: min(84vw, 56vh, 420px); border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 0 0 2px #111; }
.shop-einlass-qr img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.shop-einlass-qr .shop-ticket-zu { font-size: 1.1rem; }
.shop-einlass-blatt figcaption { font-size: .95rem; color: var(--rcv-text-leise); font-variant-numeric: tabular-nums; }
.shop-einlass-tipp { margin: 0; padding: .4rem 1rem max(1rem, env(safe-area-inset-bottom)); text-align: center; font-size: .85rem; color: var(--rcv-text-leise); }
@media (prefers-reduced-motion: reduce) { dialog.shop-einlass[open] { animation: none; } }
.shop-wallet-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: .5rem; margin-top: .75rem; }
.shop-wallet-reihe .btn { white-space: nowrap; padding-inline: .5rem; }

.shop-stapel-wahl { display: flex; gap: .4rem; overflow-x: auto; padding: .2rem .1rem .7rem; scrollbar-width: none; -ms-overflow-style: none; }
.shop-stapel-wahl::-webkit-scrollbar { display: none; }
.shop-stapel-wahl button { flex: 0 0 auto; min-width: 2.75rem; height: 2.75rem; padding: 0 .7rem; border-radius: 999px; border: 1px solid rgba(0, 0, 0, .15); background: #fff; color: var(--rcv-text, #2f2b3d); font-weight: 700; }
.shop-stapel-wahl button[aria-selected="true"] { background: var(--rcv-rot, #c4161f); border-color: var(--rcv-rot, #c4161f); color: #fff; }
.shop-stapel-wahl button:focus-visible, .shop-stapel-nav button:focus-visible { outline: 3px solid #1a5fb4; outline-offset: 2px; }
.shop-stapel-nav { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: .6rem; font-weight: 700; }
.shop-aktionen { display: grid; gap: .6rem; }
@media (min-width: 700px) { .shop-aktionen { display: flex; flex-wrap: wrap; } }
.shop-infos { display: grid; gap: 1rem; }
@media (min-width: 768px) { .shop-infos { grid-template-columns: 1fr 1fr; } }
.shop-info { background: #fff; border-radius: 18px; padding: 1.1rem; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.shop-info h3 { font: 900 1.05rem 'Lato', sans-serif; display: flex; gap: .5rem; align-items: center; margin-bottom: .6rem; }
.shop-info h3 .icon-base { color: var(--rcv-rot); }
.ticket-bedingungen h2 { font: 900 1.15rem/1.3 'Lato', sans-serif; margin: 1.6rem 0 .5rem; }
.ticket-bedingungen p, .ticket-bedingungen li { line-height: 1.6; }

.saal { overflow-x: auto; padding-bottom: .3rem; }
.saal-buehne { background: var(--rcv-anthrazit); color: var(--rcv-weiss); text-align: center; border-radius: 8px; padding: .3rem; font-size: .8rem; margin-bottom: .6rem; min-width: max-content; }
.saal-reihe { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; min-width: max-content; }
.saal-name { width: 4.5rem; flex: none; font-size: .75rem; color: var(--rcv-text-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.saal-platz { position: relative; display: inline-block; cursor: pointer; margin: 0; }
.saal-platz input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.saal-platz span { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 7px 7px 4px 4px; border: 1.5px solid var(--rcv-erfolg); background: var(--rcv-weiss); font-size: .7rem; color: var(--rcv-text); }
.saal-platz.belegt { cursor: not-allowed; }
.saal-platz.belegt span { background: var(--rcv-linie); border-color: var(--rcv-linie); color: transparent; }
.saal-platz.gewaehlt span { background: var(--rcv-rot); border-color: var(--rcv-rot); color: var(--rcv-weiss); }
.saal-platz input:focus-visible + span { outline: 2px solid var(--rcv-anthrazit); outline-offset: 2px; }
.saal-platz input:disabled:not(:checked) + span { opacity: .55; }
.saal-platz.belegt input:disabled + span { opacity: 1; }
.saal-platz.mini span { width: 14px; height: 14px; display: inline-block; vertical-align: middle; }
.saal-reihen .saal-name { width: 1.6rem; }
@media (max-width: 575.98px) {
  .saal-platz span { width: 24px; height: 26px; font-size: .62rem; }
  .saal-reihe { gap: 3px; }
}
.text-uppercase::placeholder { text-transform: none; }
.demo-rundgang { background: var(--rcv-sandstein-hell); border: 1px solid var(--rcv-linie); border-radius: 12px; padding: .7rem .9rem; }
.demo-rundgang li { margin: .2rem 0; }
.ti { vertical-align: -.125em; flex-shrink: 0; }
/* Sortierbare Tabellen (class="datatable", oberflaeche.js) */
.rcv-sortierknopf { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: .3rem; }
.rcv-sortierknopf:focus-visible { outline: 3px solid #1a5fb4; outline-offset: 2px; border-radius: 4px; }
.rcv-sortierbar .rcv-sortierknopf::after { content: ""; inline-size: .5rem; block-size: .7rem; opacity: .35;
  background: linear-gradient(to bottom, currentColor 0 0) top / 100% 2px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M4 0l4 5H0zM4 12L0 7h8z'/%3E%3C/svg%3E") center / contain no-repeat; background: currentColor; }
.rcv-sortierbar[aria-sort=ascending] .rcv-sortierknopf::after { opacity: 1; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M4 0l4 5H0z'/%3E%3C/svg%3E"); }
.rcv-sortierbar[aria-sort=descending] .rcv-sortierknopf::after { opacity: 1; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M4 12L0 7h8z'/%3E%3C/svg%3E"); }
.rcv-tabelle-suche { max-inline-size: 280px; }
.rcv-tabelle-leiste { border-bottom: 1px solid var(--rcv-linie); }

/* Handy: lange deutsche Wörter in Überschriften trennen statt über den Rand zu ragen ("Teilnahmebedingungen"). */
h1, h2, h3, .rcv-gross { overflow-wrap: break-word; hyphens: auto; }
/* Absolut positionierte Inhalte (visually-hidden-Beschriftungen) bleiben im scrollbaren Tabellenrahmen und verbreitern nicht die Seite. */
.table-responsive { position: relative; }
/* Bereichsreiter als Auswahlknopf (Handy, Tablet): lange Listen scrollen im Menü. */
.bereichstabs-auswahl .dropdown-menu { max-height: 70vh; overflow-y: auto; }

/* Bestätigungsdialog im Stil des Vuexy-Dialogs (SweetAlert): großes Symbol, Frage, zentrierte Knöpfe (oberflaeche.js). */
.rcv-bestaetigen .modal-dialog { max-inline-size: 440px; }
.rcv-bestaetigen-symbol { display: flex; align-items: center; justify-content: center; inline-size: 4.5rem; block-size: 4.5rem; border-radius: 50%;
  background: var(--bs-warning-bg-subtle, #fff4de); color: var(--bs-warning, #ff9f43); }
.rcv-bestaetigen-symbol .icon-base { inline-size: 2.4rem; block-size: 2.4rem; font-size: 2.4rem; }
.rcv-bestaetigen-gefahr .rcv-bestaetigen-symbol { background: var(--bs-danger-bg-subtle, #fdecec); color: var(--bs-danger, #c4161f); }
.rcv-bestaetigen .rcv-frage { color: var(--bs-secondary-color, #6d6b77); }

/* Saalplan: Sitze und Tische (Sitzplan/Views/sitzplan.php) */
.sitz{display:inline-block;min-width:1.55rem;height:1.55rem;border-radius:5px;font-size:.62rem;line-height:1.55rem;text-align:center;color:#fff}.sitz.frei{background:#e6e3dc;color:#55555e}.sitz.belegt{background:var(--rcv-rot);cursor:grab}.sitz.gesperrt{background:#55555e}.sitz.dragover{outline:2px dashed var(--rcv-rot)}
.tischraster{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.7rem}.tisch{border:1px solid var(--rcv-linie);border-radius:16px;padding:.6rem .7rem}.tisch.reserviert{background:#fff8ea}.tischkopf{display:flex;justify-content:space-between;align-items:baseline}.tisch .badge{white-space:normal;text-align:left}.tischsitze{display:flex;flex-wrap:wrap;gap:3px;margin-top:.4rem}

/* Hallenplan */
.hallenraster { position: relative; width: 100%; aspect-ratio: var(--hb) / var(--hh); container-type: inline-size; background-color: var(--rcv-sandstein-hell, #f7f2e9); border: 1px solid var(--rcv-linie, #d9d6cf); border-radius: 10px; overflow: hidden; touch-action: none; user-select: none;
  background-image: linear-gradient(to right, rgba(31, 31, 35, .07) 1px, transparent 1px), linear-gradient(to bottom, rgba(31, 31, 35, .07) 1px, transparent 1px); background-size: calc(100% / var(--hb)) calc(100% / var(--hh)); }
.hallenraster > * { position: absolute; font-size: calc(100cqw / var(--hb) * .46); }
.hflaeche { display: flex; align-items: center; justify-content: center; text-align: center; border-radius: 6px; font-weight: 700; line-height: 1.1; cursor: grab; color: var(--rcv-anthrazit, #1f1f23); border: 1px solid rgba(31, 31, 35, .35); background: #e6e3dc; overflow: hidden; }
.hflaeche small { display: block; font-weight: 400; font-size: .75em; }
.hflaeche.art-buehne { background: var(--rcv-anthrazit-2, #35383c); color: #fff; }
.hflaeche.art-reihen { background: repeating-linear-gradient(to bottom, #efe9dc 0, #efe9dc 5px, #e3dac6 5px, #e3dac6 6px); }
.hflaeche.art-theke { background: var(--rcv-sandstein, #e8dcc8); }
.hflaeche.art-eingang { background: #1e7a3c; color: #fff; }
.hflaeche.art-text { background: transparent; border: 1px dashed rgba(31, 31, 35, .35); font-weight: 400; }
.hflaeche.art-technik { background: #3d5a80; color: #fff; }
.hflaeche .hgriff { position: absolute; right: 0; bottom: 0; width: 14px; height: 14px; cursor: nwse-resize; background: linear-gradient(135deg, transparent 50%, rgba(11, 107, 203, .9) 50%); border-bottom-right-radius: 6px; touch-action: none; }
.htisch { display: flex; align-items: center; justify-content: center; padding: 0; border-radius: 50%; font-weight: 700; line-height: 1; cursor: grab; border: 2px solid var(--rcv-rot, #c4161f); background: #fff; color: var(--rcv-rot, #c4161f); }
.htisch.kreis-frei { border-color: var(--rcv-anthrazit-2, #35383c); color: var(--rcv-anthrazit-2, #35383c); }
.htisch.status-reserviert { background: var(--rcv-rot, #c4161f); color: #fff; }
.htisch.kreis-frei.status-reserviert { background: var(--rcv-anthrazit-2, #35383c); }
.htisch.status-angekommen { background: #1e7a3c; border-color: #1e7a3c; color: #fff; }
.htisch.status-abgelaufen { background: repeating-linear-gradient(45deg, #fff3cd 0, #fff3cd 3px, #f5d36b 3px, #f5d36b 6px); border-color: #b7791f; color: #5c3b00; }
.htisch.ueber { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #d97706; }
.htisch.waehlt, .hflaeche.waehlt { outline: 3px solid #0b6bcb; outline-offset: 1px; z-index: 3; }
.htisch:focus-visible, .hflaeche:focus-visible { outline: 3px solid #0b6bcb; outline-offset: 1px; z-index: 3; }
.hdrag.zieht { opacity: .85; cursor: grabbing; z-index: 5; box-shadow: 0 6px 14px rgba(0, 0, 0, .3); transition: none; }
.htisch.dragover { outline: 3px dashed #0b6bcb; outline-offset: 2px; transform: scale(1.25); z-index: 4; }
.tischinfo { margin-top: .75rem; padding: .6rem .8rem; border: 1px solid var(--rcv-linie, #d9d6cf); border-radius: 12px; background: #fff; }
.hallenlegende .hl { display: inline-block; width: .9rem; height: .9rem; border-radius: 50%; vertical-align: -2px; border: 2px solid var(--rcv-rot, #c4161f); background: #fff; }
.hallenlegende .hl.frei { border-color: var(--rcv-anthrazit-2, #35383c); }
.hallenlegende .hl.reserviert { background: var(--rcv-rot, #c4161f); }
.hallenlegende .hl.angekommen { background: #1e7a3c; border-color: #1e7a3c; }
.hallenlegende .hl.abgelaufen { background: #f5d36b; border-color: #b7791f; }
.hallenlegende .hl.ueber { border-color: #d97706; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #d97706; }
.hallengaeste { max-height: 34rem; overflow: auto; }
.hallengast { padding: .55rem .7rem; margin-bottom: .5rem; border: 1px solid var(--rcv-linie, #d9d6cf); border-radius: 12px; background: #fff; cursor: grab; }
.hallengast.status-ohne { border-left: 4px solid var(--rcv-rot, #c4161f); }
.hallengast.status-zu_wenig { border-left: 4px solid #d97706; }
.hallengast.zieht { opacity: .5; }
.hallentische tr.status-abgelaufen td { background: #fff8e1; }
.hallentische tr.status-angekommen td { background: #edf7f0; }
.hallentische .form-select-sm { min-width: 7rem; }
/* Auslastung (Einstellungen, Auslastung): Säulendiagramme als SVG vom Server, Tooltip je Säule über <title> */
.verlauf { position: relative; }
.verlauf + .verlauf { margin-top: 1rem; }
.verlauf-max { position: absolute; top: 0; left: 0; }
.verlauf-svg { display: block; width: 100%; height: 9rem; padding-top: 1.25rem; border-bottom: 1px solid var(--rcv-linie, #ecebe6); }
.verlauf-svg .verlauf-treffer { fill: transparent; }
.verlauf-svg .verlauf-treffer:hover { fill: rgba(31, 31, 35, .06); }
.verlauf-rot { fill: var(--rcv-rot, #c4161f); background: var(--rcv-rot, #c4161f); }
.verlauf-dunkel { fill: var(--rcv-anthrazit-2, #35383c); background: var(--rcv-anthrazit-2, #35383c); }
.verlauf-grau { fill: #b9b6ae; background: #b9b6ae; }
.verlauf-hell { fill: #e3c9c4; background: #e3c9c4; }
.verlauf-gruen { fill: var(--rcv-erfolg, #1e7a3c); background: var(--rcv-erfolg, #1e7a3c); }
.verlauf-punkt { display: inline-block; width: .7rem; height: .7rem; border-radius: 3px; margin-right: .35rem; vertical-align: -1px; }

/* Warteraum und Zugangscode des Ticketshops (Tickets\Views\warteraum.php, zugang.php) */
.warteraum .warteraum-position { font-size: 1.25rem; }
.warteraum .warteraum-balken { height: .5rem; border-radius: 99px; }

/* Zahnrad: auf Einstellungsseiten (auch Konfigurationsseiten der Module) hervorgehoben, im Hauptmenü ist dort kein Arbeitsbereich aktiv. */
.rcv-zahnrad-aktiv { background: var(--rcv-rosa, rgba(196, 22, 31, .1)) !important; color: var(--rcv-rot) !important; }
.rcv-zahnrad-aktiv .ti { color: var(--rcv-rot) !important; }

/* Auslastung: Adressspalte der langsamsten Seiten bleibt lesbar, die Tabelle scrollt nur in ihrer Karte */
.spalte-adresse { min-width: 9rem; }

/* Handy-Karten: Eine Zelle ohne Beschriftung (Knopfreihe, zum Beispiel Freigeben und Ablehnen mit Eingabefeld) bricht um und rechtsbündig,
   statt über den Kartenrand zu laufen; text-nowrap gilt in der Karte nicht */
@media (max-width: 575.98px) {
  .table-stapel td.text-nowrap { white-space: normal !important; }
  .table-stapel td[data-label=""] { flex-wrap: wrap; justify-content: flex-end; gap: .25rem; }
  .table-stapel td > form { max-width: 100%; }
}

/* =====================================================================================================================================
   Einheitliches Bediensystem (Beschluss Adrian 06.11.2026, nach den Gestaltungsregeln von Apple): Knöpfe, Menüs, Untermenüs, Reiter,
   Felder und Dialoge folgen überall denselben Werten. Grundsätze: Rückmeldung schon beim Drücken, Ziele ab 44 px auf Touch-Geräten,
   Bewegung kurz, ohne Überschwingen und jederzeit unterbrechbar (nur transform und opacity), Menüs öffnen von ihrem Auslöser aus,
   durchscheinende Leisten über dem Inhalt. "Bewegung reduzieren", "Transparenz reduzieren" und "Mehr Kontrast" werden beachtet.
   ===================================================================================================================================== */
:root {
  --rcv-ziel: 40px;                                   /* Mindesthöhe eines Bedienelements mit Maus */
  --rcv-radius-knopf: 10px;
  --rcv-radius-menue: 14px;
  --rcv-radius-eintrag: 8px;
  --rcv-druck: .97;                                   /* Knopf beim Drücken */
  --rcv-kurve: cubic-bezier(.32, .72, 0, 1);          /* weich, ohne Überschwingen (kritisch gedämpft) */
  --rcv-dauer-druck: 100ms;
  --rcv-dauer: 220ms;
  --rcv-material: rgba(255, 255, 255, .86);            /* Leisten (Kopf, Tab-Leiste) */
  --rcv-material-menue: rgba(255, 255, 255, .97);      /* Menüs liegen über Text: fast deckend, sonst leidet die Lesbarkeit */
  --rcv-material-rand: rgba(255, 255, 255, .55);
}
@media (pointer: coarse) { :root { --rcv-ziel: 44px; } }

/* Kein Doppeltipp-Zoom, kein grauer Tippschleier, Tippen reagiert sofort */
a, button, input, select, textarea, label, summary, [role="button"], .btn, .nav-link, .menu-link, .dropdown-item { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
/* Eingabefelder ab 16 px auf kleinen Bildschirmen, sonst zoomt iOS beim Antippen hinein */
@media (max-width: 991.98px) { input.form-control, select.form-select, textarea.form-control, .form-control, .form-select, .form-control-sm, .form-select-sm, .input-group-sm > .form-control, .input-group-sm > .form-select, .input-group-lg > .form-control { font-size: max(16px, 1rem); } }

/* Knöpfe: eine Form, eine Höhe, Rückmeldung beim Drücken */
.btn { border-radius: var(--rcv-radius-knopf); font-weight: 600; min-height: var(--rcv-ziel); display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  transition: transform var(--rcv-dauer-druck) ease-out, background-color var(--rcv-dauer) var(--rcv-kurve), border-color var(--rcv-dauer) var(--rcv-kurve), color var(--rcv-dauer) var(--rcv-kurve), box-shadow var(--rcv-dauer) var(--rcv-kurve); }
.btn:active:not(:disabled):not(.disabled) { transform: scale(var(--rcv-druck)); }
.btn-sm { --rcv-ziel: 32px; border-radius: var(--rcv-radius-eintrag); }
@media (pointer: coarse) { .btn-sm { --rcv-ziel: 40px; } }
/* Designprüfung Muster 4 (P9): Am Handy sind Knöpfe in Tabellen und Listen mindestens 44 px hoch, auch die kleinen */
@media (max-width: 767.98px) { .table .btn, .list-group .btn, .table .btn-sm, .list-group .btn-sm { --rcv-ziel: 44px; } }
.btn-lg { --rcv-ziel: 52px; border-radius: 12px; }
.btn.btn-icon { min-width: var(--rcv-ziel); padding-inline: 0; }
.btn.w-100, .d-grid > .btn { display: flex; }
.btn i.icon-base { flex: none; }

/* Felder: gleiche Höhe und Rundung wie die Knöpfe */
.form-control, .form-select { border-radius: var(--rcv-radius-knopf); min-height: var(--rcv-ziel); }
textarea.form-control { min-height: calc(var(--rcv-ziel) * 2); }
.form-control-sm, .form-select-sm { --rcv-ziel: 32px; border-radius: var(--rcv-radius-eintrag); }
@media (pointer: coarse) { .form-control-sm, .form-select-sm { --rcv-ziel: 40px; } }
.form-check-input { inline-size: 1.15rem; block-size: 1.15rem; }
@media (pointer: coarse) { .form-check { min-height: 32px; } .form-check-input { inline-size: 1.3rem; block-size: 1.3rem; } }

/* Menüs (Dropdowns, Kopfmenüs, Zeilenmenüs): Material, öffnen vom Auslöser aus, Einträge gleich hoch */
.dropdown-menu { border: 0; border-radius: var(--rcv-radius-menue); padding: .35rem; box-shadow: 0 12px 32px rgba(20, 20, 30, .16), 0 1px 0 var(--rcv-material-rand) inset;
  background: var(--rcv-material-menue); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); }
.dropdown-menu.show { animation: rcv-menue-auf var(--rcv-dauer) var(--rcv-kurve); /* ohne fill-mode: läuft die Animation nicht, ist das Menü trotzdem sichtbar */ transform-origin: top var(--rcv-ursprung, left); }
.dropdown-menu-end.show, .dropdown-menu[data-bs-popper][style*="right"] { --rcv-ursprung: right; }
@keyframes rcv-menue-auf { from { opacity: 0; transform: scale(.96) translateY(-4px); } to { opacity: 1; transform: none; } }
.dropdown-item { border-radius: var(--rcv-radius-eintrag); min-height: var(--rcv-ziel); display: flex; align-items: center; gap: .5rem; padding-block: .35rem; font-weight: 500;
  transition: background-color var(--rcv-dauer-druck) ease-out, color var(--rcv-dauer-druck) ease-out; }
.dropdown-item:active { background: var(--rcv-rot-tint, #fdecec); color: var(--rcv-rot, #c4161f); }
.dropdown-divider { margin: .3rem .25rem; }
.dropdown-header { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }

/* Reiter und Pillen: eine Höhe, eine Form, Druck sichtbar */
.nav-pills .nav-link, .bereichstabs .nav-link { border-radius: 999px; min-height: var(--rcv-ziel); display: inline-flex; align-items: center; gap: .35rem;
  transition: transform var(--rcv-dauer-druck) ease-out, background-color var(--rcv-dauer) var(--rcv-kurve), color var(--rcv-dauer) var(--rcv-kurve); }
.nav-pills .nav-link:active, .bereichstabs .nav-link:active { transform: scale(var(--rcv-druck)); }
.nav-tabs .nav-link { min-height: var(--rcv-ziel); display: inline-flex; align-items: center; }

/* Seitenmenü und Untermenüs: gleiche Höhe und Rundung wie die übrigen Einträge */
.layout-menu .menu-inner > .menu-item > .menu-link, .layout-menu .menu-sub .menu-link { border-radius: var(--rcv-radius-knopf); min-height: var(--rcv-ziel);
  transition: background-color var(--rcv-dauer-druck) ease-out, color var(--rcv-dauer-druck) ease-out, transform var(--rcv-dauer-druck) ease-out; }
.layout-menu .menu-link:active { transform: scale(.985); }

/* Kopfleiste und Tab-Leiste am Handy als Material über dem Inhalt */
.layout-navbar.navbar-detached, .layout-navbar .navbar-nav-right { -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); }
.layout-navbar.navbar-detached { background: var(--rcv-material); }
@media (max-width: 991.98px) {
  .rcv-tabs { background: var(--rcv-material) !important; -webkit-backdrop-filter: blur(20px) saturate(180%) !important; backdrop-filter: blur(20px) saturate(180%) !important;
    box-shadow: 0 -1px 0 rgba(20, 20, 30, .08) !important; }
  .rcv-tabs a { min-height: 52px; transition: transform var(--rcv-dauer-druck) ease-out, background-color var(--rcv-dauer) var(--rcv-kurve), color var(--rcv-dauer) var(--rcv-kurve); }
  .rcv-tabs a:active { transform: scale(.94); }
  /* Dialoge am Handy als Blatt von unten, schließen auf demselben Weg */
  .modal-dialog:not(.modal-dialog-centered):not(.modal-fullscreen) { margin: auto 0 0; max-width: none; min-height: 100%; display: flex; align-items: flex-end; }
  .modal-dialog:not(.modal-dialog-centered):not(.modal-fullscreen) .modal-content { border-radius: 20px 20px 0 0; padding-bottom: env(safe-area-inset-bottom); }
  .modal.fade .modal-dialog:not(.modal-dialog-centered) { transform: translateY(100%); transition: transform 300ms var(--rcv-kurve); }
  .modal.show .modal-dialog:not(.modal-dialog-centered) { transform: none; }
}
.modal-content { border: 0; border-radius: 18px; }

/* Karten und Tabellenzeilen auf Touch: Zeilenaktionen gut treffbar */
@media (pointer: coarse) {
  .table td .btn, .table td .dropdown-toggle { min-height: 40px; min-width: 40px; }
  .list-group-item-action { min-height: 48px; }
}

/* Überschriften: große Schrift etwas enger gesetzt, Fließtext unverändert */
h1, .h1 { letter-spacing: -.01em; }

/* Barrierefreiheit: weniger Bewegung, weniger Transparenz, mehr Kontrast */
@media (prefers-reduced-motion: reduce) {
  .btn, .nav-link, .menu-link, .dropdown-item, .rcv-tabs a { transition: background-color 120ms ease, color 120ms ease !important; }
  .btn:active, .nav-pills .nav-link:active, .bereichstabs .nav-link:active, .layout-menu .menu-link:active, .rcv-tabs a:active { transform: none !important; }
  .dropdown-menu.show { animation: rcv-menue-blende 120ms ease; }
  .modal.fade .modal-dialog { transform: none !important; transition: opacity 150ms ease !important; }
  /* Designprüfung Muster 6 (P9): auch das Vuexy-Gerüst (Seitenmenü, Aufklapper, Abdeckung) ohne Gleiten */
  .layout-menu, .layout-menu .menu-sub, .layout-menu .menu-toggle::after, .layout-overlay, .layout-page, .layout-navbar { transition: none !important; animation: none !important; }
}
@keyframes rcv-menue-blende { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-transparency: reduce) {
  .dropdown-menu, .layout-navbar.navbar-detached, .rcv-tabs { background: #fff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
@media (prefers-contrast: more) {
  .dropdown-menu, .rcv-tabs, .modal-content { border: 1px solid #1f1f23 !important; }
  .btn-label-secondary, .btn-outline-secondary { border: 1px solid currentColor; }
}

/* Aktionsleiste einer Seite auf dem Handy: Knöpfe füllen die Zeile gleichmäßig statt ungleich breit rechtsbündig (06.11.2026) */
@media (max-width: 575.98px) {
  main > .d-flex.flex-wrap.justify-content-end > .btn,
  main > .d-flex.flex-wrap.justify-content-end > form,
  main > .d-flex.flex-wrap.justify-content-end > .dropdown { flex: 1 1 auto; }
  main > .d-flex.flex-wrap.justify-content-end > form > .btn,
  main > .d-flex.flex-wrap.justify-content-end > .dropdown > .btn { inline-size: 100%; }
}

/* Zahlarten mit Logo im Kaufschritt (Jonas 07.11.2026), Logos lokal unter assets/img/zahlarten */
.shop-zahllogos { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: .5rem; }
.shop-zahllogos img { width: 2.5rem; height: auto; border-radius: .25rem; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); background: #fff; }
.shop-zahllogo-text { display: inline-flex; align-items: center; height: 1.875rem; padding: 0 .5rem; border-radius: .25rem; font-size: .75rem; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); }
/* Freikarten: Filter nach Art und Suche über den Tabellen (Jonas 07.11.2026) */
.freikarten-filter .form-select { width: auto; min-width: 11rem; }
.freikarten-filter .form-control { flex: 1 1 14rem; max-width: 22rem; }
/* Zahl offener Vorgänge am Bereichsreiter (Jonas 07.11.2026): rot, am aktiven Reiter weiß */
.rcv-reiter-zahl { background: var(--rcv-rot); color: #fff; font-size: .7rem; line-height: 1.2; }
.bereichstabs .nav-link.active .rcv-reiter-zahl { background: #fff; color: var(--rcv-rot-dunkel); }

/* Ticketseite am Handy: Tippflächen ab 44 px, Druckgefühl (Apple-Design, 07.11.2026) */
.shop-kopf nav a { min-height: 44px; display: inline-flex; align-items: center; }
.shop-zaehler button { width: 44px; height: 44px; transition: transform .1s ease-out; touch-action: manipulation; }
.shop-zaehler button:not(:disabled):active { transform: scale(.92); }
.shop-zurueck, .shop-klapp summary { min-height: 44px; }
footer a.text-secondary { display: inline-block; padding: .7rem .25rem; }
.shop-best .btn, .shop-kauf .btn, dialog.shop-einlass button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.shop-best .btn:active, .shop-kauf .btn:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) { .shop-zaehler button:active, .shop-best .btn:active, .shop-kauf .btn:active { transform: none; } }
/* Mitglied werden: drei Schritte wie die Papier-Erklärung */
.antrag-schritte li { display: flex; align-items: center; justify-content: center; padding: .45rem .5rem; border-radius: .5rem; background: var(--bs-tertiary-bg, #f3f3f3); color: var(--bs-secondary-color, #555); font-size: .9rem; }
.antrag-schritte li.aktiv { background: var(--rcv-rot); color: #fff; font-weight: 600; }
.antrag-schritte li.erledigt { background: var(--rcv-rot-tint, #fdecec); color: #a31219; }
.antrag-schritt-nr { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1.5px solid currentColor; font-weight: 700; font-size: .8rem; }
.antrag-schritt legend:focus { outline: none; }
.antrag-hinweise dt { font-weight: 600; margin-top: .5rem; }
.antrag-hinweise dd { margin-bottom: 0; }