/* Kunden-Layout MES (www.mes.wien) auf Basis von Klar. Aufteilung wie auf messite.eu: Einstieg mit Farbverlauf, links
   Überschrift, Text und Buttons, rechts das Karussell (Vorlage Startseite); darunter helle Karten mit Bild, Titel und
   Kurzzeile, die ganze Karte klickbar. Titelfarbe je Schwerpunkt wie auf der bisherigen Website, dunkel genug für
   WCAG AA auf hellem Grund (mindestens 4,5 : 1). */
:root {
    --karte-radius: 1rem;
    --karte-grund: #f1f5fb;
    --karte-linie: #dbe4f1;
}

/* ---------- Einstieg der Startseite ---------- */
.vorlage-startseite .held { background: linear-gradient(135deg, #1d4ed8, #15803d 60%, #0f766e); border-bottom: 0; color: #ffffff; }
.vorlage-startseite .held h1 { color: #ffffff; }
.vorlage-startseite .held-text { color: rgba(255, 255, 255, 0.92); font-size: 1.15em; }
.vorlage-startseite .held-geteilt { padding: 56px 0 64px; }
.vorlage-startseite .held-geteilt .held-inhalt { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 48px; align-items: center; }
.vorlage-startseite .held-geteilt h1 { font-size: 2.9em; line-height: 1.12; margin: 0 0 18px; }
.vorlage-startseite .held-geteilt h1::after { content: ""; display: block; width: 56px; height: 4px; margin-top: 18px; background: #fbbf24; border-radius: 2px; }
.vorlage-startseite .held-geteilt .held-text { margin-bottom: 14px; }
/* Blöcke im Einstieg: Text weiß, Buttons nebeneinander (erster weiß gefüllt, weitere als Umriss) */
.vorlage-startseite .held .bloecke { gap: 12px; align-items: center; }
.vorlage-startseite .held-links .block { flex: 0 0 auto; margin: 0; }
.vorlage-startseite .held-links .block-text { flex-basis: 100%; color: rgba(255, 255, 255, 0.92); }
.vorlage-startseite .held-links .block-text a { color: #ffffff; }
.vorlage-startseite .held-links .knopf { background: #ffffff; color: #0b3d91; border: 2px solid #ffffff; border-radius: 999px; padding: 10px 24px; }
.vorlage-startseite .held-links .block-button ~ .block-button .knopf { background: transparent; color: #ffffff; }
.vorlage-startseite .held-links .knopf:focus-visible { outline: 3px solid #fbbf24; outline-offset: 3px; }
.vorlage-startseite .held-rechts .block { flex-basis: 100%; margin: 0; }
.vorlage-startseite .held-rechts .karussell { box-shadow: 0 18px 48px rgba(0, 20, 60, 0.35); }

/* ---------- Karten: Bild mit Text in ⅓-Breite (Schwerpunkte, Produkte). Der erste Link (fett, Titel) macht die ganze
   Karte klickbar. ---------- */
.block-bildmittext.breite-drittel {
    --farbe: var(--akzent);
    position: relative; flex-grow: 0; display: flex; flex-direction: row; align-items: center; gap: 16px; padding: 16px;
    margin-bottom: 20px; border-radius: var(--karte-radius); background: var(--karte-grund); border: 1px solid var(--karte-linie); color: #1f2937;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.block-bildmittext.breite-drittel:hover { transform: translateY(-3px); border-color: var(--farbe); box-shadow: 0 10px 24px rgba(0, 30, 80, 0.12); }
.block-bildmittext.breite-drittel > figure { flex: 0 0 36%; margin: 0; }
.block-bildmittext.breite-drittel img { display: block; width: 100%; border-radius: 10px; background: #ffffff; }
.block-bildmittext.breite-drittel .text { min-width: 0; margin: 0; line-height: 1.45; }
.block-bildmittext.breite-drittel p { margin: 0; }
.breite-drittel strong { display: block; margin-bottom: 4px; font-size: 1.1em; }
.breite-drittel strong + br { display: none; }
.breite-drittel strong a { color: var(--farbe); text-decoration: none; }
.breite-drittel strong a::after { content: ""; position: absolute; inset: 0; border-radius: var(--karte-radius); }
.breite-drittel strong a:focus-visible { outline: none; }
.breite-drittel strong a:focus-visible::after { outline: 3px solid var(--farbe); outline-offset: 3px; }

/* Farbe je Schwerpunkt wie bisher (Titel und Rand beim Darüberfahren) */
.block:has(a[href="/leistungen/it-betreuung/"]) { --farbe: #3730a3; }
.block:has(a[href="/leistungen/softwareentwicklung/"]) { --farbe: #6d28d9; }
.block:has(a[href="/leistungen/digitalisierung/"]) { --farbe: #166534; }
.block:has(a[href="/leistungen/netzwerk/"]) { --farbe: #9a3412; }
.block:has(a[href="/leistungen/reparaturen/"]) { --farbe: #b91c1c; }
.block:has(a[href="/leistungen/datenrettung/"]) { --farbe: #115e59; }
.block:has(a[href="/leistungen/aufarbeitung-verwertung/"]) { --farbe: #155e75; }
.block:has(a[href="/leistungen/unternehmensgruendung/"]) { --farbe: #9d174d; }
.block:has(a[href="/leistungen/cloud/"]) { --farbe: #3f6212; }

/* Foto „Ein Gesicht, ein ganzes Team“ (Bild mit Text, voll): Porträt im Hochformat, schmaler als die übliche Bildspalte */
.vorlage-startseite .block-bildmittext.breite-voll { align-items: center; }
.vorlage-startseite .block-bildmittext.breite-voll > figure { flex: 0 0 28%; margin: 0; }
.vorlage-startseite .block-bildmittext.breite-voll img { display: block; border-radius: var(--karte-radius); }

/* Bilder nebeneinander: Hälften (vorher und nachher) gleich hoch im Format 4 : 3, Drittel (Bildreihen) im Format 16 : 10 */
.block-bild.breite-haelfte img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.block-bild.breite-drittel { flex-grow: 0; }
.block-bild.breite-drittel img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.block-bild figcaption { font-size: 0.9em; color: #4b5563; margin-top: 6px; }

/* Produktseiten: Symbol des Produkts schmaler neben dem Text */
.block-bildmittext.breite-voll:has(img[src*="/produkt-mes-"]) > figure { flex: 0 0 32%; }
.block-bildmittext.breite-voll:has(img[src*="/produkt-mes-"]) img { border-radius: var(--karte-radius); }

@media (max-width: 960px) {
    .vorlage-startseite .held-geteilt .held-inhalt { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .vorlage-startseite .held-geteilt h1 { font-size: 2.2em; }
}
@media (max-width: 800px) {
    .vorlage-startseite .block-bildmittext.breite-voll > figure { flex-basis: auto; max-width: 320px; }
    .block-bildmittext.breite-drittel > figure { flex-basis: 35%; }
}
@media (prefers-reduced-motion: reduce) {
    .block-bildmittext.breite-drittel { transition: none; }
    .block-bildmittext.breite-drittel:hover { transform: none; }
}