diff --git a/post2.html b/post2.html index 32eeb57..c534ba8 100644 --- a/post2.html +++ b/post2.html @@ -362,125 +362,147 @@ Bild. Gebaut aus derselben Formensprache wie die Slides: chamferte Kaesten, Sechsecke, der eine gelbe Akzent. Alles HTML, damit es beim 3-fachen Export genauso scharf bleibt wie die Schrift und sich im Canvas - verschieben laesst wie jedes andere Element. */ + verschieben laesst wie jedes andere Element. + Die Maße sind gemessen, nicht geschaetzt: der Inhaltsblock endet bei + y 415 bis 460, unten bleiben 92 px Rand. Rund 800 px Hoehe stehen also + zur Verfuegung, und die soll eine Visualisierung auch fuellen. */ .vis { position: absolute; z-index: 1; left: var(--vis-left, 92px); bottom: var(--vis-bottom, 96px); - width: var(--vis-w, 900px); + width: var(--vis-w, 896px); color: var(--head-color); } .vis-kasten { - position: relative; padding: 22px 26px; + position: relative; padding: 30px 34px; + background: var(--frame-bg); + display: flex; flex-direction: column; justify-content: center; + clip-path: polygon( + 18px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px), + calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px), 0 18px + ); + } + .vis-titel { font-size: 38px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; } + .vis-zeile { margin-top: 8px; font-size: 24px; font-weight: 500; line-height: 1.35; color: var(--body-color); } + .vis-marke { background: var(--accent-yellow); color: #3E2C0A; } + .vis-marke .vis-zeile { color: #6B4E12; } + + /* Slide 2: die drei Schritte haengen an einer Schiene. Sie stehen nicht + dort, weil es sinnvoll waere, sondern weil die Schiene es vorgibt. */ + .vis-schiene { display: flex; align-items: stretch; gap: 40px; } + .vis-schiene .rail { + flex: none; width: 74px; position: relative; + background: var(--shape-fill); + clip-path: polygon( + 14px 0, 60px 0, 74px 14px, 74px calc(100% - 14px), + 60px 100%, 14px 100%, 0 calc(100% - 14px), 0 14px + ); + } + .vis-schiene .rail span { + position: absolute; left: 50%; top: 50%; white-space: nowrap; + transform: translate(-50%, -50%) rotate(-90deg); + color: #fff; font-size: 21px; font-weight: 700; letter-spacing: .13em; + text-transform: uppercase; opacity: .82; + } + .vis-schiene .stufen { flex: 1; display: flex; flex-direction: column; } + .vis-schiene .vis-kasten { min-height: 190px; } + .vis-schiene .verbund { + width: 8px; height: 56px; margin-left: 58px; background: var(--shape-line); + } + + /* Slide 3: der Bestand ist schwer, das Ziel leer. Das Kreuz liegt auf dem + Pfeil, nicht auf dem Ziel: der Wechsel scheitert, nicht das System. */ + .vis-ersetzen { display: flex; align-items: stretch; gap: 30px; } + .vis-ersetzen .schwer { flex: 1.25; display: grid; gap: 14px; } + .vis-ersetzen .schwer .vis-kasten { min-height: 212px; } + .vis-ersetzen .leer { + flex: 1; padding: 30px; border: 8px dashed var(--shape-line); + display: flex; align-items: center; justify-content: center; text-align: center; + color: var(--body-color); font-size: 26px; font-weight: 600; line-height: 1.35; + } + .vis-ersetzen .pfeil { + flex: none; align-self: center; position: relative; + width: 104px; height: 8px; background: var(--shape-line); + } + .vis-ersetzen .pfeil::after { + content: ""; position: absolute; right: -2px; top: -14px; + border: 18px solid transparent; border-left-color: var(--shape-line); + } + .vis-kreuz { + position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; + transform: translate(-50%, -50%); + } + .vis-kreuz i { + position: absolute; left: 0; top: 42px; width: 100%; height: 10px; + background: var(--accent-yellow); + } + .vis-kreuz i:first-child { transform: rotate(45deg); } + .vis-kreuz i:last-child { transform: rotate(-45deg); } + + /* Slide 4: vier Kacheln, die nichts voneinander wissen. Die gestrichelten + Stummel laufen ins Leere. */ + .vis-lose { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 96px; } + .vis-lose .feld { position: relative; } + .vis-lose .feld .vis-kasten { min-height: 320px; } + .vis-lose .stummel { + position: absolute; top: 50%; width: 72px; height: 0; + border-top: 8px dashed var(--shape-line); + } + .vis-lose .feld:nth-child(odd) .stummel { right: -84px; } + .vis-lose .feld:nth-child(even) .stummel { left: -84px; } + + /* Slide 5: das ERP bleibt in der Mitte, das Neue haengt drumherum. */ + .vis-verbinden { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; } + .vis-verbinden .saeule { display: grid; gap: 24px; } + .vis-verbinden .saeule .vis-kasten { min-height: 340px; } + .vis-verbinden .mitte { position: relative; width: 452px; padding: 0 30px; } + .vis-nabe { + position: relative; width: 392px; height: 340px; margin: 0 auto; + background: var(--shape-fill); + clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); + display: flex; flex-direction: column; align-items: center; justify-content: center; + color: #fff; text-align: center; + } + .vis-nabe b { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; } + .vis-nabe small { margin-top: 6px; font-size: 21px; font-weight: 600; opacity: .74; } + .vis-verbinden .quer { position: absolute; top: 50%; width: 30px; height: 8px; background: var(--shape-line); } + .vis-verbinden .quer.li { left: 0; } + .vis-verbinden .quer.re { right: 0; } + + /* Slide 6: der Abschluss ist ein Feld, kein Bild. */ + .vis-warteliste { + border: 6px solid var(--shape-line); padding: 54px 48px; text-align: center; + clip-path: polygon( + 22px 0, calc(100% - 22px) 0, 100% 22px, 100% calc(100% - 22px), + calc(100% - 22px) 100%, 22px 100%, 0 calc(100% - 22px), 0 22px + ); + } + .vis-warteliste .oben { + font-size: 21px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; + color: var(--body-color); + } + .vis-warteliste .feldzeile { display: flex; align-items: stretch; gap: 18px; margin-top: 26px; } + .vis-warteliste .eingabe { + flex: 1; padding: 30px 32px; text-align: left; + font-size: 30px; font-weight: 500; color: var(--body-color); background: var(--frame-bg); clip-path: polygon( 16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px ); } - .vis-titel { font-size: 27px; font-weight: 700; letter-spacing: -0.01em; } - .vis-zeile { margin-top: 6px; font-size: 21px; font-weight: 500; color: var(--body-color); } - .vis-marke { background: var(--accent-yellow); color: #3E2C0A; } - .vis-marke .vis-zeile { color: #6B4E12; } - - /* Verbindungen: 6 px starke Balken in der Rahmenfarbe. Durchgezogen heisst - verbunden, gestrichelt heisst offen. */ - .vis-linie { position: absolute; height: 6px; background: var(--shape-line); } - .vis-linie.senk { width: 6px; height: auto; } - .vis-offen { border-top: 6px dashed var(--shape-line); background: none; height: 0; } - - /* Slide 2: drei Schritte fest auf einer Schiene. Sie sitzen nicht dort, - weil es sinnvoll waere, sondern weil die Schiene es vorgibt. */ - .vis-schiene { display: flex; align-items: stretch; gap: 0; } - .vis-schiene .vis-kasten { flex: 1; } - .vis-schiene .verbund { flex: none; width: 54px; align-self: center; height: 6px; background: var(--shape-line); } - .vis-riegel { - margin-top: 26px; height: 14px; background: var(--shape-fill); opacity: .28; - clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%, 0 7px); - } - - /* Slide 3: der Bestand ist schwer, der Wechsel daneben leer. Das Kreuz - liegt auf dem Pfeil, nicht auf dem Ziel. */ - .vis-ersetzen { display: flex; align-items: center; gap: 34px; } - .vis-ersetzen .schwer { flex: 1.35; } - .vis-ersetzen .leer { - flex: 1; padding: 22px 26px; min-height: 168px; - border: 6px dashed var(--shape-line); - display: flex; align-items: center; justify-content: center; - color: var(--body-color); font-size: 21px; font-weight: 600; - } - .vis-ersetzen .pfeil { flex: none; position: relative; width: 96px; height: 6px; background: var(--shape-line); } - .vis-ersetzen .pfeil::after { - content: ""; position: absolute; right: -2px; top: -11px; - border: 14px solid transparent; border-left-color: var(--shape-line); - } - .vis-kreuz { - position: absolute; left: 50%; top: 50%; width: 74px; height: 74px; - transform: translate(-50%, -50%); - } - .vis-kreuz i { - position: absolute; left: 0; top: 34px; width: 100%; height: 8px; - background: var(--accent-yellow); - } - .vis-kreuz i:first-child { transform: rotate(45deg); } - .vis-kreuz i:last-child { transform: rotate(-45deg); } - .vis-stapel { display: grid; gap: 10px; } - - /* Slide 4: vier Kacheln, die nichts voneinander wissen. Die gestrichelten - Stummel laufen ins Leere. */ - .vis-lose { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 74px; } - .vis-lose .feld { position: relative; } - .vis-lose .stummel { - position: absolute; top: 50%; width: 54px; height: 0; - border-top: 6px dashed var(--shape-line); - } - .vis-lose .feld:nth-child(odd) .stummel { right: -60px; } - .vis-lose .feld:nth-child(even) .stummel { left: -60px; } - - /* Slide 5: das ERP bleibt in der Mitte, HiveGrid liegt als Sechseck - drumherum und haelt die drei Neuen daran. */ - .vis-verbinden { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0; } - .vis-verbinden .saeule { display: grid; gap: 20px; } - .vis-verbinden .mitte { position: relative; width: 300px; padding: 0 26px; } - .vis-nabe { - position: relative; width: 248px; height: 215px; margin: 0 auto; - background: var(--shape-fill); - clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); - display: flex; flex-direction: column; align-items: center; justify-content: center; - color: var(--text-white); - } - .slide[data-variant="hell"] .vis-nabe { color: #fff; } - .vis-nabe b { font-size: 25px; font-weight: 800; letter-spacing: -0.01em; } - .vis-nabe small { margin-top: 4px; font-size: 17px; font-weight: 600; opacity: .72; } - .vis-verbinden .quer { position: absolute; top: 50%; width: 26px; height: 6px; background: var(--shape-line); } - .vis-verbinden .quer.li { left: 0; } - .vis-verbinden .quer.re { right: 0; } - - /* Slide 6: der Abschluss ist ein Feld, kein Bild. */ - .vis-warteliste { text-align: center; } - .vis-warteliste .feldzeile { - display: flex; align-items: stretch; gap: 14px; margin-top: 22px; - } - .vis-warteliste .eingabe { - flex: 1; padding: 20px 24px; text-align: left; - font-size: 22px; font-weight: 500; color: var(--body-color); - border: 3px solid var(--shape-line); - clip-path: polygon( - 14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), - calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px - ); - } .vis-warteliste .knopf { - flex: none; padding: 20px 32px; font-size: 22px; font-weight: 800; + flex: none; display: flex; align-items: center; padding: 30px 40px; + font-size: 30px; font-weight: 800; background: var(--accent-yellow); color: #3E2C0A; clip-path: polygon( - 14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), - calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px + 16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), + calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px ); } .vis-warteliste .adresse { - margin-top: 18px; font-size: 21px; font-weight: 700; letter-spacing: .02em; - color: var(--body-color); + margin-top: 30px; font-size: 30px; font-weight: 800; letter-spacing: -0.01em; + color: var(--head-color); } /* ─── Teamkarte ────────────────────────────────────────────────────────── @@ -1189,7 +1211,7 @@ eyebrow: "Titel", head: 'Die Geschichte fängt
auf der Baustelle an.', body: "Noah Geerkens, SHK-Betrieb in vierter Generation.", - vis: "karte", visW: 520, visLeft: 280, visBottom: 130, + vis: "karte", visW: 620, visLeft: 230, visBottom: 76, }, { key: "prozesse", type: "feature", @@ -1197,7 +1219,7 @@ eyebrow: "Prozesse", head: 'Nicht sinnvoll.
Nur so gewachsen.', body: "Die Software gibt den Takt vor. Nicht der Betrieb.", - vis: "schiene", visW: 900, visLeft: 92, visBottom: 210, + vis: "schiene", visW: 896, visLeft: 92, visBottom: 120, }, { key: "wechseln", type: "feature", @@ -1205,7 +1227,7 @@ eyebrow: "Wechseln", head: 'Wechseln?
Kannst du vergessen.', body: "Jahre an Daten und Wissen hängen drin. Am Ende dasselbe, nur woanders.", - vis: "ersetzen", visW: 900, visLeft: 92, visBottom: 190, + vis: "ersetzen", visW: 896, visLeft: 92, visBottom: 120, }, { key: "mehr", type: "feature", @@ -1213,7 +1235,7 @@ eyebrow: "Mehr", head: 'Wir wollten nicht weg.
Wir wollten mehr.', body: "KI, CRM, Automatisierung. Und Tools, die miteinander reden.", - vis: "lose", visW: 900, visLeft: 92, visBottom: 200, + vis: "lose", visW: 896, visLeft: 92, visBottom: 120, }, { key: "verbinden", type: "feature", @@ -1221,7 +1243,7 @@ eyebrow: "Verbinden", head: 'Dein ERP bleibt.
Der Rest kommt dazu.', body: "Nichts wird ersetzt. Alles wird verbunden.", - vis: "verbinden", visW: 880, visLeft: 100, visBottom: 170, + vis: "verbinden", visW: 896, visLeft: 92, visBottom: 120, }, { key: "warteliste", type: "feature", @@ -1229,7 +1251,7 @@ eyebrow: "Warteliste", head: 'Gebaut im Betrieb.
Für den Betrieb.', body: "Setz dich auf die Warteliste.", - vis: "warteliste", visW: 820, visLeft: 130, visBottom: 220, + vis: "warteliste", visW: 820, visLeft: 130, visBottom: 281, }, ]; @@ -1289,10 +1311,13 @@ schiene: () => '
' + - kasten("Anfrage", "so wie immer") + '
' + - kasten("Angebot", "so wie immer") + '
' + - kasten("Rechnung", "so wie immer") + - '
', + '
seit Jahren so
' + + '
' + + kasten("Anfrage", "abtippen") + '
' + + kasten("Angebot", "noch mal abtippen") + '
' + + kasten("Rechnung", "und noch mal") + + '
' + + '', ersetzen: () => '
' + @@ -1321,11 +1346,12 @@ '
Dein ERPbleibt, wo es ist
' + '' + '
' + - '
' + kasten("Automation") + kasten("Chat", "", true) + '
' + + '
' + kasten("Automation") + kasten("Chat") + '
' + '', warteliste: () => '
' + + '
Frühzugang
' + '
' + '
deine@firma.de
' + '
Auf die Warteliste
' + diff --git a/state/post2.json b/state/post2.json index 8336133..6768aaf 100644 --- a/state/post2.json +++ b/state/post2.json @@ -2,7 +2,7 @@ "bgState": [ { "bg": "raster", - "int": "dezent" + "int": "kraeftig" }, { "bg": "raster", @@ -53,30 +53,14 @@ } ], "edits": [ - { - "vis": { - "dx": -100, - "dy": 250, - "size": 700 - } - }, - { - "vis": { - "dx": -7, - "dy": -19 - } - }, - { - "vis": { - "dx": 19, - "dy": -27 - } - }, + {}, + {}, + {}, {}, {}, {} ], - "frameStyle": "chamfer", + "frameStyle": "rund", "layoutState": [ "standard", "standard",