html {
  scroll-behavior: smooth;
}

/* Körper-Hintergrund passt zur Status-Bar */
body {
  background-color: #0B0D07;
}
/* Safe-Area-Inset für Notch & Co. */
@supports(padding: max(env(safe-area-inset-top))) {
  body {
	padding-top: max(env(safe-area-inset-top), 0px);
  }
}

/* Fonts */

.safiroR {font-family: 'safiroregular' !important;}
.safiroRK {font-family: 'safiroregular_italic' !important;}
.safiroM {font-family: 'safiromedium' !important;}
.safiroMK {font-family: 'safiromedium_italic' !important;}
.safiroSB {font-family: 'safirosemibold' !important;}
.safiroSBK {font-family: 'safirosemibold_italic' !important;}
.safiroB {font-family: 'safirobold' !important;}
.safiroBK {font-family: 'safirobold_italic' !important;}

/* Sizes */

.cr72 {font-size: 72px !important;}
.cr56 {font-size: 56px !important;}
.cr48 {font-size: 48px !important;}
.cr32 {font-size: 32px !important;}
.cr28 {font-size: 28px !important;}
.cr24 {font-size: 24px !important;}
.cr22 {font-size: 22px !important;}
.cr18 {font-size: 18px !important;}
.cr18h {font-size: 18px !important;}
.cr16 {font-size: 16px !important;}
.cr14 {font-size: 14px !important;}
.cr12 {font-size: 12px !important;}
.cr10 {font-size: 10px !important;}

@media only screen and (max-width: 600px) {
	.cr56 {font-size: 42px !important;}
	.xcr48 {font-size: 32px !important;}
	.xcr18 {font-size: 16px !important;}
	.cr18h {font-size: 16px !important;}
	.xcr16 {font-size: 14px !important;}
}

/* Decoration */

.rottenUnderline {
	/* Linie aktivieren */
	  text-decoration-line: underline;
	  /* Farbe der Linie */
	  text-decoration-color: #6A6D68;
	  /* WebKit-Fallback */
	  -webkit-text-decoration-color: #6A6D68;
}
.toxicUnderline {
	text-decoration-line: underline;
	  text-decoration-color: #A5FF4E;
	  -webkit-text-decoration-color: #A5FF4E;
}

.toxicUnderline-a:hover {
	text-decoration-line: underline;
	  text-decoration-color: #A5FF4E;
	  -webkit-text-decoration-color: #A5FF4E;
}

.cr-play:hover {
	text-decoration: underline #A5FF4E;
}
.cr-nav:hover {
	text-decoration: underline #6A6D68;
}

.cr-shadow {text-shadow: 0 1px 4px rgba(0,0,0,0.35);}

/* Colors */

/* Font Colors */

.superDarkGreen {color: #0B0D07 !important;}
.swampGreen {color: #202614 !important;}
.toadGreen {color: #3A4025 !important;}
.newLilyGreen {color: #6A734C !important;}
.superLightGreen {color: #BFBB84 !important;}
.pondAsh {color: #44483E !important;}

.rustEmber {color: #BF5E30 !important;}
.deadLilyOrange {color: #CC8C3A !important;}
.swampGold {color: #D1B464 !important;}
.bogShadow {color: #1A1C16 !important;}
.rottenLilac {color: #6A6D68 !important;}
.toxicGlow {color: #A5FF4E !important;}
.toxicGlow-a:hover {color: #A5FF4E !important;}

/* Background Colors */

.superDarkGreenBG {background-color: #0B0D07 !important;}
.superDarkGreenBGG {
	background: linear-gradient(
		0deg,
		rgba(11, 13, 7, 1) 0%,
		rgba(17, 19, 10, 0.98) 35%,
		rgba(40, 45, 28, 0.95) 70%,
		rgba(106, 115, 76, 1) 100%
	  );
}
.swampGreenBG {background-color: #202614 !important;}
.toadGreenBG {background-color: #3A4025 !important;}
.newLilyGreenBG {background-color: #6A734C !important;}
.superLightGreenBG {background-color: #BFBB84 !important;}
.pondAshBG {background-color: #44483E !important;}

.rustEmberBG {background-color: #BF5E30 !important;}
.deadLilyOrangeBG {background-color: #CC8C3A !important;}
.swampGoldBG {background-color: #D1B464 !important;}
.bogShadowBG {background-color: #1A1C16 !important;}
.rottenLilacBG {background-color: #6A6D68 !important;}
.toxicGlowBG {background-color: #A5FF4E !important;}

.swampTexBG {
	background-image: url("../Links/img/textures/section1.jpg");
	background-size: cover;
	rotate: 180deg;
}

.uk-section-divider {
	background-image: url("../Links/img/divider/toadgreen_superdarkgreen_sh_3.svg");
	background-size: contain;
	repeat-y: none;
}

.uk-section-divider_2 {
	background-image: url("../Links/img/divider/toadgreen_superdarkgreen_sh_2.svg");
	background-size: contain;
}

.uk-section-divider_2_a {
	background-image: url("../Links/img/divider/toadgreen_superdarkgreen_sh_2_a.svg");
	background-size: contain;
}

.uk-section-divider_3 {
	background-image: url("../Links/img/divider/toadgreen_superdarkgreen_sh_4.svg");
	background-size: contain;
}

.uk-section-divider_3_a {
	background-image: url("../Links/img/divider/toadgreen_superdarkgreen_sh_4_a.svg");
	background-size: contain;
}

.uk-section-divider_4 {
	background-image: url("../Links/img/divider/toadgreen_superdarkgreen_sh_5.svg");
	background-size: contain;
}

.uk-section-divider_5 {
	background-image: url("../Links/img/divider/toadgreen_superdarkgreen_sh_6.svg");
	background-size: contain;
	background-repeat: repeat-x;
}

@media only screen and (max-width: 800px) {
	.uk-section-divider {
		background-image: url("../Links/img/divider/toadgreen_superdarkgreen_sh_3.svg");
		background-size: cover;
	}
	
	.uk-section-divider_2 {
		background-image: url("../Links/img/divider/toadgreen_superdarkgreen_sh_2.svg");
		background-size: cover;
	}
	
	.uk-section-divider_2_a {
		background-image: url("../Links/img/divider/toadgreen_superdarkgreen_sh_2_a.svg");
		background-size: cover;
	}
	
	.uk-section-divider_3 {
		background-image: url("../Links/img/divider/toadgreen_superdarkgreen_sh_4.svg");
		background-size: cover;
	}
	
	.uk-section-divider_3_a {
		background-image: url("../Links/img/divider/toadgreen_superdarkgreen_sh_4_a.svg");
		background-size: cover;
	}
	
	.uk-section-divider_4 {
		background-image: url("../Links/img/divider/toadgreen_superdarkgreen_sh_5.svg");
		background-size: cover;
	}
	.uk-section-divider_5 {
		background-image: url("../Links/img/divider/toadgreen_superdarkgreen_sh_6.svg");
		background-size: cover;
	}
}

.mire-transition {
  height: 140px;
  background: linear-gradient(
	180deg,
	#6A734C 0%,
	#616B46 32%,
	#4F5738 68%,
	#3A4025 100%
  );
}

.mire-transition--textured {
  height: 160px;
  background:
	/* tiny noise layer (1×1px png) for grain */
	url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQIW2NkYGB4DwABBAEAQJzZ8QAAAABJRU5ErkJggg==') repeat,
	radial-gradient(ellipse at 50% 100%, rgba(106,115,76,.28) 0%, rgba(106,115,76,0) 72%),
	linear-gradient(180deg, #6A734C 0%, #3A4025 100%);
  background-size: auto, 100% 100%, 100% 100%;
  background-blend-mode: overlay;
  opacity: .99; /* softens banding */
}

.slgHover:hover {
	color: #A5FF4E !important;
}

hr, .uk-hr  {
	border-top: 1px solid #0B0D07 !important;
}

.lightHr {
	border-top: 1px solid #BFBB84 !important;
}

.darkHr {
	border-top: 1px solid #0B0D07 !important;
}

.track-item.paused > span {
  color: #A5FF4E;
}

.tri20 {
	width: 24px;
	height: 24px;
}

.tri18 {
	width: 18px;
	height: 18px;
}

.wildTex {
	background-image: url("../Links/img/textures/wildtex.jpg");
	background-size: cover;
}

/* Logo */

.cr-logo {width: 144px !important;}

@media only screen and (max-width: 600px) {
	.cr-logo {width: 100px !important;}
}

/* Navbar */

.cr-drop-nav {
	border-radius: 20px;
}

@media only screen and (max-width: 600px) {
	.uk-navbar-nav > li > a, .uk-navbar-item, .uk-navbar-toggle {min-height: 50px;}
}

/* Section */

.section-border {border-bottom: 1px solid #BFBB84;}

.hero {
  /* statt 100vh: 100 * der echten 1% Höhe */
  height: calc(var(--vh) * 100) !important;
  /* falls du uk-background-cover behältst: */
  background-size: cover;
  background-position: center;
}

.hero {
  position: relative;      /* fürs absolute Pseudo-Element */
  background-image: url("Links/img/hero/croakborn.jpg");
  background-size: cover;
  background-position: center;
}

.hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 200px;           /* Höhe des Verlaufs (anpassen, wie sanft) */
  pointer-events: none;    /* klickbar bleibt alles wie zuvor */
  background: linear-gradient(
	to top,
	#0B0D07,               /* die Graufarbe deiner 2. Section */
	rgba(11,13,7,0)          /* endet transparent oben */
  );
}
@media only screen and (max-width: 600px) {
	.hero::after {
		display: none;
	}
}

/* Container */

@media (max-width: 600px) {
  /* Alle uk-container auf Mobil mehr Padding links/rechts geben */
  .uk-container {
	padding-left: 1rem !important;
	padding-right: 1rem !important;
  }
}

/* Buttons */

.uk-button-normal {
	background-color: #6A734C;
	color: #0B0D07;
	border-radius: 8px;
	padding: 5px 20px;
	line-height: 39px !important;
	box-shadow: 0 4px 4px 0 rgba(0,0,0,0.35); 
}

.uk-button-normal-superLighGreen {
	color: #0B0D07;
	padding: 5px 20px;
	border-radius: 8px;
	border: 2px solid #939F68;
	background: linear-gradient(0deg, #8B9763 0%, #626B45 100%);
	box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
	transition: all 0.3s ease-in-out;
}

.uk-button-normal:hover {
	background-color: #202614;
	color: #6A734C;
	border-radius: 8px;
	padding: 5px 20px;
	line-height: 39px !important;
	box-shadow: inset 0 4px 4px 0 rgba(0,0,0,0.35); 
}

.uk-button-rotten {
	background-color: #6A6D68;
	color: #0B0D07;
	border-radius: 8px;
	padding: 5px 20px;
	line-height: 39px !important;
	box-shadow: 0 4px 4px 0 rgba(0,0,0,0.35);
	transition: all 0.3s ease-in-out; 
}

.uk-button-rotten:hover {
	background-color: #44483E;
	color: #6A6D68;
	border-radius: 8px;
	padding: 5px 20px;
	line-height: 39px !important;
	box-shadow: inset 0 4px 4px 0 rgba(0,0,0,0.35); 
}

.uk-button-dark {
	background-color: #202614;
	color: #939F68;
	border-radius: 8px;
	padding: 5px 20px;
	line-height: 39px !important;
	box-shadow: 0 4px 4px 0 rgba(0,0,0,0.35); 
	transition: all 0.3s ease-in-out;
}

.uk-button-dark:hover {
	background-color: #3A4025;
	color: #939F68;
	border-radius: 8px;
	padding: 5px 20px;
	line-height: 39px !important;
	box-shadow: inset 0 4px 4px 0 rgba(0,0,0,0.35); 
}

.uk-button-toxic {
	background-color: #A5FF4E;
	color: #0B0D07;
	border-radius: 8px;
	padding: 5px 20px;
	line-height: 39px !important;
	box-shadow: 0 4px 4px 0 rgba(0,0,0,0.35); 
	transition: all 0.3s ease-in-out;
}

.uk-button-toxic:hover {
	background-color: #6A734C;
	color: #0B0D07;
	border-radius: 8px;
	padding: 5px 20px;
	line-height: 39px !important;
	box-shadow: inset 0 4px 4px 0 rgba(0,0,0,0.35); 
}

.cr-play-button {
	width: 60px;
	height: 60px;
	opacity: 0.6;
}

.uk-subnav-pill > .uk-active > a {
	background-color: #A5FF4E;
	border-radius: 5px;

}

.uk-subnav-pill > * > a:hover {
	background-color: #A5FF4E;
	border-radius: 5px;
}

@media only screen and (max-width: 600px) {
	.cr-play-button {
		width: 40px;
		height: 40px;
		opacity: 0.6;
	}
}

/* Card */

.uk-card-hero {
	background: rgba(11,13,7,0.8);
	border: 1px solid #BFBB84;
	border-radius: 20px;
	max-width: 580px;
	padding: 40px;
}

@media only screen and (max-width: 600px) {
	.uk-card-hero {
		background: rgba(11,13,7,0.8);
		border: 1px solid #BFBB84;
		border-radius: 20px;
		max-width: 580px;
		padding: 25px;
	}
}

/* Images */

.cr-band {	
	border-radius: 12px;
	border: 1px solid #BFBB84;
}

.cr-band-card {	
	border-radius: 12px 0px 0 12px;
}

.cr-shadow {
	box-shadow: 0 10px 25px 0 rgba(0,0,0,0.35);
}

.lazy-bg {
  width: auto;
  height: 300px;
  background-color: #222;        /* oder ein kleines Platzhalter-PNG */
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  /* optional: ein subtiles Loading-Icon zentriert darstellen */
  /* background-image: url('Links/img/loading-spinner-small.gif'); */
}

/* Sobald das Hintergrundbild gesetzt wurde, entfernst du .lazy-bg oder fügst eine extra
   Klasse (.loaded) hinzu, um den Platzhalter zu verstecken. */
.lazy-bg.loaded {
  /* wenn du ein Spinner-Icon hattest, kannst du hier background-image: none setzen */
}

.croagor {
	background-position: center;
	background-size: cover;
	width: auto;
	height: 300px;
}

.ribbash {
	background-position: center;
	background-size: cover;
	width: auto;
	height: 300px;
}

.grubble {
	background-position: center;
	background-size: cover;
	width: auto;
	height: 300px;
}

.slurm {
	background-position: center;
	background-size: cover;
	width: auto;
	height: 300px;
}

.violet {
	background-position: center;
	background-size: cover;
	width: auto;
	height: 300px;
}

.merch-img {
	border-radius: 12px;
	border: 1px solid #BFBB84;
}

@media only screen and (max-width: 600px) {
	/* Fasse die gemeinsamen Regeln zusammen */
	  .croagor,
	  .ribbash,
	  .grubble,
	  .slurm,
	  .violet {
		display: block;              /* damit margin: auto wirkt */
		margin: 0 auto 1rem;         /* horizontal zentrieren + Abstand unten */
		max-width: 200px;                /* fixe Breite statt max-width für Konsistenz */
		height: 300px;
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
	  }
	
	  /* Einzeln nur noch die Bild­pfade setzen (achte auf Groß-/Kleinschreibung!) */
	  
	.cr-art-mobile {
		border-radius: 20px;
		box-shadow: 0 10px 25px 0 rgba(0,0,0,0.35);
		max-width: 50%;
	}
	
	.cr-m-image {
	}
}

/* Icons */

.cr-yt {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 36px;
  /* leerer Background, wir nutzen Pseudo-Elemente */
}

.cr-yt::before,
.cr-yt::after {
  content: "";
  position: absolute;
  inset: 0;                          /* top/right/bottom/left = 0 */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: opacity 0.3s ease;     /* hier definieren wir die Transition */
}

/* Standard-Icon */
.cr-yt::before {
  background-image: url("../Links/img/icons/yt_n.svg");
  opacity: 1;
  z-index: 1;
}

/* Hover-Icon (anfangs unsichtbar) */
.cr-yt::after {
  background-image: url("../Links/img/icons/yt_hover.svg");
  opacity: 0;
  z-index: 2;
}

/* Beim Hover blenden wir das zweite Icon ein */
.cr-yt:hover::after {
  opacity: 1;
}

/* Optional: das erste Icon gleichzeitig ausblenden */
.cr-yt:hover::before {
  opacity: 0;
}

.cr-in {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 36px;
  /* leerer Background, wir nutzen Pseudo-Elemente */
}

.cr-in::before,
.cr-in::after {
  content: "";
  position: absolute;
  inset: 0;                          /* top/right/bottom/left = 0 */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: opacity 0.3s ease;     /* hier definieren wir die Transition */
}

/* Standard-Icon */
.cr-in::before {
  background-image: url("../Links/img/icons/instagram.svg");
  opacity: 1;
  z-index: 1;
}

/* Hover-Icon (anfangs unsichtbar) */
.cr-in::after {
  background-image: url("../Links/img/icons/instagram_hover.svg");
  opacity: 0;
  z-index: 2;
}

/* Beim Hover blenden wir das zweite Icon ein */
.cr-in:hover::after {
  opacity: 1;
}

/* Optional: das erste Icon gleichzeitig ausblenden */
.cr-in:hover::before {
  opacity: 0;
}

.cr-spread {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 36px;
  /* leerer Background, wir nutzen Pseudo-Elemente */
}

.cr-spread::before,
.cr-spread::after {
  content: "";
  position: absolute;
  inset: 0;                          /* top/right/bottom/left = 0 */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: opacity 0.3s ease;     /* hier definieren wir die Transition */
}

/* Standard-Icon */
.cr-spread::before {
  background-image: url("../Links/img/icons/shop2_hover.svg");
  opacity: 1;
  z-index: 1;
}

/* Hover-Icon (anfangs unsichtbar) */
.cr-spread::after {
  background-image: url("../Links/img/icons/shop2.svg");
  opacity: 0;
  z-index: 2;
}

/* Beim Hover blenden wir das zweite Icon ein */
.cr-spread:hover::after {
  opacity: 1;
}

/* Optional: das erste Icon gleichzeitig ausblenden */
.cr-spread:hover::before {
  opacity: 0;
}

/* Badges */

.toxic-badge {
	padding: 17px 15px 15px 15px;
}

/* Accordion */

.uk-accordion-title:hover {
	text-decoration: underline;
	text-decoration-color: #A5FF4E;
}

/* 1) Geschlossenes Accordion: das „+“ (zwei Linien) in #BFBB84 */
.uk-accordion .uk-accordion-title::before {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20fill%3D%22%23BFBB84%22%20width%3D%2213%22%20height%3D%221%22%20x%3D%220%22%20y%3D%226%22%2F%3E%3Crect%20fill%3D%22%23BFBB84%22%20width%3D%221%22%20height%3D%2213%22%20x%3D%226%22%20y%3D%220%22%2F%3E%3C%2Fsvg%3E") !important;
}

/* 2) Geöffnetes Accordion: das „–“ (eine Linie) in #BFBB84 */
.uk-accordion .uk-open > .uk-accordion-title::before {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20fill%3D%22%23BFBB84%22%20width%3D%2213%22%20height%3D%221%22%20x%3D%220%22%20y%3D%226%22%2F%3E%3C%2Fsvg%3E") !important;
}

/* 1) „+“ im geschlossenen Zustand in superDarkGreen (#0B0D07) */
.Nu-Metal .uk-accordion-title::before {
  background-image: url("data:image/svg+xml;charset=UTF-8,\
%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E\
%3Crect%20fill%3D%22%230B0D07%22%20width%3D%2213%22%20height%3D%221%22%20x%3D%220%22%20y%3D%226%22%2F%3E\
%3Crect%20fill%3D%22%230B0D07%22%20width%3D%221%22%20height%3D%2213%22%20x%3D%226%22%20y%3D%220%22%2F%3E\
%3C%2Fsvg%3E") !important;
}

/* 2) „–“ im geöffneten Zustand in superDarkGreen (#0B0D07) */
.Nu-Metal .uk-open > .uk-accordion-title::before {
  background-image: url("data:image/svg+xml;charset=UTF-8,\
%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E\
%3Crect%20fill%3D%22%230B0D07%22%20width%3D%2213%22%20height%3D%221%22%20x%3D%220%22%20y%3D%226%22%2F%3E\
%3C%2Fsvg%3E") !important;
}

/* Padding */
//xuk-padding-small {padding-top: 10px; padding-bottom: 10px;}

.cr-band-card {
	padding: 20px 0 0 20px !important;
}

.cr-band-card-r {
	padding: 20px 20px 20px 40px !important;
}
@media only screen and (max-width: 600px) {
	.cr-band-card {
		padding: 20px 0 0 0px;
	}
	
	.cr-band-card-r {
		padding: 40px 10px 20px 10px !important;
	}
}