/* ============================================================ VCI Design — CTA-Abschluss Letzter Block der Sitemap in Abschnitt 2. Startseite und arbeiten.html, dort als Abschluss nach dem Projekt: "Aehnliches Projekt geplant?". Beide Seiten enden damit in derselben Sprache. Dunkles Band ueber die volle Breite, als Gegenstueck zum Hero. Das klammert die Seite, Anfang und Ende in derselben Sprache. Hier stand frueher, die Sektion grenze sich von der hellen, zentrierten, schmalen Ueber-uns-Sektion darueber unter anderem dadurch ab, dass sie LINKSBUENDIG sei. Das gilt nicht mehr: sie ist jetzt ebenfalls zentriert. Der Kontrast traegt weiter ueber alles Uebrige, schwarz gegen hell und breit gegen schmal, und er gewinnt sogar etwas: eine Achse, auf der Satz, Striche und Button uebereinanderstehen, ist genau das, was die drei Striche brauchen, um irgendwohin zu fuehren. Volle Breite ohne die .full-bleed-Utility: die Sektion ist direktes Kind von
und damit ohnehin voll breit. .full-bleed rechnet mit 100vw und wuerde bei sichtbarer Scrollleiste einen horizontalen Ueberlauf erzeugen. ============================================================ */ .cta { background-color: var(--color-black); color: var(--color-white); padding-block: var(--space-xxl); text-align: center; } .cta__inhalt { max-width: var(--container-max); } /* --- Headline ------------------------------------------------- display-medium und bewusst nicht display-large: die groesste Stufe gehoert der Hero-Headline allein. Die Klammer entsteht ueber die Flaeche, nicht ueber die Schriftgroesse. Hier stand max-width: 16ch, und genau daran brach der Satz auf zwei Zeilen. Er soll in einer stehen, und dafuer braucht es keine Deckelung des Schriftgrads: nachgemessen ist er bei 768px Fenster 592 Pixel breit bei 706 Pixeln Platz und passt ab dort von selbst. Erst darunter bricht er wieder um, und das ist die richtige Wahl. Einzeilig bei 390px hiesse ein Grad von 24 Pixeln, also weniger als die Namen bei den Leistungen. Ein Titel, der schmaler wird als der Fliesstext daneben, ist keine Headline mehr. ------------------------------------------------------------ */ .cta__titel { font-size: var(--text-display-medium); line-height: var(--leading-display); letter-spacing: var(--tracking-display); font-weight: var(--weight-semibold); text-wrap: balance; } /* --- Die drei Striche ----------------------------------------- Sie fuehren vom Satz zum Button und werden dabei schmaler, ein Trichter aus dem Vokabular, das die Seite ohnehin fuehrt: duenne Cyan-Linien, wie .hero__rule, das Lot und die Naht bei den Leistungen und .statement__linie. Hier stand frueher ein einzelner Strich ueber der Headline. Er ist entfallen. Vier Cyan-Linien in einer Sektion waeren drei zu viel, und die drei unten haben eine Aufgabe, die der eine oben nicht hatte. Breiten aus den Spacer-Tokens, wie schon beim frueheren Strich. Das ist hier kein Missbrauch: gemeint ist ein Mass aus derselben Reihe, nicht ein eigener Wert. Ruhezustand ist der Endzustand. Ohne Skript und bei reduzierter Bewegung stehen alle drei sofort da. ------------------------------------------------------------ */ .cta__spur { display: flex; flex-direction: column; align-items: center; /* --space-l und nicht --space-s. Mit 16 Pixeln Abstand standen die drei als Block beisammen und lasen sich als Ornament. Mit 24 bis 40 Pixeln sind es drei Schritte nach unten, und genau das sollen sie sein. Der Trichter misst dadurch rund 120 statt 52 Pixel in der Hoehe und haelt gegen eine 810 Pixel breite Headline und einen 454 Pixel breiten Button ueberhaupt erst stand. */ gap: var(--space-l); margin-top: var(--space-xl); } .cta__strich { display: block; height: 2px; background-color: var(--color-accent); /* Aufziehen aus der Mitte, nicht von einer Kante: die Sektion hat eine Mittelachse, und ein Strich, der von links kaeme, wuerde sie verlassen und wieder einfangen. */ transform-origin: center; } .cta__strich:nth-child(1) { width: var(--space-xxl); } .cta__strich:nth-child(2) { width: var(--space-xl); } .cta__strich:nth-child(3) { width: var(--space-l); } /* --- Button --------------------------------------------------- Erste und einzige gefuellte Akzentflaeche der Seite. Bisher tritt das Cyan nur als Linie oder Unterkante auf. Am primaeren CTA ist die gefuellte Flaeche genau das, wofuer Abschnitt 1.1 die Farbe reserviert. Schwarz auf Cyan erreicht 12.61:1. Was ihn hochwertiger macht, ist nicht mehr Farbe, sondern mehr Luft und ein ruhigerer Auftritt. Der Innenabstand waechst von space-s/space-l auf space-m/space-xxl, waagerecht also von 24 bis 40 auf 64 bis 128 Pixel. Der Knopf hoert damit auf, ein Etikett zu sein, und wird eine Flaeche. Die Mindestbreite haelt ihn auch dann als Block zusammen, wenn die Beschriftung einmal kuerzer wird. ---------------------------------------------------------------- */ .cta__button { display: inline-block; margin-top: var(--space-xl); padding: var(--space-m) var(--space-xxl); min-width: 18rem; background-color: var(--color-accent); color: var(--color-black); font-size: var(--text-small); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; text-decoration: none; /* Nur transform, damit die Bewegung auf der GPU bleibt. */ transition: transform var(--duration-short) var(--ease-base); } /* Anheben statt seitlich schieben. Der Button steht am Ende der drei Striche, und die zeigen von oben auf ihn: er soll ihnen entgegenkommen, nicht zur Seite ausweichen. Die Haelfte von --space-xs, also vier bis sechs Pixel. Ein ganzer Schritt waere fuer eine Flaeche dieser Groesse ein Sprung, kein Heben. */ .cta__button:hover { transform: translateY(calc(var(--space-xs) * -0.5)); } /* Der Fokus-Ring aus base.css nutzt --color-focus und waere auf Schwarz zu dunkel. Auf dem Cyan-Button liegt der weisse Ring dank outline-offset im schwarzen Umfeld und erreicht dort volle 18.97:1. Gleiche Einzeiler-Regel wie in hero.css. Sobald eine dritte dunkle Sektion dazukommt, gehoert das in eine gemeinsame Regel. */ .cta :focus-visible { outline-color: var(--color-white); } /* --- Anschluss an den Footer ---------------------------------- .site-footer bringt margin-top und eine obere Linie mit. Unter einer schwarzen Flaeche ergaebe das eine grosse helle Luecke und eine Doppellinie. Diese Datei wird nur auf den beiden Seiten geladen, die mit dem Band enden, der Startseite und arbeiten.html. Alle anderen bleiben davon unberuehrt. ---------------------------------------------------------------- */ .site-footer { margin-top: 0; border-top: none; } /* --- Mobil ------------------------------------------------------ Der Button darf die Spalte nicht sprengen: 18rem Mindestbreite plus zweimal --space-xxl Innenabstand waeren bei 390px Fenster mehr als der Platz hergibt. ---------------------------------------------------------------- */ @media (max-width: 768px) { .cta__button { display: block; min-width: 0; padding-inline: var(--space-l); } } /* --- Reduzierte Bewegung -------------------------------------- */ @media (prefers-reduced-motion: reduce) { .cta__button:hover { transform: none; } }