.qslb, .qslb * { box-sizing: border-box; }
.qslb {
	--wood: #5a3b22;
	--paper: #fbf3dd;
	--ink: #3a2616;
	--red: #b83227;
	--blue: #1f4e8c;
	position: relative;
	max-width: 960px;
	margin: 24px auto;
	padding: 28px 22px 32px;
	border-radius: 14px;
	color: var(--ink);
	font-family: Georgia, "Times New Roman", serif;
	box-shadow: 0 10px 34px rgba(0,0,0,.35), inset 0 0 0 6px #3b2614;
	/* Holzwand mit Fächerregal (Postfächer) */
	background:
		linear-gradient(rgba(30,18,8,.55), rgba(30,18,8,.55)),
		repeating-linear-gradient(90deg, transparent 0 118px, rgba(0,0,0,.45) 118px 122px),
		repeating-linear-gradient(0deg, transparent 0 88px, rgba(0,0,0,.45) 88px 92px),
		repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 3px, rgba(0,0,0,.05) 3px 7px),
		linear-gradient(135deg, #7a5230, #4a2f19);
}

/* Kopf */
.qslb-head {
	position: relative;
	background: var(--paper);
	border-radius: 8px;
	padding: 24px 24px 18px 130px;
	margin-bottom: 22px;
	box-shadow: 0 4px 14px rgba(0,0,0,.4);
	background-image: repeating-linear-gradient(180deg, transparent 0 27px, rgba(120,90,50,.08) 27px 28px);
	border: 6px solid transparent;
	border-image: repeating-linear-gradient(135deg, var(--red) 0 14px, var(--paper) 14px 24px, var(--blue) 24px 38px, var(--paper) 38px 48px) 6;
}
.qslb-stamp {
	position: absolute;
	left: 22px; top: 22px;
	width: 90px; height: 100px;
	padding-top: 24px;
	text-align: center;
	font: 700 20px/1.1 "Courier New", monospace;
	color: var(--red);
	border: 3px dashed var(--red);
	transform: rotate(-6deg);
	letter-spacing: 2px;
	background: rgba(184,50,39,.06);
}
.qslb .qslb-title {
	margin: 0 0 8px;
	font: 700 36px/1.1 Georgia, serif;
	letter-spacing: 1px;
	color: var(--ink);
}
.qslb-intro p { margin: 0 0 8px; font-size: 17px; line-height: 1.55; color: var(--ink); }

/* Meldung */
.qslb-msg {
	background: #e5f3d4; color: #25400f;
	border-left: 6px solid #5b9a2a;
	padding: 10px 14px; margin-bottom: 18px; border-radius: 4px;
	font-family: Arial, sans-serif; font-weight: 600;
}

/* Eingabe */
.qslb-add {
	background: #f4e4b8;
	border: 2px dashed #8b6a3a;
	border-radius: 8px;
	padding: 16px;
	margin-bottom: 22px;
	box-shadow: 0 4px 12px rgba(0,0,0,.35);
}
.qslb-add label { display: block; font-weight: 700; margin-bottom: 8px; font-size: 15px; }
.qslb-add textarea {
	width: 100%;
	font: 700 20px/1.4 "Courier New", monospace;
	text-transform: uppercase;
	padding: 10px;
	border: 2px solid #8b6a3a;
	border-radius: 6px;
	background: #fffdf5;
	color: var(--ink);
	margin-bottom: 10px;
}

/* Buttons */
.qslb-btn {
	cursor: pointer;
	border: 0;
	border-radius: 6px;
	padding: 12px 22px;
	font: 700 16px Arial, sans-serif;
	color: #fff;
	background: linear-gradient(#c9402f, #98271c);
	box-shadow: 0 3px 0 #6a1a12, 0 6px 12px rgba(0,0,0,.35);
	transition: transform .1s, filter .2s;
}
.qslb-btn:hover { filter: brightness(1.1); }
.qslb-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #6a1a12; }

/* Boxen */
.qslb-box {
	border-radius: 8px;
	padding: 16px 16px 12px;
	margin-bottom: 22px;
	box-shadow: 0 4px 14px rgba(0,0,0,.45);
}
.qslb .qslb-box h3 {
	margin: 0 0 14px;
	font: 700 24px/1.2 Georgia, serif;
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
}
.qslb-box h3 small { font: 400 14px Arial, sans-serif; opacity: .85; }
.qslb-empty { margin: 4px 0 10px; font-style: italic; }

.qslb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.qslb-item {
	display: flex; align-items: center; gap: 14px;
	padding: 10px 16px;
	border-radius: 6px;
	margin: 0;
	animation: qslb-slide .6s ease-out both;
	animation-delay: calc(var(--i) * 70ms);
}
@keyframes qslb-slide {
	from { opacity: 0; transform: translateY(-34px); }
	to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .qslb-item { animation: none; } }

.qslb-env { flex: 0 0 auto; width: 56px; height: 38px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.3)); }
.qslb-call {
	flex: 1 1 auto;
	font: 700 30px/1.1 "Courier New", monospace;
	letter-spacing: 3px;
}
.qslb-date { font: 400 13px Arial, sans-serif; opacity: .8; white-space: nowrap; }
.qslb-pick {
	display: inline-flex; align-items: center; gap: 8px;
	font: 700 15px Arial, sans-serif; cursor: pointer;
	padding: 8px 12px; border-radius: 6px; background: rgba(255,255,255,.55);
	border: 1px solid rgba(0,0,0,.25);
}
.qslb-pick input { width: 22px; height: 22px; accent-color: var(--red); }

/* Inbox: frisches Papier, Luftpost-Rand */
.qslb-inbox { background: #f7ecd0; }
.qslb-inbox .qslb-item {
	background: var(--paper);
	border: 3px solid transparent;
	border-image: repeating-linear-gradient(135deg, var(--red) 0 10px, var(--paper) 10px 18px, var(--blue) 18px 28px, var(--paper) 28px 36px) 3;
	box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.qslb-inbox .qslb-call { color: #1d3557; }

/* Ladenhüter: verstaubt, vergilbt, schief */
.qslb-archive {
	position: relative;
	background: #a89878;
	color: #4a3f2c;
	filter: sepia(.55) saturate(.7);
	overflow: hidden;
}
.qslb-archive::before { /* Staubschleier */
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background:
		radial-gradient(circle at 20% 30%, rgba(255,255,255,.18) 0 2px, transparent 3px),
		radial-gradient(circle at 70% 60%, rgba(255,255,255,.15) 0 1px, transparent 2px),
		radial-gradient(circle at 45% 80%, rgba(255,255,255,.12) 0 2px, transparent 3px),
		linear-gradient(180deg, rgba(220,205,170,.25), rgba(90,70,40,.15));
	background-size: 90px 90px, 60px 60px, 120px 120px, auto;
}
.qslb-archive::after { /* Spinnennetz */
	content: ""; position: absolute; top: 0; right: 0; width: 120px; height: 120px; pointer-events: none; opacity: .45;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1'%3E%3Cpath d='M100 0L0 0M100 0L0 30M100 0L0 70M100 0L30 100M100 0L70 100M100 0L100 100'/%3E%3Cpath d='M80 0Q78 22 100 20M55 0Q52 45 100 42M30 0Q28 70 100 66'/%3E%3C/g%3E%3C/svg%3E") no-repeat top right / contain;
}
.qslb-archive .qslb-item {
	background: #cdbf9d;
	border: 2px dashed #8a7a58;
	box-shadow: inset 0 0 18px rgba(90,70,40,.35);
}
.qslb-archive .qslb-item:nth-child(odd)  { transform: rotate(-.4deg); }
.qslb-archive .qslb-item:nth-child(even) { transform: rotate(.5deg); }
.qslb-archive .qslb-env { filter: sepia(1) brightness(.8) drop-shadow(0 2px 2px rgba(0,0,0,.3)); }
.qslb-archive .qslb-call { color: #5a4b30; text-shadow: 1px 1px 0 rgba(255,255,255,.25); }

.qslb-save { text-align: center; }

@media (max-width: 640px) {
	.qslb { padding: 16px 10px 22px; }
	.qslb-head { padding: 110px 16px 14px; }
	.qslb-stamp { left: 16px; top: 14px; width: 74px; height: 82px; font-size: 16px; padding-top: 18px; }
	.qslb .qslb-title { font-size: 28px; }
	.qslb-item { flex-wrap: wrap; gap: 8px 12px; }
	.qslb-call { font-size: 26px; }
}

/* Telegram-Info */
.qslb-notify {
	display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
	background: #f4e4b8; border: 2px dashed #8b6a3a; border-radius: 8px;
	padding: 14px 16px; margin-bottom: 22px;
	box-shadow: 0 4px 12px rgba(0,0,0,.35);
	font: 600 15px Arial, sans-serif;
}
.qslb-notify .qslb-btn[disabled] { filter: grayscale(1) brightness(.85); cursor: not-allowed; box-shadow: none; }
.qslb-timer { font: 700 20px "Courier New", monospace; color: var(--red); }

/* Titelbild */
.qslb .qslb-cover {
	display: block; width: 100%; height: auto;
	border-radius: 8px; margin: 0 0 22px;
	box-shadow: 0 6px 18px rgba(0,0,0,.5);
}