/** {*/
/*outline: 1px solid red !important;*/
/*}*/

/*
 =====
 Global page structure with fixed footer
 =====
*/

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

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#wrapper {
    min-height: 100%;
    position: relative;
}

#content {
    padding-bottom: 30px; /* height of footer element */
}

footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30px; /* must be in sync with #content.padding-bottom */
    padding-top: 5px; /* (height - height of children) / 2 to vertically center */
    text-align: center;
}

footer small {
    display: block;
    height: 20px;
    margin: 0;
    padding: 0;
    line-height: 20px;
    font-size: 12px;
}

/*
 =====
 Global element styles
 =====
*/

html, body {
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    background-color: white;
    color: black;
}

*:focus {
    outline: none;
}

input, select, textarea {
    font-family: 'Lato', sans-serif;
    background-color: white;
}

hr {
    display: block;
    width: 100%;
    height: 1px;
    margin: 0 auto;
    padding: 0;
    border: none;
    text-align: center;
    background-color: #f3f5f4;
}

a {
    text-decoration: none;
    color: #ff6600;
}

a:hover, a:focus {
    text-decoration: underline;
}

a.plain {
    text-decoration: none;
    color: black;
}

a.plain:hover, a.plain:focus {
    text-decoration: none;
}

a.small {
    font-size: 12px;
}

/*
 =====
 Global class-based styles
 =====
*/

.input, .btn {
    display: inline-block;
    height: 30px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid #ff6600;
    border-radius: 5px;
    line-height: 28px;
    font-size: 16px;
    font-weight: 300;
    text-decoration: none;
}

.input {
    color: black;
}

.btn {
    cursor: pointer;
    background-color: #ff6600;
    color: #ffc966;
    transition: background-color .3s ease;
    white-space: nowrap;
}

.btn:hover, .btn:focus {
    text-decoration: none;
    background-color: #fc5914;
}

.message {
    padding: 30px 0 0 0;
    background-color: inherit;
}

.message-title {
    font-size: 28px;
    font-weight: 400;
    text-align: center;
    color: #878787;
}

.message-content {
    margin: 0;
    padding: 20px 0 0 0;
    text-align: center;
    font-size: 16px;
}

.header {
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    color: #878787;
}

.admin-area, .admin-area table {
    background-color: #e5e6e5;
}

/*
 =====
 Global styles for inverted look
 =====
*/

#wrapper.inverted-look {
    background: #ff6600;
    background: -moz-linear-gradient(135deg, rgba(255, 183, 50, 1) 0%, rgba(255, 102, 0, 1) 100%);
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(255, 102, 0, 1)), color-stop(100%, rgba(255, 183, 50, 1)));
    background: -webkit-linear-gradient(135deg, rgba(255, 183, 50, 1) 0%, rgba(255, 102, 0, 1) 100%);
    background: -o-linear-gradient(135deg, rgba(255, 183, 50, 1) 0%, rgba(255, 102, 0, 1) 100%);
    background: -ms-linear-gradient(135deg, rgba(255, 183, 50, 1) 0%, rgba(255, 102, 0, 1) 100%);
    background: linear-gradient(315deg, rgba(255, 183, 50, 1) 0%, rgba(255, 102, 0, 1) 100%);
}

#wrapper .inverted-banner {
    padding-top: 60px;
    padding-bottom: 35px;
}

footer.inverted-look small {
    color: white;
}

footer.inverted-look small a {
    color: #ffc966;
}

/*
 =====
 Layout
 =====
*/

.centered {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

/*
 =====
 Homepage styles
 =====
*/

.homepage-login-header {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    height: 100%;
}

#wrapper.background-image {
    background: url('/images/background.jpg') no-repeat center;
    background-size: cover;
}

.hero-content {
    padding-top: 20px;
    text-align: center;
}

.headline {
    text-align: center;
}

.headline-top {
    padding-bottom: 0;
    font-size: 64px;
    font-weight: 700;
    color: #ff6600;
}

.headline-sub {
    padding-bottom: 40px;
    font-size: 28px;
    font-weight: 700;
    color: #ffb732;
}

.headline-text {
    padding-bottom: 50px;
    font-size: 18px;
    font-weight: 300;
    color: black;
}

.headline-text strong {
    font-weight: 400;
    color: #ff6600;
}

.headline-cta .btn {
    height: 38px;
    padding: 0 20px;
    line-height: 36px;
}

/*
 =====
 Navigation/banner layout and styles
 =====
*/

nav.top-banner {
    height: 80px;
    padding: 0 20px;
}

nav.top-banner-gradient {
    background-color: #ff6600;
    background: -moz-linear-gradient(135deg, rgba(255, 183, 50, 1) 0%, rgba(255, 102, 0, 1) 100%);
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(255, 102, 0, 1)), color-stop(100%, rgba(255, 183, 50, 1)));
    background: -webkit-linear-gradient(135deg, rgba(255, 183, 50, 1) 0%, rgba(255, 102, 0, 1) 100%);
    background: -o-linear-gradient(135deg, rgba(255, 183, 50, 1) 0%, rgba(255, 102, 0, 1) 100%);
    background: -ms-linear-gradient(135deg, rgba(255, 183, 50, 1) 0%, rgba(255, 102, 0, 1) 100%);
    background: linear-gradient(315deg, rgba(255, 183, 50, 1) 0%, rgba(255, 102, 0, 1) 100%);
}

nav.top-banner .navigation-header {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
}

nav.top-banner .navigation-header .user {
    flex: 0 0 auto;
}

nav.top-banner .navigation-header .non-user {
    flex: 1 1 auto;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: baseline;
}

nav.top-banner .non-user .home {
    flex: 0 0 auto;
}

nav.top-banner .non-user .global {
    flex: 0 0 auto;
    margin: 0 30px;
}

nav.top-banner .home a, .home a {
    font-size: 32px;
    font-weight: 700;
    color: white;
}

nav.top-banner .home a:hover, .home a:hover {
    text-decoration: none;
}

nav.top-banner .global a:not(:last-of-type) {
    margin-right: 20px;
}

nav.top-banner .global a {
    font-size: 16px;
    font-weight: 300;
    color: white;
}

nav.top-banner .global a:hover {
    text-decoration: none;
}

nav.top-banner .user a {
    font-size: 14px;
    font-weight: 300;
    color: white;
}

nav.top-banner .user a:hover {
    text-decoration: none;
}

nav.top-banner .user .separator {
    color: white;
    padding: 0 20px;
}

/*
 =====
 Tab styles
 =====
*/

nav.tabs {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    padding: 0 30px 0 30px;
    background-color: #e5e6e5;
}

nav.tabs ul {
    flex: 1 0 auto;
}

nav.tabs .discriminator {
    flex: 0 0 auto;
}

nav.tabs ul {
    height: 60px;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

nav.tabs li {
    display: inline-block;
    margin: 0 35px 0 0;
    vertical-align: middle;
    line-height: 56px;
    font-size: 18px;
    font-weight: 300;
    color: #ff7c4c;
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
}

nav.tabs li.selected {
    font-weight: 400;
    color: #ff6600;
    border-bottom: 2px solid #ff6600;
}

nav.tabs li a {
    color: #ff8432;
    transition: color .3s ease
}

nav.tabs li a:hover, nav.tabs li a:focus {
    text-decoration: none;
    color: #ff6600;
}

nav.tabs .discriminator {
    height: 30px;
    line-height: 30px;
    font-size: 18px;
    font-weight: 300;
    color: #878787;
}

/*
 =====
 Form styles
 =====
*/

.form-description {
    font-size: 14px;
    padding-bottom: 15px;
}

.form-submission {
    padding: 15px 0 0 0;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}

.form-submission .form-submission-alternative {
    margin-right: auto;
    text-align: left;
}

form.submitted input:required:invalid, form.submitted input:focus:invalid, form.submitted select:required:invalid, form.submitted select:focus:invalid {
    background-color: rgba(255, 0, 0, .05);
}

form .frm-intra-separator {
    padding: 5px 0;
}

form .frm-intra-separator hr {
    height: 1px;
}

div .frm-inter-separator {
    padding: 30px 0;
}

div .frm-inter-separator hr {
    height: 2px;
}

/*
 =====
 CRUD form styles
 =====
*/

.form-container {
    margin: 50px 0;
    padding: 40px;
    border: 2px solid #f3f5f4;
    border-radius: 5px;
    background-color: #ffffff;
}

.frm-crud {
    width: 406px;
}

.frm-crud table {
    border-spacing: 0 5px;
}

.frm-crud .header {
    padding-bottom: 20px;
}

.frm-crud .notification {
    display: none;
    margin-bottom: 20px;
    padding: 5px;
    font-weight: 400;
}

.frm-crud .notification-pane {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.frm-crud .notification-clear {
    height: 16px;
    border: 0;
    cursor: pointer;
    background: none;
    color: inherit;
    fill: currentColor;
    opacity: 0.5;
}

.frm-crud .notification-clear:hover {
    opacity: 1;
}

.frm-crud .notification-success {
    display: block;
    background-color: #ddfbdd;
    color: green;
}

.frm-crud .notification-error {
    display: block;
    background-color: #fff3f3;
    color: red;
}

.frm-crud .label {
    width: 156px; /* table width - value width */
    height: 35px;
    margin: 0;
    padding: 0;
}

.frm-crud .value {
    width: 250px; /* table width - label width */
    height: 35px;
    margin: 0;
    padding: 0;
}

.frm-crud .value input[type=number],
.frm-crud .value input[type=text],
.frm-crud .value input[type=password],
.frm-crud .value input[type=email],
.frm-crud .value input[type=date],
.frm-crud .value select.single {
    width: 250px; /* table width - label width */
}

.frm-crud .value input[type=radio].first-radio {
    margin-left: 1px;
}

.frm-crud .value input[type=radio] {
    margin-left: 15px;
}

.frm-crud select:disabled {
    background-color: #efefef;
    font-style: italic;
}

.frm-crud input[type=submit]:disabled,
.frm-crud input[type=button]:disabled.btn-submit   {
    cursor: progress;
    opacity: .5;
}

/*
 =====
 Avatar styles
 =====
*/

.avatar-circle-med {
    width: 30px;
    height: 30px;
    background-color: lightgray;
    text-align: center;
    border-radius: 50%;
}

.initials-med {
    position: relative;
    top: 6px;
    line-height: 14px;
    font-size: 14px;
    color: #fff;
}

.avatar-circle-small {
    width: 20px;
    height: 20px;
    background-color: lightgray;
    text-align: center;
    border-radius: 50%;
}

.initials-small {
    position: relative;
    top: -1px;
    line-height: 10px;
    font-size: 10px;
    color: black;
}

/*
 =====
 Section styles incl. titles and view links
 =====
*/

.data {
    margin: 30px 40px 30px 40px;
    background-color: #ffffff;
}

.top-section:not(:last-of-type) {
    margin-bottom: 30px;
}

.top-section .details {
    font-size: 16px;
    font-weight: 300;
}

.top-section .spacer {
    height: 8px;
}

.top-section .title-pane {
    margin-bottom: 20px;
}

/* Title-only panes (org/platform pages, sub-section titles) use a simple flex row.
   Action-bearing panes switch to a 2-column grid below. */
.title-pane {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: 40px;
    row-gap: 10px;
}

/* Action-bearing rows: a 2-column grid pins the action group to the top-right (col 2,
   row 1) while the title — and, on the participants page, the filter pane — sit in the
   first column. Grid tracks size independently of content, so the action group never gets
   pushed onto its own row by a long title. (flex-wrap cannot do this: it breaks lines by
   each item's *unwrapped* width, so a long title forces the action group to wrap before
   the title itself does.)

   When the row is too narrow for everything, the action group gives way FIRST: col 1
   (`auto`) holds the title's content, and col 2 (`minmax(min-content, 1fr)`) is the
   flexible track that shrinks first — narrowing the .action-menu so its own flex-wrap
   stacks the buttons onto extra rows. Only once col 2 has shrunk to its widest single
   button (the `min-content` floor — which prevents a button overflowing the track) does
   col 1 give and the title wrap. So the degradation order is: buttons stack → filter
   drops below the title (inside col 1) → title wraps, last. Scoped via :has so title-only
   panes keep simple flow (and no stray right-hand gap). */
.title-pane:has(.action-menu) {
    display: grid;
    grid-template-columns: auto minmax(min-content, 1fr);
    /* align the first row of both columns on a shared text baseline, so the title text,
       the filter control, and the first row of action buttons sit on one line; any
       wrapped title lines / stacked button rows then flow below it */
    align-items: baseline;
    column-gap: 40px;
    row-gap: 10px;
}

.title-pane:has(.action-menu) > .title-pane-main {
    grid-column: 1;
    grid-row: 1;
}

.title-pane:has(.action-menu) > .action-menu {
    grid-column: 2;
    grid-row: 1;
}

/* Left group: the title plus an adjacent sibling — the filter pane on the participants
   page, or the notification span on the (action-menu-less) my-results pane. Wraps so that
   sibling drops below the title before the title itself has to wrap (the title comes first,
   so the later sibling is the one that wraps). min-width:0 lets it shrink so the title wraps
   at its spaces (titles are always multiple words) rather than overflowing. */
.title-pane-main {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 40px;
    row-gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
}

.filter-pane { /* lay the filters out in a row; the flex gap gives an exact 20px between
                  additional filters (e.g. age after gender), free of the inline-block
                  whitespace that a margin would add on top of. wrap + max-width keep the
                  pane within the content width on narrow screens, so a second filter drops
                  below the first instead of forcing page-level horizontal overflow */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    max-width: 100%;
}

/* Right group (grid col 2): the admin/organizer action buttons. On desktop the wrapper
   is a real flex row — .action-menu-items collapses via display:contents so the button
   divs are the flex children — right-aligned (justify-content:flex-end) and stacking onto
   extra rows when the grid column is squeezed. The trigger and checkbox are hidden here.
   On mobile the wrapper becomes the "Aktionen" dropdown — see the media query below. */
.action-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: baseline;
    gap: 10px 20px;
}

.action-menu-items {
    display: contents;
}

.action-menu-toggle,
.action-menu-trigger {
    display: none;
}

.title {
    font-size: 28px;
    font-weight: 400;
    color: #878787;
}
/* The base .title needs no overflow-wrap: titles are multiple whitespace-separated words
   and wrap at spaces once .title-pane-main's min-width:0 lets the column shrink. (On
   narrow screens the media query below additionally sets overflow-wrap:anywhere on
   .title, so an unusually long single token still breaks rather than overflow.) */

.sub-section:not(:last-of-type) {
    margin-bottom: 25px;
}

.sub-section .title-small-pane {
    margin-bottom: 5px;
}

.title-small {
    text-align: left;
    font-size: 18px;
    font-weight: 400;
    color: #878787;
}

.sub-section .details {
    max-width: 900px;
}

.top-section .child-pane {
    margin-top: 20px;
    margin-left: 0px;
}

.child-pane .child:not(:last-of-type) {
    margin-bottom: 20px;
}

.child-pane .title-pane {
    margin-bottom: 15px;
}

.child-pane .title-pane .title {
    font-size: 24px;
}

.top-section .view-links-pane {
    margin-bottom: 15px;
}

.view-links-pane .view-links:not(:last-of-type) {
    margin-right: 40px;
}

.view-links {
    display: inline-block;
    font-size: 16px;
    color: #ff6600;
}

.view-links strong {
    font-weight: 400;
}

.view-links a {
    color: #ff6600;
    transition: color .3s ease
}

.view-links a:hover {
    color: #fc5914;
}

/*
 =====
 Table styles
 =====
*/

.outer-table-wrapper, .inner-table-wrapper {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.outer-table-wrapper {
    overflow-x: auto;
}

.inner-table-wrapper {
    padding: 0 0 5px 0;
}

table {
    font-size: 16px;
    border-spacing: 0;
    background-color: white;
}

th, td {
    vertical-align: middle;
    padding: 1px 20px 1px 0;
    white-space: nowrap;
}

th:last-child, td:last-child {
    padding-right: 0;
}

th {
    padding-top: 8px;
    padding-bottom: 5px;
    font-weight: 400;
}

table.highlight-rows tbody tr:hover {
    background-color: #f3f5f4;
}

table.highlight-rows tbody tr.no-result:hover {
    background-color: inherit;
}

.userWithAvatar {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}

.userWithAvatar .avatar {
    height: 20px;
    margin-right: 5px;
}

.userWithAvatar .name {
    height: 20px;
    margin-right: 5px;
    line-height: 20px;
}

.userWithAvatar img {
    height: 20px;
    width: 20px;
    border-radius: 50%;
}

.section-title {
    padding: 5px 0;
    font-weight: normal;
    text-align: center;
}

.section-spacer {
    height: 30px;
}

/*
 =====
 Confirmation screen styles
 =====
*/

.frm-confirmation .notification {
    display: none;
    padding-left: 30px;
    font-weight: 300;
}

.frm-confirmation .notification-success {
    display: inline;
    color: green;
}

.frm-confirmation .notification-error {
    display: inline;
    color: red;
}

/*
 =====
 Sign-up / sign-in / reset password page styles
 =====
*/

.form-container-signupinreset {
    margin-top: 0;
    border: none;
}

/*
 =====
 Event info page styles
 =====
*/

.participate-pane {
    margin-top: 8px;
    margin-bottom: 16px;
}

.frm-info-admin .notification {
    display: none;
    margin-bottom: 20px;
    padding: 5px;
    font-weight: 400;
}

.frm-info-admin .notification-success {
    display: block;
    background-color: #ddfbdd;
    color: green;
}

.frm-info-admin .notification-error {
    display: block;
    background-color: #fff3f3;
    color: red;
}

.frm-info-admin table {
    padding: 10px 10px 10px 10px;
}

.frm-info-admin table td.table-title {
    font-weight: 400;
    padding-bottom: 5px;
}

.frm-info-admin input[type=radio]:disabled ~ span {
    font-style: italic;
}

/*
 =====
 Routes page styles
 =====
*/

.routeName, .routeColor, .routeGrade, .routeRouteSetter, .routePlacement, .routeConstructionTime, .routeComment, .routeSuccess, .routeEditResult {
    text-align: left;
}

.routeSequence, .routeTops, .routeZones, .routeAttempts {
    text-align: right;
}

.routeGrade div {
    height: 20px;
    padding-right: 20px;
    line-height: 20px;
}

/*
 =====
 Rankings page styles
 =====
*/

.rankingParticipant, .rankingMostRecentSuccess, .rankingEditResult {
    text-align: left;
}

.rankingPlace, .rankingResult {
    text-align: right;
}

td.rankingMostRecentSuccess {
    color: #bbbbbb;
}

/*
 =====
 My results page styles
 =====
*/

.frm-attempt .notification {
    display: none;
    padding-left: 20px;
    font-weight: 300;
}

.frm-attempt .notification-success {
    display: inline;
    color: green;
}

.frm-attempt .notification-error {
    display: inline;
    color: red;
}

.routeSuccessToggles input[type=radio] {
    display: none;
}

.routeSuccessToggles input[type=radio] + span {
    display: inline-block;
    width: 30px;
    height: 20px;
    margin: 0;
    padding: 0;
    border: 0;
    cursor: pointer;
    line-height: 20px;
    text-align: center;
}

.routeSuccessToggles input[type=radio]:disabled + span {
    cursor: inherit;
}

.routeSuccessToggles .topped input[type=radio] + span {
    background-color: rgba(34, 139, 34, .1);
}

.routeSuccessToggles .zoned input[type=radio] + span {
    background-color: rgba(30, 144, 255, .1);
}

.routeSuccessToggles .failed input[type=radio] + span {
    background-color: rgba(255, 0, 0, .1);
}

.routeSuccessToggles .noattempt input[type=radio] + span {
    background-color: rgba(169, 169, 169, .1);
}

.routeSuccessToggles .topped input[type=radio]:checked + span {
    background-color: rgba(34, 139, 34, 1);
}

.routeSuccessToggles .zoned input[type=radio]:checked + span {
    background-color: rgba(30, 144, 255, 1);
}

.routeSuccessToggles .failed input[type=radio]:checked + span {
    background-color: rgba(255, 0, 0, 1);
}

.routeSuccessToggles .noattempt input[type=radio]:checked + span {
    background-color: rgba(169, 169, 169, 1);
}

/*
 =====
 Update login page styles
 =====
*/

.form-container-loginupdate {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: stretch;
}

.form-container-loginupdate .frm-crud {
    width: 446px;
}

.form-container-loginupdate .frm-crud .label {
    width: 196px; /* table width - value width */
}

.form-container-loginupdate .frm-crud .value {
    width: 250px; /* table width - label width */
}

/*
 =====
 Responsive: mobile shell (increment 1 of #144)
 Page-level overflow fixes shared across all views. Form-internal row layout
 and per-view polish follow in later increments.
 =====
*/

@media (max-width: 600px) {

    /* Section container: trim the wide desktop side margins so content fits */
    .data {
        margin: 20px 16px;
    }

    /* Form containers: fluid instead of fixed px so they never exceed the
       viewport. Internal row widths (.label/.value) stay until increment 2. */
    .form-container {
        padding: 24px 16px;
    }

    .frm-crud,
    .form-container-loginupdate .frm-crud {
        width: 100%;
        max-width: 100%;
    }

    /* Navigation banner: stack vertically so the logo, global links, and user
       links never need to share a single 360px row; grow taller as needed. */
    nav.top-banner {
        height: auto;
        padding: 12px 16px;
    }

    nav.top-banner .navigation-header {
        height: auto;
        flex-direction: column;
        align-items: flex-start;
        row-gap: 8px;
    }

    nav.top-banner .navigation-header .non-user {
        flex-flow: column nowrap;
        align-items: flex-start;
        row-gap: 6px;
    }

    nav.top-banner .home a, .home a {
        font-size: 24px;
    }

    nav.top-banner .non-user .global {
        margin: 0;
    }

    /* Tabs: wrap and drop the fixed heights/large spacing. */
    nav.tabs {
        height: auto;
        flex-wrap: wrap;
        padding: 10px 16px;
        row-gap: 5px;
    }

    nav.tabs ul {
        height: auto;
        flex: 1 1 auto; /* allow the list to shrink so its inline-block items wrap */
    }

    nav.tabs li {
        margin: 0 20px 0 0;
        line-height: 32px;
    }

    /* Title rows: tighten the inter-group / inter-row gap on narrow screens (the row
       already wraps and the action group is right-aligned via the base rules). */
    .title-pane {
        gap: 10px 20px;
    }

    /* Form internals (increment 2 of #144): stack each row's label above its
       value and let inputs/selects fill the width, so forms with wider rows
       (e.g. the sign-up birthdate selects) no longer push their label column
       off-screen. */
    .frm-crud table,
    .frm-crud tbody,
    .frm-crud tr,
    .frm-crud td {
        display: block;
    }

    .frm-crud tr {
        margin-bottom: 10px;
    }

    .frm-crud td.label,
    .frm-crud td.value,
    .form-container-loginupdate .frm-crud td.label,
    .form-container-loginupdate .frm-crud td.value {
        width: 100%;
        height: auto;
    }

    .frm-crud td.label {
        margin-bottom: 2px;
    }

    .frm-crud .value input[type=number],
    .frm-crud .value input[type=text],
    .frm-crud .value input[type=password],
    .frm-crud .value input[type=email],
    .frm-crud .value input[type=date],
    .frm-crud .value select.single {
        width: 100%;
    }

    /* Birthdate selects (Tag/Monat/Jahr on sign-up and reset-password) are
       select.input, not select.single, so the full-width rule above leaves them as
       a fixed inline triplet; the global `td { white-space: nowrap }` then keeps
       them on one row that overflows the stacked value box on narrow phones (the
       Jahr select clips against the card edge). Let the value row wrap and give
       the selects a small gap. */
    .frm-crud td.value {
        white-space: normal;
    }

    .frm-crud .value select.input:not(.single) {
        margin: 0 6px 6px 0;
    }

    /* Submission row: stack the secondary link above a full-width primary button
       (the more tappable mobile convention). Stretch lets the optional
       .form-submission-control wrapper fill the row so the button inside it can
       too; the secondary link opts out via align-self below. */
    .form-submission {
        flex-direction: column;
        align-items: stretch;
    }

    .form-submission .form-submission-alternative {
        align-self: flex-start;
        margin-right: 0;
        margin-bottom: 12px; /* preserve the prior link-to-button spacing the old 30px box gave */
    }

    .form-submission .form-submission-control {
        margin-top: 12px;
    }

    .form-postscript {
        text-align: center;
    }

    /* Primary confirmation button spans the form width, whether it is a direct
       child of the row (event CRUD, reset-password) or wrapped in
       .form-submission-control (sign-in/up, settings). */
    .form-submission .btn {
        display: block;
        width: 100%;
    }

    /* The event-info participation button spans the details row full width too,
       matching the primary confirmation buttons above. */
    .participate-pane .btn {
        display: block;
        width: 100%;
    }

    /* Centered form cards (sign-in/up/reset, settings login/profile, and the
       event CRUD forms): the centered container otherwise shrinks to its own
       content, so each page rendered at a different width (and the reset page's
       long description stretched its card edge-to-edge). Stretch them all to the
       same width with symmetric 40px side gutters, keeping their own borders. */
    #content.centered > .form-container {
        align-self: stretch;
        margin-left: 40px;
        margin-right: 40px;
    }

    /* Page-specific polish and long-content audits (increment 3 of #144). */

    /* Hero/headline: the 64px top line fills a 360px viewport edge-to-edge and
       overflows narrower phones; scale the hero type down so it stays legible
       and keeps a margin. */
    .headline-top {
        font-size: 40px;
    }

    .headline-sub {
        font-size: 22px;
    }

    /* Hero body text: the desktop-tuned line-tuning breaks (br.line-break) are
       placed for the wide layout and produce awkward single-word lines on a
       narrow viewport. Drop them so each paragraph reflows naturally, while
       keeping the unclassed <br><br> that separates the two paragraphs. Add
       side gutters so the text does not sit against the screen edges. */
    .hero-content {
        padding-left: 24px;
        padding-right: 24px;
    }

    .headline-text br.line-break {
        display: none;
    }

    /* Long names and free-text: event/organization names and the detail lines
       (date range, route-setter lists, comments, mailto/website links) can
       contain tokens with no break opportunity (most visibly the website URL,
       which renders as one unbreakable string) and push the page wider than the
       viewport. Force them to break anywhere rather than overflow. */
    .title-pane .title,
    .top-section .details,
    .sub-section .details {
        overflow-wrap: anywhere;
    }

    /* Event Info admin tables (permissions, tournament state): these plain
       tables are not inside an .outer-table-wrapper, so their multi-column
       content overflows the page on mobile. Let the table itself scroll
       horizontally within the content width instead. */
    .frm-info-admin table {
        display: block;
        width: 100%;
        overflow-x: auto;
    }

    /* Scrollable result tables: the grey section-title header spans the full
       (wider-than-viewport) table width and is centred, so at the default left
       scroll position its text sits off-screen and only a blank header strip
       shows. Left-align it on mobile so the header is readable when the table
       first loads. */
    .outer-table-wrapper .section-title {
        text-align: left;
    }

    /* Action menu (#153): collapse the grouped admin/organizer action buttons
       behind a single "Aktionen" disclosure so the title row is not crowded by a
       wrapping row of buttons. The buttons stay real links inside a dropdown
       panel. CSS-only — a hidden checkbox toggled by the trigger label drives the
       open/closed state. These overrides are media-query-scoped, so the desktop
       flex action group (above) is unaffected. */
    .action-menu {
        display: block;
        /* positioned ancestor for the dropdown panel, which anchors to the trigger's
           right edge (below) */
        position: relative;
    }

    /* Right-align the "Aktionen" trigger within the title row so it lines up with the
       right-anchored dropdown panel below it. .action-menu is a grid item in col 2 (set
       above); as a display:block item it would otherwise stretch across the column and
       leave the trigger at the column's left edge while the panel anchors to the right
       (long event/route titles on the event-info and route-detail pages make col 2 wide).
       margin-left:auto shrinks it to its content and pushes it to the column's right edge. */
    .title-pane .action-menu {
        margin-left: auto;
    }

    .action-menu-trigger {
        display: inline-block;
        height: 30px;
        padding: 0 12px;
        border: 1px solid #ff6600;
        border-radius: 5px;
        background-color: #ff6600;
        color: #ffc966;
        line-height: 28px;
        font-size: 16px;
        font-weight: 300;
        white-space: nowrap;
        cursor: pointer;
    }

    .action-menu-trigger::after {
        content: "\00a0\25BE"; /* non-breaking space + down-pointing caret */
    }

    /* Hidden but focusable: keep the checkbox reachable by keyboard (Tab + Space)
       while the label is the visible trigger; do not use display:none, which
       would drop it from the focus order. */
    .action-menu-toggle {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: 0;
        opacity: 0;
        pointer-events: none;
    }

    .action-menu-toggle:focus-visible + .action-menu-trigger {
        outline: 2px solid #ff6600;
        outline-offset: 2px;
    }

    .action-menu-items {
        display: none;
        position: absolute;
        /* anchored to the trigger's right edge (the trigger is right-aligned via
           margin-left:auto), so the panel hangs directly below the trigger with their
           right edges flush and never overflows the right margin */
        top: calc(100% + 6px);
        right: 0;
        z-index: 20;
        /* no min-width: shrink to the widest item so its trailing space equals the
           12px leading padding (a fixed min-width would pad the right side wider) */
        padding: 2px 0;
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 5px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .action-menu-toggle:checked ~ .action-menu-items {
        display: block;
    }

    /* Inside the dropdown the actions are plain menu rows, not buttons: strip the
       .btn chrome, left-align, full-width comfortable tap targets, with a hairline
       divider between rows. Desktop is unaffected — these overrides apply only inside
       the open mobile panel. */
    .action-menu-items > div,
    .action-menu-items > div:first-child {
        margin-left: 0;
    }

    .action-menu-items .btn {
        display: block;
        width: 100%;
        height: auto;
        margin: 0;
        /* 12px left padding aligns the row text with the "Aktionen" trigger text
           (1px panel border + 12px == the trigger's 1px border + 12px padding) */
        padding: 9px 12px;
        border: none;
        border-radius: 0;
        background: none;
        line-height: 20px;
        text-align: left;
        color: #333;
    }

    .action-menu-items > div + div .btn {
        border-top: 1px solid #eee;
    }

    .action-menu-items .btn:hover,
    .action-menu-items .btn:focus {
        background-color: #f5f5f5;
        text-decoration: none;
    }
}