:root { /* ——— Color Palette ——— */ --color-bg-page: #fff; --color-text: #333; --color-border: #000; --fs-h1: 2.5rem; /* ~40px */ --fs-h2: 1.7rem; /* ~32px */ --fs-h3: 1.2rem; /* 1.25 ~20px */ --space-lg: 0.5rem; } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; background: var(--color-bg-page); color: var(--color-text); font-family: sans-serif; display: flex; flex-direction: column; } h1 { font-size: var(--fs-h1); line-height: 1.2; margin-bottom: 0.5em; } h2 { font-size: var(--fs-h2); line-height: 1.25; margin-bottom: 0.75em; } h3, fieldset > legend { font-size: var(--fs-h3); font-weight: bold; line-height: 1.3; margin-bottom: 1em; } button { cursor: pointer; } a { text-decoration: none; color: inherit; } /* Screen‐reader only */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: 0; left: 0; background: var(--color-primary); color: #fff; padding: 0.5rem 1rem; transform: translateY(-100%); transition: transform 0.3s ease; z-index: 1000; } .skip-link:focus { transform: translateY(0); } /* Utility */ .svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .hidden { display: none !important; } .clearfix::after { content: ""; display: table; clear: both; } .separator { border-top: 1px solid var(--color-border); margin: var(--space-lg) 0; } button, input[type="button"], input[type="submit"], input[type="reset"] { /* Remove native appearance */ -webkit-appearance: none; -moz-appearance: none; appearance: none; /* Remove borders, background, padding/margins */ border: none; background: none; padding: 0; margin: 0; /* Inherit font styles from parent */ font: inherit; color: inherit; /* Your own cursor & outline */ cursor: pointer; outline: none; } button:focus-visible { outline: 1px solid var(--color-primary); outline-offset: 2px; } /* Optional: custom focus styling button:focus-visible, input[type="button"]:focus-visible, input[type="submit"]:focus-visible, input[type="reset"]:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } */ /* overlay telling the user to rotate back to portrait */ .rotate-notice { display: none; position: fixed; inset: 0; background: #fff; color: #333; font-size: 1.25rem; display: flex; align-items: center; justify-content: center; text-align: center; padding: 1rem; } /* when in landscape, hide your app and show notice

Bitte drehen Sie Ihr Gerät ins Hochformat (Portrait), um die Anwendung zu nutzen.

*/ body.landscape .app-container { display: none !important; } body.landscape .rotate-notice { display: flex !important; }