/* ── AFORIA Weihnachtsaktion — win.aforia.ch ──────────────────────────────────── Design tokens taken from aforia.ch, matching news.aforia.ch exactly so the two sites read as one brand. */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/montserrat-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/montserrat-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* The form now has selects and textareas. Without this the browser paints their popups, scrollbars and spinners in light mode on a #1E1E1E page. */ color-scheme: dark; --bg-primary: #1E1E1E; --bg-secondary: #303030; --accent-red: #A61A17; --accent-red-hover: #8c1513; --text-primary: #FFFFFF; --text-secondary: #A8A8A8; --text-placeholder: #909090; --error-red: #e74c3c; --success-green: #417505; --input-bg: #1E1E1E; --line: #3a3a3a; --border-radius: 5px; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: 'Montserrat', sans-serif; background-color: var(--bg-primary); color: var(--text-primary); line-height: 1.6; min-height: 100vh; } /* Links inside body copy must be readable on the dark card: the brand red is too dark against #303030 to carry text. Colour alone never marks a link. */ a { color: var(--text-primary); text-decoration: underline; text-underline-offset: 2px; } a:hover { color: var(--accent-red); } .header a, .btn { text-decoration: none; } .footer a { color: var(--text-secondary); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } :focus-visible { outline: 2px solid var(--accent-red); outline-offset: 3px; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ── Header ── */ /* The logo sits in the container, so it lines up with the content below it instead of floating in the viewport corner. */ .header { padding: 28px 0 10px; } .header__logo { display: block; height: 38px; width: auto; } /* ── Layout ── */ /* 1120, not 820. On a 1500px laptop the old measure left ~350px of empty background down each side and the page read as a phone layout that had been stretched. Prose does NOT follow the container out to full width — the caps below keep a readable line — but the video, the cards and the form grid do. */ .container { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 24px; } .section { padding: 32px 0; } /* German compounds are long: "Teilnahmebedingungen" alone is wider than a 320px screen at this size, and an unbreakable heading pushes the whole page sideways. `hyphens: auto` needs the lang attribute on , which is set. */ .section__title { font-size: 1.5rem; line-height: 1.25; margin-bottom: 10px; overflow-wrap: break-word; hyphens: auto; } .section__lead { color: var(--text-secondary); margin-bottom: 22px; max-width: 70ch; } .step { display: inline-block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-red); font-weight: 700; margin-bottom: 8px; } /* ── Hero ── */ /* Text left, video right, from 960px up. The video column is the wider of the two on purpose: it is the first thing the page wants a visitor to do. */ .hero { padding: 8px 0 28px; } @media (min-width: 960px) { .hero { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); grid-template-areas: "intro media" "more media"; gap: 0 44px; align-items: start; } .hero__intro { grid-area: intro; } .hero__media { grid-area: media; align-self: center; } .hero__more { grid-area: more; } } .hero__title { font-size: clamp(1.6rem, 2.7vw, 2.15rem); line-height: 1.14; margin-bottom: 14px; /* overflow-wrap but NOT hyphens. `hyphens: auto` broke the headline as "Das Herzstück für ein Zu-hause", which is a worse thing to read than a ragged right edge. overflow-wrap still stops a single long word from pushing the page sideways on a 320px screen, which is why it was here. */ overflow-wrap: break-word; } /* The second sentence is the emotional hook, so it keeps the headline colour. It is a step smaller and lighter only so that five lines of solid bold do not become the whole screen. */ .hero__title-sub { display: inline-block; font-size: .82em; font-weight: 600; margin-top: 6px; } .hero__lead { color: var(--text-secondary); font-size: 1.02rem; margin-bottom: 20px; max-width: 56ch; } /* ── The video ── */ .hero__player { position: relative; margin-bottom: 10px; border-radius: var(--border-radius); overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 12px 32px rgba(0, 0, 0, .28); } .hero__video { width: 100%; display: block; background: var(--bg-secondary); border-radius: var(--border-radius); aspect-ratio: 16 / 9; } /* Centre the complete control so the larger circle and two-line caption fit inside even a narrow phone's poster. */ .hero__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 12px; width: max-content; max-width: calc(100% - 24px); padding: 0; border: 0; border-radius: var(--border-radius); cursor: pointer; background: none; color: var(--text-primary); font: inherit; } .hero__play-icon { flex: 0 0 auto; width: 96px; height: 96px; border-radius: 50%; background: var(--accent-red); display: grid; place-items: center; box-shadow: 0 0 0 5px rgba(255, 255, 255, .1), 0 8px 24px rgba(0, 0, 0, .3); transition: transform .15s ease, background .15s ease; } .hero__play-icon svg { width: 42px; height: 42px; } .hero__play-label { display: flex; flex-direction: column; gap: 2px; max-width: 100%; padding: 9px 18px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 8px; background: rgba(20, 20, 20, .76); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 16px; font-weight: 600; line-height: 1.35; text-align: center; box-shadow: 0 4px 16px rgba(0, 0, 0, .2); } .hero__play-note { color: #dedede; font-size: 13px; font-weight: 500; letter-spacing: .02em; } .hero__caption { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; color: var(--text-secondary); font-size: 13px; } .hero__duration { flex: 0 0 auto; font-variant-numeric: tabular-nums; } .hero__play:hover .hero__play-icon { background: var(--accent-red-hover); transform: scale(1.07); } .hero__play:focus-visible { outline: none; } .hero__play:focus-visible .hero__play-icon { outline: 2px solid var(--text-primary); outline-offset: 4px; } .hero__play[hidden] { display: none; } /* Stacked layout only: the video sits between the lead and the deadline, and without this it crowds both. */ @media (max-width: 959px) { .hero__media { margin: 4px 0 22px; } } .hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 8px; } @media (max-width: 620px) { .hero__play { gap: 8px; } .hero__play-icon { width: 72px; height: 72px; } .hero__play-icon svg { width: 34px; height: 34px; } .hero__play-label { padding: 6px 10px; font-size: 13px; } .hero__play-note { font-size: 12px; } .hero__actions .btn { flex: 1 1 100%; text-align: center; } } @media (prefers-reduced-motion: reduce) { .hero__play-icon { transition: none; } .hero__play:hover .hero__play-icon { transform: none; } } /* ── Cards ── */ .card { background-color: var(--bg-secondary); border-radius: var(--border-radius); padding: 24px; } .card + .card { margin-top: 16px; } @media (max-width: 620px) { .container { padding-inline: 16px; } .card { padding: 16px; } } /* ── Form ── */ .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .grid__full { grid-column: 1 / -1; } @media (max-width: 620px) { .grid { grid-template-columns: 1fr; } } .field label { display: block; font-size: 14px; color: var(--text-secondary); margin-bottom: 5px; } .field__input { font: inherit; width: 100%; padding: 12px 13px; background: var(--input-bg); color: var(--text-primary); border: 1px solid var(--line); border-radius: var(--border-radius); } .field__input::placeholder { color: var(--text-placeholder); opacity: 1; } .field__input[aria-invalid='true'] { border-color: var(--error-red); } /* Keep the live region in the DOM, but reserve space only for actual errors. */ .field__error { color: var(--error-red); font-size: 13px; } .field__error:not(:empty) { margin-top: 4px; } /* A native select keeps its own arrow on some platforms and loses it on others once a background is set, so the affordance is drawn here and the native one suppressed. The extra right padding is the space that arrow sits in. */ select.field__input { appearance: none; padding-right: 38px; background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%238D8D8D' stroke-width='2'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; cursor: pointer; } select.field__input:invalid, select.field__input option[value=''] { color: var(--text-placeholder); } /* A 3000-character answer typed across a 1070px line is unpleasant to write and worse to re-read. The field still fills its grid cell on a phone. */ textarea.field__input { max-width: 90ch; } textarea.field__input { min-height: 116px; line-height: 1.6; resize: vertical; display: block; } .field__hint { color: var(--text-secondary); font-weight: 400; } /* Section headings inside the form card. The form is long enough now that it needs signposts; they are h3 so the page keeps one h1 and a sane outline. */ .form__heading { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); font-weight: 700; margin: 26px 0 12px; padding-top: 20px; border-top: 1px solid var(--line); } .form__heading:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .field label.checkbox { display: flex; gap: 10px; align-items: flex-start; } .checkbox input { flex: 0 0 18px; margin-top: 3px; width: 18px; height: 18px; accent-color: var(--accent-red); } .checkbox span { min-width: 0; } .honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; } /* ── Buttons ── */ .btn { font: inherit; font-weight: 600; cursor: pointer; border: 0; border-radius: var(--border-radius); padding: 13px 22px; background: var(--accent-red); color: var(--text-primary); min-height: 44px; text-decoration: none; display: inline-block; } /* `color` is set on hover as well as at rest. The two hero buttons are links, and the global `a:hover { color: red }` above was reaching them: the primary button became red text on a dark red fill, unreadable, and the ghost button turned into a solid red block. Measured, not guessed — rgb(166,26,23) on rgb(140,21,19). */ .btn:hover:not(:disabled) { background: var(--accent-red-hover); color: var(--text-primary); } .btn:disabled { opacity: .5; cursor: not-allowed; } .btn--ghost { background: transparent; border: 1px solid var(--line); } /* A ghost stays a ghost on hover: the border brightens and the fill stays near-transparent, so it never competes with the primary action beside it. */ .btn--ghost:hover:not(:disabled) { background: rgba(255, 255, 255, .06); border-color: var(--text-secondary); color: var(--text-primary); } .btn--small { padding: 8px 14px; font-size: 14px; min-height: 36px; } /* The wrapper receives hover and keyboard focus while the real button stays disabled. Touch users always have the same explanation below the button. */ .submit-control { position: relative; display: inline-block; max-width: 100%; cursor: default; } .submit-control .btn { max-width: 100%; } .submit-control .btn:disabled { cursor: default; pointer-events: none; } .submit-tooltip { position: absolute; z-index: 2; left: 0; bottom: 100%; margin-bottom: 8px; width: 320px; max-width: calc(100vw - 64px); padding: 10px 12px; background: var(--bg-primary); color: var(--text-primary); border: 1px solid #626262; border-radius: var(--border-radius); box-shadow: 0 4px 16px rgba(0, 0, 0, .3); font-size: 13px; line-height: 1.5; visibility: hidden; } /* Bridge the gap so the explanation stays open when the pointer enters it. */ .submit-tooltip::after { content: ''; position: absolute; inset: 100% 0 auto; height: 8px; } .submit-control[data-tooltip-below] .submit-tooltip { bottom: auto; top: 100%; margin: 8px 0 0; } .submit-control[data-tooltip-below] .submit-tooltip::after { inset: auto 0 100%; } .submit-control:focus-within:not([data-tooltip-dismissed]) .submit-tooltip { visibility: visible; } @media (hover: hover) { .submit-control:hover:not([data-tooltip-dismissed]) .submit-tooltip { visibility: visible; } } .submit-hint { margin-top: 10px; font-size: 13px; color: var(--text-secondary); } /* ── Upload ── */ .locked { position: relative; } .locked[data-locked='true'] .dropzone { opacity: .45; pointer-events: none; } .lock-note { display: flex; gap: 10px; align-items: flex-start; background: rgba(166, 26, 23, .12); border-left: 3px solid var(--accent-red); padding: 12px 14px; border-radius: var(--border-radius); margin-bottom: 18px; font-size: 14px; } .lock-note[hidden] { display: none; } .dropzone { border: 2px dashed var(--line); border-radius: var(--border-radius); padding: 26px 18px; text-align: center; cursor: pointer; background: rgba(0,0,0,.15); } .dropzone:hover, .dropzone.is-over { border-color: var(--accent-red); } .dropzone b { display: block; margin-bottom: 4px; } .dropzone span { color: var(--text-secondary); font-size: 13px; } .file { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; background: var(--input-bg); border-radius: var(--border-radius); padding: 12px 14px; margin-top: 12px; } .file__name { flex: 1 1 200px; min-width: 0; word-break: break-word; font-size: 14px; } .file__meta { color: var(--text-secondary); font-size: 12px; } /* Fixed column and tabular figures so the row does not reflow as the percentage counts up — otherwise the Abbrechen button shifts sideways several times a second and you end up chasing it with the pointer. */ .file__state { font-size: 13px; min-width: 14ch; text-align: right; font-variant-numeric: tabular-nums; } .file > button { margin-left: auto; flex: 0 0 auto; } .file__state--done { color: var(--success-green); } .file__state--error { color: var(--error-red); } .file progress { width: 100%; height: 6px; accent-color: var(--accent-red); } /* ── Eligibility, contents, expectations ── Three list-shaped sections that all say "check this against yourself", so they share one marker rather than inventing a look each. */ .checklist { list-style: none; } .checklist li { position: relative; padding-left: 28px; color: var(--text-secondary); font-size: 15px; line-height: 1.6; } .checklist li + li { margin-top: 12px; } .checklist li::before { content: ''; position: absolute; left: 4px; top: .55em; width: 9px; height: 9px; border-radius: 50%; background: var(--accent-red); } .checklist b { color: var(--text-primary); } .card__note { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--text-secondary); font-size: 13px; } .timeline { list-style: none; counter-reset: step; } .timeline li { position: relative; padding-left: 34px; counter-increment: step; } .timeline li + li { margin-top: 18px; } .timeline li::before { content: counter(step); position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-red); color: var(--text-primary); font-size: 12px; font-weight: 700; line-height: 22px; text-align: center; } .timeline b { display: block; font-size: 15px; } .timeline span { color: var(--text-secondary); font-size: 14px; } .hero__deadline { margin-bottom: 22px; color: var(--text-secondary); font-size: 15px; } .hero__deadline b { color: var(--text-primary); } .docs__downloads { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; } /* ── Documentation ── */ .docs__body { color: var(--text-secondary); font-size: 15px; max-width: 78ch; } .docs__body h3 { color: var(--text-primary); font-size: 15px; margin: 18px 0 6px; } .docs__body ul { margin: 0 0 0 20px; } /* ── Status ── */ .notice { border-radius: var(--border-radius); padding: 14px 16px; font-size: 14px; margin-bottom: 16px; } .notice--error { background: rgba(231, 76, 60, .12); border-left: 3px solid var(--error-red); } .notice--ok { background: rgba(65, 117, 5, .15); border-left: 3px solid var(--success-green); } .notice[hidden] { display: none; } /* ── Direct contact ── An applicant whose upload will not go through needs a person, not another retry. The compact line sits inside the upload card, where the trouble actually happens; the card below repeats it at the end of the flow for anything else. Both are plain links, so a phone opens the dialler on a phone and the address opens a mail client. */ .upload-help { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--text-secondary); font-size: 13px; } .upload-help a { color: var(--text-secondary); white-space: nowrap; } .upload-help a:hover { color: var(--accent-red); } .help { display: flex; gap: 12px; align-items: flex-start; } .help svg { flex: 0 0 auto; margin-top: 3px; color: var(--accent-red); } .help h3 { font-size: 1rem; margin-bottom: 4px; } .help p { color: var(--text-secondary); font-size: 14px; } .help__contact { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px 18px; } .help__contact a { white-space: nowrap; font-weight: 600; } .footer { padding: 28px 24px; color: var(--text-secondary); font-size: 13px; border-top: 1px solid var(--line); margin-top: 40px; } .footer a { color: var(--text-secondary); } /* ── Consent ─────────────────────────────────────────────────────────────── Same palette and the same 5px radius as the cards, so it reads as part of the page rather than as a third-party overlay bolted on top. It is a bar, not a modal: nothing here blocks the page, because a visitor who ignores it must still be able to read the rules and apply. */ .consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--bg-secondary); border-top: 3px solid var(--accent-red); box-shadow: 0 -12px 32px rgba(0, 0, 0, .45); padding: 14px max(16px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); max-height: 85vh; overflow-y: auto; } /* Explicit, the way .lock-note[hidden] is. Any later rule that gives .consent a display value would otherwise silently beat the browser's own [hidden] { display: none } and pin the banner open. */ .consent[hidden] { display: none; } .consent__inner { max-width: 820px; margin: 0 auto; padding: 0 4px; display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; } .consent__copy { flex: 1 1 300px; min-width: 0; } .consent__title { font-size: 16px; font-weight: 700; margin-bottom: 4px; } .consent__text { font-size: 13px; line-height: 1.55; color: var(--text-secondary); } .consent__text a { color: var(--text-primary); } .consent__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .consent__actions .btn { flex: 0 0 auto; } /* A button that reads as a link: it opens a panel, it does not decide anything, and giving it equal weight to the two real choices would make the decision look like three. */ .consent__more { font: inherit; font-size: 13px; background: none; border: 0; cursor: pointer; color: var(--text-secondary); text-decoration: underline; text-underline-offset: 3px; padding: 8px 4px; min-height: 36px; } .consent__more:hover { color: var(--text-primary); } .consent__details { max-width: 820px; margin: 16px auto 0; padding-top: 6px; border-top: 1px solid var(--line); } .consent__details[hidden] { display: none; } .consent__row { display: flex; gap: 16px; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--line); } .consent__row b { display: block; font-size: 14px; } .consent__row span { display: block; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); } .consent__row--fixed { opacity: .85; } .consent__always { flex: 0 0 auto; font-size: 12px; color: var(--text-secondary); border: 1px solid var(--line); border-radius: var(--border-radius); padding: 4px 9px; white-space: nowrap; } .consent__details .btn { margin-top: 14px; } /* The switch is a real checkbox with the box moved off-screen, so it keeps its keyboard behaviour, its focus ring and its accessible name. */ .consent__switch { flex: 0 0 auto; position: relative; display: inline-flex; align-items: center; width: 48px; height: 28px; cursor: pointer; } .consent__switch input { position: absolute; width: 1px; height: 1px; opacity: 0; } .consent__slider { position: absolute; inset: 0; border-radius: 999px; background: #5a5a5a; transition: background .18s; } .consent__slider::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--text-primary); transition: transform .18s; } .consent__switch input:checked + .consent__slider { background: var(--accent-red); } .consent__switch input:checked + .consent__slider::after { transform: translateX(20px); } .consent__switch input:focus-visible + .consent__slider { outline: 2px solid var(--text-primary); outline-offset: 2px; } .footer__link { font: inherit; background: none; border: 0; cursor: pointer; padding: 0; color: var(--text-secondary); text-decoration: underline; text-underline-offset: 2px; } .footer__link:hover { color: var(--accent-red); } /* Visible to a screen reader, not on screen. Used for the switch labels, whose meaning is otherwise carried only by the row heading next to them. */ .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; } @media (max-width: 620px) { .consent__inner { flex-direction: column; align-items: stretch; gap: 14px; } /* In a COLUMN flex container `flex-basis` is a height, so the 300px basis that gives the copy a sensible minimum width on a wide screen turns into a 300px-tall box on a phone — a third of the viewport of empty grey between the text and the buttons. */ .consent__copy { flex: 0 0 auto; } .consent__actions { display: grid; grid-template-columns: 1fr 1fr; } /* Narrower padding so "Alle akzeptieren" stays on one line in a half-width column; the 44px minimum touch height is set by .btn and is unaffected. */ .consent__actions .btn { padding: 12px 8px; font-size: 14px; text-align: center; } .consent__actions .consent__more { grid-column: 1 / -1; text-align: center; } .consent__row { flex-wrap: wrap; } } @media (prefers-reduced-motion: reduce) { .consent__slider, .consent__slider::after { transition: none; } }