/*
====================================================
Roxy Rings – Website
Version: 1.0
Stand: Juli 2026

Datei:
- variables.css = Design Tokens
- design.css = Basislayout
- responsive.css = Geräteanpassungen
====================================================
*/


/* ================================================= */
/* RESPONSIVE SYSTEM                                 */
/* ================================================= */
/*
   Breakpoints (Mobile-First-Logik, von unten nach oben):

   (1) Mobile Portrait:    max-width: 600px  + portrait
   (2) Mobile Landscape:   max-width: 900px  + landscape
   (3) Tablet Portrait:    601px – 900px     + portrait
   (4) Desktop:            > 900px           (Basis, kein Media Query)
   (5) Print

   Shrink-Padding-Regel:
   Normal- und Shrink-Zustand erhalten immer dasselbe
   horizontale Padding – kein gesonderter Shrink-Override nötig.
*/


/* --------------------------------------------------- */
/* (1) MOBILE PORTRAIT  (≤ 600px, portrait)            */
/* --------------------------------------------------- */

@media (max-width: 600px) and (orientation: portrait) {
	
	/* Breakpoint-Variablen */
	:root {
		--bg-leaf-size:			var(--bg-leaf-size-mobile-portrait);
		--bg-flower-size:		var(--bg-flower-size-mobile-portrait);
		--content-width:		var(--content-width-mobile-portrait);
		--content-image-scale:	var(--content-image-scale-mobile-portrait);
    }

	/* Header + Navi */
	#box-header,
	#box-navi,
	#top-bar.shrink #box-header,
	#top-bar.shrink #box-navi {
		padding-left:  var(--pad-mobile);
		padding-right: var(--pad-mobile);
	}
	

	/* Content */
	#box-content {
		padding-left:  var(--pad-mobile-content);
		padding-right: var(--pad-mobile-content);
	}

	/* Footer */
	#box-footer {
		padding-left:  var(--pad-footer-mobile);
		padding-right: var(--pad-footer-mobile);
	}
	
	#box-content img.profilbild {
		width: 120px;
		max-width: 26%;
	}

	/* Logo */
	.style1,
	.style11 {
		font-size: var(--logo-size-mobile);
	}

	#top-bar.shrink .style1,
	#top-bar.shrink .style11 {
		font-size: var(--logo-shrink-mobile);
	}

	/* Claim */
	.style2 {
		font-size: var(--claim-size-mobile);
	}

	#top-bar.shrink .style2 {
		font-size: var(--claim-shrink-mobile);
	}

	/* Navi: Wortbreite (kein festes width) */
	#navi ul {
		display: flex;
		flex-wrap: nowrap;
		gap: 10px;
		justify-content: flex-start;
	}

	#navi li {
		width: auto;
		margin: 0;
		padding: 0;
	}

	#navi li a {
		display: inline-block;
		width: auto;
		white-space: nowrap;
		font-size: var(--navi-size-mobile);
		padding: 6px 0;
	}

	#top-bar.shrink #navi li a {
		font-size: var(--navi-shrink-mobile);
	}

	/* Typografie kompakter */
	h1 {
		font-size: var(--type-h1-portrait);
	}

	h2 {
		font-size: var(--type-h2-portrait);
	}

	h6 {
		font-size: var(--type-h6-portrait);
		clear: left;
	}

	p {
		font-size: var(--type-p-portrait);
	}

	ul {
		font-size: var(--type-ul-portrait);
	}

}


/* --------------------------------------------------- */
/* (2) MOBILE LANDSCAPE  (≤ 900px, landscape)          */
/* --------------------------------------------------- */

@media (max-width: 900px) and (orientation: landscape) {
	
	/* Breakpoint-Variablen */
	:root {
		--bg-leaf-size:			var(--bg-leaf-size-mobile-landscape);
		--bg-flower-size:		var(--bg-flower-size-mobile-landscape);
		--content-width:		var(--content-width-mobile-landscape);
		--content-image-scale:	var(--content-image-scale-mobile-landscape);

		--content-image-offset-x: var(--content-image-offset-x-mobile-landscape);
    }
	

	/* Header + Navi (Normal + Shrink) */
	#box-header,
	#box-navi,
	#top-bar.shrink #box-header,
	#top-bar.shrink #box-navi {
		padding-left:  var(--pad-mobile-landscape);
		padding-right: var(--pad-mobile-landscape);
	}

	/* Content */
	#box-content {
		padding-left:  var(--pad-mobile-landscape);
		padding-right: var(--pad-mobile-landscape);
	}

	/* Footer */
	#box-footer {
		padding-left:  var(--pad-footer-mobile-landscape);
		padding-right: var(--pad-footer-mobile-landscape);
	}

	#box-content img.profilbild {
		width: 125px;
		max-width: 20%;
	}

	/* Logo */
	.style1,
	.style11 {
		font-size: var(--logo-size-tablet-landscape);
	}

	#top-bar.shrink .style1,
	#top-bar.shrink .style11 {
		font-size: var(--logo-shrink-tablet-landscape);
	}

	/*
	   Claim: Im Landscape-Modus wird der Claim nicht per
	   font-size verkleinert, sondern nur per transform skaliert.
	   So bleibt die Layout-Höhe stabil.
	*/
	.style2 {
		font-size:        var(--claim-size-tablet-landscape);
		line-height:      var(--line-height-tight);
		margin-top:       2px;
		transform:        scale(1);
		transform-origin: left top;
		transition:       transform var(--transition-smooth);
	}

	#top-bar.shrink .style2 {
		font-size:   var(--claim-size-tablet-landscape); /* bleibt gleich */
		line-height: var(--line-height-tight);
		margin-top:  2px;
		transform:   scale(var(--claim-shrink-scale-landscape));
	}

	/* Typografie kompakter */
	h1 {
		font-size: var(--type-h1-landscape);
	}

	h2 {
		font-size: var(--type-h2-landscape);
	}

	h6 {
		font-size: var(--type-h6-landscape);
	}

	p {
		font-size:   var(--type-p-landscape);
		line-height: 1.4;
	}

	ul {
		font-size:   var(--type-ul-landscape);
		line-height: var(--line-height-base);
	}
	
	/* Bildposition an schmalere Lesespalte anpassen */
	.content-column::after {

		left: calc(
			var(--content-width)
			- var(--content-image-width)
			+ var(--content-image-offset-x)
		);
	}

}



/* --------------------------------------------------- */
/* (3) TABLET PORTRAIT  (601px – 900px, portrait)      */
/* --------------------------------------------------- */

@media (min-width: 601px) and (max-width: 900px) and (orientation: portrait) {
	
	/* Breakpoint-Variablen */
	:root {
		--bg-leaf-size:			var(--bg-leaf-size-tablet-portrait);
		--bg-flower-size:		var(--bg-flower-size-tablet-portrait);
		--content-width:		var(--content-width-tablet-portrait);
		--content-image-scale:	var(--content-image-scale-tablet-portrait);
    }

	/* Header + Navi (Normal + Shrink) */
	#box-header,
	#box-navi,
	#top-bar.shrink #box-header,
	#top-bar.shrink #box-navi {
		padding-left:  var(--pad-tablet-portrait);
		padding-right: var(--pad-tablet-portrait);
	}

	/* Content */
	#box-content {
		padding-left:  var(--pad-tablet-portrait);
		padding-right: var(--pad-tablet-portrait);
	}

	/* Logo + Claim: erbt Desktop-Größen → kein Override nötig */

}



/* (4) DESKTOP  (> 900px): Alle Basis-Stile in design.css definiert */



/* --------------------------------------------------- */
/* (5) PRINT                                           */
/* --------------------------------------------------- */

@media print {

	/* Alles ausblenden */
	body * {
		visibility: hidden;
	}

	/* Nur Content sichtbar */
	#box-content,
	#box-content * {
		visibility: visible;
	}

	/* Content auf volle Seite */
	#box-content {
		position:   absolute;
		left:       0;
		top:        0;
		width:      100%;
		padding:    0;
		margin:     0;
		border:     none;
		background: none;
	}

	/* Links als Text */
	a {
		text-decoration: underline;
		color: var(--print-color);
	}

	/* URLs anzeigen */
	a::after {
		content:   " (" attr(href) ")";
		font-size: 0.85em;
	}

	/* Seitenränder */
	@page {
		margin: 2cm;
	}

}