/* ==========================================================================
www.bitinformer.com -- Grundgeruest
HELL IST DIE VORGABE. Jede Krypto-Seite ist dunkel mit Neon, und genauso
sehen die Betrugsseiten aus. Wer Anfaengern erklaert, worauf sie
hereinfallen koennen, sollte nicht aussehen wie die, vor denen er warnt.
Wer lieber dunkel liest, stellt um -- das ist eine Vorliebe, keine Aussage.
DREI ZUSTAENDE, NICHT ZWEI. Der dritte wird fast immer vergessen:
nichts gewaehlt kein data-theme am -> prefers-color-scheme
hell gewaehlt data-theme="light" -> hell, auch bei dunklem OS
dunkel gewaehlt data-theme="dark" -> dunkel, auch bei hellem OS
"Nichts gewaehlt" ist der Normalfall, denn niemand stellt etwas ein, bevor
er weiss, dass er etwas einstellen kann.
DARAUS FOLGT DIE REGEL FUER DIESE DATEI: jede Farbe wird zuerst im hellen
:root definiert. Die beiden anderen Bloecke ueberschreiben nur. Eine Farbe,
die es ausschliesslich im Dunkel-Block gibt, fehlt im dritten Zustand --
und dann steht dunkle Schrift auf dunklem Grund.
Bauteile greifen ausschliesslich auf Tokens zu, nie auf feste Farben.
========================================================================== */
/* --- Hell: die vollstaendige Palette ------------------------------------- */
:root {
color-scheme: light;
--grund: #faf7f2; /* warmes Papier, kein reines Weiss */
--karte: #ffffff;
--karte-2: #f4efe7;
--linie: #e6e0d6;
--linie-weich: #f0ece4;
--text: #1a1815;
--text-2: #5f5b54;
--text-3: #6e6960; /* 5,1:1 auf --grund */
--btc: #a85500; /* Bitcoin-Orange, fuer hellen Grund abgedunkelt */
--btc-bg: #fdf0e0;
--btc-linie: #f3d9b8;
--btc-text: #ffffff; /* Schrift auf --btc */
--ja: #146c43;
--ja-bg: #e4f4ea;
--ja-linie: #bfe3cd;
--acht: #8a5a00;
--acht-bg: #fdf3dd;
--acht-linie: #f0dcae;
--nein: #a52a1e;
--nein-bg: #fbe9e6;
--nein-linie: #f2cdc7;
/* DER SCHWEBENDE KNOPF BRAUCHT EIGENE TOKENS, und zwar genau einen fuer
die Flaeche und einen fuer den Rand. Er liegt als einziges Bauteil NICHT
im Fluss, also grenzt ihn kein Nachbar ab -- was ihn sichtbar macht,
muss er selbst mitbringen. Mit --karte und --linie ging das im Hellen
gut und im Dunkeln gar nicht: #171a21 auf #101217 sind 1,2:1, und der
Schatten ist dort Schwarz auf Fast-Schwarz. Sichtbar war er also nur,
solange die Seite hell war. */
--schweber: #ffffff;
--schweber-rand: #b5ada0;
--radius: 10px;
--radius-s: 7px;
--schatten: 0 1px 2px rgba(26, 24, 21, 0.04), 0 6px 20px rgba(26, 24, 21, 0.06);
/* Kante um die Muenzplaketten. Die Markenfarben sind gesetzt, nicht
waehlbar -- BNBs Gelb kommt auf hellem Papier auf 1,7:1, XRPs
Fast-Schwarz auf dunklem Grund auf 1,3. Ohne Ring zerfliesst die
Scheibe im Untergrund. */
--marke-ring: rgba(26, 24, 21, 0.18);
--disp: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
--sans: "IBM Plex Sans", system-ui, "Segoe UI", sans-serif;
--mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
}
/* --- Dunkel: nur die Werte, die sich aendern ----------------------------- */
/* Systemvorgabe. Guard, damit eine ausdrueckliche Wahl fuer hell gewinnt. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
--grund: #101217;
--karte: #171a21;
--karte-2: #1e222a;
--linie: #262a33;
--linie-weich: #1e222a;
--text: #e9e6e0;
--text-2: #a9aab3;
--text-3: #8b8d97;
--btc: #ffa93a;
--btc-bg: #2a1f10;
--btc-linie: #4a381f;
--btc-text: #14100a;
--ja: #57d894;
--ja-bg: #14291f;
--ja-linie: #26503a;
--acht: #f2c14e;
--acht-bg: #2a2312;
--acht-linie: #4a3f1d;
--nein: #ff8b7d;
--nein-bg: #2b1815;
--nein-linie: #4d2a24;
/* Deutlich heller als --karte, und ein Rand, der wirklich einer ist:
im Dunkeln macht nicht der Schatten das Schweben, sondern die Kante. */
--schweber: #232833;
--schweber-rand: #6f7787;
--schatten: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(0, 0, 0, 0.35);
--marke-ring: rgba(233, 230, 224, 0.24);
}
}
/* Ausdrueckliche Wahl. Steht nach dem Medienblock, damit sie auch gegen ein
helles System gewinnt. */
:root[data-theme="dark"] {
color-scheme: dark;
--grund: #101217;
--karte: #171a21;
--karte-2: #1e222a;
--linie: #262a33;
--linie-weich: #1e222a;
--text: #e9e6e0;
--text-2: #a9aab3;
--text-3: #8b8d97;
--btc: #ffa93a;
--btc-bg: #2a1f10;
--btc-linie: #4a381f;
--btc-text: #14100a;
--ja: #57d894;
--ja-bg: #14291f;
--ja-linie: #26503a;
--acht: #f2c14e;
--acht-bg: #2a2312;
--acht-linie: #4a3f1d;
--nein: #ff8b7d;
--nein-bg: #2b1815;
--nein-linie: #4d2a24;
--schweber: #232833;
--schweber-rand: #6f7787;
--schatten: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(0, 0, 0, 0.35);
--marke-ring: rgba(233, 230, 224, 0.24);
}
/* --- Grundlagen ---------------------------------------------------------- */
* {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
background: var(--grund);
color: var(--text);
font-family: var(--sans);
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
h1,
h2,
h3 {
font-family: var(--disp);
margin: 0;
letter-spacing: -0.02em;
text-wrap: balance;
}
h1 {
font-size: clamp(1.7rem, 4vw, 2.3rem);
font-weight: 800;
line-height: 1.1;
}
h2 {
font-size: 1.25rem;
font-weight: 800;
}
h3 {
font-size: 1rem;
font-weight: 800;
}
p {
margin: 0;
}
a {
color: var(--btc);
text-underline-offset: 2px;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
outline: 2px solid var(--btc);
outline-offset: 2px;
}
.mono {
font-family: var(--mono);
font-variant-numeric: tabular-nums;
}
.huelle {
max-width: 1100px;
margin: 0 auto;
padding: 0 20px 80px;
}
/* --- Kopfzeile ----------------------------------------------------------- */
.kopf {
position: sticky;
top: 0;
z-index: 20;
background: var(--grund);
border-bottom: 1px solid var(--linie);
}
/* ZWEI REIHEN SEIT DEM 29.08.2026: oben Wortmarke und Suchfeld, darunter
das Menue.
Vorher stand alles in EINER Reihe, und daran hing die ganze Not beim
Suchfeld (die Anlaeufe stehen bei .suchknopf): Logo, neun Menuepunkte
und ein Feld nebeneinander gehen sich bei 900 px nicht aus, also musste
das Feld schmal bleiben und durfte erst ab 1020 px breit werden.
Mit der eigenen Reihe teilt sich das Feld den Platz nur noch mit der
Wortmarke. Es darf deshalb wachsen, ohne irgendetwas umzubrechen -- und
das Menue bekommt gleichzeitig Luft fuer weitere Punkte, statt bei jedem
neuen enger zu werden. */
.kopf-innen {
max-width: 1100px;
margin: 0 auto;
padding: 11px 20px;
display: flex;
flex-direction: column;
gap: 9px;
}
.kopf-reihe {
display: flex;
align-items: center;
gap: 16px;
}
/* Der einzige gefuellte Knopf in der Kopfleiste, und der soll er auch
bleiben: Ein zweiter oranger Knopf daneben halbiert die Wirkung von
beiden.
Er fuehrt auf eine Seite OHNE Partnerlinks -- das ist keine Kleinigkeit,
sondern die Bedingung dafuer, dass er hier stehen darf. Ein oranger
Knopf, der auf eine provisionsfinanzierte Liste zeigt, waere Werbung,
und /ueber-uns/ sagt zu, dass es die hier nicht gibt.
`flex: 0 0 auto` und `margin-left: auto`: Er schrumpft nicht und wird
nach rechts geschoben, das Suchfeld nimmt den Platz dazwischen. */
.kopf-cta {
flex: 0 0 auto;
margin-left: auto;
padding: 8px 15px;
border-radius: 999px;
background: var(--btc);
color: var(--btc-text);
font-size: 0.86rem;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
border: 1px solid var(--btc);
}
.kopf-cta:hover {
filter: brightness(1.07);
}
.kopf-cta:focus-visible {
outline: 2px solid var(--btc);
outline-offset: 2px;
}
/* Schmal wird die Kopfreihe eng: Logo, Suchlupe und Knopf gleichzeitig
sind zu viel. Der Knopf kuerzt sich dann auf das Wort, das ihn traegt --
"vergleichen" ist die Erklaerung, "Börsen" die Sache. */
@media (max-width: 620px) {
.kopf-cta {
padding: 7px 12px;
font-size: 0.82rem;
}
.kopf-cta .lang {
position: absolute;
left: -9999px;
}
/* DAS MENUE WISCHT STATT ZU STAPELN.
Mit zehn Punkten brach es auf 375 px in DREI Zeilen um, und weil die
Kopfleiste klebt, waren das 173 px -- ein Fuenftel des Bildschirms,
dauerhaft weg, waehrend man liest. Eine wischbare Zeile bringt das
auf rund 100 px zurueck, ohne die Leiste loesen zu muessen.
Der Rand rechts ist Absicht: ein angeschnittener Punkt am Rand ist
das Einzige, was zuverlaessig zeigt, dass es weitergeht.
`.kopf .nav` STATT `.nav` -- und das ist kein Schoenheitsfehler:
Dieser Block steht in der Datei VOR `.nav { flex-wrap: wrap }`, und
bei gleicher Spezifitaet gewinnt die spaetere Regel. Mit blossem
`.nav` blieb das Menue dreizeilig, ohne dass irgendwo etwas
Auffaelliges stand. */
.kopf .nav {
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
padding-right: 22px;
-webkit-overflow-scrolling: touch;
}
.kopf .nav::-webkit-scrollbar {
display: none;
}
}
/* Die Wortmarke mit dem Zeichen davor.
Das Zeichen kommt als CSS-Maske, nicht als ![]()
und nicht inline:
- als ![]()
koennte es die Themenfarbe nicht erben; --btc ist in hell
(#a85500) und dunkel (#ffa93a) verschieden.
- inline muesste das SVG samt Maske in jede einzelne Seite kopiert
werden, und die Masken-id kollidierte bei mehreren Vorkommen.
Als Maske zaehlt nur der Alphakanal der Datei -- die Farbe kommt aus
background und damit aus dem Token. Eine Datei, drei Themenzustaende. */
.logo {
display: inline-flex;
align-items: center;
font-family: var(--disp);
font-weight: 800;
font-size: 1.12rem;
letter-spacing: -0.025em;
color: var(--text);
text-decoration: none;
}
.logo i {
font-style: normal;
color: var(--btc);
}
/* Abstand als margin am Zeichen, NICHT als gap am Flex-Container.
Mit gap wurde auch der Textknoten "bit" zu einem eigenen Flex-Element --
die Luecke landete mitten im Wort, "bit informer" statt "bitinformer".
Die um die Wortmarke haelt sie ausserdem als eine Einheit
zusammen, egal was am Container noch dazukommt. */
.logo::before {
content: "";
width: 21px;
height: 21px;
margin-right: 9px;
flex: 0 0 auto;
background: var(--btc);
-webkit-mask: url("/img/marke.svg") center / contain no-repeat;
mask: url("/img/marke.svg") center / contain no-repeat;
}
.nav {
display: flex;
gap: 3px;
flex-wrap: wrap;
}
.nav a {
font-size: 0.88rem;
font-weight: 500;
color: var(--text-2);
text-decoration: none;
padding: 6px 11px;
border-radius: var(--radius-s);
/* Anker fuer .nav-abzeichen am Menuepunkt "News" -- steht hier und nicht
weiter unten bei der Abzeichen-Regel, damit nicht zwei Regeln fuer
denselben Selektor durch die Datei verteilt sind. */
position: relative;
}
.nav a:hover {
background: var(--karte-2);
color: var(--text);
}
.nav a[aria-current="page"] {
color: var(--btc);
background: var(--btc-bg);
}
/* --- Themenschalter ------------------------------------------------------
ER STAND IN DER KOPFLEISTE und war dort die lauteste Stelle: eine Pille
mit drei Woertern neben acht Navigationspunkten, fuer eine Entscheidung,
die man einmal trifft. Jetzt sitzt er wie drueben auf realityexplorer
fest unten rechts, ausserhalb des Leseflusses. Warum aus drei Woertern
eines geworden ist, ohne dass "System" verlorengeht, steht in thema.js.
Das Markup entsteht dort und steht in keiner HTML-Datei -- position:
fixed braucht keinen Platz im Fluss, und so traegt ihn jede Seite, ohne
dass er in fuenf Werkzeugseiten und in huelle() gepflegt werden muss. */
.thema-schalter {
position: fixed;
right: 16px;
bottom: 16px;
z-index: 9;
display: flex;
align-items: center;
gap: 7px;
font-family: var(--sans);
font-size: 0.82rem;
font-weight: 600;
line-height: 1;
padding: 0 15px;
/* 44 px, damit der Knopf am Finger zu treffen ist -- unten rechts liegt
er auf dem Telefon genau im Daumenbereich. */
min-height: 44px;
border-radius: 999px;
cursor: pointer;
color: var(--text);
background: var(--schweber);
border: 1px solid var(--schweber-rand);
box-shadow: var(--schatten);
}
.thema-schalter:hover {
border-color: var(--text-3);
}
.thema-schalter svg {
flex-shrink: 0;
color: var(--text-3);
}
/* Auf Papier hat ein Schalter nichts verloren. */
@media print {
.thema-schalter {
display: none !important;
}
}
/* --- Karten und Kennzahlen ----------------------------------------------- */
.kennzahlen {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
gap: 12px;
}
.karte {
background: var(--karte);
border: 1px solid var(--linie);
border-radius: var(--radius);
padding: 16px 17px;
}
.kz-label {
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
color: var(--text-3);
margin-bottom: 7px;
}
.kz-wert {
font-family: var(--mono);
font-variant-numeric: tabular-nums;
font-size: 1.5rem;
font-weight: 500;
letter-spacing: -0.02em;
line-height: 1.1;
color: var(--text);
}
.kz-wert em {
font-style: normal;
font-size: 0.7rem;
color: var(--text-2);
}
.kz-wert.hell {
color: var(--btc);
}
.kz-neben {
font-family: var(--mono);
font-size: 0.73rem;
color: var(--text-3);
margin-top: 6px;
}
.kz-neben.hoch {
color: var(--ja);
}
.kz-neben.runter {
color: var(--nein);
}
/* Wartezustand: die Kachel steht schon, die Zahl fehlt noch. Besser als eine
springende Anordnung, sobald die Daten kommen. */
.kz-wert[data-warte]::after {
content: "–";
color: var(--text-3);
}
/* --- Tafeln -------------------------------------------------------------- */
.tafeln {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 12px;
margin-top: 12px;
}
.tafel-kopf {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
margin-bottom: 12px;
}
.tafel-kopf h3 {
font-family: var(--sans);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
color: var(--text-3);
}
.tafel-kopf span {
font-family: var(--mono);
font-size: 0.86rem;
color: var(--text);
}
.balken {
height: 7px;
border-radius: 4px;
background: var(--linie-weich);
overflow: hidden;
margin: 11px 0 8px;
}
.balken i {
display: block;
height: 100%;
background: var(--btc);
}
/* --- Werkzeugliste ------------------------------------------------------- */
.werkzeuge {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 11px;
margin-top: 12px;
}
.werkzeug {
display: block;
background: var(--karte);
border: 1px solid var(--linie);
border-radius: var(--radius-s);
padding: 14px 15px;
text-decoration: none;
color: inherit;
}
.werkzeug:hover {
border-color: var(--btc);
}
.werkzeug b {
display: block;
font-size: 0.95rem;
font-weight: 600;
color: var(--text);
}
.werkzeug span {
display: block;
font-size: 0.82rem;
color: var(--text-2);
margin-top: 3px;
}
.werkzeug.bald {
opacity: 0.62;
pointer-events: none;
}
.werkzeug.bald b::after {
content: "bald";
float: right;
font-family: var(--mono);
font-size: 0.66rem;
font-weight: 400;
color: var(--text-3);
border: 1px solid var(--linie);
border-radius: 999px;
padding: 0 7px;
}
/* --- Hinweise ------------------------------------------------------------ */
.hinweis {
border-radius: var(--radius-s);
padding: 13px 15px;
font-size: 0.88rem;
line-height: 1.5;
background: var(--btc-bg);
border: 1px solid var(--btc-linie);
color: var(--text);
}
.hinweis.gut {
background: var(--ja-bg);
border-color: var(--ja-linie);
}
.hinweis.acht {
background: var(--acht-bg);
border-color: var(--acht-linie);
}
.hinweis.warn {
background: var(--nein-bg);
border-color: var(--nein-linie);
}
.hinweis b {
font-weight: 600;
}
/* --- Fuss ---------------------------------------------------------------- */
.fuss {
margin-top: 34px;
padding-top: 18px;
border-top: 1px solid var(--linie);
display: flex;
justify-content: space-between;
gap: 18px;
flex-wrap: wrap;
font-size: 0.8rem;
color: var(--text-3);
}
.fuss a {
color: var(--text-2);
}
.abschnitt {
margin-top: 30px;
}
.abschnitt > h2 {
margin-bottom: 12px;
}
@media (max-width: 820px) {
.tafeln {
grid-template-columns: 1fr;
}
}
@media (prefers-reduced-motion: reduce) {
* {
transition: none !important;
animation: none !important;
}
}
/* --- Rechner ------------------------------------------------------------- */
.rechner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
align-items: start;
margin-top: 20px;
}
.eingabe-spalte,
.ergebnis-spalte {
display: flex;
flex-direction: column;
gap: 12px;
}
/* Die Ergebnisspalte bleibt beim Scrollen stehen -- man aendert oben etwas
und will unten sehen, was daraus wird, ohne zu springen. */
.ergebnis-spalte {
position: sticky;
top: 74px;
}
.wahlfeld {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 7px;
margin-top: 4px;
}
.wahlfeld.senkrecht {
grid-template-columns: 1fr;
}
.wahl {
font-family: var(--sans);
text-align: left;
background: var(--grund);
border: 1px solid var(--linie);
border-radius: var(--radius-s);
padding: 9px 11px;
cursor: pointer;
color: var(--text-2);
}
.wahl:hover {
border-color: var(--btc);
}
.wahl b {
display: block;
font-size: 0.88rem;
font-weight: 600;
color: var(--text);
}
.wahl span {
display: block;
font-family: var(--mono);
font-size: 0.72rem;
color: var(--text-3);
margin-top: 2px;
}
.wahl[aria-pressed="true"] {
border-color: var(--btc);
background: var(--btc-bg);
}
.wahl[aria-pressed="true"] b {
color: var(--btc);
}
.wahl.breit {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
}
.wahl.breit span {
margin-top: 0;
text-align: right;
}
.fussnote {
font-size: 0.8rem;
color: var(--text-3);
margin-top: 10px;
line-height: 1.45;
}
.zaehler-zeile {
display: flex;
justify-content: space-between;
align-items: center;
gap: 14px;
padding: 11px 0;
border-bottom: 1px solid var(--linie-weich);
}
.zaehler-zeile:first-of-type {
margin-top: 4px;
}
.zaehler-zeile > span:first-child {
font-size: 0.9rem;
color: var(--text);
}
.zaehler-zeile em {
display: block;
font-style: normal;
font-size: 0.76rem;
color: var(--text-3);
}
.zaehler {
display: inline-flex;
align-items: center;
gap: 2px;
background: var(--grund);
border: 1px solid var(--linie);
border-radius: 999px;
padding: 2px;
flex: none;
}
.zaehler button {
width: 30px;
height: 28px;
font-size: 1rem;
line-height: 1;
color: var(--text-2);
background: transparent;
border: 0;
border-radius: 999px;
cursor: pointer;
}
.zaehler button:hover {
background: var(--karte-2);
color: var(--text);
}
.zaehler b {
font-family: var(--mono);
font-variant-numeric: tabular-nums;
font-size: 0.95rem;
font-weight: 500;
min-width: 22px;
text-align: center;
}
.ergebnis-gross {
font-family: var(--mono);
font-variant-numeric: tabular-nums;
font-size: 2.6rem;
font-weight: 500;
letter-spacing: -0.035em;
line-height: 1;
color: var(--text);
margin: 4px 0 8px;
}
.ergebnis-gross em {
font-style: normal;
font-size: 1rem;
color: var(--text-2);
letter-spacing: 0;
}
.zeilen {
margin-top: 16px;
border-top: 1px solid var(--linie-weich);
}
.zeile {
display: flex;
justify-content: space-between;
gap: 14px;
padding: 9px 0;
border-bottom: 1px solid var(--linie-weich);
font-size: 0.9rem;
}
.zeile:last-child {
border-bottom: 0;
}
.zeile > span:first-child {
color: var(--text-2);
}
.zeile > span:last-child {
font-family: var(--mono);
font-variant-numeric: tabular-nums;
color: var(--text);
}
.zeile.hell > span:last-child {
color: var(--btc);
font-weight: 500;
}
@media (max-width: 860px) {
.rechner {
grid-template-columns: 1fr;
}
.ergebnis-spalte {
position: static;
}
}
/* --- Magazin ------------------------------------------------------------- */
.marke-klein {
display: inline-block;
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.09em;
font-weight: 600;
color: var(--btc);
background: var(--btc-bg);
border: 1px solid var(--btc-linie);
border-radius: 999px;
padding: 2px 10px;
margin-bottom: 14px;
}
.artikelliste {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 12px;
}
.artikel-karte {
display: block;
background: var(--karte);
border: 1px solid var(--linie);
border-radius: var(--radius);
padding: 17px 18px;
text-decoration: none;
color: inherit;
}
.artikel-karte:hover {
border-color: var(--btc);
}
.artikel-datum {
display: block;
font-family: var(--mono);
font-size: 0.72rem;
color: var(--text-3);
margin-bottom: 7px;
}
.artikel-karte b {
display: block;
font-family: var(--disp);
font-size: 1.02rem;
font-weight: 800;
letter-spacing: -0.015em;
line-height: 1.25;
color: var(--text);
}
.artikel-anriss {
display: block;
font-size: 0.86rem;
color: var(--text-2);
margin-top: 8px;
line-height: 1.5;
}
/* --- Ein Artikel --------------------------------------------------------- */
.artikel {
max-width: 42rem;
margin: 0 auto;
}
.artikel-kopf {
padding: 14px 0 22px;
border-bottom: 1px solid var(--linie);
margin-bottom: 26px;
}
.artikel-kopf h1 {
font-size: clamp(1.8rem, 4.5vw, 2.5rem);
line-height: 1.08;
}
.artikel-meta {
font-family: var(--mono);
font-size: 0.78rem;
color: var(--text-3);
margin-top: 12px;
}
/* Fliesstext. Abstaende ueber gap statt ueber Margins an jedem Element --
so koennen sie nicht zusammenfallen oder sich verdoppeln. */
.prosa {
display: flex;
flex-direction: column;
gap: 20px;
font-size: 1.06rem;
line-height: 1.72;
}
.prosa > * {
margin: 0;
}
.prosa h2,
.prosa h3,
.prosa h4 {
font-family: var(--disp);
letter-spacing: -0.02em;
line-height: 1.2;
margin-top: 14px;
}
.prosa h2 {
font-size: 1.5rem;
font-weight: 800;
}
.prosa h3 {
font-size: 1.22rem;
font-weight: 800;
}
.prosa h4 {
font-size: 1.05rem;
font-weight: 800;
}
.prosa ul,
.prosa ol {
padding-left: 1.3em;
display: flex;
flex-direction: column;
gap: 7px;
}
.prosa li {
padding-left: 3px;
}
.prosa strong {
font-weight: 600;
}
.prosa a {
color: var(--btc);
}
.prosa code {
font-family: var(--mono);
font-size: 0.88em;
background: var(--karte-2);
border: 1px solid var(--linie);
border-radius: 4px;
padding: 0.08em 0.36em;
}
.prosa blockquote {
border-left: 3px solid var(--btc);
background: var(--btc-bg);
border-radius: 0 var(--radius-s) var(--radius-s) 0;
padding: 13px 17px;
color: var(--text-2);
}
/* Tabellen: eigener Rahmen mit waagerechtem Scrollen, damit eine breite
Tabelle nie die ganze Seite seitwaerts schiebt.
DIE REGELN HAENGEN AM RAHMEN, NICHT AN .prosa. Bis zum 12.09.2026 stand
hier ".prosa table". Den Fliesstext-Wrapper .prosa gibt es aber nur auf
den gebauten Beitragsseiten -- die Werkzeugseiten im Wurzelverzeichnis
(Steuerrechner, Haltefrist, Sparplan, Adresse pruefen) schreiben ihr HTML
selbst und haben keinen. Deren Tabellen standen deshalb voellig
unformatiert da: keine Innenabstaende, keine Trennlinien, aneinander
klebende Zellen. .tabelle-rahmen steht dagegen um jede Tabelle der Seite
-- markdown.mjs setzt ihn im Fliesstext, die Werkzeugseiten von Hand. */
.tabelle-rahmen {
overflow-x: auto;
border: 1px solid var(--linie);
border-radius: var(--radius);
background: var(--karte);
}
.tabelle-rahmen table {
border-collapse: collapse;
width: 100%;
font-size: 0.92rem;
line-height: 1.5;
}
.tabelle-rahmen th,
.tabelle-rahmen td {
text-align: left;
padding: 11px 14px;
border-bottom: 1px solid var(--linie-weich);
vertical-align: top;
}
.tabelle-rahmen th {
font-family: var(--sans);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.07em;
font-weight: 600;
color: var(--text-3);
background: var(--karte-2);
white-space: nowrap;
}
.tabelle-rahmen tr:last-child td {
border-bottom: 0;
}
/* --- Adress-Pruefer ------------------------------------------------------ */
/* Das Versprechen, dass nichts uebertragen wird, steht ganz oben und nicht
im Kleingedruckten -- es ist der Grund, dieses Werkzeug hier zu benutzen
und nicht irgendwo. */
.versprechen {
display: flex;
align-items: flex-start;
gap: 11px;
background: var(--ja-bg);
border: 1px solid var(--ja-linie);
border-radius: var(--radius-s);
padding: 13px 15px;
margin-top: 20px;
font-size: 0.9rem;
line-height: 1.5;
color: var(--text-2);
}
.versprechen b {
color: var(--text);
}
.versprechen code {
font-family: var(--mono);
font-size: 0.86em;
color: var(--text-2);
}
.versprechen-punkt {
flex: none;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--ja);
margin-top: 6px;
}
.adr-zeile {
display: flex;
gap: 8px;
margin-top: 6px;
flex-wrap: wrap;
}
.adr-feld {
flex: 1 1 320px;
font-family: var(--mono);
font-size: 0.95rem;
color: var(--text);
background: var(--grund);
border: 1px solid var(--linie);
border-radius: var(--radius-s);
padding: 11px 13px;
min-width: 0;
}
.adr-feld::placeholder {
color: var(--text-3);
}
.adr-feld:focus {
border-color: var(--btc);
outline: none;
box-shadow: 0 0 0 3px var(--btc-bg);
}
.hinweis.leerzustand {
background: var(--karte-2);
border-color: var(--linie);
color: var(--text-3);
}
.streifen {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
gap: 10px;
margin-top: 12px;
}
.streifen:empty {
display: none;
}
.kachel {
background: var(--grund);
border: 1px solid var(--linie);
border-radius: var(--radius-s);
padding: 11px 12px;
}
.kachel i {
font-style: normal;
display: block;
font-size: 0.64rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-3);
margin-bottom: 4px;
}
.kachel b {
font-family: var(--mono);
font-size: 0.95rem;
font-weight: 500;
color: var(--text);
}
.beispiele {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 9px;
}
.beispiele .wahl span {
overflow: hidden;
text-overflow: ellipsis;
}
/* --- Kurstafel ----------------------------------------------------------- */
.kurs-kopfzeile,
.kurs-zeile {
display: grid;
grid-template-columns: 40px 1fr 120px minmax(96px, auto) minmax(72px, auto);
gap: 14px;
align-items: center;
}
.kurs-kopfzeile {
padding-bottom: 9px;
border-bottom: 1px solid var(--linie);
font-size: 0.66rem;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
color: var(--text-3);
}
.kurs-kopfzeile span:nth-child(3) {
text-align: center;
}
.kurs-kopfzeile span:nth-child(4),
.kurs-kopfzeile span:nth-child(5) {
text-align: right;
}
.kurs-zeile {
padding: 11px 0;
border-bottom: 1px solid var(--linie-weich);
}
.kurs-zeile:last-child {
border-bottom: 0;
}
/* Selbstgezeichnetes Symbol statt fremdem Logo -- spart einen Host in der
CSP. Ohne Symbol faellt die Plakette auf das Kuerzel zurueck, deshalb
stehen die Schriftangaben weiter hier. */
.kurs-marke {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
font-family: var(--mono);
font-size: 0.6rem;
font-weight: 600;
/* color wird je Plakette gesetzt: hell oder dunkel, je nachdem was auf der
Markenfarbe den besseren Kontrast gibt. Siehe kurse.js. */
letter-spacing: -0.02em;
flex: 0 0 auto;
/* Innen liegend, damit die Plakette ihre 34 px behaelt. */
box-shadow: inset 0 0 0 1px var(--marke-ring);
}
/* Das SVG bringt seine eigene Groesse mit; die Schriftangaben der Plakette
greifen dann nicht mehr und wuerden nur die Zeilenhoehe stoeren. */
.kurs-marke.hat-symbol {
line-height: 0;
}
.kurs-marke svg {
display: block;
}
.kurs-name b {
display: block;
font-size: 0.94rem;
font-weight: 600;
color: var(--text);
}
.kurs-name i {
font-style: normal;
display: block;
font-family: var(--mono);
font-size: 0.72rem;
color: var(--text-3);
}
.kurs-kurve {
display: flex;
justify-content: center;
}
.kurs-kurve svg {
display: block;
}
.kurs-preis {
font-family: var(--mono);
font-variant-numeric: tabular-nums;
font-size: 0.98rem;
text-align: right;
color: var(--text);
}
.kurs-delta {
font-family: var(--mono);
font-variant-numeric: tabular-nums;
font-size: 0.88rem;
text-align: right;
}
.kurs-delta.hoch {
color: var(--ja);
}
.kurs-delta.runter {
color: var(--nein);
}
/* Schmal: Kurve und Kopfzeile weg, der Rest bleibt lesbar. */
@media (max-width: 620px) {
.kurs-kopfzeile {
display: none;
}
.kurs-zeile {
grid-template-columns: 34px 1fr auto;
gap: 11px;
}
.kurs-kurve {
display: none;
}
.kurs-preis {
grid-column: 3;
}
.kurs-delta {
grid-column: 3;
grid-row: 2;
}
}
/* ==========================================================================
Das Kontaktformular
Netlify nimmt die Eintraege entgegen; hier steht nur, wie es aussieht.
Die Felder benutzen .adr-feld aus dem Adress-Pruefer weiter -- ein
Eingabefeld soll auf der ganzen Seite gleich aussehen.
========================================================================== */
.kontaktform {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 22px;
max-width: 52ch;
}
/* .adr-feld kommt aus dem Adress-Pruefer und traegt dort "flex: 1 1 320px".
Dessen Zeile ist eine WAAGERECHTE Flexbox, die 320 Pixel sind also eine
Breite. Hier ist die Flexbox SENKRECHT, und damit wird dieselbe Angabe zur
Hoehe: Bis zum 12.09.2026 waren Name-, E-Mail- und Telefonfeld ueber 300
Pixel hoch, weil flex-grow sie zusaetzlich aufgezogen hat. Die Felder
nehmen ihre eigene Hoehe, die Breite kommt ohnehin vom Strecken der
Spalte. */
.kontaktform .adr-feld {
flex: 0 0 auto;
}
/* Abstand zwischen den Feldgruppen, nicht zwischen Beschriftung und Feld. */
.kontaktform .kz-label:not(:first-of-type) {
margin-top: 12px;
}
.kontaktform .kz-label i {
font-style: normal;
font-weight: 400;
color: var(--text-3);
}
.kontaktform textarea.adr-feld {
resize: vertical;
min-height: 120px;
font-family: inherit;
line-height: 1.55;
}
.kontakt-senden {
margin-top: 18px;
align-self: flex-start;
background: var(--btc);
border-color: var(--btc);
color: var(--btc-text);
font-weight: 600;
padding: 10px 22px;
}
.kontakt-senden:hover {
filter: brightness(1.08);
}
.kontakt-hinweis {
margin-top: 14px;
font-size: 0.85rem;
line-height: 1.5;
color: var(--text-3);
}
/* Die Falle fuer Maschinen. Nicht display:none -- manche Bots erkennen das
und lassen das Feld dann leer. Aus dem Sichtfeld schieben wirkt besser.
aria-hidden waere hier falsch: das Feld ist ohnehin nicht Teil des
Formulars fuer Menschen, und ein Screenreader soll es ueberspringen --
genau das leistet die Verschiebung zusammen mit tabindex="-1". */
.falle {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
/* ==========================================================================
Der Lightning-Streifen
Drei Zahlen nebeneinander statt einer grossen: Knoten, Kanaele und
Kapazitaet gehoeren zusammen und sagen einzeln wenig. Die Kapazitaet
allein waere nur eine grosse Zahl, erst neben der Kanalzahl wird sie
greifbar.
========================================================================== */
.ln-zahlen {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
gap: 14px;
margin-top: 4px;
}
.ln-zahlen div {
display: flex;
flex-direction: column;
gap: 2px;
}
.ln-zahlen b {
font-family: var(--disp);
font-size: 1.5rem;
font-weight: 800;
line-height: 1.1;
color: var(--text);
font-variant-numeric: tabular-nums;
}
/* Die Einheit klein hinter der Zahl -- setz() haengt sie als an. */
.ln-zahlen b em {
font-family: var(--sans);
font-size: 0.72rem;
font-weight: 500;
color: var(--text-3);
margin-left: 4px;
}
.ln-zahlen i {
font-style: normal;
font-size: 0.78rem;
color: var(--text-2);
}
/* ==========================================================================
Sparplan und Haltefrist
========================================================================== */
.sp-eingabe {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 20px;
}
.sp-einheit {
align-self: center;
color: var(--text-2);
font-weight: 600;
}
.wahl.klein {
padding: 5px 12px;
font-size: 0.85rem;
}
.sp-kopf {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
gap: 16px;
padding-bottom: 18px;
border-bottom: 1px solid var(--linie);
}
.sp-kopf div {
display: flex;
flex-direction: column;
gap: 2px;
}
.sp-kopf i {
font-style: normal;
font-size: 0.78rem;
color: var(--text-2);
}
.sp-kopf b {
font-family: var(--disp);
font-size: 1.42rem;
font-weight: 800;
line-height: 1.15;
font-variant-numeric: tabular-nums;
}
.sp-kopf span {
font-size: 0.76rem;
color: var(--text-3);
}
.sp-kopf .hoch b {
color: var(--ja);
}
.sp-kopf .runter b {
color: var(--nein);
}
.sp-kurve {
margin-top: 18px;
}
.sp-kurve svg {
display: block;
width: 100%;
height: 150px;
}
.sp-legende {
display: flex;
gap: 18px;
margin-top: 8px;
font-size: 0.78rem;
color: var(--text-2);
}
.sp-legende span {
display: flex;
align-items: center;
gap: 6px;
}
.sp-legende i {
width: 16px;
height: 2px;
border-radius: 1px;
}
.sp-legende .l-wert {
background: var(--btc);
}
.sp-legende .l-zahl {
background: var(--text-3);
}
.sp-satz {
margin-top: 18px;
color: var(--text-2);
line-height: 1.6;
font-size: 0.94rem;
}
.sp-satz b {
color: var(--text);
}
/* Die Landwahl. Radios statt Auswahlliste: es sind zwei Moeglichkeiten, und
die Rechtslage dahinter ist so verschieden, dass beide sichtbar sein
sollen -- nicht eine hinter einem Klick versteckt. */
.hf-land {
border: 0;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.hf-land legend {
margin-bottom: 8px;
}
.hf-land label {
display: flex;
align-items: center;
gap: 8px;
padding: 9px 16px;
border: 1px solid var(--linie);
border-radius: var(--radius-s);
background: var(--karte-2);
cursor: pointer;
font-size: 0.93rem;
}
.hf-land label:has(input:checked) {
border-color: var(--btc);
background: var(--btc-bg);
font-weight: 600;
}
.hf-land input {
accent-color: var(--btc);
}
/* ==========================================================================
Weiterlesen unter dem Artikel
Vorher endete jeder Beitrag in einer Sackgasse: kein Verweis auf einen
anderen Text, keiner auf ein Werkzeug. Der Block schliesst das.
========================================================================== */
.weiterlesen {
margin-top: 34px;
padding-top: 26px;
border-top: 1px solid var(--linie);
}
/* Das Werkzeug hebt sich vom Textverweis ab -- es fuehrt aus dem Lesen
heraus ins Rechnen, das ist ein anderer Schritt. */
.hinweis-werkzeug {
display: block;
margin-top: 12px;
border-color: var(--btc-linie);
background: var(--btc-bg);
}
.hinweis-werkzeug b {
color: var(--btc);
}
/* ==========================================================================
Kopfbild und Autoren-Box
========================================================================== */
/* Das Kopfbild sitzt in der Karte, nicht darueber: es soll den Artikel
einleiten, nicht die Seite dominieren. Deshalb auch flach -- 240 zu 1200
ist bewusst ein Streifen und kein Aufmacher. */
.kopfbild {
margin: -1px -1px 22px;
border-radius: var(--radius) var(--radius) 0 0;
overflow: hidden;
background: var(--karte-2);
/* currentColor der Bloecke kommt von hier. */
color: var(--btc);
line-height: 0;
}
/* Seitenverhaeltnis halten statt feste Hoehe.
Vorher stand hier eine feste Hoehe zusammen mit preserveAspectRatio
"slice" -- der Browser fuellte damit die Flaeche und schnitt seitlich
ab. Auf einem 360 px breiten Bildschirm blieb vom 1200er Motiv nur der
Bereich zwischen etwa 272 und 928 uebrig: von den sieben Sprechblasen
des Mythen-Bildes waren vier zu sehen, beim Kaufweg fehlten Euro und
Schloss an den Enden.
Mit height:auto bleibt das Motiv vollstaendig und wird nur kleiner --
auf dem Handy ein schmaler Streifen, auf dem Schreibtisch ein Banner.
Nichts faellt weg. */
.kopfbild svg {
display: block;
width: 100%;
height: auto;
}
.autor {
display: flex;
gap: 16px;
align-items: flex-start;
margin-top: 30px;
padding: 20px;
background: var(--karte-2);
border: 1px solid var(--linie);
border-radius: var(--radius);
}
/* Kein Portraetfoto: es gibt keine Person, die abgebildet werden koennte.
Die Marke steht stattdessen -- ehrlicher als ein Symbolbild. */
.autor-marke {
width: 46px;
height: 46px;
flex: 0 0 auto;
background: var(--btc);
-webkit-mask: url("/img/marke.svg") center / contain no-repeat;
mask: url("/img/marke.svg") center / contain no-repeat;
}
.autor b {
display: block;
font-family: var(--disp);
font-weight: 800;
font-size: 1rem;
letter-spacing: -0.015em;
margin-bottom: 5px;
}
.autor p {
margin: 0;
color: var(--text-2);
font-size: 0.9rem;
line-height: 1.6;
max-width: 62ch;
}
.autor .autor-zeile {
margin-top: 8px;
font-size: 0.86rem;
}
/* Die Rubrik am Artikel ist jetzt ein Verweis auf die Rubrikseite.
Ohne Unterstreichung: die Plakette ist schon als anklickbar erkennbar,
und ein Strich darin sieht nach Versehen aus. Der Hover macht es
deutlich, der Fokusrahmen bleibt fuer die Tastatur erhalten. */
a.marke-klein {
text-decoration: none;
transition: background-color 0.12s ease;
}
a.marke-klein:hover {
background: var(--btc);
color: var(--btc-text);
border-color: var(--btc);
}
/* ==========================================================================
Der Einstieg auf der Startseite
Bewusst anders gehalten als die Kennzahlen darunter: keine Karten mit
Rahmen, sondern flaechige Felder. Der Abschnitt soll als Orientierung
gelesen werden, nicht als weitere Datenanzeige.
========================================================================== */
/* --- Der Aufmacher der Startseite -----------------------------------------
Er steht unter der Ueberschrift und ueber dem Einstieg: der lange Verlauf
ist die Einordnung, vor der die Momentaufnahmen darunter erst etwas
bedeuten. Warum dort der Verlauf steht und nicht der aktuelle Kurs, steht
bei kursHero() in build/verlaufsseiten.mjs.
DIE KURVE IST HIER HOEHER ALS IN DEN KARTEN, 190 statt 130 px. Bei 130 px
verschwinden ueber zehn Jahre die frueheren Zyklen in der Grundlinie; zu
sehen ist dann ausschliesslich der letzte Anstieg -- also genau das Bild,
gegen das der Text auf /kurs/ argumentiert. */
.kurs-hero {
margin-top: 22px;
padding: 18px 20px 16px;
background: var(--karte);
border: 1px solid var(--linie);
border-radius: var(--radius);
}
.kurs-hero-kopf {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.kurs-hero-kap {
font-family: var(--mono);
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-3);
}
.kurs-hero-satz {
font-size: 1.02rem;
color: var(--text-2);
margin-top: 7px;
}
.kurs-hero-satz b {
color: var(--text);
}
.kurs-hero-mehr {
white-space: nowrap;
font-size: 0.9rem;
}
.kurs-hero .lage-kurve {
height: 190px;
}
.kurs-hero-fuss {
font-size: 0.82rem;
color: var(--text-3);
line-height: 1.55;
margin-top: 10px;
}
@media (max-width: 700px) {
.kurs-hero {
padding: 15px 14px 14px;
}
/* Auf dem Telefon ist die Karte rund 340 px breit; 190 px Hoehe waeren
ueber die halbe Breite und die Kurve staende senkrecht statt flach. */
.kurs-hero .lage-kurve {
height: 140px;
}
}
.einstieg {
margin-top: 22px;
}
.einstieg-frage {
font-size: 0.74rem;
text-transform: uppercase;
letter-spacing: 0.09em;
font-weight: 600;
color: var(--text-3);
margin: 0 0 10px;
}
.wege {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 12px;
}
.weg {
display: block;
padding: 16px 18px;
background: var(--karte-2);
border: 1px solid transparent;
border-radius: var(--radius);
text-decoration: none;
transition:
border-color 0.14s ease,
background-color 0.14s ease;
}
.weg:hover {
border-color: var(--btc-linie);
background: var(--btc-bg);
}
.weg b {
display: block;
font-family: var(--disp);
font-weight: 800;
font-size: 1rem;
letter-spacing: -0.015em;
color: var(--text);
margin-bottom: 5px;
}
/* Der Pfeil sitzt am Text, nicht in einer eigenen Spalte: so bleibt er
auch dann am richtigen Platz, wenn die Ueberschrift zweizeilig wird. */
.weg b::after {
content: " →";
color: var(--btc);
font-weight: 500;
}
.weg span {
display: block;
color: var(--text-2);
font-size: 0.88rem;
line-height: 1.55;
}
/* ==========================================================================
Die Vertrauensleiste
==========================================================================
Vier Aussagen, die alle irgendwohin fuehren -- warum das so ist, steht
im Kopf von vertrauensleiste() in build/bauen.mjs.
SIE IST ABSICHTLICH LEISE. Sie steht auf der Startseite unter dem
Aufmacher und auf den Rechnern unter dem Ergebnis; an beiden Stellen ist
sie das Zweitwichtigste. Deshalb kein Kasten, keine Farbflaeche und kein
gruener Haken: Textfarbe, ein duenner Strich darueber, und erst beim
Ueberfahren faerbt sich ein Punkt. Eine laute Vertrauensleiste sieht aus
wie ein Siegel, und Siegel sind genau das, was hier niemand glauben
soll.
ALLE FARBEN KOMMEN AUS TOKENS, die im hellen :root vollstaendig
definiert sind. Ein eigener Wert hier waere im dritten Themenzustand
("nichts gewaehlt") der falsche. */
.vertrauen {
margin-top: 22px;
padding-top: 16px;
border-top: 1px solid var(--linie);
}
.vertrauen-punkte {
display: flex;
flex-wrap: wrap;
gap: 10px 22px;
}
.vertrauen-punkte a {
display: inline-flex;
align-items: center;
gap: 7px;
color: var(--text-2);
font-size: 0.86rem;
line-height: 1.4;
text-decoration: none;
border-bottom: 1px solid transparent;
transition:
color 0.14s ease,
border-color 0.14s ease;
}
.vertrauen-punkte a:hover,
.vertrauen-punkte a:focus-visible {
color: var(--text);
border-bottom-color: var(--btc-linie);
}
/* Das Haekchen sitzt in der Textfarbe und wird erst beim Ueberfahren
orange: im Ruhezustand ist es Satzzeichen, kein Siegel. */
.vertrauen-punkte svg {
width: 15px;
height: 15px;
flex: 0 0 auto;
color: var(--text-3);
transition: color 0.14s ease;
}
.vertrauen-punkte a:hover svg,
.vertrauen-punkte a:focus-visible svg {
color: var(--btc);
}
.vertrauen-fuss {
margin: 10px 0 0;
color: var(--text-3);
font-size: 0.8rem;
line-height: 1.55;
}
/* ==========================================================================
Suche
========================================================================== */
.suche {
max-width: 460px;
}
/* Das Kreuzchen, das Browser in type="search" einbauen, sieht in jedem
Browser anders aus und kollidiert mit dem eigenen Knopf daneben. */
.suche input[type="search"]::-webkit-search-cancel-button {
display: none;
}
.su-ergebnis {
margin-top: 18px;
}
.su-zahl {
font-size: 0.8rem;
color: var(--text-3);
margin: 0 0 10px;
}
.su-leer {
color: var(--text-2);
margin: 0;
}
/* ==========================================================================
Newsletter
========================================================================== */
.brief {
margin-top: 30px;
padding: 22px;
background: var(--btc-bg);
border: 1px solid var(--btc-linie);
border-radius: var(--radius);
/* Der Kopf klebt und ist im schmalen Zustand rund 84 px hoch. Ohne diese
Zeile verschwindet die Ueberschrift des Kastens darunter, sobald
jemand dem Knopf "Rundbrief" auf /#rundbrief folgt. Derselbe Wert wie
bei den Zwischenueberschriften in .prosa. */
scroll-margin-top: 84px;
}
.brief h2 {
margin: 0 0 6px;
font-size: 1.1rem;
}
/* DER KASTEN NIMMT DIE VOLLE BREITE -- ALLES DARIN AUCH.
Der Kasten selbst lief immer ueber die ganze Spalte, sein Inhalt nicht:
60ch Satzbreite fuer den Text, 520 px fuer das Formular, 62ch fuer die
Einwilligung. Das ergab eine orange Flaeche, die zu zwei Dritteln leer
war -- und ein Eintragefeld, das aussah, als gehoere es nicht dazu.
56f6767 hat die Satzbreiten auf den Werkzeug- und Uebersichtsseiten
abgeraeumt und den Rundbrief ausdruecklich ausgenommen, mit der
Begruendung, ein 520 px breites Formular unter einer vollbreiten Zeile
sei kein Gewinn. Das war die halbe Antwort: Der Gewinn kommt erst, wenn
das Formular mitwaechst. Genau das passiert jetzt -- das Eingabefeld
steht auf flex: 1 1 220px und fuellt, was uebrig bleibt, der Knopf
bleibt an seiner Groesse.
Auf den Beitragsseiten aendert sich wenig: Der Kasten stand auch dort
schon neben .artikel und nicht darin. */
.brief > p {
margin: 0;
color: var(--text-2);
font-size: 0.92rem;
line-height: 1.6;
}
.brief-form {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 16px;
}
.brief-form .adr-feld {
flex: 1 1 220px;
}
.brief-senden {
background: var(--btc);
border-color: var(--btc);
color: var(--btc-text);
font-weight: 600;
padding: 10px 20px;
flex: 0 0 auto;
}
.brief-senden:hover {
filter: brightness(1.08);
}
/* Die Einwilligung ist kein Kleingedrucktes: ohne Haken kein Versand,
also steht sie in lesbarer Groesse und in voller Breite -- die 62ch
sind mit den uebrigen Begrenzungen im Kasten weggefallen. */
.brief-zustimmung {
display: flex;
align-items: flex-start;
gap: 9px;
margin-top: 12px;
font-size: 0.86rem;
line-height: 1.5;
color: var(--text-2);
cursor: pointer;
}
.brief-zustimmung input {
margin-top: 3px;
flex: 0 0 auto;
accent-color: var(--btc);
}
.brief-klein {
margin-top: 12px;
font-size: 0.82rem;
color: var(--text-3);
}
/* ==========================================================================
Suche in der Kopfzeile
Der Knopf ist im Markup ein Verweis auf /magazin/#suchen. Ohne
Javascript bleibt er das und funktioniert; mit Javascript oeffnet er
die Ueberlagerung. Deshalb sieht er aus wie ein Bedienelement und nicht
wie ein Textlink.
========================================================================== */
.suchknopf {
display: inline-flex;
align-items: center;
gap: 8px;
/* Breit genug, dass er als Eingabefeld gelesen wird und nicht als
Knopf. Er ist zwar ein Verweis, aber was er oeffnet, ist ein
Suchfeld -- die Form soll das ankuendigen.
DIE ALTE ZWICKMUEHLE IST WEG, seit die Kopfzeile zwei Reihen hat
(Begruendung bei .kopf-innen). Sie lautete: In einer Reihe mit Logo
und Menue durfte das Feld nicht wachsen, weil sonst die ganze Zeile
umbrach -- `min-width: 210px` kippte sie bei 900 px, und
`flex: 1 1 130px` machte es schlimmer, weil ein Flex-Element nicht
schrumpft, um einen Umbruch zu vermeiden: der Browser bricht zuerst
um und fuellt danach die neue Zeile.
Jetzt teilt es sich die Reihe nur mit der Wortmarke. Es darf den
Rest nehmen, gedeckelt bei 420 px -- ein Suchfeld ueber die halbe
Bildschirmbreite sieht nach Hauptsache aus, und das ist es nicht. */
flex: 1 1 auto;
max-width: 420px;
padding: 8px 14px;
overflow: hidden;
border: 1px solid var(--linie);
border-radius: 999px;
background: var(--karte-2);
color: var(--text-3);
font-size: 0.86rem;
font-weight: 400;
text-decoration: none;
white-space: nowrap;
text-overflow: ellipsis;
}
/* Der Kurzbefehl steht rechts im Feld, wie man es von Suchfeldern kennt.
Auf Beruehrungsgeraeten hat er keinen Sinn -- dort faellt er weg. */
.suchknopf::after {
content: "/";
margin-left: auto;
padding: 1px 7px;
border: 1px solid var(--linie);
border-radius: 5px;
font-family: var(--mono);
font-size: 0.72rem;
line-height: 1.5;
color: var(--text-3);
}
@media (hover: none) {
.suchknopf::after {
display: none;
}
}
.suchknopf:hover {
border-color: var(--btc-linie);
background: var(--btc-bg);
color: var(--btc);
}
/* Die Breitenregel ab 1020 px ist mit der zweiten Reihe hinfaellig
geworden und deshalb entfernt: das Feld waechst jetzt auf jeder
Bildschirmbreite mit, bis zu seinen 420 px. Auch die drei uebereinander
gestapelten Kommentare, die hier standen, waren Reste aus denselben
Anlaeufen -- sie beschrieben eine Enge, die es nicht mehr gibt. */
/* Der Kurzbefehl ist das Erste, was weichen darf: er hilft nur denen,
die ihn ohnehin kennen. */
@media (max-width: 1019px) {
.suchknopf::after {
display: none;
}
}
/* Ganz schmal bleibt die Lupe allein. Sie ist eindeutig genug, und
title traegt die Bedeutung weiter. */
@media (max-width: 620px) {
.suchknopf span {
position: absolute;
left: -9999px;
}
.suchknopf {
flex: 0 0 auto;
max-width: none;
margin-left: auto;
/* Nur noch die Lupe -- dann muss die Flaeche selbst das Tippziel
tragen. Mit dem blossen Innenabstand kam sie auf 37x33 px, das
ist zu klein fuer einen Daumen. Quadratisch und 42 px. */
width: 42px;
height: 42px;
padding: 0;
justify-content: center;
}
}
/* --- Die Ueberlagerung ---------------------------------------------------- */
.su-dialog {
width: min(640px, calc(100vw - 32px));
max-height: min(72vh, 640px);
margin: 12vh auto auto;
padding: 18px;
border: 1px solid var(--linie);
border-radius: var(--radius);
background: var(--karte);
color: var(--text);
box-shadow: var(--schatten);
overflow: auto;
}
.su-dialog::backdrop {
background: rgba(10, 11, 14, 0.55);
}
.su-dialog-kopf {
display: flex;
gap: 9px;
align-items: center;
}
.su-dialog-kopf .adr-feld {
flex: 1 1 auto;
}
.su-dialog input[type="search"]::-webkit-search-cancel-button {
display: none;
}
/* Im Dialog ist die Trefferliste einspaltig: die Ueberlagerung ist
schmaler als der Textbereich, zwei Spalten wuerden dort quetschen. */
.su-dialog .artikelliste {
grid-template-columns: 1fr;
}
/* Zahlen, die sich selbst aktualisieren. Bewusst ohne eigene Farbe oder
Auszeichnung: sie stehen mitten im Satz und sollen sich lesen wie der
Rest. tabular-nums verhindert nur, dass die Zeile springt, wenn der
Wert im Browser durch einen anderen ersetzt wird. */
.lebendig {
font-variant-numeric: tabular-nums;
}
/* ==========================================================================
Kurzfassung und Ankerlinks
========================================================================== */
/* Der Kasten steht vor dem Text, nicht danach.
Die Titel dieser Beitraege stellen Fragen -- "Bitcoin oder ETF?" --, und
die Antwort kam bisher nach siebenhundert Woertern. Die meisten
ueberfliegen aber. Wer nur diesen Kasten liest, soll die Frage beantwortet
bekommen; wer mehr will, liest weiter. */
.kurzgesagt {
margin: 0 0 26px;
padding: 18px 20px;
background: var(--karte-2);
border-left: 3px solid var(--btc);
border-radius: 0 var(--radius-s) var(--radius-s) 0;
}
.kurzgesagt b {
display: block;
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.09em;
color: var(--text-3);
margin-bottom: 7px;
}
.kurzgesagt p {
margin: 0;
font-size: 1rem;
line-height: 1.65;
color: var(--text);
max-width: 62ch;
}
/* Das Rautenzeichen neben der Ueberschrift.
Sichtbar erst beim Ueberfahren, damit es den Text nicht stoert -- aber
mit der Tastatur immer erreichbar, deshalb wird es beim Fokus wieder
eingeblendet. Ein Element, das nur bei :hover existiert, ist fuer
Tastaturnutzer nicht vorhanden. */
.prosa h2,
.prosa h3,
.prosa h4 {
scroll-margin-top: 84px;
}
.anker {
margin-left: 9px;
color: var(--text-3);
text-decoration: none;
font-weight: 400;
opacity: 0;
transition: opacity 0.12s ease;
}
/* Drei Wege, es sichtbar zu machen: Maus auf der Ueberschrift, Fokus auf
dem Zeichen selbst, Fokus irgendwo in der Ueberschrift. Der letzte ist
die Absicherung -- :focus allein haengt daran, dass das Dokument den
Fokus hat, und das laesst sich schlechter garantieren als man denkt. */
.prosa h2:hover .anker,
.prosa h3:hover .anker,
.prosa h4:hover .anker,
.prosa h2:focus-within .anker,
.prosa h3:focus-within .anker,
.prosa h4:focus-within .anker,
.anker:focus,
.anker:focus-visible {
opacity: 1;
}
.anker:hover {
color: var(--btc);
}
/* Auf Beruehrungsgeraeten gibt es kein Ueberfahren. Dort steht das Zeichen
dauerhaft, aber zurueckhaltend. */
@media (hover: none) {
.anker {
opacity: 0.35;
}
}
/* --- Storage: Skizze und Geraete ----------------------------------------
NUR TOKENS, KEINE FESTEN FARBEN. Das gilt hier besonders: Die Skizze ist
ein Inline-SVG und erbt die Tokens aus dieser Datei. Eine feste Farbe
waere im dunklen Modus unsichtbar, und das faellt beim Bauen niemandem
auf, weil man hell entwickelt.
Die Karten sind bewusst nicht anklickbar. Es gibt keine Kauflinks, also
soll auch nichts so aussehen, als fuehre es irgendwohin. */
.skizze {
margin: 26px 0 0;
}
.skizze svg {
display: block;
width: 100%;
height: auto;
}
/* Unter etwa 560 Pixeln wird die Skizze unleserlich klein. Dann darf sie
seitlich scrollen, statt zu schrumpfen -- der Kasten unten ist der Punkt
der Zeichnung und muss lesbar bleiben. */
@media (max-width: 560px) {
.skizze {
overflow-x: auto;
}
.skizze svg {
width: 560px;
}
}
.skizze figcaption {
margin-top: 12px;
color: var(--text-3);
font-size: 0.86rem;
max-width: 62ch;
}
/* Auf den Rubrikseiten steht die Skizze direkt in der Huelle und nimmt deren
volle Breite. Eine Bildunterschrift, die bei der Haelfte umbricht, sieht
darunter nach abgeschnittenem Text aus. Im Beitrag liegt die Skizze in
.prosa und ist schon durch die Artikelbreite begrenzt -- dort bleibt die
Satzbreite oben stehen. */
.huelle > .skizze figcaption {
max-width: none;
}
.geraete {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
gap: 14px;
margin-top: 20px;
}
.geraet {
display: flex;
flex-direction: column;
gap: 10px;
padding: 16px;
background: var(--karte);
border: 1px solid var(--linie);
border-radius: var(--radius);
}
.geraet-breit {
flex-direction: row;
align-items: flex-start;
gap: 18px;
margin-top: 14px;
}
@media (max-width: 560px) {
.geraet-breit {
flex-direction: column;
}
}
.geraet-bild {
width: 120px;
height: 86px;
flex: 0 0 auto;
align-self: flex-start;
}
.geraet-text {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.geraet-kopf {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
}
.geraet-kopf b {
font-size: 1.02rem;
}
.geraet-preis {
color: var(--btc);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.geraet-haus {
color: var(--text-3);
font-size: 0.84rem;
margin-top: -6px;
}
.geraet p {
margin: 0;
color: var(--text-2);
font-size: 0.92rem;
}
.geraet-haken {
color: var(--text-3);
font-size: 0.86rem;
}
.merkmale {
list-style: none;
margin: 2px 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 5px;
}
.merkmal {
display: flex;
align-items: baseline;
gap: 7px;
font-size: 0.86rem;
color: var(--text-2);
}
.merkmal::before {
flex: 0 0 auto;
font-weight: 700;
}
/* Ja und Nein, nicht gut und schlecht: Ein Geraet ohne Luftluecke ist
nicht fehlerhaft, es kann nur weniger. Deshalb Bernstein statt Rot. */
.merkmal-ja::before {
content: "✓";
color: var(--ja);
}
.merkmal-nein::before {
content: "–";
color: var(--acht);
}
.merkmal-was {
color: var(--text);
}
.merkmal-dazu {
color: var(--text-3);
}
.merkmal-dazu::before {
content: " · ";
}
/* ==========================================================================
/lage/ — die Lage im Netz
Eine lange Lesestrecke aus Zahl, Einordnung und Kurve. Deshalb schmaler
als die uebrigen Seiten: .huelle gibt 1100px her, Fliesstext wird ab
etwa 70 Zeichen je Zeile muehsam.
========================================================================== */
.lage-kopf {
margin: 26px 0 8px;
}
.lage-kopf h1 {
font-family: var(--disp);
font-size: 2.1rem;
line-height: 1.15;
letter-spacing: -0.02em;
margin: 0 0 12px;
}
.lage-fuehrung {
font-size: 1.12rem;
line-height: 1.55;
color: var(--text);
margin: 0 0 10px;
}
.lage-stand {
font-size: 0.85rem;
color: var(--text-3);
margin: 0;
}
.lage-ausfall {
background: var(--acht-bg);
border: 1px solid var(--acht-linie);
color: var(--acht);
border-radius: var(--radius-s);
padding: 10px 13px;
font-size: 0.9rem;
margin: 16px 0 0;
}
.lage-block {
margin: 34px 0 0;
padding-top: 26px;
border-top: 1px solid var(--linie);
}
.lage-block h2 {
font-family: var(--disp);
font-size: 1.42rem;
letter-spacing: -0.015em;
margin: 0 0 14px;
}
.lage-block h3 {
font-size: 1rem;
margin: 26px 0 4px;
}
.lage-block p {
line-height: 1.62;
margin: 0 0 12px;
}
/* Die Zahl gross, die Erklaerung daneben und kleiner. Dieselbe Machart wie
.ergebnis-gross in den Rechnern -- es ist dieselbe Sorte Aussage. */
.lage-zahl {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 4px 12px;
margin: 0 0 12px;
}
.lage-zahl b {
font-family: var(--mono);
font-variant-numeric: tabular-nums;
font-size: 2.4rem;
font-weight: 500;
letter-spacing: -0.035em;
line-height: 1;
color: var(--btc);
}
.lage-zahl span {
font-size: 0.95rem;
color: var(--text-2);
}
.lage-tabelle {
width: 100%;
border-collapse: collapse;
margin: 6px 0 10px;
font-size: 0.94rem;
}
.lage-tabelle th,
.lage-tabelle td {
text-align: left;
padding: 8px 10px;
border-bottom: 1px solid var(--linie-weich);
}
.lage-tabelle th {
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-3);
font-weight: 600;
}
.lage-tabelle td:nth-child(2),
.lage-tabelle td:nth-child(3) {
font-family: var(--mono);
font-variant-numeric: tabular-nums;
}
/* Die Kurve wird auf volle Breite gezogen (preserveAspectRatio="none"), die
Linie behaelt ihre Staerke ueber vector-effect. Eine feste Hoehe, damit
beim Laden nichts springt -- das SVG hat sonst keine eigene. */
.lage-figur {
margin: 10px 0 12px;
}
.lage-kurve {
display: block;
width: 100%;
height: 130px;
color: var(--btc);
overflow: visible;
}
.lage-kurve-linie {
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linejoin: round;
stroke-linecap: round;
}
.lage-kurve-flaeche {
fill: currentColor;
opacity: 0.09;
stroke: none;
}
.lage-achse {
display: flex;
justify-content: space-between;
gap: 10px;
font-size: 0.78rem;
color: var(--text-3);
margin-top: 6px;
padding-top: 6px;
border-top: 1px solid var(--linie-weich);
}
.lage-achse-werte {
font-family: var(--mono);
font-variant-numeric: tabular-nums;
}
/* Die Rueckgangsliste auf /kurs/. Prozentwert in Monospace und links, damit
die Zahlen untereinander stehen und als Spalte lesbar sind -- eine Liste,
in der man die Groessenordnungen vergleichen soll, darf sie nicht
verschieden breit setzen. Rot, weil es Rueckgaenge sind; dieselbe Farbe,
die die Jahresveraenderung oben schon traegt. */
.lage-liste {
list-style: none;
margin: 0 0 12px;
padding: 0;
display: grid;
gap: 7px;
}
.lage-liste li {
display: flex;
align-items: baseline;
gap: 12px;
line-height: 1.5;
}
.lage-liste b {
font-family: var(--mono);
font-variant-numeric: tabular-nums;
color: var(--nein);
flex-shrink: 0;
min-width: 6ch;
}
.lage-liste span {
color: var(--text-2);
font-size: 0.94rem;
}
@media (max-width: 560px) {
/* Auf dem Telefon bricht die Zeile ohnehin; dann steht die Zahl als
eigene Zeile darueber statt in einer 6ch-Spalte neben zwei Zeilen. */
.lage-liste li {
display: block;
}
.lage-liste b {
display: block;
}
}
.lage-balken {
height: 9px;
border-radius: 99px;
background: var(--karte-2);
border: 1px solid var(--linie);
overflow: hidden;
margin: 0 0 14px;
}
.lage-balken-fuell {
height: 100%;
background: var(--btc);
}
.lage-hinweis,
.lage-fussnote {
font-size: 0.85rem;
color: var(--text-3);
line-height: 1.55;
}
.lage-leer {
font-size: 0.9rem;
color: var(--text-3);
font-style: italic;
}
.lage-weiter {
margin-top: 14px;
font-size: 0.95rem;
}
/* Das Abzeichen am Menuepunkt "News".
Es wird von notizen-badge.js angehaengt und steht in keiner HTML-Datei.
Der Anker dafuer (`position: relative`) sitzt oben bei .nav a.
DIE VERSCHIEBUNG RECHNET MIT DEM INNENABSTAND: .nav a hat 11 px rechts,
das Wort endet also 11 px vor der Kante des Kastens. `right: 2px` setzt
die Zahl damit an die obere rechte Ecke des WORTES, nicht des Kastens --
mit einem negativen Wert stuende sie im Nachbarpunkt.
--btc-text statt einer festen Schriftfarbe: Auf dem hellen Orange des
dunklen Modus waere Weiss zu blass, und ein festes Hex hier faellt beim
Entwickeln nicht auf, weil man hell entwickelt. */
.nav-abzeichen {
position: absolute;
top: -1px;
right: 2px;
min-width: 17px;
height: 17px;
padding: 0 4px;
border-radius: 9px;
background: var(--btc);
color: var(--btc-text);
font-family: var(--mono);
font-size: 0.68rem;
font-weight: 500;
font-variant-numeric: tabular-nums;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
/* Glossar.
Die Uebersicht ist eine Definitionsliste, weil sie eine ist -- Begriff
und Erklaerung, nicht Ueberschrift und Absatz. Der Begriff traegt das
Gewicht, die Definition steht eingerueckt darunter, damit man die Liste
von oben nach unten ueberfliegen kann, ohne zu lesen. */
/* padding-bottom, weil das schwebende Bild der letzten Zeile sonst bis an
die Ueberschrift der naechsten Rubrik reicht. */
.glossar-liste {
margin: 14px 0 0;
padding-bottom: 14px;
display: grid;
gap: 3px;
}
.glossar-liste dt {
font-weight: 600;
}
/* Jeder Eintrag steckt in einer eigenen div, der Abstand sitzt deshalb dort
(dt:first-of-type traefe jetzt jedes dt). Das kleine Bild schwebt links,
Begriff und Definition laufen daneben; flow-root haelt es in seiner Zeile. */
.glossar-zeile {
display: flow-root;
margin-top: 14px;
}
.glossar-zeile:first-child {
margin-top: 0;
}
.glossar-mini {
float: left;
width: 120px;
height: 60px;
margin: 3px 16px 2px 0;
border-radius: 8px;
background: var(--ink);
}
.glossar-liste dt a {
color: var(--text);
text-decoration: none;
border-bottom: 1px solid var(--btc-linie);
}
.glossar-liste dt a:hover {
color: var(--btc);
border-bottom-color: var(--btc);
}
.glossar-liste dd {
margin: 0;
color: var(--text-2);
line-height: 1.55;
}
/* Der Eintrag selbst oeffnet mit der Definition. Sie steht groesser als
der Fliesstext darunter, weil sie fuer viele die ganze Antwort ist:
Wer "Was ist ein UTXO" sucht, ist nach diesem Satz oft fertig. */
/* .lage-kopf und .lage-block sind seit dem 12.09.2026 ohne Breitenangabe:
auf den Uebersichtsseiten (/lage/, /kurs/, /halving/, /glossar/, /notizen/)
soll der Text bis an dieselbe Kante laufen wie die Kacheln und Tabellen
daneben. Die Glossareintraege benutzen dieselben Bauteile, sind aber Texte
zum Lesen und behalten die 760 Pixel -- build/glossar.mjs setzt dafuer
.glossar-eintrag, aber nur am Eintrag, nicht an der Uebersicht. */
.glossar-eintrag {
max-width: 760px;
}
.glossar-definition {
font-size: 1.1rem;
line-height: 1.55;
color: var(--text);
border-left: 3px solid var(--btc);
padding-left: 15px;
margin: 0 0 20px;
max-width: 62ch;
}
/* Die Illustration im Eintrag. Das Bild bringt seinen dunklen Grund selbst
mit und steht deshalb in beiden Themen als geschlossene Karte da;
--ink als Hintergrund haelt die Flaeche dunkel, solange es noch laedt,
statt kurz hell aufzublitzen. */
.glossar-bild {
margin: 0 0 22px;
}
.glossar-bild img {
display: block;
width: 100%;
height: auto;
border-radius: 12px;
background: var(--ink);
}
.glossar-bild figcaption {
margin-top: 10px;
color: var(--text-3);
font-size: 0.86rem;
}
/* Kopfbild als Illustration (erzaehlende Beitraege, build/illustrationen.mjs).
Im Beitrag 3:1 ganz, in der Karte auf denselben 5:1-Streifen beschnitten
wie die gezeichneten Motive -- sonst waeren Karten mit Illustration hoeher
als ihre Nachbarn, und das Raster liefe unruhig. Der Grund bleibt dunkel,
auch beim Ueberfahren: Das Bild deckt ihn ohnehin, und beim Laden soll
nichts hell aufblitzen. */
.kopfbild-illu,
.artikel-karte.mit-bild:hover .kopfbild-illu {
background: var(--ink);
}
.kopfbild-illu img {
display: block;
width: 100%;
height: auto;
}
.artikel-karte.mit-bild .kopfbild-illu img {
aspect-ratio: 5 / 1;
object-fit: cover;
}
/* Illustration auf 404, Danke- und Unterstuetzen-Seite. Ueber die volle
Spalte, wie der Text daneben (13.09.2026, zuerst 560 px -- auf Stefans
Wunsch breit, siehe auch "Text nimmt volle Breite"). */
.seiten-bild {
margin: 18px 0 20px;
}
.seiten-bild img {
display: block;
width: 100%;
height: auto;
border-radius: 12px;
background: var(--ink);
}
/* Illustration im Beitragstext, {{illu:name}} (seit 14.09.2026). Volle
Spalte wie .seiten-bild, dunkler Grund gegen das Aufblitzen beim Laden. */
.textbild {
margin: 22px 0 24px;
}
.textbild img {
display: block;
width: 100%;
height: auto;
border-radius: 12px;
background: var(--ink);
}
/* Rubrikseite Storage (14.09.2026): Kopfbild 3:1 unter der Ueberschrift, und
je Gruppe ein Satz unter der Leiste. Keine Satzbreite -- der Text nimmt die
Spalte wie der Rest der Seite. */
.rubrik-bild {
margin: 14px 0 8px;
}
.gruppe-text {
color: var(--text-2);
margin: -2px 0 14px;
}
/* Storage: die Skizzen als Bildkarten und die Geraete mit Illustration
(14.09.2026). Die Bilder sind dunkle Raster wie die Kartenbilder; alles,
was stimmen muss, bleibt Text im HTML. */
.bildskizze {
margin: 26px 0 0;
}
.bildskizze-kopf {
color: var(--text-3);
font-size: 0.82rem;
margin: 16px 0 8px;
}
.bildskizze-achse {
display: flex;
justify-content: space-between;
color: var(--text-3);
font-size: 0.82rem;
border-top: 1px solid var(--linie);
padding-top: 6px;
margin-bottom: 10px;
}
.bildkarten {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.bildkarte {
display: flex;
flex-direction: column;
gap: 4px;
background: var(--karte);
border: 1px solid var(--linie);
border-radius: var(--radius);
overflow: hidden;
padding-bottom: 14px;
}
.bildkarte-betont {
border-color: var(--btc-linie);
}
.bildkarte-bild {
display: block;
width: 100%;
height: auto;
aspect-ratio: 2 / 1;
object-fit: cover;
background: var(--ink);
margin-bottom: 8px;
}
.bildkarte b,
.bildkarte span,
.bildkarte small {
padding: 0 16px;
}
.bildkarte span {
color: var(--text-2);
font-size: 0.92rem;
}
.bildkarte small {
color: var(--text-3);
font-size: 0.82rem;
}
.bildskizze-schluss {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
text-align: center;
background: var(--btc-bg);
border: 1px solid var(--btc-linie);
border-radius: var(--radius);
padding: 14px 16px;
margin-top: 12px;
}
.bildskizze-schluss span {
color: var(--text-2);
font-size: 0.92rem;
}
.bildkarten-folge {
grid-template-columns: 2fr 1fr;
}
.bildkarten-folge .bildskizze-schluss {
margin-top: 0;
}
.bildskizze-anders {
background: var(--karte);
border-color: var(--linie);
}
.bildskizze figcaption {
color: var(--text-3);
font-size: 0.84rem;
margin-top: 12px;
}
.geraet-illu {
display: block;
width: calc(100% + 32px);
height: auto;
aspect-ratio: 2 / 1;
object-fit: cover;
margin: -16px -16px 2px;
background: var(--ink);
border-radius: var(--radius) var(--radius) 0 0;
}
.geraet-breit .geraet-illu {
width: 240px;
margin: 0;
border-radius: 8px;
flex: 0 0 auto;
}
@media (max-width: 720px) {
.bildkarten,
.bildkarten-folge {
grid-template-columns: 1fr;
}
}
@media (max-width: 560px) {
.geraet-breit .geraet-illu {
width: 100%;
}
}
.glossar-weiter {
margin: 12px 0 0;
padding-left: 20px;
display: grid;
gap: 8px;
color: var(--text-2);
}
.glossar-weiter li {
line-height: 1.55;
}
/* Netz-Notizen auf /lage/.
Nur Tokens, keine festen Farben: ein Hex hier waere im dunklen Modus
unsichtbar und fiele beim Entwickeln nicht auf, weil man hell
entwickelt. Und bewusst NICHT gruen/rot eingefaerbt -- eine Notiz sagt
"das ist ungewoehnlich", nicht "das ist gut" oder "das ist schlecht". */
.notizen {
list-style: none;
margin: 0 0 12px;
padding: 0;
display: grid;
gap: 10px;
}
.notizen li {
border-left: 3px solid var(--linie);
padding: 2px 0 2px 14px;
}
.notiz-kopf {
display: flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 2px;
}
.notiz-kopf time {
font-size: 0.82rem;
color: var(--text-3);
}
.notiz-kopf b {
font-family: var(--mono);
font-variant-numeric: tabular-nums;
font-size: 0.95rem;
}
.notiz-text {
display: block;
line-height: 1.6;
color: var(--text-2);
}
/* Wer aus dem Feed kommt, landet auf einem Anker mitten in der Liste --
ohne Hervorhebung sucht er dann, welche Zeile gemeint war. */
.notizen li:target {
border-left-color: var(--btc);
}
@media (max-width: 620px) {
.lage-kopf h1 {
font-size: 1.7rem;
}
.lage-zahl b {
font-size: 1.9rem;
}
.lage-kurve {
height: 100px;
}
/* Auf schmalen Geraeten passen drei Achsenangaben nicht nebeneinander --
die Spanne ist die wichtigste, die Daten stehen darunter. */
.lage-achse {
flex-wrap: wrap;
}
}
.lage-verweis {
margin: 18px 0 0;
padding: 12px 14px;
background: var(--btc-bg);
border: 1px solid var(--btc-linie);
border-radius: var(--radius-s);
font-size: 0.92rem;
color: var(--text-2);
}
/* Vier Spalten mit Datum und zwei Betraegen passen auf 375 px nicht
nebeneinander: gemessen 372 px Tabelle in einem 335 px breiten Kasten.
Statt die Spalten zu quetschen, scrollt die Tabelle in ihrem eigenen
Kasten -- die Seite selbst bleibt schmal. Ein waagerechter Balken unter
der ganzen Seite waere der schlechtere Tausch. */
.lage-tabelle-huelle {
overflow-x: auto;
margin: 6px 0 10px;
}
.lage-tabelle-huelle .lage-tabelle {
margin: 0;
min-width: 380px;
}
/* ACHT MENUEPUNKTE AUF EINEM TELEFON.
Mit /halving/ und /kurs/ sind es acht statt sechs. Bei 375 px brach die
Leiste damit auf DREI Zeilen um, der Kopf wurde 287 px hoch -- ein
Drittel des Bildschirms, bevor der erste Inhalt kommt.
Engere Abstaende und eine Spur kleinere Schrift bringen sie auf zwei
Zeilen zurueck. Die Alternative waere eine waagerecht scrollende Leiste
gewesen: die bleibt einzeilig, versteckt aber die hinteren Punkte hinter
einer Geste, die niemand vermutet -- und Magazin stuende dann ganz
aussen. Zwei sichtbare Zeilen schlagen eine unsichtbare.
Die Trefferflaeche bleibt gross genug: 5 px oben und unten plus
Zeilenhoehe ergeben rund 30 px, und die Punkte liegen mit 4 px Abstand
nebeneinander. */
@media (max-width: 560px) {
.kopf-innen {
gap: 10px;
padding: 11px 14px;
}
.nav {
gap: 2px;
}
.nav a {
font-size: 0.83rem;
padding: 5px 8px;
}
}
/* ==========================================================================
Der umschaltbare Kursverlauf auf /kurs/ (kurs.js).
kv- und nicht kurs-: .kurs-kurve, .kurs-kopfzeile und vier weitere sind
auf dem Dashboard fuer die Muenzliste vergeben.
ALLES HIER GILT ERST, WENN kurs.js GELAUFEN IST. Ohne Javascript steht
im Markup die fertig gezeichnete Kurve ohne diese Klassen -- die Regeln
treffen dann nichts und stoeren auch nichts.
========================================================================== */
.kv-kopf {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 12px;
}
.kv-bereiche {
display: flex;
gap: 4px;
flex-wrap: wrap;
}
.kv-bereich {
font: inherit;
font-size: 0.85rem;
font-weight: 500;
color: var(--text-2);
background: var(--karte);
border: 1px solid var(--linie);
border-radius: var(--radius-s);
padding: 6px 12px;
cursor: pointer;
}
.kv-bereich:hover {
color: var(--text);
border-color: var(--btc-linie);
}
/* aria-pressed traegt den Zustand ohnehin -- die Farbe folgt ihm, statt
eine zweite Klasse dafuer zu pflegen. Wer das Attribut vergisst, sieht
es sofort. */
.kv-bereich[aria-pressed="true"] {
color: var(--btc-text);
background: var(--btc);
border-color: var(--btc);
}
.kv-wandel {
font-family: var(--mono);
font-variant-numeric: tabular-nums;
font-size: 0.88rem;
color: var(--text-2);
}
.kv-wandel.hoch { color: var(--ja); }
.kv-wandel.runter { color: var(--nein); }
.kv-figur {
position: relative;
margin: 0 0 12px;
}
/* touch-action: der Zeiger soll am Chart ablesen, nicht die Seite
scrollen -- aber nur waagerecht. Senkrecht bleibt das Wischen. */
.kv-kurve {
cursor: crosshair;
touch-action: pan-y;
}
.kv-kurve:focus-visible {
outline: 2px solid var(--btc);
outline-offset: 2px;
}
.kv-lot {
stroke: var(--text-3);
stroke-width: 1;
stroke-dasharray: 3 3;
}
.kv-punkt {
position: absolute;
width: 9px;
height: 9px;
margin: -5px 0 0 -5px;
border-radius: 50%;
background: var(--btc);
border: 2px solid var(--karte);
pointer-events: none;
}
.kv-tafel {
position: absolute;
top: -4px;
left: 0;
display: none;
flex-direction: column;
gap: 1px;
background: var(--karte);
border: 1px solid var(--linie);
border-radius: var(--radius-s);
box-shadow: var(--schatten);
padding: 6px 10px;
pointer-events: none;
white-space: nowrap;
}
.kv-tafel.sichtbar { display: flex; }
.kv-tafel b {
font-family: var(--mono);
font-variant-numeric: tabular-nums;
font-size: 0.95rem;
color: var(--text);
}
.kv-tafel span {
font-size: 0.76rem;
color: var(--text-3);
}
/* Der Hinweis auf die Umschaltbarkeit gilt nur, solange nicht
umgeschaltet werden kann. Sobald kurs.js den Kopf eingesetzt hat, ist
er falsch -- und verschwindet. */
.kv-ohne-js { margin-top: -4px; }
#kurs-verlauf:has(.kv-kopf) ~ .kv-ohne-js { display: none; }
/* Karten mit Vorschaubild (/magazin/).
Das Bild liegt randlos oben in der Karte: negative Raender heben das
Innenmass auf, und der obere Radius folgt dem der Karte. Dieselbe
Machart wie .kopfbild im Beitrag, nur kuerzer -- 1200x240 waere in
einer 260 px breiten Karte ein Streifen von 52 px, und darin ist kein
Motiv zu erkennen. Der Ausschnitt zeigt deshalb die Mitte. */
.artikel-karte.mit-bild {
padding-top: 0;
overflow: hidden;
}
.artikel-karte.mit-bild .kopfbild {
margin: 0 -18px 14px;
border-radius: 0;
}
/* KEINE FESTE HOEHE. Das Motiv ist 1200x240 und wird mit
preserveAspectRatio="xMidYMid meet" eingepasst -- bei einer festen Hoehe
von 92 px blieben oben und unten je 12 px leer, weil 5:1 nicht in 3,7:1
passt. Laesst man die Hoehe aus der Breite folgen, entsteht der Streifen
in genau dem Verhaeltnis, in dem gezeichnet wurde. */
.artikel-karte.mit-bild .kopfbild svg {
width: 100%;
height: auto;
}
/* Beim Ueberfahren hebt sich das Motiv etwas heraus -- der einzige
Hinweis, dass die ganze Karte ein Verweis ist. */
.artikel-karte.mit-bild:hover .kopfbild {
background: var(--btc-bg);
}
/* Die Liste der vorgerechneten Sparplaene -- im Rechner und auf den Seiten
der Serie dieselbe. Zwei Spalten in einer Zeile: links der Startmonat,
rechts das Ergebnis. Sie stand zuerst unter einem Klassennamen aus einem
ANDEREN Projekt (netzteil-liste) und war damit ungestylt; hier faellt so
etwas nicht auf, weil eine nackte Liste immer noch lesbar ist. */
.sparplan-liste {
list-style: none;
margin: 14px 0 0;
padding: 0;
}
.sparplan-liste li {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
padding: 7px 0;
border-bottom: 1px solid var(--linie-weich);
}
.sparplan-liste li:last-child {
border-bottom: 0;
}
.sparplan-liste li span {
font-variant-numeric: tabular-nums;
font-size: 0.88rem;
color: var(--text-3);
white-space: nowrap;
}
/* ==========================================================================
Spenden -- der Kasten auf /unterstuetzen/ und die leise Zeile
==========================================================================
DER KASTEN SIEHT AUS WIE DER EINTRAGEKASTEN, und das ist Absicht: Es ist
dieselbe Sorte Bitte, und zwei verschiedene Gestaltungen fuer zwei Bitten
sehen aus, als kaeme eine davon von woanders.
DER QR-CODE BEKOMMT KEINE FARBEN AUS DEN TOKENS. Er bringt seinen hellen
Grund selbst mit, auch im Nachtmodus -- ein QR-Code, den der Dunkelmodus
umdreht, wird von vielen Kameras nicht mehr gelesen. Deshalb steht er
hier auf einer eigenen weissen Flaeche und nicht auf --karte.
========================================================================== */
.spende {
margin-top: 8px;
padding: 22px;
background: var(--karte);
border: 1px solid var(--linie);
border-radius: var(--radius);
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 22px 26px;
align-items: start;
}
.spende > .spende-ln {
grid-column: 1 / -1;
}
.spende-haupt > b {
font-family: var(--disp);
font-size: 1.12rem;
letter-spacing: -0.01em;
}
.spende-haupt > p,
.spende-ln > p {
margin: 6px 0 0;
color: var(--text-2);
font-size: 0.94rem;
line-height: 1.6;
}
/* Die Adresse bricht mitten im Zeichen um -- sie ist kein Wort, und auf
einem Telefon passt sie in keine Zeile. break-all statt break-word:
letzteres laesst eine 42 Zeichen lange Kette lieber ueberlaufen. */
.spende-adr {
margin: 14px 0 0;
padding: 11px 13px;
background: var(--karte-2);
border: 1px solid var(--linie);
border-radius: var(--radius-s);
font-family: var(--mono);
font-size: 0.92rem;
line-height: 1.6;
word-break: break-all;
color: var(--text-2);
}
/* Die vier Zeichen am Anfang und am Ende -- die, die man nach dem Einfuegen
vergleicht. Sie sind dunkler und fetter, nicht orange: Orange ist auf
dieser Seite die Farbe des Knopfes, und zwei orange Stellen nebeneinander
streiten sich. */
.spende-rand {
color: var(--text);
font-weight: 600;
}
.spende-mitte {
color: var(--text-3);
}
.spende-adr-ln {
margin-top: 10px;
}
.spende-adr-ln a {
color: var(--text);
}
.spende-knoepfe {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin-top: 14px;
}
.spende-knopf,
.spende-knopf-rand {
font-family: var(--sans);
font-size: 0.9rem;
font-weight: 600;
padding: 10px 18px;
border-radius: var(--radius-s);
border: 1px solid var(--btc);
text-decoration: none;
cursor: pointer;
white-space: nowrap;
}
.spende-knopf {
background: var(--btc);
color: var(--btc-text);
}
.spende-knopf:hover {
filter: brightness(1.08);
}
.spende-knopf-rand {
background: transparent;
border-color: var(--linie);
color: var(--text-2);
}
.spende-knopf-rand:hover {
border-color: var(--btc);
color: var(--text);
}
/* Die Meldung nimmt ihre Zeile auch dann ein, wenn sie leer ist -- sonst
springt der Kasten beim ersten Klick um eine Zeilenhoehe. */
.spende-meldung {
flex: 1 1 100%;
min-height: 1.4em;
font-size: 0.84rem;
line-height: 1.4;
color: var(--text-3);
}
.spende-meldung.ist-gut {
color: var(--ja);
}
.spende-meldung.ist-nein {
color: var(--nein);
}
.spende-klein {
margin: 14px 0 0;
color: var(--text-3);
font-size: 0.82rem;
line-height: 1.6;
}
.spende-qr {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
text-align: center;
}
.spende-qr svg {
width: 156px;
height: 156px;
display: block;
border: 1px solid var(--linie);
border-radius: var(--radius-s);
}
.spende-qr span {
font-size: 0.78rem;
color: var(--text-3);
max-width: 156px;
}
.spende-ln {
padding-top: 18px;
border-top: 1px solid var(--linie-weich);
}
.spende-ln > b {
font-family: var(--disp);
font-size: 1rem;
}
/* Unter 700 px stehen QR und Text untereinander. Der QR rutscht dabei
NACH UNTEN und nicht nach oben: Wer am Telefon liest, hat die Wallet auf
demselben Geraet und braucht den Zahlungslink, nicht die Kamera. */
@media (max-width: 700px) {
.spende {
grid-template-columns: minmax(0, 1fr);
padding: 18px;
}
.spende-qr {
order: 2;
align-items: flex-start;
text-align: left;
}
}
/* Die leise Zeile im Fuss der Vertrauensleiste und in der Autoren-Box.
Sie ist bewusst kein Kasten und kein Knopf -- der Eintragekasten steht
auf denselben Seiten, und zwei Bitten in Kastengroesse schwaechen sich
gegenseitig. */
.spenden-zeile {
margin: 6px 0 0;
color: var(--text-3);
font-size: 0.8rem;
line-height: 1.55;
}