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

html, body {
  height: 100%;
} */

/* style.css — Basis-Styles, mobile-first, modular classes */
:root {
  --bg: #fff;
  --muted: #666;
  --accent: #ffc107; /* gelb für CTA */
  --primary: #000;
  --radius: 10px;
}


/* style.css — KONSOLIDIERTE BODY-STYLES (Sticky Footer und Basis zusammengeführt) */
/* Neutralisiert Standard-Margins, die Layout-Probleme verursachen */
header, main {
    margin-top: 0;
    margin-bottom: 0;
}
body {
    /* 1. Basis-Styles beibehalten */
    font-family: Helvetica, Arial, sans-serif;
    background: #ffffff;
    color: var(--primary);
    
    /* 2. CSS Grid Logic (Dynamisches Layout) */
    /* display: grid; */
    /* Definiert ZWEI Reihen: 1fr für den Wrapper (wächst), auto für den Footer */
    /* grid-template-rows: 1fr auto;  */
   
    /* Sorgt dafür, dass die Seite mindestens bildschirmfüllend ist */
    /* min-height: 100vh; */

    /* 3. Margin/Padding Reset */
    /* height: 100%;  */
    margin: 0;
    padding: 0; 
}
.wrapper {
    /* Basis-Styles beibehalten */
    max-width: 760px;
    margin: 0 auto;
    padding: 30px; 
    padding-bottom: 40px; 
    min-height: 100vh;
    /* Grid Logic: Muss die erste (wachsende) Reihe einnehmen */
    grid-row: 1; 
    
    /* MANUELL ENTFERNT, da Grid das Wachstum (1fr) übernimmt: */
    /* flex-grow: 1; */ 
    /* min-height: calc(100vh - 100px); */ 
}

h1{
  letter-spacing: 0.5px;

  overflow-wrap: break-word; /* Moderne Eigenschaft */
    word-break: break-word;    /* Für die meisten Browser optimal */
    margin-top: 0 !important;
}

.image-wrapper {
  position: relative;
  display: block;      /* WICHTIG für Größe! */
  width: 100%;         /* Falls Bild/Karte 100% breit sein soll */
  height: auto;        /* Normal */
}

.image-link {
  position: absolute;
  inset: 0;              /* top:0; right:0; bottom:0; left:0 */
  z-index: 10;
  text-indent: -9999px;  /* für Screenreader bleibt es ein echter Link */
}

/* product grid */
.product-grid {
  display: grid;
  grid-template-columns: 1fr;
  /* gap: 16px; */
}

/* card */
.product-card {
  background: var(--bg);
  /* padding: 14px; */
  border-radius: var(--radius);
  /* box-shadow: 0 2px 6px rgba(0,0,0,0.06); */
  text-align: left;
  margin: 12px 0;
}


.card-text {
  display: block;
  display: flex;
  justify-content: space-between; /* links & rechts */
  align-items: center;            /* vertikal zentriert */
  width: 100%;
}

.image-frame {
  width: 100%;

  /* DIN style */
  /* aspect-ratio: 1 / 1.414;  */
  aspect-ratio: 4 / 5;

  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* border-radius: calc(var(--radius) - 4px); */
  /* margin-bottom: 12px; */
}

.detail-frame {
  /* aspect-ratio: 1 / 1.414; */
  max-height: 60vh;
}

.description {
  margin: 12px 0;
  margin-bottom: 2px;
}

.product-image {
  width: 100%;
  height: 100%;
  object-fit: contain; /* show full square images with white space top/bottom */
  display: block;
}

.product-title { margin: 6px 0; font-size: 18px; }
.product-price { color: #ff3333; font-weight: 700; margin: 6px 0; }
.product-availability { color: var(--muted); margin: 6px 0; }

.input-error {
  border: 2px solid #ff3333 !important;
  background: #ffe5e5 !important;
}



/* Buttons */
.btn {
  display: inline-block;
  text-decoration: none;
  padding: 4px 5px;    
  letter-spacing: 0.5px;

  /* border-radius: 8px; */
  font-size: 2em;
  font-weight: 600;
  background: transparent;
  color: var(--primary);
  border: 1px solid #ddd;
}
.btn-primary {
  background: var(--primary);
  color: #ffff00;
}
.btn.disabled, .btn.disabled:link {
  opacity: 0.5;
  pointer-events: none;
}

/* form */
label { display: block; margin: 10px 0; font-size: 20px; font-weight: bold;
  letter-spacing: 1pt;}
input[type="text"], input[type="email"], input[type="number"] {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  /* border-radius: 8px; */
  border: 2px dashed #000000;
  margin-top: 8px;
}

/* notices */
.notice {
  margin: 12px 0;
  padding: 10px;
  background: #fff3cd;
  border-left: 4px solid #ffc107;
  border-radius: 6px;
}



/* Das Overlay selbst */
#gif-overlay {
  position: fixed; /* Bleibt immer im Fenster */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000; /* Wähle die Hintergrundfarbe, die gut zum GIF passt */
  display: flex; /* Für die Zentrierung des GIFs */
  justify-content: center;
  align-items: center;
  z-index: 9999; /* Stellt sicher, dass es über allem liegt */
  opacity: 1;
  /* Für einen sanften Übergang beim Ausblenden */
  transition: opacity 1s ease-out, visibility 0s 1s;

  /* Dein gewünschter Mischmodus */
  mix-blend-mode: normal;
}

/* 1. ZUSTAND: Der Blend-Modus wird aktiviert (sofortiger Sprung) */
#gif-overlay.trigger-blend {
  /* Wichtig: Dieser Modus sollte keine Transition haben, er springt sofort */
  mix-blend-mode: difference; 
}

/* 2. ZUSTAND: Der Fade-Out wird ausgelöst (sanfter Übergang dank Transition) */
#gif-overlay.hidden-overlay {
  opacity: 0;
  visibility: hidden; /* Optional: Macht es am Ende unsichtbar */
}

/* Das GIF innerhalb des Overlays */
#gif-overlay img {
  /* Responsiveness: Passt sich dem Container an, behält das Seitenverhältnis bei */
  max-width: 90%; 
  max-height: 90vh; /* Verhindert, dass es den gesamten Bildschirm einnimmt, aber bleibt groß */
  width: auto;
  height: auto;



  display: block;

  /* Die Animation anwenden: */
  animation-name: spin;         /* Name der Keyframes-Regel */
  animation-duration: 4s;       /* Dauer der Animation (4 Sekunden) */
  animation-iteration-count: infinite; /* Die Animation wird endlos wiederholt */
  animation-timing-function: linear;  /* Gleichmäßige Geschwindigkeit über die gesamte Dauer */
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Ausgeblendeter Zustand */
.hidden-overlay {
  opacity: 0 !important; /* Macht es transparent */
  pointer-events: none; /* WICHTIG: Macht es unclickable */
}



/* small back link */
.back { display:inline-block; margin: 12px 0; color:#333; text-decoration:none; }

/* responsive: at larger widths show 2 columns */
@media(min-width: 720px) {
  .product-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .wrapper { padding: 24px; }
}








/*FOOTER

/* 1. Body-Styling für den Sticky Footer */
/* Wichtig: Dies stellt sicher, dass der Footer bei wenig Inhalt trotzdem unten bleibt */


/* 2. Styling des Footers */
#main-footer {
    /* background-color: #ffffff;  */
    background: linear-gradient(0deg,rgb(232, 216, 34) 0%, rgb(255, 255, 255) 60%);
    color: #333; /* Dunkle Textfarbe */
    padding: 30px 0; /* Vertikaler Abstand oben/unten */
    width: 100%;

    /* Eine feine Linie als Trennung */
    /* border-top: 1px solid #ddd;  */
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
}

/* 3. Styling der Links im Footer */
#main-footer .footer-content a {
    color: #000000; /* Blaue Standard-Linkfarbe */
    text-decoration: none; /* Keine Unterstreichung standardmäßig */
    margin: 0 15px; /* Abstand zwischen den Links */
    transition: color 0.3s ease;
}

/* Hover-Effekt für die Links */
#main-footer .footer-content a:hover {
    color: #0056b3; /* Dunkleres Blau beim Überfahren */
    text-decoration: underline; /* Unterstreichung beim Hover */
}

/* 4. Styling des Trennzeichens ( | ) */
#main-footer .separator {
    color: #aaa;
    /* Damit das Trennzeichen nicht vom Margin der Links beeinflusst wird, ist es besser, 
       die Links direkt zu stylen und das Trennzeichen als span zu belassen. */
}

/* 5. Copyright-Bereich */
#main-footer .copyright {
    font-weight: bold;
    letter-spacing: 0.5px;
    margin-top: 10px;
    font-size: 12px;
    color: #464646;
}




/* CSS für das Overlay (in style.css) */

.modal-overlay {
    display: none; /* Standardmäßig versteckt */
    position: fixed; /* Klebt am Viewport */
    z-index: 1000; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    
    /* WICHTIG: Flexbox für die vertikale Zentrierung */
    
    
    background-color: rgba(0, 0, 0, 0.7); 
    overflow-y: hidden; /* Verhindert das Scrollen des Overlays */
}

/* NEUE KLASSE: Steuert das Öffnen und die Flexbox-Logik */
.modal-overlay.is-open {
    display: flex; /* ⬅️ NUR HIER WIRD AUF 'flex' gesetzt */
    justify-content: center;
    align-items: center; 
}

.modal-content {
    background-color: #fefefe;
    
    /* Flex- und Höhen-Fixierung */
    margin: 0; /* Wichtig für die Flexbox-Zentrierung */
    height: 95vh; /* ⬅️ Fixiert die Höhe des Fensters auf 95% des Viewports */
    max-height: 95vh; 
    
    /* Innere Struktur (Macht den Inhalt stapelbar und scrollbar) */
    display: flex;
    flex-direction: column; 
    
    /* Breiten- und Abstands-Styles */
    padding: 20px; 
    /* width: 95vb; */
    max-width: none; /* ⬅️ WICHTIG: Entfernt die Begrenzung */
    /* max-width: 900px;  */
    /* border: 1px solid #888; */
    border-radius: 8px;
    position: relative; 
    
    /* Scrollen hier verhindern (wird dem inneren Element übergeben) */
    overflow-y: hidden; 
}

/* WICHTIG: Regel für den Inhalt im Modal (falls dieser sehr lang ist) */
#modal-body-content {
    
    /* WICHTIG: Nimmt den gesamten freien vertikalen Platz im Modal-Fenster ein */
    flex-grow: 1; /* ⬅️ WICHTIG: Das Element wächst, um den leeren Raum zu füllen */
    
    /* Das Scrollen explizit hier aktivieren */
    overflow-y: auto; /* ⬅️ WICHTIG: Nur dieser Bereich scrollt, wenn der Text zu lang ist */
    
    /* 1. Blocksatz aktivieren */
    /* text-align: justify; 
    hyphens: auto; 
    word-break: normal;  */

    /* height: 100%; und box-sizing: border-box; sind nicht notwendig und werden entfernt */
    margin: 0; 
    padding: 0;
}

.close-btn {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    border: none;
    background: transparent;
    cursor: pointer;
}

.close-btn:hover,
.close-btn:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

/* Optional: Stellt sicher, dass der Text im Modal gut lesbar ist */
#modal-body-content h1, 
#modal-body-content h2 {
    /* border-bottom: 1px solid #ccc; */
    padding-bottom: 10px;
    margin-top: 20px;
}

@media(min-width: 720px) {
  
  /* Wir lassen .modal-content auf 100% Breite des Viewports wachsen (dies ist das weiße Fenster) 
     und begrenzen dann den inneren Text-Container. */

  /* ZUSÄTZLICH: Wir begrenzen den Scroll-Inhaltsbereich und zentrieren ihn */
  #modal-body-content {
      /* WICHTIG: Stoppt das automatische Stretching durch flex-grow: 1 */
      flex-grow: 0; 
      
      /* Begrenzt die maximale Breite des Textinhalts auf 50% des VIEWPORTS */
      max-width: 50vw; 
      
      /* Setzt die tatsächliche Breite (kann auch 50% sein, wenn kein max-width Elter stört) */
      width: 50%; 
      
      /* Zentriert den 50%-breiten Block im Modal-Fenster */
      margin: 0 auto; 
      
      /* Setzt die Textausrichtung (wenn der Text linksbündig sein soll) */
      text-align: left;
      
      /* Stellt sicher, dass das Scrolling weiterhin funktioniert (muss in der Basis-CSS bleiben) */
      /* overflow-y: auto; */ 
  }
}


/* #gif-overlay {
    
    transition: background-color 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    
    will-change: background-color;
    touch-action: manipulation;
} */



/* Die Klasse, die Shopify beim Rendern vergibt */
.in-stock {
    color: #2ecc71; /* Ein schönes "In Stock" Grün */
    font-weight: bold;
    /* -webkit-text-stroke: 0.5px #000000;     */
    /* Animation zuweisen: Name | Dauer | Kurve | Wiederholung */
    animation: pulse-shadow 2s infinite ease-in-out;
}

/* Die Logik für das Pulsieren */
@keyframes pulse-shadow {
    0% {
        text-shadow: 0 0 3px #5d5d5d;
    }
    50% {
        /* Hier blüht der Schatten auf */
        text-shadow: 0 0 12px rgba(46, 204, 113, 0.6);
    }
    100% {
        text-shadow: 0 0 3px #ff0000;
    }
}

.out-of-stock {
    color: #9a0000; /* Ein schönes "In Stock" Grün */
    font-weight: bold;
    /* -webkit-text-stroke: 0.5px #000000;     */
    /* Animation zuweisen: Name | Dauer | Kurve | Wiederholung */
    animation: pulse-shadow 2s infinite ease-in-out;
}

/* Die Logik für das Pulsieren */
@keyframes pulse-shadow {
    0% {
        text-shadow: 0 0 3px #5d5d5d;
    }
    50% {
        /* Hier blüht der Schatten auf */
        text-shadow: 0 0 12px rgba(17, 255, 0, 0.769);
    }
    100% {
        text-shadow: 0 0 3px #ff0000;
    }
}