/* Portalseiten. app.css liefert die Farb- und Schrifttoken; hier steht nur,
was die Karte nicht braucht: fliessender Text, Tabellen, Navigation. */
:root { --kopf-h: 61px; }
/* Der Kopf traegt jetzt Suche und zwei Aufklappmenues: fuenfzehn
Tastaturhalte auf jeder Seite, bevor der erste Satz erreichbar ist.
Der Sprunglink steht ausserhalb des Bildes und kommt beim ersten
Tabulator zurueck. */
.zum-inhalt {
position: absolute; left: -9999px; top: 0; z-index: 100;
background: var(--bg); color: var(--text);
font-family: var(--sans); font-weight: 500; font-size: 14px;
padding: 10px 18px; border-radius: 0 0 8px 0; text-decoration: none;
outline: 2px solid var(--accent); outline-offset: -2px;
}
.zum-inhalt:focus { left: 0; }
body.site {
background: var(--bg); color: var(--text);
font-family: var(--sans); font-size: 16px; line-height: 1.6;
-webkit-font-smoothing: antialiased;
/* Newsreader traegt eine opsz-Achse von 6 bis 72. Ohne diese Zeile
nimmt der Browser immer den Textschnitt, und die Ueberschrift wird zu
fett. Archivo hat nur eine Gewichtsachse; dort bleibt die Zeile
folgenlos. */
font-optical-sizing: auto;
}
/* Zahlen laufen in Tabellen sonst optisch auseinander. */
.num, .tab td, .tab th, .w-val, .kennz { font-variant-numeric: tabular-nums; }
a { color: var(--accent); }
main { display: block; }
.band-in { max-width: 1080px; margin: 0 auto; padding: 0 32px; }
.band-in.schmal { max-width: 680px; }
/* ------------------------------------------------------------ Navigation */
/* Hell statt dunkel. Die Seite ist weiss; eine schwarze Leiste darueber
war ein Fremdkoerper, der bei jedem Seitenwechsel als Erstes ins Auge
sprang. Die Glaskapsel um die Menuepunkte faellt mit weg — sie war fuer
dunklen Grund gerechnet und ist auf hellem nur noch Dekor.
Vier Felder in einer Zeile: Wortmarke, Suche, Navigation, Handlung.
Die Navigation sitzt im dehnbaren Feld und zentriert sich darin. */
/* Der Balken selbst: randlos, damit er wie eine Leiste ueber der Seite
liegt. */
.nav {
position: sticky; top: 0; z-index: 40;
background: rgba(255,255,255,.93);
backdrop-filter: saturate(150%) blur(10px);
border-bottom: 1px solid var(--line-dim);
}
/* Sein Inhalt: dieselbe Spalte wie .band-in und .seiten-kopf. Ohne diese
Bindung stand die Marke am linken Bildrand, waehrend die Ueberschrift
darunter in der Mitte begann — auf einem breiten Schirm sah der Kopf
aus wie von einer anderen Seite. */
.nav-in {
max-width: 1080px; margin: 0 auto;
display: grid;
grid-template-columns: auto minmax(180px, 300px) 1fr auto;
align-items: center; gap: 0 24px;
min-height: var(--kopf-h);
/* Jedes Feld bekommt seine Spalte ausdruecklich. Ohne das rutscht ein
fehlendes Kind in die dehnbare Spalte: der Handlungsknopf wurde so
schon einmal zu einem schwarzen Balken ueber die halbe Breite. */
padding: 0 32px;
}
/* Auch die Zeile ausdruecklich, nicht nur die Spalte. Die automatische
Platzierung geht nie rueckwaerts: weil .nav-tat im Quelltext vor der
Suche steht und Spalte 4 belegt, landete die Suche in Zeile zwei und
der Kopf wurde 82 statt 61 Pixel hoch. */
.nav-brand { grid-column: 1; grid-row: 1; }
.kopf-suche { grid-column: 2; grid-row: 1; }
.nav-links { grid-column: 3; grid-row: 1; }
.nav-tat { grid-column: 4; grid-row: 1; }
.nav-in > * { min-width: 0; }
.nav-brand {
font-family: var(--sans); font-weight: 600;
font-size: 20px; letter-spacing: -0.045em; color: var(--text);
text-decoration: none; white-space: nowrap;
display: flex; align-items: center; gap: 9px;
}
/* Wort und Punkt muessen EIN Flex-Element bleiben — sonst schiebt "gap"
den Punkt vom Wort weg, und aus "mallorqa." wird "mallorqa ." */
.nav-brand .dot { color: var(--accent); }
/* Das Zeichen: die Insel, gerechnet aus der eigenen Kuestenlinie
(scripts/marke.py). Hier ohne Kachel — die Kopfzeile steht immer auf
Weiss, und die nackte Form ist die ruhigere Marke. Favicon und
App-Symbol tragen die Kachel, weil sie auf fremdem Grund liegen. */
.nav-marke {
width: 21px; height: 21px; flex: 0 0 auto; display: block;
}
/* -------------------------------------------------------- Suche im Kopf */
/* Wer auf einer Gemeindeseite landet und die naechste sucht, musste
bisher zurueck zur Startseite. */
.kopf-suche { position: relative; display: flex; align-items: center; }
.ks-lupe {
position: absolute; left: 12px; width: 15px; height: 15px;
fill: none; stroke: var(--mute); stroke-width: 1.7; stroke-linecap: round;
pointer-events: none;
}
.kopf-suche input {
width: 100%; font: inherit; font-size: 14px;
padding: 8px 14px 8px 34px;
border: 1px solid var(--line); border-radius: 8px;
background: var(--bg-lift); color: var(--text);
transition: border-color .15s, background .15s;
}
.kopf-suche input::placeholder { color: var(--mute); }
.kopf-suche input:focus {
outline: none; background: var(--bg);
border-color: var(--text); box-shadow: 0 0 0 3px rgba(10,70,200,.12);
}
.kopf-suche ul {
position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
list-style: none; padding: 5px; margin: 0;
background: var(--bg); border: 1px solid var(--line-dim); border-radius: 10px;
box-shadow: 0 4px 10px rgba(0,0,0,.06), 0 16px 40px rgba(0,0,0,.14);
}
.kopf-suche ul a {
display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
padding: 8px 10px; border-radius: 6px; text-decoration: none; color: var(--text);
font-size: 14.5px;
}
.kopf-suche ul a:hover, .kopf-suche ul a.auf { background: var(--bg-lift); }
.kopf-suche ul em {
font-style: normal; font-size: 11.5px; color: var(--mute); white-space: nowrap;
}
/* ------------------------------------------------------- Menuepunkte */
.nav-links {
display: flex; align-items: center; gap: 4px; justify-self: center;
}
.nav-links > a, .nav-grp > summary {
display: block; padding: 7px 13px; border-radius: 7px;
font-family: var(--sans); font-weight: 500; font-size: 14.5px;
color: var(--dim); text-decoration: none; cursor: pointer;
list-style: none; white-space: nowrap; transition: color .15s, background .15s;
}
.nav-grp > summary::-webkit-details-marker { display: none; }
.nav-grp > summary::after {
content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 7px;
border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
transform: translateY(-2px) rotate(45deg); opacity: .45;
}
.nav-links > a:hover, .nav-grp > summary:hover { color: var(--text); background: var(--bg-lift); }
/* Der aktive Punkt traegt die Akzentfarbe. Ein Kasten um ihn herum waere
ein zweites Signal fuer dieselbe Aussage. */
.nav-links > a.on, .nav-grp > summary.on { color: var(--accent); }
.nav-grp { position: relative; }
.nav-grp[open] > summary { color: var(--text); background: var(--bg-raise); }
.nav-auf {
position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
min-width: 290px; background: var(--bg); border: 1px solid var(--line-dim);
border-radius: 10px; padding: 6px;
box-shadow: 0 4px 10px rgba(0,0,0,.06), 0 16px 40px rgba(0,0,0,.14);
}
.nav-auf a { display: block; padding: 9px 12px; border-radius: 6px; text-decoration: none; }
.nav-auf a:hover { background: var(--bg-lift); }
.nav-auf b { display: block; font-size: 14.5px; font-weight: 600; color: var(--text); }
.nav-auf span { display: block; font-size: 12.5px; color: var(--mute); margin-top: 1px; line-height: 1.4; }
/* --------------------------------------------------------- Handlungen */
.nav-tat { display: flex; align-items: center; gap: 8px; justify-self: end; }
.nav-cta, .nav-zweit { justify-self: end; }
.nav-zweit, .nav-cta {
font-family: var(--sans); font-weight: 500; font-size: 14px;
padding: 8px 16px; border-radius: 8px; text-decoration: none;
white-space: nowrap; transition: background .15s, border-color .15s, color .15s;
}
.nav-zweit {
color: var(--text); background: var(--bg); border: 1px solid var(--line);
}
.nav-zweit:hover { border-color: var(--text); }
.nav-cta {
color: #fff; background: var(--text); border: 1px solid var(--text);
}
.nav-cta:hover { background: var(--accent); border-color: var(--accent); }
@media (max-width: 1180px) {
/* Unter 1180 Pixeln braucht der Kopf zwei, auf dem Telefon drei Zeilen.
Gemessen: 189 Pixel auf 812 — ein Viertel des Schirms, dauerhaft
belegt. Er klebt deshalb nicht mehr, und --kopf-h faellt auf null,
damit das Inhaltsverzeichnis am oberen Rand anschlaegt statt unter
einem Kopf, der gar nicht mehr da ist. */
:root { --kopf-h: 0px; }
.nav { position: static; }
.nav-in { grid-template-columns: auto minmax(150px, 1fr) auto; gap: 0 16px; padding: 0 20px; }
.nav-tat { grid-column: 3; grid-row: 1; }
/* Kein overflow auf der Menueleiste. "overflow-x: auto" gibt es nicht
allein — der Browser rechnet daraus auch "overflow-y: auto", und das
absolut gesetzte Aufklappmenue haengt dann in einem 45 Pixel hohen
Kasten mit 298 Pixeln Inhalt. Gemessen: ein Klick auf "Alle 53
Gemeinden" traf die Ueberschrift dahinter, nicht den Link. Acht von
neun Zielen waren zwischen 561 und 1180 Pixeln unerreichbar.
Drei Punkte brauchen keinen Schiebestreifen; sie duerfen umbrechen. */
.nav-links { grid-column: 1 / -1; grid-row: 2; justify-self: start;
flex-wrap: wrap; padding-bottom: 8px; }
.nav-in { min-height: 0; padding-top: 10px; }
.nav-zweit { display: none; }
}
@media (max-width: 560px) {
.nav-in { grid-template-columns: auto 1fr; }
.nav-tat { grid-column: 2; grid-row: 1; }
.kopf-suche { grid-column: 1 / -1; grid-row: 2; margin-top: 2px; }
.nav-links { grid-row: 3; }
.nav-auf { position: static; box-shadow: none; border: 0; padding: 2px 0 6px 10px; min-width: 0; }
.nav-grp[open] { width: 100%; }
}
/* ----------------------------------------------------------------- Hero */
.hero { max-width: 1080px; margin: 0 auto; padding: 92px 32px 72px; }
.hero h1 {
font-size: clamp(38px, 6.4vw, 76px); font-weight: 400;
letter-spacing: -0.052em; line-height: 1.02; margin: 0 0 24px;
}
.hero h1 em { font-family: var(--serif); font-style: italic; color: var(--text); }
.hero-lead {
font-size: 18px; color: var(--dim); max-width: 640px;
line-height: 1.62; margin: 0 0 34px;
}
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 64px; }
.btn {
display: inline-block; padding: 12px 26px; border-radius: 2px;
background: var(--text); color: #fff; text-decoration: none;
font-size: 15px; font-weight: 500;
}
.btn:hover { background: #fff; }
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--line); }
.btn.ghost:hover { border-color: var(--accent); color: var(--accent); }
.kennz {
display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 28px; border-top: 1px solid var(--line); padding-top: 28px;
}
.kennz div { display: flex; flex-direction: column; gap: 5px; }
.k-zahl {
font-size: 30px; font-weight: 600; letter-spacing: -0.03em;
font-variant-numeric: tabular-nums;
}
.k-lbl {
font-family: var(--sans); font-weight: 500; font-size: 12px; color: var(--mute);
}
/* --------------------------------------------------------------- Baender */
.band { padding: 64px 0; border-top: 1px solid var(--line); }
.band.alt { background: var(--bg-lift); }
.sec-kopf { margin-bottom: 32px; }
.sec-kopf h2 {
font-size: 30px; font-weight: 400; letter-spacing: -0.04em; margin: 0 0 8px;
}
.sec-kopf p { font-size: 15px; color: var(--mute); margin: 0; max-width: 600px; }
.seiten-kopf { max-width: 1080px; margin: 0 auto; padding: 40px 32px 26px; }
.seiten-kopf h1 {
font-family: var(--serif); font-weight: 500;
font-size: clamp(38px, 5.6vw, 58px); line-height: 1.02;
letter-spacing: -0.021em; margin: 0 0 16px; color: var(--text);
max-width: 15ch;
}
.seiten-kopf.breit h1 { max-width: none; }
/* Der Vorspann steht in derselben Serife wie die Ueberschrift, nur
leichter und groesser als der Fliesstext. Das ist der Unterschied
zwischen einem Artikel und einem Formular. */
.lead {
font-family: var(--serif); font-weight: 400;
font-size: 21.5px; color: var(--dim); line-height: 1.45;
max-width: 620px; margin: 0; letter-spacing: -0.004em;
}
.meta {
font-size: 12.5px; color: var(--mute);
margin-top: 18px; letter-spacing: .04em;
}
.krume {
font-family: var(--sans); font-weight: 500; font-size: 12px; color: var(--mute);
margin-bottom: 18px;
}
.krume a { color: var(--dim); text-decoration: none; }
.krume a:hover { color: var(--accent); }
.krume span { opacity: .4; margin: 0 5px; }
/* --------------------------------------------------------------- Kacheln */
.kacheln {
display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 1px;
background: var(--line); border: 1px solid var(--line);
}
.kachel {
display: flex; flex-direction: column; gap: 9px;
padding: 26px 24px 24px; background: var(--bg);
text-decoration: none; transition: background .15s;
}
.band.alt .kachel { background: var(--bg-lift); }
.kachel:hover { background: var(--bg-raise); }
.ka-nr {
font-family: var(--sans); font-weight: 500; font-size: 12px; color: var(--mute);
}
.ka-titel { font-size: 19px; color: var(--text); letter-spacing: -0.028em; line-height: 1.2; }
.kachel:hover .ka-titel { color: var(--accent); }
.ka-text { font-size: 13.5px; color: var(--mute); line-height: 1.55; flex: 1; }
.ka-zahl {
font-size: 11.5px; font-weight: 500; color: var(--dim);
margin-top: 6px; letter-spacing: .03em;
}
/* -------------------------------------------------------------- Toplist */
.topliste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.topliste li { border-bottom: 1px solid var(--line-dim); }
.topliste a {
display: grid; grid-template-columns: 34px 1fr auto; gap: 14px;
align-items: baseline; padding: 15px 0; text-decoration: none;
}
.tl-nr { font-family: var(--sans); font-weight: 500; font-size: 11px; color: var(--mute); }
.tl-name { font-size: 18px; color: var(--text); letter-spacing: -0.025em; }
.topliste a:hover .tl-name { color: var(--accent); }
.tl-wert {
font-size: 17px; font-weight: 600; color: var(--text);
font-variant-numeric: tabular-nums;
}
.mehr {
display: inline-block; margin-top: 24px; font-size: 14px;
color: var(--dim); text-decoration: none;
}
.mehr:hover { color: var(--accent); }
/* -------------------------------------------------------------- Tabellen */
.thema-block { padding: 44px 0; border-top: 1px solid var(--line); }
.thema-block:first-child { border-top: none; }
.tb-kopf { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.thema-block h2 {
font-family: var(--serif); font-weight: 500;
font-size: 31px; letter-spacing: -0.017em; margin: 0 0 12px; line-height: 1.1;
}
.tb-kopf h2 { margin: 0; }
.tb-unit { font-family: var(--sans); font-weight: 500; font-size: 10px; color: var(--mute); letter-spacing: .06em; }
.tb-desc { font-size: 14.5px; color: var(--dim); line-height: 1.6; margin: 0 0 12px; max-width: 660px; }
.tb-caveat {
font-family: var(--serif); font-style: italic; font-size: 15px;
color: var(--warn); line-height: 1.5; margin: 0 0 16px; max-width: 660px;
}
.tb-stats {
display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: 20px; padding: 18px 0; border-top: 1px solid var(--line-dim);
border-bottom: 1px solid var(--line-dim); margin-bottom: 22px;
}
.tb-stats div { display: flex; flex-direction: column; gap: 4px; }
.s-lbl {
font-family: var(--sans); font-weight: 500; font-size: 12px; color: var(--mute);
}
.s-val { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tab { width: 100%; border-collapse: collapse; font-size: 14px; }
.tab th {
font-family: var(--sans); font-size: 11px; font-weight: 500; color: var(--dim);
letter-spacing: .06em; text-transform: uppercase;
text-align: left; padding: 0 12px 8px 0; border-bottom: 1px solid var(--text);
}
.tab td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--line-dim); color: var(--dim); }
.tab td a { color: var(--text); text-decoration: none; }
.tab td a:hover { color: var(--accent); }
.tab .r { text-align: right; }
.tab .num { font-variant-numeric: tabular-nums; color: var(--text); }
.tab .nr { font-family: var(--sans); font-weight: 500; font-variant-numeric: tabular-nums; font-size: 11px; color: var(--mute); }
.tab .klein { font-size: 12px; color: var(--mute); }
.tab .leer { color: var(--mute); font-family: var(--serif); font-style: italic; }
.tab .bal { width: 26%; padding-right: 0; }
.tab .bal i { display: block; height: 2px; background: var(--accent-d); }
.tab tr.aus td { opacity: .5; }
.tab tr.grund td {
font-size: 12.5px; color: var(--mute); font-family: var(--serif);
font-style: italic; padding-top: 0; padding-bottom: 14px; border-bottom: none;
line-height: 1.5;
}
.tab .ok { color: var(--accent); }
.tab .fehler { color: var(--warn); }
.tag {
font-weight: 500;
display: inline-block; font-family: var(--sans); font-size: 12px; padding: 2px 7px;
border-radius: 2px; border: 1px solid var(--line); color: var(--mute);
margin-left: 8px;
}
.tag.blocked { color: var(--warn); border-color: rgba(168,31,22,.3); }
/* ----------------------------------------------------------- Gemeindeseite */
.werte {
display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 1px; background: var(--line); border: 1px solid var(--line);
margin-bottom: 8px;
}
.wert { background: var(--bg); padding: 20px 20px 18px; display: flex; flex-direction: column; gap: 4px; }
.w-lbl {
font-family: var(--sans); font-weight: 500; font-size: 12px; color: var(--mute);
}
.w-val {
font-size: 25px; letter-spacing: -0.03em; font-weight: 600;
font-variant-numeric: tabular-nums; color: var(--text);
}
.wert.leer-karte .w-val {
font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--mute);
}
.w-unit { font-size: 11.5px; color: var(--mute); }
.w-rang {
font-size: 12px; color: var(--mute);
margin-top: 7px; line-height: 1.5;
}
.w-rang .ueber { color: var(--pos); }
.w-rang .unter { color: var(--warn); }
.luecke { padding: 14px 0; border-bottom: 1px solid var(--line-dim); }
.luecke:last-child { border-bottom: none; }
.l-name { display: block; font-size: 15px; color: var(--dim); }
.l-why {
display: block; font-family: var(--serif); font-style: italic;
font-size: 14.5px; color: var(--mute); margin-top: 5px; line-height: 1.5;
}
.l-src { display: block; font-family: var(--sans); font-weight: 500; font-size: 10px; color: var(--mute); margin-top: 6px; }
.luecke.blocked .l-name { color: var(--warn); }
/* ---------------------------------------------------------------- Prosa */
.prosa { font-size: 17px; line-height: 1.72; color: var(--dim); }
.prosa h2 {
font-size: 26px; font-weight: 400; letter-spacing: -0.035em;
color: var(--text); margin: 44px 0 14px;
}
.prosa h3 { font-size: 19px; font-weight: 500; color: var(--text); margin: 32px 0 10px; }
.prosa p { margin: 0 0 20px; }
.prosa a { color: var(--accent); }
.prosa blockquote {
border-left: 2px solid var(--accent-d); margin: 28px 0; padding: 2px 0 2px 20px;
font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--text);
}
.prosa ul, .prosa ol { margin: 0 0 20px; padding-left: 22px; }
.prosa li { margin-bottom: 8px; }
.prosa img { max-width: 100%; height: auto; border-radius: 4px; }
.fliess { font-size: 16px; line-height: 1.7; color: var(--dim); margin: 0 0 18px; max-width: 660px; }
.rubriken { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.rubriken a {
font-size: 13px; color: var(--dim); text-decoration: none;
padding: 7px 16px; border: 1px solid var(--line); border-radius: 2px;
}
.rubriken a:hover, .rubriken a.on { color: var(--accent); border-color: var(--accent-d); }
.leerstand { max-width: 680px; padding: 20px 0 40px; }
.leerstand h2 { font-size: 24px; font-weight: 400; letter-spacing: -0.035em; margin: 0 0 14px; }
.code {
font-family: var(--mono); font-size: 11.5px; color: var(--dim);
background: var(--bg-raise); border: 1px solid var(--line-dim);
border-radius: 10px; padding: 18px; overflow-x: auto; line-height: 1.6;
}
code { font-family: var(--mono); font-size: .92em; color: var(--accent); }
.quelle {
font-family: var(--sans); font-weight: 500; font-variant-numeric: tabular-nums; font-size: 10px; color: var(--mute);
margin: 18px 0 0; line-height: 1.6; letter-spacing: .02em;
}
/* ----------------------------------------------------------------- Fuss */
.fuss { border-top: 1px solid var(--line); margin-top: 72px; }
.fuss-in {
max-width: 1080px; margin: 0 auto; padding: 52px 32px 36px;
display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px;
}
.fuss-mark { font-size: 19px; letter-spacing: -0.045em; margin-bottom: 10px; }
.fuss-mark .dot { color: var(--accent); }
.fuss-text { font-size: 13.5px; color: var(--mute); line-height: 1.62; margin: 0; max-width: 380px; }
.fuss-h {
font-weight: 500;
font-family: var(--sans); font-size: 12px; color: var(--mute); margin-bottom: 12px;
}
.fuss-q { display: flex; flex-direction: column; gap: 8px; }
.fuss-q a { font-size: 13px; color: var(--dim); text-decoration: none; }
.fuss-q a:hover { color: var(--accent); }
.fuss-ende {
max-width: 1080px; margin: 0 auto; padding: 18px 32px 40px;
border-top: 1px solid var(--line-dim);
font-family: var(--sans); font-weight: 500; font-variant-numeric: tabular-nums; font-size: 10px; color: var(--mute); letter-spacing: .03em;
}
@media (max-width: 820px) {
.nav-in { gap: 16px; padding: 14px 20px; flex-wrap: wrap; }
.band-in, .hero, .seiten-kopf, .fuss-in, .fuss-ende { padding-left: 20px; padding-right: 20px; }
.fuss-in { grid-template-columns: 1fr; gap: 30px; }
.tab .bal { display: none; }
}
/* ------------------------------------------------------------ Vergleich */
.vs { font-family: var(--serif); font-style: italic; color: var(--mute); font-size: .55em; }
.vgl-name { border-bottom: 3px solid var(--f); padding-bottom: 2px; }
.vgl-form {
display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
padding: 4px 0 8px;
}
.vgl-wahl { position: relative; display: inline-flex; align-items: center; }
.vgl-wahl::before {
content: ""; position: absolute; left: 13px; width: 8px; height: 8px;
border-radius: 50%; background: var(--f); pointer-events: none;
}
.vgl-wahl select {
background: var(--bg-raise); border: 1px solid var(--line-dim);
border-radius: 2px; color: var(--text); font-size: 13px;
padding: 9px 34px 9px 30px; font-family: var(--sans); cursor: pointer;
appearance: none;
background-image: linear-gradient(45deg, transparent 50%, var(--dim) 50%),
linear-gradient(135deg, var(--dim) 50%, transparent 50%);
background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.vgl-wahl select:focus { outline: none; border-color: rgba(199,255,159,.45); }
.vgl-form .btn { padding: 9px 22px; font-size: 14px; }
/* Vergleichstabelle: Wert gross, Balken in der Gemeindefarbe, Rang klein.
Die Farbe verbindet Tabelle und Diagramme zu einem System. */
.tab.vgl2 { table-layout: fixed; }
.tab.vgl2 th a { color: var(--text); text-decoration: none; font-family: var(--sans); }
.tab.vgl2 th a:hover { color: var(--accent); }
.tab.vgl2 th { font-size: 12px; text-transform: none; letter-spacing: 0; padding-bottom: 12px; }
.tab.vgl2 th .dot, .tab.vgl2 th i.dot {
display: inline-block; width: 9px; height: 9px; border-radius: 50%;
margin-right: 8px; vertical-align: 0;
}
.tab.vgl2 td { padding: 16px 14px 14px 0; vertical-align: top; }
.tab.vgl2 .mk-name { display: block; font-size: 14.5px; color: var(--text); }
.tab.vgl2 .mk-unit {
display: block; font-family: var(--sans); font-weight: 500; font-variant-numeric: tabular-nums; font-size: 10px;
color: var(--mute); margin-top: 4px; letter-spacing: .03em;
}
.tab.vgl2 .zelle { min-width: 0; }
.tab.vgl2 .z-wert {
display: block; font-family: var(--sans); font-weight: 500; font-size: 19px;
letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--text);
}
.tab.vgl2 .z-wert.plus { color: var(--accent); }
.tab.vgl2 .z-wert.minus { color: var(--cyan); }
.tab.vgl2 .z-bal {
display: block; height: 3px; background: var(--line-dim);
border-radius: 2px; margin: 8px 0 0 auto; max-width: 130px; overflow: hidden;
}
.tab.vgl2 .z-bal i { display: block; height: 100%; border-radius: 2px; }
.tab.vgl2 .z-rang {
display: block; font-family: var(--sans); font-weight: 500; font-variant-numeric: tabular-nums; font-size: 9.5px;
color: var(--mute); margin-top: 7px; letter-spacing: .04em;
}
.tab.vgl2 .z-leer {
font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--mute);
}
.vgl-charts .ch-block { max-width: 860px; margin-bottom: 40px; }
.vgl-legende {
display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px;
}
.vgl-legende span {
display: inline-flex; align-items: center; font-size: 12px; color: var(--dim);
border: 1px solid var(--line-dim); border-radius: 2px; padding: 4px 12px;
}
.vgl-legende i {
display: inline-block; width: 9px; height: 9px; border-radius: 50%;
margin-right: 7px;
}
.tab .plus { color: var(--accent); }
.tab .minus { color: var(--cyan); }
.jahrestab { margin-top: 10px; }
.jahrestab summary {
cursor: pointer; font-size: 13.5px; color: var(--dim); padding: 8px 0;
}
.jahrestab summary:hover { color: var(--accent); }
.jahrestab .tab { margin-top: 10px; max-width: 560px; }
/* --------------------------------------------------- Kennzahl-Auswahl */
.kennz-wahl {
display: flex; gap: 1px; flex-wrap: wrap;
background: var(--line); border: 1px solid var(--line);
border-radius: 14px; overflow: hidden; margin: 4px 0 28px;
}
.kennz-wahl a {
flex: 1 1 150px; padding: 14px 18px; background: var(--bg);
text-decoration: none; display: flex; flex-direction: column; gap: 4px;
transition: background .13s;
}
.kennz-wahl a:hover { background: var(--bg-raise); }
.kennz-wahl a.on { background: var(--bg-raise); box-shadow: inset 0 -2px 0 var(--accent); }
.kw-name { font-size: 14.5px; color: var(--dim); letter-spacing: -0.02em; }
.kennz-wahl a.on .kw-name { color: var(--accent); }
.kw-unit {
font-family: var(--sans); font-weight: 500; font-variant-numeric: tabular-nums; font-size: 9.5px; color: var(--mute);
letter-spacing: .05em;
}
.rangtab { max-width: 780px; }
/* ---------------------------------------------------------- Lage-Check */
.oc-form { padding: 4px 0 10px; }
.oc-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 16px 20px; margin-bottom: 20px; max-width: 800px;
}
.oc-grid label { display: flex; flex-direction: column; gap: 7px; font-size: 13px; color: var(--dim); }
.oc-grid input, .oc-grid select {
background: var(--bg-lift); border: 1px solid var(--line);
border-radius: 8px; color: var(--text); font-size: 14px;
padding: 10px 12px; font-family: var(--sans); font-weight: 500; font-variant-numeric: tabular-nums;
}
.oc-grid input:focus, .oc-grid select:focus {
outline: none; border-color: var(--text); box-shadow: 0 0 0 3px rgba(10,70,200,.12);
}
/* Die drei Leitzahlen des Lage-Checks, gesetzt wie der Kurskopf einer
Zeitung — dieselbe Figur wie .leit auf den Gemeindeseiten. Vorher waren
es drei blaue Riesenzahlen in Kaesten mit einer 10-Pixel-Fussnote: der
Kasten behauptete Gewicht, die Fussnote war nicht zu lesen, und Blau
ist auf dieser Seite die Farbe fuer Verweise, nicht fuer Zahlen. */
.oc-haupt {
display: flex; flex-wrap: wrap; gap: 0;
border-top: 2px solid var(--text); border-bottom: 1px solid var(--line);
padding: 18px 0 19px; margin: 20px 0 26px;
}
.oc-karte {
flex: 1 1 190px; min-width: 170px;
display: flex; flex-direction: column; gap: 5px;
padding-right: 26px; margin-right: 26px;
border-right: 1px solid var(--line-dim);
}
.oc-karte:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.oc-lbl { font-family: var(--sans); font-weight: 500; font-size: 12.5px; color: var(--mute); }
.oc-val {
font-family: var(--sans); font-weight: 600; font-size: 29px; letter-spacing: -0.025em;
color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.05;
}
.oc-val small { font-size: 13px; font-weight: 400; color: var(--mute); letter-spacing: 0; margin-left: 3px; }
.oc-val.leer { color: var(--mute); font-family: var(--serif); font-style: italic; font-size: 23px; font-weight: 400; }
.oc-sub {
font-family: var(--sans); font-weight: 400; font-variant-numeric: tabular-nums;
font-size: 12.5px; color: var(--mute); line-height: 1.45;
}
.oc-sub.ueber { color: var(--warn); }
.oc-sub.unter { color: var(--cyan); }
.oc-sub.leer, .oc-fakten .leer {
font-family: var(--serif); font-style: italic; color: var(--mute);
}
.oc-fakten { display: grid; grid-template-columns: auto 1fr; gap: 10px 22px; margin: 0; max-width: 720px; }
.oc-fakten dt { font-size: 13px; color: var(--mute); }
.oc-fakten dd { margin: 0; font-size: 13.5px; color: var(--dim); }
.oc-hinweis {
margin: 20px 0 0; padding: 14px 18px; max-width: 720px;
border-left: 2px solid var(--accent-d); background: var(--bg-lift);
font-size: 14px; color: var(--dim); line-height: 1.6;
}
.oc-fehlend { margin: 0; padding-left: 20px; max-width: 720px; }
.oc-fehlend li { font-size: 14px; color: var(--mute); line-height: 1.6; margin-bottom: 8px; }
/* ------------------------------------------------------------- Insel */
.ins-kennz {
display: flex; flex-wrap: wrap; gap: 0 44px;
border-top: 2px solid var(--text); border-bottom: 1px solid var(--line);
padding: 15px 0 16px; margin-bottom: 10px;
}
.ins-kennz div { display: flex; flex-direction: column; gap: 3px; min-width: 110px; }
.ik-zahl {
font-size: 22px; font-weight: 600; letter-spacing: -0.02em;
font-variant-numeric: tabular-nums; color: var(--text);
}
.ik-lbl { font-size: 12.5px; color: var(--mute); line-height: 1.4; }
.dyn-paar { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 32px; }
.dyn-kopf {
font-weight: 500;
font-family: var(--sans); font-size: 12px; color: var(--mute); margin-bottom: 10px;
}
.dyn-zeile {
display: flex; justify-content: space-between; align-items: baseline;
padding: 10px 0; border-bottom: 1px solid var(--line-dim); text-decoration: none;
}
.dz-name { font-size: 14.5px; color: var(--text); }
.dyn-zeile:hover .dz-name { color: var(--accent); }
.dz-wert { font-family: var(--sans); font-weight: 500; font-size: 14px; font-variant-numeric: tabular-nums; }
.dz-wert.plus { color: var(--accent); }
.dz-wert.minus { color: var(--cyan); }
/* ------------------------------------------------------- ETV-Vergaben */
.vg-jahre, .vg-monate {
display: flex; align-items: flex-end; gap: 4px;
height: 150px; margin: 20px 0 6px;
}
.vg-monate { height: 96px; }
.vg-jahr, .vg-monat {
flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
align-items: center; height: 100%; min-width: 0; cursor: default;
}
.vg-bar {
width: 100%; background: var(--accent-d); border-radius: 2px 2px 0 0;
min-height: 2px; transition: background .12s;
}
.vg-jahr:hover .vg-bar, .vg-monat:hover .vg-bar { background: var(--accent); }
.vg-zahl {
font-family: var(--sans); font-weight: 500; font-variant-numeric: tabular-nums; font-size: 9px; color: var(--dim);
margin-top: 5px; writing-mode: vertical-rl; text-orientation: mixed;
}
.vg-lbl {
font-family: var(--sans); font-weight: 500; font-size: 8.5px; color: var(--mute);
margin-top: 5px; white-space: nowrap;
}
.vg-monate .vg-lbl { font-size: 9.5px; }
.vg-h3 {
font-size: 15px; font-weight: 400; color: var(--text);
letter-spacing: -0.02em; margin: 34px 0 6px;
}
@media (max-width: 700px) { .vg-zahl { display: none; } }
/* ------------------------------------------------------------- Mobil
*
* Tabellen mit 53 Zeilen sind am Telefon der Normalfall, nicht die
* Ausnahme. Sie bleiben lesbar, wenn die Zahl gross und der Rest klein
* ist — und wenn breite Tabellen seitlich scrollen duerfen, statt die
* Seite zu sprengen.
*/
@media (max-width: 700px) {
.band-in, .hero, .seiten-kopf, .fuss-in, .fuss-ende {
padding-left: 16px; padding-right: 16px;
}
.nav-brand { font-size: 17px; }
.hero { padding: 44px 16px 40px; }
.seiten-kopf { padding: 34px 16px 24px; }
.band { padding: 40px 0; }
/* Breite Tabellen scrollen in sich statt die Seite zu sprengen */
/* Jede Tabelle, nicht nur die als breit markierten: die Kennzahlen
wurden umgebrochen, die uebrigen sprengten weiter die Seite. */
.tab { display: block; overflow-x: auto; white-space: nowrap; }
.tab th, .tab td { padding-right: 16px; }
/* Ranglisten: Zahl gross, Balken unter den Namen */
.rangtab .nr { font-size: 10px; }
.rangtab td { padding: 10px 8px 10px 0; }
.kennz-wahl a { flex: 1 1 100%; padding: 12px 14px; }
.tb-stats { grid-template-columns: 1fr 1fr; gap: 14px; }
.ins-kennz div, .oc-karte { padding: 16px 14px; }
.oc-val { font-size: 24px; }
.vgl-form select, .oc-grid input, .oc-grid select { width: 100%; }
.vgl-form { flex-direction: column; align-items: stretch; }
.vgl-wahl { width: 100%; }
.vgl-wahl select { width: 100%; }
.dyn-paar { gap: 24px; }
}
/* ---------------------------------------------------------------- Punkte
Eine Aussage je Zeile, die Quelle darunter. Die Quelle steht dabei,
weil ein Satz ohne Herkunft weder zitierbar noch pruefbar ist — und
genau das unterscheidet diese Seiten von einem Ratgebertext. */
.punkte { list-style: none; margin: 0; padding: 0; }
.punkt {
padding: 11px 0 12px; border-bottom: 1px solid var(--line-dim);
}
.punkt:last-child { border-bottom: none; }
.punkt-text { display: block; font-size: 15px; line-height: 1.5; color: var(--text); }
.punkt-quelle {
display: block; margin-top: 4px; font-family: var(--sans); font-weight: 500;
font-size: 10.5px; color: var(--mute); letter-spacing: .02em;
}
/* Ein schmaler Strich, kein Warndreieck: es ist eine Rechtslage oder ein
amtlicher Befund, kein Alarm. */
/* Ein schmaler Strich, kein Alarm. Von acht Punkten tragen oft vier eine
Warnung; in kraeftigem Rot saehe die Seite aus, als brenne es. Die
Aussage steht im Satz, die Markierung hilft nur beim Ueberfliegen. */
.punkt-warn { border-left: 3px solid var(--warn); padding-left: 13px; }
.punkt-warn .punkt-text { color: var(--text); }
/* ------------------------------------------------- Uebergabe an Agenten
Bewusst zurueckhaltend: es ist ein Werkzeug, keine Werbeflaeche. Die
Knoepfe tragen rel=nofollow, weil sie zu Drittdiensten fuehren und
keine Empfehlung sind. */
/* Ortswahl */
.ow-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px 28px; margin-bottom: 36px; }
.ow-krit { border: 0; padding: 0; margin: 0; }
.ow-krit legend { font-size: 14px; color: var(--text); margin-bottom: 6px; }
.ow-stufen { display: flex; gap: 4px; }
.ow-stufe { flex: 1; text-align: center; font-size: 12px; padding: 7px 4px; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; color: var(--dim); user-select: none; }
.ow-stufe input { position: absolute; opacity: 0; width: 0; height: 0; }
.ow-stufe.on, .ow-stufe:has(input:checked) { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.ow-aktion { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 6px; }
.ow-bsp { font-size: 13px; color: var(--dim); }
.ow-bsp:hover { color: var(--accent); }
.ow-h2 { font-size: 20px; margin: 8px 0 14px; }
.ow-h3 { font-size: 15px; margin: 26px 0 8px; }
.ow-einheit { display: block; font-weight: 400; font-size: 11px; color: var(--dim); }
.ow-score { color: var(--text); font-weight: 600; }
.ow-unrated { font-size: 13px; color: var(--dim); padding-left: 18px; line-height: 1.7; }
.tab-wrap { overflow-x: auto; }
/* Gemeinde- und Ortsprofil */
.gp-meta { font-size: 12.5px; color: var(--mute); margin: 18px 0 0;
font-variant-numeric: tabular-nums; line-height: 1.7; }
.gp-meta a { color: var(--dim); text-decoration: none; }
.gp-meta a:hover { color: var(--accent); }
.toc { display: flex; flex-wrap: nowrap; gap: 6px 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 8px; font-size: 13px; }
.toc a { color: var(--dim); text-decoration: none; }
.toc a:hover { color: var(--accent); }
.gp-frage { font-size: 15px; font-weight: 500; margin: 26px 0 10px; color: var(--text); }
.gp-frage:first-of-type { margin-top: 6px; }
.gp-satz { font-size: 15px; line-height: 1.6; color: var(--text); margin: 0 0 12px; max-width: 720px; }
.gp-satz .punkt-quelle { display: inline; margin-left: 6px; }
.gp-warn { border-left: 2px solid var(--warn); padding-left: 12px; }
.gp-zeile-warn td:first-child { color: var(--warn); }
.gp-sub { font-family: var(--sans); font-weight: 500; font-size: 12px; color: var(--mute); margin-left: 10px; vertical-align: middle; }
.gp-zwei { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px 36px; }
.gp-drei { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 36px; }
.gp-tab { max-width: 720px; }
.gp-auf { color: var(--accent); }
.gp-ab { color: var(--warn); }
.gp-links { display: flex; flex-wrap: wrap; gap: 0 24px; }
.faq { max-width: 760px; }
.faq-e { border-bottom: 1px solid var(--line-dim); padding: 4px 0; }
.faq-e summary { cursor: pointer; font-size: 15.5px; padding: 10px 0; color: var(--text); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq-e summary::after { content: '+'; color: var(--mute); font-family: var(--sans); font-weight: 500; font-variant-numeric: tabular-nums; }
.faq-e[open] summary::after { content: '–'; }
.faq-e summary:hover { color: var(--accent); }
.faq-e p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.6; color: var(--dim); max-width: 680px; }
.faq-e p.punkt-quelle { margin-bottom: 12px; }
.klein { font-size: 11.5px; color: var(--mute); }
.gp-stand { font-size: 12.5px; color: var(--mute); margin: 3px 0 0;
font-variant-numeric: tabular-nums; line-height: 1.7; }
.gp-stand a { color: var(--dim); }
/* ------------------------------------------------- Kennzahlen als Tabelle
Vorher standen hier 52 gleich grosse Kacheln untereinander. Das sah nach
Baukasten aus und liess sich nicht lesen: gleiche Groesse heisst gleiche
Wichtigkeit, und nichts fuehrt das Auge. Eine Tabelle ordnet die Zahlen
in Spalten, macht sie vergleichbar und braucht ein Drittel der Hoehe. */
.kz {
width: 100%; border-collapse: collapse; font-size: 15px;
margin: 0 0 8px; max-width: 860px;
}
.kz caption {
text-align: left; font-size: 15px; font-weight: 600; color: var(--text);
padding: 22px 0 8px; letter-spacing: -0.01em;
}
.kz th {
font-family: var(--sans); font-size: 11px; font-weight: 500; color: var(--dim);
letter-spacing: .06em; text-transform: uppercase;
text-align: right; padding: 0 0 8px 14px; border-bottom: 1px solid var(--text);
}
.kz th:first-child { text-align: left; padding-left: 0; }
.kz td {
padding: 9px 0 9px 14px; border-bottom: 1px solid var(--line-dim);
text-align: right; color: var(--text); white-space: nowrap;
}
.kz td:first-child {
text-align: left; padding-left: 0; color: var(--text); white-space: normal;
width: 42%;
}
.kz tr:hover td { background: var(--bg-lift); }
.kz-wert { font-weight: 600; font-size: 16px; }
.kz-einheit { color: var(--mute); font-size: 13px; }
.kz-rang { color: var(--dim); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.kz-abw { font-size: 13.5px; font-variant-numeric: tabular-nums; }
.kz-abw.ueber { color: var(--pos); }
.kz-abw.unter { color: var(--warn); }
.kz-quelle { display: block; font-size: 12px; color: var(--mute); margin-top: 2px; }
/* Leitzahlen: die wenigen Werte, mit denen ein Leser einordnet, bevor er
liest. Eine Zeile, keine Kacheln — wie der Kurskopf einer Zeitung. */
/* Festes Raster statt Flex mit Umbruch. Seit unter jeder Zahl ihre
Einordnung steht, sind die Zellen hoeher und ungleich hoch — im
umbrechenden Flexkasten klebte dann die Rangzeile der ersten Reihe an
der Beschriftung der zweiten, und die Trennlinie sass bei jeder Zeile
woanders. Mit festen Spalten ist beides berechenbar. */
.leit {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px 0; align-items: start;
border-top: 2px solid var(--text); border-bottom: 1px solid var(--line);
padding: 18px 0 19px; margin: 0 0 4px;
}
.leit > div { padding: 0 22px; border-left: 1px solid var(--line-dim); }
.leit > div:nth-child(3n+1) { border-left: 0; padding-left: 0; }
@media (max-width: 720px) {
.leit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.leit > div:nth-child(3n+1) { border-left: 1px solid var(--line-dim); padding-left: 22px; }
.leit > div:nth-child(2n+1) { border-left: 0; padding-left: 0; }
}
.leit dt {
font-family: var(--sans); font-weight: 500; font-size: 12px; color: var(--mute); margin: 0 0 3px;
}
.leit dd {
margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.leit dd span { font-size: 12.5px; font-weight: 400; color: var(--mute); margin-left: 3px; }
/* ------------------------------------------------------------ Startseite
Eine Datenseite muss nicht kalt aussehen. Was sie freundlich macht, ist
nicht Dekor, sondern Grosszuegigkeit: Luft zwischen den Abschnitten,
eine Suche, die sofort fuehrt, und Bilder — hier die Gemeindeumrisse,
weil die aus derselben Quelle kommen wie die Zahlen. */
/* WEISS, NICHT PASTELLBLAU.
Der hellblaue Grund war der Rest aus der Dashboard-Fassung: er machte
den Kopf zu einem Kasten, den man wegschauen kann, und legte einen
Farbstich ueber das Foto daneben. Weiss laesst dem Bild seine Farben
und der Serife ihren Kontrast — die Ruhe kommt aus dem Raum, nicht aus
einer Flaeche. */
.hero2 {
background: var(--bg); border-bottom: 1px solid var(--line-dim);
padding: 60px 0 56px; margin-bottom: 0;
}
.hero2-in {
display: grid; grid-template-columns: minmax(0, 1fr) 400px;
gap: 56px; align-items: center;
}
.hero2-globus { margin: 0; text-align: center; }
.hero2-globus canvas { width: 100%; max-width: 360px; aspect-ratio: 1; display: block; }
.hero2-globus figcaption {
font-family: var(--sans);
font-weight: 400;
font-size: 11.5px;
color: var(--mute); margin-top: 4px;
}
.hero2-globus figcaption span {
display: block; letter-spacing: 0; text-transform: none;
font-size: 12.5px; color: var(--dim); margin-top: 3px;
}
.hero2-kicker {
font-family: var(--sans);
font-size: 12px; font-weight: 500; color: var(--mute); margin: 0 0 20px;
}
.hero2 h1 {
font-family: var(--serif); font-weight: 600;
font-size: clamp(30px, 3.9vw, 47px); line-height: 1.1;
letter-spacing: -0.028em; margin: 0 0 16px;
/* Die Zeilenumbrueche stehen als
im Markup — die Ueberschrift ist
dreigliedrig und soll auch dreizeilig bleiben. Die Breite muss der
laengsten Zeile Platz lassen, sonst bricht sie ein viertes Mal um. */
max-width: 30ch;
}
.hero2-lead {
font-size: 17px; line-height: 1.6; color: var(--dim);
max-width: 54ch; margin: 0 0 26px;
}
.hero2-fuss { font-size: 13px; color: var(--mute); margin: 16px 0 0; }
.hero2-fuss a { color: var(--dim); }
.start-suchfeld { position: relative; max-width: 620px; }
.start-suchfeld input {
width: 100%; font-family: var(--sans); font-size: 16px; color: var(--text);
background: #fff; border: 1px solid var(--line); border-radius: 999px;
padding: 17px 26px; outline: none;
box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
}
.start-suchfeld input:focus { border-color: var(--text); }
.start-suchfeld input::placeholder { color: var(--mute); }
#start-treffer {
position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 20;
list-style: none; margin: 0; padding: 6px; background: #fff;
border: 1px solid var(--line); border-radius: 16px;
box-shadow: 0 4px 8px rgba(0,0,0,.06), 0 16px 40px rgba(0,0,0,.12);
}
#start-treffer a {
display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
padding: 10px 16px; border-radius: 10px; text-decoration: none; color: var(--text);
font-size: 15px;
}
#start-treffer a:hover, #start-treffer a.auf { background: var(--bg-lift); }
#start-treffer em { font-style: normal; font-size: 12.5px; color: var(--mute); }
/* Abschnittskopf: kleines Label, grosse Zeile, Verweis rechts. */
.ab-kopf {
display: flex; justify-content: space-between; align-items: flex-end; gap: 24px;
border-bottom: 1px solid var(--line); padding: 48px 0 16px; margin-bottom: 26px;
}
.ab-label {
font-family: var(--sans);
font-size: 12px; font-weight: 500; color: var(--mute); margin: 0 0 6px;
}
.ab-kopf h2 {
font-family: var(--serif); font-weight: 600; font-size: clamp(23px, 2.8vw, 30px);
letter-spacing: -0.022em; line-height: 1.18; margin: 0;
}
.ab-mehr { font-size: 14px; color: var(--dim); text-decoration: none; white-space: nowrap; padding-bottom: 4px; }
.ab-mehr:hover { color: var(--accent); }
/* Gemeindekacheln mit Umriss statt Foto. */
.karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 28px 24px; }
.karte { text-decoration: none; color: var(--text); display: block; }
.karte-bild {
display: block; background: var(--bg-lift); border: 1px solid var(--line-dim);
border-radius: 14px; aspect-ratio: 4 / 3; overflow: hidden;
display: flex; align-items: center; justify-content: center;
transition: background .15s, border-color .15s;
}
.karte-bild svg { width: 76%; height: 76%; transition: transform .24s cubic-bezier(.2,.7,.3,1); }
.karte:hover .karte-bild svg { transform: scale(1.08); }
.karte-bild path { fill: #c3d2ee; transition: fill .15s; }
.karte:hover .karte-bild { background: var(--bg-raise); border-color: var(--line); }
.karte:hover .karte-bild path { fill: var(--accent); }
.karte-titel { display: block; font-size: 16px; font-weight: 600; margin: 12px 0 2px; letter-spacing: -0.01em; }
.karte-meta { display: block; font-size: 13px; color: var(--mute); font-variant-numeric: tabular-nums; }
/* Ranglisten */
.start-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 8px 40px; }
.start-liste { padding: 0 0 26px; }
.start-liste h3 { font-size: 15.5px; font-weight: 600; margin: 0 0 2px; letter-spacing: -0.01em; }
.sl-sub { font-size: 12.5px; color: var(--mute); margin: 0 0 10px; }
.start-liste ol { list-style: none; margin: 0; padding: 0; counter-reset: sl; }
.start-liste ol li { counter-increment: sl; }
.start-liste ol a {
display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
padding: 7px 0; border-bottom: 1px solid var(--line-dim);
text-decoration: none; color: var(--text); font-size: 14.5px;
}
.start-liste ol a::before {
content: counter(sl); font-size: 11px; color: var(--mute);
min-width: 14px; font-variant-numeric: tabular-nums;
}
.start-liste ol .sl-name { flex: 1; }
.start-liste ol a:hover .sl-name { color: var(--accent); }
.sl-wert { font-weight: 600; font-variant-numeric: tabular-nums; }
.sl-aend { list-style: none; margin: 0; padding: 0; }
.sl-aend a {
display: block; padding: 7px 0; border-bottom: 1px solid var(--line-dim);
font-size: 13.5px; line-height: 1.45; color: var(--dim); text-decoration: none;
}
.sl-aend a:hover { color: var(--text); }
.sl-datum { font-variant-numeric: tabular-nums; color: var(--mute); margin-right: 8px; font-size: 12px; }
.sl-fuss { font-size: 12.5px; color: var(--mute); line-height: 1.5; margin: 10px 0 0; }
/* Werkzeugkacheln */
.werkzeuge { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.wz {
display: block; text-decoration: none; color: var(--text);
border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px 24px;
transition: border-color .15s, box-shadow .15s, transform .15s;
}
.wz:hover {
border-color: var(--text); transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,.07);
}
.wz-titel { display: block; font-size: 17px; font-weight: 600; margin-bottom: 8px; }
.wz-text { display: block; font-size: 14px; line-height: 1.6; color: var(--dim); }
.start-fragen { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 8px 40px; }
.start-fragen h3 { font-size: 16px; font-weight: 600; margin: 0 0 6px; line-height: 1.3; }
.start-fragen h3 a { color: var(--text); text-decoration: none; }
.start-fragen h3 a:hover { color: var(--accent); }
.start-fragen p { font-size: 14.5px; line-height: 1.6; color: var(--dim); margin: 0 0 8px; max-width: 46ch; }
.start-orte { font-size: 15px; line-height: 2; color: var(--mute); }
.start-orte a { color: var(--text); text-decoration: none; }
.start-orte a:hover { color: var(--accent); text-decoration: underline; }
/* Schlussblock: der einzige dunkle Bereich der Seite — er traegt die
Einladung wiederzukommen und darf sich deshalb abheben. */
.schluss {
background: var(--text); color: #fff; border-radius: 20px;
padding: 48px 44px; margin: 56px 0 12px;
}
.schluss h2 {
font-family: var(--serif); font-weight: 600; font-size: clamp(25px, 3.2vw, 34px);
line-height: 1.14; letter-spacing: -0.025em; margin: 0 0 14px; color: #fff;
}
.schluss p { font-size: 15.5px; line-height: 1.65; color: rgba(255,255,255,.76); max-width: 62ch; margin: 0; }
.ab-label.hell { color: rgba(255,255,255,.55); }
.schluss-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.btn.hell { background: #fff; color: #000; border: 1px solid #fff; }
.btn.hell:hover { background: rgba(255,255,255,.85); }
.btn.geist { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.35); }
.btn.geist:hover { border-color: #fff; color: #fff; }
@media (max-width: 900px) {
.hero2-in { grid-template-columns: 1fr; gap: 28px; }
.hero2-globus { order: -1; }
.hero2-globus canvas { max-width: 220px; margin: 0 auto; }
}
@media (max-width: 640px) {
.hero2 { padding: 40px 0 36px; }
.ab-kopf { flex-direction: column; align-items: flex-start; gap: 10px; }
.schluss { padding: 32px 24px; border-radius: 14px; }
.karten { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 20px 16px; }
}
/* Rechtstexte: eine Spalte, ruhig gesetzt, ohne Auszeichnungen. Sie werden
gelesen, wenn jemand etwas sucht — nicht ueberflogen. */
.recht { padding-bottom: 40px; }
.recht h2, .recht p { max-width: 62ch; }
.recht h2 {
font-family: var(--serif); font-weight: 600; font-size: 20px;
letter-spacing: -0.015em; margin: 34px 0 10px; line-height: 1.25;
}
.recht h2:first-child { margin-top: 8px; }
.recht p { font-size: 15.5px; line-height: 1.7; color: var(--dim); margin: 0 0 14px; }
.recht a { color: var(--accent); }
.recht-fuss { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 14px; }
/* -------------------------------------------------------- Themenseiten
Vorher stand die Methodik vor der Zahl und die Kennzahl-Auswahl sah aus
wie ein Formular. Jetzt: Antwort, Leitzahlen, schlanke Umschaltung,
Rangliste — die Herleitung steht aufklappbar am Ende, wo sie hingehoert. */
.th-antwort {
font-size: 19px; line-height: 1.55; color: var(--text);
max-width: 62ch; margin: 4px 0 22px;
}
.th-antwort b { font-weight: 600; }
.th-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 26px 0 6px; }
.th-tabs a {
padding: 8px 15px; border-radius: 999px; font-size: 14px;
color: var(--dim); text-decoration: none; border: 1px solid var(--line);
}
.th-tabs a:hover { border-color: var(--text); color: var(--text); }
.th-tabs a.on { background: var(--text); color: #fff; border-color: var(--text); }
.th-cap {
text-align: left; font-size: 12.5px; color: var(--mute);
padding: 0 0 10px; letter-spacing: .01em;
}
.th-weiter { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 4px; }
.th-methode { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 14px; max-width: 68ch; }
.th-methode summary { cursor: pointer; font-size: 14px; color: var(--dim); }
.th-methode summary:hover { color: var(--accent); }
.th-methode p { font-size: 14.5px; line-height: 1.65; color: var(--dim); margin: 12px 0 0; }
.th-caveat { color: var(--warn) !important; }
/* Was ein Satz ist, steht in der Serife. Was ein Wert, ein Label oder ein
Bedienelement ist, steht in der Grotesk. Die Regel entscheidet jeden
Zweifelsfall und ersetzt eine Schriftauswahl durch eine Setzung.
hyphens gehoert dazu: die Zeilen werden in der Serife laenger, und
"Ferienvermietungsregister" bricht sonst nirgends um. */
.gp-satz, .punkt-text, .tb-desc, .faq-e p, .oc-hinweis, .prov {
font-family: var(--serif); hyphens: auto;
}
.gp-satz, .punkt-text, .faq-e p { font-size: 17px; line-height: 1.6; max-width: 64ch; }
.tb-desc { font-size: 16.5px; line-height: 1.55; }
.kz td:first-child, .tab td:first-child { hyphens: auto; }
/* ------------------------------------------------- Gemeindeverzeichnis */
/* Die Seite war eine Tabelle mit 53 Zeilen. Jetzt ist sie eine Wand aus
Umrissen, die sich auf Zuruf umsortiert. Die Steuerung bleibt oben
stehen, damit man beim Blaettern die Zahl wechseln kann, ohne
zurueckzuscrollen. */
.ent-steuer {
position: sticky; top: var(--kopf-h); z-index: 20;
display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
padding: 14px 0 13px; margin-bottom: 22px;
background: var(--bg); border-bottom: 1px solid var(--line);
}
.ent-suche { flex: 0 0 210px; }
.ent-suche input {
width: 100%; padding: 8px 13px; font: inherit; font-size: 14px;
border: 1px solid var(--line); border-radius: 999px;
background: var(--bg-lift); color: var(--text);
}
.ent-suche input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.ent-sort { display: flex; align-items: center; gap: 8px; }
.ent-sort label {
font-family: var(--sans); font-weight: 500; font-size: 12px; color: var(--mute);
}
.ent-sort select {
font: inherit; font-size: 14px; padding: 7px 30px 7px 11px;
border: 1px solid var(--line); border-radius: 6px;
background: var(--bg); color: var(--text); cursor: pointer;
}
.ent-richtung {
font-family: var(--sans); font-size: 12px; font-weight: 500;
padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px;
background: var(--bg); color: var(--dim); cursor: pointer;
white-space: nowrap; transition: border-color .15s, color .15s;
}
.ent-richtung:hover { border-color: var(--text); color: var(--text); }
.ent-richtung span { font-weight: 700; margin-right: 3px; }
.ent-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.chip {
font-family: var(--sans); font-size: 12px; font-weight: 500;
padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px;
background: var(--bg); color: var(--dim); cursor: pointer;
transition: background .15s, color .15s, border-color .15s;
}
.chip:hover { border-color: var(--text); color: var(--text); }
.chip.an { background: var(--text); border-color: var(--text); color: #fff; }
.ent-zahl {
font-family: var(--sans); font-weight: 500; font-size: 12px; color: var(--mute);
margin: 0 0 14px;
}
.ent-gitter {
display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
gap: 1px; background: var(--line-dim);
border: 1px solid var(--line-dim); margin-bottom: 20px;
}
/* Die Kacheln stossen aneinander wie ein Raster auf Papier: eine Hairline
zwischen den Feldern, keine 53 einzeln schwebenden Kaertchen. */
.gk {
display: flex; flex-direction: column; gap: 9px;
padding: 16px 15px 14px; background: var(--bg);
text-decoration: none; color: var(--text);
transition: background .16s;
}
.gk:hover { background: var(--bg-lift); }
.gk-form {
width: 100%; height: 62px; display: block;
transition: transform .22s cubic-bezier(.2,.7,.3,1);
}
.gk-form path { fill: var(--bg-raise); stroke: var(--mute); stroke-width: .8; }
.gk:hover .gk-form { transform: scale(1.07); }
.gk:hover .gk-form path { fill: var(--text); stroke: var(--text); }
.gk-kopf { display: flex; flex-direction: column; gap: 2px; }
.gk-name { font-family: var(--serif); font-size: 18px; line-height: 1.15; letter-spacing: -0.012em; }
.gk-lage {
font-family: var(--sans); font-weight: 500; font-size: 12px; color: var(--mute);
}
.gk-wert { font-family: var(--sans); font-size: 12px; color: var(--mute); margin-top: auto; }
.gk-wert b { font-size: 19px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.gk-wert b.leer { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--mute); }
.gk-wert i { font-style: normal; }
.gk-bar { display: block; height: 2px; background: var(--bg-raise); }
.gk-bar i { display: block; height: 100%; background: var(--text); transition: width .3s cubic-bezier(.2,.7,.3,1); }
.gk-luecke .gk-bar { background: transparent; border-top: 1px dashed var(--line); }
.ent-leer { font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--mute); padding: 30px 0; }
@media (max-width: 640px) {
.ent-steuer { gap: 8px 12px; padding: 11px 0; }
.ent-suche { flex: 1 1 100%; }
.ent-chips { margin-left: 0; }
.ent-gitter { grid-template-columns: repeat(auto-fill, minmax(142px, 1fr)); }
.gk { padding: 13px 12px 11px; }
.gk-form { height: 50px; }
}
/* ------------------------------------------------------------ Bewegung */
/* Abschnitte blenden beim Erreichen ein — einmal, wenige Pixel, und nur
wenn das Betriebssystem nichts anderes sagt. Alles ohne JavaScript
Sichtbare bleibt sichtbar: die Klasse setzt erst das Skript. */
.js-auf { opacity: 0; transform: translateY(12px); }
.js-auf.sichtbar {
opacity: 1; transform: none;
transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1);
}
@media (prefers-reduced-motion: reduce) {
.js-auf, .js-auf.sichtbar { opacity: 1; transform: none; transition: none; }
.gk-form, .gk-bar i { transition: none; }
}
/* Inhaltsverzeichnis der Detailseite: markiert beim Blaettern mit, wo man
gerade ist. Ohne die Markierung ist es eine Linkliste, mit ihr eine
Ortsangabe. */
.toc a.hier { color: var(--text); border-bottom-color: var(--text); }
/* Sortierbare Tabellenkoepfe. Der Pfeil erscheint erst beim Ueberfahren,
damit die Kopfzeile im Ruhezustand ruhig bleibt. */
.sortkopf { cursor: pointer; user-select: none; position: relative; }
.sortkopf:hover, .sortkopf:focus-visible { color: var(--text); }
.sortkopf::after {
content: '↕'; font-size: 9px; margin-left: 4px; opacity: 0;
transition: opacity .15s;
}
.sortkopf:hover::after, .sortkopf:focus-visible::after { opacity: .45; }
.sortkopf[data-sort]::after { opacity: 1; }
.sortkopf[data-sort="ab"]::after { content: '↓'; }
.sortkopf[data-sort="auf"]::after { content: '↑'; }
/* ------------------------------------------------- Kopf der Detailseite */
.gp-kopf {
display: grid; grid-template-columns: minmax(0, 1fr) 190px;
gap: 40px; align-items: start; padding-bottom: 34px;
}
.gp-kopf-text { min-width: 0; }
.gp-umriss { margin: 6px 0 0; text-align: center; }
.gp-umriss svg { width: 100%; height: 150px; display: block; }
.gp-umriss path { fill: var(--bg-raise); stroke: var(--text); stroke-width: .7; }
.gp-umriss figcaption {
font-family: var(--sans); font-weight: 400; font-size: 11.5px; color: var(--mute); margin-top: 10px;
}
@media (max-width: 720px) {
/* Auf dem Telefon steht der Umriss klein ueber der Dachzeile und ohne
Bildunterschrift — sonst kaeme die Quellenangabe vor dem Titel. */
.gp-kopf { grid-template-columns: 1fr; gap: 14px; }
.gp-umriss { order: -1; text-align: left; margin: 0; }
.gp-umriss svg { height: 64px; width: auto; }
.gp-umriss figcaption { display: none; }
.lead { font-size: 18.5px; }
}
/* Das Inhaltsverzeichnis laeuft beim Blaettern mit und markiert, wo man
ist. Auf einer Seite mit fuenfzehn Abschnitten ist das der Unterschied
zwischen einem Dokument und einer Wand. */
.toc {
position: sticky; top: var(--kopf-h); z-index: 18;
background: var(--bg); overflow-x: auto; scrollbar-width: none;
}
.toc::-webkit-scrollbar { display: none; }
.toc a { border-bottom: 1px solid transparent; padding-bottom: 1px; white-space: nowrap; transition: color .15s, border-color .15s; }
/* Der Rang als Balken. Die Zahl "7 von 41" sagt dasselbe, aber erst der
Balken sagt es, ohne dass man rechnet. */
.kz-rang { position: relative; }
.kz-bar {
display: block; height: 2px; width: 82px; background: var(--bg-raise);
margin: 0 0 5px auto;
}
.kz-bar i { display: block; height: 100%; background: var(--dim); }
/* ------------------------------------------------------------ Beitraege */
/* Kein Kachelraster: drei gleich grosse Kaertchen behaupten ein Archiv,
das es noch nicht gibt. Eine Liste traegt einen Beitrag genauso wie
vierzig. */
.btr { list-style: none; margin: 0; padding: 0; max-width: 760px; }
.btr-e { border-top: 1px solid var(--line); }
.btr-e:last-child { border-bottom: 1px solid var(--line); }
.btr-e a { display: block; padding: 26px 0 28px; text-decoration: none; color: var(--text); }
.btr-e a:hover h2 { color: var(--accent); }
.btr-rub {
font-family: var(--sans); font-weight: 500; font-size: 12px; color: var(--mute);
}
.btr-e h2, .btr-e h3 {
font-family: var(--serif); font-weight: 500; font-size: 29px; line-height: 1.12;
letter-spacing: -0.018em; margin: 9px 0 8px; transition: color .15s;
}
.btr-unter {
font-family: var(--serif); font-size: 18px; line-height: 1.45;
color: var(--dim); margin: 0 0 12px;
}
.btr-meta { font-family: var(--sans); font-size: 12px; color: var(--mute); }
@media (prefers-reduced-motion: reduce) {
.karte-bild svg, .karte-bild path, .karte-bild { transition: none; }
.karte:hover .karte-bild svg { transform: none; }
}
@media (max-width: 640px) {
/* Fuenf Spalten passen auf kein Telefon. Statt die Tabelle seitlich
scrollen zu lassen — was heisst, dass man den Rang nie sieht — wird
jede Zeile ein Block: Name oben, darunter Wert, Einheit, Rang und
Abweichung als beschriftete Felder. */
.kz, .kz tbody, .kz tr, .kz td { display: block; width: auto; }
.kz thead { display: none; }
.kz caption { text-align: left; }
.kz tr { padding: 15px 0; border-bottom: 1px solid var(--line-dim); }
.kz td { padding: 0; border: none; text-align: left; }
.kz td:first-child { font-size: 15px; margin-bottom: 8px; padding: 0; }
.kz td:not(:first-child) { display: inline-block; vertical-align: top; margin-right: 20px; }
.kz td:not(:first-child):empty { display: none; }
.kz td:not(:first-child)::before {
content: attr(data-label); display: block;
font-family: var(--sans); font-weight: 500; font-size: 11.5px; color: var(--mute);
margin-bottom: 3px;
}
.kz-bar { margin: 0 0 4px; width: 62px; }
.kz-wert { font-size: 17px; }
/* Die Steuerleiste war auf dem Telefon 178 Pixel hoch und klebte oben:
ein Fuenftel des Bildschirms fuer Knoepfe. Sie scrollt jetzt mit, und
die Filter laufen in einer Zeile seitlich weiter. */
.ent-steuer { position: static; padding: 12px 0; }
.ent-sort label { display: none; }
.ent-chips {
flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
width: 100%; padding-bottom: 2px;
}
.ent-chips::-webkit-scrollbar { display: none; }
.chip { white-space: nowrap; }
}
@media (max-width: 640px) {
.leit { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.leit div { border-right: 0; margin: 0; padding: 0; min-width: 0; }
.leit dd { font-size: 21px; }
}
/* ------------------------------------------------- Artikel mit Verweisspalte */
/* Links der Artikel, rechts die Verweise. Die Spalte ist kein Beiwerk: sie
ist der Grund, warum jemand nach dieser Seite eine zweite aufschlaegt.
Vorher standen dieselben Verweise als Abschnitt am Ende einer Seite mit
fuenfzehn Abschnitten — dort erreicht sie kaum jemand.
720 Pixel Textspalte sind kein Zufall: das ist die Breite, bei der eine
Zeile in Newsreader rund 70 Zeichen traegt. */
.gp-raster {
display: grid; grid-template-columns: minmax(0, 1fr) 304px;
gap: 0 56px; align-items: start;
}
.rail {
position: sticky; top: calc(var(--kopf-h) + 16px); padding-top: 30px;
/* Bleibt die Spalte laenger als der Bildschirm, scrollt sie in sich —
sonst waere ihr unteres Ende nie erreichbar, solange sie klebt. */
max-height: calc(100vh - var(--kopf-h) - 34px); overflow-y: auto;
scrollbar-width: thin;
}
.rail-b { margin-bottom: 30px; }
.rail-b h2 {
font-family: var(--sans); font-weight: 600; font-size: 13px;
margin: 0 0 10px; padding-bottom: 8px;
border-bottom: 2px solid var(--text); color: var(--text);
}
.rail-note {
font-family: var(--serif); font-size: 14px; line-height: 1.45;
color: var(--mute); margin: 0 0 10px;
}
.rail-liste { list-style: none; margin: 0; padding: 0; }
.rail-liste li { border-bottom: 1px solid var(--line-dim); }
.rail-liste li:last-child { border-bottom: 0; }
.rail-liste a {
display: flex; gap: 12px; align-items: center;
padding: 11px 0; text-decoration: none; color: var(--text);
}
.rail-liste a:hover b { color: var(--accent); }
.rail-form { width: 40px; height: 40px; flex: 0 0 40px; }
.rail-form path { fill: var(--bg-raise); stroke: var(--mute); stroke-width: 1.2; }
.rail-liste a:hover .rail-form path { fill: var(--text); stroke: var(--text); }
.rail-txt { display: block; min-width: 0; }
.rail-txt b {
display: block; font-family: var(--serif); font-weight: 500;
font-size: 17px; line-height: 1.2; letter-spacing: -0.012em;
transition: color .15s;
}
.rail-txt em {
display: block; font-style: normal; font-family: var(--sans);
font-size: 12px; color: var(--mute); margin-top: 3px; line-height: 1.4;
}
.rail-schmal a { padding: 9px 0; }
.rail-schmal .rail-txt b { font-size: 15.5px; }
.rail-tat { background: var(--bg-lift); padding: 18px 18px 20px; margin-bottom: 8px; }
.rail-tat h2 { border-bottom: 0; padding-bottom: 0; margin-bottom: 7px; }
.rail-tat p {
font-family: var(--serif); font-size: 14.5px; line-height: 1.45;
color: var(--dim); margin: 0 0 14px;
}
.rail-knopf {
display: inline-block; background: var(--text); color: #fff;
font-family: var(--sans); font-weight: 500; font-size: 14px;
padding: 9px 18px; border-radius: 999px; text-decoration: none;
transition: background .15s;
}
.rail-knopf:hover { background: var(--accent); }
@media (max-width: 1000px) {
/* Unter tausend Pixeln steht die Spalte unter dem Artikel und klebt
nicht mehr: eine klebende Leiste unter dem Text hat nichts, woran sie
sich orientieren koennte. */
.gp-raster { grid-template-columns: minmax(0, 1fr); }
.rail {
position: static; max-height: none; overflow: visible;
padding-top: 8px; border-top: 1px solid var(--line);
display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 0 40px;
}
}
@media (max-width: 640px) {
.rail { grid-template-columns: minmax(0, 1fr); }
}
/* Ein Anker springt sonst unter die klebende Kopfleiste und das ebenso
klebende Inhaltsverzeichnis — die Ueberschrift, die man sucht, steht
dann gerade ausserhalb des Bildes. */
.thema-block, .gp [id] { scroll-margin-top: calc(var(--kopf-h) + 66px); }
/* ------------------------------------------------------ Standortprofil */
/* Sechs Achsen, auf denen der Rang steht — nicht der Wert. Die Skala ist
damit fuer alle sechs dieselbe, und der Median liegt per Definition in
der Mitte. Wer das aus der Wertespanne rechnet, setzt Balken und
Medianstrich auf zwei verschiedene Skalen; das ist beim Bauen einmal
passiert und sah plausibel aus. */
.profil { list-style: none; margin: 0 0 20px; padding: 0; max-width: 720px; }
.pf { padding: 15px 0 16px; border-top: 1px solid var(--line-dim); }
.pf:first-child { border-top: 1px solid var(--text); }
.pf-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pf-kopf b { font-family: var(--serif); font-weight: 500; font-size: 19px; letter-spacing: -0.012em; }
.pf-wert {
font-family: var(--sans); font-weight: 600; font-size: 15px;
font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pf-wert i { font-style: normal; font-weight: 400; font-size: 11.5px; color: var(--mute); }
.pf-skala { display: flex; align-items: center; gap: 10px; margin: 9px 0 7px; }
.pf-pol {
font-family: var(--sans); font-size: 11.5px; color: var(--mute);
flex: 0 0 110px; line-height: 1.25;
}
.pf-pol.r { text-align: right; }
.pf-spur {
position: relative; flex: 1 1 auto; height: 6px;
background: var(--bg-raise); border-radius: 3px;
}
.pf-balken {
position: absolute; left: 0; top: 0; bottom: 0; width: var(--p);
background: var(--accent); border-radius: 3px 0 0 3px; opacity: .22;
}
.pf-mitte { position: absolute; left: 50%; top: -4px; bottom: -4px; width: 1px; background: var(--mute); }
.pf-punkt {
position: absolute; left: var(--p); top: 50%; width: 13px; height: 13px;
margin: -6.5px 0 0 -6.5px; border-radius: 50%;
background: var(--accent); border: 2.5px solid var(--bg);
transition: transform .18s cubic-bezier(.2,.7,.3,1);
}
.pf:hover .pf-punkt { transform: scale(1.25); }
.pf-satz { display: block; font-family: var(--serif); font-size: 15.5px; color: var(--dim); }
/* ---------------------------------------------------- Versorgungskarte */
.vk { margin: 0 0 26px; max-width: 720px; }
.vk-schalter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.vk-b {
display: inline-flex; align-items: center; gap: 7px;
font-family: var(--sans); font-size: 12.5px; font-weight: 500;
padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px;
background: var(--bg); color: var(--mute); cursor: pointer;
transition: color .15s, border-color .15s;
}
.vk-b b { font-weight: 600; font-variant-numeric: tabular-nums; }
.vk-b.an { color: var(--text); border-color: var(--text); }
.vk-punkt { width: 9px; height: 9px; border-radius: 50%; background: currentColor; opacity: .35; }
.vk-b.an .vk-punkt { opacity: 1; }
.vk-punkt.vk-apo, .vk-g.vk-apo circle { color: #0a46c8; fill: #0a46c8; }
.vk-punkt.vk-bus, .vk-g.vk-bus circle { color: #6e6e6e; fill: #6e6e6e; }
.vk-punkt.vk-strand, .vk-g.vk-strand circle { color: #0b6b8a; fill: #0b6b8a; }
.vk-karte {
width: 100%; max-width: 460px; height: auto; display: block;
background: var(--bg-lift); border: 1px solid var(--line-dim);
}
.vk-form { fill: var(--bg); stroke: var(--line); stroke-width: .5; }
.vk-g circle { transition: r .15s; }
.vk-g circle:hover { r: 2.2; }
.vk-g[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
.pf-punkt, .vk-g circle { transition: none; }
}
@media (max-width: 640px) {
.pf-skala { flex-wrap: wrap; }
.pf-pol { flex: 0 0 auto; font-size: 11px; }
.pf-spur { flex: 1 1 100%; order: 3; margin-top: 6px; }
.pf-pol.r { margin-left: auto; }
}
/* Zwei Herkuenfte auf einer Karte, getrennt beschriftet. Wer die Punkte
nicht auseinanderhalten kann, haelt eine gemeinschaftliche Erhebung
fuer ein Register. */
.vk-reihe { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.vk-quelle {
font-family: var(--sans); font-weight: 600; font-size: 11.5px; color: var(--mute);
flex: 0 0 108px;
}
.vk-punkt.vk-osm-gesundheit, .vk-g.vk-osm-gesundheit circle { color: #a81f16; fill: #a81f16; }
.vk-punkt.vk-osm-einkauf, .vk-g.vk-osm-einkauf circle { color: #14622f; fill: #14622f; }
.vk-punkt.vk-osm-bildung, .vk-g.vk-osm-bildung circle { color: #7b5cd6; fill: #7b5cd6; }
.vk-punkt.vk-osm-alltag, .vk-g.vk-osm-alltag circle { color: #8a6a12; fill: #8a6a12; }
.vk-punkt.vk-osm-gastro, .vk-g.vk-osm-gastro circle { color: #b0560a; fill: #b0560a; }
.vk-g circle { opacity: .8; }
@media (max-width: 640px) {
.vk-quelle { flex: 1 1 100%; }
}
/* Die Annahmen unter den Leitzahlen: zwei Spalten, damit Begriff und Wert
auf einer Linie liegen statt untereinander zu maeandern. */
.oc-fakten {
display: grid; grid-template-columns: minmax(150px, auto) 1fr;
gap: 10px 28px; max-width: 720px; margin: 0 0 22px;
border-bottom: 1px solid var(--line-dim); padding-bottom: 20px;
}
.oc-fakten dt { font-family: var(--sans); font-size: 14px; color: var(--mute); }
.oc-fakten dd { margin: 0; font-size: 15px; font-variant-numeric: tabular-nums; }
.oc-hinweis { max-width: 660px; }
@media (max-width: 640px) {
.oc-haupt { flex-direction: column; gap: 16px; }
.oc-karte { border-right: 0; margin-right: 0; padding-right: 0; }
.oc-fakten { grid-template-columns: 1fr; gap: 3px 0; }
.oc-fakten dd { margin-bottom: 10px; }
}
/* Der Charakterabsatz: Serife, gross genug zum Lesen, Quelle klein
dahinter. Kein Kasten — es ist Text, kein Datenfeld. */
.chr { max-width: 660px; margin-bottom: 18px; }
.chr-satz {
font-family: var(--serif); font-size: 18.5px; line-height: 1.5;
color: var(--text); margin: 0 0 13px; hyphens: auto;
}
.chr-satz .punkt-quelle { display: block; margin-top: 2px; }
/* Rangbalken in der Punktespalte der Entscheidungsseiten. */
.rb { display: inline-block; width: 54px; height: 3px; background: var(--bg-raise); vertical-align: middle; margin-right: 8px; }
.rb i { display: block; height: 100%; background: var(--accent); }
.leit-link { color: var(--text); text-decoration: none; }
.leit-link:hover { color: var(--accent); }
.rail-vgl { display: block; font-family: var(--sans); font-size: 12px; color: var(--mute); text-decoration: none; margin: -6px 0 8px 52px; }
.rail-vgl:hover { color: var(--accent); }
/* Lizenz-Check: ein Feld, ein Knopf. Die Kennung in Mono — das ist eine
der wenigen Stellen, an denen Zeichen einzeln verglichen werden. */
.lz-form { display: flex; gap: 10px; max-width: 640px; margin: 0 0 8px; }
.lz-form input {
flex: 1 1 auto; font: inherit; font-size: 16px; padding: 11px 14px;
border: 1px solid var(--line); border-radius: 8px; background: var(--bg-lift);
}
.lz-form input:focus { outline: none; border-color: var(--text); box-shadow: 0 0 0 3px rgba(10,70,200,.12); }
.kennung { font-family: var(--mono); font-size: .95em; letter-spacing: .01em; }
h1 .kennung { font-size: .8em; }
/* --------------------------------------------------------- Marktlage */
.ml-einordnung {
font-family: var(--serif); font-size: 17px; line-height: 1.55;
color: var(--dim); max-width: 660px; margin: 0 0 20px;
border-left: 2px solid var(--line); padding-left: 16px; hyphens: auto;
}
/* Die Reihe der Eintragungsjahre: Saeulen, weil hier ein Verlauf die
Aussage ist und keine Rangfolge. */
.ml-reihe {
display: flex; align-items: flex-end; gap: 4px;
margin: 0 0 10px; max-width: 720px; overflow-x: auto;
}
.ml-jahr { flex: 1 1 0; min-width: 30px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ml-balken { display: block; width: 100%; height: 96px; display: flex; align-items: flex-end; }
.ml-balken i { display: block; width: 100%; background: var(--accent); opacity: .8; min-height: 1px; }
.ml-wert { font-family: var(--sans); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ml-lbl { font-family: var(--sans); font-size: 10.5px; color: var(--mute); }
/* ------------------------------------------------------ Dafür / Dagegen */
/* Zwei Karten, die sich gegenseitig relativieren. Vorher zwei Spalten
mit einer Linie darueber — die Information stand da, aber sie sah
nicht aus wie eine Antwort. Kein Haken und kein Kreuz: was hier steht,
ist eine Zahl mit Herkunft, keine Empfehlung. Wenige Ferienbetten sind
fuer den einen Ruhe und fuer den anderen ein toter Ort; der Farbpunkt
markiert die Richtung, nicht ein Urteil. */
.abw {
display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 16px; max-width: 900px; margin-bottom: 16px;
}
.abw-sp {
padding: 18px 20px 6px; border-radius: 12px;
background: var(--bg-lift); border: 1px solid var(--line-dim);
}
.abw-nein { background: #fdf6f5; border-color: rgba(168,31,22,.16); }
.abw-sp h3 {
display: flex; align-items: center; gap: 9px;
font-family: var(--sans); font-weight: 600; font-size: 13px;
margin: 0 0 14px; color: var(--pos);
}
.abw-nein h3 { color: var(--warn); }
.abw-sp h3::before {
content: ""; width: 9px; height: 9px; border-radius: 50%;
background: currentColor; flex: 0 0 9px;
}
.abw-sp ul { list-style: none; margin: 0; padding: 0; }
.abw-sp li {
font-family: var(--serif); font-size: 16.5px; line-height: 1.45;
padding: 0 0 13px; margin-bottom: 13px;
border-bottom: 1px solid var(--line-dim); hyphens: auto;
}
.abw-sp li:last-child { border-bottom: 0; }
.abw-sp li .punkt-quelle { display: block; margin-top: 4px; }
.abw-leer { font-family: var(--serif); font-style: italic; color: var(--mute); font-size: 16px; }
/* ------------------------------------------------------------ Strände */
.str-gitter { display: grid; gap: 1px; background: var(--line-dim); border: 1px solid var(--line-dim); }
.str-g {
display: grid; grid-template-columns: 168px 108px minmax(0, 1fr);
gap: 20px; align-items: center; padding: 20px 22px; background: var(--bg);
}
.str-g:not(:has(.str-bild)) { grid-template-columns: 108px minmax(0, 1fr); }
.str-bild { margin: 0; }
.str-bild img {
width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
background: var(--bg-raise);
}
.str-bild figcaption {
font-family: var(--sans); font-size: 10px; color: var(--mute);
margin-top: 5px; line-height: 1.35;
}
.str-bild figcaption a { color: var(--mute); }
.str-karte svg { width: 100%; height: auto; display: block; }
.str-punkte circle { fill: var(--cyan); opacity: .85; }
.str-g h2 { font-family: var(--serif); font-weight: 500; font-size: 24px; margin: 0 0 8px; letter-spacing: -0.015em; }
.str-g h2 a { color: var(--text); text-decoration: none; }
.str-g h2 a:hover { color: var(--accent); }
.str-n {
font-family: var(--sans); font-weight: 600; font-size: 12px; color: var(--mute);
vertical-align: middle; margin-left: 4px;
}
.str-liste {
font-family: var(--serif); font-size: 16.5px; line-height: 1.5;
color: var(--dim); margin: 0; hyphens: auto;
}
@media (max-width: 560px) {
.str-g, .str-g:not(:has(.str-bild)) { grid-template-columns: 1fr; gap: 12px; padding: 16px; }
.str-karte { max-width: 100px; }
.str-bild img { aspect-ratio: 16 / 9; }
}
/* ------------------------------------------------------ Eignungsprofil */
/* Die Frage "passt das zu mir" vor allen Zahlen. Jede Zeile klappt auf
und zeigt ihre Grundlage — eine Bewertung, die die nicht nennt, ist
eine Meinung. */
.eig { list-style: none; margin: 0 0 16px; padding: 0; max-width: 760px;
border-top: 2px solid var(--text); }
.eig-e { border-bottom: 1px solid var(--line-dim); }
.eig-e summary {
display: flex; align-items: center; gap: 14px; cursor: pointer;
padding: 13px 0; list-style: none;
}
.eig-e summary::-webkit-details-marker { display: none; }
.eig-e summary::after {
content: '+'; margin-left: auto; color: var(--mute);
font-family: var(--sans); font-size: 15px;
}
.eig-e[open] summary::after { content: '–'; }
.eig-lbl {
font-family: var(--serif); font-size: 18.5px; letter-spacing: -0.012em;
flex: 0 0 160px;
}
.eig-sterne { display: inline-flex; gap: 3px; }
.eig-sterne i {
width: 13px; height: 13px; display: block;
background: var(--bg-raise);
/* Ein Stern als CSS-Form: kein Zeichensatz, keine Grafik, und in
jedem Grad scharf. */
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.eig-sterne i.voll { background: var(--accent); }
.eig-sterne i.halb { background: linear-gradient(90deg, var(--accent) 50%, var(--bg-raise) 50%); }
.eig-zahl {
font-family: var(--sans); font-weight: 600; font-size: 12.5px;
color: var(--mute); font-variant-numeric: tabular-nums;
}
.eig-duenn { font-family: var(--serif); font-style: italic; font-size: 15.5px; color: var(--mute); }
.eig-leer .eig-lbl { color: var(--mute); }
.eig-auf { padding: 2px 0 18px; }
.eig-satz {
font-family: var(--serif); font-size: 16.5px; line-height: 1.45;
color: var(--dim); margin: 0 0 14px; max-width: 62ch;
}
@media (max-width: 560px) {
.eig-e summary { flex-wrap: wrap; gap: 8px 12px; }
.eig-lbl { flex: 1 1 100%; }
}
/* ------------------------------------------------------------- Bilder */
/* Koordinatengeprueft, mit Urheber und Lizenz an jedem Bild. Ein Raster
ohne Rahmen: die Bilder sollen den Ort zeigen, nicht ein Album. */
.bgal {
display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: 18px; margin-bottom: 16px;
}
.bgal-e { margin: 0; }
.bgal-e img {
width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block;
background: var(--bg-raise);
}
.bgal-e figcaption { margin-top: 7px; }
.bgal-e figcaption b {
display: block; font-family: var(--serif); font-weight: 500; font-size: 16px;
letter-spacing: -0.01em;
}
.bgal-e figcaption span {
display: block; font-family: var(--sans); font-size: 11px; color: var(--mute);
margin-top: 2px; line-height: 1.4;
}
.bgal-e figcaption a { color: var(--mute); }
.bgal-e figcaption a:hover { color: var(--accent); }
/* ------------------------------------------------------- Kurzprofil */
/* Bedeutung vor Zahlen: der Satz, die zwei Spalten, die vier Achsen.
Alles gerechnet, nichts getextet. */
.kp-satz {
font-family: var(--serif); font-size: 25px; line-height: 1.32;
letter-spacing: -0.014em; color: var(--text);
max-width: 30ch; margin: 0 0 26px; hyphens: auto;
}
.kp-zwei {
display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 8px 40px; max-width: 760px; margin-bottom: 30px;
}
.kp-sp h3 {
font-family: var(--sans); font-weight: 600; font-size: 12.5px;
margin: 0 0 10px; padding-bottom: 7px; border-bottom: 2px solid var(--text);
}
.kp-nein h3 { border-bottom-color: var(--warn); color: var(--warn); }
.kp-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.kp-chips a {
display: inline-flex; align-items: baseline; gap: 6px;
font-family: var(--sans); font-size: 13.5px; font-weight: 500;
padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px;
color: var(--text); text-decoration: none; transition: border-color .15s;
}
.kp-chips a:hover { border-color: var(--text); }
.kp-chips b { font-size: 11.5px; font-weight: 600; color: var(--mute); font-variant-numeric: tabular-nums; }
.kp-nein .kp-chips a { color: var(--dim); }
.kp-achsen { max-width: 620px; margin-bottom: 14px; }
.kpa {
display: grid; grid-template-columns: 110px 1fr 110px;
gap: 4px 12px; align-items: center; padding: 9px 0;
border-bottom: 1px solid var(--line-dim);
}
.kpa-pol { font-family: var(--sans); font-size: 12.5px; color: var(--mute); }
.kpa-pol.r { text-align: right; }
.kpa-spur { position: relative; height: 3px; background: var(--bg-raise); border-radius: 2px; }
.kpa-punkt {
position: absolute; left: var(--p); top: 50%; width: 12px; height: 12px;
margin: -6px 0 0 -6px; border-radius: 50%;
background: var(--text); border: 2.5px solid var(--bg);
}
.kpa-was {
grid-column: 2; font-family: var(--sans); font-size: 11px; color: var(--mute);
text-align: center; font-variant-numeric: tabular-nums;
}
@media (max-width: 560px) {
.kp-satz { font-size: 21px; max-width: none; }
.kpa { grid-template-columns: 1fr; gap: 2px; }
.kpa-pol.r { text-align: left; }
.kpa-spur { order: 3; margin: 6px 0; }
}
/* ------------------------------------------------------- Ortswahl 2.0 */
/* Vorhaben zuerst, Regler darunter. Wer zum ersten Mal ueber Mallorca
nachdenkt, weiss nicht, wie er zwoelf Kriterien gewichtet. */
.zw-form { margin-bottom: 34px; }
.zw-frage { font-family: var(--serif); font-weight: 500; font-size: 27px; margin: 0 0 16px; letter-spacing: -0.017em; }
.zw-ziele { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; padding: 0; max-width: 820px; }
.zw-ziel {
display: block; cursor: pointer;
font-family: var(--sans); font-size: 14.5px;
padding: 9px 17px; border: 1px solid var(--line); border-radius: 999px;
color: var(--dim); transition: border-color .15s, color .15s, background .15s;
}
.zw-ziel input { position: absolute; opacity: 0; width: 0; height: 0; }
.zw-ziel:hover { border-color: var(--text); color: var(--text); }
.zw-ziel.an { background: var(--text); border-color: var(--text); color: #fff; }
.zw-neu { margin-left: 16px; }
.zw-erg { border-top: 2px solid var(--text); padding-top: 22px; margin-bottom: 40px; }
.zw-du { font-family: var(--serif); font-size: 19px; color: var(--dim); margin: 0 0 22px; }
.zw-du b { color: var(--text); font-weight: 500; }
.zw-liste { list-style: none; margin: 0 0 26px; padding: 0; max-width: 760px; counter-reset: zw; }
.zw-t { border-bottom: 1px solid var(--line-dim); padding: 16px 0; }
.zw-kopf { display: flex; align-items: baseline; gap: 14px; }
.zw-rang {
font-family: var(--sans); font-weight: 600; font-size: 13px; color: var(--mute);
flex: 0 0 20px; font-variant-numeric: tabular-nums;
}
.zw-t h3 { font-family: var(--serif); font-weight: 500; font-size: 24px; margin: 0; letter-spacing: -0.015em; }
.zw-t h3 a { color: var(--text); text-decoration: none; }
.zw-t h3 a:hover { color: var(--accent); }
.zw-score {
margin-left: auto; font-family: var(--sans); font-weight: 600; font-size: 22px;
font-variant-numeric: tabular-nums;
}
.zw-score small { font-size: 12px; font-weight: 400; color: var(--mute); }
.zw-fuer, .zw-aber {
font-family: var(--serif); font-size: 16px; line-height: 1.45;
margin: 7px 0 0 34px; color: var(--dim);
}
.zw-fuer b, .zw-aber b { font-family: var(--sans); font-weight: 600; font-size: 12px; }
.zw-aber b { color: var(--warn); }
.zw-auch { font-family: var(--serif); font-size: 17px; line-height: 1.7; max-width: 700px; }
.zw-genauer {
font-family: var(--serif); font-weight: 500; font-size: 24px;
margin: 34px 0 16px; padding-top: 24px; border-top: 1px solid var(--line);
letter-spacing: -0.015em;
}
@media (max-width: 560px) {
.zw-kopf { flex-wrap: wrap; }
.zw-score { margin-left: 34px; }
.zw-fuer, .zw-aber { margin-left: 0; }
}
/* ==========================================================================
Startseite, zweite Fassung
==========================================================================
Vorher hatte alles ungefaehr dieselbe visuelle Wichtigkeit: Ueberschrift,
Daten, Links — sieben Mal untereinander. Wer die Seite oeffnete, sah
einen gleichfoermigen Strom und wusste nicht, was das Wichtigste ist.
Die Hierarchie unten ist deshalb absichtlich unruhig: eine sehr grosse
Zahl, eine sehr grosse Karte, und dazwischen ruhige Baender.
========================================================================== */
/* -------------------------------------------------------- Hero, Ergaenzung */
/* Die Dachzeile traegt jetzt fuenf Begriffe statt eines Wortes — mit
.18em Sperrung waere das eine Zeile ueber die halbe Breite. Enger
gesperrt und etwas kleiner bleibt sie eine Dachzeile und wird nicht
zur zweiten Ueberschrift. */
.hero2-kicker {
font-family: var(--sans); font-size: 11.5px; font-weight: 600;
letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
margin: 0 0 16px; max-width: 34em; line-height: 1.5;
}
.hero2-lead {
font-family: var(--sans); font-size: 15px; font-weight: 500;
letter-spacing: .04em; color: var(--dim); margin-top: 18px;
}
/* Die Suche ist der Haupteinstieg und bekommt eine echte Frage darueber —
ein Platzhaltertext allein wird beim Tippen unsichtbar. */
.ss-label {
display: block; font-family: var(--serif); font-size: 19px;
color: var(--text); margin-bottom: 10px;
}
.hero2-wege {
display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 22px;
}
.hero2-wege a {
font-family: var(--sans); font-size: 14px; font-weight: 500;
color: var(--accent); text-decoration: none;
}
.hero2-wege a:hover { text-decoration: underline; }
/* ------------------------------------------------------------- Die Zusage */
/* Das Alleinstellungsmerkmal stand bisher als Nebensatz in der Vorzeile.
Es ist der einzige Unterschied zu einem Portal, den jemand in zwei
Sekunden versteht — also bekommt es ein eigenes Band. */
.zusage { background: var(--text); color: #fff; }
.zusage-in { padding: 42px 0; display: grid; gap: 10px; }
.zusage-satz {
font-family: var(--serif); font-weight: 500; font-size: clamp(26px, 3.4vw, 40px);
letter-spacing: -.02em; line-height: 1.12; margin: 0;
}
.zusage-unter {
font-family: var(--sans); font-size: 16px; line-height: 1.55;
color: rgba(255,255,255,.72); max-width: 46em; margin: 0;
}
.zusage-mehr {
font-family: var(--sans); font-size: 14px; font-weight: 500;
color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.4);
justify-self: start; padding-bottom: 2px; margin-top: 4px;
}
.zusage-mehr:hover { border-bottom-color: #fff; }
/* -------------------------------------------------------- Datengeschichten */
.dg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
background: var(--line-dim); border-block: 1px solid var(--line-dim); }
.dg-e { background: var(--bg); }
.dg-link {
display: flex; flex-direction: column; height: 100%;
padding: 30px 28px 28px; text-decoration: none; color: inherit;
transition: background .15s;
}
.dg-link:hover { background: var(--bg-lift); }
.dg-rub {
font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em;
text-transform: uppercase; color: var(--mute); margin: 0 0 14px;
}
.dg-e h3 {
font-family: var(--serif); font-weight: 500; font-size: 23px; line-height: 1.22;
letter-spacing: -.015em; color: var(--text); margin: 0;
}
/* Die Schlagzahl. Sie ist der Grund, warum jemand haengen bleibt — also
traegt sie hier mehr Gewicht als die Ueberschrift darueber. */
.dg-zahl { margin: 22px 0 16px; }
.dgz-paar { display: flex; align-items: baseline; gap: 14px; }
.dgz-teil { display: flex; flex-direction: column; }
.dgz-teil b {
font-family: var(--serif); font-weight: 500; font-size: 46px; line-height: 1;
letter-spacing: -.03em; color: var(--text); font-variant-numeric: tabular-nums;
}
.dgz-teil i {
font-style: normal; font-family: var(--mono); font-size: 11px;
color: var(--mute); margin-top: 5px;
}
.dgz-pfeil { font-size: 24px; color: var(--mute); align-self: center; }
.dgz-gross {
font-family: var(--serif); font-weight: 500; font-size: 52px; line-height: 1;
letter-spacing: -.03em; color: var(--text); font-variant-numeric: tabular-nums;
display: inline-flex; align-items: baseline; gap: 9px;
}
.dgz-gross i {
font-style: normal; font-family: var(--sans); font-size: 15px;
font-weight: 500; color: var(--mute);
}
.dgz-delta {
display: inline-block; margin-top: 12px; padding: 3px 9px;
background: var(--bg-raise); border-radius: 3px;
font-family: var(--mono); font-size: 12px; color: var(--accent-d);
}
.dgz-was {
display: block; margin-top: 10px; font-family: var(--sans); font-size: 13px;
line-height: 1.45; color: var(--mute);
}
.dg-satz {
font-size: 15px; line-height: 1.55; color: var(--dim); margin: 0 0 18px;
}
.dg-mehr {
margin-top: auto; font-family: var(--sans); font-size: 13.5px;
font-weight: 500; color: var(--accent);
}
@media (max-width: 900px) {
.dg { grid-template-columns: 1fr; }
}
/* ------------------------------------------------------------- Inselkarte */
/* Fuenf Stufen einer Farbe, kein stufenloser Verlauf: ein Verlauf sieht
praeziser aus, als die Daten sind, und niemand liest aus einem Blauton
einen Eurobetrag. Die Skala ist einfarbig (sequenziell) — zwei Farben
wuerden eine Mitte behaupten, die es bei "Einwohner" nicht gibt. */
.ik { --s0:#eef3fc; --s1:#cfdef5; --s2:#a5c0ea; --s3:#6b93da; --s4:#0a46c8;
--sx:#e9eaec; }
.ik-schalter {
display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px;
}
.ik-tab {
font-family: var(--sans); font-size: 13.5px; font-weight: 500;
padding: 8px 15px; border: 1px solid var(--line); border-radius: 999px;
background: var(--bg); color: var(--dim); cursor: pointer;
transition: background .12s, color .12s, border-color .12s;
}
.ik-tab:hover { border-color: var(--text); color: var(--text); }
.ik-tab.on { background: var(--text); border-color: var(--text); color: #fff; }
.ik-buehne {
display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px;
align-items: start;
}
.ik-svg { width: 100%; height: auto; display: block; }
.ik-svg path {
fill: var(--sx); stroke: #fff; stroke-width: 1.4; stroke-linejoin: round;
transition: fill .18s;
}
.ik-svg a:hover path { stroke: var(--text); stroke-width: 2.4; }
.ik-svg a:focus-visible path { stroke: var(--text); stroke-width: 3; outline: none; }
/* Die Faerbung haengt an einer Klasse am