/* =============================================================================
   Mukaan – Gestaltungsebene

   Das System ist nicht erfunden, sondern aus dem Beitragsbereich abgeleitet:
   Label mit Punkt, grosse Ueberschrift, Kapsel-Chips, Karten mit feiner
   Kontur. Alles andere auf der Seite folgt jetzt denselben Werten.

   REGELN
   Flaeche    Genau zwei Ebenen: Seite und Karte. Was in einer Karte liegt,
              bekommt eine Kontur, keine zweite Fuellung.
   Rundung    Medien 10px, Container 16px, Bedienelemente Kapsel.
   Farbe      Weiss und zwei Graustufen. Akzentblau nur fuer den Punkt am
              Label, Textlinks und das Suchsymbol.
   Kontrast   Ueber Konturen, nie ueber Schatten oder Verlaeufe.
   Hoehe      Alle Bedienelemente 42px.
   Abstand    Vielfache von 2 aus der Skala unten.
   ============================================================================= */

:root {
    /* Flaechen */
    --mk-bg: #0b0b0b;
    --mk-surface: #131313;
    --mk-surface-hover: #191919;

    /* Konturen */
    --mk-line: rgba(255, 255, 255, 0.08);
    --mk-line-strong: rgba(255, 255, 255, 0.16);

    /* Schrift */
    --mk-text: #ffffff;
    --mk-text-muted: rgba(255, 255, 255, 0.64);
    --mk-text-faint: rgba(255, 255, 255, 0.42);

    /* Rundung */
    --mk-r-media: 10px;
    --mk-r-box: 16px;
    --mk-r-pill: 999px;

    /* Abstand */
    --mk-s1: 4px;
    --mk-s2: 8px;
    --mk-s3: 14px;
    --mk-s4: 20px;
    --mk-s5: 28px;
    --mk-s6: 42px;

    /* Rhythmus zwischen Bloecken */
    --mk-stack: 32px;
    --mk-stack-tight: 24px;

    /* Bedienelemente */
    --mk-control: 42px;

    /* Bewegung */
    --mk-ease: 0.18s ease;

    /* Ueberschriften in der Logoschrift */
    --gh-font-heading: "Space Grotesk", Helvetica, Arial, sans-serif;
}

@media (min-width: 768px) {
    :root {
        --mk-stack: 48px;
    }
}

/* =============================================================================
   Grundlagen
   ============================================================================= */

.is-title,
h1, h2, h3, h4, h5, h6 {
    letter-spacing: -0.025em;
}

.gh-viewport {
    position: relative;
}

/* Eigene Bloecke sind .gh-container und wuerden sonst Gravs flex-grow erben
   und sich auf kurzen Seiten aufblaehen. Wachsen soll nur der Beitragsfeed. */
.mk-profile,
.mk-support,
.mk-filter {
    flex-grow: 0;
}

/* Rhythmus der Startseite

   Der Kopf – Vorstellung und Anzeige – bildet eine Gruppe und steht enger
   zusammen. Der Beitragsbereich setzt mit dem vollen Abstand ab. */
.home-template .mk-profile,
.home-template .mk-profile + .mk-support {
    margin-top: var(--mk-s5);
}

.home-template .mk-support + .gh-container,
.home-template .gh-container + .gh-container:not(.mk-support) {
    margin-top: var(--mk-stack);
}

.home-template .gh-container-inner {
    padding-block: 0;
}

/* =============================================================================
   Kopfzeile
   Traegt nur die Wortmarke. Navigation laeuft ueber die Kategorieleiste.
   ============================================================================= */

.gh-navigation {
    background-color: transparent;
}

.gh-navigation-actions:empty {
    display: none;
}

/* =============================================================================
   Profil
   Ohne Rahmen: es gibt keinen zweiten Inhalt daneben, von dem abzugrenzen waere.
   ============================================================================= */

.mk-profile-card {
    display: flex;
    flex-direction: column;
    gap: var(--mk-s3);
    align-items: center;
    max-width: 560px;
    margin-inline: auto;
    text-align: center;
}

.mk-profile-avatar {
    width: 92px;
    height: 92px;
    object-fit: cover;
    border: 1px solid var(--mk-line-strong);
    border-radius: 50%;
}

.mk-profile-text {
    display: flex;
    flex-direction: column;
    gap: var(--mk-s1);
    align-items: center;
}

.mk-profile-name {
    margin: 0;
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--mk-text);
}

.mk-profile-tagline {
    max-width: 42ch;
    margin: 0;
    font-size: 1.45rem;
    line-height: 1.5;
    color: var(--mk-text-muted);
}

.mk-profile-socials {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mk-s2);
    justify-content: center;
}

.mk-profile-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--mk-control);
    height: var(--mk-control);
    color: var(--mk-text);
    background-color: transparent;
    border: 1px solid var(--mk-line);
    border-radius: var(--mk-r-pill);
    transition: background-color var(--mk-ease), border-color var(--mk-ease);
}

.mk-profile-social svg {
    width: 18px;
    height: 18px;
}

@media (min-width: 768px) {
    .mk-profile-avatar {
        width: 104px;
        height: 104px;
    }

    .mk-profile-name {
        font-size: 3.2rem;
    }
}

/* =============================================================================
   Abschnittskopf
   Das Muster, aus dem das System stammt: Label mit Punkt, darunter die
   Ueberschrift.
   ============================================================================= */

.mk-section-head {
    grid-column: 1 / -1;
    margin-bottom: var(--mk-stack-tight);
    text-align: center;
}

.mk-section-label {
    display: inline-flex;
    line-height: 1;
    gap: var(--mk-s2);
    align-items: center;
    margin: 0 0 10px;
    font-family: var(--gh-font-heading);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--mk-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.mk-section-dot {
    width: 6px;
    height: 6px;
    color: var(--ghost-accent-color);
    background-color: currentColor;
    border-radius: 50%;
    box-shadow: 0 0 10px 1px currentColor;
}

.gh-container-title {
    margin: 0;
    font-size: clamp(2.4rem, 1.6rem + 2.4vw, 4rem);
    font-weight: 700;
    line-height: 1.1;
    color: var(--mk-text);
    text-transform: none;
    letter-spacing: -0.03em;
    border-bottom: 0;
    padding-bottom: 0;
}

/* =============================================================================
   Kategorieleiste und Suche
   ============================================================================= */

.gh-container .mk-filter {
    grid-column: 1 / -1;
    margin-top: 0;
    margin-bottom: var(--mk-stack-tight);
}

.gh-container .mk-filter .gh-container-inner {
    padding-inline: 0;
}

.gh-container .mk-filter .gh-main {
    grid-column: 1 / -1;
}

.mk-filter-bar {
    display: flex;
    justify-content: center;
}

.mk-filter-chips {
    display: flex;
    gap: var(--mk-s2);
    justify-content: safe center;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.mk-filter-chips::-webkit-scrollbar {
    display: none;
}

.mk-filter-chip,
.mk-filter-search {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    height: var(--mk-control);
    font-family: var(--gh-font-heading);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--mk-text-muted);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    background-color: transparent;
    border: 1px solid var(--mk-line);
    border-radius: var(--mk-r-pill);
    transition: color var(--mk-ease), background-color var(--mk-ease), border-color var(--mk-ease);
}

.mk-filter-chip {
    padding-inline: 16px;
}

.mk-filter-search {
    display: none;
    width: var(--mk-control);
    color: var(--ghost-accent-color);
}

.mk-filter-search svg {
    width: 17px;
    height: 17px;
}

.mk-filter-chip.is-active {
    color: var(--mk-text);
    background-color: var(--mk-surface-hover);
    border-color: var(--mk-line-strong);
}

.mk-filter-more {
    margin: var(--mk-s3) 0 0;
    font-size: 1.35rem;
    text-align: center;
}

.mk-filter-more a {
    color: var(--ghost-accent-color);
    text-decoration: none;
}

.mk-filter-more a:hover {
    text-decoration: underline;
}

.mk-searchbar {
    display: flex;
    gap: 10px;
    align-items: center;
    width: 100%;
    max-width: 520px;
    height: var(--mk-control);
    padding-inline: 16px;
    margin: 10px auto 0;
    background-color: transparent;
    border: 1px solid var(--mk-line);
    border-radius: var(--mk-r-pill);
}

.mk-searchbar > svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: var(--ghost-accent-color);
}

.mk-searchbar-input {
    flex: 1;
    min-width: 0;
    height: 100%;
    font-family: var(--font-sans);
    font-size: 1.4rem;
    color: var(--mk-text);
    background: transparent;
    border: 0;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.mk-searchbar-input::-webkit-search-cancel-button {
    display: none;
}

.mk-searchbar-input::placeholder {
    color: var(--mk-text-muted);
}

.mk-searchbar-close {
    display: flex;
    flex-shrink: 0;
    padding: 5px;
    color: var(--mk-text-muted);
    cursor: pointer;
    background: none;
    border: 0;
    border-radius: var(--mk-r-pill);
}

.mk-searchbar-close svg {
    width: 15px;
    height: 15px;
}

/* Am Rechner ein Knopf, der die Leiste aufklappt. Auf dem Handy steht die
   Leiste dauerhaft da – ein zusaetzlicher Tipp waere dort nur ein Umweg. */
@media (min-width: 768px) {
    .mk-filter-search {
        display: inline-flex;
    }

    .mk-searchbar {
        display: none;
    }

    .mk-filter.is-search-open .mk-searchbar {
        display: flex;
    }

    .mk-filter.is-search-open .mk-filter-search {
        background-color: var(--mk-surface-hover);
        border-color: var(--mk-line-strong);
    }
}

/* =============================================================================
   Beitragskarten
   ============================================================================= */

.gh-container.is-grid .gh-feed {
    overflow: visible;
    row-gap: var(--mk-s6);
}

.gh-container.is-grid .gh-card {
    background-color: var(--mk-surface);
    border: 1px solid var(--mk-line);
    border-radius: var(--mk-r-box);
    transition: background-color var(--mk-ease), border-color var(--mk-ease);
}

/* Gravs Rasterlinien entfallen, die Karten tragen die Gliederung selbst */
.gh-container.is-grid .gh-card::before,
.gh-container.is-grid .gh-card::after {
    display: none;
}

.gh-container.is-grid .gh-card-link {
    gap: var(--mk-s3);
    padding: var(--mk-s3);
}

.gh-card-image {
    overflow: hidden;
    border-radius: var(--mk-r-media);
}

.gh-card-tag {
    display: inline-block;
    padding: 3px 10px;
    font-size: 1.1rem;
    color: var(--mk-text-muted);
    background-color: transparent;
    border: 1px solid var(--mk-line);
    border-radius: var(--mk-r-pill);
}

.gh-card-title {
    letter-spacing: -0.025em;
}

.gh-card-excerpt {
    color: var(--mk-text-muted);
}

.gh-card-meta {
    color: var(--mk-text-faint);
}

/* =============================================================================
   Unterstuetzen
   Zeilen nach dem Muster der Referenz: Symbol links, Beschriftung, Pfeil.
   ============================================================================= */

.mk-support-inner {
    display: flex;
    flex-direction: column;
    gap: var(--mk-s3);
    align-items: center;
    width: 100%;
    max-width: 560px;
    padding: var(--mk-s4);
    margin-inline: auto;
    text-align: center;
    background-color: var(--mk-surface);
    border: 1px solid var(--mk-line);
    border-radius: var(--mk-r-box);
}

.mk-support-text {
    display: flex;
    flex-direction: column;
    gap: var(--mk-s2);
    align-items: center;
}

.mk-support-label {
    margin: 0;
}

.mk-support-title {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--mk-text);
}

.mk-support-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.mk-support-button {
    display: flex;
    gap: 12px;
    align-items: center;
    height: var(--mk-control);
    padding-inline: 14px;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--mk-text);
    text-decoration: none;
    background-color: transparent;
    border: 1px solid var(--mk-line);
    border-radius: var(--mk-r-pill);
    transition: background-color var(--mk-ease), border-color var(--mk-ease);
}

.mk-support-button-icon {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--mk-text-muted);
}

.mk-support-button-icon svg {
    width: 17px;
    height: 17px;
}

.mk-support-button-text {
    flex: 1;
    text-align: left;
}

.mk-support-button > svg {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    color: var(--mk-text-faint);
}

.mk-support-disclosure {
    max-width: 56ch;
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.5;
    color: var(--mk-text-faint);
}

/* =============================================================================
   Kategorie- und Suchseiten
   ============================================================================= */

.gh-archive {
    margin-top: var(--mk-stack);
}

.gh-archive-inner {
    grid-template-columns: 1fr;
    padding-bottom: var(--mk-stack);
    border-bottom: 0;
}

.gh-archive-wrapper {
    grid-column: 1 / -1;
    text-align: center;
}

.gh-archive-wrapper .mk-section-label {
    justify-content: center;
    margin-bottom: 10px;
}

.gh-archive-wrapper .gh-article-title {
    font-size: clamp(2.8rem, 1.8rem + 3vw, 4.4rem);
    letter-spacing: -0.03em;
}

.gh-archive-wrapper .gh-article-excerpt {
    max-width: 52ch;
    margin-inline: auto;
    color: var(--mk-text-muted);
}

.mk-empty {
    grid-column: 1 / -1;
    padding: var(--mk-s6) 0;
    font-size: 1.5rem;
    color: var(--mk-text-muted);
    text-align: center;
}

/* =============================================================================
   Artikel
   ============================================================================= */

.gh-article-tag {
    display: inline-block;
    width: -moz-fit-content;
    width: fit-content;
    justify-self: start;
    padding: 4px 12px;
    color: var(--mk-text-muted);
    text-decoration: none;
    background-color: transparent;
    border: 1px solid var(--mk-line);
    border-radius: var(--mk-r-pill);
}

.gh-article-image img,
.gh-content :is(img, video, iframe),
.gh-content pre {
    border-radius: var(--mk-r-media);
}

.gh-content a:not(.gh-button) {
    color: var(--ghost-accent-color);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.gh-article-author-image .gh-author-avatar {
    background-color: var(--mk-surface-hover);
    border: 1px solid var(--mk-line);
}

/* =============================================================================
   Footer
   ============================================================================= */

.mk-footer {
    margin-top: var(--mk-stack);
    padding-block: var(--mk-stack) var(--mk-s6);
    border-top: 0;
}

.mk-footer-inner {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    text-align: center;
}

.mk-footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: center;
}

.mk-footer-link {
    font-size: 1.35rem;
    font-weight: 500;
    color: var(--mk-text);
    text-decoration: none;
    transition: color var(--mk-ease);
}

.mk-footer-meta {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    justify-content: center;
    margin: 0;
    font-size: 1.25rem;
    color: var(--mk-text-faint);
}

.mk-footer-heart {
    font-size: 1.2rem;
    line-height: 1;
}

.mk-footer-sep {
    opacity: 0.4;
}

/* =============================================================================
   Zustaende
   Ueberall gleich: minimal hellere Flaeche, etwas kraeftigere Kontur.
   ============================================================================= */

.mk-filter-chip:hover,
.mk-filter-search:hover,
.mk-support-button:hover,
.mk-profile-social:hover,
.mk-searchbar-close:hover,
.gh-container.is-grid .gh-card:hover {
    color: var(--mk-text);
    background-color: var(--mk-surface-hover);
    border-color: var(--mk-line-strong);
}

.gh-article-tag:hover,
.mk-footer-link:hover {
    color: var(--ghost-accent-color);
}

:is(a, button, input, [tabindex]):focus-visible {
    outline: 2px solid var(--ghost-accent-color);
    outline-offset: 3px;
    border-radius: var(--mk-r-media);
}

/* =============================================================================
   Kopfbereich – Ueberarbeitung

   Vorher standen drei Bloecke ohne Rangfolge untereinander: eine Leiste ohne
   Kante, ein nacktes Profil und ein grosser Kasten fuer den unwichtigsten
   Inhalt. Jetzt gilt eine klare Reihenfolge.

   1. Leiste   schmal, mit Kante, traegt nur die Marke
   2. Profil   groesstes Element der Seite, es stellt den Absender vor
   3. Anzeige  kleinster Block, eine Zeile plus zwei Knoepfe
   ============================================================================= */

/* --- 1. Leiste: liest sich als Leiste, nicht als schwebendes Logo --- */

.gh-navigation {
    border-bottom: 1px solid var(--mk-line);
}

:root {
    --mk-logo-size: 34px;
}

@media (min-width: 641px) {
    :root {
        --mk-logo-size: 36px;
    }
}

/* --- 2. Profil: oberste Stufe der Groessenordnung --- */

.mk-profile {
    margin-top: var(--mk-stack);
}

.mk-profile-card {
    gap: var(--mk-s4);
}

.mk-profile-name {
    font-size: clamp(3rem, 2rem + 3.4vw, 5rem);
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.mk-profile-tagline {
    max-width: 40ch;
    font-size: 1.6rem;
}

@media (min-width: 768px) {
    .mk-profile-name {
        font-size: clamp(3rem, 2rem + 3.4vw, 5rem);
    }

    .mk-profile-tagline {
        font-size: 1.7rem;
    }
}

/* --- 3. Anzeige: kleinster Block, eine Zeile --- */

.mk-support-inner {
    gap: var(--mk-s3);
    max-width: 520px;
    padding: var(--mk-s3) var(--mk-s4);
}

.mk-support-label {
    margin: 0;
}

.mk-support-actions {
    flex-direction: row;
    gap: var(--mk-s2);
}

.mk-support-button {
    flex: 1;
    justify-content: center;
    padding-inline: 12px;
}

.mk-support-button-text {
    flex: 0 1 auto;
    text-align: center;
}

/* Der Pfeil entfaellt in der schmalen Zeile, er kostet nur Breite */
.mk-support-button > svg {
    display: none;
}

.mk-support-disclosure {
    font-size: 1.1rem;
}

/* --- Naehe im Feed --- */

/* Karten gehoeren zusammen und muessen enger stehen als der Abstand zur
   Ueberschrift darueber. Vorher: 42px untereinander, 24px nach oben. */
.gh-container.is-grid .gh-feed {
    gap: var(--mk-s4);
    row-gap: var(--mk-s5);
}

.gh-container .mk-filter {
    margin-bottom: var(--mk-s5);
}

.mk-section-head {
    margin-bottom: var(--mk-s4);
}

/* =============================================================================
   Suche

   Handy   Leiste steht dauerhaft unter den Kategorien.
   Rechner Der Knopf oeffnet dieselbe Leiste als mittigen Dialog.
   ============================================================================= */

/* Am Handy ist die Huelle nur ein Durchreicher */
.mk-searchlayer {
    display: contents;
}

@media (min-width: 768px) {
    .mk-searchlayer {
        position: fixed;
        inset: 0;
        z-index: 3999999;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 20px;
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }

    .mk-filter.is-search-open .mk-searchlayer {
        display: flex;
    }

    .mk-filter.is-search-open .mk-searchbar,
    .mk-searchlayer .mk-searchbar {
        display: flex;
        max-width: 560px;
        height: 56px;
        margin: 0;
        background-color: var(--mk-surface);
        border-color: var(--mk-line-strong);
    }

    .mk-searchlayer .mk-searchbar-input {
        font-size: 1.6rem;
    }
}

/* =============================================================================
   Nachschaerfung

   Rundung   Container von 16 auf 20, Medien von 10 auf 14. Bedienelemente
             bleiben Kapseln.
   Anzeige   Kein Leuchtpunkt am Label – der Punkt des Beitragsfeeds steht
             direkt darunter und beide zusammen verwaschen. Die gesetzlich
             noetige Kennzeichnung "Anzeige" steht wieder als eigene Zeile.
   ============================================================================= */

:root {
    --mk-r-media: 14px;
    --mk-r-box: 20px;
}

/* Der Anzeigenblock: Kennzeichnung klein darueber, Titel darunter */
.mk-support-text {
    gap: 2px;
}

.mk-support-label {
    font-family: var(--gh-font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--mk-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.mk-support-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--mk-text);
    letter-spacing: -0.02em;
}

/* =============================================================================
   Kopfbereich: kompakter und ohne Rahmen

   REGEL  Ein Rahmen kennzeichnet einen Inhalt, den man anklicken kann – also
          Beitragskarten. Alles ueber dem Feed ist offene Komposition. Vorher
          stand dort genau ein gerahmtes Element neben einem offenen, das las
          sich als Fremdkoerper.

   GRUND  Die erste Beitragskarte begann bei 878px. Auf einem Laptop war damit
          ohne Scrollen kein einziger Beitrag zu sehen. Bei einem Blog sind die
          Beitraege das Produkt, nicht die Vorstellung.
   ============================================================================= */

.mk-support-inner {
    max-width: 460px;
    padding: 0;
    background-color: transparent;
    border: 0;
}

.mk-profile-card {
    gap: var(--mk-s3);
}

.mk-profile-avatar {
    width: 76px;
    height: 76px;
}

.mk-profile-name {
    font-size: clamp(2.8rem, 2rem + 2.2vw, 3.8rem);
}

.mk-profile-tagline {
    font-size: 1.5rem;
}

@media (min-width: 768px) {
    .mk-profile-avatar {
        width: 84px;
        height: 84px;
    }

    .mk-profile-tagline {
        font-size: 1.55rem;
    }
}

/* Der Pflichthinweis ist die kleinste Zeile und darf nicht der groesste
   Block im Kopf sein */
.mk-support-disclosure {
    max-width: 64ch;
}

/* =============================================================================
   Anzeige hinter dem Feed

   Ohne Rahmen verschmolz der Block mit der Vorstellung darueber – acht
   zentrierte Zeilen ohne Trennung. Der Rahmen hatte also eine Aufgabe. Die
   bessere Loesung ist nicht der Rahmen zurueck, sondern der Block an eine
   Stelle, an der er niemanden zustellt: hinter die Beitraege.

   Dort steht er zwischen gerahmten Karten und bekommt seinen Rahmen zurueck,
   ohne mit der offenen Komposition im Kopf zu kollidieren.
   ============================================================================= */

.home-template .gh-container + .mk-support {
    margin-top: var(--mk-stack);
}

.home-template .mk-support .mk-support-inner {
    max-width: 520px;
    padding: var(--mk-s4);
    background-color: var(--mk-surface);
    border: 1px solid var(--mk-line);
    border-radius: var(--mk-r-box);
}

/* Der Kopf besteht jetzt nur noch aus der Vorstellung */
.home-template .mk-profile + .gh-container {
    margin-top: var(--mk-stack);
}

/* =============================================================================
   Kopfbereich als eigener Abschnitt

   Der Kopf fuellt das Fenster bis auf einen Rest, sodass der Beitragsbereich
   unten angeschnitten sichtbar ist – man sieht, dass es weitergeht, und muss
   dafuer scrollen. Der Pfeil bringt einen direkt dorthin.
   ============================================================================= */

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

#beitraege {
    scroll-margin-top: var(--mk-s5);
}

/* Fensterhoehe abzueglich Kopfleiste und dem Rest, der vom Beitragsbereich
   schon zu sehen sein soll. svh statt vh, damit die Adressleiste mobiler
   Browser die Rechnung nicht verfaelscht. */
.home-template .mk-profile {
    display: flex;
    align-items: center;
    min-height: calc(100svh - 96px - 130px);
}

@media (min-width: 768px) {
    .home-template .mk-profile {
        min-height: calc(100svh - 120px - 150px);
    }
}

.mk-scrollcue {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--mk-control);
    height: var(--mk-control);
    margin-top: var(--mk-s4);
    color: var(--mk-text-muted);
    border: 1px solid var(--mk-line);
    border-radius: var(--mk-r-pill);
    transition: color var(--mk-ease), background-color var(--mk-ease),
                border-color var(--mk-ease), transform var(--mk-ease);
}

.mk-scrollcue svg {
    width: 18px;
    height: 18px;
}

.mk-scrollcue:hover {
    color: var(--mk-text);
    background-color: var(--mk-surface-hover);
    border-color: var(--mk-line-strong);
    transform: translateY(2px);
}

/* Der Pfeil steht auf jeder Groesse, weil der Kopf ueberall das Fenster
   fuellt und der Beitragsbereich ueberall nur angeschnitten zu sehen ist. */

/* =============================================================================
   Anzeige am Rechner als Band

   Als schmaler Kasten unter einem dreispaltigen Raster hielt sich der Block
   an keine Kante und wirkte wie hineingerutscht. Ab Tablet nutzt er deshalb
   dieselbe Breite wie die Karten darueber – mit Inhalt, der sie auch fuellt:
   Beschriftung links, Knoepfe rechts. Auf dem Handy bleibt die gestapelte
   Fassung, die dort passt.
   ============================================================================= */

@media (min-width: 768px) {
    .home-template .mk-support .mk-support-inner {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: var(--mk-s3) var(--mk-s5);
        align-items: center;
        max-width: none;
        padding: var(--mk-s4) var(--mk-s5);
        text-align: left;
    }

    .home-template .mk-support .mk-support-text {
        align-items: flex-start;
        gap: 2px;
    }

    .home-template .mk-support .mk-support-actions {
        width: auto;
    }

    .home-template .mk-support .mk-support-button {
        min-width: 150px;
    }

    .home-template .mk-support .mk-support-disclosure {
        grid-column: 1 / -1;
        max-width: none;
        text-align: left;
    }
}

/* =============================================================================
   Artikelseite

   Sie war der letzte Bereich ausserhalb des Systems: Abstaende von 120 und
   72 Pixeln aus keiner Skala, alles linksbuendig, waehrend die uebrige Seite
   mittig steht, und ein Pillen-Tag statt der Bereichsbezeichnung.

   Der Fliesstext bleibt linksbuendig – gelesen wird von links. Alles um ihn
   herum folgt der Seite.
   ============================================================================= */

/* Gleicher Abstand unter der Kopfleiste wie ueberall */
.post-template .mk-filter,
.page-template .mk-filter,
.tag-template .mk-filter {
    margin-top: var(--mk-stack);
}

.post-template .gh-article-header,
.page-template .gh-article-header {
    margin-top: var(--mk-s5);
    text-align: center;
}

/* Bereichsbezeichnung als Link auf die Kategorie */
.mk-article-label {
    justify-content: center;
    margin-bottom: 12px;
    text-decoration: none;
    transition: color var(--mk-ease);
}

.mk-article-label:hover {
    color: var(--mk-text);
}

.gh-article-title {
    font-size: clamp(2.8rem, 1.8rem + 3vw, 4.4rem);
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.gh-article-excerpt {
    max-width: 56ch;
    margin-inline: auto;
    color: var(--mk-text-muted);
}

/* Autorenzeile mittig unter den Kopf */
.gh-meta-share {
    justify-content: center;
    margin-top: var(--mk-s4);
}

.gh-article-meta {
    justify-content: center;
}

.gh-article-author-name {
    font-size: 1.4rem;
}

.gh-article-meta-content {
    font-size: 1.3rem;
    color: var(--mk-text-faint);
}

.gh-article-image {
    margin-top: var(--mk-stack);
}

/* Fliesstext: linksbuendig, weil er gelesen wird */
.gh-content {
    text-align: left;
}

.gh-content > * + * {
    margin-top: var(--mk-s4);
}

.gh-content :is(h2, h3) {
    margin-top: var(--mk-s6);
    letter-spacing: -0.025em;
}

/* Verwandte Beitraege im Rhythmus der Seite */
.post-template .gh-container.is-grid {
    margin-top: var(--mk-stack);
}

/* Drei verwandte Beitraege, drei gleiche Spalten. Mit auto-fit legt das
   Raster bei 1120px vier Spalten an und die vierte bleibt leer. */
@media (min-width: 768px) {
    /* Ghosts eigene Rasterregel ist spezifischer, deshalb hier gleichziehen */
    .post-template .gh-container.is-grid .gh-feed {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Auf Artikelseiten bestimmt Gravs Canvas die Inhaltsbreite: das Titelbild
   ist 1120px breit. Kategorieleiste und verwandte Beitraege richten sich
   danach, sonst laufen drei verschiedene Kanten uebereinander. */
.post-template .gh-container.is-grid .mk-section-head,
.post-template .gh-container.is-grid .gh-feed,
.post-template .mk-filter .gh-main {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 1120px;
    margin-inline: auto;
}

/* ---------- Zurueck-Knopf auf Artikel- und Inhaltsseiten ----------
   Mittig wie alle anderen Rahmenelemente der Seite. */

/* Ghost setzt .post-template .gh-container auf 120px margin-top – gedacht
   fuer den Artikelkopf ohne vorgeschaltete Leiste. Hier gilt die Skala. */
.post-template .mk-back,
.page-template .mk-back {
    margin-top: var(--mk-s5);
    flex-grow: 0;
}

.post-template .mk-back .gh-main,
.page-template .mk-back .gh-main {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 1120px;
    margin-inline: auto;
    text-align: center;
}

.mk-back-link {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    height: var(--mk-control);
    padding-inline: 16px;
    font-family: var(--gh-font-heading);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--mk-text-muted);
    text-decoration: none;
    border: 1px solid var(--mk-line);
    border-radius: var(--mk-r-pill);
    transition: color var(--mk-ease), background-color var(--mk-ease), border-color var(--mk-ease);
}

.mk-back-link svg {
    width: 16px;
    height: 16px;
}

.mk-back-link:hover {
    color: var(--mk-text);
    background-color: var(--mk-surface-hover);
    border-color: var(--mk-line-strong);
}

/* =============================================================================
   Plugin-Seiten

   Login, Registrierung, Profil: Vorlagen, die nicht aus diesem Theme stammen
   und nur rohes Markup liefern. Sie bekommen hier Form, damit sie nicht wie
   ein fremder Fuss unter der Seite haengen.
   ============================================================================= */

.mk-pluginseite {
    max-width: 460px;
    margin: var(--mk-stack) auto;
}

.mk-pluginseite h1,
.mk-pluginseite h2 {
    margin-bottom: var(--mk-s4);
    font-size: 2.4rem;
    text-align: center;
}

.mk-pluginseite form {
    display: flex;
    flex-direction: column;
    gap: var(--mk-s3);
}

.mk-pluginseite :is(input[type="text"], input[type="password"], input[type="email"]) {
    width: 100%;
    height: 48px;
    padding-inline: 16px;
    font-family: var(--font-sans);
    font-size: 1.5rem;
    color: var(--mk-text);
    background-color: var(--mk-surface);
    border: 1px solid var(--mk-line);
    border-radius: var(--mk-r-box);
    outline: none;
}

.mk-pluginseite :is(input:focus) {
    border-color: var(--ghost-accent-color);
}

.mk-pluginseite label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 1.3rem;
    color: var(--mk-text-muted);
}

.mk-pluginseite button,
.mk-pluginseite input[type="submit"] {
    height: 48px;
    font-family: var(--gh-font-heading);
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    background-color: var(--ghost-accent-color);
    border: 0;
    border-radius: 999px;
}

.mk-pluginseite a {
    color: var(--ghost-accent-color);
}