/* Statische Seiten unter /einblicke/ (Blog aus dem Akquise-Tool). Abschnitte, Abstände, Ränder und Titel kommen
   aus dem Gestaltungssystem der Seite (.band, .wrap, .inner, .augenbraue, .titel-1, .einleitung, .karte). Hier stehen
   nur Ergänzungen für Karten, Artikeltext und Menü, ohne eigene Abschnittsabstände. Die Vorlage lädt diese Datei
   nach allen Stilen der Seite (tools/seo-build.mjs). Bei Änderungen seo-build laufen lassen (Version im Link). */

/* Menüs sind fest im HTML und erst nach dem Antippen sichtbar (assets/js/einblicke.js) */
.menue[hidden],.menue-alt[hidden]{display:none}

/* Kopf: Pfad und Datum unter dem Titel */
.eb-pfad{display:flex;flex-wrap:wrap;gap:8px}
.eb-pfad a{color:inherit}
/* Handy: Tippfläche des Pfads mindestens 44 px, Optik unverändert */
@media(max-width:767px){.eb-pfad a{display:inline-flex;align-items:center;min-height:44px;margin:-13px 0}}
.eb-meta{margin:20px 0 0}
.einleitung a{white-space:nowrap}

/* Übersicht: Karten wie die Musterprojekte (weiss, Schatten, ganz antippbar) */
.eb-liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.eb-karte{display:flex;flex-direction:column;height:100%;overflow:hidden}
.eb-karte .karte-link{text-decoration:none}
@media(hover:hover){.eb-karte:hover .karte-link{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}}
.eb-karte-bild{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--bg-papier-tief)}
.eb-karte-bild img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.eb-karte-text{display:flex;flex-direction:column;flex:1;gap:12px;padding:28px}
.eb-karte-text .klein{margin:0}
.eb-karte-text .titel-3{margin:0}
.eb-karte-text .lesetext{flex:1;margin:0;font-size:var(--fs-2);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.eb-weiter{font-weight:600;color:var(--primaer-dunkel)}
.eb-weiter::after{content:'\00a0\2192'}
.eb-leer{margin:0}
/* Übersicht gekürzt (assets/js/einblicke.js): zwei Reihen, die dritte angeschnitten mit Verlauf, darunter «Mehr anzeigen».
   Seitlich immer Innenabstand mit gleich grossem negativem Rand (Karten bleiben, wo sie sind), damit beim Kürzen die
   Schatten nicht abgeschnitten werden und sich nichts verschiebt. Oben kein solcher Rand: Er fiele mit dem Band zusammen. */
.eb-liste{position:relative;padding:0 16px;margin:0 -16px}
.eb-liste[data-gekuerzt="1"]{overflow:hidden}
.eb-liste[data-gekuerzt="1"]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:min(240px,70%);background:linear-gradient(to bottom,rgba(246,245,241,0),var(--bg-papier) 75%);pointer-events:none;z-index:2}
.eb-mehr{display:flex;justify-content:center;margin:8px 0 0}

/* Artikel: Text links, Titelbild rechts (mitlaufend) */
.eb-raster{display:grid;grid-template-columns:minmax(0,720px) minmax(240px,340px);justify-content:space-between;gap:64px;align-items:start}
.eb-bild{grid-column:2;grid-row:1;position:sticky;top:120px;margin:0}
.eb-bild img{display:block;width:100%;height:auto;border-radius:var(--r-2);box-shadow:var(--schatten-1)}
.eb-text{grid-column:1;grid-row:1}
.eb-text>p{margin:0 0 16px}
.eb-text>h2{margin:48px 0 16px}
.eb-kurz{padding:28px}
.eb-kurz ul{margin:0;padding-left:20px;display:grid;gap:6px;font-size:var(--fs-3);line-height:1.5;color:var(--text-lese)}
.eb-punkte{list-style:none;counter-reset:punkt;margin:24px 0;padding:0;display:grid;gap:16px}
.eb-punkte li{counter-increment:punkt;position:relative;padding:28px 28px 28px 84px}
.eb-punkte li::before{content:counter(punkt);position:absolute;left:28px;top:28px;width:36px;height:36px;border-radius:999px;background:var(--akzent-limette);color:var(--tinte);font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:17px;line-height:36px;text-align:center}
.eb-punkte h3{margin:6px 0 8px}
.eb-punkte p{margin:0}
.eb-text>.eb-autor{margin-top:48px;padding-top:24px;border-top:1px solid var(--linie)}
.eb-text>:last-child{margin-bottom:0}
.eb-zurueck a{font-weight:600}
.eb-zurueck a::before{content:'\2190\00a0'}

@media(max-width:1100px){
 .eb-liste{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
 .eb-raster{grid-template-columns:minmax(0,1fr);gap:32px}
 .eb-bild,.eb-text{grid-column:1;grid-row:auto;position:static}
 /* Auf schmalen Bildschirmen nur der obere Teil der Bildkarte, wie in der Übersicht */
 .eb-bild img{aspect-ratio:4/3;object-fit:cover;object-position:top}
}
@media(max-width:767px){
 .eb-liste{grid-template-columns:minmax(0,1fr);gap:24px}
 .eb-karte-text,.eb-kurz{padding:24px}
 .eb-punkte li{padding:24px 24px 24px 72px}
 .eb-punkte li::before{left:24px;top:24px}
 .eb-text>h2{margin-top:40px}
}