/******************************************************************************
    Blog Widget
    Dieterle Programmierung
    https://www.dieterle-programmierung.de

    Version : 1.0.0

    Je Eintrag eine Kachel. Aufbau von oben nach unten:

        Kopfzeile   Ueberschrift, Datum, optionales Kennzeichen
                    und rechts der Knopf zum Ein- und Ausklappen
        Koerper     freier Text, dazwischen an beliebiger Stelle
                    Links, Bilder, Bilderfolgen und YouTube-Videos

    Ausgeklappt ist die Vorgabe. Eingeklappt bleibt nur die Kopfzeile
    mit Ueberschrift und Datum stehen.

    Die eingebetteten Teile uebernehmen das Aussehen der vorhandenen
    Bausteine: die Linkkarte kommt von linkedin-article.css und
    groups.css, das Video von youtube-showcase.css, die Bilder sind im
    gleichen Zuschnitt gehalten.

    Es werden keine fremden Server angesprochen, solange ein Video
    nicht angeklickt wird. Erst dann wird der Rahmen von YouTube
    geladen.

    Passend zu article.css (gleiche Breite 880px), linkedin-article.css,
    groups.css, talks.css, shop-teaser.css und project-widget.css
    (Dark Theme, Gold #FFC439).
******************************************************************************/


/******************************************************************************
    Design Tokens
******************************************************************************/

.Blog {

    --Accent      : #FFC439;   /* brand gold                        */
    --AccentSoft  : #ffd15f;
    --AccentGlow  : rgba(255,196,57,.20);

    --Heading     : #ffffff;
    --Text        : #e6e8eb;
    --TextMuted   : #aab0b7;

    --Surface     : #3c3f43;   /* = Seitenhintergrund               */
    --SurfaceAlt  : #474b50;   /* Kartenflaeche                     */
    --SurfaceAlt2 : #40444a;   /* Kopfzeile, Fuss                   */
    --SurfaceDeep : #2f3135;   /* Bild- und Videoflaeche            */
    --Line        : #565b61;

    --Brand       : #FFC439;   /* Farbe der Linkkarte, je Karte     */
    --YouTube     : #ff3d3d;

    /* Geometrie */
    --ListMax     : 880px;     /* = max-width von .Article          */
    --IconSize    : 40px;      /* quadratisches Zeichen links       */
    --Radius      : 14px;

    max-width   : var(--ListMax);
    margin      : 30px auto;
    padding     : 0 18px;
    color       : var(--Text);
    font-family : "Segoe UI", Arial, sans-serif;
    font-size   : 16px;
    line-height : 1.65;
}


/* Steht das Widget in einem Artikel, sitzt es schon in dessen
   Innenabstand - dann nicht ein zweites Mal einruecken. */
.Article .Blog {

    max-width : none;
    margin    : 30px 0;
    padding   : 0;
}


/******************************************************************************
    Kopf der Liste  (optional, ueber data-title und data-lead)
******************************************************************************/

.BlogTitleMain {

    margin      : 0 0 8px;
    font-size   : 28px;
    font-weight : 700;
    color       : var(--Heading);
}


.BlogLead {

    margin    : 0 0 26px;
    max-width : 70ch;
    color     : var(--TextMuted);
    font-size : 17px;
}


/******************************************************************************
    Die Kacheln
******************************************************************************/

.BlogGrid {

    display        : flex;
    flex-direction : column;
    gap            : 22px;
}


.BlogPost {

    background    : var(--SurfaceAlt);
    border        : 1px solid var(--Line);
    border-radius : var(--Radius);
    overflow      : hidden;
    box-shadow    : 0 8px 24px rgba(0,0,0,.30);
    transition    : border-color .2s, box-shadow .2s;
}


.BlogPost:hover {

    border-color : #6a7078;
    box-shadow   : 0 12px 30px rgba(0,0,0,.38);
}


/* Die Kachel, in der der Knopf gerade den Fokus hat. */
.BlogPost:focus-within {

    border-color : var(--Accent);
    box-shadow   : 0 12px 30px rgba(0,0,0,.38), 0 0 14px var(--AccentGlow);
}


/******************************************************************************
    Kopfzeile der Kachel
    Ueberschrift und Datum links, Knopf rechts. Die Flaeche des Knopfes
    liegt ueber der ganzen Kopfzeile, damit sich eine Kachel auch mit
    einem Griff auf die Ueberschrift schliessen laesst.
******************************************************************************/

.BlogHead {

    position      : relative;
    display       : flex;
    align-items   : flex-start;
    gap           : 16px;
    padding       : 18px 20px;
    background    : var(--SurfaceAlt2);
    border-bottom : 1px solid var(--Line);
}


/* Eingeklappt gibt es nichts mehr darunter - dann auch keine Linie. */
.BlogPostClosed .BlogHead {

    border-bottom-color : transparent;
}


.BlogHeadText {

    flex      : 1 1 auto;
    min-width : 0;
}


.BlogTitle {

    margin      : 0;
    font-size   : 21px;
    font-weight : 700;
    line-height : 1.3;
    color       : var(--Heading);
}


/* Ueberschrift mit eigenem Link (data-link am Eintrag). Der Link liegt
   ueber der Flaeche des Knopfes, sonst waere er nicht erreichbar. */
.BlogTitle a {

    position        : relative;
    z-index         : 2;
    color           : inherit;
    text-decoration : none;
    border          : 0;
}


.BlogTitle a:hover {

    color : var(--AccentSoft);
}


.BlogMeta {

    display     : flex;
    flex-wrap   : wrap;
    align-items : center;
    gap         : 10px;
    margin-top  : 7px;
    font-size   : 14px;
    color       : var(--Accent);
}


.BlogDate {

    display       : inline-flex;
    align-items   : center;
    gap           : 7px;
    padding       : 3px 10px;
    background    : rgba(255,196,57,.12);
    border        : 1px solid rgba(255,196,57,.25);
    border-radius : 8px;
    white-space   : nowrap;
}


.BlogBadge {

    display        : inline-flex;
    align-items    : center;
    padding        : 3px 10px;
    background     : rgba(255,255,255,.07);
    border         : 1px solid var(--Line);
    border-radius  : 8px;
    color          : var(--TextMuted);
    font-size      : 12.5px;
    font-weight    : 600;
    letter-spacing : .4px;
    text-transform : uppercase;
}


.BlogTags {

    color     : var(--TextMuted);
    font-size : 13.5px;
}


/******************************************************************************
    Knopf zum Ein- und Ausklappen
    Der Knopf traegt die Aufschrift fuer Vorleseprogramme und liegt
    zugleich als unsichtbare Flaeche ueber der ganzen Kopfzeile.
******************************************************************************/

.BlogToggle {

    flex            : 0 0 auto;
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    gap             : 8px;
    height          : 34px;
    padding         : 0 12px;
    background      : rgba(255,255,255,.06);
    border          : 1px solid var(--Line);
    border-radius   : 9px;
    color           : var(--TextMuted);
    font-family     : inherit;
    font-size       : 13px;
    font-weight     : 600;
    line-height     : 1;
    cursor          : pointer;
    transition      : color .2s, border-color .2s, background .2s;
}


.BlogToggle:hover,
.BlogToggle:focus-visible {

    background   : rgba(255,196,57,.14);
    border-color : var(--Accent);
    color        : var(--Accent);
    outline      : none;
}


/* Die Flaeche des Knopfes reicht ueber die ganze Kopfzeile. Zeichen und
   Aufschrift bleiben rechts stehen, wo sie stehen. */
.BlogToggle::before {

    content  : "";
    position : absolute;
    inset    : 0;
}


.BlogToggleText {

    position : relative;
}


.BlogToggleIcon {

    position      : relative;
    display       : block;
    width         : 11px;
    height        : 11px;
    margin-top    : -3px;
    border-right  : 2px solid currentColor;
    border-bottom : 2px solid currentColor;
    transform     : rotate(-135deg);   /* Pfeil nach oben = zuklappen   */
    transition    : transform .25s;
}


.BlogPostClosed .BlogToggleIcon {

    margin-top : -5px;
    transform  : rotate(45deg);        /* Pfeil nach unten = aufklappen */
}


/******************************************************************************
    Koerper der Kachel
    Die Hoehe faehrt ueber grid-template-rows, damit auch Inhalte mit
    unbekannter Hoehe (Bilder, Video) sauber auf- und zufahren.
******************************************************************************/

.BlogBody {

    display            : grid;
    grid-template-rows : 1fr;
    transition         : grid-template-rows .3s ease;
}


.BlogPostClosed .BlogBody {

    grid-template-rows : 0fr;
}


.BlogBodyInner {

    min-height : 0;
    overflow   : hidden;
}


.BlogText {

    padding : 20px;
}


.BlogText > :first-child { margin-top    : 0; }
.BlogText > :last-child  { margin-bottom : 0; }


.BlogText p {

    margin : 0 0 15px;
}


.BlogText h3 {

    margin      : 24px 0 10px;
    font-size   : 18px;
    font-weight : 600;
    color       : #d7dbdf;
}


.BlogText h4 {

    margin      : 20px 0 8px;
    font-size   : 16px;
    font-weight : 600;
    color       : #d7dbdf;
}


.BlogText ul,
.BlogText ol {

    margin  : 0 0 15px;
    padding : 0 0 0 24px;
}


.BlogText li {

    margin : 5px 0;
}


.BlogText strong {

    color : #f4f6f8;
}


.BlogText hr {

    margin     : 24px 0;
    border     : 0;
    border-top : 1px solid var(--Line);
}


/* Verweise mitten im Text - dezent. Die Karten sind die auffaelligen
   Verweise. */
.BlogText a {

    color           : var(--Accent);
    text-decoration : none;
    border-bottom   : 1px solid rgba(255,196,57,.35);
}


.BlogText a:hover {

    color               : var(--AccentSoft);
    border-bottom-color : var(--AccentSoft);
}


.BlogText :not(pre) > code {

    padding       : 2px 6px;
    background    : var(--SurfaceDeep);
    border        : 1px solid var(--Line);
    border-radius : 5px;
    font-family   : "Cascadia Code", Consolas, "Courier New", monospace;
    font-size     : .88em;
    color         : #f0b86e;
}


/******************************************************************************
    Linkkarte im Text
    Gleicher Zuschnitt wie in linkedin-article.css und groups.css:
    farbiger Streifen links, quadratisches Zeichen, Name, Pfeil rechts.
    Die Farbe kommt ueber --Brand aus dem Netzwerk.
******************************************************************************/

.BlogLink {

    margin : 20px 0;
}


.BlogLink:first-child { margin-top    : 0; }
.BlogLink:last-child  { margin-bottom : 0; }


.BlogLinkCard {

    position        : relative;
    display         : flex;
    align-items     : center;
    gap             : 12px;
    max-width       : 100%;
    padding         : 10px 16px 10px 14px;
    background      : var(--SurfaceAlt2);
    border          : 1px solid var(--Line);
    border-radius   : 12px;
    overflow        : hidden;
    text-decoration : none;
    color           : inherit;
    box-shadow      : 0 6px 16px rgba(0,0,0,.28);
    transition      : transform .2s, box-shadow .2s, border-color .2s, background .2s;
}


/* Nicht die goldene Unterlinie von article.css erben. */
.BlogText .BlogLinkCard,
.Article .BlogLinkCard {

    border-bottom : 1px solid var(--Line);
}


.BlogLinkCard:hover,
.BlogLinkCard:focus-visible {

    transform    : translateY(-3px);
    background   : #4a4e54;
    border-color : var(--Accent);
    box-shadow   : 0 12px 24px rgba(0,0,0,.40), 0 0 14px var(--AccentGlow);
    outline      : none;
}


/* Schmaler Farbstreifen links in der Farbe des Netzwerks. */
.BlogLinkCard::before {

    content       : "";
    position      : absolute;
    left          : 0;
    top           : 8px;
    bottom        : 8px;
    width         : 3px;
    border-radius : 0 3px 3px 0;
    background    : var(--Brand);
    opacity       : .85;
}


.BlogLinkIcon {

    flex            : 0 0 auto;
    display         : flex;
    align-items     : center;
    justify-content : center;
    width           : var(--IconSize);
    height          : var(--IconSize);
    border-radius   : 10px;
    background      : var(--Brand);
    color           : #ffffff;
    font-size       : 17px;
    font-weight     : 700;
    box-shadow      : 0 4px 12px rgba(0,0,0,.35);
    transition      : transform .2s;
}


.BlogLinkCard:hover .BlogLinkIcon {

    transform : scale(1.06);
}


.BlogLinkIcon svg {

    width  : 21px;
    height : 21px;
    fill   : currentColor;
}


.BlogLinkBody {

    flex      : 1 1 auto;
    min-width : 0;
}


.BlogLinkName {

    display     : block;
    font-size   : 16px;
    font-weight : 600;
    line-height : 1.35;
    color       : var(--Heading);
}


.BlogLinkCard:hover .BlogLinkName {

    color : var(--AccentSoft);
}


.BlogLinkText {

    display     : block;
    margin-top  : 2px;
    font-size   : 14px;
    line-height : 1.45;
    color       : var(--TextMuted);
}


.BlogLinkGo {

    flex        : 0 0 auto;
    font-size   : 18px;
    line-height : 1;
    color       : var(--TextMuted);
    transition  : transform .2s, color .2s;
}


.BlogLinkCard:hover .BlogLinkGo {

    color     : var(--Accent);
    transform : translateX(3px);
}


/******************************************************************************
    Video im Text
    Aufbau wie youtube-showcase.css: eigener Rahmen, Titel, dunkle
    Buehne. Der Rahmen von YouTube wird erst nach dem Anklicken geladen,
    bis dahin steht dort eine Flaeche mit dem roten Knopf.
******************************************************************************/

.BlogVideo {

    margin        : 22px 0;
    background    : linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
    border        : 1px solid rgba(255,255,255,.10);
    border-radius : 16px;
    overflow      : hidden;
    box-shadow    : 0 10px 28px rgba(0,0,0,.35);
}


.BlogVideo:first-child { margin-top    : 0; }
.BlogVideo:last-child  { margin-bottom : 0; }


.BlogVideoTitle {

    padding     : 14px 18px 4px;
    font-size   : 18px;
    font-weight : 600;
    color       : var(--Heading);
}


.BlogVideoText {

    padding     : 0 18px 12px;
    font-size   : 14.5px;
    line-height : 1.5;
    color       : #c7ccd2;
}


.BlogVideoStage {

    position     : relative;
    display      : block;
    width        : 100%;
    padding      : 0;
    aspect-ratio : 16 / 9;
    background   : var(--SurfaceDeep);
    border       : 0;
    overflow     : hidden;
    cursor       : pointer;
}


.BlogVideoStage img {

    display       : block;
    width         : 100%;
    height        : 100%;
    object-fit    : cover;
    border        : 0;
    border-radius : 0;
    transition    : transform .3s, filter .3s;
}


.BlogVideoStage:hover img {

    transform : scale(1.03);
    filter    : brightness(.85);
}


.BlogVideoStage:focus-visible {

    outline        : 2px solid var(--Accent);
    outline-offset : -2px;
}


/* Roter Knopf in der Mitte. */
.BlogVideoPlay {

    position        : absolute;
    left            : 50%;
    top             : 50%;
    transform       : translate(-50%,-50%);
    display         : flex;
    align-items     : center;
    justify-content : center;
    width           : 74px;
    height          : 52px;
    border-radius   : 14px;
    background      : var(--YouTube);
    box-shadow      : 0 10px 24px rgba(0,0,0,.45);
    transition      : transform .2s, background .2s, box-shadow .2s;
}


.BlogVideoPlay::before {

    content       : "";
    width         : 0;
    height        : 0;
    margin-left   : 4px;
    border-left   : 17px solid #ffffff;
    border-top    : 11px solid transparent;
    border-bottom : 11px solid transparent;
}


.BlogVideoStage:hover .BlogVideoPlay,
.BlogVideoStage:focus-visible .BlogVideoPlay {

    transform  : translate(-50%,-50%) scale(1.08);
    background : #ff1f1f;
    box-shadow : 0 14px 30px rgba(0,0,0,.5), 0 0 18px rgba(255,61,61,.35);
}


/* Hinweis unten in der Flaeche, solange nichts geladen ist. */
.BlogVideoHint {

    position       : absolute;
    left           : 14px;
    bottom         : 12px;
    padding        : 4px 10px;
    background     : rgba(0,0,0,.55);
    border-radius  : 8px;
    color          : #e6e8eb;
    font-size      : 12.5px;
    pointer-events : none;
}


.BlogVideoFrame {

    display      : block;
    width        : 100%;
    aspect-ratio : 16 / 9;
    border       : 0;
}


.BlogVideoFoot {

    display         : flex;
    justify-content : space-between;
    align-items     : center;
    flex-wrap       : wrap;
    gap             : 10px;
    padding         : 12px 18px;
    background      : #35373b;
    color           : var(--TextMuted);
    font-size       : 13.5px;
}


.BlogVideoFoot a {

    color           : var(--YouTube);
    font-weight     : 600;
    text-decoration : none;
    border          : 0;
}


.BlogVideoFoot a:hover {

    color : #ff7a7a;
}


/******************************************************************************
    Einzelnes Bild im Text
******************************************************************************/

.BlogFigure {

    margin        : 22px 0;
    background    : linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
    border        : 1px solid rgba(255,255,255,.10);
    border-radius : 16px;
    overflow      : hidden;
    box-shadow    : 0 10px 28px rgba(0,0,0,.35);
}


.BlogFigure:first-child { margin-top    : 0; }
.BlogFigure:last-child  { margin-bottom : 0; }


.BlogFigureStage {

    display    : block;
    background : var(--SurfaceDeep);
}


.BlogFigureStage img {

    display       : block;
    width         : 100%;
    height        : auto;
    border        : 0;
    border-radius : 0;
}


/* Das Bild ist ein Link - dann Lupenwirkung wie beim Video. */
a.BlogFigureStage img {

    transition : transform .3s, filter .3s;
}


a.BlogFigureStage:hover img {

    transform : scale(1.02);
    filter    : brightness(.9);
}


.BlogCaption {

    padding     : 11px 18px;
    background  : #35373b;
    color       : var(--TextMuted);
    font-size   : 13.5px;
    line-height : 1.5;
}


.BlogCaption:empty {

    display : none;
}


/******************************************************************************
    Bilderfolge (Karussell)
    Die Bilder liegen uebereinander und werden ueberblendet. Weiter geht
    es von allein, ausserdem ueber die Pfeile, die Punkte, die
    Pfeiltasten und Wischen. Unter dem Zeiger und bei Fokus haelt der
    Lauf an, ebenso wenn die Kachel eingeklappt oder ausser Sicht ist.
******************************************************************************/

.BlogGallery {

    position      : relative;
    margin        : 22px 0;
    background    : linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
    border        : 1px solid rgba(255,255,255,.10);
    border-radius : 16px;
    overflow      : hidden;
    box-shadow    : 0 10px 28px rgba(0,0,0,.35);
}


.BlogGallery:first-child { margin-top    : 0; }
.BlogGallery:last-child  { margin-bottom : 0; }


.BlogSlideStage {

    position     : relative;
    aspect-ratio : var(--Ratio, 16 / 9);
    background   : var(--SurfaceDeep);
    touch-action : pan-y;
}


.BlogSlide {

    position   : absolute;
    inset      : 0;
    opacity    : 0;
    visibility : hidden;
    transition : opacity .5s ease;
}


.BlogSlideActive {

    opacity    : 1;
    visibility : visible;
}


/* Traeger des Bildes - span, oder a, wenn das Bild ein Link ist. */
.BlogSlidePicture,
.BlogSlide img {

    display : block;
    width   : 100%;
    height  : 100%;
}


.BlogSlide img {

    object-fit    : contain;
    border        : 0;
    border-radius : 0;
}


a.BlogSlidePicture img {

    transition : transform .3s, filter .3s;
}


a.BlogSlidePicture:hover img {

    transform : scale(1.02);
    filter    : brightness(.9);
}


/* data-fit="cover" - das Bild fuellt die Flaeche ganz aus, alle Bilder
   sind dann gleich zugeschnitten. */
.BlogFit .BlogSlide img,
.BlogFit .BlogFigureStage img {

    height     : 100%;
    object-fit : cover;
}


.BlogFit .BlogFigureStage {

    aspect-ratio : var(--Ratio, 16 / 9);
}


/******************************************************************************
    Pfeile links und rechts
******************************************************************************/

.BlogNav {

    position        : absolute;
    top             : 50%;
    transform       : translateY(-50%);
    display         : flex;
    align-items     : center;
    justify-content : center;
    width           : 40px;
    height          : 40px;
    background      : rgba(0,0,0,.45);
    border          : 1px solid rgba(255,255,255,.16);
    border-radius   : 50%;
    color           : #ffffff;
    font-family     : inherit;
    font-size       : 19px;
    line-height     : 1;
    cursor          : pointer;
    opacity         : 0;
    transition      : opacity .2s, background .2s, border-color .2s, transform .2s;
}


.BlogPrev { left  : 12px; }
.BlogNext { right : 12px; }


.BlogGallery:hover .BlogNav,
.BlogGallery:focus-within .BlogNav {

    opacity : 1;
}


.BlogNav:hover,
.BlogNav:focus-visible {

    background   : rgba(255,196,57,.85);
    border-color : var(--Accent);
    color        : #23262a;
    opacity      : 1;
    outline      : none;
}


.BlogPrev:hover { transform : translateY(-50%) translateX(-2px); }
.BlogNext:hover { transform : translateY(-50%) translateX(2px);  }


/* Auf Geraeten ohne Zeiger sind die Pfeile immer sichtbar. */
@media (hover: none) {

    .BlogNav { opacity : .9; }
}


/******************************************************************************
    Punkte und Laufbalken
******************************************************************************/

.BlogDots {

    display         : flex;
    align-items     : center;
    justify-content : center;
    gap             : 9px;
    padding         : 11px 14px;
    background      : #35373b;
}


.BlogDot {

    width         : 9px;
    height        : 9px;
    padding       : 0;
    background    : rgba(255,255,255,.28);
    border        : 0;
    border-radius : 50%;
    cursor        : pointer;
    transition    : background .2s, transform .2s;
}


.BlogDot:hover,
.BlogDot:focus-visible {

    background : var(--AccentSoft);
    transform  : scale(1.2);
    outline    : none;
}


.BlogDotActive {

    background : var(--Accent);
    transform  : scale(1.25);
}


.BlogCount {

    margin-left          : 6px;
    color                : var(--TextMuted);
    font-size            : 12.5px;
    font-variant-numeric : tabular-nums;
}


/* Duenner Balken oben, der die Zeit bis zum naechsten Bild zeigt. */
.BlogProgress {

    position         : absolute;
    left             : 0;
    top              : 0;
    width            : 100%;
    height           : 3px;
    background       : var(--Accent);
    transform        : scaleX(0);
    transform-origin : left center;
    opacity          : .85;
    pointer-events   : none;
}


.BlogProgressRun {

    transform  : scaleX(1);
    transition : transform linear;
}


/******************************************************************************
    Fuss der Kachel  (optional, ueber data-footer am Eintrag)
******************************************************************************/

.BlogFoot {

    padding    : 12px 20px;
    background : var(--SurfaceAlt2);
    border-top : 1px solid var(--Line);
    color      : var(--TextMuted);
    font-size  : 13.5px;
}


.BlogFoot a {

    color           : var(--Accent);
    text-decoration : none;
    border-bottom   : 1px solid rgba(255,196,57,.35);
}


/******************************************************************************
    Ruhige Darstellung
    Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt
    keinen selbsttaetigen Bildwechsel und keine Uebergaenge.
******************************************************************************/

@media (prefers-reduced-motion: reduce) {

    .BlogBody,
    .BlogSlide,
    .BlogToggleIcon,
    .BlogLinkCard,
    .BlogNav {

        transition : none;
    }

    .BlogProgress { display : none; }
}


/******************************************************************************
    Schmale Anzeigen
******************************************************************************/

@media (max-width: 600px) {

    .Blog {

        --IconSize : 36px;

        padding : 0 12px;
    }

    .BlogHead {

        gap     : 10px;
        padding : 14px;
    }

    .BlogTitle      { font-size : 18px; }
    .BlogTitleMain  { font-size : 23px; }
    .BlogText       { padding   : 16px 14px; }
    .BlogFoot       { padding   : 10px 14px; }
    .BlogVideoTitle { font-size : 16px; }

    /* Auf schmalen Anzeigen nur das Zeichen, kein Wort. */
    .BlogToggleText { display : none; }

    .BlogToggle {

        width   : 34px;
        padding : 0;
    }

    .BlogNav {

        width     : 34px;
        height    : 34px;
        font-size : 16px;
    }

    .BlogPrev { left  : 8px; }
    .BlogNext { right : 8px; }
}


/******************************************************************************
    Druck - helle Seite wie in article.css, alle Kacheln offen
******************************************************************************/

@media print {

    .Blog {

        --Heading     : #111111;
        --Text        : #222222;
        --TextMuted   : #555555;

        --SurfaceAlt  : #ffffff;
        --SurfaceAlt2 : #ffffff;
        --SurfaceDeep : #f6f7f9;
        --Line        : #cccccc;
    }

    .BlogPost {

        box-shadow   : none;
        break-inside : avoid;
    }

    /* Eingeklapptes wird zum Drucken geoeffnet - sonst fehlt es im PDF. */
    .BlogBody,
    .BlogPostClosed .BlogBody {

        display            : block;
        grid-template-rows : none;
    }

    .BlogBodyInner { overflow : visible; }

    .BlogToggle,
    .BlogNav,
    .BlogDots,
    .BlogProgress,
    .BlogVideoPlay,
    .BlogVideoHint,
    .BlogLinkGo {

        display : none !important;
    }

    .BlogText a {

        color         : #000000;
        border-bottom : 0;
    }

    .BlogLinkCard,
    .BlogVideo,
    .BlogFigure,
    .BlogGallery {

        background   : #ffffff;
        border       : 1px solid #cccccc;
        box-shadow   : none;
        break-inside : avoid;
    }

    .BlogCaption,
    .BlogVideoFoot {

        background : #f6f7f9;
        color      : #555555;
    }

    /* Gedruckt wird nur das gerade sichtbare Bild der Folge. */
    .BlogSlide {

        display : none;
    }

    .BlogSlideActive {

        display    : block;
        position   : static;
        opacity    : 1;
        visibility : visible;
    }

    .BlogSlideStage {

        aspect-ratio : auto;
    }
}


/******************************************************************************
    End of File
******************************************************************************/