/* Nur die im HTML zuerst stehende Ghost-Überschrift zeigen, alle
   weiteren (von Eintrag 2, 3, ...) ausblenden. Wirkt nur innerhalb der
   jeweils eigenen .aktHlGrid-Instanz, siehe Anmerkung unten. */
.aktHlGrid .aktHlSectionTitleGhost ~ .aktHlSectionTitleGhost { display:none; }


/* Smartphone (Standard): Einträge stehen untereinander, mit
   waagerechter Trennlinie statt senkrechtem Rand */
.werteRow > .werteItem {
  border-left: none;
  border-top: 1px solid #d8dee0;
  padding-top: 20px;
  margin-top: 20px;
}
.werteRow > .werteItem:first-child {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}
/* Ab Tablet/Desktop: Einträge nebeneinander, mit senkrechter
   Trennlinie statt waagerechter */
@media (min-width: 768px) {
  .werteRow > .werteItem {
    border-left: 1px solid #d8dee0;
    border-top: none;
    padding: 0 24px;
    margin-top: 0;
  }
  .werteRow > .werteItem:first-child {
    border-left: none;
    padding-left: 0;
  }
}

/*
 * Aus der Vorlagen-Werkstatt von mevisy. Oben steht das CSS aus den Seiten der Vorlage, hier die
 * Anpassung: Kopf und Fuß der Vorlage stehen ohne Leiste, Rand und Breite des mevisy-Kopfs.
 */
.site-header.mevisy-bereich-header,
.mevisy-bereich-footer {
    position: static;
    z-index: auto;
    margin: 0;
    border: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* !important, weil Vorlagen mit Bootstrap Klassen wie px-4 mit !important belegen */
:is(.mevisy-bereich-header, .mevisy-bereich-footer) > .mevisy-inhalt {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.mevisy-abschnitt.mevisy-werkstatt-teil {
    position: static;
    margin: 0;
    padding: 0;
    container-type: normal;
}

/* Steht der Seitentitel schon im Kopf der Vorlage oder hat die Startseite ihren eigenen Kopf, entfällt der des mevisy-Designs */
body:has(.mevisy-werkstatt-kopf [data-mevisy-titel]) .mevisy-seitentitel,
body:has(.mevisy-werkstatt-kopf) .mevisy-seitentitel-start {
    display: none;
}

/* Abschnitte der Vorlage in Fensterbreite reichen bis an den Rand: Die Vorlage zentriert ihren Inhalt
   selbst (etwa mit .container), Hintergründe gehen wie dort über die ganze Breite */
.mevisy-abschnitt.mevisy-breite-voll:has(> .mevisy-abschnitt-inhalt > .mevisy-spalte > :is(.mevisy-eigen, .mevisy-html)) {
    padding-inline: 0;
}

/* Beginnt oder endet der Inhalt mit einem Abschnitt der Vorlage, schließt er ohne Abstand an Kopf
   und Fuß an: Die Abstände bringt die Vorlage selbst mit */
main > div:has(> .mevisy-inhalt > .mevisy-abschnitt:first-child > .mevisy-abschnitt-inhalt > .mevisy-spalte > :is(.mevisy-eigen, .mevisy-html)) {
    padding-top: 0;
}

main > div:has(> .mevisy-inhalt > .mevisy-abschnitt:last-child > .mevisy-abschnitt-inhalt > .mevisy-spalte > :is(.mevisy-eigen, .mevisy-html)) {
    padding-bottom: 0;
}

/* Grundstile des mevisy-Designs (Schriftglättung, Überschriften) gelten nicht für die Vorlage. In einer
   eigenen Ebene: nach denen von mevisy, aber vor jedem CSS der Vorlage */
@layer mevisy-werkstatt {
    html {
        -webkit-font-smoothing: auto;
        text-rendering: auto;
    }

    :where(.mevisy-eigen, .mevisy-html, .mevisy-text) :is(h1, h2, h3, h4) {
        color: inherit;
        font-weight: bold;
        letter-spacing: normal;
    }
}

.mevisy-werkstatt-hinweis {
    padding: 0.6rem 1rem;
    text-align: center;
    font-size: 0.9rem;
}

.mevisy-werkstatt-teil > .mevisy-abschnitt-inhalt,
.mevisy-werkstatt-teil .mevisy-spalte,
.mevisy-werkstatt-teil .mevisy-baustein {
    display: block;
    max-width: none;
    margin: 0;
    padding: 0;
}

/* Die Akzentfarbe der Vorlage für Schaltflächen, Veranstaltungen und Konto im mevisy-Design */
:root {
    --akzent: #007bff;
}

body {
    --color-petrol-50: color-mix(in oklab, var(--akzent) 7%, white);
    --color-petrol-100: color-mix(in oklab, var(--akzent) 16%, white);
    --color-petrol-200: color-mix(in oklab, var(--akzent) 30%, white);
    --color-petrol-300: color-mix(in oklab, var(--akzent) 50%, white);
    --color-petrol-400: color-mix(in oklab, var(--akzent) 68%, white);
    --color-petrol-500: color-mix(in oklab, var(--akzent) 84%, white);
    --color-petrol-600: var(--akzent);
    --color-petrol-700: color-mix(in oklab, var(--akzent) 84%, black);
    --color-petrol-800: color-mix(in oklab, var(--akzent) 68%, black);
    --color-petrol-900: color-mix(in oklab, var(--akzent) 50%, black);
    --mevisy-akzent: var(--akzent);
    --mevisy-akzent-hell: color-mix(in oklab, var(--akzent) 9%, white);
}