/* ============================================================ stil.css — ALLE Farben, Abstände, Schriften an einer Stelle. Drei Bauteile tragen das ganze Design, alles andere ordnet sich ihnen unter: 1. Die Fläche ist schwarz-weiß: #FFFFFF und #0F171B. 2. Das Punktraster liegt fest hinter allem und zieht am Mauszeiger an. Siehe effekte.css. Ganz oben liegt ein weiches Farbband in den Logo-Farben (--band-…). 3. Farbe kommt aus dem Logo (Türkis, Blau, Violett) und steckt in großen Kästen und einzelnen Akzent-Wörtern. Die fünf Urteilsfarben gehören nur dem Faktencheck. Regel: nirgendwo sonst eine Farbe oder einen Abstand hinschreiben. Immer var(--name). ============================================================ */ /* ---------- Die Schrift: Gabarito, lokal ---------- Die Datei liegt in schriften/, nicht bei Google. Grund: Beim Laden von Google geht die IP-Adresse jedes Besuchers an Google, und dafür bräuchte es eine Einwilligung (Cookie-Banner). Lokal fällt das weg, und die Seite ist nebenbei schneller. Eine einzige Datei kann alle Stärken von 400 bis 900 ("variable Schrift"), darum steht bei font-weight ein Bereich. font-display:swap = erst die Ersatzschrift zeigen, dann umschalten, sobald Gabarito geladen ist. Nie leerer Text. Lizenz: SIL Open Font License, siehe schriften/OFL-gabarito.txt */ @font-face{ font-family:'Gabarito'; src:url('schriften/gabarito.woff2') format('woff2'); font-weight:400 900; font-style:normal; font-display:swap; } :root{ /* ---------- Flächen und Text ---------- */ --canvas: #FFFFFF; /* Hintergrund der Seite (bis 25.09.2026: #F1F1EF, ein warmes Hellgrau) */ --canvas-2: #E9E9E6; /* leicht abgesetzt */ --papier: #FBFBF9; /* Karten, Eingabefelder */ --tief: #0A1216; /* der dunkle Block */ --ink: #0F171B; /* normaler Text */ --ink-2: #4E5860; /* Fließtext, ruhiger */ --ink-3: #858D94; /* Beschriftungen, Nebensächliches */ --linie: #DEDDD9; /* dünne Trennlinien */ --linie-2: #C9C8C3; /* etwas kräftiger */ /* ---------- Die fünf Urteile ---------- Erste Gruppe: kräftig, NUR als Farbfläche und Verlauf. Zweite Gruppe: dieselben fünf, aber lesbar als Textfarbe. Beide kommen aus lib/theme/app_colors.dart der App. Wer sie dort ändert, ändert sie hier mit. */ --s-meinung: #2F7DF6; --s-belegt: #12B76A; --s-studien: #F5C518; --s-verkuerzt: #FF7A1A; --s-falsch: #F0442F; --u-meinung: #2B5C99; --u-belegt: #2F855A; --u-studien: #8A6D1F; --u-verkuerzt: #A85B18; --u-falsch: #C0392B; /* ---------- Der Markenverlauf ---------- Aus logo.svg abgemessen. Das ist etwas ANDERES als die fünf Urteilsfarben: der Markenverlauf gehört dem Logo und dem Namen, die Urteilsfarben gehören dem Faktencheck. Die beiden nicht vermischen, sonst bedeutet Farbe nichts mehr. */ --marke-1: #25E2FC; --marke-2: #4165FC; --marke-3: #8337FB; --marke-verlauf: linear-gradient(118deg, var(--marke-1), var(--marke-2) 52%, var(--marke-3)); /* Textmarker-Gelb, z. B. wenn man im Tippfeld etwas markiert. Dasselbe Gelb wie „Nicht eindeutig“ (--s-studien). */ --m-markierung: rgba(245,197,24,.45); /* ---------- Die Startseite (neu seit 24.09.2026) ---------- Vorbild fluz.app: große bunte Kästen, wenig Text, und wenn Text, dann groß und rund. Die Farben kommen aus dem LOGO: Türkis, Blau, Violett, dazu das Dunkelblau vom Grund des App-Symbols. So sieht die Seite nach RealUp aus und nicht nach Regenbogen. */ --nacht: #0E1133; /* Dunkelblau wie der Grund des App-Symbols */ --nacht-2: #1C2260; /* etwas heller, für Verläufe darauf */ --weiss: #FFFFFF; /* reines Weiß, z. B. hinter REALUP ganz unten */ /* Die fünf Karten der Werkzeuge: Grund, Schrift, leise Schrift. Reihenfolge wie auf der Seite (seit 27.09.2026 fünf; Boards vorher Blau, KI-Chat vorher Violett). */ --fach-summe-grund: var(--marke-2); --fach-summe-text: #FFFFFF; --fach-summe-leise: #DDE4FF; --fach-quelle-grund: #BFF4FD; --fach-quelle-text: var(--nacht); --fach-quelle-leise: #36447A; --fach-check-grund: var(--nacht); --fach-check-text: #FFFFFF; --fach-check-leise: #A9B0E3; --fach-board-grund: var(--marke-3); --fach-board-text: #FFFFFF; --fach-board-leise: #EBDDFF; --fach-chat-grund: #ECE5FF; --fach-chat-text: var(--nacht); --fach-chat-leise: #5A4B8C; --fach-rund: 34px; /* wie rund die großen Kästen sind */ --fach-luft: clamp(24px, 3.4vw, 46px); /* Innenabstand der Kästen */ /* ---------- Das Farbband ganz oben (seit 25.09.2026, Vorbild uneevo) ---------- Ein breites, weiches Band in den drei Logo-Farben, stark aufgehellt, damit Logo und Leiste darauf gut zu sehen sind. Dasselbe Band liegt unten in der Einladung zur Warteliste. */ --band-kraft: 36%; /* wie viel Logofarbe drin ist. Höher = kräftiger, 100% = volle Farbe */ --band-a: color-mix(in srgb, var(--marke-1) var(--band-kraft), white); /* Türkis */ --band-b: color-mix(in srgb, var(--marke-2) var(--band-kraft), white); /* Blau */ --band-c: color-mix(in srgb, var(--marke-3) var(--band-kraft), white); /* Violett */ --band-d: color-mix(in srgb, var(--marke-3) 6%, white); /* fast Weiß, läuft rechts aus */ --band-verlauf: linear-gradient(100deg, var(--band-a), var(--band-b) 36%, var(--band-c) 66%, var(--band-d)); --band-hoehe: 36svh; /* wie hoch das Band ist (bis 27.09.2026: 44svh. Kleiner gemacht, damit der größere Text oben rechts ganz ins erste Bild passt) */ --start-text-groesse: clamp(19px, 1.75vw, 26px); /* die zwei Absätze oben rechts (seit 27.09.2026 groß, vorher 16 bis 19px). Der mittlere Wert wächst mit der Fensterbreite */ --start-text-fett: 600; /* wie dick diese zwei Absätze sind. 500 = wie der übrige Text, 700 = fett */ --start-titel-max: 18svh; /* die große Überschrift oben ist höchstens so groß, gemessen an der FensterHÖHE. Damit passt „Research you can trust.“ auch auf niedrigen Bildschirmen ganz ins erste Bild. Kleiner = mehr Luft unten (bis 27.09.2026: 15svh) */ --start-titel-breit: 10.4vw; /* dasselbe, gemessen an der FensterBREITE (bis 27.09.2026: 8.8vw) */ --start-titel-groesst: 150px; /* größer wird die Überschrift nie, auch nicht auf riesigen Bildschirmen (bis 27.09.2026: 136px). Nicht viel höher stellen: bei ca. 155px passt „Research“ nicht mehr in seine Spalte und läuft in den Text rechts daneben */ --band-rand: 12px; /* Abstand zum Fensterrand links und rechts */ --band-rund: 32px; /* Rundung der unteren Ecken */ --band-zeit: 16s; /* so lange wandert es einmal hin. Mehr = ruhiger */ --trust-zeit: 5s; /* so lange laufen die Farben einmal ganz durch „trust.“ (effekte.css, EFFEKT 9 d). Mehr = ruhiger */ /* ---------- Die fünf Werkzeuge (werkzeuge.js) ---------- */ --werkzeuge-strecke: 475vh; /* so lange scrollt man durch alle fünf (ca. 95vh je Werkzeug). Mehr = langsamer */ --werkzeug-karte-hoehe: min(58svh, 500px); /* wie hoch die Karte rechts ist (bis 27.09.2026: min(54svh, 460px)) */ --werkzeug-zeit: .55s; /* so lange dauert der Wechsel */ --werkzeug-punkt: 9px; /* Größe der Punkte unten links */ --werkzeug-pille: 36px; /* so lang wird der aktive Punkt; er füllt sich beim Scrollen */ /* ---------- Die große Karte mit dem Kreis ---------- */ --karte-rand: max(12px, calc((100% - var(--breite)) / 2)); /* Abstand zum Rand: so breit wie die Seite, mindestens 12px */ /* ---------- „More with RealUp“: große Sätze auf dunklem Grund ---------- */ --liste-grund: var(--nacht); --liste-leise: #A9B0E3; /* die kleine Beschriftung darüber */ --liste-strecke: 230vh; /* so lange scrollt man, bis alle Sätze gefüllt sind. Mehr = langsamer */ --liste-blass: color-mix(in srgb, var(--weiss) 13%, var(--liste-grund)); /* wie blass die Sätze vor dem Füllen sind. Mehr % = heller */ --liste-leuchten: 1.28; /* wie hell die RealUp-Wörter nach dem Aufleuchten bleiben. 1 = nicht heller */ --liste-schein: color-mix(in srgb, var(--marke-2) 55%, transparent); /* der Schein um die RealUp-Wörter */ /* ---------- Für wen: drei große Boards (seit 27.09.2026) ---------- Oben eins breit (für alle), darunter zwei nebeneinander (Schüler, Teams). Jedes Board hat vier Farben: Grund, Schrift, leise Schrift und das betonte Wort in der Überschrift (). Die Farben kommen wie überall aus dem Logo. */ --brett-rund: var(--fach-rund); /* Rundung, wie die vier Werkzeug-Kästen */ --brett-luft: var(--fach-luft); /* Innenabstand */ --brett-abstand: clamp(14px, 1.6vw, 22px); /* Lücke zwischen den Boards */ --brett-breit-hoehe: 520px; /* Mindesthöhe des breiten Boards oben */ /* 1 — für alle: hell, von Türkis über Blau nach Flieder */ --brett-alle-grund: linear-gradient(135deg, #CFF6FE 0%, #E2E9FF 52%, #EDE3FF 100%); --brett-alle-text: var(--nacht); --brett-alle-leise: #3A4677; --brett-alle-akzent: var(--marke-verlauf); /* 2 — Schüler: das Blau aus dem Logo, oben links heller */ --brett-schule-grund: radial-gradient(120% 85% at 0% 0%, #6E8EFF 0%, transparent 62%), var(--marke-2); --brett-schule-text: #FFFFFF; --brett-schule-leise: #E1E7FF; --brett-schule-akzent: linear-gradient(100deg, #A5F4FF, #FFFFFF); /* 3 — Teams: Nachtblau, unten rechts ein violetter Schein */ --brett-team-grund: radial-gradient(95% 75% at 100% 100%, #4A2A9C 0%, transparent 68%), radial-gradient(70% 55% at 0% 0%, #1D2873 0%, transparent 72%), var(--nacht); --brett-team-text: #FFFFFF; --brett-team-leise: #B3B9E8; --brett-team-akzent: linear-gradient(100deg, var(--marke-1), #B195FF); /* Die drei Leute im Team-Board (runde Kreise mit Anfangsbuchstaben) */ --brett-person-1: var(--marke-3); --brett-person-2: #0FB3B3; --brett-person-3: #FF8A1F; --brett-schatten: 0 26px 60px -22px rgba(14,17,51,.45); /* Schatten unter Blatt und Clip */ --brett-licht: rgba(255,255,255,.16); /* der Schein, der der Maus folgt (effekte.js, EFFEKT 6). transparent = aus */ --brett-licht-groesse: 440px; /* wie groß der Schein ist */ --brett-heben: -5px; /* wie weit ein Board beim Drüberfahren hochgeht. 0 = gar nicht */ --clip-breite: clamp(100px, 12vw, 156px); /* der schräge Clip im Board „für alle“ */ /* ---------- Das Titelbild ---------- Seit 25.09.2026 ist das die große Karte hinter der Kreis-Animation (Vorbild uneevo: dort läuft ein Video). Ein Foto darin: --titel-bild auf url("assets/titelbild.jpg"), --titel-grund auf #0B1426, und in index.html beim kreis-abschnitt das Wort titel-dunkel dazuschreiben. */ --titel-bild: none; --titel-lage: center bottom; /* welcher Teil des Fotos sichtbar bleibt, wenn es beschnitten wird */ --titel-grund: color-mix(in srgb, var(--marke-2) 6%, white); /* Farbe der Karte: ein Hauch Blau */ --titel-rand: 12px; /* Abstand des Kastens zum Fensterrand */ --titel-rund: 32px; /* Rundung der Ecken */ /* Schrift auf einem DUNKLEN Foto (nur mit class="titel-dunkel") */ --titel-text: #F2F6FA; --titel-leise: #B4C0CF; --titel-linie: rgba(242,246,250,.26); /* Rahmen, gestrichelter Ring */ --titel-schatten: rgba(4,8,18,.55); /* weicher dunkler Hof hinter dem Text */ /* ---------- Der Kreis in der großen Karte (kreis.js) ---------- */ --kreis-buehne: 440vh; /* so lange scrollt man durch die Animation. Mehr = langsamer */ --kreis-groesse: min(44vw, calc(100svh - 190px), 620px); /* Durchmesser am Computer */ --kreis-groesse-handy: min(84vw, calc(100svh - 390px), 440px); /* Durchmesser am Handy */ --kreis-wirbel: 110deg; /* wie weit die Kacheln beim Sog noch mitdrehen. 0 = gerade rein */ --kopf-hoehe: 66px; /* so hoch ist die Kopfzeile. Der Kreis rutscht darunter */ --kachel-groesse: 16.5%; /* eine Kachel, in % der Kreisbreite */ --kachel-rund: 27%; /* Rundung wie ein App-Symbol am Handy */ --feder: cubic-bezier(.34, 1.56, .64, 1); /* schießt kurz über und federt zurück */ --parallax: 14px; /* wie weit die Kacheln der Maus folgen (nur mit Maus). 0 = gar nicht */ --bahn-linie: color-mix(in srgb, var(--ink) 9%, transparent); /* die feinen Kreisbahnen */ --bahn-bogen: var(--marke-2); /* der Lichtbogen, der außen herumläuft */ --faden-farbe: var(--marke-2); /* die Fäden zur Mitte und das Licht darin */ /* Die Kacheln im Kreis: je ein Verlauf von hell (-a) nach kräftig (-b). Bewusst viele verschiedene Farben: der volle Kreis soll aussehen wie ein überfüllter Handy-Bildschirm. Umso ruhiger wirkt danach die eine App, die herauskommt. */ --k-suche-a:#5AA8FF; --k-suche-b:#2F6BFF; --k-video-a:#FF7AC0; --k-video-b:#E8338A; --k-notiz-a:#FFE066; --k-notiz-b:#FFB800; --k-chat-a:#FFFFFF; --k-chat-b:#E3E9F1; --k-diagramm-a:#B58CFF; --k-diagramm-b:#7A3CFF; --k-artikel-a:#FF9E80; --k-artikel-b:#FF5A36; --k-liste-a:#4DE0D6; --k-liste-b:#0FB3B3; --k-pdf-a:#FF6B7A; --k-pdf-b:#D11F3F; --k-merk-a:#FFB36B; --k-merk-b:#FF7A1A; --k-podcast-a:#A78BFA; --k-podcast-b:#6D28D9; --k-zitat-a:#8B95FF; --k-zitat-b:#4F46E5; --k-ordner-a:#7DD3FC; --k-ordner-b:#0EA5E9; --k-mail-a:#D5DDE8; --k-mail-b:#8A99AE; --k-foto-a:#C6F27A; --k-foto-b:#6BB512; --k-sprache-a:#3A3F4B; --k-sprache-b:#0D1017; --k-tabelle-a:#4ADE9B; --k-tabelle-b:#079669; --k-papier: #FFFFFF; /* das Weiß in den Kacheln */ --k-gruen: #22C55E; /* die eigene Sprechblase im Chat */ /* Der Verlauf: die fünf Urteile einmal quer gezogen. Das ist die einzige Farbe, die die Seite benutzt. */ --verlauf: linear-gradient(90deg, var(--s-meinung), var(--s-belegt) 26%, var(--s-studien) 50%, var(--s-verkuerzt) 74%, var(--s-falsch)); /* ---------- Schrift ---------- SEIT 25.09.2026 NACHMITTAGS: eine einzige Schrift für alles, Gabarito. Rund, fett, breite Buchstaben, dieselbe wie im Countdown auf der Warteliste. Kilian: „nicht so serious“. Vorher (seit dem Umbau nach uneevo am Morgen) standen die Überschriften in Newsreader, einer Serifenschrift; das steht noch in der Git-Geschichte. Gabarito kann alle Stärken von 400 (normal) bis 900 (am dicksten). Darum reicht eine Schrift: Überschriften sehr fett, Beschriftungen halbfett, Fließtext normal. Die Schrift liegt als Datei im Projekt: schriften/gabarito.woff2 (seit 28.09.2026, vorher von Google Fonts). Die Regel dazu steht ganz oben in dieser Datei (@font-face). Willst du eine andere ausprobieren: neue .woff2 in schriften/ legen, oben die @font-face-Regel anpassen, hier die Namen tauschen und in allen Seiten die preload-Zeile im anpassen. Gute runde Kandidaten: Fredoka (noch runder), Nunito (weicher), Baloo 2 (am dicksten). */ --schrift-titel: 'Gabarito', 'Arial Rounded MT Bold', system-ui, sans-serif; /* Überschriften */ --schrift-marke: 'Gabarito', system-ui, sans-serif; /* Logo, Name, Zeichnungen in den Kacheln */ --schrift: 'Gabarito', system-ui, -apple-system, sans-serif; /* Fließtext */ --schrift-etikett: 'Gabarito', system-ui, sans-serif; /* kleine Beschriftungen in GROSSBUCHSTABEN, Knöpfe, Menü */ --schrift-wucht: 'Gabarito', 'Arial Black', Impact, sans-serif; /* Countdown, REALUP ganz unten */ /* Wie fett. 900 = so dick wie der Countdown. */ --fett-titel: 800; /* große Überschriften */ --fett-zwischen: 700; /* kleine Überschriften, FAQ-Fragen, Links in der Fußzeile */ --fett-etikett: 600; /* kleine Beschriftungen, Knöpfe, Menü */ --fett-text: 500; /* aller normale Text (seit 27.09.2026, vorher 400 = dünn). 400 = dünn wie vorher, 600 = halbfett */ --knopf-schrift: 14px; /* Schrift in Knöpfen. Oben in der Leiste kleiner und in GROSSBUCHSTABEN */ /* ---------- Maße ---------- */ --gasse: clamp(20px, 5vw, 76px); /* Luft links und rechts */ --breite: 1220px; /* maximale Seitenbreite */ /* ---------- Rundungen ---------- Eine Leiter, kein Zufallswert je Stelle. Große Flächen bekommen mehr Rundung als kleine — sonst sieht die kleine Fläche verglichen mit der großen eckig aus. Alles hier hochdrehen macht die Seite weicher, alles auf 0 macht sie streng. */ --rund-klein: 8px; /* Knöpfe, Zeitmarken, Eingabefelder */ --rund: 14px; /* Karten, Kacheln */ --rund-gross: 22px; /* große Blöcke, Bilder */ --rund-pille: 99px; /* Pillen */ --leiste-luft: 14px; /* wie weit die Navigationsleiste oben schwebt */ --kopf-rand: clamp(16px, 2.8vw, 44px); /* Abstand von Logo (links) und „Log in“ (rechts) zum Fensterrand */ --marke-groesse: 22px; /* Logo oben links: Größe von Zeichen und Name */ --marke-beim-scrollen: 1; /* 1 = Logo läuft beim Scrollen mit (seit 25.09.2026), 0 = blendet aus */ /* Logo beim Drüberfahren (seit 27.09.2026, Vorbild: ploy): in Ruhe sind Zeichen und „Up“ schwarz. Beim Drüberfahren fließt Pastell in den Logo-Farben von links nach rechts hinein, erst ins Zeichen, gleich danach in „Up“. Sehr schnell, eher gefühlt als gesehen. */ --marke-hell-anteil: 1; /* wie viel Logo-Farbe drin ist: 1 = die vollen RealUp-Farben (so ist es jetzt), .45 = Pastell, .3 = sehr hell */ --marke-fluss-zeit: .2s; /* wie lange die Farbe braucht, um durch Zeichen bzw. „Up“ zu fließen */ --marke-fluss-versatz: .12s; /* wie viel später „Up“ dran ist als das Zeichen (0 = beide gleichzeitig) */ --marke-sprung-hoehe: .28em; /* wie hoch „Up“ beim Drüberfahren kurz hochhüpft (0 = gar nicht) */ --marke-sprung-zeit: .42s; /* wie lange der Hüpfer samt Zurückfedern dauert */ --marke-up-luft: .15em; /* Luft um „Up“, damit das „p“ nicht abgeschnitten wird. 0 = wieder wie vorher */ /* ---------- Social Media (Fußzeile) ---------- */ --sozial-groesse: 44px; /* Durchmesser der runden Knöpfe (44px = gut zu treffen am Handy) */ --sozial-zeichen: 20px; /* Größe von Instagram-, TikTok-, X- und YouTube-Zeichen darin */ /* Farben beim Drüberfahren: jeder Knopf in der Farbe seiner Plattform */ --sozial-instagram: radial-gradient(circle at 30% 107%, #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%); /* der typische Insta-Verlauf: gelb → orange → pink → lila → blau */ --sozial-tiktok: #000000; /* TikTok: schwarzer Kreis … */ --sozial-tiktok-tuerkis: #25F4EE; /* … und der türkise … */ --sozial-tiktok-rot: #FE2C55; /* … und rote Versatz um die weiße Note */ --sozial-x: #000000; /* X: schwarz, weißes Zeichen */ --sozial-youtube: #FF0000; /* YouTube: rot, weißes Zeichen */ /* ---------- Aufklapp-Menü ---------- */ --menue-zeit: .32s; /* wie schnell Tafel und Licht sich bewegen */ --menue-abstand: 8px; /* Lücke zwischen Leiste und Tafel */ --menue-licht: rgba(15,23,27,.07); /* die Kapsel hinter dem offenen Punkt */ --menue-tafel: rgba(251,251,249,.94); /* Hintergrund der Tafel, fast deckend */ /* ---------- Konto oben rechts ---------- */ /* Seit 27.09.2026 schwarz-weiß mit Ring in den Logo-Farben, damit der Kreis zum schwarzen Logo links passt. */ --avatar-grund: var(--ink); /* Kreis ohne Profilbild: schwarz … */ --avatar-schrift:#FFFFFF; /* … mit weißem Buchstaben */ --avatar-grau: 1; /* Profilbild schwarz-weiß: 1 = ganz, 0 = in Farbe wie hochgeladen */ --avatar-ring: 3px; /* Dicke des Rings im RealUp-Verlauf (dreht sich wie bei „Join waitlist“, Tempo: --ring-runde) */ /* ---------- Rollende Ziffern: Countdown und Platz ---------- */ --rolle-zeit: .7s; /* so lange rollt eine Ziffer */ --rolle-kurve: cubic-bezier(.34,1.25,.5,1); /* schnell los, federt kurz nach */ --rolle-rand: .4em; /* so weit sieht man eine Ziffer noch über/unter der Zeile */ --rolle-kante: 22%; /* wie weich sie dort ausblendet */ --countdown-schrift: clamp(52px, 11vw, 132px); /* Größe der Countdown-Ziffern */ /* ---------- Tipp-Animation der Warteliste ---------- */ --tipp-schrift: clamp(26px, 3.2vw, 40px); /* Größe der E-Mail beim Tippen */ --tipp-federweg: .45em; /* wie tief ein Buchstabe startet und wie weit er überschwingt */ --tipp-zeit-rein: .52s; /* so lange federt ein neuer Buchstabe */ --tipp-zeit-raus: .26s; /* so lange fällt ein gelöschter heraus */ --tipp-zeit-breite: .34s; /* so lange rutscht der Text zur Seite */ /* ---------- Die Warteliste (warteliste.html, neu seit 28.09.2026) ---------- */ --liste-countdown: clamp(52px, 8.4vw, 116px); /* Größe der Countdown-Ziffern im Farbband oben */ --liste-band-luft: clamp(24px, 4.4vh, 48px); /* Luft im Band über und unter dem Countdown */ /* Das Ticket mit dem eigenen Platz: Nachtblau wie das Team-Board */ --ticket-grund: var(--brett-team-grund); --ticket-text: #FFFFFF; --ticket-leise: #B3B9E8; --ticket-akzent: var(--brett-team-akzent); /* die Raute #, auf Platz 1 auch die Zahl */ --ticket-zahl: clamp(96px, 11vw, 160px); /* Größe des Platzes */ --ticket-hoehe: clamp(400px, 38vw, 480px); /* Mindesthöhe des Tickets */ --ticket-kerbe: 14px; /* Radius der zwei runden Kerben an der Abrisskante. 0 = keine */ --ticket-abriss: 88px; /* so hoch ist der Abriss unten (Freunde, Code, Launch) */ --ticket-schatten: 0 28px 34px rgba(14,17,51,.24); /* Schatten unter dem Ticket. transparent = keiner */ /* Die Einladung daneben: hell wie das Board „für alle“ */ --einladen-grund: var(--brett-alle-grund); --einladen-text: var(--nacht); --einladen-leise: var(--brett-alle-leise); --fortschritt-hoehe: 8px; /* der Balken bis zum nächsten Platz */ /* ---------- Blog (seit 27.09.2026): blog.html und blog-….html ---------- */ --blog-band-hoehe: 22svh; /* das Farbband oben, niedriger als auf der Startseite (--band-hoehe) */ --blog-lese-breite: 66ch; /* so breit wird der Text eines Artikels höchstens. Mehr = längere Zeilen */ --blog-text-groesse: clamp(17px, 1.3vw, 19.5px); /* Fließtext im Artikel */ --blog-text-farbe: var(--ink-2); /* Fließtext im Artikel. var(--ink) = schwarz, kräftiger */ --blog-abstand: clamp(16px, 2vw, 28px); /* Lücke zwischen zwei Karten nebeneinander */ --blog-rund: var(--fach-rund); /* Rundung der bunten Bilder, wie die großen Kästen */ --blog-bild-hoehe: clamp(220px, 24vw, 320px); /* Bild in einer kleinen Karte */ --blog-bild-gross: clamp(280px, 34vw, 460px); /* Bild in der großen Karte oben auf blog.html */ --blog-bild-artikel: clamp(240px, 38vw, 500px); /* Bild oben in einem Artikel */ --blog-heben: var(--brett-heben); /* wie weit das Bild beim Drüberfahren hochgeht. 0 = gar nicht */ --blog-schatten: 0 18px 44px -26px rgba(14,17,51,.38); /* Schatten unter Fundstellen und dem Faktencheck-Blatt */ /* Die Bilder der drei Artikel, dieselben Verläufe wie die Boards auf der Startseite */ --blog-bild-herkunft: var(--brett-alle-grund); /* hell: „Where did you hear that?“ */ --blog-bild-farben: var(--brett-team-grund); /* Nachtblau: die fünf Urteilsfarben */ --blog-bild-zehn: var(--brett-schule-grund); /* Blau: das durchgestrichene 10% */ /* ---------- Help Center (seit 27.09.2026): hilfe.html ---------- */ --hilfe-suche-breite: 640px; /* wie breit das Suchfeld höchstens wird */ --hilfe-suche-hoehe: 64px; /* wie hoch es ist */ --hilfe-suche-ring: color-mix(in srgb, var(--marke-2) 18%, transparent); /* der Schein ums Feld beim Tippen */ --hilfe-bereich-luft: clamp(56px,7vw,104px); /* Luft über jedem Bereich (Getting started, Sources …) */ /* ---------- Rechtliches und Kontakt (seit 28.09.2026): impressum/, datenschutz/, nutzungsbedingungen/, konto-loeschen/, kontakt/ ---------- */ --rechts-kasten-grund: var(--papier); /* der Kasten „Das Wichtigste zuerst“ */ --rechts-kasten-rand: var(--linie); /* sein Rand */ --rechts-kasten-rund: var(--rund-klein); /* seine Rundung. 0 = eckig */ --rechts-tabelle-linie: var(--linie); /* Linien in der Tabelle „What is kept in your browser“ */ --kontakt-breite: 34rem; /* so breit wird das Kontaktformular höchstens */ --kontakt-feld-hoehe: 11rem; /* Höhe des Nachrichtenfelds */ /* ---------- Admin (seit 28.09.2026): admin/ ---------- */ --admin-balken-farbe: var(--marke-2); /* die Balken im Verlauf. Eine Farbe, weil es immer nur eine Reihe ist */ --admin-balken-hoehe: 150px; /* wie hoch ein Verlauf ist */ --admin-balken-luecke: 2px; /* Lücke zwischen zwei Balken */ --admin-kachel-grund: var(--papier); /* Grund der Kacheln oben */ /* ---------- Bewegung ---------- */ --e: cubic-bezier(.22,.61,.36,1); /* schnell rein, weich aus */ --e-weich: cubic-bezier(.4,0,.2,1); } /* ============================================================ Grundlagen ============================================================ */ *{ box-sizing:border-box } html, body{ overflow-x:hidden; overflow-x:clip } /* Dunkelmodus des Browsers (Fix 28.09.2026): Chrome, Brave und Samsung Internet färben helle Seiten im Dunkelmodus sonst von selbst dunkel. Dabei wird Schwarz zu Weiß umgedreht, aber nicht alles: das „R“ und „Up“ im Logo, die schwarzen Knöpfe und die leisen Zeilen in „More with RealUp“ verschwanden auf dunklem Grund. „only light“ sagt dem Browser: diese Seite ist hell gestaltet, bitte nicht umfärben. Dasselbe steht als in jeder Seite, damit es schon greift, bevor stil.css geladen ist. */ :root{ color-scheme:only light } html{ scroll-behavior:smooth } body{ margin:0; background:var(--canvas); color:var(--ink); font-family:var(--schrift); font-weight:var(--fett-text); font-size:17px; line-height:1.62; /* mehr Luft zwischen den Zeilen = ruhiger zu lesen */ -webkit-font-smoothing:antialiased; } /* Die Hülle hält jeden Abschnitt auf gleicher Breite und Luft. */ .huelle{ position:relative; z-index:1; max-width:var(--breite); margin:0 auto; padding:0 var(--gasse); } section{ padding:clamp(72px,10vw,132px) 0; position:relative } /* Überschriften: groß und sehr fett, wie der Countdown */ h1{ font-family:var(--schrift-titel); font-size:clamp(48px,8vw,120px); line-height:.98; letter-spacing:-.022em; font-weight:var(--fett-titel); margin:0 } h2{ font-family:var(--schrift-titel); font-size:clamp(36px,4.8vw,68px); line-height:1.04; letter-spacing:-.018em; font-weight:var(--fett-titel); margin:0 0 14px } h3{ font-family:var(--schrift-titel); font-size:22px; line-height:1.25; letter-spacing:-.008em; font-weight:var(--fett-zwischen); margin:0 0 7px } /* Ein Teil der Überschrift betont: in der Überschrift …. Gabarito hat keine Kursive (der Browser würde sie nur schief ziehen), darum ist das betonte Stück nicht schräg, sondern im Farbverlauf des Logos, wie „trust.“ ganz oben. */ h1 em, h2 em, h3 em, .kreis-gross em, .fuss-satz em{ font-style:normal; font-weight:inherit; background:var(--marke-verlauf); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; } /* Knöpfe nebeneinander, bei Platzmangel umbrechen */ .tasten{ display:flex; flex-wrap:wrap; gap:10px } p { margin:0 0 14px; color:var(--ink-2) } /* Der Vorspann: etwas größer als Fließtext, und nie zu breit. 44ch heißt "ungefähr 44 Zeichen" — die bequemste Lesebreite. */ .lede{ font-size:clamp(16px,1.3vw,19px); line-height:1.55; max-width:44ch } /* Die kleinen Beschriftungen über jeder Überschrift. Halbfett in Großbuchstaben, mit etwas Luft zwischen den Buchstaben. */ .kicker{ font-family:var(--schrift-etikett); font-weight:var(--fett-etikett); font-size:11px; letter-spacing:.14em; text-transform:uppercase; line-height:1.4; color:var(--ink-3); margin:0 0 16px; } .trenner{ height:1px; background:var(--linie); border:0; margin:0 auto; max-width:var(--breite) } .trenner.bunt{ height:2px; background:var(--verlauf); opacity:.85 } /* Für Tastatur und Vorlesegeräte */ .sprung{ position:absolute; left:-9999px; top:0; background:var(--ink); color:var(--canvas); padding:12px 18px; border-radius:0 0 6px 0; z-index:99 } .sprung:focus{ left:0 } .nur-vorlesen{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap } :focus-visible{ outline:2px solid var(--u-meinung); outline-offset:3px; border-radius:3px } /* ============================================================ Kopfzeile — klebt oben, bekommt beim Scrollen eine Linie ============================================================ */ /* Der header selbst ist unsichtbar und hält die Leiste nur oben fest. Er darf keinen Hintergrund haben, sonst schwebt nichts. */ header{ /* Regler für die Glasleiste oben */ --leiste-hoehe: 52px; --leiste-oben: .40; /* Deckkraft oben — kleiner = luftiger */ --leiste-unten: .80; /* Deckkraft unten — größer = dichter */ --leiste-unschaerfe: 5px; --leiste-rand: rgba(3,3,2,.09); /* feiner Rand, erst beim Scrollen */ --leiste-schatten: 0 6px 24px rgba(15,23,27,.08); /* weicher Schatten, erst beim Scrollen */ position:sticky; top:0; z-index:20; padding-top:var(--leiste-luft); background:transparent; pointer-events:none; /* die Lücken neben der Leiste bleiben durchklickbar */ } header .huelle{ pointer-events:none } header .leiste, header .marke{ pointer-events:auto } /* Drei Spalten: links das Logo, in der Mitte die Leiste, rechts „Log in“ (bzw. der Kreis mit dem Profilbild). Die beiden äußeren Spalten sind gleich breit, nur so steht die Leiste wirklich in der Mitte der Seite, egal wie lang der Name links ist. Die Kopfzeile ist breiter als der Inhalt darunter: Logo und „Log in“ sitzen in den Ecken des Fensters, nur --kopf-rand vom Rand entfernt (seit 25.09.2026). */ .kopf-raster{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; } header .kopf-raster{ max-width:none; padding-inline:var(--kopf-rand) } .kopf-raster .marke{ justify-self:start } .kopf-raster .leiste{ margin-inline:0 } /* Beim Scrollen: läuft das Logo mit oder verschwindet es? 1 = bleibt sichtbar und läuft mit nach unten (so ist es jetzt), 0 = blendet aus. Die Leiste bleibt in jedem Fall. Das Logo steht dabei frei, ohne Kapsel oder Rahmen (Kilians Wunsch). Über dunklen Flächen wird es von selbst hell (auf-dunkel). */ header.fest .marke{ opacity:var(--marke-beim-scrollen); transform:translateY(calc((1 - var(--marke-beim-scrollen)) * -6px)); } @media (max-width:760px){ /* Am Handy passt nur der Knopf in die Leiste. Dann steht sie rechts, gegenüber vom Logo, statt verloren in der Mitte. */ .kopf-raster{ grid-template-columns:1fr auto } } /* ---------- die schwebende Leiste, nach Craft ---------- Ich habe mir die Werte auf craft.do direkt ausgelesen. Vier Dinge machen dort den Unterschied, und alle vier sind subtil: 1. Die Leiste ist SCHMALER als der Inhalt. Sie umschließt nur ihre eigenen Einträge und steht mittig. Dadurch schwebt sie wirklich, statt wie ein Deckel auf der Seite zu liegen. 2. Die Ecken sind exakt halb so rund wie die Leiste hoch ist. Damit wird aus dem Rechteck eine Kapsel, keine Karte. 3. Der Hintergrund ist kein gleichmäßiges Milchglas, sondern ein Verlauf von oben (durchsichtiger) nach unten (dichter). Genau das lässt es nach gewölbtem Glas aussehen. 4. Die Unschärfe ist SCHWACH, nur 4 Pixel. Craft verlässt sich auf die Verläufe, nicht auf das Weichzeichnen — deshalb wirkt es leicht statt schwer. Kein Schatten am Anfang. Der kommt erst beim Scrollen. */ .leiste{ /* Die Regler für Höhe und Glas (--leiste-hoehe, --leiste-oben, --leiste-unten, --leiste-unschaerfe, --leiste-rand, --leiste-schatten) stehen oben bei „header“. */ position:relative; display:flex; align-items:center; justify-content:space-between; gap:clamp(14px,2.4vw,34px); height:var(--leiste-hoehe); padding:0 6px 0 22px; /* hugs its content: nur so breit wie nötig, und mittig */ width:fit-content; max-width:100%; margin-inline:auto; border-radius:calc(var(--leiste-hoehe) / 2); /* immer eine Kapsel */ background:linear-gradient( rgba(255,255,255,var(--leiste-oben)) 10%, rgba(255,255,255,var(--leiste-unten))); -webkit-backdrop-filter:blur(var(--leiste-unschaerfe)); backdrop-filter:blur(var(--leiste-unschaerfe)); border:1px solid transparent; transition:box-shadow .35s var(--e-weich), border-color .35s var(--e-weich); } /* Der Knopf in der Leiste ist ebenfalls eine Kapsel — eine eckige Form in einer runden Form sieht immer nach Versehen aus. */ .leiste .knopf{ --knopf-rund:var(--rund-pille); min-height:36px; font-size:11.5px; letter-spacing:.08em } /* wie die Menüpunkte daneben */ /* Der Glanz. Ein zweiter Verlauf, der nur oben liegt und nach unten verschwindet — das ist das Licht auf der Wölbung. */ .leiste::before{ content:""; position:absolute; inset:0; z-index:-1; /* hinter allem in der Leiste, sonst legt sich der Glanz als weißer Schleier über den Farbring am Knopf */ border-radius:inherit; pointer-events:none; background:linear-gradient( rgba(255,255,255,.64) 40%, rgba(255,255,255,0) 75%); } /* Über einem dunklen Titelbild werden Name und „Log in“ hell. Die Klasse setzt effekte.js (EFFEKT 3). */ header.auf-dunkel .marke, header.auf-dunkel .kopf-login{ color:var(--titel-text) } /* Erst beim Scrollen setzt sich die Leiste vom Inhalt ab. */ header.fest .leiste{ border-color:var(--leiste-rand); box-shadow:var(--leiste-schatten); } @media (max-width:760px){ header{ --leiste-hoehe:46px } .leiste{ padding:0 5px; gap:10px } } /* flex-shrink:0 und nowrap: in einer Leiste, die nur so breit ist wie ihr Inhalt, darf nichts umbrechen oder zusammengequetscht werden — sonst rutscht der Name unter das Zeichen. */ .marke{ display:flex; align-items:center; gap:10px; flex:none; white-space:nowrap; text-decoration:none; color:var(--ink); font-family:var(--schrift-marke); font-weight:700; font-size:var(--marke-groesse); letter-spacing:-.015em; transition:color .25s var(--e-weich), opacity .35s var(--e-weich), transform .35s var(--e-weich) } /* Das Logo liegt als eigene Datei logo.svg daneben, damit es nur an EINER Stelle gepflegt wird: Startseite, Anmeldung, Warteliste und das Browsersymbol benutzen alle dieselbe Datei. */ /* Der Name steckt in EINER Hülle. Sonst greift der Abstand der Leiste auch zwischen „Real" und „Up" und reißt den Namen auseinander. */ .marke-name{ display:inline-block } .marke-zeichen{ width:calc(var(--marke-groesse) * 1.34); height:calc(var(--marke-groesse) * 1.34); display:block; flex:none; /* In Ruhe schwarz: brightness(0) macht jede Farbe aus logo.svg schwarz, ohne die Datei zu ändern. Browsersymbol und App-Karte bleiben dadurch bunt. */ filter:brightness(0); /* Wo die Farbe schon ist, wird das Schwarz im selben Takt weggeschnitten (von links). Sonst blitzt am Rand ein feiner schwarzer Saum unter der Farbe durch. */ clip-path:inset(0 0 0 0); transition:clip-path var(--marke-fluss-zeit) var(--e-weich) var(--marke-fluss-versatz); } .marke:hover .marke-zeichen, .marke:focus-visible .marke-zeichen{ clip-path:inset(0 0 0 100%); transition-delay:0s; } /* Über einem dunklen Titelbild ist das Zeichen in Ruhe weiß. */ header.auf-dunkel .marke-zeichen{ filter:brightness(0) invert(1) } /* Die Farbe fürs Zeichen: eine zweite Kopie von logo.svg, genau über dem schwarzen Zeichen. Sie ist in Pastell gefärbt und in Ruhe ganz weggeschnitten (clip-path: rechts 100 % ab). Beim Drüberfahren wird der Schnitt von links nach rechts aufgezogen, die Farbe „fließt“ hinein. Beim Wegfahren läuft es zurück. contrast + brightness mischen die Logo-Farben mit Weiß, genau im Verhältnis --marke-hell-anteil, passend zum „Up“ daneben. */ .marke{ position:relative } .marke::before{ content:""; position:absolute; left:0; top:50%; width:calc(var(--marke-groesse) * 1.34); height:calc(var(--marke-groesse) * 1.34); transform:translateY(-50%); background:url("logo.svg?v=3") center / contain no-repeat; filter:contrast(calc(var(--marke-hell-anteil) / (2 - var(--marke-hell-anteil)))) brightness(calc(2 - var(--marke-hell-anteil))); clip-path:inset(0 100% 0 0); pointer-events:none; z-index:1; /* über dem schwarzen Zeichen (das hat einen Filter und läge sonst obendrauf) */ /* Beim Wegfahren wartet das Zeichen, bis „Up“ schon zurückläuft: die Farbe fließt dann von rechts nach links wieder heraus. */ transition:clip-path var(--marke-fluss-zeit) var(--e-weich) var(--marke-fluss-versatz); } .marke:hover::before, .marke:focus-visible::before{ clip-path:inset(0 0 0 0); transition-delay:0s; } /* „Up" im Markenverlauf, genau wie im Schriftzug des Logos. background-clip:text heißt: der Verlauf wird durch die Buchstaben hindurch sichtbar, der Text selbst ist durchsichtig. */ .marke-up, .wort-up{ background:var(--marke-verlauf); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; } /* Im Logo (oben links und in der Fußzeile) ist „Up“ in Ruhe so schwarz wie „Real“. Zwei Schichten liegen durch die Buchstaben sichtbar übereinander: oben Schwarz (die Schriftfarbe), darunter der Verlauf in Pastell. Beim Drüberfahren schrumpft die schwarze Schicht nach rechts weg, die Farbe fließt also von links nach rechts hinein, kurz nach dem Zeichen (--marke-fluss-versatz). Alle anderen „Up“ auf der Seite bleiben kräftig bunt. */ .marke .marke-up{ color:inherit; /* Schwarz wie „Real“ (die Grundregel oben macht die Farbe durchsichtig) */ background: linear-gradient(currentColor, currentColor) right / 100% 100% no-repeat, linear-gradient(118deg, color-mix(in srgb, var(--marke-1) calc(var(--marke-hell-anteil) * 100%), white), color-mix(in srgb, var(--marke-2) calc(var(--marke-hell-anteil) * 100%), white) 52%, color-mix(in srgb, var(--marke-3) calc(var(--marke-hell-anteil) * 100%), white)) 0 0 / 100% 100%; /* Größe ausgeschrieben: nur dann kann der Browser weich überblenden */ -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; transition:background-size var(--marke-fluss-zeit) var(--e-weich); } .marke:hover .marke-up, .marke:focus-visible .marke-up{ background-size:0% 100%, 100% 100%; transition-delay:var(--marke-fluss-versatz); /* Gleichzeitig hüpft „Up“ einmal kurz hoch und federt zurück, wie ein kleines „Zack, drin!“. Läuft einmal pro Drüberfahren. */ animation:marke-up-hopser var(--marke-sprung-zeit) var(--marke-fluss-versatz) both; } /* inline-block: nur so lässt sich „Up“ allein nach oben schieben */ .marke .marke-up{ display:inline-block } /* Fix 27.09.2026: Das „p“ war rechts und unten leicht abgeschnitten. Grund: Bei background-clip:text ist nur sichtbar, was INNERHALB des Kastens von „Up“ liegt. Der Bauch und die Unterlänge vom „p“ ragen in Gabarito aber ein kleines Stück darüber hinaus (dazu zieht der enge Buchstabenabstand den Kasten noch etwas ein). Darum bekommt der Kasten ringsum etwas Luft (--marke-up-luft), und der negative Rand zieht sie gleich wieder ab. So wird der sichtbare Bereich größer, aber nichts verrutscht. */ .marke .marke-up{ padding:var(--marke-up-luft); margin:calc(var(--marke-up-luft) * -1); } @keyframes marke-up-hopser{ 0% { transform:translateY(0); animation-timing-function:cubic-bezier(.2,.7,.3,1) } /* schnell hoch … */ 38% { transform:translateY(calc(var(--marke-sprung-hoehe) * -1)); animation-timing-function:cubic-bezier(.5,0,.8,.4) } /* … kurz oben … */ 70% { transform:translateY(calc(var(--marke-sprung-hoehe) * .15)) scaleY(.94) } /* … landet, federt leicht ein … */ 100% { transform:translateY(0) } /* … und steht wieder */ } /* Wer in den Einstellungen „weniger Bewegung“ gewählt hat, bekommt nur die Farbe, keinen Hüpfer. */ @media (prefers-reduced-motion:reduce){ .marke:hover .marke-up, .marke:focus-visible .marke-up{ animation:none } } nav{ display:flex; align-items:center; gap:clamp(14px,2vw,30px); flex:none; white-space:nowrap } nav a{ font-family:var(--schrift-etikett); font-weight:var(--fett-etikett); font-size:11.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-2); text-decoration:none; transition:color .2s } nav a:hover{ color:var(--ink) } /* ============================================================ Knöpfe ============================================================ */ .knopf{ display:inline-flex; align-items:center; justify-content:center; min-height:38px; padding:0 17px; border-radius:var(--knopf-rund, var(--rund-klein)); background:var(--ink); color:var(--canvas); font-family:var(--schrift-etikett); font-weight:var(--fett-etikett); font-size:var(--knopf-schrift); letter-spacing:.01em; text-decoration:none; border:0; cursor:pointer; position:relative; top:0; transition:top .2s var(--e); } /* Beim Schweben legt sich der Verlauf als dünner Ring rund um den ganzen Knopf. Farben: Türkis, Blau, Violett aus dem RealUp-Logo (--marke-1 bis --marke-3, seit 25.09.2026; vorher die fünf Regenbogen-Farben des Faktenchecks). Der Ring ist --ring-breite breit und liegt direkt außen am Knopf an, mit derselben Rundung. Die Maske schneidet die Mitte heraus, sodass nur der Rand farbig ist. Die Farben wandern langsam einmal rundherum (--ring-runde), und ein weicher Schein dahinter atmet leicht (--ring-puls). */ @property --ring-dreh{ syntax:""; inherits:false; initial-value:0deg } .knopf{ --ring-runde: 6s; /* so lange dauert eine Runde der Farben */ --ring-puls: 2.4s; /* so lange dauert ein Atemzug des Scheins */ --ring-breite: 2.5px; /* wie dick der Farbring ist (vorher 2px) */ } /* Der Verlauf muss HIER stehen, im Ring selbst. Stünde er oben am Knopf, würde er dort einmal mit 0deg ausgerechnet und die Drehung käme nie im Ring an. */ .knopf::after, .knopf::before{ content:""; position:absolute; inset:calc(var(--ring-breite) * -1); border-radius:calc(var(--knopf-rund, var(--rund-klein)) + var(--ring-breite)); /* Die Logo-Farben einmal hin und zurück, damit der Kreis ohne sichtbaren Sprung schließt */ background:conic-gradient(from var(--ring-dreh), var(--marke-1), var(--marke-2), var(--marke-3), var(--marke-2), var(--marke-1)); opacity:0; transition:opacity .3s; pointer-events:none; animation:ring-drehen var(--ring-runde) linear infinite paused; } /* der scharfe Ring. Er liegt HINTER dem Knopf (z-index:-1) und reicht innen 1px unter die schwarze Fläche. So gibt es zwischen Ring und Knopf keine helle Haarlinie mehr, auch nicht an den Rundungen. */ .knopf::after{ z-index:-1; padding:calc(var(--ring-breite) + 1px); /* Ring außen + 1px, der unter dem Knopf verschwindet */ -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); } /* Der leere Knopf ist innen durchsichtig. Dort würde der Schein durchscheinen, darum bekommt er nur den Ring. */ .knopf.leer::before{ display:none } /* der weiche Schein dahinter */ .knopf::before{ z-index:-1; filter:blur(8px); } .knopf:hover::after, .knopf:focus-visible::after{ opacity:1; animation-play-state:running } .knopf:hover::before, .knopf:focus-visible::before{ animation:ring-drehen var(--ring-runde) linear infinite, ring-atmen var(--ring-puls) ease-in-out infinite; } @keyframes ring-drehen{ to{ --ring-dreh:360deg } } @keyframes ring-atmen{ 0%,100%{ opacity:.25 } 50%{ opacity:.6 } } @media (prefers-reduced-motion:reduce){ .knopf::after, .knopf::before{ animation:none !important } .knopf:hover::before{ opacity:.35 } } /* Anheben über top statt transform: ein transform würde den Schein hinter dem Knopf nach vorn über die schwarze Fläche holen. */ .knopf:hover{ top:-1px } .knopf:hover::after{ opacity:1 } .knopf.gross{ min-height:50px; padding:0 26px; font-size:calc(var(--knopf-schrift) + 1.5px) } /* Der leere Knopf: der Rahmen ist nachgerechnet auf 3,07:1 Kontrast. */ .knopf.leer{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px #8A8A84 } /* Der leere Knopf („See what's inside“, „Who it's for“) bekommt beim Drüberfahren keinen Farbring (seit 27.09.2026), den haben nur die schwarzen Knöpfe wie „Join waitlist“. Stattdessen hebt er sich leicht an und bekommt eine zarte graue Fläche. */ .knopf.leer::after{ display:none } .knopf.leer{ transition:top .2s var(--e), background .2s } .knopf.leer:hover{ background:var(--menue-licht) } @media (pointer:coarse){ .knopf{ min-height:44px } } @media (max-width:760px){ nav .verbergen{ display:none } } /* ---------- das Aufklapp-Menü (Vorbild: motion.dev) ---------- Drei Teile, alle drei in einem Satz erklärbar: 1. Die Punkte in der Leiste sind schlichte Knöpfe, ohne Pfeil (seit 27.09.2026). „Pricing“ ist ein normaler Link und klappt nichts auf. 2. Hinter dem offenen Punkt liegt das Licht, eine helle Kapsel. Es gibt nur EIN Licht, es gleitet von Punkt zu Punkt. 3. Unter der Leiste erscheint die Tafel, genau so breit wie die Leiste, mit drei Spalten. Wechselt man den Punkt, gleitet der Inhalt zur Seite, und die Tafel passt ihre Höhe an. Wie schnell das alles geht: --menue-zeit. Wie lange die Maus weg sein darf, bevor es zugeht: menue.js. */ .leiste-stapel{ position:relative; pointer-events:auto } .leiste nav{ position:relative; gap:2px } .leiste nav .knopf{ margin-left:10px } /* Der Knopf ist auch ein Link in der nav. Ohne diese Zeile würde „nav a:hover“ seine Schrift beim Drüberfahren schwarz machen, schwarz auf schwarz, also unsichtbar. */ nav .knopf, nav .knopf:hover{ color:var(--canvas) } .menue-punkt{ position:relative; z-index:1; display:flex; align-items:center; gap:5px; padding:9px 12px; border:0; border-radius:var(--rund-pille); background:transparent; cursor:pointer; font-family:var(--schrift-etikett); font-weight:var(--fett-etikett); font-size:11.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-2); text-decoration:none; /* text-decoration: für „Pricing“, das ein Link ist */ transition:color .2s; } .menue-punkt:hover, .menue-punkt[aria-expanded="true"]{ color:var(--ink) } /* Das Licht. Wo es steht und wie breit es ist, setzt menue.js über --licht-x und --licht-breite. */ .menue-licht{ position:absolute; left:0; top:50%; height:34px; margin-top:-17px; width:var(--licht-breite, 0px); transform:translateX(var(--licht-x, 0px)); border-radius:var(--rund-pille); background:var(--menue-licht); opacity:0; pointer-events:none; transition:transform var(--menue-zeit) var(--e), width var(--menue-zeit) var(--e), opacity .2s; } #menue.offen .menue-licht, #menue.licht-an .menue-licht{ opacity:1 } /* licht-an: über „Pricing“, das keine Tafel hat */ /* Beim ersten Öffnen soll das Licht nicht von links angeflogen kommen, sondern einfach dort erscheinen. */ #menue.frisch:not(.licht-an) .menue-licht{ transition:opacity .2s } /* kommt das Licht von „Pricing“, gleitet es trotzdem */ /* Die Tafel */ .tafel{ position:absolute; top:calc(100% + var(--menue-abstand)); left:50%; width:max(100%, 36rem); height:var(--tafel-hoehe, auto); overflow:hidden; border-radius:var(--rund-gross); border:1px solid var(--linie); background:var(--menue-tafel); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:0 18px 50px rgba(15,23,27,.12), 0 2px 6px rgba(15,23,27,.05); /* zu: unsichtbar, ein Stück höher, minimal kleiner */ opacity:0; transform:translateX(-50%) translateY(-6px) scale(.985); transform-origin:top center; visibility:hidden; transition: opacity var(--menue-zeit) var(--e), transform var(--menue-zeit) var(--e), height var(--menue-zeit) var(--e), visibility 0s linear var(--menue-zeit); } #menue.offen .tafel{ opacity:1; transform:translateX(-50%) translateY(0) scale(1); visibility:visible; transition: opacity var(--menue-zeit) var(--e), transform var(--menue-zeit) var(--e), height var(--menue-zeit) var(--e), visibility 0s; } #menue.frisch .tafel{ transition-property:opacity, transform, visibility } /* Die vier Inhalte liegen übereinander. Nur der aktive ist da. --von sagt, von welcher Seite er hereingleitet (menue.js). */ .tafel-inhalt{ position:absolute; top:0; left:0; right:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:10px 24px; padding:26px 30px 28px; opacity:0; transform:translateX(var(--von, 0px)); pointer-events:none; transition:opacity var(--menue-zeit) var(--e), transform var(--menue-zeit) var(--e); } .tafel-inhalt.da{ opacity:1; transform:none; pointer-events:auto } .tafel-kopf{ margin:0 0 12px; font-family:var(--schrift-etikett); font-weight:var(--fett-etikett); font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3); } .tafel-spalte ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px } /* Jeder Punkt bekommt beim Drüberfahren dasselbe Grau wie das Licht oben in der Leiste (--menue-licht). Das Innenpolster wird mit einem gleich großen negativen Rand ausgeglichen, damit der Text genau dort stehen bleibt, wo er vorher stand. */ .tafel-spalte a{ display:block; margin:-6px -10px; padding:6px 10px; border-radius:10px; font-size:14.5px; color:var(--ink); text-decoration:none; white-space:nowrap; transition:background-color .15s, color .15s; } .tafel-spalte a:hover, .tafel-spalte a:focus-visible{ background:var(--menue-licht); color:var(--ink); outline:none } /* Apps, die es erst zum Start gibt: Schloss davor, gedimmt, kein Drüberfahr-Grau. Fällt weg, sobald der Countdown abgelaufen ist. */ .tafel-spalte a.gesperrt{ display:flex; align-items:center; gap:7px; color:var(--ink-3); cursor:default } .tafel-spalte a.gesperrt:hover, .tafel-spalte a.gesperrt:focus-visible{ background:none; color:var(--ink-3) } .schloss{ width:12px; height:14px; flex:none; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round } /* Pricing oben in der Leiste: bis zum Launch gesperrt. Grau mit Schloss, das Licht wandert trotzdem mit, aber nichts passiert. */ .menue-punkt.gesperrt, .menue-punkt.gesperrt:hover{ color:var(--ink-3); cursor:default } .menue-punkt.gesperrt .schloss{ width:10px; height:12px; margin-top:-1px } /* Beim Drüberfahren über etwas Gesperrtes hüpft das Schloss einmal kurz hoch und federt zurück, genau wie „Up“ im Logo: dieselbe Bewegung (marke-up-hopser), dieselbe Höhe und Dauer (--marke-sprung-hoehe, --marke-sprung-zeit). Gilt für Pricing oben, Android/iPhone im Product-Menü und die zwei Punkte im Profil-Menü. */ .gesperrt .schloss{ transform-origin:50% 100% } .gesperrt:hover .schloss{ animation:marke-up-hopser var(--marke-sprung-zeit) both } @media (prefers-reduced-motion:reduce){ .gesperrt:hover .schloss{ animation:none } } @media (max-width:760px){ .tafel{ display:none } } @media (prefers-reduced-motion:reduce){ .tafel, .tafel-inhalt, .menue-licht{ transition-duration:0s !important } } /* ============================================================ Akzent — die Farbe von „Up“ für einzelne Wörter Ein Wort in einer Überschrift bekommt den Markenverlauf, genau wie „Up“ im Logo. Sparsam einsetzen: höchstens ein Akzent pro Überschrift, sonst bedeutet er nichts mehr. ============================================================ */ .akzent{ background:var(--marke-verlauf); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; /* Der Akzent bleibt zusammen in einer Zeile. Sonst stünde „one“ oben und „app.“ allein darunter. */ white-space:nowrap; /* Kursive Buchstaben ragen rechts etwas über. Ohne diese Luft würde der Verlauf das Ende des letzten Buchstabens abschneiden. */ padding-right:.08em; margin-right:-.08em; } /* ============================================================ 1. Oben: Farbband und große Überschrift (Vorbild uneevo) Oben das Band (liegt unter der Kopfzeile), darunter links die große Überschrift, rechts Text und Knöpfe. Die Bewegung des Bands steht in effekte.css, EFFEKT 9. ============================================================ */ .start{ padding:0; margin-top:calc(var(--kopf-hoehe) * -1); /* rutscht unter die Kopfzeile */ min-height:100vh; min-height:100svh; display:flex; flex-direction:column; } .start-band{ height:var(--band-hoehe); flex:none; margin:0 var(--band-rand); border-radius:0 0 var(--band-rund) var(--band-rund); background:var(--band-verlauf); background-size:220% 100%; position:relative; overflow:hidden; z-index:1; /* über dem Punktraster */ } .start-raster{ flex:1; width:100%; display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); align-items:center; gap:clamp(28px,5vw,80px); padding-top:clamp(40px,7vh,88px); padding-bottom:clamp(48px,8vh,96px); } /* Größe: richtet sich nach der Breite (--start-titel-breit) UND nach der Höhe des Fensters (--start-titel-max), der kleinere Wert gewinnt. Seit 27.09.2026 größer, alle drei Regler stehen oben bei --band-… Vorher nur nach der Breite: auf breiten, aber niedrigen Bildschirmen wurde „trust.“ unten abgeschnitten. */ .start-titel{ font-size:clamp(56px, min(var(--start-titel-breit), var(--start-titel-max)), var(--start-titel-groesst)); line-height:.95; letter-spacing:-.028em; max-width:8ch } .start-seite p{ color:var(--ink); font-size:var(--start-text-groesse); font-weight:var(--start-text-fett); line-height:1.38; letter-spacing:-.006em; max-width:30ch; margin-bottom:.7em } .start-seite .tasten{ margin-top:30px } /* Die zwei Knöpfe oben sind größer als die übrigen „großen“ Knöpfe */ .start-seite .knopf.gross{ min-height:58px; padding:0 30px; font-size:17px } @media (max-width:900px){ .start{ min-height:0 } .start-band{ height:32svh } .start-raster{ grid-template-columns:1fr; gap:22px; padding-top:36px } .start-titel{ max-width:9ch } } /* ============================================================ 2. Die fünf Werkzeuge — der stehende Abschnitt (werkzeuge.js) Ohne die Klasse "lebt" (Handy, ohne JavaScript, weniger Bewegung) stehen alle vier untereinander: Text, Karte, Text, Karte … Dafür lösen sich die beiden Spalten auf (display:contents), und "order" bringt Text und Karte in die richtige Reihenfolge. Mit "lebt" (am Computer) wird der Abschnitt hoch (--werkzeuge-strecke), die Bühne bleibt stehen, und nur das Werkzeug, dessen Nummer in data-schritt steht, ist zu sehen. Die Karten selbst sehen aus wie die alten Funktions-Kästen (.fach, weiter unten). ============================================================ */ /* z-index:1 legt den Abschnitt über das Punktraster. Nötig, weil die klebende Bühne (sticky) sonst darunter rutscht. */ .werkzeuge{ z-index:1 } .werkzeuge-raster{ display:flex; flex-direction:column; gap:20px } .werkzeuge-links, .werkzeuge-rechts, .werkzeug-texte{ display:contents } .werkzeug-punkte{ display:none } .werkzeuge .kicker{ order:0; margin-bottom:0 } .werkzeug-text[data-nr="0"]{ order:1 } .werkzeug-karte[data-nr="0"]{ order:2 } .werkzeug-text[data-nr="1"]{ order:3 } .werkzeug-karte[data-nr="1"]{ order:4 } .werkzeug-text[data-nr="2"]{ order:5 } .werkzeug-karte[data-nr="2"]{ order:6 } .werkzeug-text[data-nr="3"]{ order:7 } .werkzeug-karte[data-nr="3"]{ order:8 } .werkzeug-text[data-nr="4"]{ order:9 } .werkzeug-karte[data-nr="4"]{ order:10 } .werkzeug-text:not([data-nr="0"]){ margin-top:44px } .werkzeug-titel{ font-size:clamp(34px,4.2vw,62px); line-height:1.02; letter-spacing:-.022em; max-width:12ch; margin:0 0 18px; } .werkzeug-text p{ font-size:clamp(16px,1.25vw,19px); line-height:1.5; max-width:34ch; margin:0 } /* Die drei Punkte unter dem Absatz: je ein Häkchen im Logo-Verlauf. Beim KI-Chat ist der letzte Punkt eine kleine Uhr (.bald-punkt). */ .werkzeug-liste{ list-style:none; margin:clamp(18px,2.6vh,26px) 0 0; padding:0; display:grid; gap:10px } .werkzeug-liste li{ display:flex; align-items:center; gap:11px; font-size:clamp(14.5px,1.05vw,16px); font-weight:500; line-height:1.35; color:var(--ink); text-wrap:pretty; } .werkzeug-liste li::before{ content:""; width:20px; height:20px; flex:none; border-radius:50%; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.6 10.3l2.9 2.9 5.9-6.2' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat, var(--marke-verlauf); } .werkzeug-liste li.bald-punkt{ color:var(--ink-2) } .werkzeug-liste li.bald-punkt::before{ background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='5' fill='none' stroke='%234E5860' stroke-width='1.6'/%3E%3Cpath d='M10 7.4V10l1.8 1.3' fill='none' stroke='%234E5860' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% no-repeat, var(--canvas-2); } .werkzeuge .werkzeug-karte{ min-height:clamp(380px, 70vw, 500px) } /* ---------- am Computer: stehen bleiben ---------- */ .werkzeuge.lebt{ padding:0; height:var(--werkzeuge-strecke) } .lebt .werkzeuge-buehne{ position:sticky; top:0; height:100vh; height:100svh; display:flex; align-items:center; padding-top:calc(var(--kopf-hoehe) * .6); } .lebt .werkzeuge-raster{ display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); align-items:center; gap:clamp(32px,5vw,88px); } .lebt .werkzeuge-links{ display:flex; flex-direction:column } .lebt .werkzeuge-links .kicker{ margin-bottom:18px } .lebt .werkzeug-texte, .lebt .werkzeuge-rechts{ display:grid } .lebt .werkzeug-text, .werkzeuge.lebt .werkzeug-karte{ grid-area:1 / 1; margin:0 } .werkzeuge.lebt .werkzeug-karte{ min-height:0; height:var(--werkzeug-karte-hoehe) } /* Die Punkte unten links: der aktive wird zur kleinen grauen Pille, und die füllt sich beim Scrollen von links nach rechts schwarz, wie bei uneevo. Ist sie voll, kommt das nächste Werkzeug. Wie weit sie voll ist, schreibt werkzeuge.js bei jedem Scrollen als --punkt-voll an den Abschnitt (0 = leer, 1 = voll). */ .lebt .werkzeug-punkte{ display:flex; gap:8px; margin-top:clamp(28px,5vh,48px) } .werkzeug-punkte button{ position:relative; overflow:hidden; width:var(--werkzeug-punkt); height:var(--werkzeug-punkt); padding:0; border:0; border-radius:var(--rund-pille); background:var(--linie-2); cursor:pointer; transition:width var(--werkzeug-zeit) var(--e), background-color var(--werkzeug-zeit) var(--e); } .werkzeug-punkte button:not([aria-current]):hover{ background:var(--ink-3) } .werkzeug-punkte button[aria-current="step"]{ width:var(--werkzeug-pille) } /* Die schwarze Füllung. Sie ist mindestens so breit wie ein Punkt (damit sie vorne rund bleibt) und wächst dann bis ganz rechts. */ .werkzeug-punkte button::after{ content:""; position:absolute; top:0; bottom:0; left:0; width:calc(var(--werkzeug-punkt) + (100% - var(--werkzeug-punkt)) * var(--punkt-voll, 0)); border-radius:inherit; background:var(--ink); opacity:0; transition:opacity var(--werkzeug-zeit) var(--e); } .werkzeug-punkte button[aria-current="step"]::after{ opacity:1 } /* ============================================================ 3. Die große Karte: Überschrift mittig, darunter der Kreis ============================================================ */ .karte-kopf{ text-align:center; padding-bottom:clamp(8px,2vw,24px) } .karte-kopf h2{ font-size:clamp(44px,6.6vw,100px); line-height:.98; letter-spacing:-.025em; margin:0 } /* ============================================================ 3b. Der Kreis in der großen Karte (kreis.js) Der Abschnitt ist so hoch wie --kreis-buehne. Darin klebt die Bühne fest, während man scrollt. kreis.js misst, wie weit man ist, und schreibt --sog (0 bis 1) und ein paar Klassen. Was sich dabei bewegt, steht in effekte.css, EFFEKT 10. Ohne JavaScript bleibt der Abschnitt normal hoch und zeigt gleich das Ende: RealUp in der Mitte, Text mit Knöpfen. ============================================================ */ /* Seit 25.09.2026 steht der Kreis nicht mehr ganz oben, sondern in der großen Karte unter „Sound familiar?“. */ .kreis-abschnitt{ --sog:1; /* ohne JavaScript: gleich das Ende */ --faden:0; /* die Fäden zur Mitte (kreis.js), 0 = unsichtbar */ padding:0; /* Um die Karte herum: der helle Grund, ohne Punkte. z-index:1 legt den Abschnitt über das Punktraster. */ background:var(--canvas); z-index:1; } .kreis-abschnitt.lebt{ --sog:0; height:var(--kreis-buehne) } .kreis-buehne{ position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:center; padding:calc(var(--kopf-hoehe) + 24px) 0 48px; } /* Die große Karte. Sie liegt in der klebenden Bühne und bleibt darum stehen, während man durch die Animation scrollt. Oben lässt sie Platz für die Kopfzeile, links und rechts ist sie so breit wie die Seite (--karte-rand). */ .titelbild{ position:absolute; inset:calc(var(--kopf-hoehe) + 4px) var(--karte-rand) var(--titel-rand); border-radius:var(--titel-rund); background:var(--titel-grund) var(--titel-bild) var(--titel-lage) / cover no-repeat; pointer-events:none; } .lebt .kreis-buehne{ position:sticky; top:0; height:100vh; height:100svh; min-height:0; } /* Links der Text, rechts der Kreis. Am Handy untereinander. */ .kreis-raster{ width:100%; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:clamp(28px,5vw,80px); } /* ---------- die drei Texte ---------- Alle drei liegen in derselben Zelle übereinander. Dadurch ist der Platz immer so hoch wie der längste, und nichts springt, wenn der Text wechselt. */ .kreis-texte{ display:grid } .kreis-text{ grid-area:1 / 1; align-self:center } .kreis-gross{ font-family:var(--schrift-titel); font-weight:var(--fett-titel); font-size:clamp(40px,5.4vw,80px); line-height:1.0; letter-spacing:-.025em; color:var(--ink); margin:0 0 20px; max-width:11ch; } .kreis-klein{ font-size:clamp(16px,1.35vw,20px); line-height:1.5; max-width:31ch; margin:0 } /* ---------- auf einem dunklen Foto (class="titel-dunkel") ---------- Alles, was sonst dunkel auf hell steht, wird hell auf dunkel. Hinter dem Textblock liegt ein weicher dunkler Hof, damit die Schrift auch über hellen Stellen im Foto lesbar bleibt. */ .titel-dunkel .kreis-gross, .titel-dunkel .app-name{ color:var(--titel-text) } .titel-dunkel .kreis-klein, .titel-dunkel .kicker, .titel-dunkel .hinab{ color:var(--titel-leise) } .titel-dunkel .kreis-texte{ position:relative } .titel-dunkel .kreis-texte::before{ content:""; position:absolute; z-index:-1; pointer-events:none; inset:-30% -30% -30% -40%; background:radial-gradient(closest-side, var(--titel-schatten), transparent); } .titel-dunkel .knopf{ background:var(--titel-text); color:var(--nacht) } /* Der leere Knopf bekommt einen leicht dunklen Glasgrund, damit er auch vor dem hellen Horizont im Foto zu sehen ist. */ .titel-dunkel .knopf.leer{ background:var(--titel-schatten); color:var(--titel-text); box-shadow:inset 0 0 0 1px var(--titel-linie); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); } .titel-dunkel .hinab span{ background:linear-gradient(var(--titel-linie), transparent) } .titel-dunkel .bahn{ border-color:var(--titel-linie) } .titel-dunkel .bahn-rand{ background:radial-gradient(circle, color-mix(in srgb, var(--titel-text) 6%, transparent) 0 52%, transparent 71%); } .kreis-text .tasten{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px } /* Ohne JavaScript: nur der letzte Text. */ .kreis-abschnitt:not(.lebt) .kreis-text:not([data-stufe="3"]){ display:none } /* ---------- der Kreis ---------- */ .kreis{ position:relative; width:var(--kreis-groesse); aspect-ratio:1; flex:none; } /* Die Umlaufbahnen (seit 27.09.2026, vorher ein gestrichelter Ring). Außen ein feiner Rand mit hellem Innenlicht, darin zwei Bahnen genau durch die Mitte der Kacheln. Wie groß die beiden Bahnen sind, schreibt kreis.js aus den Radien (--bahn-aussen, --bahn-innen). Beim Sog ziehen sie sich zusammen und verschwinden. Mit der Maus wandern sie ein kleines bisschen mit (--parallax), weniger als die Kacheln, das gibt Tiefe. */ .kreis-ring{ position:absolute; inset:0; pointer-events:none; scale:calc(1 - var(--sog) * .6); opacity:calc(1 - var(--sog)); translate:calc(var(--zeiger-x, 0) * var(--parallax) * -.3) calc(var(--zeiger-y, 0) * var(--parallax) * -.3); } .bahn{ position:absolute; left:50%; top:50%; translate:-50% -50%; width:var(--d); aspect-ratio:1; border-radius:50%; border:1px solid var(--bahn-linie); } .bahn-rand{ --d:100%; background:radial-gradient(circle, color-mix(in srgb, var(--canvas) 80%, transparent) 0 30%, color-mix(in srgb, var(--canvas) 0%, transparent) 71%); } .bahn-aussen{ --d:var(--bahn-aussen, 76%) } .bahn-innen { --d:var(--bahn-innen, 41%); border-color:color-mix(in srgb, var(--ink) 6%, transparent) } /* Der Lichtbogen: ein Stück Rand, das hell ausläuft, vorne ein leuchtender Punkt. Er dreht sich (effekte.css, EFFEKT 6 a). */ .bahn-lauf{ position:absolute; inset:0; border-radius:50% } .bahn-bogen{ position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 0deg, transparent 0 70%, color-mix(in srgb, var(--bahn-bogen) 55%, transparent) 97%, var(--bahn-bogen) 100%); -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1.5px)); mask:radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1.5px)); } .bahn-punkt{ position:absolute; left:50%; top:.75px; width:6px; height:6px; translate:-50% -50%; border-radius:50%; background:var(--papier); box-shadow:0 0 0 1.5px var(--bahn-bogen), 0 0 14px 3px color-mix(in srgb, var(--bahn-bogen) 55%, transparent); } /* Die Fäden: von jeder Kachel eine Linie zur Mitte (kreis.js legt sie an). --faden geht beim Scrollen von 0 auf 1: die Linien wachsen von außen nach innen, dann fließt Licht darin zur Mitte. Sobald der Sog beginnt, blenden sie schnell aus. */ .kreis-faeden{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; opacity:calc(var(--faden) * (1 - min(1, var(--sog) * 2.5))); -webkit-mask-image:radial-gradient(circle, #000 0 25%, rgba(0,0,0,.5) 75%); mask-image:radial-gradient(circle, #000 0 25%, rgba(0,0,0,.5) 75%); filter:drop-shadow(0 0 3px color-mix(in srgb, var(--faden-farbe) 45%, transparent)); } /* Maße in den Fäden sind in Hundertsteln der Kreisbreite (viewBox 0 bis 100): .18 ist bei einem 600px-Kreis gut 1px. */ .kreis-faeden line{ fill:none; stroke-linecap:round } .faden{ stroke:var(--faden-farbe); stroke-width:.18; opacity:.4; stroke-dasharray:100; stroke-dashoffset:calc((1 - var(--faden)) * 100); } /* Das Licht im Faden: ein runder Punkt, der zur Mitte wandert */ .faden-licht{ stroke:var(--faden-farbe); stroke-width:.75; stroke-dasharray:.01 99.99; stroke-dashoffset:100; opacity:clamp(0, var(--faden) * 3 - 2, 1); /* erst, wenn die Linien fast ganz da sind */ } /* Der Kern in der Mitte: taucht mit den Fäden auf, wächst beim Sog und strahlt, bevor RealUp herausspringt. */ .kreis-kern{ position:absolute; left:50%; top:50%; width:8%; aspect-ratio:1; translate:-50% -50%; border-radius:50%; pointer-events:none; background:radial-gradient(circle, var(--papier) 0 24%, color-mix(in srgb, var(--marke-2) 70%, var(--papier)) 36%, color-mix(in srgb, var(--marke-3) 35%, transparent) 58%, transparent 72%); scale:calc(var(--faden) * (1 + var(--sog) * 2.2)); opacity:var(--faden); } .kreis-kern::after{ content:""; position:absolute; inset:-70%; border-radius:50%; border:1px solid color-mix(in srgb, var(--faden-farbe) 50%, transparent); opacity:0; } /* Ein weiches Licht in der Mitte, das beim Sog aufgeht. */ .kreis-glanz{ position:absolute; inset:18%; border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--marke-2) 30%, transparent), color-mix(in srgb, var(--marke-3) 16%, transparent) 45%, transparent 70%); filter:blur(24px); opacity:var(--sog); scale:calc(.6 + var(--sog) * .6); pointer-events:none; } .kreis-kacheln{ list-style:none; margin:0; padding:0; position:absolute; inset:0 } /* Ein Platz = eine Kachel. Die Lage rechnet das CSS aus Winkel und Abstand (kommen aus kreis.js). Beim Sog wird der Abstand kleiner und der Winkel dreht mit, so werden die Kacheln wie in einem Strudel in die Mitte gezogen. Dabei schrumpfen sie und blenden aus. */ .kreis-platz{ --weg:calc(1 - var(--sog)); position:absolute; width:var(--kachel-groesse); aspect-ratio:1; left:calc(50% + var(--weite) * var(--weg) * cos(var(--winkel) + var(--sog) * var(--kreis-wirbel)) * 1%); top: calc(50% + var(--weite) * var(--weg) * sin(var(--winkel) + var(--sog) * var(--kreis-wirbel)) * 1%); /* Mit der Maus: vordere Kacheln wandern weiter als hintere (--tiefe) */ translate:calc(-50% + var(--zeiger-x, 0) * var(--tiefe, 1) * var(--weg) * var(--parallax)) calc(-50% + var(--zeiger-y, 0) * var(--tiefe, 1) * var(--weg) * var(--parallax)); /* Innen etwas kleiner (--tiefe aus kreis.js): wirkt weiter weg */ scale:calc((1 - var(--sog) * .7) * var(--tiefe, 1)); opacity:clamp(0, var(--weg) * 2, 1); container-type:inline-size; /* damit alles in der Kachel mitwächst (cqw, siehe unten) */ } .kreis-abschnitt:not(.lebt) .kreis-platz{ display:none } /* ---------- die Kacheln ---------- Jede sieht aus wie ein App-Symbol am Handy: runde Ecken, ein Verlauf, oben eine feine Lichtkante, ein hauchdünner heller Innenrand und ein Schatten aus drei Lagen (nah, weich, farbig). Seit 27.09.2026 ohne den breiten Glanzstreifen und ohne den dunklen Rand unten, das wirkte wie ein Knopf von früher. Alle Maße darin sind in cqw = Prozent der Kachelbreite. Dadurch sieht sie am Handy genauso aus wie am großen Bildschirm. */ .kachel{ width:100%; height:100%; border-radius:var(--kachel-rund); background:linear-gradient(165deg, var(--ka) 8%, var(--kb) 92%); box-shadow: inset 0 0 0 .8cqw rgba(255,255,255,.14), inset 0 1.2cqw 0 rgba(255,255,255,.32), 0 1px 2px rgba(16,24,40,.10), 0 5cqw 10cqw -3cqw rgba(16,24,40,.16), 0 16cqw 26cqw -10cqw color-mix(in srgb, var(--kb) 60%, transparent); padding:17cqw; display:flex; flex-direction:column; justify-content:center; gap:7cqw; position:relative; overflow:hidden; } .kachel::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:radial-gradient(130% 75% at 25% -5%, rgba(255,255,255,.30), rgba(255,255,255,0) 62%); } .k-suche { --ka:var(--k-suche-a); --kb:var(--k-suche-b) } .k-video { --ka:var(--k-video-a); --kb:var(--k-video-b) } .k-notiz { --ka:var(--k-notiz-a); --kb:var(--k-notiz-b) } .k-chat { --ka:var(--k-chat-a); --kb:var(--k-chat-b) } .k-diagramm{ --ka:var(--k-diagramm-a); --kb:var(--k-diagramm-b) } .k-artikel { --ka:var(--k-artikel-a); --kb:var(--k-artikel-b) } .k-liste { --ka:var(--k-liste-a); --kb:var(--k-liste-b) } .k-pdf { --ka:var(--k-pdf-a); --kb:var(--k-pdf-b) } .k-merk { --ka:var(--k-merk-a); --kb:var(--k-merk-b) } .k-podcast { --ka:var(--k-podcast-a); --kb:var(--k-podcast-b) } .k-zitat { --ka:var(--k-zitat-a); --kb:var(--k-zitat-b) } .k-ordner { --ka:var(--k-ordner-a); --kb:var(--k-ordner-b) } .k-mail { --ka:var(--k-mail-a); --kb:var(--k-mail-b) } .k-foto { --ka:var(--k-foto-a); --kb:var(--k-foto-b) } .k-sprache { --ka:var(--k-sprache-a); --kb:var(--k-sprache-b) } .k-tabelle { --ka:var(--k-tabelle-a); --kb:var(--k-tabelle-b) } /* Kachel mit echtem App-Icon (kreis.js, ICONS): das Bild füllt die ganze Kachel, die Ecken rundet die Kachel selbst ab. Kein eigener Verlauf, kein Glanz, ein neutraler Schatten. */ .kachel.mit-icon{ padding:0; background:var(--k-papier); box-shadow:0 7cqw 16cqw -6cqw rgba(8,12,24,.45); } .kachel.mit-icon::after{ display:none } .kachel.mit-icon img{ width:100%; height:100%; object-fit:cover; display:block } /* Weiße Zeilen, wie Text auf der Kachel */ .zeile-w{ display:block; height:7cqw; border-radius:9cqw; background:color-mix(in srgb, var(--k-papier) 80%, transparent) } .zeile-w.kurz{ width:62% } /* Suche: ein Suchfeld mit Lupe, darunter Ergebnisse */ .such-feld{ height:24cqw; flex:none; background:var(--k-papier); border-radius:99px; display:flex; align-items:center; gap:5cqw; padding-left:7cqw; margin-bottom:2cqw } .lupe{ width:11cqw; height:11cqw; flex:none; border:2.4cqw solid var(--k-suche-b); border-radius:50% } .strich{ height:5cqw; width:32cqw; border-radius:9cqw; background:color-mix(in srgb, var(--k-suche-a) 30%, var(--k-papier)) } /* Video: ein Abspielknopf */ .abspielen{ border-radius:50%; background:var(--k-papier); display:grid; place-items:center; flex:none } .abspielen::before{ content:""; border-left-style:solid; border-block-style:solid; border-block-color:transparent } .k-video .abspielen{ width:50cqw; height:50cqw; margin:auto } .k-video .abspielen::before{ margin-left:4cqw; border-left-width:15cqw; border-left-color:var(--k-video-b); border-block-width:9.5cqw } /* Notiz: ein schief liegender Zettel mit Linien */ .notizblatt{ height:100%; background:color-mix(in srgb, var(--k-notiz-a) 12%, var(--k-papier)); border-radius:9cqw; padding:12cqw 10cqw; display:flex; flex-direction:column; justify-content:space-between; rotate:-5deg } .notizblatt i{ display:block; height:1.8cqw; background:color-mix(in srgb, var(--k-notiz-b) 40%, var(--k-papier)) } .notizblatt i:first-child{ height:4.5cqw; width:60%; border-radius:4cqw; background:var(--k-notiz-b) } /* Chat: zwei Sprechblasen */ .blase{ padding:6cqw 9cqw; border-radius:13cqw; display:grid; gap:3.5cqw } .blase i{ display:block; height:4.5cqw; border-radius:9cqw; background:currentColor } .blase i.kurz{ width:60% } .blase.links { width:80%; color:color-mix(in srgb, var(--k-mail-b) 45%, var(--k-papier)); background:color-mix(in srgb, var(--k-mail-a) 55%, var(--k-papier)); border-bottom-left-radius:3cqw } .blase.links i{ background:color-mix(in srgb, var(--k-mail-b) 70%, var(--k-papier)) } .blase.rechts{ width:62%; align-self:flex-end; background:var(--k-gruen); border-bottom-right-radius:3cqw } .blase.rechts i{ background:color-mix(in srgb, var(--k-papier) 75%, transparent) } /* Diagramm: vier Balken */ .balken{ height:74%; display:flex; align-items:flex-end; gap:7cqw; padding:8cqw; background:var(--k-papier); border-radius:11cqw } .balken b{ flex:1; border-radius:3cqw 3cqw 1.5cqw 1.5cqw; background:var(--k-diagramm-b) } /* Artikel: ein Blatt mit Bild und Überschrift */ .artikelblatt{ background:var(--k-papier); border-radius:10cqw; padding:9cqw; display:flex; flex-direction:column; gap:5cqw } .artikelblatt .bildchen{ height:22cqw; border-radius:5cqw; background:color-mix(in srgb, var(--k-artikel-a) 45%, var(--k-papier)) } .artikelblatt i{ display:block; height:4.5cqw; border-radius:9cqw; background:color-mix(in srgb, var(--k-mail-b) 30%, var(--k-papier)) } .artikelblatt i.titel{ height:6cqw; width:85%; background:var(--k-artikel-b) } .artikelblatt i.kurz{ width:60% } /* Liste: drei Häkchen */ .haken{ display:flex; align-items:center; gap:8cqw } .haken span{ width:20cqw; height:20cqw; flex:none; border-radius:6cqw; background:var(--k-papier); position:relative } .haken span::after{ content:""; position:absolute; left:32%; top:18%; width:28%; height:48%; border:solid var(--k-liste-b); border-width:0 2.8cqw 2.8cqw 0; rotate:45deg } .haken.leer span{ background:color-mix(in srgb, var(--k-papier) 35%, transparent) } .haken.leer span::after{ display:none } .haken i{ flex:1; height:6cqw; border-radius:9cqw; background:color-mix(in srgb, var(--k-papier) 80%, transparent) } /* PDF: eine Seite mit Eselsohr */ .seite{ height:100%; width:80%; margin:0 auto; background:var(--k-papier); border-radius:6cqw; padding:12cqw 10cqw; display:flex; flex-direction:column; gap:5cqw; clip-path:polygon(0 0, 72% 0, 100% 22%, 100% 100%, 0 100%) } .seite b{ font-family:var(--schrift-marke); font-weight:900; font-size:15cqw; line-height:1; color:var(--k-pdf-b); letter-spacing:-.02em; margin-bottom:2cqw } .seite i{ display:block; height:4cqw; border-radius:9cqw; background:color-mix(in srgb, var(--k-mail-b) 30%, var(--k-papier)) } .seite i.kurz{ width:60% } /* Lesezeichen: ein Band */ .fahne{ display:block; width:42cqw; height:62cqw; margin:auto; background:var(--k-papier); border-radius:5cqw 5cqw 0 0; clip-path:polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%) } /* Podcast: eine Tonwelle */ .welle{ height:70%; display:flex; align-items:center; justify-content:center; gap:5cqw } .welle b{ width:7cqw; border-radius:9cqw; background:var(--k-papier) } /* Zitat: große Anführungszeichen */ .anfuehrung{ font-family:var(--schrift-marke); font-weight:900; font-size:62cqw; line-height:.5; color:var(--k-papier); height:28cqw; margin-top:8cqw } /* Ordner: Reiter und Mappe */ .mappe{ width:100%; height:72%; display:flex; flex-direction:column } .mappe .reiter{ width:44%; height:14cqw; background:var(--k-papier); border-radius:6cqw 6cqw 0 0; opacity:.85 } .mappe .koerper{ flex:1; background:var(--k-papier); border-radius:0 8cqw 8cqw 8cqw } /* Mail und Foto: kleine Zeichnungen */ .umschlag, .landschaft{ width:100%; height:auto; overflow:visible } .umschlag rect{ fill:var(--k-papier) } .umschlag path{ fill:none; stroke:var(--k-mail-b); stroke-width:2.8; stroke-linecap:round; stroke-linejoin:round } .landschaft rect{ fill:var(--k-papier) } .landschaft circle{ fill:var(--k-notiz-b) } .landschaft path{ fill:var(--k-foto-b) } /* Übersetzen: A und 文 */ .k-sprache{ justify-content:center; align-items:center; flex-direction:row; gap:3cqw } .zeichen-a, .zeichen-b{ font-weight:700; line-height:1; color:var(--k-papier) } .zeichen-a{ font-family:var(--schrift-marke); font-size:40cqw; margin-top:-10cqw } .zeichen-b{ font-family:system-ui, sans-serif; font-size:32cqw; margin-top:14cqw; opacity:.7 } /* Tabelle: ein Gitter, oben die Kopfzeile */ .gitter{ display:grid; grid-template-columns:repeat(3,1fr); gap:3.5cqw } .gitter i{ display:block; height:13cqw; border-radius:3cqw; background:color-mix(in srgb, var(--k-papier) 88%, transparent) } .gitter i:nth-child(-n+3){ background:color-mix(in srgb, var(--k-papier) 45%, transparent) } /* ---------- was am Ende herauskommt: RealUp ---------- Das Symbol wie auf dem Handy: schwarze Kachel (seit 27.09.2026, vorher dunkelblau mit violettem Rand), darin das bunte Logo. Darunter der Name. Farbe der Kachel: --app-kachel. */ .app-mitte{ position:absolute; left:50%; top:50%; translate:-50% -50%; pointer-events:none; } .app-symbol{ width:calc(var(--kreis-groesse) * .3); aspect-ratio:1; border-radius:24%; --app-kachel: var(--ink); /* schwarz wie der Profilkreis oben rechts */ background:var(--app-kachel); box-shadow:0 28px 60px -22px rgba(15,23,27,.55); /* weicher, neutraler Schatten, kein farbiger Schein */ display:grid; place-items:center; position:relative; } .app-symbol img{ width:54%; height:auto; display:block } .app-name{ position:absolute; left:50%; top:calc(100% + var(--kreis-groesse) * .035); translate:-50% 0; font-family:var(--schrift-marke); font-weight:700; font-size:calc(var(--kreis-groesse) * .07); letter-spacing:-.02em; line-height:1; color:var(--ink); margin:0; white-space:nowrap; } /* Die Bahn um RealUp am Ende (seit 27.09.2026). Größe: width */ .app-bahn{ position:absolute; left:50%; top:50%; width:64%; aspect-ratio:1; translate:-50% -50%; border-radius:50%; border:1px solid var(--bahn-linie); pointer-events:none; } .app-bahn .bahn-lauf{ inset:-1px } .kreis-hinab{ position:absolute; left:50%; bottom:22px; translate:-50% 0; margin:0 } @media (max-width:900px){ .kreis-abschnitt{ --kreis-groesse:var(--kreis-groesse-handy) } .kreis-buehne{ padding-top:calc(var(--kopf-hoehe) + 10px); padding-bottom:24px } .kreis-raster{ grid-template-columns:1fr; justify-items:center; text-align:center; gap:18px } .kreis-gross{ font-size:clamp(34px,9vw,52px); max-width:13ch; margin:0 auto 12px } .kreis-klein{ font-size:16px; margin-inline:auto } .kreis-text .kicker{ margin-bottom:10px } .kreis-text .tasten{ justify-content:center; margin-top:18px } } /* ============================================================ 2b. Die Karten der fünf Werkzeuge (neu seit 27.09.2026) Jede Karte: oben eine kleine Beschriftung, unten ein Blatt aus HTML und CSS. Das Blatt läuft über die Unterkante hinaus, wie bei fluz.app. Farben: --fach-… ganz oben. Bei drei Karten schwebt direkt über dem Blatt noch etwas (.fach-schwebe): Auswahlmenü, Einladecode, Vorschläge. Was sich darin bewegt: effekte.css, EFFEKT 7. ============================================================ */ .fach{ background:var(--grund); color:var(--text); border-radius:var(--fach-rund); padding:var(--fach-luft) var(--fach-luft) 0; display:flex; flex-direction:column; gap:clamp(18px,2.4vw,28px); overflow:hidden; position:relative; isolation:isolate; } .fach-summe { --grund:var(--fach-summe-grund); --text:var(--fach-summe-text); --leise:var(--fach-summe-leise) } .fach-quelle{ --grund:var(--fach-quelle-grund); --text:var(--fach-quelle-text); --leise:var(--fach-quelle-leise) } .fach-check { --grund:var(--fach-check-grund); --text:var(--fach-check-text); --leise:var(--fach-check-leise) } .fach-board { --grund:var(--fach-board-grund); --text:var(--fach-board-text); --leise:var(--fach-board-leise) } .fach-chat { --grund:var(--fach-chat-grund); --text:var(--fach-chat-text); --leise:var(--fach-chat-leise) } .fach .fach-label{ display:inline-flex; align-items:center; gap:10px; font-family:var(--schrift-etikett); font-weight:var(--fett-etikett); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--text); margin:0; } /* „Soon“ neben dem KI-Chat, und die leise Zahl neben den anderen */ .bald, .fach-zahl{ font-size:10px; letter-spacing:.1em; padding:4px 10px; border-radius:var(--rund-pille); background:color-mix(in srgb, var(--text) 18%, transparent); } .fach-zahl{ background:none; color:var(--leise); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--text) 28%, transparent) } /* Das Blatt unten im Kasten: eine helle Fläche, oben rund, unten vom Kasten abgeschnitten. Es füllt den Platz bis unten, damit über ihm kein leerer Streifen bleibt. */ .fach-bild{ flex:1 0 auto; background:var(--papier); color:var(--ink); border-radius:24px 24px 0 0; padding:clamp(18px,2vw,26px) clamp(18px,2vw,26px) clamp(22px,2.4vw,30px); position:relative; } .fach .fach-bild p{ max-width:none } /* Was direkt über dem Blatt schwebt */ .fach-schwebe{ align-self:center; display:flex; flex-wrap:wrap; justify-content:center; gap:8px } /* Kleine Überschrift im Blatt, rechts daneben leise der Name */ .fach .blatt-marke{ display:flex; justify-content:space-between; gap:12px; margin:0; font-family:var(--schrift-etikett); font-weight:var(--fett-etikett); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); } .blatt-marke span{ letter-spacing:.04em; text-transform:none; color:var(--ink-2) } /* Eine Fundstelle als Schildchen: Punkt in der Farbe der Quellenart */ .beleg-chip{ display:inline-flex; align-items:center; gap:6px; margin:0 6px 6px 0; font-family:var(--schrift-etikett); font-weight:var(--fett-etikett); font-size:11px; color:var(--ink-2); white-space:nowrap; background:var(--papier); border:1px solid var(--linie); border-radius:var(--rund-pille); padding:3px 10px 3px 8px; } .beleg-chip::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--punkt, var(--marke-verlauf)) } .bc-video{ --punkt:var(--k-video-b) } .bc-pdf { --punkt:var(--k-pdf-b) } .bc-foto { --punkt:var(--k-foto-b) } .bc-kurz { --punkt:var(--k-diagramm-b) } /* Markierter Text, wie in der App: Fläche hinter der Schrift. Als Bild statt Farbe, damit sie sich von links füllen kann (EFFEKT 7). */ .summe-text mark, .spur-satz mark{ --hl:color-mix(in srgb, var(--marke-2) 20%, transparent); color:var(--ink); border-radius:5px; padding:1px 3px; background:linear-gradient(var(--hl), var(--hl)) no-repeat 0 0 / 100% 100%; -webkit-box-decoration-break:clone; box-decoration-break:clone; } /* --- 0 Zusammenfassung: drei Quellen, drei Fäden, ein Blatt --- */ .fach-summe{ gap:0 } .fach-summe .fach-label{ margin-bottom:clamp(16px,2.4vh,24px) } .summe-oben{ flex:1; min-height:0; display:flex; flex-direction:column } .summe-quellen{ display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; justify-items:center } .summe-quelle{ display:inline-flex; align-items:center; gap:10px; background:color-mix(in srgb, var(--weiss) 14%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--weiss) 28%, transparent); border-radius:16px; padding:7px 12px 7px 7px; font-family:var(--schrift-titel); font-weight:600; font-size:14.5px; line-height:1.1; color:var(--text); white-space:nowrap; } .summe-quelle small{ display:block; margin-top:3px; font-family:var(--schrift-etikett); font-weight:var(--fett-etikett); font-size:10px; letter-spacing:.06em; color:var(--leise); } .summe-quelle b{ width:32px; height:32px; flex:none; border-radius:10px; background:var(--k-papier); display:grid; place-items:center } .summe-quelle svg{ width:20px; height:20px; fill:var(--sq) } .summe-quelle svg .weiss{ fill:var(--k-papier) } .sq-video{ --sq:var(--k-video-b) } .sq-kurz { --sq:var(--k-diagramm-b) } .sq-foto { --sq:var(--k-foto-b) } .sq-pdf { --sq:var(--k-pdf-b) } /* Die Fäden: dehnen sich auf jede Höhe, bleiben aber gleich dünn */ .summe-faeden{ flex:1; display:block; width:100%; min-height:22px; overflow:visible } .summe-faeden path{ fill:none; stroke:color-mix(in srgb, var(--weiss) 70%, transparent); stroke-width:1.6; stroke-linecap:round; vector-effect:non-scaling-stroke; } /* Wo die Fäden ins Blatt laufen, sitzt ein kleiner Knoten */ .summe-blatt::before{ content:""; position:absolute; top:-5px; left:50%; translate:-50% 0; width:10px; height:10px; border-radius:50%; background:var(--weiss); box-shadow:0 0 0 4px color-mix(in srgb, var(--weiss) 30%, transparent); } .summe-blatt{ flex:0 0 auto; display:grid; gap:12px } .fach .summe-text{ margin:0; font-size:clamp(14.5px,1.12vw,16.5px); line-height:1.62; color:var(--ink-2) } .summe-beleg{ position:relative; justify-self:start; background:var(--canvas); border:1px solid var(--linie); border-radius:14px; padding:10px 12px 4px; box-shadow:0 14px 26px -18px color-mix(in srgb, var(--nacht) 60%, transparent); } .fach .summe-beleg p{ margin:0 0 8px; font-family:var(--schrift-etikett); font-weight:var(--fett-etikett); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); } /* --- 1 Quellen: vier Schritte untereinander, durch eine Linie verbunden --- */ /* Die vier Schritte verteilen sich über die ganze Höhe des Blatts */ .spur{ display:flex; flex-direction:column } .spur-schritte{ list-style:none; margin:0; padding:0; display:grid; flex:1; grid-auto-rows:1fr } .spur-schritte li{ display:grid; grid-template-columns:26px minmax(0,1fr); gap:14px; position:relative; padding-bottom:12px } .spur-schritte li:last-child{ padding-bottom:0 } .spur-schritte li:not(:last-child)::before{ content:""; position:absolute; left:12.25px; top:30px; bottom:4px; width:1.5px; background:var(--linie-2); transform-origin:top; } .spur-nr{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-family:var(--schrift-etikett); font-weight:var(--fett-etikett); font-size:11px; background:var(--nacht); color:var(--weiss); } .spur-schritte li:last-child .spur-nr{ background:var(--marke-verlauf) } .fach .spur-kopf{ margin:0 0 4px; line-height:26px; font-family:var(--schrift-etikett); font-weight:var(--fett-etikett); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); } .fach .spur-satz{ margin:0; font-size:clamp(14.5px,1.12vw,16px); line-height:1.45 } .fach .spur-zeile{ margin:0; display:flex; align-items:center; gap:10px; font-size:14px; color:var(--ink) } .spur-titel{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .mini-video{ width:40px; height:25px; flex:none; border-radius:7px; position:relative; background:linear-gradient(135deg, var(--nacht-2), var(--marke-2)); } .mini-video::after{ content:""; position:absolute; left:50%; top:50%; translate:-35% -50%; border-left:7px solid var(--weiss); border-block:4.5px solid transparent; } .spur-zeile time, .spur-transkript time{ font-family:var(--schrift-etikett); font-weight:var(--fett-etikett); font-size:11.5px; flex:none; } .spur-zeile time{ background:var(--nacht); color:var(--weiss); padding:3px 8px; border-radius:7px } .fach .spur-transkript{ margin:0; display:flex; align-items:baseline; gap:10px; font-size:14px; line-height:1.4; color:var(--ink); background:color-mix(in srgb, var(--marke-1) 24%, transparent); border-radius:9px; padding:6px 10px; } .spur-transkript time{ color:var(--ink-2) } .spur-transkript span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .fach .spur-ende{ margin:0; display:flex; align-items:center; gap:12px; flex-wrap:wrap } .spur-knopf{ position:relative; display:inline-flex; align-items:center; gap:9px; background:var(--nacht); color:var(--weiss); border-radius:var(--rund-pille); padding:5px 16px 5px 5px; font-family:var(--schrift-titel); font-weight:600; font-size:14px; } .spur-play{ width:24px; height:24px; border-radius:50%; background:var(--weiss); position:relative; flex:none } .spur-play::after{ content:""; position:absolute; left:50%; top:50%; translate:-35% -50%; border-left:7px solid var(--nacht); border-block:4.5px solid transparent; } .spur-notiz{ font-family:var(--schrift-etikett); font-weight:var(--fett-etikett); font-size:10.5px; letter-spacing:.06em; color:var(--ink-3) } /* --- 2 Faktencheck: Auswahlmenü, fünf Sätze, fünf Farben --- Wie in der App: gefärbt wird die Fläche HINTER dem Text, nie die Schrift selbst. */ .auswahl-menue{ gap:2px; background:var(--papier); border-radius:var(--rund-pille); padding:4px; box-shadow:0 16px 30px -14px rgba(0,0,0,.55); } .auswahl-menue span{ font-size:13.5px; font-weight:500; color:var(--ink-2); padding:7px 14px; border-radius:var(--rund-pille) } .auswahl-menue .jetzt{ background:var(--nacht); color:var(--weiss) } .fach-check .auswahl-menue .jetzt{ background:var(--marke-verlauf) } .pruef-blatt{ display:grid; gap:9px; align-content:start } .pruef-zeile{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:6px 14px } .pruef-satz{ line-height:1.5 } .pruef-zeile mark{ --hl:color-mix(in srgb, var(--farbe) 26%, transparent); background:linear-gradient(var(--hl), var(--hl)) no-repeat 0 0 / 100% 100%; color:var(--ink); padding:3px 7px; border-radius:7px; font-size:clamp(14px,1.1vw,16px); line-height:1.5; -webkit-box-decoration-break:clone; box-decoration-break:clone; } .pruef-zeile em{ display:inline-flex; align-items:center; gap:7px; margin-top:3px; font-style:normal; font-family:var(--schrift-etikett); font-weight:var(--fett-etikett); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--textfarbe); background:color-mix(in srgb, var(--farbe) 12%, transparent); border-radius:var(--rund-pille); padding:4px 10px; } .pruef-zeile em::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--farbe) } .fach .pruef-grund{ grid-column:1 / -1; margin:0 0 2px 7px; padding-left:10px; border-left:2px solid var(--farbe); font-size:13px; line-height:1.45; color:var(--ink-2); } .v-belegt { --farbe:var(--s-belegt); --textfarbe:var(--u-belegt) } .v-verkuerzt{ --farbe:var(--s-verkuerzt); --textfarbe:var(--u-verkuerzt) } .v-studien { --farbe:var(--s-studien); --textfarbe:var(--u-studien) } .v-falsch { --farbe:var(--s-falsch); --textfarbe:var(--u-falsch) } .v-meinung { --farbe:var(--s-meinung); --textfarbe:var(--u-meinung) } /* --- 3 Boards: Einladecode, drei geteilte Boards, drei Rollen --- */ .einlade-chip{ align-items:center; gap:10px; flex-wrap:nowrap; background:color-mix(in srgb, var(--weiss) 14%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--weiss) 28%, transparent); border-radius:var(--rund-pille); padding:5px 16px 5px 16px; font-size:13.5px; color:var(--text); } .einlade-chip span, .einlade-chip code{ white-space:nowrap } .einlade-chip code{ font-family:var(--schrift-etikett); font-weight:700; font-size:13px; letter-spacing:.14em; background:var(--weiss); color:var(--nacht); padding:5px 12px; border-radius:var(--rund-pille); } .einlade-chip .oder{ color:var(--leise) } .gruppen{ display:grid; gap:12px } .gruppen-liste{ list-style:none; margin:0; padding:0; display:grid; gap:8px } .gruppen-liste li{ display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:12px; background:var(--canvas); border:1px solid var(--linie); border-radius:16px; padding:9px 12px 9px 9px; } .g-symbol{ width:36px; height:36px; border-radius:11px; background:linear-gradient(135deg, var(--ga), var(--gb)) } .g-1{ --ga:var(--k-liste-a); --gb:var(--k-liste-b) } .g-2{ --ga:var(--k-diagramm-a); --gb:var(--k-diagramm-b) } .g-3{ --ga:var(--k-notiz-a); --gb:var(--k-merk-b) } .g-name{ display:grid; gap:2px; min-width:0 } .g-name b, .g-name small{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis } .g-name b{ font-family:var(--schrift-titel); font-weight:600; font-size:14.5px; color:var(--ink) } .g-name small{ font-size:12px; color:var(--ink-3) } .g-leute{ display:flex; padding-left:6px } .g-leute i{ min-width:28px; height:28px; padding:0 5px; border-radius:var(--rund-pille); margin-left:-6px; display:grid; place-items:center; font-style:normal; font-family:var(--schrift-marke); font-weight:700; font-size:11px; color:var(--weiss); background:var(--p); box-shadow:0 0 0 2px var(--canvas); } .g-leute .p1{ --p:var(--k-video-b) } .g-leute .p2{ --p:var(--k-liste-b) } .g-leute .p3{ --p:var(--nacht) } .g-leute .p4{ --p:var(--k-merk-b) } .g-leute .p5{ --p:var(--marke-2) } .g-rolle{ font-style:normal; font-family:var(--schrift-etikett); font-weight:var(--fett-etikett); font-size:10px; letter-spacing:.08em; text-transform:uppercase; padding:4px 9px; border-radius:var(--rund-pille); min-width:62px; text-align:center; } .r-eigen{ background:var(--nacht); color:var(--weiss) } .r-mit { background:color-mix(in srgb, var(--marke-2) 14%, transparent); color:var(--marke-2) } .r-lesen{ background:var(--canvas-2); color:var(--ink-2) } /* --- 4 KI-Chat: Vorschläge, Frage, Antwort mit Belegen, Eingabefeld --- */ .chat-vorschlaege span{ font-size:13px; font-weight:500; color:var(--text); background:color-mix(in srgb, var(--weiss) 60%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--text) 12%, transparent); border-radius:var(--rund-pille); padding:7px 14px; } .chat-verlauf{ display:flex; flex-direction:column; gap:12px } .fach .chat-frage{ align-self:flex-end; max-width:82%; margin:0; background:var(--nacht); color:var(--weiss); padding:10px 16px; border-radius:18px 18px 5px 18px; font-size:15px; line-height:1.45; } /* Antwort und „tippt …“ liegen übereinander, damit nichts springt */ .chat-stapel{ display:grid; justify-items:start } .chat-stapel > *{ grid-area:1 / 1; align-self:start } .chat-antwort{ max-width:92%; background:var(--canvas); border:1px solid var(--linie); border-radius:18px 18px 18px 5px; padding:12px 14px 6px } .fach .chat-antwort p{ color:var(--ink); font-size:14.5px; line-height:1.5; margin:0 0 10px } .chat-tippt{ display:flex; gap:5px; align-items:center; opacity:0; background:var(--canvas); border:1px solid var(--linie); border-radius:18px 18px 18px 5px; padding:13px 15px; } .chat-tippt i{ width:7px; height:7px; border-radius:50%; background:var(--ink-3) } .chat-feld{ display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid var(--linie-2); border-radius:var(--rund-pille); padding:6px 6px 6px 18px; color:var(--ink-3); font-size:14.5px; } .chat-feld b{ width:32px; height:32px; flex:none; border-radius:50%; background:var(--marke-verlauf); position:relative } .chat-feld b::before{ content:""; position:absolute; left:50%; top:56%; width:8px; height:8px; border:solid var(--weiss); border-width:2.2px 0 0 2.2px; translate:-50% -50%; rotate:45deg; } /* Schmale Handys: Zeichen in den Quellen und die Gesichter weglassen */ @media (max-width:560px){ .summe-quellen{ gap:6px } .summe-quelle{ padding:7px 9px; font-size:12.5px } .summe-quelle b{ display:none } .g-leute, .g-symbol{ display:none } .gruppen-liste li{ grid-template-columns:minmax(0,1fr) auto; padding-left:12px } .spur-notiz{ display:none } .einlade-chip .oder{ display:none } /* Faktencheck: das Urteil unter den Satz statt daneben */ .pruef-zeile{ grid-template-columns:minmax(0,1fr) } .pruef-zeile em{ justify-self:start; margin-top:0 } } /* ============================================================ 3. FAQ Links die Überschrift (bleibt beim Scrollen stehen), rechts die Fragen. Jede Frage ist ein
: der Browser klappt sie selbst auf und zu. Das Plus dreht sich zum Kreuz. ============================================================ */ .faq-raster{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(28px,5vw,80px); align-items:start } .faq-kopf{ position:sticky; top:110px } .faq-kopf h2{ font-size:clamp(36px,5vw,68px); line-height:1.02; letter-spacing:-.025em; max-width:9ch } @media (max-width:900px){ .faq-raster{ grid-template-columns:1fr } .faq-kopf{ position:static } } .faq-liste{ display:grid; gap:10px } .frage{ background:var(--papier); border:1px solid var(--linie); border-radius:22px } .frage[open]{ border-color:var(--linie-2) } .frage summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:20px 20px 20px 24px; font-family:var(--schrift-titel); font-weight:var(--fett-zwischen); font-size:clamp(19px,1.7vw,24px); line-height:1.25; color:var(--ink); } .frage summary::-webkit-details-marker{ display:none } /* Das Plus: zwei Striche aus Verläufen auf einem runden Grund */ .frage summary::after{ --plus:var(--ink); content:""; flex:none; width:36px; height:36px; border-radius:50%; background: linear-gradient(var(--plus), var(--plus)) center / 13px 2px no-repeat, linear-gradient(var(--plus), var(--plus)) center / 2px 13px no-repeat, var(--canvas); } .frage[open] summary::after{ --plus:var(--weiss); background: linear-gradient(var(--plus), var(--plus)) center / 13px 2px no-repeat, linear-gradient(var(--plus), var(--plus)) center / 2px 13px no-repeat, var(--nacht); } .frage summary:focus-visible{ outline-offset:-3px; border-radius:22px } .frage p{ padding:0 24px 24px; margin:0; max-width:62ch; font-size:16.5px } .frage p a{ color:var(--ink); text-underline-offset:3px } /* ============================================================ 4. „More with RealUp“ — große Sätze auf dunklem Grund Eine abgerundete dunkle Fläche, fast so breit wie das Fenster. Die kursiven Wörter bekommen den Markenverlauf. Das Aufleuchten beim Scrollen steht in effekte.css, EFFEKT 9. ============================================================ */ .liste-abschnitt{ margin:0 var(--band-rand); border-radius:var(--band-rund); background:var(--liste-grund); color:var(--weiss); text-align:center; z-index:1; } .liste-abschnitt .kicker{ color:var(--liste-leise) } .gross-liste{ list-style:none; margin:0 0 clamp(36px,5vw,56px); padding:0; display:grid; gap:clamp(2px,.6vw,8px) } .gross-liste li{ font-family:var(--schrift-titel); font-weight:var(--fett-titel); font-size:clamp(26px,5.4vw,78px); line-height:1.1; letter-spacing:-.02em; color:var(--weiss); } .gross-liste em{ font-style:normal; /* Gabarito hat keine Kursive */ background:var(--marke-verlauf); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; padding-right:.08em; } /* Mit "lebt" (effekte.js, EFFEKT 5) wird der Abschnitt hoch (--liste-strecke). Die Sätze kleben in der Mitte des Fensters (sticky), während sie sich beim Scrollen füllen. Ohne "lebt" (kein JavaScript, „weniger Bewegung“) bleibt alles wie oben. */ .liste-abschnitt.lebt{ padding:0; height:var(--liste-strecke) } .lebt .liste-buehne{ position:sticky; top:0; height:100vh; height:100svh; display:flex; align-items:center; padding-top:calc(var(--kopf-hoehe) * .6); } .lebt .liste-buehne .huelle{ width:100% } /* Damit alle sechs Zeilen samt Knopf auch auf niedrigen Bildschirmen ins Fenster passen */ .lebt .gross-liste li{ font-size:clamp(26px, min(5.2vw, 7.6svh), 78px) } /* Der helle Knopf auf dunklem Grund */ .knopf.hell{ background:var(--weiss); color:var(--nacht) } /* ============================================================ 5. Für wen — drei große Boards (seit 27.09.2026) .bretter ist ein Raster mit zwei Spalten. Das erste Board (.brett-alle) geht über beide Spalten und stellt Text und Bild nebeneinander. Die zwei darunter stellen sie übereinander. Am Handy steht alles in einer Spalte. Jedes Board bekommt seine Farben über vier Variablen (--grund, --text, --leise, --akzent), genau wie die vier Werkzeug-Kästen. Die Werte stehen ganz oben (--brett-…). Das Bild unten ist immer ein weißes „Blatt“ (.blatt), oben rund, unten vom Board abgeschnitten. Was sich darin bewegt (Auftritt, Drüberfahren): effekte.css, EFFEKT 11. ============================================================ */ .fuer-wen h2{ max-width:18ch; margin-bottom:clamp(36px,5vw,64px) } .bretter{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--brett-abstand); } .brett{ position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; padding:var(--brett-luft) var(--brett-luft) 0; border-radius:var(--brett-rund); background:var(--grund); color:var(--text); } .brett-alle { --grund:var(--brett-alle-grund); --text:var(--brett-alle-text); --leise:var(--brett-alle-leise); --akzent:var(--brett-alle-akzent) } .brett-schule{ --grund:var(--brett-schule-grund); --text:var(--brett-schule-text); --leise:var(--brett-schule-leise); --akzent:var(--brett-schule-akzent) } .brett-team { --grund:var(--brett-team-grund); --text:var(--brett-team-text); --leise:var(--brett-team-leise); --akzent:var(--brett-team-akzent) } /* Text und Bild liegen über dem Schein der Maus (.brett::after) */ .brett-text, .brett-bild{ position:relative; z-index:1 } /* --- Das breite Board: Text links, Bild rechts --- Links steht das Schildchen oben und der Rest unten. */ .brett-alle{ grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); column-gap:clamp(28px,4.4vw,72px); min-height:var(--brett-breit-hoehe); } .brett-alle .brett-text{ display:flex; flex-direction:column; justify-content:space-between; gap:40px; padding-bottom:var(--brett-luft) } .brett-alle .brett-etikett{ margin-bottom:0 } .brett-alle h3{ font-size:clamp(36px,4.2vw,60px); max-width:12ch } /* --- Der Text --- */ .brett-etikett{ display:inline-flex; align-self:flex-start; align-items:center; gap:9px; font-family:var(--schrift-etikett); font-weight:var(--fett-etikett); font-size:11px; letter-spacing:.14em; text-transform:uppercase; line-height:1; color:var(--text); padding:9px 14px 9px 12px; border-radius:var(--rund-pille); background:color-mix(in srgb, var(--text) 9%, transparent); margin:0 0 clamp(24px,3vw,40px); } /* der kleine Punkt im Schildchen, in der Akzentfarbe */ .brett-etikett::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--akzent) } .brett h3{ font-size:clamp(32px,3.3vw,48px); line-height:1.02; letter-spacing:-.024em; font-weight:var(--fett-titel); color:var(--text); max-width:13ch; margin:0 0 18px; } /* Nur das BILD des Hintergrunds tauschen. Die Kurzform „background“ würde das background-clip:text aus der Regel „h3 em“ zurücksetzen, und dann stünde ein bunter Kasten hinter dem Wort. */ .brett h3 em{ background-image:var(--akzent); padding-right:.06em } .brett-text p:not(.brett-etikett){ color:var(--leise); font-size:clamp(16px,1.2vw,17.5px); line-height:1.55; max-width:40ch; margin:0 0 24px; } /* Die Stichworte: kleine Pillen mit Häkchen */ .brett-punkte{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px } .brett-punkte li{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:var(--fett-etikett); line-height:1; padding:10px 14px 10px 12px; border-radius:var(--rund-pille); color:var(--text); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--text) 24%, transparent); } .brett-punkte li::before{ content:""; width:9px; height:5px; flex:none; border-left:2px solid currentColor; border-bottom:2px solid currentColor; rotate:-45deg; translate:0 -2px; } /* --- Das Bild: ein weißes Blatt, das unten über den Rand läuft --- margin-bottom ist negativ, damit das Blatt beim Hochheben (Drüberfahren) unten keine Lücke aufreißt. */ .brett-bild{ margin-top:auto; padding-top:clamp(28px,3.4vw,44px) } .blatt{ position:relative; background:var(--papier); color:var(--ink); border-radius:24px 24px 0 0; padding:clamp(16px,1.7vw,22px) clamp(16px,1.7vw,22px) calc(clamp(20px,2vw,26px) + 18px); margin-bottom:-18px; box-shadow:var(--brett-schatten); } .blatt p{ margin:0; color:var(--ink) } /* Kopfzeile im Blatt: Symbol, Name des Boards, rechts eine Zahl */ .blatt-titelzeile{ display:flex; align-items:center; gap:10px; margin-bottom:14px } .blatt-titelzeile p{ flex:1; min-width:0; font-size:14.5px; line-height:1.3; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis } .blatt-titelzeile p b{ color:var(--ink); font-weight:var(--fett-zwischen) } .blatt-symbol{ width:30px; height:30px; flex:none; border-radius:9px; background:linear-gradient(135deg, var(--ka), var(--kb)) } .blatt-zahl{ flex:none; font-size:11.5px; font-weight:var(--fett-etikett); line-height:1; color:var(--ink-2); padding:6px 10px; border-radius:var(--rund-pille); background:var(--canvas-2); } .blatt-etikett{ font-family:var(--schrift-etikett); font-weight:var(--fett-etikett); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; line-height:1; color:var(--ink-3) !important; margin:0 0 12px !important; } /* ---------- Bild 1: Clip und Faktencheck ---------- Der Clip hängt schräg über der oberen linken Ecke des Blatts. Darum ist oben so viel Luft, wie der Clip über das Blatt hinausragt, und die Kopfzeile des Blatts steht rechts. */ .bild-alle{ position:relative; align-self:end; padding-top:calc(var(--clip-breite) * 16 / 9 - 58px); margin-top:var(--brett-luft); } .clip{ position:absolute; z-index:2; left:3%; top:0; width:var(--clip-breite); aspect-ratio:9 / 16; border-radius:calc(var(--clip-breite) * .15); background:linear-gradient(165deg, var(--k-video-a), var(--k-video-b) 72%); box-shadow:var(--brett-schatten), inset 0 0 0 1px color-mix(in srgb, var(--weiss) 22%, transparent); rotate:-7deg; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; } /* der runde Abspielknopf in der Mitte */ .clip-play{ position:absolute; left:50%; top:30%; translate:-50% 0; width:28%; aspect-ratio:1; border-radius:50%; background:color-mix(in srgb, var(--weiss) 28%, transparent); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); display:grid; place-items:center; } .clip-play::after{ content:""; width:30%; aspect-ratio:1; margin-left:10%; background:var(--weiss); clip-path:polygon(0 0, 100% 50%, 0 100%); } /* der Untertitel, wie ihn Clips im Feed haben */ .clip .clip-untertitel{ position:absolute; left:8%; right:8%; bottom:25%; font-family:var(--schrift-titel); font-weight:var(--fett-titel); font-size:calc(var(--clip-breite) * .1); line-height:1.15; text-align:center; color:var(--weiss); text-shadow:0 1px 6px color-mix(in srgb, var(--ink) 55%, transparent); } /* unten: Profilkreis mit Name und die Leiste, die mitläuft */ .clip-fuss{ position:absolute; left:9%; right:9%; bottom:7%; display:grid; gap:8px } .clip-kopf{ display:flex; align-items:center; gap:6px } .clip-kopf b{ width:16%; aspect-ratio:1; border-radius:50%; background:var(--weiss) } .clip-kopf i{ height:5px; width:48%; border-radius:3px; background:color-mix(in srgb, var(--weiss) 75%, transparent) } .clip-lauf{ display:block; height:3px; border-radius:2px; background:color-mix(in srgb, var(--weiss) 30%, transparent); overflow:hidden } .clip-lauf b{ display:block; height:100%; width:38%; background:var(--weiss); border-radius:inherit } /* Die Kopfzeile des Faktenchecks steht rechts, links liegt der Clip */ .pruefung .blatt-kopf{ display:flex; align-items:center; justify-content:flex-end; gap:8px; font-size:14px; font-weight:var(--fett-zwischen); line-height:1; min-height:32px; margin:0 0 12px; } .pruefung .blatt-zahl{ margin-left:4px } /* das Zeichen vor „Fact check“: ein kleiner Balken in den fünf Farben */ .pruef-zeichen{ width:22px; height:8px; border-radius:4px; background:var(--verlauf) } /* Eine Zeile im Faktencheck: der Satz, rechts das Urteil. Wie in der App ist die FLÄCHE hinter dem Satz gefärbt, nie die Schrift. Die Farben kommen aus v-belegt, v-falsch … (oben). */ .urteil{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:8px 16px; padding:12px 0; border-top:1px solid var(--linie); } /* Der Satz steht in einer eigenen Hülle, damit die Farbe Zeile für Zeile hinter dem Text liegt und nicht als ein Kasten. */ .urteil-satz{ line-height:1.7 } .urteil mark{ color:var(--ink); font-size:clamp(14px,1.1vw,15.5px); line-height:1.5; padding:2px 7px; border-radius:7px; background-color:transparent; background-image:linear-gradient(color-mix(in srgb, var(--farbe) 26%, transparent), color-mix(in srgb, var(--farbe) 26%, transparent)); background-repeat:no-repeat; background-size:100% 100%; -webkit-box-decoration-break:clone; box-decoration-break:clone; } .urteil em{ display:inline-flex; align-items:center; gap:7px; flex:none; font-style:normal; font-family:var(--schrift-etikett); font-weight:var(--fett-etikett); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; line-height:1; color:var(--textfarbe); background:color-mix(in srgb, var(--farbe) 13%, transparent); border-radius:var(--rund-pille); padding:6px 10px; margin-top:2px; } .urteil em::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--farbe) } /* die Begründung unter „False“ */ .blatt .urteil-grund{ grid-column:1 / -1; font-size:13px; line-height:1.45; color:var(--ink-2); padding-left:11px; border-left:2px solid var(--farbe); } /* ---------- Bild 2: Board mit drei Videos und Zusammenfassung ---------- */ .bild-schule .blatt-symbol{ --ka:var(--k-notiz-a); --kb:var(--k-notiz-b) } .vorschauen{ list-style:none; margin:0 0 18px; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px } .vorschauen li{ position:relative; aspect-ratio:16 / 10; border-radius:12px; overflow:hidden; background:linear-gradient(140deg, var(--ka), var(--kb)); display:grid; place-items:center; } .vs-1{ --ka:var(--k-liste-a); --kb:var(--k-liste-b) } .vs-2{ --ka:var(--k-diagramm-a); --kb:var(--k-diagramm-b) } .vs-3{ --ka:var(--k-artikel-a); --kb:var(--k-artikel-b) } /* das kleine Dreieck in der Mitte jeder Vorschau */ .vorschauen li::after{ content:""; width:18%; aspect-ratio:1; background:var(--weiss); clip-path:polygon(0 0, 100% 50%, 0 100%); opacity:.9; } /* Nummer oben links, Länge unten rechts */ .vorschauen span{ position:absolute; left:7px; top:7px; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:var(--fett-zwischen); line-height:1; background:var(--papier); color:var(--ink); } .vorschauen time{ position:absolute; right:6px; bottom:6px; font-size:10.5px; font-weight:var(--fett-etikett); line-height:1; padding:3px 6px; border-radius:6px; color:var(--weiss); background:color-mix(in srgb, var(--ink) 42%, transparent); } /* Die Zusammenfassung: graue Zeilen, dazwischen ein echter Satz */ .zusammenfassung{ position:relative } .zusammenfassung i{ display:block; height:8px; border-radius:4px; background:var(--canvas-2); margin:0 0 10px } .zusammenfassung i.kurz{ width:72% } .zusammenfassung i.mittel{ width:86% } .blatt .zf-satz{ font-size:clamp(15px,1.2vw,16.5px); line-height:1.5; margin:4px 0 12px } .zf-satz mark{ color:var(--ink); padding:2px 5px; border-radius:6px; background-color:transparent; background-image:linear-gradient(color-mix(in srgb, var(--marke-2) 20%, transparent), color-mix(in srgb, var(--marke-2) 20%, transparent)); background-repeat:no-repeat; background-size:100% 100%; -webkit-box-decoration-break:clone; box-decoration-break:clone; } /* Das dunkle Schildchen: woher der markierte Satz kommt */ .fundstelle{ position:absolute; right:0; top:14px; display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:var(--fett-zwischen); line-height:1; padding:8px 12px 8px 8px; border-radius:var(--rund-pille); background:var(--nacht); color:var(--weiss); box-shadow:var(--brett-schatten); } .fund-play{ width:20px; height:20px; border-radius:50%; flex:none; background:var(--marke-verlauf); display:grid; place-items:center; } .fund-play::after{ content:""; width:7px; height:8px; margin-left:2px; background:var(--weiss); clip-path:polygon(0 0, 100% 50%, 0 100%) } /* ---------- Bild 3: das geteilte Board ---------- */ .bild-team{ position:relative } .bild-team .blatt-symbol{ --ka:var(--k-diagramm-a); --kb:var(--k-diagramm-b) } /* die Leute als kleine Kreise, leicht übereinander */ .p1{ --person:var(--brett-person-1) } .p2{ --person:var(--brett-person-2) } .p3{ --person:var(--brett-person-3) } .leute{ display:flex; flex:none } .leute b, .mitglieder b{ display:grid; place-items:center; flex:none; width:28px; height:28px; border-radius:50%; font-size:12px; font-weight:var(--fett-zwischen); line-height:1; background:var(--person); color:var(--weiss); } .leute b{ box-shadow:0 0 0 2px var(--papier) } .leute b + b{ margin-left:-8px } .mitglieder{ list-style:none; margin:0 0 12px; padding:0; display:grid; gap:6px } .mitglieder li{ display:flex; align-items:center; gap:12px; padding:8px 10px 8px 8px; border-radius:14px; background:var(--canvas); box-shadow:inset 0 0 0 1px var(--linie); } .mitglieder b{ width:32px; height:32px; font-size:13px } .mitglieder span{ flex:1; font-size:15px; font-weight:var(--fett-zwischen); color:var(--ink) } .mitglieder em{ font-style:normal; font-family:var(--schrift-etikett); font-weight:var(--fett-etikett); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; line-height:1; padding:6px 10px; border-radius:var(--rund-pille); } .rolle-eigen{ background:var(--nacht); color:var(--weiss) } .rolle-mit { background:color-mix(in srgb, var(--marke-2) 14%, transparent); color:var(--nacht-2) } .rolle-lesen{ background:var(--canvas-2); color:var(--ink-2) } /* der Einladungscode, gestrichelt umrandet wie ein Gutschein */ .einladecode{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border-radius:14px; border:1.5px dashed var(--linie-2); } .einladecode span{ font-size:12.5px; font-weight:var(--fett-etikett); color:var(--ink-3) } .einladecode code{ font-family:var(--schrift-wucht); font-weight:var(--fett-titel); font-size:17px; letter-spacing:.12em; color:var(--ink); } /* Das Schildchen vom Export: hängt oben rechts über dem Blatt */ .export-schild{ position:absolute; z-index:2; right:clamp(10px,2vw,22px); top:4px; display:inline-flex; align-items:center; gap:10px; font-size:13px; font-weight:var(--fett-zwischen); line-height:1; padding:7px 14px 7px 7px; border-radius:var(--rund-pille); background:var(--papier); color:var(--ink); box-shadow:var(--brett-schatten); } .export-blatt{ display:grid; place-items:center; width:26px; height:32px; border-radius:5px; font-size:8.5px; font-weight:var(--fett-titel); letter-spacing:.04em; background:linear-gradient(160deg, var(--k-pdf-a), var(--k-pdf-b)); color:var(--weiss); } /* ---------- Kleinere Bildschirme ---------- */ @media (max-width:900px){ .bretter{ grid-template-columns:1fr } /* das breite Board stellt Text und Bild jetzt auch übereinander */ .brett-alle{ display:flex; min-height:0 } .brett-alle .brett-text{ padding-bottom:0; gap:0 } .brett-alle .brett-etikett{ margin-bottom:clamp(24px,3vw,40px) } .brett-alle h3{ font-size:clamp(34px,6.4vw,50px) } .bild-alle{ align-self:stretch } } @media (max-width:560px){ .brett h3, .brett-alle h3{ font-size:clamp(30px,8.6vw,40px) } /* am Handy steht das Urteil unter dem Satz */ .urteil{ display:flex; flex-direction:column; align-items:flex-start; gap:8px } .urteil em{ font-size:9.5px; padding:5px 8px; margin-top:0 } .pruefung .blatt-zahl{ display:none } .export-schild{ font-size:12px } } /* ============================================================ 7. Einladung zur Warteliste — eine Karte mit dem Farbband ============================================================ */ .einladung-karte{ border-radius:var(--band-rund); background:var(--band-verlauf); background-size:220% 100%; text-align:center; padding:clamp(56px,8vw,120px) var(--gasse); isolation:isolate; /* sonst verschwindet der Farbring des Knopfs (z-index:-1) hinter dem Farbband */ } .einladung-karte .kicker{ color:var(--ink-2) } .einladung-karte h2{ font-size:clamp(44px,6.6vw,100px); line-height:.98; letter-spacing:-.025em; margin:0 0 20px } .einladung-karte > p:not(.kicker){ color:var(--ink); font-size:clamp(16px,1.3vw,19px); line-height:1.5; max-width:40ch; margin:0 auto 30px } /* ============================================================ 8. Fußzeile der Startseite: großer Satz, Links, dann REALUP Die ganze Fußzeile ist reinweiß. So steht REALUP ganz unten wirklich schwarz auf weiß, ohne Punktraster dahinter. ============================================================ */ footer.fuss-neu{ background:var(--weiss); border-top:1px solid var(--linie); padding:clamp(48px,6vw,84px) 0 0 } .fuss-raster{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px 40px } .fuss-marke p{ max-width:30ch; margin:16px 0 0; font-size:15.5px } /* Der große Satz links, wie bei uneevo */ .fuss-marke .fuss-satz{ font-family:var(--schrift-titel); font-weight:var(--fett-titel); font-size:clamp(28px,2.9vw,42px); line-height:1.1; letter-spacing:-.018em; color:var(--ink); max-width:15ch; margin:22px 0 0; } /* nav hat oben in der Kopfzeile eigene Regeln (Mono, Großbuchstaben). Hier unten sollen die Links groß und rund sein, darum überschreiben. */ nav.fuss-spalte{ flex-direction:column; align-items:flex-start; gap:12px; white-space:normal } .fuss-kopf{ font-family:var(--schrift-etikett); font-weight:var(--fett-etikett); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin:0 0 4px } nav.fuss-spalte a{ font-family:var(--schrift-titel); font-weight:var(--fett-zwischen); font-size:clamp(19px,1.6vw,24px); letter-spacing:-.01em; text-transform:none; color:var(--ink); } nav.fuss-spalte a:hover{ color:var(--marke-2) } .fuss-unten{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-top:clamp(40px,5vw,64px); padding-top:20px; position:relative; } /* Die Linie darüber: nur so breit wie der Inhalt, nicht bis in den Rand */ .fuss-unten::before{ content:""; position:absolute; top:0; left:var(--gasse); right:var(--gasse); border-top:1px solid var(--linie) } .fuss-unten small{ font-family:var(--schrift-etikett); font-weight:var(--fett-etikett); font-size:11.5px; color:var(--ink-3); letter-spacing:.03em } @media (max-width:760px){ .fuss-raster{ grid-template-columns:1fr 1fr } .fuss-marke{ grid-column:1 / -1 } } /* Seit 28.09.2026 gibt es unten nur noch EINE Linkspalte (Legal). Sie bleibt rechts außen, die Mitte bleibt frei. Am Handy steht sie links unter dem Logo. Soll wieder eine zweite Spalte dazu: diese Regeln löschen und die Spalte in allen Seiten einfügen. */ .fuss-raster > nav.fuss-spalte:last-child{ grid-column:-2 / -1 } @media (max-width:760px){ .fuss-raster > nav.fuss-spalte:last-child{ grid-column:1 / -1 } } /* ------------------------------------------------------------ Social Media: runde Knöpfe mit Instagram, TikTok, X und YouTube. Stehen in beiden Fußzeilen (Startseite und Unterseiten). Die Zeichen selbst liegen als ganz unten im footer, hier bekommen sie Größe und Farbe. ------------------------------------------------------------ */ .sozial{ display:flex; gap:10px; margin-top:22px } .fuss .sozial{ margin-top:0 } /* Unterseiten: steht in einer Zeile mit dem Rest */ .sozial .sozial-link{ position:relative; isolation:isolate; /* damit die Farbfläche (::before) hinter dem Zeichen bleibt */ display:grid; place-items:center; width:var(--sozial-groesse); height:var(--sozial-groesse); border-radius:var(--rund-pille); border:1px solid var(--linie-2); color:var(--ink); text-decoration:none; transition:color .25s var(--e-weich), transform .25s var(--e-weich); } .sozial .sozial-link svg{ width:var(--sozial-zeichen); height:var(--sozial-zeichen); fill:currentColor; transition:filter .25s var(--e-weich); } /* Die Farbfläche: liegt unsichtbar im Kreis und wird beim Drüberfahren eingeblendet. Warum nicht einfach „background“ wechseln? Ein Verlauf (Instagram) lässt sich nicht weich überblenden, die Deckkraft schon. inset:-1px, damit auch der graue Rand mit bedeckt wird. */ .sozial .sozial-link::before{ content:""; position:absolute; inset:-1px; z-index:-1; border-radius:inherit; background:var(--sozial-farbe, var(--nacht)); /* ohne eigene Farbe: Dunkelblau wie bisher */ opacity:0; transition:opacity .25s var(--e-weich); } /* Welcher Knopf welche Farbe bekommt, erkennt die Seite an der Adresse. So muss im HTML nichts geändert werden, und es gilt auf allen drei Seiten. */ .sozial .sozial-link[href*="instagram.com"]{ --sozial-farbe:var(--sozial-instagram) } .sozial .sozial-link[href*="tiktok.com"] { --sozial-farbe:var(--sozial-tiktok) } .sozial .sozial-link[href*="//x.com"] { --sozial-farbe:var(--sozial-x) } .sozial .sozial-link[href*="youtube.com"] { --sozial-farbe:var(--sozial-youtube) } /* Maus drauf (oder per Tastatur angewählt): Kreis in der Farbe der Plattform, weißes Zeichen, hebt sich ein kleines Stück */ .sozial .sozial-link:hover, .sozial .sozial-link:focus-visible{ color:var(--weiss); transform:translateY(-2px); } .sozial .sozial-link:hover::before, .sozial .sozial-link:focus-visible::before{ opacity:1 } /* TikTok: dazu der typische Versatz in Türkis und Rot um die Note */ .sozial .sozial-link[href*="tiktok.com"]:hover svg, .sozial .sozial-link[href*="tiktok.com"]:focus-visible svg{ filter:drop-shadow(-1px -1px 0 var(--sozial-tiktok-tuerkis)) drop-shadow( 1px 1px 0 var(--sozial-tiktok-rot)); } /* Unsichtbar, aber vorhanden: für den Zeichen-Vorrat im footer */ .unsichtbar{ position:absolute; width:0; height:0; overflow:hidden } /* ============================================================ Warteliste ============================================================ */ .warteliste button{ position:relative } .warteliste-antwort{ margin-top:16px; font-family:var(--schrift-etikett); font-weight:var(--fett-etikett); font-size:12.5px; color:var(--u-belegt); min-height:1.4em; } .warteliste-antwort.fehlerhaft{ color:var(--u-falsch) } /* ---------- die Tipp-Animation der Warteliste ---------- Vorbild: „animated number" von skiper-ui. Drei Dinge passieren beim Tippen, jedes in einem Satz: 1. Jeder neue Buchstabe kommt klein und blass von unten, federt kurz über die Grundlinie hinaus und setzt sich dann. 2. Beim Löschen fällt der Buchstabe nach unten weg und wird dabei kleiner und durchsichtig. 3. Der Text steht in der Mitte. Weil jeder Buchstabe seine Breite weich aufzieht, rutscht alles sanft zur Seite. Tempo und Federweg: --tipp-… in :root. Wie lange ein Buchstabe braucht: warteliste.js, ganz oben in TIPPEN. */ .warteliste.tipp-karte, .warteliste{ display:flex; flex-direction:column; align-items:center; gap:0; margin-top:24px; padding:clamp(28px,4vw,40px) clamp(18px,3vw,30px) clamp(24px,3vw,32px); background:var(--papier); border:1px solid var(--linie); border-radius:var(--rund-gross); text-align:center; isolation:isolate; /* sonst verschwindet der Farbring des Knopfs (z-index:-1) hinter der Karte */ } /* Die kleine Überschrift über dem Feld. Bis 28.09.2026 hing darunter noch ein dünner senkrechter Strich (.tipp-linie). Kilian wollte ihn weg, jetzt ist dort nur Luft (--tipp-titel-luft). */ .tipp-titel{ font-family:var(--schrift-etikett); font-weight:var(--fett-etikett); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); cursor:text; } .warteliste > .tipp-titel{ margin-bottom:var(--tipp-titel-luft, 18px) } /* Das Feld: Anzeige unten, echtes Eingabefeld unsichtbar oben drauf */ .tipp-feld{ position:relative; width:100%; height:calc(var(--tipp-schrift) * 1.5); /* feste Höhe, auch wenn die Schrift schrumpft */ margin-bottom:22px; --tipp-groesse:var(--tipp-schrift); /* warteliste.js verkleinert das bei langen Adressen */ } .tipp-feld::after{ /* feine Linie unter dem Feld, dunkler, sobald man tippt */ content:""; position:absolute; left:18%; right:18%; bottom:-6px; height:1px; background:var(--linie); transition:background .3s, left .45s var(--e), right .45s var(--e); } .tipp-feld:focus-within::after{ background:var(--ink-3); left:8%; right:8% } .feld-fehler.tipp-feld::after{ background:var(--u-falsch); left:8%; right:8% } .tipp-feld input{ position:absolute; inset:0; width:100%; height:100%; border:0; outline:0; padding:0; margin:0; background:transparent; color:transparent; /* den echten Text sieht man nicht … */ caret-color:transparent; /* … und den echten Strich auch nicht */ font-family:var(--schrift-titel); font-weight:var(--fett-titel); font-size:var(--tipp-groesse); text-align:center; letter-spacing:-.02em; /* wie .tipp-anzeige, sonst landet ein Klick neben dem Buchstaben */ } .tipp-feld input::selection{ background:var(--m-markierung); color:transparent } .tipp-anzeige{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--schrift-titel); font-weight:var(--fett-titel); font-size:var(--tipp-groesse); line-height:1; letter-spacing:-.02em; color:var(--ink); white-space:pre; overflow:hidden; /* nichts ragt je über die Karte hinaus */ pointer-events:none; transition:font-size .35s var(--e); } .tipp-text{ display:inline-flex; align-items:baseline } /* Ein Buchstabe. Er zieht seine Breite von 0 auf, damit der Text in der Mitte weich zur Seite rutscht. */ .tipp-zeichen{ display:inline-block; overflow:visible; transition:width var(--tipp-zeit-breite) var(--e); } /* Hereinkommen: klein und blass von unten, kurz drüber, dann Ruhe */ .tipp-zeichen.rein{ animation:tipp-rein var(--tipp-zeit-rein) var(--e) both } @keyframes tipp-rein{ 0% { transform:translateY(var(--tipp-federweg)) scale(.55); opacity:0; color:var(--ink-3) } 45% { transform:translateY(calc(var(--tipp-federweg) * -.55)) scale(.8); opacity:.85; color:var(--ink-3) } 75% { transform:translateY(calc(var(--tipp-federweg) * .08)) scale(.98); opacity:1; color:var(--ink) } 100%{ transform:none; opacity:1; color:var(--ink) } } /* Hinausfallen beim Löschen */ .tipp-zeichen.raus{ width:0 !important; animation:tipp-raus var(--tipp-zeit-raus) var(--e) both; } @keyframes tipp-raus{ to{ transform:translateY(var(--tipp-federweg)) scale(.5); opacity:0; color:var(--ink-3) } } /* Der eigene blinkende Strich */ .tipp-strich{ /* Steht IN .tipp-text, genau an der Stelle des echten Cursors (warteliste.js, strichSetzen). Nimmt keinen Platz weg, damit die Buchstaben nicht zur Seite rutschen, wenn er wandert. */ display:inline-block; width:2px; height:1.05em; margin:0 -1px; position:relative; z-index:1; align-self:center; border-radius:1px; background:var(--ink); opacity:0; } .tipp-feld:focus-within .tipp-strich{ opacity:1; animation:tipp-blinken 1.05s steps(1) infinite } @keyframes tipp-blinken{ 50%{ opacity:0 } } /* Solange man tippt, blinkt er nicht */ .tipp-feld.tippt .tipp-strich{ animation:none; opacity:1 } /* Ist ein Stück markiert, zeigt die Markierung, wo man ist */ .tipp-feld.markiert .tipp-strich{ opacity:0 !important; animation:none } /* Der Platzhalter: nur zu sehen, wenn das Feld leer und nicht angeklickt ist. Sobald man hineinklickt, bleibt nur der Strich. */ .tipp-platzhalter{ position:absolute; left:0; right:0; text-align:center; color:var(--linie-2); transition:opacity .25s, transform .35s var(--e); } .tipp-feld.gefuellt .tipp-platzhalter, .tipp-feld:focus-within .tipp-platzhalter{ opacity:0; transform:translateY(-.25em) } /* Nach dem Eintragen: kein Strich mehr, Text leicht zurück */ .tipp-feld input:disabled{ cursor:default } .tipp-feld:has(input:disabled) .tipp-anzeige{ color:var(--ink-2) } .warteliste button{ min-width:12rem } .warteliste-antwort{ text-align:center } @media (prefers-reduced-motion:reduce){ .tipp-zeichen.rein, .tipp-zeichen.raus{ animation-duration:1ms } .tipp-zeichen{ transition:none } } /* ============================================================ Bilder Noch nicht benutzt, steht aber bereit. Sobald du ein Bild einbaust, gib ihm class="bild" — dann hat es dieselbe Rundung wie alles andere. object-fit:cover heißt: das Bild füllt den Rahmen und wird beschnitten, statt verzerrt zu werden. ============================================================ */ .bild{ display:block; width:100%; height:auto; border-radius:var(--rund-gross); border:1px solid var(--linie); object-fit:cover; background:var(--canvas-2); /* solange das Bild noch lädt */ } /* ============================================================ Fußzeile ============================================================ */ footer{ border-top:1px solid var(--linie); padding:40px 0 32px; position:relative; z-index:1 } .fuss{ display:flex; flex-wrap:wrap; gap:16px 26px; align-items:center; justify-content:space-between } .fuss a{ font-family:var(--schrift-etikett); font-weight:var(--fett-etikett); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); text-decoration:none } .fuss a:hover{ color:var(--ink) } .fuss small{ font-family:var(--schrift-etikett); font-weight:var(--fett-etikett); font-size:11.5px; color:var(--ink-3); letter-spacing:.03em } /* Das große Wort ganz unten. Läuft von Kante zu Kante; die genaue Größe rechnet effekte.js aus. */ .abspann{ overflow:hidden; margin-top:clamp(40px,6vw,72px) } .abspann-wort{ display:inline-block; font-family:var(--schrift-wucht); font-weight:900; /* Gabarito 900 — dieselbe Schrift wie die Überschriften, nur in ihrer dicksten Stufe. Dadurch gehört der Abspann sichtbar zur Seite, statt eine Fremdschrift zu sein. */ font-size:23.5vw; /* Startwert, bis effekte.js nachmisst */ line-height:.8; letter-spacing:-.035em; color:var(--ink); white-space:nowrap; margin:0; user-select:none; } /* REALUP ganz unten ist nur schwarz, auch das UP (seit 24.09.2026). Auf den anderen Seiten steckt UP noch in , das hier nimmt ihm den Verlauf wieder weg. */ .abspann .wort-up{ background:none; -webkit-text-fill-color:currentColor; color:inherit } /* ============================================================ Die eigene Seite der Warteliste (warteliste.html) Alles steht in der Mitte, in einer schmalen Spalte. Die Seite ist mindestens so hoch wie der Bildschirm, damit die Fußzeile nicht mitten im Bild hängt. ============================================================ */ .warte-seite main{ min-height:calc(100svh - 80px); display:flex; align-items:center } .warte-buehne{ width:100%; max-width:36rem; margin-inline:auto; padding:clamp(40px,9vh,110px) var(--gasse); text-align:center; } .warte-buehne h1{ font-size:clamp(40px,6vw,68px); line-height:1; margin:10px 0 18px } .warte-buehne .lede{ margin-inline:auto; max-width:34ch } .warte-buehne .warteliste{ margin-top:clamp(26px,4vw,40px) } .warte-buehne .anmelde-form{ margin-top:clamp(18px,3vw,26px) } .warte-versprechen{ list-style:none; padding:0; margin:22px 0 0; display:flex; flex-wrap:wrap; justify-content:center; gap:8px 22px; font-family:var(--schrift-etikett); font-weight:var(--fett-etikett); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); } .warte-versprechen li::before{ content:"✓"; margin-right:7px; color:var(--u-belegt) } /* Die Bühne ist etwas breiter, damit der große Countdown Platz hat */ .warte-buehne{ max-width:46rem } /* ---------- warteliste.html (neu seit 28.09.2026) ---------- Oben das Farbband der Startseite, darin der Countdown. Darunter mittig die Überschrift und je nach Zustand das Formular oder das Ticket. Die Klassen oben (.warte-seite, .warte-buehne) gelten weiter für anmelden.html. */ .liste-seite main{ display:block; min-height:0 } .liste-oben{ margin-top:calc(var(--kopf-hoehe) * -1) } /* rutscht unter die Kopfzeile, wie im Blog */ .liste-band{ height:auto; display:flex; flex-direction:column; align-items:center; text-align:center; padding:calc(var(--kopf-hoehe) + var(--liste-band-luft)) var(--gasse) var(--liste-band-luft); } .liste-band > *{ position:relative; z-index:1 } /* über dem wandernden Licht (.start-band::after) */ .liste-band .kicker{ color:var(--ink-2); margin:0 0 4px } .liste-band .countdown{ --countdown-schrift:var(--liste-countdown); margin:0 } .liste-band .countdown-wort{ color:var(--ink-2) } .liste-band .countdown-punkte{ color:color-mix(in srgb, var(--ink) 22%, transparent) } .liste-datum{ display:inline-flex; gap:.5em; flex-wrap:wrap; justify-content:center; margin:clamp(20px,3vh,30px) 0 0; padding:7px 15px; border-radius:var(--rund-pille); background:color-mix(in srgb, var(--weiss) 55%, transparent); font-family:var(--schrift-etikett); font-weight:var(--fett-etikett); font-size:13px; line-height:1.4; color:var(--ink); } section.liste-buehne{ padding:clamp(40px,5vw,68px) 0 clamp(80px,10vw,140px) } .liste-kopf{ text-align:center; max-width:60rem; margin:0 auto } .liste-kopf .kicker{ margin-bottom:14px } .liste-kopf h1{ font-size:clamp(44px,6vw,88px); line-height:.96; letter-spacing:-.028em; margin:0 0 16px } .liste-kopf h1 em{ white-space:nowrap; padding-right:.06em; margin-right:-.06em } /* bleibt in einer Zeile; die Luft rechts: sonst schneidet der Verlauf den Punkt an */ .liste-kopf .lede{ margin:0 auto; max-width:36ch; color:var(--ink); font-size:clamp(17px,1.4vw,21px); line-height:1.45 } .liste-kopf .lede{ text-wrap:balance } .liste-kopf .lede.nur-nachher{ max-width:60ch } /* angemeldet: am Computer eine Zeile, damit das Ticket höher rückt */ .liste-buehne .warteliste{ max-width:40rem; margin:clamp(24px,3vw,38px) auto 0; border-radius:var(--fach-rund); box-shadow:0 24px 60px -34px rgba(14,17,51,.35); } .liste-buehne .warteliste-antwort{ text-align:center; margin-bottom:0 } .liste-buehne .warte-versprechen{ margin-top:clamp(36px,4vw,52px) } @media (max-width:760px){ .liste-band .countdown-wort{ font-size:9px; letter-spacing:.1em } } /* ============================================================ Rollende Ziffern (zaehler.js) Vorbild: „Countdown with Number Flow“ von skiper-ui. Jede Ziffer hat ein eigenes Fach, genau eine Ziffer breit. Das Fach ist oben und unten eine halbe Zeile höher als die Ziffer und blendet dort weich aus (mask). So sieht man die rollende Ziffer noch kurz über und unter der Zeile, bevor sie verschwindet — genau wie im Vorbild. Tempo und Federung: --rolle-… in :root. ============================================================ */ .rolle{ display:inline-flex; align-items:center; font-variant-numeric:tabular-nums; line-height:1; } .rolle-fach{ position:relative; display:inline-block; width:.62em; height:1em; } .rolle-ziffer{ position:absolute; left:0; right:0; top:0; text-align:center; } .rolle-zeichen{ display:inline-block } /* Weiche Kante oben und unten: das ganze Fach bekommt eine Maske, die über die Zeile hinausreicht (inset negativ) */ .rolle{ padding-block:var(--rolle-rand); margin-block:calc(var(--rolle-rand) * -1); -webkit-mask:linear-gradient(transparent, #000 var(--rolle-kante), #000 calc(100% - var(--rolle-kante)), transparent); mask:linear-gradient(transparent, #000 var(--rolle-kante), #000 calc(100% - var(--rolle-kante)), transparent); } /* ---------- Der Countdown ---------- */ .countdown{ display:flex; justify-content:center; align-items:flex-start; gap:clamp(4px,1vw,12px); margin:4px 0 clamp(30px,5vw,54px); font-family:var(--schrift-wucht); font-weight:900; font-size:var(--countdown-schrift); letter-spacing:-.04em; color:var(--ink); --rolle-rand:.2em; /* nur hier: die rollende Ziffer blendet früher aus (sonst sieht man sie halb unter der Zeile) */ } .countdown-teil{ display:flex; flex-direction:column; align-items:center } .countdown-wort{ margin-top:calc(var(--countdown-schrift) * .27); /* Platz für die rollenden Ziffern (bis 28.09.2026: .24, da lief die alte Ziffer beim Rollen über „Seconds“) */ font-family:var(--schrift-etikett); font-weight:var(--fett-etikett); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); } /* Die Doppelpunkte etwas blasser, damit die Zahlen führen */ .countdown-punkte{ line-height:1; color:var(--linie-2); transform:translateY(-.06em) } /* Ist der Tag da, bleibt alles auf 00 und wird farbig */ .countdown.ist-da .countdown-zahl{ background:var(--verlauf); -webkit-background-clip:text; background-clip:text; color:transparent } @media (max-width:520px){ .countdown-wort{ font-size:9px; letter-spacing:.1em } } /* ---------- Die zwei Zustände der Warteliste ---------- warteliste.js setzt eine Klasse an : (keine) nicht angemeldet: Überschrift, Satz, Formular (.nur-vorher) ist-eingetragen angemeldet: „You're in“ und die Karte (.nur-nachher) */ .nur-nachher{ display:none !important } .ist-eingetragen .nur-vorher{ display:none !important } .ist-eingetragen .nur-nachher{ display:block !important } /* Seit 03.10.2026 (Warteliste ohne Konto) zwei Zustände mehr: ohne-konto auf der Liste, aber ohne Konto: rechts „Konto anlegen“ (.nur-ohne-konto) statt der Einladung (.nur-mit-konto) ist-austragen kam über „Remove this email“ aus der Mail (.nur-austragen) Hier wird nur versteckt, nie angezeigt. So behält jedes Element seine eigene Anordnung (grid, flex …). */ body:not(.ohne-konto) .nur-ohne-konto{ display:none !important } .ohne-konto .nur-mit-konto{ display:none !important } body:not(.ist-austragen) .nur-austragen{ display:none !important } .ist-austragen .nur-vorher{ display:none !important } /* Austragen: „Remove me“ und „Keep my spot“ nebeneinander */ .austragen-knoepfe{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:clamp(28px,3.4vw,44px) } .austragen-knoepfe[hidden]{ display:none !important } /* Klein unter dem Formular: „Already have an account? Log in“ und Datenschutz */ .liste-klein{ text-align:center; margin:16px auto 0; max-width:60ch; text-wrap:balance; font-size:14px; line-height:1.6; color:var(--ink-3) } .liste-klein a{ color:var(--ink-2); text-decoration:underline; text-underline-offset:3px } .liste-klein a:hover{ color:var(--ink) } /* ---------- Das Ticket und die Einladung (seit 28.09.2026) ---------- Wer angemeldet ist, sieht zwei Karten nebeneinander (Handy: untereinander): 1. Links das Ticket, Nachtblau wie das Team-Board der Startseite. Oben RealUp und „Waitlist“, in der Mitte der eigene Platz (rollt wie der Countdown), unten hinter einer gestrichelten Abrisskante mit zwei runden Kerben: Freunde, Code, Launch. 2. Rechts die Einladung, hell wie das Board „für alle“: Überschrift, ein Balken bis zum nächsten Platz, der Link und Teilen-Knöpfe. Alle Regler: oben in :root bei --ticket-… und --einladen-… */ .platz{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.12fr); gap:clamp(14px,1.6vw,22px); max-width:64rem; margin:clamp(28px,3.4vw,44px) auto 0; text-align:left; } .platz[hidden]{ display:none } /* Beim allerersten Mal kommen die zwei Karten kurz nacheinander herein */ .platz.kommt > *{ animation:platz-kommt .7s var(--e) both } .platz.kommt > :nth-child(2), .platz.kommt > :nth-child(3){ animation-delay:.12s } /* die dritte ist „Konto anlegen“ (ohne Konto) */ @keyframes platz-kommt{ from{ opacity:0; transform:translateY(18px) scale(.98) } } /* --- 1. Das Ticket --- Der Halter trägt den Schatten. Am Ticket selbst ginge das nicht: die Maske für die Kerben würde den Schatten mit abschneiden. */ .platz-ticket-halter{ display:flex; filter:drop-shadow(var(--ticket-schatten)) } .platz-ticket{ --ticket-luft:clamp(22px,2.4vw,30px); flex:1; position:relative; display:flex; flex-direction:column; min-height:var(--ticket-hoehe); padding:var(--ticket-luft) var(--ticket-luft) 0; border-radius:var(--fach-rund); background:var(--ticket-grund); color:var(--ticket-text); container-type:inline-size; /* die Zahl richtet ihre Größe nach der Breite des Tickets */ /* Die zwei Kerben: je ein durchsichtiger Kreis links und rechts, genau auf der Höhe der Abrisskante */ --kerben: radial-gradient(circle var(--ticket-kerbe) at 0 calc(100% - var(--ticket-abriss)), #0000 97%, #000), radial-gradient(circle var(--ticket-kerbe) at 100% calc(100% - var(--ticket-abriss)), #0000 97%, #000); -webkit-mask:var(--kerben); -webkit-mask-composite:source-in; mask:var(--kerben); mask-composite:intersect; } .ticket-kopf{ display:flex; justify-content:space-between; align-items:center; gap:12px } .ticket-marke{ display:inline-flex; align-items:center; gap:8px; font-family:var(--schrift-marke); font-weight:700; font-size:17px; letter-spacing:-.01em; } .ticket-marke img{ filter:brightness(0) invert(1) } /* das schwarze Logo wird weiß */ .ticket-schild{ padding:5px 11px; border-radius:var(--rund-pille); border:1px solid color-mix(in srgb, var(--ticket-text) 22%, transparent); font-family:var(--schrift-etikett); font-weight:var(--fett-etikett); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ticket-leise); } .ticket-mitte{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:20px 0 26px; } .platz-titel{ font-family:var(--schrift-etikett); font-weight:var(--fett-etikett); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ticket-leise); margin:0; } .platz-nummer{ display:flex; justify-content:center; align-items:center; margin:0; font-family:var(--schrift-wucht); font-weight:900; /* So groß wie --ticket-zahl, aber nie breiter als das Ticket: --stellen (setzt warteliste.js) ist die Länge der Zahl, „1,234“ = 5. Eine Ziffer ist ca. .62em breit, die Raute ca. .35em. */ font-size:min(var(--ticket-zahl), calc(88cqi / (.35 + .62 * var(--stellen, 1)))); letter-spacing:-.04em; color:var(--ticket-text); padding-block:.18em; /* Platz für die rollenden Ziffern */ } .platz-raute{ font-size:.5em; margin-right:.06em; align-self:center; background:var(--ticket-akzent); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; } /* Das Komma in 1,234 schmal halten */ .platz-nummer .rolle-zeichen{ width:.28em; text-align:center } .platz-info{ font-size:15px; margin:0; color:var(--ticket-leise) } .platz-info span{ color:var(--ticket-text) } /* Unten der Abriss: gestrichelte Linie genau auf Höhe der Kerben */ .ticket-werte{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); align-items:center; height:var(--ticket-abriss); margin:0 calc(var(--ticket-luft) * -1); padding:0 var(--ticket-luft); border-top:2px dashed color-mix(in srgb, var(--ticket-text) 22%, transparent); } .ticket-werte div:nth-child(2){ text-align:center } .ticket-werte div:nth-child(3){ text-align:right } .ticket-werte dt{ font-family:var(--schrift-etikett); font-weight:var(--fett-etikett); font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--ticket-leise); margin-bottom:3px; } .ticket-werte dd{ margin:0; font-family:var(--schrift-titel); font-weight:var(--fett-titel); font-size:clamp(17px,1.5vw,20px); letter-spacing:-.005em; color:var(--ticket-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* Ohne Konto gibt es weder Freunde noch Code: unten steht nur „Launch“, mittig */ .ohne-konto .ticket-werte{ grid-template-columns:minmax(0,1fr) } .ohne-konto .ticket-werte div{ text-align:center } /* Platz 1: auch die Zahl selbst im Verlauf */ .ist-erster .platz-nummer .rolle-ziffer{ background:var(--ticket-akzent); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; } /* --- 2. Die Einladung --- */ .platz-einladen{ display:flex; flex-direction:column; padding:clamp(26px,3vw,40px); border-radius:var(--fach-rund); background:var(--einladen-grund); color:var(--einladen-text); isolation:isolate; /* sonst verschwindet der Farbring des Knopfs (z-index:-1) hinter der Karte */ } .platz-einladen .kicker{ color:var(--einladen-leise); margin:0 0 12px } .platz-einladen h2{ font-size:clamp(34px,3.6vw,52px); line-height:1; letter-spacing:-.022em; margin:0 0 12px; color:var(--einladen-text) } .platz-satz{ font-size:clamp(16px,1.25vw,18px); line-height:1.45; color:var(--einladen-leise); max-width:32ch; margin:0 } /* Der Balken bis zum nächsten Platz. Wie voll: --fortschritt (0 bis 1), setzt warteliste.js. Auf Platz 1 ist er ganz voll. */ .platz-fortschritt{ margin-top:auto; padding-top:26px } .platz-tipp{ margin:0 0 10px; font-family:var(--schrift-etikett); font-weight:var(--fett-etikett); font-size:13.5px; line-height:1.4; color:var(--einladen-text); } .platz-tipp:empty{ display:none } .fortschritt-balken{ height:var(--fortschritt-hoehe); border-radius:var(--rund-pille); background:color-mix(in srgb, var(--einladen-text) 10%, transparent); overflow:hidden; } .fortschritt-balken span{ display:block; height:100%; width:max(var(--fortschritt-hoehe), calc(var(--fortschritt, 0) * 100%)); border-radius:inherit; background:var(--marke-verlauf); transition:width .9s var(--e); } /* Ohne Konto: rechts statt Link und Teilen der Knopf zum Konto (seit 03.10.2026). Unten angeschlagen wie der Balken der Einladung. */ .platz-konto-unten{ margin-top:auto; padding-top:26px; display:flex; flex-direction:column; align-items:flex-start; gap:14px; } .platz-konto-login{ font-size:15px; color:var(--einladen-leise); text-decoration:underline; text-underline-offset:3px } .platz-konto-login:hover{ color:var(--einladen-text) } .platz-konto-login[hidden]{ display:none } /* Der Link mit „Copy link“ */ .platz-link{ display:flex; gap:8px; align-items:stretch; margin-top:18px; padding:6px; border-radius:calc(var(--rund-klein) + 6px); background:var(--weiss); border:1px solid color-mix(in srgb, var(--einladen-text) 12%, transparent); } .platz-link input{ flex:1; min-width:0; border:0; outline:0; background:transparent; padding:0 10px; font-family:var(--schrift-etikett); font-weight:var(--fett-etikett); font-size:13.5px; color:var(--ink-2); text-overflow:ellipsis; } .platz-link .knopf{ flex:none; min-width:8.5rem; min-height:44px } /* Teilen: WhatsApp, X, E-Mail, am Handy „More“. Beim Drüberfahren füllt sich der Knopf in der Farbe seiner Plattform, wie die runden Social-Knöpfe in der Fußzeile. */ .platz-kanaele{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px } .kanal{ --kanal-farbe:var(--ink); flex:1 1 0; min-width:max-content; display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; padding:0 14px; border-radius:calc(var(--rund-klein) + 6px); border:1px solid color-mix(in srgb, var(--einladen-text) 12%, transparent); background:color-mix(in srgb, var(--weiss) 62%, transparent); font-family:var(--schrift-etikett); font-weight:var(--fett-etikett); font-size:14px; color:var(--einladen-text); text-decoration:none; cursor:pointer; transition:background-color .2s var(--e-weich), color .2s var(--e-weich), border-color .2s var(--e-weich), transform .2s var(--e); } .kanal svg{ width:17px; height:17px; flex:none; fill:currentColor } .kanal svg.strich{ fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round } .kanal[hidden]{ display:none } #teilen-whatsapp{ --kanal-farbe:#25D366 } #teilen-whatsapp svg{ color:#25D366 } .kanal:hover, .kanal:focus-visible{ background:var(--kanal-farbe); border-color:var(--kanal-farbe); color:var(--weiss); transform:translateY(-1px) } #teilen-whatsapp:hover svg, #teilen-whatsapp:focus-visible svg{ color:var(--weiss) } /* --- Die drei Punkte: vorher „was du bekommst“, nachher „so rückst du vor“ --- */ .liste-punkte{ list-style:none; margin:clamp(40px,5vw,64px) auto 0; padding:0; max-width:64rem; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(12px,1.4vw,18px); text-align:left; } .liste-punkte li{ display:flex; flex-direction:column; gap:4px; padding:clamp(20px,2.2vw,26px); border-radius:var(--rund-gross); background:var(--papier); border:1px solid var(--linie); } .punkt-zeichen{ display:grid; place-items:center; width:40px; height:40px; margin-bottom:14px; border-radius:12px; background:var(--nacht); color:var(--weiss); font-family:var(--schrift-wucht); font-weight:900; font-size:18px; line-height:1; } .liste-punkte strong{ font-family:var(--schrift-titel); font-weight:var(--fett-zwischen); font-size:19px; line-height:1.25; color:var(--ink) } .liste-punkte li > span:last-child{ font-size:15px; line-height:1.45; color:var(--ink-2) } .liste-schritte-titel{ font-size:clamp(26px,2.6vw,36px); text-align:center; margin:clamp(64px,8vw,104px) 0 0 } .liste-schritte-titel + .liste-punkte{ margin-top:clamp(20px,2.4vw,30px) } @media (max-width:820px){ .platz{ grid-template-columns:minmax(0,1fr) } .liste-punkte{ grid-template-columns:minmax(0,1fr) } .liste-punkte li{ display:grid; grid-template-columns:auto 1fr; column-gap:16px; align-items:center } .punkt-zeichen{ grid-row:span 2; margin:0 } } @media (max-width:520px){ .platz-link{ flex-direction:column } .platz-link input{ padding:10px } .kanal{ flex-basis:calc(50% - 4px) } } @media (prefers-reduced-motion:reduce){ .platz.kommt > *{ animation:none } .fortschritt-balken span, .kanal{ transition:none } } /* ============================================================ Log in / Sign up (anmelden.html) ============================================================ */ /* „Log in“ ganz rechts in der Ecke, gegenüber vom Logo: schwarze Schrift, keine Fläche. */ .kopf-login{ justify-self:end; /* rechts in die Ecke (vorher: direkt neben der Leiste) */ white-space:nowrap; pointer-events:auto; padding:10px 4px; font-family:var(--schrift-etikett); font-weight:var(--fett-etikett); font-size:11.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink); text-decoration:none; background:none; text-underline-offset:5px; transition:color .25s var(--e-weich); } .kopf-login:hover, .kopf-login[aria-current="page"]{ text-decoration:underline; text-decoration-thickness:1px } /* Am Handy steht die Leiste rechts. Log in kommt dann als dritte Spalte direkt dahinter. */ @media (max-width:760px){ .kopf-raster{ grid-template-columns:1fr auto auto; gap:12px } } @media (max-width:420px){ .kopf-raster{ gap:6px } .kopf-login{ letter-spacing:.06em } } /* ---------- Konto oben rechts (konto.js) ---------- Angemeldet: statt „Log in“ ein runder Kreis ganz rechts in der Ecke, gegenüber vom Logo. Darin das Profilbild aus der App oder der Anfangsbuchstabe. Ein Klick öffnet ein kleines Menü. */ .kopf-konto{ justify-self:end; /* rechts in die Ecke */ position:relative; pointer-events:auto; } .kopf-login[hidden]{ display:none } /* Nur so kann der Browser die Ringdicke weich überblenden */ @property --avatar-ring-jetzt{ syntax:""; inherits:true; initial-value:0px } @property --avatar-kante{ syntax:""; inherits:true; initial-value:0px } @property --avatar-ueberstand{ syntax:""; inherits:true; initial-value:0px } .kopf-avatar{ --avatar-groesse:44px; /* ganz außen, Ring eingeschlossen */ --ring-runde: 16s; /* wie lange eine Runde der Farben dauert (ruhiger als bei „Join waitlist“) */ --ring-puls: 2.4s; /* wie lange ein Atemzug des Scheins beim Drüberfahren dauert */ position:relative; width:var(--avatar-groesse); height:var(--avatar-groesse); padding:0; border:0; border-radius:50%; /* Die schwarze Scheibe. Der drehende Farbring liegt als eigene Schicht dahinter (::after, siehe unten) und ist in Ruhe ganz unsichtbar. Früher lag er in diesem Hintergrund mit drin, dann blitzte er am Rand in einzelnen Pixeln durch und der Kreis sah auf Dunkelblau ausgefranst aus (Fix 27.09.2026). */ background: radial-gradient(closest-side, var(--avatar-grund) calc(100% - var(--avatar-ring-jetzt) - var(--avatar-kante) + var(--avatar-ueberstand)), transparent calc(100% - var(--avatar-ring-jetzt) + var(--avatar-kante) + var(--avatar-ueberstand))); animation:ring-drehen var(--ring-runde) linear infinite; /* dreht sich immer, ganz ruhig */ /* Der Ring ist in Ruhe weg: die schwarze Scheibe bzw. das Bild füllt den ganzen Kreis. Erst beim Drüberfahren wird die Scheibe um --avatar-ring schmaler und der Ring kommt außen zum Vorschein. --avatar-ring-jetzt ist die Dicke gerade eben. */ --avatar-ring-jetzt:0px; --avatar-kante:0px; /* die weiche Kante zum Ring (nur beim Drüberfahren) */ --avatar-ueberstand:1px; /* in Ruhe ragt die Scheibe 1px über den Kreis hinaus: dann macht border-radius die Kante, und die ist glatt rund */ transition:--avatar-ring-jetzt .25s var(--e), --avatar-kante .25s var(--e), --avatar-ueberstand .25s var(--e); display:grid; place-items:center; color:var(--avatar-schrift); font-family:var(--schrift); font-weight:500; font-size:16px; line-height:1; cursor:pointer; } /* Der Schein: in Ruhe unsichtbar, beim Drüberfahren leuchtet er in den Logo-Farben auf und atmet leicht. Liegt hinter dem Kreis. */ .kopf-avatar::before{ content:""; position:absolute; inset:calc(var(--avatar-ring) * -1); border-radius:50%; z-index:-1; pointer-events:none; background:conic-gradient(from var(--ring-dreh), var(--marke-1), var(--marke-2), var(--marke-3), var(--marke-2), var(--marke-1)); filter:blur(9px); opacity:0; transition:opacity .3s; --ring-dreh:inherit; /* dreht genau mit dem Ring mit, Farben stehen deckungsgleich */ } /* Der Ring: dieselbe Größe wie der Kreis, liegt hinter der Scheibe und schaut nur außen heraus, wenn die Scheibe schmaler wird. In Ruhe unsichtbar. Beim Weggehen verschwindet er erst, wenn die Scheibe wieder ganz voll ist (Verzögerung = Dauer des Übergangs). */ .kopf-avatar::after{ content:""; position:absolute; inset:0; border-radius:50%; z-index:-1; pointer-events:none; background:conic-gradient(from var(--ring-dreh), var(--marke-1), var(--marke-2), var(--marke-3), var(--marke-2), var(--marke-1)); --ring-dreh:inherit; /* dreht mit dem Kreis mit */ opacity:0; transition:opacity 0s linear .25s; } /* Ring und Schein: beim Drüberfahren, mit der Tastatur und solange das Konto-Menü offen ist (aria-expanded="true", setzt konto.js) */ .kopf-avatar:hover, .kopf-avatar:focus-visible, .kopf-avatar[aria-expanded="true"]{ --avatar-ring-jetzt:var(--avatar-ring); --avatar-kante:.3px; --avatar-ueberstand:0px } .kopf-avatar:hover::after, .kopf-avatar:focus-visible::after, .kopf-avatar[aria-expanded="true"]::after{ opacity:1; transition-delay:0s } .kopf-avatar:hover::before, .kopf-avatar:focus-visible::before, .kopf-avatar[aria-expanded="true"]::before{ opacity:1; animation:avatar-atmen var(--ring-puls) ease-in-out infinite; } /* kräftiger als beim Knopf (ring-atmen), damit er auf dem Farbband oben sichtbar aufleuchtet */ @keyframes avatar-atmen{ 0%,100%{ opacity:.6 } 50%{ opacity:1 } } .kopf-avatar:focus-visible{ outline:2px solid var(--ink); outline-offset:3px } @media (prefers-reduced-motion:reduce){ .kopf-avatar, .kopf-avatar::before{ animation:none !important } .kopf-avatar:hover::before{ opacity:.35 } } /* Das Bild füllt genau die Scheibe innerhalb des Rings, rund und schwarz-weiß (--avatar-grau). Mit Bild ist die Scheibe darunter durchsichtig: an der runden Kante des Bildes scheint dann der Ring durch statt Schwarz, also kein dunkler Saum. */ .kopf-avatar img{ grid-area:1/1; width:calc(100% - 2 * var(--avatar-ring-jetzt)); height:calc(100% - 2 * var(--avatar-ring-jetzt)); object-fit:cover; border-radius:50%; filter:grayscale(var(--avatar-grau)); } .kopf-avatar.mit-bild{ --avatar-grund:transparent } /* Der Buchstabe: text-box schneidet den leeren Platz über und unter dem Großbuchstaben weg. So steht das K optisch genau in der Mitte, nicht ein Stück zu hoch. */ .kopf-avatar-buchstabe{ grid-area:1/1; text-box:trim-both cap alphabetic } .kopf-avatar.mit-bild .kopf-avatar-buchstabe{ visibility:hidden } /* Das Menü am Profilbild (seit 27.09.2026). Oben der Kopf mit Bild, Name, E-Mail und Tarif, darunter die Punkte, ganz unten „Log out“. Die Regler stehen hier im Block, alle anderen Werte kommen aus den Variablen oben. */ .kopf-konto-menue{ --konto-menue-breite: 300px; /* so breit ist das Menü am Computer */ --konto-bild: 40px; /* das kleine Profilbild im Kopf */ position:absolute; right:0; top:calc(100% + 10px); width:var(--konto-menue-breite); max-width:calc(100vw - 2 * var(--kopf-rand, 16px)); padding:8px; background:var(--menue-tafel); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border:1px solid var(--linie); border-radius:var(--rund); box-shadow:0 12px 32px rgba(15,23,27,.12); text-align:left; transform-origin:top right; animation:konto-menue .2s var(--e); } .kopf-konto-menue[hidden]{ display:none } @keyframes konto-menue{ from{ opacity:0; transform:translateY(-6px) scale(.98) } } /* 1. Der Kopf: Bild | Name und E-Mail | Tarif */ .kopf-konto-kopf{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:8px 8px 14px; margin-bottom:6px; border-bottom:1px solid var(--linie); } .kopf-konto-bild{ width:var(--konto-bild); height:var(--konto-bild); border-radius:50%; display:grid; place-items:center; overflow:hidden; background:var(--avatar-grund); color:var(--avatar-schrift); font-family:var(--schrift); font-weight:500; font-size:15px; line-height:1; } .kopf-konto-bild img{ grid-area:1/1; width:100%; height:100%; object-fit:cover; filter:grayscale(var(--avatar-grau)) } .kopf-konto-bild.mit-bild .kopf-avatar-buchstabe{ visibility:hidden } .kopf-konto-wer{ min-width:0 } .kopf-konto-name{ margin:0; font-weight:500; color:var(--ink); font-size:15px; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .kopf-konto-mail{ margin:2px 0 0; font-size:13px; line-height:1.3; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .kopf-konto-mail:empty{ display:none } /* Das Tarif-Schild: Free schlicht mit Rand, bezahlte Tarife im Logo-Verlauf */ .kopf-konto-tarif{ padding:4px 9px; border-radius:var(--rund-pille); border:1px solid var(--linie); color:var(--ink-3); font-family:var(--schrift-etikett); font-weight:var(--fett-etikett); font-size:10px; letter-spacing:.11em; text-transform:uppercase; line-height:1; } .kopf-konto-tarif[hidden]{ display:none } .kopf-konto-tarif:is([data-tarif="pro"],[data-tarif="max"],[data-tarif="intern"]){ border-color:transparent; color:#FFFFFF; background:var(--marke-verlauf); } /* 2.–4. Die Punkte: links der Text, rechts ein Wert (#12, Copy link) */ .kopf-konto-punkt{ display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; padding:10px 10px; border:0; border-radius:var(--rund-klein); background:none; font:inherit; font-size:14.5px; line-height:1.3; color:var(--ink); text-align:left; text-decoration:none; cursor:pointer; transition:background .15s; } .kopf-konto-punkt[hidden]{ display:none } .kopf-konto-punkt:hover, .kopf-konto-punkt:focus-visible{ background:var(--menue-licht); outline:none } .kopf-konto-wert{ flex-shrink:0; font-size:13px; color:var(--ink-3); font-variant-numeric:tabular-nums; transition:color .15s; } /* Der eigene Platz fett, „Join“ im Logo-Verlauf */ [data-punkt="platz"] .kopf-konto-wert{ font-weight:600; color:var(--ink) } [data-punkt="platz"] .kopf-konto-wert.ist-einladung{ background:var(--marke-verlauf); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; } .kopf-konto-punkt.ist-kopiert .kopf-konto-wert{ color:var(--ink); font-weight:600 } /* Gesperrt bis zum Launch: grau, Schloss davor, reagiert nicht */ .kopf-konto-punkt.gesperrt{ color:var(--ink-3); cursor:default } .kopf-konto-punkt.gesperrt:hover{ background:none } .kopf-konto-punkt.gesperrt > span{ display:flex; align-items:center; gap:7px } /* 5. Log out, durch eine Linie abgesetzt */ .kopf-konto-aus{ display:block; width:100%; margin-top:6px; padding:12px 10px 8px; border:0; border-top:1px solid var(--linie); border-radius:0 0 var(--rund-klein) var(--rund-klein); background:none; text-align:left; cursor:pointer; font-family:var(--schrift-etikett); font-weight:var(--fett-etikett); font-size:11.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink); } .kopf-konto-aus:hover, .kopf-konto-aus:focus-visible{ background:var(--menue-licht); outline:none } /* Am Handy: das Menü geht über die volle Breite, mit etwas Rand */ @media (max-width:560px){ .kopf-konto-menue{ position:fixed; left:12px; right:12px; top:calc(var(--leiste-luft) + 58px); width:auto; max-width:none; transform-origin:top center; } .kopf-konto-punkt{ padding:13px 10px } /* größere Flächen für den Daumen */ } /* ---------- Profil bearbeiten (konto.js, profilFenster) ---------- Ein Fenster in der Mitte, der Rest der Seite wird abgedunkelt. Oben das Bild mit „Change photo“, darunter der Name, unten Cancel und Save. Knöpfe und Eingabefeld sind dieselben wie auf der Anmeldeseite (.knopf, .anmelde-feld). */ .profil-fenster{ --profil-breite: 420px; /* so breit ist das Fenster höchstens */ --profil-bild: 88px; /* das große Profilbild oben */ width:min(var(--profil-breite), calc(100vw - 32px)); padding:28px; border:1px solid var(--linie); border-radius:var(--rund-gross); background:var(--canvas); color:var(--ink); box-shadow:0 24px 64px rgba(15,23,27,.18); } .profil-fenster[open]{ animation:profil-rein .22s var(--e) } .profil-fenster::backdrop{ background:rgba(15,23,27,.32); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px) } @keyframes profil-rein{ from{ opacity:0; transform:translateY(8px) scale(.98) } } @media (prefers-reduced-motion:reduce){ .profil-fenster[open]{ animation:none } } .profil-titel{ font-size:26px; margin:0 0 22px } .profil-bild-zeile{ display:flex; align-items:center; gap:18px; margin-bottom:24px } .profil-bild{ flex-shrink:0; width:var(--profil-bild); height:var(--profil-bild); border-radius:50%; display:grid; place-items:center; overflow:hidden; background:var(--avatar-grund); color:var(--avatar-schrift); font-family:var(--schrift); font-weight:500; font-size:32px; line-height:1; } .profil-bild img{ grid-area:1/1; width:100%; height:100%; object-fit:cover; filter:grayscale(var(--avatar-grau)) } .profil-bild.mit-bild .kopf-avatar-buchstabe{ visibility:hidden } .profil-bild-knoepfe{ display:flex; flex-direction:column; align-items:flex-start; gap:8px } .profil-bild-waehlen{ position:relative } /* Nur mit der Tastatur einen Rahmen zeigen, nicht nach einem Klick */ .profil-bild-waehlen:has(input:focus-visible){ outline:2px solid var(--u-meinung); outline-offset:3px } .profil-bild-weg{ padding:4px 0; border:0; background:none; cursor:pointer; font:inherit; font-size:13.5px; color:var(--ink-3); text-decoration:underline; text-underline-offset:3px; } .profil-bild-weg:hover{ color:var(--ink) } .profil-bild-weg[hidden]{ display:none } .profil-label{ display:block; margin-bottom:8px; font-family:var(--schrift-etikett); font-weight:var(--fett-etikett); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); } .profil-name{ width:100% } .profil-meldung{ min-height:1.4em; margin:10px 0 0; font-size:13.5px; color:var(--u-falsch) } .profil-tasten{ display:flex; justify-content:flex-end; gap:10px; margin-top:14px } .profil-speichern[disabled]{ opacity:.6; cursor:default } /* Der drehende Farbring beim Drüberfahren bleibt etwas Besonderes für „Join waitlist“ und die großen Knöpfe der Seite. Im Fenster haben die Knöpfe darum keinen Ring und heben sich nicht an, sie werden beim Drüberfahren nur etwas heller. */ .profil-fenster .knopf::before, .profil-fenster .knopf::after{ display:none } .profil-fenster .knopf:hover{ top:0 } .profil-fenster .knopf{ transition:background .15s, opacity .15s } .profil-fenster .knopf:not(.leer):hover{ opacity:.86 } .profil-fenster .knopf.leer:hover{ background:var(--menue-licht) } /* Am Handy: Knöpfe unten über die volle Breite */ @media (max-width:480px){ .profil-fenster{ padding:22px } .profil-tasten .knopf{ flex:1; min-height:46px } } @media (max-width:420px){ .kopf-avatar{ --avatar-groesse:40px; font-size:14px } } .anmelde-reiter[hidden]{ display:none } /* ---------- Das Passwort auf der Anmeldeseite ---------- Unter der E-Mail, im selben Kasten. „Show“ liegt rechts im Feld. */ .passwort{ width:100%; max-width:24rem; display:flex; flex-direction:column; align-items:center; gap:10px; margin:4px 0 22px; } .passwort-feld{ position:relative; width:100% } .passwort-feld .anmelde-feld{ width:100%; box-sizing:border-box; padding-right:64px; /* Platz für „Show“ */ text-align:center; letter-spacing:.04em; } .passwort-zeigen{ position:absolute; right:6px; top:50%; transform:translateY(-50%); border:0; background:none; cursor:pointer; padding:8px 10px; font-family:var(--schrift-etikett); font-weight:var(--fett-etikett); font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3); } .passwort-zeigen:hover{ color:var(--ink) } .passwort-vergessen{ font-size:13px; color:var(--ink-3) } .passwort-vergessen[hidden]{ display:none } /* Im E-Mail-Kasten gelten Regeln für die großen Knöpfe (.warteliste button: position, min-width). Hier nicht. */ .warteliste .passwort-feld .passwort-zeigen{ position:absolute; min-width:0 } .warteliste .passwort-vergessen{ min-width:0; font-size:13px; line-height:1.4; letter-spacing:0 } .warteliste .passwort-feld .anmelde-feld{ user-select:text; letter-spacing:.04em } .anmelde-buehne h1{ font-size:clamp(36px,5vw,56px) } /* Die Anmeldeseite steht oben, nicht in der Mitte (seit 27.09.2026). Ohne große Überschrift kommen gleich die Reiter und darunter der Kasten. --anmelde-oben = Luft zwischen Kopfzeile und Reitern. --anmelde-luft = Luft zwischen Reitern und Kasten. --oder-oben / --oder-unten = Luft über und unter „or“, --anbieter-abstand = Luft über „Continue with Google/Apple“. Kleiner = Apple rutscht höher und passt auch auf kleine Bildschirme ganz drauf (seit 27.09.2026, vorher 22/14/10px). Größer = weiter unten. */ .anmelde-seite{ --anmelde-oben: clamp(16px, 4vh, 48px); --anmelde-luft: 23px; /* war 26px, Kasten 3px höher (27.09.2026) */ --oder-oben: 16px; --oder-unten: 10px; --anbieter-abstand: 8px; } .anmelde-seite main{ align-items:flex-start } .anmelde-seite .anmelde-buehne{ padding-top:var(--anmelde-oben) } /* Zwischen Reitern und Kasten reicht der Abstand der Reiter selbst */ .anmelde-buehne .anmelde-karte{ margin-top:0 } .anmelde-karte{ margin-top:clamp(26px,4vw,40px) } .anmelde-karte[hidden], .anmelde-anbieter[hidden]{ display:none } /* „or“ mit feinen Linien links und rechts */ .anmelde-oder{ display:flex; align-items:center; gap:14px; margin:var(--oder-oben) 0 var(--oder-unten); font-family:var(--schrift-etikett); font-weight:var(--fett-etikett); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); } .anmelde-oder::before, .anmelde-oder::after{ content:""; flex:1; height:1px; background:var(--linie) } .anbieter-knopf{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; height:50px; margin-top:var(--anbieter-abstand); border:1px solid var(--linie-2); border-radius:var(--rund-klein); background:var(--papier); color:var(--ink); font-family:var(--schrift); font-size:15px; font-weight:500; cursor:pointer; transition:border-color .2s, background-color .2s; } .anbieter-knopf:hover{ border-color:var(--ink-3); background:#fff } .anbieter-knopf svg{ width:18px; height:18px; flex:none } /* Die zwei Reiter: eine Kapsel, der aktive Teil ist weiß. */ .anmelde-reiter{ display:inline-flex; padding:4px; gap:2px; margin-bottom:var(--anmelde-luft); border-radius:var(--rund-pille); background:var(--canvas-2); } .anmelde-reiter button{ border:0; background:transparent; cursor:pointer; padding:9px 18px; border-radius:var(--rund-pille); font-family:var(--schrift-etikett); font-weight:var(--fett-etikett); font-size:11.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-2); transition:background-color .2s, color .2s, box-shadow .2s; } .anmelde-reiter button:hover{ color:var(--ink) } .anmelde-reiter button[aria-selected="true"]{ background:var(--papier); color:var(--ink); box-shadow:0 1px 3px rgba(15,23,27,.08), 0 0 0 1px rgba(15,23,27,.04); } .anmelde-form{ display:flex; flex-direction:column; align-items:stretch; gap:12px; max-width:24rem; margin:clamp(24px,4vw,36px) auto 0; text-align:left; } .anmelde-form[hidden]{ display:none } .anmelde-label{ font-family:var(--schrift-etikett); font-weight:var(--fett-etikett); font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3); } .anmelde-feld{ height:52px; padding:0 16px; border:1px solid var(--linie-2); border-radius:var(--rund-klein); background:var(--papier); color:var(--ink); font-family:var(--schrift); font-size:16px; /* 16px: iPhone zoomt sonst hinein */ transition:border-color .2s, box-shadow .2s; } .anmelde-feld::placeholder{ color:var(--ink-3) } .anmelde-feld:focus{ outline:none; border-color:var(--ink); box-shadow:0 0 0 3px var(--menue-licht) } .anmelde-code{ text-align:center; font-family:var(--schrift-etikett); font-weight:var(--fett-etikett); font-size:24px; letter-spacing:.4em; } .anmelde-form .knopf{ margin-top:6px } .anmelde-an{ margin:0 0 4px; text-align:center; color:var(--ink-2); font-size:15px } .anmelde-klein{ margin:4px 0 0; text-align:center; font-size:13px; color:var(--ink-3); } .anmelde-klein a{ color:var(--ink-2) } .anmelde-link{ border:0; background:none; padding:0; cursor:pointer; font:inherit; color:var(--ink-2); text-decoration:underline; text-underline-offset:3px; } .anmelde-link:hover{ color:var(--ink) } .anmelde-buehne .warteliste-antwort .anmelde-link{ color:inherit } /* ============================================================ Hallo beim ersten Anmelden (hallo.js) Eine helle Fläche über allem. Die Wörter wechseln in der Mitte. Am Ende gleitet die Fläche nach oben weg. Ihre Unterkante ist dabei rund nach unten gewölbt (::after), wie ein Tuch, das hochgezogen wird. ============================================================ */ .hallo{ --hallo-vorhang: 900ms; display:none; position:fixed; inset:0; z-index:1000; align-items:center; justify-content:center; background:var(--papier); transition:transform var(--hallo-vorhang) cubic-bezier(.76,0,.24,1); } .hallo-an .hallo{ display:flex } .hallo-an body{ overflow:hidden } /* die runde Unterkante */ .hallo::after{ content:""; position:absolute; left:-10%; right:-10%; top:100%; height:14vh; background:inherit; border-radius:0 0 50% 50%; transition:height var(--hallo-vorhang) cubic-bezier(.76,0,.24,1); } .hallo.weg{ transform:translateY(calc(-100% - 14vh)) } .hallo.weg::after{ height:0 } .hallo-wort{ margin:0; font-family:var(--schrift-titel); font-weight:var(--fett-titel); font-size:clamp(34px,5vw,58px); letter-spacing:-.01em; color:var(--ink); opacity:0; transition:opacity .6s ease; } .hallo-wort.da{ opacity:.9 } @media (prefers-reduced-motion:reduce){ .hallo, .hallo::after{ transition:opacity .4s ease } .hallo.weg{ transform:none; opacity:0 } } /* ============================================================ 9. Blog (seit 27.09.2026): blog.html und die Artikel blog-….html Jede Blog-Seite beginnt wie die Startseite mit dem Farbband, nur niedriger. Darunter auf blog.html die Karten, auf einer Artikelseite Titel, Bild und Text. Die bunten Bilder sind keine Fotos, sondern aus CSS gebaut (bild-herkunft, bild-farben, bild-zehn). Sie wachsen mit ihrer Karte mit (container-type, Einheit cqi = Prozent der Kartenbreite). Die fünf Urteilsfarben stehen nur dort, wo es um den Faktencheck geht, wie überall auf der Seite. Alle Regler: oben bei --blog-… ============================================================ */ /* --- Das Farbband oben: rutscht unter die Kopfzeile wie auf der Startseite. Aussehen und Bewegung erbt es von .start-band (Abschnitt 1 und effekte.css). */ .blog-oben{ margin-top:calc(var(--kopf-hoehe) * -1) } .blog-band{ height:var(--blog-band-hoehe) } /* --- blog.html: die Überschrift --- */ section.blog-titel-zeile{ padding:clamp(40px,6vw,80px) 0 clamp(36px,5vw,64px) } .blog-titel-zeile h1{ font-size:clamp(52px,8.4vw,128px); line-height:.95; letter-spacing:-.028em; max-width:10ch } .blog-titel-zeile .lede{ margin-top:24px; color:var(--ink); font-size:clamp(18px,1.5vw,22px); line-height:1.45; max-width:40ch } /* --- Die Karten: oben eine große, darunter zwei nebeneinander --- */ section.blog-liste{ padding:0 } .blog-raster{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(44px,5vw,72px) var(--blog-abstand) } .blog-karte{ display:flex; flex-direction:column; gap:22px; color:var(--ink); text-decoration:none } .blog-karte.gross{ grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); align-items:center; gap:clamp(24px,4vw,64px); } .blog-karte .blog-bild{ height:var(--blog-bild-hoehe); transition:transform .45s var(--e), box-shadow .45s var(--e) } .blog-karte.gross .blog-bild{ height:var(--blog-bild-gross) } .blog-karte:hover .blog-bild{ transform:translateY(var(--blog-heben)); box-shadow:var(--brett-schatten) } /* Rubrik · Datum · Lesezeit, klein über dem Titel */ .blog-etikett{ font-family:var(--schrift-etikett); font-weight:var(--fett-etikett); font-size:11px; letter-spacing:.14em; text-transform:uppercase; line-height:1.4; color:var(--ink-3); margin:0; } .blog-etikett b{ font-weight:inherit; color:var(--marke-2) } /* h2 auf blog.html, h3 unter „Keep reading“: beide gleich groß */ .blog-karte h2, .blog-karte h3{ font-size:clamp(26px,2.4vw,34px); line-height:1.1; letter-spacing:-.016em; margin:12px 0 12px; transition:color .2s; } .blog-karte.gross h2{ font-size:clamp(34px,4.2vw,58px); line-height:1.02 } .blog-karte:hover h2, .blog-karte:hover h3{ color:var(--marke-2) } .blog-karte-text p:not(.blog-etikett){ margin:0; max-width:46ch } /* „Read the post →“: der Pfeil rückt beim Drüberfahren nach */ .blog-weiter{ display:inline-flex; align-items:center; gap:8px; margin-top:18px; font-family:var(--schrift-etikett); font-weight:var(--fett-etikett); font-size:14px; color:var(--ink); } .blog-weiter span{ transition:transform .25s var(--e) } .blog-karte:hover .blog-weiter span{ transform:translateX(4px) } /* ------------------------------------------------------------ Die Bilder ------------------------------------------------------------ */ .blog-bild{ position:relative; overflow:hidden; isolation:isolate; border-radius:var(--blog-rund); container-type:inline-size; } .blog-bild p, .blog-bild ul{ margin:0 } /* 1 — „Where did you hear that?“ und drei Fundstellen darunter */ .bild-herkunft{ background:var(--blog-bild-herkunft); color:var(--nacht); display:grid; place-content:center; justify-items:center; padding:6%; text-align:center; } .bild-herkunft .bild-frage{ font-family:var(--schrift-titel); font-weight:var(--fett-titel); font-size:clamp(26px, 8.4cqi, 76px); line-height:1; letter-spacing:-.025em; color:var(--nacht); max-width:11ch; } .bild-herkunft .bild-fundstellen{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; list-style:none; padding:0; margin-top:5cqi } .bild-fundstellen li{ display:inline-flex; align-items:center; gap:8px; font-family:var(--schrift-etikett); font-weight:var(--fett-etikett); font-size:clamp(11px, 2.6cqi, 15px); background:var(--weiss); color:var(--nacht); border-radius:var(--rund-pille); padding:.55em 1em; box-shadow:var(--blog-schatten); } .bild-fundstellen i{ width:.6em; height:.6em; border-radius:50% } .bild-fundstellen .punkt-1{ background:var(--marke-1) } .bild-fundstellen .punkt-2{ background:var(--marke-2) } .bild-fundstellen .punkt-3{ background:var(--marke-3) } /* 2 — die fünf Urteilsfarben als Textmarker-Streifen auf Nachtblau */ .bild-farben{ background:var(--blog-bild-farben); display:grid; align-content:center; padding:6% 9%; } .bild-farben span{ display:flex; align-items:center; gap:3cqi } .bild-farben span + span{ margin-top:3.2cqi } .bild-farben i{ height:max(10px, 3.6cqi); border-radius:99px; background:var(--farbe) } .bild-farben span:nth-child(1) i{ width:58% } .bild-farben span:nth-child(2) i{ width:44% } .bild-farben span:nth-child(3) i{ width:66% } .bild-farben span:nth-child(4) i{ width:36% } .bild-farben span:nth-child(5) i{ width:50% } .bild-farben b{ display:inline-flex; align-items:center; gap:.6em; white-space:nowrap; font-family:var(--schrift-etikett); font-weight:var(--fett-etikett); font-size:clamp(9px, 2.2cqi, 13px); letter-spacing:.1em; text-transform:uppercase; color:var(--weiss); background:color-mix(in srgb, var(--weiss) 12%, transparent); border-radius:var(--rund-pille); padding:.55em .9em; } .bild-farben b::before{ content:""; width:.7em; height:.7em; border-radius:50%; background:var(--farbe) } /* 3 — ein großes 10%, rot durchgestrichen, darunter „False“ */ .bild-zehn{ background:var(--blog-bild-zehn); color:var(--weiss); display:grid; place-content:center; justify-items:center; } .bild-zehn .zehn{ position:relative; font-family:var(--schrift-wucht); font-weight:900; font-size:clamp(72px, 30cqi, 220px); line-height:.9; letter-spacing:-.045em; color:var(--weiss); } .bild-zehn .zehn::after{ content:""; position:absolute; left:-7%; right:-7%; top:50%; height:.085em; border-radius:99px; background:var(--s-falsch); transform:rotate(-9deg); } .bild-zehn .falsch-schild{ display:inline-flex; align-items:center; gap:.6em; font-family:var(--schrift-etikett); font-weight:var(--fett-etikett); font-size:clamp(11px, 2.6cqi, 15px); letter-spacing:.12em; text-transform:uppercase; color:var(--u-falsch); background:var(--weiss); border-radius:var(--rund-pille); padding:.6em 1.1em; margin-top:3cqi; } .falsch-schild::before{ content:""; width:.7em; height:.7em; border-radius:50%; background:var(--s-falsch) } /* ------------------------------------------------------------ Eine Artikelseite ------------------------------------------------------------ */ .artikel-kopf{ padding-top:clamp(36px,5vw,64px); padding-bottom:clamp(32px,4vw,52px) } /* „← All posts“: der Pfeil rückt beim Drüberfahren nach links */ .zurueck{ display:inline-flex; align-items:center; gap:8px; margin-bottom:clamp(26px,3vw,40px); font-family:var(--schrift-etikett); font-weight:var(--fett-etikett); font-size:14px; color:var(--ink-2); text-decoration:none; } .zurueck span{ transition:transform .25s var(--e) } .zurueck:hover{ color:var(--ink) } .zurueck:hover span{ transform:translateX(-4px) } .artikel-kopf h1{ font-size:clamp(40px,6.2vw,92px); line-height:.98; letter-spacing:-.026em; max-width:15ch; margin:16px 0 0 } .artikel-kopf .lede{ margin-top:26px; color:var(--ink); font-size:clamp(18px,1.5vw,22px); line-height:1.45; max-width:46ch } .artikel-bild .blog-bild{ height:var(--blog-bild-artikel) } /* Der Text: eine ruhige Spalte in der Mitte */ .artikel-text{ max-width:var(--blog-lese-breite); margin:clamp(44px,6vw,84px) auto 0; font-size:var(--blog-text-groesse); } .artikel-text p{ color:var(--blog-text-farbe); line-height:1.7; margin:0 0 1.15em } .artikel-text > p:first-child{ font-size:1.14em; line-height:1.6; color:var(--ink) } .artikel-text h2{ font-size:clamp(26px,2.6vw,36px); line-height:1.12; letter-spacing:-.016em; margin:1.9em 0 .6em } .artikel-text strong{ color:var(--ink); font-weight:var(--fett-zwischen) } .artikel-text a{ color:var(--marke-2); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px } .artikel-text a:hover{ color:var(--marke-3) } .artikel-text ul{ color:var(--blog-text-farbe); line-height:1.65; padding-left:1.2em; margin:0 0 1.3em } .artikel-text ul li{ margin:0 0 .6em } .artikel-text ul li::marker{ color:var(--marke-2) } /* Die vier Schritte: runde Nummern im Logo-Verlauf */ .artikel-text ol.schritte{ list-style:none; counter-reset:schritt; padding:0; margin:.4em 0 1.5em } .schritte li{ counter-increment:schritt; position:relative; padding:0 0 0 3.1em; margin:0 0 1em; color:var(--blog-text-farbe); line-height:1.6; } .schritte li::before{ content:counter(schritt); position:absolute; left:0; top:-.1em; width:2.1em; height:2.1em; border-radius:50%; display:grid; place-items:center; font-family:var(--schrift-titel); font-weight:var(--fett-titel); font-size:.9em; color:var(--weiss); background:var(--marke-verlauf); } /* Die Legende der fünf Farben: Schild links, Bedeutung rechts. Meinung steht abgesetzt darunter, wie in der App. */ .artikel-text ul.blog-legende{ list-style:none; padding:0; margin:1.2em 0 1.4em; border-top:1px solid var(--linie) } .blog-legende li{ display:grid; grid-template-columns:11.5em minmax(0,1fr); align-items:baseline; gap:8px 18px; padding:14px 0; margin:0; border-bottom:1px solid var(--linie); } .blog-legende li.abseits{ margin-top:18px; border-top:1px dashed var(--linie-2) } .blog-legende em{ justify-self:start; display:inline-flex; align-items:center; gap:7px; font-style:normal; font-family:var(--schrift-etikett); font-weight:var(--fett-etikett); font-size:11px; letter-spacing:.1em; text-transform:uppercase; line-height:1; color:var(--textfarbe); background:color-mix(in srgb, var(--farbe) 13%, transparent); border-radius:var(--rund-pille); padding:7px 11px; } .blog-legende em::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--farbe) } /* Das Beispiel-Blatt im Mythos-Artikel. Es benutzt dieselben Bausteine wie der Faktencheck auf der Startseite (blatt, urteil), steht hier aber frei statt über dem Rand eines Boards. */ .artikel-pruefung{ margin:1.8em 0 2.2em } .artikel-pruefung .blatt{ border-radius:var(--rund-gross); margin-bottom:0; padding:clamp(18px,2vw,26px) clamp(18px,2vw,26px) clamp(8px,1vw,12px); border:1px solid var(--linie); box-shadow:var(--blog-schatten); } .artikel-pruefung .blatt-kopf{ justify-content:flex-start } .artikel-pruefung .blatt-zahl{ margin-left:auto; color:var(--ink-3); font-weight:var(--fett-etikett) } .artikel-pruefung .urteil-grund{ margin-top:2px } .artikel-pruefung figcaption{ margin-top:12px; font-size:13.5px; color:var(--ink-3) } /* Die Quellen am Ende eines Artikels */ .artikel-text section.blog-quellen{ margin-top:2.6em; padding:.4em 0 0; border-top:1px solid var(--linie) } .artikel-text .blog-quellen h2{ font-size:clamp(20px,1.8vw,24px); margin:1.2em 0 .7em } .blog-quellen ol{ margin:0; padding-left:1.3em; font-size:.86em; line-height:1.55; color:var(--blog-text-farbe) } .blog-quellen li{ margin:0 0 .7em; overflow-wrap:anywhere } /* „Keep reading“ unter dem Artikel */ section.blog-mehr{ padding:clamp(80px,10vw,140px) 0 0 } .blog-mehr h2{ font-size:clamp(34px,4vw,58px); margin:0 0 clamp(28px,3.4vw,44px) } /* Blog-Seiten haben unten dieselbe Einladung wie die Startseite */ .blog-seite section.einladung{ padding:clamp(80px,10vw,140px) 0 } @media (max-width:760px){ .blog-raster{ grid-template-columns:minmax(0,1fr) } .blog-karte.gross{ display:flex; align-items:stretch; gap:22px } .blog-karte.gross .blog-bild{ height:var(--blog-bild-hoehe) } .blog-oben .blog-band{ height:calc(var(--blog-band-hoehe) * .8) } .blog-legende li{ grid-template-columns:minmax(0,1fr) } .bild-farben{ padding:7% 8% } } @media (prefers-reduced-motion:reduce){ .blog-karte .blog-bild, .blog-weiter span, .zurueck span{ transition:none } .blog-karte:hover .blog-bild{ transform:none } } /* ============================================================ 10. Help Center (seit 27.09.2026): hilfe.html Oben das Farbband wie auf den Blog-Seiten, darunter Überschrift, Suchfeld und die Themen als Pillen. Dann die Bereiche: links die Überschrift (bleibt beim Scrollen stehen), rechts die Fragen. Das ist dieselbe Anordnung und dasselbe Bauteil (
) wie die FAQ der Startseite, Abschnitt 3. Ganz unten der Kontakt in der Karte der Einladung. Die Suche selbst: hilfe.js. ============================================================ */ section.hilfe-oben{ padding:clamp(40px,6vw,80px) 0 clamp(8px,2vw,24px) } .hilfe-oben h1{ font-size:clamp(52px,8.4vw,128px); line-height:.95; letter-spacing:-.028em; max-width:10ch } .hilfe-oben .lede{ margin-top:24px; color:var(--ink); font-size:clamp(18px,1.5vw,22px); line-height:1.45; max-width:44ch } .hilfe-oben .lede a{ color:var(--marke-2); text-underline-offset:3px } /* Das Suchfeld: eine große Pille mit Lupe links */ .hilfe-suche{ position:relative; max-width:var(--hilfe-suche-breite); margin-top:clamp(30px,3.6vw,48px) } .hilfe-suche input{ width:100%; height:var(--hilfe-suche-hoehe); padding:0 24px 0 58px; font:inherit; font-size:clamp(16px,1.35vw,19px); color:var(--ink); background:var(--papier); border:1px solid var(--linie-2); border-radius:var(--rund-pille); box-shadow:var(--blog-schatten); -webkit-appearance:none; appearance:none; transition:border-color .2s, box-shadow .2s; } .hilfe-suche input::placeholder{ color:var(--ink-3) } .hilfe-suche input:focus{ outline:none; border-color:var(--marke-2); box-shadow:0 0 0 4px var(--hilfe-suche-ring), var(--blog-schatten); } .hilfe-suche svg{ position:absolute; left:22px; top:50%; translate:0 -50%; width:20px; height:20px; pointer-events:none; fill:none; stroke:var(--ink-3); stroke-width:2.2; stroke-linecap:round; } /* Die Themen als Pillen: ein Klick springt zum Bereich */ .hilfe-themen{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:18px 0 0 } .hilfe-themen a{ display:inline-flex; align-items:center; min-height:40px; padding:0 16px; font-family:var(--schrift-etikett); font-weight:var(--fett-etikett); font-size:14px; color:var(--ink); text-decoration:none; background:var(--canvas); border:1px solid var(--linie-2); border-radius:var(--rund-pille); transition:background .2s, border-color .2s; } .hilfe-themen a:hover{ background:var(--menue-licht); border-color:var(--ink-3) } /* Ein Bereich: die FAQ-Anordnung, nur mit weniger Luft dazwischen */ section.hilfe-bereich{ padding:var(--hilfe-bereich-luft) 0 0; scroll-margin-top:var(--kopf-hoehe) } .hilfe-bereich .faq-kopf h2{ font-size:clamp(32px,3.8vw,54px); max-width:10ch; margin-bottom:12px } .hilfe-bereich .faq-kopf p:not(.kicker){ max-width:30ch; margin:0 } .hilfe-seite .frage{ scroll-margin-top:calc(var(--kopf-hoehe) + 24px) } /* Antworten mit mehreren Absätzen und Listen */ .frage .antwort{ padding:0 24px 24px; max-width:62ch } .frage .antwort p{ padding:0; margin:0 0 .8em; font-size:16.5px } .frage .antwort p:last-child{ margin-bottom:0 } .frage .antwort ol, .frage .antwort ul{ margin:0 0 .8em; padding-left:1.3em; font-size:16.5px; line-height:1.6; color:var(--ink-2) } .frage .antwort ul:last-child, .frage .antwort ol:last-child{ margin-bottom:0 } .frage .antwort li{ margin:0 0 .4em } .frage .antwort li::marker{ color:var(--marke-2) } .frage .antwort strong{ color:var(--ink); font-weight:var(--fett-zwischen) } .frage .antwort a{ color:var(--marke-2); text-underline-offset:3px } /* „Nothing found“, nur wenn die Suche nichts findet */ .hilfe-nichts{ padding-top:clamp(40px,5vw,64px) } .hilfe-nichts p{ font-size:clamp(18px,1.5vw,22px); color:var(--ink) } .hilfe-nichts a{ color:var(--marke-2); text-underline-offset:3px } /* Der Kontakt: die Adresse im Knopf nicht in Großbuchstaben */ .hilfe-seite section.hilfe-kontakt{ padding:var(--hilfe-bereich-luft) 0 clamp(80px,10vw,140px) } .hilfe-kontakt .knopf{ text-transform:none; letter-spacing:0 } @media (max-width:900px){ .hilfe-bereich .faq-kopf h2{ max-width:none } } @media (max-width:560px){ .hilfe-suche input{ padding-left:52px } .hilfe-suche svg{ left:19px } } /* Kilian, 27.09.2026: die Linie außen um den Kreis nervt. Darum aus: der äußere Rand, der umlaufende Lichtbogen und die Bahn um RealUp am Ende. Wieder an: diese drei Zeilen löschen. */ .bahn-rand{ border-color:transparent } .bahn-lauf{ display:none } .app-bahn{ display:none } /* ============================================================ 10. Rechtliches und Kontakt (seit 28.09.2026) impressum/, datenschutz/, nutzungsbedingungen/, konto-loeschen/ und kontakt/ Die Seiten liegen in Unterordnern, damit die alten Adressen (realup-app.com/datenschutz usw.) weiter funktionieren, auf die App und Play Store verlinken. Sie sehen aus wie ein Blog-Artikel (Abschnitt 9), nur ohne Bild. Alle Regler: oben bei --rechts-… und --kontakt-… ============================================================ */ /* Der Text: wie im Blog. Überschriften der Unterpunkte (2.1 …) etwas kleiner */ /* Blog-Artikel haben oben ein Bild, diese Seiten nicht: darum weniger Luft über dem Text */ .rechts-text{ margin-top:clamp(8px,1.5vw,20px) } .rechts-text h3{ font-size:clamp(19px,1.6vw,22px); line-height:1.25; margin:1.6em 0 .5em; color:var(--ink) } .rechts-text h2 + h3{ margin-top:.6em } .rechts-text code{ font-size:.88em; color:var(--ink); background:var(--canvas-2); padding:.1em .35em; border-radius:4px; word-break:break-word } /* Die Adresse: dunkler und ohne Abstand zwischen den Zeilen */ .rechts-adresse{ color:var(--ink) !important; line-height:1.6 !important } /* Der Kasten „Das Wichtigste zuerst“ */ .rechts-kasten{ background:var(--rechts-kasten-grund); border:1px solid var(--rechts-kasten-rand); border-radius:var(--rechts-kasten-rund); padding:clamp(20px,2.4vw,30px) clamp(20px,2.6vw,34px); margin:0 0 1.6em; } .rechts-kasten h2{ margin-top:0 !important; font-size:clamp(20px,1.8vw,24px) } .rechts-kasten ul, .rechts-kasten p{ margin-bottom:0 } .rechts-klein{ font-size:.82em; color:var(--ink-3) } .rechts-text [id]{ scroll-margin-top:calc(var(--kopf-hoehe) + 24px) } /* Die Tabelle „What is kept in your browser“. Auf dem Handy seitlich wischbar */ .rechts-tabelle-huelle{ overflow-x:auto; margin:0 0 1.4em; -webkit-overflow-scrolling:touch } .rechts-tabelle{ width:100%; min-width:32rem; border-collapse:collapse; font-size:.9em; line-height:1.5 } .rechts-tabelle th{ text-align:left; font-family:var(--schrift-etikett); font-weight:var(--fett-etikett); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); padding:0 14px 10px 0; border-bottom:1px solid var(--rechts-tabelle-linie); } .rechts-tabelle td{ vertical-align:top; padding:12px 14px 12px 0; border-bottom:1px solid var(--rechts-tabelle-linie); color:var(--blog-text-farbe) } .rechts-tabelle td:first-child{ white-space:nowrap } /* Seitenende: Luft bis zur Fußzeile */ .rechts-seite main{ padding-bottom:clamp(80px,10vw,140px) } /* ---------- Kontaktformular und Konto löschen ---------- */ .kontakt-form{ display:flex; flex-direction:column; gap:16px; max-width:var(--kontakt-breite); margin:0 0 1.6em } .kontakt-form[hidden]{ display:none } .kontakt-feld{ display:flex; flex-direction:column; gap:8px } .kontakt-frei{ text-transform:none; letter-spacing:0; font-weight:400 } .kontakt-nachricht{ height:var(--kontakt-feld-hoehe); padding:14px 16px; resize:vertical; line-height:1.5 } .kontakt-form .knopf{ align-self:flex-start; margin-top:4px } .kontakt-antwort{ text-align:left !important; margin:0 } .kontakt-antwort:empty{ display:none } .kontakt-klein{ font-size:.86em !important; color:var(--ink-3) !important; max-width:var(--kontakt-breite) } .kontakt-mail{ margin-top:2em } .kontakt-fertig{ max-width:var(--kontakt-breite) } .kontakt-fertig h2{ margin-top:0 } .kontakt-fertig:focus{ outline:none } /* Die Falle für Bots: aus dem Bild geschoben, aber nicht display:none (manche Bots überspringen versteckte Felder, die sollen es sehen) */ .kontakt-falle{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden } /* Konto löschen: Haken und der rote Knopf */ .loeschen-haken{ display:flex; gap:10px; align-items:flex-start; font-size:15px; color:var(--ink); cursor:pointer } .loeschen-haken input{ width:18px; height:18px; margin:2px 0 0; accent-color:var(--u-falsch); flex:none } .loeschen-knopf{ background:var(--u-falsch) } .loeschen-form .knopf.leer{ align-self:flex-start; margin-top:0 } .loeschen-form .kontakt-antwort[hidden]{ display:none } .loeschen-form [hidden]{ display:none } /* „You're logged in as …“, wenn man angemeldet löscht */ .loeschen-wer{ margin:0 !important; color:var(--ink) !important } /* ============================================================ 11. Admin (seit 28.09.2026): admin/ Nur für dich. Kacheln mit einer großen Zahl, darunter Verläufe als dünne Balken (eine Farbe, runde Oberkante, beim Drüberfahren ein Kästchen mit dem Wert) und Tabellen. Alle Regler: oben bei --admin-… ============================================================ */ .admin-seite .artikel-text{ max-width:none } .admin-kopf .knopf{ margin-top:22px } .admin-meldung{ font-size:clamp(17px,1.4vw,20px); color:var(--ink); max-width:44ch; margin:0 0 40px } .admin-meldung:empty{ display:none } .admin-meldung a{ color:var(--marke-2); text-underline-offset:3px } .admin-inhalt{ display:flex; flex-direction:column; gap:clamp(40px,5vw,64px); padding-bottom:clamp(80px,10vw,140px) } .admin-inhalt[hidden]{ display:none } /* Die Startseite gibt jedem
viel Luft. Hier nicht: die Lücken regelt .admin-inhalt (gap) */ .admin-inhalt section{ padding:0 } /* Die Kacheln */ .admin-kacheln{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px } .admin-kachel{ background:var(--admin-kachel-grund); border:1px solid var(--linie); border-radius:var(--rund-klein); padding:20px 22px } .admin-kachel-titel{ margin:0; font-family:var(--schrift-etikett); font-weight:var(--fett-etikett); font-size:11px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3) } .admin-kachel-wert{ margin:10px 0 6px; font-family:var(--schrift-titel); font-weight:var(--fett-titel); font-size:clamp(32px,3.4vw,48px); line-height:1; color:var(--ink); font-variant-numeric:tabular-nums } .admin-kachel-unter{ margin:0; font-size:13.5px; color:var(--ink-2) } /* Ein Block mit Überschrift */ .admin-block h2{ font-size:clamp(22px,2vw,28px); margin:0 } .admin-unter{ margin:4px 0 18px; font-size:14px; color:var(--ink-3) } .admin-zwei{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(28px,4vw,56px) } /* Der Verlauf: Balken auf einer Grundlinie, oben der Höchstwert */ .admin-flaeche{ position:relative; padding-top:20px } .admin-achse-oben{ position:absolute; top:0; left:0; font-size:12px; color:var(--ink-3); font-variant-numeric:tabular-nums } .admin-saeulen{ display:flex; align-items:flex-end; gap:var(--admin-balken-luecke); height:var(--admin-balken-hoehe); border-bottom:1px solid var(--linie-2); background:linear-gradient(var(--linie) 1px, transparent 1px) 0 0 / 100% 100%; /* feine Linie beim Höchstwert */ } .admin-diagramm-klein .admin-saeulen{ height:calc(var(--admin-balken-hoehe) * .5) } .admin-saeule{ flex:1 1 0; height:100%; display:flex; align-items:flex-end; cursor:default; outline:none } .admin-fuellung{ width:100%; background:var(--admin-balken-farbe); border-radius:4px 4px 0 0; transition:opacity .15s } .admin-fuellung.hat-wert{ min-height:3px } .admin-saeule:hover .admin-fuellung, .admin-saeule:focus-visible .admin-fuellung{ opacity:.7 } .admin-saeule:focus-visible{ box-shadow:inset 0 0 0 2px var(--ink) } .admin-achse-unten{ display:flex; justify-content:space-between; margin-top:8px; font-size:12px; color:var(--ink-3) } /* Das Kästchen beim Drüberfahren */ .admin-tipp{ position:fixed; z-index:60; transform:translate(-50%, calc(-100% - 8px)); pointer-events:none; background:var(--ink); color:var(--weiss); font-size:13px; padding:6px 10px; border-radius:6px; white-space:nowrap; } .admin-tipp[hidden]{ display:none } /* Tabellen */ .admin-tabelle{ width:100%; border-collapse:collapse; font-size:14.5px } .admin-tabelle th{ text-align:left; font-family:var(--schrift-etikett); font-weight:var(--fett-etikett); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); padding:0 0 8px; border-bottom:1px solid var(--linie) } .admin-tabelle td{ padding:10px 0; border-bottom:1px solid var(--linie); color:var(--ink); word-break:break-word } .admin-tabelle .zahl{ text-align:right; padding-left:14px; font-variant-numeric:tabular-nums; white-space:nowrap } .admin-block > div + div{ margin-top:26px } /* zwei Tabellen in einem Block (Plans und Usage) */ .admin-leer{ color:var(--ink-3); font-size:14.5px; margin:0 } .admin-tabelle-auf{ margin-top:14px; font-size:14px } .admin-tabelle-auf summary{ cursor:pointer; color:var(--ink-2) } .admin-tabelle-auf .admin-tabelle{ margin-top:10px; max-width:24rem } @media (max-width:900px){ .admin-kacheln{ grid-template-columns:repeat(2, minmax(0,1fr)) } .admin-zwei{ grid-template-columns:1fr } } @media (max-width:520px){ .admin-kacheln{ grid-template-columns:1fr } } /* ============================================================ 12. Handy (seit 28.09.2026) Alles, was nur am Handy gilt, an einer Stelle. Drei Teile: a) Das Handy-Menü: runder Knopf mit zwei Strichen neben „Join waitlist“, darunter klappt eine Tafel mit allen Links auf. Gebaut wird sie von menue.js („Das Handy-Menü“). „Log in“ wandert am Handy in diese Tafel. b) Die Kopfzeile bekommt beim Scrollen eine Glasfläche über die ganze Breite (bis 900px). Vorher schwebten Logo und „Log in“ frei und lagen am Handy direkt auf dem Text darunter. c) Überschriften, Absätze und Knöpfe stehen mittig (bis 900px, also auch am Tablet). Lange Texte (Blog-Artikel, Rechtliches, Antworten im FAQ) bleiben links, die liest man so leichter. d) Die Fußzeile steht am Handy ganz in der Mitte. Die 760px müssen zu HANDY.bis in menue.js passen. ============================================================ */ :root{ --handy-rand: 12px; /* Abstand der Menü-Tafel zum Fensterrand */ --handy-rund: 28px; /* Rundung der Menü-Tafel */ --handy-knopf: 38px; /* Durchmesser des runden Menü-Knopfs */ --handy-schleier: rgba(10,18,22,.32); /* Abdunklung der Seite, solange das Menü offen ist */ --handy-glas: rgba(255,255,255,.84); /* Glasfläche der Kopfzeile beim Scrollen */ --handy-glas-dunkel: rgba(14,17,51,.82); /* … über dunklen Abschnitten (--nacht, leicht durchsichtig) */ } /* Am Computer gibt es das alles nicht */ .handy-knopf, .handy-menue, .handy-schleier{ display:none } @media (max-width:760px){ /* ---------- a) Kopfzeile und Menü-Knopf ---------- */ .kopf-raster{ gap:8px } .kopf-login{ display:none } /* steht jetzt unten in der Menü-Tafel */ .leiste nav .knopf{ margin-left:0 } .leiste{ padding:0 4px 0 5px; gap:4px } .handy-knopf{ display:grid; place-items:center; flex:none; width:var(--handy-knopf); height:var(--handy-knopf); margin-left:4px; padding:0; border:0; border-radius:50%; background:transparent; color:var(--ink); cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background-color .2s; } .handy-knopf:hover, .handy-knopf[aria-expanded="true"]{ background:var(--menue-licht) } /* Zwei Striche, beim Öffnen werden sie zum Kreuz */ .handy-striche{ position:relative; width:18px; height:10px } .handy-striche i{ position:absolute; left:0; right:0; height:2px; border-radius:2px; background:currentColor; transition:transform var(--menue-zeit) var(--e), top var(--menue-zeit) var(--e); } .handy-striche i:first-child{ top:0 } .handy-striche i:last-child { top:8px } .handy-knopf[aria-expanded="true"] .handy-striche i:first-child{ top:4px; transform:rotate(45deg) } .handy-knopf[aria-expanded="true"] .handy-striche i:last-child { top:4px; transform:rotate(-45deg) } /* Angemeldet: Profilkreis rechts etwas kleiner, damit alles in eine Zeile passt */ .kopf-avatar{ --avatar-groesse:40px; font-size:14px } /* ---------- Die Menü-Tafel ---------- */ .handy-schleier{ display:block; position:fixed; inset:0; z-index:19; /* unter der Kopfzeile (20) */ background:var(--handy-schleier); opacity:0; visibility:hidden; transition:opacity var(--menue-zeit) var(--e), visibility 0s linear var(--menue-zeit); } .handy-menue{ display:block; position:fixed; z-index:21; top:calc(var(--handy-oben, 72px) + 6px); left:var(--handy-rand); right:var(--handy-rand); max-height:calc(100svh - var(--handy-oben, 72px) - 6px - var(--handy-rand)); overflow-y:auto; overscroll-behavior:contain; padding:22px 22px 18px; border-radius:var(--handy-rund); background:var(--weiss); border:1px solid var(--linie); box-shadow:0 24px 60px rgba(15,23,27,.18), 0 2px 8px rgba(15,23,27,.06); opacity:0; visibility:hidden; transform:translateY(-8px) scale(.985); transform-origin:top center; transition:opacity var(--menue-zeit) var(--e), transform var(--menue-zeit) var(--e), visibility 0s linear var(--menue-zeit); } html.handy-offen{ overflow:hidden } /* die Seite dahinter scrollt nicht mit */ html.handy-offen .handy-schleier, html.handy-offen .handy-menue{ opacity:1; visibility:visible; transform:none; transition:opacity var(--menue-zeit) var(--e), transform var(--menue-zeit) var(--e), visibility 0s; } .handy-gruppe + .handy-gruppe{ margin-top:18px; padding-top:18px; border-top:1px solid var(--linie) } .handy-kopf{ margin:0 0 8px; font-family:var(--schrift-etikett); font-weight:var(--fett-etikett); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; line-height:1.4; color:var(--ink-3); } .handy-gruppe ul{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:2px 12px } .handy-gruppe a{ display:block; margin:0 -10px; padding:9px 10px; border-radius:12px; font-family:var(--schrift-titel); font-weight:var(--fett-zwischen); font-size:18px; line-height:1.25; letter-spacing:-.01em; color:var(--ink); text-decoration:none; -webkit-tap-highlight-color:transparent; } .handy-gruppe a:active, .handy-gruppe a:hover{ background:var(--menue-licht) } /* Connect (Instagram, TikTok …) und „At launch“: kleiner, als Pillen */ .handy-gruppe.draussen ul, .handy-gruppe.spaeter ul{ display:flex; flex-wrap:wrap; gap:8px } .handy-gruppe.draussen a, .handy-gruppe.spaeter .gesperrt{ margin:0; padding:9px 14px; border-radius:var(--rund-pille); font-family:var(--schrift-etikett); font-weight:var(--fett-etikett); font-size:14px; letter-spacing:0; box-shadow:inset 0 0 0 1px var(--linie-2); } .handy-gruppe.spaeter .gesperrt{ display:inline-flex; align-items:center; gap:7px; line-height:1.25; color:var(--ink-3); box-shadow:inset 0 0 0 1px var(--linie); } .handy-unten{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:22px } .handy-unten .knopf{ width:100%; padding:0 12px } .handy-unten .knopf[hidden]{ display:none } .handy-unten .knopf:only-child, .handy-unten .knopf[hidden] + .knopf{ grid-column:1 / -1 } /* ---------- d) Fußzeile: alles untereinander in der Mitte ---------- */ .fuss-raster{ text-align:center; justify-items:center } .fuss-marke{ display:flex; flex-direction:column; align-items:center } .fuss-marke .fuss-satz{ margin-inline:auto } .sozial{ justify-content:center } nav.fuss-spalte{ align-items:center } .fuss-unten{ flex-direction:column; align-items:center; text-align:center; gap:6px } .fuss-unten small{ text-wrap:balance } /* Kontaktformular: der Knopf so breit wie die Felder darüber */ form.kontakt-form .knopf.gross{ width:100% } } /* ---------- b) Glasfläche hinter der Kopfzeile ---------- Liegt hinter Logo und Leiste (z-index:-1 im header) und reicht über die ganze Breite. Erst beim Scrollen (Klasse „fest“ von effekte.js), ganz oben bleibt das Farbband frei sichtbar. Über dunklen Abschnitten wird die Fläche dunkelblau. Gilt bis 900px, also auch am Tablet: dort lag das Logo beim Scrollen genauso auf dem Text. */ @media (max-width:900px){ header::before{ content:""; position:absolute; left:0; right:0; top:0; bottom:-6px; z-index:-1; background:var(--handy-glas); -webkit-backdrop-filter:blur(14px) saturate(1.3); backdrop-filter:blur(14px) saturate(1.3); border-bottom:1px solid var(--leiste-rand); opacity:0; transition:opacity .3s var(--e-weich), background-color .3s var(--e-weich); pointer-events:none; } header.fest::before, html.handy-offen header::before{ opacity:1 } header.fest.auf-dunkel::before{ background:var(--handy-glas-dunkel); border-bottom-color:rgba(255,255,255,.08) } /* Auf der Fläche braucht die Leiste keinen eigenen Rand und Schatten mehr */ header.fest .leiste{ box-shadow:none } /* Ist das Menü offen, bleibt die Kopfzeile hell, auch über Dunkelblau */ html.handy-offen header.auf-dunkel::before{ background:var(--handy-glas) } html.handy-offen header.auf-dunkel .marke{ color:var(--ink) } html.handy-offen header.auf-dunkel .marke-zeichen{ filter:brightness(0) } } /* ---------- c) Mittig ---------- Gilt schon bis 900px Breite: ab da stehen Überschrift und Text überall untereinander statt nebeneinander (auch am Tablet hochkant). */ @media (max-width:900px){ /* Oben: große Überschrift, zwei Absätze, zwei Knöpfe untereinander */ .start-raster{ text-align:center; justify-items:center } .start-titel{ margin-inline:auto } .start-seite{ width:100% } .start-seite p{ margin-inline:auto } /* kein einzelnes Wort allein in der letzten Zeile */ .start-seite p, .werkzeug-text p, .brett-text p, .lede, .blog-karte-text p{ text-wrap:pretty } .start-seite .tasten{ flex-direction:column; align-items:stretch; max-width:340px; margin-inline:auto } /* Die fünf Werkzeuge: Text mittig, die drei Häkchen als Block in der Mitte */ .werkzeuge .kicker, .werkzeug-text{ text-align:center } .werkzeug-titel, .werkzeug-text p{ margin-inline:auto } .werkzeug-liste{ width:fit-content; max-width:100%; margin-inline:auto; text-align:left } /* Sprung aus dem Menü (Summary, Sources …): die Überschrift nicht unter der Kopfzeile verstecken */ .werkzeug-text{ scroll-margin-top:calc(var(--kopf-hoehe) + 20px) } /* „Who it's for“ und die drei Boards */ .fuer-wen > .huelle > .kicker, .fuer-wen > .huelle > h2{ text-align:center; margin-inline:auto } .brett-text{ text-align:center } .brett-etikett, .brett-alle .brett-etikett{ align-self:center } .brett h3, .brett-text p:not(.brett-etikett){ margin-inline:auto } .brett-punkte{ justify-content:center } /* FAQ und Help Center: Überschrift mittig, Fragen bleiben links */ .faq-kopf{ text-align:center } .faq-kopf h2, .hilfe-bereich .faq-kopf p:not(.kicker){ margin-inline:auto } /* Blog, Help Center, Kontakt, Rechtliches: der Kopf jeder Seite */ .blog-titel-zeile .huelle, .hilfe-oben .huelle, .artikel-kopf{ text-align:center } .blog-titel-zeile h1, .blog-titel-zeile .lede, .hilfe-oben h1, .hilfe-oben .lede, .hilfe-suche, .artikel-kopf h1, .artikel-kopf .lede{ margin-inline:auto } .hilfe-themen{ justify-content:center } .hilfe-suche input{ text-align:left } /* die Karten in der Blog-Übersicht */ .blog-karte-text{ text-align:center } .blog-karte-text p:not(.blog-etikett){ margin-inline:auto } } /* Schmale Handys: „Join waitlist“ oben etwas kompakter */ @media (max-width:400px){ .leiste nav .knopf{ padding:0 13px; font-size:10.5px; letter-spacing:.06em } } /* Ganz schmal (iPhone SE, kleine Android): etwas weniger Rand. Und wer angemeldet ist, hat rechts den Profilkreis. Dann passen nicht alle vier in eine Zeile, und „Join waitlist“ steht nur noch unten in der Menü-Tafel (den eigenen Platz zeigt ohnehin das Menü am Profilbild). */ @media (max-width:374px){ header .kopf-raster{ padding-inline:12px } #kopf:has(.kopf-konto) .leiste nav .knopf{ display:none } #kopf:has(.kopf-konto) .handy-knopf{ margin-left:0 } } /* ============================================================ 13. Schutz vor Bots (Cloudflare Turnstile, captcha.js), seit 28.09.2026 Auf anmelden.html und konto-loeschen/. Meist bleibt der Platz leer. Nur wenn Cloudflare unsicher ist, steht hier ein Kästchen zum Anklicken. ============================================================ */ .captcha-ort{ display:flex; justify-content:center } .captcha-ort[hidden]{ display:none }