/* Shared phone layouts. Keep desktop styling in the area-specific stylesheets. */
:root { --phone-gutter: 20px; }
html { -webkit-text-size-adjust: 100%; scroll-padding-block: 24px; }
button, input, select, textarea { touch-action: manipulation; }
@media (max-width: 760px) {
  .fy-public { overflow-wrap: anywhere; }
  .fy-public :is(input:not([type=checkbox]):not([type=radio]), select, textarea),
  .modal-body :is(input:not([type=checkbox]):not([type=radio]), select, textarea) { font-size: 16px; max-width: 100%; min-width: 0; }
  .fy-public :is(button, .fy-button, .ad-button, .og-button, .og-icon-button) { min-height: 44px; }
  .fy-public button:active, .fy-public .fy-button:active, .fy-public .og-button:active { transform: none; filter: brightness(.94); }
  .fy-public :is(.fy-button, .ad-button, .og-button):hover { transform: none; }
  .fy-public :is(.ad-button, .og-button, .fy-button) { font-size: 14px; }
  .fy-public :is(h1, h2, h3) { text-wrap: balance; }
  .fy-header, .og-header { padding-top: env(safe-area-inset-top, 0px); }
  .fy-nav, .og-header-inner, .og-main, .ad-main, .pe-main {
    padding-left: max(var(--phone-gutter), env(safe-area-inset-left, 0px));
    padding-right: max(var(--phone-gutter), env(safe-area-inset-right, 0px));
  }
  /* Public website: a clear header, generous copy and vertically stacked CTAs. */
  .fy-utility { padding: 4px var(--phone-gutter); font-size: 12px; }
  .fy-utility a { min-height: 36px; }
  .fy-nav { gap: 12px; padding-block: 18px; }
  .fy-nav .fy-brand { font-size: 22px; }
  .fy-nav .fy-brand-mark { font-size: 45px; }
  .fy-nav .fy-brand small { font-size: 6px; letter-spacing: 1.2px; }
  .fy-login { font-size: 12px!important; min-height: 44px; padding: 10px 12px; gap: 8px; }
  .fy-login>.icon:last-child { display: none; }
  .fy-menu { width: 44px; min-width: 44px; cursor: pointer; }
  .fy-links { padding-top: 12px; }
  .fy-links a { font-size: 16px; min-height: 48px; padding: 12px; border-radius: 6px; }
  .fy-links a:active { background: #ffffff12; }
  .fy-hero { height: auto; min-height: 0; max-height: none; }
  .fy-hero-content { padding: 52px var(--phone-gutter) 40px; }
  .fy-hero h1 { font-size: clamp(42px, 11.5vw, 72px); letter-spacing: -2px; line-height: 1.07; margin-top: 24px; }
  .fy-hero p { font-size: 16px; line-height: 1.7; margin-top: 24px; }
  .fy-hero p br { display: none; }
  .fy-kicker { font-size: 11px; letter-spacing: 1.4px; }
  .fy-hero-actions { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 28px; }
  .fy-hero-actions .fy-button { font-size: 15px; min-height: 52px; padding: 14px 18px; justify-content: space-between; }
  .fy-hero-bottom { position: relative; inset: auto; margin: 0 var(--phone-gutter); padding-block: 20px; font-size: 10px; letter-spacing: .8px; align-items: center; gap: 16px; }
  .fy-hero-bottom a { min-height: 44px; align-items: center; }
  .fy-section { padding: 56px var(--phone-gutter); }
  .fy-public h2 { font-size: clamp(29px, 8vw, 42px); line-height: 1.15; letter-spacing: -1px; }
  .fy-benefit-grid { grid-template-columns: 1fr; gap: 16px; }
  .fy-benefit-grid article { padding: 26px 24px; }
  .fy-benefit-grid h3 { font-size: 21px; }
  .fy-benefit-grid p, .fy-intro p, .fy-experience-copy p, .fy-faq p { font-size: 15px; line-height: 1.75; }
  .fy-faq summary { font-size: 16px; min-height: 52px; padding-block: 16px; }
  .fy-experience-photo { min-height: 300px; }
  .fy-experience-copy { padding: 40px var(--phone-gutter); }
  .fy-footer { padding: 40px var(--phone-gutter) calc(24px + env(safe-area-inset-bottom, 0px)); }
  .fy-footer a, .fy-footer button { min-height: 44px; display: inline-flex; align-items: center; font-size: 14px; }
  .fy-footer-bottom { font-size: 12px; }
  .fy-login-story { min-height: 0; padding: 32px var(--phone-gutter); }
  .fy-login-story h1 { font-size: 34px; line-height: 1.12; }
  .fy-login-story p { font-size: 15px; }
  .fy-login-panel { padding: 32px var(--phone-gutter) 48px; }
  .fy-auth-form label, .fy-auth-hint { font-size: 14px; }
  .fy-auth-form input { min-height: 50px; }
  .fy-auth-form .fy-button { width: 100%; min-height: 50px; }
  /* Administration: compact navigation chrome, readable operational content. */
  .ad-sidebar { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 16px 12px; padding: calc(18px + env(safe-area-inset-top, 0px)) var(--phone-gutter) 14px; }
  .ad-sidebar .fy-brand { margin: 0; font-size: 22px; align-self: center; }
  .ad-sidebar .fy-brand-mark { font-size: 45px; }
  .ad-mobile-menu { width: auto; margin: 0; padding: 10px 12px; font-size: 13px; }
  .ad-sidebar nav, .ad-sidebar-bottom { grid-column: 1/-1; }
  .ad-sidebar nav.is-open { grid-template-columns: 1fr; padding: 8px 0; max-height: 55svh; overflow-y: auto; overscroll-behavior: contain; }
  .ad-sidebar nav a { font-size: 15px; min-height: 48px; padding: 12px; }
  .ad-sidebar-bottom { display: none; margin: 0; padding: 12px 0 0; }
  .ad-sidebar:has(nav.is-open) .ad-sidebar-bottom { display: flex; flex-wrap: wrap; gap: 8px 16px; }
  .ad-sidebar-bottom a, .ad-sidebar-bottom button { font-size: 13px; padding: 8px 0; }
  .ad-topbar { padding: 12px var(--phone-gutter); min-height: 64px; }
  .ad-topbar>span { max-width: none; flex: 1; font-size: 13px; }
  .ad-topbar>div { flex-shrink: 0; }
  .ad-topbar>div>span:last-of-type { display: none; }
  .ad-refresh { width: 44px; min-width: 44px; }
  .ad-main { padding-block: 28px 40px; }
  .ad-eyebrow { font-size: 11px; letter-spacing: 1.3px; }
  .ad-intro h1 { font-size: 32px; line-height: 1.15; }
  .ad-intro p { font-size: 15px; line-height: 1.65; }
  .ad-intro>.ad-actions { display: grid; grid-template-columns: 1fr; gap: 10px; width: 100%; }
  .ad-actions .ad-button { width: 100%; min-height: 48px; font-size: 14px; }
  .ad-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .ad-metrics article { padding: 18px 14px; min-width: 0; }
  .ad-metrics article>div { font-size: 13px; align-items: start; }
  .ad-metrics article>strong { font-size: clamp(24px, 7vw, 32px); overflow-wrap: anywhere; }
  .ad-metrics article>small { font-size: 12px; line-height: 1.55; }
  .ad-overview-grid { grid-template-columns: minmax(0,1fr); }
  .ad-card { padding: 22px 18px; }
  .ad-card-head h2 { font-size: 19px; }
  .ad-card-head p, .ad-card-head a, .ad-small-note, .ad-callout p { font-size: 14px!important; }
  .ad-activity strong { font-size: 14px; }
  .ad-activity small, .ad-activity time { font-size: 12px; }
  .ad-filter { min-width: 0; flex-basis: 140px; font-size: 13px; }
  .ad-filter select { font-size: 16px; min-height: 48px; }
  .ad-search input { min-height: 48px; }
  .ad-pagination { font-size: 13px; gap: 14px; }
  .ad-pagination>div { width: 100%; }
  .ad-pagination .ad-button { flex: 1; font-size: 14px; min-height: 44px; }
  .ad-readiness>div { flex-wrap: wrap; }
  .ad-readiness strong { font-size: 14px; }
  .ad-readiness p, .ad-readiness .ad-badge, .ad-footer { font-size: 12px; }
  .ad-task-check { width: 44px; height: 44px; min-width: 44px; }
  .ad-task-list strong { font-size: 15px; }
  .ad-task-list small { font-size: 12px; }
  .ad-chart { flex-wrap: wrap; gap: 12px; }
  .ad-chart>div { flex: 1 1 25%; }
  .ad-chart span, .ad-chart small { font-size: 12px; }
  .ad-form label, .ad-form .ad-checkbox, .ad-modal-note { font-size: 14px; }
  .ad-order-details dl>div { flex-direction: column; gap: 4px; }
  .ad-order-details dd { text-align: left; }
  /* Real table semantics and headers remain available to assistive technology. */
  .ad-table-wrap.mobile-records { overflow: visible; }
  .mobile-records table { display: block; min-width: 0; width: 100%; }
  .mobile-records thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .mobile-records tbody { display: grid; gap: 16px; }
  .mobile-records tbody tr { display: grid; grid-template-columns: minmax(0,1fr); border: 1px solid #dce5d5; border-radius: 10px; padding: 4px 16px; background: #fff; }
  .mobile-records tbody td { display: block; max-width: none; min-width: 0; padding: 12px 0; border-bottom: 1px solid #edf0e9; font-size: 15px; white-space: normal!important; overflow-wrap: anywhere; }
  .mobile-records tbody td:last-child { border-bottom: 0; }
  .mobile-records tbody td::before { content: attr(data-label); display: block; font-size: 11px; line-height: 1.5; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: #596b52; margin-bottom: 5px; }
  .mobile-records td strong { font-size: 16px; line-height: 1.5; }
  .mobile-records td small { font-size: 13px; line-height: 1.55; }
  .mobile-records td .ad-button { min-height: 44px; font-size: 14px; margin: 4px 8px 4px 0; }
  .mobile-records .ad-badge { font-size: 12px; white-space: normal; }
  /* Organizer: all four destinations visible without sideways navigation. */
  .og-header-inner { padding-block: 18px; gap: 12px; }
  .og-header .fy-brand { font-size: 23px; }
  .og-profile { margin-left: auto; }
  .og-avatar { display: none; }
  .og-logout { font-size: 13px; padding: 10px 12px; }
  .og-nav>div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; padding: 12px var(--phone-gutter); overflow: visible; }
  .og-nav a { min-height: 48px; white-space: normal; font-size: 13px; gap: 8px; padding: 10px 12px; border: 1px solid #e0e7d9; border-radius: 7px; }
  .og-nav a .icon { width: 18px; height: 18px; }
  .og-nav a.is-active { background: #e8efda; border-color: #9cb68f; }
  .og-nav .og-website-link { display: none; }
  .og-main { padding-block: 28px 40px; }
  .og-intro h1 { font-size: 34px; }
  .og-intro p, .og-editor-head p, .og-page-head p { font-size: 15px; line-height: 1.7; }
  .og-intro>.og-button, .og-page-head>.og-button { width: 100%; min-height: 50px; }
  .og-stats { gap: 12px; }
  .og-stats span { font-size: 13px; }
  .og-stats small { font-size: 12px; line-height: 1.55; }
  .og-search-row { flex-direction: column; align-items: stretch; gap: 12px; }
  .og-search-row select { width: 100%; max-width: none; font-size: 16px; min-height: 48px; }
  .og-event-grid { grid-template-columns: minmax(0,1fr); }
  .og-event-body { padding: 22px; }
  .og-event-body>p, .og-event-details, .og-event-links { font-size: 13px; }
  .og-event-body .og-overline, .og-overline { font-size: 11px; }
  .og-event-actions .og-button { font-size: 14px; }
  .og-event-links { flex-wrap: wrap; gap: 8px; }
  .og-event-links>a, .og-event-links .og-button { min-height: 44px; display: inline-flex; align-items: center; font-size: 13px; }
  .og-editor-head-actions { flex-wrap: wrap; }
  .og-editor-head-actions>.og-button { font-size: 14px; }
  .og-steps { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; background: #dce5d0; }
  .og-steps>button { min-height: 64px; flex-direction: row; justify-content: flex-start; padding: 12px; font-size: 13px; border: 0; }
  .og-steps>button>span { flex-shrink: 0; }
  .og-editor-form { padding: 24px 18px; }
  .og-field { font-size: 14px; }
  .og-field small, .og-help-text { font-size: 13px; }
  .og-step-title p, .og-tip p, .og-empty p { font-size: 14px; }
  .og-phase { padding: 18px 14px; }
  .og-phase-head { flex-wrap: wrap; gap: 10px; }
  .og-phase-head>span { font-size: 12px; }
  .og-phase-head .og-button { font-size: 13px; min-height: 44px; }
  .og-quota, .og-warning { font-size: 13px; }
  .og-editor-bottom { padding: 14px 12px calc(14px + env(safe-area-inset-bottom, 0px)); gap: 10px; scroll-margin-bottom: 16px; }
  .og-editor-bottom>span { font-size: 12px; }
  .og-editor-bottom>div { width: 100%; margin: 0; }
  .og-editor-bottom .og-button { flex: 1; font-size: 14px; min-height: 48px; }
  .og-editor-form { scroll-margin-bottom: 160px; }
  .og-editor-form :is(input,select,textarea,button) { scroll-margin-block: 24px 180px; }
  .og-publish-checks>div { flex-wrap: wrap; font-size: 14px; }
  .og-publish-checks small { font-size: 12px; }
  .og-publish-actions .og-button { font-size: 14px; }
  .og-footer { font-size: 12px; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
  .ss-card-body>p, .ss-explainer p { font-size: 14px; }
  .ss-card-body>small, .ss-counts { font-size: 12px; }
  .ss-card-actions>.og-button { font-size: 14px; }
  .ss-domain-input { flex-wrap: wrap; }
  .ss-domain-input>input { width: 100%!important; flex-basis: 100%; }
  .ss-domain-input>span { padding: 8px 12px; font-size: 13px; white-space: normal; overflow-wrap: anywhere; }
  .ss-public-header nav { gap: 16px; font-size: 13px; }
  .ss-public-header nav a { min-height: 44px; }
  .ss-hero h1 { font-size: clamp(38px, 11vw, 64px); }
  .ss-hero p, .pe-description>p { font-size: 15px; }
  .pe-art { min-height: 280px; }
  .pe-intro h1 { font-size: clamp(32px, 9vw, 46px); }
  .pe-facts strong, .pe-ticket strong { font-size: 15px; }
  .pe-facts small, .pe-ticket small, .pe-checkout-status p { font-size: 13px; }
  .pe-ticket { gap: 16px; flex-wrap: wrap; }
  .pe-ticket>div:first-child { flex: 1 1 140px; min-width: 0; }
  .pe-contact>a { font-size: 14px; min-height: 44px; overflow-wrap: anywhere; }
  dialog { max-width: calc(100vw - 24px); max-height: calc(100dvh - 32px); overflow: auto; }
  .modal-head { gap: 12px; padding: 20px; }
  .modal-head h2 { overflow-wrap: anywhere; }
  .modal-body { padding: 20px; }
  .modal-foot { flex-wrap: wrap; gap: 10px; padding-bottom: env(safe-area-inset-bottom, 0px); }
  .modal-foot>button, .modal-foot>a { flex: 1 1 120px; min-height: 48px; }
}
@media (max-width: 359px) {
  :root { --phone-gutter: 16px; }
  .fy-nav .fy-login { order: 4; flex-basis: 100%; }
  .fy-nav .fy-menu { margin-left: auto; }
  .fy-links { order: 5; }
  .ad-sidebar { grid-template-columns: 1fr; }
  .ad-metrics, .og-stats { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 760px) {
  .mobile-records tbody tr { grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 16px; }
  .mobile-records tbody td { grid-column: 1/-1; }
  .mobile-records td:is([data-label="Tickets"], [data-label="Betrag"], [data-label="Rolle"], [data-label="Status"]) { grid-column: auto; }
  .og-shell :is(.og-field small, .og-help-text, .og-stats small, .og-stats span, .og-event-body>p, .og-event-details, .og-event-links, .og-tip p, .og-step-title p, .og-editor-bottom>span, .og-footer, .og-steps>button, .ss-card-body>small, .ss-counts) { color: #596c4e; }
  .og-steps>button.is-active { color: #234d3e; }
  .pe-page :is(.pe-facts small, .pe-ticket small, .pe-price small, .pe-organizer small, .pe-organizer strong, .pe-checkout-status p, .pe-contact>a) { color: #596c4e; }
  .og-back { font-size: 14px; min-height: 44px; display: inline-flex; align-items: center; }
  .ad-pagination, .ad-footer, .ad-task-list small, .ad-readiness p { color: #596c4e; }
  #toast { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); max-width: calc(100vw - 32px); }
}