/*
	Rejsa.nu - gemensam stil för sidorna utanför forumet (allt som inte är phpBB-mallen)
	Samma stil som startsidan och Bankalendern: ljusgrå bakgrund, vita kort, orange accent.
	Använd:  <div class="sida"><div class="card"> ... <table class="lista"> ... </div></div>
	Först det gemensamma, sedan en del per sida. Sidornas klasser har ett eget prefix (arr-, bana-, banor-, bil-, ring-, varv-, fav-)
	och regler med samma utseende delar definition, med alla klassnamn i samma regel.
*/

body {
	background-color: var(--farg-bakgrund, #f0f3f7);
}

.sida {
	font-family: var(--text-font);
	font-size: var(--text-m);
	line-height: 1.45;
	color: var(--farg-text, #333);
}

.sida a, .sida a:link, .sida a:visited {
	color: var(--farg-bla, #3D5C98);
	text-decoration: none;
}
.sida a:hover {
	color: var(--lank-hover, var(--farg-accent, #ff761e));
	text-decoration: none;
}
/* Länkar i löpande text: orange utan understrykning, som länkarna i startsidans fot (startsidan har egna regler) */
.sida:not(.fp) p a, .sida:not(.fp) p a:link, .sida:not(.fp) p a:visited,
.sida td.TEXT a, .sida td.TEXT a:link, .sida td.TEXT a:visited,
.kal p a, .kal p a:link, .kal p a:visited {
	color: var(--lank-text, var(--farg-accent-text, #b84300));
	text-decoration: none;
}
.sida:not(.fp) p a:hover, .sida td.TEXT a:hover, .kal p a:hover {
	color: var(--lank-hover, var(--farg-accent, #ff761e));
}

.sida .card {
	background-color: var(--farg-kort, #fff);
	border: 1px solid var(--farg-linje, #e1e8f5);
	padding: var(--luft-4, 16px) var(--luft-5, 24px);
	overflow-x: auto;
}

.sida h1 {
	font-family: var(--rubrik-font);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--farg-rubrik, #3b3b3b);
	margin: 0 0 var(--luft-2, 8px) 0;
}

/* Rubrik inne i ett kort, med orange linje under */
.sida h2 {
	font-family: var(--rubrik-font);
	font-size: 21px;
	font-weight: 700;
	line-height: 1.15;
	text-transform: uppercase;
	color: var(--farg-rubrik, #3b3b3b);
	margin: 0 0 var(--luft-3, 12px) 0;
	padding: 0 0 var(--luft-2, 8px) 0;
	border-bottom: 1px solid var(--farg-linje, #e1e8f5);
}

/* Introrutan överst på sidan (rubrik + kort text): mindre luft och mindre text än vanliga kort.
   Samma mått på startsidans välkomstruta (index.php, .fpheader). */
.sida .card.intro, .kal .card.intro {
	padding: var(--luft-4, 16px) var(--luft-5, 24px);
}
.sida .card.intro h1, .kal .card.intro h1 {
	font-size: 24px;
	margin: 0 0 var(--luft-2, 8px) 0;
}
.sida .card.intro p, .kal .card.intro p {
	font-size: var(--text-m);
	line-height: 1.55;
	margin: 0 0 var(--luft-2, 8px) 0;
}
.sida .card.intro h1 + .knappar {
	margin-top: var(--luft-3, 12px);
}
.sida .card.intro > :last-child, .kal .card.intro > :last-child {
	margin-bottom: 0;
}
@media only screen and (max-width: 800px) {
	.sida .card.intro, .kal .card.intro {
		padding: var(--luft-3, 12px) var(--luft-4, 16px);
	}
}

.sida p {
	margin: 0 0 var(--luft-3, 12px) 0;
}

.sida .liten {
	font-size: var(--text-xs);
	color: var(--farg-text-svag, #666);
}

/* Knapprad: knapparna på en rad som bryts, 6px mellan */
.sida .knappar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--luft-2, 8px);
	row-gap: var(--knapp-radavstand);
}
.sida .knappar a, .sida .knappar a:link, .sida .knappar a:visited {
	display: inline-block;
	padding: var(--knapp-pad);
	margin: 0;
	border: 1px solid var(--val-ram, var(--farg-ram, #c4d2ed));
	border-radius: var(--knapp-radie);
	background-color: var(--val-bakgrund, var(--farg-yta, #f7f9fc));
	font-size: var(--knapp-fs);
	color: var(--val-text, var(--farg-bla, #3D5C98));
}
.sida .knappar a.active {
	border-color: var(--val-aktiv, var(--farg-accent, #ff761e));
	color: var(--val-aktiv, var(--farg-accent, #ff761e));
}
.sida .knappar a:hover {
	border-color: var(--val-hover, var(--farg-accent, #ff761e));
	text-decoration: none;
}
/* Knappar och rutor: bara ramen blir orange vid hovring, texten ligger kvar */
.sida .knappar a:not(.active):hover, .arr-tile a:hover, .banor-grid a:hover, .bana-knappar a:hover {
	color: var(--val-text, var(--farg-bla, #3D5C98));
}
.ring-lankar a:hover {
	color: var(--farg-text, #333);
}
/* Bara en orange knapp i taget: den valda blir blå medan man hovrar över en annan */
.sida:has(.knappar a:hover) .knappar a.active:not(:hover) {
	border-color: var(--val-ram, var(--farg-ram, #c4d2ed));
	color: var(--val-text, var(--farg-bla, #3D5C98));
}

/* ---------- Annonser ---------- */

/* Annonsbanners har min-width:490px inline, det spräcker mobilen */
.sida-ads div, .sida-ads img, .sida-ads video {
	min-width: 0 !important;
}
/* Bara när skärmen är smalare än bannern: krymp den, behåll proportionerna */
@media only screen and (max-width: 1000px) {
	.sida-ads div, .sida-ads img, .sida-ads video {
		max-width: 100% !important;
		height: auto !important;
	}
}

/* ---------- Tabeller ---------- */

table.lista {
	border-collapse: collapse;
	width: 100%;
}
table.lista th {
	text-align: left;
	padding: var(--luft-2, 8px) var(--luft-2, 8px);
	background-color: var(--farg-yta, #f7f9fc);
	color: var(--farg-bla, #3D5C98);
	font-weight: bold;
	white-space: nowrap;
	border-bottom: 2px solid var(--farg-accent, #ff761e);
}
table.lista td {
	padding: var(--luft-2, 8px) var(--luft-2, 8px);
	white-space: nowrap;
	vertical-align: middle;
	border-bottom: 1px solid var(--farg-linje, #E1E8F5);
}
table.lista tr:hover td {
	background-color: var(--farg-yta, #f7f9fc);
}
table.lista .c {
	text-align: center;
}
table.lista .r {
	text-align: right;
}
table.lista img {
	vertical-align: middle;
}

.sida .status-orange {
	color: var(--farg-accent-mork, #e0600a);
}
.sida .status-bla {
	color: var(--farg-bla, #3D5C98);
	font-style: italic;
}

@media only screen and (max-width: 800px) {
	.sida .card {
		padding: var(--luft-3, 12px);
	}
	table.lista td, table.lista th {
		padding: var(--luft-2, 8px) var(--luft-2, 8px);
	}
}

/* ========== Arrangörer (arrangorer.php) ========== */

.arr-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--luft-3, 12px);
}
.arr-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: var(--luft-3, 12px) var(--luft-2, 8px);
	border: 1px solid var(--farg-linje, #E1E8F5);
	background-color: var(--farg-kort, #fff);
}
.arr-tile:hover {
	border-color: var(--farg-accent, #ff761e);
}
.arr-logo {
	height: 90px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--luft-2, 8px);
}
/* Arrangörernas loggor (gif, max 200x66) är ritade mot vitt och får kantiga konturer på mörk bakgrund:
   varje logga ligger i en vit ruta på 200x66, även i mörkt läge (vitt med flit, inte en token) */
.arr-logo img {
	box-sizing: border-box;
	width: 200px;
	max-width: 100%;
	height: auto;
	aspect-ratio: 200 / 66;
	object-fit: contain;
	padding: var(--luft-1, 4px) var(--luft-2, 8px);
	border: 1px solid transparent;
	border-radius: 4px;
	background-color: #fff;
}
/* Mörkt läge: rutan lite dämpad så att den inte bländar */
:root[data-theme="dark"] .arr-logo img {
	filter: brightness(0.9);
}
.arr-namn {
	font-size: var(--text-l);
	font-weight: bold;
	margin-bottom: var(--luft-2, 8px);
}
.arr-cal {
	font-size: var(--text-xs);
	margin-top: auto;
}
/* Kalenderikonen ($ikon_kal i arrangorer.php), i länkens färg */
.arr-cal .arr-ikon {
	width: 16px;
	height: 16px;
	vertical-align: -3px;
	margin-right: var(--luft-1, 4px);
}
@media only screen and (max-width: 800px) {
	.arr-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--luft-2, 8px);
	}
	.arr-logo {
		height: 70px;
	}
	.arr-namn {
		font-size: var(--text-m);
	}
}

/* ========== Banguider (bana_lista.asp) ========== */

.banor-top {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--kort-glapp);
	margin-bottom: var(--kort-glapp);
}
.banor-top .card {
	margin-bottom: 0;
	text-align: center;
	display: flex;
	flex-direction: column;
}
/* Bilden mitt i kortet under rubriken, även när kortet är högre (kartan bredvid) */
.banor-top .card > a {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* Hela kortet är länken: orange ram vid hovring, som rutorna på de andra sidorna */
.banor-top .card {
	position: relative;
}
.banor-top .card > a:after {
	content: "";
	position: absolute;
	inset: 0;
}
.banor-top .card:hover {
	border-color: var(--farg-accent, #ff761e);
}
.banor-top img {
	max-width: 100%;
	height: auto;
	margin-top: var(--luft-2, 8px);
}
/* Nürburgring- och Superstage-loggorna är gif ritade mot vitt: samma vita bricka som arrangörernas loggor */
.banor-top img:not([src*="googlemaps"]) {
	box-sizing: border-box;
	padding: var(--luft-2, 8px) var(--luft-3, 12px);
	border: 1px solid var(--farg-linje, #e1e8f5);
	border-radius: 4px;
	background-color: #fff;
}
:root[data-theme="dark"] .banor-top img:not([src*="googlemaps"]) {
	border-color: transparent;
	filter: brightness(0.9);
}
.banor-cols {
	display: flex;
	align-items: flex-start;
	gap: var(--kort-glapp);
}
.banor-list {
	flex: 1 1 0;
	min-width: 0;
}
.banor-ads {
	flex: 0 0 500px;
	max-width: 500px;
	text-align: center;
}
.banor-ads img {
	max-width: 100%;
	height: auto;
}
.banor-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
	gap: var(--luft-2, 8px);
	margin: 0;
	padding: 0;
	list-style: none;
}
/* Varje bana som en egen ruta, så att kolumnerna syns tydligt */
.banor-grid li {
	list-style: none;
	list-style-image: none;
	border: 1px solid var(--farg-linje, #E1E8F5);
	border-radius: 4px;
	background-color: var(--farg-yta, #f7f9fc);
}
.banor-grid li:hover {
	border-color: var(--farg-accent, #ff761e);
}
.banor-grid a, .banor-grid a:link, .banor-grid a:visited {
	display: block;
	padding: var(--luft-3, 12px) var(--luft-3, 12px);
	font-size: var(--text-l);
	font-weight: bold;
}
.banor-grid a:hover {
	text-decoration: none;
}
/* Annonserna ligger kvar i högerkolumnen tills banorna är nere i en kolumn, först på mobilen hamnar de under */
@media only screen and (max-width: 800px) {
	.banor-cols {
		flex-direction: column;
		align-items: stretch;
	}
	.banor-ads {
		flex: none;
		max-width: none;
	}
	.banor-top {
		grid-template-columns: 1fr;
	}
	.banor-grid {
		grid-template-columns: 1fr;
	}
	.banor-grid a, .banor-grid a:link, .banor-grid a:visited {
		padding: var(--luft-3, 12px) var(--luft-3, 12px);
	}
}
.sida.banor h2 {
	margin-bottom: var(--luft-2, 8px);
}

/* ========== Banguide för en bana (bana_info.asp) ========== */

.bana-intro {
	display: grid;
	grid-template-columns: 340px minmax(0, 1fr);
	gap: var(--kort-glapp);
	align-items: start;
	margin-bottom: var(--kort-glapp);
}
.bana-intro .card {
	margin-bottom: 0;
}
.bana-logo {
	float: right;
	max-width: 40%;
	height: auto;
	margin: 0 0 var(--luft-3, 12px) var(--luft-5, 24px);
	box-sizing: border-box;
	padding: var(--luft-1, 4px) var(--luft-2, 8px);
	border: 1px solid var(--farg-linje, #e1e8f5);
	border-radius: 4px;
	background-color: #fff;
}
:root[data-theme="dark"] .bana-logo {
	border-color: transparent;
	filter: brightness(0.9);
}
.bana-fakta {
	color: var(--farg-text-svag, #666);
	margin-bottom: var(--luft-3, 12px);
}
/* Knapparna till vänster på datorn, under texten på mobil */
.bana-knappar {
	order: -1;
}
.bana-knappar a, .bana-knappar a:link, .bana-knappar a:visited {
	display: block;
	padding: var(--luft-3, 12px) var(--luft-4, 16px);
	margin-bottom: var(--luft-2, 8px);
	font-size: var(--text-l);
	font-weight: bold;
	border: 1px solid var(--val-ram, var(--farg-ram, #c4d2ed));
	background-color: var(--val-bakgrund, var(--farg-yta, #f7f9fc));
}
.bana-knappar a:last-child {
	margin-bottom: 0;
}
.bana-knappar a:after {
	content: " \203A";
	float: right;
	color: var(--farg-accent, #ff761e);
}
.bana-kartor {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--luft-5, 24px);
	text-align: center;
}
.bana-kartor iframe {
	width: 100%;
	height: 410px;
	border: 0;
	margin-bottom: var(--luft-2, 8px);
}
.bana-kartor b {
	display: block;
	margin-bottom: var(--luft-2, 8px);
}
.bana-bild {
	text-align: center;
}
.bana-bild img {
	max-width: 100%;
	height: auto;
	margin: var(--luft-2, 8px) 0;
}
.bana-video {
	position: relative;
	width: 100%;
	max-width: 1152px;
	margin: var(--luft-5, 24px) auto 0 auto;
	aspect-ratio: 16 / 9;
}
.bana-video iframe {
	width: 100%;
	height: 100%;
	border: 0;
}
.bana-varvtider iframe {
	width: 100%;
	height: 1000px;
	border: 0;
}
@media only screen and (max-width: 900px) {
	.bana-knappar {
		order: 0;
	}
	.bana-intro {
		grid-template-columns: 1fr;
	}
	.bana-kartor {
		grid-template-columns: 1fr;
		gap: var(--luft-4, 16px);
	}
	.bana-kartor iframe {
		height: 320px;
	}
	.bana-logo {
		float: none;
		display: block;
		max-width: 70%;
		margin: 0 0 var(--luft-3, 12px) 0;
	}
	.bana-varvtider iframe {
		height: 800px;
	}
}

/* ========== Översiktskarta över banorna (bana_oversiktskarta.php) ========== */

/* Kartan fyller skärmen, både på datorn och mobilen */
#map {
	width: 100%;
	height: 75vh;
	min-height: 420px;
	background-color: var(--farg-yta-varm, #e5e3df);
}
.karta-info {
	line-height: 1.5;
}
@media only screen and (max-width: 800px) {
	#map {
		height: 70vh;
		min-height: 360px;
	}
}

/* ========== Nürburgring (ringkalender.php) ========== */

.ring-lankar {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--luft-3, 12px);
}
.ring-lankar a, .ring-lankar a:link, .ring-lankar a:visited {
	display: block;
	padding: var(--luft-3, 12px) var(--luft-4, 16px);
	border: 1px solid var(--val-ram, var(--farg-ram, #c4d2ed));
	background-color: var(--val-bakgrund, var(--farg-yta, #f7f9fc));
	color: var(--farg-text, #333);
}
/* Samma utseende som på bana_info */
.bana-knappar a:hover, .ring-lankar a:hover {
	border-color: var(--val-hover, var(--farg-accent, #ff761e));
	text-decoration: none;
}
.ring-lankar b {
	display: block;
	color: var(--farg-bla, #3D5C98);
	font-size: var(--text-l);
	margin-bottom: 2px;
}
.ring-lankar .rod b {
	color: var(--farg-fel, #c0392b);
}
.ring-lankar span {
	font-size: var(--text-xs);
	color: var(--farg-text-svag, #666);
}
.ring-kameror {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--luft-4, 16px);
}
.ring-kameror iframe {
	width: 100%;
	height: 420px;
	border: 0;
}
.ring-kameror img {
	width: 100%;
	height: auto;
}
@media only screen and (max-width: 800px) {
	.ring-kameror {
		grid-template-columns: 1fr;
	}
	.ring-kameror iframe {
		height: 300px;
	}
}

/* ========== Bilar: Våra banåkabilar (rejsanubilar.php) och Mina bilar (minabilar.php) ========== */

.bil-grupp, .kal-grupp {
	font-size: var(--text-xs);
	font-weight: bold;
	color: var(--farg-text-svag, #666);
	margin: var(--luft-3, 12px) 0 var(--luft-2, 8px) 0;
}
.bil-rad, .bil-rad:link, .bil-rad:visited {
	display: grid;
	grid-template-columns: 100px minmax(0, 1fr) 180px;
	grid-template-areas: "datum namn agare";
	gap: 0 var(--luft-4, 16px);
	padding: var(--luft-2, 8px) var(--luft-2, 8px);
	border-bottom: 1px solid var(--farg-linje, #E1E8F5);
	text-decoration: none;
}
.bil-rubrik {
	font-size: var(--text-xs);
	font-weight: bold;
	color: var(--farg-bla, #3D5C98);
	background-color: var(--farg-yta, #f7f9fc);
	border-bottom: 2px solid var(--farg-accent, #ff761e);
}
.bil-datum {
	grid-area: datum;
	font-size: var(--text-xs);
	color: var(--farg-text-ljus, #999);
}
.bil-namn {
	grid-area: namn;
	font-weight: bold;
}
.bil-agare {
	grid-area: agare;
	font-size: var(--text-xs);
	color: var(--farg-text-svag, #666);
}
.bil-datum.manad {
	color: var(--farg-gron-3, #88BB88);
}
.bil-datum.vecka {
	color: var(--farg-gron, #40b010);
	font-weight: bold;
}
.bil-total {
	padding: var(--luft-3, 12px) var(--luft-2, 8px) 0 var(--luft-2, 8px);
	color: var(--farg-text-svag, #666);
}
@media only screen and (max-width: 800px) {
	.bil-rad, .bil-rad:link, .bil-rad:visited {
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-areas: "namn namn" "datum agare";
		gap: 2px var(--luft-3, 12px);
		padding: var(--luft-2, 8px) var(--luft-1, 4px);
	}
	.bil-rubrik {
		display: none;
	}
}
.sida.bilar-alla .knappar {
	margin-bottom: var(--luft-2, 8px);
}

/* ========== Mina bilar (minabilar.php) - bara det som skiljer: ingen ägar-kolumn ========== */

.sida.bilar-mina .knappar {
	margin-top: var(--luft-3, 12px);
}
.bilar-mina .bil-rad,
.bilar-mina .bil-rad:link,
.bilar-mina .bil-rad:visited {
	grid-template-columns: 100px minmax(0, 1fr);
	grid-template-areas: "datum namn";
}
@media only screen and (max-width: 800px) {
	.bilar-mina .bil-rad,
	.bilar-mina .bil-rad:link,
	.bilar-mina .bil-rad:visited {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "namn" "datum";
		gap: 2px 0;
	}
}

/* ========== Varvtider och loggar (forum/loggdbtop.php) ========== */

/* ---------- Varvtider: ny stil, samma som resten av sajten ---------- */
/* Rubriken överst. Lägg upp-knappen sist i listknapparnas rad under */
.varv .varv-huvud {
	flex-wrap: nowrap;
	gap: var(--luft-4, 16px);
	margin-bottom: var(--luft-3, 12px);
}
.sida.varv .card.intro .varv-huvud h1 {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
}
@media only screen and (max-width: 760px) {
	.varv .varv-huvud {
		gap: var(--luft-3, 12px);
	}
	.sida.varv .card.intro .varv-huvud h1 {
		font-size: 22px;
	}
}
.varv .knappar a.varv-ny,
.varv .knappar a.varv-ny:link,
.varv .knappar a.varv-ny:visited {
	background-color: var(--farg-primar, #3D5C98);
	border-color: var(--farg-primar, #3D5C98);
	color: var(--farg-primar-text, #fff);
	font-weight: bold;
}
.varv .knappar select {
	width: 220px;
	max-width: 100%;
	padding: var(--luft-1, 4px);
	margin: 0;
}
/* En bana i taget: knappar som byggs av scriptet under listan */
.varv-banor {
	display: flex;
	flex-wrap: wrap;
	gap: var(--luft-2, 8px);
	row-gap: var(--knapp-radavstand);
	margin-bottom: var(--luft-3, 12px);
}
.varv-banor button {
	font-family: inherit;
	font-size: var(--knapp-fs);
	padding: var(--knapp-pad);
	margin: 0;
	border: 1px solid var(--val-ram, var(--farg-ram, #c4d2ed));
	border-radius: var(--knapp-radie);
	background-color: var(--val-bakgrund, var(--farg-yta, #f7f9fc));
	color: var(--val-text, var(--farg-bla, #3D5C98));
	cursor: pointer;
}
.varv-banor button:hover {
	border-color: var(--val-hover, var(--farg-accent, #ff761e));
}
.varv-banor select.varv-banval {
	display: none;
}
/* Mobil: en rullgardin i stället för en vägg av banknappar */
@media only screen and (max-width: 760px) {
	.varv-banor button {
		display: none;
	}
	.varv-banor select.varv-banval {
		display: block;
		width: 100%;
		box-sizing: border-box;
		font-family: inherit;
		font-size: 16px; /* under 16px zoomar iOS in vid tryck */
		padding: var(--luft-2, 8px);
		border: 1px solid var(--val-aktiv, var(--farg-accent, #ff761e));
		border-radius: var(--knapp-radie);
		background-color: var(--val-bakgrund, var(--farg-yta, #f7f9fc));
		color: var(--val-text, var(--farg-bla, #3D5C98));
	}
}
/* Bara en orange knapp i taget: den valda blir blå medan man hovrar över en annan */
/* Listan */
/* Som forumets felruta (.f-fel i rejsa3/Rejsa.css) */
.varv-lista.varv-inlogg {
	border-left: 4px solid var(--farg-fel, #c0392b);
	color: var(--farg-fel, #c0392b);
	font-size: var(--text-l);
	line-height: 1.6;
}
.varv-lista.varv-inlogg p {
	margin: 0 0 var(--luft-3, 12px);
}
.varv-lista table {
	border-collapse: collapse;
	width: 100%;
}
.varv-lista colgroup {
	display: none;
}
.varv-lista td {
	padding: var(--luft-2, 8px) var(--luft-2, 8px);
	font-size: var(--text-xs);
	vertical-align: middle;
	white-space: nowrap;
	background-color: var(--farg-kort, #fff);
	background-image: none;
	border: none;
	border-bottom: 1px solid var(--farg-linje, #E1E8F5);
}
.varv-lista tr.varv-bana td {
	font-size: var(--text-l);
	font-weight: bold;
	color: var(--farg-rubrik, #3b3b3b);
	padding: var(--luft-5, 24px) var(--luft-2, 8px) var(--luft-2, 8px) var(--luft-2, 8px);
	border-bottom: 2px solid var(--farg-accent, #ff761e);
}
.varv-lista tr:not(.varv-bana):hover td {
	background-color: var(--farg-yta, #f7f9fc);
}
/* Raden är klickbar fram till och med däcken: länken fyller cellen; hela den delen blir orange när man hovrar över den (inte över föraren eller loggen) */
.varv-lista a.varv-l, .varv-lista a.varv-l:link, .varv-lista a.varv-l:visited {
	display: block;
	margin: -7px -8px;
	padding: var(--luft-2, 8px) var(--luft-2, 8px);
	overflow: hidden;
	text-overflow: ellipsis;
	color: inherit;
	text-decoration: none;
}
.varv-lista tr:not(.varv-bana):has(a.varv-l:hover) a.varv-l {
	color: var(--lank-hover, var(--farg-accent, #ff761e));
}
/* Pennan på egna varvtider */
.varv-lista td.varv-edit-td {
	text-align: center;
}
.varv-lista a.varv-edit, .varv-lista a.varv-edit:link, .varv-lista a.varv-edit:visited {
	display: inline-flex;
	vertical-align: middle;
	color: var(--farg-text-svag, #666);
}
.varv-lista a.varv-edit:hover {
	color: var(--lank-hover, var(--farg-accent, #ff761e));
}
/* Profilikonen efter förarens namn */
.varv-lista a.varv-profil, .varv-lista a.varv-profil:link, .varv-lista a.varv-profil:visited {
	display: inline-flex;
	vertical-align: -2px;
	margin-left: var(--luft-1, 4px);
	color: var(--farg-text-svag, #666);
}
.varv-lista a.varv-profil:hover {
	color: var(--lank-hover, var(--farg-accent, #ff761e));
}
/* LOGG och VIDEO behåller sina egna färger: vid hovring en tunn ram i samma färg */
.varv-lista td:nth-child(10) a span {
	display: inline-block;
	padding: 0 var(--luft-1, 4px);
	margin: 0 -3px;
	border-radius: var(--knapp-radie, 2px);
	line-height: 1.35;
}
.varv-lista td:nth-child(10) a:hover span {
	box-shadow: inset 0 0 0 1px currentColor;
}
/* Formuläret (lägg upp / redigera / visa) */
.varv form INPUT, .varv form SELECT {
	width:330px;
	max-width:100%;
	box-sizing:border-box;
	vertical-align:middle;
	margin-bottom:var(--luft-2, 8px);
}
.varv form TEXTAREA {
	width:330px;
	max-width:100%;
	box-sizing:border-box;
	vertical-align:text-top;
	margin-bottom:var(--luft-3, 12px);
}
.varv form INPUT[type=submit] {
	width: auto;
	padding: var(--knapp-l-pad);
	font-weight: bold;
	color: var(--farg-primar-text, #fff);
	background-color: var(--farg-primar, #3D5C98);
	border: 1px solid var(--farg-bla, #3D5C98);
	cursor: pointer;
	font-size: var(--knapp-l-fs);
	border-radius: var(--knapp-radie);
}
/* Formuläret är ett kort, rubrikerna som på resten av sajten */
.varv form.varv-form {
	display: block;
}
/* Visa-läget: videolänken är en länk men ser ut som de andra (låsta) fälten */
.varv-form A.varv-faltlank {
	display: inline-block;
	width: 330px;
	max-width: 100%;
	height: 26px;
	line-height: 20px;
	padding: 2px var(--luft-1, 4px);
	margin-bottom: var(--luft-2, 8px);
	box-sizing: border-box;
	border: 1px solid var(--farg-ram, #c9ced6);
	border-radius: 2px;
	background-color: var(--farg-kort, #fff);
	font-size: var(--text-m);
	vertical-align: middle;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.varv-form TD.HEADER {
	height: auto;
	padding: var(--luft-5, 24px) 0 var(--luft-2, 8px) 0;
	font-size: var(--text-l);
	font-weight: bold;
	color: var(--farg-bla, #3D5C98);
	background: none;
	border: none;
	border-bottom: 2px solid var(--farg-accent, #ff761e);
}
.varv-form TR:first-child > TD.HEADER {
	padding-top: 0;
}
/* /stylesheet.css ger .TEXT fast svart - här följer texten temat (syns i mörkt läge) */
.varv .TEXT {
	color: var(--farg-text, #333);
}
.varv-form TD.TEXT {
	padding: var(--luft-3, 12px) 0 var(--luft-1, 4px) 0;
	background: none;
	border: none;
}
.varv-form TABLE.TEXT TD {
	font-size: var(--text-s);
	padding: 2px 0;
	vertical-align: middle;
}
.varv-form TABLE.TEXT TD:first-child {
	width: 230px;
	padding-right: var(--luft-4, 16px);
	color: var(--farg-text-2, #555);
}
.varv-form .ALRT {
	font-size: var(--text-xs);
}
/* Smal dator och platta (801-1149px): elva kolumner får inte plats. Racingserien döljs,
   bil och förare kapas med "..." (bilen får det som är kvar av bredden), lite mindre luft i cellerna */
@media only screen and (min-width: 801px) and (max-width: 1149px) {
	.varv-lista tr:not(.varv-bana) td:nth-child(11) {
		display: none;
	}
	/* utan racingserien tar pennan annars all extra bredd - bilen får den i stället */
	.varv-lista tr:not(.varv-bana) td:nth-child(1) {
		width: 1%;
	}
	.varv-lista tr:not(.varv-bana) td:nth-child(4) {
		width: auto;
	}
	.varv-lista tr:not(.varv-bana) td {
		padding-left: var(--luft-2, 8px);
		padding-right: var(--luft-2, 8px);
	}
	.varv-lista a.varv-l, .varv-lista a.varv-l:link, .varv-lista a.varv-l:visited {
		margin-left: -6px;
		margin-right: -6px;
		padding-left: var(--luft-2, 8px);
		padding-right: var(--luft-2, 8px);
	}
	.varv-lista tr:not(.varv-bana) td:nth-child(4) a.varv-l {
		max-width: calc(100vw - 690px);	/* 20px extra för rullningslisten i Windows */
	}
	.varv-lista tr:not(.varv-bana) td:nth-child(9) a:first-child {
		display: inline-block;
		max-width: 110px;
		overflow: hidden;
		text-overflow: ellipsis;
		vertical-align: bottom;
	}
}
/* Dator: fasta kolumnbredder, så de inte hoppar när man byter bana (bilen tar resten) */
@media only screen and (min-width: 1150px) {
	.varv-lista table {
		table-layout: fixed;
	}
	.varv-lista colgroup {
		display: table-column-group;
	}
	.varv-lista tr:not(.varv-bana) td {
		overflow: hidden;
		text-overflow: ellipsis;
	}
}
@media only screen and (max-width: 800px) {
	/* Varje varvtid blir ett litet block på flera rader, som listan på Våra Bilar:
	   1 tid + bil + logg, 2 vikt/hk/kg-hk/däck + racingserie, 3 år + förare + penna.
	   Kolumnerna: 1 penna, 2 år, 3 tid, 4 bil, 5 vikt, 6 hk, 7 kg/hk, 8 däck, 9 förare, 10 logg, 11 serie
	*/
	.varv-lista table, .varv-lista tbody {
		display: block;
		width: 100%;
	}
	.varv-lista tr.varv-bana, .varv-lista tr.varv-bana td {
		display: block;
	}
	/* forumets catHead ger cellen fast höjd - då hamnar banans namn över den orange linjen */
	.varv-lista tr.varv-bana td {
		height: auto !important;
		line-height: 1.3;
		padding: var(--luft-5, 24px) var(--luft-1, 4px) var(--luft-2, 8px) var(--luft-1, 4px);
	}
	/* hover fastnar på telefon efter ett tryck */
	.varv-lista tr:not(.varv-bana):hover td {
		background: none;
	}
	.varv-lista a.varv-l, .varv-lista a.varv-l:link, .varv-lista a.varv-l:visited {
		margin: 0;
		padding: 0;
	}
	/* Vänster: tid + bil / vikt hk kg-hk däck / år + förare (rader som flödar, bryts med ::before/::after).
	   Höger kolumn: logg-video / racingserie / penna, fast placerade på var sin rad (20px radhöjd).
	   För långa bilnamn, förare och serier kapas med "..." i stället för att göra raden bredare. */
	.varv-lista tr:not(.varv-bana) {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		position: relative;
		min-height: 60px;
		padding: var(--luft-2, 8px) 98px var(--luft-2, 8px) var(--luft-1, 4px);
		border-bottom: 1px solid var(--farg-linje, #E1E8F5);
	}
	.varv-lista tr:not(.varv-bana):before,
	.varv-lista tr:not(.varv-bana):after {
		content: "";
		flex-basis: 100%;
		height: 0;
	}
	.varv-lista tr:not(.varv-bana):before {
		order: 25;
	}
	.varv-lista tr:not(.varv-bana):after {
		order: 45;
	}
	.varv-lista tr:not(.varv-bana) td {
		display: block;
		padding: 0;
		margin-right: var(--luft-2, 8px);
		border: none;
		line-height: 20px;
		white-space: nowrap !important;
		text-align: left !important;
		background: none;
		font-size: var(--text-xs);
		width: auto !important;
	}
	.varv-lista tr:not(.varv-bana) td:nth-child(3) {
		order: 10;
		width: 68px !important;
		margin-right: 0;
		font-weight: bold;
		font-size: var(--text-m);
	}
	.varv-lista tr:not(.varv-bana) td:nth-child(4) {
		order: 20;
		flex: 1 1 0;
		min-width: 0;
		margin-right: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		font-weight: bold;
		font-size: var(--text-m);
	}
	.varv-lista tr:not(.varv-bana) td:nth-child(2) {
		order: 50;
		width: 68px !important;
		margin-right: 0;
		color: var(--farg-text-svag, #666);
	}
	.varv-lista tr:not(.varv-bana) td:nth-child(9) {
		order: 60;
		flex: 1 1 0;
		min-width: 0;
		margin-right: 0;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.varv-lista tr:not(.varv-bana) td:nth-child(5) {
		order: 30;
	}
	.varv-lista tr:not(.varv-bana) td:nth-child(6) {
		order: 32;
	}
	.varv-lista tr:not(.varv-bana) td:nth-child(7) {
		order: 34;
	}
	.varv-lista tr:not(.varv-bana) td:nth-child(8) {
		order: 36;
		flex: 1 1 0;
		min-width: 0;
		margin-right: 0;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	/* däck stannar på raden, kapas hellre */
	.varv-lista tr:not(.varv-bana) td:nth-child(10),
	.varv-lista tr:not(.varv-bana) td:nth-child(11),
	.varv-lista tr:not(.varv-bana) td:nth-child(1) {
		position: absolute;
		right: 4px;
		max-width: 90px;
		margin: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: right !important;
	}
	.varv-lista tr:not(.varv-bana) td:nth-child(1) {
		top: 50px;
	}
	.varv-lista tr:not(.varv-bana) td:nth-child(10) {
		top: 10px;
		right: 1px;
		padding: 0 var(--luft-1, 4px);
	}
	.varv-lista tr:not(.varv-bana) td:nth-child(11) {
		top: 30px;
		color: var(--farg-text-svag, #666);
		font-size: var(--text-xs);
	}
	/* vikt/hk/däck: liten grå text */
	.varv-lista tr:not(.varv-bana) td:nth-child(5),
	.varv-lista tr:not(.varv-bana) td:nth-child(6),
	.varv-lista tr:not(.varv-bana) td:nth-child(7),
	.varv-lista tr:not(.varv-bana) td:nth-child(8) {
		font-size: var(--text-xs);
		color: var(--farg-text-svag, #666);
		white-space: nowrap !important;
	}
	.varv-lista tr:not(.varv-bana) td:nth-child(n+12) {
		display: none;
	}
	/* Formuläret: etikett ovanför fältet */
	.varv TABLE.TEXT,
	.varv TABLE.TEXT TBODY,
	.varv TABLE.TEXT TR,
	.varv TABLE.TEXT TD {
		display: block;
		width: auto !important;
	}
	.varv TABLE.TEXT IMG[src*="blank.gif"] {
		display: none;
	}
	.varv form INPUT,
	.varv form SELECT,
	.varv form TEXTAREA,
	.varv-form A.varv-faltlank {
		width: 100%;
	}
	.varv form INPUT[type=checkbox], .varv form .CHECKBOX {
		width: 20px;
	}
}
/* ---------- Gamla regler ---------- */
/* Gäller bara varvtidssidan (sidfoten på alla sidor har också klassen TEXT) */
body:has(.varv) .CHECKBOX {
	width:20px;
	vertical-align:text-bottom;
	margin:0px;
}
body:has(.varv) .ALRT {
	font-size: 9px;
	font-weight: bold;
	color: var(--farg-fel, #c0392b);
}
body:has(.varv) TABLE.TEXT, body:has(.varv) TR.TEXT, body:has(.varv) TD.TEXT {
	vertical-align:top;
	vertical-align:text-top;
	padding-right:1px;
	padding-top:var(--luft-1, 4px);
	padding-bottom:2px;
	margin-right:1px;
}

/* ========== Favoriter i forumet (forum/_setfilter.php) ========== */

/* Favoritblandningar: välj vilka forum som ska vara med. Rad = länk som växlar forumet av/på. */
.fav .knappar {
	margin: var(--luft-2, 8px) 0 var(--luft-1, 4px) 0;
}
/* Val mellan blandning 1 och 2 */
.fav .knappar.fav-val {
	gap: var(--luft-2, 8px);
	margin: 0 0 var(--luft-3, 12px) 0;
}
.fav .knappar.fav-val a,
.fav .knappar.fav-val a:link,
.fav .knappar.fav-val a:visited {
	padding: var(--knapp-l-pad);
	border-radius: var(--knapp-radie);
	font-size: var(--knapp-l-fs);
	font-weight: bold;
}
.fav-spara {
	margin-top: var(--luft-5, 24px);
	text-align: center;
}
.fav a.fav-spara-knapp,
.fav a.fav-spara-knapp:link,
.fav a.fav-spara-knapp:visited {
	display: inline-block;
	padding: var(--knapp-l-pad);
	border-radius: var(--knapp-radie);
	background-color: var(--farg-primar, #3D5C98);
	border: 1px solid var(--farg-bla, #3D5C98);
	color: var(--farg-primar-text, #fff);
	font-size: var(--knapp-l-fs);
	font-weight: bold;
	text-decoration: none;
}
.fav a.fav-spara-knapp:hover {
	background-color: var(--farg-accent, #ff761e);
	border-color: var(--farg-accent, #ff761e);
	color: var(--farg-pa-farg, #fff);
	text-decoration: none;
}
/* Hovring: grupperna påverkar inte varandra - bara knappar i samma rad släcker den valda */
/* Samma utseende som på loggdbtop */
.varv-banor button.active,
.fav.sida:has(.knappar a:hover) .knappar a.active:not(:hover) {
	border-color: var(--val-aktiv, var(--farg-accent, #ff761e));
	color: var(--val-aktiv, var(--farg-accent, #ff761e));
}
/* Samma utseende som på loggdbtop */
.varv-banor:has(button:hover) button.active:not(:hover),
.fav.sida:has(.knappar a:hover) .knappar:has(a:hover) a.active:not(:hover) {
	border-color: var(--val-ram, var(--farg-ram, #c4d2ed));
	color: var(--val-text, var(--farg-bla, #3D5C98));
}
/* Brytare för hela kategorin i rubriken */
.fav h2.fav-kat {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--luft-3, 12px);
}
.fav a.fav-alla, .fav a.fav-alla:link, .fav a.fav-alla:visited {
	display: flex;
	align-items: center;
	gap: var(--luft-2, 8px);
	font-size: var(--text-xs);
	font-weight: normal;
	color: var(--farg-text-svag, #666);
	text-decoration: none;
	white-space: nowrap;
}
.fav a.fav-alla:hover {
	color: var(--farg-accent, #ff761e);
	text-decoration: none;
}
.fav a.fav-alla.med .fav-brytare {
	background-color: var(--farg-gron, #40b010);
}
.fav a.fav-alla.med .fav-brytare:after {
	left: 19px;
}
.fav-grupp {
	font-size: var(--text-xs);
	font-weight: bold;
	color: var(--farg-text-svag, #666);
	margin: var(--luft-4, 16px) 0 var(--luft-1, 4px) 0;
}
.fav h2.fav-kat {
	font-size: var(--text-l);
	color: var(--farg-rubrik, #3b3b3b);
	margin: var(--luft-5, 24px) 0 var(--luft-1, 4px) 0;
	padding-bottom: var(--luft-2, 8px);
	border-bottom: 2px solid var(--farg-accent, #ff761e);
}
.fav h2.fav-kat:first-child {
	margin-top: var(--luft-1, 4px);
}
.fav a.fav-rad, .fav a.fav-rad:link, .fav a.fav-rad:visited {
	display: flex;
	align-items: center;
	gap: var(--luft-3, 12px);
	padding: var(--luft-2, 8px) var(--luft-2, 8px);
	border-bottom: 1px solid var(--farg-linje, #E1E8F5);
	color: var(--farg-text-ljus, #999);
	text-decoration: none;
}
/* Samma utseende som på rejsanubilar */
.bil-rad:hover, .fav a.fav-rad:hover {
	background-color: var(--farg-yta, #f7f9fc);
	text-decoration: none;
}
.fav a.fav-rad.med {
	color: var(--farg-text, #333);
}
.fav-text b {
	display: block;
	font-size: var(--text-m);
	color: var(--farg-gra-bla, #9aa6bd);
}
.fav a.fav-rad.med .fav-text b {
	color: var(--farg-bla, #3D5C98);
}
.fav a.fav-rad:hover .fav-text b {
	color: var(--farg-accent, #ff761e);
}
.fav-beskr {
	display: block;
	font-size: var(--text-xs);
	margin-top: 1px;
}
/* Brytare: grå = inte med, grön = med */
.fav-brytare {
	flex: none;
	position: relative;
	width: 38px;
	height: 22px;
	border-radius: 11px;
	background-color: var(--farg-ram, #c4d2ed);
	transition: background-color 0.15s;
}
.fav-brytare:after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background-color: var(--farg-kort, #fff);
	box-shadow: 0 1px 2px rgba(0,0,0,0.25);
	transition: left 0.15s;
}
.fav a.fav-rad.med .fav-brytare {
	background-color: var(--farg-gron, #40b010);
}
.fav a.fav-rad.med .fav-brytare:after {
	left: 19px;
}
@media only screen and (max-width: 640px) {
	.fav.sida {
		padding: var(--luft-3, 12px) var(--luft-2, 8px) 30px var(--luft-2, 8px);
	}
	.fav .card {
		padding: var(--luft-3, 12px) var(--luft-3, 12px);
	}
}

/* ========== Startsidan (index.php) ========== */

/* Design "D": svart list med orange rand, rubriker i Barlow Condensed, kort med tunn ram.
   Alla färger är tokens ur /rejsa_farg.css, så ljust och mörkt läge följer med. */

.sida.fp {
	font-family: 'Barlow', var(--text-font);
	font-size: 15px;
	color: var(--farg-text, #333);
}
.fp a, .fp a:link, .fp a:visited {
	color: inherit;
	text-decoration: none;
}
.fp a:hover {
	color: inherit;
	text-decoration: none;
}
.fp a.fp-mer, .fp a.fp-mer:link, .fp a.fp-mer:visited {
	font-weight: 600;
	color: var(--farg-accent-text, #b84300);
	white-space: nowrap;
}
.fp a.fp-mer:hover {
	color: var(--lank-hover, var(--farg-accent, #ff761e));
	text-decoration: none;
}

.fp-kort {
	background-color: var(--farg-kort, #fff);
	border: 1px solid var(--farg-linje, #e1e8f5);
}
.fp-huvud {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--luft-3, 12px);
	padding: var(--luft-3, 12px) var(--luft-4, 16px);
	border-bottom: 1px solid var(--farg-linje, #e1e8f5);
}
.fp h2 {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: 'Barlow Condensed', var(--text-font);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--farg-rubrik, #3b3b3b);
}

/* Uppställningen: innehållet till vänster, annonsörerna i en smal kolumn till höger */
.fp-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 172px;
	gap: var(--kort-glapp);
	align-items: start;
}
.fp-main, .fp-sido {
	display: flex;
	flex-direction: column;
	gap: var(--kort-glapp);
	min-width: 0;
}
.fp-cols {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: var(--kort-glapp);
	align-items: start;
}

/* Kommande på banorna - den närmaste träffen mörk med orange kant */
.fp-ev-lista {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--luft-3, 12px);
	padding: var(--luft-4, 16px) var(--luft-4, 16px) var(--luft-4, 16px) var(--luft-4, 16px);
}
.fp a.fp-ev {
	display: flex;
	flex-direction: column;
	gap: var(--luft-1, 4px);
	padding: var(--luft-3, 12px);
	background-color: var(--farg-yta, #f7f9fc);
	border-left: 4px solid var(--farg-linje, #e1e8f5);
	color: var(--farg-text, #333);
	transition: background-color .15s, border-color .15s, filter .15s;
}
.fp a.fp-ev:hover {
	background-color: var(--farg-yta-hover, #e6e9ee);
	border-left-color: var(--farg-accent, #ff761e);
}
.fp a.fp-ev-nasta, .fp a.fp-ev-nasta:hover {
	background-color: var(--farg-topp-2, #16191e);
	border-left-color: var(--farg-accent, #ff761e);
	color: #fff;
}
.fp a.fp-ev-nasta:hover {
	filter: brightness(1.15);
}
.fp-ev-etikett {
	font-family: 'Barlow Condensed', var(--text-font);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--farg-accent-text, #b84300);
}
.fp-ev-nasta .fp-ev-etikett {
	color: #ff8a3d;
}
.fp-ev-datum {
	font-family: 'Barlow Condensed', var(--text-font);
	font-size: 40px;
	font-weight: 700;
	line-height: 0.95;
}
.fp-ev-datum small {
	font-size: 22px;
}
.fp-ev-bana {
	font-family: 'Barlow Condensed', var(--text-font);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.1;
	text-transform: uppercase;
}
/* Datum och bana blir orange vid hovring */
.fp a.fp-ev:hover .fp-ev-datum, .fp a.fp-ev:hover .fp-ev-bana {
	color: var(--lank-hover, var(--farg-accent, #ff761e));
}
.fp-ev-typ {
	font-size: 13px;
	color: var(--farg-text-svag, #666);
}
.fp-ev-nasta .fp-ev-typ {
	color: #c9cdd3;
}
.fp-ev-dag-m {
	display: none;
}
.fp-tomt {
	margin: 0;
	padding: var(--luft-4, 16px) var(--luft-4, 16px);
	color: var(--farg-text-svag, #666);
}

/* Forumet och nyheterna: hela raden är länken */
.fp a.fp-rad {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) 170px;
	gap: var(--luft-3, 12px);
	align-items: baseline;
	padding: var(--luft-2, 8px) var(--luft-4, 16px);
	border-bottom: 1px solid var(--farg-linje, #e1e8f5);
	transition: background-color .15s;
}
.fp a.fp-rad:hover, .fp a.fp-rad:active,
.fp a.fp-nyhet:hover, .fp a.fp-nyhet:active {
	background-color: var(--farg-yta, #f7f9fc);
}
.fp a.fp-rad:hover .fp-titel, .fp a.fp-nyhet:hover .fp-titel {
	color: var(--lank-hover, var(--farg-accent, #ff761e));
}
.fp a.fp-rad:last-child, .fp .fp-nyhet:last-child {
	border-bottom: 0;
}
.fp-tid {
	font-family: 'Barlow Condensed', var(--text-font);
	font-size: 18px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--farg-text-svag, #666);
}
.fp-idag .fp-tid {
	color: var(--farg-accent-text, #b84300);
}
.fp-titel {
	display: block;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--farg-rubrik, #3b3b3b);
}
.fp-ny {
	margin-left: var(--luft-2, 8px);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--farg-accent-text, #b84300);
}
.fp-forum, .fp-av {
	font-size: 13px;
	color: var(--farg-text-svag, #666);
}
.fp-av {
	text-align: right;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.fp-av-m {
	display: none;
}

.fp .fp-nyhet {
	display: block;
	padding: var(--luft-3, 12px) var(--luft-4, 16px);
	border-bottom: 1px solid var(--farg-linje, #e1e8f5);
	transition: background-color .15s;
}
.fp-nyhet-datum {
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--farg-accent-text, #b84300);
}
.fp-nyhet .fp-titel {
	margin: var(--luft-1, 4px) 0;
	font-family: 'Barlow Condensed', var(--text-font);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.1;
}
.fp-nyhet-text {
	display: block;
	font-size: 14px;
	color: var(--farg-text-svag, #666);
}
.fp-nyhet-bild {
	display: block;
	width: 100%;
	height: auto;
	max-height: 260px;
	object-fit: cover;
	margin-top: var(--luft-2, 8px);
	border: 1px solid var(--farg-linje, #e1e8f5);
}
.fp-nyhet-doman {
	color: var(--farg-text, #222);
	text-decoration: underline dotted;
}

.fp-intro {
	margin-top: calc(var(--kort-glapp) * 1.5);
}
.fp-intro-text {
	padding: var(--luft-4, 16px) var(--luft-4, 16px);
}
.fp-intro-logo {
	float: right;
	width: 64px;
	height: 64px;
	margin: 0 0 var(--luft-2, 8px) var(--luft-3, 12px);
}
.fp-intro h3 {
	margin: 0;
	font-family: 'Barlow Condensed', var(--text-font);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--farg-rubrik, #3b3b3b);
}
.fp-intro-namn {
	clear: both;
}
.fp-intro p {
	margin: var(--luft-2, 8px) 0 0 0;
	font-size: 14px;
	color: var(--farg-text-svag, #666);
}
.fp-intro a, .fp-intro a:link, .fp-intro a:visited {
	color: var(--lank-text, var(--farg-accent-text, #b84300));
}
.fp-intro a:hover {
	color: var(--lank-hover, var(--farg-accent, #ff761e));
}

/* Annonsörernas banners (ann_ettan/index.php skriver ut dem med <br> emellan) */
.fp-annonser {
	padding: var(--luft-3, 12px) var(--luft-3, 12px) var(--luft-3, 12px) var(--luft-3, 12px);
	text-align: center;
}
.fp-annonser-rubrik {
	font-family: 'Barlow Condensed', var(--text-font);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--farg-text-svag, #666);
}
.fp-annonser img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: var(--luft-3, 12px) auto 0 auto;
}
.fp-annonser br {
	display: none;
}

.fp-fot {
	margin: calc(var(--kort-glapp) * 2) 0 0 0;
	font-size: 11px;
	line-height: 1.5;
	text-align: center;
	color: var(--farg-text-svag, #666);
}
.fp-fot hr {
	height: 0;
	margin: 0 0 var(--luft-2, 8px) 0;
	border: 0;
	border-top: 1px solid var(--farg-linje, #e1e8f5);
}
.fp-fot p {
	margin: 0;
}
.fp-fot a, .fp-fot a:link, .fp-fot a:visited {
	color: var(--lank-text, var(--farg-accent-text, #b84300));
}
.fp-fot a:hover {
	color: var(--lank-hover, var(--farg-accent, #ff761e));
}

/* Mellanbredd (smal dator, liten platta): forumet och nyheterna under varandra, annonsörerna kvar till höger */
@media only screen and (max-width: 1100px) {
	.fp-cols {
		grid-template-columns: minmax(0, 1fr);
	}
	.fp-ev-lista {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Mobilen: allt i en kolumn, annonsörerna sist i två kolumner */
@media only screen and (max-width: 760px) {
	.fp-grid, .fp-cols {
		grid-template-columns: minmax(0, 1fr);
	}
	.fp h2 {
		font-size: 22px;
	}
	.fp-huvud {
		padding: var(--luft-3, 12px);
	}
	.fp-ev-lista {
		display: block;
		padding: 0;
	}
	.fp a.fp-ev {
		display: grid;
		grid-template-columns: 58px minmax(0, 1fr);
		column-gap: var(--luft-3, 12px);
		align-items: center;
		padding: var(--luft-2, 8px) var(--luft-3, 12px);
		border-left: 0;
		border-bottom: 1px solid var(--farg-linje, #e1e8f5);
		background-color: transparent;
		color: var(--farg-text, #333);
	}
	.fp a.fp-ev-nasta, .fp a.fp-ev-nasta:hover {
		background-color: transparent;
		color: var(--farg-text, #333);
		filter: none;
	}
	.fp-ev-etikett {
		display: none;
	}
	.fp-ev-datum {
		grid-row: 1 / span 2;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: var(--luft-2, 8px) 0;
		font-size: 26px;
		line-height: 1;
		background-color: var(--farg-yta, #f7f9fc);
		border-left: 3px solid var(--farg-linje, #e1e8f5);
		color: var(--farg-accent-text, #b84300);
	}
	.fp-ev-datum small {
		font-size: 13px;
		text-transform: uppercase;
	}
	.fp-ev-nasta .fp-ev-datum {
		background-color: var(--farg-topp-2, #16191e);
		border-left-color: var(--farg-accent, #ff761e);
		color: #fff;
	}
	.fp-ev-bana {
		font-size: 19px;
	}
	.fp-ev-nasta .fp-ev-typ {
		color: var(--farg-text-svag, #666);
	}
	.fp-ev-dag-m {
		display: inline;
	}
	.fp a.fp-rad {
		grid-template-columns: 46px minmax(0, 1fr);
		gap: var(--luft-2, 8px);
		padding: var(--luft-2, 8px) var(--luft-3, 12px);
	}
	.fp-tid {
		font-size: 17px;
	}
	.fp-titel {
		font-size: 16px;
	}
	.fp-av {
		display: none;
	}
	.fp-av-m {
		display: inline;
	}
	.fp .fp-nyhet {
		padding: var(--luft-3, 12px);
	}
	.fp-nyhet .fp-titel {
		font-size: 22px;
	}
	.fp-intro-text {
		padding: var(--luft-3, 12px);
	}
	.fp-annonser {
		padding: var(--luft-3, 12px);
	}
	.fp-annonser > center {
		display: grid;
		grid-template-columns: repeat(auto-fill, 140px);
		justify-content: center;
		align-items: start;
		gap: var(--luft-3, 12px);
	}
	.fp-annonser img {
		margin: 0;
	}
}

/* Startsidan: sista rutan i "Kommande" när det finns färre träffar än rutor */
.fp-ev-snart {
	grid-column: -2 / -1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--luft-3, 12px);
	border: 1px dashed var(--farg-ram, #c4d2ed);
	font-family: 'Barlow Condensed', var(--text-font);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	color: var(--farg-text-svag, #666);
}
@media only screen and (max-width: 760px) {
	.fp-ev-snart {
		display: block;
		padding: var(--luft-3, 12px);
		border: 0;
		font-size: 18px;
	}
}


/* ========== Artiklar (artikel.php) ========== */
/* Innehållet kommer från forumet via _inc_forum_simpletable.php: en tabell med cellerna BIGHEADER (rubrik), INTRO, HEADER (mellanrubrik) och TEXT */

/* Kortet lika brett som på de andra sidorna, texten lättläst bredd */
.art > table {
	max-width: 780px;
}
.art > table, .art > table > tbody, .art > table > tbody > tr, .art > table > tbody > tr > td {
	display: block;
	width: auto;
}
.art td.BIGHEADER, .art td.INTRO, .art td.HEADER, .art td.TEXT {
	padding: 0 !important;
	background: none;
	border: 0;
	height: auto;
	font-family: var(--text-font);
	color: var(--farg-text, #333);
}
/* Tom mellanrubrik (inlägg utan rubrik): bara linjen, som avdelare */
.art td.HEADER.art-tom {
	height: 0;
	overflow: hidden;
	padding: 0 !important;
	margin: 0 0 var(--luft-5, 24px) 0;
}
/* Forumtexten lägger in egna marginaler: bort med dem */
.art td > div {
	margin: 0 !important;
}
.art td.BIGHEADER {
	font-family: var(--rubrik-font);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--farg-rubrik, #3b3b3b);
	margin: 0 0 var(--luft-2, 8px) 0;
}
.art td.INTRO {
	font-size: var(--text-l);
	line-height: 1.5;
	margin: 0 0 var(--luft-5, 24px) 0;
}
.art td.HEADER {
	font-family: var(--rubrik-font);
	font-size: 21px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--farg-rubrik, #3b3b3b);
	margin: 0 0 var(--luft-3, 12px) 0;
	padding: 0 0 var(--luft-2, 8px) 0 !important;
	border-bottom: 1px solid var(--farg-linje, #e1e8f5);
}
.art td.TEXT {
	font-size: var(--text-m);
	line-height: 1.6;
	margin: 0 0 var(--luft-5, 24px) 0;
}
.art > table > tbody > tr:last-child > td.TEXT {
	margin-bottom: 0;
}
.art ul {
	margin: var(--luft-2, 8px) 0;
	padding-left: var(--luft-5, 24px);
}
.art li {
	list-style-image: none;
}
.art img {
	max-width: 100%;
	height: auto;
}
/* Vit text används som "osynlig" utfyllnad i några artiklar: ska följa kortets färg även i mörkt läge */
.art span[style*="color: white"] {
	color: var(--farg-kort, #fff) !important;
}
@media only screen and (max-width: 800px) {
	.art td.BIGHEADER {
		font-size: 22px;
	}
	.art td.HEADER {
		font-size: 18px;
	}
	.art img {
		margin-left: 0;
		margin-right: 0;
	}
}


/* ========== Eftersnack (eftersnack.php), alla nyheter (alla_nyheter.php), avatarer (avatarer.php) ========== */

.efter-lista a, .efter-lista a:link, .efter-lista a:visited {
	display: block;
	padding: var(--luft-1, 4px) 0;
	border-bottom: 1px solid var(--farg-linje, #e1e8f5);
}
.efter-lista a:last-of-type {
	border-bottom: 0;
}

/* Eftersnack: ett kort per år, datum i egen kolumn, två spalter på bred skärm */
.efter .efter-arval {
	margin-top: var(--luft-2, 8px);
}
.efter .efter-etikett {
	flex-basis: 100%;
	font-size: var(--text-xs);
	color: var(--farg-text-svag, #666);
}
.efter .efter-lista {
	scroll-margin-top: 12px;
}
.efter .efter-lista h2 {
	display: flex;
	align-items: baseline;
	gap: var(--luft-2, 8px);
}
.efter .efter-antal {
	font-family: inherit;
	font-size: var(--text-xs);
	font-weight: 400;
	text-transform: none;
	color: var(--farg-text-svag, #666);
}
.efter .efter-rader {
	column-count: 2;
	column-gap: 36px;
}
.efter .efter-lista a, .efter .efter-lista a:link, .efter .efter-lista a:visited {
	display: flex;
	gap: var(--luft-3, 12px);
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	padding: var(--luft-2, 8px) 0;
}
.efter .efter-lista a:last-of-type {
	border-bottom: 1px solid var(--farg-linje, #e1e8f5);
}
.efter .efter-datum {
	flex: 0 0 72px;
	font-size: var(--text-s);
	color: var(--farg-text-svag, #666);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.efter .efter-rubrik {
	min-width: 0;
}
@media only screen and (max-width: 900px) {
	.efter .efter-rader {
		column-count: 1;
	}
	.efter .efter-lista a:last-of-type {
		border-bottom: 0;
	}
}
@media only screen and (max-width: 500px) {
	.efter .efter-datum {
		flex-basis: 60px;
	}
}
.ava-galleri {
	display: flex;
	flex-wrap: wrap;
	gap: var(--luft-2, 8px);
	margin-bottom: var(--luft-3, 12px);
}
.ava-galleri img {
	border: 0;
	max-width: 100%;
	height: auto;
}

/* ========== R-däckslistan (info/info_rdack.php) ========== */

.rd .rd-artikel p {
	max-width: 780px;
	line-height: 1.6;
}
.rd .rd-artikel > :last-child {
	margin-bottom: 0;
}
.rd .rd-signatur {
	font-style: italic;
	color: var(--farg-text-svag, #666);
}
/* Gamla stylesheet.css ger LI en bild som punkt: vanliga punkter här */
.rd li {
	list-style-image: none;
}
.rd .card.rd-marke {
	scroll-margin-top: 12px;
}

/* Översikt: aktuella modeller bredvid listan med alla märken */
.rd-oversikt {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	gap: var(--kort-glapp);
	align-items: start;
	margin-bottom: var(--kort-glapp);
}
.rd-oversikt .card {
	margin: 0;
}
.rd-aktuella {
	margin: 0;
	padding-left: var(--luft-4, 16px);
	line-height: 1.9;
}
/* Alla modeller: en ruta per märke */
.rd-lista {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: var(--luft-2, 8px);
	margin: 0;
	padding: 0;
	list-style: none;
}
.rd-lista a, .rd-lista a:link, .rd-lista a:visited {
	display: block;
	height: 100%;
	box-sizing: border-box;
	padding: var(--luft-2, 8px) var(--luft-3, 12px);
	border: 1px solid var(--farg-linje, #e1e8f5);
	border-radius: var(--knapp-radie, 2px);
	color: var(--farg-text, #333);
	text-decoration: none;
}
.rd-lista a:hover {
	border-color: var(--val-hover, var(--farg-accent, #ff761e));
	color: var(--farg-text, #333);
}
.rd-lista-marke {
	display: block;
	font-family: var(--rubrik-font);
	font-weight: 700;
	text-transform: uppercase;
	color: var(--farg-rubrik, #3b3b3b);
	margin-bottom: var(--luft-1, 4px);
}
.rd-lista-modell {
	display: block;
	font-size: var(--text-s);
	line-height: 1.45;
	color: var(--farg-text-svag, #666);
}

/* Ett kort per märke, däcken två i bredd: bild till vänster, text till höger */
.rd-dacklista {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--luft-5, 24px) 32px;
}
.rd-dack {
	display: flex;
	gap: var(--luft-4, 16px);
	align-items: flex-start;
}
.rd-bild {
	flex: 0 0 auto;
	width: 96px;
	height: auto;
	border-radius: var(--knapp-radie, 2px);
}
.rd-text {
	min-width: 0;
}
.rd-text h3 {
	font-family: var(--rubrik-font);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--farg-rubrik, #3b3b3b);
	margin: 0 0 var(--luft-2, 8px) 0;
}
.rd-utgangen {
	display: inline-block;
	vertical-align: 2px;
	margin-left: var(--luft-2, 8px);
	padding: 1px var(--luft-2, 8px);
	border: 1px solid var(--farg-ram, #c4d2ed);
	border-radius: var(--knapp-radie, 2px);
	font-family: var(--text-font);
	font-size: var(--text-xs);
	font-weight: 400;
	color: var(--farg-text-svag, #666);
}
.rd-text ul {
	margin: 0;
	padding-left: var(--luft-4, 16px);
}
.rd-text li {
	margin: 0 0 var(--luft-1, 4px) 0;
	line-height: 1.45;
}
.rd-text p {
	margin: 0 0 var(--luft-2, 8px) 0;
}
.rd-text p.rd-extra {
	margin-top: var(--luft-2, 8px);
	font-size: var(--text-s);
}
.rd-text p.rd-extra img {
	display: block;
	margin-top: var(--luft-2, 8px);
	max-width: 100%;
	height: auto;
}
@media only screen and (max-width: 900px) {
	.rd-oversikt {
		grid-template-columns: 1fr;
	}
	.rd-dacklista {
		grid-template-columns: 1fr;
	}
}
@media only screen and (max-width: 500px) {
	.rd-bild {
		width: 72px;
	}
	.rd-dack {
		gap: var(--luft-3, 12px);
	}
	.rd-lista {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ========== Artiklar & Reportage (arkivet.php) ========== */

.ark .ark-sektion {
	scroll-margin-top: 12px;
}
/* Länklista till vänster, bild till höger */
.ark .ark-med-bild {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--luft-5, 24px);
	align-items: start;
}
.ark .ark-lista {
	margin: 0;
	padding: 0;
	list-style: none;
}
.ark .ark-lista li {
	list-style-image: none;
	padding: var(--luft-2, 8px) 0;
	border-bottom: 1px solid var(--farg-linje, #e1e8f5);
}
.ark .ark-lista li:first-child {
	padding-top: 0;
}
.ark .ark-lista li:last-of-type {
	border-bottom: 0;
	padding-bottom: 0;
}
.ark .ark-lista a {
	font-weight: 600;
}
.ark .ark-text {
	display: block;
	margin-top: 2px;
	font-size: var(--text-s);
	line-height: 1.5;
	color: var(--farg-text-svag, #666);
}
.ark .ark-bild img {
	display: block;
	max-width: 240px;
	height: auto;
	border-radius: var(--knapp-radie, 2px);
}
.ark .ark-bred-bild {
	display: block;
	max-width: 100%;
	height: auto;
	margin-top: var(--luft-4, 16px);
	border-radius: var(--knapp-radie, 2px);
}
.ark .ark-underrubrik {
	font-family: var(--rubrik-font);
	font-size: 17px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--farg-rubrik, #3b3b3b);
	margin: var(--luft-5, 24px) 0 var(--luft-2, 8px) 0;
}
.ark .ark-fot {
	margin: var(--luft-1, 4px) 2px 0 2px;
}
@media only screen and (max-width: 700px) {
	.ark .ark-med-bild {
		grid-template-columns: 1fr;
		gap: var(--luft-4, 16px);
	}
	.ark .ark-bild {
		order: -1;
	}
	.ark .ark-bild img {
		max-width: 100%;
		max-height: 180px;
		width: auto;
	}
}


/* ========== Vilket användarnamn har jag? (getname/index.php) ========== */

.sida .card.gn p {
	margin-bottom: var(--luft-3, 12px);
}
.gn-form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--luft-2, 8px);
	margin: var(--luft-4, 16px) 0 var(--luft-5, 24px);
}
.gn-form input[type="text"] {
	flex: 0 1 320px;
	min-width: 0;
	padding: var(--luft-2, 8px) var(--luft-2, 8px);
	font-size: var(--text-m, 15px);
}
.gn-form input[type="submit"] {
	padding: var(--luft-2, 8px) var(--luft-4, 16px);
	font-size: var(--text-m, 15px);
	cursor: pointer;
}