/*
====================================================
  ROUGHBULL Frontend – styles.css
  Zweck: Basis-Styles, Layout, Karten/Produkte, Detailseiten, Toasts
  Pflegehinweis: Abschnitte sind beschriftet. Nur hier ergänzen, nicht duplizieren.
  Stand: 2025-08-26
====================================================
*/

/* ========== Base / Reset ========== */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* ========== Document ========== */
html {
	height: 100%;
	width: 100%;
}

/* ========== Body / Hintergrund (Markenverlauf + Textur) ========== */
body {
	
	font-family: 'Roboto', Arial, sans-serif;
	background: 
		url('../img/asfalt-dark.png'),
		linear-gradient(130deg, 
			rgb(254, 8, 11),
			rgb(195, 6, 9) 15%,
			rgb(138, 4, 6) 30%,
			rgb(80, 1, 2) 45%,
			rgb(37, 0, 0) 55%,
			rgb(12, 0, 0) 70%,
			rgb(4, 0, 0) 85%,
			rgb(0, 0, 0) 100%
		);
	background-attachment: fixed;
	background-repeat: repeat;
	background-size: cover;
	color: white;
	text-align: center;
	width: 100%;
}

/* ========== Layout / Page Container ========== */
.page{
	padding: 0px;
	text-align: center;
	min-height:100vh;
	display:flex;
	flex-direction:column;
}
.page > .page-body{
	flex:1 0 auto;
	padding: 75px;
	text-align: center;
}

/** Überschriften **/
/* ========== Typography ========== */

/* Grundstil für alle Überschriften */
h1, h2, h3, h4, h5, h6 {
	font-family: 'Roboto', Arial, sans-serif;
	line-height: 1.2;
	color: #fff;
	margin: 0 auto 18px;
	text-rendering: optimizeLegibility;
	letter-spacing: 0.2px;
}

/* Standard-Ausrichtung: zentriert (kann lokal überschrieben werden, z.B. .box.legal) */
h1, h2, h3, h4, h5, h6 { text-align: left; max-width: 100%; }

/* Größen & Gewicht */
h1 { font-size: 36px; font-weight: 900; margin-bottom: 25px; }
h2 { font-size: 28px; font-weight: 800; margin-top: 10px; }
h3 { font-size: 22px; font-weight: 700; }
h4 { font-size: 18px; font-weight: 700; }
h5 { font-size: 16px; font-weight: 600; opacity: .95; }
h6 { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; opacity: .9; }

/* Akzent-Support für Markenelemente in Überschriften */
h1 .accent, h2 .accent, h3 .accent, h4 .accent, h5 .accent, h6 .accent { color: var(--accent); }

/* Dünner Unterstrich für Sektionen (optional via .with-underline) */
.with-underline { position: relative; padding-bottom: 8px; }
.with-underline::after {
	content: "";
	display: block;
	width: 72px;
	height: 3px;
	margin: 10px auto 0;
	background: linear-gradient(90deg, rgba(254,8,11,.9), rgba(254,8,11,.4));
	border-radius: 2px;
}

/* Responsiv: kleinere Screens */
@media (max-width: 900px){
	h1 { font-size: 32px; }
	h2 { font-size: 26px; }
	h3 { font-size: 20px; }
}
@media (max-width: 640px){
	h1 { font-size: 28px; }
	h2 { font-size: 24px; }
	h3 { font-size: 19px; }
	h4 { font-size: 17px; }
	h5 { font-size: 15px; }
	h6 { font-size: 13px; }
}

p {
	font-size: 16px;
	margin-bottom: 25px;
	text-align: justify;
}


/* --- AGB page specific styles --- */
.legal{ margin-top:50px; text-align:left; line-height:1.7 }
.legal h2 {font-size:1.35rem;margin:28px 0 10px}
.legal p {margin:0 0 12px}
.legal ul, .legal ol {
	margin-left:0;
	padding-left:2rem;
	list-style-position:inside;
	margin:0 0 16px;
}
.legal li {margin:0 0 8px}
.legal a {color:#fff;text-decoration:underline}
.legal a:hover {text-decoration:none;filter:brightness(1.1)}


/* ========== CTA Buttons (App/Store) ========== */
.buttons {
	display: flex;
	justify-content: center;
	gap: 20px;
	margin-bottom: 3em;
}
.buttons a {
	display: flex;
	align-items: center;
	text-decoration: none;
	color: black;
	background-color: white;
	padding: 10px;
	border-radius: 5px;
	font-weight: bold;
	transition: background 0.3s, color 0.3s;
}
.buttons a:hover {
	background-color: #ff0000;
	color: white;
}
.buttons a img {
	height: 40px;
	transition: filter 0.3s ease;

}
.buttons a:hover img {
	filter: brightness(0) invert(1);
}

/* ========== Divider ========== */
hr {
	border: none;
	height: 2px;
	background: linear-gradient(to right, #ff0000, #e4405f, #ff0000);
	margin: 20px auto;
	width: 80%;
}

/* ========== Lightbox ========== */

.lightbox {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.8);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
}

.lightbox-content {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 12px;
	width: 80%;
	height: 80%;
	max-width: 80%;
	max-height: 80%;
	padding: 20px 24px;
	color: #e3e7ee;
	display: flex;
	flex-direction: column;
	position: relative;
	box-sizing: border-box;
}

.lightbox-content h1 {
	margin: 0 0 1rem;
	color: #fff;
	border-left: 3px solid var(--accent);
	padding-left: 10px;
	flex-shrink: 0;
	text-align: center;
}

.lightbox-close {
	position: absolute;
	top: 15px;
	right: 15px;
	background: none;
	border: none;
	font-size: 1.8rem;
	color: #fff;
	cursor: pointer;
	line-height: 1;
}

#lightbox-body {
	overflow-y: auto;
	flex: 1;
}

/* ========== KPI/Stats Top Right ========== */
.stats-topright {
	position: absolute;
	top: 0px;
	right: 20px;
	display: flex;
	gap: 20px;
}

.stats-topright > .stat-box {
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	padding: 20px 10px 10px 10px;
	border-bottom-left-radius: 12px;
	border-bottom-right-radius: 12px;
	text-align: center;
	font-size: 14px;
	line-height: 1.4;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
	backdrop-filter: blur(5px);
}

.stats-topright > .stat-box > a {
	color: #fff;
	text-decoration: none;
}

/* ========== Generic Content Box ========== */
.box {
	text-align: left;
	margin: 80px auto;            /* etwas weniger Außenabstand */
	padding: 14px 20px 16px 20px; /* oben 14, rechts 20, unten 16, links 20 */
	border-radius: 16px;
	border: 1px solid rgba(80, 1, 2, 0.15); /* feiner, wirkt moderner */
	background: rgba(0,0,0,0.45);
	backdrop-filter: blur(5px);
	color: #fff;
}

/* ========== Coming Soon Panel ========== */
.cs-plate {
	text-align: center;
	margin: 100px auto;
	padding: 40px 20px;
	max-width: 800px;
	border-radius: 16px;
	border: 2px solid rgba(80, 1, 2, 0.1);
	background: rgba(0,0,0,0.4);
	backdrop-filter: blur(4px);
	color: #fff;
}

.cs-plate h2 {
	font-size: 1.8rem;
	margin-bottom: 15px;
}

.cs-sub {
	font-size: 1rem;
	color: #ccc;
	margin-bottom: 20px;
}

.cs-progress {
	height: 8px;
	border-radius: 999px;
	overflow: hidden;
	background: rgba(255,255,255,.15);
	max-width: 400px;
	margin: 0 auto;
}

.cs-progress span {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, rgba(254,8,11,.85), rgba(254,8,11,.35));
	width: 45%;
	animation: cs-load 4s ease-in-out infinite alternate;
}

/* ========== Animations: Coming Soon Progress ========== */
@keyframes cs-load {
	from { width: 25%; }
	to { width: 80%; }
}

/* ========== Design Tokens (CSS Variablen) ========== */
:root{
	/* Farb- und UI-Token: Karte, Rahmen, Text, Akzent (ROUGHBULL Rot) */
	--card:#141414;
	--border:#2a2a2a;
	--muted:#aab;
	--accent:#e30613;
  --footer-bg:#111;
   --footer-border:#1f1f1f;
   --footer-text:#cfd3da;
}

/* ========== Footer-Spacing Helper ========== */
main, .wrap{padding-bottom:80px} /* Platz über Footer */

/* ========== Shop Cards (Listing) ========== */
.shop-wrap{max-width:1200px;margin:20px auto;padding:0 16px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;margin-top:14px}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
/*
  Neutraler, heller Hintergrund hinter Produktbildern
  (gewünscht, um Kontrast zum dunklen Card-Theme zu schaffen)
*/
.viewer{position:relative;background:#eee}
.viewer img.thumb{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.navbtn{position:absolute;top:50%;transform:translateY(-50%);padding:8px 10px;border-radius:10px;background:rgba(0,0,0,.55);color:#fff;cursor:pointer;user-select:none}
.navbtn.left{left:8px}.navbtn.right{right:8px}
.p{padding:12px;display:flex;flex-direction:column;gap:8px;flex:1}
.title{font-weight:700}
.price{color:#eee}
.sizes{display:flex;gap:6px;flex-wrap:wrap}
.chip{padding:4px 8px;border:1px solid var(--border);border-radius:999px;font-size:.85rem;color:#ccd}
.btn-detail{margin-top:auto;display:block;width:100%;text-align:center;padding:12px 14px;border-radius:10px;background:var(--accent);color:#fff;text-decoration:none;font-weight:700}
.btn-detail:hover{filter:brightness(1.05)}

/* ========== Product Detail ========== */
/* --- Responsive: ≤900px (Produkt-Detail einspaltig) --- */
@media (max-width:900px){.product{grid-template-columns:1fr}}
.product{display:grid;grid-template-columns:1.1fr .9fr;gap:24px}
.viewer img.main{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.thumbs img{width:68px;height:68px;object-fit:cover;border-radius:8px;border:1px solid var(--border);background:#eee;cursor:pointer}
.thumbs img.active{outline:2px solid var(--accent)}
.info{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:12px}
.price strong{font-size:1.25rem}
.price .meta{display:block;margin-top:4px;color:#ccd;font-size:.95rem}
.price .meta a{color:#fff;text-decoration:underline}
.label{display:block;margin-top:8px;margin-bottom:6px;color:#ccd}
.select{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:#1b1b1b;color:#eee}
.buy .btn-red{width:100%;display:inline-flex;justify-content:center;align-items:center;gap:8px;padding:12px 14px;border-radius:10px;background:var(--accent);color:#fff;text-decoration:none;font-weight:700}
.desc-wrap{max-width:1200px;margin:20px auto 0;padding:0 16px}
.desc{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px;color:#ccd;line-height:1.6}

/* ========== Floating Toasts ========== */
.toast-stack {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}
.toast-item {
  min-width: 280px;
  max-width: 340px;
  border-radius: 8px;
  padding: 12px 14px;
  background: #222;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
  overflow: hidden;
  animation: slideIn .4s ease;
  pointer-events: auto;
  will-change: transform, opacity;
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(6px);
}
.toast-item.toast-success { background:#1b3a23; border-left:4px solid #28a745; }
.toast-item.toast-error   { background:#3a1b1b; border-left:4px solid #dc3545; }
.toast-item.toast-warn    { background:#3a2e10; color:#111; border-left:4px solid #ffc107; }
.toast-item.toast-info    { background:#102a33; border-left:4px solid #17a2b8; }
.toast-inner { display:flex; align-items:flex-start; gap:10px; }
.toast-ico { font-size: 20px; margin-top: 2px; }
.toast-title { font-weight:bold; margin-bottom:4px; }
.toast-text { font-size:.9rem; opacity:.9; }
.toast-close {
  background:none;
  border:none;
  color:inherit;
  font-size:18px;
  cursor:pointer;
  margin-left:auto;
}
.toast-bar {
  width: 100%;
  height:3px;
  background:rgba(255,255,255,.5);
  animation: toastBar 8s linear forwards;
  border-radius: 0 0 8px 8px;
  margin-top:6px;
}
.toast-item.toast-success .toast-bar{ background:#28a745; }
.toast-item.toast-error   .toast-bar{ background:#dc3545; }
.toast-item.toast-warn    .toast-bar{ background:#ffc107; }
.toast-item.toast-info    .toast-bar{ background:#17a2b8; }

/* ========== Animations: Toast Lifetime Bar ========== */
@keyframes toastBar { from{width:100%} to{width:0} }

/* ========== Animations: Toast Slide-In ========== */
@keyframes slideIn { from{opacity:0; transform:translateX(50px)} to{opacity:1; transform:translateX(0)} }

/* --- Responsive: ≤640px (Toasts full width) --- */
@media (max-width: 640px){
  .toast-stack{ right:12px; left:12px; }
  .toast-item{ max-width:none; width:100%; }
}

/* ========== Logo ========== */
.logo {
	margin-bottom: 3em;
}

.logo img {
	max-width: 300px;
	height: auto;
	border-radius: 50%;
	border: 3px solid white;
	background: url('../img/asfalt-light.png'),
	linear-gradient(220deg, 
		rgba(0, 0, 0, 1) 0%,
		rgba(0, 0, 0, 0.90) 10%,  
		rgba(0, 0, 0, 0.85) 20%,  
		rgba(0, 0, 0, 0.80) 30%,  
		rgba(0, 0, 0, 0.75) 40%,  
		rgba(0, 0, 0, 0.70) 50%,  
		rgba(0, 0, 0, 0.75) 60%,  
		rgba(0, 0, 0, 0.80) 70%,  
		rgba(0, 0, 0, 0.85) 80%,  
		rgba(0, 0, 0, 0.90) 90%,  
		rgba(0, 0, 0, 1) 100%  
	);
}

/* ========== Footer ========== */
:root{
	--footer-bg:#0e0e0f;
	--footer-bg2:#070708;
	--footer-border:#1c1c1e;
	--footer-text:#cfd3da;
	--accent:#e30613;
}

.site-footer{
	position:static; /* nicht fixed */
	background:linear-gradient(180deg,var(--footer-bg),var(--footer-bg2));
	border-top:1px solid var(--footer-border);
	color:var(--footer-text);
	font-size:.95rem;
	box-shadow:0 -8px 28px rgba(0,0,0,.35);
}
.site-footer .footer-inner{
	max-width:1200px; margin:0 auto; padding:26px 20px 18px;
	display:grid; gap:24px 28px;
	grid-template-columns:repeat(3,minmax(0,1fr));
	align-items:start;
}

/* Spalten */
.f-col{display:flex;flex-direction:column;gap:10px}
.f-col img {
	max-width: 140px;
	height: auto;
	display:block; /* verhindert Baseline-Lücke */
	margin-bottom: 8px;
	opacity: .95;
}

/* Link-Spalte – untereinander */
.f-links{display:flex;flex-direction:column;gap:8px;text-align:left}
.f-links a{color:#fff;text-decoration:none;opacity:.8}
.f-links a:hover{opacity:1;color:var(--accent)}

/* Newsletter */
.f-news {
	
}

.f-news .f-news-title {
	font-weight: 800;
	font-size: 1.05rem;
	margin-bottom: 4px;
	text-align: left;
}

.f-news .f-news-sub {
	font-size: .9rem;
	opacity: .85;
	margin: -4px 0 10px;
	text-align: left;
}

.f-news .nl-row {
	display: flex;
	gap: 8px;
}

.f-news #nl-email {
	flex: 1;
	min-width: 0;
	padding: 12px 14px;
	border-radius: 10px;
	border: 1px solid var(--footer-border);
	background: #0f0f0f;
	color: #fff;
	font-size: .95rem;
	transition: border .25s ease;
}
.f-news #nl-email:focus {
	border-color: var(--accent);
	outline: none;
}

.f-news #nl-email::placeholder {
	color: #9aa0a6;
}

.f-news .nl-btn {
	padding: 12px 16px;
	border-radius: 10px;
	border: none;
	background: var(--accent);
	color: #fff;
	font-weight: 700;
	cursor: pointer;
	transition: background .25s ease, transform .15s ease;
}
.f-news .nl-btn:hover {
	filter: brightness(1.1);
	transform: translateY(-1px);
}

.f-news .nl-consent {
	font-size: .85rem;
	opacity: .9;
	line-height: 1.45;
	text-align: left;
}

.f-news .nl-consent input {
	margin-right: 8px;
	transform: scale(1.1);
	accent-color: var(--accent);
	cursor: pointer;
}

.f-news .nl-consent a {
	color: var(--footer-text);
	text-decoration: none;
}
.f-news .nl-consent a:hover {
	text-decoration: none;
	color: var(--accent);
}

.f-news .nl-hp {
	position: absolute;
	left: -9999px;
	opacity: 0;
}

/* Fokus-Styles für Tastatur-Nutzer */
.f-links a:focus,
#nl-email:focus,
.nl-btn:focus,
.nl-consent input:focus{
	outline:2px solid var(--accent);
	outline-offset:2px;
}

/* Copy-Zeile */
.f-copy{margin-top:10px;padding:0 20px 16px;text-align:center;font-size:.85rem;opacity:.75}

/* Responsive: 2 Spalten, dann 1 Spalte */
@media (max-width:1100px){
	.site-footer .footer-inner{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
	.site-footer .footer-inner{grid-template-columns:1fr}
	.f-links{align-items:center}
	.f-news{align-items:stretch}
	.f-col img { max-width: 100px;}
	.f-col{align-items:center}
}