/* ─────────────────────────────
   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)}
/* Weekly Update: Überschrift und Karte gehören nah an die Leiste - der
   allgemeine Blog-Abstand (bis 92 px) war hier deutlich zu groß. */
.lt-blog.lt-blog--weekly{padding-top:clamp(36px,4vw,52px)}
.lt-navi + .lt-blog.lt-blog--weekly,
.lt-navi ~ main > .lt-blog.lt-blog--weekly:first-child,
main > .lt-blog.lt-blog--weekly:first-child,
.lt-navi--pille + .lt-blog.lt-blog--weekly,
.lt-navi--pille ~ main > .lt-blog.lt-blog--weekly:first-child{padding-top:clamp(28px,3.2vw,44px)}

.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-text,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)}
/* Blogbeiträge überall im selben Format wie das Fun-Fact-Bild (5:4),
   Ausschnitt aus dem Editor. Events behalten ihr eigenes Kartenformat. */
.lt-blog--raster .lt-blog__k:not(.lt-blog__k--event) .lt-blog__bild{aspect-ratio:5/4}
.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-text,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-text,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 6}
.lt-weekly--bild .lt-weekly__bild{grid-column:span 6}

.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-text,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-text,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))}

/* Bild immer im selben Format (5:4, halbe Breite), oben bündig mit der Textkarte -
   vorher streckte es sich auf die Höhe des Textes, und jeder Beitrag
   hatte ein anderes Bildformat. Ausschnitt/Zoom kommen je Beitrag
   als Inline-Stil (object-position, scale) aus dem Editor. */
.lt-weekly__bild{padding:0;margin:0;min-height:0;aspect-ratio:5/4;align-self:start;overflow:hidden;position:relative}
/* Kein Mitlaufen mehr: Das klebende Bild lief über die Karten darunter
   (Reaktionen, Nachricht) - es bleibt oben neben dem Text stehen. */
.lt-weekly__rahmen{position:absolute;inset:0;overflow:hidden;display:block;border-radius:inherit}
/* Desktop: Die Bildspalte ist so hoch wie die Textkarte; der Rahmen
   klebt oben und läuft mit, bis die Textkarte endet - nie über die
   Reaktionen darunter. */
@media(min-width:861px){
  .lt-weekly--bild .lt-weekly__bild{align-self:stretch;aspect-ratio:auto;overflow:visible;min-height:min(30vw, 400px);
    background:none;border:0;box-shadow:none;border-radius:var(--radius)}
  /* Höhe: so hoch wie der sichtbare Bereich unter der Kopfleiste,
     höchstens so hoch wie die Textkarte - kein großes Loch unter dem
     Bild mehr. Bei kurzem Text gibt die Bildspalte eine Mindesthöhe
     vor (Textkarte wächst mit, Inhalt bleibt mittig). */
  .lt-weekly--bild .lt-weekly__rahmen{position:sticky;inset:auto;top:calc(var(--kopf-h,64px) + 20px);
    aspect-ratio:auto;width:100%;border-radius:var(--radius);
    height:min(calc(100vh - var(--kopf-h,64px) - 40px), 100%);
    border:1px solid var(--auf-flaeche-linie);box-shadow:var(--schatten)}
}
.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__blur{display:none}
/* Desktop: Bild nie abschneiden - ganz zeigen (contain), Zoom aus dem
   Editor wirkt weiter vom Fokuspunkt aus. Die freie Fläche füllt das
   gleiche Bild unscharf. */
@media(min-width:861px){
  .lt-weekly--bild .lt-weekly__rahmen img{object-fit:contain !important;object-position:50% 50% !important;z-index:1}
  .lt-weekly--bild .lt-weekly__rahmen .lt-bildquelle{z-index:2}
  .lt-weekly--bild .lt-weekly__blur{display:block;position:absolute;inset:-30px;z-index:0;background-size:cover;background-position:center;
    filter:blur(26px) saturate(1.15) brightness(.85);transform:scale(1.08)}
}
.lt-weekly__bild:hover img{transform:scale(1.025)}

.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}
/* Dunkelmodus: leichter heller Glow direkt ums Zeichen - dunkle Emojis
   (🐾, 🦇, 🖤) verschwinden sonst auf dunklem Grund. --em-glow setzt der
   Dunkel-Token (feste dunkle Website) bzw. der Umschalter; im hellen
   Modus bleibt alles unverändert. */
html[data-thema="dunkel"]{--em-glow:drop-shadow(0 0 .7px rgba(255,255,255,.9)) drop-shadow(0 0 3px rgba(255,255,255,.3))}
html[data-thema="hell"]{--em-glow:none}
.lt-weekly__emoji .em{filter:var(--em-glow,none)}
.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:empty{display:none}
.lt-weekly__summe b{color:var(--text)}
.lt-weekly__summe .du{color:var(--akzent-text,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-text,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-text,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}
  /* Untereinander: Bild ÜBER dem Text (im Markup steht es danach). */
  .lt-weekly--bild .lt-weekly__bild{order:-1}
}
@media(max-width:520px){
  /* Festes 3er-Raster: alle Knöpfe gleich breit, die letzte Reihe
     beginnt links statt sich zu strecken oder mittig zu stehen. */
  .lt-weekly__emojis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .lt-weekly__emoji{width:100%;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-text,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-text,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__bild.lt-beitrag__bild--blog{aspect-ratio:5/4}
.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-text,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}
/* Reaktionen + "Schreib uns" auf der Seite eines vergangenen Weekly-Beitrags: so breit wie die Karte. */
.lt-blog--einzeln{padding:0 !important;margin:clamp(18px,2.6vw,24px) auto 0;max-width:52rem;background:none}
.lt-blog--einzeln .lt-weekly{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(14px,2.4vw,22px)}
.lt-blog--einzeln .lt-weekly__karte{grid-column:1 / -1}
.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:var(--radius-knopf, var(--radius));
  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-text,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-text,var(--akzent));font-weight:700}
.lt-weekly__katlink svg{flex:0 0 auto;margin-left:auto;color:var(--akzent-text,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}
/* animation:none ist Pflicht: Sonst startet beim Entfernen von wk-rein-*
   die Eingangs-Animation (ltWeeklyRein, 0 → 1) neu und blendet die ALTE
   Karte wieder ein, während sie ausgeblendet sein soll - der Beitrag
   "flippte" beim Pillenwechsel. */
.lt-blog--weekly.wk-raus .lt-weekly__fakt,.lt-blog--weekly.wk-raus .lt-weekly__bild{opacity:0;transform:scale(.985);animation:none}
.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}
}

/* ── Events: Termin und Ort auf der Karte ───────────────────── */
.lt-blog__event{display:flex;flex-direction:column;gap:2px;margin:2px 0 8px;font-size:.9rem;line-height:1.35}
.lt-blog__event time{font-weight:700;color:var(--akzent-text,var(--akzent))}
.lt-blog__event span{color:color-mix(in srgb, var(--text) 70%, transparent)}
.lt-weekly__datum--event{font-weight:700;color:var(--akzent-text,var(--akzent))}

/* ── Event-Kasten auf der Beitragsseite ──────────────────────── */
.lt-beitrag__event{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;align-items:baseline;
  max-width:36rem;margin:18px 0 0;padding:16px 20px;border-radius:var(--radius,8px);text-align:left;
  background:color-mix(in srgb, var(--akzent) 8%, transparent);
  border:1px solid color-mix(in srgb, var(--akzent) 25%, transparent)}
.lt-beitrag__event dt{font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:color-mix(in srgb, var(--text) 60%, transparent)}
.lt-beitrag__event dd{margin:0;font-weight:600}
.lt-beitrag__event dd a{color:inherit}
.lt-beitrag__event .lt-btn{justify-self:start;grid-column:1 / -1;margin-top:6px}

/* Leerer Bereich "Anstehende Events" */
.lt-blog__leer{margin:8px auto 0;max-width:40rem;padding:22px 24px;border-radius:var(--radius,8px);
  text-align:center;color:color-mix(in srgb, var(--text) 72%, transparent);
  background:color-mix(in srgb, var(--text) 4%, transparent);
  border:1px dashed color-mix(in srgb, var(--text) 18%, transparent)}

/* Event-Karten: EIN Format für alle (4:3), damit kein Hochformat die
   Reihe sprengt. Das Bild steht ganz darin (contain), der Rest ist
   dasselbe Bild unscharf vergrößert - Plakate bleiben vollständig
   erkennbar, nichts wird hart abgeschnitten. */
.lt-blog__k--event .lt-blog__bild{aspect-ratio:4/3 !important;flex:none !important;align-self:auto !important;min-height:0 !important;max-height:none}
.lt-blog__unscharf{position:absolute;inset:-24px;z-index:0;background-position:center;background-size:cover;background-repeat:no-repeat;
  filter:blur(18px) brightness(.85);transform:scale(1.08)}
.lt-blog__k--event .lt-blog__bild img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain}
/* In einer Reihe (z. B. Events: Anstehend | Vergangen) füllt auch eine
   einzelne Karte ihre Spalte - sonst stehen die Spalten verschieden breit. */
.lt-reihe .lt-blog--raster .lt-blog__liste:has(.lt-blog__k:only-child){grid-template-columns:minmax(0,1fr)}
.lt-reihe .lt-blog--raster .lt-blog__k{max-width:none}

/* Handy: Slide-Pfeile der Kategorien genau so groß wie die Bubbles. */
@media (max-width: 820px){
  .lt-weekly__tabsH{--wk-tab-h:calc(.78rem * 1.4 + 16px)}
  .lt-weekly__tab{line-height:1.4}
  .lt-weekly__pf{width:var(--wk-tab-h);height:var(--wk-tab-h);top:calc(50% + 1px)}
  .lt-weekly__tabsH:has(.kann-links){padding-left:calc(var(--wk-tab-h) + 8px)}
  .lt-weekly__tabsH:has(.kann-rechts){padding-right:calc(var(--wk-tab-h) + 8px)}
}

/* ── Bausteine im Beitrag/Event (Inhalt, Galerie, FAQ, Große Zahlen) ── */
.lt-bs{max-width:44rem;margin:0 auto}
.lt-bs + .lt-bs{margin-top:clamp(28px,4vw,44px)}
.lt-bs__titel{font-family:var(--schrift_titel);font-size:clamp(1.35rem,2.4vw,1.75rem);line-height:1.2;margin:0 0 .7em}
.lt-bs-inhalt--box{padding:clamp(18px,3vw,28px);border-radius:var(--radius);
  background:color-mix(in srgb, var(--akzent) 8%, transparent);border-left:4px solid var(--akzent)}
.lt-bs-inhalt--zweispaltig .lt-beitrag__text{max-width:none;column-count:2;column-gap:2.4em}
.lt-bs-inhalt--zweispaltig .lt-beitrag__text > *{break-inside:avoid}
@media (max-width:700px){.lt-bs-inhalt--zweispaltig .lt-beitrag__text{column-count:1}}
.lt-bs-inhalt--zentriert{text-align:center;max-width:36rem}
.lt-bs-inhalt--zentriert ul,.lt-bs-inhalt--zentriert ol{text-align:left;display:inline-block}

/* Galerie */
.lt-bs-galerie{position:relative}
.lt-bs-galerie__bild{margin:0;overflow:hidden;border-radius:calc(var(--radius) * .6)}
.lt-bs-galerie__bild img{display:block;width:100%;height:100%;object-fit:cover}
.lt-bs-galerie--raster .lt-bs-galerie__spur{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.lt-bs-galerie--raster .lt-bs-galerie__bild{aspect-ratio:4/3}
.lt-bs-galerie--mosaik .lt-bs-galerie__spur{column-count:3;column-gap:10px}
.lt-bs-galerie--mosaik .lt-bs-galerie__bild{break-inside:avoid;margin:0 0 10px}
.lt-bs-galerie--mosaik .lt-bs-galerie__bild img{height:auto}
@media (max-width:640px){.lt-bs-galerie--mosaik .lt-bs-galerie__spur{column-count:2}}
.lt-bs-galerie--slider .lt-bs-galerie__spur,.lt-bs-galerie--header .lt-bs-galerie__spur{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;gap:0;border-radius:calc(var(--radius) * .6)}
.lt-bs-galerie--slider .lt-bs-galerie__spur::-webkit-scrollbar,.lt-bs-galerie--header .lt-bs-galerie__spur::-webkit-scrollbar{display:none}
.lt-bs-galerie--slider .lt-bs-galerie__bild,.lt-bs-galerie--header .lt-bs-galerie__bild{flex:0 0 100%;aspect-ratio:16/9;scroll-snap-align:start;border-radius:0}
.lt-bs-galerie--header .lt-bs-galerie__spur{border-radius:0}
.lt-bs-galerie__pfeil{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(0,0,0,.5);color:#fff;font-size:1.6rem;line-height:1;display:flex;align-items:center;justify-content:center;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:background .15s}
.lt-bs-galerie__pfeil:hover{background:var(--akzent);color:var(--auf-akzent)}
.lt-bs-galerie__pfeil.zurueck{left:12px}.lt-bs-galerie__pfeil.vor{right:12px}
.lt-bs-gross{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.88);display:flex;align-items:center;justify-content:center;padding:4vw;cursor:zoom-out}
.lt-bs-gross img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px}

/* FAQ */
.lt-bs-faq__eintrag{border-bottom:1px solid var(--auf-flaeche-linie)}
.lt-bs-faq__eintrag:first-of-type{border-top:1px solid var(--auf-flaeche-linie)}
.lt-bs-faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 2px;font-weight:700;font-size:1.04rem}
.lt-bs-faq summary::-webkit-details-marker{display:none}
.lt-bs-faq summary span{flex:0 0 auto;width:10px;height:10px;border:solid var(--akzent);border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-3px);transition:transform .2s}
.lt-bs-faq details[open] summary span{transform:rotate(-135deg) translateY(-2px)}
.lt-bs-faq summary:hover{color:var(--akzent-text,var(--akzent))}
.lt-bs-faq__antwort{padding:0 2px 16px;line-height:1.7;color:var(--auf-flaeche-schwach)}
.lt-bs-faq__antwort p{margin:0 0 .7em}.lt-bs-faq__antwort p:last-child{margin:0}
.lt-bs-faq--offen h3{margin:0;padding:16px 2px 6px;font-size:1.04rem}

/* Große Zahlen */
.lt-bs-zahlen__reihe{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:clamp(14px,2.4vw,24px)}
.lt-bs-zahl{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px}
.lt-bs-zahl__wert{display:inline-flex;align-items:baseline;gap:2px;font-family:var(--schrift_titel);font-weight:800;
  font-size:clamp(2rem,3.8vw,3rem);line-height:1;color:var(--akzent-text,var(--akzent));font-variant-numeric:tabular-nums;max-width:100%}
/* Nie breiter als die Kachel: Die Schrift richtet sich zusätzlich nach
   deren Breite (cqi) - "1.200+" lief sonst über den Rand. */
.lt-bs-zahl{container-type:inline-size;min-width:0}
@supports (font-size:1cqi){.lt-bs-zahl__wert{font-size:min(clamp(2rem,3.8vw,3rem),26cqi)}}
.lt-bs-zahl__wert b{font-weight:inherit}
.lt-bs-zahl__wert small{font-size:.55em;font-weight:700}
.lt-bs-zahl__wort{font-size:clamp(.92rem,1.4vw,1.05rem);font-weight:600;color:var(--auf-flaeche-schwach);line-height:1.3}
.lt-bs-zahlen--kacheln .lt-bs-zahl{padding:clamp(18px,3vw,26px) 12px;border-radius:var(--radius);
  background:color-mix(in srgb, var(--akzent) 8%, transparent);border:1px solid color-mix(in srgb, var(--akzent) 22%, transparent)}

/* ── Event-Detailseite ─────────────────────────────────────────── */
/* Wann · Wo · Adresse · Autor in einer Zeile, auf dem Seitengrund. */
.lt-beitrag__leib > .lt-beitrag__evzeile{max-width:44rem;margin:0 auto clamp(22px,3vw,32px);padding-bottom:clamp(16px,2.4vw,22px);
  border-bottom:1px solid var(--auf-flaeche-linie)}
.lt-beitrag__evzeile{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px;
  font-size:.98rem;font-weight:600;color:var(--text)}
.lt-beitrag__evzeile li{display:inline-flex;align-items:center;gap:9px;min-width:0}
.lt-beitrag__evzeile .lt-ikon,.lt-beitrag__evzeile i{flex:none;color:var(--akzent-text,var(--akzent));font-size:1.05em}
.lt-beitrag__evzeile svg.lt-ikon{width:1.15em;height:1.15em}
.lt-beitrag__evfoto{flex:none;width:1.35em;height:1.35em;border-radius:50%;object-fit:cover;display:block}
.lt-beitrag__evfoto.eckig{border-radius:4px}
.lt-beitrag__evzeile a{color:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb, var(--akzent) 55%, transparent);text-underline-offset:3px}
.lt-beitrag__evzeile a:hover{color:var(--akzent-text,var(--akzent))}
/* Ohne „Alle Beiträge“ oben: weniger Luft über der Headline. */
main.lt-beitrag.lt-beitrag--neu:not(.lt-beitrag--kopfvoll){padding-top:88px}
.lt-beitrag--neu .lt-beitrag__kopf{padding-top:0}

/* Zusatzlink als Baustein */
.lt-bs-link--breit .lt-btn{display:flex;width:100%;justify-content:center}
.lt-bs-link__text{font-weight:700;color:var(--akzent-text,var(--akzent));text-decoration:none}
.lt-bs-link__text:hover{text-decoration:underline}

/* Header-Galerie über die volle Breite als Mosaik (feste Spalten). */
.lt-beitrag--kopfvoll{padding-top:0 !important}
.lt-bs-galerie--voll{margin:0 0 clamp(26px,4vw,48px)}
.lt-bs-galerie--voll .lt-bs-galerie__spur{display:grid;grid-template-columns:repeat(var(--sp,4),minmax(0,1fr));gap:6px;align-items:start}
.lt-bs-galerie--voll .lt-bs-galerie__spalte{display:flex;flex-direction:column;gap:6px;min-width:0}
.lt-bs-galerie--voll .lt-bs-galerie__bild{margin:0;border-radius:0}
.lt-bs-galerie--voll .lt-bs-galerie__bild img{height:auto}
/* Handy: zwei Spalten, die Bilder fließen neu. */
@media(max-width:640px){
  .lt-bs-galerie--voll .lt-bs-galerie__spur{display:block;column-count:2;column-gap:4px}
  .lt-bs-galerie--voll .lt-bs-galerie__spalte{display:contents}
  .lt-bs-galerie--voll .lt-bs-galerie__bild{break-inside:avoid;margin:0 0 4px}
}

/* Zurück zur Übersicht: schwebt rechts unten mit. */
.lt-beitrag__schwebe{position:fixed;right:clamp(14px,2.4vw,30px);bottom:calc(clamp(14px,2.4vw,30px) + env(safe-area-inset-bottom,0px));z-index:60;
  display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:var(--radius-knopf, var(--radius));text-decoration:none;font-weight:700;font-size:.9rem;
  background:var(--akzent);color:var(--auf-akzent);box-shadow:0 10px 30px -8px rgba(0,0,0,.45);transition:transform .18s, box-shadow .18s}
.lt-beitrag__schwebe svg{width:16px;height:16px;flex:none;transition:transform .18s}
.lt-beitrag__schwebe:hover{transform:translateY(-2px);box-shadow:0 14px 34px -8px rgba(0,0,0,.5)}
.lt-beitrag__schwebe:hover svg{transform:translateX(-3px)}
@media(max-width:640px){.lt-beitrag__schwebe{padding:12px}.lt-beitrag__schwebe span{display:none}}
main.lt-beitrag.lt-beitrag--neu{padding-bottom:110px}

/* ── Event-Karten: überall gleich hoch ─────────────────────────────
   Feste Zeilen statt Inhaltshöhe - auch über getrennte Spalten
   (Anstehend | Vergangen) hinweg: Titel 2, Unterzeile 2, Termin und
   Ort je 1, Anriss 3 Zeilen; zu Langes endet mit "…". */
.lt-blog__frei{visibility:hidden}
.lt-blog__k--event .lt-blog__titel{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.5em}
.lt-blog__k--event .lt-blog__unter{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.8em}
.lt-blog__k--event .lt-blog__event > *{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:1.35em}
.lt-blog__k--event .lt-blog__text{-webkit-line-clamp:3;min-height:4.95em}
/* In einer Reihe gleich hoch strecken. */
.lt-blog__liste{align-items:stretch}


/* Event-Seiten: Headline und Subline eine Stufe kleiner. */
.lt-beitrag--neu .lt-beitrag__kopf h1{font-size:clamp(1.6rem,3.2vw,2.35rem);line-height:1.15}
.lt-beitrag--neu .lt-beitrag__unter{font-size:clamp(.98rem,1.4vw,1.1rem)}

/* Events starten immer links - auch eine einzelne Karte steht nicht
   verloren in der Mitte, sondern dort, wo die nächste dazukäme. */
.lt-blog--raster .lt-blog__liste:has(.lt-blog__k--event){grid-template-columns:repeat(auto-fill,minmax(min(100%,18rem),1fr)) !important;justify-content:start !important}
.lt-blog--raster .lt-blog__liste .lt-blog__k--event{margin-inline:0;max-width:none}

/* Mosaik-Header: Bilder ungeschnitten, beim Überfahren leicht
   vergrößert und aufgehellt, die übrigen treten zurück. */
.lt-bs-galerie--voll .lt-bs-galerie__bild{overflow:hidden;cursor:zoom-in;position:relative}
.lt-bs-galerie--voll .lt-bs-galerie__bild img{transition:transform .5s cubic-bezier(.2,.7,.3,1),filter .35s}
.lt-bs-galerie--voll .lt-bs-galerie__spur:hover .lt-bs-galerie__bild img{filter:saturate(.75) brightness(.8)}
.lt-bs-galerie--voll .lt-bs-galerie__spur .lt-bs-galerie__bild:hover img{transform:scale(1.05);filter:none}
@media(prefers-reduced-motion:reduce){.lt-bs-galerie--voll .lt-bs-galerie__bild img{transition:none}}


/* Bildquelle (Beitragsimport/Pexels): klein unten rechts, ohne Link. */
.lt-bildquelle{position:absolute;right:8px;bottom:8px;z-index:2;max-width:calc(100% - 16px);font:500 10px/1.3 system-ui,sans-serif;color:#fff;background:rgba(0,0,0,.45);padding:2px 7px;border-radius:5px;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.01em}
.lt-beitrag__bild{position:relative}

/* ── Vergangener Beitrag im Weekly-Bild (Einzelseite) ───────────── */
.lt-beitrag--weekly .lt-beitrag__pfad,.lt-beitrag--weekly .lt-beitrag__weiter{max-width:60rem}
.lt-blog--weeklypost{padding:0}
.lt-blog--weeklypost .lt-weekly__titel{font-size:clamp(1.6rem,3.8vw,2.4rem)}
.lt-beitrag--weekly .lt-blog--einzeln{max-width:calc(60rem + 44px);box-sizing:border-box;padding:0 22px !important}