/**
 * Progressive responsive overlay for Akkreditierungsportal.
 * Desktop layout stays classic (no global box-sizing / width overrides).
 * Rules apply only inside narrow-viewport media queries.
 * Loaded after akkreditierung.css / adac.css.
 */

@media screen and (max-width: 1024px) {
	html {
		overflow-x: hidden;
	}

	img,
	video,
	iframe {
		max-width: 100%;
		height: auto;
	}

	#wrapper,
	.content_cms,
	#content,
	.main_content {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	#top_links {
		position: static !important;
		text-align: right;
		padding: 8px 12px 0;
	}

	#lang_select {
		position: static !important;
		padding: 4px 12px;
	}

	#logo {
		margin-left: 12px;
		margin-right: 12px;
	}

	.content_front #online_entry_content,
	.content_cms #online_entry_content {
		width: calc(100% - 200px) !important;
		max-width: 100% !important;
	}

	.header_top {
		width: calc(100% - 200px) !important;
		max-width: 100% !important;
		background-size: cover !important;
	}
}

@media screen and (max-width: 768px) {
	body {
		background-size: cover !important;
		background-attachment: scroll !important;
	}

	#wrapper,
	.content_cms {
		padding: 0 10px !important;
		overflow-x: hidden;
	}

	/* Stack absolute sidebar → flow layout (portal + CMS) */
	#left_content {
		position: static !important;
		width: 100% !important;
		left: auto !important;
		top: auto !important;
		margin: 0 0 12px !important;
	}

	#menu {
		width: 100% !important;
		display: block;
		border-bottom: 1px solid #f0f0f0;
	}

	#menu a.menu_link:link,
	#menu a.menu_link:visited,
	#menu a.menu_link:active,
	#menu a.menu_link:hover,
	#menu a.level0,
	#menu a.level0_active,
	#menu a.active {
		display: block !important;
		width: 100% !important;
		box-sizing: border-box !important;
		padding: 10px 12px !important;
		margin: 0 0 2px !important;
		float: none !important;
		position: relative !important;
		left: auto !important;
		top: auto !important;
	}

	.header_top,
	.pmenu,
	.content_front #online_entry_content,
	.content_cms #online_entry_content {
		margin-left: 0 !important;
		margin-right: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		float: none !important;
	}

	.header_top {
		height: auto !important;
		min-height: 80px;
		background-size: cover !important;
		background-position: left center !important;
	}

	#online_entry_content {
		float: none !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 0 12px !important;
		padding: 8px !important;
		position: relative !important;
		left: auto !important;
		height: auto !important;
	}

	table.accr_table,
	table.form_table,
	#accr_table_content table,
	form table,
	#online_entry_content table {
		display: block;
		width: 100% !important;
		max-width: 100% !important;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Login / simple forms: label above field */
	#online_entry_content form table tr,
	#online_entry_content form table tbody,
	#online_entry_content form table {
		display: block;
		width: 100% !important;
	}

	#online_entry_content form table tr {
		margin-bottom: 10px;
	}

	#online_entry_content form table td,
	#online_entry_content form table th {
		display: block;
		width: 100% !important;
		max-width: 100% !important;
		text-align: left !important;
		padding: 2px 0 !important;
	}

	#online_entry_content form input[type="text"],
	#online_entry_content form input[type="password"],
	#online_entry_content form input[type="email"],
	#online_entry_content form select,
	#online_entry_content form textarea {
		width: 100% !important;
		max-width: 100% !important;
	}

	h1, h2, h3, .subhead {
		overflow-wrap: break-word;
		word-break: normal;
		hyphens: none;
	}

	/* Desktop login title uses huge left margin — unusable on phone */
	.login_headline,
	h1.login_headline {
		margin: 24px 0 16px 0 !important;
		width: auto !important;
		max-width: 100% !important;
	}

	.login_message,
	.medium_desc,
	.submit_btn,
	#accr_file_status_form #accr_request_documents_submit.submit_btn {
		margin-left: 0 !important;
		padding-left: 0 !important;
	}

	.submit_btn {
		margin-top: 12px !important;
	}

	input[type="text"],
	input[type="password"],
	input[type="email"],
	input[type="tel"],
	input[type="number"],
	input[type="file"],
	input[type="submit"],
	input[type="button"],
	select,
	textarea,
	button {
		max-width: 100%;
		box-sizing: border-box;
		font-size: 16px; /* avoid iOS zoom */
	}

	#top_links a {
		display: inline-block;
		margin: 4px 8px 4px 0 !important;
	}

	.form_row,
	.field_row,
	.form_field_row {
		display: block;
		width: 100% !important;
	}

	a.btn_show,
	a.btn_delete,
	input.btn,
	.btn_submit,
	.submit_btn {
		display: inline-block;
		margin: 4px 6px 4px 0;
		white-space: normal;
	}

	.submit_documents_box .submit_btn,
	.submit_btn_inline,
	.submit_btn_inline_fright {
		display: inline-block !important;
		margin: 4px 6px 4px 0 !important;
		float: none !important;
	}

	#content img,
	.content_cms img,
	.user_photo,
	.user_photo_form {
		max-width: 100%;
		height: auto;
	}

	/* Fancybox / overlays: keep within viewport */
	.fancybox__container,
	.fancybox-container {
		max-width: 100vw;
	}
}

@media screen and (max-width: 480px) {
	#logo,
	#logo a,
	.logo_link {
		font-size: 18px !important;
		padding-left: 0 !important;
		background-size: contain;
	}

	h1, h2, h3, .subhead {
		word-wrap: break-word;
		overflow-wrap: break-word;
	}

	#menu a.menu_link:link,
	#menu a.menu_link:visited,
	#menu a.level0,
	#menu a.active {
		font-size: 15px !important;
		padding: 11px 12px !important;
	}

	.header_top {
		min-height: 64px;
	}

	td, th {
		overflow-wrap: break-word;
	}
}