/**
 * HIT WP Anzeigenmeister - Website
 *
 * Uebersicht und Detailansicht der Eintraege. Angelehnt an heinsen-it.de:
 * weisse Karten mit weichem Schatten und 3px Radius, Roboto fuer
 * Ueberschriften, das Blau #618FCE als Akzent, Lila #5D0072 fuer den aktiven
 * Reiter, Grossbuchstaben fuer kleine Beschriftungen.
 *
 * Alle Farben, Abstaende und Schriften liegen als CSS-Variablen am
 * Wurzelelement .hwam - das Elementor-Widget schreibt seine Stil-Einstellungen
 * genau dorthin, ein Theme kann sie ebenso ueberschreiben.
 */

.hwam {
    --hwam-accent: #618fce;
    --hwam-accent-2: #5d0072;
    --hwam-heading: #54595f;
    --hwam-text: #222222;
    --hwam-muted: #7a7a7a;
    --hwam-meta: #adadad;
    --hwam-surface: #ffffff;
    --hwam-soft: #f7f8f9;
    --hwam-line: #e6e8eb;
    --hwam-radius: 3px;
    --hwam-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
    --hwam-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.18);
    --hwam-gap: 30px;
    --hwam-ratio: 16 / 9;
    --hwam-banner-ratio: 1544 / 500;
    --hwam-tab-text: var(--hwam-muted);
    --hwam-tab-active: var(--hwam-accent);
    --hwam-tab-bg: transparent;
    --hwam-tab-active-bg: transparent;
    --hwam-tab-line: var(--hwam-line);
    /* Plaketten (Plugin/Theme, Empfohlen): dezent – heller Grund, Schrift in der Akzentfarbe */
    --hwam-badge-text: var(--hwam-accent);
    --hwam-badge-bg: rgba(97, 143, 206, 0.12);
    --hwam-badge-featured-text: var(--hwam-accent-2);
    --hwam-badge-featured-bg: rgba(93, 0, 114, 0.1);
    /* Plakette „Vorschau": ein warmes Bernstein – noch nicht zu haben */
    --hwam-preview: #b26a00;
    --hwam-badge-preview-text: var(--hwam-preview);
    --hwam-badge-preview-bg: rgba(217, 130, 7, 0.14);
    /* Plaketten „Neu" und „Aktualisiert": Gruen */
    --hwam-fresh: #0b7a3b;
    --hwam-badge-fresh-text: var(--hwam-fresh);
    --hwam-badge-fresh-bg: rgba(18, 161, 80, 0.12);
    --hwam-button-radius: 3px;
    --hwam-button-text: #ffffff;
    --hwam-font-heading: "Roboto", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --hwam-font-text: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --hwam-cols: 3;

    box-sizing: border-box;
    color: var(--hwam-text);
    font-family: var(--hwam-font-text);
    line-height: 1.6;
}

.hwam *,
.hwam *::before,
.hwam *::after {
    box-sizing: inherit;
}

.hwam a {
    color: var(--hwam-accent);
    text-decoration: none;
}

.hwam a:hover,
.hwam a:focus {
    text-decoration: underline;
}

.hwam a:focus-visible {
    outline: 2px solid var(--hwam-accent);
    outline-offset: 3px;
    border-radius: 2px;
}

.hwam img {
    max-width: 100%;
    height: auto;
}

/* ------------------------------------------------------- Werkzeugleiste */

.hwam-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 24px;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 28px;
}

.hwam-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Knoepfe des Plugins sind <button>-Elemente. Themes und die Elementor-
   Website-Einstellungen faerben alle <button> ein (dunkler Grund, weisse
   Schrift, Radius, Schatten) – mit Regeln wie ".elementor-kit-7 button", die
   eine einfache Klasse schlagen. Deshalb hier drei Klassen tief und alles
   ausdruecklich gesetzt, auch fuer :hover und :focus. */
.hwam .hwam-filter .hwam-filter__button {
    -webkit-appearance: none;
    appearance: none;
    width: auto;
    min-height: 0;
    height: auto;
    margin: 0;
    padding: 9px 18px;
    border: 1px solid var(--hwam-accent);
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    color: var(--hwam-accent);
    font-family: var(--hwam-font-heading);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-transform: uppercase;
    text-decoration: none;
    text-shadow: none;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.hwam .hwam-filter .hwam-filter__button:hover,
.hwam .hwam-filter .hwam-filter__button:focus-visible {
    background: rgba(97, 143, 206, 0.12);
    color: var(--hwam-accent);
}

.hwam .hwam-filter .hwam-filter__button:focus-visible {
    outline: 2px solid var(--hwam-accent);
    outline-offset: 2px;
}

.hwam .hwam-filter .hwam-filter__button.is-active,
.hwam .hwam-filter .hwam-filter__button.is-active:hover,
.hwam .hwam-filter .hwam-filter__button.is-active:focus-visible {
    background: var(--hwam-accent);
    color: var(--hwam-button-text);
}

.hwam-search {
    flex: 1 1 220px;
    max-width: 340px;
}

.hwam-search__input {
    width: 100%;
    margin: 0;
    padding: 9px 14px;
    border: 1px solid var(--hwam-line);
    border-radius: var(--hwam-radius);
    background: var(--hwam-surface);
    color: var(--hwam-text);
    font-family: var(--hwam-font-text);
    font-size: 15px;
    line-height: 1.4;
}

.hwam-search__input:focus {
    border-color: var(--hwam-accent);
    outline: none;
    box-shadow: 0 0 0 3px rgba(97, 143, 206, 0.2);
}

/* ------------------------------------------------------------- Raster */

.hwam-grid {
    display: grid;
    grid-template-columns: repeat(var(--hwam-cols), minmax(0, 1fr));
    gap: var(--hwam-gap);
    margin: 0;
    padding: 0;
}

.hwam-grid--cols-1 { --hwam-cols: 1; }
.hwam-grid--cols-2 { --hwam-cols: 2; }
.hwam-grid--cols-3 { --hwam-cols: 3; }
.hwam-grid--cols-4 { --hwam-cols: 4; }
.hwam-grid--cols-5 { --hwam-cols: 5; }
.hwam-grid--cols-6 { --hwam-cols: 6; }

@media (max-width: 1024px) {
    .hwam-grid--tablet-1 { --hwam-cols: 1; }
    .hwam-grid--tablet-2 { --hwam-cols: 2; }
    .hwam-grid--tablet-3 { --hwam-cols: 3; }
    .hwam-grid--tablet-4 { --hwam-cols: 4; }
    .hwam-grid--tablet-5 { --hwam-cols: 5; }
    .hwam-grid--tablet-6 { --hwam-cols: 6; }
}

@media (max-width: 767px) {
    .hwam-grid--mobile-1 { --hwam-cols: 1; }
    .hwam-grid--mobile-2 { --hwam-cols: 2; }
    .hwam-grid--mobile-3 { --hwam-cols: 3; }
    .hwam-grid--mobile-4 { --hwam-cols: 4; }
    .hwam-grid--mobile-5 { --hwam-cols: 5; }
    .hwam-grid--mobile-6 { --hwam-cols: 6; }
}

/* -------------------------------------------------------------- Karte */

.hwam-card {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0;
    border-radius: var(--hwam-radius);
    background: var(--hwam-surface);
    box-shadow: var(--hwam-shadow);
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.hwam-card:hover,
.hwam-card:focus-within {
    box-shadow: var(--hwam-shadow-hover);
    transform: translateY(-3px);
}

.hwam-card--featured {
    box-shadow: var(--hwam-shadow), inset 0 3px 0 var(--hwam-accent-2);
}

.hwam-card[hidden] {
    display: none;
}

.hwam-card__media {
    position: relative;
    aspect-ratio: var(--hwam-ratio);
    background: var(--hwam-soft);
    overflow: hidden;
}

.hwam-card__media-link {
    display: block;
    height: 100%;
}

/* Bildregeln mit .hwam davor: Themes setzen gern ".entry-content img { height: auto }" */
.hwam .hwam-card__image {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    transition: transform 0.4s ease;
}

/* Ganzes Bild: verkleinert in den Rahmen, der Rest bleibt hell */
.hwam--fit-contain .hwam-card__image {
    object-fit: contain;
}

.hwam .hwam-card:hover .hwam-card__image {
    transform: scale(1.03);
}

.hwam-card__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--hwam-accent) 0%, var(--hwam-accent-2) 100%);
}

.hwam-card__placeholder-icon {
    width: 38%;
    max-width: 128px;
    height: auto;
    border-radius: 14px;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.25));
}

.hwam-card__placeholder-letter {
    color: rgba(255, 255, 255, 0.92);
    font-family: var(--hwam-font-heading);
    font-size: 64px;
    font-weight: 600;
    line-height: 1;
}

/* Plaketten (Plugin/Theme, Empfohlen) stehen im Textteil ueber dem Titel,
   nicht auf dem Bild – das Logo bleibt frei. */
.hwam-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 12px;
}

.hwam-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 24px 30px 26px;
}

.hwam-card__title {
    margin: 0 0 12px;
    padding: 0;
    color: var(--hwam-heading);
    font-family: var(--hwam-font-heading);
    font-size: 21px;
    font-weight: 600;
    line-height: 1.3;
}

.hwam .hwam-card__title a {
    color: inherit;
    text-decoration: none;
}

.hwam-card__title a::after {
    /* Die ganze Karte ist klickbar, ohne dass ein Link sie umschliesst. */
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.hwam .hwam-card__title a:hover,
.hwam .hwam-card__title a:focus {
    color: var(--hwam-accent);
    text-decoration: none;
}

.hwam-card__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 14px;
}

.hwam-card__excerpt {
    flex: 1 1 auto;
    margin: 0 0 20px;
    color: var(--hwam-text);
    font-size: 16px;
    line-height: 1.6;
}

.hwam-card__actions {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    align-items: center;
    margin-top: auto;
}

.hwam .hwam-card__more,
.hwam .hwam-card__download {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    color: var(--hwam-accent);
    font-family: var(--hwam-font-heading);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hwam .hwam-card__download {
    color: var(--hwam-muted);
}

.hwam-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    padding: 14px 30px;
    border-top: 1px solid var(--hwam-line);
    color: var(--hwam-meta);
    font-size: 12px;
    line-height: 1.4;
}

/* ------------------------------------------------------------- Badges */

/* Dezent als Standard; "kraeftig" fuellt in der Akzentfarbe, "umriss" nur
   mit Linie – Wahl im Widget (Karten -> Plaketten), Farben ueber
   --hwam-badge-*. Bei Browsern mit color-mix folgt der helle Grund der
   eingestellten Akzentfarbe, sonst dem Standardblau. */
.hwam {
    --hwam-badge-bg: color-mix(in srgb, var(--hwam-accent) 12%, transparent);
    --hwam-badge-featured-bg: color-mix(in srgb, var(--hwam-accent-2) 10%, transparent);
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .hwam {
        --hwam-badge-bg: rgba(97, 143, 206, 0.12);
        --hwam-badge-featured-bg: rgba(93, 0, 114, 0.1);
    }
}

.hwam--badges-solid {
    --hwam-badge-text: var(--hwam-button-text);
    --hwam-badge-bg: var(--hwam-accent);
    --hwam-badge-featured-text: var(--hwam-button-text);
    --hwam-badge-featured-bg: var(--hwam-accent-2);
    --hwam-badge-preview-text: var(--hwam-button-text);
    --hwam-badge-preview-bg: var(--hwam-preview);
    --hwam-badge-fresh-text: var(--hwam-button-text);
    --hwam-badge-fresh-bg: var(--hwam-fresh);
}

.hwam--badges-outline {
    --hwam-badge-bg: transparent;
    --hwam-badge-featured-bg: transparent;
    --hwam-badge-preview-bg: transparent;
    --hwam-badge-fresh-bg: transparent;
}

.hwam-badge {
    display: inline-block;
    padding: 3px 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--hwam-badge-bg);
    color: var(--hwam-badge-text);
    font-family: var(--hwam-font-heading);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    line-height: 1.4;
    text-transform: uppercase;
}

.hwam-badge--featured {
    background: var(--hwam-badge-featured-bg);
    color: var(--hwam-badge-featured-text);
}

/* "Neu" und "Aktualisiert" – seit hoechstens N Tagen veroeffentlicht bzw.
   mit neuer Fassung vom Server */
.hwam-badge--new,
.hwam-badge--updated {
    background: var(--hwam-badge-fresh-bg);
    color: var(--hwam-badge-fresh-text);
}

/* "Neu" und "Aktualisiert" – seit hoechstens N Tagen veroeffentlicht bzw.
   mit neuer Fassung vom Server */
.hwam-badge--new,
.hwam-badge--updated {
    background: var(--hwam-badge-fresh-bg);
    color: var(--hwam-badge-fresh-text);
}

/* "Neu" und "Aktualisiert" – seit hoechstens N Tagen veroeffentlicht bzw.
   mit neuer Fassung vom Server */
.hwam-badge--new,
.hwam-badge--updated {
    background: var(--hwam-badge-fresh-bg);
    color: var(--hwam-badge-fresh-text);
}

/* "Neu" und "Aktualisiert" – seit hoechstens N Tagen veroeffentlicht bzw.
   mit neuer Fassung vom Server */
.hwam-badge--new,
.hwam-badge--updated {
    background: var(--hwam-badge-fresh-bg);
    color: var(--hwam-badge-fresh-text);
}

/* "Vorschau" bleibt auch ohne Plaketten stehen – der Besucher soll wissen,
   dass es das Produkt noch nicht gibt */
.hwam-badge--preview,
.hwam--badges-none .hwam-badge--preview {
    display: inline-block;
    background: var(--hwam-badge-preview-bg);
    color: var(--hwam-badge-preview-text);
}

.hwam--badges-outline .hwam-badge {
    border-color: currentColor;
}

.hwam--badges-none .hwam-badge {
    display: none;
}

.hwam-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--hwam-soft);
    color: var(--hwam-muted);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
}

.hwam-pill--version {
    background: rgba(97, 143, 206, 0.12);
    color: var(--hwam-accent);
}

/* Hinweis zur Vorschau („Erscheint im Herbst") auf Karten und in Zeilen */
.hwam-pill--preview {
    background: var(--hwam-badge-preview-bg);
    color: var(--hwam-badge-preview-text);
}

/* Der Hinweis anstelle der Knoepfe – Unterseite und Vorstellung */
.hwam .hwam-preview-note {
    margin: 18px 0 0;
    color: var(--hwam-preview);
    font-family: var(--hwam-font-heading);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.hwam .hwam-preview-note + .hwam-actions {
    margin-top: 12px;
}

.hwam-pill--free {
    background: rgba(18, 161, 80, 0.12);
    color: #0b7a3b;
}

.hwam-pill--license {
    background: rgba(93, 0, 114, 0.1);
    color: var(--hwam-accent-2);
}

.hwam-pill--free_license {
    background: rgba(18, 161, 80, 0.12);
    color: #0b7a3b;
}

.hwam-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.hwam-tags__item {
    margin: 0;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--hwam-soft);
    color: var(--hwam-muted);
    font-size: 12px;
    line-height: 1.4;
}

.hwam-empty {
    margin: 0;
    padding: 28px 24px;
    border: 1px dashed var(--hwam-line);
    border-radius: var(--hwam-radius);
    color: var(--hwam-muted);
    text-align: center;
}

.hwam-empty[hidden] {
    display: none;
}

.hwam-empty--filter {
    margin-top: 20px;
}

/* ---------------------------------------------------------- Unterseite */

.hwam-back {
    margin: 0 0 22px;
}

/* Der Knopf am Ende der Unterseite – nach den Reitern */
.hwam-back--bottom {
    margin: 36px 0 0;
    padding-top: 24px;
    border-top: 1px solid var(--hwam-line);
}

.hwam .hwam-back__button {
    display: inline-flex;
    gap: 8px;
    align-items: center;
}

.hwam .hwam-back__link {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    color: var(--hwam-accent);
    font-family: var(--hwam-font-heading);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hwam-hero {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    margin: 0 0 30px;
    padding: 34px 36px;
    border-radius: var(--hwam-radius);
    background: var(--hwam-surface);
    box-shadow: var(--hwam-shadow);
}

.hwam .hwam-hero__icon,
.hwam .hwam-hero .hwam-card__placeholder {
    flex: 0 0 auto;
    width: 96px;
    height: 96px;
    max-width: none;
    border-radius: 16px;
    object-fit: contain;
}

.hwam-hero .hwam-card__placeholder-letter {
    font-size: 40px;
}

.hwam-hero__text {
    flex: 1 1 auto;
    min-width: 0;
}

.hwam-hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 14px;
}

.hwam-hero__title {
    margin: 0 0 12px;
    padding: 0;
    color: var(--hwam-accent);
    font-family: var(--hwam-font-heading);
    font-size: 35px;
    font-weight: 600;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.hwam-hero__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 16px;
}

.hwam-pill--muted {
    background: var(--hwam-soft);
    color: var(--hwam-muted);
}

.hwam-hero__summary {
    max-width: 70ch;
    margin: 0 0 22px;
    color: var(--hwam-text);
    font-size: 17px;
    line-height: 1.6;
}

.hwam-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.hwam .hwam-button {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    margin: 0;
    padding: 12px 24px;
    border: 1px solid var(--hwam-accent);
    border-radius: var(--hwam-button-radius);
    font-family: var(--hwam-font-heading);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.hwam .hwam-button:hover,
.hwam .hwam-button:focus {
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(97, 143, 206, 0.3);
}

.hwam .hwam-button--primary {
    background: var(--hwam-accent);
    color: var(--hwam-button-text);
}

.hwam .hwam-button--primary:hover,
.hwam .hwam-button--primary:focus {
    background: var(--hwam-accent-2);
    border-color: var(--hwam-accent-2);
    color: var(--hwam-button-text);
}

.hwam .hwam-button--secondary {
    background: transparent;
    color: var(--hwam-accent);
}

.hwam .hwam-button--secondary:hover,
.hwam .hwam-button--secondary:focus {
    background: rgba(97, 143, 206, 0.1);
    color: var(--hwam-accent);
}

.hwam-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
    align-items: start;
}

.hwam-layout--sidebar {
    grid-template-columns: minmax(0, 1fr) 320px;
}

.hwam-main {
    min-width: 0;
}

.hwam-figure {
    margin: 0 0 30px;
}

/* Kopfbild – die oberste Zeile der Unterseite, im Format des Banners */
.hwam-banner {
    margin: 0 0 30px;
}

.hwam .hwam-banner__image {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    border-radius: var(--hwam-radius);
    box-shadow: var(--hwam-shadow);
    background: var(--hwam-soft);
}

/* Rahmen füllen: festes Seitenverhältnis, mittig beschnitten */
.hwam.hwam--fit-cover .hwam-banner__image {
    aspect-ratio: var(--hwam-banner-ratio);
    object-fit: cover;
}

.hwam .hwam-figure__image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--hwam-radius);
    box-shadow: var(--hwam-shadow);
}

/* ------------------------------------------------------------- Reiter */

.hwam .hwam-tabs__list {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin: 0 0 28px;
    padding: 0;
    border-bottom: 2px solid var(--hwam-tab-line);
}

/* Reiter: Schrift in der Reiterfarbe, der aktive in der Akzentfarbe mit
   Linie darunter – kein Knopf. Farben ueber --hwam-tab-* (Widget: Reiter).
   Drei Klassen tief aus demselben Grund wie die Filterknoepfe. */
.hwam .hwam-tabs .hwam-tabs__tab {
    -webkit-appearance: none;
    appearance: none;
    width: auto;
    min-height: 0;
    height: auto;
    margin: 0 0 -2px;
    padding: 14px 18px 12px;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    background: var(--hwam-tab-bg);
    box-shadow: none;
    color: var(--hwam-tab-text);
    font-family: var(--hwam-font-heading);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-transform: uppercase;
    text-decoration: none;
    text-shadow: none;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.hwam .hwam-tabs .hwam-tabs__tab:hover,
.hwam .hwam-tabs .hwam-tabs__tab:focus-visible {
    background: var(--hwam-tab-bg);
    color: var(--hwam-tab-active);
}

.hwam .hwam-tabs .hwam-tabs__tab:focus-visible {
    outline: 2px solid var(--hwam-tab-active);
    outline-offset: -2px;
}

.hwam .hwam-tabs .hwam-tabs__tab.is-active,
.hwam .hwam-tabs .hwam-tabs__tab.is-active:hover,
.hwam .hwam-tabs .hwam-tabs__tab.is-active:focus-visible {
    border-bottom-color: var(--hwam-tab-active);
    background: var(--hwam-tab-active-bg);
    color: var(--hwam-tab-active);
}

.hwam-tabs__panel[hidden] {
    display: none;
}

/* Ohne JavaScript stehen alle Abschnitte untereinander, jeder mit seiner
   Ueberschrift. Sobald das Skript die Reiter aufgebaut hat, tragen die
   Reiter die Beschriftung und die Ueberschriften bleiben Screenreadern. */
.hwam-tabs.is-enhanced .hwam-content__heading {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.hwam-tabs:not(.is-enhanced) .hwam-tabs__panel + .hwam-tabs__panel {
    margin-top: 36px;
}

/* ------------------------------------------------------------- Inhalt */

.hwam-content {
    font-size: 17px;
    line-height: 1.7;
}

.hwam-content__heading {
    margin: 0 0 16px;
    padding: 0;
    color: var(--hwam-accent);
    font-family: var(--hwam-font-heading);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.3;
}

.hwam-content h2,
.hwam-content h3,
.hwam-content h4,
.hwam-content h5 {
    margin: 1.6em 0 0.6em;
    color: var(--hwam-heading);
    font-family: var(--hwam-font-heading);
    font-weight: 600;
    line-height: 1.3;
}

.hwam-content h2 { font-size: 24px; }
.hwam-content h3 { font-size: 21px; }
.hwam-content h4 { font-size: 18px; }
.hwam-content h5 { font-size: 16px; }

.hwam-content > :first-child,
.hwam-content .hwam-content__heading + * {
    margin-top: 0;
}

.hwam-content p,
.hwam-content ul,
.hwam-content ol {
    margin: 0 0 1.1em;
}

.hwam-content ul,
.hwam-content ol {
    padding-left: 1.4em;
}

.hwam-content li {
    margin-bottom: 0.35em;
}

.hwam-content code {
    padding: 2px 6px;
    border-radius: 3px;
    background: var(--hwam-soft);
    font-size: 0.9em;
}

.hwam-content pre {
    padding: 16px 18px;
    border-radius: var(--hwam-radius);
    background: #2b2f36;
    color: #f2f4f7;
    overflow-x: auto;
}

.hwam-content pre code {
    padding: 0;
    background: transparent;
    color: inherit;
}

.hwam-content img {
    border-radius: var(--hwam-radius);
    box-shadow: var(--hwam-shadow);
}

.hwam-content--screenshots img {
    display: block;
    margin: 0 0 1em;
}

.hwam-content--changelog h4 {
    display: inline-block;
    margin: 1.4em 0 0.5em;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(97, 143, 206, 0.12);
    color: var(--hwam-accent);
    font-size: 14px;
}

.hwam-content--changelog > h4:first-of-type {
    margin-top: 0;
}

/* --------------------------------------------------------- Seitenleiste */

.hwam-facts {
    position: sticky;
    top: 24px;
    padding: 26px 28px;
    border-radius: var(--hwam-radius);
    background: var(--hwam-surface);
    box-shadow: var(--hwam-shadow);
}

.hwam-facts__heading {
    margin: 0 0 14px;
    padding: 0 0 12px;
    border-bottom: 2px solid var(--hwam-accent);
    color: var(--hwam-accent);
    font-family: var(--hwam-font-heading);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hwam-facts__list {
    margin: 0 0 16px;
}

.hwam-facts__row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 0;
    border-bottom: 1px solid var(--hwam-line);
}

.hwam-facts__row:last-child {
    border-bottom: 0;
}

.hwam-facts__label {
    margin: 0;
    color: var(--hwam-muted);
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hwam-facts__value {
    margin: 0;
    color: var(--hwam-text);
    font-size: 15px;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.hwam-facts .hwam-tags {
    margin: 0;
}

/* ------------------------------------------------------ Editor-Hinweis */

.hwam-editor-hint {
    margin: 12px 0 0;
    padding: 12px 16px;
    border-left: 3px solid var(--hwam-accent);
    border-radius: var(--hwam-radius);
    background: var(--hwam-soft);
    color: var(--hwam-text);
    font-size: 14px;
}

/* ------------------------------------------------- Liste und kompakt */

.hwam-list {
    display: flex;
    flex-direction: column;
    gap: calc(var(--hwam-gap) / 2);
    margin: 0;
    padding: 0;
}

.hwam-row {
    display: flex;
    gap: 22px;
    align-items: flex-start;
    padding: 22px 26px;
    border-radius: var(--hwam-radius);
    background: var(--hwam-surface);
    box-shadow: var(--hwam-shadow);
}

.hwam-row--featured {
    box-shadow: var(--hwam-shadow), inset 3px 0 0 var(--hwam-accent-2);
}

.hwam-row[hidden] {
    display: none;
}

.hwam-row__media {
    flex: 0 0 auto;
}

.hwam .hwam-row__icon,
.hwam-row .hwam-card__placeholder {
    display: block;
    width: 64px;
    height: 64px;
    max-width: none;
    border-radius: 14px;
    object-fit: contain;
}

.hwam-row .hwam-card__placeholder {
    aspect-ratio: auto;
}

.hwam-row .hwam-card__placeholder-letter {
    font-size: 26px;
}

.hwam-row__body {
    flex: 1 1 auto;
    min-width: 0;
}

.hwam-row__head {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    align-items: center;
    margin: 0 0 8px;
}

.hwam-row__title {
    margin: 0;
    padding: 0;
    color: var(--hwam-heading);
    font-family: var(--hwam-font-heading);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.3;
}

.hwam .hwam-row__title a {
    color: inherit;
    text-decoration: none;
}

.hwam .hwam-row__title a:hover,
.hwam .hwam-row__title a:focus {
    color: var(--hwam-accent);
    text-decoration: none;
}

.hwam-row__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.hwam-row__excerpt {
    margin: 0 0 10px;
    color: var(--hwam-text);
    font-size: 15px;
    line-height: 1.6;
}

.hwam-row .hwam-tags {
    margin: 0 0 10px;
}

.hwam-row__meta {
    display: block;
    color: var(--hwam-meta);
    font-size: 13px;
}

.hwam-row__actions {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
}

/* Kompakt: eine Zeile je Eintrag – fuer Seitenleisten */
.hwam-list--compact {
    gap: 8px;
}

.hwam-row--compact {
    gap: 14px;
    align-items: center;
    padding: 12px 16px;
}

.hwam .hwam-row--compact .hwam-row__icon,
.hwam-row--compact .hwam-card__placeholder {
    width: 36px;
    height: 36px;
    border-radius: 8px;
}

.hwam-row--compact .hwam-card__placeholder-letter {
    font-size: 16px;
}

.hwam-row--compact .hwam-row__head {
    margin: 0;
}

.hwam-row--compact .hwam-row__title {
    font-size: 15px;
}

.hwam-row--compact .hwam-row__meta {
    margin-top: 2px;
    font-size: 12px;
}

.hwam-row--compact .hwam-row__actions {
    flex-direction: row;
    align-items: center;
}

/* --------------------------------------------------------- Vorstellung */

.hwam--spotlight {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--hwam-gap);
    align-items: center;
    padding: 34px 36px;
    border-radius: var(--hwam-radius);
    background: var(--hwam-surface);
    box-shadow: var(--hwam-shadow);
}

.hwam--spotlight-right .hwam-spotlight__media {
    order: 2;
}

.hwam--spotlight-top,
.hwam--spotlight-none {
    grid-template-columns: minmax(0, 1fr);
}

.hwam .hwam-spotlight__image {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    border-radius: var(--hwam-radius);
    background: var(--hwam-soft);
}

.hwam--fit-cover .hwam-spotlight__image {
    aspect-ratio: var(--hwam-banner-ratio);
    object-fit: cover;
}

.hwam-spotlight__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 14px;
}

.hwam-spotlight__badges:empty {
    display: none;
}

.hwam-spotlight__head {
    display: flex;
    gap: 16px;
    align-items: center;
    margin: 0 0 12px;
}

.hwam .hwam-spotlight__icon {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    max-width: none;
    border-radius: 14px;
    object-fit: contain;
}

.hwam-spotlight__title {
    margin: 0;
    padding: 0;
    color: var(--hwam-heading);
    font-family: var(--hwam-font-heading);
    font-size: 30px;
    font-weight: 600;
    line-height: 1.2;
}

.hwam .hwam-spotlight__title a {
    color: inherit;
    text-decoration: none;
}

.hwam .hwam-spotlight__title a:hover,
.hwam .hwam-spotlight__title a:focus {
    color: var(--hwam-accent);
    text-decoration: none;
}

.hwam-spotlight__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 16px;
}

.hwam-spotlight__summary {
    margin: 0 0 20px;
    color: var(--hwam-text);
    font-size: 17px;
    line-height: 1.6;
}

.hwam--spotlight .hwam-tags {
    margin: 0 0 20px;
}

/* --------------------------------------------------------- Versionsbox */

.hwam-version__box {
    padding: 24px 26px 26px;
    border-radius: var(--hwam-radius);
    background: var(--hwam-surface);
    box-shadow: var(--hwam-shadow);
}

.hwam-version__head {
    display: flex;
    gap: 14px;
    align-items: center;
    margin: 0 0 18px;
}

.hwam .hwam-version__icon {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    max-width: none;
    border-radius: 12px;
    object-fit: contain;
}

.hwam-version__text {
    min-width: 0;
}

/* Art und – in der Vorschau – die Plakette nebeneinander */
.hwam-version__kicker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 2px;
    color: var(--hwam-accent);
    font-family: var(--hwam-font-heading);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.hwam-version__title {
    margin: 0;
    padding: 0;
    color: var(--hwam-heading);
    font-family: var(--hwam-font-heading);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
}

.hwam .hwam-version__title a {
    color: inherit;
    text-decoration: none;
}

.hwam .hwam-version__title a:hover,
.hwam .hwam-version__title a:focus {
    color: var(--hwam-accent);
    text-decoration: none;
}

.hwam-version__number {
    display: flex;
    flex-direction: column;
    margin: 0 0 16px;
    padding: 14px 18px;
    border-radius: var(--hwam-radius);
    background: var(--hwam-soft);
}

.hwam-version__label {
    color: var(--hwam-muted);
    font-family: var(--hwam-font-heading);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.hwam-version__value {
    color: var(--hwam-accent);
    font-family: var(--hwam-font-heading);
    font-size: 30px;
    font-weight: 600;
    line-height: 1.2;
}

.hwam-version__facts {
    margin: 0 0 18px;
    padding: 0;
}

.hwam-version__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--hwam-line);
    font-size: 14px;
}

.hwam-version__row:last-child {
    border-bottom: 0;
}

.hwam-version__row dt {
    margin: 0;
    color: var(--hwam-muted);
    font-weight: 500;
}

.hwam-version__row dd {
    margin: 0;
    color: var(--hwam-text);
    text-align: right;
}

.hwam-actions--stack {
    flex-direction: column;
    align-items: stretch;
}

.hwam .hwam-actions--stack .hwam-button {
    justify-content: center;
}

/* ------------------------------------------------------------ Abschnitt */

.hwam--section .hwam-content__heading {
    margin-bottom: 16px;
}

/* ------------------------------------------------------- Unsichtbar */

/* Nur fuer Vorleseprogramme – etwa "Ja"/"Nein" hinter den Zeichen der Matrix */
.hwam .hwam-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ------------------------------------------------------- Akkordeon */

/* Haeufige Fragen (und angehakte eigene Reiter): <details> je Frage – ohne
   Skript bedienbar. Das Zeichen rechts dreht sich beim Oeffnen. */
.hwam-accordion__intro {
    margin: 0 0 20px;
}

.hwam-accordion {
    border-top: 1px solid var(--hwam-line);
}

.hwam-accordion__item {
    margin: 0;
    border-bottom: 1px solid var(--hwam-line);
}

.hwam .hwam-accordion .hwam-accordion__question {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 16px 4px;
    color: var(--hwam-heading);
    font-family: var(--hwam-font-heading);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    list-style: none;
    cursor: pointer;
}

.hwam .hwam-accordion .hwam-accordion__question::-webkit-details-marker {
    display: none;
}

.hwam .hwam-accordion .hwam-accordion__question:hover,
.hwam .hwam-accordion .hwam-accordion__item[open] > .hwam-accordion__question {
    color: var(--hwam-accent);
}

.hwam .hwam-accordion .hwam-accordion__question:focus-visible {
    outline: 2px solid var(--hwam-accent);
    outline-offset: 2px;
}

.hwam-accordion__mark {
    position: relative;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border: 1px solid currentColor;
    border-radius: 50%;
}

.hwam-accordion__mark::before,
.hwam-accordion__mark::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 2px;
    background: currentColor;
    transform: translate(-50%, -50%);
    transition: transform 0.2s ease;
}

.hwam-accordion__mark::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.hwam-accordion__item[open] > .hwam-accordion__question .hwam-accordion__mark::after {
    transform: translate(-50%, -50%) rotate(0deg);
}

.hwam-accordion__answer {
    padding: 0 4px 18px;
}

.hwam-accordion__answer > :last-child {
    margin-bottom: 0;
}

/* ------------------------------------------------------ Funktionsmatrix */

.hwam-matrix-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.hwam .hwam-matrix {
    width: 100%;
    margin: 0;
    border: 0;
    border-collapse: collapse;
    font-size: 15px;
    line-height: 1.5;
}

.hwam .hwam-matrix th,
.hwam .hwam-matrix td {
    padding: 12px 14px;
    border: 0;
    border-bottom: 1px solid var(--hwam-line);
    background: transparent;
    text-align: center;
    vertical-align: middle;
}

.hwam .hwam-matrix .hwam-matrix__head {
    padding-top: 0;
    border-bottom: 2px solid var(--hwam-line);
    color: var(--hwam-accent);
    font-family: var(--hwam-font-heading);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.hwam .hwam-matrix .hwam-matrix__head--feature,
.hwam .hwam-matrix .hwam-matrix__feature {
    width: 55%;
    text-align: left;
}

.hwam .hwam-matrix .hwam-matrix__feature {
    color: var(--hwam-text);
    font-weight: 500;
}

.hwam-matrix__note {
    display: block;
    margin-top: 2px;
    color: var(--hwam-muted);
    font-size: 13px;
    font-weight: 400;
}

.hwam-matrix__mark {
    display: inline-block;
    min-width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 15px;
    font-weight: 700;
    line-height: 26px;
}

.hwam-matrix__cell--yes .hwam-matrix__mark {
    background: var(--hwam-badge-fresh-bg);
    color: var(--hwam-fresh);
}

.hwam-matrix__cell--no .hwam-matrix__mark {
    background: var(--hwam-soft);
    color: var(--hwam-meta);
}

.hwam-matrix__cell--partial .hwam-matrix__mark {
    background: var(--hwam-badge-preview-bg);
    color: var(--hwam-preview);
}

.hwam-matrix__cell--none .hwam-matrix__mark {
    color: var(--hwam-meta);
}

.hwam-matrix__cell--text {
    color: var(--hwam-text);
    font-size: 14px;
}

.hwam .hwam-matrix tbody tr:nth-child(even) th,
.hwam .hwam-matrix tbody tr:nth-child(even) td {
    background: var(--hwam-soft);
}

/* ------------------------------------------------------------ Galerie */

.hwam-gallery {
    display: grid;
    grid-template-columns: repeat(var(--hwam-gallery-cols, 3), minmax(0, 1fr));
    gap: 20px;
    margin: 0;
}

.hwam-gallery--cols-1 { --hwam-gallery-cols: 1; }
.hwam-gallery--cols-2 { --hwam-gallery-cols: 2; }
.hwam-gallery--cols-3 { --hwam-gallery-cols: 3; }
.hwam-gallery--cols-4 { --hwam-gallery-cols: 4; }

.hwam .hwam-gallery__item {
    margin: 0;
}

.hwam .hwam-gallery__link {
    display: block;
    border-radius: var(--hwam-radius);
    background: var(--hwam-soft);
    box-shadow: var(--hwam-shadow);
    overflow: hidden;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.hwam .hwam-gallery__link:hover,
.hwam .hwam-gallery__link:focus-visible {
    box-shadow: var(--hwam-shadow-hover);
    transform: translateY(-2px);
}

.hwam .hwam-gallery__link:focus-visible {
    outline: 2px solid var(--hwam-accent);
    outline-offset: 2px;
}

/* Das ganze Bild im 16:9-Rahmen, nichts abgeschnitten */
.hwam .hwam-gallery__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    object-fit: contain;
}

.hwam-gallery__caption {
    margin: 10px 2px 0;
    color: var(--hwam-muted);
    font-size: 13px;
    line-height: 1.5;
}

/* Lightbox: ein Bild in voller Groesse ueber der Seite, mit Blaettern */
.hwam-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 56px 72px;
    background: rgba(20, 22, 26, 0.92);
    box-sizing: border-box;
}

.hwam-lightbox[hidden] {
    display: none;
}

.hwam-lightbox__figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
}

.hwam-lightbox__image {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 150px);
    border-radius: 3px;
    background: #fff;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.hwam-lightbox__caption {
    margin: 14px 0 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
}

.hwam-lightbox__counter {
    margin: 4px 0 0;
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.hwam-lightbox .hwam-lightbox__button {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.hwam-lightbox .hwam-lightbox__button:hover,
.hwam-lightbox .hwam-lightbox__button:focus-visible {
    background: rgba(255, 255, 255, 0.18);
    outline: none;
}

.hwam-lightbox .hwam-lightbox__button:focus-visible {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4);
}

.hwam-lightbox .hwam-lightbox__close { top: 16px; right: 16px; }
.hwam-lightbox .hwam-lightbox__prev { left: 16px; top: 50%; transform: translateY(-50%); }
.hwam-lightbox .hwam-lightbox__next { right: 16px; top: 50%; transform: translateY(-50%); }

.hwam-lightbox--single .hwam-lightbox__prev,
.hwam-lightbox--single .hwam-lightbox__next,
.hwam-lightbox--single .hwam-lightbox__counter {
    display: none;
}

body.hwam-lightbox-open {
    overflow: hidden;
}

/* ----------------------------------------------------- Abhaengigkeiten */

.hwam-deps__intro {
    margin: 0 0 16px;
}

.hwam .hwam-deps {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hwam .hwam-deps__item {
    display: flex;
    gap: 14px;
    align-items: center;
    margin: 0;
    padding: 12px 16px;
    border: 1px solid var(--hwam-line);
    border-radius: var(--hwam-radius);
    background: var(--hwam-surface);
}

.hwam .hwam-deps__icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    margin: 0;
    border-radius: 8px;
    box-shadow: none;
    object-fit: contain;
}

.hwam-deps__icon--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--hwam-accent), var(--hwam-accent-2));
    color: #fff;
    font-family: var(--hwam-font-heading);
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
}

.hwam-deps__text {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    align-items: baseline;
    min-width: 0;
}

.hwam-deps__name {
    font-family: var(--hwam-font-heading);
    font-size: 16px;
    font-weight: 600;
}

.hwam .hwam-deps__slug {
    padding: 1px 6px;
    border-radius: 3px;
    background: var(--hwam-soft);
    color: var(--hwam-muted);
    font-size: 12px;
}

.hwam-deps__note {
    flex-basis: 100%;
    color: var(--hwam-muted);
    font-size: 13px;
}

/* Kurzer Hinweis "Benoetigt ..." auf Karte und Zeile */
.hwam-card__meta-item--deps,
.hwam-row__deps {
    color: var(--hwam-muted);
}

.hwam-row__deps {
    margin-left: 10px;
}

.hwam-card__deps-mark {
    color: var(--hwam-accent);
    font-weight: 700;
}

/* --------------------------------------------------------------- News */

/* Die News untereinander: links das Bild mit dem Datum darunter, rechts
   Ueberschrift und der ganze Text. Kein Autor, keine Einzelseite. Karten
   (Standard) oder schlicht mit Trennlinien; Bild links, rechts oder
   abwechselnd. */
.hwam-news {
    --hwam-news-image: 280px;
    --hwam-news-ratio: 4 / 3;
    --hwam-news-gap: 30px;
    display: grid;
    gap: var(--hwam-gap);
}

.hwam-news__item {
    display: grid;
    grid-template-columns: var(--hwam-news-image) minmax(0, 1fr);
    gap: var(--hwam-news-gap);
    align-items: start;
}

.hwam-news__item--no-image {
    grid-template-columns: minmax(0, 1fr);
}

.hwam-news--cards .hwam-news__item {
    padding: 26px 30px 28px;
    border-radius: var(--hwam-radius);
    background: var(--hwam-surface);
    box-shadow: var(--hwam-shadow);
}

.hwam-news--plain {
    gap: 0;
}

.hwam-news--plain .hwam-news__item {
    padding: var(--hwam-gap) 0;
    border-bottom: 1px solid var(--hwam-line);
}

.hwam-news--plain .hwam-news__item:first-child {
    padding-top: 0;
}

.hwam-news--plain .hwam-news__item:last-of-type {
    border-bottom: 0;
}

/* Bild rechts: die Spalten tauschen, die Seite wandert nach hinten */
.hwam-news--image-right .hwam-news__item:not(.hwam-news__item--no-image),
.hwam-news--image-alternate .hwam-news__item--even:not(.hwam-news__item--no-image) {
    grid-template-columns: minmax(0, 1fr) var(--hwam-news-image);
}

.hwam-news--image-right .hwam-news__aside,
.hwam-news--image-alternate .hwam-news__item--even .hwam-news__aside {
    order: 2;
}

.hwam-news__aside {
    min-width: 0;
}

.hwam .hwam-news__media {
    display: block;
    border-radius: var(--hwam-radius);
    background: var(--hwam-soft);
    overflow: hidden;
}

.hwam-news--plain .hwam-news__media {
    box-shadow: var(--hwam-shadow);
}

/* Ein verlinktes Bild hebt sich beim Ueberfahren leicht, wie die Karten */
.hwam a.hwam-news__media {
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.hwam a.hwam-news__media:hover,
.hwam a.hwam-news__media:focus-visible {
    box-shadow: var(--hwam-shadow-hover);
    transform: translateY(-2px);
}

.hwam a.hwam-news__media:focus-visible {
    outline: 2px solid var(--hwam-accent);
    outline-offset: 2px;
}

.hwam .hwam-news__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: var(--hwam-news-ratio);
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    object-fit: cover;
}

.hwam--fit-contain .hwam-news__image {
    object-fit: contain;
}

/* Das Datum unter dem Bild – klein, in Versalien, mittig */
.hwam-news__date {
    display: block;
    margin: 12px 0 0;
    color: var(--hwam-muted);
    font-family: var(--hwam-font-heading);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1.4;
    text-align: center;
    text-transform: uppercase;
}

.hwam-news__date--inline {
    margin: 0 0 8px;
    text-align: left;
}

.hwam-news__body {
    min-width: 0;
}

.hwam-news__title {
    margin: 0 0 12px;
    padding: 0;
    color: var(--hwam-heading);
    font-family: var(--hwam-font-heading);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
}

.hwam .hwam-news__title a {
    color: inherit;
    text-decoration: none;
}

.hwam .hwam-news__title a:hover,
.hwam .hwam-news__title a:focus {
    color: var(--hwam-accent);
    text-decoration: none;
}

.hwam-news__text {
    color: var(--hwam-text);
    font-size: 16px;
    line-height: 1.7;
}

.hwam-news__text > :last-child {
    margin-bottom: 0;
}

/* Seitenverweise: Zahlen als Pillen wie der Filter der Uebersicht */
.hwam-news__pagination {
    margin-top: 8px;
}

.hwam .hwam-news__pagination ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hwam .hwam-news__pagination li {
    margin: 0;
}

.hwam .hwam-news__pagination .page-numbers {
    display: inline-block;
    min-width: 40px;
    padding: 9px 14px;
    border: 1px solid var(--hwam-accent);
    border-radius: 999px;
    color: var(--hwam-accent);
    font-family: var(--hwam-font-heading);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}

.hwam .hwam-news__pagination .page-numbers.current {
    background: var(--hwam-accent);
    color: var(--hwam-button-text);
}

.hwam .hwam-news__pagination .page-numbers.dots {
    border-color: transparent;
    color: var(--hwam-muted);
}

.hwam .hwam-news__pagination a.page-numbers:hover,
.hwam .hwam-news__pagination a.page-numbers:focus {
    background: rgba(97, 143, 206, 0.1);
    text-decoration: none;
}

/* ------------------------------------------------------------ Schmal */

@media (max-width: 900px) {
    .hwam-layout--sidebar {
        grid-template-columns: minmax(0, 1fr);
    }

    .hwam-facts {
        position: static;
    }
}

@media (max-width: 900px) {
    .hwam--spotlight {
        grid-template-columns: minmax(0, 1fr);
        padding: 26px 24px;
    }

    .hwam--spotlight-right .hwam-spotlight__media {
        order: 0;
    }
}

@media (max-width: 640px) {
    .hwam-hero {
        flex-direction: column;
        gap: 20px;
        padding: 26px 24px;
    }

    .hwam-row {
        flex-wrap: wrap;
        padding: 18px 20px;
    }

    .hwam-row__actions {
        flex-direction: row;
        flex-basis: 100%;
        align-items: center;
    }

    .hwam-spotlight__title {
        font-size: 24px;
    }

    .hwam-hero__title {
        font-size: 28px;
    }

    .hwam-card__body {
        padding: 20px 22px 22px;
    }

    .hwam-card__meta {
        padding: 12px 22px;
    }

    .hwam .hwam-tabs .hwam-tabs__tab {
        padding: 12px 12px 10px;
        font-size: 12px;
    }

    .hwam-gallery--cols-3,
    .hwam-gallery--cols-4 {
        --hwam-gallery-cols: 2;
    }

    /* News: Bild ueber dem Text, das Datum linksbuendig */
    .hwam-news__item,
    .hwam-news--image-right .hwam-news__item:not(.hwam-news__item--no-image),
    .hwam-news--image-alternate .hwam-news__item--even:not(.hwam-news__item--no-image) {
        grid-template-columns: minmax(0, 1fr);
    }

    .hwam-news--image-right .hwam-news__aside,
    .hwam-news--image-alternate .hwam-news__item--even .hwam-news__aside {
        order: 0;
    }

    .hwam-news__date {
        text-align: left;
    }

    .hwam-news--cards .hwam-news__item {
        padding: 20px 22px 22px;
    }

    .hwam-news__title {
        font-size: 21px;
    }

    .hwam-lightbox {
        padding: 64px 16px 24px;
    }

    .hwam-lightbox .hwam-lightbox__prev { left: 8px; }
    .hwam-lightbox .hwam-lightbox__next { right: 8px; }
}

@media (max-width: 480px) {
    .hwam-gallery {
        --hwam-gallery-cols: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hwam-accordion__mark::before,
    .hwam-accordion__mark::after,
    .hwam .hwam-gallery__link,
    .hwam a.hwam-news__media,
    .hwam-card,
    .hwam-card__image,
    .hwam .hwam-button,
    .hwam .hwam-filter .hwam-filter__button,
    .hwam .hwam-tabs .hwam-tabs__tab {
        transition: none;
    }

    .hwam-card:hover,
    .hwam-card:focus-within {
        transform: none;
    }

    .hwam-card:hover .hwam-card__image {
        transform: none;
    }
}