/* Design v4 für pro-contra.at und pros-cons.online
   Idee: Collegeblock, aufgeräumt. Karopapier als Grund, Tinte für Schrift, Textmarker für Hervorhebungen
   und gefüllte Knöpfe, Linienblatt zum Schreiben. Logos, Roboto, Dunkelblau, Pro-Grün und Contra-Blau bleiben.
   Alles liegt unter .pc. Größen und Abstände sind fluid (clamp) zwischen 375 px und 1280 px Breite. */

/* ++++ Tokens */
.pc{
	/* farben */
	--pc-tinte:#081353;
	--pc-text:#081353;
	--pc-text-leise:#545C72;
	--pc-papier:#FAFBFD;
	--pc-karte:#FFFFFF;
	--pc-karo:#E4E9F3;
	--pc-rand:#D3DAE8;
	--pc-randlinie:#E8A3AE;
	--pc-pro:#8BC349;
	--pc-pro-mark:#8BC349;
	--pc-pro-text:#3D6B1A;
	--pc-pro-flaeche:#EEF6E4;
	--pc-contra:#0A6FA8;
	--pc-contra-text:#075F91;
	--pc-contra-flaeche:#E5F1F9;
	--pc-marker:#FFD447;
	--pc-marker-hover:#FFC917;
	--pc-auf-marker:#081353;

	/* abstände: S = halber, M = basis, L = doppelter abstand */
	--pc-gap-S:clamp(0.85rem, 0.6843rem + 0.7072vw, 1.25rem);   /* 13,6–20 px */
	--pc-gap-M:clamp(1.7rem, 1.3685rem + 1.4144vw, 2.5rem);     /* 27,2–40 px */
	--pc-gap-L:clamp(3.4rem, 2.7370rem + 2.8287vw, 5rem);       /* 54,4–80 px */

	/* überschriften */
	--pc-heading-S:clamp(1.125rem, 1.0214rem + 0.4420vw, 1.375rem);  /* 18–22 px */
	--pc-heading-M:clamp(1.375rem, 1.1678rem + 0.8840vw, 1.875rem);  /* 22–30 px */
	--pc-heading-L:clamp(2.125rem, 1.6588rem + 1.9890vw, 3.25rem);   /* 34–52 px */

	/* text */
	--pc-text-XS:clamp(0.75rem, 0.7241rem + 0.1105vw, 0.8125rem);    /* 12–13 px */
	--pc-text-S:clamp(0.875rem, 0.8491rem + 0.1105vw, 0.9375rem);    /* 14–15 px */
	--pc-text-M:clamp(1rem, 0.9741rem + 0.1105vw, 1.0625rem);        /* 16–17 px */
	--pc-text-L:clamp(1.0625rem, 0.9848rem + 0.3315vw, 1.25rem);     /* 17–20 px */

	/* radien: fest */
	--pc-radius-S:8px;
	--pc-radius-M:14px;
	--pc-radius-L:20px;
	--pc-radius-rund:999px;

	/* schatten, fokus, bedienung */
	--pc-schatten-S:0 1px 2px rgba(8,19,83,.06), 0 1px 1px rgba(8,19,83,.04);
	--pc-schatten-M:0 1px 2px rgba(8,19,83,.06), 0 6px 16px -4px rgba(8,19,83,.10);
	--pc-schatten-L:0 2px 4px rgba(8,19,83,.06), 0 16px 32px -8px rgba(8,19,83,.16);
	--pc-fokus:0 0 0 3px var(--pc-papier), 0 0 0 6px var(--pc-tinte);
	--pc-ziel:44px;
	--pc-schnell:160ms;
	--pc-ease:cubic-bezier(.2,.8,.2,1);

	color:var(--pc-text);
	font-family:'Roboto', system-ui, sans-serif;
	font-size:var(--pc-text-M);
	font-variant-numeric:tabular-nums;
}
/* dunkel: „Tafel“; auf der website über prefers-color-scheme und einen schalter */
html[data-pc-dunkel] .pc{
	--pc-text:#EEF1FA;
	--pc-text-leise:#AEB6CC;
	--pc-papier:#0E1530;
	--pc-karte:#172042;
	--pc-karo:#1A2450;
	--pc-rand:#2A3561;
	--pc-randlinie:#7A3A4C;
	--pc-pro-mark:#6FA236;
	--pc-pro-text:#A6D86E;
	--pc-pro-flaeche:#1F3320;
	--pc-contra:#3C9AD3;
	--pc-contra-text:#7CC6F2;
	--pc-contra-flaeche:#132E48;
	--pc-schatten-S:0 1px 2px rgba(0,0,0,.4);
	--pc-schatten-M:0 1px 2px rgba(0,0,0,.4), 0 6px 16px -4px rgba(0,0,0,.5);
	--pc-schatten-L:0 2px 4px rgba(0,0,0,.4), 0 16px 32px -8px rgba(0,0,0,.6);
	--pc-fokus:0 0 0 3px var(--pc-papier), 0 0 0 6px var(--pc-marker);
}
/* hoher kontrast (erster entwurf): alle textpaare mindestens 7 : 1, ränder mindestens 3 : 1, ohne karo und schatten.
   auf der website über prefers-contrast: more und den schalter „ansicht“ */
html[data-pc-kontrast] .pc{
	--pc-text:#000000; --pc-tinte:#000000; --pc-text-leise:#2B3142;
	--pc-papier:#FFFFFF; --pc-karte:#FFFFFF; --pc-karo:#FFFFFF; --pc-rand:#4A5268; --pc-randlinie:#B4485A;
	--pc-pro:#3C7A1A; --pc-pro-mark:#3C7A1A; --pc-pro-text:#2A4A10; --pc-pro-flaeche:#E3F2D2; --pc-contra:#03466E; --pc-contra-text:#03466E; --pc-contra-flaeche:#D8EBF8;
	--pc-schatten-S:none; --pc-schatten-M:none; --pc-schatten-L:0 0 0 2px #000000;
	--pc-fokus:0 0 0 3px #FFFFFF, 0 0 0 6px #000000;
}
html[data-pc-dunkel][data-pc-kontrast] .pc{
	--pc-text:#FFFFFF; --pc-tinte:#FFFFFF; --pc-text-leise:#DCE1EE;
	--pc-papier:#000000; --pc-karte:#0A0E1C; --pc-karo:#000000; --pc-rand:#A3ACC4; --pc-randlinie:#E07A8C;
	--pc-pro:#8BC349; --pc-pro-mark:#8BC349; --pc-pro-text:#C4F294; --pc-pro-flaeche:#16260F; --pc-contra:#7FCBF5; --pc-contra-text:#A9DEFF; --pc-contra-flaeche:#0B2236;
	--pc-schatten-L:0 0 0 2px #FFFFFF;
	--pc-fokus:0 0 0 3px #000000, 0 0 0 6px #FFD447;
}
/* im hohen kontrast tragen karten und knöpfe einen kräftigen rand statt schatten */
html[data-pc-kontrast] .pc .beitraege li > div, html[data-pc-kontrast] .pc .pc-index-listen .liste,
html[data-pc-kontrast] .pc .pcl-header::before, html[data-pc-kontrast] .pc .pc-sb, html[data-pc-kontrast] .pc .add form{ border-width:2px; border-color:var(--pc-text); }
html[data-pc-kontrast] .pc .bt-info, html[data-pc-kontrast] .pc .beitraege form i{ color:var(--pc-text); }
html[data-pc-kontrast] .pc .pcl-header::before{ border:2px solid var(--pc-text); }
/* bedienelemente mit klarer grenze (mindestens 3 : 1 zum grund): rand in schrift- bzw. seitenfarbe */
html[data-pc-kontrast] .pc .beitraege button.vote{ border:2px solid currentColor; }
html[data-pc-kontrast] .pc .beitraege button.options,
html[data-pc-kontrast] .pc .pc-tools > a, html[data-pc-kontrast] .pc .pc-ansicht, html[data-pc-kontrast] .pc .pc-search form,
html[data-pc-kontrast] .pc .top-filter a, html[data-pc-kontrast] .pc .tag-filter a, html[data-pc-kontrast] .pc .pcl-header .tag,
html[data-pc-kontrast] .pc #max-tag-filter-button, html[data-pc-kontrast] .pc .pc-mehrknopf, html[data-pc-kontrast] .pc .pc-segment{ border:2px solid var(--pc-text); }
html[data-pc-kontrast] .pc .pc-schalter__bahn, html[data-pc-kontrast] .pc .pc-mini{ border-color:var(--pc-text); }
html[data-pc-kontrast] .pc .pc-zeugnis .z-menge__balken{ background:var(--pc-text-leise); }
/* links: unterstreichung in schriftfarbe, kräftiger */
html[data-pc-kontrast] .pc a:not(.tag):not(.btn), html[data-pc-kontrast] .pc .pc-sb__sprung, html[data-pc-kontrast] .pc > footer button{
	text-decoration:underline; text-decoration-color:currentColor; text-decoration-thickness:2px; text-underline-offset:.2em; }
html[data-pc-kontrast] .pc .pc-index-listen .name a, html[data-pc-kontrast] .pc .top-filter a, html[data-pc-kontrast] .pc .tag-filter a{ text-decoration:none; }
/* ---- Tokens */

/* ++++ Grund */
/* karopapier, 5 mm (20 px) */
.pc-papier{
	background-color:var(--pc-papier);
	background-image:
		linear-gradient(var(--pc-karo) 1px, transparent 1px),
		linear-gradient(90deg, var(--pc-karo) 1px, transparent 1px);
	background-size:20px 20px;
	background-position:-1px -1px;
}
.pc :focus-visible{ outline:none; box-shadow:var(--pc-fokus); }
/* suchfeld und schreibfeld: den ring trägt das ganze element (pille bzw. karte über :focus-within), nicht das feld */
.pc .pc-search input:focus-visible, .pc .add textarea:focus-visible{ outline:none; box-shadow:none; }
.pc .sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.pc svg.icon{ color:currentColor; overflow:visible; }
html[data-pc-dunkel] .pc svg.icon{ --icon-marker-deckung:.55; }
html[data-pc-dunkel][data-pc-kontrast] .pc svg.icon{ --icon-marker-deckung:.75; }
/* icon-system: linie = currentColor (faserstift tinte), marker in neon je icon (eigene farbe im sprite).
   --icon-fill überschreibt die markerfarbe; auf textmarker-knöpfen fällt der marker weg */
.pc .kn--marker svg.icon, .pc .pc-suche .kn svg.icon{ --icon-fill:transparent; }
.pc h1, .pc h2, .pc h3{ margin:0; }
/* inhalt der seite: breite und seitenrand */
.pc-seite{ max-width:1024px; margin:0 auto; padding:var(--pc-gap-S) var(--pc-gap-S) var(--pc-gap-L); }
/* ---- Grund */

/* ++++ Textmarker: wie mit dem Stift über die untere Hälfte gezogen */
.pc .marker{
	background-image:linear-gradient(100deg, transparent .2em, var(--pc-marker) .2em, var(--pc-marker) calc(100% - .15em), transparent calc(100% - .15em));
	background-size:100% .5em;
	background-position:0 88%;
	background-repeat:no-repeat;
	padding:0 .1em;
	box-decoration-break:clone;
	-webkit-box-decoration-break:clone;
}
html[data-pc-dunkel] .pc .marker{ background-image:linear-gradient(100deg, transparent .2em, rgba(255,212,71,.35) .2em, rgba(255,212,71,.35) calc(100% - .15em), transparent calc(100% - .15em)); }
/* ---- Textmarker */

/* ++++ Knöpfe: gefüllt immer Textmarker, mindestens 44 px */
.pc .kn{
	display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
	min-height:var(--pc-ziel); padding:0 1.1rem;
	font:700 var(--pc-text-S)/1 'Roboto', sans-serif; letter-spacing:.01em;
	border-radius:var(--pc-radius-rund); border:1.5px solid transparent;
	cursor:pointer; text-decoration:none; color:var(--pc-text);
	transition:background-color var(--pc-schnell) var(--pc-ease), border-color var(--pc-schnell) var(--pc-ease), transform var(--pc-schnell) var(--pc-ease);
}
.pc .kn svg{ width:1.25rem; height:1.25rem; flex:none; }
.pc .kn--marker{ background:var(--pc-marker); color:var(--pc-auf-marker); border-color:rgba(8,19,83,.18); }
.pc .kn--marker:hover{ background:var(--pc-marker-hover); }
.pc .kn--rand{ background:var(--pc-karte); border-color:var(--pc-rand); }
.pc .kn--rand:hover{ border-color:var(--pc-text); }
.pc .kn--icon{ width:var(--pc-ziel); padding:0; background:var(--pc-karte); border-color:var(--pc-rand); }
.pc .kn--icon:hover{ border-color:var(--pc-text); }
.pc .kn:active{ transform:translateY(1px); }
.pc .kn:disabled{ background:transparent; color:var(--pc-text-leise); border-color:var(--pc-rand); border-style:dashed; cursor:not-allowed; }
/* aufklappen: gestrichelt, pfeil nach unten */
.pc-mehrknopf{ display:flex; align-items:center; justify-content:center; gap:.5rem; width:100%; min-height:var(--pc-ziel); cursor:pointer;
	font:700 var(--pc-text-S) 'Roboto', sans-serif; color:var(--pc-text); background:var(--pc-papier); border:1.5px dashed var(--pc-rand); border-radius:var(--pc-radius-S); }
.pc-mehrknopf[hidden]{ display:none; }
.pc-mehrknopf:hover{ border-color:var(--pc-text); border-style:solid; }
.pc-mehrknopf::after{ content:''; width:.55rem; height:.55rem; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px); transition:transform var(--pc-schnell) var(--pc-ease); }
.pc-mehrknopf[aria-expanded="true"]::after{ transform:rotate(-135deg) translateY(-2px); }
/* chip: themen und filter */
.pc-chip, .pc .pcl-header .tag{
	display:inline-flex; align-items:center; min-height:36px; padding:0 .8rem;
	font:700 var(--pc-text-XS)/1 'Roboto', sans-serif; color:var(--pc-text); text-decoration:none;
	background:var(--pc-karte); border:1px solid var(--pc-rand); border-radius:var(--pc-radius-rund);
}
.pc-chip:hover, .pc .pcl-header .tag:hover{ border-color:var(--pc-text); }
.pc-chip[aria-current]{ background:var(--pc-marker); color:var(--pc-auf-marker); border-color:rgba(8,19,83,.18); }
/* ---- Knöpfe */

/* ++++ Kopf: auf das markup von v4 gelegt (ms_header.php)
   nav > div.logo > a > img (bildmarke) + img (schriftzug), div.pc-search > form, div.pc-tools > a.pc-index / a.pc-random */
.pc > nav{
	/* eigene ebene über dem inhalt, damit das menü „ansicht“ über dem listenkopf liegt */
	position:relative; z-index:10;
	display:flex; align-items:center; gap:var(--pc-gap-S);
	padding:.75rem var(--pc-gap-S);
	background:color-mix(in srgb, var(--pc-karte) 88%, transparent);
	backdrop-filter:saturate(1.4) blur(10px);
	border-bottom:1px solid var(--pc-rand);
}
.pc > nav .logo{ flex:none; }
.pc > nav .logo a{ display:flex; align-items:center; height:var(--pc-ziel); }
.pc > nav .logo img{ height:36px; width:auto; }
.pc > nav .logo img + img{ display:none; }
@media (min-width:860px){ .pc > nav .logo img + img{ display:block; } .pc > nav .logo img:first-child{ display:none; } }
.pc .pc-search{ flex:1; min-width:0; max-width:480px; margin:0 auto; position:relative; }
.pc .pc-search form{
	display:flex; align-items:center; height:var(--pc-ziel); padding:0 .25rem 0 1rem;
	background:var(--pc-papier); border:1.5px solid var(--pc-rand); border-radius:var(--pc-radius-rund);
}
.pc .pc-search form:focus-within{ border-color:var(--pc-text); box-shadow:var(--pc-fokus); }
.pc .pc-search input{ flex:1; min-width:0; border:0; background:none; font:400 var(--pc-text-M) 'Roboto', sans-serif; color:var(--pc-text); outline:none; }
.pc .pc-search input::placeholder{ color:var(--pc-text-leise); opacity:1; }
.pc .pc-search button{ display:inline-flex; align-items:center; justify-content:center; flex:none; width:36px; height:36px; padding:0; border-radius:var(--pc-radius-rund); cursor:pointer; }
.pc .pc-search button svg{ width:20px; height:20px; }
/* suchen: textmarker-knopf, das wort „suchen“ bleibt als name für screenreader, sichtbar nur das icon */
.pc .pc-search button:not(.pc-search-reset){ font-size:0; background:var(--pc-marker); color:var(--pc-auf-marker); border:1.5px solid rgba(8,19,83,.18); }
.pc .pc-search button:not(.pc-search-reset) svg{ --icon-fill:transparent; }
/* leeren nur, wenn etwas im feld steht */
.pc .pc-search-reset{ background:none; border:0; color:var(--pc-text-leise); margin-right:.15rem; }
.pc .pc-search input:placeholder-shown ~ .pc-search-reset{ display:none; }
.pc .pc-search-result:empty{ display:none; }
.pc .pc-tools{ position:relative; display:flex; gap:.5rem; flex:none; }
.pc .pc-tools > a, .pc .pc-tools > button{
	cursor:pointer; 	display:inline-flex; align-items:center; justify-content:center; gap:.5rem; width:var(--pc-ziel); height:var(--pc-ziel); padding:0;
	font-size:0; color:var(--pc-text); text-decoration:none;
	background:var(--pc-karte); border:1.5px solid var(--pc-rand); border-radius:var(--pc-radius-rund);
}
.pc .pc-tools > a:hover, .pc .pc-tools > button:hover, .pc .pc-tools > button[aria-expanded="true"]{ border-color:var(--pc-text); }
.pc .pc-tools > a svg, .pc .pc-tools > button svg{ width:1.25rem; height:1.25rem; flex:none; }
@media (min-width:640px){ .pc .pc-tools > a, .pc .pc-tools > button{ width:auto; padding:0 1rem; font:700 var(--pc-text-S)/1 'Roboto', sans-serif; } }

/* ansicht: eine pille mit schiebeschalter (sonne/mond im knopf) und „⋯“ für das menü */
.pc .pc-ansicht{ position:relative; display:flex; align-items:center; height:var(--pc-ziel); flex:none;
	background:var(--pc-karte); border:1.5px solid var(--pc-rand); border-radius:var(--pc-radius-rund); }
.pc .pc-schalter{ display:flex; align-items:center; height:100%; padding:0 .4rem 0 .45rem; cursor:pointer; }
.pc .pc-schalter__wahl{ position:absolute; opacity:0; width:1px; height:1px; }
.pc .pc-schalter__bahn{ position:relative; display:block; width:52px; height:30px; box-sizing:border-box;
	background:var(--pc-papier); border:1.5px solid var(--pc-rand); border-radius:var(--pc-radius-rund);
	transition:background-color 250ms var(--pc-ease), border-color 250ms var(--pc-ease); }
.pc .pc-schalter__knopf{ position:absolute; top:2px; left:2px; display:grid; place-items:center; width:23px; height:23px;
	background:var(--pc-marker); color:var(--pc-auf-marker); border-radius:50%; box-shadow:0 1px 2px rgba(8,19,83,.25);
	transition:transform 250ms var(--pc-ease); }
.pc .pc-schalter__knopf svg{ grid-area:1/1; width:16px; height:16px; --icon-fill:transparent; transition:opacity 200ms var(--pc-ease), transform 250ms var(--pc-ease); }
.pc .pc-schalter__knopf svg + svg{ opacity:0; transform:rotate(-60deg); }
.pc .pc-schalter__wahl:checked + .pc-schalter__bahn{ background:var(--pc-tinte); border-color:var(--pc-tinte); }
html[data-pc-dunkel] .pc .pc-schalter__wahl:checked + .pc-schalter__bahn{ background:var(--pc-papier); border-color:var(--pc-rand); }
.pc .pc-schalter__wahl:checked + .pc-schalter__bahn .pc-schalter__knopf{ transform:translateX(22px); }
.pc .pc-schalter__wahl:checked + .pc-schalter__bahn svg:first-child{ opacity:0; transform:rotate(60deg); }
.pc .pc-schalter__wahl:checked + .pc-schalter__bahn svg + svg{ opacity:1; transform:none; }
.pc .pc-schalter:hover .pc-schalter__bahn{ border-color:var(--pc-text); }
.pc .pc-schalter__wahl:focus-visible + .pc-schalter__bahn{ box-shadow:var(--pc-fokus); }
.pc .pc-ansicht__mehr{ display:grid; place-items:center; width:34px; height:100%; padding:0 2px 0 0; cursor:pointer;
	background:none; border:0; border-left:1px solid var(--pc-rand); border-radius:0 var(--pc-radius-rund) var(--pc-radius-rund) 0; color:var(--pc-text); }
.pc .pc-ansicht__mehr svg{ width:20px; height:20px; --icon-fill:transparent; }
.pc .pc-ansicht__mehr:hover, .pc .pc-ansicht__mehr[aria-expanded="true"]{ background:var(--pc-papier); }
/* zeile im menü mit kleinem schalter (farben wie gerät) */
.pc .pc-ansicht-menue__titel{ margin:0; font-size:var(--pc-text-M); font-weight:900; }
.pc .pc-zeile{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:var(--pc-ziel); cursor:pointer; font-weight:700; font-size:var(--pc-text-S); }
.pc .pc-zeile small{ display:block; margin-top:.15rem; font-weight:400; font-size:var(--pc-text-XS); color:var(--pc-text-leise); }
.pc .pc-zeile input{ position:absolute; opacity:0; width:1px; height:1px; }
.pc .pc-mini{ position:relative; flex:none; width:40px; height:24px; box-sizing:border-box; background:var(--pc-papier); border:1.5px solid var(--pc-rand); border-radius:var(--pc-radius-rund); transition:background-color 200ms var(--pc-ease); }
.pc .pc-mini::after{ content:''; position:absolute; top:2px; left:2px; width:17px; height:17px; border-radius:50%; background:var(--pc-text-leise); transition:transform 200ms var(--pc-ease), background-color 200ms var(--pc-ease); }
.pc .pc-zeile input:checked + .pc-mini{ background:var(--pc-marker); border-color:rgba(8,19,83,.25); }
.pc .pc-zeile input:checked + .pc-mini::after{ transform:translateX(16px); background:var(--pc-auf-marker); }
.pc .pc-zeile input:focus-visible + .pc-mini{ box-shadow:var(--pc-fokus); }
@media (prefers-reduced-motion:reduce){ .pc .pc-schalter__bahn, .pc .pc-schalter__knopf, .pc .pc-schalter__knopf svg, .pc .pc-mini, .pc .pc-mini::after{ transition:none; } }
.pc .pc-ansicht-menue{
	position:absolute; z-index:20; top:calc(100% + .5rem); right:0; width:min(18rem, calc(100vw - 2rem));
	display:grid; gap:.9rem; padding:1rem;
	background:var(--pc-karte); border:1px solid var(--pc-rand); border-radius:var(--pc-radius-M); box-shadow:var(--pc-schatten-L);
}
.pc .pc-ansicht-menue[hidden]{ display:none; }
.pc .pc-ansicht-menue fieldset{ margin:0; padding:0; border:0; display:grid; gap:.4rem; min-width:0; }
.pc .pc-ansicht-menue legend{ padding:0; margin-bottom:.4rem; font-size:var(--pc-text-XS); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--pc-text-leise); }
.pc .pc-segment{ display:flex; padding:3px; gap:3px; background:var(--pc-papier); border:1px solid var(--pc-rand); border-radius:var(--pc-radius-rund); }
.pc .pc-segment label{ flex:1; display:flex; }
.pc .pc-segment input{ position:absolute; opacity:0; width:1px; height:1px; }
.pc .pc-segment span{
	flex:1; display:inline-flex; align-items:center; justify-content:center; gap:.35rem; min-height:40px; padding:0 .6rem; cursor:pointer;
	font:700 var(--pc-text-S)/1 'Roboto', sans-serif; color:var(--pc-text); border-radius:var(--pc-radius-rund);
}
.pc .pc-segment span:hover{ background:var(--pc-karte); }
.pc .pc-segment svg{ width:18px; height:18px; }
.pc .pc-segment input:checked + span{ background:var(--pc-marker); color:var(--pc-auf-marker); box-shadow:var(--pc-schatten-S); }
.pc .pc-segment input:checked + span svg{ --icon-fill:transparent; }
.pc .pc-segment input:focus-visible + span{ box-shadow:var(--pc-fokus); }
.pc .pc-ansicht-menue__hinweis{ margin:0; font-size:var(--pc-text-XS); color:var(--pc-text-leise); }
@media (max-width:420px){ .pc > nav{ gap:.5rem; padding-left:.6rem; padding-right:.6rem; } .pc .pc-tools{ gap:.35rem; } }
/* schmal: von der suche bleibt nur die lupe; ein tipp klappt das feld über die ganze kopfbreite auf (.mob-visible wie in pc.js) */
@media (max-width:480px){
	.pc .pc-search{ flex:none; max-width:none; margin:0 0 0 auto; }
	.pc .pc-search:not(.mob-visible) form{ width:var(--pc-ziel); height:var(--pc-ziel); padding:0; justify-content:center; background:none; border:0; }
	.pc .pc-search:not(.mob-visible) form:focus-within{ box-shadow:none; }
	.pc .pc-search:not(.mob-visible) input, .pc .pc-search:not(.mob-visible) .pc-search-reset{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
	.pc .pc-search:not(.mob-visible) button:not(.pc-search-reset){ width:var(--pc-ziel); height:var(--pc-ziel); }
	.pc .pc-search.mob-visible{ position:absolute; z-index:11; left:.6rem; right:.6rem; top:50%; transform:translateY(-50%); }
}
/* ---- Kopf */

/* ++++ Fuß: auf das markup von v4 gelegt (footer.php): footer > div.f-prim + div.f-sec (a, button.user-settings) */
.pc > footer{ display:grid; gap:var(--pc-gap-S); justify-items:center; padding:var(--pc-gap-M) var(--pc-gap-S); background:var(--pc-karte); border-top:1px solid var(--pc-rand); font-size:var(--pc-text-S); }
.pc > footer > div{ display:flex; flex-wrap:wrap; justify-content:center; gap:0 var(--pc-gap-S); }
.pc > footer a, .pc > footer button{ display:inline-flex; align-items:center; min-height:var(--pc-ziel); color:var(--pc-text); font:inherit; background:none; border:0; padding:0; cursor:pointer;
	text-decoration:underline; text-decoration-color:var(--pc-rand); text-underline-offset:.2em; }
.pc > footer a:hover, .pc > footer button:hover{ text-decoration-color:currentColor; }
.pc > footer .f-prim a{ font-weight:700; }
.pc > footer .f-sec a, .pc > footer .f-sec button{ color:var(--pc-text-leise); font-size:var(--pc-text-XS); }
/* ---- Fuß */

/* ++++ Listenkopf: auf das markup von v4 gelegt
   header.pcl-header > div.tags > a.tag, img, h1, h2. ohne zusätzliches element: ein raster legt das bild oben hin,
   das blatt (::before) überlappt es um --pc-gap-L, tags, h1 und h2 liegen auf dem blatt */
.pc .pcl-header{
	--rand:var(--pc-gap-S);
	display:grid; grid-template-columns:var(--rand) minmax(0,1fr) var(--rand);
	grid-template-rows:auto var(--pc-gap-L) auto auto var(--pc-gap-S);
}
/* das titelbild ist ein foto, das hinter dem blatt liegt: weißer fotorand, kleiner radius, weicher schatten */
.pc .pcl-header > img{ grid-column:1 / -1; grid-row:1 / 3; display:block; width:100%; height:auto; aspect-ratio:21/9; object-fit:cover; box-sizing:border-box;
	padding:clamp(6px, .9vw, 10px); background:#FFFFFF; border-radius:6px; box-shadow:0 1px 2px rgba(8,19,83,.10), 0 10px 28px -12px rgba(8,19,83,.35); }
html[data-pc-dunkel] .pc .pcl-header > img{ background:#E8EBF3; box-shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 28px -12px rgba(0,0,0,.8); }
html[data-pc-kontrast] .pc .pcl-header > img{ box-shadow:0 0 0 2px var(--pc-text); }
.pc .pcl-header::before{
	content:''; grid-column:2; grid-row:2 / 6; position:relative; z-index:1;
	background:var(--pc-karte); border-radius:var(--pc-radius-M); box-shadow:var(--pc-schatten-M);
	/* randlinie wie im collegeblock */
	background-image:linear-gradient(90deg, transparent 1.25rem, var(--pc-randlinie) 1.25rem, var(--pc-randlinie) calc(1.25rem + 1.5px), transparent calc(1.25rem + 1.5px));
}
.pc .pcl-header > .tags, .pc .pcl-header > h1, .pc .pcl-header > h2{ grid-column:2; position:relative; z-index:2; padding:0 var(--pc-gap-S) 0 calc(var(--pc-gap-S) + 1.25rem); margin:0; }
.pc .pcl-header > .tags{ grid-row:2; align-self:start; display:flex; flex-wrap:wrap; gap:.4rem; padding-top:var(--pc-gap-S); padding-bottom:.75rem; }
.pc .pcl-header > h1{
	grid-row:3; font-weight:900; font-size:var(--pc-heading-L); line-height:1.15; letter-spacing:-.02em;
	/* textmarker ohne zusätzliches element: dicke unterstreichung hinter der schrift, läuft je zeile mit */
	text-decoration:underline; text-decoration-color:var(--pc-marker); text-decoration-thickness:.4em;
	text-underline-offset:-.28em; text-decoration-skip-ink:none;
}
html[data-pc-dunkel] .pc .pcl-header > h1{ text-decoration-color:rgba(255,212,71,.5); }
.pc .pcl-header > h2{ grid-row:4; margin-top:.6rem; font-size:var(--pc-text-M); font-weight:400; line-height:1.5; color:var(--pc-text-leise); max-width:60ch; }
@media (max-width:600px){ .pc .pcl-header{ --rand:.5rem; } .pc .pcl-header > img{ aspect-ratio:16/9; } }
/* ---- Listenkopf */

/* ++++ Stimmungsbarometer: Kernsatz, Zeiträume, Jahreszeugnis (in section.statistic von v4) */
.pc-sb{ margin:var(--pc-gap-S) 0 0; padding:var(--pc-gap-S) var(--pc-gap-M) var(--pc-gap-S); display:grid; gap:.85rem;
	background:var(--pc-karte); border:1px solid var(--pc-rand); border-radius:var(--pc-radius-M); box-shadow:var(--pc-schatten-S); }
/* kopf und kernsatz auf halbem abstand, alles danach um den basisabstand eingerückt */
.pc-sb__kopf, .pc-sb__satz{ margin-left:calc(var(--pc-gap-M) / -2); margin-right:calc(var(--pc-gap-M) / -2); }
.pc-sb__kopf{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.pc-sb__kopf h2{ font-size:var(--pc-text-XS); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--pc-text-leise); }
.pc-sb__sprung{ display:inline-flex; align-items:center; gap:.35rem; min-height:var(--pc-ziel); padding:0 .25rem; font-weight:700; font-size:var(--pc-text-S); color:var(--pc-text); text-decoration:underline; text-decoration-color:var(--pc-rand); text-underline-offset:.25em; }
.pc-sb__sprung:hover{ text-decoration-color:currentColor; }
.pc-sb__satz{ margin-top:0; margin-bottom:calc(var(--pc-gap-M) - .85rem); font-size:var(--pc-text-L); font-weight:700; line-height:1.4; }
.pc-balken{ display:flex; height:14px; border-radius:var(--pc-radius-rund); overflow:hidden; gap:3px; }
.pc-balken span{ display:block; }
.pc-balken .p{ background:var(--pc-pro-mark); border-radius:var(--pc-radius-rund) 0 0 var(--pc-radius-rund); }
.pc-balken .c{ background:var(--pc-contra); border-radius:0 var(--pc-radius-rund) var(--pc-radius-rund) 0; }
.pc-balken--leer{ background:repeating-linear-gradient(90deg, var(--pc-rand) 0 6px, transparent 6px 10px); }
.pc-zeitraeume{ list-style:none; margin:0; padding:0; display:grid; gap:var(--pc-gap-S); }
.pc-zr{ display:grid; gap:6px; }
.pc-zr__kopf{ display:flex; justify-content:space-between; gap:1rem; font-size:var(--pc-text-S); }
.pc-zr__name{ font-weight:900; }
.pc-zr__menge{ color:var(--pc-text-leise); font-size:var(--pc-text-XS); }
.pc-zr__zahlen{ display:flex; justify-content:space-between; font-size:var(--pc-text-S); }
.pc-zr__zahlen .p{ color:var(--pc-pro-text); }
.pc-zr__zahlen .c{ color:var(--pc-contra-text); }
.pc-zr__zahlen b{ font-weight:900; font-size:var(--pc-text-L); }
.pc-zeugnis__titel{ margin:.5rem 0 -.35rem; padding-top:var(--pc-gap-S); border-top:1px dashed var(--pc-rand); font-size:var(--pc-heading-S); font-weight:900; }
.pc-zeugnis__titel span{ font-size:var(--pc-text-XS); font-weight:400; color:var(--pc-text-leise); margin-left:.4rem; }
.pc-zeugnis{ width:100%; border-collapse:separate; border-spacing:0; background:var(--pc-karte); border:1px solid var(--pc-rand); border-radius:var(--pc-radius-M); overflow:hidden; font-size:var(--pc-text-S); }
.pc-zeugnis th, .pc-zeugnis td{ padding:.55rem .75rem; text-align:left; border-bottom:1px solid var(--pc-karo); vertical-align:middle; }
.pc-zeugnis thead th{ font-size:var(--pc-text-XS); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--pc-text-leise); border-bottom:2px solid var(--pc-rand); }
.pc-zeugnis tbody th{ font-weight:900; width:4rem; }
.pc-zeugnis tfoot th, .pc-zeugnis tfoot td{ border-bottom:0; border-top:2px solid var(--pc-rand); font-weight:900; }
.pc-zeugnis .z-balken{ width:45%; }
.pc-zeugnis .z-zahl{ white-space:nowrap; }
.pc-zeugnis .z-zahl .p{ color:var(--pc-pro-text); }
.pc-zeugnis .z-zahl .c{ color:var(--pc-contra-text); }
.pc-zeugnis .z-menge{ white-space:nowrap; text-align:right; }
.pc-zeugnis .z-menge__balken{ display:inline-block; width:calc(var(--w) * .6); max-width:60px; height:6px; margin-right:.5rem; border-radius:3px; background:#9AA3B8; vertical-align:middle; }
.pc-zeugnis .pc-balken{ height:10px; }
.pc-zeugnis__mehr[hidden]{ display:none; }
@media (max-width:600px){
	.pc-zeugnis .z-menge__balken{ display:none; }
	.pc-zeugnis th, .pc-zeugnis td{ padding:.5rem .4rem; }
	/* schmal: balkenspalte weg (die mehrheit steht als text daneben), karte mit halbem innenabstand */
	.pc-zeugnis thead th:nth-child(2), .pc-zeugnis .z-balken{ display:none; }
	.pc-sb{ padding-left:var(--pc-gap-S); padding-right:var(--pc-gap-S); }
	.pc-sb__kopf, .pc-sb__satz{ margin-left:0; margin-right:0; }
	.pc-zr__kopf{ flex-wrap:wrap; gap:0 1rem; }
}
/* ---- Stimmungsbarometer */

/* ++++ Beiträge: auf das markup von v4 gelegt
   section.beitraege > div.bt-header + ul > li.pro / li.contra#answer-{id} > div > (div.bt-info) p form div.bt-options
   pro und contra stehen abwechselnd in einer liste; das raster legt pro links, contra rechts, ein paar je zeile */
.pc .beitraege{ margin-top:var(--pc-gap-M); scroll-margin-top:var(--pc-gap-S); }
.pc .beitraege:focus{ outline:none; }
.pc .bt-header{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--pc-gap-S); margin-bottom:var(--pc-gap-S); }
.pc .bt-header > div{
	display:flex; align-items:center; justify-content:space-between; gap:.5rem;
	padding:.25rem .25rem .6rem; border-bottom:3px solid var(--pc-pro);
	font-size:var(--pc-heading-M); font-weight:900; letter-spacing:-.01em; line-height:1.1; color:var(--pc-pro-text);
}
.pc .bt-header > div + div{ color:var(--pc-contra-text); border-color:var(--pc-contra); }
.pc .bt-header small{ font-size:var(--pc-text-XS); font-weight:700; color:var(--pc-text-leise); letter-spacing:0; }
.pc .beitraege ul{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-auto-flow:row dense; gap:var(--pc-gap-S); }
.pc .beitraege li{ min-width:0; }
.pc .beitraege li.pro{ grid-column:1; }
.pc .beitraege li.contra{ grid-column:2; }

/* karte wie ein zettel; im selben paar gleich hoch */
.pc .beitraege li > div{
	position:relative; display:flex; flex-direction:column; gap:var(--pc-gap-S); height:100%; box-sizing:border-box;
	padding:var(--pc-gap-S) var(--pc-gap-S) .75rem;
	background:var(--pc-karte); border:1px solid var(--pc-rand); border-radius:var(--pc-radius-M);
	box-shadow:var(--pc-schatten-S);
	transition:box-shadow var(--pc-schnell) var(--pc-ease);
}
.pc .beitraege li > div:hover{ box-shadow:var(--pc-schatten-M); }
/* kante zur mitte, wie bisher, als weicher streifen */
.pc .beitraege li > div::after{ content:''; position:absolute; top:12px; bottom:12px; width:4px; border-radius:4px; }
.pc .beitraege li.pro > div::after{ right:-1px; background:var(--pc-pro); }
.pc .beitraege li.contra > div::after{ left:-1px; background:var(--pc-contra); }
.pc .beitraege li > div > p{ margin:0; font-size:var(--pc-text-M); line-height:1.45; overflow-wrap:break-word; hyphens:auto; -webkit-hyphens:auto; }
.pc .beitraege li > div > p::first-letter{ text-transform:uppercase; }

/* fuß der karte: form mit stimmknopf, zahl und optionen.
   button.vote und die zahl (div) liegen in derselben zelle übereinander: der knopf ist die ganze pille,
   die zahl lässt klicks durch. so bleibt das markup von v4 und die zahl ist trotzdem teil des knopfs */
.pc .beitraege form{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; margin:auto 0 0; }
.pc .beitraege form > button.vote, .pc .beitraege form > div{ grid-row:1; grid-column:1; }
.pc .beitraege form > button.options{ grid-row:1; grid-column:3; }
.pc .beitraege li.pro form > button.vote, .pc .beitraege li.pro form > div{ grid-column:3; }
.pc .beitraege li.pro form > button.options{ grid-column:1; }
.pc .beitraege button.vote{
	display:flex; align-items:center; justify-content:flex-start; width:100%; min-height:var(--pc-ziel); padding:0 .6rem;
	border-radius:var(--pc-radius-rund); border:1.5px solid transparent; cursor:pointer;
	transition:background-color var(--pc-schnell) var(--pc-ease);
}
.pc .beitraege li.pro button.vote{ justify-content:flex-end; }
.pc .beitraege button.vote svg{ width:26px; height:26px; --icon-fill:transparent; transition:transform var(--pc-schnell) var(--pc-ease); }
.pc .beitraege form > div{
	position:relative; display:flex; align-items:center; gap:.45rem; pointer-events:none;
	padding:0 .9rem 0 calc(.6rem + 26px + .45rem);
	font:900 var(--pc-text-M)/1 'Roboto', sans-serif;
}
.pc .beitraege li.pro form > div{ justify-content:flex-end; padding:0 calc(.6rem + 26px + .45rem) 0 .9rem; }
/* wort neben der zahl: „Stimmen“, bei hover/fokus „Stimme geben“, abgestimmt „Deine Stimme“ (aus data-geben/data-dein).
   die pille hat eine mindestbreite, damit sie beim tausch nicht springt; der inhalt sitzt am daumen */
.pc .beitraege form > div{ min-width:11rem; box-sizing:border-box; }
.pc .beitraege form i{ font:400 var(--pc-text-XS)/1 'Roboto', sans-serif; font-style:normal; color:var(--pc-text-leise); white-space:nowrap; }
.pc .beitraege form i::after{ font-size:var(--pc-text-XS); font-weight:700; }
.pc .beitraege li:not(.voted) button.vote:is(:hover, :focus-visible) + div i{ font-size:0; }
.pc .beitraege li:not(.voted) button.vote:is(:hover, :focus-visible) + div i::after{ content:attr(data-geben); color:var(--pc-text); }
.pc .beitraege li.voted form i{ font-size:0; }
.pc .beitraege li.voted form i::after{ content:attr(data-dein); color:#fff; }
html[data-pc-dunkel] .pc .beitraege li.voted form i::after{ color:#0E1530; }
.pc .beitraege li.pro button.vote{ background:var(--pc-pro-flaeche); color:var(--pc-pro-text); }
.pc .beitraege li.contra button.vote{ background:var(--pc-contra-flaeche); color:var(--pc-contra-text); }
.pc .beitraege li.pro form > div{ color:var(--pc-pro-text); }
.pc .beitraege li.contra form > div{ color:var(--pc-contra-text); }
.pc .beitraege li.pro button.vote:hover{ border-color:var(--pc-pro-text); }
.pc .beitraege li.contra button.vote:hover{ border-color:var(--pc-contra-text); }
.pc .beitraege li.pro button.vote:hover svg{ transform:rotate(-8deg); }
.pc .beitraege li.contra button.vote:hover svg{ transform:rotate(8deg); }
.pc .beitraege li.pro.voted button.vote{ background:var(--pc-pro-text); color:#fff; }
.pc .beitraege li.contra.voted button.vote{ background:var(--pc-contra-text); color:#fff; }
.pc .beitraege li.voted form > div{ color:#fff; }
html[data-pc-dunkel] .pc .beitraege li.voted button.vote, html[data-pc-dunkel] .pc .beitraege li.voted form > div{ color:#0E1530; }

/* optionen: drei punkte, öffnen das melden (.bt-options.fade-in wie in pc.js) */
.pc .beitraege button.options{
	display:inline-flex; align-items:center; justify-content:center; width:var(--pc-ziel); height:var(--pc-ziel); padding:0;
	background:transparent; border:1.5px solid transparent; border-radius:var(--pc-radius-rund); color:var(--pc-text-leise); cursor:pointer;
}
.pc .beitraege button.options:hover{ border-color:var(--pc-rand); color:var(--pc-text); }
.pc .beitraege button.options svg{ width:22px; height:22px; }
.pc .beitraege .bt-options{ display:none; position:absolute; z-index:3; bottom:3.25rem; min-width:12rem; padding:.35rem;
	background:var(--pc-karte); border:1px solid var(--pc-rand); border-radius:var(--pc-radius-S); box-shadow:var(--pc-schatten-L); }
.pc .beitraege .bt-options.fade-in{ display:block; }
.pc .beitraege li.contra .bt-options{ right:.5rem; }
.pc .beitraege li.pro .bt-options{ left:.5rem; }
.pc .beitraege button.report{ display:flex; align-items:center; gap:.6rem; width:100%; min-height:var(--pc-ziel); padding:0 .75rem;
	font:700 var(--pc-text-S) 'Roboto', sans-serif; color:var(--pc-text); background:none; border:0; border-radius:6px; cursor:pointer; text-align:left; }
.pc .beitraege button.report:hover{ background:var(--pc-papier); }
.pc .beitraege button.report svg{ width:20px; height:20px; }

/* eigenen beitrag schreiben: textmarker-knopf unter der liste (button.add-form in v4) */
.pc .beitraege button.add-form{
	display:flex; align-items:center; gap:.5rem; margin:var(--pc-gap-M) auto 0; min-height:var(--pc-ziel); padding:0 1.25rem;
	font:700 var(--pc-text-S)/1 'Roboto', sans-serif; color:var(--pc-auf-marker); background:var(--pc-marker);
	border:1.5px solid rgba(8,19,83,.18); border-radius:var(--pc-radius-rund); cursor:pointer;
}
.pc .beitraege button.add-form:hover{ background:var(--pc-marker-hover); }
.pc .beitraege button.add-form svg{ width:1.25rem; height:1.25rem; --icon-fill:transparent; }

@media (max-width:600px){
	.pc .bt-header, .pc .beitraege ul{ gap:.5rem; }
	.pc .bt-header > div{ flex-wrap:wrap; }
	.pc .bt-header small{ flex-basis:100%; font-weight:400; }
	.pc .beitraege li > div{ padding:.85rem .75rem .5rem; }
	.pc .beitraege button.vote{ padding:0 .35rem; }
	.pc .beitraege button.vote svg{ width:20px; height:20px; }
	.pc .beitraege form > div{ padding:0 .5rem 0 calc(.35rem + 20px + .3rem); gap:.3rem; }
	.pc .beitraege li.pro form > div{ padding:0 calc(.35rem + 20px + .3rem) 0 .5rem; }
	.pc .beitraege form i{ display:none; }
	.pc .beitraege form > div{ min-width:0; }
	/* optionen sichtbar schmäler, trefferfläche bleibt 44 px */
	.pc .beitraege button.options{ position:relative; width:32px; }
	.pc .beitraege button.options::before{ content:''; position:absolute; inset:0 -6px; }
}
/* ---- Beiträge */

/* ++++ Schreiben: Linienblatt, auf das markup von v4 gelegt (pcGeneratePostForm)
   section.add > form (1. pro, 2. contra) > label, fieldset > textarea + div.shadow, div.form-footer > input (honigtopf),
   input hidden, div.char-counter > span, button */
.pc .add{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--pc-gap-S); margin-top:var(--pc-gap-M); scroll-margin-top:var(--pc-gap-M); }
.pc .add form{ display:flex; flex-direction:column; overflow:hidden; margin:0;
	background:var(--pc-karte); border:1px solid var(--pc-rand); border-radius:var(--pc-radius-M); box-shadow:var(--pc-schatten-M); }
.pc .add form:focus-within{ box-shadow:var(--pc-fokus); }
.pc .add label{ padding:.85rem 1rem .35rem; font-weight:900; font-size:var(--pc-text-M); }
.pc .add form:first-child label{ color:var(--pc-pro-text); }
.pc .add form:last-child label{ color:var(--pc-contra-text); }
.pc .add fieldset{ margin:0; padding:0; border:0; min-width:0; }
.pc .add textarea{
	display:block; width:100%; box-sizing:border-box; min-height:9rem; margin:0; padding:0 1rem 0 2.25rem; resize:vertical;
	font:400 var(--pc-text-M)/2rem 'Roboto', sans-serif; color:var(--pc-text);
	border:0; outline:none;
	background-color:var(--pc-karte);
	background-image:
		linear-gradient(90deg, transparent 1.5rem, var(--pc-randlinie) 1.5rem, var(--pc-randlinie) calc(1.5rem + 1.5px), transparent calc(1.5rem + 1.5px)),
		linear-gradient(transparent calc(2rem - 1px), var(--pc-karo) calc(2rem - 1px));
	background-size:100% 100%, 100% 2rem;
	background-attachment:local;
}
.pc .add .shadow{ display:none; }
.pc .add .form-footer{ display:flex; align-items:center; gap:.75rem; padding:.6rem .75rem .75rem 1rem; border-top:1px solid var(--pc-rand); }
/* honigtopf für bots: unsichtbar, aber nicht display:none */
.pc .add .form-footer input[name="name"]{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.pc .add .char-counter{ display:flex; gap:.3rem; font-size:var(--pc-text-XS); color:var(--pc-text-leise); }
.pc .add .char-counter span{ font-weight:700; }
.pc .add .char-counter.warning{ color:var(--pc-text); font-weight:700; }
.pc .add .form-footer button{
	margin-left:auto; display:inline-flex; align-items:center; min-height:var(--pc-ziel); padding:0 1.25rem; cursor:pointer;
	font:700 var(--pc-text-S)/1 'Roboto', sans-serif; color:var(--pc-auf-marker); background:var(--pc-marker);
	border:1.5px solid rgba(8,19,83,.18); border-radius:var(--pc-radius-rund);
}
.pc .add .form-footer button{ text-transform:capitalize; }
.pc .add .form-footer button:hover{ background:var(--pc-marker-hover); }
.pc .add .form-footer button:disabled{ background:transparent; color:var(--pc-text-leise); border-color:var(--pc-rand); border-style:dashed; cursor:not-allowed; }
@media (max-width:600px){ .pc .add{ grid-template-columns:1fr; } }

/* schwebender knopf: pc.js setzt .floating an section.beitraege, solange man durch die beiträge scrollt */
.pc .beitraege.floating button.add-form{ position:fixed; z-index:5; left:50%; bottom:max(16px, env(safe-area-inset-bottom)); margin:0; transform:translateX(-50%); box-shadow:var(--pc-schatten-L); }
/* ---- Schreiben */

/* ++++ Sprachwechsel: section.pcl-pendant > p > a (gleiche liste in der anderen sprache) */
.pc .pcl-pendant{ margin-top:var(--pc-gap-S); }
.pc .pcl-pendant p{ margin:0; font-size:var(--pc-text-S); color:var(--pc-text-leise); text-align:center; }
.pc .pcl-pendant a{ font-weight:700; color:var(--pc-text); text-decoration:underline; text-decoration-color:var(--pc-rand); text-underline-offset:.2em; }
.pc .pcl-pendant a:hover{ text-decoration-color:currentColor; }
/* ---- Sprachwechsel */

/* ++++ Übersicht: auf das markup von v4 gelegt (pc_listen_index.php)
   h1.pc-index-h1, div.pc-index-filter > ul.top-filter + #tag-filter-wrapper (ul.tag-filter, button#max-tag-filter-button),
   section.pc-index-listen > div.liste(.bild) > img, div.pc-header (balken), div.name > div.pc-count + a */
.pc .pc-index-h1{ margin:0 0 var(--pc-gap-S); font-size:var(--pc-heading-M); font-weight:900; letter-spacing:-.01em; line-height:1.15; }
.pc .pc-index-filter{ display:grid; gap:var(--pc-gap-S); margin-bottom:var(--pc-gap-M); }
.pc .top-filter, .pc .tag-filter{ display:flex; flex-wrap:wrap; gap:.4rem; margin:0; padding:0; list-style:none; }
.pc .top-filter a, .pc .tag-filter a{
	display:inline-flex; align-items:center; justify-content:center; min-height:36px; padding:0 .8rem;
	font:700 var(--pc-text-XS)/1 'Roboto', sans-serif; color:var(--pc-text); text-decoration:none;
	background:var(--pc-karte); border:1px solid var(--pc-rand); border-radius:var(--pc-radius-rund);
}
.pc .top-filter a:hover, .pc .tag-filter a:hover{ border-color:var(--pc-text); }
.pc .top-filter a{ min-width:36px; padding:0 .6rem; text-transform:uppercase; }
.pc .top-filter a.active{ background:var(--pc-marker); color:var(--pc-auf-marker); border-color:rgba(8,19,83,.18); }
/* themen: eingeklappt zwei zeilen, #tag-filter-wrapper.max zeigt alle (wie pc.js) */
.pc #tag-filter-wrapper{ display:grid; gap:.6rem; justify-items:start; }
.pc #tag-filter-wrapper::before{ content:'Themen'; font-size:var(--pc-text-XS); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--pc-text-leise); }
.pc .tag-filter{ max-height:calc(36px * 2 + .4rem); overflow:hidden; }
.pc #tag-filter-wrapper.max .tag-filter{ max-height:none; }
.pc #max-tag-filter-button{
	display:inline-flex; align-items:center; gap:.4rem; min-height:36px; padding:0 .8rem 0 .6rem; cursor:pointer;
	font:700 var(--pc-text-XS)/1 'Roboto', sans-serif; color:var(--pc-text);
	background:transparent; border:1px dashed var(--pc-rand); border-radius:var(--pc-radius-rund);
}
.pc #max-tag-filter-button:hover{ border-style:solid; border-color:var(--pc-text); }
.pc #max-tag-filter-button svg{ width:18px; height:18px; transition:transform var(--pc-schnell) var(--pc-ease); }
.pc #tag-filter-wrapper.max #max-tag-filter-button svg{ transform:rotate(180deg); }

/* listenkarten */
.pc .pc-index-listen{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap:var(--pc-gap-S); }
.pc .pc-index-listen .liste{
	position:relative; display:grid; grid-template-rows:auto auto auto auto; overflow:hidden;
	background:var(--pc-karte); border:1px solid var(--pc-rand); border-radius:var(--pc-radius-M); box-shadow:var(--pc-schatten-S);
	transition:box-shadow var(--pc-schnell) var(--pc-ease), transform var(--pc-schnell) var(--pc-ease);
}
.pc .pc-index-listen .liste:hover{ box-shadow:var(--pc-schatten-L); transform:translateY(-2px); }
.pc .pc-index-listen .liste:focus-within{ box-shadow:var(--pc-fokus); }
/* reihenfolge im markup: bild, balken, name (zahlen, titel). gezeigt: bild, titel, balken, zahlen */
.pc .pc-index-listen .liste > img{ grid-row:1; display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; transition:transform 400ms var(--pc-ease); }
.pc .pc-index-listen .liste:hover > img{ transform:scale(1.04); }
/* ohne bild: ein weichgezeichneter farbgrund aus pro-grün, contra-blau und textmarker, wie ein unscharfes foto */
.pc .pc-index-listen .liste:not(.bild)::before{ content:''; grid-row:1; aspect-ratio:16/9;
	background-color:var(--pc-papier);
	background-image:
		radial-gradient(50% 80% at 22% 62%, color-mix(in srgb, var(--pc-pro) 65%, transparent), transparent 100%),
		radial-gradient(55% 85% at 80% 38%, color-mix(in srgb, var(--pc-contra) 55%, transparent), transparent 100%),
		radial-gradient(35% 50% at 55% 88%, color-mix(in srgb, var(--pc-marker) 50%, transparent), transparent 100%); }
.pc .pc-index-listen .name{ display:contents; }
.pc .pc-index-listen .name a{ grid-row:2; padding:.9rem 1rem .6rem; font-size:var(--pc-heading-S); font-weight:900; line-height:1.2; color:inherit; text-decoration:none; }
/* ganze karte klickbar, ein link für screenreader */
.pc .pc-index-listen .name a::after{ content:''; position:absolute; inset:0; }
.pc .pc-index-listen .name a:focus-visible{ box-shadow:none; outline:none; }
.pc .pc-index-listen .pc-header{ grid-row:3; display:flex; gap:2px; height:6px; margin:0 1rem; border-radius:var(--pc-radius-rund); overflow:hidden; }
.pc .pc-index-listen .pro-count{ background:var(--pc-pro-mark); border-radius:var(--pc-radius-rund) 0 0 var(--pc-radius-rund); }
.pc .pc-index-listen .contra-count{ background:var(--pc-contra); border-radius:0 var(--pc-radius-rund) var(--pc-radius-rund) 0; }
.pc .pc-index-listen .pc-count{ grid-row:4; display:flex; justify-content:space-between; align-items:center; padding:.6rem 1rem 1rem; font-size:var(--pc-text-XS); font-weight:700; }
.pc .pc-index-listen .pc-count > span:first-child{ color:var(--pc-pro-text); }
.pc .pc-index-listen .pc-count > span:last-child{ color:var(--pc-contra-text); }
/* „Pro“ / „Contra“ neben den zahlen, damit es nicht nur an der farbe hängt */
.pc .pc-index-listen .pc-count > span:first-child::after{ content:' Pro'; }
.pc .pc-index-listen .pc-count > span:last-child::after{ content:' Contra'; }
.pc .pc-index-listen .pc-count__symbol{ display:inline-flex; color:var(--pc-text); }
.pc .pc-index-listen .pc-count__symbol svg{ width:20px; height:20px; }
/* ---- Übersicht */

/* ++++ Bewegung reduzieren */
@media (prefers-reduced-motion: reduce){
	.pc *, .pc *::before, .pc *::after{ transition-duration:0.01ms !important; animation-duration:0.01ms !important; }
	.pc .pc-index-listen .liste:hover, .pc .pc-index-listen .liste:hover > img, .pc .kn:active,
	.pc .beitraege button.vote:hover svg{ transform:none; }
}
/* ---- Bewegung reduzieren */

/* ++++ Auszeichnungen an Beiträgen: Top-Beitrag, Platz, Prüfstatus, Datum */
.pc .bt-info{ display:flex; flex-wrap:wrap; align-items:center; gap:.35rem .5rem; margin:-.25rem 0 -.35rem !important; font-size:var(--pc-text-XS) !important; line-height:1.3 !important; color:var(--pc-text-leise); }
/* auszeichnungen ohne grund: icon mit neon-marker und text */
/* leise: der beitragstext steht im vordergrund, die zeile darüber tritt zurück */
.pc-abz{ display:inline-flex; align-items:center; gap:.3rem; font-weight:400; color:var(--pc-text-leise); }
.pc-abz svg.icon{ width:14px; height:14px; flex:none; }
.pc .bt-info time{ white-space:nowrap; margin-left:auto; }
/* ---- Auszeichnungen */