/*!
Theme Name: Sabor Latino Event
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: sabor-latino-event
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Sabor Latino Event is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: #404040;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: #fff;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

img {
	height: auto;
	max-width: 100%;
}

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
a {
	color: #4169e1;
}

a:visited {
	color: #800080;
}

a:hover,
a:focus,
a:active {
	color: #191970;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.main-navigation {
	display: block;
	width: 100%;
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	display: block;
	left: auto;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

@media screen and (min-width: 37.5em) {

	.menu-toggle {
		display: none;
	}

	.main-navigation ul {
		display: flex;
	}
}

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

.post,
.page {
	margin: 0 0 1.5em;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}


/* ==========================================================================
   1. GLOBAL DESIGN SYSTEM "MIDNIGHT ELEGANCE"
   ========================================================================== */

:root {
  /* --- Dark Mode Backgrounds --- */
  --bg-main: #0B090F; /* Ein fast schwarzes, sehr tiefes Violett */
  --bg-surface: #17131F; /* Etwas heller für Ticket-Karten und Sektionen */
  --bg-surface-glass: rgba(23, 19, 31, 0.6); /* Für moderne Glas-Effekte */

  /* --- Typografie & Text --- */
  --text-primary: #F8F5FB; /* Sehr sanftes Off-White (besser als reines Weiß) */
  --text-muted: #A39BAE; /* Elegantes, warmes Grau für Nebentexte */
  
  /* --- Muttertags-Akzente (Premium Look) --- */
  --accent-rose: #E27D9A; /* Ein edles Altrosa / Blush */
  --accent-rose-glow: rgba(226, 125, 154, 0.4); /* Für leuchtende Buttons */
  --accent-gold: #D4AF37; /* Gold für VIP-Tickets oder kleine Highlights */

  /* --- Moderne UI Elemente --- */
  --border-subtle: 1px solid rgba(255, 255, 255, 0.05);
  --border-radius-modern: 24px; /* Große, weiche Rundungen */
  
  /* --- Butterweiche Animationen --- */
  --transition-smooth: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  --shadow-glow: 0 8px 32px var(--accent-rose-glow);
}

/* Grundlegendes Reset & Body Setup */
body {
  background-color: var(--bg-main);
  color: var(--text-primary);
  font-family: 'Inter', sans-serif; /* Clean und modern */
  line-height: 1.6;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased; /* Macht die Schrift im Dark Mode weicher */
}

/* Animierte Basis-Links */
a {
  color: var(--accent-rose);
  text-decoration: none;
  transition: var(--transition-smooth);
}

a:hover {
  color: var(--accent-gold);
}

/* ==========================================================================
   2. MIDNIGHT ELEGANCE: HEADER & MOBILE NAVIGATION
   ========================================================================== */

.glass-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  /* High Performance Background: Fast schwarz, keine Blur-Lags */
  background: rgba(11, 9, 15, 0.98); 
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  transition: var(--transition-smooth);
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 15px 30px;
}

/* Branding */
.site-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.site-title a {
  color: var(--text-primary);
}
.site-title a:hover {
  color: var(--accent-rose);
}

/* Verstecke den Ticket-Button auf kleinen Handys, damit es nicht gequetscht wird */
@media screen and (max-width: 767px) {
  .desktop-only {
    display: none;
  }
}

/* --- DESKTOP NAVIGATION --- */
@media screen and (min-width: 768px) {
  .menu-toggle {
    display: none; /* Hamburger auf Desktop verstecken */
  }

  .main-navigation ul {
    display: flex;
    gap: 35px;
    align-items: center;
    margin: 0;
    padding: 0;
  }
  
  .main-navigation li {
    list-style: none;
  }

  .main-navigation a {
    color: var(--text-primary);
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    position: relative;
    padding-bottom: 5px;
  }

  /* Animierter Hover-Unterstrich */
  .main-navigation a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--accent-rose);
    transition: var(--transition-smooth);
    box-shadow: 0 0 8px var(--accent-rose-glow);
  }

  .main-navigation a:hover::after {
    width: 100%;
  }
}

/* --- MOBILE NAVIGATION --- */
@media screen and (max-width: 767px) {
  .header-inner {
    padding: 15px 20px;
  }

  /* Hamburger Button Styling */
  .menu-toggle {
    background: transparent;
    border: none;
    padding: 10px;
    cursor: pointer;
    display: block;
  }

  .hamburger-box {
    width: 30px;
    height: 20px;
    display: inline-block;
    position: relative;
  }

  .hamburger-inner, 
  .hamburger-inner::before, 
  .hamburger-inner::after {
    width: 30px;
    height: 2px;
    background-color: var(--text-primary);
    border-radius: 4px;
    position: absolute;
    transition: transform 0.3s ease, background-color 0.3s ease;
  }

  .hamburger-inner { top: 50%; transform: translateY(-50%); }
  .hamburger-inner::before { content: ""; top: -8px; left: 0; }
  .hamburger-inner::after { content: ""; bottom: -8px; left: 0; }

  /* Das Dropdown-Menü für Handys */
  .main-navigation ul {
    display: none; /* Wird vom Underscores JS ein-/ausgeschaltet */
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: rgba(11, 9, 15, 0.98);
    padding: 20px 0;
    margin: 0;
    flex-direction: column;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  }

  /* Wenn das Menü aktiv ist (Klasse '.toggled' kommt vom Theme JS) */
  .main-navigation.toggled ul {
    display: flex;
  }

  .main-navigation li {
    list-style: none;
    margin: 15px 0;
  }

  .main-navigation a {
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
  }
}

/* --- Der moderne Call-to-Action "Pill" Button --- */
.btn-primary-pill {
  display: inline-block;
  background: var(--accent-rose);
  color: #fff !important;
  padding: 12px 30px;
  border-radius: 50px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.85rem;
  box-shadow: var(--shadow-glow);
  transition: var(--transition-smooth);
  border: 1px solid transparent;
}

.btn-primary-pill:hover {
  background: transparent;
  color: var(--accent-rose) !important;
  border-color: var(--accent-rose);
  transform: translateY(-3px); 
  box-shadow: 0 15px 35px rgba(226, 125, 154, 0.6);
}

/* ==========================================================================
   3. MIDNIGHT ELEGANCE: HERO SECTION
   ========================================================================== */

.hero-section {
  position: relative;
  min-height: 100vh; /* Nimmt die volle Bildschirmhöhe ein */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 20px 60px;
  overflow: hidden;
  text-align: center;
}



.hero-content {
  max-width: 900px;
  z-index: 1;
  animation: fadeUpIn 1s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

/* Einlauf-Animation für den Content */
@keyframes fadeUpIn {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Der kleine goldene Badge über dem Titel */
.hero-badge {
  display: inline-block;
  background: rgba(212, 175, 55, 0.1);
  color: var(--accent-gold);
  padding: 6px 18px;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 25px;
  border: 1px solid rgba(212, 175, 55, 0.3);
}

.hero-title {
  font-size: clamp(3rem, 8vw, 6rem); /* Skaliert automatisch auf Handys kleiner */
  line-height: 1.1;
  margin: 0 0 25px;
  font-weight: 800;
  letter-spacing: -2px;
}

/* Text-Gradient für das Wort "Mamá" (macht es super edel) */
.text-gradient {
  background: linear-gradient(45deg, var(--accent-rose), #FFB6C1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-subtitle {
  font-size: 1.15rem;
  color: var(--text-muted);
  margin-bottom: 50px;
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
}

/* High-Performance Cards */
.glass-card {
  background: #17131F; /* Solide Farbe statt Transparenz-Berechnung */
  border: 1px solid rgba(255, 255, 255, 0.08); /* Feiner Rahmen für den Premium-Look */
  border-radius: var(--border-radius-modern);
  padding: 35px 50px;
  display: flex;
  justify-content: center;
  gap: 60px;
  margin-bottom: 50px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s ease; /* Nur transform animieren für 60 FPS */
}

.glass-card:hover {
  transform: translateY(-5px);
  border-color: rgba(226, 125, 154, 0.3); /* Leuchtet beim Hovern sanft rose auf */
}

.detail-item {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.detail-item strong {
  color: var(--accent-gold);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 8px;
}

.detail-item span {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text-primary);
}

/* Mobile Anpassung für Handys */
@media screen and (max-width: 768px) {
  .glass-card {
    flex-direction: column;
    gap: 25px;
    padding: 30px;
    text-align: center;
  }
  .detail-item {
    text-align: center;
  }
}

/* ==========================================================================
   4. MIDNIGHT ELEGANCE: SECTIONS (Line-Up & Pricing)
   ========================================================================== */

/* Globale Sektions-Titel */
.section-title {
  font-size: clamp(2rem, 5vw, 3rem);
  text-align: center;
  font-weight: 800;
  margin-bottom: 15px;
  letter-spacing: -1px;
}

.section-subtitle {
  text-align: center;
  color: var(--text-muted);
  max-width: 600px;
  margin: 0 auto 50px auto;
}

/* --- Line-Up Slider (CSS-only Scroll Snap) --- */
.lineup-section {
  padding: 100px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.artist-slider {
  display: flex;
  gap: 30px;
  overflow-x: auto;
  padding: 20px 0 40px;
  scroll-snap-type: x mandatory; /* Weiches Einrasten beim Scrollen */
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.artist-slider::-webkit-scrollbar {
  display: none; /* Versteckt Scrollbar für cleanen Look */
}

.artist-card {
  min-width: 280px;
  flex: 0 0 auto;
  scroll-snap-align: start;
  padding: 20px;
  text-align: center;
}

/* Platzhalter-Bild (Leuchtendes Fragezeichen) */
.artist-image-placeholder {
  width: 100%;
  height: 280px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(23, 19, 31, 0.8), rgba(11, 9, 15, 0.9));
  border: 1px dashed rgba(226, 125, 154, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: var(--transition-smooth);
}

.artist-card:hover .artist-image-placeholder {
  border-color: var(--accent-rose);
  box-shadow: inset 0 0 30px rgba(226, 125, 154, 0.1);
}

.secret-mark {
  font-size: 5rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.05);
  background: linear-gradient(45deg, var(--text-muted), var(--accent-rose));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.artist-name {
  font-size: 1.5rem;
  margin: 0 0 5px;
}

.artist-genre {
  color: var(--accent-gold);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0;
}

/* --- Ticket Pricing --- */
.pricing-section {
  padding: 100px 20px;
  max-width: 1000px;
  margin: 0 auto;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
  margin-top: 50px;
}

.pricing-card {
  position: relative;
  padding: 50px 40px;
  display: flex;
  flex-direction: column;
}

/* Highlight für das Online Ticket */
.premium-card {
  border: 1px solid rgba(212, 175, 55, 0.4);
  box-shadow: 0 20px 50px rgba(212, 175, 55, 0.1);
  transform: scale(1.02);
}

.premium-card:hover {
  border-color: var(--accent-gold);
}

.card-badge {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent-gold);
  color: var(--bg-main);
  padding: 5px 20px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.ticket-type {
  font-size: 1.5rem;
  margin: 0;
  text-align: center;
}

.ticket-price {
  font-size: 4rem;
  font-weight: 800;
  text-align: center;
  margin: 10px 0 20px;
  background: linear-gradient(45deg, #fff, var(--text-muted));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.premium-card .ticket-price {
  background: linear-gradient(45deg, var(--accent-gold), #fff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ticket-desc {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-bottom: 30px;
}

.ticket-features {
  list-style: none;
  padding: 0;
  margin: 0 0 40px 0;
  flex-grow: 1; /* Schiebt den Button immer ganz nach unten */
}

.ticket-features li {
  margin-bottom: 15px;
  font-size: 0.95rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 10px;
}

.ticket-features li.faded {
  opacity: 0.4;
}

/* Full Width Button Modifier */
.full-width {
  width: 100%;
  text-align: center;
}

/* Sekundärer Button (Abendkasse Info) */
.btn-secondary-pill {
  display: inline-block;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
  padding: 12px 30px;
  border-radius: 50px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.85rem;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: default;
}

/* ==========================================================================
   5. MIDNIGHT ELEGANCE: FOOTER & AGENCY CREDITS
   ========================================================================== */

.site-footer {
  background: #060508; /* Noch dunkler als der restliche Hintergrund */
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding: 80px 20px 30px;
  margin-top: 80px;
  font-size: 0.9rem;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* Obere Spalten (Veranstalter) */
.footer-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 40px;
  margin-bottom: 60px;
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-col h3 {
  color: var(--text-primary);
  font-size: 1.1rem;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.footer-col p {
  color: var(--text-muted);
  line-height: 1.8;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 10px;
}

.footer-links a {
  color: var(--text-muted);
}

.footer-links a:hover {
  color: var(--accent-rose);
  padding-left: 5px;
}

/* --- Agentur Box (Chelo Lima) --- */
.footer-agency {
  text-align: center;
}

.agency-header {
  margin-bottom: 25px;
}

.agency-label {
  display: block;
  color: var(--text-muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 10px;
}

.agency-name {
  font-size: 2rem;
  font-weight: 800;
  color: var(--text-primary);
  background: linear-gradient(45deg, #fff, var(--text-muted));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -1px;
}

.agency-name:hover {
  background: linear-gradient(45deg, var(--accent-rose), #FFB6C1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.agency-details {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-bottom: 30px;
  line-height: 1.8;
}

.agency-details p {
  margin: 5px 0;
}

.agency-details strong {
  color: var(--text-primary);
}

.agency-slogan {
  color: var(--accent-rose);
  font-style: italic;
  margin-top: 15px !important;
}

.site-info {
  color: rgba(163, 155, 174, 0.5); /* Sehr dezent */
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ==========================================================================
   6. MIDNIGHT ELEGANCE: WOOCOMMERCE CORE STYLING
   ========================================================================== */

/* Buttons: Warenkorb, Kasse, etc. */
.woocommerce #respond input#submit, 
.woocommerce a.button, 
.woocommerce button.button, 
.woocommerce input.button,
.woocommerce #respond input#submit.alt, 
.woocommerce a.button.alt, 
.woocommerce button.button.alt, 
.woocommerce input.button.alt {
    background-color: var(--accent-rose);
    color: #fff;
    border-radius: 50px; /* Pill-Design */
    padding: 12px 30px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: var(--transition-smooth);
    border: 1px solid transparent;
    box-shadow: var(--shadow-glow);
}

.woocommerce a.button:hover, 
.woocommerce button.button:hover {
    background-color: transparent;
    color: var(--accent-rose) !important;
    border-color: var(--accent-rose);
    transform: translateY(-2px);
}

/* Preise: Das Gold-Highlight */
.woocommerce div.product p.price, 
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price {
    color: var(--accent-gold) !important;
    font-weight: 800;
}

/* Formularfelder (Checkout & Account) */
.woocommerce-checkout input[type="text"], 
.woocommerce-checkout select, 
.woocommerce-checkout textarea,
.woocommerce-cart input[type="text"],
.woocommerce-input-wrapper input {
    background-color: var(--bg-surface) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--text-primary) !important;
    border-radius: 12px !important;
    padding: 10px 15px !important;
}

/* Warenkorb-Tabelle & Checkout-Review */
.woocommerce-cart-form, 
.woocommerce-checkout-review-order {
    background: var(--bg-surface);
    border: var(--border-subtle);
    border-radius: var(--border-radius-modern);
    padding: 30px;
}

/* Produktbild-Bereich */
.woocommerce div.product div.images img {
    border-radius: var(--border-radius-modern);
    border: var(--border-subtle);
}

/* Produkt-Zusammenfassung (Titel, Preis, Kauf-Button) */
.woocommerce div.product div.summary h1.product_title {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 15px;
}

/* FooEvents Ticket-Details & Variationen */
.fooevents_ticket_configuration, .variations {
    background: rgba(255, 255, 255, 0.02);
    padding: 20px;
    border-radius: 16px;
    border: 1px dashed rgba(226, 125, 154, 0.2);
    margin-bottom: 25px;
}

/* WooCommerce Mitteilungen (z.B. "Produkt zum Warenkorb hinzugefügt") */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
    background-color: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border-top-color: var(--accent-rose) !important;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.woocommerce-message::before { color: var(--accent-rose) !important; }

#place_order {
    font-size: 1.1rem !important;
    padding: 20px !important;
    width: 100%;
    margin-top: 20px;
    background: linear-gradient(45deg, var(--accent-rose), #FFB6C1) !important;
}

/* ==========================================================================
   7. SHOP LAYOUT & CONTAINER
   ========================================================================== */

.shop-container {
    max-width: 1200px;
    margin: 160px auto 80px; /* Viel Platz nach oben wegen dem Sticky Header */
    padding: 0 20px;
}

/* Anpassung der WooCommerce-Spalten (Produktraster) */
.woocommerce ul.products {
    margin: 40px 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

/* Die einzelnen Produkt-Karten im Shop */
.woocommerce ul.products li.product {
    background: var(--bg-surface);
    border: var(--border-subtle);
    border-radius: var(--border-radius-modern);
    padding: 20px;
    transition: var(--transition-smooth);
    text-align: center;
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-10px);
    border-color: var(--accent-rose);
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

.woocommerce ul.products li.product img {
    border-radius: 16px;
    margin-bottom: 20px;
}

/* ==========================================================================
   8. MIDNIGHT ELEGANCE: CHECKOUT & CART UI FIX
   ========================================================================== */

/* Hintergründe für Tabellen und Boxen auf der Kassen-Seite */
.woocommerce-checkout-review-order, 
.woocommerce-cart-form,
.woocommerce-checkout #payment,
.shop_table.wrapper {
    background: var(--bg-surface) !important;
    border: var(--border-subtle) !important;
    color: var(--text-primary) !important;
}

/* Texte und Label in Formularen sichtbar machen */
.woocommerce form .form-row label,
.woocommerce-checkout h3,
#order_review_heading {
    color: var(--text-primary) !important;
    font-weight: 700;
    text-transform: uppercase;
    margin-top: 20px;
}

/* Tabellen-Header */
.woocommerce table.shop_table th {
    background: rgba(255, 255, 255, 0.05);
    color: var(--accent-gold);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Input Felder in der Kasse */
.woocommerce-checkout input.input-text, 
.woocommerce-main-fields input {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

/* Button für "Kostenpflichtig bestellen" */
#place_order {
    background-color: var(--accent-rose) !important;
    color: #fff !important;
    font-size: 1.2rem !important;
    font-weight: 800 !important;
    padding: 20px !important;
}


/* ==========================================================================
   9. COMPLETE UI OVERHAUL: WOOCOMMERCE & FOOEVENTS DARK MODE
   ========================================================================== */

/* --- 9.1. Globale Formular-Elemente (Input, Select, Textarea) --- */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"],
select, textarea, .select2-container--default .select2-selection--single {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    border-radius: 12px !important;
    padding: 12px 15px !important;
    transition: var(--transition-smooth);
}

input:focus, select:focus, textarea:focus {
    border-color: var(--accent-rose) !important;
    outline: none;
    background-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 0 10px var(--accent-rose-glow);
}

/* Platzhalter Text */
::placeholder { color: rgba(255, 255, 255, 0.3) !important; }

/* --- 9.2. Warenkorb (Cart) Page --- */
.woocommerce-cart-form {
    background: var(--bg-surface);
    border-radius: var(--border-radius-modern);
    padding: 20px;
    border: var(--border-subtle);
}

.shop_table {
    border-collapse: separate !important;
    border-spacing: 0 10px !important;
}

.shop_table thead th {
    color: var(--accent-gold) !important;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
    border: none !important;
    padding: 15px !important;
}

.cart_item td {
    background: rgba(255, 255, 255, 0.02);
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding: 20px !important;
    color: var(--text-primary) !important;
}

/* Entfernen-Button (X) */
.woocommerce a.remove {
    color: #ff4d4d !important;
    background: rgba(255, 77, 77, 0.1) !important;
}

/* Warenkorb Summen (Cart Totals) */
.cart-collaterals {
    margin-top: 40px;
}

.cart_totals {
    background: var(--bg-surface);
    padding: 30px;
    border-radius: var(--border-radius-modern);
    border: 1px solid var(--accent-gold);
}

.cart_totals h2 {
    color: #fff;
    font-size: 1.5rem;
}

/* --- 9.3. Kasse (Checkout) & Teilnehmer-Felder --- */
.woocommerce-checkout #customer_details h3, 
#order_review_heading {
    color: var(--text-primary);
    font-weight: 800;
    margin: 40px 0 20px;
    text-transform: uppercase;
}

/* FooEvents & WooCommerce Labels */
label {
    color: var(--text-muted) !important;
    font-weight: 500 !important;
    margin-bottom: 8px !important;
    display: inline-block;
}

/* Pflichtfeld-Stern */
.required { color: var(--accent-rose) !important; }

/* Zahlungsmethoden Box */
#payment {
    background: rgba(255, 255, 255, 0.03) !important;
    border-radius: 16px !important;
    padding: 20px !important;
}

#payment ul.payment_methods li {
    color: var(--text-primary) !important;
    background: rgba(255, 255, 255, 0.02);
    margin-bottom: 10px;
    padding: 15px;
    border-radius: 10px;
}

.payment_box {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--text-muted) !important;
}

/* --- 9.4. FooEvents Kalender & Ticket-Optionen --- */
.fooevents-calendar-container, .fooevents_ticket_configuration {
    background: var(--bg-surface) !important;
    border: 1px dashed var(--accent-rose) !important;
    padding: 25px !important;
    border-radius: 20px !important;
}

/* Teilnehmer-Informationen (Attendee Fields) */
.fooevents_attendee_fields {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* --- 9.5. Nachrichten & Validierung --- */
.woocommerce-error, .woocommerce-message, .woocommerce-info {
    background: var(--bg-surface) !important;
    color: #fff !important;
    border-radius: 12px !important;
    border: none !important;
    border-left: 5px solid var(--accent-rose) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.woocommerce-error { border-left-color: #ff4d4d !important; }

/* --- 9.6. Buttons (Final State) --- */
.woocommerce button.button.alt, 
.woocommerce a.button.alt, 
#place_order, 
.wc-backward {
    background: linear-gradient(45deg, var(--accent-rose), #FFB6C1) !important;
    color: #000 !important; /* Schwarz auf Rose für Lesbarkeit */
    font-weight: 800 !important;
    border-radius: 50px !important;
    padding: 18px 35px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    box-shadow: var(--shadow-glow) !important;
    border: none !important;
}

.woocommerce button.button.alt:hover {
    transform: scale(1.03) !important;
    box-shadow: 0 15px 40px rgba(226, 125, 154, 0.5) !important;
}

/* ==========================================================================
   11. MIDNIGHT ELEGANCE: SIDE CART OVERRIDE (FIX)
   ========================================================================== */

/* --- 1. Alle Texte & Überschriften hell machen --- */
.xoo-wsc-container *,
.xoo-wsc-cart *,
.xoo-wsc-header *,
.xoo-wsc-body *,
.xoo-wsc-footer * {
    color: var(--text-primary) !important;
}

/* Subtexte (wie "Menge" oder "Versand, Steuern...") etwas dezenter */
.xoo-wsc-smr-qty, 
.xoo-wsc-footer p {
    color: var(--text-muted) !important;
    font-size: 0.85rem !important;
}

/* --- 2. Das hässliche gelbe Preis-Highlight reparieren --- */
.xoo-wsc-product ins, 
.xoo-wsc-cart ins {
    background: transparent !important; /* Entfernt das gelbe Feld */
    color: var(--accent-gold) !important;
    text-decoration: none !important;
    font-weight: 800 !important;
}

/* Der durchgestrichene Originalpreis (15€) */
.xoo-wsc-product del, 
.xoo-wsc-cart del {
    color: rgba(255, 255, 255, 0.3) !important; /* Sehr dezent im Hintergrund */
}

/* Zwischensumme Highlight */
.xoo-wsc-ft-amt, 
.xoo-wsc-ft-amt bdi {
    color: var(--accent-gold) !important;
}

/* --- 3. Die Buttons an unser Design anpassen --- */
.xoo-wsc-footer a.button {
    display: block !important;
    width: 100% !important;
    border-radius: 50px !important; /* Unser Pill-Design */
    padding: 15px !important;
    margin-bottom: 12px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-align: center !important;
    transition: var(--transition-smooth) !important;
}

/* Die sekundären Buttons ("Warenkorb ansehen", "Weiter einkaufen") */
.xoo-wsc-footer a.button:not(.checkout) {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--text-primary) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.xoo-wsc-footer a.button:not(.checkout):hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Der primäre Checkout-Button ("Zur Kasse") */
.xoo-wsc-footer a.button.checkout {
    background: linear-gradient(45deg, var(--accent-rose), #FFB6C1) !important;
    color: #000 !important; /* Schwarz auf Rose für perfekten Kontrast */
    border: none !important;
    font-weight: 800 !important;
    box-shadow: var(--shadow-glow) !important;
}

.xoo-wsc-footer a.button.checkout:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 15px 30px rgba(226, 125, 154, 0.4) !important;
}

/* Header & Close Icon Kontrast */
.xoo-wsc-ch-txt {
    color: var(--text-primary) !important;
}
.xoo-wsc-close {
    color: #fff !important;
    font-size: 24px !important;
    opacity: 0.7 !important;
}
.xoo-wsc-close:hover {
    opacity: 1 !important;
}


/* ==========================================================================
   12. MIDNIGHT ELEGANCE: WOOCOMMERCE BLOCKS CHECKOUT FIX
   ========================================================================== */

/* --- 1. Eingabefelder: Textfarbe und Hintergrund reparieren --- */
.wc-block-checkout input[type="text"],
.wc-block-checkout input[type="email"],
.wc-block-checkout input[type="tel"],
.wc-block-components-text-input input,
.wc-block-components-text-input input:-webkit-autofill {
    color: #ffffff !important; /* Weißer Text für deine Eingaben */
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Der Container um die Eingabefelder */
.wc-block-components-text-input,
.wc-block-components-select-input {
    background-color: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
}

/* Aktives Feld leuchtet leicht auf */
.wc-block-components-text-input.is-active,
.wc-block-components-select-input.is-active {
    border-color: var(--accent-rose) !important;
    box-shadow: 0 0 10px var(--accent-rose-glow) !important;
}

/* Floating Labels (Die kleinen Titel wie "Vorname", "Straße") */
.wc-block-components-text-input label,
.wc-block-components-select-input label {
    color: var(--text-muted) !important;
}

/* --- 2. Dropdown Menüs (Land & Bundesland) fixen --- */
.wc-block-components-select-input select {
    background-color: #17131F !important; /* Unser tiefes dunkles Lila/Schwarz */
    color: #ffffff !important;
}

/* Die ausklappbare Liste der Dropdowns */
.wc-block-components-select-input select option {
    background-color: #17131F !important;
    color: #ffffff !important;
}

/* --- 3. Das gelbe Preis-Highlight in der Bestellübersicht zerstören --- */
.wc-block-components-product-price mark,
.wc-block-components-product-price .wc-block-components-formatted-money-amount.is-discounted {
    background-color: transparent !important; /* Weg mit dem Gelb! */
    color: var(--accent-gold) !important; /* Edles Gold stattdessen */
    padding: 0 !important;
}

/* Durchgestrichener alter Preis */
.wc-block-components-product-price__regular .wc-block-components-formatted-money-amount {
    color: rgba(255, 255, 255, 0.3) !important;
}

/* --- 4. Allgemeine Texte in der Kasse hell machen --- */
.wc-block-checkout, 
.wc-block-components-checkout-step__heading,
.wc-block-components-order-summary__button {
    color: var(--text-primary) !important;
}

/* --- 5. Checkout Buttons --- */
.wc-block-components-checkout-place-order-button {
    background: linear-gradient(45deg, var(--accent-rose), #FFB6C1) !important;
    color: #000 !important; /* Schwarzer Text für besten Kontrast */
    border-radius: 50px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    padding: 18px !important;
    border: none !important;
}

.wc-block-components-checkout-place-order-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(226, 125, 154, 0.4) !important;
}

/* ==========================================================================
   13. MIDNIGHT ELEGANCE: WOOCOMMERCE BLOCKS (NUCLEAR FIX)
   ========================================================================== */

/* --- 1. DAS GELBE PREIS-KÄSTCHEN ENDGÜLTIG ZERSTÖREN --- */
.wc-block-components-order-summary mark,
.wc-block-components-product-price mark,
.wc-block-checkout mark,
mark {
    background: transparent !important;
    color: var(--accent-gold) !important;
    padding: 0 !important;
}

/* --- 2. DIE REACT-DROPDOWNS (BUNDESLAND/LAND) FIXEN --- */
/* Das schwebende Popup-Fenster selbst */
.components-popover__content,
.components-dropdown-menu__menu,
.components-custom-select-control__menu,
.components-combobox-control__suggestions-container {
    background-color: #17131F !important; /* Unser Midnight-Hintergrund */
    border: 1px solid rgba(226, 125, 154, 0.3) !important; /* Zarter Rosa-Rand */
    box-shadow: 0 15px 40px rgba(0,0,0,0.8) !important;
    border-radius: 12px !important;
}

/* Die einzelnen Listen-Elemente im Dropdown (wie "Lima", "Cusco") */
.components-custom-select-control__item,
.components-combobox-control__suggestion,
.components-combobox-control__suggestion-match {
    color: #ffffff !important; /* Weiße Schrift */
    background-color: transparent !important;
}

/* Wenn man mit der Maus drüberfährt (Hover) oder auswählt */
.components-custom-select-control__item:hover,
.components-combobox-control__suggestion:hover,
.components-combobox-control__suggestion.is-selected {
    background-color: var(--accent-rose) !important; /* Unser Altrosa */
    color: #000 !important; /* Schwarze Schrift auf Rosa für Lesbarkeit */
}

/* --- 3. AUTOFILL & INPUT TEXT ÜBERSCHNEIDUNG FIXEN --- */
/* Zwingt den Text, weiß zu bleiben, auch wenn der Browser ihn automatisch ausfüllt */
.wc-block-components-text-input input,
.wc-block-components-combobox-control input,
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-text-fill-color: #ffffff !important;
    -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

/* Das ausgewählte Wort (z.B. Lima) sichtbar machen */
.wc-block-components-combobox-control input {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* ==========================================================================
   14. WOOCOMMERCE BLOCKS CHECKOUT: DEEP REACT FIXES
   ========================================================================== */

/* --- 1. Fix the "is-active" state forcing a white background --- */
.wc-block-checkout .wc-block-components-text-input.is-active,
.wc-block-checkout .wc-block-components-text-input.is-active input,
.wc-block-checkout .wc-block-components-select-input.is-active,
.wc-block-checkout .wc-block-components-address-form .is-active {
    background-color: transparent !important;
    color: #ffffff !important;
}

/* Ensure inputs remain dark and text is white */
.wc-block-checkout .wc-block-components-text-input input[type="text"],
.wc-block-checkout .wc-block-components-text-input input[type="email"],
.wc-block-checkout .wc-block-components-text-input input[type="tel"] {
    background-color: transparent !important;
    color: #ffffff !important;
    border: none !important;
}

/* --- 2. Nuclear Option for the React Combobox/Dropdowns --- */
/* Target the select element itself */
.wc-block-checkout .wc-blocks-components-select__select,
.wc-block-checkout .wc-block-components-country-input select,
.wc-block-checkout .wc-block-components-state-input select {
    background-color: #17131F !important; /* Midnight Elegance Background */
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    -webkit-appearance: none !important; /* Remove default browser styling */
    -moz-appearance: none !important;
    appearance: none !important;
}

/* Force the options within the select to be dark */
.wc-block-checkout .wc-blocks-components-select__select option {
    background-color: #17131F !important;
    color: #ffffff !important;
}

/* Fix the dropdown icon (SVG) color to match our dark mode */
.wc-block-checkout .wc-blocks-components-select__expand {
    fill: #ffffff !important;
    color: #ffffff !important;
}

/* Override the wrapping container background */
.wc-block-checkout .wc-blocks-components-select {
    background-color: transparent !important;
}

/* --- 3. Fix the Yellow Discount Highlight --- */
/* Target the specific tags WooCommerce uses for the old price and discount */
.wc-block-components-product-price ins.is-discounted,
.wc-block-components-product-price ins {
    background-color: transparent !important;
    color: var(--accent-gold) !important;
    text-decoration: none !important;
}

/* Ensure the strike-through price looks subtle */
.wc-block-components-product-price del {
    color: rgba(255, 255, 255, 0.4) !important;
}


/* ==========================================================================
   15. MIDNIGHT ELEGANCE: SPACING FIX & BUTTON POLISH (THE FINAL TOUCH)
   ========================================================================== */

/* --- 1. SPACING FIX: Platz zwischen den Eingabefeldern schaffen --- */
/* Verhindert das Überlappen von Feldern wie Vorname, Nachname und Adresse */
.wc-block-components-text-input,
.wc-block-components-select-input,
.wc-block-components-combobox-control,
.wc-block-components-country-input,
.wc-block-components-state-input {
    margin-bottom: 25px !important; 
}

/* --- 2. TEXT FIX: Rechnungsadresse (Zweite Zeile) gut lesbar machen --- */
.wc-block-components-address-card__address-section--secondary {
    color: rgba(255, 255, 255, 0.8) !important; /* Heller und deutlich lesbar */
    line-height: 1.6 !important;
    margin-top: 5px !important;
    display: block !important;
}

/* --- 3. WOOCOMMERCE BLOCKS BUTTONS (Kasse & Warenkorb) --- */
/* Primäre Buttons: "Weiter zur Kasse" & "Weiter zu PayPal" */
.wc-block-components-button.wc-block-cart__submit-button,
.wc-block-components-button.wc-block-components-checkout-place-order-button {
    background: linear-gradient(45deg, var(--accent-rose), #FFB6C1) !important;
    color: #000000 !important; /* Schwarzer Text für krassen Kontrast */
    border-radius: 50px !important; /* Pill-Shape */
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 18px 35px !important;
    border: none !important;
    box-shadow: 0 8px 25px rgba(226, 125, 154, 0.4) !important;
    transition: all 0.3s ease !important;
    width: 100% !important; /* Macht den Button schön massiv */
    justify-content: center !important;
}

.wc-block-components-button.wc-block-cart__submit-button:hover,
.wc-block-components-button.wc-block-components-checkout-place-order-button:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 35px rgba(226, 125, 154, 0.6) !important;
}

/* Sekundärer Link: "Zurück zum Warenkorb" (Kasse) */
.wc-block-components-checkout-return-to-cart-button {
    color: var(--text-muted) !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    letter-spacing: 1px !important;
    transition: all 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    margin-bottom: 25px !important; /* Abstand zum PayPal Button */
}

.wc-block-components-checkout-return-to-cart-button:hover {
    color: var(--accent-rose) !important;
}

.wc-block-components-checkout-return-to-cart-button svg {
    fill: currentColor !important; /* Das Pfeil-Icon nimmt automatisch die Textfarbe an */
    margin-right: 8px !important;
}

/* --- 4. SIDE CART BUTTONS (xoo-wsc) UPDATE --- */
/* Flex-Container für saubere Abstände untereinander */
.xoo-wsc-ft-buttons-cont {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important; /* Perfekter Abstand zwischen den Buttons */
    margin-top: 20px !important;
}

.xoo-wsc-ft-btn {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 50px !important;
    padding: 16px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
    text-decoration: none !important;
}

/* Primärer "Zur Kasse" Button im Side Cart */
.xoo-wsc-ft-btn-checkout {
    background: linear-gradient(45deg, var(--accent-rose), #FFB6C1) !important;
    color: #000000 !important;
    font-weight: 800 !important;
    box-shadow: 0 8px 25px rgba(226, 125, 154, 0.4) !important;
    border: none !important;
}

.xoo-wsc-ft-btn-checkout:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 35px rgba(226, 125, 154, 0.6) !important;
}

/* Sekundäre Buttons ("Warenkorb ansehen" & "Weiter einkaufen") */
.xoo-wsc-ft-btn-cart,
.xoo-wsc-ft-btn-continue {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.xoo-wsc-ft-btn-cart:hover,
.xoo-wsc-ft-btn-continue:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: var(--accent-rose) !important;
}


/* ==========================================================================
   16. MIDNIGHT ELEGANCE: SHOP GRID FIX (PRODUKT-KARTEN)
   ========================================================================== */

/* Zwingt die Liste in ein modernes, flexibles Grid */
.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Die einzelne Ticket-Karte */
.woocommerce ul.products li.product {
    width: 100% !important; /* Ignoriert das kaputte WooCommerce-Spalten-System */
    margin: 0 !important;
    background-color: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    padding: 20px !important;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover-Effekt (Karte hebt sich leicht an) */
.woocommerce ul.products li.product:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(226, 125, 154, 0.15) !important;
    border-color: rgba(226, 125, 154, 0.3) !important;
}

/* Produktbild anpassen */
.woocommerce ul.products li.product img {
    border-radius: 12px;
    margin-bottom: 15px;
    width: 100%;
    height: auto;
}

/* Titel und Preis */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    color: #ffffff !important;
    font-size: 1.2rem !important;
    margin-bottom: 10px !important;
    padding: 0 10px;
}

.woocommerce ul.products li.product .price {
    color: var(--accent-gold) !important;
    font-weight: 800 !important;
    font-size: 1.1rem !important;
    margin-bottom: 20px !important;
    display: block;
}

/* "Angebot" Badge */
.woocommerce ul.products li.product .onsale {
    background-color: var(--accent-rose) !important;
    color: #000 !important;
    border-radius: 50px !important;
    padding: 5px 15px !important;
    font-weight: 800 !important;
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 9;
}

/* ==========================================================================
   17. MIDNIGHT ELEGANCE: WOOCOMMERCE PRODUCT TABS & REVIEWS
   ========================================================================== */

/* --- 1. Die Tab-Navigation (Die Leiste oben) --- */
.woocommerce div.product .woocommerce-tabs ul.tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 0 !important;
    margin: 0 0 20px 0 !important;
    border-bottom: none !important; /* Entfernt die hässliche Standard-Linie */
}

/* --- 2. Die einzelnen Tabs (Inaktiv) --- */
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 50px !important; /* Unser modernes Pill-Design */
    margin: 0 !important;
    transition: all 0.3s ease !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
    display: none !important; /* Entfernt WooCommerce Standard-Ecken */
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    color: var(--text-muted) !important;
    font-weight: 700 !important;
    padding: 12px 25px !important;
    display: block !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    text-decoration: none !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* --- 3. Der aktive Tab --- */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    background: linear-gradient(45deg, var(--accent-rose), #FFB6C1) !important;
    border-color: transparent !important;
    box-shadow: 0 5px 15px rgba(226, 125, 154, 0.3) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: #000000 !important; /* Schwarzer Text auf Rosa */
    font-weight: 800 !important;
}

/* --- 4. Der Inhaltsbereich (Beschreibung & Event Details) --- */
.woocommerce div.product .woocommerce-tabs .panel {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    padding: 30px !important;
    color: rgba(255, 255, 255, 0.8) !important; /* Weiches Weiß für Fließtext */
    line-height: 1.8 !important;
}

.woocommerce div.product .woocommerce-tabs .panel h2 {
    color: #ffffff !important;
    font-size: 1.5rem !important;
    margin-top: 0 !important;
    margin-bottom: 25px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

/* Spezifisch für die Event-Details (fettgedruckte Labels) */
.woocommerce-Tabs-panel--woocommerce_events b {
    color: var(--accent-gold) !important;
    margin-right: 5px !important;
}

/* --- 5. Rezensionen (Reviews Formular) --- */
.woocommerce-Reviews-title,
.comment-reply-title {
    color: #ffffff !important;
}

/* Bewertungs-Sterne in Gold */
.woocommerce p.stars a {
    color: var(--accent-gold) !important;
}

/* Absenden-Button für die Rezension */
.woocommerce #review_form #respond .form-submit input.submit {
    background: linear-gradient(45deg, var(--accent-rose), #FFB6C1) !important;
    color: #000000 !important;
    border-radius: 50px !important;
    font-weight: 800 !important;
    padding: 15px 35px !important;
    border: none !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.woocommerce #review_form #respond .form-submit input.submit:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 25px rgba(226, 125, 154, 0.4) !important;
}

/* --- Dynamisches Menü Styling --- */
.main-nav-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 30px;
}

.main-nav-list li a {
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 1px;
    transition: color 0.3s ease;
}

.main-nav-list li a:hover {
    color: var(--accent-rose);
}

/* Fix für mobile Endgeräte */
@media (max-width: 768px) {
    .main-nav-list {
        flex-direction: column;
        gap: 15px;
        display: none; /* Hier müsste später dein Mobile-Toggle greifen */
    }
}

/* --- Header Layout Flexbox --- */
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 50px;
    background-color: var(--bg-main); /* Dein dunkler Hintergrund */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Der leuchtende Ticket-Button oben rechts */
.header-ticket-btn {
    background: linear-gradient(45deg, var(--accent-rose), #FFB6C1);
    color: #000 !important;
    padding: 10px 25px;
    border-radius: 50px;
    font-weight: 800;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 5px 15px rgba(226, 125, 154, 0.4);
    transition: all 0.3s ease;
}

.header-ticket-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(226, 125, 154, 0.6);
}

/* ==========================================================================
   18. MIDNIGHT ELEGANCE: HEADER BUTTON FIX (KEIN UMBRUCH MEHR)
   ========================================================================== */

/* Der Container um den Button darf nicht gequetscht werden */
.header-actions {
    flex-shrink: 0 !important;
    margin-left: 20px !important;
}

/* Der Button selbst */
.header-ticket-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important; /* <- Das ist der Lebensretter: Verhindert den Zeilenumbruch! */
    padding: 12px 30px !important;
    line-height: 1 !important;
    
    /* Das bestehende Design */
    background: linear-gradient(45deg, var(--accent-rose), #FFB6C1) !important;
    color: #000 !important;
    border-radius: 50px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    box-shadow: 0 5px 15px rgba(226, 125, 154, 0.4) !important;
    transition: all 0.3s ease !important;
}

.header-ticket-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(226, 125, 154, 0.6) !important;
}