/* ============================================================================
   Anpassung an die Bildschirmgröße (Handy, Tablet, PC, sehr breite Bildschirme)
   ----------------------------------------------------------------------------
   Das Layout der Website ist auf eine feste Breite von 980 Pixeln gebaut.
   - unter 980 px: Layout fließt in Fensterbreite (Kopf, Inhalt, Fuß)
   - ab 700 px: Slider der Startseite mit Text links und vollständigem Kreisbild rechts,
     an der Fensterbreite ausgerichtet (unter 700 px: Kreisbild oben, Text darunter)
   - ab 1921 px: Hintergründe reichen bis zum Fensterrand
   ============================================================================ */

@media screen and (max-width: 979px) {

	/* ----- Grundgerüst: feste Breiten aufheben ----- */

	body { overflow-x: hidden; }

	.bsc_body,
	.bsc_container,
	.bsc_container2,
	.bsc_footer { min-width: 0; }

	.bsc_body-center,
	.bsc_subcontainer,
	.bsc_subcontainer2,
	.bsc_subfooter { width: auto; }

	.bsc_subcontainer,
	.bsc_subcontainer2,
	.bsc_subfooter { min-height: 0; }

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

	/* Hintergrund-Ebenen sind auf 980 Pixel zugeschnitten: links/rechts ausblenden,
	   Mitte auf volle Breite ziehen (die Bilder sind waagerecht gleichförmig) */
	.bsc_bgr-body-left, .bsc_bgr-body-right,
	.bsc_bgr2-top-left, .bsc_bgr2-top-right,
	.bsc_bgr2-center-left, .bsc_bgr2-center-right,
	.bsc_bgr2-bottom-left, .bsc_bgr2-bottom-right { display: none; }

	.bsc_bgr-body-center,
	.bsc_bgr2-top-center,
	.bsc_bgr2-center-center,
	.bsc_bgr2-bottom-center { left: 0; width: 100%; }

	/* Kopf- und Inhaltshintergrund (mit fest eingezeichnetem Logo) ersetzen
	   wir durch Farbflächen an den einzelnen Elementen */
	.bsc_bgr-top-left, .bsc_bgr-top-center, .bsc_bgr-top-right,
	.bsc_bgr-center-left, .bsc_bgr-center-center, .bsc_bgr-center-right,
	.bsc_bgr-bottom-left, .bsc_bgr-bottom-center, .bsc_bgr-bottom-right { display: none; }


	/* ----- Kopfbereich: Elemente untereinander statt fest positioniert ----- */

	/* Im PC-Layout liegt der Kopf absolut über dem Inhalt (Platz wird per padding-top
	   freigehalten) - hier fließt er ganz normal oberhalb des Inhalts */
	.bsc_contentbox1 {
		position: relative;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	.bsc_contentbox1 > [class*="_gap"] { display: none; }

	.bsc_contentbox1 > [class*="bsc_box1_pos"] {
		position: relative;
		left: auto; right: auto; top: auto;
	}

	.bsc_contentbox1 > [class*="bsc_box1_pos"] > [class*="bsc_box1_size"] {
		width: auto;
		height: auto;
	}

	/* Reihenfolge: Ticker, Logo, Menü, Überschrift/Slider, Brotkrumen */
	.bsc_box1_pos4 { order: 1; }
	.bsc_box1_pos1 { order: 2; }
	.bsc_box1_pos2 { order: 3; }
	.bsc_box1_pos3 { order: 4; }
	.bsc_box1_pos6 { order: 5; }
	.bsc_box1_pos5 { order: 6; }

	/* Ticker-Band */
	.bsc_box1_pos4 {
		background-color: rgba(0, 0, 0, 0.6);
		height: 40px;
		overflow: hidden;
	}
	.bsc_contentbox1 > .bsc_box1_pos4 > .bsc_box1_size4 { height: 40px; padding: 0 15px; }
	.bsc_box1_size4 .mdl_ticker_box { width: auto; }

	/* Logo (als eigenes Bild, im PC-Layout ist es Teil des Hintergrunds) */
	.bsc_box1_pos1 {
		background-color: #fff;
		padding: 20px 15px 10px 15px;
	}
	.bsc_box1_size1 .plg_link {
		height: 39px;
		background: url(../pic/rsp_logo.png) no-repeat left center;
		background-size: contain;
		max-width: 497px;
	}

	/* Hauptmenü */
	.bsc_box1_pos2 {
		background-color: #fff;
		padding: 5px 15px 15px 15px;
	}
	.bsc_box1_pos2 .nm1_align { float: none; }

	/* Überschrift der Unterseiten (Stein-Band) */
	.bsc_box1_pos3 .plg_hdl_box1 > h1 {
		padding: 25px 15px 20px 15px;
		font-size: 30px;
		line-height: 36px;
		text-align: left;
	}

	/* Brotkrumen-Leiste */
	.bsc_box1_pos6 { background-color: #4c4c4c; }
	.bsc_box1_size6 { padding: 0 15px; }


	/* ----- Inhaltsbereich ----- */

	.bsc_maincontent {
		padding: 30px 20px 30px 20px;
		background-color: #fff;
	}

	.bsc_contentbox2,
	.bsc_contentbox3,
	.bsc_contentbox4 {
		float: none;
		width: auto;
		margin-right: 0;
	}

	/* Text und Bild nebeneinander (Tabelle) -> untereinander */
	.cnt_table,
	.cnt_table > tbody,
	.cnt_table > tbody > tr,
	.cnt_table > tbody > tr > td,
	.cnt_table > tr,
	.cnt_table > tr > td {
		display: block;
		width: auto;
	}
	.cnt_pos1, .cnt_pos2 { display: none !important; }
	.cnt_img_cell {
		width: auto !important;			/* Breite steht im HTML (style="width:450px") */
		padding-top: 20px;
		text-align: center;
	}
	.cnt_img_cell .cnt_b1 {
		display: inline-block;
		max-width: 100%;
	}

	/* Drei Kacheln (Kreise mit Text) */
	.nct_table,
	.nct_table > tbody,
	.nct_table > tbody > tr,
	.nct_table > tr {
		display: block;
		width: auto;
	}
	.nct_table td.nct_column_between { display: none; }

	/* Kacheln: Tablet zwei bis drei nebeneinander, Handy untereinander */
	.nct_table > tbody > tr,
	.nct_table > tr {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 30px 20px;
	}
	.nct_table td.nct_column {
		display: block;
		width: 250px;
		max-width: 100%;
	}
	.nct_table .nct_dis {
		float: none;
		padding-right: 0;
		display: block;
		text-align: center;
	}
	.nct_table .nct_pic { margin: 0 auto; max-width: 100%; }


	/* ----- Themen rund um den Naturstein (4 Spalten) ----- */

	.bsc_contentbox5 { padding: 30px 20px; }
	.bsc_box5_pos1 { position: static; }
	.bsc_box5_size1 { width: auto; }
	.nh1_list { width: 50%; }


	/* ----- Fußbereich (Kontakt, Links, Copyright) ----- */

	.bsc_box6_pos4 { display: none; }		/* Motiv (Wolf) rechts neben dem Fuß */

	/* Hintergrundbild des Fußes hat feste Höhe (blau oben, dunkel unten) -> Farbflächen */
	.bsc_bgr-footer-left, .bsc_bgr-footer-center, .bsc_bgr-footer-right { display: none; }
	.bsc_footer { background-color: #1a1a1a; }

	.bsc_contentbox6 { padding: 0 20px 20px 20px; }

	/* Kontaktblock auf blauem Band über die volle Breite */
	.bsc_contentbox6 > .bsc_box6_pos1 {
		background-color: #007bbd;
		margin: 0 -20px;
		padding: 30px 20px;
	}

	.bsc_contentbox6 > [class*="_gap"] { display: none; }

	.bsc_contentbox6 > [class*="bsc_box6_pos"] {
		position: static;
	}
	.bsc_contentbox6 > [class*="bsc_box6_pos"] > [class*="bsc_box6_size"] {
		width: auto;
		height: auto;
	}

	/* Kontaktblock: Adresse, darunter Bezeichnung + Wert nebeneinander, darunter Schaltfläche */
	.plg_contact {
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 15px;
		row-gap: 5px;
	}
	.plg_contact > div,
	.plg_contact > a,
	.plg_contact > div > a {
		position: static !important;
	}
	.plg_contact > .row01 { grid-column: 1 / -1; width: auto; padding-bottom: 15px; }
	.plg_contact > .row02 { grid-column: 1; width: auto; }
	.plg_contact > .row03 { grid-column: 2; width: auto; }
	.plg_contact > .row04,
	.plg_contact > .row05,
	.plg_contact > .row06 { grid-column: 1 / -1; width: auto; }
	.plg_contact > .row04:empty,
	.plg_contact > .row05:empty,
	.plg_contact > .row06:empty { display: none; }
	.plg_contact > .row03 > a { display: inline; }
	.plg_contact > .button01 {
		grid-column: 1 / -1;
		width: auto;
		max-width: 345px;
		margin-top: 25px;
		text-align: center;
	}

	.bsc_box6_pos2,
	.bsc_box6_pos3 { padding-top: 25px; }

	.plg_static_nav3,
	.plg_static_nav3 a,
	.plg_credits1,
	.plg_credits1 a { text-align: left; }
}


/* ----- Tablet (700 bis 979 Pixel): Slider der Startseite mittig wie am PC ----- */

@media screen and (min-width: 700px) and (max-width: 979px) {

	.bsc_box1_pos3:has(.nh2_container) {
		background: url(../../../startseite/basic/pic/bsc_mainbgr.jpg) center top / cover;
	}
	.bsc_box1_pos3 .nh2_container {
		position: relative;
	}
	.bsc_contentbox1 > .bsc_box1_pos3 > .bsc_box1_size3:has(.nh2_container) {
		position: relative;
		left: 50%;
		width: 1920px;
		height: 510px;
		margin-left: -960px;
	}
}


/* ----- Tablet und PC (ab 700 Pixel): Slider der Startseite mit vollständigem Kreisbild -----
   In den Original-Grafiken ist der Kreis unten abgeschnitten (die Grafik endet bei 510 px) und
   steht fest an einer Stelle der 1920 px breiten Folie. Hier wird alles an der Fensterbreite
   ausgerichtet: Text und Schaltfläche links, rechts daneben das Kreisbild - immer vollständig.
   Die Mitte der Folie (x = 960 px) liegt immer in der Fenstermitte. */

@media screen and (min-width: 700px) {

	.bsc_box1_size3 .nh2_container {
		--rsp-w: min(920px, calc(100vw - 60px));				/* Breite der Anordnung (Text + Kreis) */
		--rsp-d: min(432px, calc(var(--rsp-w) - 360px));		/* Durchmesser des Kreisbilds */
		--rsp-r: 8px;											/* weißer Rand des Kreises */
		--rsp-l: calc(960px - var(--rsp-w) / 2);				/* linke Kante der Anordnung in der Folie */
		--rsp-tb: min(420px, calc(var(--rsp-w) - var(--rsp-d) - 2 * var(--rsp-r) - 40px));	/* Textbreite */
	}

	/* Kreisbild: Das Originalbild bleibt außer Sicht, ein Pseudo-Element übernimmt es (inherit)
	   und zeigt den größten vollständigen Kreis, der im Foto Platz hat (Mitte x 1186, y 291, Ø 432). */
	.bsc_box1_size3 .nh2_pic { background-position: -5000px 0 !important; }
	.bsc_box1_size3 .nh2_pic::before {
		content: "";
		position: absolute;
		left: calc(960px + var(--rsp-w) / 2 - var(--rsp-d) - 2 * var(--rsp-r));
		top: calc((510px - var(--rsp-d)) / 2 - var(--rsp-r));
		width: var(--rsp-d);
		height: var(--rsp-d);
		border: var(--rsp-r) solid #fff;
		border-radius: 50%;
		box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
		background-image: inherit;
		background-repeat: no-repeat;
		background-size: calc(var(--rsp-d) * 4.4445) auto;			/* 1920 / 432 */
		background-position: calc(var(--rsp-d) * -2.2454) calc(var(--rsp-d) * -0.1736);	/* -970/432, -75/432 */
	}

	/* Text und Schaltfläche links */
	.bsc_box1_size3 .nh2_text-headline1,
	.bsc_box1_size3 .nh2_text-description {
		padding-left: var(--rsp-l);
		width: var(--rsp-tb);
		max-height: none;
	}
	.bsc_box1_size3 .nh2_text-headline1 {
		font-size: clamp(30px, calc(10px + 2.86vw), 38px);
		line-height: 1.05;
	}
	.bsc_box1_size3 .nh2_box_linkbutton { left: var(--rsp-l); }

	/* Pfeile unter der Schaltfläche (bei breiten Fenstern: links und rechts außen, siehe unten) */
	.bsc_box1_size3 .nh2_nav-prev,
	.bsc_box1_size3 .nh2_nav-prev-inactive,
	.bsc_box1_size3 .nh2_nav-next,
	.bsc_box1_size3 .nh2_nav-next-inactive {
		top: 420px;
		right: auto;
	}
	.bsc_box1_size3 .nh2_nav-prev,
	.bsc_box1_size3 .nh2_nav-prev-inactive { left: calc(var(--rsp-l) - 20px); }
	.bsc_box1_size3 .nh2_nav-next,
	.bsc_box1_size3 .nh2_nav-next-inactive { left: calc(var(--rsp-l) + 60px); }
}

@media screen and (min-width: 700px) and (max-width: 979px) {
	/* schmalere Textspalte -> mehr Zeilen: Text etwas höher beginnen, damit Abstand zur Schaltfläche bleibt */
	.bsc_box1_size3 .nh2_text-headline1 { padding-top: 70px; }
}

@media screen and (min-width: 1140px) {
	.bsc_box1_size3 .nh2_nav-prev,
	.bsc_box1_size3 .nh2_nav-prev-inactive,
	.bsc_box1_size3 .nh2_nav-next,
	.bsc_box1_size3 .nh2_nav-next-inactive { top: 215px; }
	.bsc_box1_size3 .nh2_nav-prev,
	.bsc_box1_size3 .nh2_nav-prev-inactive { left: calc(var(--rsp-l) - 100px); }
	.bsc_box1_size3 .nh2_nav-next,
	.bsc_box1_size3 .nh2_nav-next-inactive { left: calc(960px + var(--rsp-w) / 2 + 20px); }
}


/* ----- Sehr breite Bildschirme (ab 1921 Pixel) -----
   Alle Hintergrundbilder sind 1920 px breit; rechts und links davon war bisher nur Grau.
   Die Hintergrund-Ebenen links/rechts reichen jetzt bis zum Fensterrand. Dort wird nur der
   gleichförmige linke Rand der Bilder (ohne Logo) waagerecht stark gestreckt (1920 -> 192000 px),
   das Steinbild wird auf Fensterbreite gezogen. */

@media screen and (min-width: 1921px) {

	.bsc_bgr-body-left, .bsc_bgr-top-left, .bsc_bgr-center-left, .bsc_bgr-bottom-left,
	.bsc_bgr2-top-left, .bsc_bgr2-center-left, .bsc_bgr2-bottom-left, .bsc_bgr-footer-left {
		left: calc(490px - 50vw);
	}
	.bsc_bgr-body-left, .bsc_bgr-top-left, .bsc_bgr-center-left, .bsc_bgr-bottom-left,
	.bsc_bgr2-top-left, .bsc_bgr2-center-left, .bsc_bgr2-bottom-left, .bsc_bgr-footer-left,
	.bsc_bgr-body-right, .bsc_bgr-top-right, .bsc_bgr-center-right, .bsc_bgr-bottom-right,
	.bsc_bgr2-top-right, .bsc_bgr2-center-right, .bsc_bgr2-bottom-right, .bsc_bgr-footer-right {
		width: calc(50vw - 490px);
		background-position: 0 top;
	}
	.bsc_bgr-body-left, .bsc_bgr-body-right,
	.bsc_bgr-center-left, .bsc_bgr-center-right { background-size: 192000px 20px; }
	.bsc_bgr-top-left, .bsc_bgr-top-right { background-size: 192000px 660px; }
	.bsc_bgr-bottom-left, .bsc_bgr-bottom-right,
	.bsc_bgr2-top-left, .bsc_bgr2-top-right,
	.bsc_bgr2-bottom-left, .bsc_bgr2-bottom-right { background-size: 192000px 100px; }
	.bsc_bgr2-center-left, .bsc_bgr2-center-right { background-size: 192000px 30px; }
	.bsc_bgr-footer-left, .bsc_bgr-footer-right { background-size: 192000px 250px; }

	.bsc_container { background-size: 100% auto; }
	.bsc_container2 { background-size: 100% 50px; }
}


/* ----- Handy (bis 699 Pixel) ----- */

@media screen and (max-width: 699px) {

	/* ----- Slider der Startseite: Bild oben, Text und Schaltfläche darunter -----
	   Jede Folie ist 1920 px breit (die Animation verschiebt in diesen Schritten) - davon wird
	   ab x = 485 px ein Ausschnitt in Bildschirmbreite gezeigt. Darin ordnen wir neu an:
	   - Kreisbild: runder Ausschnitt aus der Mitte des Fotos, Größe passt sich an (--rsp-d)
	   - Pfeile links und rechts neben dem Kreis
	   - Überschrift, Text und Schaltfläche darunter in voller Größe */
	.bsc_box1_pos3:has(.nh2_container) {
		--rsp-d: min(190px, calc(100vw - 190px));	/* Durchmesser des Kreisbilds */
		--rsp-kreis-oben: 25px;
		background: url(../../../startseite/basic/pic/bsc_mainbgr.jpg) center top / cover;
	}
	.bsc_contentbox1 > .bsc_box1_pos3 > .bsc_box1_size3:has(.nh2_container) {
		width: 1920px;
		height: 560px;
		margin-left: -485px;
	}
	.bsc_box1_size3 .nh2_animator_pos,
	.bsc_box1_size3 .nh2_box_slider-horizontal { height: 560px; }

	/* Kreisbild: Das Originalbild bleibt außer Sicht, ein Pseudo-Element übernimmt es (inherit)
	   und zeigt einen runden Ausschnitt um den Kreismittelpunkt (x 1186, y 328, Radius 180). */
	.bsc_box1_size3 .nh2_pic { background-position: -5000px 0 !important; }
	.bsc_box1_size3 .nh2_pic::before {
		content: "";
		position: absolute;
		left: calc(485px + 50vw - var(--rsp-d) / 2 - 5px);
		top: var(--rsp-kreis-oben);
		width: var(--rsp-d);
		height: var(--rsp-d);
		border: 5px solid #fff;
		border-radius: 50%;
		box-shadow: 0 0 20px rgba(0, 0, 0, 0.45);
		background-image: inherit;
		background-repeat: no-repeat;
		background-size: calc(var(--rsp-d) * 5.3334) auto;			/* 1920 / 360 */
		background-position: calc(var(--rsp-d) * -2.7945) calc(var(--rsp-d) * -0.4112);	/* -1006/360, -148/360 */
	}

	/* Text und Schaltfläche mittig unter dem Kreis */
	.bsc_box1_pos3:has(.nh2_container) { --rsp-tb: min(420px, calc(100vw - 30px)); }	/* Textbreite */
	.bsc_box1_size3 .nh2_text-headline1,
	.bsc_box1_size3 .nh2_text-description {
		padding-left: calc(485px + (100vw - var(--rsp-tb)) / 2);
		width: var(--rsp-tb);
		max-height: none;
		text-align: center;
	}
	.bsc_box1_size3 .nh2_text-headline1 {
		padding-top: calc(var(--rsp-kreis-oben) + var(--rsp-d) + 35px);
		font-size: 28px;
		line-height: 32px;
	}
	.bsc_box1_size3 .nh2_text-description {
		padding-top: 15px;
		font-size: 16px;
		line-height: 21px;
	}
	.bsc_box1_size3 .nh2_box_linkbutton {				/* Breite (280 px) bleibt - Rahmen ist Teil der Grafik */
		left: calc(485px + 50vw - 140px);
		bottom: 30px;
	}

	.bsc_box1_size3 .nh2_nav-prev,
	.bsc_box1_size3 .nh2_nav-prev-inactive,
	.bsc_box1_size3 .nh2_nav-next,
	.bsc_box1_size3 .nh2_nav-next-inactive {
		top: calc(var(--rsp-kreis-oben) + var(--rsp-d) / 2 + 5px - 40px);
	}
	.bsc_box1_size3 .nh2_nav-prev,
	.bsc_box1_size3 .nh2_nav-prev-inactive {
		left: calc(485px + 50vw - var(--rsp-d) / 2 - 5px - 90px);
	}
	.bsc_box1_size3 .nh2_nav-next,
	.bsc_box1_size3 .nh2_nav-next-inactive {
		left: calc(485px + 50vw + var(--rsp-d) / 2 + 5px + 10px);
	}

	/* Menü: kleinere Schrift, damit die Punkte nebeneinander passen */
	.bsc_box1_pos2 .nm1_normal,
	.bsc_box1_pos2 .nm1_aktiv { font-size: 16px; }
	.bsc_box1_pos2 .nm1_spacer { width: 14px; }

	.bsc_box1_pos3 .plg_hdl_box1 > h1 {
		font-size: 24px;
		line-height: 30px;
	}

	.bsc_maincontent { padding: 25px 15px; }

	.nh1_list { width: 100%; }
	.bsc_contentbox5 { padding: 25px 15px; }
	.bsc_contentbox6 { padding: 25px 15px 20px 15px; }
}


/* ----- Sehr schmale Handys (bis 359 Pixel) ----- */

@media screen and (max-width: 359px) {
	.bsc_box1_pos2 .nm1_normal,
	.bsc_box1_pos2 .nm1_aktiv { font-size: 14px; }
	.bsc_box1_pos2 .nm1_spacer { width: 10px; }
}