/* ==========================================================================
   Tobias Mäder – FDP · Theme-Styles
   Farben, Schriften und Abstände kommen aus theme.json.
   Hier nur das, was theme.json nicht abbilden kann.
   ========================================================================== */

:root {
	--tm-cyan: var(--wp--preset--color--cyan, #00A0E2);
	--tm-blau: var(--wp--preset--color--dunkelblau, #074EA1);
	--tm-magenta: var(--wp--preset--color--magenta, #E6007D);
	--tm-winkel: -4deg;
	--tm-header-h: 76px;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

[id] { scroll-margin-top: calc(var(--tm-header-h) + 1rem); }

:where(.wp-site-blocks) > * { margin-block-start: 0; }

::selection { background: var(--tm-magenta); color: #fff; }

a:focus-visible,
button:focus-visible {
	outline: 3px solid var(--tm-magenta);
	outline-offset: 3px;
}

.tm-skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 1000;
	background: var(--tm-blau); color: #fff; padding: .75rem 1rem;
}
.tm-skip-link:focus { left: 1rem; top: 1rem; }

/* --------------------------------------------------------------------------
   Schriftbalken
   Group mit Stil «Schriftbalken»: jede Textzeile der Kind-Elemente (Titel,
   Absatz) erhält einen eigenen Farbbalken – wie auf Plakaten.
   Standard: Titel = Dunkelblau, Absatz = Magenta. Eine im Editor gesetzte
   Hintergrundfarbe des Kind-Elements bestimmt die Balkenfarbe.
   Der Balken ist bewusst niedriger als die Schriftbox (Gradient), damit die
   Zeilen eng stehen, ohne sich zu überlappen.
   -------------------------------------------------------------------------- */
.is-style-balken,
.is-style-balken-gerade {
	transform-origin: 0 50%;
}
.is-style-balken { transform: rotate(var(--tm-winkel)); }

.is-style-balken > *,
.is-style-balken-gerade > * {
	--tm-balken: var(--tm-blau);
	display: block;
	margin: 0 !important;
	line-height: 1.26;
	font-family: var(--wp--preset--font-family--jost);
	font-style: italic;
	font-weight: 800;
	color: #fff;
	background: none !important;
}
.is-style-balken > p,
.is-style-balken-gerade > p {
	--tm-balken: var(--tm-magenta);
	font-weight: 700;
	line-height: 1.36;
	font-size: var(--wp--preset--font-size--gross);
}
.is-style-balken > .has-dunkelblau-background-color,
.is-style-balken-gerade > .has-dunkelblau-background-color { --tm-balken: var(--tm-blau); }
.is-style-balken > .has-cyan-background-color,
.is-style-balken-gerade > .has-cyan-background-color { --tm-balken: var(--tm-cyan); }
.is-style-balken > .has-magenta-background-color,
.is-style-balken-gerade > .has-magenta-background-color { --tm-balken: var(--tm-magenta); }
.is-style-balken > .has-weiss-background-color,
.is-style-balken-gerade > .has-weiss-background-color { --tm-balken: #fff; }
.is-style-balken > .has-schwarz-background-color,
.is-style-balken-gerade > .has-schwarz-background-color { --tm-balken: #000; }
.is-style-balken > .has-text-color,
.is-style-balken-gerade > .has-text-color { color: inherit; }

.tm-balken__zeile,
.editor-styles-wrapper :is(.is-style-balken, .is-style-balken-gerade) > :is(h1, h2, h3, h4, p) {
	padding: 0 0.2em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	background-image: linear-gradient(var(--tm-balken), var(--tm-balken));
	background-repeat: no-repeat;
	background-size: 100% 80%;
	background-position: 0 50%;
}
.tm-balken__zeile a { color: inherit; text-decoration: none; }

/* Im Editor gibt es keine <span>: dort wird das Element selbst zum Inline-Balken. */
.editor-styles-wrapper :is(.is-style-balken, .is-style-balken-gerade) > :is(h1, h2, h3, h4, p) {
	display: inline;
}
.editor-styles-wrapper :is(.is-style-balken, .is-style-balken-gerade) > :is(h1, h2, h3, h4, p)::after {
	content: "\A";
	white-space: pre;
}

/* Rotation braucht Luft nach oben und unten */
.is-style-balken { margin-block: 1.75rem !important; }

/* --------------------------------------------------------------------------
   Kopfzeile
   -------------------------------------------------------------------------- */
.tm-header {
	position: sticky; top: 0; z-index: 100;
	background: #fff;
	box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
}
.admin-bar .tm-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .tm-header { top: 0; position: relative; } }

.tm-header__inner { min-height: var(--tm-header-h); }

.tm-brand { gap: .9rem !important; text-decoration: none; }
.tm-brand .wp-block-image { margin: 0; }
.tm-brand img { width: 92px; height: auto; display: block; }
.tm-brand__zusatz {
	margin: 0;
	font-family: var(--wp--preset--font-family--jost);
	font-weight: 700;
	font-size: 1.15rem;
	line-height: 1.05;
	color: var(--tm-cyan);
	white-space: nowrap;
}
.tm-brand__zusatz a { color: inherit; text-decoration: none; }
.tm-brand__zusatz small {
	display: block;
	font-weight: 500;
	font-size: .78rem;
	letter-spacing: .02em;
}

.tm-header .wp-block-navigation a:hover { color: var(--tm-magenta); }
.tm-header .wp-block-navigation .wp-block-navigation-item__content { padding: .25rem 0; text-decoration: none; }
.tm-header .wp-block-navigation .wp-block-navigation-item__content:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.tm-header .wp-block-button__link { padding: .6em 1.1em; font-size: 1rem; }

/* mobiles Menü in FDP-Cyan */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--tm-cyan) !important;
	color: #fff !important;
	padding: 2rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 1.6rem; font-style: italic; font-weight: 700;
}
@media (max-width: 600px) {
	.tm-header .tm-header__cta { display: none; }
	.tm-brand img { width: 72px; }
	.tm-brand__zusatz { font-size: 1rem; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.tm-hero { overflow: hidden; position: relative; }
.tm-hero .wp-block-columns { align-items: center !important; }
.tm-hero__kicker {
	font-family: var(--wp--preset--font-family--jost);
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	font-size: .95rem;
	margin-bottom: 0 !important;
}
.tm-hero .is-style-balken > h1 { font-size: var(--wp--preset--font-size--titel-xl); }
.tm-slogan {
	font-family: var(--wp--preset--font-family--jost);
	font-style: italic;
	font-weight: 800;
	line-height: 1.05;
}

.tm-portrait { position: relative; margin: 0 !important; }
.tm-portrait > .wp-block-image:first-child { margin: 0; }
.tm-portrait > .wp-block-image:first-child img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	display: block;
}
.tm-portrait .is-style-wecker-sticker {
	position: absolute;
	left: -12%;
	bottom: 6%;
	width: 62%;
	margin: 0;
	filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .18));
}
@media (max-width: 781px) {
	.tm-portrait { max-width: 480px; margin-inline: auto !important; }
	.tm-portrait .is-style-wecker-sticker { left: 2%; width: 58%; }
}

.is-style-wecker-sticker img { width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.wp-block-button__link { transition: background-color .15s ease, color .15s ease; }
.wp-block-button.is-style-weiss .wp-block-button__link {
	background: #fff; color: var(--tm-blau);
}
.wp-block-button.is-style-weiss .wp-block-button__link:hover {
	background: var(--tm-blau); color: #fff;
}
.wp-block-button.is-style-kontur .wp-block-button__link {
	background: transparent; color: currentColor;
	box-shadow: inset 0 0 0 2px currentColor;
}
.wp-block-button.is-style-kontur .wp-block-button__link:hover {
	background: #fff; color: var(--tm-blau); box-shadow: inset 0 0 0 2px #fff;
}

/* --------------------------------------------------------------------------
   Karten, Icons, Listen
   -------------------------------------------------------------------------- */
.is-style-karte {
	background: #fff;
	color: #000;
	box-shadow: 0 1px 2px rgba(7, 78, 161, .08), 0 8px 24px rgba(7, 78, 161, .08);
	height: 100%;
}
.wp-block-column > .is-style-karte { height: 100%; }

.tm-icon { margin: 0 !important; }
.tm-icon img { width: 64px; height: 64px; display: block; }
.tm-icon--gross img { width: 88px; height: 88px; }

.tm-thema { display: flex; flex-direction: column; }
.tm-thema__frage {
	font-size: var(--wp--preset--font-size--titel-s) !important;
	color: #fff !important;
	margin-top: 1rem !important;
}
.tm-thema__label {
	font-family: var(--wp--preset--font-family--jost);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	font-size: .85rem;
	margin: 0 !important;
}
.tm-thema .is-style-balken-gerade > p { font-size: 1.15rem; }

.is-style-haken { list-style: none; padding-left: 0; }
.is-style-haken li {
	position: relative;
	padding-left: 2rem;
	margin-bottom: .5rem;
}
.is-style-haken li::before {
	content: "";
	position: absolute; left: 0; top: .35em;
	width: 1.1rem; height: .6rem;
	border-left: 3px solid var(--tm-magenta);
	border-bottom: 3px solid var(--tm-magenta);
	transform: rotate(-45deg);
}

.tm-fakten { gap: .75rem !important; }
.tm-fakt {
	margin: 0 !important;
	padding: .45rem .9rem;
	background: var(--wp--preset--color--cyan-hell);
	color: var(--tm-blau);
	font-family: var(--wp--preset--font-family--jost);
	font-weight: 600;
	font-size: 1rem;
}

/* weitere Positionen */
.tm-position { border-top: 3px solid var(--tm-cyan); padding-top: 1rem; }
.tm-position h3 { font-size: var(--wp--preset--font-size--gross) !important; }
.tm-position p:last-child {
	font-family: var(--wp--preset--font-family--jost);
	font-style: italic; font-weight: 700; color: var(--tm-magenta);
}

/* --------------------------------------------------------------------------
   Wahlzettel-Anleitung
   -------------------------------------------------------------------------- */
.tm-schritte { counter-reset: tm-schritt; }
.tm-schritt { position: relative; padding-left: 4rem; }
.tm-schritt::before {
	counter-increment: tm-schritt;
	content: counter(tm-schritt);
	position: absolute; left: 0; top: -.1rem;
	width: 2.75rem; height: 2.75rem;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--tm-magenta); color: #fff;
	font-family: var(--wp--preset--font-family--jost);
	font-style: italic; font-weight: 800; font-size: 1.4rem;
}
.tm-schritt h3 { color: #fff !important; margin: 0 0 .35rem !important; }
.tm-schritt p { margin: 0; }

.tm-wahlzettel img {
	transform: rotate(3deg);
	box-shadow: 0 20px 40px rgba(0, 0, 0, .22);
	max-width: 440px; width: 100%; margin-inline: auto; display: block;
}

/* --------------------------------------------------------------------------
   Agenda
   -------------------------------------------------------------------------- */
.tm-agenda-eintrag {
	border-bottom: 1px solid rgba(0, 0, 0, .12);
	padding-block: 1.1rem;
	gap: 1.5rem !important;
	align-items: baseline !important;
}
.tm-agenda-eintrag .tm-datum {
	flex: 0 0 11rem;
	margin: 0;
	font-family: var(--wp--preset--font-family--jost);
	font-weight: 700; font-style: italic;
	color: var(--tm-magenta);
	font-size: 1.15rem;
}
.tm-agenda-eintrag h3 { margin: 0 !important; font-size: 1.3rem !important; }
.tm-agenda-eintrag p { margin: .15rem 0 0; }
.tm-agenda-eintrag--wahltag .tm-datum { color: var(--tm-blau); }
@media (max-width: 600px) {
	.tm-agenda-eintrag { flex-direction: column; gap: .25rem !important; }
	.tm-agenda-eintrag .tm-datum { flex-basis: auto; }
}

/* --------------------------------------------------------------------------
   Beiträge
   -------------------------------------------------------------------------- */
.tm-beitraege .wp-block-post { display: flex; flex-direction: column; }
.tm-beitraege .wp-block-post-featured-image img { aspect-ratio: 3 / 2; object-fit: cover; }
.tm-beitraege .wp-block-post-title a { text-decoration: none; color: var(--tm-blau); }
.tm-beitraege .wp-block-post-title a:hover { color: var(--tm-magenta); }
.tm-beitraege .wp-block-post-date { color: #555; font-size: .95rem; }

/* --------------------------------------------------------------------------
   Zitate / Stimmen
   -------------------------------------------------------------------------- */
.tm-stimme blockquote,
.tm-stimme.wp-block-quote { margin: 0; padding: 0; }
.tm-stimme p { color: var(--tm-blau); }
.tm-stimme cite {
	display: block; margin-top: 1rem;
	font-family: var(--wp--preset--font-family--source-sans);
	font-style: normal; font-weight: 600;
	font-size: 1rem; color: #000;
}
.tm-stimme cite::before { content: "– "; }

/* --------------------------------------------------------------------------
   Titelband auf Unterseiten
   -------------------------------------------------------------------------- */
.tm-titelband .wp-block-post-title,
.tm-titelband h1 { font-size: var(--wp--preset--font-size--titel-l); }

/* Lauftext auf Unterseiten */
.tm-inhalt > * + h2 { margin-top: 2.5rem; }
.tm-inhalt h2 { font-size: var(--wp--preset--font-size--titel-s); }

/* --------------------------------------------------------------------------
   Fusszeile
   -------------------------------------------------------------------------- */
.tm-footer a { color: #fff; }
.tm-footer a:hover { color: var(--tm-blau); }
.tm-footer .tm-brand img { width: 110px; }
.tm-footer .tm-brand__zusatz { color: #fff; }
.tm-footer__meta { font-size: .95rem; }
.tm-footer__meta a { text-decoration: none; }
.tm-footer__meta a:hover { text-decoration: underline; }
.tm-social { gap: .75rem !important; }
.tm-social .wp-block-image { margin: 0; }
.tm-social img { width: 36px; height: 36px; display: block; transition: transform .15s ease; }
.tm-social a:hover img { transform: translateY(-2px); }
.tm-footer .is-style-wecker-sticker { max-width: 280px; }

/* --------------------------------------------------------------------------
   Kleinkram
   -------------------------------------------------------------------------- */
.tm-hinweis {
	border-left: 4px solid var(--tm-magenta);
	padding: .75rem 1rem;
	background: #fff4fa;
	font-size: .95rem;
}
.tm-platzhalter { background: #fff3a8; padding: 0 .2em; }

.has-cyan-background-color .wp-block-heading:not(.has-text-color),
.has-dunkelblau-background-color .wp-block-heading:not(.has-text-color) { color: #fff; }
.has-cyan-background-color a:not(.wp-block-button__link),
.has-dunkelblau-background-color a:not(.wp-block-button__link) { color: #fff; }

h1, h2, h3, h4 { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
.is-style-balken > *, .is-style-balken-gerade > * { -webkit-hyphens: manual; hyphens: manual; }

/* --------------------------------------------------------------------------
   Version 1.1: Kicker, Slogan-Twist, Raster, Themen
   -------------------------------------------------------------------------- */
.is-style-balken > p.tm-kicker,
.is-style-balken-gerade > p.tm-kicker {
	font-size: .95rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	line-height: 1.5;
	margin-bottom: .35rem !important;
}
.tm-slogan em {
	font-style: italic;
	text-decoration: underline;
	text-decoration-color: var(--tm-magenta);
	text-decoration-thickness: .1em;
	text-underline-offset: .14em;
}

/* Raster: 4 Spalten, auf Tablets 2×2, auf dem Handy 1 Spalte */
.tm-raster {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40);
}
.tm-raster > * { margin: 0 !important; }
@media (max-width: 1080px) { .tm-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .tm-raster { grid-template-columns: 1fr; } }

.tm-abschnitt-kopf { gap: 1.5rem 3rem !important; }
.tm-abschnitt-kopf .is-style-balken { margin-block: 0 !important; }
.tm-abschnitt-intro { max-width: 20rem; margin: 0; color: #333; }

.tm-raster--4 > .tm-thema-spalte {
	border-left: 1px solid rgba(0, 0, 0, .12);
	padding: .5rem 0 1rem 1.75rem;
}
.tm-nummer {
	font-family: var(--wp--preset--font-family--jost);
	font-weight: 700;
	font-size: 2.6rem;
	line-height: 1;
	color: var(--tm-magenta);
	margin: 0 0 1.25rem !important;
}
.tm-thema-titel {
	color: #000 !important;
	font-size: 1.6rem !important;
	margin: 0 0 1rem !important;
}
.tm-thema-claim {
	font-family: var(--wp--preset--font-family--jost);
	font-style: italic;
	font-weight: 700;
	color: var(--tm-blau);
	line-height: 1.3;
	margin: 0 0 1rem !important;
}
.tm-thema-spalte > p:last-child { color: #333; font-size: 1rem; }

.tm-foto img { box-shadow: 0 24px 48px rgba(0, 0, 0, .25); }
.has-dunkelblau-background-color .is-style-haken li::before { border-color: #fff; }

.tm-karte-cta { display: flex; flex-direction: column; }
.tm-karte-cta > .wp-block-buttons { margin-top: auto !important; padding-top: 1rem; }
.tm-karte-cta h3 { font-size: 1.45rem !important; }
.tm-konto {
	margin-top: auto !important;
	padding: .9rem 1rem;
	background: var(--wp--preset--color--cyan-hell);
	font-family: var(--wp--preset--font-family--jost);
	font-weight: 600;
	font-size: .95rem;
	color: var(--tm-blau);
}
.is-style-balken > .has-background,
.is-style-balken-gerade > .has-background { padding: 0 !important; }
.tm-abschnitt-kopf { display: grid !important; grid-template-columns: 1fr minmax(0, 20rem); align-items: end; }
@media (max-width: 781px) { .tm-abschnitt-kopf { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Version 1.2: zehn Themen, Titel mit hinterlegter Zeile, Gemeinden
   -------------------------------------------------------------------------- */
.tm-titel-schraeg {
	transform: rotate(var(--tm-winkel));
	transform-origin: 0 50%;
	line-height: 1.22 !important;
	margin-block: 1rem 0 !important;
}
.tm-titel-schraeg mark {
	color: #fff;
	padding: 0 .2em;
	margin-left: -.2em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	background-color: transparent !important;
	background-image: linear-gradient(var(--tm-cyan), var(--tm-cyan));
	background-repeat: no-repeat;
	background-size: 100% 80%;
	background-position: 0 50%;
}

.tm-raster--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50); }
@media (max-width: 781px) { .tm-raster--2 { grid-template-columns: 1fr; } }

.tm-thema-karte {
	position: relative;
	padding: 1.5rem 1.75rem 1.25rem 5.25rem;
	border-top: 3px solid var(--tm-cyan);
	background: #fff;
}
.tm-thema-karte .tm-nummer {
	position: absolute; left: 1.25rem; top: 1.35rem;
	font-size: 2.4rem; margin: 0 !important;
}
.tm-thema-karte .tm-thema-titel { font-size: 1.45rem !important; margin: 0 0 .6rem !important; }
.tm-thema-karte .tm-thema-claim { margin: 0 !important; font-size: 1.15rem; }
.tm-thema-claim mark { font-style: italic; white-space: nowrap; }
@media (max-width: 600px) {
	.tm-thema-karte { padding: 1.25rem 1rem 1rem 4rem; }
	.tm-thema-karte .tm-nummer { left: .9rem; font-size: 2rem; }
	.tm-thema-claim mark { white-space: normal; }
}

.tm-mehr { margin-top: .9rem !important; }
.tm-mehr summary {
	cursor: pointer;
	list-style: none;
	display: inline-flex; align-items: center; gap: .45rem;
	font-family: var(--wp--preset--font-family--jost);
	font-weight: 600;
	font-size: .95rem;
	color: var(--tm-blau);
}
.tm-mehr summary::-webkit-details-marker { display: none; }
.tm-mehr summary::before {
	content: "+";
	display: grid; place-items: center;
	width: 1.4rem; height: 1.4rem;
	border-radius: 50%;
	background: var(--tm-cyan); color: #fff;
	font-weight: 700; line-height: 1;
	transition: transform .15s ease;
}
.tm-mehr[open] summary::before { content: "–"; }
.tm-mehr summary:hover { color: var(--tm-magenta); }
.tm-mehr > p { margin: .6rem 0 0; color: #333; font-size: 1rem; }

/* Gemeinden */
.tm-gemeinden h3 { font-style: italic; }
.tm-gemeinde-liste {
	list-style: none; padding: 0; margin: 1rem 0 0;
	display: flex; flex-wrap: wrap; gap: .5rem;
}
.tm-gemeinde-liste li {
	margin: 0;
	padding: .3rem .8rem;
	background: rgba(255, 255, 255, .16);
	border: 1px solid rgba(255, 255, 255, .55);
	font-family: var(--wp--preset--font-family--jost);
	font-weight: 600;
	font-size: .98rem;
}
@media (max-width: 600px) { .tm-titel-schraeg { font-size: 1.9rem !important; } }
.tm-konto { font-size: .9rem; line-height: 1.45; }
.tm-qr { margin: 1rem 0 0 !important; }
.tm-qr img { width: 180px; height: auto; display: block; border: 1px solid rgba(0,0,0,.12); }
.tm-qr figcaption { font-size: .85rem; line-height: 1.35; margin-top: .5rem; color: #333; }
.tm-karte-cta > .tm-konto { margin-top: 0 !important; }
.tm-qr figcaption { text-align: left; }
.tm-raster--4 .tm-konto { font-size: .84rem; padding: .8rem .6rem; }

/* Version 1.3.1: IBAN immer auf einer Zeile, Schrift passt sich der Kartenbreite an */
.tm-konto { container-type: inline-size; }
.tm-konto > p { margin: 0 !important; }
.tm-iban {
	white-space: nowrap;
	margin: .35rem 0 !important;
	font-size: min(1rem, 6.5cqi);
	font-weight: 700;
	letter-spacing: .01em;
	font-variant-numeric: tabular-nums;
}