Founder-Section-Refactor · 11 Varianten der Contact-Section · Testpolygon-Vergleichsansicht (nicht Produktion)
Founder-Section-Refactor · 11 Varianten der Contact-Section
Drei Design-Varianten — nur die Prominenz des Gründer-Porträts innerhalb der Kontakt-Section variiert. Rest der Seite (Hero, Schnellstart, Capabilities, Process, Applications, Why-Beastald, Impressum, Datenschutz, Footer) bleibt in allen Varianten byte-äquivalent zur Produktion. Diese Subsite zeigt die Varianten direkt gestapelt zum Vergleich; jede Variante existiert zusätzlich als komplette Seite unter /founder-variants/{a,b,c}.html.
Portrait als kleiner Avatar · 64 px · rein dekorativ · Name + Rolle in einer Inline-Zeile. Am cleanesten — die Founder-Person tritt visuell komplett hinter der Kontakt-Aktion zurück.
Bringen Sie einen hartnäckigen Prozess, einen teuren Engpass oder eine Idee, die einen Beweis braucht. Wir kartieren das Potenzial und sagen Ihnen, was sich zu bauen lohnt.
Portrait als 96-px-Avatar mit dezenter Mini-Card (Name, Rolle, 1-Satz-Mini-Statement). Sichtbar präsent, ohne sich aufzudrängen — balanciert Founder-Sichtbarkeit gegen funktionale Klarheit.
Spricht am liebsten direkt — kein Account-Manager, keine Freigabekette.
Kontakt
Den nächsten nützlichen Schritt finden.
Bringen Sie einen hartnäckigen Prozess, einen teuren Engpass oder eine Idee, die einen Beweis braucht. Wir kartieren das Potenzial und sagen Ihnen, was sich zu bauen lohnt.
Portrait 140 px mit Caption und eigener Direktkontakt-Zeile (E-Mail · Telefon). Stärkste Personal-Brand-Wirkung — der Founder wird zur sichtbaren Signatur des Kontaktbereichs.
Bringen Sie einen hartnäckigen Prozess, einen teuren Engpass oder eine Idee, die einen Beweis braucht. Wir kartieren das Potenzial und sagen Ihnen, was sich zu bauen lohnt.
Bringen Sie einen hartnäckigen Prozess, einen teuren Engpass oder eine Idee, die einen Beweis braucht. Wir kartieren das Potenzial und sagen Ihnen, was sich zu bauen lohnt.
Gleiches Hero-Layout wie D, drei Farb-Änderungen: Hintergrund = --color-navy #07111d (Navy), Text = --color-ivory #F3EFE7 (Cream), Button = --color-teal #439A9D (Cyan/Teal). Alle drei Farben direkt aus tests domain styles.css übernommen — keine eigenen Hex-Werte.
Bringen Sie einen hartnäckigen Prozess, einen teuren Engpass oder eine Idee, die einen Beweis braucht. Wir kartieren das Potenzial und sagen Ihnen, was sich zu bauen lohnt.
Variante F— F — Quote-Dominanz balanced (axis: quote-balanced-h3)
Identische Komposition wie die anderen F–J-Varianten: Porträt links, Anti-Hype-Zitat rechts, kurze Präambel, Kontaktblock.
Axis: Quote-Schriftgrad 1.375rem (--fs-h3), Atemraum zwischen Porträt und Zitat 2.5rem,
Zitat-max-width36rem.
Sticky-Button Gespräch starten wird per main.js automatisch innerhalb von #contact ausgeblendet.
Variante G— G — Quote-Dominanz roomy (axis: quote-roomy-h3)
Identische Komposition wie die anderen F–J-Varianten: Porträt links, Anti-Hype-Zitat rechts, kurze Präambel, Kontaktblock.
Axis: Quote-Schriftgrad 1.375rem (--fs-h3), Atemraum zwischen Porträt und Zitat 3.5rem,
Zitat-max-width38rem.
Sticky-Button Gespräch starten wird per main.js automatisch innerhalb von #contact ausgeblendet.
Variante H— H — Quote-Dominanz tight (axis: quote-tight-h3plus)
Identische Komposition wie die anderen F–J-Varianten: Porträt links, Anti-Hype-Zitat rechts, kurze Präambel, Kontaktblock.
Axis: Quote-Schriftgrad 1.5rem, Atemraum zwischen Porträt und Zitat 1.5rem,
Zitat-max-width32rem.
Sticky-Button Gespräch starten wird per main.js automatisch innerhalb von #contact ausgeblendet.
Variante I— I — Quote-Dominanz larger (axis: quote-larger-h2minus)
Identische Komposition wie die anderen F–J-Varianten: Porträt links, Anti-Hype-Zitat rechts, kurze Präambel, Kontaktblock.
Axis: Quote-Schriftgrad 1.625rem, Atemraum zwischen Porträt und Zitat 2rem,
Zitat-max-width34rem.
Sticky-Button Gespräch starten wird per main.js automatisch innerhalb von #contact ausgeblendet.
Identische Komposition wie die anderen F–J-Varianten: Porträt links, Anti-Hype-Zitat rechts, kurze Präambel, Kontaktblock.
Axis: Quote-Schriftgrad 1.75rem (--fs-h2), Atemraum zwischen Porträt und Zitat 2.5rem,
Zitat-max-width40rem.
Sticky-Button Gespräch starten wird per main.js automatisch innerhalb von #contact ausgeblendet.
Variante K— K — Quote-Dominanz roomy+h3plus (axis: quote-roomy-h3plus)
Basierend auf Variante G (roomy-Atemraum, gap 3.5rem, max-width 38rem) mit drei Mikro-Änderungen:
(1) Zitat-Schrift einen Schritt größer (1.5rem statt --fs-h3 = 1.375rem — entspricht dem H-Fontstep, aber mit G-Raum);
(2) das gesamte Zitat steht jetzt in einem einzigen Absatz — auf großen Bildschirmen (≥ 768 px, z. B. Lenovo-Laptop) wird per responsive ` ` vor dem Wort „Wir" (dem zweiten Vorkommen) ein Zeilenumbruch erzwungen, sodass die ersten beiden Sätze auf eigenen Zeilen landen und „Oder gar nichts." natürlich an die nächste Zeile umgebrochen wird; auf kleinen Bildschirmen ist der ` ` via `display: none` unsichtbar und das Zitat wrappt vollständig natürlich an der Container-Breite (inkl. vor „Oder gar nichts.");
(3) die vertikale türkise Akzentlinie links (border-left) bleibt in ihrer Länge automatisch anpassbar (keine fixed-height auf dem .quote-Element).
Sonst identisch zu G: Anti-Hype-Zitat mit Sans/Medium-Schrift, „Oder gar nichts." im selben Schriftgewicht
wie der Rest, Attribution einzeilig „Edgar Parshykov · Beastald UG · Trier, Germany", D-Headline plain
