/* Base design of all portals (revised 02.11.2026). Customer stylesheets (<portal>/style.css) override
   the variables below, mainly --farbe-hintergrund, --farbe-text, --farbe-link and the button colour. Class names
   stay unchanged because the code sets them. */

:root {
    color-scheme: light dark;
    --farbton:346;
    --farbe-hintergrund:#f5f6f8;
    --farbe-flaeche:#ffffff;
    --farbe-text:#1f2430;
    --farbe-text-leise:#5d6575;
    --farbe-rand:#d5d9e0;
    --farbe-akzent:#33507a;
    --farbe-akzent-text:#ffffff;
    --farbe-link:#2b5aa8;
    --farbe-link-besucht:#5b3f99;
    /* mixed from surface, accent and text, so they follow customer CSS and light/dark without own values */
    --farbe-meldung:var(--farbe-flaeche);
    --farbe-meldung-titel:color-mix(in srgb, var(--farbe-text) 7%, var(--farbe-flaeche));
    /* One base colour per conversation side (customer: logo colour or second logo colour, else grey); surfaces only tinted:
       header stronger, text background lighter – mixed towards white in light, towards the background in dark mode */
    --farbe-partei-meldende:var(--farbe-akzent);
    --farbe-partei-team:#808080;
    --farbe-chat-meldende:color-mix(in srgb, var(--farbe-partei-meldende) 10%, #fff);
    --farbe-chat-meldende-titel:color-mix(in srgb, var(--farbe-partei-meldende) 28%, #fff);
    --farbe-chat-team:color-mix(in srgb, var(--farbe-partei-team) 10%, #fff);
    --farbe-chat-team-titel:color-mix(in srgb, var(--farbe-partei-team) 28%, #fff);
    /* Message text in its side's tint, header black/white */
    --farbe-chat-meldende-text:color-mix(in srgb, var(--farbe-partei-meldende) 35%, #111);
    --farbe-chat-team-text:color-mix(in srgb, var(--farbe-partei-team) 35%, #111);
    --farbe-chat-meldende-balken:var(--farbe-partei-meldende);
    --farbe-chat-team-balken:var(--farbe-partei-team);
    --farbe-chat-status:var(--farbe-text-leise);
    --farbe-chat-meldende-titel-text:#000;
    --farbe-chat-team-titel-text:#000;
    /* Input field border: at least 3:1 (WCAG 1.4.11), hence stronger than --farbe-rand */
    --farbe-feld-rand:color-mix(in srgb, var(--farbe-text) 70%, var(--farbe-flaeche));
    /* Focus ring, active field and outline icon buttons: need 3:1 against page, surface and case box (WCAG 1.4.11), which a
       button colour often misses; customers whose --farbe-akzent fails set this one (check-colors.php) */
    --farbe-akzent-linie:var(--farbe-akzent);
    --farbe-erfolg:#1e7a3a;
    --farbe-fehler:#b3261e;
    --radius:10px;
}

@media (prefers-color-scheme: dark) {
    :root {
        /* dark in the brand colour instead of black */
        --farbe-hintergrund:hsl(var(--farbton) 32% 13%);
        --farbe-flaeche:hsl(var(--farbton) 26% 17%);
        --farbe-text:#e4e7ec;
        --farbe-text-leise:#a3abb8;
        --farbe-rand:hsl(var(--farbton) 18% 29%);
        --farbe-akzent:#8fb0e6;
        --farbe-akzent-text:#0f1520;
        --farbe-link:#9dbcf2;
        --farbe-link-besucht:#c2a8f0;
        --farbe-erfolg:#7fd39a;
        --farbe-chat-meldende:color-mix(in srgb, var(--farbe-partei-meldende) 16%, #1c1c1c);
        --farbe-chat-meldende-titel:color-mix(in srgb, var(--farbe-partei-meldende) 40%, #1c1c1c);
        --farbe-chat-team:color-mix(in srgb, var(--farbe-partei-team) 16%, #1c1c1c);
        --farbe-chat-team-titel:color-mix(in srgb, var(--farbe-partei-team) 40%, #1c1c1c);
        --farbe-chat-meldende-titel-text:#fff;
        --farbe-chat-meldende-text:color-mix(in srgb, var(--farbe-partei-meldende) 20%, #fff);
        --farbe-chat-team-text:color-mix(in srgb, var(--farbe-partei-team) 20%, #fff);
        --farbe-chat-team-titel-text:#fff;
        --farbe-fehler:#ff8a80;
    }
}

/* Basics */
*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
    margin:0; background:var(--farbe-hintergrund); color:var(--farbe-text);
    font-family:var(--schrift, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);  /* --schrift: the portal's fonts.css */
    font-size:var(--schriftgroesse, 1rem); line-height:1.55;  /* sizes: the portal's fonts.css */
}
#main-content { max-width:var(--seitenbreite, calc(64ch + 2.5rem));  /* ~75 characters per line; check-fonts.php measures --seitenbreite per font */ margin:0 auto; padding:1.5rem 1.25rem 1rem; }

h1, h2, h3 { line-height:1.25; margin:0; overflow-wrap:break-word; color:var(--farbe-ueberschrift, inherit); font-family:var(--schrift-ueberschrift, inherit); }
h1 { font-size:var(--groesse-h1, 1.75rem); font-weight:700; margin:0.25rem 0 1rem; letter-spacing:-0.01em; }
h2 { font-size:var(--groesse-h2, 1.15rem); font-weight:650; margin:1.75rem 0 0.5rem; }
h3 { font-size:var(--groesse-h3, 1rem); font-weight:650; margin:1.25rem 0 0.25rem; }
p, .p-like { margin:0 0 1rem; }
/* Hyphenation by lang attribute; "pretty" avoids a single word on the last line */
p, li, .p-like { hyphens:auto; -webkit-hyphens:auto; text-wrap:pretty;
    /* only words of 10+ characters, at least 4 before and 5 after the break: no „Si-cherungen“, „Em-mendingen“, „…stel-le“ */
    hyphenate-limit-chars:10 4 5; }
/* Never hyphenate proper names: customer company, address, service provider (class set in common/text/) */
.name, .eingerueckt { hyphens:manual; -webkit-hyphens:manual; }
h1, h2, h3 { text-wrap:balance; }
.p-like { display:block; }
ul, ol { margin:0 0 1rem; padding-left:1.25rem; }
span { overflow-wrap:break-word; }

a { color:var(--farbe-link); text-underline-offset:0.15em; text-decoration-thickness:1px; }
a:visited { color:var(--farbe-link-besucht); }
a:hover { text-decoration-thickness:2px; }
:focus-visible { outline:2px solid var(--farbe-akzent-linie); outline-offset:2px; border-radius:4px; }

/* Header with logo */
.logo { display:block; float:right; max-width:220px; max-height:56px; width:auto; height:auto; margin:0 0 1.25rem 1rem; }
/* hidden mail address (helper.php): no href, hence own link styling; long addresses may wrap */
a.mail { color:var(--farbe-link); text-decoration:underline; cursor:pointer; overflow-wrap:anywhere; }
a.mail svg { vertical-align:-0.15em; }

/* Form elements */
input, textarea, select, button { font:inherit; }
input[type=text], input[type=password], input:not([type]), textarea, select {
    width:100%; padding:0.6rem 0.75rem; color:var(--farbe-text); background:var(--farbe-flaeche);
    border:1px solid var(--farbe-feld-rand); border-radius:8px;
}
textarea { resize:vertical; min-height:8rem; }
input:focus, textarea:focus, select:focus { outline:none; border-color:var(--farbe-akzent-linie); box-shadow:0 0 0 3px color-mix(in srgb, var(--farbe-akzent-linie) 25%, transparent); }
::placeholder { color:var(--farbe-text-leise); opacity:1; }

button {
    display:inline-flex; align-items:center; justify-content:center; gap:0.5em; padding:0.75rem 1.1rem; min-height:3rem; border:0; border-radius:8px; cursor:pointer;
    background-color:var(--farbe-akzent); color:var(--farbe-akzent-text); font-weight:600; line-height:1.3;
    transition:filter 0.15s;
}
button:hover { filter:brightness(1.1); }
button .symbol { width:1.2em; height:1.2em; flex:none; color:inherit; }   /* every button icon in the button's text colour (Olav, 09.11.2026) */
button:active { filter:brightness(0.95); }
/* Final steps (invalidating the token) as secondary button, not like the main action */
button[name=invalidate_token], button[name=confirmed_invalidate_token], button[name=vorgang_loeschen] { background:transparent; color:var(--farbe-fehler); border:1.5px solid var(--farbe-fehler); }

/* Label left, field right; stacked below 600px (see below) */
form.label-links { background:var(--farbe-flaeche); border:1px solid var(--farbe-rand); border-radius:var(--radius); padding:1.25rem; }
form.label-links label { display:flex; align-items:flex-start; gap:1rem; width:100%; margin-top:1.75rem; }  /* room for .hinweis-eingabe */
form.label-links label:first-of-type { margin-top:0; }
form.label-links label > :first-child { flex:0 0 32%; padding-top:0.6rem; font-weight:600; }
form.label-links label > :nth-child(2) { flex:1 1 auto; min-width:0; }
form.label-links label.breit { flex-direction:column; gap:0.35rem; }   /* description: full width instead of right column */
form.label-links label.breit > * { flex:none; width:100%; }
form.label-links label.breit > :first-child { padding-top:0; }
form.label-links button { width:100%; margin-top:1.25rem; }
p.unter-knopf { margin:0.75rem 0 0; }

/* The two buttons on the start page */
.partner-button-container { display:grid; gap:0.75rem; margin:0.75rem 0 0.5rem; }  /* buttons stacked (Olav, 08.11.2026) */
.partner-button-container > form { margin:0; }
.partner-button-container button { width:100%; }

/* Notices, status */
.font-normal  { font-style:normal; font-weight:normal; }
.font-erfolg  { color:var(--farbe-erfolg); }
.spam-falle   { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.font-fehler  { color:var(--farbe-fehler); }
.warnkasten { margin:0 0 1.25rem; padding:0.6rem 0.9rem; border:2px solid var(--farbe-fehler); border-radius:var(--radius);
    background:color-mix(in srgb, var(--farbe-fehler) 8%, var(--farbe-hintergrund)); }
.warnkasten-titel { display:flex; align-items:center; gap:0.4rem; margin:0 0 0.25rem; font-weight:700; color:var(--farbe-fehler); }
.warnkasten-titel .symbol { width:1.25em; height:1.25em; flex:none; color:inherit; }
.warnkasten > p:last-child { margin:0; }
label.loeschgrund { display:grid; gap:0.35rem; margin:0 0 1rem; font-weight:600; }
label.loeschgrund select { font-weight:400; }
.loeschprotokoll { margin-top:1.5rem; }
.loeschprotokoll summary { cursor:pointer; }
/* Deletion set apart from working on the case (Olav, 09.11.2026): own section below a line, final buttons red */
.loeschbereich { margin-top:3rem; padding-top:1.25rem; border-top:1px solid var(--farbe-rand); }
.loeschbereich h2 { margin-top:0; font-size:1.1em; }
.loeschhinweis { margin:0 0 1.25rem; padding:0.75rem 1rem; border-left:4px solid var(--farbe-fehler); border-radius:var(--radius);
    background:color-mix(in srgb, var(--farbe-fehler) 6%, var(--farbe-hintergrund)); }
.loeschhinweis p { margin:0; }
button.gefahr, button[name=sammel_ausfuehren] { background:var(--farbe-fehler); color:var(--farbe-hintergrund); border:1.5px solid var(--farbe-fehler); }
/* Team list: pencil and bin as icon buttons (Olav, 09.11.2026) */
.meldung-container > .aktionen { display:flex; gap:0.5rem; justify-content:flex-end; align-items:center; }
.aktionen form { margin:0; }
.meldung-container .symbolknopf { display:inline-flex; align-items:center; justify-content:center; width:2.75rem; min-height:2.75rem; height:2.75rem; padding:0;
    border:1.5px solid var(--farbe-akzent-linie); border-radius:var(--radius); background:transparent; color:var(--farbe-akzent-linie); }
.symbolknopf .symbol { width:1.4rem; height:1.4rem; }
.sammelliste { list-style:none; padding:0; }
.sammelliste li { display:grid; grid-template-columns:1fr 21rem; gap:0.3rem 1rem; align-items:center; margin:0 0 0.9rem; hyphens:manual; -webkit-hyphens:manual; }
.sammelliste li > label, .sammelliste li > .sammeltitel { display:flex; flex-direction:column; }
.sammelliste li > .sammelmeta { grid-column:1; }
@media (max-width:600px) { .sammelliste li { grid-template-columns:1fr; } }
.pruefliste li { display:flex; flex-direction:column; }   /* review page: text only, no selection column */
.sammelmeta { color:var(--farbe-text-leise); font-size:0.85em; }
h2.sammelgruppe { font-size:1.05em; margin:1.5rem 0 0.6rem; }
button.zweitrangig { background:transparent; color:var(--farbe-link); border:1.5px solid currentColor; }
form.sammel-start { margin:2rem 0 0; }
.font-status-abgeschlossen { color:var(--farbe-erfolg); font-weight:600; }
.font-status-offen         { color:var(--farbe-link); font-weight:600; }
.font-status-anderer       { color:var(--farbe-fehler); font-weight:600; }
.hinweis-eingabe { position:absolute!important; color:var(--farbe-text-leise); font-size:0.8rem; padding-top:0.15rem; }
.platz-fuer-hinweis { margin-bottom:0.9rem; }  /* .hinweis-eingabe sits absolutely below */
.hinweis-titel   { margin-bottom:0.25rem; color:var(--farbe-text-leise); font-size:0.85rem; }

/* Token after reporting */
.token-container {
    /* Box overhangs the text by padding+border, so the token itself is flush with the text above and below;
       size from the width (29 characters, measured: 18.9em at 0.05em letter-spacing) */
    margin:0 calc(-1rem - 2px); padding:0.75rem 1rem; text-align:center; border:2px dashed var(--farbe-akzent); border-radius:var(--radius);
    background:var(--farbe-flaeche); font-family:ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size:min(2rem, 100cqi / 18.9); letter-spacing:0.05em; white-space:nowrap; user-select:all;
}
.token-rahmen { container-type:inline-size; margin:0.5rem 0 1rem; }   /* 100cqi = text width, also without access card; containment
    prevents margin collapsing, hence the margin here instead of on the box */

/* Utility classes */
.eingerueckt   { margin-left:1.5rem; }
.neue-zeile    { clear:both; }
.label-rechts  { display:block; width:100%; }
.volle-breite  { width:100%; }
.abstand       { margin-top:1rem; }
.viel-abstand  { margin-top:1.5rem; }
.centered      { text-align:center; }
.pw-switch-button { float:right; width:fit-content!important; min-height:0; padding:0.2rem 0.6rem; margin:0!important; font-size:0.85rem; font-weight:500; }

/* Case list under /team */
.meldung-container { display:flex; flex-wrap:wrap; width:100%; background:var(--farbe-meldung); border:1px solid var(--farbe-rand); border-radius:var(--radius); overflow:hidden; margin-bottom:1rem; }
.meldung-container > :nth-child(3n + 1) { width:100%; padding:0.75rem 1rem; background:var(--farbe-meldung-titel); font-weight:600; }
.meldung-container > :nth-child(3n + 2) { width:75%; padding:0.75rem 1rem; }
.meldung-container > :nth-child(3n + 3) { width:25%; padding:0.5rem 1rem 0.5rem 0; margin:auto; }
.meldung-container button { width:100%; }

/* Conversation of a case */
.chat-text { white-space:pre-wrap; overflow-wrap:break-word; margin:0; }
.chat-meldende-person, .chat-team { border:1px solid; border-radius:var(--radius); overflow:hidden; margin-bottom:1rem; }
.chat-meldende-person { background:var(--farbe-chat-meldende); margin-right:12%; border-color:var(--farbe-chat-meldende-titel); border-left:5px solid var(--farbe-chat-meldende-balken); }
.chat-team { background:var(--farbe-chat-team); margin-left:12%; border-color:var(--farbe-chat-team-titel); border-right:5px solid var(--farbe-chat-team-balken); }
/* Icon before the header: speech bubble = reporter, building = reporting office; colour follows the text */
.chat-meldende-person > :first-child::before, .chat-team > :first-child::before {
    content:""; display:inline-block; width:1.1em; height:1.1em; margin-right:0.45em; vertical-align:-0.2em;
    background:currentColor; -webkit-mask:var(--symbol) center/contain no-repeat; mask:var(--symbol) center/contain no-repeat; }
.chat-meldende-person > :first-child { --symbol:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 3h16a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H9l-5 4v-4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z'/></svg>"); }
.chat-team > :first-child { --symbol:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 21V4l9-2v5l9 2v12H3zm3-3h3v-2H6v2zm0-4h3v-2H6v2zm0-4h3V8H6v2zm7 8h3v-2h-3v2zm0-4h3v-2h-3v2zm4 4h2v-2h-2v2zm0-4h2v-2h-2v2z'/></svg>"); }
.chat-meldende-person > *, .chat-team > * { padding:0.6rem 1rem; }
.chat-meldende-person > :nth-child(odd) { background:var(--farbe-chat-meldende-titel); color:var(--farbe-chat-meldende-titel-text); font-size:0.85rem; }
.chat-team > :nth-child(odd) { background:var(--farbe-chat-team-titel); color:var(--farbe-chat-team-titel-text); font-size:0.85rem; }
.chat-meldende-person .chat-text { color:var(--farbe-chat-meldende-text); }
.chat-team .chat-text { color:var(--farbe-chat-team-text); }
.chat-system { margin:0 0 1rem; font-style:italic; font-size:0.9rem; color:var(--farbe-chat-status); text-align:center; }
.chat-grenze { font-weight:600; margin:0.5rem 0 1rem; }

/* Illustrated design (helper.php illustriert()): icons in link colour, whose contrast is already ensured */
.symbol { width:1.6em; height:1.6em; flex:none; color:var(--farbe-link); }
.schritte { display:grid; grid-template-columns:repeat(auto-fit, minmax(9rem, 1fr)); align-items:stretch; gap:0.5rem 1rem; margin:1rem 0 1.25rem; padding:0; }
.schritt { display:grid; grid-template-columns:auto 1fr; column-gap:0.5rem; align-content:start;
    /* Tinted card, not a border: a button-coloured frame would look clickable (Olav, 09.11.2026) */
    background:color-mix(in srgb, var(--farbe-akzent) 9%, var(--farbe-hintergrund)); border-radius:8px; padding:0.5rem 0.65rem; }
.schritt .symbol { grid-row:span 2; margin-top:0.1em; }
.schritt span { font-size:0.9em; color:var(--farbe-text-leise); hyphens:auto; }
.vertrauen { display:flex; align-items:flex-start; gap:0.6rem; margin:0 0 1.25rem; padding:0.5rem 0.75rem; color:var(--farbe-chat-meldende-text);
    background:var(--farbe-chat-meldende); border-left:4px solid var(--farbe-chat-meldende-balken); border-radius:var(--radius); font-size:0.95em; }
.vertrauen .symbol { color:inherit; margin-top:0.15em; }
.vertrauen ul { margin:0; padding:0; list-style:none; }
.vertrauen li { display:inline; }
.vertrauen li + li::before { content:" · "; }
.knopfreihe { display:grid; gap:0.75rem; }
button.knopf-erfolg { background:var(--farbe-erfolg); color:var(--farbe-hintergrund); }
.fehlerseite { text-align:center; margin-top:2rem; }
.fehlerseite > .symbol { width:4.5rem; height:4.5rem; stroke-width:1.5; }
.fehlerseite h1 { margin-top:0.5rem; }
.fristen-info { margin:0 0 1.5rem; }
.fristen-info ul { margin:0.5rem 0; }
fieldset.gruppe { margin:0 0 1.5rem; padding:0; border:0; min-width:0; }
/* Without illustrations the same markup is shown plain: no card frame, no symbol, no group titles */
body.plain .zugangskarte { display:block; padding:0; border:0; background:none; }
body.plain .zugangskarte > .symbol, body.plain fieldset.gruppe > legend { display:none; }
body.plain .zugangskarte > div > * { margin-left:0; margin-right:0; }   /* undo the narrow-screen card insets */
fieldset.gruppe legend { padding:0; margin:0 0 0.9rem; font-weight:700; font-size:1.05em; color:var(--farbe-ueberschrift, inherit); }
.zugangskarte { display:flex; align-items:flex-start; gap:0.75rem; margin:0 0 1.5rem; padding:1rem calc(1.75rem + 2em) 1rem 1rem; background:var(--farbe-flaeche);
    border:2px solid var(--farbe-akzent); border-radius:var(--radius); }
.zugangskarte h2 { margin-top:0.8rem; }   /* visibly as much space as below the last button (34 px, measured) */
.zugangskarte > .symbol { width:2em; height:2em; margin-top:0.2em; }
.zugangskarte > div { min-width:0; flex:1; }
.zugangskarte > div > :last-child { margin-bottom:0; }
#token_copy_response:empty { display:none; }
.plakette { display:inline-block; padding:0 0.6rem; border:1px solid currentColor; border-radius:999px; font-size:0.85em; font-weight:600; }
.plakette-offen { color:var(--farbe-link); }
.plakette-fertig { color:var(--farbe-erfolg); }
.plakette-anders { color:var(--farbe-fehler); }
.frist { font-size:0.85em; }
.frist-gruen { color:var(--farbe-text-leise); }
.frist-gelb::before { content:"⏳ "; }
.frist-rot { color:var(--farbe-fehler); font-weight:600; }
.frist-rot::before { content:"⚠ "; }

/* Footer */
div.footer { clear:both; margin-top:2.5rem; font-size:clamp(0.75rem, 0.85em, 0.875rem);   /* smaller than body text, even where that is small (Schmolck 14px) */
    color:var(--farbe-text-leise); }
hr.footer { border:0; border-top:1px solid var(--farbe-rand); margin:0 0 0.75rem; }
hr.quellen { border:0; border-top:1px solid var(--farbe-rand); margin:2rem 0 1.25rem; }
div.fuss-zeile { display:grid; grid-template-columns:1fr auto 1fr; align-items:baseline; gap:0.25rem 1rem; }
.fuss-mitte { justify-self:center; }
.fuss-rechts { justify-self:end; text-align:right; }
/* Separator "•" only between parts of the same line (Olav, 09.11.2026): every part carries one (left: before, right:
   after); the list overhangs the group edge by its width and is clipped there – exactly the separator that would
   stand at the line break. */
.fuss-links, .fuss-rechts { overflow:clip; overflow-clip-margin:3px; }   /* 3px: focus ring stays visible */
.fuss-liste { display:block; }
.fuss-teil { display:inline-block; }
.fuss-links .fuss-teil::before, .fuss-rechts .fuss-teil::after { content:"•" / ""; display:inline-block; width:1.2em; text-align:center; }
.fuss-links .fuss-liste { margin-left:-1.2em; }    /* separator at line start lies in the clipped strip */
.fuss-rechts .fuss-liste { margin-right:-1.2em; }  /* likewise at line end */
details.sprachmenue { position:relative; }
details.sprachmenue summary { cursor:pointer; color:var(--farbe-link); list-style:none; }
details.sprachmenue summary::-webkit-details-marker { display:none; }
details.sprachmenue summary::after { content:" ▾"; }
details.sprachmenue[open] summary::after { content:" ▴"; }
details.sprachmenue ul { position:absolute; bottom:100%; left:50%; transform:translateX(-50%); z-index:1; margin:0 0 0.25rem; padding:0.35rem 0; list-style:none;
    background:var(--farbe-flaeche); border:1px solid var(--farbe-rand); border-radius:0.375rem; box-shadow:0 2px 8px rgb(0 0 0 / 0.15); }
details.sprachmenue li a { display:block; padding:0.3rem 0.9rem; white-space:nowrap; }
/* Narrow: "Sprache:" hidden only visually (screen readers still read it), so the footer stays on one line */
@media (max-width:30rem) { .schmal-aus { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } }

/* Narrow screens */
@media (max-width:600px) {
    /* Page margin (Olav, 09.11.2026): boxes and buttons one line width (2px) from the screen edge, left, right and
       bottom; the text stands in one column flush with the token text (--rand: 2px gap, 2px border, 2px padding,
       2px dashed line, 2px to the token – one line width everywhere). */
    #main-content { --rand:10px; padding:1rem var(--rand) 2px; }
    #main-content :is(form.label-links, .zugangskarte, .vertrauen, .warnkasten, .loeschhinweis, form.sammel-start, .meldung-container, .partner-button-container, .volle-breite):not(:is(form.label-links, .zugangskarte, .meldung-container) *) { margin-left:calc(2px - var(--rand)); margin-right:calc(2px - var(--rand)); }
    #main-content .volle-breite:not(:is(form.label-links, .zugangskarte, .meldung-container) *) { width:calc(100% + 2 * var(--rand) - 4px); }
    .meldung-container { width:auto; }
    .schritte { grid-template-columns:1fr; margin-left:calc(2px - var(--rand)); margin-right:calc(2px - var(--rand)); }
    .schritt { padding:0.5rem calc(var(--rand) - 2px); }
    .warnkasten { padding-left:calc(var(--rand) - 4px); padding-right:calc(var(--rand) - 4px); }
    .loeschhinweis { padding-left:calc(var(--rand) - 6px); padding-right:calc(var(--rand) - 2px); }   /* left: 2px gap + 4px bar; right: 2px gap */
    .token-container { margin:0 calc(2px - var(--rand)); padding-left:calc(var(--rand) - 4px); padding-right:calc(var(--rand) - 4px); }
    h1 { font-size:min(var(--groesse-h1, 1.75rem), 1.5rem); }
    .logo { max-width:160px; max-height:44px; }
    .label-rechts { width:100%!important; float:none!important; }
    form.label-links { padding:1rem calc(var(--rand) - 3px); }   /* 2px margin + 1px border */
    form.label-links label { flex-direction:column; gap:0.35rem; }
    form.label-links label > :first-child { flex:none; padding-top:0; }
    form.label-links label > :nth-child(2) { width:100%; }
    .meldung-container > :nth-child(3n + 2), .meldung-container > :nth-child(3n + 3) { width:100%; padding:0.5rem calc(var(--rand) - 3px); }
    .chat-meldende-person { margin-right:1.5rem; }
    .chat-team { margin-left:1.5rem; }
    .eingerueckt { margin-left:1rem; }
    /* Narrow access card (Olav, 09.11.2026): key next to the heading, token box and buttons only one
       line width (2px) from the edge; text flush with token and page text. Card content starts 6px from the screen
       (2px gap, 2px border, 2px padding), the token text additionally after the dashed line (2px) and padding. */
    .zugangskarte { display:grid; grid-template-columns:auto 1fr; column-gap:0.5rem; align-items:center; padding:0.75rem 2px 2px; }
    .zugangskarte > div { display:contents; }
    .zugangskarte > div > * { grid-column:1 / -1; margin-left:calc(var(--rand) - 6px); margin-right:calc(var(--rand) - 6px); }
    .zugangskarte > .symbol { margin:0 0 0 calc(var(--rand) - 6px); }
    .zugangskarte > div > h2 { grid-column:2; margin:0; }
    /* Margins do not collapse in a grid: the paragraphs space the token, the buttons close off the bottom */
    .zugangskarte > div > .token-rahmen { margin:0 0 1rem; }
    .zugangskarte > div > .knopfreihe { margin:0; }
    .zugangskarte .token-container { margin:0; padding:0.75rem calc(var(--rand) - 8px);   /* top/bottom as on desktop (Olav, 09.11.2026) */
        font-size:min(2rem, (100cqi - 2 * var(--rand) + 12px) / 18.9); }
}

/* Print: without buttons and footer, e.g. for the token */
@media print {
    button, div.footer { display:none; }
    body { background:#fff; color:#000; }
    /* Dark mode and customer CSS set light text – invisible on paper */
    :root { --farbe-hintergrund:#fff!important; --farbe-flaeche:#fff!important; --farbe-text:#000!important;
            --farbe-text-leise:#444!important; --farbe-ueberschrift:#000!important; --farbe-link:#000!important;
            --farbe-link-besucht:#000!important; --farbe-rand:#999!important;
            --farbe-chat-meldende:#fff!important; --farbe-chat-team:#fff!important;
            --farbe-chat-meldende-titel:#fff!important; --farbe-chat-team-titel:#fff!important;
            --farbe-chat-meldende-text:#000!important; --farbe-chat-team-text:#000!important;
            --farbe-chat-meldende-titel-text:#000!important; --farbe-chat-team-titel-text:#000!important;
            --farbe-chat-status:#444!important;
            --farbe-chat-meldende-balken:#000!important; --farbe-chat-team-balken:#888!important; }
}