/* ========================================================================== app-v2.css — Ergänzung zu app.css für die v2-Oberfläche ========================================================================== Diese Datei ist ADDITIV gedacht: app.css bleibt wie sie ist, diese Datei kommt danach. Sie enthält nur, was neu ist — der dunkle Kopf mit Laufband, die Marktzeile, die Rubrikleisten mit Kicker, der Kursblock mit Kennzahlenrail, der dunkle Einstiegsblock und die dunkle Fußzeile. Alles Übrige (Karten, Kennzahlen, Tabellen, Hinweiskästen, Glossar, Kopfbilder) steckt schon in app.css und wird weiterverwendet. Reihenfolge im : schriften.css → app.css → app-v2.css Sprache der Klassennamen bleibt deutsch, wie im Rest des Projekts. ========================================================================== */ /* --- Neue Farbwerte ------------------------------------------------------- app.css deckt die Papierflächen ab. Der v2-Kopf und die Fußzeile stehen auf Tinte, und darauf brauchen Grün und Rot eigene Werte: --ja/--nein sind für hellen Grund gemacht und kommen auf #17150f nur auf 2,6:1. --ink-ja/--ink-nein sind die dunkelmodus-Werte und liefern rund 6:1. */ :root { --ink: #17150f; --ink-2: #23201a; --ink-text: #f7f3ea; --ink-text-2: #a9a29a; --ink-linie: #332f27; --ink-ja: #57d894; --ink-nein: #ff8b7d; /* Orange AUF TINTE. --btc ist im Hellmodus fuer hellen Grund abgedunkelt (#a85500) und kommt auf der Tinte des Kopfes nur auf 3,45:1 -- gemessen am 05.09.2026 am Wort "Live" im Laufband. Das Laufband ist aber in BEIDEN Themen dunkel, also braucht es hier den hellen Ton, unabhaengig vom Thema. Derselbe Gedanke wie bei --ink-ja/--ink-nein. */ --ink-btc: #ffa93a; } html[data-theme="dark"] { --ink: #080a0d; --ink-2: #14171d; --ink-text: #e9e6e0; --ink-text-2: #8b8d97; --ink-linie: #23272f; } /* [data-theme="light"] und NICHT "hell": thema.js schreibt die englischen Werte light/dark ans , app.css prueft auf dieselben. In der gelieferten Fassung stand hier "hell" -- damit griff der Waechter nie, und wer bei dunklem Betriebssystem ausdruecklich HELL waehlte, bekam trotzdem die dunklen Tintenwerte im Kopf. Gemessen am 05.09.2026. */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) { --ink: #080a0d; --ink-2: #14171d; --ink-text: #e9e6e0; --ink-text-2: #8b8d97; --ink-linie: #23272f; } } /* --- Klebender Kopf ------------------------------------------------------- Laufband und Kopfzeile sitzen zusammen in einem Rahmen, der klebt. Das Schrumpfen macht kopf-schmal.js, indem es .schmal auf den Rahmen setzt -- die Maße stehen hier, nicht im Skript. */ .kopfrahmen { position: sticky; top: 0; z-index: 30; transition: box-shadow 0.18s ease; } .kopfrahmen.schmal { box-shadow: 0 1px 0 rgba(0, 0, 0, 0.28), 0 8px 24px rgba(0, 0, 0, 0.18); } .laufband { height: 38px; overflow: hidden; background: var(--ink); color: var(--ink-text-2); border-bottom: 1px solid var(--ink-linie); transition: height 0.18s ease, opacity 0.18s ease, border-bottom-width 0.18s ease; } .kopfrahmen.schmal .laufband { height: 0; opacity: 0; border-bottom-width: 0; } .laufband-innen { max-width: 1180px; margin: 0 auto; padding: 0 24px; display: flex; align-items: stretch; height: 38px; } .laufband-live { display: flex; align-items: center; gap: 7px; padding-right: 16px; margin-right: 16px; border-right: 1px solid var(--ink-linie); font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-btc); white-space: nowrap; } .laufband-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-btc); flex: 0 0 auto; } /* Der eigene Überlauf-Schnitt ist Pflicht: ohne ihn schieben sich die nowrap-Kinder über den Zeitstempel rechts. */ .laufband-werte { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; overflow: hidden; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 0.78rem; white-space: nowrap; } .laufband-wert { display: flex; align-items: baseline; gap: 7px; padding: 0 18px; border-left: 1px solid var(--ink-linie); } .laufband-wert:first-child { padding-left: 0; border-left: 0; } .laufband-wert b { color: var(--ink-text); font-weight: 500; } .laufband-wert .zahl { color: var(--ink-text); } .laufband-wert .auf { color: var(--ink-ja); } .laufband-wert .ab { color: var(--ink-nein); } .laufband-stand { display: flex; align-items: center; padding-left: 16px; margin-left: 16px; border-left: 1px solid var(--ink-linie); font-family: var(--mono); font-size: 0.72rem; color: var(--ink-text-2); white-space: nowrap; } .kopf-dunkel { position: relative; z-index: 20; background: var(--ink); color: var(--ink-text); } .kopf-innen { max-width: 1180px; margin: 0 auto; padding: 0 24px; } .kopf-reihe { display: flex; align-items: center; gap: 24px; padding: 18px 0 16px; transition: padding 0.18s ease; } .kopfrahmen.schmal .kopf-reihe { padding: 9px 0 8px; } /* Wortmarke: das Zeichen liegt als Inline-SVG im Markup, NICHT als CSS-Maske. img/marke.svg ist eine Illustration mit eigener Maske; als alpha-Maske verliert sie die Ausstanzung und wird ein volles Quadrat. */ .logo-dunkel { display: inline-flex; align-items: center; gap: 11px; font-family: var(--disp); font-weight: 800; letter-spacing: -0.03em; color: var(--ink-text); text-decoration: none; white-space: nowrap; } .logo-dunkel svg { display: block; flex: 0 0 auto; width: 27px; height: 27px; color: var(--ink-btc); transition: width 0.18s ease, height 0.18s ease; } .logo-dunkel .wort { font-size: 1.6rem; transition: font-size 0.18s ease; } .logo-dunkel i { font-style: normal; color: var(--ink-btc); } .kopfrahmen.schmal .logo-dunkel svg { width: 21px; height: 21px; } .kopfrahmen.schmal .logo-dunkel .wort { font-size: 1.18rem; } .suche-dunkel { display: inline-flex; align-items: center; gap: 9px; flex: 1 1 auto; max-width: 400px; padding: 9px 15px; overflow: hidden; border: 1px solid var(--ink-linie); border-radius: 7px; background: var(--ink-2); color: var(--ink-text-2); font-size: 0.88rem; text-decoration: none; white-space: nowrap; } .suche-dunkel:hover { border-color: var(--ink-btc); } .suche-dunkel::after { content: "/"; margin-left: auto; padding: 1px 7px; border: 1px solid var(--ink-linie); border-radius: 5px; font-family: var(--mono); font-size: 0.72rem; line-height: 1.5; } .kopf-knoepfe { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: 0 0 auto; } .knopf-rand { padding: 9px 17px; border: 1px solid var(--ink-linie); border-radius: 7px; color: var(--ink-text); font-size: 0.86rem; font-weight: 600; text-decoration: none; white-space: nowrap; } .knopf-rand:hover { border-color: var(--ink-btc); color: var(--ink-btc); } /* DER SPENDENKNOPF IST ORANGE UMRANDET, NICHT ORANGE GEFUELLT. Gefuellt ist der Rundbrief, und das soll er bleiben: Bei null Klicks aus der Suche ist eine Mailadresse mehr wert als ein einmaliger Betrag. Ein zweiter gefuellter Knopf daneben haette daraus zwei gleich laute Bitten gemacht, und zwei gleich laute Bitten sind eine halbe. Umrandet statt neutral ist er trotzdem: Ein Knopf, der aussieht wie der Verweis auf den Boersenvergleich, ist kein Aufruf, sondern ein Menuepunkt. Rand und Schrift in Orange, dazu ein Hauch Fuellung -- das liest sich als zweiter Aufruf, ohne den ersten zu ueberschreien. ES IST --ink-btc UND NICHT --btc. Der Kopf steht in BEIDEN Themen auf Tinte; --btc ist fuer hellen Grund abgedunkelt und kommt dort nur auf 3,45:1. Derselbe Grund, aus dem das Wort "Live" im Laufband --ink-btc traegt. Zwischen ihm und dem Rundbrief steht "Börsen vergleichen" in Grau. Das ist kein Zufall: Zwei orange Flaechen unmittelbar nebeneinander verschmelzen zu einer Flaeche, aus der niemand zwei Angebote liest. */ .knopf-spende { border-color: var(--ink-btc); color: var(--ink-btc); /* 10 Prozent statt einer eigenen Farbe: Die Fuellung soll die Tinte tönen, nicht sie ersetzen -- und sie muss auf beiden Tintenwerten (#17150f hell gewaehlt, #080a0d dunkel gewaehlt) gleich aussehen. */ background: rgba(255, 169, 58, 0.1); } .knopf-spende:hover { background: var(--ink-btc); border-color: var(--ink-btc); color: var(--ink); } /* DER SPENDENKNOPF GEHT FRUEHER ALS DIE UEBRIGEN. Die Knopfreihe ist nicht elastisch: Kurschip, zwei Knoepfe und der Rundbrief stehen mit white-space: nowrap nebeneinander, nachgeben kann nur das Suchfeld daneben. Mit einem dritten Knopf bleibt davon bei 1000 px so wenig uebrig, dass nur noch die Lupe und ein angeschnittenes Wort dastehen -- und das Suchfeld ist das Bauteil, das jemand wirklich benutzt. Gerechnet: Bei 1180 px bleiben innen 1132 px. Logo, Kurschip, drei Knoepfe und die Abstaende nehmen rund 750 davon, das Suchfeld bekommt also knapp 390 -- genug fuer den Platzhalter und das Tastaturzeichen. Eine Stufe tiefer reicht es dafuer nicht mehr. Ab 900 px faellt er ohnehin mit .kopf-knoepfe .knopf-rand weg. Diese Regel zieht die Grenze fuer ihn allein nach oben, damit dazwischen der Kopf so aussieht wie vorher. Erreichbar bleibt die Seite ueber die Fusszeile, die Autoren-Box und die Vertrauensleiste. */ @media (max-width: 1180px) { .knopf-spende { display: none; } } .knopf-voll { padding: 9px 17px; border: 1px solid var(--btc); border-radius: 7px; background: var(--btc); color: var(--btc-text); font-size: 0.86rem; font-weight: 600; text-decoration: none; white-space: nowrap; } /* Kurschip: nur im schmalen Zustand sichtbar, ersetzt das Laufband. */ .kurschip { display: flex; align-items: baseline; gap: 8px; padding: 5px 11px; border: 1px solid var(--ink-linie); border-radius: 7px; background: var(--ink-2); font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 0.8rem; white-space: nowrap; opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease; } .kopfrahmen.schmal .kurschip { opacity: 1; transform: translateY(0); pointer-events: auto; } .kurschip b { color: var(--ink-text); font-weight: 500; } .kurschip .ab { color: var(--ink-nein); } .kurschip .auf { color: var(--ink-ja); } .nav-dunkel { display: flex; align-items: stretch; gap: 2px; flex-wrap: wrap; border-top: 1px solid var(--ink-linie); } .nav-dunkel a { display: flex; align-items: center; gap: 7px; padding: 11px 14px; font-size: 0.9rem; font-weight: 500; color: var(--ink-text); text-decoration: none; transition: padding 0.18s ease, font-size 0.18s ease; } .nav-dunkel a:hover { color: var(--ink-btc); } .nav-dunkel a[aria-current="page"] { font-weight: 600; color: var(--ink-btc); box-shadow: inset 0 -2px 0 var(--ink-btc); } .kopfrahmen.schmal .nav-dunkel a { padding: 7px 14px; font-size: 0.85rem; } /* DAS ABZEICHEN AM MENUEPUNKT "NEWS" HEISST .nav-abzeichen und wird von build/notizen.mjs erzeugt; app.css gestaltet es bereits. Es liegt absolut und braucht einen Anker -- .nav a in app.css bringt ihn mit, .nav-dunkel hatte ihn nicht. Gemessen am 05.09.2026: ohne diese Zeile sass das Abzeichen bei x=1257 in der rechten oberen Ecke des Kopfes, waehrend sein Menuepunkt bei x=283 stand. Sichtbar wird das nur fuer Wiederkehrer mit ungelesenen Notizen -- ein Fehler, der von selbst nie auffaellt. Die gelieferte Fassung hatte hier stattdessen eine Regel .nav-zahl, die kein Markup dieser Seite je erzeugt. */ .nav-dunkel a { position: relative; } /* --- Inhaltsbreite -------------------------------------------------------- */ .inhalt { max-width: 1180px; margin: 0 auto; padding: 0 24px 72px; } /* --- Rubrikleiste mit Kicker --------------------------------------------- Der Rhythmus der Seite: Kicker in Orange, Titel in Bricolage, darunter eine 2px-Linie in Textfarbe. Sie trennt kräftiger als die 1px-Linien innerhalb eines Abschnitts und macht die Seite auf einen Blick lesbar. */ .rubrik { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 2px solid var(--text); margin-top: 36px; } .rubrik-kicker { display: block; font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--btc); margin-bottom: 4px; } .rubrik h2 { font-family: var(--disp); margin: 0; letter-spacing: -0.02em; font-size: 1.5rem; font-weight: 800; } .rubrik-nebensache { font-family: var(--mono); font-size: 0.74rem; color: var(--text-3); padding-bottom: 3px; } .rubrik-mehr { font-family: var(--mono); font-size: 0.82rem; color: var(--btc); padding-bottom: 5px; } /* Die Bloecke auf /lage/ trennten sich bisher selbst durch eine 1px-Linie oben. Jetzt trennt die Rubrikleiste -- beides zusammen waeren zwei Striche im Abstand von einer Zeile. Die Leiste bringt ihren Abstand (36 px) selbst mit, deshalb faellt hier auch der eigene weg. */ .lage-block { border-top: 0; padding-top: 0; margin-top: 0; } /* Ein Kasten direkt unter der Rubrikleiste schließt oben an sie an. */ .rubrik + .kasten-anschluss { border-top: 0; border-radius: 0 0 var(--radius) var(--radius); } /* --- Kursblock mit Kennzahlenrail ---------------------------------------- */ .kurs-oben { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; margin-top: 26px; align-items: start; } .kursblock { min-width: 0; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: 20px 22px 18px; } .kursblock .gross { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 3rem; font-weight: 500; letter-spacing: -0.04em; line-height: 1; } .kursblock .gross em { font-style: normal; font-size: 1.1rem; color: var(--text-2); letter-spacing: 0; } .delta { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 0.88rem; font-weight: 500; border-radius: 6px; padding: 3px 9px; } .delta.auf { color: var(--ja); background: var(--ja-bg); border: 1px solid var(--ja-linie); } .delta.ab { color: var(--nein); background: var(--nein-bg); border: 1px solid var(--nein-linie); } .zeitraum { display: flex; gap: 3px; background: var(--karte-2); border: 1px solid var(--linie); border-radius: 8px; padding: 3px; } .zeitraum button { font-family: var(--sans); font-size: 0.82rem; font-weight: 500; color: var(--text-2); background: transparent; border: 0; border-radius: 6px; padding: 5px 12px; cursor: pointer; } .zeitraum button:hover { color: var(--text); } .zeitraum button[aria-pressed="true"] { font-weight: 600; color: var(--text); background: var(--karte); border: 1px solid var(--linie); box-shadow: var(--schatten); } .netzrail { min-width: 0; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; } .netzrail-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 18px; background: var(--karte-2); border-bottom: 1px solid var(--linie); } .netzrail-kopf h2 { margin: 0; font-family: var(--sans); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.09em; font-weight: 600; color: var(--text-2); } .netzrail-zeile { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--linie-weich); } .netzrail-zeile:last-child { border-bottom: 0; } .netzrail-zeile b { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 0.98rem; font-weight: 500; } .netzrail-zeile em { font-style: normal; font-size: 0.76rem; color: var(--text-3); } .balken { height: 6px; border-radius: 4px; background: var(--linie-weich); overflow: hidden; } .balken > i { display: block; height: 100%; background: var(--btc); } /* --- Marktzeile ---------------------------------------------------------- Acht Spalten. Die Rasterangabe steht an EINER Stelle und wird von Kopf und Zeilen geteilt, damit nichts auseinanderläuft. */ .markt { --markt-raster: 48px minmax(0, 1.5fr) 122px 118px 84px 84px 128px 104px; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; } /* Der Warte- und der Fehlerzustand sind einzelne Absaetze im selben Rahmen. Ohne diese Zeile klebten sie an seinem Rand -- die Polsterung sitzt sonst an den Zeilen, und die gibt es dann ja gerade nicht. */ .markt > p { margin: 0; padding: 14px 20px; } .markt-kopf, .markt-zeile { display: grid; grid-template-columns: var(--markt-raster); gap: 14px; align-items: center; padding: 12px 20px; } .markt-kopf { padding: 11px 20px; background: var(--karte-2); border-bottom: 1px solid var(--linie); font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-3); } .markt-kopf .sortiert { color: var(--text); display: flex; align-items: center; gap: 5px; justify-content: flex-end; } .markt-zeile { border-bottom: 1px solid var(--linie-weich); text-decoration: none; color: inherit; } .markt-zeile:last-of-type { border-bottom: 0; } .markt-zeile:hover { background: var(--karte-2); } .markt-rang { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 0.84rem; color: var(--text-3); } .markt-muenze { display: flex; align-items: center; gap: 11px; min-width: 0; } .markt-muenze b { display: block; font-size: 0.93rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .markt-muenze i { font-style: normal; display: block; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 0.72rem; color: var(--text-3); } .markt-zahl { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; } .markt-zahl.preis { font-size: 0.96rem; } .markt-zahl.delta { font-size: 0.86rem; padding: 0; border: 0; background: none; display: block; } .markt-zahl.wert { font-size: 0.9rem; color: var(--text-2); } .anteil { display: flex; align-items: center; gap: 7px; justify-content: flex-end; } .anteil-balken { width: 32px; height: 5px; border-radius: 3px; background: var(--linie-weich); overflow: hidden; flex: 0 0 auto; } .anteil-balken > i { display: block; height: 100%; background: var(--btc); } .anteil em { font-style: normal; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 0.8rem; color: var(--text-2); min-width: 4.2ch; text-align: right; } /* Die Sieben-Tage-Kurve. Mittig, weil sie keine Achse hat, an der sie ausgerichtet sein könnte — sie zeigt die Form, nicht die Werte. */ .funke { display: flex; justify-content: center; min-width: 0; } .funke svg { display: block; } /* Grün und Rot der Veränderungsspalten. Steht hier und nicht bei .markt-zahl, weil eine Zahl ohne Vorzeichen keine Farbe bekommt. */ .markt-zahl.delta.hoch { color: var(--ja); } .markt-zahl.delta.runter { color: var(--nein); } /* Die Plakette ist dieselbe wie in der alten Kurstafel — nur vier Pixel kleiner, weil die Zeile hier flacher ist. */ .markt-muenze .kurs-marke { width: 30px; height: 30px; } .markt-fuss { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 20px; background: var(--karte-2); border-top: 1px solid var(--linie); font-size: 0.82rem; line-height: 1.6; color: var(--text-3); } .markt-fuss span { max-width: 78ch; } .markt-fuss b { font-weight: 600; color: var(--text-2); } /* Filterchips über der Tabelle */ .filterreihe { margin-top: 22px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .chip { display: inline-flex; align-items: center; gap: 7px; font-family: var(--sans); font-size: 0.85rem; font-weight: 500; color: var(--text-2); background: var(--karte); border: 1px solid var(--linie); border-radius: 999px; padding: 7px 14px; cursor: pointer; } .chip:hover { border-color: var(--btc); color: var(--text); } .chip[aria-pressed="true"] { font-weight: 600; color: var(--btc); background: var(--btc-bg); border-color: var(--btc); } .chip em { font-style: normal; font-family: var(--mono); font-size: 0.76rem; color: var(--text-3); } .filterfeld { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: 0 1 260px; min-width: 180px; padding: 7px 13px; background: var(--karte); border: 1px solid var(--linie); border-radius: 999px; color: var(--text-3); } .filterfeld input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; font-family: var(--sans); font-size: 0.85rem; color: var(--text); } .filterfeld input:focus { outline: none; } /* --- Editoriale Magazinreihe --------------------------------------------- */ .magazin-zwei { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 26px; align-items: start; margin-top: 22px; } .lead h3 { font-family: var(--disp); margin: 0; font-size: 1.62rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.14; color: var(--text); text-wrap: balance; } .lead:hover { color: var(--btc); } .ressort { font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.09em; font-weight: 500; color: var(--btc-text); background: var(--btc); border-radius: 4px; padding: 2px 7px; } .schlagzeile { display: grid; grid-template-columns: minmax(0, 1fr) 104px; gap: 16px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--linie); text-decoration: none; color: inherit; } .schlagzeile:first-child { padding-top: 0; } .schlagzeile:last-child { padding-bottom: 0; border-bottom: 0; } .schlagzeile:hover { color: var(--btc); } .schlagzeile b { display: block; font-family: var(--disp); font-size: 1.04rem; font-weight: 800; letter-spacing: -0.015em; line-height: 1.25; } /* --- Dunkler Einstiegsblock und Fußzeile --------------------------------- */ .einstieg { margin-top: 36px; background: var(--ink); color: var(--ink-text); border-radius: var(--radius); padding: 26px 28px; } .einstieg h2 { font-family: var(--disp); margin: 0 0 18px; letter-spacing: -0.02em; font-size: 1.5rem; font-weight: 800; } .einstieg-karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .einstieg-karte { display: flex; flex-direction: column; gap: 7px; padding: 18px 19px; background: var(--ink-2); border: 1px solid var(--ink-linie); border-radius: 9px; text-decoration: none; color: inherit; } .einstieg-karte:hover { border-color: var(--btc); } .einstieg-karte b { font-family: var(--disp); font-size: 1.1rem; font-weight: 800; letter-spacing: -0.015em; } .einstieg-karte span { font-size: 0.9rem; line-height: 1.55; color: var(--ink-text-2); } .fuss-dunkel { background: var(--ink); color: var(--ink-text-2); margin-top: 8px; } .fuss-innen { max-width: 1180px; margin: 0 auto; padding: 28px 24px 32px; display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 26px; } .fuss-spalte { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .fuss-spalte b { font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--ink-text); font-weight: 500; } .fuss-spalte a { font-size: 0.86rem; color: var(--ink-text-2); text-decoration: none; } .fuss-spalte a:hover { color: var(--btc); } /* --- Werkzeugkarten ------------------------------------------------------ */ .werkzeuge-vier { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 16px; } .werkzeugkarte { display: flex; flex-direction: column; gap: 6px; padding: 17px 18px; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); text-decoration: none; color: inherit; } .werkzeugkarte:hover { border-color: var(--btc); background: var(--btc-bg); } .werkzeugkarte b { font-family: var(--disp); font-size: 1.05rem; font-weight: 800; letter-spacing: -0.015em; } .werkzeugkarte .stand { font-family: var(--mono); font-size: 0.76rem; color: var(--btc); margin-top: 2px; } /* --- Der Befundkasten der Rechner ----------------------------------------- Ein Kopf in Grün oder Rot, darunter eine
mit dem, was geprüft wurde, unten eine Fußnote auf --karte-2. Dieselbe Form für „Adresse geprüft" und „Haltefrist": es ist dieselbe Art von Aussage, und zwei Formen dafür wären zwei Gestaltungen für einen Gedanken. --ink-ja / --ink-nein kommen hier NICHT vor: das ist die dunkle Leiste oben, hier sitzt Text auf hellem Grund. */ .befund { margin-top: 16px; border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; } .befund.ja { border-color: var(--ja-linie); } .befund.nein { border-color: var(--nein-linie); } .befund.acht { border-color: var(--acht-linie); } .befund-kopf { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; padding: 13px 16px; border-bottom: 1px solid var(--linie); background: var(--karte-2); } .befund.ja > .befund-kopf { background: var(--ja-bg); border-bottom-color: var(--ja-linie); } .befund.nein > .befund-kopf { background: var(--nein-bg); border-bottom-color: var(--nein-linie); } .befund.acht > .befund-kopf { background: var(--acht-bg); border-bottom-color: var(--acht-linie); } .befund-kopf b { font-size: 1rem; font-weight: 600; color: var(--text); } /* Das Zeichen im Kreis: Häkchen oder Kreuz. Weiß auf --ja/--nein, das sind die beiden Farben, die dafür gemacht sind. */ .befund-zeichen { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; flex: 0 0 auto; line-height: 0; } .befund.ja .befund-zeichen { background: var(--ja); } .befund.nein .befund-zeichen { background: var(--nein); } /* Gelb traegt kein Weiss -- --acht ist auf hellem Grund ein dunkles Braun, im Dunkelmodus ein helles Gelb. Deshalb der Kreis in der Farbe selbst und das Zeichen in der Grundfarbe der Seite. */ .befund.acht .befund-zeichen { background: var(--acht); color: var(--grund); } .befund-etikett { margin-left: auto; padding: 2px 8px; border: 1px solid var(--linie); border-radius: 5px; background: var(--karte); font-family: var(--mono); font-size: 0.76rem; color: var(--text-2); white-space: nowrap; } .befund.ja .befund-etikett { border-color: var(--ja-linie); } .befund.nein .befund-etikett { border-color: var(--nein-linie); } .befund.acht .befund-etikett { border-color: var(--acht-linie); } .befund-liste { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); background: var(--karte); } .befund-liste dt, .befund-liste dd { margin: 0; padding: 10px 16px; border-bottom: 1px solid var(--linie-weich); } .befund-liste dt { font-size: 0.86rem; color: var(--text-3); white-space: nowrap; } .befund-liste dd { font-size: 0.9rem; min-width: 0; } /* Die letzte Zeile trägt keine Linie -- darunter kommt entweder die Fußnote mit eigener Oberlinie oder der Rand des Kastens. */ .befund-liste dt:nth-last-of-type(1), .befund-liste dd:nth-last-of-type(1) { border-bottom: 0; } .befund-liste .stimmt { color: var(--ja); } .befund-liste code, .befund-text code { font-family: var(--mono); font-size: 0.94em; background: var(--karte-2); border: 1px solid var(--linie); border-radius: 4px; padding: 1px 6px; } .befund-text { padding: 13px 16px; background: var(--karte); } .befund-text p { margin: 0 0 8px; font-size: 0.88rem; line-height: 1.55; color: var(--text-2); } .befund-text p:last-child { margin-bottom: 0; } /* Die Adresse mit der markierten Stelle. word-break, weil eine Bech32-Adresse 62 Zeichen ohne Trennmöglichkeit ist. */ .befund-adresse { font-family: var(--mono); font-size: 0.88rem; line-height: 1.6; word-break: break-all; } .befund-adresse mark { background: var(--nein-bg); color: var(--nein); font-weight: 600; border-radius: 3px; padding: 0 2px; } .befund-fuss { margin: 0; padding: 12px 16px; background: var(--karte-2); border-top: 1px solid var(--linie); font-size: 0.86rem; line-height: 1.55; color: var(--text-2); } /* Die Haltedauer steht ueber dem Paar: sie ist fuer beide Laender dieselbe Zahl und gehoert deshalb nicht in einen der beiden Kaesten. */ .hf-dauer { margin: 16px 0 10px; font-size: 0.94rem; color: var(--text-2); } .hf-dauer b { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 500; color: var(--text); } /* Zwei Befunde nebeneinander -- die Haltefrist zeigt Österreich und Deutschland zum selben Datum. */ .befund-paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; } .befund-paar .befund { margin-top: 0; } /* --- Schmale Fenster ----------------------------------------------------- Zwei Stufen: unter 900 px fallen die zweispaltigen Raster zusammen, unter 600 px wird der Kopf zur Handy-Fassung und die Marktzeile klappt von acht Spalten auf zwei. */ @media (max-width: 900px) { .befund-paar, .kurs-oben, .magazin-zwei { grid-template-columns: minmax(0, 1fr); } .einstieg-karten, .werkzeuge-vier { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fuss-innen { grid-template-columns: repeat(2, minmax(0, 1fr)); } .markt { --markt-raster: 40px minmax(0, 1.4fr) 104px 78px 116px; } .markt-kopf .nur-breit, .markt-zeile .nur-breit { display: none; } } @media (max-width: 600px) { .inhalt { padding: 0 14px 56px; } .laufband-innen, .kopf-innen, .fuss-innen { padding-left: 14px; padding-right: 14px; } .laufband-live, .laufband-stand { display: none; } /* Auf dem Handy ist das Laufband schiebbar statt geschnitten. */ .laufband-werte { overflow-x: auto; scrollbar-width: none; } .laufband-werte::-webkit-scrollbar { display: none; } .suche-dunkel span, .kopf-knoepfe .knopf-rand, /* Der Kurschip ist im breiten Zustand nur durchsichtig, nicht weg -- er belegt weiter seine 110 px. Auf 375 px war das der Grund, warum der Kopf über den rechten Rand hinausstand. Er hat hier auch keine Aufgabe: das Laufband bleibt sichtbar und schiebbar. */ .kurschip, /* Der Tastaturhinweis "/" im Suchfeld. */ .suche-dunkel::after { display: none; } .kopf-reihe { gap: 10px; padding: 8px 0 10px; } .logo-dunkel .wort { font-size: 1.15rem; } .nav-dunkel { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; } .nav-dunkel::-webkit-scrollbar { display: none; } .nav-dunkel a { white-space: nowrap; } .einstieg-karten, .werkzeuge-vier, .fuss-innen { grid-template-columns: minmax(0, 1fr); } .rubrik h2, .einstieg h2 { font-size: 1.25rem; } .kursblock .gross { font-size: 2rem; } /* Marktzeile auf dem Handy: vier Spalten, zwei Zeilen. Rang und Zeichen stehen links über beide Zeilen, rechts daneben Name über Marktwert und ganz rechts Preis über 24 Stunden. Kurve, Sieben-Tage-Wert und Anteil fallen weg — sie brauchen Breite, die es hier nicht gibt. .markt-muenze löst sich dafür auf (display: contents): Plakette und Name müssen eigene Rasterfelder sein, sonst quetscht die Spalte von 28 px beides zusammen. */ .markt-kopf { display: none; } .markt-zeile { grid-template-columns: 1.6ch 28px minmax(0, 1fr) auto; grid-template-rows: auto auto; row-gap: 1px; column-gap: 11px; padding: 9px 16px; min-height: 44px; } .markt-zeile .nur-breit, .markt-zeile .anteil, .markt-zeile .funke, /* Das Kürzel weicht dem Marktwert -- die Plakette daneben sagt schon, um welche Münze es geht. */ .markt-muenze i { display: none; } .markt-muenze { display: contents; } .markt-rang { grid-column: 1; grid-row: 1 / span 2; font-size: 0.78rem; } .markt-muenze > .kurs-marke { grid-column: 2; grid-row: 1 / span 2; width: 28px; height: 28px; } .markt-muenze > span { grid-column: 3; grid-row: 1; min-width: 0; } .markt-zeile .markt-zahl.preis { grid-column: 4; grid-row: 1; text-align: right; font-size: 0.9rem; } .markt-zeile .markt-zahl.delta { grid-column: 4; grid-row: 2; text-align: right; font-size: 0.74rem; } .markt-zeile .markt-zahl.wert { grid-column: 3; grid-row: 2; display: block; text-align: left; font-size: 0.7rem; color: var(--text-3); } /* Tippflächen: nie unter 44 px. Gilt für Bedienelemente, nicht für Verweise mitten im Fließtext -- die haben keine eigene Fläche, und 44 px hohe Zeilen wären dort unlesbar. */ .chip, .zeitraum button, .markt-fuss button, .wahl, .kv-bereich, .knopf-voll, .knopf-rand, .suche-dunkel, .logo-dunkel, .adr-feld, select.adr-feld, .beispiele button, .hf-land label { min-height: 44px; } /* min-height allein reicht bei einem Knopf mit einer Textzeile nicht -- ohne mittige Ausrichtung klebt die Schrift oben. */ .wahl, .knopf-voll, .knopf-rand, .beispiele button { display: inline-flex; flex-direction: column; justify-content: center; } }