/*******************************************/
/* MATRIX: CSS-Erweiterung fuer alle Sites */
/*******************************************/

/********************/
/* Farbdefinitionen */
/********************/

/* weitere Farben sind definiert in /var/www/aimeos-shop/packages/matrix/views/base.blade.php */

:root {
    --ai-bg: #ffffff; 								/* Haupt-Hintergrund der Site */
    --ai-bg-alt: #F6F6F6;							/* Hintergrund für abgesetzte Bereiche z.B. Footer */
    
    --ai-primary: #282828;							/* Markenfarbe, z.B. Links, Buttons, Icons, aktive Elemente */
    --ai-primary-alt: #282828;						/* Hover-Farbe für Markenfarbe */
    --ai-secondary: #555555;						/* zweite Farbe, z.B. sekundäre Navigation, weniger wichtige Buttons */
    --ai-secondary-alt: #555555;					/* Hover der zweiten Farbe */
    --ai-tertiary: #cccccc;							/* Rahmen, Linien, dezente Hintergründe z.B. in Eingabefeldern */
    --ai-tertiary-alt: #f6f6f6;						/* etwas heller als ai-tertiary */
    
    --ai-text: #282828;								/* Textfarbe Fließtext */
    --ai-text-alt: #555555;							/* hellere Textfarbe */

    --ai-badge-bg: #dc3545; 						/* Hintergrundfarbe für kleine Hinweisfelder, z.B. 'neu' oder 'sale' */
    --ai-badge-text: #ffffff; 						/* Textfarbe für kleine Hinweisfelder, z.B. 'neu' oder 'sale' */
                          
    --ai-danger: #a00000;							/* Fehlermeldungen, Löschen-Buttons, z.B. 'Artikel ausverkauft' */
    --ai-success: #006000;							/* Erfolgsmeldungen, z.B. 'Artikel im Warenkorb' */
    --ai-warning: #ffa500;							/* Warnhinweise, z.B. 'nur noch 2 Stück' */

    --ai-radius: 4px; 								/* Abrundung von Feldern und Buttons, 0px = eckige Kanten */
    --ai-grid-gutter: 1rem; 						/* Abstand zwischen Spalten im Produkt-Grid */
    --ai-product-image-ratio: 3/4;					/* Seitenverhältnis Produktbilder, z.B. 3/4 = hochkant, 1/1 quadratisch */
	
	--logo-color-hover: var(--ai-tertiary);
    --logo-centercolor-hover: var(--ai-tertiary);
	
	--brandfooter-bg: #303030;						/* Hintergrund ganz am Ende der Seite, für 'powered by' */ 
}


/*************************/
/* Schriften formatieren */
/*************************/
  
 /* Fonts einbinden */
 
@font-face {
	font-family: 'Roboto Condensed';				
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/roboto-condensed/woff2/roboto-condensed-v19-latin-400.woff2') format('woff2');
}

@font-face {
	font-family: 'Roboto Condensed';				
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('assets/fonts/roboto-condensed/woff2/roboto-condensed-v19-latin-700.woff2') format('woff2');
}

@font-face {
	font-family: 'Sunflower Bold';					
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('assets/fonts/sunflower/woff2/sunflower-700.woff2') format('woff2');
}

@font-face {
	font-family: 'Sunflower Medium';					
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('assets/fonts/sunflower/woff2/sunflower-500.woff2') format('woff2');
}

@font-face {
	font-family: 'Sunflower Light';					
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('assets/fonts/sunflower/woff2/sunflower-300.woff2') format('woff2');
}

@font-face {										/* Symbole und Icons */
	font-family: 'bootstrap-icons';
	font-display: swap;
	src: url('assets/fonts/bootstrap/woff2/bootstrap-icons.woff2') format('woff2'),
		url('assets/fonts/bootstrap-icons.woff') format('woff');
}


/* Grossbuchstaben */
.uppercase {
        text-transform: uppercase;
}


/************************/
/* Style-Verbesserungen */
/************************/

 /* Springen des Scrollbars verhindern (verhindert horizontales Scrollen komplett) */
html {
	overflow-y: scroll;
    width: 100%;
    overflow-x: hidden; 
    position: relative;
}

/* Wichtig für Bootstrap: Reihen korrigieren */
.row {
    margin-right: 0;
    margin-left: 0;
	width: 100%;
}

.aimeos .btn {
	max-width: 100%;
}

/*********/
/* Logos */
/*********/

/* Logo Icons formatieren */
.logo-center { fill: var(--logo-centercolor); }
.logo-circle { fill: var(--logo-color); }
.logo {
	width: 130px;
	height: 130px;
	display: block;
	margin: 0px;
	padding: 0px;             
}

/* spezifisch: Header-Logo */
.navbar-brand img {
	padding: 0.5rem 0;
	height: 60px;
}

/* die Style-ID in Logo-SVGs füllen */
#path-center {
    fill: var(--logo-centercolor);
    transition: fill .3s ease;
}
#path-circle-left, #path-circle-right {
    fill: var(--logo-color);
    transition: fill .3s ease;
}

/******************/
/* Stage / Slider */
/******************/

.aimeos.catalog-home {
	margin-top: calc(-1rem - 80px);
}

@media (min-width:992px) {
	.aimeos.catalog-home {
		margin-top: calc(-7rem - 50px);
	}
}

.breadcrumbs{
    padding: 0.5rem 1.3rem;         
    display: block;          /* Stellt sicher, dass der Bereich die volle Breite nutzt */
    width: 100%;
	color: var(--ai-bg);
	background-color: var(--brandfooter-bg);
}
.breadcrumbs p a {
	color: var(--ai-bg);
}

.breadcrumbs p a:hover {
	color: var(--ai-tertiary);
	transition: color .3s;
	text-decoration: none;
}


.stage-text {
	position: absolute;
	font-size: 200%;
	margin: 0 5%;
	top: 43%;
	text-align: start;
	color: var(--ai-bg);
}

.stage-text .btn {
	background-color: transparent;
	border-color: var(--ai-bg);
	color: var(--ai-bg);
	border-width: 2px;
	font-weight: normal;
	margin-top: 1rem;
	font-size: 50%;
	width: 12rem;
}

.stage-text .btn:visited {
    border-color: var(--ai-bg);
	color: var(--ai-bg);
}

.catalog-home .stage-text {
		max-width: 35%;
		font-size: 200%;
}
	



.d-flex { display: flex; }
.align-items-center { align-items: center; }
.list-unstyled { list-style: none; padding: 0; }

.stage-size-s {
	height: 10.1rem;
}
.stage-size-m {
	height: 25rem;
}
.stage-size-l {
}

/**********/
/* Footer */
/**********/

/* Gruppe der Spalten zentriert */
footer .row.justify-content-center {
    display: flex;
    justify-content: center;
}

/* Inhalt der Spalten linksbuendig  */
.footer-block {
    min-width: 180px; 		/* minimale Breite */
    margin-bottom: 2rem;  	/* zusaetzlicher Schutzabstand zwischen den Spalten */
    text-align: left;
}

/* Mobile Optimierung: untereinander stapeln */
@media (max-width: 767px) {
    footer .row.justify-content-center > div {
        display: flex;
        flex-direction: column; /* Stapelt h2 und p untereinander */
        align-items: center;    /* Zentriert den gesamten Block horizontal */
        margin-bottom: 2rem;
        padding: 0 1rem;        /* Etwas Luft zu den Seiten */
    }

    .footer-block {
        min-width: 100%;        /* Block nutzt volle Breite der Spalte */
    }

    .brand a, footer p a {
        justify-content: center; /* Zentriert Icons und Text im Link */
    }

    .footer-block h2 {
       width: 90%;
    }
	
	footer .container-fluid {
		width: 90%;
	}
}

/* Tablet-Ansicht (2 + 2) */
@media (min-width: 768px) and (max-width: 991px) {
    footer .row > div {
        display: flex;
        justify-content: center; /* Zentriert den 50%-Block in der Zeile */
    }
    .footer-block {
        min-width: 250px; /* Verhindert zu schmale Blöcke im 2+2 Modus */
    }
}

/* Desktop-Ansicht (Alle nebeneinander) */
@media (min-width: 992px) {
    .footer-block {
        min-width: 180px; /* Deine gewohnte Breite */
    }
}

/* Vertikaler Abstand beim Umbruch */
.gy-4 {
    --bs-gutter-y: 2rem; /* Erzeugt den gewünschten Abstand zwischen den Zeilen */
}


/* Footer-Textformatierungen */

footer p a {
    padding: 0;
}

/* Spalten ohne Titel bleiben buendig  */
.footer-block h2 {
    min-height: 1.5em;
    display: block;
    text-align: left;
}

/* Abstaende zwischen den Links  */
.footer-spacer {
    display: block;
	line-height: 0;
}

/* Basis-Styles für Link-Icons im Footer */
.brand a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}
.brand-icon-svg-wrapper, .brand-icon-font {
    width: 20px;
    height: 20px;
    margin-right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

/* Style für Bootstrap-Icons */
.brand-icon-font {
    font-family: 'bootstrap-icons' !important;
    font-style: normal;
    line-height: 1;
    font-size: 1.1rem;
    color: var(--logo-centercolor); 
    transition: color .3s ease;
}
.brand-icon-font::before {
    content: var(--bi-content);
}

/* Style für SVG-Icons */
.brand-icon-svg-wrapper svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Hover für die Icons im Footer  */
.brand-link:hover {
    text-decoration: none;
    color: var(--logo-color-hover);
    --logo-color: var(--logo-color-hover);
    --logo-centercolor: var(--logo-centercolor-hover) !important;
}

/* spezifisch: Logo im Footer */
.footer-brand {
    text-align: center;      /* Zentriert das Logo/Bild horizontal */
    padding: 2rem 0;         /* 2rem oben und unten, 0 links und rechts */
    display: block;          /* Stellt sicher, dass der Bereich die volle Breite nutzt */
    width: 100%;
	background-color: var(--brandfooter-bg);
}
.footer-brand img, 
.footer-brand a {
    display: inline-block; 	/* Falls das Logo ein Link oder Bild ist, stelle sicher, dass es sich wie ein Inline-Block verhält */
    vertical-align: middle;
	max-width: 160px;
}
@media (max-width: 767px) {
	.footer-brand {
    padding: 1rem 0;
	}
	.footer-brand img{
    max-width: 140px;
	}
}


/***********/
/* WIZARDS */
/***********/

/* --- Circular Step Indicator --- */
.step-indicator {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-bottom:24px;
  flex-wrap:wrap; /* erlaubt Umbruch bei schmalen Viewports */
}

.step-circle {
  width:40px; height:40px; border-radius:50%;
  background:#e0e0e0; color:#444;
  display:flex; align-items:center; justify-content:center;
  font-weight:600; text-decoration:none;
  transition:all .25s ease;
}

.step-circle.active {
  background:#4a6cf7; color:#fff !important; transform:scale(1.12);
}

.step-circle.disabled {
  opacity:.45; cursor:not-allowed;
}

.step-line {
  width:60px; height:4px; background:#d0d0d0;
  transition:background .25s ease;
}

.step-line.active { background:#4a6cf7; }

/* Beschriftungen (neben den Kreisen) */
.step-label { font-size:.95rem; color:#333; white-space:nowrap; }
@media (max-width: 700px) {
  .step-label { display:none; } /* Labels auf sehr schmalen Screens ausblenden */
}

/* --- Wizard Container & Controls --- */
.wizard-container {
  max-width:900px; margin:40px auto; background:#fff;
  padding:30px 40px; border-radius:12px;
  box-shadow:0 4px 18px rgba(0,0,0,.08);
}

.wizard-btn {
  display:inline-block; background:#4a6cf7; color:#fff;
  padding:12px 26px; border-radius:8px; font-weight:600;
  border:none; cursor:pointer; margin-top:16px;
  transition:background .2s ease, opacity .2s ease, transform .1s ease;
}

.wizard-btn:hover { background:#3d5ae2; }

.wizard-btn:focus-visible {
  outline:3px solid rgba(74,108,247,.35);
  outline-offset:2px;
}

/* Ghost-Variante (Zurück-Link als Button-Optik) */
.wizard-btn--ghost {
  background:transparent; color:#334155;
  border:1px solid #cfd4e2;
}
.wizard-btn--ghost:hover {
  background:#f6f8fe; /* leichtes Hover */
}

/* Disabled-Styles (Attribut + optionale Klasse aus JS) */
.wizard-nav .wizard-btn[disabled],
.wizard-nav .wizard-btn.is-disabled {
  opacity:.5; cursor:not-allowed;
  filter:grayscale(.15);
}

/* Options */
.wizard-options {
  display:flex; flex-wrap:wrap; gap:16px; margin:16px 0;
}
.wizard-option {
  flex:1 1 180px; background:#fafafa; padding:16px; border-radius:10px;
  text-align:center; cursor:pointer; border:2px solid transparent;
  transition:all .2s ease;
}
.wizard-option:hover { border-color:#4a6cf7; background:#f0f4ff; }
.wizard-option.active { border-color:#4a6cf7; background:#e7edff; }

/* Summary */
.summary-box {
  background:#fafafa; padding:20px; border-radius:10px;
  border-left:4px solid #4a6cf7;
}

.error { color:#d33; margin-top:6px; font-size:.95rem; }

/* --- Motion preferences --- */
@media (prefers-reduced-motion: reduce) {
  .step-circle, .step-line, .wizard-btn, .wizard-option {
    transition:none !important;
  }
  .step-circle.active { transform:none; }
}