/* Feuilleton II – Ueberarbeitung nach dem Audit vom 10.10.2026.
   Baut auf feuilleton.css auf. */

/* Kopf kompakter: Titel einzeilig, Datumszeile wie bei einer Zeitung. */
.masthead { padding: 1.8rem 0 0; border-bottom: 0; }
.masthead-title { display: block; font-size: clamp(2rem, .9rem + 3.6vw, 3.9rem); line-height: 1.1; }
.dateline { display: flex; justify-content: space-between; gap: 1rem; margin: 1rem 0 0; padding: .45rem 0; border-top: 1px solid var(--ink); border-bottom: 5px double var(--ink); font: .8rem/1.4 var(--font-ui); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
.dateline-sub { text-align: center; }
.mainnav { border-bottom: 1px solid var(--ink); }
.strip { margin: 1.2rem 0 2rem; }
.design-feuilleton2 .mainnav .menu > li > a, .design-feuilleton2 .section-title { font-size: .8rem; }

/* Aufmacher: der naechste Termin */
.lead-story { display: grid; grid-template-columns: 11rem 1fr minmax(0, 16rem); gap: 0 2.2rem; align-items: start; margin: 0 0 2.6rem; padding: 0 0 2.4rem; border-bottom: 5px double var(--ink); }
.lead-date { display: flex; flex-direction: column; align-items: center; padding: 1.1rem .6rem 1.2rem; color: #fff; background: var(--accent); text-decoration: none; text-align: center; font-family: var(--font-head); }
.lead-date:hover { background: #7e1f4f; }
.lead-weekday { font: .8rem/1.3 var(--font-ui); text-transform: uppercase; letter-spacing: .18em; }
.lead-day { font-size: 4.4rem; line-height: 1; margin: .2rem 0 0; }
.lead-month { font-size: 1.25rem; }
.lead-time { margin-top: .6rem; padding-top: .55rem; border-top: 1px solid rgba(255,255,255,.5); font: 700 1rem/1 var(--font-ui); }
.lead-kicker { margin: 0 0 .4rem; font: 700 .8rem/1.4 var(--font-ui); text-transform: uppercase; letter-spacing: .2em; color: var(--accent); }
.lead-relative { margin-left: .5rem; padding: .1rem .5rem; border: 1px solid currentColor; letter-spacing: .08em; }
.lead-title { font-weight: normal; font-size: clamp(1.8rem, 1.2rem + 2vw, 2.9rem); line-height: 1.12; margin-bottom: .8rem; }
.lead-title a { color: inherit; text-decoration: none; }
.lead-title a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.lead-body .entry-content { font-size: 1.12rem; }
.lead-body .entry-content p:last-child { margin-bottom: 0; }
.lead-image img { display: block; width: 100%; border: 1px solid var(--line); padding: 5px; background: #fff; }

@media (min-width: 901px) {
	.lead-story:not(:has(.lead-image)) { grid-template-columns: 11rem 1fr; }
	.lead-story:not(:has(.lead-image)) .lead-title { max-width: 30ch; }
}
.design-feuilleton2 .front { grid-template-columns: minmax(0, 1.3fr) minmax(0, .85fr) minmax(0, 1.15fr); }

/* Weitere Termine mit Wochentag und Uhrzeit */
.design-feuilleton2 .event-when { display: block; }
.design-feuilleton2 .event-excerpt { display: none; }

/* Mitmachen als Zeitungskasten statt Kursivspalte */
.front-box .home-mitmachen { font-style: normal; padding: 1.2rem 1.3rem 1.4rem; border: 2px solid var(--ink); background: #fbf8f1; }
.front-box .section-title { border-top: 0; padding-top: 0; }
.front-box .button { display: block; text-align: center; margin-bottom: .5rem; }
.front-box .button-secondary { display: block; text-align: center; }

/* Berichte-Uebersicht im Zeitungston */
.design-feuilleton2 .report-row img { filter: sepia(.25); }
.design-feuilleton2 .report-row a:hover img { filter: none; }
.design-feuilleton2 .report-date { text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; }

/* Terminseite: naechster Termin hervorgehoben */
.design-feuilleton2 .termin-next { padding: 1.6rem 1.8rem; margin-bottom: 2.4rem; background: #fbf8f1; border: 2px solid var(--ink); border-top: 8px solid var(--accent); }
.design-feuilleton2 .termin-next-label { display: block; margin: 0 0 .5rem; font: 700 .8rem/1.4 var(--font-ui); text-transform: uppercase; letter-spacing: .2em; color: var(--accent); }
.design-feuilleton2 .termin-next .entry-title { font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem); }

/* Mittlere Breite: Vereinstext links, Termine und Mitmachen rechts
   untereinander – so wird keine Spalte schmaler als etwa 17rem. */
@media (min-width: 901px) and (max-width: 1100px) {
	.design-feuilleton2 .front { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-areas: "lead events" "lead box"; align-items: start; }
	.design-feuilleton2 .front-lead { grid-area: lead; grid-row: 1 / span 2; }
	.design-feuilleton2 .front-events { grid-area: events; padding-right: 0; padding-bottom: 1.6rem; }
	.design-feuilleton2 .front-box { grid-area: box; }
}

/* Berichtskarten unter 900 px: Bild links, Text rechts statt riesiger Fotos. */
@media (min-width: 601px) and (max-width: 900px) {
	.design-feuilleton2 .report a { display: grid; grid-template-columns: 13rem 1fr; grid-template-rows: auto auto 1fr; column-gap: 1.4rem; }
	.design-feuilleton2 .report img { grid-row: 1 / span 3; margin: 0; }
	.design-feuilleton2 .report-list { gap: 1.4rem; }
}

/* Terminseite: links gross das Datum wie ein Kalenderblatt, rechts der Text. */
.design-feuilleton2 .termin { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0 1.8rem; align-items: start; margin-bottom: 2.4rem; }
.design-feuilleton2 .termin-datum { display: flex; flex-direction: column; align-items: center; padding: .9rem .4rem 1rem; border: 1px solid var(--ink); border-top: 4px solid var(--accent); color: var(--ink); text-align: center; }
.design-feuilleton2 .termin-wochentag, .design-feuilleton2 .termin-monat { font: 700 .8rem/1.3 var(--font-ui); text-transform: uppercase; letter-spacing: .06em; }
.design-feuilleton2 .termin-kurz { display: none; }
.design-feuilleton2 .termin-wochentag { color: var(--muted); }
.design-feuilleton2 .termin-tag { font: 400 3.4rem/1 var(--font-head); color: var(--accent); margin: .25rem 0 .3rem; }
.design-feuilleton2 .termin-text > .entry-title { margin-top: -.15em; }
.design-feuilleton2 .termin-next .termin-datum { background: var(--accent); border-color: var(--accent); color: #fff; }
.design-feuilleton2 .termin-next .termin-wochentag, .design-feuilleton2 .termin-next .termin-tag { color: #fff; }
.design-feuilleton2 .termin-next .termin-monat { padding-top: .35rem; border-top: 1px solid rgba(255,255,255,.5); }
@media (max-width: 600px) {
	.design-feuilleton2 .termin { grid-template-columns: 5rem minmax(0, 1fr); gap: 0 1rem; }
	.design-feuilleton2 .termin-lang { display: none; }
	.design-feuilleton2 .termin-kurz { display: inline; }
	.design-feuilleton2 .termin-next { padding: 1.2rem 1rem; }
	.design-feuilleton2 .termin .entry-title, .design-feuilleton2 .termin-next .entry-title { font-size: 1.5rem; hyphens: auto; overflow-wrap: break-word; }
	.design-feuilleton2 .termin-datum { padding: .6rem .2rem .7rem; }
	.design-feuilleton2 .termin-tag { font-size: 2.5rem; }
	.design-feuilleton2 .termin-wochentag, .design-feuilleton2 .termin-monat { font-size: .75rem; letter-spacing: .03em; }
}

@media (max-width: 900px) {
	.lead-story { grid-template-columns: 1fr; gap: 1.2rem; }
	.lead-date { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .2rem .6rem; padding: .9rem; }
	.lead-day { font-size: 2.8rem; margin: 0; }
	.lead-time { margin: 0; padding: 0; border-top: 0; flex-basis: 100%; }
	.lead-image { max-width: 22rem; }
	/* Auf dem Handy: Termine und Mitmachen vor dem langen Vereinstext. */
	.front { display: flex; flex-direction: column; }
	.front-events { order: 1; }
	.front-box { order: 2; }
	.front-lead { order: 3; }
	.dateline { justify-content: center; text-align: center; }
	.dateline > span:not(.dateline-sub) { display: none; }
	.dateline-sub { text-transform: none; letter-spacing: .02em; font-size: .9rem; }
}
@media (min-width: 601px) and (max-width: 900px) {
	.mainnav .menu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 1rem; }
	.mainnav .menu > li > a { text-align: center; padding: .85rem 0 .7rem; }
}

/* Handy: Kopf kompakt – nur Untertitel statt Datumszeile, Menue zweispaltig
   mit grossen Tippflaechen, Gemaelde hoeher zugeschnitten (Mitte). */
@media (max-width: 600px) {
	.masthead { padding-top: 1.1rem; }
	.dateline { margin-top: .6rem; padding: .35rem 0; }
	.mainnav .menu { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
	.mainnav .menu > li > a { display: flex; align-items: center; justify-content: center; height: 100%; min-height: 2.8rem; padding: .5rem .2rem; text-align: center; line-height: 1.25; letter-spacing: .06em; }
	.strip { margin: .9rem 0 1.4rem; padding: 4px; }
	.strip .painting { aspect-ratio: 5 / 2; }
}