/* Kunden-Layout MES.News (news.mes.wien) auf Basis von Klar, abgeleitet vom Kunden-Layout MES.Work (meswork.at, MES.Work
   MES.Work26/wwwroot/produktseite/_theme/meswork/site.css): Einstieg mit Farbverlauf in den Farben des Logos, links
   Überschrift, Text und Buttons, rechts das Karussell (Vorlage Startseite); darunter helle Karten mit Bild, Titel und
   Kurzzeile. Die Karussell-Folien führen zu den Karten (Sprungmarken), Detailseiten gibt es noch nicht. Farbe je Funktion
   dunkel genug für WCAG AA auf hellem Grund. Von Hand erstellt (30.10.2026), bis der Abzug aus MES.Site kommt. */
:root {
    --karte-radius: 1rem;
    --karte-grund: #f1f5fb;
    --karte-linie: #dbe4f1;
}

/* ---------- Kopf: Logo, Anmelden als Knopf rechts im Menü ---------- */
.marke-logo img { height: 44px; width: auto; }
.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, #033bd9, #0c74d6 55%, #04996f); border-bottom: 0; color: #ffffff; }
.vorlage-startseite .held h1 { color: #ffffff; }
.vorlage-startseite .held-text { color: rgba(255, 255, 255, 0.94); 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: #12d8c4; border-radius: 2px; }
.vorlage-startseite .held-geteilt .held-text { margin-bottom: 14px; }
.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.94); }
.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.5); border-radius: 999px; padding: 2px 12px; }
.vorlage-startseite .held-links .knopf { background: #ffffff; color: #033bd9; 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 #12d8c4; 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 (Funktionen) ---------- */
.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;
    scroll-margin-top: 96px;
}
.block-bildmittext.breite-drittel:target { border-color: var(--farbe); box-shadow: 0 0 0 3px var(--farbe); }
.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; }
/* Funktionen, die noch folgen: gedämpft */
.block-bildmittext.breite-drittel:has(.folgt) { 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 Funktion, wie in den Bildern (tools/produktseite/bilder.py) */
.block:has(img[src*="funktion-mailserver"]) { --farbe: #1d4ed8; }
.block:has(img[src*="funktion-portionen"]) { --farbe: #0369a1; }
.block:has(img[src*="funktion-einwilligung"]) { --farbe: #0f766e; }
.block:has(img[src*="funktion-empfaengerportal"]) { --farbe: #4338ca; }
.block:has(img[src*="funktion-import"]) { --farbe: #b45309; }
.block:has(img[src*="funktion-mehrsprachig"]) { --farbe: #0e7490; }
.block:has(img[src*="funktion-datenschutz"]) { --farbe: #be123c; }
.block:has(img[src*="funktion-hybridversand"]) { --farbe: #6d28d9; }
.block:has(img[src*="funktion-plugins"]) { --farbe: #475569; }

/* 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%; }
    .marke-logo img { height: 36px; }
}