/* Comic-Rahmen für die Boxen der Blog-Einzelansicht (Titel/Meta & Content) */
.blog-item-frame {
    border: 6px solid #16120F !important;
    box-shadow: 8px 8px 0 #16120F;
    overflow: hidden;
}

/* ── Hero-Zeile: Bild und Teaser als zwei getrennte Comic-Rahmen ──────────
   .hero-row nutzt bewusst NUR die Spectre-Klassen .columns/.column (wie
   .post-content-grid weiter unten) statt eines eigenen flex-gap – ein
   zusätzliches CSS-`gap` on top von col-4+col-8=100% Breite würde die
   Zeile rechnerisch >100% machen und einen ungewollten Umbruch erzwingen.
   Für einen GRÖSSEREN Abstand als Spectres Standard-Gutter (0.4rem)
   wird stattdessen die Column-Padding für diese eine Zeile erhöht –
   negative Margin (.columns) und Padding (.column) gleichen sich
   rechnerisch immer exakt aus, egal wie groß der Wert ist. */
.hero-row {
    align-items: center;
    margin-bottom: 1.5rem;
}

.hero-row.columns {
    margin-left: -0.9rem;
    margin-right: -0.9rem;
}

.hero-row > .column {
    padding-left: 0.9rem;
    padding-right: 0.9rem;
}

/* Bild im Vollformat (nichts wird beschnitten): fester Rahmen mit
   konfigurierbarem Seitenverhältnis (Blueprint-Feld "Bild-Seiten-
   verhältnis"), das Bild wird per object-fit:contain komplett
   eingepasst statt per cover zugeschnitten. Leichte Rotation für den
   Comic-/Pinnwand-Look (wie die anderen gedrehten Badges/Tags im
   Theme, siehe comic.css). Da die Höhe jetzt vom aspect-ratio kommt
   statt von einem gestreckten Nachbar-Element, ist das robust und
   kollabiert nicht mehr auf 0px. */
.blog-hero-media {
    position: relative;
    overflow: hidden;
    aspect-ratio: var(--hero-image-ratio, 3/4);
    transform: rotate(-2deg) scale(0.9);
    align-items: center;
}

.blog-hero-media > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* ── Artikel + Event/Gast/Teilen-Sidebar nebeneinander ───────────────────── */
.post-content-grid {
    margin-top: 0;
}

@media (max-width: 840px) {
    .post-aside {
        position: static;
        margin-top: 1.5rem;
    }
}

/* ── Bildunterschrift & Bildergalerie ─────────────────────────────────────
   Liegen als Overlay über dem Bild (statt im Textfluss darunter), da das
   Bild jetzt den kompletten Rahmen ausfüllt (aspect-ratio, s.o.). */
.blog-image-caption {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    z-index: 2;
    margin: 0;
    background: rgba(22, 18, 15, 0.72);
    color: #fff;
    font-size: 0.7rem;
    line-height: 1.3;
    padding: 0.3rem 0.7rem;
    border-radius: 20px;
}

/* Mehrere Bilder: Slider mit Pfeilen + Auto-Slide statt Thumbnail-Streifen
   (der hat den Rahmen zu voll/unruhig gemacht). Alle Bilder liegen
   übereinander, nur .is-active ist sichtbar (weicher Crossfade). */
.hero-slider {
    margin: 0.9rem;
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
}

.hero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.5s ease;
    display: block;
}

.hero-slide.is-active {
    opacity: 1;
}

.hero-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #16120F;
    border: 2.5px solid #16120F;
    border-radius: 50%;
    box-shadow: 2px 2px 0 #16120F;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.hero-slider-arrow:hover {
    background: var(--accent1);
    color: #fff;
    transform: translateY(-50%) translate(-1px, -1px);
    box-shadow: 3px 3px 0 #16120F;
}

.hero-slider-prev {
    left: 0.6rem;
}

.hero-slider-next {
    right: 0.6rem;
}

/* ── Titel-Bereich (Pill / H1 / Dek / Meta) ──────────────────────────────── */
.post-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: #fff;
    border: 2px solid #16120F;
    border-radius: 20px;
    font-family: 'archivo', sans-serif;
    font-weight: 800;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.3rem 0.75rem;
    margin-bottom: 0.6rem;
}

.post-pill-red {
    background: var(--highlight);
    color: #fff;
    border-color: #16120F;
}

.blog-teaser .content-title h1.p-name {
    font-size: clamp(2rem, 4.2vw, 3.2rem);
    color: var(--text-dark);
    text-shadow: -2px -2px 0 var(--accent2), 2px -2px 0 var(--accent2), -2px 2px 0 var(--accent2), 2px 2px 0 var(--accent2);
    margin-top: 0;
    line-height: 1.05;
}

.blog-teaser .content-title h1.p-name a {
    text-decoration: none;
    color: inherit;
}

.blog-teaser .content-title h2 {
    font-family: 'archivo', sans-serif;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 700;
    font-size: 1.1rem;
    margin-top: 0.4rem;
    color: var(--text-dark);
}

.blog-teaser .dek {
    font-family: 'archivo', sans-serif;
    font-size: 1.05rem;
    color: #4a4640;
    margin-top: 0.75rem;
}

.blog-teaser .hero-sub-meta {
    font-family: 'archivo', sans-serif;
    margin-top: 0.9rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #7a746a;
}

/* ── Karten-System: EIN Stil für Event, Gast, Video, Teilen, Standort-Widgets ──
   Statt einer schmalen, formellen Kopfleiste (weiterhin für die Video-Card
   genutzt, siehe .card-head) bekommen die Sidebar-Cards ein lockeres,
   schräg sitzendes Eyebrow-Badge (.comic-eyebrow, wiederverwendet aus
   comic.css) + eine große Bangers-Überschrift (.card-title) direkt in der
   Card-Body-Fläche – luftiger und verspielter statt "amtlich". */
.card {
    background: #fff;
    border: 3px solid #16120F;
    border-radius: 18px;
    box-shadow: 5px 5px 0 #16120F;
    overflow: hidden;
    margin-bottom: 1.6rem;
}

.card-head {
    background: var(--accent1);
    color: #fff;
    font-family: 'archivo', sans-serif;
    font-weight: 800;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.65rem 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    border-bottom: 3px solid #16120F;
}

.card-head.head-red {
    background: var(--highlight);
}

.card-body {
    padding: 1.5rem 1.4rem;
}

.card-title {
    font-family: 'bangers', sans-serif;
    font-weight: 400;
    font-size: 1.7rem;
    line-height: 1.05;
    color: #16120F;
    margin: 0.6rem 0 1.1rem;
}

.card-body .comic-eyebrow {
    margin-bottom: 0.7rem;
}

.guest-card .comic-eyebrow {
    margin-bottom: 1rem;
}

/* Sidebar-Stack (neben dem Artikel, siehe .post-content-grid) */
.post-aside {
    position: sticky;
    top: 6rem;
    display: flex;
    flex-direction: column;
}

.post-aside .card {
    margin-bottom: 1.5rem;
}

/* Buttons innerhalb der Cards: eigener Comic-Button-Stil (unabhängig vom
   generischen .btn/.btn-primary, damit Termin-merken/Route/Website etc.
   unabhängig von den globalen Theme-Farbeinstellungen konsistent bleiben) */
.post-aside .btn,
.video-card .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    font-family: 'archivo', sans-serif;
    font-weight: 800;
    font-size: 1rem;
    padding: 0.85rem 1.3rem;
    border: 3px solid #16120F;
    border-radius: 12px;
    text-decoration: none;
    box-shadow: 4px 4px 0 #16120F;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.post-aside .btn:hover,
.video-card .btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 #16120F;
    color: inherit;
}

.post-aside .btn:active,
.video-card .btn:active {
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0 #16120F;
}

.btn-red {
    background: var(--highlight);
    color: #fff !important;
}

.btn-outline {
    background: #fff;
    color: #16120F !important;
}

.btn-block {
    width: 100%;
}

/* Event-Infos-Card: große Datumsbox wie im Event-Panel auf der Startseite
   (.event-date/.event-day/.event-month kommen aus event-list.css, hier
   1:1 wiederverwendet) + lockere Badges statt steifer Label/Value-Zeilen. */
.event-highlight {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    margin-bottom: 1.1rem;
}

.event-highlight-meta {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.event-meta-badge {
    font-size: 0.95rem;
    font-weight: 700;
}

.event-meta-badge a {
    color: var(--accent1);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.event-more-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent1);
    text-decoration: underline;
    text-underline-offset: 2px;
    margin-bottom: 1.1rem;
}

.event-info-card .event-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.9rem;
}

/* Gast-Card */
.guest-card .guest-top {
    display: flex;
    gap: 0.9rem;
    align-items: center;
    margin-bottom: 0.9rem;
}

.guest-avatar {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    border: 3px solid #16120F;
    box-shadow: 3px 3px 0 #16120F;
    object-fit: cover;
    flex-shrink: 0;
}

.guest-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent2);
    color: #16120F;
    font-family: 'bangers', sans-serif;
    font-size: 2.1rem;
}

.guest-name {
    font-family: 'bangers', sans-serif;
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1.05;
    color: #16120F;
    margin: 0;
}

.guest-role {
    font-size: 0.8rem;
    color: #7a746a;
    font-weight: 600;
}

.guest-bio {
    font-size: 0.85rem;
    color: #4a4640;
    margin-bottom: 0.9rem;
}

.tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.guest-card .tag {
    background: var(--secondary-bg);
    border: 1.5px solid #16120F;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.25rem 0.65rem;
}

.icon-link {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #16120F;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--secondary-bg);
    color: #16120F;
    text-decoration: none;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.icon-link:hover {
    background: var(--accent1);
    color: #fff;
    transform: translateY(-2px);
}

.guest-links {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.guest-links .icon-link {
    width: 48px;
    height: 48px;
    font-size: 1.2rem;
    border-width: 3px;
    box-shadow: 3px 3px 0 #16120F;
}

.guest-links .icon-link:hover {
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 #16120F;
}

.guest-cta {
    width: 100%;
}

/* Teilen-Card: größere, auffälligere Buttons als Antwort auf "Button
   müssen größer" – eigene, größere Variante statt der kleinen 32px
   Icon-Links, die z.B. bei den Gast-Social-Links weiter genügen. */
.share-buttons {
    display: flex;
    gap: 0.85rem;
}

.share-card .icon-link {
    width: 54px;
    height: 54px;
    font-size: 1.3rem;
    border-width: 3px;
    box-shadow: 3px 3px 0 #16120F;
}

.share-card .icon-link:hover {
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 #16120F;
}

.share-card button.icon-link {
    border: 3px solid #16120F;
    font: inherit;
}

/* Video-Card */
.video-card {
    margin: 1.5rem 0;
}

.video-frame {
    position: relative;
    aspect-ratio: 16/9;
    background: #000;
    cursor: pointer;
}

.video-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.65;
    display: block;
}

.video-frame .play-btn {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 58px;
    height: 58px;
    background: var(--highlight);
    border: 3px solid #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.2);
}

.video-frame .play-btn::after {
    content: "";
    border-style: solid;
    border-width: 10px 0 10px 16px;
    border-color: transparent transparent transparent #fff;
    margin-left: 3px;
}

.video-frame.is-playing {
    cursor: default;
}

.video-frame iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.video-caption {
    font-size: 0.78rem;
    color: #8a8478;
    padding: 0.7rem 1.1rem 1rem;
    margin: 0;
}

/* ── Freiform-Content-Klassen (optional im Markdown-Editor nutzbar) ─────── */
.blog-content .check-list {
    list-style: none;
    margin: 1rem 0;
    padding: 0;
    display: grid;
    gap: 0.6rem;
}

.blog-content .check-list li {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    background: var(--secondary-bg);
    border: 2px solid #16120F;
    border-radius: 8px;
    padding: 0.6rem 0.85rem;
    font-size: 0.9rem;
}

.blog-content .check-list li::before {
    content: "✓";
    background: var(--accent1);
    color: #fff;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    border: 1.5px solid #16120F;
}

.blog-content .callout {
    background: var(--accent2);
    border: 3px solid #16120F;
    border-radius: 12px;
    padding: 1rem 1.1rem;
    margin: 1.6rem 0;
}

.blog-content .callout .eyebrow {
    font-family: 'archivo', sans-serif;
    font-weight: 800;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: 0.25rem;
}

.blog-content .callout p {
    margin: 0;
    font-size: 0.9rem;
}

/* ── Related Posts: dicker Comic-Rahmen statt weichem Schatten ──────────── */
.related-posts .book-card-wrapper {
    padding: 0.5rem;
}

.related-posts .book-card {
    border: 3px solid #16120F !important;
    box-shadow: 5px 5px 0 #16120F !important;
    border-radius: 16px !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.related-posts .book-card:hover {
    transform: translate(-2px, -4px);
    box-shadow: 7px 7px 0 #16120F !important;
}

.related-posts .book-title {
    font-family: 'archivo', sans-serif;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 800;
}

@media (max-width: 600px) {
    .event-info-card .event-cta {
        flex-direction: column;
    }

    .blog-teaser .content-title h1.p-name {
        -webkit-text-stroke: 1.2px #16120F;
    }
}