/* =========================================================================
   Gemeinsame Blockarten

   Die Blockarten unter resources/views/themes/base/partials/blocks/ gelten
   fuer JEDES Theme — nur das Basis-Theme definiert diesen Ordner, alle
   anderen erben ihn. Ihre Gestaltung stand bisher aber ausschliesslich in
   site.css, und die laden nordlicht, pixelprompt und webvanta nicht: die
   drei bringen ein eigenstaendiges Stylesheet mit.

   Folge war, dass auf diesen drei Webseiten Buehne, Symbolkacheln, Team,
   Veranstaltungen, Meldungen, Kennzahlen, Handlungsaufruf, Preistabelle,
   Referenzkarten und Verweisliste ohne jede Gestaltung ankamen — eine
   Preistabelle fiel dort zu einer nackten Aufzaehlung zusammen.

   Diese Datei ist der gemeinsame Nenner. Sie wird von den drei
   eigenstaendigen Themes zusaetzlich geladen; base und die aufsetzenden
   Themes (kanzlei, lillys, uni, vitalis) bekommen dieselben Regeln
   weiterhin aus site.css.

   ## Warum jede Regel mit .content-card__body ODER .uni-band__body beginnt

   Weil dieselben Klassennamen auch im theme-eigenen Markup vorkommen.
   nordlichts Startseite baut sich ihr Kennzahlenband aus .stat, .stat__value
   und .stat__label, ihr Vorteilsblock aus .check-list — alles ausserhalb
   eines Inhaltsblocks und mit eigener Gestaltung im Theme.

   Ohne die Einschraenkung sickerten daraus einzelne Eigenschaften durch.
   Nicht die ganze Regel: bei gleicher Spezifitaet gewinnt das spaeter
   geladene Theme. Aber jede Eigenschaft, die das Theme NICHT selbst setzt,
   kam hier durch. Gemessen waren das auf nordlichts Startseite: die
   Kennzahlen verloren ihr Weiss (das Theme erbt die Farbe, statt sie zu
   setzen), das Band sprang ins Flex-Layout, und der Haken der Checkliste
   verdrehte den Kreis-Marker des Themes um 45 Grad.

   Die geteilten Blockeinschuebe rendern innerhalb von .content-card__body
   — siehe seite.blade.php und posts/beitrag.blade.php — mit EINER
   Ausnahme: uni rendert dieselben Einschuebe ueber eine eigene
   Zwischenschicht, partials/block-list.blade.php, im Container
   .uni-band__body (Baender statt Karten, siehe deren Kopfkommentar). Beide
   Container muessen deshalb jede Regel tragen; ein Theme-eigenes
   Markup-Element bekommt trotzdem nur die Regel, deren Container es
   tatsaechlich verwendet — .uni-band__body existiert nirgends ausserhalb
   von uni.

   uni bekam blocks.css NICHT einfach zusaetzlich als weiteren
   Klassennamen auf dem bestehenden Container: .content-card__body traegt
   in site.css eigene padding- und max-width-Regeln fuer die Kartenform,
   die auf uni's volle-Breite-Baendern falsch gewesen waeren.

   Gegenprobe nach der Aenderung: auf allen bestehenden Seiten von
   nordlicht, pixelprompt und webvanta trifft keine einzige Regel aus dieser
   Datei mehr ein Element.

   ## Warum die Regeln doppelt stehen

   Die Abschnitte liegen in site.css ueber zehn nicht zusammenhaengende
   Stellen verteilt und sind dort mit Fliesstext- und Layoutregeln
   verzahnt. Sie herauszuoperieren haette site.css angefasst — die Datei,
   die fuenf laufende Webseiten ausliefert. Der Inhalt hier ist deshalb
   eine Kopie, erzeugt aus denselben Regeln, damit eine Blockart auf jedem
   Theme gleich aussieht.

   Der naechste Schritt loest die Dopplung auf: die Abschnitte fallen aus
   site.css heraus, und diese Datei wird von allen Themes geladen. Bis
   dahin gilt: wer eine Blockart aendert, aendert sie an beiden Stellen.

   ## Farben und Abstaende

   Alles ueber Tokens, mit Rueckfallwert. nordlicht und pixelprompt kennen
   --color-bg-muted nicht, webvanta zusaetzlich --text-sm, --shadow-md,
   --color-primary-contrast, --color-text-muted, --font-heading und
   --color-accent. Die letzten beiden Luecken sind kein Zufall: webvanta.css
   benennt dieselben Begriffe --color-text-secondary und --font-display, und
   nordlicht kennt gar keine zweite Farbe neben --color-primary. Der
   Rueckfall probiert zuerst den eigenen Namen des Themes, erst danach einen
   generischen Wert. Alles ueber :root am Kopf dieser Datei bzw. direkt an
   der Regel, damit kein Theme-Stylesheet dafuer angefasst werden muss.

   Bekannt und ABSICHTLICH nicht behoben: --space-5 ist in ganz site.css nie
   definiert (11 Fundstellen, auch auf der Livedomain), betrifft also base
   und alle aufsetzenden Themes gleichermassen und ist keine neue Luecke
   dieses Schritts. Es hier zu reparieren wuerde eine sichtbare Aenderung
   auf fuenf laufenden Webseiten auslösen, ungeprüft und ungefragt — das
   gehoert in einen eigenen, bewusst gewaehlten Schritt.
   ========================================================================= */

/* ---- Vorgaben fuer Tokens, die nicht jedes Theme kennt ------------------

   Diese Datei laedt VOR dem Stylesheet des Themes. Definiert ein Theme
   eines dieser Tokens selbst, gewinnt es — die Werte hier greifen nur,
   wo bisher gar nichts stand.

   Es fehlen: --color-bg-muted (nordlicht, pixelprompt, webvanta),
   --text-sm, --shadow-md und --color-primary-contrast (webvanta).

   --color-bg-muted wird aus der Palette des Themes GEMISCHT statt fest
   gesetzt. Ein fester Wert waere im Dunkelmodus falsch: in site.css ist
   der Token hell #f5f6f8 und dunkel #111827. Ueber color-mix ergibt sich
   die gedaempfte Flaeche aus Schrift- und Hintergrundfarbe des jeweiligen
   Themes und stimmt damit in beiden Modi und in jeder Kundenfarbe, ohne
   dass hier eine Liste von Sonderfaellen mitlaeuft. */

:root {
    --color-bg-muted: color-mix(in srgb, var(--color-text) 6%, var(--color-bg));
    --text-sm: 0.875rem;
    --shadow-md: 0 12px 32px rgba(16, 24, 40, 0.1);
    --color-primary-contrast: #ffffff;

    /* webvanta.css benennt beide Begriffe anders: --color-text-secondary
       statt --color-text-muted, --font-display statt --font-heading. Der
       Rueckfall greift zuerst auf webvantas eigenen Namen, erst danach auf
       einen generischen Wert — sonst zeigte jede gedaempfte Schrift auf
       webvanta.de die normale Textfarbe, weil die Variable dort schlicht nie
       definiert war (webvanta.de hat vor diesem Schritt nie einen der
       gemeinsamen Bloecke gerendert). */
    --color-text-muted: var(--color-text-secondary, #6b7280);
    --font-heading: var(--font-display, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
}

:root[data-theme="dark"] {
    --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.45);
}

/* ---- Blockarten im Beitrag ------------------------------------------------

   Text mit Bild, Merkmale, Oeffnungszeiten, Galerie, Akkordeon. Jede Art hat
   ihr eigenes Partial unter themes/base/partials/blocks/ — das Markup ist fuer
   beide Themes dasselbe, das Aussehen nicht.
   --------------------------------------------------------------------------- */

/* Text mit Bild */

.content-card__body .block-media,
.uni-band__body .block-media {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
}

@media (min-width: 48rem) {
    .content-card__body .block-media,
    .uni-band__body .block-media {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        gap: var(--space-8);
    }

    /* Nur die Spaltenfolge tauschen, nicht die Reihenfolge im Markup: der
       Text bleibt fuer Vorleseprogramme und ohne CSS immer zuerst. */
    .content-card__body .block-media--reverse .block-media__text,
    .uni-band__body .block-media--reverse .block-media__text {
        order: 2;
    }

    .content-card__body .block-media--reverse .block-media__image,
    .uni-band__body .block-media--reverse .block-media__image {
        order: 1;
    }
}

.content-card__body .block-media__text > :first-child,
.uni-band__body .block-media__text > :first-child {
    margin-top: 0;
}

.content-card__body .block-media__text > :last-child,
.uni-band__body .block-media__text > :last-child {
    margin-bottom: 0;
}

.content-card__body .block-media__image,
.uni-band__body .block-media__image {
    margin: 0;
}

.content-card__body .block-media__image img,
.uni-band__body .block-media__image img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
}

/* Bild ueber oder unter dem Text (Bildposition "above"/"below" in
   ContentBlocks): einspaltig, damit das Bild die volle Breite bekommt.

   .block-media--stacked traf das Wurzelmuster dieser Datei nicht (der
   Bindestrich nach "media" bricht den Wortgrenzentest, ebenso wie bei
   .stat-row) und fehlte deshalb zunaechst hier. Von Hand nachgetragen. */

.content-card__body .block-media--stacked,
.uni-band__body .block-media--stacked {
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 48rem) {
    .content-card__body .block-media--stacked,
    .uni-band__body .block-media--stacked {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Merkmale */

.content-card__body .feature-boxes,
.uni-band__body .feature-boxes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: var(--space-4);
    margin: 0;
}

.content-card__body .feature-box,
.uni-band__body .feature-box {
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-muted);
}

.content-card__body .feature-box__label,
.uni-band__body .feature-box__label {
    margin: 0 0 var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.content-card__body .feature-box__value,
.uni-band__body .feature-box__value {
    margin: 0;
    color: var(--color-text);
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 700;
    line-height: 1.3;
}

/* Oeffnungszeiten */

.content-card__body .hours,
.uni-band__body .hours {
    display: table;
    width: 100%;
    margin: 0;
    border-collapse: collapse;
}

.content-card__body .hours th,
.uni-band__body .hours th,
.content-card__body .hours td,
.uni-band__body .hours td {
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: baseline;
}

.content-card__body .hours th,
.uni-band__body .hours th {
    color: var(--color-text-muted);
    font-weight: 400;
}

.content-card__body .hours td,
.uni-band__body .hours td {
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.content-card__body .hours tr:last-child th,
.uni-band__body .hours tr:last-child th,
.content-card__body .hours tr:last-child td,
.uni-band__body .hours tr:last-child td {
    border-bottom: 0;
}

/* Galerie */

.content-card__body .gallery,
.uni-band__body .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.content-card__body .gallery__item,
.uni-band__body .gallery__item {
    margin: 0;
    padding: 0;
}

.content-card__body .gallery__item::before,
.uni-band__body .gallery__item::before {
    display: none;
}

.content-card__body .gallery__item img,
.uni-band__body .gallery__item img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

/* Akkordeon — dieselben Aufklapper wie bei den haeufigen Fragen einer
   Inhaltsseite, damit ein Besucher sie nicht zweimal lernen muss. */

.content-card__body .accordion .faq-item,
.uni-band__body .accordion .faq-item {
    border-bottom: 1px solid var(--color-border);
}

.content-card__body .accordion .faq-item:first-child,
.uni-band__body .accordion .faq-item:first-child {
    border-top: 1px solid var(--color-border);
}

.content-card__body .accordion .faq-item summary,
.uni-band__body .accordion .faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) 0;
    color: var(--color-text);
    font-family: var(--font-heading);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.content-card__body .accordion .faq-item summary::-webkit-details-marker,
.uni-band__body .accordion .faq-item summary::-webkit-details-marker {
    display: none;
}

.content-card__body .accordion .faq-item summary::after,
.uni-band__body .accordion .faq-item summary::after {
    content: "+";
    flex: 0 0 auto;
    color: var(--color-primary);
    font-size: var(--text-xl);
    line-height: 1;
    transition: transform 200ms ease;
}

.content-card__body .accordion .faq-item[open] summary::after,
.uni-band__body .accordion .faq-item[open] summary::after {
    transform: rotate(45deg);
}

.content-card__body .accordion .faq-item summary:focus-visible,
.uni-band__body .accordion .faq-item summary:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.content-card__body .accordion .faq-item > p,
.uni-band__body .accordion .faq-item > p {
    margin: 0 0 var(--space-4);
    color: var(--color-text-muted);
}

/* Die Blockarten stehen im Fliesstext-Container und duerfen dessen
   Listenpunkte nicht erben. */

.content-card__body .feature-boxes li,
.uni-band__body .feature-boxes li,
.content-card__body .gallery li,
.uni-band__body .gallery li {
    margin: 0;
    padding-left: 0;
}

.content-card__body .feature-boxes li::before,
.uni-band__body .feature-boxes li::before,
.content-card__body .gallery li::before,
.uni-band__body .gallery li::before {
    content: none;
}

/* ---- Block «Symbolkacheln» -------------------------------------------------

   Ein Raster aus Kacheln mit Zeichen statt Foto. Die Spaltenzahl bestimmt der
   Platz und nicht eine feste Zahl: bei acht Fachgebieten stehen auf dem
   Schreibtisch vier nebeneinander, auf dem Telefon eines.
   --------------------------------------------------------------------------- */

.content-card__body .icon-grid,
.uni-band__body .icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: var(--space-6);
    margin: 0;
    padding: 0;
    list-style: none;
}

.content-card__body .icon-grid__item,
.uni-band__body .icon-grid__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 0;
    text-align: center;
}

.content-card__body .icon-grid__item::before,
.uni-band__body .icon-grid__item::before {
    content: none;
}

/* Der Kreis um das Zeichen. Rand statt Fuellung: eine farbige Scheibe
   erschlaegt bei acht Kacheln nebeneinander alles andere auf der Seite. */
.content-card__body .icon-grid__badge,
.uni-band__body .icon-grid__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 5.5rem;
    height: 5.5rem;
    margin-bottom: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    color: var(--color-primary);
    background: var(--color-bg);
}

.content-card__body .icon-grid__icon,
.uni-band__body .icon-grid__icon {
    width: 2.25rem;
    height: 2.25rem;
}

.content-card__body .icon-grid__title,
.uni-band__body .icon-grid__title {
    margin: 0 0 var(--space-3);
    color: var(--color-text);
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.content-card__body .icon-grid__link,
.uni-band__body .icon-grid__link {
    color: inherit;
    text-decoration: none;
}

.content-card__body .icon-grid__link:hover,
.uni-band__body .icon-grid__link:hover {
    color: var(--color-primary);
}

/* Der kurze Strich unter der Ueberschrift — er trennt Titel und Stichpunkte
   ohne eine zweite Linie ueber die ganze Kachelbreite. */
.content-card__body .icon-grid__title::after,
.uni-band__body .icon-grid__title::after {
    content: "";
    display: block;
    width: 3rem;
    height: 2px;
    margin: var(--space-3) auto 0;
    background: var(--color-primary);
}

.content-card__body .icon-grid__text,
.uni-band__body .icon-grid__text {
    margin: 0 0 var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.content-card__body .icon-grid__list,
.uni-band__body .icon-grid__list {
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.9;
}

.content-card__body .icon-grid__list li,
.uni-band__body .icon-grid__list li {
    margin: 0;
    padding: 0;
}

.content-card__body .icon-grid__list li::before,
.uni-band__body .icon-grid__list li::before {
    content: "✓";
    margin-right: 0.4em;
    color: var(--color-primary);
}

/* ---- Block «Team» ----------------------------------------------------------

   Portraet, Name, Rolle, Schwerpunkte. Das Bild sitzt im Hochformat und wird
   beschnitten statt verzerrt — Portraets kommen selten im selben Format.
   --------------------------------------------------------------------------- */

.content-card__body .team-grid,
.uni-band__body .team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--space-6);
    margin: 0;
    padding: 0;
    list-style: none;
}

.content-card__body .team-card,
.uni-band__body .team-card {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-muted);
    overflow: hidden;
}

.content-card__body .team-card::before,
.uni-band__body .team-card::before {
    content: none;
}

.content-card__body .team-card__image,
.uni-band__body .team-card__image {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

.content-card__body .team-card__body,
.uni-band__body .team-card__body {
    padding: var(--space-5);
    text-align: center;
}

.content-card__body .team-card__name,
.uni-band__body .team-card__name {
    margin: 0 0 var(--space-2);
    color: var(--color-text);
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.content-card__body .team-card__role,
.uni-band__body .team-card__role {
    margin: 0 0 var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 2px solid var(--color-primary);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.content-card__body .team-card__text,
.uni-band__body .team-card__text {
    margin: 0 0 var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    text-align: left;
}

.content-card__body .team-card__list,
.uni-band__body .team-card__list {
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.8;
    text-align: left;
}

.content-card__body .team-card__list li,
.uni-band__body .team-card__list li {
    margin: 0;
    padding-left: 1.1em;
    position: relative;
}

.content-card__body .team-card__list li::before,
.uni-band__body .team-card__list li::before {
    content: "";
    position: absolute;
    top: 0.75em;
    left: 0;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-primary);
}

.content-card__body .team-card__contact,
.uni-band__body .team-card__contact {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: var(--space-4) 0 0;
    font-size: var(--text-sm);
}

/* ---- Block «Handlungsaufruf» -----------------------------------------------

   Das abgesetzte Band am Ende einer Seite. Es steht bewusst ohne Rahmen und
   nur auf gedaempftem Grund: ein farbiger Kasten mitten im Text wirkt wie
   Werbung, ein ruhiger Absatz wie ein Angebot.
   --------------------------------------------------------------------------- */

.content-card__body .cta-band,
.uni-band__body .cta-band {
    padding: var(--space-8) var(--space-6);
    border-radius: var(--radius-md);
    background: var(--color-bg-muted);
    text-align: center;
}

.content-card__body .cta-band__text > :first-child,
.uni-band__body .cta-band__text > :first-child {
    margin-top: 0;
}

.content-card__body .cta-band__text > :last-child,
.uni-band__body .cta-band__text > :last-child {
    margin-bottom: 0;
}

.content-card__body .cta-band__actions,
.uni-band__body .cta-band__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    margin: var(--space-6) 0 0;
}

/* Auch diese Blockarten stehen im Fliesstext-Container und duerfen dessen
   Listenpunkte nicht erben. */

.content-card__body .icon-grid li,
.uni-band__body .icon-grid li,
.content-card__body .team-grid li,
.uni-band__body .team-grid li,
.content-card__body .icon-grid__list li,
.uni-band__body .icon-grid__list li,
.content-card__body .team-card__list li,
.uni-band__body .team-card__list li {
    margin: 0;
}

.content-card__body .icon-grid > li::before,
.uni-band__body .icon-grid > li::before,
.content-card__body .team-grid > li::before,
.uni-band__body .team-grid > li::before {
    content: none;
}

/* Die Ueberschrift einer Kachel ist keine Zwischenueberschrift des
   Fliesstextes: sie steht in der Textfarbe und ohne dessen Abstand nach
   oben. */
.content-card__body .icon-grid__title,
.uni-band__body .icon-grid__title,
.content-card__body .team-card__name,
.uni-band__body .team-card__name {
    margin-top: 0;
    color: var(--color-text);
}

/* Der Verweis auf der Kacheluebersicht traegt die Farbe der Ueberschrift und
   nicht die der Textverweise — sonst leuchtet in einem Raster aus acht
   Kacheln jede Ueberschrift als Link. */
.content-card__body .icon-grid__link,
.uni-band__body .icon-grid__link {
    color: inherit;
}

.content-card__body .icon-grid__link:hover,
.uni-band__body .icon-grid__link:hover {
    color: var(--color-primary);
}

.content-card__body .icon-grid__list,
.uni-band__body .icon-grid__list,
.content-card__body .team-card__list,
.uni-band__body .team-card__list {
    padding-left: 0;
}

.content-card__body .icon-grid__list li,
.uni-band__body .icon-grid__list li {
    padding-left: 0;
}

.content-card__body .icon-grid__list li::before,
.uni-band__body .icon-grid__list li::before {
    content: "\2713";
    position: static;
    width: auto;
    height: auto;
    margin-right: 0.4em;
    border-radius: 0;
    background: none;
    color: var(--color-primary);
}

.content-card__body .team-card__list li,
.uni-band__body .team-card__list li {
    padding-left: 1.1em;
}

.content-card__body .team-card__list li::before,
.uni-band__body .team-card__list li::before {
    content: "";
    position: absolute;
    top: 0.75em;
    left: 0;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-primary);
}

/* Der Abschluss einer Seite. Eine Aufforderung, nicht drei nebeneinander —
   wer die Wahl hat, entscheidet sich haeufiger fuer nichts. */
.content-card__body .cta-panel,
.uni-band__body .cta-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);

    padding: var(--space-8);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-muted);
}

@media (min-width: 48rem) {
    .content-card__body .cta-panel,
    .uni-band__body .cta-panel {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-8);
        padding: var(--space-8) var(--space-12);
    }
}

.content-card__body .cta-panel__text,
.uni-band__body .cta-panel__text {
    max-width: 40rem;
}

.content-card__body .cta-panel__text > :first-child,
.uni-band__body .cta-panel__text > :first-child {
    margin-top: 0;
}

.content-card__body .cta-panel__text > :last-child,
.uni-band__body .cta-panel__text > :last-child {
    margin-bottom: 0;
}

.content-card__body .block-media--above .block-media__image,
.uni-band__body .block-media--above .block-media__image {
    order: -1;
}

.content-card__body .block-media__caption,
.uni-band__body .block-media__caption,
.content-card__body .block-image__caption,
.uni-band__body .block-image__caption {
    margin-top: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.5;
}

/* Reiner Bildblock */

.content-card__body .block-image,
.uni-band__body .block-image {
    margin: 0;
}

.content-card__body .block-image img,
.uni-band__body .block-image img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
}

/* Breiter als der Text: die Lesebreite gilt fuer Fliesstext, nicht fuer ein
   Bild. Der negative Aussenabstand bleibt innerhalb des Containers, weil er
   nur die Differenz zur Lesebreite ausgleicht.

   .block-image--wide und .block-image--full trafen das Wurzelmuster dieser
   Datei nicht (derselbe Bindestrich-Grund wie bei .block-media--stacked)
   und fehlten deshalb zunaechst hier. Von Hand nachgetragen. */

@media (min-width: 64rem) {
    .content-card__body .block-image--wide,
    .uni-band__body .block-image--wide {
        margin-inline: calc(var(--space-8) * -1);
    }

    .content-card__body .block-image--full,
    .uni-band__body .block-image--full {
        margin-inline: calc(var(--space-16) * -1);
    }
}

/* Kartenraster des Blocksystems */

.content-card__body .card-grid,
.uni-band__body .card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: var(--space-6);
    margin: 0;
    padding: 0;
    list-style: none;
}

.content-card__body .card-grid__item,
.uni-band__body .card-grid__item {
    position: relative;
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
}

.content-card__body .card-grid__image,
.uni-band__body .card-grid__image {
    width: 100%;
    height: auto;
    margin-bottom: var(--space-4);
    border-radius: var(--radius-sm);
}

.content-card__body .card-grid__title,
.uni-band__body .card-grid__title {
    margin: 0 0 var(--space-2);
    font-size: var(--text-lg);
    line-height: 1.35;
}

.content-card__body .card-grid__link,
.uni-band__body .card-grid__link {
    color: inherit;
    text-decoration: none;
}

.content-card__body .card-grid__link::after,
.uni-band__body .card-grid__link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.content-card__body .card-grid__text,
.uni-band__body .card-grid__text {
    margin: 0;
    color: var(--color-text-muted);
    line-height: 1.6;
}

.content-card__body .card-grid__more,
.uni-band__body .card-grid__more {
    margin: var(--space-3) 0 0;
    color: var(--color-primary);
    font-size: var(--text-sm);
    font-weight: 600;
}

/* ---- Block «Bühne» ---------------------------------------------------------

   Farbige Flaeche, Bild auf der einen Haelfte, Text auf der anderen. Die
   Ueberschrift steht innerhalb der Flaeche — deshalb gibt der Einschub sie
   selbst aus und nicht das Template.

   Das Bild fuellt seine Haelfte randlos: object-fit statt fester Hoehe, damit
   ein hochkantes und ein querformatiges Foto dieselbe Kachel ergeben.
   --------------------------------------------------------------------------- */

.content-card__body .showcase,
.uni-band__body .showcase {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    border-radius: var(--radius-md);
    overflow: hidden;
}

/* Die vier Farbtoene der Buehne (Feld "showcase_tone").

   Trafen das Wurzelmuster dieser Datei nicht (derselbe Bindestrich-Grund
   wie bei .stat-row) und fehlten deshalb zunaechst hier — auf den drei
   eigenstaendigen Themes blieb die Buehne unabhaengig von der gewaehlten
   Farbe immer transparent. Von Hand nachgetragen.

   --color-accent ist zusaetzlich ein Token, das nordlicht gar nicht kennt
   (die Palette dort hat nur primary und primary-dark, keine zweite Farbe).
   Undefiniert waere background auf "transparent" gefallen — derselbe Fehler
   wie bei den vier Tokens oben im Dateikopf, nur fuer ein einzelnes Theme
   statt fuer alle drei. Rueckfall auf --color-primary: eine "Akzent"-Flaeche
   ohne eigene Akzentfarbe zeigt die Hauptfarbe, statt gar keine zu zeigen. */

.content-card__body .showcase--soft,
.uni-band__body .showcase--soft {
    background: var(--color-bg-muted);
    color: var(--color-text);
}

.content-card__body .showcase--primary,
.uni-band__body .showcase--primary {
    background: var(--color-primary);
    color: var(--color-primary-contrast);
}

.content-card__body .showcase--accent,
.uni-band__body .showcase--accent {
    background: var(--color-accent, var(--color-primary));
    color: #fff;
}

.content-card__body .showcase--plain,
.uni-band__body .showcase--plain {
    background: transparent;
    border-radius: 0;
}

.content-card__body .showcase__body,
.uni-band__body .showcase__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-8);
}

.content-card__body .showcase--plain .showcase__body,
.uni-band__body .showcase--plain .showcase__body {
    padding: 0;
}

.content-card__body .showcase__heading,
.uni-band__body .showcase__heading {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: 700;
    line-height: 1.2;
    text-wrap: balance;
    scroll-margin-top: 120px;
}

.content-card__body .showcase__text > :first-child,
.uni-band__body .showcase__text > :first-child {
    margin-top: 0;
}

.content-card__body .showcase__text > :last-child,
.uni-band__body .showcase__text > :last-child {
    margin-bottom: 0;
}

/* Die Schaltflaechen der Buehne sind absichtlich schlichter als .button: auf
   einer gefuellten Flaeche wuerde eine zweite gefuellte Flaeche verschwinden.
   Vier nebeneinander duerfen umbrechen, deshalb flex-wrap. */
.content-card__body .showcase__actions,
.uni-band__body .showcase__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin: var(--space-2) 0 0;
}

.content-card__body .showcase__action,
.uni-band__body .showcase__action {
    display: inline-block;
    padding: 0.7rem 1.1rem;
    border: 1px solid currentColor;
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
}

.content-card__body .showcase__action:hover,
.uni-band__body .showcase__action:hover,
.content-card__body .showcase__action:focus-visible,
.uni-band__body .showcase__action:focus-visible {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-primary-contrast);
}

.content-card__body .showcase__media,
.uni-band__body .showcase__media {
    position: relative;
    min-height: 14rem;
}

.content-card__body .showcase__media picture,
.uni-band__body .showcase__media picture {
    display: block;
    height: 100%;
}

.content-card__body .showcase__image,
.uni-band__body .showcase__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Der Bildnachweis liegt in der Ecke des Bildes und nicht darunter: darunter
   waere die Bildunterschrift, und die sagt etwas anderes. */
.content-card__body .showcase__credit,
.uni-band__body .showcase__credit {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 0.2rem 0.5rem;
    background: rgba(255, 255, 255, 0.85);
    color: #1a1d23;
    font-size: 0.75rem;
    line-height: 1.4;
}

.content-card__body .showcase__caption,
.uni-band__body .showcase__caption {
    margin: var(--space-2) 0 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

@media (min-width: 48rem) {
    .content-card__body .showcase:not(.showcase--textonly),
    .uni-band__body .showcase:not(.showcase--textonly) {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: stretch;
    }

    /* Nur die Spaltenfolge tauschen, nicht die Reihenfolge im Markup. */
    .content-card__body .showcase--image-left .showcase__body,
    .uni-band__body .showcase--image-left .showcase__body {
        order: 2;
    }

    .content-card__body .showcase--image-left .showcase__media,
    .uni-band__body .showcase--image-left .showcase__media {
        order: 1;
    }

    .content-card__body .showcase__body,
    .uni-band__body .showcase__body {
        padding: var(--space-12);
    }

    .content-card__body .showcase--plain .showcase__body,
    .uni-band__body .showcase--plain .showcase__body {
        padding-inline: 0;
    }
}

/* ---- Block «Kennzahlen» ----------------------------------------------------

   Die Zahl steht gross, die Beschriftung darunter. Im Markup steht das <dt>
   zuerst, weil ein Vorleseprogramm sonst eine Zahl ohne Bezug vorliest; nach
   oben geholt wird der Wert per order.

   .stat-row traf das Wurzelmuster dieser Datei nicht (der Bindestrich nach
   "stat" bricht den Wortgrenzentest) und fehlte deshalb zunaechst hier — auf
   den drei eigenstaendigen Themes stand die Kennzahl ohne ihr Rastergitter
   und fiel untereinander. Von Hand nachgetragen.
   --------------------------------------------------------------------------- */

.content-card__body .stat-row,
.uni-band__body .stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: var(--space-6);
    margin: 0;
    padding: 0;
}

.content-card__body .stat,
.uni-band__body .stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding-top: var(--space-3);
    border-top: 3px solid var(--color-primary);
}

.content-card__body .stat__value,
.uni-band__body .stat__value {
    order: -1;
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-primary);
}

.content-card__body .stat__label,
.uni-band__body .stat__label {
    margin: 0;
    font-weight: 600;
    line-height: 1.35;
}

.content-card__body .stat__note,
.uni-band__body .stat__note {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.4;
}

/* ---- Block «Veranstaltungen» -----------------------------------------------

   Kacheln mit Datumsplakette auf dem Bild. Das Datum ist die Angabe, nach der
   jemand die Liste ueberfliegt — deshalb liegt es vorn und nicht im Text.
   --------------------------------------------------------------------------- */

.content-card__body .event-grid,
.uni-band__body .event-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--space-6);
    margin: 0;
    padding: 0;
    list-style: none;
}

.content-card__body .event,
.uni-band__body .event {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.content-card__body .event__head,
.uni-band__body .event__head {
    position: relative;
}

.content-card__body .event__image,
.uni-band__body .event__image {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.content-card__body .event__date,
.uni-band__body .event__date {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0.4rem 0.7rem;
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: 1.4;
}

/* Auf dem Bild liegt die Plakette am unteren Rand, ohne Bild bildet sie den
   Kopf der Kachel. Ein Raster aus halb bebilderten Kacheln kippt sonst. */
.content-card__body .event__head:has(.event__image) .event__date,
.uni-band__body .event__head:has(.event__image) .event__date {
    position: absolute;
    left: 0;
    bottom: 0;
}

.content-card__body .event__time,
.uni-band__body .event__time {
    font-weight: 400;
}

.content-card__body .event__body,
.uni-band__body .event__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
}

.content-card__body .event__category,
.uni-band__body .event__category {
    margin: 0;
    color: var(--color-primary);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.content-card__body .event__title,
.uni-band__body .event__title {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: 700;
    line-height: 1.3;
}

.content-card__body .event__link,
.uni-band__body .event__link {
    color: inherit;
    text-decoration: none;
}

/* Die ganze Kachel wird klickbar, ohne dass das Markup zum Link-Sumpf wird. */
.content-card__body .event__link::after,
.uni-band__body .event__link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.content-card__body .event:has(.event__link),
.uni-band__body .event:has(.event__link) {
    position: relative;
}

.content-card__body .event__link:hover,
.uni-band__body .event__link:hover,
.content-card__body .event__link:focus-visible,
.uni-band__body .event__link:focus-visible {
    text-decoration: underline;
}

.content-card__body .event__text,
.uni-band__body .event__text {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-base);
    line-height: 1.6;
}

/* ---- Block «Meldungen» -----------------------------------------------------

   Beitragskacheln mit Datum und Rubrik ueber dem Titel. Bewusst ohne
   Anreisser: auf einer Startseite entscheidet die Zeile darueber, ob jemand
   klickt, und drei Zeilen Vorschau bringen niemanden weiter.
   --------------------------------------------------------------------------- */

.content-card__body .news-grid,
.uni-band__body .news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: var(--space-6);
    margin: 0;
    padding: 0;
    list-style: none;
}

.content-card__body .news,
.uni-band__body .news {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
}

.content-card__body .news__media,
.uni-band__body .news__media {
    display: block;
}

.content-card__body .news__image,
.uni-band__body .news__image {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

.content-card__body .news__meta,
.uni-band__body .news__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-2) 0 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.4;
}

.content-card__body .news__category,
.uni-band__body .news__category {
    color: var(--color-primary);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.content-card__body .news__category::before,
.uni-band__body .news__category::before {
    content: "| ";
    color: var(--color-border);
    font-weight: 400;
}

.content-card__body .news__title,
.uni-band__body .news__title {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: 700;
    line-height: 1.3;
}

.content-card__body .news__link,
.uni-band__body .news__link {
    color: inherit;
    text-decoration: none;
}

.content-card__body .news__link:hover,
.uni-band__body .news__link:hover,
.content-card__body .news__link:focus-visible,
.uni-band__body .news__link:focus-visible {
    text-decoration: underline;
}

/* Der Verweis unter «Meldungen» und «Veranstaltungen». */
.content-card__body .block-more,
.uni-band__body .block-more {
    margin: var(--space-6) 0 0;
    font-weight: 600;
}

/* ==========================================================================
   Blockarten, die bis dahin nur die Agenturseite hatte

   Checkliste, Preistabelle, Verweisliste und Referenzkarten lagen im Theme
   der Agenturseite fest verdrahtet. Sie stehen jetzt jeder Webseite offen,
   also gehören sie ins Basis-Stylesheet und nicht in webvanta.css.

   Alles über Tokens: die Stylesheets sind für alle Webseiten identisch und
   damit cachebar, die Farben kommen je Webseite als CSS-Variablen aus dem
   <head>.
   ========================================================================== */

/* --- Checkliste ---------------------------------------------------------- */

.content-card__body .check-list,
.uni-band__body .check-list {
    margin: var(--space-6) 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--space-3);
}

/* Der Haken ist ein Pseudoelement und kein Zeichen im Text: sonst läse ein
   Vorleseprogramm vor jedem Punkt «Häkchen» mit. */
.content-card__body .check-list__item,
.uni-band__body .check-list__item {
    position: relative;
    padding-left: var(--space-8);
    line-height: 1.6;
}

.content-card__body .check-list__item::before,
.uni-band__body .check-list__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 0.7rem;
    height: 0.38rem;
    border-left: 2px solid var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
    transform: rotate(-45deg);
}

/* --- Preistabelle -------------------------------------------------------- */

.content-card__body .pricing,
.uni-band__body .pricing {
    margin: var(--space-6) 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--space-6);
    /* Gleiche Höhe je Karte, damit die Schaltflächen auf einer Linie
       stehen — bei Tarifen nebeneinander ist eine versetzte Reihe von
       Knöpfen das, was zuerst unruhig wirkt. */
    align-items: stretch;
}

.content-card__body .pricing__item,
.uni-band__body .pricing__item {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--space-8) var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
}

.content-card__body .pricing__item--featured,
.uni-band__body .pricing__item--featured {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
}

.content-card__body .pricing__badge,
.uni-band__body .pricing__badge {
    position: absolute;
    top: 0;
    left: var(--space-6);
    transform: translateY(-50%);
    margin: 0;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.content-card__body .pricing__title,
.uni-band__body .pricing__title {
    margin: 0 0 var(--space-2);
    font-size: var(--text-lg);
    line-height: 1.3;
}

.content-card__body .pricing__price,
.uni-band__body .pricing__price {
    margin: 0 0 var(--space-4);
    font-size: var(--text-2xl);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-primary);
}

.content-card__body .pricing__text,
.uni-band__body .pricing__text {
    margin: 0 0 var(--space-4);
    color: var(--color-text-muted);
    line-height: 1.6;
}

.content-card__body .pricing__features,
.uni-band__body .pricing__features {
    margin: 0 0 var(--space-6);
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--space-2);
    line-height: 1.5;
}

.content-card__body .pricing__features li,
.uni-band__body .pricing__features li {
    position: relative;
    padding-left: var(--space-6);
}

.content-card__body .pricing__features li::before,
.uni-band__body .pricing__features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 0.6rem;
    height: 0.32rem;
    border-left: 2px solid var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
    transform: rotate(-45deg);
}

/* Schiebt die Schaltfläche an den unteren Rand, egal wie lang die Liste
   darüber ist. Das ist der Grund für das Flex-Layout der Karte. */
.content-card__body .pricing__action,
.uni-band__body .pricing__action {
    margin-top: auto;
    align-self: flex-start;
}

/* --- Verweisliste -------------------------------------------------------- */

.content-card__body .link-list,
.uni-band__body .link-list {
    margin: var(--space-6) 0 0;
}

.content-card__body .link-list__items,
.uni-band__body .link-list__items {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--space-4);
}

.content-card__body .link-list__item,
.uni-band__body .link-list__item {
    padding-left: var(--space-6);
    border-left: 2px solid var(--color-border);
}

.content-card__body .link-list__link,
.uni-band__body .link-list__link {
    font-weight: 600;
    color: var(--color-primary);
}

.content-card__body .link-list__text,
.uni-band__body .link-list__text {
    display: block;
    margin-top: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.5;
}

/* --- Referenzkarten ------------------------------------------------------ */

.content-card__body .project-grid,
.uni-band__body .project-grid {
    margin: var(--space-6) 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: var(--space-6);
}

.content-card__body .project-grid__item,
.uni-band__body .project-grid__item {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
}

.content-card__body .project-grid__image,
.uni-band__body .project-grid__image {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.content-card__body .project-grid__body,
.uni-band__body .project-grid__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--space-6);
}

.content-card__body .project-grid__industry,
.uni-band__body .project-grid__industry {
    margin: 0 0 var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.content-card__body .project-grid__title,
.uni-band__body .project-grid__title {
    margin: 0 0 var(--space-2);
    font-size: var(--text-lg);
    line-height: 1.35;
}

.content-card__body .project-grid__text,
.uni-band__body .project-grid__text {
    margin: 0 0 var(--space-4);
    color: var(--color-text-muted);
    line-height: 1.6;
}

.content-card__body .project-grid__badge,
.uni-band__body .project-grid__badge {
    margin: 0 0 var(--space-4);
    align-self: flex-start;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--color-bg-muted);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: 600;
}

/* Wie bei den Tarifen: der Verweis unten, damit er bei unterschiedlich
   langen Beschreibungen auf einer Linie bleibt. */
.content-card__body .project-grid__link,
.uni-band__body .project-grid__link {
    margin-top: auto;
    align-self: flex-start;
    font-weight: 600;
}

/* --- Die vier Listen als Layout, nicht als Aufzaehlung -------------------

   In site.css stehen dieselben Regeln mit «.prose » davor: dort setzt
   .content-card__body auf jede Liste einen runden Punkt und einen Einzug,
   und die Korrektur muss ihn ueberbieten.

   Hier faellt das «.prose » weg. Die drei Themes, die diese Datei laden,
   haben jene Prosa-Regeln gar nicht — es gibt nichts zu ueberbieten. Ohne
   die Verdopplung stehen die Regeln auf einer Klasse und damit niedrig
   genug, dass ein Theme sie weiterhin mit einer eigenen Regel schlaegt.
   Mit «.prose » davor haetten sie zum Beispiel den eigenen Haken von
   nordlicht und webvanta ueberstimmt. */

.content-card__body .pricing li,
.uni-band__body .pricing li,
.content-card__body .project-grid li,
.uni-band__body .project-grid li,
.content-card__body .link-list__items li,
.uni-band__body .link-list__items li,
.content-card__body .check-list li,
.uni-band__body .check-list li,
.content-card__body .pricing__features li,
.uni-band__body .pricing__features li {
    margin: 0;
}

/* Reine Layout-Listen: kein Punkt, kein Einzug. */
.content-card__body .pricing > li,
.uni-band__body .pricing > li,
.content-card__body .project-grid > li,
.uni-band__body .project-grid > li,
.content-card__body .link-list__items > li,
.uni-band__body .link-list__items > li {
    padding-left: 0;
}

.content-card__body .pricing > li::before,
.uni-band__body .pricing > li::before,
.content-card__body .project-grid > li::before,
.uni-band__body .project-grid > li::before,
.content-card__body .link-list__items > li::before,
.uni-band__body .link-list__items > li::before {
    content: none;
}

/* Die Verweisliste behält ihren Balken links — er ersetzt den Punkt. */
.content-card__body .link-list__item,
.uni-band__body .link-list__item {
    padding-left: var(--space-6);
}

/* Checkliste und Tarif-Stichpunkte tragen einen Haken statt des Punktes.
   Der Einzug bleibt, nur das Zeichen wird ausgetauscht. */
.content-card__body .check-list > li::before,
.uni-band__body .check-list > li::before,
.content-card__body .pricing__features > li::before,
.uni-band__body .pricing__features > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 0.6rem;
    height: 0.32rem;
    border: 0;
    border-left: 2px solid var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
    border-radius: 0;
    background: none;
    transform: rotate(-45deg);
}

/* Abstaende innerhalb der Karten.

   In site.css tragen dieselben Regeln ein «.prose » davor, weil dort
   .content-card__body 24px unter jeden Absatz setzt und eine Karte damit
   zusammengehoerige Zeilen auseinanderreisst — Branche und Titel einer
   Referenz lasen sich wie zwei getrennte Themen. Hier ist die Verdopplung
   aus demselben Grund wie oben weggelassen. */

.content-card__body .pricing__title,
.uni-band__body .pricing__title,
.content-card__body .project-grid__title,
.uni-band__body .project-grid__title {
    margin: 0 0 var(--space-2);
}

.content-card__body .project-grid__industry,
.uni-band__body .project-grid__industry {
    margin: 0 0 var(--space-1);
}

.content-card__body .pricing__price,
.uni-band__body .pricing__price,
.content-card__body .pricing__text,
.uni-band__body .pricing__text,
.content-card__body .project-grid__text,
.uni-band__body .project-grid__text,
.content-card__body .project-grid__badge,
.uni-band__body .project-grid__badge {
    margin: 0 0 var(--space-4);
}

.content-card__body .pricing__features,
.uni-band__body .pricing__features {
    margin: 0 0 var(--space-6);
}

.content-card__body .check-list,
.uni-band__body .check-list {
    margin: var(--space-6) 0 0;
}

.content-card__body .link-list__items,
.uni-band__body .link-list__items,
.content-card__body .pricing,
.uni-band__body .pricing,
.content-card__body .project-grid,
.uni-band__body .project-grid {
    margin: var(--space-6) 0 0;
}

.content-card__body .link-list__text,
.uni-band__body .link-list__text {
    margin: var(--space-1) 0 0;
}