/** * Highlight Box Component * Juliana y Fadi Tango Website * * Wiederverwendbar auf allen Seiten. * Varianten: * .highlight-box — Text, kein Bild, Goldrand links * .highlight-box.with-image — Text + Bild, Goldrand links * .highlight-box.reverse — Bild links, Text rechts, Goldrand rechts */ /* ==================== BASE ==================== */ .highlight-box { background: var(--gradient-highlight); border: var(--border-width-medium) solid var(--border-color-default); border-left: 4px solid var(--color-primary); /* Fluid statt starrer 2rem/3rem/2rem - war komplett ohne Mobile- Anpassung (Fluid-Design-Audit Kategorie B1; die bestehende Media Query kümmert sich nur um .with-image/.reverse, nicht um die Basis-Box selbst). Desktop-Maxima unverändert identisch zu den bisherigen Fixwerten. margin bewusst weniger stark reduziert als padding/gap (Minimum --spacing-lg statt --spacing-sm), damit der Abstand zwischen mehreren Boxen auf der Seite optisch trennend bleibt. Grenzwerte referenzieren die Projekt-Spacing-Skala. */ padding: clamp(var(--spacing-sm), 4vw, var(--spacing-lg)); margin: clamp(var(--spacing-lg), 6vw, var(--spacing-xl)) 0; border-radius: 8px; display: grid; grid-template-columns: 1fr; gap: clamp(var(--spacing-sm), 4vw, var(--spacing-lg)); align-items: start; box-shadow: var(--shadow-glow-white); } .highlight-box.with-image { grid-template-columns: 1fr 1fr; } /* Zweite Box: Goldrand rechts statt links */ .highlight-box.reverse { border-top: var(--border-width-medium) solid var(--border-color-default); border-bottom: var(--border-width-medium) solid var(--border-color-default); border-left: var(--border-width-medium) solid var(--border-color-default); border-right: 4px solid var(--color-primary); } /* ==================== IMAGE ==================== */ .highlight-box-image { border-radius: 8px; overflow: hidden; height: 300px; /* Vertikal zentriert neben dem (meist längeren) Textblock, statt wie der Rest der Grid-Items am oberen Rand auszurichten (.highlight-box hat align-items: start). Wirkt nur in der zweispaltigen Desktop- Ansicht sichtbar; einspaltig steht ohnehin nur ein Item pro Zeile. */ align-self: center; } .highlight-box-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; } .highlight-box-image:hover img { transform: scale(1.05); } /* ==================== TYPOGRAPHY ==================== */ .highlight-box h3 { color: var(--color-primary); font-size: var(--font-size-4xl); margin-bottom: 1rem; } .highlight-box p { font-size: var(--font-size-lg); line-height: 1.7; color: #e0e0e0; /* Blocksatz mit sprachgerechter Silbentrennung (nutzt das dynamisch gesetzte lang-Attribut auf ) statt ungleichmäßiger Wort- abstände. text-wrap: balance verteilt Zeilenlängen gleichmäßiger (statt "pretty", das auf mehreren Android-Geräten via Opera - Chromium-Engine - zu einem Rendering-Bug führte: Textteile verschwanden, an ihrer Stelle blieb leerer Raum). balance ist die ältere, breiter ausgereifte Eigenschaft mit ähnlichem Ziel, wird von Browsern ohne Unterstützung sauber ignoriert statt fehlerhaft angewendet. Gleiches Pattern wie bereits auf der Einsteigerseite (.intro-section p) etabliert. */ text-align: justify; hyphens: auto; text-wrap: balance; } /* ==================== RESPONSIVE ==================== */ @media (max-width: 768px) { .highlight-box.with-image { grid-template-columns: 1fr; } /* Mobile Reihenfolge: Überschrift -> Bild -> Text, unabhängig von der DOM-Reihenfolge (.with-image vs. .reverse haben Content/Bild in vertauschter Markup-Reihenfolge, siehe Komponenten-Header oben). .highlight-box-content trägt selbst keine Styles (nur h3/p/.highlight- box-image sind gestylt), daher kann der Wrapper hier per "display: contents" aufgelöst werden: seine Kinder (h3, p) werden dadurch zu direkten Grid-Items von .highlight-box und lassen sich gemeinsam mit .highlight-box-image per order sortieren. */ .highlight-box-content { display: contents; } .highlight-box h3 { order: 1; } .highlight-box-image { order: 2; } .highlight-box p { order: 3; } }