/* ==========================================================
   Our stars align – Postbit (Inplay)
   Alle Klassen beginnen mit pb- (kollidiert weder mit den alten
   .postbit_*-Regeln noch mit der index.css).
   Schriften: Italiana (Titel), Archivo (Text)
   Icons: Font Awesome (wie bisher)
   ========================================================== */
@import url(https://fonts.googleapis.com/css2?family=Italiana&family=Archivo:wght@400;600;800&display=swap);

.pb-post{
	--l1:#e1daf0; --l2:#bfcce4; --ink:#1b2a36; --dk:#2d2a63; --ac:#c8b5d3; --acink:#2a2140;
	--navy:#1f3366; --muted:#5a6877; --tit:#1f1d4f;
	--glass:rgba(255,255,255,.62); --line:rgba(255,255,255,.8);
	--stars:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 220'%3E%3Cpolyline points='110,215 160,150 205,178 250,100 292,132' fill='none' stroke='white' stroke-opacity='.4' stroke-width='1.4'/%3E%3Cg fill='white' fill-opacity='.45'%3E%3Ccircle cx='110' cy='215' r='2.6'/%3E%3Ccircle cx='160' cy='150' r='2.6'/%3E%3Ccircle cx='205' cy='178' r='2.6'/%3E%3Ccircle cx='250' cy='100' r='2.6'/%3E%3Ccircle cx='292' cy='132' r='2.6'/%3E%3C/g%3E%3C/svg%3E");
	box-sizing:border-box;
	display:flex;
	flex-direction:column;
	gap:12px;
	margin:0 0 20px;
	padding:14px;
	background:linear-gradient(180deg,#e8edf6,#dbe3f0);
	border:1px solid rgba(255,255,255,.8);
	color:var(--ink);
	font-family:'Archivo',system-ui,sans-serif;
	font-size:15px;
	line-height:1.55;
}
.pb-post *{box-sizing:border-box}

/* ---------- Kopf ---------- */
.pb-head{
	position:relative;
	display:grid;
	grid-template-columns:240px minmax(0,1fr);
	gap:0 28px;
	align-items:start;
	padding:106px 26px 26px;
	background:var(--stars) right bottom/cover no-repeat, linear-gradient(150deg,var(--l1),var(--l2));
}
.pb-head::before{ /* dunkelblaue Ecke */
	content:"";
	position:absolute;left:0;top:0;width:34px;height:34px;
	background:var(--navy);
	clip-path:polygon(0 0,100% 0,0 100%);
	z-index:3;
}
.pb-strip{
	position:absolute;inset:0 0 auto 0;height:80px;
	background:repeating-linear-gradient(135deg,rgba(255,255,255,.38) 0 14px,rgba(255,255,255,.12) 14px 28px), linear-gradient(150deg,var(--l1),var(--l2));
	border-bottom:3px solid #fff;
}
.pb-starlit{
	position:absolute;right:16px;top:14px;z-index:3;
	width:38px;height:38px;
	display:grid;place-items:center;
	background:var(--glass);
	border:1px solid var(--line);
	color:var(--dk);
	font-size:18px;
	text-decoration:none;
	-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
	transition:background .2s;
}
.pb-starlit,.pb-starlit:link,.pb-starlit:visited,.pb-starlit i{color:var(--dk) !important}
.pb-starlit:hover{background:var(--ac)}

/* Avatar 240x200 + GIF 240x100 */
.pb-left{
	position:relative;z-index:2;
	width:240px;max-width:100%;
	margin-top:-66px;
	display:flex;flex-direction:column;gap:10px;
}
.pb-avw{position:relative;width:240px;max-width:100%;aspect-ratio:240/200;outline:none}
.pb-av{
	position:absolute;inset:0;overflow:hidden;
	background:linear-gradient(150deg,var(--l1),var(--l2));
	border:3px solid #fff;
	box-shadow:0 8px 24px rgba(31,51,102,.22);
}
.pb-av a{display:block;width:100%;height:100%}
.pb-av img{display:block;width:100%;height:100%;object-fit:cover}
.pb-hov{
	position:absolute;inset:0;
	display:flex;flex-direction:column;justify-content:flex-end;gap:6px;
	padding:14px 16px;
	background:rgba(255,255,255,.42);
	-webkit-backdrop-filter:blur(9px) saturate(1.2);backdrop-filter:blur(9px) saturate(1.2);
	color:var(--ink);
	opacity:0;transform:translateY(8px);
	transition:opacity .28s,transform .28s;
	overflow:hidden;
}
.pb-hov b{flex:none;font:800 9.5px 'Archivo',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--dk)}
.pb-hov p{margin:0;min-height:0;flex:0 1 auto;overflow-y:auto;padding-right:6px;text-align:justify;hyphens:none;-webkit-hyphens:none;font:400 13px/1.55 'Archivo',sans-serif;scrollbar-width:thin;scrollbar-color:var(--dk) transparent}
.pb-hov p::-webkit-scrollbar{width:4px}
.pb-hov p::-webkit-scrollbar-thumb{background:var(--dk)}
.pb-avw:hover .pb-hov,.pb-avw:focus .pb-hov{opacity:1;transform:none}
.pb-avw:focus-visible .pb-av{outline:2px solid var(--navy);outline-offset:3px}
.pb-hint{
	position:absolute;right:8px;bottom:8px;z-index:2;
	width:26px;height:26px;display:grid;place-items:center;
	background:var(--glass);border:1px solid var(--line);
	color:var(--dk);font-size:13px;transition:opacity .2s;
}
.pb-avw:hover .pb-hint,.pb-avw:focus .pb-hint{opacity:0}
.pb-gif{
	width:100%;aspect-ratio:240/100;overflow:hidden;
	border:3px solid #fff;
	box-shadow:0 8px 24px rgba(31,51,102,.16);
}
.pb-gif img{display:block;width:100%;height:100%;object-fit:cover}

/* Name, Titel, Kurzinfos */
.pb-who{position:relative;z-index:2;min-width:0;display:flex;flex-direction:column;gap:14px}
.pb-nm{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.pb-mini{width:100px;height:100px;flex:none;overflow:hidden;border:2px solid #fff;background:var(--ac)}
.pb-mini img{display:block;width:100%;height:100%;object-fit:cover}
.pb-nmcol{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.pb-uname,.pb-uname a,.pb-uname a:hover,.pb-uname a:visited{
	font:400 clamp(26px,3.4vw,34px)/1.05 'Italiana',serif;
	letter-spacing:.06em;text-transform:uppercase;
	color:var(--tit) !important;
	-webkit-text-stroke:.8px var(--tit);
	text-decoration:none;
}
.pb-utitle{
	display:inline-block;padding:2px 9px;
	background:var(--ac);color:var(--acink);
	font:800 10.5px 'Archivo',sans-serif;letter-spacing:.08em;text-transform:uppercase;
}
.pb-chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px}
.pb-fact{
	display:flex;align-items:center;gap:10px;min-width:0;
	padding:7px 10px;
	background:var(--glass);border:1px solid var(--line);
	font-size:13px;line-height:1.3;
}
.pb-fact > div{min-width:0;overflow-wrap:anywhere}
.pb-ic{flex:none;width:26px;height:26px;display:grid;place-items:center;background:var(--ac);color:var(--acink);font-size:13px}
.pb-fact b{display:block;font:800 9.5px 'Archivo',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pb-player{
	display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
	font:800 10px 'Archivo',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.pb-pname{
	font:400 26px/1.1 'Italiana',serif;letter-spacing:.08em;text-transform:uppercase;
	color:var(--tit);-webkit-text-stroke:.9px var(--tit);
}

/* ---------- Beitrag ---------- */
.pb-msg{background:var(--glass);border:1px solid var(--line);padding:20px 26px 16px}
.pb-mhead{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.pb-pnum,.pb-pnum a,.pb-pnum a:visited{
	display:inline-block;padding:2px 12px;
	background:var(--navy);color:#fff !important;
	font:400 20px/1.2 'Italiana',serif;letter-spacing:.08em;text-decoration:none;
}
.pb-picon{display:inline-flex;align-items:center}
.pb-meta{font:600 11px 'Archivo',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pb-msg .post_body{
	padding:30px;
	text-align:justify;hyphens:none;-webkit-hyphens:none;-ms-hyphens:none;
	font-size:14px;line-height:1.75;
	color:var(--ink);
}

/* keine Silbentrennung im Post, auch nicht in Unterelementen (Absaetze, Zitate, Spoiler) */
.pb-msg .post_body *{hyphens:none;-webkit-hyphens:none;-ms-hyphens:none}

/* ---------- Fuss ---------- */
.pb-foot{
	display:flex;flex-wrap:wrap;align-items:stretch;gap:12px;
	padding:14px;
	background:var(--glass);border:1px solid var(--line);
}
.pb-col{flex:1 1 0;min-width:240px;display:flex;flex-direction:column;gap:12px}
.pb-acts{
	/* bewusst KEIN position:relative: Popup-Menues (Bearbeiten, Autor aendern) werden per JS absolut positioniert */
	z-index:1;
	flex:none;height:52px;padding:0 10px;
	display:flex;flex-direction:row;justify-content:space-around;align-items:center;
	background:var(--stars) right bottom/cover no-repeat, linear-gradient(150deg,var(--l1),var(--l2));
	border:1px solid var(--line);
}
.pb-deco{flex:1 1 0;min-height:76px;min-width:0;display:flex;padding:12px;background:repeating-linear-gradient(135deg,rgba(255,255,255,.38) 0 14px,rgba(255,255,255,.12) 14px 28px),linear-gradient(150deg,var(--l1),var(--l2))}
.pb-quote{flex:1;min-width:0;min-height:0;overflow-y:auto;padding:10px 14px;background:var(--glass);border:1px solid var(--line);scrollbar-width:thin;scrollbar-color:var(--dk) transparent}
.pb-quote::-webkit-scrollbar{width:4px}
.pb-quote::-webkit-scrollbar-thumb{background:var(--dk)}
.pb-qtext{font:italic 400 13.5px/1.6 'Archivo',sans-serif;text-align:justify;hyphens:none;-webkit-hyphens:none;color:var(--ink)}
.pb-qsrc,.pb-qsrc:link,.pb-qsrc:visited{display:block;margin-top:6px;font:800 9.5px 'Archivo',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--dk) !important;text-decoration:none}
/* Navigations-Buttons: Groesse richtet sich nach dem Inhalt (Plugin-Buttons bringen eigenes Markup mit) */
.pb-act{
	min-width:34px;min-height:34px;
	display:flex;align-items:center;justify-content:center;
	color:var(--dk);font-size:15px;line-height:1;text-decoration:none;
	transition:background .2s;
}
/* leeres Feld fuer den Autorenwechsel (wie im alten Postbit) */
.pb-left .postbit_autorchange:empty{display:none}
.pb-left .postbit_autorchange{padding:0;background:none}
/* leere Buttons (z. B. kein Autorenwechsel, kein Edit) ausblenden */
.pb-act:empty{display:none}
.pb-act > a,
.pb-act > span > a{
	display:inline-flex;align-items:center;justify-content:center;
	min-width:34px;min-height:34px;
	text-decoration:none;
}
.pb-act img{max-width:18px;max-height:18px}
.pb-act .popup_menu{font-size:13px;line-height:1.4;text-align:left}
.pb-act .popup_menu a{display:block;min-width:0;min-height:0;color:#333 !important}
.pb-act,.pb-act:link,.pb-act:visited,.pb-act > a,.pb-act > a i,.pb-act > i,.pb-act > span > a{color:var(--dk) !important}
.pb-act:hover{background:transparent}
/* Popup-Menue: kein blauer Hover-/Auswahl-Hintergrund */
.pb-act .popup_menu .popup_item,
.pb-act .popup_menu .popup_item:hover,
.pb-act .popup_menu .popup_item:focus,
.pb-act .popup_menu .popup_item_highlighted,
.pb-act .popup_menu .popup_item_container,
.pb-act .popup_menu .popup_item_container:hover{
	background:transparent !important;
	color:#333 !important;
}
.pb-act .popup_menu .popup_item,
.pb-act .popup_menu .popup_item:hover,
.pb-act .popup_menu .popup_item_highlighted{text-decoration:none !important}
.pb-sig{
	flex:none;width:500px;max-width:100%;aspect-ratio:2/1;overflow:hidden;
	border:1px solid var(--line);
}
.pb-sig img{display:block;width:100%;height:100%;object-fit:cover}
.pb-tyl{
	flex:none;display:flex;align-items:center;gap:12px;
	padding:8px 12px;background:var(--glass);border:1px solid var(--line);
	font:600 11px/1.5 'Archivo',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
}
/* Herz-Kaestchen (nur CSS, kein Markup noetig) */
.pb-tyl::before{
	content:"";flex:none;width:26px;height:26px;
	background:var(--ac) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.500s-8-4.800-8-10.800A4.600 4.600 0 0 1 12 7a4.600 4.600 0 0 1 8 2.700c0 6-8 10.800-8 10.800z' fill='%232a2140'/%3E%3C/svg%3E") center/14px no-repeat;
}
/* Ausgabe des Danke/Like-Plugins (div.tyllist / post_controls): Inline-Styles und Theme-Regeln ueberschreiben */
.pb-tyl .tyllist,
.pb-tyl .post_controls{
	display:block !important;flex:1 1 auto;width:100% !important;max-width:none !important;min-width:0;
	margin:0 !important;padding:0 !important;float:none !important;
	background:none !important;border:0 !important;box-shadow:none !important;
	overflow-wrap:anywhere;
	font:600 11px/1.5 'Archivo',sans-serif !important;letter-spacing:.06em !important;text-transform:uppercase !important;
	color:var(--muted) !important;
}
.pb-tyl .tyllist *,
.pb-tyl .post_controls *,
.pb-tyl oswald *{
	background:none !important;border:0 !important;box-shadow:none !important;
	padding:0 !important;margin:0 !important;
	font:inherit !important;letter-spacing:inherit !important;text-transform:inherit !important;
	color:inherit !important;
	display:inline !important;
	width:auto !important;max-width:none !important;min-width:0 !important;height:auto !important;
	float:none !important;position:static !important;
}
.pb-tyl .tyllist a,.pb-tyl .tyllist a:link,.pb-tyl .tyllist a:visited,
.pb-tyl .tyllist strong,.pb-tyl .tyllist oswald b{
	font-weight:800 !important;color:var(--dk) !important;text-decoration:none !important;
}
/* der feste Satz "gefaellt dieser Beitrag." (direktes b im Template) bleibt dezent */
.pb-tyl .tyllist > b{font-weight:600 !important;color:var(--muted) !important}

/* ---------- Schmale Fenster (halber Bildschirm, Tablet) ---------- */
.pb-post{min-width:0;max-width:100%}
.pb-msg{min-width:0}
.pb-msg .post_body{overflow-wrap:anywhere;min-width:0}
.pb-msg .post_body img,
.pb-msg .post_body video,
.pb-msg .post_body iframe{max-width:100%;height:auto}
.pb-msg .post_body table,
.pb-msg .post_body pre{display:block;max-width:100%;overflow-x:auto}
@media (max-width:1000px){
	.pb-head{grid-template-columns:200px minmax(0,1fr);gap:0 20px;padding:106px 18px 20px}
	.pb-left,.pb-avw{width:200px}
	.pb-chips{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
	.pb-pname{font-size:22px}
	.pb-msg{padding:16px 18px 12px}
	.pb-msg .post_body{padding:20px 8px}
	.pb-sig{width:min(500px,100%)}
}

/* ---------- Handy ---------- */
@media (max-width:760px){
	.pb-head{grid-template-columns:1fr;gap:20px;padding:96px 16px 18px}
	.pb-left{margin-inline:auto}
	.pb-mini{width:76px;height:76px}
	.pb-msg{padding:16px 14px 10px}
	.pb-msg .post_body{padding:16px 2px}
	.pb-left,.pb-avw{width:240px}
	.pb-sig{display:none}
	.pb-col{flex:1 1 100%}
	.pb-acts{height:auto;min-height:52px;flex-wrap:wrap;padding:4px 10px}
	.pb-deco{flex:none;min-height:0;padding:0;background:none}
	.pb-quote{max-height:240px}
}
@media (max-width:480px){
	.pb-chips{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
	.pb-hov,.pb-act,.pb-hint,.pb-starlit{transition:none}
}