/* ══════════════════════════════════════════════════════════════════════ KAMUI ABSTAENDE: Luft zwischen Animation und Text ══════════════════════════════════════════════════════════════════════ Zwei Eingriffe an der ersten Sektion nach dem Hero. 1. DAS SIGNET UEBER "DER ALLTAG" FAELLT WEG Gemessen: DIV.artison-intro__image, 54x50 Pixel, direkt ueber der Ueberschrift. Es ist dieselbe Marke, die schon oben links im Kopf steht und unten im Fuss noch einmal. Dreimal dasselbe Zeichen auf einer Seite macht es zur Tapete statt zum Absender. display:none statt Loeschen im HTML: die Vorlage kommt aus dem Theme, und ein spaeterer Export wuerde das Element wieder mitbringen. Als Regel bleibt es weg, egal wie oft die Seite neu erzeugt wird. 2. DER ABSTAND SCHRUMPFT UM EIN VIERTEL Gemessen vor der Aenderung: Polster oben an der Sektion ............ 90px Abstand Sektionskante bis "Der Alltag" .. 324px Die 324 Pixel setzen sich aus dem Polster, dem Signet und dessen Raendern zusammen. Ohne Signet faellt der groesste Teil davon schon weg. Die restlichen 25 Prozent kommen aus dem Polster: 90px * 0.75 = 67.5px Warum nicht einfach alles zusammenstreichen: der Hero laeuft unten in Tusche aus (siehe hero.css), und dieser Ausklang braucht Platz. Zu wenig Abstand und die Schrift beginnt mitten im Verlauf. */ /* ── 1. Signet ueber der ersten Ueberschrift ────────────────────────── */ .artison-intro__image { display: none !important; } /* ── 2. Polster der ersten Sektion nach dem Hero ───────────────────── Nur die erste Sektion, nicht alle: weiter unten auf der Seite ist der grosse Abstand richtig, dort trennt er Themen voneinander. Hier soll die Schrift dichter an die Animation ruecken. */ .kamui-hero + section { padding-top: 67.5px !important; } /* Der Container darin bringt eigene Raender mit, die sich zum Polster addieren. Gemessen waren es die Reste der 324 Pixel. */ .kamui-hero + section .artison-intro { margin-top: 0 !important; padding-top: 0 !important; } /* Auf schmalen Geraeten ist das Polster ohnehin kleiner. Der gleiche Faktor, damit das Verhaeltnis stimmt. */ @media (max-width: 760px) { .kamui-hero + section { padding-top: 45px !important; } } /* ── 3. Die Luecke unter "Ignorieren koennen Sie sie trotzdem nicht" ── Franky: "die grosse Leere zwischen Ueberschrift und dem kleinen Text". Gemessen am 25.08. bei 1595px: 159px zwischen der echten Unterkante des grossen Textes und der Oberkante des kleinen. Zerlegt (Textkanten per Range, nicht Kastenkanten): Flex-Abstand der Sektion (--container-gap) ..... 67.5px padding-top am inneren Container ................ 30.0px margin-top am kleinen Textblock ................. 57.6px Zeilenueberhaenge oben/unten ...................... 3.0px ----------------------------------------------------- 158.1px Die letzten beiden Posten sind RESTE ausgeblendeter Bilder: zwischen den zwei Textbloecken sass das Kamui-Logo (siehe arbeitsweise.css Punkt 3), darueber das Signet (Punkt 1 oben). Beide sind display:none, ihre Abstandshalter blieben stehen - dasselbe Muster wie schon beim Signaturblock. Der Flex-Abstand von 67.5px ist dagegen ein THEME-Wert (--container-gap) und trennt hier zwei echte Bloecke. Der bleibt. Dass er zufaellig genauso gross ist wie mein Polster oben, ist Zufall und keine Verbindung. Bleibt: 67.5 + 3 = rund 70px Abstand. */ /* Das Polster stand unter dem Signet. */ #brxe-onyxxw .art-home-sign-container { padding-top: 0 !important; } /* Der Rand stand unter dem Logo. */ #brxe-onyxxw .art-home-sign-container > .brxe-text { margin-top: 0 !important; } /* ── 4. Die zwei Zeilen im Saeulengang (Seite Ablauf) ──────────────── Franky: "die texte sind zu weit voneinander entfernt". Der Entwurf gibt die Richtung. Der Ablauf findet den Weg. Gemessen am 25.08. bei 1878px, Textkanten per Range: 30px Abstand, und zwar VOLLSTAENDIG aus einer Quelle - dem Flex-gap des Containers. Alles andere war schon 0: margin-bottom Zeile 1 = 0, margin-top Zeile 2 = 0, Zeilenueberhang beidseitig = 0. Anders als die Luecke im Alltag-Abschnitt (Punkt 3) ist das KEIN Rest eines ausgeblendeten Elements, sondern der normale Container-Abstand des Themes. Er trennt hier aber keine zwei Bloecke, sondern zwei Zeilen EINES Satzes - deshalb wirkt er zu gross. Neu: 8px. Damit stehen die Zeilen als ein Gedanke zusammen, bleiben aber klar zwei Zeilen. Die Schrift ist 22.5px bei 27px Zeilenhoehe; 8px sind rund ein Drittel davon und damit sichtbar enger als ein normaler Zeilenabstand. Am Container, nicht an den Zeilen: die zwei
tragen selbst keine Raender, ein margin-Fix waere ins Leere gegangen. */ #brxe-cavwtl > .brxe-container { gap: 8px !important; row-gap: 8px !important; } /* ── 5. Haltungsseite: Bild links groesser, Logoplatz weg ──────────── Franky: "hier darf das logo weg und das bild links groesser". Das Logo selbst faellt in kamui-farbe.css (#brxe-pgeidg). Hier stehen die Folgen fuer das Layout. Gemessen am 25.08. bei 1595px: Aussen-Grid #brxe-vkzrfv .... 440px | 880px (gap 30) Bild #brxe-uagfog ............ 320x320 sichtbar Datei kamui-complexity.jpg ... 2560x2560 Zwei getrennte Befunde: a) Das Bild fuellt seine Spalte NICHT AUS. Die Spalte ist 440px breit, das Bild 320px - 120px lagen ungenutzt daneben. Ursache ist das width="320" height="480" im HTML-Attribut, ein Rest der Theme-Vorlage. Die Datei selbst ist 2560px gross, also reicht die Aufloesung fuer jede Groesse hier. b) Das Seitenverhaeltnis im Attribut (320x480, also 2:3) stimmt nicht mit der Datei (2560x2560, also 1:1) ueberein. Deshalb stand object-fit:cover und hat oben und unten beschnitten. Bei 1:1 faellt der Beschnitt weg, das Motiv ist quadratisch angelegt (Steingarten, konzentrische Kreise, zentriert). Neu: Spalte anteilig 42/58 statt fester 440px, Bild fuellt sie ganz. Anteilig statt fest, weil eine feste 560er-Spalte bei mittleren Breiten den Text erdrueckt: bei 1100px gemessen 560px Bild gegen nur noch 412px Text. Mit 42/58 schrumpfen beide zusammen. Bei 1350px Container ergibt das 553px Bild und 767px Text, also praktisch die gewuenschte Groesse, ohne den Text zu quetschen. align-items:center, nicht start: der Absatz ist vier Zeilen kurz, das Bild 560 hoch. Vorher fuellte das Logo den Platz darunter. Ohne Logo stand der Text oben und rechts klaffte ein Loch von rund 400px - sichtbar im Screenshot nach dem ersten Versuch. Mittig gesetzt steht der Absatz neben dem Bild statt darueber. */ #brxe-vkzrfv { grid-template-columns: minmax(0, 42fr) minmax(0, 58fr) !important; align-items: center !important; } #brxe-uagfog { width: 100% !important; height: auto !important; max-width: 100% !important; aspect-ratio: 1 / 1 !important; object-fit: cover !important; } /* Der Textblock stand mit dem Logo darunter mittig. Ohne Logo bleibt sonst dessen Platz als Loch stehen: das Grid behaelt seinen row-gap zwischen Text und dem (jetzt leeren) Bildslot. */ #brxe-ondfym { row-gap: 0 !important; } /* Schmale Geraete: dort stapelt das Theme ohnehin einspaltig. Das Bild bleibt quadratisch, nur nicht mehr 560 breit. */ @media (max-width: 991px) { #brxe-vkzrfv { grid-template-columns: minmax(0, 1fr) !important; } }