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

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


/* ================================================= */
/* DESIGN TOKENS (CSS Custom Properties)             */
/* ================================================= */
/*
   Alle Farben, Abstände und Schriftgrößen zentral
   hier definiert. Änderungen nur an dieser Stelle
   nötig – wirken sich überall aus.
*/

:root {

	/* --- Markenfarben --- */
	--brand-green:		#c6cc8c;
	--brand-pink-soft:	#FB8DD4;
	--brand-dark:		#1A1A1A;

	/* --- Grautöne --- */
	--gray-dark:   #333333;
	--gray-mid:    #9A9A9A;
	--gray-light:  #CCCCCC;
	--gray-bullet: #777777;

	/* --- Hintergründe --- */
	--bg-main:		#F8F8F8;
	--bg-content:	#F4F4F4;
	--bg-white:		#FFFFFF;
	--bg-header:	#ECECEC;
	
	/* --- Hintergrundgrafiken --- */
	--bg-leaf-size-desktop:           360px;
	--bg-leaf-size-tablet-portrait:   280px;
	--bg-leaf-size-mobile-landscape:  120px;
	--bg-leaf-size-mobile-portrait:   180px;

	--bg-flower-size-desktop:           450px;
	--bg-flower-size-tablet-portrait:   360px;
	--bg-flower-size-mobile-landscape:  300px;
	--bg-flower-size-mobile-portrait:   240px;
	
	/* --- Aktive Hintergrundgrößen --- */
	--bg-leaf-size:   var(--bg-leaf-size-desktop);
	--bg-flower-size: var(--bg-flower-size-desktop);

	/* --- Rahmen --- */
	--border-color: #CCCCCC;

	/* --- Schatten --- */
	--shadow-topbar: 0 3px 8px rgba(0,0,0,0.25);

	/* --- Top-Bar Hintergrund --- */
	--topbar-bg: var(--bg-header);
	--topbar-bg-shrink: var(--bg-header);

	/* --- Claim-Farbe --- */
	--claim-color: #9A9A9A;

	/* --- Schriftfamilien --- */
	--font-base: "Open Sans", Arial, sans-serif;
	--font-logo: "Roboto Condensed", sans-serif;
	--font-heading: "Caladea", Cambria, Georgia, serif;

	/* --- Basis-Typografie --- */
	--line-height-base:    1.45;
	--line-height-li:      1.2;   /* Zeilenabstand innerhalb mehrzeiliger LI-Tags */
	--line-height-tight:   1.25;
	--line-height-heading: 1.1;
	
	/* --- Maximale Lesebreite ---*/
	--content-width-desktop: 640px;
	--content-width-tablet-portrait: 540px;
	--content-width-mobile-landscape: 530px;
	--content-width-mobile-portrait: 100%;
	
	/* --- Aktive Lesebreite --- */
	--content-width: var(--content-width-desktop);
	
	/* --- Content-Bilder -------------------------------- */

	/* Originalgröße der Photoshop-Stage */
	--content-image-stage-width: 400px;
	--content-image-stage-height: 400px;

	/* Skalierungsfaktoren */
	--content-image-scale-desktop:           0.7;
	--content-image-scale-tablet-portrait:   0.9;
	--content-image-scale-mobile-landscape:  0.65;
	--content-image-scale-mobile-portrait:   0;

	/* Aktiver Faktor */
	--content-image-scale:
		var(--content-image-scale-desktop);

	/* Daraus berechnete Darstellungsgröße */
	--content-image-width:
		calc(
			var(--content-image-stage-width)
			* var(--content-image-scale)
		);

	--content-image-height:
		calc(
			var(--content-image-stage-height)
			* var(--content-image-scale)
		);

	/* --- Horizontaler Bild-Offset pro Breakpoint --- */
	--content-image-offset-x-desktop:           4px;
	--content-image-offset-x-tablet-portrait:   4px;
	
	/* Landscape benötigt eigene Positionierung wegen schmaler Lesespalte */
	--content-image-offset-x-mobile-landscape: 170px;
	
	--content-image-offset-x-mobile-portrait:   4px;

	/* Aktiver Offset */
	--content-image-offset-x: var(--content-image-offset-x-desktop);
	
	/* --- Absatz --- */
	--type-p: 0.9em;
	--line-height-p: 1.6;
	--margin-p: 1.4em;
	
	/* --- Typografie-Skala (Desktop) --- */
	--type-h1:     1.75em;
	--type-h2:     1.7em;
	--type-h6:     0.85em;
	--type-footer: 0.8em;

	/* --- Typografie-Skala (Mobile Portrait, kompakter) --- */
	--type-h1-portrait: 1.3em;
	--type-h2-portrait: 1.3em;
	--type-h6-portrait: 0.9em;
	--type-p-portrait:  0.9em;
	--type-ul-portrait: 1em;

	/* --- Typografie-Skala (Mobile Landscape, kompakter) --- */
	--type-h1-landscape: 1.3em;
	--type-h2-landscape: 1.3em;
	--type-h6-landscape: 0.9em;
	--type-p-landscape:  0.9em;
	--type-ul-landscape: 1em;

	/* --- Layout --- */
	--max-width:       900px;
	--navi-item-width: 105px;

	/* --- Layout-Padding pro Breakpoint --- */
	--pad-desktop:          30px;
	--pad-tablet-portrait:  30px;
	--pad-mobile-landscape: 24px;
	--pad-mobile:           14px;
	--pad-mobile-content:   12px;

	/* --- Innenabstände feste Boxen --- */
	--pad-header:        28px;
	--pad-header-shrink: 10px;
	--pad-navi:          18px;
	--pad-navi-shrink:   10px;
	--pad-content:       30px;
	--pad-footer-v:      26px;
	--pad-footer-mobile:           14px;   /* Footer horizontal: Mobile Portrait  */
	--pad-footer-mobile-landscape: 24px;   /* Footer horizontal: Mobile Landscape */

	/* --- Abstände / Margins --- */
	--margin-hr:            25px;
	--margin-li:            0.3em;

	/* --- Radien --- */
	--radius-image: 6px;

	/* --- HR --- */
	--hr-color:   #B0B09A;
	--hr-opacity: 0.6;

	/* --- Logo-Größen: Normal-Zustand --- */
	--logo-size-desktop:          3.2rem;
	--logo-size-tablet-landscape: 2.1rem;
	--logo-size-mobile:           1.8rem;

	/* --- Logo-Größen: Shrink-Zustand (ca. 75%) --- */
	--logo-shrink-desktop:          2.4rem;
	--logo-shrink-tablet-landscape: 1.55rem;
	--logo-shrink-mobile:           1.35rem;

	/* --- Claim-Größen: Normal-Zustand --- */
	--claim-size-desktop:          0.9rem;
	--claim-size-tablet-landscape: 0.6rem;
	--claim-size-mobile:           0.53rem;

	/* --- Claim-Größen: Shrink-Zustand --- */
	--claim-shrink-desktop: 0.7rem;
	--claim-shrink-mobile:  0.5rem;

	/* --- Claim: Shrink-Skalierung im Landscape-Modus --- */
	--claim-shrink-scale-landscape: 0.83;

	/* --- Navi-Schriftgrößen --- */
	--navi-size-desktop:   0.8rem;
	--navi-shrink-desktop: 0.65rem;
	--navi-size-mobile:    0.62rem;
	--navi-shrink-mobile:  0.55rem;

	/* --- Farben: Überschriften --- */
	--heading-dark: #1A1A1A;

	/* --- Profilbild: feste Breite --- */
	--profilbild-width: 140px;

	/* --- Scroll-Offset für sticky Header --- */
	--scroll-margin-top: 150px;

	/* --- Breakpoints (nur zur Dokumentation, nicht als var() nutzbar in @media) --- */
	/* --bp-mobile:  600px  */
	/* --bp-tablet:  900px  */

	/* --- Druck --- */
	--print-color: #000000;

	/* --- Transitions --- */
	--transition-fast:   0.2s ease;
	--transition-normal: 0.35s ease;
	--transition-smooth: 0.45s cubic-bezier(.4,0,.2,1);

}