/* ============================================================
liveoftea (lt) — Redesign v2 "Dark Tea App"
Voll-Custom-Theme im .lt-Wrapper — erbt NICHT das Magazin-CSS
(.site-weloveurlaub). Quelle: Design-Handoff liveoftea v2
(Bricolage Grotesque + Instrument Sans, dunkles Tannengruen,
Matcha/Apricot/Gelb als Themenwelt-Akzente, Pill-Radien).
Fonts self-hosted (DSGVO) aus /css/fonts/.
============================================================ */
@font-face {
font-family: 'Bricolage Grotesque';
src: url('/css/fonts/bricolage-grotesque-var.woff2') format('woff2');
font-weight: 200 800;
font-display: swap;
}
@font-face {
font-family: 'Instrument Sans';
src: url('/css/fonts/instrument-sans-var.woff2') format('woff2');
font-weight: 400 700;
font-display: swap;
}
.lt {
/* Design-Tokens aus dem Handoff */
--bg: #0C1912;
--card: #1B3123;
--card-deep: #0F2117;
--card-bento: #14251B;
--ink: #FBFAF4;
--ink-92: rgba(242, 241, 234, .92);
--ink-88: rgba(242, 241, 234, .88);
--ink-80: rgba(242, 241, 234, .8);
--ink-76: rgba(242, 241, 234, .76);
--ink-72: rgba(242, 241, 234, .72);
--ink-68: rgba(242, 241, 234, .68);
--ink-62: rgba(242, 241, 234, .62);
--ink-55: rgba(242, 241, 234, .55);
--tee: #C6F16D; /* Matcha — Primaer-Akzent + Themenwelt Teesorten */
--zub: #F2A25C; /* Apricot — Themenwelt Zubehoer */
--sue: #FFC200; /* Gelb (Marke) — Themenwelt Suessungsmittel, Badges, CTA-Hover */
--border: rgba(242, 241, 234, .2);
--border-int: rgba(242, 241, 234, .45);
--line: rgba(242, 241, 234, .16);
--tee-07: rgba(198, 241, 109, .07);
--tee-13: rgba(198, 241, 109, .13);
--tee-22: rgba(198, 241, 109, .22);
--zub-07: rgba(242, 162, 92, .07);
--zub-13: rgba(242, 162, 92, .13);
--zub-24: rgba(242, 162, 92, .24);
--sue-06: rgba(255, 194, 0, .06);
--sue-13: rgba(255, 194, 0, .13);
--sue-24: rgba(255, 194, 0, .24);
--display: 'Bricolage Grotesque', sans-serif;
--sans: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
--pad-x: clamp(20px, 4vw, 48px);
--sec-gap: clamp(56px, 7vh, 88px);
/* Welt-Akzent — Modifier .w-tee/.w-zub/.w-sue setzen ihn um */
--accent: var(--tee);
--accent-tint: var(--tee-13);
--accent-tint-low: var(--tee-07);
--accent-border: var(--tee-22);
font-family: var(--sans);
color: var(--ink);
background: var(--bg);
min-height: 100vh;
overflow-x: clip;
-webkit-font-smoothing: antialiased;
font-size: 16px;
line-height: 1.6;
}
.w-tee { --accent: var(--tee); --accent-tint: var(--tee-13); --accent-tint-low: var(--tee-07); --accent-border: var(--tee-22); }
.w-zub { --accent: var(--zub); --accent-tint: var(--zub-13); --accent-tint-low: var(--zub-07); --accent-border: var(--zub-24); }
.w-sue { --accent: var(--sue); --accent-tint: var(--sue-13); --accent-tint-low: var(--sue-06); --accent-border: var(--sue-24); }
/* Body-Grundierung: lt-Seiten sind komplett dunkel. Font auch am Body
setzen — Chrome AUSSERHALB des .lt-Wrappers (Consent-Banner/-Modal,
Skip-Link) erbt sie via font-family:inherit, sonst Browser-Serif. */
body.lt-page {
margin: 0;
background: #0C1912;
font-family: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
}
.lt * , .lt *::before, .lt *::after { box-sizing: border-box; }
.lt [hidden] { display: none !important; }
/* :where() haelt die Spezifitaet bei (0,1,0) — Komponenten-Klassen
(ebenfalls 0,1,0, spaeter deklariert) gewinnen ohne !important.
Matcha-Hover nur fuer klassenlose Links (Fliesstext etc.), sonst
faerbt die Kaskade ganze Karten um. */
.lt :where(a) { color: var(--ink); text-decoration: none; }
.lt :where(a:not([class])):hover { color: var(--tee); }
.lt ::selection { background: var(--tee); color: var(--bg); }
.lt input::placeholder, .lt textarea::placeholder { color: var(--ink-62); opacity: 1; }
.lt img { max-width: 100%; }
.lt button { font-family: var(--sans); }
.lt :focus-visible { outline: 2px solid var(--tee); outline-offset: 2px; border-radius: 4px; }
/* Skip-Link (main.php rendert ihn global; style.css laedt hier nicht) */
body.lt-page .skip-link {
position: absolute; left: -9999px; top: 0; z-index: 300;
background: #C6F16D; color: #0C1912; font-weight: 700;
padding: 10px 18px; border-radius: 999px;
}
body.lt-page .skip-link:focus { left: 16px; top: 16px; }
/* ============================================================
Layout-Helfer
============================================================ */
.lt-container { max-width: 1240px; margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }
.lt-container--nav { max-width: 1200px; }
.lt-container--narrow { max-width: 1140px; margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }
.lt-container--text { max-width: 860px; margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }
.lt-section { padding-bottom: var(--sec-gap); }
.lt-section--last { padding-bottom: clamp(64px, 8vh, 96px); }
.lt-pagetop { padding-top: clamp(130px, 15vh, 170px); }
.lt-pagetop--hero { padding-top: clamp(140px, 16vh, 190px); }
/* Sektions-Kopf: Titel links, Aktion/Meta rechts */
.lt-sechead { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.lt-sechead h2 { font-family: var(--display); font-size: clamp(24px, 2.4vw, 32px); font-weight: 700; letter-spacing: -.02em; margin: 0; }
.lt-sechead__meta { font-size: 13px; color: var(--ink-62); }
/* Deko-Lichtflecken (Hero-Bereiche) */
.lt-deco { position: absolute; border-radius: 999px; pointer-events: none; }
.lt-deco--matcha { width: 560px; height: 560px; top: -140px; right: 6%; background: radial-gradient(closest-side, rgba(198,241,109,.16), rgba(198,241,109,0)); }
.lt-deco--gold { width: 520px; height: 520px; top: 180px; left: -180px; background: radial-gradient(closest-side, rgba(255,194,0,.1), rgba(255,194,0,0)); }
/* ============================================================
Buttons, Chips, Badges
============================================================ */
.lt-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
background: var(--tee); color: var(--bg) !important;
font-size: 14px; font-weight: 700; padding: 14px 26px;
border: none; border-radius: 999px; cursor: pointer;
transition: background .2s;
}
.lt-btn:hover { background: var(--sue); color: var(--bg) !important; }
.lt-btn--outline {
background: none; color: var(--ink) !important;
border: 1px solid var(--border-int); font-weight: 600;
transition: border-color .2s, color .2s;
}
.lt-btn--outline:hover { background: none; border-color: var(--tee); color: var(--tee) !important; }
.lt-btn--dark { background: var(--bg); color: var(--tee) !important; transition: color .2s; }
.lt-btn--dark:hover { background: var(--bg); color: var(--sue) !important; }
/* Outline-Chip (Links/Filter) */
.lt-chip {
display: inline-flex; align-items: center;
font-size: 13px; font-weight: 500; color: var(--ink-92);
border: 1px solid var(--border-int); border-radius: 999px;
padding: 7px 15px; background: none; cursor: pointer;
transition: border-color .2s, color .2s, background .2s;
}
.lt-chip:hover { border-color: var(--accent); color: var(--accent); }
.lt-chip.is-active { background: var(--accent); border-color: var(--accent); color: var(--bg); font-weight: 600; }
.lt-chip.is-active:hover { color: var(--bg); }
/* Getoenter Kategorie-Badge (VERSALIEN-Label) */
.lt-badge {
display: inline-block; width: fit-content;
font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
color: var(--accent); background: var(--accent-tint);
border-radius: 999px; padding: 5px 11px;
}
.lt-badge--solid { color: var(--bg); background: var(--accent); font-weight: 800; letter-spacing: .12em; }
.lt-badge--gold { color: var(--bg); background: var(--sue); font-weight: 800; letter-spacing: .12em; }
/* Zurueck-Pill */
.lt-backlink {
display: inline-block; font-size: 13px; font-weight: 600; color: var(--ink-76);
border: 1px solid var(--border-int); border-radius: 999px; padding: 7px 15px;
transition: border-color .2s, color .2s;
}
.lt-backlink:hover { border-color: var(--tee); color: var(--tee); }
/* Pfeil-Kreis-Button (Kartenreihen) */
.lt-arrowbtn {
width: 44px; height: 44px; border-radius: 999px;
border: 1px solid var(--border-int); background: none; color: var(--ink);
font-size: 17px; cursor: pointer; transition: border-color .2s, background .2s;
}
.lt-arrowbtn:hover { border-color: var(--tee); background: rgba(198,241,109,.08); }
/* ============================================================
Floating Nav
============================================================ */
.lt-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200; background: rgba(242,241,234,.12); }
.lt-progress__bar { height: 100%; width: 0%; background: var(--tee); }
.lt-nav {
position: fixed; top: 16px; left: 0; right: 0; z-index: 100;
padding: 0 clamp(16px, 3vw, 32px);
display: flex; justify-content: center; pointer-events: none;
}
.lt-nav__pill {
pointer-events: auto; width: 100%; max-width: 1200px;
display: flex; align-items: center; justify-content: space-between; gap: 24px;
background: rgba(12, 25, 18, .88);
-webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
border: 1px solid var(--border); border-radius: 999px;
padding: 10px 12px 10px 24px;
}
.lt-nav__logo {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--display); font-size: 21px; font-weight: 700;
letter-spacing: -.02em; line-height: 1;
}
.lt-nav__links { display: flex; align-items: center; gap: 6px; }
.lt-nav__link {
font-size: 14px; font-weight: 500; padding: 9px 16px; border-radius: 999px;
color: var(--ink-92); transition: background .2s, color .2s;
}
.lt-nav__link:hover { background: rgba(242,241,234,.08); color: var(--ink); }
.lt-nav__link.is-active { font-weight: 600; color: var(--accent); background: var(--accent-tint); }
.lt-nav__actions { display: flex; align-items: center; gap: 10px; }
.lt-nav__iconbtn {
width: 40px; height: 40px; border-radius: 999px; flex: none;
border: 1px solid rgba(242,241,234,.42); background: none; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: border-color .2s, background .2s;
}
.lt-nav__iconbtn:hover { border-color: rgba(198,241,109,.6); background: rgba(198,241,109,.08); }
.lt-nav__iconbtn.is-active { border-color: rgba(198,241,109,.6); background: rgba(198,241,109,.08); }
.lt-nav__cta {
background: var(--tee); color: var(--bg) !important;
font-size: 13.5px; font-weight: 700; padding: 11px 20px; border-radius: 999px;
transition: background .2s;
}
.lt-nav__cta:hover { background: var(--sue); }
.lt-nav__burger {
display: none; width: 36px; height: 36px; border-radius: 999px; flex: none;
background: var(--tee); color: var(--bg); border: none; cursor: pointer;
font-size: 15px; font-weight: 700;
align-items: center; justify-content: center;
}
/* Mobile-Menue (Burger) */
.lt-mobilemenu {
display: none;
position: fixed; inset: 0; z-index: 90;
background: var(--bg);
padding: 96px 22px 40px;
overflow-y: auto;
}
.lt.menu-open .lt-mobilemenu { display: block; }
.lt-mobilemenu__link {
display: block; width: 100%; text-align: left;
padding: 12px 0; background: none; border: none; cursor: pointer;
font-family: var(--display); font-size: 32px; font-weight: 800;
letter-spacing: -.03em; color: var(--ink);
border-top: 1px solid rgba(242,241,234,.14);
}
.lt-mobilemenu__link:first-child { border-top: none; }
.lt-mobilemenu__link--tee { color: var(--tee); }
.lt-mobilemenu__link--zub { color: var(--zub); }
.lt-mobilemenu__link--sue { color: var(--sue); }
.lt-mobilemenu__actions { display: flex; gap: 10px; margin-top: 22px; }
.lt-mobilemenu__actions > * { flex: 1; text-align: center; }
.lt-mobilemenu__legal { display: flex; gap: 16px; margin-top: 24px; font-size: 13px; color: var(--ink-62); }
.lt-mobilemenu__legal a { color: var(--ink-62); text-decoration: underline; text-underline-offset: 2px; }
/* ============================================================
Hero (Startseite)
============================================================ */
.lt-hero { position: relative; overflow: hidden; padding: clamp(140px,16vh,190px) var(--pad-x) var(--sec-gap); }
.lt-hero__inner { position: relative; max-width: 1200px; margin: 0 auto; }
.lt-hero__badge {
display: inline-flex; align-items: center; gap: 10px;
border: 1px solid var(--border-int); border-radius: 999px;
padding: 7px 16px 7px 8px; font-size: 12.5px; color: var(--ink-88);
}
.lt-hero__badge:hover { color: var(--ink); border-color: var(--tee); }
.lt-hero__badge .lt-hero__new {
background: var(--sue); color: var(--bg); font-weight: 800; font-size: 10.5px;
letter-spacing: .1em; border-radius: 999px; padding: 4px 10px;
}
.lt-hero__badge .lt-hero__arrow { color: var(--tee); }
.lt-hero h1 {
font-family: var(--display); font-weight: 800;
font-size: clamp(52px, 7.2vw, 104px); line-height: .98; letter-spacing: -.035em;
margin: 28px 0 0; max-width: 900px;
}
.lt-hero h1 .accent { color: var(--tee); }
.lt-hero__sub { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; color: var(--ink-80); max-width: 560px; margin: 26px 0 0; }
.lt-searchform { display: flex; gap: 10px; margin: 36px 0 0; max-width: 640px; }
.lt-searchform__field {
flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px;
background: rgba(242,241,234,.06); border: 1px solid rgba(242,241,234,.26);
border-radius: 999px; padding: 0 8px 0 22px; transition: border-color .2s;
}
.lt-searchform__field:hover, .lt-searchform__field:focus-within { border-color: rgba(198,241,109,.5); }
.lt-searchform__field svg { flex: none; opacity: .6; }
.lt-searchform__field input {
flex: 1; min-width: 0; background: none; border: none; outline: none;
padding: 17px 0; font-size: 15px; font-family: var(--sans); color: var(--ink);
}
.lt-searchform .lt-btn { padding: 0 28px; font-size: 14.5px; flex: none; }
.lt-popular { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; }
.lt-popular__label { font-size: 12.5px; color: var(--ink-62); margin-right: 6px; }
/* ============================================================
Bento „Im Fokus" (Startseite)
============================================================ */
.lt-bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 272px; gap: 18px; }
.lt-bento__feature {
grid-column: 1 / span 2; grid-row: 1 / span 2; min-width: 0;
position: relative; border-radius: 24px; overflow: hidden;
border: 1px solid var(--border); background: var(--card);
}
.lt-bento__feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lt-bento__shade { position: absolute; inset: 0; background: linear-gradient(200deg, rgba(12,25,18,0) 40%, rgba(12,25,18,.92) 82%); pointer-events: none; }
.lt-bento__caption {
position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 30px;
pointer-events: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
}
.lt-bento__caption > div { min-width: 0; }
.lt-bento__captiontitle {
pointer-events: auto; display: block; font-family: var(--display);
font-size: clamp(24px, 2.6vw, 34px); font-weight: 700; line-height: 1.1;
letter-spacing: -.02em; margin-top: 12px; color: var(--ink);
}
.lt-bento__captiontitle:hover { color: var(--tee); }
.lt-bento__captionmeta { display: block; font-size: 13px; color: var(--ink-76); margin-top: 10px; }
.lt-bento__go {
pointer-events: auto; flex: none; width: 52px; height: 52px; border-radius: 999px;
background: var(--tee); color: var(--bg) !important; font-size: 20px;
display: inline-flex; align-items: center; justify-content: center; transition: background .2s;
}
.lt-bento__go:hover { background: var(--sue); }
/* kleine + hohe Bento-Bildkarte */
.lt-bento__card {
min-width: 0; background: var(--card); border: 1px solid var(--border);
border-radius: 24px; overflow: hidden; display: flex; flex-direction: column;
transition: transform .25s, border-color .25s; color: var(--ink);
}
.lt-bento__card:hover { transform: translateY(-4px); border-color: rgba(198,241,109,.45); color: var(--ink); }
.lt-bento__card--small { grid-column: 3; grid-row: 1; }
.lt-bento__card--tall { grid-column: 4; grid-row: 1 / span 2; }
.lt-bento__media { position: relative; flex: none; }
.lt-bento__card--small .lt-bento__media { height: 128px; }
.lt-bento__card--tall .lt-bento__media { height: 46%; }
.lt-bento__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lt-bento__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 0; }
.lt-bento__card--tall .lt-bento__body { padding: 20px 22px 22px; gap: 10px; }
.lt-bento__kicker { font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); }
.lt-bento__title { font-family: var(--display); font-size: 17px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.lt-bento__card--tall .lt-bento__title { font-size: 21px; }
.lt-bento__card:hover .lt-bento__title { color: var(--tee); }
.lt-bento__excerpt { font-size: 13.5px; line-height: 1.55; color: var(--ink-76); margin: 0; }
.lt-bento__meta { font-size: 12px; color: var(--ink-68); margin-top: auto; }
/* Matcha-Statistik-Karte */
.lt-bento__stat {
grid-column: 3; grid-row: 2; min-width: 0;
background: var(--tee); color: var(--bg) !important; border-radius: 24px;
padding: 22px 24px; display: flex; flex-direction: column;
transition: transform .25s, background .25s;
}
.lt-bento__stat:hover { transform: translateY(-4px); background: #D3F78B; }
.lt-bento__stat .k { font-size: 10.5px; font-weight: 800; letter-spacing: .13em; color: rgba(12,25,18,.75); }
.lt-bento__stat .n { font-family: var(--display); font-size: clamp(40px, 3.6vw, 56px); font-weight: 800; letter-spacing: -.03em; line-height: 1; margin-top: 12px; }
.lt-bento__stat .t { font-family: var(--display); font-size: 19px; font-weight: 600; letter-spacing: -.01em; margin-top: 4px; }
.lt-bento__stat .cta { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; }
/* ============================================================
Marquee
============================================================ */
@keyframes lt-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.lt-marquee {
overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
padding: 26px 0; margin-bottom: var(--sec-gap);
}
.lt-marquee__track { display: flex; align-items: center; width: max-content; animation: lt-marquee 38s linear infinite; }
.lt-marquee:hover .lt-marquee__track { animation-play-state: paused; }
.lt-marquee__word {
font-family: var(--display); font-size: clamp(44px, 5vw, 72px); font-weight: 800;
letter-spacing: -.02em; line-height: 1; white-space: nowrap; color: rgba(242,241,234,.66);
}
.lt-marquee__sep { font-size: 26px; margin: 0 34px; }
.lt-marquee__sep--tee { color: var(--tee); }
.lt-marquee__sep--zub { color: var(--zub); }
.lt-marquee__sep--sue { color: var(--sue); }
@media (prefers-reduced-motion: reduce) {
.lt-marquee__track { animation: none; }
}
/* ============================================================
Themenwelt-Karten (Startseite)
============================================================ */
.lt-worlds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.lt-world {
min-width: 0; background: var(--accent-tint-low); border: 1px solid var(--accent-border);
border-radius: 24px; padding: 28px 28px 26px;
display: flex; flex-direction: column; min-height: 290px;
transition: transform .25s, background .25s, border-color .25s; color: var(--ink);
}
.lt-world:hover { transform: translateY(-4px); background: var(--accent-tint); border-color: var(--accent); color: var(--ink); }
.lt-world__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lt-world__name { font-family: var(--display); font-size: 26px; font-weight: 700; letter-spacing: -.02em; color: var(--accent); }
.lt-world__count { font-size: 12px; font-weight: 700; color: var(--bg); background: var(--accent); border-radius: 999px; padding: 5px 12px; flex: none; }
.lt-world__desc { font-size: 14px; line-height: 1.6; color: var(--ink-80); margin: 14px 0 0; }
.lt-world__chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.lt-world__chips span { font-size: 12px; color: var(--ink-88); border: 1px solid var(--border-int); border-radius: 999px; padding: 5px 12px; }
.lt-world__cta { margin-top: auto; padding-top: 20px; display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--accent); }
/* ============================================================
Artikel-Karten (Reihe + Grid)
============================================================ */
.lt-row {
display: flex; gap: 16px; overflow-x: auto;
scroll-snap-type: x proximity; scrollbar-width: none; padding-bottom: 6px;
}
.lt-row::-webkit-scrollbar { display: none; }
.lt-row .lt-card { flex: none; width: 296px; scroll-snap-align: start; }
.lt-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lt-card {
min-width: 0; background: var(--card); border: 1px solid var(--border);
border-radius: 20px; overflow: hidden; display: flex; flex-direction: column;
transition: transform .25s, border-color .25s; color: var(--ink);
}
.lt-card:hover { transform: translateY(-4px); border-color: rgba(198,241,109,.45); color: var(--ink); }
.lt-card__media { height: 168px; position: relative; flex: none; background: rgba(242,241,234,.08); }
.lt-grid3 .lt-card__media { height: 165px; }
.lt-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lt-card__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.lt-card__title { font-family: var(--display); font-size: 17.5px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; color: var(--ink); }
.lt-card:hover .lt-card__title { color: var(--tee); }
.lt-card__meta { font-size: 12.5px; color: var(--ink-68); margin-top: auto; }
.lt-filterchips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
/* ============================================================
Meistgelesen (Top 5)
============================================================ */
.lt-top5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.lt-top5__item {
min-width: 0; border-top: 1px solid rgba(242,241,234,.26); padding-top: 18px;
display: flex; flex-direction: column; gap: 10px; transition: border-color .25s; color: var(--ink);
}
.lt-top5__item:hover { border-top-color: var(--tee); color: var(--ink); }
.lt-top5__nr { font-family: var(--display); font-size: 52px; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--tee); }
.lt-top5__title { font-family: var(--display); font-size: 16px; font-weight: 600; line-height: 1.3; }
.lt-top5__meta { font-size: 12px; color: var(--ink-68); }
/* ============================================================
Newsletter
============================================================ */
.lt-newsletter {
background: var(--tee); color: var(--bg); border-radius: 32px;
padding: clamp(36px, 5vw, 56px);
display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: center;
}
.lt-newsletter > div { min-width: 0; }
.lt-newsletter h2 { font-family: var(--display); font-size: clamp(30px, 3.4vw, 46px); font-weight: 800; letter-spacing: -.03em; line-height: 1; margin: 0; }
.lt-newsletter--home h2 { font-size: clamp(34px, 3.8vw, 54px); }
.lt-newsletter__text { font-size: 16px; line-height: 1.55; color: rgba(12,25,18,.85); margin: 16px 0 0; max-width: 42ch; }
.lt-newsletter__form { display: flex; gap: 10px; }
.lt-newsletter__form input[type="email"] {
flex: 1; min-width: 0; padding: 17px 22px; border: none; outline: none;
background: var(--bg); color: var(--ink); font-size: 15px; font-family: var(--sans); border-radius: 999px;
}
.lt-newsletter__form .lt-btn--dark { padding: 0 28px; font-size: 14.5px; flex: none; }
.lt-newsletter__done {
display: flex; align-items: center; gap: 14px;
background: var(--bg); color: var(--ink); border-radius: 24px; padding: 20px 24px;
font-size: 14.5px; line-height: 1.5;
}
.lt-newsletter__check {
width: 38px; height: 38px; border-radius: 999px; flex: none;
background: var(--tee); color: var(--bg); font-size: 17px; font-weight: 800;
display: inline-flex; align-items: center; justify-content: center;
}
.lt-newsletter__note { font-size: 11.5px; line-height: 1.55; color: rgba(12,25,18,.8); margin: 14px 0 0; }
.lt-newsletter__note a { color: var(--bg); text-decoration: underline; text-underline-offset: 2px; }
.lt-newsletter__note a:hover { color: var(--bg); }
/* ============================================================
Footer
============================================================ */
.lt-footer { border-top: 1px solid var(--line); }
.lt-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: clamp(28px, 4vw, 56px); padding-top: clamp(48px, 6vh, 72px); }
.lt-footer__grid > div { min-width: 0; }
.lt-footer__logo { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-size: 40px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.lt-footer__claim { font-size: 14px; line-height: 1.6; color: var(--ink-72); margin: 16px 0 0; max-width: 32ch; }
.lt-footer__head { font-size: 11px; font-weight: 700; letter-spacing: .16em; color: var(--ink-55); }
.lt-footer__links { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.lt-footer__links a { font-size: 14px; color: var(--ink-92); }
.lt-footer__links a:hover { color: var(--tee); }
.lt-footer__bottom {
border-top: 1px solid var(--line); margin-top: clamp(36px, 5vh, 56px);
padding: 22px 0 26px; display: flex; align-items: center; justify-content: space-between;
gap: 16px; font-size: 12.5px; color: var(--ink-62); flex-wrap: wrap;
}
.lt-footer__heart { color: var(--sue); }
.lt-footer--compact .lt-footer__bottom { border-top: none; margin-top: 0; }
.lt-footer--compact .lt-footer__bottom a { color: var(--ink-80); }
.lt-footer--compact .lt-footer__bottom a:hover { color: var(--tee); }
/* ============================================================
Artikel-Detailseite
============================================================ */
.lt-article-head { max-width: 800px; margin: 0 auto; padding: clamp(130px,15vh,170px) var(--pad-x) 40px; text-align: center; }
.lt-article-head__pills { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; }
.lt-article-head__cat {
font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
color: var(--accent); background: var(--accent-tint); border-radius: 999px; padding: 8px 15px;
}
.lt-article-head h1 { font-family: var(--display); font-weight: 800; font-size: clamp(36px, 4.6vw, 62px); line-height: 1.04; letter-spacing: -.03em; margin: 28px 0 0; }
.lt-article-head__sub { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; color: var(--ink-80); max-width: 600px; margin: 20px auto 0; }
.lt-article-head__meta { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; font-size: 13.5px; color: var(--ink-72); }
.lt-avatar {
width: 36px; height: 36px; border-radius: 999px; flex: none;
background: var(--tee); color: var(--bg);
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--display); font-size: 15px; font-weight: 800;
}
.lt-article-head__meta .name { font-weight: 600; color: var(--ink-92); }
.lt-article-hero { max-width: 1140px; margin: 0 auto; padding: 0 var(--pad-x); }
.lt-article-hero figure { margin: 0; position: relative; height: clamp(280px, 38vw, 470px); border-radius: 24px; overflow: hidden; border: 1px solid var(--border); }
.lt-article-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lt-article-layout {
max-width: 1140px; margin: 0 auto;
padding: clamp(40px,5vh,64px) var(--pad-x) var(--sec-gap);
display: grid; grid-template-columns: minmax(0, 1fr) 300px;
gap: clamp(36px, 5vw, 72px); align-items: start;
}
.lt-article-layout > article { min-width: 0; max-width: 720px; }
/* --- Prose: gestylter Artikel-/Themenseiten-Content --------------
Deckt das Plain-Markup der DB-Artikel (h2/h3/p/figure/img) UND
die Design-Content-Module (Kurz-gesagt, Tabelle, Blockquote,
Listen, FAQ) ab. H2 bekommt automatisch die Matcha-Nummer. */
.lt-prose { counter-reset: lt-h2; font-size: 17px; line-height: 1.75; color: var(--ink-88); }
.lt-prose > p:first-child { font-size: 19px; line-height: 1.7; color: var(--ink-92); }
.lt-prose p { font-size: 17px; line-height: 1.75; color: var(--ink-88); margin: 0 0 24px; }
.lt-prose a { color: var(--tee); text-decoration: underline; text-underline-offset: 3px; }
.lt-prose a:hover { color: var(--sue); }
.lt-prose h2 {
font-family: var(--display); font-size: 27px; font-weight: 700;
letter-spacing: -.02em; line-height: 1.2; margin: 44px 0 18px;
/* Zaehler am ELEMENT, nicht im ::before: Modul-Titel (fact-card,
pro-con, itinerary) blenden ihre Nummer per content:none aus,
muessen aber mitzaehlen — sonst laeuft die sichtbare Nummerierung
dem Inhaltsverzeichnis (TocBuilder zaehlt ALLE h2) davon. */
counter-increment: lt-h2;
}
.lt-prose h2::before {
content: counter(lt-h2, decimal-leading-zero);
color: var(--tee); margin-right: 12px;
}
.lt-prose h3 { font-family: var(--display); font-size: 20px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; margin: 32px 0 14px; }
.lt-prose figure { margin: 32px 0; border-radius: 20px; overflow: hidden; border: 1px solid var(--border); }
.lt-prose figure img { display: block; width: 100%; height: auto; }
.lt-prose figcaption { font-size: 12.5px; color: var(--ink-62); padding: 10px 16px; background: var(--card); }
.lt-prose ul, .lt-prose ol { margin: 0 0 24px; padding-left: 24px; }
.lt-prose li { margin-bottom: 10px; }
.lt-prose li::marker { color: var(--tee); }
.lt-prose li > p { margin: 4px 0 0; font-size: 15.5px; }
.lt-prose strong { color: var(--ink); }
.lt-prose blockquote { margin: 36px 0; padding: 4px 0 4px 26px; border-left: 3px solid var(--tee); }
.lt-prose blockquote p {
font-family: var(--display); font-size: 23px; font-weight: 600;
line-height: 1.4; letter-spacing: -.01em; margin: 0; color: var(--ink);
}
.lt-prose hr { border: none; border-top: 1px solid var(--line); margin: 36px 0; }
/* Tabellen (Content-Modul „Referenztabelle") */
.lt-prose table, .lt-tablewrap table { width: 100%; border-collapse: collapse; font-size: 15px; }
.lt-prose table { margin: 0; }
.lt-tablewrap, .lt-prose > table { border: 1px solid var(--border); border-radius: 20px; overflow: hidden; margin: 32px 0; }
.lt-tablewrap { overflow-x: auto; }
.lt-prose thead tr, .lt-tablewrap thead tr { background: rgba(242,241,234,.06); }
.lt-prose th, .lt-tablewrap th {
text-align: left; padding: 14px 20px; font-size: 11px; font-weight: 800;
letter-spacing: .14em; text-transform: uppercase; color: var(--ink-72);
}
.lt-prose td, .lt-tablewrap td { padding: 14px 20px; border-top: 1px solid var(--line); color: var(--ink-88); }
.lt-prose td:first-child, .lt-tablewrap td:first-child { font-weight: 600; color: var(--ink); }
/* Content-Modul „Kurz gesagt" */
.lt-kurz {
background: rgba(198,241,109,.08); border: 1px solid rgba(198,241,109,.3);
border-radius: 20px; padding: 24px 26px; margin: 32px 0;
}
.lt-kurz__label { font-size: 12px; font-weight: 800; letter-spacing: .16em; color: var(--tee); }
.lt-kurz__items { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.lt-kurz__item { display: flex; gap: 12px; font-size: 15px; line-height: 1.6; color: var(--ink-92); }
.lt-kurz__item::before { content: "✦"; color: var(--tee); flex: none; }
/* Tag-Chips unter dem Artikel */
.lt-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 36px 0 0; }
/* Autor-Box */
.lt-authorbox {
display: flex; align-items: center; gap: 18px;
background: var(--card); border: 1px solid var(--border);
border-radius: 20px; padding: 22px 24px; margin: 40px 0 0;
}
.lt-authorbox .lt-avatar { width: 52px; height: 52px; font-size: 21px; }
.lt-authorbox__text { min-width: 0; flex: 1; }
.lt-authorbox__name { display: block; font-family: var(--display); font-size: 17px; font-weight: 700; }
.lt-authorbox__desc { display: block; font-size: 13.5px; color: var(--ink-72); margin-top: 4px; }
.lt-authorbox__link { flex: none; font-size: 13.5px; font-weight: 700; color: var(--tee); }
/* Sticky-Sidebar (Inhalt + Teilen) */
.lt-aside { min-width: 0; position: sticky; top: 110px; display: flex; flex-direction: column; gap: 16px; }
.lt-aside__box { background: var(--card); border: 1px solid var(--border); border-radius: 20px; padding: 20px 16px; }
.lt-aside__label { display: block; font-size: 11px; font-weight: 800; letter-spacing: .16em; color: var(--ink-62); padding: 0 14px; }
.lt-toc { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.lt-toc__link {
display: block; width: 100%; text-align: left; border: none; background: none; cursor: pointer;
padding: 10px 14px; border-radius: 12px;
font-family: var(--sans); font-size: 13.5px; font-weight: 600; line-height: 1.35;
color: var(--ink-88); transition: background .2s, color .2s;
}
.lt-toc__link .nr { margin-right: 10px; opacity: .55; }
.lt-toc__link:hover { background: rgba(242,241,234,.08); }
.lt-toc__link.is-active { background: var(--tee); color: var(--bg); }
.lt-share { background: var(--card); border: 1px solid var(--border); border-radius: 20px; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.lt-share__label { font-size: 11px; font-weight: 800; letter-spacing: .16em; color: var(--ink-62); }
.lt-share__copy {
appearance: none; border: 1px solid var(--border-int); background: none; color: var(--ink);
border-radius: 999px; padding: 11px 18px; font-size: 13.5px; font-weight: 600;
font-family: var(--sans); cursor: pointer; transition: border-color .2s, color .2s;
}
.lt-share__copy:hover { border-color: var(--tee); color: var(--tee); }
.lt-share .lt-btn { padding: 12px 18px; font-size: 13.5px; }
/* FAQ (details/summary — aus intro_html der Themenseiten) */
.lt .faq-section { margin: 36px 0 0; }
.lt .faq-section h2, .lt .faq-section h3 { font-family: var(--display); font-weight: 700; letter-spacing: -.02em; }
.lt .faq-item {
background: var(--card); border: 1px solid var(--border);
border-radius: 18px; padding: 0; margin: 0 0 12px; overflow: hidden;
}
.lt .faq-item summary, .lt .faq-item__q {
cursor: pointer; list-style: none; padding: 18px 22px;
font-family: var(--display); font-size: 16.5px; font-weight: 600; line-height: 1.35;
color: var(--ink); position: relative; padding-right: 48px;
}
.lt .faq-item summary::-webkit-details-marker { display: none; }
.lt .faq-item summary::after {
content: "▾"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
color: var(--tee); font-size: 15px; transition: transform .2s;
}
.lt .faq-item[open] summary::after { transform: translateY(-50%) rotate(180deg); }
.lt .faq-item__a { padding: 0 22px 18px; font-size: 15px; line-height: 1.7; color: var(--ink-80); }
.lt .faq-item__a p { margin: 0 0 12px; font-size: 15px; color: var(--ink-80); }
.lt .faq-item__a p:last-child { margin-bottom: 0; }
/* ============================================================
Themenwelt / Kategorie
============================================================ */
.lt-cathead { position: relative; overflow: hidden; padding: clamp(130px,15vh,170px) var(--pad-x) clamp(40px,5vh,56px); }
.lt-cathead__inner { position: relative; max-width: 1200px; margin: 0 auto; }
.lt-cathead__row { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 16px 22px; margin-top: 24px; }
.lt-cathead h1 { font-family: var(--display); font-weight: 800; font-size: clamp(48px, 6.4vw, 92px); line-height: .95; letter-spacing: -.035em; margin: 0; }
.lt-cathead h1 .dot { color: var(--accent); }
.lt-cathead__badges { display: flex; gap: 8px; padding-bottom: 10px; flex-wrap: wrap; }
.lt-cathead__badges .solid { font-size: 12.5px; font-weight: 700; color: var(--bg); background: var(--accent); border-radius: 999px; padding: 7px 14px; }
.lt-cathead__badges .ghost { font-size: 12.5px; font-weight: 600; color: var(--ink-88); border: 1px solid var(--border-int); border-radius: 999px; padding: 7px 14px; }
.lt-cathead__sub { font-size: clamp(16px, 1.5vw, 18px); line-height: 1.6; color: var(--ink-80); max-width: 560px; margin: 20px 0 0; }
/* Unterkategorie-Karten */
.lt-catgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lt-catcard {
min-width: 0; background: var(--card); border: 1px solid var(--border);
border-radius: 20px; padding: 22px 24px;
display: flex; flex-direction: column; gap: 10px;
transition: transform .25s, border-color .25s; color: var(--ink);
}
.lt-catcard:hover { transform: translateY(-3px); border-color: var(--accent); color: var(--ink); }
.lt-catcard__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lt-catcard__name { font-family: var(--display); font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.lt-catcard__count { font-size: 11.5px; font-weight: 700; color: var(--accent); background: var(--accent-tint); border-radius: 999px; padding: 4px 11px; flex: none; }
.lt-catcard__sub { font-size: 13px; line-height: 1.5; color: var(--ink-68); }
/* Top-Story */
.lt-topstory {
background: var(--card); border: 1px solid var(--border); border-radius: 24px;
overflow: hidden; display: grid; grid-template-columns: .95fr 1.05fr; min-height: 340px;
}
.lt-topstory__media { position: relative; min-height: 260px; }
.lt-topstory__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lt-topstory__body { min-width: 0; padding: clamp(26px, 3vw, 40px); display: flex; flex-direction: column; gap: 14px; }
.lt-topstory__badges { display: flex; gap: 8px; flex-wrap: wrap; }
.lt-topstory__title { font-family: var(--display); font-size: clamp(26px, 2.8vw, 38px); font-weight: 700; line-height: 1.08; letter-spacing: -.02em; color: var(--ink); }
.lt-topstory__title:hover { color: var(--tee); }
.lt-topstory__excerpt { font-size: 15.5px; line-height: 1.6; color: var(--ink-76); margin: 0; max-width: 48ch; }
.lt-topstory__spacer { flex: 1; }
.lt-topstory__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.lt-topstory__meta { font-size: 13px; color: var(--ink-68); }
.lt-topstory__foot .lt-btn { padding: 12px 22px; font-size: 13.5px; flex: none; }
/* „Ueber diese Themenwelt" / Themenseiten-Intro-Karte */
.lt-about {
background: var(--card); border: 1px solid var(--border); border-radius: 24px;
overflow: hidden; display: grid; grid-template-columns: .85fr 1.15fr;
}
.lt-about__media { position: relative; min-height: 280px; }
.lt-about__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lt-about__body { min-width: 0; padding: clamp(26px, 3.4vw, 44px); }
.lt-about__label { font-size: 11px; font-weight: 800; letter-spacing: .16em; color: var(--accent); }
.lt-about__body h2 { font-family: var(--display); font-size: clamp(22px, 2.2vw, 30px); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin: 12px 0 0; }
.lt-about__body p { font-size: 15.5px; line-height: 1.7; color: var(--ink-80); margin: 16px 0 0; }
/* Themenseiten-Content (intro_html der Merge-Kategorien) */
.lt-catintro { max-width: 780px; }
.lt-catintro .lt-prose > p:first-child { font-size: 18px; }
/* ============================================================
Suche
============================================================ */
.lt-searchhead { position: relative; overflow: hidden; padding: clamp(130px,15vh,170px) var(--pad-x) clamp(32px,4vh,44px); }
.lt-searchhead__inner { position: relative; max-width: 860px; margin: 0 auto; }
.lt-kicker { font-size: 12px; font-weight: 800; letter-spacing: .2em; color: var(--tee); }
.lt-searchbox { position: relative; margin-top: 18px; }
.lt-searchbox > svg { position: absolute; left: 26px; top: 50%; transform: translateY(-50%); pointer-events: none; opacity: .65; }
.lt-searchbox input {
width: 100%; padding: 22px 64px 22px 62px;
background: var(--card); border: 1px solid rgba(242,241,234,.42); border-radius: 999px;
outline: none; font-size: 17px; font-family: var(--sans); color: var(--ink);
transition: border-color .2s;
}
.lt-searchbox input:focus { border-color: var(--tee); }
.lt-searchbox__clear {
position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
width: 36px; height: 36px; border-radius: 999px; border: none;
background: rgba(242,241,234,.12); color: var(--ink); font-size: 16px; cursor: pointer;
transition: background .2s;
}
.lt-searchbox__clear:hover { background: rgba(242,241,234,.24); }
.lt-searchbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; border-bottom: 1px solid var(--line); padding-bottom: 18px; margin-bottom: 20px; }
.lt-searchbar h1 { font-family: var(--display); font-size: 20px; font-weight: 700; letter-spacing: -.01em; margin: 0; }
.lt-searchbar__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lt-results { display: flex; flex-direction: column; gap: 12px; }
.lt-result {
display: grid; grid-template-columns: 132px 1fr auto; gap: 20px; align-items: center;
background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 14px;
transition: transform .2s, border-color .2s; color: var(--ink);
}
.lt-result:hover { transform: translateY(-2px); border-color: rgba(198,241,109,.5); color: var(--ink); }
.lt-result__media { position: relative; display: block; height: 92px; border-radius: 12px; overflow: hidden; background: rgba(242,241,234,.08); }
.lt-result__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lt-result__text { min-width: 0; display: flex; flex-direction: column; gap: 7px; padding: 4px 0; }
.lt-result__title { font-family: var(--display); font-size: 18px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.lt-result__meta { font-size: 12.5px; color: var(--ink-68); }
.lt-result__go {
width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--border-int);
display: inline-flex; align-items: center; justify-content: center; font-size: 16px;
flex: none; margin-right: 6px;
}
.lt-result mark, .lt-mark { background: rgba(198,241,109,.3); color: inherit; border-radius: 4px; padding: 0 3px; margin: 0 -1px; }
.lt-noresults { text-align: center; padding: 56px 20px 32px; }
.lt-noresults__title { font-family: var(--display); font-size: clamp(28px, 3.4vw, 42px); font-weight: 800; letter-spacing: -.03em; }
.lt-noresults__title .dot { color: var(--tee); }
.lt-noresults p { font-size: 15.5px; line-height: 1.6; color: var(--ink-72); max-width: 44ch; margin: 14px auto 0; }
.lt-noresults__chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
/* ============================================================
Statik: Kontakt / Impressum / Datenschutz / Ueber uns
============================================================ */
.lt-pagehead { max-width: 1140px; margin: 0 auto; padding: clamp(130px,15vh,170px) var(--pad-x) clamp(32px,4vh,44px); }
.lt-pagehead--wide { max-width: 1200px; position: relative; }
.lt-pagehead h1 { font-family: var(--display); font-weight: 800; font-size: clamp(44px, 5.6vw, 80px); line-height: .98; letter-spacing: -.035em; margin: 18px 0 0; }
.lt-pagehead h1 .dot, .lt-pagehead h1 .accent { color: var(--tee); }
.lt-pagehead__sub { font-size: clamp(16px, 1.5vw, 18px); line-height: 1.6; color: var(--ink-80); max-width: 560px; margin: 20px 0 0; }
.lt-pagehead__note { font-size: 15px; color: var(--ink-72); margin: 16px 0 0; }
/* Zweispaltiges Layout mit Sticky-Sidebar (Rechtsseiten, Kontakt) */
.lt-legal-layout {
max-width: 1140px; margin: 0 auto;
padding: 0 var(--pad-x) clamp(64px, 8vh, 96px);
display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(24px, 3.5vw, 56px); align-items: start;
}
.lt-legal-layout > div:first-child { min-width: 0; }
.lt-contact-layout { grid-template-columns: 1.4fr 1fr; gap: clamp(24px, 3vw, 40px); }
/* Dunkle Info-Karte */
.lt-panel { background: var(--card); border: 1px solid var(--border); border-radius: 20px; padding: 22px 24px; }
.lt-panel__label { font-size: 11px; font-weight: 800; letter-spacing: .16em; color: var(--ink-62); }
.lt-panel p { font-size: 15px; line-height: 1.7; margin: 10px 0 0; }
.lt-panel a { color: var(--tee); }
.lt-panel--mail a { display: block; font-size: 15.5px; font-weight: 600; color: var(--tee); margin-top: 10px; word-break: break-all; }
/* Getoente Akzent-Karte (KI-Hinweis, Kurzfassung, Verweise) */
.lt-tint {
background: var(--accent-tint-low); border: 1px solid var(--accent-border);
border-radius: 20px; padding: 24px 26px; display: block;
transition: background .25s; color: var(--ink);
}
a.lt-tint:hover { background: var(--accent-tint); color: var(--ink); }
.lt-tint__title { font-family: var(--display); font-size: 18px; font-weight: 700; color: var(--accent); }
.lt-tint p { font-size: 13.5px; line-height: 1.6; color: var(--ink-76); margin: 8px 0 0; }
.lt-tint__cta { display: inline-block; font-size: 13px; font-weight: 700; color: var(--accent); margin-top: 12px; }
/* Rechtstexte */
.lt-legal h2 { font-family: var(--display); font-size: 21px; font-weight: 700; letter-spacing: -.01em; margin: 36px 0 0; }
.lt-legal p { font-size: 15px; line-height: 1.75; color: var(--ink-80); margin: 12px 0 0; }
.lt-legal a { color: var(--tee); }
.lt-factgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lt-factgrid > div { min-width: 0; }
.lt-factgrid .stack { display: flex; flex-direction: column; gap: 14px; }
/* Dienste-Karten (Datenschutz) */
.lt-service { background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 20px 24px; }
.lt-service__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lt-service__name { font-family: var(--display); font-size: 17px; font-weight: 700; }
.lt-service__desc { font-size: 13.5px; line-height: 1.6; color: var(--ink-76); margin: 8px 0 0; }
.lt-service__facts { font-size: 12.5px; color: var(--ink-62); margin: 10px 0 0; }
/* Betroffenenrechte-Raster */
.lt-rights { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lt-rights > div { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 14px 18px; font-size: 13.5px; }
.lt-rights .art { color: var(--tee); font-weight: 700; }
/* CMP-CTA-Karte (Matcha) */
.lt-cmpcta {
background: var(--tee); color: var(--bg); border-radius: 20px; padding: 24px 28px; margin-top: 36px;
display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}
.lt-cmpcta__title { display: block; font-family: var(--display); font-size: 19px; font-weight: 800; }
.lt-cmpcta__sub { display: block; font-size: 13.5px; color: rgba(12,25,18,.8); margin-top: 4px; }
.lt-cmpcta .lt-btn--dark { padding: 14px 24px; font-size: 13.5px; flex: none; }
/* Rechtliches-Navigation (Sidebar) */
.lt-legalnav { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.lt-legalnav a, .lt-legalnav span {
display: block; padding: 10px 14px; border-radius: 12px;
color: var(--ink-88); font-size: 13.5px; font-weight: 600; transition: background .2s;
}
.lt-legalnav a:hover { background: rgba(242,241,234,.08); color: var(--ink); }
.lt-legalnav .is-active { background: var(--tee); color: var(--bg); }
/* Kontakt-Formular */
.lt-formcard { min-width: 0; background: var(--card); border: 1px solid var(--border); border-radius: 24px; padding: clamp(26px, 3.4vw, 40px); }
.lt-formcard h2 { font-family: var(--display); font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.lt-form__grouplabel { display: block; font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--ink-72); }
.lt-form__topics { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.lt-form__topics .lt-chip { font-weight: 600; padding: 9px 17px; }
.lt-form__hint { display: block; font-size: 12.5px; color: var(--sue); margin-top: 10px; }
.lt-form { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; }
.lt-form__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lt-form input[type="text"], .lt-form input[type="email"] {
min-width: 0; padding: 15px 20px; background: var(--card-deep);
border: 1px solid rgba(242,241,234,.42); border-radius: 999px; outline: none;
font-size: 14.5px; font-family: var(--sans); color: var(--ink); transition: border-color .2s;
}
.lt-form textarea {
resize: vertical; min-height: 140px; padding: 16px 20px; background: var(--card-deep);
border: 1px solid rgba(242,241,234,.42); border-radius: 18px; outline: none;
font-size: 14.5px; line-height: 1.6; font-family: var(--sans); color: var(--ink); transition: border-color .2s;
}
.lt-form input:focus, .lt-form textarea:focus { border-color: var(--tee); }
.lt-form__consent { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 12.5px; line-height: 1.55; color: var(--ink-76); }
.lt-form__consent input { width: 17px; height: 17px; margin-top: 1px; accent-color: var(--tee); cursor: pointer; flex: none; }
.lt-form__consent a { text-decoration: underline; text-underline-offset: 2px; color: var(--ink-92); }
.lt-form .lt-btn { align-self: flex-start; padding: 15px 30px; font-size: 14.5px; margin-top: 4px; }
.lt-form__flash { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 8px 0; }
.lt-form__flash .check {
width: 52px; height: 52px; border-radius: 999px; background: var(--tee); color: var(--bg);
display: inline-flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800;
}
.lt-form__flash h2 { font-family: var(--display); font-size: 26px; font-weight: 700; letter-spacing: -.02em; margin: 6px 0 0; }
.lt-form__flash p { font-size: 15px; line-height: 1.6; color: var(--ink-80); margin: 0; max-width: 46ch; }
/* Ueber uns */
.lt-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.lt-stats > div { min-width: 0; border-top: 1px solid rgba(242,241,234,.26); padding-top: 20px; }
.lt-stats .n { font-family: var(--display); font-size: clamp(44px, 4.6vw, 68px); font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.lt-stats .n--tee { color: var(--tee); }
.lt-stats .n--zub { color: var(--zub); }
.lt-stats .n--sue { color: var(--sue); }
.lt-stats .t { font-size: 14px; font-weight: 600; margin-top: 10px; }
.lt-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lt-value { min-width: 0; background: var(--card); border: 1px solid var(--border); border-radius: 20px; padding: 26px 26px 28px; }
.lt-value__nr { font-family: var(--display); font-size: 30px; font-weight: 800; }
.lt-value__nr--tee { color: var(--tee); }
.lt-value__nr--zub { color: var(--zub); }
.lt-value__nr--sue { color: var(--sue); }
.lt-value h3 { font-family: var(--display); font-size: 20px; font-weight: 700; letter-spacing: -.01em; margin: 12px 0 0; }
.lt-value p { font-size: 14.5px; line-height: 1.65; color: var(--ink-76); margin: 10px 0 0; }
.lt-team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lt-teamcard {
min-width: 0; background: var(--card); border: 1px solid var(--border); border-radius: 20px;
padding: 26px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
}
.lt-teamcard .lt-avatar { width: 88px; height: 88px; font-size: 34px; }
.lt-teamcard .lt-avatar--zub { background: var(--zub); }
.lt-teamcard .lt-avatar--sue { background: var(--sue); }
.lt-teamcard__name { display: block; font-family: var(--display); font-size: 19px; font-weight: 700; }
.lt-teamcard__ressort { display: block; font-size: 13px; font-weight: 600; margin-top: 4px; }
.lt-teamcard p { font-size: 13.5px; line-height: 1.6; color: var(--ink-72); margin: 0; }
.lt-join { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lt-join .lt-tint { padding: 26px; display: flex; flex-direction: column; gap: 10px; }
.lt-join .lt-tint__title { font-size: 20px; }
.lt-join .lt-tint p { font-size: 14px; margin: 0; }
.lt-join .lt-tint__cta { margin-top: auto; padding-top: 10px; }
/* ============================================================
404
============================================================ */
.lt-404 {
position: relative; display: flex; align-items: center; justify-content: center;
padding: clamp(140px, 18vh, 200px) var(--pad-x) clamp(72px, 10vh, 120px);
overflow: hidden; min-height: 60vh;
}
.lt-404__inner { position: relative; max-width: 760px; text-align: center; }
.lt-404__digits {
display: flex; align-items: baseline; justify-content: center; gap: 2px;
font-family: var(--display); font-weight: 800;
font-size: clamp(110px, 17vw, 220px); line-height: .9; letter-spacing: -.05em;
}
.lt-404__digits .zero { color: var(--tee); }
.lt-404 h1 { font-family: var(--display); font-size: clamp(24px, 3vw, 38px); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin: 28px 0 0; }
.lt-404 p { font-size: 16px; line-height: 1.6; color: var(--ink-76); max-width: 46ch; margin: 16px auto 0; }
.lt-404__actions { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 32px 0 0; flex-wrap: wrap; }
.lt-404__quick { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 34px 0 0; }
.lt-404__quicklabel { font-size: 12.5px; color: var(--ink-62); margin-right: 6px; }
/* ============================================================
Ad-Slot (klar gekennzeichnet, dezent)
============================================================ */
.lt-adslot { margin: 32px 0; }
.lt-adslot__label { display: block; font-size: 10px; font-weight: 700; letter-spacing: .16em; color: var(--ink-55); text-transform: uppercase; margin-bottom: 8px; }
.lt-adslot__frame { border: 1px solid var(--border); border-radius: 18px; overflow: hidden; }
.lt-adslot img { display: block; max-width: 100%; height: auto; }
/* ============================================================
Responsive — Breakpoints nach Mobil-Prototyp (390px-Layouts)
============================================================ */
@media (max-width: 1024px) {
.lt-bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 260px; }
.lt-bento__feature { grid-column: 1 / span 2; grid-row: 1; }
.lt-bento__card--small { grid-column: 1; grid-row: 2; }
.lt-bento__card--tall { grid-column: 2; grid-row: 2 / span 2; }
.lt-bento__stat { grid-column: 1; grid-row: 3; }
.lt-grid3, .lt-catgrid, .lt-worlds, .lt-values, .lt-team, .lt-join { grid-template-columns: repeat(2, 1fr); }
.lt-top5 { grid-template-columns: repeat(3, 1fr); }
.lt-article-layout { grid-template-columns: minmax(0, 1fr); }
.lt-aside { position: static; }
.lt-toc-box { display: none; }
.lt-legal-layout, .lt-contact-layout { grid-template-columns: minmax(0, 1fr); }
.lt-legal-layout aside, .lt-contact-layout aside { position: static; }
}
@media (max-width: 720px) {
.lt { font-size: 15px; }
/* Header: aus der Pill wird die kompakte Sticky-Leiste */
.lt-nav { top: 0; padding: 0; }
.lt-nav__pill {
max-width: none; border-radius: 0; border-left: none; border-right: none; border-top: none;
border-bottom: 1px solid rgba(242,241,234,.14);
background: rgba(12,25,18,.92);
padding: 12px 18px;
}
.lt-nav__links, .lt-nav__cta { display: none; }
.lt-nav__logo { font-size: 19px; }
.lt-nav__iconbtn { width: 36px; height: 36px; }
.lt-nav__burger { display: inline-flex; }
.lt-pagetop, .lt-article-head, .lt-cathead, .lt-searchhead, .lt-pagehead { padding-top: 96px; }
.lt-hero { padding-top: 104px; }
.lt-hero h1 { font-size: 42px; }
.lt-hero__sub { font-size: 14.5px; }
.lt-searchform { flex-direction: column; }
.lt-searchform .lt-btn { padding: 14px; }
.lt-bento { display: flex; flex-direction: column; grid-auto-rows: auto; }
.lt-bento__feature { min-height: 300px; }
.lt-bento__caption { padding: 16px 18px; }
.lt-bento__captiontitle { font-size: 21px; }
.lt-bento__go { display: none; }
.lt-bento__card--small .lt-bento__media, .lt-bento__card--tall .lt-bento__media { height: 150px; }
.lt-bento__stat { min-height: 170px; }
.lt-marquee__word { font-size: 40px; }
.lt-marquee__sep { margin: 0 22px; }
.lt-worlds, .lt-grid3, .lt-catgrid, .lt-values, .lt-team, .lt-join, .lt-factgrid, .lt-rights, .lt-form__pair { grid-template-columns: 1fr; }
.lt-world { min-height: 0; }
.lt-top5 { grid-template-columns: 1fr; gap: 0; }
.lt-top5__item { flex-direction: row; align-items: baseline; gap: 14px; border-top: none; border-bottom: 1px solid var(--line); padding: 14px 0; }
.lt-top5__item:hover { border-bottom-color: var(--tee); }
.lt-top5__nr { font-size: 24px; flex: none; }
.lt-top5__title { font-size: 15.5px; }
.lt-top5__meta { display: none; }
.lt-row .lt-card { width: 230px; }
.lt-card__media { height: 120px !important; }
.lt-card__body { padding: 14px 16px 16px; }
.lt-card__title { font-size: 15px; }
.lt-newsletter { grid-template-columns: 1fr; border-radius: 20px; padding: 22px 22px 24px; }
.lt-newsletter h2 { font-size: 24px !important; }
.lt-newsletter__text { font-size: 13.5px; margin-top: 8px; }
.lt-newsletter__form { flex-direction: column; gap: 8px; margin-top: 14px; }
.lt-newsletter__form input[type="email"] { padding: 14px 18px; font-size: 14px; }
.lt-newsletter__form .lt-btn--dark { padding: 14px; width: 100%; }
.lt-footer__grid { grid-template-columns: 1fr; gap: 24px; }
.lt-footer__logo { font-size: 22px; }
.lt-footer__bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
.lt-article-head h1 { font-size: 30px; }
.lt-article-hero figure { height: 200px; border-radius: 16px; }
.lt-prose { font-size: 14.5px; }
.lt-prose p { font-size: 14.5px; }
.lt-prose > p:first-child { font-size: 16px; }
.lt-prose h2 { font-size: 20px; }
.lt-prose h3 { font-size: 17px; }
.lt-prose blockquote p { font-size: 17px; }
.lt-kurz { padding: 16px 18px; border-radius: 16px; }
.lt-kurz__item { font-size: 13px; }
.lt-authorbox { flex-wrap: wrap; }
.lt-cathead h1 { font-size: 44px; }
.lt-catgrid { grid-template-columns: 1fr 1fr; gap: 10px; }
.lt-catcard { border-radius: 14px; padding: 14px 16px; }
.lt-catcard__name { font-size: 15px; }
.lt-catcard__sub { font-size: 11px; }
.lt-topstory { grid-template-columns: 1fr; min-height: 0; }
.lt-topstory__media { min-height: 190px; }
.lt-about { grid-template-columns: 1fr; }
.lt-about__media { min-height: 190px; }
.lt-searchbox input { padding: 15px 56px 15px 52px; font-size: 14.5px; }
.lt-searchbox > svg { left: 20px; }
.lt-result { grid-template-columns: 72px 1fr; gap: 12px; padding: 12px; border-radius: 16px; }
.lt-result__media { height: 64px; border-radius: 10px; }
.lt-result__title { font-size: 14.5px; }
.lt-result__go { display: none; }
.lt-formcard { border-radius: 20px; }
.lt-form .lt-btn { align-self: stretch; text-align: center; justify-content: center; }
.lt-404__digits { font-size: 110px; }
.lt-404__actions { flex-direction: column; }
.lt-404__actions .lt-btn, .lt-404__actions .lt-btn--outline { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.lt-card, .lt-world, .lt-catcard, .lt-bento__card, .lt-bento__stat, .lt-result, .lt-top5__item, .lt-tint { transition: none; }
.lt-card:hover, .lt-world:hover, .lt-catcard:hover, .lt-bento__card:hover, .lt-bento__stat:hover, .lt-result:hover { transform: none; }
}
/* ============================================================
CMP (Consent-Layer): geteiltes Light-Token-Markup -> aufs dunkle
lt-Design v2 umfaerben. Banner liegt AUSSERHALB des .lt-Wrappers,
daher body.site-liveoftea-Scope mit literalen Hex-Werten
(Muster sr-theme.css; keine --tenant-Vars im Banner-Kontext).
Karte #1B3123, Text #FBFAF4, Matcha-CTA #C6F16D, Pill-Radien.
============================================================ */
body.site-liveoftea .cmp-modal__dialog,
body.site-liveoftea .cmp-banner { background:#1B3123 !important; color:#FBFAF4 !important; border:1px solid rgba(242,241,234,.2) !important; }
body.site-liveoftea .cmp-banner { border-left:none !important; border-right:none !important; border-bottom:none !important; }
body.site-liveoftea .cmp-modal__dialog { border-radius:24px !important; box-shadow:0 24px 60px rgba(0,0,0,.55) !important; }
body.site-liveoftea .cmp-modal__header, body.site-liveoftea .cmp-modal__body,
body.site-liveoftea .cmp-modal__meta,
body.site-liveoftea .cmp-cat, body.site-liveoftea .cmp-cat__head, body.site-liveoftea .cmp-cat__services,
body.site-liveoftea .cmp-cat-service, body.site-liveoftea .cmp-filter, body.site-liveoftea .cmp-service { background:transparent !important; border-color:rgba(242,241,234,.16) !important; }
body.site-liveoftea .cmp-modal__footer { background:#0F2117 !important; border-top:1px solid rgba(242,241,234,.16) !important; }
body.site-liveoftea .cmp-cat, body.site-liveoftea .cmp-service { border:1px solid rgba(242,241,234,.2) !important; border-radius:16px !important; }
body.site-liveoftea .cmp-cat:hover, body.site-liveoftea .cmp-service:hover { border-color:rgba(198,241,109,.45) !important; }
body.site-liveoftea .cmp-modal__title, body.site-liveoftea .cmp-cat__name,
body.site-liveoftea .cmp-banner__title, body.site-liveoftea .cmp-service__name { color:#FBFAF4 !important; font-family:'Bricolage Grotesque',sans-serif; }
body.site-liveoftea .cmp-modal__intro, body.site-liveoftea .cmp-cat__desc,
body.site-liveoftea .cmp-banner__text, body.site-liveoftea .cmp-service__desc,
body.site-liveoftea .cmp-cookie__purpose, body.site-liveoftea .cmp-kv__k { color:rgba(242,241,234,.76) !important; }
body.site-liveoftea .cmp-service__cat, body.site-liveoftea .cmp-cookie__type,
body.site-liveoftea .cmp-cookie__duration { color:rgba(242,241,234,.62) !important; }
body.site-liveoftea .cmp-modal__close, body.site-liveoftea .cmp-expand { color:#FBFAF4 !important; }
body.site-liveoftea .cmp-modal__close { background:#0F2117 !important; border:1px solid rgba(242,241,234,.42) !important; }
body.site-liveoftea .cmp-modal__close:hover { background:rgba(242,241,234,.12) !important; }
body.site-liveoftea .cmp-tab { color:rgba(242,241,234,.62) !important; }
body.site-liveoftea .cmp-tab.is-active { color:#C6F16D !important; border-bottom-color:#C6F16D !important; }
/* Buttons: Pills wie im Design — primaer Matcha (Hover Gelb), sekundaer Outline */
body.site-liveoftea .cmp-btn { border-radius:999px !important; background:transparent !important; color:#FBFAF4 !important; border:1px solid rgba(242,241,234,.45) !important; box-shadow:none !important; }
body.site-liveoftea .cmp-btn:hover { transform:none !important; border-color:#C6F16D !important; color:#C6F16D !important; }
body.site-liveoftea .cmp-btn.cmp-btn--primary,
body.site-liveoftea .cmp-btn.cmp-btn--equal { background:#C6F16D !important; color:#0C1912 !important; border-color:#C6F16D !important; }
body.site-liveoftea .cmp-btn.cmp-btn--primary:hover,
body.site-liveoftea .cmp-btn.cmp-btn--equal:hover { background:#FFC200 !important; color:#0C1912 !important; border-color:#FFC200 !important; }
body.site-liveoftea .cmp-btn.cmp-btn--ghost { background:rgba(242,241,234,.05) !important; color:#FBFAF4 !important; border:1px solid rgba(242,241,234,.45) !important; }
body.site-liveoftea .cmp-btn.cmp-btn--ghost:hover { border-color:#C6F16D !important; color:#C6F16D !important; }
body.site-liveoftea .cmp-filter__btn { color:rgba(242,241,234,.76) !important; background:#0F2117 !important; border:1px solid rgba(242,241,234,.42) !important; }
body.site-liveoftea .cmp-filter__btn.is-active { color:#0C1912 !important; background:#C6F16D !important; border-color:#C6F16D !important; }
body.site-liveoftea .cmp-modal a, body.site-liveoftea .cmp-banner a { color:#C6F16D !important; }
body.site-liveoftea .cmp-chip, body.site-liveoftea .cmp-cookie { background:rgba(242,241,234,.06) !important; color:rgba(242,241,234,.88) !important; border-color:rgba(242,241,234,.2) !important; }
/* Toggles: AUS = grauer Track + heller Knob, AN = Matcha-Track + dunkler Knob */
body.site-liveoftea .cmp-switch__track { background:rgba(242,241,234,.22) !important; box-shadow:inset 0 0 0 1px rgba(242,241,234,.3) !important; }
body.site-liveoftea .cmp-switch__track::before { background:#FBFAF4 !important; box-shadow:0 1px 3px rgba(0,0,0,.5) !important; }
body.site-liveoftea .cmp-switch input:checked ~ .cmp-switch__track { background:#C6F16D !important; box-shadow:none !important; }
body.site-liveoftea .cmp-switch input:checked ~ .cmp-switch__track::before { background:#0C1912 !important; }
body.site-liveoftea .cmp-switch.is-locked { opacity:.75 !important; }
body.site-liveoftea .cmp-modal__meta { color:rgba(242,241,234,.62) !important; }
body.site-liveoftea .cmp-modal__meta code { background:rgba(242,241,234,.12) !important; }
/* Skip-Link auf lt: Matcha-Pill (cmp.css-Basis nutzt --yellow/--ink-Token) */
body.site-liveoftea .skip-link { background:#C6F16D !important; color:#0C1912 !important; }
/* ============================================================
CONTENT-MODULE (Design-Handoff „liveoftea Contentmodule v2")
13 Module + 4 Textbausteine fuer Artikel-Bodys und intro_html.
Klassennamen = kanonische BEM-Wurzeln der Registry (fact-card,
tips-list, pro-con, …) + lt-eigene method-cards/brew-compare
(ersetzen travel-distances/ski-compare). Vorschau: /lt-modules.html
============================================================ */
/* ---------- fact-card (Steckbrief) ---------- */
.lt .fact-card {
background: var(--card); border: 1px solid var(--border);
border-radius: 20px; padding: 22px 26px; margin: 32px 0;
}
.lt .fact-card__head {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
border-bottom: 1px solid rgba(242,241,234,.14); padding-bottom: 14px; margin-bottom: 18px;
}
.lt .fact-card__title, .lt .fact-card h2.fact-card__title {
font-family: var(--display); font-size: 19px; font-weight: 700; margin: 0;
}
.lt .fact-card h2.fact-card__title::before { content: none; }
.lt .fact-card__badge {
font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
color: var(--accent); background: var(--accent-tint); border-radius: 999px; padding: 5px 12px; flex: none;
}
.lt .fact-card__grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 20px; margin: 0;
}
.lt .fact-card__cell { min-width: 0; }
.lt .fact-card__label {
display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .13em;
text-transform: uppercase; color: var(--ink-62);
}
.lt .fact-card__value { display: block; font-size: 15px; font-weight: 600; margin: 5px 0 0; }
.lt .fact-card__value--accent { color: var(--accent); }
/* ---------- tips-list (Tipp-Liste) ---------- */
.lt .tips-list { list-style: none; display: flex; flex-direction: column; gap: 12px; margin: 32px 0; padding: 0; }
.lt .tips-list__item {
display: flex; gap: 16px; margin: 0;
background: var(--card); border: 1px solid var(--border);
border-radius: 16px; padding: 18px 20px;
}
.lt .tips-list__icon {
width: 36px; height: 36px; border-radius: 999px; flex: none;
background: var(--accent-tint); color: var(--accent);
display: inline-flex; align-items: center; justify-content: center;
/* Altbestand liefert willkuerliche Glyphen mit (♿, ⌘, €, ☀ …) —
font-size:0 blendet sie aus, das ::before setzt einheitlich ✦. */
font-size: 0;
}
.lt .tips-list__icon::before { content: "✦"; font-size: 15px; }
.lt .tips-list__content { min-width: 0; font-size: 14px; line-height: 1.6; color: var(--ink-80); }
.lt .tips-list__content strong { display: block; font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.lt .tips-list__content p { font-size: 14px; line-height: 1.6; color: var(--ink-80); margin: 0; }
/* ---------- pro-con (Dafuer/Dagegen) ---------- */
.lt .pro-con { margin: 32px 0; }
.lt .pro-con__title, .lt .pro-con h2.pro-con__title { font-family: var(--display); font-size: 22px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 16px; }
.lt .pro-con h2.pro-con__title::before { content: none; }
.lt .pro-con__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lt .pro-con__col { border-radius: 18px; padding: 20px 22px; }
.lt .pro-con__col--pro { background: var(--tee-07); border: 1px solid rgba(198,241,109,.25); }
.lt .pro-con__col--con { background: var(--zub-07); border: 1px solid rgba(242,162,92,.28); }
.lt .pro-con__heading { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 14px; font-family: var(--sans); }
.lt .pro-con__col--pro .pro-con__heading { color: var(--tee); }
.lt .pro-con__col--con .pro-con__heading { color: var(--zub); }
.lt .pro-con__list { list-style: none; margin: 0; padding: 0; }
.lt .pro-con__list li {
display: flex; gap: 10px; margin: 0 0 10px;
font-size: 13.5px; line-height: 1.55; color: rgba(242,241,234,.9);
}
.lt .pro-con__list li:last-child { margin-bottom: 0; }
.lt .pro-con__list li::before { font-weight: 700; flex: none; }
.lt .pro-con__col--pro .pro-con__list li::before { content: "✓"; color: var(--tee); }
.lt .pro-con__col--con .pro-con__list li::before { content: "✕"; color: var(--zub); }
/* ---------- insider-quote (Redaktions-Tipp) ---------- */
.lt .insider-quote {
background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--tee);
border-radius: 20px; padding: 24px 28px; margin: 32px 0;
}
.lt .insider-quote__label { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--tee); }
.lt .insider-quote__text {
font-family: var(--display); font-size: 19px; font-weight: 600; line-height: 1.4;
letter-spacing: -.01em; margin: 12px 0 0; color: var(--ink);
}
.lt .insider-quote__byline { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-76); margin: 16px 0 0; }
.lt .insider-quote__byline::before {
content: "R"; width: 32px; height: 32px; border-radius: 999px; flex: none;
background: var(--tee); color: var(--bg);
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--display); font-size: 13px; font-weight: 800;
}
.lt .insider-quote__name { font-weight: 600; color: var(--ink-92); }
/* ---------- itinerary (Ablaufplan-Timeline) ---------- */
.lt .itinerary {
background: var(--card); border: 1px solid var(--border);
border-radius: 20px; padding: 24px 26px; margin: 32px 0;
}
.lt .itinerary__title, .lt .itinerary h2.itinerary__title { font-family: var(--display); font-size: 20px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 18px; }
.lt .itinerary h2.itinerary__title::before { content: none; }
.lt .itinerary__list { list-style: none; margin: 0; padding: 0; }
.lt .itinerary__item { display: grid; grid-template-columns: 52px 22px 1fr; gap: 0 14px; margin: 0; }
.lt .itinerary__item::before {
content: ""; grid-column: 2; grid-row: 1; justify-self: center;
width: 2px; height: 100%; background: rgba(242,241,234,.16); margin-top: 4px;
}
.lt .itinerary__item::after {
content: ""; grid-column: 2; grid-row: 1; justify-self: center;
width: 10px; height: 10px; border-radius: 999px; background: var(--tee); margin-top: 4px;
}
.lt .itinerary__item:last-child::before { display: none; }
.lt .itinerary__time { grid-column: 1; grid-row: 1; font-size: 13px; font-weight: 800; color: var(--tee); padding-top: 1px; }
.lt .itinerary__content { grid-column: 3; grid-row: 1; min-width: 0; padding-bottom: 20px; }
.lt .itinerary__item:last-child .itinerary__content { padding-bottom: 0; }
.lt .itinerary__content strong { display: block; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.lt .itinerary__content p, .lt .itinerary__content span { display: block; font-size: 13.5px; line-height: 1.6; color: var(--ink-76); margin: 4px 0 0; }
/* ---------- method-cards (Zubereitungswege — ersetzt travel-distances) ---------- */
.lt .method-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 32px 0; }
.lt .method-card {
background: var(--card); border: 1px solid var(--border); border-radius: 18px;
padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; min-width: 0;
}
.lt .method-card__kicker { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.lt .method-card__title { font-family: var(--display); font-size: 18px; font-weight: 700; }
.lt .method-card__desc { font-size: 13.5px; line-height: 1.6; color: var(--ink-80); }
.lt .method-card__badge {
margin-top: auto; align-self: flex-start; font-size: 11.5px; font-weight: 700;
color: var(--bg); background: var(--accent); border-radius: 999px; padding: 5px 12px;
}
/* ---------- data-compare (Vergleichstabelle, N Spalten via --cols) ---------- */
.lt .data-compare {
background: var(--card); border: 1px solid var(--border);
border-radius: 20px; padding: 8px 0; overflow: hidden; margin: 32px 0;
}
.lt .data-compare__head, .lt .data-compare__row {
display: grid; grid-template-columns: 1.15fr repeat(var(--cols, 3), 1fr);
gap: 0 12px; padding: 12px 24px; align-items: center; font-size: 13.5px;
}
.lt .data-compare__head { padding: 14px 24px 12px; border-bottom: 1px solid var(--line); }
.lt .data-compare__row { border-bottom: 1px solid rgba(242,241,234,.1); }
.lt .data-compare__row:last-child { border-bottom: none; padding-bottom: 14px; }
.lt .data-compare__metric { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-62); }
.lt .data-compare__row .data-compare__metric { font-size: 13.5px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-72); }
.lt .data-compare__topic { font-family: var(--display); font-size: 16px; font-weight: 700; }
.lt .data-compare__win { color: var(--tee); font-weight: 700; }
.lt .data-compare__top {
font-size: 9px; font-weight: 800; letter-spacing: .1em; color: var(--tee);
background: rgba(198,241,109,.15); border-radius: 6px; padding: 2px 6px;
vertical-align: 1px; margin-left: 4px;
}
/* ---------- brew-compare (Aufguss-Vergleich — ersetzt ski-compare) ---------- */
.lt .brew-compare {
background: var(--card); border: 1px solid var(--border);
border-radius: 20px; padding: 8px 0; margin: 32px 0;
}
.lt .brew-compare__head, .lt .brew-compare__row {
display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 12px;
padding: 12px 24px; align-items: center; font-size: 13.5px;
}
.lt .brew-compare__head { padding: 14px 24px 12px; border-bottom: 1px solid var(--line); }
.lt .brew-compare__row { border-bottom: 1px solid rgba(242,241,234,.1); }
.lt .brew-compare__row:last-child { border-bottom: none; padding-bottom: 14px; }
.lt .brew-compare__metric { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-62); }
.lt .brew-compare__row .brew-compare__metric { font-size: 13.5px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-72); }
.lt .brew-compare__pill { justify-self: start; font-size: 12px; font-weight: 700; color: var(--bg); border-radius: 999px; padding: 6px 14px; }
.lt .brew-compare__pill--a { background: var(--tee); }
.lt .brew-compare__pill--b { background: var(--zub); }
/* ---------- activity-grid (Empfehlungs-Grid) ---------- */
.lt .activity-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 32px 0; }
.lt .activity-card { background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 20px 22px; min-width: 0; }
.lt .activity-card__badges { display: flex; flex-wrap: wrap; gap: 6px; }
.lt .activity-card__badge {
font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
color: var(--ink-76); border: 1px solid rgba(242,241,234,.3); border-radius: 999px; padding: 4px 10px;
}
.lt .activity-card__badge--tee { color: var(--tee); background: var(--tee-13); border: none; }
.lt .activity-card__badge--zub { color: var(--zub); background: var(--zub-13); border: none; }
.lt .activity-card__badge--sue { color: var(--sue); background: var(--sue-13); border: none; }
.lt .activity-card__title, .lt .activity-card h3 { display: block; font-family: var(--display); font-size: 18px; font-weight: 700; margin: 12px 0 0; }
.lt .activity-card__desc, .lt .activity-card p { display: block; font-size: 13.5px; line-height: 1.6; color: var(--ink-76); margin: 6px 0 0; }
/* ---------- best-time (Erntezeiten) ---------- */
.lt .best-time { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 32px 0; }
.lt .best-time__card { background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 20px 22px; min-width: 0; }
.lt .best-time__months { display: block; font-family: var(--display); font-size: 22px; font-weight: 800; letter-spacing: -.01em; color: var(--tee); }
.lt .best-time__label { display: block; font-size: 14px; font-weight: 700; margin-top: 8px; }
.lt .best-time__card p, .lt .best-time__desc { display: block; font-size: 13px; line-height: 1.6; color: var(--ink-76); margin: 6px 0 0; }
.lt .best-time__badge {
display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
color: var(--ink-76); border: 1px solid rgba(242,241,234,.3); border-radius: 999px; padding: 4px 10px; margin-top: 12px;
}
.lt .best-time__badge--tipp { color: var(--sue); border-color: rgba(255,194,0,.5); }
/* ---------- season-grid (Erntekalender, 12 Monate) ---------- */
.lt .season-grid {
background: var(--card); border: 1px solid var(--border);
border-radius: 20px; padding: 22px 24px; margin: 32px 0;
}
.lt .season-grid__cal { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; }
.lt .season-grid__month {
display: block; text-align: center; padding: 13px 0; border-radius: 10px;
font-size: 11.5px; font-weight: 700;
background: none; color: rgba(242,241,234,.6); border: 1px solid rgba(242,241,234,.22);
}
.lt .season-grid__month--haupt { background: var(--tee); color: var(--bg); border-color: var(--tee); }
.lt .season-grid__month--neben { background: rgba(242,162,92,.16); color: var(--zub); border-color: rgba(242,162,92,.55); }
.lt .season-grid__month--geheim { background: rgba(255,194,0,.14); color: var(--sue); border-color: rgba(255,194,0,.55); }
.lt .season-grid__legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 16px; font-size: 11.5px; color: var(--ink-76); }
.lt .season-grid__key { display: inline-flex; align-items: center; gap: 7px; }
.lt .season-grid__dot { width: 11px; height: 11px; border-radius: 4px; border: 1px solid rgba(242,241,234,.3); }
.lt .season-grid__dot--haupt { background: var(--tee); border-color: var(--tee); }
.lt .season-grid__dot--neben { background: rgba(242,162,92,.2); border-color: rgba(242,162,92,.6); }
.lt .season-grid__dot--geheim { background: rgba(255,194,0,.16); border-color: rgba(255,194,0,.6); }
.lt .season-grid__note { font-size: 13px; line-height: 1.6; color: var(--ink-72); margin: 14px 0 0; }
/* ---------- td-chart (Balken + Donut) ---------- */
.lt .td-chart-row { display: grid; grid-template-columns: 1.25fr 1fr; gap: 12px; margin: 32px 0; }
.lt .td-chart-row .td-chart { margin: 0; }
.lt .td-chart {
background: var(--card); border: 1px solid var(--border);
border-radius: 20px; padding: 22px 24px; margin: 32px 0; min-width: 0;
}
.lt .td-chart__title { display: block; font-size: 13px; font-weight: 700; }
.lt .td-chart__sub { display: block; font-size: 11.5px; color: var(--ink-62); margin-top: 3px; }
.lt .td-chart__bars { margin-top: 8px; }
.lt .td-chart__bar { display: grid; grid-template-columns: 88px 1fr 42px; gap: 12px; align-items: center; margin-top: 10px; }
.lt .td-chart__name { font-size: 12.5px; color: rgba(242,241,234,.85); }
.lt .td-chart__track { height: 12px; border-radius: 999px; background: rgba(242,241,234,.08); overflow: hidden; }
.lt .td-chart__fill { display: block; height: 12px; border-radius: 999px; background: var(--tee); }
.lt .td-chart__fill--muted { background: rgba(242,241,234,.35); }
.lt .td-chart__val { font-size: 12.5px; font-weight: 700; text-align: right; }
.lt .td-chart__donut { display: flex; align-items: center; gap: 18px; margin-top: 16px; }
.lt .td-chart__donut svg { flex: none; }
.lt .td-chart__legend { display: flex; flex-direction: column; gap: 8px; font-size: 12px; min-width: 0; }
.lt .td-chart__key { display: inline-flex; align-items: center; gap: 7px; }
.lt .td-chart__swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }
/* ---------- location-map (Anbaugebiete) ---------- */
.lt .location-map {
position: relative; border-radius: 20px; overflow: hidden;
border: 1px solid var(--border); background: var(--card-deep); margin: 32px 0 12px;
}
.lt .location-map__tiles { display: flex; }
.lt .location-map__tiles img, .lt .location-map__img { display: block; width: 100%; height: auto; }
.lt .location-map__tiles img { width: 33.3334%; }
.lt .location-map__pin { position: absolute; transform: translate(-50%, -50%); text-align: center; }
.lt .location-map__dot {
display: block; width: 10px; height: 10px; border-radius: 999px;
background: var(--tee); border: 2px solid var(--bg); margin: 0 auto;
}
.lt .location-map__dot--zub { background: var(--zub); }
.lt .location-map__dot--sue { background: var(--sue); }
.lt .location-map__label {
display: block; background: rgba(12,25,18,.88); border-radius: 8px; padding: 3px 8px;
font-size: 10.5px; font-weight: 700; white-space: nowrap; margin-top: 4px; color: var(--ink);
}
.lt .location-map__pin--above .location-map__label { margin: 0 0 4px; }
.lt .location-map__attribution {
position: absolute; right: 10px; bottom: 10px;
background: rgba(12,25,18,.85); border-radius: 8px; padding: 3px 8px;
font-size: 9.5px; color: rgba(242,241,234,.75);
}
.lt .location-map__caption { font-size: 13px; line-height: 1.6; color: var(--ink-72); margin: 12px 0 32px; }
/* ---------- Typografische Bausteine ---------- */
.lt .article-lead, .lt-prose .article-lead { font-size: 19px !important; line-height: 1.65 !important; color: rgba(242,241,234,.94) !important; }
.lt .article-summary {
background: rgba(198,241,109,.08); border: 1px solid rgba(198,241,109,.3);
border-radius: 18px; padding: 20px 24px; margin: 32px 0;
}
.lt .article-summary__label { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--tee); margin-bottom: 12px; }
.lt .article-summary__item { display: flex; gap: 10px; font-size: 14px; line-height: 1.6; color: var(--ink-92); margin-top: 8px; }
.lt .article-summary__item:first-of-type { margin-top: 0; }
.lt .article-summary__item::before { content: "✦"; color: var(--tee); flex: none; }
.lt .article-hint {
display: flex; gap: 14px;
background: rgba(255,194,0,.08); border: 1px solid rgba(255,194,0,.35);
border-radius: 16px; padding: 16px 20px; margin: 32px 0;
}
.lt .article-hint::before {
content: "!"; width: 30px; height: 30px; border-radius: 999px; flex: none;
background: rgba(255,194,0,.16); color: var(--sue);
display: inline-flex; align-items: center; justify-content: center;
font-size: 14px; font-weight: 800;
}
.lt .article-hint__body { min-width: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-88); }
.lt .article-hint__body strong { display: block; font-size: 13.5px; font-weight: 700; color: var(--sue); margin-bottom: 3px; }
.lt .article-hint__body p { font-size: 13.5px; line-height: 1.6; color: var(--ink-88); margin: 0; }
.lt .section-divider { display: flex; justify-content: center; gap: 18px; padding: 8px 0; color: var(--tee); font-size: 13px; margin: 32px 0; }
.lt .section-divider span:nth-child(2), .lt .section-divider__dots span:nth-child(2) { opacity: .55; }
.lt .section-divider__dots { display: flex; gap: 18px; }
.lt .section-divider__dots:empty::before { content: "✦"; }
/* ---------- Module responsive ---------- */
@media (max-width: 900px) {
.lt .fact-card__grid { grid-template-columns: 1fr 1fr; }
.lt .method-cards, .lt .best-time { grid-template-columns: 1fr; }
.lt .td-chart-row { grid-template-columns: 1fr; }
.lt .season-grid__cal { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 720px) {
.lt .pro-con__cols, .lt .activity-grid { grid-template-columns: 1fr; }
.lt .fact-card__grid { gap: 14px 16px; }
.lt .data-compare, .lt .brew-compare { overflow-x: auto; }
.lt .data-compare__head, .lt .data-compare__row { min-width: 560px; }
.lt .brew-compare__head, .lt .brew-compare__row { min-width: 480px; }
.lt .itinerary__item { grid-template-columns: 44px 18px 1fr; gap: 0 10px; }
}
/* ============================================================
ALTBESTAND-MODULE (wl-Generator-Markup in bestehenden lt-Bodys)
Vor dem Redesign generierte Artikel nutzen den Magazin-Katalog:
infobox, badge-speech, fact-grid, data-flow, list--check,
text-highlight, related-content sowie wl-Markup-Varianten von
data-compare (__col-Zellen + __value-Karten) und article-summary
(Klasse direkt am ). Hier auf das lt-Design gemappt.
============================================================ */
/* ---------- infobox (Hinweis-Block mit Titel) ---------- */
.lt .infobox {
background: var(--tee-07); border: 1px solid rgba(198,241,109,.3);
border-radius: 18px; padding: 20px 24px; margin: 32px 0;
}
.lt .infobox__title {
display: block; font-family: var(--display); font-size: 16px; font-weight: 700;
color: var(--tee); margin-bottom: 8px;
}
.lt .infobox p { font-size: 14.5px; line-height: 1.65; color: var(--ink-88); margin: 0 0 10px; }
.lt .infobox p:last-child { margin-bottom: 0; }
/* ---------- badge-speech (redaktionelle Einordnung) ---------- */
.lt .badge-speech {
position: relative;
background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--tee);
border-radius: 18px; padding: 18px 22px; margin: 32px 0;
font-size: 14.5px; line-height: 1.65; color: var(--ink-88);
}
/* ---------- fact-grid (KPI-Grid) ---------- */
.lt .fact-grid {
background: var(--card); border: 1px solid var(--border);
border-radius: 20px; padding: 22px 24px; margin: 32px 0;
}
.lt .fact-grid__head {
display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px;
border-bottom: 1px solid rgba(242,241,234,.14); padding-bottom: 14px; margin-bottom: 18px;
}
.lt .fact-grid__badge {
font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
color: var(--tee); background: var(--tee-13); border-radius: 999px; padding: 5px 12px;
}
.lt .fact-grid__title { font-family: var(--display); font-size: 17px; font-weight: 700; }
.lt .fact-grid__items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lt .fact-grid__item { min-width: 0; text-align: center; }
/* Altbestand bringt td-Markenfarben als inline --accent mit -> auf die
lt-Weltfarben zwingen (!important schlaegt inline style), im Wechsel. */
.lt .fact-grid__item { --accent: var(--tee) !important; }
.lt .fact-grid__item:nth-child(3n+2) { --accent: var(--zub) !important; }
.lt .fact-grid__item:nth-child(3n) { --accent: var(--sue) !important; }
.lt .fact-grid__ico {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px; border-radius: 999px; color: var(--accent);
background: rgba(242,241,234,.06); margin-bottom: 10px;
}
.lt .fact-grid__ico svg { width: 20px; height: 20px; }
.lt .fact-grid__value { font-family: var(--display); font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: var(--accent); }
.lt .fact-grid__label { font-size: 13.5px; font-weight: 700; margin-top: 4px; }
.lt .fact-grid__context { font-size: 12.5px; line-height: 1.55; color: var(--ink-68); margin-top: 5px; }
.lt .fact-grid__source { display: block; font-size: 11.5px; color: var(--ink-62); margin-top: 14px; }
/* ---------- data-flow (Prozess-Schritte mit Pfeilen) ---------- */
.lt .data-flow {
background: var(--card); border: 1px solid var(--border);
border-radius: 20px; padding: 22px 24px; margin: 32px 0;
}
.lt .data-flow__head {
display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px;
border-bottom: 1px solid rgba(242,241,234,.14); padding-bottom: 14px; margin-bottom: 18px;
}
.lt .data-flow__badge {
font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
color: var(--tee); background: var(--tee-13); border-radius: 999px; padding: 5px 12px;
}
.lt .data-flow__title { font-family: var(--display); font-size: 17px; font-weight: 700; }
.lt .data-flow__steps { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; }
.lt .data-flow__step {
flex: 1 1 120px; min-width: 110px; text-align: center;
background: rgba(242,241,234,.04); border: 1px solid var(--line);
border-radius: 14px; padding: 14px 12px;
}
.lt .data-flow__step-ico {
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px; border-radius: 999px;
background: var(--tee-13); margin-bottom: 8px;
color: var(--tee) !important; /* inline --step-color (td-Palette) neutralisieren */
}
.lt .data-flow__step-ico svg { width: 17px; height: 17px; }
.lt .data-flow__step-label { font-size: 13px; font-weight: 700; }
.lt .data-flow__step-desc { font-size: 12px; line-height: 1.5; color: var(--ink-68); margin-top: 3px; }
.lt .data-flow__arrow { align-self: center; flex: none; color: var(--tee); }
.lt .data-flow__arrow svg { width: 18px; height: 18px; display: block; }
.lt .data-flow__source { display: block; font-size: 11.5px; color: var(--ink-62); margin-top: 14px; }
/* ---------- data-compare: wl-Markup-Varianten ---------- */
/* Vergroessern-Button des Magazin-Templates: braucht article-types.js,
das lt nicht mehr laedt -> toter Button, ausblenden. */
.lt .data-compare__expand { display: none; }
/* Spalten-Header (__col im __head) wie __topic behandeln */
.lt .data-compare__head .data-compare__col { font-family: var(--display); font-size: 15px; font-weight: 700; }
.lt .data-compare__head .data-compare__topic { font-size: 13px; font-weight: 700; color: var(--ink-72); font-family: var(--sans); align-self: center; }
.lt .data-compare__col { min-width: 0; }
/* Wertekarten-Variante: __value mit __value-num/__value-desc */
.lt .data-compare__value { min-width: 0; }
.lt .data-compare__value-num { display: block; font-size: 13.5px; font-weight: 700; }
.lt .data-compare__value-desc { display: block; font-size: 12px; line-height: 1.5; color: var(--ink-68); margin-top: 2px; }
.lt .data-compare__value--winner .data-compare__value-num { color: var(--tee); }
.lt .data-compare__value--winner .data-compare__value-num::after {
content: "TOP"; font-size: 9px; font-weight: 800; letter-spacing: .1em; color: var(--tee);
background: rgba(198,241,109,.15); border-radius: 6px; padding: 2px 6px;
vertical-align: 1px; margin-left: 6px;
}
/* ---------- related-content (auto-generierte Empfehlungen) ---------- */
.lt .related-content {
background: var(--card); border: 1px solid var(--border);
border-radius: 20px; padding: 22px 26px; margin: 36px 0 0;
}
.lt .related-content__title {
font-family: var(--sans); font-size: 11px; font-weight: 800; letter-spacing: .16em;
text-transform: uppercase; color: var(--ink-62); margin: 0 0 12px;
}
.lt .related-content__list { list-style: none; margin: 0; padding: 0; }
.lt .related-content__list li { display: flex; gap: 10px; margin: 0 0 10px; }
.lt .related-content__list li:last-child { margin-bottom: 0; }
.lt .related-content__list li::before { content: "→"; color: var(--tee); flex: none; }
.lt .related-content__list a {
color: var(--ink-92); text-decoration: none;
font-size: 14.5px; font-weight: 600; line-height: 1.45;
}
.lt .related-content__list a:hover { color: var(--tee); }
/* ---------- list--check (Checkliste) ---------- */
.lt ul.list--check { list-style: none; padding: 0; margin: 0 0 24px; }
.lt ul.list--check li { position: relative; padding-left: 30px; margin-bottom: 10px; font-size: 15.5px; }
.lt ul.list--check li::before {
content: "✓"; position: absolute; left: 0; top: 0;
width: 20px; height: 20px; border-radius: 999px;
background: var(--tee-13); color: var(--tee);
display: inline-flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 700;
}
/* ---------- text-highlight (Inline-Marker) ---------- */
.lt .text-highlight { background: rgba(198,241,109,.3); color: inherit; border-radius: 4px; padding: 0 3px; margin: 0 -1px; }
/* ---------- article-summary als
-Klasse (wl-Lead-Variante) ---------- */
.lt p.article-summary { font-size: 15px; }
.lt .article-summary__title { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--tee); margin-bottom: 10px; }
.lt .article-summary a { color: var(--tee); text-decoration: underline; text-underline-offset: 3px; }
/* ---------- highlight (Empfehlungs-Kasten, wl-Legacy) ---------- */
.lt .highlight {
background: var(--tee-07); border: 1px solid rgba(198,241,109,.3);
border-radius: 18px; padding: 20px 24px; margin: 32px 0;
}
.lt .highlight h4 { font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--tee); margin: 0 0 8px; font-family: var(--sans); }
.lt .highlight h3 { font-family: var(--display); font-size: 18px; font-weight: 700; margin: 0 0 8px; }
.lt .highlight p { font-size: 14.5px; line-height: 1.65; color: var(--ink-88); margin: 0; }
/* ---------- Altbestand responsive ---------- */
@media (max-width: 720px) {
.lt .fact-grid__items { grid-template-columns: 1fr; }
.lt .fact-grid__item { text-align: left; display: grid; grid-template-columns: 40px 1fr; gap: 4px 14px; }
.lt .fact-grid__ico { grid-row: 1 / span 3; margin-bottom: 0; }
.lt .data-flow__steps { flex-direction: column; }
.lt .data-flow__arrow { transform: rotate(90deg); align-self: center; }
}