/* Startseite, zweiter Anlauf. Der erste war dunkel, kuehl und technisch. Patrick hat 24fire.de und tube-hosting.com als Vorbild genannt, beide arbeiten anders: - heller Koerper, weisse Flaechen auf blassblauem Grund - dunkles Foto-Band als Hero, unten schraeg angeschnitten - Produktkarten, die ueber diese Kante ragen - runde Ecken, weiche Schatten, blauer Akzent - Vertrauensbloecke: Zahlen, Fragen, Abschlussband Uebernommen sind diese Bauweisen, nicht ihre Inhalte. Die Kennzahlen von 24fire (5.000 Kunden, 4,9 Trustpilot) sind deren Zahlen; unsere stehen in der Datenbank und sind kleiner. Erfundene Zahlen kommen hier nicht rein. Farben aus den Panel-Token, damit der Hell-/Dunkel-Umschalter greift. Die beiden Foto-Baender bleiben in beiden Modi dunkel: das ist ein Bild mit Ueberlagerung, kein Themenwechsel mitten auf der Seite. Ein Radius-System: Flaechen 16px, Karten 18px, Knoepfe voll gerundet. */ .st { --st-max: 1180px; --st-r: 16px; --st-rk: 18px; } .st-wrap { max-width: var(--st-max); margin: 0 auto; padding: 0 22px; } .st-num { font-family: "JetBrains Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; } /* Nur fuer Vorlesegeraete. Das Suchfeld der Domain-Seite traegt seine Beschriftung im Platzhalter, und ein Platzhalter ist keine Beschriftung: er verschwindet beim Tippen und wird nicht zuverlaessig angesagt. */ .st-nurlesen { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .st h2 { font-size: clamp(27px, 3.2vw, 38px); line-height: 1.14; letter-spacing: -.02em; margin: 0 0 12px; color: var(--text); font-weight: 700; } .st h3 { font-size: 17px; line-height: 1.3; margin: 0 0 6px; color: var(--text); font-weight: 600; } .st p { color: var(--text-muted); line-height: 1.62; margin: 0; } .st-mitte { text-align: center; max-width: 62ch; margin: 0 auto 34px; } /* Fuer laengere Ueberschriften. Bei 62ch bricht der Bewertungs-Titel auf drei Zeilen, waehrend alle anderen zwei brauchen; das stoert den Rhythmus der Seite. */ .st-mitte--breit { max-width: 80ch; } .st-mitte p { font-size: 16px; } /* --text-faint steht in dieser Datei absichtlich nirgends mehr. Gegen den echten Untergrund gemessen liegt es bei 2,65 zu 1 im Hellmodus und 3,09 im Dunkelmodus. Kleiner Text braucht 4,5. Betroffen waren die Einheit am Preis ("pro Monat"), die Zeile "ab" auf den Produktkarten und die Namenszeile unter den Bewertungen, also genau die Stellen, an denen leiser Text gewollt ist. --text-muted ist ebenfalls leiser als der Fliesstext, misst aber 5,4 bis 6,8 zu 1. Die Token selbst bleiben unberuehrt, sie gelten auch im Panel. */ /* ------------------------------------------------------------- Knoepfe */ .st-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; border-radius: 999px; font-size: 15px; font-weight: 600; text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background-color .16s, border-color .16s, transform .16s cubic-bezier(.16,1,.3,1); } /* Die Schriftfarbe des Hauptknopfs haengt am Modus, nicht am Geschmack: --primary ist im Dunkelmodus ein helles Blau (#4C8DFF), da faellt weisser Text auf 3,2:1 und reisst die AA-Schwelle. Im Hellmodus ist --primary dunkel (#2563EB), dort ist Weiss richtig. Reihenfolge wie in newcp.css: dunkel ist der Standard, hell die Ausnahme. */ .st-btn--primary { background: var(--primary); color: #08121F; } [data-theme="light"] .st-btn--primary { color: #fff; } @media (prefers-color-scheme: light) { :root:not([data-theme]) .st-btn--primary { color: #fff; } } .st-btn--primary:hover { background: var(--primary-hover); } .st-btn--ghost { background: transparent; color: var(--text); border-color: var(--border-strong); } .st-btn--ghost:hover { border-color: var(--primary); color: var(--primary); } .st-btn--hell { background: #fff; color: #12203a; } .st-btn--hell:hover { background: #E8EFFC; } .st-btn:active { transform: translateY(1px); } .st-btn--voll { width: 100%; } /* ---------------------------------------------------------------- Hero */ /* Dunkles Foto-Band. Die schraege Unterkante ist der Uebergang ins Helle; die Tarifkarten weiter unten ragen mit negativem Rand hinein. */ .st-hero { position: relative; background: #0C1526; color: #fff; padding: clamp(56px, 8vw, 92px) 0 clamp(130px, 15vw, 200px); overflow: hidden; } /* Das grosse untere Polster ist Platz fuer die Karten, die in das Band hineinragen. Wo keine stehen, wie auf der Reseller-Seite, blieb darunter eine leere helle Flaeche von rund zweihundert Pixeln. Der Verlauf blendet anteilig aus und traegt die kuerzere Hoehe mit. */ .st-hero--ohnekarten { padding-bottom: clamp(62px, 8vw, 104px); } .st-hero__foto { position: absolute; inset: 0; } .st-hero__foto img { width: 100%; height: 100%; object-fit: cover; opacity: .55; } /* Der Verlauf macht drei Dinge zugleich: Oben deckt er das Foto so weit ab, dass weisse Schrift die AA-Schwelle haelt. Das Bild ist ein gleichmaessiges Grau (gemessen: #A5A6A5 oben, #949591 in der Mitte), auf dem weisse Schrift ohne Abdeckung untergeht. Zur Mitte hin wird er duenner, damit vom Rechenzentrum ueberhaupt etwas zu sehen ist. Vorher lag er durchgehend bei 88 bis 98 Prozent, und das Foto war ein dunkler Kasten. Unten laeuft er in var(--bg) aus, also in die Farbe der Seite darunter. Dadurch loest sich das Bild auf, statt an einer Kante abgeschnitten zu werden. Der Wert folgt dem Hell-/Dunkel-Umschalter mit. */ .st-hero__foto::after { content: ""; position: absolute; inset: 0; background: /* Die Neigung steckt in diesem Verlauf, nicht mehr in einer eigenen Flaeche mit clip-path. Die war eine Flaeche in Seitenfarbe, waehrend der Verlauf dahinter diese Farbe noch nicht erreicht hatte: am rechten Rand sprang die Helligkeit dadurch in zwei Pixeln um 103 Stufen. Ein geneigter Verlauf hat dieselbe Schraege, aber keine Stufe. 182 Grad ergeben bei 1440 Pixeln Breite rund 50 Pixel Hoehenunterschied, also dieselbe Neigung wie die frühere Kante. */ linear-gradient(182deg, rgba(245,247,250,0) 62%, var(--bg) 88%), linear-gradient(180deg, rgba(9,17,31,.90) 0%, rgba(9,17,31,.86) 34%, rgba(9,17,31,.72) 62%, rgba(9,17,31,.58) 84%, rgba(9,17,31,.50) 100%); } .st-hero__inhalt { position: relative; text-align: center; } .st-hero h1 { font-size: clamp(31px, 4.6vw, 54px); line-height: 1.1; letter-spacing: -.028em; margin: 0 auto 16px; max-width: 24ch; color: #fff; font-weight: 700; } .st-hero h1 b { color: #7FB0FF; font-weight: 700; } /* .st p steht weiter oben und ist spezifischer (Klasse + Element), deshalb gewann dort die graue Textfarbe und der Untertitel war auf dem dunklen Foto kaum lesbar. Klasse zweimal notiert hebt die Spezifitaet an. */ .st-hero .st-hero__sub { color: #E2E9F4; font-size: clamp(15px, 1.5vw, 18px); max-width: 54ch; margin: 0 auto; } .st-hero__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 28px; } /* --------------------------------------------------------- Tarifkarten */ /* Ragen in das Hero-Band hinein. Drei Groessen stehen hier, die restlichen drei in der Zeile darunter: sechs gleich grosse Karten nebeneinander erschlagen die Entscheidung. */ .st-tarife { margin-top: clamp(-64px, -6.5vw, -92px); position: relative; z-index: 2; padding-bottom: clamp(38px, 4vw, 58px); } .st-karten { display: grid; gap: 18px; grid-template-columns: 1fr; } @media (min-width: 700px) { .st-karten { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1060px) { .st-karten { grid-template-columns: repeat(4, 1fr); } } /* Abweichende Spaltenzahl. Vier passt zu den vier Produkten der Startseite; sechs Tarife stuenden darin als 4 + 2 da und die zweite Zeile saehe aus wie ein Rest. Die Varianten stehen hier und nicht in den Seitenstylesheets, damit die naechste Seite sie nicht ein drittes Mal erfindet. */ /* Die Klasse darf am Abschnitt oder am Raster selbst haengen. Am Raster war sie auf der Reseller-Seite wirkungslos, weil nur die Variante mit Elternteil notiert war: drei Karten standen dann in einem Vierspaltenraster und liessen rechts eine Spalte leer. */ @media (min-width: 1020px) { .st-drei .st-karten, .st-karten.st-drei { grid-template-columns: repeat(3, 1fr); } .st-zwei .st-karten, .st-karten.st-zwei { grid-template-columns: repeat(2, 1fr); } } .st-karte { background: var(--surface); border: 1px solid var(--border); border-radius: var(--st-rk); padding: 26px 22px 22px; box-shadow: 0 18px 44px -26px rgba(15,32,66,.34); display: flex; flex-direction: column; transition: transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s; } .st-karte:hover { transform: translateY(-3px); box-shadow: 0 26px 56px -26px rgba(15,32,66,.42); } /* Die Empfehlung trug vier Auszeichnungen gleichzeitig: eine gefuellte Pille ueber der Oberkante, einen farbigen Rahmen, einen gefuellten Knopf und dazu das Polster, das die Pille brauchte. Vier Signale fuer eine Aussage, und in zwei Farben: die Pille war blau mit weisser Schrift, der Rahmen blau, der Knopf blau gefuellt. Das Polster war ausserdem ein Fehler: es schob Name und Preis dieser einen Karte um acht Pixel nach unten, die Preise der Zeile standen also nicht auf einer Linie. Jetzt eine Farbe und eine Zeile im Fluss. Der Platz fuer die Zeile ist in jeder Karte reserviert, auch in den nicht hervorgehobenen, damit die Preise ausgerichtet bleiben. */ .st-karte--best { border-color: var(--primary); } .st-karte__fahne { display: block; min-height: 15px; margin-bottom: 3px; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--primary); } .st-karte { position: relative; } .st-karte__name { font-size: 15px; font-weight: 700; color: var(--text); } .st-karte__preis { margin: 14px 0 0; display: flex; align-items: baseline; gap: 6px; } .st-karte__preis b { font-size: 34px; font-weight: 700; color: var(--text); letter-spacing: -.03em; } .st-karte__preis span { font-size: 13px; color: var(--text-muted); } .st-karte__spec { list-style: none; margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid var(--border); display: grid; gap: 11px; } .st-karte__spec li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-muted); } /* Der Wert bleibt zusammen, der Beschriftungstext bricht um. Ohne das brach "128 MB" zwischen Zahl und Einheit, sobald die Beschriftung lang wurde und die Karte schmal war. Der Wert ist hoechstens zehn Zeichen lang ("Unbegrenzt"), er kann also nicht ueber die Karte hinauslaufen. */ .st-karte__spec b { color: var(--text); font-weight: 600; white-space: nowrap; flex: none; } .st-karte__spec i { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); flex: none; } .st-karte__btn { margin-top: 22px; } /* ------------------------------------------------------------- Aktion */ /* Ein laufender Rabatt. Bewusst kein roter Balken und kein Countdown: die Aktion steht in der Akzentfarbe der Seite wie jede andere Hervorhebung auch, damit die Farbfuehrung eine bleibt. */ .st-aktion { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 0 0 20px; font-size: 13.5px; color: var(--text-muted); } .st-aktion span { font-size: 11px; font-weight: 700; letter-spacing: .07em; background: var(--primary); border-radius: 999px; padding: 5px 11px; } /* Auf der Produktkarte der Startseite ist die Aktion eine Ecke und keine Zeile. Als Zeile zwischen Preis und Knopf brauchte sie zwei zusaetzliche Zeilen, weil die Pille umbrach, und schob den Preis dieser einen Karte 72 Pixel ueber den der Nachbarkarten. Die Ecke liegt ausserhalb des Textflusses, die Karte bleibt damit gebaut wie die anderen drei. */ .st-prod { position: relative; } .st-prod__aktion { position: absolute; top: 16px; right: 16px; font-size: 11px; font-weight: 700; letter-spacing: .04em; background: var(--primary); border-radius: 999px; padding: 5px 10px; white-space: nowrap; } /* Die Schriftfarbe auf der Aktionsfarbe haengt am Modus, nicht am Geschmack: --primary ist im Dunkelmodus ein helles Blau (#4C8DFF), weisser Text faellt dort auf 3,20 zu 1 und reisst die AA-Schwelle. Im Hellmodus ist --primary dunkel (#2563EB), dort ist Weiss richtig. Gleiche Reihenfolge und gleiche Begruendung wie bei .st-btn--primary weiter oben. */ .st-prod__aktion, .st-aktion span { color: #08121F; } [data-theme="light"] .st-prod__aktion, [data-theme="light"] .st-aktion span { color: #fff; } @media (prefers-color-scheme: light) { :root:not([data-theme]) .st-prod__aktion, :root:not([data-theme]) .st-aktion span { color: #fff; } } /* Der Preis, der nicht mehr gilt. Steht unter dem gueltigen und nicht daneben: nebeneinander konkurrieren zwei Zahlen um dieselbe Zeile, und die durchgestrichene gewinnt zu oft. */ .st-karte__statt { margin-top: 4px; font-size: 13px; color: var(--text-muted); } .st-karte__statt s { text-decoration-thickness: 1.5px; } /* Restliche Groessen: schmale Zeilen statt weiterer Karten */ .st-mehr { margin-top: 20px; display: grid; gap: 10px; grid-template-columns: 1fr; } @media (min-width: 780px) { .st-mehr { grid-template-columns: repeat(3, 1fr); } } .st-zeile { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 15px 18px; text-decoration: none; transition: border-color .16s; } .st-zeile:hover { border-color: var(--primary); } .st-zeile__n { font-size: 14px; font-weight: 600; color: var(--text); } .st-zeile__d { font-size: 13px; color: var(--text-muted); } .st-zeile__p { font-size: 15px; font-weight: 700; color: var(--primary); white-space: nowrap; } /* ------------------------------------------------------------ Abschnitt */ .st-sec { padding: clamp(46px, 5vw, 72px) 0; } /* Kein abgesetzter Abschnittshintergrund mehr. Vorgeschichte: --surface-2 ist seit der Umstellung von --bg auf #171C27 exakt derselbe Wert wie --bg, gemessener Unterschied 1,00 zu 1. Die getoenten Abschnitte waren damit unsichtbar abgesetzt. Der Ersatz war ein aus der Textfarbe gemischter Ton, im Dunkelmodus #222732. Der hat Patrick nicht gefallen, und er hat recht: zwei fast gleiche Graustufen uebereinander sehen nach Versehen aus, nicht nach Absicht. Die Seite laeuft deshalb durchgehend auf einer Flaeche. Getrennt wird ueber Abstand und Ueberschrift, nicht ueber Farbe. Die Klasse bleibt im Markup stehen: wer den Wechsel zurueckholen will, braucht nur diese eine Zeile. Die Ursache liegt weiterhin in den Token und gehoert dort behoben: --surface (#12161F) ist inzwischen dunkler als --bg, die Tiefenstaffelung des ganzen Panels steht also auf dem Kopf. */ .st-sec--tint { background: var(--bg); } /* Merkmale um das Panel-Bild */ .st-warum { display: grid; gap: 26px; grid-template-columns: 1fr; align-items: center; } @media (min-width: 1000px) { .st-warum { grid-template-columns: 1fr 1.5fr 1fr; gap: 30px; } } .st-merkmal { display: flex; gap: 13px; align-items: flex-start; } .st-merkmal + .st-merkmal { margin-top: 26px; } .st-merkmal__i { width: 34px; height: 34px; border-radius: 10px; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; flex: none; } .st-merkmal__i svg { width: 17px; height: 17px; } .st-merkmal p { font-size: 14px; } .st-warum__bild { border-radius: var(--st-r); overflow: hidden; border: 1px solid var(--border); box-shadow: 0 22px 54px -28px rgba(15,32,66,.4); } .st-warum__bild img { display: block; width: 100%; height: auto; } /* Zahlen */ .st-zahlen { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); } @media (min-width: 820px) { .st-zahlen { grid-template-columns: repeat(4, 1fr); } } .st-zahl { background: var(--surface); border: 1px solid var(--border); border-radius: var(--st-r); padding: 22px 18px; text-align: center; } .st-zahl b { display: block; font-size: clamp(24px, 3vw, 31px); color: var(--text); letter-spacing: -.02em; margin-bottom: 5px; } .st-zahl span { font-size: 13px; color: var(--text-muted); line-height: 1.45; display: block; } /* Fragen */ /* Kein Kasten, kein Aufklappen, alles sichtbar. Wer eine Frage lesen will, soll die Antwort schon sehen und nicht erst klicken muessen. Getrennt wird durch eine Linie ueber jedem Eintrag, nicht durch Rahmen um jeden Eintrag: eine Linie trennt, ein Rahmen schliesst ein. Bei sechs Fragen nebeneinander wuerden sechs Rahmen wie ein Knopfraster wirken. */ .st-fragen { display: grid; gap: 0 clamp(30px, 5vw, 64px); grid-template-columns: 1fr; } @media (min-width: 900px) { .st-fragen { grid-template-columns: 1fr 1fr; } } .st-frage { padding: 22px 0; border-top: 1px solid var(--border); } /* Die oberste Linie je Spalte faellt weg, sonst haengt sie unter der Ueberschrift in der Luft. */ .st-frage:first-child { border-top: 0; padding-top: 0; } @media (min-width: 900px) { .st-frage:nth-child(2) { border-top: 0; padding-top: 0; } } .st-frage h3 { font-size: 16.5px; font-weight: 700; color: var(--text); margin: 0 0 8px; line-height: 1.35; letter-spacing: -.008em; } .st-frage p { font-size: 15px; color: var(--text-muted); line-height: 1.65; max-width: 56ch; } .st-fragen__mehr { text-align: center; margin-top: 34px; font-size: 14.5px; color: var(--text-muted); } .st-fragen__mehr a { color: var(--primary); text-decoration: none; font-weight: 600; } .st-fragen__mehr a:hover { text-decoration: underline; } /* Abschluss */ .st-schluss { position: relative; background: #0C1526; overflow: hidden; padding: clamp(64px, 8vw, 104px) 0; } .st-schluss__foto { position: absolute; inset: 0; } .st-schluss__foto img { width: 100%; height: 100%; object-fit: cover; opacity: .3; } .st-schluss__foto::after { content: ""; position: absolute; inset: 0; background: rgba(12,21,38,.82); } .st-schluss__karte { position: relative; background: var(--surface); border-radius: var(--st-rk); padding: clamp(30px, 4vw, 46px); max-width: 560px; margin-left: auto; box-shadow: 0 26px 60px -30px rgba(0,0,0,.6); } .st-schluss__karte p { margin-bottom: 24px; } @media (prefers-reduced-motion: reduce) { .st-btn, .st-karte, .st-zeile { transition: none; } } /* ------------------------------------------------------- Produktkarten */ /* Vier Produkte gleichrangig. Vorher standen hier drei KVM-Groessen, die Startseite verkaufte damit nur ein Produkt von vieren. */ .st-prod { display: flex; flex-direction: column; } .st-prod__i { width: 38px; height: 38px; border-radius: 11px; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; margin-bottom: 14px; } .st-prod__i svg { width: 19px; height: 19px; } .st-prod h3 { font-size: 17px; margin: 0 0 6px; } .st-prod p { font-size: 13.5px; flex: 1; } .st-prod__ab { margin: 16px 0 0; font-size: 13px; color: var(--text-muted); } .st-prod__ab b { display: block; font-size: 25px; color: var(--text); letter-spacing: -.02em; margin-top: 2px; } .st-prod__btn { margin-top: 16px; } /* ------------------------------------------------------- Panel gross */ /* Das Bild traegt den Abschnitt, deshalb steht es ueber der Merkmalsreihe und nicht als schmale Mittelspalte dazwischen. */ .st-panelgross { border-radius: var(--st-r); overflow: hidden; border: 1px solid var(--border); box-shadow: 0 26px 60px -30px rgba(15,32,66,.42); margin-bottom: 34px; } .st-panelgross img { display: block; width: 100%; height: auto; } .st-merkmale { display: grid; gap: 26px 30px; grid-template-columns: 1fr; } @media (min-width: 700px) { .st-merkmale { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1040px) { .st-merkmale { grid-template-columns: repeat(3, 1fr); } } .st-merkmale .st-merkmal + .st-merkmal { margin-top: 0; } /* ----------------------------------------------------------- Bewertungen */ .st-tp { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 30px; } .st-tp__note { font-size: 34px; font-weight: 700; color: var(--text); letter-spacing: -.02em; } .st-tp__sterne { display: flex; gap: 3px; } .st-tp__sterne svg { width: 19px; height: 19px; color: #00B67A; } .st-tp__zahl { font-size: 14px; color: var(--text-muted); } .st-tp__zahl a { color: var(--primary); text-decoration: none; } .st-tp__zahl a:hover { text-decoration: underline; } /* Zwei Laufbaender, oben nach links, unten nach rechts. Das ist ein Bauteil, keine zwei Zierbaender: die Gegenlaeufigkeit macht aus zwanzig Karten eine Flaeche, durch die man liest, ohne zu scrollen. Reine CSS-Animation auf transform, kein Scroll-Listener. Die Spur enthaelt jede Karte zweimal, deshalb ist -50 Prozent genau eine Runde und der Uebergang unsichtbar. */ .st-band2 { position: relative; overflow: hidden; } .st-band2::before, .st-band2::after { content: ""; position: absolute; top: 0; bottom: 0; width: clamp(36px, 7vw, 110px); z-index: 2; pointer-events: none; } /* Die Kanten blenden in die Farbe des Abschnitts aus, unter dem sie liegen. Das war --surface-2, solange .st-sec--tint daran hing. Seit der Abschnitt auf var(--bg) laeuft, malte der Verlauf einen fremden Ton an die Raender: im Hellmodus #EEF2F8 auf #F5F7FA, also einen sichtbaren Streifen. */ .st-band2::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); } .st-band2::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); } .st-spur { display: flex; gap: 16px; width: max-content; } .st-spur--links { animation: st-lauf-links 64s linear infinite; } .st-spur--rechts { animation: st-lauf-rechts 72s linear infinite; } .st-band2:hover .st-spur { animation-play-state: paused; } .st-spur + .st-spur { margin-top: 16px; } @keyframes st-lauf-links { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes st-lauf-rechts { from { transform: translateX(-50%); } to { transform: translateX(0); } } @media (prefers-reduced-motion: reduce) { /* Ohne Bewegung wird aus dem Laufband eine Leiste zum Wischen. Der Inhalt bleibt erreichbar, er faehrt nur nicht von selbst. */ .st-band2 { overflow-x: auto; } .st-spur { animation: none; } .st-band2::before, .st-band2::after { display: none; } } .st-stimme { background: var(--surface); border: 1px solid var(--border); border-radius: var(--st-r); padding: 18px 17px; display: flex; flex-direction: column; width: clamp(264px, 25vw, 330px); flex: none; } .st-stimme__s { display: flex; gap: 2px; margin-bottom: 12px; } .st-stimme__s svg { width: 15px; height: 15px; color: #00B67A; } .st-stimme h3 { font-size: 15px; margin: 0 0 8px; } .st-stimme p { font-size: 13.5px; } /* Der Name steht immer unten, egal wie kurz das Zitat ist. flex:1 lag vorher auf dem

, das ist aber Kind des

und damit kein Flex-Kind der Karte: die Regel lief ins Leere. margin-top:auto auf der Bildunterschrift schiebt sie unabhaengig davon nach unten und braucht keine Annahme ueber die Verschachtelung. */ .st-stimme blockquote { flex: 1; } .st-stimme__wer { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-muted); } .st-stimme__wer b { color: var(--text-muted); font-weight: 600; } /* ------------------------------------------------------------- Abschluss */ /* Aufbau nach dem Vorbild von leaderos.net: kein Foto, keine Karten, kein Kasten. Ein dunkles Band, aus dessen unterer Mitte ein Schimmer aufsteigt, darueber mittig Ueberschrift, ein Satz, zwei Knoepfe. Die Ruhe ist der Punkt. Nach sechs Abschnitten soll am Ende nichts mehr um Aufmerksamkeit ringen. Vorher standen hier ein Foto, drei Karten und ein Knopf, also drei Dinge, die gleichzeitig gesehen werden wollten. Der Schimmer ist ein radialer Verlauf im Markenblau, unten mittig angesetzt und nach oben auslaufend. Kein Leuchten hinter dem Knopf: das waere genau die KI-Optik, die wir sonst vermeiden. */ .st-schluss { position: relative; overflow: hidden; padding: clamp(78px, 10vw, 132px) 0; background: radial-gradient(78% 62% at 50% 118%, rgba(76,141,255,.34) 0%, rgba(76,141,255,0) 62%), #080D18; text-align: center; } .st-schluss::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent); } /* text-wrap: balance verteilt die Woerter gleichmaessig auf die Zeilen. Ohne das stand "an" allein in Zeile zwei, und ein einzelnes Wort unter einer langen Zeile liest sich wie ein Umbruchfehler. */ .st-schluss h2 { color: #fff; max-width: 24ch; margin: 0 auto 14px; font-size: clamp(30px, 4.2vw, 46px); letter-spacing: -.028em; text-wrap: balance; } .st-schluss p { color: #B4C2D6; max-width: 52ch; text-wrap: pretty; margin: 0 auto 30px; font-size: clamp(15px, 1.5vw, 17px); } .st-schluss__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } /* Uebergang in den Fuss. Der Fuss faerbt sich sonst mit var(--bg), im Hellmodus also hell, und unter dem dunklen Band entsteht eine harte Naht. Statt jede Regel im Fuss einzeln zu ueberschreiben, werden hier seine Token neu gesetzt: alle Regeln darin ziehen dadurch mit. Diese Datei wird nur auf der Startseite geladen, andere Seiten behalten ihren hellen Fuss. */ .xf { --bg: #080D18; --surface: #0E1526; --border: rgba(255,255,255,.10); --border-strong: rgba(255,255,255,.18); --text: #EDF2F9; --text-muted: #94A3BA; --text-faint: #6B7A91; --primary: #7FB0FF; background: #080D18; } /* footer.php bringt sein CSS als