/* ===================================================================
   Design tokens
   =================================================================== */
:root {
	--paper: #FFFFFF;
	--paper-raised: #FFFFFF;
	--ink: #1D2420;
	--ink-soft: #5F655F;
	--accent: #D04A2D;
	--accent-ink: #FFFFFF;
	--shelf: #2F6690;
	--shelf-soft: #EEF4FA;
	--line: #E2E2DB;
	--shadow: 0 1px 2px rgba(29,36,32,.06), 0 4px 14px rgba(29,36,32,.07);
	--overlay: rgba(20,22,17,.3);
	--surface: #F6F6F2;
	}

@media (prefers-color-scheme: dark) {
	:root {
		--paper: #1B1D17;
		--paper-raised: #232620;
		--ink: #E9E6D9;
		--ink-soft: #A6A28C;
		--accent: #E2704F;
		--accent-ink: #241008;
		--shelf: #86B3DC;
		--shelf-soft: #222D3A;
		--line: #383A31;
		--shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.35);
		--overlay: rgba(0,0,0,.6);
		--surface: #1B1D17;
		}
	}

* { box-sizing: border-box; }

body {
	font-family: ui-sans-serif, -apple-system, "Segoe UI", Roboto, arial, sans-serif;
	font-size:15.5px;
	background: var(--paper);
	color: var(--ink);
	margin: 0;
	padding: 0 20px;
	}

.head {
	font-family: ui-sans-serif, -apple-system, "Segoe UI", Roboto, arial, sans-serif;
	font-size:15.5px;
	}

.input {
	font-family: ui-sans-serif, -apple-system, "Segoe UI", Roboto, arial, sans-serif;
	font-size:15.5px;
	}

/* Kasse: Eingabefelder gross genug zum Tippen (auch am Handy) */
input.input[type="text"],
.artikel select[name="land"] {
	width: 100%;
	max-width: 440px;
	padding: 11px 14px;
	font-size: 17px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--surface);
	color: var(--ink);
	}
.artikel select[name="land"] { width: auto; min-width: 220px; }
input.input[type="text"]:focus,
.artikel select[name="land"]:focus {
	outline: 2px solid var(--shelf);
	outline-offset: 1px;
	background: var(--paper);
	}
input.input[name="plz"] { width: 130px; }
input.input[name="ort"] { width: calc(100% - 142px); max-width: 298px; }
input.input[type="checkbox"] { width: 18px; height: 18px; vertical-align: middle; margin-right: 4px; }

.radio-label {
	font-family: ui-sans-serif, -apple-system, "Segoe UI", Roboto, arial, sans-serif;
	font-size:15.5px;
	margin-right: 20px;
	cursor: pointer;
	}

.nav-link-has-items {
	font-weight: 600;
	}

.cntr {
	font-family: ui-sans-serif, -apple-system, "Segoe UI", Roboto, arial, sans-serif;
	font-size:11.5px;
	}


.input_search {
	font-family: ui-sans-serif, -apple-system, "Segoe UI", Roboto, arial, sans-serif;
	font-size:17.5px;
	width: 100%;
	padding: 9px 14px;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--ink);
	}
.input_search:focus {
	outline: 2px solid var(--shelf);
	outline-offset: 1px;
	}

.links {
	font-family: ui-sans-serif, -apple-system, "Segoe UI", Roboto, arial, sans-serif;
	font-size:15.5px;
	color: var(--shelf);
	letter-spacing:.2px;
	line-height:20px;
	text-decoration:none;
	}

.links:hover {
	text-decoration:underline;
	}

.list_item {
	font-family: ui-sans-serif, -apple-system, "Segoe UI", Roboto, arial, sans-serif;
	font-size:15px;
	color:var(--ink);
	cursor:pointer;
	letter-spacing:.4px;
	line-height:17px;
	font-weight:500;
	padding: 5px 8px;
	border-radius: 7px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	text-decoration: none;
	}
.list_item:hover {
	background: var(--shelf-soft);
	}
.list_item-active {
	background: var(--shelf-soft);
	color: var(--shelf);
	}

.navig-eyebrow {
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ink-soft);
	font-weight: 500;
	margin: 4px 8px 10px;
	}
.navig-count {
	font-size: 13px;
	font-weight: normal;
	color: var(--ink-soft);
	font-variant-numeric: tabular-nums;
	}


.list {
	font-family: ui-sans-serif, -apple-system, "Segoe UI", Roboto, arial, sans-serif;
	font-size:13.5px;
	color:var(--ink-soft);
	}
hr {
	border: none;
	border-top: 1px solid var(--line);
	}


/* ===================================================================
   Page shell: header / nav / content
   =================================================================== */

#app-shell {
	max-width: 1400px;
	margin: 16px auto 0;
	border: 1px solid var(--line);
	border-radius: 12px;
	box-shadow: var(--shadow);
	}

#header {
	display: flex;
	align-items: center;
	gap: 14px;
	position: sticky;
	top: 16px;
	z-index: 30;
	background-color: var(--paper-raised);
	border-bottom: 1px solid var(--line);
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
	padding: 10px 16px;
	}

#header .wordmark {
	flex: none;
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	}
#header .wordmark img {
	display: block;
	border-radius: 6px;
	}
#header .searchwrap {
	flex: 1;
	min-width: 0;
	}

#header .top-links {
	flex: none;
	font-size: 14.5px;
	white-space: nowrap;
	color: var(--ink-soft);
	}
#header .top-links .links {
	color: var(--ink-soft);
	}
#header .top-links .links:hover {
	color: var(--ink);
	}

.menu-btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex: none;
	height: 38px;
	padding: 0 16px;
	border-radius: 8px;
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--ink);
	font-family: ui-sans-serif, -apple-system, "Segoe UI", Roboto, arial, sans-serif;
	font-size: 15.5px;
	font-weight: 500;
	letter-spacing: .25px;
	cursor: pointer;
	white-space: nowrap;
	}
.menu-btn svg {
	flex: none;
	}

.nav-badge {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--accent);
	vertical-align: middle;
	}
.menu-btn-badge {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 8px;
	height: 8px;
	border: 1px solid var(--paper);
	}
.menu-btn:hover {
	background: var(--shelf-soft);
	}
.menu-btn:focus-visible { outline: 2px solid var(--shelf); outline-offset: 2px; }

#site-body {
	display: flex;
	align-items: flex-start;
	position: relative;
	}

#scrim {
	display: none;
	}

#navig	{
	flex: none;
	width: 280px;
	max-width: 82vw;
	max-height: none;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	background-color: var(--paper-raised);
	border-right: 1px solid var(--line);
	border-bottom-left-radius: 12px;
	padding: 14px 12px 24px;
	font-size:14.5px;
	overflow-y: auto;
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
	z-index: 41;
	transform: translateX(-105%);
	transition: transform .25s ease;
	box-shadow: var(--shadow);
	}

body.nav-open #navig {
	transform: translateX(0);
	}
body.nav-open #scrim {
	display: block;
	position: fixed;
	inset: 0;
	background: var(--overlay);
	z-index: 40;
	}

#content	{
	flex: 1;
	min-width: 0;
	padding: 20px 24px 60px;
	font-size:15.5px;
	border-bottom-right-radius: 12px;
	}

.navig-toplinks {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-bottom: 10px;
	margin-bottom: 10px;
	border-bottom: 1px solid var(--line);
	}

@media (max-width: 900px) {
	#header .top-links { display: none; }

	#content { padding: 16px; }
	}


/* ===================================================================
   Startseite: Themenwelt-Panels
   =================================================================== */

.welcome-line {
	font-size: 16px;
	line-height: 22px;
	color: var(--ink-soft);
	border-bottom: 1px solid var(--line);
	padding-bottom: 16px;
	margin-bottom: 22px;
	}
.welcome-line b { color: var(--ink); }
.welcome-line .accent-dot { color: var(--accent); }

.panels-eyebrow {
	font-size: 12.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink-soft);
	font-weight: 500;
	margin-bottom: 12px;
	}

.panel-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 16px;
	}

.panel {
	position: relative;
	display: block;
	background: var(--paper-raised);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 18px 18px 16px;
	text-decoration: none;
	color: var(--ink);
	box-shadow: var(--shadow);
	transition: transform .15s ease, box-shadow .15s ease;
	}
.panel:hover { transform: translateY(-3px); }

.panel-hero {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-decoration: none;
	color: inherit;
	}

.panel-icon {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--paper-raised);
	color: var(--panel-accent);
	border: 1px solid color-mix(in srgb, var(--panel-accent) 50%, transparent);
	box-shadow: 0 1px 2px rgba(0,0,0,.08);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 14px;
	position: relative;
	flex: none;
	}
.panel-icon .ring { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .4; }
.panel-icon .glyph { width: 25px; height: 25px; display: block; position: relative; }

.panel-count {
	display: inline-block;
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 13px;
	color: var(--ink-soft);
	background: var(--shelf-soft);
	padding: 3px 9px;
	border-radius: 999px;
	margin-bottom: 12px;
	font-variant-numeric: tabular-nums;
	}
.panel-title {
	font-size: 19.5px;
	font-weight: 500;
	letter-spacing: .25px;
	color: var(--shelf);
	line-height: 24px;
	margin-bottom: 6px;
	}
.panel-examples {
	font-size: 14px;
	color: var(--ink-soft);
	line-height: 18px;
	}
.panel-example-link {
	color: var(--ink-soft);
	text-decoration: none;
	border-bottom: 1px dotted var(--line);
	}
.panel-example-link:hover {
	color: var(--shelf);
	border-bottom-color: var(--shelf);
	}


/* ===================================================================
   Article listing
   =================================================================== */

.artikel {
	background-color: var(--paper-raised);
	border: 1px solid var(--line);
	padding: 10px;
	margin: 0 0 10px;
	border-radius: 10px;
	font-size:15.5px;
	font-family: ui-sans-serif, -apple-system, "Segoe UI", Roboto, arial, sans-serif;
	line-height:20px;
	box-shadow: var(--shadow);
	width: 100%;
	}

a.artikel_link {
	font-family: ui-sans-serif, -apple-system, "Segoe UI", Roboto, arial, sans-serif;
	font-size:19.5px;
	color: var(--ink);
	letter-spacing:-0.2px;
	line-height:23px;
	text-decoration:none;
	}

.artikel_header {
	font-family: ui-sans-serif, -apple-system, "Segoe UI", Roboto, arial, sans-serif;
	font-size:17.5px;
	letter-spacing:-0.2px;
	line-height:23px;
	}

@media (max-width: 700px) {
	table.artikel, table.artikel tbody, table.artikel tr, table.artikel td {
		display: block;
		width: 100% !important;
		}
	table.artikel td[rowspan] {
		text-align: center;
		padding-top: 10px;
		}
	}


/* ===================================================================
   Sprachfilter (subkategorie, themenwelt, suche)
   =================================================================== */

.lang-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 4px 0 18px;
	}
.lang-filter-link {
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: .25px;
	padding: 5px 13px;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: var(--paper-raised);
	color: var(--ink-soft);
	text-decoration: none;
	}
.lang-filter-link:hover {
	border-color: var(--shelf);
	color: var(--ink);
	}
.lang-filter-active {
	background: var(--shelf);
	border-color: var(--shelf);
	color: var(--accent-ink);
	}
.lang-filter-active:hover {
	color: var(--accent-ink);
	}


/* ===================================================================
   Article cards (subkategorie listing, search, bookmarks, autor)
   =================================================================== */

.artikel-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 16px;
	margin: 4px 0 20px;
	}

.basket-summary {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 16px;
	background: var(--paper-raised);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 14px 18px;
	}
.basket-summary-label {
	margin-right: auto;
	font-size: 15.5px;
	font-weight: 500;
	letter-spacing: .25px;
	color: var(--ink);
	}
.basket-summary-total {
	font-size: 18.5px;
	font-weight: 500;
	color: var(--shelf);
	}

.artikel-card {
	background-color: var(--paper-raised);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	box-shadow: var(--shadow);
	transition: transform .15s ease, box-shadow .15s ease;
	}
.artikel-card:hover { transform: translateY(-3px); }

.artikel-card-media {
	position: relative;
	min-height: 90px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--shelf-soft), var(--paper));
	border: 1px solid var(--line);
	border-radius: 8px;
	overflow: hidden;
	padding: 8px;
	}
.artikel-card-media > div {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	}
.artikel-card-img {
	max-height: 160px;
	width: auto;
	margin: 0 auto;
	}

.konvolut-card-media {
	gap: 4px;
	}
.konvolut-card-img {
	flex: 1 1 0;
	max-width: 20%;
	max-height: 160px;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 4px;
	}

.mono {
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	}

.konvolut-hint {
	font-size: 14px;
	color: #666;
	margin: 8px 0 0;
	}
.konvolut-hint a {
	color: var(--shelf);
	text-decoration: none;
	}
.konvolut-hint a:hover {
	text-decoration: underline;
	}

.artikel-card-stamp {
	position: absolute;
	top: 8px;
	right: 8px;
	border: 1.5px solid var(--accent);
	color: var(--accent);
	background: var(--paper-raised);
	border-radius: 999px;
	padding: 3px 9px;
	font-size: 13.5px;
	font-weight: 500;
	transform: rotate(6deg);
	}

.artikel-card-lang {
	position: absolute;
	top: 8px;
	left: 8px;
	font-size: 12px;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--ink-soft);
	background: var(--paper-raised);
	border: 1px solid var(--line);
	border-radius: 5px;
	padding: 1px 6px;
	}

.artikel-card-title {
	font-family: ui-sans-serif, -apple-system, "Segoe UI", Roboto, arial, sans-serif;
	font-size: 18.5px;
	font-weight: 500;
	letter-spacing: .25px;
	line-height: 1.3;
	color: var(--shelf);
	text-decoration: none;
	display: block;
	}
.artikel-card-title:hover {
	text-decoration: underline;
	}

.artikel-card-meta {
	font-size: 13.5px;
	color: var(--ink-soft);
	}

.konvolut-card-books {
	list-style: none;
	margin: 4px 0 6px;
	padding: 0;
	font-size: 13.5px;
	color: var(--ink-soft);
	line-height: 1.5;
	}
.konvolut-card-books li {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	}

.artikel-card-desc {
	font-size: 14px;
	color: var(--ink-soft);
	line-height: 1.5;
	margin: 0;
	flex: 1;
	}

.artikel-card-more {
	font-size: 13.5px;
	align-self: flex-start;
	}

.artikel-card-actions {
	display: flex;
	gap: 8px;
	margin-top: 2px;
	}
.artikel-card-actions a {
	flex: 1;
	text-align: center;
	white-space: normal;
	border-radius: 8px;
	padding: 7px 8px;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .25px;
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--ink);
	text-decoration: none;
	cursor: pointer;
	}
.artikel-card-actions a:hover {
	border-color: var(--shelf);
	}
/* Beide Buttons starten hell und werden erst gruen, wenn sie aktiv sind
   (im Warenkorb / gemerkt) */
.artikel-card-actions a.fancy_button_done {
	background: var(--shelf);
	border-color: var(--shelf);
	color: var(--accent-ink);
	}

/* Gleiche Knopf-Optik wie in den Artikel-Karten, aber fuer die
   Einzelartikel-Ansicht und den Warenkorb (nicht in ein Grid gespannt) */
.artikel-detail-actions {
	display: inline-flex;
	gap: 10px;
	flex-wrap: wrap;
	}
.artikel-detail-actions a {
	border-radius: 8px;
	padding: 9px 18px;
	font-size: 15.5px;
	font-weight: 500;
	letter-spacing: .25px;
	border: 1px solid var(--line);
	background: var(--paper);
	color: var(--ink);
	text-decoration: none;
	cursor: pointer;
	}
.artikel-detail-actions a:hover {
	border-color: var(--shelf);
	}
.artikel-detail-actions a.fancy_button_done {
	background: var(--shelf);
	border-color: var(--shelf);
	color: var(--accent-ink);
	}


/* ===================================================================
   Buttons
   =================================================================== */

.fancy_button, .fancy_button_done {
	color: var(--accent-ink);
	padding: 6px 12px;
	border: 0;
	border-radius: 999px;
	font-size:15.5px;
	font-weight: 500;
	letter-spacing: .25px;
	text-decoration:none;
	cursor:pointer;
	display: inline-block;
	}

.fancy_button {
	background-color: var(--accent);
	}
.fancy_button:hover {
	filter: brightness(1.08);
	}

.fancy_button_done {
	background-color: var(--shelf);
	}
.fancy_button_done:hover {
	filter: brightness(1.08);
	}


.img {
	border-radius: 8px;
	object-fit: scale-down;
	max-width: 100%;
	}

.nonselected_page{
	font-size:13.5px;
	border:1px solid var(--line);
	background-color: var(--paper-raised);
	color:var(--ink-soft);
	padding: 4px 8px;
	border-radius: 6px;
	margin-top:3px;
	display:inline-block;
	}

.selected_page {
	font-size:13.5px;
	font-weight: 500;
	letter-spacing: .25px;
	border:1px solid var(--shelf);
	background-color: var(--shelf-soft);
	color: var(--ink);
	padding: 4px 8px;
	border-radius: 6px;
	margin:3px;
	display:inline-block;
	}

.diverr {
	padding: 8px 10px;
	background-color: var(--shelf-soft);
	border: 1px solid var(--shelf);
	border-radius: 8px;
	color: var(--accent);
	font-size:16.5px;
	}


/* ===================================================================
   Graph-Ansicht der Suchergebnisse (optional, per Checkbox)
   =================================================================== */

.search-graph-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--ink-soft);
	cursor: pointer;
	margin: 4px 0 14px;
	width: fit-content;
	}
.search-graph-toggle input {
	cursor: pointer;
	}

#search-graph-wrap {
	display: none;
	width: 100%;
	height: 480px;
	position: relative;
	overflow: hidden;
	border-radius: 12px;
	border: 1px solid var(--line);
	background: var(--paper-raised);
	margin-bottom: 20px;
	}
@media (max-width: 500px) {
	#search-graph-wrap {
		height: 320px;
		}
	}
#search-graph-canvas {
	width: 100%;
	height: 100%;
	}
#search-graph-labels {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	}
.search-graph-label {
	position: absolute;
	transform: translate(-50%,0);
	color: var(--ink);
	white-space: nowrap;
	text-shadow: 0 0 4px var(--paper-raised), 0 0 4px var(--paper-raised);
	pointer-events: auto;
	cursor: pointer;
	text-decoration: none;
	}
.search-graph-label:hover {
	text-decoration: underline;
	}