/* =========================================================================== Dashboard-Gestaltung — WOERTLICH aus dashboard.html uebernommen --------------------------------------------------------------------------- Diese Datei ist KEIN Nachbau und wird NICHT von Hand bearbeitet. Erzeugt von werkzeuge/dashboard-stil-holen.py --------------------------------------------------------------------------- Nicht uebernommen, weil die App dafuer Eigenes hat: Seitenleiste (wird zur Chipreihe), Suche, Aufklapp-Tabs, Einfuehrung, Rueckfrage vor dem Verlassen, Sperre ohne Vollversion. =========================================================================== */ /* ───────────────────────────────────────────────────────────────────── RAHMEN ALS MESSPUNKT (von werkzeuge/dashboard-stil-holen.py ergaenzt) Die Handy-Regeln unten fragen den Rahmen ab, nicht das Fenster. ───────────────────────────────────────────────────────────────────── */ #bildDashboard { container-type: inline-size; container-name: dashrahmen; } /* ───────────────────────────────────────────────────────────────────── KENNZAHLEN (dashboard.html Zeile 281 bis 331) ───────────────────────────────────────────────────────────────────── */ /* ===== KENNZAHLEN ====================================================== */ #bildDashboard .zahlen, #bildStart .zahlen { display: grid; gap: 10px; margin-bottom: 16px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } /* Auf dem Handy zwei nebeneinander: eine Kachel pro Zeile heisst vier Bildschirmhoehen, bevor der erste Inhalt kommt. */ @container dashrahmen (max-width: 560px) { #bildDashboard .zahlen, #bildStart .zahlen { grid-template-columns: 1fr 1fr; gap: 10px; } #bildDashboard .kachel, #bildStart .kachel { padding: 13px 13px 14px; } #bildDashboard .kachel__was, #bildStart .kachel__was { font-size: 11px; line-height: 1.35; } #bildDashboard .kachel__wert, #bildStart .kachel__wert { font-size: 21px; } #bildDashboard .kachel__note, #bildStart .kachel__note { font-size: 10.5px; } #bildDashboard .kachel__sym, #bildStart .kachel__sym { width: 30px; height: 30px; } #bildDashboard .kachel__kopf, #bildStart .kachel__kopf { margin-bottom: 10px; } } #bildDashboard .kachel, #bildStart .kachel { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 14px; padding: 13px 14px; transition: border-color .2s, transform .2s; } /* Vorlage 2 hebt beim Zeigen an (scale 1.03, y -5) mit einer Feder. cubic-bezier mit Ueberschwinger ist dasselbe Gefuehl ohne Bibliothek. */ #bildDashboard .kachel:hover, #bildStart .kachel:hover, #bildDashboard .karte--hebt:hover, #bildStart .karte--hebt:hover { border-color: rgba(229,20,42,.28); transform: translateY(-5px) scale(1.02); box-shadow: 0 18px 40px -22px rgba(0,0,0,.7); } #bildDashboard .kachel, #bildStart .kachel, #bildDashboard .karte--hebt, #bildStart .karte--hebt { transition: border-color .2s, transform .28s cubic-bezier(.34,1.3,.64,1), box-shadow .28s; } #bildDashboard .kachel__kopf, #bildStart .kachel__kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; } /* Trendpfeil oben rechts - in der Vorlage . Er faerbt sich nach Richtung; ohne Daten bleibt er grau statt gruen, sonst behauptet er ein Wachstum, das niemand gemessen hat. */ #bildDashboard .kachel__trend, #bildStart .kachel__trend { width: 16px; height: 16px; color: var(--text-still); flex: none; } #bildDashboard .kachel__trend--hoch, #bildStart .kachel__trend--hoch { color: var(--gruen); } #bildDashboard .kachel__trend--runter, #bildStart .kachel__trend--runter { color: var(--rot); transform: scaleY(-1); } #bildDashboard .kachel__sym, #bildStart .kachel__sym { width: 34px; height: 34px; border-radius: 9px; display: grid; place-content: center; } #bildDashboard .kachel__sym svg, #bildStart .kachel__sym svg { width: 16px; height: 16px; } #bildDashboard .kachel__sym--rot, #bildStart .kachel__sym--rot { background: rgba(229,20,42,.13); color: var(--rot); } #bildDashboard .kachel__sym--pink, #bildStart .kachel__sym--pink { background: rgba(255,75,126,.13); color: var(--pink); } #bildDashboard .kachel__sym--gold, #bildStart .kachel__sym--gold { background: rgba(232,192,122,.13); color: var(--gold); } #bildDashboard .kachel__sym--gruen, #bildStart .kachel__sym--gruen { background: rgba(74,222,128,.12); color: var(--gruen); } #bildDashboard .kachel__was, #bildStart .kachel__was { font-size: 12px; color: var(--text-leise); font-weight: 600; margin: 0 0 3px; } #bildDashboard .kachel__wert, #bildStart .kachel__wert { font-family: var(--anzeige); font-size: 25px; font-weight: 800; letter-spacing: -.02em; margin: 0; line-height: 1.1; } #bildDashboard .kachel__wert small, #bildStart .kachel__wert small { font-size: 13px; font-weight: 600; color: var(--text-still); } #bildDashboard .kachel__note, #bildStart .kachel__note { font-size: 11.5px; color: var(--text-still); margin: 5px 0 0; } #bildDashboard .kachel__note--gut, #bildStart .kachel__note--gut { color: var(--gruen); } /* ───────────────────────────────────────────────────────────────────── ZWEI SPALTEN (dashboard.html Zeile 332 bis 407) ───────────────────────────────────────────────────────────────────── */ /* ===== ZWEI SPALTEN ==================================================== */ #bildDashboard .spalten, #bildStart .spalten { display: grid; gap: 12px; grid-template-columns: 1fr; } @container dashrahmen (min-width: 1000px) { #bildDashboard .spalten, #bildStart .spalten { grid-template-columns: 1.75fr 1fr; } } #bildDashboard .karte, #bildStart .karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 14px; padding: 14px 15px; } #bildDashboard .karte__kopf, #bildStart .karte__kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; } #bildDashboard .karte h3, #bildStart .karte h3 { font-family: var(--anzeige); font-size: 16px; font-weight: 700; margin: 0; } #bildDashboard .karte__mehr, #bildStart .karte__mehr { border: 0; background: none; color: var(--gold); font-size: 12.5px; font-weight: 700; padding: 0; } #bildDashboard .karte__mehr:hover, #bildStart .karte__mehr:hover { text-decoration: underline; } #bildDashboard .karte + .karte, #bildStart .karte + .karte { margin-top: 18px; } #bildDashboard .zeile, #bildStart .zeile { display: flex; align-items: center; gap: 13px; padding: 10px; border-radius: 10px; text-decoration: none; color: inherit; transition: background .16s; } #bildDashboard .zeile:hover, #bildStart .zeile:hover { background: var(--flaeche-2); } #bildDashboard .zeile__sym, #bildStart .zeile__sym { width: 33px; height: 33px; border-radius: 9px; display: grid; place-content: center; flex: none; } #bildDashboard .zeile__sym svg, #bildStart .zeile__sym svg { width: 15px; height: 15px; } #bildDashboard .zeile__text, #bildStart .zeile__text { flex: 1; min-width: 0; } #bildDashboard .zeile__was, #bildStart .zeile__was { font-size: 13px; font-weight: 600; margin: 0; } #bildDashboard .zeile__dazu, #bildStart .zeile__dazu { font-size: 11.5px; color: var(--text-still); margin: 1px 0 0; } #bildDashboard .zeile__wann, #bildStart .zeile__wann { font-size: 11px; color: var(--text-still); flex: none; } #bildDashboard .balken, #bildStart .balken { margin-bottom: 15px; } #bildDashboard .balken__kopf, #bildStart .balken__kopf { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 6px; } #bildDashboard .balken__kopf b, #bildStart .balken__kopf b { font-weight: 700; } #bildDashboard .balken__bahn, #bildStart .balken__bahn { height: 7px; border-radius: 99px; background: var(--flaeche-2); overflow: hidden; } #bildDashboard .balken__fuell, #bildStart .balken__fuell { height: 100%; border-radius: 99px; transition: width .8s cubic-bezier(.16,1,.3,1); } /* Gestaffeltes Einblenden beim Laden - in der Vorlage containerVariants mit staggerChildren .1. Hier ueber eine Verzoegerung je Kind. */ /* WICHTIG: unsichtbar wird nur, was auch wieder sichtbar werden KANN. Vorher stand .stufe pauschal auf opacity:0 - lief die Animation nicht (kein JS, Tab im Hintergrund, alter Browser), blieb die halbe Seite dauerhaft leer. Jetzt blendet erst die Klasse .bereit aus, die das Skript setzt, und ein Sicherheitstimer holt alles zurueck. */ #bildDashboard .bereit .stufe, #bildStart .bereit .stufe { opacity: 0; transform: translateY(15px); } #bildDashboard .an .stufe, #bildStart .an .stufe { animation: aufStufe .5s cubic-bezier(.16,1,.3,1) forwards; animation-delay: calc(var(--i,0) * 90ms); } #bildDashboard .zeigAlles .stufe, #bildStart .zeigAlles .stufe { opacity: 1 !important; transform: none !important; animation: none !important; } @keyframes aufStufe { to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { #bildDashboard .stufe, #bildStart .stufe { opacity: 1; transform: none; } } /* Filterknopf in der Kartenkopfzeile (Vorlage: ) */ #bildDashboard .karte__filter, #bildStart .karte__filter { width: 32px; height: 32px; border-radius: 8px; border: 0; background: none; color: var(--text-still); display: grid; place-content: center; transition: background .16s, color .16s; } #bildDashboard .karte__filter:hover, #bildStart .karte__filter:hover { background: var(--flaeche-2); color: var(--text); } #bildDashboard .karte__filter svg, #bildStart .karte__filter svg { width: 16px; height: 16px; } #bildDashboard .karte__filter[aria-pressed="true"], #bildStart .karte__filter[aria-pressed="true"] { background: rgba(255,255,255,.09); color: var(--text); } /* Klapp-Pfeil am Namen (Vorlage: ) */ #bildDashboard .leiste__pfeil, #bildStart .leiste__pfeil { width: 15px; height: 15px; color: var(--text-still); flex: none; margin-left: auto; } #bildDashboard .leiste[data-zu="1"] .leiste__pfeil, #bildStart .leiste[data-zu="1"] .leiste__pfeil { display: none; } #bildDashboard .leer, #bildStart .leer { text-align: center; padding: 26px 14px; color: var(--text-still); font-size: 12.5px; border: 1px dashed var(--linie); border-radius: 11px; } #bildDashboard .leer b, #bildStart .leer b { display: block; color: var(--text-leise); font-size: 13.5px; margin-bottom: 4px; } #bildDashboard .schnell, #bildStart .schnell { display: grid; gap: 8px; } #bildDashboard .schnell a, #bildStart .schnell a, #bildDashboard .schnell button, #bildStart .schnell button { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--linie); background: var(--flaeche-2); text-decoration: none; color: var(--text); font-size: 13px; font-weight: 600; transition: border-color .18s, transform .18s; } #bildDashboard .schnell a:hover, #bildStart .schnell a:hover, #bildDashboard .schnell button:hover, #bildStart .schnell button:hover { border-color: rgba(229,20,42,.4); transform: translateX(2px); } #bildDashboard .schnell svg, #bildStart .schnell svg, #bildDashboard .schnell button svg, #bildStart .schnell button svg { width: 15px; height: 15px; color: #A855F7; flex: none; } /* ───────────────────────────────────────────────────────────────────── SEGMENTBALKEN + LEGENDE (dashboard.html Zeile 408 bis 423) ───────────────────────────────────────────────────────────────────── */ /* ===== SEGMENTBALKEN + LEGENDE ========================================== Aus Merts zweiter Vorlage (MarketingDashboard): ein Balken, der aus mehreren Farbstuecken besteht, darunter die Legende. Statt "Team Activities" zeigt er hier den Stand deiner Videos - dieselbe Form, der Inhalt aus unserem Fall. */ #bildDashboard .misch, #bildStart .misch { display: flex; height: 9px; border-radius: 99px; overflow: hidden; background: var(--flaeche-2); margin-bottom: 11px; } #bildDashboard .misch span, #bildStart .misch span { height: 100%; width: 0; transition: width .9s cubic-bezier(.16,1,.3,1); } #bildDashboard .legende, #bildStart .legende { display: flex; flex-wrap: wrap; gap: 4px 15px; font-size: 11.5px; color: var(--text-still); } #bildDashboard .legende span, #bildStart .legende span { display: inline-flex; align-items: center; gap: 6px; } #bildDashboard .legende i, #bildStart .legende i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } #bildDashboard .gross, #bildStart .gross { font-family: var(--anzeige); font-size: 34px; font-weight: 800; letter-spacing: -.025em; line-height: 1; margin: 0 0 14px; } #bildDashboard .gross small, #bildStart .gross small { font-size: 14px; font-weight: 600; color: var(--text-still); margin-left: 5px; letter-spacing: 0; } /* ───────────────────────────────────────────────────────────────────── TEAM-STAPEL (dashboard.html Zeile 424 bis 438) ───────────────────────────────────────────────────────────────────── */ /* ===== TEAM-STAPEL ====================================================== Der Avatar-Stapel aus der Vorlage. Bei einem Creator gibt es kein Team - also stehen hier die Leute von AUREON, die ihn betreuen. Das beantwortet nebenbei die Frage "an wen wende ich mich". */ #bildDashboard .stapel, #bildStart .stapel { display: flex; margin-top: 3px; } #bildDashboard .stapel span, #bildStart .stapel span { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-content: center; margin-left: -9px; border: 2px solid var(--flaeche); background: var(--flaeche-2); font-size: 12px; font-weight: 800; color: var(--text-leise); transition: transform .2s cubic-bezier(.34,1.4,.64,1); } #bildDashboard .stapel span:first-child, #bildStart .stapel span:first-child { margin-left: 0; } #bildDashboard .stapel span:hover, #bildStart .stapel span:hover { transform: translateY(-3px) scale(1.12); z-index: 2; } /* ───────────────────────────────────────────────────────────────────── CTA-BAND (dashboard.html Zeile 439 bis 469) ───────────────────────────────────────────────────────────────────── */ /* ===== CTA-BAND ========================================================= */ #bildDashboard .band, #bildStart .band { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 18px; padding: 15px 17px; border-radius: 14px; background: var(--flaeche); border: 1px solid var(--linie); } #bildDashboard .band__links, #bildStart .band__links { display: flex; align-items: center; gap: 12px; min-width: 0; } #bildDashboard .band__blitz, #bildStart .band__blitz { width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-content: center; background: rgba(255,255,255,.06); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border: 1px solid rgba(255,255,255,.13); color: var(--text); } #bildDashboard .band__blitz svg, #bildStart .band__blitz svg { width: 17px; height: 17px; } #bildDashboard .band p, #bildStart .band p { margin: 0; font-size: 13px; color: var(--text-leise); font-weight: 600; } #bildDashboard .band a, #bildStart .band a { display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 11px 17px; border-radius: 999px; text-decoration: none; background: rgba(255,255,255,.06); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border: 1px solid rgba(255,255,255,.13); color: var(--text); font-size: 13px; font-weight: 700; box-shadow: 0 8px 22px -10px rgba(229,20,42,.7); transition: transform .2s, box-shadow .2s; } #bildDashboard .band a:hover, #bildStart .band a:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(229,20,42,.8); } #bildDashboard .band a svg, #bildStart .band a svg { width: 15px; height: 15px; } /* ───────────────────────────────────────────────────────────────────── AUS VORLAGE 3 (AdvancedStats) (dashboard.html Zeile 582 bis 673) ───────────────────────────────────────────────────────────────────── */ /* ===== AUS VORLAGE 3 (AdvancedStats) ==================================== Flaechendiagramm, dunkles Ziel-Panel, KPI-Reihe mit Aenderungsblasen. Das Diagramm ist als SVG von Hand gezeichnet statt mit Recharts: eine Diagrammbibliothek waere 180 KB fuer eine Kurve, und sie braeuchte React. ====================================================================== */ #bildDashboard .stats, #bildStart .stats { display: grid; gap: 11px; margin: 14px 0 0; grid-template-columns: 1fr; } @container dashrahmen (min-width: 1000px) { #bildDashboard .stats, #bildStart .stats { grid-template-columns: 2fr 1fr; } } #bildDashboard .diagramm, #bildStart .diagramm { padding: 15px 16px 11px; } #bildDashboard .diagramm__kopf, #bildStart .diagramm__kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 4px; } #bildDashboard .diagramm__wert, #bildStart .diagramm__wert { font-family: var(--anzeige); font-size: 33px; font-weight: 800; letter-spacing: -.03em; margin: 6px 0 2px; line-height: 1; } #bildDashboard .diagramm__unter, #bildStart .diagramm__unter { font-size: 12px; color: var(--text-still); margin: 0 0 14px; } #bildDashboard .diagramm svg, #bildStart .diagramm svg { width: 100%; height: auto; display: block; overflow: visible; } #bildDashboard .diagramm__linie, #bildStart .diagramm__linie { fill: none; stroke: var(--pink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } /* Die Linie zeichnet sich ein - das ist die Bewegung, die in der Vorlage "clipped" heisst: der Bereich wird freigegeben, nicht eingeblendet. */ #bildDashboard .an .diagramm__linie, #bildStart .an .diagramm__linie { stroke-dasharray: 1; stroke-dashoffset: 1; animation: linieZeichnen 1.5s cubic-bezier(.5,0,.2,1) .3s forwards; } @keyframes linieZeichnen { to { stroke-dashoffset: 0; } } #bildDashboard .diagramm__flaeche, #bildStart .diagramm__flaeche { opacity: 0; } #bildDashboard .an .diagramm__flaeche, #bildStart .an .diagramm__flaeche { animation: flaecheAuf .9s ease-out 1.1s forwards; } @keyframes flaecheAuf { to { opacity: 1; } } #bildDashboard .diagramm__achse, #bildStart .diagramm__achse { font-size: 10px; fill: var(--text-still); } #bildDashboard .diagramm__punkt, #bildStart .diagramm__punkt { fill: var(--pink); stroke: var(--flaeche); stroke-width: 2.5; } /* Das dunkle Ziel-Panel. In der Vorlage bg-zinc-900 auf hellem Grund - hier umgekehrt: es ist das EINZIGE Feld mit Markenverlauf, damit es sich absetzt statt sich einzureihen. */ #bildDashboard .ziel, #bildStart .ziel { padding: 21px 22px; border-radius: 14px; background: linear-gradient(150deg, #2A0D14, #1A0A10); border: 1px solid rgba(255,75,126,.22); display: flex; flex-direction: column; justify-content: space-between; min-height: 172px; } #bildDashboard .ziel__auge, #bildStart .ziel__auge { font-size: 10px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin: 0 0 7px; } #bildDashboard .ziel__was, #bildStart .ziel__was { font-family: var(--anzeige); font-size: 19px; font-weight: 700; letter-spacing: -.01em; margin: 0; } #bildDashboard .ziel__unten, #bildStart .ziel__unten { margin-top: 24px; } #bildDashboard .ziel__reihe, #bildStart .ziel__reihe { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 9px; } #bildDashboard .ziel__zahl, #bildStart .ziel__zahl { font-family: var(--anzeige); font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1; } #bildDashboard .ziel__soll, #bildStart .ziel__soll { font-size: 11.5px; color: var(--text-still); margin-bottom: 3px; } #bildDashboard .ziel__bahn, #bildStart .ziel__bahn { height: 6px; border-radius: 99px; background: rgba(255,255,255,.09); overflow: hidden; } #bildDashboard .ziel__fuell, #bildStart .ziel__fuell { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--rot), var(--pink)); width: 0; transition: width 1.1s cubic-bezier(.16,1,.3,1) .4s; } #bildDashboard .hinweis, #bildStart .hinweis { padding: 19px 21px; } #bildDashboard .hinweis__kopf, #bildStart .hinweis__kopf { display: flex; align-items: center; gap: 11px; margin-bottom: 11px; } #bildDashboard .hinweis__sym, #bildStart .hinweis__sym { width: 33px; height: 33px; border-radius: 9px; flex: none; display: grid; place-content: center; background: var(--flaeche-2); border: 1px solid var(--linie); } #bildDashboard .hinweis__sym svg, #bildStart .hinweis__sym svg { width: 18px; height: 18px; color: var(--pink); } #bildDashboard .hinweis h4, #bildStart .hinweis h4 { font-family: var(--anzeige); font-size: 15px; font-weight: 700; margin: 0; } #bildDashboard .hinweis p, #bildStart .hinweis p { font-size: 12.5px; color: var(--text-leise); margin: 0; line-height: 1.55; } #bildDashboard .hinweis b, #bildStart .hinweis b { color: var(--text); font-weight: 700; } #bildDashboard .kampagnen-tipp, #bildStart .kampagnen-tipp { padding: 21px; } #bildDashboard .kampagnen-tipp__kopf, #bildStart .kampagnen-tipp__kopf { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 11px; } #bildDashboard .kampagnen-tipp__sym, #bildStart .kampagnen-tipp__sym { width: 33px; height: 33px; border-radius: 9px; flex: none; display: grid; place-content: center; background: rgba(229,20,42,.13); border: 1px solid rgba(229,20,42,.22); color: var(--rot); } #bildDashboard .kampagnen-tipp__sym svg, #bildStart .kampagnen-tipp__sym svg { width: 18px; height: 18px; } #bildDashboard .kampagnen-tipp h4, #bildStart .kampagnen-tipp h4 { font-family: var(--anzeige); font-size: 15px; font-weight: 700; margin: 0; } #bildDashboard .kampagnen-tipp__intro, #bildStart .kampagnen-tipp__intro { max-width: 72ch; font-size: 12.75px; color: var(--text-leise); margin: 0 0 15px; line-height: 1.62; } #bildDashboard .kampagnen-tipp__gruppen, #bildStart .kampagnen-tipp__gruppen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } #bildDashboard .kampagnen-tipp__gruppe, #bildStart .kampagnen-tipp__gruppe { min-width: 0; padding: 14px; border: 1px solid var(--linie); border-radius: 14px; background: rgba(255,255,255,.025); } #bildDashboard .kampagnen-tipp__gruppe--grenze, #bildStart .kampagnen-tipp__gruppe--grenze { border-color: rgba(229,20,42,.24); background: rgba(229,20,42,.045); } #bildDashboard .kampagnen-tipp__gruppe h5, #bildStart .kampagnen-tipp__gruppe h5 { margin: 0 0 10px; color: var(--text); font: 750 11px/1.2 var(--schrift); letter-spacing: .08em; text-transform: uppercase; } #bildDashboard .kampagnen-tipp__gruppe--grenze h5, #bildStart .kampagnen-tipp__gruppe--grenze h5 { color: #ff8da1; } #bildDashboard .kampagnen-tipp__liste, #bildStart .kampagnen-tipp__liste { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; } #bildDashboard .kampagnen-tipp__liste li, #bildStart .kampagnen-tipp__liste li { display: grid; grid-template-columns: 17px 1fr; gap: 8px; align-items: start; font-size: 12.25px; color: var(--text-leise); line-height: 1.52; } #bildDashboard .kampagnen-tipp__liste li::before, #bildStart .kampagnen-tipp__liste li::before { content: '✓'; width: 17px; height: 17px; display: grid; place-content: center; border-radius: 50%; background: rgba(243,233,236,.09); color: var(--text); font-size: 10px; font-weight: 900; line-height: 1; } #bildDashboard .kampagnen-tipp__gruppe--grenze li::before, #bildStart .kampagnen-tipp__gruppe--grenze li::before { content: '×'; background: rgba(229,20,42,.13); color: #ff7e94; font-size: 14px; } #bildDashboard .kampagnen-tipp__liste b, #bildStart .kampagnen-tipp__liste b { color: var(--text); font-weight: 700; } @container dashrahmen (max-width: 700px) { #bildDashboard .kampagnen-tipp__gruppen, #bildStart .kampagnen-tipp__gruppen { grid-template-columns: 1fr; } } @container dashrahmen (max-width: 560px) { #bildDashboard .kampagnen-tipp, #bildStart .kampagnen-tipp { padding: 16px; } #bildDashboard .kampagnen-tipp__gruppe, #bildStart .kampagnen-tipp__gruppe { padding: 13px; } #bildDashboard .kampagnen-tipp__liste li, #bildStart .kampagnen-tipp__liste li { font-size: 12px; } } /* KPI-Reihe. Die Aenderung sitzt als Blase neben dem Wert, gruen nach oben, rot nach unten - wie in der Vorlage. */ #bildDashboard .kpis, #bildStart .kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; } @container dashrahmen (min-width: 760px) { #bildDashboard .kpis, #bildStart .kpis { grid-template-columns: repeat(4, 1fr); } } #bildDashboard .kpi, #bildStart .kpi { padding: 13px 14px; border-radius: 13px; background: var(--flaeche); border: 1px solid var(--linie); transition: border-color .2s, background .2s; } #bildDashboard .kpi--hoch:hover, #bildStart .kpi--hoch:hover { border-color: rgba(74,222,128,.45); background: rgba(74,222,128,.05); } #bildDashboard .kpi--runter:hover, #bildStart .kpi--runter:hover { border-color: rgba(229,20,42,.45); background: rgba(229,20,42,.05); } #bildDashboard .kpi__was, #bildStart .kpi__was { font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--text-still); margin: 0 0 9px; } #bildDashboard .kpi__reihe, #bildStart .kpi__reihe { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } #bildDashboard .kpi__wert, #bildStart .kpi__wert { font-family: var(--anzeige); font-size: 22px; font-weight: 800; letter-spacing: -.03em; margin: 0; } #bildDashboard .kpi__delta, #bildStart .kpi__delta { font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 6px; white-space: nowrap; } #bildDashboard .kpi__delta--hoch, #bildStart .kpi__delta--hoch { color: var(--gruen); background: rgba(74,222,128,.12); } #bildDashboard .kpi__delta--runter, #bildStart .kpi__delta--runter { color: var(--rot); background: rgba(229,20,42,.12); } #bildDashboard .kpi__delta--leer, #bildStart .kpi__delta--leer { color: var(--text-still); background: var(--flaeche-2); } /* ───────────────────────────────────────────────────────────────────── KONNEKTOR: KANÄLE VERBINDEN (dashboard.html Zeile 674 bis 745) ───────────────────────────────────────────────────────────────────── */ /* ===== KONNEKTOR: KANÄLE VERBINDEN ====================================== Mert, 19.08.2026: "ganz oben muss eine Section sein, Insta verbinden, TikTok verbinden usw. - also ein Konnektor." WICHTIG ZUR EHRLICHKEIT: hier wird nichts per OAuth an TikTok oder Instagram angebunden - dafuer braeuchte es freigeschaltete API-Zugaenge bei jeder Plattform. Der Creator hinterlegt seinen Namen, und AUREON findet darueber seine Videos. Genau das steht auch da; ein Knopf, der "Verbinden" verspricht und nur ein Textfeld oeffnet, waere gelogen. ====================================================================== */ #bildDashboard .konn, #bildStart .konn { margin-bottom: 14px; } #bildDashboard .konn__kopf, #bildStart .konn__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; } #bildDashboard .konn__titel, #bildStart .konn__titel { font-family: var(--anzeige); font-size: 16px; font-weight: 700; margin: 0; } #bildDashboard .konn__dazu, #bildStart .konn__dazu { font-size: 12px; color: var(--text-still); margin: 3px 0 0; } #bildDashboard .konn__stand, #bildStart .konn__stand { font-size: 11.5px; font-weight: 700; color: var(--text-leise); } #bildDashboard .konn__stand b, #bildStart .konn__stand b { color: var(--text); } #bildDashboard .konn__reihe, #bildStart .konn__reihe { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); } #bildDashboard .kanal, #bildStart .kanal { display: flex; align-items: center; gap: 11px; width: 100%; padding: 12px 13px; border-radius: 12px; text-align: left; background: var(--flaeche); border: 1px solid var(--linie); color: inherit; transition: border-color .2s, background .2s, transform .2s; } #bildDashboard .kanal:hover, #bildStart .kanal:hover { border-color: rgba(229,20,42,.35); transform: translateY(-2px); } #bildDashboard .kanal__logo, #bildStart .kanal__logo { width: 34px; height: 34px; border-radius: 9px; flex: none; display: grid; place-content: center; background: var(--flaeche-2); color: var(--text-leise); transition: background .2s, color .2s; } #bildDashboard .kanal__logo svg, #bildStart .kanal__logo svg { width: 18px; height: 18px; fill: currentColor; } #bildDashboard .kanal__text, #bildStart .kanal__text { min-width: 0; flex: 1; } #bildDashboard .kanal__name, #bildStart .kanal__name { display: block; font-size: 13px; font-weight: 700; } #bildDashboard .kanal__wer, #bildStart .kanal__wer { display: block; font-size: 11px; color: var(--text-still); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Die Mini-Knoepfe liegen absolut oben rechts UEBER der Kachel. Ohne Freiraum laeuft der Text darunter durch - gemessen 4px Ueberlappung auf Handybreite. Der Platz wird freigehalten, nicht der Text gekuerzt. */ #bildDashboard .kanal__text, #bildStart .kanal__text { padding-right: 30px; } /* Verbunden: das Logo traegt die Kanalfarbe, daneben ein Haken. Der Unterschied muss auf einen Blick lesbar sein, nicht erst beim Lesen. */ #bildDashboard .kanal[data-an="1"], #bildStart .kanal[data-an="1"] { border-color: rgba(74,222,128,.35); background: rgba(74,222,128,.04); } #bildDashboard .kanal[data-an="1"] .kanal__logo, #bildStart .kanal[data-an="1"] .kanal__logo { background: var(--kf, var(--pink)); color: #fff; } #bildDashboard .kanal[data-an="1"] .kanal__wer, #bildStart .kanal[data-an="1"] .kanal__wer { color: var(--gruen); } #bildDashboard .kanal__haken, #bildStart .kanal__haken { width: 16px; height: 16px; flex: none; color: var(--gruen); opacity: 0; } #bildDashboard .kanal[data-an="1"] .kanal__haken, #bildStart .kanal[data-an="1"] .kanal__haken { opacity: 1; } /* Eingabe statt prompt(): ein prompt-Fenster sieht auf jedem Geraet anders aus und laesst sich nicht gestalten. */ #bildDashboard .konn__feld, #bildStart .konn__feld { display: none; gap: 8px; margin-top: 11px; align-items: center; flex-wrap: wrap; } #bildDashboard .konn__feld[data-offen="1"], #bildStart .konn__feld[data-offen="1"] { display: flex; } #bildDashboard .konn__feld input, #bildStart .konn__feld input { flex: 1; min-width: 150px; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--linie); background: var(--flaeche-2); color: var(--text); font: inherit; font-size: 13.5px; } #bildDashboard .konn__feld input:focus, #bildStart .konn__feld input:focus { outline: 2px solid rgba(229,20,42,.5); outline-offset: 1px; } /* "Verbinden", nicht "Speichern" (Mert, 21.08.2026): gespeichert wird hier ohnehin alles - der Knopf sagt, was PASSIERT, nicht was die Technik tut. Gruen wie der verbundene Zustand daneben: dieselbe Farbe fuer dieselbe Bedeutung. */ #bildDashboard .konn__feld button, #bildStart .konn__feld button { padding: 11px 16px; border-radius: 10px; border: 0; font-size: 13px; font-weight: 700; background: rgba(74,222,128,.14); border: 1px solid rgba(74,222,128,.3); color: var(--gruen); } #bildDashboard .konn__feld button:hover, #bildStart .konn__feld button:hover { filter: brightness(1.08); } #bildDashboard .konn__feld .weg, #bildStart .konn__feld .weg { background: none; border: 1px solid var(--linie); color: var(--text-leise); } /* ───────────────────────────────────────────────────────────────────── RUNDANZEIGE (Vorlage 4: ) (dashboard.html Zeile 746 bis 761) ───────────────────────────────────────────────────────────────────── */ /* ===== RUNDANZEIGE (Vorlage 4: ) ================================= Kreisring mit Luecke, Wert in der Mitte, Teilstriche aussen, Verlauf und Schein. Die Vorlage nutzt framer-motion (useSpring damping 60, stiffness 100); hier ist die Feder von Hand gerechnet - es sind vier Zeilen Physik, und die Bibliothek braeuchte React. ====================================================================== */ #bildDashboard .rund, #bildStart .rund { display: grid; place-items: center; position: relative; } #bildDashboard .rund svg, #bildStart .rund svg { display: block; overflow: visible; } #bildDashboard .rund__zahl, #bildStart .rund__zahl { font-family: var(--anzeige); font-weight: 800; letter-spacing: -.03em; fill: var(--text); font-size: 27px; } #bildDashboard .rund__auf, #bildStart .rund__auf { fill: var(--text-still); font-size: 7.5px; font-weight: 600; letter-spacing: .06em; } #bildDashboard .rund__strich, #bildStart .rund__strich { stroke: var(--text-still); stroke-width: 1; opacity: .28; } /* ───────────────────────────────────────────────────────────────────── KPI-KARTE, neue Fassung (Vorlage 5: ) (dashboard.html Zeile 762 bis 782) ───────────────────────────────────────────────────────────────────── */ /* ===== KPI-KARTE, neue Fassung (Vorlage 5: ) =================== Aus der Vorlage uebernommen: die beiden Kreise in der Ecke, das Trendsymbol neben dem Wert (hoch / runter / gleich), die kurze Grundlinie unten und die Farbtoene je Lage. ====================================================================== */ #bildDashboard .kpi, #bildStart .kpi { position: relative; overflow: hidden; } /* Die zwei Kreise oben rechts - in der Vorlage "corner pulse" */ #bildDashboard .kpi::before, #bildStart .kpi::before, #bildDashboard .kpi::after, #bildStart .kpi::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; background: rgba(255,255,255,.045); } #bildDashboard .kpi::before, #bildStart .kpi::before { width: 64px; height: 64px; top: -24px; right: -24px; } #bildDashboard .kpi::after, #bildStart .kpi::after { width: 32px; height: 32px; top: -8px; right: -8px; } #bildDashboard .kpi__zeile2, #bildStart .kpi__zeile2 { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; } #bildDashboard .kpi__zeile2 svg, #bildStart .kpi__zeile2 svg { width: 14px; height: 14px; flex: none; } #bildDashboard .kpi__grund, #bildStart .kpi__grund { height: 2px; width: 58px; border-radius: 2px; margin-top: 12px; opacity: .55; background: currentColor; } #bildDashboard .kpi__unter, #bildStart .kpi__unter { font-size: 10.5px; color: var(--text-still); margin: 4px 0 0; font-weight: 500; } #bildDashboard .kpi--hoch, #bildStart .kpi--hoch { color: var(--gruen); } #bildDashboard .kpi--runter, #bildStart .kpi--runter { color: var(--rot); } #bildDashboard .kpi--flach, #bildStart .kpi--flach { color: var(--text-still); } /* ───────────────────────────────────────────────────────────────────── FEDERNDES AUFKLAPPEN (Vorlage 6: ) (dashboard.html Zeile 783 bis 831) ───────────────────────────────────────────────────────────────────── */ /* ===== FEDERNDES AUFKLAPPEN (Vorlage 6: ) ============== Uebernommen: die Ecken runden sich beim Oeffnen (28px), die offene Zeile rueckt mit Abstand heraus, der Pfeil dreht 180 Grad, und alles laeuft ueber eine Feder mit Nachschwingen - nicht ueber ein lineares Aufziehen. Federwerte aus der Vorlage: duration .55, bounce .38. ====================================================================== */ #bildDashboard .fed, #bildStart .fed { display: flex; flex-direction: column; } #bildDashboard .fed__zeile, #bildStart .fed__zeile { overflow: hidden; background: var(--flaeche-2); border-radius: 0; transition: border-radius .55s cubic-bezier(.34,1.4,.64,1), margin .55s cubic-bezier(.34,1.4,.64,1), background .25s; } #bildDashboard .fed__zeile:first-child, #bildStart .fed__zeile:first-child { border-top-left-radius: 16px; border-top-right-radius: 16px; } #bildDashboard .fed__zeile:last-child, #bildStart .fed__zeile:last-child { border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; } #bildDashboard .fed__zeile[data-auf="1"], #bildStart .fed__zeile[data-auf="1"] { border-radius: 18px; margin: 10px 0; background: var(--flaeche); box-shadow: 0 8px 26px -16px rgba(0,0,0,.8); } /* Auch der NACHBAR einer offenen Zeile rundet sich - sonst klebt eine eckige Kante an der runden. Genau das macht die Vorlage ueber startsGroup/endsGroup. */ #bildDashboard .fed__zeile[data-auf="1"] + .fed__zeile, #bildStart .fed__zeile[data-auf="1"] + .fed__zeile { border-top-left-radius: 18px; border-top-right-radius: 18px; } #bildDashboard .fed__zeile:has(+ .fed__zeile[data-auf="1"]), #bildStart .fed__zeile:has(+ .fed__zeile[data-auf="1"]) { border-bottom-left-radius: 18px; border-bottom-right-radius: 18px; } #bildDashboard .fed__kopf, #bildStart .fed__kopf { display: flex; align-items: center; gap: 13px; width: 100%; min-height: 54px; padding: 12px 16px; border: 0; background: none; text-align: left; color: inherit; } #bildDashboard .fed__kopf:hover, #bildStart .fed__kopf:hover { background: rgba(255,255,255,.03); } #bildDashboard .fed__sym, #bildStart .fed__sym { width: 28px; height: 28px; flex: none; display: grid; place-content: center; color: var(--pink); } #bildDashboard .fed__sym svg, #bildStart .fed__sym svg { width: 16px; height: 16px; } #bildDashboard .fed__titel, #bildStart .fed__titel { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; } #bildDashboard .fed__pfeil, #bildStart .fed__pfeil { width: 22px; height: 22px; flex: none; display: grid; place-content: center; color: var(--text-still); transition: transform .42s cubic-bezier(.34,1.4,.64,1); } #bildDashboard .fed__pfeil svg, #bildStart .fed__pfeil svg { width: 15px; height: 15px; } #bildDashboard .fed__zeile[data-auf="1"] .fed__pfeil, #bildStart .fed__zeile[data-auf="1"] .fed__pfeil { transform: rotate(180deg); } #bildDashboard .fed__koerper, #bildStart .fed__koerper { height: 0; overflow: hidden; transition: height .58s cubic-bezier(.34,1.35,.64,1); } #bildDashboard .fed__innen, #bildStart .fed__innen { padding: 0 16px 17px; font-size: 13px; line-height: 1.6; color: var(--text-leise); opacity: 0; transition: opacity .18s cubic-bezier(.16,1,.3,1); } #bildDashboard .fed__zeile[data-auf="1"] .fed__innen, #bildStart .fed__zeile[data-auf="1"] .fed__innen { opacity: 1; transition-delay: .1s; } #bildDashboard .fed__innen a, #bildStart .fed__innen a { color: var(--gold); font-weight: 700; } /* ───────────────────────────────────────────────────────────────────── RABATTCODE-KARTE (dashboard.html Zeile 958 bis 1013) ───────────────────────────────────────────────────────────────────── */ /* ===== RABATTCODE (Mert: "mein Code nicht als Bereich, sondern irgendwo rein schreiben") - er gehoert zwischen die Zahlen und die Arbeit, nicht in ein eigenes Menue. Ein Code, den man sucht, wird nicht genannt. ===== */ #bildDashboard .code, #bildStart .code { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } #bildDashboard .code__feld, #bildStart .code__feld { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 210px; padding: 14px 16px; border-radius: 13px; background: rgba(255,255,255,.05); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border: 1px dashed rgba(255,75,126,.4); } #bildDashboard .code__wert, #bildStart .code__wert { font-family: var(--anzeige); font-size: 22px; font-weight: 800; letter-spacing: .06em; color: var(--text); flex: 1; min-width: 0; word-break: break-all; } #bildDashboard .code__wert.leer, #bildStart .code__wert.leer { font-size: 14px; letter-spacing: 0; color: var(--text-still); font-weight: 600; } #bildDashboard .code__kopieren, #bildStart .code__kopieren { padding: 10px 15px; border-radius: 999px; border: 0; flex: none; font-size: 12.5px; font-weight: 700; color: #fff; background: rgba(255,255,255,.06); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border: 1px solid rgba(255,255,255,.13); } #bildDashboard .code__kopieren[data-ok="1"], #bildStart .code__kopieren[data-ok="1"] { background: var(--gruen); color: #0B120D; } #bildDashboard .code__dazu, #bildStart .code__dazu { flex: 1; min-width: 190px; font-size: 12px; color: var(--text-leise); line-height: 1.55; margin: 0; } #bildDashboard .code__dazu b, #bildStart .code__dazu b { color: var(--text); } #bildDashboard .code__badge, #bildStart .code__badge { display: inline-flex; align-items: center; gap: 6px; color: var(--gold); /* nicht Pink: pinker Text auf Dunkel ist verboten */ font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } #bildDashboard .code__badge::before, #bildStart .code__badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 12px rgba(255,75,126,.65); } #bildDashboard .code__haupt, #bildStart .code__haupt { flex: 1; min-width: min(100%, 300px); } #bildDashboard .code__regel, #bildStart .code__regel { flex: 1.15; min-width: min(100%, 310px); margin: 0; padding-left: 18px; border-left: 1px solid var(--linie); color: var(--text-leise); font-size: 12px; line-height: 1.62; } #bildDashboard .code__regel b, #bildStart .code__regel b { color: var(--text); } #bildDashboard .code__messung, #bildStart .code__messung { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 18px; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); } #bildDashboard .code__kennzahl, #bildStart .code__kennzahl { min-width: 0; padding: 17px 18px; border-right: 1px solid var(--linie); } #bildDashboard .code__kennzahl:first-child, #bildStart .code__kennzahl:first-child { padding-left: 0; } #bildDashboard .code__kennzahl:last-child, #bildStart .code__kennzahl:last-child { padding-right: 0; border-right: 0; } #bildDashboard .code__kennzahl span, #bildStart .code__kennzahl span { display: block; color: var(--text-still); font-size: 10.5px; line-height: 1.45; } #bildDashboard .code__kennzahl b, #bildStart .code__kennzahl b { display: block; margin: 5px 0 3px; color: var(--text); font-family: var(--anzeige); font-size: 21px; line-height: 1.15; } #bildDashboard .code__stand, #bildStart .code__stand { margin: 11px 0 0; color: var(--text-still); font-size: 10.5px; line-height: 1.5; } @container dashrahmen (max-width: 620px) { #bildDashboard .code__regel, #bildStart .code__regel { padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--linie); } #bildDashboard .code__messung, #bildStart .code__messung { grid-template-columns: 1fr; } #bildDashboard .code__kennzahl, #bildStart .code__kennzahl, #bildDashboard .code__kennzahl:first-child, #bildStart .code__kennzahl:first-child, #bildDashboard .code__kennzahl:last-child, #bildStart .code__kennzahl:last-child { padding: 13px 0; border-right: 0; border-bottom: 1px solid var(--linie); } #bildDashboard .code__kennzahl:last-child, #bildStart .code__kennzahl:last-child { border-bottom: 0; } } /* ───────────────────────────────────────────────────────────────────── GEMERKT (dashboard.html Zeile 1014 bis 1030) ───────────────────────────────────────────────────────────────────── */ /* ===== GEMERKT ========================================================== */ #bildDashboard .merk, #bildStart .merk { display: grid; gap: 9px; } #bildDashboard .merk__e, #bildStart .merk__e { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--flaeche-2); border: 1px solid var(--linie); text-decoration: none; color: inherit; transition: border-color .18s, transform .18s; } #bildDashboard .merk__e:hover, #bildStart .merk__e:hover { border-color: rgba(229,20,42,.35); transform: translateX(2px); } #bildDashboard .merk__art, #bildStart .merk__art { font-size: 9.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; flex: none; background: rgba(255,75,126,.14); color: var(--pink); } #bildDashboard .merk__t, #bildStart .merk__t { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; } #bildDashboard .merk__pfeil, #bildStart .merk__pfeil { width: 15px; height: 15px; flex: none; color: var(--text-still); } /* ───────────────────────────────────────────────────────────────────── HINWEIS GANZ OBEN (Mert, 21.08.2026) (dashboard.html Zeile 1031 bis 1069) ───────────────────────────────────────────────────────────────────── */ /* ===== HINWEIS GANZ OBEN (Mert, 21.08.2026) ============================= "Mach ganz oben so eine Meldung. Dashboard kann noch nicht ganz funktionieren ... so wie Beta, aber so, dass sie das auch verstehen." Bewusst OHNE das Wort "Beta": Creator sind keine Entwickler. "Beta" erklaert nichts, "kann noch haken" schon. Der Streifen steht ueber allem anderen, ist aber nicht rot wie eine Fehlermeldung - es ist kein Fehler, sondern eine Ansage. ====================================================================== */ #bildDashboard .hinw, #bildStart .hinw { display: flex; align-items: flex-start; gap: 12px; padding: 13px 15px; margin-bottom: 18px; border-radius: 13px; background: linear-gradient(135deg, rgba(232,192,122,.12), rgba(232,192,122,.05)); border: 1px solid rgba(232,192,122,.30); } #bildDashboard .hinw__sym, #bildStart .hinw__sym { width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-content: center; background: rgba(232,192,122,.16); color: var(--gold); } #bildDashboard .hinw__sym svg, #bildStart .hinw__sym svg { width: 16px; height: 16px; } #bildDashboard .hinw__text, #bildStart .hinw__text { flex: 1; min-width: 0; } #bildDashboard .hinw__was, #bildStart .hinw__was { margin: 0 0 3px; font-size: 13px; font-weight: 700; color: var(--text); } #bildDashboard .hinw__dazu, #bildStart .hinw__dazu { margin: 0; font-size: 12px; line-height: 1.55; color: var(--text-leise); } #bildDashboard .hinw__dazu b, #bildStart .hinw__dazu b { color: var(--text); font-weight: 700; } #bildDashboard .hinw__zu, #bildStart .hinw__zu { width: 28px; height: 28px; flex: none; border: 0; background: none; border-radius: 8px; color: var(--text-still); display: grid; place-content: center; } #bildDashboard .hinw__zu:hover, #bildStart .hinw__zu:hover { background: rgba(255,255,255,.06); color: var(--text); } #bildDashboard .hinw__zu svg, #bildStart .hinw__zu svg { width: 14px; height: 14px; } @container dashrahmen (max-width: 560px) { #bildDashboard .hinw, #bildStart .hinw { padding: 12px 13px; gap: 10px; } #bildDashboard .hinw__dazu, #bildStart .hinw__dazu { font-size: 11.5px; } } /* ───────────────────────────────────────────────────────────────────── KANÄLE: EIGENE KNÖPFE JE KACHEL (Mert, 21.08.2026) (dashboard.html Zeile 1070 bis 1135) ───────────────────────────────────────────────────────────────────── */ /* ===== KANÄLE: EIGENE KNÖPFE JE KACHEL (Mert, 21.08.2026) =============== "Man soll hier so Miniknöpfe drücken, um alles selbst bearbeiten zu können ... auf Plus drücken, auf Minus. Freie Wahl. Mit Animation." Die Knöpfe liegen IN der Kachel, nicht darunter: wer etwas ändern will, zeigt auf das, was er ändert. Sie erscheinen beim Zeigen und sind auf Geräten ohne Mauszeiger dauerhaft da - sonst wären sie dort unerreichbar. ====================================================================== */ #bildDashboard .kanal, #bildStart .kanal { position: relative; } #bildDashboard .kanal__knoepfe, #bildStart .kanal__knoepfe { position: absolute; top: 7px; right: 7px; display: flex; gap: 4px; opacity: 0; transform: translateY(-3px); transition: opacity .18s, transform .18s cubic-bezier(.34,1.4,.64,1); } #bildDashboard .kanal:hover .kanal__knoepfe, #bildStart .kanal:hover .kanal__knoepfe, #bildDashboard .kanal:focus-within .kanal__knoepfe, #bildStart .kanal:focus-within .kanal__knoepfe { opacity: 1; transform: none; } @media (hover: none) { #bildDashboard .kanal__knoepfe, #bildStart .kanal__knoepfe { opacity: 1; transform: none; } } #bildDashboard .mini, #bildStart .mini { width: 24px; height: 24px; flex: none; border-radius: 7px; border: 1px solid var(--linie); background: var(--flaeche); display: grid; place-content: center; color: var(--text-still); transition: background .16s, color .16s, border-color .16s, transform .16s; } #bildDashboard .mini svg, #bildStart .mini svg { width: 12px; height: 12px; } #bildDashboard .mini:hover, #bildStart .mini:hover { transform: scale(1.12); color: var(--text); border-color: rgba(229,20,42,.45); } #bildDashboard .mini--weg:hover, #bildStart .mini--weg:hover { background: rgba(229,20,42,.16); color: var(--rot); border-color: rgba(229,20,42,.5); } #bildDashboard .mini--dazu:hover, #bildStart .mini--dazu:hover { background: rgba(74,222,128,.14); color: var(--gruen); border-color: rgba(74,222,128,.45); } /* Kachel für einen eigenen Kanal */ #bildDashboard .kanal--neu, #bildStart .kanal--neu { border-style: dashed; border-color: rgba(243,233,236,.22); justify-content: center; color: var(--text-still); } #bildDashboard .kanal--neu:hover, #bildStart .kanal--neu:hover { border-color: rgba(229,20,42,.45); color: var(--text); } #bildDashboard .kanal--neu .kanal__logo, #bildStart .kanal--neu .kanal__logo { background: none; border: 1px dashed var(--linie); } /* Kommen und Gehen - ohne das springt die Reihe hart um. */ @keyframes kanalRein { from { opacity: 0; transform: scale(.9) translateY(-6px); } to { opacity: 1; transform: none; } } @keyframes kanalRaus { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(.88); } } #bildDashboard .kanal--rein, #bildStart .kanal--rein { animation: kanalRein .34s cubic-bezier(.34,1.4,.64,1); } #bildDashboard .kanal--raus, #bildStart .kanal--raus { animation: kanalRaus .26s ease-in forwards; pointer-events: none; } /* Bestätigung, dass wirklich gespeichert wurde - die feste Regel dahinter steht im Skript. */ #bildDashboard .gespeichert, #bildStart .gespeichert { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(14px); z-index: 1400; padding: 10px 18px; border-radius: 999px; background: var(--flaeche); border: 1px solid rgba(74,222,128,.4); color: var(--gruen); font-size: 12.5px; font-weight: 700; display: flex; align-items: center; gap: 8px; opacity: 0; pointer-events: none; transition: opacity .22s, transform .28s cubic-bezier(.34,1.4,.64,1); box-shadow: 0 12px 34px -14px rgba(0,0,0,.8); } #bildDashboard .gespeichert[data-an="1"], #bildStart .gespeichert[data-an="1"] { opacity: 1; transform: translateX(-50%) translateY(0); } #bildDashboard .gespeichert svg, #bildStart .gespeichert svg { width: 14px; height: 14px; } @container dashrahmen (max-width: 720px) { #bildDashboard .gespeichert, #bildStart .gespeichert { bottom: 84px; } } /* ───────────────────────────────────────────────────────────────────── PROFILKARTE GANZ OBEN (Mert, 21.08.2026) (dashboard.html Zeile 1136 bis 1252) ───────────────────────────────────────────────────────────────────── */ /* ===== PROFILKARTE GANZ OBEN (Mert, 21.08.2026) ========================= "Im Dashboard, in der Übersicht, muss das Profil, wo man sein Profil sieht, mit schönen Effekten - das muss über deine Kanäle." ====================================================================== */ #bildDashboard .prof, #bildStart .prof { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; /* Kein eigenes margin: die Ansicht setzt den Abstand ueber ihren gap. Beides zusammen ergab 34px zwischen Profil und Diagramm. */ padding: 14px 15px; border-radius: 16px; background: rgba(255,255,255,.045); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border: 1px solid rgba(255,75,126,.20); } /* Ein weicher Lichtschein, der langsam wandert. Liegt HINTER dem Inhalt und faengt keine Klicks ab. */ #bildDashboard .prof::before, #bildStart .prof::before { content: ""; position: absolute; z-index: 0; pointer-events: none; width: 320px; height: 320px; top: -160px; right: -80px; border-radius: 50%; background: radial-gradient(circle, rgba(255,75,126,.20), transparent 68%); animation: profSchein 14s ease-in-out infinite alternate; } @keyframes profSchein { from { transform: translate(0, 0) scale(1); } to { transform: translate(-40px, 26px) scale(1.16); } } #bildDashboard .prof > *, #bildStart .prof > * { position: relative; z-index: 1; } #bildDashboard .prof__bild, #bildStart .prof__bild { position: relative; width: 58px; height: 58px; flex: none; } #bildDashboard .prof__kreis, #bildStart .prof__kreis { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; /* Glas, aber nicht farblos: ein warmer Schimmer haelt den Kreis am Leben, ohne die verbotene Verlaufsflaeche. */ background: rgba(255,255,255,.06); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); display: flex; align-items: center; justify-content: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -12px 24px -14px rgba(255,75,126,.55), 0 8px 26px -14px rgba(0,0,0,.9); border: 1px solid rgba(255,255,255,.14); padding: 0; cursor: pointer; transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s; } #bildDashboard .prof__kreis:hover, #bildStart .prof__kreis:hover { transform: scale(1.05); box-shadow: 0 12px 30px -12px rgba(229,20,42,.95); } #bildDashboard .prof__kreis:active, #bildStart .prof__kreis:active { transform: scale(.97); } #bildDashboard .prof__kreis:focus-visible, #bildStart .prof__kreis:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; } /* Das Plus sitzt AUSSERHALB des beschnittenen Kreises - im Kreis wuerde overflow:hidden es anschneiden (der Fehler vom Kamera-Knopf). */ #bildDashboard .prof__plus, #bildStart .prof__plus { position: absolute; right: -3px; bottom: -3px; width: 27px; height: 27px; border-radius: 50%; border: 2px solid var(--flaeche); cursor: pointer; background: var(--text); color: var(--grund); display: grid; place-content: center; padding: 0; z-index: 2; box-shadow: 0 3px 10px -3px rgba(0,0,0,.7); transition: transform .2s cubic-bezier(.22,1,.36,1), background .2s; } #bildDashboard .prof__plus svg, #bildStart .prof__plus svg { width: 13px; height: 13px; } #bildDashboard .prof__plus:hover, #bildStart .prof__plus:hover { transform: scale(1.14) rotate(90deg); background: var(--pink); color: #fff; } #bildDashboard .prof__plus:active, #bildStart .prof__plus:active { transform: scale(.94); } #bildDashboard .prof__plus:focus-visible, #bildStart .prof__plus:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; } #bildDashboard .prof__kreis img, #bildStart .prof__kreis img { width: 100%; height: 100%; object-fit: cover; } #bildDashboard .prof__buch, #bildStart .prof__buch { font-family: var(--anzeige); font-size: 26px; font-weight: 800; color: #fff; letter-spacing: -.02em; } /* WARUM eigene Regeln fuer den Helden: Die Kreise zentrieren ihren Inhalt mit place-content:center. Dabei ist die Spaltenbreite die INHALTSBREITE - ein SVG ohne width/height ist darin 0 breit, und "width:100%" auf dem Span misst sich an genau dieser 0. Der Held war also im Dokument, aber 0x0 gross: gewaehlt und trotzdem unsichtbar. Absolut ueber den Kreis gelegt gibt es diesen Zirkel nicht. */ #bildDashboard .prof__kreis, #bildStart .prof__kreis, #bildDashboard .pbild__kreis, #bildStart .pbild__kreis { position: relative; } #bildDashboard .prof__buch--held, #bildStart .prof__buch--held, #bildDashboard .pbild__buch--held, #bildStart .pbild__buch--held { position: absolute; inset: 0; width: auto; height: auto; display: block; } #bildDashboard .prof__buch--held svg, #bildStart .prof__buch--held svg, #bildDashboard .pbild__buch--held svg, #bildStart .pbild__buch--held svg { display: block; width: 100%; height: 100%; } /* Ring, der einmal aufleuchtet - liegt AUSSERHALB des beschnittenen Kreises, sonst wuerde er abgeschnitten. */ #bildDashboard .prof__ring, #bildStart .prof__ring { position: absolute; inset: -5px; border-radius: 50%; pointer-events: none; border: 1.5px solid rgba(255,75,126,.45); animation: profRing 3.4s ease-out infinite; } @keyframes profRing { 0% { transform: scale(1); opacity: .8; } 70% { transform: scale(1.14); opacity: 0; } 100% { transform: scale(1.14); opacity: 0; } } #bildDashboard .prof__wer, #bildStart .prof__wer { flex: 1; min-width: 140px; } #bildDashboard .prof__name, #bildStart .prof__name { font-family: var(--anzeige); font-size: 17.5px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 2px; } #bildDashboard .prof__unter, #bildStart .prof__unter { font-size: 12.5px; color: var(--text-leise); margin: 0; } #bildDashboard .prof__unter b, #bildStart .prof__unter b { color: var(--text); font-weight: 700; } #bildDashboard .prof__knopf, #bildStart .prof__knopf { padding: 10px 17px; border-radius: 999px; flex: none; border: 1px solid rgba(255,75,126,.35); background: rgba(255,255,255,.04); color: var(--text); font-size: 13px; font-weight: 700; transition: background .18s, border-color .18s, transform .18s; } #bildDashboard .prof__knopf:hover, #bildStart .prof__knopf:hover { background: rgba(255,255,255,.06); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border: 1px solid rgba(255,255,255,.13); border-color: transparent; transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { #bildDashboard .prof::before, #bildStart .prof::before, #bildDashboard .prof__ring, #bildStart .prof__ring { animation: none; } } /* ───────────────────────────────────────────────────────────────────── AVATARE (Mert, 21.08.2026) (dashboard.html Zeile 1253 bis 1284) ───────────────────────────────────────────────────────────────────── */ /* ===== AVATARE (Mert, 21.08.2026) ======================================= "Mach hier kreative Avatars rein, in so Comic-Grafiken, was zu Creatorn passt." Selbst gezeichnet, nicht nachgebaut: fremde Figuren sind geschuetzt und haetten in einem Vertragsportal nichts zu suchen. Der Stil ist derselbe runde, freundliche - kraeftige Flaechen, kein Strich, ein Akzent pro Figur. Alle acht kommen aus einem Farbsatz, damit sie nebeneinander wie eine Familie aussehen und nicht wie ein Sammelsurium. ====================================================================== */ /* Klein und NEBEN dem Bild (Mert, 21.08.2026: "zu gross, darf nicht so viel Platz nehmen, ganz klein und neben dem Profilbild"). Vier je Reihe, zwei Reihen - so steht die Auswahl auf gleicher Hoehe wie das Bild statt darunter eine halbe Seite zu fuellen. */ #bildDashboard .ava, #bildStart .ava { display: grid; grid-template-columns: repeat(4, 34px); gap: 7px; align-content: center; } @container dashrahmen (min-width: 560px) { #bildDashboard .ava, #bildStart .ava { grid-template-columns: repeat(8, 34px); } } #bildDashboard .ava__w, #bildStart .ava__w { position: relative; width: 34px; height: 34px; border-radius: 50%; border: 2px solid transparent; background: var(--flaeche-2); padding: 0; overflow: hidden; cursor: pointer; transition: transform .18s cubic-bezier(.34,1.4,.64,1), border-color .16s; } #bildDashboard .ava__w:hover, #bildStart .ava__w:hover { transform: scale(1.14); } #bildDashboard .ava__w[aria-pressed="true"], #bildStart .ava__w[aria-pressed="true"] { border-color: var(--pink); } #bildDashboard .ava__w svg, #bildStart .ava__w svg { width: 100%; height: 100%; display: block; } #bildDashboard .ava__titel, #bildStart .ava__titel { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-still); margin: 0 0 7px; } #bildDashboard .ava__block, #bildStart .ava__block { display: flex; flex-direction: column; justify-content: center; } /* ───────────────────────────────────────────────────────────────────── MITTEILUNGEN (Mert, 21.08.2026) (dashboard.html Zeile 1285 bis 1371) ───────────────────────────────────────────────────────────────────── */ /* ===== MITTEILUNGEN (Mert, 21.08.2026) ================================== "Relevante Mitteilungen, wirklich funktionsfaehig. Nur wenn eine Mitteilung kommt, rot blinken lassen. Wenn keine Nachrichten sind bzw. geoeffnet ist, kein rotes Blinken mehr." Die Mitteilungen sind KEINE Deko: sie entstehen aus dem echten Stand - Vertrag unterschrieben? Profil vollstaendig? Kanal hinterlegt? Code da? Was erledigt ist, verschwindet von selbst. ====================================================================== */ #bildDashboard .wkz__punkt, #bildStart .wkz__punkt { animation: glocke 1.6s ease-in-out infinite; } @keyframes glocke { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: .55; } } #bildDashboard .wkz__punkt[data-gelesen="1"], #bildStart .wkz__punkt[data-gelesen="1"] { animation: none; display: none; } #bildDashboard .mitt, #bildStart .mitt { position: absolute; top: 52px; right: 0; z-index: 80; width: min(340px, calc(100vw - 28px)); background: var(--flaeche); border: 1px solid var(--linie); border-radius: 15px; box-shadow: 0 24px 60px -22px rgba(0,0,0,.9); opacity: 0; transform: translateY(-8px) scale(.97); pointer-events: none; transition: opacity .2s, transform .24s cubic-bezier(.34,1.4,.64,1); overflow: hidden; } #bildDashboard .mitt[data-auf="1"], #bildStart .mitt[data-auf="1"] { opacity: 1; transform: none; pointer-events: auto; } #bildDashboard .mitt__kopf, #bildStart .mitt__kopf { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 11px; border-bottom: 1px solid var(--linie); } #bildDashboard .mitt__kopf h3, #bildStart .mitt__kopf h3 { font-family: var(--anzeige); font-size: 14.5px; font-weight: 700; margin: 0; } #bildDashboard .mitt__alle, #bildStart .mitt__alle { border: 0; background: none; color: var(--gold); font-size: 11.5px; font-weight: 700; padding: 0; } #bildDashboard .mitt__liste, #bildStart .mitt__liste { max-height: 340px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #60414D #120D11; } #bildDashboard .mitt__liste::-webkit-scrollbar, #bildStart .mitt__liste::-webkit-scrollbar { width: 9px; } #bildDashboard .mitt__liste::-webkit-scrollbar-track, #bildStart .mitt__liste::-webkit-scrollbar-track { background: #120D11; border-left: 1px solid var(--linie); } #bildDashboard .mitt__liste::-webkit-scrollbar-thumb, #bildStart .mitt__liste::-webkit-scrollbar-thumb { background: #60414D; border: 2px solid #120D11; border-radius: 8px; } #bildDashboard .mitt__liste::-webkit-scrollbar-thumb:hover, #bildStart .mitt__liste::-webkit-scrollbar-thumb:hover { background: #875267; } html.hell #bildDashboard .mitt__liste, html.hell #bildStart .mitt__liste { scrollbar-color: #A88793 #E8E1E4; } html.hell #bildDashboard .mitt__liste::-webkit-scrollbar-track, html.hell #bildStart .mitt__liste::-webkit-scrollbar-track { background: #E8E1E4; } html.hell #bildDashboard .mitt__liste::-webkit-scrollbar-thumb, html.hell #bildStart .mitt__liste::-webkit-scrollbar-thumb { background: #A88793; border-color: #E8E1E4; } html.hell #bildDashboard .mitt__liste::-webkit-scrollbar-thumb:hover, html.hell #bildStart .mitt__liste::-webkit-scrollbar-thumb:hover { background: #88606E; } #bildDashboard .mitt__e, #bildStart .mitt__e { display: flex; gap: 11px; padding: 12px 16px; width: 100%; border: 0; background: none; text-align: left; color: inherit; border-bottom: 1px solid var(--linie); transition: background .16s; } #bildDashboard .mitt__e:last-child, #bildStart .mitt__e:last-child { border-bottom: 0; } #bildDashboard .mitt__e:hover, #bildStart .mitt__e:hover { background: var(--flaeche-2); } #bildDashboard .mitt__e[data-neu="1"], #bildStart .mitt__e[data-neu="1"] { background: rgba(229,20,42,.05); } #bildDashboard .mitt__sym, #bildStart .mitt__sym { width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-content: center; } #bildDashboard .mitt__sym svg, #bildStart .mitt__sym svg { width: 15px; height: 15px; } #bildDashboard .mitt__t, #bildStart .mitt__t { flex: 1; min-width: 0; } #bildDashboard .mitt__was, #bildStart .mitt__was { font-size: 12.5px; font-weight: 600; margin: 0 0 2px; } #bildDashboard .mitt__dazu, #bildStart .mitt__dazu { font-size: 11px; color: var(--text-still); margin: 0; line-height: 1.45; } #bildDashboard .mitt__punkt, #bildStart .mitt__punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--rot); flex: none; margin-top: 5px; } #bildDashboard .mitt__e[data-neu="0"] .mitt__punkt, #bildStart .mitt__e[data-neu="0"] .mitt__punkt { visibility: hidden; } #bildDashboard .mitt__leer, #bildStart .mitt__leer { padding: 26px 16px; text-align: center; font-size: 12px; color: var(--text-still); } #bildDashboard .kopf__werkzeuge, #bildStart .kopf__werkzeuge { position: relative; } @media (prefers-reduced-motion: reduce) { #bildDashboard .wkz__punkt, #bildStart .wkz__punkt { animation: none; } } /* ───────────────────────────────────────────────────────────────────── BEWEGUNG BEI AVATAREN UND PROFILBILD (Mert, 21.08.2026) (dashboard.html Zeile 1372 bis 1465) ───────────────────────────────────────────────────────────────────── */ /* ===== BEWEGUNG BEI AVATAREN UND PROFILBILD (Mert, 21.08.2026) ========== "+animationen auch bei den avatars und pb" Zwei Regeln dabei: nichts blinkt, und nichts bewegt sich dauerhaft schnell. Ein Avatarfeld, das staendig zappelt, macht die Seite unruhig - also atmen die Figuren nur langsam, versetzt zueinander, und werden lebhaft erst beim Zeigen. ====================================================================== */ @keyframes avaAtmen { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-2px) rotate(-1.5deg); } } #bildDashboard .ava__w svg, #bildStart .ava__w svg { animation: avaAtmen 4.2s ease-in-out infinite; } /* Versetzt, sonst wippen alle acht im Gleichschritt wie eine Reihe Soldaten. */ #bildDashboard .ava__w:nth-child(2) svg, #bildStart .ava__w:nth-child(2) svg { animation-delay: .5s; } #bildDashboard .ava__w:nth-child(3) svg, #bildStart .ava__w:nth-child(3) svg { animation-delay: 1s; } #bildDashboard .ava__w:nth-child(4) svg, #bildStart .ava__w:nth-child(4) svg { animation-delay: 1.5s; } #bildDashboard .ava__w:nth-child(5) svg, #bildStart .ava__w:nth-child(5) svg { animation-delay: 2s; } #bildDashboard .ava__w:nth-child(6) svg, #bildStart .ava__w:nth-child(6) svg { animation-delay: 2.5s; } #bildDashboard .ava__w:nth-child(7) svg, #bildStart .ava__w:nth-child(7) svg { animation-delay: 3s; } #bildDashboard .ava__w:nth-child(8) svg, #bildStart .ava__w:nth-child(8) svg { animation-delay: 3.5s; } #bildDashboard .ava__w:hover svg, #bildStart .ava__w:hover svg { animation: avaHuepf .6s cubic-bezier(.34,1.5,.64,1); } @keyframes avaHuepf { 0% { transform: translateY(0) scale(1); } 35% { transform: translateY(-5px) scale(1.06) rotate(-4deg); } 65% { transform: translateY(1px) scale(.98) rotate(2deg); } 100% { transform: translateY(0) scale(1); } } /* Der Gewaehlte hebt sich dauerhaft ab - ohne zu zappeln. */ #bildDashboard .ava__w[aria-pressed="true"], #bildStart .ava__w[aria-pressed="true"] { transform: translateY(-2px); } #bildDashboard .ava__w[aria-pressed="true"] svg, #bildStart .ava__w[aria-pressed="true"] svg { animation: avaAtmen 3s ease-in-out infinite; } /* Kurzer Ring beim Waehlen: die Bestaetigung, dass der Klick ankam. */ #bildDashboard .ava__w.ava--neu::before, #bildStart .ava__w.ava--neu::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--pink); animation: avaRing .7s ease-out forwards; } @keyframes avaRing { from { transform: scale(.8); opacity: .9; } to { transform: scale(1.35); opacity: 0; } } /* --- Profilbild ------------------------------------------------------- */ #bildDashboard .pbild__kreis, #bildStart .pbild__kreis { animation: pbAtmen 6s ease-in-out infinite; transition: transform .3s cubic-bezier(.34,1.4,.64,1), box-shadow .3s; } @keyframes pbAtmen { 0%, 100% { box-shadow: 0 10px 30px -14px rgba(229,20,42,.70); } 50% { box-shadow: 0 14px 38px -12px rgba(255,75,126,.85); } } #bildDashboard .pbild__huelle:hover .pbild__kreis, #bildStart .pbild__huelle:hover .pbild__kreis { transform: scale(1.04); } /* Ein Ring, der alle paar Sekunden nach aussen laeuft. Liegt AUSSERHALB des Kreises, der fuer das Bild abschneidet - sonst waere er weg. */ #bildDashboard .pbild__huelle::after, #bildStart .pbild__huelle::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid rgba(255,75,126,.40); pointer-events: none; animation: pbRing 3.8s ease-out infinite; } @keyframes pbRing { 0% { transform: scale(1); opacity: .75; } 65% { transform: scale(1.16); opacity: 0; } 100% { transform: scale(1.16); opacity: 0; } } /* Das Fragezeichen wippt leise mit - es ist der Platzhalter, kein Fehler. */ #bildDashboard .pbild__buch, #bildStart .pbild__buch { animation: avaAtmen 5s ease-in-out infinite; } #bildDashboard .pbild__knopf, #bildStart .pbild__knopf { transition: background .18s, transform .2s cubic-bezier(.34,1.5,.64,1); } #bildDashboard .pbild__huelle:hover .pbild__knopf, #bildStart .pbild__huelle:hover .pbild__knopf { transform: scale(1.12) rotate(90deg); } @media (prefers-reduced-motion: reduce) { #bildDashboard .ava__w svg, #bildStart .ava__w svg, #bildDashboard .pbild__kreis, #bildStart .pbild__kreis, #bildDashboard .pbild__buch, #bildStart .pbild__buch, #bildDashboard .pbild__huelle::after, #bildStart .pbild__huelle::after, #bildDashboard .ava__w.ava--neu::before, #bildStart .ava__w.ava--neu::before { animation: none !important; } } /* Verbundene Kanaele in der Profilkarte (Mert, 21.08.2026: "neben Profil oeffnen was Relevantes, mit dem Social Media womit man sich verbunden hat, mit Logo, Namen usw"). Steht neben dem Knopf, nicht darunter - die Karte soll nicht wachsen. */ #bildDashboard .prof__kanaele, #bildStart .prof__kanaele { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; } #bildDashboard .prof__chip, #bildStart .prof__chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 8px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--linie); text-decoration: none; color: var(--text); font-size: 12px; font-weight: 600; transition: border-color .18s, transform .18s, background .18s; } #bildDashboard .prof__chip:hover, #bildStart .prof__chip:hover { border-color: rgba(255,75,126,.45); transform: translateY(-2px); background: rgba(255,255,255,.08); } #bildDashboard .prof__chip svg, #bildStart .prof__chip svg { width: 15px; height: 15px; fill: currentColor; flex: none; } #bildDashboard .prof__chip b, #bildStart .prof__chip b { font-weight: 700; } #bildDashboard .prof__leer, #bildStart .prof__leer { font-size: 12px; color: var(--text-still); } #bildDashboard .prof__unten, #bildStart .prof__unten { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; width: 100%; margin-top: 4px; } /* ───────────────────────────────────────────────────────────────────── WARTEWELLE IM LEEREN DIAGRAMM (Mert, 21.08.2026) (dashboard.html Zeile 1466 bis 1502) ───────────────────────────────────────────────────────────────────── */ /* ===== WARTEWELLE IM LEEREN DIAGRAMM (Mert, 21.08.2026) ================= "Man soll hier trotzdem was sehen, Schwingungen usw, aber so dass es wieder zu null wird, dann mit der Anzeige: sobald dein erstes Video..." Eine Welle, die von links hereinlaeuft, kurz ausschlaegt und wieder auf die Nulllinie zurueckgeht. Sie zeigt, dass hier eine Kurve HINGEHOERT - ohne Zahlen zu behaupten, die es nicht gibt. Deshalb blass und ohne Achsenbeschriftung. */ /* Mert, 21.08.2026: "darf das nicht transparent sein, erst dann ab 10 %" - und "mach diese Regel bei jedem". Also gilt ueberall dasselbe: waehrend die Bewegung laeuft, ist sie voll da; ausgeblendet wird nur am Ende. */ #bildDashboard .warte, #bildStart .warte { opacity: 1; } #bildDashboard .warte__linie, #bildStart .warte__linie { fill: none; stroke: var(--pink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: warteZeichnen 5.5s cubic-bezier(.45,0,.3,1) infinite; } @keyframes warteZeichnen { 0% { stroke-dashoffset: 1400; opacity: 0; } 3% { opacity: 1; } 55% { stroke-dashoffset: 0; opacity: 1; } /* Zurueck auf null: die Kurve laeuft aus, statt hart zu verschwinden. */ 85% { stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dashoffset: 1400; opacity: 0; } } #bildDashboard .warte__punkt, #bildStart .warte__punkt { fill: var(--pink); animation: wartePunkt 5.5s cubic-bezier(.45,0,.3,1) infinite; } @keyframes wartePunkt { 0%, 45% { opacity: 0; r: 0; } 58% { opacity: 1; r: 4; } 80% { opacity: 1; r: 4; } 88%,100%{ opacity: 0; r: 0; } } /* ───────────────────────────────────────────────────────────────────── SANFTES EINBLENDEN DER GANZEN ÜBERSICHT (dashboard.html Zeile 1503 bis 1530) ───────────────────────────────────────────────────────────────────── */ /* ===== SANFTES EINBLENDEN DER GANZEN ÜBERSICHT ========================= "Die ganze Uebersicht mit Animationen smooth, aber passend und nicht uebertrieben." Also: EINE Bewegung je Block, kurz, versetzt - kein Karussell, kein Zoom, kein Drehen. */ #bildDashboard #aUebersicht > *, #bildStart #aUebersicht > * { animation: sanftRein .55s cubic-bezier(.22,1,.36,1) both; } #bildDashboard #aUebersicht > *:nth-child(1), #bildStart #aUebersicht > *:nth-child(1) { animation-delay: .02s; } #bildDashboard #aUebersicht > *:nth-child(2), #bildStart #aUebersicht > *:nth-child(2) { animation-delay: .09s; } #bildDashboard #aUebersicht > *:nth-child(3), #bildStart #aUebersicht > *:nth-child(3) { animation-delay: .16s; } #bildDashboard #aUebersicht > *:nth-child(4), #bildStart #aUebersicht > *:nth-child(4) { animation-delay: .23s; } #bildDashboard #aUebersicht > *:nth-child(5), #bildStart #aUebersicht > *:nth-child(5) { animation-delay: .30s; } #bildDashboard #aUebersicht > *:nth-child(6), #bildStart #aUebersicht > *:nth-child(6) { animation-delay: .37s; } #bildDashboard #aUebersicht > *:nth-child(7), #bildStart #aUebersicht > *:nth-child(7) { animation-delay: .44s; } #bildDashboard #aUebersicht > *:nth-child(8), #bildStart #aUebersicht > *:nth-child(8) { animation-delay: .51s; } @keyframes sanftRein { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* Karten heben sich beim Zeigen ein Stueck - dieselbe Kurve wie oben, damit sich alles gleich anfuehlt. */ #bildDashboard .kachel, #bildStart .kachel, #bildDashboard .karte, #bildStart .karte, #bildDashboard .kpi, #bildStart .kpi, #bildDashboard .kanal, #bildStart .kanal, #bildDashboard .prof, #bildStart .prof { transition: transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s, border-color .2s; } @media (prefers-reduced-motion: reduce) { #bildDashboard #aUebersicht > *, #bildStart #aUebersicht > *, #bildDashboard .warte__linie, #bildStart .warte__linie, #bildDashboard .warte__punkt, #bildStart .warte__punkt { animation: none !important; opacity: 1 !important; } #bildDashboard .warte__linie, #bildStart .warte__linie { stroke-dashoffset: 0; } } /* ───────────────────────────────────────────────────────────────────── KANALAUSWAHL (Mert, 21.08.2026) (dashboard.html Zeile 1531 bis 1594) ───────────────────────────────────────────────────────────────────── */ /* ===== KANALAUSWAHL (Mert, 21.08.2026) ================================== "Funktioniert nicht, fehlerhaft, und da muss Logo von Facebook und YouTube kommen, also eine Auswahloption einblenden." Vorher war es ein prompt() mit Nummern zum Eintippen - das sieht auf jedem Geraet anders aus, zeigt keine Logos und laesst sich nicht gestalten. Jetzt eine echte Auswahl mit denselben Kacheln wie oben. ====================================================================== */ #bildDashboard .wahl, #bildStart .wahl { position: fixed; inset: 0; z-index: 1500; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(8,5,7,.72); backdrop-filter: blur(6px); } #bildDashboard .wahl[data-auf="1"], #bildStart .wahl[data-auf="1"] { display: flex; animation: wahlAuf .22s ease-out; } @keyframes wahlAuf { from { opacity: 0; } to { opacity: 1; } } #bildDashboard .wahl__kasten, #bildStart .wahl__kasten { width: min(420px, 100%); background: var(--flaeche); border: 1px solid var(--linie); border-radius: 18px; padding: 20px; box-shadow: 0 30px 70px -24px rgba(0,0,0,.9); animation: wahlRein .3s cubic-bezier(.22,1,.36,1); } @keyframes wahlRein { from { transform: translateY(16px) scale(.97); } to { transform: none; } } #bildDashboard .wahl__kopf, #bildStart .wahl__kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } #bildDashboard .wahl__kopf h3, #bildStart .wahl__kopf h3 { font-family: var(--anzeige); font-size: 16px; font-weight: 700; margin: 0; } #bildDashboard .wahl__zu, #bildStart .wahl__zu { width: 30px; height: 30px; border: 0; background: none; border-radius: 8px; color: var(--text-still); } #bildDashboard .wahl__zu:hover, #bildStart .wahl__zu:hover { background: var(--flaeche-2); color: var(--text); } #bildDashboard .wahl__zu svg, #bildStart .wahl__zu svg { width: 15px; height: 15px; } #bildDashboard .wahl__dazu, #bildStart .wahl__dazu { font-size: 12px; color: var(--text-still); margin: 0 0 14px; } #bildDashboard .wahl__reihe, #bildStart .wahl__reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; } #bildDashboard .wahl__k, #bildStart .wahl__k { display: flex; align-items: center; gap: 10px; padding: 12px 13px; border-radius: 12px; border: 1px solid var(--linie); background: var(--flaeche-2); color: inherit; text-align: left; font-size: 13px; font-weight: 600; transition: border-color .18s, transform .18s, background .18s; } #bildDashboard .wahl__k:hover, #bildStart .wahl__k:hover { border-color: rgba(229,20,42,.45); transform: translateY(-2px); background: rgba(255,255,255,.04); } #bildDashboard .wahl__k span.l, #bildStart .wahl__k span.l { width: 30px; height: 30px; flex: none; border-radius: 8px; display: grid; place-content: center; background: var(--flaeche); } #bildDashboard .wahl__k span.l svg, #bildStart .wahl__k span.l svg { width: 17px; height: 17px; fill: currentColor; } #bildDashboard .wahl__k--eigen, #bildStart .wahl__k--eigen { grid-column: 1 / -1; border-style: dashed; justify-content: center; color: var(--text-still); } #bildDashboard .wahl__k--eigen:hover, #bildStart .wahl__k--eigen:hover { color: var(--text); } #bildDashboard .wahl__feld, #bildStart .wahl__feld { display: none; gap: 8px; margin-top: 13px; } #bildDashboard .wahl__feld[data-auf="1"], #bildStart .wahl__feld[data-auf="1"] { display: flex; flex-wrap: wrap; } #bildDashboard .wahl__feld input, #bildStart .wahl__feld input { flex: 1; min-width: 150px; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--linie); background: var(--flaeche-2); color: var(--text); font: inherit; font-size: 13.5px; } #bildDashboard .wahl__feld button, #bildStart .wahl__feld button { padding: 11px 16px; border-radius: 10px; border: 0; font-size: 13px; font-weight: 700; background: rgba(74,222,128,.14); border: 1px solid rgba(74,222,128,.3); color: var(--gruen); } /* Der grosse Kreis leuchtet einmal auf, wenn ein Held gewaehlt wurde. */ #bildDashboard .pbild__kreis--an, #bildStart .pbild__kreis--an { animation: kreisAn .85s cubic-bezier(.22,1,.36,1); } @keyframes kreisAn { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,75,126,.55); } 35% { transform: scale(1.07); box-shadow: 0 0 0 12px rgba(255,75,126,0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,75,126,0); } } /* ───────────────────────────────────────────────────────────────────── WARTEUHR (Mert, 21.08.2026) (dashboard.html Zeile 1595 bis 1615) ───────────────────────────────────────────────────────────────────── */ /* ===== WARTEUHR (Mert, 21.08.2026) ====================================== "Mach alles von 100 auf 0 - also die ganze Uebersicht soll leben." Ein einziger Takt fuer alles: Zielring, Wartewelle im Diagramm und jede leere Zahl laufen im selben 5,5-Sekunden-Rhythmus, nur zeitversetzt. Der Versatz laesst die Bewegung durch die Kacheln wandern, statt dass alles gleichzeitig zappelt. Endstand ist immer der Strich - es steht also nie eine erfundene Zahl da, wenn die Bewegung ruht. ====================================================================== */ #bildDashboard .warte-zahl, #bildStart .warte-zahl { transition: opacity .25s linear; } #bildDashboard .kachel__trend, #bildStart .kachel__trend, #bildDashboard .kpi__zeile2 svg, #bildStart .kpi__zeile2 svg { animation: trendAtmen 5.5s cubic-bezier(.45,0,.35,1) infinite; transform-box: fill-box; transform-origin: 50% 50%; } @keyframes trendAtmen { 0%, 62%, 100% { transform: translateY(0) scale(1); opacity: .7; } 16% { transform: translateY(-2.5px) scale(1.07); opacity: 1; } 40% { transform: translateY(0) scale(1); opacity: 1; } } /* ───────────────────────────────────────────────────────────────────── GLOCKE (Mert, 21.08.2026) (dashboard.html Zeile 1616 bis 1646) ───────────────────────────────────────────────────────────────────── */ /* ===== GLOCKE (Mert, 21.08.2026) ======================================= "Das soll animieren, wenn Nachrichten gekommen sind, die nicht gesehen wurden." Schwungkurve nach der Vorlage von animateicons: erst ein kurzer Ausschlag, dann ausschwingen. Der Kloeppel folgt leicht versetzt - das macht den Unterschied zwischen "wackelt" und "laeutet". Sie schwingt nur bei Ungelesenem und pausiert dazwischen, damit sie nicht dauerhaft zappelt. ====================================================================== */ #bildDashboard #glocke svg, #bildStart #glocke svg { transform-origin: 50% 12%; } #bildDashboard #glocke[data-neu="1"] svg, #bildStart #glocke[data-neu="1"] svg { animation: laeuten 4.4s ease-in-out infinite; } #bildDashboard #glocke[data-neu="1"] svg path:last-child, #bildStart #glocke[data-neu="1"] svg path:last-child { animation: kloeppel 4.4s ease-in-out infinite; } @keyframes laeuten { 0%, 30%, 100% { transform: rotate(0deg); } 2.7% { transform: rotate(7deg); } 7.8% { transform: rotate(-18deg); } 13.5% { transform: rotate(14deg); } 18.6% { transform: rotate(-9deg); } 23.4% { transform: rotate(5deg); } 27% { transform: rotate(-2deg); } } @keyframes kloeppel { 0%, 32%, 100% { transform: translateX(0); } 5% { transform: translateX(1.5px); } 10% { transform: translateX(-5px); } 15.6% { transform: translateX(4px); } 20.7% { transform: translateX(-2.5px); } 25.5% { transform: translateX(1.5px); } 29% { transform: translateX(-1px); } } /* ───────────────────────────────────────────────────────────────────── WECHSEL-WIDGETS (Mert, 21.08.2026) (dashboard.html Zeile 1647 bis 1701) ───────────────────────────────────────────────────────────────────── */ /* ===== WECHSEL-WIDGETS (Mert, 21.08.2026) ============================== "Unter Profil zwei Sections nebeneinander wie ein Widget, die sich immer wechseln - was Relevantes da rein." Beide Karten ziehen aus demselben Vorrat, laufen aber versetzt: nie springen beide gleichzeitig um, und nie steht zweimal dasselbe. Inhalte kommen aus Vertrag und Guideline - keine Fuellsaetze. ====================================================================== */ #bildDashboard .wid, #bildStart .wid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 12px; } #bildDashboard .wid__k, #bildStart .wid__k { position: relative; overflow: hidden; min-height: 104px; border-radius: 14px; border: 1px solid var(--linie); background: var(--flaeche); padding: 11px 12px 10px; display: flex; flex-direction: column; justify-content: space-between; transition: border-color .25s, transform .25s cubic-bezier(.22,1,.36,1); } #bildDashboard .wid__k:hover, #bildStart .wid__k:hover { border-color: rgba(229,20,42,.35); transform: translateY(-2px); } #bildDashboard .wid__k::after, #bildStart .wid__k::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 100% 0%, var(--tf, rgba(255,75,126,.14)), transparent 62%); } #bildDashboard .wid__inhalt, #bildStart .wid__inhalt { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; justify-content: space-between; } #bildDashboard .wid__inhalt[data-raus="1"], #bildStart .wid__inhalt[data-raus="1"] { animation: widRaus .34s cubic-bezier(.4,0,1,1) forwards; } #bildDashboard .wid__inhalt[data-rein="1"], #bildStart .wid__inhalt[data-rein="1"] { animation: widRein .44s cubic-bezier(.22,1,.36,1); } @keyframes widRaus { to { opacity: 0; transform: translateY(-8px); } } @keyframes widRein { from { opacity: 0; transform: translateY(9px); } } #bildDashboard .wid__sym, #bildStart .wid__sym { width: 25px; height: 25px; border-radius: 8px; display: grid; place-content: center; background: var(--tg, rgba(255,75,126,.13)); color: var(--tc, var(--pink)); margin-bottom: 7px; } #bildDashboard .wid__sym svg, #bildStart .wid__sym svg { width: 13px; height: 13px; } #bildDashboard .wid__auge, #bildStart .wid__auge { font-size: 9px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--text-still); margin: 0 0 4px; } #bildDashboard .wid__was, #bildStart .wid__was { font-family: var(--anzeige); font-size: 13.5px; font-weight: 700; line-height: 1.22; letter-spacing: -.01em; margin: 0 0 4px; } #bildDashboard .wid__dazu, #bildStart .wid__dazu { font-size: 11px; line-height: 1.38; color: var(--text-still); margin: 0; } /* Punkte zeigen, wie viele Karten im Umlauf sind und wo man gerade ist. */ #bildDashboard .wid__punkte, #bildStart .wid__punkte { display: flex; gap: 3px; margin-top: 8px; } #bildDashboard .wid__punkt, #bildStart .wid__punkt { width: 4px; height: 4px; border-radius: 99px; background: var(--linie); transition: background .3s, width .3s; } /* Mert, 21.08.2026: "Mach die Farbe vom Symbol passend, immer abwechseln." Der aktive Punkt traegt die Farbe der Karte, die gerade zu sehen ist - wechselt die Karte, wechselt der Punkt mit. */ #bildDashboard .wid__punkt[data-an="1"], #bildStart .wid__punkt[data-an="1"] { width: 12px; background: var(--tc, var(--pink)); } @container dashrahmen (max-width: 359px) { #bildDashboard .wid, #bildStart .wid { grid-template-columns: 1fr; } } /* ───────────────────────────────────────────────────────────────────── STILLER PROFIL-LINK (dashboard.html Zeile 1702 bis 1780) ───────────────────────────────────────────────────────────────────── */ /* ===== SUCHE (Mert, 21.08.2026) ======================================== "Bei Dashboard muss leicht zu bedienen sein, da ist viel Platz noch - mach es kreativ und mit Suchfunktion." Eine Zeile, die alles findet: Ansichten, Aufgaben, Kanaele, Regeln aus dem Vertrag. Tippen filtert sofort, Pfeiltasten waehlen, Enter springt. Ohne Eingabe stehen die vier haeufigsten Wege da - so ist die Zeile auch dann nuetzlich, wenn man nicht weiss, wonach man suchen soll. ====================================================================== */ #bildDashboard .suche, #bildStart .suche { position: relative; margin-bottom: 14px; } #bildDashboard .suche__feld, #bildStart .suche__feld { display: flex; align-items: center; gap: 9px; padding: 11px 13px; border-radius: 13px; background: var(--flaeche); border: 1px solid var(--linie); transition: border-color .2s, background .2s; } #bildDashboard .suche__feld:focus-within, #bildStart .suche__feld:focus-within { border-color: rgba(255,75,126,.5); background: var(--flaeche-2); } #bildDashboard .suche__feld > svg, #bildStart .suche__feld > svg { width: 16px; height: 16px; flex: none; color: var(--text-still); } #bildDashboard .suche input, #bildStart .suche input { flex: 1; min-width: 0; border: 0; background: none; color: var(--text); font: inherit; font-size: 14px; padding: 0; } #bildDashboard .suche input::placeholder, #bildStart .suche input::placeholder { color: var(--text-still); } #bildDashboard .suche input:focus, #bildStart .suche input:focus { outline: none; } #bildDashboard .suche__taste, #bildStart .suche__taste { font-size: 10px; font-weight: 700; color: var(--text-still); border: 1px solid var(--linie); border-radius: 6px; padding: 2px 6px; flex: none; } @container dashrahmen (max-width: 420px) { #bildDashboard .suche__taste, #bildStart .suche__taste { display: none; } } #bildDashboard .suche__leeren, #bildStart .suche__leeren { width: 22px; height: 22px; border: 0; border-radius: 6px; flex: none; background: var(--flaeche-2); color: var(--text-still); display: none; place-content: center; padding: 0; } #bildDashboard .suche__leeren svg, #bildStart .suche__leeren svg { width: 11px; height: 11px; } #bildDashboard .suche[data-text="1"] .suche__leeren, #bildStart .suche[data-text="1"] .suche__leeren { display: grid; } #bildDashboard .suche[data-text="1"] .suche__taste, #bildStart .suche[data-text="1"] .suche__taste { display: none; } #bildDashboard .suche__treffer, #bildStart .suche__treffer { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 400; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 13px; padding: 5px; display: none; box-shadow: 0 24px 54px -22px rgba(0,0,0,.92); max-height: 320px; overflow-y: auto; } #bildDashboard .suche[data-auf="1"] .suche__treffer, #bildStart .suche[data-auf="1"] .suche__treffer { display: block; animation: suRein .2s cubic-bezier(.22,1,.36,1); } @keyframes suRein { from { opacity: 0; transform: translateY(-5px); } } #bildDashboard .suche__gruppe, #bildStart .suche__gruppe { font-size: 9px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: var(--text-still); padding: 8px 9px 4px; } #bildDashboard .suche__t, #bildStart .suche__t { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 9px; border-radius: 9px; border: 0; background: none; color: inherit; text-align: left; font-size: 13px; } #bildDashboard .suche__t[data-hin="1"], #bildStart .suche__t[data-hin="1"] { background: var(--flaeche-2); } #bildDashboard .suche__t span.s, #bildStart .suche__t span.s { width: 26px; height: 26px; border-radius: 7px; flex: none; display: grid; place-content: center; background: var(--flaeche-2); color: var(--pink); } #bildDashboard .suche[data-auf="1"] .suche__t[data-hin="1"] span.s, #bildStart .suche[data-auf="1"] .suche__t[data-hin="1"] span.s { background: rgba(255,75,126,.14); } #bildDashboard .suche__t span.s svg, #bildStart .suche__t span.s svg { width: 13px; height: 13px; } #bildDashboard .suche__t b, #bildStart .suche__t b { display: block; font-weight: 600; } #bildDashboard .suche__t i, #bildStart .suche__t i { display: block; font-style: normal; font-size: 11px; color: var(--text-still); margin-top: 1px; } #bildDashboard .suche__t mark, #bildStart .suche__t mark { background: rgba(255,75,126,.24); color: inherit; border-radius: 3px; padding: 0 1px; } #bildDashboard .suche__nix, #bildStart .suche__nix { padding: 16px 10px; text-align: center; font-size: 12.5px; color: var(--text-still); } /* Stiller Weg ins Profil: da, aber nicht laut. */ #bildDashboard .prof__still, #bildStart .prof__still { border: 1px solid var(--linie); background: none; padding: 5px 10px; border-radius: 99px; color: var(--text-still); font-size: 11.5px; font-weight: 600; text-decoration: none; transition: color .18s, border-color .18s, background .18s; } #bildDashboard .prof__still:hover, #bildStart .prof__still:hover { color: var(--text); border-color: rgba(255,75,126,.4); background: rgba(255,255,255,.04); } /* ───────────────────────────────────────────────────────────────────── ERFOLGE (Mert, 21.08.2026) (dashboard.html Zeile 1869 bis 1941) ───────────────────────────────────────────────────────────────────── */ /* ===== ERFOLGE (Mert, 21.08.2026) ====================================== Vorlage war eine React-Komponente (shadcn/cva/lucide, AchievementList). Dieses Projekt ist reines HTML - uebernommen ist das VERHALTEN, nicht der Code: Abzeichen links, Text in der Mitte, Fortschrittsring rechts, Erreichtes farbig, Offenes gedaempft. Die Werte kommen aus dem echten Stand, nicht aus einer Beispiel-Liste. ====================================================================== */ #bildDashboard .erf, #bildStart .erf { display: flex; flex-direction: column; gap: 8px; } #bildDashboard .erf__z, #bildStart .erf__z { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 13px; border: 1px solid var(--linie); background: var(--flaeche-2); transition: border-color .2s, transform .2s cubic-bezier(.22,1,.36,1); } #bildDashboard .erf__z:hover, #bildStart .erf__z:hover { border-color: rgba(255,75,126,.35); transform: translateX(2px); } #bildDashboard .erf__z[data-da="1"], #bildStart .erf__z[data-da="1"] { border-color: rgba(74,222,128,.28); background: rgba(74,222,128,.05); } #bildDashboard .erf__b, #bildStart .erf__b { width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-content: center; background: var(--flaeche); color: var(--text-still); } #bildDashboard .erf__b svg, #bildStart .erf__b svg { width: 18px; height: 18px; } #bildDashboard .erf__z[data-da="1"] .erf__b, #bildStart .erf__z[data-da="1"] .erf__b { background: rgba(74,222,128,.14); border: 1px solid rgba(74,222,128,.3); color: var(--gruen); } #bildDashboard .erf__t, #bildStart .erf__t { min-width: 0; flex: 1; } #bildDashboard .erf__t b, #bildStart .erf__t b { display: block; font-size: 13px; font-weight: 700; } #bildDashboard .erf__z[data-da="0"] .erf__t b, #bildStart .erf__z[data-da="0"] .erf__t b { color: var(--text-leise); } #bildDashboard .erf__t i, #bildStart .erf__t i { display: block; font-style: normal; font-size: 11px; color: var(--text-still); margin-top: 1px; } #bildDashboard .erf__r, #bildStart .erf__r { position: relative; width: 38px; height: 38px; flex: none; } #bildDashboard .erf__r svg, #bildStart .erf__r svg { position: absolute; inset: 0; width: 100%; height: 100%; } #bildDashboard .erf__r span, #bildStart .erf__r span { position: absolute; inset: 0; display: grid; place-content: center; font-size: 10px; font-weight: 800; color: var(--text-leise); } #bildDashboard .erf__z[data-da="1"] .erf__r span, #bildStart .erf__z[data-da="1"] .erf__r span { color: var(--gruen); } /* Auf- und zuklappen (Mert, 21.08.2026: "genauso lassen, aber zuklappen und aufklappen koennen, und alles animiert untereinander, glatt"). Die Hoehe laeuft ueber grid-template-rows 0fr -> 1fr. Das ist der einzige Weg, eine unbekannte Hoehe weich zu animieren, ohne sie vorher zu messen und ohne dass es beim letzten Pixel springt. */ #bildDashboard .klapp__kopf, #bildStart .klapp__kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; border: 0; background: none; color: inherit; padding: 0; text-align: left; } #bildDashboard .klapp__kopf h3, #bildStart .klapp__kopf h3 { font-family: var(--anzeige); font-size: 16px; font-weight: 700; margin: 0; } #bildDashboard .klapp__rechts, #bildStart .klapp__rechts { display: flex; align-items: center; gap: 9px; } #bildDashboard .klapp__pfeil, #bildStart .klapp__pfeil { width: 15px; height: 15px; color: var(--text-still); transition: transform .42s cubic-bezier(.22,1,.36,1), color .2s; } #bildDashboard .klapp__kopf:hover .klapp__pfeil, #bildStart .klapp__kopf:hover .klapp__pfeil { color: var(--text); } #bildDashboard .klapp[data-auf="0"] .klapp__pfeil, #bildStart .klapp[data-auf="0"] .klapp__pfeil { transform: rotate(-90deg); } #bildDashboard .klapp__raum, #bildStart .klapp__raum { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .46s cubic-bezier(.22,1,.36,1), opacity .34s ease, margin-top .46s cubic-bezier(.22,1,.36,1); margin-top: 11px; opacity: 1; } #bildDashboard .klapp[data-auf="0"] .klapp__raum, #bildStart .klapp[data-auf="0"] .klapp__raum { grid-template-rows: 0fr; opacity: 0; margin-top: 0; } #bildDashboard .klapp__innen, #bildStart .klapp__innen { overflow: hidden; min-height: 0; } /* Beim Aufklappen laufen die Zeilen nacheinander herein - nicht alle gleichzeitig, das wirkt sonst wie ein Sprung. */ #bildDashboard .klapp[data-auf="1"] .erf__z, #bildStart .klapp[data-auf="1"] .erf__z { animation: erfRein .44s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--n, 0) * 45ms); } @keyframes erfRein { from { opacity: 0; transform: translateY(9px); } } /* ───────────────────────────────────────────────────────────────────── GLAS STATT ROTER FLAECHE (Mert, 21.08.2026) (dashboard.html Zeile 2114 bis 2131) ───────────────────────────────────────────────────────────────────── */ /* ===== GLAS STATT ROTER FLAECHE (Mert, 21.08.2026) ===================== "Dieses rot KI Design fuer immer ausblenden, ich moechte das nicht, achte darauf! Egal wo, es kommt nie gut an, es sieht billig aus und zu alt." Gefuellte Flaechen mit rotem Farbverlauf sind damit ueberall raus. Was aktiv ist, zeigt das jetzt ueber Glas: halbdurchsichtig, weichgezeichnet, mit einer feinen hellen Kante. Rot bleibt Markenfarbe, aber nur noch als AKZENT - Text, Symbol, duenne Linie, kleiner Punkt. ====================================================================== */ #bildDashboard .glas, #bildStart .glas, #bildDashboard .tabs__t[aria-selected="true"], #bildStart .tabs__t[aria-selected="true"], #bildDashboard .weg__r a, #bildStart .weg__r a, #bildDashboard .kipp[aria-pressed="true"], #bildStart .kipp[aria-pressed="true"] { background: rgba(255,255,255,.06); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border: 1px solid rgba(255,255,255,.13); box-shadow: inset 0 1px 0 rgba(255,255,255,.10); } /* ───────────────────────────────────────────────────────────────────── SITUATIONSZEILE (Mert, 21.08.2026) (dashboard.html Zeile 2132 bis 2178) ───────────────────────────────────────────────────────────────────── */ /* ===== SITUATIONSZEILE (Mert, 21.08.2026) ============================== "Hier der Text soll sich immer aendern je nach Situation. Z.B. du hast neue Nachrichten, check dein Postfach ab - und dann auf die Notification zeigen. Oder: irgendwas Wichtiges fehlt, Vertrag z.B. Also immer sehr wichtige Sachen erwaehnen." Statt eines festen "Schoen, dass du da bist" steht hier der wichtigste offene Punkt - und wenn er zur Glocke gehoert, zeigt ein Pfeil darauf und die Glocke schlaegt kurz an. ====================================================================== */ #bildDashboard .lage, #bildStart .lage { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } #bildDashboard .lage__satz, #bildStart .lage__satz { margin: 0; font-size: 13.5px; color: var(--text-leise); } #bildDashboard .lage[data-art="wichtig"] .lage__satz b, #bildStart .lage[data-art="wichtig"] .lage__satz b, #bildDashboard .lage[data-art="neu"] .lage__satz b, #bildStart .lage[data-art="neu"] .lage__satz b { color: var(--text); } /* Der Zeiger auf die Glocke: ein Pfeil, der einmal je Runde hinwandert. */ #bildDashboard .lage__zeiger, #bildStart .lage__zeiger { display: none; align-items: center; gap: 3px; border: 0; padding: 0; background: none; color: var(--gold); font-size: 12px; font-weight: 700; } #bildDashboard .lage[data-zeigt="1"] .lage__zeiger, #bildStart .lage[data-zeigt="1"] .lage__zeiger { display: inline-flex; } #bildDashboard .lage__zeiger svg, #bildStart .lage__zeiger svg { width: 14px; height: 14px; animation: zeigerWink 2.2s ease-in-out infinite; } @keyframes zeigerWink { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } } /* Die Glocke bekommt kurz einen Ring, wenn die Zeile auf sie zeigt. */ #bildDashboard #glocke[data-zeig="1"]::after, #bildStart #glocke[data-zeig="1"]::after { content: ''; position: absolute; inset: -4px; border-radius: 12px; border: 1.5px solid rgba(255,75,126,.55); pointer-events: none; animation: glockeRing 2.4s ease-out infinite; } @keyframes glockeRing { 0% { transform: scale(1); opacity: .9; } 70% { transform: scale(1.16); opacity: 0; } 100% { transform: scale(1.16); opacity: 0; } } /* Frisch geschafft: die Zeile leuchtet einmal gruen auf. */ #bildDashboard .erf__z--neu, #bildStart .erf__z--neu { animation: erfGeschafft 2s cubic-bezier(.22,1,.36,1); } @keyframes erfGeschafft { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(74,222,128,.55); } 18% { transform: scale(1.03); box-shadow: 0 0 0 10px rgba(74,222,128,0); } 40% { transform: scale(1); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(74,222,128,0); } } /* ───────────────────────────────────────────────────────────────────── VERTRAEGE (Mert, 21.08.2026) (dashboard.html Zeile 2179 bis 2273) ───────────────────────────────────────────────────────────────────── */ /* ===== VERTRAEGE (Mert, 21.08.2026) ==================================== "Dieser Dashboard ist nicht nur fuer Magic Milk Germany. Irgendwann ist der auch fuer allgemeines Management, dass wir quasi das Management einer Creatorin komplett uebernehmen - deswegen pass es darauf an. Wichtig: ich brauche eine Section wo steht 'Meine Vertraege' und oben klein als Widget unter Profil." Das Dashboard geht ab jetzt von MEHREREN Kooperationen aus. Magic Milk Germany ist eine davon, nicht mehr die einzige - deshalb steht die Marke nirgends mehr fest im Text, sondern kommt aus dem jeweiligen Vertrag. Betreiber bleibt AUREON; die Marken wechseln. ====================================================================== */ #bildDashboard .vtr, #bildStart .vtr { display: flex; flex-direction: column; gap: 8px; } #bildDashboard .vtr__z, #bildStart .vtr__z { display: flex; align-items: center; gap: 11px; width: 100%; padding: 12px 13px; border-radius: 13px; text-align: left; border: 1px solid var(--linie); background: var(--flaeche-2); color: inherit; transition: border-color .2s, transform .2s cubic-bezier(.22,1,.36,1); } #bildDashboard .vtr__z, #bildStart .vtr__z, #bildDashboard .vtr__z:hover, #bildStart .vtr__z:hover, #bildDashboard .vtr__z *, #bildStart .vtr__z * { text-decoration: none; } #bildDashboard .vtr__z:hover, #bildStart .vtr__z:hover { border-color: rgba(255,75,126,.35); transform: translateX(2px); } /* 84x40 statt 38x38 (22.08.2026). Temu und About You sind Wortmarken mit 4,15:1 und 5,01:1 - im alten Quadrat waren sie 38x7,6 Pixel hoch und damit nicht zu lesen. Bildzeichen (Magic Milk, AUREON) stehen jetzt mittig mit Luft links und rechts; das ist ruhig und, anders als ein Zuschnitt, vollstaendig. */ /* Flex statt Grid mit place-content (22.08.2026). Bei place-content:center bekommt die Grid-Spalte die NATUERLICHE Breite des Bildes - 440 Pixel in einem 84 Pixel breiten Feld. max-width verkleinert danach nur noch das Bild, nicht die Spalte, also stand das Zeichen ausserhalb der Mitte und lief links aus dem Feld. Ein Flex-Item schrumpft dagegen mit und wird danach zentriert. */ #bildDashboard .vtr__logo, #bildStart .vtr__logo { width: 84px; height: 40px; flex: none; border-radius: 11px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--flaeche); color: var(--mf, var(--pink)); font-family: var(--anzeige); font-size: 13px; font-weight: 800; border: 1px solid var(--linie); } /* max-* statt width/height 100%: so waechst kein Zeichen ueber seine natuerliche Groesse hinaus und keines wird gestaucht. */ /* Links und rechts 6 Pixel Luft, oben und unten nur 3. Ein quadratisches Zeichen ist im 84x40-Feld immer hoehenbegrenzt - mit 10 Pixel Abstand blieben davon 30 Pixel, mit 6 sind es 34. Die Wortmarken aendern sich nicht, die haengen an der Breite. */ #bildDashboard .vtr__logo img, #bildStart .vtr__logo img { max-width: calc(100% - 12px); max-height: calc(100% - 6px); width: auto; height: auto; object-fit: contain; } #bildDashboard .vtr__t, #bildStart .vtr__t { flex: 1; min-width: 0; } #bildDashboard .vtr__t b, #bildStart .vtr__t b { display: block; font-size: 13.5px; font-weight: 700; } #bildDashboard .vtr__t i, #bildStart .vtr__t i { display: block; font-style: normal; font-size: 11px; color: var(--text-still); margin-top: 2px; } #bildDashboard .vtr__lage, #bildStart .vtr__lage { flex: none; padding: 4px 9px; border-radius: 99px; font-size: 10.5px; font-weight: 800; letter-spacing: .02em; border: 1px solid var(--linie); color: var(--text-still); } #bildDashboard .vtr__lage[data-l="aktiv"], #bildStart .vtr__lage[data-l="aktiv"] { color: var(--gruen); border-color: rgba(74,222,128,.34); background: rgba(74,222,128,.08); } #bildDashboard .vtr__lage[data-l="offen"], #bildStart .vtr__lage[data-l="offen"] { color: var(--gold); border-color: rgba(232,192,122,.34); background: rgba(232,192,122,.08); } #bildDashboard .vtr__lage[data-l="beendet"], #bildStart .vtr__lage[data-l="beendet"] { color: var(--text-still); } #bildDashboard .vtr__leer, #bildStart .vtr__leer { padding: 18px 14px; text-align: center; border-radius: 13px; border: 1px dashed var(--linie); color: var(--text-still); font-size: 12.5px; } /* Das kleine Widget unter dem Profil. */ #bildDashboard .vwid, #bildStart .vwid { display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px 13px; border-radius: 14px; text-align: left; border: 1px solid var(--linie); background: var(--flaeche); color: inherit; transition: border-color .2s, transform .2s cubic-bezier(.22,1,.36,1); } #bildDashboard .vwid:hover, #bildStart .vwid:hover { border-color: rgba(255,75,126,.35); transform: translateY(-2px); } #bildDashboard .vwid__sym, #bildStart .vwid__sym { width: 32px; height: 32px; flex: none; border-radius: 10px; display: grid; place-content: center; background: var(--flaeche-2); color: var(--pink); } #bildDashboard .vwid__sym svg, #bildStart .vwid__sym svg { width: 15px; height: 15px; } #bildDashboard .vwid__t, #bildStart .vwid__t { flex: 1; min-width: 0; } #bildDashboard .vwid__t b, #bildStart .vwid__t b { display: block; font-size: 13px; font-weight: 700; } #bildDashboard .vwid__t i, #bildStart .vwid__t i { display: block; font-style: normal; font-size: 11px; color: var(--text-still); margin-top: 1px; } /* Die Marken als kleine Stapel-Zeichen rechts - man sieht auf einen Blick, fuer wie viele Marken man gerade arbeitet. */ #bildDashboard .vwid__marken, #bildStart .vwid__marken { display: flex; flex: none; } #bildDashboard .vwid__m, #bildStart .vwid__m { width: 24px; height: 24px; border-radius: 8px; margin-left: -7px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--flaeche-2); border: 2px solid var(--flaeche); font-family: var(--anzeige); font-size: 9.5px; font-weight: 800; color: var(--text-leise); } #bildDashboard .vwid__m:first-child, #bildStart .vwid__m:first-child { margin-left: 0; } #bildDashboard .vwid__m img, #bildStart .vwid__m img { width: 100%; height: 100%; object-fit: contain; padding: 3px; } /* ───────────────────────────────────────────────────────────────────── KENNZAHL-CHIPS IN DER PROFILKARTE (Mert, 21.08.2026) (dashboard.html Zeile 2274 bis 2340) ───────────────────────────────────────────────────────────────────── */ /* ===== KENNZAHL-CHIPS IN DER PROFILKARTE (Mert, 21.08.2026) ============ "Hier fehlen noch kleine Sections drinnen, Symbole - nur eine Idee: Diagramme, Geld, Zahlen, Haken usw. Sei kreativ und es muss sinnvoll sein." Neben den Kanal-Chips stand freier Platz. Dort steht jetzt der Stand in vier kleinen Zeichen: gelieferte Videos, Aufrufe, Erfolge, Verguetung. Jedes zeigt nur, was gemessen ist - kein Platzhalter, keine erfundene Zahl. Ein Klick fuehrt dorthin, wo die Zahl herkommt. ====================================================================== */ #bildDashboard .pkz, #bildStart .pkz { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; width: 100%; } #bildDashboard .pkz__c, #bildStart .pkz__c { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px 5px 6px; border-radius: 99px; border: 1px solid var(--linie); background: rgba(255,255,255,.04); color: var(--text-leise); font-size: 11px; font-weight: 700; transition: border-color .2s, color .2s, transform .2s cubic-bezier(.22,1,.36,1); } #bildDashboard .pkz__c:hover, #bildStart .pkz__c:hover { color: var(--text); border-color: rgba(255,75,126,.4); transform: translateY(-1px); } #bildDashboard .pkz__c svg, #bildStart .pkz__c svg { width: 13px; height: 13px; flex: none; color: var(--cf, var(--text-still)); } #bildDashboard .pkz__c b, #bildStart .pkz__c b { font-weight: 800; color: var(--text); } #bildDashboard .pkz__c[data-voll="1"], #bildStart .pkz__c[data-voll="1"] { border-color: rgba(74,222,128,.34); background: rgba(74,222,128,.07); } #bildDashboard .pkz__c[data-voll="1"] svg, #bildStart .pkz__c[data-voll="1"] svg { color: var(--gruen); } #bildDashboard .pkz__c[data-leer="1"] b, #bildStart .pkz__c[data-leer="1"] b { color: var(--text-still); font-weight: 700; } /* Mert, 21.08.2026: "Wenn man hier auf Kreuz drueckt, dann verschwindet es und das ganze Dashboard wird sauber hochgezogen, so dass der Platz wieder befuellt ist." Vorher war der Kasten mit einem Schlag weg und alles darunter sprang nach oben. Jetzt faehrt seine Hoehe auf null, waehrend er ausblendet - der Rest folgt von selbst, weil die Ansicht eine Spalte mit gap ist. */ #bildDashboard .hinw, #bildStart .hinw { overflow: hidden; transition: height .44s cubic-bezier(.4,0,.2,1), opacity .28s ease, transform .34s cubic-bezier(.4,0,.2,1), margin-top .44s cubic-bezier(.4,0,.2,1), padding-top .44s cubic-bezier(.4,0,.2,1), padding-bottom .44s cubic-bezier(.4,0,.2,1); } #bildDashboard .hinw[data-weg="1"], #bildStart .hinw[data-weg="1"] { opacity: 0; transform: translateY(-6px) scale(.985); padding-top: 0; padding-bottom: 0; border-width: 0; } /* Leerzustand der Vertragsliste (Mert, 21.08.2026): statt eines leeren Kastens laufen Beispiel-Firmen durch und verschwinden wieder. Man sieht sofort, was hier spaeter steht, ohne dass etwas Erfundenes stehen bleibt. Der Hinweistext darunter macht klar, dass es Beispiele sind. */ #bildDashboard .vtr__vor, #bildStart .vtr__vor { position: relative; height: 62px; overflow: hidden; } #bildDashboard .vtr__vor .vtr__z, #bildStart .vtr__vor .vtr__z { position: absolute; inset: 0; opacity: 0; animation: vorZeigen 12s cubic-bezier(.22,1,.36,1) infinite; } @keyframes vorZeigen { 0% { opacity: 0; transform: translateY(10px); } 4% { opacity: 1; transform: translateY(0); } 22% { opacity: 1; transform: translateY(0); } 27% { opacity: 0; transform: translateY(-10px); } 100% { opacity: 0; transform: translateY(-10px); } } #bildDashboard .vtr__hinweis, #bildStart .vtr__hinweis { margin: 10px 0 0; font-size: 11.5px; color: var(--text-still); text-align: center; } /* ───────────────────────────────────────────────────────────────────── VOLLVERSION FREISCHALTEN (Mert, 21.08.2026) (dashboard.html Zeile 2486 bis 2531) ───────────────────────────────────────────────────────────────────── */ /* ===== VOLLVERSION FREISCHALTEN (Mert, 21.08.2026) ===================== "Wenn man ein Profil gemacht hat, kann man das benutzen - voll funktionsfaehig, mit einer Vollversion-Code-Eingabe, was die Leute nur per WhatsApp oder E-Mail vom Ansprechpartner bekommen." Der Code wird nicht im Klartext geprueft: die Eingabe wird gehasht und gegen assets/freischalt-codes.json gehalten. So steht kein gueltiger Code im Quelltext der Seite. ====================================================================== */ #bildDashboard .frei, #bildStart .frei { display: flex; flex-direction: column; gap: 12px; } #bildDashboard .frei__oben, #bildStart .frei__oben { display: flex; align-items: center; gap: 11px; } #bildDashboard .frei__sym, #bildStart .frei__sym { width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-content: center; background: rgba(232,192,122,.12); color: var(--gold); border: 1px solid rgba(232,192,122,.2); } #bildDashboard .frei__sym svg, #bildStart .frei__sym svg { width: 18px; height: 18px; } #bildDashboard .frei__t, #bildStart .frei__t { flex: 1; min-width: 0; } #bildDashboard .frei__t b, #bildStart .frei__t b { display: block; font-size: 13.5px; font-weight: 700; } #bildDashboard .frei__t i, #bildStart .frei__t i { display: block; font-style: normal; font-size: 11.5px; color: var(--text-still); margin-top: 2px; } #bildDashboard .frei__reihe, #bildStart .frei__reihe { display: flex; gap: 8px; flex-wrap: wrap; } #bildDashboard .frei__reihe input, #bildStart .frei__reihe input { flex: 1; min-width: 150px; padding: 11px 13px; border-radius: 11px; border: 1px solid var(--linie); background: var(--flaeche-2); color: var(--text); font: inherit; font-size: 13.5px; letter-spacing: .06em; text-transform: uppercase; } #bildDashboard .frei__reihe input:focus, #bildStart .frei__reihe input:focus { outline: none; border-color: rgba(232,192,122,.5); } #bildDashboard .frei__reihe button, #bildStart .frei__reihe button { padding: 11px 18px; border-radius: 11px; font-size: 13px; font-weight: 700; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.07); color: var(--text); transition: background .18s, border-color .18s; } #bildDashboard .frei__reihe button:hover, #bildStart .frei__reihe button:hover { background: rgba(255,255,255,.12); border-color: rgba(232,192,122,.45); } #bildDashboard .frei__wort, #bildStart .frei__wort { font-size: 12px; margin: 0; min-height: 16px; } #bildDashboard .frei__wort[data-art="fehler"], #bildStart .frei__wort[data-art="fehler"] { color: var(--rot); } #bildDashboard .frei__wort[data-art="gut"], #bildStart .frei__wort[data-art="gut"] { color: var(--gruen); } /* Freigeschaltet: schmale Zeile statt ganzer Karte. */ #bildDashboard .frei__da, #bildStart .frei__da { display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 600; color: var(--gruen); } #bildDashboard .frei__da svg, #bildStart .frei__da svg { width: 15px; height: 15px; flex: none; } /* ───────────────────────────────────────────────────────────────────── WHATSAPP (Mert, 21.08.2026) (dashboard.html Zeile 2532 bis 2555) ───────────────────────────────────────────────────────────────────── */ /* ===== WHATSAPP (Mert, 21.08.2026) ====================================== "Die meisten Creator sind ueber WhatsApp. Verbinde dich mit WhatsApp, dass es Sinn ergibt in Verbindung mit dem Dashboard und AUREON." Ueberall dort, wo bisher nur ein Hinweis stand ("frag deinen Ansprechpartner"), steht jetzt ein Knopf, der WhatsApp mit einer fertig getippten Nachricht oeffnet - mit Namen und Anliegen. Niemand muss ueberlegen, was er schreiben soll. ====================================================================== */ #bildDashboard .wa, #bildStart .wa { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 99px; border: 1px solid rgba(37,211,102,.32); background: rgba(37,211,102,.09); /* var() statt fester Farbe: #4ADE80 stand auf hellem Grund bei 1,63:1. So folgt der Knopf beiden Modi von allein. */ color: var(--gruen); font-size: 12.5px; font-weight: 700; text-decoration: none; cursor: pointer; transition: background .18s, border-color .18s; } #bildDashboard .wa:hover, #bildStart .wa:hover { background: rgba(37,211,102,.16); border-color: rgba(37,211,102,.5); } #bildDashboard .wa svg, #bildStart .wa svg { width: 15px; height: 15px; flex: none; fill: currentColor; } #bildDashboard .wa--klein, #bildStart .wa--klein { padding: 6px 11px; font-size: 11.5px; } /* ───────────────────────────────────────────────────────────────────── DIAGRAMM (ClippedAreaChart) (dashboard.html Zeile 2556 bis 2678) ───────────────────────────────────────────────────────────────────── */ /* ===== DIAGRAMM NACH VORLAGE (Mert, 21.08.2026: "den Diagramm so machen") Vorlage war eine React-Komponente (ProgressMetricCard, shadcn/lucide). Dieses Projekt ist reines HTML - uebernommen ist das VERHALTEN, nicht der Code: · die Kurve liegt als Flaeche RECHTS hinter dem Inhalt, nicht darunter · Punkteraster dahinter, nach links ausgeblendet · grosse Zahl links, Umschalter Kurve/Balken daneben · Zeitraum waehlbar, Fuss mit Hoechst-, Tiefst- und Schnittwert · die Farbe folgt dem Trend: rauf gruen, runter rot, flach neutral ====================================================================== */ /* Klein halten: die Karte ist ein Ueberblick, kein Auswertungswerkzeug. */ #bildDashboard .dg, #bildStart .dg { position: relative; overflow: hidden; min-height: 178px; display: flex; flex-direction: column; } /* Die Diagrammzone. 62 % wie in der Vorlage - so bleibt links Platz fuer die Zahl, ohne dass sich Text und Kurve ins Gehege kommen. */ #bildDashboard .dg__zone, #bildStart .dg__zone { position: absolute; inset: 0 0 0 auto; width: 62%; z-index: 0; } #bildDashboard .dg__schein, #bildStart .dg__schein { position: absolute; inset: 0; } #bildDashboard .dg__raster, #bildStart .dg__raster { position: absolute; inset: 0; color: rgba(243,233,236,.13); -webkit-mask-image: linear-gradient(to right, transparent, #000 55%); mask-image: linear-gradient(to right, transparent, #000 55%); } #bildDashboard .dg__raster svg, #bildStart .dg__raster svg { width: 100%; height: 100%; display: block; } #bildDashboard .dg__svg, #bildStart .dg__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } #bildDashboard .dg__inhalt, #bildStart .dg__inhalt { position: relative; z-index: 1; padding: 12px 14px 0; pointer-events: none; } #bildDashboard .dg__kopf, #bildStart .dg__kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; } #bildDashboard .dg__links, #bildStart .dg__links { display: flex; align-items: center; gap: 10px; min-width: 0; } #bildDashboard .dg__titel, #bildStart .dg__titel { font-size: 12.5px; font-weight: 700; margin: 0; letter-spacing: -.01em; } #bildDashboard .dg__rechts, #bildStart .dg__rechts { display: flex; align-items: center; gap: 10px; flex: none; pointer-events: auto; } #bildDashboard .dg__trend, #bildStart .dg__trend { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; } #bildDashboard .dg__trend svg, #bildStart .dg__trend svg { width: 14px; height: 14px; } /* Umschalter Kurve / Balken - zwei Zeichen, kein Wortknopf. */ #bildDashboard .dg__um, #bildStart .dg__um { display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px; background: rgba(255,255,255,.06); border: 0; pointer-events: auto; -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%); box-shadow: inset 1px 1px 1px -.5px rgba(255,255,255,.6), inset -1px -1px 1px -.5px rgba(255,255,255,.6), 0 2px 6px rgba(0,0,0,.2); } #bildDashboard .dg__um button, #bildStart .dg__um button { border-radius: 999px; } #bildDashboard .dg__um button, #bildStart .dg__um button { width: 24px; height: 22px; border: 0; border-radius: 7px; padding: 0; background: none; color: var(--text-still); display: grid; place-content: center; transition: background .18s, color .18s; } #bildDashboard .dg__um button svg, #bildStart .dg__um button svg { width: 13px; height: 13px; } #bildDashboard .dg__um button[aria-pressed="true"], #bildStart .dg__um button[aria-pressed="true"] { background: rgba(255,255,255,.10); color: var(--text); } #bildDashboard .dg__zeit, #bildStart .dg__zeit { border: 0; border-radius: 999px; padding: 5px 9px; background: rgba(255,255,255,.06); -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%); box-shadow: inset 1px 1px 1px -.5px rgba(255,255,255,.6), inset -1px -1px 1px -.5px rgba(255,255,255,.6), inset 0 0 4px 4px rgba(255,255,255,.08), 0 2px 6px rgba(0,0,0,.2); color: var(--text-leise); font: inherit; font-size: 11.5px; font-weight: 600; pointer-events: auto; } #bildDashboard .dg__zeit:focus-visible, #bildStart .dg__zeit:focus-visible { outline: 2px solid rgba(255,255,255,.4); outline-offset: 2px; } #bildDashboard .dg__zahl, #bildStart .dg__zahl { font-family: var(--anzeige); font-weight: 700; letter-spacing: -.035em; line-height: 1; margin: 10px 0 0; font-size: clamp(27px, 7.5vw, 34px); font-variant-numeric: tabular-nums; } #bildDashboard .dg__unter, #bildStart .dg__unter { font-size: 11px; color: var(--text-still); margin: 5px 0 0; max-width: 15em; } /* Fuss: deckend, damit die Kurve nicht durch die Zahlen laeuft. */ #bildDashboard .dg__fuss, #bildStart .dg__fuss { position: relative; z-index: 1; margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 8px 14px; border-top: 1px solid var(--linie); background: var(--flaeche); font-size: 11.5px; } #bildDashboard .dg__delta b, #bildStart .dg__delta b { font-weight: 800; } #bildDashboard .dg__stat, #bildStart .dg__stat { display: flex; align-items: center; gap: 6px; color: var(--text-still); font-size: 10.5px; } #bildDashboard .dg__stat b, #bildStart .dg__stat b { color: var(--text-leise); font-weight: 700; font-variant-numeric: tabular-nums; } #bildDashboard .dg__stat i, #bildStart .dg__stat i { font-style: normal; opacity: .4; } #bildDashboard .dg__leer, #bildStart .dg__leer { font-size: 11.5px; color: var(--text-still); } /* Auf schmalen Schirmen liegt die Kurve NICHT rechts neben dem Text, sondern unten ueber die volle Breite. Gemessen auf 375px: die Zahl lief 199px in die Kurvenzone, der Untertext 57px - genau der Fehler, der nie wieder vorkommen soll. Nebeneinander braucht Platz, den ein Handy nicht hat. */ @container dashrahmen (max-width: 560px) { /* Gemessen: bei 56 % Hoehe ragte der Untertext noch 22px in die Kurve. Die Zone bekommt so viel Hoehe, wie nach dem Text uebrig bleibt. */ /* Mert, 21.08.2026: "man sieht nix". Gemessen: von 79px Kurvenzone waren nur 17px zu sehen - der Fuss liegt mit deckendem Grund darueber und verschluckte den Rest. Auf schmalen Schirmen steht die Zone deshalb im FLUSS zwischen Inhalt und Fuss, statt sich unter ihn zu schieben. */ #bildDashboard .dg, #bildStart .dg { min-height: 224px; } #bildDashboard .dg__zone, #bildStart .dg__zone { position: relative; inset: auto; width: 100%; flex: 1 1 auto; min-height: 84px; /* Im Fluss steht die Zone dort, wo sie im Dokument liegt - das ist VOR dem Text. Die Reihenfolge stellt das gerade: Text, Kurve, Fuss. */ order: 2; } #bildDashboard .dg__inhalt, #bildStart .dg__inhalt { order: 1; } #bildDashboard .dg__fuss, #bildStart .dg__fuss { order: 3; margin-top: 0; } /* Titel, Umschalter, Trend und Zeitraum passen nebeneinander nicht in 375px - der Titel wurde dreizeilig. Also zwei Zeilen: Name oben, Bedienung darunter. */ #bildDashboard .dg__kopf, #bildStart .dg__kopf { flex-wrap: wrap; row-gap: 9px; } #bildDashboard .dg__links, #bildStart .dg__links { width: 100%; justify-content: space-between; } #bildDashboard .dg__rechts, #bildStart .dg__rechts { width: 100%; justify-content: space-between; } #bildDashboard .dg__titel, #bildStart .dg__titel { white-space: nowrap; } #bildDashboard .dg__schein, #bildStart .dg__schein { background: none !important; } #bildDashboard .dg__raster, #bildStart .dg__raster { -webkit-mask-image: linear-gradient(to top, transparent, #000 60%); mask-image: linear-gradient(to top, transparent, #000 60%); } #bildDashboard .dg__unter, #bildStart .dg__unter { max-width: none; } #bildDashboard .dg__zahl, #bildStart .dg__zahl { margin-top: 9px; } } /* ───────────────────────────────────────────────────────────────────── METALL-FLAECHE (assets/dashboard-auth.css Zeile 540 bis 558) ───────────────────────────────────────────────────────────────────── */ #bildDashboard .dash-auth__metal, #bildStart .dash-auth__metal { position: absolute; inset: 0; z-index: -2; overflow: hidden; border-radius: inherit; background: linear-gradient(105deg, #393337 0%, #f9f7f8 20%, #625a5f 37%, #fff 52%, #332d31 69%, #d7d1d4 84%, #4f484c 100%); pointer-events: none; } #bildDashboard .dash-auth__metal canvas, #bildStart .dash-auth__metal canvas { position: absolute !important; inset: 0 !important; display: block !important; width: 100% !important; height: 100% !important; border-radius: inherit !important; } /* ───────────────────────────────────────────────────────────────────── METALLKNOPF DES CTA-BANDS (assets/dashboard-auth.css Zeile 782 bis 848) ───────────────────────────────────────────────────────────────────── */ #bildDashboard #bandKnopf.band__metal-cta, #bildStart #bandKnopf.band__metal-cta { position: relative; isolation: isolate; min-height: 48px; padding: 0 50px 0 22px; border: 0; border-radius: 999px; background: transparent; color: #fff; overflow: hidden; transform: translateZ(0); box-shadow: 0 12px 28px rgba(0,0,0,.34); transition: transform 220ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms ease; } #bildDashboard #bandKnopf.band__metal-cta::before, #bildStart #bandKnopf.band__metal-cta::before { content: ""; position: absolute; inset: 2px; z-index: -1; border-radius: inherit; background: radial-gradient(circle at 24% 0%, rgba(255,75,126,.18), transparent 42%), linear-gradient(180deg, #21171b 0%, #0d0a0c 100%); box-shadow: inset 0 1px .5px rgba(255,255,255,.26), inset 0 -1px .5px rgba(0,0,0,.72); } #bildDashboard #bandKnopf.band__metal-cta .dash-auth__metal, #bildStart #bandKnopf.band__metal-cta .dash-auth__metal { position: absolute; inset: 0; z-index: -2; overflow: hidden; border-radius: inherit; } #bildDashboard #bandKnopf.band__metal-cta .band__metal-label, #bildStart #bandKnopf.band__metal-cta .band__metal-label, #bildDashboard #bandKnopf.band__metal-cta > svg, #bildStart #bandKnopf.band__metal-cta > svg { position: relative; z-index: 2; pointer-events: none; } #bildDashboard #bandKnopf.band__metal-cta > svg, #bildStart #bandKnopf.band__metal-cta > svg { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); } #bildDashboard #bandKnopf.band__metal-cta:hover, #bildStart #bandKnopf.band__metal-cta:hover { transform: translateY(-2px); box-shadow: 0 17px 34px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.07); } #bildDashboard #bandKnopf.band__metal-cta:active, #bildStart #bandKnopf.band__metal-cta:active { transform: translateY(0) scale(.985); } #bildDashboard #bandKnopf.band__metal-cta:focus-visible, #bildStart #bandKnopf.band__metal-cta:focus-visible { outline: 3px solid rgba(255,75,126,.72); outline-offset: 4px; } @media (prefers-reduced-motion: reduce) { #bildDashboard #bandKnopf.band__metal-cta .dash-auth__metal canvas, #bildStart #bandKnopf.band__metal-cta .dash-auth__metal canvas { visibility: hidden; } #bildDashboard #bandKnopf.band__metal-cta, #bildStart #bandKnopf.band__metal-cta { transition: none; } }