html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  background-color: #FF0000;
  color: white;
  font-family: "Helvetica", "Arial Black", sans-serif;
  font-weight: bold;
  letter-spacing: -1px;
  text-transform: lowercase;
}

/* Wrapper zentriert alles */
.page-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  text-align: center;
}

.linkleiste {
  display: flex;
  justify-content: space-between;
  width: calc(min(90vw, 90vh, 1024px));
  font-size: clamp(10px, 2.5vmin, 20px);
  gap: 10px;
  flex-wrap: wrap;
  margin: 1.5vmin 0 1.8vmin 0;
}

a {
  text-decoration: none;
  color: white;
  font-weight: bold;
}

a:hover {
  text-decoration: underline;
}

a.standard {
  background-color: #fff;     
  color: #000;                 
  text-decoration: none;    
  padding: 4px 8px;          
  border-radius: 4px;          
  transition: background-color 0.2s;
}

a.standard:hover {
  background-color: #f0f0f0;   
  text-decoration: underline;   
}

/* Zentrale Content-Box */
.content-box {
  position: relative;
  width: calc(min(90vw, 90vh, 1024px));
  height: calc(min(90vw, 90vh, 1024px));
  border: 1px dashed white;
  border-radius: clamp(10px, 2.5vmin, 20px);
  overflow: hidden;
  box-sizing: border-box;
  background: transparent;
}

/* Container für Bild/Video/Text */
.bild-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 1.2%;
}

/* Bild oder Video skalierend einpassen */
.bild-container img,
.bild-container video {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: clamp(4px, 1.5vmin, 12px);
  padding: 0;
}

/* Overlay Text unten links */
.bild-text {
  position: absolute;
  bottom: 3.5%;
  left: calc(4.87% - 5.2px);
  background-color: white;
  color: black;
  font-size: clamp(12px, 2vmin, 24px);
  font-weight: normal;
  padding: 0.3em 0.6em;
  border-radius: 5px;
}

.button-proforma,
.buy-button,
form input.button_go {
  font-size: clamp(3px, 1.5vmin, 16px);
  height: auto;  
  display: inline-block;
  padding: clamp(1px, 0.75vmin, 8px) clamp(4px, 1.5vmin, 16px);
  border: 2px solid #FF0000;
  text-decoration: none;
  font-weight: bold;
  border-radius: clamp(12px, 2vmin, 20px); 
  cursor: pointer;
  
  outline: 2px dashed #ff0000;
  outline-offset: clamp(1px, 0.5vmin, 5px);
  
  background-color: #FF0000;
  color: #FFFFFF;
}

.button-proforma:hover,
.button_go:hover,
form input.button_go:hover {
  background-color: #FFFFFF;
  color: #FF0000;
  text-decoration: none;
}

.buy-button {
  position: absolute;
  bottom: 3.5%;
  right: 4.35%;
}

.paginglinks {
  position: absolute;
  bottom: clamp(1px, calc(3% - 1.2px), 2.5%);
  right: 4.35%;
  margin-left: 5px;
}


.lawtext {
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: 1.2%;
  box-sizing: border-box;
  text-align: left;
  font-weight: normal;
  letter-spacing: 0;
  font-size: clamp(8px, 1.5vmin, 16px);
}


.shoptext {
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: 1.2%;
  box-sizing: border-box;
  text-align: left;
  font-weight: normal;
  letter-spacing: 0;
  font-size: clamp(5px, 1.35vmin, 16px);
  background-color: #FF0000;
  color: #404040;
}

.shoptext.centered {
  display: flex;
  align-items: center;     /* vertikal */
  justify-content: center; /* horizontal */
  text-align: center;
  font-size: 48px;
  line-height: 1.2;
  color: white;
}

.shoptext.two-column {
  width: 100%;
  height: 100%;
  border-radius: clamp(4px, 1.5vmin, 12px);
  box-sizing: border-box; /* padding etc. mitrechnen */
  display: flex;
  gap: 2vmin;
  background-color: white;
  padding: 1.2%;
}

.shoptext.two-column > .left-col,
.shoptext.two-column > .right-col {
  flex: 1 1 50%;
  box-sizing: border-box;
  overflow: auto;         /* damit bei Überhöhe nur in der Spalte scrollt */
}

.shoptext.two-column > .left-col {
  padding: 1.2%; /* gleiches Padding wie .shoptext bzw. .shoptext.two-column */
  box-sizing: border-box;
}

.two-column .right-col img.bild {
  max-width: 85%;
  height: auto;
  display: block;
  margin: 0 auto; 
}

@media (max-width: 300px) {
  .two-column {
    flex-direction: column;
  }
}

.shoptext.two-column .left-col form input.editable,
.shoptext.two-column .left-col form textarea.editable {
  width: 100%;       /* füllt exakt die 60 %-Spalte */
  max-width: 100%;   /* nicht darüber hinaus */
}

.editable {
  border-radius: 0.5rem;
}

textarea.editable,
input[type="text"].editable {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  box-shadow: none;
  border: 1px solid gray;
  border-radius: 8px;
  
  padding: clamp(0.2em, 0.6vh, 0.3em) clamp(0.3em, 1.2vw, 0.4em);
  min-height: 0.3em;
  line-height: 1.4;
  font-size: clamp(5px, 1.5vmin, 16px);
}

.form-row {
  margin-bottom: clamp(0.15rem, 0.5vh, 0.5rem);
}

.form-row .form-field {
  display: flex;
  align-items: center;
  gap: clamp(0.2rem, 1vw, 1rem);
}

.form-row .formCheckbox {
  flex-shrink: 0;
}

.form-row .formCheckbox input[type="checkbox"] {
  width:  clamp(1rem, 2.5vmin, 1.5rem);
  height: clamp(1rem, 2.5vmin, 1.5rem);
  border-radius: 0.5rem;
  accent-color: #FF0000;  
}

.form-row .formCheckboxLabel {
  flex: 1;
  line-height: 1.2;
}

.button-block {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; 
  gap: clamp(0.2rem, 1vw, 1rem);
}

.button-block .button_go {
  margin-top: clamp(0.1rem, 1vh, 0.75rem);
  flex: 0 1 auto;
  
  padding: clamp(2px, 0.5vmin, 6px) clamp(6px, 1vmin, 12px);
  font-size: clamp(5px, 1.2vmin, 14px);
}