/**
* @file damage-report-form.css
* @filepath public/css/pages/damage-report-form.css
* @directory public/css/pages
* @access_level PUBLIC
* @security_level LOW
* @last_updated 2026-08-03 — Mängelmeldung/Schadensmeldung redesign across all four
* surfaces that share data-page="damage-report-form" (owner project list, owner
* project view, owner report detail, public tenant form). See the DESIGN NOTES
* block below for the reasoning; every new selector is prefixed `dr-` and scoped
* to body[data-page="damage-report-form"] so nothing leaks through the bundle.
* @previously 2026-08-02 — mobile header rows: .dr-page-header / .dr-detail-header wrap <48em
* (fixes clipped "Neues Formular" button + oversized .heading-1 on tools/damage-reports*.html,
* which now link this file — damage-reports.html previously 404'd on a non-existent damage-reports.css)
* @previously 2026-06-17 — font-size em→rem (em-compounding fix); hardcoded var(--accent-primary) → token;
* GLOBAL LEAK fixed: bare .glass-card in @media print → scoped to body[data-page="damage-report-form"]
*
*
*
* Page-specific styles for public damage report submission form.
* Provides responsive form layout, image upload interface, and success state styling.
*
*
*
* - coeus-master.css (theme variables, utilities)
* - typography-system.css (iOS text styles)
*
*
*
* - No inline styles (CSS cascade only)
* - Theme-responsive via CSS variables
* - em units for responsive sizing
* - Glass morphism design patterns
* - Mobile-first responsive approach
*
*
*/
/* =============================================================================
STATE MANAGEMENT (Visibility Control)
============================================================================= */
/**
* State-based visibility control
* Prefer CSS classes over inline style.display manipulation
*/
body[data-page="damage-report-form"] .state-hidden {
display: none !important;
}
body[data-page="damage-report-form"] .hidden {
display: none !important;
}
@media (max-width: 48em) {
body[data-page="damage-report-form"] .form-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
}
/**
* Full-width form field (spans all columns)
*/
body[data-page="damage-report-form"] .form-field.full-width {
grid-column: 1 / -1;
}
/**
* Helper text styling
*/
body[data-page="damage-report-form"] .form-field .ios-caption2,
body[data-page="damage-report-form"] .form-field .ios-caption1 {
margin-top: 0.25rem;
}
@media (max-width: 48em) {
body[data-page="damage-report-form"] .image-preview-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 48em) {
body[data-page="damage-report-form"] .summary-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
}
/**
* Full-width summary item (spans all columns)
*/
body[data-page="damage-report-form"] .summary-item.full-width {
grid-column: 1 / -1;
}
/* =============================================================================
PRIVACY MODAL
============================================================================= */
/**
* Modal overlay - full-screen backdrop
*/
body[data-page="damage-report-form"] .modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}
/**
* Modal content - scrollable with max height
*/
body[data-page="damage-report-form"] .modal-overlay
.modal-overlay .overflow-y-auto {
overflow-y: auto;
}
/* =============================================================================
BUTTONS
============================================================================= */
/**
* Primary submit button - enhanced styling
*/
/**
* Select images button
*/
body[data-page="damage-report-form"] #selectImagesBtn {
font-weight: 600;
}
/* =============================================================================
LOADING STATES
============================================================================= */
/**
* Loading spinner animation
*/
body[data-page="damage-report-form"] .loading-spinner {
width: 3rem;
height: 3rem;
border: 3px solid var(--glass-border);
border-top-color: var(--ios-system-orange);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
/* =============================================================================
ERROR STATE
============================================================================= */
/**
* Error icon - red warning triangle
*/
body[data-page="damage-report-form"] .text-red {
color: var(--ios-system-red);
}
body[data-page="damage-report-form"] .likert-scale .ios-caption2 {
text-align: center;
}
/* =============================================================================
RESPONSIVE ADJUSTMENTS
============================================================================= */
/**
* Mobile-specific adjustments
*/
@media (max-width: 48em) {
/* Reduce padding on mobile */
/* Stack Likert scale vertically on small screens */
body[data-page="damage-report-form"] .likert-scale {
flex-direction: column;
align-items: stretch;
}
body[data-page="damage-report-form"] .likert-scale label {
flex-direction: row;
justify-content: space-between;
}
/* Reduce button padding on mobile */
}
/**
* Tablet-specific adjustments
*/
@media (min-width: 48em) and (max-width: 64em) {
body[data-page="damage-report-form"] .container {
padding: 1.5rem;
}
}
/* =============================================================================
ACCESSIBILITY
============================================================================= */
/**
* Focus visible styles for keyboard navigation
*/
body[data-page="damage-report-form"] input:focus-visible,
body[data-page="damage-report-form"] textarea:focus-visible,
body[data-page="damage-report-form"] button:focus-visible {
outline: 2px solid var(--ios-system-orange);
outline-offset: 2px;
}
/**
* Required field indicator
*/
body[data-page="damage-report-form"] label span::after {
content: attr(data-required);
}
/* =============================================================================
PRINT STYLES (PDF Generation Support)
============================================================================= */
@media print {
/* Hide interactive elements */
body[data-page="damage-report-form"] button,
body[data-page="damage-report-form"] .glass-button,
body[data-page="damage-report-form"] .remove-image-btn {
display: none !important;
}
/* Remove glass effects for better printing */
body[data-page="damage-report-form"] .glass-card {
backdrop-filter: none;
background: #ffffff;
border: 1px solid #ccc;
}
}
/* =============================================================================
MOBILE HEADER ROWS (<48em)
tools/damage-reports.html opens with `.dr-page-header`, a single non-wrapping
row holding the title block and the "Neues Formular" action. Because body clips
at `overflow-x: hidden`, anything pushed past the right edge is cut off with no
gesture that can reach it — from --font-scale L upward the button disappeared.
Action rows may wrap (a wrapping button row reads fine; only tab rails need a
scroll rail).
The companion rules that used to sit here for `.dr-detail-header .flex-between`
and its oversized `.heading-1` are gone: that header was rebuilt as
`.dr-detail-headbar` + `.dr-detail-title` (§7), which is a wrapping flex row on
a title-3 rung by construction and needs no phone-only patch.
============================================================================= */
@media (max-width: 48em) {
body[data-page="damage-report-form"] .dr-page-header {
flex-wrap: wrap;
row-gap: var(--spacing-3);
}
body[data-page="damage-report-form"] .dr-page-header > * {
min-width: 0;
}
body[data-page="damage-report-form"] .dr-page-header > .flex {
flex-wrap: wrap;
width: 100%;
}
body[data-page="damage-report-form"] .dr-page-header > .flex .glass-button {
flex: 1 1 auto;
justify-content: center;
text-align: center;
}
}
/* =============================================================================
DESIGN NOTES — Mängelmeldung / Schadensmeldung redesign (2026-08-03)
=============================================================================
Four pages share body[data-page="damage-report-form"]:
/tools/damage-reports.html owner: list of report forms per object
/tools/damage-reports-project.html owner: one form + its submitted reports
/tools/damage-reports-details.html owner: one submitted report
/report-damage.html REMOVED 2026-08-03 — see note at section 8
What was wrong
--------------
The type hierarchy was inverted. Chrome shouted (40–64px serif headings for
"Rebgasse 53", "Melder", "Schadensdetails", "Schadensmeldung") while the actual
report — what broke, where, how bad, and the photos — was rendered in 12px grey
labels with short values. Three full-width tiles were spent displaying "3 / 2 / 1".
The detail page printed the heading "Schadensdetails" twice and buried the photo
evidence under four cards of chrome.
The rule applied here
---------------------
Chrome shrinks, content grows. Section labels drop to a quiet sans rung
(`.dr-block-title`, `.dr-step-title`); the damage description becomes the largest
text on the report surfaces (`.dr-lead`); numbers become inline stats rather than
tiles (`.dr-statline`); photos move to a dedicated evidence column.
Vertical rhythm
---------------
`.dr-block` replaces the ad-hoc `p-8 mb-6` stacks. One padding value, one gap
value, both stepping down on phones — this alone removes most of the dead space.
Status legibility
-----------------
`.status-badge` variants used by manager.js / project-details.js / details-handler.js
(`status-open`, `status-complete`, `status-archived`, `status-pending`,
`status-resolved`) had NO colour rules in this page scope — the chips inherited
whatever leaked in from components/team-management.css, so "OFFEN" and
"ABGESCHLOSSEN" rendered identically. They are now defined here, in page scope,
from `--accent-*` tokens via color-mix so text keeps >=4.5:1 in all five themes:
background = accent @ 14% over the card
border = accent @ 38%
text = accent mixed 45/55 toward --text-primary (darkens in light
themes, lightens in dark ones — one formula, five themes)
Report cards additionally carry an inset status rail (see .dr-report-list), so a
list scan answers "what is still open?" without reading a single word.
Known limitation (presentation layer cannot fix)
------------------------------------------------
Report age / staleness and photo thumbnails in the report LIST are not rendered:
the card markup comes from public/js/damage-reports/project-details.js, and the
list endpoint returns only `image_count`, no thumbnail URLs. Both are noted in the
handover rather than worked around here.
============================================================================= */
/* -----------------------------------------------------------------------------
0. PAGE-SCOPE TOKENS + VERTICAL RHYTHM
-------------------------------------------------------------------------- */
body[data-page="damage-report-form"] {
/* One rhythm for every surface. Phones get the tighter step (see §10). */
--dr-block-pad: var(--spacing-6);
--dr-block-gap: var(--spacing-4);
}
/* Replaces the old `p-8 mb-6` stack. Blocks own their padding and the flow owns
the gap, so nested utility margins cannot compound into empty bands. */
body[data-page="damage-report-form"] .dr-block {
padding: var(--dr-block-pad);
margin-bottom: 0;
}
body[data-page="damage-report-form"] .container.p-6,
body[data-page="damage-report-form"] .dr-form-page {
display: flex;
flex-direction: column;
gap: var(--dr-block-gap);
padding: var(--spacing-4);
}
/* min-h-screen on the owner pages stretched a 3-item list to a full viewport of
emptiness. Content decides the height now. */
body[data-page="damage-report-form"] .container.min-h-screen {
min-height: 0;
}
/* -----------------------------------------------------------------------------
1. TYPE RUNGS (all from the design-token scale — no invented sizes)
-------------------------------------------------------------------------- */
body[data-page="damage-report-form"] .dr-eyebrow {
font-family: var(--font-sans);
font-size: var(--fs-caption);
font-weight: var(--font-semibold, 600);
line-height: 1.4;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-secondary);
margin: 0 0 var(--spacing-1);
}
/* Page identity: serif, but at the title-3 rung rather than large-title. */
body[data-page="damage-report-form"] .dr-page-title,
body[data-page="damage-report-form"] .dr-project-title,
body[data-page="damage-report-form"] .dr-detail-title,
body[data-page="damage-report-form"] .dr-form-title {
font-family: var(--font-serif);
font-size: var(--fs-title3);
font-weight: var(--font-semibold, 600);
line-height: 1.2;
color: var(--text-primary);
margin: 0;
hyphens: auto;
-webkit-hyphens: auto;
overflow-wrap: break-word;
}
body[data-page="damage-report-form"] .dr-page-sub,
body[data-page="damage-report-form"] .dr-project-desc,
body[data-page="damage-report-form"] .dr-form-sub {
font-size: var(--fs-callout);
line-height: 1.5;
color: var(--text-secondary);
margin: var(--spacing-1) 0 0;
}
/* Section labels. Deliberately NOT serif and NOT large: these name a block, they
are not the content of it. */
body[data-page="damage-report-form"] .dr-block-title,
body[data-page="damage-report-form"] .dr-step-title {
font-family: var(--font-sans);
font-size: var(--fs-callout);
font-weight: var(--font-semibold, 600);
line-height: 1.4;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-secondary);
margin: 0 0 var(--spacing-4);
}
/* The damage description — the single most important string on these pages. */
body[data-page="damage-report-form"] .dr-lead {
font-family: var(--font-sans);
font-size: var(--fs-headline);
font-weight: var(--font-normal, 400);
line-height: 1.45;
color: var(--text-primary);
margin: 0 0 var(--spacing-5);
text-wrap: pretty;
}
/* -----------------------------------------------------------------------------
2. FACT LISTS (label / value pairs, used on detail + success summary)
-------------------------------------------------------------------------- */
body[data-page="damage-report-form"] .dr-facts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(13em, 1fr));
gap: var(--spacing-4) var(--spacing-6);
margin: 0;
}
body[data-page="damage-report-form"] .dr-fact {
min-width: 0;
}
body[data-page="damage-report-form"] .dr-fact-wide {
grid-column: 1 / -1;
}
body[data-page="damage-report-form"] .dr-fact-label {
font-size: var(--fs-caption);
font-weight: var(--font-medium, 500);
line-height: 1.4;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-secondary);
margin: 0 0 var(--spacing-1);
}
body[data-page="damage-report-form"] .dr-fact-value {
font-size: var(--fs-body);
line-height: 1.5;
color: var(--text-primary);
margin: 0;
overflow-wrap: break-word;
}
body[data-page="damage-report-form"] .dr-fact-note {
display: block;
font-size: var(--fs-callout);
color: var(--text-secondary);
}
body[data-page="damage-report-form"] .dr-fact-note:empty {
display: none;
}
/* -----------------------------------------------------------------------------
3. STATE BLOCKS (loading / error / empty) — one compact pattern, four pages
-------------------------------------------------------------------------- */
body[data-page="damage-report-form"] .dr-state {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-3);
text-align: center;
padding-block: var(--spacing-8);
}
body[data-page="damage-report-form"] .dr-state-icon {
color: var(--text-tertiary);
}
body[data-page="damage-report-form"] .dr-state-title {
font-family: var(--font-sans);
font-size: var(--fs-headline);
font-weight: var(--font-semibold, 600);
line-height: 1.3;
color: var(--text-primary);
margin: 0;
}
body[data-page="damage-report-form"] .dr-state-text {
font-size: var(--fs-callout);
line-height: 1.55;
color: var(--text-secondary);
max-width: 34em;
margin: 0;
}
body[data-page="damage-report-form"] .dr-empty-note {
font-size: var(--fs-callout);
color: var(--text-secondary);
text-align: center;
padding-block: var(--spacing-6);
margin: 0;
}
/* -----------------------------------------------------------------------------
4. STATUS SYSTEM
-------------------------------------------------------------------------- */
body[data-page="damage-report-form"] .status-badge {
display: inline-flex;
align-items: center;
gap: var(--spacing-2);
padding: var(--spacing-1) var(--spacing-3);
border-radius: var(--radius-full);
border: 1px solid transparent;
font-size: var(--fs-caption);
font-weight: var(--font-semibold, 600);
line-height: 1.4;
letter-spacing: 0.03em;
white-space: nowrap;
/* Default = neutral, so an unmapped status is never mistaken for "done". */
background: var(--glass-secondary);
border-color: var(--glass-border);
color: var(--text-secondary);
}
body[data-page="damage-report-form"] .status-badge::before {
content: "";
width: 0.5em;
height: 0.5em;
border-radius: 50%;
background: currentColor;
flex: none;
}
/* Open / pending — the only state that asks for action. */
body[data-page="damage-report-form"] .status-badge.status-open,
body[data-page="damage-report-form"] .status-badge.status-pending,
body[data-page="damage-report-form"] .status-badge.status-in_progress {
background: color-mix(in srgb, var(--accent-primary) 14%, transparent);
border-color: color-mix(in srgb, var(--accent-primary) 38%, transparent);
color: color-mix(in srgb, var(--accent-primary) 45%, var(--text-primary));
}
/* Resolved / complete. */
body[data-page="damage-report-form"] .status-badge.status-complete,
body[data-page="damage-report-form"] .status-badge.status-resolved,
body[data-page="damage-report-form"] .status-badge.status-closed {
background: color-mix(in srgb, var(--accent-success) 14%, transparent);
border-color: color-mix(in srgb, var(--accent-success) 38%, transparent);
color: color-mix(in srgb, var(--accent-success) 45%, var(--text-primary));
}
/* Archived — deliberately colourless. */
body[data-page="damage-report-form"] .status-badge.status-archived {
background: var(--glass-secondary);
border-color: var(--glass-border);
color: var(--text-tertiary);
}
/* -----------------------------------------------------------------------------
5. PAGE: /tools/damage-reports.html — the project list
-------------------------------------------------------------------------- */
body[data-page="damage-report-form"] .dr-page-head {
display: flex;
flex-direction: column;
gap: var(--spacing-4);
}
body[data-page="damage-report-form"] .dr-breadcrumb {
align-self: flex-start;
}
body[data-page="damage-report-form"] .dr-page-ident {
min-width: 0;
}
/* Cards used to stack one-per-row at full page width to show four short facts.
A responsive grid puts three or four objects on screen at once instead. */
body[data-page="damage-report-form"] .projects-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(19em, 1fr));
gap: var(--dr-block-gap);
align-items: start;
}
body[data-page="damage-report-form"] .project-card {
display: flex;
flex-direction: column;
gap: var(--spacing-3);
padding: var(--spacing-5);
transition: transform 0.18s ease, border-color 0.18s ease;
}
body[data-page="damage-report-form"] .project-card:hover {
transform: translateY(-2px);
border-color: var(--glass-border-hover);
}
/* De-serif the card title: at three-across, a 32px serif line is a wall. */
body[data-page="damage-report-form"] .projects-grid .project-card h3 {
font-family: var(--font-sans);
font-size: var(--fs-headline);
font-weight: var(--font-semibold, 600);
line-height: 1.25;
letter-spacing: 0;
min-width: 0;
overflow-wrap: break-word;
hyphens: auto;
-webkit-hyphens: auto;
}
body[data-page="damage-report-form"] .project-card > .flex-between {
align-items: flex-start;
gap: var(--spacing-3);
margin-bottom: 0;
}
body[data-page="damage-report-form"] .projects-grid .project-card > p {
font-size: var(--fs-callout);
line-height: 1.5;
color: var(--text-secondary);
margin-bottom: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
body[data-page="damage-report-form"] .project-card .project-stats {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-2) var(--spacing-4);
padding-top: var(--spacing-3);
border-top: 1px solid var(--hairline);
margin-bottom: 0;
}
body[data-page="damage-report-form"] .project-card .stat-item {
display: inline-flex;
align-items: center;
gap: var(--spacing-2);
min-width: 0;
}
body[data-page="damage-report-form"] .project-card .stat-item svg {
color: var(--text-quaternary);
flex: none;
}
body[data-page="damage-report-form"] .projects-grid .project-card .stat-item span {
font-size: var(--fs-caption);
color: var(--text-secondary);
white-space: nowrap;
}
body[data-page="damage-report-form"] .project-card > .flex.gap-sm {
margin-top: auto;
padding-top: var(--spacing-1);
}
/* -----------------------------------------------------------------------------
6. PAGE: /tools/damage-reports-project.html — one form and its reports
-------------------------------------------------------------------------- */
body[data-page="damage-report-form"] .dr-project-head {
display: flex;
flex-direction: column;
gap: var(--spacing-5);
}
body[data-page="damage-report-form"] .dr-project-headbar,
body[data-page="damage-report-form"] .dr-detail-headbar {
display: flex;
align-items: flex-start;
gap: var(--spacing-4);
}
body[data-page="damage-report-form"] .dr-back-btn {
flex: none;
}
body[data-page="damage-report-form"] .dr-project-ident,
body[data-page="damage-report-form"] .dr-detail-ident {
flex: 1 1 auto;
min-width: 0;
}
body[data-page="damage-report-form"] .dr-head-action {
flex: none;
}
/* The former three-tile statistics row, now one line. "Offen" is the figure that
drives work, so it is the only one carrying accent weight. */
body[data-page="damage-report-form"] .dr-statline {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-2) var(--spacing-8);
align-items: flex-end;
padding-top: var(--spacing-4);
border-top: 1px solid var(--hairline);
margin: 0;
}
body[data-page="damage-report-form"] .dr-stat {
display: flex;
align-items: baseline;
gap: var(--spacing-2);
}
body[data-page="damage-report-form"] .dr-stat-value {
font-family: var(--font-sans);
font-size: var(--fs-headline);
font-weight: var(--font-semibold, 600);
line-height: 1.1;
font-variant-numeric: tabular-nums;
color: var(--text-secondary);
margin: 0;
}
body[data-page="damage-report-form"] .dr-stat.is-open .dr-stat-value {
color: color-mix(in srgb, var(--accent-primary) 45%, var(--text-primary));
}
body[data-page="damage-report-form"] .dr-stat.is-done .dr-stat-value {
color: color-mix(in srgb, var(--accent-success) 45%, var(--text-primary));
}
body[data-page="damage-report-form"] .dr-stat-label {
font-size: var(--fs-caption);
font-weight: var(--font-medium, 500);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-secondary);
margin: 0;
}
/* ---- Report cards (markup emitted by js/damage-reports/project-details.js) ----
The renderer is out of scope for this change, so the card is re-laid-out from
CSS only. Children in source order:
1 header : status dot, reporter name, reference, status chip, "Erledigt"
2 grid : Datum | Ort
3 block : Beschreibung
4 footer : Eingereicht am
The description is promoted to the lead, the two-column label grid collapses to
an inline meta row, and the whole card gains a status rail. */
body[data-page="damage-report-form"] .dr-report-list {
display: flex;
flex-direction: column;
gap: var(--dr-block-gap);
}
body[data-page="damage-report-form"] .dr-report-list > .glass-card {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-3);
padding: var(--spacing-5);
/* Status rail. Neutral by default; overridden per state below. */
box-shadow: inset 0.25em 0 0 var(--glass-border);
transition: transform 0.18s ease, border-color 0.18s ease;
}
body[data-page="damage-report-form"] .dr-report-list > .glass-card:hover {
transform: translateY(-2px);
border-color: var(--glass-border-hover);
}
body[data-page="damage-report-form"] .dr-report-list > .glass-card:has(.status-indicator.open) {
box-shadow: inset 0.25em 0 0 var(--accent-primary);
}
body[data-page="damage-report-form"] .dr-report-list > .glass-card:has(.status-indicator.complete) {
box-shadow: inset 0.25em 0 0 color-mix(in srgb, var(--accent-success) 60%, transparent);
}
/* 1 — header row */
body[data-page="damage-report-form"] .dr-report-list > .glass-card > .flex-between {
align-items: center;
gap: var(--spacing-3);
margin-bottom: 0;
}
body[data-page="damage-report-form"] .dr-report-list .status-indicator {
width: 0.625em;
height: 0.625em;
border-radius: 50%;
flex: none;
background: var(--text-quaternary);
}
body[data-page="damage-report-form"] .dr-report-list .status-indicator.open {
background: var(--accent-primary);
}
body[data-page="damage-report-form"] .dr-report-list .status-indicator.complete {
background: var(--accent-success);
}
/* The reporter's name was the largest text in the card. It is metadata. */
body[data-page="damage-report-form"] #reportsList .glass-card h3 {
font-family: var(--font-sans);
font-size: var(--fs-callout);
font-weight: var(--font-semibold, 600);
line-height: 1.4;
letter-spacing: 0;
color: var(--text-secondary);
margin-bottom: 0;
}
body[data-page="damage-report-form"] #reportsList .glass-card h3 + p {
font-size: var(--fs-caption);
color: var(--text-secondary);
}
/* 2 — Datum / Ort: two half-width columns become one inline meta row. */
body[data-page="damage-report-form"] .dr-report-list > .glass-card > .grid {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-2) var(--spacing-5);
margin-bottom: 0;
order: 2;
}
body[data-page="damage-report-form"] .dr-report-list > .glass-card > .grid > div {
display: flex;
align-items: baseline;
gap: var(--spacing-2);
min-width: 0;
}
body[data-page="damage-report-form"] #reportsList .glass-card > .grid p:first-child {
font-size: var(--fs-caption);
font-weight: var(--font-medium, 500);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-secondary);
margin-bottom: 0;
flex: none;
}
body[data-page="damage-report-form"] #reportsList .glass-card > .grid p:last-child {
font-size: var(--fs-callout);
color: var(--text-secondary);
min-width: 0;
overflow-wrap: break-word;
}
/* 3 — the description, promoted to the lead of the card. */
body[data-page="damage-report-form"] .dr-report-list > .glass-card > div:nth-child(3) {
order: 1;
}
/* Its "Beschreibung" label is redundant once the text is the lead, but it stays in
the accessibility tree rather than being deleted outright. */
body[data-page="damage-report-form"] #reportsList .glass-card > div:nth-child(3) > p:first-child {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
body[data-page="damage-report-form"] #reportsList .glass-card > div:nth-child(3) > p:last-child {
font-size: var(--fs-body);
font-weight: var(--font-medium, 500);
line-height: 1.5;
color: var(--text-primary);
margin: 0;
text-wrap: pretty;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* 4 — submitted-at footer */
body[data-page="damage-report-form"] .dr-report-list > .glass-card > .flex.justify-end {
order: 3;
margin-top: 0;
padding-top: var(--spacing-3);
border-top: 1px solid var(--hairline);
}
body[data-page="damage-report-form"] #reportsList .glass-card > .flex.justify-end p {
font-size: var(--fs-caption);
color: var(--text-secondary);
}
/* -----------------------------------------------------------------------------
7. PAGE: /tools/damage-reports-details.html — one report
-------------------------------------------------------------------------- */
body[data-page="damage-report-form"] .dr-detail-header {
padding: var(--dr-block-pad);
margin-bottom: var(--dr-block-gap);
}
body[data-page="damage-report-form"] .dr-detail-title {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--spacing-2);
}
body[data-page="damage-report-form"] .dr-refno {
font-family: var(--font-sans);
font-size: var(--fs-headline);
font-weight: var(--font-semibold, 600);
font-variant-numeric: tabular-nums;
color: var(--text-secondary);
}
body[data-page="damage-report-form"] .dr-detail-meta {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: var(--spacing-2);
flex: none;
}
body[data-page="damage-report-form"] .dr-meta-line {
font-size: var(--fs-caption);
color: var(--text-secondary);
margin: 0;
text-align: right;
}
/* Narrative in the main column, photo evidence beside it. */
body[data-page="damage-report-form"] .dr-detail-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--dr-block-gap);
align-items: start;
}
body[data-page="damage-report-form"] .dr-detail-main,
body[data-page="damage-report-form"] .dr-detail-side {
display: flex;
flex-direction: column;
gap: var(--dr-block-gap);
min-width: 0;
}
body[data-page="damage-report-form"] .dr-detail-actions {
display: flex;
justify-content: flex-end;
}
body[data-page="damage-report-form"] .dr-gallery {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--spacing-3);
}
body[data-page="damage-report-form"] .dr-gallery:empty {
display: none;
}
/* First photo reads as the establishing shot. */
body[data-page="damage-report-form"] .dr-gallery > *:first-child {
grid-column: 1 / -1;
}
body[data-page="damage-report-form"] .dr-gallery > * {
border-radius: var(--radius-sm);
overflow: hidden;
border: 1px solid var(--glass-border);
background: var(--glass-secondary);
}
body[data-page="damage-report-form"] .dr-gallery img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
transition: transform 0.25s ease;
}
body[data-page="damage-report-form"] .dr-gallery > *:hover img,
body[data-page="damage-report-form"] .dr-gallery > *:focus-visible img {
transform: scale(1.03);
}
/* The JS-injected custom-questions card follows the same block rhythm. */
body[data-page="damage-report-form"] #customQuestionsSection > .glass-card {
padding: var(--dr-block-pad);
margin-bottom: 0;
}
body[data-page="damage-report-form"] #customQuestionsSection h3 {
font-family: var(--font-sans);
font-size: var(--fs-callout);
font-weight: var(--font-semibold, 600);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-secondary);
margin-bottom: var(--spacing-4);
}
/* Numbered steps. The digit comes from a CSS counter, so nothing is hardcoded and
a conditionally hidden step (insurance) renumbers the rest automatically. */
body[data-page="damage-report-form"] .dr-step:not(.hidden) {
counter-increment: dr-step;
}
body[data-page="damage-report-form"] .dr-step:not(.hidden) .dr-step-title::before {
content: counter(dr-step);
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.9em;
height: 1.9em;
flex: none;
border-radius: 50%;
background: color-mix(in srgb, var(--accent-primary) 16%, transparent);
border: 1px solid color-mix(in srgb, var(--accent-primary) 38%, transparent);
color: color-mix(in srgb, var(--accent-primary) 45%, var(--text-primary));
font-variant-numeric: tabular-nums;
letter-spacing: 0;
}
body[data-page="damage-report-form"] .dr-file-input:focus-visible + .upload-prompt .glass-button {
outline: 2px solid var(--accent-primary);
outline-offset: 2px;
}
/* -----------------------------------------------------------------------------
9. WIDE SCREENS (>=64em)
-------------------------------------------------------------------------- */
@media (min-width: 64em) {
body[data-page="damage-report-form"] {
--dr-block-pad: var(--spacing-7);
--dr-block-gap: var(--spacing-5);
}
/* Detail page: narrative | evidence */
body[data-page="damage-report-form"] .dr-detail-grid {
grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
}
body[data-page="damage-report-form"] .dr-detail-side {
position: sticky;
top: var(--spacing-4);
}
/* Report card: lead beside its meta, header and footer full width. */
body[data-page="damage-report-form"] .dr-report-list > .glass-card {
grid-template-columns: minmax(0, 1fr) minmax(11em, 0.42fr);
grid-template-areas:
"head head"
"lead meta"
"foot foot";
column-gap: var(--spacing-6);
}
body[data-page="damage-report-form"] .dr-report-list > .glass-card > .flex-between {
grid-area: head;
}
body[data-page="damage-report-form"] .dr-report-list > .glass-card > div:nth-child(3) {
grid-area: lead;
}
body[data-page="damage-report-form"] .dr-report-list > .glass-card > .grid {
grid-area: meta;
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-3);
}
body[data-page="damage-report-form"] .dr-report-list > .glass-card > .grid > div {
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-1);
}
body[data-page="damage-report-form"] .dr-report-list > .glass-card > .flex.justify-end {
grid-area: foot;
}
/* The public form is a reading column, not a full-width sheet. */
body[data-page="damage-report-form"] .dr-form-page {
max-width: 52em;
margin-inline: auto;
}
}
/* -----------------------------------------------------------------------------
10. PHONES (<48em)
-------------------------------------------------------------------------- */
@media (max-width: 48em) {
body[data-page="damage-report-form"] {
--dr-block-pad: var(--spacing-4);
--dr-block-gap: var(--spacing-3);
}
body[data-page="damage-report-form"] .container.p-6,
body[data-page="damage-report-form"] .dr-form-page {
padding: var(--spacing-3);
}
body[data-page="damage-report-form"] .projects-grid {
grid-template-columns: 1fr;
}
/* Header rows: title block on its own line, action full width beneath. */
body[data-page="damage-report-form"] .dr-project-headbar,
body[data-page="damage-report-form"] .dr-detail-headbar {
flex-wrap: wrap;
row-gap: var(--spacing-3);
}
body[data-page="damage-report-form"] .dr-project-ident,
body[data-page="damage-report-form"] .dr-detail-ident {
flex: 1 1 12em;
}
body[data-page="damage-report-form"] .dr-head-action {
width: 100%;
justify-content: center;
}
body[data-page="damage-report-form"] .dr-detail-meta {
flex-direction: row;
align-items: center;
flex-wrap: wrap;
width: 100%;
gap: var(--spacing-3);
}
body[data-page="damage-report-form"] .dr-meta-line {
text-align: left;
}
body[data-page="damage-report-form"] .dr-statline {
gap: var(--spacing-2) var(--spacing-5);
}
body[data-page="damage-report-form"] .dr-facts {
grid-template-columns: 1fr;
gap: var(--spacing-3);
}
body[data-page="damage-report-form"] .dr-gallery {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* Single column: the photos belong immediately after the damage description,
not after every remaining card. `display: contents` dissolves the main-column
wrapper so its sections and the evidence aside share one ordering context. */
body[data-page="damage-report-form"] .dr-detail-main {
display: contents;
}
body[data-page="damage-report-form"] .dr-detail-main > :first-child {
order: 1;
}
body[data-page="damage-report-form"] .dr-detail-side {
order: 2;
}
body[data-page="damage-report-form"] .dr-detail-main > :nth-child(n + 2) {
order: 3;
}
body[data-page="damage-report-form"] .dr-detail-actions {
order: 4;
}
body[data-page="damage-report-form"] .dr-submit-btn {
width: 100%;
}
/* The "Erledigt" affordance must stay reachable next to a long name. */
body[data-page="damage-report-form"] .dr-report-list > .glass-card > .flex-between {
flex-wrap: wrap;
row-gap: var(--spacing-2);
}
}
/* The report cards are click targets wired up in JS; make that legible on focus
even though the renderer emits a plain . */
body[data-page="damage-report-form"] .dr-report-list > .glass-card:focus-visible,
body[data-page="damage-report-form"] .project-card:focus-visible {
outline: 2px solid var(--accent-primary);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
body[data-page="damage-report-form"] .project-card,
body[data-page="damage-report-form"] .dr-report-list > .glass-card,
body[data-page="damage-report-form"] .dr-gallery img,
body[data-page="damage-report-form"] .dr-choice,
body[data-page="damage-report-form"] .dr-consent {
transition: none;
}
body[data-page="damage-report-form"] .project-card:hover,
body[data-page="damage-report-form"] .dr-report-list > .glass-card:hover,
body[data-page="damage-report-form"] .dr-gallery > *:hover img {
transform: none;
}
}
/* -----------------------------------------------------------------------------
12. CONTRAST FLOOR (AA) FOR INHERITED UTILITY RUNGS
-----------------------------------------------------------------------------
Measured with a pixel-sampling probe over the actually-rendered page (the page
background is a gradient image and every card is translucent glass, so computed
background colours cannot be used) across all five themes.
`--text-tertiary` is 55% opacity of the base text colour. Composited over these
glass cards it lands at 2.70–2.95:1 in `light` / `lightmodern` — below the 4.5:1
AA floor for the 10–12px labels these pages are full of ("Datum", "Ort",
"Referenz #41", "Eingereicht am", every `.helper-text` under a form field).
Several of those elements are emitted by js/damage-reports/*.js, which is out of
scope for this change, so the rung is remapped here in page scope instead. The
global token is untouched; only this page scope reads tertiary as secondary.
`!important` is required because the global rule carries it too — both are
unlayered, so the higher-specificity selector wins.
-------------------------------------------------------------------------- */
/* Fixed at the TOKEN level, not by out-specifying the utility class.
`.text-tertiary { color: var(--text-tertiary) !important }` ships inside a
cascade layer, and for !important declarations layer order is reversed — a
LAYERED !important beats an UNLAYERED one no matter how specific the unlayered
selector is. So the page cannot win that fight from a page stylesheet at all.
Re-pointing the custom property on the page scope sidesteps the cascade
entirely: the global rule still wins, it just now resolves to a legible value.
The hierarchy does not collapse — size, weight, uppercase and letter-spacing
carry the label rung; a third grey was never doing that work, it was only
making 10px text hard to read. */
body[data-page="damage-report-form"] {
--text-tertiary: var(--text-secondary);
--text-quaternary: var(--text-secondary);
}
/* `.helper-text` is --fs-footnote (10px, 8.75px at font-scale S). Under a form
field that is the instruction text, not a footnote — step it up a rung. */
body[data-page="damage-report-form"] .form-field .helper-text {
font-size: var(--fs-caption);
line-height: 1.45;
}
/* -----------------------------------------------------------------------------
13. SURFACE OPACITY — legibility floor for the glass cards
-----------------------------------------------------------------------------
The remaining AA failures after §12 were not a text-colour problem: they were a
SURFACE problem. `--glass-primary` is 12–14% alpha in `light` and `darkart`, so
a card is essentially a tint over the theme's background artwork, and the
effective contrast of any text on it depends on whatever pixel happens to sit
behind it. In `darkart` (a photographic backdrop) even `--text-primary` fell to
3.68:1 on the public form.
`--_glass-card-bg` is the documented per-card hook (core/glass-system-v2.css
reads it; the modal context already uses it the same way). Mixing halfway to the
modal opacity keeps the material reading as glass while giving the small legal
and helper copy a stable surface. The public form needs this most: it is filled
in on a phone, outdoors, in daylight.
-------------------------------------------------------------------------- */
body[data-page="damage-report-form"] .glass-card {
--_glass-card-bg: color-mix(in srgb, var(--glass-modal-bg) 50%, var(--glass-primary));
}