/** Shopify CDN: Minification failed

Line 24:0 Comments in CSS use "/* ... */" instead of "//"
Line 25:0 Comments in CSS use "/* ... */" instead of "//"
Line 26:0 Comments in CSS use "/* ... */" instead of "//"
Line 45:4 Comments in CSS use "/* ... */" instead of "//"
Line 94:2 Comments in CSS use "/* ... */" instead of "//"
Line 123:2 Comments in CSS use "/* ... */" instead of "//"
Line 195:2 Comments in CSS use "/* ... */" instead of "//"
Line 221:2 Comments in CSS use "/* ... */" instead of "//"
Line 348:2 Comments in CSS use "/* ... */" instead of "//"
Line 355:0 Unexpected "}"
... and 63 more hidden warnings

**/
body {
    font-family: 'Geometria', sans-serif!important; 
}

h1, h2, h3, p, option, select, button {
    font-family: 'Geometria', sans-serif!important;
}

//h1, h2 {
//  color:#D6443B!important;
//}

button{
      font-weight: bold!important;
}

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* Keep the overlay full-screen to cover the background */
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  overflow-y: auto;
}

.upsell-modal {
    //color:red;
    display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* Keep the overlay full-screen to cover the background */
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  overflow-y: auto;
}

.modal-content {
  background-color: #fff;
  margin: auto; /* Centered vertically with some top margin */
  padding: 30px 30px;
  border-radius: 8px;
  width: 90%;
  max-width: 350px; /* Adjust to make the modal narrower */
  position: relative;
  text-align: center;
  /* Adjust height to fit content */
  max-height: calc(100vh - 40px); /* Ensure the modal doesn't exceed the viewport height */
  overflow-y: auto; /* Enable scrolling within the modal if content overflows */
}

.close-button {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  cursor: pointer;
}

.upsell-item {
  display: flex;
  align-items: center;
  justify-content: center; /* Center the content horizontally */
  margin: 20px 0;
  flex-wrap: wrap; /* Allow content to wrap on smaller screens */
}

.upsell-image {
  flex: 0 0 auto;
}

.upsell-image img {
  width: 65px;
  height: auto;
  //border-radius: 8px;
}

.upsell-details {
  margin-left: 20px;
  text-align: left;
  flex: 1 1 auto; /* Allow details to take up remaining space */
}

.upsell-details h3 {
  margin: 0 0 5px 0;
  font-size: 18px;
}

.upsell-details p {
  margin: 0;
  font-size: 16px;
}

.config-option {
  margin: 0 0 12px 0;
}

.add-upsell-btn {
  width: 100%;
  background-color: #D6443B;
  color: white;
  padding: 12px 20px;
  border: none;
  //border-radius: 5px;
  cursor: pointer;
}

.add-upsell-btn:hover {
  background-color: #b93834;
}

.shopify-policy__container {
max-width: 1200px !important;
}

/* Main layout: image left, configurator right */
.custom-product-page {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin-top: 40px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  gap: 50px;
}

/* The image container */
.product-image {
  flex: 1;
  /* max-width: 400px;*/
  /*border-radius: 15%;*/
}

.product-image img {
  width: 100%;
  height: auto;
  /* border-radius: 15%;*/
}

/* Configurator section */
.product-info {
  flex: 1;
  max-width: 500px; /* Adjust this value to control the width of the right section */
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
}

.product-info h1 {
  font-size: 2.2rem;
  margin-bottom: 10px;
}

.product-price {
  font-size: 1.8rem;
  color: #333;
  margin-bottom: 20px;
}

/* Dropdown styling */
.config-option {
  margin-bottom: 13px;
}

.config-option label {
  display: block;
  margin-bottom: 5px;
  font-size: 1.2rem;
  color: #333;
}

.config-option select {
  width: 100%;
  padding: 10px;
  /* font-size: 1rem; */
  //border-radius: 5px;
  border: 1px solid #ccc;
}

/* Right-align the total price */
#total-price {
  font-size: 1.5rem;
  font-weight: bold;
  margin-top: 10px;
  color: #333;
  text-align: center;
}

.terms-checkbox{
  margin-top:20px;
  font-size: 1em;
  line-height: normal;
}

/* Add to Cart button */
.add-to-cart-btn {
  background-color: #D6443B;
  color: #fff;
  padding: 15px;
  border: none;
  cursor: pointer;
  //border-radius: 5px;
  margin: 20px 0;
  width: 100%;
}

.add-to-cart-btn:disabled {
    background-color: #cccccc; /* Light gray background */
    color: #666666; /* Darker text color */
    cursor: not-allowed; /* Show "not allowed" cursor */
    opacity: 0.6; /* Reduce opacity to give a grayed-out effect */
}


/* Responsive layout */
@media screen and (max-width: 768px) {
  .custom-product-page {
    flex-direction: column;
    align-items: center;
  }

  .product-image, .product-info {
    flex: none;
  }

  .product-info {
    text-align: center;
  }
}



.custom-dropdown {
  position: relative;
  width: 200px;
  cursor: pointer;
}

.selected-option {
  background-color: #f0f0f0;
  padding: 10px;
  border: 1px solid #ccc;
}

.dropdown-options {
  display: none;
  position: absolute;
  width: 100%;
  background-color: #fff;
  border: 1px solid #ccc;
  z-index: 1;
}

.dropdown-option {
  padding: 10px;
  background-color: #fff;
}

.dropdown-option:hover {
  background-color: #f0f0f0;
}

/* Custom colors for different options */
.dropdown-option em {
  font-style: italic;
}



/* Upsell Section Styling */
.upsell-section {
  display: none;
  margin-top: 30px;
  padding: 20px;
  border: 2px solid #f0f0f0;
  border-radius: 8px;
  background-color: #fafafa;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.upsell-section label {
  display: block;
  margin-bottom: 10px;
  font-weight: bold;
  font-size: 1.2rem;
  color: #333;
}

.upsell-content {
  display: flex;
  margin-bottom: -10px;
  gap: 15px;
}



.upsell-info {
  margin: 0;
}

.upsell-title {
  font-weight: bold;
  color: #0073e6;
  text-decoration: none;
}

.upsell-title:hover {
  text-decoration: underline;
}

.upsell-price {
  color: #333;
  margin: 0;
}

.upsell-quantity {
  margin: 0;
}

.upsell-quantity label {
  margin: 0;
}

/* Styling for the dropdown (select) */
.upsell-quantity select {
  width: 60px;
  padding: 5px;
  border: 1px solid #ccc;
  //border-radius: 5px;
  background-color: white;
}

  .upsell-quantity input {
    width: 80px;
  }
}

/* Price breakdown styling */
.price-breakdown {
    text-align: right;
}

/* License and upsell costs are smaller and less emphasized */
.license-cost, .upsell-cost {
    font-size: 1.2rem;
    color: #666;
    margin: 0;
}

/* Total cost is bold and larger */
.total-cost {
    font-size: 1.3em;
    color: #D6443B;;
}


.price-summary {
    margin-top: 10px;
    font-weight:bold;
}

.breakdown-content {
    background-color: #f9f9f9;
    padding: 10px;
    border: 1px solid #ccc;
    margin-top: 5px;
    font-size: 1.1rem; /* Make the font smaller */
    line-height: 1.5; /* Increase line spacing for clarity */
}

.toggle-breakdown {
    background-color: #ED6E37;
    color: white;
    border: none;
    border-radius: 15px;
    padding: 5px 10px;
    cursor: pointer;
    margin: 5px 0px;
    //font-size: 0.8em; /* Smaller button text */
}

.toggle-breakdown:hover {
    background-color: #D6443B;
}

.breakdown-content {
    background-color: #f9f9f9;
    padding: 10px;
    border: 1px solid #ccc;
    line-height: 1.5;
}

.separator {
    margin: -5px 0 15px 0 !important;
    border-bottom: 1px solid #ddd; /* Optional line for visual separation */
}


.calculation-step {
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
}

.price-summary p, .breakdown-content div {
    margin: 0 0; /* Ensures consistent spacing between paragraphs */
}

.advantage-text{
  color:green!important;
  font-size: 0.9em;
}

.tip-message {
    color: #D6443B; /* Font color */
    padding: 10px; /* Spacing inside the box */
    text-align: center; /* Center the text */
    border: 2px solid #D6443B; /* Border with the warning color */
    border-radius: 5px; /* Rounded corners */
    margin-top: 15px; /* Space above the warning */
    font-weight: bold; /* Bold text */
    margin-left: auto;
    margin-right: auto; /* Center the box horizontally */
    background-color: transparent; /* Ensure no background color */
}

/* CSS for the spinner (loading circle) */
.loading-spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: #fff;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 1s linear infinite;
    display: inline-block;
    margin: -10px 0;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Carousel container styling */
.product-image-carousel {
  width: 50%; /* Default to half screen on larger displays */
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.carousel-container {
  display: flex;
  position: relative; /* Added to position thumbnails correctly */
  transition: transform 0.3s ease-in-out;
}

/* Each slide defaults to full width of the container */
.carousel-slide {
  min-width: 100%;
  display: none; /* Hide all slides initially */
}

.carousel-slide.active {
  display: block; /* Show only the active slide */
}

/* Ensuring images cover the full carousel area */
.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Makes the image cover the entire slide without distortion */
}

/* Carousel controls */
.carousel-prev,
.carousel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: none;
  font-size: 24px;
  cursor: pointer;
  padding: 5px 10px;
  z-index: 1;
  transition: background-color 0.3s ease;
}

.carousel-prev {
  left: 10px;
}

.carousel-next {
  right: 10px;
}

.carousel-prev:hover,
.carousel-next:hover {
  background-color: rgba(0, 0, 0, 0.7); /* Darken on hover */
}

/* Responsive styling for small screens */
@media (max-width: 768px) {
  .product-image-carousel {
    width: 100%; /* Full width on smaller screens */
  }
}

/* Thumbnails Section */
.carousel-thumbnails {
  display: flex;
  justify-content: space-between; /* Distribute thumbnails evenly */
  padding: 0; /* Remove any padding */
  overflow: hidden; /* Prevent thumbnails from spilling out of the container */
  gap: 0; /* Remove gaps between thumbnails */
}

.carousel-thumbnails .thumbnail {
  flex: 1 0 auto; /* Allow thumbnails to grow/shrink evenly */
  max-width: calc(100% / 8); /* Adjust width for X thumbnails in a row */
  aspect-ratio: 1; /* Maintain a square aspect ratio for thumbnails */
  display: flex; /* Center-align the image inside the thumbnail */
  align-items: center; /* Vertically center the image */
  justify-content: center; /* Horizontally center the image */
  cursor: pointer;
  border: 2px solid transparent; /* Border that wraps tightly around thumbnail */
  transition: border-color 0.3s ease;
  overflow: hidden; /* Prevent image overflow */
}

.carousel-thumbnails .thumbnail img {
  width: 100%; /* Ensure image fills the container width */
  height: 100%; /* Ensure image fills the container height */
  object-fit: cover; /* Maintain aspect ratio while filling the container */
}


.carousel-thumbnails .thumbnail img {
  width: 100%; /* Ensure the thumbnail fills its container */
  height: auto;
  object-fit: cover; /* Maintain aspect ratio */
}

.carousel-thumbnails .thumbnail.active-thumbnail {
  border-color: #000; /* Highlight active thumbnail */
}






/*--- NEW LICENSE CONFIGURATOR ---*/
/* 1) Container & Gruppen */
.custom-arktis-picker {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.custom-arktis-group {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* 2) Button‑Grundstyle */
.custom-arktis-btn {
  position: relative;
  padding: 0.5rem 1rem;
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  background-color: #fff;
  color: #333;
  /*font-size: 1rem;*/
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

/* 3) Paket‑Gruppe als Radio‑Toggle */
.custom-arktis-group-paket .custom-arktis-btn {
  padding-left: 2.5rem;
}

.custom-arktis-group-paket .custom-arktis-btn::before {
  content: "";
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  border: 2px solid #ccc;
  border-radius: 50%;
  background-color: transparent;
}

.custom-arktis-group-paket .custom-arktis-btn.is-active {
  color: #006fbf;
  border-color: #006fbf;
  background-color: rgba(0, 111, 191, 0.1);
}

.custom-arktis-group-paket .custom-arktis-btn.is-active::before {
  background-color: #006fbf;
  border-color: #006fbf;
}

/* 4) Dauer & groupCount‑Gruppe als Pill‑Toggle */
.custom-arktis-group-dauer .custom-arktis-btn,
.custom-arktis-group-groupCount .custom-arktis-btn {
  border-radius: 0.5rem;
}

.custom-arktis-group-dauer .custom-arktis-btn.is-active,
.custom-arktis-group-groupCount .custom-arktis-btn.is-active {
  background-color: #006fbf;
  color: #fff;
  border-color: #006fbf;
}

/* 5) Disabled‑Zustand (für Auf‑Anfrage‑Modus) */
.custom-arktis-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 6) „Auf Anfrage“-Box */
.custom-arktis-request-card {
  padding: 1rem;
  border: 1px solid #ccc;
  margin-top: 25px;
  background-color: #f9f9f9;
  color: #006fbf;
  font-weight: bold;
  text-align: center;
  border-radius: 0.5rem;
}

/* 7) Helfer‑Klasse zum Ausblenden */
.custom-hidden {
  display: none !important;
}

/* 8) Labels über den Gruppen */
.custom-arktis-label {
  color: #6b7280;       /* Grauton */
  /* font-size: 0.875rem;  /* ca. 14px */
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.custom-arktis-group-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}


/* --- Bundle‑Info Widget --- */
.custom-bundle-info {
  margin: 0.5rem 0;
}

.custom-bundle-info__title {
  color: #6b7280;       /* Grauer Überschrifttext */
  /*font-size: 0.875rem*/;
  margin-bottom: 0.5rem;
}

.custom-bundle-info__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.custom-bundle-info__list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 0.75rem;
  font-size: 1.2rem;
  color: #333;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

.custom-bundle-info__list li::before {
  content: '✔';
  color: #2BD97C;        /* Grünes Häkchen */
  font-weight: bold;
  display: inline-block;
}

.price-item__sale{
  font-size: 3.5rem;
  font-weight: bold;
  color: #1A99BC;
}

.Bird{
  font-weight: bold;
  color: #1A99BC;
}

/* ===== Arktis Bundles – Responsive Layout ===== */
.arctic-sec{
  --logo-min: 300px;   /* kleinste Logobreite */
  --logo-max: 640px;   /* größte Logobreite (Desktop) */
  --hero-gap: 0.9rem;  /* Abstand zwischen Logo & Button */
  --hero-gap: clamp(1.4rem, 2.2vw, 2.6rem);
  --panel-height: 80%;
  --panel-min-h: 180px;     /* Fallback-Mindesthöhe */
  --panel-pad-x: 22px;      /* seitlicher Abstand um die Cards (falls noch nicht gesetzt) */
  --panel-pad-y: 22px; 
  --bear-w: min(42vw, 680px);  /* Bär-Größe (Breite) */
  --bear-right: 0px;          /* Abstand vom rechten Rand des Bundles */
  --bear-bottom: -200px;        
}


/* Top-Block (blau) mit runden Ecken unten */
.arctic-sec::before{
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: clamp(28rem, 55vh, 60rem); /* Phone -> Desktop */
  background: #D2ECF6;
  border-radius: 0 0 2rem 2rem;
  z-index: 0;
}

.hero-brand{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-inline: 0;   /* überschreibt evtl. vorhandenes margin-inline:auto */
  margin-left: 0;     /* explizit links starten */
  align-items: flex-start; /* Logo links im Wrapper */
  width: fit-content; 
  gap: var(--hero-gap);
  padding: clamp(12px, 1.6vw, 20px) clamp(14px, 2.2vw, 26px);
  margin-inline: auto;                 /* mittig im Hero */
  width: fit-content;                  /* schmiegt sich an Inhalt an */
  max-width: min(92vw, calc(var(--logo-max) + 48px));
 }

/* Logo jetzt größer & responsiv über die Variablen */
.hero-brand .arctic-logo{
  width: clamp(var(--logo-min), 36vw, var(--logo-max));
  height: auto;
}

/* Button im Container garantiert mittig */
.hero-brand .arctic-btn{
  align-self: center;   /* zentriert im Wrapper */
  text-align: center;
  margin: 0;            /* evtl. alte Margins neutralisieren */
}

/* Auf sehr kleinen Screens etwas kompakter */
@media (max-width: 480px){
  .hero-brand{
    border-radius: 16px;
    padding: 12px 14px;
  }
  .hero-brand .arctic-logo{
    width: clamp(240px, 70vw, var(--logo-max));
  }
}
/* Desktop größerer Top-Block */
@media (min-width: 1200px){
  .arctic-sec::before{
    height: clamp(48rem, 52vh, 66rem);
    border-radius: 0 0 3rem 3rem;
  }
}
@media (min-width: 1600px){
  .arctic-sec::before{
    height: clamp(56rem, 50vh, 72rem);
  }
}

/* Breite: spürbar größer auf Desktop */
.container{
  width: min(92vw, 1500px); /* vorher ~1300px -> jetzt 1500px */
  margin-inline: auto;
  padding-inline: clamp(0.75rem, 1.5vw, 1rem);
}

/* Deko-Herz (Desktop) */
.arctic-bg{
  position: absolute;
  top: -8rem;
  right: -4rem;
  width: min(52vw, 650px);
  pointer-events: none;
  z-index: 0;
}

/* HERO */
.arctic-hero{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(0.8rem, 1.6vw, 1.6rem);
  margin-top: clamp(1rem, 7vw, 10rem);
}
.arctic-logo{
  width: min(65vw, 420px);
  height: auto;
}
.arctic-btn{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: #007aac;
  color: #fff;
  padding: 1.05rem 1.6rem;
  font-size: var(--btn-size);
  font-family: var(--btn-font);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: .4px;
  text-transform: uppercase;
  border-radius: .75rem;
  text-decoration: none;
  box-shadow: 0 4px 0 #005d87, 0 6px 12px rgba(0,0,0,.15);
  transition: transform .15s ease, box-shadow .15s ease;
  text-shadow: 0 2px 0 rgba(0,0,0,.15);
}
.arctic-btn:hover{ transform: translateY(-1px); box-shadow: 0 3px 0 #005d87, 0 4px 8px rgba(0,0,0,.12); }
.arctic-btn:focus-visible{ outline: 2px solid #005d87; outline-offset: 2px; }

/* Bundles */
.arctic-bundles{
  position: relative;
  margin-top: clamp(2rem, 6vw, 5rem);
  z-index: 1;
}
.arctic-bundle-bg{
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translateX(-50%);
  width: min(94vw, 1100px);
  height: auto;
  pointer-events: none;
  z-index: 0;
}

/* Polarbär-Deko */
.arctic-bear{
  position: absolute;
  right: var(--bear-right);
  bottom: var(--bear-bottom);
  width: var(--bear-w);
  max-width: 100%;
  z-index: 2;                    /* zwischen Panel und Cards */
  pointer-events: none;          /* keine Klicks blocken */
  transform: translateZ(0);
}

/* Titel */
.arctic-bundles-title{
  font-size: clamp(1.25rem, 1.2rem + 1.2vw, var(--heading-size));
  font-weight: 800;
  margin: 0 0 clamp(1.25rem, 2.2vw, 2.5rem);
  color: var(--heading-color);
}
.arctic-bundles-title .underline{ border-bottom: 3px solid #CE4643; }

/* Grid: voll responsive, auto-fit */
.arctic-bundle-grid{
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1rem, 2vw, 2rem);
  z-index: 3;
}

/* Card */
.arctic-card{
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 1.3rem;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 0 0 4px rgba(0,0,0,.05);
  transition: transform .25s ease, box-shadow .25s ease;
  will-change: transform;
  z-index: 3;
}
.arctic-card:hover{
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
}

/* Card-Bild mit Studio-BG */
.card-img{
  display: block;          /* entfernt Inline-Gap */
  width: calc(100%-.75rem);             /* füllt die Kartenbreite */
  height: auto;            /* hält natürliches Seitenverhältnis */
  object-fit: unset;       /* keine erzwungene Anpassung */
  background: transparent; 
  margin: .75rem .75rem;  /* << Versatz: oben & seitlich; unten bündig zum Textbereich */
  border-radius: 14px;   /* KEIN grauer Hintergrund mehr */
  transition: transform .25s ease;
}
.arctic-card:hover .card-img{ transform: scale(1.03); }
#arctic-{{ section.id }} .arctic-card{
  display: flex;                 /* sicherstellen */
  flex-direction: column;
}

#arctic-{{ section.id }} .card-body{
  flex: 1;                       /* füllt die Kartenhöhe */
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;  /* Tags links flexibel, Preis rechts */
  grid-template-rows: auto 1fr auto;          /* Titel | Spacer | Bottom-Zeile */
  grid-template-areas:
    "title title"
    ".     ."
    "tags  price";
 column-gap: clamp(0.45rem, 1vw, 1.1rem);
  row-gap: clamp(0.5rem, 1vw, 0.9rem);
  --bottom-gap: clamp(8px, 1.2vw, 16px);     /* Abstand zum Kartenrand unten */
  padding: 1rem 1.1rem var(--bottom-gap);
  --title-fs: clamp(1.15rem, 0.95rem + 1.05vw, 1.65rem);
  --price-fs: clamp(1.8rem, 1.1rem + 2.2vw, 2.6rem);
}


#arctic-{{ section.id }} .card-title{
  grid-column: 1 / -1;     /* Titel über beide Spalten */
  margin: 0;
  font-weight: 800;
  font-size: var(--title-fs);
  line-height: 1.15;
  hyphens: auto;
  overflow-wrap: anywhere;
}

#arctic-{{ section.id }} .card-tags{
  grid-column: 1 / 2;      /* Tags links */
  /* mehr vertikaler Abstand zum Titel */
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  min-width: 0;
}
.tag{
  display: inline-block;
  font-size: clamp(1.1rem, 0.9rem + 0.7vw, 1.45rem);
  border: 2px solid currentColor;
  border-radius: 8px;
  padding: .55rem .6rem;
  font-weight: 700;
  line-height: 1;
}
#arctic-{{ section.id }} .card-price{
  grid-area: price;
  justify-self: end;
  align-self: center;   /* auf Höhe der Tags */
  margin: 0;
  font-weight: 900;
  font-size: var(--price-fs);
  line-height: 1;
  white-space: nowrap;
  letter-spacing: .2px;
}

#arctic-{{ section.id }} .card-title{
  grid-area: title;                 /* explizit in die Titel-Area */
}

#arctic-{{ section.id }} .card-tags{
  grid-area: tags;                  /* in die untere linke Area */
  grid-column: auto;                /* evtl. ältere Spaltenzuweisung neutralisieren */
  align-self: end;               /* vertikal auf Preis-Höhe */
  /* dein Tag-Styling bleibt bestehen */
}

#arctic-{{ section.id }} .card-price{
  grid-area: price;                 /* in die untere rechte Area */
  justify-self: end;
  align-self: end;               /* vertikal auf Tag-Höhe */
}
@media (max-width: 420px){
  #arctic-{{ section.id }} .card-body{
    grid-template-columns: 1fr; /* stapeln */
  }
  #arctic-{{ section.id }} .card-price{
    grid-column: 1 / -1;
    justify-self: end;         /* rechts ausgerichtet */
    margin-top: .2rem;
    font-size: clamp(1.6rem, 4.5vw, 2.2rem);
  }
}

/* Mobile / Tablet Tweaks */
@media (max-width: 1024px){
  .arctic-bear{ display: none; }
  .arctic-bundle-bg{ top: 50%; width: min(96vw, 900px); }
}
@media (max-width: 900px){
  .arctic-bg, .arctic-bundle-bg{ display: none; } /* Desktop-Deko aus */
  .arctic-hero{
    align-items: center;
    text-align: center;
    margin-top: clamp(0.5rem, 3vw, 1.25rem);
  }
  .arctic-logo{ width: min(72vw, 320px); }
  .arctic-btn{ align-self: center; }
 
}

/* Motion-Reduce */
@media (prefers-reduced-motion: reduce){
  .arctic-card,
  .arctic-card:hover .card-img,
  .arctic-btn{
    transition: none !important;
  }
}

arctic-hero{ align-items: flex-start !important; }

.arctic-hero .hero-brand{
  margin: 0 !important;          /* nimmt das Auto-Zentrieren raus */
  margin-right: auto !important;  /* linksbündig innerhalb der .container */
  align-items: center !important; /* Logo & Button im Wrapper zentriert übereinander */
  width: fit-content;
}

.arctic-hero .hero-brand .arctic-btn{
  align-self: center !important;  /* Button mittig unter dem Logo */
  margin: 0;
}

/* 1) altes fixes PNG sicher ausschalten */
/* Statisches PNG sicher aus */
.arctic-bundle-bg{ display:none !important; }

/* Grid ist die Referenzfläche */
.arctic-bundle-grid{ position: relative; z-index: 1; }

/* Geformtes Panel: unten angedockt, 4/5 Höhe */
.arctic-bundle-grid::before{
  content: "";
  position: absolute;
  z-index: 0;
  /* unten andocken, links/rechts mit Puffer; KEIN top */
  bottom: calc(-1 * var(--panel-pad-y));
  left:   calc(-1 * var(--panel-pad-x));
  right:  calc(-1 * var(--panel-pad-x));
  height: max(var(--panel-min-h), var(--panel-height)); /* z.B. 80% */

  /* schräge, rundkanten-Form als responsives SVG */
  background:
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 340' preserveAspectRatio='none'>\
  <path fill='%230A8EBB' d='\
M28 0 \
L972 40 \
A28 28 0 0 1 1000 68 \
L1000 312 \
A28 28 0 0 1 972 340 \
L28 340 \
A28 28 0 0 1 0 312 \
L0 28 \
A28 28 0 0 1 28 0 Z'/>\
</svg>") center/100% 100% no-repeat;

 
}

/* Karten liegen sicher darüber */
.arctic-card{ position: relative; z-index: 1; }

/* ===== LAYER-FIX: Panel hinten, Bär in der Mitte, Cards vorn ===== */

/* 0) (optional) Variablen-Block fixen – Kommentar schließen */
.arctic-sec{
  --bear-w: min(42vw, 680px);
  --bear-right: 0px;
  --bear-bottom: -92px; /* wie tief der Bär nach unten steht */
}

/* 1) GRID darf KEINE eigene Stacking-Context-Haube bilden */
.arctic-bundle-grid{
  position: relative;
  z-index: auto !important;    /* wichtig: evtl. z-index:1/3 überschreiben */
}

/* 2) Blaues Panel hinter alles innerhalb des Bundles schieben */
.arctic-bundle-grid::before{
  z-index: -1 !important;      /* liegt unterhalb des Bären */
}

/* 3) Bär zwischen Panel und Cards platzieren */
.arctic-bear{
  z-index: 0 !important;       /* Mitte */
}

/* 4) Cards laufen darüber */
.arctic-card{
  position: relative;
  z-index: 1 !important;       /* vorne */
}
/* Grid ist die Referenzfläche (ohne eigenen Stacking-Kontext!) */
.arctic-bundle-grid{
  position: relative;
  z-index: auto !important; /* wichtig: kein eigener Kontext */
}

/* Hellblauer Hintergrund: 50% der Grid-Höhe, unten abgerundet, GANZ hinten */
.arctic-bundle-grid::after{
  content: "";
  position: absolute;
  z-index: -2; /* hinter dem dunklen Panel (::before) */
  /* auf volle Viewport-Breite strecken, damit es wie zuvor "unterlegt" wirkt */
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;

  /* von oberem Grid-Rand leicht nach oben erweitern, damit es sauber anschließt */
  top: calc(-1 * var(--panel-pad-y));
  height: calc(50% + var(--panel-pad-y)); /* genau die Hälfte der Cards */

  background: #D2ECF6;
  border-bottom-left-radius: 2rem;
  border-bottom-right-radius: 2rem;
}

/* Dunkles Panel bleibt darüber (zwischen hellblau und Bär) */
.arctic-bundle-grid::before{
  z-index: -1 !important; /* Panel liegt vor dem hellblauen Block */
}

/* Bär zwischen Panel und Cards */
.arctic-bear{ z-index: 0 !important; }

/* Cards obenauf */
.arctic-card{ z-index: 1 !important; }


/* === Hellblau von ganz oben bis 50% der Grid-Höhe === */
.arctic-sec{
  position: relative;
  z-index: 0;                        /* eigener Stacking-Kontext */
  --light-h: clamp(28rem, 55vh, 60rem); /* Fallback, falls JS noch nicht lief */
}

/* Hellblau: wieder sichtbar + dynamisch hoch */
.arctic-sec::before{
  content:"";
  position:absolute;
  inset: 0 0 auto 0;                 /* von ganz oben, volle Breite */
  height: var(--light-h) !important; /* bis 50% Grid (kommt vom Script) */
  background:#D2ECF6;
  border-bottom-left-radius: 2rem;
  border-bottom-right-radius: 2rem;
  z-index: 0 !important;             /* NICHT negativ */
}

/* Geformtes dunkles Panel hinter Bär & Cards, vor Hellblau */
.arctic-bundle-grid{ position: relative; z-index: 2; }
.arctic-bundle-grid::before{ z-index: 1 !important; }

/* Bär zwischen Panel und Cards */
.arctic-bear{ z-index: 2 !important; }

/* Cards ganz vorne */
.arctic-card{ position: relative; z-index: 3 !important; }

/* Falls vorhanden: altes hellblaues ::after vom Grid deaktivieren */
.arctic-bundle-grid::after{ content: none !important; }

/* ===== Polygon-Herz: Größe & Position responsiv steuerbar ===== */
.arctic-sec{
  /* Stellschrauben */
  --heart-w: clamp(460px, 42vw, 880px); /* Größe */
  --heart-top: clamp(1rem, 4vw, 3rem);  /* Abstand von oben (mehr = weiter unten) */
  --heart-right: 0px; /* leicht nach rechts „überstehen“ */
}

/* wendet die Variablen an */
.arctic-bg{
  position: absolute;
  width: var(--heart-w);
  height: auto;
  top: var(--heart-top);
  right: var(--heart-right);
  pointer-events: none;
  z-index: 0; /* über dem hellblauen ::before, unter dem Hero-Content */
}

/* Optional: Feintuning je Breakpoint */
@media (min-width: 1600px){
  .arctic-sec{
    --heart-w: clamp(700px, 40vw, 980px);
    --heart-top: -6rem;
  }
}
@media (max-width: 1200px){
  .arctic-sec{
    --heart-w: clamp(360px, 48vw, 640px);
    --heart-top: 3.5rem;
    --heart-right: -1rem;
  }
}
/* ===========================
   Explanation Stepper – Global
   =========================== */

:root {
  --frost-white: #ffffff;
  --frost-end: #d3ecff;
  --primary: #009fe3;
  --glass-fill: rgba(255,255,255,0.22);
  --glass-border: rgba(255,255,255,0.4);
  --text-dark: #01304d;

  /* Buttons */
  --stepper-btn-h: 3rem;
  --stepper-btn-fs: 1.4rem;
}

/* Section mit Frost-Hintergrund */
.explanation-stepper.frost-bg{
  position: relative;
  padding-block: clamp(3rem, 5vw, 6rem);
  background: linear-gradient(to bottom, var(--frost-white) 0%, var(--frost-end) 100%);
  border-radius: 0 0 50px 50px;
  overflow: hidden;
}

/* Containerbreite + seitliches Padding (Anforderung #1) */
.explanation-stepper .stepper-inner{
  width: min(92vw, 1500px);
  margin-inline: auto;
  padding-inline: clamp(0.75rem, 1.5vw, 1rem);
  position: relative;
}

/* Schnee-Effekt */
.explanation-stepper .snow,
.explanation-stepper .snow::after{
  content: "";
  position: absolute;
  top: -100vh; left: 0;
  width: 100%; height: 200vh;
  pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,0.8) 1px, transparent 1px);
  background-size: 8px 8px;
  animation: stepper-snow 25s linear infinite;
}
.explanation-stepper .snow::after{
  background-size: 6px 6px;
  animation-duration: 40s;
  opacity: .6;
}
@keyframes stepper-snow { to { transform: translateY(100vh); } }

/* Headline – gleiche Größe wie „oben“ */
.explanation-stepper .stepper-heading{
  margin: 0 0 clamp(2rem, 4vw, 3rem);
}
.explanation-stepper .stepper-title{
  margin: 0;
  font-weight: 800;
  font-size: clamp(1.25rem, 1.2rem + 1.2vw, 26px); /* wie deine anderen Sections */
  line-height: 1.2;
  color: #000;
  font-family: var(--heading-font, inherit);
}
.explanation-stepper .stepper-title .underline{
  position: relative;
}
.explanation-stepper .stepper-title .underline::after{
  content:"";
  position:absolute; left:0; bottom:-.25rem;
  width:100%; height:3px;
  background: var(--accent, #CE4643);
  border-radius: 2px;
}

/* Steps: responsives Grid (Anforderung #1) */
.explanation-stepper .steps{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1rem, 2vw, 2rem);
}

/* Karten */
.explanation-stepper .step{
  position: relative;
  padding: 2.5rem 1.75rem 2.75rem;
  border-radius: 1.75rem;
  background: var(--glass-fill);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
  text-align: center;
}

/* Nummer-Chip */
.explanation-stepper .step-number{
  position: absolute;
  top: -1.5rem; left: 50%; transform: translateX(-50%);
  width: 3rem; height: 3rem; line-height: 3rem;
  border-radius: 50%;
  background: var(--primary);
  color:#fff; font-weight:700; font-size:1.25rem;
  box-shadow: 0 0 0 4px var(--glass-fill);
}

/* Inhalte */
.explanation-stepper .step-title{
  margin: .75rem 0 .5rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-dark);
}
.explanation-stepper .step-text{
  margin-bottom: 1.75rem;
  color: var(--text-dark);
  opacity: .85;
}

/* Formular */
.explanation-stepper .form{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.explanation-stepper .form input[type="email"],
.explanation-stepper .institution-field{
  padding: 1.2rem 1rem;
  font-size: 1.2rem;
  border-radius: 1rem;
  border: 1px solid rgba(0,0,0,0.1);
  width: 100%;
  max-width: 350px;
  background: #fff;
}
.explanation-stepper .form input[type="email"]:focus,
.explanation-stepper .institution-field:focus{
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(0,159,227,0.2);
}

/* Animiertes Feld (Institution) */
.explanation-stepper .institution-container{
  width: 100%;
  max-width: 350px;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  transition: max-height .5s ease, opacity .5s ease, margin-top .5s ease;
}
.explanation-stepper .institution-container.active{
  max-height: 100px;
  opacity: 1;
  margin-top: 1rem;
  overflow: visible;
}

/* Buttons */
.explanation-stepper .stepper-btn{
  height: var(--stepper-btn-h);
  line-height: 1;
  padding: 0 1.75rem;
  display: inline-flex; align-items: center; justify-content: center;
  white-space: nowrap; cursor: pointer;
  font-size: var(--stepper-btn-fs);
  border: 0; border-radius: 1rem;
  background: var(--primary); color: #fff; font-weight: 600;
  transition: transform .15s ease;
}
.explanation-stepper .stepper-btn:hover{ transform: translateY(-2px); }

/* Optionen */
.explanation-stepper .options{
  display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem;
}
.explanation-stepper .option-input{ display: none; }
.explanation-stepper .option-card{
  display: inline-block;
  padding: .75rem 1rem;
  border-radius: 1rem;
  background: var(--glass-fill);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  cursor: pointer;
  transition: all .3s ease;
  font-size: 1.2rem;
  color: var(--text-dark);
}
.explanation-stepper .option-input:checked + .option-card{
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(0,159,227,0.2);
}

/* Stores / Badges */
.explanation-stepper .stores{
  display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;
}
.explanation-stepper .stores img{
  height: 50px; width: auto;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.15));
}

/* PDF-Link */
.explanation-stepper .pdf-link{
  display: flex; flex-direction: column; align-items: center; gap: .75rem;
  text-decoration: none;
}
.explanation-stepper .pdf-link img{
  border-radius: 1rem;
  width: 180px; height: 180px; object-fit: cover;
  box-shadow: 0 6px 28px rgba(0,0,0,0.12);
}
.explanation-stepper .pdf-link .pdf-btn{
  padding: 0 1.2rem;
  height: var(--stepper-btn-h);
  line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary); color: #fff; border-radius: .65rem; font-weight: 600;
}

/* Modal */
.explanation-stepper .license-overlay{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.25);
  display: flex; justify-content: center; align-items: center;
  z-index: 999;
}
.explanation-stepper .license-overlay[hidden]{ display: none !important; }

.explanation-stepper .license-modal{
  position: relative;
  display: flex; gap: 1.5rem;
  padding: 2.5rem;
  background: #fff; border-radius: 22px;
  box-shadow: 0 18px 48px rgba(0,0,0,.15), 0 2px 4px rgba(255,255,255,.35) inset;
  max-width: min(90vw, 600px);
  font-family: var(--font-body, Helvetica, Arial, sans-serif);
}
.explanation-stepper .modal-icon{ margin: 0 .5rem 0; flex: 0 0 64px; }
.explanation-stepper .modal-copy h3{
  margin: 0 0 .75rem;
  font: 800 1.55rem/1.25 var(--heading-font, inherit);
  color: #18144E;
}
.explanation-stepper .modal-copy p{
  margin-right: 2rem;
  font-size: 1.05rem; line-height: 1.45; color: #56577A;
}
.explanation-stepper .close-modal{
  position: absolute; top: 2rem; right: 2rem;
  border: 0; background: none; font-size: 1.75rem; line-height: 1;
  cursor: pointer; color: #56577A; padding: 0;
}
.explanation-stepper .close-modal:hover{ color: #000; }


/* =========================
   MERCH GRID – GLOBAL CSS
   ========================= */

/* Grundlayout */
.merch-sec{ padding:4rem 0; margin-top:6rem; font-family:var(--body-font); }
.merch-inner{
  /* wie .container in der Arktis-Section */
  width: min(92vw, 1500px);
  margin-inline: auto;
  padding-inline: clamp(0.75rem, 1.5vw, 1rem); /* ≈ 12–16px je Seite */
}

/* Kopfzeile */
.merch-heading{ display:flex; justify-content:space-between;  gap:1rem; margin-bottom:2.5rem; }
.merch-title{
  margin: 0;
  font-weight: 800;
 font-size: clamp(1.25rem, 1.2rem + 1.2vw, 26px);
  line-height: 1.2;
  font-family: var(--heading-font);
  color: var(--heading-color, #000);
}

.merch-title .underline{ position:relative; }
.merch-title .underline::after{
  content:""; position:absolute; left:0; bottom:-.25rem; width:100%; height:3px;
  background:var(--accent); border-radius:2px;
}

/* Link „alle anzeigen“ */
.merch-more{
  position:relative; display:inline-flex; align-items:center; gap:.3rem;
  font-size:1.6rem; font-weight:600; color:inherit; text-decoration:none;
  transition:color .35s cubic-bezier(.4,0,.2,1);
}
.merch-more::after{
  content:""; position:absolute; left:0; bottom:-3px; width:100%; height:3px;
  background:var(--accent); transform:scaleX(0); transform-origin:right;
  transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.merch-more span{ transition:transform .35s cubic-bezier(.4,0,.2,1); }
.merch-more:hover{ color:var(--accent); }
.merch-more:hover::after{ transform:scaleX(1); transform-origin:left; }
.merch-more:hover span{ transform:translateX(4px); }

/* Mobile „alle anzeigen“ unten */
.merch-more-mobile{ display:none; }
@media (max-width:640px){
  .merch-more-mobile{ display:flex; justify-content:center; margin-top:2rem; }
  .merch-heading .merch-more{ display:none; }
}

/* Grid */

.merch-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); /* wie oben */
  gap: clamp(1rem, 2vw, 2rem);
}


/* Card */
.merch-card{
  background:#fff; border-radius:1.3rem; overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:0 0 0 4px rgb(0 0 0 / .05);
  transition: transform .25s cubic-bezier(.25,.8,.25,1), box-shadow .25s;
  min-width: 0; /* verhindert Zeilenbruch bei sehr schmalen Spalten */
}
.merch-card:hover{ transform:scale(1.05); box-shadow:0 12px 28px rgb(0 0 0 / .18); }

/* Bild – Studio-BG + contain */
.merch-card-img{
  position:relative; display:block; background:linear-gradient(160deg,#f8f8f8 0%,#e5e5e5 55%,#dcdcdc 100%);
  aspect-ratio:4/3;
}
.merch-card-img img{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  max-width:90%; max-height:90%; object-fit:contain;
}

/* Body + Preis unten rechts */
.merch-card-body{ position:relative; padding:1rem 1.25rem 3.5rem; flex:1; display:flex; flex-direction:column; gap:.6rem; }
.merch-card-title{ margin:0; font:800 1.05rem/1.2 var(--heading-font) }
.merch-card-title a{ color:inherit; text-decoration:none; }
.merch-card-title a:hover{ text-decoration:underline; }
.merch-card-price{ position:absolute; bottom:1rem; right:1.25rem; font-weight:700; font-size:1.5rem; }

/* Mobile Feinschliff */
@media (max-width:640px){
  .merch-heading{ flex-direction:column; align-items:center; gap:.6rem; }
  .merch-more{ align-self:flex-end; }

  .merch-heading{
    align-items: flex-start !important;
    text-align: left !important;
  }
  .merch-title{
    text-align: left !important;
    align-self: flex-start !important;
    margin-left: 0 !important;
  }
  .merch-card-title{

    font-size: clamp(1.6rem, calc(0.6rem + 3.4vw), 2.6rem) !important;
    padding-bottom: 18px;

  }
   .testi-title{
    text-align: left !important;
    align-self: flex-start !important;
    margin-left: 0 !important;
    font-size: clamp(1.7rem, calc(0.85rem + 4.2vw), 2.8rem) !important;
    padding-bottom: 5px;
  }
}

@media (min-width: 1025px) and (max-aspect-ratio: 16/10) {
  .arctic-sec .arctic-bear { display: none !important; }
}

/* ===== DESKTOP Hero-Grid (Bär links, Textlogo + CTA rechts) ===== */
#arctic-{{ section.id }}{
  /* Größerer Abstand zwischen Bär und Textlogo */
  --hero-gap-x: clamp(56px, 8vw, 160px);
}

#arctic-{{ section.id }} .hero-desktop{ display:none; }     /* Default: aus */
#arctic-{{ section.id }} .hero-brand{ display:none; }       /* Mobile-Block default aus */

@media (min-width: 901px){
  #arctic-{{ section.id }} .hero-desktop{ display:block; }
  #arctic-{{ section.id }} .hero-brand{ display:none !important; } /* altes Desktop-Logo sicher weg */
}
@media (max-width: 900px){
  #arctic-{{ section.id }} .hero-desktop{ display:none !important; }
  #arctic-{{ section.id }} .hero-brand{ display:flex; }             /* Mobile-Block an */
}

#arctic-{{ section.id }} .hero-grid{
  display: grid;
  grid-template-columns: minmax(140px, 16%) 1fr;
  align-items: center;
  gap: var(--hero-gap-x) !important;
}

#arctic-{{ section.id }} .hero-copy{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(12px, 2vw, 18px);
  padding-left: 20px;   /* zusätzlicher Abstand zur Grid-Linie */
  box-sizing: border-box;
}

#arctic-{{ section.id }} .hero-bearlogo{
  /* Füllt die linke Grid-Spalte → skaliert automatisch mit dem Container */
  width: 100%;
  height: auto;
  object-fit: contain;
}

#arctic-{{ section.id }} .hero-textlogo{
  /* Skaliert bis 520px, bleibt danach gedeckelt – kannst du anpassen */
  width: min(100%, 420px);
  height: auto;
  object-fit: contain;
}


#arctic-{{ section.id }} .hero-copy .arctic-btn{
  align-self: flex-start; /* Button bündig unter dem Textlogo */
  margin-top: -10px;
}

/* ===== MERCH-CARDS: Titel & Preis = gleiche Größe wie oben (merch-title) ===== */

.merch-title{

  font-size: clamp(1.7rem, calc(0.85rem + 4.2vw), 2.8rem) !important;
}


.merch-sec{
  /* gleiche Typo wie .merch-title */
  --merch-card-head-fs: clamp(1.15rem, 0.95rem + 1.05vw, 1.65rem);
}

.merch-sec .merch-card-title{
font-size: clamp(1.15rem, 0.95rem + 1.05vw, 1.65rem);
 
}
.merch-sec .merch-card-price{
  font-size: clamp(1.7rem, calc(0.85rem + 4.2vw), 2.8rem) !important;
  line-height: 1.2;
  font-weight: 800; /* entspricht der Überschrift oben */
}

/* Falls Links im Titel die Größe überschreiben: */
.merch-sec .merch-card-title a{
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
}
.merch-sec .merch-card-body{
  /* mehr „Reserveraum“ unten für den absolut positionierten Preis */
  padding-bottom: calc(1.25rem + (var(--merch-card-head-fs, 26px) * 1.25));
}

.merch-sec .merch-card-title{
  /* rechter Puffer, damit lange Titel nicht unter den Preis laufen */
  padding-right: clamp(1rem, 6vw, 7rem);
}

/* mobil etwas kompakter */
@media (max-width: 640px){
  .merch-sec .merch-card-body{
    padding-bottom: calc(1rem + (var(--merch-card-head-fs, 24px) * 1.1));
  }
  .merch-sec .merch-card-title{
    padding-right: clamp(0.5rem, 4vw, 5rem);
  }
}

/* Smartphone: mehr Abstand zwischen den MERCH-Cards */
@media (max-width: 900px){
  .merch-sec .merch-grid{
    gap: clamp(1.25rem, 5.5vw, 2.25rem); /* vorher ~ clamp(1rem, 2vw, 2rem) */
  }
}
@media (max-width: 900px){
  #arctic-{{ section.id }} .arctic-bundle-grid{
    gap: clamp(1.25rem, 4.8vw, 2.2rem) !important;
  }
}

/* ===== ARKTIS-CARDS • Smartphone-Fix: Titel volle Breite, Preis rechts neben Tags ===== */
@media (max-width: 900px){
  #arctic-{{ section.id }} .card-body{
    /* entgegen der alten 1-Spalten-Regel wieder 2 Spalten erzwingen */
    grid-template-columns: minmax(0,1fr) auto !important;  /* Tags links flexibel, Preis rechts */
    grid-template-rows: auto 1fr auto !important;          /* Titel | Spacer | Tags/Preis */
    grid-template-areas:
      "title title"
      ".     ."
      "tags  price";
    column-gap: clamp(0.4rem, 2.5vw, 0.9rem);
    row-gap: clamp(0.45rem, 2vw, 0.9rem);
    align-items: end;                                      /* unten bündig halten */
    padding-bottom: var(--bottom-gap);                     /* dein definierter Unterabstand */
  }

  #arctic-{{ section.id }} .card-title{
    grid-area: title !important;       /* Titel über beide Spalten */
    margin: 0;
    min-width: 0;
    hyphens: auto;
    overflow-wrap: anywhere;
  }

  #arctic-{{ section.id }} .card-tags{
    grid-area: tags !important;        /* links unten */
    align-self: end;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: clamp(0.6rem, 2.4vw, 1rem); /* Abstand Titel → Tags */
    min-width: 0;
  }

  #arctic-{{ section.id }} .card-price{
    grid-area: price !important;       /* rechts unten */
    justify-self: end;
    align-self: end;
    white-space: nowrap;
  }
}

/* ARKTIS • Mobile: Preis wirklich groß erzwingen */
@media (max-width: 900px){
  /* Variable überschreiben, aus der .card-price liest */
  #arctic-{{ section.id }} .card-body{
    --price-fs: clamp(2.2rem, calc(1rem + 6vw), 3.6rem) !important;
  }
  /* Falls irgendwo direkt eine font-size gesetzt ist */
  #arctic-{{ section.id }} .card-price{
    font-size: var(--price-fs) !important;
    line-height: 1.05;
  }
}

/* Falls ein älteres 420px-Rule-Set bei dir noch kleiner macht – neutralisieren */
@media (max-width: 420px){
  #arctic-{{ section.id }} .card-price{
    font-size: var(--price-fs) !important;
  }
}