/**
 * SpacePanel UI — Responsive
 *
 * Zentrale Datei für alle Breakpoint-Anpassungen.
 * Mobile First: Basis = Smartphone Portrait (~375px)
 *
 * Breakpoints:
 *   sm  640px   — Große Smartphones / Landscape
 *   md  768px   — Tablet Portrait
 *   lg  1024px  — Desktop / Tablet Landscape
 *   xl  1280px  — Breite Desktops
 */

/* =================================================================
   SMARTPHONE PORTRAIT (Basis / < 640px)
   Alles untereinander, kompakte Abstände, vereinfachte Console Bars
   ================================================================= */

/* Kleinere Typografie auf Smartphones */
html {
	font-size: 100%; /* 16px — nicht kleiner! */
}

/* Container: weniger Padding */
.sp-container {
	padding-left: var(--sp-space-sm);
	padding-right: var(--sp-space-sm);
}

/* Header: Endcaps schmaler */
.sp-header__endcap {
	width: 40px;
	min-width: 40px;
}

.sp-header__endcap-right {
	width: 48px;
	min-width: 48px;
}

.sp-header__bar {
	min-height: 40px;
}

.sp-header__title {
	font-size: var(--sp-text-md);
}

/* Section Spacing kompakter */
.sp-section {
	padding-top: var(--sp-space-lg);
	padding-bottom: var(--sp-space-xl);
}

/* Panels: Side-Bar schmaler */
.sp-panel__bar {
	width: 12px;
	min-width: 12px;
}

.sp-panel__content {
	padding: var(--sp-space-md);
}

/* Cards: weniger Padding */
.sp-card__body {
	padding: var(--sp-space-md);
}

/* Section Header: kompakter */
.sp-section-header {
	flex-wrap: wrap;
}

.sp-section-header__title {
	font-size: var(--sp-text-xl);
}

.sp-section-header__line {
	display: none;
}

/* Data Block: kleiner */
.sp-data-block__value {
	font-size: var(--sp-text-2xl);
}

/* Headings auf Mobile: gut lesbar */
h1 { font-size: var(--sp-text-2xl); }
h2 { font-size: var(--sp-text-xl); }
h3 { font-size: var(--sp-text-lg); }
h4 { font-size: var(--sp-text-md); }

/* Tabelle Scroll-Hinweis */
.sp-table-wrap {
	position: relative;
}

.sp-table-wrap::after {
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 24px;
	background: linear-gradient(to right, transparent, var(--sp-color-bg));
	pointer-events: none;
	border-radius: 0 var(--sp-radius-panel) var(--sp-radius-panel) 0;
}

/* CTA Strip: vertikal */
.sp-cta-strip {
	padding: var(--sp-space-md);
	text-align: center;
}

/* Button: volle Breite auf Mobile */
.sp-btn--mobile-full {
	width: 100%;
}

/* Footer: einspaltig, weniger Abstand */
.sp-footer {
	padding-bottom: var(--sp-space-lg);
}

.sp-footer__copy {
	margin-top: var(--sp-space-md);
}

/* Pagination kompakter */
.sp-pagination {
	flex-wrap: wrap;
}


/* =================================================================
   GROSSE SMARTPHONES / LANDSCAPE (>= 640px)
   Etwas mehr Platz, 2-spaltige Karten möglich
   ================================================================= */
@media (min-width: 640px) {

	html {
		font-size: 106.25%; /* 17px */
	}

	.sp-container {
		padding-left: var(--sp-space-md);
		padding-right: var(--sp-space-md);
	}

	/* Header Endcaps etwas breiter */
	.sp-header__endcap {
		width: 56px;
		min-width: 56px;
	}

	.sp-header__endcap-right {
		width: 72px;
		min-width: 72px;
	}

	/* Panels: Standard Bar-Breite */
	.sp-panel__bar {
		width: 18px;
		min-width: 18px;
	}

	/* 2er Grid für kleine Cards */
	.sp-grid--auto {
		grid-template-columns: repeat(2, 1fr);
	}
}


/* =================================================================
   TABLET PORTRAIT (>= 768px)
   Zweispaltige Layouts, Header-Bar voller, Panels nebeneinander
   ================================================================= */
@media (min-width: 768px) {

	/* Container mehr Luft */
	.sp-container {
		padding-left: var(--sp-space-lg);
		padding-right: var(--sp-space-lg);
	}

	/* Header Endcaps Standard */
	.sp-header__endcap {
		width: 64px;
		min-width: 64px;
	}

	.sp-header__endcap-right {
		width: 96px;
		min-width: 96px;
	}

	.sp-header__bar {
		min-height: var(--sp-bar-height-xl);
	}

	.sp-header__title {
		font-size: var(--sp-text-lg);
	}

	/* Headings Standard */
	h1 { font-size: var(--sp-text-3xl); }
	h2 { font-size: var(--sp-text-2xl); }
	h3 { font-size: var(--sp-text-xl); }
	h4 { font-size: var(--sp-text-lg); }

	/* Section Header: Linie anzeigen */
	.sp-section-header__line {
		display: block;
	}

	.sp-section-header__title {
		font-size: var(--sp-text-2xl);
	}

	/* Panels: Bar breiter */
	.sp-panel__bar {
		width: var(--sp-sidebar-bar-width);
		min-width: var(--sp-sidebar-bar-width);
	}

	.sp-panel__content {
		padding: var(--sp-space-lg);
	}

	/* Card Body */
	.sp-card__body {
		padding: var(--sp-space-lg);
	}

	/* Section Spacing */
	.sp-section {
		padding-top: var(--sp-space-lg);
		padding-bottom: var(--sp-space-2xl);
	}

	/* Data Block */
	.sp-data-block__value {
		font-size: var(--sp-text-3xl);
	}

	/* Tabelle: Scroll-Gradient ausblenden wenn genug Platz */
	.sp-table-wrap::after {
		display: none;
	}

	/* Footer 2-spaltig */
	.sp-footer__inner {
		grid-template-columns: repeat(2, 1fr);
	}
}


/* =================================================================
   DESKTOP / TABLET LANDSCAPE (>= 1024px)
   Volle Navigation, Sidebar-Layout, alle Console-Bars vollständig
   ================================================================= */
@media (min-width: 1024px) {

	/* Container volle Breite nutzen */
	.sp-container {
		padding-left: var(--sp-space-xl);
		padding-right: var(--sp-space-xl);
	}

	html {
		font-size: 112.5%; /* 18px */
	}

	/* Header: volle Endcap-Breite */
	.sp-header__endcap {
		width: 80px;
		min-width: 80px;
	}

	.sp-header__endcap-right {
		width: 120px;
		min-width: 120px;
	}

	.sp-header__title {
		font-size: var(--sp-text-xl);
	}

	/* Desktop-Navigation sichtbar, Toggle versteckt (via layout.css) */

	/* Navigation bar — on desktop, slightly larger items */
	.sp-nav__menu > li > a {
		font-size: var(--sp-text-xs);
		padding: var(--sp-space-xs) var(--sp-space-md);
	}

	/* Headings: volle Größe */
	h1 { font-size: var(--sp-text-4xl); }
	h2 { font-size: var(--sp-text-3xl); }
	h3 { font-size: var(--sp-text-2xl); }
	h4 { font-size: var(--sp-text-xl); }

	/* Section Spacing: voll */
	.sp-section {
		padding-top: var(--sp-space-xl);
		padding-bottom: var(--sp-space-3xl);
	}

	/* Footer 4-spaltig */
	.sp-footer__inner {
		grid-template-columns: repeat(4, 1fr);
	}

	/* Sidebar Grid aktiv */
	.sp-grid--sidebar {
		grid-template-columns: 1fr var(--sp-width-sidebar);
	}

	/* 3er Grid */
	.sp-grid--3col {
		grid-template-columns: repeat(3, 1fr);
	}
}


/* =================================================================
   BREITE DESKTOPS (>= 1280px)
   Extra Platz, größere Console Bars, mehr Atem
   ================================================================= */
@media (min-width: 1280px) {

	.sp-container {
		padding-left: var(--sp-space-2xl);
		padding-right: var(--sp-space-2xl);
	}

	/* Navigation: etwas größer auf breiten Screens */
	.sp-nav__menu > li > a {
		font-size: var(--sp-text-sm);
		padding: var(--sp-space-xs) var(--sp-space-lg);
	}

	/* Header Endcaps extra groß */
	.sp-header__endcap {
		width: 100px;
		min-width: 100px;
	}

	.sp-header__endcap-right {
		width: 140px;
		min-width: 140px;
	}

	/* Section Spacing: großzügig */
	.sp-section {
		padding-top: var(--sp-space-xl);
		padding-bottom: var(--sp-space-3xl);
	}

	/* 4er Grid */
	.sp-grid--4col {
		grid-template-columns: repeat(4, 1fr);
	}
}


/* =================================================================
   TOUCH DEVICE OPTIMIERUNG
   ================================================================= */
@media (hover: none) and (pointer: coarse) {

	/* Größere Touch-Targets */
	.sp-btn {
		min-height: 44px;
	}

	.sp-btn--sm {
		min-height: 36px;
	}

	.sp-nav__menu > li > a {
		padding: var(--sp-space-sm) var(--sp-space-lg);
	}

	.sp-nav-cluster__item {
		padding: var(--sp-space-sm) var(--sp-space-md);
		min-height: 44px;
	}

	.sp-pagination__link,
	.sp-pagination__current {
		min-width: 44px;
		height: 44px;
	}

	/* Dropdown auf Touch: tap statt hover */
	.sp-nav__menu li .sub-menu li a {
		padding: var(--sp-space-md) var(--sp-space-lg);
	}

	/* Kein Hover-Effekt auf Touch */
	.sp-card:hover {
		transform: none;
		box-shadow: var(--sp-shadow-panel);
	}
}


/* =================================================================
   LANDSCAPE SPEZIFISCH (Smartphone Landscape)
   ================================================================= */
@media (max-height: 500px) and (orientation: landscape) {

	/* Sticky Header kleiner */
	.sp-header__bar {
		min-height: 36px;
	}

	.sp-header-divider {
		height: 4px;
	}

	/* Sections enger */
	.sp-section {
		padding-top: var(--sp-space-lg);
		padding-bottom: var(--sp-space-lg);
	}

	/* Mobile Nav: horizontaler scrollen statt vertikal */
	.sp-nav-mobile.is-open {
		padding-top: var(--sp-space-lg);
		overflow-y: auto;
	}
}


/* =================================================================
   PRINT
   ================================================================= */
@media print {

	.sp-header,
	.sp-footer__bar,
	.sp-header-divider,
	.sp-nav-toggle,
	.sp-nav-mobile,
	.sp-divider {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
		font-size: 12pt;
	}

	.sp-panel {
		border: 1px solid #ccc;
		box-shadow: none;
	}

	.sp-panel__bar {
		width: 6px;
		background-color: #999 !important;
	}

	.sp-card {
		border: 1px solid #ccc;
		box-shadow: none;
	}

	.sp-card:hover {
		transform: none;
	}

	a[href]::after {
		content: " (" attr(href) ")";
		font-size: 10pt;
		color: #666;
	}
}