/* ----------------------------------------------------- */
/* 🔷 Layout Korrektur (Stellt sicher, dass die Grössenänderung funktioniert) */
/* ----------------------------------------------------- */

/* Der äussere Flex-Container, der das Bild und den Text nebeneinander hält */
#vorschau-block {
    display: flex; /* Stellt sicher, dass die Elemente flexibel angeordnet sind */
    align-items: flex-start; /* Stellt sicher, dass der Text oben beginnt */
    /* Fügt eventuell einen kleinen Abstand zwischen Bild und Text hinzu, falls nötig */
    gap: 20px; 
}


/* ----------------------------------------------------- */
/* 🖼️ Bildvorschau: Hover-Zoom Logik */
/* ----------------------------------------------------- */

/* 1. CONTAINER-DEFINITION (Steuert die Größe des gesamten Bildblocks) */
#smallpreviewimg {
    /* Initial sehr klein (z.B. 120px breit) */
    width: 120px;
    height: 160px;
    
    position: relative;
    overflow: hidden;
    
    /* WICHTIG: Erlaubt dem Element, sich beim Hover zu vergrößern */
    transition: width 0.3s ease-out, height 0.3s ease-out; 
    flex-shrink: 0; /* Verhindert, dass es in der Flexbox schrumpft */
    
    padding: 0; /* Stellt sicher, dass das p-2 Padding aus dem HTML nicht stört */
}

/* 2. HOVER-EFFEKT (GROSSE ANSICHT) */
#smallpreviewimg:hover {
    /* Setzen Sie eine deutliche und sichtbare Endgröße */
    width: 350px;
    height: 460px; /* Behält das Seitenverhältnis bei (ca. 4:3) */
    z-index: 5; /* Stellt sicher, dass das Bild über benachbarten Elementen liegt */
}

/* 3. INNERE BILDER UND CONTAINER */
#bildContainer {
    position: relative; 
    width: 100%;       /* Nimmt die Größe von #smallpreviewimg an */
    height: auto;
    overflow: hidden;
    cursor: zoom-in;
	
    border: 2px solid #333; /* dunkler Rahmen */
    padding: 5px;
    display: inline-block;
    position: relative;
    background-color: #fff;


}

#previewimg {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid #ccc;
}


/* ----------------------------------------------------- */
/* 🔍 Lupe/Magnifier (Definiert die kleine Lupe, falls JS-Zoom verwendet wird) */
/* ----------------------------------------------------- */

/* Die Lupe als runde Maske (braucht JS für die Bewegung) */
#zoom-lupe {
    position: absolute;
    border: 3px solid #555;
    border-radius: 5%;
    width: 150px;
    height: 150px;
    background-repeat: no-repeat;
  
    display: none; 
  transform: translate(-50%, -50%);
  pointer-events: none; 
  z-index: 10;
  border-radius: 50%; /* runde Lupe */
  box-shadow: 0 0 8px rgba(0,0,0,0.3);
}

/* Das Lupe-Icon (Das kleine Bild in der Ecke des Vorschaubildes) */
.lupe-icon, 
#lupe {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 30px; 
    height: 30px;
    z-index: 10;
    opacity: 0.9;
}

/* ----------------------------------------------------- */
/* 📜 Unveränderte allgemeine Stile */
/* ----------------------------------------------------- */
.container {
  margin-top: 2px;
  padding: 20px;
}

.col-md-6 {
  padding: 20px;
  border: 1px solid #ccc;
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 10px;
}

/* ... (Rest der unveränderten .info, .form-label, .modal Stile) ... */
.form-label {
  font-weight: bold;
}

.info {
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #ddd;
  font-size: 16px;
}

.info h4 {
  margin-bottom: 15px;
}

.info p {
  margin: 5px 0;
}

.row.text-center h5 {
  margin-bottom: 5px;
}

.versandkosten,
.nachnahme-kosten,
.kommentar {
  font-size: 14px;
  color: #555;
}

#bild-modal {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

#bild-modal img {
  max-width: 80%;
  max-height: 80%;
  border: 4px solid white;
  border-radius: 8px;
}
/* Grundlayout für die Zeilen */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
  align-items: center;
}

/* Labels rechtsbündig */
.col-form-label {
  text-align: left;
  padding-right: 0.5rem;
}

/* Eingabefelder */
.form-select,
.form-control {
  width: 100%;
 
}

/* Anfangs versteckte Blöcke */
#einband_vorn_block,
#einband_hinten_block,
#praegung-block,
#cd-block,
#cd-stueck-block,
#cd-huelle-block,
#cd-direktdruck-block {
  display: none;
}

/* Optional: Sichtbar machen mit Klasse */
.visible {
  display: flex !important;
}

.druck-form, .bindung {
  text-align: right;
}

/*Form */
.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.form-label {
  text-align: left;
  display: block;
}

/* Styling für den Container der Bindungsbeschreibung */
#bindung-erklärung {
    margin-top: 10px;
}

/* Styling für jeden einzelnen Beschreibungspunkt */
.binding-feature {
    margin: 5px 0;
    line-height: 1.2;
    display: flex; /* Für die Ausrichtung des Häkchens */
    align-items: flex-start;
}

/* Styling des Häkchen-Symbols */
.binding-feature .checkmark {
    color: #ff9900; /* Orange/Gold-Farbe für das Häkchen (wie im Beispiel) */
    font-size: 1 em;
    font-weight: bold;
    margin-right: 5px;
    /* Optional: Position anpassen, falls nötig */
    flex-shrink: 0;
}