/* Gestaltung 2026 – Startseite. Aus Gestaltung-Muster-2026/index.html übernommen. */

/* ---------- Erste Ansicht: Bild mit aufgelegten Wegweisern ---------- */
.titelbild { position: relative; height: calc(100svh - var(--kopfhoehe)); min-height: 36rem; max-height: 60rem; overflow: hidden; background: #E9C98A; }
.titelbild > picture { display: contents; }
.titelbild > img, .titelbild > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 34%; }
.titelbild .titel { position: relative; text-align: center; color: #2B2724; padding-top: clamp(2rem, 8vh, 5.5rem); }
.titelbild h1 { font-size: clamp(2.5rem, 6vw, 5.2rem); font-weight: 350; line-height: 1.04; margin: 0; font-variation-settings: "opsz" 72; }
.titelbild .heute { margin: 1rem 0 0; font-family: var(--schrift-ui); font-size: 1.05rem; }

.wegweiser {
	position: absolute; left: 50%; bottom: 2rem; transform: translateX(-50%); width: min(100% - 2rem, 72rem);
	display: grid; grid-template-columns: 1.15fr 1fr 1.1fr; background: var(--karte); border-radius: 10px;
	box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
.wegweiser > section { padding: 1.5rem 1.75rem; }
.wegweiser > section + section { border-left: 1px solid var(--linie); }
.wegweiser .art { font-family: var(--schrift-ui); color: var(--leise); margin: 0 0 .2rem; }
.wegweiser .gross { font-size: 1.85rem; line-height: 1.15; margin: 0 0 .35rem; font-variation-settings: "opsz" 48; }
.wegweiser p { margin: 0 0 .9rem; }
.wegweiser .knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; }
.wegweiser .knopf { padding: .45rem .95rem; font-size: .95rem; }
.wegweiser .buch { display: grid; grid-template-columns: 4.6rem 1fr; gap: 1rem; align-items: start; }
.wegweiser .buch img { width: 4.6rem; border: 1px solid var(--linie); }
.wegweiser .buch h2 { font-size: 1.2rem; margin: 0 0 .45rem; }
.wegweiser .buch ul { list-style: none; margin: 0; padding: 0; font-family: var(--schrift-ui); }
.wegweiser .buch li { margin-bottom: .2rem; }

/* ---------- Willkommen und Aktuelles ---------- */
.kreis { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; margin-top: 6rem; }
.kreis h2 { font-size: 1.85rem; }
.kreis .gruss { font-style: italic; color: var(--leise); }
.mitteilungen { list-style: none; padding: 0; margin: 0; }
.mitteilungen li { padding: 1.2rem 0; border-top: 1px solid var(--linie); }
.mitteilungen li:first-child { border-top: 0; padding-top: 0; }
.mitteilungen h3 { font-size: 1.2rem; margin-bottom: .35rem; }
.mitteilungen p { margin: 0; }

/* ---------- Zufallsimpuls (Gestaltung in Impuls.css) ---------- */
.impuls { margin-top: 6.5rem; }

/* ---------- Beitrag ---------- */
.beitrag { margin-top: 6.5rem; padding: 5rem 0; background: var(--flaeche); }
.beitrag .rahmen { max-width: 46rem; }
.beitrag h2 { font-size: 2rem; }
.beitrag blockquote { margin: 1.5rem 0; font-style: italic; font-weight: 600; }

/* ---------- E-Mail-Verteiler ---------- */
.verteiler { margin-top: 6.5rem; border-top: 1px solid var(--linie); padding-top: 3.5rem; display: grid; grid-template-columns: 1fr 1.3fr; gap: 2rem 3rem; }
.verteiler h2 { font-size: 1.6rem; margin-bottom: .3rem; }
.verteiler .erklaerung { margin: 0; color: var(--leise); }
.verteiler .erklaerung p { margin: .8rem 0 0; }
.verteiler .erklaerung p:first-child { margin-top: .5rem; }
.verteiler form { font-family: var(--schrift-ui); }
.verteiler .zeile { display: flex; gap: .5rem; }
.verteiler input[type=email] {
	flex: 1; min-width: 0; font: inherit; font-size: 1.05rem; padding: .65rem .9rem; color: var(--tinte);
	background: var(--karte); border: 1px solid var(--linie); border-radius: 6px;
}
.verteiler fieldset { border: 0; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem 2rem; }
.verteiler legend { padding: 0; margin-bottom: .4rem; color: var(--leise); }
.verteiler label { display: flex; gap: .5rem; align-items: baseline; cursor: pointer; }
.verteiler label small { display: block; color: var(--leise); font-size: .9rem; }
.verteiler input[type=checkbox] { width: 1.1rem; height: 1.1rem; accent-color: var(--link); transform: translateY(.15rem); }

@media (max-width: 960px) {
	.titelbild { height: auto; min-height: 0; max-height: none; overflow: visible; background: none; }
	.titelbild > img, .titelbild > picture > img { position: relative; height: 46svh; min-height: 18rem; object-position: 30% 16%; }
	.titelbild .titel { position: absolute; inset: 0 0 auto 0; padding-top: 1.5rem; }
	.titelbild h1 { font-size: clamp(2.2rem, 9vw, 3.2rem); }
	.titelbild .heute { margin-top: .5rem; font-size: .95rem; }
	.wegweiser { position: relative; left: auto; bottom: auto; transform: none; margin: -3.5rem auto 0; grid-template-columns: 1fr; }
	.wegweiser > section { padding: 1.2rem 1.25rem; }
	.wegweiser > section + section { border-left: 0; border-top: 1px solid var(--linie); }
	.wegweiser .gross { font-size: 1.6rem; }
	.kreis, .verteiler { grid-template-columns: 1fr; }
	.kreis { gap: 3rem; margin-top: 3.5rem; }
	body { hyphens: auto; }
}
@media (max-width: 480px) {
	.verteiler .zeile { flex-direction: column; }
}