/* ========================================================================= Brücke zwischen Gutenberg-Markup und der Gestaltung aus dem Entwurf. components.css und hero.css stammen aus .design/ und werden von build-theme.py überschrieben. Alles, was NUR im Theme gilt — weil Gutenberg anderes Markup erzeugt als der statische Entwurf — steht hier. Diese Datei wird nicht generiert und darf von Hand gepflegt werden. Grundregel: Der Entwurf gibt die Gestalt vor, diese Datei übersetzt das Block-Markup darauf. Keine neuen Gestaltungsideen hier unterbringen. ========================================================================= */ /* ---------- Breitenführung ---------- Hier steht bewusst NICHTS zur Breite von .wrap. tokens.css regelt das mit .wrap{ width:min(var(--wrap), 100% - var(--gutter)*2); margin-inline:auto; } also über die Breite, nicht über max-width plus Innenabstand. Ein eigener Nachbau hier hatte zwei Folgen: Er überschrieb die engeren max-width-Werte von .sec__head (62ch) und .cta__in (60ch) — gemessen 1180px statt 684px — und er legte zusätzliche 40px Innenabstand an, wodurch die Karten in jeder Reihe um 80px schrumpften. Nötig war der Nachbau nie: Die Abschnitte benutzen layout:"default", damit stutzt WordPress ihre Kinder nicht auf contentSize. Gestutzt wird nur der Inhaltsblock selbst — der ist deshalb in den Templates alignfull. Abstände zwischen Blöcken innerhalb der Kopfzeile eines Abschnitts übernimmt die Gestaltung, nicht der Block-Gap. */ .sec__head > *{ margin-block:0; } .sec__head .eyebrow{ margin-bottom:.6rem; } .sec__head h2{ margin-bottom:.6rem; } /* ========================================================================= Block-Abstände, die Gestaltung zerlegen theme.json setzt blockGap auf 1.2rem. WordPress gibt diesen Abstand jedem Kind eines Fluss-Layouts außer dem ersten als margin-block-start mit — auch dort, wo gar kein Abstand gemeint ist. Gemessen auf der Live-Seite: main margin-top 19.2px -> weiße Linie zwischen Leiste und Hero .hero__veil margin-top 19.2px -> der Schleier saß 19px zu tief, oben blieb ein Streifen unverschleiertes Foto Beides sind absolut positionierte beziehungsweise seitenbreite Elemente, bei denen ein Blockabstand keinen Sinn ergibt. ========================================================================= */ .wp-site-blocks > header, .wp-site-blocks > main, .wp-site-blocks > footer{ margin-block:0; } .hero > *{ margin-block:0; } /* ========================================================================= Button-Klassen auf dem Wrapper Im Entwurf trägt der die Klassen: . Gutenberg erzeugt
. Die Zusatzklasse landet also auf dem DIV – und components.css malt dann Rahmen, Hintergrund und Schatten auf den Wrapper statt auf den Button. Gemessen: der Wrapper hatte border 2px solid und border-radius 0, daher die eckige Outline um „Unsere Truppen". ========================================================================= */ .wp-block-button.btn--ghost, .wp-block-button.btn--yellow, .wp-block-button.btn--sm{ background:none; border:0; box-shadow:none; padding:0; border-radius:0; -webkit-backdrop-filter:none; backdrop-filter:none; } /* ---------- Buttons ---------- Gutenberg rendert
. Die Zusatzklasse (btn--ghost und so weiter) landet auf dem DIV, die Gestaltung muss also auf das Kind durchgreifen. */ .wp-block-button__link{ display:inline-flex; align-items:center; justify-content:center; background:var(--blue); color:#fff; text-decoration:none; font-weight:700; padding:.85rem 1.6rem; border-radius:99px; white-space:nowrap; box-shadow:0 8px 20px rgba(27,79,216,.3); transition:transform .18s ease, box-shadow .18s ease, background .18s ease; } .wp-block-button__link:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(27,79,216,.38); color:#fff; } .btn--sm .wp-block-button__link{ padding:.5rem 1.1rem; font-size:var(--step--1); } .btn--ghost .wp-block-button__link{ background:rgba(255,255,255,.16); border:2px solid rgba(255,255,255,.75); box-shadow:none; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); } .btn--ghost .wp-block-button__link:hover{ background:rgba(255,255,255,.3); box-shadow:none; } .btn--yellow .wp-block-button__link{ background:var(--yellow); color:var(--navy); box-shadow:0 8px 20px rgba(255,210,51,.45); } .btn--yellow .wp-block-button__link:hover{ color:var(--navy); box-shadow:0 12px 26px rgba(255,210,51,.55); } /* Im CTA-Band ist alles zentriert – der Button-Block richtet sich aber nach seiner eigenen Flex-Ausrichtung, nicht nach text-align. */ .cta .wp-block-buttons{ justify-content:center; } /* ---------- Navigation ---------- Der Navigations-Block bringt eigene Klassen mit; die Gestaltung aus components.css hängt an .nav__list und greift deshalb hier durch. */ .nav__in{ display:flex; align-items:center; gap:1.5rem; min-height:68px; } /* Sicherheitsnetz: Der Block-Abstand aus theme.json darf die Zeile nicht auseinanderziehen, egal welches Layout am Block steht. */ .nav__in > *{ margin-block:0; } .nav__brand{ flex:0 1 auto; min-width:0; } /* Der Navigationsblock darf nicht schrumpfen: Auf schmalen Schirmen steckt dort nur noch der Hamburger-Knopf, und der ist das schmalste Element in der Reihe. Mit flex-shrink:1 wurde er bei 360px auf 0 gequetscht — das Menü war schlicht weg (gemessen: Breite 24px bei 414, 0px bei 360). */ .nav__in > .nav__list{ flex:0 0 auto; } .nav__brand{ gap:.6rem; } /* Grundlinien in der Leiste angleichen. Beide Boxen sind mittig ausgerichtet, trotzdem wirkt die Wortmarke abgesackt: Sansita Swashed (20,8px) und Nunito (18,4px) haben unterschiedliche Metriken. Im Pixelbild nachgemessen lagen die Versalien fast gleich hoch (y=27 gegen 26), die Grundlinien aber 6px auseinander (y=44 gegen 38). Das Auge richtet sich nach der Grundlinie, nicht nach der Oberkante. Erster Versuch war 3px (also exakt die halbe Differenz): Damit lagen die Grundlinien perfekt auf einer Linie – und es sah trotzdem falsch aus, weil nun die Buchstabenmitten auseinanderfielen. Nachgemessen lag die Mitte der Menü-Kleinbuchstaben 2,5px tiefer als die der Wortmarke. Maßgeblich ist der Eindruck, nicht die Regel: Jetzt 1,75px, damit die MITTEN zusammenfallen. Die Grundlinien liegen dafür wieder leicht versetzt – bei zwei so verschiedenen Schriftgraden lässt sich beides nicht gleichzeitig haben. --grundlinie ist der Stellknopf. */ .nav__in{ --grundlinie:1.75px; } .nav__brandname{ margin:0; position:relative; top:calc(var(--grundlinie) * -1); } .nav__list a{ position:relative; top:var(--grundlinie); } .nav__brandname a{ font-family:var(--font-display); font-size:1.3rem; line-height:1.15; color:var(--navy); text-decoration:none; white-space:nowrap; } .nav__logo{ margin:0; flex:0 0 auto; line-height:0; } /* Höhe ausdrücklich: das Logo-SVG bringt keine eigenen Maße mit, mit height:auto fällt das
auf null zusammen. */ .nav__logo img{ width:40px; height:40px; display:block; } /* display:flex setzt der Navigationsblock selbst – hier sicherheitshalber mit, damit die Leiste auch dann sitzt, wenn das Core-CSS einmal nicht geladen wird (etwa in einer Vorschau ohne WordPress). */ .nav__list .wp-block-navigation__container{ display:flex; align-items:center; gap:1.4rem; } .nav__list a{ text-decoration:none; color:var(--navy); font-weight:600; padding:.3rem 0; border-bottom:2px solid transparent; } .nav__list a:hover{ border-bottom-color:var(--yellow); } /* WordPress setzt für Flex-Layouts `.is-layout-flex > :is(*, div){margin:0}`. Das ist spezifischer als eine einzelne Klasse – deshalb hier zwei Klassen tief, sonst bleibt der Button in der Mitte der Leiste stehen (gemessen: margin-left 0 statt auto, Button endete bei x=1123 statt x=1543). */ .nav__in > .nav__cta{ margin-left:auto; } /* Kein display:none für die Navigation auf schmalen Schirmen! Im statischen Entwurf war das harmlos, hier nicht: Der Navigationsblock trägt seinen Hamburger-Knopf selbst im