/* Kunden-Layout MES.Work (meswork.at) auf Basis von Klar, abgeleitet vom Kunden-Layout MES (themes/meswien/assets/site.css
   in MES.CMS): 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 Arbeitsbereich wie bisher
   in Work26, dunkel genug für WCAG AA auf hellem Grund (mindestens 4,5 : 1). Von Hand erstellt (29.10.2026), bis der
   Abzug aus MES.Site kommt. */
:root {
    --karte-radius: 1rem;
    --karte-grund: #f1f5fb;
    --karte-linie: #dbe4f1;
}

/* ---------- Kopf: Anmelden als Knopf rechts im Menü ---------- */
.hauptmenue .menue-anmelden { border: 2px solid var(--akzent); border-radius: 999px; padding: 4px 16px; color: var(--akzent); font-weight: 600; }
.hauptmenue .menue-anmelden:hover { background: var(--akzent); color: var(--akzent-text); border-bottom-color: var(--akzent); }

/* ---------- Einstieg der Startseite ---------- */
.vorlage-startseite .held { background: linear-gradient(135deg, #1d4ed8, #0f766e 65%, #115e59); 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.6em; 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 .block-text ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; font-size: 0.9em; }
.vorlage-startseite .held-links .block-text li { border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 999px; padding: 2px 12px; }
.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 (Arbeitsbereiche). 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:has(a):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; color: var(--farbe); }
.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; }
/* Bereiche, die noch folgen: ohne Link, gedämpft */
.block-bildmittext.breite-drittel:not(:has(a)) { opacity: 0.8; }
.breite-drittel .folgt { display: inline-block; margin-top: 6px; font-size: 0.85em; color: #4b5563; border: 1px solid var(--karte-linie); border-radius: 999px; padding: 0 10px; background: #ffffff; }

/* Farbe je Arbeitsbereich wie bisher in Work26 (abgedunkelt für den Kontrast) */
.block:has(a[href="/basis"]) { --farbe: #1d4ed8; }
.block:has(a[href="/einnahmen-ausgaben-rechnung"]) { --farbe: #b45309; }
.block:has(a[href="/produkt-lager"]) { --farbe: #0369a1; }
.block:has(a[href="/zeiterfassung"]) { --farbe: #0f766e; }
.block:has(a[href="/dienstleistungsverrechnung"]) { --farbe: #be123c; }
.block:has(a[href="/vertraege"]) { --farbe: #4338ca; }
.block:has(a[href="/kundenportal"]) { --farbe: #0f766e; }
.block:has(img[src*="arbeitsbereich-verein"]) { --farbe: #6d28d9; }
.block:has(img[src*="arbeitsbereich-schulungen"]) { --farbe: #0e7490; }

/* Abschnitt unter den Karten: Fläche mit zwei Spalten */
.flaeche { background: var(--flaeche); border-top: 1px solid var(--linie); padding: var(--abstand) 0 calc(var(--abstand) - 24px); margin-top: 16px; }
.block-text ul.merkmale { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.block-text ul.merkmale li { background: #ffffff; border: 1px solid var(--linie); border-radius: 999px; padding: 4px 14px; font-size: 0.92em; }

@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.1em; }
}
@media (max-width: 800px) {
    .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; }
}