/* visper fasnacht — kern: alles, was auf mehr als einer seite gilt.
* seitenspezifisches steht in start.css, formular.css (anmeldung, merci) und
* seiten.css (impressum, datenschutz, 404, weiterleitungen).
*
* bewegung: nur transform und opacity. still und sichtbar bei
* prefers-reduced-motion, im edit-modus (html[data-modus="bearbeiten"]) und
* ohne javascript (html.kein-js).
*/
/* ————— schriften ————— */
/* bitter 700 selbst gehostet (ofl, /assets/fonts/OFL-Bitter.txt), nur latin —
umlaute sind drin. auf jeder seite per preload geholt. */
@font-face {
font-family: "Bitter";
src: url("/assets/fonts/bitter-700-latin.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
/* rückfall mit den massen der echten schriften (in chrome gemessen), damit
der wechsel nicht springt: georgia fett ≈ bitter 700, arial ≈ komet */
@font-face {
font-family: "Bitter Fallback";
src: local("Georgia Bold"), local("Georgia-Bold"), local("Georgia");
font-weight: 700;
size-adjust: 90.76%;
ascent-override: 102.47%;
descent-override: 28.65%;
line-gap-override: 0%;
}
/* komet kommt über adobe fonts (kit vjl2xaw, css-link im ) */
@font-face {
font-family: "komet Fallback";
src: local("Arial"), local("ArialMT");
font-weight: 400;
size-adjust: 100.39%;
ascent-override: 99.61%;
descent-override: 24.9%;
line-gap-override: 0%;
}
@font-face {
font-family: "komet Fallback";
src: local("Arial Bold"), local("Arial-BoldMT");
font-weight: 700;
size-adjust: 95.24%;
ascent-override: 105%;
descent-override: 26.25%;
line-gap-override: 0%;
}
/* ————— tokens ————— */
:root {
--rot: #fb2c31; /* markenrot: flächen, rahmen, linien, grossschrift (≥ 24 px) */
--rot-text: #e30e13; /* knopf-flächen mit weissem text (4.8:1), kleiner roter text */
--rot-tief: #b00809; /* beizen-fläche, wortmarke (weiss darauf 7.3:1) */
--weinrot: #7e0204; /* fliesstext (11:1), hover, fokusring */
--weiss: #fff;
--rosa: #fdeceb; /* heller himmel der illustration: ruhige flächen, hinweise */
--rosa-kraeftig: #f8cfcc; /* linien und rahmen auf rosa */
--rot-auf-rosa: #c90a0f; /* kleiner roter text auf rosa (5.2:1; #e30e13 hätte dort nur 4.2:1) */
--knopf: #e30e13; /* knopf-fläche, überall gleich (auch auf rosa, wo --rot-text dunkler wird) */
--schrift-titel: "Bitter", "Bitter Fallback", Georgia, serif;
--schrift-text: "komet", "komet Fallback", Arial, sans-serif;
--text: 1rem;
--text-gross: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
--text-klein: .9375rem;
--titel-seite: clamp(2.2rem, 1.35rem + 3.4vw, 3.9rem);
--titel-abschnitt: clamp(1.9rem, 1.2rem + 2.6vw, 3.25rem);
--titel-karte: clamp(1.35rem, 1rem + 1.2vw, 1.9rem);
--rahmen: 1140px;
--rand: clamp(16px, 4vw, 40px);
/* rand für flächen über die ganze breite (kopf, held) */
--rand-voll: clamp(16px, 5vw, 96px);
--kopf-h: 64px;
--abstand: clamp(56px, 4rem + 4vw, 120px);
--radius: 6px;
--radius-gross: 20px;
--kurve: cubic-bezier(.2, .7, .2, 1);
--kurve-raus: cubic-bezier(.22, 1, .36, 1);
--schnell: 180ms;
--z-kopf: 100;
--z-oben: 200;
}
@media (min-width: 768px) {
:root { --kopf-h: 72px; }
}
/* ————— grundlagen ————— */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
/* anker landen unter dem festen kopf nicht versteckt */
scroll-padding-top: calc(var(--kopf-h) + 16px);
overflow-x: clip;
}
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}
body {
margin: 0;
min-height: 100vh;
background: var(--weiss);
color: var(--weinrot);
font: 400 var(--text)/1.55 var(--schrift-text);
overflow-x: clip;
-webkit-font-smoothing: antialiased;
}
@media (min-width: 1200px) {
body { font-size: 1.0625rem; }
}
:where(h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote, dl, dd) { margin: 0; }
:where(h1, h2, h3, h4, h5, h6) { font-weight: 700; }
:where(ul, ol) { padding: 0; }
img, svg, video, picture { display: block; max-width: 100%; }
img { height: auto; }
:where(a) { color: inherit; }
/* ohne das rendern knöpfe und felder in arial 13.33px */
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
::selection { background: var(--rot-text); color: var(--weiss); }
[hidden] { display: none !important; }
:focus-visible {
outline: 3px solid var(--weinrot);
outline-offset: 2px;
}
/* auf rosa ist --rot-text etwas dunkler, sonst reicht der kontrast für
kleine schrift nicht (gilt für alles darin: text, links, knöpfe) */
:is(.abschnitt--rosa, .seitenkopf--rosa, .mitmachen, .leer, .fassade, .hinweis, .pdf, .beiz__motto) { --rot-text: var(--rot-auf-rosa); }
/* auf roten flächen weiss */
:is(.auf-rot, .abschnitt--rot, .karte--rot) :focus-visible { outline-color: var(--weiss); }
/* ————— hilfsmittel ————— */
.nur-fuer-screenreader {
position: absolute !important;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.sprungmarke {
position: fixed;
top: 10px;
left: 10px;
z-index: calc(var(--z-oben) + 10);
padding: 12px 18px;
border-radius: 999px;
background: var(--weinrot);
color: var(--weiss);
font-weight: 700;
text-decoration: none;
transform: translateY(-160%);
}
.sprungmarke:focus { transform: none; outline-color: var(--rot); }
/* dekorative bilder: im editor nicht tauschbar (bloxs überspringt .hero__bg)
und sie fangen keine klicks ab */
.hero__bg { pointer-events: none; }
/* bloxs setzt die partials in diese platzhalter. der kopf ist fest oben —
sein platzhalter hält die höhe frei, bevor cms.js ihn einsetzt (kein sprung) */
[data-include] { display: contents; }
[data-include="nav"] { display: block; min-height: var(--kopf-h); }
/* ————— satzspiegel ————— */
.rahmen {
width: 100%;
max-width: calc(var(--rahmen) + 2 * var(--rand));
margin-inline: auto;
padding-inline: var(--rand);
}
.rahmen--schmal { max-width: calc(760px + 2 * var(--rand)); }
.abschnitt { padding-block: var(--abstand); }
.abschnitt--rosa { background: var(--rosa); }
.abschnitt--rot { background: var(--rot-tief); color: var(--weiss); }
.abschnitt__kopf {
display: grid;
gap: .6rem;
max-width: 46rem;
margin-bottom: clamp(28px, 1.5rem + 1.5vw, 48px);
}
.abschnitt__kopf--mitte { margin-inline: auto; text-align: center; justify-items: center; }
/* kopf einer unterseite: . --rosa: ruhige fläche */
.seitenkopf { padding-block: clamp(36px, 1.5rem + 4vw, 88px) clamp(20px, 1rem + 2vw, 40px); }
.seitenkopf--rosa { background: var(--rosa); padding-bottom: clamp(36px, 1.5rem + 4vw, 72px); }
.seitenkopf .rahmen { display: grid; gap: .8rem; justify-items: start; }
.seitenkopf .einleitung { max-width: 42rem; }
.seitenkopf + .abschnitt { padding-top: clamp(24px, 1rem + 2vw, 48px); }
/* reihe von knöpfen */
.knopfreihe {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 12px;
}
/* ————— typo ————— */
.seitentitel,
.abschnitt__titel,
.kartentitel {
font-family: var(--schrift-titel);
font-weight: 700;
line-height: 1.15;
color: var(--rot);
text-wrap: balance;
overflow-wrap: break-word;
}
.seitentitel { font-size: var(--titel-seite); line-height: 1.08; letter-spacing: -.01em; }
.abschnitt__titel { font-size: var(--titel-abschnitt); letter-spacing: -.005em; }
.kartentitel { font-size: var(--titel-karte); }
.abschnitt--rot .abschnitt__titel { color: var(--weiss); }
.abschnitt__untertitel,
.einleitung {
font-size: var(--text-gross);
line-height: 1.5;
color: var(--weinrot);
text-wrap: pretty;
}
.abschnitt--rot .abschnitt__untertitel { color: rgb(255 255 255 / .88); }
/* kleiner vorspann über einem titel */
.kicker {
font-size: .8125rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--rot-text);
}
/* fliesstext mit überschriften (impressum, datenschutz): lesbare zeilenlänge */
.fliesstext { max-width: 70ch; }
.fliesstext > * + * { margin-top: 1em; }
.fliesstext :is(h2, h3) {
font-family: var(--schrift-titel);
color: var(--rot-text);
line-height: 1.2;
text-wrap: balance;
}
.fliesstext h2 { margin-top: 2.2em; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); }
.fliesstext h3 { margin-top: 1.6em; font-size: 1.2rem; }
.fliesstext :is(ul, ol) { padding-left: 1.25em; }
.fliesstext li + li { margin-top: .35em; }
.fliesstext :is(p, li) { text-wrap: pretty; }
.fliesstext a { color: var(--rot-text); text-decoration-thickness: 1px; text-underline-offset: .2em; }
.fliesstext a:hover { color: var(--weinrot); }
.fliesstext strong { font-weight: 700; }
/* von site.js aus data-format gebaut (zeilen → liste, **fett**, [text](url)).
ein überlanges wort bricht um (anywhere: auch in flex-karten mit flex-start) */
.text-formatiert { overflow-wrap: anywhere; }
.text-formatiert > * + * { margin-top: .85em; }
.text-formatiert strong { font-weight: 700; }
.text-formatiert a {
color: inherit;
font-weight: 700;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: .2em;
overflow-wrap: anywhere;
}
.text-formatiert a:hover { text-decoration-thickness: 2px; }
.punkte { list-style: none; padding: 0; }
.punkte > li {
position: relative;
padding-left: 1.15em;
}
.punkte > li + li { margin-top: .4em; }
/* kleine raute statt punkt, in markenrot */
.punkte > li::before {
content: "";
position: absolute;
left: .1em;
top: .62em;
width: .42em;
height: .42em;
background: var(--rot);
transform: rotate(45deg);
}
/* eigener zähler; eine liste ab «3.» setzt site.js per counter-reset */
ol.punkte { counter-reset: punkt; }
ol.punkte > li { counter-increment: punkt; padding-left: 1.6em; }
ol.punkte--breit > li { padding-left: 2.2em; }
ol.punkte > li::before {
content: counter(punkt) ".";
top: 0;
width: auto;
height: auto;
background: none;
transform: none;
color: var(--rot-text);
font-weight: 700;
}
/* uhrzeit am anfang eines listenpunkts */
.zeit {
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--rot-text);
white-space: nowrap;
}
/* leere felder verschwinden. ausserhalb von sammlungen nicht im editor — dort
muss man sie füllen können. in sammlungen ist im editor nichts editierbar
(gepflegt wird im backend), dort also immer wie live */
html:not([data-modus="bearbeiten"]) [data-format]:empty,
[data-render] :is([data-field], [data-format]):empty { display: none; }
/* ————— links ————— */
/* textlink mit linie (fuss, kontakt, hinweise) — und der knopf, der so
aussieht (.textknopf: kalender, «nicht mehr anzeigen») */
.linie, .textknopf {
color: var(--rot-text);
font-weight: 700;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: .22em;
transition: color var(--schnell) ease, text-decoration-thickness var(--schnell) ease;
}
.linie:hover, .textknopf:hover { color: var(--weinrot); text-decoration-thickness: 2px; }
.linie { overflow-wrap: anywhere; }
/* ————— knöpfe ————— */
/* pille wie die marke. primär: rot mit weisser schrift, hover weinrot.
--rahmen: rand statt fläche. --weiss: auf roten flächen. --klein: im kopf */
.knopf {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .55em;
min-height: 48px;
padding: .7em 1.35em;
border: 2px solid var(--knopf);
border-radius: 999px;
background: var(--knopf);
color: var(--weiss);
font: 700 1rem/1.2 var(--schrift-text);
text-align: center;
text-decoration: none;
cursor: pointer;
transition: background-color var(--schnell) ease, border-color var(--schnell) ease, color var(--schnell) ease, transform var(--schnell) ease;
-webkit-tap-highlight-color: transparent;
}
.knopf:hover { background: var(--weinrot); border-color: var(--weinrot); }
.knopf:active { transform: translateY(1px); }
.knopf--rahmen {
background: var(--weiss);
color: var(--knopf);
}
.knopf--rahmen:hover { background: var(--knopf); border-color: var(--knopf); color: var(--weiss); }
.knopf--weiss {
border-color: var(--weiss);
background: var(--weiss);
color: var(--weinrot);
}
.knopf--weiss:hover { background: var(--rosa); border-color: var(--rosa); color: var(--weinrot); }
.knopf--klein {
min-height: 44px;
padding: .55em 1.1em;
font-size: .9375rem;
}
.knopf__icon { width: 1.25em; height: 1.25em; flex: none; }
.knopf[aria-disabled="true"], .knopf:disabled { opacity: .55; cursor: not-allowed; }
.textknopf {
display: inline-flex;
align-items: center;
gap: .45em;
min-height: 44px;
padding: 0;
border: 0;
background: none;
}
.textknopf__icon { width: 1.3em; height: 1.3em; flex: none; }
/* ————— abzeichen («heute», «vorbei», motto) ————— */
.abzeichen {
display: inline-flex;
align-items: center;
gap: .4em;
padding: .2em .7em;
border-radius: 999px;
background: var(--rosa);
color: var(--weinrot);
font-size: .8125rem;
font-weight: 700;
line-height: 1.4;
letter-spacing: .02em;
white-space: nowrap;
}
.abzeichen--rot { background: var(--rot-text); color: var(--weiss); }
/* ————— karten ————— */
/* weisse karte mit dem dicken roten rahmen der marke. --klein: 3 px (beizen),
--rot: rote fläche mit weisser schrift (hervorhebung) */
.karte {
position: relative;
padding: clamp(20px, 1rem + 1.2vw, 32px);
border: 5px solid var(--rot);
border-radius: var(--radius);
background: var(--weiss);
color: var(--weinrot);
}
.karte--klein { border-width: 3px; padding: clamp(18px, .9rem + .6vw, 24px); }
.karte--rot { border-color: var(--rot-text); background: var(--rot-text); color: var(--weiss); }
/* ————— hinweise ————— */
/* ruhige box für hinweise und meldungen. --fehler: fehlermeldung,
--erfolg: bestätigung. role/aria-live setzt die seite selbst. */
.hinweis {
padding: 1rem 1.25rem;
border-left: 4px solid var(--rot-text);
border-radius: 0 var(--radius) var(--radius) 0;
background: var(--rosa);
color: var(--weinrot);
}
.hinweis > * + * { margin-top: .5em; }
.hinweis--fehler { border-left-color: var(--weinrot); background: #fbe3e2; font-weight: 700; }
.hinweis--erfolg { border-left-color: var(--rot); background: var(--weiss); box-shadow: inset 0 0 0 1px var(--rosa-kraeftig); }
/* ————— kopf (partials/nav.html) ————— */
.kopf {
position: fixed;
inset: 0 0 auto;
z-index: var(--z-kopf);
height: var(--kopf-h);
background: rgb(255 255 255 / .97);
transition: box-shadow 250ms ease;
}
html[data-gescrollt] .kopf {
box-shadow: 0 1px 0 rgb(126 2 4 / .08), 0 10px 24px -14px rgb(126 2 4 / .35);
}
@supports (backdrop-filter: blur(1px)) {
.kopf { background: rgb(255 255 255 / .9); backdrop-filter: saturate(1.4) blur(10px); }
}
.kopf__innen {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
height: 100%;
padding-inline: var(--rand-voll);
}
.kopf__marke {
display: flex;
align-items: center;
gap: 10px;
min-height: 44px;
flex: none;
text-decoration: none;
}
.kopf__loewe { width: auto; height: 42px; }
.kopf__wortmarke { width: auto; height: 34px; }
@media (max-width: 559px) {
.kopf__loewe { height: 38px; }
.kopf__wortmarke { display: none; }
}
@media (min-width: 768px) {
.kopf__loewe { height: 48px; }
.kopf__wortmarke { height: 40px; }
}
.kopf__liste {
display: flex;
align-items: center;
gap: clamp(2px, 1.4vw, 18px);
margin: 0;
list-style: none;
}
.kopf__link {
position: relative;
display: flex;
align-items: center;
min-height: 44px;
padding-inline: clamp(6px, 1vw, 10px);
color: var(--weinrot);
font-size: .9375rem;
font-weight: 700;
text-decoration: none;
transition: color var(--schnell) ease;
}
.kopf__link::after {
content: "";
position: absolute;
left: clamp(6px, 1vw, 10px);
right: clamp(6px, 1vw, 10px);
bottom: 8px;
height: 3px;
border-radius: 2px;
background: var(--rot);
transform: scaleX(0);
transform-origin: 0 50%;
transition: transform 250ms var(--kurve);
}
.kopf__link:hover { color: var(--rot-text); }
.kopf__link:hover::after,
.kopf__link[aria-current]::after { transform: scaleX(1); }
.kopf__link[aria-current] { color: var(--rot-text); }
.kopf__knopf { margin-left: clamp(2px, 1vw, 10px); }
.kopf__knopf[aria-current="page"] { background: var(--weinrot); border-color: var(--weinrot); }
@media (min-width: 768px) {
.kopf__link { font-size: 1rem; }
}
@media (max-width: 359px) {
.kopf__liste { gap: 0; }
.kopf__link { font-size: .875rem; padding-inline: 5px; }
.kopf__knopf { padding-inline: .8em; font-size: .875rem; }
}
/* der menüpunkt «beizen» nur mit eingeschalteter sektion (site.js) */
[data-nav-ziel="beizen"] { display: none; }
html:is([data-beizen="an"], [data-modus="bearbeiten"]) [data-nav-ziel="beizen"] { display: block; }
html[data-modus="bearbeiten"]:not([data-beizen="an"]) [data-nav-ziel="beizen"] { opacity: .45; }
/* ————— ohne javascript oder ohne cms.js: notnavigation und notfuss ————— */
/* ohne javascript setzt bloxs keine partials ein: dann gelten die