Markenlogos optisch aufeinander abstimmen

Gewuenscht: CABINET 15 Prozent kleiner, Rotpunkt 20 Prozent groesser, Februe
unveraendert. Rotpunkt fuellte die Box bereits ganz aus und konnte nur ueber
eine groessere Box wachsen.

- Alle vier Logo-Boxen 20 Prozent hoeher (Seitenkopf 96 → 115 px, Kacheln
  44 → 53 px, /marken 56 → 67 px). Rotpunkt waechst dadurch um genau 20 %.
- Februe gleicht das ueber 20 Prozent Luft oben und unten in der Datei aus und
  rendert unveraendert.
- CABINET bekommt 18 Prozent Luft rechts – die Box begrenzt den 4:1-Schriftzug
  ueber die Breite, nicht ueber die Hoehe. Die Luft sitzt nur rechts, damit das
  Logo links buendig zum Text darunter bleibt.

Nachgerechnet an allen drei Stellen: CABINET 85 %, Rotpunkt 120 %, Februe 100 %.

Die Abstimmung steckt in den Zeichenflaechen der Dateien, nicht im Blade – so
gilt sie an allen vier Stellen gleichzeitig. Der Merksatz fuer neue Logos steht
im Kopf von BrandLogoSeeder.

Tests: 873 gruen (3217 Assertions), Pint sauber, alle Themes gebaut.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

database/seeders/BrandLogoSeeder.php

@@ -9,9 +9,20 @@ use Illuminate\Database\Seeder;
  * Traegt die Markenlogos nach.
  *
  * Grundlage: dev/2026-08-28/markenlogos/ (Zulieferung vom 03.09.2026). Die Dateien liegen unter
- * public/img/assets/marken/; das Februe-Logo ist dabei auf seinen Inhalt beschnitten – im
- * Original war knapp drei Viertel der Flaeche leerer Rand, wodurch es neben den beiden SVGs
- * winzig gewirkt haette.
+ * public/img/assets/marken/ und sind dort **optisch aufeinander abgestimmt** – das Frontend
+ * rendert sie in einer gemeinsamen Box, in der jedes Logo seine Zeichenflaeche ausfuellt:
+ *
+ *   Rotpunkt  Zeichenflaeche = Inhalt          → fuellt die Box, gilt als Bezugsgroesse
+ *   CABINET   Zeichenflaeche rechts +18 %      → rendert 15 % kleiner als Rotpunkt
+ *   Februe    Zeichenflaeche oben/unten +20 %  → rendert wie vor der Abstimmung
+ *
+ * Alle drei waren in der Zulieferung sehr unterschiedlich stark umrandet (CABINET nutzte nur
+ * 29 Prozent der Hoehe) und wirkten dadurch ungleich gross. Die Abstimmung steckt bewusst in den
+ * Dateien und nicht im Blade: so gilt sie an allen vier Stellen gleichzeitig – Seitenkopf,
+ * Startseiten-Kachel, /marken und „Weitere Marken“.
+ *
+ * Wird ein Logo im Admin ausgetauscht, sollte die neue Datei genauso knapp beschnitten sein.
+ * Ohne Rand rendert sie in Rotpunkt-Groesse, mit viel Rand entsprechend kleiner.
  *
  * {@see CmsBrandSeeder} bringt dieselben Werte fuer frische Installationen mit, ueberspringt
  * aber bereits angelegte Marken. Dieser Seeder fasst nur das Feld `logo` an und auch nur dann,

dev/2026-08-28/entwicklungsplan.md

@@ -1067,9 +1067,23 @@ plus 1 % Luft); die Pfade selbst sind unverändert. Der Febrü-PNG wurde tatsäc
 und auf 760 px Breite gerechnet – 53 KB → 15 KB. Die Originale liegen unverändert in
 `dev/2026-08-28/markenlogos/`.
 
-> Die Boxgrößen im Frontend sind dabei **nicht** angefasst worden: Febrü saß bereits richtig, und
-> eine größere Box hätte auch Febrü mitvergrößert. Die anderen beiden wachsen allein dadurch,
-> dass ihre Dateien den Platz jetzt ausnutzen.
+**Zweite Feinabstimmung nach Sichtung:** CABINET wirkte noch zu groß, Rotpunkt zu klein –
+gewünscht waren −15 % und +20 % bei unverändertem Febrü. Rotpunkt füllte die Box bereits ganz
+aus, konnte also nur über eine größere Box wachsen. Deshalb:
+
+- Alle vier Logo-Boxen **20 % höher** (Seitenkopf 96 → 115 px, Kacheln 44 → 53 px, `/marken`
+  56 → 67 px). Rotpunkt füllt sie weiter aus und wächst damit um genau 20 %.
+- **Febrü** gleicht das über 20 % Luft oben und unten in der Datei aus und rendert unverändert.
+- **CABINET** bekommt 18 % Luft rechts – die Box begrenzt den 4:1-Schriftzug über die *Breite*,
+  nicht über die Höhe. Die Luft sitzt nur rechts, damit das Logo links bündig zum Text darunter
+  bleibt.
+
+Nachgerechnet an allen drei Stellen: CABINET 85 %, Rotpunkt 120 %, Febrü 100 %.
+
+> Die optische Abstimmung steckt bewusst in den **Zeichenflächen der Dateien** und nicht im
+> Blade. So gilt sie an allen vier Stellen gleichzeitig, und die Boxgrößen bleiben eine reine
+> Layoutentscheidung. Der Merksatz für neue Logos steht im Kopf von `BrandLogoSeeder`: knapp
+> beschnitten rendert ein Logo in Rotpunkt-Größe, mit Rand entsprechend kleiner.
 
 **Nachziehen auf bestehenden Installationen:** `CmsBrandSeeder` überspringt vorhandene Marken,
 trägt die Logos also nur bei einer frischen Installation ein. `BrandLogoSeeder` **(neu)** setzt

public/img/assets/marken/cabinet.svg

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 30.8.1, SVG Export Plug-In . SVG Version: 9.03 Build 0)  -->
 <svg version="1.0" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="52.9 148.4 488.7 123.3" xml:space="preserve">
+	 viewBox="52.9 148.4 574.9 123.3" xml:space="preserve">
 <g>
 	<path d="M111.4,150.1c9,0,17.5,2.2,25.4,6.6c7.9,4.4,14.5,10.1,19.8,17l-9.3,23c-3-7.8-7.5-14.6-13.6-20.5
 		c-6.1-5.9-13.2-8.8-21.3-8.8c-10.8,0-20,4.2-27.6,12.6c-7.6,8.4-11.4,18.5-11.4,30.2c0,11.8,3.8,22,11.4,30.4

resources/views/livewire/web/components/sections/brand-detail.blade.php

@@ -18,7 +18,7 @@
                     @if (!empty($brand['logo']))
                         <h1>
                             <img src="{{ theme_image_url($brand['logo']) }}" alt="{{ $brand['name'] }}"
-                                class="h-20 sm:h-24 max-w-[17rem] w-auto object-contain object-left" />
+                                class="h-24 sm:h-[7.2rem] max-w-[17rem] w-auto object-contain object-left" />
                         </h1>
                     @else
                         <h1 class="text-section-title">{{ $brand['name'] }}</h1>
@@ -355,7 +355,7 @@
                             class="card-elevated rounded-2xl p-8 block hover:shadow-lg transition-shadow duration-300">
                             @if (!empty($other['logo']))
                                 <img src="{{ theme_image_url($other['logo']) }}" alt="{{ $other['name'] }}"
-                                    class="h-11 max-w-[10rem] w-auto mb-4 object-contain object-left" loading="lazy" />
+                                    class="h-[3.3rem] max-w-[10rem] w-auto mb-4 object-contain object-left" loading="lazy" />
                             @endif
 
                             <h3 class="text-xl font-medium">{{ $other['name'] }}</h3>

resources/views/livewire/web/components/sections/brand-overview.blade.php

@@ -19,11 +19,12 @@
                     </div>
 
                     <div class="{{ $loop->even ? '' : 'lg:order-1' }}">
-                        {{-- Feste Box statt fester Hoehe: die Markenlogos haben sehr
-                             unterschiedliche Seitenverhaeltnisse und wirken sonst ungleich gross. --}}
+                        {{-- Feste Box statt fester Hoehe: die Markenlogos haben sehr unterschiedliche
+                             Seitenverhaeltnisse und wirken sonst ungleich gross. Die optische Feinabstimmung
+                             steckt in den Zeichenflaechen der Dateien, nicht hier – siehe BrandLogoSeeder. --}}
                         @if (!empty($brand['logo']))
                             <img src="{{ theme_image_url($brand['logo']) }}" alt="{{ $brand['name'] }}"
-                                class="h-14 max-w-[12rem] w-auto mb-5 object-contain object-left" loading="lazy" />
+                                class="h-[4.2rem] max-w-[12rem] w-auto mb-5 object-contain object-left" loading="lazy" />
                         @endif
 
                         <h2 class="text-2xl lg:text-3xl font-medium">{{ $brand['name'] }}</h2>

resources/views/livewire/web/components/sections/core-brands.blade.php

@@ -22,11 +22,12 @@
                     @endif
 
                     <div class="p-8 flex flex-col grow">
-                        {{-- Feste Box statt fester Hoehe: die Markenlogos haben sehr
-                             unterschiedliche Seitenverhaeltnisse und wirken sonst ungleich gross. --}}
+                        {{-- Feste Box statt fester Hoehe: die Markenlogos haben sehr unterschiedliche
+                             Seitenverhaeltnisse und wirken sonst ungleich gross. Die optische Feinabstimmung
+                             steckt in den Zeichenflaechen der Dateien, nicht hier – siehe BrandLogoSeeder. --}}
                         @if (!empty($brand['logo']))
                             <img src="{{ theme_image_url($brand['logo']) }}" alt="{{ $brand['name'] }}"
-                                class="h-11 max-w-[10rem] w-auto mb-4 object-contain object-left" loading="lazy" />
+                                class="h-[3.3rem] max-w-[10rem] w-auto mb-4 object-contain object-left" loading="lazy" />
                         @endif
 
                         <h3 class="text-xl font-medium">{{ $brand['name'] }}</h3>