/* Journal subsystem: journal.html - primary stylesheet */
.journal-start { border-bottom: var(--linie) solid var(--lhb-line-color); }
/* ── JOURNAL-TITELSEITE: eigenständige Vollbildmarke ohne Website-Header ── */
.journal-brand {
--journal-pad-x: clamp(28px, 4.7vw, 76px);
--journal-pad-top: clamp(24px, 3.4vh, 50px);
--journal-pad-bottom: clamp(28px, 4.2vh, 58px);
position: relative;
box-sizing: border-box;
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto auto;
gap: clamp(18px, 2.6vh, 32px);
padding: var(--journal-pad-top) var(--journal-pad-x) var(--journal-pad-bottom);
overflow: hidden;
border-bottom: var(--linie) solid var(--lhb-line-color);
background: var(--weiss);
}
.journal-back {
position: relative;
z-index: 4;
justify-self: start;
display: inline-flex;
align-items: center;
gap: .75rem;
color: var(--schwarz);
font-family: var(--journal-font-body);
font-size: clamp(.95rem, 1.35vw, 1.15rem);
line-height: 1;
text-decoration: none;
}
.journal-back i { font-size: clamp(1.5rem, 2.2vw, 2rem); }
.journal-back:hover { color: var(--lila); }
.journal-back:focus-visible,
.journal-cover-scroll:focus-visible,
.journal-current-link:focus-visible {
outline: 3px solid var(--journal-focus-color);
outline-offset: 5px;
}
.journal-brand-stage {
min-height: 0;
display: grid;
grid-template-columns: minmax(180px, .72fr) minmax(0, 2.28fr);
align-items: center;
gap: clamp(42px, 6vw, 96px);
width: min(1260px, 100%);
margin: 0 auto;
}
.journal-brand-mark {
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
}
.journal-brand-sign {
display: block;
width: min(100%, clamp(170px, 17vw, 250px));
max-height: min(57vh, 510px);
height: auto;
}
.journal-brand-body { min-width: 0; }
.journal-brand-title {
margin: 0;
max-width: 100%;
font-family: var(--journal-font-display);
font-size: clamp(4.3rem, 8.3vw, 8.6rem);
line-height: .88;
letter-spacing: -.025em;
text-transform: uppercase;
font-weight: 800;
color: var(--schwarz);
}
.journal-title-line { display: block; white-space: nowrap; }
.journal-brand-subline {
margin: clamp(1.25rem, 2.5vh, 2rem) 0 0;
max-width: 820px;
font-family: var(--journal-font-body);
font-size: clamp(1.1rem, 1.9vw, 1.55rem);
line-height: 1.35;
color: var(--schwarz);
}
.journal-current {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
min-height: clamp(64px, 8vh, 82px);
border-top: var(--linie) solid var(--lhb-line-color);
border-bottom: var(--linie) solid var(--lhb-line-color);
}
.journal-current-heading {
align-self: stretch;
display: flex;
align-items: center;
gap: .35rem;
padding-right: .75rem;
border-right: var(--linie) solid var(--lhb-line-color);
}
.journal-current-label {
padding: 0 clamp(1.1rem, 2vw, 1.8rem);
padding-right: .45rem;
font-family: var(--journal-font-display);
font-size: clamp(.7rem, 1vw, .9rem);
font-weight: 800;
letter-spacing: .11em;
text-transform: uppercase;
color: var(--lila);
white-space: nowrap;
}
.journal-current-toggle {
position: relative;
flex: 0 0 34px;
width: 34px;
height: 34px;
padding: 0;
border: var(--lhb-line-width-thin) solid var(--lhb-line-color);
background: var(--weiss);
color: var(--schwarz);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.journal-current-toggle:hover { background: var(--schwarz); color: var(--weiss); }
.journal-current-toggle:disabled { cursor: default; color: var(--lhb-neutral-650); opacity:.65; }
.journal-current-toggle-icon{ position:relative;display:block;width:14px;height:14px; }
.journal-current-toggle-icon::before,
.journal-current-toggle-icon::after{
content:"";position:absolute;top:1px;width:3px;height:12px;background:currentColor;
}
.journal-current-toggle-icon::before{left:2px;}
.journal-current-toggle-icon::after{right:2px;}
.journal-current-toggle[aria-pressed="true"]:not(:disabled) .journal-current-toggle-icon::before{
left:3px;top:1px;width:0;height:0;background:transparent;
border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:10px solid currentColor;
}
.journal-current-toggle[aria-pressed="true"]:not(:disabled) .journal-current-toggle-icon::after{display:none;}
.journal-current-marquee { min-width: 0; overflow: hidden; }
.journal-current-track {
display: flex;
align-items: center;
width: max-content;
will-change: transform;
animation: journalTicker 34s linear infinite;
}
.journal-current-marquee:hover .journal-current-track,
.journal-current-marquee:focus-within .journal-current-track,
.journal-current.is-paused .journal-current-track { animation-play-state: paused; }
.journal-current-link {
display: inline-flex;
align-items: center;
gap: 1.05rem;
padding: 0 1.25rem;
color: var(--schwarz);
font-family: var(--journal-font-body);
font-size: clamp(.9rem, 1.25vw, 1.08rem);
line-height: 1.25;
text-decoration: none;
white-space: nowrap;
}
.journal-current-link::after { content: "—"; opacity: .75; }
.journal-current-link:hover { color: var(--lila); }
@keyframes journalTicker { to { transform: translateX(-50%); } }
.journal-cover-scroll {
justify-self: center;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
background: transparent;
color: var(--schwarz);
font-size: clamp(1.8rem, 2.6vw, 2.4rem);
line-height: 1;
text-decoration: none;
animation: journalScrollHint 2.6s ease-in-out 1;
}
.journal-cover-scroll:hover { color: var(--lila); }
@keyframes journalScrollHint {
0%, 100% { transform: translateY(0); opacity: .68; }
50% { transform: translateY(6px); opacity: 1; }
}
#journal-aktuell { scroll-margin-top: 0; }
.journal-current-list { display: none; }
/* ── AUFMACHER ───────────────────────────────────── */
.lead-story {
display: grid;
grid-template-columns: minmax(0, 1.12fr) minmax(360px, .88fr);
min-height: 560px;
border-bottom: var(--linie) solid var(--lhb-line-color);
background: var(--lila);
color: var(--weiss);
}
.lead-story--landing {
box-sizing: border-box;
}
@media (min-width: 1101px) {
.lead-story--landing {
height: calc(var(--journal-viewport-height, 100dvh) - var(--journal-header-offset, 136px) - var(--journal-aktuell-offset, 84px));
min-height: 0;
}
}
.lead-story-media {
position: relative;
overflow: hidden;
min-height: 420px;
border-right: var(--linie) solid var(--lhb-line-color);
background: var(--lhb-neutral-225);
}
.lead-story-img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.lead-story-body {
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 1.6rem;
padding: clamp(2rem, 4.5vw, 4.5rem);
}
.lead-story-label,
.section-mini-label,
.feed-label,
.card-label {
font-family: var(--journal-font-display);
font-size: 10px;
font-weight: 800;
letter-spacing: .15em;
text-transform: uppercase;
}
.lead-story-label { color: rgba(255,255,255,.62); }
.lead-story-title {
margin: 0;
font-family: var(--journal-font-display);
font-size: clamp(3.1rem, 7.2vw, 6.4rem);
line-height: .9;
letter-spacing: .002em;
text-transform: uppercase;
font-weight: 800;
color: var(--lhb-color-paper);
}
.lead-story-text {
max-width: 620px;
display: grid;
gap: .8rem;
font-size: 18px;
line-height: 1.65;
color: var(--lhb-overlay-light-78);
}
.lead-story-text p { margin: 0; }
.lead-story-meta {
border-top: var(--lhb-line-width-thin) solid rgba(255,255,255,.28);
padding-top: .9rem;
display: flex;
gap: 1.25rem;
flex-wrap: wrap;
font-family: var(--journal-font-display);
font-size: 10px;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
color: rgba(255,255,255,.62);
}
.lead-story:hover .lead-story-title { color: var(--flieder); }
/* ── STORYS / PODCAST ────────────────────────────── */
.story-list,
.podcast-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
border-bottom: var(--linie) solid var(--lhb-line-color);
}
.story-card,
.podcast-card {
display: grid;
grid-template-columns: 44% 1fr;
min-height: 320px;
border-right: var(--linie) solid var(--lhb-line-color);
color: inherit;
background: var(--weiss);
}
.story-card:nth-child(2n),
.podcast-card:nth-child(2n) { border-right: none; }
.podcast-list > .podcast-card:only-child { border-right: none; }
.podcast-card {
grid-template-columns: clamp(250px, 26vw, 320px) 1fr;
min-height: clamp(250px, 26vw, 320px);
align-items: stretch;
}
.story-card:hover .story-title,
.podcast-card:hover .story-title { color: var(--lila); }
.story-img-wrap,
.podcast-img-wrap {
position: relative;
overflow: hidden;
background: var(--lhb-neutral-150);
border-right: var(--linie) solid var(--lhb-line-color);
}
.story-img,
.podcast-cover-img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.story-body {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 2rem;
padding: 2rem;
}
.story-label { color: var(--lila); margin-bottom: 1rem; }
.story-title {
font-family: var(--journal-font-display);
font-size: clamp(2rem, 4vw, 4rem);
line-height: .92;
letter-spacing: 0;
text-transform: uppercase;
font-weight: 800;
margin: 0 0 1rem;
transition: color .15s ease;
}
.story-teaser { color: var(--text-neben); line-height: 1.65; max-width: 560px; }
.story-meta {
border-top: var(--lhb-line-width-thin) solid var(--lhb-neutral-225);
padding-top: .85rem;
font-family: var(--journal-font-display);
font-size: 10px;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--text-meta);
display: flex;
gap: 1.25rem;
flex-wrap: wrap;
}
.podcast-img-wrap {
background: var(--schwarz);
display: flex;
align-items: center;
justify-content: center;
border-right: none;
aspect-ratio: 1 / 1;
min-height: clamp(250px, 26vw, 320px);
}
.podcast-ph {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
width: 100%; height: 100%;
background: var(--lila);
}
.podcast-ph-nr {
font-family: var(--journal-font-display);
font-size: clamp(4rem, 10vw, 8rem);
font-weight: 800;
letter-spacing: 0;
color: rgba(255,255,255,.15);
line-height: 1;
}
.podcast-ph-icon { font-size: 3rem; color: rgba(255,255,255,.35); }
/* ── STORY-SLIDER ───────────────────────────────── */
.story-section-label {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.story-slider-hint {
display: inline-flex;
align-items: center;
gap: .45rem;
font-family: var(--journal-font-display);
font-size: 10px;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--text-meta);
opacity: .78;
transition: color .18s ease, opacity .18s ease, transform .18s ease;
white-space: nowrap;
}
.story-slider-hint i {
font-size: 14px;
transition: transform .18s ease;
}
.story-slider-wrap {
position: relative;
border-bottom: var(--linie) solid var(--lhb-line-color);
background: var(--weiss);
}
.story-slider-wrap::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 88px;
height: 100%;
pointer-events: none;
background: linear-gradient(to left, rgba(255,255,255,.96), rgba(255,255,255,0));
opacity: 0;
transition: opacity .18s ease;
}
.story-slider-wrap:hover::after { opacity: 1; }
.story-slider-wrap:hover .story-slider-hint,
.story-section-label:hover .story-slider-hint {
color: var(--schwarz);
opacity: 1;
}
.story-slider-wrap:hover .story-slider-hint i,
.story-section-label:hover .story-slider-hint i { transform: translateX(.25rem); }
.story-slider-track {
display: flex;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
-ms-overflow-style: none;
}
.story-slider-track::-webkit-scrollbar { display: none; }
.story-slider-track .story-card {
flex: 0 0 50%;
min-width: 0;
scroll-snap-align: start;
border-right: var(--linie) solid var(--lhb-line-color);
}
.story-slider-track .story-card:last-child { border-right: none; }
/* ── FEED ────────────────────────────────────────── */
.feed-head {
display: grid;
grid-template-columns: 280px 1fr;
border-bottom: var(--linie) solid var(--lhb-line-color);
background: var(--weiss);
}
.feed-head-side {
padding: clamp(.8rem, 1.4vw, 1rem) clamp(.65rem, 1.1vw, .85rem) clamp(.2rem, .55vw, .45rem) clamp(.7rem, 1.2vw, .9rem);
border-right: var(--linie) solid var(--lhb-line-color);
display: flex;
align-items: flex-end;
justify-content: flex-start;
min-height: 210px;
}
.feed-head-sign {
display: block;
width: clamp(116px, 10vw, 152px);
max-width: 100%;
height: auto;
}
.feed-head-main { padding: 1.5rem 2rem; }
.feed-title {
margin: 0 0 .75rem;
font-family: var(--journal-font-display);
font-size: clamp(1.7rem, 3vw, 2.8rem);
line-height: .95;
letter-spacing: 0;
text-transform: uppercase;
font-weight: 800;
color: var(--schwarz);
}
.feed-desc { max-width: 760px; color: var(--text-neben); line-height: 1.65; }
.feed-filters { display:none; }
.feed-tools { display:grid; gap:.8rem; margin-top:1rem; }
.feed-row { display:grid; gap:.45rem; align-items:center; }
.feed-filter-grid { display:grid; grid-template-columns:minmax(420px,1.55fr) minmax(330px,1fr); gap:1rem 1.35rem; align-items:start; }
.feed-filter-stack { display:grid; grid-template-rows:minmax(40px,auto) minmax(40px,auto); gap:.75rem; min-width:0; }
.feed-filter-taxonomy { min-width:0; }
.feed-region-reset-row { display:grid; grid-template-columns:minmax(190px,1fr) auto; gap:.85rem; align-items:center; min-width:0; }
.feed-period { display:grid; gap:.8rem; align-items:center; margin:0; min-width:0; }
.feed-period-label { font-family:var(--journal-font-display); font-size:var(--lhb-type-kicker-size); font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--lila); }
.feed-row-years { }
.feed-filter {
border: var(--linie) solid var(--lhb-line-color);
background: var(--weiss);
color: var(--schwarz);
padding: .55rem .75rem;
font-family: var(--journal-font-display);
font-size: 10px;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
cursor: pointer;
}
.feed-filter.is-active,
.feed-filter:hover { background: var(--schwarz); color: var(--weiss); }
.feed-year-row { display:grid; grid-template-columns:90px 90px minmax(220px,360px); gap:.45rem; align-items:center; max-width:560px; }
.feed-year-input { border:var(--linie) solid var(--lhb-line-color); background:var(--weiss); color:var(--schwarz); min-height:40px; padding:.55rem .75rem; font-family:var(--journal-font-display); font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.feed-range { position:relative; height:28px; min-width:220px; }
.feed-range-track { position:absolute; left:0; right:0; top:11px; height:7px; background:var(--lhb-neutral-250); border-radius:999px; }
.feed-range-fill { position:absolute; top:0; bottom:0; background:var(--lila); border-radius:999px; }
.feed-range input[type=range] { position:absolute; left:0; top:0; width:100%; height:28px; margin:0; background:transparent; pointer-events:none; -webkit-appearance:none; appearance:none; }
.feed-range input[type=range]:focus, .feed-range input[type=range]:focus-visible { ; }
.feed-range input[type=range]::-webkit-slider-runnable-track { height:7px; background:transparent; border:0; }
.feed-range input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:16px; height:16px; margin-top:-4.5px; border-radius:50%; background:var(--lila); border:var(--lhb-line-width-medium) solid var(--lila); cursor:pointer; pointer-events:auto; }
.feed-range input[type=range]::-moz-range-thumb { width:16px; height:16px; border-radius:50%; background:var(--lila); border:var(--lhb-line-width-medium) solid var(--lila); cursor:pointer; pointer-events:auto; }
.feed-search,
.feed-select {
border: var(--linie) solid var(--lhb-line-color);
background: var(--weiss);
color: var(--schwarz);
min-height: 40px;
padding: .55rem .75rem;
font-family: var(--journal-font-display);
font-size: 10px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
.feed-search { min-width: 0; width:100%; }
.feed-search::placeholder { color: var(--text-meta); opacity: 1; }
.feed-select { min-width:0; width:100%; cursor:pointer; }
.feed-reset { justify-self:start; align-self:center; }
.feed-multi-wrap { position: relative; min-width: 180px; }
.feed-multi-toggle { width:100%; min-height:40px; display:flex; align-items:center; justify-content:space-between; gap:10px; border:var(--linie) solid var(--lhb-line-color); background:var(--weiss); padding:10px 11px; font-family:var(--journal-font-body); font-size:13px; text-align:left; cursor:pointer; }
.feed-multi-toggle strong { font-family:var(--journal-font-body); font-size:13px; font-weight:400; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.feed-multi-toggle i { font-size:16px; transition:transform .18s ease; }
.feed-multi-toggle.is-open i { transform:rotate(180deg); }
.feed-multi-panel { display:none; position:absolute; z-index:60; left:0; right:0; top:100%; border:var(--linie) solid var(--lhb-line-color); border-top:0; background:var(--weiss); max-height:220px; overflow:auto; padding:8px; box-shadow:0 12px 24px rgba(0,0,0,.12); }
.feed-multi-panel.is-open { display:grid; gap:6px; }
.feed-multi-option { display:flex; gap:8px; align-items:flex-start; font-family:var(--journal-font-body); font-size:13px; line-height:1.35; cursor:pointer; padding:3px 4px; }
.feed-multi-option:hover { background:var(--lhb-surface-accent-7); }
.feed-multi-option input { flex:0 0 auto; width:15px; height:15px; margin-top:1px; accent-color:var(--lila); }
.article-list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
border-bottom: 0;
}
.article-card {
display: flex;
flex-direction: column;
min-height: 100%;
border-right: var(--linie) solid var(--lhb-line-color);
border-bottom: var(--linie) solid var(--lhb-line-color);
color: inherit;
background: var(--weiss);
box-sizing: border-box;
}
.article-card:nth-child(3n) { border-right: none; }
.article-card.is-hidden { display: none; }
.article-card.is-last-visible-row { border-bottom: 0 !important; }
.article-card:hover .article-title { color: var(--lila); }
.article-img-wrap {
position: relative;
overflow: hidden;
background: var(--lhb-neutral-150);
border-bottom: var(--linie) solid var(--lhb-line-color);
}
.article-img {
width: 100%;
aspect-ratio: 3 / 2;
object-fit: cover;
object-position: center;
display: block;
}
.article-ph {
aspect-ratio: 3 / 2;
background: var(--lila);
display: flex;
align-items: center;
justify-content: center;
color: rgba(255,255,255,.28);
font-size: 2.2rem;
}
.article-body {
display: flex;
flex-direction: column;
flex: 1;
gap: 1.35rem;
padding: 1.5rem;
}
.article-label { color: var(--lila); margin-bottom: .65rem; }
.article-title {
font-family: var(--journal-font-display);
font-size: clamp(1rem, 1.75vw, 1.45rem);
line-height: 1.08;
letter-spacing: 0;
text-transform: uppercase;
font-weight: 800;
margin: 0 0 .85rem;
transition: color .15s ease;
}
.article-teaser {
color: var(--text-neben);
font-size: 14px;
line-height: 1.6;
max-width: 560px;
}
.article-meta {
margin-top: auto;
border-top: var(--lhb-line-width-thin) solid var(--lhb-neutral-225);
padding-top: .75rem;
font-family: var(--journal-font-display);
font-size: 10px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--text-meta);
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.article-card[data-kind="podcast"] .article-img-wrap { background: var(--schwarz); }
.article-card[data-kind="podcast"] .article-ph { background: var(--schwarz); }
.laden, .fehler { padding: 3rem 2rem; color: var(--text-meta); }
@media (max-width: 1100px) {
.lead-story { grid-template-columns: 1fr; }
.lead-story-media { border-right: none; border-bottom: var(--linie) solid var(--lhb-line-color); }
}
@media (max-width: 980px) {
.journal-brand {
--journal-header-offset: 76px;
min-height: calc(100dvh - var(--journal-header-offset));
}
#journal-aktuell { scroll-margin-top: 0; }
}
/* Schmale Ansicht / Hochformat-Layout: ausschliesslich ueber Breite gesteuert. */
@media (max-width: 900px) {
.journal-brand {
--journal-brand-bottom: clamp(2.8rem, 8vh, 4.25rem);
}
.journal-brand-body {
justify-content: flex-end;
padding: clamp(2rem, 8vw, 3.5rem) clamp(1.25rem, 6vw, 2.5rem) var(--journal-brand-bottom);
}
.journal-brand-mark {
}
.journal-cover-scroll {
bottom: max(.85rem, env(safe-area-inset-bottom));
font-size: 1.85rem;
}
.journal-start,
.journal-brand,
.lead-story,
.story-slider-wrap,
.podcast-list,
.feed-head,
.article-list {
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
.journal-brand-body,
.lead-story-body,
.story-body,
.feed-head-main,
.article-body { min-width: 0; }
.journal-brand-title,
.lead-story-title,
.story-title,
.article-title {
max-width: 100%;
overflow-wrap: break-word;
}
/* Bewusste typografische Ausnahme: Die Journal-Hauptmarke wird in der
schmalen Ansicht dreizeilig und maximal groß gesetzt. */
.journal-brand-title--signature {
font-size: clamp(3.6rem, 18vw, 6.2rem);
line-height: .86 !important;
letter-spacing: -.025em !important;
}
.journal-brand-title--signature .journal-title-line { display: block; }
.journal-brand,
.feed-head,
.story-list,
.podcast-list,
.story-card { grid-template-columns: 1fr; }
.journal-brand-kicker,
.feed-head-side,
.story-img-wrap,
.story-card,
.podcast-card { border-right: none; }
.journal-brand-kicker,
.feed-head-side,
.story-img-wrap { border-bottom: var(--linie) solid var(--lhb-line-color); }
.journal-brand-mark,
.feed-head-side { display: none !important; }
.story-section-label {
align-items: center;
flex-direction: row;
justify-content: space-between;
}
.story-slider-hint {
margin-left: auto;
opacity: 1;
text-align: right;
}
.story-slider-wrap::after { display: none; }
.story-slider-track .story-card {
flex: 0 0 100%;
border-right: none;
}
.story-slider-track .story-card + .story-card {
border-left: var(--linie) solid var(--lhb-line-color);
}
.podcast-card {
grid-template-columns: clamp(156px, 40vw, 220px) minmax(0, 1fr);
min-height: clamp(156px, 40vw, 220px);
align-items: stretch;
}
.podcast-img-wrap {
min-height: clamp(156px, 40vw, 220px);
aspect-ratio: 1 / 1;
border-right: var(--linie) solid var(--lhb-line-color);
border-bottom: none;
}
.podcast-card .story-body {
min-width: 0;
padding: 1.5rem 1.4rem 1.35rem 2rem;
}
.podcast-card .story-title {
font-size: clamp(1.35rem, 5vw, 2.2rem);
line-height: .98;
overflow-wrap: anywhere;
}
.story-img-wrap { min-height: 260px; }
.article-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.article-card {
border-right: var(--linie) solid var(--lhb-line-color);
border-bottom: var(--linie) solid var(--lhb-line-color);
}
.article-card:nth-child(3n) { border-right: var(--linie) solid var(--lhb-line-color); }
.article-card:nth-child(2n) { border-right: none; }
.article-card:last-child { border-bottom: var(--linie) solid var(--lhb-line-color); }
.lead-story-title { font-size: clamp(3.2rem, 16vw, 5.8rem); }
}
@media (max-width: 1100px) and (min-width: 681px) {
.podcast-card {
grid-template-columns: clamp(220px, 34vw, 320px) minmax(0, 1fr);
min-height: clamp(220px, 34vw, 320px);
align-items: stretch;
}
.podcast-img-wrap {
min-height: clamp(220px, 34vw, 320px);
aspect-ratio: 1 / 1;
border-right: var(--linie) solid var(--lhb-line-color);
border-bottom: none;
}
.podcast-card .story-body {
min-width: 0;
padding: 1.65rem 1.5rem 1.5rem 2rem;
}
.podcast-card .story-title {
font-size: clamp(2rem, 4.8vw, 3.7rem);
line-height: .98;
overflow-wrap: anywhere;
}
}
@media (max-width: 760px) {
.journal-brand {
min-height: calc(100dvh - 72px);
}
#journal-aktuell { scroll-margin-top: 72px; }
}
@media (max-width: 680px) {
.podcast-card {
grid-template-columns: 1fr;
min-height: auto;
}
.podcast-img-wrap {
width: 100%;
min-height: 0;
aspect-ratio: 1 / 1;
border-right: none;
border-bottom: var(--linie) solid var(--lhb-line-color);
}
.podcast-card .story-body {
padding: 1.5rem 1.5rem 1.75rem;
}
}
@media (max-width: 1120px) {
.feed-filter-grid { grid-template-columns:minmax(0,1.35fr) minmax(300px,1fr); gap:1rem; }
.feed-period { grid-template-columns:1fr; gap:.4rem; }
.feed-row-years { grid-template-columns:80px 80px minmax(140px,1fr); }
}
/* v26_72: Archivsteuerung und Artikelliste im Hochformat */
@media (orientation: portrait) and (max-width: 760px) {
.feed-head-main { padding: 1.5rem 20px; }
.feed-filter-grid { grid-template-columns: 1fr; gap:.75rem; }
.feed-filter-stack { gap:.65rem; }
.feed-multi-wrap { min-width: 0; width: 100%; }
.feed-region-reset-row { grid-template-columns:1fr; gap:.25rem; }
.feed-reset { justify-self: start; padding: .45rem 0; }
.feed-period { grid-template-columns:1fr; gap:.45rem; }
.feed-row-years {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
max-width: none;
gap: .65rem;
}
.feed-range { grid-column: 1 / -1; min-width: 0; width: 100%; margin-top: .15rem; }
.article-list { grid-template-columns: 1fr !important; }
.article-card,
.article-card:nth-child(2n),
.article-card:nth-child(3n) {
border-right: none !important;
width: 100%;
}
.article-img { aspect-ratio: 16 / 9; }
.article-body { padding: 1.4rem 20px; }
}
/* v95: Artikel statt Archiv; Filter standardmäßig kompakt eingeklappt */
.article-section-label { align-items: center; }
.feed-filter-toggle {
display: inline-flex;
align-items: center;
gap: .55rem;
border: 0;
background: transparent;
color: var(--lila);
padding: .35rem 0;
font-family: var(--journal-font-display);
font-size: 10px;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
cursor: pointer;
}
.feed-filter-toggle i { font-size: 1rem; transition: transform .18s ease; }
.feed-filter-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
.feed-filter-panel {
border-bottom: var(--linie) solid var(--lhb-line-color);
background: var(--lhb-neutral-50);
padding: 1rem 2rem 1.25rem;
}
.feed-filter-panel[hidden] { display: none !important; }
.feed-filter-panel .feed-tools { margin-top: 0; }
@media (max-width: 900px) {
/* Das lila Journalzeichen bleibt auch auf der mobilen Titelseite sichtbar. */
.journal-brand-mark {
display: flex !important;
position: absolute;
top: clamp(2.75rem, 8vh, 4.75rem);
left: clamp(1.25rem, 6vw, 2.5rem);
z-index: 1;
width: auto;
min-height: 0;
padding: 0;
border: 0 !important;
background: transparent;
}
.journal-brand-sign { width: clamp(88px, 23vw, 122px); }
}
@media (max-width: 760px) {
/* Der Sprung führt direkt zum Aufmacherbild; der Balken „Aktuell“ entfällt. */
#journal-aktuell { display: none; }
.lead-story--landing {
min-height: calc(100dvh - 72px);
grid-template-rows: auto auto;
}
.lead-story--landing .lead-story-media {
height: clamp(250px, 43dvh, 340px);
min-height: 0;
}
.lead-story--landing .lead-story-body {
justify-content: flex-start;
gap: .8rem;
padding: 1.35rem 20px 1.55rem;
}
.lead-story--landing .lead-story-label { margin-bottom: 0; }
.lead-story--landing .lead-story-title {
font-size: clamp(2.65rem, 13vw, 4.2rem) !important;
line-height: .9;
}
.lead-story--landing .lead-story-text {
margin: 0;
max-width: none;
font-size: 16px;
line-height: 1.48;
}
.lead-story--landing .lead-story-text-secondary { display: none; }
.lead-story--landing .lead-story-meta { margin-top: .35rem; }
.article-section-label {
align-items: center !important;
flex-direction: row !important;
}
.feed-filter-panel { padding: 1rem 20px 1.25rem; }
}
/* Alte Header-Offsets sind auf der eigenständigen Journal-Titelseite aufgehoben. */
.journal-brand {
min-height: 100dvh !important;
}
@media (orientation: landscape) and (max-width: 900px) {
.journal-brand { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; }
.journal-brand-stage { grid-template-columns: minmax(130px, .58fr) minmax(0, 2.42fr); gap: clamp(28px, 5vw, 56px); }
.journal-brand-mark {
position: static !important;
display: flex !important;
width: auto;
min-height: 0;
padding: 0 !important;
border: 0 !important;
}
.journal-brand-sign { width: min(100%, clamp(120px, 16vw, 180px)) !important; }
.journal-brand-body { padding: 0 !important; }
.journal-brand-title--signature { font-size: clamp(3.4rem, 8.2vw, 5.8rem) !important; }
}
/* v106: Hochformat – kompakte, eigenständige Magazin-Titelseite. */
@media (orientation: portrait), (max-width: 760px) {
.journal-brand {
--journal-pad-x: clamp(22px, 7vw, 56px);
--journal-pad-top: max(20px, env(safe-area-inset-top));
--journal-pad-bottom: max(24px, env(safe-area-inset-bottom));
display: flex;
flex-direction: column;
gap: clamp(16px, 2.2vh, 28px);
min-height: 100dvh !important;
padding: var(--journal-pad-top) var(--journal-pad-x) var(--journal-pad-bottom);
overflow: visible;
}
.journal-back { flex: 0 0 auto; }
.journal-brand-stage {
flex: 1 1 auto;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: minmax(110px, 1fr) auto;
align-items: end;
gap: clamp(18px, 2.8vh, 34px);
width: 100%;
margin: 0;
}
.journal-brand-mark {
position: static !important;
display: flex !important;
align-self: stretch;
width: 100%;
min-height: 0;
padding: 0 !important;
border: 0 !important;
}
.journal-brand-sign {
width: auto !important;
height: min(30vh, 270px);
max-width: 47vw;
max-height: 270px;
}
.journal-brand-body { width: 100%; }
.journal-brand-title--signature {
font-size: clamp(3.25rem, 15.4vw, 6rem) !important;
line-height: .86 !important;
letter-spacing: -.035em !important;
}
.journal-brand-title--signature .journal-title-line { display: block; }
.journal-brand-subline {
margin-top: clamp(.8rem, 1.8vh, 1.25rem);
font-family: var(--journal-font-editorial);
font-size: clamp(1rem, 4.05vw, 1.55rem);
line-height: 1.25;
}
.journal-current { display: none; }
.journal-current-list {
flex: 0 0 auto;
display: block;
border: var(--linie) solid var(--lhb-line-color);
}
.journal-current-list-label {
padding: clamp(.8rem, 1.8vh, 1.2rem) clamp(1rem, 4vw, 1.45rem);
border-bottom: var(--linie) solid var(--lhb-line-color);
font-family: var(--journal-font-display);
font-size: clamp(.72rem, 2.8vw, .95rem);
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--lila);
}
.journal-current-list-link {
display: grid;
grid-template-columns: clamp(44px, 11vw, 72px) minmax(0, 1fr) auto;
align-items: center;
gap: clamp(.65rem, 2.8vw, 1.25rem);
min-height: clamp(62px, 9.5vh, 92px);
padding: .65rem clamp(1rem, 4vw, 1.45rem);
border-bottom: var(--linie) solid var(--lhb-line-color);
color: var(--schwarz);
text-decoration: none;
}
.journal-current-list-link:last-child { border-bottom: 0; }
.journal-current-list-number {
font-family: var(--journal-font-body);
font-size: clamp(2rem, 8vw, 3.5rem);
line-height: 1;
color: var(--lila);
}
.journal-current-list-title {
min-width: 0;
font-family: var(--journal-font-editorial);
font-size: clamp(1rem, 4.25vw, 1.6rem);
line-height: 1.08;
}
.journal-current-list-link:first-of-type .journal-current-list-title {
font-family: var(--journal-font-display);
font-weight: 800;
text-transform: uppercase;
}
.journal-current-list-link i { color: var(--lila); font-size: clamp(1.35rem, 5vw, 2rem); }
.journal-current-list-link:hover { background: var(--lhb-overlay-accent-045); }
.journal-cover-scroll {
flex: 0 0 auto;
align-self: center;
font-size: clamp(1.8rem, 7vw, 2.35rem);
}
}
@media (orientation: portrait) and (max-height: 760px) {
.journal-brand { gap: 12px; }
.journal-brand-stage { grid-template-rows: minmax(80px, .8fr) auto; gap: 12px; }
.journal-brand-sign { height: min(20vh, 150px); }
.journal-brand-title--signature { font-size: clamp(2.8rem, 13.5vw, 4.6rem) !important; }
.journal-brand-subline { margin-top: .55rem; font-size: clamp(.9rem, 3.6vw, 1.15rem); }
.journal-current-list-link { min-height: 54px; }
.journal-cover-scroll { font-size: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) {
.journal-current-track, .journal-cover-scroll { animation: none; }
}
/* v107: Die Journal-Startseite besitzt keinen Website-Header. Deshalb
werden die globalen Header-Abstaende hier vollstaendig aufgehoben. */
html:has(body.journal-standalone),
body.journal-standalone {
margin: 0;
padding-top: 0 !important;
}
body.journal-standalone .journal-brand {
}
/* v107: Hochformat passt als geschlossene Titelseite in einen Viewport. */
@media (orientation: portrait), (max-width: 760px) {
body.journal-standalone .journal-brand {
--journal-pad-x: clamp(22px, 7vw, 46px);
--journal-pad-top: max(18px, env(safe-area-inset-top));
--journal-pad-bottom: max(18px, env(safe-area-inset-bottom));
display: grid;
overflow: hidden;
}
body.journal-standalone .journal-brand-stage {
flex: none;
}
body.journal-standalone .journal-brand-mark {
}
body.journal-standalone .journal-brand-sign {
}
body.journal-standalone .journal-brand-title--signature {
}
body.journal-standalone .journal-brand-subline {
}
body.journal-standalone .journal-current-list-label {
}
body.journal-standalone .journal-current-list-link {
}
body.journal-standalone .journal-current-list-number {
}
body.journal-standalone .journal-current-list-title {
font-size: clamp(.95rem, 3.65vw, 1.35rem);
}
body.journal-standalone .journal-cover-scroll {
}
}
@media (orientation: portrait) and (max-height: 720px) {
body.journal-standalone .journal-brand {
gap: 8px;
}
body.journal-standalone .journal-brand-sign {
height: clamp(90px, 15vh, 120px);
}
body.journal-standalone .journal-brand-title--signature {
font-size: clamp(2.35rem, 11.8vw, 3.8rem) !important;
}
body.journal-standalone .journal-brand-subline {
font-size: clamp(.82rem, 3.2vw, 1rem);
}
body.journal-standalone .journal-current-list-link {
min-height: 44px;
}
}
/* v108: Journal-Titelseite – exakte Viewport- und Proportionskorrektur. */
html:has(body.journal-standalone) {
width: 100%;
max-width: none;
overflow-x: hidden;
}
body.journal-standalone {
width: 100%;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
overflow-x: hidden;
}
body.journal-standalone .journal-start {
width: 100%;
max-width: none;
border: 0;
overflow: visible;
}
body.journal-standalone .journal-brand {
width: 100%;
height: 100dvh;
min-height: 0 !important;
max-height: none;
box-sizing: border-box;
border: 0;
overflow: hidden;
grid-template-rows: auto minmax(0, 1fr) auto auto;
gap: clamp(12px, 2vh, 24px);
padding: clamp(26px, 3.4vh, 44px) clamp(42px, 5vw, 82px) clamp(18px, 2.5vh, 30px);
}
body.journal-standalone .journal-brand-stage {
width: min(1380px, 100%);
grid-template-columns: minmax(235px, .72fr) minmax(0, 2.35fr);
gap: clamp(44px, 5.2vw, 84px);
align-items: center;
transform: translateY(-1.5vh);
}
body.journal-standalone .journal-brand-mark {
justify-content: flex-end;
}
body.journal-standalone .journal-brand-sign {
width: clamp(235px, 19vw, 330px) !important;
height: auto !important;
max-width: 100%;
max-height: min(61vh, 520px);
}
body.journal-standalone .journal-brand-title--signature {
font-size: clamp(4.6rem, 8vw, 8.3rem) !important;
line-height: .88 !important;
}
body.journal-standalone .journal-brand-subline {
margin-top: clamp(.9rem, 1.6vh, 1.35rem);
}
body.journal-standalone .journal-current {
min-height: clamp(58px, 7vh, 72px);
}
body.journal-standalone .journal-current-marquee {
position: relative;
overflow: hidden;
}
body.journal-standalone .journal-current-track {
padding-left: clamp(1rem, 2vw, 2rem);
animation-duration: 38s;
animation-delay: 1.2s;
}
body.journal-standalone .journal-current-link {
padding-left: 0;
padding-right: clamp(1.2rem, 2vw, 2rem);
}
body.journal-standalone .journal-cover-scroll {
padding-bottom: max(2px, env(safe-area-inset-bottom));
}
@media (orientation: portrait), (max-width: 760px) {
body.journal-standalone .journal-brand {
align-content: stretch;
}
body.journal-standalone .journal-back {
font-size: clamp(.98rem, 4vw, 1.1rem);
}
body.journal-standalone .journal-brand-stage {
box-sizing: border-box;
}
body.journal-standalone .journal-brand-mark {
}
body.journal-standalone .journal-brand-sign {
}
body.journal-standalone .journal-brand-title--signature {
}
body.journal-standalone .journal-brand-subline {
}
body.journal-standalone .journal-current-list {
}
body.journal-standalone .journal-current-list-label {
}
body.journal-standalone .journal-current-list-link {
}
body.journal-standalone .journal-current-list-title,
body.journal-standalone .journal-current-list-link:first-of-type .journal-current-list-title {
font-family: var(--journal-font-editorial);
font-weight: 400;
text-transform: none;
}
body.journal-standalone .journal-current-list-number {
}
body.journal-standalone .journal-cover-scroll {
padding-bottom: max(4px, env(safe-area-inset-bottom));
}
}
@media (orientation: portrait) and (max-height: 760px) {
body.journal-standalone .journal-brand {
gap: 7px;
}
body.journal-standalone .journal-brand-stage {
grid-template-rows: minmax(118px, .55fr) auto;
gap: 10px;
padding-top: clamp(18px, 3vh, 28px);
}
body.journal-standalone .journal-brand-sign {
width: clamp(98px, 24vw, 138px) !important;
max-height: 180px;
}
body.journal-standalone .journal-brand-title--signature {
font-size: clamp(2.55rem, 11.7vw, 4rem) !important;
}
body.journal-standalone .journal-brand-subline {
font-size: clamp(.86rem, 3.25vw, 1.05rem);
}
body.journal-standalone .journal-current-list-link {
min-height: 43px;
padding-top: .35rem;
padding-bottom: .35rem;
}
body.journal-standalone .journal-current-list-title,
body.journal-standalone .journal-current-list-link:first-of-type .journal-current-list-title {
font-size: clamp(.88rem, 3.25vw, 1.05rem);
}
}
/* v110: abschliessende Journal-Korrektur fuer stabile Hochformat- und Desktopdarstellung. */
@media (min-width: 761px) and (orientation: landscape) {
body.journal-standalone .journal-brand {
}
}
@media (orientation: portrait), (max-width: 760px) {
body.journal-standalone .journal-brand {
border: 0 !important;
padding: max(18px, env(safe-area-inset-top)) clamp(28px, 7.5vw, 48px) max(12px, env(safe-area-inset-bottom)) !important;
grid-template-rows: auto minmax(0, 1fr) auto auto !important;
gap: clamp(8px, 1.15vh, 14px) !important;
}
body.journal-standalone .journal-brand-stage {
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
padding-top: clamp(8px, 1.4vh, 16px) !important;
display: grid !important;
grid-template-columns: 1fr !important;
align-items: end !important;
transform: none !important;
overflow: hidden;
}
body.journal-standalone .journal-brand-mark {
position: static !important;
inset: auto !important;
width: 100% !important;
min-height: 0 !important;
align-self: stretch !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
body.journal-standalone .journal-brand-sign {
height: auto !important;
max-width: none !important;
}
body.journal-standalone .journal-brand-body {
width: 100% !important;
min-width: 0 !important;
align-self: end !important;
}
body.journal-standalone .journal-brand-title--signature {
font-size: clamp(2.85rem, 11.9vw, 4.55rem) !important;
letter-spacing: -.035em !important;
}
body.journal-standalone .journal-brand-subline {
font-size: clamp(.9rem, 3.45vw, 1.18rem) !important;
line-height: 1.2 !important;
}
body.journal-standalone .journal-current-list {
position: static !important;
width: 100% !important;
min-height: 0 !important;
margin: 0 !important;
transform: none !important;
align-self: end !important;
}
body.journal-standalone .journal-current-list-label {
padding: clamp(.58rem, 1vh, .78rem) clamp(.85rem, 3.5vw, 1.15rem) !important;
}
body.journal-standalone .journal-current-list-link {
min-height: clamp(46px, 6.5vh, 60px) !important;
padding: .38rem clamp(.85rem, 3.5vw, 1.15rem) !important;
}
body.journal-standalone .journal-current-list-number {
}
body.journal-standalone .journal-current-list-title,
body.journal-standalone .journal-current-list-link:first-of-type .journal-current-list-title {
font-size: clamp(.9rem, 3.35vw, 1.14rem) !important;
line-height: 1.08 !important;
}
body.journal-standalone .journal-cover-scroll {
margin: 0 !important;
padding: 0 0 max(2px, env(safe-area-inset-bottom)) !important;
font-size: clamp(1.45rem, 5.4vw, 1.9rem) !important;
}
}
@media (orientation: portrait) and (max-height: 780px) {
body.journal-standalone .journal-brand {
padding-top: max(14px, env(safe-area-inset-top)) !important;
gap: 6px !important;
}
body.journal-standalone .journal-brand-stage {
padding-top: 4px !important;
}
body.journal-standalone .journal-brand-sign {
}
body.journal-standalone .journal-brand-title--signature {
font-size: clamp(2.35rem, 10.1vw, 3.55rem) !important;
}
body.journal-standalone .journal-brand-subline {
font-size: clamp(.78rem, 2.95vw, .98rem) !important;
}
body.journal-standalone .journal-current-list-label {
padding-top: .46rem !important;
padding-bottom: .46rem !important;
}
body.journal-standalone .journal-current-list-link {
min-height: 39px !important;
padding-top: .25rem !important;
padding-bottom: .25rem !important;
}
body.journal-standalone .journal-current-list-title,
body.journal-standalone .journal-current-list-link:first-of-type .journal-current-list-title {
font-size: clamp(.8rem, 2.9vw, .96rem) !important;
}
}
/* Journalfilter: kompakter Zeitraumblock ohne redundante Beschriftung. */
.feed-period { grid-template-columns: minmax(0, 1fr) !important; }
.feed-row-years { grid-template-columns: 90px 90px minmax(210px, 460px) !important; width: auto !important; max-width: 690px !important; }
@media (max-width: 900px) {
.feed-row-years { grid-template-columns: 82px 82px minmax(160px, 1fr) !important; max-width: 620px !important; }
}
@media (max-width: 760px) {
.feed-row-years { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; width: 100% !important; max-width: none !important; }
.feed-range { grid-column: 1 / -1; }
}
/* v111: finale Proportionskorrektur der Journal-Titelseite. */
@media (min-width: 761px) and (orientation: landscape) {
html:has(body.journal-standalone) { background: var(--weiss); }
body.journal-standalone {
width: 100%;
max-width: 1440px !important;
margin: 0 auto !important;
border-left: var(--linie) solid var(--lhb-line-color) !important;
border-right: var(--linie) solid var(--lhb-line-color) !important;
}
body.journal-standalone .journal-brand {
border: 0 !important;
}
body.journal-standalone .journal-brand-stage {
grid-template-columns: minmax(285px, .82fr) minmax(0, 2.18fr);
gap: clamp(42px, 4.6vw, 76px);
}
body.journal-standalone .journal-brand-sign {
width: clamp(285px, 21.5vw, 375px) !important;
max-height: min(66vh, 570px) !important;
}
}
@media (orientation: portrait), (max-width: 760px) {
body.journal-standalone .journal-brand-stage {
grid-template-rows: minmax(170px, .82fr) auto !important;
gap: clamp(20px, 2.4vh, 30px) !important;
}
body.journal-standalone .journal-brand-sign {
width: clamp(150px, 34vw, 215px) !important;
max-height: min(29vh, 285px) !important;
}
body.journal-standalone .journal-brand-title--signature {
line-height: .91 !important;
}
body.journal-standalone .journal-brand-subline {
margin-top: clamp(.8rem, 1.45vh, 1.15rem) !important;
}
body.journal-standalone .journal-current-list-link {
grid-template-columns: clamp(32px, 7vw, 44px) minmax(0, 1fr) auto !important;
gap: clamp(.65rem, 2vw, .9rem) !important;
}
body.journal-standalone .journal-current-list-number {
font-size: clamp(1.25rem, 4.8vw, 1.85rem) !important;
line-height: 1 !important;
}
}
@media (orientation: portrait) and (max-height: 780px) {
body.journal-standalone .journal-brand-stage {
grid-template-rows: minmax(112px, .56fr) auto !important;
gap: 10px !important;
}
body.journal-standalone .journal-brand-sign {
width: clamp(112px, 25vw, 150px) !important;
max-height: 19vh !important;
}
body.journal-standalone .journal-brand-title--signature {
line-height: .9 !important;
}
body.journal-standalone .journal-brand-subline {
margin-top: .55rem !important;
}
body.journal-standalone .journal-current-list-number {
font-size: clamp(1.1rem, 4.2vw, 1.55rem) !important;
}
}
/* v140: Journalfilter – gemeinsame Ober- und Unterkanten. */
@media (min-width: 901px){
.feed-filter-grid--journal{grid-template-columns:minmax(420px,1.55fr) minmax(430px,1fr);align-items:stretch;}
.feed-filter-left,.feed-filter-right{display:grid;grid-template-rows:40px 40px;gap:.75rem;min-width:0;}
.feed-filter-left>.feed-search{align-self:stretch;}
.feed-taxonomy-row{display:grid;grid-template-columns:1fr 1fr;gap:.85rem;align-items:stretch;}
.feed-filter-right>.feed-reset{grid-row:1;justify-self:end;align-self:center;margin:0;}
.feed-filter-right>.feed-period{grid-row:2;align-self:stretch;}
.feed-filter-right .feed-row-years{height:40px;align-items:center;max-width:none!important;width:100%!important;grid-template-columns:90px 90px minmax(180px,1fr)!important;}
.feed-search,.feed-multi-toggle,.feed-year-input{height:40px;box-sizing:border-box;}
}
/* Consolidated former late overrides; cascade order preserved. */
/* Journal subsystem: journal.html - ordered late overrides */
/* Former inline style block 2 */
/* v121: präzise Wort-Bild-Marke und reduzierte mobile Journal-Komposition. */
@media (min-width:761px) and (orientation:landscape){
body.journal-standalone #lhb-header{display:none!important;}
body.journal-standalone .journal-back{display:flex!important;}
body.journal-standalone .journal-brand-stage{}
body.journal-standalone .journal-brand-mark{overflow:visible!important;}
body.journal-standalone .journal-brand-body{align-self:end!important;}
/* Das SVG besitzt unten ca. 19 % Leerraum. Die sichtbare lila Spitze wird deshalb, nicht die Dateikante, an der Schriftunterkante ausgerichtet. */
body.journal-standalone .journal-brand-sign{display:block!important;max-height:none!important;}
}
@media (orientation:portrait),(max-width:760px){
html:has(body.journal-standalone),body.journal-standalone{padding-top:0!important;}
body.journal-standalone #lhb-header{display:block;position:absolute;z-index:80;top:max(8px,env(safe-area-inset-top));right:8px;width:58px;height:58px;}
body.journal-standalone #lhb-header .hd{position:static!important;width:58px!important;height:58px!important;min-height:0!important;display:block!important;border:0!important;background:transparent!important;box-shadow:none!important;}
body.journal-standalone #lhb-header .hd-left,body.journal-standalone #lhb-header .hd-right{display:none!important;}
body.journal-standalone #lhb-header .hd-burger{display:flex!important;position:static!important;width:58px!important;height:58px!important;border:0!important;grid-column:auto!important;grid-row:auto!important;background:var(--lhb-overlay-light-92)!important;}
body.journal-standalone .journal-back{display:none!important;}
body.journal-standalone .journal-brand{grid-template-rows:minmax(0,1fr) auto auto!important;padding:max(68px,calc(env(safe-area-inset-top) + 58px)) clamp(28px,7.5vw,48px) max(10px,env(safe-area-inset-bottom))!important;gap:8px!important;}
body.journal-standalone .journal-brand-stage{display:flex!important;flex-direction:column!important;align-items:flex-start!important;padding:0!important;overflow:visible!important;transform:none!important;}
body.journal-standalone .journal-brand-mark{width:100%!important;display:flex!important;justify-content:flex-start!important;align-items:flex-end!important;align-self:auto!important;overflow:visible!important;}
body.journal-standalone .journal-brand-sign{transform-origin:left bottom!important;}
body.journal-standalone .journal-brand-body{width:100%!important;align-self:auto!important;}
body.journal-standalone .journal-brand-title--signature{line-height:.91!important;letter-spacing:-.035em!important;margin:0!important;}
body.journal-standalone .journal-brand-subline{margin-top:clamp(.8rem,1.45vh,1.05rem)!important;font-size:clamp(.95rem,3.55vw,1.18rem)!important;line-height:1.28!important;}
body.journal-standalone .journal-current-list{border:0!important;background:transparent!important;}
body.journal-standalone .journal-current-list-label{padding:.32rem 0 .55rem!important;border:0!important;font-size:.72rem!important;}
body.journal-standalone .journal-current-list-link{grid-template-columns:minmax(0,1fr) auto!important;min-height:0!important;padding:.5rem 0!important;border:0!important;border-top:var(--lhb-line-width-thin) solid rgba(0,0,0,.36)!important;gap:1rem!important;}
body.journal-standalone .journal-current-list-number{display:none!important;}
body.journal-standalone .journal-current-list-title,body.journal-standalone .journal-current-list-link:first-of-type .journal-current-list-title{font-size:clamp(.9rem,3.35vw,1.08rem)!important;line-height:1.16!important;}
body.journal-standalone .journal-current-list-link i{font-size:1.05rem!important;color:var(--lila);}
body.journal-standalone .journal-cover-scroll{font-size:clamp(1.3rem,4.8vw,1.65rem)!important;}
}
@media (orientation:portrait) and (max-height:760px){
body.journal-standalone .journal-brand{padding-top:max(62px,calc(env(safe-area-inset-top) + 54px))!important;}
body.journal-standalone .journal-brand-stage{justify-content:flex-start!important;gap:2px!important;}
body.journal-standalone .journal-brand-sign{}
body.journal-standalone .journal-brand-title--signature{}
body.journal-standalone .journal-brand-subline{margin-top:.5rem!important;font-size:clamp(.82rem,3vw,.98rem)!important;}
body.journal-standalone .journal-current-list-link{padding:.38rem 0!important;}
}
/* Former inline style block 3 */
/* v126: Journal-Hochformat und Journalfilter. */
@media (orientation:portrait),(max-width:760px){
body.journal-standalone .journal-brand-stage{}
body.journal-standalone .journal-brand-sign{max-height:none!important;margin:0!important;}
}
.feed-filter-grid--journal{grid-template-columns:minmax(0,1.28fr) minmax(360px,.92fr);gap:1rem 1.5rem;align-items:start;}
.feed-filter-left,.feed-filter-right{display:grid;gap:.75rem;min-width:0;}
.feed-taxonomy-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;min-width:0;}
.feed-filter-right .feed-reset{order:1;justify-self:end;text-align:right;}
.feed-filter-right .feed-period{order:2;display:block;}
@media (max-width:900px){.feed-filter-grid--journal{grid-template-columns:1fr;gap:.85rem;}.feed-taxonomy-row{grid-template-columns:1fr 1fr;}.feed-filter-right .feed-reset{justify-self:end;}}
@media (orientation:portrait) and (max-width:760px){.feed-taxonomy-row{grid-template-columns:1fr;}.feed-filter-right .feed-reset{justify-self:start;}}
/* Former inline style block 4 */
/* v112: Journal-Desktop übernimmt die globalen Seitenlinien, ohne unteren Kastenabschluss. */
@media (min-width: 761px) and (orientation: landscape) {
body.journal-standalone .journal-brand {
border-left: var(--linie) solid var(--lhb-line-color) !important;
border-right: var(--linie) solid var(--lhb-line-color) !important;
border-top: 0 !important;
border-bottom: 0 !important;
}
}
/* Former inline style block 5 */
/* v122: finale Wort-Bild-Markenvarianten.
Desktop orientiert sich am letzten bestaetigten Querformat; nur die sichtbare
lila Unterspitze wird an der Unterkante von JOURNAL ausgerichtet. */
@media (min-width:761px) and (orientation:landscape){
body.journal-standalone .journal-brand-stage{
width:min(1120px,calc(100% - 120px))!important;
margin:0 auto!important;
grid-template-columns:minmax(240px,280px) minmax(0,1fr)!important;
gap:clamp(64px,6vw,96px)!important;
}
body.journal-standalone .journal-brand-mark{
align-self:end!important;
justify-content:flex-end!important;
align-items:flex-end!important;
}
body.journal-standalone .journal-brand-sign{
transform-origin:center bottom!important;
}
body.journal-standalone .journal-brand-title--signature{
font-size:clamp(4.65rem,7.9vw,7.25rem)!important;
line-height:.84!important;
}
}
/* Hochformat: Wort-Bild-Marke insgesamt 15 Prozent groesser und enger gekoppelt. */
@media (orientation:portrait),(max-width:760px){
body.journal-standalone .journal-brand-stage{
justify-content:center!important;
}
body.journal-standalone .journal-brand-sign{
}
body.journal-standalone .journal-brand-title--signature{
font-size:clamp(3.34rem,13.8vw,5.4rem)!important;
}
}
@media (orientation:portrait) and (max-height:760px){
body.journal-standalone .journal-brand-sign{width:clamp(122px,27.6vw,161px)!important;}
body.journal-standalone .journal-brand-title--signature{font-size:clamp(2.82rem,11.95vw,4.2rem)!important;}
}
/* Former inline style block 6 */
/* v123: pixelgenaue Journal-Wort-Bild-Marke mit beschnittenem Bildzeichen. */
@media (min-width:761px) and (orientation:landscape){
body.journal-standalone .journal-brand-stage{
transform:translateY(-5.2vh)!important;
align-items:end!important;
}
body.journal-standalone .journal-brand-mark,
body.journal-standalone .journal-brand-body{align-self:end!important;}
body.journal-standalone .journal-brand-sign{
width:clamp(145px,10.8vw,195px)!important;
transform:none!important;
margin:0!important;
}
}
@media (orientation:portrait),(max-width:760px){
body.journal-standalone .journal-brand-stage{gap:clamp(8px,1.1vh,13px)!important;}
body.journal-standalone .journal-brand-sign{
width:clamp(118px,27vw,160px)!important;
transform:none!important;
}
}
/* v205: Abschnittstitel und Filtersteuerung werden im Hochformat nicht
nebeneinander gequetscht, sondern bilden zwei klare Zeilen. */
@media (orientation: portrait) and (max-width:760px), (max-width:650px){
.article-section-label{
display:grid !important;
grid-template-columns:minmax(0,1fr) !important;
align-items:stretch !important;
gap:14px !important;
}
.article-section-label .block-label-text{
display:block !important;
width:100% !important;
min-width:0 !important;
}
.article-section-label .feed-filter-toggle{
width:100% !important;
min-width:0 !important;
margin:0 !important;
}
}
/* v205: Die eigenstaendige Journal-Titelseite passt in den kleinsten sicher
sichtbaren Mobil-Viewport. Dadurch bleibt die Turmspitze auch bei sichtbarer
Browsersteuerung erhalten. */
@media (orientation:portrait) and (max-width:760px){
body.journal-standalone .journal-brand{
box-sizing:border-box !important;
height:100vh !important;
height:100svh !important;
min-height:100vh !important;
min-height:100svh !important;
max-height:100svh !important;
display:grid !important;
grid-template-rows:auto minmax(0,1fr) auto auto !important;
gap:clamp(8px,1.5svh,14px) !important;
padding:max(10px,env(safe-area-inset-top)) clamp(20px,6vw,34px) max(12px,env(safe-area-inset-bottom)) !important;
overflow:hidden !important;
}
body.journal-standalone .journal-back{
min-height:24px;
font-size:.9rem;
}
body.journal-standalone .journal-brand-stage{
min-height:0 !important;
display:grid !important;
grid-template-columns:1fr !important;
grid-template-rows:minmax(76px,20svh) auto !important;
align-content:center !important;
align-items:end !important;
gap:clamp(10px,1.7svh,18px) !important;
width:100% !important;
margin:0 !important;
}
body.journal-standalone .journal-brand-mark{
align-self:stretch !important;
justify-content:flex-start !important;
align-items:flex-start !important;
min-height:0 !important;
}
body.journal-standalone .journal-brand-sign{
width:auto !important;
max-width:38vw !important;
height:100% !important;
max-height:20svh !important;
object-fit:contain !important;
object-position:left top !important;
}
body.journal-standalone .journal-brand-title--signature{
font-size:clamp(2.75rem,13.4vw,4.35rem) !important;
line-height:.85 !important;
}
body.journal-standalone .journal-brand-subline{
margin-top:clamp(.45rem,1svh,.75rem) !important;
font-size:clamp(.86rem,3.55vw,1.08rem) !important;
line-height:1.2 !important;
}
body.journal-standalone .journal-current-list{
min-height:0 !important;
}
body.journal-standalone .journal-current-list-label{
padding:.55rem .75rem !important;
font-size:.72rem !important;
}
body.journal-standalone .journal-current-list-link{
grid-template-columns:minmax(0,1fr) auto !important;
min-height:40px !important;
padding:.42rem .75rem !important;
}
body.journal-standalone .journal-current-list-number{display:none !important;}
body.journal-standalone .journal-current-list-title{
font-size:clamp(.9rem,3.45vw,1.14rem) !important;
line-height:1.08 !important;
}
body.journal-standalone .journal-current-list-link i{
font-size:1.15rem !important;
}
body.journal-standalone .journal-cover-scroll{
font-size:1.45rem !important;
}
}
@media (orientation:portrait) and (max-width:760px) and (max-height:680px){
body.journal-standalone .journal-brand{
gap:6px !important;
padding-top:max(8px,env(safe-area-inset-top)) !important;
padding-bottom:max(8px,env(safe-area-inset-bottom)) !important;
}
body.journal-standalone .journal-brand-stage{
grid-template-rows:minmax(58px,15svh) auto !important;
gap:8px !important;
}
body.journal-standalone .journal-brand-sign{max-height:15svh !important;}
body.journal-standalone .journal-brand-title--signature{font-size:clamp(2.25rem,11.5vw,3.55rem) !important;}
body.journal-standalone .journal-brand-subline{font-size:.82rem !important;}
body.journal-standalone .journal-current-list-label{padding:.42rem .65rem !important;}
body.journal-standalone .journal-current-list-link{min-height:34px !important;padding:.32rem .65rem !important;}
body.journal-standalone .journal-cover-scroll{font-size:1.2rem !important;}
}
/* v206: Mobile Journal-Wort-Bild-Marke unterhalb der Menuebene.
Die Turmspitze beginnt nicht oberhalb der Hamburger-Schaltflaeche; die
Komposition wird enger, leicht nach rechts gerueckt und insgesamt tiefer
gesetzt, ohne die sichere Viewport-Hoehe zu verlassen. */
@media (orientation:portrait) and (max-width:760px){
body.journal-standalone .journal-brand{
padding-top:max(92px,calc(env(safe-area-inset-top) + 82px)) !important;
gap:clamp(5px,1svh,9px) !important;
}
body.journal-standalone .journal-brand-stage{
grid-template-rows:minmax(64px,15.5svh) auto !important;
align-content:start !important;
gap:clamp(4px,.8svh,8px) !important;
transform:translateY(2px) !important;
}
body.journal-standalone .journal-brand-mark{
padding-left:clamp(14px,6vw,30px) !important;
}
body.journal-standalone .journal-brand-sign{
max-width:31vw !important;
max-height:15.5svh !important;
object-position:left bottom !important;
}
body.journal-standalone .journal-brand-title--signature{
font-size:clamp(2.55rem,12.2vw,4rem) !important;
line-height:.84 !important;
}
body.journal-standalone .journal-brand-subline{
margin-top:clamp(.3rem,.65svh,.55rem) !important;
}
body.journal-standalone .journal-current-list-link{
min-height:38px !important;
}
}
@media (orientation:portrait) and (max-width:760px) and (max-height:700px){
body.journal-standalone .journal-brand{
padding-top:max(82px,calc(env(safe-area-inset-top) + 72px)) !important;
}
body.journal-standalone .journal-brand-stage{
grid-template-rows:minmax(54px,13svh) auto !important;
}
body.journal-standalone .journal-brand-sign{max-height:13svh !important;}
body.journal-standalone .journal-brand-title--signature{font-size:clamp(2.2rem,10.9vw,3.4rem) !important;}
}
/* v209: Feinschliff der Journal-Wort-Bild-Marke.
Desktop: Bildzeichen und Titel werden in derselben Rasterzeile an ihrer
Unterkante ausgerichtet; die Unterzeile liegt in einer separaten Zeile.
Hochformat: groesserer Titelrhythmus, tiefere Komposition und bewusster
horizontaler Versatz des Bildzeichens gegenueber der Titelkante. */
@media (min-width:761px) and (orientation:landscape){
body.journal-standalone .journal-brand-stage{
grid-template-rows:auto auto !important;
column-gap:clamp(64px,6vw,96px) !important;
row-gap:0 !important;
align-items:end !important;
}
body.journal-standalone .journal-brand-mark{
grid-column:1 !important;
grid-row:1 !important;
align-self:end !important;
}
body.journal-standalone .journal-brand-body{
display:contents !important;
}
body.journal-standalone .journal-brand-title--signature{
grid-column:2 !important;
grid-row:1 !important;
align-self:end !important;
line-height:.89 !important;
}
body.journal-standalone .journal-brand-subline{
grid-column:2 !important;
grid-row:2 !important;
align-self:start !important;
}
}
@media (orientation:portrait) and (max-width:760px){
body.journal-standalone .journal-brand-stage{
transform:translateY(clamp(18px,3.2svh,34px)) !important;
}
body.journal-standalone .journal-brand-mark{
padding-left:clamp(28px,10vw,48px) !important;
}
body.journal-standalone .journal-brand-title--signature{
line-height:.89 !important;
}
}
@media (orientation:portrait) and (max-width:760px) and (max-height:700px){
body.journal-standalone .journal-brand-stage{
transform:translateY(clamp(10px,2svh,18px)) !important;
}
}
/* v210: Hochformat-Feinschliff der Journal-Wort-Bild-Marke.
Das Bildzeichen wird deutlicher gegenueber der Titelkante eingerueckt, die
Unterzeile erhaelt mehr Abstand und die gesamte Markenkomposition rueckt
innerhalb des sicheren Viewports tiefer. */
@media (orientation:portrait) and (max-width:760px){
body.journal-standalone .journal-brand-stage{
transform:translateY(clamp(48px,6.6svh,72px)) !important;
}
body.journal-standalone .journal-brand-mark{
padding-left:clamp(50px,15vw,76px) !important;
}
body.journal-standalone .journal-brand-subline{
margin-top:clamp(.8rem,1.55svh,1.1rem) !important;
}
}
@media (orientation:portrait) and (max-width:760px) and (max-height:700px){
body.journal-standalone .journal-brand-stage{
transform:translateY(clamp(24px,4svh,34px)) !important;
}
body.journal-standalone .journal-brand-mark{
padding-left:clamp(38px,12vw,58px) !important;
}
body.journal-standalone .journal-brand-subline{
margin-top:clamp(.58rem,1.2svh,.82rem) !important;
}
}
/* v212: Journal-Titelseite nach der bestaetigten Desktop-Montage.
Dies ist eine journalspezifische Proportionskorrektur und keine globale
Hero-Regel. Bildzeichen und dreizeiliger Titel werden im selben Faktor
vergroessert; ihr bestehendes Groessenverhaeltnis bleibt damit erhalten.
Die Markenkomposition wird aus der frueheren oberen Korrektur in eine
tiefere, viewportbezogene Position ueberfuehrt. */
@media (min-width:960px) and (orientation:landscape){
body.journal-standalone .journal-brand-stage{
transform:translateY(clamp(22px,3.8vh,48px)) !important;
}
body.journal-standalone .journal-brand-sign{
width:clamp(174px,12.96vw,234px) !important;
}
body.journal-standalone .journal-brand-title--signature{
font-size:clamp(5.58rem,9.48vw,8.7rem) !important;
}
}
/* Bei niedrigen Querformat-Viewports bleibt die Verschiebung reduziert, damit
Laufband und Scrollhinweis sicher innerhalb der Vollbildflaeche bleiben. */
@media (min-width:960px) and (orientation:landscape) and (max-height:760px){
body.journal-standalone .journal-brand-stage{
transform:translateY(clamp(10px,2.2vh,20px)) !important;
}
}
/* v213: Hochformat-Feinschliff der Journal-Wort-Bild-Marke.
Der Abstand vom sichtbaren Bildzeichen zum Titel wird leicht reduziert.
JOURNAL erhaelt als dritte Titelzeile einen bewusst groesseren Abstand;
die Unterzeile wird etwas weiter abgesetzt und im Hochformat zweizeilig. */
@media (orientation:portrait) and (max-width:760px){
body.journal-standalone .journal-brand-stage{
gap:clamp(1px,.35svh,4px) !important;
}
body.journal-standalone .journal-brand-title--signature .journal-title-line:nth-child(3){
margin-top:clamp(.12rem,.55svh,.28rem);
}
body.journal-standalone .journal-brand-subline{
margin-top:clamp(.95rem,1.85svh,1.25rem) !important;
line-height:1.18 !important;
}
body.journal-standalone .journal-brand-subline-main,
body.journal-standalone .journal-brand-subline-year{
display:block;
white-space:nowrap;
}
}
@media (orientation:portrait) and (max-width:760px) and (max-height:700px){
body.journal-standalone .journal-brand-title--signature .journal-title-line:nth-child(3){
margin-top:.1rem;
}
body.journal-standalone .journal-brand-subline{
margin-top:.72rem !important;
line-height:1.16 !important;
}
}
/* v221: Ruecknahme der nicht freigegebenen Desktop-Vergroesserung.
Die Querformat-Proportionen entsprechen wieder dem Stand v212/v213.
Im Hochformat bleiben nur die bestaetigten Korrekturen: etwa 20 Prozent
groesserer Zeilenabstand, buendige linke Kante von Bildzeichen und Titel
sowie die zweizeilige Unterzeile. */
@media (orientation:portrait), (max-width:760px){
body.journal-standalone .journal-brand-mark{
padding-left:0 !important;
justify-content:flex-start !important;
}
body.journal-standalone .journal-brand-title--signature{
line-height:1.07 !important;
}
body.journal-standalone .journal-brand-title--signature .journal-title-line + .journal-title-line,
body.journal-standalone .journal-brand-title--signature .journal-title-line:nth-child(3){
margin-top:0;
}
body.journal-standalone .journal-brand-subline{
margin-top:clamp(1rem,1.9svh,1.35rem) !important;
line-height:1.22 !important;
}
}
/* v247 – Story- und Journal-Detailvertrag.
Die Titelseite besitzt auf Desktop wieder eine eindeutige Abschlusskante.
Der zentrale Story-Zugang ist als dauerhafte Aktion sichtbar. Artikelteaser
bleiben in Karten auf eine lesbare, rasterstabile Länge begrenzt. */
@media (min-width:761px) and (orientation:landscape){
body.journal-standalone .journal-brand{
border:0 !important;
border-bottom:var(--linie) solid var(--lhb-line-color) !important;
}
}
.story-slider-hint--primary{
min-height:42px;
box-sizing:border-box;
padding:0 15px;
border:var(--lhb-line-width-medium) solid var(--lila);
background:var(--lila);
color:var(--weiss);
opacity:1;
font-size:10px;
letter-spacing:.11em;
transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.story-slider-hint--primary:hover,
.story-slider-hint--primary:focus-visible{
background:var(--schwarz);
border-color:var(--schwarz);
color:var(--weiss);
}
.story-slider-hint--primary:hover i,
.story-slider-hint--primary:focus-visible i{transform:translateX(.2rem)}
.article-teaser{
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:var(--lhb-editorial-card-teaser-lines,7);
overflow:hidden;
}
@media(max-width:650px){
.story-slider-hint--primary{width:100%;justify-content:space-between}
.article-teaser{-webkit-line-clamp:6}
}
/* v248 – zentrale Story-Navigation, robuste Artikeltitel und mobile Achse. */
.story-overview-link{
display:inline-flex;
align-items:center;
justify-content:center;
gap:.55rem;
min-height:42px;
padding:0 15px;
border:var(--lhb-line-width-medium) solid var(--lila);
background:var(--lila);
color:var(--weiss);
font-family:var(--journal-font-display);
font-size:10px;
font-weight:800;
letter-spacing:.11em;
text-transform:uppercase;
text-decoration:none;
}
.story-overview-link:hover,
.story-overview-link:focus-visible{background:var(--schwarz);border-color:var(--schwarz)}
.story-overview-link i{transition:transform .18s ease}
.story-overview-link:hover i,
.story-overview-link:focus-visible i{transform:translateX(.2rem)}
.lead-story-title,
.story-title,
.article-title,
.article-title-main,
.article-title-sub{
min-width:0;
max-width:100%;
overflow:visible;
overflow-wrap:normal;
word-break:normal;
hyphens:none;
-webkit-hyphens:none;
}
.article-title-main,
.article-title-sub{display:block;width:100%;min-width:0}
.article-title-sub{
margin-top:.28em;
font-size:.76em;
line-height:1.2;
font-weight:700;
letter-spacing:.005em;
}
@media (orientation:portrait) and (max-width:760px){
body.journal-standalone .journal-brand{
--journal-mobile-axis:clamp(24px,6vw,42px);
padding-left:var(--journal-mobile-axis) !important;
padding-right:var(--journal-mobile-axis) !important;
}
body.journal-standalone .journal-brand-stage,
body.journal-standalone .journal-brand-mark,
body.journal-standalone .journal-brand-body,
body.journal-standalone .journal-current-list{
width:100% !important;
margin-left:0 !important;
margin-right:0 !important;
padding-left:0 !important;
padding-right:0 !important;
}
body.journal-standalone .journal-brand-stage,
body.journal-standalone .journal-brand-mark,
body.journal-standalone .journal-brand-body{
align-items:flex-start !important;
justify-content:flex-start !important;
}
body.journal-standalone .journal-brand-sign,
body.journal-standalone .journal-brand-title--signature,
body.journal-standalone .journal-brand-subline{
margin-left:0 !important;
}
body.journal-standalone .journal-current-list-label,
body.journal-standalone .journal-current-list-link{
padding-left:0 !important;
padding-right:0 !important;
}
.story-section-label{align-items:center;gap:1rem}
.story-overview-link{margin-left:auto;flex:0 0 auto}
.article-card,
.article-card:nth-child(2n),
.article-card:nth-child(3n){
display:flex !important;
flex-direction:column !important;
grid-template-columns:none !important;
width:100% !important;
max-width:100% !important;
min-width:0 !important;
border-right:none !important;
}
.article-img-wrap{
width:100% !important;
min-width:0 !important;
border-right:none !important;
border-bottom:var(--linie) solid var(--lhb-line-color) !important;
}
.article-img{width:100% !important;height:auto !important;aspect-ratio:16/9;object-fit:cover}
.article-body{width:100%;min-width:0;padding:1.4rem var(--journal-mobile-axis)}
.article-title{font-size:clamp(1.45rem,6.4vw,2.05rem);line-height:1.08}
.article-title-sub{font-size:.72em;line-height:1.2}
}
@media(max-width:480px){
.story-section-label{align-items:stretch;flex-direction:column}
.story-overview-link{width:100%;margin-left:0;justify-content:space-between}
}
/* v249 – Titelgeschichten: Terminologie, Filtergeometrie und Sliderrobustheit. */
.story-slider-instruction{
display:inline-flex;align-items:center;gap:.45rem;
font-family:var(--journal-font-display);font-size:10px;font-weight:800;
letter-spacing:.12em;text-transform:uppercase;color:var(--text-meta);
}
.story-slider-track .story-title{
font-size:clamp(1.65rem,3.1vw,3.25rem);
line-height:.96;
overflow-wrap:normal;word-break:normal;hyphens:none;
}
.story-slider-track .story-body{min-width:0}
.feed-filter-row--primary{display:grid;grid-template-columns:1fr;gap:1rem 1.35rem;align-items:end}
.feed-filter-row--secondary{display:grid;grid-template-columns:minmax(220px,1fr) minmax(220px,1fr) minmax(440px,1.9fr);gap:1rem 1.15rem;align-items:end}
.feed-period-field,.feed-period,.feed-row-years{min-width:0}
.feed-row-years{display:grid;grid-template-columns:124px 124px minmax(260px,1fr);gap:0;align-items:center}
.feed-range{min-width:0;width:100%;margin-left:0;box-sizing:border-box}
.feed-range-track{left:0;right:0}
@media(max-width:1050px){
.feed-filter-row--secondary{grid-template-columns:1fr 1fr}
.feed-period-field{grid-column:1/-1}
}
@media(max-width:700px){
.feed-filter-row--primary,.feed-filter-row--secondary{grid-template-columns:1fr}
.feed-period-field{grid-column:auto}
.feed-row-years{grid-template-columns:1fr 1fr;gap:.65rem}
.feed-range{grid-column:1/-1;margin-left:0}
.story-slider-instruction{white-space:normal;text-align:right}
}
/* v251 – mobile Journalartikelkarten.
Bild, Kicker, Titel, Teaser und Metadaten besitzen eine eindeutige vertikale
Hierarchie und einen gemeinsamen Innenabstand. Der Nebentitel bleibt
sichtbar untergeordnet; keine Textzone liegt unmittelbar an der Außenkante. */
@media (orientation:portrait) and (max-width:760px){
.article-list{background:var(--weiss)}
.article-card,
.article-card:nth-child(2n),
.article-card:nth-child(3n){
display:flex !important;
flex-direction:column !important;
min-height:0;
}
.article-card .article-img-wrap{
width:100%;
border-right:0 !important;
border-bottom:var(--linie) solid var(--lhb-line-color) !important;
}
.article-card .article-body{
box-sizing:border-box;
width:100%;
gap:0;
padding:clamp(24px,6.5vw,34px) clamp(24px,6.5vw,34px) clamp(22px,6vw,32px) !important;
}
.article-card .article-label{
margin:0 0 .9rem;
font-size:10px;
line-height:1.35;
}
.article-card .article-title{
margin:0 0 1rem;
font-size:clamp(1.55rem,7vw,2.1rem);
line-height:1.04;
}
.article-card .article-title-sub{
margin-top:.42rem;
font-size:.68em;
line-height:1.17;
}
.article-card .article-teaser{
max-width:none;
font-size:16px;
line-height:1.58;
}
.article-card .article-meta{
margin-top:1.2rem;
padding-top:.85rem;
line-height:1.45;
}
}
/* v254: Journal-Displayrollen verwenden explizit dieselbe Schriftfamilie.
Touchgeraete behalten keinen scheinbaren Hoverzustand. */
.journal-brand-title,
.journal-current-label,
.journal-current-list-label,
.lead-story-label,
.lead-story-title,
.lead-story-meta,
.story-label,
.story-title,
.story-meta{
font-family:var(--journal-font-display);
}
#journal-artikel{scroll-margin-top:0}
@media(hover:none),(pointer:coarse){
.lead-story:hover .lead-story-title{color:var(--lhb-color-paper)}
.story-card:hover .story-title{color:var(--schwarz)}
.podcast-card:hover .story-title{color:var(--schwarz)}
}
/* v259 – Titelgeschichten-Navigation: Bezugshinweis links, Übersicht rechts. */
.story-section-label{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
align-items:center;
gap:1.25rem;
}
.story-section-copy{display:flex;flex-direction:column;align-items:flex-start;gap:.6rem;min-width:0}
.story-section-copy .story-slider-instruction{line-height:1.55;text-align:left}
.story-section-label .story-overview-link{order:initial;margin-left:0;justify-self:end}
.story-section-label .story-slider-instruction{order:initial;align-self:auto}
@media (orientation:portrait) and (max-width:760px){
.story-section-label{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:.8rem}
.story-section-label .story-overview-link{width:auto;max-width:100%;min-height:46px;padding-left:12px;padding-right:12px;justify-content:center;justify-self:end}
.story-section-copy{gap:.45rem}
.story-section-copy .story-slider-instruction{font-size:var(--lhb-type-kicker-size);line-height:1.65;white-space:normal}
}
@media(max-width:430px){
.story-section-label{grid-template-columns:1fr}
.story-section-label .story-overview-link{justify-self:end;width:auto}
}
/* v260 – mobile Titelgeschichten-Navigation.
Im Hochformat bleibt oberhalb des Sliders nur der direkte Bedienhinweis.
Der Zugang zur Gesamtuebersicht folgt nach dem Sliderblock. */
.story-overview-mobile{display:none}
@media (orientation:portrait) and (max-width:760px){
.story-section-label{
display:block;
padding-top:clamp(24px,6vw,36px);
padding-bottom:clamp(20px,5vw,30px);
}
.story-section-copy{gap:.65rem}
.story-section-copy .story-slider-instruction{
font-size:10px;
line-height:1.8;
text-align:left;
}
.story-overview-link--head{display:none}
.story-overview-mobile{
display:flex;
justify-content:flex-end;
padding:clamp(22px,5.8vw,32px) clamp(24px,6vw,42px);
border-top:var(--linie) solid var(--lhb-line-color);
background:var(--weiss);
}
.story-overview-mobile .story-overview-link{
width:auto;
min-height:48px;
padding-left:18px;
padding-right:18px;
justify-content:space-between;
}
}
/* v271 – Titelgeschichten-Slider: eine einzige rechte Abschlusskante und
etwas klarerer, aber weiterhin redaktionell ruhiger Horizontalhinweis.
Separatoren liegen nur vor Folge-Karten; die rechte Aussenkante gehoert
allein dem umgebenden Seiten-/Modulrahmen. */
.story-slider-track .story-card{border-right:0 !important}
.story-slider-track .story-card + .story-card{border-left:var(--linie) solid var(--lhb-line-color) !important}
.story-section-copy .story-slider-instruction{opacity:1}
.story-slider-instruction i{
color:var(--lila);
animation:journal-horizontal-cue 2.8s ease-in-out 1;
will-change:transform;
}
@keyframes journal-horizontal-cue{
0%,24%,76%,100%{transform:translateX(0)}
38%{transform:translateX(-2px)}
62%{transform:translateX(2px)}
}
@media(prefers-reduced-motion:reduce){
.story-slider-instruction i{animation:none;will-change:auto}
}
/* v290 – Wiederherstellung des bestätigten zusätzlichen mobilen Markeneinzugs.
Aktuelle Beiträge bleibt auf der Grundachse; nur Bildzeichen, Titel und
Unterzeile werden als geschlossene Wort-Bild-Marke zusätzlich eingerückt. */
@media (orientation:portrait) and (max-width:760px){
body.journal-standalone .journal-brand{
--journal-brand-mobile-extra-inset:clamp(20px,5.5vw,38px);
}
body.journal-standalone .journal-brand-stage{
width:calc(100% - var(--journal-brand-mobile-extra-inset)) !important;
margin-left:var(--journal-brand-mobile-extra-inset) !important;
margin-right:0 !important;
}
}
/* v366 – Journal-Titelseite: kompakte Querformat-Viewports.
Breite allein reicht bei kleinen Laptop-Aufloesungen nicht als Kriterium:
Browser-/OS-Skalierung kann einen breiten, aber nur 500–700 px hohen
CSS-Viewport erzeugen. Die Wort-Bild-Marke bleibt zweispaltig, skaliert in
diesem Fall jedoch hoehenbezogen und beansprucht nicht den Raum von
Laufband und Scrollhinweis. Normale Desktop- und Hochformatansichten bleiben
unveraendert. */
@media (min-width:761px) and (orientation:landscape) and (max-height:720px){
body.journal-standalone .journal-brand{
gap:clamp(8px,1.5vh,12px) !important;
padding-top:clamp(14px,2.4vh,22px) !important;
padding-bottom:clamp(10px,1.7vh,16px) !important;
}
body.journal-standalone .journal-back{
font-size:clamp(.9rem,2.5vh,1rem) !important;
}
body.journal-standalone .journal-back i{
font-size:clamp(1.35rem,3.8vh,1.65rem) !important;
}
body.journal-standalone .journal-brand-stage{
width:min(1120px,calc(100% - clamp(72px,10vw,120px))) !important;
grid-template-columns:minmax(145px,210px) minmax(0,1fr) !important;
column-gap:clamp(38px,5vw,68px) !important;
row-gap:0 !important;
align-content:center !important;
align-items:end !important;
transform:none !important;
}
body.journal-standalone .journal-brand-sign{
width:clamp(125px,min(14vw,24vh),190px) !important;
max-height:42vh !important;
}
body.journal-standalone .journal-brand-title--signature{
font-size:clamp(3.35rem,min(7.6vw,10.2vh),6rem) !important;
line-height:.88 !important;
}
body.journal-standalone .journal-brand-subline{
margin-top:clamp(.45rem,1.25vh,.7rem) !important;
font-size:clamp(.92rem,min(1.65vw,2.8vh),1.15rem) !important;
line-height:1.24 !important;
}
body.journal-standalone .journal-current{
min-height:48px !important;
}
body.journal-standalone .journal-current-label{
font-size:.7rem !important;
}
body.journal-standalone .journal-current-toggle{
width:32px !important;
height:32px !important;
flex-basis:32px !important;
}
body.journal-standalone .journal-cover-scroll{
font-size:1.5rem !important;
}
}
/* v367 – mittlere Laptopstufe innerhalb des kompakten Querformats.
Auf 1100–1399 px breiten Viewports darf die Wort-Bild-Marke etwas mehr
Praesenz behalten; 800x600 und die regulaere Desktopstufe bleiben
unveraendert. */
@media (min-width:1100px) and (max-width:1399px) and (orientation:landscape) and (max-height:720px){
body.journal-standalone .journal-brand-sign{
width:clamp(135px,min(14.8vw,25.5vh),200px) !important;
max-height:44vh !important;
}
body.journal-standalone .journal-brand-title--signature{
font-size:clamp(3.6rem,min(8.05vw,11vh),6.2rem) !important;
}
body.journal-standalone .journal-brand-subline{
font-size:clamp(.96rem,min(1.7vw,2.95vh),1.18rem) !important;
}
}
/* v386.5 – Titelgeschichten-Slider: Desktop-Pfeile ohne Touch-Sonderweg. */
.story-slider-guidance{
display:flex;
align-items:center;
gap:.45rem;
min-width:0;
}
.story-slider-controls{
flex:0 0 auto;
margin-left:-4px;
}
.story-slider-arrow{
color:var(--lila);
}
.story-slider-track:focus-visible{
outline:2px solid var(--lila);
outline-offset:-3px;
}
@media (hover:hover) and (pointer:fine){
.story-slider-guidance{gap:.5rem}
.story-slider-guidance .story-slider-instruction > i{display:none}
}
@media (hover:none),(pointer:coarse){
.story-slider-controls{display:none !important}
}