/* ==========================================================
   Our stars align – Index: Forenliste als Bento-Kacheln
   Das Forum mit dem neuesten Beitrag ist die grosse Kachel
   (wird per Skript in forumbit_depth1_cat bestimmt).
   Schriften: Italiana (Titel), Archivo (Text)
   Falls der @import nicht greift, die Zeile als <link> in
   "headerinclude" einfuegen.
   ========================================================== */
@import url(https://fonts.googleapis.com/css2?family=Italiana&family=Archivo:wght@400;600;800&display=swap);

/* ---------- Kategorie ---------- */
.osa-cat{
	background:rgba(255,255,255,.35);
	border:1px solid rgba(255,255,255,.7);
	padding:14px;
	margin-bottom:20px;
}
.osa-cathead{
	position:relative;
	padding:14px 56px 14px 18px;
	margin-bottom:12px;
	background:#a9b9d8;
	color:#fff;
}
.osa-cathead strong{
	font:400 26px 'Italiana',serif;
	letter-spacing:.1em;
	text-transform:uppercase;
}
.osa-cathead a{color:#fff;text-decoration:none}
.osa-cathead .smalltext{color:#fff;font-size:12px}
.osa-cathead .expcolimage{
	position:absolute;
	right:18px;
	top:50%;
	margin-top:-9px;
	float:none;
}

/* ---------- Raster ---------- */
.osa-grid{
	display:grid;
	grid-template-columns:repeat(4,minmax(0,1fr));
	grid-auto-rows:minmax(150px,auto);
	gap:12px;
}

/* ---------- Kachel ---------- */
.osa-tile{
	/* Farben (fuer alle Foren gleich: helles Flieder-Blau mit Sternbild) */
	--l1:#e1daf0; --l2:#bfcce4; --dk:#2d2a63; --ac:#c8b5d3; --pad:20px;
	--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-width='1.6'/%3E%3Cg fill='white'%3E%3Ccircle cx='110' cy='215' r='3'/%3E%3Ccircle cx='160' cy='150' r='3'/%3E%3Ccircle cx='205' cy='178' r='3'/%3E%3Ccircle cx='250' cy='100' r='3'/%3E%3Ccircle cx='292' cy='132' r='3'/%3E%3C/g%3E%3C/svg%3E");
	position:relative;
	overflow:hidden;
	display:flex;
	flex-direction:column;
	padding:var(--pad);
	color:#1b2a36;
	font-family:'Archivo',system-ui,sans-serif;
	transition:transform .25s;
}
/* Optional: abweichende Farben fuer ein bestimmtes Forum (fid durch deine ID ersetzen):
.osa-tile.fid-12{ --l1:#e1daf0; --l2:#bfcce4; --dk:#2d2a63; --ac:#c8b5d3; }
*/
.osa-tile:hover{transform:translateY(-4px)}

/* Kleine Kacheln wechseln zwischen zwei Verlaeufen */
.osa-grid > .osa-tile:nth-child(even){background:linear-gradient(150deg,#eee9f6,#d3dbec)}
.osa-grid > .osa-tile:nth-child(odd){background:linear-gradient(150deg,#e6ecf6,#c4d2e6)}
/* Grosse Kachel: Verlauf mit Sternbild */
.osa-grid > .osa-tile.is-big{
	--pad:28px;
	background:var(--stars) right bottom/cover no-repeat, linear-gradient(150deg,var(--l1),var(--l2));
	grid-column:1 / 3;
}
/* Breite Kachel: heller Glas-Look, Inhalt als Zeile (Titel links, letzter Beitrag rechts) */
.osa-grid > .osa-tile.is-wide{
	background:#f5f5f78a;
	border:1px solid rgba(255,255,255,.8);
	flex-direction:row;
	align-items:center;
	gap:22px;
}
.osa-tile.is-wide .osa-top{flex:1;min-width:0}
.osa-tile.is-wide .osa-last{margin-top:0;padding-top:0;flex:0 0 46%;max-width:46%}
.osa-tile.is-full .osa-last{flex-basis:36%;max-width:36%}

/* ---------- Jede zweite Kategorie gespiegelt: grosse Kachel rechts ---------- */
.osa-grid.is-flip{direction:rtl}
.osa-grid.is-flip > .osa-tile{direction:ltr}
.osa-grid.is-flip > .osa-tile.is-big{
	--stars:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 220'%3E%3Cpolyline points='190,215 140,150 95,178 50,100 8,132' fill='none' stroke='white' stroke-width='1.6'/%3E%3Cg fill='white'%3E%3Ccircle cx='190' cy='215' r='3'/%3E%3Ccircle cx='140' cy='150' r='3'/%3E%3Ccircle cx='95' cy='178' r='3'/%3E%3Ccircle cx='50' cy='100' r='3'/%3E%3Ccircle cx='8' cy='132' r='3'/%3E%3C/g%3E%3C/svg%3E");
	background:var(--stars) left bottom/cover no-repeat, linear-gradient(150deg,var(--l1),var(--l2));
}

/* ---------- Titel und Zahlen ---------- */
.osa-tile a.osa-title,
.osa-tile a.osa-title:hover,
.osa-tile a.osa-title:visited{
	font:400 28px/1 'Italiana',serif;
	text-transform:uppercase;
	color:var(--dk);
	text-decoration:none;
	transition:letter-spacing .35s;
}
.osa-tile:hover .osa-title{letter-spacing:.03em}
.osa-tile.is-big a.osa-title{font-size:42px}
.osa-top .smalltext{color:var(--dk)}
.osa-count{
	margin-top:9px;
	font:800 11px 'Archivo',sans-serif;
	letter-spacing:.12em;
	text-transform:uppercase;
	color:var(--dk);
}
.osa-tile.is-big .osa-count{margin-top:12px;font-size:12px;letter-spacing:.14em}

/* ---------- Beschreibung (nur grosse und breite Kachel) ---------- */
.osa-desc{display:none;text-align:justify;hyphens:auto;font-size:14px;line-height:1.65;color:#26323d}
.osa-tile.is-big .osa-desc{
	display:-webkit-box;
	-webkit-line-clamp:4;
	-webkit-box-orient:vertical;
	overflow:hidden;
	margin-top:16px;
	max-width:42ch;
}
.osa-tile.is-wide .osa-desc{
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
	margin-top:10px;
}

/* Status: dunkelblaue Ecke bei neuen Beitraegen (klickbar = als gelesen markieren) */
.osa-tile .osa-status{
	position:absolute;
	left:0;
	top:0;
	z-index:2;
	width:34px !important;
	height:34px !important;
	margin:0 !important;
	padding:0 !important;
	background:none !important;
	border:0 !important;
	cursor:pointer;
}
.osa-tile .osa-status.forum_on,
.osa-tile .osa-status.forum_offlock.forum_on{
	background:#1f3366 !important;
	clip-path:polygon(0 0,100% 0,0 100%);
}

/* ---------- Letzter Beitrag ---------- */
.osa-last{
	position:relative;
	margin-top:auto;
	padding-top:16px;
	display:flex;
	gap:10px;
	align-items:center;
	justify-content:space-between;
}
.osa-tile.is-big .osa-last{gap:16px;padding-top:18px}
.osa-lastinfo{
	flex:1;
	min-width:0;
	text-align:right;
}
.osa-lastinfo div[style]{text-align:right !important;color:#5a6877;font:600 11px 'Archivo',sans-serif;letter-spacing:.06em;text-transform:uppercase}
.osa-tag{
	display:inline-block;
	max-width:100%;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	vertical-align:bottom;
	padding:2px 8px;
	background:var(--ac);
	color:#2a2140;
	font:800 11px 'Archivo',sans-serif;
	letter-spacing:.04em;
	text-transform:uppercase;
	text-decoration:none;
}
.osa-tile.is-big .osa-tag{font-size:12px;padding:2px 9px}
.osa-meta{
	margin-top:6px;
	font:600 11px/1.45 'Archivo',sans-serif;
	letter-spacing:.06em;
	text-transform:uppercase;
	color:#5a6877;
}
.osa-tile.is-big .osa-meta{font-size:11.5px;letter-spacing:.1em}
.osa-meta span{display:block}
.osa-meta .osa-sep{display:none}
.osa-tile.is-big .osa-meta span{display:inline}
.osa-meta a{
	color:var(--dk);
	text-decoration:none;
	border-bottom:1px solid var(--dk);
}
.osa-av{
	flex:none;
	display:block;
	width:44px;
	height:44px;
	overflow:hidden;
	background:linear-gradient(150deg,var(--l1),var(--l2));
	border:2px solid #fff;
	box-shadow:0 0 0 1px rgba(31,95,107,.25);
}
.osa-tile.is-big .osa-av{width:68px;height:68px}
.osa-av img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
}

/* ---------- Handy ---------- */
@media (max-width:700px){
	.osa-cat{padding:10px}
	.osa-grid{grid-template-columns:1fr;grid-auto-rows:auto}
	.osa-grid > .osa-tile,
	.osa-grid > .osa-tile.is-big{grid-column:auto !important;grid-row:auto !important}
	.osa-tile{min-height:200px}
	.osa-tile.is-big{min-height:300px}
	.osa-grid > .osa-tile.is-wide{flex-direction:column;align-items:stretch;gap:0}
	.osa-tile.is-wide .osa-last,
	.osa-tile.is-full .osa-last{margin-top:auto;padding-top:16px;flex:none;max-width:none}
}
@media (prefers-reduced-motion:reduce){
	.osa-tile,.osa-tile a.osa-title{transition:none}
}