/* Alias auf die Theme-Hauptfarbe, egal wie sie heißt */
:root {
  --hm-primary: var(--primary,
                 var(--pretix-color-primary,
                 var(--pretix-primary-color, #2563eb)));
}

/* =======================
   DESKTOP-Layout (>= 992px)
   Varianten rechts, Beschreibung/Route links
   ======================= */
@media (min-width: 992px) {
  /* 2-Spalten-Layout */
  .item-with-variations {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2%;
    border-bottom: 3px solid #ddd !important;
  }

  /* Linke Spalte: Headline/Route */
  .item-with-variations .product-row.headline {
    width: 48%;
    flex: 0 0 48%;
  }

  /* Rechte Spalte: Varianten */
  .item-with-variations .variations {
    width: 48%;
    flex: 0 0 48%;
  }

  /* In der Headline nur die erste Spalte (Beschreibung/Route) zeigen */
  .item-with-variations .product-row.headline > .col-md-8 {
    width: 100%;
  }

  /* Availability-Box in der Headline ausblenden (weil rechts gezeigt) */
  .item-with-variations .product-row.headline > .availability-box {
   display: none !important;
  }

 /* Preis in der Headline ausblenden (weil rechts gezeigt) */
  .item-with-variations .product-row.headline > .price {
   display: none !important; 
  }

  /* Variationen horizontal strukturieren */
  .product-row.variation {

    display: flex;
    align-items: flex-start;
    gap: 0;  
  }

  /* Bootstrap-Gutter neutralisieren */
  .product-row.variation > [class^="col-"] {
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
  }

  /* Beschreibung nimmt den restlichen Platz */
  .product-row.variation > .col-md-8 {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Preis-Spalte korrekt einschränken */
  .product-row.variation > .col-md-2 {
    flex: 0 0 16.6667%;
    max-width: 16.6667%;
    min-width: 120px;
    margin-left: 0;
  }

  /* Availability-Box (Anzahl/Kaufen) rechts */
  .product-row.variation > .availability-box {
    flex: 0 0 auto;
    min-width: 130px;
    text-align: right;
    margin-left: 1rem;
  }

  /* Preistext rechtsbündig */
  .product-row.variation .price p {
    text-align: right;
    white-space: nowrap;
    margin: 0;
  }

  /* Erste Variation ohne obere Border */
  .variations > article:first-of-type.product-row::before {
    border-top: none !important;
  }
}

/* =======================
   MOBILE-Layout (< 992px)
   untereinander
   ======================= */
@media (max-width: 991.98px) {
  .item-with-variations {
    display: block;
  }

  .item-with-variations .product-row.headline,
  .item-with-variations .variations {
    width: 100%;
    flex: 0 0 100%;
  }
}

/* =======================
   Routenkarte Styling (global)
   ======================= */
.route-card {
  background: #f8f8f8;
  border: 2px solid #ddd;
  border-left: 6px solid #333;
  padding: 5px 0 0 10px;
  margin-top: 1.5em;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.4;
  margin-bottom: 10px;
}

.route-card table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.route-card td:first-child {
  width: 60px;
  white-space: nowrap;
  vertical-align: top;
  font-weight: bold;
  padding-right: 5px;
}

.route-card td:nth-child(2) {
  width: 100%;
  vertical-align: top;
}

.route-card td:nth-child(2) em {
  font-size: 12px;
  color: #666;
  display: block;
  margin-top: 2px;
  font-style: italic;
}

.route-card tr {
  border-bottom: 1px dotted #ccc;
}

.route-card tr:last-child {
  background-color: #f0f0f0;
  border-bottom: none;
  border-top: 2px solid #333;
}

.route-card tr:last-child td {
  padding-top: 6px;
  font-weight: 500;
}

.route-card tr + tr td {
  padding-top: 3px;
  padding-bottom: 3px;
}

.route-card tr:nth-child(even) {
  background-color: #fefefe;
}

/* =======================
   Cleaning & kleinere Anpassungen
   ======================= */

/* Hinweis-Absatz mit altem Link ausblenden */
p:has(a[href="?old=1"]) {
  display: none !important;
}

/* Monats-Selform & bestimmtes Aside ausblenden */
#monthselform,
aside.front-page[aria-labelledby="if-you-already-ordered-a-ticket"] {
 /*display: none !important;*/
}

/* Abschnittstitel innerhalb der Produktbeschreibung */
.product-description > h4.h4 {
  font-size: 1.2em;
  font-weight: 700;
  background: #f5f5f5;
  padding: 0.75em 1em;
  border-left: 6px solid var(--pretix-brand-primary);
  margin: 0 0 1em 0;
  color: #222;
}

/* Linien entfernen/vereinheitlichen */
.product-row.headline::before,
.product-row.simple::before {
  border-top: 0 none;
}

/* Info-Row verstecken (falls nicht gebraucht) */
.info-row {
  display: none;
}

.shuttle-intro {
  margin-bottom: 10px;
}

/* Variation-Description-Absätze verstecken (optional) */
.variation-description > p {
  /*display: none !important;*/
}

/* Kleinteile unter Preis verstecken (optional) */
.price > p > small {
  display: none !important;
}

/* Versteckte Artikel komplett verstecken */
article.hidden-article {
  display: none !important;
}


.hm-kidtag {
  display: inline-block;
  font-size: 0.85em;          
  line-height: 1.4;
  background: #e5e7eb;        /* kräftigeres Grau */
  color: #111827;             /* dunkler Text */
  padding: 0.2em 0.6em;       /* mehr Luft innen */
  border-radius: 9999px;      /* pillenförmig */
  font-weight: 500;
  vertical-align: baseline;
  border: 1px solid #d1d5db;  /* feiner Rahmen */
}

.hm-kidtag strong {
  font-weight: 700;
}

.hm-date-tag {
  display: inline-block;
  margin-left: 0.75em;       /* Abstand zum Titel */
  font-size: 0.9em;          /* leicht kleiner */
  color: #6b7280;            /* grau */
  font-weight: 400;
}


/* ==== Pretix Modern Light Touch ==== */

/* Grundfarben & Radius */
:root{
  --brand:#2f7ee5;
  --brand-dark:#1d5fc2;
  --radius:10px;
}

.main-box, .content{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,.05);
  padding:0px 24px 24px 24px;
  overflow:hidden;
  padding-bottom:0;
}

#content{
   padding-bottom:20px!important;
}

/* Footer */

footer{
  background:#f3f4f6;                
  color:#6b7280;
  font-size:14px;
  border-top:1px solid #e5e7eb;
  padding:16px 24px;
  margin:0 -24px -1px;
  padding:16px 24px; 
  border-bottom-left-radius:12px;
  border-bottom-right-radius:12px;
}


footer > nav > ul{
  margin-bottom:0px!important;
}

footer a{
  color:#6b7280 !important;
  text-decoration:none !important;
  transition:color .2s ease;
}
footer a:hover{ color:#111827 !important; }

@media (max-width:768px){
  .main-box, .content{ padding:18px; }
  footer{ margin:0 -18px -1px; padding:14px 18px; font-size:13px; }
}

/* ===== USP Cards – kompakt, ohne Scroll, dynamische Spalten ===== */

section.usp-grid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr)); /* 5 auf Desktop */
  gap:16px;
  margin:0 0 12px 0;
  padding:0;
  background:none;
  box-shadow:none;
  overflow:visible; /* kein Scrollen */
}

/* Stufenweise runter – nie horizontal scrollen */
@media (max-width:1200px){ section.usp-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
@media (max-width:992px){  section.usp-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width:720px){  section.usp-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:420px){  section.usp-grid{ grid-template-columns:1fr; } }

/* Karten: kleiner, luftiger, gleiche Höhe */
.usp-card{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  background:#fff;
  border-radius:10px;
  padding:14px 12px;
  text-align:center;
  border:1px solid rgba(0,0,0,.05);
  box-shadow:0 1px 2px rgba(0,0,0,.03);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.usp-card:hover{
  transform:translateY(-1px);
  box-shadow:0 2px 6px rgba(0,0,0,.06);
  border-color:rgba(0,0,0,.08);
}

/* === Veredelungen (subtil & modern) === */

/* 1) Gradient-Border nur bei Hover/Focus (zarter Ring) */
.usp-card::after{
  content:"";
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: linear-gradient(135deg, rgba(37,99,235,.30), rgba(59,130,246,.12), rgba(37,99,235,0));
  opacity:0; transition:opacity .18s ease;
  /* macht den feinen Ring statt echter Border */
  padding:1px; background-clip: padding-box, border-box;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
}
.usp-card:hover::after,
.usp-card:focus-within::after{ opacity:1; }

/* 2) Icon-Micro-motion + sanfter Drop-Shadow */
.usp-img{
  width:40px; height:40px;  /* Icon-Größe */
  margin-bottom:6px;
  display:inline-block; flex:0 0 auto;
  transition: transform .18s ease, filter .18s ease, opacity .18s ease;
  filter: drop-shadow(0 0 0 rgba(37,99,235,0));
}
.usp-card:hover .usp-img{
  transform: translateY(-2px);
  filter: drop-shadow(0 6px 8px rgba(37,99,235,.10));
  opacity:.98;
}

/* 3) Heading-Underline (smart, nur bei Hover sichtbar) */
.usp-card h3{
  font-size:clamp(.9rem, 1vw + .6rem, 1rem);
  font-weight:700;
  color:#0f172a;
  margin:0;
  position:relative; display:inline-block;
  letter-spacing:.2px;
}
.usp-card h3::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-4px; height:2px;
  background: linear-gradient(90deg, rgba(37,99,235,.18), rgba(37,99,235,0));
  transform: scaleX(0); transform-origin:left;
  transition: transform .22s ease;
  border-radius:2px;
}
.usp-card:hover h3::after{ transform: scaleX(1); }

/* Subline kompakt & gut umbrechend */
.usp-card p{
  font-size:clamp(.8rem, .8vw + .5rem, .9rem);
  line-height:1.35;
  color:#475569;
  margin:0;
  max-width:30ch;
}

/* Lesbarkeit & Accessibility */
.usp-card h3{ text-wrap: balance; }
.usp-card p { text-wrap: pretty; }
.usp-card:focus-within{
  outline:2px solid rgba(37,99,235,.22);
  outline-offset:3px;
}

/* Bewegungen respektieren */
@media (prefers-reduced-motion: reduce){
  .usp-card, .usp-img, .usp-card h3::after{ transition:none; }
  .usp-card:hover{ transform:none; }
}


/* Variante für bg_light_red – mit hellem Verlauf */
.bg_light_red::after {
  background: linear-gradient(
    135deg,
    rgba(242, 236, 230, 0.60),
    rgba(242, 236, 230, 0.25),
    rgba(242, 236, 230, 0)
  );
}

.bg_light_red h3::after {
  background: linear-gradient(90deg, rgba(242,236,230,1), rgba(242,236,230,0));
}

/* ===== Pretix Buttons – sanft abgerundete Ecken, Mengentasten ausgeschlossen ===== */

/* alle Buttons rund, außer Mengentasten (+ / -) */
.btn:not(.input-item-count-dec):not(.input-item-count-inc),
button:not(.input-item-count-dec):not(.input-item-count-inc),
input[type="submit"],
input[type="button"] {
  border-radius: 6px !important;    /* sanfte Rundung */
  overflow: hidden;
}

/* Mengentasten bleiben eckig */
.input-item-count-dec,
.input-item-count-inc {
  border-radius: 0 !important;
}

/* optional: sanfter Hover-Übergang für alle */
.btn:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}


/* 🔹 Originale Pretix-Testmodus-Warnung ausblenden */
.alert-testmode:not(.custom-testmode-warning) {
  display: none !important;
}

/* Neue Custom-Warnung: unten links, klein & dezent */
.custom-testmode-warning {
  position: fixed;
  bottom: -20px;
  left: 0px;
  z-index: 9999;
  background: rgba(255, 193, 7, 0.65); /* Gelb, ca. 65 % Deckkraft */
  color: #000;
  font-size: 12px;
  font-weight: 500;
  text-align: left;
  border: none;
  border-radius: 0; /* viereckig */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(2px);
  max-width:320px;
  width: auto;
}

/* Sanfter Hover-Effekt */
.custom-testmode-warning:hover {
  background: rgba(255, 193, 7, 0.85);
}

/* Mobile Anpassung */
@media (max-width: 600px) {
  .custom-testmode-warning {
    font-size: 11px;
    bottom: 8px;
    left: 8px;
    max-width: 260px;
    padding: 5px 8px;
  }
}


/* === Sprachmenü – ultra clean & flach === */
nav.locales {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  text-align: right;
  margin: 0;
  padding: 0;
}

nav.locales ul {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

nav.locales li {
  display: inline-block;
  margin: 0;
  padding: 0;
  position: relative;
}

/* Sprachlinks allgemein */
nav.locales a {
  text-decoration: none;
  padding: 2px 6px;
  border-radius: 4px;
  transition: all 0.2s ease;
  opacity: 0.6;
}

/* Aktive Sprache schlicht hervorgehoben */
nav.locales a.active {
  font-weight: 600;
  opacity: 1;
  background: none;
}

nav.locales a:hover{
  text-decoration:none;
}

/* Hover: leicht abdunkeln */
nav.locales a:not(.active):hover {
  opacity: 0.9;
  color: #222;
  background: #f6f6f6;
}

/* Dezente vertikale Trennlinie */
nav.locales li:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 12px;
  background: #ddd;
  margin-left: 8px;
  vertical-align: middle;
}

/* Mobile Optimierung */
@media (max-width: 600px) {
  nav.locales ul { gap: 6px; }
  nav.locales a {
    font-size: 12px;
    padding: 2px 4px;
  }
}

/* Uhrzeit im Warenkorb ausblenden, Datum bleibt sichtbar */
.cart-row time[data-time-short] {
    display: none !important;
}

#questions_group .addon-list time[data-time-short] {
  display: none !important;
}

.label-lg {
  font-size: 16px !important;
  padding: 10px 16px !important;
}

.profile-save-container{
  display:none!important;
}


/* ===========================================
   MOBILE FIX
   =========================================== */

@media screen and (max-width: 767px) {

  /* -----------------------------------------
     1. USP BOXEN - Kompakter auf Mobile
     ----------------------------------------- */
  
  /* Beschreibungstext ausblenden */
  .usp-card p {
    display: none !important;
  }

  /* Karten kleiner & kompakter */
  .usp-card {
    padding: 10px 8px !important;
    gap: 4px !important;
  }

  /* Icons kleiner */
  .usp-img {
    width: 28px !important;
    height: 28px !important;
    margin-bottom: 2px !important;
  }

  /* Titel kleiner */
  .usp-card h3 {
    font-size: 11px !important;
    line-height: 1.2 !important;
  }

  /* Grid: 2 Spalten auf Mobile */
  section.usp-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
  }


  /* -----------------------------------------
     2. REGION BUTTONS - Besseres Styling
     ----------------------------------------- */

  /* Button Container */
  #route-select {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: center !important;
  }

  /* Einzelne Buttons */
  #route-select .label.label-lg {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: calc(50% - 4px) !important;
    padding: 14px 12px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 6px rgba(157, 0, 9, 0.3) !important;
  }

  /* &nbsp; zwischen Buttons entfernen (visuell) */
  #route-select a {
    margin: 0 !important;
  }

}


/* ===========================================
   EXTRA SMALL (< 400px)
   =========================================== */

@media screen and (max-width: 399px) {

  /* USP: 2 Spalten beibehalten, noch kompakter */
  section.usp-grid {
    gap: 6px !important;
  }

  .usp-card {
    padding: 8px 6px !important;
  }

  .usp-card h3 {
    font-size: 10px !important;
  }

  .usp-img {
    width: 24px !important;
    height: 24px !important;
  }

  /* Buttons: volle Breite */
  #route-select .label.label-lg {
    min-width: 100% !important;
  }

}


/* Quantity Selector - äußere Ecken abrunden */
.input-item-count-group .input-item-count-dec {
    border-top-left-radius: 6px!important;
    border-bottom-left-radius: 6px!important;
}

.input-item-count-group .input-item-count-inc {
    border-top-right-radius: 6px!important;
    border-bottom-right-radius: 6px!important;
}

/* Zweite h2 nur verstecken wenn zwei h2 direkt hintereinander stehen */
#content > h2 + h2 {
    display: none;
}