/**
Theme Name: PIRATEN
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra Child Theme für PIRATEN
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: piraten
Template: astra
*/

/* ==========================================================================
   PIRATEN — Gestaltungsgrundlagen
   --------------------------------------------------------------------------
   Regel: Farben, Abstände und Typografie stehen HIER, nicht in den
   Einstellungen einzelner Blöcke. Was im Block steckt, findet später
   niemand wieder und lässt sich nicht zentral ändern.
   ========================================================================== */

:root{
	/* Markenfarbe. Kontrast auf Weiß nur 2,4:1 — nur als Fläche verwenden.
	   Schrift und Zeichen auf orangem Grund sind immer WEISS, nie dunkel
	   (Sebastian, 25.09.2026) — so wie bei Knopf, aktivem Themenfilter,
	   Themenmarke, Seitenzahl und Akkordeon-Symbol. */
	--pp-orange:      #ff8800;
	--pp-orange-dark: #e67a00;   /* Hover-Zustand für Flächen */

	/* Auf Wunsch identisch zur Markenfarbe (Kontrast auf Weiß nur 2,4:1 —
	   von Sebastian am 08.09. bewusst so gewählt statt der barrierefreieren
	   #b35600, unterschreitet damit WCAG AA für Fließtext). */
	--pp-orange-text: #ff8800;

	--pp-tinte:       #16181c;
	--pp-tinte-2:     #3a4048;
	--pp-flaeche:     #f4f4f5;
	--pp-linie:       #e2e2e5;

	/* Schriftstapel an einer Stelle, damit die drei Verwendungen nicht
	   auseinanderlaufen. Die Dateien selbst kommen aus dem Custom-Fonts-
	   Plugin; hier steht nur die Zuweisung. */
	--pp-schrift-text:  'DejaRip', -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	--pp-schrift-titel: 'PoliticsHead', -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

/* ==========================================================================
   Startseite — oberer Bereich
   ========================================================================== */

/* .pp-hero selbst bleibt bewusst randlos ueber die volle Seitenbreite --
   nur so laeuft das Hintergrundbild von Kante zu Kante. Eingerueckt wird
   ausschliesslich der Inhalt, siehe Inhaltsspalte unten. */
.pp-hero{ padding-block: clamp(1.75rem, 5vw, 3.5rem); }

/* ---- Inhaltsspalte im Hero: 70% breit, mittig, Inhalt linksbuendig ----
   Entspricht der gleichen 70%-Spalte wie .pp-beitragsliste/.pp-blaettern.
   Statt jedes Element einzeln zu zentrieren (margin-inline:auto) bekommen
   alle denselben linken Rand von 15% = (100% - 70%) / 2. Der Unterschied
   ist wichtig: WordPress zentriert Bloecke in einer "constrained"-Gruppe
   sonst automatisch je nach ihrer EIGENEN max-width -- und weil Ueberschrift
   (24ch) und Lead-Absatz (58ch) verschieden breit sind, landeten sie dabei
   auf verschiedenen linken Kanten. Ueber den gemeinsamen Rand starten alle
   an derselben Kante, behalten aber ihre typografische Zeilenlaenge. */
.pp-hero.is-layout-constrained > *{
	margin-left: 15% !important;
	margin-right: auto !important;
}
/* Die Kachelreihe folgt bewusst NICHT der 70%-Textspalte, sondern der
   Standard-Inhaltsbreite der Seite (--wp--style--global--content-size,
   1200px, mittig). Damit ist sie exakt so breit wie der Fliesstext unter
   der Abschnitts-Ueberschrift "Wer wir sind" weiter unten auf der Seite --
   die Kacheln nehmen also die Breitenordnung des Seiteninhalts auf, nicht
   die der Hero-Textspalte. */
.pp-hero.is-layout-constrained > .pp-tueren{
	margin-left: auto !important;
	margin-right: auto !important;
	max-width: var(--wp--style--global--content-size, 1200px) !important;
}

.pp-aussage{
	font-size: clamp(1.5rem, 4.6vw, 3.2rem);
	line-height: 1.1;
	letter-spacing: -.02em;
	text-wrap: balance;
	max-width: 24ch;
	margin: 0 0 .55rem;
	/* Lange Komposita wie „Informationsgesellschaft" brauchen das,
	   sonst laufen sie auf dem Telefon aus dem Rahmen.
	   Setzt <html lang="de-DE"> voraus — bei WordPress-Deutsch der Fall. */
	hyphens: auto;
	-webkit-hyphens: auto;
	overflow-wrap: break-word;
}

.pp-lead{
	font-size: clamp(.98rem, 1.8vw, 1.22rem);
	color: var(--pp-tinte-2);
	max-width: 58ch;
	margin: 0 0 clamp(1.25rem, 3vw, 2rem);
}

/* ==========================================================================
   Die drei Türen
   ========================================================================== */

.pp-tueren{ gap: 1rem; }

.pp-tuer{
	border: 1px solid var(--pp-linie);
	border-radius: 0;
	padding: clamp(.9rem, 2vw, 1.25rem);
	display: flex;
	flex-direction: column;
}
.pp-tuer-titel{ font-size: 1.15rem; margin: 0 0 .35rem; }
.pp-tuer p{ font-size: .95rem; margin: 0 0 .9rem; }
.pp-tuer > :last-child{ margin-top: auto; margin-bottom: 0; }

.pp-tuer-link a{
	color: var(--pp-orange-text);
	font-weight: 600;
	text-decoration: none;
}
.pp-tuer-link a::after{ content: " \2192"; }
.pp-tuer-link a:hover{ text-decoration: underline; }

/* Die dritte Tür ist eine Handlung, kein Verweis. */
.pp-tuer-handlung{ border-color: var(--pp-orange); background: #fff8f0; }

.pp-knopf .wp-block-button__link{
	background: var(--pp-orange);
	color: #fff;
	font-weight: 600;
	border-radius: 0;
	padding: .6rem 1.1rem;
	border: none;
}
.pp-knopf .wp-block-button__link:hover,
.pp-knopf .wp-block-button__link:focus{
	background: var(--pp-orange-dark);
	color: #fff;
}

/* ==========================================================================
   Kampagnenstreifen
   ========================================================================== */

.pp-kampagne{
	background: var(--pp-flaeche);
	border-top: 3px solid var(--pp-orange);
	padding-block: .75rem;
}
.pp-kampagne p{ margin: 0; font-size: .95rem; }
.pp-kampagne a{ color: var(--pp-orange-text); }

/* ==========================================================================
   Telefon — alles muss in die erste Bildschirmhöhe
   WordPress bricht die Spalten bei 782px um; hier liegt die harte Grenze.
   ========================================================================== */

@media (max-width: 781px){
	.pp-hero{ padding-block: .85rem 1.25rem; }
	.pp-lead{ font-size: .95rem; margin-bottom: .8rem; }
	.pp-tueren{ gap: .55rem; }
	.pp-tuer{ padding: .8rem .95rem; }
	.pp-tuer-titel{ font-size: 1.05rem; }
	.pp-tuer p{ font-size: .92rem; margin-bottom: .5rem; }
	/* Die 70%-Spalte ist eine Desktop-Geste: auf dem Telefon wuerde sie
	   je 15% (bei 375px rund 56px) am Rand verschenken. Dort nutzt der
	   Inhalt die volle Breite, der seitliche Abstand kommt allein aus
	   dem Innenabstand des Hero-Blocks. */
	.pp-hero.is-layout-constrained > *{
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	/* Die Kachelreihe braucht hier keine Sonderregel: ihr margin:auto loest
	   sich auf dem Telefon von selbst zu 0 auf, weil kein Platz zum
	   Zentrieren uebrig bleibt. */
}

/* ==========================================================================
   Tastaturbedienung
   ========================================================================== */

.pp-tuer a:focus-visible,
.pp-kampagne a:focus-visible,
.pp-knopf .wp-block-button__link:focus-visible{
	outline: 2px solid var(--pp-orange-text);
	outline-offset: 3px;
}

/* ---- Piraten-Schriften (per Custom Fonts Plugin hinterlegt) ---- */
body,
p, li, td, th, blockquote, figcaption,
.entry-content, .entry-content p, .entry-content li,
input, textarea, select, button,
.wp-block-button__link,
a{
	font-family: var(--pp-schrift-text);
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.site-title, .site-title a,
.entry-title, .entry-title a{
	font-family: var(--pp-schrift-titel);
}

/* ---- Aktuelles (Query Loop, unterhalb der Falz) ---- */
.pp-abschnitt{ padding-block: clamp(2rem, 5vw, 3.5rem); }
.pp-abschnitt-titel{ font-size: clamp(1.3rem, 3vw, 1.8rem); margin: 0 0 1.1rem; }

.pp-aktuelles-liste{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1rem;
}
/* Der Query-Loop gibt seine Beitraege als <ul> aus. Astra setzt fuer Listen
   im Inhalt die Einrueckung per "revert" auf den Browserstandard zurueck --
   damit bekommt auch diese Liste den Aufzaehlungs-Einzug von 20px, obwohl
   sie gar keine Aufzaehlung ist. Sichtbar wurde das als Versatz zwischen
   der Abschnitts-Ueberschrift und den Beitragskaesten darunter. Der
   Selektor ist bewusst eine Stufe spezifischer als Astras Regel
   (.entry-content ul), damit kein !important noetig ist. */
.entry-content ul.wp-block-post-template{ padding-left: 0; }
.pp-aktuelles-eintrag{
	border: 1px solid var(--pp-linie);
	border-radius: 0;
	padding: clamp(.9rem, 2vw, 1.15rem);
}
.pp-aktuelles-datum{
	display: block;
	font-size: .82rem;
	color: var(--pp-tinte-2);
	margin-bottom: .3rem;
}
.pp-aktuelles-titel{ font-size: 1.05rem; margin: 0 0 .4rem; }
.pp-aktuelles-titel a{ color: var(--pp-tinte); text-decoration: none; }
.pp-aktuelles-titel a:hover{ color: var(--pp-orange-text); text-decoration: underline; }
.pp-aktuelles-text{ font-size: .92rem; color: var(--pp-tinte-2); margin: 0; }
.pp-aktuelles-mehr{ margin-top: 1.1rem; }
.pp-aktuelles-mehr a{ color: var(--pp-orange-text); font-weight: 600; text-decoration: none; }
.pp-aktuelles-mehr a:hover{ text-decoration: underline; }
.pp-aktuelles-mehr a::after{ content: " \2192"; }

@media (max-width: 781px){
	.pp-abschnitt{ padding-block: 1.25rem 1.75rem; }
	.pp-aktuelles-liste{ grid-template-columns: 1fr; gap: .7rem; }
}

/* ---- Wer wir sind, kurz ---- */
.pp-wws-text{ max-width: 62ch; font-size: 1rem; color: var(--pp-tinte-2); margin: 0 0 1.3rem; }
.pp-wws-belege{ gap: 1.5rem; }
.pp-wws-zahl-wert{ font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700; color: var(--pp-tinte); margin: 0 0 .2rem; }
.pp-wws-zahl-label{ font-size: .9rem; color: var(--pp-tinte-2); margin: 0 0 .5rem; }
.pp-wws-liste{ margin: 0; padding-left: 1.1rem; font-size: .9rem; color: var(--pp-tinte-2); }
.pp-wws-liste li{ margin-bottom: .15rem; }
.pp-wws-mehr{ margin-top: 1.1rem; }
.pp-wws-mehr a{ color: var(--pp-orange-text); font-weight: 600; text-decoration: none; }
.pp-wws-mehr a:hover{ text-decoration: underline; }
.pp-wws-mehr a::after{ content: " \2192"; }

@media (max-width: 781px){
	.pp-wws-belege{ gap: .8rem; }
}

/* ---- Mitmachen — drei Stufen ---- */
.pp-mitmachen-stufen{ gap: 1rem; }
.pp-stufe{
	border: 1px solid var(--pp-linie);
	border-radius: 0;
	padding: clamp(.9rem, 2vw, 1.25rem);
	display: flex;
	flex-direction: column;
}
.pp-stufe-titel{ font-size: 1.1rem; margin: 0 0 .35rem; }
.pp-stufe p{ font-size: .95rem; margin: 0 0 .9rem; }
.pp-stufe > :last-child{ margin-top: auto; margin-bottom: 0; }
.pp-stufe-link a{ color: var(--pp-orange-text); font-weight: 600; text-decoration: none; }
.pp-stufe-link a::after{ content: " \2192"; }
.pp-stufe-link a:hover{ text-decoration: underline; }
.pp-stufe-handlung{ border-color: var(--pp-orange); background: #fff8f0; }

@media (max-width: 781px){
	.pp-mitmachen-stufen{ gap: .55rem; }
	.pp-stufe{ padding: .8rem .95rem; }
}

/* ---- Vor Ort — Landesverbände ---- */
.pp-vor-ort-text{ max-width: 62ch; font-size: 1rem; color: var(--pp-tinte-2); margin: 0 0 1.1rem; }
.pp-vor-ort-liste{
	column-count: 1;
	margin: 0;
	padding: 0;
	list-style: none;
}
.pp-vor-ort-liste li{ break-inside: avoid; margin-bottom: .45rem; }
.pp-vor-ort-liste a{ color: var(--pp-tinte); text-decoration: none; font-size: .95rem; }
.pp-vor-ort-liste a:hover{ color: var(--pp-orange-text); text-decoration: underline; }

@media (min-width: 782px){
	.pp-vor-ort-liste{ column-count: 3; column-gap: 1.5rem; }
}

/* ---- Themenseiten-Vorlage ---- */
.pp-thema{ margin-block: clamp(1.5rem, 4vw, 3rem); }
.pp-thema-titel{ margin: 0 0 1rem; }

.pp-thema-position{
	background: var(--pp-flaeche);
	border-left: 4px solid var(--pp-orange);
	padding: clamp(.9rem, 2vw, 1.3rem);
	margin: 0 0 1.5rem;
	font-size: 1.05rem;
}

.pp-thema-forderungen{ margin: 0 0 1.5rem; padding-left: 1.3rem; }
.pp-thema-forderungen li{ margin-bottom: .5rem; }

.pp-thema-warum{ max-width: 68ch; margin: 0 0 1.5rem; }

.pp-thema-programm{
	font-size: .92rem;
	color: var(--pp-tinte-2);
	margin: 0 0 2rem;
}
.pp-thema-programm a{ color: var(--pp-orange-text); }

.pp-thema-aktuelles-titel{ margin: 0 0 .75rem; }
.pp-thema-aktuelles .wp-block-post-title a{
	color: var(--pp-tinte);
	text-decoration: none;
}
.pp-thema-aktuelles .wp-block-post-title a:hover{ text-decoration: underline; }
.pp-thema-aktuelles .wp-block-post-date{
	font-size: .82rem;
	color: var(--pp-tinte-2);
}

.pp-thema-zustaendig{
	border: 1px solid var(--pp-linie);
	border-radius: 0;
	padding: clamp(.8rem, 2vw, 1.1rem);
	font-size: .9rem;
	color: var(--pp-tinte-2);
	margin: 2rem 0;
}

.pp-mitmachen-fuss{
	background: var(--pp-flaeche);
	border-top: 3px solid var(--pp-orange);
	padding: clamp(1.1rem, 3vw, 1.6rem);
	text-align: center;
}
.pp-mitmachen-fuss p{ margin: 0 0 .9rem; font-size: 1rem; }
.pp-mitmachen-fuss .wp-block-buttons{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
}
/* Beide Knöpfe (gefüllt und Outline) gleich hoch: Astra hinterlegt für den
   Outline-Stil eine eigene, sehr spezifische Regel
   (".wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link.wp-element-button",
   13px 30px) — dagegen kommt eine normale Klassenregel nicht an, deshalb
   hier mit !important gezielt überstimmt. */
.pp-mitmachen-fuss .wp-block-button__link{
	padding: .6rem 1.1rem !important;
}
/* Der Outline-Knopf hat zusätzlich einen 2px-Rand, der bei gleichem
   Padding sonst 4px mehr Höhe ergibt als der gefüllte Knopf ohne Rand —
   hier durch entsprechend schmaleres Padding ausgeglichen. */
.pp-mitmachen-fuss .wp-block-button.is-style-outline .wp-block-button__link{
	padding: calc(.6rem - 2px) 1.1rem !important;
}

/* Offene Stellen: bewusst sichtbar markiert, nicht plausibel ausgefüllt */
.pp-offen{
	background: #fff6d6;
	padding: .1rem .35rem;
	border-radius: 0;
}

@media (max-width: 781px){
	.pp-thema-position{ font-size: 1rem; padding: .85rem; }
	.pp-mitmachen-fuss{ padding: 1rem; }
}

/* ---- Beitragsvorlage ---- */
.pp-themenmarke{
	display: inline-block;
	background: var(--pp-flaeche);
	color: var(--pp-tinte-2);
	border-radius: 0;
	padding: .15rem .7rem;
	font-size: .8rem;
	font-weight: 600;
	margin: 0 0 .6rem;
}


.pp-einordnung{
	background: var(--pp-flaeche);
	border-left: 4px solid var(--pp-orange);
	padding: clamp(.9rem, 2vw, 1.3rem);
	margin: 2rem 0;
}

.pp-verwandte{ margin: 2rem 0; }
.pp-verwandte-titel{ font-size: 1.1rem; margin: 0 0 .6rem; }
.pp-verwandte-liste{ list-style: none; padding: 0; margin: 0; }
.pp-verwandte-liste li{ margin-bottom: .4rem; }
.pp-verwandte-liste a{ color: var(--pp-orange-text); text-decoration: none; }
.pp-verwandte-liste a:hover{ text-decoration: underline; }

/* ---- Inhaltsseiten-Vorlage ---- */
/* Hülle um bestehenden Seiteninhalt, siehe functions.php
   (piraten_inhaltsseite_erweiterung). Der Bestand ist formatlich
   uneinheitlich (alter Editor, Wiki-Export-Reste, teils Gutenberg) —
   deshalb Tag-Selektoren statt Block-Klassen, damit jede Vorlage greift. */
.pp-inhalt{
	--pp-huelle-polster: clamp(1.25rem, 3.5vw, 2.5rem);
	max-width: 72ch;
	padding-block: var(--pp-huelle-polster);
}
/* Ein Block in voller Breite (Aufmacherbild, Spectra-Container mit
   align:full) soll buendig unter dem Header bzw. auf dem Footer sitzen.
   Das Polster der Huelle laesst dort sonst nur den Seitenhintergrund
   durchscheinen — der graue Streifen zwischen Header und Aufmacherbild
   bzw. ueber dem Footer. Astras Seitenhintergrund ist
   var(--ast-global-color-5) = #f0f5fa, die Huelle selbst ist transparent;
   deshalb faellt das Polster nur an genau diesen Kanten auf.
   :has() wird von allen aktuellen Browsern unterstuetzt; wo nicht, bleibt
   schlicht das bisherige Polster stehen — kein Bruch, nur ein Streifen. */
.pp-inhalt:has(> :first-child.alignfull){ padding-block-start: 0; }
.pp-inhalt:has(> :last-child.alignfull){ padding-block-end: 0; }
.pp-inhalt h2{
	font-size: clamp(1.25rem, 2.8vw, 1.6rem);
	margin: 2.2rem 0 .75rem;
}
.pp-inhalt h2:first-child{ margin-top: 0; }
.pp-inhalt h3{ font-size: 1.12rem; margin: 1.6rem 0 .6rem; }
.pp-inhalt h4{ font-size: 1rem; margin: 1.3rem 0 .5rem; }
.pp-inhalt p{ margin: 0 0 1rem; max-width: 68ch; }
/* Ausnahme: Auf Seiten, die aus Blöcken gebaut sind (Spectra-Container,
   Gruppen, Spalten), bestimmt der Block die Breite — nicht die Lesebreite
   der Textseiten-Vorlage. Sonst steht schmaler Fließtext neben deutlich
   breiteren mehrspaltigen Blöcken (aufgefallen auf /wer-wir-sind/).
   Reine Textseiten (Satzung, Impressum, Datenschutz) haben keine solchen
   Block-Hüllen und behalten ihre Lesebreite. */
.pp-inhalt [class*="wp-block-"] p{ max-width: none; }
.pp-inhalt ul,
.pp-inhalt ol{ margin: 0 0 1.1rem; padding-left: 1.3rem; }
.pp-inhalt li{ margin-bottom: .35rem; }
.pp-inhalt a{ color: var(--pp-orange-text); }
.pp-inhalt a:hover{ text-decoration: none; }
.pp-inhalt hr{
	border: none;
	border-top: 1px solid var(--pp-linie);
	margin: 2.2rem 0;
}
.pp-inhalt figure{ margin: 1.6rem 0; }
.pp-inhalt img{ max-width: 100%; height: auto; border-radius: 0; }

/* Seitenrand auf schmalen Schirmen.
   Die Bloecke im Inhalt haben jeweils eine eigene max-width (Absaetze
   68ch, Ueberschriften und Listen die Astra-Inhaltsbreite) und werden
   ueber automatische Aussenabstaende mittig gesetzt. Sobald das Fenster
   schmaler wird als diese max-width, gibt es nichts mehr zu verteilen:
   die Abstaende fallen auf 0 und der Text klebt am Displayrand -- auf dem
   Telefon ueber die gesamte Breite. Deshalb hier ein fester Mindestrand,
   derselbe Wert wie im Footer, damit die Seite durchgehend denselben
   Rand hat. Blockweise statt am .pp-inhalt-Rahmen, weil randabfallende
   Bloecke (Aufmacherbild, Hero-Container) weiterhin von Kante zu Kante
   laufen sollen -- die sind als .alignfull ausgenommen. */
@media (max-width: 781px){
	.pp-inhalt > *:not(.alignfull){
		margin-left: 35px !important;
		margin-right: 35px !important;
	}
}

/* ---- Archiv/Themenfilter-Vorlage ---- */
.pp-themenfilter{ margin: 0 0 1.75rem; }
/* Kurzbefehl-Einsatz (z. B. /aktuelles/): Dort steht die Leiste als eigener
   Block in voller Seitenbreite und muss selbst auf die Inhaltsspalte
   begrenzt werden — 70 % zentriert, exakt die Breite, die der Spectra-
   Container des Beitragsrasters verwendet (bei 1280/1000/500 px nachgemessen).
   Auf Archivseiten kommt diese Klasse nicht vor — dort stellt die Regel
   weiter unten (body.category) dieselbe Spaltenbreite her. */
.pp-themenfilter-spalte{ width: 70%; margin-inline: auto; }
/* Dieselbe Spaltenbreite fuer die Beitragsliste des Kurzbefehls
   [piraten-beitragsliste] und ihre Blaetterleiste — damit Filterchips,
   Beitraege und Pagination auf /aktuelles/ buendig untereinander stehen. */
.pp-beitragsliste,
.pp-blaettern{ width: 70%; margin-inline: auto; }
.pp-blaettern{ margin-top: 1.75rem; margin-bottom: 3rem; }

/* ---- Kategorieseiten auf die Spaltenbreite von /aktuelles/ bringen ----
   Auf /aktuelles/ liegen Filterleiste und Beitragsliste als Bloecke in einer
   Seite mit voller Inhaltsbreite; ihre 70 % rechnen also gegen die volle
   Fensterbreite. Die Kategorie-Archive laufen dagegen durch Astras
   Standard-Container, der vorher bei 1240px gedeckelt ist -- dieselben 70 %
   haetten dort eine andere Bezugsgroesse und damit eine andere Breite
   ergeben (bei 1440px Fenster: 840px statt 1008px). Deshalb wird der Deckel
   fuer Kategorieseiten aufgehoben und die Inhaltsspalte selbst auf 70 %
   gesetzt -- gemessen deckungsgleich mit /aktuelles/ bei 1440, 1728 und
   375px. Das randabfallende Titelbild bleibt unberuehrt: es loest sich ueber
   width:100vw + negative Aussenabstaende ohnehin aus der Spalte heraus.
   width braucht !important, weil Astra die Breite ueber den ID-Selektor
   #primary setzt und der jede Klassenregel schlaegt. */
body.category .site-content > .ast-container{
	max-width: none !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
body.category .content-area{
	width: 70% !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
.pp-themenfilter-liste{
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.pp-themenfilter-liste a{
	display: inline-block;
	border: 1px solid var(--pp-linie);
	border-radius: 0;
	padding: .3rem .85rem;
	font-size: .85rem;
	color: var(--pp-tinte-2);
	text-decoration: none;
	white-space: nowrap;
}
.pp-themenfilter-liste a:hover{ border-color: var(--pp-orange); color: var(--pp-tinte); }
.pp-themenfilter-liste a.ist-aktiv{
	background: var(--pp-orange);
	border-color: var(--pp-orange);
	color: #fff;
	font-weight: 600;
}

a.pp-themenmarke-link{ text-decoration: none; }
a.pp-themenmarke-link:hover{ background: var(--pp-orange); color: #fff; }

.pp-archiv-karte{
	/* Breite der Bildspalte an einer Stelle. Die Hoehe kommt nicht von hier,
	   sondern aus der Karte selbst (siehe .pp-archiv-bild). */
	--pp-archiv-bildbreite: clamp(240px, 32%, 340px);
	display: flex;
	gap: 1.1rem;
	padding: 1.1rem 0;
	border-bottom: 1px solid var(--pp-linie);
	list-style: none;
}
.pp-archiv-karte:first-of-type{ padding-top: 0; }
.pp-archiv-bild{
	flex: none;
	width: var(--pp-archiv-bildbreite);
	/* Die Hoehe ist bewusst NICHT gesetzt: align-self: stretch (der Vorgabewert
	   des Flex-Containers) zieht den Rahmen auf die volle Kartenhoehe, das Bild
	   fuellt sie per object-fit: cover. Ein aspect-ratio waere hier wirkungslos
	   — es greift nur bei automatischer Hoehe.
	   Damit die Karte nie schmaler als querformatig wird, gibt min-height die
	   4:3-Untergrenze vor; bei laengerem Text waechst das Bild mit und wird
	   flacher, nie hochkant. */
	align-self: stretch;
	min-height: calc(var(--pp-archiv-bildbreite) * 3 / 4);
	border-radius: 0;
	overflow: hidden;
	display: block;
}
.pp-archiv-bild img{
	width: 100%;
	height: 100%;
	/* Wenn die Karte vom Text hoeher gezogen wird, ist die Rahmenhoehe bestimmt
	   und height: 100% greift; aspect-ratio bleibt dann wirkungslos.
	   Ist der Text kuerzer, hat der Rahmen keine bestimmte Hoehe, height: 100%
	   faellt auf auto zurueck — und ohne aspect-ratio wuerde das Bild in seinem
	   Originalformat rendern und hochkant die ganze Karte aufblaehen.
	   aspect-ratio deckelt diesen Fall auf 4:3. */
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	margin: 0;
}
.pp-archiv-karte-text{ min-width: 0; flex: 1 1 auto; }

/* Eine Zeile je Beitrag: Bild links, Text rechts. Astra rendert Archive im
   Raster (.ast-blog-layout-4-grid .ast-article-post -> width 33,33 %) und
   gibt dem Vorschaubild eine eigene Proportion; beides wird hier fuer unsere
   Karte ausgehebelt, damit die Karte die volle Spaltenbreite bekommt und das
   Bild seine feste Groesse behaelt. Ohne diese Regeln quetscht Astras Raster
   die Karte auf ein Drittel und der Textblock faellt auf Breite 0. */
.pp-archiv-karte.ast-article-post{ width: 100%; max-width: 100%; }
.pp-archiv-karte .pp-archiv-bild{ flex: 0 0 var(--pp-archiv-bildbreite); width: var(--pp-archiv-bildbreite); }
.pp-archiv-titel-eintrag{ font-size: 1.15rem; margin: .1rem 0 .3rem; }
.pp-archiv-titel-eintrag a{ color: var(--pp-tinte); text-decoration: none; }
.pp-archiv-titel-eintrag a:hover{ color: var(--pp-orange-text); text-decoration: underline; }
.pp-archiv-datum{ font-size: .82rem; color: var(--pp-tinte-2); margin: 0 0 .4rem; }
/* Kein eigenes Zeilenmass: Titel, Datum und Anriss sollen buendig auf
   derselben Breite stehen wie die Textspalte der Karte — und damit wie die
   Filterleiste darueber. Ein 62ch-Limit hier liess den Anriss auf breiten
   Schirmen rund 250 px vor den anderen Zeilen enden. Der Anriss ist per
   wp_trim_words auf 32 Woerter gekuerzt, bleibt also auch ueber die volle
   Spalte zwei Zeilen kurz. */
.pp-archiv-text{ font-size: .93rem; color: var(--pp-tinte-2); margin: 0 0 .4rem; }
/* Astras Rasterzeile zieht ihre Kinder mit -20 px Aussenabstand nach links
   (Rinne fuer das dreispaltige Standard-Blograster). Unsere Karte ist eine
   einspaltige Liste ohne Rinne und haengt dadurch 20 px weiter links als die
   Filterleiste darueber. Nur fuer Zeilen zurueckgenommen, die unsere Karten
   enthalten — Astras eigenes Raster bleibt unberuehrt. */
.ast-row:has(> .pp-archiv-karte){ margin-left: 0; margin-right: 0; }

.pp-archiv-mehr{ margin: 0; }
.pp-archiv-mehr a{ color: var(--pp-orange-text); font-weight: 600; font-size: .88rem; text-decoration: none; }
.pp-archiv-mehr a:hover{ text-decoration: underline; }
.pp-archiv-mehr a::after{ content: " \2192"; }

/* WordPress-Kernklasse aus paginate_links(), themenunabhängig */
.page-numbers{
	display: inline-block;
	padding: .4rem .75rem;
	border: 1px solid var(--pp-linie);
	border-radius: 0;
	margin: 0 .3rem .3rem 0;
	font-size: .85rem;
	color: var(--pp-tinte-2);
	text-decoration: none;
}
a.page-numbers:hover{ border-color: var(--pp-orange); color: var(--pp-tinte); }
.page-numbers.current{ background: var(--pp-orange); border-color: var(--pp-orange); color: #fff; }

@media (max-width: 781px){
	.pp-themenfilter-liste{ flex-wrap: nowrap; overflow-x: auto; padding-bottom: .3rem; -webkit-overflow-scrolling: touch; }
	.pp-archiv-karte{ flex-direction: column; gap: .6rem; padding: .9rem 0; }
	.pp-archiv-karte .pp-archiv-bild{ flex: 0 0 auto; width: 100%; min-height: 0; aspect-ratio: 16 / 9; }
}

/* ---- Titelbild der Kategorieseite ---- */
/* Die gesamte Gestaltung (Layout, Deckflaechen, Farben) steckt bewusst NICHT
   hier, sondern wird von piraten_kategoriebild_ausgeben() als eigener
   <style>-Block nur dann ausgegeben, wenn die Kategorie ein Titelbild hat.
   Grund: Das neue Muster (volle Breite, Textkasten unten links) veraendert
   Groesse und Anordnung des Titels spuerbar — das soll ausschliesslich
   Kategorien mit Bild betreffen. Ohne Bild bleibt der Titel exakt Astras
   Standarddarstellung, ungeaendert von dieser Datei. Siehe dort fuer
   Herleitung und Masse (an /wer-wir-sind/ angeglichen, 09.09.2026).
*/

/* ---- Spectra Query-Loop-Pagination (Aktuelles-Seite/-Vorschau) ---- */
/* Spectra liest diese eigene CSS-Variable für seine Pagination-Farbe
   (Standard: WordPress-Blau #0073aa) — hier auf die Markenfarbe gesetzt,
   statt Spectras Regeln mit !important zu überschreiben. */
:root{
	--spectra-pagination-color: var(--pp-orange);
	/* Radius 0 statt Spectras .25rem - Chips und Blaetterlinks sind
	   ueberall Rechtecke, siehe Gestaltungsregeln. */
	--spectra-pagination-border-radius: 0;
}

/* ---- Verteilerseiten-Vorlage ---- */
/* Sonderseite (siehe piraten_ist_sonderseite() in functions.php), daher
   ohne .pp-inhalt-Huelle. Eigenes Padding-Block passend zu .pp-inhalt. */
.pp-verteiler{ padding-block: clamp(1.25rem, 3.5vw, 2.5rem); } /* wie --pp-huelle-polster in .pp-inhalt */
.pp-verteiler-intro{ max-width: 62ch; margin: 0 0 1.75rem; color: var(--pp-tinte-2); }
.pp-verteiler-raster{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: .9rem;
	margin: 0;
}
.pp-verteiler-karte{
	border: 1px solid var(--pp-linie);
	padding: 1.1rem 1.2rem;
	display: flex;
	flex-direction: column;
	gap: .3rem;
}
.pp-verteiler-karte:hover{ border-color: var(--pp-orange); }
.pp-verteiler-titel{ font-size: 1rem; margin: 0; color: var(--pp-tinte); }
.pp-verteiler-text{ font-size: .88rem; color: var(--pp-tinte-2); margin: 0; }
.pp-verteiler-link{
	margin-top: .3rem;
	font-size: .88rem;
	font-weight: 600;
	color: var(--pp-orange-text);
	text-decoration: none;
}
.pp-verteiler-link:hover{ text-decoration: underline; }
.pp-verteiler-link::after{ content: " \2192"; }
@media (max-width: 480px){
	.pp-verteiler-raster{ grid-template-columns: 1fr; }
}

/* ---- Wofür wir stehen (/positionen/) ---- */
/* Astras "page builder"-Layout hebt die Lesebreite der Inhaltsseiten-Huelle
   auf. Zurueckgeholt wird sie NICHT auf der Huelle selbst — das haette auch
   randlose Bloecke wie das Aufmacherbild eingeengt —, sondern nur auf den
   Kindern, die keine volle Breite beanspruchen. Aufmacher und andere
   alignfull-/alignwide-Bloecke (z. B. die Spectra-Container auf
   /wer-wir-sind/) laufen weiter randlos durch, Text bekommt eine Spalte
   mit Luft nach links und rechts. */
.ast-page-builder-template .entry-content .pp-inhalt > *:not(.alignfull):not(.alignwide){
	max-width: 60rem;
	margin-inline: auto;
}
.pp-positionen-intro{
	font-size: 1.12rem;
	line-height: 1.55;
	color: var(--pp-tinte);
}
/* Der Einleitungsabsatz bleibt schmaler als die Inhaltsspalte — fuenf Saetze
   ueber 960 px waeren rund 110 Zeichen je Zeile und damit unlesbar. Muss die
   Spaltenregel oben ueberbieten, daher die lange Selektorkette. */
.ast-page-builder-template .entry-content .pp-inhalt > .pp-positionen-intro:not(.alignfull):not(.alignwide){
	max-width: 46rem;
}

/* Akkordeon (WordPress-Kernblock) — eckig, ohne Fuellfarbe, Linien statt
   Kaesten. Kein Radius, siehe Gestaltungsregel. */
.wp-block-accordion{ margin: 1.5rem 0 2rem; border-top: 1px solid var(--pp-linie); }
.wp-block-accordion-item{ border-bottom: 1px solid var(--pp-linie); }
.wp-block-accordion-heading{ margin: 0; font-size: 1.05rem; }
.wp-block-accordion-heading__toggle{
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	background: none;
	border: 0;
	border-radius: 0;
	padding: .85rem 0;
	text-align: left;
	font: inherit;
	color: var(--pp-tinte);
	cursor: pointer;
}
.wp-block-accordion-heading__toggle:hover{ color: var(--pp-orange-text); }

/* Auf-/Zuklapp-Symbol: oranges Quadrat mit weissem Plus bzw. Minus.
   Vorher war es ein 16px-Textzeichen "+" in Orange als Schriftfarbe -- zu
   klein, man uebersah, dass sich die Themen aufklappen lassen. Jetzt Orange
   als Flaeche, Radius 0, Zeichen weiss wie beim Knopf (.pp-knopf) --
   ausdruecklich keine dunkle Schrift auf Orange (Sebastian, 25.09.2026).
   Das "+" aus dem Kernmarkup wird per font-size:0 ausgeblendet (es ist
   ohnehin aria-hidden) und durch zwei Balken ersetzt: waagerecht (::before)
   und senkrecht (::after). Beim Oeffnen legt sich der senkrechte Balken
   flach -- aus dem Plus wird ein Minus. */
.wp-block-accordion-heading__toggle-icon{
	position: relative;
	flex: 0 0 auto;
	/* Exakt so gross wie Astras "Nach oben"-Knopf (#ast-scroll-top): der
	   rechnet 2.1em bei einer Symbolgroesse von 15px = 31,5px, bei jeder
	   Fensterbreite. Hier steht die Rechnung ausgeschrieben, weil das Feld
	   selbst font-size:0 traegt und em deshalb nicht funktioniert.
	   Achtung: Wird die Symbolgroesse im Customizer (Nach oben scrollen)
	   geaendert, muessen die 15px hier und bei den Balken nachgezogen werden. */
	width: calc(15px * 2.1);
	height: calc(15px * 2.1);
	background: var(--pp-orange);
	border-radius: 0;
	font-size: 0;
	transition: background-color .15s;
}
.wp-block-accordion-heading__toggle-icon::before,
.wp-block-accordion-heading__toggle-icon::after{
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 15px; /* so breit wie der Pfeil im Nach-oben-Knopf */
	height: 3px;
	background: #fff;
	transform: translate(-50%, -50%);
	transition: transform .2s;
}
.wp-block-accordion-heading__toggle-icon::after{ transform: translate(-50%, -50%) rotate(90deg); }
/* Der Kernblock dreht im offenen Zustand das GANZE Symbol um 45 Grad (aus
   "+" wird "x"). Bei einem Quadrat ergaebe das eine Raute -- deshalb
   aufgehoben; die Zustandsaenderung uebernimmt der Balken oben. Eine
   Stufe spezifischer als die Kernregel, damit kein !important noetig ist. */
.wp-block-accordion .wp-block-accordion-item.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon{ transform: none; }
.wp-block-accordion .wp-block-accordion-item.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon::after{ transform: translate(-50%, -50%) rotate(0deg); }
.wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-icon{ background: var(--pp-orange-dark); }
/* Der Kernblock blendet das Panel mit hidden="until-found" aus (damit die
   Browsersuche es trotzdem findet). Das nimmt anders als display:none weiter
   Platz ein — Innenabstand deshalb nur im aufgeklappten Zustand. */
.wp-block-accordion-panel{ padding: 0; }
.wp-block-accordion-panel:not([hidden]){ padding: 0 0 1.1rem; }
/* Kernaussage als zweite Zeile in der Akkordeon-Ueberschrift — dadurch schon
   im zugeklappten Zustand lesbar. Steckt als <em class="pp-kern"> im
   rich-text-Titel des Kernblocks (ueberlebt Serialisierung, Block bleibt
   gueltig) und ist im Editor ganz normal mitzubearbeiten. */
.wp-block-accordion-heading__toggle-title .pp-kern{
	display: block;
	margin-top: .2rem;
	/* Erbt sonst PoliticsHead aus der h3-Regel — die Kernaussage ist aber
	   Fliesstext, keine Ueberschrift. */
	font-family: var(--pp-schrift-text);
	font-style: normal;
	font-weight: 400;
	font-size: .92rem;
	line-height: 1.4;
	color: var(--pp-tinte-2);
}
.wp-block-accordion-heading__toggle{ align-items: flex-start; }
.pp-position-kern{ margin: 0 0 .7rem; color: var(--pp-tinte); }
.wp-block-accordion-panel ul{ margin: 0 0 .9rem; padding-left: 1.2rem; }
.wp-block-accordion-panel li{ margin-bottom: .3rem; }
.pp-position-quelle{ margin: 0; font-size: .88rem; color: var(--pp-tinte-2); }

/* ---- Footer-Widgets: seitlicher Abstand auf Mobilgeraeten ---- */
/* Astra haelt die Footer-Builder-Spalten per max-width:1200px + Auto-Margin
   innerhalb eines vollbreiten Wrappers mittig -- das ist KEIN echtes
   Padding, sondern reiner Freiraum durch die Breitenbegrenzung. Auf
   Mobilgeraeten faellt die max-width weg, und mit ihr der gesamte seitliche
   Abstand: die Widgets stossen direkt an den Bildschirmrand. Der Inhalts-
   bereich (.ast-container) hat dagegen echtes Padding (35px) und behaelt
   seinen Rand auch mobil. Hier wird der Footer an diesen Standard-Rand
   angeglichen, damit Inhalt und Footer im gleichen Fluss liegen. */
@media (max-width: 781px){
	.ast-builder-footer-grid-columns{
		padding-left: 35px !important;
		padding-right: 35px !important;
		box-sizing: border-box !important;
	}
}