:root {
--paper:#fff; --surface:#fff; --ink:#1f2530; --muted:#515966;
--accent:#1c2a9a; --accent-hover:#141f78; --wash:#f5f6f8; --line:#d9dce2;
--stage-text:#e1e6fc; --deadline-bg:#f6dd6f; --deadline-ink:#252215;
--control:#747b86; --warn:#65471d; --warn-bg:#f4ead7;
--body:"Public Sans",system-ui,sans-serif; --display:var(--body);
}
* { box-sizing:border-box; }
html { font-size:100%; scroll-padding-top:1.5rem; }
body { margin:0; background:var(--paper); color:var(--ink); font:1.125rem/1.6 var(--body); overflow-wrap:anywhere; }
[hidden] { display:none!important; }
a { color:inherit; text-underline-offset:.22em; }
a:hover { text-decoration-thickness:2px; }
button,input,select,textarea { font:inherit; color:inherit; }
button,select,summary { cursor:pointer; }
button { border:0; }
button,a,summary { touch-action:manipulation; }
p,h1,h2,h3,dl { margin:0; }
svg { display:block; }
.icon-sprite { position:absolute; width:0; height:0; overflow:hidden; }
.type-icon { width:1.375rem; height:1.375rem; flex:none; }
.category-title-row { display:flex; align-items:flex-start; gap:.75rem; min-width:0; }
.category-title-row .type-icon { width:1.75rem; height:1.75rem; margin-top:.125rem; }
.category-title-row .category-title { min-width:0; }
:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
.hero :focus-visible { outline-color:var(--deadline-bg); }
.wrap { width:calc(100% - 6rem); max-width:1248px; margin-inline:auto; }
.skip { position:absolute; top:0; left:1rem; transform:translateY(-140%); padding:.75rem 1rem; background:var(--surface); z-index:20; }
.skip:focus { transform:translateY(.5rem); }
.preview-bar { padding:.45rem 0; color:var(--muted); font-size:.8125rem; border-bottom:1px solid var(--line); }
.site-header { display:flex; align-items:center; justify-content:space-between; gap:2rem; padding-block:1.1rem; }
.wordmark { display:inline-flex; align-items:center; gap:.65rem; min-height:48px; font-size:1.25rem; font-weight:650; letter-spacing:-.04em; text-decoration:none; max-width:100%; min-width:0; }
.wordmark>span:last-child { min-width:0; }
.brand-symbol { font-size:2rem; letter-spacing:-.1em; line-height:1; margin-right:.2rem; }
.brand-symbol>span { color:var(--accent); }
nav { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1.75rem; }
nav a { display:inline-flex; align-items:center; gap:.5rem; min-height:48px; text-decoration:none; }
nav a:hover { text-decoration:underline; }
.site-header nav { font-size:1rem; }
.provider-link { color:var(--accent); }
.hero { color:var(--surface); background:var(--accent); padding:2.25rem 2.5rem; border-radius:5px; margin-top:.5rem; }
.hero-top { display:flex; justify-content:space-between; align-items:center; gap:2rem; }
.hero-top>div { min-width:0; }
.eyebrow { color:var(--muted); font-size:.875rem; font-weight:550; margin-bottom:.75rem; }
.hero .eyebrow { color:var(--stage-text); }
h1 { font:550 clamp(2.5rem,3.6vw,3.5rem)/1.12 var(--display); letter-spacing:-.045em; }
.intro { color:var(--stage-text); margin-top:.75rem; font-size:1.125rem; }
.home-search { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) auto; gap:.85rem; align-items:end; margin-top:1.75rem; }
form>*,.home-search>*,.search-fields>*,.field-grid>*,.category-grid>*,.result>*,.home-result>*,.detail-layout>* { min-width:0; }
label { display:block; font-size:.9375rem; font-weight:550; margin-bottom:.4rem; line-height:1.5; }
input,select { width:100%; min-height:52px; border:1px solid var(--control); border-radius:3px; background:var(--surface); color:var(--ink); padding:.75rem .85rem; font-size:1rem; }
input::placeholder { color:var(--muted); opacity:1; }
input[type="date"] { min-width:0; }
select { padding-right:1.75rem; text-overflow:ellipsis; }
.hero-search-button,.primary,.secondary { display:inline-flex; justify-content:center; align-items:center; min-height:52px; padding:.8rem 1.25rem; gap:1.75rem; border-radius:3px; font-size:1rem; font-weight:550; text-decoration:none; line-height:1.5; }
.hero-search-button { color:var(--accent); background:var(--surface); border:1px solid var(--surface); }
.hero-search-button:hover { background:var(--stage-text); }
.primary { color:var(--surface); background:var(--accent); border:1px solid var(--accent); }
.primary:hover { background:var(--accent-hover); }
.secondary { color:var(--ink); background:var(--surface); border:1px solid var(--control); }
.secondary:hover { background:var(--wash); }
h2 { font-size:1.75rem; line-height:1.3; font-weight:550; letter-spacing:-.03em; }
h3 { font-size:1.4rem; line-height:1.35; font-weight:550; letter-spacing:-.025em; }
.section-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem 2rem; }
.inline-link { display:inline-flex; align-items:center; gap:1rem; min-height:48px; color:var(--accent); font-size:1rem; text-decoration:none; }
.inline-link:hover { text-decoration:underline; }
.categories { padding-top:2.25rem; }
.category-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr)); gap:1rem; margin-top:1rem; }
.category-link { display:flex; flex-direction:column; min-height:208px; gap:.7rem; padding:1.5rem; border:1px solid transparent; border-radius:7px; text-decoration:none; background:#f0f2fc; color:var(--ink); }
.category-title { font-size:1.5rem; line-height:1.2; font-weight:600; letter-spacing:-.035em; max-width:20ch; }
.category-description { font-size:1rem; line-height:1.55; max-width:30ch; }
.category-bottom { display:flex; justify-content:space-between; align-items:center; gap:.75rem; margin-top:auto; padding-top:.85rem; }
.category-count { font-size:.8125rem; line-height:1.45; font-weight:400; }
.category-arrow { font-size:1.5rem; line-height:1; }
.category-auftraege { color:var(--surface); background:var(--accent); }
.category-foerderung,.category-preise { background:#fcf2c1; }
.category-ausstellungen,.category-mentoring { background:#f1f2f5; }
.category-link:hover { border-color:var(--accent); }
.category-link:hover .category-title { text-decoration:underline; text-underline-offset:.2em; }
.category-auftraege:hover { background:var(--accent-hover); }
#category-browse { margin-top:1.25rem; gap:.5rem; }
.category-type { display:inline-flex; align-items:center; gap:.5rem; min-height:48px; padding:.65rem 1rem; border:1px solid var(--control); border-radius:3px; font-size:1rem; text-decoration:none; }
.category-type[aria-current="true"] { color:var(--surface); background:var(--accent); border-color:var(--accent); }
.category-type:hover { text-decoration:underline; }
.browse-other { margin-top:1rem; }
.browse-other>summary { width:max-content; max-width:100%; border-color:var(--line); }
.other-category-links { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr)); gap:.25rem 1.5rem; padding:1rem 0; }
.browse-link { font-size:1rem; }
.browse-link span { min-width:0; }
.browse-link[aria-current="page"] { font-weight:650; color:var(--accent); }
.site-header nav a[aria-current="page"],.site-footer nav a[aria-current="page"] { color:var(--accent); text-decoration:underline; text-decoration-thickness:2px; }
.search-tools { margin-top:1.5rem; }
.search-tools>.finder { margin-top:1rem; }
.search-page:not(.is-category)>.search-tools>summary { display:none; }
.search-tools>summary { width:max-content; max-width:100%; }
summary { display:flex; align-items:center; justify-content:space-between; gap:1rem; list-style:none; min-height:52px; padding:.75rem 1rem; border:1px solid var(--control); border-radius:3px; font-size:1rem; background:var(--surface); }
summary::-webkit-details-marker { display:none; }
details[open]>summary span { transform:rotate(45deg); }
.home-opportunities { padding-top:1.75rem; padding-bottom:3.25rem; }
.section-note { font-size:.9375rem; color:var(--muted); margin-top:.4rem; }
.segmented { display:inline-flex; align-items:center; flex-wrap:wrap; gap:.25rem; padding:.2rem; border:1px solid var(--control); border-radius:3px; }
.segmented button { background:var(--surface); color:var(--muted); font-size:.9375rem; padding:.6rem .85rem; min-height:48px; border-radius:2px; }
.segmented button[aria-pressed="true"] { color:var(--surface); background:var(--accent); }
.segmented button:hover { text-decoration:underline; }
#home-results { margin-top:1.25rem; }
.home-result { display:grid; grid-template-columns:minmax(0,1fr) 11rem; align-items:center; gap:2rem; border-top:1px solid var(--line); padding:1.25rem 0; }
.home-result:last-child { border-bottom:1px solid var(--line); }
.kind { display:flex; align-items:center; gap:.5rem; color:var(--accent); font-size:.875rem; font-weight:550; margin-bottom:.5rem; }
.kind>span { min-width:0; }
.calendar-kind { display:flex; align-items:center; gap:.5rem; }
.home-result h3 a { display:inline-flex; align-items:center; gap:1.5rem; min-height:48px; text-decoration:none; }
.home-result h3 a:hover { color:var(--accent); text-decoration:underline; }
.home-signal { color:var(--muted); font-size:.9375rem; margin-top:.35rem; }
.deadline-block { background:var(--deadline-bg); color:var(--deadline-ink); border-radius:3px; padding:.85rem 1rem; align-self:start; }
.deadline-label { font-size:.8125rem; font-weight:550; margin-bottom:.35rem; line-height:1.4; }
.deadline { font-weight:650; font-variant-numeric:tabular-nums; }
.deadline-block .deadline { display:flex; align-items:baseline; flex-wrap:wrap; gap:.3rem .4rem; }
.deadline-day { font-size:1.6rem; letter-spacing:-.04em; line-height:1.2; }
.deadline-month { font-size:.875rem; font-weight:550; }
.all-chances { margin-top:1.5rem; }
.back-link { display:inline-flex; align-items:center; min-height:48px; font-size:1rem; color:var(--accent); margin-bottom:1.5rem; }
.search-page { padding-block:1.25rem 3.5rem; }
.search-heading h1 { font-size:clamp(2.25rem,3.5vw,3rem); }
.search-heading-title { display:flex; align-items:flex-start; gap:1rem; }
.search-heading-title h1 { min-width:0; }
#search-heading-icon .type-icon { width:2.5rem; height:2.5rem; color:var(--accent); margin-top:.375rem; }
.search-heading>p { color:var(--muted); margin-top:.75rem; }
.finder { margin-top:2rem; border:1px solid var(--line); background:var(--wash); padding:1.5rem; border-radius:3px; }
.search-fields { display:grid; grid-template-columns:1.3fr 1fr 1fr 1.2fr; gap:1rem; align-items:end; }
#more-filters { margin-top:1rem; }
#more-filters>summary { max-width:15rem; background:transparent; }
.advanced-filters { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem; padding-top:1.5rem; }
fieldset { border:0; padding:0; margin:0; min-width:0; }
legend { font-weight:600; font-size:1rem; margin-bottom:1rem; padding:0; }
fieldset>div+div { margin-top:1rem; }
.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.full-field { grid-column:1 / -1; }
.filter-help { color:var(--muted); font-size:.875rem; margin-top:.75rem; }
.filter-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1rem; margin-top:1.25rem; }
.text-button { color:var(--accent); background:transparent; min-height:48px; padding:.5rem; font-size:.9375rem; text-decoration:underline; text-underline-offset:.22em; }
.text-button:hover { background:var(--wash); }
#filter-error { margin-top:1rem; padding:.75rem; border:1px solid var(--warn); background:var(--warn-bg); color:var(--warn); }
.opportunities { margin-top:2.5rem; }
#results-title { display:flex; align-items:center; flex-wrap:wrap; gap:.5rem 1rem; }
.count { font-size:.9375rem; font-weight:400; letter-spacing:0; color:var(--muted); }
.selection-row { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:start; gap:1rem; margin-top:1rem; }
.selection-row:has(#active-filters:empty):has(#reset[hidden]) { display:none; }
#active-filters { display:flex; flex-wrap:wrap; gap:.5rem; }
.filter-chip { display:inline-flex; align-items:center; gap:.65rem; padding:.6rem .85rem; min-height:48px; border:1px solid var(--control); border-radius:3px; background:var(--surface); font-size:.9375rem; text-align:left; line-height:1.4; }
.filter-chip:hover { background:var(--wash); }
.list-controls { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; margin-top:1.25rem; }
.results-note { font-size:.9375rem; color:var(--muted); max-width:60ch; }
.sort-control { width:245px; }
.sort-control label { font-size:.875rem; }
.result { display:grid; grid-template-columns:11rem minmax(0,1fr); gap:2rem; border-bottom:1px solid var(--line); padding:1.75rem 0; }
.result:first-child { border-top:1px solid var(--line); margin-top:1.25rem; }
.result-title { font-size:1.5rem; max-width:55ch; }
.result-title a { text-decoration:none; }
.result-title a:hover { color:var(--accent); text-decoration:underline; }
.provider { color:var(--muted); font-size:.9375rem; margin-top:.5rem; }
.benefit { margin-top:.75rem; font-size:1.0625rem; }
.eligibility { margin-top:.4rem; font-size:1rem; }
.fee-note { margin-top:.5rem; color:var(--muted); font-size:.875rem; }
.detail-link { display:inline-flex; align-items:center; gap:1.5rem; min-height:48px; margin-top:.5rem; font-size:1rem; font-weight:550; color:var(--accent); text-decoration:none; }
.detail-link:hover { text-decoration:underline; }
.calendar-note { color:var(--muted); font-size:.9375rem; margin:1.5rem 0; max-width:75ch; }
.calendar-month { padding-top:1.5rem; border-top:1px solid var(--line); margin-top:1.5rem; }
.calendar-month h3 { font-size:1.25rem; margin-bottom:.75rem; }
.calendar-row { display:grid; grid-template-columns:11rem minmax(0,1fr); gap:2rem; padding:1rem 0; border-bottom:1px solid var(--line); }
.calendar-row a { display:inline-flex; align-items:center; min-height:48px; gap:1.5rem; text-decoration:none; font-size:1.125rem; font-weight:550; }
.calendar-row a:hover { color:var(--accent); text-decoration:underline; }
.calendar-row p { color:var(--muted); font-size:.875rem; margin-top:.2rem; }
.empty-state { padding:2rem; border:1px solid var(--line); background:var(--wash); margin-top:1.5rem; }
.empty-state p { margin:.75rem 0 1.5rem; }
.subpage { padding-block:2rem 4rem; }
.subpage h1 { font-size:clamp(2.5rem,4vw,4rem); line-height:1.1; max-width:25ch; }
.subpage .provider { margin-top:1.5rem; }
.detail-status { font-size:.9375rem; color:var(--warn); background:var(--warn-bg); padding:1rem; margin-top:1.5rem; border:1px solid var(--line); }
.detail-heading { max-width:60rem; }
.detail-heading h1 { font-size:clamp(2.1rem,3.5vw,3.2rem); max-width:32ch; }
.detail-heading .provider { margin-top:1rem; }
.source-stamp { color:var(--muted); font-size:.875rem; margin-top:.75rem; }
.detail-summary { max-width:70ch; }
.detail-summary p { margin-bottom:1rem; }
.eligibility-summary { background:#f0f2fc; padding:1.25rem; border-radius:5px; font-size:1rem; }
.detail-layout { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:3rem; margin-top:2.5rem; align-items:start; }
.detail-copy { max-width:65ch; grid-column:1; grid-row:1; }
.detail-copy p,.info-copy p { margin-bottom:1rem; }
.detail-copy section { padding-top:2rem; margin-top:2rem; border-top:1px solid var(--line); }
.detail-copy h2,.info-copy h2 { font-size:1.5rem; margin-bottom:1rem; }
.detail-copy li,.info-copy li { margin-bottom:.5rem; }
.detail-facts { background:var(--wash); border:1px solid var(--line); border-radius:5px; padding:1.5rem; grid-column:2; grid-row:1; }
.detail-facts h2 { font-size:1.25rem; margin-bottom:1.5rem; }
.detail-facts dl { display:grid; gap:1.25rem; }
.facts-note { border-top:1px solid var(--line); padding-top:1rem; margin-top:1.5rem; font-size:.875rem; color:var(--muted); }
.detail-index { margin-top:1.75rem; }
.section-index { display:flex; flex-direction:column; align-items:stretch; gap:0; }
.section-index a { display:flex; justify-content:space-between; gap:1rem; padding:.5rem 0; font-size:1rem; line-height:1.45; min-height:48px; text-decoration:none; }
.section-index a:hover { color:var(--accent); text-decoration:underline; }
.section-index a span { flex:none; }
.nav-label { font-size:.8125rem; font-weight:600; color:var(--muted); margin-block:1rem .5rem; }
.detail-index .nav-label,.info-index .nav-label { display:none; }
.detail-index .section-index { margin-top:.75rem; }
.content-section { scroll-margin-top:1.5rem; }
dt { color:var(--muted); font-size:.875rem; margin-bottom:.3rem; }
dd { font-size:1rem; margin:0; }
.deadline-fact { background:var(--deadline-bg); color:var(--deadline-ink); padding:1rem; border-radius:3px; }
.deadline-fact dt { color:inherit; }
.costs-line dd { font-size:.9375rem; color:var(--muted); }
.source-action { border-top:1px solid var(--line); padding-top:1.5rem; margin-top:2rem; }
.source-action .primary { margin-top:.5rem; }
.source-action p { font-size:1rem; max-width:65ch; margin-top:1rem; }
.info-hero { max-width:60rem; padding-bottom:1.5rem; }
.info-intro { margin-top:1.25rem; max-width:65ch; font-size:1.25rem; line-height:1.6; }
.info-ueber-uns .info-hero,.provider-hero { background:var(--accent); color:var(--surface); max-width:none; padding:2.5rem; border-radius:5px; }
.info-ueber-uns .eyebrow,.provider-hero .eyebrow { color:var(--stage-text); }
.info-ueber-uns .info-intro,.provider-hero .info-intro { color:var(--stage-text); }
.info-layout { display:grid; grid-template-columns:240px minmax(0,1fr); gap:4rem; align-items:start; margin-top:2rem; }
.info-navigation { position:sticky; top:1.5rem; }
.info-index { background:var(--wash); border:1px solid var(--line); border-radius:5px; padding:.5rem 1rem; }
.info-index>summary { background:transparent; border:0; padding:.5rem 0; font-weight:600; }
.info-index .section-index { padding-bottom:.5rem; }
.info-copy { max-width:65ch; }
.info-copy .content-section { padding-block:2rem; border-top:1px solid var(--line); }
.info-copy .content-section:first-child { border:0; padding-top:0; }
.info-copy .content-section p:last-child { margin-bottom:0; }
.info-impressum .content-section p { margin-bottom:0; }
.related-pages { display:flex; flex-wrap:wrap; gap:.5rem 2rem; border-top:1px solid var(--line); padding-top:1.25rem; }
.draft-footnote { color:var(--muted); font-size:.875rem; margin-top:1.5rem; max-width:75ch; }
.info-cta { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1.5rem; color:var(--surface); background:var(--accent); padding:2rem 2.5rem; border-radius:5px; margin-top:3rem; }
.contact-paths { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-block:1rem 2rem; }
.contact-path { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.5rem 1rem; padding:1.5rem; background:#fcf2c1; border-radius:5px; text-decoration:none; }
.contact-path strong { font-size:1.25rem; line-height:1.4; }
.contact-path span:nth-child(2) { grid-column:1; font-size:1rem; }
.contact-path span:last-child { grid-column:2; grid-row:1 / 3; align-self:center; font-size:1.5rem; }
.contact-offer { color:var(--surface); background:var(--accent); }
.contact-path:hover strong { text-decoration:underline; }
.provider-hero .hero-search-button { margin-top:1.5rem; }
.provider-layout { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:3rem; align-items:start; margin-top:2.5rem; }
.provider-step { display:grid; grid-template-columns:3rem minmax(0,1fr); gap:1rem; padding-block:1.75rem; border-top:1px solid var(--line); }
.provider-step:first-child { padding-top:0; border:0; }
.provider-step h2 { font-size:1.5rem; margin-bottom:1rem; }
.provider-step p { max-width:65ch; }
.step-number { color:var(--accent); font-size:1.5rem; font-weight:600; line-height:1.3; }
.provider-contact { background:#fcf2c1; padding:1.5rem; border-radius:5px; }
.provider-contact h2 { font-size:1.4rem; margin-bottom:1.5rem; }
.provider-contact>p { margin-top:1rem; font-size:1rem; }
.provider-contact>.eyebrow { margin-top:0; font-size:.8125rem; color:var(--ink); }
.provider-contact .copy-button { margin-top:.75rem; width:100%; }
.provider-contact .contact-address { color:var(--accent); font-weight:600; overflow-wrap:anywhere; }
.provider-contact .inline-link { font-size:1rem; }
.provider-scope { margin-top:1.25rem; color:var(--stage-text); font-size:.9375rem; }
.intake-preview { margin-top:1.25rem; border-left:3px solid var(--accent); padding:.75rem 1rem; background:var(--wash); font-size:.9375rem; }
.intake-layout { grid-template-columns:minmax(0,1fr) 300px; gap:3rem; margin-top:2rem; }
.intake-main { min-width:0; }
#offer-intake { scroll-margin-top:1.5rem; }
.intake-progress { margin-bottom:2rem; }
.intake-progress ol { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); list-style:none; padding:0; margin:0; gap:.75rem; }
.intake-progress button { display:flex; width:100%; gap:.625rem; align-items:center; text-align:left; padding:.75rem 0; min-height:52px; background:none; color:var(--ink); border-bottom:2px solid var(--line); font-size:1rem; }
.intake-progress button[aria-current="step"] { border-color:var(--accent); color:var(--accent); font-weight:650; }
.intake-progress button:disabled { cursor:default; color:var(--muted); }
.progress-number { display:grid; place-items:center; width:1.625rem; height:1.625rem; flex:none; border:1px solid var(--control); border-radius:50%; font-size:.8125rem; line-height:1; }
[aria-current="step"] .progress-number { color:var(--surface); background:var(--accent); border-color:var(--accent); }
.intake-counter { color:var(--accent); font-weight:600; font-size:.875rem; margin-bottom:.5rem; }
.intake-panel h2,.intake-receipt h2 { font-size:clamp(1.6rem,2.5vw,2rem); letter-spacing:-.03em; line-height:1.25; }
.intake-lead { color:var(--muted); margin-top:.75rem; margin-bottom:1.75rem; max-width:60ch; font-size:1rem; }
.intake-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem 1.5rem; }
.intake-wide { grid-column:1 / -1; }
.intake-fields label { font-size:1rem; line-height:1.5; }
.optional { font-weight:400; color:var(--muted); }
.intake-fields input,.intake-fields select,.intake-fields textarea,.intake-demo-controls select { width:100%; min-height:52px; max-width:100%; background:var(--surface); padding:.75rem; border:1px solid var(--control); border-radius:3px; }
.intake-fields textarea { resize:vertical; line-height:1.55; display:block; }
.intake-fields input::placeholder,.intake-fields textarea::placeholder { color:var(--muted); opacity:1; }
.intake-help { color:var(--muted); font-size:.875rem; line-height:1.6; margin-top:.5rem; }
.intake-help a { color:var(--accent); }
.intake-group { padding-top:1.75rem; margin-top:1.75rem; border-top:1px solid var(--line); }
.intake-group legend { float:left; width:100%; font-size:1.2rem; margin-bottom:1rem; }
.intake-group legend+.intake-fields,.intake-group>.intake-help { clear:both; }
.intake-group>.intake-help { margin-bottom:1.25rem; }
.intake-extra { margin-top:1.5rem; }
.intake-extra>summary { font-size:.9375rem; background:var(--wash); }
.intake-extra>.intake-fields { padding-top:1.25rem; }
.intake-kind { display:flex; align-items:center; gap:.5rem; font-size:.875rem; color:var(--accent); margin-top:.5rem; }
.intake-kind svg { stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.intake-actions { display:flex; flex-wrap:wrap; gap:.75rem 1rem; justify-content:space-between; margin-top:2rem; }
.intake-panel[data-intake-panel="0"] .intake-actions { justify-content:flex-end; }
.intake-actions .primary { font-size:1rem; }
.intake-aside { background:#fcf2c1; padding:1.5rem; border-radius:5px; }
.intake-aside>.eyebrow { color:var(--ink); font-size:.8125rem; }
.intake-aside h2 { font-size:1.4rem; line-height:1.35; margin-top:.75rem; }
.intake-aside ol { list-style:none; padding:0; margin:1.5rem 0; }
.intake-aside li { padding-block:1rem; border-top:1px solid #b8aa70; font-size:.9375rem; }
.intake-aside li>span { display:block; margin-top:.3rem; }
.intake-aside-note { font-size:.875rem; margin-bottom:.75rem; }
.intake-aside .inline-link { font-size:.9375rem; }
.intake-review { padding-block:1.5rem; border-top:1px solid var(--line); }
.review-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.25rem .75rem; margin-bottom:1rem; }
.review-heading h3 { font-size:1.2rem; }
.review-offer-title { font-size:1.45rem; font-weight:600; letter-spacing:-.025em; }
.review-description { white-space:pre-wrap; margin-top:.75rem; font-size:1rem; }
.review-facts { margin-top:1.25rem; font-size:.9375rem; }
.review-facts>div { display:grid; grid-template-columns:11rem minmax(0,1fr); gap:.25rem 1rem; padding-block:.7rem; border-bottom:1px solid var(--line); }
.review-facts dt { font-weight:550; color:var(--muted); }
.review-facts dd { margin:0; white-space:pre-wrap; min-width:0; overflow-wrap:anywhere; }
.private-review { background:var(--wash); padding:1.25rem; border:0; border-radius:3px; margin-top:1rem; }
.intake-checkbox { display:flex; align-items:flex-start; gap:.875rem; margin-top:1.75rem; font-weight:400; line-height:1.6; font-size:1rem; padding:.5rem 0; min-height:48px; cursor:pointer; }
.intake-checkbox input { flex:none; width:1.25rem; height:1.25rem; margin:.2rem 0 0; accent-color:var(--accent); }
.intake-checkbox .intake-field-error { flex-basis:100%; }
.intake-checkbox:has(.intake-field-error) { flex-wrap:wrap; }
.intake-checkbox:has(.intake-field-error)>span { flex:1; min-width:10rem; }
.intake-preview-submit { font-size:.875rem; color:var(--muted); border-left:3px solid var(--accent); padding-left:.75rem; margin-top:1.25rem; }
.intake-errors { padding:1rem 1.25rem; border:2px solid var(--warn); background:var(--warn-bg); color:var(--warn); font-size:1rem; margin-bottom:1.5rem; scroll-margin-top:1.5rem; }
.error-heading { font-weight:600; }
.intake-errors ul { padding-left:1.25rem; margin:.5rem 0 0; }
.intake-errors a { display:inline-block; padding-block:.35rem; }
.intake-fields [aria-invalid="true"] { border:2px solid var(--warn); }
.intake-field-error { color:var(--warn); font-weight:550; font-size:.875rem; margin-top:.4rem; }
.intake-demo-controls { margin-top:2rem; }
.intake-demo-controls>summary { font-size:.875rem; background:var(--wash); }
.intake-demo-controls label { font-size:.875rem; margin-top:1rem; }
.intake-receipt { padding:2rem; background:var(--wash); border-top:4px solid var(--accent); scroll-margin-top:1.5rem; }
.intake-receipt>.eyebrow { font-size:.8125rem; color:var(--accent); margin-bottom:.75rem; }
.intake-receipt>p { margin-top:1rem; font-size:1rem; }
.receipt-offer-title { font-size:1.2rem!important; font-weight:600; }
.receipt-note { color:var(--muted); }
.intake-receipt>button { margin-top:1.5rem; }
.provider-guidance { margin-top:2.5rem; }
.provider-guidance>summary { background:var(--surface); font-size:.9375rem; }
.provider-guidance .provider-steps { padding-top:1.5rem; }
.provider-guidance .provider-contact { margin-top:1rem; }
.help-layout { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:3rem; margin-top:2.5rem; align-items:start; }
.help-process h2,.help-questions h2 { font-size:1.6rem; }
.help-process ol { list-style:none; padding:0; margin:1.5rem 0 0; }
.help-process li { display:grid; grid-template-columns:2rem minmax(0,1fr); gap:1rem; border-top:1px solid var(--line); padding-block:1.5rem; }
.help-process h3 { font-size:1.2rem; }
.help-process p { margin-top:.5rem; font-size:1rem; max-width:65ch; }
.help-process .inline-link { margin-top:.75rem; font-size:1rem; }
.help-number { color:var(--accent); font-weight:650; font-size:1.25rem; }
.help-aside { background:var(--accent); color:var(--surface); padding:1.75rem; border-radius:5px; }
.help-aside .eyebrow { color:var(--stage-text); font-size:.8125rem; }
.help-aside h2 { font-size:1.6rem; line-height:1.35; margin-top:.75rem; }
.help-aside p:not(.eyebrow) { margin-top:1rem; color:var(--stage-text); font-size:1rem; }
.help-aside a { margin-top:1.5rem; font-size:.9375rem; }
.help-questions { margin-top:2rem; }
.help-questions details { margin-top:.75rem; }
.help-questions details:first-of-type { margin-top:1.5rem; }
.help-questions summary { font-size:1rem; line-height:1.5; min-height:56px; }
.help-questions details>p { padding:1rem .25rem .25rem; font-size:1rem; max-width:65ch; }
.help-questions details>.inline-link { margin:.5rem .25rem 1rem; font-size:1rem; }
.correction-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:3rem; margin-top:2rem; align-items:start; }
#correction-form>.intake-fields { margin-top:1.25rem; }
.correction-aside { padding:1.5rem; border-radius:5px; background:#fcf2c1; }
.correction-aside .eyebrow { color:var(--ink); font-size:.8125rem; }
.correction-aside h2 { font-size:1.45rem; margin-top:.75rem; line-height:1.4; }
.correction-aside p:not(.eyebrow) { margin-top:1rem; font-size:1rem; }
.correction-aside .inline-link { font-size:1rem; margin-top:1rem; }
.correction-draft { padding-top:2rem; margin-top:2rem; border-top:2px solid var(--accent); scroll-margin-top:1.5rem; }
.correction-draft h2 { font-size:1.6rem; margin-top:.5rem; }
.correction-draft>p:not(.eyebrow) { font-size:1rem; margin-top:.75rem; }
.correction-draft>label { font-size:1rem; margin-top:1.25rem; }
#correction-draft-text { display:block; width:100%; min-width:0; max-width:100%; border:1px solid var(--control); border-radius:3px; padding:1rem; line-height:1.6; font-size:1rem; background:var(--wash); resize:vertical; }
.detail-feedback { margin-top:2rem; padding-top:1rem; border-top:1px solid var(--line); font-size:.9375rem; color:var(--muted); }
.detail-feedback>a { margin-top:.5rem; color:var(--accent); }
.missing-layout { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:4rem; align-items:start; padding-block:2rem 3rem; }
.missing-layout h1 { font-size:clamp(2rem,4vw,3.25rem); line-height:1.2; letter-spacing:-.04em; margin-top:.75rem; max-width:20ch; }
.missing-layout .info-intro { font-size:1.125rem; margin-top:1.25rem; max-width:55ch; }
.missing-actions { background:#fcf2c1; padding:1.5rem; border-radius:5px; }
.missing-actions h2 { font-size:1.4rem; line-height:1.4; margin-bottom:1rem; }
.missing-actions>a { margin-top:.75rem; font-size:1rem; }
.missing-actions>.primary,.missing-actions>.secondary { display:flex; justify-content:space-between; width:100%; }
.empty-state>.inline-link { margin-top:.75rem; display:flex; width:max-content; max-width:100%; font-size:1rem; }
@media(max-width:1000px) {
.help-layout,.correction-layout { grid-template-columns:minmax(0,1fr) 260px; gap:2rem; }
.missing-layout { gap:2rem; grid-template-columns:minmax(0,1fr) 280px; }
}
@media(max-width:720px) {
.help-layout,.correction-layout,.missing-layout { grid-template-columns:1fr; gap:2rem; }
.help-aside { padding:1.5rem; }
.help-process li { grid-template-columns:1.5rem minmax(0,1fr); gap:.75rem; }
.missing-layout { padding-top:1rem; }
.correction-draft .intake-actions>button { width:100%; }
}
@media(max-width:1000px) {
.intake-layout { grid-template-columns:minmax(0,1fr) 260px; gap:1.75rem; }
.intake-fields { grid-template-columns:1fr; }
.intake-aside { padding:1.25rem; }
.review-facts>div { grid-template-columns:1fr; }
}
@media(max-width:720px) {
.provider-layout.intake-layout { grid-template-columns:1fr; }
.intake-aside { margin-top:.5rem; }
.intake-progress ol { gap:.5rem; }
.intake-progress button { gap:.4rem; font-size:.875rem; }
.intake-receipt { padding:1.5rem; }
.intake-errors { padding:1rem; }
.intake-checkbox:has(.intake-field-error)>span { min-width:0; }
}
@media(max-width:380px) {
.intake-progress button { flex-direction:column; align-items:flex-start; gap:.375rem; }
.intake-actions>button { width:100%; }
}
.copy-status:empty { display:none; }
.no-js { border:1px solid var(--control); padding:1rem; margin-top:1rem; }
.site-footer { border-top:1px solid var(--line); padding-block:2rem 1.5rem; font-size:.9375rem; color:var(--muted); }
.footer-heading,.footer-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
.footer-heading .wordmark { color:var(--ink); }
.site-footer nav { margin-top:1rem; }
.footer-bottom { padding-top:1rem; margin-top:1rem; border-top:1px solid var(--line); font-size:.8125rem; }
@media(max-width:1050px) {
.wrap { width:calc(100% - 3rem); }
.site-header { flex-wrap:wrap; gap:.5rem 2rem; }
.home-search { grid-template-columns:repeat(2,minmax(0,1fr)); }
.search-fields { grid-template-columns:repeat(2,minmax(0,1fr)); }
.advanced-filters { grid-template-columns:1fr; gap:1.5rem; }
.advanced-filters fieldset { border-top:1px solid var(--line); padding-top:1rem; }
.field-grid { max-width:100%; }
.detail-layout { grid-template-columns:minmax(0,1fr) 290px; gap:2rem; }
.info-layout { grid-template-columns:220px minmax(0,1fr); gap:2.5rem; }
.provider-layout { grid-template-columns:minmax(0,1fr) 290px; gap:2rem; }
}
@media(max-width:720px) {
.wrap { width:calc(100% - 2rem); }
.wordmark { font-size:1.08rem; }
.brand-symbol { font-size:1.75rem; }
.site-header { padding-block:.75rem; }
.site-header nav { justify-content:space-between; width:100%; gap:.2rem .8rem; font-size:.9375rem; }
.hero { padding:1.5rem 1.25rem; }
.hero h1 { font-size:clamp(2.15rem,8vw,3rem); }
.intro { font-size:1rem; }
.home-search { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.85rem .75rem; margin-top:1.5rem; }
.home-search>div:first-child,.hero-search-button { grid-column:1 / -1; }
.hero-search-button { justify-content:space-between; }
label { font-size:.875rem; }
h2 { font-size:1.5rem; }
.categories { padding-top:1.75rem; }
.category-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,13.5rem),1fr)); gap:.75rem; }
.category-link { min-height:150px; padding:1.15rem 1rem; gap:.65rem; }
.category-title { font-size:1.2rem; }
.category-description { font-size:.9375rem; }
.category-bottom { gap:.5rem; padding-top:.65rem; }
.category-count { font-size:.8125rem; }
.info-ueber-uns .info-hero,.provider-hero { padding:1.5rem; }
.info-intro { font-size:1.125rem; }
.info-layout,.provider-layout { grid-template-columns:1fr; gap:1.75rem; }
.info-navigation { position:static; }
.info-cta { padding:1.5rem; }
.contact-paths { grid-template-columns:1fr; }
.contact-path { padding:1.25rem; }
.provider-step { grid-template-columns:2.5rem minmax(0,1fr); gap:.75rem; }
.provider-contact { max-width:none; }
.home-opportunities { padding-top:1.5rem; }
.home-result { grid-template-columns:1fr; gap:.85rem; padding:1.25rem 0; }
.home-result h3 { font-size:1.25rem; }
.home-result h3 a { justify-content:space-between; width:100%; gap:1rem; }
.home-result .deadline-block { justify-self:start; }
.home-result .deadline-label { display:inline; margin:0; margin-right:.5rem; }
.home-result .deadline { display:inline; }
.home-result .deadline-day { font-size:1rem; }
.home-result .deadline-month { font-size:1rem; }
.home-result .deadline-block { padding:.65rem .85rem; }
.segmented { max-width:100%; }
.segmented button { padding:.55rem .7rem; }
.search-page { padding-top:1rem; }
.search-heading h1 { font-size:2.25rem; }
.finder { padding:1rem; margin-top:1.5rem; }
.search-fields { grid-template-columns:1fr; }
.filter-actions .primary { flex:1; justify-content:space-between; }
.opportunities { margin-top:1.75rem; }
.sort-control { width:100%; }
.result { grid-template-columns:1fr; gap:1rem; padding:1.5rem 0; }
.result .deadline-block { justify-self:start; }
.result-title { font-size:1.375rem; }
.calendar-row { grid-template-columns:1fr; gap:.5rem; }
.calendar-row .deadline-block { justify-self:start; }
.detail-layout { grid-template-columns:1fr; gap:2rem; }
.detail-facts { grid-row:1; grid-column:1; }
.detail-copy { grid-row:2; }
.subpage h1 { font-size:2.5rem; }
.footer-heading,.footer-bottom { display:block; }
.footer-heading>p,.footer-bottom p+p { margin-top:.5rem; }
.empty-state { padding:1.25rem; }
}
@media(max-width:380px) {
.home-search { grid-template-columns:1fr; }
.field-grid { grid-template-columns:1fr; }
.site-header nav .provider-link { width:100%; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; animation:none!important; scroll-behavior:auto!important; } }
@media print { .preview-bar,.site-header nav,.home-search,.finder,.segmented,.sort-control,.site-footer nav { display:none; } .wrap { width:100%; } }
/* =====================================================================================
GESAMTPROTOTYP „Runde 1 – Nikos Wahl“ (9. Oktober 2026)
Überlagerung (Overlay) über planung/design/frontseite-entwurf-2026-10-08.html (SHA256 06922bb7…, unverändert).
Nur Darstellung. Gebaut aus Schichten durch gesamt/runde1/werkzeug/runde1_bauen.py; NICHT von Hand ändern, sondern
die Teile unter css/teile/ (oder die Quellschichten, siehe unten) ändern und neu bauen.
Schichten in der Reihenfolge der Kaskade (jede Schicht trägt unten ihren Kopf mit Herkunftsdatei):
basis Richtungsprototyp (richtung/empfehlung.css) 2b A, 3b A, 4b A (= Richtung, nichts zu tun)
2a-B Weich (varianten/2-anmutung) Hero und Blauflächen FLACH (Patch), Karten weich
1a-B Textmarker (varianten/1-frist) Fristmarke als Textmarker
1b-B Frist rechts auf der Startseite (Desktop)
3a-C Zweiton-Kategoriekarten
3c-C Suchleiste überall (Desktop Leiste, Handy weiße Karte)
3d-B Umriss-Button „Ausschreibung einreichen“ (Text über js/teile/30-beschriftung.js)
4a-B getönte Hinweisfläche
4c-B Trennung über Form, zweizeilige Kostenzeile (braucht 4c-B-js)
4d-D Textlinks unterstrichen, Pfeile nur an Richtungen
5a-B Lebendig (braucht 5a-B-js statt richtung/empfehlung.js)
6a-B Faktenspalte rechts in Listen (Desktop)
6b-D Faktenband im Eintrag (Desktop)
20-konflikte NEU: Auflösung der Überschneidungen K1 bis K10 (AENDERUNGEN.md)
25-nach-pruefung NEU: Korrekturen nach der Prüfung N1 bis N7 (AENDERUNGEN.md, Abschnitt „Nach Prüfung“)
30-chevron NEU: Chevron dreht beim Öffnen (Aufklapper, Auswahlfelder)
FARBTAUSCH (nächster Schritt): Farben stehen als Variablen (Quelle: --paper, --surface, --ink, --muted, --accent, --accent-hover, --wash,
--line, --stage-text, --deadline-bg, --deadline-ink, --control, --warn, --warn-bg) und als Token in :root (--fam-*, --control-soft,
--hint-bg, --chev/--chev-up als SVG mit fester Strichfarbe #515966). Halbtransparente
Farben sind mit color-mix auf diese Variablen zurückgeführt. Fest bleiben nur #fff/#000 im Druck (@media print). Die Schrift kommt über
--body/--display der Quelle; Werte, die von der Schrift abhängen (font-weight, letter-spacing, font-variant-numeric, font-kerning),
listet AENDERUNGEN.md.
===================================================================================== */
/* #####################################################################################
SCHICHT basis: BASIS Richtungsprototyp (2b A, 3b A, 4b A = Richtungsprototyp)
Herkunft: richtung/empfehlung.css
Stellung: Grundlage; alle Wahl-Schichten gelten danach.
##################################################################################### */
/* =====================================================================================
RICHTUNGSPROTOTYP „Ruhiges Weiß, die Frist als Zeichen“
Überlagerung (Overlay) über planung/design/frontseite-entwurf-2026-10-08.html (SHA256 06922bb7…).
Gegliedert nach den Abschnitten von RICHTUNG-AUFTRAG.md. Nur Darstellung: keine Texte, Daten,
Reihenfolgen oder Routen werden verändert.
Leitsätze
1 Radius folgt Greifbarkeit Was man anfasst, ist rund. Was man liest, ist ruhig.
2 Schatten folgt Handlung Flächen liegen flach. Tiefe entsteht erst beim Zeigen oder Drücken.
3 Pfeil folgt Richtung ← zurück, ↗ zum Originalanbieter, → nur an der einen Hauptaktion
je Ansicht und an den Kategorie-Cards.
4 Gelb folgt der Frist Kräftiges Gelb gibt es nur an der Fristmarke.
5 Bewegung antwortet Kurze Rückmeldung auf Zeigen, Tippen, Öffnen; ruhiger erster Aufbau.
HINWEIS ZUR SPEZIFITÄT
Die Basisregeln der Quelle haben teils höhere Spezifität (z. B. .intake-fields input, .home-result
.deadline-label, Medienregeln mit Klassenketten). Dieses Overlay verstärkt deshalb gezielt mit dem
Präfix #main (Spezifität 1,0,0) und mit :is(). Bei der späteren Umsetzung werden die Basisregeln
selbst geändert; die Verstärkung entfällt dann.
Inhalt
0 Grundlagen und Hilfen 6 Listen und Bedienelemente
1 Token 7 Detailseite und Informationsseiten
2 Typografie 8 Übrige Flächen (Gesuch, Hilfe, Korrektur, Fehler)
3 Lesestufen 9 Bewegung
4 Fristmarke („Kalenderblatt hell“) 10 Druck und Windows-Kontrast (forced-colors)
5 Einstieg (Kopf, Hero, Cards) 11 Zugang: Fokus, Felder bei großer Schrift, Trefferflächen
NACHBESSERUNG 8. Oktober 2026 (nach drei unabhängigen Prüfungen: Zugang, Gestaltung, Browser)
Stellen, die die Prüfungen verlangt haben, sind mit [P-…] gekennzeichnet; Einzelheiten und alles, was bewusst
NICHT umgesetzt wurde, steht in richtung/AENDERUNGEN.md.
===================================================================================== */
/* =====================================================================================
0 GRUNDLAGEN
===================================================================================== */
/* Antipp-Echo: dezenter Blauton statt Systemgrau (iOS/Safari). */
:root { -webkit-tap-highlight-color: color-mix(in srgb, var(--accent) 12%, transparent); }
a, button, summary, label { -webkit-tap-highlight-color: color-mix(in srgb, var(--accent) 12%, transparent); }
/* =====================================================================================
1 TOKEN
===================================================================================== */
:root {
/* Radien: Radius folgt Greifbarkeit */
--r-ctl: 12px; /* Felder, Buttons, summary, Chips, Kategorie-Cards, Fristmarke */
--r-read: 8px; /* Leseflächen: Faktenkarte, Finder, Leerzustand, Hinweisflächen */
--r-panel: 20px; /* Hero, Anbieterkopf, Hilfe-Aside (mobil 16px, siehe unten) */
--r-pill: 999px; /* nur Segmentschalter */
/* Schatten: im Ruhezustand keine; nur beim Zeigen an Kategorie-Cards */
--shadow-lift: 0 2px 4px color-mix(in srgb, var(--ink) 5%, transparent), 0 14px 28px -14px color-mix(in srgb, var(--ink) 28%, transparent);
/* Linien: --line (#d9dce2) und --control (#747b86) bleiben wie in der Quelle.
--control-soft darf für Segmentschalter, Chips und summary genutzt werden (>= 3:1 auf Weiß und --wash). */
--control-soft: #838a95;
/* Flächen: Seite #fff; --wash (#f5f6f8) bleibt für eingesenkte Leseflächen.
Kategorie-Familien flach (Fläche, Rand, Icon/Pfeil). */
--fam-blue: #e9edfd; --fam-blue-line: #cfd7f6; --fam-blue-ink: #1c2a9a;
--fam-gold: #fdf3c8; --fam-gold-line: #e9d98f; --fam-gold-ink: #654704;
--fam-neutral: #f1f2f5; --fam-neutral-line: #d6d9e0; --fam-neutral-ink: #1f2530;
/* Bewegung: eine Kurve, drei Dauern (+ 220 ms für die Unterstreichung) */
--ease: cubic-bezier(.2, .7, .2, 1);
--dur-1: 120ms; /* Drücken */
--dur-2: 180ms; /* Farbe, Rand, Chevron, Aufklappen */
--dur-line: 220ms; /* Unterstreichung zeichnet sich ein */
--dur-3: 240ms; /* Aufbau, Aufstieg, Karten-Anheben */
/* Größen */
--fs-label: 1rem; /* Etiketten und Zähler, Untergrenze 16px */
--fs-text: 1.125rem; /* Sätze, Untergrenze 18px */
--fs-hero: clamp(2.25rem, 1.9rem + 2.6vw, 3.5rem);
--fs-h1: clamp(2.25rem, 1.5rem + 2.6vw, 3.25rem);
--fs-title: clamp(1.75rem, 1.3rem + 1.7vw, 2.5rem);
--space-section: 4rem;
/* Chevron für select und summary (Muted #515966, >= 3:1); --chev-up ist derselbe Strich gespiegelt (für den offenen Zustand unter reduce) */
--chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%23515966' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
--chev-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%23515966' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5-5 5 5'/%3E%3C/svg%3E");
}
@media (max-width: 720px) {
:root { --r-panel: 16px; --space-section: 3rem; }
}
/* =====================================================================================
2 TYPOGRAFIE (nur Public Sans)
===================================================================================== */
/* Kerning: im Fließtext aus (behebt „Wohn-oder“ statt „Wohn- oder“), in Überschriften und Zahlen an. */
body { font-kerning: none; }
h1, h2, h3, .wordmark, .category-title, .deadline-day, .deadline-month { font-kerning: normal; }
/* Ausnahme: lange Eintragstitel enthalten „Wohn- oder Arbeitssitz“; auch dort verschluckt Kerning den Leerschritt
nach dem Bindestrich („Wohn-oder“). Hier bleibt Kerning aus. */
.result-title, .result-title a, .home-result h3, .home-result h3 a, .calendar-row a, .detail-heading h1, #main .detail-heading h1 { font-kerning: none; }
/* Überschriften. H1: Gewicht 500, Zeilenhöhe 1.1.
Verstärkt mit #main: Quelle setzt H1-Größen mit .subpage h1, .search-heading h1, .missing-layout h1
und in Medienregeln (.subpage h1 {2.5rem} gewann mobil gegen .detail-heading h1: 40px bei 390). */
#main h1 { font-size: var(--fs-h1); font-weight: 500; letter-spacing: -.028em; line-height: 1.1; text-wrap: balance; }
#main .hero h1 { font-size: var(--fs-hero); letter-spacing: -.03em; }
#main .detail-heading h1 { font-size: var(--fs-title); max-width: 30ch; }
h2 { font-weight: 600; letter-spacing: -.02em; }
h3 { font-weight: 600; letter-spacing: -.015em; }
h2, h3 { text-wrap: balance; }
strong, b { font-weight: 600; }
.wordmark { letter-spacing: -.03em; }
/* Absätze */
p, li, dd, blockquote { text-wrap: pretty; }
/* [P-Browser K4] Firefox kennt text-wrap: pretty nicht: kurze Absätze dort ausgleichen statt eines Einzelworts in der letzten Zeile. */
@supports not (text-wrap: pretty) { p, li, dd { text-wrap: balance; } }
/* [P-Gestaltung] kurze Hilfs- und Beschreibungstexte ausgleichen (Einwort-Schlusszeilen wie „… / Arbeit.“) */
.category-description, .facts-note, .calendar-kind, .filter-help, .info-intro, .intake-lead, .intake-help { text-wrap: balance; }
/* [P-Browser K5] Kalenderzeile: der Titel-Link steht inline in einem div; das Ausgleichen gehört an den umgebenden Block. */
.calendar-row > div { text-wrap: balance; }
/* Silbentrennung: Desktop manuell, mobil automatisch; Überschriften, Fristmarke, Card-Titel nie.
[P-Gestaltung, P-Browser] Gemessen wirkt „8 4 4“ in Chromium nicht verlässlich (Bruchstücke unter 4 Zeichen, weil Satzzeichen
mitzählen); „8 5 5“ hält die Absicht des Auftrags (keine Bruchstücke unter 4 Buchstaben) ein.
WebKit/Safari kennt hyphenate-limit-chars nicht und setzt mit hyphens:auto das globale overflow-wrap:anywhere für lange
Zeichenketten außer Kraft (Überstand bei 320 px / 200 %): dort bleibt die Trennung aus. */
p, li, dd { hyphens: manual; }
@media (max-width: 720px) {
p, li, dd { hyphens: auto; hyphenate-limit-chars: 8 5 5; }
}
@supports (-webkit-hyphenate-limit-before: 1) and (not (hyphenate-limit-chars: 1)) {
@media (max-width: 720px) { p, li, dd { hyphens: manual; } }
}
h1, h2, h3, .deadline-block, .deadline-block *, .deadline-fact, .deadline-fact *, .category-link, .category-link * { hyphens: manual; }
/* [P-Gestaltung, Nachbesserung 2] Auf Seiten mit E-Mail-Adressen (Kontakt, Impressum, Datenschutz, Redaktion, Gesuch-Hinweise) trennt Chromium
mobil auch Adressen (support@ikonens-chmiede.de, gemessen bei 390 px). Dort bleibt die Trennung aus; ein Bindestrich in einer Adresse
wäre irreführend. Bewusste Abweichung vom Wortlaut „≤720 px hyphens:auto“ (siehe AENDERUNGEN.md). */
@media (max-width: 720px) {
:is(.info-copy, .info-hero, .provider-guidance, .provider-contact) :is(p, li, dd) { hyphens: manual; }
}
/* Zahlen der Frist: ohne Serifenfuß an der „1“ */
.deadline { font-variant-numeric: lining-nums proportional-nums; letter-spacing: 0; }
/* =====================================================================================
3 LESESTUFEN Sätze 18px, Etiketten und Zähler 16px
===================================================================================== */
/* Sätze (Untergrenze 18px). Betreiberhinweis im Footer 16px und Rechtszeile 14px siehe Abschnitt 5. */
#main :is(
.home-signal, .provider, .fee-note, .benefit, .eligibility, .eligibility-summary,
.source-action p, .source-stamp, .facts-note, .results-note, .section-note, .calendar-note,
.filter-help, .intake-help, .intake-lead, .intake-preview, .intake-preview-submit,
.intake-aside li, .intake-aside-note, .intake-checkbox, .intake-errors, .intake-field-error,
.intake-receipt > p, .review-description, .review-facts, .receipt-note,
.help-process p, .help-aside p, .help-questions details > p, .correction-aside p, .correction-draft > p,
.provider-contact > p, .provider-scope, .detail-feedback, .detail-status, .draft-footnote,
.costs-line dd, .contact-path span:nth-child(2), .missing-actions p, .empty-state p, .no-js,
.copy-status, .intro, .info-intro, .filter-error, #filter-error, #correction-draft-text
) { font-size: var(--fs-text); }
#main dd { font-size: var(--fs-text); }
/* Etiketten mit Satzlänge (>= 35 Zeichen) werden zu Sätzen und damit 18px */
#main :is(.hero .eyebrow, .intake-receipt > .eyebrow, .calendar-row p, .section-index a, .help-questions summary) { font-size: var(--fs-text); }
#main .help-aside a { font-size: var(--fs-label); }
/* Fragen in den Formularen (Gesuch, Korrektur) und lange Aufklapp-Zeilen sind Sätze, keine Etiketten */
#main :is(#offer-intake, #correction-form) label,
#main :is(.intake-extra, .intake-demo-controls) > summary { font-size: var(--fs-text); }
#main .category-description { font-size: var(--fs-text); }
.benefit { font-weight: 600; }
/* [P-Gestaltung] Eingabetext 18 px wie die Beschriftung darüber (bleibt über der 16-px-Schwelle, die den iOS-Zoom verhindert) */
#main :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea), #main #correction-draft-text { font-size: var(--fs-text); }
/* Feldhöhe bleibt 52 px (Hero 56 px): mit 18-px-Text und der Zeilenhöhe 1,6 (28,8 px) dehnten sich die Felder sonst auf 54,8 px (Abweichung vom Auftrag). */
#main :is(input:not([type="checkbox"]):not([type="radio"]), select) { padding-block: .6rem; }
/* [P-Gestaltung] Gruppenüberschriften im Gesuch stehen über den Feldbeschriftungen (vorher 16 px gegen 18 px darunter) */
#main fieldset.intake-group > legend { font-size: 1.25rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }
code, kbd, samp { font-family: inherit; font-size: inherit; } /* nur Public Sans */
/* Etiketten und Zähler (Untergrenze 16px) */
#main :is(
label, dt, legend, .kind, .eyebrow, .deadline-label, .category-count, .count, .nav-label,
.intake-counter, .intake-kind, .optional, .calendar-row p, .sort-control label,
.progress-number, .intake-progress button, .detail-link, .back-link, .inline-link, .browse-link,
.category-type, .filter-chip, .text-button, .segmented button, .site-header nav, .site-footer nav a
) { font-size: var(--fs-label); }
#main .kind, #main .eyebrow, #main .deadline-label { font-weight: 600; }
/* Die Checkbox-Beschriftung ist ein Satz, kein Etikett */
#main label.intake-checkbox { font-size: var(--fs-text); }
/* [P-Zugang M4] Kategorie-Chip mit langer Beschriftung („Atelier oder Produktionsmöglichkeit“, 35 Zeichen) ist ein Satz: 18 px.
Doppelter Klassenname, damit die Regel gegen das :is() der Etikettenregel gewinnt. */
#main a.category-type.category-type { font-size: var(--fs-text); }
.preview-bar { font-size: .875rem; } /* Ausnahme: Vorschauleiste 14px */
.site-header nav { font-size: var(--fs-label); }
/* =====================================================================================
4 FRISTMARKE „Kalenderblatt hell“
Kopfband #f6dd6f (Beschriftung als Text), darunter WEISSER Körper mit warmer Feinlinie.
Tag 40px/600, Monat und Jahr 17px/600 darunter. Position links vor dem Inhalt.
Das Fristfeld bewegt sich nie und hat keine Transition.
===================================================================================== */
.deadline-block, .deadline-fact {
position: relative; overflow: hidden; padding: 0; margin: 0;
background: var(--surface); color: var(--deadline-ink);
border-radius: var(--r-ctl); box-shadow: none; transition: none;
}
/* Feinlinie über Band UND Körper (exakt der vorgegebene Wert), ohne Pointer-Fang */
.deadline-block::after, .deadline-fact::after {
content: ""; position: absolute; inset: 0; border-radius: inherit;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--deadline-ink) 22%, transparent); pointer-events: none;
}
.deadline-block { align-self: start; min-width: 12rem; }
.deadline-fact { min-width: min(100%, 12rem); } /* [P-Zugang] Mindestbreite 12rem auch im Detail (Auftrag: „Breite mindestens 12rem“) */
.deadline-label, .deadline-fact dt {
margin: 0; padding: .4rem 1rem; background: var(--deadline-bg); color: var(--deadline-ink);
font-size: var(--fs-label); font-weight: 600; line-height: 1.3; transition: none;
}
:is(.home-result, .result, .calendar-row) .deadline-label { display: block; margin: 0; padding: .4rem 1rem; }
/* Datum mit Tag/Monat-Spans (Start, Liste): Desktop immer zwei Zeilen, konstante Höhe */
.deadline-block .deadline {
display: block; padding: .6rem 1rem .85rem; white-space: normal;
font-size: var(--fs-text); font-weight: 650; line-height: 1.3;
}
:is(.home-result, .result, .calendar-row) .deadline { display: block; }
.deadline-day { display: block; font-size: 2.5rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.05; }
.deadline-month { display: block; margin-top: .15rem; font-size: 1.0625rem; font-weight: 600; letter-spacing: 0; }
/* Faktenkarte im Detail: Band (dt) plus Datum in einer Zeile, 18px/650 */
.deadline-fact dt { color: var(--deadline-ink); }
.deadline-fact dd { margin: 0; padding: .6rem 1rem .85rem; background: var(--surface); font-size: var(--fs-text); font-weight: 650; }
/* Position: links vor dem Inhalt (Start vorher rechts) */
@media (min-width: 721px) {
.home-result { grid-template-columns: 12rem minmax(0, 1fr); gap: 2rem; align-items: start; }
.home-result > .deadline-block { grid-column: 1; grid-row: 1; }
.home-result > div:first-child { grid-column: 2; grid-row: 1; }
.result { grid-template-columns: 12rem minmax(0, 1fr); }
/* Kalender: Datum steht einzeilig (18px/650), „30. September 2026“ braucht etwas mehr Breite */
.calendar-row { grid-template-columns: 14rem minmax(0, 1fr); }
}
/* Mobil (<= 720px): waagerechter Chip über dem Titel, Band links, Datum rechts; darf umbrechen */
@media (max-width: 720px) {
.deadline-block { display: flex; flex-wrap: wrap; align-items: stretch; width: fit-content; max-width: 100%; min-width: 0; padding: 0; }
:is(.home-result, .result, .calendar-row) .deadline-block { padding: 0; justify-self: start; }
:is(.home-result, .result, .calendar-row) .deadline-label {
display: flex; align-items: center; flex: 1 1 auto; margin: 0; padding: .45rem .875rem;
}
:is(.home-result, .result, .calendar-row) .deadline {
display: flex; flex-wrap: wrap; flex: 1 1 auto; align-items: baseline; align-content: center;
column-gap: .35rem; padding: .45rem .875rem;
}
:is(.home-result, .result, .calendar-row) .deadline-day { display: inline; font-size: 1.375rem; line-height: 1.2; }
:is(.home-result, .result, .calendar-row) .deadline-month { display: inline; margin: 0; font-size: 1.0625rem; }
.home-result { grid-template-columns: 1fr; gap: .75rem; padding: 1.25rem 0; }
.home-result > .deadline-block { grid-column: 1; grid-row: 1; }
.home-result > div:first-child { grid-column: 1; grid-row: 2; }
.result, .calendar-row { grid-template-columns: 1fr; }
}
/* =====================================================================================
5 EINSTIEG Kopf, Hero, Kategorie-Cards
===================================================================================== */
/* --- 5.1 Kopf: Navigation als Text; Hover und aktiv mit 2px Unterstreichung ---------------- */
.site-header nav { gap: .25rem 1.75rem; }
.site-header nav a, .site-footer nav a { text-underline-offset: .35em; }
@media (hover: hover) {
nav a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .35em; }
}
/* [P-Zugang] Wortmarke bricht bei großer Schrift nicht mehr mitten im Namen: der Kopf darf umbrechen (Q setzt flex-wrap erst ab 1050 px) */
.site-header { flex-wrap: wrap; }
@media (min-width: 721px) { .wordmark { white-space: nowrap; } }
.site-header nav a[aria-current="page"], .site-footer nav a[aria-current="page"] {
color: var(--accent); font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .35em;
}
/* „Ausschreibung einreichen“ als gefüllter Button, ohne Pfeil */
.site-header nav a.provider-link {
justify-content: center; padding-inline: 1.25rem; border-radius: var(--r-ctl);
color: var(--surface); background: var(--accent); font-weight: 600; text-decoration: none;
}
@media (hover: hover) { .site-header nav a.provider-link:hover { background: var(--accent-hover); text-decoration: none; } }
.site-header nav a.provider-link[aria-current="page"] { color: var(--surface); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; }
.provider-link > span[aria-hidden="true"] { display: none; }
/* --- 5.2 Hero: flach, ohne Verlauf, ohne Schein, ohne Schatten ------------------------------ */
.hero, .info-ueber-uns .info-hero, .provider-hero, .info-cta, .help-aside {
background-color: var(--accent); background-image: none; box-shadow: none; border-radius: var(--r-panel);
}
.hero { padding: 2.5rem 2.75rem; }
@media (max-width: 720px) { .hero { padding: 1.5rem 1.25rem; } }
.hero input, .hero select, .hero-search-button { min-height: 56px; }
/* Pfeil im Hero-Submit entfällt (Hauptaktion der Startseite ist „Alle Chancen ansehen“) */
.home-search .hero-search-button > span[aria-hidden="true"] { display: none; }
@media (max-width: 720px) {
.home-search .hero-search-button { justify-content: center; }
/* Mobil: die zwei Textlinks stehen links zusammen; der Gesuch-Button füllt seine Zeile, wenn er umbricht */
.site-header nav { justify-content: flex-start; gap: .25rem 1.5rem; }
.site-header nav a.provider-link { flex: 1 1 auto; padding-inline: 1rem; }
/* [P-Gestaltung] Kopf mobil war 55 px höher als in der Quelle: enger gesetzt (Zielflächen bleiben 48 px) */
.site-header { padding-block: .125rem .5rem; row-gap: 0; }
}
/* --- 5.2b Rhythmus der Startseite: mehr Luft zwischen den drei Blöcken --------------------------- */
@media (min-width: 721px) {
.categories { padding-top: 3rem; }
.home-opportunities { padding-top: 3.5rem; }
}
@media (max-width: 720px) {
.section-heading { gap: .25rem 1.5rem; }
.section-heading:has(.segmented) { row-gap: .75rem; } /* Umschalter berührte die Überschrift (4 px statt 16 px in der Quelle) */
.categories { padding-top: 2.25rem; }
.home-opportunities { padding-top: 2.25rem; }
}
/* --- 5.3 Kategorie-Cards: Familienfläche flach, Icon ohne Chip, Titelzeilen per Subgrid ------ */
.category-grid { gap: 1rem; }
.category-link {
--f-bg: var(--fam-blue); --f-line: var(--fam-blue-line); --f-ink: var(--fam-blue-ink);
display: flex; flex-direction: column; gap: .75rem; min-height: 0; padding: 1.5rem;
color: var(--ink); background: var(--f-bg); border: 1px solid var(--f-line); border-radius: var(--r-ctl); box-shadow: none;
}
.category-auftraege, .category-residenzen { --f-bg: var(--fam-blue); --f-line: var(--fam-blue-line); --f-ink: var(--fam-blue-ink); }
.category-foerderung, .category-preise { --f-bg: var(--fam-gold); --f-line: var(--fam-gold-line); --f-ink: var(--fam-gold-ink); }
.category-ausstellungen, .category-mentoring { --f-bg: var(--fam-neutral); --f-line: var(--fam-neutral-line); --f-ink: var(--fam-neutral-ink); }
/* beseitigt Hover-Füllung/-Rand der Quelle (.category-auftraege:hover, .category-link:hover) */
.category-link:hover { background: var(--f-bg); border-color: var(--f-line); }
@media (max-width: 720px) {
.category-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: .75rem; }
.category-link { padding: 1.125rem; gap: .5rem; }
}
/* Titelzeile: Icon 28px in Familienfarbe links neben dem Titel, kein Chip */
.category-title-row { position: relative; display: block; min-height: 1.75rem; padding-left: 2.5rem; text-wrap: balance; }
.category-title-row .type-icon { position: absolute; left: 0; top: .125rem; width: 1.75rem; height: 1.75rem; margin: 0; color: var(--f-ink); }
.category-title {
display: inline; max-width: none; font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.25;
/* Unterstreichung: wird beim Zeigen von links gezeichnet; läuft bei zwei Zeilen fortlaufend durch beide.
[P-Browser K1] Kein box-decoration-break: clone: das schaltet text-wrap: balance in WebKit ab. */
padding-bottom: .1em;
background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
}
/* [P-Gestaltung] 20 px statt 22 px: „Ausstellungen und Kunstmessen“ passt bei 1440 px in eine Zeile, die Subgrid-Zeilen der Karten
haben dort keine Leerzeile mehr zwischen Titel und Beschreibung. */
.category-count { font-weight: 500; }
.category-arrow { color: var(--f-ink); font-size: 1.5rem; }
.category-bottom { padding-top: .5rem; }
/* Subgrid: Titel-, Beschreibungs- und Zählerzeile laufen über alle Cards einer Reihe gleich */
@supports (grid-template-rows: subgrid) {
.category-link { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: .75rem; align-content: start; }
.category-bottom { align-self: end; padding-top: 0; }
@media (max-width: 720px) { .category-link { row-gap: .5rem; } }
}
/* =====================================================================================
6 LISTEN UND BEDIENELEMENTE
===================================================================================== */
/* --- 6.1 Ergebniszeilen: gerade Haarlinien; Hover = Titel blau + Unterstreichung --------------- */
.home-result, .result, .calendar-row { border-color: var(--line); }
.home-result { padding-block: 1.5rem; }
.calendar-month { margin-top: 2.5rem; padding-top: 0; border-top: 0; }
/* [P-Browser K1] kein box-decoration-break: clone (schaltet text-wrap: balance in WebKit ab).
[P-Zugang M3] Trefferfläche: der Titel-Link wird über die ganze Zeile gestreckt (::after), das padding bläht Ring und Linie nicht mehr auf.
„Bedingungen ansehen“ liegt darüber und bleibt eigenes Ziel. */
.home-result, .result, .calendar-row { position: relative; }
.home-result h3 a, .result-title a, .calendar-row a {
display: inline; min-height: 0; gap: 0; width: auto; padding-block: .2em; text-decoration: none;
background: linear-gradient(currentColor, currentColor) 0 calc(100% + .05em) / 0 2px no-repeat;
background-origin: content-box;
}
/* z-index: 1, damit auch die (positionierte) Fristmarke in der Zeile antippbar ist; „Bedingungen ansehen“ liegt darüber (z-index: 2) */
.home-result h3 a::after, .result-title a::after, .calendar-row a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.result .detail-link { position: relative; z-index: 2; }
@media (hover: hover) {
.home-result h3 a:hover, .result-title a:hover, .calendar-row a:hover { color: var(--accent); text-decoration: none; background-size: 100% 2px; }
}
.home-result h3 a:focus-visible, .result-title a:focus-visible, .calendar-row a:focus-visible {
color: var(--accent); text-decoration: none; background-size: 100% 2px;
}
.home-result h3 a { font-size: 1.375rem; }
@media (max-width: 720px) { .home-result h3 a { font-size: 1.25rem; } }
.calendar-row a { font-size: var(--fs-text); font-weight: 600; }
.detail-link { gap: 0; font-weight: 600; }
/* --- 6.2 Pfeile: → nur an der Hauptaktion (.primary) und den Kategorie-Cards ---------------- */
:is(.inline-link, .detail-link, .secondary, .section-index a, .home-result h3 a, .result-title a) > span[aria-hidden="true"] { display: none; }
/* [P-Zugang] Im Leerzustand steht nur ein Pfeil je Ansicht (Hauptaktion bleibt „Auswahl anzeigen“) */
#main .empty-state > .primary > span[aria-hidden="true"] { display: none; }
.inline-link, .back-link { gap: .5rem; }
/* --- 6.3 Segmentschalter, Chips, Felder --------------------------------------------------- */
.segmented { gap: 2px; padding: 4px; background: var(--surface); border: 1px solid var(--control-soft); border-radius: var(--r-pill); }
.segmented button { min-height: 48px; padding: .6rem 1.1rem; background: transparent; color: var(--muted); font-weight: 550; border-radius: var(--r-pill); }
@media (hover: hover) { .segmented button:hover { text-decoration: none; background: var(--wash); color: var(--ink); } }
.segmented button[aria-pressed="true"], .segmented button[aria-pressed="true"]:hover { background: var(--accent); color: var(--surface); font-weight: 600; }
.filter-chip, .category-type { border: 1px solid var(--control-soft); border-radius: var(--r-ctl); background: var(--surface); font-weight: 550; }
.category-type[aria-current="true"] { color: var(--surface); background: var(--accent); border-color: var(--accent); }
@media (hover: hover) {
.category-type:hover { text-decoration: none; background: var(--wash); }
.category-type[aria-current="true"]:hover { background: var(--accent-hover); }
}
/* Felder 52px (Hero 56px), Radius 12, Rand #747b86 (aus der Quelle); Select mit Chevron.
Kontrollkästchen und Radios bleiben unberührt. */
#main :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
#correction-draft-text { border-radius: var(--r-ctl); }
#main input[type="search"] { -webkit-appearance: none; appearance: none; }
/* [P-Zugang M5] Chevron und Abstand in px: das Symbol wächst bei großer Schrift nicht mit, der Text bekommt die Breite */
#main select {
-webkit-appearance: none; appearance: none; text-overflow: ellipsis;
background: var(--surface) var(--chev) no-repeat right 12px center; padding-right: 40px;
/* [Nachbesserung 2] Der gewählte Text darf umbrechen, statt mit „…“ gekürzt zu werden (lange Eintragsauswahl im Korrekturformular,
„Alle Kunstformen“ bei 320/390 px und 200 % Text). Das Feld wird dann zwei Zeilen hoch. In Chromium und WebKit gemessen. */
white-space: normal;
}
/* Datumsfelder: WebKit rechnet das innere Feld höher (53,2 px statt 52 px); feste Höhe in rem (wächst mit der Schrift), kein zusätzlicher Innenabstand */
#main input[type="date"]:not([type="checkbox"]):not([type="radio"]) { height: 3.25rem; padding-block: 0; } /* Spezifität über der Feldregel in Abschnitt 3 */
@media (hover: hover) {
#main :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):hover { border-color: var(--ink); }
}
.primary, .secondary, .hero-search-button { border-radius: var(--r-ctl); gap: .75rem; }
@media (hover: hover) { .secondary:hover, .text-button:hover { background: var(--wash); } }
.filter-actions .primary { white-space: normal; min-width: min(100%, 13rem); } /* Filter-Button mobil darf umbrechen */
/* --- 6.4 Aufklappen (details/summary): ruhige Fläche, Chevron statt „+“/„ד ------------------ */
#main summary {
min-height: 52px; background: var(--surface); border: 1px solid var(--control-soft); border-radius: var(--r-ctl);
box-shadow: none; font-size: var(--fs-label);
}
@media (hover: hover) { #main summary:hover { background: var(--wash); } }
#main .info-index > summary { background: transparent; border: 0; border-radius: 0; padding: .5rem 0; font-weight: 600; }
#main .info-index > summary:hover { background: transparent; }
#main :is(.intake-extra, .intake-demo-controls) > summary { background: var(--wash); }
#main #more-filters > summary { background: transparent; }
#main summary > span[aria-hidden="true"] {
flex: none; width: 1.25rem; height: 1.25rem; font-size: 0; line-height: 0;
background: var(--chev) center / contain no-repeat;
}
#main .help-questions details > p { padding-inline: 0; } /* Antwort bündig mit dem Rand der Frage-Fläche */
/* [P-Zugang] Öffnen: ohne Bewegungswunsch dreht sich der Chevron (180 ms); unter reduce gibt es keinen Transform-Sprung,
stattdessen wechselt das Bild (Chevron nach oben). Verstärkt mit #main, weil die Quelle details[open]>summary span {rotate(45deg)} setzt. */
#main details[open] > summary > span[aria-hidden="true"] { transform: none; background-image: var(--chev-up); }
@media (prefers-reduced-motion: no-preference) {
#main details[open] > summary > span[aria-hidden="true"] { transform: rotate(180deg); background-image: var(--chev); }
}
/* --- 6.5 Antipp-Echo (Touch) ---------------------------------------------------------------
[P-Zugang M2] Der Auftrag nennt .75; dabei fällt gedämpfter Text (#515966 auf Weiß) im Echo auf 3,84:1 und verletzt die Leitplanke
„Textkontrast mindestens 4,5:1“. Die Leitplanke geht vor: .85 hält 4,86:1. */
@media (hover: none) {
a:active, button:active, summary:active { opacity: .85; }
}
/* =====================================================================================
7 DETAILSEITE UND INFORMATIONSSEITEN
===================================================================================== */
/* Faktenkarte: flach in --wash, Radius 8, ohne Schatten, NICHT sticky; Raster bis 999px nach rem */
.detail-facts { position: static; align-self: start; padding: 1.5rem; background: var(--wash); border: 0; border-radius: var(--r-read); box-shadow: none; }
.detail-facts dl { gap: 1.25rem; }
.detail-facts dt { font-size: var(--fs-label); }
/* [ÜBERNOMMENER GESTALTUNGSVORSCHLAG, einer von höchstens einem] Detailseite ab 1000 px: Die Faktenkarte steht rechts auf Höhe
des Titelblocks statt erst darunter. Die Frist ist damit ohne Scrollen sichtbar, die rechte obere Fläche ist nicht mehr leer.
Nur Anordnung (display: contents am Layout-Wrapper, keine Markup-Änderung, nicht sticky, Reihenfolge im DOM unverändert).
Die Zeile des Textes ist 1fr, damit die höhere Faktenkarte den Text nicht nach unten schiebt. */
@media (min-width: 1000px) {
.detail-page { display: grid; grid-template-columns: minmax(0, 1fr) 290px; column-gap: 2rem; grid-template-rows: auto auto minmax(0, 1fr); align-items: start; }
.detail-page > .back-link { grid-column: 1 / -1; grid-row: 1; justify-self: start; }
.detail-page > .detail-heading { grid-column: 1; grid-row: 2; }
.detail-page > .detail-layout { display: contents; }
.detail-page .detail-facts { grid-column: 2; grid-row: 2 / span 2; }
.detail-page .detail-copy { grid-column: 1; grid-row: 3; margin-top: 2.5rem; }
}
@media (min-width: 1051px) {
.detail-page { grid-template-columns: minmax(0, 1fr) 330px; column-gap: 3rem; }
}
@media (max-width: 999px) {
.detail-layout { grid-template-columns: minmax(0, 1fr); }
.detail-facts { grid-row: 1; grid-column: 1; }
.detail-facts dl { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 1.25rem 1.5rem; }
.detail-facts .deadline-fact { align-self: start; } /* das Kalenderblatt wächst nicht auf Zeilenhöhe */
.detail-copy { grid-row: 2; grid-column: 1; max-width: 40rem; }
}
/* Voraussetzungen und Hinweisblöcke: offene „Ausstellungsbeschriftung“
(keine Tönung, 2px Linie oben in Tinte, Label 16px/600, Text 18px) */
#main :is(.eligibility-summary, .detail-status, .intake-preview, .intake-preview-submit) {
background: none; border: 0; border-top: 2px solid var(--ink); border-radius: 0; padding: .875rem 0 0; color: var(--ink);
max-width: 65ch; /* die Linie endet mit der Zeilenlänge des Textes */
}
#main :is(.eligibility-summary, .intake-preview) > strong:first-child {
display: block; margin-bottom: .25rem; font-size: var(--fs-label); font-weight: 600;
}
.eligibility-summary { margin-top: 1.5rem; }
.intake-preview, .intake-preview-submit { margin-top: 1.5rem; }
/* [P-Gestaltung] Gesuch und Korrektur: Die Tintenlinie reicht über die ganze Spalte statt nach 65ch irgendwo zu enden (716 px Linie in
1248 px Spalte, keine Kante getroffen); der Text bleibt bei 65ch. Der Entwurfstext der Korrektur trägt die Tintenlinie statt der blauen. */
#main :is(.intake-preview, .intake-preview-submit) { max-width: none; padding-right: max(0px, calc(100% - 65ch)); } /* Linie so breit wie die Spalte, Text bleibt bei 65ch */
.correction-draft { border-top-color: var(--ink); }
/* Abschnitte durch Abstand trennen (4rem, mobil 3rem), keine zusätzlichen Linien */
.detail-copy section { padding-top: 0; margin-top: var(--space-section); border-top: 0; }
.info-copy .content-section { padding-block: 0; margin-top: var(--space-section); border-top: 0; }
.info-copy .content-section:first-child { margin-top: 0; }
/* [P-Gestaltung] Seitenende: Die Haarlinie der „Weiteren Seiten“ klebte am letzten Absatz (Abstand 0 statt 32 px in der Quelle) */
nav.related-pages { margin-top: var(--space-section); }
/* Quellenpanel „Dein nächster Schritt“: Linie, kein Schatten; Button 56px, Radius 12 */
.detail-copy .source-action { padding-top: 1.5rem; border-top: 2px solid var(--ink); }
.source-action .primary { min-height: 56px; font-weight: 600; }
.detail-feedback { margin-top: var(--space-section); padding-top: 0; border-top: 0; font-size: var(--fs-text); }
.section-index a { color: var(--accent); border-radius: var(--r-ctl); } /* Akzent ersetzt den entfallenen ↓ als Link-Hinweis */
.section-index a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; }
/* [P-Zugang M6] Die klebende Inhaltsübersicht der Infoseiten war bei großer Schrift höher als das Fenster (936 bis 1490 px): der untere Teil
war nicht erreichbar, der Tastaturfokus lag außerhalb. Sie steht jetzt im Fluss. (Ein Rahmen mit eigenem Scrollen würde die
Fokusringe am Rand abschneiden.) */
.info-navigation { position: static; }
/* Flächen der Informationsseiten */
.finder, .empty-state, .info-index, .private-review, .intake-receipt { background: var(--wash); border: 0; border-radius: var(--r-read); }
.intake-receipt { border-top: 0; }
/* =====================================================================================
8 ÜBRIGE FLÄCHEN Gesuch, Hilfe, Korrektur, Fehler, Kontakt
Gelb ist der Frist vorbehalten: die bisherigen Gold-Flächen werden ruhige --wash-Lesebereiche.
===================================================================================== */
.intake-aside, .correction-aside, .missing-actions, .provider-contact { background: var(--wash); border-radius: var(--r-read); }
.intake-aside li { border-top-color: var(--line); }
.contact-path { background: var(--fam-neutral); border: 1px solid var(--fam-neutral-line); border-radius: var(--r-ctl); }
.contact-path.contact-offer { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.intake-errors, #filter-error, .detail-status { border-radius: var(--r-read); }
.intake-progress .progress-number { width: 2rem; height: 2rem; }
.intake-progress ol { flex: 1 1 100%; min-width: 0; } /* Die Schrittliste füllt die Breite (in der Quelle schrumpft sie auf Inhaltsbreite) */
.intake-progress button { gap: .625rem; }
/* Schrittanzeige mobil: Nummer über der Beschriftung (so bleibt sie auch bei 200 % Text im Raster) */
@media (max-width: 720px) {
.intake-progress button { flex-direction: column; align-items: flex-start; gap: .375rem; min-width: 0; }
.intake-progress button > span:not(.progress-number) { min-width: 0; overflow-wrap: anywhere; }
}
.site-footer { font-size: var(--fs-label); }
.footer-heading p { font-size: var(--fs-text); }
.footer-bottom { font-size: var(--fs-label); } /* Betreiberhinweis 16px */
.footer-bottom p:last-child { font-size: .875rem; } /* Rechtszeile 14px (Ausnahme) */
/* =====================================================================================
9 BEWEGUNG
Nur transform, opacity, Farbe, Rand, Schatten; block-size nur für Aufklapp-Panels.
Alles unter prefers-reduced-motion: no-preference, Hover zusätzlich unter (hover: hover).
Die Reset-Regel der Quelle (prefers-reduced-motion: reduce) bleibt bestehen.
===================================================================================== */
/* Zeigen ohne Bewegung: Schatten und Unterstreichung der Cards bleiben auch unter reduce erhalten
(kein Transform, keine Transition). */
.category-link:hover .category-title { text-decoration: none; } /* die Quelle unterstreicht den Titel beim Zeigen als Text; hier zeichnet sich stattdessen die Linie */
@media (hover: hover) {
.category-link:hover { box-shadow: var(--shadow-lift); }
.category-link:hover .category-title { background-size: 100% 2px; }
}
.category-link:focus-visible .category-title { background-size: 100% 2px; }
/* [P-Browser K3] Kein klebender Hover-Zustand auf Touch: Auf einem Gerät ohne Zeiger (hover: none) bleibt :hover nach dem Tippen stehen
(gemessen in iPhone-WebKit und Chromium-Touch: Hintergrund und Unterstreichung blieben). Die Hover-Regeln dieser Überlagerung stehen
deshalb unter (hover: hover); die Hover-Regeln der Quelle werden hier für Touch auf den Ruhewert zurückgesetzt. */
@media (hover: none) {
nav a:hover, .inline-link:hover, .category-type:hover, .segmented button:hover, .detail-link:hover,
.contact-path:hover strong, .section-index a:hover { text-decoration: none; }
.hero-search-button:hover { background: var(--surface); }
.primary:hover { background: var(--accent); }
.secondary:hover { background: var(--surface); }
.text-button:hover { background: transparent; }
.filter-chip:hover { background: var(--surface); }
.home-result h3 a:hover:not(:focus-visible), .result-title a:hover:not(:focus-visible), .calendar-row a:hover:not(:focus-visible) { color: inherit; text-decoration: none; }
}
@media (prefers-reduced-motion: no-preference) {
/* Zustände: Farbe und Heben 180 ms, Drücken 120 ms, Unterstreichung 220 ms; 240 ms nur für den Aufbau */
a, button, summary { transition: color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), opacity var(--dur-1) var(--ease); }
input, select, textarea { transition: border-color var(--dur-2) var(--ease); }
.home-result h3 a, .result-title a, .calendar-row a {
transition: color var(--dur-2) var(--ease), background-size var(--dur-line) var(--ease), opacity var(--dur-1) var(--ease);
}
.category-link {
transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), opacity var(--dur-1) var(--ease);
}
.category-title { transition: background-size var(--dur-line) var(--ease); }
#main summary > span[aria-hidden="true"] { transition: transform var(--dur-2) var(--ease); }
.deadline-block, .deadline-block *, .deadline-fact, .deadline-fact * { transition: none; animation: none; }
/* Zeiger: Card hebt sich */
@media (hover: hover) {
.category-link:hover { transform: translateY(-2px); }
}
/* Touch: Card gibt beim Drücken leicht nach (120 ms) */
@media (hover: none) {
.category-link:active { transform: scale(.985); transition-duration: var(--dur-1); }
}
/* Weiches Öffnen von details (Progressive Enhancement: nur wo ::details-content und interpolate-size greifen) */
@supports (interpolate-size: allow-keywords) and selector(details::details-content) {
:root { interpolate-size: allow-keywords; }
details::details-content {
block-size: 0; overflow: clip; overflow-clip-margin: 20px;
transition: block-size var(--dur-2) var(--ease), content-visibility var(--dur-2) allow-discrete;
}
details[open]::details-content { block-size: auto; }
}
/* Erster Aufbau der Startseite, einmal pro Sitzung (Klasse setzt empfehlung.js):
Hero und Kartenraster gemeinsam als EIN Block, 240 ms, nur translateY(6px) → 0,
ohne Opazitätsblende, kein nth-child-Versatz. */
@keyframes aufbau { from { transform: translateY(6px); } to { transform: none; } }
#home-view.aufbau > .hero, #home-view.aufbau > .categories { animation: aufbau var(--dur-3) var(--ease) backwards; }
/* Fehlerbox, Bestätigung und vorbereiteter Text erscheinen mit 240 ms Aufstieg (Formularschritte bleiben still) */
@keyframes aufstieg { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.intake-errors:not([hidden]), #filter-error:not([hidden]), #correction-errors:not([hidden]),
.intake-receipt:not([hidden]), .correction-draft:not([hidden]) { animation: aufstieg var(--dur-3) var(--ease) backwards; }
}
/* =====================================================================================
10 DRUCK UND WINDOWS-KONTRAST
===================================================================================== */
@media print {
.category-link, .category-link:hover, .detail-facts, .hero { box-shadow: none; }
.category-title { background: none; }
/* [P-Zugang M8] Ohne Hintergrundgrafiken (Browser-Standard) druckte weiße Schrift auf Blau blassgrau (2,3:1): blaue Flächen werden
im Druck weiß mit schwarzer Schrift und Rahmen. */
.hero, .provider-hero, .info-ueber-uns .info-hero, .help-aside, .info-cta { background: #fff !important; color: #000 !important; border: 1px solid #000; }
:is(.hero, .provider-hero, .info-ueber-uns .info-hero, .help-aside, .info-cta) * { color: #000 !important; }
.primary, .hero-search-button, .contact-offer, .category-type[aria-current="true"] { background: #fff !important; color: #000 !important; border: 1px solid #000 !important; }
.contact-offer * { color: #000 !important; }
/* zugeklappte Antworten und Listen drucken mit; der Chevron entfällt */
details::details-content { content-visibility: visible !important; block-size: auto !important; overflow: visible !important; }
details > summary > span[aria-hidden="true"] { display: none; }
}
@media (forced-colors: active) {
:root { --shadow-lift: none; }
.category-link, .category-link:hover { box-shadow: none; }
.deadline-block, .deadline-fact { border: 1px solid CanvasText; }
.deadline-block::after, .deadline-fact::after { display: none; }
#main select { -webkit-appearance: auto; appearance: auto; background-image: none; padding-right: .85rem; }
#main summary > span[aria-hidden="true"] { font-size: inherit; width: auto; height: auto; background: none; }
#main details[open] > summary > span[aria-hidden="true"] { transform: none; background-image: none; }
.hero, .info-ueber-uns .info-hero, .provider-hero, .info-cta, .help-aside { border: 1px solid CanvasText; }
.category-title, .home-result h3 a, .result-title a, .calendar-row a { background-image: none; }
.home-result h3 a:hover, .result-title a:hover, .calendar-row a:hover { text-decoration: underline; }
/* [P-Zugang M7] Aktive Zustände waren im Kontrastmodus nicht mehr erkennbar (nur über Farbfläche getragen): Highlight-Fläche */
.segmented button[aria-pressed="true"], .category-type[aria-current="true"] {
forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight;
}
.intake-progress button[aria-current="step"] { text-decoration: underline; }
/* [P-Zugang M7] Eingesenkte Flächen und Bänder verlieren im Kontrastmodus ihre Fläche: Kontur ergänzen */
.detail-facts, .finder, .empty-state, .info-index, .private-review, .intake-receipt, .intake-aside,
.correction-aside, .missing-actions, .provider-contact { border: 1px solid CanvasText; }
.site-header nav a.provider-link { border: 1px solid LinkText; }
.deadline-label, .deadline-fact dt { border-bottom: 1px solid CanvasText; }
}
@media (forced-colors: active) and (prefers-reduced-motion: no-preference) {
#main details[open] > summary > span[aria-hidden="true"] { transform: rotate(45deg); } /* „+“ wird „ד */
}
/* =====================================================================================
11 ZUGANG Fokus, Felder bei großer Schrift, Trefferflächen [P-Zugang]
===================================================================================== */
/* [P-Zugang M1] Fokusring auf blauen Flächen: Die Quelle färbt ihn nur im Hero gelb. Hilfe-Aside, Über-uns-Kopf, Anbieterkopf und
Info-CTA trugen Akzent auf Akzent (Ring unsichtbar, 1,0:1). Gelber Ring #f6dd6f auf #1c2a9a: 8,39:1. Outline-Maße bleiben gleich. */
:is(.hero, .provider-hero, .info-ueber-uns .info-hero, .info-cta, .help-aside) :focus-visible { outline-color: var(--deadline-bg); }
/* [P-Zugang M5, M5b] Felder bei großer Schrift (320 px, 200 % Text): Bei 200 % waren die Auswahlfelder im Start-Hero leer, weil Spalten
in fr/px, Innenabstände und Seitenränder aber in rem rechnen. Jetzt umbrechen Spalten statt zu quetschen (Breiten in rem wachsen mit
der Schrift), und Seitenrand und Innenabstände wachsen nicht mit (px-Deckel). */
.sort-control { width: min(100%, 18rem); }
.field-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.field-grid > .full-field { grid-column: 1 / -1; }
/* Hero bis 720 px: Suchfeld und Button über die volle Breite, die zwei Auswahlfelder nebeneinander, solange sie 8,5rem haben */
.home-search { grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr)); }
.home-search > div:first-child, .home-search .hero-search-button { grid-column: 1 / -1; }
.search-fields { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.search-fields > .keyword-field { grid-column: 1 / -1; }
@media (min-width: 721px) {
.home-search { display: flex; flex-wrap: wrap; align-items: end; }
.home-search > div:first-child { flex: 1.5 1 min(100%, 18rem); }
.home-search > div:not(:first-child) { flex: 1 1 min(100%, 11rem); }
.home-search .hero-search-button { flex: 0 0 auto; }
.search-fields { display: flex; flex-wrap: wrap; align-items: end; }
.search-fields > .keyword-field { flex: 1.3 1 min(100%, 16rem); }
.search-fields > div:not(.keyword-field) { flex: 1 1 min(100%, 11rem); }
}
/* [P-Zugang Nachbesserung 2] Gesuch-Formular zwischen 721 und 900 px: Die Quelle stellt Formular und Aside nebeneinander. Das Formular
war bei 768 px nur 367 px breit, das Beispiel im Titelfeld (439 px) wurde abgeschnitten. Bis 900 px steht das Aside unter dem Formular
(Reihenfolge im Dokument bleibt gleich, wie auf dem Handy). Ab 901 px bleibt alles nebeneinander. */
@media (max-width: 900px) { #main .intake-layout { grid-template-columns: minmax(0, 1fr); } #main .intake-aside { margin-top: .5rem; } }
@media (max-width: 1050px) { .wrap { width: calc(100% - min(3rem, 48px)); } }
@media (max-width: 720px) {
.wrap { width: calc(100% - min(2rem, 32px)); }
.hero { padding-inline: min(1.25rem, 20px); }
.finder { padding: min(1rem, 16px); }
}
#main :is(input, select) { padding-inline-start: min(.85rem, 14px); }
#main input:not([type="checkbox"]):not([type="radio"]) { padding-inline-end: min(.85rem, 14px); }
/* Grenze der Technik: Platzhalter (einzeilig) und der gewählte Wert nativer Auswahlfelder kürzt der Browser mit „…“, wenn der Text breiter ist als das
Feld (bei 320/390 px und 200 % Text unvermeidbar: z. B. „Alle Kunstformen“ = 291 px Text bei 288 px Fensterbreite). Die Beschriftung darüber bleibt
vollständig; das geöffnete Auswahlmenü zeigt alle Einträge. Siehe AENDERUNGEN.md. */
/* [P-Zugang M9] Fehlerliste im Formular: Sprunglinks 48 px hoch (waren 40 px) */
.intake-errors a { display: inline-flex; align-items: center; min-height: 48px; }
/* #####################################################################################
SCHICHT 2a-B: 2a B Weich (Hero und Blauflächen flach, siehe PATCHES)
Herkunft: varianten/2-anmutung/css/2a-b-weich.css
Stellung: Ändert Radius-Token, Karten-, Summary- und Faktenkarten-Schatten; muss vor 3a C stehen, das die Karten umbaut.
##################################################################################### */
/* =====================================================================================
ENTSCHEIDUNG 2a · VARIANTE B „Weich“
Zusatzschicht: gilt NACH richtung/empfehlung.css. Nur Darstellung, keine Texte, Daten, Reihenfolgen.
Idee: leise Tiefe im Ruhezustand. Alles, was man anfasst, sitzt auf einem hauchzarten Schatten,
die Flächen haben einen kaum sichtbaren Farbverlauf, das Blau des Einstiegs ist nicht ganz flach.
Kein Glas, keine Körnung, kein Blur, keine Daueranimation.
Radien 16/12/24 (Karten und Leseflächen 16, Bedienelemente 12, große Blauflächen 24, mobil 20).
===================================================================================== */
:root {
--r-ctl: 12px; /* Felder, Buttons, summary, Chips, Fristmarke (wie Empfehlung) */
--r-card: 16px; /* Kategorie-Cards */
--r-read: 16px; /* Leseflächen: Faktenkarte, Finder, Leerzustand, Hinweisflächen (Empfehlung: 8) */
--r-panel: 24px; /* Hero, Anbieterkopf, Hilfe-Aside (Empfehlung: 20) */
/* leiser Ruheschatten (Tinte, nie schwarz, nie über 10 % Deckkraft) */
--shadow-rest: 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent), 0 4px 14px -6px color-mix(in srgb, var(--ink) 10%, transparent);
/* Zeigen: etwas mehr Tiefe als im Ruhezustand */
--shadow-lift: 0 2px 4px color-mix(in srgb, var(--ink) 6%, transparent), 0 16px 30px -12px color-mix(in srgb, var(--ink) 24%, transparent);
/* [RUNDE 1] entfallen: --shadow-hero und --verlauf-blau. Nikos Wahl 2a B: Suchbereich FLACH, kein Verlauf, kein blauer Schein unter dem Hero. */
/* zweiter Farbton der Karten-Verläufe: 40 % des Familientons auf Weiß (fest berechnet, kein color-mix nötig) */
--fam-blue-2: #f6f8fe;
--fam-gold-2: #fefae9;
--fam-neutral-2: #f9fafb;
}
@media (max-width: 720px) { :root { --r-panel: 20px; } }
/* --- [RUNDE 1] Einstieg: große Blauflächen bleiben FLACH (Basisregel der Empfehlung: Farbe, kein Verlauf, kein Schatten). Die Regel „Verlauf plus Schein“ der Variante 2a B entfällt. */
/* --- Kategorie-Cards: Verlauf 160° von Familienton zu 40 % Familienton, Ruheschatten --------------- */
.category-link {
--f-bg2: var(--fam-blue-2);
border-radius: var(--r-card);
background: linear-gradient(160deg, var(--f-bg), var(--f-bg2));
box-shadow: var(--shadow-rest);
}
.category-auftraege, .category-residenzen { --f-bg2: var(--fam-blue-2); }
.category-foerderung, .category-preise { --f-bg2: var(--fam-gold-2); }
.category-ausstellungen, .category-mentoring { --f-bg2: var(--fam-neutral-2); }
/* die Basisregel .category-link:hover setzt „background“ als Kurzform zurück; der Verlauf bleibt */
.category-link:hover { background: linear-gradient(160deg, var(--f-bg), var(--f-bg2)); }
/* Icon in weißem Chip, 44 px, mit Ruheschatten; der Chip steht auf der Höhe der ersten Titelzeile */
.category-title-row { min-height: 2.75rem; padding-left: 3.5rem; padding-top: .5625rem; }
.category-title-row .type-icon {
top: 0; width: 2.75rem; height: 2.75rem; padding: .5rem;
background: var(--surface); border-radius: var(--r-ctl); box-shadow: var(--shadow-rest);
}
@media (max-width: 720px) {
.category-title-row { min-height: 2.5rem; padding-left: 3.25rem; padding-top: .4375rem; }
.category-title-row .type-icon { width: 2.5rem; height: 2.5rem; padding: .375rem; }
}
/* --- summary und Faktenkarte tragen den Ruheschatten ----------------------------------------- */
#main summary { box-shadow: var(--shadow-rest); }
#main .info-index > summary, #main #more-filters > summary { box-shadow: none; } /* transparente summary: kein Schatten ins Leere */
.detail-facts { box-shadow: var(--shadow-rest); }
/* --- Druck und Windows-Kontrast: keine Schatten, keine Verläufe ---------------------------------- */
@media print {
.category-link, .category-link:hover, .detail-facts, #main summary, .category-title-row .type-icon,
.hero, .info-ueber-uns .info-hero, .provider-hero, .info-cta, .help-aside { box-shadow: none; }
.category-link, .category-link:hover { background: var(--f-bg); }
.category-title-row .type-icon { background: transparent; }
}
@media (forced-colors: active) {
:root { --shadow-rest: none; }
.category-link, .category-link:hover { background: Canvas; }
.category-title-row .type-icon { background: transparent; border: 1px solid CanvasText; }
}
/* #####################################################################################
SCHICHT 1a-B: 1a B Textmarker
Herkunft: varianten/1-frist/css/1a-B-textmarker.css
Stellung: Baut die Fristmarke um; vor 1b B und 6a B, die die Spalten der Fristmarke setzen.
##################################################################################### */
/* =====================================================================================
1a · B „Textmarker“
Überlagerung, gilt NACH richtung/empfehlung.css (Variante A ist die Basis).
Idee: Die Frist hat keinen Kasten mehr. Die Beschriftung steht in Tinte über dem Datum, das Datum
ist groß (Tag 40px/600, Monat 17px/600, in einer Zeile). Ein gelber Streifen liegt in der unteren
Hälfte der Datumszeile, so wie ein Textmarker über gedruckter Schrift. Kein Rahmen, keine Fläche.
Gelb bleibt der Frist vorbehalten (Leitsatz 4). Das Fristfeld bewegt sich nie, keine Transition.
Reihenfolge, Texte und Markup bleiben unverändert; es ist nur Darstellung.
===================================================================================== */
:root {
--marker: var(--deadline-bg); /* [RUNDE 1] derselbe Gelbton wie zuvor (#f6dd6f), jetzt über die Variable der Quelle statt fest verdrahtet */
}
/* Der Streifen ist EINE einfarbige Fläche (Verlauf von Gelb nach Gelb), die per background-size nur die untere Hälfte der Datumszeile füllt.
Ein Verlauf mit hartem Wechsel von „durchsichtig“ nach Gelb ließ im PDF-Druck einen dunklen Strich an der Kante entstehen (gemessen am Rasterbild);
ältere Safari-Versionen mischen bei „transparent“ zudem Grau ein. Eine einfarbige Fläche hat keine Kante, die sich so verrechnen kann. */
/* --- Kasten abbauen ------------------------------------------------------------------- */
.deadline-block, .deadline-fact {
overflow: visible; background: none; border-radius: 0; min-width: 0;
}
/* Puffer unter dem großen Tag: Seine Zeilenhöhe (1,1) ist kleiner als die Schrifthöhe, ohne Puffer ragte die Unterkante des Textes 1 px aus der Marke. */
.deadline-block { padding-bottom: .125rem; }
.deadline-block::after, .deadline-fact::after { content: none; }
/* --- Beschriftung: Tinte, über dem Datum, ohne Band --------------------------------------- */
.deadline-label, .deadline-fact dt,
:is(.home-result, .result, .calendar-row) .deadline-label {
display: block; margin: 0 0 .3rem; padding: 0; background: none; color: var(--deadline-ink); font-weight: 600;
}
/* --- Datum: eine Zeile, Markierstreifen in der unteren Hälfte -------------------------------- */
.deadline-block .deadline,
:is(.home-result, .result, .calendar-row) .deadline {
display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .35rem;
width: fit-content; max-width: 100%; padding: 0; line-height: 1.25;
background: linear-gradient(var(--marker), var(--marker)) no-repeat 0 100% / 100% 42%;
}
/* Start und Liste haben Tag und Monat als eigene Elemente: Tag groß, Monat klein, gemeinsame Grundlinie */
.deadline-day { display: block; font-size: 2.5rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.deadline-month { display: block; margin: 0; font-size: 1.0625rem; font-weight: 600; letter-spacing: 0; line-height: 1.1; }
/* Start/Liste: die Marke steht links vor dem Inhalt und braucht die Breite von „31. September 2026“ in einer Zeile */
.deadline-block .deadline { line-height: 1.1; }
/* Kalender und Detail kennen keine Tag/Monat-Elemente (Markup): dort bleibt das Datum eine Zeile 18px/650 mit Streifen */
.calendar-row .deadline { line-height: 1.35; }
.deadline-fact dd { margin: 0; padding: 0; background: none; }
.deadline-fact .deadline {
display: inline; line-height: 1.5; width: auto;
background: linear-gradient(var(--marker), var(--marker)) no-repeat 0 100% / 100% 42%;
-webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* --- Breiten: ohne Kasten braucht die Spalte keine 12rem; „September 2026“ in einer Zeile ------------ */
@media (min-width: 721px) {
.home-result { grid-template-columns: 13.5rem minmax(0, 1fr); gap: 1.5rem; }
.result { grid-template-columns: 13.5rem minmax(0, 1fr); gap: 1.5rem; }
.calendar-row { grid-template-columns: 14rem minmax(0, 1fr); }
}
/* --- Mobil: Beschriftung über dem Datum, Block statt Chip ---------------------------------- */
@media (max-width: 720px) {
.deadline-block { display: block; width: auto; max-width: 100%; min-width: 0; padding: 0 0 .125rem; }
:is(.home-result, .result, .calendar-row) .deadline-block { padding: 0 0 .125rem; }
:is(.home-result, .result, .calendar-row) .deadline-label {
display: block; flex: none; margin: 0 0 .3rem; padding: 0;
}
:is(.home-result, .result, .calendar-row) .deadline {
display: flex; flex: none; flex-wrap: wrap; align-items: baseline; align-content: normal;
column-gap: .35rem; width: fit-content; max-width: 100%; padding: 0;
}
:is(.home-result, .result, .calendar-row) .deadline-day { display: block; font-size: 2.5rem; line-height: 1.1; }
:is(.home-result, .result, .calendar-row) .deadline-month { display: block; margin: 0; font-size: 1.0625rem; }
.home-result { gap: .875rem; }
}
/* --- Kontrastmodus und Druck -------------------------------------------------------------------
Im Kontrastmodus verschwinden Hintergrundfarben: Das Datum wird dann unterstrichen, damit die Hervorhebung nicht verloren geht.
Im Druck sind Hintergründe standardmäßig aus: Streifen ausdrücklich mitdrucken. */
@media (forced-colors: active) {
.deadline-block, .deadline-fact { border: 0; }
.deadline-label, .deadline-fact dt { border-bottom: 0; }
.deadline-block .deadline, .deadline-fact .deadline {
background: none; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .2em;
}
}
@media print {
.deadline-block .deadline, .deadline-fact .deadline { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
/* #####################################################################################
SCHICHT 1b-B: 1b B Frist rechts auf der Startseite (Desktop)
Herkunft: varianten/1-frist/css/1b-B-rechts.css
Stellung: Nach 1a B (wie in kombi-B-rechts), setzt die Startspalten.
##################################################################################### */
/* =====================================================================================
1b · B „Rechts wie heute, in der Form von Variante A“
Überlagerung, gilt NACH richtung/empfehlung.css. Variante A (links vor dem Eintrag) ist die Basis selbst.
Nur die Startseite („Chancen entdecken“) und nur ab 721px: Die Fristmarke steht wieder in einer rechten Spalte,
der Eintrag links. Dieselbe Marke (Kalenderblatt hell) wie in der Basis. Die Liste (#chancen) und der Kalender
bleiben unverändert (Marke links). Mobil (bis 720px) bleibt der Chip über dem Titel wie in der Basis.
Nur Anordnung; die Reihenfolge im Quelltext ist unverändert (Eintrag, dann Marke), die Lesereihenfolge passt hier
also im Unterschied zur Basis zur Bildschirmreihenfolge.
===================================================================================== */
@media (min-width: 721px) {
.home-result { grid-template-columns: minmax(0, 1fr) 12rem; gap: 2rem; align-items: center; }
.home-result > div:first-child { grid-column: 1; grid-row: 1; }
.home-result > .deadline-block { grid-column: 2; grid-row: 1; }
}
/* #####################################################################################
SCHICHT 3a-C: 3a C Zweiton-Kategoriekarten
Herkunft: varianten/3-einstieg/css/3a-c-zweiton.css
Stellung: Nach 2a B: überschreibt dessen Kartenfläche und Icon-Feld; die Verschmelzung steht in teile/20-konflikte.css.
##################################################################################### */
/* =====================================================================================
3a · C „Zweiton“ (Überlagerung NACH richtung/empfehlung.css)
Eine durchgehende Card (Radius 12, Familienrand). Oben ein Band im Familienton mit Icon 32 px
und Titel, unten weiß mit Beschreibung und Zähler. Das Band ist die Titelzeile des Subgrids;
alle Bänder einer Reihe sind gleich hoch. Hover und Drücken wie in der Empfehlung (A).
===================================================================================== */
.category-link { padding: 0; gap: 0; row-gap: 0; background: var(--surface); overflow: hidden; }
.category-link:hover { background: var(--surface); border-color: var(--f-line); }
.category-title-row {
display: flex; align-items: center; min-height: 0;
padding: 1.125rem 1.5rem 1.125rem calc(1.5rem + 2rem + .75rem);
background: var(--f-bg); border-bottom: 1px solid var(--f-line);
}
.category-title-row .type-icon {
position: absolute; left: 1.5rem; top: 50%; width: 2rem; height: 2rem; margin: -1rem 0 0; /* mittig im Band, ohne transform (die Bewegungsprüfung liest alle transform-Werte der Karte) */
color: var(--f-ink);
}
.category-description { padding: 1rem 1.5rem 0; }
.category-bottom { padding: .75rem 1.5rem 1.25rem; }
@media (max-width: 720px) {
.category-link { padding: 0; gap: 0; row-gap: 0; }
.category-title-row { padding: 1rem 1.125rem 1rem calc(1.125rem + 2rem + .75rem); }
.category-title-row .type-icon { left: 1.125rem; }
.category-description { padding: .875rem 1.125rem 0; }
.category-bottom { padding: .625rem 1.125rem 1.125rem; }
}
@media (forced-colors: active) {
.category-title-row { border-bottom-color: CanvasText; }
}
/* #####################################################################################
SCHICHT 3c-C: 3c C Suchleiste (Desktop Leiste, Handy Karte)
Herkunft: varianten/3-einstieg/css/3c-c-suchleiste.css
Stellung: Eigenständig (nur .home-search und Hero-Container).
##################################################################################### */
/* =====================================================================================
3c · H-C „Suchleiste“ (Überlagerung NACH richtung/empfehlung.css)
Hero flach #1c2a9a, Radius 20 (wie H-A). Breit: die drei Suchfelder sitzen in EINER weißen Leiste (Radius 16) mit feinen
Trennlinien zwischen den Feldern; der Button steht rechts innen (blau, Radius 12).
Schmal: eine weiße Karte (Radius 16) mit gestapelten Feldern, Button darunter. Dort behalten die Felder ihren sichtbaren Rand
(#747b86, 3:1). Ab 34rem Kartenbreite stehen die zwei Auswahlfelder nebeneinander (Suchbegriff und Button über die ganze Breite).
Beschriftungen bleiben sichtbar (16px/600), Eingabefelder mindestens 48px, Fokusring in Akzentblau (auf Weiß 11:1).
Umschaltung über eine Container-Abfrage auf die Hero-Breite in rem: Bei großer Schrift (200 %) greift automatisch
die Karte, auch auf breiten Bildschirmen.
===================================================================================== */
.hero { container: held / inline-size; }
/* ---------- Grundform (schmal): weiße Karte, Felder mit Rand wie überall ---------- */
.home-search {
display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem;
align-items: end; background: var(--surface); border-radius: 16px;
padding: min(1rem, 16px); /* bleibt bei 200 % Schrift bei 16 px, damit die Felder auf kleinen Bildschirmen nicht noch schmaler werden */
}
.home-search > div:first-child, .home-search .hero-search-button { grid-column: 1 / -1; }
@container held (min-width: 34rem) { .home-search { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.home-search label { color: var(--ink); font-weight: 600; }
.hero .home-search :focus-visible { outline-color: var(--accent); outline-offset: 2px; } /* der gelbe Ring der Hero wäre auf Weiß kaum zu sehen (1,4:1); hier Akzentblau, 11:1 */
.home-search .hero-search-button { color: var(--surface); background: var(--accent); border-color: var(--accent); border-radius: 12px; }
@media (hover: hover) {
.home-search .hero-search-button:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
}
/* ---------- Breit: Kapsel, alle Felder in einer Reihe, keine Einzelränder ---------- */
@container held (min-width: 56rem) {
.home-search { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 0; padding: .375rem; }
.home-search > div, .home-search > div:first-child { position: relative; padding: .625rem .375rem .5rem; border-radius: 12px; }
.home-search > div:first-child { flex: 1.6 1 0; }
.home-search > div:not(:first-child) { flex: 1 1 0; }
.home-search > div + div::before {
content: ""; position: absolute; left: 0; top: .875rem; bottom: .875rem; width: 1px; background: var(--line);
}
.home-search label { margin: 0 0 .25rem; padding-inline: .75rem; }
#main #home-search :is(input, select) {
border: 0; background-color: transparent; color: var(--ink); min-height: 48px;
padding-inline-start: .75rem; border-radius: 8px;
}
#main #home-search input { padding-inline-end: .75rem; }
.home-search .hero-search-button {
flex: 0 0 auto; align-self: center; margin: 0 0 0 .375rem; padding-inline: 1.75rem; min-height: 56px;
}
.home-search > div:focus-within { background: var(--wash); }
}
@container held (min-width: 56rem) and (hover: hover) {
.home-search > div:hover { background: var(--wash); }
.home-search > div:hover::before, .home-search > div:hover + div::before { opacity: 0; }
}
/* ---------- Bewegung: Zustandswechsel der Leiste (Farbe 180 ms wie überall), unter reduce keine ---------- */
@media (prefers-reduced-motion: no-preference) {
.home-search > div { transition: background-color var(--dur-2) var(--ease); }
.home-search > div::before { transition: opacity var(--dur-2) var(--ease); }
}
/* ---------- Kontrastmodus ---------- */
@media (forced-colors: active) {
.home-search { border: 1px solid CanvasText; }
.home-search > div + div::before { background: CanvasText; }
.home-search .hero-search-button { border: 1px solid LinkText; }
}
/* #####################################################################################
SCHICHT 3d-B: 3d B Umriss-Button „… einreichen“
Herkunft: varianten/3-einstieg/css/3d-b-umriss.css
Stellung: Eigenständig (nur Kopf-Button).
##################################################################################### */
/* =====================================================================================
3d · B „Umriss-Button“ (Überlagerung NACH richtung/empfehlung.css)
„Ausschreibung einreichen“ als Button mit 2px Rand in Akzentblau, transparenter Fläche, Akzent als Schrift. Radius 12, ohne Pfeil.
Hover und aktive Seite: sehr helle Blaufläche (#e9edfd).
===================================================================================== */
.site-header nav a.provider-link {
color: var(--accent); background: transparent; border: 2px solid var(--accent);
padding-inline: calc(1.25rem - 2px);
}
@media (hover: hover) {
.site-header nav a.provider-link:hover { background: var(--fam-blue); color: var(--accent-hover); border-color: var(--accent-hover); }
}
.site-header nav a.provider-link[aria-current="page"] { color: var(--accent); background: var(--fam-blue); }
@media (max-width: 720px) {
.site-header nav a.provider-link { padding-inline: calc(1rem - 2px); }
}
/* #####################################################################################
SCHICHT 4a-B: 4a B getönte Fläche für Hinweise
Herkunft: varianten/4-lesen/css/4a-B-getoente-flaeche.css
Stellung: Nach 2a B (nutzt --r-read).
##################################################################################### */
/* =====================================================================================
Bogen 4 „Lesen“ · Entscheidung 4a · Variante B „Getönte Fläche“
Gilt NACH richtung/empfehlung.css. Nur Darstellung.
Bedingungen und Hinweise liegen auf einer leicht getönten Fläche (#eef1fd, Radius 8, kein Rand, kein Schatten).
Betroffen: Voraussetzungen im Eintrag (.eligibility-summary), „Dein nächster Schritt“ (.source-action),
Vorschauhinweise im Gesuch und in der Korrektur (.intake-preview, .intake-preview-submit).
NICHT betroffen: Hilfe-Aside (blaue Anbieterfläche), Faktenkarte, seitliche Asides im Gesuch und in der Korrektur.
===================================================================================== */
:root { --hint-bg: #eef1fd; --hint-pad: 1.25rem; }
#main :is(.eligibility-summary, .detail-status, .intake-preview, .intake-preview-submit) {
background: var(--hint-bg); border: 0; border-radius: var(--r-read);
padding: var(--hint-pad);
max-width: calc(65ch + 2 * var(--hint-pad)); /* Text bleibt bei 65 Zeichen, die Fläche umschließt ihn */
}
#main :is(.eligibility-summary, .intake-preview) > strong:first-child { margin-bottom: .375rem; }
/* „Dein nächster Schritt“: die Fläche umschließt Beschriftung, Überschrift, Text und Button */
#main .detail-copy .source-action {
background: var(--hint-bg); border: 0; border-radius: var(--r-read);
padding: 1.5rem var(--hint-pad);
}
@media (max-width: 720px) {
:root { --hint-pad: 1rem; }
}
/* #####################################################################################
SCHICHT 4c-B: 4c B Trennung über Form (braucht js/teile/20-4c-B.js)
Herkunft: varianten/4-lesen/css/4c-B-trennung-ueber-form.css
Stellung: Eigenständig (.ka-*).
##################################################################################### */
/* =====================================================================================
Bogen 4 „Lesen“ · Entscheidung 4c · Variante B „Trennung über Form“
Gilt NACH richtung/empfehlung.css; braucht js/4c-B-trennung-ueber-form.js (Darstellungstest, Wortlaut gleich).
Art: Akzentfarbe, 600. Ort: Grau (--muted), 400. Abstand .75rem, kein Zeichen.
Kostenzeile: zwei kurze Zeilen „Beschriftung Wert“ statt eines Satzes mit Mittelpunkt.
===================================================================================== */
.ka-ao { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .75rem; min-width: 0; }
.ka-art { color: var(--accent); font-weight: 600; }
.ka-ort { color: var(--muted); font-weight: 400; }
/* Das Trennzeichen bleibt im Text (Vorlesen, Kopieren), ist aber nicht zu sehen. Kein overflow:hidden: das würde die Messung als „abgeschnitten“ zählen. */
.ka-sep { position: absolute; margin: 0; padding: 0; border: 0; white-space: nowrap; clip-path: inset(50%); pointer-events: none; } /* unsichtbar, bleibt im Text; Breite folgt dem Zeichen (kein überstehender Inhalt) */
/* Kalender: die Zeile steht dort in 18 px und Grau; die Art bleibt Tinte statt Akzent, damit die Kalenderzeile ruhig bleibt */
.calendar-kind .ka-art { color: var(--ink); }
/* Kostenzeile: zwei Zeilen Beschriftung/Wert.
Der Absatz ist selbst der Container (Container-Abfrage in rem: wächst mit der Schrift). Schmal oder bei großer Schrift steht die
Beschriftung über dem Wert; sobald Platz ist, stehen die Werte beider Zeilen in einer Spalte untereinander. */
.fee-note.ka-fee { container-type: inline-size; }
.ka-fee-box { display: flex; flex-direction: column; row-gap: .5rem; }
.ka-fee-line { display: flex; flex-direction: column; min-width: 0; }
.ka-fee-label { color: var(--muted); font-size: 1rem; font-weight: 500; line-height: 1.4; }
.ka-fee-wert { color: var(--ink); font-size: 1.125rem; font-weight: 400; min-width: 0; text-wrap: balance; }
@container (min-width: 22rem) {
.ka-fee-box { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: .75rem; row-gap: .125rem; align-items: baseline; }
.ka-fee-line { display: contents; }
}
/* #####################################################################################
SCHICHT 4d-D: 4d D Textlinks unterstrichen, Pfeile nur an Richtungen
Herkunft: varianten/4-lesen/css/4d-D-richtung-unterstrichen.css
Stellung: Vor 5a B (5a B bringt Pfeile an Zeilen zurück, siehe Konflikt K6).
##################################################################################### */
/* =====================================================================================
Bogen 4 „Lesen“ · Entscheidung 4d · Variante D „Pfeil folgt Richtung, Textlinks unterstrichen“
Zusatzvariante des Prüfers (nicht im Auftrag). Gilt NACH richtung/empfehlung.css (= Variante B).
Wie C (die drei Titel der Startliste behalten ihren Pfeil), zusätzlich tragen die Textlinks, die ihren Pfeil verloren haben,
eine dünne Unterstreichung: „Alle Chancen“, „Bedingungen ansehen“, die Sprunglinks im Eintrag, „Eine Angabe korrigieren“ und die
übrigen Textlinks („So prüfen wir Angebote“, „Zur Suche“ …). Grund: Auf dem Handy gibt es kein Hover; ohne Pfeil und ohne Unterstrich
unterscheidet nur die Akzentfarbe (1,35:1 zur Tinte) Link und Text. Nikos Vorgabe: Farbe nie alleiniger Informationsträger.
Rückpfeil-Links („← Zurück“), Kategorie-Cards, Titel der Liste und des Kalenders sind nicht betroffen.
===================================================================================== */
html body .home-result h3 a > span[aria-hidden="true"] { display: inline; margin-inline-start: .5em; white-space: nowrap; } /* wie C */
html body :is(.inline-link, .detail-link, .section-index a) {
text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em;
}
/* Die Basis setzt die Unterstreichung auf Touch beim Antippen zurück (kein klebender Hover); hier bleibt sie stehen. */
html body :is(.inline-link, .detail-link, .section-index a):hover { text-decoration: underline; text-decoration-thickness: 1px; }
@media (hover: hover) {
html body :is(.inline-link, .detail-link, .section-index a):hover { text-decoration-thickness: 2px; }
}
/* #####################################################################################
SCHICHT 5a-B: 5a B Lebendig (braucht js/teile/10-5a-B.js statt empfehlung.js)
Herkunft: varianten/5-bewegung/css/b-lebendig.css
Stellung: Nach 4d D; Pfeil-Konflikt in teile/20-konflikte.css.
##################################################################################### */
/* =====================================================================================
ENTSCHEIDUNG 5a VARIANTE B „Lebendig“
Überlagerung, die NACH richtung/empfehlung.css gilt. Alles aus A („Antwort“) bleibt:
Card hebt sich 2 px, Schatten erst jetzt, Titelunterstreichung zeichnet sich, Drücken, weiches Aufklappen,
Aufbau von Hero und Start.
Zusätzlich:
1 der Pfeil an Cards und Zeilen wandert 4 px nach rechts
2 Zeilen bekommen beim Zeigen eine getönte Fläche (Pseudo-Element, Radius 16, Deckkraft)
3 beim ersten Aufbau erscheinen die sechs Cards nacheinander (40 ms Versatz, 360 ms, 8 px)
Nur Darstellung: keine Texte, Daten, Reihenfolgen oder Routen ändern sich.
Gehört zusammen mit b-lebendig.js (der Aufbau-Zustand muss bis zur letzten Card stehen bleiben).
Alles Bewegte steht unter prefers-reduced-motion: no-preference, alles vom Zeiger Abhängige unter (hover: hover).
===================================================================================== */
/* --- 0 Abweichung von Leitsatz 3 („Pfeil folgt Richtung“) --------------------------------------
Die Empfehlung hat die Pfeile an Zeilen entfernt. Damit sich an Zeilen überhaupt ein Pfeil bewegen kann,
kommt er hier zurück (die Spans stehen im Markup, es ändert sich kein Wortlaut):
- Startseite: ein Pfeil am rechten Zeilenrand, mittig
- Liste: der Pfeil hinter „Bedingungen ansehen“
Kalenderzeilen haben ihren Pfeil im Linktext und bekommen nur die Fläche.
Nur bei Geräten mit Zeiger (hover: hover) UND ab 721 px Fensterbreite: Auf dem Handy bewegt sich nichts unter dem Finger,
und in schmalen Fenstern kostet der Pfeil Zeilenbreite (gemessen: bis zu 54 px mehr Höhe je Zeile bei 320 px). Dort zeigen die Zeilen
nur die Fläche, wie auf dem Handy.
Pfeil und Abstand sind in px, nicht in rem: Bei großer Schrift (200 %) wächst der Pfeil nicht mit und nimmt der Textspalte
kaum Breite (gemessen: mit rem-Maßen wurde die Startseite bei 768 px und 200 % Text 1.015 px länger, mit px-Maßen 232 px). */
@media (hover: hover) and (min-width: 721px) {
#main .home-result h3 a > span[aria-hidden="true"] {
display: block; position: absolute; inset-inline-end: 8px; top: 50%; margin-top: -14px;
width: 28px; height: 28px; font-size: 24px; line-height: 28px; text-align: center; font-weight: 400;
color: var(--muted);
}
/* der Text läuft nie unter den Pfeil; nur die Textspalte bekommt Abstand, die Fristmarke (Chip) behält ihre Breite */
#main .home-result > div:first-child { padding-inline-end: 44px; }
#main .detail-link { gap: .5rem; }
#main .detail-link > span[aria-hidden="true"] { display: inline-block; color: var(--muted); }
}
/* --- 2 Getönte Zeilenfläche ---------------------------------------------------------------------
Eigenes Pseudo-Element hinter dem Inhalt (z-index -1 im eigenen Stapel der Zeile); die Haarlinien bleiben stehen,
die Fläche liegt mit 6 px Abstand zwischen ihnen. Die ganze Zeile ist Trefferfläche (gestreckter Titel-Link der Empfehlung). */
:is(.home-result, .result, .calendar-row) { isolation: isolate; }
:is(.home-result, .result, .calendar-row)::before {
content: ""; position: absolute; z-index: -1; inset: .375rem -.75rem; border-radius: 16px;
background: color-mix(in srgb, var(--accent) 5.5%, transparent); opacity: 0; pointer-events: none;
}
@media (max-width: 720px) {
:is(.home-result, .result, .calendar-row)::before { inset-inline: -.5rem; }
}
/* Die Fläche ragt 12 px (Handy 8 px) über die Zeile hinaus. Damit sie nicht aus dem Block der Liste ragt (Messwerkzeug: „ragender Block“),
bekommen die Listen denselben Betrag als Innenabstand und heben ihn mit negativem Außenabstand wieder auf. Die Zeilen bleiben, wo sie waren. */
#home-results, #results { padding-inline: .75rem; margin-inline: -.75rem; }
@media (max-width: 720px) {
#home-results, #results { padding-inline: .5rem; margin-inline: -.5rem; }
}
@media (hover: hover) {
:is(.home-result, .result, .calendar-row):hover::before { opacity: 1; }
#main .home-result:hover h3 a > span[aria-hidden="true"], #main .result:hover .detail-link > span[aria-hidden="true"] { color: var(--accent); }
}
/* Tastatur: dieselbe Fläche wie beim Zeigen */
:is(.home-result, .result, .calendar-row):has(a:focus-visible)::before { opacity: 1; }
/* Touch: die Fläche ist das Antipp-Echo (keine Bewegung) */
@media (hover: none) {
:is(.home-result, .result, .calendar-row):active::before { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
/* --- 1 Pfeil wandert 4 px ---------------------------------------------------------------------- */
.category-arrow, #main .home-result h3 a > span[aria-hidden="true"], #main .detail-link > span[aria-hidden="true"] {
transition: transform var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
:is(.home-result, .result, .calendar-row)::before { transition: opacity var(--dur-2) var(--ease); }
@media (hover: hover) {
.category-link:hover .category-arrow,
.home-result:hover h3 a > span[aria-hidden="true"],
.result:hover .detail-link > span[aria-hidden="true"] { transform: translateX(4px); }
}
.category-link:focus-visible .category-arrow { transform: translateX(4px); }
@media (hover: hover) {
.home-result:has(a:focus-visible) h3 a > span[aria-hidden="true"],
.result:has(a:focus-visible) .detail-link > span[aria-hidden="true"] { transform: translateX(4px); }
}
/* --- 3 Aufbau: Hero wie in A (240 ms), die sechs Cards nacheinander ------------------------------
Die Karten kommen einzeln mit Versatz; der Block-Aufbau von „.categories“ aus A entfällt, damit nichts doppelt läuft.
Deckkraft 0 → 1 gehört hier dazu (die Cards „erscheinen“); die Hero-Überschrift bleibt deckend. */
@keyframes karte-ein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
#home-view.aufbau > .categories { animation: none; }
#home-view.aufbau .category-link { animation: karte-ein 360ms var(--ease) backwards; }
#home-view.aufbau .category-link:nth-child(1) { animation-delay: 0ms; }
#home-view.aufbau .category-link:nth-child(2) { animation-delay: 40ms; }
#home-view.aufbau .category-link:nth-child(3) { animation-delay: 80ms; }
#home-view.aufbau .category-link:nth-child(4) { animation-delay: 120ms; }
#home-view.aufbau .category-link:nth-child(5) { animation-delay: 160ms; }
#home-view.aufbau .category-link:nth-child(6) { animation-delay: 200ms; }
}
/* Windows-Kontrastmodus: keine Tönung (sie wäre unsichtbar); der Pfeil bleibt, die Zeile zeigt Unterstreichung wie in A */
@media (forced-colors: active) {
:is(.home-result, .result, .calendar-row)::before { display: none; }
}
@media print {
:is(.home-result, .result, .calendar-row)::before { display: none; }
}
/* #####################################################################################
SCHICHT 6a-B: 6a B Faktenspalte rechts in Listen (Desktop)
Herkunft: varianten/6-desktop/css/6a-B-faktenspalte.css
Stellung: Nach 1a B und 1b B: setzt die Dreispaltenzeile; Start wird in teile/20-konflikte.css neu geordnet.
##################################################################################### */
/* =====================================================================================
6a · B Faktenspalte
Ab etwa 1100 px Fensterbreite (genauer: ab 62 rem Listenbreite) wandern die Zeilen „Eignung/Wohnsitz“ und „Kosten“ jeder
Ergebniszeile in eine rechte Spalte (clamp 16rem bis 22rem), von der Lesespalte durch eine Haarlinie getrennt.
Die Fristmarke bleibt links. Nur Anordnung (display: contents am unsichtbaren Zeilen-Wrapper, Grid-Platzierung),
kein neuer Text, DOM-Reihenfolge unverändert.
Warum Container-Abfrage statt Fensterbreite: Die Spalten rechnen in rem und wachsen mit der Schrift. Bei 200 % Text würde die
Lesespalte in der Fensterbreiten-Fassung auf 0 px schrumpfen (gemessen: Überlauf 20 px, Zeile „Residenz · Konstanz“ 64 px breit).
rem in der Container-Abfrage folgt der eingestellten Schrift: bei großer Schrift fällt die Zeile von selbst auf die Empfehlung (A) zurück.
Ältere Browser ohne Container-Abfragen zeigen ebenfalls A.
Beschriftungen („Eignung“, „Kosten“) gibt es im Markup nicht. Sie ließen sich nur mit ::before-Text ergänzen
(neuer Text), darum fehlen sie hier. Die Beschriftung steckt in der Zeile selbst („Bewerbungsgebühr: …“).
Grenze dieser CSS-only-Fassung (geprüft, siehe Bogen): Eignung und Kosten sind zwei Geschwister-Elemente ohne gemeinsame Hülle.
Sie stehen deshalb in den Zeilen der Mitte (Eignung neben Kategorie, Titel und Veranstalter, Kosten neben Förderbetrag und Link).
Sind sie sehr lang, dehnen sie die Zeilen der Mitte und es entstehen gleichmäßig größere Abstände dort. Mit einer Hülle im Markup
(ein Element um beide) entfiele das; das ist ein Schritt der echten Umsetzung, hier nicht erlaubt.
===================================================================================== */
#results, #home-results { container: listenbreite / inline-size; }
@container listenbreite (min-width: 62rem) {
/* --- Liste (#chancen und Kategorie): Fristmarke | Lesespalte | Faktenspalte --- */
.result { --facts-col: clamp(16rem, 28cqw, 22rem); grid-template-columns: 12rem minmax(0, 1fr) var(--facts-col); column-gap: 2rem; row-gap: 0; align-items: start; }
.result > .result-copy { display: contents; }
.result > .deadline-block { grid-column: 1; grid-row: 1 / span 5; }
.result-copy > .kind { grid-column: 2; grid-row: 1; }
.result-copy > .result-title { grid-column: 2; grid-row: 2; }
.result-copy > .provider { grid-column: 2; grid-row: 3; }
.result-copy > .benefit { grid-column: 2; grid-row: 4; }
.result-copy > .detail-link { grid-column: 2; grid-row: 5; justify-self: start; }
/* Faktenspalte: zwei Blöcke untereinander, durchgehende Linie links.
Eignung steht über den Zeilen 1 bis 3 (Kategorie, Titel, Veranstalter), Kosten über den Zeilen 4 und 5 (Förderbetrag, Link).
So verteilt sich ein langer Text auf drei beziehungsweise zwei Zeilen und die Mitte bekommt keine Lücke um den Titel. */
.result-copy > .eligibility, .result-copy > .fee-note {
grid-column: 3; align-self: stretch; margin: 0;
padding-left: 1.5rem; border-left: 1px solid var(--line);
hyphens: auto; hyphenate-limit-chars: 8 4 4; /* lange Wörter (Immatrikulationsbescheinigung) an Silben trennen statt mitten im Wort */
}
.result-copy > .eligibility { grid-row: 1 / span 3; padding-top: .125rem; color: var(--ink); }
.result-copy > .fee-note { grid-row: 4 / span 2; padding-top: .75rem; text-wrap: balance; } /* balance: die Zeile beginnt nicht mit dem Trennpunkt „·“ */
/* --- Startliste: Fristmarke | Lesespalte | Faktenspalte (dort gibt es nur eine Kurzzeile, je nach Eintrag Eignung oder Kosten) --- */
.home-result { --facts-col: clamp(16rem, 28cqw, 22rem); grid-template-columns: 12rem minmax(0, 1fr) var(--facts-col); column-gap: 2rem; row-gap: 0; align-items: start; }
.home-result > div:first-child { display: contents; }
.home-result > .deadline-block { grid-column: 1; grid-row: 1 / span 3; }
.home-result > div > .kind { grid-column: 2; grid-row: 1; }
.home-result > div > h3 { grid-column: 2; grid-row: 2; }
.home-result > div > .home-signal {
grid-column: 3; grid-row: 1 / span 2; align-self: stretch; margin: 0;
padding-left: 1.5rem; padding-top: .125rem; border-left: 1px solid var(--line); color: var(--ink);
hyphens: auto; hyphenate-limit-chars: 8 4 4;
}
}
/* #####################################################################################
SCHICHT 6b-D: 6b D Faktenband unter dem Titel (Desktop)
Herkunft: varianten/6-desktop/css/6b-D-faktenband.css
Stellung: Eigenständig (.detail-page).
##################################################################################### */
/* =====================================================================================
6b · D Faktenband (zusätzlich zum Auftrag)
Die Empfehlung (A), B und C stellen die Fakten in eine schmale rechte Spalte. D stellt sie als Band über die ganze Breite
unter den Titelblock; der Beschreibungstext folgt darunter. Alle Kernfakten sind ohne Scrollen zu sehen und stehen nicht in
330 px Spaltenbreite gequetscht. Preis: Der Beschreibungstext beginnt deutlich tiefer.
Die Faktenzellen laufen als auto-fit-Raster in rem (bei 100 % Text drei Spalten, bei großer Schrift von selbst weniger).
Nur Anordnung (Grid-Platzierung), nicht sticky, DOM-Reihenfolge unverändert, kein display: contents.
===================================================================================== */
@media (min-width: 1000px) {
.detail-page { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto; column-gap: 0; }
.detail-page > .detail-heading { grid-column: 1; grid-row: 2; max-width: none; }
/* Ohne rechte Spalte würde ein Titel mit 30ch die rechte Kopfhälfte leer lassen (Abweichung vom Titel-Token 30ch, nur in D). */
#main .detail-heading h1 { max-width: 44ch; }
.detail-page .detail-facts { grid-column: 1; grid-row: 3; margin-top: 2.5rem; padding: 1.5rem 2rem 1.75rem; }
.detail-page .detail-copy { grid-column: 1; grid-row: 4; margin-top: 3rem; }
.detail-facts h2 { margin-bottom: 1.25rem; }
.detail-facts dl { grid-template-columns: repeat(auto-fit, minmax(max(14rem, calc((100% - 4rem) / 3)), 1fr)); gap: 1.5rem 2rem; align-items: start; } /* höchstens drei Spalten: sechs Fakten ergeben zwei volle Zeilen; bei großer Schrift greift die Mindestbreite 14rem und es werden von selbst weniger */
.detail-facts .facts-note { margin-top: 1.5rem; padding-top: 1rem; }
}
@media (min-width: 1051px) {
.detail-page { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
}
/* #####################################################################################
SCHICHT 20-konflikte: NEU Konfliktauflösung (K1 bis K9, siehe AENDERUNGEN.md)
Herkunft: gesamt/runde1/css/teile/20-konflikte.css
Stellung: Muss nach allen Wahl-Schichten stehen, weil es deren Regeln gezielt überschreibt.
##################################################################################### */
/* =====================================================================================
RUNDE 1 · KONFLIKTAUFLÖSUNG
Dieser Teil steht NACH allen Wahl-Schichten und überschreibt gezielt, wo zwei Entscheidungen von Niko
dieselbe Stelle betreffen. Jeder Block nennt die beteiligten Schichten (K-Nummer = Abschnitt in AENDERUNGEN.md).
Keine neuen festen Farbwerte: nur Variablen der Quelle und der Schichten.
===================================================================================== */
:root {
/* K2: Breite der Fristmarken-Spalte. Der Textmarker (1a B) hat keinen Kasten, aber „31. September 2026“ braucht in einer Zeile etwa 12,6 rem;
1a B setzt dafür 13,5 rem. 6a B (12 rem) und 1b B (12 rem) kennen den Textmarker nicht. */
--frist-spalte: 13.5rem;
}
/* ---------------------------------------------------------------------------------------------------
K1 Startseite: 1b B (Frist rechts) gegen 6a B (Faktenspalte, Frist links) [1b B, 6a B, 1a B]
6a B setzt ab 62 rem Listenbreite die Dreispaltenzeile „Frist | Text | Fakt“ und gewinnt (steht später, Container-Regel).
Auflösung: Start bleibt „Frist rechts“ (Niko 1b B). Wo Platz für die Faktenspalte ist, steht die Zeile als
„Text | Fakt | Frist“; darunter (Listenbreite unter 62 rem, ab 721 px) als „Text | Frist“ wie in 1b B.
Die Liste (#chancen, Kategorie) und der Kalender behalten die Frist links (1b B gilt nur für die Startseite).
--------------------------------------------------------------------------------------------------- */
@media (min-width: 721px) {
.home-result { grid-template-columns: minmax(0, 1fr) var(--frist-spalte); }
}
@container listenbreite (min-width: 62rem) {
.home-result { grid-template-columns: minmax(0, 1fr) var(--facts-col) var(--frist-spalte); column-gap: 2rem; align-items: start; }
.home-result > .deadline-block { grid-column: 3; grid-row: 1 / span 3; }
.home-result > div > .kind, .home-result > div > h3 { grid-column: 1; }
.home-result > div > .home-signal { grid-column: 2; }
}
/* ---------------------------------------------------------------------------------------------------
K2 Liste: Fristspalte so breit wie der Textmarker braucht [6a B, 1a B]
--------------------------------------------------------------------------------------------------- */
@container listenbreite (min-width: 62rem) {
.result { grid-template-columns: var(--frist-spalte) minmax(0, 1fr) var(--facts-col); }
}
/* ---------------------------------------------------------------------------------------------------
K3 Kategorie-Karten: 3a C (Zweiton-Band) gegen 2a B (weiche Karte, Icon im weißen Feld, hauchzarter Verlauf) [3a C, 2a B]
Gilt: Karte weiß (3a C), Radius 16 und Ruheschatten (2a B), Band oben in der Gruppenfarbe mit dem hauchzarten Verlauf der Variante 2a B
(160°, Gruppenfarbe zu 40 % Gruppenfarbe), Icon in einem weißen runden Feld (Radius 12) mit Ruheschatten, unten weiß.
3a C setzt das Icon auf 2 rem Breite; mit dem Innenabstand von 2a B bliebe nur ein 16-px-Zeichen. Hier: 2,5-rem-Feld, Zeichen 26 px.
Das Icon steht im Fluss der Titelzeile (flex, umbrechend) statt absolut im linken Innenabstand. Das ist K8: Bei großer Schrift passt der
Titel nicht mehr neben das Icon; dann rutscht er in eine eigene Zeile unter das Icon, statt mitten im Wort zu brechen.
--------------------------------------------------------------------------------------------------- */
.category-title-row {
display: flex; flex-wrap: wrap; align-items: center; column-gap: .75rem; row-gap: .5rem;
background: linear-gradient(160deg, var(--f-bg), var(--f-bg2));
padding: .625rem 1.5rem;
}
.category-title-row .type-icon {
position: static; flex: none; width: 2.5rem; height: 2.5rem; margin: 0; padding: .4375rem;
background: var(--surface); border-radius: var(--r-ctl); box-shadow: var(--shadow-rest);
}
/* K8: Der Titel braucht neben dem Icon mindestens 7,5 em (das längste Wort „Kooperationen“ misst 6,6 em); sonst steht er darunter in voller Breite. */
.category-title-row .category-title { flex: 1 1 7.5em; min-width: 0; }
/* K10: Seitenrand der Karte bei sehr großer Schrift auf sehr schmalem Bildschirm. Auf 320 px misst „Kooperationen“ bei 200 % 265 px, die Karte
innen mit 1,125 rem Rand nur 214 px. Der Rand ist max(8 px, min(1,125 rem, 8,75 vw − 0,625 rem)): bei 100 % Schrift überall 18 px (wie bisher),
bei 200 % auf 390 px 14 px, auf 320 px 8 px; dort bleiben 270 px für das Wort. */
@media (max-width: 720px) {
.category-link { --kat-rand: max(8px, min(1.125rem, 8.75vw - .625rem)); }
.category-title-row { padding: .5rem var(--kat-rand); }
.category-link .category-description, .category-link .category-bottom { padding-inline: var(--kat-rand); }
}
@media print {
.category-title-row { background: var(--f-bg); }
.category-title-row .type-icon { box-shadow: none; background: transparent; }
}
@media (forced-colors: active) {
.category-title-row { background: Canvas; }
}
/* ---------------------------------------------------------------------------------------------------
K4 Faktenkarte „Auf einen Blick“: 4b A (flach grau, kein Schatten) gegen 2a B (Ruheschatten) [4b A, 2a B]
Nikos Wahl 4b A ist die spezielle Entscheidung für die Faktenkarte: flach grau. Der Radius 16 (Karte, 2a B) bleibt.
--------------------------------------------------------------------------------------------------- */
.detail-facts { box-shadow: none; }
/* ---------------------------------------------------------------------------------------------------
K5 Pfeil an der Startzeile: 5a B (absolut am Zeilenrand, nur Zeiger) gegen 1b B (Frist am rechten Rand) und 4d D (Pfeil hinter dem Titel) [5a B, 1b B, 4d D]
Der Pfeil von 5a B säße am rechten Zeilenrand, dort steht jetzt die Fristmarke. Auflösung: Der Pfeil steht hinter dem Titel (4d D, überall),
bewegt sich beim Zeigen 4 px nach rechts (5a B) und trägt keinen Abstand rechts (kein Platzhalter für den Zeilenrand mehr).
--------------------------------------------------------------------------------------------------- */
#main .home-result h3 a > span[aria-hidden="true"] {
display: inline-block; position: static; inset: auto; width: auto; height: auto; margin: 0 0 0 .5em;
font-size: inherit; line-height: inherit; text-align: start; font-weight: 400; white-space: nowrap; color: var(--muted);
}
#main .home-result > div:first-child { padding-inline-end: 0; }
/* ---------------------------------------------------------------------------------------------------
K6 Silbentrennung in der Faktenspalte: 6a B (8 4 4) gegen die gemessene Regel des Richtungsprototyps (8 5 5, WebKit manuell) [6a B, Basis]
--------------------------------------------------------------------------------------------------- */
@container listenbreite (min-width: 62rem) {
.result-copy > .eligibility, .result-copy > .fee-note, .home-result > div > .home-signal { hyphenate-limit-chars: 8 5 5; }
}
@supports (-webkit-hyphenate-limit-before: 1) and (not (hyphenate-limit-chars: 1)) {
@container listenbreite (min-width: 62rem) {
.result-copy > .eligibility, .result-copy > .fee-note, .home-result > div > .home-signal { hyphens: manual; }
}
}
/* ---------------------------------------------------------------------------------------------------
K7 Suchleiste (3c C, Desktop): Felder 56 px hoch gegen die Basisregel 48 px [3c C, Zugangsprüfung S1]
Die Zugangsprüfung S1 verlangt in der Hero 56 px für Eingabe- und Auswahlfelder. 3c C setzt in der Leiste 48 px (die Felder sitzen in der
Leiste ohne eigenen Rand). Die Leiste ist durch die 56-px-Felder höher, der Button (56 px) fügt sich ein.
--------------------------------------------------------------------------------------------------- */
@container held (min-width: 56rem) {
#main #home-search :is(input, select) { min-height: 56px; }
}
/* ---------------------------------------------------------------------------------------------------
K9 Suchkarte (3c C, Handy) auf sehr schmaler Hero: Beschriftung und Platzhalter ohne Wortbruch bzw. Kappung [3c C, Zugangsprüfung M1, messen.py]
Bei 200 % Schrift misst „Veranstaltungsland“ 301 px. Hero (20 px) plus Kartenrand (16 px) lassen auf 390 px nur 286 px. Auf 320 px bei 100 %
kappt Firefox den Platzhalter „Titel oder Ort“ im Suchfeld (das Feld ist nur 216 px breit; der Richtungsprototyp hatte hier keine Karte).
Sobald die Hero enger als 19 rem ist (320 px bei 100 %, jede Breite bei großer Schrift), tritt die Karte 6 px in den Heroabstand und trägt 8 px
Innenrand: auf 390 px/200 % 314 px für die Beschriftung, auf 320 px/100 % 244 px für das Suchfeld.
--------------------------------------------------------------------------------------------------- */
@container held (max-width: 19rem) {
.home-search { margin-inline: -6px; padding-inline: 8px; }
}
/* #####################################################################################
SCHICHT 25-nach-pruefung: NEU Korrekturen nach der Prüfung (N1 bis N6, siehe AENDERUNGEN.md, Abschnitt „Nach Prüfung“)
Herkunft: gesamt/runde1/css/teile/25-nach-pruefung.css
Stellung: Nach der Konfliktauflösung (überschreibt K1 und 4a B gezielt), vor dem Chevron.
##################################################################################### */
/* =====================================================================================
RUNDE 1 · NACH PRÜFUNG (9. Oktober 2026)
Behebt die Mängel aus dem Prüfbericht, die in der Darstellung liegen. Dieser Teil steht NACH der Konfliktauflösung (20-konflikte) und
VOR dem Chevron (30-chevron). Keine neuen festen Farbwerte: nur Variablen der Quelle und der Schichten. Kein neuer Text.
Jeder Block nennt den Mangel (N-Nummer = Abschnitt „Nach Prüfung“ in AENDERUNGEN.md).
===================================================================================== */
/* ---------------------------------------------------------------------------------------------------
N1 Start, Liste und Kalender bei großer Schrift auf dem iPad: Zweispaltigkeit nach Listenbreite statt nach Pixeln [1a B, 1b B, 6a B, K1]
Mangel: K1 und 1a B schalten die Zweispaltenzeile ab 721 px FENSTERBREITE ein, die Fristspalte rechnet aber in rem (13,5 rem). Bei 768 px
und 200 % Text sind das 432 px Frist und nur 224 px Text: Titel brechen im Wort („Kunstproje / kt“, „ausgeschlos / sen“).
Auflösung: Unter 34 rem Listenbreite (Fristspalte 13,5 rem plus Abstand plus mindestens 18 rem Text) steht die Frist über dem Text, wie auf dem
Handy. rem in der Container-Abfrage folgt der eingestellten Schrift (wie bei 6a B): 768 px bei 100 % bleibt zweispaltig (45 rem), bei 150 %
(30 rem) und 200 % (22,5 rem) einspaltig; 1024 px bei 150 % (40 rem) wieder zweispaltig. Auf dem Handy (bis 720 px) ändert sich nichts.
Die Container „listenbreite“ (#results, #home-results) kommen aus 6a B; der Kalender bekommt einen eigenen (gleiche Ursache, gleicher Weg).
--------------------------------------------------------------------------------------------------- */
#calendar { container: kalenderbreite / inline-size; }
@media (min-width: 721px) {
@container listenbreite (max-width: 33.99rem) {
.home-result, .result { grid-template-columns: minmax(0, 1fr); gap: .875rem; align-items: start; }
.home-result > .deadline-block, .result > .deadline-block { grid-column: 1; grid-row: 1; justify-self: start; }
.home-result > div:first-child, .result > .result-copy { grid-column: 1; grid-row: 2; }
}
@container kalenderbreite (max-width: 33.99rem) {
.calendar-row { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
}
}
/* ---------------------------------------------------------------------------------------------------
N2 Tönung (4a B) bei großer Schrift: Innenrand und Knopf wachsen nicht mit der Schrift [4a B]
Mangel (neu gegenüber der Richtung): „Dein nächster Schritt“ liegt jetzt auf einer Fläche mit 1 rem (Handy) bzw. 1,25 rem Innenrand. Bei 200 % sind das
32 bzw. 40 px je Seite, die Überschrift „Originalquelle“ (305 px) und der Knopf „Originalquelle ansehen“ brachen auf 390 px im Wort.
Auflösung: Der Innenrand bleibt bei seiner Größe von 100 % (16 bzw. 20 px) und wächst nicht mit der Schrift (min(rem, px)); der Knopf in der Fläche
bekommt dieselbe Grenze. Bei 100 % Text ändert sich nichts.
--------------------------------------------------------------------------------------------------- */
:root { --hint-pad: min(1.25rem, 20px); }
@media (max-width: 720px) {
:root { --hint-pad: min(1rem, 16px); }
#main .detail-copy .source-action .primary { padding-inline: min(1.25rem, 20px); }
}
/* ---------------------------------------------------------------------------------------------------
N3 Einreichen-Seite: Die Überschrift „Ausschreibung einreichen“ passt auf 320 px in ein Stück [Beschriftung 3d B]
Mangel: Das Wort hat 13 statt 6 Zeichen. Bei 36 px misst „Ausschreibung“ 240,4 px, die Spalte auf 320 px hat 240 px: „Ausschreibun / g“.
Die Mindestgröße dieser Überschrift ist jetzt 2 rem (32 px; vorher 2,25 rem) und wächst wie bei den anderen Überschriften mit der Fensterbreite
(1,5 rem + 2,6 vw bis 3,25 rem). Sie bleibt rem-basiert: Wer die Schrift vergrößert, bekommt sie größer. Wenn das Wort trotzdem nicht passt
(große Schrift, schmales Fenster), trennt es die weiche Trennstelle der Beschriftung (Aus-schrei-bung), nicht ein Notbruch.
--------------------------------------------------------------------------------------------------- */
#main #gesuch h1 { font-size: clamp(2rem, 1.5rem + 2.6vw, 3.25rem); }
/* Der Innenrand der blauen Fläche wächst auf dem Handy nicht mit der Schrift (1,5 rem = 48 px je Seite bei 200 %): höchstens seine Größe bei 100 % (24 px).
Auf 320 px bei 200 % bleiben so 240 statt 192 px für die Überschrift; bei 100 % bleibt der Rand wie bisher. */
@media (max-width: 720px) {
.provider-hero { padding-inline: min(1.5rem, 24px); }
}
/* overflow-wrap: anywhere (Basis der Quelle, body) macht jeden Buchstaben zur Bruchstelle und lässt Elemente in Flex-/Grid-Zeilen bis auf einen Buchstaben
zusammenschrumpfen (gemessen: Hilfe-Knopf bei 768 px und 200 %, „A / us / sch / …“). break-word bricht erst im Wort, wenn auch die nächste
weiche Trennstelle nicht mehr passt, und rechnet die Mindestbreite mit dem ganzen Wort. Nur für die vier Stellen der Beschriftung. */
.site-header a.provider-link, #gesuch h1, .help-aside a[href="#gesuch"], a.back-link { overflow-wrap: break-word; }
/* ---------------------------------------------------------------------------------------------------
N4 Knopf „Ausschreibung einreichen“ im Hilfe-Aside bei großer Schrift [Beschriftung 3d B]
Mangel: Aside-Innenrand (1,5 rem), Knopf-Innenrand (1,25 rem) und Abstand zum Pfeil (1,75 rem) wachsen mit der Schrift; bei 200 % auf 390 px blieben für das Wort
140 px („Aussch / reibung / einreich / en“). Auflösung (nur Fenster bis 720 px): Alle drei bleiben bei ihrer Größe von 100 % (24, 20 und 28 px).
Das Wort bekommt so 230 statt 140 px und trennt, wenn es trotzdem nicht passt, an den weichen Trennstellen. Bei 100 % bleibt alles wie bisher.
--------------------------------------------------------------------------------------------------- */
@media (max-width: 720px) {
.help-aside { padding-inline: min(1.5rem, 24px); }
.help-aside .hero-search-button { padding-inline: min(1.25rem, 20px); gap: min(1.75rem, 28px); }
}
/* ---------------------------------------------------------------------------------------------------
N5 Betreiberhinweis in der Fußzeile: 18 px [Leitplanke Sätze]
Mangel: Der Satz „Ein Angebot von …, Betreiber der Ikonenschmiede“ stand mit 16 px in der Fußzeile (Etikettengröße). Es ist ein Satz und die offene
Betreiberverbindung: 18 px (--fs-text). Nur die Prototypzeile „Lokaler Designentwurf · …“ (14 px) bleibt als Rahmen des Prototyps klein.
--------------------------------------------------------------------------------------------------- */
.footer-bottom > p:first-child { font-size: var(--fs-text); }
/* ---------------------------------------------------------------------------------------------------
N6 Kategoriekarte: Die Unterstreichung des Titels liegt nur unter dem Text [3a C, K8]
Mangel: K8 macht den Titel zum flexiblen Element (flex: 1 1 7.5em), seine Box ist breiter als der Text. Die Basis zeichnet die Linie als
Hintergrund über die ganze Boxbreite: Beim Zeigen und beim Tastaturfokus ragte sie bis zu 70 px über das Wortende hinaus.
Auflösung: Die Linie ist jetzt eine echte Textunterstreichung (2 px, Abstand .2 em). Sie läuft nur unter dem Text und bei zwei Zeilen unter
jeder Zeile bis zum Zeilenende des Textes. Sie blendet in 220 ms ein (Farbe von durchsichtig zu Textfarbe) statt sich von links zu zeichnen;
bei reduzierter Bewegung steht sie sofort. Im Kontrastmodus gibt es sie nur beim Zeigen und beim Fokus.
--------------------------------------------------------------------------------------------------- */
.category-title {
background: none;
text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; text-decoration-skip-ink: auto;
text-decoration-color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
.category-title { transition: text-decoration-color var(--dur-line) var(--ease); }
}
@media (hover: hover) {
.category-link:hover .category-title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; text-decoration-color: currentColor; }
}
.category-link:focus-visible .category-title { text-decoration-color: currentColor; }
@media (forced-colors: active) {
.category-title { text-decoration: none; }
.category-link:hover .category-title, .category-link:focus-visible .category-title { text-decoration: underline; text-decoration-thickness: 2px; }
}
/* ---------------------------------------------------------------------------------------------------
N7 Hilfeseite: Der Knopf „Ausschreibung einreichen“ passt bei großer Schrift auf dem iPad in seine Spalte [Beschriftung 3d B]
Mangel (Messung nach N3/N4): Auf 768 px bei 200 % Text steht die blaue Fläche in einer 260-px-Spalte (Quelle: fest 260 px zwischen 721 und 1000 px, 330 px darüber)
mit 56 px Innenrand, also 148 px Platz. Der Knopf braucht auch mit weichen Trennstellen 240 px (Innenrand 40 px je Seite, Abstand 24 px, Pfeil, dazu das längste
Wortstück „schrei-“): er ragte 12 px über das Fenster hinaus (Seitenüberlauf). Früher, mit dem kürzeren „Ausschreibung einreichen“, brach „einreichen“ an derselben Stelle.
Auflösung (zwei Schritte, beide nur bei großer Schrift wirksam):
(a) Der Innenrand der blauen Fläche wächst nicht über seine Größe bei 100 % (28 px) hinaus, auch über 720 px (unter 720 px regelt das N4).
(b) Ist der Text-Bereich der Hilfeseite schmaler als 31 rem (rem folgt der eingestellten Schrift, wie bei N1), steht die blaue Fläche unter den Schritten, wie die
Quelle es unter 720 px schon tut. 768 px bei 100 % (45 rem) und 125 % (36 rem) bleiben zweispaltig; 768 px ab 150 % (30 rem) und 1024 px bei 200 % (30,5 rem) stehen
einspaltig; 1440 px bei 200 % (39 rem) bleibt zweispaltig, dort hat die Spalte 330 px.
--------------------------------------------------------------------------------------------------- */
.help-page { container: hilfebreite / inline-size; }
@media (min-width: 721px) {
.help-aside { padding-inline: min(1.75rem, 28px); }
}
@container hilfebreite (max-width: 30.99rem) {
.help-layout { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
}
/* #####################################################################################
SCHICHT 30-chevron: NEU Chevron an Aufklappern und Auswahlfeldern (4d D plus)
Herkunft: gesamt/runde1/css/teile/30-chevron.css
Stellung: Nach den Wahl-Schichten (überschreibt nichts außer dem offenen Zustand der Auswahlfelder).
##################################################################################### */
/* =====================================================================================
RUNDE 1 · NEU · Chevron an Aufklappern und Auswahlfeldern (Nikos Wahl 4d D plus)
Auftrag: Aufklapper (details/summary) und Auswahlfelder (select, Filter, „In diesem Eintrag“) tragen einen Pfeil nach unten (Chevron),
der beim Öffnen um 180° dreht. Übergang höchstens 200 ms, bei reduzierter Bewegung keine Drehung (nur Zustandswechsel),
Kontrast mindestens 3:1, vorhandene Pfeile nicht doppeln.
Stand der Basis (richtung/empfehlung.css, Abschnitt 6.3 und 6.4) – hier NICHT wiederholt, sonst gäbe es zwei Pfeile:
- Aufklapper: jede summary trägt im Quelltext ein +; die Basis ersetzt es durch den Chevron (--chev, 1,25 rem),
dreht ihn beim Öffnen um 180° in 180 ms (--dur-2) und tauscht unter prefers-reduced-motion: reduce das Bild gegen den Chevron nach oben.
- Auswahlfelder: Chevron als Hintergrundbild (--chev) rechts im Feld.
Neu in dieser Schicht (nur das, was der Basis fehlt):
1 Auswahlfelder: Beim geöffneten Menü wechselt der Chevron nach oben (Zustandswechsel, auch ohne Bewegungswunsch ohne Drehung).
Ein Hintergrundbild lässt sich nicht drehen, und ein Hüllelement um das Feld (für eine echte Drehung) wäre eine Markup-Änderung;
außerdem fügt das Formularskript der Quelle Fehlertexte direkt hinter dem Feld ein. Darum: Wechsel statt Drehung, per :open.
:open kennen Chromium (ab 133) und Firefox (ab 136); WebKit 26.0 kennt es nicht (gemessen). Dort bleibt der Chevron unten; auf dem
iPhone öffnet sich ohnehin ein Systemmenü.
2 Farben nur über Variablen (--chev und --chev-up der Basis). Der Strich ist #515966 auf Weiß (7,0:1) und auf --wash (6,5:1), also über 3:1.
===================================================================================== */
@supports selector(:open) {
#main select:open { background-image: var(--chev-up); }
}
@media (forced-colors: active) {
#main select:open { background-image: none; }
}
/* Markenschicht Blau (Welt „Gedecktes Blau“), Stand nach der Prüfung. Wird NACH gesamt/runde1/css/runde1.css geladen (gleiche Spezifizität, später = gewinnt).
Schriften als file://-URL auf die lokalen Dateien; für ein einzelnes HTML mit marke/pruefskripte/blau_bauen.py einbetten. Kein Download, keine Netzanfrage.
Erzeugt von marke/pruefskripte/blau_farben.py (Farbwerte stehen nur dort). Keine Serifenschrift. */
/* ===== MARKENSCHICHT blau ===== */
@font-face{font-family:"Ysabeau Office";src:url("/seo-assets/a4af4da9ee40ce3010b64215c2caaa00a6770b86e28ef41a3eac337a34bbce51.woff2") format("woff2");font-weight:1 1000;font-style:normal;font-display:swap}
@font-face{font-family:"Radio Canada";src:url("/seo-assets/d5fe04e4d29837e3164aa1276fc13a7f3ecab1815d1791c22e972afb422fbc5b.woff2") format("woff2");font-weight:300 700;font-style:normal;font-stretch:75% 100%;font-display:swap}
:root {
/* Quelle (Q) */
--paper:#ffffff; --surface:#ffffff;
--ink:#15242D; --muted:#3A4E5A;
--accent:#2B4E64; --accent-hover:#1E3C4F;
--wash:#F2F5F7; --line:#D4DDE2;
--stage-text:#2B3F4B; --deadline-bg:#f6dd6f; --deadline-ink:#252215;
--control:#657A87; --warn:#65471d; --warn-bg:#f4ead7;
--body:"Radio Canada","Ysabeau Office",system-ui,sans-serif; --display:"Ysabeau Office","Gill Sans","Gill Sans MT",system-ui,sans-serif;
/* Richtungs-/Gesamtprototyp */
--control-soft:#788C98;
--fam-blue:#D9E6EE; --fam-blue-line:#AAC2D2; --fam-blue-ink:#21475E; /* Name bleibt, Wert = Familie 1 (Aufträge, Residenzen) */
--fam-gold:#fdf3c8; --fam-gold-line:#e9d98f; --fam-gold-ink:#654704;
--fam-neutral:#EFEDE8; --fam-neutral-line:#D8D5CE; --fam-neutral-ink:#15242D;
--fam-blue-2:#f0f5f8; --fam-gold-2:#fefae9; --fam-neutral-2:#f9f8f6; /* 40 % des Familientons auf Weiß */
--hint-bg:#E8EFF3;
--chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%233A4E5A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
--chev-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%233A4E5A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5-5 5 5'/%3E%3C/svg%3E");
/* NEU (Hero getrennt vom Akzent) */
--hero-bg:#C9D9E6; --hero-ink:#15242D; --hero-ring:#2B4E64;
}
/* Heller Hero: Grundton, Schrift- und Ringfarbe */
.hero, .info-ueber-uns .info-hero, .provider-hero, .info-cta, .help-aside { background-color: var(--hero-bg); color: var(--hero-ink); }
/* Fokusring in Hero-Flächen: Akzent statt Gelb (Gelb wäre auf hellem Grund 1,2:1); gilt auch in der weißen Suchkarte */
:is(.hero, .provider-hero, .info-ueber-uns .info-hero, .info-cta, .help-aside) :focus-visible { outline-color: var(--hero-ring); }
.site-header nav a.provider-link[aria-current="page"] { color: var(--accent-hover); }
/* Hero ist hell: Knöpfe in Hero-Flächen als Akzentknopf, Suchkarte mit Rand */
.hero-search-button { color: var(--surface); background: var(--accent); border-color: var(--accent); }
@media (hover: hover) { .hero-search-button:hover { background: var(--accent-hover); border-color: var(--accent-hover); } }
/* Touch (hover: none): Die Basis (runde1.css, [P-Browser K3]) setzt :hover dort auf den Ruhewert des DUNKLEN Heros zurück (weißer Grund). Im hellen Hero ist der Ruhewert
der Akzentknopf mit weißer Schrift; ohne diese Regel blieb der Knopf nach dem Antippen weiß auf weiß (1,0:1) in der Hilfe-Seitenleiste und im Über-uns-Abschluss. */
@media (hover: none) { .hero-search-button:hover { background: var(--accent); border-color: var(--accent); } }
.home-search { border: 1px solid var(--control); }
/* ---- Schrift Blau: Überschriften, Wortmarke und Fristtag Ysabeau Office (humanistische Sans, Pfeile vorhanden); Fließtext Radio Canada (Pfeile als Ersatz aus Ysabeau Office) ---- */
h1, h2, h3, .wordmark, .category-title, .deadline-day { font-family: var(--display); font-variant-numeric: lining-nums tabular-nums; }
#main h1 { font-weight: 560; letter-spacing: -.012em; line-height: 1.1; }
#main .hero h1 { letter-spacing: -.012em; }
h2 { font-weight: 580; letter-spacing: -.008em; }
h3, .category-title { font-weight: 620; letter-spacing: 0; }
.wordmark { font-weight: 620; letter-spacing: .005em; }
.deadline-day { font-weight: 640; letter-spacing: 0; }
/* Fristtag (große Zahl in der Fristmarke): Zeilenhöhe 1,36 statt 1,1, damit die Inhaltsfläche von Ysabeau Office (1,343 em) in jeder Engine
innerhalb der Zeile und damit innerhalb der Marke liegt. Ohne das ragte der Text im WebKit 3 px unter die Marke. Die gelbe Fläche (42 % der Zeile) wird dadurch
etwas höher; der Streifen sitzt weiter wie ein Textmarker über der unteren Zahlenhälfte. */
.deadline-day, .deadline-block .deadline-day, :is(.home-result, .result, .calendar-row) .deadline-day { line-height: 1.36; }
/* Niko, 10.10.2026: Branding in Babyblau. Eigene Palette; keine Layout-/Schriftänderung. */
:root {
--brand-baby:#89CFF0;
--brand-ink:#15242D;
--hero-bg:var(--brand-baby); --hero-ink:var(--brand-ink); --hero-ring:#205774;
--accent:#205774; --accent-hover:#16435B;
--wash:#F2F8FC; --line:#D1E4EE;
--fam-blue:#CFEAF9; --fam-blue-line:#9ACEE8; --fam-blue-ink:#205774;
--fam-blue-2:#ECF7FD; --hint-bg:#E7F5FC;
}
/* Country is the opportunity's actual location. Text carries the meaning too. */
.country-flag{display:inline-block;width:1.5rem;height:1rem;flex:0 0 auto;vertical-align:middle;filter:drop-shadow(0 0 1px #15242d55)}
.country-flag[data-country="CH"]{width:1rem}
.chance-place{display:inline-flex;align-items:center;gap:.45rem;min-width:0;max-width:100%;color:#15242d}
.chance-place>span{overflow-wrap:anywhere}
.kind,.calendar-kind{flex-wrap:wrap;gap:.45rem .65rem}
.kind>.chance-place{font-weight:500}
.place-rule{display:block;margin-top:.35rem}
.country-picker{margin:0 0 1.25rem}
.country-picker-label{margin:0 0 .5rem;font-weight:650;color:#15242d}
.country-options{display:flex;flex-wrap:wrap;gap:.5rem}
.country-option{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;padding:.55rem .85rem;border:1px solid #205774;border-radius:4px;background:#fff;color:#205774;font-weight:600;line-height:1.3;text-decoration:none}
.country-option[aria-current="true"]{background:#89cff0;color:#15242d;box-shadow:inset 0 0 0 1px #205774}
.country-option:hover{background:#e6f5fc;color:#15242d}
.country-option:focus-visible{outline:3px solid #205774;outline-offset:3px}
@media(max-width:480px){.country-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.country-option{padding:.6rem .4rem;overflow-wrap:anywhere}.country-option:last-child{grid-column:1/-1}}
/* Niko, 12.10.2026: Direkt-Suche, Atelier und ruhige Chancenliste. */
.ux-search { display:block; margin-top:1.75rem; }
.ux-search-row { display:flex; gap:12px; align-items:center; }
.ux-search-row .ux-query { flex:1; min-width:0; position:relative; }
.ux-search-row .ux-query label,.ux-filters .ux-native-label,.ux-menu legend { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.ux-search-row input[type=search] { width:100%; min-width:0; min-height:48px; padding:10px 12px; border:0; border-radius:12px; background:#F2EEE6; color:#282C29; font-size:16px; }
.ux-search-row .ux-submit { min-height:48px; padding:10px 16px; border:0; border-radius:12px; background:#89CFF0; color:#15242D; font-size:16px; white-space:nowrap; }
.ux-filters { position:relative; display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr) minmax(0,.8fr); gap:18px; margin:4px 0 0 12px; width:calc(100% - 12px); max-width:340px; font:16px/1.4 'Radio Canada',sans-serif; }
.ux-filters > div,.ux-filter { min-width:0; position:static; }
.ux-filters select { width:100%; min-width:0; min-height:44px; padding:9px 0; border:0; background:transparent; font-size:16px; }
.ux-filter > summary { display:flex; align-items:center; justify-content:space-between; gap:6px; min-height:44px; padding:9px 0; background:transparent; border:0; border-radius:4px; list-style:none; color:#282C29; }
.ux-filter > summary::-webkit-details-marker { display:none; }
.ux-filter > summary > span:first-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ux-filter > summary .ux-chevron { display:block; flex:none; width:7px; height:7px; border-right:1px solid currentColor; border-bottom:1px solid currentColor; transform:rotate(45deg); margin:0 3px 4px; }
.ux-filter[open] > summary .ux-chevron { transform:rotate(225deg); margin-bottom:0; }
.ux-filter > summary[data-active=true] { color:#205774; text-decoration:underline; text-underline-offset:4px; }
.ux-menu { position:absolute; top:calc(100% + 8px); left:0; z-index:30; width:100%; min-width:0; margin:0; padding:12px; border:1px solid #D1E4EE; border-radius:14px; background:#FFFFFF; box-shadow:0 12px 32px #20577424; }
.ux-option-list { display:grid; gap:8px; }
.ux-option { display:flex; align-items:center; gap:12px; min-height:48px; margin:0; padding:12px; border-radius:9px; font-size:16px; line-height:1.4; color:#282C29; background:#FFFFFF; }
.ux-option:hover { background:#F2EEE6; }
.ux-option:has(input:checked) { background:#E3F3FB; color:#205774; }
.ux-option .ux-option-text { flex:1; min-width:0; overflow-wrap:anywhere; }
.ux-option .type-icon,.ux-option .country-flag { width:20px; height:20px; flex:none; color:#205774; stroke-width:1.5; }
.ux-option input[type=radio] { flex:none; width:18px; height:18px; min-height:0; margin:0 0 0 auto; padding:0; accent-color:#205774; }
.ux-search #more-filters { margin-top:12px; }
.ux-search #more-filters > summary { min-height:44px; width:fit-content; font-size:14px; }
.ux-search .ux-advanced-fields { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding-top:16px; }
.ux-search .filter-actions { margin-top:12px; }
#home-view .categories .section-heading { margin-bottom:28px; }
#home-view .category-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
#home-view .category-link { display:flex; align-items:center; gap:24px; min-height:146px; padding:20px; border:0; border-radius:26px; background:#E3F3FB; color:#282C29; text-decoration:none; }
#home-view .category-link:nth-child(even) { background:#F2EEE6; }
#home-view .category-link:hover { background:#D6EBF5; }
#home-view .category-link[aria-current=true] { background:#89CFF0; }
#home-view .category-link .ux-category-icon { width:44.2px; height:44.2px; flex:none; color:#205774; stroke-width:1.15; }
#home-view .category-link .ux-category-copy { min-width:0; display:block; }
#home-view .category-link .category-title { display:block; font:650 28px/1.05 'Ysabeau Office',sans-serif; letter-spacing:-.5px; hyphens:manual; }
#home-view .category-link .ux-category-subtitle { display:block; margin-top:7px; font:14px/1.3 'Radio Canada',sans-serif; }
#home-view .category-link .ux-category-selected { display:none; margin-top:10px; font-size:12px; }
#home-view .category-link[aria-current=true] .ux-category-selected { display:block; }
.ux-chance { display:block; padding:24px 0; border:0; border-bottom:1px solid #D1E4EE; color:#15242D; background:#FFFFFF; font:16px/1.5 'Radio Canada',sans-serif; }
.ux-chance .kind { display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin:0 0 12px; color:#536570; font-size:13px; }
.ux-chance .kind .type-icon { width:17px; height:17px; color:#205774; }
.ux-chance .chance-place { display:inline-flex; align-items:center; gap:7px; }
.ux-chance .country-flag { width:19px; height:16px; flex:none; }
.ux-chance .ux-chance-main { display:grid; grid-template-columns:minmax(0,1fr) minmax(178px,220px); grid-template-areas:'description value' 'criteria value'; gap:18px 24px; }
.ux-chance .ux-chance-description { grid-area:description; }
.ux-chance h3 { margin:0; font:600 24px/1.25 'Ysabeau Office',sans-serif; letter-spacing:-.5px; }
.ux-chance h3 a { text-decoration:none; }
.ux-chance h3 a:hover { text-decoration:underline; }
.ux-chance .provider { display:none; }
.ux-chance .ux-chance-value { grid-area:value; text-align:right; }
.ux-chance .ux-value-label { display:block; margin-bottom:5px; color:#536570; font-size:12px; }
.ux-chance .benefit { display:block; margin:0; padding:0; color:#15242D; font:600 18px/1.35 'Radio Canada',sans-serif; }
.ux-chance .deadline-block { display:inline-block; width:auto; min-width:0; margin:18px 0 0; padding:3px 7px; border:0; border-radius:3px; background:#FFF5D9; color:#69501F; }
.ux-chance .deadline-label { display:block; margin:0; color:inherit; font:400 11px/1.3 'Radio Canada',sans-serif; }
.ux-chance .deadline,.ux-chance .deadline-day,.ux-chance .deadline-month { display:inline; margin:0; color:inherit; font:400 13px/1.5 'Radio Canada',sans-serif; letter-spacing:0; }
.ux-chance .ux-chance-criteria { grid-area:criteria; min-width:0; }
.ux-chance .eligibility,.ux-chance .home-signal { margin:0; font-size:14px; }
.ux-chance .fee-note { margin:7px 0 0; color:#536570; font-size:13px; }
.ux-chance .native-recheck { margin-top:7px; font-size:13px; }
.ux-chance .detail-link { display:inline-flex; align-items:center; gap:8px; min-height:44px; margin-top:12px; font-size:14px; color:#205774; }
@media(min-width:1100px) { #home-view .category-link .category-title { font-size:28px; } }
@media(max-width:650px) { #home-view .category-link { gap:12px; padding:18px; } #home-view .category-link .category-title { font-size:19px; } }
@media(max-width:550px) {
.ux-search-row { gap:8px; } .ux-search-row .ux-submit { padding:10px 12px; font-size:14px; }
.ux-search .ux-advanced-fields { grid-template-columns:1fr; }
#home-view .category-grid { gap:10px; }
#home-view .category-link { flex-direction:column; align-items:flex-start; justify-content:flex-start; min-height:194px; padding:18px 14px; gap:16px; }
#home-view .category-link .ux-category-icon { width:40.04px; height:40.04px; }
#home-view .category-link .category-title { font-size:18px; }
.ux-chance .ux-chance-main { grid-template-columns:minmax(0,1fr); grid-template-areas:'description' 'value' 'criteria'; gap:16px; }
.ux-chance .ux-chance-value { text-align:left; } .ux-chance .ux-value-label { display:none; }
.ux-chance .deadline-block { margin-top:11px; } .ux-chance h3 { font-size:23px; }
}
/* Isolate the accepted components from the older global presentation layer. */
#main #home-search.ux-search { padding:0; margin-inline:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
#main #home-search .ux-query input { min-height:48px; padding:10px 12px; border:0; border-radius:12px; background:#F2EEE6; font:400 16px/1.4 'Radio Canada',sans-serif; }
#main #home-search .ux-submit { min-height:48px; font-size:16px; }
#main #home-search .ux-filters select { min-height:44px; border:0; background-color:transparent; font:400 16px/1.4 'Radio Canada',sans-serif; }
#main #home-search .ux-filter > summary { padding:9px 0; border:0; border-radius:4px; background:transparent; box-shadow:none; font:400 16px/1.4 'Radio Canada',sans-serif; }
#main #home-search .ux-filter > summary .ux-chevron { width:7px; height:7px; background:none; border:0; border-right:1px solid currentColor; border-bottom:1px solid currentColor; transform:rotate(45deg); margin:0 3px 4px; }
#main #home-search .ux-filter[open] > summary .ux-chevron { background:none; transform:rotate(225deg); margin-bottom:0; }
#main #home-search .ux-option { font:400 16px/1.4 'Radio Canada',sans-serif; }
#main #home-search .ux-option input[type=radio] { min-height:0; width:18px; height:18px; padding:0; }
#main #home-view .category-grid { grid-template-rows:none; grid-auto-rows:auto; }
#main #home-view .category-link { flex-direction:row; justify-content:flex-start; text-align:left; grid-row:auto; grid-column:auto; grid-template:none; }
#main :is(#home-results,#results) .ux-chance .kind { font:400 13px/1.4 'Radio Canada',sans-serif; }
#main :is(#home-results,#results) .ux-chance h3,#main :is(#home-results,#results) .ux-chance h3 a { font:600 24px/1.25 'Ysabeau Office',sans-serif; letter-spacing:-.5px; }
#main :is(#home-results,#results) .ux-chance .eligibility,#main :is(#home-results,#results) .ux-chance .home-signal { font:400 14px/1.5 'Radio Canada',sans-serif; }
#main :is(#home-results,#results) .ux-chance .fee-note { font:400 13px/1.5 'Radio Canada',sans-serif; }
#main :is(#home-results,#results) .ux-chance .deadline-label { font:400 11px/1.3 'Radio Canada',sans-serif; }
#main :is(#home-results,#results) .ux-chance .deadline { background-image:none; }
@media(max-width:550px) {
#main #home-search .ux-submit { font-size:14px; }
#main #home-view .category-link { flex-direction:column; align-items:flex-start; }
#main :is(#home-results,#results) .ux-chance h3,#main :is(#home-results,#results) .ux-chance h3 a { font-size:23px; }
}
/* Niko, 13.10.2026: white entrance and room for the actual, longer opportunity text. */
#main #home-view > .hero { background:transparent; background-image:none; border:0; border-radius:0; box-shadow:none; margin-top:0; padding:40px 0 8px; color:var(--brand-ink); }
#main #home-view #home-search { max-width:880px; margin-top:32px; }
#main :is(#home-results,#results) .ux-chance { display:block; grid-template:none; align-items:normal; container:opportunity / inline-size; padding:40px 0; }
#main :is(#home-results,#results) .ux-chance .ux-chance-main { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); grid-template-rows:max-content minmax(0,1fr); grid-template-areas:'description value' 'criteria value'; gap:24px 48px; align-items:start; }
#main :is(#home-results,#results) .ux-chance .ux-chance-value { min-width:0; max-width:none; text-align:left; }
#main :is(#home-results,#results) .ux-chance .ux-chance-criteria { max-width:74ch; }
#main :is(#home-results,#results) .ux-chance h3,#main :is(#home-results,#results) .ux-chance h3 a { font-size:26px; line-height:1.3; }
#main :is(#home-results,#results) .ux-chance .benefit { max-width:48ch; font-size:20px; line-height:1.4; }
#main :is(#home-results,#results) .ux-chance .eligibility,#main :is(#home-results,#results) .ux-chance .home-signal { font-size:15px; line-height:1.6; hyphens:none; }
#main :is(#home-results,#results) .ux-chance .fee-note { margin-top:12px; font-size:14px; line-height:1.6; hyphens:none; }
#main :is(#home-results,#results) .ux-chance .detail-link { margin-top:24px; }
@container opportunity (max-width:960px) {
#main :is(#home-results,#results) .ux-chance .ux-chance-main { grid-template-columns:minmax(0,1fr); grid-template-rows:auto; grid-template-areas:'description' 'value' 'criteria'; gap:24px; }
#main :is(#home-results,#results) .ux-chance .ux-chance-value { max-width:65ch; }
#main :is(#home-results,#results) .ux-chance .ux-value-label { display:none; }
#main :is(#home-results,#results) .ux-chance .deadline-block { margin-top:12px; }
}
@container opportunity (max-width:550px) {
#main :is(#home-results,#results) .ux-chance h3,#main :is(#home-results,#results) .ux-chance h3 a { font-size:23px; }
}
/* Niko, 13.10.2026: stable labels, selected logo, readable opportunity summaries. */
.site-header .wordmark .brand-logo { display:block; width:280px; max-width:100%; height:auto; margin:0; }
#main #home-search .ux-filter > summary > span:first-child { transform:none; rotate:none; transition:none; }
#main :is(#home-results,#results) .ux-chance .ux-chance-meta { display:flex; flex-wrap:wrap; align-items:center; gap:8px 24px; margin:0 0 20px; }
#main :is(#home-results,#results) .ux-chance .kind { margin:0; }
#main :is(#home-results,#results) .ux-chance .deadline-block { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0; padding:0; background:transparent; color:#15242D; }
#main :is(#home-results,#results) .ux-chance .deadline-label { margin:0; font:700 13px/1.5 'Radio Canada',sans-serif; }
#main :is(#home-results,#results) .ux-chance .deadline { display:inline-block; padding:4px 8px; border-radius:3px; background:#FFF5D9; color:#69501F; font:500 13px/1.5 'Radio Canada',sans-serif; }
#main :is(#home-results,#results) .ux-chance .ux-chance-intro { display:block; margin:16px 0 0; max-width:65ch; font:400 16px/1.65 'Radio Canada',sans-serif; color:#344C5A; hyphens:none; }
#main :is(#home-results,#results) .ux-chance .ux-value-label { display:block; margin:0 0 12px; font:650 16px/1.4 'Radio Canada',sans-serif; color:#15242D; }
#main :is(#home-results,#results) .ux-chance ul.benefit { display:block; margin:0; padding:0 0 0 20px; list-style:disc outside; font:400 18px/1.5 'Radio Canada',sans-serif; }
#main :is(#home-results,#results) .ux-chance ul.benefit > li { display:list-item; margin:0 0 10px; padding:0 0 0 4px; }
#main :is(#home-results,#results) .ux-chance ul.benefit > li:last-child { margin-bottom:0; }
#main :is(#home-results,#results) .ux-chance ul.benefit > li::marker { color:#205774; font-size:.8em; }
@media(max-width:550px) { .site-header .wordmark .brand-logo { width:260px; } }
/* Niko, 13.10.2026: narrative first paragraph, positive benefits and calm type roles. */
#main :is(#home-results,#results) .ux-chance .ux-chance-main { grid-template-rows:auto; grid-template-areas:'description value'; }
#main :is(#home-results,#results) .ux-chance .ux-chance-intro,
#main :is(#home-results,#results) .ux-chance ul.benefit { font:400 1.0625rem/1.6 'Radio Canada',sans-serif; color:#344C5A; }
#main :is(#home-results,#results) .ux-chance .ux-value-label { font:650 1.0625rem/1.4 'Radio Canada',sans-serif; color:#15242D; }
#main :is(#home-results,#results) .ux-chance h3,
#main :is(#home-results,#results) .ux-chance h3 a { font-size:1.625rem; }
#main :is(#home-results,#results) .ux-chance .detail-link { font:600 1rem/1.5 'Radio Canada',sans-serif; text-decoration:none; border:0; background-image:none; }
#main :is(#home-results,#results) .ux-chance .detail-link span { text-decoration:none; border:0; background-image:none; }
#main :is(#home-results,#results) .ux-chance .detail-link:hover { color:#16435B; background-color:#E3F3FB; text-decoration:none; }
#main :is(#home-results,#results) .ux-chance .detail-link:focus-visible { outline:2px solid #205774; outline-offset:4px; border-radius:2px; }
#main .detail-facts .detail-cost-note { margin:0 0 1.5rem; padding:1rem; background:#F2EEE6; font:400 1rem/1.6 'Radio Canada',sans-serif; color:#344C5A; }
#main .detail-facts .detail-cost-note strong { display:block; margin-bottom:.25rem; color:#15242D; }
@container opportunity (max-width:960px) {
#main :is(#home-results,#results) .ux-chance .ux-chance-main { grid-template-areas:'description' 'value'; }
}
@container opportunity (max-width:550px) {
#main :is(#home-results,#results) .ux-chance h3,
#main :is(#home-results,#results) .ux-chance h3 a { font-size:1.4375rem; }
}
/* Approved Abschluss cards and compact decision-focused details, 13.10.2026. */
#main :is(#home-results,#results) .focus-card { padding-block:40px; }
#main :is(#home-results,#results) .focus-card .kind { margin:0; }
#main :is(#home-results,#results) .focus-card .focus-description { margin-top:24px; }
#main :is(#home-results,#results) .focus-card .ux-chance-intro { font:400 1.125rem/1.6 'Radio Canada',sans-serif; color:#344C5A; }
#main :is(#home-results,#results) .focus-card .focus-groups,
#main #detail-view .focus-detail .focus-groups { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:36px; margin-top:32px; padding-top:32px; border-top:1px solid #D1E4EE; }
#main :is(#home-results,#results) .focus-card .focus-groups { grid-template-columns:minmax(0,1fr); }
#main :is(#home-results,#results) .focus-card .focus-groups section,
#main #detail-view .focus-detail .focus-groups section { min-width:0; margin:0; padding:0; border:0; background:transparent; }
#main :is(#home-results,#results) .focus-card .focus-groups h4 { margin:0 0 12px; color:#15242D; font:650 1rem/1.4 'Radio Canada',sans-serif; }
#main :is(#home-results,#results) .focus-card ul.focus-items,
#main #detail-view .focus-detail .focus-items { display:block; max-width:none; margin:0; padding:0 0 0 18px; list-style:disc outside; color:#344C5A; font:400 1rem/1.6 'Radio Canada',sans-serif; }
#main :is(#home-results,#results) .focus-card .focus-items li,
#main #detail-view .focus-detail .focus-items li { display:list-item; padding-left:3px; margin:0 0 10px; }
#main .focus-items li::marker { color:#205774; font-size:.8em; }
#main :is(#home-results,#results) .focus-card .focus-action-row,
#main #detail-view .focus-detail .focus-action-row { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:24px; margin-top:32px; }
#main :is(#home-results,#results) .focus-card .deadline-block,
#main #detail-view .focus-detail .deadline-block { display:grid; justify-items:start; gap:8px; margin:0; padding:0; background:transparent; color:#15242D; }
#main :is(#home-results,#results) .focus-card .deadline-label,
#main #detail-view .focus-detail .deadline-label { margin:0; font:650 .875rem/1.4 'Radio Canada',sans-serif; }
#main :is(#home-results,#results) .focus-card .deadline,
#main #detail-view .focus-detail .deadline { display:inline-block; margin:0; padding:8px 12px; border-radius:3px; background:#FFF5D9; background-image:none; color:#69501F; font:600 1.25rem/1.3 'Radio Canada',sans-serif; }
#main :is(#home-results,#results) .focus-card .deadline :is(.deadline-day,.deadline-month),
#main #detail-view .focus-detail .deadline :is(.deadline-day,.deadline-month) { display:inline; font:inherit; }
#main .focus-card time.deadline,#main #detail-view .focus-detail time.deadline { white-space:nowrap; }
#main :is(#home-results,#results) .focus-card .detail-link { margin:0; padding:8px 0; }
#main :is(#home-results,#results) .focus-card .detail-link span { display:inline; margin:0; }
#main :is(#home-results,#results) .focus-card h3,
#main :is(#home-results,#results) .focus-card h3 a { font:600 1.625rem/1.3 'Ysabeau Office',sans-serif; }
#main :is(#home-results,#results) .focus-card h3 a::after { content:none; }
#main #detail-view .focus-detail { max-width:880px; margin-inline:auto; padding-block:24px 48px; }
#main #detail-view .focus-detail .back-link { display:inline-flex; align-items:center; min-height:44px; margin:0 0 32px; padding:8px 0; font:600 1rem/1.5 'Radio Canada',sans-serif; text-decoration:none; color:#205774; }
#main #detail-view .focus-detail .detail-heading { display:block; max-width:none; margin:0; padding:0; border:0; background:transparent; }
#main #detail-view .focus-detail .focus-context { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0; font:400 .8125rem/1.5 'Radio Canada',sans-serif; color:#344C5A; }
#main #detail-view .focus-detail h1 { margin:20px 0 0; max-width:none; font:600 2.125rem/1.2 'Ysabeau Office',sans-serif; letter-spacing:-.6px; color:#15242D; }
#main #detail-view .focus-detail .focus-intro { max-width:65ch; margin:18px 0 0; font:400 1.125rem/1.6 'Radio Canada',sans-serif; color:#344C5A; }
#main #detail-view .focus-detail h2 { margin:0 0 12px; font:650 1.125rem/1.4 'Radio Canada',sans-serif; color:#15242D; }
#main #detail-view .focus-detail .focus-qualifier { margin:0 0 12px; font:400 1rem/1.6 'Radio Canada',sans-serif; color:#344C5A; }
#main #detail-view .focus-detail .focus-supplement { margin:28px 0 0; padding:0; border:0; background:transparent; }
#main #detail-view .focus-detail .focus-costs { padding-top:28px; border-top:1px solid #D1E4EE; }
#main #detail-view .focus-detail .focus-supplement h2 { margin-bottom:8px; }
#main #detail-view .focus-detail .focus-supplement p { max-width:68ch; margin:0; font:400 1rem/1.6 'Radio Canada',sans-serif; color:#344C5A; }
#main #detail-view .focus-detail .native-application { display:inline-flex; align-items:center; min-height:48px; max-width:100%; margin:0; padding:12px 18px; border:0; border-radius:6px; background:#205774; color:#fff; font:600 1rem/1.4 'Radio Canada',sans-serif; text-decoration:none; background-image:none; }
#main #detail-view .focus-detail .native-application[aria-disabled] { background:#F2EEE6; color:#344C5A; }
#main #detail-view .focus-detail .focus-deadline-time { margin:8px 0 0; font:400 .875rem/1.5 'Radio Canada',sans-serif; color:#344C5A; }
#main #detail-view .focus-detail .focus-source { margin:24px 0 0; font:400 .75rem/1.7 'Radio Canada',sans-serif; color:#344C5A; }
#main #detail-view .focus-detail .focus-source a { display:inline-block; min-height:44px; padding:12px 0; color:inherit; text-decoration:none; }
#main #detail-view .focus-detail .focus-source a:hover { text-decoration:underline; text-underline-offset:3px; }
#main #detail-view .focus-detail .detail-feedback { margin-top:8px; font-size:.875rem; }
@container opportunity (max-width:650px) {
#main :is(#home-results,#results) .focus-card .focus-groups { grid-template-columns:minmax(0,1fr); gap:28px; }
#main :is(#home-results,#results) .focus-card section.focus-needs { padding-top:24px; border-top:1px solid #D1E4EE; }
#main :is(#home-results,#results) .focus-card h3,#main :is(#home-results,#results) .focus-card h3 a { font-size:1.5rem; }
#main :is(#home-results,#results) .focus-card .focus-action-row { flex-direction:column; align-items:flex-start; }
}
@media(max-width:720px) {
#main #detail-view .focus-detail h1 { font-size:1.875rem; }
#main #detail-view .focus-detail .focus-groups { grid-template-columns:minmax(0,1fr); gap:28px; }
#main #detail-view .focus-detail section.focus-needs { padding-top:24px; border-top:1px solid #D1E4EE; }
#main #detail-view .focus-detail .focus-action-row { flex-direction:column; align-items:flex-start; }
}
.native-recheck{font-weight:600}.native-reset{display:inline-block}.native-fallback{margin-top:1rem}.native-js .native-fallback,.native-js .native-server-selection{display:none}
/* ==========================================================================
Feinschliff – Gesamtprototyp nach Nikos Wahl vom 14.10.2026
Grundlage: Live-Stand Design 0.1.23 / Adapter 0.1.15 (unverändert darunter).
Wahl: B · Perspektive für 01–06, 08–10, 12–17 · C · Orientierung für 07 · A · Präzision für 11.
Diese Datei wird nach der Live-CSS geladen und überschreibt nur, was die Wahl ändert.
Selektoren spiegeln die Live-Selektoren (gleiche Spezifität, spätere Regel gewinnt).
Neue Elemente (Logo-Zeichen, gezeichnete Pfeile, Kalenderziffern, aktive Filter, „Nach oben“)
setzt feinschliff.js. Sie tragen die Klasse fs-… und wären in der Umsetzung Teil der Ausgabe.
Abstimmungen zwischen den Wahlen (kleine, umkehrbare Entscheidungen):
- 01 B × 07 C: Der Suchknopf folgt 07 C (Lupe statt Pfeil), behält aber den B-Radius 6 px.
Das Suchfeld daneben bekommt ebenfalls 6 px, damit Feld und Knopf eine Form haben.
- 07 C × 12 B: Aktive Filter als Chips mit Radius 6 px wie die Länderwahl auf der Suchseite,
nicht als Pille. Gleiche Sache, gleiche Form.
- 05 B × 11 A: Der Kalender folgt 11 A (Tagesziffer + „Okt · Do“). Die steigende Markierung
aus 05 B gilt nur für die Fristmarke in Karte und Eintrag.
- 04 B im Kalender: Die Art erscheint auch dort als B-Etikett, das Symbol entfällt wie in der Karte.
- 15 B Inhaltsverzeichnis: Live setzt keinen „aktuellen Abschnitt“. feinschliff.js markiert ihn
(aria-current) beim Lesen und beim Antippen; das Zeichen sitzt im Polster des Kastens,
damit lange Wörter wie „Datenschutzanfragen“ nicht mitten im Wort brechen. Pfeile gibt es dort
wie live keine (4d D); die Vergleichsseite zeigte sie noch.
- 15 B Infoköpfe: Nur „Über uns“ hat live die babyblaue Fläche. Polster und weißes Zeichen gelten
nur dort; die weißen Köpfe behalten ihre Live-Kanten, ihr Zeichen hat die Logofarbe wie 03 B.
- 06 B: Der Navigationsmarker steht links neben dem Text statt im Fluss, damit „Finden“ bündig
mit dem Logo bleibt.
- 06 B Menü am Handy (Nikos Zusatz bei der Abnahme, gewählt A · nur Symbol): bis 720 px drei Striche,
die Navigation klappt darunter auf. Gleiche Linien und Marker wie oben, Feld beim Öffnen mit Radius 6 px (01 B).
- 08 B × Nikos Zusatz vom 14.10. abends (gewählt C · schlicht): Kacheln kleiner, weiß mit Haarlinie,
am Desktop drei Spalten. Das Logo-Zeichen aus 08 B bleibt.
- 07 C × 09 B: Das Menüfeld zeigt immer den Menünamen, die Auswahl steht nur als Chip darunter.
Der Frist-Chip heißt „Frist bis 31.10.“ (Mikrotext-Vorschlag aus 07 C).
- 09 B × 10 B: Über der ersten Karte steht schon die Reiterlinie; die Kopflinie der ersten Karte entfällt.
- Zeigezustände nur bei Maus (@media (hover:hover)) wie live; Karte zeigt die Fläche auch beim
Antippen und bei Tastaturfokus.
- Sehr schmale Breiten (unter 360 px, also Zoom): Kalender stapelt, Fußzeile einspaltig,
Fristdatum darf umbrechen.
========================================================================== */
:root{
/* 01 B, 07, 12 B: Bedienelemente einheitlich 6 px (live 12 px) */
--r-ctl:6px;
/* 15 B: Infokopf kompakter, Radius 16 px (live 20 px) */
--r-panel:16px;
--fs-baby:#89CFF0; --fs-sky:#E3F3FB; --fs-stone:#F2EEE6; --fs-panel:#F2F8FC;
--fs-hl:#C5E7F8; --fs-gold:#D9A92A; --fs-band:rgba(137,207,240,.5);
--fs-note:#3A4E5A; --fs-meta:#536570; --fs-ctrl:#788C98;
--fs-chip:#FFF5D9; --fs-chip-ink:#69501F;
--fs-pgram:polygon(0 33%, 100% 0, 100% 67%, 0 100%);
--fs-t-line:220ms;
--fs-m-fwd:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8h10.5M9 4l4 4-4 4'/%3E%3C/svg%3E");
--fs-m-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2.5v10.5M4 9l4 4 4-4'/%3E%3C/svg%3E");
--fs-m-back:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.5 8H3M7 4L3 8l4 4'/%3E%3C/svg%3E");
--fs-m-up:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 13.5V3M4 7l4-4 4 4'/%3E%3C/svg%3E");
}
/* ---------- Gemeinsame Bausteine ---------- */
.fs-vh{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap}
/* Ersetzte Live-Zeichen (Pfeil als Schriftzeichen) bleiben im Dokument, sind aber aus */
.fs-alt{display:none!important}
/* Gezeichnete Pfeile statt Schriftzeichen (alle Linien der Feinschliff-Runde) */
.fs-arw{display:inline-block; flex:none; width:1em; height:1em; vertical-align:-.14em; font-style:normal; background:currentColor;
-webkit-mask:var(--fs-m-fwd) center/contain no-repeat; mask:var(--fs-m-fwd) center/contain no-repeat}
.fs-arw-down{-webkit-mask-image:var(--fs-m-down); mask-image:var(--fs-m-down)}
.fs-arw-back{-webkit-mask-image:var(--fs-m-back); mask-image:var(--fs-m-back)}
.fs-arw-up{-webkit-mask-image:var(--fs-m-up); mask-image:var(--fs-m-up)}
/* B: nur der Außenpfeil steigt im Logowinkel (25,2°) */
.fs-arw-ext{transform:rotate(-25.2deg)}
/* Logo-Zeichen (B): die zwei steigenden Parallelogramme */
.fs-mk{display:inline-block; flex:none; width:18px; height:17px; fill:#A7D3EC; overflow:visible}
.fs-mk path{transform-box:fill-box}
/* Ikonen aus der Lucide-Ergänzung */
.fs-ico{width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
/* Zeigezustände nur bei echter Maus (wie Live: @media (hover:hover)), damit am Handy nach dem Antippen nichts hängen bleibt */
@media (prefers-reduced-motion:no-preference){
.fs-arw, .fs-mk path{transition:transform var(--dur-2) var(--ease)}
}
@media (prefers-reduced-motion:no-preference) and (hover:hover){
:is(a,button,summary):hover > .fs-arw:not(.fs-arw-ext,.fs-arw-back,.fs-arw-down,.fs-arw-up){transform:translateX(4px)}
:is(a,button):hover > .fs-arw-ext{transform:rotate(-25.2deg) translateX(3px)}
:is(a,button):hover > .fs-arw-back{transform:translateX(-4px)}
:is(a,button):hover > .fs-arw-down{transform:translateY(3px)}
:is(a,button):hover > .fs-arw-up{transform:translateY(-3px)}
:is(a,button):hover > .fs-mk .p2{transform:translateY(-14%)}
}
/* ==========================================================================
01 Buttons · B
========================================================================== */
#main #detail-view .focus-detail .native-application{gap:10px}
#main #detail-view .focus-detail .native-application .fs-mk{fill:var(--fs-baby)}
#main #detail-view .focus-detail p.native-application[aria-disabled="true"]{border-radius:6px}
.filter-actions .primary, .filter-submit{font-weight:600}
.site-header nav a.provider-link{border-radius:6px}
/* ==========================================================================
02 Links · B Unterstrich bleibt, beim Zeigen steigt ein babyblaues Band hinter den Text
========================================================================== */
html body :is(.inline-link, .detail-link, .section-index a),
#main #detail-view .focus-detail .focus-source a,
#main :is(#home-results,#results) .ux-chance .detail-link{
background-image:linear-gradient(var(--fs-band),var(--fs-band));
background-repeat:no-repeat; background-position:0 92%; background-size:0 38%;
}
@media (prefers-reduced-motion:no-preference){
html body :is(.inline-link, .detail-link, .section-index a),
#main #detail-view .focus-detail .focus-source a,
#main :is(#home-results,#results) .ux-chance .detail-link{transition:background-size var(--fs-t-line) var(--ease), color var(--dur-2) var(--ease)}
}
@media (hover:hover){
html body :is(.inline-link, .detail-link, .section-index a):hover,
#main #detail-view .focus-detail .focus-source a:hover,
#main :is(#home-results,#results) .ux-chance .detail-link:hover{background-size:100% 38%; text-decoration-thickness:1px}
}
/* Quelle im Eintrag: 14 px statt 12 px, unterstrichen, Außenpfeil */
#main #detail-view .focus-detail .focus-source{font-size:.875rem; line-height:1.6}
#main #detail-view .focus-detail .focus-source a{display:inline; padding-block:12px; text-decoration:underline; text-decoration-color:currentColor; text-underline-offset:4px; text-decoration-thickness:1px}
#main #detail-view .focus-detail .focus-source a .fs-arw-ext{margin-left:6px}
/* „Das benötigst du“: unterstrichen (4d D); Pfeil erst ab Desktopbreite; beim Zeigen nur das Band */
#main :is(#home-results,#results) .ux-chance .detail-link{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.25em}
@media (hover:hover){ #main :is(#home-results,#results) .ux-chance .detail-link:hover{text-decoration:none} }
@media (max-width:759px){ #main :is(#home-results,#results) .ux-chance .detail-link .fs-arw{display:none} }
/* ==========================================================================
03 Überschriften · B
========================================================================== */
#main .eyebrow:has(> .fs-mk){display:flex; align-items:center; gap:10px}
.hero .eyebrow .fs-mk{width:22px; height:21px}
#main .hero h1{isolation:isolate}
.fs-hl{position:relative; white-space:nowrap}
.fs-hl::before{content:""; position:absolute; z-index:-1; left:-.04em; right:-.08em; bottom:.04em; height:.46em; background:var(--fs-hl); clip-path:polygon(0 30%, 100% 0, 100% 70%, 0 100%)}
/* Abschnitts-H2 der Startseite mit kleinem Parallelogramm */
#home-view .section-heading h2::before{content:""; display:inline-block; width:10px; height:15px; margin-right:10px; background:var(--fs-baby); clip-path:var(--fs-pgram); vertical-align:.02em}
/* Suchseite: Eyebrow „Finden“ über der H1 */
#main .search-heading .fs-eyebrow-sub{margin:0 0 .5rem; color:var(--stage-text); font-size:1rem; font-weight:600}
/* ==========================================================================
04 Etiketten und Meta-Zeile · B
========================================================================== */
/* Art als Etikett; das Symbol entfällt, weil das Etikett die Art schon trägt */
:is(.ux-chance, #detail-view .focus-detail) .kind > .type-icon{display:none}
:is(.ux-chance, #detail-view .focus-detail) .kind > .type-icon + span,
.calendar-kind .fs-kind{display:inline-flex; align-items:center; min-height:22px; padding:2px 10px; border-radius:4px; background:var(--fs-sky); color:var(--accent); font-weight:600; line-height:1.4}
.calendar-kind > .type-icon{display:none}
/* Status „Quelle erneut prüfen“ als Steinetikett */
.ux-chance .native-recheck,
#detail-view .detail-heading .native-recheck{display:inline-flex; align-items:center; min-height:22px; margin-top:12px; padding:2px 10px; border-radius:4px; background:var(--fs-stone); color:var(--ink); font-size:13px; font-weight:600; line-height:1.4}
/* Abschnittsetiketten mit Parallelogramm */
#main :is(#home-results,#results) .focus-card .focus-groups h4,
#main #detail-view .focus-detail h2{display:flex; align-items:center; gap:10px}
#main :is(#home-results,#results) .focus-card .focus-groups h4::before,
#main #detail-view .focus-detail h2::before{content:""; width:8px; height:12px; flex:none; background:var(--fs-baby); clip-path:var(--fs-pgram)}
/* Kurze Einordnung wie „Bei Auswahl:“ als Etikett */
#main #detail-view .focus-detail .focus-qualifier.fs-tagq{display:inline-flex; padding:2px 10px; border-radius:4px; background:var(--fs-sky); color:var(--accent); font-weight:600; font-size:14px; line-height:1.6}
/* Aufzählung mit kleinem Parallelogramm statt Punkt */
#main :is(#home-results,#results) .ux-chance ul.focus-items,
#main #detail-view .focus-detail ul.focus-items{list-style:none; padding-left:0}
#main :is(#home-results,#results) .ux-chance ul.focus-items > li,
#main #detail-view .focus-detail .focus-items li{position:relative; padding-left:22px; list-style:none}
#main :is(#home-results,#results) .ux-chance ul.focus-items > li::before,
#main #detail-view .focus-detail .focus-items li::before{content:""; position:absolute; left:2px; top:.5em; width:7px; height:10px; background:var(--fs-baby); clip-path:var(--fs-pgram)}
#main :is(#home-results,#results) .ux-chance ul.focus-items > li::marker,
#main #detail-view .focus-detail .focus-items li::marker{content:none}
/* ==========================================================================
05 Fristmarke · B kleines Gold-Parallelogramm wie das erste Logo-Element
========================================================================== */
#main :is(#home-results,#results) .focus-card .deadline,
#main #detail-view .focus-detail .deadline{position:relative; padding-left:30px}
#main :is(#home-results,#results) .focus-card .deadline::before,
#main #detail-view .focus-detail .deadline::before{content:""; position:absolute; left:11px; top:13px; top:.5lh; width:10px; height:16px; background:var(--fs-gold); clip-path:var(--fs-pgram)}
/* Mehrzeilige Fristtexte: Zeichen an der ersten Zeile (Polster oben 8 px = halbe Zeichenhöhe, darum .5lh).
Sehr schmale Breite oder große Grundschrift (Zoom): Datum darf umbrechen, Zeichen rückt näher.
Im Eintrag hat die Live-Regel „time.deadline“ (nowrap) mehr Gewicht; der Selektor spiegelt sie. */
@media (max-width:359px), (max-width:22.4em){
#main :is(#home-results,#results) .focus-card .deadline,
#main #detail-view .focus-detail :is(time.deadline, .deadline){padding-left:26px; white-space:normal}
#main :is(#home-results,#results) .focus-card .deadline::before,
#main #detail-view .focus-detail .deadline::before{left:9px}
}
/* ==========================================================================
06 Kopfzeile und Navigation · B Aktiv-Marker im Logowinkel
========================================================================== */
/* Marker steht links vor dem Text im Zwischenraum, nicht im Fluss: Text bleibt bündig mit dem Logo */
.site-header nav a:not(.provider-link){position:relative}
.site-header nav a:not(.provider-link)::before{content:""; position:absolute; left:-13px; top:50%; width:8px; height:12px; margin-top:-6px; background:transparent; clip-path:var(--fs-pgram)}
@media (prefers-reduced-motion:no-preference){
.site-header nav a:not(.provider-link)::before{transition:background-color var(--dur-2) var(--ease), transform var(--fs-t-line) var(--ease)}
}
@media (prefers-reduced-motion:no-preference) and (hover:hover){
.site-header nav a:not(.provider-link,[aria-current="page"]):hover::before{transform:translateY(-2px)}
}
.site-header nav a:not(.provider-link)[aria-current="page"]{text-decoration:none; color:var(--ink)}
.site-header nav a:not(.provider-link)[aria-current="page"]::before{background:var(--accent)}
@media (hover:hover){
.site-header nav a:not(.provider-link):hover{text-decoration:none}
.site-header nav a:not(.provider-link,[aria-current="page"]):hover::before{background:var(--fs-baby)}
}
/* Menü am Handy (Nikos Zusatz bei der Abnahme am 14.10., gewählt: A · nur Symbol): Bis 720 px Breite klappt die
Navigation hinter den Knopf mit drei Strichen. Darüber bricht sie schon live nicht mehr um und bleibt wie heute.
Der Kopf wird einzeilig. Das Logo behält ab 342 px Breite seine Live-Größe; darunter wird es mit dem Platz
neben dem Knopf schmaler (320 px: 238 statt 260 px).
Der Knopf steht im Kopf-Markup (menue-knopf.html), die Klasse ka-js setzt ein Einzeiler früh im head (kopf-frueh.html).
So klappt die Navigation schon beim ersten Zeichnen zu, ohne Springen. Ohne Skript fehlt ka-js: Knopf aus, Navigation offen wie live.
Die Klappe schiebt den Inhalt nach unten statt ihn zu überdecken. Darum braucht es keinen Fokusfang und keine Scrollsperre.
Der Name „Menü“ steht im Knopf und ist nur für Screenreader sichtbar. */
.fs-menu-btn{display:none}
@keyframes fs-menu-auf{from{opacity:0; transform:translateY(-4px)}}
@media (max-width:720px){
html.ka-js .site-header{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:8px; row-gap:0}
html.ka-js .site-header > .wordmark{justify-self:start; max-width:100%}
html.ka-js .site-header > nav{grid-column:1 / -1; display:none}
html.ka-js .site-header[data-fs-offen] > nav{display:flex; flex-direction:column; align-items:stretch; gap:0; padding:4px 0 8px}
/* Einträge leicht eingerückt: der Marker der aktuellen Seite steht im Eintrag, nicht am Bildschirmrand */
/* Schrift in rem wie die Live-Navigation, damit sie mit der Grundschrift des Browsers wächst. Zielflächen bleiben in px. */
html.ka-js .site-header[data-fs-offen] > nav a:not(.provider-link){min-height:52px; padding-left:22px; border-top:1px solid var(--line); font-size:1.125rem}
/* Marker 5 px vor dem Text wie am Desktop */
html.ka-js .site-header[data-fs-offen] > nav a:not(.provider-link)::before{left:9px}
html.ka-js .site-header[data-fs-offen] > nav a.provider-link{width:100%; min-height:52px; margin-top:12px; font-size:1.0625rem}
/* Tippfläche 48 × 48 px. Sichtbar ist nur ein Feld von 36 px (::before), bündig mit dem Inhaltsrand rechts.
Dafür ragt die Tippfläche 6 px in den Seitenrand. So sitzen die Striche nah am Rand, ohne dass das Feld übersteht. */
html.ka-js .fs-menu-btn{position:relative; isolation:isolate; display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; margin-right:-6px; padding:0; border:0; border-radius:6px; background:transparent; color:var(--ink); cursor:pointer}
.fs-menu-btn::before{content:""; position:absolute; z-index:-1; inset:6px; border-radius:6px; background:transparent}
.fs-menu-btn[aria-expanded="true"]::before{background:var(--fs-sky)}
/* Fokusring am Knopf selbst, 3 px nach innen: liegt um das sichtbare Quadrat, ragt nicht weiter in den Rand */
.fs-menu-btn:focus-visible{outline:3px solid var(--accent); outline-offset:-3px}
@media (prefers-reduced-motion:no-preference){
.fs-menu-btn::before{transition:background-color var(--dur-2) var(--ease)}
html.ka-js .site-header[data-fs-offen] > nav{animation:fs-menu-auf var(--dur-3) var(--ease)}
}
@media (hover:hover){ .fs-menu-btn:hover::before{background:var(--fs-sky)} }
}
.fs-menu-wort{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
/* Drei Striche, beim Öffnen ein Kreuz */
.fs-burger{width:24px; height:24px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; overflow:visible}
.fs-burger path{transform-box:view-box; transform-origin:12px 12px}
.fs-menu-btn[aria-expanded="true"] .fs-burger .l1{transform:rotate(45deg) translateY(5px)}
.fs-menu-btn[aria-expanded="true"] .fs-burger .l2{opacity:0}
.fs-menu-btn[aria-expanded="true"] .fs-burger .l3{transform:rotate(-45deg) translateY(-5px)}
@media (prefers-reduced-motion:no-preference){
.fs-burger path{transition:transform var(--dur-2) var(--ease), opacity var(--dur-1) var(--ease)}
}
/* ==========================================================================
07 Suche und Filter-Menüs · C (mit B-Radius, siehe Kopf)
========================================================================== */
#main #home-search .ux-query input{border-radius:6px}
#main #home-search .ux-submit, .ux-search-row .ux-submit{border-radius:6px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; gap:8px}
/* Menü: Haken statt Radiopunkt; der Radioknopf bleibt bedienbar über die ganze Zeile */
.ux-option{position:relative}
#main #home-search .ux-option input[type=radio]{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer}
.ux-option .fs-ok{display:inline-flex; margin-left:auto; color:var(--accent); visibility:hidden}
.ux-option:has(input:checked) .fs-ok{visibility:visible}
.ux-option:has(input:focus-visible){outline:3px solid var(--accent); outline-offset:2px}
/* Zeilen ohne Flagge („Alle Länder“, „Variabler Zielort“) in derselben Textspalte wie die Länder */
#home-search .ux-option-list:has(.country-flag) .ux-option:not(:has(.country-flag)) .ux-option-text{padding-left:32px}
/* Das Menüfeld nennt immer den Menünamen; die Auswahl steht als Chip darunter (07 C) */
#home-search .ux-filter > summary > .fs-sumwert{font-size:0}
#home-search .ux-filter > summary > .fs-sumwert::before{content:attr(data-fs-name); font-size:1rem}
#home-search .ux-filter > summary[data-active=true]{text-decoration:none}
/* Aktive Filter als entfernbare Chips unter den Menüs */
.fs-active{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:12px 0 0 12px}
.fs-active:empty{display:none}
.fs-achip{display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 12px; border:1px solid var(--fs-ctrl); border-radius:6px; background:#fff; font:500 15px/1.2 "Radio Canada",system-ui,sans-serif; color:var(--ink); cursor:pointer}
@media (prefers-reduced-motion:no-preference){ .fs-achip{transition:background-color var(--dur-2) var(--ease)} }
@media (hover:hover){ .fs-achip:hover{background:var(--fs-sky)} }
.fs-achip .fs-ico{width:16px; height:16px; color:var(--fs-meta)}
.fs-achip .country-flag{width:18px; height:13px}
.fs-achip:focus-visible{outline:3px solid var(--accent); outline-offset:3px}
/* ==========================================================================
08 Kategorie-Kacheln · B, Maß und Fläche C
Nikos Wunsch am 14.10. abends: „etwas kleiner … nicht so krass prominent und so fett“.
Gewählt aus drei gebauten Varianten: C · schlicht. Weiß mit Haarlinie statt Farbfläche, am Desktop
drei Spalten, Titel 19 px/520 statt live 28 px/650, Symbol 28 px. Am Handy (bis 550 px) zwei Spalten,
Symbol über dem Titel wie live, Titel 16 px. Der Untertitel bleibt bei live 14 px.
Aus 08 B bleiben: keine Anzahlen, Logo-Zeichen oben rechts, Fokusring, kein Schatten.
Selektoren mit .categories, damit sie die Live-Regeln mit #main #home-view sicher schlagen.
========================================================================== */
#main #home-view .categories .category-grid{grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
#main #home-view .categories .category-link{position:relative; min-height:80px; gap:14px; padding:14px 40px 14px 16px; border-radius:12px; background:#fff; box-shadow:none; outline:1px solid var(--line); outline-offset:-1px}
#main #home-view .categories .category-link:hover{background:var(--fs-sky)}
#main #home-view .categories .category-link[aria-current="true"]{background:var(--fs-baby)}
#main #home-view .categories .category-link:focus-visible{outline:3px solid var(--accent); outline-offset:4px}
#main #home-view .categories .category-link .ux-category-icon{width:28px; height:28px}
#main #home-view .categories .category-link .category-title{font-size:19px; font-weight:520; line-height:1.15}
#main #home-view .categories .category-link .ux-category-subtitle{margin-top:3px}
.fs-tile-go{position:absolute; right:12px; top:12px; display:block; line-height:0}
.fs-tile-go .fs-mk{width:18px; height:17px; fill:var(--fs-baby)}
/* Ausgewählte Kachel: Live setzt „Ausgewählt“ in den Fluss und hält die Höhe über min-height 146/194 px.
C hat diese Reserve nicht, darum steht das Wort oben rechts an der Stelle des Logo-Zeichens.
So bleibt die Kachel gleich hoch und das Merkmal ohne Farbe sichtbar (Gegenprüfung G1). */
#main #home-view .categories .category-link[aria-current="true"] .ux-category-selected{position:absolute; top:12px; right:12px; margin:0}
#main #home-view .categories .category-link[aria-current="true"] .fs-tile-go{display:none}
@media (prefers-reduced-motion:no-preference) and (hover:hover){
#home-view .category-link:hover .fs-tile-go .fs-mk .p1{transform:translateY(-6%)}
#home-view .category-link:hover .fs-tile-go .fs-mk .p2{transform:translateY(-16%)}
}
@media (max-width:900px){
#main #home-view .categories .category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:550px){
#main #home-view .categories .category-link{min-height:0; gap:8px; padding:12px 12px 14px}
#main #home-view .categories .category-link .ux-category-icon{width:24px; height:24px}
#main #home-view .categories .category-link .category-title{font-size:16px}
.fs-tile-go{right:10px; top:12px}
.fs-tile-go .fs-mk{width:16px; height:15px}
#main #home-view .categories .category-link[aria-current="true"] .ux-category-selected{right:10px}
}
/* ==========================================================================
09 Umschalter · B als Reiter mit Linie
========================================================================== */
.segmented{border:0; border-bottom:1px solid var(--line); border-radius:0; padding:0; gap:24px; background:transparent; flex-wrap:nowrap}
.segmented button{border-radius:0; padding:0 2px; min-width:44px; color:var(--fs-note); font-weight:500; box-shadow:inset 0 -2px 0 transparent}
.segmented button[aria-pressed="true"]{background:transparent; color:var(--ink); font-weight:650; box-shadow:inset 0 -2px 0 var(--accent)}
@media (hover:hover){ .segmented button:not([aria-pressed="true"]):hover{background:transparent; color:var(--ink)} }
.segmented button:focus-visible{outline-offset:2px}
/* ==========================================================================
10 Chancen-Karte · B ganze Karte klickbar, zarte Fläche beim Zeigen
========================================================================== */
#main :is(#home-results,#results) .ux-chance{--fs-kante:min(.875rem,14px); margin-inline:calc(-1 * var(--fs-kante)); padding-inline:var(--fs-kante); border-radius:16px; border-top:0; border-bottom:0}
#main :is(#home-results,#results) .ux-chance::after{content:""; position:absolute; left:var(--fs-kante); right:var(--fs-kante); bottom:0; height:1px; background:var(--line)}
/* Live zeigt die Zeigefläche über ein ::before mit 8 px Überstand (opacity 0, bei hover 1).
B trägt die Fläche an der Karte selbst; das Live-::before entfällt, sonst ragt es am Handy aus dem Bild. */
/* Über der ersten Karte steht schon die Reiterlinie (09 B); eine zweite Linie entfällt. */
#main :is(#home-results,#results) .ux-chance::before{content:none}
@media (prefers-reduced-motion:no-preference){
#main :is(#home-results,#results) .ux-chance{transition:background-color var(--dur-2) var(--ease)}
#main :is(#home-results,#results) .ux-chance::after{transition:opacity var(--dur-2) var(--ease)}
}
@media (prefers-reduced-motion:no-preference) and (hover:hover){
#main :is(#home-results,#results) .ux-chance:hover .detail-link .fs-arw{transform:translateX(4px)}
}
/* Fläche beim Zeigen (Maus), beim Antippen (Touch) und beim Tastaturfokus auf einem Link der Karte */
@media (hover:hover){
#main :is(#home-results,#results) .ux-chance:hover{background:var(--fs-panel)}
#main :is(#home-results,#results) .ux-chance:hover::after{opacity:0}
}
@media (hover:none){
#main :is(#home-results,#results) .ux-chance:active{background:var(--fs-panel)}
}
#main :is(#home-results,#results) .ux-chance:has(a:focus-visible){background:var(--fs-panel)}
#main :is(#home-results,#results) .ux-chance:has(a:focus-visible)::after{opacity:0}
/* Live schaltet die Kartenfläche bei .focus-card gezielt ab (content:none); B holt sie mit gleicher Spezifität zurück.
In der Karte gibt es nur zwei Links (Titel und „Details“), beide zum selben Eintrag. */
#main :is(#home-results,#results) .focus-card h3 a::after{content:""; position:absolute; inset:0; z-index:1; border-radius:16px}
#main :is(#home-results,#results) .ux-chance :is(.detail-link, .focus-source a){position:relative; z-index:2}
/* Überstand bleibt innerhalb des Live-Seitenrands (.wrap): bis 720 px min(1rem,16px), bis 1050 px min(1.5rem,24px), darüber 3rem.
Deshalb in rem mit px-Deckel wie der Rand selbst; so passt er auch bei kleiner Grundschrift des Browsers (12 px). */
@media (min-width:760px){ #main :is(#home-results,#results) .ux-chance{--fs-kante:min(1.25rem,20px)} }
@media (min-width:1051px){ #main :is(#home-results,#results) .ux-chance{--fs-kante:min(1.75rem,28px)} }
/* ==========================================================================
11 Fristenkalender · A Tagesziffer, „Okt · Do“, Monatskopf als Etikett mit Linie
========================================================================== */
.calendar-month h3{font:650 14px/1.3 "Radio Canada",system-ui,sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); padding-bottom:12px; border-bottom:1px solid var(--ink)}
.calendar-row{grid-template-columns:80px minmax(0,1fr); gap:14px; align-items:start}
@media (min-width:760px){ .calendar-row{grid-template-columns:96px minmax(0,1fr); gap:24px} }
.calendar-row .deadline-block{position:relative; display:grid; justify-items:start; align-content:start; padding:0}
/* Live-Datum nur ausblenden, wenn die Tagesziffer wirklich da ist (sonst bleibt das Live-Datum sichtbar) */
.calendar-row .deadline-block:has(.fs-cal-big) > :is(.deadline-label, .deadline){position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; padding:0; margin:0}
.calendar-row > div:last-child{overflow-wrap:break-word}
/* Sehr schmale Breite (ab etwa 150 % Zoom): Ziffer und „Okt · Do“ in eine Zeile über dem Titel */
@media (max-width:340px){
.calendar-row{grid-template-columns:minmax(0,1fr); gap:8px}
.calendar-row .deadline-block{display:flex; align-items:baseline; gap:10px}
.fs-cal-small{margin-top:0}
}
.fs-cal-big{display:block; font:600 38px/1 "Ysabeau Office",system-ui,sans-serif; font-variant-numeric:tabular-nums; color:var(--ink); letter-spacing:-.02em}
.fs-cal-small{display:block; font:600 14px/1.3 "Radio Canada",system-ui,sans-serif; color:var(--fs-chip-ink); background:var(--fs-chip); padding:2px 6px; border-radius:3px; margin-top:6px; white-space:nowrap}
.calendar-kind{font-size:16px}
.calendar-kind .fs-kind{font-size:14px}
.calendar-row a{font-size:18px}
.calendar-row a > .fs-arw{margin-left:.3em}
/* ==========================================================================
12 Suchseite · B
========================================================================== */
/* „Wo suchst du?“ steht über der Länderwahl */
.country-picker{display:grid; justify-items:start; gap:8px; margin-top:20px}
.country-picker-label{margin:0}
.country-options{gap:8px}
.country-option{border:1px solid var(--fs-ctrl); border-radius:6px; padding:.6rem 14px; background:#fff; color:var(--ink); font-size:16px; font-weight:500; box-shadow:none}
.country-option[aria-current="true"]{background:var(--fs-baby); border-color:var(--fs-baby); box-shadow:none; color:var(--ink); font-weight:650}
.country-option[aria-current="true"]::before{content:""; display:inline-block; width:8px; height:12px; flex:none; background:var(--accent); clip-path:var(--fs-pgram)}
@media (hover:hover){ .country-option:not([aria-current="true"]):hover{background:var(--fs-sky)} }
@media (max-width:480px){ .country-option{padding:.6rem 12px} }
.browse-other > summary{border-radius:6px}
/* Nur ein Rücksetzen: „Alle Filter entfernen“ bleibt, „Zurücksetzen“ entfällt */
#form-reset{display:none}
/* ==========================================================================
13 Detailseite · B (Etiketten, Aufzählung, Rückweg aus 02/04)
14 Bewerbungsabschluss · B Logo-Zeichen im Button, steigender Außenpfeil, Quelle 14 px
========================================================================== */
.back-link .fs-arw-back{margin-right:2px}
/* ==========================================================================
15 Infoseiten · B Babyblau bleibt, kompakter, mit Logo-Zeichen
========================================================================== */
/* Nur „Über uns“ hat live die babyblaue Fläche. Nur dort: kompakteres Polster, Radius 16, weißes Zeichen.
Die übrigen Infoköpfe (Redaktion, Kontakt, Impressum, Datenschutz, Hilfe) bleiben ohne Polster wie live;
ihr Zeichen trägt die Logofarbe wie im Hero der Startseite (03 B). */
html body .info-ueber-uns .info-hero{position:relative; overflow:hidden}
html body .info-ueber-uns .info-hero .eyebrow .fs-mk{fill:#fff}
@media (max-width:720px){ html body .info-ueber-uns .info-hero{padding:24px 24px 26px} }
@media (min-width:721px){ html body .info-ueber-uns .info-hero{padding:32px 36px 34px} }
/* Inhaltsverzeichnis: 17 px, Zeichen links im Polster des Kastens (nimmt dem Text keinen Platz),
aktueller Abschnitt kräftiger mit Akzentzeichen (setzt feinschliff.js beim Lesen und Springen).
Kräftiger über eine feine Kontur statt font-weight: gleiche Laufweite, kein neuer Umbruch, der Kasten springt nicht. */
#main :is(.info-index,.detail-index) .section-index a{position:relative; text-decoration:none; justify-content:flex-start; color:var(--fs-note); font-size:17px; overflow-wrap:break-word}
.section-index a::before{content:""; position:absolute; left:-13px; top:50%; width:7px; height:10px; margin-top:-5px; clip-path:var(--fs-pgram); background:transparent}
@media (hover:hover){ .section-index a:not([aria-current="true"]):hover::before{background:var(--fs-baby)} }
#main :is(.info-index,.detail-index) .section-index a[aria-current="true"]{color:var(--ink); -webkit-text-stroke:.5px currentColor}
.section-index a[aria-current="true"]::before{background:var(--accent)}
/* ==========================================================================
16 Fußzeile · B Logo-Zeichen, „Nach oben“
========================================================================== */
.footer-heading .wordmark .fs-mk{width:24px; height:23px}
.footer-bottom{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:4px 20px}
.footer-bottom p{grid-column:1; hyphens:manual}
/* „Nach oben“ steht als letztes Kind im Fuß. Live verkleinert den letzten Absatz über p:last-child,
das greift dann nicht mehr. Dieselbe Regel auf den letzten Absatz hält ihn bei live 14 px (Gegenprüfung K3). */
.footer-bottom p:last-of-type{font-size:.875rem}
.fs-foot-top{display:inline-flex; align-items:center; gap:6px; min-height:44px; grid-column:2; grid-row:1 / span 2; color:var(--accent); font-weight:600; font-size:15px; text-decoration:none}
@media (hover:hover){ .fs-foot-top:hover{text-decoration:underline; text-underline-offset:.3em} }
@media (max-width:720px){ .footer-bottom{display:grid} }
/* Sehr schmale Breite (kleines Handy, Zoom): „Nach oben“ unter die Sätze, damit sie die volle Breite behalten */
@media (max-width:359px){
.footer-bottom{grid-template-columns:minmax(0,1fr)}
.fs-foot-top{grid-column:1; grid-row:auto; justify-self:start}
}
/* Lange Wörter im Etikett nicht trennen (das Zeichen nimmt Breite) */
#main .eyebrow:has(> .fs-mk){hyphens:manual}
/* ==========================================================================
17 Hinweisseite „Einreichen“ · B
========================================================================== */
.fs-note-page{display:grid; gap:24px; padding-block:12px 32px}
.fs-note-box{display:grid; gap:14px; justify-items:start; padding:24px; border-radius:16px; background:var(--fs-panel)}
@media (min-width:721px){ .fs-note-box{padding:32px 36px} }
.fs-note-box h1{max-width:22ch}
/* Umbruch nur nach dem @ ( im Markup), keine Silbentrennung; „anywhere“ nur als letzter Ausweg bei starkem Zoom */
.fs-note-box .fs-mail{font-weight:600; color:var(--ink); hyphens:none; overflow-wrap:anywhere}
@media (max-width:359px){ .fs-note-box{padding:20px} }
.fs-copy{display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px; border:1px solid var(--accent); border-radius:6px; background:#fff; color:var(--accent); font:600 16px/1 "Radio Canada",system-ui,sans-serif; cursor:pointer}
@media (prefers-reduced-motion:no-preference){ .fs-copy{transition:background-color var(--dur-2) var(--ease)} }
@media (hover:hover){ .fs-copy:hover{background:var(--fs-sky)} }
.fs-copy:focus-visible{outline:3px solid var(--accent); outline-offset:3px}
.fs-copy-row{display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px}
.fs-copy-row .copy-status{margin:0}
/* ==========================================================================
Zusatz außerhalb der Wahl: Live-Fehler auf der Kontaktseite (gefunden und live bestätigt am 14.10.)
Die Wegkarten haben live nur Titel und Beschreibung. Die Live-Regel für ein drittes Element
(span:last-child → zweite Spalte) trifft darum die Beschreibung. Am Handy wird der Titel 13 bis 39 px
schmal und steht Buchstabe für Buchstabe untereinander. Hier steht die Beschreibung wieder unter dem Titel.
========================================================================== */
.contact-path span:nth-child(2):last-child{grid-column:1; grid-row:auto; align-self:auto; font-size:1rem}
/* Erzwungene Farben (Windows-Kontrast): Zustände nicht nur über Fläche zeigen */
@media (forced-colors:active){
/* gleiche Spezifität wie die Regel oben, sonst gewinnt text-decoration:none */
.site-header nav a:not(.provider-link)[aria-current="page"]{text-decoration:underline; text-decoration-thickness:2px}
.country-option[aria-current="true"], .segmented button[aria-pressed="true"]{outline:2px solid Highlight; outline-offset:-2px}
#main :is(.info-index,.detail-index) .section-index a[aria-current="true"]{text-decoration:underline}
/* Gezeichnete Pfeile und Zeichen in Systemfarben (Flächen würden sonst zu Canvas; currentColor wäre die Autorenfarbe) */
.fs-arw{forced-color-adjust:none; background:CanvasText}
a .fs-arw{background:LinkText}
button .fs-arw{background:ButtonText}
.fs-mk{forced-color-adjust:none; fill:CanvasText}
/* Zeichen mit eigener Füllung brauchen dieselbe Spezifität, sonst bleiben sie hellblau bzw. weiß auf Canvas (Gegenprüfung K1) */
.fs-tile-go .fs-mk, html body .info-ueber-uns .info-hero .eyebrow .fs-mk{fill:CanvasText}
/* Menüknopf: die hellblaue Fläche (offen, Zeigen) wird zu Canvas, darum zusätzlich ein Rahmen */
.fs-menu-btn[aria-expanded="true"]::before{border:1px solid ButtonText}
@media (hover:hover){ .fs-menu-btn:hover::before{border:1px solid ButtonText} }
#main :is(#home-results,#results) .ux-chance ul.focus-items > li::before,
#main #detail-view .focus-detail .focus-items li::before,
#main :is(#home-results,#results) .focus-card .focus-groups h4::before,
#main #detail-view .focus-detail h2::before,
#main :is(#home-results,#results) .focus-card .deadline::before,
#main #detail-view .focus-detail .deadline::before,
.site-header nav a:not(.provider-link)[aria-current="page"]::before,
.section-index a[aria-current="true"]::before{forced-color-adjust:none; background:CanvasText}
}
/* Druck: Zeichen mitdrucken, Bedienhilfen weglassen */
@media print{
.fs-arw, .fs-mk, .fs-cal-small,
:is(.ux-chance, #detail-view .focus-detail) .kind > .type-icon + span, .calendar-kind .fs-kind,
.ux-chance .native-recheck, #detail-view .detail-heading .native-recheck,
#main #detail-view .focus-detail .focus-qualifier.fs-tagq,
#home-view .section-heading h2::before,
#main :is(#home-results,#results) .focus-card .focus-groups h4::before,
#main #detail-view .focus-detail h2::before,
#main :is(#home-results,#results) .ux-chance ul.focus-items > li::before,
#main #detail-view .focus-detail .focus-items li::before,
#main :is(#home-results,#results) .focus-card .deadline::before,
#main #detail-view .focus-detail .deadline::before,
.site-header nav a:not(.provider-link)[aria-current="page"]::before,
.country-option[aria-current="true"]::before,
.section-index a[aria-current="true"]::before{-webkit-print-color-adjust:exact; print-color-adjust:exact}
.country-option[aria-current="true"]{border-color:var(--ink)}
.fs-foot-top, .fs-copy, .fs-active, .fs-tile-go, .fs-menu-btn{display:none!important}
/* Live blendet die Navigation im Druck aus, auch ein offenes Menü */
html.ka-js .site-header[data-fs-offen] > nav{display:none}
}