/* ─────────────────────────────
   Blogbeiträge

   Keine eigenen Farben: Alles kommt aus den Flächen-Tokens der Basis.
   So trägt das Modul auf hellem Grund, auf dunklem und auf der
   Akzentfläche - ohne dass jemand drei Fassungen pflegen muss.

   Enthält auch die Beitragsseite (.lt-beitrag), die Kategorieseiten
   und die Variante "Weekly Update" (.lt-weekly).
   ───────────────────────────── */

/* scroll-margin-top: Beim Sprung von der Beitragsseite hierher
   liegt der Abschnitt sonst unter der Kopfleiste. */
.lt-blog{padding:72px 0;scroll-margin-top:84px}
/* Erster Abschnitt direkt unter der Kopfleiste (Blog als Startseite):
   mehr Luft über dem Blognamen - er hing sonst dicht an der Leiste. */
.lt-navi + .lt-blog,
.lt-navi ~ main > .lt-blog:first-child,
main > .lt-blog:first-child{padding-top:clamp(64px,6.5vw,92px)}
/* Abgerundete Leiste: Sie schwebt und wirkt dadurch luftiger - dort
   genügt weniger, damit der Abstand gleich aussieht. */
.lt-navi--pille + .lt-blog,
.lt-navi--pille ~ main > .lt-blog:first-child{padding-top:clamp(48px,5vw,72px)}

.lt-blog__kopf{margin:0 0 36px;max-width:44rem}
.lt-blog__kopf--links {text-align:left;margin-right:auto}
.lt-blog__kopf--mitte {text-align:center;margin-inline:auto}
.lt-blog__kopf--rechts{text-align:right;margin-left:auto}
.lt-blog__kopf h2{margin:0 0 10px;font-family:var(--schrift_titel);
  font-size:clamp(1.6rem,3.6vw,2.3rem);line-height:1.15;letter-spacing:-.01em}
.lt-blog__kopf p{margin:0;color:var(--auf-flaeche-schwach);line-height:1.6;font-size:1.02rem}

/* Kategorieseite: Rückweg über der Überschrift */
.lt-blog__alle{display:inline-flex;align-items:center;gap:7px;margin:0 0 18px;
  font-size:.85rem;font-weight:600;color:var(--auf-flaeche-schwach);text-decoration:none;
  padding:6px 12px 6px 9px;border-radius:100px;
  background:color-mix(in srgb, var(--text) 5%, transparent);
  transition:color .15s, background .15s}
.lt-blog__alle svg{width:15px;height:15px;transition:transform .18s}
.lt-blog__alle:hover{color:var(--akzent);background:color-mix(in srgb, var(--akzent) 10%, transparent)}
.lt-blog__alle:hover svg{transform:translateX(-3px)}
.lt-blog__alle + .lt-blog__kopf--mitte{margin-top:0}
.lt-blog .lt-wrap > .lt-blog__alle{display:flex;width:max-content}
.lt-blog .lt-wrap > .lt-blog__alle:has(+ .lt-blog__kopf--mitte){margin-inline:auto}

/* ── Raster ────────────────────────────────────────────────────── */
.lt-blog__liste{display:grid;gap:26px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))}

.lt-blog--raster .lt-blog__liste:has(.lt-blog__k:only-child){
  grid-template-columns:minmax(0,26rem);justify-content:center}
.lt-blog--raster .lt-blog__k{max-width:34rem;margin-inline:auto;width:100%}
/* Kategorieseite mit "Alle Beiträge": ein einzelner Beitrag steht
   links darunter statt verloren in der Mitte. */
.lt-blog--raster:has(.lt-blog__alle) .lt-blog__liste:has(.lt-blog__k:only-child){justify-content:start}
.lt-blog--raster:has(.lt-blog__alle) .lt-blog__liste .lt-blog__k:only-child{margin-inline:0}

.lt-blog__k{position:relative;display:flex;flex-direction:column;overflow:hidden;
  border-radius:var(--radius);background:var(--grund);
  background:color-mix(in srgb, var(--text) 3%, var(--grund));
  border:1px solid var(--auf-flaeche-linie);
  box-shadow:var(--schatten);
  transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s, border-color .22s}
.lt-blog__k:hover{transform:translateY(-4px);
  border-color:color-mix(in srgb, var(--akzent) 35%, var(--auf-flaeche-linie));
  box-shadow:var(--schatten), 0 18px 40px -22px color-mix(in srgb, var(--akzent) 55%, transparent)}
.lt-blog__k:focus-within{outline:2px solid var(--akzent);outline-offset:3px}

.lt-blog__bild{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--auf-flaeche-linie)}
.lt-blog__bild img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.lt-blog__k:hover .lt-blog__bild img{transform:scale(1.05)}
/* Leichter Verlauf unten im Bild: die Karte wirkt tiefer. */
.lt-blog__bild::after{content:'';position:absolute;inset:auto 0 0 0;height:40%;pointer-events:none;
  background:linear-gradient(0deg, rgba(0,0,0,.18), transparent)}

.lt-blog__leib{display:flex;flex-direction:column;gap:6px;
  padding:22px 24px 24px;flex:1}

.lt-blog__marke{order:-2;align-self:flex-start;padding:4px 11px;border-radius:100px;
  background:color-mix(in srgb, var(--akzent) 14%, transparent);color:var(--akzent);
  border:1px solid color-mix(in srgb, var(--akzent) 30%, transparent);
  font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}

/* Kopfzeile: Datum · Lesezeit · Kategorie */
.lt-blog__datum{order:-1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;
  color:var(--auf-flaeche-schwach);
  font-size:.74rem;font-weight:600;letter-spacing:.04em;
  font-variant-numeric:tabular-nums;margin-bottom:2px}
.lt-blog__datum i{font-style:normal;opacity:.55}
.lt-blog__kat{position:relative;z-index:2;margin-left:auto;padding:3px 10px;border-radius:100px;
  font-size:.7rem;font-weight:700;letter-spacing:.03em;text-decoration:none;
  color:var(--text);background:color-mix(in srgb, var(--text) 7%, transparent);
  transition:background .15s,color .15s}
.lt-blog__kat:hover{background:var(--akzent);color:var(--auf-akzent)}

.lt-blog__titel{margin:2px 0 0;font-family:var(--schrift_titel);
  font-size:1.22rem;line-height:1.25;letter-spacing:-.005em}
.lt-blog__ziel{color:inherit;text-decoration:none}
/* Die ganze Karte ist klickbar - über den Titel-Link. */
.lt-blog__ziel::after{content:'';position:absolute;inset:0;z-index:1}
.lt-blog__k:hover .lt-blog__ziel{color:var(--akzent)}

.lt-blog__unter{margin:0 0 6px;color:var(--auf-flaeche-schwach);
  font-size:.94rem;line-height:1.4;font-weight:500}

.lt-blog__text{margin:0;color:var(--auf-flaeche-schwach);
  font-size:.93rem;line-height:1.65;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}

.lt-blog__mehr{margin-top:auto;padding-top:12px;
  display:inline-flex;align-items:center;gap:6px;
  color:var(--link);font-weight:var(--link-gewicht);
  font-size:.9rem;text-decoration:none}
.lt-blog__mehr svg{width:16px;height:16px;transition:transform .18s}
.lt-blog__k:hover .lt-blog__mehr svg{transform:translateX(4px)}

/* ── Liste: Bild links, Text rechts ─────────────────────────────*/
.lt-blog--liste .lt-blog__liste{grid-template-columns:1fr;gap:18px}
.lt-blog--liste .lt-blog__k{flex-direction:row;align-items:stretch;min-height:13rem}
.lt-blog--liste .lt-blog__bild{flex:0 0 38%;aspect-ratio:auto;align-self:stretch;min-height:100%}
.lt-blog--liste .lt-blog__leib{justify-content:center;padding:26px 30px}

@media(max-width:640px){
  .lt-blog--liste .lt-blog__k{flex-direction:column}
  .lt-blog--liste .lt-blog__bild{flex:none;aspect-ratio:16/10}
  .lt-blog--liste .lt-blog__leib{padding:20px 22px 22px}
}

/* ── Groß: erster hervorgehoben, Rest als Liste ─────────────────*/
.lt-blog--gross .lt-blog__liste{grid-template-columns:1fr;gap:20px}
.lt-blog--gross .lt-blog__k{flex-direction:row;align-items:stretch;min-height:12rem;max-width:none}
.lt-blog--gross .lt-blog__bild{flex:0 0 36%;aspect-ratio:auto;align-self:stretch}
.lt-blog--gross .lt-blog__leib{justify-content:center;padding:24px 28px}

.lt-blog--gross .lt-blog__k--gross{min-height:21rem;margin-bottom:8px}
.lt-blog--gross .lt-blog__k--gross .lt-blog__bild{flex:0 0 55%}
.lt-blog--gross .lt-blog__k--gross .lt-blog__leib{padding:34px 38px}
.lt-blog--gross .lt-blog__k--gross .lt-blog__titel{font-size:clamp(1.45rem,2.8vw,2rem)}
.lt-blog--gross .lt-blog__k--gross .lt-blog__text{font-size:1rem;-webkit-line-clamp:5}

.lt-blog__rest{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))}
.lt-blog__rest .lt-blog__k{flex-direction:column !important;min-height:0 !important}
.lt-blog__rest .lt-blog__bild{flex:none !important;aspect-ratio:16/9 !important}

@media(max-width:760px){
  .lt-blog--gross .lt-blog__k,
  .lt-blog--gross .lt-blog__k--gross{flex-direction:column;min-height:0}
  .lt-blog--gross .lt-blog__bild{flex:none;aspect-ratio:16/10}
  .lt-blog--gross .lt-blog__k--gross .lt-blog__leib{padding:22px 22px 24px}
}

/* ═══ Weekly Update ═══════════════════════════════════════════════
   Aufbau wie die alte Vorlage 15: Beitrag und Bild nebeneinander,
   darunter Reaktionen und Nachrichtenfeld über die volle Breite. */
.lt-weekly{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(14px,2.4vw,22px);
  max-width:60rem;margin:0 auto}
.lt-weekly > *{grid-column:1 / -1;min-width:0}
.lt-weekly--bild .lt-weekly__fakt{grid-column:span 7}
.lt-weekly--bild .lt-weekly__bild{grid-column:span 5}

.lt-weekly__karte{position:relative;overflow:hidden;border-radius:var(--radius);
  background:color-mix(in srgb, var(--text) 3%, var(--grund));
  border:1px solid var(--auf-flaeche-linie);box-shadow:var(--schatten);
  padding:clamp(20px,3.4vw,32px);
  animation:ltWeeklyRein .55s cubic-bezier(.2,.7,.3,1) both}
.lt-weekly > :nth-child(2){animation-delay:.06s}
.lt-weekly > :nth-child(3){animation-delay:.12s}
.lt-weekly > :nth-child(4){animation-delay:.18s}
@keyframes ltWeeklyRein{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.lt-weekly__fakt{
  background:linear-gradient(150deg, color-mix(in srgb, var(--akzent) 13%, var(--grund)) 0%,
             color-mix(in srgb, var(--text) 3%, var(--grund)) 62%);
  border-color:color-mix(in srgb, var(--akzent) 26%, transparent);
  display:flex;flex-direction:column;justify-content:center}
.lt-weekly__fakt::after{content:'';position:absolute;top:-90px;right:-90px;width:280px;height:280px;pointer-events:none;
  background:radial-gradient(circle closest-side, color-mix(in srgb, var(--akzent) 22%, transparent), transparent 72%)}
.lt-weekly__leer p{margin:0;color:var(--auf-flaeche-schwach);font-size:1.05rem}

.lt-weekly__meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 14px}
.lt-weekly__marke{padding:5px 12px;border-radius:100px;font-size:.68rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:var(--akzent);
  background:color-mix(in srgb, var(--akzent) 13%, transparent);
  border:1px solid color-mix(in srgb, var(--akzent) 28%, transparent)}
.lt-weekly__datum{font-size:.75rem;font-weight:600;color:var(--auf-flaeche-schwach);font-variant-numeric:tabular-nums}
.lt-weekly__titel{margin:0 0 14px;font-family:var(--schrift_titel);
  font-size:clamp(1.5rem,3.6vw,2.2rem);line-height:1.15;letter-spacing:-.015em;overflow-wrap:anywhere}
.lt-weekly__text{color:var(--auf-flaeche-stark, var(--text));line-height:1.72;font-size:clamp(1rem,1.6vw,1.1rem);overflow-wrap:anywhere}
.lt-weekly__text p{margin:0 0 .9em}
.lt-weekly__text > :last-child{margin-bottom:0}
.lt-weekly__text img{max-width:100%;height:auto;border-radius:var(--radius)}
.lt-weekly__text h2,.lt-weekly__text h3{font-family:var(--schrift_titel);margin:1.2em 0 .4em;line-height:1.25}
.lt-weekly__text h2{font-size:1.35em}.lt-weekly__text h3{font-size:1.15em}
.lt-weekly__text ul,.lt-weekly__text ol{margin:0 0 .9em;padding-left:1.3em}
.lt-weekly__text li::marker{color:var(--akzent)}
.lt-weekly__text blockquote{margin:1em 0;padding:12px 18px;border-left:4px solid var(--akzent);
  border-radius:0 var(--radius) var(--radius) 0;background:color-mix(in srgb, var(--akzent) 8%, transparent);font-style:italic}
.lt-weekly__text blockquote p:last-child{margin:0}
.lt-weekly__text a{color:var(--link,var(--akzent))}

.lt-weekly__bild{padding:0;margin:0;min-height:clamp(220px,34vw,320px)}
.lt-weekly__bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.lt-weekly__bild:hover img{transform:scale(1.035)}

.lt-weekly__klein{font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--auf-flaeche-schwach);margin:0 0 14px}
.lt-weekly__emojis{display:flex;flex-wrap:wrap;gap:10px}
.lt-weekly__emoji{display:inline-flex;align-items:center;gap:9px;min-height:46px;padding:9px 16px;
  border-radius:100px;cursor:pointer;font:inherit;font-weight:700;font-size:15px;
  color:var(--text);background:color-mix(in srgb, var(--text) 5%, transparent);
  border:1px solid var(--auf-flaeche-linie);
  transition:transform .18s cubic-bezier(.2,.7,.3,1), background .18s, border-color .18s;
  -webkit-tap-highlight-color:transparent}
.lt-weekly__emoji:hover{background:color-mix(in srgb, var(--text) 10%, transparent);transform:translateY(-2px)}
.lt-weekly__emoji:active{transform:scale(.95)}
.lt-weekly__emoji .em{font-size:20px;line-height:1;transition:transform .2s}
.lt-weekly__emoji .c{font-variant-numeric:tabular-nums;font-size:.85rem;opacity:.85;min-width:9px;text-align:center}
.lt-weekly__emoji.aktiv{background:color-mix(in srgb, var(--akzent) 18%, transparent);
  border-color:var(--akzent);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--akzent) 45%, transparent)}
.lt-weekly__emoji.aktiv .em{transform:scale(1.14)}
.lt-weekly__emoji.aktiv .c{opacity:1}
.lt-weekly__emoji.pop .em{animation:ltWeeklyPop .34s cubic-bezier(.2,.7,.3,1)}
@keyframes ltWeeklyPop{0%{transform:scale(1)}45%{transform:scale(1.45)}100%{transform:scale(1.14)}}
.lt-weekly__summe{margin-top:14px;font-size:.84rem;color:var(--auf-flaeche-schwach)}
.lt-weekly__summe b{color:var(--text)}
.lt-weekly__summe .du{color:var(--akzent);font-weight:700}

.lt-weekly__nachricht h3{margin:0;font-family:var(--schrift_titel);font-size:clamp(1.15rem,2.2vw,1.35rem)}
.lt-weekly__nachricht summary{list-style:none;display:flex;align-items:center;gap:16px;cursor:pointer;user-select:none}
.lt-weekly__nachricht summary::-webkit-details-marker{display:none}
.lt-weekly__nkopf{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.lt-weekly__hinweis{margin:0;font-size:.88rem;color:var(--auf-flaeche-schwach)}
.lt-weekly__antworten{flex:none;display:inline-flex;align-items:center;gap:8px;padding:11px 22px;
  border-radius:var(--radius-knopf,100px);font-weight:700;font-size:.95rem;
  background:var(--akzent);color:var(--auf-akzent);transition:transform .15s, filter .15s}
.lt-weekly__antworten::before{content:'';width:15px;height:15px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 17 4 12l5-5'/%3E%3Cpath d='M20 18v-2a4 4 0 0 0-4-4H4'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 17 4 12l5-5'/%3E%3Cpath d='M20 18v-2a4 4 0 0 0-4-4H4'/%3E%3C/svg%3E") center/contain no-repeat}
.lt-weekly__nachricht summary:hover .lt-weekly__antworten{transform:translateY(-1px);filter:brightness(1.06)}
.lt-weekly__nachricht[open] .lt-weekly__antworten{background:color-mix(in srgb, var(--text) 8%, transparent);color:var(--text)}
.lt-weekly__nachricht[open] .lt-weekly__form{margin-top:18px;animation:ltWeeklyRein .3s ease both}
@media(max-width:520px){.lt-weekly__nachricht summary{flex-direction:column;align-items:stretch}
  .lt-weekly__antworten{justify-content:center}}
.lt-weekly__form{display:flex;flex-direction:column;gap:6px}
.lt-weekly__form label{font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--auf-flaeche-schwach);margin-top:8px}
.lt-blog .lt-weekly__form input,
.lt-blog .lt-weekly__form textarea{width:100%;box-sizing:border-box;padding:.75rem .95rem;
  font:inherit;font-size:1rem;line-height:1.5;color:var(--text);background:var(--grund);
  border:1px solid color-mix(in srgb, var(--text) 16%, transparent);
  border-radius:var(--radius-feld, 8px);outline:none;appearance:none;
  transition:border-color .2s, box-shadow .2s}
.lt-blog .lt-weekly__form textarea{min-height:120px;resize:vertical}
.lt-blog .lt-weekly__form input:focus,
.lt-blog .lt-weekly__form textarea:focus{border-color:var(--akzent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--akzent) 15%, transparent)}
.lt-weekly__falle{position:absolute !important;left:-9999px;width:1px;height:1px;opacity:0}
.lt-weekly__aktion{display:flex;align-items:center;justify-content:flex-end;gap:14px;margin-top:12px;flex-wrap:wrap}
.lt-weekly__stand{font-size:.88rem;color:var(--auf-flaeche-schwach)}
.lt-weekly__stand.gut{color:var(--akzent);font-weight:700}
.lt-weekly__stand.schlecht{color:#c62828;font-weight:600}
.lt-weekly__senden{border:0;cursor:pointer;font:inherit;font-weight:700;font-size:.98rem;
  padding:13px 30px;border-radius:var(--radius-knopf,100px);
  background:var(--akzent);color:var(--auf-akzent);
  box-shadow:var(--schatten-knopf, 0 10px 24px -12px color-mix(in srgb, var(--akzent) 90%, transparent));
  transition:transform .15s, filter .15s}
.lt-weekly__senden:hover{transform:translateY(-2px);filter:brightness(1.06)}
.lt-weekly__senden:disabled{opacity:.55;cursor:default;transform:none}

.lt-weekly__archiv{padding:0}
.lt-weekly__archiv summary{list-style:none;display:flex;align-items:center;gap:10px;cursor:pointer;
  padding:clamp(16px,2.6vw,22px) clamp(20px,3.4vw,32px);font-weight:700;font-size:1rem;user-select:none}
.lt-weekly__archiv summary::-webkit-details-marker{display:none}
.lt-weekly__archiv summary svg{margin-left:auto;transition:transform .2s;color:var(--auf-flaeche-schwach)}
.lt-weekly__archiv[open] summary svg{transform:rotate(180deg)}
.lt-weekly__zahl{min-width:24px;height:22px;padding:0 8px;border-radius:99px;display:inline-grid;place-items:center;
  font-size:.75rem;font-weight:800;background:color-mix(in srgb, var(--akzent) 16%, transparent);color:var(--akzent)}
.lt-weekly__archiv ul{list-style:none;margin:0;padding:0 clamp(12px,2.4vw,22px) clamp(14px,2.4vw,20px);display:grid;gap:4px}
.lt-weekly__archiv a,.lt-weekly__archiv li > span{display:flex;justify-content:space-between;gap:14px;align-items:baseline;
  padding:10px 12px;border-radius:10px;color:inherit;text-decoration:none;transition:background .15s}
.lt-weekly__archiv a:hover{background:color-mix(in srgb, var(--akzent) 10%, transparent)}
.lt-weekly__archiv .t{font-weight:600}
.lt-weekly__archiv time{font-size:.78rem;color:var(--auf-flaeche-schwach);white-space:nowrap;font-variant-numeric:tabular-nums}

@media(max-width:860px){
  .lt-weekly--bild .lt-weekly__fakt,.lt-weekly--bild .lt-weekly__bild{grid-column:1 / -1}
}
@media(max-width:520px){
  .lt-weekly__emoji{flex:1 1 calc(33.333% - 8px);justify-content:center;padding:10px 8px}
  .lt-weekly__aktion{justify-content:stretch}
  .lt-weekly__senden{width:100%}
}

/* ═══ Beitragsseite ═══════════════════════════════════════════════ */
main.lt-beitrag{padding:112px 0 72px}
.lt-beitrag__fortschritt{position:fixed;left:0;top:0;height:3px;width:100%;z-index:60;
  background:var(--akzent);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}

.lt-beitrag__pfad{max-width:52rem;margin:0 auto 26px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-size:.85rem}
.lt-beitrag__pfad a{display:inline-flex;align-items:center;gap:7px;text-decoration:none;font-weight:600;
  color:var(--auf-flaeche-schwach);padding:6px 12px 6px 9px;border-radius:100px;
  background:color-mix(in srgb, var(--text) 5%, transparent);transition:color .15s, background .15s}
.lt-beitrag__pfad a svg{width:15px;height:15px;transition:transform .18s}
.lt-beitrag__pfad a:hover{color:var(--akzent);background:color-mix(in srgb, var(--akzent) 10%, transparent)}
.lt-beitrag__pfad a:hover svg{transform:translateX(-3px)}
.lt-beitrag__pfad .lt-beitrag__pfadkat{padding-left:12px}

.lt-beitrag__kopf{max-width:52rem;margin:0 auto 30px;display:flex;flex-direction:column;gap:8px}
.lt-beitrag__marke{align-self:flex-start;padding:4px 12px;border-radius:100px;
  background:color-mix(in srgb, var(--akzent) 14%, transparent);color:var(--akzent);
  border:1px solid color-mix(in srgb, var(--akzent) 30%, transparent);
  font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.lt-beitrag__kopf h1{font-family:var(--schrift_titel);
  font-size:clamp(2rem,4.4vw,3.1rem);line-height:1.1;letter-spacing:-.02em;margin:.1em 0 0}
.lt-beitrag__unter{margin:0;font-size:clamp(1.05rem,1.8vw,1.25rem);
  color:var(--auf-flaeche-schwach);line-height:1.45}
.lt-beitrag__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:6px;
  font-size:.8rem;font-weight:600;color:var(--auf-flaeche-schwach);font-variant-numeric:tabular-nums}
.lt-beitrag__meta i{font-style:normal;opacity:.5}
.lt-beitrag__meta a{color:var(--text);text-decoration:none;padding:3px 10px;border-radius:100px;
  background:color-mix(in srgb, var(--text) 7%, transparent);transition:background .15s, color .15s}
.lt-beitrag__meta a:hover{background:var(--akzent);color:var(--auf-akzent)}

.lt-beitrag__karte{max-width:52rem;margin:0 auto;overflow:hidden;border-radius:var(--radius);
  background:var(--grund);background:color-mix(in srgb, var(--text) 4%, var(--grund));
  border:1px solid var(--auf-flaeche-linie);box-shadow:var(--schatten)}
.lt-beitrag__bild{margin:0 !important;padding:0 !important;width:100%;aspect-ratio:16/9;overflow:hidden;display:block}
.lt-beitrag__bild img{width:100%;height:100%;object-fit:cover;display:block}
.lt-beitrag__leib{padding:clamp(24px,4vw,46px) clamp(20px,5vw,56px) clamp(30px,5vw,52px)}

.lt-beitrag__text{line-height:1.8;font-size:1.06rem;max-width:44rem;margin:0 auto}
.lt-beitrag__text > :first-child{margin-top:0}
.lt-beitrag__text p{margin:0 0 1.15em}
.lt-beitrag__text h2{font-family:var(--schrift_titel);font-size:clamp(1.4rem,2.6vw,1.85rem);
  margin:1.9em 0 .55em;line-height:1.22;letter-spacing:-.01em}
.lt-beitrag__text h3{font-family:var(--schrift_titel);font-size:clamp(1.18rem,2vw,1.4rem);margin:1.6em 0 .45em}
.lt-beitrag__text ul,.lt-beitrag__text ol{margin:0 0 1.15em;padding-left:1.35em}
.lt-beitrag__text li{margin:.35em 0}
.lt-beitrag__text li::marker{color:var(--akzent)}
.lt-beitrag__text strong{font-weight:700}
.lt-beitrag__text a{color:var(--link,var(--akzent));font-weight:var(--link-gewicht,inherit);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.lt-beitrag__text img{max-width:100%;height:auto;border-radius:var(--radius);margin:.6em 0}
.lt-beitrag__text blockquote{margin:1.6em 0;padding:18px 22px;border-radius:0 var(--radius) var(--radius) 0;
  border-left:4px solid var(--akzent);background:color-mix(in srgb, var(--akzent) 7%, transparent);
  font-size:1.1em;font-style:italic;color:var(--text)}
.lt-beitrag__text blockquote p:last-child{margin:0}
.lt-beitrag__text hr{border:0;height:1px;background:var(--auf-flaeche-linie);margin:2em 0}

/* Weiterblättern */
.lt-beitrag__weiter{max-width:52rem;margin:28px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.lt-beitrag__weiter a{display:flex;flex-direction:column;gap:4px;padding:18px 20px;border-radius:var(--radius);
  text-decoration:none;color:inherit;border:1px solid var(--auf-flaeche-linie);
  background:color-mix(in srgb, var(--text) 3%, var(--grund));transition:border-color .18s, transform .18s}
.lt-beitrag__weiter a:hover{border-color:var(--akzent);transform:translateY(-2px)}
.lt-beitrag__weiter small{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--auf-flaeche-schwach)}
.lt-beitrag__weiter b{font-family:var(--schrift_titel);font-size:1.02rem;line-height:1.3}
.lt-beitrag__weiter .neuer{text-align:right;grid-column:2}

.lt-beitrag__ende{max-width:52rem;margin:26px auto 0;display:flex;justify-content:center}
.lt-beitrag__zurueck{display:inline-flex;align-items:center;gap:8px;
  padding:13px 26px;border-radius:var(--radius-knopf,100px);
  background:var(--akzent);color:var(--auf-akzent);
  font-weight:600;font-size:.95rem;text-decoration:none;
  box-shadow:var(--schatten-knopf, 0 2px 8px rgba(0,0,0,.18));
  transition:transform .15s,box-shadow .15s}
.lt-beitrag__zurueck svg{width:16px;height:16px;flex:none}
.lt-beitrag__zurueck:hover{transform:translateY(-1px);
  box-shadow:var(--schatten-knopf-hover, 0 6px 16px rgba(0,0,0,.24))}

@media(max-width:640px){
  main.lt-beitrag{padding:92px 0 48px}
  .lt-beitrag__weiter{grid-template-columns:1fr}
  .lt-beitrag__weiter .neuer{grid-column:auto;text-align:left}
  .lt-beitrag__zurueck{width:100%;justify-content:center}
}

@media(prefers-reduced-motion:reduce){
  .lt-blog__k,.lt-blog__bild img,.lt-blog__mehr svg,.lt-weekly__karte,.lt-weekly__emoji{transition:none;animation:none}
  .lt-blog__k:hover,.lt-blog__k:hover .lt-blog__bild img{transform:none}
}

/* ── Mehrere Blogbausteine untereinander (je Kategorie) ─────── */
.lt-blog + .lt-blog{padding-top:24px}
.lt-blog__k[hidden]{display:none !important}

/* ── "Mehr anzeigen" ───────────────────────────────────────── */
.lt-blog__mehrzeile{display:flex;justify-content:center;margin-top:30px}
.lt-blog__mehrknopf{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font:inherit;font-weight:600;font-size:.95rem;padding:12px 24px;border-radius:999px;
  background:transparent;color:inherit;border:1.5px solid currentColor;opacity:.85;
  transition:opacity .15s,transform .15s,background .15s}
.lt-blog__mehrknopf:hover{opacity:1;transform:translateY(-1px)}
.lt-blog__mehrknopf svg{width:16px;height:16px}

/* ── Autor unter dem Beitrag ──────────────────────────────── */
.lt-beitrag__autor{max-width:44rem;margin:2.2em auto 0;padding-top:1.4em;display:flex;align-items:center;gap:16px;
  border-top:1px solid var(--auf-flaeche-linie)}
.lt-beitrag__autorbild{flex:0 0 auto;width:64px;height:64px;border-radius:50%;object-fit:cover;display:inline-flex;
  align-items:center;justify-content:center;font-weight:800;font-size:1.4rem;
  background:color-mix(in srgb, var(--akzent) 18%, transparent);color:var(--text)}
.lt-beitrag__autorbild.eckig{border-radius:var(--radius)}
.lt-beitrag__autor div{display:flex;flex-direction:column;gap:2px;min-width:0}
.lt-beitrag__autor small{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--auf-flaeche-schwach)}
.lt-beitrag__autor b{font-family:var(--schrift_titel);font-size:1.12rem;line-height:1.25}
.lt-beitrag__autor span{font-size:.9rem;color:var(--auf-flaeche-schwach)}

/* ── Weekly Update je Kategorie: Pillen-Umschalter ─────────────
   So breit wie die Beitragskarten darunter. EINE Reihe; passen nicht
   alle Kategorien hinein, scrollt sie seitlich - mit Fade an der
   Kante und Pfeilen wie bei den Ausstattungs-Tabs der Fahrzeugseite. */
.lt-weekly__tabsH{position:relative;max-width:60rem;margin:0 auto 18px;
  transition:padding .15s ease-out}
.lt-weekly__tabs{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none;padding:2px 0}
.lt-weekly__tabs::-webkit-scrollbar{display:none}
.lt-weekly__tabs.kann-rechts{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
.lt-weekly__tabs.kann-links{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px);
  mask-image:linear-gradient(90deg,transparent,#000 40px)}
.lt-weekly__tabs.kann-links.kann-rechts{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
.lt-weekly__tab{flex:0 0 auto;white-space:nowrap;appearance:none;cursor:pointer;
  padding:7px 16px;border-radius:100px;font:inherit;font-size:.78rem;font-weight:700;letter-spacing:.02em;
  color:var(--auf-flaeche-schwach, inherit);background:transparent;
  border:1px solid color-mix(in srgb, var(--akzent, #888) 28%, transparent);
  transition:color .15s ease, background .15s ease, border-color .15s ease}
.lt-weekly__tab:hover{color:var(--akzent);
  background:color-mix(in srgb, var(--akzent, #888) 10%, transparent)}
.lt-weekly__tab.aktiv,.lt-weekly__tab.aktiv:hover{color:var(--auf-akzent, #fff);
  background:var(--akzent, #555);border-color:var(--akzent, #555)}
.lt-weekly__pf{position:absolute;top:50%;transform:translateY(-50%);width:30px;height:30px;
  border-radius:50%;display:none;align-items:center;justify-content:center;cursor:pointer;
  color:var(--text);background:color-mix(in srgb, var(--text) 4%, var(--grund));
  border:0;box-shadow:0 1px 4px rgba(0,0,0,.2),inset 0 0 0 1px var(--auf-flaeche-linie);
  transition:box-shadow .15s ease}
.lt-weekly__pf:hover{box-shadow:0 2px 7px rgba(0,0,0,.26),inset 0 0 0 2px var(--auf-flaeche-linie)}
.lt-weekly__pf svg{display:block}
.lt-weekly__pf--l{left:0}
.lt-weekly__pf--r{right:0}
.lt-weekly__tabsH:has(.kann-links){padding-left:38px}
.lt-weekly__tabsH:has(.kann-rechts){padding-right:38px}
.lt-weekly__tabsH:has(.kann-links) .lt-weekly__pf--l{display:flex}
.lt-weekly__tabsH:has(.kann-rechts) .lt-weekly__pf--r{display:flex}

/* Weg zur Kategorieseite unten im Weekly-Beitrag. */
.lt-weekly__katlink{display:inline-flex;align-items:center;gap:9px;margin-top:22px;padding-top:16px;
  border-top:1px solid var(--auf-flaeche-linie);width:100%;
  font-size:.86rem;font-weight:600;color:var(--auf-flaeche-schwach, inherit);text-decoration:none;
  transition:color .15s ease}
.lt-weekly__katlink b{color:var(--akzent);font-weight:700}
.lt-weekly__katlink svg{flex:0 0 auto;margin-left:auto;color:var(--akzent);transition:transform .15s ease}
.lt-weekly__katlink:hover{color:var(--text)}
.lt-weekly__katlink:hover svg{transform:translateX(3px)}

/* ── Weekly je Kategorie: Gleiter, Neu-Punkt, Wechsel, Punkte ──── */
.lt-weekly__tabs{position:relative}
.lt-weekly__tab{position:relative;z-index:1}
/* Die Akzentfläche gleitet zur aktiven Pille. Ohne Skript bleibt die
   gefüllte Pille (Regel weiter oben) - mit Skript übernimmt der Gleiter. */
.lt-weekly__gleiter{position:absolute;left:0;top:0;width:0;height:0;z-index:0;border-radius:100px;
  background:var(--akzent,#555);pointer-events:none;opacity:0;
  transition:transform .32s cubic-bezier(.3,.7,.2,1),width .32s cubic-bezier(.3,.7,.2,1),opacity .2s}
.lt-weekly__tabs.hat-gleiter .lt-weekly__gleiter{opacity:1}
.lt-weekly__tabs.hat-gleiter .lt-weekly__tab.aktiv,
.lt-weekly__tabs.hat-gleiter .lt-weekly__tab.aktiv:hover{background:transparent;border-color:transparent;
  transition:color .2s ease .08s, border-color .2s}

/* Neu seit dem letzten Besuch: pulsierender Punkt oben rechts. */
.lt-weekly__neu{display:none}
.lt-weekly__tab.ist-neu .lt-weekly__neu{display:block;position:absolute;top:-2px;right:-2px;width:10px;height:10px;
  border-radius:50%;background:var(--akzent,#e5484d);box-shadow:0 0 0 2px var(--grund,#fff)}
.lt-weekly__tab.ist-neu .lt-weekly__neu::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:var(--akzent,#e5484d);animation:lt-wk-puls 1.8s ease-out infinite}
@keyframes lt-wk-puls{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.6);opacity:0}}
.lt-weekly__tabs{padding-top:4px;padding-right:2px}

/* Wechsel: kurz aus, dann mit Richtung herein. */
.lt-blog--weekly .lt-weekly__fakt,.lt-blog--weekly .lt-weekly__bild{transition:opacity .14s ease, transform .14s ease}
.lt-blog--weekly.wk-raus .lt-weekly__fakt,.lt-blog--weekly.wk-raus .lt-weekly__bild{opacity:0;transform:scale(.985)}
.lt-blog--weekly.wk-rein-r .lt-weekly__fakt,.lt-blog--weekly.wk-rein-r .lt-weekly__bild{animation:lt-wk-rein-r .32s cubic-bezier(.2,.7,.2,1)}
.lt-blog--weekly.wk-rein-l .lt-weekly__fakt,.lt-blog--weekly.wk-rein-l .lt-weekly__bild{animation:lt-wk-rein-l .32s cubic-bezier(.2,.7,.2,1)}
@keyframes lt-wk-rein-r{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes lt-wk-rein-l{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}

/* Punkte unter der Karte - nur auf dem Handy (dort wird gewischt). */
.lt-weekly__punkte{display:none;justify-content:center;gap:6px;margin:-4px 0 2px}
.lt-weekly__punkte span{width:6px;height:6px;border-radius:100px;
  background:color-mix(in srgb, var(--text,#888) 25%, transparent);transition:width .25s ease, background .25s ease}
.lt-weekly__punkte span.aktiv{width:18px;background:var(--akzent,#555)}
@media (max-width:820px){.lt-weekly__punkte{display:flex}}

@media (prefers-reduced-motion:reduce){
  .lt-weekly__gleiter,.lt-blog--weekly .lt-weekly__fakt,.lt-blog--weekly .lt-weekly__bild{transition:none}
  .lt-blog--weekly.wk-rein-r .lt-weekly__fakt,.lt-blog--weekly.wk-rein-l .lt-weekly__fakt,
  .lt-blog--weekly.wk-rein-r .lt-weekly__bild,.lt-blog--weekly.wk-rein-l .lt-weekly__bild{animation:none}
  .lt-weekly__tab.ist-neu .lt-weekly__neu::after{animation:none}
}