/* 
 * RESPONSIVE BREAKPOINT CONFIGURATION
 * Mobile/Tablet: < 1350px
 * Desktop: >= 1350px
 */

/* === Layout & Container === */
html, body {
	height: 100%;
	margin: 0;
	overflow: hidden;
	background-color: #f8f9fa;
}

.main-container {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.content-container {
	flex: 1;
	display: flex;
	overflow: hidden;
}

/* === Navbar === */
.navbar {
	flex-shrink: 0;
}

.custom-nav {
	padding-left: 1rem !important;
	padding-right: 1rem !important;
	position: relative;
}

.dok-header {
	font-size: var(--bs-navbar-brand-font-size, 1.25rem);
	font-weight: var(--bs-navbar-brand-font-weight, 500);
	line-height: var(--bs-navbar-brand-line-height, 1.2);
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: calc(25% + 1rem);
}

/* === Sidebar === */
.sidebar {
	width: 25%;
	flex-shrink: 0;
	padding: 1rem;
	padding-top: 0;
	background-color: #f8f9fa;
	overflow-y: auto;
}

.sidebar .row {
	align-items: start;
}

.sidebar dt {
	font-weight: 600;
}

.sidebar .card-body {
	padding-left: 1.1rem;
	padding-right: 1.25rem;
}

.sidebar .card-body dl.decision-details-grid {
	display: grid;
	grid-template-columns: max-content 1fr;
	column-gap: 1rem;
	row-gap: 0.5rem;
	margin: 0;
	padding-bottom: 0.75rem;
}

.sidebar .card-body dl.decision-details-grid dt {
	font-weight: 600;
	text-align: right;
	margin: 0;
}

.sidebar .card-body dl.decision-details-grid dd {
	margin: 0;
}

/* === Card === */
.card-header.bg-light {
	background-color: #e9ecef !important;
}

.card-body-compact {
	padding: 0.5rem !important;
}

/* === Content === */
.content-scroll {
	flex: 1;
	padding: 1rem;
	padding-top: 10px;
	overflow-y: auto;
	background-color: #ffffff;
	border: 1px solid #D2D2D2;
	border-radius: 0.375rem;
}

/* === Metadata Links === */
.metadata-link {
	color: #0d6efd;
	text-decoration: none;
	cursor: pointer;
}

.metadata-link:hover {
	text-decoration: underline;
}

/* ============================================
 * RESPONSIVE STYLES - BREAKPOINT: 1349px
 * Change the value below to adjust breakpoint
 * ============================================ */
@media (max-width: 1349px) {
	/* === Intelligente Schriftgrößen-Skalierung === */
	html {
		font-size: clamp(16px, 4vw, 18px);
	}
	
	/* Layout & Container */
	html, body {
		overflow: visible;
		height: auto;
		min-height: 100%;
	}
	
	.main-container {
		height: auto;
		min-height: 100vh;
	}
	
	.content-container {
		flex-direction: column;
		overflow: visible;
		flex: 1 1 auto;
	}
	
	/* Navbar */
	.navbar {
		position: sticky;
		top: 0;
		z-index: 1000;
		padding: 0.75rem 0;
	}
	
	.navbar-brand {
		font-size: 1.3rem;
	}
	
	.dok-header {
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 1.1rem;
	}
	
	/* Sidebar */
	.sidebar {
		width: 100%;
		max-height: none;
		flex: 0 0 auto;
		overflow-y: visible;
		overflow-x: hidden;
		padding: 1rem;
	}
	
	.sidebar .card-body {
		padding: 1rem !important;
	}
	
	/* Card Header */
	.card-header {
		font-size: 1.1rem;
		font-weight: 600;
		padding: 0.75rem 1rem;
	}
	
	/* Metadaten Grid - bessere Touch-Abstände */
	.sidebar .card-body dl.decision-details-grid {
		column-gap: 1rem;
		row-gap: 0.75rem;
		font-size: 1rem;
	}
	
	.sidebar .card-body dl.decision-details-grid dt {
		font-size: 1rem;
	}
	
	.sidebar .card-body dl.decision-details-grid dd {
		font-size: 1rem;
		line-height: 1.5;
	}
	
	/* Metadaten-Links */
	.metadata-link {
		display: inline-block;
		display: inline-flex;
		align-items: center;
	}
	
	/* Button zurück zur Suche */
	.card-body-compact .btn {
		font-size: 1rem;
		padding: 0.75rem 1rem;
		min-height: 44px;
	}
	
	/* Content */
	.content-scroll {
		flex: none;
		overflow-y: visible;
		overflow-x: visible;
		min-height: 0;
		height: auto;
		padding: 1rem;
		padding-bottom: 3rem;
		font-size: 1rem;
		line-height: 1.6;
	}
	
	/* Überschriften im Volltext */
	.content-scroll h5 {
		font-size: 1.2rem;
		margin-top: 1.5rem;
		margin-bottom: 0.75rem;
	}
	
	.content-scroll h5:first-child {
		margin-top: 0;
	}
	
	/* Alert (Kein Volltext) */
	.content-scroll .alert {
		font-size: 1rem;
		padding: 1rem;
	}
	
	/* Druck-Button */
	.content-scroll .btn {
		font-size: 1rem;
		padding: 0.75rem 1.5rem;
		min-height: 44px;
	}
}

/* === Noch kleinere Geräte (< 400px) === */
@media (max-width: 399px) {
	html {
		font-size: 17px;
	}
	
	.sidebar {
		padding: 0.75rem;
	}
	
	.sidebar .card-body {
		padding: 0.75rem !important;
	}
	
	.content-scroll {
		padding: 0.75rem;
	}
	
	.sidebar .card-body dl.decision-details-grid {
		column-gap: 0.75rem;
		row-gap: 0.5rem;
	}
}

/* ============================================
 * PRINT STYLES
 * Wird am Ende von view.css ergänzt
 * ============================================ */
@media print {
	/* === Basis-Einstellungen === */
	* {
		-webkit-print-color-adjust: exact !important;
		print-color-adjust: exact !important;
	}
	
	body {
		background-color: #ffffff !important;
	}
	
	/* === Links nicht blau, keine Unterstreichung === */
	a {
		color: #000000 !important;
		text-decoration: none !important;
	}
	
	/* === Buttons komplett ausblenden === */
	.btn,
	button {
		display: none !important;
	}
	
	/* === Card mit "Zurück zur Suche" Button ausblenden === */
	.sidebar .card:last-child {
		display: none !important;
	}
	
	/* === Navbar optimieren === */
	.navbar {
		padding: 0.5rem 0 !important;
		border-bottom: 2px solid #000;
		margin-bottom: 0.5cm;
	}
	
	.navbar-brand {
		font-size: 1rem !important;
		font-weight: 600;
	}
	
	.dok-header {
		font-size: 0.95rem !important;
	}
	
	/* === Sidebar/Metadaten kompakt === */
	.sidebar {
		padding: 0 !important;
		margin-bottom: 0.5cm;
	}
	
	.sidebar .card {
		border: 1px solid #000 !important;
		box-shadow: none !important;
		page-break-inside: avoid; /* Metadaten nicht umbrechen */
		margin-bottom: 0 !important; /* Kein grauer Streifen darunter */
	}
	
	.sidebar .card-header {
		font-size: 0.8rem !important;
		font-weight: 600 !important;
		padding: 0.4rem 0.6rem !important;
		background-color: #f0f0f0 !important;
		border-bottom: 1px solid #000 !important;
	}
	
	.sidebar .card-body {
		padding: 0.5rem 0.6rem 0.3rem 0.6rem !important;
	}
	
	/* === Metadaten Grid - kompakte Zeilenabstände === */
	.sidebar .card-body dl.decision-details-grid {
		row-gap: 0.15rem !important; /* Sehr knapp */
		column-gap: 0.8rem !important;
		font-size: 0.7rem !important;
		line-height: 1.3 !important;
		margin-bottom: 0.3rem !important;
		padding-bottom: 0rem !important; 
	}
	
	.sidebar .card-body dl.decision-details-grid dt {
		font-size: 0.7rem !important;
		font-weight: 600 !important;
	}
	
	.sidebar .card-body dl.decision-details-grid dd {
		font-size: 0.7rem !important;
		line-height: 1.3 !important;
		margin-bottom: 0 !important;
	}
	
	/* === Content/Volltext === */
	.content-scroll {
		padding: 0 !important;
		font-size: 0.7rem !important;
		line-height: 1.5 !important;
	}
	
	/* === Überschriften im Volltext === */
	.content-scroll h5 {
		font-size: 0.8rem !important;
		font-weight: 700 !important;
		margin-top: 0.8cm !important;
		margin-bottom: 0.3cm !important;
		page-break-after: avoid; /* Überschrift nicht von Text trennen */
	}
	
	.content-scroll h5:first-child {
		margin-top: 0 !important;
	}
	
	/* === Seitenumbruch-Kontrolle === */
	.sidebar .card-body dl.decision-details-grid {
		page-break-inside: avoid; /* Grid nicht umbrechen */
	}
	
	/* Verhindere "Schusterjungen" und "Hurenkinder" */
	p {
		orphans: 3;
		widows: 3;
	}
	
	/* === Alert (falls kein Volltext) === */
	.alert {
		border: 1px solid #000 !important;
		background-color: #f8f8f8 !important;
		padding: 0.5rem !important;
		font-size: 0.85rem !important;
	}
	
	/* === Optional: Fußzeile mit Datum/Uhrzeit === */
	@page {
		margin: 1.5cm 2cm;
		
		@bottom-right {
			content: "Seite: " counter(page);
		}
	}
}

/* === Noch kompaktere Variante für mehrseitige Dokumente === */
@media print {
	@page {
		size: A4 portrait;
	}
	
	/* Falls Sie später A4 Querformat bevorzugen: */
	/* @page { size: A4 landscape; } */
}