/* PaceKeeper — Startseite (PK-012). * * ERZEUGT von scripts/startseite_uebernehmen.py aus PK-Mockups Entwurf * (mockups/_quelle/startseite.html). Nicht von Hand ändern — die * Änderung wäre beim nächsten Lauf weg. Quelle ändern, Skript laufen * lassen. * * ⚠️ WARUM EIGENE DATEI UND NICHT css/styles.css: 800 Zeilen in eine * Datei zu giessen, die neun weitere Seiten laden, macht jede * Startseiten-Änderung zu einem Risiko für die Rechtstexte. * Wirkungsradius sticht Ordnungsliebe. * * ⚠️ UMBENANNT gegenüber dem Entwurf (s3--Präfix), weil es diese * Klassen im Bestand schon gibt und sie dort ANDERES bedeuten: * .brand, .hero, .pill, .dot, .lead * `.brand img` aus dem Bestand ist spezifischer als jede gleichnamige * Klasse hier und gewinnt — das hat am 2026-08-03 die Wortmarke auf * ein Quadrat beschnitten. Kein `!important`; das ist der Irrweg. */ @font-face{font-family:"Inter";src:url("./fonts/Inter-latin.woff2") format("woff2"); font-weight:100 900;font-style:normal;font-display:swap} /* ══════════════════════════════════════════════════════════════════════ ENTWURF — neue Startseite. Anlass gemessen am Ist-Zustand: Seitenhöhe 4.951 px Grundfarbe rgb(17,18,23), Helligkeit 0,006 JEDE grosse Fläche liegt zwischen 0,004 und 0,010 — es gibt auf der ganzen Startseite keine einzige helle Fläche Der App-Verlauf bedeckt 61.307 px² von 6.337.280 px² = 0,97 % und davon 61.229 px² ein EINZIGES Element: das Verlaufswort in der Überschrift. Die drei übrigen Vorkommen sind 1 px hohe Pfeile. Der Verlauf geht also nicht unter — es gibt ihn praktisch nur einmal. ZWEI REGELN, DIE DARAUS FOLGEN 1. Der Verlauf trägt FLÄCHEN, nicht ein Wort. Er kommt hier als Kopfkante jeder Karte, als volle Fläche eines Abschnitts, im Knopf, in den Symbolen und als Trennlinie vor — überall dieselbe Reihenfolge Blau → Türkis → Grün, damit er als EINE Sache wiedererkannt wird und nicht als Dekoration. 2. ⚠️ WO TEXT DARAUF STEHT, WIRD SEIN BEREICH BESCHNITTEN. Der volle Verlauf endet bei #0DD4A8 — hellem Türkisgrün. Weisser Text darauf ergibt rechnerisch rund 1,8:1 und ist unlesbar. Für Textflächen läuft deshalb --grad-tief (nur das dunkle Ende), für reine Grafik der volle Verlauf. Das ist keine Geschmacksfrage: Verläufe sind der blinde Fleck jeder Kontrastprüfung, weil der Durchschnitt besteht und der schlechteste Punkt durchfällt. HELL IST DIE GRUNDFORM, dunkel bleibt als Wahl — aber deutlich heller als heute. Der einzige wirklich dunkle Bereich ist die Fusszeile: sie ist der Schlusspunkt, nicht der Grundton. Farben aus lib/theme/app_colors.dart und pk_header_theme.dart. Kein JavaScript. Alle Zahlen und Namen erfunden. ══════════════════════════════════════════════════════════════════════ */ /* ══ DIE FARBEN KOMMEN AUS DER APP, NICHT VON MIR ═══════════════════════ Ausgelesen aus lib/theme/app_colors.dart, zone_colors.dart und widgets/pk_header/pk_header_theme.dart. Vorher standen hier eigene Webseiten-Töne (#0E1726, #3B4A5F, #DCE6F0 …), die der App nur ÄHNLICH sahen. Ähnlich ist nicht dasselbe: Wer die Werte nicht übernimmt, baut eine zweite Marke, die man nicht benennen kann. ══════════════════════════════════════════════════════════════════════ */ :root{ /* Verlauf des App-Headers — pk_header_theme.dart */ --ga:#1A6FD4; --gb:#0FB8C9; --gc:#0DD4A8; --grad:linear-gradient(100deg,var(--ga),var(--gb) 52%,var(--gc)); /* Für Flächen MIT Text. ⚠️ Hier stand zuerst der ABGEDUNKELTE Markenverlauf #1550A8 → #12608F → #0F6E6A. Er bestand mit 6,07:1, sah aber schmutzig aus, und die Messung sagt warum — nicht die Sättigung (77 %, völlig normal), sondern der Farbton am Ende: #0F6E6A liegt bei ~176°, also im Teal-Grün, und #12608F ist ein stumpfes Stahlblau. Dazu war es mit Helligkeit 0,105 der dunkelste aller geprüften Kandidaten. Wer ein Cyan abdunkelt, um Schrift lesbar zu machen, bekommt Olivgrün. Jetzt Blau → Cyan-700, ohne ins Grüne zu laufen: Helligkeit 0,147 (+40 %) · Sättigung 77 % · schlechtester Punkt 5,17:1 */ --grad-tief:linear-gradient(100deg,#2563EB,#0E7490); /* Flächen und Schrift — app_colors.dart, hell */ --bg:#FFFFFF; /* cardBackground */ --soft:#F8FAFC; /* backgroundLight */ --soft2:#F3F3F5; /* backgroundDarker */ --line:#E5E7EB; /* cardBorder (grey-200) */ --karte-rand:#E5E7EB; /* hell: der Schatten trägt, der Rand darf leise sein */ --line2:#F1F3F5; --ink:#111827; /* textPrimary */ --ink2:#4B5563; /* statusCompletedText — dunkel genug für getönte Flächen */ --muted:#6B7280; /* textSecondary */ --card:#FFFFFF; --card-sh:0 1px 2px rgba(17,24,39,.05),0 8px 26px rgba(17,24,39,.06); --auf:#FFFFFF; /* ⚠️ Die Fusszeile ist in BEIDEN Themen dunkel — sie braucht deshalb einen EIGENEN Grundton. Vorher stand hier nur --auf, und die Fusszeile wurde allein durch `html[data-theme="light"] body footer{--auf:#0E141C}` dunkel. Diese eine Regel hing am Gerüst-Umschalter: auf einer Seite ohne die Radios fiel --auf auf #FFFFFF zurück und die Fusszeile stand mit 1,48:1 hellgrau auf Weiss. Von 19 Theme-Regeln war es die einzige am HELLEN Schalter — die anderen 18 hängen am dunklen und fallen sofort auf. Jetzt gilt der Wert ohne jede Bedingung. */ --fussgrund:#0E141C; /* Marke */ --brand:#3B82F6; /* brandBlue */ --brand-gruen:#22C55E; /* brandGreen */ /* Metrikfarben — jede Messgrösse hat in der App IHRE Farbe */ --m-leistung:#3B82F6; --m-hf:#EF4444; --m-tempo:#10B981; --m-kadenz:#A855F7; --m-hoehe:#F59E0B; /* Zustände — statusPlanned / statusActive / statusCompleted / info */ --st-plan-bg:#EFF6FF; --st-plan-fg:#1D4ED8; --st-aktiv-bg:#22C55E; --st-aktiv-fg:#FFFFFF; --st-fertig-bg:#F3F4F6;--st-fertig-fg:#4B5563; --info-bg:#EFF6FF; --info-line:#BFDBFE; --info-fg:#1E40AF; /* Zonen — zone_colors.dart. Grün → Limette → Gelb → Orange → Rot. */ --z1:#22C55E; --z2:#84CC16; --z3:#FACC15; --z4:#F97316; --z5:#EF4444; --z6:#8B5CF6; --z7:#3B82F6; --zss:#14B8A6; --ok:#15803D; --ok-bg:#DCFCE7; --icu:#DD0447; /* Farbe von intervals.icu, aus deren Logo */ --r:16px; } html[data-theme="dark"] body{ /* app_colors.dart, dunkel */ --bg:#181A1F; /* darkSurface */ --soft:#131824; /* darkSurfaceVariant */ --soft2:#111217; /* darkBackground */ /* ⚠️ FUND AN DEN APP-FARBEN. darkBorder #212328 auf darkSurfaceVariant #131824 ergibt 1,13:1 — ein Rand, den man nicht sieht. Und die Karte (#181A1F) gegen denselben Grund nur 1,02:1. Im hellen Theme rettet das der Schatten; auf dunklem Grund wirkt ein Schatten nicht, und dann ist die Karte schlicht unsichtbar. Gerechnet, gegen den Grund #131824: #212328 1,13 (App-Token, zu schwach) #2B303B 1,34 #313745 1,49 #374050 1,70 ← für Karten Allgemeine Linien bleiben zurückhaltender, Kartenränder tragen mehr. */ --line:#2B303B; /* statt darkBorder #212328 — siehe oben */ --line2:#232833; --karte-rand:#374050; --ink:#E2E8F0; /* darkTextPrimary */ --ink2:#8FA1B5; /* darkTextSecondary */ --muted:#9CA3AF; /* textMuted */ --card:#181A1F; --card-sh:0 1px 2px rgba(0,0,0,.3),0 10px 28px rgba(0,0,0,.28); --auf:#0E1015; --fussgrund:#0E1015; /* ⚠️ statusPlannedTextDark #60A5FA auf statusPlannedBgDark #1E3A5F ergibt 4,52:1 — es besteht um 0,02. Fünf Stellen hängen daran: die Kapsel in der Bühne, beide Sprechblasen im KI-Gespräch und die zwei Nummernkreise. Jede spätere Anpassung an einem der beiden Werte kippt alle fünf zugleich. #6FAEFB gibt 5,00:1 — halber Punkt Reserve, dieselbe Farbe fürs Auge. */ --st-plan-bg:#1E3A5F; --st-plan-fg:#6FAEFB; /* statusPlannedDark, aufgehellt */ --st-aktiv-bg:#166534; --st-aktiv-fg:#4ADE80; /* statusActive*Dark */ --st-fertig-bg:#1F2937;--st-fertig-fg:#9CA3AF; /* statusCompleted*Dark */ --info-bg:#16233A; --info-line:#1E3A5F; --info-fg:#93C5FD; --ok:#4ADE80; --ok-bg:#0F2A1B; --icu:#FF6B8F; /* aufgehellt fürs dunkle Theme */ /* ⚠️ --grad-tief bleibt im dunklen Theme UNVERÄNDERT. Ich hatte es hier zuerst aufgehellt (#12809A/#0F8F78), damit das Band gegen den dunklen Grund deutlicher wird — und genau das drückte weissen Text auf dem hellsten Punkt auf 4,02:1, also durchgefallen. Gegen den dunklen Grund ist das dunkle Ende ohnehin klar erkennbar. Wer einen Verlauf aufhellt, um ihn sichtbarer zu machen, macht die Schrift darauf unsichtbar. */ } *{box-sizing:border-box} /* ⚠️ Es gab NULL :focus-Regeln. Wer mit der Tastatur navigiert, sah nicht, wo er ist — der Browser-Standardring wird von den eigenen Rahmen und Radien oft verschluckt. Ein sichtbarer Ring ist keine Zutat, sondern die Bedingung dafür, dass die Seite ohne Maus bedienbar ist. */ :where(a,button,input,label[for],[tabindex]):focus-visible{ outline:3px solid var(--brand);outline-offset:3px;border-radius:6px} .btn:focus-visible,.ladeknopf:focus-visible{outline-offset:4px} html{scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--ink); font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%} img{max-width:100%} h1,h2,h3{margin:0;letter-spacing:-.022em;line-height:1.15;font-weight:800} h1{font-size:clamp(32px,4.6vw,56px);letter-spacing:-.03em} h2{font-size:clamp(25px,3vw,38px)} h3{font-size:19px;letter-spacing:-.014em} p{margin:0} a{color:inherit} .wrap{max-width:1180px;margin:0 auto;padding:0 24px} /* ── Der Verlauf als wiedererkennbares Zeichen ──────────────────────── */ .gradtext{background:var(--grad);-webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent} .gradline{height:3px;background:var(--grad);border:0} .gradband{background:var(--grad-tief);color:#fff} /* Fläche MIT Text */ /* ── Gerüst (nicht Teil des Entwurfs) ───────────────────────────────── */ .scaffold{position:fixed;right:14px;bottom:14px;z-index:99;display:flex;gap:6px; background:rgba(255,255,255,.94);border:1px solid #C9D6E4;border-radius:11px;padding:6px; box-shadow:0 6px 22px rgba(14,23,38,.14); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} html[data-theme="dark"] body .scaffold{background:rgba(20,26,36,.94);border-color:#314054} .scaffold input{position:absolute;opacity:0;pointer-events:none} .scaffold label{font-size:12px;font-weight:750;padding:6px 11px;border-radius:8px;cursor:pointer; color:#3B4A5F;border:1px solid transparent} html[data-theme="dark"] body .scaffold label{color:#C2D0E0} .scaffold input:checked + label{background:#1550A8;color:#fff} /* ── Wortmarke ────────────────────────────────────────────────────── Die echten Dateien aus assets/logos/. ⚠️ „-dark“ heisst FÜR DUNKLE HINTERGRÜNDE (Füllung #F2F7FF/#20D4BE), „-light“ für helle (#102A56/ #16B8A6). Die falsche Fassung ist nicht blass, sondern unsichtbar — und der Fehler zeigt sich erst beim Umschalten, also nie beim Bauen. Deshalb liegen beide im Markup und werden per CSS geschaltet, statt dass eine per Filter umgefärbt wird. */ .s3-brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none} /* Das App-Zeichen — dasselbe Bild, das auf dem Startbildschirm steht. Genau darin liegt der Wiedererkennungswert; ein neu gezeichnetes Zeichen in Markenfarben wäre stimmiger, würde aber nichts wiedererkennbar machen. ⚠️ ZWEI GEMESSENE KOSTEN, die bleiben: 1. Die Kachel trägt einen EIGENEN Verlauf (#38ACE3 → #0C2B87). Ihr dunkelster Ton liegt 104 RGB-Einheiten vom Markenblau #1A6FD4 — auf einer Seite mit sonst exakten App-Token sieht man das. Zu lösen wäre das an der QUELLE (eine Web-Fassung des Icons in Markenfarben), nicht durch ein anderes Bild an dieser Stelle. 2. Bei 30 px überleben nur 58 % der Bildstruktur (mittlerer Kantenbetrag gegen die 512-px-Fassung). Deshalb hier 34 px statt 30 — der Schild liest sich dann, Tachostriche und Zielflagge bleiben Andeutung. Das Bild ist als quadratische Kachel gezeichnet, es verträgt keine kleinere Grösse ohne Matsch. */ .zeichen{width:34px;height:34px;border-radius:9px;display:block;flex:none} .wortmarke{height:26px;width:auto;display:block} .wm-hell{display:block} /* für HELLE Hintergründe */ .wm-dunkel{display:none} /* für DUNKLE Hintergründe */ html[data-theme="dark"] body .wm-hell{display:none} html[data-theme="dark"] body .wm-dunkel{display:block} .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:11px; font:inherit;font-weight:750;font-size:14.5px;padding:10px 17px;text-decoration:none; border:1px solid transparent;cursor:pointer;white-space:nowrap} /* ⚠️ DRITTER ANLAUF. Der Knopf trug zuerst den abgedunkelten Markenverlauf (schmutzig, weil das Ende ins Teal-Grün lief), dann Blau→Cyan — auch das gefiel nicht. Die Vermutung, die trägt: Auf 140 px Knopfbreite ist ein Farbwechsel kein Verlauf, sondern ein Fleck. Ein Verlauf braucht Fläche, um als Verlauf gelesen zu werden. Deshalb EINFARBIG, und zwar #1A6FD4 — der Anfangston des App-Header- Verlaufs. Gemessen unter allen einfarbigen Kandidaten der App-Palette: #3B82F6 3,68:1 fällt durch #1A6FD4 4,92:1 besteht, Helligkeit 0,163 ← das Hellste, das besteht #2563EB 5,17:1 besteht, Helligkeit 0,153 (mehr Reserve) #1D4ED8 6,70:1 besteht, Helligkeit 0,107 (deutlich dunkler) REGEL: Verlauf auf grossen Flächen, einfarbig auf kleinen. Das grosse Band im Abschnitt „Zugang" behält den Verlauf — dort ist genug Fläche. */ .btn--marke{background:#1A6FD4;color:#fff;box-shadow:0 2px 10px rgba(26,111,212,.3)} .btn--marke:hover{background:#1560BC} /* ⚠️ Der zweite Knopf hatte background:var(--card) — und im dunklen Theme IST --card dieselbe Farbe wie der Grund des Kopfbereichs (#181A1F). Gemessen: Fläche 1,00:1 gegen den Grund, Rand 1,32:1. Der Knopf war buchstäblich der Hintergrund mit einem kaum sichtbaren Rahmen. Jetzt ein eigener Schleier. Deckkraft gerechnet, nicht geschätzt: 4 % → 1,11:1 10 % → 1,34:1 ← genommen 8 % → 1,25:1 16 % → 1,64:1 (schon fast ein zweiter Vollknopf) Weisser Text darauf bleibt bei 10,6:1. ⚠️ UND DERSELBE FEHLER IM HELLEN THEME. Hier stand zuerst, im hellen Theme trage die weisse Fläche gegen den getönten Grund ohnehin — das war eine Annahme, die ich aufgeschrieben statt geprüft habe. Der Kopfbereich ist dort ebenfalls weiss: Fläche 1,00:1, Rand 1,24:1. Derselbe unsichtbare Knopf, nur hell. Gerechnet gegen Weiss: Fläche #F3F4F6 (statusCompletedBg der App) 1,10:1 Rand #D1D5DB 1,47:1 Beides zusammen macht ihn erkennbar, ohne dass er wie ein zweiter Hauptknopf aussieht. */ .btn--rand{border-color:#D1D5DB;color:var(--ink);background:var(--st-fertig-bg)} .btn--rand:hover{border-color:var(--ink2);background:#EAECEF} html[data-theme="dark"] body .btn--rand{background:rgba(255,255,255,.10); border-color:var(--karte-rand)} html[data-theme="dark"] body .btn--rand:hover{background:rgba(255,255,255,.16)} .btn--lg{padding:14px 24px;font-size:16px;border-radius:13px} .btn--still{color:var(--ink2);padding:10px 6px} .btn--still:hover{color:var(--ink)} /* ══ DER APP-HEADER, auf die Webseite übertragen ═══════════════════════ Ausgelesen aus lib/widgets/pk_header/ (nicht vom Bildschirm geschätzt): LinearGradient(topCenter → bottomCenter) — SENKRECHT #1A6FD4 bei 0 %, #0FB8C9 bei 60 %, #0DD4A8 bei 100 % PkArchClipper: quadratische Bézier von (0, h−18) über den Kontrollpunkt (w/2, h+18) nach (w, h−18) → der Verlauf hängt in der MITTE am tiefsten ⚠️ WEISS AUF DIESEM VERLAUF, über 1000 Stützstellen gemessen: 0 % 4,92:1 40 % 3,04:1 100 % 1,91:1 Fliesstext (4,5:1) besteht nur in den obersten 7,5 %. Grosse Schrift (3:1) besteht in den obersten 41 %. Die App löst das nicht mit Glück, sondern mit einer Regel, die man ihr ansieht, sobald man darauf achtet: Auf dem Verlauf bringt jedes kleine Element SEINEN EIGENEN GRUND mit. Die Kennzahlen sind weisse Blasen, die Bewertung „87 · Sehr gut“ hat ein eigenes grünes Feld, und der Name steht ganz oben im Blau. Auf dem hellen Mintgrün unten steht NICHTS ausser weissen Flächen. Übertragen heisst das hier: Die drei Farben, ihre Reihenfolge und die Richtung bleiben unverändert — aber das Blau wird bis 34 % GEHALTEN, damit die Textzone im Blau liegt (4,92:1). Der Verlauf läuft danach genauso nach Mintgrün aus, nur unterhalb des Textes. ═══════════════════════════════════════════════════════════════════ */ /* ⚠️ ZURÜCKGENOMMEN: Hier stand der App-Header 1:1 auf der Webseite — volles Verlaufsband, Bogen, überlappende Blasen. Das war ein Missverständnis meinerseits. Gewünscht war nicht die FORM des Headers, sondern dass die FARBEN der App auf der Webseite vorkommen. Der Kopf ist deshalb wieder eine gewöhnliche helle Leiste; das Band ist auf ein flaches Verlaufsstück zusammengeschrumpft, das den Kopf nur noch anfärbt statt ihn zu ersetzen. Was aus dem Versuch BLEIBT, weil es dort gemessen wurde: die Regel, dass auf dem Verlauf jedes Textelement seinen eigenen Grund braucht. */ /* ⚠️ Zwischen Knopfunterkante und Abschnittsende lag genau 1 px — die Knöpfe klebten auf der Trennlinie. Unten Luft, damit der Block atmet. */ /* ── Die LEISTE klebt, der Hero nicht ──────────────────────────────── ⚠️ Die Leiste steckte vorher IM .appheader — und der enthält auch den Hero mit Überschrift und Knöpfen. `position:sticky` auf .appheader hätte den halben Bildschirm mitgeklebt. Deshalb ist die Leiste jetzt ein eigener Block VOR dem Hero, und der 3-px-Verlauf wandert mit: er gehört an die Oberkante der Seite, und die ist nun die Leiste. Fixiert ändert sich auch die Rechnung zum Knopf „App laden": Solange die Leiste wegscrollte, war er doppelt — sichtbar nur, wenn der grosse Hero-Knopf ohnehin im Bild stand. Jetzt ist er der einzige Aufruf, der ÜBERALL erreichbar ist. Dafür ist „Download" aus der Navigation raus: zwei Wege zum selben Ziel, beide dauerhaft sichtbar, wäre die Doppelung nur an eine andere Stelle verschoben. */ .kopfleiste{position:sticky;top:0;z-index:60;background:var(--bg); border-bottom:1px solid transparent; transition:border-color .18s ease, box-shadow .18s ease} .kopfleiste .wrap{position:relative;z-index:2} .kopfleiste::before{content:"";display:block;height:3px;background:var(--grad)} /* Kante und Schatten erst beim Scrollen — am Seitenanfang soll die Leiste nahtlos in den Hero übergehen. */ body.gescrollt .kopfleiste{border-bottom-color:var(--line); box-shadow:0 6px 20px rgba(17,24,39,.07)} html[data-theme="dark"] body.gescrollt .kopfleiste{box-shadow:0 6px 22px rgba(0,0,0,.45)} /* ⚠️ Ohne das springt jedes Sprungziel unter die Leiste. Der Wert deckt die geschrumpfte Leiste (54) plus Luft. */ [id]{scroll-margin-top:74px} .appheader{position:relative;background:var(--bg); border-bottom:1px solid var(--line);padding:10px 0 44px} .appheader .wrap{position:relative;z-index:2} /* Das Licht aus der App: ein weicher heller Fleck oben rechts */ /* Der Verlauf bleibt als 3-px-Kante über der Leiste — das Zeichen, das die App auf jedem Bildschirm oben trägt, nur nicht als ganze Fläche. */ .appnav{display:flex;align-items:center;gap:26px;height:66px; transition:height .18s ease} /* ⚠️ Nur ab 901 px. Darunter setzt die Leiste height:auto und umbricht in zwei Zeilen — eine feste Höhe würde das ausgeklappte Menü abschneiden. Deshalb dort nur die Polsterung, nicht die Höhe. */ @media (min-width:901px){ body.gescrollt .appnav{height:54px} } @media (max-width:900px){ body.gescrollt .appnav{padding:7px 0} } .appnav .s3-brand{color:var(--ink)} .appnav .s3-brand .zusatz{font-weight:650;color:var(--muted)} .appnav .mark{background:var(--grad)} .appnav .links{display:flex;gap:22px;margin-left:14px} .appnav .links a{text-decoration:none;font-size:14.5px;font-weight:650;color:var(--ink2)} .appnav .links a:hover{color:var(--ink)} .appnav .rechts{margin-left:auto;display:flex;align-items:center;gap:10px} @media (max-width:900px){ .appnav .links{display:none} } /* ── Mobiles Menü ──────────────────────────────────────────────────── ⚠️ Vorher: `@media (max-width:900px){ .appnav .links{display:none} }` — und KEIN Ersatz. Unter 900 px war die halbe Seite unerreichbar: Wofür, In der App, KI, Geräte, Laden. Gemessen: 0 Ersatzmenüs im Dokument. Ohne JavaScript, damit die Datei eigenständig bleibt: ein Kontrollkästchen und :checked. Das Kästchen ist NICHT display:none, sondern nur aus dem Bild geschoben — sonst wäre es mit der Tastatur nicht erreichbar und das Menü nur mit der Maus zu öffnen. */ .menuschalter{position:absolute;opacity:0;width:1px;height:1px;margin:-1px; overflow:hidden;clip-path:inset(50%)} .burger{display:none;width:44px;height:44px;border-radius:11px;cursor:pointer; align-items:center;justify-content:center;border:1px solid var(--line); background:var(--card);color:var(--ink);flex:none} .burger span{display:block;width:19px;height:2px;background:currentColor;border-radius:2px; position:relative} .burger span::before,.burger span::after{content:"";position:absolute;left:0;width:19px; height:2px;background:currentColor;border-radius:2px} .burger span::before{top:-6px} .burger span::after{top:6px} .menuschalter:focus-visible ~ .appnav .burger{outline:3px solid var(--brand);outline-offset:3px} @media (max-width:900px){ .burger{display:flex} .appnav{position:relative;flex-wrap:wrap;height:auto;padding:11px 0;gap:12px} .appnav .rechts{margin-left:auto;gap:8px} /* Ausgeklappt: die Punkte stehen unter der Leiste, volle Breite, 44 px hoch */ .appnav .links{display:none;flex-direction:column;gap:0;margin:0; flex:1 1 100%;border-top:1px solid var(--line);padding-top:6px} .menuschalter:checked ~ .appnav .links{display:flex} .appnav .links a{padding:12px 4px;min-height:44px;display:flex;align-items:center; font-size:16px;border-bottom:1px solid var(--line2)} .appnav .links a:last-child{border-bottom:0} } /* ⚠️ GERECHNET, nicht geschätzt. Bei 375 px hat die Leiste 327 px innen: Burger 44 + Lücke 12 + Marke 155 + Lücke 12 + Knopf 108 = 331 Vier Pixel zu viel, und der Knopf fiel in eine zweite Zeile (Leiste 123 px statt 67). Meine erste Summe hatte 110 px für die Marke angesetzt — das war nur die Wortmarke, das App-Zeichen davor fehlte in der Rechnung. Zwei Stufen, damit das Zeichen so lange wie möglich bleibt: */ @media (max-width:420px){ .appnav .rechts .btn--still{display:none} /* steht auch in der Fusszeile */ .wortmarke{height:20px} /* Marke 155 → 130 px, Summe 306 */ } @media (max-width:360px){ /* 272 px innen — dort passt die Wortmarke nicht mehr. Das Zeichen bleibt, es ist der wiedererkennbare Teil. Summe dann 210 px. */ .appnav .wortmarke{display:none} html[data-theme="dark"] body .appnav .wortmarke{display:none} } /* ── Bühne: hell, mit den Zustandsfarben der App ────────────────────── */ /* Die Überschrift bekommt eine EIGENE, breitere Zeilenlänge als der Vorspann. Gemessen bei 56 px Schriftgrösse über sechs Textfassungen und sechs Breiten — geprüft auf die zwei echten Umbruchfehler: eine Zeile, die mit „—“ beginnt, und eine letzte Zeile mit nur einem Wort. 61 Zeichen mit Gedankenstrich → bei jeder Breite ein Fehler 54 Zeichen ohne → bei 940 px zwei saubere Zeilen: „Dein Trainingsplan und Essensplan“ / „aus denselben Daten.“ Der Gedankenstrich war die Stelle, an der es hakte: Er zog „aus“ ans Zeilenende oder rutschte selbst an den Zeilenanfang. Der VORSPANN bleibt schmal — 940 px sind zum Lesen von Fliesstext zu breit; dafür gelten 60–75 Zeichen, nicht die Breite der Überschrift. */ .heromitte{text-align:center;padding:56px 0 0;max-width:940px;margin:0 auto} /* text-wrap:balance verteilt die Zeilen gleichmässig und verhindert die Waise von selbst — bei 940 px stimmt der Umbruch von Hand, bei 900 px fiel „Daten.“ allein in die letzte Zeile. Eine feste Breite kann das nicht für jede Fensterbreite lösen, diese Regel schon. Safari kann es ab 17.4; wo nicht, bleibt der Umbruch wie ohne die Regel, also nie schlechter als vorher. */ .heromitte h1{max-width:940px;margin-left:auto;margin-right:auto; text-wrap:balance} .heromitte .herolead{max-width:58ch;margin-left:auto;margin-right:auto} .herolead{display:block;margin-top:18px;font-size:clamp(16px,1.7vw,19px);color:var(--ink2)} /* statusPlanned aus app_colors.dart — dieselbe Kapsel wie geplante Einheiten */ .heropill{display:inline-flex;align-items:center;gap:9px;border-radius:999px; padding:6px 15px 6px 9px;background:var(--st-plan-bg);color:var(--st-plan-fg); border:1px solid color-mix(in srgb,var(--st-plan-fg) 26%,transparent); font-size:13px;font-weight:750} /* statusActive — der grüne Punkt der App */ .heropill .s3-dot{width:18px;height:18px;border-radius:999px;background:var(--st-aktiv-bg); flex:none;display:grid;place-items:center} .heropill .s3-dot i{width:6px;height:6px;border-radius:999px;background:#fff;display:block} .herocta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:26px} .heronote{text-align:center;font-size:13px;color:var(--muted);margin:16px 0 0} /* Die Kennzahlen-Blasen — weisse Flächen, die den Bogen überlappen. Genau wie in der App: eigener Grund, dunkle Schrift, kein Kontrastproblem. */ /* Die Kennzahlen-Blasen aus dem Dashboard. Jede trägt ihre METRIKFARBE aus app_colors.dart im Ring — Herzfrequenz rot, Leistung blau, Kadenz violett, Höhe bernstein. Genau dafür sind diese Farben in der App da: Sie sagen, WELCHE Grösse gemeint ist. Der Wert selbst bleibt dunkel auf Weiss, sonst wäre die Farbe wieder Schrift statt Kennzeichnung. */ .blasen{display:flex;justify-content:center;gap:clamp(12px,2.4vw,26px);flex-wrap:wrap; margin-top:34px;position:relative} .blase{width:82px;height:82px;border-radius:999px;background:var(--card);display:grid; place-items:center;text-align:center;line-height:1.15; box-shadow:var(--card-sh);border:2px solid var(--mc,var(--line))} /* display:block — sonst laufen Bezeichnung, Wert und Einheit in EINE Zeile und die Blase liest sich als „PULS39BPM“. Am Bildschirm gesehen. */ .blase .v{display:block;font-size:19px;font-weight:850;color:var(--ink); font-variant-numeric:tabular-nums;line-height:1.1} .blase .e{display:block;font-size:9px;font-weight:800;color:var(--muted); letter-spacing:.06em;text-transform:uppercase;line-height:1.2} /* ⚠️ ZUM DRITTEN MAL DIESELBE FALLE, und diesmal einen Schritt nachdem ich sie im Aktivitäts-Entwurf behoben hatte: Die Bezeichnung stand hier in der METRIKFARBE. Gemessen auf Weiss: Bernstein 2,15:1, Grün 2,28:1, Blau 3,68:1 — alle durchgefallen. Diese Farben sind zum UNTERSCHEIDEN gemacht, nicht zum Lesen. Der Ring trägt die Farbe bereits; die Bezeichnung braucht sie nicht ein zweites Mal. */ .blase .n{display:block;font-size:8.5px;font-weight:800;color:var(--muted);letter-spacing:.05em; text-transform:uppercase;margin-bottom:3px;line-height:1.2} @media (max-width:640px){ .blase{width:70px;height:70px} .blase .v{font-size:16px} } /* ── Bühne (heller Teil unter dem Bogen) ────────────────────────────── */ .s3-hero{position:relative;overflow:hidden;padding:40px 0 66px} /* Der Verlauf als LICHT im Hintergrund — grosse Fläche, aber weich, damit Text darüber trotzdem seinen eigenen Grund behält. */ .s3-hero::before{content:"";position:absolute;left:50%;top:-340px;width:1500px;height:900px; transform:translateX(-50%);pointer-events:none; background: radial-gradient(620px 420px at 24% 42%, color-mix(in srgb,var(--ga) 32%,transparent), transparent 68%), radial-gradient(560px 400px at 56% 30%, color-mix(in srgb,var(--gb) 28%,transparent), transparent 66%), radial-gradient(600px 420px at 82% 52%, color-mix(in srgb,var(--gc) 30%,transparent), transparent 68%); filter:blur(28px);opacity:.5} html[data-theme="dark"] body .s3-hero::before{opacity:.42} .s3-hero .wrap{position:relative} .herogrid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center} @media (max-width:980px){ .herogrid{grid-template-columns:1fr;gap:34px} } .s3-pill{display:inline-flex;align-items:center;gap:9px;border-radius:999px;padding:6px 14px 6px 8px; background:var(--card);border:1px solid var(--line);font-size:13px;font-weight:700; color:var(--ink2);box-shadow:var(--card-sh)} .s3-pill .s3-dot{width:20px;height:20px;border-radius:999px;display:grid;place-items:center;flex:none} .s3-pill .s3-dot i{width:7px;height:7px;border-radius:999px;background:#fff;display:block} .s3-lead{font-size:clamp(16px,1.7vw,19px);color:var(--ink2);margin-top:18px;max-width:56ch} .req{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px} /* ⚠️ Die sechs Chips im Abschnitt „Auswertung" waren zusammen 578 px breit bei 544 px Platz — nur 34 px zu viel, und genau einer kippte allein in die zweite Zeile. Enger setzen würde es lösen, aber mit 8 px Reserve: das erste längere Wort bricht es wieder. Deshalb feste Dreiergruppen statt Umbruch nach Platz. max-content behält die natürliche Chip-Breite, sie werden also nicht auf gleiche Breite gezogen. */ .req--drei{display:grid;grid-template-columns:repeat(3,max-content); justify-content:start;gap:9px} @media (max-width:700px){ .req--drei{grid-template-columns:repeat(2,max-content)} } @media (max-width:420px){ .req--drei{grid-template-columns:minmax(0,1fr)} } .req span{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:650; color:var(--ink2);background:var(--soft);border:1px solid var(--line2);border-radius:999px; padding:6px 13px} .req svg{stroke:var(--ga);flex:none} html[data-theme="dark"] body .req svg{stroke:var(--gb)} /* ⚠️ Diese sechs sind BESCHRIFTUNGEN, keine Bedienelemente — auf dieser Seite gibt es kein Ziel, zu dem sie führen könnten. Als gerahmte, gefüllte Kapsel sahen sie aus wie Filter-Chips, und die sind heute fast überall anklickbar. Vom Betreiber genau so gemeldet. Der Unterschied zur Nachbargruppe (`.req` ohne --drei) ist das Häkchen: Es liest sich als ZUSTAND. Ohne Icon bleibt nur die Knopfform übrig — deshalb ist ausgerechnet diese Gruppe aufgefallen und die andere nicht. Rahmen und Füllung raus, Punkt in Markenfarbe davor: Das liest sich als Aufzählung. Ein Häkchen wäre naheliegend gewesen, verspricht aber Vollständigkeit („✓ Technik"), die hier nicht gemeint ist. Doppelte Klasse im Selektor, damit die Reihenfolge zu `.req span` egal ist — beide hätten sonst dieselbe Gewichtung. */ .req.req--drei span{background:none;border:0;padding:4px 2px;color:var(--ink2); font-weight:600} .req.req--drei span::before{content:"";width:7px;height:7px;border-radius:999px; background:var(--grad);flex:none} .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;align-items:center} .ctahint{font-size:13px;color:var(--muted);margin-top:12px} /* ── Karten mit Verlaufskante — das wiederkehrende Zeichen ──────────── */ .karte{background:var(--card);border:1px solid var(--karte-rand);border-radius:var(--r); box-shadow:var(--card-sh);overflow:hidden;position:relative} .karte::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--grad)} .karte .inh{padding:22px 24px} /* Bühnenbild: das Diagramm */ /* ⚠️ Die Karte war 301 px hoch, davon rund 81 px allein Fusstext samt Trennlinie — bei einer Aussage, die in eine Zeile passt. Dazu 44 px Reihenabstände bei 9 px hohen Balken. Gekürzt statt umgehängt: Fusstext 3 Zeilen → 1, Reihenabstand 11 → 7 px, Polsterung 20/18 → 16/14. */ .figur{padding:16px 20px 14px} .figkopf{display:flex;align-items:center;gap:10px;margin-bottom:14px} .figtitel{font-weight:800;font-size:15px} .legende{margin-left:auto;display:flex;gap:13px;font-size:12px;color:var(--muted);font-weight:650} .legende i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px} .chart{height:190px;position:relative;border-bottom:1px solid var(--line2)} .chart svg{position:absolute;inset:0;width:100%;height:100%} .achse{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted); padding-top:7px;font-variant-numeric:tabular-nums} .kennz{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line2); margin-top:14px} .kennz > div{padding:12px 4px 2px;border-right:1px solid var(--line2)} .kennz > div:last-child{border-right:0} .kennz .k{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase; color:var(--muted)} .kennz .v{font-size:21px;font-weight:850;margin-top:2px;font-variant-numeric:tabular-nums} .kennz .v small{font-size:11px;color:var(--muted);font-weight:650;margin-left:3px} /* ── KI-Abschnitt ─────────────────────────────────────────────────── Belegt, nicht behauptet: IN DER APP — aiSettings*, aiTokensLabel, aiSettingsSkipAdjustFollowingDays (KI mit Kontingent, passt Folgetage an) AUSSERHALB — mcp/index.php stellt Werkzeuge zum LESEN und SCHREIBEN bereit: training_create_single, training_patch_single, nutrition_set_week, plan_update, wellness_set_day … dazu liegt eine ChatGPT-App-Einreichung im Repo. Beide Wege standen bisher NIRGENDS auf der Seite, obwohl das Produkt „PaceKeeper AI“ heisst. */ /* ⚠️ Hier stand class="row r-2-1" — Klassen aus dem ANDEREN Entwurf, die es in dieser Datei nicht gibt. Das Raster fiel still auf Block zurück, ohne Fehler und ohne Warnung: die zwei Spalten lagen untereinander. Eine Klasse, die nicht existiert, sieht im Quelltext genauso aus wie eine, die wirkt. */ .kiraster{display:grid;grid-template-columns:1.35fr 1fr;gap:26px;align-items:start} @media (max-width:900px){ .kiraster{grid-template-columns:minmax(0,1fr)} } .chat{background:var(--card);border:1px solid var(--karte-rand);border-radius:var(--r); overflow:hidden;box-shadow:var(--card-sh)} .chat .kopfz{display:flex;align-items:center;gap:9px;padding:12px 16px; border-bottom:1px solid var(--line);font-size:12.5px;font-weight:750;color:var(--ink2)} .chat .kopfz i{width:8px;height:8px;border-radius:999px;background:var(--st-aktiv-bg);display:block} .chat .verlauf{padding:16px;display:flex;flex-direction:column;gap:12px} .blase-du,.blase-ki{max-width:88%;padding:11px 14px;border-radius:14px;font-size:14px; line-height:1.55} .blase-du{align-self:flex-end;background:var(--st-plan-bg);color:var(--st-plan-fg); border-bottom-right-radius:5px} .blase-ki{align-self:flex-start;background:var(--soft2);color:var(--ink); border:1px solid var(--line);border-bottom-left-radius:5px} .blase-ki ul{margin:9px 0 0;padding-left:0;list-style:none;display:flex; flex-direction:column;gap:6px} .blase-ki li{display:flex;gap:9px;font-size:13.5px;color:var(--ink2)} .blase-ki li svg{stroke:var(--ok);flex:none;margin-top:4px} .kiweg{display:flex;gap:13px;align-items:flex-start} .kiweg .num{width:26px;height:26px;border-radius:999px;background:var(--st-plan-bg); color:var(--st-plan-fg);font-size:12px;font-weight:850;display:grid;place-items:center;flex:none} .kiweg h3{font-size:16px;margin-bottom:5px} .kiweg p{font-size:14.5px;color:var(--ink2)} /* ── Abschnitte: Rhythmus statt einer Fläche ────────────────────────── */ .abschnitt{padding:78px 0} .abschnitt--soft{background:var(--soft)} .abschnitt--soft2{background:var(--soft2)} .kopf{max-width:62ch;margin-bottom:34px} /* ⚠️ Stand hier zuerst als `.kopf .augen` — und drei der sechs Marken stehen gar nicht in einem .kopf. Die drei waren die ganze Zeit unformatiert ausgeliefert. Ein Kontrastprüfer findet so etwas nie: unformatierter Text hat weiterhin Kontrast. Gefunden erst, als ich gezählt habe, wo die Klasse überhaupt vorkommt. */ /* ⚠️ ZWEITER ANLAUF. Erst stand die Marke bei 12 px gegen eine 38-px-Über- schrift (Verhältnis 0,32), dann bei 14 px — immer noch zu klein, weil das Problem nicht die Schriftgrösse war: Ein 34 px kurzer Strich neben einem Wort TRENNT nichts, er verziert nur. Ein Trenner muss die Breite nehmen, sonst ist er keiner. Jetzt: Name links, Verlaufslinie läuft bis zum Rand durch. Die Änderung braucht kein neues Markup — `i` wird per order nach hinten gestellt und gedehnt, das Name bleibt wie es ist. */ /* ⚠️ line-height:1 ist hier kein Feinschliff, sondern die URSACHE einer scheinbaren Fehlausrichtung. Gemessen: Kartenoberkante und Kastenoberkante der Marke lagen auf EXAKT derselben Höhe (0 px) — die Grossbuchstaben von „AUSWERTUNG" sassen aber tiefer im Zeilenkasten. Die Karte richtete sich am Kasten aus, das Auge an der Schrift. Mit line-height:1 umschliesst der Kasten die Buchstaben, und beide Ausrichtungen fallen zusammen. */ .augen{display:flex;width:100%;align-items:center;gap:16px;font-size:15px;font-weight:850; line-height:1;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2); margin-bottom:22px} .augen i{order:2;flex:1 1 auto;width:auto;height:4px;border-radius:2px; background:var(--grad);display:block; /* nach rechts auslaufen, damit die Linie endet statt abzubrechen */ -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 62%,transparent 100%); mask-image:linear-gradient(90deg,#000 0%,#000 62%,transparent 100%)} /* Im Kopf eines Abschnitts darf die Linie nicht über die Textspalte hinaus */ .kopf .augen{max-width:100%} /* Auf dem Verlaufsband: weisse Schrift, weisse Linie */ .augen--auf{color:rgba(255,255,255,.9)} .augen--auf i{background:#fff;opacity:.75} .kopf p{color:var(--ink2);margin-top:13px;font-size:16.5px} .zwei{display:grid;grid-template-columns:repeat(2,1fr);gap:20px} .drei{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} @media (max-width:900px){ .zwei,.drei{grid-template-columns:1fr} } /* ⚠️ Gemessen: das Zeichen füllte nur 48 % der Kachel, der Rest war Luft — und die Kachel selbst war mit 42 px kaum doppelt so hoch wie die Überschrift daneben. Zwei zaghafte Werte übereinander ergeben ein unscheinbares Symbol. Jetzt 54 px Kachel, Zeichen auf 58 %, dickerer Strich, und ein Schlagschatten in der Markenfarbe, damit es als Gegenstand liest und nicht als Aufkleber. */ .karte h3{margin-bottom:8px} .karte .txt{color:var(--ink2);font-size:15px} .liste{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:8px} .liste li{display:flex;gap:10px;font-size:14.5px;color:var(--ink2)} .liste svg{stroke:var(--ok);flex:none;margin-top:4px} /* Bildplätze */ /* ⚠️ Der echte Screenshot hat 0,83, die Kachel 9:16 = 0,56. Ein Bild in einen fremden Rahmen zu zwingen heisst verzerren oder 31 % abschneiden. Deshalb: die KACHEL zeigt den oberen Ausschnitt (object-position:top — dort steht der Verlaufskopf, der wiedererkennbare Teil), und beim Klick erscheint das Bild VOLLSTÄNDIG und unbeschnitten. So bleibt die Reihe ruhig und trotzdem geht nichts verloren. */ .shots{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} @media (max-width:900px){ .shots{grid-template-columns:1fr} } .shotbild img{width:100%;height:auto;display:block} /* volle Breite, oben bündig */ /* ── Hell und Dunkel sind ZWEI AUFNAHMEN, kein Filter ──────────────── Hier stand eine Dämpfung auf brightness(.72) — die hellen Aufnahmen, abgedunkelt. Das war messbar falsch: Der Dunkelmodus ist nicht „dasselbe, nur dunkler", er ist UMGEKEHRT. App-Token gedimmt echt Abstand Karte #FFFFFF #B4B4B4 #181A1F 459 RGB Text #111827 #131822 #E2E8F0 621 RGB Die Textzeile ist der Beweis: im Dunkelmodus ist Schrift HELL, und Abdunkeln macht dunkle Schrift nur dunkler — genau verkehrt. Dazu sass die gedimmte Kachel mit 8,6:1 Helligkeitssprung auf dem dunklen Grund, wo die echte Karte bei 1,02:1 liegt: ein grauer Leuchtkasten. ⚠️ invert() scheidet ebenso aus, und zwar nachgerechnet: der Markenverlauf kippt von 213°/167° auf 33°/347°, also von Blau-Türkis nach Orange-Pink. intervals.icu-Rot würde Minzgrün. Deshalb jetzt sechs Dateien statt drei. Ausschnitt und Seitenverhältnis je Paar identisch (0,835 / 0,934 / 0,817), damit beim Umschalten des Themes nichts springt. */ .shotbild img.bild-dunkel, .gross img.bild-dunkel{display:none} html[data-theme="dark"] body .shotbild img.bild-hell, html[data-theme="dark"] body .gross img.bild-hell{display:none} html[data-theme="dark"] body .shotbild img.bild-dunkel{display:block} html[data-theme="dark"] body .gross img.bild-dunkel{display:block} /* ── Vergrössern, ohne JavaScript ──────────────────────────────────── Kontrollkästchen + :checked. Die Kästchen sind NICHT display:none, sondern nur aus dem Bild geschoben — sonst wären sie mit der Tastatur nicht erreichbar und die Bilder liessen sich nur mit der Maus öffnen. */ .lupe{position:absolute;opacity:0;width:1px;height:1px;margin:-1px; overflow:hidden;clip-path:inset(50%)} .shotbild{cursor:zoom-in;position:relative} .shotbild::after{content:"Vergrössern";position:absolute;right:9px;bottom:9px; background:rgba(17,24,39,.72);color:#fff;font-size:11px;font-weight:750; padding:4px 9px;border-radius:999px;opacity:0;transition:opacity .15s ease; pointer-events:none} .shot:hover .shotbild::after{opacity:1} .lupe:focus-visible ~ .shot .shotbild{outline:3px solid var(--brand);outline-offset:2px} .lupe:focus-visible ~ .shot .shotbild::after{opacity:1} .gross{position:fixed;inset:0;z-index:80;display:none;place-items:center; background:rgba(9,14,24,.86);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); padding:32px;cursor:zoom-out} /* ⚠️ max-height:100% löst sich hier NICHT gegen das Fenster auf — gemessen: das Bild wurde 1376×1648 dargestellt und lief unten aus dem Bild. In einem Raster bezieht sich das Prozent auf die Rasterfläche, und die wächst mit dem Inhalt. Deshalb ausdrücklich in Fenstereinheiten rechnen. */ .gross img{max-width:calc(100vw - 64px);max-height:calc(100vh - 64px); width:auto;height:auto;display:block; border-radius:12px;box-shadow:0 24px 70px rgba(0,0,0,.5)} .gross .zu{position:absolute;top:18px;right:22px;color:#fff;font-size:13px; font-weight:750;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.34); border-radius:999px;padding:7px 14px;white-space:nowrap} /* ⚠️ Das ✕ steht in der GESTALTUNG, nicht im Text — auf Hinweis von PK-PLAN (Ref: PK-012). Der Knopftext wird ein Übersetzungswert und geht später in sechzehn Sprachen. Die Wachen prüfen Element-Bilanz und Attributfolge; ein ZEICHEN IM TEXT ist beides nicht. Liesse ein Übersetzer es weg, hätte der Knopf kein Symbol mehr, und keine Wache würde es merken — es wäre die einzige Stelle der Seite ohne Absicherung. In der Regel kann es niemand versehentlich übersetzen, und der Wert heisst schlicht „Schliessen". ⚠️ white-space:nowrap ist dabei nicht Zierrat: Ohne sie rutschte das ✕ auf eine ZWEITE ZEILE — die Kapsel war 100×58 px statt 100×31. Sichtbar war es nur an der Höhe; die Bereichsmessung meldete „einzeilig", weil sie Pseudo-Elemente gar nicht sieht. */ .gross .zu::after{content:" ✕"} #lupe1:checked ~ .gross--1, #lupe2:checked ~ .gross--2, #lupe3:checked ~ .gross--3{display:grid} .shot{border-radius:var(--r);overflow:hidden;border:1px solid var(--karte-rand);background:var(--card); box-shadow:var(--card-sh)} /* ── Die Kachel zeigt das Bild in VOLLER BREITE, oben bündig ────────── Vorher lief hier object-fit:cover. Das skaliert auf die HÖHE und schneidet seitlich — und weil alle drei Bilder im Verhältnis breiter sind als eine 3:4-Kachel (0,82 / 0,84 / 0,93 gegen 0,75), fehlte jedes Mal Breite. Jetzt umgekehrt: die Breite ist gesetzt, die Höhe ergibt sich, und was unten nicht mehr passt, wird abgeschnitten. Das Kachelverhältnis muss dafür BREITER sein als das breiteste Bild, sonst bliebe unten Platz frei statt zu schneiden. Gerechnet: breitestes Bild 0,93 (Einheit) 3:4 = 0,75 und 4:5 = 0,80 → zu schmal, Lücke unten 1:1 = 1,00 → schneidet unten ab, wenig 5:4 = 1,25 → schneidet die Hälfte weg Also 1:1. */ .shotbild{aspect-ratio:1/1;display:block;position:relative; background:var(--soft2);overflow:hidden} .shotbild::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--grad)} /* --muted (#6B7280) besteht auf einer KARTE (4,83:1), aber nicht auf dem getönten Grund #F3F3F5 (4,36:1). Derselbe Token, zwei Urteile — deshalb hier --ink2. Das ist eine Eigenschaft der App-Farben, kein Zufall. */ .shotbild span{font-size:12.5px;color:var(--ink2);font-weight:700;text-align:center;padding:0 18px} .shot .bu{padding:14px 16px 16px;font-size:14px;color:var(--ink2);border-top:1px solid var(--line2)} .shot .bu b{color:var(--ink);display:block;margin-bottom:3px;font-size:14.5px} /* ── intervals.icu: die eine Ausnahme von der Einfarbigkeit ────────── PaceKeeper AI liest und schreibt über intervals.icu. Ohne sie gäbe es das Produkt nicht — das gehört auf die Seite, nicht in eine Fussnote. Die App sagt es schon: „Daten & Metriken – mit Dank an intervals.icu“ (app_de.arb: dashboardDataMetricsWithThanks). Die Webseite sagte es bisher nirgends. ⚠️ Dank ist keine Partnerschaft. Deshalb steht ausdrücklich dabei, dass PaceKeeper AI kein Produkt von intervals.icu ist — sonst liest sich die Hervorhebung als Empfehlung durch sie, und die gibt es nicht. #DD0447 ist ihre Farbe, aus intervals_logo_round.svg ausgelesen. */ .icu{display:flex;align-items:center;gap:20px;background:var(--card); border:1px solid var(--karte-rand);border-left:4px solid var(--icu); border-radius:var(--r);padding:18px 22px;margin-bottom:22px;box-shadow:var(--card-sh)} .icu img{width:52px;height:52px;flex:none;border-radius:12px} .icu .txt{min-width:0} .icu .kopf{font-weight:800;font-size:16px;margin-bottom:4px} .icu .kopf b{color:var(--icu)} .icu .txt p{font-size:14.5px;color:var(--ink2)} .icu .txt .klein{font-size:12.5px;color:var(--muted);margin-top:7px} @media (max-width:640px){ .icu{flex-direction:column;align-items:flex-start;gap:13px} } /* Logowand — einfarbig. Farbe würde Partnerschaft behaupten. */ .logos{display:grid;grid-template-columns:repeat(8,1fr);gap:12px} @media (max-width:1100px){ .logos{grid-template-columns:repeat(5,1fr)} } @media (max-width:760px){ .logos{grid-template-columns:repeat(3,1fr)} } @media (max-width:520px){ .logos{grid-template-columns:repeat(2,1fr)} } .logo{background:var(--card);border:1px solid var(--karte-rand);border-radius:12px;height:70px; display:grid;place-items:center;padding:0 14px} /* Dieselbe Behandlung wie auf der heutigen Webseite (css/styles.css:3578): grayscale + brightness(0) macht aus jedem Logo eine SILHOUETTE. Das ist nicht Geschmack — farbige Fremdlogos behaupten eine Partnerschaft, die es nicht gibt. Im dunklen Theme zusätzlich invert(1), sonst wäre Schwarz auf Schwarz unsichtbar. */ /* ⚠️ Vorher stand hier max-height:26px mit width:auto — die Bilder LADEN damit korrekt (naturalWidth 617), bekommen aber Layoutgrösse 0×0 und sind unsichtbar. „Geladen“ und „sichtbar“ sind zwei verschiedene Messungen; die erste zu prüfen und die zweite anzunehmen, hat mich hier zweimal in die Irre geführt. Feste Box + object-fit ist berechenbar, und sie bringt nebenbei alle 16 Marken auf dieselbe optische Grösse — sonst erschlägt ein breiter Schriftzug ein quadratisches Zeichen. */ .logo img{width:100%;height:28px;object-fit:contain; filter:grayscale(1) brightness(0);opacity:.66; transition:opacity .16s ease,filter .16s ease} .logo:hover img{opacity:.9} html[data-theme="dark"] body .logo img{filter:grayscale(1) brightness(0) invert(1);opacity:.62} html[data-theme="dark"] body .logo:hover img{opacity:.85} /* ⚠️ DREI DATEIEN VERTRAGEN brightness(0) NICHT — gemessen am Alphakanal: garmin_connect.jpg 0,0 % durchsichtige Pixel (JPEG kann es nicht) hammerhead.png 0,0 % (Palette ohne tRNS) strava.png 16,7 % die zwölf übrigen 46–77 % Bei einem undurchsichtigen Bild färbt brightness(0) das ganze RECHTECK schwarz, nicht die Zeichnung darin. Aus dem Logo wird ein Kasten. Für diese drei stattdessen multiply: auf einer weissen Karte verschwindet der helle Bildhintergrund, die Zeichnung bleibt. Im dunklen Theme entsprechend invertiert und screen. Dasselbe gilt für die LIVE-Webseite: css/styles.css:3578 benutzt denselben Filter auf dieselben Dateien. Wert einer Prüfung dort. */ .logo--fest img{filter:grayscale(1) contrast(1.05); mix-blend-mode:multiply;opacity:.72} .logo--fest:hover img{opacity:.95} html[data-theme="dark"] body .logo--fest img{ filter:grayscale(1) invert(1) contrast(1.05); mix-blend-mode:screen;opacity:.7} /* Verlaufsband — der eine Abschnitt, der ganz aus dem Verlauf besteht */ .band{position:relative;overflow:hidden;padding:66px 0} .band::after{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(700px 300px at 78% 22%, rgba(255,255,255,.16), transparent 62%)} .band .wrap{position:relative;z-index:1} .band h2{color:#fff} .band p{color:rgba(255,255,255,.92)} /* ⚠️ align-items:center hängte die Merkmalsliste mittig ein — bei 263 px Textspalte gegen 129 px Liste sass sie 67 px tiefer als die Überschrift, also scheinbar willkürlich in der Luft. Oben ausrichten. */ .bandgrid{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:start} @media (max-width:900px){ .bandgrid{grid-template-columns:1fr;gap:26px} } /* Standhinweis statt Store-Knöpfen — siehe Kommentar im Markup. */ .stand{margin-top:24px;max-width:46ch} .standmarke{display:inline-flex;align-items:center;gap:8px;border-radius:999px; padding:6px 14px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4); font-size:13px;font-weight:750;color:#fff} .stand p{margin-top:12px;font-size:15px;color:rgba(255,255,255,.92)} .btn--auf{background:#fff;color:#123E7E} .btn--auf:hover{filter:brightness(.96)} .btn--rand-auf{border-color:rgba(255,255,255,.5);color:#fff} .btn--rand-auf:hover{border-color:#fff} .bandliste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px} .bandliste li{display:flex;gap:11px;color:rgba(255,255,255,.94);font-size:15px;font-weight:600} .bandliste svg{stroke:#fff;flex:none;margin-top:4px} /* Hinweiskarte */ .hinweis{border-left:4px solid var(--ga);background:var(--soft);border-radius:0 12px 12px 0; padding:18px 20px;color:var(--ink2);font-size:15px} .hinweis b{color:var(--ink)} .fussgrid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px;padding:44px 0 30px} @media (max-width:900px){ .fussgrid{grid-template-columns:1fr 1fr;gap:26px} } .fussmarke{display:flex;align-items:center;gap:10px;font-weight:850;color:#fff;font-size:16px; margin-bottom:12px} .fusstext{font-size:13.5px;color:#93A9C2;max-width:34ch} .fussunten{border-top:1px solid #223047;padding:16px 0 24px;display:flex;flex-wrap:wrap;gap:14px; align-items:center;font-size:12.5px;color:#8FA5BE} .fussunten .rechts{margin-left:auto;display:flex;gap:16px;flex-wrap:wrap} /* ══ DREI WEGE, GLEICH OBEN ═════════════════════════════════════════ „Nur Training / Nur Ernährung / Oder beides" vor den zwei Karten. Die Produktidee soll in zwei Sekunden dastehen, nicht erst nach dem Lesen von zwei Absätzen. */ /* ══ ZAHLEN AUF DER EINHEITENKARTE ═══════════════════════════════════ ⚠️ Erfundene Werte, die aber ZUSAMMENHÄNGEN: 53:47 bei NP 158 und TSS 50 ergibt IF 0,747 und damit eine FTP von rund 212 W; VI 1,08 passt zu Intervallen. Wer sie ändert, muss nachrechnen — Sportler lesen genau solche Zahlen gegen. ØHF 142 statt der vorgeschlagenen 125: 125 setzt eine Schwellen-HF von rund 151 voraus. Möglich, aber die meisten lesen 125 als Grundlage, nicht als Sweet Spot. */ .werte{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;margin:11px 0 3px; border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);padding:11px 0} @media (max-width:520px){ .werte{grid-template-columns:repeat(3,1fr);row-gap:12px} } .wert{text-align:center} .wert b{display:block;font-size:17px;font-weight:820;color:var(--ink); font-variant-numeric:tabular-nums;line-height:1.15} .wert span{display:block;font-size:10.5px;font-weight:750;letter-spacing:.07em; text-transform:uppercase;color:var(--muted);margin-top:3px} /* ══ WARUM PACEKEEPER ════════════════════════════════════════════════ ⚠️ Die linke Spalte sagt bewusst NICHT „andere Apps machen X falsch". Behauptungen über fremde Produkte sind vergleichende Werbung und müssen belegbar sein (UWG § 6). Sie wären es hier nicht — und ausgerechnet intervals.icu, von dem PaceKeeper abhängt, wäre mit „zeigt nur TSS" falsch beschrieben. Formuliert ist deshalb die VERBREITETE ARBEITSWEISE, nicht ein Mitbewerber. */ .warum{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:26px} @media (max-width:820px){ .warum{grid-template-columns:1fr} } .wkarte{background:var(--card);border:1px solid var(--karte-rand);border-radius:var(--r); box-shadow:var(--card-sh);padding:22px 24px 18px} .wkarte h3{margin:0 0 6px;font-size:17.5px;font-weight:800;color:var(--ink)} .wkarte .unter{margin:0 0 10px;font-size:13.5px;color:var(--muted)} .wzeile{display:grid;grid-template-columns:24px 1fr;gap:11px;align-items:start; font-size:15px;line-height:1.55;padding:10px 0} .wzeile + .wzeile{border-top:1px solid var(--line2)} .wzeile i{width:22px;height:22px;border-radius:999px;display:grid;place-items:center; font-style:normal;font-size:12px;font-weight:900;margin-top:1px} .wneg{color:var(--ink2)} .wneg i{background:var(--soft2);color:var(--muted);border:1px solid var(--line)} .wpos{color:var(--ink);font-weight:600} .wpos i{background:rgba(16,185,129,.17);color:#047857} html[data-theme="dark"] body .wpos i{color:#6EE7B7} /* ══ EIN TAG MIT PACEKEEPER ══════════════════════════════════════════ */ .tag{margin-top:28px} .tagzeile{display:grid;grid-template-columns:70px 26px 1fr;gap:16px;align-items:start; padding:0 0 20px} @media (max-width:560px){ .tagzeile{grid-template-columns:56px 22px 1fr;gap:11px} } .tagzeit{font-size:14px;font-weight:820;color:var(--ink);text-align:right; font-variant-numeric:tabular-nums;padding-top:11px} /* ⚠️ align-self:stretch ist hier tragend, nicht Zierrat. Die Zeile steht auf align-items:start, also war die Spur nur so hoch wie ihr Inhalt — Punkt plus Polsterung, rund 25 px. Die Linie darunter rechnet aber gegen die HÖHE DIESES KÄSTCHENS, nicht gegen die Zeile. Sie hörte deshalb kurz unter dem Punkt auf, während die Zeile 90 px hoch war. Gestreckt füllt die Spur die Zeile, und bottom:-20px überbrückt genau die 20 px Zeilenpolsterung bis zum nächsten Punkt. */ .tagspur{position:relative;display:flex;justify-content:center;padding-top:14px; align-self:stretch} .tagspur .punkt{width:11px;height:11px;border-radius:999px;background:var(--grad); flex:none;z-index:1} /* Die Linie hört bei der letzten Zeile auf, sonst läuft sie ins Nichts. */ /* ⚠️ Die -34 px sind GERECHNET, nicht probiert. Bis zum nächsten Punkt liegen zwei Abstände: die 20 px Polsterung unten an .tagzeile und die 14 px Polsterung oben in der nächsten .tagspur. Mein erster Wert -20 deckte nur den ersten — gemessen blieben exakt 14 px Lücke, in allen sechs Zeilen gleich. Wer eine der beiden Polsterungen ändert, muss diesen Wert mitziehen; die Summe steht deshalb hier. */ .tagspur::after{content:"";position:absolute;top:19px;bottom:-34px;width:2px; background:var(--line);left:50%;transform:translateX(-50%)} .tagzeile:last-child .tagspur::after{display:none} .tagtext{background:var(--card);border:1px solid var(--karte-rand);border-radius:13px; padding:12px 16px;box-shadow:var(--card-sh)} .tagtext b{display:block;font-size:15.5px;font-weight:750;color:var(--ink)} .tagtext span{display:block;font-size:14px;color:var(--ink2);margin-top:3px;line-height:1.5} /* ══ BILDPLATZ ═══════════════════════════════════════════════════════ ⚠️ Ich kann keine Fotos lizenzieren. Hier steht deshalb der PLATZ mit dem richtigen Seitenverhältnis und der Angabe, was hineingehört. Ein erfundenes oder irgendwo geholtes Bild wäre schlimmer als ein leerer Platz: Es sähe fertig aus und wäre ungeklärt. */ /* ══ STIMMUNGSBILDER MIT KENNZEICHNUNG ═══════════════════════════════ ⚠️ Das Abzeichen liegt ÜBER dem Bild, es steckt nicht in der Datei. Zwei Gründe: Es überlebt einen Bildtausch, und es lässt sich in einem Zug entfernen, falls die Bilder später durch echte Fotos ersetzt werden — dann wäre die Kennzeichnung schlicht falsch. „KI erzeugt", nicht „AI": Die Seite ist deutsch, und das Produkt heisst „PaceKeeper AI". Stünde „AI" auch auf den Bildern, läse es sich wie eine Produktkennzeichnung statt wie ein Hinweis. */ .stimmung{position:relative;border-radius:var(--r);overflow:hidden; border:1px solid var(--karte-rand);box-shadow:var(--card-sh); aspect-ratio:3/2;background:var(--soft2)} .stimmung img{width:100%;height:100%;object-fit:cover;display:block} .stimmung figcaption{position:absolute;left:0;right:0;bottom:0; padding:26px 15px 13px;font-size:13.5px;line-height:1.45;color:#fff; background:linear-gradient(to top,rgba(6,12,22,.86),rgba(6,12,22,.62) 55%,transparent)} /* Weiss auf rgba(6,12,22,.86) über einem HELLEN Bildbereich ergibt noch 6,9:1 — der Verlauf ist unten am dichtesten, wo der Text steht. */ .kibadge{position:absolute;top:11px;right:11px;display:inline-flex;align-items:center; gap:6px;padding:5px 11px 5px 8px;border-radius:999px; background:rgba(9,14,24,.78);color:#fff;font-size:11.5px;font-weight:750; letter-spacing:.02em;white-space:nowrap; -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)} .kibadge svg{width:13px;height:13px;flex:none;fill:none;stroke:#7FD9CE; stroke-width:1.9;stroke-linecap:round} /* ══ WOFÜR: DREI TEILE, EINE FLÄCHE ══════════════════════════════════ ⚠️ ZWEITER AUFBAU. Vorher: Überschrift „Zwei Hälften", darunter eine Optionsleiste „Nur Training / Nur Ernährung / Oder beides", darunter zwei Karten. Dieselbe Aussage dreimal — und die Optionsleiste sah trotz entfernter Rahmen weiter nach Auswahl aus, obwohl sie nichts tut. ⚠️ „Zwei Hälften" ist ausserdem sachlich schädlich: Es sagt, dass jede Seite für sich unvollständig sei. Die reinen Ernährungsnutzer sind eine eigene Zielgruppe — denen darf die Seite nicht sagen, sie bekämen eine halbe Sache. Jetzt zeigt die Anordnung selbst, worum es geht: zwei eigenständige Seiten und in der Mitte, was daraus entsteht. */ /* ⚠️ Mitte 12 % schmaler als im ersten Wurf (236 → 208 px). Sie war visuell zu dominant — Training und Ernährung sind die Hauptsache, die Verbindung ist die Zugabe. Die Fläche darf das nicht umdrehen. */ .dreiteil{display:grid;grid-template-columns:1fr minmax(168px,208px) 1fr; gap:0;margin-top:26px;align-items:stretch; border:1px solid var(--karte-rand);border-radius:var(--r);overflow:hidden; background:var(--card);box-shadow:var(--card-sh)} @media (max-width:900px){ .dreiteil{grid-template-columns:1fr} } .dt{padding:24px 26px 26px;display:flex;flex-direction:column} .dt h3{margin:0 0 7px;font-size:19px;font-weight:800;color:var(--ink)} .dt .txt{color:var(--ink2);font-size:15px;line-height:1.6;margin:0 0 16px} /* ══ MINI-BEISPIELE STATT SCREENSHOT-STREIFEN ════════════════════════ ⚠️ DRITTER ANLAUF an dieser Stelle. Erst grosse Screenshot-Köpfe, dann schmale Streifen — beide zeigten vor allem ZAHLEN, während der Abschnitt den NUTZEN erklären soll. Ausserdem wirkten die Ausschnitte zufällig: Distanz und Höhenmeter belegen nicht, dass ein Plan auf Absagen reagiert. Jetzt in HTML gebaute Beispiele. Sie sehen aus wie Teile der App, sind aber ruhig, scharf und in jeder Grösse lesbar — ein Screenshot ist das nie, wenn er klein genug ist, um daneben zu passen. ⚠️ Beide Karten sind EINZELN lesbar. Der Vorschlag lautete, sie inhaltlich zu verketten („Einheit verschoben" → „Tagesplan angepasst"). Das erzählt zwar eine Geschichte, setzt aber rechts ein Training voraus. Wer nur die Ernährung nutzt — eine eigene Zielgruppe, deretwegen „Zwei Hälften" gestrichen wurde — läse dort einen Bezug auf etwas, das er nicht hat. Deshalb zweimal dieselbe AUSSAGE (der Plan weicht der Wirklichkeit aus), einmal an einer Absage, einmal an einer Schicht. */ .mini{margin-top:auto;padding-top:20px} .mini > b{display:block;font-size:11px;font-weight:750;letter-spacing:.08em; text-transform:uppercase;color:var(--muted);margin-bottom:8px} .minikarte{position:relative;overflow:hidden;border:1px solid var(--line2); border-radius:12px;background:var(--soft);padding:13px 15px 14px 17px} /* Der Farbakzent sitzt in der KANTE, nicht in der Schrift (Befund 5). */ .minikarte::before{content:"";position:absolute;inset:0 auto 0 0;width:3px} .mini--tr .minikarte::before{background:var(--m-leistung)} .mini--er .minikarte::before{background:#10B981} .minikopf{display:flex;align-items:center;gap:8px;margin-bottom:7px} .minikopf svg{width:15px;height:15px;flex:none;fill:none;stroke-width:1.9; stroke-linecap:round;stroke-linejoin:round} .mini--tr .minikopf svg{stroke:var(--m-leistung)} .mini--er .minikopf svg{stroke:#047857} html[data-theme="dark"] body .mini--er .minikopf svg{stroke:#6EE7B7} .minikopf b{font-size:13.5px;font-weight:800;color:var(--ink)} .miniwert{font-size:14.5px;color:var(--ink2);line-height:1.45; font-variant-numeric:tabular-nums} .miniwert em{font-style:normal;font-weight:750;color:var(--ink)} .minifolge{display:flex;align-items:center;gap:7px;margin-top:9px; padding-top:9px;border-top:1px solid var(--line2); font-size:13px;color:var(--ink2)} .minifolge svg{width:13px;height:13px;flex:none;fill:none;stroke:#047857; stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round} html[data-theme="dark"] body .minifolge svg{stroke:#6EE7B7} /* Die Mitte: der einzige farbige Teil, weil dort der Zusatznutzen steht. --grad-tief ist die Verlaufsfassung FÜR FLÄCHEN MIT TEXT (Befund 6). */ .dt--mitte{background:var(--grad-tief);color:#fff;justify-content:center; text-align:center;padding:26px 22px} .dt--mitte h3{color:#fff;font-size:17px} /* ⚠️ Volles Weiss, nicht 92 %. Gemessen lag der Absatz mit .92 bei 4,58:1 am schlechtesten Verlaufspunkt — er besteht, aber nur um 0,08. Solche Werte kippen beim nächsten Eingriff, und niemand sucht dann hier. Volles Weiss ergibt 5,17:1. */ .dt--mitte p{color:#fff;font-size:14.5px;line-height:1.6;margin:0} /* Die Pfeile zeigen von beiden Seiten nach innen — sie sagen „das trifft sich hier", ohne dass es jemand lesen muss. */ .dtpfeile{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:14px} .dtpfeile svg{fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .dtsym{width:38px;height:38px;border-radius:999px;flex:none;display:grid;place-items:center; background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.34)} .dtsym svg{width:20px;height:20px} .dtlink{width:30px;height:22px;flex:none;stroke-width:1.8;opacity:.9} @media (max-width:900px){ .dt--mitte{text-align:left;padding:22px 26px} .dtpfeile{justify-content:flex-start} .dtpfeile svg{transform:rotate(90deg)} } /* Trennlinien zwischen den drei Teilen, damit es eine Fläche bleibt. */ @media (min-width:901px){ .dt:first-child{border-right:1px solid var(--line2)} .dt:last-child{border-left:1px solid var(--line2)} }