/* EuroPilot Connect, Blog (Markenauftritt 2026-09). Grundlage in /assets/marke.css.
   Erzeugt von scripts/build-blog.mjs, Artikelinhalt aus content/blog/*.md. */

/* ── Artikelkopf ─────────────────────────────────────────────────── */
.artikelkopf{background:var(--nacht);color:#fff;padding-block:clamp(64px,9vw,130px) clamp(40px,5vw,70px)}
.artikelkopf h1{margin-top:22px;font-weight:300;font-size:clamp(36px,4.8vw,68px);line-height:1.04;letter-spacing:-.02em;text-wrap:balance}
.artikelkopf .meta{margin-top:24px;padding-top:18px;border-top:1px solid var(--linie-hell);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--hell-3)}

/* ── Artikeltext ─────────────────────────────────────────────────── */
.artikel-text{padding-block:clamp(48px,6vw,88px) clamp(40px,5vw,72px);font-size:clamp(16.5px,1.15vw,18px);line-height:1.78;color:var(--tinte-2)}
.artikel-text > * + *{margin-top:1.15em}
.artikel-text h2{margin-top:2.2em;font-weight:300;font-size:clamp(28px,2.6vw,38px);line-height:1.15;letter-spacing:-.012em;color:var(--tinte)}
.artikel-text h3{margin-top:1.9em;font-weight:700;font-size:18.5px;line-height:1.35;color:var(--tinte)}
.artikel-text strong{color:var(--tinte);font-weight:700}
.artikel-text a{color:var(--tinte);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.artikel-text a:hover{color:var(--blau-tief)}
.artikel-text ul,.artikel-text ol{padding-left:0;list-style:none}
.artikel-text ul li,.artikel-text ol li{position:relative;padding-left:26px}
.artikel-text li + li{margin-top:.5em}
.artikel-text ul li::before{content:"";position:absolute;left:4px;top:.74em;width:6px;height:6px;border:1px solid var(--tinte-2);transform:rotate(45deg)}
.artikel-text ol{counter-reset:p}
.artikel-text ol li{counter-increment:p}
.artikel-text ol li::before{content:counter(p,decimal-leading-zero);position:absolute;left:0;top:.2em;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--tinte-3)}
.artikel-text blockquote{margin-inline:0;padding:4px 0 4px 24px;border-left:1px solid var(--tinte);font-weight:300;font-size:1.22em;line-height:1.5;color:var(--tinte)}
.artikel-text hr{border:0;border-top:1px solid var(--linie);margin-block:2.4em}
.artikel-text code{font-size:.88em;background:var(--papier);padding:.1em .35em}
.artikel-text img{max-width:100%;height:auto}
/* "Kurz gesagt" als Merkkasten mit Haarlinien statt blauer Fläche */
.artikel-text p.tldr{padding:20px 0;border-top:1px solid var(--tinte);border-bottom:1px solid var(--linie);font-size:1.04em;line-height:1.65;color:var(--tinte)}
.artikel-text p.tldr strong:first-child{display:block;margin-bottom:6px;font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--tinte-2)}
/* Tabellen */
.table-wrap{overflow-x:auto;margin-block:1.8em;border-top:1px solid var(--tinte)}
.table-wrap table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.55}
.table-wrap th,.table-wrap td{text-align:left;vertical-align:top;padding:12px 16px 12px 0;border-bottom:1px solid var(--linie)}
.table-wrap th{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--tinte-3)}
.table-wrap td{color:var(--tinte-2)}
/* Handlungsaufforderung im Text */
.artikel-text .cta{display:inline-flex;align-items:center;min-height:50px;padding:0 24px;border-radius:999px;background:var(--blau);color:#fff;font-weight:700;font-size:15px;text-decoration:none}
.artikel-text .cta:hover{background:var(--blau-tief);color:#fff}
/* App-Bild im Artikel */
.product-shot{margin-block:2.2em}
.product-shot .epc-app-shot > a::after{display:none}
.product-shot .bild-hinweis{margin-top:14px;font-size:13px;color:var(--tinte-3)}
/* Weiterlesen */
.related{margin-top:clamp(56px,6vw,88px) !important;padding-top:24px;border-top:1px solid var(--tinte)}
.related h2{margin-top:0 !important;font-size:11.5px !important;font-weight:700 !important;letter-spacing:.18em;text-transform:uppercase;color:var(--tinte-2) !important;line-height:1.3 !important}
.related ul{margin-top:14px}
.related ul li{padding:12px 0 12px 26px;border-bottom:1px solid var(--linie)}
.related ul li + li{margin-top:0}
.related ul li::before{top:1.3em}
.related ul a{text-decoration:none;font-weight:600}
.related > p{margin-top:22px;font-size:14px;color:var(--tinte-3)}

/* ── Übersicht ───────────────────────────────────────────────────── */
.blog-liste{padding-block:clamp(56px,7vw,110px) clamp(80px,9vw,140px)}
.blog-liste .posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(40px,4vw,64px) clamp(20px,2.4vw,40px);list-style:none;margin:0;padding:0}
.post{display:flex;flex-direction:column;border-top:1px solid var(--tinte);padding-top:18px}
.post > a{display:block;overflow:hidden;background:var(--papier);margin-bottom:18px}
/* Titelbilder tragen ihren Titel im Bild und sind alle 1200 × 630. Deshalb
   festes Format UND height:auto: sonst gewinnt die Höhenangabe 630 aus dem
   HTML, das Bild wird hochkant und der Titel im Bild abgeschnitten (Tim, 23.09.). */
.post img{width:100%;height:auto;aspect-ratio:1200 / 630;object-fit:cover;display:block;transition:transform 1.1s var(--weich)}
.post:hover img{transform:scale(1.035)}
.post .body{display:flex;flex-direction:column;gap:10px;flex:1}
.post h2{margin:0;font-weight:300;font-size:clamp(21px,1.7vw,25px);line-height:1.22;letter-spacing:-.01em}
.post h2 a{text-decoration:none;color:var(--tinte)}
.post h2 a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.post p{margin:0;font-size:14.5px;line-height:1.6;color:var(--tinte-2)}
.post time{margin-top:auto;padding-top:8px;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--tinte-3)}
/* /blog/languages.css kommt NACH diesem Stylesheet und setzt .posts auf
   "so viele 300-px-Spalten wie passen" sowie Silbentrennung in den Titeln.
   Deshalb hier mit .blog-liste davor, das wiegt schwerer. */
.blog-liste .post h2{overflow-wrap:normal;hyphens:manual}
@media (max-width:1000px){.blog-liste .posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.blog-liste .posts{grid-template-columns:1fr}.blog-liste .post h2{overflow-wrap:break-word;hyphens:auto}}